/* =================================================================
   КОМПОНЕНТЫ — карточки, KPI, таблица, бейджи, тумблер, модалка,
   кнопки, плитки выбора стиля, контейнер графика Chart.js.
   Все цвета только через токены (см. tokens.css).
   ================================================================= */

/* =================================================================
   КАРТОЧКА
   ================================================================= */
.card{
  background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--radius-card);
  box-shadow:var(--shadow-key),var(--shadow-ambient);
  position:relative;
}
/* стекло-специфичный каркас карточки */
html[data-style="glass"] .card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
html[data-style="glass"] .card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--glass-edge),transparent 38%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;opacity:.9;
}

/* =================================================================
   KPI
   ================================================================= */
.kpi{padding:15px 17px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .22s ease}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--hair-2)}
/* min-height резервирует место под 2 строки подписи → числа во всех плашках ряда на одной линии */
.kpi .label{font-size:11.5px;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase;font-weight:550;min-height:2.5em;display:flex;align-items:flex-start}
.kpi .num{font-size:clamp(21px,2.3vw,30px);font-weight:680;letter-spacing:-.025em;margin:9px 0 6px;line-height:1;white-space:nowrap}
.kpi .num small{font-size:14px;color:var(--text-3);font-weight:500;margin-left:3px;letter-spacing:0}
.kpi .num.loss{color:var(--danger)}
.kpi .num.gain{color:var(--ok)}
/* 2 главные плашки (Итоговый баланс + На сотрудника) — крупнее и подсвечены. */
.kpis-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:11px;margin-bottom:14px}
.kpis-hero>.kpi.kpi-hero{background:var(--accent-soft);border-color:var(--accent-line)}
.kpis-hero>.kpi.kpi-hero .num{font-size:clamp(27px,3vw,38px)}
.kpis-hero>.kpi.kpi-hero .label{color:var(--text-1)}
.kpi .sub{font-size:12px;color:var(--text-2)}
.kpi .sub.neg{color:var(--danger)}
/* Тревожная плашка (напр. «Не вышли на работу») — залита светло-красным целиком,
   чтобы бросалась в глаза, а не только полоской сбоку. */
.kpi.alarm{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.kpi.alarm .label,.kpi.alarm .num{color:var(--danger)}

/* Сворачиваемый длинный блок (портянка отчёта):
   <details class="foldable"><summary>Заголовок</summary> …содержимое… </details> */
.foldable>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:16px 20px;font-size:15px;font-weight:600;color:var(--text-1)}
.foldable>summary::-webkit-details-marker{display:none}
/* Заметная кнопка-подпись «Свернуть/Развернуть» (акцентная, чтобы не была невидимой). */
.foldable>summary::after{content:"Развернуть ▾";color:var(--accent);font-size:12.5px;font-weight:600;white-space:nowrap;flex:none}
.foldable[open]>summary::after{content:"Свернуть ▴"}

/* =================================================================
   ПАНЕЛЬ (заголовок панели графика/таблицы)
   ================================================================= */
.panel{padding:0}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;padding:20px 24px 0}
html[data-style="sgi"] .panel-head{padding:16px 22px;border-bottom:1px solid var(--hair);margin-bottom:0}
.panel-head h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
/* Базовый приглушённый цвет для .hint вне panel/set-view (напр. раздел «Аномалии»).
   Токен, не хардкод. Scoped-правила ниже переопределяют размер шрифта, где нужно. */
.hint{color:var(--text-3)}
.panel-head .hint{font-size:11.5px;color:var(--text-3)}
.panel-body{padding:22px 24px}

/* =================================================================
   КОНТЕЙНЕР ГРАФИКА Chart.js
   ================================================================= */
.chart-wrap{position:relative;width:100%;height:230px;overflow:hidden}
.chart-wrap canvas{width:100%!important;height:100%!important;display:block}
/* Режим прокрутки (много точек): столбцы скроллятся по горизонтали ВНУТРИ .chart-scroll,
   а ось Y — отдельной НЕПОДВИЖНОЙ колонкой .chart-yaxis слева (не уезжает). */
.chart-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;height:100%;width:100%;-webkit-overflow-scrolling:touch}
.chart-inner{position:relative;height:100%}
.chart-inner canvas{width:100%!important;height:100%!important}
.chart-yaxis{position:absolute;left:0;top:0;bottom:0;width:52px;z-index:3;pointer-events:none;
  background:var(--surface-2)}
.chart-yaxis-lab{position:absolute;right:6px;transform:translateY(-50%);font-size:10px;
  color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}

/* =================================================================
   ТАБЛИЦА
   ================================================================= */
.tablewrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%;padding:22px 24px}
html[data-style="sgi"] .tablewrap{padding:22px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
html[data-style="sgi"] table{border:1px solid var(--border-strong);border-radius:var(--radius-ctrl);overflow:hidden}
thead th{
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);text-align:left;padding:0 14px 12px;
  background:var(--surface-2);border-bottom:1px solid var(--hair-2);
}
html[data-style="sgi"] thead th{padding:11px 14px;background:var(--surface-head);color:var(--text-2);border-bottom:1px solid var(--hair);text-transform:none;letter-spacing:0;font-size:11.5px}
html[data-style="glass"] thead th{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
thead th.r,tbody td.r{text-align:right}
thead th.c,tbody td.c{text-align:center}
thead th,tbody td{vertical-align:middle}   /* содержимое по центру ячейки по высоте (не «прижато вверх») */
tbody td{
  padding:13px 14px;color:var(--text-1);
  border-bottom:1px solid var(--hair);
}
tbody td:last-child,thead th:last-child{border-right:0}
/* вертикальные грани между колонками */
thead th+th,tbody td+td{border-left:1px solid var(--hair)}
tbody tr:hover{background:var(--surface-3)}
html[data-style="sgi"] tbody tr:hover{background:var(--accent-soft)}
html[data-style="glass"] tbody tr:hover{background:var(--surface-1)}
tbody tr:last-child td{border-bottom:0}
html[data-style="sgi"] tbody tr:last-child td{border-bottom:0}
.r{font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}  /* деньги/числа не переносим — иначе строка «раздувается» и текст уезжает вверх */
td .name{font-weight:520}
.neg-c{color:var(--danger);font-weight:600}
.pos-c{color:var(--ok);font-weight:600}
.zero-c{color:var(--muted)}
/* первый столбец «Позиция» закреплён. СОЛИДНАЯ непрозрачная подложка (--col-stick) +
   отключённый backdrop-filter — чтобы при горизонтальной прокрутке под ним НЕ просвечивали
   ни фон, ни соседние колонки. В «стекле» --surface-2 полупрозрачный, поэтому задаём отд. солид. */
thead th:first-child,tbody td:first-child{
  position:sticky;left:0;z-index:2;vertical-align:middle;
  --col-stick:var(--surface-2);
  background:var(--col-stick) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
thead th:first-child{z-index:3}

/* Стиль «pro» (склад): чёткая рамка таблицы + заметные грани между колонками.
   По умолчанию --hair слишком бледный на тёмной теме — берём --hair-2. */
html[data-style="pro"] table{border:1px solid var(--hair-2);border-radius:10px}
html[data-style="pro"] thead th{border-bottom:1px solid var(--hair-2);background:var(--surface-3)}
html[data-style="pro"] thead th+th,
html[data-style="pro"] tbody td+td{border-left:1px solid var(--hair-2)}
html[data-style="pro"] tbody td{border-bottom:1px solid var(--hair-2)}
html[data-style="pro"] tbody tr:last-child td{border-bottom:0}
html[data-style="pro"] thead th:first-child{border-top-left-radius:10px}
html[data-style="pro"] thead th:last-child{border-top-right-radius:10px}
/* нижние углы таблицы тоже скругляем — иначе левый/правый нижний угол «оборван» */
html[data-style="pro"] tbody tr:last-child td:first-child{border-bottom-left-radius:10px}
html[data-style="pro"] tbody tr:last-child td:last-child{border-bottom-right-radius:10px}

/* =================================================================
   ПАНЕЛЬ УПРАВЛЕНИЯ / ТУМБЛЕР (стиль iPhone)
   ================================================================= */
.controls{padding:22px 24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.toggle-row{display:flex;align-items:center;gap:14px}
.switch{
  --w:46px;--h:27px;
  width:var(--w);height:var(--h);border-radius:99px;flex:none;
  background:var(--surface-4);border:1px solid var(--hair);
  position:relative;cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .2s cubic-bezier(.4,.2,.2,1);
}
.switch.on{background:var(--accent);border-color:var(--accent)}
html[data-style="glass"] .switch.on{box-shadow:0 0 14px -2px var(--accent-glow)}
.switch.on::after{transform:translateX(19px)}
.toggle-row .lab{font-size:13.5px;color:var(--text-1)}

/* =================================================================
   БЕЙДЖИ
   ================================================================= */
.badges{display:flex;gap:10px;margin-left:auto}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:550;padding:7px 12px;border-radius:var(--radius-chip);
  border:1px solid transparent;
}
.badge .dot{width:7px;height:7px;border-radius:50%}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.badge.ok .dot{background:var(--ok)}
.badge.bad{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
.badge.bad .dot{background:var(--danger)}
.badge.neutral{background:var(--surface-3);color:var(--text-2);border-color:var(--hair)}
.badge.neutral .dot{background:var(--muted)}
html[data-style="sgi"] .badge{border-color:transparent}

/* ---- Настройки → Внешний вид (плитки выбора стиля и темы) ---- */
.set-h{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:.02em;margin-bottom:14px}
.style-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.style-tile{appearance:none;cursor:pointer;text-align:left;font-family:inherit;
  background:var(--surface-3);border:1.5px solid var(--hair);border-radius:var(--radius-ctrl);
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
  transition:border-color .18s ease,background-color .18s ease}
.style-tile:hover{border-color:var(--hair-2)}
.style-tile.active{border-color:var(--accent);background:var(--accent-soft)}
.st-name{font-size:14px;font-weight:600;color:var(--text-1)}
.st-desc{font-size:12px;color:var(--text-3)}
.theme-tiles{display:flex;gap:10px;flex-wrap:wrap}
.theme-tile{appearance:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:550;
  padding:9px 22px;border-radius:var(--radius-ctrl);color:var(--text-2);
  background:var(--surface-3);border:1.5px solid var(--hair);transition:all .18s ease}
.theme-tile:hover{color:var(--text-1)}
.theme-tile.active{border-color:var(--accent);background:var(--accent-soft);color:var(--text-1)}

/* ---- Настройки → строки параметров (Профиль / Рабочее место / Склад) ---- */
.set-rows{display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 0;border-top:1px solid var(--hair)}
.set-rows>.set-row:first-child,.card>.set-row:first-of-type{border-top:0}
.set-row .slabel{font-size:13.5px;font-weight:550;color:var(--text-1)}
.set-row .sval{font-size:13.5px;color:var(--text-2)}
.set-row .ssub,.ssub{font-size:12px;color:var(--text-3);margin-top:2px}
.set-view .hint,#set-view .hint{font-size:13px;color:var(--text-3)}

/* ---- Вкладки внутри раздела (под-навигация) ---- */
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--hair)}
.subtab{appearance:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:550;
  padding:10px 16px;border:0;background:transparent;color:var(--text-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease}
.subtab:hover{color:var(--text-1)}
.subtab.active{color:var(--accent);border-bottom-color:var(--accent)}
html[data-style="sgi"] .subtab.active{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}

/* выбор периода/отчёта и т.п. */
.field-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.field-row label{font-size:13px;color:var(--text-2)}

/* Пилюли-переключатели (единый компонент). На телефоне — один ряд, горизонтальный скролл. */
.pill-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill-row-btn{font-size:13px;padding:8px 15px;border-radius:999px;font-family:inherit;cursor:pointer;background:transparent;border:1px solid var(--hair);color:var(--text-1);white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease}
.pill-row-btn:hover{border-color:var(--hair-2)}
.pill-row-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
@media(max-width:760px){
  .pill-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .pill-row::-webkit-scrollbar{display:none}
  .pill-row>*{flex:0 0 auto}
  .subtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .subtabs::-webkit-scrollbar{display:none}
  .subtab{flex:0 0 auto;white-space:nowrap}
}
select.sel,select.inp,input.inp{font-family:inherit;font-size:13.5px;color:var(--text-1);box-sizing:border-box;
  background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--radius-ctrl);padding:8px 12px}
select.sel:focus,select.inp:focus,input.inp:focus{outline:0;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
/* Селекты ТМЦ (класс .inp) — единый стиль с инпутами: та же высота, скругление,
   свой шеврон вместо родного (нативный делал их ниже и с острыми углами). */
select.inp{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}

/* =================================================================
   ПЛИТКИ ВЫБОРА СТИЛЯ (для раздела «Настройки»)
   ================================================================= */
.style-strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--hair);
  border-radius:var(--radius-card);box-shadow:var(--shadow-key);
  padding:14px 18px;margin-bottom:26px;
}
html[data-style="glass"] .style-strip{
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.style-strip .lab{font-size:12px;color:var(--text-2);font-weight:550;letter-spacing:.01em}
.style-pills{display:inline-flex;gap:6px;padding:4px;border-radius:999px;background:var(--surface-3);border:1px solid var(--hair)}
.style-pill{
  appearance:none;border:1px solid transparent;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:550;
  padding:7px 16px;border-radius:999px;
  color:var(--text-2);background:transparent;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.style-pill:hover{color:var(--text-1)}
.style-pill.active{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
html[data-style="sgi"] .style-pill.active{color:#fff}
html[data-style="glass"] .style-pill.active{box-shadow:0 0 14px -2px var(--accent-glow)}

/* =================================================================
   КНОПКИ
   ================================================================= */
.btn{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:550;letter-spacing:-.01em;
  padding:9px 16px;border-radius:var(--radius-ctrl);
  border:1px solid var(--hair);background:var(--surface-2);color:var(--text-1);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;flex:none}
.btn:hover{background:var(--surface-3);border-color:var(--hair-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent);filter:brightness(1.06)}
html[data-style="glass"] .btn.primary{box-shadow:0 0 14px -2px var(--accent-glow)}
.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
.btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

/* ---- Документы: действия в таблице (звёздочка избранного, компактное «Скачать») ---- */
.doc-star{
  appearance:none;cursor:pointer;font-family:inherit;
  background:none;border:none;padding:2px 6px;margin-right:6px;
  font-size:16px;line-height:1;color:var(--text-3);
  transition:color .18s ease,transform .12s ease;
}
.doc-star:hover{transform:scale(1.12)}
.doc-star.is-fav{color:var(--accent)}
.btn.doc-dl{padding:5px 12px;font-size:12.5px;border-radius:var(--radius-chip)}

/* ---- Форма в модалке (например, добавление сотрудника) ---- */
.modal-form{display:flex;flex-direction:column;gap:13px;min-width:min(360px,80vw)}
.modal-form>.form-field,.modal-form>.form-err{padding:0 22px}
.modal-form>.form-field:first-of-type{padding-top:18px}
.modal-form .modal-body{display:flex;flex-direction:column;gap:12px}
.check-row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-1);cursor:pointer}
.check-row input{width:16px;height:16px;accent-color:var(--accent);flex:none}

/* ---- Глазик показа пароля (экран входа) ---- */
.pwd-wrap{position:relative;display:flex;align-items:center}
.pwd-wrap .inp{flex:1;width:100%;padding-right:42px}
.pwd-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:0;color:var(--text-3);border-radius:8px}
.pwd-eye:hover{color:var(--text-1)}
.pwd-eye.on{color:var(--accent)}
.pwd-eye svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none}

/* ---- Мобильное меню «Ещё»: нижний лист со всеми разделами ---- */
.more-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:color-mix(in srgb,#000 48%,transparent);opacity:0;transition:opacity .18s ease}
.more-sheet.open{opacity:1}
.more-panel{width:100%;max-width:680px;background:var(--surface-1);border:1px solid var(--hair);border-bottom:0;
  border-radius:18px 18px 0 0;padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -18px 50px rgba(0,0,0,.45);transform:translateY(18px);transition:transform .2s ease}
.more-sheet.open .more-panel{transform:translateY(0)}
html[data-style="glass"] .more-panel{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:var(--glass-bg)}
.more-head{font-size:12px;font-weight:600;color:var(--text-3);text-align:center;padding:6px 0 12px;
  text-transform:uppercase;letter-spacing:.05em}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.more-item{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:15px 6px;border-radius:14px;background:var(--surface-3);border:1px solid var(--hair);
  color:var(--text-1);font-size:11.5px;font-weight:500;line-height:1.2;text-align:center;min-height:76px}
.more-item:active{background:var(--surface-4);border-color:var(--accent)}
.more-item svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;color:var(--text-2);flex:none}
html[data-style="sgi"] .more-item{border-radius:10px}

/* ---- Техника: строка «название — шкала — сумма». На телефоне переносится:
   название во всю ширину сверху, шкала и сумма — на второй строке. ---- */
.eqbar-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--hair)}
.eqbar-name{width:190px;flex-shrink:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-1)}
.eqbar-track{flex:1;height:14px;background:var(--surface-3);border-radius:7px;overflow:hidden;min-width:40px}
.eqbar-fill{height:100%;background:var(--accent)}
.eqbar-val{width:200px;flex-shrink:0;text-align:right;font-size:12px;color:var(--text-2);white-space:nowrap}
@media(max-width:760px){
  .eqbar-row{flex-wrap:wrap;gap:6px 10px}
  .eqbar-name{width:100%;flex:none}
  .eqbar-val{width:auto;margin-left:auto;font-size:11.5px}
}
.modal-form .modal-head h2{font-size:17px;font-weight:600;letter-spacing:-.01em}
.form-field{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:12px;color:var(--text-2)}
.modal-form .inp,.modal-form .sel{width:100%}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.form-err{font-size:13px;color:var(--danger);background:var(--danger-soft);
  border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);border-radius:var(--radius-ctrl);padding:9px 12px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-3);color:var(--text-1)}

/* =================================================================
   МОДАЛКА / ОВЕРЛЕЙ
   ================================================================= */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  background:color-mix(in srgb,#000 55%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex}
.modal{
  position:relative;width:100%;max-width:min(700px,94vw);max-height:88vh;overflow-y:auto;
  background:var(--surface-2);border:1px solid var(--hair);
  border-radius:var(--radius-card);box-shadow:var(--shadow-key),var(--shadow-ambient),var(--shadow-hover);
}
/* контент-тяжёлые окна (списания за день, длинные наименования, история) — шире, чтобы всё помещалось */
.modal.wide{max-width:min(940px,96vw)}

/* Подсветка строк таблицы (dataTable rowTone): выходной — синий, большое отклонение — оранжевый, нулевой день — сильнее */
/* нулевой остаток — светло-оранжевая подсветка (уходят вниз списка) */
tbody tr.row-zerostock > td{background:rgba(224,124,29,.13)}
tbody tr.row-zerostock:hover > td{background:rgba(224,124,29,.2)}
tbody tr.row-weekend > td{background:rgba(74,124,204,.12)}
tbody tr.row-dev > td{background:rgba(214,154,40,.14)}
tbody tr.row-zero > td{background:rgba(207,63,56,.16)}
tbody tr.row-weekend:hover > td{background:rgba(74,124,204,.18)}
tbody tr.row-dev:hover > td{background:rgba(214,154,40,.20)}
tbody tr.row-zero:hover > td{background:rgba(207,63,56,.22)}
html[data-style="glass"] .modal{
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;border-bottom:1px solid var(--hair);
}
.modal-head h2{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text-1)}
.modal-body{padding:20px 22px}
.modal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:16px 22px;border-top:1px solid var(--hair);
}
.modal-close{
  width:34px;height:34px;border-radius:var(--radius-ctrl);flex:none;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--text-2);
  transition:background-color .18s ease,color .18s ease;
}
.modal-close:hover{background:var(--surface-3);color:var(--text-1)}
.modal-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none}

@media(max-width:760px){
  .modal{max-width:none}
}

/* =================================================================
   ЭКРАН ВХОДА — #auth-screen + .login-card (всё на токенах)
   ================================================================= */
#auth-screen{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--bg);
}
.login-card{
  width:100%;max-width:380px;
  display:flex;flex-direction:column;gap:16px;
  background:var(--surface-2);border:1px solid var(--hair);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-key),var(--shadow-ambient);
  padding:30px 28px 26px;
}
html[data-style="glass"] .login-card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.login-head{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:4px}
.login-mark{
  font-size:22px;font-weight:700;letter-spacing:.14em;color:var(--text-1);
  margin-bottom:8px;
}
.login-title{font-size:22px;font-weight:680;letter-spacing:-.02em;color:var(--text-1);margin:0}
.login-hint{font-size:12.5px;color:var(--text-3);margin:0}
.login-field{display:flex;flex-direction:column;gap:7px}
.login-field>span{font-size:12.5px;color:var(--text-2);font-weight:500}
.login-field .inp{width:100%;padding:10px 13px;font-size:14px;box-sizing:border-box}
.login-error{
  font-size:12.5px;color:var(--danger);
  background:var(--danger-soft);
  border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
  border-radius:var(--radius-ctrl);
  padding:9px 12px;line-height:1.35;
}
.login-submit{width:100%;justify-content:center;padding:11px 16px;font-size:14px;margin-top:2px}

@media(max-width:420px){
  .login-card{padding:24px 20px 22px}
}

/* =================================================================
   МОБИЛЬНЫЕ ПЕРЕОПРЕДЕЛЕНИЯ КОМПОНЕНТОВ
   Этот файл грузится ПОСЛЕ base.css, поэтому десктопные .kpi/.tablewrap/
   .panel-body выше перебивают мобильные правки из base.css (та же
   специфичность → побеждает более поздний файл). Компактные размеры и
   нулевой боковой padding таблицы задаём ЗДЕСЬ, чтобы они реально применялись.
   ================================================================= */
@media(max-width:760px){
  /* плашки компактнее по высоте */
  .kpi{padding:14px 16px}
  .kpi .num{font-size:25px;margin:8px 0 6px}
  .panel-body,.controls{padding:16px 14px}
  /* ГЛАВНОЕ: таблица встык к краям карточки. Без бокового padding липкий
     1-й столбец прижат к левому краю и слева под ним НЕ просвечивают соседние
     колонки при горизонтальной прокрутке. */
  .tablewrap{padding:18px 0}
  /* солидная непрозрачная подложка липкого столбца + перекрытие слева/тень справа.
     padding-left маленький — первый столбец прижат максимально влево, лишь чуть воздуха. */
  thead th:first-child,tbody td:first-child{
    min-width:122px;padding-left:8px;
    box-shadow:-14px 0 0 0 var(--col-stick),8px 0 12px -8px rgba(0,0,0,.30);
  }
  /* Затраты: «Категория/статья» — узкий первый столбец (имя переносится в 2–3 строки),
     чтобы справа осталось место для суммы/доли/тренда. */
  .cost-narrow th:first-child,.cost-narrow td:first-child{
    min-width:92px;max-width:140px;white-space:normal;line-height:1.25;
  }
}

/* «Сводные графики» (как Power BI): период | 6 графиков во всю высоту | таблица.
   Всё на одном экране без прокрутки страницы (высота задаётся из JS). */
.pbi-screen{display:grid;grid-template-columns:152px minmax(0,1fr) minmax(0,320px);gap:12px;align-items:stretch}
.pbi-screen > .card{margin-bottom:0}
.pbi-chart canvas{display:block}
@media(max-width:1080px){
  /* узкий экран — стопкой, с прокруткой (на десктопе всё влезает) */
  .pbi-screen{grid-template-columns:1fr;height:auto!important}
  .pbi-chart{flex:none!important;min-height:210px}
  .pbi-chart .chart-wrap{flex:none!important;height:170px!important}
}

/* ═══════════════════════════════════════════════════════════════════
   ДАШБОРД V2 — визуал по спецификации Power BI (glass + токены Apple).
   Токены следуют теме сайта (html[data-theme]).
   ═══════════════════════════════════════════════════════════════════ */
.bi{
  --bi-bg:#F5F5F7; --bi-surface:#FFFFFF; --bi-period:#EAF2FB; --bi-text:#1D1D1F; --bi-text2:#6E6E73;
  --bi-accent:#0A84FF; --bi-pos:#34C759; --bi-neg:#FF3B30; --bi-sep:#D2D2D7; --bi-rad:14px;
  color:var(--bi-text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}
/* весь дашборд — на один экран без скролла страницы */
.bi:not(.bi-fs){ display:flex; flex-direction:column; overflow:hidden; }
html[data-theme="dark"] .bi{
  --bi-bg:#000000; --bi-surface:#1C1C1E; --bi-period:#10233B; --bi-text:#F5F5F7; --bi-text2:#98989D;
  --bi-pos:#30D158; --bi-neg:#FF453A; --bi-sep:#38383A;
}
.bi-glass{
  background:color-mix(in srgb, var(--bi-surface) 55%, transparent);
  -webkit-backdrop-filter:saturate(200%) brightness(1.04) blur(28px); backdrop-filter:saturate(200%) brightness(1.04) blur(28px);
  border:0.5px solid color-mix(in srgb, var(--bi-sep) 60%, transparent); border-radius:var(--bi-rad);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
}
html[data-theme="dark"] .bi-glass{ -webkit-backdrop-filter:saturate(200%) brightness(1.06) blur(28px); backdrop-filter:saturate(200%) brightness(1.06) blur(28px); }
@supports not (backdrop-filter:blur(1px)){ .bi-glass{ background:var(--bi-surface) } }
.bi-period-panel{ background:color-mix(in srgb, var(--bi-period) 80%, transparent); }
/* сетка страницы: период | графики | таблицы | фильтры (nav — тонкий рельс слева) */
.bi-grid{ display:grid; grid-template-columns:var(--bi-nav-w,52px) 195px 390px 1fr var(--bi-filters-w,52px); gap:8px; align-items:stretch; flex:1; min-height:0; }
@media(max-width:1100px){ .bi-grid{ grid-template-columns:1fr } }
/* топбар */
/* топбар = glass-header: без радиуса, граница только снизу (§1/§3 ТЗ) */
.bi-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 16px; margin-bottom:8px; position:sticky; top:0; z-index:30;
  border-radius:0; border:none; border-bottom:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); box-shadow:none; }
.bi-btn{ padding:6px 12px; border-radius:10px; font-size:12.5px; cursor:pointer; font-family:inherit;
  border:0.5px solid color-mix(in srgb, var(--bi-sep) 60%, transparent); background:color-mix(in srgb, var(--bi-surface) 60%, transparent); color:var(--bi-text); }
.bi-btn.on{ background:var(--bi-accent); border-color:var(--bi-accent); color:#fff; font-weight:600 }
/* плашки активного выбора (кросс-фильтр) */
.bi-selbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 14px; margin-bottom:8px }
.bi-selbar-lbl{ font-size:11.5px; font-weight:700; color:var(--bi-text2); text-transform:uppercase; letter-spacing:.04em }
.bi-tag{ display:inline-flex; align-items:center; gap:7px; font-size:12px; line-height:1; padding:5px 10px; border-radius:999px;
  background:color-mix(in srgb,var(--bi-accent) 14%,transparent); color:var(--bi-text);
  border:0.5px solid color-mix(in srgb,var(--bi-accent) 34%,transparent) }
.bi-tag b{ color:var(--bi-text2); font-weight:700; cursor:pointer; font-size:11px }
.bi-tag b:hover{ color:var(--bi-neg) }
/* строки панели фильтров */
.bi-flt-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 6px; cursor:pointer;
  border-bottom:0.5px solid color-mix(in srgb,var(--bi-sep) 45%,transparent); font-size:13px; color:var(--bi-text); border-radius:7px }
.bi-flt-row:hover{ background:color-mix(in srgb,var(--bi-accent) 10%,transparent) }
.bi-flt-cnt{ font-size:12px; color:var(--bi-text2); flex:none }
.bi-flt-cnt.on{ color:var(--bi-accent); font-weight:600 }
.bi-flt-tools{ display:flex; gap:6px; padding:2px 2px 6px }
.bi-pop .opt label{ cursor:pointer }
/* ресайз колонок таблиц */
.bi-colrz{ position:absolute; top:0; right:0; width:7px; height:100%; cursor:col-resize; z-index:3; touch-action:none }
.bi-colrz:hover{ background:color-mix(in srgb,var(--bi-accent) 45%,transparent) }
/* карточка графика — гибкая высота, чтобы все графики влезли в один экран */
.bi-chart{ flex:1 1 0; min-height:0; padding:6px 10px; display:flex; flex-direction:column; gap:4px; }
.bi-chart-head{ display:flex; align-items:center; gap:8px; }
.bi-seg{ display:inline-flex; border-radius:8px; border:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); overflow:hidden }
.bi-seg button{ padding:2px 10px; font-size:12px; border:0; background:transparent; color:var(--bi-text2); cursor:pointer; font-family:inherit }
.bi-seg button.on{ background:var(--bi-accent); color:#fff; font-weight:600 }
.bi-dot{ width:8px;height:8px;border-radius:50%;display:inline-block }
.bi-mini-title{ font-size:12px; padding:2px 8px; border-radius:8px; border:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); background:var(--bi-surface); color:var(--bi-text); max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer }
.bi-chart-body{ display:grid; grid-template-columns:1fr 92px; gap:2px; flex:1; min-height:0 }
.bi-delta{ font-size:12px; font-weight:700; text-align:right }
.bi-delta.pos{ color:var(--bi-pos) } .bi-delta.neg{ color:var(--bi-neg) }
/* сетка/тело таблиц */
.bi-tables{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:230px; gap:8px; grid-auto-flow:dense; flex:1; min-height:0; overflow-y:auto; align-content:start; }
@media(max-width:1100px){ .bi-tables{ grid-template-columns:1fr } }
.bi-tcard{ overflow:hidden; display:flex; flex-direction:column }
.bi-tcard .bi-thead{ display:flex; align-items:center; justify-content:space-between; padding:5px 12px; border-bottom:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent) }
.bi-tbody{ flex:1; min-height:0; overflow:auto; background:var(--bi-surface) }
.bi-chip{ font-size:11px; padding:1px 7px; border-radius:7px; border:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); color:var(--bi-text2); background:transparent; cursor:pointer; font-family:inherit }
/* период: сетка месяцев */
.bi-months{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:4px }
.bi-mbtn{ padding:6px 0; border-radius:8px; font-size:13px; border:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); background:var(--bi-surface); color:var(--bi-text); cursor:pointer; font-family:inherit; text-align:center }
.bi-mbtn.on{ background:var(--bi-accent); color:#fff; font-weight:600; border-color:var(--bi-accent) }
.bi-sel{ padding:4px 8px; border-radius:8px; font-size:12.5px; border:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); background:var(--bi-surface); color:var(--bi-text); font-family:inherit; cursor:pointer }
/* тело таблицы AG-подобное */
.bi-tbody table{ width:100%; border-collapse:collapse; font-size:11px }
.bi-tbody thead th{ position:sticky; top:0; background:color-mix(in srgb,var(--bi-surface) 92%,var(--bi-bg)); color:var(--bi-text2); font-weight:600; font-size:11px; text-align:right; padding:8px; height:28px; border-bottom:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); white-space:nowrap }
.bi-tbody thead th:first-child{ text-align:left }
.bi-tbody tbody td{ padding:8px; height:30px; color:var(--bi-text); text-align:right; border-bottom:0.5px solid color-mix(in srgb,var(--bi-sep) 35%,transparent); white-space:nowrap }
.bi-tbody tbody td:first-child{ text-align:left }
.bi-tbody tbody tr:hover{ background:color-mix(in srgb,var(--bi-accent) 12%,transparent) }

/* Дашборд V2 — Этап 2: поповеры, fullscreen, ресайз, drill */
.bi-pop{ position:fixed; z-index:1100; min-width:240px; max-height:320px; overflow:auto; padding:6px;
  background:color-mix(in srgb, var(--bi-surface) 98%, transparent); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  border:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.16) }
.bi-pop .opt{ padding:6px 8px; border-radius:7px; font-size:12px; color:var(--bi-text); cursor:pointer; display:flex; align-items:center; gap:7px; white-space:nowrap }
.bi-pop .opt:hover{ background:color-mix(in srgb,var(--bi-accent) 12%,transparent) }
.bi-pop .opt.sel{ color:var(--bi-accent); font-weight:600 }
.bi-pop .grp{ font-size:10.5px; font-weight:600; color:var(--bi-text2); padding:6px 8px 2px; text-transform:uppercase; letter-spacing:.04em }
.bi-pop input.search{ width:100%; font-size:12px; padding:6px 8px; margin-bottom:4px; border-radius:8px; box-sizing:border-box;
  border:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); background:var(--bi-surface); color:var(--bi-text); font-family:inherit }
.bi-fs{ position:fixed; inset:16px; z-index:1000; padding:16px; display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--bi-surface) 94%, transparent); -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px);
  border:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); border-radius:14px; box-shadow:0 12px 48px rgba(0,0,0,.24) }
.bi-fs-close{ position:absolute; top:12px; right:14px; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:18px;
  border:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent); background:var(--bi-surface); color:var(--bi-text) }
.bi-tcard{ position:relative }
.bi-rz{ position:absolute; opacity:0; z-index:2; transition:opacity .12s }
.bi-tcard:hover .bi-rz{ opacity:.5 }
.bi-rz:hover{ opacity:.9 }
.bi-rz.e{ right:0; top:0; bottom:0; width:6px; cursor:ew-resize }
.bi-rz.s{ left:0; right:0; bottom:0; height:6px; cursor:ns-resize }
.bi-rz.se{ right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize; background:linear-gradient(135deg,transparent 50%,var(--bi-text2) 50%) }
.bi-chev{ width:16px; height:16px; border:0; background:transparent; color:var(--bi-text2); cursor:pointer; font-size:12px; padding:0; flex:none; opacity:.7 }
.bi-chev:hover{ opacity:1 }
.bi-tbody tbody tr.sel{ background:color-mix(in srgb,var(--bi-accent) 16%,transparent) }
.bi-tbody tbody tr.tot td{ position:sticky; bottom:0; background:color-mix(in srgb,var(--bi-surface) 96%,var(--bi-bg)); font-weight:700; border-top:0.5px solid color-mix(in srgb,var(--bi-sep) 60%,transparent) }
/* первая колонка: 2 строки с клампом (§7) */
.bi-tbody tbody td:first-child{ white-space:normal; overflow-wrap:anywhere }
.bi-tbody tbody td:first-child .nm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.2 }
.bi-tbody td.d.pos{ color:var(--bi-pos) } .bi-tbody td.d.neg{ color:var(--bi-neg) }
.bi-drag{ opacity:.85; transform:scale(1.02); box-shadow:0 8px 24px rgba(0,0,0,.18); position:relative; z-index:3 }
.bi-del:hover{ color:var(--bi-neg) !important; border-color:var(--bi-neg) !important }