/* ═══════════════════════════════════════════════════════════
   Дашборд V5 — единый экран руководителя склада.
   Опирается на общие токены сайта; свои переменные с префиксом --d5-,
   чтобы стиль блоков не конфликтовал с остальными разделами.
   ═══════════════════════════════════════════════════════════ */
.d5-wrap{
  --d5-s1:var(--surface-1); --d5-s2:var(--surface-2); --d5-s3:var(--surface-3);
  --d5-hair:var(--hair); --d5-hair2:var(--hair-2);
  --d5-t1:var(--text-1); --d5-t2:var(--text-2); --d5-t3:var(--text-3);
  --d5-accent:var(--accent);
  --d5-loss:var(--loss); --d5-gain:var(--gain); --d5-mid:var(--mid);
  --d5-violet:var(--accent); --d5-teal:#7E9AA6;
  --d5-tint:14%; --d5-tint-b:2%; --d5-edge:34%;
  font-variant-numeric:tabular-nums;
}
html[data-theme="light"] .d5-wrap{--d5-violet:var(--accent); --d5-teal:#4A6570; --d5-tint:8%; --d5-tint-b:1%; --d5-edge:28%}
/* В «стекле» поверхности полупрозрачные — липким и наложенным элементам
   нужен непрозрачный фон, иначе сквозь них просвечивает содержимое. */
html[data-style="glass"][data-theme="dark"] .d5-wrap{--d5-s2:#181A1E; --d5-s1:#131519}
html[data-style="glass"][data-theme="light"] .d5-wrap{--d5-s2:#FFFFFF; --d5-s1:#F7F9FB}

.d5-loading{padding:40px;color:var(--d5-t2);font-size:13px;text-align:center}
.d5-wrap{transition:opacity .18s ease}
.d5-wrap.busy{opacity:.45;pointer-events:none}
.d5-row{margin-bottom:8px}
.d5-grid{display:grid;gap:8px;align-items:start}
.d5-g2{grid-template-columns:1fr 1fr}
.d5-g3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.d5-g3>.d5-card{display:flex;flex-direction:column}
.d5-g3>.d5-card>.d5-grid{flex:1;align-content:stretch}
.d5-g21{grid-template-columns:1.5fr 1fr}
/* Четыре плашки в ряд — для сводок, где показателей ровно четыре и растягивать
   их на всю ширину незачем. */
.d5-g4{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.d5-g12{grid-template-columns:1.35fr 1fr}
.d5-stretch{align-items:stretch}
.d5-stack{display:grid;gap:8px;align-content:start}
.d5-fill{display:flex;flex-direction:column}
.d5-team .d5-tw{height:100%}
.d5-fill>.d5-table,.d5-fill>.d5-body{flex:0 0 auto}
.d5-fill .d5-att{flex:1;align-content:start}

/* карточка блока со своим цветом */
/* Рамку рисует отдельный слой поверх содержимого: обычный border вместе с
   обрезкой по скруглению давал на дуге ступеньку («пиксели» в углах), а
   внутренняя тень пряталась под непрозрачной шапкой блока. */
.d5-card{background:var(--d5-s2);border:0;border-radius:12px;overflow:hidden;position:relative}
.d5-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--d5-hair2)}
.d5-card[data-tone]::after{box-shadow:inset 0 0 0 1px
  color-mix(in srgb,var(--d5-tone) var(--d5-edge),var(--d5-hair))}
/* Шапка блока — тот же приём, что в «Показателях»: градиент сверху вниз,
   наверху лёгкий оттенок, к низу растворяется. Плоская заливка превращала
   экран в разноцветную доску и перетягивала внимание с цифр.
   На проекторе перед проверкой смотреть должны на показатели, а не на краски. */
.d5-card[data-tone] .d5-head,.d5-card[data-tone] .d5-wh-head,.d5-card[data-tone] .d5-emp-head{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--d5-tone) var(--d5-tint),transparent) 0%,
    color-mix(in srgb,var(--d5-tone) var(--d5-tint-b),transparent) 100%),
    var(--d5-s1);
  border-bottom-color:color-mix(in srgb,var(--d5-tone) 18%,var(--d5-hair));
}
.d5-card[data-tone] .d5-head .n{background:color-mix(in srgb,var(--d5-tone) 14%,transparent);
  color:color-mix(in srgb,var(--d5-tone) 72%,var(--d5-t1))}
[data-tone="a"]{--d5-tone:var(--d5-accent)} [data-tone="b"]{--d5-tone:var(--d5-teal)}
[data-tone="c"]{--d5-tone:var(--d5-gain)}  [data-tone="d"]{--d5-tone:var(--d5-mid)}
[data-tone="e"]{--d5-tone:var(--d5-violet)}[data-tone="f"]{--d5-tone:var(--d5-loss)}

.d5-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;
  border-bottom:1px solid var(--d5-hair);background:var(--d5-s1)}
.d5-head h2{margin:0;font-size:12.5px;font-weight:660;display:flex;align-items:center;gap:8px}
.d5-head h2 .n{width:18px;height:18px;border-radius:5px;font-size:10px;font-weight:700;
  display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--d5-t2)}
.d5-head>span{font-size:10.5px;color:var(--d5-t3);text-align:right}
.d5-body{padding:9px 13px 10px}

/* плашки */
/* Ячейки тянутся на высоту строки. При align-items:start короткая ячейка
   не доставала до низа, и снизу проступала серая подложка сетки — те самые
   «проплешины» в блоках складов. */
.d5-card .d5-grid{gap:1px;background:var(--d5-hair);align-items:stretch}
.d5-cell{background:var(--d5-s2);padding:7px 11px 8px;min-height:54px;display:flex;flex-direction:column;justify-content:space-between}
.d5-cell .k{font-size:10.5px;color:var(--d5-t2);line-height:1.25}
.d5-cell .v{font-size:17.5px;font-weight:640;letter-spacing:-.025em;line-height:1;margin-top:6px;
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.d5-cell .v small{font-size:10.5px;font-weight:500;color:var(--d5-t2);letter-spacing:0}
.d5-cell .h{font-size:9.5px;color:var(--d5-t3);margin-top:4px;line-height:1.25;min-height:12px}
/* Плашка, разделённая надвое: одно название, два числа с подписями.
   Нужна там, где у величины две законные версии — например удержание
   на сотрудника до и после персональных взысканий. Порознь эти числа
   читались как противоречие: 891 ₽ наверху и 0 ₽ здесь же. */
.d5-cell.d5-split .pair{display:flex;align-items:stretch;margin-top:6px}
.d5-cell.d5-split .side{flex:1 1 50%;min-width:0}
.d5-cell.d5-split .side + .side{border-left:1px solid var(--d5-hair);padding-left:10px;margin-left:10px}
.d5-cell.d5-split .side .v{margin-top:0;font-size:16px}
.d5-cell.d5-split .side .h{min-height:0}
/* ── Этапы Дашборда ───────────────────────────────────────────────────
   Блоки собраны в пять смысловых этапов по ходу дня. Заголовок этапа —
   тонкая полоса со своим оттенком: она держит структуру, но не спорит
   с цифрами внутри блоков.
   ─────────────────────────────────────────────────────────────────── */
.d5-stage{margin-bottom:18px}
.d5-stage-h{
  display:flex;align-items:center;gap:10px;margin:0 2px 9px;padding:7px 12px;
  border:1px solid var(--d5-hair);border-radius:10px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--stk,var(--d5-accent)) 14%,transparent) 0%,
    color-mix(in srgb,var(--stk,var(--d5-accent)) 2%,transparent) 100%);
}
html[data-theme="light"] .d5-stage-h{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--stk,var(--d5-accent)) 9%,transparent) 0%,
    color-mix(in srgb,var(--stk,var(--d5-accent)) 1%,transparent) 100%);
}
.d5-stage-h .sn{
  width:20px;height:20px;border-radius:5px;display:grid;place-items:center;flex:0 0 auto;
  font-size:10.5px;font-weight:700;background:var(--d5-s3);color:var(--d5-t1);
}
.d5-stage-h h2{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--d5-t1);
}
.d5-stage-h .sd{margin-left:auto;font-size:10.5px;color:var(--d5-t2);white-space:nowrap}
.d5-stage.s-ship{--stk:var(--d5-gain)}
.d5-stage.s-people{--stk:var(--d5-mid)}
.d5-stage.s-loss{--stk:var(--d5-loss)}
.d5-stage.s-money{--stk:var(--d5-accent)}
.d5-stage.s-time{--stk:var(--d5-mid)}
.d5-grid.d5-g1{grid-template-columns:1fr}
/* Нумерация теперь у этапов, у отдельных блоков она лишняя и повторялась:
   внутри одного этапа стояло по два блока с одинаковой цифрой. */
.d5-stage .d5-head .n{display:none}
@media (max-width:900px){ .d5-stage-h .sd{display:none} }

/* ── Бенто на Дашборде ────────────────────────────────────────────────
   Для блоков, где показатели читают по одному («Смена», «Объём»):
   ячейки становятся отдельными плашками с воздухом между ними, а не
   клетками, разделёнными волоском. Для «Во что обходится» и «Продажи»
   оставлена прежняя сетка — их сравнивают между собой по колонке.
   ─────────────────────────────────────────────────────────────────── */
.d5-card .d5-grid.d5-bento{gap:8px;background:transparent;padding:10px}
.d5-grid.d5-bento>.d5-cell{
  background:var(--d5-s1,var(--d5-s2));
  border:1px solid var(--d5-hair);border-radius:10px;
  padding:9px 11px 10px;
}
.d5-grid.d5-bento>.d5-cell.drill:hover{border-color:var(--d5-t3)}

.d5-cell.plan{background:repeating-linear-gradient(135deg,transparent,transparent 7px,
  color-mix(in srgb,var(--d5-t3) 7%,transparent) 7px,color-mix(in srgb,var(--d5-t3) 7%,transparent) 14px),var(--d5-s2)}
.d5-cell .loss,.d5-wrap .loss{color:var(--d5-loss)}
.d5-cell .gain,.d5-wrap .gain{color:var(--d5-gain)}
.d5-cell .mid,.d5-wrap .mid{color:var(--d5-mid)}
.d5-cell .dim,.d5-wrap .dim{color:var(--d5-t3);font-weight:500}
.d5-cell .acc{color:var(--d5-accent)}
/* Дельта — подсказка, а не сигнал тревоги. Раиль 01.09.2026: «заливки не
   используй, смотрится некрасиво — оставь только контур». Поэтому фон
   прозрачный, а рамка тонкая и в цвет самой величины. */
.d5-dlt{display:inline-flex;align-items:center;padding:1px 5px;border-radius:5px;
  font-size:9.5px;font-weight:600;background:none;
  border:1px solid color-mix(in srgb,currentColor 42%,transparent)}
.d5-dlt.up{color:color-mix(in srgb,var(--d5-gain) 82%,var(--d5-t1))}
.d5-dlt.dn{color:color-mix(in srgb,var(--d5-loss) 74%,var(--d5-t1))}
.d5-dlt.neu{color:var(--d5-t3)}

/* верхняя строка периода */
.d5-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;margin-bottom:8px;
  background:var(--d5-s2);border:1px solid var(--d5-hair);border-radius:12px}
.d5-bar b{font-size:12px;font-weight:600;color:var(--d5-t2)}
.d5-bar select{font:560 11px/1 inherit;padding:6px 10px;border:1px solid var(--d5-hair);border-radius:var(--radius-chip);
  background:transparent;color:var(--d5-t1);cursor:pointer;outline:none}
.d5-custom{display:inline-flex;align-items:center;gap:5px}
.d5-custom span{color:var(--d5-t3);font-size:11px}
.d5-custom input{font:500 10.5px/1 inherit;padding:5px 5px;border:1px solid var(--d5-hair);border-radius:8px;
  background:var(--d5-s3);color:var(--d5-t1);outline:none}
.d5-custom input:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--d5-hair))}
.d5-sep{width:1px;height:18px;background:var(--d5-hair);margin:0 1px}
/* Подпись периода уходит на свою строку и прижимается вправо: кнопки тогда
   умещаются в один ряд, а панель становится ниже на высоту кнопки. */
.d5-note{margin-left:auto;font-size:10.5px;color:var(--d5-t3)}
.d5-bar .d5-note{order:99;flex:1 1 auto;margin:2px 0 0;text-align:right}
.d5-note b{color:var(--d5-t2);font-weight:600}

/* карточка склада */
.d5-wh-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 13px;border-bottom:1px solid var(--d5-hair)}
.d5-wh-head h3{margin:0;font-size:13px;font-weight:660}
.d5-wh-head .tag{font-size:9.5px;font-weight:600;color:var(--d5-t3);padding:2px 8px;border-radius:var(--radius-chip);border:1px solid var(--d5-hair)}
.d5-wh-tot{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;
  border-top:1px solid var(--d5-hair);background:var(--d5-s1)}
.d5-wh-tot span{font-size:11px;font-weight:600;color:var(--d5-t2)}
.d5-wh-tot b{font-size:17px;font-weight:660;letter-spacing:-.025em}

/* светофор */
.d5-tl{padding:11px 0;border-top:1px solid var(--d5-hair)}
.d5-tl:first-child{border-top:0;padding-top:0}
.d5-tl-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.d5-tl-h .nm{font-size:12px;font-weight:620}
.d5-tl-h .nm small{color:var(--d5-t3);font-weight:400;font-size:10px;margin-left:6px}
.d5-tl-h .fig{font-size:15px;font-weight:660;letter-spacing:-.02em;white-space:nowrap}
/* Метка зоны — без заливки: цветной текст и тонкий контур того же цвета,
   как у всех меток сайта (О5). */
.d5-zone{font-size:9.5px;font-weight:640;padding:1px 7px;border-radius:var(--radius-chip);margin-left:7px;white-space:nowrap;
  background:none;border:1px solid color-mix(in srgb,currentColor 42%,transparent)}
.d5-zone.g{color:var(--d5-gain)}
.d5-zone.y{color:var(--d5-mid)}
.d5-zone.r{color:var(--d5-loss)}
.d5-zone.n{color:var(--d5-t2)}
.d5-scale{position:relative;padding-top:2px}
.d5-scale .segs{position:relative;display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--d5-s3)}
.d5-scale .segs i{display:block;height:100%;opacity:.42}
.d5-scale .pin{position:absolute;top:0;height:22px;width:3px;border-radius:2px;
  background:var(--d5-t1);box-shadow:0 0 0 2px var(--d5-s2);transform:translateX(-1.5px);z-index:2}
.d5-scale .marks{position:relative;height:20px;margin-top:2px}
.d5-scale .marks span{position:absolute;top:0;transform:translateX(-50%);font-size:9.5px;color:var(--d5-t2);
  white-space:nowrap;text-align:center;font-weight:600}
.d5-scale .marks span i{display:block;font-style:normal;font-weight:400;color:var(--d5-t3);font-size:9px;margin-top:1px}
.d5-scale .marks span::before{content:"";position:absolute;left:50%;top:-5px;width:1px;height:4px;background:var(--d5-hair2)}
.d5-tl{padding:9px 0 4px}
.d5-empty{font-size:10.5px;color:var(--d5-t3);padding:8px 10px;border:1px dashed var(--d5-hair2);border-radius:8px;line-height:1.4}
.d5-hint{font-size:10.5px;color:var(--d5-t3);line-height:1.45;margin-top:5px}
.d5-foot{padding:8px 13px;border-top:1px solid var(--d5-hair);background:var(--d5-s1);font-size:10.5px;color:var(--d5-t3);line-height:1.45}

/* «требует внимания» */
.d5-att{display:grid;gap:0;background:var(--d5-s2)}
.d5-att .it{background:var(--d5-s2);padding:10px 13px;border-top:1px solid var(--d5-hair)}
.d5-att .it:first-child{border-top:0}
.d5-att .it .k{font-size:10.5px;color:var(--d5-t2)}
.d5-att .it .v{font-size:15px;font-weight:650;margin-top:3px;letter-spacing:-.02em}
.d5-att .it .h{font-size:9.5px;color:var(--d5-t3);margin-top:2px}

/* таблицы */
.d5-table{width:100%;border-collapse:collapse;font-size:11.5px}
.d5-table thead th{text-align:right;padding:7px 11px;font-size:10px;font-weight:620;color:var(--d5-t2);
  border-bottom:1px solid var(--d5-hair2);white-space:nowrap;background:var(--d5-s2)}
.d5-table thead th:first-child{text-align:left}
.d5-table tbody td{text-align:right;padding:5.5px 10px;border-bottom:1px solid var(--d5-hair);white-space:nowrap}
.d5-table tbody td:first-child{text-align:left;font-weight:540;white-space:normal}
/* Общий стиль сайта делает первый столбец липким и кладёт под него сплошную
   подложку — это нужно длинным таблицам с прокруткой вбок. В дашборде такие
   таблицы не прокручиваются, а подложка перебивала чередование строк: колонка
   с фамилиями шла сплошняком, без горизонтальных разделителей. */
.d5-table tbody td:first-child{position:static;background:transparent !important}
/* Первая ячейка шапки получала цвет закреплённой колонки и выглядела на тон
   темнее соседних. Тело здесь не закреплено, значит и шапке отдельный цвет
   не нужен. */
.d5-table thead th:first-child{left:auto;background:var(--surface-head,var(--surface-3)) !important}
/* Таблица «Аккуратность работы склада»: колонка пояснений содержит целую
   фразу, и без переноса она распирала таблицу за край плашки. */
.d5-table--acc{table-layout:fixed}
/* Таблица с девятью колонками: заголовкам разрешаем перенос — «Сервис-левел»
   в одну строку раздувал колонку, и последний столбец уезжал за край блока. */
.d5-table--wrapth thead th{white-space:normal;line-height:1.15;padding:6px 8px}
.d5-table--wrapth tbody td{padding:5.5px 8px}
.d5-table--acc tbody td:last-child,
.d5-table--acc thead th:last-child{white-space:normal;line-height:1.35}
.d5-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--d5-s3) 45%,transparent)}
.d5-table tbody tr:hover td{background:color-mix(in srgb,var(--d5-tone,var(--d5-accent)) 9%,transparent)}
/* Итог — той же заливкой, что шапка (одна заливка шапки и итога на сайт). */
.d5-table tbody tr.tot td{font-weight:660;border-top:1px solid var(--d5-hair2);background:var(--surface-head,var(--d5-s3))}
.d5-table tbody tr.muted td{color:var(--d5-t3)}
.d5-table tbody tr:last-child td{border-bottom:0}
.d5-table td.share{white-space:nowrap;text-align:right}
/* Полоса доли: раньше трек почти сливался с фоном строки, и было непонятно,
   сколько из скольких заполнено — особенно у коротких долей. Теперь у трека
   своя рамка и заметная подложка, а заливка идёт строго от левого края. */
.d5-share{display:inline-block;vertical-align:middle;width:78px;height:9px;border-radius:5px;
  background:var(--d5-s3);border:1px solid var(--d5-hair2);overflow:hidden;margin-right:8px}
.d5-share i{display:block;height:100%;border-radius:4px 0 0 4px;
  background:var(--d5-tone,var(--d5-accent));opacity:.9;min-width:2px}
.d5-table td.share b{font-weight:620;font-size:11.5px}

/* чипы */
.d5-pills{display:flex;gap:5px;flex-wrap:wrap;align-items:center;padding:10px 13px 6px}
.d5-pills.tight{padding:0 0 8px}
/* Чип — 29 px, как все контролы. Шорткат «font:… inherit» браузер
   выбрасывал целиком, поэтому свойства раздельно. */
.d5-chip{display:inline-flex;align-items:center;gap:6px;height:29px;padding:0 11px;border:1px solid var(--d5-hair);
  border-radius:var(--radius-chip);background:transparent;color:var(--d5-t1);font-family:inherit;font-size:11.5px;font-weight:560;line-height:1;cursor:pointer;white-space:nowrap}
.d5-chip:hover{border-color:var(--d5-hair2)}
.d5-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--d5-t3);flex:none}
.d5-chip.on{font-weight:640}
/* Малый чип — в шапках блоков, где полная высота раздула бы шапку;
   в строке периода — обычные 29 px. */
.d5-chip.sm{height:24px;padding:0 10px;font-size:10.5px}
.d5-bar .d5-chip.sm{height:29px}
.d5-chip.sm.on{background:var(--surface-head);border-color:var(--hair-2);color:var(--text-1);font-weight:600}

/* динамика: показатель = строка */
.d5-smrow{display:grid;grid-template-columns:116px 1fr;align-items:center;border-top:1px solid var(--d5-hair)}
.d5-smrow:first-of-type{border-top:0}
.d5-smname{padding:0 12px;border-right:1px solid var(--d5-hair);align-self:stretch;display:flex;
  flex-direction:column;justify-content:center;gap:3px}
.d5-smname b{font-size:11px;font-weight:640;display:flex;align-items:center;gap:5px}
.d5-smname b i{width:8px;height:8px;border-radius:50%;flex:none}
.d5-smname span{font-size:9.5px;color:var(--d5-t3);line-height:1.3}
.d5-smchart svg{width:100%;height:auto;display:block;font-family:inherit;font-variant-numeric:tabular-nums}
.d5-smaxis{display:grid;grid-template-columns:132px 1fr;border-top:1px solid var(--d5-hair);background:var(--d5-s1)}
.d5-smaxis>div:last-child{display:flex;justify-content:space-between;padding:5px 14px;font-size:10px;color:var(--d5-t3)}

/* команда и карточка сотрудника */
.d5-srch{padding:8px 13px;border-bottom:1px solid var(--d5-hair)}
.d5-srch input{width:100%;font:12.5px/1 inherit;color:var(--d5-t1);background:var(--d5-s3);
  border:1px solid var(--d5-hair);border-radius:8px;padding:8px 10px;outline:none}
.d5-srch input:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--d5-hair))}
.d5-tw{overflow:auto;flex:1;min-height:0}
.d5-tw thead th{position:sticky;top:0;z-index:6;background:var(--surface-2)}
.d5-tw thead th:first-child{z-index:7}
.d5-tw tbody tr{cursor:pointer}
.d5-tw tbody tr.sel td{background:color-mix(in srgb,var(--d5-violet) 15%,transparent);box-shadow:inset 2px 0 0 var(--d5-violet)}
.d5-emp-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:9px 13px;border-bottom:1px solid var(--d5-hair)}
.d5-emp-head h3{margin:0;font-size:12.5px;font-weight:660}
.d5-emp-head span{font-size:10px;color:var(--d5-t3)}
.d5-emp-chart{padding:10px 13px 4px}
.d5-emp-chart svg{width:100%;height:auto;display:block;font-family:inherit;font-variant-numeric:tabular-nums}
.d5-emp-rank{font-size:10.5px;color:var(--d5-t2);padding:8px 13px 12px;line-height:1.45}
.d5-emp-rank b{color:var(--d5-t1)}

@media(max-width:1250px){
  .d5-g2,.d5-g21,.d5-g12,.d5-g3{grid-template-columns:1fr}
  .d5-smrow,.d5-smaxis{grid-template-columns:100px 1fr}
}
@media(max-width:720px){
  .d5-card .d5-grid.d5-g3,.d5-card .d5-grid.d5-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d5-smrow,.d5-smaxis{grid-template-columns:88px 1fr}
}

/* ═══ расшифровка по клику ═══ */
.d5-cell.drill,.d5-table tr.drill{cursor:pointer;position:relative}
.d5-cell.drill:hover{background:color-mix(in srgb,var(--d5-tone,var(--d5-accent)) 8%,var(--d5-s2))}
.d5-cell.drill::after{content:"›";position:absolute;right:9px;top:8px;color:var(--d5-t3);
  font-size:14px;line-height:1;opacity:0;transition:opacity .15s ease}
.d5-cell.drill:hover::after,.d5-cell.drill:focus-visible::after{opacity:1}
.d5-cell.drill:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.d5-drill{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:var(--scrim);padding:24px;backdrop-filter:blur(2px)}
.d5-drill.on{display:flex}
/* Теней нет вовсе: окно держит рамка. */
.d5-drill-win{background:var(--surface-2);border:1px solid var(--hair-2);border-radius:14px;
  width:min(1560px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--shadow-ambient)}
.d5-drill-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--hair);background:var(--surface-1)}
.d5-drill-head h3{margin:0;font-size:14px;font-weight:660}
.d5-drill-x{border:1px solid var(--hair);background:transparent;color:var(--text-2);
  width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1}
.d5-drill-x:hover{color:var(--text-1);border-color:var(--hair-2)}
.d5-drill-body{width:auto;max-width:100%;box-sizing:border-box;overflow:auto;padding:0}
.d5-drill-body .d5-table thead th{position:sticky;top:0;z-index:6;background:var(--surface-head,var(--surface-2))}
.d5-drill-body .d5-table thead th:first-child{z-index:7}
.d5-drill-body .d5-empty{margin:16px}

/* ═══ кого вызвать на смену ═══
   Кнопка живёт под плашками выходов: утром её ищут сразу после «не пришли».
   Список внутри окна разбит на группы по смыслу звонка, нужная роль
   подсвечена полосой слева — глазами по фамилиям искать не нужно. */
.d5-callrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:12px 14px 14px;padding-top:12px;border-top:1px solid var(--d5-hair)}
.d5-callhint{color:var(--text-2);font-size:12px}
.d5-callhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--hair);background:var(--surface-1)}
.d5-callhead-t{font-size:12px;font-weight:640;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.d5-callgrp{padding:0 0 6px}
.d5-callgrp-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 16px 8px}
.d5-callgrp-h b{font-size:13px;font-weight:660}
.d5-callgrp-h span{font-size:12px;color:var(--text-2)}
.d5-call-same td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.d5-call-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--radius-chip);
  border:1px solid var(--hair-2);background:none;
  font-size:11px;color:var(--text-2);vertical-align:1px}
/* Номер — узкий, фамилия и роль читаются слева, длинные роли переносятся:
   без переноса таблица уезжала за правый край окна и колонка часов пропадала. */
.d5-callgrp .d5-table{table-layout:fixed}
.d5-callgrp .d5-table thead th:first-child,.d5-callgrp .d5-table tbody td:first-child{
  text-align:right;width:46px;font-weight:540}
.d5-callgrp .d5-table th:nth-child(2),.d5-callgrp .d5-table td:nth-child(2),
.d5-callgrp .d5-table th:nth-child(3),.d5-callgrp .d5-table td:nth-child(3){
  text-align:left;white-space:normal}
.d5-callgrp .d5-table th:nth-child(3),.d5-callgrp .d5-table td:nth-child(3){width:24%}
.d5-callgrp .d5-table th:nth-child(4),.d5-callgrp .d5-table td:nth-child(4){width:108px}
.d5-callgrp .d5-table th:nth-child(5),.d5-callgrp .d5-table td:nth-child(5){width:132px}
.d5-callgrp .d5-table th:nth-child(6),.d5-callgrp .d5-table td:nth-child(6){width:128px}
.d5-callgrp .d5-table th+th,.d5-callgrp .d5-table td+td{border-left:1px solid var(--d5-hair)}

/* Загрузка внутри суток: столбики по часам и по дням недели. Показывают,
   когда люди заняты, а когда простаивают — по ним решают, сокращать смену
   или догружать работой. */
.d5-hours{padding:10px 14px 4px}
.d5-hbars{display:flex;align-items:flex-end;gap:3px;height:150px}
.d5-hbar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;gap:3px}
.d5-hbar.wide{flex:1 1 0}
.d5-hbar i{display:block;width:100%;
  background:color-mix(in srgb,var(--d5-teal) 72%,transparent)}
/* Столбик часа собирается из долей по видам работ: сверху скруглён весь
   столбик, а не каждая доля — иначе стопка распадается на кубики. */
.d5-hstack{display:flex;flex-direction:column-reverse;width:100%;min-height:2px;
  border-radius:4px 4px 0 0;overflow:hidden}
.d5-hbar b{font-size:10px;font-weight:640;color:var(--d5-t2);font-variant-numeric:tabular-nums}
.d5-hbar span.hh{font-size:9.5px;color:var(--d5-t3)}
.d5-hbar:hover i{filter:brightness(1.12)}
.d5-hours-note{padding:8px 14px 0;font-size:11px;color:var(--d5-t3)}
/* Вторая половина суточной смены (после полуночи) — приглушённым тоном:
   видно, где кончается один день и начинается следующий. */
.d5-hbar.next-day .d5-hstack{opacity:.62}
.d5-hbar.next-day span.hh{color:var(--d5-t2)}

/* Цвет вида работы. Закреплён за смыслом: подпитка зелёная, размещение —
   латунь. Оттенки приглушённые и разные для тем: на тёмном фоне насыщенный
   цвет становится грязным, на светлом — бледный не читается. */
.d5-drill-back{
  --zt-brass:#D6A96A; --zt-green:#63C79C; --zt-violet:#C0A184;
  --zt-cyan:#A9BE7E;  --zt-blue:#7FA8E8;  --zt-rose:#D98A85; --zt-grey:#9AA4B2}
html[data-theme="light"] .d5-drill-back{
  --zt-brass:#8C5F24; --zt-green:#237A55; --zt-violet:#6B4A2E;
  --zt-cyan:#5C6B3A;  --zt-blue:#2F4F7A;  --zt-rose:#9C4640; --zt-grey:#4E5764}
.d5-hstack i.t-brass{background:var(--zt-brass)}
.d5-hstack i.t-green{background:var(--zt-green)}
.d5-hstack i.t-violet{background:var(--zt-violet)}
.d5-hstack i.t-cyan{background:var(--zt-cyan)}
.d5-hstack i.t-blue{background:var(--zt-blue)}
.d5-hstack i.t-rose{background:var(--zt-rose)}
.d5-hstack i.t-grey{background:var(--zt-grey)}

.d5-drill-body .d5-dtl-h{margin-top:14px}
/* Легенда под графиком: без неё цвет ничего не значит. */
.d5-zh-legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 14px 2px;
  font-size:11.5px;color:var(--d5-t2)}
.d5-zh-legend span{display:inline-flex;align-items:center;gap:6px}
.d5-zh-legend i{width:10px;height:10px;border-radius:3px;display:block}
.d5-zh-legend .t-brass i{background:var(--zt-brass)}
.d5-zh-legend .t-green i{background:var(--zt-green)}
.d5-zh-legend .t-violet i{background:var(--zt-violet)}
.d5-zh-legend .t-cyan i{background:var(--zt-cyan)}
.d5-zh-legend .t-blue i{background:var(--zt-blue)}
.d5-zh-legend .t-rose i{background:var(--zt-rose)}
.d5-zh-legend .t-grey i{background:var(--zt-grey)}
/* Точка вида работы в таблице — тот же цветовой код, что на графике. */
.d5-dot{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:6px;
  vertical-align:middle;background:var(--zt-grey)}
.d5-dot.t-brass{background:var(--zt-brass)}
.d5-dot.t-green{background:var(--zt-green)}
.d5-dot.t-violet{background:var(--zt-violet)}
.d5-dot.t-cyan{background:var(--zt-cyan)}
.d5-dot.t-blue{background:var(--zt-blue)}
.d5-dot.t-rose{background:var(--zt-rose)}
/* Строки со сотрудниками кликабельны — курсор должен об этом говорить. */
.d5-drill-body tr.d5-openable{cursor:pointer}
.d5-drill-body tr.d5-openable:hover td{background:color-mix(in srgb,var(--d5-accent) 8%,transparent)}
/* Панель выбора дат внутри окна: весь период, вчера, сегодня или свои даты. */
.d5-zh-bar{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:12px 14px 4px}
/* Группа «подпись + элементы» переносится целиком. */
.d5-zh-grp{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap}
.d5-zh-bar b{font-size:11.5px;font-weight:600;color:var(--d5-t2)}
.d5-zh-bar input[type="date"]{font:500 11px/1 inherit;padding:5px 7px;border-radius:8px;
  border:1px solid var(--d5-hair);background:var(--d5-s3);color:var(--d5-t1);outline:none}
.d5-zh-bar>span{color:var(--d5-t3);font-size:11px}

/* Переключатель на два-три положения: одно из них всегда включено, поэтому
   отдельная кнопка «выключить» не нужна — прежние вкладки-чипы Раиль включал
   и не мог снять. */
.d5-seg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius-ctrl);
  background:var(--d5-s3);border:1px solid var(--d5-hair)}
.d5-seg button{appearance:none;border:1px solid transparent;background:none;font-family:inherit;
  font-size:11.5px;line-height:1;padding:6px 11px;border-radius:var(--radius-chip);
  color:var(--d5-t3);cursor:pointer;white-space:nowrap}
.d5-seg button:hover{color:var(--d5-t1)}
/* Выбранное положение — светлой подложкой с рамкой, без тени. */
.d5-seg button.on{background:var(--d5-s1);color:var(--d5-t1);font-weight:640;
  border-color:var(--d5-hair2)}
.d5-seg button:focus-visible{outline:2px solid var(--d5-accent);outline-offset:1px}

/* Подтверждение по табелю: сколько человек отработал в эту смену. */
.d5-zh-worked{margin:6px 14px 0;font-size:11.5px;line-height:1.5;color:var(--d5-t2)}
.d5-zh-worked b{color:var(--d5-t1);font-weight:660}

/* Строка «с какого момента по какой»: главный ответ на вопрос «что я вижу». */
.d5-zh-span{margin:10px 14px 2px;padding:8px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--d5-accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--d5-accent) 22%,transparent);
  font-size:12.5px;font-weight:600;color:var(--d5-t1)}

/* ═══ печать и сохранение в PDF ═══ */
@media print{
  body.d5-printing .sidebar,body.d5-printing .topbar,body.d5-printing .tabbar,
  body.d5-printing .d5-bar,body.d5-printing .d5-srch,body.d5-printing .d5-pills,
  body.d5-printing .d5-drill{display:none!important}
  body.d5-printing #content{margin:0!important;padding:0!important;width:100%!important}
  body.d5-printing .d5-wrap{--d5-s1:#fff;--d5-s2:#fff;--d5-s3:#f4f6f9;
    --d5-t1:#111;--d5-t2:#444;--d5-t3:#777;--d5-hair:#d8dee7;--d5-hair2:#c2cad6}
  body.d5-printing .d5-card{break-inside:avoid;page-break-inside:avoid;
    box-shadow:none;border:1px solid #c9d2dd}
  body.d5-printing .d5-tw{max-height:none!important;overflow:visible!important}
  body.d5-printing .d5-grid{gap:6px}
  @page{size:A4 landscape;margin:10mm}
}

/* ═══ телефон ═══ */
@media(max-width:720px){
  .d5-wrap{font-size:13px}
  .d5-bar{gap:6px;padding:8px 10px}
  .d5-bar .d5-note{width:100%;margin:4px 0 0;order:99}
  .d5-custom{width:100%;justify-content:space-between}
  .d5-custom input{flex:1;min-width:0}
  .d5-card .d5-grid.d5-g3,.d5-card .d5-grid.d5-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d5-cell{min-height:56px;padding:8px 10px}
  .d5-cell .v{font-size:17px}
  /* широкие таблицы — прокрутка вбок, а не ломаная вёрстка */
  .d5-card>table,.d5-drill-body>table{display:block;overflow-x:auto;white-space:nowrap}
  .d5-table tbody td:first-child{white-space:normal;min-width:150px}
  .d5-smrow,.d5-smaxis{grid-template-columns:1fr}
  .d5-smname{border-right:0;border-bottom:1px solid var(--d5-hair);padding:7px 12px;flex-direction:row;
    align-items:baseline;gap:8px}
  .d5-smaxis>div:first-child{display:none}
  .d5-tw{max-height:340px!important}
  .d5-drill{padding:0}
  .d5-drill-win{width:100vw;max-height:100vh;border-radius:0}
  .d5-scale .marks span{font-size:8.5px}
}

/* выбор дня в блоке «Как отработала смена» */
.d5-head input[type=date]{font:560 11px/1 inherit;padding:5px 8px;border:1px solid var(--d5-hair);
  border-radius:8px;background:var(--d5-s3);color:var(--d5-t1);outline:none}
.d5-head input[type=date]:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--d5-hair))}

/* сравнение выбранных месяцев */
.d5-compare{margin:20px 13px 6px;border:1px solid var(--d5-hair2);border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--d5-s3) 55%,transparent)}
.d5-compare .d5-table tbody td:first-child{font-weight:540}
.d5-table tbody tr.drill.sel td{background:color-mix(in srgb,var(--d5-violet) 15%,transparent);
  box-shadow:inset 2px 0 0 var(--d5-violet)}

/* Ссылка в шапке блока: «изменить пороги» — ведёт на экран нормативов */
.d5-link{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:inherit;
  color:var(--d5-accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--d5-accent) 45%,transparent)}
.d5-link:hover{text-decoration-color:var(--d5-accent)}
.d5-link:focus-visible{outline:2px solid var(--d5-accent);outline-offset:2px;border-radius:3px}

/* Строка сверки: показывает, что цифры разошлись без остатка.
   Нужна при проверке — видно, что считаем честно, без пересчёта за нами. */
.d5-balance{margin:2px 13px 11px;padding:8px 11px;border-radius:9px;font-size:11.5px;line-height:1.5}
.d5-balance b{font-weight:620;font-variant-numeric:tabular-nums}
.d5-balance span{display:block;margin-top:3px;color:var(--d5-t3);font-size:11px}
.d5-balance.ok{background:color-mix(in srgb,var(--d5-gain) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--d5-gain) 24%,transparent);color:var(--d5-t1)}
.d5-balance.warn{background:color-mix(in srgb,var(--d5-mid) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--d5-mid) 30%,transparent);color:var(--d5-t1)}

/* Предупреждение о неполных данных — показатель считать можно, но он завышен.
   Спокойный янтарный: это не авария, а повод дозагрузить выгрузку. */
.d5-warn{margin:9px 13px 2px;padding:9px 12px;border-radius:9px;font-size:11.5px;line-height:1.55;
  background:color-mix(in srgb,var(--d5-mid) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--d5-mid) 32%,transparent);color:var(--d5-t1)}

/* Шапка сравнения — отделяет таблицу сравнения от таблицы зарплаты над ней,
   чтобы два набора цифр не читались как один список */
.d5-compare-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:10px 13px 9px;border-bottom:1px solid var(--d5-hair);
  background:color-mix(in srgb,var(--d5-accent) 7%,transparent)}
.d5-compare-head b{font-size:12px;font-weight:660}
.d5-compare-head span{font-size:11.5px;color:var(--d5-t2);font-variant-numeric:tabular-nums}
.d5-compare-head i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--d5-t3)}

/* ── Таблица сравнения месяцев ────────────────────────────────────────
   Устроена как разбор зарплаты: у месяца два столбца — значение и
   отклонение к базе. Сплошная заливка ячеек убрана: она перекрашивала
   пол-таблицы и мешала читать сами числа. Цвет остался только у процента.
   ─────────────────────────────────────────────────────────────────── */
.d5-cmp-table thead th.mgroup{text-align:center;border-left:1px solid var(--d5-hair2)}
.d5-cmp-table thead th.mgroup small{display:block;margin-top:2px;font-size:9px;
  font-weight:500;color:var(--d5-t3)}
.d5-cmp-table thead tr.sub th{
  font-size:9px;font-weight:500;color:var(--d5-t3);text-transform:none;letter-spacing:0;
  padding:3px 10px 6px;text-align:right;
}
.d5-cmp-table thead tr.sub th.mval{border-left:1px solid var(--d5-hair2)}
.d5-cmp-table thead tr.sub th.mdelta{border-left:1px solid var(--d5-hair)}
.d5-cmp-table thead th[rowspan]{vertical-align:middle}
.d5-cmp-table tbody td.mval{border-left:1px solid var(--d5-hair2);min-width:96px}
.d5-cmp-table tbody td.mdelta{border-left:1px solid var(--d5-hair);min-width:66px;color:var(--d5-t3)}
.d5-cmp-table tbody td.mdelta small{font-size:10.5px;font-weight:560;color:var(--d5-t3)}
.d5-cmp-table tbody td.mdelta small.good{color:var(--d5-gain)}
.d5-cmp-table tbody td.mdelta small.bad{color:var(--d5-loss)}
.d5-cmp-table tbody td:first-child{border-left:0}
/* Показатель и его числа должны стоять рядом. Раньше таблица растягивалась
   на всю ширину панели, и между названием слева и колонкой месяца справа
   зияло полэкрана — глаз не связывал строку с числом. Теперь колонки жмутся
   к левому краю, а лишнюю ширину забирает пустой хвостовой столбец. */
.d5-cmp-table{width:auto;min-width:min(100%,760px)}
.d5-cmp-table th.mname,.d5-cmp-table td.mname{width:264px;max-width:264px;white-space:nowrap}
.d5-cmp-table th.mfill,.d5-cmp-table td.mfill{width:100%;border-left:1px solid var(--d5-hair2);padding:0}
.d5-cmp-table tbody td.mval{min-width:104px}
.d5-cmp-table tbody td.mdelta{min-width:74px}
/* Правая граница у последней группы месяцев: без неё столбец выглядел
   незакрытым и таблица «разваливалась» вправо. */
.d5-cmp-table thead th.mgroup:last-of-type,
.d5-cmp-table thead tr.sub th:nth-last-child(2){border-right:1px solid var(--d5-hair2)}

@media (max-width:720px){
  .d5-compare{margin:12px 8px 4px}
  .d5-compare-head i{margin-left:0;width:100%}
}

/* Состав смены: номер строки узкой колонкой, чтобы «посмотри номер 40» работало */
/* Смена: пятнадцать столбцов. Раиль 25.08.2026: «тут скролла не должно быть
   влево-вправо, сделай, чтобы помещалось». Ужимаем поля ячеек и кегль, роль
   разрешаем переносить на две строки — тогда таблица укладывается в ширину
   блока. Прокрутка остаётся страховкой для узких экранов. */
.d5-xscroll{overflow-x:auto;overflow-y:visible;max-width:100%;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
/* Страховка от молчаливого обрезания. У карточки блока overflow:hidden, и
   таблица, положенная в неё без обёртки, теряла правые столбцы совсем без
   полосы прокрутки — так пропадали «Итого фонд» и «₽/кг» в блоке зарплаты.
   Если таблица всё же окажется прямо в карточке или в теле блока, прокрутка
   появится сама. */
.d5-card:has(> table),.d5-card > .d5-body:has(> table){overflow-x:auto}
.d5-shift-table{width:100%;table-layout:auto}
.d5-shift-table th,.d5-shift-table td{padding-left:6px;padding-right:6px;font-size:11.5px}
.d5-shift-table th{font-size:9.5px;letter-spacing:.01em}
/* Фамилия и роль — единственные длинные поля: их переносим, числа держим в строку. */
.d5-shift-table td:nth-child(2),.d5-shift-table td:nth-child(3){white-space:normal;line-height:1.25}
.d5-shift-table td:nth-child(3){font-size:10.5px}
.d5-shift-table td.num{width:34px;text-align:right;font-variant-numeric:tabular-nums;font-size:11px}
.d5-shift-table th:first-child{width:34px;text-align:right}

/* Переключатель глубины в шапке блока — компактные чипы вместо подписи */
.d5-depth{display:inline-flex;gap:4px;align-items:center}
.d5-depth .d5-chip.sm{padding:0 8px;font-size:10.5px}

/* Заголовки столбцов, по которым можно сортировать */
.d5-table th.d5-sortable{cursor:pointer;user-select:none;white-space:nowrap}
.d5-table th.d5-sortable:hover{color:var(--d5-t1)}
.d5-table th.d5-sortable.on{color:var(--d5-accent)}

/* Углы карточек: фон шапки перекрывал границу в скруглениях, из-за чего рамка
   выглядела разорванной. Скругляем шапку по верхним углам и приподнимаем рамку. */
.d5-card>.d5-head:first-child,
.d5-card>.d5-wh-head:first-child,
.d5-card>.d5-emp-head:first-child{border-radius:11px 11px 0 0}
.d5-card{isolation:isolate}
.d5-card>*:last-child{border-radius:0 0 11px 11px}

/* ── Разбор зарплаты: сумма и прирост — разные колонки ────────────────────
   Шапка идёт двумя ярусами: сверху статья начисления, под ней — что стоит
   в столбце. Название статьи центрируем над своей парой: прижатое к правому
   краю, оно висело над «приростом» и читалось как его заголовок.
   Границы: между статьями заметная линия, внутри пары — тонкая. Без них
   пять пар чисел сливались в сплошное поле цифр.
   ───────────────────────────────────────────────────────────────────────── */
/* Подпись столбца стоит над своими числами: прижатая влево, она висела
   в стороне от того, что подписывает. */
.d5-pay-table thead tr.sub th{font-size:9.5px;font-weight:500;color:var(--d5-t3);
  padding-top:0;text-transform:none;letter-spacing:0;text-align:right}
.d5-pay-table thead th[colspan]{text-align:center;border-bottom:1px solid var(--d5-hair)}

/* Начало каждой статьи — заметная граница; «сумма» внутри пары от неё же. */
.d5-pay-table thead th[colspan],
.d5-pay-table thead tr.sub th.grp,
.d5-pay-table tbody td.grp{border-left:1px solid var(--d5-hair2)}
/* Внутри пары «сумма | прирост» — тонкий волосок. */
.d5-pay-table thead tr.sub th.dlt,
.d5-pay-table td.d5-delta{border-left:1px solid var(--d5-hair)}

/* Столбцы «Месяц» и «₽/кг» занимают оба яруса — держим их по центру высоты. */
.d5-pay-table thead th[rowspan]{vertical-align:middle}
.d5-pay-table thead th[rowspan]:last-child{border-left:1px solid var(--d5-hair2)}

.d5-pay-table td.d5-delta{font-size:10.5px;color:var(--d5-t3);
  padding-left:10px;white-space:nowrap}
.d5-pay-table td.d5-delta.loss{color:var(--d5-loss)}
.d5-pay-table td.d5-delta.gain{color:var(--d5-gain)}
/* Итоговый фонд — опорный столбец таблицы, поэтому чуть плотнее остальных. */
.d5-pay-table tbody td.tot-sum{font-weight:660;color:var(--d5-t1)}

/* Сборка по дням — линия внутри выбранного периода */
.d5-daily{padding:6px 13px 2px}
/* Высоту задаёт viewBox, а не CSS: при жёсткой высоте график вписывался
   в неё целиком и сжимался по ширине — 31 день умещался в две трети блока,
   а подписи наезжали друг на друга. */
.d5-daily svg{width:100%;height:auto;display:block}

/* ═══ детализация по плашке ═══
   Открывается поверх дашборда, не уводя с экрана: на обходе с проверяющим
   важно показать список и вернуться к цифрам одним движением. */
.d5-drill-back{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--scrim);backdrop-filter:blur(2px);
  /* Подстраховка на случай, если окно окажется вне .d5-wrap. */
  --d5-s1:var(--surface-1); --d5-s2:var(--surface-2); --d5-s3:var(--surface-3);
  --d5-hair:var(--hair); --d5-hair2:var(--hair-2);
  --d5-t1:var(--text-1); --d5-t2:var(--text-2); --d5-t3:var(--text-3);
  --d5-accent:var(--accent);
  /* Цвета графиков тоже нужны: столбики загрузки по часам рисуются в окне,
     а оно живёт вне .d5-wrap — без этих переменных полосы выходили пустыми. */
  --d5-teal:#4E8E9E; --d5-loss:var(--loss); --d5-gain:var(--gain); --d5-mid:var(--mid);
  font-variant-numeric:tabular-nums;
}
html[data-theme="light"] .d5-drill-back{--d5-teal:#2C6B7A}
.d5-drill{
  position:fixed;top:50%;left:50%;right:auto;bottom:auto;inset:auto;
  top:50%;left:50%;transform:translate(-50%,-50%);padding:0;
  /* Окно загрузки по часам высокое: график, дни недели и список людей должны
     помещаться разом — иначе после клика по человеку список уезжает под сгиб.
     Ширина увеличена 25.08.2026: в «Плане по графику» и «Ждём ночную» правые
     столбцы (выход, статус) не помещались, и Раиль листал таблицу вбок,
     чтобы понять, кто на смене. */
  width:auto;max-width:min(1560px,96vw);max-height:94vh;display:flex;flex-direction:column;
  background:var(--d5-s2,var(--surface-2));border:1px solid var(--d5-hair2);border-radius:14px;
  box-shadow:var(--shadow-ambient);overflow:hidden;
}
.d5-drill-body table{width:100%}
.d5-drill{align-items:stretch}
.d5-drill>header{
  width:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--d5-hair2);
  background:linear-gradient(180deg,color-mix(in srgb,var(--d5-accent) 10%,transparent),transparent),
             var(--d5-s2,var(--surface-2));
  position:relative;z-index:8;
}
.d5-drill>header b{font-size:13.5px;font-weight:660;color:var(--d5-t1)}
.d5-drill>header span{display:block;margin-top:2px;font-size:10.5px;color:var(--d5-t3)}
.d5-drill-x{
  flex:none;width:28px;height:28px;border:1px solid var(--d5-hair);border-radius:8px;
  background:transparent;color:var(--d5-t2);cursor:pointer;font-size:13px;line-height:1;
}
.d5-drill-x:hover{color:var(--d5-t1);border-color:var(--d5-hair2)}
.d5-drill-body{width:auto;max-width:100%;box-sizing:border-box;overflow:auto;padding:0}
.d5-drill-body .d5-table thead th{position:sticky;top:0;z-index:6;background:var(--surface-head,var(--surface-2))}
.d5-drill-body .d5-table thead th:first-child{z-index:7}
.d5-drill-body .d5-empty{padding:26px;text-align:center;color:var(--d5-t3);font-size:12.5px}
/* Плашка, которую можно раскрыть, показывает стрелку — и она теперь работает. */
.d5-cell.drill{cursor:pointer;position:relative}
.d5-cell.drill:focus-visible{outline:2px solid var(--d5-accent);outline-offset:2px}

/* ── Нагрузка и переработки ─────────────────────────────────────────────
   Строку красит зона, а не отдельная ячейка: список читают глазами сверху
   вниз и должны сразу видеть, где перегруз. Заливка приглушённая — рядом
   стоят числа, кричащий фон мешал бы их читать. */
/* Заливка едва заметная: список читают по числам, а не по фону. Зона видна
   по цвету колонки «дней подряд» и по тексту причины. */
.d5-table tbody tr.wl-bad td{background:color-mix(in srgb,var(--d5-loss) 5%,transparent)}
.d5-table tbody tr.wl-warn td{background:color-mix(in srgb,var(--d5-mid) 5%,transparent)}
.d5-table tbody tr.wl-bad:hover td{background:color-mix(in srgb,var(--d5-loss) 10%,transparent)}
.d5-table tbody tr.wl-warn:hover td{background:color-mix(in srgb,var(--d5-mid) 10%,transparent)}
/* Список прокручивается внутри блока: людей десятки, а экран должен остаться
   компактным. */
.d5-wl-list{max-height:340px;overflow:auto}
/* Плашка-переключатель зоны */
.d5-cell.pick{cursor:pointer}
.d5-cell.pick:hover{border-color:var(--d5-hair2)}
.d5-cell.pick.sel{border-color:color-mix(in srgb,var(--d5-accent) 55%,transparent);
  background:color-mix(in srgb,var(--d5-accent) 10%,transparent)}
/* Таблица команды: фиксированная высота вместо подгонки на лету — так блок
   остаётся компактным и не прыгает при выборе строки. */
.d5-team .d5-tw{max-height:430px}
.d5-table td.wl-why{text-align:left;white-space:normal;color:var(--d5-t2);font-size:11px;max-width:340px}

/* ── Окно детализации: по содержимому, а не во весь экран ─────────────────
   Раньше окно раскрывалось на фиксированную высоту, и под таблицей из двух
   строк зияло пустое поле в пол-экрана. */
/* Ширина растёт по содержимому: короткий список остаётся узким окном, а
   «План по графику» и «Ждём ночную» раскрываются во всю таблицу. Предел
   поднят с 1100 до 1560 px — 25.08.2026 правые столбцы (выход, статус) не
   помещались, и таблицу приходилось листать вбок. */
.d5-drill{width:fit-content;min-width:min(720px,92vw);max-width:min(1560px,96vw);
  max-height:86vh;display:flex;flex-direction:column}
.d5-drill-body{max-height:none;overflow:auto}
/* Ширина окна тянется за таблицей, но таблица не может стать шире окна:
   числа и короткие поля не переносятся, а длинное наименование товара
   переносится в несколько строк. Так и «План по графику» помещается целиком,
   и «Инвентаризация» с названиями на полстроки не уезжает вбок. */
.d5-drill-body .d5-table{width:max-content;max-width:100%}
.d5-drill-body .d5-table th,.d5-drill-body .d5-table td{white-space:nowrap}
.d5-drill-body .d5-table th:first-child,.d5-drill-body .d5-table td:first-child{
  white-space:normal;max-width:520px;min-width:180px}
/* Заголовки-переключатели сортировки */
.d5-table th.wl-sort{cursor:pointer;user-select:none;white-space:nowrap}
.d5-table th.wl-sort:hover{color:var(--d5-t1)}
.d5-table th.wl-sort.on{color:var(--d5-accent)}
/* Полоса доли всегда одной ширины, а процент — в поле фиксированной ширины:
   иначе у «1,9 %» полоса начиналась правее, чем у «83,3 %». display:flex на
   ячейку ставить нельзя — она выпадет из строки таблицы. */
.d5-table td.share .d5-share-pct{display:inline-block;width:52px;text-align:right}

/* Раскрывающаяся детализация: клик по строке показывает, из чего сложился
   заработок или как распределились часы по дням и ролям. */
.d5-table tr.d5-openable{cursor:pointer}
.d5-table tr.d5-openable:hover td{background:color-mix(in srgb,var(--d5-accent) 7%,transparent)}
.d5-table tr.d5-openable.open td{background:color-mix(in srgb,var(--d5-accent) 10%,transparent)}
.d5-detail-row>td{padding:0 !important;background:var(--d5-s2)}
.d5-detail{padding:10px 14px;font-size:11.5px;color:var(--d5-t2)}
.d5-dtl{width:100%;border-collapse:collapse;font-size:11.5px}
.d5-dtl th{text-align:right;padding:5px 8px;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--d5-t2);font-weight:700;border-bottom:1px solid var(--d5-hair);background:var(--surface-head,var(--d5-s3))}
.d5-dtl th:first-child,.d5-dtl td:first-child{text-align:left}
.d5-dtl td{text-align:right;padding:5px 8px;border-bottom:1px solid var(--d5-hair);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.d5-dtl td.dim{color:var(--d5-t3);white-space:normal;text-align:left}
.d5-dtl td.b{font-weight:660;color:var(--d5-t1)}
.d5-dtl tr.tot td{border-bottom:0;border-top:1px solid var(--d5-hair2,var(--d5-hair));font-weight:660;background:var(--surface-head,var(--d5-s3))}

/* Блоки «Аккуратность работы склада» и «Финансовый результат» — компактнее:
   их читают рядом, и лишняя высота заставляла листать экран. */
.d5-card .d5-grid.d5-bento.d5-tight{gap:6px;padding:8px}
.d5-grid.d5-bento.d5-tight>.d5-cell{padding:6px 9px 7px;min-height:46px}
.d5-grid.d5-bento.d5-tight>.d5-cell .v{font-size:15.5px;margin-top:4px}
.d5-grid.d5-bento.d5-tight>.d5-cell .h{font-size:9px;margin-top:3px;min-height:0}
.d5-table--acc thead th{padding:6px 10px}
.d5-table--acc tbody td{padding:4px 10px}
.d5-dtl-h{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--d5-t3);
  font-weight:700;margin:2px 0 6px}
.d5-dtl-h+table+.d5-dtl-h{margin-top:14px}
.d5-dtl tr.avg td{border-top:1px dashed var(--d5-hair);color:var(--d5-t2);font-weight:560}
/* Разбор заработка: таблица за день и таблица за период стоят одна под другой,
   поэтому ширины колонок заданы жёстко — иначе «Оклад» одной таблицы попадал
   под «КПИ» другой, и сравнивать приходилось глазами по подписям. */
.d5-dtl.d5-dtl-fix{table-layout:fixed}
.d5-dtl.d5-dtl-fix th:nth-child(1),.d5-dtl.d5-dtl-fix td:nth-child(1){width:42px}
.d5-dtl.d5-dtl-fix th:nth-child(3),.d5-dtl.d5-dtl-fix td:nth-child(3){width:96px}
.d5-dtl.d5-dtl-fix th:nth-child(4),.d5-dtl.d5-dtl-fix td:nth-child(4){width:104px}
.d5-dtl.d5-dtl-fix th:nth-child(5),.d5-dtl.d5-dtl-fix td:nth-child(5){width:104px}
.d5-dtl.d5-dtl-fix th:nth-child(6),.d5-dtl.d5-dtl-fix td:nth-child(6){width:104px}
.d5-dtl.d5-dtl-fix th:nth-child(7),.d5-dtl.d5-dtl-fix td:nth-child(7){width:124px}
.d5-dtl.d5-dtl-fix th:nth-child(8),.d5-dtl.d5-dtl-fix td:nth-child(8){width:118px}
.d5-dtl.d5-dtl-fix td:nth-child(2){white-space:normal}

/* «Кого вызвать»: прямая подсказка сверху — кому звонить и почему.
   Таблицы ниже остаются для разбора, но ответ виден сразу. */
.d5-calltop{margin:0 0 12px;border:1px solid var(--d5-hair2);border-radius:10px;
  background:var(--d5-s1);padding:10px 12px}
.d5-calltop-h{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--d5-t3);
  font-weight:700;margin-bottom:7px}
.d5-calltop-row{display:flex;align-items:baseline;gap:9px;padding:4px 0;font-size:12.5px;flex-wrap:wrap}
.d5-calltop-row+.d5-calltop-row{border-top:1px solid var(--d5-hair)}
.d5-calltop-row .n{width:17px;height:17px;border-radius:5px;background:var(--d5-s3);color:var(--d5-t2);
  font-size:10px;font-weight:700;display:grid;place-items:center;flex:none}
.d5-calltop-row .r{color:var(--d5-t2);font-size:11.5px}
.d5-calltop-row .w{margin-left:auto;color:var(--d5-t3);font-size:11px;text-align:right}

/* ═══ Приборная панель дашборда ═════════════════════════════
   Одиннадцать ключевых чисел одной строкой между выбором периода
   и складами. Крупная цифра, под ней подпись — как приборы в кабине:
   взгляд скользит по ряду и сразу видит, где непорядок. */
/* Первый уровень погружения: этот ряд отделён от остального экрана
   чертой снизу и более заметными рамками — глаз должен падать сюда,
   а детализация начинается уже под чертой. */
.d5-gauges{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:8px;
  margin:0 0 20px;padding:0 0 18px;border-bottom:3px solid var(--d5-accent)}
.d5-gauge{background:var(--d5-s2);border:1.5px solid var(--d5-t3);border-radius:12px;
  padding:11px 10px 10px;min-width:0;display:flex;flex-direction:column;gap:2px;
  transition:border-color .15s ease,transform .15s ease}
.d5-gauge:hover{border-color:var(--d5-accent);transform:translateY(-1px)}
/* Крупные числа (809 936) в узкой плашке — на пару пунктов мельче,
   иначе не помещаются и обрезаются многоточием. */
/* Сравнение с прошлым периодом стоит в нижней строке плашки, справа от даты
   данных. Рядом с самим числом оно не поместилось: одиннадцать плашек в ряду
   узкие, и «138 424» обрезалось многоточием. Здесь дельта видна сразу и
   ничего не режет. */
.d5-dlt.sm{font-size:9px;padding:1px 4px;letter-spacing:-.02em;flex:none}
.d5-gauge-v{font-size:clamp(15px,1.15vw,20px)}
.d5-gauge-v{font-size:20px;font-weight:670;letter-spacing:-.6px;line-height:1.1;color:var(--d5-t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d5-gauge-v small{font-size:11px;font-weight:500;color:var(--d5-t3);margin-left:3px;letter-spacing:0}
.d5-gauge-v.loss{color:var(--d5-loss)}
.d5-gauge-l{font-size:11.5px;font-weight:560;color:var(--d5-t2);line-height:1.25}
/* Дата данных — последней строкой и прижата к низу: у одиннадцати плашек она
   должна стоять на одной линии, иначе взгляд не находит её сразу. Плашки с
   коротким пояснением тянутся за самой высокой, поэтому auto-отступ сверху. */
.d5-gauge-d{margin-top:auto;padding-top:6px;font-size:10px;line-height:1.3;
  color:var(--d5-t3);display:flex;align-items:center;justify-content:space-between;gap:6px}
.d5-gauge-d>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d5-gauges{align-items:stretch}
.d5-gauge-s{font-size:10.5px;color:var(--d5-t3);line-height:1.25}
@media(max-width:1560px){.d5-gauges{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1100px){.d5-gauges{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.d5-gauges{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .d5-gauge-v{font-size:18px}}

/* Комментарий к смене в окне разбора: причина невыхода, записанная в
   «Графике/Табеле». Читается спокойно — это пояснение, а не показатель. */
.d5-drill-tbl td.d5-note{color:var(--d5-t2);font-size:11.5px;line-height:1.35;
  white-space:normal;max-width:280px}

/* ── Причина невыхода прямо в окне разбора ────────────────────────────────
   Раиль 27.08.2026: «в плашке прогулы хочу понимать, почему сотрудники
   прогуляли». Ячейка причины кликабельна, ввод открывается поверх разбора —
   уходить из списка не нужно. */
.d5-drill-body td.d5-note-cell{cursor:pointer;max-width:300px;white-space:normal}
.d5-note-txt{font-size:11.5px;line-height:1.35;color:var(--d5-t2)}
.d5-note-add{font-size:11px;color:var(--d5-t3);opacity:.6}
tr:hover .d5-note-add{opacity:1;color:var(--d5-accent)}
.d5-note-back{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--scrim);backdrop-filter:blur(2px);
  /* Окно живёт в body, вне .d5-wrap, поэтому переменные оформления к нему не
     доходили: фон брался из запасного значения (чистый белый), границы и цвет
     текста оставались пустыми, а кнопка «Сохранить» выходила белой на белом —
     её попросту не было видно. Раиль 01.09.2026: «всё белое, поле не обведено,
     кнопки сохранить нет». Повторяем набор так же, как у окна разбора. */
  --d5-s1:var(--surface-1); --d5-s2:var(--surface-2); --d5-s3:var(--surface-3);
  --d5-hair:var(--hair); --d5-hair2:var(--hair-2);
  --d5-t1:var(--text-1); --d5-t2:var(--text-2); --d5-t3:var(--text-3);
  --d5-accent:var(--accent); --d5-loss:var(--loss); --d5-gain:var(--gain);
  font-variant-numeric:tabular-nums;
}
.d5-note-win{
  width:min(460px,94vw);background:var(--d5-s2,var(--surface-2));border:1px solid var(--d5-hair2);
  border-radius:14px;padding:16px 18px 14px;box-shadow:var(--shadow-ambient);
}
.d5-note-win header{margin-bottom:10px}
.d5-note-win header b{display:block;font-size:13.5px;font-weight:660;color:var(--d5-t1)}
.d5-note-win header span{display:block;margin-top:2px;font-size:11px;color:var(--d5-t3)}
.d5-note-input{
  width:100%;box-sizing:border-box;resize:vertical;min-height:70px;
  font:12.5px/1.5 inherit;color:var(--d5-t1);background:var(--d5-s3);
  border:1px solid var(--d5-hair);border-radius:10px;padding:9px 11px;outline:none;
}
.d5-note-input:focus{border-color:color-mix(in srgb,var(--d5-accent) 45%,var(--d5-hair))}
/* Значок источника данных: маленький кружок с «i» у подписи плашки.
   Молчит, пока на него не наведут, — Раиль просил, чтобы «не напрягал». */
.d5-src{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;margin-left:5px;border-radius:4px;
  border:1px solid var(--d5-hair2,var(--hair-2));
  font-size:8.5px;font-weight:700;font-style:italic;line-height:1;
  color:var(--d5-t3,var(--text-3));cursor:help;vertical-align:middle;
  transform:translateY(-1px);
}
.d5-src:hover{color:var(--d5-accent,var(--accent));border-color:var(--d5-accent,var(--accent))}

.d5-note-hint{margin-top:8px;font-size:11px;line-height:1.45;color:var(--d5-t3)}
.d5-note-err{min-height:16px;margin-top:6px;font-size:11px;color:var(--d5-loss)}
/* Поле для суммы — одна строка, число крупно и по правому краю. */
.d5-note-num{min-height:0;text-align:right;font-size:16px;font-weight:640;letter-spacing:-.01em}
.d5-note-win footer{display:flex;justify-content:flex-end;gap:8px}
.d5-note-win footer button{
  font:600 12px/1 inherit;padding:8px 14px;border-radius:9px;cursor:pointer;
  border:1px solid var(--d5-hair2);background:transparent;color:var(--d5-t2);
}
.d5-note-win .d5-note-save{
  background:var(--d5-accent);border-color:var(--d5-accent);color:var(--accent-ink,#fff);
}
.d5-note-win footer button:hover{border-color:var(--d5-hair2)}
.d5-note-win .d5-note-save:hover{filter:none}
.d5-note-win footer button:focus-visible{outline:2px solid var(--d5-accent);outline-offset:2px}
/* Плашка, которую можно править: подсказываем это карандашом в углу. */
.d5-cell.d5-editable{cursor:pointer;position:relative}
.d5-cell.d5-editable::after{
  content:'✎';position:absolute;top:8px;right:10px;font-size:11px;
  color:var(--d5-t3);opacity:.5;
}
.d5-cell.d5-editable:hover::after{opacity:1;color:var(--d5-accent)}
.d5-cell.d5-editable:hover{border-color:color-mix(in srgb,var(--accent) 34%,var(--hair))}
.d5-note-win footer button:disabled{opacity:.6;cursor:default}