/* UI v2 — общий слой компонентов (трек 0, docs/ui_v2/TRACKS.md; шпаргалка — docs/ui_v2/UI2_COMPONENTS.md).
   Подключается в base.html ПОСЛЕ style.css и только ДОБАВЛЯЕТ классы: токены — те же переменные :root из style.css
   (тёмная тема работает сама). Классы, которые уже есть в style.css (.kpi, .grp, .bar, .empty), здесь действуют
   только внутри своих контейнеров (.kpi-row/.g12, .tbl2, .bar.u2) — существующие страницы не меняются.
   Правила: шрифт ≥ 12 px, числа tabular-nums вправо, цвет — только статус срока, наведение — (hover:hover) and (pointer:fine). */

/* ---------- сетка 12 колонок ---------- */
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch;margin:0 0 16px}
.g12 > *{min-width:0}
.g12 > .s1{grid-column:span 1}.g12 > .s2{grid-column:span 2}.g12 > .s3{grid-column:span 3}.g12 > .s4{grid-column:span 4}
.g12 > .s5{grid-column:span 5}.g12 > .s6{grid-column:span 6}.g12 > .s7{grid-column:span 7}.g12 > .s8{grid-column:span 8}
.g12 > .s9{grid-column:span 9}.g12 > .s10{grid-column:span 10}.g12 > .s11{grid-column:span 11}.g12 > .s12{grid-column:span 12}
/* ряд KPI из N равных: <div class="kpi-row" style="--n:5"> */
.kpi-row{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px;align-items:stretch;margin:0 0 16px}
.kpi-row > *{min-width:0}
.subtle{font-size:13px;color:var(--muted);font-weight:400}

/* ---------- карточка с шапкой ---------- */
.card2{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 18px;min-width:0;display:flex;flex-direction:column}
.card2.flush{padding:0}
.card2.flush > .ch2{padding:16px 18px 0}
.card2.flush > .tbl2 td:first-child,.card2.flush > .tbl2 th:first-child{padding-left:18px}
.card2.flush > .tbl2 td:last-child,.card2.flush > .tbl2 th:last-child{padding-right:18px}
.ch2{display:flex;align-items:flex-start;gap:8px 12px;flex-wrap:wrap;margin:0 0 12px}
.ch2 > .tt{flex:1 1 240px;min-width:0}
.ch2 h2{margin:0;font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.ch2 .sub{font-size:13px;color:var(--muted);margin-top:2px}
.ch2 .sub b{color:var(--ink2);font-weight:600}
.ch2 > .ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card2 > .cfoot2{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}

/* ---------- KPI: подпись · число · Δ · сравнение · нижняя строка ----------
   В style.css у .kpi своя «полоса» снизу и крупный .num — внутри .kpi-row/.g12 они выключены. */
:is(.kpi-row,.g12) > .kpi{display:flex;flex-direction:column;padding:14px 14px 12px;overflow:hidden;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;color:inherit}
:is(.kpi-row,.g12) > .kpi::after{content:none}
:is(.kpi-row,.g12) > .kpi .num{display:inline;font-size:inherit;font-weight:inherit;margin:0;letter-spacing:0;overflow:visible;color:inherit}
.kpi .k-h{display:flex;align-items:center;gap:4px 6px;min-height:22px;min-width:0}
.kpi .k-l{font-weight:500;color:var(--ink2);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi .k-h .qh{flex:none}
.kpi .k-h .dp{margin-left:auto;flex:none}
.kpi .k-v{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;margin:6px 0 2px;min-width:0}
.kpi .k-v b{font-size:clamp(21px,1.55vw,27px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.15}
.kpi .k-v b.na{color:var(--muted);font-weight:600}
.kpi .k-c{font-size:13px;color:var(--muted);line-height:1.35;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .k-c .num,.kpi .k-f .num{color:var(--ink2);font-weight:500}
.kpi .k-f{margin-top:auto;padding-top:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .k-f::before{content:"";display:block;border-top:1px solid var(--line2);margin:8px 0 7px}
/* пилюля Δ: .up — рост, .dn — падение, .zero — без изменений */
.dp{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.35}
.dp.up{background:var(--ok-soft);color:var(--ok)}.dp.dn{background:var(--danger-soft);color:var(--danger)}.dp.zero{background:var(--surface2);color:var(--muted);font-weight:500}

/* ---------- вкладки (JS — ui2.js; активная в ?tab=) ---------- */
.tabs2{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs2::-webkit-scrollbar{display:none}
.tabs2 > button{flex:none;border:0;background:transparent;padding:8px 14px 10px;min-height:40px;font-weight:500;font-size:14px;color:var(--muted);cursor:pointer;
  position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;border-radius:8px 8px 0 0}
.tabs2 > button.on{color:var(--brand);font-weight:600}
.tabs2 > button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--brand)}
.tabs2 > button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.tabs2 .n{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:0 7px;
  min-width:22px;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.tabs2 > button.on .n{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,transparent);background:var(--brand-soft)}
.card2 > .tabs2{margin-left:-18px;margin-right:-18px;padding:0 8px}
.pane{min-width:0}

/* ---------- чипы-фильтры одной строкой ---------- */
.chips2{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 0 12px;padding:1px 0}
.chips2::-webkit-scrollbar{display:none}
.chips2 > a,.chips2 > button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink2);font-weight:500;font-size:13px;text-decoration:none;white-space:nowrap;cursor:pointer;line-height:1.2}
.chips2 > .on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:600}
.chips2 .n{font-size:12px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.chips2 > .on .n{color:var(--brand)}
.chips2 > .gl{flex:none;font-size:12px;font-weight:600;color:var(--muted);margin:0 2px;white-space:nowrap}
.chips2 > .gl:first-child{margin-left:0}
.chips2 > .sep{flex:none;width:1px;height:20px;background:var(--line);margin:0 3px}

/* ---------- таблица ---------- */
.tbl2{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13.5px}
.tbl2 th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.tbl2 td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:middle;min-width:0}
.tbl2 tbody tr:last-child > td{border-bottom:0}
.tbl2 :is(td,th).num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-style:normal}
.tbl2 td.num{font-weight:500}
.tbl2 td.ell,.tbl2 .ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tbl2 span.ell{display:block}
.tbl2 td.inn{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl2 td .subtle{display:block;margin-top:1px}
.tbl2 td.c,.tbl2 th.c{text-align:center}
/* статус срока — заливка ячейки, не строки */
.tbl2 td.st-over{background-color:var(--danger-soft);color:var(--danger);font-weight:600}
.tbl2 td.st-soon{background-color:var(--blue-soft);color:var(--blue);font-weight:600}
.tbl2 td:is(.st-over,.st-soon){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* строка-группа: <tr class="grp" data-grp="id"> + строки <tr data-grp="id">; .closed — свёрнута (строкам — hidden) */
.tbl2 tr.grp{display:table-row;font-size:inherit;font-weight:inherit;border:0;border-radius:0;padding:0;background:none;white-space:normal;color:inherit;cursor:pointer}
.tbl2 tr.grp > td{background-color:var(--surface2);font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.tbl2 tbody tr.grp:first-child > td{border-top:0}
.tbl2 tr.grp:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.tbl2 tr.grp .tw{display:inline-block;width:16px;margin-right:4px;color:var(--muted);transition:transform .15s;text-align:center;font-weight:400}
.tbl2 tr.grp.closed .tw{transform:rotate(-90deg)}
.tbl2 tr.grp .gn{color:var(--muted);font-weight:500;font-size:13px;padding-left:16px}
.tbl2 tr[data-grp]:not(.grp) > td:first-child{padding-left:30px}
.tbl2 tr.tot > td{font-weight:700;background-color:var(--surface2);border-top:1px solid var(--line);border-bottom:0}
.tbl2 td.empty{color:var(--muted);font-weight:400;padding:12px 10px}

/* ---------- полоса доли внутри строки (макрос bar): фон 0…X %, текст поверх, ▲ — «было» ---------- */
.bar.u2{position:relative;display:block;height:auto;min-height:24px;border:0;border-radius:6px;background:color-mix(in srgb,var(--ink) 4%,transparent);overflow:hidden;min-width:0}
.bar.u2 > i{position:absolute;left:0;top:0;bottom:0;display:block;height:auto;width:var(--p,0%);max-width:100%;border-radius:6px;
  background:color-mix(in srgb,var(--brand) 17%,transparent);transition:width .35s ease}
.bar.u2 > em{position:absolute;bottom:0;left:calc(var(--prev,0%) - 5px);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:6px solid color-mix(in srgb,var(--ink) 60%,transparent);font-size:0}
.bar.u2 > span{position:relative;z-index:1;display:block;padding:2px 8px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar.u2.r > span{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tbl2 td.barc{padding-top:5px;padding-bottom:5px}

/* ---------- пустое состояние — строкой ---------- */
.card2 > .empty,.pane > .empty{padding:10px 10px;color:var(--muted);font-size:13.5px}

/* ---------- наведение (только мышь) ---------- */
@media (hover:hover) and (pointer:fine){
  .tabs2 > button:not(.on):hover{color:var(--ink)}
  .chips2 > a:not(.on):hover,.chips2 > button:not(.on):hover{border-color:var(--brand);color:var(--brand)}
  a.kpi:hover{border-color:var(--brand)}
  .tbl2 tr.grp:hover > td{background-color:var(--hov-row-bg)}
}

/* ---------- адаптив (как в макете «Аналитики»): 1599 / 1279 / 1023 / 719 ---------- */
/* 1080p у управляющего при масштабе Windows 125 % (1536 CSS px) и 150 % (1280): широкие таблицы с фиксированными колонками
   (Σ<col> 1200–1420 px) шире контента → вместо прокрутки всей страницы прокручивается карточка/панель с таблицей;
   подписи KPI переносятся, а не режутся многоточием; ряд из 5–6 KPI на 1280 — в два ряда по 3. */
@media (max-width:1599px){
  .g12 > .s2{grid-column:span 4}
  .card2:has(.tbl2),.pane:has(.tbl2){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kpi .k-l,.kpi .k-c,.kpi .k-f{white-space:normal;overflow:visible;text-overflow:clip}
}
@media (max-width:1300px){   /* 1080p @150 % = ровно 1280 CSS px — граница включительно */
  .kpi-row:is([style*="--n:5"],[style*="--n:6"]){grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi .k-v b{font-size:22px}
}
@media (max-width:1279px){
  .g12 > :is(.s4,.s5,.s6,.s7,.s8,.s9,.s10,.s11){grid-column:span 12}
  .g12 > .s3{grid-column:span 6}
}
@media (max-width:1023px){
  .g12 > .s2{grid-column:span 6}
  .g12 > .s1{grid-column:span 3}
}
@media (max-width:719px){
  .g12,.kpi-row{gap:12px;margin-bottom:12px}
  .g12 > :is(.s2,.s3){grid-column:span 6}
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-row > .kpi:last-child:nth-child(odd){grid-column:span 2}
  .card2{padding:14px}
  .card2.flush > .ch2{padding:14px 14px 0}
  .card2 > .tabs2{margin-left:-14px;margin-right:-14px;padding:0 4px}
  :is(.kpi-row,.g12) > .kpi{padding:12px 12px 10px}
  .kpi .k-v b{font-size:21px}
  .kpi .k-c,.kpi .k-f{white-space:normal}
  .ch2 h2{font-size:15px}
  /* таблица → карточки: class="tbl2 rt" (подписи ячеек ставит app.js из шапки) */
  table.tbl2.rt{table-layout:auto}
  table.tbl2.rt colgroup{display:none}
  .card2.flush > table.tbl2.rt{padding:0 14px}
  /* статус на телефоне — цветом текста, без заливки (иначе строка «подпись: значение» съезжает) */
  table.tbl2.rt td:is(.st-over,.st-soon){background:none}
  /* строка-группа и итог: «название … сумма» одной строкой на сером фоне */
  table.tbl2.rt tr:is(.grp,.tot){display:flex;align-items:baseline;gap:4px 10px;padding:9px 12px;border-radius:10px;background:var(--surface2);
    border:0;margin:8px -10px 0;width:auto}
  table.tbl2.rt tr:is(.grp,.tot) > td{display:block;width:auto;background:transparent;border:0;padding:0;text-align:left}
  table.tbl2.rt tr:is(.grp,.tot) > td::before{display:none}
  table.tbl2.rt tr:is(.grp,.tot) > td:first-child{flex:1 1 auto;min-width:0;padding:0;font-weight:600}
  table.tbl2.rt tr:is(.grp,.tot) > td.num{flex:none;margin-left:auto;font-weight:700}
  table.tbl2.rt tr:is(.grp,.tot) > td:not(:first-child):not(.num){display:none}
  table.tbl2.rt tr[data-grp]:not(.grp) > td:first-child{padding-left:0}
  table.tbl2.rt td.ell{white-space:normal}
  table.tbl2.rt td .ell{white-space:normal}
  table.tbl2.rt td.barc{align-items:center;padding:4px 0}
  table.tbl2.rt td.barc > .bar.u2{flex:0 1 62%}
  .kpi .k-h{flex-wrap:wrap;min-height:44px;align-content:flex-start}
  .kpi .k-h .k-l{flex:1 1 calc(100% - 28px)}
  .kpi .k-h .dp{margin-left:0}
}
@media (max-width:379px){
  .kpi-row{grid-template-columns:minmax(0,1fr)}
  .kpi-row > .kpi:last-child:nth-child(odd){grid-column:auto}
}
/* ---------- подсказка к графику (та же, что в «Аналитике»): карточка у курсора, JS — ui2.tip (ui2.js) ---------- */
.tip{position:fixed;z-index:150;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  font-size:13px;line-height:1.5;box-shadow:0 8px 24px rgba(16,24,40,.12),0 1px 3px rgba(16,24,40,.08);min-width:170px;max-width:320px;opacity:0;transition:opacity .08s}
.tip.show{opacity:1}
.tip .t-h{font-weight:750;font-size:13px;margin-bottom:3px;color:var(--ink)}
.tip .t-r{display:flex;justify-content:space-between;gap:16px;color:var(--ink2)}
.tip .t-r b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;color:var(--ink)}
.tip .t-r i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0}
.tip .t-sep{border-top:1px solid var(--line);margin:4px 0}
.tip .t-ev{font-size:13px;color:var(--muted);margin-top:3px}
@media (prefers-reduced-motion:reduce){.bar.u2 > i,.tbl2 tr.grp .tw,.tip,.pl-chart g.col{transition:none}}
/* тёмная тема — те же переменные; полосе доли нужно больше плотности на тёмном фоне */
@media (prefers-color-scheme:dark){.bar.u2 > i{background:color-mix(in srgb,var(--brand) 30%,transparent)}.bar.u2{background:color-mix(in srgb,var(--ink) 6%,transparent)}}