/* Стилі сторінки. Витягнуто з <style> у Analytics.html без змін. */
:root{
      --bg:#1b1e21;
      --panel:#24282c;
      --panel-2:#2c3135;
      --line:#383e43;
      --text:#eef1f3;
      --muted:#9aa3ab;
      --amber:#f2a900;
      --amber-dim:#7a5a10;
      --red:#d64545;
      --green:#4caf6d;
      --blue:#4a86e8;
      --radius:10px;
    }
    *{box-sizing:border-box;}
    body{
      margin:0;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;
      -webkit-font-smoothing:antialiased;min-height:100vh;
    }
    .wrap{max-width:none;margin:0 auto;padding:32px 32px 69px;}

    header{display:flex;align-items:center;gap:25px;margin-bottom:24px;flex-wrap:wrap;}
    .text-logo{flex-shrink:0;}
    .text-logo img{height:30px;width:auto;display:block;}
    .header-text{flex:1;min-width:220px;}
    .site-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
    .nav-links{display:flex;gap:12px;flex-wrap:wrap;}
    .team-badge-corner{
      font-family:'IBM Plex Mono',monospace;font-size:15.4px;color:var(--amber);
      text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
      display:flex;align-items:center;gap:7px;
    }
    .logout-link{color:var(--muted);text-decoration:none;border-bottom:1px dashed var(--muted);}
    .logout-link:hover{color:var(--red);border-bottom-color:var(--red);}
    .nav-link{
      background:transparent;border:1px solid var(--line);color:var(--muted);
      font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:15.4px;
      letter-spacing:.08em;padding:12px 21px;border-radius:6px;text-decoration:none;
      display:inline-block;
    }
    .nav-link.active{border-color:var(--amber);color:var(--amber);background:rgba(242,169,0,.08);}
    .nav-link:hover:not(.active){border-color:var(--amber);color:var(--amber);}

    .panel{
      background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
      padding:25px;margin-bottom:20px;
    }
    .panel-title{
      font-family:'IBM Plex Mono',monospace;font-size:15.4px;letter-spacing:.12em;
      text-transform:uppercase;color:var(--muted);margin:0 0 16px;
    }
    label{
      display:block;font-size:15.4px;color:var(--muted);text-transform:uppercase;
      letter-spacing:.06em;margin-bottom:6px;
    }
    input{
      width:100%;min-width:0;background:var(--bg);border:1px solid var(--line);
      border-radius:6px;padding:13px 14px;color:var(--text);
      font-family:'IBM Plex Mono',monospace;font-size:17.9px;
      transition:border-color .15s, box-shadow .15s;
    }
    input::placeholder{color:#5a6167;}
    input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,169,0,.18);}

    button{
      font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
      letter-spacing:.05em;font-size:17.9px;background:var(--amber);color:#1b1e21;
      border:none;border-radius:6px;padding:14px 28px;cursor:pointer;
      transition:transform .1s, background .15s;
    }
    button:hover{background:#ffbb1a;}
    button:active{transform:scale(.98);}
    button.secondary{background:transparent;border:1px solid var(--line);color:var(--text);}
    button.secondary:hover{border-color:var(--amber);color:var(--amber);background:transparent;}

    .msg{font-size:16.6px;font-family:'IBM Plex Mono',monospace;margin-top:12px;display:none;}
    .msg.show{display:block;}
    .msg.err{color:var(--red);}

/* ─────────────────────────────────────────────────────────────
   Нижче — Дашборд: токени-доповнення (яких нема в базовому наборі вище)
   і стилі блоків, перенесені з макета (Global Dashboard, той самий чат).
   ───────────────────────────────────────────────────────────────── */

:root{
  --panel-3:#31363b; --line-2:#474e55; --faint:#6a727a;
  --amber-soft:rgba(242,169,0,.13); --amber-line:rgba(242,169,0,.4);
  --orange:#ff8a3d; --orange-soft:rgba(255,138,61,.13); --orange-line:rgba(255,138,61,.38);
  --blue-soft:rgba(74,134,232,.14); --blue-line:rgba(74,134,232,.38);
  --violet:#8b7ff0; --violet-soft:rgba(139,127,240,.14); --violet-line:rgba(139,127,240,.4);
  --green-soft:rgba(76,175,109,.14); --green-line:rgba(76,175,109,.38);
  --cyan:#4fc3d9; --cyan-soft:rgba(79,195,217,.14); --cyan-line:rgba(79,195,217,.38);
  --gold:#c9a15a; --gold-soft:rgba(201,161,90,.14); --gold-line:rgba(201,161,90,.38);
  --red-soft:rgba(214,69,69,.14);
  --green-deep:#2e6b46; /* відвантажена частина смуги — темніший зелений */
  --sans:'Inter',-apple-system,'Segoe UI',sans-serif;
  --display:'Oswald','Arial Narrow',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* ── Токени: узято з реальних /public/css (--bg/--panel/--line/--amber/--green/--blue/--violet
   тощо), плюс два нових акценти під звітні блоки (--cyan, --gold), яких у застосунку ще нема.
   Ширина контейнера — 1220px, як .wrap у app.css/orders.css/analytics.css (те саме, під чим
   реально живе застосунок, не довільне число). Тема одна, темна — навмисно: застосунок сам
   поки без світлої теми, макет має виглядати як реальний екран PLAN. */

/* ── Хедер сторінки ──────────────────────────────────── */
.dash-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.head-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase; }
.head-title{ font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.01em; font-size:27px; margin:4px 0 0; text-wrap:balance; }
.head-greet{ font-size:14px; color:var(--muted); margin-top:6px; }
.head-greet b{ color:var(--text); font-weight:600; }

/* ── Список блоків ───────────────────────────────────── */
.blocks{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.block{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; animation:blockIn .18s ease; }
@keyframes blockIn{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .block{ animation:none; } }

/* ── Заголовок блоку: назва+статуси зліва, керування по центру, дії справа ── */
.block-head{ display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; }
.block-ic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; flex:none; }
.block-ic svg{ width:16px; height:16px; }
.block-titles{ min-width:0; }
.block-title{ font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:15px; letter-spacing:.01em; white-space:nowrap; }
.block-stats{ display:flex; gap:10px; margin-top:2px; flex-wrap:wrap; }
.stat-chip{ font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap; }
.stat-chip b{ font-weight:600; }
/* Скидаємо фон: бачить, як і .rank-row.bar-row .rank-val нижче — базові
   .tone-warn/.tone-crit/.tone-ok (`background:var(--amber)` тощо) призначені
   для заливок барів (.fill/.bullet), а не для чипів. Без цього першого ж
   .stat-chip з тоном заливало суцільним кольором усю шапку блоку (Етапи
   виробництва, 2026-08-07) — той самий однокласовий колізійний трюк, що вже
   ловили на рейтингах. */
.stat-chip.tone-warn{ background:none; }
.stat-chip.tone-crit{ background:none; }
.stat-chip.tone-ok{ background:none; }
.stat-chip.tone-warn b{ color:var(--amber); }
.stat-chip.tone-crit b{ color:var(--red); }
.stat-chip.tone-ok b{ color:var(--green); }

.block-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-left:auto;
  padding-right:8px; }

.block-actions{ display:flex; align-items:center; gap:2px; flex:none; }
/* padding:0 і font тут ОБОВ'ЯЗКОВІ: базове button{} (аналог analytics.css)
   задає padding:14px 28px і великий Oswald-шрифт для звичайних кнопок. Без
   скидання цей padding (з box-sizing:border-box) сам більший за задекларовані
   28px width — box "ламається" (реально рендериться ~58×30px), і саме тому
   svg усередині рахує собі 0 ширини (flex-розкладка не могла звести кінці).
   Той самий клас багів, що застерігає appshell.css: свій stand-alone скидання
   для будь-якої кнопки-іконки, а не покладатись на успадкування. */
.iconbtn{ width:28px; height:28px; padding:0; margin:0; border-radius:7px; border:1px solid transparent;
  background:none; font:inherit; color:var(--faint); display:flex; align-items:center; justify-content:center;
  flex:none; cursor:pointer; transition:background .12s,color .12s; }
.iconbtn svg{ width:14px; height:14px; flex:none; }
.iconbtn:hover{ background:var(--panel-3); color:var(--text); }
.iconbtn:disabled{ opacity:.3; cursor:default; }
.iconbtn:disabled:hover{ background:none; color:var(--faint); }
.iconbtn.expand-on{ color:var(--amber); }
.iconbtn:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
.act-sep{ width:1px; align-self:stretch; margin:2px 4px; background:var(--line); }

/* СТАНДАРТ ДАШБОРДУ (не відступати, повторено власником ~10 разів,
   2026-07-25/26): висота блоку — СТАЛА. Вона не залежить від кількості даних:
   скільки б рядків не прийшло, box лишається того самого розміру, а що не
   влазить — тільки вертикальна прокрутка ВСЕРЕДИНІ. ГОРИЗОНТАЛЬНОЇ прокрутки
   ніде бути не може.
   ЄДИНИЙ виняток (Роман, 2026-07-26): кнопка «Розгорнути» в шапці блоку —
   явна дія користувача, яка перемикає цей блок у РІВНО подвійну висоту
   (460 → 920px). Це теж фіксоване значення, а не «по вмісту»: у розгорнутому
   стані блок так само не росте від даних. */
.block-body{ padding:16px; height:460px; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; }
.block.is-expanded .block-body{ height:920px; }
.block-cols{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; gap:0; flex:1; min-height:0; }
/* Умовна база — 3 рівні частини по 33% зліва направо; підколонка може займати
   1, 2 чи 3 такі частини. cols-2-1 = 2 частини + 1 частина (як Гант+дедлайни). */
.block-cols.cols-2-1{ grid-template-columns:2fr 1fr; }
.block-cols.cols-3{ grid-template-columns:1fr 1fr 1fr; }
/* Підколонка сама скролиться (одна прокрутка на всю колонку) — не кожен
   .scroll-list всередині окремо. Раніше кожна група (напр. «свої команди» /
   «інші ВЦ» / «підрядники» у Виробництві) отримувала РІВНУ частку висоти
   через flex:1 на .scroll-list — короткі групи (1 команда) розтягувались
   порожнім проміжком до розміру найдовшої. Тепер кожен рядок/група займає
   рівно стільки, скільки треба контенту, а .subcol прокручує все разом. */
.subcol{ min-width:0; display:flex; flex-direction:column; min-height:0; overflow-y:auto; overflow-x:hidden; }
.subcol + .subcol{ border-left:1px solid var(--line); margin-left:18px; padding-left:18px; }
.subcol-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
/* Місяць підписом там, де перемикача нема (колонка «Виплати» ділить його з
   «Нарахуваннями»): колонка лишається самоописовою, а керування не двоїться. */
.subcol-note{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:none;
  color:var(--muted); white-space:nowrap; }
@media (max-width:900px){
  .block-cols.cols-3{ grid-template-columns:1fr 1fr; }
  .block-cols.cols-3 .subcol:nth-child(3){ grid-column:1/-1; border-left:none; margin-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; }
}
@media (max-width:860px){
  .block-cols, .block-cols.cols-2-1{ grid-template-columns:1fr; gap:18px; }
  .subcol + .subcol{ border-left:none; margin-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; }
}

/* ── Рядки списків ───────────────────────────────────── */
.rowlist{ display:flex; flex-direction:column; }
.item-row{ display:flex; align-items:center; gap:10px; padding:7px 6px; margin:0 -6px; border-top:1px solid var(--line);
  border-radius:7px; }
.rowlist .item-row:first-child{ border-top:none; }
.item-row.clickable{ cursor:pointer; transition:background .12s; }
.item-row.clickable:hover{ background:var(--panel-3); }
.item-main{ min-width:0; flex:1; }
.item-name{ font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-name .lead{ font-size:12.5px; color:var(--faint); font-weight:400; margin-left:6px; }
.item-sub{ font-family:var(--mono); font-size:12.5px; color:var(--faint); margin-top:1px; }
.item-when{ font-family:var(--mono); font-size:12px; color:var(--faint); flex:none; }
.status-pill{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; padding:2.5px 8px;
  border-radius:20px; flex:none; white-space:nowrap; }
.status-pill.ok{ color:var(--green); background:var(--green-soft); }
.status-pill.warn{ color:var(--amber); background:var(--amber-soft); }
.status-pill.crit{ color:var(--red); background:var(--red-soft); }
.status-pill.muted{ color:var(--faint); background:var(--panel-3); }
.grp-label{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); padding:12px 6px 5px; display:flex; justify-content:space-between; }
.grp-label:first-child{ padding-top:0; }
.grp-count{ color:var(--muted); }
.goto{ width:24px; height:24px; padding:0; margin:0; border-radius:6px; border:none; background:none;
  font:inherit; color:var(--faint); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none; }
.goto svg{ width:13px; height:13px; flex:none; }
.goto:hover{ color:var(--amber); background:var(--panel-3); }

.item-bars{ flex:none; display:flex; gap:14px; }
.mini-bar{ width:104px; }
.mini-bar .lbl{ font-family:var(--mono); font-size:10.5px; color:var(--faint); text-transform:uppercase;
  letter-spacing:.06em; display:flex; justify-content:space-between; margin-bottom:3px; }
.mini-bar .lbl b{ font-weight:600; font-variant-numeric:tabular-nums; }
.track{ height:5px; border-radius:3px; background:var(--panel-3); overflow:hidden; }
.fill{ height:100%; border-radius:3px; }
.tone-ok{ background:var(--green); }
.tone-warn{ background:var(--amber); }
.tone-crit{ background:var(--red); }
.tone-info{ background:var(--blue); }
.item-price{ font-family:var(--mono); font-size:13px; color:var(--muted); flex:none; width:76px; text-align:right; }

.fc-row .bar-wrap{ flex:1; min-width:0; }
.fc-row .bar-top{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; gap:8px; }
.fc-row .bar-top .nm{ color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fc-row .bar-top .team{ font-family:var(--mono); font-size:12px; color:var(--faint); flex:none; }
.deadline{ font-family:var(--mono); font-size:12px; flex:0 1 auto; min-width:0; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:8px; padding:2px 7px; }
.deadline.tone-crit{ background:var(--red-soft); }
.deadline.tone-warn{ background:var(--amber-soft); }
.deadline.tone-muted{ background:var(--panel-3); }
.deadline.tone-warn{ color:var(--amber); }
.deadline.tone-crit{ color:var(--red); }
.deadline.tone-muted{ color:var(--faint); }

/* ── Керування в заголовку: тумблер, сегментований перемикач ── */
.switch{ width:30px; height:17px; border-radius:9px; background:var(--panel-3); border:1px solid var(--line);
  position:relative; cursor:pointer; flex:none; transition:background .15s; }
.switch::after{ content:''; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--muted);
  top:2px; left:2px; transition:transform .15s,background .15s; }
.switch.on{ background:var(--amber-soft); border-color:var(--amber-line); }
.switch.on::after{ transform:translateX(13px); background:var(--amber); }
.ctrl-toggle{ display:flex; align-items:center; gap:7px; }
.ctrl-toggle label{ font-size:13px; color:var(--muted); cursor:pointer; white-space:nowrap; }

.seg{ display:inline-flex; background:var(--panel-3); border:1px solid var(--line); border-radius:8px;
  padding:2px; gap:2px; flex:none; }
.seg button{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); background:none; border:none; padding:5px 10px; border-radius:6px; cursor:pointer; }
.seg button.active{ background:var(--panel); color:var(--text); }

/* ── Гант: стилі живуть у секції редизайну нижче (.g-flex*) — Гант тепер
   масштабується у відсотках ширини колонки, без піксельної сітки днів і без
   горизонтальної прокрутки. ── */

/* ── Календар (міні місяць) ──────────────────────────── */
/* Фіксований розмір клітинки (не aspect-ratio від ширини колонки) — інакше в
   ширшій (2/3) колонці календар роздувається й блок стрибає по висоті проти
   Ганта. Той самий візуальний розмір незалежно від того, наскільки широка
   колонка. */
.cal-grid{ display:grid; grid-template-columns:repeat(7,32px); gap:4px; }
.cal-dow{ font-family:var(--mono); font-size:10.5px; color:var(--faint); text-align:center; text-transform:uppercase; }
.cal-day{ width:32px; height:32px; border-radius:6px; background:var(--panel-3); display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-size:12.5px; color:var(--muted); gap:2px; }
.cal-day.out{ opacity:.28; }
.cal-day.today{ box-shadow:inset 0 0 0 1.5px var(--amber); color:var(--text); }
.cal-day .dot{ width:4px; height:4px; border-radius:50%; }

/* Гант/Календар займають майже всю висоту блоку (flex:1 у межах підколонки,
   яка сама вже стала-висотна — див. .block-body) — перемикання Гант/Календар
   не смикає висоту блоку; що не влазить — вертикальна прокрутка. */
.cal-viewport{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.cal-view-toggle{ margin-bottom:10px; flex:none; }

/* ── Стат-плитки (звіти) ─────────────────────────────── */
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; flex:none; }
/* У вузькій (1/3) колонці плитки йдуть у стовпчик — двоколонкова сітка там
   лишила б від значення «192 469 хв» самі три цифри. */
.block-cols.cols-1-2 .subcol:first-child .tiles{ grid-template-columns:1fr; }
.tile{ background:var(--panel-3); border-radius:9px; padding:11px 12px; }
.tile .t-label{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); }
.tile .t-val{ font-family:var(--mono); font-size:19px; font-weight:600; margin-top:5px; font-variant-numeric:tabular-nums; }
.tile .t-trend{ font-size:12px; margin-top:3px; }
.tile .t-trend.up{ color:var(--green); }
.tile .t-trend.down{ color:var(--red); }
.spark{ margin-top:8px; height:24px; width:100%; }

/* ── Рейтинг команд / розбивка (права колонка звітів) ── */
.rank-row{ display:flex; align-items:center; gap:10px; padding:6px 6px; margin:0 -6px; border-top:1px solid var(--line);
  border-radius:7px; }
.rank-row:first-child{ border-top:none; }
.rank-row.clickable{ cursor:pointer; }
.rank-row.clickable:hover{ background:var(--panel-3); }
.rank-pos{ font-family:var(--mono); font-size:12px; color:var(--faint); width:16px; flex:none; }
.rank-name{ flex:1; font-size:13.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-val{ font-family:var(--mono); font-size:13px; flex:none; font-variant-numeric:tabular-nums; }
.rank-val.tone-ok{ color:var(--green); }
.rank-val.tone-warn{ color:var(--amber); }
.rank-val.tone-crit{ color:var(--red); }

.pace-tile{ display:flex; align-items:center; justify-content:space-between; padding:9px 12px;
  background:var(--panel-3); border-radius:9px; margin-bottom:8px; }
.pace-tile:last-child{ margin-bottom:0; }
.pace-tile .p-label{ font-size:13px; color:var(--muted); }
.pace-tile .p-val{ font-family:var(--mono); font-size:15px; font-weight:600; }

/* ── Кнопки дій блоку ─────────────────────────────────── */
.block-cta{ display:flex; gap:8px; padding-top:14px; grid-column:1/-1; }
.btn{ font-family:var(--sans); font-size:13px; padding:7px 13px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:none; color:var(--muted); }
.btn:hover{ color:var(--text); border-color:var(--line-2); }
.btn.primary{ background:var(--amber); border-color:var(--amber); color:#1b1e21; font-weight:600; }
.btn.primary:hover{ filter:brightness(1.08); }

.dash-foot{ margin-top:26px; font-size:12.5px; color:var(--faint); text-align:center; }

.toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%,12px); background:var(--panel-3);
  border:1px solid var(--line-2); color:var(--text); font-size:13px; padding:9px 16px; border-radius:9px;
  box-shadow:0 10px 30px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; z-index:50; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

@media (max-width:640px){
  .item-bars{ display:none; }
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .block-controls{ margin-left:0; width:100%; order:3; }
}

/* ═══════════ Полірування 2026-07-25 №2 ═══════════ */

/* Умовна база — «В роботі» на всю ширину, коли Прогнозні вимкнено (1/3 + 2/3). */
.block-cols.cols-1-2{ grid-template-columns:1fr 2fr; }
@media (max-width:860px){ .block-cols.cols-1-2{ grid-template-columns:1fr; } }

/* Вертикальна прокрутка списків — заповнює те, що лишається в підколонці
   ПІСЛЯ фіксованого вмісту (лейбли, pace-tile тощо), сама блок по висоті не
   розтягує: висота = .block-body, стала для всіх блоків (див. вище). */
/* Плейсхолдер-обгортка списку (сама НЕ прокручується й НЕ розтягується —
   інакше кілька .scroll-list в одній .subcol ділять висоту порівну, і
   коротка група розтягується порожнім проміжком до розміру найдовшої);
   реальна прокрутка — на рівні .subcol (див. вище). */
.scroll-list{ flex:none; }
.empty-note{ color:var(--faint); font-size:13px; padding:6px 0; }

/* Дата рядка замовлення — просто число; сьогодні виділяємо зеленим (єдиний
   виняток із правила «без відносного часу»). */
.date-today{ color:var(--green); font-weight:600; }

/* «+» замість «Додати» — кругла кнопка поруч із «Переглянути всі». */
.addbtn{ width:30px; height:30px; border:1px solid var(--line); }
.addbtn:hover{ border-color:var(--amber); color:var(--amber); }

/* Замовлення клієнтів — максимум 2 рядки (назва + підрядок), нічого не
   переноситься; ширший «В роботі» (Прогнозні вимкнено) — один рядок. */
.client-row-2l .item-main{ overflow:hidden; }
.client-row-2l .item-name, .client-row-2l .item-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* «В роботі» — вузький одинарний блок: 2 рядки (заголовок модель+клієнт+
   дата+статус, потім бари на всю ширину). Ширина двох колонок (Прогнозні
   вимкнено): 1 рядок, бари праворуч. item-name отримує явний min-width —
   інакше flex-shrink у тісному рядку (кілька flex:none сусідів навколо)
   зводить nowrap+overflow:hidden текст до 0px і назва зникає повністю. */
.wip-row-2l{ display:flex; flex-direction:column; align-items:stretch; gap:5px; padding-top:8px; padding-bottom:8px; }
.wip-line1{ display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; }
.wip-line1 .item-name{ flex:1 1 80px; min-width:50px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wip-line1 .item-sub{ flex:0 1 70px; min-width:34px; font-family:var(--mono); font-size:12px; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wip-line2 .item-bars{ width:100%; }
.wip-line2 .mini-bar{ flex:1; width:auto; }

.wip-row-1l{ gap:8px; min-width:0; overflow:hidden; }
.wip-row-1l .item-name{ flex:1 1 100px; min-width:60px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wip-row-1l .item-sub{ flex:0 1 90px; min-width:40px; font-family:var(--mono); font-size:12px; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Розгорнуті партії всередині замовлення (декілька моделей/партій в одному
   рядку «В роботі») — вкладений список, трохи менший і з відступом. */
.wip-lines{ padding:2px 0 8px 16px; border-left:1px solid var(--line); margin-left:8px; }
.wip-line-item{ display:flex; align-items:center; gap:10px; padding:4px 0; }
.wip-line-item .item-name{ flex:1 1 80px; min-width:50px; font-size:12.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wip-line-item .item-sub{ flex:0 1 110px; min-width:50px; font-family:var(--mono); font-size:11.5px; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.stale-date-note{ color:var(--amber); font-size:11px; font-family:var(--mono); margin-bottom:8px; }

/* Рядок активного замовлення під командою — трохи менший і з відступом. */
.item-row.sub-row{ padding-left:16px; }
.item-name.sub{ font-size:12.5px; color:var(--muted); }

/* ── Календар: сітка + панель дня ПОРУЧ (у тій самій колонці, не в сусідній) ── */
.cal-split{ display:flex; gap:16px; align-items:stretch; flex:1; min-height:0; }
.cal-day-panel{ flex:1; min-width:0; border-left:1px solid var(--line); padding-left:16px;
  display:flex; flex-direction:column; min-height:0; }
/* Виняток із загального правила «.scroll-list не розтягується»: тут список
   подій дня — єдиний елемент після заголовка, тож flex:1 лише заповнює
   решту висоти панелі дня (яка вже сама обмежена .subcol), не «розтягує»
   нічого відносно сусідів. */
.cal-day-panel .scroll-list{ flex:1 1 auto; min-height:0; overflow-y:auto; }

/* ── Шеврон, що обертається (розгорнути команду / групу відомостей) ── */
.chev-ic{ width:14px; height:14px; color:var(--faint); flex:none; transition:transform .15s; }
.chev-ic.open{ transform:rotate(180deg); }

/* ── Табель і ЗП: підказка області доступу, вкладені табелі команди ── */
.scope-note{ font-family:var(--mono); font-size:10.5px; color:var(--faint); text-transform:none; letter-spacing:0; }
.pace-tile.clickable{ cursor:pointer; }
.pace-tile.clickable:hover{ background:var(--panel); }
.sub-sheets{ margin:0 0 6px 16px; padding-left:10px; border-left:1px solid var(--line); }
.seg-row{ margin-bottom:10px; }

/* ── Блок «Відомості»: заголовки-акордеони Нарахування/Виплати ── */
.sheet-group + .sheet-group{ margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
.sheet-group-head{ display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; padding:0; margin:0; font-family:var(--display); font-weight:600;
  text-transform:uppercase; font-size:13px; letter-spacing:.01em; color:var(--text); cursor:pointer; }
.sheet-group-head:hover{ color:var(--amber); }
/* ═══════════════════════════════════════════════════════════════════════
   РЕДИЗАЙН БЛОКІВ 2026-07-26 — наскрізна мова стану (макет чату Design).
   Правило кольору: колір з'являється лише як ВИНЯТОК — проблема (червоний),
   те, що скоро стане проблемою (жовтий), або явно довершений результат
   (зелений). Рядок «іде за планом» лишається БЕЗ кольору: спокій має
   виглядати спокійно, інакше червоне знецінюється (аудит staging 2026-07-26:
   14 червоних пілюль на екрані, і жодна не термінова).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Рядок-картка: кольорова смужка ліворуч = рівень уваги ── */
.row-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  border-left:3px solid transparent; background:var(--panel-2); min-width:0; overflow:hidden; }
.row-item + .row-item{ margin-top:7px; }
.row-item.clickable{ cursor:pointer; transition:background .12s; }
.row-item.clickable:hover{ background:var(--panel-3); }
.row-item.crit{ border-left-color:var(--red); }
.row-item.warn{ border-left-color:var(--amber); }
.row-item.ok{ border-left-color:var(--green); }
.row-item .nm{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px; font-weight:600; }
.row-item .nm .dim{ color:var(--faint); font-weight:400; font-family:var(--mono); font-size:11.5px; }
/* Другий рядок картки (№ замовлення + дата) — окремим рядком, а не всередині
   назви: у вузькій колонці ellipsis з'їдав саме дату, найкорисніше в підрядку. */
.row-item .dim{ font-family:var(--mono); font-size:11px; color:var(--faint); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.row-item .num{ font-family:var(--mono); font-size:11.5px; color:var(--muted); flex:none; text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.row-item .num i{ color:var(--faint); font-style:normal; }

/* Bullet-bar: трек = замовлено, заливка = виготовлено, риска = відвантажено.
   Три величини одним рядком замість трьох окремих чисел. */
.bullet{ position:relative; width:100%; height:7px; border-radius:4px; background:var(--panel-3); flex:none;
  margin-top:5px; overflow:hidden; }
/* Відвантажене — той самий зелений, але приглушений/темніший: видно, що
   частина вже поїхала, і воно не сперечається за увагу з рештою смуги. */
.bullet .b-ship{ position:absolute; top:0; left:0; height:100%; background:var(--green-deep); }
/* Виготовлене, але ще не відвантажене — світло-зелений: робота зроблена,
   просто ще не поїхала. Якщо термін цієї позиції тисне — жовтий/червоний. */
.bullet .b-made{ position:absolute; top:0; height:100%; background:var(--green); }
.bullet .b-made.crit{ background:var(--red); }
.bullet .b-made.warn{ background:var(--amber); }
/* Незроблений залишок простроченої/термінової позиції — м'яка підкладка на
   треку: інакше рядок, де ще нічого не виготовили, не мав би жодного кольору. */
.bullet.tone-crit{ background:var(--red-soft); }
.bullet.tone-warn{ background:var(--amber-soft); }
/* Біла риска на межі відвантаженого — межу видно навіть між двома зеленими. */
.bullet .b-mark{ position:absolute; top:0; width:2px; height:100%; background:var(--text); z-index:2; }

/* Сегментований стек-бар — «здоров'я команди» одним поглядом: скільки її
   замовлень готово / у роботі / відстає / не заповнено. */
.stack-bar{ display:flex; height:9px; border-radius:5px; overflow:hidden; background:var(--panel-3); flex:none; margin-top:5px; }
.stack-bar span{ height:100%; }
.stack-bar .s-done{ background:var(--green); }
.stack-bar .s-active{ background:var(--line-2); }
.stack-bar .s-behind{ background:var(--amber); }
/* «Чекає випуску» — день ще триває: нейтральний блакитний, не тривога.
   «На паузі»/«поза графіком» — приглушений, цех стоїть за рішенням. */
.stack-bar .s-pending{ background:var(--blue); }
.stack-bar .s-paused{ background:var(--line); }
.stack-bar .s-notfilled{ background:var(--red); }

/* ── Розгортання рядка «на місці»: деталі всередині того самого списку,
   висота блоку не міняється (список просто довший і скролиться). ── */
.exp-ic{ margin-left:6px; color:var(--faint); font-size:10px; flex:none; display:inline-block;
  transition:transform .15s; }
.row-item.open .exp-ic{ transform:rotate(90deg); color:var(--text); }
.row-detail{ display:flex; flex-direction:column; gap:5px; padding:7px 8px 2px 14px; margin:2px 0 4px 6px;
  border-left:2px solid var(--line-2); }
.rd-item{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.rd-item.clickable{ cursor:pointer; }
.rd-item.clickable:hover{ color:var(--text); }
.rd-item .nm{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rd-item .num{ font-family:var(--mono); font-size:11px; color:var(--faint); flex:none; text-align:right;
  font-variant-numeric:tabular-nums; }
.rd-bullet{ width:100%; }

/* ── Чіпи періоду в шапці блоку/колонки ── */
.period-chips{ display:inline-flex; gap:3px; flex:none; background:var(--panel-3); border:1px solid var(--line);
  border-radius:9px; padding:2px; flex-wrap:nowrap; max-width:100%; overflow:hidden; }
.period-chip{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; background:none; border:none;
  border-radius:6px; padding:5px 9px; color:var(--muted); cursor:pointer; white-space:nowrap; text-transform:none; }
.period-chip.on{ color:var(--text); background:var(--panel); }

/* ── Ранжований бар (ефективність команд / Фонд ЗП по ВЦ) ── */
.rank-row.bar-row{ gap:9px; border-top:none; padding:5px 0; margin:0; }
.rank-row.bar-row .rank-name{ width:104px; flex:none; font-size:12.5px; }
/* display:block обов'язковий — обидва елементи це <span>, а інлайновий span
   ігнорує width/height, і бар просто не малювався б. */
.rank-track{ display:block; flex:1 1 auto; min-width:0; height:8px; border-radius:4px; background:var(--panel-3); }
.rank-fill{ display:block; height:100%; border-radius:4px; background:var(--muted); }
.rank-fill.tone-ok{ background:var(--green); }
.rank-fill.tone-warn{ background:var(--amber); }
.rank-fill.tone-crit{ background:var(--red); }
.rank-fill.tone-gold{ background:var(--gold); }
/* Скидаємо фон: базові .tone-ok/.tone-warn/.tone-crit (вони для заливок барів)
   інакше зафарбовують УСЮ комірку значення суцільним кольором. */
.rank-row.bar-row .rank-val{ width:66px; flex:none; text-align:right; background:none; }
.rank-row.bar-row .rank-val.tone-ok{ color:var(--green); }
.rank-row.bar-row .rank-val.tone-warn{ color:var(--amber); }
.rank-row.bar-row .rank-val.tone-crit{ color:var(--red); }

/* ── Дельта до попереднього періоду + спарклайн ── */
.delta-chip{ font-family:var(--mono); font-size:11px; border-radius:8px; padding:2px 7px; flex:none; }
.delta-chip.up{ color:var(--green); background:var(--green-soft); }
.delta-chip.down{ color:var(--red); background:var(--red-soft); }
.delta-chip.flat{ color:var(--faint); background:var(--panel-3); }
.spark-wrap{ margin-top:10px; }
.spark-wrap svg{ width:100%; height:30px; display:block; }
.spark-cap{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px;
  font-family:var(--mono); font-size:10.5px; color:var(--faint); }

/* ── Розподіл проблем за групами (Виробництво, права колонка) ── */
.group-bar-row{ display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-radius:8px;
  background:var(--panel-2); margin-bottom:7px; }
.group-bar-top{ display:flex; align-items:center; gap:8px; }
.group-bar-top .nm{ flex:1; font-size:12px; color:var(--muted); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.group-bar-top .cnt{ font-family:var(--mono); font-size:10.5px; color:var(--faint); flex:none; }

/* ── Гант: ширина в ВІДСОТКАХ вікна, не в пікселях на день — тому
   горизонтальної прокрутки нема в жодній ширині колонки (аудит п.9). ── */
.g-flex{ display:flex; flex-direction:column; gap:3px; flex:none; min-width:0; overflow:hidden; }
.g-flex-head{ display:flex; font-family:var(--mono); font-size:9.5px; color:var(--faint); }
.g-flex-head .g-flex-label{ flex:none; }
.g-flex-scale{ flex:1 1 auto; min-width:0; position:relative; height:13px; overflow:hidden; }
.g-flex-scale span{ position:absolute; transform:translateX(-50%); white-space:nowrap; }
/* Клац по смузі нікуди не веде (вітрина, не навігація) — тому без cursor:pointer
   і без hover-підсвітки, на відміну від рядків-переходів у решті блоків. */
.g-flex-row{ display:flex; align-items:center; gap:8px; height:26px; }
.g-flex-label{ width:92px; flex:none; display:flex; flex-direction:column; justify-content:center;
  font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Назва замовлення дрібним підписом під командою — щоб було видно, ЩО саме
   на смузі, не лише хто виконує (Роман, 2026-07-27). */
.g-flex-sub{ font-size:9.5px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-flex-track{ flex:1 1 auto; min-width:0; position:relative; height:12px; background:var(--panel-3); border-radius:3px; }
.g-flex-track .g-today{ position:absolute; top:-2px; width:1px; height:16px; background:var(--blue); }
.g-flex-bar{ position:absolute; top:0; height:100%; border-radius:3px; background:var(--line-2); min-width:3px; }
.g-flex-bar.tone-crit{ background:var(--red); }
.g-flex-bar.tone-warn{ background:var(--amber); }
.g-flex-bar.tone-ok{ background:var(--green); }

/* ── Прогрес закритості табелів + скільки днів лишилось у періоді ── */
.progress-line{ background:var(--panel-2); border-radius:9px; padding:10px 12px; margin-bottom:10px; flex:none;
  cursor:pointer; }
.progress-line:hover{ background:var(--panel-3); }
.progress-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.progress-top .p-lbl{ font-size:13px; color:var(--muted); }
.progress-top .p-val{ font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; }
/* Скидаємо фон — та сама колізія, що вже ловили на .stat-chip: голі
   .tone-ok/.tone-warn/.tone-crit (`background:var(--amber)` тощо) призначені
   для ЗАЛИВОК барів (.fill/.bullet), а тут той самий клас несе лише колір
   ТЕКСТУ. Правило нижче задавало color, але фон від однокласового правила
   лишався — і «0/2 закрито» малювалось суцільним бурштиновим блоком
   (Роман, 2026-08-15: «що за жовтий квадрат?»). У широкій колонці це
   виглядало як підсвічений рядок, у вузькій — як квадрат. */
.progress-top .p-val.tone-ok{ color:var(--green); background:none; }
.progress-top .p-val.tone-warn{ color:var(--amber); background:none; }
.progress-top .p-val.tone-crit{ color:var(--red); background:none; }

/* Вузький екран: чіпи періоду переносяться на другий рядок замість того, щоб
   розпирати заголовок колонки (горизонтальної прокрутки не буває ніде). */
@media (max-width:760px){
  .subcol-label{ flex-wrap:wrap; }
  .period-chips{ flex-wrap:wrap; }
  .g-flex-label{ width:70px; }
}

/* Адаптивні частки колонок (блок «Замовлення клієнтів»): значення приходить
   з рендеру через --cols, бо залежить від кількості рядків. Саме змінна, а не
   інлайновий grid-template-columns — інакше інлайн перебив би медіа-запит
   нижче й на вузькому екрані колонки лишились би поруч. */
.block-cols.adaptive{ grid-template-columns:var(--cols, 1fr 2fr); }
@media (max-width:860px){
  .block-cols.adaptive{ grid-template-columns:1fr; }
}

/* Стрілка-перехід у самому рядку замовлення: клац по рядку розгортає склад,
   а перехід у замовлення — окремою маленькою кнопкою біля назви клієнта. */
.row-goto{ width:20px; height:20px; vertical-align:-4px; display:inline-flex; }
.row-goto svg{ width:12px; height:12px; }

/* ── Мобільний прохід по базових контролах (Роман, 2026-07-28) ─────────────
   Розкладку блоків дашборд уже адаптує сам (media 640/760/860 вище), але
   базові button/input/label лишались десктопними (17.9px) — той самий набір,
   що вже стоїть в app.css/orders.css/calendar.css/analytics.css. */
@media (max-width:600px){
  button{font-size:14.5px;padding:11px 18px;}
  input{font-size:14.5px;padding:11px 12px;}
  label{font-size:12.5px;}
  .nav-link{font-size:12.5px;padding:9px 14px;}
  .wrap{padding-left:14px;padding-right:14px;}
}

/* ═══════════════════ Блок «Найближчі відвантаження» ═══════════════════
   Картка = одне відвантаження, найраніші зверху. Усередині — позиції, що в
   нього входять: «скільки спаковано (вільного) з потрібного», БЕЗ розкладу
   по етапах (Роман, 2026-08-14). Числа беруться з тієї самої відповіді
   /api/shipping, що живить сторінку, — розійтися вони не можуть.

   Смуга стоїть ОДРАЗУ біля замовника, а не тікає до правого краю: колонка
   замовника фіксованої ширини, а не 1fr. Перша версія блоку саме через
   `1fr` розтягувала порожнечу на пів екрана (Роман, 2026-08-14: «позор і
   ганьба»). */
.shp-wrap{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; min-height:0; }
.shp-rows{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden; padding-right:2px; }
.shp-card{ border:1px solid var(--line); border-radius:9px; background:var(--panel-2);
  padding:10px 12px 10px 13px; flex:none; }
.shp-card.clickable{ cursor:pointer; }
.shp-card.clickable:hover{ border-color:var(--line-2); }
/* Колір — виняток: смужка ліворуч і легкий фон лише там, де справді горить. */
.shp-card.tone-row-crit{ box-shadow:inset 3px 0 0 var(--red); background:var(--red-soft); }
.shp-card.tone-row-warn{ box-shadow:inset 3px 0 0 var(--amber); }
.shp-card.tone-row-ok{ box-shadow:inset 3px 0 0 var(--green); }
/* Звичайне відвантаження теж має смужку — приглушений бурштин «ще в
   роботі»: без неї картка без тривоги виглядала обрізаною й неживою. */
.shp-card.tone-row-none{ box-shadow:inset 3px 0 0 var(--amber-dim); }

.shp-top{ display:grid; grid-template-columns:104px minmax(120px,190px) minmax(160px,420px) 1fr;
  gap:14px; align-items:center; }
.shp-date{ font-family:var(--mono); font-size:13px; display:flex; flex-direction:column; gap:1px; }
.shp-date .sh-when{ font-size:10.5px; color:var(--faint); white-space:nowrap; }
.shp-date .sh-when.warn{ color:var(--amber); }
.shp-date .sh-when.crit{ color:var(--red); }
.shp-brand{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.shp-brand .nm{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shp-brand .sub{ font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.shp-prog{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.shp-prog .track{ height:8px; }
.shp-prog .num{ font-family:var(--mono); font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums; }

/* ── Мова смуги ──────────────────────────────────────────────────────
   Перша версія фарбувала смугу лише коли «горить», тож у звичайних
   відвантаженнях (6 і 16 робочих днів попереду) увесь блок виходив
   сірим (Роман, 2026-08-14: «чому воно все сіре і скучне»).
   Тепер колір несе ЗМІСТ, а не тривогу, і смуга завжди жива:
     заливка (зелене) — те, що вже спаковане;
     решта треку      — те, що ще треба зробити: бурштин у нормі,
                        червоне коли підпирає (gap-crit/gap-warn),
                        нічого — коли спаковано все (gap-none).
   Та сама пара кольорів, що й скрізь у застосунку: зелене = зроблене,
   бурштин = в роботі, червоне = виняток. */
.shp-prog .track, .shp-pos .track{ background:var(--panel-3); }
/* gap-* нижче свідомо йдуть ПІСЛЯ всіх .shp-pos/.shp-prog правил про фон:
   специфічність однакова, тож вирішує порядок у файлі. */
.shp-prog .fill, .shp-pos .track .fill{ background:var(--green); }
.track.gap-todo{ background:var(--amber-dim); }
.track.gap-warn{ background:var(--amber); }
.track.gap-crit{ background:var(--red); }
.track.gap-none{ background:var(--panel-3); }
.shp-state{ text-align:right; font-family:var(--mono); font-size:13px; white-space:nowrap; }
.shp-state .shp-ok{ color:var(--green); font-weight:600; }
.shp-state .shp-short{ color:var(--muted); font-variant-numeric:tabular-nums; }
.shp-state .shp-short.warn{ color:var(--amber); font-weight:600; }
.shp-state .shp-short.crit{ color:var(--red); font-weight:600; }

/* Позиції — у стільки колонок, скільки влазить: саме вони й наповнюють ту
   ширину, що раніше стояла порожня. */
.shp-poslist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(390px,1fr));
  gap:3px 18px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); }
.shp-pos{ display:grid; grid-template-columns:minmax(0,1fr) 90px 104px; gap:10px;
  align-items:center; font-size:12px; min-width:0; }
.shp-pos .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.shp-pos.ok .nm{ color:var(--text); }
.shp-pos .track{ height:5px; border-radius:3px; overflow:hidden; }
.shp-pos .track .fill{ display:block; height:100%; border-radius:3px; }
.shp-pos .num{ font-family:var(--mono); font-size:11px; color:var(--faint);
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.shp-pos.more{ display:block; font-family:var(--mono); font-size:11px; color:var(--faint); }

@media (max-width:900px){
  .shp-top{ grid-template-columns:96px minmax(0,1fr) 96px; }
  /* Стан лишається в ПЕРШОМУ рядку біля замовника, а смуга йде під ними на
     всю ширину: інакше авторозміщення кидало «−760 шт» під смугу, де воно
     читалось як підпис до неї. */
  .shp-top .shp-state{ grid-column:3; grid-row:1; }
  .shp-top .shp-prog{ grid-column:1 / -1; grid-row:2; }
  .shp-poslist{ grid-template-columns:1fr; }
}

/* ═══════════════════ Блок «Етапи виробництва» ═══════════════════
   stages-dashboard-design-brief.md, макет чату Design. Рядок = випуск,
   колонка = етап, клітинка = сегментована горизонтальна смуга (СКЛАД, не
   один відсоток): передано далі (темно-зелене) · на руках (суцільний
   бурштин) · можна взяти (бурштинова ШТРИХОВКА) · чекає подачі (сіра
   штриховка). Прозорий бурштин поверх темного фону давав каламутний
   оливковий, майже невідрізнний від зеленого поруч — звідси штриховка:
   фактура = «в роботі / не в роботі», колір = «наше / заблоковане».
   Токени — ті самі --green-deep/--amber/--panel-3/--line, що й решта
   дашборду, жодного власного відтінку. */
/* .sf-wrap займає РЕШТУ висоти .block-body (flex:1 1 auto) — заголовок
   (.sf-head) статичний, а прокручуються лише самі рядки, у ВЛАСНОМУ
   внутрішньому скролі (.sf-rows). Раніше заголовок був position:sticky
   всередині спільного з рядками потоку — рядок даних (2 рядки назви + бари +
   3 рядки Готово/Відвантажено/Вільно) ФІЗИЧНО вищий за шапку (лише підписи
   колонок), тож коли скрол зупинявся так, що черговий рядок опинявся якраз
   «під» шапкою, її висоти не вистачало його прикрити — нижній хвіст рядка
   стирчав під заголовком (Роман, 2026-08-09: «щось підлазить у
   стрічку-проміжок»). Sticky в принципі не міг це виправити (він лише
   позиціює ШАПКУ, не ховає чужий контент нижче неї) — тому рядки винесено у
   власний скрол, і шапка більше НІКОЛИ фізично не ділить простір із жодним
   рядком. */
.sf-wrap{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; min-height:0; }
.sf-rows{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden; }
.sf-row{ display:grid; grid-template-columns:var(--sf-cols); gap:7px; align-items:center;
  padding:6px 8px; border-radius:7px; flex:none; }
.sf-row:not(.sf-head):hover{ background:var(--panel-3); }
.sf-row.clickable{ cursor:pointer; }
.sf-head{ background:var(--panel); padding-top:0; padding-bottom:8px; flex:none; }
.sf-head .sf-col-head{ font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Розкрій/Комплектація — назви стосом у два рядки, не через « / »
   (Роман, 2026-08-09). */
.sf-head .sf-col-head-stack{ white-space:normal; line-height:1.3; }
.sf-head .sf-col-head-stack div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-head .sf-name-head{ font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
.sf-head .sf-doneship-head{ text-align:right; }
.sf-par{ color:var(--blue); font-style:normal; margin-left:2px; }

.sf-name{ min-width:0; }
.sf-title{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-sub-row{ display:flex; align-items:baseline; gap:4px; min-width:0; margin-top:1px; }
.sf-sub{ font-family:var(--mono); font-size:10px; color:var(--faint); flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Повернення — НЕ сегмент смуги, дрібна червона позначка збоку від плану
   (§4.3 брифу): подія, а не поступ до нього. Рідкісна — не фарбувати фоном.
   flex:none у СВОЄМУ рядку (.sf-sub-row), а не всередині .sf-sub, що обрізає
   text-overflow:ellipsis — інакше довгий підпис команди/партії обрізав би
   позначку повернення разом із рештою тексту, і брак ставав би невидимим. */
.sf-return{ color:var(--red); font-family:var(--mono); font-size:10px; flex:none; white-space:nowrap; }
/* Підрядник — Контроль стоїть ПЕРЕД Кінцевими (§4.4). Сітка порядку не
   декларує (стрілок між колонками нема), позначка лише попереджає про це. */
.sf-sub-badge{ font-family:var(--mono); font-size:8.5px; color:var(--blue); border:1px solid var(--blue);
  border-radius:3px; padding:0 3px; margin-left:5px; vertical-align:1px; }

.sf-cell{ height:16px; border-radius:3px; overflow:hidden; display:flex; background:var(--panel-3);
  box-shadow:inset 0 0 0 1px var(--line); }
.sf-cell i{ display:block; height:100%; }
.sf-seg-net{ background:var(--green-deep); }
.sf-seg-wip{ background:var(--amber); }
.sf-seg-av{ background:repeating-linear-gradient(-45deg, rgba(242,169,0,.30) 0 3px, rgba(242,169,0,.62) 3px 6px); }
.sf-seg-rest{ background:repeating-linear-gradient(-45deg, transparent 0 3px, rgba(154,163,171,.13) 3px 6px); }
.sf-cell.sf-none{ background:none; box-shadow:none; color:var(--faint); text-align:center; justify-content:center;
  align-items:center; font-family:var(--mono); font-size:11px; }
/* Паралельні кореневі етапи (Розкрій/Комплектація) — один стовпець, дві
   смуги стосом, кожна — окремий бар зі своїми заокругленнями (успадковує
   базовий .sf-cell), розділені тонкою сірою лінією: фон обгортки — колір
   лінії, видно лише в проміжку між барами (Роман, 2026-08-09: «чітко
   видно що це різні бари»). Висота стосу та сама, що й у звичайної смуги. */
.sf-cell-stack{ height:16px; display:flex; flex-direction:column; gap:1.5px;
  background:var(--line); border-radius:3px; }
.sf-cell-stack .sf-cell{ height:auto; flex:1 1 0; min-height:0; }

/* Готово / Відвантажено / Вільно — текст, потім цифра, усе праворуч
   (Роман, 2026-08-09), замінили колишню колонку «Доступно». display:contents
   на рядку кладе його label/число у ЗАГАЛЬНУ сітку колонок обгортки — так
   усі числа опиняються в одній колонці й вирівнюються одне під одним,
   незалежно від довжини підпису зліва («відвантажено» довше за «готово»). */
.sf-doneship{ font-family:var(--mono); display:grid; grid-template-columns:1fr auto; row-gap:1px; column-gap:6px; }
.sf-ds-row{ display:contents; }
.sf-ds-row span{ grid-column:1; text-align:left; font-size:8px; color:var(--faint);
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; align-self:baseline; }
.sf-ds-row b{ grid-column:2; text-align:right; font-size:11.5px; color:var(--text); font-weight:600; }

/* Чіпи-фільтр по командах над блоком (Роман, 2026-08-09). */
.sf-filters{ display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; margin-bottom:2px; flex:none; }
.sf-chip{ font-family:var(--mono); font-size:10.5px; color:var(--faint); background:var(--panel-3);
  border:1px solid var(--line); border-radius:20px; padding:3px 10px; white-space:nowrap; cursor:pointer; flex:none; }
.sf-chip:hover{ color:var(--text); }
.sf-chip.on{ color:var(--bg); background:var(--blue); border-color:var(--blue); font-weight:600; }

.sf-legend{ display:flex; gap:13px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; color:var(--faint);
  padding-top:10px; margin-top:9px; border-top:1px solid var(--line); flex:none; }
.sf-legend span{ display:flex; align-items:center; gap:5px; }
.sf-lg{ width:20px; height:10px; border-radius:2px; flex:none; box-shadow:inset 0 0 0 1px var(--line); }
.sf-lg.net{ background:var(--green-deep); }
.sf-lg.wip{ background:var(--amber); }
.sf-lg.av{ background:repeating-linear-gradient(-45deg, rgba(242,169,0,.30) 0 3px, rgba(242,169,0,.62) 3px 6px); }
.sf-lg.rest{ background:repeating-linear-gradient(-45deg, transparent 0 3px, rgba(154,163,171,.13) 3px 6px); }