/* ════════════════════════════════════════════════════════════
   SGI-Standalone · ОБЩИЙ СТИЛЬ · «Стиль Б» (как в Задачнике)
   Светлая тема iOS: фон #F4F6F8, белые карточки, синий акцент #0A84FF.
   Тёмная тема — тот же синий акцент (медь убрана полностью).
   Старые имена (--bg-2, --acc, --ok-bg ...) сохранены как АЛИАСЫ.
   ════════════════════════════════════════════════════════════ */
/* ТЁМНАЯ ТЕМА «ГРАФИТ + МЕДЬ» — премиальный вид уровня холдинга (как на слайдах СГИ) */
/* ТЁМНАЯ «ГРАФИТ + медь» — осветлена (Раиль: слишком тёмный фон, буквы тяжело). Фон светлее, текст ярче/контрастнее. */
:root[data-theme="dark"]{
  --bg:#22262E; --surface:#2C313B; --surface-2:#363C48; --elevated:#363C48;
  --border:rgba(255,250,240,0.12); --border-2:rgba(232,153,58,0.42);
  --t1:#FCFAF6; --t2:#DCD6CC; --t3:#A8A299;
  --acc:#F0A24A; --acc-soft:rgba(240,162,74,0.18);
  --ok:#6FCB92; --ok-soft:rgba(111,203,146,0.18);
  --warn:#EBB75E; --warn-soft:rgba(235,183,94,0.18);
  --bad:#F0786A; --bad-soft:rgba(240,120,106,0.20);
  --info:#82B4E6; --info-soft:rgba(130,180,230,0.18);
  --shadow:0 1px 2px rgba(0,0,0,0.4),0 8px 24px rgba(0,0,0,0.35);
  --acc-grad-d:linear-gradient(135deg,#F0A24A,#D2731F);
}
:root[data-theme="dark"]{ --acc-grad:linear-gradient(135deg,#E8993A,#C7651F); }
:root[data-theme="light"]{
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#EAEEF2; --elevated:#FFFFFF;
  --border:rgba(26,29,36,0.10); --border-2:rgba(26,29,36,0.18);
  --t1:#1A1D24; --t2:#5A6472; --t3:#8A93A0;
  --acc:#0A84FF; --acc-soft:rgba(10,132,255,0.12);
  --ok:#2E9E5B; --ok-soft:rgba(46,158,91,0.12);
  --warn:#E08A1E; --warn-soft:rgba(224,138,30,0.14);
  --bad:#E0463A; --bad-soft:rgba(224,70,58,0.12);
  --info:#5A7CA8; --info-soft:rgba(90,124,168,0.12);
  --shadow:0 1px 3px rgba(26,29,36,0.06);
}
/* АЛИАСЫ старых имён → на новые (чтобы прежние экраны жили) */
:root{
  --bg-0:var(--bg); --bg-1:var(--surface); --bg-2:var(--surface);
  --bg-3:var(--surface-2); --bg-4:var(--surface-2); --bg-5:var(--border-2);
  --t-1:var(--t1); --t-2:var(--t2); --t-3:var(--t3); --t-4:var(--t3);
  --sep:var(--border); --sep-2:var(--border-2); --sep-3:var(--border-2);
  --acc-2:var(--acc); --acc-glow:var(--acc-soft);
  --acc-grad:linear-gradient(180deg,#2E97FF,#0A6FD6);
  --warn-bg:var(--warn-soft); --warn-line:var(--warn);
  --bad-bg:var(--bad-soft); --bad-line:var(--bad);
  --ok-bg:var(--ok-soft); --ok-line:var(--ok);
  --info-bg:var(--info-soft); --info-line:var(--info);
  --sh-s:var(--shadow); --sh-m:var(--shadow); --sh-l:0 14px 44px rgba(26,29,36,0.22);
  --on-acc:#FFFFFF; --r-s:8px; --r-m:11px; --r-l:14px; --ease:cubic-bezier(.4,0,.2,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{background:var(--bg); color:var(--t1); font-family:var(--font); font-size:13px; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased; transition:background .25s,color .25s;}
a{color:inherit; text-decoration:none;}

/* ── Топбар ── */
.top{display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; align-items:center;
  padding:11px 22px; background:var(--surface); border-bottom:1px solid var(--border); height:56px;}
.brand{display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px;}
.brand-ico{width:28px; height:28px; border-radius:7px; background:var(--acc-grad); color:#fff;
  display:grid; place-items:center; font-size:14px; font-weight:700;}
.bc{font-size:13px; color:var(--t2); display:flex; gap:7px; align-items:center; min-width:0;}
.bc a, .bc strong{white-space:nowrap; flex:none;}
#bc-proj{flex:0 1 auto; min-width:50px; overflow:hidden; text-overflow:ellipsis; max-width:230px;}
.bc a:hover{color:var(--acc);} .bc .sep{color:var(--t3);} .bc strong{color:var(--t1); font-weight:600;}
.back-link{display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--t1); font-weight:600; font-size:12.5px;}
.back-link:hover{border-color:var(--acc); color:var(--acc);}
.search{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:9px; padding:7px 13px; color:var(--t3); font-size:12.5px; width:260px; cursor:text;}
.role{display:flex; align-items:center; gap:8px;}
.role-btn{padding:6px 13px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--t2); cursor:pointer; border:1px solid var(--border); background:var(--surface-2);}
.role-btn:hover{color:var(--acc); border-color:var(--acc);}
/* тумблер темы */
.theme-tgl{display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:2px;}
.theme-tgl button{border:none; background:none; color:var(--t2); font-size:12.5px; padding:5px 10px; border-radius:6px; cursor:pointer; font-family:inherit;}
.theme-tgl button.on{background:var(--elevated); color:var(--t1); box-shadow:var(--shadow);}

/* ── Чипы ── */
.chip{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:600;}
.chip.ok{background:var(--ok-soft); color:var(--ok);}
.chip.warn{background:var(--warn-soft); color:var(--warn);}
.chip.bad{background:var(--bad-soft); color:var(--bad);}
.chip.acc{background:var(--acc-soft); color:var(--acc);}
.chip.mute{background:var(--surface-2); color:var(--t2); border:1px solid var(--border);}

/* ── Светофор ── */
.tl{display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:0; margin-right:5px;}
.tl.gray{background:var(--t3);} .tl.green{background:var(--ok);} .tl.yellow{background:var(--warn);} .tl.red{background:var(--bad);}

/* ── Кнопки ── */
.btn{padding:8px 14px; border-radius:8px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--t1); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;}
.btn:hover{border-color:var(--acc); color:var(--acc);}
.btn-primary{background:var(--acc-grad); border:none; color:#fff;}
.btn-primary:hover{color:#fff; opacity:.92;}

/* ── Панели / карточки ── */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-m); box-shadow:var(--shadow);}
.tbl{width:100%; border-collapse:collapse; font-size:12.5px;}
.tbl th,.tbl td{padding:9px 12px; border:1px solid var(--border); text-align:left;}
.tbl th{background:var(--surface-2); color:var(--t2); font-size:11px; text-transform:uppercase; letter-spacing:0.4px;}

/* ── Модалка ── */
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:100; display:none; align-items:center; justify-content:center; padding:24px;}
.modal-bg.open{display:flex;}
.modal{width:560px; max-width:96vw; max-height:90vh; background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-l); box-shadow:var(--sh-l); overflow:auto; display:flex; flex-direction:column;}
.modal-h{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:15px 18px; border-bottom:1px solid var(--border);}
.modal-h .ico{width:34px; height:34px; border-radius:8px; background:var(--acc-soft); color:var(--acc); display:grid; place-items:center; font-size:16px;}
.modal-h .tt{font-weight:600; font-size:15px;} .modal-h .ss{font-size:11.5px; color:var(--t3); margin-top:1px;}
.modal-body{padding:18px;}
.x{width:36px; height:36px; border-radius:9px; background:none; color:#E25555; border:1px solid var(--border); cursor:pointer; font-size:18px; display:grid; place-items:center;}

::-webkit-scrollbar{width:9px; height:9px;} ::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:9px;}

/* роль-заполнения */
/* Видимость кнопок заполнения по роли. Заполняющие (gip/smr/buh/snab) → role-fill; руководство (admin/gip) → role-mgr; админ → role-adm. */
.fill-only{display:none;} body.role-fill .fill-only, body.role-kush .fill-only{display:inline-flex;}
.mgr-only{display:none;} body.role-mgr .mgr-only{display:inline-flex;}
.adm-only{display:none;} body.role-adm .adm-only{display:inline-flex;}

/* ── сквозной поиск в шапке ── */
.top .search{position:relative; display:flex; align-items:center; gap:7px;}
.gs-ico{flex:none; font-size:13px;}
.gs-inp{flex:1; min-width:0; border:none; background:none; font-family:inherit; font-size:12.5px; color:var(--t1); outline:none;}
.gs-inp::placeholder{color:var(--t3);}
.gs-drop{position:absolute; top:calc(100% + 6px); left:0; right:0; min-width:340px; max-height:420px; overflow-y:auto; background:var(--surface); border:1px solid var(--border-2); border-radius:12px; box-shadow:var(--shadow); z-index:80;}
.gs-row{display:grid; grid-template-columns:88px 1fr; gap:2px 10px; padding:9px 13px; cursor:pointer; border-bottom:1px solid var(--border);}
.gs-row:last-child{border-bottom:none;}
.gs-row:hover{background:var(--acc-soft);}
.gs-type{grid-row:1/3; align-self:center; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--acc); background:var(--acc-soft); border-radius:99px; padding:2px 7px; text-align:center; white-space:nowrap;}
.gs-title{font-size:12.5px; font-weight:600; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gs-sub{font-size:10.5px; color:var(--t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gs-empty{padding:16px; text-align:center; font-size:12px; color:var(--t3);}

/* ════════════════════════════════════════════════════════════
   ВИЗУАЛЬНОЕ УСИЛЕНИЕ — «уровень холдинга»: глубина, анимации, типографика
   Применяется ко всем экранам через общие классы.
   ════════════════════════════════════════════════════════════ */

/* — Глубина и hover-подъём карточек (мягко, не навязчиво) — */
.card,.stat,.kpi,.panel,.panel2,.hub-card,.pcard,.budget-box,.bignum,.sm,.reg-head,.phead{
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card:hover,.hub-card:hover,.pcard:hover{ box-shadow:0 6px 22px rgba(0,0,0,0.10); }
:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .hub-card:hover,
:root[data-theme="dark"] .pcard:hover{ box-shadow:0 6px 26px rgba(0,0,0,0.5); }

/* — Плавное появление контента при загрузке экрана — */
@keyframes sgi-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.wrap > *, .shell > *{ animation:sgi-rise .32s var(--ease) both; }
.wrap > *:nth-child(2){ animation-delay:.04s; }
.wrap > *:nth-child(3){ animation-delay:.08s; }
.wrap > *:nth-child(4){ animation-delay:.12s; }
.wrap > *:nth-child(5){ animation-delay:.16s; }
@media (prefers-reduced-motion: reduce){ .wrap > *,.shell > *{ animation:none; } }

/* — Рост полос прогресса и колец (анимация заполнения) — */
.pbar .f,.fin-fill,.mfill,.bar-fill,.fill,.mbar .mfill{ transition:width .6s var(--ease); }
svg circle[stroke-dasharray]{ transition:stroke-dasharray .7s var(--ease); }

/* — Крупная типографика чисел (солидные KPI) — */
.kpi-v,.stat-v,.bignum .v,.an .v,.sm-txt .v,.ph-stat-v{ letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }

/* — Градиентная заливка главных кнопок и вердиктов (объём) — */
.btn-primary,.role-btn.on,.send{ background:var(--acc-grad); box-shadow:0 2px 10px var(--acc-soft); }
.btn-primary:hover{ box-shadow:0 4px 16px var(--acc-soft); transform:translateY(-1px); }

/* — Лёгкое свечение акцентной рамки текущего/важного (медь в тёмной) — */
:root[data-theme="dark"] .card.now,
:root[data-theme="dark"] .phead{ box-shadow:0 0 0 1px var(--border-2), 0 8px 28px rgba(0,0,0,0.45); }

/* — Бейдж-вердикт с градиентом (как «Минимум рисков»/«В работе» на слайдах) — */
.verdict-pill{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:7px 14px; border-radius:99px; }
.verdict-pill.ok{ background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok); }
.verdict-pill.warn{ background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn); }
.verdict-pill.bad{ background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad); }

/* — Палитра-переключатель в шапке (как на слайдах) — */
.palette{ display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:5px 11px; cursor:pointer; font-size:12px; }
.palette .sw{ width:16px; height:16px; border-radius:5px; background:var(--acc-grad); flex:none; }
.palette .pl{ color:var(--t3); font-size:9px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.palette .pn{ color:var(--t1); font-weight:700; }

/* ════════════════════════════════════════════════════════════
   ЛЕВЫЙ САЙДБАР (сквозная навигация) + контент на всю ширину
   ════════════════════════════════════════════════════════════ */
body.has-sidebar{ padding-left:228px; transition:padding-left .2s var(--ease); }
body.has-sidebar.sb-collapsed{ padding-left:62px; }
.sidebar{ position:fixed; top:0; left:0; bottom:0; width:228px; background:var(--surface); border-right:1px solid var(--border); z-index:90; display:flex; flex-direction:column; padding:12px 10px; transition:width .2s var(--ease); overflow:hidden; }
body.sb-collapsed .sidebar{ width:62px; }
.sb-brand{ display:flex; align-items:center; gap:9px; padding:6px 8px 14px; font-weight:700; font-size:14px; white-space:nowrap; }
.sb-brand .brand-ico{ width:30px; height:30px; border-radius:8px; background:var(--acc-grad); color:#fff; display:grid; place-items:center; font-size:15px; flex:none; }
.sb-toggle{ position:absolute; top:14px; right:8px; width:26px; height:26px; border:none; background:var(--surface-2); border-radius:7px; color:var(--t2); cursor:pointer; font-size:13px; }
.sb-item{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; color:var(--t2); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; margin-bottom:2px; }
.sb-item:hover{ background:var(--surface-2); color:var(--t1); }
.sb-item.on{ background:var(--acc-soft); color:var(--acc); }
.sb-item .ic{ font-size:16px; width:20px; text-align:center; flex:none; }
body.sb-collapsed .sb-item .lbl, body.sb-collapsed .sb-brand span{ display:none; }
.sb-sep{ height:1px; background:var(--border); margin:8px 4px; }
.sb-foot{ margin-top:auto; }
/* Подвал сайдбара: кто вошёл + Выход */
.sb-user{ margin-top:auto; padding-top:10px; border-top:1px solid var(--border); }
.sb-u-info{ display:flex; align-items:center; gap:9px; padding:6px 8px; }
.sb-u-av{ width:30px; height:30px; border-radius:50%; background:var(--acc-grad); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:800; flex:none; }
.sb-u-txt{ min-width:0; }
.sb-u-name{ font-size:12.5px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-u-role{ font-size:10.5px; color:var(--t3); white-space:nowrap; }
.sb-logout{ display:flex; align-items:center; gap:11px; width:100%; margin-top:6px; padding:9px 11px; border:1px solid var(--border-2); background:var(--surface-2); border-radius:9px; color:var(--bad); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.sb-logout:hover{ background:var(--bad-soft); }
.sb-logout .ic{ font-size:15px; width:20px; text-align:center; flex:none; }
body.sb-collapsed .sb-u-txt, body.sb-collapsed .sb-logout .lbl{ display:none; }
/* контент во всю ширину при сайдбаре */
body.has-sidebar .wrap{ max-width:none; }
@media(max-width:760px){ body.has-sidebar{ padding-left:0; } .sidebar{ display:none; } }

/* ════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ РЕЖИМ — переключатель Десктоп/Мобильный + авто на узких экранах.
   В моб.режиме: сайдбар = выезжающее меню, контент во всю ширину, таблицы
   скроллятся внутри, модалки почти на весь экран, шапка переносится.
   ════════════════════════════════════════════════════════════ */
/* Кнопка-гамбургер мобильного меню (создаётся в api.js, в шапке) */
.mob-burger{ display:none; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border-2); background:var(--surface-2); border-radius:9px; font-size:18px; color:var(--t1); cursor:pointer; }
/* затемнение под выехавшим меню */
.mob-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:95; display:none; }
/* тумблер вида в шапке */
.view-tgl{ display:inline-flex; border:1px solid var(--border-2); border-radius:9px; overflow:hidden; margin-right:8px; }
.view-tgl button{ border:none; background:var(--surface); color:var(--t2); font-size:11.5px; font-weight:700; padding:6px 9px; cursor:pointer; font-family:inherit; }
.view-tgl button.on{ background:var(--acc-soft); color:var(--acc); }

/* === Применяется когда тело в моб.режиме (класс) ИЛИ экран узкий === */
body.view-mobile.has-sidebar{ padding-left:0 !important; }
body.view-mobile .mob-burger{ display:inline-flex; }
/* Сайдбар → выезжающая панель слева */
body.view-mobile .sidebar{ display:flex !important; width:248px !important; transform:translateX(-110%); transition:transform .22s var(--ease); box-shadow:0 0 40px rgba(0,0,0,.3); }
body.view-mobile.sb-open .sidebar{ transform:translateX(0); }
body.view-mobile.sb-open .mob-backdrop{ display:block; }
body.view-mobile .sidebar .sb-item .lbl{ display:inline !important; }  /* в выезжающем меню подписи видны */
body.view-mobile .sb-toggle{ display:none; }
/* Контент во всю ширину, увеличенные отступы под палец */
body.view-mobile .wrap{ max-width:none !important; padding:14px 14px 70px !important; }
body.view-mobile .top{ flex-wrap:wrap; gap:8px; padding:8px 12px; position:sticky; top:0; z-index:80; }
body.view-mobile .top .search{ order:5; flex-basis:100%; }
body.view-mobile .top .bc{ font-size:12px; }
/* Таблицы: горизонтальный скролл внутри своего блока, не разрывает экран */
body.view-mobile table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
body.view-mobile .tbl-wrap{ max-width:100%; }
/* Модалки почти на весь экран */
body.view-mobile .modal,
body.view-mobile .mbg > div{ width:96vw !important; max-width:96vw !important; }
/* Поля ввода 16px — iOS не зумит при фокусе */
body.view-mobile input, body.view-mobile select, body.view-mobile textarea{ font-size:16px !important; }
/* Сетки KPI/карточек в одну колонку */
body.view-mobile .pcards,
body.view-mobile .years,
body.view-mobile .chart-2,
body.view-mobile .ymetrics{ grid-template-columns:1fr !important; }
/* кнопки крупнее под палец */
body.view-mobile .btn-add, body.view-mobile .btn-new, body.view-mobile .btn-pri, body.view-mobile .go{ min-height:44px; }

/* === ШАПКА: не ломается на узких окнах (пол-экрана Mac) === */
/* колонки могут сжиматься, ничего не вылезает за край */
.top{ min-width:0; }
.top .search{ min-width:0; }
.top .role{ display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; justify-content:flex-end; }
.theme-tgl{ flex:none; }

/* === СРЕДНИЙ ДИАПАЗОН (планшет / пол-экрана Mac, 761–1100px) === */
/* Сайдбар авто-сворачивается в иконки — контенту больше места, ничего не «ломается». */
@media (min-width:761px) and (max-width:1100px){
  body.has-sidebar:not(.view-mobile){ padding-left:62px; }
  body.has-sidebar:not(.view-mobile) .sidebar{ width:62px; }
  body.has-sidebar:not(.view-mobile) .sidebar .lbl,
  body.has-sidebar:not(.view-mobile) .sidebar .sb-brand span,
  body.has-sidebar:not(.view-mobile) .sidebar .sb-u-txt,
  body.has-sidebar:not(.view-mobile) .sidebar .sb-logout .lbl{ display:none; }
  /* шапка: прячем декоративный поиск, чтобы хватило места кнопкам */
  .top{ grid-template-columns:auto 1fr auto; gap:10px; padding:11px 14px; }
  .top .search{ display:none; }
  /* таблицы и контейнеры не выходят за экран */
  .wrap{ padding-left:18px; padding-right:18px; }
  table{ display:block; overflow-x:auto; max-width:100%; }
}

/* На очень узком — поиск в шапке прячем и в моб.режиме (дублирующая страховка) */
@media (max-width:760px){ .top .search{ display:none; } }