/* ============================================================
   Каса Web Admin — modern theme layer
   Built on tokens.css. Keeps the brand DNA (Manrope, mono
   numerals, warm ink) and refreshes it: a soft greige canvas,
   white cards with low warm shadows, an emerald signature
   accent, a rich chart palette, and a warm light/dark theme
   swapped via [data-theme] on <html>.
   ============================================================ */

:root {
  /* canvas + surfaces */
  --app-bg:      #FBF9F5;
  --card:        #FFFFFF;
  --card-2:      #F3F0E8;
  --hair:        #E3DDCD;
  --hair-2:      #CCC4AD;
  --hair-strong: #CCC4AD;
  --pure:        #FFFFFF;

  /* text */
  --text:   #1B1814;
  --text-2: #4A4338;
  --text-3: #8A8170;
  --text-4: #B8B09C;
  --on-ink: #FFFFFF;

  /* accent — ink-based, no chromatic brand */
  --acc:        #1B1814;
  --acc-2:      #2A2620;
  --acc-soft:   #E9E5D9;
  --acc-text:   #1B1814;

  /* ink action */
  --ink-btn:    #1B1814;
  --ink-btn-h:  #2A2620;

  /* semantic (status only) */
  --pos:  #2D7A4F;  --pos-soft:  #E3F0E8;
  --warn: #B86D12;  --warn-soft: #F7E5C8;
  --dang: #B73A23;  --dang-soft: #F4DCD4;
  --info: #2F5DAB;  --info-soft: #DDE6F6;

  /* data-viz palette */
  --c1: #2D7A4F;  --c1s: #D6E8DD;  /* green    */
  --c2: #2F5DAB;  --c2s: #DDE6F6;  /* blue     */
  --c3: #B86D12;  --c3s: #F7E5C8;  /* amber    */
  --c4: #7c5cdb;  --c4s: #e7e0fa;  /* violet   */
  --c5: #B73A23;  --c5s: #F4DCD4;  /* terracotta */
  --c6: #0e9aa0;  --c6s: #d3eef0;  /* teal     */

  /* sidebar (always dark, even in light theme) */
  --sb-bg: #1B1814;
  --sb-ink: #F4EFE4;
  --sb-mut: rgba(244,239,228,.55);
  --sb-faint: rgba(244,239,228,.35);
  --sb-line: rgba(255,255,255,.08);
  --sb-hov: rgba(255,255,255,.06);
  --sb-active: #F4EFE4;
  --sb-active-ink: #1B1814;

  /* elevation */
  --sh-card: 0 1px 2px rgba(27,24,20,.05);
  --sh-card-h: 0 2px 4px rgba(27,24,20,.07), 0 8px 24px rgba(27,24,20,.09);
  --sh-pop:  0 4px 14px rgba(27,24,20,.07);
  --sh-drawer: -24px 0 60px rgba(20,17,12,.18);

  --r-card: 14px; /* картки/таблиці за дизайн-системою; діалоги — 18px */
}

html[data-theme="dark"] {
  --app-bg:      #15120D;
  --card:        #1D1913;
  --card-2:      #221D16;
  --hair:        #332C22;
  --hair-2:      #4A4030;
  --hair-strong: #4A4030;
  --pure:        #1D1913;

  --text:   #F4EFE4;
  --text-2: #CBC3B2;
  --text-3: #948B79;
  --text-4: #6A6253;
  --on-ink: #15120D;

  --acc:      #F4EFE4;
  --acc-2:    #CBC3B2;
  --acc-soft: #2C261D;
  --acc-text: #F4EFE4;

  --ink-btn:    #F4EFE4;
  --ink-btn-h:  #CBC3B2;

  --pos:  #5FBF86;  --pos-soft:  #18301F;
  --warn: #E0A44E;  --warn-soft: #342817;
  --dang: #E57C64;  --dang-soft: #36211B;
  --info: #82A8E8;  --info-soft: #1C2738;

  --c1: #5FBF86;  --c1s: #18301F;
  --c2: #82A8E8;  --c2s: #1C2738;
  --c3: #E0A44E;  --c3s: #342817;
  --c4: #a98ef0;  --c4s: #261f3a;
  --c5: #E57C64;  --c5s: #36211B;
  --c6: #3fc6cc;  --c6s: #15302f;

  /* sidebar in dark theme: на тон світліший за фон (з макета v2) */
  --sb-bg: #26211A;
  --sb-ink: #F4EFE4;
  --sb-mut: rgba(244,239,228,.45);
  --sb-faint: rgba(244,239,228,.25);
  --sb-line: rgba(255,255,255,.06);
  --sb-hov: rgba(255,255,255,.05);
  --sb-active: rgba(244,239,228,.12);
  --sb-active-ink: #F4EFE4;

  --sh-card: 0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.38);
  --sh-card-h: 0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.5);
  --sh-pop:  0 14px 44px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.4);
  --sh-drawer: -24px 0 70px rgba(0,0,0,.5);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--app-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  transition: background .3s, color .3s;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.eyebrow { font: var(--t-label); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }

/* ---------- App shell ---------- */
/* height задано двічі: dvh (видима висота за динамічними панелями мобільних браузерів)
   лишається прогресивним покращенням — старі браузери другий рядок просто ігнорують.
   grid-template-rows: minmax(0, 1fr) — умова роботи прокрутки всередині сайдбара й сторінки:
   неявний рядок сайзиться по контенту, тому .side виростав до висоти меню (914px при вікні
   600px) і просто обрізався цим overflow: hidden — вкладеному .side-nav не було чого
   прокручувати. Нуль у minmax дозволяє рядку стиснутись нижче контенту. */
.admin {
  display: grid; grid-template-columns: 236px 1fr; grid-template-rows: minmax(0, 1fr);
  height: 100vh; height: 100dvh; overflow: hidden;
}

/* ---------- Sidebar ---------- */
.side {
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-line);
  display: flex; flex-direction: column;
  padding: 18px 14px 14px;
}
/* padding-left 2px: «BG»-марка по одній осі з іконками nav-item (центр 35px ≈ 34.5px)
   у ВСІХ станах сайдбара — логотип не рухається ні при hover, ні при закріпленні. */
.side .brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px 2px; border-bottom: 1px solid var(--sb-line); }
/* min-height: 0 — не косметика, а умова роботи overflow: у flex-колонці автоматичний
   мінімальний розмір (min-height: auto) не дає елементу стиснутись нижче висоти контенту,
   тому без цього рядка список навігації виростає вище сайдбара, прокрутка не з'являється,
   а хвіст меню обрізає .admin { overflow: hidden }. */
.side-nav {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  gap: 2px; padding-top: 14px;
  /* Дозволяє анімувати розкриття <details> від 0 до auto (::details-content нижче). Оголошено
     тут, а НЕ на :root: властивість успадковується, і глобальне включення змінило б поведінку
     всіх auto-переходів у застосунку. Де не підтримано — група розкривається миттєво. */
  interpolate-size: allow-keywords;
}
/* Пункти списку не стискаються. Дефолтний flex-shrink: 1 ужимає їх під доступну висоту, а в
   елементів з overflow: hidden (.group-label завжди, .nav-item у згорнутому режимі) автоматичний
   мінімальний розмір дорівнює НУЛЮ — тому заголовки груп сплющувались до самих паддінгів із
   обрізаним текстом, щойно .side-nav отримав обмежену висоту. Список має прокручуватись, а не
   стискатись. */
.side-nav > *, .nav-group-items > * { flex-shrink: 0; }
.side .brand .mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--sb-ink); color: var(--sb-bg);
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px; letter-spacing: -0.04em; flex-shrink: 0;
}
.side .brand .name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--sb-ink); }
.side .brand .ver { font-size: 11px; color: var(--sb-faint); font-family: var(--font-mono); margin-top: 1px; }

.group-label { font: var(--t-label); color: var(--sb-faint); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; font-weight: 700; padding: 16px 12px 6px; }

/* ---------- Групи навігації: нативний <details> ----------
   Згортання на <details>/<summary>, а не на Blazor-стані: <summary> фокусується й реагує на
   Enter/Space сам, aria-expanded браузер виставляє теж сам (як меню користувача нижче).
   Атрибут open у розмітці НЕ рендериться — ним володіє виключно sidebar.js (applyGroups):
   розкрита група активної сторінки плюс збережені в localStorage. */
/* Зовнішнє повітря між групами. Раніше його давав верхній падінг .group-label (16px), але той
   самий падінг малюється фоном підсвітки, і вміст плашки опинявся на 5px нижче центру. Розводимо
   дві ролі: відступ між групами — тут, внутрішній падінг — нижче, симетричний.
   9px + 7px падінга = ті самі 18px від попереднього пункту до тексту заголовка. */
.nav-group { margin-top: 9px; }

.nav-group summary.group-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; border-radius: 9px;
  /* Симетричний падінг перебиває успадковані від .group-label 16px/6px: назва й шеврон стоять
     по центру рядка заголовка, а повітря між групами дає margin-top у .nav-group вище.
     Горизонтальні 12px ті самі, що в .nav-item — підписи стоять на одній вертикалі.
     .group-label без summary (платформенна вітка) лишається з успадкованою асиметрією. */
  padding: 7px 12px;
  /* Прибираємо нативний маркер-трикутник — той самий прийом, що в .user-chip нижче. */
  list-style: none;
  transition: color .14s;
}
.nav-group summary.group-label::-webkit-details-marker { display: none; }
.nav-group summary.group-label::marker { content: ""; }
/* Підсвітки-плашки при наведенні НЕМАЄ навмисно: заголовок — підпис-розділювач, а фон робив
   його схожим на пункт меню. Лишаємо тільки посвітлення тексту й шеврона як ознаку клікабельності.
   Не додавайте тут background «за аналогією» з .nav-item:hover — у пунктів він доречний, тут ні. */
.nav-group summary.group-label:hover { color: var(--sb-mut); }
.nav-group summary.group-label > span { flex: 1; min-width: 0; }
.ng-chevron { flex-shrink: 0; transition: transform .18s ease; }
.nav-group[open] > summary .ng-chevron { transform: rotate(180deg); }

/* gap у .side-nav після вкладення в <details> більше не діє між пунктами групи — задаємо свій. */
.nav-group-items { display: flex; flex-direction: column; gap: 2px; }

/* Плавне розкриття там, де браузер це вміє (разом з interpolate-size вище). */
.nav-group::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .18s ease, content-visibility .18s allow-discrete;
}
.nav-group[open]::details-content { block-size: auto; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--sb-mut); font-size: 13.5px; font-weight: 600;
  transition: background .14s, color .14s; text-align: left; width: 100%;
}
.nav-item:hover { background: var(--sb-hov); color: var(--sb-ink); }
.nav-item.active { background: var(--sb-active); color: var(--sb-active-ink); }
.nav-item.active svg { stroke-width: 2; }
.nav-item .count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.10); color: var(--sb-mut);
  padding: 1px 8px; border-radius: 999px; min-width: 24px; text-align: center;
}
.nav-item:hover .count { background: rgba(255,255,255,.12); }
.nav-item.active .count { background: rgba(27,24,20,.18); color: var(--sb-active-ink); }
.side .spacer { flex: 1; min-height: 12px; }
/* Футер лежить поза .side-nav (прокручується лише список розділів), тому fixed-висота
   і flex-shrink: 0 — інакше довге меню з'їло б статус-рядок. */
.side-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 4px; border-top: 1px solid var(--sb-line);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--sb-faint);
  flex-shrink: 0;
}

.dps-card {
  margin-top: 8px; padding: 13px 14px;
  background: var(--card-2); border: 1px solid var(--hair); border-radius: 14px;
}
.dps-card .row { display: flex; align-items: center; justify-content: space-between; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 0 var(--pos); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--pos) 55%, transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* ---------- Sidebar: два режими (html[data-sidebar], джерело — bgSidebar/localStorage) ----------
   'pinned' — зафіксований розгорнутим (236px, як раніше);
   'auto'   — згорнутий до іконок (68px), розгортається по hover ПОВЕРХ контенту:
   grid-колонка лишається 68px, тому контент не сіпається від випадкових наведень.
   Тексти схлопуються max-width/opacity (іконки на місці — паддінги не змінюються). */
.side { width: 236px; position: relative; z-index: 80; transition: width .2s ease, box-shadow .2s ease; }
.admin { transition: grid-template-columns .2s ease; }

/* Шапка сайдбара: бренд + кнопка фіксації в одному підкресленому ряду. */
.side-head { display: flex; align-items: flex-start; gap: 6px; border-bottom: 1px solid var(--sb-line); flex-shrink: 0; }
.side-head .brand { flex: 1; min-width: 0; border-bottom: none; }

.side-pin {
  flex: none;
  width: 28px; height: 28px; margin-top: 9px;
  display: grid; place-items: center;
  border: none; border-radius: 8px;
  background: transparent; color: var(--sb-mut);
  cursor: pointer;
  transition: background .14s, color .14s, max-width .2s ease, opacity .15s ease;
}
.side-pin:hover { background: var(--sb-hov); color: var(--sb-ink); }
.side-pin svg { transition: transform .2s ease; }
html[data-sidebar="pinned"] .side-pin { color: var(--sb-ink); background: var(--sb-hov); }
html[data-sidebar="pinned"] .side-pin svg { transform: rotate(-45deg); }

/* Іконки та статус-точка НЕ стискаються (flex-shrink) — у згорнутому режимі текст
   схлопується, а іконка лишається рівно 17px на своєму місці (як в еталоні). */
.nav-item svg,
.side-footer .live-dot { flex-shrink: 0; }

/* Текстові частини, що ховаються у згорнутому режимі (base — щоб анімувались в обидва боки). */
.side .brand > div:not(.mark),
.nav-item span,
.side-footer > span:last-child {
  white-space: nowrap; overflow: hidden;
  max-width: 180px; opacity: 1;
  transition: max-width .2s ease, opacity .15s ease;
}
.group-label { white-space: nowrap; overflow: hidden; transition: opacity .15s ease; }
.group-label > span { overflow: hidden; transition: max-width .2s ease, opacity .15s ease; }

html[data-sidebar="auto"] .admin { grid-template-columns: 68px 1fr; }
html[data-sidebar="auto"] .side { width: 68px; }
html[data-sidebar="auto"] .side:hover { width: 236px; box-shadow: 24px 0 60px rgba(20, 17, 12, .28); }
html[data-theme="dark"][data-sidebar="auto"] .side:hover { box-shadow: 24px 0 70px rgba(0, 0, 0, .5); }

html[data-sidebar="auto"] .side:not(:hover) .brand > div:not(.mark),
html[data-sidebar="auto"] .side:not(:hover) .nav-item span,
html[data-sidebar="auto"] .side:not(:hover) .side-footer > span:last-child {
  max-width: 0; opacity: 0;
}
html[data-sidebar="auto"] .side:not(:hover) .side-pin { max-width: 0; padding: 0; opacity: 0; overflow: hidden; }
html[data-sidebar="auto"] .side:not(:hover) .nav-item { overflow: hidden; }
html[data-sidebar="auto"] .side:not(:hover) .nav-item .count { padding: 1px 0; min-width: 0; }
/* Заголовки груп у рельсі: гасне лише ТЕКСТ, а шеврон лишається видимим і клікабельним —
   інакше у згорнутому вигляді згорнуті групи просто зникали б, і було б незрозуміло, що
   приховано й куди тиснути. Висота заголовка зберігається, тож вертикальний ритм не стрибає
   при hover, а шеврон стає по осі іконок (центр ≈35px). */
html[data-sidebar="auto"] .side:not(:hover) .group-label > span { max-width: 0; opacity: 0; }
html[data-sidebar="auto"] .side:not(:hover) summary.group-label { justify-content: center; gap: 0; }

/* У згорнутому рельсі (68px) смуга прокрутки — 11px з 68 (::-webkit-scrollbar вище): вона ріже
   праві краї плашок .nav-item і читається як дефект, хоча сам скрол там не потрібен — рельс
   розгортається тим самим hover, яким користуються для навігації, і прокрутка з'являється вже
   в розгорнутому вигляді. Іконки при цьому не зсуваються (їх тримає padding злівa), тому
   питання чисто візуальне. */
html[data-sidebar="auto"] .side:not(:hover) .side-nav { overflow-y: hidden; }

/* ---------- Мобільна навігація: бургер і скрим ----------
   Розмітка одна на всі ширини, тому обидва елементи завжди в DOM; показує їх лише медіа-блок
   нижче. Бургер успадковує вигляд від .icon-btn (як ThemeToggle) — нових примітивів не вводимо.
   Селектор обов'язково через .topbar: .icon-btn { display: grid } оголошено НИЖЧЕ, і при рівній
   специфічності одноклассовий .nav-burger { display: none } програв би йому по порядку — бургер
   світився б на десктопі. */
.topbar .nav-burger { display: none; }
.nav-scrim { display: none; }

/* Швидке додавання каси — пункт лише для мобільного (показує media-блок нижче). Селектор через
   .side обовʼязково: правило .nav-item оголошено НИЖЧЕ, і при рівній специфічності воно перебило
   б display: none — саме так свого часу бургер світився на десктопі через .icon-btn. */
.side .nav-quick-add { display: none; }

/* ---------- Shell на вузьких екранах: сайдбар стає off-canvas дровером ----------
   Блок МУСИТЬ стояти після правил режимів pinned/auto: у тих селекторах є атрибут
   (специфічність 0,2,1), і мобільні правила перебивають їх лише порядком — звідси
   html[data-sidebar] у селекторах тут. Межа 860px збігається з уже проведеною в проекті
   межею «десктоп/мобілка» (components.css, min-width: 861px).
   У дровері сайдбар ЗАВЖДИ повної ширини: режим auto розгортається по hover, а на тач-екрані
   hover ненадійний — іконковий рельс став би пасткою. При вимкненому JS атрибута немає, режим
   не вмикається і сайдбар лишається звичайною колонкою — це безпечніше за дровер, який нічим
   відкрити (прокрутка списку при цьому працює: вона поза медіа-блоком і не залежить від JS). */
@media (max-width: 860px) {
  html[data-sidebar] .admin { grid-template-columns: 1fr; }

  html[data-sidebar] .side {
    position: fixed; inset: 0 auto 0 0;
    width: 236px; height: 100dvh;
    transform: translateX(-100%);
    /* visibility — не косметика: без неї посилання схованого сайдбара лишаються у tab-порядку
       і фокус їде за екран. Гасимо із затримкою, щоб не обрізати анімацію виїзду. */
    visibility: hidden;
    transition: transform .22s ease, visibility 0s .22s;
  }
  html[data-sidebar] .side:hover { width: 236px; box-shadow: none; }

  html[data-nav="open"][data-sidebar] .side {
    transform: none; visibility: visible; transition-delay: 0s;
    box-shadow: 24px 0 60px rgba(20, 17, 12, .28);
  }
  html[data-theme="dark"][data-nav="open"][data-sidebar] .side {
    box-shadow: 24px 0 70px rgba(0, 0, 0, .5);
  }

  /* Тексти й лічильники, що схлопуються в режимі auto, у дровері видні завжди. */
  html[data-sidebar="auto"] .side:not(:hover) .brand > div:not(.mark),
  html[data-sidebar="auto"] .side:not(:hover) .nav-item span,
  html[data-sidebar="auto"] .side:not(:hover) .side-footer > span:last-child {
    max-width: 180px; opacity: 1;
  }
  html[data-sidebar="auto"] .side:not(:hover) .group-label > span { max-width: 180px; opacity: 1; }
  html[data-sidebar="auto"] .side:not(:hover) summary.group-label { justify-content: flex-start; gap: 8px; }
  html[data-sidebar="auto"] .side:not(:hover) .nav-item .count { padding: 1px 8px; min-width: 24px; }
  html[data-sidebar="auto"] .side:not(:hover) .side-nav { overflow-y: auto; }

  /* Перемикач pinned/auto у режимі дровера не має сенсу. */
  html[data-sidebar] .side-pin { display: none; }

  /* Колір — той самий, що в .modal-scrim, але окремим класом: у модального скрима свої
     display: grid / padding / backdrop-filter. z-index між контентом і сайдбаром (80). */
  .nav-scrim { position: fixed; inset: 0; z-index: 75; background: rgba(22, 20, 15, .5); }
  html[data-nav="open"] .nav-scrim { display: block; }

  .topbar .nav-burger { display: grid; }

  /* Акцент: це дія, а не розділ — відрізняє рамка, а НЕ власний color. Свій колір тут ламав
     активний стан: на своїй же сторінці пункт отримує .active зі світлим фоном (--sb-active),
     і світлий --sb-ink робив текст та іконку (stroke: currentColor) невидимими — плашка
     виглядала порожньою. Кольори лишаємо станам .nav-item / :hover / .active. */
  .side .nav-quick-add {
    display: flex;
    margin-bottom: 6px;
    border: 1px solid var(--sb-line);
  }

  /* Топбар на 390px не вміщав breadcrumb + пошук (жорсткі 270px) + чип користувача з іменем
     і роллю. Пошук декоративний (div без обробника, ⌘K не реалізовано) — ховаємо його у
     MainLayout.razor.css, де він і оголошений; тут — те, що живе глобально. */
  .topbar { padding: 0 16px; gap: 10px; }
  .uc-meta, .uc-caret { display: none; }
  .user-chip { padding: 6px; }
}

/* ---------- Main + topbar ---------- */
.main { display: flex; flex-direction: column; overflow: hidden; background: var(--app-bg); min-width: 0; }
.topbar {
  height: 58px; flex-shrink: 0; border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; gap: 14px; padding: 0 28px; background: var(--app-bg);
}
.loc-switch {
  display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 11px;
  background: var(--card); border: 1px solid var(--hair); font-size: 13px; font-weight: 700;
  box-shadow: var(--sh-card); transition: border-color .14s;
  white-space: nowrap; flex-shrink: 0;
}
.loc-switch:hover { border-color: var(--hair-strong); }
.topbar .search {
  flex: 1; max-width: 420px; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 11px;
  padding: 9px 13px; box-shadow: var(--sh-card); transition: border-color .15s;
}
.topbar .search input { min-width: 0; }
.topbar .search:focus-within { border-color: var(--hair-strong); }
.topbar .search input { flex: 1; border: none; background: none; outline: none; font-size: 13.5px; }
.topbar .search input::placeholder { color: var(--text-3); }
.kbd { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); padding: 2px 7px; background: var(--app-bg); border: 1px solid var(--hair); border-radius: 6px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--hair);
  color: var(--text-2); position: relative; transition: background .14s, color .14s, border-color .14s; flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--hair-strong); color: var(--text); }
.icon-btn .badge { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--dang); border: 2px solid var(--app-bg); }
/* ---------- User menu (header dropdown) ---------- */
.user-menu { position: relative; flex-shrink: 0; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--pure); border: 1px solid var(--hair); flex-shrink: 0; cursor: pointer; list-style: none; transition: border-color .14s; }
.user-chip::-webkit-details-marker { display: none; }
.user-chip::marker { content: ""; }
.user-chip:hover { border-color: var(--hair-strong); }
.uc-meta { line-height: 1.2; }
.uc-name { font-size: 13px; font-weight: 700; white-space: nowrap; }
.uc-role { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.uc-caret { color: var(--text-3); transition: transform .18s ease; margin-left: 1px; }
.user-menu[open] .uc-caret { transform: rotate(180deg); }

.user-pop {
    position: absolute; top: calc(100% + 9px); right: 0; width: 264px; z-index: 75;
    background: var(--card); border: 1px solid var(--hair); border-radius: 15px;
    box-shadow: var(--sh-pop); padding: 8px; overflow: hidden;
    animation: userPop .16s cubic-bezier(.2,.9,.3,1);
}
@keyframes userPop { from { opacity: 0; transform: translateY(-6px); } }
.up-head { display: flex; align-items: center; gap: 11px; padding: 8px 9px 6px; }
.up-id { min-width: 0; }
.up-name { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-email { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-role { padding: 0 9px 8px; }
.up-sep { height: 1px; background: var(--hair); margin: 2px 0 6px; }
.up-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background .12s, color .12s; }
.up-item:hover { background: var(--card-2); color: var(--text); }
.up-item.danger { color: var(--dang); }
.up-item.danger:hover { background: var(--dang-soft); }
.up-item svg { color: var(--text-4); flex-shrink: 0; }
.up-item:hover svg { color: currentColor; }

.avatar { border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }

/* ---------- Page scaffold ---------- */
/* scrollbar-gutter: stable — резервуємо жолоб скролбара завжди (і при overflow:hidden на
   dir-fit-сторінках), щоб ширина контенту не стрибала на ~11px між сторінками зі скролом і без. */
.page { flex: 1; overflow: auto; scrollbar-gutter: stable; }
/* Сторінки без власної центрованої обгортки (.directory/.sec/.mailset/.dash/.cset)
   рендерять PageHeader прямо в .page — тоді контент липнув до сайдбара. Даємо їм такий самий
   горизонтальний відступ і центрування, як у обгорток. (Сторінки з обгорткою тримають
   PageHeader всередині неї, тож під цей селектор не потрапляють.) */
.page:has(> .page-head) { padding: 30px 36px 40px; }
.page:has(> .page-head) > * { max-width: 1280px; margin-inline: auto; }
@media (max-width: 560px) { .page:has(> .page-head) { padding: 22px 16px 40px; } }
.page-inner { padding: 30px 36px 40px; max-width: 1280px; margin: 0 auto; }
/* Узкая центрированная колонка для одиночных форм (создание/приглашение и т.п.). */
.page-narrow { padding: 28px 30px 64px; max-width: 640px; margin: 0 auto; }
@media (max-width: 560px) { .page-narrow { padding: 22px 18px 56px; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font: var(--t-h1); font-size: 28px; letter-spacing: -0.03em; margin: 0; }
.page-head .sub { color: var(--text-3); font-size: 13.5px; margin-top: 6px; }
.page-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 13px;
  background: var(--pure); color: var(--text); border: 1px solid var(--hair-strong);
  transition: background-color .14s, border-color .14s, color .14s, box-shadow .14s; white-space: nowrap;
}
.btn:hover { background: var(--card-2); }
.btn.primary { background: var(--ink-btn); color: var(--on-ink); border-color: transparent; }
.btn.primary:hover { background: var(--ink-btn-h); }
.btn.accent { background: var(--acc); color: #fff; border-color: transparent; }
.btn.accent:hover { background: var(--acc-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-3); }
.btn.ghost:hover { background: transparent; color: var(--text); }
.btn.danger { background: var(--dang); color: #fff; border-color: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.icon { padding: 9px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--card-2); font-size: 11px; font-weight: 700; color: var(--text-2); border: 1px solid var(--hair); }
.chip .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.pos  { background: var(--pos-soft);  color: var(--pos);  border-color: transparent; }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.dang { background: var(--dang-soft); color: var(--dang); border-color: transparent; }
.chip.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.chip.acc  { background: var(--acc-soft);  color: var(--acc-text); border-color: transparent; }
.chip.off  { background: var(--card-2); color: var(--text-4); border-color: transparent; }
.chip.ghost { background: transparent; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 20px 22px; box-shadow: var(--sh-card); }
.card.flat { box-shadow: none; }
.card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-h .t { font: var(--t-h3); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.card-h .s { font-size: 12px; color: var(--text-3); margin-top: 3px; font-weight: 500; }

/* ---------- KPI ---------- */
.kpi { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--sh-card); position: relative; overflow: hidden; }
.kpi .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.kpi .label { font-size: 12px; font-weight: 700; color: var(--text-3); }
.kpi .val { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.kpi .val .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 27px; font-weight: 800; letter-spacing: -0.03em; }
.kpi .val .u { color: var(--text-3); font-size: 15px; font-weight: 600; }
.kpi .delta { margin-top: 11px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.kpi .delta.up { color: var(--pos); }
.kpi .delta.down { color: var(--dang); }
.kpi .delta .muted { color: var(--text-3); font-weight: 500; }
.kpi .spark { position: absolute; right: 0; bottom: 0; left: 0; height: 34px; opacity: .9; }

/* ---------- Table ---------- */
.table-wrap { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card); }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th { text-align: left; font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; padding: 11px 18px; border-bottom: 1px solid var(--hair); background: var(--card-2); }
table.tbl td { padding: 11px 18px; border-bottom: 1px solid var(--hair); font-size: 13.5px; vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .12s; }
table.tbl.rows tbody tr:hover td { background: var(--card-2); cursor: pointer; }
.t-name { font-weight: 700; }
.t-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ---------- Inputs ---------- */
.field { width: 100%; background: var(--app-bg); border: 1px solid var(--hair-strong); border-radius: 10px; padding: 9px 12px; font-size: 13px; outline: none; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.field:focus { background: var(--card); outline: 2px solid var(--hair-strong); outline-offset: 0; }
.field::placeholder { color: var(--text-4); }
.flabel { font-size: 11.5px; font-weight: 700; color: var(--text-3); margin-bottom: 5px; display: block; }

/* ---------- Toggle ---------- */
.toggle { width: 36px; height: 20px; border-radius: 999px; background: var(--hair-strong); position: relative; transition: background .15s; flex-shrink: 0; }
.toggle.on { background: var(--pos); }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--pure); transition: left .18s cubic-bezier(.3,1.3,.5,1); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.toggle.on .knob { left: 18px; }
/* Малий варіант (фільтри у тулбарах, компактні рядки) — 32×18, кноб 13. */
.toggle.sm { width: 32px; height: 18px; background: var(--card-2); border: 1px solid var(--hair); }
.toggle.sm .knob { top: 1.5px; left: 2px; width: 13px; height: 13px; box-shadow: var(--sh-card); }
.toggle.sm.on { background: var(--pos); border-color: transparent; }
.toggle.sm.on .knob { left: 16px; }

/* ---------- Segmented ---------- */
.seg { display: inline-flex; background: var(--card-2); border: 1px solid var(--hair); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { padding: 7px 16px; font-size: 13px; font-weight: 700; border-radius: 8px; color: var(--text-3); transition: background-color .14s, color .14s; }
.seg button.active { background: var(--ink-btn); color: var(--on-ink); }

/* Компактний сегмент — тристейт у рядках прав касира (Успадк./Дозволити/Заборонити). */
.seg.sm { border-radius: 9px; padding: 2px; }
.seg.sm button { padding: 4px 10px; font-size: 11px; border-radius: 7px; }

/* tabs (underline) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hair); margin-bottom: 22px; }
.tab { padding: 11px 14px; font-size: 13.5px; font-weight: 700; color: var(--text-3); position: relative; transition: color .14s; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; background: var(--acc); border-radius: 2px; }

/* ---------- Drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(22,20,15,.46); z-index: 60; backdrop-filter: blur(2px); }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 94vw; background: var(--app-bg); z-index: 61; box-shadow: var(--sh-drawer); display: flex; flex-direction: column; animation: slideIn .3s cubic-bezier(.2,.85,.3,1); }
@keyframes slideIn { from { transform: translateX(60px); } }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ink-btn); color: var(--on-ink); padding: 12px 16px 12px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; z-index: 90; box-shadow: var(--sh-pop); animation: slideUp .26s; }
@keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(12px); } }

/* ---------- Bars / charts helpers ---------- */
.bars { display: flex; align-items: flex-end; gap: 7px; }
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.bar-track { width: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.bar { width: 44%; border-radius: 5px 5px 2px 2px; min-height: 3px; transition: height .3s; }
.bar.ghost { opacity: .28; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; }
.legend .li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; }

.prog { height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.prog > span { display: block; height: 100%; border-radius: 4px; }

/* fade-in for page transitions — тільки opacity (без translate), щоб не було вертикального
   «рывка» на кожній навігації. Opacity анімується композитором (без reflow), і оскільки
   transform не використовується — немає matrix()-containing-block, position:fixed-оверлеї
   (модалки) залишаються прив'язані до вьюпорта. */
.fade-page { animation: pageIn .2s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

.empty { text-align: center; color: var(--text-3); padding: 40px; font-size: 14px; }
.divider { height: 1px; background: var(--hair); margin: 0; border: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Modal / wizard ---------- */
.modal-scrim { position: fixed; inset: 0; background: rgba(22,20,15,.5); z-index: 70; display: grid; place-items: center; padding: 24px; backdrop-filter: blur(3px); }
.modal { background: var(--pure); border: 1px solid var(--hair); border-radius: 18px; width: 660px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(20,17,12,.28); overflow: hidden; animation: modalPop .3s cubic-bezier(.18,1.1,.4,1); }
@keyframes modalPop { from { transform: translateY(16px) scale(.985); } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 24px 16px; border-bottom: 1px solid var(--hair); }
.modal-head .mt { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.modal-head .ms { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.modal-body { padding: 20px 24px; overflow: auto; flex: 1; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--hair); background: var(--card-2); }

.stepper { display: flex; align-items: center; padding: 16px 22px 2px; }
.stepper .st { display: flex; align-items: center; gap: 8px; }
.stepper .sc { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-mono); background: var(--card-2); color: var(--text-3); border: 1px solid var(--hair); flex-shrink: 0; transition: background-color .2s, color .2s, border-color .2s; }
.stepper .st.active .sc { background: var(--acc); color: #fff; border-color: transparent; }
.stepper .st.done .sc { background: var(--acc-soft); color: var(--acc-text); border-color: transparent; }
.stepper .sl { font-size: 12px; font-weight: 700; color: var(--text-4); white-space: nowrap; }
.stepper .st.active .sl { color: var(--text); }
.stepper .st.done .sl { color: var(--text-2); }
.stepper .bar { flex: 1; height: 2px; background: var(--hair); margin: 0 9px; border-radius: 2px; min-width: 8px; }
.stepper .bar.done { background: var(--acc); }

/* activation code boxes */
.codebox { display: flex; gap: 8px; position: relative; }
.codebox input.cap { position: absolute; inset: 0; opacity: 0; cursor: text; }
.codebox .cc { width: 46px; height: 58px; border-radius: 12px; background: var(--card-2); border: 1.5px solid var(--hair); display: grid; place-items: center; font-family: var(--font-mono); font-size: 24px; font-weight: 700; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.codebox .cc.filled { border-color: var(--hair-strong); background: var(--card); }
.codebox .cc.cur { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); background: var(--card); }
.codebox .dash { display: grid; place-items: center; color: var(--text-4); font-weight: 700; }

/* QR scan viewfinder */
.viewfinder { position: relative; width: 230px; height: 230px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #0c0b09; }
.viewfinder .corner { position: absolute; width: 28px; height: 28px; border: 3px solid var(--acc); }
.viewfinder .scanline { position: absolute; left: 9%; right: 9%; height: 2px; background: var(--acc); box-shadow: 0 0 14px 3px var(--acc); animation: scan 2.1s ease-in-out infinite; }
@keyframes scan { 0%,100% { top: 12%; } 50% { top: 86%; } }

/* register-screen preview */
.pos-preview { background: var(--ink-btn); color: var(--on-ink); border-radius: 18px; padding: 22px; text-align: center; }
.method-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.method-card { border: 1.5px solid var(--hair); border-radius: 14px; padding: 14px; text-align: center; background: var(--card); transition: background-color .15s, border-color .15s; }
.method-card:hover { border-color: var(--hair-strong); }
.method-card.on { border-color: var(--acc); background: var(--acc-soft); }

/* ---------- Theme toggle icon (CSS-driven by html[data-theme]) ---------- */
.theme-toggle .ti-sun { display: none; }
.theme-toggle .ti-moon { display: inline-block; }
html[data-theme="dark"] .theme-toggle .ti-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .ti-moon { display: none; }