/* ═══════════════════════════════════════════════════════════════
   ERadius — шар витончення UI.
   Вантажиться ПІСЛЯ styles.css і прибирає «дешевий» вигляд:
   важкі тіні, товсті скруглення, розхристану типографіку.
   Правило: межа замість тіні, щільність замість повітря,
   одна шкала радіусів, один шрифт.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* U18: стеля ширини контенту. Дефолт — none: на широкому моніторі
     контент тягнеться на все вікно, а не тулиться вліво з вакуумом
     праворуч. Стару поведінку повертає прапорець (див. кінець файлу). */
  --content-max:none;

  /* Скруглення: спокійна шкала замість 8/9/10/12/20 навперемін */
  --r-sm:5px;
  --r-md:7px;
  --r-lg:10px;
  --r-pill:999px;

  /* Тіні ледь помітні: глибину дає межа, не розмиття */
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --shadow-raised:0 2px 6px rgba(16,24,40,.06);
  --shadow-float:0 12px 32px rgba(16,24,40,.12);

  /* Межі двох ваг: службова й акцентна */
  --line:#e7eaee;
  --line-strong:#d5dae1;

  /* Типографіка: один гротеск, цифри моноширинні */
  --font-ui:"Inter var",Inter,"SF Pro Text","Segoe UI",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-family:var(--font-ui);
  font-feature-settings:"cv05" 1,"cv08" 1,"ss03" 1,"tnum" 0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html[data-theme="dark"]{
  --line:#232935;
  --line-strong:#2f3745;
  --shadow:0 1px 2px rgba(0,0,0,.28);
  --shadow-raised:0 2px 6px rgba(0,0,0,.32);
  --shadow-float:0 14px 36px rgba(0,0,0,.46);
}

/* ── Типографіка: Georgia геть, ясна ієрархія ваг ── */
.topbar h1,.panel h2,.section-heading h2,.metric-card strong,
.ring-value,.brand strong,.brand-name,h1,h2,h3{
  font-family:var(--font-ui);
  font-variant-numeric:tabular-nums;
}
.topbar h1{font-size:24px;font-weight:640;letter-spacing:-.021em;line-height:1.2}
.panel h2,.section-heading h2{font-size:14px;font-weight:620;letter-spacing:-.012em;margin-bottom:3px}
h3{font-size:13px;font-weight:600;letter-spacing:-.008em}
.eyebrow{font-family:var(--font-ui);font-size:10px;font-weight:560;
  letter-spacing:.1em;color:var(--muted);opacity:.85}
.muted{font-size:11.5px;line-height:1.5}
.brand-name{font-weight:640;letter-spacing:-.015em;font-size:14px}
.brand-sub{font-size:10.5px;letter-spacing:.005em}

/* Цифри — завжди табличні: колонки не «стрибають» */
.metric-card strong,.ring-value,.coverage-summary strong,
td,th,.sum-val,.pl-row,.score-badge{font-variant-numeric:tabular-nums}
.metric-card strong{font-size:26px;font-weight:600;letter-spacing:-.03em}

/* ── Поверхні: тонка межа замість важкої тіні ── */
.metric-card,.panel,.person-card,.task-card{
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.metric-card:hover,.person-card:hover,.task-card:hover{
  border-color:var(--line-strong);
  box-shadow:var(--shadow-raised);
}
.panel{padding:18px 20px}
.metric-card{padding:15px 16px}

/* ── Щільність: менше повітря між блоками ── */
.metric-grid{gap:10px;margin:20px 0 14px}
.content-grid{gap:12px;margin-bottom:12px}
.people-grid,.locations-grid,.task-board{gap:12px}

/* ── Кнопки: стриманіші, без кольорових ореолів ── */
.button{
  border-radius:var(--r-md);
  font-weight:560;
  font-size:12px;
  letter-spacing:-.004em;
  padding:8px 13px;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.button.primary{box-shadow:none;background:var(--blue);border-color:var(--blue)}
.button.primary:hover{filter:brightness(1.08)}
.button.secondary{background:var(--panel);border-color:var(--line-strong);color:var(--ink)}
.button.secondary:hover{background:var(--panel-raised);border-color:var(--muted)}
.button.compact{padding:6px 10px;font-size:11px}
.icon-button{border-radius:var(--r-sm)}
.text-button{font-weight:560;font-size:11.5px;color:var(--blue)}
.text-button:hover{text-decoration:underline;text-underline-offset:2px}

/* ── Поля вводу ── */
.search,.select-wrap select,.table-toolbar select,.task-toolbar select,
.status-select,input[type="text"],input[type="date"],input[type="time"],select{
  border-radius:var(--r-md);
  border-color:var(--line-strong);
  font-size:12px;
}
.search:focus,select:focus,input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb,20,86,217),.12);
  outline:none;
}

/* ── Дрібні елементи: єдина пігулка ── */
.chips span,.loc-badge,.state-pill,.action-pill,.availability,
.task-status,.pl-chip,.chip,.eq-src,.score-badge{
  border-radius:var(--r-pill);
  font-weight:520;
  letter-spacing:.002em;
}
.segmented{border-radius:var(--r-md);padding:2px;border:1px solid var(--line)}
.segmented button{border-radius:var(--r-sm);font-weight:540;padding:6px 11px}
.segmented button.selected{background:var(--panel-raised);color:var(--ink);font-weight:600}

/* ── Таблиці: легші лінії, спокійні заголовки ── */
th{font-weight:560;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line-strong)}
td,th{padding:11px 14px}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--bg-soft)}

/* ── Діалоги: м'якше й глибше ── */
dialog{border-radius:var(--r-lg);box-shadow:var(--shadow-float);border:1px solid var(--line)}
dialog::backdrop{background:rgba(16,24,40,.42);backdrop-filter:blur(2px)}
.dialog-head h2{font-size:14px;font-weight:620}

/* ── Бічна панель ── */
.nav-item{border-radius:var(--r-md);font-size:12.5px;font-weight:520;padding:9px 11px}
.nav-item.active{font-weight:600;border-left-width:2px;padding-left:10px}
.nav-group>summary{font-size:10.5px;font-weight:600;letter-spacing:.055em}

/* ── Спільні дрібниці ── */
.toast{border-radius:var(--r-md);box-shadow:var(--shadow-float);font-size:12px}
.roster-drawer,.people-list,.org-chart-wrap,.slots-summary{border-radius:var(--r-lg)}
.avatar{box-shadow:0 0 0 1px rgba(16,24,40,.06) inset}
.panel-footer{font-size:10.5px;padding-top:12px;margin-top:12px}

/* Прибираємо подвійні межі там, де панель усередині панелі */
.panel .panel{box-shadow:none}

/* ── Залишки старого стилю ── */
/* Georgia трималась у знаку, кільці й службових написах */
.brand-mark,.ring-value,.brand strong,.metric-card strong,
[style*="Georgia"],.coverage-summary strong{font-family:var(--font-ui) !important}

/* Кільце покриття: тонший обід, спокійніша цифра */
.coverage-ring{width:132px;height:132px;margin:20px auto 16px}
.coverage-ring:after{inset:14px}
.ring-value{font-size:26px;font-weight:600;letter-spacing:-.03em}
.ring-value small{font-size:12px}

/* Кольорові підкладки метрик — ледь помітні */
.metric-icon{width:34px;height:34px;border-radius:var(--r-md);font-size:16px}
.accent-blue .metric-icon{background:rgba(var(--accent-rgb,20,86,217),.07);color:var(--blue)}
.accent-green .metric-icon{background:rgba(17,135,93,.07);color:var(--green)}
.accent-amber .metric-icon{background:rgba(184,110,0,.08);color:var(--amber)}
.accent-violet .metric-icon{background:rgba(105,65,198,.07);color:var(--violet)}
.metric-card span{font-size:10.5px;letter-spacing:.01em}
.metric-card em{font-size:10px;opacity:.85}

/* Сповіщення: без заливки на всю ширину */
.alert-box{border-radius:var(--r-md);padding:10px 12px;margin-top:14px;
  background:transparent;border:1px solid var(--line-strong)}
.alert-box>span{width:18px;height:18px;font-size:11px;line-height:18px}

/* Клітинки графіка: пастель замість «неону» */
.shift.filled{background:rgba(17,135,93,.055)}
.shift.warning-cell{background:rgba(184,110,0,.055)}

/* Смуга «DEV» угорі не має кричати */
.dev-banner{font-size:10.5px;letter-spacing:.01em;opacity:.9}

/* ── Останній шар: прибираємо крик ── */
/* Порожні клітинки чергування заливались червоним на всю ширину */
.shift.empty{background:transparent;color:var(--muted)}
.shift-row:hover .shift{background:var(--bg-soft)}
.shift.filled:hover{background:rgba(17,135,93,.09)}

/* Імена у клітинках графіка мають вміщатись */
.shift-person{font-size:9.5px;line-height:1.25}
.sp-name{font-weight:540;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-loc{font-size:8.5px;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Список локацій: крапка-статус лише там, де є проблема */
.loc-status .status-dot{opacity:.5}
.loc-status li,.loc-status>div{font-size:11px;padding:5px 0;border-bottom:1px solid var(--line)}
.loc-status>div:last-child{border-bottom:0}

/* Смуга розробки: службова, не декоративна */
.dev-banner{background:var(--panel-raised);color:var(--muted);border-bottom:1px solid var(--line)}
.dev-banner a{color:var(--blue)}

/* Секційні заголовки в бічній колонці */
.loc-status-title,.coverage-summary span{font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-weight:560}

/* ── Залишки старої палітри ──
   У styles.css лишалось 39 входжень пастелі попередньої теми
   (#ED7D68, #E4B16B, #6BC6A2, #96A6B9): на світлому тлі контраст 1.0–2.7.
   ВАЖЛИВО: у старих правилах колір заданий з !important, тож перекривати
   треба ТИМ САМИМ селектором — інакше перемагає він, а не порядок файлів. */

/* Небезпека / прогалина */
.cell-gap{color:#a52639!important;background:rgba(196,50,74,.06)!important}
.absent{color:var(--danger)!important;background:rgba(196,50,74,.07)!important}
.task-status.due{color:var(--danger)!important;background:rgba(196,50,74,.08)!important}
.state-pill.warn{color:var(--danger)!important;background:rgba(196,50,74,.07)!important}
.loc-badge.gap{color:var(--danger)!important;background:rgba(196,50,74,.06)!important;
  border-color:rgba(196,50,74,.24)!important}
.priority.high{background:var(--danger)!important}
.notification-dot{background:var(--danger)!important}
.danger,.warning{color:var(--danger)!important}

/* Норма */
.available{color:#0b6b48!important;background:rgba(17,135,93,.08)!important}
.state-pill{color:var(--green)!important;background:rgba(17,135,93,.07)!important}
.score-badge{color:#0b6b48!important;background:rgba(17,135,93,.09)!important}
.loc-badge.ok{color:var(--green)!important;background:rgba(17,135,93,.07)!important;
  border-color:rgba(17,135,93,.22)!important}
.positive{color:var(--green)!important}
.filled-dot{background:var(--green)!important}
.priority.low{background:var(--muted)!important}

/* Увага */
.warning-dot{background:var(--amber)!important}
.priority.medium{background:var(--amber)!important}

/* Нейтральне */
.action-pill{color:var(--muted)!important;background:var(--panel-raised)!important}
.task-status.progress{color:var(--muted)!important;background:var(--panel-raised)!important}
.task-status.planned{color:var(--muted)!important;background:var(--bg-soft)!important}
.ring-value small{color:var(--muted)!important}
.coverage-summary span{color:var(--muted)!important}
.empty-dot{background:var(--line-strong)!important}
.shift.empty{color:var(--muted)!important}

/* Сповіщення */
.alert-box{color:var(--ink)!important;background:transparent!important;
  border:1px solid var(--line-strong)!important;border-radius:var(--r-md);padding:10px 12px}
.alert-box strong,.alert-box p{color:var(--ink)!important}
.alert-box>span{color:var(--amber)!important;background:rgba(184,110,0,.1)!important;
  width:18px;height:18px;font-size:11px;line-height:18px}
.alert-box button{color:var(--muted)!important}

/* Аватари: приглушені, щоб не «світились» */
.blue{background:#3b6fd4}.purple{background:#7558c4}.orange{background:#b8823c}
.green{background:#2c8f68}.pink{background:#b56884}.cyan{background:#3a8b99}
.avatar.small{background:#4a6285}

/* Темна тема лишає світлі відтінки: на темному тлі темний текст не читається */
html[data-theme="dark"] .available,
html[data-theme="dark"] .score-badge{color:#34d399!important}
html[data-theme="dark"] .cell-gap{color:#f8768f!important}

/* ═══ Дашборд: сітка з розмірами віджетів ═══ */
.dash-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  align-items:start;margin-top:16px}
.dash-grid>[data-widget]{grid-column:span 1;min-width:0}
.dash-grid>[data-widget][data-size="md"]{grid-column:span 2}
.dash-grid>[data-widget][data-size="lg"]{grid-column:span 4}
.widget-hidden{display:none!important}
/* Картка, яку метрики позначили `hidden`, має ЗНИКАТИ. Клас .metric-card
   задає власний display і за специфічністю перемагає UA-правило
   [hidden]{display:none} — без цього на «Огляді» лишались порожні
   прямокутники 255x32 px. Той самий випадок, що й .brand-mark[hidden]. */
.dash-grid>[data-widget][hidden],
[data-widget][hidden]{display:none!important}
@media(max-width:1100px){
  .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-grid>[data-widget][data-size="lg"],
  .dash-grid>[data-widget][data-size="md"]{grid-column:span 2}
}
@media(max-width:720px){
  .dash-grid{grid-template-columns:1fr}
  .dash-grid>[data-widget]{grid-column:span 1!important}
}
/* metrics усередині лишається власною сіткою карток */
.dash-grid>.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
@media(max-width:1100px){.dash-grid>.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Режим редагування: віджети дрижать, як на телефоні ── */
.widgets-editable .dash-grid>[data-widget]{
  position:relative;cursor:grab;
  animation:w-jiggle 3.4s ease-in-out infinite;
  transform-origin:50% 50%}
.widgets-editable .dash-grid>[data-widget]:nth-child(2n){animation-delay:-1.7s}
.widgets-editable .dash-grid>[data-widget]:nth-child(3n){animation-delay:-.9s}
@keyframes w-jiggle{
  0%,100%{transform:rotate(-.22deg)}
  50%    {transform:rotate(.22deg)}
}
.widgets-editable .dash-grid>[data-widget]:hover{box-shadow:var(--shadow-raised)}

/* Хрестик і ручка розміру */
.w-chrome{position:absolute;top:-9px;left:-9px;right:-9px;z-index:6;
  display:flex;justify-content:space-between;pointer-events:none}
.w-chrome>*{pointer-events:auto}
.w-close,.w-size{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--panel);color:var(--ink);font-size:12px;line-height:1;padding:0;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 6px rgba(16,24,40,.16);transition:transform .12s ease,background .12s ease}
.w-close{font-size:15px;color:var(--danger)}
.w-close:hover{background:var(--danger);color:#fff;border-color:transparent;transform:scale(1.12)}
.w-size{font-size:10px;font-weight:600;width:auto;min-width:22px;padding:0 7px;border-radius:11px}
.w-size:hover{background:var(--blue);color:#fff;border-color:transparent;transform:scale(1.08)}

/* Відрив під час тягання */
.dash-grid>[data-widget].widget-dragging{
  position:fixed!important;z-index:900;margin:0!important;animation:none;
  cursor:grabbing;pointer-events:none;transition:none;
  transform:scale(1.03) rotate(.8deg);opacity:.97;
  box-shadow:0 22px 48px rgba(16,24,40,.28),0 0 0 2px var(--blue)}
.dash-grid>[data-widget].widget-landing{animation:w-land .3s cubic-bezier(.22,1.2,.36,1)}
@keyframes w-land{0%{transform:scale(1.03)}55%{transform:scale(.985)}100%{transform:scale(1)}}
body.widget-drag-active{user-select:none}
body.widget-drag-active *{cursor:grabbing!important}

/* ── Лоток прихованих віджетів ── */
.dash-tray{margin-top:18px;padding:14px 16px;border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);background:var(--bg-soft)}
.dash-tray-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.dash-tray-head b{font-size:12px;font-weight:620}
.dash-tray-head .muted{font-size:10.5px}
.dash-tray-items{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.dash-tray-items .muted{white-space:nowrap}
.tray-card{flex:0 0 auto;scroll-snap-align:start;min-width:172px;max-width:220px;
  text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel);cursor:pointer;
  transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.tray-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.tray-card b{display:block;font-size:11.5px;font-weight:600;margin-bottom:2px}
.tray-card small{display:block;font-size:10px;color:var(--muted);line-height:1.35}

/* Шестерня в топбарі */
#dashboardArrange{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-md)}
#dashboardArrange:hover{background:var(--panel-raised)}
#dashboardArrange.active{background:var(--blue);color:#fff}
#dashboardArrange.active .ic{transform:rotate(45deg);transition:transform .25s ease}
#dashboardArrange .ic{width:17px;height:17px}

@media(prefers-reduced-motion:reduce){
  .widgets-editable .dash-grid>[data-widget]{animation:none}
  .dash-grid>[data-widget].widget-landing{animation:none}
}
.tray-card.tray-reset{border-style:dashed;min-width:150px}
.tray-card.tray-reset b{color:var(--muted);font-weight:560}
.tray-card.tray-reset:hover{border-color:var(--muted);border-style:solid}

/* ── Спливне меню планування ── */
.ctx-menu{position:fixed;z-index:1000;min-width:230px;max-width:300px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-float);overflow:hidden;animation:ctx-in .13s ease-out}
@keyframes ctx-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ctx-head{padding:9px 13px;font-size:10.5px;font-weight:620;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line);
  background:var(--bg-soft)}
.ctx-items{max-height:340px;overflow-y:auto;padding:4px}
/* [hidden] має перемагати display:flex — інакше пошук нічого не ховає */
.ctx-item[hidden]{display:none!important}
.ctx-item{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;
  padding:7px 10px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--ink);font-size:12px;cursor:pointer;transition:background .1s ease}
.ctx-item:hover{background:var(--panel-raised)}
.ctx-item small{font-size:10px;color:var(--muted)}
.ctx-item.danger{color:var(--danger)}
.ctx-item.danger:hover{background:rgba(196,50,74,.07)}
.ctx-empty{margin:0;padding:12px 13px;font-size:11px;color:var(--muted)}

/* Клітинки зміни й апарата — очевидно клікабельні */
.shift[data-shift],.shift[data-type]{cursor:pointer;transition:background .12s ease,box-shadow .12s ease}
.shift[data-shift]:hover,.shift[data-type]:hover{box-shadow:inset 0 0 0 1.5px var(--blue)}
#equipmentBody th.day-cell{cursor:pointer;transition:color .12s ease}
#equipmentBody th.day-cell:hover{color:var(--blue)}
#equipmentBody th.day-cell::after{content:' ⋯';opacity:.35;font-size:11px}

/* Графік на всю ширину — плашки персоналу більше немає */
.schedule-panel.full{margin-top:12px}
.ctx-menu{display:flex;flex-direction:column}
.ctx-search{margin:6px 6px 2px;padding:6px 9px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--bg-soft);color:var(--ink);font-size:12px}
.ctx-search:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(var(--accent-rgb,20,86,217),.12);outline:none}
.ctx-items{flex:1;min-height:0}

/* ── Поля вводу в темній темі ──
   Кілька полів лишались із браузерним чорним текстом: input[type=number],
   input[type=time], select і .competency-rename з прозорим фоном.
   Селектор у styles.css перелічував типи поіменно й ці не покривав. */
input,select,textarea,
input[type="number"],input[type="time"],input[type="date"],
input[type="color"],input[type="search"],
.competency-rename,.pt-rename,.pt-duration,.equipment-rename{
  color:var(--ink);
  background:var(--panel-raised);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
}
/* Поле-фарба показує сам колір, не має фону панелі */
input[type="color"]{padding:2px;background:transparent;border-radius:var(--r-sm);
  width:34px;height:26px;cursor:pointer}
input[type="color"]::-webkit-color-swatch{border:0;border-radius:3px}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
/* Рядок довідника: поле назви зливається з рядком, доки його не чіпають */
.competency-rename,.pt-rename,.equipment-rename{background:transparent;border-color:transparent}
.competency-rename:hover,.pt-rename:hover,.equipment-rename:hover{border-color:var(--line)}
.competency-rename:focus,.pt-rename:focus,.equipment-rename:focus{
  background:var(--panel-raised);border-color:var(--blue)}
::placeholder{color:var(--muted);opacity:.75}
/* Годинники й лічильники: іконки браузера в темній темі мають бути світлі */
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="number"]{color-scheme:dark}

/* ── Діалоги в темній темі ──
   <dialog> має власні браузерні кольори (білий фон, чорний текст), які
   не успадковуються від теми. Через це вміст лишався чорним на білому,
   а вкладені картки — чорним на темному. Задаємо явно. */
dialog{background:var(--panel);color:var(--ink)}
dialog h2,dialog h3,dialog label,dialog p,dialog span,dialog b,dialog strong,
dialog td,dialog th,dialog li,dialog legend,dialog summary{color:inherit}
dialog .muted,dialog small{color:var(--muted)}
dialog .type-card,dialog .field-row,dialog .competency-row,dialog article{
  background:var(--panel-raised);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink)}
dialog .dialog-head{border-bottom:1px solid var(--line)}
dialog input,dialog select,dialog textarea{
  background:var(--panel-raised);color:var(--ink);border:1px solid var(--line-strong)}
html[data-theme="dark"] dialog{color-scheme:dark}

/* ── Локації: режим списку ── */
.loc-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-top:14px}
.ll-head,.ll-row{display:grid;
  grid-template-columns:minmax(190px,1.3fr) minmax(110px,.7fr) minmax(180px,1.4fr) minmax(130px,.8fr) 84px;
  gap:12px;align-items:center;padding:10px 14px;background:var(--panel);font-size:12px}
.ll-head{background:var(--panel-raised);font-size:10px;font-weight:620;color:var(--muted);
  text-transform:uppercase;letter-spacing:.055em}
.ll-row:hover{background:var(--bg-soft)}
.ll-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.ll-name b{font-weight:600}
.ll-name small{font-size:10px;color:var(--muted)}
.ll-num{font-variant-numeric:tabular-nums;font-weight:600}
.ll-num small{font-weight:400;color:var(--muted);font-size:10.5px}
.ll-eq{display:flex;gap:4px;flex-wrap:wrap;overflow:hidden}
.ll-act{text-align:right}
.loc-map{margin-top:14px}

/* ── Операційний контур: фіксована дошка 12×N (MAVEN Grid v2) ── */
.dash-board-grid{--dash-row:44px;display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:var(--dash-row);grid-template-rows:repeat(var(--dash-rows,6),var(--dash-row));
  gap:10px;align-items:stretch;margin-top:16px;min-height:calc(var(--dash-rows,6) * var(--dash-row));}
.dash-board-grid>[data-board-widget]{min-width:0;min-height:0;margin:0!important;overflow:auto}
.dash-board-grid>.metric-card{display:flex;align-items:center;padding:14px}
.board-editing .dash-board-grid{padding:10px;border-radius:var(--r-lg);
  background-image:linear-gradient(to right,rgba(92,115,150,.14) 1px,transparent 1px),
  linear-gradient(to bottom,rgba(92,115,150,.14) 1px,transparent 1px);
  background-size:calc((100% - 20px)/12) var(--dash-row);background-position:10px 10px;
  outline:1px dashed var(--line-strong)}
.board-editing .dash-board-grid>[data-board-widget]{outline:1px solid rgba(var(--accent-rgb,20,86,217),.30)}
@media(max-width:900px){.dash-board-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.dash-board-grid>[data-board-widget]{grid-column:span 6!important}}

/* Тимчасовий safe layout, доки reviewed MAVEN Grid v2 не інтегрований.
   На скріншоті fixed 44px rows дали 9 вкладених скролбарів і обрізали дані. */
.dash-board-grid.dash-board-staging{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:none!important;grid-auto-rows:auto!important;gap:12px;min-height:0}
.dash-board-staging>[data-board-widget]{overflow:visible!important;min-height:auto;grid-row:auto!important}
.dash-board-staging>[data-board-widget^="kpi-"]{grid-column:span 1!important}
.dash-board-staging>[data-board-widget="schedule"],
.dash-board-staging>[data-board-widget="coverage"],
.dash-board-staging>[data-board-widget="people"],
.dash-board-staging>[data-board-widget="tasks"]{grid-column:span 2!important}
.dash-board-staging>[data-board-widget="gaps"],
.dash-board-staging>[data-board-widget="equipment"]{grid-column:span 4!important}
.board-editing .dash-board-staging{background-image:none;outline:1px dashed var(--line-strong);padding:10px}
@media(max-width:900px){.dash-board-grid.dash-board-staging{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dash-board-staging>[data-board-widget]{grid-column:span 2!important}}

/* ============================================================================
   >>> ERADIUS PHASE-0 OVERLAY — BEGIN <<<
   Дописувати в САМИЙ КІНЕЦЬ prototype/refine.css.
   refine.css вантажиться після styles.css → цей шар перекриває все.
   ОБОРОТНІСТЬ: видалити/закоментувати все між маркерами
   ">>> ERADIUS PHASE-0 OVERLAY — BEGIN <<<" і "— END <<<" —
   проєкт повертається до попереднього вигляду без інших правок.

   Порядок каскаду всередині шару (не переставляти):
     A. Токени (база, аліаси, світла тема, додаткові токени компонентів)
     B. База документа (html/body, фокус, .num, reduced-motion)
     C. Компоненти (таблиця, чипи, картки, кнопки, поля)
     D. Зачистка-перекриття (тіні, таблиці, радіуси, хардкод-кольори,
        типографіка) — б'є найпізніше, тому стоїть в кінці.
   ============================================================================ */


/* ==========================================================================
   A. ТОКЕНИ
   ========================================================================== */

/* ---------- A1. БАЗОВІ ТОКЕНИ (ТЕМНА ТЕМА = ЗА ЗАМОВЧУВАННЯМ) ---------- */
:root {
  /* -- Поверхні -- */
  --bg-base: #0D1014;      /* найглибше тло застосунку */
  --bg-surface: #14181E;   /* панелі, картки */
  --bg-raised: #1B2027;    /* спливні шари, тулбари */
  --bg-sunken: #0A0C10;    /* заглиблення: поля вводу, таймлайн-треки */
  --bg-hover: #1E242C;     /* ховер рядка/кнопки */
  --bg-active: #232A33;    /* натиснутий/вибраний стан */

  /* -- Текст -- */
  --text-primary: #E6EAF0;
  --text-secondary: #A6B0BF;
  --text-muted: #7C8798;
  --text-inverse: #0D1014; /* текст на заливці акцентом */

  /* -- Межі -- */
  --border-subtle: #232A33;
  --border-strong: #323B47;
  --border-focus: #4C8DFF;

  /* -- Акцент -- */
  --accent-brand: #1456D9; /* фірмовий, для лого/бренд-плям */
  --accent: #4C8DFF;       /* інтерактивний акцент (текст/іконки) */
  --accent-solid: #2D6FE8; /* заливка первинної кнопки */
  --accent-hover: #3C7CF0;
  --accent-quiet: #17233A; /* тиха акцентна підкладка */
  /* ЄДИНЕ визначення кільця фокусу (у блоці компонентів був дубль на
     color-mix — прибрано, лишається rgba: ширша підтримка). */
  --accent-ring: rgba(76, 141, 255, .35);
  /* Сирі компоненти акценту для rgba() з власною прозорістю. */
  --accent-rgb: 76, 141, 255;

  /* -- Статуси -- */
  --success: #3FCF8E;
  --success-quiet: #10261D;
  --warning: #F0B429;
  --warning-quiet: #2A2110;
  --danger: #F2555A;
  --danger-quiet: #2B1518;

  /* -- Тіні -- */
  --shadow-popover: 0 8px 24px -8px rgba(0, 0, 0, .55), 0 0 0 1px var(--border-strong);
  --shadow-modal: 0 24px 64px -16px rgba(0, 0, 0, .7), 0 0 0 1px var(--border-strong);
  /* Тінь Esc-шарів: аліас, а не третє незалежне визначення — інакше
     у світлій темі вона не перемикалась би. */
  --shadow-overlay: var(--shadow-popover);

  /* -- Радіуси (спільна шкала) -- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-full: 999px;

  /* -- Простір -- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* -- Розміри керуючих елементів -- */
  --row-h-compact: 28px;
  --row-h-default: 34px;
  --control-h: 32px;

  /* -- Типографіка -- */
  --fs-micro: 11px;
  --fs-caption: 12px;
  --fs-body: 13px;
  --fs-body-lg: 14px;
  --fs-title: 15px;
  --fs-display: 20px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600; /* 700 заборонено — максимум 600 */

  /* -- Палітра модальностей: 6 hue, вирівняних за світлотою
        (≈ L 72–74% OKLCH, C ≈ 0.09). Жоден не «кричить» гучніше сусіда. -- */
  --mod-ct:  #7FA8D9; /* КТ      — холодний блакитний,  hue ≈ 250° */
  --mod-mr:  #9C9BE0; /* МРТ     — індиго-фіолет,       hue ≈ 285° */
  --mod-us:  #6FB8A8; /* УЗД     — приглушений тіл,     hue ≈ 175° */
  --mod-xr:  #A9AF88; /* Рентген — оливково-хакі,       hue ≈ 115° */
  --mod-mam: #D69BAE; /* Мамо    — припилений рожевий,  hue ≈ 355° */
  --mod-nm:  #D2A374; /* Ядерна  — теплий вохра,        hue ≈  55° */
  --mod-bar: 2px;     /* товщина модальнісної смуги */
}

/* ---------- A2. АЛІАСИ СТАРИХ ТОКЕНІВ (СУМІСНІСТЬ ЗІ styles.css + 5 модулями)
   Кожен старий токен переозначено на новий за семантикою; через var()
   вони автоматично підхоплюють значення активної теми. ---------- */
:root {
  /* Поверхні */
  --bg: var(--bg-base);
  --panel: var(--bg-surface);
  --panel-raised: var(--bg-raised);
  --rail: var(--bg-sunken);
  --bg-soft: var(--bg-hover);

  /* Текст */
  --ink: var(--text-primary);
  --muted: var(--text-muted);

  /* Межі */
  --line: var(--border-subtle);
  --line-strong: var(--border-strong);

  /* Акценти */
  --blue: var(--accent);
  --copper: var(--accent);
  --on-copper: var(--text-inverse);
  --violet: var(--accent-brand);

  /* Статуси (--danger успадковується з базового блоку) */
  --green: var(--success);
  --amber: var(--warning);

  /* Тіні */
  --shadow: var(--shadow-popover);
  --shadow-raised: var(--shadow-popover);
  --shadow-float: var(--shadow-modal);

  /* Радіуси */
  --r-pill: var(--r-full);

  /* Страховка: якщо у styles.css немає --font-ui, шар не «впаде» в serif */
  --font-ui: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* ---------- A3. СВІТЛА ТЕМА (ОПЦІЯ)
   Перевизначаємо ТІЛЬКИ базові токени — аліаси перемикаються самі. ---------- */
html[data-theme="light"] {
  /* -- Поверхні -- */
  --bg-base: #F4F6FA;
  --bg-surface: #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-sunken: #EAEEF4;
  --bg-hover: #EDF1F7;
  --bg-active: #E1E7F0;

  /* -- Текст -- */
  --text-primary: #14181E;
  --text-secondary: #47525F;
  --text-muted: #6B7686;
  --text-inverse: #FFFFFF;

  /* -- Межі -- */
  --border-subtle: #DDE3EC;
  --border-strong: #BFC8D6;
  --border-focus: #1456D9;

  /* -- Акцент: темніший #1456D9 (контраст ≥ 4.5:1) -- */
  --accent-brand: #1456D9;
  --accent: #1456D9;
  --accent-solid: #1456D9;
  --accent-hover: #1149B8;
  --accent-quiet: #E7EEFC;
  --accent-ring: rgba(20, 86, 217, .32);
  --accent-rgb: 20, 86, 217;

  /* -- Статуси: темніші відповідники -- */
  --success: #12855A;
  --success-quiet: #E3F6ED;
  --warning: #9A6800;
  --warning-quiet: #FBF1DA;
  --danger: #C62828;
  --danger-quiet: #FBE6E7;

  /* -- Тіні: м'якші -- */
  --shadow-popover: 0 8px 24px -8px rgba(16, 24, 40, .18), 0 0 0 1px var(--border-subtle);
  --shadow-modal: 0 24px 64px -16px rgba(16, 24, 40, .24), 0 0 0 1px var(--border-subtle);
}


/* ==========================================================================
   B. БАЗА ДОКУМЕНТА
   ========================================================================== */

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}

/* ---------- B1. ФОКУС — один узгоджений ринг на весь застосунок ---------- */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* Прибираємо стару жорстку обводку при кліку мишею */
:focus:not(:focus-visible) { outline: none; }

/* ---------- B2. ТАБУЛЯРНІ ЦИФРИ ---------- */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* ---------- B3. ЗМЕНШЕНИЙ РУХ ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   C. КОМПОНЕНТИ
   Принцип: колір = сигнал, а не декор. ≤3 насичені плями/екран.
   ========================================================================== */

/* ---------- C1. ТАБЛИЦЯ ДАНИХ ---------- */
.table-wrap {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: auto;
}

.table-wrap table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  color: var(--text-primary);
}

/* Шапка: липка, на --bg-surface, відділена сильною межею */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  height: var(--row-h-compact);
  padding: 0 var(--space-3);
  white-space: nowrap;
}

/* Рядки: єдиний тонкий розділювач знизу */
.data-table tbody td {
  height: var(--row-h-default);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  border-left: 0;
  border-right: 0;
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table tbody tr:hover td { background: var(--bg-hover); }
.data-table tbody tr:active td { background: var(--bg-active); }

/* Вибраний рядок — тиха підкладка + маркер зліва */
.data-table tbody tr[aria-selected="true"] td,
.data-table tbody tr.is-selected td {
  background: var(--accent-quiet);
  color: var(--text-primary);
}
.data-table tbody tr[aria-selected="true"] td:first-child,
.data-table tbody tr.is-selected td:first-child {
  box-shadow: inset 2px 0 0 0 var(--accent);
}

/* Числові колонки */
.data-table .num,
.data-table th.num,
.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Другорядні клітинки */
.data-table .cell-muted { color: var(--text-muted); }
.data-table .cell-secondary { color: var(--text-secondary); }

/* Компактний режим */
.data-table.is-compact tbody td { height: var(--row-h-compact); }

/* Клавіатурний фокус на рядку */
.data-table tbody tr:focus-visible { outline: none; }
.data-table tbody tr:focus-visible td {
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--border-focus);
}

/* ---------- C2. QUIET-ЧИПИ СТАТУСІВ
   Колір несе ТІЛЬКИ точка-носій (6px). Текст завжди --text-secondary. ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 20px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.chip::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip-dot, var(--text-muted));
}

.chip--ok,
.chip--success {
  --chip-dot: var(--success);
  background: var(--success-quiet);
  border-color: color-mix(in oklab, var(--success) 30%, transparent);
}
.chip--warn,
.chip--warning {
  --chip-dot: var(--warning);
  background: var(--warning-quiet);
  border-color: color-mix(in oklab, var(--warning) 30%, transparent);
}
.chip--danger {
  --chip-dot: var(--danger);
  background: var(--danger-quiet);
  border-color: color-mix(in oklab, var(--danger) 30%, transparent);
}
.chip--info {
  --chip-dot: var(--accent);
  background: var(--accent-quiet);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}
.chip--neutral {
  --chip-dot: var(--text-muted);
  background: var(--bg-raised);
  border-color: var(--border-subtle);
}

/* ВИНЯТОК: critical — єдиний solid-чип у системі, ≤1 на екран */
.chip--critical {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.chip--critical::before {
  background: #fff;
  opacity: 0.9;
}

/* Чип без точки (чисті метадані, не статуси) */
.chip--plain::before { display: none; }

/* ---------- C3. КАРТКА ПЕРСОНАЛУ
   Модальність кодується 2px inset-смугою ЗЛІВА, НІКОЛИ не заливкою. ---------- */
.staff-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-left: calc(var(--space-4) + var(--mod-bar));
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: inset var(--mod-bar) 0 0 0 var(--staff-mod, transparent);
  transition: background 120ms ease, border-color 120ms ease;
}

.staff-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.staff-card[aria-selected="true"],
.staff-card.is-selected {
  border-color: var(--border-focus);
  background: var(--bg-raised);
}

/* Прив'язка модальності — задає лише змінну смуги */
.staff-card.mod-ct  { --staff-mod: var(--mod-ct); }
.staff-card.mod-mr  { --staff-mod: var(--mod-mr); }
.staff-card.mod-us  { --staff-mod: var(--mod-us); }
.staff-card.mod-xr  { --staff-mod: var(--mod-xr); }
.staff-card.mod-mam { --staff-mod: var(--mod-mam); }
.staff-card.mod-nm  { --staff-mod: var(--mod-nm); }

.staff-card__name {
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}
.staff-card__role {
  color: var(--text-secondary);
  font-size: var(--fs-micro);
}
.staff-card__meta {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}

/* Текстова мітка модальності — колір лише на 6px крапці */
.mod-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
}
.mod-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--staff-mod, var(--text-muted));
}

/* Ті самі смуги для .panel і .metric-card */
.panel.mod-ct,  .metric-card.mod-ct  { --staff-mod: var(--mod-ct);  }
.panel.mod-mr,  .metric-card.mod-mr  { --staff-mod: var(--mod-mr);  }
.panel.mod-us,  .metric-card.mod-us  { --staff-mod: var(--mod-us);  }
.panel.mod-xr,  .metric-card.mod-xr  { --staff-mod: var(--mod-xr);  }
.panel.mod-mam, .metric-card.mod-mam { --staff-mod: var(--mod-mam); }
.panel.mod-nm,  .metric-card.mod-nm  { --staff-mod: var(--mod-nm);  }

/* Смуга модальності. Селектор із подвоєнням класу піднімає специфічність
   вище за зачистку (D1), яка скидає box-shadow у контейнерах. */
.panel.panel[class*="mod-"],
.metric-card.metric-card[class*="mod-"],
.staff-card.staff-card[class*="mod-"] {
  box-shadow: inset var(--mod-bar) 0 0 0 var(--staff-mod, transparent);
}

/* ---------- C4. КНОПКИ ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.button:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Primary — насичена пляма. На екрані має бути ОДНА. */
.button.primary {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}
.button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
}
.button.primary:active:not(:disabled) {
  background: color-mix(in oklab, var(--accent-solid) 88%, #000);
}

/* Secondary — прозора, тримається на межі */
.button.secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.button.secondary:hover:not(:disabled) { background: var(--bg-hover); }
.button.secondary:active:not(:disabled) { background: var(--bg-active); }

/* Деструктивна дія — межа, не заливка */
.button.danger {
  background: transparent;
  border-color: color-mix(in oklab, var(--danger) 50%, transparent);
  color: var(--danger);
}
.button.danger:hover:not(:disabled) { background: var(--danger-quiet); }

/* Text-button — найтихіший рівень ієрархії */
.text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.text-button:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.text-button:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Компактний варіант */
.button.is-compact,
.text-button.is-compact {
  height: calc(var(--control-h) - 6px);
  padding: 0 var(--space-3);
  font-size: var(--fs-micro);
}

/* Іконкова кнопка — квадрат за висотою контролу */
.button.is-icon {
  width: var(--control-h);
  padding: 0;
}
.button.is-icon.is-compact { width: calc(var(--control-h) - 6px); }

/* Група кнопок */
.button-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- C5. ПОЛЯ ВВОДУ Й СЕЛЕКТИ ---------- */
.input,
.select,
.search input,
textarea.input {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.input::placeholder,
.search input::placeholder { color: var(--text-muted); }

.input:hover:not(:disabled),
.select:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--border-strong) 70%, var(--text-muted));
}

/* Фокус — межа + напівпрозоре кільце (не рахується як насичена пляма) */
.input:focus,
.select:focus,
.search input:focus,
textarea.input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.input:disabled,
.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Помилка — межа + текст підказки, без заливки поля */
.input.is-invalid,
.select.is-invalid { border-color: var(--danger); }
.input.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 25%, transparent);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field__label {
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
}
.field__hint {
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.field__error {
  color: var(--danger);
  font-size: var(--fs-micro);
}

/* Селект — власна стрілка */
.select {
  appearance: none;
  padding-right: var(--space-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right var(--space-4) center,
                       right calc(var(--space-4) - 5px) center;
  background-repeat: no-repeat;
  color: var(--text-primary);
  cursor: pointer;
}

/* Пошук — поле з іконкою зліва.
   УВАГА: у цьому проєкті `.search` — це САМ <input class="search">, а не
   обгортка. display:flex на input ламав розкладку (сайдбар розсипався в ряд),
   тому обгорткові правила діють лише там, де .search справді контейнер. */
.search:has(> input) {
  position: relative;
  display: flex;
  align-items: center;
}
.search > input { padding-left: var(--space-6); }
.search__icon {
  position: absolute;
  left: var(--space-3);
  display: flex;
  color: var(--text-muted);
  pointer-events: none;
}

/* Textarea — висота вільна */
textarea.input {
  height: auto;
  min-height: calc(var(--control-h) * 2.5);
  padding: var(--space-3);
  line-height: 1.5;
  resize: vertical;
}


/* ==========================================================================
   D. ЗАЧИСТКА-ПЕРЕКРИТТЯ (б'є найпізніше)
   Файл вантажиться останнім, тому вистачає селекторів рівної або вищої
   специфічності — !important не потрібен.
   ========================================================================== */

/* ---------- D1. ТІНІ: лишаються лише там, звідки можна вийти по Esc ---------- */

/* Усе «в потоці» — тінь замінюємо на тонку лінію-кордон.
   Подвоєння класу (.panel.panel) навмисне піднімає специфічність.
   :not([class*="mod-"]) — щоб не збити inset-смугу модальності з C3. */
.panel:not([class*="mod-"]), .panel.panel:not([class*="mod-"]),
.metric-card:not([class*="mod-"]),
.staff-card:not([class*="mod-"]),
.card, .card.card,
.table-wrap, .table-wrap.table-wrap,
.widget, .stat-card,
.loc-badge, .loc-pos,
.status-dot {
  box-shadow: none;
  border: 1px solid var(--border-subtle);
}

/* Ризик №1 зі списку: `section` — надто широкий селектор, він малював рамку
   навколо семантичних обгорток («порожні коробки»). Рамка лише там, де секція
   справді є візуальним контейнером. Сайдбар прибрано звідси: він має власну
   праву межу, а зайва рамка обрізала його кути. */
.section {
  box-shadow: none;
  border: 1px solid var(--border-subtle);
}
.sidebar { box-shadow: none; }

/* Esc-шари: єдиний легітимний випадок «плаваючого» елемента над контентом */
.dropdown, .dropdown-menu,
.tooltip,
.popover,
.modal, .modal-dialog, .modal-content,
.drawer, .drawer-panel,
.drag-preview, [data-dragging="true"] {
  box-shadow: var(--shadow-overlay);
  border: 1px solid var(--border-subtle);
}

/* ---------- D2. ТАБЛИЦІ: без зебри, без вертикальних ліній ---------- */
table, table.data-table { border-collapse: collapse; }

table tr:nth-child(even),
table tbody tr:nth-child(even),
.data-table tr:nth-child(even) {
  background: transparent; /* прибираємо зебру */
}

table th, table td,
.data-table th, .data-table td {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--border-subtle);
}

/* ---------- D3. РАДІУСИ: приводимо СТАРІ селектори до шкали.
   Правило — радіус ≤ ¼ висоти елемента.
   Радіуси нових компонентів (.chip/.button/.input/.table-wrap/.staff-card)
   визначені у секції C і тут навмисно не дублюються.
   Радіус на table td/th з чернетки прибрано: у сплощеній таблиці
   комірка не має скруглень — це давало артефакт на межах. ---------- */

/* чипи / бейджі — найдрібніші елементи */
.loc-badge, .badge, .tag { border-radius: var(--r-xs); }

/* кнопки / поля вводу (старі класи й нативні теги) */
.btn, button, input, select, textarea,
.form-control { border-radius: var(--r-sm); }

/* картки / комірки-картки */
.card, .card.card,
.loc-pos { border-radius: var(--r-md); }

/* панелі / модалки / drawer — найбільші контейнери.
   Ризик №4: сайдбар приклеєний до краю вікна, скруглення давало видимі
   «зрізи» кутів на тлі --bg-base, тому він тут виняток. */
.panel, .panel.panel,
.modal, .modal-dialog, .modal-content,
.drawer, .drawer-panel { border-radius: var(--r-lg); }
.sidebar { border-radius: 0; }

/* ---------- D4. ХАРДКОД-КОЛЬОРИ → ТОКЕНИ ---------- */

/* .loc-badge.ok: #6BC6A2 на rgba(107,198,162,.14) → --success / --success-quiet */
.loc-badge.ok {
  color: var(--success);
  background: var(--success-quiet);
  border-color: var(--success);
}

/* .loc-badge.gap: #ED7D68 → --danger */
.loc-badge.gap {
  color: var(--danger);
  background: var(--danger-quiet);
  border-color: var(--danger);
}

/* .loc-pos.gap-desired: rgba(228,177,107,.10) → --warning-quiet */
.loc-pos.gap-desired { background: var(--warning-quiet); }

/* .loc-pos.gap-min: rgba(237,125,104,.12) → --danger-quiet (критичний дефіцит) */
.loc-pos.gap-min { background: var(--danger-quiet); }

/* .brand-mark: знак-заглушка, коли логотип закладу не завантажено.
   U19: градієнт акценту ПРИБРАНО — знак тепер затверджений бренд-асет Carbon
   із власними кольорами секторів (README ~/work/eradius-styles/brand).
   Перефарбовування забивало його градацію. Правила геометрії — у блоці U19. */

/* .status-dot: тінь прибрано (D1), акцент перенесено в бордер/фон */
.status-dot {
  background: var(--success);
  box-shadow: none;
  border: 2px solid var(--success-quiet);
}

/* ---------- D5. ТИПОГРАФІКА
   Georgia → var(--font-ui) всюди, ОКРІМ .brand strong та подібних
   декоративних місць лого — їх селектор тут навмисно не чіпаємо. ---------- */
body,
h1, h2, h3, h4, h5, h6,
table, th, td,
.panel, .card, .modal, .drawer,
.btn, button, input, select, textarea {
  font-family: var(--font-ui);
}

/* 700 виглядає «плакатно» на дрібних елементах — знижуємо до 600 всюди,
   де це не логотип. */
h1, h2, h3, h4, h5, h6,
th,
.btn, button,
strong:not(.brand strong) {
  font-weight: var(--fw-semibold);
}

/* ============================================================================
   >>> ERADIUS PHASE-0 OVERLAY — END <<<
   ============================================================================ */

/* ============================================================================
   >>> ERADIUS PHASE-1 AIR — BEGIN <<<
   Фаза 1: ритм і щільність. Палітру не чіпаємо — її закрила Фаза 0 вище.
   Вимикається видаленням усього блоку між маркерами BEGIN/END.

   ПРАВИЛО РИТМУ:
     між секціями        --space-5 (24px)
     між блоками в секції --space-3 (12px)
     між елементами       --space-2 (8px)
     Проміжні значення — лише зі шкали --space-* (4/8/12/16/24/32).

   ЧОМУ ЦЕЙ ШАР ВУЖЧИЙ ЗА ЗГЕНЕРОВАНИЙ:
   згенерований артефакт цілив у .card-header/.card-body/.panel-header/
   .panel-body/.section/.block — жодного з цих класів у проєкті НЕМАЄ
   (перевірено grep: 0 входжень). Його правило
     .card,.panel,.box{padding:0}
   зняло б padding з 24 реальних панелей і не повернуло б його на дочірніх
   вузлах, бо тих вузлів не існує — усі панелі схлопнулись би в нуль.
   Тому тут лише класи з підтвердженим вживанням:
     .panel (11) · .card/.box (13) · .competency-row/-list/-item (20)
     .section-heading/.panel-heading/.table-toolbar (15)
   ============================================================================ */

/* ---------- 1. РЯДКИ ДОВІДНИКІВ — на шкалу замість довільних 7/10/8px ----------
   Було у styles.css:55 — padding:7px 10px; gap:10px; border-radius:8px */
body .competency-row {
  gap: var(--space-2);
  min-height: var(--row-h-default);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
}

body .competency-row:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

/* Було gap:6px padding:10px 16px 16px — обидва повз шкалу */
body .competency-list {
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-4);
}

/* Було padding:12px 16px 4px */
body .competency-editor {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-1);
}

/* Назва тягнеться, метадані притиснуті праворуч і не стрибають */
body .competency-row > .muted {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

/* ---------- 2. ТАБЛИЦІ — висота рядка, числа моноширинні ---------- */
body table {
  font-variant-numeric: tabular-nums;
}

body table > thead > tr > th {
  min-height: var(--row-h-compact);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* min-height, НЕ height: у графіку змін і табелі комірки багаторядкові,
   фіксована висота обрізала б вміст. */
body table > tbody > tr > td {
  min-height: var(--row-h-default);
  vertical-align: middle;
}

/* ---------- 3. ТИПОГРАФІЧНА ІЄРАРХІЯ — три рівні на екран ----------
   L1 заголовок  --fs-title / 600   (700 заборонена)
   L2 тіло       --fs-body  / 400
   L3 підпис     --fs-caption / --text-muted */
body .section-heading h2,
body .panel-heading h2 {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.01em;
}

body .muted {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.4;
}

body .table-toolbar {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

body .table-toolbar > strong {
  font-size: var(--fs-body);
  font-weight: 600;
}

/* ---------- 4. ФОРМИ — єдина висота, видимий фокус ----------
   Без !important і без глобального *:focus-visible: перекривати чуже
   focus-кільце глобально означає зламати його там, де воно вже правильне. */
body input.search,
body select,
body .button.compact {
  min-height: var(--control-h);
}

body input:focus-visible,
body select:focus-visible,
body button:focus-visible,
body a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

/* Числа поза таблицями теж не стрибають при зміні значення */
body .loc-pos,
body .count,
body time {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   >>> ERADIUS PHASE-1 AIR — END <<<
   ============================================================================ */

/* Кільце покриття: попереджувальний стан, коли голови зійшлися, а локація
   не закриває мінімум — 100% більше не виглядає «все добре». */
#coverageRing.ring-warn .ring-value{color:var(--warning)}
#coverageRing.ring-warn{filter:saturate(.6)}

/* ==========================================================================
   >>> ERADIUS PHASE-2 CATALOGS — BEGIN <<<
   Фаза 2: розділ «Довідники» — усі списки відділення на одному екрані.
   Шар оборотний: вирізати блок між маркерами BEGIN/END — і розділ
   повертається до типового вигляду .view, нічого іншого не змінюється.
   Палітру й ритм не чіпаємо — їх закрили Фази 0 і 1; тут лише розкладка.
   ========================================================================== */

[data-view-panel="catalogs"] .cat-group{margin-bottom:var(--space-6)}
[data-view-panel="catalogs"] .cat-group-head{margin-bottom:var(--space-3)}
[data-view-panel="catalogs"] .cat-group-title{
  font-size:var(--fs-body);color:var(--text-primary);
  text-transform:uppercase;letter-spacing:.04em;margin:0}
[data-view-panel="catalogs"] .cat-group-hint{
  font-size:var(--fs-caption);color:var(--text-muted);margin:var(--space-1) 0 0}

/* Картки довідників лягають у сітку, що сама добирає кількість колонок:
   на вузькому екрані одна, на широкому — скільки влізе по 280px. */
[data-view-panel="catalogs"] .cat-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--space-3)}
[data-view-panel="catalogs"] .cat-card{
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-md);padding:var(--space-3)}
[data-view-panel="catalogs"] .cat-card-title{
  font-size:var(--fs-body);color:var(--text-primary);
  margin:0 0 var(--space-2);display:flex;align-items:baseline;gap:var(--space-2)}
[data-view-panel="catalogs"] .cat-count{font-size:var(--fs-caption);color:var(--text-muted)}

[data-view-panel="catalogs"] .cat-row{
  display:flex;align-items:center;gap:var(--space-2);
  min-height:var(--row-h-default);border-bottom:1px solid var(--border-subtle)}
[data-view-panel="catalogs"] .cat-row:last-child{border-bottom:0}
[data-view-panel="catalogs"] .cat-row--new{
  border-bottom:0;margin-top:var(--space-2);padding-top:var(--space-2);
  border-top:1px solid var(--border-strong)}

[data-view-panel="catalogs"] .cat-name{
  flex:1 1 auto;font-size:var(--fs-body);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-view-panel="catalogs"] .cat-meta{
  flex:0 1 auto;font-size:var(--fs-caption);color:var(--text-secondary);white-space:nowrap}

[data-view-panel="catalogs"] .cat-input{
  height:var(--control-h);min-width:0;padding:0 var(--space-2);
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-sm);color:var(--text-primary);
  font-size:var(--fs-body);font-family:inherit}
[data-view-panel="catalogs"] .cat-input:focus{outline:none;border-color:var(--accent)}
[data-view-panel="catalogs"] .cat-input--wide{flex:2 1 0}
[data-view-panel="catalogs"] .cat-input--mid{flex:1 1 0}
[data-view-panel="catalogs"] .cat-input--narrow{flex:0 0 64px}

/* Лічильник використань — те, на що дивляться перед видаленням.
   Нуль приглушений, ненульове число читається виразніше. */
[data-view-panel="catalogs"] .cat-uses{
  flex:0 0 28px;text-align:right;font-size:var(--fs-caption);color:var(--text-secondary)}
[data-view-panel="catalogs"] .cat-uses--zero{color:var(--text-muted)}

[data-view-panel="catalogs"] .cat-del{
  flex:0 0 auto;width:var(--control-h);height:var(--control-h);
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  color:var(--text-muted);font-size:var(--fs-body);cursor:pointer}
[data-view-panel="catalogs"] .cat-del:hover{color:var(--danger);border-color:var(--danger)}

[data-view-panel="catalogs"] .cat-add{
  flex:0 0 auto;height:var(--control-h);padding:0 var(--space-3);
  background:var(--bg-raised);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);color:var(--accent);
  font-size:var(--fs-caption);font-family:inherit;cursor:pointer}
[data-view-panel="catalogs"] .cat-add:hover{border-color:var(--accent)}

[data-view-panel="catalogs"] .cat-empty,
[data-view-panel="catalogs"] .cat-ro-note{
  font-size:var(--fs-caption);color:var(--text-muted);
  padding:var(--space-2) 0;margin:0}
[data-view-panel="catalogs"] .cat-ro-note a{color:var(--accent)}

/* Режим редагування вмикається маленькою іконкою в кутку заголовка —
   вимога власника: другорядне керування не займає окрему панель. */
[data-view-panel="catalogs"] #catalogsModeBtn[data-mode="edit"]{
  color:var(--accent);border-color:var(--border-strong);background:var(--bg-raised)}

/* ==========================================================================
   >>> ERADIUS PHASE-2 CATALOGS — END <<<
   ========================================================================== */

/* Стан тижня: чернетка проти підтвердженого графіка (T2).
   Колір несе крапка-носій, не заливка — щоб не додавати ще одну кричущу пляму. */
.week-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border:1px solid var(--border-subtle);border-radius:var(--r-xs);
  font-size:var(--fs-caption);color:var(--text-secondary);white-space:nowrap}
.week-status::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor}
.week-status.is-draft{color:var(--warning);background:var(--warning-quiet)}
.week-status.is-confirmed{color:var(--success);background:var(--success-quiet)}

/* Вхід: сервер fail-closed, тож діалог має пояснювати наслідок відмови. */
.login-dialog{min-width:340px;max-width:420px}
.login-dialog label{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-3);
  font-size:var(--fs-caption);color:var(--text-secondary)}
.login-dialog input{height:var(--control-h);padding:0 var(--space-3);
  background:var(--bg-sunken);color:var(--text-primary);
  border:1px solid var(--border-strong);border-radius:var(--r-sm)}
.login-dialog input:focus-visible{outline:none;border-color:var(--border-focus);
  box-shadow:0 0 0 3px var(--accent-ring)}
.login-error{min-height:1.2em;margin:var(--space-2) 0 0;color:var(--danger);font-size:var(--fs-caption)}
/* Статус синхронізації клікабельний, коли потрібен вхід. */
.sync-status.auth{color:var(--warning);background:var(--warning-quiet);cursor:pointer}

/* T3 — смуга живих показників «Огляду».
   Цифра велика, підпис під нею пояснює, з чого вона порахована; «—» означає
   «даних ще немає» і навмисно не схожий на нуль. */
.overview-live{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);margin:0 0 var(--space-4)}
.live-metric{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-md);cursor:pointer;min-width:0}
.live-metric:hover{border-color:var(--border-strong);background:var(--bg-hover)}
.live-metric i{font-style:normal;font-size:var(--fs-micro);letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-muted)}
.live-metric b{font-size:var(--fs-display);font-weight:600;line-height:1.2;
  color:var(--text-primary);font-variant-numeric:tabular-nums}
.live-metric span{font-size:var(--fs-caption);color:var(--text-secondary)}
.live-metric .live-warn{color:var(--warning)}
.live-metric .live-ok{color:var(--success)}
.live-dash{color:var(--text-muted);font-weight:400}
@media(max-width:900px){.overview-live{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* T4 — чипи фільтра за живим статусом.
   Стоять над груповим фільтром: спершу «хто доступний», потім «якої ролі».
   Кольорова крапка робить стан помітним без читання підпису. */
.people-status-filter{margin:0 0 var(--space-2)}
.people-status-filter button{display:inline-flex;align-items:center;gap:6px}
.people-status-filter button small{opacity:.7;font-variant-numeric:tabular-nums}
.people-status-filter button[data-status="available"]::before,
.people-status-filter button[data-status="away"]::before,
.people-status-filter button[data-status="inactive"]::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none}
.people-status-filter button[data-status="available"]::before{background:var(--success)}
.people-status-filter button[data-status="away"]::before{background:var(--warning)}
.people-status-filter button[data-status="inactive"]::before{background:var(--text-muted)}

/* Застереження стоїть у тій самій картці, що й число покриття:
   «100%» не має шансу бути прочитаним окремо від «5 локацій без мінімуму». */
.live-caveat{display:inline-flex;align-items:center;gap:5px;margin-top:4px;
  font-size:var(--fs-caption);text-decoration:none;color:var(--warning);font-weight:500}
.live-caveat::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;background:var(--warning);color:var(--bg-base);
  font-size:10px;font-weight:700;flex:none}
.overview-live{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1200px){.overview-live{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.overview-live{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Майстер імпорту: сухий прогін має бути видно ДО запису,
   тому підсумок і помилки — найпомітніше в діалозі. */
.import-dialog{min-width:min(680px,92vw);max-width:min(760px,94vw)}
.import-mapping{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-2);margin:var(--space-3) 0}
.import-mapping label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-caption)}
.import-mapping select{width:100%}
.import-preview{margin-top:var(--space-3);border-top:1px solid var(--border-subtle);
  padding-top:var(--space-3);max-height:320px;overflow:auto}
.import-tally{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-2)}
.import-tally b{font-size:var(--fs-title);font-variant-numeric:tabular-nums;display:block}
.import-tally span{font-size:var(--fs-caption);color:var(--text-secondary)}
.import-tally .t-create b{color:var(--success)}
.import-tally .t-update b{color:var(--brand-accent,var(--accent))}
.import-tally .t-error b{color:var(--danger,#e5484d)}
.import-tally .t-warn b{color:var(--warning)}
.import-issues{margin:var(--space-2) 0 0;padding:0;list-style:none;font-size:var(--fs-caption)}
.import-issues li{padding:3px 0;color:var(--text-secondary)}
.import-issues li b{color:var(--text-primary);font-weight:600}
.import-issues .i-err{color:var(--danger,#e5484d)}

/* Черга рішень — суцільна смуга «що чекає на керівника».
   Дашборд нижче каже, скільки зроблено; ця смуга каже, ДЕ потрібне рішення.
   Акцент береться з брендування закладу (--brand-accent), тому смуга
   перефарбовується разом з усім застосунком, без окремих правок стилю. */
.decision-queue{display:flex;flex-direction:column;gap:1px;margin:0 0 var(--space-4);
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-left:3px solid var(--brand-accent,var(--accent));border-radius:var(--r-md);overflow:hidden}
.dq-head{display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle)}
.dq-head b{font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:600}
.dq-count{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;
  padding:1px 9px;border-radius:999px;color:var(--brand-accent,var(--accent));
  background:var(--brand-accent-soft,rgba(47,125,209,.14))}
.dq-count.dq-zero{color:var(--text-muted);background:transparent}
.dq-empty{margin:0;padding:var(--space-3) var(--space-4);
  font-size:var(--fs-caption);color:var(--text-muted)}
.dq-item{display:flex;align-items:center;gap:var(--space-3);width:100%;
  padding:var(--space-3) var(--space-4);background:transparent;border:0;
  border-top:1px solid var(--border-subtle);text-align:left;cursor:pointer;font:inherit;
  color:var(--text-primary)}
.dq-item:first-of-type{border-top:0}
.dq-item:hover{background:var(--bg-hover)}
.dq-flag{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--text-muted)}
.dq-overdue .dq-flag{background:var(--danger,#d9534f)}
.dq-soon .dq-flag{background:var(--warning,#e0a33e)}
.dq-plan .dq-flag{background:var(--brand-accent,var(--accent))}
.dq-text{display:flex;flex-direction:column;min-width:0;flex:1}
.dq-text b{font-weight:600;font-size:var(--fs-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dq-text small{font-size:var(--fs-caption);color:var(--text-muted)}
.dq-act{flex:0 0 auto;font-size:var(--fs-caption);color:var(--brand-accent,var(--accent));opacity:.75}
.dq-item:hover .dq-act{opacity:1}
.dq-more{margin:0;padding:var(--space-2) var(--space-4);
  font-size:var(--fs-caption);color:var(--text-muted);border-top:1px solid var(--border-subtle)}
@media(max-width:700px){.dq-act{display:none}}

/* Логотип закладу в шапці бічної панелі: та сама коробка, що й власний знак ERadius,
   щоб брендування не ламало сітку. Показується лише коли заданий безпечний URL. */
.brand .brand-logo{width:26px;height:26px;object-fit:contain;border-radius:6px;flex:0 0 auto}
.brand .brand-logo[hidden]{display:none}
/* Атрибут hidden не діє на SVG — ховаємо власний знак явно, коли є логотип закладу. */
.brand .brand-mark[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════
   U16: Операційна матриця — розкладка сітки та правий інспектор
   ═══════════════════════════════════════════════════════════════ */
.schedule-filter-group{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.schedule-filter-select select{
  min-width:140px;
  height:30px;
  padding:2px 8px;
  font-size:11.5px;
}
.schedule-filter-search{
  min-width:180px;
  height:30px;
  padding:4px 10px;
  font-size:11.5px;
}
.schedule-filter-reset{
  width:28px;
  height:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--muted);
}
.schedule-filter-reset:hover{
  color:var(--danger, #c4324a);
}
/* Пошук у матриці: клітинки без збігу пригашуються, а не зникають */
.shift.filter-dim{
  opacity:.28;
  filter:grayscale(.4);
}
.schedule-matrix-container{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:16px;
  align-items:start;
}
.schedule-inspector{
  border-left:1px solid var(--line);
  padding-left:16px;
  min-height:360px;
}
.inspector-card{
  background:var(--panel-raised, var(--bg-soft));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:14px;
}
.inspector-empty{
  text-align:center;
  padding:24px 8px;
}
.inspector-empty .inspector-icon{
  display:inline-block;
  font-size:24px;
  margin-bottom:8px;
  opacity:.6;
}
.inspector-empty h4{
  margin:0 0 6px;
  font-size:13px;
  font-weight:600;
}
.inspector-empty p{
  margin:0;
  font-size:11.5px;
  line-height:1.45;
}
.inspector-content .inspector-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.inspector-shift-title{
  font-size:14px;
  font-weight:620;
  margin:0 0 2px;
}
.inspector-shift-meta{
  font-size:11px;
  color:var(--muted);
}
.inspector-section{
  margin-top:12px;
}
.inspector-section h5{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin:0 0 8px;
}
.inspector-crew-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.inspector-crew-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 8px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  font-size:12px;
}
.inspector-crew-item-actions{
  display:flex;
  align-items:center;
  gap:4px;
}
.inspector-crew-item-actions .danger-action{
  color:var(--red,#e03131);
}
.schedule-summary-row{
  border-top:2px solid var(--line);
  background:var(--panel);
}
.schedule-summary-row .shift-label{
  color:var(--ink);
  font-weight:600;
}
.summary-stat-cell{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  padding:8px 6px;
  font-size:11px;
}
.summary-stat-cell:hover{
  background:var(--bg-soft);
}
.summary-stat-cell.is-warning{
  background:rgba(184,110,0,.06);
}
.summary-stat-main{
  font-weight:600;
  color:var(--ink);
}
.summary-stat-main.has-gaps{
  color:var(--red,#e03131);
}
.summary-stat-sub{
  font-size:10px;
  color:var(--text-muted);
}
.summary-stat-cell .summary-badge{
  align-self:flex-start;
  font-size:9.5px;
  padding:1px 5px;
  border-radius:var(--r-xs);
  font-weight:600;
}
.summary-stat-cell .summary-badge.is-ok{
  background:rgba(43,138,62,.12);
  color:var(--success);
}
.summary-stat-cell .summary-badge.is-alert{
  background:rgba(224,49,49,.12);
  color:var(--red,#e03131);
}
.summary-metrics-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:12px;
}
.summary-metric-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.summary-metric-num{
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}
.summary-metric-num.is-danger{
  color:var(--red,#e03131);
}
.summary-metric-num.is-ok{
  color:var(--success);
}
.summary-metric-lbl{
  font-size:10.5px;
  color:var(--text-muted);
}
.inspector-actions{
  margin-top:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
/* U16 Крок 7: рядки апаратів в операційній матриці */
.equipment-matrix-row{
  border-top:1px dashed var(--line);
}
.equipment-matrix-cell{
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:6px 8px;
  font-size:11px;
}
.equipment-matrix-cell .eq-status.is-ok{
  color:var(--muted, #6b7280);
}
.equipment-matrix-cell .eq-status.is-attention{
  font-weight:600;
}
.equipment-matrix-cell .eq-note{
  font-size:10px;
  opacity:.75;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* U16 Крок 9: картка апарата в правому інспекторі. Кольорів не вводимо —
   лише геометрія і наявні токени; перекриття слотів позначене лінією зліва. */
.eq-slot-line{
  font-size:11px;
  line-height:1.4;
}
.inspector-crew-item.eq-slot-overlap{
  border-left:2px solid var(--line);
  padding-left:6px;
}
/* U16 Крок 10: підпис області інспектора під фільтром підрозділу.
   Лише типографіка й наявні токени — ані кольорів, ані радіусів. */
.inspector-scope-note{
  font-size:11px;
  line-height:1.4;
  margin-top:4px;
  border-left:2px solid var(--line);
  padding-left:6px;
}
.summary-row{
  border-top:2px solid var(--line);
  background:var(--panel);
}
.summary-row .shift-label{
  font-weight:600;
}
.summary-day-cell{
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:6px 8px;
  font-size:11px;
}
.summary-stat-count{
  font-weight:600;
}
.summary-stat-status.is-ok{
  color:var(--success);
  font-size:10px;
}
.summary-stat-status.has-deficit{
  color:var(--red,#e03131);
  font-size:10px;
  font-weight:500;
}
.shift.is-selected{
  outline:2px solid var(--blue);
  outline-offset:-2px;
}
@media(max-width:1024px){
  .schedule-matrix-container{
    grid-template-columns:1fr;
  }
  .schedule-inspector{
    border-left:none;
    border-top:1px solid var(--line);
    padding-left:0;
    padding-top:16px;
  }
}

/* ── U17: плоска навігація з персональними групами ──────────────────────────
   Дефолт — плоский список без акордеонів. Група — розгорнутий блок із
   розділювачем і заголовком, без кліку на розгортання.
   Carbon: жодних border-radius, лише наявні токени. */
.nav-flat{display:grid;gap:2px}
.nav-flat[hidden]{display:none}
.nav-section{display:grid;gap:2px;margin:10px 0 4px;padding-top:10px;border-top:1px solid var(--line)}
.nav-section:first-child{margin-top:0;padding-top:0;border-top:0}
.nav-section-title{padding:4px 12px;color:var(--muted);font-size:11px;font-weight:720;letter-spacing:.04em;text-transform:uppercase}
.nav-section-items{display:grid;gap:2px}
.sidebar.is-collapsed .nav-section-title{display:none}
.sidebar.is-collapsed .nav-section{margin:6px 0}
/* Опційне згортання групи (U17 підкрок 2): у згорнутому стані ховаються
   ЛИШЕ пункти, заголовок лишається — інакше група зникає без сліду. */
.nav-section.is-folded .nav-section-items{display:none}

/* ═══════════════════════════════════════════════════════════════
   U17 підкрок 2 [ОБОЛОНКА]: редактор персональних груп навігації.
   Іконка в кутку навігації + діалог зі списком блоків.
   Carbon: жодних border-radius і нових кольорів — лише наявні токени. */
.nav-editor-open{display:block;margin:6px 8px 2px auto;color:var(--muted)}
.nav-editor-open[hidden]{display:none}
.sidebar.is-collapsed .nav-editor-open{margin:6px auto 2px}
.nav-editor-create{display:flex;gap:8px;align-items:flex-end;margin:8px 0 10px}
.nav-editor-title-label{display:grid;gap:4px;flex:1}
.nav-editor-rows{display:grid;gap:2px;max-height:52vh;overflow:auto;border-top:1px solid var(--line)}
.nav-editor-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-bottom:1px solid var(--line)}
.nav-editor-row.is-child{padding-left:26px}
.nav-editor-row.is-group{background:var(--panel)}
.nav-editor-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-editor-group-title{flex:1;min-width:0;font-weight:700}
.nav-editor-actions{display:flex;gap:2px;align-items:center;flex:none}
.nav-editor-actions .icon-button{width:26px;height:26px;line-height:1}
.nav-editor-move{max-width:150px}

/* ═══════════════════════════════════════════════════════════════
   U19 [ОБОЛОНКА]: затверджений знак + чисте згортання сайдбара
   Рішення власника 17.09 (оглядав наживо). Лише наявні токени,
   жодного border-radius — Carbon.
   ═══════════════════════════════════════════════════════════════ */

/* (а) ЗНАК: варіант обирає ТЕМА, не скрипт. Свої кольори секторів —
   бренд-асет не перефарбовується акцентом.
   УВАГА: display тут НЕ задаємо. Селектор .sidebar .brand .brand-mark має
   специфічність (0,3,0) і забивав би .brand-mark-dark{display:none} (0,1,0) —
   у живому Chromium обидва варіанти знака були видимі одночасно. */
.sidebar .brand .brand-mark,
.brand-mark{background:none;box-shadow:none;color:inherit;
  width:28px;height:28px;flex:0 0 auto;overflow:visible}
.sidebar .brand .brand-mark-light{display:block}
.sidebar .brand .brand-mark-dark{display:none}
html[data-theme="dark"] .sidebar .brand .brand-mark-light{display:none}
html[data-theme="dark"] .sidebar .brand .brand-mark-dark{display:block}
.brand-mark-dark{display:none}
html[data-theme="dark"] .brand-mark-light{display:none}
html[data-theme="dark"] .brand-mark-dark{display:block}
/* Логотип закладу заміщує обидва варіанти власного знака. */
.sidebar .brand .brand-mark[hidden],
.brand .brand-mark[hidden],
html[data-theme="dark"] .sidebar .brand .brand-mark[hidden]{display:none}

/* (б) ЗГОРТАННЯ без смикання й без нашарування.
   Причини дефекту, знайдені читанням і живим виміром, а не вгадані:
   1) кнопку позиціювали absolute через селектори a.brand / .sidebar.collapsed,
      яких розмітка не має (div.brand, is-collapsed) — тому вона накладалась
      на .brand-text. Абсолютна кнопка В ПРИНЦИПІ перетинає прямокутник
      блока, у якому лежить, тому її винесено в ПОТІК: обгортка
      .sidebar-head — flex-рядок «знак+назва | кнопка». Перетинів нуль
      у всіх чотирьох станах (CDP-вимір getBoundingClientRect);
   2) підписи ховались display:none одночасно з transition:width —
      reflow стрибком, звідси «дріжання». Тепер max-width + opacity. */
.sidebar{will-change:width}
.sidebar-head{display:flex;align-items:flex-start;gap:8px;min-width:0}
.sidebar-head .brand{flex:1 1 auto;min-width:0}
.sidebar.is-collapsed .sidebar-head{flex-direction:column;align-items:center;gap:6px}
.sidebar.is-collapsed .brand{justify-content:center}

/* Підписи: анімована ширина замість зникнення. Порядок важливий —
   перебиваємо display:none зі styles.css:553. */
.sidebar .brand-text,
.sidebar .nav-group summary span:last-of-type{
  display:flex;max-width:180px;overflow:hidden;
  transition:max-width .28s cubic-bezier(.22,.61,.36,1),opacity .18s ease .04s}
.sidebar.is-collapsed .brand-text,
.sidebar.is-collapsed .nav-group summary span:last-of-type{
  display:flex;max-width:0;opacity:0;transition-delay:0s}
.sidebar .sidebar-footer div{
  max-width:180px;overflow:hidden;
  transition:max-width .28s cubic-bezier(.22,.61,.36,1),opacity .18s ease .04s}
.sidebar.is-collapsed .sidebar-footer div{
  display:block;max-width:0;opacity:0;transition-delay:0s}

@media(prefers-reduced-motion:reduce){
  .sidebar,.sidebar .brand-text,.sidebar .sidebar-footer div,
  .sidebar .nav-group summary span:last-of-type{transition:none;will-change:auto}
}

/* (в) ОДИН БРЕНДОВИЙ РЯДОК. «ERadius» жило в трьох місцях зони:
   brand-name, перемикач установи, підпис футера. Лишаємо рядок зверху;
   решту ХОВАЄМО (розмітка й id лишаються — оборотність).
   Прапорець localStorage eradius.sidebar.legacyHeader=1 повертає старий вигляд. */
.sidebar .unit-switch{display:none}
[data-sidebar-legacy-header="1"] .sidebar .unit-switch{display:flex}

/* ═══════════════════════════════════════════════════════════════
   U18 [ОБОЛОНКА]: широкий екран — контент на всю ширину.
   Рішення власника 17.09 зі скріншотом: на 2560px «Персонал»
   тулився вліво, колонка «Картка» відірвана, права половина —
   вакуум. Причина не в сітках (вони вже на fr і minmax), а в
   двох пікселевих стелях основного контейнера:
     styles.css:19  .main-content{... max-width:1540px}
     styles.css:440 .main-content{... max-width:1600px}
   Ці правила НЕ видалені (оборотність) — вони перекриті тут,
   бо refine.css вантажиться пізніше за styles.css.
   Це ЛИШЕ ширина: склад блоків і сітки не змінені.
   Прапорець localStorage eradius.layout.legacyWidth=1 повертає
   стару вузьку розкладку. ═══════════════════════════════════ */
.main-content{max-width:var(--content-max)}
[data-layout-legacy-width="1"] .main-content{max-width:1600px}

/* Вміст, що на вузькому екрані тримався на min-width, на широкому
   мусить тягнутись, а не лишати порожнечу праворуч. Жодних нових
   кольорів і жодного border-radius — тільки геометрія. */
.table-wrap,.table-panel,.calendar{width:100%}
.calendar-head,.shift-row{min-width:0}

/* ═══════════════════════════════════════════════════════════════
   U21 [ОБОЛОНКА]: кольорові акценти навігації за модулями.
   Рішення власника 20.09 (голосом): пункти навігації, що ведуть у
   ЯВНО різні модулі, отримують власний акцент — легше орієнтуватись
   з погляду, який розділ відкрито. Не семантичні кольори (ok/warn/
   danger лишаються для статусів даних) — окрема палітра з 6 акцентів,
   кожен свій відтінок для світлої й темної теми.
   Огляд відділення, Компетенції, Установа, Друк, Процеси, Аудит,
   Довідники, Інтеграції — БЕЗ акценту, лишаються кольором теми
   (var(--blue)), як і раніше.
   Прив'язка — data-nav-accent на конкретному <a class="nav-item">,
   НЕ на .nav-group: усередині «Планування» три різні акценти
   (Графік+Чергування спільний, Апарати окремий, Задачі окремий). ═══ */
:root{
  --accent-team:#8c6bd8;      --accent-team-rgb:140,107,216;
  --accent-planning:#2b8a3e;  --accent-planning-rgb:43,138,62;
  --accent-equipment:#c2760c; --accent-equipment-rgb:194,118,12;
  --accent-tasks:#d1476b;     --accent-tasks-rgb:209,71,107;
  --accent-resources:#0f8b8d; --accent-resources-rgb:15,139,141;
  --accent-timesheet:#5b6cd6; --accent-timesheet-rgb:91,108,214;
}
html[data-theme="dark"]{
  --accent-team:#b8a3f0;      --accent-team-rgb:184,163,240;
  --accent-planning:#5ed07a;  --accent-planning-rgb:94,208,122;
  --accent-equipment:#f0ad4e; --accent-equipment-rgb:240,173,78;
  --accent-tasks:#f28aa3;     --accent-tasks-rgb:242,138,163;
  --accent-resources:#4fd0d2; --accent-resources-rgb:79,208,210;
  --accent-timesheet:#8f9bf0; --accent-timesheet-rgb:143,155,240;
}
/* Задача C [КАЛЕНДАР]: тони типів відсутності на календарі (смуги, фільтр).
   Нових кольорів не вводимо — псевдоніми наявних токенів; визначені на
   :root, тож тема перемикає їх разом із джерелом. Лікарняний — --danger
   (як у календарних застосунках), решта — з палітри U21, бо семантичні
   ok/warn означають стан даних, а не категорію. Вибір тонів — потребує
   валідації власником (звіт задачі C). c0–c3 — власні типи з довідника. */
:root{
  --absence-vacation:var(--accent-resources);
  --absence-sick:var(--danger);
  --absence-trip:var(--accent-timesheet);
  --absence-other:var(--accent-equipment);
  --absence-c0:var(--accent-team);
  --absence-c1:var(--accent-tasks);
  --absence-c2:var(--accent-planning);
  --absence-c3:var(--line-strong);
}
.nav-item[data-nav-accent] .ic{color:var(--nav-accent-color,inherit)}
.nav-item[data-nav-accent="team"]{--nav-accent-color:var(--accent-team);--nav-accent-rgb:var(--accent-team-rgb)}
.nav-item[data-nav-accent="planning"]{--nav-accent-color:var(--accent-planning);--nav-accent-rgb:var(--accent-planning-rgb)}
.nav-item[data-nav-accent="equipment"]{--nav-accent-color:var(--accent-equipment);--nav-accent-rgb:var(--accent-equipment-rgb)}
.nav-item[data-nav-accent="tasks"]{--nav-accent-color:var(--accent-tasks);--nav-accent-rgb:var(--accent-tasks-rgb)}
.nav-item[data-nav-accent="resources"]{--nav-accent-color:var(--accent-resources);--nav-accent-rgb:var(--accent-resources-rgb)}
.nav-item[data-nav-accent="timesheet"]{--nav-accent-color:var(--accent-timesheet);--nav-accent-rgb:var(--accent-timesheet-rgb)}
/* U21 підкрок 2 (власник 20.09, той самий тік): «давай, щоб вся панелька
   була такого кольору, а коли активна — підсвічувалась сильніше; зараз
   лише коли натискаєш» — базовий стан мав ЛИШЕ колір іконки, фон
   з'являвся тільки на hover/active. Тепер слабкий тон акценту завжди
   на всій «пігулці» пункту (щоб групи різних систем читались навіть
   у спокої), hover — трохи сильніше, active — найсильніше + рамка зліва. */
.nav-item[data-nav-accent]{background:rgba(var(--nav-accent-rgb,20,86,217),.05)}
.nav-item[data-nav-accent]:hover{
  background:rgba(var(--nav-accent-rgb,20,86,217),.12);
}
.nav-item[data-nav-accent].active{
  background:rgba(var(--nav-accent-rgb,20,86,217),.18);
  color:var(--ink);
  box-shadow:inset 3px 0 0 var(--nav-accent-color,var(--blue));
}
.nav-item[data-nav-accent].active .ic{color:var(--nav-accent-color,var(--blue))}

/* ═══════════════════════════════════════════════════════════════
   U20 [ОБОЛОНКА]: ручка згортання сайдбара — край, не кнопка в шапці.
   Рішення власника 20.09 (голосом): стара .sidebar-toggle жила у flex-потоці
   sidebar-head і на згорнутому стані переходила в колонку — підпирала знак
   бренду знизу ("іконка згорнути-розгорнути підпирає емблемку"). Нова
   .sidebar-edge-handle — absolute на правому краю сайдбара, over the edge.
   U20 підкрок 2 (власник 20.09, той самий тік): перша версія мала рамку +
   box-shadow + окремий фон .panel-raised — виглядала як стороння кнопка,
   "наліплена" на сайдбар, не частина його дизайну ("подешевому виглядає").
   Нова версія: жодної рамки/тіні в спокої, самий шеврон ледь видимий
   (opacity), м'яка підсвітка фону лише на hover — інтегровано в rail,
   не окремий UI-елемент. ═══════════════════════════════════════════ */
.sidebar-edge-handle{
  position:absolute;top:28px;right:-11px;z-index:11;
  width:22px;height:40px;padding:0;border:0;background:transparent;
  color:var(--muted);opacity:.55;
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;cursor:pointer;
  transition:opacity .18s ease,background .15s ease,color .15s ease;
}
.sidebar-edge-handle .ic{flex:0 0 auto;width:14px;height:14px}
.sidebar-edge-handle:hover,.sidebar-edge-handle:focus-visible{
  opacity:1;background:var(--panel-raised);color:var(--ink);
}
.sidebar-edge-handle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sidebar.is-collapsed .sidebar-edge-handle .ic{transform:rotate(180deg)}
.sidebar-edge-handle .ic{transition:transform .34s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){
  .sidebar-edge-handle,.sidebar-edge-handle .ic{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   U20 підкрок 3 [ОБОЛОНКА]: футер сайдбара — лаконічніше.
   Рішення власника 20.09: "оператор, працівник, керівник відділення —
   давай якось більш лаконічніше і шестеринку теж лаконічніше".
   ⚙ (текстовий гліф Unicode) замінено на SVG #ic-settings того ж стилю,
   що решта іконок навігації (див. index.html) — окрема правка розмітки.
   Тут лише щільність: менший розмір імені/ролі, менший gap, підпис ролі
   приглушений сильніше — щоб блок читався одним поглядом, а не двома
   окремими рядками тексту різної ваги. ═══════════════════════════════ */
.sidebar-footer{gap:8px;padding-top:12px}
.sidebar-footer strong{font-size:11.5px;font-weight:600;line-height:1.3}
.sidebar-footer span{font-size:10px;opacity:.75;margin-top:0}
.sidebar-footer .icon-button{opacity:.65}
.sidebar-footer .icon-button:hover{opacity:1}
/* U16 Крок 8: рядок зміни в картці «Підсумок дня». Раніше розмір жив в
   inline style="font-size:11px" — під CSP атрибут style дозволений, але
   літерал повз токени суперечить Carbon-шару. Кольору тут немає взагалі:
   відтінок дає наявний клас .muted. Без border-radius. */
.summary-shift-line{font-size:11px;line-height:1.4}

/* ═══════════════════════════════════════════════════════════════
   B-sidebar-toggle [ОБОЛОНКА]: доводка ручки згортання й згорнутої рейки.
   Власник 28.09: «стала краща, проте все ще сирувато». Дефекти знайдено
   візуальним аудитом живого UI (скріншоти + getBoundingClientRect), не вгадано;
   перелік D1–D8 — у tests/core/b-sidebar-toggle.test.mjs, поведінку доводить
   server/tests/test_cdp_b_sidebar_toggle.py. Лише var(--…), радіус 0, без тіні.
   Орієнтир — Carbon UI Shell (SideNav rail): чітка ручка, підказка з назвою
   пункту в згорнутому стані, повага до prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* D1: ініціали «ОК» висіли в лівому верхньому куті кола. Причина —
   .brand span,.sidebar-footer span{display:block;color:var(--muted)} зі
   styles.css (0,1,1) перебивав .avatar{display:grid} (0,1,0); refine.css ще
   й глушив його opacity:.75. Тепер (0,3,0) і нейтральні токени шару замість
   літерала #4a6285, на якому --muted давав ледь читаний текст у темній темі. */
.sidebar .sidebar-footer .avatar{
  display:grid;place-items:center;margin:0;padding:0;line-height:1;
  opacity:1;background:var(--panel-raised);color:var(--ink);
  font-size:var(--fs-micro);font-weight:var(--fw-semibold);box-shadow:none}

/* D3/D4: ручка. Було: 22×40, opacity .55 на --muted (≈2.6:1 — нижче 3:1 для
   нетекстового елемента), прозорий фон — лінія межі рейки проходила крізь
   шеврон, центр на 48px при осі знака 40px. Стало: «язичок» рейки — той самий
   фон --rail і та сама лінія --line, що й край панелі (лівої межі немає: язичок
   продовжує рейку, а не лежить на ній окремою кнопкою — рішення U20-2 «без
   рамки-кнопки й тіні» збережено). Вісь — центр знака (24 + 32/2 = 40).
   Зону кліку ::before заводить на 12px у рейку: ціль ≥ 32×40. */
.sidebar-edge-handle{
  top:24px;right:-21px;width:20px;height:32px;
  opacity:1;background:var(--rail);color:var(--muted);
  border:1px solid var(--line);border-left:0;box-shadow:none;overflow:visible}
.sidebar-edge-handle::before{content:"";position:absolute;top:-4px;bottom:-4px;left:-12px;right:-4px}
.sidebar-edge-handle:hover{background:var(--panel-raised);color:var(--ink);border-color:var(--line-strong)}
.sidebar-edge-handle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;color:var(--ink)}
.sidebar-edge-handle .ic{width:16px;height:16px}

/* D6: шестерня (Журнал аудиту / Довідники / Інтеграції — лише в її меню з
   28.09) у згорнутому стані була display:none — розділи ставали недосяжні.
   Згорнутий футер — стовпчик: шестерня над аватаром, обидва по осі рейки.
   Підпис «Оператор» і далі згасає max-width/opacity (U19), а висоту
   прибирає max-height, щоб не лишав порожнечу в стовпчику. Меню — праворуч
   від рейки, не поверх неї. pointer-events повертаємо явно: правило згасання
   підписів (styles.css) вимикає їх на КОЖНОМУ div футера, і клік по шестерні
   падав крізь неї на сам футер (виміряно elementFromPoint). */
.sidebar.is-collapsed .sidebar-footer{flex-direction:column;align-items:center;gap:0;padding-left:0;padding-right:0}
.sidebar.is-collapsed .sidebar-footer>div:not(.more-wrap){max-height:0;margin:0}
.sidebar.is-collapsed .sidebar-footer .more-wrap{order:-1;max-width:none;opacity:1;overflow:visible;pointer-events:auto;margin:0 0 var(--space-2)}
.sidebar.is-collapsed .sidebar-footer .more-wrap .icon-button{display:inline-flex;margin:0}
.sidebar.is-collapsed .sidebar-footer .more-menu{max-width:none;opacity:1;pointer-events:auto;left:calc(100% + var(--space-2));bottom:0}
.sidebar.is-collapsed .sidebar-footer .more-menu button{display:block}
/* правило згасання (0,3,1) ставить display:block на кожен div футера — без
   цього закрите меню ([hidden]) лишалося на екрані після кліку поза ним */
.sidebar.is-collapsed .sidebar-footer .more-menu[hidden]{display:none}

/* D5: підказка з назвою пункту в згорнутій рейці. Carbon-tooltip — інверсний
   шар: тло кольору тексту теми, текст кольору панелі; у темній темі
   інвертується сам. Плаває над контентом, тому position:fixed (ставить JS). */
.sidebar-tip{
  position:fixed;z-index:1000;transform:translateY(-50%);pointer-events:none;
  padding:var(--space-1) var(--space-2);background:var(--ink);color:var(--panel);
  font-size:var(--fs-caption);line-height:16px;letter-spacing:.32px;white-space:nowrap;
  transition:opacity .12s ease}
.sidebar-tip[hidden]{display:none}

/* D8: вузьке вікно — рейку згортає JS (matchMedia у app.js); розгорнути її тут
   нікуди, тож ручку ховаємо. */
@media(max-width:720px){.sidebar-edge-handle{display:none}}

@media(prefers-reduced-motion:reduce){
  .sidebar .nav-item,.sidebar .nav-group summary::after,.sidebar-tip,
  .sidebar .sidebar-footer .more-wrap{transition:none}
}
/* Внесення з HRM */
.hr-import-dialog{width:min(860px,94vw)}
.hr-import-dialog #hrImportBody{max-height:62vh;overflow:auto}
.hr-import-table{border-collapse:collapse;width:100%;margin:4px 0 12px}
.hr-import-table th,.hr-import-table td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;font-weight:400}
.hr-import-num{text-align:right;font-variant-numeric:tabular-nums;width:9em}
.hr-import-needs{list-style:none;margin:0;padding:0}
.hr-import-need{display:grid;grid-template-columns:1fr minmax(240px,320px);gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.hr-import-select{width:100%}
.assets1c-controls{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,220px) auto;gap:8px;align-items:center;margin:10px 0}
.assets1c-group{border-bottom:1px solid var(--line);margin:8px 0}
.assets1c-group summary{cursor:pointer;padding:8px 0;font-weight:600}
.assets1c-group .hr-import-needs{padding-bottom:8px}
@media(max-width:680px){.assets1c-controls{grid-template-columns:1fr}.hr-import-need{grid-template-columns:1fr}}
.hr-import-warnings{margin:0 0 12px;padding-left:18px;color:var(--muted)}
.hr-import-error{color:var(--danger)}
/* H1 · Графіки з H24: діалог успадковує .hr-import-*; тут лише власні частини (токени, без кольорів-літералів) */
.person-sublevels{margin-top:var(--space-2, 8px);font-size:var(--font-xs, 11px);color:var(--text-secondary, var(--muted));display:flex;flex-wrap:wrap;gap:var(--space-2, 6px);align-items:center}
.person-sublevels span{background:var(--bg-soft);color:var(--ink);padding:2px 6px}
.h24-import-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.h24-import-bulk{flex:none}
.h24-import-more{margin:10px 0}
.h24-import-more summary{cursor:pointer;color:var(--muted)}
/* H1 · Графік з H24 під матрицею змін — лише токени, без кольорів-літералів і радіусів */
.h24-schedule-panel .panel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.h24-sched-meta{font-size:12px}
.h24-schedule-table{table-layout:fixed;width:100%}
.h24-schedule-table th.h24-sched-person,.h24-schedule-table td.h24-sched-person{width:22%;text-align:left}
.h24-sched-role{display:block;font-size:11px}
.h24-sched-num{width:6em;text-align:right;font-variant-numeric:tabular-nums}
.h24-sched-cell{vertical-align:top}
.h24-sched-chip{display:block;margin:0 0 2px;padding:2px 6px;border-left:3px solid var(--accent);background:var(--panel-raised);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.h24-sched-chip{overflow:hidden;text-overflow:ellipsis}
.h24-sched-chip.is-night{border-left-color:var(--muted)}
.h24-sched-total td{border-top:1px solid var(--line);font-weight:600}
.h24-sched-empty{padding:14px 8px}

/* Стартовий огляд: простір займає головну площу, «Зараз» — вузька колонка. */
.start-overview{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,1fr);gap:var(--space-4);margin-bottom:var(--space-4)}
.overview-department,.overview-now{border:1px solid var(--line);background:var(--panel)}
.overview-department-head{display:flex;align-items:baseline;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--line)}
.overview-department-head h2,.overview-now h2{margin:0}
.overview-department-head p{margin:0}
.overview-room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line)}
.overview-room{min-height:132px;padding:var(--space-3);background:var(--panel)}
.overview-room h3,.overview-now h3,.overview-unplaced h3{margin:0 0 var(--space-2);font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.overview-room-equipment,.overview-room-people,.overview-unplaced{display:flex;flex-wrap:wrap;gap:var(--space-1);align-content:flex-start}
.overview-room-equipment{min-height:30px;margin-bottom:var(--space-2)}
.overview-unplaced{padding:var(--space-3);border-top:1px solid var(--line)}
.overview-unplaced h3{width:100%}
.overview-object{border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;padding:2px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.overview-object:hover,.overview-object:focus-visible{color:var(--accent);text-decoration-color:currentColor;outline:none}
.overview-equipment{font-weight:var(--fw-medium)}
.overview-now{padding:var(--space-4)}
.overview-now .panel-heading{margin-bottom:var(--space-2)}
.overview-now section{padding:var(--space-3) 0;border-top:1px solid var(--line)}
.overview-now section:first-child{border-top:0}
.overview-now .overview-object{display:block;width:100%}
.overview-now p{margin:0;color:var(--muted);font-size:var(--fs-caption)}
.overview-now ul{margin:0;padding-left:var(--space-4);font-size:var(--fs-caption)}
.overview-duty-link{margin-top:var(--space-2)}
.overview-detail{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-2) var(--space-3);margin:var(--space-4) 0}
.overview-detail dt{color:var(--muted)}
.overview-detail dd{margin:0}
.overview-legacy{display:none}
@media(max-width:900px){.start-overview{grid-template-columns:1fr}.overview-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.overview-room-grid{grid-template-columns:1fr}}

/* Рішення власника 11.10: мапа — це старт «Огляд відділення»; окремий пункт «Мапа ділянки» в навігації не потрібен (маршрут #site живий). */
.nav-item[data-view="site"]{display:none}

/* 11.10 «мапа на весь блок»: на старті «Огляд відділення» мапа займає весь блок вмісту;
   кнопки й список поверхів — поверх мапи; рядок джерел (OSM/FABDEM) лишається видимим. */
body[data-route="overview"] [data-view-panel="site"]>.section-heading{display:none}
body[data-route="overview"] .map3d-site-section{position:relative}
body[data-route="overview"] .map3d-site-section .map3d-layout{display:block;border:0;background:none}
body[data-route="overview"] .map3d-site-section .map3d-site .map3d-stage{height:100vh;min-height:480px}
/* 11.10 (друга частина): на старті кнопки мапи й панель поверхів сховані — мапа лише тло, з боків напівпрозорі панелі стану.
   Рядок джерел (OSM/FABDEM) лишається — внизу між панелями. На #site усе як було. */
body[data-route="overview"] .map3d-site-section .map3d-toolbar{position:absolute;bottom:var(--space-2);top:auto;left:calc(var(--sp-w) + var(--space-5));right:calc(var(--sp-w) + var(--space-5));z-index:2;border:0;padding:0;background:none;text-align:center}
body[data-route="overview"] .map3d-site-section .map3d-toolbar>button,
body[data-route="overview"] .map3d-site-section .map3d-toolbar .map3d-store-badge{display:none}
body[data-route="overview"] .map3d-site-section .map3d-toolbar .map3d-note{display:block;font-size:11px;color:var(--text-muted)}
body[data-route="overview"] .map3d-site-section .map3d-site .map3d-aside{display:none}
/* 12.10 власник: 2D-план поверху на старті — під правою панеллю; кути переносу там не потрібні */
body[data-route="overview"] .map3d-site-section .map3d-dock:not(.is-slotted){display:none}
body[data-route="overview"] .map3d-site-section .map3d-dock .map3d-corners [data-corner]{display:none}
body[data-route="overview"] .map3d-site-section .map3d-place{pointer-events:none}
body[data-route="overview"] .map3d-site-section .map3d-site-labels.is-dock .map3d-place{pointer-events:auto}
/* 11.10 «повністю»: на старті мапа займає весь вміст без відступів; заголовок сторінки прибрано,
   кнопки шапки (синхронізація, налаштування, тема, «Нова задача») — плаваючі поверх мапи справа вгорі. */
body[data-route="overview"] .main-content{padding:0;position:relative}
body[data-route="overview"] .topbar{position:absolute;top:38px;right:var(--space-3);z-index:4;padding:0;margin:0}
body[data-route="overview"] .topbar>div:first-child{display:none}
body[data-route="overview"] [data-view-panel="site"]{margin:0}

/* ═══════════════════════════════════════════════════════════════
   Старт [ОБОЛОНКА]: напівпрозорі панелі стану з боків мапи (рішення власника 11.10)
   Ліва — «Люди», права — «Відділення». Прозорість і розмиття — через токени теми, тож у світлій і темній читається однаково.
   Кожен рядок — один клікабельний обʼєкт; сигнал «можна натиснути» один: стрілка › і підсвітка при наведенні.
   ═══════════════════════════════════════════════════════════════ */
:root{--sp-w:clamp(260px,21vw,300px);--sp-top:92px;--sp-signal:color-mix(in srgb,var(--warning) 78%,var(--text-primary))}
.start-panels{display:none}
body[data-route="overview"] .start-panels{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
body[data-route="overview"] .start-panel{position:absolute;top:var(--sp-top);width:var(--sp-w);max-height:calc(100vh - var(--sp-top) - var(--space-4));
  display:flex;flex-direction:column;pointer-events:auto;overflow:hidden;
  background:color-mix(in srgb,var(--bg-surface) 76%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid color-mix(in srgb,var(--border-strong) 70%,transparent);border-radius:var(--r-lg)}
body[data-route="overview"] .start-panel-left{left:var(--space-3)}
body[data-route="overview"] .start-panel-right{right:var(--space-3)}
@media (prefers-reduced-transparency:reduce){body[data-route="overview"] .start-panel{background:var(--bg-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
.sp-head{display:flex;align-items:baseline;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4) var(--space-2);
  background:none;border:0;border-radius:0;color:var(--text-primary);font:inherit;text-align:left;cursor:default}
.sp-head:disabled{opacity:1;color:var(--text-primary)}
.sp-title{font-size:var(--fs-title);font-weight:var(--fw-semibold)}
.sp-moment{margin-left:auto;font-size:var(--fs-micro);color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-chevron{display:none;width:8px;height:8px;margin-left:var(--space-1);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);align-self:center;transition:transform 120ms ease}
.sp-body{overflow:auto;padding:0 var(--space-2) var(--space-2)}
.sp-row{display:flex;flex-direction:column;gap:2px;position:relative;width:100%;box-sizing:border-box;margin:0;
  padding:var(--space-2) 26px var(--space-2) var(--space-2);background:transparent;border:0;border-radius:var(--r-sm);
  border-top:1px solid color-mix(in srgb,var(--border-subtle) 85%,transparent);
  color:var(--text-primary);font:inherit;font-size:var(--fs-body);text-align:left;box-shadow:none;
  transition:background 120ms ease}
.sp-row:first-child{border-top-color:transparent}
button.sp-row{cursor:pointer}
button.sp-row::after{content:"\203A";position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);
  font-size:20px;line-height:1;color:var(--text-muted);opacity:.6;transition:opacity 120ms ease,color 120ms ease,transform 120ms ease}
button.sp-row:hover{background:color-mix(in srgb,var(--bg-hover) 85%,transparent)}
button.sp-row:hover::after{opacity:1;color:var(--accent);transform:translate(2px,-50%)}
button.sp-row:focus-visible{outline:2px solid var(--border-focus);outline-offset:-2px}
.sp-row.is-static{cursor:default}
.sp-line{display:flex;align-items:baseline;gap:var(--space-2)}
.sp-label{color:var(--text-secondary);font-size:var(--fs-caption);font-weight:var(--fw-medium);min-width:0}
.sp-value{margin-left:auto;font-size:var(--fs-display);font-weight:var(--fw-semibold);line-height:1.15;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.sp-sub{font-size:var(--fs-caption);color:var(--text-secondary);line-height:1.35}
.sp-sub.is-signal,.sp-role-v.is-signal{color:var(--sp-signal)}
.sp-row.is-warn .sp-label::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--warning);vertical-align:middle}
.sp-names{display:flex;flex-direction:column;gap:1px}
.sp-name{font-size:var(--fs-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-role{display:flex;flex-direction:column;gap:0;margin-top:2px}
.sp-role-k{font-size:var(--fs-micro);color:var(--text-secondary);letter-spacing:.02em}
.sp-role-v{font-size:var(--fs-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-phone{font-size:var(--fs-caption);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.sp-phone.is-none,.sp-sub.is-none,.sp-role-v.is-none{color:var(--text-muted)}
.sp-item .sp-label{color:var(--text-primary);font-weight:var(--fw-regular);font-size:var(--fs-body)}
.sp-state{margin-left:auto;font-size:var(--fs-caption);color:var(--sp-signal)}
.sp-pill{margin-left:auto;padding:1px var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--r-xs);font-size:var(--fs-caption)}
.sp-pill.is-draft{color:var(--warning);background:var(--warning-quiet)}
.sp-pill.is-confirmed{color:var(--success);background:var(--success-quiet)}
.sp-note{padding-top:var(--space-1);padding-bottom:var(--space-1)}
/* < 1100px: панелі складаються по черзі в колонку зліва; стрілка в заголовку розгортає лише одну. */
@media (max-width:1099px){
  body[data-route="overview"] .start-panels{inset:var(--sp-top) auto auto var(--space-3);width:min(var(--sp-w),calc(100% - 24px));display:flex;flex-direction:column;gap:var(--space-2)}
  body[data-route="overview"] .start-panel{position:static;width:100%;max-height:calc(100vh - var(--sp-top) - var(--space-4))}
  .sp-head{cursor:pointer}
  .sp-chevron{display:inline-block}
  .start-panel[data-open="true"] .sp-chevron{transform:rotate(-135deg)}
  .start-panel[data-open="false"] .sp-body{display:none}
  body[data-route="overview"] .map3d-site-section .map3d-toolbar{left:var(--space-3);right:var(--space-3)}
}

/* Шаблони графіків (work-templates-view.js) */
.work-templates-panel .panel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.work-templates-table{width:100%}
.work-templates-table th,.work-templates-table td{vertical-align:top}
.work-templates-table td.wt-name{width:55%}
.wt-num{text-align:right;font-variant-numeric:tabular-nums}
.wt-title{display:block;font-weight:600}
.wt-note{display:block;font-size:11px}
.wt-assigned{font-size:12px;overflow-wrap:anywhere}
.wt-blocks summary{cursor:pointer;font-size:12px}
.wt-day{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;margin:4px 0}
.wt-day b{width:2em;font-size:12px}
.wt-chip{padding:2px 6px;border-left:3px solid var(--accent);background:var(--panel-raised);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wt-chip.is-reserve,.h24-sched-chip.is-reserve{border-left-color:var(--muted);border-left-style:dashed;opacity:.75}
.wt-notes{padding:8px 12px}
.wt-flag{margin:4px 0;font-size:13px}
.wt-review{font-weight:600}