/* ==================================================================== */
/*  CEGLA CRM · фірмовий стиль (тестова сторінка dashboard-test.html)     */
/*  Джерело: бриф Ok 05.07.2026                                           */
/*  Наш шрифт: Onest · наші SVG-іконки (Lucide) з index.html — не мінялись */
/* ==================================================================== */

:root{
  /* Brand */
  --primary:#494fdf; --primary-bright:#4f55f1; --primary-deep:#3a40c4;
  --on-primary:#ffffff;

  /* Text */
  --ink:#191c1f; --body:#1f2226; --charcoal:#3a3d40;
  --mute:#505a63; --ash:#5c5e60; --stone:#5f6b76; --faint:#c9c9cd;  /* --stone затемнено для читабельності (WCAG) Ok 12.07 */
  --on-dark:#ffffff; --on-dark-mute:rgba(255,255,255,0.72);

  /* Surface */
  --canvas-light:#ffffff; --canvas-dark:#171819;
  --app-bg:#F2F5F5;              /* фон сторінки у світлій темі (картки лишаються білими) */
  --surface-soft:#f4f4f4; --surface-card:#ffffff;
  --surface-deep:#0a0a0a; --surface-elevated:#16181a;

  /* Hairline */
  --hairline-light:#e2e2e7;
  --hairline-dark:rgba(255,255,255,0.12);
  --hairline-strong:#191c1f;
  --divider-soft:rgba(255,255,255,0.06);

  /* Semantic */
  --teal:#00a87e; --teal-soft:rgba(0,168,126,0.12);
  --danger:#e23b4a; --danger-soft:rgba(226,59,74,0.10);
  --link:#C25238;   /* теракотовий бренд-акцент (єдине джерело; в inline-стилях app.js — var(--link)) */

  /* Shape */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-full:9999px;

  /* Spacing */
  --sp-xxs:4px; --sp-xs:6px; --sp-sm:8px; --sp-md:14px; --sp-lg:16px;
  --sp-xl:24px; --sp-xxl:32px; --sp-xxxl:48px;

  /* Font — залишаємо Onest як наш шрифт */
  --font:"Onest",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-head:"Onest",-apple-system,Segoe UI,Roboto,sans-serif;

  /* Legacy aliases — щоб JS/HTML з index.html який використовує --fg, --bg... працював */
  --bg:var(--canvas-light); --panel:var(--surface-card); --panel2:var(--surface-soft);
  --line:var(--hairline-light); --fg:var(--ink); --muted:var(--stone);
  --accent:var(--canvas-dark); --accent2:var(--ink);
  --ok:var(--teal); --err:var(--danger); --radius:var(--r-lg);
  --shadow:none; --shadow-lg:none;
  --ring:0 0 0 3px rgba(25,28,31,0.10);
}

/* ==================== ТЕМНА ТЕМА (Ok, 15.07.2026) — кольори з макета ==================== */
html[data-theme="dark"]{
  color-scheme:dark;
  /* Поверхні */
  --canvas-light:#121316;        /* фон сторінки */
  --app-bg:#121316;              /* фон сторінки (темна тема) */
  --surface-card:#25272c;        /* картки */
  --surface-soft:#2a2d33;        /* м'які/hover поверхні */
  --surface-elevated:#2a2d33;
  --surface-deep:#0d0e10;
  --canvas-dark:#aab1b8;          /* «чорний» зі світлої теми (кнопки/картки/пілюлі) → сірий (Ok, 15.07.2026). Сайдбар/плашку ре-скоуплю нижче назад у темне. */
  /* Текст */
  --ink:#f4f4f4;
  --body:#e6e8ea;
  --charcoal:#c7cbcf;
  --mute:#aab1b8; --ash:#aab1b8; --stone:#aab1b8;
  --faint:#6b7178;
  --on-dark:#1e2024; --on-dark-mute:rgba(30,32,36,0.62);   /* текст на «колишньому чорному» (тепер сірому) → темний */
  /* Лінії. Світліші за макет: на темному тлі #2a2d33 майже не видно —
     ні рамок кнопок, ні розділювачів у таблицях (Ok, 04.08.2026) */
  --hairline-light:#3d4148;
  --hairline-strong:#50555d;
  --hairline-dark:rgba(255,255,255,0.18);
  --divider-soft:rgba(255,255,255,0.10);
  /* Семантика */
  --danger:#f04d5c; --danger-soft:rgba(240,77,92,0.14);
  --teal:#2fbf98; --teal-soft:rgba(47,191,152,0.14);
  --ring:0 0 0 3px rgba(244,244,244,0.10);
}
/* інпути/селекти — трохи підняті над фоном для контуру */
/* поля вводу — такий самий вигляд, як випадаючі списки (фон = фон сторінки #121316 + бордюр #3a3d42) (Ok, 15.07.2026) */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--canvas-light); border-color:var(--hairline-strong)}
/* hover-фони, що раніше брали «темні» токени (--body/--charcoal стали світлими текстовими) */
@media (hover:hover){
  html[data-theme="dark"] .btn:hover,
  html[data-theme="dark"] .oz-dark .oz-trigger:hover,
  html[data-theme="dark"] .dash-cal-btn:hover,
  html[data-theme="dark"] .oz-tm-ok:hover,
  html[data-theme="dark"] .wl-add-btn:hover{background:#c3c8cd!important;border-color:#c3c8cd!important}
}
html[data-theme="dark"] .btn:active{background:#c3c8cd}
/* картка «Чистий прибуток» — трохи світліша за звичайні картки (#25272c), щоб не зливалась */
html[data-theme="dark"] .card.net{background:#40444c}
/* «чорні» акценти на світлому фоні (бейдж рангу «2», лічильники, стовпчик/крапка «минулий період») → у темній робимо світлими, щоб не зливались з фоном */
html[data-theme="dark"] .rk.rk-2{background:#e6e8ea;color:#1e2024}
html[data-theme="dark"] .cal-head .cnt:not(.off):not(.zero){background:#e6e8ea;color:#1e2024}
html[data-theme="dark"] .rd-cnt{background:#e6e8ea;color:#1e2024}
html[data-theme="dark"] .rd-bar-prev,
html[data-theme="dark"] .fin-lg .fin-lg-out,
html[data-theme="dark"] .rd-lg-dot.prev{background:#aab1b8}
/* кнопка «Показати всіх» під таблицями — текст і кружечок були --canvas-dark (зливались) → світлі */
html[data-theme="dark"] .rd-expand-btn{color:var(--ink)}
html[data-theme="dark"] .rd-expand-ic{background:#3a3d42;color:#f4f4f4}
/* ── Виключення до «чорний→сірий»: структурний хром лишається темним (ре-скоуп токенів у піддереві) ── */
/* сайдбар навігації + нижня мобільна плашка — темні, зі світлим текстом (як було) */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .cal-botbar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .today-strip{--canvas-dark:#25272c; --on-dark:#f4f4f4; --on-dark-mute:rgba(244,244,244,0.72)}
/* теракотові картки використовують --on-dark як БІЛИЙ текст → повертаємо білий */
html[data-theme="dark"] .card.income,
html[data-theme="dark"] .card.hero,
html[data-theme="dark"] .card.fin-cash,
html[data-theme="dark"] .setup-card,
html[data-theme="dark"] .setup-more{--on-dark:#ffffff; --on-dark-mute:rgba(255,255,255,0.80)}
/* вибрана локація в сайдбарі: фон світло-сірий → підпис-адреса має бути темним (був білий, не читався) */
html[data-theme="dark"] .side-loc.on .la{color:rgba(30,32,36,0.62)}
/* плейсхолдер пошуку по меню — світлий приглушений (був темний, не видно) */
html[data-theme="dark"] .set-nav-srch input::placeholder{color:rgba(244,244,244,0.5)}
/* Синя пілюля статусу на темному тлі майже не читалась (#494fdf на #25272c —
   контраст ~1.9). У темній темі беремо світліший синій (Ok, 01.08.2026). */
html[data-theme="dark"] .tag.new{color:#8f95ff;background:rgba(143,149,255,0.16)}
/* жовтий #b09000 на темному теж тьмяний — беремо світліший */
html[data-theme="dark"] .tag.confirmed{color:#e0bd4f;background:rgba(224,189,79,0.16)}
/* картка-шапка співробітника/кабінету — темно-сіра (не світло-сіра як інші «чорні→сірі»), зі світлим текстом (Ok, 15.07.2026) */
html[data-theme="dark"] .pd-hero{--canvas-dark:#2a2d33; --on-dark:#f4f4f4; --on-dark-mute:rgba(244,244,244,0.66)}
/* обводка «сьогодні» в «Моєму графіку» — приглушена, темніша (була яскраво-біла --ink) */
html[data-theme="dark"] .msched-today{outline-color:#6b7178!important}
/* мобільний: кружок «···» на картці-шапці — у правий верхній кут (Ok, 15.07.2026) */
@media(max-width:743px),(max-height:500px){
  .pd-hero{position:relative}
  .pd-hero #prof-edit{position:absolute;top:16px;right:16px;margin:0!important}
}
/* календар у темній темі: лінії годин + напівпрозора шапка */
html[data-theme="dark"] .cal-wrap{--cl-hour:#24262b}
html[data-theme="dark"] .cal-headrow{background:rgba(18,19,22,0.9)}
html[data-theme="dark"] .cal-closed{background:#1b1c1f}   /* «поза зміною» — трохи світліше за темні колонки */
/* попап локації (графіки) — у темній темі темний, а не білий блок */
html[data-theme="dark"] #sch-loc-pop{background:#25272c}
html[data-theme="dark"] #sch-loc-pop button{color:#f4f4f4}
html[data-theme="dark"] #sch-loc-pop button.on{background:#3a3d42;color:#fff}
/* вихідні дні в ШІ-календарі — не білий блок, а делікатний помаранчевий тінт */
html[data-theme="dark"] .aic-day.wknd{background:rgba(243,147,50,0.12)}
/* «темні» картки (Картка у «Готівка vs картка» тощо) — світло-сіра заливка як світліший стовпчик графіка (Ok, 15.07.2026) */
html[data-theme="dark"] .card.dark{background:#aab1b8;border-color:#aab1b8}
html[data-theme="dark"] .card.dark .lbl{color:#1e2024;opacity:.75}
html[data-theme="dark"] .card.dark .val{color:#16181b}
html[data-theme="dark"] .card.dark .sub{color:#1e2024;opacity:.7}
html[data-theme="dark"] .card.dark .muted{color:rgba(0,0,0,0.5)!important}
/* Картка «Сума» в деталях транзакції у темній темі — світло-сіра, тому зелений робимо темнішим (читабельний) */
html[data-theme="dark"] .rd-sum{--teal:#08573b}
html[data-theme="dark"] .rd-sum .rb.paid{background:rgba(8,87,59,0.16)}
/* «Карта» (Рух коштів) — була чорна → світло-сіра */
html[data-theme="dark"] .card.fin-card{background:#aab1b8;border-color:#aab1b8}
html[data-theme="dark"] .card.fin-card .lbl,
html[data-theme="dark"] .card.fin-card .val,
html[data-theme="dark"] .card.fin-card .kdots,
html[data-theme="dark"] .card.fin-card .pm-bg{color:#1e2024}
html[data-theme="dark"] .card.fin-card .sub{color:#1e2024;opacity:.72}
/* Середнє завантаження (донат-картка) — була чорна → світло-сіра, темний донат/текст */
html[data-theme="dark"] .ut-dcard.ut-avg{background:#aab1b8}
html[data-theme="dark"] .ut-dcard.ut-avg .ut-dnm{color:#16181b}
html[data-theme="dark"] .ut-dcard.ut-avg .ut-donut-t{fill:#16181b}
html[data-theme="dark"] .ut-dcard.ut-avg .muted{color:rgba(0,0,0,0.65)}
html[data-theme="dark"] .ut-dcard.ut-avg .ut-donut circle{stroke:rgba(0,0,0,0.22)}
html[data-theme="dark"] .ut-dcard.ut-avg .ut-arc{stroke:#16181b}
/* іконка перемикача: місяць у світлій темі, сонце — у темній */
.th-sun{display:none}
html[data-theme="dark"] .th-moon{display:none}
html[data-theme="dark"] .th-sun{display:block}

/* ==================== BASE ==================== */
*{box-sizing:border-box}
/* Забороняємо мобільним браузерам самим роздувати текст: при повороті телефона в
   горизонталь Safari/Chrome збільшували шрифт у картках клієнтів, хоча в CSS він
   однаковий (Ok, 02.09.2026). На десктопі такої функції немає — там без змін. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--app-bg);color:var(--ink);
  font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.24px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.head h1,.modal h2,.rd-block-h,.side-h,.card .lbl{font-family:var(--font-head)}
h1,h2,h3{font-weight:500;letter-spacing:0}
.hidden{display:none!important}
/* Атрибут hidden має ховати завжди: власні display-правила (напр. .fpair{display:inline-flex})
   перебивали браузерний стиль, і «прихований» блок лишався на екрані (Ok, 02.08.2026) */
[hidden]{display:none!important}
a{color:var(--link);cursor:pointer;text-decoration:none}
button{cursor:pointer;font-family:inherit}

/* Inputs — базовий уніфікований стиль (text/select/textarea) */
input,select,textarea{
  font-family:inherit;font-size:14px;background:var(--canvas-light);
  border:1px solid var(--hairline-light);color:var(--ink);
  border-radius:var(--r-md);outline:none;
  transition:border-color .14s ease,box-shadow .14s ease}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
/* Явний доступний колір плейсхолдерів (браузерний дефолт блідий/різний) — --stone ≈ 5.5:1 на білому */
input::placeholder,textarea::placeholder{color:var(--stone);opacity:1}
/* Єдині бігунки на весь застосунок (Ok, 22.09.2026): тонкі, в кольорах теми, без
   системних стрілок і білих куточків — раніше частина скролів була системною
   (модалки, textarea, бічні списки) і в темній темі світилась білим. */
/* ВАЖЛИВО: scrollbar-width/scrollbar-color НЕ ставити разом із ::-webkit-scrollbar —
   у свіжих Chrome/Safari стандартні властивості перемагають і вимикають вебкіт-стилі
   (повзунок знову ставав системним, Ok, 22.09.2026). Стандартні — лише для браузерів
   без підтримки ::-webkit-scrollbar (Firefox). */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--hairline-light) transparent}
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--hairline-light);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--stone)}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
textarea::-webkit-resizer{background:transparent}
.field input:not([type=checkbox]):not([type=radio]):not([type=range]),.field select,.field textarea,.field>div{width:100%}

/* Text/number/etc + select — однакова висота, padding, шрифт, pill (як дропдауни/кнопки) */
input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input[type="time"],
select{
  height:48px;padding:0 20px;font-weight:400;border-radius:var(--r-full);
  border-color:var(--hairline-strong)}
/* textarea лишається rounded-rect (pill для багаторядкового виглядає погано) */
textarea{padding:12px 16px;min-height:88px;font-weight:400;line-height:1.45;border-radius:var(--r-md)}
/* Прибрати нативні стрілочки up/down у input[type=number] — замінюємо на кастомні chevron'и */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}
/* Поле з підказками (`list=`) — браузер малює свій чорний трикутник, чужий нашим
   полям вводу. Прибираємо: підказки все одно спливають при наборі (Ok, 04.09.2026) */
input[list]::-webkit-calendar-picker-indicator{display:none!important}

/* Кастомні стрілочки для number-полів у стилі Lucide chevron (як у dropdown) */
.oz-num{position:relative;display:inline-flex;vertical-align:middle}
.field .oz-num, .bk-card .oz-num{display:flex;width:100%}
.oz-num input[type="number"]{padding-right:44px;width:100%}
.oz-num-arrows{position:absolute;top:0;right:12px;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:0;pointer-events:none}
.oz-num-btn{background:transparent;border:none;padding:0;width:20px;height:14px;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;transition:opacity .12s ease}
.oz-num-btn svg{width:12px;height:12px}
@media (hover:hover){.oz-num-btn:hover{opacity:.7}}

/* ============================================================
   OZ-controls: custom select + date-picker (hydration via JS)
   Оригінальні <select>/<input type=date> сховані (style="display:none"
   ставить JS). Тут — стилі trigger'ів і popup'ів.
   ============================================================ */
.oz-select, .oz-date, .oz-time{position:relative;display:inline-flex;vertical-align:middle}
.field .oz-select, .field .oz-date, .field .oz-time, .bk-card .oz-select, .bk-card .oz-date, .bk-card .oz-time{display:flex;width:100%;min-width:0}
.field .oz-trigger, .bk-card .oz-trigger{width:100%;min-width:0;max-width:100%}
.oz-trigger{
  display:inline-flex;align-items:center;gap:8px;
  height:48px;padding:0 20px;
  background:var(--canvas-light);color:var(--ink);
  border:1px solid var(--hairline-strong);border-radius:var(--r-full);
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0.24px;
  cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
@media (hover:hover){.oz-trigger:hover{background:var(--surface-soft)}}
.oz-trigger:focus{outline:none}
.oz-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0;text-align:left}
.oz-label.oz-mute{color:var(--stone);font-weight:400}
/* Приглушений префікс перед назвою в пілюлі (бренд товару в накладній):
   «Luxina Daily Shampoo 400ml» — бренд світлий, назва напівжирна, як на
   скріні-зразку (Ok, 21.09.2026) */
.oz-bpre{color:var(--stone);font-weight:400}
.oz-label:has(.oz-bpre){font-weight:600}
.oz-chev{display:inline-flex;margin-left:auto;color:var(--ink)}
.oz-chev svg{width:14px;height:14px}
.oz-ic{display:inline-flex;color:var(--ink)}
.oz-ic svg{width:16px;height:16px}
.oz-sel-trigger{min-width:120px;justify-content:space-between}
/* Dark variant: чорна заливка */
.oz-dark .oz-trigger{background:var(--canvas-dark);color:var(--on-dark);border-color:var(--canvas-dark)}
@media (hover:hover){.oz-dark .oz-trigger:hover{background:var(--body)}}
.oz-dark .oz-chev, .oz-dark .oz-label{color:var(--on-dark)}
/* У чорних тригерах не використовуємо muted-стиль — щоб напис "Усі локації" (value="") був тієї ж товщини як "Місяць" */
.oz-dark .oz-label.oz-mute{color:var(--on-dark);font-weight:600}
/* Мінімалістичний варіант dateRange (використовується у дашборді) */
.dr.dash-mode .dr-hint, .dr.dash-mode .dr-presets{display:none}
/* Кнопка календаря на дашборді — тригер dateRange як іконочна pill-кнопка 48×48, чорна */
.dash-cal-btn{width:48px !important;height:48px !important;min-width:0 !important;padding:0 !important;
  border-radius:var(--r-full) !important;justify-content:center !important;gap:0 !important;font-size:0 !important;
  background:var(--canvas-dark) !important;color:var(--on-dark) !important;border-color:var(--canvas-dark) !important}
@media (hover:hover){.dash-cal-btn:hover{background:var(--body) !important;border-color:var(--body) !important}}
.dash-cal-btn svg{width:18px;height:18px}
/* Поля в inline-формі «Новий клієнт» — компактні, під висоту .btn.sm */
.bk-newcl-form input:not([type=checkbox]):not([type=radio]){height:34px;padding:0 14px;font-size:13px}
.bk-newcl-form .field>label{font-size:13px}
/* Popup праворуч від тригера */
.dash-cal-wrap .dr-pop{left:auto;right:0}
/* Зменшений відступ між сусідом зліва (period-select) і кнопкою календаря */
.dash-cal-wrap{margin-left:-6px}

/* «Що потребує уваги» — рядок pill-плашок у стилі badge-tag */
/* «з них» над назвою KPI-картки: показує, що Послуги/Товари/Сертифікати —
   це розклад Виручки, а не окремі показники (Ok, 08.08.2026) */
.kpi-of{display:block;font-size:11px;line-height:1;opacity:.55;margin-bottom:4px;font-weight:400}
.att-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.att-pill{display:inline-flex;align-items:center;gap:8px;
  background:var(--surface-soft);color:var(--ink);
  padding:6px 12px;border-radius:var(--r-full);
  font-size:13px;font-weight:400;line-height:1.4}
/* іконка тим самим кольором, що й текст пілюлі — без приглушення (Ok, 08.08.2026) */
.att-pill svg{flex-shrink:0}
.att-lbl{color:var(--mute)}
.att-val{color:var(--ink);font-weight:600}
.att-pill.att-empty{opacity:.5}
.att-pill.att-danger{background:var(--danger-soft);color:var(--danger)}
.att-pill.att-danger .att-lbl{color:var(--danger);opacity:.85}
.att-pill.att-danger .att-val{color:var(--danger)}
/* Живі пілюлі: клік веде туди, де це лагодять. Раніше це був мертвий текст,
   і блок лише перераховував заголовки того, що йде нижче (Ok, 08.08.2026). */
/* font-family, а не скорочення font: — воно скидало й розмір, і пілюлі роздувались
   до 16px замість 13px (Ok, 08.08.2026) */
.att-pill.att-act{border:0;font-family:inherit;font-size:13px;font-weight:400;
  line-height:1.4;cursor:pointer;text-align:left}
@media (hover:hover){.att-pill.att-act:hover{filter:brightness(0.96)}}
.att-pill.att-warn{background:rgba(176,144,0,0.12);color:#b09000}
.att-pill.att-warn .att-lbl{color:#b09000;opacity:.85}
.att-pill.att-warn .att-val{color:#b09000}
html[data-theme="dark"] .att-pill.att-warn{color:#e0bd4f}
html[data-theme="dark"] .att-pill.att-warn .att-lbl,
html[data-theme="dark"] .att-pill.att-warn .att-val{color:#e0bd4f}
/* «Все під контролем» — теж відповідь на питання «як справи», тому не порожнеча */
.att-pill.att-ok{background:var(--teal-soft);color:var(--teal)}
.att-pill.att-ok .att-lbl{color:var(--teal)}
.att-pill.att-ok svg{width:14px;height:14px}

/* Топ-локацій / Топ-майстрів — картка навколо таблиці */
.rd-table-card{background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:24px;margin-top:16px}
/* Бейдж рангу у топ-майстрах — кружечок лише для 1/2/3 */
.rk{display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:14px;font-weight:600;line-height:1;min-width:24px}
.rk.rk-1, .rk.rk-2, .rk.rk-3{width:28px;height:28px;border-radius:50%;color:var(--on-dark)}
.rk.rk-1{background:#C25238}
.rk.rk-2{background:#171819}
.rk.rk-3{background:#8B8B8C}
/* Кнопка «Показати всіх» під таблицею — стрілка у чорному кружечку + текст */
.rd-expand-btn{display:flex;align-items:center;gap:5px;margin:16px auto 0;
  background:transparent;border:none;color:var(--canvas-dark);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0}
@media (hover:hover){.rd-expand-btn:hover{opacity:.8}}
.rd-expand-btn > span:last-child{transform:translateY(1px)}
.rd-expand-ic{width:18px;height:18px;border-radius:50%;background:var(--canvas-dark);
  color:var(--on-dark);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.rd-expand-ic svg{width:9px;height:9px}
.rd-table-card > table{border:none;border-radius:0;background:transparent;padding:0}
.rd-table-card > table tr:last-child td{border-bottom:none}

/* ============================================================
   Графік «Тренд виручки» — Y-axis + пари стовпчиків (сірий/чорний)
   ============================================================ */
.rd-chart-box{padding:24px;background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);position:relative;margin-top:24px}
.rd-legend{display:flex;gap:24px;margin-bottom:24px;font-size:14px;color:var(--body)}
.rd-lg{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.rd-lg-dot{width:14px;height:14px;border-radius:50%;display:inline-block}
.rd-lg-dot.prev{background:#171819}
.rd-lg-dot.curr{background:#C25238}
.rd-lg-dot.net{background:#d5d5da}
/* --rd-y-w — ширина колонки з підписами осі. Винесена у змінну, бо на неї спираються
   ще й сітка та лінія середньої (position:absolute left) — інакше вони роз'їжджаються
   з підписами. На планшеті звужуємо (див. медіа нижче) — Ok, 26.08.2026 */
.rd-chart{--rd-y-w:64px;
  position:relative;display:grid;grid-template-columns:var(--rd-y-w) 1fr;gap:0;height:330px}
.rd-y-axis{display:flex;flex-direction:column;justify-content:space-between;
  padding-right:12px;text-align:right;font-size:12px;color:var(--stone);font-weight:500;
  padding-bottom:28px;font-variant-numeric:tabular-nums}
.rd-y-axis span{line-height:1;white-space:nowrap}
.rd-grid-lines{position:absolute;left:var(--rd-y-w,64px);right:0;top:0;bottom:28px;
  display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.rd-grid-lines div{border-top:1px dashed var(--hairline-light);height:0}
/* Середня за день: суцільна теракотова лінія поверх сітки, підпис праворуч (Ok, 08.08.2026) */
.rd-avg{position:absolute;left:var(--rd-y-w,64px);right:0;height:0;border-top:1px dashed var(--link);
  pointer-events:none;z-index:0}   /* під стовпчиками: вони мають z-index 1 */
.rd-avg span{position:absolute;right:0;top:-18px;font-size:11px;color:var(--link);
  background:var(--surface-card);padding:0 4px;white-space:nowrap}
.rd-bars{position:relative;display:flex;align-items:flex-end;gap:var(--rd-gap,12px);z-index:1;
  overflow-x:auto;overflow-y:hidden}  /* багато днів → горизонтальний скрол замість вилазання за межі */
.rd-col{flex:1;min-width:var(--rd-col-min,46px);display:flex;flex-direction:column;align-items:center}
/* Щільність графіка під кількість періодів (Ok, 05.08.2026): від rd-d2 мінімальної
   ширини немає — колонки ділять місце порівну, тому нічого не ховається у скрол */
.rd-bars.rd-d1{--rd-col-min:46px;--rd-gap:12px;--rd-pad:6px;--rd-bar-min:8px}
.rd-bars.rd-d2{--rd-col-min:0px;--rd-gap:8px;--rd-pad:6px;--rd-bar-min:8px}
.rd-bars.rd-d3{--rd-col-min:0px;--rd-gap:5px;--rd-pad:4px;--rd-bar-min:6px}
.rd-bars.rd-d4{--rd-col-min:0px;--rd-gap:3px;--rd-pad:2px;--rd-bar-min:4px}
.rd-bars.rd-d5{--rd-col-min:0px;--rd-gap:2px;--rd-pad:1px;--rd-bar-min:3px}
/* коли підписи прорідили — показуємо їх повністю, вони заходять на порожніх сусідів;
   приховані лишаються обрізаними по колонці, інакше розтягують ширину графіка */
.rd-bars.rd-thin .rd-x-lbl{overflow:visible;max-width:none}
.rd-bars.rd-thin .rd-x-lbl.rd-lbl-off,
.rd-x-lbl.rd-lbl-off{visibility:hidden;max-width:100%;width:100%;overflow:hidden}
/* крайні підписи тиснемо всередину, інакше половина дати зрізається краєм картки */
.rd-bars.rd-thin .rd-col:first-child .rd-x-lbl{align-self:flex-start}
.rd-bars.rd-thin .rd-col:last-child .rd-x-lbl{align-self:flex-end}
/* 302px = висота плоту (330 − 28px зона підписів дат під лінією 0) — стовпчики точно по сітці */
.rd-pair{display:flex;align-items:flex-end;gap:8px;height:302px;width:100%;justify-content:center;padding:0 var(--rd-pad,6px)}
.rd-bar{flex:1;min-width:var(--rd-bar-min,8px);max-width:64px;border-radius:32px;min-height:2px;cursor:pointer;transition:opacity .14s ease}
/* день без виручки — ледь помітна риска, щоб не читався як маленький продаж */
.rd-bar.rd-bar-zero{opacity:.3}
.rd-bar-prev{background:#171819}
.rd-bar-curr{background:#C25238}
@media (hover:hover){.rd-bar:hover{opacity:.85}}
.rd-x-lbl{height:28px;display:flex;align-items:flex-end;justify-content:center;font-size:13px;color:var(--mute);font-weight:500;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Tooltip */
.rd-tip{position:absolute;transform:translate(-50%,-100%);background:var(--canvas-dark);
  color:var(--on-dark);padding:8px 14px;border-radius:var(--r-md);font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,0.20);pointer-events:none;z-index:10;min-width:120px}
.rd-tip[hidden]{display:none}
.rd-tip-t{font-size:12px;opacity:.72;margin-bottom:2px}
.rd-tip-v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.rd-tip-d{font-size:12px;opacity:.72;margin-top:2px}

/* Сьогоднішня дата: обведення (не конфліктує з обраним днем) */
.dr-d.dr-today{box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:600}
.dr-d.dr-today.dr-edge{box-shadow:none}
.oz-dt-day.today{box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:600}
.oz-dt-day.today.on{box-shadow:none}

/* Hover-preview проміжку у dr-picker */
.dr-d.dr-hover-in{background:var(--surface-soft)}
.dr-d.dr-hover-edge{background:var(--canvas-dark);color:var(--on-dark);font-weight:600}
.oz-dt-trigger{min-width:180px}
.field .oz-trigger, .filters .oz-trigger.oz-sel-trigger, .bk-card .oz-trigger{flex:1}

/* Popup — спільний контейнер */
.oz-pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:200;
  min-width:100%;background:var(--canvas-light);
  border:1px solid var(--hairline-light);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
  padding:6px}

/* Select popup — мінімум ширини тригера, росте під найдовшу опцію, але в межах viewport */
.oz-sel-pop{max-height:320px;overflow-y:auto;min-width:100%;max-width:min(360px,calc(100vw - 24px));box-sizing:border-box}
/* Inline search: перетворюємо тригер oz-select у поле вводу під час відкриття */
/* Специфічність вища за загальне input[type=text] (0,1,1) — інакше воно нав'язує padding:0 20px,
   і текст пошуку стрибає вправо на 20px при фокусі (поверх падінга тригера). */
/* width:0 обовʼязково: у списку з 8+ пунктів тригер на час вибору стає полем пошуку,
   а <input> має власну «природну» ширину (~20 символів). Через неї кнопка при
   натисканні стрибком роздувалась удвічі (Ok помітив, 26.08.2026). `flex:1` сам по собі
   не рятує — він ділить вільне місце, але у розрахунок ширини тригера інпут усе одно
   входив своєю природною шириною. */
.oz-trigger input.oz-search-inline{
  border:none;outline:none;background:transparent;flex:1;min-width:0;width:0;border-radius:0;
  height:100%;padding:0;margin:0;font:inherit;font-size:14px;font-weight:400;color:var(--ink)}
.oz-search-inline::placeholder{color:var(--stone);opacity:1}
/* Опції в один рядок, повний текст без обрізання */
.oz-sel-pop .oz-item{white-space:nowrap}
.oz-item{
  display:block;width:100%;text-align:left;background:transparent;
  border:none;border-radius:var(--r-sm);
  padding:14px 16px;font:inherit;font-size:14px;color:var(--ink);
  cursor:pointer;transition:background .12s ease}
@media (hover:hover){.oz-item:hover{background:var(--surface-soft)}}
.oz-item.on{background:var(--canvas-dark);color:var(--on-dark);font-weight:600}
.oz-item.off{color:var(--faint);cursor:not-allowed}

/* Date-picker popup */
.oz-dt-pop{width:288px;padding:14px}
.oz-dt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.oz-dt-title{font-size:14px;font-weight:600;color:var(--ink)}
.oz-dt-nav{
  width:32px;height:32px;border-radius:var(--r-full);
  background:var(--surface-soft);border:none;color:var(--ink);
  font-size:16px;line-height:1;cursor:pointer}
@media (hover:hover){.oz-dt-nav:hover{background:var(--faint)}}
.oz-dt-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.oz-dt-dow span{text-align:center;font-size:13px;color:var(--stone);font-weight:600}
.oz-dt-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
/* Особистий кабінет власника: дві рівні колонки карток (Ok, 19.08.2026).
   На всю ширину форма пароля розтягувалась і сторінка виглядала порожньою. */
.cab-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
.cab-col{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(max-width:900px){.cab-cols{grid-template-columns:1fr}}
/* Картка «Безпека» (Ok, 22.08.2026): рядок «назва — кнопка», форма пароля розкривається за кнопкою */
.sec-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--hairline-light);cursor:pointer}
.sec-row:first-of-type{padding-top:0}
.sec-row-static{cursor:default}   /* рядок із перемикачем нічого не розгортає */
.sec-row:last-of-type{border-bottom:0;padding-bottom:0}
/* Замість кнопок «Змінити пошту/пароль» — теракотова стрілка (Ok, 22.08.2026):
   рядок читається як назва + дія, а не як два написи один навпроти одного. */
.sec-arrow{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;
  width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;
  color:var(--link);cursor:pointer}
.sec-arrow svg{width:20px;height:20px;transition:transform .18s ease}
.sec-arrow.on svg{transform:rotate(90deg)}
/* Без підсвічування під стрілкою на ховері — Ok просив прибрати (22.08.2026) */
/* Кнопки у формах «Безпеки» стоять праворуч, пояснення — окремим рядком над ними (Ok, 22.08.2026) */
.sec-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px}
.sec-hint{font-size:13px;line-height:1.45;margin-top:8px}
/* Шапка зі стрілкою НЕ переносить її на новий рядок навіть на телефоні: загальне мобільне
   правило .rd-block-h{flex-wrap:wrap} перебиваємо парою класів (Ok, 22.08.2026) */
.rd-block-h.nf-head{flex-wrap:nowrap}
.nf-head > span{min-width:0}
/* «Моя зарплата»: вибір року й місяця живе в рядку заголовка (Ok, 22.08.2026) */
/* До блоку доданий і клас `filters` — лише щоб на телефоні спрацював загальний механізм
   «підпис усередину пілюлі». Десктопний вигляд лишається як був, тому базові властивості
   `.filters` (gap 8, margin-bottom 24, без margin-left:auto) тут перебиті (Ok, 04.09.2026). */
.head .sal-per.filters{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-left:auto;margin-bottom:0}
.sal-per .fpair{gap:8px;color:var(--stone);font-size:14px}
@media(max-width:743px),(max-height:500px){
  .head .sal-per.filters{width:100%;margin-left:0;gap:8px}
  /* пілюлі по вмісту, як на інших сторінках: розтягнуті на пів екрана вони давали
     дірку між підписом і значенням (правило фільтрів, [[crm-filter-row-rule]]) */
  .sal-per .fpair{flex:0 1 auto;min-width:0}
  .sal-per select{flex:0 1 auto;min-width:0}
}
/* «Моя зарплата» СТОЯЧИ: «До виплати» і «Зароблено» в один ряд, «Виплачено» під ними
   на всю ширину (Ok, 04.09.2026). Просвіт на телефоні 14px, тож парі треба 50% − 7px:
   із базовим min-width:calc(50% − 6px) пара просить на 2px більше, ніж є, і розпадається. */
@media (max-width:743px) and (orientation:portrait){
  .ms-cards > .card{flex:1 1 calc(50% - 7px);min-width:0}
  .ms-cards > .card:nth-child(3){flex:1 1 100%}
}
/* Телефон ЛЕЖАЧИ: усі три в один ряд — ширини вистачає, а висота на вагу золота. */
@media (max-height:500px) and (orientation:landscape){
  .ms-cards > .card{flex:1 1 calc(33.333% - 10px);min-width:0}
}
/* «Мій графік»: керування окремим рядком над карткою календаря (Ok, 22.08.2026) */
.msch-ctl{margin-bottom:12px}
/* «Мій графік»: навігація місяцями — круглі стрілки + назва тією ж заливкою (Ok, 22.08.2026) */
.msb-nav{display:flex;align-items:center;gap:8px}
.msb-nav .msb-ico{width:48px;height:48px;min-width:48px;padding:0;border-radius:50%}
.msb-nav .msb-ico svg{width:16px;height:16px}
.msb-title{display:inline-flex;align-items:center;height:48px;padding:0 24px;font-size:15px;
  font-weight:600;letter-spacing:0.24px;border-radius:var(--r-full);
  background:var(--canvas-light);color:var(--ink);border:1px solid var(--hairline-strong)}
/* Рядок керування «Мого графіка»: ліворуч перемикач місяця, праворуч підсумок */
.msb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.msb-head.msb-head-ctl{width:100%}
/* На телефоні перемикач місяця займав чверть екрана. Зводимо до того ж розміру, що
   решта фільтрів і кнопок у мобільній версії — 40px / 14px (Ok, 04.09.2026).
   Підсумок «6 змін · 60 год» тримаємо в ТОМУ Ж рядку: на 360px сумарна ширина
   не влазила й він зʼїжджав на власний рядок (Ok, 04.09.2026). */
@media(max-width:743px),(max-height:500px){
  .msb-head{flex-wrap:nowrap;gap:6px}
  .msb-nav{gap:4px}
  .msb-nav .msb-ico{width:40px;height:40px;min-width:40px}
  .msb-nav .msb-ico svg{width:14px;height:14px}
  .msb-title{height:40px;padding:0 12px;font-size:14px;white-space:nowrap}
  /* `.msb-head .msb-sum` — на клас вагоміше за `.msb-sum{flex-wrap:wrap}` нижче за файлом.
     З однаковою вагою вигравало те правило і підсумок ламався в стовпчик. */
  .msb-head .msb-sum{gap:10px;flex-wrap:nowrap;white-space:nowrap;font-size:13px;min-width:0}
  .msb-head .msb-sum b{font-size:15px;margin-right:3px}
  /* перелік локацій (є лише коли зміни на кількох) — обрізаємо, а не ламаємо рядок */
  .msb-head .msb-sum > .muted{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
/* «Мій графік» використовує клітинки з «Графіків», але це перегляд, а не редагування:
   ховер не потрібен, а години на телефоні мають лишатись видимими (Ok, 22.08.2026) */
.msched-cal .sch-mcell{cursor:default}
@media (hover:hover){.msched-cal .sch-mcell:hover{background:var(--canvas-light)}
  .msched-cal .sch-mcell.shift:hover{background:var(--canvas-dark)}}
.msched-cal .iv-s{display:none}   /* скорочений час — тільки на телефоні */
@media(max-width:743px),(max-height:500px){
  /* Робимо як у «Графіках» (Ok, 04.09.2026): у клітинці лишається число дня, а вид дня
     читається за кольором — підписи «Вихідний», «Бажаний вихідний», «Лікарняний»,
     «Відпустка» в 37px не влазять і ламались посеред слова («Бажа/ний/вихід/ний»).
     `.off` тут НЕ повертаємо в display:flex — його ховає загальне мобільне правило
     `.sch-mcell .off{display:none}` нижче за файлом. Єдина відмінність від «Графіків» —
     години робочого дня лишаються видимі, як просив Ok 22.08.2026. */
  .msched-cal .sch-mcell .bd,.msched-cal .sch-mcell.shift .iv{display:flex}
  .msched-cal .sch-mcell{min-height:56px;padding:6px 2px}
  /* .msched-cal .sch-mcell.shift .iv — рівно на клас вагоміше за `.sch-mcell.shift .iv{font-size:13px}`
     нижче за файлом. З однаковою вагою вигравало те правило, і час лишався 13px (Ok, 04.09.2026). */
  .msched-cal .sch-mcell.shift .iv{font-size:11px;line-height:1.2;text-align:center;
    overflow-wrap:anywhere}
  /* клітинка ~37px: повний «10:00–20:00» не влазить, показуємо «10–20» */
  .msched-cal .sch-mcell .iv-l{display:none}
  .msched-cal .sch-mcell .iv-s{display:inline}
}
/* Телефон ЛЕЖАЧИ: клітинка вже ~108px, повний «10:00–20:00» вміщається — показуємо
   час із хвилинами (Ok, 04.09.2026) */
@media (max-height:500px) and (orientation:landscape){
  .msched-cal .sch-mcell .iv-l{display:inline}
  .msched-cal .sch-mcell .iv-s{display:none}
}
.msched-cal .msched-loc{opacity:.75}
/* Бажаний вихідний майстра — теракотова заливка клітинки, як виділення в «Графіках»
   (Ok, 22.08.2026: спершу зробили червоною, потім він обрав бренд-теракоту).
   Лікарняний і відпустка лишають свої кольори з «Графіків». */
.msched-cal .sch-mcell.msched-off:not([class*="abs-"]){background:var(--link);border-color:var(--link);color:#fff}
.msched-cal .sch-mcell.msched-off:not([class*="abs-"]) .dn{color:#fff}
.msched-cal .sch-mcell.msched-off:not([class*="abs-"]) .off{color:rgba(255,255,255,0.9)}
@media (hover:hover){.msched-cal .sch-mcell.msched-off:not([class*="abs-"]):hover{background:var(--link);border-color:var(--link)}}
/* у темній темі загальне правило .sch-mcell:not(.shift):not(.sel) вагоміше — перекриваємо явно */
html[data-theme="dark"] .msched-cal .sch-mcell.msched-off:not([class*="abs-"]){background:var(--link);border-color:var(--link);color:#fff}
.msched-cal .sch-mcell[class*="abs-"] .off{color:inherit}
/* «Мій графік»: плашка планування — той самий вигляд, що смужка вибору в «Графіках» (Ok, 22.08.2026) */
.msb-plan .cnt{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* у режимі відмічання день клікається */
.msched-cal .sch-mcell.msched-pick{cursor:pointer}
@media (hover:hover){.msched-cal .sch-mcell.msched-pick:hover{box-shadow:inset 0 0 0 2px var(--link)}
  /* на вже відміченому дні теракотову обводку не видно на теракотовій заливці */
  .msched-cal .sch-mcell.msched-off.msched-pick:not([class*="abs-"]):hover{box-shadow:inset 0 0 0 2px #fff}}
.msb-plan-f{display:flex;align-items:center;gap:10px;font-size:14px}
/* підказка тим самим кеглем і кольором, що підпис степера, і притиснута до кнопки праворуч (Ok, 22.08.2026) */
.msb-plan-hint{font-size:14px;line-height:1.4;margin-left:auto;text-align:right}
.stepper{display:inline-flex;align-items:center;gap:6px}
/* Степер на плашці: «−», поле і «+» одного кольору й однієї форми — круглі краї (Ok, 22.08.2026).
   Клас .ghost тут не використовуємо: правило .sch-msbar .btn.ghost робило кнопки напівпрозорими. */
.sch-msbar .stepper .stepper-b,
.sch-msbar .stepper input{background:var(--surface-card);color:var(--ink);border:none;
  height:36px;border-radius:var(--r-full);font-weight:600}
.sch-msbar .stepper .stepper-b{width:36px;min-width:36px;padding:0;font-size:18px;line-height:1}
.sch-msbar .stepper input{width:64px;text-align:center;font-size:16px;-moz-appearance:textfield}
.sch-msbar .stepper input::placeholder{color:var(--stone)}
@media (hover:hover){.sch-msbar .stepper .stepper-b:hover{background:var(--surface-soft);color:var(--ink)}}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:743px),(max-height:500px){
  .msb-plan .cnt{gap:10px}
  .msb-plan-f{flex:1 0 100%;justify-content:space-between}
  .msb-plan-hint{margin-left:0;text-align:left}
  .msb-plan > .btn{flex:1 1 100%}
}
/* «Мій графік»: підсумок місяця над календарем (Ok, 22.08.2026) */
.msb-sum{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;margin:0 2px 12px;
  font-size:14px;color:var(--stone)}
.msb-sum b{font-size:17px;color:var(--ink);margin-right:4px}
/* коли підсумок стоїть у рядку керування (на місці колишнього перемикача) — без нижнього відступу */
.msch-ctl .msb-sum{margin:0}
/* Поточна дата на Головній майстра — праворуч у тому ж рядку, що зміни й години (Ok, 24.08.2026) */
.msb-today{margin-left:auto}
/* Графік на Головній майстра — одна картка: підсумок, розділова лінія, сітка.
   Сітка всередині віддає свою рамку й підкладку картці, щоб не було рамки в рамці. */
.mw-sched{background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:var(--r-card,14px);padding:14px 16px}
.mw-sched .msb-sum{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--hairline-light)}
/* `html` у селекторі — щоб перебити темне правило для .sch-cal нижче за файлом */
html .mw-sched .sch-cal{background:transparent;border:0;border-radius:0;padding:0}
/* Шапка картки «Сповіщення»: назва + стрілка згортання, натискається вся (Ok, 22.08.2026) */
.nf-head{display:flex;align-items:center;gap:12px;cursor:pointer}
.nf-head .sec-arrow{margin-left:auto}
/* Рядки картки «Сповіщення» в кабінеті (Ok, 22.08.2026) */
.nf-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer}
.nf-row b{font-size:14px}
.nf-row input{margin-top:3px}
.nf-desc{font-size:13px;margin-top:2px}
.nf-off{opacity:.55;cursor:default}
/* «очікує підтвердження: …» — пошта вже замовлена, але ще не застосована */
.sec-pending{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-size:11px;font-weight:600;background:var(--surface-soft);color:var(--link)}
/* Око «показати пароль» всередині поля */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:40px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:inline-flex;
  align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;
  background:none;color:var(--muted);cursor:pointer}
.pw-eye .mi{width:18px;height:18px}
.pw-eye.on{color:var(--link)}
@media(hover:hover){.pw-eye:hover{color:var(--ink)}}
/* Список входів лежить у власній підкладці картки, тож рамка самої таблиці —
   це друга рамка навколо першої. Прибираємо (Ok, 22.08.2026). */
#cab-log table{border:0;border-radius:0;background:transparent;padding:0}
#cab-log table tr:last-child td{border-bottom:0}
/* Незнайомий пристрій у списку входів — щоб чужий вхід не доводилось вишукувати очима */
.sec-new-dev{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  font-size:11px;font-weight:600;white-space:nowrap;background:var(--danger-soft);color:var(--danger)}
/* Хрестик «прибрати фото» на кружечку аватара (Ok, 19.08.2026): маленький, спокійний,
   червоніє лише під курсором — червоне коло поверх обличчя виглядало грубо. */
.ava-del{position:absolute;top:8px;right:8px;width:22px;height:22px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--hairline-strong);
  background:var(--surface-card);color:var(--stone);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.18);transition:color .14s ease,border-color .14s ease}
.ava-del svg{width:12px;height:12px}
@media (hover:hover){.ava-del:hover{color:var(--danger);border-color:var(--danger)}}
/* Дату можна набрати цифрами прямо в полі (Ok, 19.08.2026): усередині пілюлі —
   звичайний ввід без власної рамки, тому поле виглядає як раніше. */
/* трохи вужчі поля з боків: у двоколонковій формі «20.05.1990» інакше не влазить */
.oz-dt-trigger{padding:0 14px;gap:6px}
/* два класи в селекторі — щоб перебити загальні правила для input (у т.ч. темної теми),
   інакше всередині пілюлі малювалась друга пілюля з власним фоном */
.oz-trigger .oz-dt-field{flex:1 1 auto;width:10ch;min-width:10ch;height:auto;
  background:transparent;border:none;border-radius:0;padding:0;margin:0;outline:none;
  font:inherit;color:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums}
.oz-trigger .oz-dt-field::placeholder{color:var(--stone);font-weight:400}
.oz-trigger .oz-dt-field.err{color:var(--err)}
/* Швидкий вибір місяця й року: назва в шапці — кнопка, під нею сітка 3×4 (Ok, 19.08.2026) */
.oz-dt-title-btn{background:transparent;border:none;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink);cursor:pointer;padding:4px 10px;border-radius:var(--r-full)}
@media (hover:hover){.oz-dt-title-btn:hover{background:var(--surface-soft)}}
.oz-dt-grid.oz-dt-mgrid{grid-template-columns:repeat(3,1fr);gap:6px}
.oz-dt-cell{height:38px;border-radius:var(--r-full);font-size:13.5px}
.oz-dt-empty{visibility:hidden}
.oz-dt-day{
  display:flex;align-items:center;justify-content:center;
  height:34px;border-radius:var(--r-full);
  background:transparent;border:none;color:var(--ink);
  font-size:13px;font-weight:400;cursor:pointer;font-variant-numeric:tabular-nums;
  transition:background .12s ease}
@media (hover:hover){.oz-dt-day:hover{background:var(--surface-soft)}}
.oz-dt-day.on{background:var(--canvas-dark);color:var(--on-dark);font-weight:600}
.oz-dt-day.off{color:var(--faint);cursor:not-allowed}
@media (hover:hover){.oz-dt-day.off:hover{background:transparent}}
.oz-dt-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--hairline-light)}
.oz-dt-foot button{
  background:transparent;border:none;color:var(--link);
  font-size:14px;font-weight:600;cursor:pointer;padding:6px 8px}
@media (hover:hover){.oz-dt-foot button:hover{color:var(--ink)}}

/* Time-picker popup */
.oz-tm-trigger{min-width:130px}
.oz-tm-pop{width:220px;padding:0;display:flex;flex-direction:column}
.oz-tm-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px;
  max-height:240px;overflow:hidden}
.oz-tm-col{display:flex;flex-direction:column;gap:2px;overflow-y:auto;
  max-height:224px;min-height:0}
.oz-tm-cell{
  padding:8px 14px;background:transparent;border:none;border-radius:var(--r-sm);
  font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:center;
  font-variant-numeric:tabular-nums}
@media (hover:hover){.oz-tm-cell:hover{background:var(--surface-soft)}}
.oz-tm-cell.on{background:var(--canvas-dark);color:var(--on-dark);font-weight:600}
.oz-tm-foot{display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;border-top:1px solid var(--hairline-light)}
.oz-tm-val{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.oz-tm-ok{background:var(--canvas-dark);color:var(--on-dark);border:none;
  border-radius:var(--r-full);height:36px;padding:0 16px;
  font-size:14px;font-weight:600;cursor:pointer}
@media (hover:hover){.oz-tm-ok:hover{background:var(--body)}}

/* ============================================================
   Custom checkbox + radio (CSS-only, без JS)
   ============================================================ */
input[type="checkbox"], input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:0 0 20px;
  background:var(--canvas-light);border:1.5px solid var(--hairline-strong);
  cursor:pointer;position:relative;vertical-align:middle;
  transition:background .12s ease,border-color .12s ease}
input[type="checkbox"]{border-radius:50%;padding:0}
input[type="radio"]{border-radius:50%;padding:0}
@media (hover:hover){input[type="checkbox"]:hover, input[type="radio"]:hover{border-color:var(--ink)}}
input[type="checkbox"]:checked{background:var(--canvas-dark);border-color:var(--canvas-dark)}
/* обране: чорний круг з білим кружечком по центру (Ok, 10.07.2026 — замість галочки по всій CRM) */
input[type="checkbox"]:checked::after{
  content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--on-dark);left:50%;top:50%;transform:translate(-50%,-50%)}
input[type="radio"]:checked{border-color:var(--canvas-dark);border-width:6px}
input[type="checkbox"]:disabled, input[type="radio"]:disabled{
  border-color:var(--faint);cursor:not-allowed;background:var(--surface-soft)}

/* ============================================================
   Уніфіковані вкладки (tabs) — застосовуються скрізь
   ============================================================ */
.tabs, [role="tablist"]{
  display:inline-flex;gap:8px;padding:4px;background:var(--surface-soft);
  border-radius:var(--r-full);align-items:center}
.tabs .tab, [role="tab"]{
  background:transparent;border:none;color:var(--mute);
  font:inherit;font-size:14px;font-weight:600;letter-spacing:0.24px;
  padding:8px 16px;height:36px;border-radius:var(--r-full);cursor:pointer;
  display:inline-flex;align-items:center}
@media (hover:hover){.tabs .tab:hover, [role="tab"]:hover{color:var(--ink)}}
.tabs .tab.on, .tabs .tab[aria-selected="true"], [role="tab"][aria-selected="true"]{
  background:var(--canvas-dark);color:var(--on-dark)}

/* Date-range picker */
.dr{position:relative;display:inline-flex;align-items:center;gap:6px}
/* Стрілки ‹ › біля фільтра «Період» — зсув періоду назад/вперед */
.dr-shift{width:48px;height:48px;min-width:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:20px;line-height:1;background:var(--canvas-light);color:var(--ink);
  border:1px solid var(--hairline-strong);border-radius:var(--r-full);cursor:pointer;transition:background .12s ease}
@media (hover:hover){.dr-shift:hover{background:var(--surface-soft)}}
.field .dr{display:flex;width:100%}
.field .dr .dr-trigger{flex:1;min-width:0}
.dr-trigger{
  font-family:inherit;font-size:14px;font-weight:600;background:var(--canvas-light);
  border:1px solid var(--hairline-strong);color:var(--ink);border-radius:var(--r-full);
  padding:0 20px;height:48px;min-width:0;text-align:left;cursor:pointer;
  white-space:nowrap;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:8px}
@media (hover:hover){.dr-trigger:hover{background:var(--surface-soft)}}
.dr-trigger:focus{outline:none;background:var(--surface-soft)}
/* Пресети періоду — 1-в-1 стиль футера oz-пікера («Очистити»/«Сьогодні» на Календарі) */
.dr-presets{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--hairline-light)}
.dr-presets button{font-family:inherit;background:transparent;border:none;color:var(--link);
  font-size:14px;font-weight:600;cursor:pointer;padding:6px 8px}
@media (hover:hover){.dr-presets button:hover{color:var(--ink)}}
.dr-pop{position:absolute;z-index:90;top:calc(100% + 6px);left:0;background:var(--canvas-light);
  border:1px solid var(--hairline-light);border-radius:var(--r-md);padding:14px;width:300px;
  box-shadow:0 8px 24px rgba(25,28,31,0.10)}
/* Мобільний: календар не ширший за екран; ozPositionPop у dateRange притискає його вправо, щоб не вилазив (Ok, 14.07.2026) */
@media(max-width:743px),(max-height:500px){.dr-pop{width:min(300px,calc(100vw - 20px))}}
.dr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px;font-weight:500}
.dr-nav{background:var(--surface-soft);border:none;border-radius:50%;
  width:32px;height:32px;cursor:pointer;color:var(--ink);font-size:16px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.dr-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.dr-dow span{text-align:center;font-size:13px;color:var(--stone);font-weight:600}
.dr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dr-d{display:flex;align-items:center;justify-content:center;height:34px;border-radius:var(--r-full);
  cursor:pointer;font-size:13px;user-select:none}
@media (hover:hover){.dr-d:hover{background:var(--surface-soft)}}
.dr-empty{visibility:hidden;cursor:default}
.dr-in{background:var(--surface-soft)}
.dr-edge{background:var(--canvas-dark);color:var(--on-dark);font-weight:600}
.dr-edge.dr-edge-end{background:#C25238}
.dr-sel{box-shadow:inset 0 0 0 2px var(--canvas-dark);font-weight:600}
.dr-hint{font-size:13px;color:var(--stone);margin-top:8px;text-align:center}
@media (hover:hover){.int-card:hover{border-color:var(--ink)}}

/* ==================== LOGIN ==================== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--app-bg)}
.login-card{background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:32px;width:320px;display:flex;flex-direction:column;gap:14px}
.logo{font-weight:500;font-size:24px;letter-spacing:-0.24px;text-align:center;margin-bottom:8px;color:var(--ink)}
.logo span{color:var(--primary)}
/* SVG-лого (наш) у логіні/реєстрації — currentColor бере --ink (тёмне «CRM» на світлій картці) */
.logo .brand-svg{height:34px;width:auto;display:block;margin:0 auto}
.logo.small{font-size:20px;text-align:left;margin:0;height:48px;display:flex;align-items:center;color:var(--on-dark)}
/* Логотипи (SVG) — довге і коротке */
/* Нове лого CEGLA — пропорції 435×112, тож при висоті 22px воно було б дрібним (Ok, 17.08.2026) */
.logo.small .logo-full{display:block;height:38px;width:auto}
.logo.small .logo-short{display:none;height:28px;width:28px}
.auth-switch{text-align:center;font-size:13px;color:var(--stone);margin-top:2px}
/* Галочка «не питати на цьому пристрої» на екрані коду входу (Ok, 22.08.2026) */
.auth-chk{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--stone);cursor:pointer}
.auth-chk input{width:auto;margin:0}
.auth-switch a{color:var(--link);cursor:pointer;font-weight:600}
.auth-note{font-size:13px;background:var(--surface-soft);border:1px solid var(--hairline-light);
  border-radius:var(--r-md);padding:8px 14px;color:var(--ink)}
.auth-note.err{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.auth-msg{font-size:13px;background:var(--teal-soft);border:1px solid transparent;
  border-radius:var(--r-md);padding:8px 14px;color:var(--teal);line-height:1.4}
.auth-msg a{color:var(--link)}
.login-card button{background:var(--canvas-dark);color:var(--on-dark);border:none;
  border-radius:var(--r-full);padding:14px 24px;font-size:16px;font-weight:600;letter-spacing:0.24px;height:48px}
.err{color:var(--danger);font-size:13px;min-height:16px;text-align:center}

/* ==================== APP LAYOUT ==================== */
.app{display:flex;min-height:100vh}
/* Меню — окрема картка: відступи 6px від країв вікна, заокруглення 20px (Ok, 26.07.2026) */
.sidebar{width:240px;background:var(--canvas-dark);color:var(--on-dark);
  border-right:none;padding:24px 14px;display:flex;flex-direction:column;
  position:sticky;top:6px;height:calc(100vh - 12px);
  /* dvh — «динамічна» висота вікна: у Safari 100vh рахується так, ніби панелі
     браузера сховані, і низ меню (картка користувача) опинявся під панеллю
     й не було видно (Ok, 30.08.2026, iPad). Старі браузери цей рядок ігнорують. */
  height:calc(100dvh - 12px);
  /* sticky сам створює окремий шар: без z-index картка підменю (position:fixed усередині)
     тонула б під вмістом сторінки (Ok, 01.08.2026) */
  z-index:100;
  margin:6px 0 6px 6px;border-radius:20px;
  transition:width .22s cubic-bezier(.4,.0,.2,1),padding .22s cubic-bezier(.4,.0,.2,1)}
.sidebar .logo,.sidebar .logo.small{color:var(--on-dark)}
.sidebar .logo span,.sidebar .logo.small span{color:var(--primary)}
/* лого вирівняне по лівому краю іконок пунктів меню: 14px (padding сайдбару) + 24 = 38px,
   стільки ж дає #nav padding-left:10 + #nav a padding:14 (Ok, 17.08.2026) */
.sidebar .logo{padding-left:24px;justify-content:flex-start;text-align:left}
#nav{display:flex;flex-direction:column;gap:2px;margin-top:16px;flex:1;min-height:0;overflow-y:auto;padding-left:10px}   /* блок навігації зсунуто праворуч на 10px (Ok, 21.07.2026) */
#nav a{display:flex;align-items:center;gap:8px;padding:0 14px;height:40px;border-radius:var(--r-full);
  color:var(--on-dark-mute);font-size:14px;font-weight:600;letter-spacing:0.24px;
  transition:background .14s ease,color .14s ease}
/* Розділ із підменю («Склад»): заголовок + вкладений список (Ok, 31.07.2026) */
.nav-grp{display:flex;flex-direction:column}
.nav-grp .nav-parent{cursor:pointer}
.nav-grp .nav-chev{margin-left:auto;transition:transform .16s ease}
.nav-grp.open .nav-chev{transform:rotate(180deg)}
/* Ми на сторінці цього розділу — підсвічуємо так само, як активний пункт меню (Ok, 01.08.2026) */
#nav .nav-grp.here > .nav-parent{background:var(--on-dark);color:var(--canvas-dark);font-weight:600}
#nav .nav-grp.here > .nav-parent svg{color:var(--canvas-dark)}
/* закритий список не займає місця; відкритий — з відступом і тонкою лінією зліва */
.nav-grp .nav-sub{display:none;flex-direction:column;margin:2px 0 4px 22px;
  padding-left:10px;border-left:1px solid rgba(255,255,255,.14)}
.nav-grp.open .nav-sub{display:flex}
/* Підпункти — без іконок (Ok, 01.08.2026): у списку другого рівня їх видно й так за відступом */
#nav .nav-grp .nav-sub a{height:34px;font-size:13.5px;font-weight:500}
/* Заголовок категорії — не клікабельний, приглушений капс, фікс висота */
.nav-cat{padding:0 14px;height:32px;display:flex;align-items:center;
  color:#C25238;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;
  user-select:none;pointer-events:none;line-height:1}

/* Нижній блок сайдбару: одна кнопка «я» (аватар + ім'я + роль), решта — у меню (Ok, 18.08.2026) */
.side-acct{margin-top:auto}
.side-user{
  display:flex;align-items:center;gap:12px;width:100%;padding:0 14px;height:56px;
  border:none;background:transparent;font:inherit;text-align:left;
  border-radius:var(--r-full);color:var(--on-dark);text-decoration:none;cursor:pointer;
  transition:background .14s ease}
.side-user-chev{width:16px;height:16px;flex:none;color:var(--on-dark-mute);transition:transform .16s ease,color .14s ease}
.side-acct.open .side-user-chev{transform:rotate(180deg)}
.side-acct.open .side-user{background:rgba(255,255,255,0.06)}
@media (hover:hover){.side-user:hover .side-user-chev{color:var(--canvas-dark)}}
@media (hover:hover){.side-user:hover{background:var(--on-dark);color:var(--canvas-dark)}}
@media (hover:hover){.side-user:hover .side-user-name{color:var(--canvas-dark)}}
@media (hover:hover){.side-user:hover .side-user-role{color:var(--canvas-dark);opacity:.7}}
@media (hover:hover){.side-user:hover .side-user-ava{background:rgba(0,0,0,0.08);color:var(--canvas-dark)}}
/* Поки список розгорнутий, наведення кнопку не перефарбовує: інверсія при відкритій
   картці виглядала як помилка (Ok, 19.08.2026). Лишається тільки м'яка підсвітка. */
@media (hover:hover){
  .side-acct.open .side-user:hover{background:rgba(255,255,255,0.06);color:var(--on-dark)}
  .side-acct.open .side-user:hover .side-user-name{color:var(--on-dark)}
  .side-acct.open .side-user:hover .side-user-role{color:var(--on-dark-mute);opacity:1}
  .side-acct.open .side-user:hover .side-user-ava{background:rgba(255,255,255,0.08);color:var(--on-dark)}
  .side-acct.open .side-user:hover .side-user-chev{color:var(--on-dark-mute)}
}
.side-user-ava{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;
  background:rgba(255,255,255,0.08);color:var(--on-dark);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.side-user-ava svg{width:18px;height:18px}
.side-user-ava img{width:100%;height:100%;object-fit:cover;object-position:center 10%;display:block}
.side-user-ava span{font-size:14px;font-weight:600;line-height:1}
.side-user-info{min-width:0;flex:1}
.side-user-name{font-size:14px;font-weight:600;color:var(--on-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.side-user-role{font-size:12px;color:var(--on-dark-mute);margin-top:2px;line-height:1.2}
/* ---- Випадаюче меню користувача (Ok, 18.08.2026) ----
   Картка того ж вигляду, що й підменю розділів: темна, 240px, з тінню.
   Живе прямо в <body> (JS переносить), щоб її не різала вузька смужка меню
   і не ламав transform мобільної шухляди. Координати рахує JS. */
.user-menu{
  position:fixed;z-index:130;width:240px;padding:8px;
  background:var(--canvas-dark);color:var(--on-dark);
  border-radius:20px;box-shadow:0 14px 38px rgba(0,0,0,.3)}
.user-menu[hidden]{display:none}
.um-item{
  display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;
  background:none;border:none;cursor:pointer;border-radius:var(--r-full);
  color:var(--on-dark-mute);font:inherit;font-size:14px;font-weight:600;letter-spacing:0.24px;
  text-align:left;white-space:nowrap;transition:background .14s ease,color .14s ease}
.um-item svg{width:17px;height:17px;flex:0 0 17px}
@media (hover:hover){.um-item:hover{background:rgba(255,255,255,0.06);color:var(--on-dark)}}
.um-sep{height:1px;margin:6px 12px;background:rgba(255,255,255,0.14)}
.um-ver{padding:8px 12px 2px;font-size:11.5px;letter-spacing:.3px;color:var(--on-dark-mute);opacity:.7}
/* Перемикач теми (сонце/місяць) — пігулка з повзунком, без тексту (Ok, 21.07.2026).
   Рядок «Тема» всередині меню: підпис ліворуч, перемикач праворуч. */
.um-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 12px}
.um-row-l{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;
  letter-spacing:0.24px;color:var(--on-dark-mute);white-space:nowrap}
.um-row-l svg{width:17px;height:17px;flex:none}
.theme-switch{position:relative;width:72px;height:38px;flex-shrink:0;margin:0;padding:0;
  border:none;border-radius:999px;cursor:pointer;background:rgba(255,255,255,0.10);transition:background .2s ease}
.theme-switch .th-sun,.theme-switch .th-moon{display:block !important;position:absolute;top:50%;transform:translateY(-50%);
  width:18px;height:18px;z-index:2;pointer-events:none;transition:color .2s ease}
.theme-switch .th-sun{left:10px;color:#1e2024}          /* світла тема: сонце активне (темне на повзунку) */
.theme-switch .th-moon{right:10px;color:rgba(255,255,255,0.55)}
html[data-theme="dark"] .theme-switch .th-sun{color:rgba(255,255,255,0.55)}
html[data-theme="dark"] .theme-switch .th-moon{color:#1e2024}
.theme-switch .ts-knob{position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;z-index:1;
  background:var(--on-dark);transition:transform .22s cubic-bezier(.4,0,.2,1)}
html[data-theme="dark"] .theme-switch .ts-knob{transform:translateX(34px)}
#nav a svg{width:17px;height:17px;flex:0 0 17px;color:var(--on-dark-mute);transition:color .14s ease}
@media (hover:hover){#nav a:hover{background:rgba(255,255,255,0.06);color:var(--on-dark)}}
@media (hover:hover){#nav a:hover svg{color:var(--on-dark)}}
#nav a.active{background:var(--on-dark);color:var(--canvas-dark);font-weight:600}
#nav a.active svg{color:var(--canvas-dark)}
/* Розділ із розгорнутою карткою підменю лишається підсвіченим, як при наведенні (Ok, 02.08.2026).
   Виняток — коли ми вже на сторінці розділу (.here): там біла пілюля, вона важливіша. */
#nav .nav-grp.fly:not(.here) > .nav-parent{background:rgba(255,255,255,0.06);color:var(--on-dark)}
#nav .nav-grp.fly:not(.here) > .nav-parent svg{color:var(--on-dark)}
.who{margin-top:auto;font-size:13px;color:var(--on-dark-mute);display:flex;flex-direction:column;gap:4px}
.who a{color:var(--on-dark-mute)}
main{flex:1;padding:32px 32px;overflow:auto;background:var(--app-bg)}

/* ============================================================
   Компактне меню на середніх екранах: тільки іконки, розгортається при hover
   ============================================================ */
@media (min-width:744px) and (min-height:501px) and (max-width:1280px){
  .app{padding-left:78px}
  .sidebar{
    position:fixed;left:6px;top:6px;height:calc(100vh - 12px);height:calc(100dvh - 12px);width:72px;z-index:100;
    margin:0;border-radius:20px;
    transition:width .22s cubic-bezier(.4,.0,.2,1);
    overflow:hidden;padding:24px 12px}
  @media (hover:hover){.sidebar:hover{width:240px;padding:24px 14px}}
  /* Тексти лишаємось в DOM, але з нульовою шириною + прозорі — щоб не стрибало */
  .logo span, #nav a span, .side-user-info{
    transition:opacity .12s ease}
  .sidebar:not(:hover) .logo span,
  .sidebar:not(:hover) #nav a span,
  .sidebar:not(:hover) .side-user-info,
  .sidebar:not(:hover) .side-user-chev{
    opacity:0;pointer-events:none;max-width:0;overflow:hidden;
    padding:0;margin:0;flex:0 0 0}
  /* Nav-елементи: не переносяться в новий рядок (нужно для згорнутого) */
  #nav a, .side-user, .logo{white-space:nowrap}
  /* Логотип: показуємо тільки коротке "C" (SVG), висота як у розгорнутого 48px */
  .sidebar:not(:hover) .logo{text-align:center;justify-content:center;height:48px;margin:0;padding-left:0}
  .sidebar:not(:hover) .logo .logo-full{display:none}
  .sidebar:not(:hover) .logo .logo-short{display:block;margin:0 auto}
  /* Фіксовані висоти для згорнутого стану — щоб при hover не було стрибків */
  .sidebar:not(:hover) #nav{padding-left:0}   /* у згорнутій смужці — без зсуву, іконки по центру */
  .sidebar:not(:hover) #nav a{
    width:44px;padding:0;margin:0 auto;
    justify-content:center;align-items:center;gap:0}
  /* 44px, як у пунктів меню: у смужку влазить лише 48px, тож 56px не центрувались
     і «Кабінет» стояв на 4px правіше за іконки (Ok, 01.08.2026) */
  .sidebar:not(:hover) .side-user{
    width:44px;padding:0;margin:0 auto;
    justify-content:center;align-items:center;gap:0}
  /* Заголовки категорій: тонка лінія по центру, повна висота як у розгорнутому */
  .sidebar:not(:hover) .nav-cat{
    height:32px;padding:0;margin:0;
    display:flex;align-items:center;justify-content:center;
    background:none;color:transparent;font-size:0;line-height:0;overflow:hidden}
  .sidebar:not(:hover) .nav-cat::before{
    content:"";display:block;width:24px;height:1px;
    background:#C25238}
  /* у згорнутій смужці підменю ховаємо — лишається сама іконка розділу */
  .sidebar:not(:hover) .nav-grp .nav-sub,
  .sidebar:not(:hover) .nav-grp .nav-chev{display:none}
}

/* Сенсорні екрани (iPad тощо) у цьому ж діапазоні: hover-розгортання не працює,
   а після тапу пункт «залипає» в :hover і підписи вилазять за вузьку смужку (обрізаються
   до однієї літери). Тому на тач меню ЗАВЖДИ згорнуте в іконки — незалежно від :hover. (Ok, 20.07.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:1280px) and (hover:none){
  .sidebar,.sidebar:hover{width:72px;padding:24px 12px}
  .sidebar .logo span,
  .sidebar #nav a span,
  .sidebar .side-user-info,
  .sidebar .side-user-chev{
    opacity:0;pointer-events:none;max-width:0;overflow:hidden;padding:0;margin:0;flex:0 0 0}
  .sidebar .logo{text-align:center;justify-content:center;height:48px;margin:0;padding-left:0}
  .sidebar .logo .logo-full{display:none}
  .sidebar .logo .logo-short{display:block;margin:0 auto}
  .sidebar #nav{padding-left:0}   /* сенсорна згорнута смужка — без зсуву */
  /* 44×40 давало не круг, а овал: підкладка активного пункту має радіус 9999px,
     тож ширина мусить дорівнювати висоті рядка 40px (Ok, 26.08.2026).
     Селектор із :not(:hover) — щоб перебити однойменне правило з блоку вище
     (там 44px, і воно специфічніше за просте .sidebar #nav a) */
  .sidebar #nav a,
  .sidebar:not(:hover) #nav a{width:40px;padding:0;margin:0 auto;justify-content:center;align-items:center;gap:0}
  /* height:40 — інакше підсвітка кнопки кабінету (коли меню кабінету відкрите) малювалась
     високою пігулкою 40×56 навколо аватара 36px. Тепер це такий самий круг,
     як підкладка активного пункту меню (Ok, 26.08.2026) */
  .sidebar .side-user,
  .sidebar:not(:hover) .side-user{width:40px;height:40px;padding:0;margin:0 auto;justify-content:center;align-items:center;gap:0}
  .sidebar .nav-cat{height:32px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;
    background:none;color:transparent;font-size:0;line-height:0}
  .sidebar .nav-cat::before{content:"";display:block;width:24px;height:1px;background:#C25238}
  .sidebar .nav-grp .nav-sub, .sidebar .nav-grp .nav-chev{display:none}

  /* Кнопка «показати назви»: на планшеті смужка з самих іконок нічого не пояснює,
     а навести мишу нема чим. Тап розсуває меню з підписами, повторний — згортає.
     Видима лише тут: на десктопі працює наведення, на телефоні є бургер. (Ok, 25.08.2026) */
  /* Язичок-ручка на межі меню і сторінки, по центру висоти екрана (Ok, 26.08.2026).
     position:fixed навмисно: у .sidebar стоїть overflow:hidden, і будь-що всередині
     панелі обрізалось би по її краю. fixed виходить із цього обрізання, бо в панелі
     немає transform/filter, які створили б для нього рамку. */
  .sidebar .side-toggle{
    display:flex;align-items:center;justify-content:center;
    /* прив'язка знизу: картка кабінету завжди на 86px від низу вікна незалежно
       від висоти екрана, тож язичок стабільно стоїть над нею (Ok, 26.08.2026) */
    position:fixed;bottom:100px;left:78px;z-index:101;
    width:16px;height:40px;margin:0;padding:0;
    background:var(--canvas-dark);border:none;
    border-radius:0 9px 9px 0;
    /* легка тінь з боку меню — язичок читається як окрема деталь,
       що виходить з-під плашки, а не як її суцільний виступ (Ok, 26.08.2026) */
    box-shadow:inset 6px 0 8px -6px rgba(0,0,0,.55);
    color:#C25238;opacity:1;cursor:pointer;
    transition:left .22s cubic-bezier(.4,.0,.2,1)}
  .sidebar .side-toggle svg{width:12px;height:12px;transition:transform .22s cubic-bezier(.4,.0,.2,1)}
  .sidebar .side-toggle:active{opacity:.85}

  /* Розкритий стан по тапу — те саме, що дає наведення миші на десктопі */
  .sidebar.tap-open,.sidebar.tap-open:hover{width:240px;padding:24px 14px}
  .sidebar.tap-open .logo span,
  .sidebar.tap-open #nav a span,
  .sidebar.tap-open .side-user-info,
  .sidebar.tap-open .side-user-chev{
    opacity:1;pointer-events:auto;max-width:none;overflow:visible;flex:0 1 auto}
  /* логотип по центру плашки меню, а не притиснутий вліво (Ok, 26.08.2026) */
  .sidebar.tap-open .logo{text-align:center;justify-content:center;padding-left:0}
  .sidebar.tap-open .logo .logo-full{display:block}
  .sidebar.tap-open .logo .logo-short{display:none}
  .sidebar.tap-open #nav a{width:auto;margin:0;justify-content:flex-start;gap:12px;padding:0 10px}
  /* Кнопка кабінету на всю ширину, а стрілочка — margin-left:auto до правого краю,
     на ту саму вертикаль, що й стрілочки пунктів меню. При width:auto кнопка стискалась
     по тексту, вільного місця не було і auto давав 0 (Ok, 26.08.2026) */
  /* height:56 повертаємо явно: правило згорнутої смужки ставить 40px, і в розкритому
     меню кнопка виходила приплюснутою навколо імені та посади (Ok, 26.08.2026) */
  .sidebar.tap-open .side-user{width:100%;height:56px;margin:0;justify-content:flex-start;gap:12px;padding:0 10px}
  .sidebar.tap-open .side-user-chev{margin-left:auto}
  .sidebar.tap-open .nav-cat{
    height:auto;padding:14px 10px 6px;margin:0;display:block;
    color:var(--muted-on-dark,#9aa1a8);font-size:11px;line-height:1.2;letter-spacing:.6px}
  .sidebar.tap-open .nav-cat::before{display:none}
  .sidebar.tap-open .nav-grp .nav-chev{display:block}
  /* меню розсунулось до 240px — язичок їде за його правим краєм */
  .sidebar.tap-open .side-toggle{left:246px}
  .sidebar.tap-open .side-toggle svg{transform:rotate(180deg)}
  /* Розкрите меню лягає поверх вмісту — притемнюємо тло, щоб було видно, що це шухляда
     і що тап повз неї її закриє (обробник у app.js) */
  body:has(.sidebar.tap-open) .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.35)}
}

/* ============================================================
   Підменю карткою збоку (Ok, 01.08.2026)
   На десктопі список другого рівня не розкривається всередині смужки, а вилітає
   окремою карткою праворуч — такою ж завширшки і з такими самими пунктами, як меню.
   Поки картка відкрита, саме меню стискається у смужку іконок (Ok, 01.08.2026):
   на широких екранах це ЄДИНИЙ випадок, коли меню згортається.
   Ліву координату рахує CSS (6px відступ вікна + смужка 72px), верхню — JS по рядку.
   ============================================================ */
@media (min-width:744px) and (min-height:501px){
  /* ---- сама картка ---- */
  .sidebar #nav .nav-grp.open .nav-sub{display:none}   /* усередині меню списком більше не показуємо */
  /* left = 6px відступ вікна + ширина меню + 8px зазор. Меню при цьому не згортається
     (Ok, 01.08.2026) — картка просто стає поруч із ним. */
  .sidebar #nav .nav-grp.fly .nav-sub{
    display:flex;position:fixed;left:254px;z-index:120;
    width:240px;margin:0;padding:14px;
    border:none;border-left:none;border-radius:20px;
    background:var(--canvas-dark);color:var(--on-dark);
    box-shadow:0 14px 38px rgba(0,0,0,.3);
    transition:left .22s cubic-bezier(.4,.0,.2,1)}
  /* пункти картки — один в один як у головному меню (Ok, 01.08.2026) */
  .sidebar #nav .nav-grp.fly .nav-sub a{
    width:auto;height:40px;flex:0 0 40px;padding:0 14px;margin:0;
    font-size:14px;font-weight:600;letter-spacing:0.24px;
    justify-content:flex-start;align-items:center;gap:0}
  .sidebar #nav .nav-grp.fly .nav-sub a span{
    opacity:1;max-width:none;overflow:visible;flex:0 1 auto;padding:0;margin:0}
  /* картка може бути довгою (Налаштування — 21 пункт): даємо прокрутку в межах вікна */
  .sidebar #nav .nav-grp.fly .nav-sub{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto}
  /* група всередині картки — розгортається вниз (Ok, 01.08.2026), відкрита завжди одна */
  .sidebar #nav .nav-grp.fly .nav-sub .nav-sub-grp{flex:0 0 auto;display:block}
  /* заголовок картки — назва розділу приглушеним капсом, як у категорій меню */
  .sidebar #nav .nav-grp.fly .nav-sub .nav-sub-h{
    display:block;flex:0 0 auto;padding:0 14px 8px;
    color:#C25238;font-size:11px;font-weight:600;
    text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
  /* стрілка дивиться вправо — саме туди відкривається картка (Ok, 01.08.2026).
     На мобільному лишається вниз/вгору, бо там список розкривається під пунктом. */
  .sidebar .nav-grp > .nav-parent .nav-chev{transform:rotate(-90deg)}
  /* стрілка кнопки користувача теж дивиться вправо — картка вилітає туди (Ok, 19.08.2026) */
  .side-user-chev,
  .side-acct.open .side-user-chev{transform:rotate(90deg)}
}
/* На середніх екранах меню — вузька смужка, тож картка стоїть ближче;
   при наведенні меню розгортається і картка їде за ним. */
@media (min-width:744px) and (min-height:501px) and (max-width:1280px){
  .sidebar #nav .nav-grp.fly .nav-sub{left:86px}
  @media (hover:hover){.sidebar:hover #nav .nav-grp.fly .nav-sub{left:254px}}
  /* На сенсорному планшеті меню розсувається тапом, а не наведенням — без цього
     картка підменю лишалась на 86px і лягала просто поверх розкритого меню
     (Ok, 26.08.2026) */
  .sidebar.tap-open #nav .nav-grp.fly .nav-sub{left:254px}
}
/* Пункт-група має tabindex, тож браузер малював свій синій фокус-обвід просто
   поверх пункту меню. Прибираємо — фокус-рінги в CRM не використовуємо (Ok, 26.08.2026) */
#nav .nav-parent:focus,#nav .nav-parent:focus-visible,
#nav a:focus,#nav a:focus-visible,
.side-user:focus,.side-user:focus-visible,
.side-toggle:focus,.side-toggle:focus-visible{outline:none}
/* і синє підсвічування тапу на Android-браузерах (Ok, 26.08.2026) */
.sidebar{-webkit-tap-highlight-color:transparent}
.nav-sub .nav-sub-h{display:none}   /* у мобільному списку заголовок не потрібен */
/* Акордеон груп у підменю налаштувань */
.nav-sub-grp .nav-sub-items{display:none}
.nav-sub-grp.open .nav-sub-items{display:block}
#nav .nav-sub-grp .nav-sub-gh{cursor:pointer}
#nav .nav-sub-grp .nav-sub-gh .nav-chev{margin-left:auto;transform:none;transition:transform .16s ease}
#nav .nav-sub-grp.open .nav-sub-gh .nav-chev{transform:rotate(180deg)}
/* розгорнута група підсвічена, як при наведенні — інакше губиться у списку (Ok, 01.08.2026) */
#nav .nav-sub-grp.open .nav-sub-gh{background:rgba(255,255,255,0.06);color:var(--on-dark)}
#nav .nav-sub-grp .nav-sub-items a{padding-left:26px;font-weight:500}

/* Пошук налаштувань у шапці сторінки (Ok, 01.08.2026): підказує розділи, клік — перехід */
.set-find{position:relative}
.set-find input{width:260px;max-width:100%}
.set-find-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  min-width:260px;max-height:320px;overflow-y:auto;padding:6px;
  background:var(--surface-card);border:1px solid var(--hairline-strong);
  border-radius:var(--r-lg);box-shadow:0 14px 38px rgba(0,0,0,.16)}
.set-find-pop button{display:flex;width:100%;align-items:baseline;gap:8px;
  text-align:left;font-family:inherit;font-size:14px;color:var(--ink);
  padding:9px 12px;border:none;background:transparent;border-radius:var(--r-md);cursor:pointer}
.set-find-pop button small{color:var(--stone);font-size:12px}
@media (hover:hover){.set-find-pop button:hover{background:var(--canvas-light)}}
.set-find-none{padding:10px 12px;color:var(--stone);font-size:13px}
/* Пошук стоїть у рядку заголовка, а не окремим рядком під ним: гумовий, добирає
   те, що лишилось від назви розділу (Ok, 02.09.2026) */
/* Розмір такий самий, як у пошуку в шапці «Візитів» (`.head-srch`): 168px завширшки
   і 40px заввишки — щоб поле не перетягувало увагу на себе (Ok, 02.09.2026) */
@media(max-width:743px),(max-height:500px){.set-find{width:auto;flex:1 1 0;min-width:100px;max-width:168px;margin-left:auto}
  .set-find input{width:100%;height:40px;font-size:14px}
  /* просвіт 14 → 8 тільки в шапці з пошуком: у «Локаціях» і «Послугах» поруч стоїть
     ще й кнопка «+ …», і 14px не давали всім трьом зійтись в один рядок */
  .head:has(> .set-find){gap:8px}
  .set-find-pop{left:0;right:0;min-width:0}}

/* ==================== HEADINGS ==================== */
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:14px}
/* «Зарплати»: кнопку «Відмітити зміну» JS переносить у рядок заголовка — притискаємо
   її до правого краю (на телефоні свій, компактніший розмір — у мобільному блоці) */
.head.head-hasshift > #sl-shift{margin-left:auto}
.dash-back-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline-strong);background:var(--surface-card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s,transform .1s}
.dash-back-btn svg{width:20px;height:20px}
.dash-back-btn:active{transform:scale(.94)}
@media (hover:hover){.dash-back-btn:hover{border-color:var(--accent);color:var(--accent)}}
.head h1{font-size:36px;font-weight:700;letter-spacing:-0.6px;line-height:1.15;margin:0;color:var(--ink)}
.dash-wish{font-size:14px;color:var(--ash);line-height:1.4;margin-top:2px}
/* Дії в шапці дашборда (локація, «+ Продаж», «+ Запис») — на телефоні вони живуть
   у нижній плашці, тут ховаються (див. мобільний блок) */
.dash-head-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:24px}   /* дії справа (десктоп); на мобільному — під заголовок */

/* ==================== BUTTONS ==================== */
.btn{background:var(--canvas-dark);color:var(--on-dark);border:1px solid var(--canvas-dark);
  border-radius:var(--r-full);padding:0 24px;height:48px;font-size:16px;font-weight:600;
  letter-spacing:0.24px;line-height:1.0;display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
@media (hover:hover){.btn:hover{background:var(--charcoal);border-color:var(--charcoal)}}
.btn:active{background:var(--charcoal)}
.btn.ghost{background:var(--canvas-light);color:var(--ink);border:1px solid var(--hairline-strong)}
@media (hover:hover){.btn.ghost:hover{background:var(--surface-soft);color:#1e2024}}  /* ховер: світло-сіра заливка → текст робимо темним (у dark-темі був білий і зникав). Ok, 23.07.2026 */
.btn.sm{padding:0 14px;height:34px;font-size:13px;font-weight:500;letter-spacing:0}
.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}
@media (hover:hover){.btn.danger:hover{background:var(--danger-soft)}}
/* Кругла кнопка (× видалити в рядках таблиць) */
.btn.btn-circle{width:34px;height:34px;min-width:34px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1}
.sp-disc-b{color:#C25238;border-color:#C25238}
.sp-disc-b.on{background:#C25238;border-color:#C25238;color:#ffffff}
@media (hover:hover){.sp-disc-b.ghost:hover{background:rgba(194,82,56,0.10)}}

/* ==================== TABLES ==================== */
/* Єдиний вигляд таблиць на всіх сторінках: біла картка з рамкою, внутрішній відступ,
   однакові клітинки. У .rd-table-card рамку дає сама картка — там table без рамки. */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface-card);
  border:1px solid var(--hairline-light);border-radius:var(--r-lg);overflow:hidden;padding:8px 16px}
th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--hairline-light);font-size:14px}
th{color:var(--stone);font-weight:600;font-size:13px;letter-spacing:0;
  background:transparent;text-transform:none;padding:13px 12px}
td{color:var(--body)}

/* Рядок з графіками (картка людини в історії) — це не рядок таблиці, а панель,
   тож підсвітка при наведенні тут зайва (Ok, 15.08.2026) */
tbody tr[data-det]{cursor:default}
@media (hover:hover){
  tbody tr[data-det]:hover > td::before, tbody tr[data-det]:hover > td::after{content:none}
  tbody tr[data-det]:hover > td{border-bottom-color:transparent;background:transparent}
}

/* Сітка місяців у перемикачі місяця (Ok, 15.08.2026) — той самий вигляд, що й календар періоду */
.hm-grid{grid-template-columns:repeat(3,1fr);gap:6px}
.hm-grid .dr-d{height:40px}
.hm-off{opacity:.3;cursor:default}
@media (hover:hover){.hm-off:hover{background:transparent}}

/* «Що показувати» в історії рейтингу — кілька показників чекбоксами (Ok, 15.08.2026) */
.hs-mets{display:inline-flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.hs-mets label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.hs-mets input{margin:0}

/* Історія рейтингу (Ok, 15.08.2026): імʼя ліворуч, усі показники — праворуч, щоб
   колонки не «гуляли» вирівнюванням (частина визначалась числовою, частина ні) */
/* Таблиця лишається гумовою (на всю ширину), але колонки показників вузькі й фіксовані —
   зайве місце забирає колонка з імʼям, а числа тримаються купкою (Ok, 15.08.2026) */
.tbl-hist th:not(:first-child),.tbl-hist td:not(:first-child){width:120px}
.hs-chg{font-size:12px;margin-top:1px}
.tbl-hist th:first-child,.tbl-hist td:first-child{min-width:170px}
.tbl-hist td:first-child{font-size:15px}
.tbl-hist th:not(:first-child),.tbl-hist td:not(:first-child){white-space:nowrap;text-align:right}
/* Коли обрано багато показників, таблиця ширша за екран: гортаємо її вбік, а не
   ріжемо праві колонки (Ok, 15.08.2026). Колонки показників при цьому стискаються
   до 104px, тож скрол вмикається лише коли інакше вже ніяк. */
.tbl-hwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:744px) and (min-height:501px){
  .tbl-hwrap .tbl-hist th:not(:first-child),.tbl-hwrap .tbl-hist td:not(:first-child){width:auto;min-width:104px}
  /* Тісний режим: багато показників на вузькому екрані. Заголовки вже скорочені в JS,
     тут дотискаємо відступи й шрифт, щоб усе влізло без гортання (Ok, 15.08.2026). */
  .tbl-hwrap .tbl-hist-tight th,.tbl-hwrap .tbl-hist-tight td{padding:10px 7px;font-size:13px}
  .tbl-hwrap .tbl-hist-tight th:not(:first-child),.tbl-hwrap .tbl-hist-tight td:not(:first-child){min-width:0}
   /* Спершу економимо місце переносом: прізвище йде під імʼя, розмір шрифту не чіпаємо
     (Ok, 15.08.2026). Зменшуємо букви лише на наступному кроці, якщо й цього мало. */
  .tbl-hwrap .tbl-hist-tight th:first-child,.tbl-hwrap .tbl-hist-tight td:first-child{min-width:104px}
  .tbl-hwrap .tbl-hist-tight td:first-child{font-size:15px;line-height:1.25}
  /* Останній крок стиснення — коли навіть скорочені заголовки не влізли */
  .tbl-hwrap .tbl-hist-xtight th,.tbl-hwrap .tbl-hist-xtight td{padding:9px 4px;font-size:12px}
  .tbl-hwrap .tbl-hist-xtight th:first-child,.tbl-hwrap .tbl-hist-xtight td:first-child{min-width:96px}
  .tbl-hwrap .tbl-hist-xtight td:first-child{font-size:13px}
}
/* Показники — випадаючий список із чекбоксами (Ok, 15.08.2026) */
/* .rt-pop — той самий список із галочками у виборі посад для правила бонусу
   (Ok, 30.08.2026). Без цих правил підписи й галочки текли в рядок і виглядали
   як каша. */
.hs-metpop,.rt-pop{width:auto;min-width:200px;display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.hs-metpop label,.rt-pop label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;white-space:nowrap}
.hs-metpop input,.rt-pop input{margin:0}
.rt-pop{max-height:280px;overflow:auto}

/* Сортування кліком по заголовку: стрілка біля назви колонки (Ok, 02.08.2026) */
th.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
th.th-sort.on{color:var(--body)}
th.th-sort .sort-ar{width:13px;height:13px;vertical-align:-2px;margin-left:4px;opacity:.35;transition:opacity .15s,transform .15s}
th.th-sort.on .sort-ar{opacity:1}
th.th-sort .sort-ar.up{transform:rotate(180deg)}
@media (hover:hover){ th.th-sort:not(.on):hover .sort-ar{opacity:.7} }
/* Таблиця «Топ-локацій»/«Локації»: рівномірні колонки на всю ширину, числа праворуч
   (без auto-layout, який вивалював зайвий простір у 1-шу колонку). Лише десктоп — на телефоні картки. */
@media (max-width:743px),(max-height:500px){ .lb-grid{grid-template-columns:1fr!important} }
/* Локації: смужка частки у виручці мережі під назвою + підсумковий рядок (Ok, 04.08.2026) */
.loc-bar{height:4px;max-width:200px;margin-top:6px;border-radius:2px;background:var(--surface-soft);overflow:hidden}
.loc-bar > i{display:block;height:100%;border-radius:2px;background:#C25238}
tr.tr-total td{border-top:1px solid var(--hairline-strong);font-weight:600;color:var(--ink)}

@media (min-width:744px) and (min-height:501px){
  /* Ширини по вмісту, а не порівну: інакше «Прибуток локації» ламався на два рядки,
     хоча місця в таблиці вистачало (Ok, 05.08.2026) */
  .tbl-loc{table-layout:auto}
  .tbl-loc th:first-child, .tbl-loc td:first-child{width:26%}
  .tbl-loc th{white-space:nowrap}
  .tbl-loc th:not(:first-child), .tbl-loc td:not(:first-child){text-align:right}
  /* Топ-майстрів: «#» вузько, «Майстер» текст, решта колонок порівну + числа праворуч */
  .tbl-mst{table-layout:fixed}
  .tbl-mst th:nth-child(1), .tbl-mst td:nth-child(1){width:52px}
  .tbl-mst th:nth-child(2), .tbl-mst td:nth-child(2){width:20%}
  .tbl-mst th:nth-child(n+3), .tbl-mst td:nth-child(n+3){text-align:right}
  /* Сертифікати: 4 колонки на всю ширину. Без fixed-розкладки зайвий простір валився
     у «Код», а праворуч зяяла порожнеча — тепер номінал і статус притиснуті до краю
     (Ok, 01.08.2026) */
  .tbl-cert{table-layout:fixed}
  .tbl-cert th:nth-child(1), .tbl-cert td:nth-child(1){width:26%}
  .tbl-cert th:nth-child(2), .tbl-cert td:nth-child(2){width:34%}
  .tbl-cert th:nth-child(n+3), .tbl-cert td:nth-child(n+3){text-align:right}
}
tbody tr{transition:background .12s ease}
/* Підсвітка рядка при наведенні — із заокругленими кутами (Ok, 26.07.2026) */
@media (hover:hover){
  /* Роздільник рядків — це нижня межа комірки. Коли кут підсвітки заокруглюється,
     межа загинається разом із ним і лінія виглядає кривою (Ok, 10.08.2026).
     Тому саму межу робимо прозорою, а лінію домальовуємо окремим шаром: він
     absolute-нащадок, тож заокруглення кутів на нього не діє і лінія лишається рівною.
     Товщину межі не чіпаємо, інакше рядок стрибне на піксель. */
  /* Сама підсвітка — окремий шар із відступом 4px зверху і знизу, щоб не торкалась
     ліній-роздільників (Ok, 10.08.2026). z-index:0 на комірці робить її власний шар,
     тож пілюля з z-index:-1 лягає над фоном таблиці, але під текстом. */
  tbody tr:hover td{border-bottom-color:transparent;position:relative;z-index:0}
  tbody tr:hover td::before{content:"";position:absolute;top:4px;bottom:4px;left:0;right:0;
    background:var(--surface-soft);z-index:-1;pointer-events:none}
  /* Заокруглення пілюлі — менше за картки (Ok, 10.08.2026) */
  tbody tr:hover td:first-child::before{border-top-left-radius:4px;border-bottom-left-radius:4px}
  tbody tr:hover td:last-child::before{border-top-right-radius:4px;border-bottom-right-radius:4px}
  tbody tr:hover td::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:var(--hairline-light);pointer-events:none}
}
/* Свій рядок у рейтингу — підсвітка теж із заокругленими кутами (Ok, 26.07.2026) */
tbody tr.row-me td{background:rgba(230,184,0,.10);border-bottom-color:transparent;position:relative}
tbody tr.row-me td::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--hairline-light);pointer-events:none}
tbody tr.row-me td:first-child{border-top-left-radius:var(--r-md);border-bottom-left-radius:var(--r-md)}
tbody tr.row-me td:last-child{border-top-right-radius:var(--r-md);border-bottom-right-radius:var(--r-md)}
tr:last-child td{border-bottom:none}
.muted{color:var(--stone)}

/* ==================== TAGS ==================== */
.tag{display:inline-block;padding:4px 14px;border-radius:var(--r-full);
  font-size:13px;font-weight:600;letter-spacing:0;background:var(--surface-soft);
  color:var(--ink);border:none;white-space:nowrap}
.tag.new{color:var(--primary);background:rgba(73,79,223,0.10)}
.tag.confirmed{color:#b09000;background:rgba(176,144,0,0.12)}
.tag.done{color:var(--teal);background:var(--teal-soft)}
.tag.canceled,.tag.no_show{color:var(--danger);background:var(--danger-soft)}

/* ==================== MODAL ==================== */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50}
/* Вікна центруємо не по всьому екрану, а по робочій області — від меню до правого краю
   (Ok, 03.08.2026). Меню: 78px у компактному режимі, 246px коли розгорнуте. */
@media(min-width:744px) and (min-height:501px) and (max-width:1280px){.modal-bg{padding-left:78px}}
@media(min-width:1281px) and (min-height:501px){.modal-bg{padding-left:246px}}
.modal{background:var(--canvas-light);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:32px;width:min(440px,92vw);max-height:90vh;overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.20)}
.modal h2{margin:0 0 16px;font-size:24px;font-weight:500;letter-spacing:0;line-height:1.33}
.modal{position:relative}
/* Хрестик-закриття у правому верхньому куті модалки. Спершу лише на телефоні
   (Ok, 19.07.2026), з 30.08.2026 — на всіх сенсорних екранах: на планшеті немає
   ні Esc, ні миші, а «Скасувати» доводиться шукати внизу довгого вікна. */
.modal-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  display:none;align-items:center;justify-content:center;padding:0;
  background:var(--surface-soft);border:1px solid var(--line);color:var(--muted);cursor:pointer;z-index:6}
@media (hover:hover){.modal-x:hover{color:var(--ink)}}
@media (max-width:743px),(max-height:500px),(hover:none){.modal-x{display:inline-flex;top:24px;right:24px}.modal>h2{padding-right:64px}}
/* Вікно «Новий запис»: хрестик-кружечок справа від заголовка на всіх ширинах (замість кнопки «Скасувати»). Ok, 23.07.2026 */
.modal.bk-modal>.modal-x,.modal.has-x>.modal-x{display:inline-flex;top:16px;right:16px}
.modal.bk-modal>h2,.modal.has-x>h2{padding-right:52px}
/* Спливаюче нагадування адміну «Нагадати клієнту про запис» (Ok, 26.07.2026) */
.rem-pop-bg{position:fixed;inset:0;background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:120;
  animation:ozFade .15s ease-out;padding:16px}
.rem-pop{background:var(--canvas-light);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:28px;width:min(400px,100%);
  box-shadow:0 20px 60px rgba(0,0,0,0.20);animation:ozModalIn .2s cubic-bezier(.2,.8,.2,1)}
.rem-pop-h{display:flex;align-items:center;gap:8px;color:var(--mute);
  font-size:14px;font-weight:600;margin-bottom:14px}
.rem-pop-h svg{width:18px;height:18px;flex:none}
.rem-pop-name{font-size:24px;font-weight:500;line-height:1.33;color:var(--ink)}
.rem-pop-phone{display:inline-block;margin-top:6px;font-size:20px;font-weight:600;
  color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
@media (hover:hover){a.rem-pop-phone:hover{text-decoration:underline}}
.rem-pop-nophone{font-size:14px;font-weight:400;color:var(--mute)}
.rem-pop-rows{margin-top:16px;border-top:1px solid var(--hairline-light);padding-top:14px;
  display:flex;flex-direction:column;gap:8px}
.rem-pop-rows>div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.rem-pop-rows span{color:var(--mute)}
.rem-pop-rows b{font-weight:600;color:var(--ink);text-align:right}
.rem-pop-btns{display:flex;gap:8px;margin-top:20px}
.rem-pop-btns .btn{flex:1}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;color:var(--mute);font-weight:600}
/* Підказка під полем телефону не бере участі в розкладці: висить під полем окремим
   шаром. Раніше вона зʼявлялась після кліку, поле підростало — і сусіднє поле в тому
   самому рядку стрибало вниз (Ok, 19.08.2026). Довгий текст — з трикрапкою,
   повний видно у підказці при наведенні. */
.field:has(> .ph-err){position:relative}
.ph-err{position:absolute;left:0;right:0;top:100%;margin-top:1px;
  color:var(--err);font-size:13px;line-height:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{display:flex;gap:8px;align-items:flex-end}  /* поля вирівняні по низу, навіть якщо підпис на 2 рядки */
/* Два поля в ряду, де під одним є рядок-пояснення («з руху коштів», «авто (ЗП %)»).
   При flex-end низом вважався низ пояснення, тож сусіднє поле з'їжджало вгору
   (Ok, 26.08.2026). Subgrid ставить підпис/поле/пояснення на спільні рядки. */
.row.row-sub{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;
  align-items:start}
.row.row-sub > .field{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:6px}
.row>*{flex:1;min-width:0}
/* Рядок, у якому сусіднє поле сховане (у салоні з однією точкою це поле «Локація»):
   те, що лишилось, тримає звичну половину рядка, а не розтягується на всю ширину
   (Ok, 04.09.2026). На телефоні рядок і так один стовпчик — там повна ширина. */
.row.row-half>*{flex:0 1 calc(50% - 4px)}
@media(max-width:743px),(max-height:500px){.row.row-half>*{flex:1}}
/* Телефони компанії: дві колонки такої ж ширини, як Email/Країна поруч. Кнопка
   «+ Додати номер» — теж комірка сітки, тому завжди стоїть одразу за останнім
   номером: другий номер лягає праворуч, третій — під першим (Ok, 10.08.2026) */
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
.ph-grid>*{min-width:0}
/* У картці локації поле телефону — на всю ширину, як решта полів форми, але ТІЛЬКИ
   на планшеті вертикально (Ok, 29.08.2026). На десктопі й телефоні лишаються
   дві колонки, як були. «Загальні → Телефони компанії» не чіпаємо взагалі. */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait){
  .ph-grid[data-f="phones"]{grid-template-columns:1fr}
  /* «Робочі місця»: у розмітці стоїть стеля в пів колонки (розрахована на широкий
     десктоп), і на планшеті поле стискалось у кружечок 42px. Знімаємо стелю —
     поле займає решту рядка після підпису (Ok, 29.08.2026). !important, бо
     max-width заданий інлайном. */
  [data-f="seats"]{max-width:none!important}
}
/* Те саме на ТЕЛЕФОНІ (Ok, 02.09.2026): «Робочі місця» тиснулись у кружечок 54px,
   і цифра в ньому обрізалась; телефон мав пів рядка. Обидва поля — на всю ширину. */
@media(max-width:743px),(max-height:500px){
  .ph-grid[data-f="phones"]{grid-template-columns:1fr}
  [data-f="seats"]{max-width:none!important}
}
/* кнопка завжди починає новий рядок — під номерами, а не збоку від поля (Ok, 10.08.2026) */
.ph-add{grid-column:1/-1;justify-self:start;width:auto}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;
  /* переносимо кнопки на новий рядок: у картці заявки їх шість, і в один ряд
     вони вилазили за межі вікна (Ok, 08.08.2026) */
  flex-wrap:wrap}
.modal-actions .btn{flex:1;min-width:120px}
/* Футер вікна «Новий запис»: «Створити» притиснута вправо у верхньому ряду, «Скасувати» окремим рядком знизу — на всіх ширинах (Ok, 23.07.2026) */
.modal-actions.bk-acts{flex-wrap:wrap}
/* Розширюємо .mbody на 16px у праву модалку — щоб scrollbar сидів у ці 16px, а картки лишалися ті ж що були */
.mbody{margin-right:-16px;padding-right:16px}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.slot{padding:8px 16px;border:1px solid var(--hairline-light);border-radius:var(--r-full);
  background:var(--surface-soft);font-size:13px;font-weight:600}
.slot.active{background:var(--canvas-dark);color:var(--on-dark);border-color:var(--canvas-dark);font-weight:600}
.slot.empty{color:var(--stone);border:none;background:transparent}
/* «Інна у відпустці до 27.08» над слотами: попередження на всю ширину, слоти лишаються активними */
.bk-absent-note{flex:0 0 100%;font-size:13px;color:var(--danger);line-height:1.35}
.empty-state{color:var(--stone);text-align:center;padding:48px}
@media (hover:hover){}

/* Розгорнута картка запису */
.modal.rec-wide{width:min(740px,96vw)}
.rd{display:flex;gap:16px;align-items:flex-start}
.rd-left{flex:1.5;min-width:0;display:flex;flex-direction:column;gap:16px}
.rd-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.rd-block{background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:16px}
/* Сітка блоків головної: вузькі таблиці по дві в ряд, широкі — на всю ширину.
   У таблиць по 2–3 колонки половина рядка стояла порожня (Ok, 19.08.2026). */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));
  gap:0 20px;align-items:start}
.dash-grid > .dash-wide{grid-column:1/-1}
/* Крапка «ще не дивились» у черзі справ; після перегляду гасне (Ok, 19.08.2026) */
.task-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--link);margin-right:8px;vertical-align:1px;flex:0 0 8px}
.task-dot.off{display:none}   /* не просто гасимо — прибираємо, щоб текст не лишався зі зсувом */
/* Верх головної: висока картка-годинник ліворуч, три картки + рядок зміни праворуч
   (Ok, 19.08.2026). На телефоні все стає в один стовпчик. */
.dash-top{display:grid;grid-template-columns:minmax(200px,1fr) 3fr;gap:16px;margin-bottom:24px;
  align-items:stretch}
.dash-top-right{display:flex;flex-direction:column;gap:16px;min-width:0}
.dash-top .cards{margin-bottom:0}
.dash-top .dash-shift{margin:0}
/* Без рядка зміни каси всі чотири картки однакової висоти: трійка праворуч
   розтягується на висоту годинника (Ok, 19.08.2026) */
.dash-top-flat .cards{height:100%}
.dash-top-flat .cards > .card{height:100%}
@media(max-width:743px),(max-height:500px){
  .dash-top{grid-template-columns:1fr}
  .dash-top-flat .cards, .dash-top-flat .cards > .card{height:auto}
}
/* Годинник: тільки час і дата, без підпису. Селектор із .card обовʼязково — інакше
   загальне правило .card .val нижче переб'є розмір. */
/* Годинник підлаштовується під ширину САМОЇ картки, а не екрана: на вузькому екрані
   картка теж вузька, і фіксовані 80px вилазили за край (Ok, 19.08.2026).
   Спершу запасний варіант через ширину вікна, далі — точний через ширину картки. */
.card.dash-clock-card{justify-content:center;align-items:flex-start;container-type:inline-size}
/* Час за референсом Ok (20.08.2026): тонке накреслення, суцільна заливка (без обведення) */
.card.dash-clock-card .val,
.card.income.dash-clock-card .val{font-size:clamp(34px,5vw,80px);line-height:1;margin-top:0;
  letter-spacing:-2px;white-space:nowrap;font-weight:700;
  color:var(--on-dark);-webkit-text-stroke:0;
  display:flex;align-items:flex-start;gap:6px;max-width:100%;
  /* однакова ширина цифр — інакше час «сіпався» б при зміні хвилини */
  font-variant-numeric:tabular-nums}
/* Розмір рахуємо від ширини САМОЇ картки. «08:26» — це приблизно 3 висоти шрифту,
   плюс секунди і відступи, тож 24% ширини лишає запас і на вузькій колонці (Ok, 20.08.2026) */
@supports (width:1cqw){
  .card.dash-clock-card .val,
  .card.income.dash-clock-card .val{font-size:clamp(34px,28cqw,150px)}
}
/* секунди — дрібним верхнім індексом, суцільні (не контурні), щоб читались */
.card.dash-clock-card .val sup,
.card.income.dash-clock-card .val sup{font-size:.3em;line-height:1.1;letter-spacing:0;
  color:var(--on-dark);-webkit-text-stroke:0;font-weight:500;align-self:flex-start;margin-top:.25em}
/* дата — над часом */
.card.dash-clock-card .sub{font-size:clamp(14px,6cqw,17px);margin:0 0 8px;order:-1;
  color:var(--on-dark);opacity:.85;font-weight:500}
/* відлік «до закриття» — під часом, тим самим дрібним, що й дата */
.card.dash-clock-card .dash-clock-left{font-size:clamp(13px,5cqw,15px);margin-top:6px;
  color:var(--on-dark);opacity:.85;font-weight:500;white-space:nowrap}
/* На вузькому ноутбуці колонка годинника стає завузькою для великих цифр —
   від 1100px і нижче він переходить у широку смугу над картками (Ok, 20.08.2026) */
@media(max-width:1100px){
  .dash-top{grid-template-columns:1fr}
  /* дата лишається НАД часом і на широкій смузі — інакше рядок читається як «08:26 Четвер» */
  .card.dash-clock-card{align-items:flex-start;justify-content:center;padding:18px 20px}
  /* тут картка на всю ширину, тож розмір беремо від екрана, а не від картки.
     Селектор із .income — щоб не програти базовому правилу за специфічністю */
  .card.dash-clock-card .val,
  .card.income.dash-clock-card .val{font-size:clamp(44px,9vw,80px)}
  .card.dash-clock-card .sub{margin:0 0 6px;font-size:17px}
}
/* Планшет вертикально: годинник і три картки — усі чотири в одному ряду (Ok, 29.08.2026).
   Правило вище (≤1100) виносило годинник у смугу над картками; тут повертаємо його в ряд
   і зменшуємо цифри, бо колонка вужча. Іде ПІСЛЯ блоку ≤1100, щоб перебити його.
   Діапазон до 1024 включно: на iPad Pro вертикально Ok хоче так само, як на решті планшетів.
   Другою умовою — iPad mini ГОРИЗОНТАЛЬНО (це рівно 1024): Ok просив там той самий вигляд,
   що й у вертикальній орієнтації. Ширші планшети горизонтально лишаються десктопними. */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait),
       (min-width:1024px) and (min-height:501px) and (max-width:1100px) and (orientation:landscape) and (hover:none){
  .dash-top{grid-template-columns:minmax(120px,1fr) 3fr}
  .card.dash-clock-card{padding:14px 14px}
  .card.dash-clock-card .val,
  .card.income.dash-clock-card .val{font-size:clamp(26px,26cqw,80px)}
  .card.dash-clock-card .sub{font-size:clamp(12px,6cqw,15px);margin:0 0 4px}
  /* Базово рядок відліку — в один рядок (`white-space:nowrap`), але у вузькій колонці
     ранкове «відкриття о 10:00, за 9 год 41 хв» не влазило й обрізалось (Ok, 29.08.2026) */
  .card.dash-clock-card .dash-clock-left{font-size:clamp(11px,5cqw,13px);white-space:normal}
  /* три праві картки саме втрьох у ряд: за замовчуванням це auto-fit від 190px,
     і на 744 «Картка» падала другим рядком */
  .dash-top .cards, .dash-top .cards.cards-rows{display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;row-gap:0}
  .dash-top .cards > .card{min-width:0;padding:12px 12px}
  /* Сума притиснута до підпису під нею — «127 766 ₴» і «в касі зараз» одним блоком
     (Ok, 29.08.2026). `.val` не мав власного міжрядка й успадковував 1.5 від body,
     тобто 36px при шрифті 24px, тому перенесений підпис відлітав від суми.
     Розкладку картки НЕ чіпаємо: назва зверху, сума лишається притиснутою до низу
     (`margin-top:auto` з базового правила). */
  .dash-top .cards > .card .val{line-height:.8}
  /* підпису теж свій міжрядок: інакше його власні 1.5 (19,5px) не дають рядкам зійтися */
  .dash-top .cards > .card .val span{line-height:1}
  /* Годинник рівно тієї ж висоти, що й три картки (Ok, 29.08.2026): рядок зміни каси
     виходить із правої колонки і стає окремим рядком на всю ширину. display:contents
     розчиняє обгортку, тож .cards і .dash-shift лягають прямо в сітку .dash-top. */
  .dash-top .dash-top-right{display:contents}
  .dash-top .dash-shift{grid-column:1/-1}
}
/* Планшет ГОРИЗОНТАЛЬНО: верх сторінки як на десктопі — годинник високою карткою
   ліворуч, три картки праворуч, рядок зміни каси під ними (Ok, 29.08.2026).
   Від 1101 (Air 1180, Pro 1366) — десктопна сітка й так діє, тут ми лише додаємо перенос
   рядка відліку і притискання підпису до суми. Mini горизонтально (1024) сюди НЕ входить:
   Ok просив там вигляд як у вертикальній орієнтації (блок вище).
   `hover:none` — щоб звичайне вікно браузера такої ширини не зачепити. */
@media (min-width:1101px) and (min-height:501px) and (max-width:1400px) and (orientation:landscape) and (hover:none){
  .dash-top{grid-template-columns:minmax(200px,1fr) 3fr}
  .card.dash-clock-card{padding:24px}
  .card.dash-clock-card .val,
  .card.income.dash-clock-card .val{font-size:clamp(34px,28cqw,150px)}
  .card.dash-clock-card .sub{margin:0 0 8px;font-size:clamp(14px,6cqw,17px)}
  /* у вузькій колонці ранкове «відкриття о 10:00, за 9 год 41 хв» не влазить в один рядок */
  .card.dash-clock-card .dash-clock-left{white-space:normal}
  /* і підпис під сумою притиснутий до неї — так само, як у вертикальній орієнтації */
  .dash-top .cards > .card .val{line-height:.8}
  .dash-top .cards > .card .val span{line-height:1}
}
/* пара «сьогодні»: два блоки завжди в одному ряду, порівну */
.dash-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:743px),(max-height:500px){ .dash-pair{grid-template-columns:1fr;gap:0} }
/* iPad mini й Air вертикально: «Найближчі записи» і «Майстри на зміні» одне під одним
   на всю ширину — удвох у рядок вони затісні (Ok, 29.08.2026). Порядок задає розмітка:
   спершу записи, потім зміна. На iPad Pro (1024) лишаються двома колонками. */
@media(min-width:744px) and (min-height:501px) and (max-width:900px) and (orientation:portrait){
  .dash-pair{grid-template-columns:1fr;gap:0}
}
@media(max-width:743px),(max-height:500px){ .dash-grid{grid-template-columns:1fr;gap:0} }
/* Рядок «Зміна каси» на головній: текст ліворуч, дія праворуч (Ok, 19.08.2026) */
.dash-shift{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:14px 16px;margin:8px 0 20px}
/* іконка в підписі картки — на одному рядку з текстом */
.card .lbl .mi{width:16px;height:16px;vertical-align:-3px;margin-right:5px}
.rd-block-h{font-size:20px;font-weight:500;color:var(--ink);letter-spacing:0;
  text-transform:none;display:flex;align-items:center;gap:8px;margin-bottom:12px;line-height:1.4}
.rd-cnt{background:var(--canvas-dark);border:none;color:var(--on-dark);font-size:12px;font-weight:600;line-height:1;
  border-radius:var(--r-full);min-width:22px;height:22px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.rd-svc{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--hairline-light)}
.rd-svc:first-of-type{border-top:none}
/* Іконка напряму роботи в рядку послуги (Ok, 24.08.2026) */
.rd-svc-ic{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-md);
  background:var(--canvas-light);border:1px solid var(--hairline-light);
  display:flex;align-items:center;justify-content:center;color:var(--stone)}
.rd-svc-ic svg{width:18px;height:18px}
.rd-svc-main{flex:1;min-width:0}
.rd-svc-nm{font-weight:600;font-size:14px;color:var(--ink)}
.rd-svc-meta{color:var(--stone);font-size:13px;margin-top:2px}
.rd-svc-pr{font-weight:600;white-space:nowrap;color:var(--ink)}
.rd-total{border-top:1px solid var(--hairline-strong);margin-top:2px;padding-top:14px}
/* Знижка в чеку запису — окремим рядком і кольором, а «До сплати» більшим за «Усього»:
   раніше зверху стояла повна сума, а клієнт платив менше (Ok, 07.08.2026) */
.rd-disc-row{padding:10px 0}
.rd-disc-row .rd-svc-main b,.rd-disc-row .rd-svc-pr b{color:var(--link);font-weight:600}
.rd-due-row{padding-top:10px}
.rd-due-row .rd-svc-main b{font-size:15px}
.rd-due-row .rd-svc-pr b{font-size:19px;font-weight:600}
.rd-sum-old{color:var(--stone);font-size:15px;font-weight:400;margin-right:6px;text-decoration:line-through}
/* «Давно не приходили» → пілюля «Свій» відкриває випадашку з полями днів (Ok, 07.08.2026).
   Пілюлі тут не скролимо, а переносимо: інакше overflow обрізав би випадашку. */
.fin-tabs.cli-inact-steps{overflow:visible;flex-wrap:wrap}
.cli-cust-wrap{position:relative;display:inline-flex}
.cli-inact-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  background:var(--canvas-light);border:1px solid var(--hairline-light);
  border-radius:var(--r-md);box-shadow:0 12px 32px rgba(0,0,0,0.12);
  padding:14px;display:flex;flex-direction:column;gap:10px;
  width:220px;max-width:90vw}
/* Рядок за рядком: заголовок, «від», «до», кнопка (Ok, 07.08.2026) */
.cli-inact-pop .cip-title{font-size:13px;font-weight:600;color:var(--ink)}
.cli-inact-pop .cip-row{display:flex;align-items:center;gap:10px}
.cli-inact-pop .muted{font-size:13px;white-space:nowrap;width:28px}
/* Поля днів — тієї ж висоти, що й кнопка «Показати» (.btn.sm). Стрілки ↑↓ прибрані
   через data-oz-skip у розмітці: нативні й так сховані глобально (Ok, 07.08.2026) */
.cli-inact-pop input[type="number"]{flex:1;min-width:0;height:34px;padding:0 14px;font-size:13px}
.cli-inact-pop .btn{width:100%;margin-top:2px}
.rd-cl-top{display:flex;align-items:center;gap:14px}
.rd-ava{width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:var(--canvas-dark);color:var(--on-dark);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px}
.rd-cl-id{flex:1;min-width:0}
.rd-cl-nm-row{display:flex;align-items:center;gap:12px}
.rd-cl-nm-row .rd-edit{margin-left:auto}
.rd-cl-nm{font-weight:600;font-size:16px;color:var(--ink)}
/* Аватар та імʼя — вхід у картку клієнта (Ok, 24.08.2026), замість кнопки «Історія» */
.rd-cl-link{cursor:pointer}
@media (hover:hover){
  .rd-cl-nm.rd-cl-link:hover{text-decoration:underline}
  .rd-ava.rd-cl-link:hover{filter:brightness(1.08)}
}
.rd-cl-phone{display:block;font-size:13px;color:var(--ash);text-decoration:none;margin-top:2px;
  font-variant-numeric:proportional-nums lining-nums;font-feature-settings:"pnum" 1,"lnum" 1}
@media (hover:hover){.rd-cl-phone:hover{color:var(--ink)}}
/* Примітка відділена лінією від фото/імені/телефону (Ok, 19.08.2026) */
.rd-cl-note-edit{margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline-light)}
/* Прайс майстра прямо в картці (Ok, 03.08.2026) */
.pr-row{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--hairline-light)}
.pr-row:last-child{border-bottom:none}
.pr-row .i{flex:1;display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0}
.pr-row .v{width:130px;flex:0 0 130px;height:40px;padding:0 14px}
@media(max-width:743px),(max-height:500px){ .pr-row .v{width:100px;flex:0 0 100px} }
/* Схема зарплати в картці співробітника: рядок посади + редагування (Ok, 03.08.2026) */
.sp-scheme-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;
  border-bottom:1px solid var(--hairline-light)}
.sp-scheme-edit{padding:12px 0}
/* Посади картками (Ok, 03.08.2026) */
.sp-pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px}
.sp-pos-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--surface-card);
  border:1px solid var(--hairline-light);border-radius:var(--r-lg);padding:16px 18px}
.sp-pos-card .t{padding-right:36px}
.sp-pos-card .t b{font-size:15px}
.sp-pos-card .v{font-family:var(--font-head);font-size:22px;font-weight:700;letter-spacing:-0.3px;margin-top:auto}
.sp-pos-card .a{display:flex;gap:8px;align-items:center}
.sp-pos-edit{grid-column:1/-1;background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:16px 18px}
@media(max-width:743px),(max-height:500px){ .sp-pos-grid{grid-template-columns:1fr} }
/* Персонал: імʼя + посади під ним, ключик = є логін (Ok, 03.08.2026) */
.st-nm{font-weight:600}
.st-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);vertical-align:1px;margin-right:6px}
/* Сторінка клієнта: шапка як у картці майстра в «Графіках» (Ok, 03.08.2026) */
.cl-page-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--canvas-light);
  border:1px solid var(--hairline-light);border-radius:var(--r-lg);padding:16px 24px;margin-bottom:20px}
.cl-page-head .rd-ava{width:60px;height:60px;flex:0 0 60px;font-size:20px}
.cl-page-head .i{flex:1;min-width:160px}
.cl-page-head .i .nm{font-size:20px;font-weight:500;color:var(--ink)}
.cl-page-head .i .ph{font-size:14px;color:var(--stone);text-decoration:none}
@media (hover:hover){.cl-page-head .i .ph:hover{color:var(--ink)}}
@media(max-width:743px),(max-height:500px){ .cl-page-head{padding:16px} }
/* Сторінка картки клієнта на телефоні: картки (Візитів / Середній чек / Оплачено /
   Балів) по дві в ряд (Ok, 02.09.2026).
   ⚠️ Базове `.card{min-width:calc(50% - 6px)}` тут не спрацьовувало: просвіт на
   телефоні 14px, тож двом карткам треба 50%-7px. З -6px пара просила 364px проти
   362 доступних і кожна падала в свій рядок. */
@media(max-width:743px),(max-height:500px){
  .cl-page-head + .cards > .card{flex:1 1 calc(50% - 7px);min-width:0}
}
/* Телефон ЛЕЖАЧИ: ті самі чотири показники стають одним рядком — ширини вистачає,
   а висота на вагу золота (Ok, 02.09.2026). Просвіт 14px × 3 = 42, тож на картку
   лишається чверть мінус 10,5px; беру 11 із запасом. */
@media (max-height:500px) and (orientation:landscape){
  .cl-page-head + .cards > .card{flex:1 1 calc(25% - 11px);min-width:0}
}
/* У темній темі --canvas-light = фон сторінки, тож шапка клієнта зливалась із фоном.
   Даємо їй колір картки, як у показників нижче (Ok, 22.08.2026) */
html[data-theme="dark"] .cl-page-head{background:var(--surface-card)}
/* Примітка в картці клієнта: текст, поле для вводу — лише в режимі редагування (Ok, 03.08.2026) */
.cc-note-txt{font-size:14px;color:var(--body);line-height:1.5;white-space:pre-line}
/* Попередні нотатки візитів під блоком «Нотатка візиту» (Ok, 24.08.2026).
   Дрібніші й приглушені — це довідка, а не те, що зараз пишуть. */
.wn-prev{margin-top:12px;padding-top:10px;border-top:1px solid var(--hairline-light)}
.wn-prev-h{font-size:11.5px;font-weight:600;color:var(--stone);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:6px}
.wn-prev-i{font-size:13px;line-height:1.5;color:var(--body);margin-top:4px;overflow-wrap:anywhere}
.wn-prev-d{color:var(--stone);margin-right:6px}
/* ── Примітки про клієнта списком (Ok, 24.08.2026) ──────────────────────────
   Один пункт = один рядок тексту. «ред.» вмикає іконки правки/видалення
   біля кожного пункту — щоб у звичайному режимі список лишався чистим. */
.cn-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cn-h{font-size:13px;font-weight:600;color:var(--ink)}
/* Вигляд успадковано від .rd-edit — тут лише притискаємо кнопку праворуч */
.cn-ed{margin-left:auto}
.cn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cn-item{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.5;color:var(--body)}
.cn-item::before{content:"•";color:var(--stone);line-height:1.5;flex:none}
.cn-tx{flex:1;min-width:0;overflow-wrap:anywhere}
.cn-acts{display:flex;gap:2px;flex:none;margin-left:auto}
.cn-ic{background:none;border:0;padding:2px;cursor:pointer;color:var(--stone);
  display:inline-flex;align-items:center;line-height:0}
.cn-ic .mi{width:15px;height:15px}
/* Хрестик малюється дрібнішим за олівець (12 клітинок із 24 проти 20), тож поруч виглядав
   меншим. Збільшуємо його поле в 1,4 раза і водночас тоншаємо лінію в стільки ж —
   так товщина штриха на екрані лишається такою самою, як в олівця (Ok, 24.08.2026). */
.cn-ic.danger .mi{width:21px;height:21px;stroke-width:1.36}
.cn-ic.danger{color:var(--danger)}
.cn-empty{font-size:14px;line-height:1.5}
/* Геометрія від .rd-edit, але теракотова — це єдина дія, що додає новий запис (Ok, 24.08.2026).
   Селектор з двома класами навмисно: правило .rd-edit стоїть нижче за файлом і інакше перебиває колір. */
.rd-edit.cn-add{margin-left:0;margin-top:8px;color:var(--link)}
/* У формі запису блок вужчий — трохи дрібніший, щоб не перебивав вибір послуг */
.cnotes-sm .cn-h,.cnotes-sm .cn-item,.cnotes-sm .cn-empty{font-size:13px}
@media (hover:hover){
  .cn-ic:hover{color:var(--ink)}
  .cn-ic.danger:hover{color:var(--danger)}
}
/* «Що робили» — стрічка нотаток по візитах у картці клієнта (Ok, 24.08.2026).
   Не таблиця: нотатка це абзац тексту, у колонці він стискався б у кашу. */
.wn-list{display:flex;flex-direction:column;gap:10px}
.wn-item{background:var(--surface-card);border-radius:var(--r-card,14px);padding:14px 16px;cursor:pointer}
.wn-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.wn-head .muted{font-size:13px}
.wn-txt{font-size:14px;color:var(--body);line-height:1.5;white-space:pre-line}
.wn-by{font-size:12px;margin-top:8px}
@media (hover:hover){.wn-item:hover{background:var(--surface-soft,var(--surface-card))}}
/* Дії в шапці картки клієнта: записати / подзвонити / редагувати (Ok, 03.08.2026) */
.cc-acts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.cc-acts .btn{white-space:nowrap;text-decoration:none}
@media(max-width:743px),(max-height:500px){
  .rd-client .rd-cl-top{flex-wrap:wrap}
  .cc-acts{margin-left:0;width:100%}
  .cc-acts .btn{flex:1}
}
.rd-stats{display:flex;gap:8px;margin-top:14px;text-align:center}
.rd-stats>div{flex:1;background:var(--canvas-light);border:1px solid var(--hairline-light);
  border-radius:var(--r-md);padding:14px 6px}
.rd-stats b{display:block;font-size:18px;font-weight:500}
.rd-stats span{color:var(--stone);font-size:13px}
.rd-sum-row{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.rd-sum-row b{font-size:20px;font-weight:500}
/* Плашка «Разом до сплати» внизу вікна оплати: сума + чайові (Ok, 27.08.2026).
   Фон м'якої поверхні, щоб виділявся на білому тлі модалки. */
.pay-total{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:4px;padding:12px 16px;border-radius:var(--r-md);
  background:var(--surface-soft);border:1px solid var(--hairline-light);font-size:14px}
.pay-total b{font-size:20px;font-weight:500;white-space:nowrap}
.rd-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rd-pay-info{align-self:stretch;width:100%;margin-top:4px}
.rd-meta-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;
  padding:8px 0;border-top:1px solid var(--hairline-light)}
.rd-meta-row:first-child{border-top:none}
/* Профіль в «Особистих даних» — рядків мало, тож даємо їм більше повітря (Ok, 22.08.2026) */
.rd-meta[data-prof-view] .rd-meta-row{padding:13px 0}
.rd-meta-row span{color:var(--mute)}
/* Довге значення переносилось уліво й розʼїжджалось із короткими сусідами (Ok, 10.10.2026) */
.rd-meta-row b{text-align:right}
/* Напрям + «У професії з» у посаді: вирівнюємо по верху, бо під стажем є пояснення
   і при вирівнюванні по низу (як у звичайних .row) поля розʼїжджались (Ok, 03.08.2026) */
.sp-pos-edit .sp-dirrow{align-items:flex-start}
/* Стаж майстра в картці — звичайний рядок; вводиться в посаді (Ok, 03.08.2026) */
.sp-exp-row>b{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:743px),(max-height:500px){
  /* на вузькому екрані підказка про стаж переходить під місяць, щоб рядок не тиснувся */
  .sp-exp-row{flex-wrap:wrap;row-gap:2px}
  .sp-exp-row>b>.muted{flex-basis:100%;text-align:right}
}
/* overflow-wrap:anywhere — довгий текст без пробілів (клієнт може написати суцільний
   рядок) інакше вилазить за межі картки й розтягує вікно (Ok, 24.08.2026) */
.rd-comment{margin-top:10px;font-size:13px;color:var(--body);overflow-wrap:anywhere}
.rd .rb{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;padding:4px 12px 4px 10px;
  border-radius:var(--r-full);white-space:nowrap}
.rd .rb.paid,.rd .rb.done{color:var(--teal);background:var(--teal-soft)}
/* Підпис оплати буває довгим («Оплачено · Сертифікат + доплата») і при nowrap вилазив
   за край картки — даємо йому переноситись (Ok, 10.10.2026) */
.rd .rb.paid{white-space:normal;max-width:100%;align-items:flex-start}
.rd .rb.paid .mi{flex:none;margin-top:2px}
.rd .rb.new{color:var(--primary);background:rgba(73,79,223,0.10)}
.rd .rb.confirmed{color:#b09000;background:rgba(176,144,0,0.12)}
.rd .rb.canceled,.rd .rb.no_show{color:var(--danger);background:var(--danger-soft)}
.rd .rb.unpaid{color:#ec7e00;background:rgba(236,126,0,0.10)}
/* «Прибув» — той самий помаранчевий, що й картка в календарі (Ok, 21.08.2026) */
.rd .rb.rb-arrived{color:#f97316;background:rgba(249,115,22,0.12)}
.rd .rb.refunded{color:#C25238;background:rgba(194,82,56,0.10)}
/* Пілюлі в картці транзакції — у спільному стилі статусів: бліда заливка, текст кольором
   (Ok, 21.08.2026: «робимо тут як на інших сторінках»). Суцільну заливку з білим текстом
   пробували — вибивалась із решти CRM, де всі статуси напівпрозорі. */
/* Шапка картки транзакції без підкладки (Ok, 21.08.2026): сума великою цифрою, пілюля поруч.
   Раніше тут був блок .rd-sum, і в темній темі він виглядав світлим прямокутником у темному вікні. */
.rd .rd-headsum{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:2px 0 16px}
.rd .rd-headsum .amt{font-size:30px;font-weight:700;line-height:1.1}
.rd .rd-headsum .amt.in{color:var(--teal)}
.rd .rd-headsum .amt.out{color:var(--danger)}
.rd .rb.tx-in{color:var(--teal);background:var(--teal-soft)}
.rd .rb.tx-out{color:var(--danger);background:var(--danger-soft)}
/* Оплата сертифікатом — рядок без руху грошей, тому пілюля нейтральна, не зелена й не червона (Ok, 10.10.2026) */
.rd .rb.tx-neutral{color:var(--ash);background:var(--surface-soft)}
.rd .rb.disc{color:var(--link);background:var(--link-soft,rgba(194,82,56,0.12))}
.rd .rb .mi{width:14px;height:14px;margin:0;vertical-align:baseline;color:currentColor}
.rd-refund-row{flex-wrap:wrap}
.rd-refund-reason{flex-basis:100%;font-size:12px;color:var(--ash);margin-top:2px}
/* Деталі повернення (спосіб · дата · причина) — окремим дрібним рядком під сумою,
   кнопка скасування праворуч. Інакше вузька колонка картки рвала текст (Ok, 10.10.2026) */
.rd-refund-sub{flex-basis:100%;font-size:12px;color:var(--ash);margin-top:2px;line-height:1.35}
.rd-refund-act{flex-basis:100%;display:flex;justify-content:flex-end;margin-top:6px}
/* Підказка про переплату/недоплату після ручної правки ціни оплаченого запису (Ok, 23.07.2026) */
.rd-balance-warn span,.rd-balance-warn b{color:var(--link)}
/* Заголовок блоку дашборда + кнопка-перехід (круг зі стрілкою) навпроти */
.dash-sec-h{display:flex;align-items:center;gap:8px}
.dash-sec-h>:first-child{flex:1;min-width:0}
/* Ручка перетягування блоку «≡» */
.dash-grip{width:32px;height:32px;min-width:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--r-full);background:transparent;color:var(--ash);
  cursor:grab;touch-action:none;transition:background .12s ease,color .12s ease}
.dash-grip svg{width:16px;height:16px}
@media (hover:hover){.dash-grip:hover{background:var(--surface-soft);color:var(--ink)}}
.dash-grip:active{cursor:grabbing}
/* Щоб при тягненні не виділявся текст заголовків (Ok, 10.08.2026).
   touch-action:none вже стоїть вище — без нього тач-жест скасовувався б скролом. */
.dash-grip{-webkit-user-select:none;user-select:none}
.dash-sec.dash-dragging{opacity:.45}
.dash-drop-line{height:3px;border-radius:2px;background:var(--canvas-dark);margin:6px 4px}
/* Готівка vs картка: великий % як водяний знак на фоні картки, за текстом суми */
.pm-bg{position:absolute;right:24px;bottom:24px;  /* = внутрішні відступи .card; font-weight ставить JS від частки % */
  font-size:90px;line-height:1;opacity:.1;pointer-events:none;user-select:none}
/* Витрати по статтях: смужки-частки */
.exp-row{padding:10px 0;border-top:1px solid var(--hairline-light)}
.exp-row:first-child{border-top:none;padding-top:0}
.exp-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:7px}
.exp-nm{font-size:14px;font-weight:500}
.exp-amt{font-size:14px;white-space:nowrap}
.exp-track{height:10px;border-radius:var(--r-full);background:var(--surface-soft);overflow:hidden}
.exp-fill{height:100%;border-radius:var(--r-full);background:var(--canvas-dark)}
.exp-fill.top{background:#C25238}
.exp-fill.small{background:#d5d5da}
/* Фільтр груп у «Давно не приходили»: на телефоні ряд пілюль ширший за екран і остання
   («180+ дн») обрізалася. Даємо переносити рядки й займати всю ширину (Ok, 06.08.2026) */
@media(max-width:743px),(max-height:500px){
  .cli-inact-steps{flex-wrap:wrap;overflow-x:visible;padding-bottom:0}
  .cli-inact-steps + .btn{margin-top:2px}
  /* Хвостик легенди на телефоні розповзався на пів екрана й тиснув графік */
  .rd-lg-more{display:none}
}
/* Телефон у списку «Давно не приходили» — клікабельний, дзвінок одним дотиком */
.cli-tel{color:var(--ink);text-decoration:none;white-space:nowrap}
@media (hover:hover){.cli-tel:hover{color:#C25238;text-decoration:underline;text-underline-offset:3px}}
/* Попередження на «Аналітика → Клієнти», коли історія коротша за обраний період */
.cli-hist{margin:10px 0 0;padding:10px 14px;border-radius:var(--r-md,12px);
  background:var(--surface-soft);color:var(--stone);font-size:13px;line-height:1.45}
.cli-hist b{color:var(--ink)}
/* Згорнута група статей: клік по назві розкриває, з чого вона складається (Ok, 06.08.2026) */
.exp-grp>.exp-top{cursor:pointer;user-select:none}
.exp-arr{color:#C25238;flex:0 0 auto;margin-right:6px;vertical-align:-3px;
  transition:transform .16s ease}
.exp-grp.on .exp-arr{transform:rotate(90deg)}
/* Усередині групи — ті самі смужки, тільки дрібніші */
.exp-det{margin-top:10px;padding-left:14px;border-left:2px solid var(--hairline-light)}
.exp-det-row{padding:7px 0}
.exp-det-row:first-child{padding-top:0}
.exp-det-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px}
.exp-det-nm{font-size:13px;color:var(--stone)}
.exp-det-amt{font-size:13px;white-space:nowrap;color:var(--stone)}
.exp-det-amt b{color:var(--ink);font-weight:600}
.exp-track-sm{height:6px}
/* Завантаженість майстрів: кільця (donut) + перемикач локацій */
.ut-donuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}
.ut-dcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.ut-donut{width:72px;height:72px}
.ut-arc.lo{stroke:#d5d5da}
.ut-arc.mid{stroke:var(--canvas-dark)}
.ut-arc.hi{stroke:#C25238}
.ut-arc.over{stroke:var(--danger)}                                 /* понад 100% — перевантаження, видно одразу (Ok, 12.08.2026) */
.ut-donut-t{font-size:14px;font-weight:600;fill:var(--ink)}
.ut-dnm{font-size:13px;font-weight:500;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Перший донат — середня завантаженість локації: суцільна чорна заливка, білий донат+текст (Ok, 13.07.2026) */
.ut-dcard.ut-avg{background:var(--canvas-dark);border-radius:var(--r-lg);padding:10px 6px 8px}
.ut-dcard.ut-avg .ut-dnm{color:#fff;font-weight:700}
.ut-dcard.ut-avg .ut-donut-t{fill:#fff}
.ut-dcard.ut-avg .muted{color:rgba(255,255,255,0.85)}
/* ── Головна майстра: «зараз», день, адміністратор рядком (Ok, 24.08.2026) ──
   Сторінку відкривають між клієнтами на кілька секунд, тому головне — великим,
   а місячні підсумки поїхали вниз. */
.mw-now{background:var(--surface-card);border-radius:var(--r-card,14px);padding:16px 18px;margin:14px 0 12px}
/* Обводку «клієнт у кріслі» прибрано (Ok, 24.08.2026) — лишився теракотовий підпис,
   цього досить, а рамка на всю картку робила екран строкатим. */
.mw-now-when{font-size:13px;color:var(--stone);margin-bottom:2px}
.mw-now.on .mw-now-when{color:var(--link);font-weight:600}
.mw-now-nm{font-size:20px;font-weight:600;color:var(--ink);line-height:1.25}
.mw-now-svc{font-size:14px;color:var(--body);margin-top:2px}
.mw-now-note{font-size:13px;color:var(--body);line-height:1.45;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--hairline-light)}
/* шапка дня: заголовок ліворуч, хто з адміністраторів — праворуч дрібним */
.mw-day-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.mw-adm{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--body)}
.mw-adm .muted{font-size:13px}
.mw-adm-ava{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:center 10%;display:block}
.mw-adm-ava.ph{display:inline-flex;align-items:center;justify-content:center;background:var(--canvas-dark);
  color:var(--on-dark);font-size:11px;font-weight:600}
/* список дня */
.mw-day{display:flex;flex-direction:column;gap:8px}
.mw-row{display:flex;align-items:center;gap:12px;background:var(--surface-card);border-radius:var(--r-card,14px);
  padding:12px 14px;border:2px solid transparent}
/* Обводку «зараз за розкладом» (.mw-row.on) прибрано на прохання Ok (29.08.2026):
   достатньо однієї позначки — заливки, коли клієнта відмітили як прибулого.
   Клас .on у розмітці лишається, просто нічого не малює. */
/* Клієнт уже прийшов — теракотова ЗАЛИВКА (Ok, 24.08.2026).
   Текст білий — на теракоті він дає контраст 4.6, темний лише 3.6 (і скрізь у CRM
   на теракотовій заливці стоїть саме білий). */
.mw-row.arrived{background:var(--link);border-color:var(--link)}
.mw-row.arrived .mw-row-t,.mw-row.arrived .mw-row-nm{color:#fff}
.mw-row.arrived .mw-row-svc{color:rgba(255,255,255,0.85)}
.tag.mw-arrived{color:#fff;background:rgba(255,255,255,0.22)}
@media (hover:hover){.mw-row.arrived:hover{background:#a94530}}
.mw-row-t{font-size:15px;font-weight:600;color:var(--ink);min-width:46px}
.mw-row-m{flex:1;min-width:0}
.mw-row-nm{font-size:15px;color:var(--ink)}
.mw-row-svc{font-size:13px;color:var(--stone);margin-top:1px}
/* вікно між записами — це або обід, або місце під ще одного клієнта */
.mw-gap{font-size:13px;color:var(--stone);padding:2px 14px;display:flex;align-items:center;gap:8px}
.mw-gap::before,.mw-gap::after{content:"";flex:1;height:1px;background:var(--hairline-light)}
@media (hover:hover){.mw-row:hover,.mw-now:hover{background:var(--surface-soft,var(--surface-card))}}
/* «Мій день» на ТЕЛЕФОНІ (Ok, 04.09.2026). Довга назва послуги («Біозавивка(обовʼязкова
   попередня консультація)») ламалась на три рядки й заповзала ПІД позначку статусу:
   у слові немає пробілів, тому воно вилазило за свій блок, а сама позначка стискалась.
   Тепер: рядок один — імʼя і послуга обрізаються трьома крапками, позначка не стискається,
   а час стоїть на одній лінії з імʼям, а не посеред картки. */
@media(max-width:743px),(max-height:500px){
  .mw-row{align-items:flex-start;gap:10px}
  /* позначка статусу дрібніша, ніж у таблицях: тут вона другорядна поруч з імʼям
     клієнта, а місце в рядку віддаємо назві послуги (Ok, 04.09.2026) */
  .mw-row > .tag{flex:0 0 auto;padding:3px 8px;font-size:11px;align-self:center}
  .mw-row-nm,.mw-row-svc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Адміністратори на зміні — прямокутне фото, градієнт знизу, текст поверх фото (Ok, 20.07.2026) */
.adm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.adm-card{position:relative;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--panel2)}
.adm-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.adm-photo.ph{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:42px;font-weight:600}
.adm-ov{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 13px;
  background:linear-gradient(to top,rgba(0,0,0,0.80) 0%,rgba(0,0,0,0.46) 45%,rgba(0,0,0,0) 100%)}
.adm-card-nm{font-weight:600;font-size:15px;line-height:1.25;color:#fff}
.adm-card-loc{font-size:13px;line-height:1.3;color:rgba(255,255,255,0.82);margin-top:1px}
.ut-dcard.ut-avg .ut-donut circle{stroke:rgba(255,255,255,0.30)}   /* фон кільця */
.ut-dcard.ut-avg .ut-arc{stroke:#fff}                              /* дуга біла */
/* вирівнюємо всі донати по донату чорної картки (у неї padding-top зверху) — Ok, 13.07.2026 */
.ut-donuts .ut-dcard:not(.ut-avg){padding-top:10px}
/* «···» в рядку зарплати: чорний круг (висота = кнопка «Виплатити») з білими крапками */
.sal-more{width:34px;height:34px;min-width:34px;padding:0;border:none;background:var(--canvas-dark);
  border-radius:50%;color:var(--on-dark);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease}
@media (hover:hover){.sal-more:hover{background:var(--charcoal)}}
/* У рядку таблиці кружечок «···» на 34px виглядав важким і перетягував увагу на себе —
   там він менший (Ok, 26.08.2026). Поза таблицями (напр. поруч із «Виплатити»)
   розмір лишається 34px: там він рівняється по висоті сусідньої кнопки. */
table .sal-more{width:28px;height:28px;min-width:28px}
table .sal-more svg{width:15px;height:15px}
/* Кнопка-стрілка в рядку транзакції: відкриває деталі */
/* Стрілка в кружечку: тонкий обід, теракотовий шеврон; при наведенні кружечок заливається (Ok, 02.08.2026) */
.tx-open{width:34px;height:34px;min-width:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--link);border-radius:50%;background:transparent;color:var(--link);
  cursor:pointer;transition:background .12s ease}
@media (hover:hover){}
/* Рядок-попередження над касою: за період є видалені транзакції (Ok, 28.07.2026) */
.tx-del-note{display:flex;align-items:center;gap:6px;flex-wrap:wrap;cursor:pointer;
  margin:2px 2px 10px;padding:9px 12px;border-radius:var(--r-md);font-size:13px;
  background:var(--danger-soft);color:var(--danger)}
.tx-del-note b{font-weight:600}
.tx-del-note .lnk{text-decoration:underline}
/* Номер-посилання всередині таблиці (напр. «№796» в оплатах клієнта) — Ok, 22.08.2026 */
.tbl a.lnk{color:var(--link);cursor:pointer}
@media (hover:hover){ .tbl a.lnk:hover{text-decoration:underline} }
@media (hover:hover){.tx-del-note:hover{filter:brightness(.97)}}
/* Видалена транзакція: лишається в списку, але видно, що в суми не йде (Ok, 28.07.2026) */
.tx-deleted{opacity:.55}
.tx-deleted td{text-decoration:line-through;text-decoration-color:var(--muted)}
/* підпис «видалив …» лишається читабельним: inline-block розриває успадкування закреслення */
.tx-deleted td .muted{text-decoration:none;display:inline-block;width:100%;margin-top:2px}
.tx-deleted td:last-child{text-decoration:none}
/* Налаштування дашборда: список блоків з чекбоксами */
.dash-tgl{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:14px;cursor:pointer;
  border-top:1px solid var(--hairline-light)}
.dash-tgl:first-of-type{border-top:none}
.dash-tgl input{cursor:pointer}
@media (hover:hover){.dash-tgl:hover span{color:var(--ink)}}
.rd-edit{margin-left:auto;background:transparent;border:none;padding:0;
  font-size:13px;font-weight:600;color:var(--ash);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;line-height:1.4;align-self:center;height:28px}
@media (hover:hover){.rd-edit:hover{color:var(--ink)}
  /* «Додати примітку» теракотова, тож і при наведенні лишається в бренд-кольорі */
  .rd-edit.cn-add:hover{color:var(--link);opacity:.8}}
.rd-edit-tx{transform:translateY(2px)}
.rd-svc-ed{align-items:flex-end;flex-wrap:wrap;gap:10px}
.rd-svc-ed .rd-svc-main{flex:1 1 100%;min-width:0}
.rd-svc-ed .rd-svc-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-ed-fields{display:flex;gap:8px;flex:1 1 auto;min-width:0}
.rd-ed-fields label{display:flex;flex-direction:column;font-size:12px;color:var(--stone);
  gap:4px;text-transform:none;letter-spacing:0;font-weight:600;flex:1 1 auto;min-width:0}
.rd-svc-ed .rd-ed-fields input[type="number"]{height:36px;padding:0 12px;font-size:13px;font-weight:500;
  border-radius:var(--r-md);border-color:var(--hairline-light);width:100%}
.rd-svc-main .oz-select{display:flex;width:100%;max-width:100%;min-width:0}
.rd-svc-main .oz-trigger{width:100%;min-width:0;max-width:100%}
.rd-svc-main .oz-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;text-align:left}
.rd-row-del{background:transparent;border:none;padding:0;color:var(--danger);
  font-size:13px;font-weight:600;cursor:pointer;align-self:center}
@media (hover:hover){.rd-row-del:hover{opacity:.7}}
/* однакові просвіти зверху й знизу: раніше над кнопкою було 26px, під нею 2px (Ok, 19.08.2026) */
.rd-add{width:100%;margin:12px 0 24px;padding:14px;border:1.5px dashed var(--hairline-light);
  border-radius:var(--r-md);background:transparent;color:var(--ink);font-weight:600;font-size:13px;cursor:pointer}
@media (hover:hover){.rd-add:hover{border-color:var(--ink);background:var(--surface-soft)}}
@media(max-width:680px){.rd{flex-direction:column;align-items:stretch}.rd-left,.rd-right{width:100%}.modal.rec-wide{width:96vw}}

/* Toast — чорна пігулка в стилі сайту (Ok, 10.07.2026) */
.toast{position:fixed;bottom:24px;right:24px;display:flex;align-items:center;gap:10px;
  background:var(--canvas-dark);color:var(--on-dark);border:none;
  padding:13px 20px;border-radius:var(--r-full);z-index:80;
  font-size:14px;font-weight:600;letter-spacing:0.2px;
  box-shadow:0 14px 34px -8px rgba(0,0,0,0.4);
  animation:toast-in .18s ease}
.toast .toast-ic{width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff}
.toast.err .toast-ic{background:var(--danger)}
.toast .toast-ic svg{width:12px;height:12px}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ==================== CARDS (KPI) ==================== */
.cards{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}
/* Картки головної майстра на планшеті вертикально — по дві в ряд (Ok, 29.08.2026).
   Базово вони йдуть одним flex-рядком (3 і 4 штуки), і на вузькому екрані виходили
   завузькі: у «Підсумках» картка була 139px і текст ліз у чотири рядки.
   ⚠️ Правило має стояти ПІСЛЯ `.cards{display:flex}` — вага однакова, тож виграє те,
   що нижче у файлі (перший підхід я поставила вище і він мовчки не діяв). */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait){
  .mw-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .mw-cards > .card{min-width:0}
}
/* Телефон СТОЯЧИ: «Зароблено сьогодні» на всю ширину, «Чайові» і «Бонуси» під ним
   в один ряд (Ok, 04.09.2026). Просвіт на телефоні 14px, тож парі треба 50% − 7px —
   як у картках «Моєї зарплати». */
@media (max-width:743px) and (orientation:portrait){
  .mw-cards:not(.mw-mcards) > .card{flex:1 1 calc(50% - 7px);min-width:0}
  .mw-cards:not(.mw-mcards) > .card:first-child{flex:1 1 100%}
  /* бонусної програми може не бути — тоді карток дві, і «Чайові» лишаються на всю ширину */
  .mw-cards:not(.mw-mcards) > .card:nth-child(2):last-child{flex:1 1 100%}
  /* підсумки місяця — 2×2, без картки на всю ширину (Ok, 04.09.2026) */
  .mw-mcards > .card{flex:1 1 calc(50% - 7px);min-width:0}
}
/* Телефон ЛЕЖАЧИ: три картки «за сьогодні» в один ряд, а підсумки місяця (їх чотири) —
   по дві в ряд (Ok, 04.09.2026). Висота на вагу золота, ширини вистачає. */
@media (max-height:500px) and (orientation:landscape){
  .mw-cards:not(.mw-mcards) > .card{flex:1 1 calc(33.333% - 10px);min-width:0}
  .mw-mcards > .card{flex:1 1 calc(50% - 7px);min-width:0}
}
.cards:empty{display:none}   /* якщо показувати нема чого — блок не займає місця */
/* Ряд із вирівняними рядками: підпис, число і пояснення стоять на однаковій висоті
   в усіх картках ряду — навіть коли десь підпис переноситься у два рядки, а десь ні.
   Без цього суми стрибали вгору-вниз на середніх ширинах (Ok, 04.08.2026). */
/* row-gap:0 обовʼязково: відступ 16px між рядками сітки потрапляв УСЕРЕДИНУ карток
   (підпис / число / пояснення — це рядки спільної сітки) і роздував їх (Ok, 04.08.2026) */
.cards.cards-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  column-gap:16px;row-gap:0;margin-bottom:8px}
/* Через row-gap:0 картки, які не влізли в один ряд, стикались упритул — на вузьких
   екранах два ряди виглядали як суцільна пляма. Відступ даємо не сіткою (він би поліз
   усередину карток), а зовнішнім полем самої картки; margin-bottom контейнера при цьому
   зменшено на ті самі 16px, щоб просвіт під блоком лишився 24px (Ok, 26.08.2026) */
.cards.cards-rows > .card{margin-bottom:16px}
.cards.cards-rows > .card{display:grid;grid-template-rows:subgrid;grid-row:span 3;min-width:0}
/* Підпис і число тиснемо до низу картки: коли в сусіда пояснення у два рядки,
   однорядкове не має висіти в повітрі (Ok, 04.08.2026) */
/* Подіум «Топ послуг»: у картці ще й кружечок з місцем, тож рядків чотири */
.cards.cards-rows.cards-rows-4 > .card{grid-row:span 4;justify-items:start}
/* Кольори місць: 1 — теракота, 2 — чорний, 3 — як картка «Низький залишок»
   (той самий фон, що й у .card.net: світлий #fafafa / графіт у темній) — Ok, 04.08.2026.
   Друге місце йде через --canvas-dark, тож у темній темі воно за загальним
   правилом теми стає світло-сірим із темним текстом. */
.card.pod-1{background:#C25238;border-color:#C25238}
.card.pod-2{background:var(--canvas-dark);border-color:var(--canvas-dark)}
.card.pod-3{background:#fafafa}
html[data-theme="dark"] .card.pod-3{background:#40444c;border-color:#40444c}
.card.pod-1 .lbl,.card.pod-1 .val{color:#ffffff;opacity:1}
.card.pod-1 .sub{color:#ffffff;opacity:.85}
.card.pod-1 .rk{background:rgba(255,255,255,0.22);color:#ffffff}
.card.pod-2 .lbl,.card.pod-2 .val{color:var(--on-dark);opacity:1}
.card.pod-2 .sub{color:var(--on-dark);opacity:.8}
.card.pod-2 .rk{background:rgba(255,255,255,0.22);color:var(--on-dark)}
html[data-theme="dark"] .card.pod-2 .rk{background:rgba(0,0,0,0.16)}
.cards.cards-rows > .card > .val{margin-top:0;align-self:end}
/* пояснення тримається одразу під числом, а не падає на дно рядка сітки:
   інакше в картці з коротким підписом воно відривалось від суми (Ok, 04.08.2026) */
.cards.cards-rows > .card > .sub{align-self:start}
.cards.cards-rows > .card > .lbl{align-self:start}
/* Головна картка ряду (чистий прибуток) — ширша й з більшим числом, решта дрібніші:
   око одразу чіпляється за головну цифру (Ok, 04.08.2026).
   Ширшу розкладку вмикаємо лише коли ряд із 5 карток і екран це витягує —
   інакше п'ята картка зривалась у другий ряд сама-одна. */
/* Однакові поля в усіх картках ряду: різні padding'и розтягували спільні рядки
   сітки, і між числом та поясненням зʼявлялась порожнеча (Ok, 04.08.2026) */
.cards.cards-rows > .card{padding:18px}
.cards.cards-rows > .card:not(.hero) .lbl{font-size:13px;margin-bottom:10px}
.cards.cards-rows > .card:not(.hero) .val{font-size:24px;line-height:1.1}
/* Різниця в кеглі головного й звичайного числа має бути невеликою: рядок сітки
   тягнеться під найбільше число, і в сусідів під підписом зяяла діра (Ok, 04.08.2026) */
.cards.cards-rows > .card.hero .val{line-height:1.1}
.cards.cards-rows > .card:not(.hero) .sub{font-size:12px}
/* Проміжна ширина: 4 колонки лишали п'яту картку саму-одну в другому ряду —
   краще рівні 3+2, ніж 4+1 (Ok, 04.08.2026). */
@media(min-width:744px) and (min-height:501px) and (max-width:1079px){
  .cards.cards-rows:has(> :nth-child(5)):not(:has(> :nth-child(6))){
    grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1080px) and (min-height:501px){
  .cards.cards-rows:has(> :nth-child(5)):not(:has(> :nth-child(6))){
    grid-template-columns:1.7fr 1fr 1fr 1fr 1fr}
  /* ряд із трьох, де перша — головна (напр. «Продажі товарів») */
  .cards.cards-rows:has(> .card.hero):has(> :nth-child(3)):not(:has(> :nth-child(4))){
    grid-template-columns:1.7fr 1fr 1fr}
  .cards.cards-rows > .card.hero .val{font-size:30px}
}
/* Рівні колонки: у flex-ряду картка з кнопкою-переходом (обгортка .card-wrap)
   виходила вужчою за сусідів. Grid із однаковими частками робить їх рівними,
   а auto-fit сам переносить на вужчих екранах (Ok, 09.08.2026). */
.cards.cards-eq{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:stretch}
.cards.cards-eq > .card,.cards.cards-eq > .card-wrap{min-width:0}
/* Чия це каса — уся мережа чи конкретна точка (Ok, 09.08.2026) */
.pay-scope{font-size:12px;font-weight:500;opacity:.7;margin-bottom:6px}
/* Дрібний підпис поруч із великим числом («19 з 1368 год», «19/19»). Не сірий і не
   жирний: усередині .val він успадковував жирність, а сірий на теракотовій картці
   майже не читався (Ok, 09.08.2026). Колір бере від картки, лише приглушений. */
.card .val-sub{font-size:13px;font-weight:400;opacity:.7}
/* Заповненість наперед: один рядок замість карток — відсоток, пояснення, різниця */
.fill-hero{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
.fill-big{font-size:34px;font-weight:600;letter-spacing:-0.5px;color:var(--link);line-height:1}
.fill-note{font-size:14px;color:var(--mute)}
.fill-vs{font-size:13px;color:var(--mute);opacity:.8}
.card{position:relative;flex:1;min-width:150px;background:var(--surface-card);
  border:1px solid var(--hairline-light);border-radius:var(--r-lg);
  padding:24px;overflow:hidden;display:flex;flex-direction:column}
.card::before{content:none}
.card.income::before,.card.expense::before,.card.net.pos::before,.card.net.neg::before{content:none}
.card .lbl{color:var(--mute);font-size:14px;font-weight:600;letter-spacing:0;
  text-transform:none;margin-bottom:12px}
/* Число завжди притиснуте до низу картки: підписи бувають в один і в два рядки,
   і без цього суми стрибали по висоті (Ok, 28.07.2026) */
.card .val{font-size:24px;font-weight:700;letter-spacing:-0.3px;color:var(--ink);margin-top:auto}
.card .sub{color:var(--stone);font-size:13px;margin-top:1px}   /* було 8px (Ok, 06.08.2026) */
/* Картка з кнопкою-переходом: при ховері правий нижній кут «вигризається» (маска-виріз),
   а в ніші з'являється кругла кнопка «›» на фоні сторінки → веде на внутрішню сторінку (Ok, 21.07.2026) */
.card-wrap{position:relative;flex:1;min-width:150px;display:flex;cursor:pointer}
.card-wrap > .card{flex:1;min-width:0}
.card-go{position:absolute;right:5.5px;bottom:5.5px;width:20px;height:20px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:2;
  background:transparent;color:var(--ink);border:1px solid currentColor;
  opacity:0;transform:scale(.85);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease}
/* виріз кута = форма з макета (path SVG): фаски + кишеня під кнопку в правому нижньому куті. Маска 40×40 прибиває цю зону */
.card-cut{
  --notch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M60 .66L60 60L3.26 60C6.86 60 9.78 57.1 9.78 53.5L9.78 31.9C9.78 19.7 19.7 9.78 31.9 9.78L50.9 9.78C55.9 9.78 60 5.71 60 .66Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--notch) right bottom/40px 40px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:var(--notch) right bottom/40px 40px no-repeat, linear-gradient(#000 0 0);
  mask-composite:exclude}
/* Обводка вздовж дуги вирізу (маска з'їдає рамку картки на вигині — домальовуємо окремим шаром-сусідом, щоб не був замаскований) */
.card-wrap::after{content:"";position:absolute;right:0;bottom:0;width:40px;height:40px;pointer-events:none;z-index:1;
  background:var(--hairline-light);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M3.26 60C6.86 60 9.78 57.1 9.78 53.5L9.78 31.9C9.78 19.7 19.7 9.78 31.9 9.78L50.9 9.78C55.9 9.78 60 5.71 60 .66' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") right bottom/40px 40px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M3.26 60C6.86 60 9.78 57.1 9.78 53.5L9.78 31.9C9.78 19.7 19.7 9.78 31.9 9.78L50.9 9.78C55.9 9.78 60 5.71 60 .66' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") right bottom/40px 40px no-repeat}
/* на кольорових картках (Виручка=income, Картка=dark) рамки й так нема — обводку вирізу не малюємо. «Чистий прибуток»=net світла, обводка потрібна */
.card-wrap:has(> .income)::after,.card-wrap:has(> .dark)::after{display:none}
@media (hover:hover){
  .card-wrap:hover .card-go{opacity:1;transform:none;pointer-events:auto}
  .card-wrap:not(:hover) > .card-cut{-webkit-mask:none;mask:none}   /* без ховера — суцільна картка, без ніші */
  .card-wrap:not(:hover)::after{opacity:0}                          /* без ховера — без обводки вирізу */
}
@media (hover:none){ .card-go{opacity:1;transform:none;pointer-events:auto} }
.card.income{background:#C25238;border-color:#C25238;color:var(--on-dark)}
.card.income .lbl{color:var(--on-dark);opacity:1}       /* на теракоті білий=4.66:1; дим .85 не проходив */
.card.income .val{color:var(--on-dark)}
.card.income .sub{color:var(--on-dark);opacity:1}       /* .75 давало ~3.4:1 — не проходило */
.card.income .muted{color:rgba(255,255,255,0.5) !important}
.card.income span[style*="border-radius:9999px"]{background:rgba(255,255,255,0.2) !important;color:#ffffff !important}
.card.income span[style*="border-radius:50%"]{background:rgba(255,255,255,0.2) !important;color:#ffffff !important}
.card.income span[style*="border-radius:50%"] svg{fill:#ffffff}
.card.dark{background:var(--canvas-dark);border-color:var(--canvas-dark)}
.card.dark .lbl{color:var(--on-dark);opacity:.85}
.card.dark .val{color:var(--on-dark)}
.card.dark .sub{color:var(--on-dark);opacity:.75}
.card.dark .muted{color:rgba(255,255,255,0.5) !important}
.card.expense .val{color:var(--ink)}
/* ==================== ОГЛЯД: головна картка розділу (Ok, 04.08.2026) ====================
   Акцент — за важливістю, а не за категорією: раніше теракотою світились обороти,
   а чистий прибуток був найблідішим на сторінці. Тепер навпаки. */
/* Теракота — фірмовий колір CRM (--primary #C25238), той самий, що на решті акцентів.
   Своїх відтінків тут не вигадуємо (Ok, 04.08.2026). */
.card.hero{background:#C25238;border-color:#C25238;color:#ffffff}
.card.hero .lbl{color:#ffffff;opacity:1}
.card.hero .val{color:#ffffff;font-size:32px}
.card.hero .sub{color:#ffffff;opacity:.85}
/* Місця всередині КОЖНОГО блоку (Ok, 05.08.2026): 1 — теракота (.hero),
   2 — чорна картка (.lead; у темній темі за загальним правилом теми стає
   світло-сірою), 3 — світло-сіра (.third), решта — звичайного кольору.
   Той самий механізм, що й у подіумі «Топ послуг». */
.card.lead{background:var(--canvas-dark);border-color:var(--canvas-dark)}
.card.lead .lbl,.card.lead .val{color:var(--on-dark);opacity:1}
.card.lead .sub{color:var(--on-dark);opacity:.8}
.card.third{background:#fafafa}
html[data-theme="dark"] .card.third{background:#40444c;border-color:#40444c}
/* Колір картки НЕ залежить від суми — завжди теракота (Ok, 04.08.2026).
   Мінус видно по самому числу. */
.card.net{background:#fafafa}
.card.net .val{color:var(--ink)}

/* KPI-menu (три крапки) */
.kcard{overflow:visible}
.kcard .kdots{position:absolute;top:12px;right:12px;border:none;background:transparent;
  color:var(--stone);font-size:20px;line-height:1.0;cursor:pointer;padding:0 8px;border-radius:var(--r-full)}
@media (hover:hover){.kcard .kdots:hover{background:var(--surface-soft);color:var(--ink)}}
/* Та сама кнопка «⋯», але в рядку списку, а не в кутку картки (Ok, 10.08.2026) */
.kdots.row-dots{border:none;background:transparent;color:var(--stone);font-size:20px;line-height:1;
  cursor:pointer;padding:0 8px;border-radius:var(--r-full);flex-shrink:0}
@media (hover:hover){.kdots.row-dots:hover{background:var(--surface-soft);color:var(--ink)}}
.kmenu{position:absolute;top:44px;right:12px;z-index:30;background:var(--canvas-light);
  border:1px solid var(--hairline-light);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(0,0,0,0.12);padding:6px;min-width:190px;
  display:flex;flex-direction:column;gap:4px}
.kmenu.hidden{display:none}
.kmenu button{text-align:left;background:transparent;border:none;padding:8px 14px;
  border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
@media (hover:hover){.kmenu button:hover{background:var(--surface-soft)}}

/* Фінанси hero — прибираємо dark gradient */
.fin-cards .card .val{font-size:24px}
/* «З чого складається дохід»: послуги / товари / сертифікати (Ok, 06.08.2026).
   Власна сітка, бо глобальне правило для ряду карток робить перші дві великими,
   а тут усі три джерела рівноцінні. */
.fin-src-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.fin-src-cards .card{min-width:0}
.fin-src-cards .card .val{font-size:24px}
@media(max-width:743px),(max-height:500px){
  .fin-src-cards{grid-template-columns:1fr 1fr;gap:14px}
  .fin-src-cards .card .val{font-size:20px}
}
/* Планшет вертикально: auto-fit із мінімумом 220px ставив лише дві картки в ряд,
   і «Сертифікати» звисали самі. Фіксуємо три (Ok, 26.08.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait){
  .fin-src-cards{grid-template-columns:repeat(3,1fr);gap:12px}
}
/* Шапка графіка «Дохід і витрати»: назва — легенда — групування */
.fin-chart-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.fin-chart-legend{display:flex;gap:14px;font-size:13px;color:var(--stone)}
.fin-lg{display:inline-flex;align-items:center;gap:6px}
.fin-lg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.fin-lg .fin-lg-in{background:#C25238}
.fin-lg .fin-lg-out{background:#171819}
.fin-chart-head .fin-grp{margin-left:auto;font-size:14px}
@media(max-width:743px),(max-height:500px){
  .fin-chart-head{gap:8px}
  .fin-chart-head .fin-grp{margin-left:0;width:100%}
}
/* Транзакції: картка «Готівка» = помаранчева, «Карта» = чорна (Ok, 09.07.2026) */
.card.fin-cash{background:#C25238;border-color:#C25238}
.card.fin-card{background:var(--canvas-dark);border-color:var(--canvas-dark)}
.card.fin-cash .lbl,.card.fin-cash .val,.card.fin-cash .kdots,
.card.fin-card .lbl,.card.fin-card .val,.card.fin-card .kdots{color:var(--on-dark)}
.card.fin-cash .sub,.card.fin-card .sub{color:var(--on-dark);opacity:.9}
.card.fin-cash .sub{opacity:1}
@media (hover:hover){.card.fin-cash .kdots:hover,.card.fin-card .kdots:hover{background:rgba(255,255,255,0.18);color:var(--on-dark)}}
.fin-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:20px;scrollbar-width:none}
.fin-tabs::-webkit-scrollbar{display:none}
.fin-tab{flex:0 0 auto;padding:8px 16px;border:1px solid var(--hairline-light);border-radius:var(--r-full);
  background:transparent;color:var(--ink);font-weight:600;font-size:14px;
  white-space:nowrap;transition:background .14s ease,border-color .14s ease;height:36px;
  /* flex, щоб лічильник у пілюлі стояв рівно по центру, а не на базовій лінії тексту
     (Ok, 08.08.2026) */
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.fin-tab .rd-cnt{min-width:20px;height:20px;font-size:11.5px;padding:0 5px}
/* «ШІ адміністратор» → Задачі: фільтри-пілюлі компактні, як маленькі пілюлі статусів
   у таблицях (Ok, 22.09.2026) */
.fin-tab.ai-chip{padding:4px 11px;height:26px;font-size:12px;gap:4px}
/* Стрічка переписки у вікні задачі/діалогу: тонкий бігунок у кольорах теми —
   системний білів у темній темі (Ok, 22.09.2026) */
/* scrollbar-width тут не ставимо — див. примітку біля глобальних правил бігунків */
.ai-thread::-webkit-scrollbar,.ai-ta::-webkit-scrollbar{width:8px}
.ai-thread::-webkit-scrollbar-thumb,.ai-ta::-webkit-scrollbar-thumb{background:var(--hairline-light);border-radius:8px}
.ai-thread::-webkit-scrollbar-track,.ai-ta::-webkit-scrollbar-track{background:transparent}
.ai-thread::-webkit-scrollbar-button,.ai-ta::-webkit-scrollbar-button{display:none;height:0}
/* куточок-резайзер у темній темі світився білим квадратиком — робимо прозорим,
   тягнути за кут можна як і раніше (Ok, 22.09.2026) */
.ai-ta::-webkit-resizer{background:transparent}
/* Бігунок у вікнах і скрол-блоках із заокругленими кутами — з відступом від краю:
   прозора рамка навколо повзунка робить 4px «повітря», інакше він притиснутий
   до заокругленого борту (Ok, 22.09.2026) */
.modal::-webkit-scrollbar,.ai-thread::-webkit-scrollbar,.ai-ta::-webkit-scrollbar{width:12px}
.modal::-webkit-scrollbar-thumb,.ai-thread::-webkit-scrollbar-thumb,.ai-ta::-webkit-scrollbar-thumb{
  background:var(--hairline-light);border:4px solid transparent;background-clip:padding-box;border-radius:10px}
.modal::-webkit-scrollbar-thumb:hover,.ai-thread::-webkit-scrollbar-thumb:hover,.ai-ta::-webkit-scrollbar-thumb:hover{
  background:var(--stone);background-clip:padding-box}
/* «ШІ адміністратор» → Задачі: фіксовані ширини колонок, щоб при перемиканні
   фільтрів колонки не стрибали від різної довжини вмісту (Ok, 22.09.2026) */
table.ai-task-tbl th:nth-child(1){width:24%}
table.ai-task-tbl th:nth-child(2){width:14%}
table.ai-task-tbl th:nth-child(4){width:90px}
/* «ШІ адміністратор» → Задачі на телефоні: замість рядків «підпис — значення» картка
   читається як повідомлення — імʼя з іконкою каналу і пілюля типу в один рядок,
   під ними дата, нижче рядок дії; «Оцінка —» без оцінки не показується (Ok, 22.09.2026) */
@media(max-width:743px),(max-height:500px){
  table.ai-task-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:2px 10px;padding:10px 14px;align-items:start}
  table.ai-task-tbl.cards-mob td{padding:0;border-top:none;text-align:left;white-space:normal}
  table.ai-task-tbl.cards-mob td::before{display:none}
  table.ai-task-tbl.cards-mob td[data-label="Клієнт"]{grid-area:1/1;display:block;min-width:0}
  table.ai-task-tbl.cards-mob td[data-label="Тип"]{grid-area:1/2;justify-content:flex-end;text-align:right}
  table.ai-task-tbl.cards-mob td[data-label="Статус / дія"]{grid-column:1/-1;display:block;
    margin-top:6px;padding-top:8px;border-top:1px solid var(--hairline-light);font-size:13px}
  table.ai-task-tbl.cards-mob td[data-label="Оцінка"]{grid-column:1/-1;display:block;padding-top:6px}
  table.ai-task-tbl.cards-mob td[data-label="Оцінка"]:has(> .muted){display:none}
  /* «Історія погоджень» на телефоні — та сама розкладка, що й картки задач:
     клієнт з датою ліворуч, статус праворуч, запис окремим рядком під лінією (Ok, 22.09.2026) */
  table.ai-hist-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:2px 10px;padding:10px 14px;align-items:start}
  table.ai-hist-tbl.cards-mob td{padding:0;border-top:none;text-align:left;white-space:normal}
  table.ai-hist-tbl.cards-mob td::before{display:none}
  table.ai-hist-tbl.cards-mob td[data-label="Клієнт"]{grid-area:1/1;display:block;min-width:0}
  table.ai-hist-tbl.cards-mob td[data-label="Статус запису"]{grid-area:1/2;justify-content:flex-end;text-align:right;font-size:13px}
  table.ai-hist-tbl.cards-mob td[data-label="Запис"]{grid-column:1/-1;display:block;
    margin-top:6px;padding-top:8px;border-top:1px solid var(--hairline-light);font-size:13px}
  /* Учасники кампанії реактивації на телефоні — та сама карткова розкладка:
     клієнт і статус зверху, послуга під лінією, дати з підписами, кнопка праворуч (Ok, 22.09.2026) */
  table.ai-camp-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:2px 10px;padding:10px 14px;align-items:start}
  table.ai-camp-tbl.cards-mob td{padding:0;border-top:none;text-align:left;white-space:normal}
  table.ai-camp-tbl.cards-mob td::before{display:none}
  table.ai-camp-tbl.cards-mob td[data-label="Клієнт"]{grid-area:1/1;display:block;min-width:0}
  table.ai-camp-tbl.cards-mob td[data-label="Статус"]{grid-area:1/2;justify-content:flex-end;text-align:right;font-size:13px}
  table.ai-camp-tbl.cards-mob td[data-label="Послуга"]{grid-column:1/-1;display:block;
    margin-top:6px;padding-top:8px;border-top:1px solid var(--hairline-light);font-size:13px}
  table.ai-camp-tbl.cards-mob td[data-label="Планується"],
  table.ai-camp-tbl.cards-mob td[data-label="Відправлено"]{grid-column:1/-1;display:flex;
    justify-content:space-between;font-size:13px}
  table.ai-camp-tbl.cards-mob td[data-label="Планується"]::before,
  table.ai-camp-tbl.cards-mob td[data-label="Відправлено"]::before{display:block;content:attr(data-label);
    color:var(--stone);font-size:12px}
  table.ai-camp-tbl.cards-mob td[data-label=""]{grid-column:1/-1;justify-content:flex-end;padding-top:6px}
  /* «Звʼязки» на телефоні — карткою: клієнт з телефоном ліворуч, канал праворуч,
     знизу кількість записів і остання активність (Ok, 22.09.2026) */
  table.ai-links-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:2px 10px;padding:10px 14px;align-items:start}
  table.ai-links-tbl.cards-mob td{padding:0;border-top:none;text-align:left;white-space:normal}
  table.ai-links-tbl.cards-mob td::before{display:none}
  table.ai-links-tbl.cards-mob td[data-label="Клієнт"]{grid-area:1/1;display:block;min-width:0}
  table.ai-links-tbl.cards-mob td[data-label="Канал"]{grid-area:1/2;justify-content:flex-end;text-align:right;font-size:13px}
  table.ai-links-tbl.cards-mob td[data-label="Записів"]{grid-area:2/1;display:flex;gap:6px;
    justify-content:flex-start;font-size:13px;margin-top:8px}
  table.ai-links-tbl.cards-mob td[data-label="Записів"]::before{display:block;content:"Записів";
    color:var(--stone);font-size:12px}
  table.ai-links-tbl.cards-mob td[data-label="Остання активність"]{grid-area:2/2;justify-content:flex-end;
    text-align:right;font-size:13px;color:var(--stone);margin-top:8px}
}
/* «ШІ адміністратор» → Діалоги на телефоні: список на всю ширину, відкритий діалог —
   окремий екран з кнопкою «назад» у шапці (Ok, 22.09.2026). На десктопі кнопки немає. */
.ai-dlg-back{display:none}
@media(max-width:743px),(max-height:500px){
  /* !important — бо базова розкладка задана інлайн-стилями в розмітці */
  .ai-dlg-wrap{display:block!important;height:auto!important;min-height:0!important}
  .ai-dlg-wrap .ai-dlg-list{width:100%!important;min-width:0!important;border-right:none!important}
  .ai-dlg-wrap .ai-dlg-main{display:none!important}
  .ai-dlg-wrap.dlg-open .ai-dlg-list{display:none!important}
  .ai-dlg-wrap.dlg-open .ai-dlg-main{display:flex!important;height:calc(100vh - 240px);min-height:360px}
  .ai-dlg-back{display:inline-flex}
  /* Модалка «Нова кампанія реактивації» на телефоні (Ok, 22.09.2026):
     підпис «Початок кампанії» окремим рядком, дата й час — поруч в один ряд;
     шаблон повідомлення вищий, щоб типовий текст читався без прокрутки */
  .ai-camp-start > span:first-child{flex:0 0 100%}
  /* базис 0 — інакше дата (basis ~180px) + час не вміщались у ряд 317px і час переносився;
     у тригера дати глобальний min-width:180px — тут його знімаємо, бо пілюля
     вилазила на пілюлю часу (Ok, 22.09.2026) */
  .ai-camp-start .oz-date{flex:1 1 0;min-width:0}
  .ai-camp-start .oz-dt-trigger{min-width:0;width:100%;box-sizing:border-box}
  .ai-camp-start .oz-date .oz-dt-field{width:100%;min-width:0}
  .ai-camp-start .oz-time{flex:0 0 auto}
  .ai-camp-tmpl{min-height:118px}
}
/* «Замовлення» в салоні з однією точкою: рядка фільтрів немає, тож кругла кнопка
   налаштувань закупівлі стоїть у рядку вкладок праворуч і заввишки з пілюлю (Ok, 04.09.2026) */
.fin-tabs.ord-tabs-cfg{align-items:center}
.fin-tabs.ord-tabs-cfg > .flt-cfg{margin-left:auto;display:inline-flex;align-items:center}
.fin-tabs.ord-tabs-cfg > .flt-cfg .btn.ic-btn{width:36px;min-width:36px;height:36px;padding:0}
/* «ШІ адміністратор»: службові вкладки (Звʼязки/Описи/Налаштування) сховані під
   круглою шестернею праворуч від рядка вкладок; кнопка стоїть ПОЗА скрол-контейнером
   вкладок, щоб не їхати за край на вузькому екрані; меню випадає під нею (Ok, 22.09.2026) */
.ai-tabs-row{display:flex;align-items:flex-start;gap:10px}
.ai-tabs-row .fin-tabs{flex:1;min-width:0}
.ai-cfg{position:relative;flex:0 0 auto;display:inline-flex}
.ai-cfg .btn.ic-btn{width:36px;min-width:36px;height:36px;padding:0}
.ai-cfg .kmenu{top:42px;right:0}
.ai-cfg .btn.ic-btn.on{background:var(--canvas-dark);color:var(--on-dark);border-color:var(--canvas-dark)}
.ai-cfg .kmenu button.on{background:var(--surface-soft)}
/* Лічильник у пілюлі — теракотовий, як бейдж у меню (Ok, 08.08.2026) */
.fin-tab .rd-cnt,
html[data-theme="dark"] .fin-tab .rd-cnt{background:#C25238;color:#ffffff}
@media (hover:hover){.fin-tab:hover{background:var(--surface-soft)}}
.fin-tab.on{background:var(--canvas-dark);color:var(--on-dark);border-color:var(--canvas-dark)}
/* Сегментований перемикач: дві половинки в одній капсулі. Використовуємо там,
   де поруч є ще один ряд пілюль — щоб їх не плутали між собою (Ok, 04.08.2026).
   ⚠️ Один клас на ДВА елементи: перемикач режимів у «Завантаженості» (діти —
   .seg > button) і пігулка «Куди оприбуткувати» у Складі (діти — .seg-btn).
   Раніше правило дублювалось у двох місцях файлу і вони підмішували стилі
   одне одному непомітно; зведено в одне (05.09.2026). Міняєш тут — перевіряй обидва. */
.seg{display:inline-flex;flex:0 0 auto;gap:2px;padding:3px;border-radius:var(--r-full);
  background:var(--surface-soft);border:1px solid var(--hairline-light)}
.seg > button{flex:0 0 auto;border:none;background:transparent;cursor:pointer;
  padding:5px 14px;border-radius:var(--r-full);font-size:13px;font-weight:600;
  color:var(--mute);white-space:nowrap;transition:background .14s ease,color .14s ease}
@media (hover:hover){.seg > button:hover{color:var(--ink)}}
.seg > button.on{background:var(--canvas-dark);color:var(--on-dark)}
/* Підказка новому співробітнику: вкладка «Посади» дихає, поки в неї не зайшли (Ok, 03.08.2026) */
.fin-tab.tab-hint{border-color:var(--link);color:var(--link);
  animation:tabHint 1.6s ease-in-out infinite}
@keyframes tabHint{0%,100%{box-shadow:0 0 0 0 rgba(194,82,56,.35)}50%{box-shadow:0 0 0 5px rgba(194,82,56,0)}}
.tab-hint-txt{font-size:13px;align-self:center;margin-left:4px}
@media(max-width:743px),(max-height:500px){.tab-hint-txt{display:none}}

/* KPI-layout: 1 велика + 4 малі (ряд «Візити»): головне число — скільки всього
   записів, решта статусів дрібніші (Ok, 04.08.2026) */
.cards.cards-1big{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:1fr;gap:16px}
.cards.cards-1big > :nth-child(1){grid-row:span 2}
.cards.cards-1big .card{padding:16px}
/* число з підписом притиснуті до низу картки (Ok, 04.08.2026) */
.cards.cards-1big > :nth-child(1) .val{font-size:36px;font-weight:500;letter-spacing:-0.3px;margin-top:auto}
.cards.cards-1big > :nth-child(n+2) .val{font-size:20px}

/* KPI-layout: 2 hero + 4 mini (коли 6 карток у ряду).
   Grid-елемент — .card АБО обгортка .card-wrap (потрібна для вирізу-ніші), тож селектори по прямому дитині взагалі, а стилі картки — через descendant .card */
.cards:not(.sp-cards):has(> :nth-child(6)){
  display:grid;grid-template-columns:1.3fr 1.3fr 1fr 1fr;grid-auto-rows:1fr;gap:16px}
.cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(1),
.cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(2){grid-row:span 2}
.cards:not(.sp-cards):has(> :nth-child(6)) .card{padding:16px;justify-content:space-between}
.cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(1) .val,
.cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(2) .val{
  font-size:32px;font-weight:500;letter-spacing:-0.3px}
.cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(n+3) .card{min-height:0}
.cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(n+3) .val{font-size:20px}
/* space-between розтягував підпис / суму / пояснення по всій висоті картки, і сума
   відривалась від свого пояснення. Лишаємо назву зверху, а суму з поясненням — знизу
   разом (суму донизу тягне margin-top:auto на .val) — Ok, 06.08.2026 */
/* Назва зверху, а сума з поясненням — суцільним блоком, притиснутим до НИЗУ картки.
   Порожнеча збирається між назвою і сумою, а не між сумою та її поясненням (Ok, 06.08.2026) */
.cards.fin-cards:not(.sp-cards):has(> :nth-child(6)) .card,
.cards.stock-cards:not(.sp-cards):has(> :nth-child(6)) .card{justify-content:flex-start}
/* Резервний порожній рядок під числом (правило нижче) тут не потрібен: він тримав число
   вгорі й лишав дірку. На «Підсумках» вміст має сидіти на дні картки (Ok, 06.08.2026) */
.cards.fin-cards:not(.sp-cards):has(> :nth-child(6)):has(.card > .sub) .card:not(:has(> .sub))::after,
.cards.stock-cards:not(.sp-cards):has(> :nth-child(6)):has(.card > .sub) .card:not(:has(> .sub))::after{
  content:none}
/* У ВСІХ 6 картках: delta pill над числом (label → delta → val) */
.cards:not(.sp-cards):has(> :nth-child(6)) .card > .val{order:3}
.cards:not(.sp-cards):has(> :nth-child(6)) .card > div[style*="margin-top:4px"]{
  order:2;margin-top:auto !important;margin-bottom:4px}
/* Пояснення під числом (напр. «7,5% від усіх») — завжди останнє,
   інакше через order:3 у .val воно вилазило НАД числом (Ok, 04.08.2026) */
.cards:not(.sp-cards):has(> :nth-child(6)) .card > .sub{order:4}
/* Картці без пояснення лишаємо порожній рядок такої ж висоти — інакше її число
   стоїть нижче, ніж у сусідів, і ряд знову «стрибає» */
.cards:not(.sp-cards):has(> :nth-child(6)):has(.card > .sub) .card:not(:has(> .sub))::after{
  content:"";display:block;order:4;font-size:13px;height:calc(1.35em + 8px)}
.cards:not(.sp-cards):has(> :nth-child(6)) .card > .val{margin-top:auto}
.cards:not(.sp-cards):has(> :nth-child(6)) .card:has(> div[style*="margin-top:4px"]) > .val{margin-top:0}
/* Скорочена назва колонки: за замовчуванням прихована, вмикається на планшеті вертикально */
.th-abbr{display:none}
/* «Інвентаризація» в салоні з однією точкою: колонку «Локація» ховаємо, а не викидаємо
   з розмітки — планшетний і мобільний вигляди розкладені по nth-child (Ok, 04.09.2026) */
table.inv-tbl.inv-noloc th:nth-child(2),
table.inv-tbl.inv-noloc td:nth-child(2){display:none}
/* Те саме в «Журналі руху»: третя колонка — «Локація» (Ok, 04.09.2026) */
table.jr-tbl.jr-noloc th:nth-child(3),
table.jr-tbl.jr-noloc td:nth-child(3){display:none}
/* «Поставки»: Ok просив скорочення тільки до 900px, тож ширшим планшетам вертикально
   (iPad Pro 12.9 — це 1024) повертаємо повні назви (Ok, 27.08.2026) */
@media (min-width:901px) and (min-height:501px){
  table.dl-tbl .th-full,table.inv-tbl .th-full{display:inline}
  table.dl-tbl .th-abbr,table.inv-tbl .th-abbr{display:none}
}
/* Навіть зі скороченнями вісім колонок виходили за картку (705px у 678px). Найдешевше —
   підтиснути бічні відступи комірок: 12px × 2 × 8 колонок = 192px тільки на повітря (Ok, 27.08.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:900px){
  table.dl-tbl th,table.dl-tbl td{padding-left:6px;padding-right:6px}
  /* в «Інвентаризації» сім колонок і кнопка «Продовжити» — тут потрібен ще 1px запасу */
  table.inv-tbl th,table.inv-tbl td{padding-left:5px;padding-right:5px}
  table.dl-tbl th:first-child,table.dl-tbl td:first-child,
  table.inv-tbl th:first-child,table.inv-tbl td:first-child{padding-left:10px}
  table.dl-tbl th:last-child,table.dl-tbl td:last-child,
  table.inv-tbl th:last-child,table.inv-tbl td:last-child{padding-right:10px}
}
/* На iPad mini вертикально «Інвентаризація» навіть зі скороченнями не влазила (676 у 602),
   тож там рядок у три яруси (Ok, 27.08.2026): дата · локація / рахував · пораховано · різниця /
   статус. Кнопки закріплені праворуч. Від 820 таблиця влазить, тож лишається таблицею.
   Перенос між ярусами — примусовий `\A` перед 3-ю і 6-ю комірками. */
@media (min-width:744px) and (min-height:501px) and (max-width:819px){
  table.inv-tbl thead{display:none}
  table.inv-tbl,table.inv-tbl tbody{display:block}
  table.inv-tbl tr{display:block;position:relative;padding:12px 176px 12px 12px;
    border-bottom:1px solid var(--line)}
  table.inv-tbl tbody tr:last-child{border-bottom:none}
  table.inv-tbl td{display:inline;padding:0;border:none;text-align:left;white-space:nowrap}
  /* «планшетний» відступ першої комірки (10px) зсував дату вправо відносно решти ярусів */
  table.inv-tbl td:first-child{padding-left:0}
  /* «товари»/«витратка» під назвою точки — ставимо поруч, щоб не рвати перший ярус */
  table.inv-tbl td:nth-child(2) > div{display:inline;margin-left:4px}
  /* один салон: локації немає, вид переїхав під дату — крапку-розділювач знімаємо */
  table.inv-tbl.inv-noloc td:nth-child(1)::after{content:none}
  table.inv-tbl.inv-noloc td:first-child > div{display:inline;margin-left:4px}
  table.inv-tbl td:nth-child(3)::before,
  table.inv-tbl td:nth-child(6)::before{content:"\A";white-space:pre}
  table.inv-tbl td:nth-child(3),table.inv-tbl td:nth-child(4),
  table.inv-tbl td:nth-child(5){color:var(--muted)}
  table.inv-tbl td:nth-child(1)::after,table.inv-tbl td:nth-child(3)::after,
  table.inv-tbl td:nth-child(4)::after{content:" · ";
    color:var(--faint);white-space:pre}
  table.inv-tbl td:nth-child(6) .tag{vertical-align:middle;margin-top:4px}
  table.inv-tbl td:nth-child(7){position:absolute;right:12px;top:50%;
    transform:translateY(-50%);display:block}
}
/* Фільтр «Поставок» на планшеті — гумовий, без порахованих під кожну ширину пікселів
   (так запропонував Ok, 27.08.2026; попередній варіант із бюджетом рядка ламався щоразу,
   коли мінялася довжина назви локації).
   • Локація: базова ширина 0 — вона ніколи не спричиняє перенос, займає тільки те, що
     лишилось, а задовга назва ріжеться трикрапкою. Мінімум 150px, щоб не звузилась у ніщо.
   • Пошук: базова ширина 150 вирішує, чи він сідає в рядок; якщо місця немає — переходить
     на другий рядок цілим, а не обрізаним. Стеля 320 — щоб не розтягувався на пів екрана.
   Другий селектор — планшети горизонтально (mini 1133 теж не влазив: 324+357+320 у 991).
   `hover:none` лишає звичайні вікна браузера тієї ж ширини недоторканими. */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait),
       (min-width:1024px) and (min-height:501px) and (max-width:1400px) and (orientation:landscape) and (hover:none){
  /* `max-width:max-content` — щоб блок не роздувався ширше за саму назву, коли місця
     багато (Ok помітив, 27.08.2026). Базова ширина все одно 0, тож переносу не спричиняє. */
  #stock-flt:has(.dr) > .fpair:first-child{flex:1 1 0;min-width:150px;max-width:max-content}
  #stock-flt:has(.dr) .oz-select{flex:1 1 auto;min-width:0}
  #stock-flt:has(.dr) .oz-trigger{width:100%;max-width:100%;min-width:0}
  /* grow:0 навмисно: увесь надлишок місця віддаємо локації, бо назви точок довгі, а полю
     пошуку 150 достатньо. Інакше на 820 локація стискалась до «К…» */
  /* margin-left:auto — пошук притиснутий до правого краю рядка (Ok, 27.08.2026) */
  #stock-flt:has(.dr) .flt-srch{flex:0 1 150px;width:auto;min-width:150px;max-width:320px;
    margin-left:auto}
}
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait){
  /* стрілки періоду 48 → 40 (кругла форма зберігається): звільняє 16px, і на Air
     усі три блоки сідають в один рядок. Горизонтально місця вистачає — там лишаємо 48 */
  #stock-flt .dr-shift{width:40px;min-width:40px;height:40px}
}
@media (min-width:744px) and (min-height:501px) and (max-width:900px) and (orientation:portrait){
  /* на вузькому планшеті віддаємо пошуку менше, щоб локації вистачило хоча б на
     «усі локації» (202px), а не на «усі локац…» */
  #stock-flt:has(.dr) .flt-srch{flex-basis:110px;min-width:110px}
}
@media (min-width:1024px) and (min-height:501px) and (max-width:1400px) and (orientation:landscape) and (hover:none){
  /* горизонтально місця більше, тож пошуку даємо звичніші 260 — але це все одно одне
     число, а не бюджет під кожну ширину */
  #stock-flt:has(.dr) .flt-srch{flex:0 1 260px;min-width:260px}
}
/* «Журнал руху» на планшеті (Ok, 27.08.2026):
   • плашка операції переноситься словами. «Повернення постачальнику» в один рядок тримало
     колонку «Рух» на 228px із 750 — саме через неї таблиця не влазила в екран;
   • бічні відступи комірок 12 → 6, як у «Поставках». */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait),
       (min-width:1024px) and (min-height:501px) and (max-width:1400px) and (orientation:landscape) and (hover:none){
  table.jr-tbl td:nth-child(4) .tag{white-space:normal;text-align:center;padding:4px 10px}
  table.jr-tbl th,table.jr-tbl td{padding-left:6px;padding-right:6px}
  table.jr-tbl th:first-child,table.jr-tbl td:first-child{padding-left:10px}
  table.jr-tbl th:last-child,table.jr-tbl td:last-child{padding-right:10px}
}
/* Фільтр журналу — чотири поля (локація, вид, період, операція). Від 901px вони сідають
   в один рядок, якщо заборонити перенос і дати полям стискатися до трикрапки.
   Блок «Період» від стискання захищений: обрізана дата — це вже не фільтр. */
@media (min-width:901px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait),
       (min-width:1024px) and (min-height:501px) and (max-width:1400px) and (orientation:landscape) and (hover:none){
  #stock-flt.jr-flt{flex-wrap:nowrap!important}
  #stock-flt.jr-flt > .fpair{min-width:0}
  #stock-flt.jr-flt > .fpair:has(.dr){flex:0 0 auto}
  #stock-flt.jr-flt .oz-select{flex:0 1 auto;min-width:0}
  #stock-flt.jr-flt .oz-trigger{width:auto;min-width:76px;max-width:100%}
  /* «Візити»: локація + статус + період + пошук. Той самий прийом — заборона переносу,
     гумові поля, коротший пошук і компактніші стрілки періоду (Ok, 28.08.2026).
     Нижче 901 чотири блоки з підписами не влазять навіть на мінімумах — там перенос. */
  #o-flt{flex-wrap:nowrap}
  #o-flt > .fpair{min-width:0}
  #o-flt > .fpair:has(.dr){flex:0 0 auto}
  #o-flt .oz-select{flex:0 1 auto;min-width:0}
  #o-flt .oz-trigger{width:auto;min-width:76px;max-width:100%}
  #o-flt .dr-shift{width:40px;min-width:40px;height:40px}
  /* ширину пошуку задано інлайном у розмітці, звідси !important */
  #o-flt .srch{width:160px!important;flex:0 1 160px;min-width:120px;margin-left:auto}
}
/* Скорочений підпис поля у фільтрі: за замовчуванням видно повний */
.lb-abbr{display:none}
/* «Звіт за день»: у полі дати прибрано іконку календаря (Ok, 28.08.2026).
   Поле лишається клікабельним — календар відкривається тапом по самій даті.
   Заразом знято резерв ширини (`10ch` під ввід руками), через який після іконки
   лишалась порожнеча: пілюля тепер по тексту — 180 → 116px. */
.oz-date:has(#dc-date) .oz-ic{display:none}
.oz-date:has(#dc-date) .oz-trigger{width:auto;min-width:0}
/* ⚠️ width:auto для input НЕ стискає його по тексту — ширину задає атрибут size=10,
   а це рівно 86px, тоді як «02.09.2026» жирним потребує ~89. Через це останню цифру
   зрізало (Ok двічі показував це 02.09.2026). Ставимо явну ширину з запасом. */
.oz-date:has(#dc-date) .oz-dt-field{flex:0 0 auto;width:100px;min-width:100px}
/* «Транзакції» на вузькому планшеті: «Лок. / Пер. / Спос. / Катег.» (Ok, 28.08.2026).
   Чотири поля з періодом в один рядок не сходяться, але зі скороченнями в перший
   рядок сідають три, а вниз іде тільки категорія. Локація гумова — довга назва точки
   не зриває період на наступний рядок. */
@media (min-width:744px) and (min-height:501px) and (max-width:900px) and (orientation:portrait){
  #c-flt .lb-full{display:none}
  #c-flt .lb-abbr{display:inline}
  #c-flt{column-gap:6px;row-gap:10px}
  #c-flt > .fpair{min-width:0;gap:4px}
  #c-flt > .fpair:has(.dr){flex:0 0 auto}
  #c-flt .oz-select{flex:0 1 auto;min-width:0}
  #c-flt .oz-trigger{width:auto;min-width:82px;max-width:100%}
  #c-flt > .fpair:first-child{flex:1 1 0;min-width:110px;max-width:max-content}
  #c-flt > .fpair:first-child .oz-select{flex:1 1 auto}
  #c-flt > .fpair:first-child .oz-trigger{width:100%;max-width:100%;min-width:0}
}
/* «Клієнти» на вузькому планшеті: пошук 280 → 200, і він сідає в рядок до фільтрів
   (Ok, 28.08.2026). Блок «Майстер» гумовий — довге ім'я ріжеться трикрапкою,
   а не зриває пошук на другий рядок. */
@media (min-width:744px) and (min-height:501px) and (max-width:900px) and (orientation:portrait){
  #cl-flt > .fpair{min-width:0}
  #cl-flt > .fpair:nth-child(2){flex:1 1 0;min-width:130px;max-width:max-content}
  #cl-flt > .fpair:nth-child(2) .oz-select{flex:1 1 auto;min-width:0}
  #cl-flt > .fpair:nth-child(2) .oz-trigger{width:100%;max-width:100%;min-width:0}
  #cl-flt .srch{width:200px!important;flex:0 1 200px;min-width:150px;margin-left:auto}
}
/* «Рахунки»: на вузькому планшеті пошук не влазить у рядок фільтра і переноситься —
   у такому разі він має стояти ЛІВОРУЧ, а не висіти під правим краєм (Ok, 28.08.2026).
   Від 900px усе сходиться в один рядок, і там пошук лишається праворуч. */
@media (min-width:744px) and (min-height:501px) and (max-width:899px) and (orientation:portrait){
  /* Пошук підтиснуто до 115px — рівно стільки лишається після локації й періоду,
     тож він сідає в той самий рядок (Ok, 28.08.2026). Локація гумова: обрана точка
     з довгою назвою ріжеться трикрапкою, а не зриває пошук на другий рядок. */
  #iv-flt > .fpair{min-width:0}
  #iv-flt > .fpair:has(.dr){flex:0 0 auto}
  #iv-flt > .fpair:first-child{flex:1 1 0;min-width:110px;max-width:max-content}
  #iv-flt > .fpair:first-child .oz-select{flex:1 1 auto;min-width:0}
  #iv-flt > .fpair:first-child .oz-trigger{width:100%;max-width:100%;min-width:0}
  #iv-flt .srch{width:115px!important;flex:0 1 115px;min-width:100px}
}
/* «Рейтинг персоналу → Динаміка» на вузькому планшеті: «Кого / Показ. / Глиб.» —
   інакше три поля не сходяться в один рядок (Ok, 28.08.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:900px) and (orientation:portrait){
  #hs-flt .lb-full{display:none}
  #hs-flt .lb-abbr{display:inline}
}
/* «Поставки» на вузькому планшеті: «Лок.» і «Пер.» — рівно ті 39px, яких бракувало,
   щоб пошук став у той самий рядок, а не переносився (Ok, 28.08.2026).
   Скорочення вмикаємо ТІЛЬКИ там, де без них не сходиться; де місця вистачає —
   лишається повна назва. */
@media (min-width:744px) and (min-height:501px) and (max-width:900px) and (orientation:portrait){
  #stock-flt.dl-flt .lb-full{display:none}
  #stock-flt.dl-flt .lb-abbr{display:inline}
}
/* «Журнал руху» на планшеті вертикально: «Лок. / Пер. / Опер.» (Ok, 28.08.2026).
   Чотири поля з періодом в один рядок не влазять і на мінімумах (~735 проти 602),
   але зі скороченими підписами в перший рядок сідають уже три — локація, вид і період,
   а на другий іде тільки операція. Локація гумова, щоб довга назва точки не зривала
   період на наступний рядок. */
@media (min-width:744px) and (min-height:501px) and (max-width:900px) and (orientation:portrait){
  #stock-flt.jr-flt .lb-full{display:none}
  #stock-flt.jr-flt .lb-abbr{display:inline}
  #stock-flt.jr-flt{column-gap:6px;row-gap:10px}
  #stock-flt.jr-flt > .fpair{min-width:0;gap:4px}
  #stock-flt.jr-flt > .fpair:has(.dr){flex:0 0 auto}
  #stock-flt.jr-flt .oz-select{flex:0 1 auto;min-width:0}
  #stock-flt.jr-flt .oz-trigger{width:auto;min-width:82px;max-width:100%}
  #stock-flt.jr-flt > .fpair:first-child{flex:1 1 0;min-width:110px;max-width:max-content}
  #stock-flt.jr-flt > .fpair:first-child .oz-select{flex:1 1 auto}
  #stock-flt.jr-flt > .fpair:first-child .oz-trigger{width:100%;max-width:100%;min-width:0}
}
/* Планшет вертикально: «Лок. / Стат. / Пер.» замість повних назв — саме ці 80px
   і не давали рядку зійтись (Ok, 28.08.2026). Пошук іде другим рядком ліворуч, тож
   стрілки періоду лишаються звичайного розміру, а локації вистачає місця на назву. */
@media (min-width:744px) and (min-height:501px) and (max-width:900px) and (orientation:portrait){
  #o-flt .lb-full{display:none}
  #o-flt .lb-abbr{display:inline}
  #o-flt{flex-wrap:wrap;column-gap:6px;row-gap:10px}
  #o-flt > .fpair{min-width:0;gap:4px}
  #o-flt > .fpair:has(.dr){flex:0 0 auto}
  #o-flt .oz-select{flex:0 1 auto;min-width:0}
  #o-flt .oz-trigger{width:auto;min-width:82px;max-width:100%}
  /* Локація — гумова: базова ширина 0, тож довга назва точки НІКОЛИ не зриває
     період на другий рядок, а ріжеться трикрапкою. max-content — щоб на вільному
     місці блок не роздувався ширше за власну назву (Ok, 28.08.2026) */
  #o-flt > .fpair:first-child{flex:1 1 0;min-width:110px;max-width:max-content}
  #o-flt > .fpair:first-child .oz-select{flex:1 1 auto}
  #o-flt > .fpair:first-child .oz-trigger{width:100%;max-width:100%;min-width:0}
  /* порожній флекс-елемент на всю ширину = примусовий перенос перед пошуком */
  #o-flt::after{content:"";flex:0 0 100%;height:0;order:1}
  /* margin-left:auto теж стоїть інлайном — інакше пошук тікав праворуч */
  #o-flt .srch{order:2;width:240px!important;flex:0 1 240px;min-width:160px;margin-left:0!important}
}
/* Планшет вертикально: 1.3fr+1.3fr+1fr+1fr тиснуло всі шість карток в один ряд —
   у «Виручці» й «Чистому прибутку» число не влазило і обрізалось. Розкладаємо на два
   ряди: зверху дві великі, під ними чотири малі (Ok, 26.08.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait){
  [data-block="kpi"] .cards:not(.sp-cards):has(> :nth-child(6)){
    grid-template-columns:repeat(4,1fr);grid-auto-rows:auto}
  [data-block="kpi"] .cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(1),
  [data-block="kpi"] .cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(2){
    grid-row:auto;grid-column:span 2;min-height:150px}
  [data-block="kpi"] .cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(n+3){
    grid-column:span 1}
  /* .card і .card-wrap мають min-width:150px ще з флексової верстки. У сітці з чотирьох
     колонок це 4×150+3×16=648 при полі 626 — картки вилазили за правий край разом зі
     стрілками переходу. Дозволяємо колонкам стискатись (Ok, 26.08.2026) */
  [data-block="kpi"] .cards:not(.sp-cards):has(> :nth-child(6)) > *{min-width:0}
  /* Блок «Клієнти»: auto-fit сам ставив 3 в ряд і четверта («Не були 60+») звисала сама.
     Робимо «Усього за період» на всю ширину, решту — двома рядами по три (Ok, 26.08.2026).
     :has(> :nth-child(4)) відсікає другий ряд карток — там їх лише три */
  [data-block="clients"] .cards.cards-eq{grid-template-columns:repeat(3,1fr)}
  [data-block="clients"] .cards.cards-eq:has(> :nth-child(4)) > :first-child{grid-column:1/-1}
  /* Два ряди — це два окремі контейнери .cards, і між ними стояв рідний відступ 24px,
     а всередині ряду 16px. Візуально ряди стояли нерівномірно (Ok, 26.08.2026) */
  [data-block="clients"] .cards.cards-eq:has(> :nth-child(4)){margin-bottom:16px}
  /* Скорочені заголовки таблиці «Локації» — лише в цьому режимі (Ok, 26.08.2026) */
  .th-full{display:none}
  .th-abbr{display:inline}
  /* «Товари на продаж»: чотири картки в один ряд не читались. Сітка 2×2 —
     Продано + Заробили зверху, Вартість запасу + Позицій під ними (Ok, 26.08.2026).
     У grid інлайновий flex:2 на першій картці не діє, тож ширини рівні */
  [data-block="products"] .cards{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  /* «Адміністратори на зміні»: auto-fill давав 3 фото в ряд і блок займав пів екрана.
     Фіксуємо 4 в ряд — картки менші, список компактніший (Ok, 26.08.2026) */
  .adm-cards{grid-template-columns:repeat(4,1fr)}
  /* Довга назва локації («Київська 104(Глобал)») переносилась на другий рядок і лізла
     на фото. Обрізаємо трикрапкою в один рядок (Ok, 26.08.2026) */
  .adm-card-loc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* «Планування»: чотири картки по дві в ряд — але ТІЛЬКИ вертикально, горизонтально
     лишається як було (Ok, 26.08.2026). Тому окремий клас, а не спільний cards-2:
     той діє в обох орієнтаціях і живе у «Зараз на складі». */
  /* Фінанси, верхні KPI: те саме, що у «Стані бізнесу» — «Дохід» і «Чистий прибуток»
     першим рядом на пів ширини, решта чотири рівним рядом під ними (Ok, 26.08.2026).
     Той самий загальний макет «2 великі + 4 малі» ставив перші дві на ДВА рядки,
     через що решта збиралась збоку двома стовпчиками. */
  .cards.fin-cards:has(> :nth-child(6)){display:grid;grid-template-columns:repeat(4,1fr)}
  .cards.fin-cards > .card{min-width:0}
  .cards.fin-cards:has(> :nth-child(6)) > :nth-child(1),
  .cards.fin-cards:has(> :nth-child(6)) > :nth-child(2){grid-row:auto;grid-column:span 2}
  .cards.cards-2v{display:grid;grid-template-columns:1fr 1fr}
  .cards.cards-2v > .card, .cards.cards-2v > .card-wrap{min-width:0}
  /* «Планування» → таблиця витрат: у вертикальній вона вилазила на 113px за край.
     Ховаємо колонку «Локація», а саму локацію показуємо другим рядком під статтею —
     жодна інформація не втрачається (Ok, 26.08.2026) */
  /* `.oz-select` у селекторі — щоб перебити базові 220px: те правило лежить НИЖЧЕ
     у файлі (~4666), і при однаковій вазі виграло б воно */
  .filters .fpair:has(select#pl-cat) .oz-select .oz-trigger.oz-sel-trigger,
  .filters .fpair:has(select#pl-loc) .oz-select .oz-trigger.oz-sel-trigger{width:110px}
  .pl-loc-cell{display:none}
  /* `table` у селекторі навмисно: базове `.pl-loc-sub{display:none}` лежить НИЖЧЕ у файлі,
     і при однаковій вазі виграло б воно — на цю пастку я вже наступала сьогодні */
  table .pl-loc-sub{display:block;font-size:12px;color:var(--stone);margin-top:2px}
  /* Після зникнення колонки лишалось ще 7px переповнення — забираємо їх з бокових
     відступів комірок саме цієї таблиці (12 → 9px дає 42px запасу) */
  .tbl-plan th, .tbl-plan td{padding-left:9px;padding-right:9px}
  /* «Скільки їх було»: три картки в ряд лишали четверту саму в порожньому ряду.
     Ok попросив дві в ряд — але ТІЛЬКИ вертикально, горизонтально лишається як було.
     :has(> :nth-child(4)) тут не умова, а спосіб зрівняти вагу з правилом
     «761–1079» вище (repeat(3,1fr)) — без нього воно вигравало (Ok, 26.08.2026) */
  .cards.cards-rows.cards-cli:has(> :nth-child(4)){grid-template-columns:1fr 1fr}
}
/* Планшет горизонтально: решта дашборда влаштовує, правимо тільки адміністраторів —
   auto-fill давав 5 фото в ряд і шосте падало в другий ряд саме. Ставимо 6 (Ok, 26.08.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:landscape){
  .adm-cards{grid-template-columns:repeat(6,1fr)}
  /* картка стала вужчою — довга назва локації без цього переноситься на два рядки */
  .adm-card-loc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* «Аналітика → Огляд», блок «Фінанси» на КОМПʼЮТЕРІ (Ok, 05.09.2026).
   Просив ту саму розкладку, що вже була на планшеті: «Чистий прибуток» — висока картка
   ліворуч на два ряди, решта чотири — сіткою 2×2 праворуч. До цього на десктопі всі
   пʼять стояли в один ряд, і «Чистий прибуток» губився серед однакових вузьких карток.
   Правила — копія планшетних; subgrid вимикаємо для ВСІХ карток блоку, інакше нижні
   («Виконано послуг…» з двома рядками підпису) виходять вищими за верхні.
   ⚠️ Колонки задані через той самий `:has(> :nth-child(5))`, що й спільне правило для
   блоків з пʼяти карток нижче (воно з min-width:1080px ставить «1.7fr 1fr 1fr 1fr 1fr»).
   Без цього наше правило програвало йому за вагою: рядки застосовувались, а колонки ні,
   і чотири картки лишались в один ряд. Клас `.cards-fin` тримає правку лише на Фінансах. */
@media (min-width:1025px){
  .cards.cards-rows.cards-fin,
  .cards.cards-rows.cards-fin:has(> :nth-child(5)):not(:has(> :nth-child(6))){
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr}
  .cards.cards-rows.cards-fin > .card{grid-row:auto;grid-template-rows:none;
    display:flex;flex-direction:column}
  .cards.cards-rows.cards-fin > .card > .lbl,
  .cards.cards-rows.cards-fin > .card > .sub{align-self:auto}
  .cards.cards-rows.cards-fin > .card > .val{align-self:auto;margin-top:auto}
  .cards.cards-rows.cards-fin > .card.hero{grid-column:1;grid-row:1 / span 2}
}

/* Планшет в обох орієнтаціях (Ok, 26.08.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px){
  /* Вісь графіка: під підпис «80к ₴» треба ~34px, а колонка тримала 64px — зліва
     від графіка зяяла порожнеча, ширша за поле картки справа */
  .rd-chart{--rd-y-w:46px}
  /* «Майстри по локаціях»: сума й кількість записів ідуть окремим рядком під іменем,
     інакше клітинка розповзається і таблиця не влазить у ширину */
  .tbl-lm .lm-sub{display:block}
  .tbl-lm .lm-dot{display:none}
  /* «Фінанси»: п'ять карток лягали 3 + 2, і в другому ряду праворуч зяяла порожня
     колонка. Робимо «Чистий прибуток» високою карткою на всю висоту двох рядів,
     решта чотири — сіткою 2×2 поруч (Ok, 26.08.2026).
     Картка в цьому блоці — subgrid на 3 рядки, тож два ряди це span 6; для героя
     subgrid вимикаємо (6 рядків на 3 елементи не лягають) */
  /* Тут subgrid вимикаємо для ВСІХ карток блоку: він вирівнює рядки по вмісту, через
     що нижні картки («Виконано послуг…» з двома рядками підпису) виходили на 37px
     вищими за верхні. Замість нього — два рівні ряди сітки і звичайний flex усередині
     картки, а число притискає донизу margin-top:auto (Ok, 26.08.2026) */
  .cards.cards-rows.cards-fin{grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr}
  .cards.cards-rows.cards-fin > .card{grid-row:auto;grid-template-rows:none;
    display:flex;flex-direction:column}
  .cards.cards-rows.cards-fin > .card > .lbl,
  .cards.cards-rows.cards-fin > .card > .sub{align-self:auto}
  .cards.cards-rows.cards-fin > .card > .val{align-self:auto;margin-top:auto}
  .cards.cards-rows.cards-fin > .card.hero{grid-column:1;grid-row:1 / span 2}
  /* cards-32 — блоки з п'яти карток, які лягали 3 + 2 і лишали дірку праворуч
     у другому ряду («Як часто ходять», «Витратка»). Сітка з шести колонок:
     верхні три по два треки, нижні дві по три — нижній ряд на всю ширину.
     Усе під :has(> :nth-child(5)) — у «Витратці» карток буває менше, і тоді
     блок має лишитись на дефолтній сітці (Ok, 26.08.2026) */
  .cards.cards-rows.cards-32:has(> :nth-child(5)){grid-template-columns:repeat(6,1fr)}
  .cards.cards-rows.cards-32:has(> :nth-child(5)) > .card{grid-column:span 2}
  .cards.cards-rows.cards-32:has(> :nth-child(5)) > .card:nth-child(4),
  .cards.cards-rows.cards-32:has(> :nth-child(5)) > .card:nth-child(5){grid-column:span 3}
  /* Фінанси → «Стан бізнесу»: у flex-ряду шість карток розкидало сходинками
     (дві високі зліва, решта по дві збоку). Ставимо сітку: «Кошти всього» і
     «Товари (склад)» першим рядом, решта чотири — другим (Ok, 26.08.2026).
     Перебиваємо загальний KPI-макет «2 великі + 4 малі» (`.cards:has(> :nth-child(6))`
     вище): у нього перші дві картки на два РЯДКИ, через що решта чотири з'їжджали вбік.
     `:has(> :nth-child(6))` у моєму селекторі — щоб зрівняти з ним вагу */
  .cards.cards-biz:has(> :nth-child(6)){display:grid;grid-template-columns:repeat(4,1fr)}
  .cards.cards-biz > .card{min-width:0}
  .cards.cards-biz:has(> :nth-child(6)) > :nth-child(1),
  .cards.cards-biz:has(> :nth-child(6)) > :nth-child(2){grid-row:auto;grid-column:span 2}
  /* Аналітика → Клієнти, верхні картки: у flex-ряду три ставали поруч, а четверта
     («Не були 60–90 дн») падала вниз на всю ширину. Ok попросив усі чотири в ряд
     (26.08.2026). min-width:0 обовʼязковий — у .card лишився min-width:150px
     від старої флексової верстки, з ним сітка переповнюється */
  .cards.cards-4{display:grid;grid-template-columns:repeat(4,1fr)}
  .cards.cards-4 > .card{min-width:0}
  /* «Зараз на складі» (звіт по складу): три картки ставали в ряд, а четверта
     («Борг постачальникам») звисала сама на всю ширину. Ok попросив по дві (26.08.2026) */
  .cards.cards-2{display:grid;grid-template-columns:1fr 1fr}
  .cards.cards-2 > .card, .cards.cards-2 > .card-wrap{min-width:0}
}
/* Delta pill (inline span з color:var(--ok)/var(--err)) — soft-фон */
.cards > .card > div[style*="margin-top:4px"] > span:first-child{
  display:inline-block;padding:4px 8px;border-radius:var(--r-full);
  font-size:12px !important;font-weight:600;border:none}

/* ==================== CALENDAR ==================== */
.cal-wrap{
  --cl-bg:var(--canvas-light);--cl-line:var(--hairline-light);
  --cl-fg:var(--ink);--cl-muted:var(--stone);--cl-hatch:var(--surface-soft);
  --cl-hour:#eef0f3;   /* лінії годин у колонках */
  overflow-x:auto;border:1px solid var(--hairline-light);border-radius:var(--r-lg);
  background:var(--cl-bg);color:var(--cl-fg);font-family:var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.cal-inner{width:100%}
.cal-headrow{display:flex;position:sticky;top:0;z-index:2;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cl-line);width:100%}
.cal-bodyrow{display:flex;position:relative;width:100%}
.cal-cell-time{flex:0 0 56px}
/* Мінімальну ширину колонки НЕ ставимо: інакше 6 майстрів не влазять в екран і
   зʼявляється горизонтальна прокрутка (пробувала 150px — календар поїхав вбік, Ok 19.08.2026).
   Читабельність записів, що накладаються, вирішує розгортання картки під мишею (нижче). */
.cal-cell-col{flex:1 1 0;min-width:0;border-left:1px solid var(--cl-line)}
.cal-corner{border-left:none}
/* «3/5 зайнято» в кутику календаря: скільки робочих місць локації сьогодні зайнято (Ok, 19.08.2026) */
.cal-seats{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.05}
.cal-seats b{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cal-seats span{font-size:10px;letter-spacing:.2px;color:var(--stone)}
/* Шапка колонки майстра: фото, поруч імʼя з посадою, праворуч лічильник — усе в один
   ряд (Ok, 19.08.2026). Фото зменшене, текст 12px, що не влазить — ховається за «…». */
.cal-head{display:flex;align-items:center;gap:0;padding:8px 10px;min-height:0}
/* проміжки поштучно: фото→текст 5px, текст→кружечок 3px (Ok, 19.08.2026) */
.cal-head > img + div, .cal-head > .ph + div{margin-left:5px}
.cal-head img,.cal-head .ph{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:center 10%;
  background:var(--cl-hatch);flex:0 0 26px}
.cal-head-clk{cursor:pointer;transition:background .14s ease}
@media (hover:hover){.cal-head-clk:hover{background:var(--cl-hatch)}}
.mm-actions{display:flex;flex-direction:column;gap:8px}
.mm-actions .btn{justify-content:flex-start;font-size:16px;padding:0 16px}
.mi{width:17px;height:17px;flex:0 0 auto;margin-right:9px;vertical-align:-3px;color:currentColor}
.mm-actions .btn .mi,.kmenu button .mi{margin-right:9px}
.bk-h .mi{vertical-align:-3px;margin-right:7px}
.kmenu button{display:flex;align-items:center}
.kmenu button .mi{color:var(--ink)}
.cal-card .mi{width:11px;height:11px;margin-right:3px;vertical-align:-1px;color:currentColor;opacity:.7}
.rd-edit .mi{width:13px;height:13px;margin:0;color:currentColor;vertical-align:baseline}.bk-h{display:flex;align-items:center}
.cal-head .nm{font-size:12px;font-weight:600;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:0}
.cal-head .pos{font-size:12px;color:var(--cl-muted);font-weight:400;margin-top:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cal-head .cnt{margin-left:3px;font-size:12px;font-weight:600;color:var(--on-dark);background:var(--canvas-dark);
  border-radius:50%;width:18px;height:18px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:1}
.cal-timebody .cal-tlabel{font-size:13px;color:var(--cl-muted);text-align:right;
  padding:4px 8px 0 0;box-sizing:border-box;border-bottom:1px solid var(--cl-line);
  font-variant-numeric:tabular-nums}
.cal-colbody{position:relative;cursor:copy}
/* Межа між напрямами в денному календарі: барбери зліва, манікюр справа (Ok, 25.07.2026) */
/* У світлій темі лінія сіра, не чорна (Ok, 19.08.2026) */
.cal-cell-col.cal-dirsep{border-left:2px solid #b6b9bf}
html[data-theme="dark"] .cal-cell-col.cal-dirsep{border-left-color:var(--hairline-strong)}
.cal-card{position:absolute;left:0;right:0;border-radius:4px;
  padding:8px 10px;font-size:13px;line-height:1.33;overflow:hidden;cursor:pointer;
  box-sizing:border-box;border:1px solid var(--hairline-light);
  transition:transform .14s ease}
/* Кольорова полоска зверху — не на всю ширину, а з відступом 10px з обох боків (Ok, 23.07.2026) */
.cal-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--stripe,transparent);pointer-events:none;z-index:1}
@media (hover:hover){.cal-card:hover{transform:translateY(-1px);z-index:4}}
/* Скасований запис підкладкою (Ok, 12.09.2026): видно, хто і чому зірвався, але слот
   лишається робочим — кліки крізь картку проходять, ловить їх лише кутова позначка. */
/* Прозорість даємо кольорам, а не opacity: інакше кнопка-позначка бліднула разом
   із карткою і її не було видно (Ok, 12.09.2026) */
.cal-ghost{pointer-events:none;z-index:0;cursor:default;background:transparent;
  color:color-mix(in srgb,var(--danger) 42%,transparent);
  border:1px dashed color-mix(in srgb,var(--danger) 30%,transparent)}
.cal-ghost .t{text-decoration:line-through;opacity:.9}
/* Телефон і причина на скасованій підкладці — приглушені, щоб не сперечались
   із живими записами поруч (Ok, 12.09.2026) */
.cal-ghost .cph,.cal-ghost .sv{color:color-mix(in srgb,var(--ash) 55%,transparent)}
.cal-ghost .gh-more{text-decoration:none;font-weight:700}
.cal-ghost::before{display:none}
.cc-canc{position:absolute;right:5px;bottom:5px;z-index:5;pointer-events:auto;cursor:pointer;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--danger) 32%,transparent);
  color:rgba(255,255,255,.55);
  border:1px solid color-mix(in srgb,var(--danger) 32%,transparent);transition:background .12s ease,color .12s ease}
/* під курсором — повний колір, щоб було видно, що це кнопка */
@media (hover:hover){.cc-canc:hover{background:var(--danger);border-color:var(--danger);color:#fff}}

/* Записи, що накладаються, стоять поруч у вузьких доріжках. Під мишею картка
   розгортається на всю ширину колонки, щоб прочитати клієнта й послугу (Ok, 19.08.2026) */
@media (hover:hover){
  .cal-card.cal-lane:hover{left:0 !important;width:calc(100% - 2px) !important;z-index:9;
    box-shadow:0 6px 18px rgba(0,0,0,.18)}
}
.cal-card .cc-right{margin-left:auto;margin-right:-9px;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;position:relative;top:-1px}
.cal-card .ico{width:16px;height:16px;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);flex:0 0 auto;line-height:1}
.cal-card.done .ico,.cal-card.confirmed .ico{color:var(--teal)}
.cal-card .ico svg,.cal-card .ico .mi{width:16px;height:16px;margin:0;vertical-align:baseline;color:currentColor}
.cal-card .t{display:flex;align-items:center;font-weight:600;font-size:12px;color:var(--ash);
  margin-bottom:1px;font-variant-numeric:proportional-nums lining-nums;font-feature-settings:"pnum" 1,"lnum" 1;letter-spacing:0}
.cal-card .cc-ics{display:inline-flex;align-items:center;gap:4px;margin-left:6px}
.cal-card .cc-ic{width:12px;height:12px;color:var(--ink);opacity:1}
.cal-card .cc-ic.paid{color:var(--teal);opacity:1}
.cal-card .cc-ic.star{width:12px;height:12px;color:var(--ink);opacity:1}
.cal-card .cc-ic.bell{color:var(--ink);opacity:1}
@media (hover:hover){}
.cal-card .cnm{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-card .cph{font-size:12px;color:var(--ash);font-variant-numeric:proportional-nums lining-nums;
  font-feature-settings:"pnum" 1,"lnum" 1;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-card .sv{font-size:12px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Кілька послуг у записі — стек із крапкою-маркером кольором комірки + «+N ще» (Ok, 20.07.2026) */
.cal-card .sv-list{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.cal-card .sv-line{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.3;color:var(--ash);overflow:hidden}
.cal-card .sv-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--ash)}
.cal-card .sv-line .sv-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cal-card .sv-more{font-size:12px;line-height:1.3;color:var(--ash);padding-left:11px;font-weight:600}
/* Статус візьме кольори з inline-стилю calCardHtml (monochrome canvas + accent stroke).
   Тільки canceled/no_show додаємо strikethrough — колір/фон приходять з inline. */
.cal-card.canceled,.cal-card.no_show{text-decoration:line-through}
.cal-closed{position:absolute;left:0;right:0;pointer-events:none;
  border-bottom:1px solid var(--cl-line);
  background:#f8f8f9}
.cal-addshift{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:13px;
  color:var(--cl-muted);pointer-events:none}
/* «вікно» — вільний проміжок у межах зміни; клік крізь нього створює запис (Ok, 03.08.2026) */
.cal-gap{position:absolute;left:0;right:0;pointer-events:none;display:flex;
  align-items:center;justify-content:center;font-size:12px;color:var(--cl-muted);
  opacity:.5}   /* підказка «вікно …» приглушена, щоб не сперечалась із записами (Ok, 19.08.2026) */
.cal-gap span{padding:1px 8px;border-radius:var(--r-full);border:1px dashed var(--cl-line);background:transparent}
/* Календар → режим «Список»: кожне поле в один рядок, довге ховається за «…» (Ok, 19.08.2026) */
.cl-1line{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
/* Ширини колонок списку задані у відсотках, тож таблиця завжди влазить у свою
   колонку на будь-якому екрані, а довгий текст ховається за «…» (Ok, 19.08.2026) */
.cl-tbl{table-layout:fixed;width:100%}
.cl-tbl th:nth-child(1),.cl-tbl td:nth-child(1){width:13%}
.cl-tbl th:nth-child(2),.cl-tbl td:nth-child(2){width:17%}
.cl-tbl th:nth-child(3),.cl-tbl td:nth-child(3){width:22%}
.cl-tbl th:nth-child(4),.cl-tbl td:nth-child(4){width:19%}
.cl-tbl th:nth-child(5),.cl-tbl td:nth-child(5){width:11%}
.cl-tbl th:nth-child(6),.cl-tbl td:nth-child(6){width:18%}
.cl-tbl .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 10px;font-size:12px}
/* На вужчих екранах статусу треба більше місця, щоб «Підтверджена» не різалась */
@media(max-width:1200px){
  .cl-tbl th:nth-child(2),.cl-tbl td:nth-child(2){width:15%}
  .cl-tbl th:nth-child(3),.cl-tbl td:nth-child(3){width:20%}
  .cl-tbl th:nth-child(4),.cl-tbl td:nth-child(4){width:17%}
  .cl-tbl th:nth-child(6),.cl-tbl td:nth-child(6){width:23%}
  /* трохи тісніша пілюля статусу, щоб «Підтверджена» містилась цілком */
  .cl-tbl .tag{padding:4px 9px;font-size:12px}
  .cl-tbl td{padding-left:9px;padding-right:9px}
  .cl-tbl th{padding-left:9px;padding-right:9px}
}
.cl-time{white-space:nowrap;font-weight:600}
.cl-sub{font-size:13px;color:var(--stone);white-space:nowrap}
.cl-wrap{max-width:100%;overflow-x:auto}
a.cl-sub{color:var(--link)}
@media(max-width:743px),(max-height:500px){
  /* на телефоні рядки стають картками: обрізання за «…» тут не потрібне — текст просто
     переноситься, а комірка «підпис / значення» лишається в один ряд (Ok, 19.08.2026) */
  .cl-1line{white-space:normal;max-width:none;overflow:visible;text-overflow:clip}
  .cl-sub{white-space:normal}
  .cl-tbl{table-layout:auto}
  .cl-tbl th,.cl-tbl td{width:auto}
  .cl-tbl .tag{max-width:none;font-size:13px;padding:4px 14px;flex:0 0 auto;overflow:visible}
  /* дрібні значення («1 год», пілюля статусу) не стискаємо — інакше ламаються/обрізаються */
  .cl-tbl .cl-sub{flex:0 0 auto}
}
/* «+N» — записи, що не влізли в доріжки тижневої колонки */
.cal-more{position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;border-radius:4px;
  border:1px dashed var(--cl-line);background:var(--surface-soft)}
@media (hover:hover){.cal-more:hover{background:var(--canvas-light)}}
.cal-head.off{background:var(--surface-soft)}
.cal-head.today{background:var(--canvas-light);box-shadow:inset 0 -2px 0 var(--ink)}
.cal-head .cnt.off{color:var(--cl-muted);background:var(--cl-hatch)}
.cal-head .cnt.zero{color:var(--stone);background:var(--surface-soft)}  /* на зміні, але 0 записів — не тягне око */
/* Примарна плашка перетягування запису */
.cal-dropghost{position:absolute;left:2px;right:2px;z-index:6;pointer-events:none;
  border:1.5px dashed #C25238;border-radius:10px;background:rgba(194,82,56,.10);
  color:#C25238;font-size:12px;font-weight:700;display:flex;align-items:flex-start;justify-content:center;padding-top:2px}
.cal-now{position:absolute;left:0;right:0;height:0;border-top:2px solid #C25238;z-index:3;pointer-events:none}
.cal-now-badge{position:absolute;left:0;width:56px;top:50%;transform:translateY(-50%);
  background:#C25238;color:var(--on-dark);font-size:12px;font-weight:600;
  padding:3px 0;text-align:center;box-sizing:border-box;border-radius:var(--r-full)}

/* Cal settings */
.cal-set input[type=range]{width:100%;accent-color:var(--canvas-dark)}
.cal-set .rng-lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--stone);margin-top:4px}
.cal-set .vcards{display:flex;gap:8px}
.cal-set .vcards button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 8px;border:1px solid var(--hairline-light);border-radius:var(--r-md);
  background:var(--surface-soft);color:var(--ink);font-weight:600;font-size:13px}
.cal-set .vcards button .vic{font-size:20px}
.cal-set .vcards button.on{background:var(--canvas-dark);color:var(--on-dark);border-color:var(--canvas-dark)}
.cal-set .radios{display:flex;flex-direction:column;gap:8px}
.cal-set .rad{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--ink)}
.cal-set .chk{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--ink);margin-top:10px}
/* Блоки бічної панелі — окремий чекбокс на кожен (Ok, 25.07.2026) */
.cal-set .sb-group{margin-top:18px}
.cal-set .sb-h{font-size:13px;color:var(--mute);font-weight:600}
.side-card.stats .stat-row{display:flex;justify-content:space-between;padding:4px 4px;font-size:13px}
.side-card.stats .stat-row b{font-weight:600}

/* Drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;opacity:0;transition:opacity .25s}
.drawer-bg.open{opacity:1}
.drawer{position:absolute;top:0;right:0;height:100vh;width:min(400px,92vw);
  background:var(--canvas-light);border-left:1px solid var(--hairline-light);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.drawer-bg.open .drawer{transform:none}
@media (hover:hover){}
.drawer.wide{width:min(560px,96vw)}

/* Booking form */
/* Форма «Новий запис» — секції у обводках, як картки на дашборді (білі, тонка рамка) */
.bk-card{background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:16px}
.bk-card + .bk-card{margin-top:14px}
.bk-card .bk-h{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center}
/* .bk-sel — прибираємо старий padding, глобальний input-стиль (48px, pill) підхопиться сам */
.bk-sel{width:100%}
.bk-locrow{display:flex;align-items:center;gap:10px}
.bk-locrow img,.bk-locrow .ph{width:44px;height:44px;border-radius:var(--r-full);object-fit:cover;
  background:var(--surface-soft);flex:0 0 44px}
.bk-hint{color:var(--stone);font-size:13px;padding:6px 4px}
/* Послуга-чіп — pill з ціною справа */
.bk-svc{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;
  background:var(--canvas-light);border:1px solid var(--hairline-strong);border-radius:var(--r-full);
  padding:12px 20px;margin-bottom:8px;color:var(--ink);font-size:14px;cursor:pointer;transition:background .12s ease,border-color .12s ease}
@media (hover:hover){.bk-svc:hover{background:var(--surface-soft)}}
.bk-svc.on{background:var(--canvas-dark);color:var(--on-dark);border-color:var(--canvas-dark)}
/* Тривалість на вибраній послузі: білий текст був захардкоджений, а в темній темі
   підкладка стає світло-сірою — «60 хв» майже зникало. Токен --on-dark-mute дає
   світлий текст у світлій темі й темний у темній (Ok, 27.08.2026). */
.bk-svc.on i{color:var(--on-dark-mute)}
.bk-svc i{display:block;font-style:normal;color:var(--stone);font-size:13px;margin-top:2px}
.bk-svc b{font-weight:600;white-space:nowrap}
/* Автосаджест клієнта — список pill-опцій */
.bk-sug{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.bk-sugrow{text-align:left;background:var(--canvas-light);border:1px solid var(--hairline-strong);
  border-radius:var(--r-full);padding:12px 20px;color:var(--ink);font-size:14px;cursor:pointer}
@media (hover:hover){.bk-sugrow:hover{background:var(--surface-soft)}}
/* Обраний клієнт — pill з чорним бордером */
.bk-clsel{display:flex;align-items:center;justify-content:space-between;background:var(--surface-soft);
  border:1px solid var(--ink);border-radius:var(--r-full);padding:12px 20px;font-size:14px;font-weight:600}
.bk-clx{background:transparent;border:none;color:var(--stone);font-size:20px;line-height:1.0;cursor:pointer;padding:0 4px}
@media (hover:hover){.bk-clx:hover{color:var(--ink)}}
.bk-colors{display:flex;flex-wrap:wrap;gap:8px}
.bk-color{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.bk-color.on{border-color:var(--ink)}
.bk-color.none{background:var(--surface-soft);color:var(--stone);display:flex;align-items:center;
  justify-content:center;font-size:13px}
.bk-guest{margin-top:8px}
.bk-guest .bk-chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer}
/* checkbox лишається дефолтного розміру 20×20 (тримаємо квадратний box, щоб не викривляти в овал) */

/* Right panel of calendar */
.cal-layout{display:flex;gap:16px;align-items:flex-start}
#cal-box{flex:1;min-width:0}
/* права колонка вужча — ширину віддаємо сітці записів (Ok, 19.08.2026) */
#cal-side{flex:0 0 246px;min-width:0;display:flex;flex-direction:column;gap:14px}
.side-card{background:var(--canvas-light);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:16px}
.side-h{font-size:20px;color:var(--ink);margin:4px 4px 16px;
  text-transform:none;letter-spacing:0;font-weight:500}
/* Заголовок картки локацій зі стрілкою-згортанням праворуч (Ok, 19.08.2026) */
.side-h-tog{display:flex;align-items:center;justify-content:space-between;gap:8px}
.side-tog{background:transparent;border:none;padding:2px;color:var(--stone);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.side-tog svg{width:20px;height:20px;transition:transform .16s ease}
.side-tog.open svg{transform:rotate(180deg)}
@media (hover:hover){.side-tog:hover{color:var(--ink);background:var(--surface-soft)}}
.side-loc{display:flex;gap:8px;align-items:center;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:var(--r-md);
  padding:8px 8px;color:var(--ink);margin-bottom:3px}
@media (hover:hover){.side-loc:hover{background:var(--surface-soft)}}
.side-loc.on{border-color:var(--canvas-dark);background:var(--canvas-dark);color:var(--on-dark)}
.side-loc.on .la{color:rgba(255,255,255,0.7)}
.side-loc img,.side-loc .ph{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px;
  background:var(--surface-soft)}
.side-loc .ln{font-size:13px;font-weight:600;line-height:1.19}
.side-loc .la{font-size:13px;color:var(--stone);margin-top:1px}
/* Довга назва або адреса локації не переноситься у два рядки, а обрізається за «…»
   — як імена майстрів у шапці календаря (Ok, 19.08.2026) */
.side-loc > div{min-width:0;flex:1}
.side-loc .ln,.side-loc .la{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.side-wl{display:flex;flex-direction:column;gap:2px;background:transparent;border:1px solid transparent;
  border-radius:var(--r-md);padding:8px 10px;text-align:left;cursor:pointer;transition:background .12s ease,border-color .12s ease}
@media (hover:hover){.side-wl:hover{background:var(--surface-soft);border-color:var(--hairline-light)}}
.side-wl .wl-nm{font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* дата · час доби · майстер — в один рядок, довге імʼя ховається за «…» (Ok, 27.08.2026) */
.side-wl .wl-dt{font-size:12px;color:var(--stone);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-add-btn{width:28px;height:28px;border-radius:50%;background:var(--canvas-dark);color:var(--on-dark);
  border:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 28px;padding:0;
  transition:background .12s ease}
@media (hover:hover){.wl-add-btn:hover{background:var(--body)}}
.wl-empty-add{background:#C25238 !important;border-color:#C25238 !important;color:#ffffff !important}
@media (hover:hover){.wl-empty-add:hover{background:#a94530 !important;border-color:#a94530 !important}}
.wl-add-btn svg{width:14px;height:14px}
.mini .mini-h{display:flex;align-items:center;justify-content:space-between;
  font-weight:600;font-size:14px;padding:4px 4px 14px}
/* Стрілки перемикання місяця — обідок, а не заливка (Ok, 27.08.2026) */
.mini-nav{background:transparent;border:1px solid var(--hairline-strong);color:var(--ink);cursor:pointer;
  border-radius:50%;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:16px;line-height:1}
@media (hover:hover){.mini-nav:hover{background:var(--surface-soft)}}
.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;justify-items:center}
.mini-dow{font-size:13px;color:var(--stone);text-align:center;padding-bottom:4px}
.mini-day{background:transparent;border:none;color:var(--ink);border-radius:50%;
  /* клітинка тягнеться під ширину панелі (панель стиснули) — Ok, 19.08.2026 */
  width:100%;max-width:32px;aspect-ratio:1/1;height:auto;padding:0;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover){.mini-day:hover{background:var(--surface-soft)}}
.mini-day.today{color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1.6px var(--ink)}
.mini-day.sel{background:var(--canvas-dark);color:var(--on-dark);font-weight:600}
.mini-day.sel.today{box-shadow:none}
.cal-toolbar #cal-set{margin-left:auto}
.cal-toolbar .oz-trigger{height:48px}
/* Дата в тулбарі календаря — по ширині напису, без порожнього місця справа (Ok, 25.07.2026) */
.cal-toolbar .oz-dt-trigger{min-width:0}
.cal-toolbar #c-today,.cal-toolbar #cal-set,.cal-toolbar #c-prev,.cal-toolbar #c-next{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding-top:0;padding-bottom:0;line-height:1.0}
.cal-toolbar #c-today.cal-today-alert{background:#C25238;border-color:#C25238;color:#ffffff}
@media (hover:hover){.cal-toolbar #c-today.cal-today-alert:hover{background:#a94530;border-color:#a94530}}
.cal-toolbar #c-prev,.cal-toolbar #c-next{width:48px;padding:0;font-size:20px;line-height:1.0}

/* Bell */
.bell-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;align-self:stretch}
.bell-btn svg{width:18px;height:18px}
.bell-btn:has(.bell-badge:not(.hidden)){background:#C25238;border-color:#C25238;color:#ffffff}
@media (hover:hover){.bell-btn:has(.bell-badge:not(.hidden)):hover{background:#a94530;border-color:#a94530}}
.bell-badge{min-width:20px;height:20px;padding:0 4px;border-radius:var(--r-full);
  background:#ffffff;color:#C25238;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;line-height:1.0}
.bell-clear-btn{background:transparent;border:none;color:#C25238;
  font-size:12px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:var(--r-md)}
@media (hover:hover){.bell-clear-btn:hover{background:rgba(194,82,56,0.10);color:#C25238}}
@media (hover:hover){.bell-row:not(.no-click):hover{background:var(--canvas-dark)}}
@media (hover:hover){.bell-row:not(.no-click):hover .bell-row-title{color:var(--on-dark)}}
@media (hover:hover){.bell-row:not(.no-click):hover .bell-row-desc{color:var(--on-dark);opacity:.75}}
@media (hover:hover){.bell-row:not(.no-click):hover .bell-row-ic{color:var(--on-dark)}}

/* Sch editor */
.sch-iv .iv-del{background:none;border:none;color:var(--danger);font-size:13px;cursor:pointer;padding:2px 0 6px}
@media (hover:hover){.sch-iv .iv-del:hover{text-decoration:underline}}

/* Cal tooltip */
.cal-tip{position:fixed;z-index:200;background:var(--canvas-dark);
  border:1px solid var(--canvas-dark);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(0,0,0,0.25);padding:14px 14px;max-width:260px;
  font-size:13px;color:var(--on-dark);pointer-events:none}
.cal-tip .ct-nm{font-weight:600;margin-bottom:4px;color:var(--on-dark)}
.cal-tip .ct-row{line-height:1.4;color:var(--on-dark)}
.cal-tip .ct-row.muted{color:var(--on-dark-mute)}
.cal-tip .ct-sum{margin-top:6px;font-weight:600;color:var(--on-dark)}
.cal-tip .ct-cm{margin-top:6px;border-top:1px solid rgba(128,128,128,0.25);padding-top:6px;color:var(--on-dark)}
.cal-tip .ct-rem{margin-top:4px;color:var(--on-dark)}
.cal-tip a{color:var(--on-dark)}

/* Rd-more (menu «...» у вікні бронювання) */
.rd-more{position:relative}
.rd-more-btn{font-weight:600;letter-spacing:0}
.rd-send-round,.modal-actions .rd-send-round{width:44px;height:44px;min-width:44px;max-width:44px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px}
.rd-send-round .mi{width:18px;height:18px;margin:0}
.rd-act-save,.modal-actions .rd-act-save{flex:0 0 auto;min-width:0}
.rd-act-pay,.modal-actions .rd-act-pay{flex:0 0 auto;min-width:0}
.rd-more-round,.modal-actions .rd-more-round{width:44px;height:44px;min-width:44px;max-width:44px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;font-size:18px;letter-spacing:0}
.rd-more-menu{position:absolute;bottom:calc(100% + 6px);right:0;background:var(--canvas-light);
  border:1px solid var(--hairline-light);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(0,0,0,0.12);padding:6px;min-width:160px;
  display:flex;flex-direction:column;gap:4px;z-index:10}
.rd-more-menu button{background:none;border:none;text-align:left;padding:8px 14px;
  border-radius:var(--r-sm);cursor:pointer;font:inherit;color:var(--ink)}
@media (hover:hover){.rd-more-menu button:hover{background:var(--surface-soft)}}
.rd-more-menu button[data-a="cancel"]{color:var(--danger)}
/* Меню «···» у тулбарі графіків відкривається вниз — кнопка стоїть угорі сторінки (Ok, 27.08.2026) */
.rd-more-menu.rd-more-down{top:calc(100% + 6px);bottom:auto;z-index:40}
.rd-more-menu.rd-more-down button{display:flex;align-items:center;white-space:nowrap}
.rd-more-menu.rd-more-down button[data-act="del-duty"]{color:var(--danger)}
.sch-more{display:inline-flex}

/* Search input */
/* Дії сторінки в рядку заголовка (Ok, 20.08.2026) */
.head-actions{display:inline-flex;gap:10px;align-items:center;margin-left:auto}
/* Пошук усередині рядка фільтрів: праворуч і тієї ж висоти, що й селекти */
.filters .flt-srch{margin-left:auto;width:320px;max-width:100%}
.filters .flt-srch input{height:48px;font-size:14px;width:100%}
/* Кругла кнопка налаштувань у рядку фільтрів — притиснута праворуч */
.filters .flt-cfg{margin-left:auto;display:inline-flex;align-items:center}
.filters .flt-cfg .btn.ic-btn{width:48px;min-width:48px}
@media(max-width:743px),(max-height:500px){
  .head-actions{width:100%;margin-left:0}
  .head-actions > .btn{flex:1;min-width:0}
  .filters .flt-srch{margin-left:0;width:100%;order:-1}
  .filters .flt-cfg{margin-left:0}
  /* «Замовлення»: кругла кнопка налаштувань закупівлі тулилась одразу за пілюлею
     локації — притискаємо її до правого краю рядка (Ok, 01.09.2026) */
  #stock-flt > .flt-cfg{margin-left:auto}
  /* «Товари» на телефоні (Ok, 01.09.2026): «Продаж товару» і «+ Товар» — дрібними
     в рядку заголовка поруч із «Товари», а пошук — у рядку фільтрів праворуч від
     локації, шириною по залишку рядка (а не на всю ширину, як усюди). */
  /* «Візити»: пошук у рядку заголовка (переносить JS у вертикальному положенні) —
     коротший за половину рядка, притиснутий праворуч (Ok, 02.09.2026).
     width з !important, бо в розмітці стоїть інлайновий width:240px */
  .head.head-srch{flex-wrap:nowrap;gap:10px}
  .head.head-srch > h1{flex:0 0 auto}
  .head.head-srch > .srch{order:0;flex:1 1 0;width:auto!important;max-width:168px;
    min-width:104px;margin-left:auto!important}
  .head.head-srch > .srch input{height:40px;font-size:14px;width:100%}
  /* Кнопка «+ …» просто в рядку заголовка (її додає shell(): «+ Тех.карта»,
     «+ Постачальник», «+ Бренд» тощо) — того ж дрібного розміру, що й дії
     на «Товарах» і «Складі» (Ok, 01.09.2026) */
  .head > .btn{height:40px;padding:0 12px;font-size:13px}
  .head > .head-actions.acts-sm{width:auto;flex:0 0 auto;margin-left:auto;gap:6px}
  .head > .head-actions.acts-sm > .btn{flex:0 0 auto;min-width:0;height:40px;padding:0 10px;
    font-size:13px;white-space:nowrap}
  .head > .head-actions.acts-sm > .btn svg{width:16px;height:16px}
  /* id у селекторі навмисно: `.filters .flt-srch{width:100%}` вище довелось би перебивати,
     а нижче у файлі ще й правила з вагою id для самого рядка фільтрів */
  /* flex-basis 0, а не auto: інакше при довгій назві точки пошук не стискався,
     а зістрибував на другий рядок на всю ширину */
  /* стеля через max-width, а не через flex-basis: при wrap елемент з великою базою
     спершу переноситься на другий рядок і лише потім стискається */
  #stock-flt > .flt-srch{order:0;margin-left:auto;width:auto;flex:1 1 0;max-width:180px;min-width:104px}
  #stock-flt > .flt-srch input{height:40px;font-size:14px}
  /* пілюля локації ширша за свій текст: із «Лок.» вона була 110px і виглядала
     загубленою поруч із пошуком. Ширина рівно така, щоб обидва поля сходились
     в один рядок навіть із найдовшою назвою точки (Ok, 01.09.2026) */
  /* Пілюля стояла на 10px правіше за картки: у `.fpair` лишається текстовий вузол
     «Локація» (сам підпис на телефоні переїхав усередину пілюлі), і він разом із
     проміжком 8px зсував її вправо. Гасимо обидва — та сама правка, що в «Зарплатах» */
  #stock-flt.filters > .fpair{flex:0 1 auto;min-width:170px;max-width:58%;gap:0;font-size:0}
  /* Де фільтрів у смужці ДВА («Поставки»: локація + період, «Інвентаризація»: локація +
     вид), мінімум 170px на кожен не давав їм зійтись в один рядок на вужчих екранах.
     Там знімаємо мінімум — поля стають по своєму вмісту (Ok, 01.09.2026) */
  #stock-flt.filters:has(> .fpair ~ .fpair) > .fpair{min-width:0}
  #stock-flt.filters > .fpair > .oz-select{font-size:14px;margin-left:-2px}
  #stock-flt.filters > .fpair > .oz-select{flex:1 1 auto;min-width:0}
  #stock-flt.filters > .fpair .oz-trigger{width:100%;min-width:0}
  /* довша за стелю назва точки ріжеться трикрапкою — так пошук завжди лишається
     в тому самому рядку (Ok, 01.09.2026) */
  #stock-flt.filters > .fpair .oz-label{overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;min-width:0}
}
/* На планшеті пошук у рядку фільтрів займав майже пів рядка — робимо коротшим (Ok, 27.08.2026) */
@media(min-width:744px) and (min-height:501px) and (max-width:900px),
       (min-width:1024px) and (min-height:501px) and (max-width:1400px) and (orientation:landscape) and (hover:none){
  .filters .flt-srch{width:220px}
}
.srch{position:relative;display:inline-flex;align-items:center}
.srch-ic{position:absolute;left:14px;width:16px;height:16px;color:var(--stone);pointer-events:none}
.srch input{width:100%;padding-left:38px}
/* iPad mini вертикально: у тулбарі «вкладки + пошук» на пошук ішло 240px, і остання
   вкладка («Прострочені» в сертифікатах) зрізалась. 180 вистачає і йому, і вкладкам.
   `!important` — бо ширину пошуку ставить інлайн-стиль у розмітці (Ok, 28.08.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:819px) and (orientation:portrait){
  .pr-toolbar .srch{width:180px!important}
}

/* «Візити»: колонка зі стрілкою — впритул до правого краю картки */
#o-box table th:last-child, #o-box table td:last-child{width:28px;padding-left:0;padding-right:10px}

/* Pager */
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;font-size:13px;color:var(--stone)}
.pager-ctrl{display:flex;align-items:center;gap:8px}
.pager-ctrl select{height:34px}
/* Дропдаун «Рядків» у пагінації — тієї ж висоти, що круглі кнопки ‹ › (34px) */
.pager-ctrl .oz-select .oz-trigger{height:34px;padding:0 14px;font-size:13px}
.pager-pos{min-width:54px;text-align:center}
@media(max-width:900px){.cal-layout{flex-direction:column}#cal-side{flex:1 0 auto;width:100%}}

/* Календар на вертикальному планшеті (Ok, 27.08.2026): до 5 майстрів на екран,
   решта — горизонтальним свайпом, колонка годин липне зліва (як на телефоні).
   Раніше колонки тримали свої ~180px і виїжджали за правий край разом із шапкою.
   Ширина колонки = (екран − смужка меню 78 − відступи сторінки 64 − години 44) / min(майстрів, 5).
   Діапазон 761–900px: телефон (≤760) має власний блок з лімітом 3, десктоп (>900) не змінюється. */
@media(min-width:744px) and (min-height:501px) and (max-width:900px){
  #cal-box{width:100%;min-width:0}                        /* грід не розсуває сторінку — скрол усередині */
  /* БЕЗ scroll-snap (01.10.2026): iOS Safari у зв'язці снапу з липкою колонкою годин
     протягував скрол за край контенту — справа лишалась біла смуга. Вільний скрол. */
  .cal-wrap{overscroll-behavior-x:contain}
  .cal-inner{width:max-content;min-width:100%}
  .cal-cell-col{flex:0 0 calc((100vw - 186px) / min(var(--cal-mcols, 5), 5));max-width:calc((100vw - 186px) / min(var(--cal-mcols, 5), 5));min-width:0}
  .cal-card{padding:8px 10px}   /* тісніший падінг — більше місця під імʼя/послугу у вужчій колонці */
  .cal-head{padding:8px 8px;gap:0}
  /* липка колонка годин — над картками (card hover z:4, dropghost z:6), із чіткою правою межею */
  .cal-cell-time{position:sticky;left:0;z-index:8;flex:0 0 44px;min-width:0;background:var(--cl-bg);
    border-right:1px solid var(--cl-line);box-shadow:3px 0 5px -2px rgba(0,0,0,.10)}
  .cal-now{z-index:9}
  .cal-now-badge{position:sticky;left:0;top:auto;display:block;width:44px;transform:translateY(-50%);z-index:9}
  .cal-corner{flex:0 0 44px;min-width:0}
  .cal-timebody .cal-tlabel{font-size:11px;padding-right:4px}
  .cal-headrow .cal-corner{z-index:9;background:var(--cl-bg)}
}

/* ==================== MOBILE ==================== */
.topbar{display:none}
.nav-backdrop{display:none}
/* Кнопка «показати назви розділів» існує лише для сенсорного планшета —
   всюди інде її не видно (правила показу — у блоці 761–1280 з hover:none). */
.side-toggle{display:none}
/* Хрестик «закрити меню» потрібен лише телефону — там меню на весь екран
   і підкладки, по якій раніше закривали тапом, більше нема (Ok, 30.08.2026). */
.nav-close{display:none}
/* «‹ Назва розділу» — шапка другого рівня меню, теж лише на телефоні. */
.nav-back{display:none}
@media(max-width:743px),(max-height:500px){
  /* Верхня плашка — окрема картка з відступами 8px і заокругленими кутами (Ok, 30.08.2026).
     Відступ зверху рахуємо від безпечної зони, щоб на телефонах із «чубчиком»
     плашка стояла під статус-баром, а не залазила під нього. */
  .topbar{display:flex;align-items:center;gap:14px;position:fixed;left:8px;right:8px;height:56px;z-index:70;
    top:calc(8px + env(safe-area-inset-top));
    background:var(--canvas-dark);border-radius:var(--r-lg);padding:0 14px;
    /* тінь під плашкою: вміст видно, що він «під» нею, а не в одній площині
       (Ok, 03.09.2026) */
    box-shadow:0 6px 18px rgba(0,0,0,.18)}
  /* у темній темі фон сторінки майже чорний — світлу тінь не видно, беремо глибшу */
  html[data-theme="dark"] .topbar{box-shadow:0 8px 24px rgba(0,0,0,.5)}
  .burger{background:transparent;border:none;color:var(--on-dark);padding:6px;margin:4px;
    display:flex;align-items:center}
  .burger svg{width:26px;height:26px}
  /* SVG-лого (наш) у топбарі — на чорному тлі currentColor = світле «CRM» */
  .tb-logo{color:var(--on-dark);display:flex;align-items:center;
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}   /* лого по центру плашки (Ok, 15.07.2026) */
  /* нове лого CEGLA 435×112 — при 20px було б дрібним (Ok, 17.08.2026) */
  .tb-logo .brand-svg{height:28px;width:auto;display:block}
  /* тап по лого веде на дашборд (Ok, 30.08.2026) */
  .tb-logo{cursor:pointer;padding:6px 10px;-webkit-tap-highlight-color:transparent}

  .app{display:block}
  /* Меню на телефоні — на весь екран, відступ 8px з усіх боків і ті самі
     заокруглені кути, що й у верхньої плашки (Ok, 30.08.2026). Знизу і зверху
     рахуємо від безпечної зони, щоб не залазити під статус-бар і смужку жестів. */
  .sidebar{position:fixed;left:8px;right:8px;width:auto;height:auto;z-index:90;
    top:calc(8px + env(safe-area-inset-top));bottom:calc(8px + env(safe-area-inset-bottom));
    margin:0;border-radius:var(--r-lg);
    transform:translateX(calc(-100% - 8px));transition:transform .28s cubic-bezier(.22,.61,.36,1);
    box-shadow:0 18px 46px rgba(0,0,0,.4);padding-top:12px}   /* було 18px (Ok, 30.08.2026) */
  body.nav-open .sidebar{transform:none}
  /* Шапка повноекранного меню: лого ліворуч, хрестик праворуч (Ok, 30.08.2026).
     Лого вирівняне по лівому краю пунктів списку, хрестик винесений з потоку,
     щоб рядок мав рівно висоту лого. */
  /* Лого починається там, де починається підсвітка вибраного рядка (24px від краю
     панелі). У самому файлі лого є 24px порожнього поля зліва, а панель має свої
     14px відступу — тому тягнемо блок на 14px лівіше (Ok, 30.08.2026). */
  .sidebar .logo{display:flex;align-items:center;height:40px;margin:0 0 0 -14px;flex:0 0 40px}
  .sidebar .logo .logo-full{display:block;height:26px;width:auto}
  .sidebar .logo .logo-short{display:none}
  .nav-close{display:flex;align-items:center;justify-content:center;
    /* хрестик відступає від правого краю панелі рівно так само, як лого від лівого
       (24px): сама іконка сидить у кнопці з відступом 14px (Ok, 30.08.2026) */
    position:absolute;top:12px;right:10px;
    width:40px;height:40px;padding:0;background:transparent;border:none;
    color:var(--on-dark-mute);border-radius:var(--r-full);-webkit-tap-highlight-color:transparent}
  .nav-close svg{width:24px;height:24px}
  .sidebar #nav{margin-top:12px}   /* просвіт від лого/хрестика до пунктів (Ok, 30.08.2026) */

  /* Картка користувача на телефоні стоїть праворуч на верхній плашці (Ok, 30.08.2026):
     сам вузол переносить JS, тут лишається тільки аватар — імені й стрілки на
     вузькій плашці немає де показувати. */
  .topbar .side-acct{margin:0 10px 0 auto;flex:0 0 auto}
  .topbar .side-user{width:auto;height:40px;padding:0;gap:0;border-radius:50%}
  .topbar .side-user-info,.topbar .side-user-chev{display:none}
  .topbar .side-user-ava{width:36px;height:36px}
  .topbar .side-acct.open .side-user{background:transparent}

  /* ---- Другий рівень меню (Ok, 30.08.2026) ----
     Розділи з підпунктами (Аналітика, Склад, Рух коштів, Налаштування) на телефоні
     не розкриваються списком усередині, а відкривають окремий екран меню. */
  .nav-grp .nav-chev{transform:rotate(-90deg)}          /* стрілка дивиться вправо */
  .nav-grp.open .nav-chev{transform:rotate(-90deg)}     /* стан «розгорнуто» тут не діє */
  /* На першому рівні підпунктів не видно НІКОЛИ — навіть коли група позначена
     розгорнутою (клас .open лишається з десктопа й зі збереженого стану). Інакше
     на сторінці всередині розділу знову вилазив старий список (Ok, 30.08.2026). */
  .sidebar:not(.subnav) #nav .nav-grp .nav-sub{display:none}
  /* шапка другого рівня: «‹ Назва розділу» замість лого */
  .sidebar.subnav .logo{display:none}
  /* Назва розділу стоїть рівно над назвами підпунктів (38px), а стрілка «‹»
     виноситься лівіше — як у звичайних мобільних застосунках (Ok, 30.08.2026). */
  .sidebar.subnav .nav-back{display:flex;align-items:center;gap:2px;height:40px;flex:0 0 40px;
    margin:0 44px 0 0;padding:0;background:transparent;border:none;
    color:var(--on-dark);font:inherit;font-size:16px;font-weight:600;letter-spacing:-0.2px;
    border-radius:var(--r-full);-webkit-tap-highlight-color:transparent}
  .sidebar.subnav .nav-back svg{width:22px;height:22px;flex:0 0 22px}
  .sidebar.subnav .nav-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* на другому екрані лишається тільки відкрита група */
  .sidebar.subnav #nav > *:not(.nav-grp.subopen){display:none}
  .sidebar.subnav #nav .nav-grp.subopen > .nav-parent{display:none}   /* назва вже в шапці */
  /* підпункти виглядають як пункти головного меню: без лінії-відступу зліва */
  /* Розміри й кроки рядків — один в один як у головного меню (Ok, 30.08.2026):
     висота 40px, відступ між рядками 2px, ті самі поля й кегль. */
  .sidebar.subnav #nav .nav-grp.subopen .nav-sub{display:flex;gap:2px;margin:0;padding-left:0;border-left:none}
  .sidebar.subnav #nav .nav-grp.subopen > .nav-sub > a,
  .sidebar.subnav #nav .nav-grp.subopen .nav-sub-gh,
  .sidebar.subnav #nav .nav-grp.subopen .nav-sub-items a{height:40px;padding:14px;font-size:16px;font-weight:600}
  /* лише РОЗГОРНУТА група — інакше перебили б display:none закритих (Ok, 30.08.2026) */
  .sidebar.subnav #nav .nav-grp.subopen .nav-sub-grp.open .nav-sub-items{display:flex;flex-direction:column;gap:2px}
  .sidebar.subnav #nav .nav-grp.subopen .nav-sub-grp{margin:0}   /* крок рядків має лишатись 42px */

  .nav-backdrop{display:block;position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
  #nav a{padding:14px 14px;font-size:16px}

  /* Картки дашборда на телефоні йдуть одна під одною, і кожна була заввишки під
     свій вміст — з бейджем «vs попередній» вища, без нього нижча, через що список
     «стрибав» (Ok, 30.08.2026). Кладемо їх у сітку з рівними рядками: усі картки
     блоку однакової висоти. Ряди по дві картки (.cards-rows) не чіпаємо — там
     висоти й так вирівнює сам ряд. */
  .dash-sec .cards:not(.cards-rows){display:grid;grid-template-columns:1fr;grid-auto-rows:1fr}
  /* Число більше не притискається донизу: інакше в картці без бейджа воно падало
     на дно, і суми стояли на різній висоті. Тепер усі числа на одній лінії. */
  .dash-sec .cards:not(.cards-rows) > .card > .val{margin-top:0}

  /* Вісь графіка виручки: колонка з підписами тримала 64px, і зліва від стовпчиків
     зяяла порожнеча (Ok, 30.08.2026). Підпис «80к ₴» на 11px просить ~40px —
     лишаємо рівно стільки плюс невеликий просвіт до стовпчиків. */
  /* Ліворуч від стовпчиків зяяла порожнеча: 24px поля картки + 48px колонка осі
     + 8px просвіт. Підтискаємо і поле картки, і саму вісь (Ok, 30.08.2026):
     підпис «20к ₴» на 11px просить ~34px, тож 40px колонки вистачає з запасом. */
  .rd-chart-box{padding:14px}
  .rd-chart{--rd-y-w:40px}
  .rd-y-axis{padding-right:6px;font-size:11px}

  /* Кнопки календаря й налаштувань у фільтрах дашборда — трохи менші, щоб увесь
     рядок вмістився на 390px (Ok, 30.08.2026) */
  /* flex:0 0 auto — інакше при довгій назві локації рядок у nowrap стискав і
     круглі кнопки, вони переставали бути колами (Ok, 30.08.2026) */
  #dash-toolbar .dash-cal-wrap{margin-left:0;flex:0 0 auto}
  #dash-toolbar .dash-cal-btn{width:44px !important;height:44px !important;flex:0 0 auto}
  #dash-toolbar .oz-trigger{height:44px}

  /* 8px відступ плашки зверху + 56px її висота + 14px просвіт до вмісту */
  main{padding:calc(78px + env(safe-area-inset-top)) 14px 28px}
  .head{margin-bottom:16px}.head h1{font-size:24px;letter-spacing:-0.24px}
  .cards{gap:14px}.card,.card-wrap{min-width:calc(50% - 6px)}.card{padding:16px}
  /* на телефоні вирівняний ряд — рівно дві колонки (min-width картки тут зайвий).
     Спільну сітку рядків тут вимикаємо: картки стають звичайними, інакше нульовий
     row-gap (потрібний на десктопі) склеював би ряди карток між собою. */
  /* Просвіт між рядами карток дає нижнє поле самої картки; row-gap тут має бути 0,
     інакше відступи складаються (було 30px по вертикалі проти 16px по горизонталі).
     Значення 14px — рівно як зовнішні поля сторінки, щоб уся сітка була в одному
     кроці (Ok, 30.08.2026). */
  .cards.cards-rows{grid-template-columns:1fr 1fr;row-gap:0;column-gap:14px}
  .cards.cards-rows > .card{margin-bottom:14px}
  .cards.cards-1big{gap:14px}
  /* Блок «Фінанси» — усі картки однакової висоти, як у блоці «Візити»
     (Ok, 30.08.2026). Для цього саме в ньому вимикаємо спільну сітку рядків:
     subgrid тримає підписи на однакових лініях, але дозволяє рядам різнитись
     висотою. Тут важливіше рівне полотно, ніж лінії. */
  /* «Продажі товарів»: «Маржа» лишалась сама в ряду на пів ширини — розтягуємо
     її на весь рядок, а висоти в блоці робимо однаковими, як у сусідів зверху
     (Ok, 30.08.2026). Механіка та сама, що в «Фінансах». */
  .cards.cards-goods > .card:last-child{grid-column:1 / -1}
  /* «Сертифікати» і «Товари на продаж» — усі картки на всю ширину; у блоці
     «Як часто ходять» на всю ширину лише перша («Середня к-сть візитів»),
     решта чотири лишаються по дві в ряд (Ok, 30.08.2026). */
  .cards.cards-cert > .card,
  .cards.cards-stock > .card,
  .cards.cards-freq > .card:first-child{grid-column:1 / -1}
  .cards.cards-fin,.cards.cards-goods,.cards.cards-cert,.cards.cards-stock{grid-auto-rows:1fr}
  .cards.cards-fin > .card,.cards.cards-goods > .card,
  .cards.cards-cert > .card,.cards.cards-stock > .card{display:flex;flex-direction:column;grid-row:auto;grid-template-rows:none}
  .cards.cards-fin > .card > .lbl,.cards.cards-goods > .card > .lbl,
  .cards.cards-cert > .card > .lbl,.cards.cards-stock > .card > .lbl,
  .cards.cards-fin > .card > .val,.cards.cards-goods > .card > .val,
  .cards.cards-cert > .card > .val,.cards.cards-stock > .card > .val,
  .cards.cards-fin > .card > .sub,.cards.cards-goods > .card > .sub,
  .cards.cards-cert > .card > .sub,.cards.cards-stock > .card > .sub{align-self:auto}
  .cards.cards-fin > .card > .val,.cards.cards-goods > .card > .val,
  .cards.cards-cert > .card > .val,.cards.cards-stock > .card > .val{margin-top:auto}
  /* «Чистий прибуток» — головне число сторінки, тому в портреті йому вся ширина,
     решта карток лишається по дві в ряд (Ok, 30.08.2026). У горизонтальному
     положенні місця вистачає й так — там нічого не міняємо. */
  @media (orientation:portrait){
    .cards.cards-fin > .card.hero{grid-column:1 / -1}
    /* Кегль підписів — як у сусідніх картках, інакше «Чистий прибуток» на 5px
       вищий і ряд виглядає нерівним (Ok, 30.08.2026). Виділяє його колір, а не
       розмір тексту. */
    .cards.cards-fin > .card.hero .lbl{font-size:13px;margin-bottom:10px}
    .cards.cards-fin > .card.hero .sub{font-size:12px}
    /* Фінанси → «Стан бізнесу»: картки на всю ширину екрана, по одній у ряд
       (Ok, 30.08.2026). У дві колонки довгі підписи ламались на три рядки й
       картки виходили різновисокими. Перебиваємо загальне правило «6 карток →
       дві колонки» — тому в селекторі ті самі :not(), щоб виграти вагою. */
    .cards.cards-biz:not(.sp-cards):not(.cards-rows):has(> :nth-child(6)){grid-template-columns:1fr}
    /* В один стовпчик вирівнювати рядки між собою вже нема з чим: 1fr розтягнув би
       всі шість карток під найвищу, а порожній рядок під числом резервувався заради
       сусіда по ряду. Обидва прибираємо — кожна картка по своєму вмісту. */
    main .cards.cards-biz{grid-auto-rows:auto}
    .cards.cards-biz > .card:not(:has(> .sub))::after{content:none}
  }
  /* Спільну сітку рядків (subgrid) на телефоні БІЛЬШЕ НЕ ВИМИКАЄМО (Ok, 30.08.2026):
     саме вона тримає підпис, число і примітку на однакових лініях у всіх картках
     ряду. Раніше тут стояв `display:flex; grid-row:auto`, і числа роз'їжджались,
     щойно в сусіда примітка займала два рядки. Поведінка тепер така сама, як на
     десктопі, тільки колонок дві. */
  /* Усі блоки карток на телефоні — рядки однакової висоти. До цього кожен ряд
     підганявся під свій вміст, і картки в блоці були різного розміру
     (Ok, 30.08.2026, сторінка Аналітика → Огляд). */
  main .cards:not(.cards-rows){grid-auto-rows:1fr}
  /* Картка без підпису знизу (напр. «Чистий прибуток», коли 0 ₴ і відсотка немає):
     число притискалось до самого низу і стояло нижче, ніж у сусідів по ряду
     (Ok, 30.08.2026). Резервуємо порожній рядок замість підпису — числа знову
     на одній лінії. */
  .cards:not(.cards-rows) > .card:not(:has(> .sub))::after{content:"";display:block;height:18px;margin-top:1px}
  /* Довга назва без пробілів («Біозавивка(обовʼязкова…») вилазила за край картки —
     дозволяємо переносити всередині слова */
  .card .lbl{overflow-wrap:break-word}
  .card .val{font-size:20px}
  /* на вузькому екрані 32px не влазять в один рядок — сума ламалась навпіл */
  .card.hero .val{font-size:24px}
  /* Картки співробітника — по дві в ряд (Ok, 03.08.2026). Проміжок 12, тож половина
     мінус 6 сходиться точно; із загальними 14px двом карткам не вистачало 2px і вони
     розліталися по одній у рядок. */
  .sp-cards{gap:12px}
  .cards:not(.sp-cards):not(.cards-rows):has(> :nth-child(6)){grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  /* «Візити» на телефоні: велика картка на всю ширину, решта по дві в ряд */
  /* Поля в картках блоку «Візити» були 16px проти 18px у решти блоків — на око
     блоки виглядали по-різному (Ok, 30.08.2026). Зрівнюємо. */
  .cards.cards-1big .card{padding:18px}
  .cards.cards-1big{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  .cards.cards-1big > :nth-child(1){grid-row:auto;grid-column:span 2}
  .cards.cards-1big > :nth-child(1) .val{font-size:24px}
  .cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(1),
  .cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(2){grid-row:auto}
  .cards:not(.sp-cards):has(> :nth-child(6)) .card{padding:16px}
  .cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(1) .val,
  .cards:not(.sp-cards):has(> :nth-child(6)) > :nth-child(2) .val{font-size:24px}
  /* Назва фільтра переїхала всередину пілюлі — «Локація: усі» (Ok, 30.08.2026).
     Підпис поруч ховаємо: font-size:0 прибирає і звичайний текст, і спани зі
     скороченнями (їх треба глушити окремо — дітям розмір повертається). */
  .filters > .fpair{font-size:0;gap:0}
  .filters > .fpair > *{font-size:14px}
  .filters > .fpair > .lb-full,
  .filters > .fpair > .lb-abbr{display:none}
  .oz-pre{color:var(--stone);margin-right:4px;white-space:nowrap;flex:0 0 auto}
  /* Просвіт від фільтра до вмісту — 14px замість 24 (Ok, 30.08.2026: «розділова
     лінія дуже далеко від фільтру»). Саме ці 24px і тримали відстань — відступ
     першої секції зверху менший і повністю в них ховався. */
  .filters{gap:8px;margin-bottom:14px}
  .filters input,.filters select{flex:1;min-width:0}
  /* …але не галочки: список показників живе всередині фільтра, і flex:1 розтягував
     квадратик чекбокса в довгий овал (Ok, 31.08.2026) */
  .filters input[type=checkbox],.filters input[type=radio]{flex:0 0 auto}
  table{display:block;overflow-x:auto;white-space:nowrap;border-radius:var(--r-lg)}
  th,td{padding:14px 14px}
  /* Календар на телефоні: свайп по майстрах (один майстер = екран) + липка колонка часу (Ok, 13.07.2026) */
  #cal-box{width:100%;min-width:0}                        /* грід не розсуває сторінку — скрол усередині */
  .cal-wrap{overscroll-behavior-x:contain}
  /* Гнучко (Ok, 14.07.2026): ширина колонки = (екран − відступи − час) / min(кількість майстрів, 3).
     --cal-mcols виставляє JS (renderDay=кількість майстрів, renderWeek=7). Тож:
       ≤3 майстри → розтягуються на весь екран; >3 → по 1/3, горизонтальний скрол (3 на екран).
     flex:0 0 (без росту) — інакше max-content+grow розпирає колонки.
     ⚠️ max-width = тій самій формулі (01.10.2026, СПРАВЖНЯ причина білої смуги справа):
     .cal-inner має width:max-content, і iOS Safari рахує цю ширину за ВМІСТОМ шапок
     (повні імена майстрів), ігноруючи flex-basis колонок — обгортка виходила ширшою
     за колонки (758px замість 551 на iPhone, зняли бейдж-діагностикою), і хвіст
     скролу був порожній. max-width клампить внесок колонки; Chrome це не зачіпає.
     БЕЗ scroll-snap (01.10.2026): з ним iOS ще й «прилипав» за край; вільний скрол.
     ⚠️ 30px — це те, що з'їдають main (padding 14px×2) і рамка .cal-wrap (1px×2). Раніше формула
     брала чистий 100vw і третя колонка вилазила за екран на ~10px (Ok показав скрін 31.08.2026).
     Колонку часу звужено 56→36px, щоб віддати ширину майстрам (Ok, 31.08.2026). */
  .cal-cell-col{flex:0 0 calc((100vw - 30px - 36px) / min(var(--cal-mcols, 3), 3));max-width:calc((100vw - 30px - 36px) / min(var(--cal-mcols, 3), 3));min-width:0}
  .cal-card{padding:8px 10px}   /* трохи тісніший падінг — більше місця під імʼя/послугу у вужчій колонці */
  /* На телефоні колонка ~115px, а імʼя з прізвищем довше — переносимо у два рядки,
     щоб не показувати «Олексій М…» (Ok, 19.08.2026) */
  /* на телефоні колонка вужча — трохи тісніші відступи, щоб під імʼя лишилось більше */
  .cal-head{padding:8px 8px;gap:0}
  .cal-head img,.cal-head .ph{width:26px;height:26px;flex:0 0 26px}
  .cal-inner{width:max-content;min-width:100%}
  /* липка колонка годин — над картками (card hover z:4, dropghost z:6), із чіткою правою межею */
  .cal-cell-time{position:sticky;left:0;z-index:8;flex:0 0 36px;min-width:0;background:var(--cl-bg);
    border-right:1px solid var(--cl-line);box-shadow:3px 0 5px -2px rgba(0,0,0,.10)}
  .cal-now{z-index:9}   /* лінія поточного часу — поверх липкої колонки годин (Ok, 15.07.2026) */
  /* бейдж часу — липкий до лівого краю (як колонка годин), по її ширині (Ok, 15.07.2026) */
  .cal-now-badge{position:sticky;left:0;top:auto;display:block;width:36px;transform:translateY(-50%);z-index:9}
  .cal-corner{flex:0 0 36px;min-width:0}
  /* у 36px кутик слово «зайнято» не влазить — лишаємо «1/5», розшифровка в підказці (Ok, 31.08.2026) */
  .cal-seats span{display:none}
  .cal-seats b{font-size:13px}
  /* мітка часу менша, щоб «09:00» влізло у вужчу (36px) колонку й збіглося з шапкою */
  .cal-timebody .cal-tlabel{font-size:11px;padding-right:3px}
  .cal-headrow .cal-corner{z-index:9;background:var(--cl-bg)}
  .drawer,.drawer.wide{width:100vw}
  .modal{width:94vw;padding:24px}
  .modal-actions{flex-wrap:wrap}
  .modal-actions .btn{flex:1;min-width:120px}
  /* Форма запису: «Скасувати» окремим рядком у самому низу (Ok, 13.07.2026) */
  .modal-actions .bk-cancel-bottom{flex:1 1 100%;order:99;margin-top:2px}
  /* Картка бронювання: Оплатити+··· у ряд зверху, «Закрити» на всю ширину знизу (Ok, 13.07.2026) */
  .modal-actions .rd-act-pay{flex:1 1 auto;order:0}
  .modal-actions .rd-more{flex:0 0 auto;order:1}
  .modal-actions .rd-more-round,.modal-actions .rd-send-round{flex:0 0 44px;min-width:44px;max-width:44px;width:44px}  /* кружечок, а не овал */
  .modal-actions .rd-act-close{flex:1 1 100%;order:2;margin-top:2px}

  /* Таблиці з opts.cards → на телефоні кожен рядок стає карткою з підписами полів
     (замість широкої таблиці з горизонтальним скролом). Персонал/Клієнти/Зарплати. */
  table.cards-mob{display:block;overflow:visible;white-space:normal;border:none;background:transparent;border-radius:0;padding:0;margin:0}
  table.cards-mob thead{display:none}
  /* у картковому вигляді рядок і так у рамці — окрема лінія-роздільник зайва */
  @media (hover:hover){
    table.cards-mob tbody tr:hover td::after{content:none}
    /* тут ::before — це підпис колонки, тож підсвітку повертаємо звичайним фоном */
    table.cards-mob tbody tr:hover td{background:var(--surface-soft)}
  }
  table.cards-mob tbody{display:block}
  table.cards-mob tr{display:block;background:var(--canvas-light);border:1px solid var(--hairline-light);
    border-radius:var(--r-lg);padding:4px 14px;margin-bottom:10px}
  table.cards-mob td{display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:9px 0;border:none;white-space:normal;text-align:right;min-height:20px}
  table.cards-mob td+td{border-top:1px solid var(--hairline-light)}
  table.cards-mob td::before{content:attr(data-label);flex:0 0 auto;text-align:left;
    color:var(--stone);font-size:12px;font-weight:500;white-space:nowrap}
  table.cards-mob td:empty{display:none}
  /* Колонка дій (порожній заголовок): без підпису, кнопки праворуч */
  table.cards-mob td[data-label=""]{justify-content:flex-end}
  table.cards-mob td[data-label=""]::before{display:none}
  /* «···» у картці на телефоні — тієї ж висоти, що й кнопка поруч («Продаж»,
     «Виплатити»): 28px виглядали як менша кнопка в парі (Ok, 01.09.2026) */
  table .sal-more{width:34px;height:34px;min-width:34px}
  table .sal-more svg{width:17px;height:17px}
  /* Прибираємо помаранчеву стрілку-шеврон у мобільних картках — уся картка й так клікабельна (Ok, 14.07.2026) */
  table.cards-mob .tx-open{display:none}
  /* Головна на телефоні: «Майстри на зміні» і «Найближчі записи» були картками з двох
     рядків із підписами («Майстер», «Зміна», «Час», «Клієнт»), хоча це один рядок даних.
     Робимо один запис = один рядок: ліворуч головне, праворуч друге (Ok, 03.09.2026). */
  table.dash-onshift-tbl.cards-mob tr,
  table.dash-next-tbl.cards-mob tr{display:flex;align-items:center;gap:12px;padding:10px 14px}
  table.dash-onshift-tbl.cards-mob td,
  table.dash-next-tbl.cards-mob td{display:block;flex:1 1 auto;min-width:0;padding:0;text-align:left}
  table.dash-onshift-tbl.cards-mob td::before,
  table.dash-next-tbl.cards-mob td::before{display:none}
  table.dash-onshift-tbl.cards-mob td+td,
  table.dash-next-tbl.cards-mob td+td{flex:0 0 auto;border-top:none;text-align:right}
  /* час зміни в один рядок, без переносу «10:00–» / «20:00» */
  table.dash-onshift-tbl.cards-mob .dash-shift-iv{white-space:nowrap}
  /* десктопне «вузька перша колонка, без переносу» тут заважає — довге імʼя майстра
     чи клієнта має переноситись, а не вилазити за картку */
  table.dash-next-tbl.cards-mob td:first-child{width:auto;white-space:normal}
  /* «Що зробити сьогодні»: підписи «Справа»/«Клієнт» з'їдали пів ширини, через що назва
     справи ламалась на три рядки посеред картки. Тепер: справа й кнопка в один рядок,
     під ними час і майстер, ще нижче клієнт із телефоном (Ok, 03.09.2026). */
  table.dash-task-tbl.cards-mob tr{display:flex;flex-wrap:wrap;align-items:center;
    gap:10px;padding:10px 14px}
  table.dash-task-tbl.cards-mob td{padding:0;border-top:none;text-align:left;white-space:normal}
  table.dash-task-tbl.cards-mob td::before{display:none}
  /* порядок у картці: справа + кнопка перший рядок, клієнт — другий (у розмітці клієнт іде другим) */
  /* flex-basis саме 0: при auto довгий підрядок «дата · майстер» тримав ширину, і кнопка
     зістрибувала на власний рядок (рядок 147px замість 122px) */
  table.dash-task-tbl.cards-mob td[data-label="Справа"]{display:block;flex:1 1 0;min-width:0;order:1}
  table.dash-task-tbl.cards-mob td[data-label=""]{flex:0 0 auto;justify-content:flex-end;order:2}
  table.dash-task-tbl.cards-mob td[data-label="Клієнт"]{order:3;flex:0 0 100%;display:flex;flex-wrap:wrap;
    align-items:baseline;gap:4px 8px;padding-top:8px;border-top:1px solid var(--hairline-light)}
  table.dash-task-tbl.cards-mob td[data-label="Клієнт"] div{font-size:13px}
  /* Лист очікування: імʼя і телефон у перший рядок, під ними дрібним «коли» (Ok, 04.09.2026) */
  table.dash-wl-tbl.cards-mob tr{display:flex;flex-wrap:wrap;padding:10px 14px}
  table.dash-wl-tbl.cards-mob td{padding:0;border-top:none;text-align:left;white-space:normal}
  table.dash-wl-tbl.cards-mob td::before{display:none}
  table.dash-wl-tbl.cards-mob td[data-label="Клієнт"]{flex:0 0 100%;display:flex;
    justify-content:space-between;align-items:baseline;gap:10px}
  table.dash-wl-tbl.cards-mob td[data-label="Коли"]{flex:0 0 100%;display:flex;flex-wrap:wrap;
    align-items:baseline;gap:4px 8px;padding-top:4px;font-size:13px;color:var(--muted-ink,var(--stone))}
  /* Товари на межі: назва зверху, під нею залишок і запас днів — з короткими підписами,
     інакше два числа поспіль неможливо розрізнити */
  /* Сітка, а не flex-wrap: при flex короткі назви лишались в одному рядку з числами,
     а довгі переносились — картки виходили різної висоти (Ok, 04.09.2026) */
  table.dash-low-tbl.cards-mob tr{display:grid;grid-template-columns:1fr auto;
    gap:2px 12px;padding:10px 14px;align-items:baseline}
  table.dash-low-tbl.cards-mob td{padding:0;border-top:none;text-align:left;white-space:normal}
  table.dash-low-tbl.cards-mob td[data-label="Товар"]{grid-column:1/-1;font-weight:600}
  table.dash-low-tbl.cards-mob td[data-label="Товар"]::before{display:none}
  table.dash-low-tbl.cards-mob td[data-label="Залишок"]{grid-column:1;justify-content:flex-start}
  table.dash-low-tbl.cards-mob td[data-label="Вистачить на"]{grid-column:2;justify-content:flex-end}
  table.dash-low-tbl.cards-mob td[data-label="Залишок"],
  table.dash-low-tbl.cards-mob td[data-label="Вистачить на"]{display:flex;gap:5px;font-size:13px}
  /* Дні народження: імʼя і «через скільки» в рядок, під ними посада й дата */
  table.dash-bday-tbl.cards-mob tr{display:grid;grid-template-columns:1fr auto;
    gap:2px 10px;padding:10px 14px;align-items:baseline}
  table.dash-bday-tbl.cards-mob td{padding:0;border-top:none;text-align:left;white-space:normal}
  table.dash-bday-tbl.cards-mob td::before{display:none}
  table.dash-bday-tbl.cards-mob td[data-label="Співробітник"]{grid-column:1;grid-row:1;font-weight:600}
  table.dash-bday-tbl.cards-mob td[data-label="Через"]{grid-column:2;grid-row:1;text-align:right;
    justify-content:flex-end}
  table.dash-bday-tbl.cards-mob td[data-label="Посада"]{grid-column:1;grid-row:2;font-size:13px;color:var(--stone)}
  table.dash-bday-tbl.cards-mob td[data-label="Дата"]{grid-column:2;grid-row:2;font-size:13px;
    color:var(--stone);justify-content:flex-end}
  /* «Моя зарплата» → «Історія»: день і сума в один рядок, під датою дрібним день тижня
     і кількість операцій. Підписи «День»/«Сума» тут нічого не пояснювали (Ok, 04.09.2026).
     Рядок розкритого дня (.ms-day-details) не чіпаємо — це окрема картка зі списком. */
  table.ms-hist-tbl.cards-mob tbody tr:not(.ms-day-details){display:grid;
    grid-template-columns:1fr auto;gap:10px;align-items:baseline;padding:10px 14px}
  table.ms-hist-tbl.cards-mob tbody tr:not(.ms-day-details) > td{padding:0;border-top:none;
    text-align:left;white-space:normal}
  table.ms-hist-tbl.cards-mob tbody tr:not(.ms-day-details) > td::before{display:none}
  table.ms-hist-tbl.cards-mob td[data-label="Сума"]{justify-content:flex-end;white-space:nowrap}
  /* Розкритий день: комірка на всю ширину. Без цього спрацьовує загальне
     `cards-mob td{display:flex;justify-content:space-between}`, і порожній підпис-::before
     штовхав список операцій до правого краю.
     Заливку прибрано (Ok, 04.09.2026): картка дня і так окремий блок, а сіра підкладка
     всередині неї читалась як «виділено». `text-align:left` обовʼязково — інакше діє
     успадковане `cards-mob td{text-align:right}` і назва операції висить по центру. */
  table.ms-hist-tbl.cards-mob tr.ms-day-details > td{display:block;text-align:left;
    background:transparent}
  table.ms-hist-tbl.cards-mob tr.ms-day-details > td::before{display:none}
  /* поля вже є в самої картки — другий відступ усередині робив список вужчим за дату */
  table.ms-hist-tbl.cards-mob .ms-day-list{padding:0}
  table.ms-hist-tbl.cards-mob .ms-day-row{padding:8px 0;gap:12px}
  /* «Показати ще» має стояти по тій самій лівій лінії, що й назви операцій */
  table.ms-hist-tbl.cards-mob .ms-day-list > .btn{margin:10px 0 4px}
  /* Перемикач «Усе / Нарахування / Списання / Виплати» не вміщався в 390px і четверта
     вкладка обрізалась краєм екрана. Стискаю поля — усі чотири стають видимі (Ok, 04.09.2026) */
  .ms-hist-tabs{gap:6px}
  .ms-hist-tabs .fin-tab{padding:8px 11px;font-size:13px}
  /* Зарплати на телефоні: у списку лишаємо тільки людину, борг і дії — посада й схема
     видно в деталях по кліку. Рядок 260px → ~120px (Ok, 03.08.2026). */
  table.sal-tbl.cards-mob td[data-label="Схема"]{display:none}
  /* два рядки: людина зверху, під нею сума ліворуч і кнопки праворуч */
  table.sal-tbl.cards-mob tr{display:flex;flex-wrap:wrap;align-items:center;padding:8px 14px}
  table.sal-tbl.cards-mob td[data-label="Співробітник"]{flex:0 0 100%;padding-bottom:2px}
  table.sal-tbl.cards-mob td[data-label="Співробітник"]::before{display:none}
  table.sal-tbl.cards-mob td[data-label="До виплати"]{flex:1;justify-content:flex-start;
    border-top:none;padding-top:0;text-align:left}
  table.sal-tbl.cards-mob td[data-label="До виплати"] b{font-size:20px}
  table.sal-tbl.cards-mob td[data-label=""]{flex:0 0 auto;border-top:none;padding-top:0}
  /* Вікно «Зарплата · майстер» на телефоні: картки були на всю ширину й дуже високі,
     через них доводилось довго гортати до рухів по рахунку. Робимо компактними
     і по дві в ряд; «До виплати» лишається на всю ширину (Ok, 01.09.2026). */
  .sal-acc-cards{gap:8px}
  .sal-acc-cards > .card{min-width:calc(50% - 5px);padding:12px 14px}
  .sal-acc-cards > .card .lbl{font-size:13px;margin-bottom:4px}
  .sal-acc-cards > .card .val{font-size:20px}
  .sal-acc-cards > .card .sub{font-size:12px}
  .sal-acc-cards > .card.income{padding:14px}
  .sal-acc-cards > .card.income .val{font-size:26px}
  /* Порожній рядок-заповнювач під числом (вирівнює числа в рядах на сторінках)
     тут лише додає 18px порожнечі — картки і так однакової висоти */
  .cards.sal-acc-cards > .card:not(:has(> .sub))::after{content:none}
  /* «− Списано вручну» майже завжди 0 і займає цілий ряд — на телефоні ховаємо
     порожню картку, з'являється лише коли справді щось списали (Ok, 01.09.2026) */
  .cards.sal-acc-cards > .card.ded-zero{display:none}
  /* Журнал зарплат: чотири фільтри в ОДИН рядок (Ok, 01.09.2026). Підписи в пілюлях
     скорочені через data-pre, а самі пілюлі ділять ширину порівну й обрізають
     довге значення трикрапкою — «Співр.: Олександра Ад…». Період трохи ширший:
     дату різати не можна. */
  /* Тільки телефон ВЕРТИКАЛЬНО: горизонталь буває вужчою за 743px, тому умова саме
     по орієнтації — боком показуємо повні підписи (Ok, 01.09.2026) */
  @media (max-width:743px) and (orientation:portrait){
    #sj-flt{gap:4px}
    /* Пілюлі по вмісту: поки фільтри порожні (самі назви) усі чотири сідають в один
       рядок. Якщо вибрати щось довге — пілюля росте максимум до 48% ширини, далі
       значення обрізається трикрапкою, а зайве переноситься на другий рядок. */
    #sj-flt > .fpair{flex:0 1 auto;min-width:0;max-width:48%}
    #sj-flt .oz-select,#sj-flt .dr{min-width:0;width:100%}
    #sj-flt .oz-trigger,#sj-flt .dr-trigger{width:100%;min-width:0;overflow:hidden;
      padding-left:8px;padding-right:6px;font-size:13px}
    #sj-flt .oz-trigger{gap:2px}
    #sj-flt .oz-pre{margin-right:2px}
    #sj-flt .oz-label,#sj-flt .dr-trigger{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  }
  /* Журнал зарплат на телефоні: людина з датою зверху, під нею опис, знизу тип і сума */
  table.salj-tbl.cards-mob tr{display:flex;flex-wrap:wrap;align-items:center;padding:8px 14px}
  table.salj-tbl.cards-mob td[data-label="Співробітник"]{flex:0 0 100%;padding-bottom:2px}
  /* Опис вирівнюємо ліворуч, як ім'я над ним: у флекс-комірці короткий текст ставав
     зліва, а довгий (у два рядки) відскакував праворуч — виглядало як різнобій.
     Порядком рядків керує order: опис одразу під іменем, тип і сума — знизу
     одним рядком (у розмітці опис іде після типу) (Ok, 01.09.2026) */
  table.salj-tbl.cards-mob td[data-label="Опис"]{flex:0 0 100%;border-top:none;padding-top:0;
    order:1;justify-content:flex-start;text-align:left}
  table.salj-tbl.cards-mob td[data-label="Тип"]{flex:1;border-top:none;padding-top:2px;order:2;
    color:var(--muted);font-size:13px;justify-content:flex-start;text-align:left}
  table.salj-tbl.cards-mob td[data-label="Сума"]{flex:0 0 auto;border-top:none;padding-top:2px;
    order:3;text-align:right}
  table.salj-tbl.cards-mob td[data-label="Співробітник"]::before,
  table.salj-tbl.cards-mob td[data-label="Опис"]::before,
  table.salj-tbl.cards-mob td[data-label="Тип"]::before,
  table.salj-tbl.cards-mob td[data-label="Сума"]::before{display:none}
  /* «Склад → Товари» на телефоні (Ok, 01.09.2026). Було: назва тиснулась у середину між
     підписом «Назва» і брендом (комірка — flex, а бренд і плашка поради в ній окремі
     блоки, тому ставали в РЯД з назвою), довга назва рвалась на чотири рядки, а плашка
     поради взагалі вилазила за картку. Стало: назва блоком на всю ширину (бренд і
     порада — під нею), далі локації із залишками, знизу ціна ліворуч, загальний
     залишок і кнопки праворуч. */
  table.pr-tbl.cards-mob tr{display:flex;flex-wrap:wrap;align-items:center;padding:10px 14px}
  /* order важливий: у розмітці колонки йдуть Назва → Локації → Ціна → Залишок → дії,
     а на картці треба «локації + залишок» одним рядком і «ціна + кнопки» наступним */
  table.pr-tbl.cards-mob td[data-label="Назва"]{display:block;flex:0 0 100%;order:1;
    text-align:left;padding:0 0 4px;border-top:none}
  table.pr-tbl.cards-mob td[data-label="Локації"]{flex:1 1 60%;order:2;border-top:none;padding:0;
    justify-content:flex-start;text-align:left;min-width:0}
  table.pr-tbl.cards-mob td[data-label="Залишок"]{flex:0 0 auto;order:3;border-top:none;padding:0;
    gap:6px;margin-left:auto}
  /* Два різні числа: у рядку локацій — скільки на кожній точці, праворуч — скільки
     всього в мережі. Коли ж обрано конкретну локацію, праворуч уже залишок саме її. */
  table.pr-tbl.cards-mob td[data-label="Залишок"]::before{content:"Всього"}
  table.pr-tbl.pr-loc-on.cards-mob td[data-label="Залишок"]::before{content:"Залишок"}
  /* «Витратка» — та сама картка, лише третя колонка називається «Собівартість» */
  table.pr-tbl.cards-mob td[data-label="Ціна"],
  table.pr-tbl.cards-mob td[data-label="Собівартість"]{flex:1 1 60%;order:4;border-top:none;padding:8px 0 0;
    gap:8px;justify-content:flex-start;text-align:left;min-width:0}
  table.pr-tbl.cards-mob td[data-label=""]{flex:0 0 auto;order:5;border-top:none;padding:8px 0 0;margin-left:auto}
  table.pr-tbl.cards-mob td[data-label="Назва"]::before,
  table.pr-tbl.cards-mob td[data-label="Локації"]::before,
  table.pr-tbl.cards-mob td[data-label="Ціна"]::before{display:none}
  /* у «Витратці» ціни немає, лишається саме собівартість — підпис лишаємо,
     інакше число нічим не пояснене */
  table.pr-tbl.cards-mob td[data-label="Собівартість"]::before{font-size:12px}
  /* собівартість — дрібним сірим одразу за ціною, без відступу зверху */
  table.pr-tbl.cards-mob td[data-label="Ціна"] .pr-sub{margin-top:0}
  /* Салон з однією точкою: колонки «Локації» в таблиці немає (`pr-noloc`), і без неї
     порядок комірок збивався — «Всього» налізало на ціну. Картка стає на два рядки:
     назва, а під нею ціна ліворуч, залишок і кнопки праворуч (Ok, 04.09.2026). */
  table.pr-tbl.pr-noloc.cards-mob td[data-label="Ціна"],
  table.pr-tbl.pr-noloc.cards-mob td[data-label="Собівартість"]{flex:0 1 auto;order:2}
  table.pr-tbl.pr-noloc.cards-mob td[data-label="Залишок"]{order:3;padding:8px 0 0;margin-left:auto}
  /* кнопки — праворуч і в тому ж рядку, і коли переносяться на власний */
  table.pr-tbl.pr-noloc.cards-mob td[data-label=""]{order:4;margin-left:auto}
  /* «Журнал складу» на телефоні (Ok, 01.09.2026). Було по три рядки з підписами:
     «Дата» — число посередині й час праворуч, «Операція» — назва посередині й коментар
     праворуч, «К-сть» окремим рядком; картка виходила ~140px. Стало: операція зверху
     (коментар дрібним під нею), знизу дата з часом ліворуч і кількість праворуч. */
  table.stj-tbl.cards-mob tr{display:flex;flex-wrap:wrap;align-items:center;padding:10px 14px}
  table.stj-tbl.cards-mob td[data-label="Операція"]{display:block;flex:0 0 100%;order:1;
    text-align:left;padding:0 0 4px;border-top:none}
  table.stj-tbl.cards-mob td[data-label="Дата"]{flex:1 1 auto;order:2;border-top:none;padding:0;
    gap:6px;justify-content:flex-start;text-align:left;color:var(--muted);font-size:13px}
  /* дата й час у розмітці розділені <br> (у широкій таблиці час стоїть під датою) —
     на картці вони читаються одним рядком */
  table.stj-tbl.cards-mob td[data-label="Дата"] br{display:none}
  table.stj-tbl.cards-mob td[data-label="К-сть"]{flex:0 0 auto;order:3;border-top:none;padding:0;
    margin-left:auto}
  table.stj-tbl.cards-mob td[data-label="Дата"]::before,
  table.stj-tbl.cards-mob td[data-label="Операція"]::before,
  table.stj-tbl.cards-mob td[data-label="К-сть"]::before{display:none}
  /* «Що замовити» на телефоні (Ok, 01.09.2026): підпис «Позиція» прибираємо, назва з
     пілюлею й брендом стає ліворуч на всю ширину, а галочка вибору — у тому ж рядку
     праворуч (раніше вона висіла окремим рядом зверху). Решта рядків — як були. */
  table.ro-need.cards-mob tr{display:flex;flex-wrap:wrap;align-items:center;padding:4px 14px}
  table.ro-need.cards-mob td{flex:0 0 100%}
  table.ro-need.cards-mob td[data-label="Позиція"]{display:block;flex:1 1 auto;order:1;
    min-width:0;text-align:left;padding:9px 0;border-top:none}
  table.ro-need.cards-mob td[data-label="Позиція"]::before{display:none}
  table.ro-need.cards-mob td[data-label=""]{flex:0 0 auto;order:2;border-top:none;
    padding:0;margin-left:10px}
  table.ro-need.cards-mob td[data-label="На полиці"]{order:3}
  table.ro-need.cards-mob td[data-label="Витрата"]{order:4}
  table.ro-need.cards-mob td[data-label="Вистачить"]{order:5}
  table.ro-need.cards-mob td[data-label="Замовити"]{order:6}
  /* «Інвентаризація» на телефоні (Ok, 01.09.2026). Було сім рядків з підписами, картка
     ~300px. Стало: локація (з видом під нею) і статус зверху, під ними дата з тим, хто
     рахував, далі «Порахували» і «Розбіжність» одним рядком, знизу кнопки. */
  /* Сітка, а не flex-перенос: у flex рядки «злипались» по-різному залежно від довжини
     назви точки (де статус тікав до дати, де «Порахували» лізло в рядок з ім'ям).
     Сітка тримає розкладку однаковою для всіх карток. */
  table.inv-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:6px 10px;align-items:center;padding:10px 14px}
  table.inv-tbl.cards-mob td{padding:0;border-top:none}
  table.inv-tbl.cards-mob td[data-label="Локація"]{display:block;grid-area:1/1;
    min-width:0;text-align:left;font-weight:600}
  table.inv-tbl.cards-mob td[data-label="Локація"] .muted{font-weight:400}
  table.inv-tbl.cards-mob td[data-label="Статус"]{grid-area:1/2;justify-self:end}
  table.inv-tbl.cards-mob td[data-label="Дата"]{grid-area:2/1;justify-content:flex-start;
    text-align:left;color:var(--muted);font-size:13px}
  table.inv-tbl.cards-mob td[data-label="Хто рахував"]{grid-area:2/2;justify-self:end;
    color:var(--muted);font-size:13px}
  table.inv-tbl.cards-mob td[data-label="Порахували"]{grid-area:3/1;justify-content:flex-start;
    gap:8px}
  table.inv-tbl.cards-mob td[data-label="Розбіжність"]{grid-area:3/2;justify-self:end;gap:8px}
  table.inv-tbl.cards-mob td[data-label=""]{grid-area:4/1/auto/-1;justify-self:end;padding-top:4px}
  table.inv-tbl.cards-mob td[data-label="Локація"]::before,
  table.inv-tbl.cards-mob td[data-label="Статус"]::before,
  table.inv-tbl.cards-mob td[data-label="Дата"]::before,
  table.inv-tbl.cards-mob td[data-label="Хто рахував"]::before{display:none}
  /* Один салон: локації немає, тож шапкою картки стає дата (з видом під нею), а решта
     піднімається на ярус вище — без порожніх клітинок (Ok, 04.09.2026) */
  table.inv-tbl.inv-noloc.cards-mob td[data-label="Локація"]{display:none}
  table.inv-tbl.inv-noloc.cards-mob td[data-label="Дата"]{grid-area:1/1;display:block;
    color:var(--ink);font-size:15px;font-weight:600}
  table.inv-tbl.inv-noloc.cards-mob td[data-label="Дата"] .muted{font-weight:400;font-size:12px}
  table.inv-tbl.inv-noloc.cards-mob td[data-label="Порахували"]{grid-area:2/1}
  table.inv-tbl.inv-noloc.cards-mob td[data-label="Розбіжність"]{grid-area:2/2}
  table.inv-tbl.inv-noloc.cards-mob td[data-label="Хто рахував"]{grid-area:3/1;
    justify-self:start;justify-content:flex-start}
  table.inv-tbl.inv-noloc.cards-mob td[data-label=""]{grid-area:3/2;padding-top:0}
  /* «Журнал руху» на телефоні (Ok, 01.09.2026): шість рядків із підписами (~250px)
     згортаємо в сітку — товар і плашка операції зверху, під ними дата й точка,
     знизу коментар і кількість. */
  table.jr-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:6px 10px;align-items:center;padding:10px 14px}
  table.jr-tbl.cards-mob td{padding:0;border-top:none}
  table.jr-tbl.cards-mob td[data-label="Товар"]{display:block;grid-area:1/1;min-width:0;
    text-align:left;font-weight:600}
  table.jr-tbl.cards-mob td[data-label="Товар"] .muted{font-weight:400}
  table.jr-tbl.cards-mob td[data-label="Рух"]{grid-area:1/2;justify-self:end}
  table.jr-tbl.cards-mob td[data-label="Дата"]{grid-area:2/1;justify-content:flex-start;
    text-align:left;color:var(--muted);font-size:13px}
  table.jr-tbl.cards-mob td[data-label="Локація"]{grid-area:2/2;justify-self:end;
    color:var(--muted);font-size:13px}
  table.jr-tbl.cards-mob td[data-label="Коментар"]{grid-area:3/1;justify-content:flex-start;
    text-align:left;color:var(--muted);font-size:13px;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.jr-tbl.cards-mob td[data-label="К-сть"]{grid-area:3/2;justify-self:end}
  table.jr-tbl.cards-mob td::before{display:none}
  /* Один салон: місце точки праворуч від дати займає кількість, а коментар лягає
     на всю ширину — інакше в другому ярусі лишалася б порожнеча (Ok, 04.09.2026) */
  table.jr-tbl.jr-noloc.cards-mob td[data-label="Локація"]{display:none}
  table.jr-tbl.jr-noloc.cards-mob td[data-label="К-сть"]{grid-area:2/2}
  table.jr-tbl.jr-noloc.cards-mob td[data-label="Коментар"]{grid-area:3/1/auto/-1}
  /* Кнопка «Скасувати» в комірці коментаря (аудит 17.09, п.20) вилазила за край картки
     й налазила на кількість: комірка була nowrap+ellipsis, розрахована лише на текст
     (Ok показав 20.09.2026). Тепер це рядок із двох частин — текст стискається
     трикрапкою й, якщо місця мало, кнопка переходить на свій рядок. */
  table.jr-tbl.cards-mob td[data-label="Коментар"]{display:flex;flex-wrap:wrap;
    align-items:center;gap:4px 8px;white-space:normal;overflow:visible}
  table.jr-tbl.cards-mob td[data-label="Коментар"] .jr-cmt{flex:1 1 auto;min-width:60px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.jr-tbl.cards-mob td[data-label="Коментар"] .jr-cancel{flex:0 0 auto}
  /* Стрілки «‹ ›» біля періоду з'їдали ~100px і обрізали саму дату. У журналі їх
     вимикає ще й JS (nav: !isMob()), але той вирішує ОДИН раз при побудові — після
     повороту екрана чи на нетиповій ширині вони лишались. CSS діє завжди.
     Те саме сталось у «Поставках» на вертикальному планшеті (Ok, 21.09.2026) —
     правило поширене на .dl-flt. */
  #stock-flt.jr-flt .dr .dr-shift,#stock-flt.dl-flt .dr .dr-shift{display:none}
  /* «Бренди» на телефоні (Ok, 01.09.2026): три рядки з підписами (~230px) згортаємо
     в картку — назва з «···» зверху, під нею кількість позицій і коментар. */
  table.br-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:4px 10px;align-items:center;padding:10px 14px}
  table.br-tbl.cards-mob td{padding:0;border-top:none}
  table.br-tbl.cards-mob td[data-label="Назва"]{grid-area:1/1;justify-content:flex-start;
    text-align:left;font-weight:600;min-width:0}
  table.br-tbl.cards-mob td[data-label=""]{grid-area:1/2;justify-self:end}
  table.br-tbl.cards-mob td[data-label="Позицій"]{grid-area:2/1/auto/-1;justify-content:flex-start;
    text-align:left;color:var(--muted);font-size:13px;gap:6px}
  table.br-tbl.cards-mob td[data-label="Коментар"]{grid-area:3/1/auto/-1;justify-content:flex-start;
    text-align:left;color:var(--muted);font-size:13px;gap:6px;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.br-tbl.cards-mob td[data-label="Назва"]::before{display:none}
  /* «Візити» на телефоні (Ok, 02.09.2026): пʼять рядків із підписами (216px) згортаємо
     в сітку — номер із датою і статус зверху, під ними клієнт із телефоном і сума,
     знизу касир. */
  table.vis-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
    gap:8px 10px;align-items:start;padding:12px 14px}
  table.vis-tbl.cards-mob td{display:block;padding:0;border-top:none}
  table.vis-tbl.cards-mob td[data-label="Візит"]{grid-area:1/1;text-align:left;min-width:0}
  table.vis-tbl.cards-mob td[data-label="Статус"]{grid-area:1/2;text-align:right}
  table.vis-tbl.cards-mob td[data-label="Клієнт"]{grid-area:2/1;text-align:left;min-width:0}
  table.vis-tbl.cards-mob td[data-label="Сума"]{grid-area:2/2;text-align:right;
    align-self:center;font-size:17px}
  /* ⚠️ id у селекторі обовʼязковий: для широкої таблиці є `#o-box table td:last-child{width:28px}`
     (вузька колонка суми), і за вагою id воно тиснуло суму в картці до 28px */
  #o-box table.vis-tbl.cards-mob td[data-label="Сума"]{width:auto;padding:0}
  table.vis-tbl.cards-mob td[data-label="Касир"]{grid-area:3/1/auto/-1;text-align:left;
    color:var(--muted);font-size:13px}
  table.vis-tbl.cards-mob td[data-label="Візит"]::before,
  table.vis-tbl.cards-mob td[data-label="Статус"]::before,
  table.vis-tbl.cards-mob td[data-label="Клієнт"]::before,
  table.vis-tbl.cards-mob td[data-label="Сума"]::before{display:none}
  /* «Касир» лишається з підписом: сам по собі прочерк чи ім'я нічого не пояснюють.
     Комірка блокова, тож підпис ставимо перед значенням у рядок */
  table.vis-tbl.cards-mob td[data-label="Касир"]::before{margin-right:6px}
  /* Пілюля періоду на телефоні: крок дати тісніший, щоб «Локація» і «Період»
     сходились в один рядок навіть на 360px. Стрілки ‹ › лишаються круглими 40×40 —
     на цих сторінках гортати по днях зручно (Ok, 02.09.2026). */
  #iv-flt > .fpair,#o-flt > .fpair{flex:0 1 auto;min-width:0}
  /* «Рахунки»: тут у рядку лише два фільтри (пошук вертикально живе в заголовку), тож
     тримаємо їх в один рядок примусово — не вистачало буквально 2px, і період
     зістрибував униз. Локація за потреби підтискається (Ok, 02.09.2026) */
  #iv-flt{flex-wrap:nowrap}
  #iv-flt .oz-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  /* ⚠️ ширину стрілок НЕ чіпаємо: у них радіус «на всю висоту», і 30×40 перетворює
     кружечок на овал (Ok помітив 02.09.2026). Місце для локації вивільняємо
     тіснішим кроком дати, а не вужчими стрілками. */
  /* стрілки лишаються КРУГЛИМИ — зменшуємо обидва боки однаково (36×36), а не лише
     ширину: 30×40 давало овал (Ok помітив 02.09.2026) */
  #iv-flt .dr-shift{width:36px;min-width:36px;height:36px;font-size:18px}
  #iv-flt .dr-trigger{padding:0 10px;font-size:13.5px}
  #iv-flt .dr{gap:2px}
  #iv-flt{column-gap:8px}
  /* ⚠️ У `.fpair` лишається текстовий вузол «Локація»/«Період» — на телефоні підпис
     переїхав усередину пілюлі, але місце він досі займав (~9px на кожен фільтр).
     Гасимо його нулем шрифту, дітям повертаємо звичайний (та сама правка, що вже
     зроблена для «Зарплат» і «Товарів») */
  #iv-flt > .fpair{gap:0;font-size:0}
  #iv-flt > .fpair > .oz-select,#iv-flt > .fpair > .dr{font-size:14px}
  /* «Звіт за день» (Ok, 02.09.2026): підпис фільтра — усередину пілюлі (для дати
     він просто зайвий, дата й так зрозуміла); чотири картки по дві в ряд; таблиця кас
     згортається в картку. */
  #dc-flt > .fpair{gap:0;font-size:0}
  /* ⚠️ шрифт треба повернути і полю дати: CRM загортає `input[type=date]` в `.oz-date`,
     і з font-size:0 у нього зникала іконка, а сама дата обрізалась (Ok, 02.09.2026) */
  #dc-flt > .fpair > .oz-select,#dc-flt > .fpair > .oz-date{font-size:14px;margin-left:-1px}
  /* локація підтискається трикрапкою, щоб рядок лишався одним */
  #dc-flt{flex-wrap:nowrap}
  #dc-flt > .fpair:last-child{min-width:0}
  #dc-flt .oz-select,#dc-flt .oz-trigger{min-width:0;max-width:100%}
  #dc-flt .oz-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .dc-cards > .card{flex:1 1 calc(50% - 7px);min-width:0}
  .dc-cards > .card .val{font-size:22px}
  table.dcr-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:6px 10px;align-items:start;padding:12px 14px}
  table.dcr-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.dcr-tbl.cards-mob td[data-label="Каса"]{grid-area:1/1;font-weight:600}
  table.dcr-tbl.cards-mob td[data-label="На кінець дня"]{grid-area:1/2;text-align:right}
  table.dcr-tbl.cards-mob td[data-label="Локація"]{grid-area:2/1/auto/-1;
    color:var(--muted);font-size:13px}
  table.dcr-tbl.cards-mob td[data-label="На початок дня"]{grid-area:3/1;
    color:var(--muted);font-size:13px}
  table.dcr-tbl.cards-mob td[data-label="Рух за день"]{grid-area:3/2;text-align:right;
    color:var(--muted);font-size:13px}
  table.dcr-tbl.cards-mob td[data-label="Каса"]::before,
  table.dcr-tbl.cards-mob td[data-label="Локація"]::before,
  table.dcr-tbl.cards-mob td[data-label="На кінець дня"]::before{display:none}
  table.dcr-tbl.cards-mob td[data-label="На початок дня"]::before,
  table.dcr-tbl.cards-mob td[data-label="Рух за день"]::before{margin-right:6px}
  /* Один салон: рядка з назвою точки немає, тож залишки піднімаються на другий ярус —
     інакше на місці локації лишався б порожній рядок сітки (Ok, 04.09.2026) */
  table.dcr-tbl.dcr-noloc.cards-mob td[data-label="На початок дня"]{grid-area:2/1}
  table.dcr-tbl.dcr-noloc.cards-mob td[data-label="Рух за день"]{grid-area:2/2}
  /* «Клієнти»: лічильник «Всього: N» стоїть у рядку з пілюлями вкладок, а не окремим
     рядком під ними — на телефоні `.pr-toolbar .fin-tabs{width:100%}` виштовхував його
     вниз (Ok, 02.09.2026) */
  /* ⚠️ селектор із двома класами: нижче у файлі є `.pr-toolbar .fin-tabs{width:100%}`
     з такою ж вагою, і за порядком воно перебивало б */
  .pr-toolbar.cl-bar .fin-tabs{width:auto}
  .pr-toolbar.cl-bar .cl-count{margin-left:auto}
  /* «Клієнти» (Ok, 02.09.2026). 1) Пілюлі стояли на 14px правіше за картки — знову
     залишковий текстовий вузол підпису у `.fpair`; гасимо, і фільтри заодно сходяться
     в один рядок навіть на 360px. 2) Картка клієнта: імʼя з телефоном і «···» зверху,
     під ними візити та витрачено, знизу останній візит. Було 222px. */
  #cl-flt > .fpair{gap:0;font-size:0}
  #cl-flt > .fpair > .oz-select{font-size:14px;margin-left:-1px}
  /* Довге значення («понад пів року», повне імʼя майстра) розсовувало пілюлю, і другий
     фільтр падав у наступний рядок. Обидві пілюлі ділять рядок навпіл, а значення
     підтискається трикрапкою (Ok, 02.09.2026) */
  #cl-flt > .fpair{min-width:0}
  #cl-flt > .fpair > .oz-select{flex:1 1 auto;min-width:0;max-width:100%}
  #cl-flt > .fpair .oz-trigger{width:100%;min-width:0;max-width:100%}
  /* 180px — ширина пілюлі зі значенням за замовчуванням («Не був: будь-коли»);
     нижче цього не тиснемо, щоб у звичайному стані нічого не різалось */
  #cl-flt > .fpair:first-child{flex:0 1 auto;min-width:180px}
  #cl-flt > .fpair:nth-child(2){flex:1 1 0;min-width:104px;max-width:max-content}
  /* Коли майстра обрано, підпис «Майстер:» зʼїдав 66 з 174px пілюлі і від імені
     лишалось «Анас…». Прибираємо підпис — імʼя й так очевидне; у стані «усі»
     (.oz-mute) підпис лишається, інакше незрозуміло, що це за фільтр */
  #cl-flt > .fpair:nth-child(2) .oz-trigger:has(.oz-label:not(.oz-mute)) .oz-pre{display:none}
  table.cli-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:6px 10px;align-items:start;padding:12px 14px}
  table.cli-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.cli-tbl.cards-mob td[data-label="Клієнт"]{grid-area:1/1}
  table.cli-tbl.cards-mob td[data-label=""]{grid-area:1/2;text-align:right}
  table.cli-tbl.cards-mob td[data-label="Візити"]{grid-area:2/1;color:var(--muted);font-size:13px}
  table.cli-tbl.cards-mob td[data-label="Витрачено"]{grid-area:2/2;text-align:right;
    align-self:center}
  table.cli-tbl.cards-mob td[data-label="Останній візит"]{grid-area:3/1/auto/-1;
    color:var(--muted);font-size:13px}
  table.cli-tbl.cards-mob td[data-label="Клієнт"]::before,
  table.cli-tbl.cards-mob td[data-label="Витрачено"]::before,
  table.cli-tbl.cards-mob td[data-label=""]::before{display:none}
  /* підпис перед значенням у рядок, а не над ним */
  table.cli-tbl.cards-mob td[data-label="Візити"]::before,
  table.cli-tbl.cards-mob td[data-label="Останній візит"]::before{margin-right:6px}
  /* дата й «N днів тому» — одним рядком */
  table.cli-tbl.cards-mob td[data-label="Останній візит"] > div{display:inline;margin-left:6px}
  #cl-box table.cli-tbl.cards-mob td[data-label="Витрачено"]{width:auto}
  /* «···» тиснемо в правий край картки: десктопне правило `#cl-box table td:last-child`
     дає комірці дій padding-right:10px і відсовувало кнопку від краю (Ok, 02.09.2026) */
  #cl-box table.cli-tbl.cards-mob td[data-label=""]{padding-right:0}
  /* Картка клієнта → «Візити» на телефоні (Ok, 02.09.2026): пʼять рядків із підписами
     (216px) згортаємо в сітку за принципом «Рух коштів → Візити» — дата з часом і
     статус зверху, під ними майстер і сума, знизу послуги. */
  table.cbk-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
    gap:8px 10px;align-items:start;padding:12px 14px;cursor:pointer}
  table.cbk-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.cbk-tbl.cards-mob td[data-label="Дата"]{grid-area:1/1}
  table.cbk-tbl.cards-mob td[data-label="Статус"]{grid-area:1/2;text-align:right}
  table.cbk-tbl.cards-mob td[data-label="Майстер"]{grid-area:2/1}
  table.cbk-tbl.cards-mob td[data-label="Сума"]{grid-area:2/2;text-align:right;
    align-self:center;font-size:17px}
  table.cbk-tbl.cards-mob td[data-label="Послуги"]{grid-area:3/1/auto/-1;
    color:var(--muted);font-size:13px}
  table.cbk-tbl.cards-mob td::before{display:none}
  /* час — дрібним сірим одразу за датою, а не окремим рядком */
  table.cbk-tbl.cards-mob td[data-label="Дата"] > div{display:inline;margin-left:6px}
  /* Картка клієнта → «Оплати»: те саме, лише чотири поля. Дата й сума зверху,
     спосіб оплати та номер візиту дрібним під ними. */
  table.cpay-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
    gap:8px 10px;align-items:start;padding:12px 14px}
  table.cpay-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.cpay-tbl.cards-mob td[data-label="Дата"]{grid-area:1/1}
  table.cpay-tbl.cards-mob td[data-label="Сума"]{grid-area:1/2;text-align:right;font-size:17px}
  table.cpay-tbl.cards-mob td[data-label="Спосіб"]{grid-area:2/1;color:var(--muted);font-size:13px}
  table.cpay-tbl.cards-mob td[data-label="Візит"]{grid-area:2/2;text-align:right;
    color:var(--muted);font-size:13px}
  table.cpay-tbl.cards-mob td::before{display:none}
  /* Налаштування → Локації на телефоні (Ok, 02.09.2026): у рядку картки чотири
     колонки, і назві з адресою лишалось 103px із 362 — «КОД: Київська 104(Глобал)»
     ламалось на три рядки. Години роботи з кріслами не стискались зовсім
     (`white-space:nowrap`), тож відправляємо їх окремим рядком під низ.
     ⚠️ !important: `text-align:right` і `white-space:nowrap` стоять інлайном у розмітці */
  /* Сітка замість flex: теракотова стрілка займає обидва рядки й стоїть по центру
     всієї картки, а не рівняється по першому рядку (Ok, 02.09.2026).
     ⚠️ display:grid з !important — у розмітці інлайновий `display:flex`. */
  [data-loc-id] > [data-head]{display:grid!important;
    grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;
    align-items:center}
  [data-loc-id] > [data-head] > img{grid-row:1;grid-column:1}
  [data-loc-id] > [data-head] > div{grid-row:1;grid-column:2}
  [data-loc-id] > [data-head] > span.muted{grid-row:2;grid-column:1/3;
    text-align:left!important;white-space:normal!important}
  [data-loc-id] > [data-head] > [data-chev]{grid-row:1/3;grid-column:3}
  /* «Пн.-Нд. 10:00-20:00» і «Барбер 4 · Манікюр 1» — одним рядком, а не двома */
  [data-loc-id] > [data-head] > span.muted > div{display:inline;margin-left:8px}
  /* На ТЕЛЕФОНІ перетягування прибрано (Ok, 03.09.2026): ручка з'їдає місце в картці
     й ловить випадкові тапи. Порядок міняється з планшета або компʼютера.
     ⚠️ Це саме телефон (≤743px): на планшеті перетягування пальцем лишається —
     його спеціально робили 30.08.2026 (`touchDrag`) для iPad. */
  /* ⚠️ у «Напрямах» ручка зветься `data-grab`, а не `data-drag` — без неї вона
     лишалась видимою (помітила 03.09.2026 на скріні Ok) */
  [data-drag], [data-grab]{display:none}
  /* Пара полів в один рядок, де підписи різної довжини (Ok, 02.09.2026): «Крок слотів
     (хв)» в один рядок проти «Буфер між записами (хв)» у два — і поле під коротшим
     підписом стрибало вгору. Той самий підхід, що в Налаштування → Загальні: підпис
     і саме поле сусідніх колонок лежать на спільних рядках сітки.
     Клас `fld-pair` вішається в розмітці там, де така пара є (Форми на сайті:
     «Часові обмеження», «Обробка заявки»). */
  /* три рядки: підпис / поле / пояснення. Якщо пояснення немає — третій рядок просто
     порожній, нічого не ламається */
  .fld-pair{display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;align-items:start}
  .fld-pair > .field{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:6px}
  /* «Персонал» (Ok, 02.09.2026). 1) Пілюля «Локація» стояла на 10px правіше за картки
     під нею — залишковий текстовий вузол підпису у `.fpair` (сам текст ми ховаємо,
     але просвіт 8px між ним і пілюлею лишався). 2) Пошук переїжджає в рядок фільтра
     й стає гумовим; довга назва локації підтискається трикрапкою. */
  #st-flt > .fpair{gap:0;font-size:0;flex:0 1 auto;min-width:0}
  #st-flt > .fpair > .oz-select{font-size:14px;margin-left:-2px;min-width:0;max-width:100%}
  /* ⚠️ ширину пілюлі НЕ фіксуємо на 100%: `.oz-select` міряється по вмісту, і від
     `width:100%` вони зациклювались — навіть коротке «усі» різалось на «у…» */
  #st-flt .oz-trigger{min-width:0;max-width:100%}
  #st-flt{flex-wrap:nowrap}
  #st-flt .srch{flex:1 1 0;width:auto!important;min-width:120px;margin-left:auto}
  /* «Персонал»: чотири рядки з підписами (202px) згортаємо в сітку — людина й кнопки
     зверху, посада та схема зарплати дрібним під ними. */
  table.stf-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:8px 10px;align-items:start;padding:12px 14px}
  table.stf-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.stf-tbl.cards-mob td[data-label="Співробітник"]{grid-area:1/1}
  table.stf-tbl.cards-mob td[data-label=""]{grid-area:1/2;text-align:right;padding-right:0}
  table.stf-tbl.cards-mob td[data-label="Посада"]{grid-area:2/1;color:var(--muted);font-size:13px}
  table.stf-tbl.cards-mob td[data-label="Схема зарплати"]{grid-area:2/2;text-align:right;
    color:var(--muted);font-size:13px;align-self:center}
  table.stf-tbl.cards-mob td::before{display:none}
  /* Безпека → «Хто має доступ»: чотири рядки з підписами (182px) згортаємо в сітку —
     людина й роль зверху, пошта та кнопка «Вийти скрізь» під ними (Ok, 03.09.2026) */
  table.secacc-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:8px 10px;align-items:center;padding:12px 14px}
  table.secacc-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.secacc-tbl.cards-mob td[data-label="Співробітник"]{grid-area:1/1;font-weight:600}
  table.secacc-tbl.cards-mob td[data-label="Роль"]{grid-area:1/2;text-align:right;
    color:var(--muted);font-size:13px}
  table.secacc-tbl.cards-mob td[data-label="Пошта для входу"]{grid-area:2/1;
    color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.secacc-tbl.cards-mob td[data-label=""]{grid-area:2/2;text-align:right;padding-right:0}
  table.secacc-tbl.cards-mob td::before{display:none}
  /* Безпека → «Останні входи»: 30 записів по 169px давали 5000px прокрутки.
     Час і подія зверху, пошта та IP дрібним під ними (Ok, 03.09.2026) */
  /* рівно навпіл: інакше довге «IP … · Safari, iPhone» забирало пів картки, дата
     ламалась на два рядки, а пошта стискалась до «oleg@barberko…» */
  table.seclog-tbl.cards-mob tr{display:grid;grid-template-columns:1fr 1fr;
    gap:6px 10px;align-items:center;padding:10px 14px}
  table.seclog-tbl.cards-mob td[data-label="Коли"],
  table.seclog-tbl.cards-mob td[data-label="Подія"]{overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  table.seclog-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.seclog-tbl.cards-mob td[data-label="Коли"]{grid-area:1/1}
  table.seclog-tbl.cards-mob td[data-label="Подія"]{grid-area:1/2;text-align:right}
  table.seclog-tbl.cards-mob td[data-label="Хто"]{grid-area:2/1;color:var(--muted);
    font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.seclog-tbl.cards-mob td[data-label="Звідки"]{grid-area:2/2;text-align:right;
    color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.seclog-tbl.cards-mob td::before{display:none}
  /* Дашборд адміністратора: картка-годинник займала 193px — майже чверть екрана,
     бо цифри бралися як 28% ширини картки (≈95px). Зменшуємо до ~50px: годинник
     лишається помітним, але картка стає ~120px (Ok, 03.09.2026).
     ⚠️ Сам РОЗМІР ЦИФР тут задати не можна: `fitClock()` в app.js виставляє його
     інлайном (підганяє час під ширину картки), а інлайн б'є будь-яке правило.
     Стеля 56px для телефона стоїть саме там. Тут — лише поля й дрібні підписи. */
  .card.dash-clock-card{padding:14px 16px}
  .card.dash-clock-card .sub{font-size:15px;margin:0 0 4px}
  .card.dash-clock-card .dash-clock-left{font-size:13px;margin-top:4px}
  /* «Журнал дій»: три рядки з підписами (150px) згортаємо — час і людина зверху,
     сама дія з подробицями під ними (Ok, 03.09.2026) */
  table.aud-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
    gap:6px 10px;align-items:center;padding:10px 14px}
  table.aud-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.aud-tbl.cards-mob td[data-label="Час"]{grid-area:1/1;white-space:nowrap}
  table.aud-tbl.cards-mob td[data-label="Хто"]{grid-area:1/2;text-align:right;
    color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.aud-tbl.cards-mob td[data-label="Що зробили"]{grid-area:2/1/auto/-1}
  table.aud-tbl.cards-mob td::before{display:none}
  /* Сторінка співробітника → «Зарплата»: чотири рядки з підписами (169px) згортаємо
     в сітку — дата й сума зверху, під ними операція, знизу локація дрібним. */
  table.spsal-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:6px 10px;align-items:start;padding:12px 14px}
  table.spsal-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.spsal-tbl.cards-mob td[data-label="Дата"]{grid-area:1/1}
  table.spsal-tbl.cards-mob td[data-label="Сума"]{grid-area:1/2;text-align:right;font-size:17px}
  table.spsal-tbl.cards-mob td[data-label="Операція"]{grid-area:2/1/auto/-1}
  table.spsal-tbl.cards-mob td[data-label="Локація"]{grid-area:3/1/auto/-1;
    color:var(--muted);font-size:13px}
  table.spsal-tbl.cards-mob td::before{display:none}
  /* Сторінка співробітника → «Прайс»: назва з тривалістю ліворуч, ціна праворуч —
     один рядок замість двох із підписами. */
  table.sppr-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:6px 10px;align-items:center;padding:12px 14px}
  table.sppr-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.sppr-tbl.cards-mob td[data-label="Послуга"]{grid-area:1/1}
  table.sppr-tbl.cards-mob td[data-label="Ціна"]{grid-area:1/2;text-align:right;font-size:17px}
  table.sppr-tbl.cards-mob td::before{display:none}
  /* «Прайс» у режимі редагування: підказка займала пів рядка, «Скасувати» тулилось
     поруч, а «Зберегти зміни» падало вниз окремим рядком. Віддаємо підказці цілий
     рядок — обидві кнопки стають поруч (Ok, 02.09.2026) */
  /* ⚠️ !important обовʼязковий: у розмітці підказка має інлайновий `flex:1;min-width:200px`
     (він потрібен десктопу, щоб кнопки стояли праворуч), а інлайн б'є звичайне правило */
  #pr-hint{flex:1 1 100%!important;min-width:0!important}
  #pr-hint:empty{display:none}   /* у режимі перегляду підказки немає — не тримаємо порожній рядок */
  /* «Зміни»: підпис «Локація» переїхав усередину пілюлі, але текстовий вузол у
     `.fpair` лишається — гасимо його, щоб пілюля стояла по лівому краю (Ok, 02.09.2026) */
  #sh-flt > .fpair{gap:0;font-size:0}
  #sh-flt > .fpair > .oz-select{font-size:14px;margin-left:-2px}   /* 2px, що лишились від текстового вузла */
  /* «Зміни» на телефоні (Ok, 02.09.2026): шість рядків із підписами (249px) складаємо
     в сітку 2×3 — підпис дрібним НАД значенням, як міні-поля. */
  table.shf-tbl.cards-mob tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;
    padding:12px 14px}
  table.shf-tbl.cards-mob td{display:block;padding:0;border-top:none;text-align:left;min-width:0}
  table.shf-tbl.cards-mob td::before{display:block;margin-bottom:2px}
  table.shf-tbl.cards-mob td[data-label="Відкрито"]{grid-area:1/1}
  table.shf-tbl.cards-mob td[data-label="Закрито"]{grid-area:1/2}
  table.shf-tbl.cards-mob td[data-label="Готівка в касі"]{grid-area:2/1}
  table.shf-tbl.cards-mob td[data-label="Різниця"]{grid-area:2/2}
  table.shf-tbl.cards-mob td[data-label="Хто закрив"]{grid-area:3/1}
  table.shf-tbl.cards-mob td[data-label="Причина"]{grid-area:3/2}
  /* «Транзакції» на телефоні (Ok, 02.09.2026): «Готівка» і «Карта» по половині,
     «Разом за період» — на всю ширину під ними. Було три картки по 118px у стовпчик. */
  .tx-cards > .card{flex:1 1 calc(50% - 7px);min-width:0}
  .tx-cards > .card.net{flex:1 1 100%}
  .tx-cards > .card .val{font-size:22px}
  .tx-cards > .card .sub{font-size:12px}
  /* Картка транзакції: операція і сума зверху, під ними час і «×», знизу локація */
  table.tx-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:6px 10px;align-items:start;padding:12px 14px}
  table.tx-tbl.cards-mob td{display:block;padding:0;border-top:none}
  table.tx-tbl.cards-mob td::before{display:none}
  table.tx-tbl.cards-mob td[data-label="Операція"]{grid-area:1/1;text-align:left;min-width:0}
  table.tx-tbl.cards-mob td[data-label="Сума"]{grid-area:1/2;text-align:right}
  table.tx-tbl.cards-mob td[data-label="Час"],
  table.tx-tbl.cards-mob td[data-label="Дата"]{grid-area:2/1;text-align:left;
    color:var(--muted);font-size:13px}
  /* «×» тримаємо в нижньому правому куті картки: він охоплює рядки з часом і
     локацією та притискається донизу (Ok, 02.09.2026) */
  table.tx-tbl.cards-mob td[data-label=""]{grid-area:2/2/4/3;align-self:end;text-align:right}
  table.tx-tbl.cards-mob td[data-label="Локація"]{grid-area:3/1;text-align:left;
    color:var(--muted);font-size:13px;min-width:0}
  /* ⚠️ id: у широкій таблиці остання колонка вузька, це тисло б кнопку в картці */
  #main table.tx-tbl.cards-mob td[data-label="Сума"]{width:auto}
  /* «Рахунки» на телефоні (Ok, 02.09.2026): чотири рядки з підписами (182px) згортаємо
     в сітку — номер рахунку з датою і кнопки зверху, під ними клієнт із телефоном і сума. */
  table.inv-tbl-m.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:8px 10px;align-items:start;padding:12px 14px}
  table.inv-tbl-m.cards-mob td{display:block;padding:0;border-top:none}
  table.inv-tbl-m.cards-mob td::before{display:none}
  table.inv-tbl-m.cards-mob td[data-label="Рахунок"]{grid-area:1/1;text-align:left;min-width:0}
  table.inv-tbl-m.cards-mob td[data-label=""]{grid-area:1/2;text-align:right}
  table.inv-tbl-m.cards-mob td[data-label="Клієнт"]{grid-area:2/1;text-align:left;min-width:0}
  table.inv-tbl-m.cards-mob td[data-label="Сума"]{grid-area:2/2;text-align:right;
    align-self:center;font-size:17px}
  /* ⚠️ id обовʼязковий: `#iv-box table td:last-child` у широкій таблиці має свою ширину */
  #iv-box table.inv-tbl-m.cards-mob td[data-label="Сума"]{width:auto;padding:0}
  /* «Сертифікати» на телефоні (Ok, 01.09.2026): чотири рядки з підписами (176px)
     згортаємо в сітку 2×2 — код зі «видано …» і статус із терміном зверху,
     під ними клієнт із телефоном і номінал. */
  table.tbl-cert.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:8px 10px;align-items:start;padding:12px 14px}
  table.tbl-cert.cards-mob td{display:block;padding:0;border-top:none}
  table.tbl-cert.cards-mob td::before{display:none}
  table.tbl-cert.cards-mob td[data-label="Код"]{grid-area:1/1;text-align:left;min-width:0}
  table.tbl-cert.cards-mob td[data-label="Статус"]{grid-area:1/2;text-align:right}
  table.tbl-cert.cards-mob td[data-label="Клієнт"]{grid-area:2/1;text-align:left;min-width:0}
  table.tbl-cert.cards-mob td[data-label="Номінал"]{grid-area:2/2;text-align:right;
    font-weight:600;font-size:15px;align-self:end}
  /* Порожній клієнт — без прочерку: у картці він висів самотнім рядком (Ok, 10.10.2026) */
  table.tbl-cert.cards-mob .cert-noclient{display:none}
  /* Друга лінія праворуч (термін / коли використали) — дрібна і в один рядок */
  table.tbl-cert.cards-mob td[data-label="Статус"] .cert-sub{white-space:nowrap}
  /* Картка накладної: комірка «Дата» — flex, тому дата й номер ставали в один рядок
     і номер тікав до правого краю. Дозволяємо перенос: дата з часом праворуч,
     номер накладної — під нею, теж праворуч (Ok, 01.09.2026) */
  table.dl-tbl.cards-mob td[data-label="Дата"]{flex-wrap:wrap;justify-content:flex-end;gap:0 14px}
  table.dl-tbl.cards-mob td[data-label="Дата"]::before{flex:1 1 auto}
  table.dl-tbl.cards-mob td[data-label="Дата"] br{display:none}
  table.dl-tbl.cards-mob td[data-label="Дата"] .muted{flex:0 0 100%;text-align:right}
  /* Картка замовлення в роботі: підпис «Постачальник» прибираємо — назва й так
     зрозуміла, а під нею вже стоїть номер замовлення з датою (Ok, 01.09.2026) */
  table.ro-live.cards-mob td[data-label="Постачальник"]{display:block;text-align:left;
    padding-bottom:4px}
  table.ro-live.cards-mob td[data-label="Постачальник"]::before{display:none}
  /* Історія замовлень на телефоні: постачальник зверху, під ним склад замовлення,
     знизу статус і сума */
  /* Було: чотири комірки тиснулись в один рядок по 107px, підписи колонок лізли
     в те саме місце, «1 поз. · 10 шт» ламалось навпіл і наїжджало на локацію.
     Стало: постачальник із номером зверху ліворуч, під ним «скільки · куди»,
     знизу статус ліворуч і сума праворуч (Ok, 01.09.2026). */
  table.ord-hist-tbl.cards-mob tr{display:flex;flex-wrap:wrap;align-items:center;padding:10px 14px}
  table.ord-hist-tbl.cards-mob td[data-label="Постачальник"]{display:block;flex:0 0 100%;order:1;
    text-align:left;padding:0 0 4px;border-top:none}
  table.ord-hist-tbl.cards-mob td[data-label="Що замовляли"]{flex:0 0 auto;order:2;border-top:none;
    padding:0;gap:0;color:var(--muted);font-size:13px;justify-content:flex-start;text-align:left}
  /* крапка-розділювач між «скільки» і «куди» */
  table.ord-hist-tbl.cards-mob td[data-label="Що замовляли"]::after{content:" · ";
    color:var(--faint);white-space:pre}
  table.ord-hist-tbl.cards-mob td[data-label="Куди"]{flex:1 1 auto;order:3;border-top:none;
    padding:0;color:var(--muted);font-size:13px;justify-content:flex-start;text-align:left;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  table.ord-hist-tbl.cards-mob td[data-label="Статус"]{flex:1 1 60%;order:4;border-top:none;
    padding:8px 0 0;justify-content:flex-start;text-align:left}
  table.ord-hist-tbl.cards-mob td[data-label="Сума"]{flex:0 0 auto;order:5;border-top:none;
    padding:8px 0 0;margin-left:auto;text-align:right}
  table.ord-hist-tbl.cards-mob td[data-label="Постачальник"]::before,
  table.ord-hist-tbl.cards-mob td[data-label="Що замовляли"]::before,
  table.ord-hist-tbl.cards-mob td[data-label="Куди"]::before,
  table.ord-hist-tbl.cards-mob td[data-label="Статус"]::before,
  table.ord-hist-tbl.cards-mob td[data-label="Сума"]::before{display:none}
  /* Заявки на сертифікат на телефоні (Ok, 01.09.2026). Комірки на всю ширину були
     flex і розкидали вміст: ім'я опинялось по центру, «для Брат Олексій» — праворуч,
     номер заявки посередині. Сітка 2×2: покупець із телефоном і сума зверху,
     під ними номер із датою та статус. */
  /* стеля 46% на праву колонку: без неї довгий статус («Час передзвонити · дата»)
     забирав пів картки і ім'я покупця ламалось навпіл */
  table.cert-ord-tbl.cards-mob tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
    gap:8px 10px;align-items:center;padding:10px 14px}
  table.cert-ord-tbl.cards-mob td{padding:0;border-top:none}
  table.cert-ord-tbl.cards-mob td[data-label="Покупець"]{grid-area:1/1;min-width:0;
    justify-content:flex-start;text-align:left}
  table.cert-ord-tbl.cards-mob td[data-label="Сума"]{grid-area:1/2;justify-self:end}
  table.cert-ord-tbl.cards-mob td[data-label="Заявка"]{grid-area:2/1;min-width:0;
    justify-content:flex-start;text-align:left}
  table.cert-ord-tbl.cards-mob td[data-label="Статус"]{grid-area:2/2;justify-self:end}
  table.cert-ord-tbl.cards-mob td::before{display:none}

  /* #2 Товари: пошук отримує власний рядок під вкладками, не тиснеться і не зрізається */
  .pr-toolbar{flex-wrap:wrap}
  .pr-toolbar .fin-tabs{width:100%;margin-bottom:0}   /* пошук ближче до вкладок (Ok, 14.07.2026) */
  .pr-toolbar .srch{margin-left:0!important;width:100%!important;margin-bottom:14px}   /* відступ пошуку до таблиці (Ok, 14.07.2026) */
}

/* Замовлення в салоні з ОДНІЄЮ точкою: колонка «Куди» в кожному рядку однакова.
   Ховаємо її разом із крапкою-розділювачем, який стояв перед нею. Колонка лишається
   в розмітці — планшетний вигляд .ro-live розкладений по nth-child (Ok, 04.09.2026). */
.tbl.ro-noloc th:nth-child(3), .tbl.ro-noloc td:nth-child(3){display:none}
/* той самий брейк, що й у двоярусної розкладки «Замовлень у роботі» на планшеті */
@media(min-width:744px) and (min-height:501px) and (max-width:900px){
  table.ro-live.ro-noloc td:nth-child(3){display:none}
  table.ro-live.ro-noloc td:nth-child(2)::after{content:none}
}
@media(max-width:743px),(max-height:500px){
  table.ord-hist-tbl.ro-noloc.cards-mob td[data-label="Куди"]{display:none}
  table.ord-hist-tbl.ro-noloc.cards-mob td[data-label="Що замовляли"]::after{content:none}
}

/* #2 Товари: тулбар (вкладки + пошук) — один ряд на десктопі, пошук притиснутий праворуч */
.pr-toolbar{display:flex;align-items:center;gap:12px}
/* пошук стоїть зліва, під фільтром локації (Ok, 31.07.2026) */
.pr-toolbar .srch{margin-left:0}
/* Вкладки в один ряд із пошуком (Ok, 01.08.2026): власний нижній відступ смужки вкладок
   робив рядок вищим і зсував пошук на 13px нижче — переносимо відступ на сам тулбар. */
.pr-toolbar .fin-tabs{padding-bottom:0;margin-bottom:0}
.pr-toolbar:has(.fin-tabs){margin-bottom:18px}
/* у каталогах між пошуком і таблицею потрібен відступ (Ok, 31.07.2026) */
.pr-toolbar.cat-bar{margin-bottom:18px}
/* #3 Пара «підпис + контрол» у фільтрах не розривається при переносі */
.fpair{display:inline-flex;align-items:center;gap:6px}

/* «Друк» у вікні «Історія рахунку»: праворуч у рядку фільтрів. Розмір був заданий
   прямо в розмітці (height:48px) — виніс сюди, щоб на телефоні зробити кнопку
   меншою, а на десктопі лишити як було (Ok, 01.09.2026) */
.lf-print-btn{margin-left:auto;height:48px}
@media (max-width:743px){
  .lf-print-btn{height:36px;padding:0 14px;font-size:13px}
}

/* Дашборд: підпис періоду праворуч на десктопі */
.dash-toprow .dash-period-lbl{margin-left:auto}
/* Планшет і вузький ноут: повний текст плашки не влазить поруч із датою і рве рядок надвоє.
   Прибираємо те, що дублюється або видно поруч: назву періоду (вона ж у фільтрі вище),
   слова «за період» і суму витрат (є окремою карткою в блоці «Дохід»). (Ok, 26.08.2026) */
/* Дата завжди праворуч у тому ж рядку. Перенос вмикаємо лише там, де повний рядок
   із датою фізично не влазить — це до 980px; від 981 усе стоїть одним рядком, як було.
   Нічого не ховаємо і шрифт не дрібнимо (Ok, 26.08.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:980px){
  /* у розмітці рядок має інлайн flex-wrap:wrap — перебиваємо, інакше плашка
     лишається на всю ширину і дата падає під неї */
  .dash-toprow{flex-wrap:nowrap !important;gap:12px;align-items:center}
  .dash-toprow [data-today-slot]{flex:0 1 auto;min-width:0}
  /* колонка з двох груп: ширина плашки = найдовша група, тож фон обтискає текст
     і праворуч не лишається порожнього поля */
  /* align-items прописаний інлайн у розмітці — без !important рядки лишались
     по центру, а не по лівому краю (Ok, 26.08.2026) */
  .dash-toprow .today-strip{display:inline-flex !important;flex-direction:column;
    align-items:flex-start !important;flex-wrap:nowrap !important;gap:2px !important;
    width:fit-content;max-width:100%}
  .dash-toprow .today-strip .ts-g{flex-wrap:wrap}
  .dash-toprow .today-strip .ts-dot-mid{display:none}
  .dash-toprow .dash-period-lbl{white-space:nowrap;flex:0 0 auto;margin-left:auto}
}
/* Дашборд на телефоні: локація, період, календар і шестерня — одним рядком
   (Ok, 30.08.2026; до цього локація займала окремий рядок). Підпис періоду
   («Місяць · дати») над плашкою «Сьогодні», плашка на всю ширину */
@media(max-width:743px),(max-height:500px){
  #dash-toolbar{width:100%}
  /* видимі пілюлі — кастомні .oz-select (обгортка навколо прихованого <select>).
     Обидва списки ділять вільне місце порівну; базу беремо 0, щоб рядок не
     переносило (inline-стиль на #dash-toolbar тримає flex-wrap:wrap). */
  /* Списки НЕ розтягуються на вільне місце: у горизонтальному положенні телефона
     ширини вистачає, і пілюлі роздувались на пів екрана (Ok, 30.08.2026).
     flex-grow:0 → ширина по вмісту; shrink лишається, тож на 390px вони
     стискаються до доступного. Рядок не переносимо (nowrap), інакше при нестачі
     місця пілюлі стрибали б на другий рядок замість стискання.
     Поля тригера зменшені до 10px — інакше на 390px місця на обидва підписи
     не вистачає. */
  #dash-toolbar{flex-wrap:nowrap !important}
  #dash-toolbar > .oz-select:has(> #dash-loc),
  #dash-toolbar > .oz-select:has(> #dash-period){flex:0 1 auto;min-width:0}
  #dash-toolbar > .oz-select:has(> #dash-loc) .oz-trigger,
  #dash-toolbar > .oz-select:has(> #dash-period) .oz-trigger{width:100%;min-width:0;
    justify-content:space-between;padding:0 10px;gap:4px}
  /* inline-стиль на #dash-toolbar ставить gap:8px — перебиваємо, ці 6px і є
     різниця між «підпис вміщується» і «Свій пері…» */
  #dash-toolbar{gap:6px !important}
  .dash-toprow{flex-direction:column-reverse;align-items:stretch}
  .dash-toprow .dash-period-lbl{margin-left:0;margin-bottom:2px}
  .dash-toprow [data-today-slot]{width:100%}
  /* плашка «Сьогодні» на телефоні — повноширинна картка з м'якими кутами (як інші картки дашборда),
     більший відступ і шрифт (Ok, 13.07.2026). Інлайн-стилі перекриваємо !important */
  .dash-toprow [data-today-slot] > div{width:100%;max-width:none !important;
    border-radius:var(--r-lg) !important;padding:16px 20px !important;font-size:14px !important;
    gap:8px 16px !important}
}

/* Фільтри на телефоні: пункти йдуть підряд одним потоком і переносяться лише тоді,
   коли не влазять (Ok, 30.08.2026) — те саме правило, що вже діє на планшеті.
   До цього кожен фільтр займав окремий рядок на всю ширину; після того, як назва
   переїхала всередину пілюлі, поля стали вузькі й здебільшого сходяться в ряд. */
@media(max-width:743px),(max-height:500px){
  #owner-flt,#rt-flt,#sal-flt,#stock-flt,.mob-stack{
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  #owner-flt .fpair,#rt-flt .fpair,#sal-flt .fpair,#stock-flt .fpair,.mob-stack .fpair{
    display:flex;width:auto;flex:0 1 auto;min-width:0;align-items:center;gap:8px}
  #owner-flt .fpair > .dr,#owner-flt .fpair > .oz-select,#owner-flt .fpair > select,
  #rt-flt .fpair > .dr,#rt-flt .fpair > .oz-select,#rt-flt .fpair > select,
  #sal-flt .fpair > .dr,#sal-flt .fpair > .oz-select,#sal-flt .fpair > select,
  #stock-flt .fpair > .dr,#stock-flt .fpair > .oz-select,#stock-flt .fpair > select,
  .mob-stack .fpair > .dr,.mob-stack .fpair > .oz-select,.mob-stack .fpair > select{
    flex:0 1 auto;min-width:0}
  #owner-flt .fpair .oz-trigger,#owner-flt .fpair .dr-trigger,
  #rt-flt .fpair .oz-trigger,#rt-flt .fpair .dr-trigger,
  #sal-flt .fpair .oz-trigger,#sal-flt .fpair .dr-trigger,
  #stock-flt .fpair .oz-trigger,#stock-flt .fpair .dr-trigger,
  .mob-stack .fpair .oz-trigger,.mob-stack .fpair .dr-trigger{
    width:auto;justify-content:center}
  /* Період тримаємо в межах рядка, але не ріжемо — дата має читатись повністю */
  #owner-flt .fpair .dr-trigger,#rt-flt .fpair .dr-trigger,
  #sal-flt .fpair .dr-trigger,#stock-flt .fpair .dr-trigger,
  .mob-stack .fpair .dr-trigger{max-width:100%}
  /* Стеля для списків — ширина рядка. Прописана з тими самими id, що й правило
     вище: інакше воно (вага id) перебиває стелю з кінця файлу. */
  #owner-flt .fpair .oz-trigger,#rt-flt .fpair .oz-trigger,
  #sal-flt .fpair .oz-trigger,#stock-flt .fpair .oz-trigger{max-width:100%}
  /* Поля всередині пілюлі тиснемо з 20px до 12px: саме ці 8px з кожного боку
     вирішують, чи сходяться два фільтри в один рядок (Ok, 30.08.2026).
     Приклад — «Клієнти»: 209+171 не влазило в 362, з меншими полями влазить.
     30.08.2026 підтиснуто ще до 10px — як у тулбарі дашборда. */
  .filters .oz-trigger,.filters .dr-trigger{padding:0 10px}
  /* Висота полів фільтра — 40px (Ok, 30.08.2026: спершу 48→44, потім спробували 40).
     Це вже нижче за рекомендовані 44px для тач-цілі, тому далі не зменшуємо. */
  .filters .oz-trigger,.filters .dr-trigger{height:40px;min-height:40px}
  /* Випадаючі списки на мобільному: пункти були 14px з полями 14/16 — на телефоні
     список із 5 пунктів займав пів екрана. Тиснемо до 13px і полів 9/12, щоб
     влазило більше пунктів без гортання (Ok, 01.09.2026). Стосується всіх
     сторінок: це загальний віджет списку. */
  .oz-pop{padding:4px}
  .oz-item{padding:9px 12px;font-size:13px}
  .oz-sel-pop{max-height:min(320px,60vh)}
  /* Помісячний перемикач («‹ Грудень 2028 ›») — це не той самий віджет, що
     діапазон дат: у нього власні класи, тому він лишався 48px, поки решта
     фільтра стала 40px (Ok, 30.08.2026). Тепер в одному розмірі з рештою. */
  .filters .sch-nav{gap:6px}
  .filters .sch-nav .sch-ico{width:40px;height:40px;flex:0 0 40px}
  .filters .sch-nav .sch-range{height:40px;padding:0 12px;margin-left:0;font-size:14px}
  .filters .dr-shift{width:40px;height:40px;min-width:40px}
  .filters .btn{height:40px;min-height:40px}
  .filters .btn.ic-btn,.filters .flt-cfg .btn.ic-btn{width:40px;min-width:40px}
  .filters .srch input,.filters .flt-srch input{height:40px}
  /* Стеля ширини — рівно рядок, не фіксовані пікселі (Ok, 30.08.2026):
     «якщо воно вже в другому рядку — можна не скорочувати». Поле, яке стоїть
     саме на рядку, показує назву повністю; трикрапка вмикається лише тоді,
     коли назва не влазить навіть у весь рядок. */
  .filters .oz-trigger{max-width:100%}
  .filters .oz-trigger .oz-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  /* «+ Зміна» — під заголовком (перша в колонці), на всю ширину (Ok, 14.07.2026) */
  #sal-flt > .btn{width:100%;margin-left:0;order:-1;margin-bottom:2px}
  /* Склад/Товари: кнопки під заголовок окремим рядком (Ok, 14.07.2026) */
  #stock-flt .sf-actions{order:-1;width:100%;margin-left:0;display:flex;gap:8px}
  #stock-flt .sf-actions > .btn{flex:1;min-width:0}
  /* Сертифікати: кнопка «Продаж сертифікату» на всю ширину (Ok, 14.07.2026).
     Кнопка переїхала в рядок заголовка (Ok, 19.08.2026) — правило тримаємо для обох місць */
  #cert-flt .btn{width:100%;margin-left:0!important}
  /* Кнопка в рядку заголовка — компактна, поруч із назвою сторінки, як на решті
     розділів. До 01.09.2026 вона тут була на всю ширину й займала окремий ряд */
  .head #cert-sale,.head #reg-add{width:auto;margin-left:auto!important}
  .mob-stack .srch{width:100%!important;margin-left:0!important;flex:1 1 100%}
  .mob-stack .srch input{width:100%}
  /* з кнопками ‹ › на період лишається мало місця — тиснемо відступи й шрифт,
     інакше кінець дати обрізається (Ok, 27.07.2026) */
  .mob-stack .fpair .dr{gap:4px}
  .mob-stack .fpair .dr-trigger{padding:0 10px;font-size:13px}
}

/* Таблиці, з яких прибрали смужку-графік — тягнемо на всю ширину, числа праворуч (Ok, 13.07.2026) */
@media(max-width:743px),(max-height:500px){
  table.tbl-wide{display:table;width:100%;white-space:normal;overflow:visible}
  table.tbl-wide th,table.tbl-wide td{padding:12px 10px}
  table.tbl-wide th:not(:first-child),table.tbl-wide td:not(:first-child){text-align:right}
}

/* Календар: 3-рядковий тулбар на телефоні (Ok, 13.07.2026).
   Десктоп — без змін: локація/лист очікування лишаються в бічній панелі. */
.cal-mob-only{display:none}
@media(max-width:743px),(max-height:500px){
  .cal-mob-only{display:flex}
  .cal-toolbar #cal-set{display:none}  /* десктопна шестерня (рядок 3) — на мобільному в рядку 2 */
  /* рядок 3: Сьогодні + ‹ + дата(по контенту) + › */
  .cal-toolbar{flex-wrap:nowrap;gap:5px}
  /* «Сьогодні» і стрілки — тієї ж висоти, що поле дати (40px), інакше вони стирчали
     на 8px вище й нижче за нього і рядок виглядав розхитаним (Ok, 31.08.2026) */
  .cal-toolbar #c-today{flex:0 0 auto;padding:0 14px;height:40px;min-height:40px;font-size:14px}
  .cal-toolbar > .oz-date{flex:0 0 auto;min-width:0}      /* дата по контенту — без порожнього місця справа */
  .cal-toolbar > .oz-date > *{width:auto;min-width:0;justify-content:center;text-align:center;gap:6px}
  .cal-toolbar .oz-date svg{width:16px;height:16px}       /* іконка календаря — компактна, щоб не зсувати край */
  .cal-toolbar #c-prev,.cal-toolbar #c-next{flex:0 0 auto;width:40px;height:40px;min-height:40px}  /* круглі стрілки, врівень з датою */
  .cal-toolbar #c-prev{margin-left:auto}   /* група ‹ дата › притиснута праворуч → › в один край з дзвоником/шестернею */
  .bell-btn{width:48px;padding:0}                          /* круглий дзвоник */
  /* Локація стоїть у рядку заголовка «Календар», праворуч від назви — окремий рядок
     під заголовком з'їдав ~58px висоти, а на телефоні кожен рядок на рахунку
     (Ok, 31.08.2026). Діє і в горизонтальному положенні (гілка max-height:500px). */
  .cal-locrow2{display:flex;gap:8px;align-items:center;margin:0;flex:1 1 auto;min-width:0}
  /* обгортка десктопних кнопок на телефоні порожня — прибираємо, щоб не давала зайвий проміжок
     (display:flex стоїть інлайном у розмітці, тому тут потрібен !important) */
  .head:has(> .cal-locrow2) > div:not(.cal-locrow2){display:none!important}
  /* висота як у «Сьогодні» й полі дати — 40px (Ok, 31.08.2026) */
  .cal-locrow2 .oz-trigger{width:100%;justify-content:space-between;padding:0 14px;gap:4px;height:40px}
  /* довга назва («КОД: Київська 104(Глобал)») ріжеться трикрапкою, а не розпирає рядок */
  .cal-locrow2 .oz-trigger .oz-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  /* Кнопки Продаж/Запис/Сповіщення зверху ховаємо — вони переїхали в нижню панель */
  .cal-desk-only{display:none}
  /* Дашборд адміністратора: локація і кнопки «+ Продаж» / «+ Запис» переїхали в нижню
     плашку, у шапці вони лишаються тільки для десктопа (Ok, 03.09.2026) */
  .dash-head-acts{display:none}
  /* ── Нижня чорна панель дій (Ok, 14.07.2026) ── */
  /* bottom 14→6px: Ok просив опустити плашку ближче до краю і у вертикальному теж (01.09.2026) */
  /* left/right 8px і той самий радіус — щоб плашка була рівно по ширині верхнього меню
     (.topbar теж left:8px right:8px), Ok 01.09.2026 */
  .cal-botbar{position:fixed;left:8px;right:8px;bottom:calc(6px + env(safe-area-inset-bottom));z-index:55;background:var(--canvas-dark);
    display:flex;align-items:stretch;gap:2px;padding:8px 4px;border-radius:var(--r-lg);
    /* тінь ВГОРУ, а не вниз: плашка стоїть біля самого низу екрана, і стара
       `0 10px 30px` йшла за межі — її просто не було видно. Тепер вміст видно,
       що він проходить під плашкою, як і під верхнім меню (Ok, 03.09.2026) */
    box-shadow:0 -6px 18px rgba(0,0,0,.18)}
  html[data-theme="dark"] .cal-botbar{box-shadow:0 -8px 24px rgba(0,0,0,.5)}
  .cal-botbtn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
    background:transparent;border:none;color:var(--on-dark);padding:2px 1px;cursor:pointer;font-family:inherit}
  .cal-boti{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.12);position:relative;flex:0 0 auto;transition:background .12s ease}
  .cal-botbtn:active .cal-boti{background:rgba(255,255,255,0.22)}
  .cal-botbtn svg{width:21px;height:21px}
  .cal-botlbl{font-size:10.5px;line-height:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:rgba(255,255,255,0.55)}
  /* Шість кнопок у плашці (календар після переїзду локації) — на 390px «Сповіщення»
     вже не влазило й обрізалось трьома крапками. Дрібніший підпис лише для таких
     плашок, у коротших усе лишається як було (Ok, 04.09.2026). */
  .cal-botbar:has(.cal-botbtn:nth-child(6)) .cal-botlbl{font-size:9.5px}
  .cal-bot-badge{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;font-size:10px}
  /* Крапка на іконці «Зміна»: зміну не відкрито — видно без відкривання вікна (Ok, 03.09.2026) */
  .cal-bot-dot{position:absolute;top:0;right:0;width:9px;height:9px;border-radius:50%;
    background:var(--link);border:2px solid var(--canvas-dark);box-sizing:content-box}
  /* Кнопка «Зміна» відкрита → іконка стає хрестиком, підпис «Скасувати» (як Продаж/Запис) */
  body:has(.cal-sheet[data-opener="db-shift"]) #db-shift .cal-boti > svg:not(.cal-boti-x),
  body:has(.cal-sheet[data-opener="db-shift"]) #db-shift .cal-bot-dot{display:none}
  body:has(.cal-sheet[data-opener="db-shift"]) #db-shift .cal-boti-x{display:block}
  body:has(.cal-sheet[data-opener="db-shift"]) #db-shift .cal-botlbl{font-size:0}
  body:has(.cal-sheet[data-opener="db-shift"]) #db-shift .cal-botlbl::after{content:"Скасувати";font-size:10.5px}
  .cal-botbar-spacer{height:calc(96px + env(safe-area-inset-bottom))}
  /* Графіки змін: контроли переїхали в нижню плашку → ховаємо оригінали на мобільному (Ok, 15.07.2026) */
  .oz-select:has(.sch-loc), .oz-select:has(.sch-span), .sch-ai-head, .sch-coverbar,
  .sch-tabs{display:none!important}
  /* режим (Майстри/Адміністратори/графіки) — випадаючим списком (керується у блоці нижче) */
  .oz-select:has(.sch-mode-sel){display:block!important}
  .sch-modewrap{display:block!important}   /* дубль без :has — Safari старіших версій його не розуміє (Ok, 01.09.2026) */
  /* попап локації — біла заливка */
  #sch-loc-pop{position:fixed;left:14px;right:14px;z-index:60;background:#fff;border:none;border-radius:12px;
    padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 14px 34px rgba(0,0,0,0.18);max-height:60vh;overflow-y:auto}
  #sch-loc-pop button{background:transparent;border:none;color:var(--ink);text-align:left;
    padding:12px 14px;border-radius:8px;font-size:14px;cursor:pointer}
  #sch-loc-pop button.on{background:var(--canvas-dark);color:#fff;font-weight:600}
  /* ШІ у вікні: кнопку «Скасувати» не показуємо (вона є на кнопці плашки) */
  .modal-bg.cal-sheet #ai-x{display:none!important}
  /* іконка-бот у крузі по центру (глобальний .mi має margin-right) + трохи більша, як інші */
  .cal-boti .mi{margin:0}
  #sb-ai .cal-boti > svg:not(.cal-boti-x){width:25px;height:25px}
  /* активна кнопка плашки графіків: біле коло (як на календарі) */
  body:has(.cal-sheet[data-opener="sb-ai"]) #sb-ai .cal-boti,
  body:has(.cal-sheet[data-opener="sb-cover"]) #sb-cover .cal-boti,
  body:has(.cal-sheet[data-opener="sb-newduty"]) #sb-newduty .cal-boti,
  body:has(#sch-loc-pop) #sb-loc .cal-boti{background:#fff}
  body:has(.cal-sheet[data-opener="sb-ai"]) #sb-ai svg,
  body:has(.cal-sheet[data-opener="sb-cover"]) #sb-cover svg,
  body:has(.cal-sheet[data-opener="sb-newduty"]) #sb-newduty svg,
  body:has(#sch-loc-pop) #sb-loc svg{color:#191c1f}   /* біле коло завжди → іконка фіксовано темна (не var, щоб не світлішала в темній) */
  body:has(.cal-sheet[data-opener="sb-ai"]) #sb-ai .cal-botlbl,
  body:has(.cal-sheet[data-opener="sb-cover"]) #sb-cover .cal-botlbl,
  body:has(.cal-sheet[data-opener="sb-newduty"]) #sb-newduty .cal-botlbl,
  body:has(#sch-loc-pop) #sb-loc .cal-botlbl{color:#fff}
  /* аркуш-кнопки при активності: іконка → хрестик, підпис → «Скасувати» */
  body:has(.cal-sheet[data-opener="sb-ai"]) #sb-ai .cal-boti > svg:not(.cal-boti-x),
  body:has(.cal-sheet[data-opener="sb-cover"]) #sb-cover .cal-boti > svg:not(.cal-boti-x),
  body:has(.cal-sheet[data-opener="sb-newduty"]) #sb-newduty .cal-boti > svg:not(.cal-boti-x){display:none}
  body:has(.cal-sheet[data-opener="sb-ai"]) #sb-ai .cal-boti-x,
  body:has(.cal-sheet[data-opener="sb-cover"]) #sb-cover .cal-boti-x,
  body:has(.cal-sheet[data-opener="sb-newduty"]) #sb-newduty .cal-boti-x{display:block}
  body:has(.cal-sheet[data-opener="sb-ai"]) #sb-ai .cal-botlbl,
  body:has(.cal-sheet[data-opener="sb-cover"]) #sb-cover .cal-botlbl,
  body:has(.cal-sheet[data-opener="sb-newduty"]) #sb-newduty .cal-botlbl{font-size:0}
  body:has(.cal-sheet[data-opener="sb-ai"]) #sb-ai .cal-botlbl::after,
  body:has(.cal-sheet[data-opener="sb-cover"]) #sb-cover .cal-botlbl::after,
  body:has(.cal-sheet[data-opener="sb-newduty"]) #sb-newduty .cal-botlbl::after{content:"Скасувати";font-size:10.5px}
  /* Вікна з нижньої панелі (Продаж/Запис/Черга) — аркушем знизу, над плашкою (Ok, 14.07.2026) */
  .modal-bg.cal-sheet{align-items:flex-end}
  .modal-bg.cal-sheet .modal{width:calc(100vw - 28px)!important;max-width:none!important;
    margin:0 auto calc(95px + env(safe-area-inset-bottom))!important;max-height:calc(100dvh - 171px)!important;
    border-radius:14px!important;animation:calSheetUp .26s cubic-bezier(.2,.85,.25,1)}
  /* Задача 5: центрові вікна на календарі (Бронювання, Перенос тощо) не залазять під плашку — лишаємо місце знизу */
  body:has(.cal-botbar) .modal-bg:not(.cal-sheet){padding-bottom:calc(95px + env(safe-area-inset-bottom))}
  body:has(.cal-botbar) .modal-bg:not(.cal-sheet) .modal{max-height:calc(100dvh - 181px)}
  /* Задача 7: у міні-календарі сьогодні/вибране — рівне коло по центру (комірка 30×40) */
  .oz-dt-day.today, .oz-dt-day.on{background:transparent!important;box-shadow:none!important;position:relative;isolation:isolate}
  .oz-dt-day.today::before, .oz-dt-day.on::before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);border-radius:50%;z-index:-1}
  .oz-dt-day.today::before{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .oz-dt-day.on::before{background:var(--canvas-dark)}
  /* Задача 1: усі модалки — відступ 10px від верхньої плашки (8px відступ + 56px висота) */
  .modal-bg{padding-top:74px;box-sizing:border-box}
  .modal-bg .modal{max-height:calc(100dvh - 94px)}
  /* Задача 5: бічна панель на мобільному прибрана; пункт «Бічна панель» в Опціях ховаємо */
  #cal-side{display:none!important}
  .cal-set .chk.cal-desk-only{display:none!important}
  /* Задача 2: активна кнопка нижньої панелі (її аркуш/попап відкритий) — білий круг, чорна іконка, білий підпис */
  body:has(.cal-sheet[data-opener="cb-sale"]) #cb-sale .cal-boti,
  body:has(.cal-sheet[data-opener="cb-add"]) #cb-add .cal-boti,
  body:has(.cal-sheet[data-opener="cb-wl"]) #cb-wl .cal-boti,
  body:has(#bell-pop) #cb-bell .cal-boti,
  body:has(#cal-set-pop) #cb-set .cal-boti{background:#fff}
  body:has(.cal-sheet[data-opener="cb-sale"]) #cb-sale svg,
  body:has(.cal-sheet[data-opener="cb-add"]) #cb-add svg,
  body:has(.cal-sheet[data-opener="cb-wl"]) #cb-wl svg,
  body:has(#bell-pop) #cb-bell svg,
  body:has(#cal-set-pop) #cb-set svg{color:#191c1f}   /* біле коло завжди → іконка фіксовано темна */
  body:has(.cal-sheet[data-opener="cb-sale"]) #cb-sale .cal-botlbl,
  body:has(.cal-sheet[data-opener="cb-add"]) #cb-add .cal-botlbl,
  body:has(.cal-sheet[data-opener="cb-wl"]) #cb-wl .cal-botlbl,
  body:has(#bell-pop) #cb-bell .cal-botlbl,
  body:has(#cal-set-pop) #cb-set .cal-botlbl{color:#fff}
  /* Активна кнопка-аркуш (Продаж/Запис/Черга): іконка → хрестик, підпис → «Скасувати» */
  .cal-boti-x{display:none}
  body:has(.cal-sheet[data-opener="cb-sale"]) #cb-sale .cal-boti > svg:not(.cal-boti-x),
  body:has(.cal-sheet[data-opener="cb-add"]) #cb-add .cal-boti > svg:not(.cal-boti-x),
  body:has(.cal-sheet[data-opener="cb-wl"]) #cb-wl .cal-boti > svg:not(.cal-boti-x){display:none}
  body:has(.cal-sheet[data-opener="cb-sale"]) #cb-sale .cal-boti-x,
  body:has(.cal-sheet[data-opener="cb-add"]) #cb-add .cal-boti-x,
  body:has(.cal-sheet[data-opener="cb-wl"]) #cb-wl .cal-boti-x{display:block}
  body:has(.cal-sheet[data-opener="cb-sale"]) #cb-sale .cal-botlbl,
  body:has(.cal-sheet[data-opener="cb-add"]) #cb-add .cal-botlbl,
  body:has(.cal-sheet[data-opener="cb-wl"]) #cb-wl .cal-botlbl{font-size:0}
  body:has(.cal-sheet[data-opener="cb-sale"]) #cb-sale .cal-botlbl::after,
  body:has(.cal-sheet[data-opener="cb-add"]) #cb-add .cal-botlbl::after,
  body:has(.cal-sheet[data-opener="cb-wl"]) #cb-wl .cal-botlbl::after{content:"Скасувати";font-size:10.5px}
}

/* ==================== SCHEDULES (графіки змін) ==================== */
:root{ --sch:var(--canvas-dark); --sch-d:var(--body); --sch-free:var(--surface-soft); }
.sch-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
/* Єдиний розмір контролів у тулбарі графіків: 48px — як у випадаючого списку */
.sch-bar .btn.sm{height:48px;padding:0 18px;font-size:14px}
.sch-bar .fin-tab{height:40px;padding:0 16px}
.btn.sch-ai{background:#C25238;border-color:#C25238;color:#ffffff}
.btn.sm.sch-ai{height:40px;padding:0 16px;font-size:14px}
@media (hover:hover){.btn.sch-ai:hover{background:#a94530;border-color:#a94530}}
/* Головна дія розділу — велика кнопка в рядку заголовка (Ok, 20.08.2026) */
.head .btn.sch-ai-head{height:52px;padding:0 26px;font-size:15px;font-weight:600}
.head .btn.sch-ai-head svg{width:20px;height:20px}
/* mode-select (мобільний перемикач режиму) — на десктопі ховаємо, там вкладки */
.oz-select:has(.sch-mode-sel){display:none}
.sch-modewrap{display:none}   /* дубль без :has, див. коментар у мобільному блоці */
/* стрілки ‹ › — як на сторінці Календар (btn ghost 48×48), період — пілюля з обводкою як селект */
.sch-bar .sch-ico,.sch-mnav .sch-ico,.sch-nav .sch-ico{width:48px;height:48px;border:1px solid var(--hairline-strong);
  border-radius:var(--r-full);background:var(--canvas-light);font-size:20px;line-height:1}
@media (hover:hover){.sch-bar .sch-ico:hover,.sch-mnav .sch-ico:hover,.sch-nav .sch-ico:hover{background:var(--surface-soft)}}
.sch-bar .sch-range,.sch-mnav .sch-range,.sch-nav .sch-range{display:inline-flex;align-items:center;height:48px;padding:0 20px;margin:0;
  border:1px solid var(--hairline-strong);border-radius:var(--r-full);
  background:var(--canvas-light);font-weight:600;font-size:14px;white-space:nowrap;
  transition:background .12s ease}
@media (hover:hover){.sch-bar .sch-range:hover,.sch-mnav .sch-range:hover,.sch-nav .sch-range:hover{background:var(--surface-soft)}}
.sch-loc{height:48px;min-width:180px;padding:0 18px}
.sch-span{height:48px;min-width:130px;padding:0 18px}
.sch-nav{display:flex;align-items:center;gap:8px;position:relative}
.sch-range{font-weight:600;margin-left:6px}
/* Графіки змін — тулбар на телефоні: локація і період на всю ширину, «Тиждень» тягнеться поряд з іконкою (Ok, 13.07.2026) */
@media(max-width:743px),(max-height:500px){
  .sch-bar{gap:8px}
  .sch-bar > .oz-select:has(> .sch-loc){width:100%}
  .sch-bar > .oz-select:has(> .sch-loc) .oz-trigger{width:100%;justify-content:space-between}
  /* Режим і період — в ОДНОМУ рядку (Ok, 01.09.2026). Раніше «Майстри» займав власний
     рядок на всю ширину. Тепер випадашка стискається до вмісту, а група дат забирає
     решту; довга назва свого графіка ріжеться трикрапкою, а не розпирає рядок. */
  .sch-bar{flex-wrap:nowrap}
  .sch-bar > .sch-modewrap{flex:0 0 auto;max-width:96px;min-width:0}
  .sch-bar > .sch-modewrap .oz-trigger{width:100%;justify-content:space-between;
    height:40px;padding:0 10px;gap:2px}
  .sch-bar > .sch-modewrap .oz-label{overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;min-width:0}
  .sch-bar > .sch-modewrap .oz-chev{flex:0 0 auto}
  /* перемикання дат — розтягнуте: період тягнеться між стрілками, іконка вибору поруч */
  /* фільтр і група дат — це два різні блоки, тому між ними подвійний відступ (16px),
     а всередині групи дат лишається 6px. Інакше все зливалось в один ланцюг (Ok, 01.09.2026) */
  /* margin-left:auto — увесь вільний залишок рядка іде в один відступ між фільтром
     і групою дат. Так він виходить ~45px замість 22 і його справді видно (Ok, 01.09.2026) */
  .sch-bar > .sch-nav{flex:0 0 auto;gap:6px;min-width:0;margin-left:auto}
  /* «Множинний вибір» тепер у нижній плашці — у рядку його немає, і весь звільнений
     простір іде у відступ між фільтром і датами (~70px). Саме його Ok і не бачив,
     поки кнопка стояла тут (Ok, 01.09.2026). */
  .sch-bar .sch-multi{display:none}
  .sch-bar .sch-nav .sch-ico{width:40px;height:40px;flex:0 0 40px}
  .sch-bar .sch-nav .sch-range{flex:0 0 auto;min-width:0;justify-content:center;padding:0 8px;height:40px;margin-left:0;
    font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex}
  .sch-bar .sch-multi{width:40px;height:40px;flex:0 0 40px;margin-left:0 !important}  /* прибрати інлайн margin-left:auto */
}
/* ===== Зарплати на вертикальному планшеті (Ok, 27.08.2026) =====
   Журнал: чотири фільтри лягали двома рваними рядками різної довжини — рівна сітка 2×2.
   Плюс частки колонок, щоб імена й опис не переносились у два-три рядки. */
@media(min-width:744px) and (min-height:501px) and (max-width:900px){
  /* Жодне вікно на вертикальному планшеті не ширше за робочу область сторінки —
     інакше воно «розпирає» екран і накриває бічне меню (Ok, 27.08.2026).
     max-width б'є інлайновий width, тому в JS нічого міняти не треба. */
  .modal{max-width:min(660px,88vw)}
  /* «Історія рахунку» (Ok, 27.08.2026): поля йдуть підряд і переносяться самі. Локація росте під
     назву — поки вона коротка, Тип лишається в першому рядку; стане довшою — Тип поїде вниз. */
  #lf-flt{align-items:center;row-gap:10px}
  #lf-flt > .fpair{display:flex;align-items:center;min-width:0;max-width:100%}
  #lf-flt .fpair > *:last-child{flex:0 1 auto;min-width:0}
  #lf-flt .fpair .oz-select{flex:0 1 auto;min-width:0}
  #lf-flt .fpair .oz-trigger{width:auto;max-width:100%;min-width:110px;justify-content:space-between}
  #lf-flt .fpair:has(#lf-type) .oz-trigger{max-width:200px}
  /* «Журнал зарплат» (Ok, 27.08.2026): поля стоять підряд і переносяться на другий рядок, коли
     не влазять — тож між ними ніде не лишається дірки. Ширина списків фіксована: локація і
     співробітник по 187px, тип вужчий (160px — рівно на «Нарахування»). */
  #sj-flt{align-items:center;row-gap:10px}
  #sj-flt > .fpair{display:flex;align-items:center;min-width:0;max-width:100%}
  /* Ширини — це МІНІМУМ, а не стеля: порожнє поле виглядає як 187 (тип 160), а під довгу назву
     воно росте до самого краю екрана і лише там ріжеться трикрапкою (Ok, 27.08.2026) */
  #sj-flt .fpair .oz-select{flex:0 1 auto;min-width:187px}
  #sj-flt .fpair .oz-trigger{width:auto;min-width:187px;max-width:100%;justify-content:space-between}
  #sj-flt .fpair:has(#sj-type) .oz-select{min-width:160px}
  #sj-flt .fpair:has(#sj-type) .oz-trigger{width:auto;min-width:160px}
  /* «Друк» — вужчий; margin-left:auto з розмітки притискає його до правого краю свого рядка */
  #lf-flt #lf-print{width:auto;min-width:120px}
  .salj-tbl{table-layout:fixed}
  .salj-tbl th:nth-child(1),.salj-tbl td:nth-child(1){width:33%}
  .salj-tbl th:nth-child(2),.salj-tbl td:nth-child(2){width:13%}
  .salj-tbl th:nth-child(3),.salj-tbl td:nth-child(3){width:36%}
  .salj-tbl th:nth-child(4),.salj-tbl td:nth-child(4){width:18%}
}
/* Планшет ГОРИЗОНТАЛЬНО, «Журнал зарплат» — усі чотири пункти в ОДНОМУ рядку (Ok, 27.08.2026).
   Механіка: рядку заборонено переносити (`nowrap`), а поля вміють стискатись. Тому поки місце є —
   значення показані повністю, і трикрапка вмикається лише коли справді забракло ширини.
   Ширини нижче — це мінімум, до якого поле може стиснутись, а не фіксована ширина. */
@media(min-width:901px) and (min-height:501px) and (max-width:1400px){
  /* !important — у розмітці цього рядка стоїть інлайновий flex-wrap:wrap */
  #sj-flt{flex-wrap:nowrap !important}
  /* Самі пари НЕ стискаються. Інакше стискався й підпис («Період», «Локація»): він не вміє
     ставати вужчим за своє слово, тож просто наїжджав на сусіднє поле — Ok спіймав це
     на iPad mini горизонтально (27.08.2026). Стискається лише сам список, через max-width. */
  #sj-flt > .fpair{flex:0 0 auto;min-width:0}
  #sj-flt .fpair .oz-select{flex:0 1 auto;min-width:0}
  /* Стеля = чесна частка вільного місця рядка. 596px — це все незмінне: період, підписи, відступи.
     Решта ділиться між трьома списками (36% / 36% / 28%), тож сума ніколи не перевищує рядок,
     а на ширшому екрані поля самі стають більшими. */
  #sj-flt .fpair .oz-trigger{width:auto;min-width:140px;max-width:calc((100vw - 596px) * 0.36)}
  #sj-flt .fpair:has(#sj-type) .oz-trigger{min-width:120px;max-width:calc((100vw - 596px) * 0.28)}
}
/* Планшет (761–900px): тулбар графіків має лишатись в ОДНОМУ рядку. Назви локацій уже
   скорочені без назви мережі (JS, locShort), тут — менші відступи, а якщо назва все одно
   довга, вона ховається за «…» замість переносу іконки на другий рядок. Ok, 27.08.2026 */
@media(min-width:744px) and (min-height:501px) and (max-width:900px){
  /* Місця в рядку обмаль, тому всі контроли тут трохи менші — але однаково: висота 44,
     бокові відступи 14. Раніше відступи були різні (12/10/6) і підпис періоду виглядав
     втиснутим у кружечок (Ok, 27.08.2026).
     Стелі ширини обовʼязкові: flex-контейнер із переносом НЕ стискає елементи, а зриває
     останній (іконку множинного вибору) на другий рядок. */
  .sch-bar{gap:6px}
  .sch-bar .sch-ico,.sch-bar .sch-nav .sch-ico{width:44px;height:44px}
  .sch-bar .oz-trigger{height:44px}
  .sch-bar .sch-nav .sch-range{height:44px}
  /* Стеля саме на кнопці, а не на обгортці: обгортка сама розтягується по вмісту,
     і max-width:100% на кнопці рахувався від уже урізаної ширини — назва різалась
     навіть тоді, коли в рядку лишалось вільне місце. */
  .sch-bar > .oz-select:has(> .sch-loc){min-width:0;flex:0 1 auto}
  .sch-bar > .oz-select:has(> .sch-loc) .oz-trigger{min-width:0;max-width:calc(100vw - 566px);padding:0 14px}
  /* Розріджені літери коштують ~5px на довгій назві — саме їх бракувало «Київська 104(Глобал)».
     Прибираємо тільки тут: назва влазить повністю, а різниці на око немає. */
  .sch-bar > .oz-select:has(> .sch-loc) .oz-label{min-width:0;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sch-bar > .oz-select:has(> .sch-span) .oz-trigger{padding:0 14px}
  .sch-bar > .sch-nav{flex:0 1 auto;min-width:0;gap:6px;max-width:240px}
  .sch-bar .sch-nav .sch-range{padding:0 14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.sch-ico{width:40px;height:40px;border:1px solid var(--hairline-light);background:var(--canvas-light);
  border-radius:var(--r-full);font-size:16px;line-height:1.0;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
@media (hover:hover){.sch-ico:hover{background:var(--surface-soft)}}
.sch-ico.light{border:none;background:transparent;color:var(--on-dark);width:32px;height:32px}
.sch-multi.on{background:var(--canvas-dark);color:var(--on-dark);border-color:var(--canvas-dark)}
@media (hover:hover){.sch-bar .sch-ico.sch-multi.on:hover,.sch-mnav .sch-ico.sch-multi.on:hover{background:var(--charcoal);border-color:var(--charcoal)}}
.sch-spin{padding:32px;text-align:center;color:var(--stone)}

.sch-grid-wrap{overflow-x:auto}
.sch-grid{display:grid;grid-template-columns:160px repeat(7,minmax(72px,1fr));gap:6px;
  align-items:stretch;width:max-content;min-width:100%;box-sizing:border-box;
  background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:16px}
.sch-head{grid-column:2 / span 7;display:grid;grid-template-columns:repeat(7,minmax(72px,1fr));gap:6px}
.sch-hcell{text-align:center}
.sch-hcell .dn{display:block;font-size:13px;text-transform:none;letter-spacing:0;color:var(--stone);font-weight:600}
.sch-hcell .dd{display:block;font-size:14px;font-weight:500;color:var(--ink)}
/* Орієнтир у шапці: сьогодні — кружечком (Ok, 03.08.2026) */
.sch-hcell.today .dd{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border-radius:50%;background:#C25238;color:#ffffff}
.sch-cell.today{box-shadow:inset 0 0 0 1px rgba(194,82,56,0.45)}
/* Шапка з датами лишається на місці при прокрутці сітки вниз (Ok, 03.08.2026).
   Картку малює обгортка, бо саме вона тепер прокручується всередині. */
.sch-grid .sch-head{position:sticky;top:0;z-index:4;background:var(--surface-card);
  padding-bottom:6px;margin-bottom:-6px}
.sch-grid .sch-corner{top:0;z-index:5}
@media(min-width:744px) and (min-height:501px){
  /* dvh — реальна видима висота вікна: у Safari 100vh рахується так, ніби панелі
     браузера сховані, і низ сітки з її смугою прокрутки ховався під панеллю
     (Ok, 30.08.2026). */
  .sch-grid-wrap{max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px);overflow:auto;background:var(--surface-card);
    border:1px solid var(--hairline-light);border-radius:var(--r-lg)}
  .sch-grid-wrap > .sch-grid{background:transparent;border:none;border-radius:0}
}
/* Планшет: внутрішньої вертикальної прокрутки немає — гортається вся сторінка
   (Ok, 30.08.2026). Горизонтальна лишається, вона потрібна для місячного вигляду.
   Плата: шапка з днями більше не «прилипає» — вона їде разом зі сторінкою.
   На компʼютері поведінка не змінена. */
@media (min-width:744px) and (min-height:501px) and (max-width:1280px){
  .sch-grid-wrap{max-height:none}
}
/* Підзаголовок групи напряму в графіку змін: «Барбери» / «Манікюр» (Ok, 25.07.2026).
   Текст sticky зліва — лишається видимим при горизонтальному скролі місячної сітки. */
.sch-gh{grid-column:1 / -1;display:flex;padding:14px 4px 2px;margin-top:6px;border-top:1px solid var(--hairline-light)}
.sch-head + .sch-gh{margin-top:0;padding-top:2px;border-top:none}
.sch-gh span{position:sticky;left:0;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--stone)}
/* лічильник у підзаголовку групи — рівний кружечок (Ok, 03.08.2026) */
.sch-gh em{font-style:normal;font-size:11px;letter-spacing:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  border:1px solid var(--hairline-light);border-radius:50%;background:var(--canvas-light)}
/* min-height фіксує висоту рядка: при стисненні колонки (скрол вправо) фото меншає
   і години ховаються — без цього вся сітка «просідала» по висоті (Ok, 03.08.2026) */
.sch-emp{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 4px;min-width:0;min-height:48px}
@media (hover:hover){.sch-emp:hover{background:var(--surface-soft)}}
/* колонка працівників «прилипає» зліва при горизонтальній прокрутці (місячний режим) */
.sch-grid .sch-corner,.sch-grid .sch-emp{position:sticky;left:0;z-index:3;background:var(--surface-card)}
.sch-av{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:center 10%;flex-shrink:0;transition:width .15s ease,height .15s ease}
/* При горизонтальному скролі графіка колонка майстрів стискається — фото/ім'я менші, години сховані (Ok, 13.07.2026) */
.sch-grid-wrap.sch-min .sch-grid{--sch-c1:92px}
.sch-grid-wrap.sch-min .sch-av{width:26px;height:26px;font-size:11px}
.sch-grid-wrap.sch-min .sch-emp{gap:6px;padding:6px 2px}
.sch-grid-wrap.sch-min .sch-emp-i .nm{font-size:11px;line-height:1.15}
.sch-grid-wrap.sch-min .sch-emp-i .hr{display:none}
.sch-av.ph{background:var(--canvas-dark);color:var(--on-dark);display:flex;
  align-items:center;justify-content:center;font-weight:600;text-transform:uppercase;font-size:14px}
.sch-emp-i{min-width:0;flex:1}
/* Заміна (доданий співробітник з іншої локації): мітка + кнопка × окремо від імені, завжди видимі (Ok, 13.07.2026) */
.sch-rmextra{flex:0 0 auto;color:var(--danger);display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--danger-soft)}
@media (hover:hover){.sch-rmextra:hover{background:var(--danger);color:#fff}}
.sch-rmextra svg{width:15px;height:15px;margin:0;vertical-align:middle;display:block}   /* без успадкованого margin-right від .mi — центр */
.sch-covertag{font-size:11px;font-weight:600;color:#C25238;background:rgba(194,82,56,0.14);border-radius:var(--r-full);padding:1px 8px}
.sch-emp.is-cover{box-shadow:inset 3px 0 0 #C25238}
/* Мобільний: прибираємо теракотову смужку перед фото на графіку змін (Ok, 14.07.2026) */
@media(max-width:743px),(max-height:500px){.sch-emp.is-cover{box-shadow:none}}
.sch-emp-i .nm{font-weight:600;font-size:13px;color:var(--ink);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sch-emp-i .hr{font-size:13px;color:var(--stone);display:flex;align-items:center;gap:4px;white-space:nowrap}
.sch-row{grid-column:2 / span 7;display:grid;grid-template-columns:repeat(7,minmax(72px,1fr));gap:6px}
.sch-cell{position:relative;min-height:64px;border:none;border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:4px;transition:background .12s}
.sch-cell.shift{background:var(--canvas-dark);color:var(--on-dark)}
@media (hover:hover){.sch-cell.shift:hover{background:var(--charcoal)}}
.sch-cell.free{background:var(--canvas-light);color:var(--stone);border:1px solid var(--hairline-light)}
@media (hover:hover){.sch-cell.free:hover{background:var(--surface-soft)}}
/* Відсутності в тижневій сітці — ті самі кольори, що в місяці (Ok, 20.08.2026) */
.sch-cell.abs-sick{background:#D9A441;border-color:#D9A441;color:#1e2024}
.sch-cell.abs-sick .off{color:rgba(30,32,36,0.85)}
.sch-cell.abs-vacation{background:#4A6FA5;border-color:#4A6FA5;color:#fff}
.sch-cell.abs-vacation .off{color:rgba(255,255,255,0.9)}
@media (hover:hover){
  .sch-cell.abs-sick:hover{background:#c9932f;border-color:#c9932f}
  .sch-cell.abs-vacation:hover{background:#3d5d8c;border-color:#3d5d8c}
}
.sch-cell.sel{background:#C25238;color:#ffffff;outline:none}
@media (hover:hover){.sch-cell.sel:hover{background:#a94530}}
.sch-cell.sel .off{color:rgba(255,255,255,0.85)}
.sch-cell .iv{font-size:13px;line-height:1.2;white-space:nowrap}
.sch-cell .off{font-size:13px}
.sch-x{position:absolute;top:3px;right:5px;font-size:13px;opacity:0;color:rgba(255,255,255,0.8)}
@media (hover:hover){.sch-cell:hover .sch-x{opacity:1}}

.sch-msbar{display:flex;align-items:center;gap:10px;background:var(--canvas-dark);
  border-radius:var(--r-lg);padding:12px 18px;margin-bottom:14px;color:var(--on-dark)}
.sch-msbar .cnt{flex:1;font-size:14px;font-weight:500}
/* чотири кнопки (робочі/вихідні/лікарняний/відпустка) на вузькому екрані —
   сіткою 2×2 під лічильником, інакше стискаються в нечитабельні (Ok, 20.08.2026) */
@media(max-width:743px),(max-height:500px){
  .sch-msbar{flex-wrap:wrap;gap:8px;padding:12px 14px}
  .sch-msbar .cnt{flex:1 0 100%}
  .sch-msbar .btn{flex:1 1 calc(50% - 4px);height:38px;padding:0 12px;white-space:nowrap}
}
.sch-msbar .btn{background:var(--on-dark);color:var(--canvas-dark);border:none;height:40px;padding:0 18px;border-radius:var(--r-full)}
@media (hover:hover){.sch-msbar .btn:hover{background:var(--msbar-btn-hover,#e8e8ea)}}
.sch-msbar .btn.ghost{background:rgba(255,255,255,0.15);color:var(--on-dark);border:none}
@media (hover:hover){.sch-msbar .btn.ghost:hover{background:var(--msbar-ghost-hover,rgba(255,255,255,0.25))}}
/* Темна тема: смужка масового вибору світло-сіра, тож ховер кнопок теж має бути темним —
   інакше світлий текст лягає на світлий фон і напис зникає (Ok, 20.08.2026).
   Через токен, щоб не залежати від порядку правил. */
html[data-theme="dark"]{--msbar-btn-hover:#3a3d42;--msbar-ghost-hover:rgba(0,0,0,0.18)}
/* Глобальне правило ховера кнопок у темній темі стоїть з !important (світлий #c3c8cd),
   тож для смужки масового вибору перебиваємо його теж з !important (Ok, 20.08.2026) */
@media (hover:hover){
  html[data-theme="dark"] .sch-msbar .btn:hover{background:#3a3d42!important;border-color:#3a3d42!important;color:var(--canvas-dark)!important}
}
/* іконка рівно по центру круга (глобальний .mi має margin-right) */
.sch-ico .mi{margin:0;vertical-align:0}
/* «‹» на першому доступному місяці ШІ-календаря — назад гортати нема куди (Ok, 20.08.2026) */
.sch-ico:disabled{opacity:.35;cursor:default}
@media (hover:hover){.sch-ico:disabled:hover{background:var(--canvas-light)}}

/* Sch monthly */
.sch-back{margin-bottom:16px}
.sch-empcard{display:flex;align-items:center;gap:16px;background:var(--canvas-light);
  border:1px solid var(--hairline-light);border-radius:var(--r-lg);padding:16px 24px;margin-bottom:20px}
.sch-empcard .sch-av{width:60px;height:60px;font-size:20px}
.sch-empcard .i{flex:1}
.sch-empcard .i .nm{font-size:20px;font-weight:500}
.sch-empcard .i .pos{font-size:14px;color:var(--stone)}
.sch-empcard .cnt{text-align:right}
.sch-empcard .cnt .n{font-size:32px;font-weight:500;color:var(--ink);line-height:1.0;letter-spacing:-0.32px}
.sch-empcard .cnt .l{font-size:13px;color:var(--stone)}
.sch-mnav{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.sch-mhead{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
.sch-mhead span{text-align:center;font-size:13px;font-weight:600;text-transform:none;
  letter-spacing:0;color:var(--stone)}
.sch-mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
/* Мобільний: колонки мають стискатись нижче мін-ширини вмісту («10:00–21:00»),
   інакше 7 колонок розпирають сітку за екран і праві дні обрізаються (Ok, 14.07.2026) */
@media(max-width:743px),(max-height:500px){
  .sch-mhead,.sch-mgrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  /* На мобільному в комірці лишаємо ТІЛЬКИ число дня; час і слово «вихідний» ховаємо —
     робочий/вихідний день видно за кольором комірки + легендою внизу (Ok, 14.07.2026). */
  .sch-mcell{min-height:48px;padding:6px 2px;align-items:center;justify-content:center}
  .sch-mcell .dn{font-size:14px}
  .sch-mcell.shift .iv,.sch-mcell .off,.sch-mcell .bd{display:none}
}
.sch-mcell{position:relative;min-height:76px;border:1px solid var(--hairline-light);border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;padding:8px 4px;
  background:var(--canvas-light);color:var(--ink);transition:background .12s}
@media (hover:hover){.sch-mcell:hover{background:var(--surface-soft)}}
.sch-mcell .dn{font-size:14px;font-weight:500}
/* Підпис дня («Вихідний», «Відпустка», години) — по центру простору
   між числом і нижнім краєм клітинки (Ok, 20.08.2026) */
/* text-align обовʼязковий: align-items центрує сам блок підпису, але коли текст
   переноситься («Бажаний вихідний» у два рядки), рядки всередині лишались по лівому
   краю (Ok, 29.08.2026) */
.sch-mcell .bd{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;width:100%;min-height:0;text-align:center}
.sch-mcell.shift{background:var(--canvas-dark);color:var(--on-dark)}
@media (hover:hover){.sch-mcell.shift:hover{background:var(--charcoal)}}
.sch-mcell.shift .iv{font-size:13px;line-height:1.33;color:rgba(255,255,255,0.9)}
/* Час у клітинці — тим самим кольором, що й число дня. У темній темі заливка світло-сіра,
   і білі години на ній не читались (Ok, 20.08.2026) */
html[data-theme="dark"] .sch-mcell.shift .iv{color:var(--on-dark)}
/* У темній темі підкладка під календарем — сіра картка, а вихідні дні на ній трохи
   темніші, щоб читались як «порожні» (Ok, 20.08.2026) */
html[data-theme="dark"] .sch-cal,
html[data-theme="dark"] .sch-empcard{background:var(--surface-card);border-color:var(--hairline-light)}
html[data-theme="dark"] .sch-mcell:not(.shift):not(.sel){background:#1e2024}
/* Минулий місяць — лише перегляд (Ok, 20.08.2026) */
.sch-mcell.locked, .sch-cell.locked{opacity:.55;cursor:default}
@media (hover:hover){
  /* заблокований день не реагує на наведення: колір лишається той самий */
  .sch-mcell.locked:hover, .sch-cell.free.locked:hover{background:var(--canvas-light)}
  .sch-mcell.shift.locked:hover, .sch-cell.shift.locked:hover{background:var(--canvas-dark)}
  html[data-theme="dark"] .sch-mcell.locked:not(.shift):not(.sel):hover{background:#1e2024}
  .sch-mcell.locked:hover .sch-x, .sch-cell.locked:hover .sch-x{opacity:0}
}
.sch-mcell .off{font-size:13px;color:var(--stone)}
/* Блок «Відсутність» у вікні дня (Графіки → місяць майстра), Ok 20.08.2026 */
.sch-abs{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline-light)}
.sch-abs-h{font-size:13px;color:var(--stone);margin-bottom:8px}
.sch-abs-row{display:flex;flex-wrap:wrap;gap:8px}
/* Кольори відсутностей: лікарняний — червоний, відпустка — бірюзова.
   Заливка суцільна, без прозорості (Ok, 20.08.2026) — однакова в обох темах.
   Стоять до .sel/.today, бо вибір і сьогоднішній день важливіші */
.sch-mcell.abs-sick{background:#D9A441;border-color:#D9A441;color:#1e2024}
.sch-mcell.abs-sick .off{color:rgba(30,32,36,0.75)}
.sch-mcell.abs-vacation{background:#4A6FA5;border-color:#4A6FA5;color:#fff}
.sch-mcell.abs-vacation .off{color:rgba(255,255,255,0.9)}
@media (hover:hover){
  .sch-mcell.abs-sick:hover{background:#c9932f;border-color:#c9932f}
  .sch-mcell.abs-vacation:hover{background:#3d5d8c;border-color:#3d5d8c}
}
/* темна тема: загальне правило заливає всі невибрані клітинки #1e2024 — перебиваємо */
html[data-theme="dark"] .sch-mcell.abs-sick:not(.sel){background:#D9A441;border-color:#D9A441;color:#1e2024}
html[data-theme="dark"] .sch-mcell.abs-vacation:not(.sel){background:#4A6FA5;border-color:#4A6FA5;color:#fff}
/* Сьогоднішній день — теракотова ЗАЛИВКА (Ok, 24.08.2026). Обводкою він губився:
   на темній клітинці робочої зміни рамка майже зливалась із сусідами.
   `html` у селекторі — щоб перебити темні перевизначення фону нижче за файлом. */
html .sch-mcell.today:not([class*="abs-"]):not(.msched-off){
  background:var(--link);border-color:var(--link);color:#fff}
html .sch-mcell.today:not([class*="abs-"]):not(.msched-off) .dn{color:#fff}
html .sch-mcell.today:not([class*="abs-"]):not(.msched-off) .iv,
html .sch-mcell.today:not([class*="abs-"]):not(.msched-off) .off{color:rgba(255,255,255,0.9)}
@media (hover:hover){html .sch-mcell.today:not([class*="abs-"]):not(.msched-off):hover{
  background:#a94530;border-color:#a94530}}
/* Відпустка, лікарняний і відмічений вихідний мають власний колір — його не перебиваємо,
   такому дню лишаємо теракотову рамку, щоб «сьогодні» все одно було видно */
.sch-mcell.today[class*="abs-"], .sch-mcell.today.msched-off{border:2px solid var(--link)}
.sch-mcell.sel{background:#C25238;color:#ffffff;outline:none}
@media (hover:hover){.sch-mcell.sel:hover{background:#a94530}}
.sch-mcell.sel .off,.sch-mcell.sel .iv{color:rgba(255,255,255,0.85)}
.sch-legend{display:none}   /* легенду прибрано всюди — десктоп і мобільний (Ok, 14.07.2026) */
.sch-legend i.lg{display:inline-block;width:15px;height:15px;border-radius:var(--r-sm);margin-right:6px;vertical-align:-2px}
.sch-legend i.lg.shift{background:var(--canvas-dark)}
.sch-legend i.lg.free{background:var(--surface-soft);border:1px solid var(--hairline-light)}
.sch-cal{background:var(--canvas-light);border:1px solid var(--hairline-light);border-radius:var(--r-lg);padding:16px}

/* Sch time picker */
.sch-pick-lbl{font-size:13px;text-transform:none;letter-spacing:0;color:var(--stone);
  margin:0 0 8px;font-weight:600}
.sch-pick-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sch-pick-row .iv-f,.sch-pick-row .iv-t{flex:1}
/* кастомний селект часу — на всю доступну ширину */
.sch-pick-row .oz-select{flex:1;min-width:0;display:flex}
.sch-pick-row .oz-select .oz-trigger{width:100%;min-width:0;justify-content:space-between}
.sch-pick-row .oz-sel-pop{max-height:240px}
.sch-dash{color:var(--stone)}
.sch-pick-row .iv-del{margin-left:auto;width:48px;height:48px;min-width:48px;padding:0;
  border:1px solid var(--hairline-strong);border-radius:var(--r-full);background:var(--canvas-light);
  color:var(--stone);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:color .12s ease,border-color .12s ease}
.sch-pick-row .iv-del .mi{margin:0;width:17px;height:17px}
@media (hover:hover){.sch-pick-row .iv-del:hover{color:var(--danger);border-color:var(--danger)}}
/* Список кандидатів «Додати на заміну» */
.cov-row{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:transparent;
  border:none;border-bottom:1px solid var(--hairline-light);border-radius:0;padding:10px 8px;
  cursor:pointer;font-family:inherit;transition:background .12s ease}
@media (hover:hover){.cov-row:hover{background:var(--surface-soft)}}
.cov-row:last-child{border-bottom:none}
.cov-nm{font-size:14px;font-weight:600;color:var(--ink)}
.cov-sub{font-size:13px;color:var(--stone);line-height:1.35}
/* Стан «вихідний» у вікні проміжків */
.sch-offday{padding:16px;text-align:center;color:var(--danger);font-weight:600;font-size:15px;margin-bottom:10px}
/* «Зробити вихідним» — помаранчевий текст-лінк без обводки */
.sch-off-link{width:100%;border:none;background:transparent;color:var(--link);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:8px 0;margin-top:10px;text-align:center}
@media (hover:hover){.sch-off-link:hover{color:var(--ink)}}

/* Discount buttons */
.disc-row{display:flex;gap:6px;flex-wrap:wrap}
/* Активна знижка — теракотова, як у товарних пресетах: один колір на всі знижки
   в системі, щоб обране читалось однаково (Ok, 10.10.2026) */
.disc-b.on{background:#C25238;border-color:#C25238;color:#ffffff}
/* Лінії-роздільники у вікні оплати: знижки на послуги / блок товарів / спосіб оплати
   (Ok, 10.10.2026) */
.pay-sep{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
/* Додані товари — компактні картки-позиції, а не стос полів вводу (Ok, 10.10.2026):
   назва й сума в рядку, під ними дрібний степер і знижки. */
/* Перша картка не липне до поля пошуку над нею (Ok, 10.10.2026) */
.cart-row:first-child{margin-top:10px}
.cart-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface-soft)}
/* Довгу назву обрізаємо трикрапкою — у два рядки картка стрибала (Ok, 10.10.2026).
   Повна назва лишається у підказці при наведенні. */
.cart-row .cr-name{flex:1;min-width:0;font-weight:600;font-size:14px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-row .cr-name span{display:block;font-weight:400;font-size:12.5px;color:var(--ash);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-row .cr-sum{font-weight:600;font-size:15px;white-space:nowrap}
.cart-row .cr-del{flex:0 0 auto;width:28px;height:28px;min-width:28px;font-size:15px}
.cart-row .cr-ctl{flex-basis:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cart-row .qty-step{gap:4px}
.cart-row .qty-step input{height:34px;width:52px;padding:0 6px;text-align:center}
.cart-row .ai-step-btn{width:30px;height:30px;flex:0 0 30px}
.cart-row .cr-disc{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.cart-row .cr-disc .btn{padding:4px 10px;font-size:12.5px}
.cart-row .cr-warn{flex-basis:100%;font-size:12.5px;color:var(--danger)}
/* На телефоні степер і знижки не вміщаються в один рядок: тоді знижки стають
   під кількістю, ліворуч, а не тікають до правого краю (Ok, 10.10.2026) */
@media(max-width:760px){
  .cart-row{padding:10px}
  .cart-row .cr-ctl{gap:10px}
  .cart-row .cr-disc{margin-left:0}
  .cart-row .qty-step input{height:32px;width:46px}
  .cart-row .ai-step-btn{width:28px;height:28px;flex:0 0 28px}
  .cart-row .cr-disc .btn{padding:4px 12px}
}
/* Підсумок за послуги трохи відсунутий від знижок — інакше злипались (Ok, 10.10.2026) */
.pay-total.pay-sum-row{margin-bottom:16px}
/* Кнопка «прибрати товар» — рівно такої ж висоти, як поле поруч (Ok, 10.10.2026) */
.btn.btn-circle.pg-del{width:48px;height:48px;min-width:48px;font-size:18px}
.pay-sep .field:last-child{margin-bottom:0}
@media (hover:hover){}
/* Каси у вигляді платіжних карток (Ok, 02.08.2026) */
.reg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
/* Групи по точках (Ok, 21.08.2026): підзаголовок локації, під ним її каси */
.reg-group + .reg-group{margin-top:26px}
.reg-group-h{margin:0 0 10px}
/* Усі каси одного кольору — звичайна світла картка CRM (Ok, 02.08.2026) */
.reg-card{position:relative;display:flex;flex-direction:column;aspect-ratio:1.6;max-width:380px;
  background:var(--surface-card);color:var(--ink);border:1px solid var(--hairline-light);
  border-radius:18px;padding:20px 22px;overflow:visible;box-shadow:0 10px 26px rgba(0,0,0,.06)}
.reg-card.off{opacity:.55}
.reg-card .rc-top{font-size:13px;font-weight:600;letter-spacing:.2px;color:var(--stone);padding-right:34px}
.reg-card .rc-bal{font-family:var(--font-head);font-size:28px;font-weight:700;letter-spacing:-0.4px;margin-top:auto}
.reg-card .rc-sub{font-size:12px;color:var(--stone);margin-top:4px}
/* Назва каси переїхала нагору, тож у підвалі лишився тільки тип — тримаємо його праворуч */
.reg-card .rc-foot{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;margin-top:12px}
/* Назва каси переїхала нагору картки, локація прибрана — вона в підзаголовку групи
   (Ok, 21.08.2026). Колір лишається як у решти тексту картки, не приглушений. */
.reg-card .rc-name{font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-card .rc-top.rc-name{color:inherit;letter-spacing:1.2px}
.reg-card .rc-kind{font-size:12px;color:var(--stone);white-space:nowrap}
/* Телефон ВЕРТИКАЛЬНО: каси по дві в ряд — по одній вони займали 226px кожна і
   до другої точки доводилось довго гортати (Ok, 02.09.2026). Пропорцію 1.6 знімаємо:
   у вузькій картці вміст вищий за неї, і вона все одно тягнеться. */
@media (max-width:743px) and (orientation:portrait){
  .reg-cards{grid-template-columns:1fr 1fr;gap:12px}
  .reg-card{max-width:none;aspect-ratio:auto;padding:14px 16px;min-height:132px}
  .reg-card .rc-bal{font-size:21px}
  .reg-card .rc-top{padding-right:24px}
  .reg-card .rc-sub,.reg-card .rc-kind{font-size:11.5px}
  .reg-card .reg-dots{top:8px;right:8px}
  /* Однаковий ритм у вузьких картках (Ok, 01.10.2026): на десктопі margin-top:auto
     притискає залишок донизу, але у двоколонці сусідні картки виходили різними —
     де sub ламався на 2 рядки, залишок «спливав» угору. Тому на телефоні залишок
     завжди одразу під назвою, а тип каси — донизу. Рядок «початковий · рух»
     ламається лише на роздільнику, не посеред суми (спани .rc-sub-i). */
  .reg-card .rc-bal{margin-top:6px}
  .reg-card .rc-foot{margin-top:auto;padding-top:8px}
  .reg-card .rc-sub .rc-sub-i{white-space:nowrap}
  /* min-width:0 — без нього картка з довгою назвою («Косметика готівка», nowrap)
     не дає колонці стиснутись: її 1fr-трек роздувається ширшим за екран і сітка
     їде вправо. З нулем колонки завжди рівні, а довга назва охайно обрізається
     трикрапкою (Ok, 01.10.2026). */
  .reg-card{min-width:0}
}
/* Телефон ЛЕЖАЧИ: лишаємо автопідбір — на 816px це ті самі дві колонки, на вужчій
   горизонталі одна, і картка не стискається до нечитабельної */
@media (max-height:500px) and (orientation:landscape){
  .reg-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
  .reg-card{max-width:none;min-width:0}
}
/* Колір картки каси — з палітри в налаштуваннях каси (Ok, 06.08.2026).
   Кожен колір іде в парі зі своїм кольором тексту, щоб залишок завжди читався. */
/* Самі кольори — окремими класами, щоб їх могли використати і сторінка «Каси»,
   і картки кас на «Фінанси → Підсумки» (Ok, 06.08.2026) */
/* --rc-neg — колір від'ємної суми: на кожному фоні свій, бо звичайний червоний
   на теракоті просто зникає (Ok, 06.08.2026) */
.rc-c-graphite  {--rc-bg:#25272c;--rc-fg:#f4f4f4;--rc-dim:#aab1b8;--rc-neg:#ff8a80}
.rc-c-terracotta{--rc-bg:#C25238;--rc-fg:#fff;    --rc-dim:rgba(255,255,255,.72);--rc-neg:#3b0f08}
.rc-c-sand      {--rc-bg:#d9c9a8;--rc-fg:#2b2a26;--rc-dim:rgba(43,42,38,.62);--rc-neg:#9d2418}
.rc-c-olive     {--rc-bg:#6b7a52;--rc-fg:#fff;    --rc-dim:rgba(255,255,255,.72);--rc-neg:#ffd0cb}
/* Замість яскравої бірюзи — приглушений смарагд: та була занадто соковита
   і випадала з ахроматичної гами бренду (Ok, 06.08.2026) */
.rc-c-teal      {--rc-bg:#2f6357;--rc-fg:#fff;   --rc-dim:rgba(255,255,255,.72);--rc-neg:#ffd0cb}
.rc-c-plum      {--rc-bg:#6d4a63;--rc-fg:#fff;    --rc-dim:rgba(255,255,255,.72);--rc-neg:#ffd0cb}
.rc-c-steel     {--rc-bg:#aab1b8;--rc-fg:#1e2024;--rc-dim:rgba(30,32,36,.62);--rc-neg:#8f1d13}
.reg-card[class*="rc-c-"]{background:var(--rc-bg);color:var(--rc-fg);border-color:transparent}
.reg-card[class*="rc-c-"] .rc-top,
.reg-card[class*="rc-c-"] .rc-sub,
.reg-card[class*="rc-c-"] .rc-kind{color:var(--rc-dim)}
.reg-card[class*="rc-c-"] .kdots{color:var(--rc-dim)}
@media (hover:hover){.reg-card[class*="rc-c-"] .kdots:hover{background:rgba(255,255,255,.14);color:var(--rc-fg)}}
/* Палітра у формі каси: кружечки-перемикачі */
.rg-swatches{display:flex;flex-wrap:wrap;gap:10px}
.rg-sw{width:30px;height:30px;border-radius:50%;border:1px solid var(--hairline-light);
  cursor:pointer;padding:0;position:relative;background:var(--surface-card)}
.rg-sw.rc-c-graphite{background:#25272c}
.rg-sw.rc-c-terracotta{background:#C25238}
.rg-sw.rc-c-sand{background:#d9c9a8}
.rg-sw.rc-c-olive{background:#6b7a52}
.rg-sw.rc-c-teal{background:#2f6357}
.rg-sw.rc-c-plum{background:#6d4a63}
.rg-sw.rc-c-steel{background:#aab1b8}
.rg-sw.on{box-shadow:0 0 0 2px var(--surface-card),0 0 0 4px var(--ink)}
.kmenu button.kmenu-del{color:var(--danger)}
.cf-feed-list{display:flex;flex-direction:column}
@media (hover:hover){}

/* AI calendar preview */
/* ШІ календар: іконка робота в помаранчевому крузі */
.ai-bot-ic{width:40px;height:40px;min-width:40px;border-radius:50%;background:#C25238;color:#ffffff;
  display:inline-flex;align-items:center;justify-content:center}
.ai-bot-ic .mi{margin:0;width:20px;height:20px}
/* ШІ календар: номер кроку в крузі + опис на помаранчевій плашці справа */
.ai-steprow{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.ai-stepnum{width:56px;height:56px;min-width:56px;border-radius:50%;background:#C25238;color:#ffffff;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;font-weight:600}
.ai-stepnum b{font-size:18px;font-weight:600}
.ai-stepnum small{font-size:12px;font-weight:600;margin-top:4px}
.ai-hint{flex:1;background:#C25238;color:#ffffff;font-size:14px;line-height:1.45;
  border-radius:var(--r-md);padding:10px 16px}
/* ШІ календар: рядки майстрів + міні-календар вихідних у стилі date-picker */
.ai-mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;
  border:1px solid var(--hairline-light);border-radius:var(--r-md);margin-bottom:6px;background:var(--canvas-light);
  transition:background .12s ease,border-color .12s ease}
.ai-mrow.clickable{cursor:pointer}
@media (hover:hover){.ai-mrow.clickable:hover{background:var(--surface-soft)}}
.ai-mrow.on{border-color:#C25238;background:rgba(194,82,56,0.06)}
/* Підзаголовок напряму в підсумковій таблиці ШІ-календаря (Ok, 20.08.2026) */
.ai-grp-h{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--stone);margin:10px 0 4px}
/* Дропдаун обіду компактний: значення коротке («15:00 – 16:00»), тягнути його
   на всю ширину нема сенсу (Ok, 20.08.2026) */
.ai-lunch-row .oz-select .oz-trigger{flex:0 0 auto;height:38px;padding:0 14px;font-size:13px}
/* поле «змін на місяць»: підпис НАД полем вводу, притиснуто до правого краю (Ok, 13.07.2026) */
/* десктоп: підпис у рядку з полем (як було) */
.ai-target-wrap{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.ai-target-lbl{font-size:13px;white-space:nowrap}
/* Мобільна версія ШІ календаря (≤760px) — десктоп лишається як був */
@media(max-width:743px),(max-height:500px){
  .ai-target-wrap{flex-direction:column;align-items:flex-end;gap:4px}   /* підпис «змін на місяць» над полем */
  .ai-mrow .ai-target-wrap .oz-num{flex:0 0 auto;height:auto;width:78px}  /* у колонці flex-basis тягнув степер у ВИСОТУ 120px; вища специфічність за базове правило */
  .ai-lunch-row .oz-select{flex:1;min-width:0}                          /* дропдаун обіду на всю ширину */
  .ai-mrow{align-items:flex-start;padding:12px 14px}                    /* по верху + щільніше, щоб картка не була зависока */
  .ai-steprow{align-items:flex-end}                                     /* круг «1/3» — по низу підказки */
  .ai-mrow > span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}  /* імʼя, під ним плашка «новачок» по лівому краю */
  /* шапка: «Локація» на всю ширину, місяць зі стрілками по краях — без порожнечі справа */
  .ai-head > div:first-child{flex:1 1 100%;display:flex;align-items:center;gap:8px}
  .ai-head > div:first-child .oz-select{flex:1;min-width:0}
  .ai-head .sch-nav{flex:1 1 100%;justify-content:space-between}
  .ai-head .sch-nav .sch-range{flex:1;justify-content:center}
}
.ai-mrow .oz-num{flex:0 0 78px;width:78px}
.ai-mrow input.ai-target{width:78px;text-align:center;padding-left:10px}
/* Поле «змін на місяць»: нижче за звичайні поля і без стрілок-лічильника (Ok, 20.08.2026) */
.ai-mrow input.ai-target{height:36px;min-height:36px;padding-right:10px;-moz-appearance:textfield}
.ai-mrow input.ai-target::-webkit-outer-spin-button,
.ai-mrow input.ai-target::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ai-mrow .oz-num .oz-num-arrows{display:none}
/* Лічильник «змін на місяць»: кружечки «−» і «+» по боках від поля (Ok, 20.08.2026) */
.ai-step{display:inline-flex;align-items:center;gap:8px}
/* заливка й рамка — як у поля вводу поруч (Ok, 20.08.2026) */
.ai-step-btn{width:36px;height:36px;flex:0 0 36px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--hairline-strong);background:var(--canvas-light);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center}
.ai-step-btn svg{width:14px;height:14px}
@media (hover:hover){.ai-step-btn:hover{background:var(--surface-soft)}}
.ai-mrow .oz-num input.ai-target{width:100%}
.ai-day,.ai-past{display:flex;align-items:center;justify-content:center;
  /* рівний круг, а не витягнута пілюля: ширина = висота, по центру клітинки (Ok, 20.08.2026) */
  width:36px;height:36px;margin:0 auto;border-radius:50%;font-size:13px;user-select:none}
.ai-day{cursor:pointer}
@media (hover:hover){.ai-day:hover{background:var(--surface-soft)}}
.ai-day.off{background:var(--danger);color:#ffffff}
@media (hover:hover){.ai-day.off:hover{background:#b3364a}}
/* Типи неробочих днів у ШІ-календарі — ті самі кольори, що в графіках (Ok, 20.08.2026) */
.ai-day.off.ak-sick{background:#D9A441;color:#1e2024}
.ai-day.off.ak-vacation{background:#4A6FA5;color:#fff}
@media (hover:hover){
  .ai-day.off.ak-sick:hover{background:#c9932f}
  .ai-day.off.ak-vacation:hover{background:#3d5d8c}
}
/* Перемикач типу: обраний тип фарбуємо його ж кольором, щоб було видно чим «малюєш» */
.ai-brush{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ai-brush .btn.sm{height:34px;padding:0 14px;font-size:13px}
.ai-brush .btn.ab-dayoff:not(.ghost){background:var(--danger);border-color:var(--danger);color:#fff}
.ai-brush .btn.ab-sick:not(.ghost){background:#D9A441;border-color:#D9A441;color:#1e2024}
.ai-brush .btn.ab-vacation:not(.ghost){background:#4A6FA5;border-color:#4A6FA5;color:#fff}
.ai-day.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ai-past{color:var(--faint);cursor:not-allowed}
.aic-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.aic-h{text-align:center;font-size:13px;color:var(--stone);font-weight:600;padding-bottom:2px}
.aic-day{min-height:82px;border:1px solid var(--hairline-light);border-radius:var(--r-md);
  padding:6px 6px;font-size:13px;overflow:hidden;background:var(--canvas-light)}
.aic-day.wknd{background:#fafafb;border-color:#f39332}
.aic-day .dnum{font-weight:600;font-size:13px;display:block;margin-bottom:3px}
.aic-day .m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.56}
.aic-day .m.nov{color:var(--stone)}
.aic-day .none{color:var(--danger)}

/* Notes */
.note{background:var(--surface-soft);border:1px solid var(--hairline-light);color:var(--ink);
  padding:14px 14px;border-radius:var(--r-md);font-size:14px;margin:14px 0}
.note.warn{background:rgba(236,126,0,0.10);border-color:transparent;color:#ec7e00}
.note.info{background:rgba(73,79,223,0.10);border-color:transparent;color:var(--primary)}
.note.ok{background:var(--teal-soft);border-color:transparent;color:var(--teal)}

/* «Майстри на зміні»: кругле фото перед імʼям (Ok, 20.08.2026) */
.dash-shift-nm{display:inline-flex;align-items:center;gap:10px}
.dash-shift-txt{display:flex;flex-direction:column;line-height:1.25}
.dash-shift-iv{white-space:nowrap;line-height:1.35}
.dash-shift-av{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center 10%;flex-shrink:0;
  border:1px solid var(--hairline-light)}
.dash-shift-av.ph{display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-soft);color:var(--stone);font-size:12px;font-weight:600}
/* «Найближчі записи»: час займає рівно стільки, скільки треба, решта — клієнту (Ok, 20.08.2026) */
.dash-next-tbl th:first-child,.dash-next-tbl td:first-child{width:1%;white-space:nowrap}
/* Підказки товару в продажу: назва + ціна + залишки по локаціях — рядок довгий,
   тому дрібніший шрифт, щоб не переносився в два рядки (Ok, 20.08.2026) */
#sp-prod-menu{font-size:14px}
.combo-item{font-size:14px;line-height:1.35}

@media (hover:hover){/* ==================== ЧОРНИЙ HOVER У ВСІХ ВИПАДАЮЧИХ СПИСКАХ (Ok, 09.07.2026) ==================== */
.oz-item:hover,.kmenu button:hover,.rem-opt:hover,.bk-sugrow:hover,
.rd-more-menu button:hover,.combo-item:hover{background:var(--canvas-dark);color:var(--on-dark)}}
@media (hover:hover){.kmenu button:hover .mi,.rd-more-menu button:hover .mi{color:var(--on-dark)}}
@media (hover:hover){.oz-item:hover .muted,.bk-sugrow:hover .muted,.combo-item:hover .muted{color:var(--on-dark-mute)}}
@media (hover:hover){.oz-item.off:hover{background:transparent;color:inherit}}
@media (hover:hover){/* червоні пункти (видалити/скасувати) лишаються червоними й на чорному ховері */
.kmenu button.kmenu-del:hover,.rd-more-menu button[data-a="cancel"]:hover{color:var(--danger)}}
/* Іконка смітника в пункті «Видалити» — червона, як текст (Ok, 09.07.2026) */
.kmenu button.kmenu-del .mi,.kmenu button.kmenu-del:hover .mi{color:var(--danger)}
/* Статті платежів: «×» справа з відступом 10px */
#pc-box table th:last-child, #pc-box table td:last-child{padding-left:0;padding-right:10px}
/* Клієнти: колонка дій — справа з відступом 10px */
#cl-box table th:last-child, #cl-box table td:last-child{padding-left:0;padding-right:10px}
/* Персонал: кругла помаранчева кнопка «Ціни майстра» */
.price-circle{width:34px;height:34px;min-width:34px;padding:0;border:none;background:#C25238;color:#fff;
  border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease}
@media (hover:hover){.price-circle:hover{background:#a84430}}
/* Drag&drop зона для фото (форма працівника) */
.dropzone{display:flex;gap:12px;align-items:center;padding:14px 16px;cursor:pointer;
  border:1.5px dashed var(--hairline-strong);border-radius:var(--r-lg);background:var(--canvas-light);
  transition:background .12s ease,border-color .12s ease}
@media (hover:hover){.dropzone:hover{background:var(--surface-soft)}}
.dropzone.drag{background:rgba(194,82,56,0.08);border-color:#C25238}
/* Вікно обрізання фото (Ok, 12.09.2026). Рамка повторює пропорцію того місця,
   де фото реально побачить клієнт; коло показує область, яка піде в кружечок
   адмінки (там object-fit:cover бере центральний квадрат на всю ширину). */
.cropw{display:flex;flex-direction:column;align-items:center;gap:14px}
.cropw-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--panel2);touch-action:none}
.cropw-cv{display:block;width:100%;height:100%;cursor:grab}
.cropw-cv:active{cursor:grabbing}
/* центр кола на 42% висоти, а не рівно посередині: у портретах обличчя вище центру.
   Узгоджено з object-position:center 10% на кружечках — саме ця область туди й потрапляє. */
.cropw-circle{position:absolute;left:0;top:42%;width:100%;aspect-ratio:1/1;transform:translateY(-50%);
  border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 9999px rgba(0,0,0,.3);pointer-events:none}
.cropw-zoom{display:flex;align-items:center;gap:10px;width:100%;max-width:340px}
.cropw-zi{width:18px;height:18px;flex:0 0 18px;fill:currentColor;color:var(--muted)}
.cropw-range{flex:1;accent-color:#C25238}
.cropw-hint{color:var(--muted);font-size:13px;line-height:1.4;text-align:center;max-width:340px}
/* Помаранчева кнопка (акцентні дії) */
.btn.orange{background:#C25238;border-color:#C25238;color:#fff}
@media (hover:hover){.btn.orange:hover{background:#a84430;border-color:#a84430}}
.btn.orange .mi{color:#fff}
/* Інтеграції: картки однакової висоти, кнопка притиснута до низу */
/* ==================== ОГЛЯД: заголовки секцій (Ok, 04.08.2026) ==================== */
/* Сторінка довга, тому великі розділи мають читатись як розділи, а не як чергова підпис-стрічка */
.ov-sec{margin:30px 0 10px;padding-top:16px;border-top:1px solid var(--hairline-light)}
/* Перед ПЕРШОЮ секцією лінії немає — вона розділяє секції, а не висить під фільтром.
   `:first-of-type` тут не спрацьовував: перед секціями стоїть ще один div (слот липкої
   плашки), і «першим елементом свого типу» браузер вважав його (Ok, 30.08.2026). */
.ov-sec:first-of-type,
.ov-nav-slot + .ov-sec{margin-top:14px;padding-top:0;border-top:none}
.ov-sec-t{font-size:20px;font-weight:600;letter-spacing:-0.2px;color:var(--ink)}
.ov-sec-h{font-size:13px;margin-top:2px}

/* ==================== ІНТЕГРАЦІЇ: картки (Ok, 04.08.2026 — «ширші й симпатичніші») ==================== */
.int-card{display:flex;flex-direction:column;height:100%;padding:16px 18px;transition:border-color .12s ease,transform .12s ease}
@media (hover:hover){.int-card:hover{transform:translateY(-2px)}}
/* Логотип у власній плитці — щоб різнокаліберні PNG виглядали рівно */
.int-logo{width:44px;height:44px;border-radius:12px;background:var(--surface-soft);border:1px solid var(--hairline-light);
  display:flex;align-items:center;justify-content:center;flex:none}
.int-logo img{width:26px;height:26px;object-fit:contain;display:block;border-radius:5px}
/* Кілька сервісів на одній картці — «букет»: основний логотип попереду, решта визирають з-під нього */
.int-logos{position:relative;width:64px;height:44px;flex:none}
.int-logos .int-logo{position:absolute;left:0;top:0;z-index:2}
.int-logos .int-peek{position:absolute;width:30px;height:30px;border-radius:9px;background:var(--surface-soft);
  border:1px solid var(--hairline-light);display:flex;align-items:center;justify-content:center;z-index:1}
.int-logos .int-peek img{width:17px;height:17px;object-fit:contain;display:block;border-radius:4px}
/* nth-of-type рахує всі span, а не лише .int-peek — тому позиції задаємо явними класами */
.int-logos .int-peek.p1{left:28px;top:2px}
.int-logos .int-peek.p2{left:34px;top:16px;z-index:0}
.int-logo svg{width:22px;height:22px}
.int-title{font-size:15px;font-weight:600;line-height:1.25}
.int-note{font-size:13px;line-height:1.4;margin-top:10px}
.int-foot{margin-top:auto;padding-top:14px}

/* ==================== НАЛАШТУВАННЯ: ліве меню розділів (Ok, 09.07.2026) ==================== */
.set-layout{display:flex;gap:28px;align-items:flex-start}
/* Меню — чорний контейнер (Ok, 09.07.2026) */
.set-nav{flex:0 0 240px;position:sticky;top:16px;display:flex;flex-direction:column;gap:2px;
  background:var(--canvas-dark);border-radius:var(--r-lg);padding:14px 10px}
@media (hover:hover){}
.set-content{flex:1;min-width:0}   /* десктоп: бічний список; дропдаун прихований */
@media(max-width:900px){.set-layout{flex-direction:column}
  /* Мобільний: замість чорного списку розділів — компактний дропдаун (Ok, 14.07.2026).
     Ховаємо кнопки-розділи, заголовки груп, роздільники й окреме поле пошуку. */
  .set-nav{position:static;flex:0 0 auto;width:100%;display:block;background:transparent;padding:0;margin-bottom:8px}
  .set-nav [data-nav-tab],.set-nav-h,.set-nav-sep,.set-nav-srch{display:none}
  .set-nav-mob{display:block}
  /* Темний вигляд як селектор локацій на дашборді (data-dark="1" → .oz-dark дає темний тригер).
     Тут лишаємо форму (пігулка/розміри) і чинимо попап: .set-nav button робив би текст білим. */
  .set-nav-mob .oz-trigger{border-radius:var(--r-full);height:48px;padding:0 20px;text-align:left;font-weight:600}
  .set-nav-mob .oz-trigger input.oz-search-inline{color:var(--on-dark)}
  .set-nav-mob .oz-trigger input.oz-search-inline::placeholder{color:rgba(255,255,255,0.6)}
  /* Пункти списку більше не перекриваємо: попап лежить у <body>, тож правила
     .set-nav button на нього не діють і працюють загальні .oz-item (Ok, 30.07.2026) */
  .set-content{width:100%}}
/* Налаштування на всю ширину сторінки (Ok, 10.07.2026): знімаємо фіксовані max-width у контенті розділів */
.set-content [style*="max-width:760px"],
.set-content [style*="max-width:700px"],
.set-content [style*="max-width:560px"]{max-width:none !important}

/* Налаштування → Загальні: блоки стають поряд, коли вистачає ширини (Ok, 11.08.2026).
   Дві газетні колонки, а не сітка: картки різної висоти пакуються без порожніх дірок,
   «Компанія» і «Логотипи» стають у верхньому рядку поруч (Ok, 11.08.2026). */
.set-gen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.set-gen-col{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Вузький екран — одна колонка, картки йдуть підряд у порядку розмітки */
@media(max-width:1000px){.set-gen{grid-template-columns:1fr}.set-gen-col{display:contents}}
/* Планшет вертикально: iPad Pro — це рівно 1024px, тобто ширше за межу вище, і дві
   колонки лишались навіть у портреті. Там вони вузькі й читаються погано, тож
   складаємо картки одна під одною (Ok, 29.08.2026). */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait){
  .set-gen{grid-template-columns:1fr}
  .set-gen-col{display:contents}
}
/* На вузькому екрані колонка стає display:contents, і картка перетворюється на
   прямий елемент сітки — а в нього min-width:auto, тобто він розпирається до
   ширини вмісту й вилазить за екран (на «Повідомленнях клієнтам» картка була
   450px при екрані 390 і праву частину обрізало). Ok, 16.08.2026 */
.set-gen .rd-block{min-width:0}
/* Картка на всю ширину сітки — над обома колонками (Ok, 16.08.2026) */
.set-gen > .set-gen-full{grid-column:1 / -1}
/* Редактор шаблону: поле й прев'ю поруч. На телефоні кожному лишалось по ~190px —
   редагувати текст у такому полі неможливо, тому складаємо в стовпчик. */
/* Поле на всю ширину картки, приклад — рядком під ним. Поруч їм лишалось по
   260px, і редагувати текст було тісно (Ok, 16.08.2026). */
.tmpl-edit{display:flex;flex-direction:column;gap:6px}
/* Приклад повідомлення — окреме віконце під полем (Ok, 16.08.2026) */
.tmpl-preview{font-size:13px;line-height:1.4;padding:9px 11px;background:var(--surface-soft);
  border:1px dashed var(--hairline-strong);border-radius:var(--r-md)}
/* Компактний перемикач он/офф — той самий вигляд, що вимикачі модулів, але
   менший, щоб влазив у шапку картки повідомлення (Ok, 16.08.2026) */
.sw{position:relative;width:44px;height:24px;flex:0 0 auto;display:inline-block}
.sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;z-index:2}
.sw-track{position:absolute;inset:0;background:var(--line);border-radius:24px;transition:background .15s ease}
.sw-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;
  box-shadow:0 0 5px rgba(0,0,0,.22);transition:left .15s ease}
.sw input:checked ~ .sw-track{background:var(--link)}
.sw input:checked ~ .sw-knob{left:23px}
.sw input:disabled{cursor:default}
/* Смужка-заголовок розділу: не картка, а роздільник — назва зліва, пояснення
   поруч тим самим рядком (Ok, 16.08.2026) */
.tmpl-sec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 16px}
.tmpl-sec-t{font-size:20px;font-weight:500;line-height:1.4;flex:0 0 auto}
/* Шапка повідомлення: назва зі статусом ліворуч, вимикач праворуч, підказка нижче */
.tmpl-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tmpl-title{font-size:14px;font-weight:600;min-width:0}
.tmpl-title .tag{font-size:11px;vertical-align:1px}
.tmpl-send{display:flex;gap:8px;align-items:center;cursor:pointer;font-size:13px;flex:0 0 auto;white-space:nowrap}
.tmpl-hint{font-size:13px;margin:2px 0 6px}
/* Картки розділу — двома колонками, які пакуються щільно. Сітка вирівнювала їх
   по рядках і під короткою карткою зяяла порожнеча (Ok, 16.08.2026). */
.tmpl-sec-body{columns:2;column-gap:12px}
.tmpl-sec-body > .rd-block{break-inside:avoid;margin:0 0 12px}
.tmpl-sec-body > .rd-block:last-child{margin-bottom:0}
.tmpl-sec-body.one{columns:1}
@media(max-width:1000px){.tmpl-sec-body{columns:1}}
/* Ряд змінних — тільки для блоку, який зараз редагують. На сторінці 13 блоків,
   і 13 однакових рядів по 8 чипів перетворювали її на кашу (Ok, 16.08.2026). */
.tmpl-vars{display:none;gap:6px;flex-wrap:wrap;margin-top:6px}
[data-tmpl].is-editing .tmpl-vars{display:flex}
/* Додаткове налаштування під шаблоном (час, періодичність) — окремим рядком
   із тонкою лінією зверху, поле праворуч (Ok, 16.08.2026) */
/* Підпис зверху, саме поле — на всю ширину картки, як текстове поле шаблону
   (Ok, 16.08.2026). Раніше контрол тулився в колонку 200px. */
.tmpl-opt{margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline-light)}
/* контроли в CRM загорнуті в .oz-num / .oz-select — тягнемо саме обгортку */
.tmpl-opt > .oz-num, .tmpl-opt > .oz-select, .tmpl-opt > select, .tmpl-opt > input{
  width:100%;display:block;margin-top:6px}
/* Видима частина списку — окремий елемент .oz-trigger, і саме він inline-flex по
   вмісту. Тягнути обгортку мало, треба сам тригер (Ok, 16.08.2026). */
.tmpl-opt .oz-trigger{width:100%;display:flex;justify-content:space-between;align-items:center}
/* Картка послуги: поля стоять сіткою по кілька в рядок, а не кожне на всю ширину.
   Назва ширша за решту, бо текст довгий (Ok, 11.08.2026) */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 14px;align-items:start}
.svc-grid > .field:first-child{grid-column:span 2}
/* Телефон: чотири поля стояли кожне на всю ширину — `auto-fit,minmax(180px)` при
   330px вмісту давав лише одну колонку. Фіксуємо два стовпчики: Назва / Напрямок,
   під ними Тривалість / Базова ціна (Ok, 02.09.2026) */
@media(max-width:743px),(max-height:500px){.svc-grid > .field:first-child{grid-column:auto}
  .svc-grid{grid-template-columns:1fr 1fr}}
/* Планшет вертикально: у ряд влазить три-чотири колонки, а полів чотири, з яких перше
   на дві — виходила драбинка («Напрямок» біля правого краю, «Базова ціна» посередині).
   Фіксуємо рівно два стовпчики: Назва / Напрямок, під ними Тривалість / Базова ціна
   (Ok, 29.08.2026) */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait){
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc-grid > .field:first-child{grid-column:auto}
}
/* Галочки відділені лінією зверху і одна від одної (Ok, 11.08.2026) */
.svc-chks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;
  border-top:1px solid var(--hairline-light);padding-top:12px;margin-top:12px}
.svc-chks > label{padding:0 14px}
.svc-chks > label:first-child{padding-left:0}
.svc-chks > label + label{border-left:1px solid var(--hairline-light);padding-right:0}
/* Вузький екран — галочки одна під одною, тож і лінія горизонтальна */
@media(max-width:743px),(max-height:500px){.svc-chks > label{padding:0}
  .svc-chks > label + label{border-left:none;border-top:1px solid var(--hairline-light);padding-top:12px;margin-top:12px}}
/* Те саме на iPad mini вертикально (Ok, 29.08.2026): сітка там теж згортається в одну
   колонку (494px проти потрібних 560), а вертикальна риска лишалась і висіла збоку
   від «Додаткової послуги». Межа 774 — саме нижче неї два стовпчики вже не влазять.
   Заразом кнопка «···» стоїть унизу блока, а не по центру (Ok, 29.08.2026). */
@media (min-width:744px) and (min-height:501px) and (max-width:774px){
  /* Явно один стовпчик, а не auto-fit: у режимі редагування блок ширший (немає
     колонки «···»), там два стовпчики ще влазили — і горизонтальна лінія з відступом
     зсувала другу галочку вниз (Ok, 29.08.2026). Тепер обидва режими однакові. */
  .svc-chks{grid-template-columns:1fr}
  .svc-chks > label{padding:0}
  .svc-chks > label + label{border-left:none;border-top:1px solid var(--hairline-light);
    padding-top:12px;margin-top:12px}
  .chk-row .card-more-cell{align-items:flex-end}
}

/* Розгорнута картка (Локації): шапка і вміст — окремі підкладки з просвітом,
   як у Налаштування → Загальні (Ok, 12.08.2026). Згорнута картка виглядає як раніше:
   приховане тіло не бере участі в розкладці, тож і просвіт не зʼявляється. */
.split-cards > .rd-block{background:transparent;border:none;padding:0!important;
  display:flex;flex-direction:column;gap:6px}
.split-cards > .rd-block > [data-head]{background:var(--surface-card);
  border:1px solid var(--hairline-light);border-radius:var(--r-md)}
.split-cards > .rd-block > [data-body]{background:var(--surface-card);
  border:1px solid var(--hairline-light);border-radius:var(--r-md);border-top:1px solid var(--hairline-light)!important}

/* Картка ресурсу: назва вузька, коментар широкий (Ok, 12.08.2026) */
.res-grid{display:grid;grid-template-columns:1.1fr 1.1fr .6fr 2.2fr;gap:0 14px;align-items:start}
/* Підпис у два рядки більше не зсуває своє поле нижче за сусідні: підписи і поля —
   два спільні ряди сітки (Ok, 12.08.2026, скрін із «Скільки таких одиниць») */
@supports(grid-template-rows:subgrid){
  .res-grid{grid-template-rows:auto auto}
  .res-grid > .field{display:grid;grid-template-rows:subgrid;grid-row:span 2}
}
@media(max-width:1100px){.res-grid{grid-template-columns:1fr 1fr}}
@media(max-width:743px),(max-height:500px){.res-grid{grid-template-columns:1fr}}

/* Ресурс → «Потрібен для послуг»: галочки в 2-3 колонки, без внутрішнього скролу (Ok, 12.08.2026) */
/* max(...) тримає стелю в 4 колонки: ширша за 1/4 колонка просто не влізе пʼятою (Ok, 12.08.2026) */
.res-svcs{display:grid;gap:8px 18px;
  grid-template-columns:repeat(auto-fill,minmax(max(220px,(100% - 3*18px)/4),1fr))}
/* Квадратик — по центру ПЕРШОГО рядка назви (довгі назви переносяться на два) */
.res-svcs > label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;line-height:20px}
.res-svcs > label > input{flex:0 0 auto;margin:0}
.res-svcs > label > span{padding-top:0}
@media(max-width:743px),(max-height:500px){.res-svcs{grid-template-columns:1fr}}

/* Підказка «можна замінити» поверх завантаженого лого — тільки при наведенні мишею.
   На тач-екранах ховер залипає, тому правило під @media (hover:hover) (Ok, 11.08.2026) */
.logo-hint{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  padding:10px;border-radius:inherit;text-align:center;font-size:13px;line-height:1.4;
  background:rgba(18,19,22,.72);color:#fff;opacity:0;transition:opacity .15s ease;pointer-events:none}
@media (hover:hover){.dropzone:hover .logo-hint{opacity:1}}

/* Прибрати лого — звичний круглий хрестик у куті самої зони завантаження (Ok, 11.08.2026) */
.logo-del{position:absolute;top:6px;right:6px;z-index:2;width:26px;height:26px;min-width:26px;
  background:var(--canvas-light)}

/* Кнопки режиму — у рядку заголовка блоку, щоб не займати окремий рядок */
.set-blk-acts{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
.set-gen .rd-block-h{flex-wrap:wrap}
/* Кнопки лишаються в рядку із заголовком (Ok, 02.09.2026 — скасував своє ж рішення
   від 13.08, коли вони йшли окремим рядком: заголовок + «Редагувати» вміщаються).
   `flex-wrap:wrap` лишаємо — якщо кнопок стане більше, вони перенесуться самі. */
@media(max-width:743px),(max-height:500px){
  .rd-block-h{flex-wrap:wrap}
  /* ⚠️ `flex-shrink:1;min-width:0` обовʼязкові: у базовому правилі стоїть `flex-shrink:0`,
     і блок дій з трьома широкими кнопками («Стиль форми»: Форма запису / Форма
     сертифіката / Картка сертифіката) лишався 483px і вилазив за екран (Ok, 02.09.2026).
     Тепер він переноситься окремим рядком і сам розкладає кнопки в два ряди. */
  .set-blk-acts{margin-left:auto;width:auto;flex-wrap:wrap;justify-content:flex-end;
    flex-shrink:1;min-width:0}
  /* Поля в режимі ПЕРЕГЛЯДУ роз'їжджались сходинками: загальне `.row{align-items:flex-end}`
     рівняє пару по НИЗУ, а низом вважався низ підказки. Ставимо ту саму сітку, що вже
     є для `.row-sub`: підпис / значення / підказка лягають на спільні рядки, тож у парі
     все на одній лінії (Ok, 02.09.2026) */
  .set-gen [data-view] > .row{display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;align-items:start}
  .set-gen [data-view] > .row > .field{display:grid;grid-template-rows:subgrid;
    grid-row:span 3;gap:6px}
}
/* Лінія під заголовком блоку — відділяє шапку від полів (Ok, 11.08.2026).
   Тільки в «Загальних»: у решті розділів заголовки лишаються як були. */
/* Шапка і вміст блоку — дві окремі підкладки з зазором 4px (Ok, 12.08.2026).
   Сама картка стає прозорим контейнером, inline-стилі з розмітки глушимо. */
/* Прозорим контейнером стає лише та картка, яку справді розділили на дві підкладки.
   Інакше «прозорими» ставали і звичайні плашки на сторінці (Ok, 12.08.2026). */
.split-blocks .rd-block:has(> .rd-body){background:transparent!important;border:none!important;padding:0!important;
  display:flex;flex-direction:column;gap:6px}
.split-blocks .rd-block > .rd-block-h{margin:0!important;padding:14px 16px;
  background:var(--surface-card);border:1px solid var(--hairline-light);border-radius:inherit}
.split-blocks .rd-block > .rd-body{padding:14px 16px;
  background:var(--surface-card);border:1px solid var(--hairline-light);border-radius:inherit}
.split-blocks .rd-block > .rd-body > :last-child{margin-bottom:0}
/* радіус беремо той, що вже заданий картці: у Бізнесі 12px, деінде — свій */
.split-blocks .rd-block{border-radius:var(--r-md)}
.set-biz .split-blocks .rd-block{border-radius:var(--r-md)}
/* Кути карток 12px — лише у вкладках групи «Бізнес» (Ok, 12.08.2026) */
.set-biz .rd-block{border-radius:var(--r-md)!important}

/* (Фокус-ринг прибрано на прохання Ok, 13.07.2026 — не подобався візуально.) */

/* ==================== #11 Зменшений рух (Ok, 13.07.2026) ====================
   Повага до системного налаштування "reduce motion": майже вимикаємо анімації/переходи. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important}
}

/* Прибрати браузерну синю рамку на модалці, яку ми фокусуємо для доступності (Ok, 13.07.2026) */
.modal:focus,.modal:focus-visible{outline:none}

/* ==================== adapt #1–#2: модалки/попапи на телефоні не вилазять за екран (Ok, 14.07.2026) ==================== */
@media(max-width:743px),(max-height:500px){
  /* #1: інлайн min-width кореневого контенту вікна не розпирає модалку (94vw − padding ≈ 304px) */
  .modal .mbody > [style*="min-width"]{min-width:0 !important}
  /* #2: поп-ап дзвоника (сповіщення) — не ширший за екран */
  #bell-pop{width:min(360px, calc(100vw - 20px)) !important}
}

/* ==================== adapt #3: збільшені тач-таргети на телефоні (Ok, 14.07.2026) ==================== */
@media(max-width:743px),(max-height:500px){
  .tx-open{width:40px;height:40px;min-width:40px}          /* стрілка-шеврон у рядках (Клієнти тощо) */
  .wl-add-btn{width:40px;height:40px}                      /* «+» у Лист очікування */
  .oz-dt-day,.dr-d,.mini-day{height:40px}                  /* клітинки дат у пікерах */
  .oz-num-btn{width:30px;height:22px}                      /* стрілки лічильника — вдвічі більша зона (дві в полі 48px, тому не 40) */
}

/* Дати періоду в заголовку блока: на широкому екрані в тому ж рядку через крапку,
   на телефоні — окремим рядком дрібним (Ok, 31.08.2026) */
.rd-h-per::before{content:" · "}
.rd-h-per{font-weight:inherit}

/* Звіт по складу, вертикальний телефон (Ok, 31.08.2026) */
@media(max-width:743px) and (orientation:portrait){
  /* «Виручка + Прибуток», «Продано + Прийнято», «Втрати» на всю ширину */
  .cards.cards-stockper{display:grid;grid-template-columns:1fr 1fr}
  .cards.cards-stockper > .card{min-width:0}
  .cards.cards-stockper > .card:nth-child(5){grid-column:1 / -1}
  /* «Зараз на складі» і «Закуплено/Втрати» на «Витратці» — по дві в ряд (Ok, 31.08.2026) */
  .cards.cards-2,.cards.cards-conper{display:grid;grid-template-columns:1fr 1fr}
  .cards.cards-2 > .card, .cards.cards-2 > .card-wrap,
  .cards.cards-conper > .card{min-width:0}
  /* Швидкі періоди тут зайві — місця мало, а період і так вибирається календарем */
  .filters.stock-quick{display:none}
  /* Дати під назвою блока, а не в один рядок із нею */
  .rd-block-h .rd-h-per{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
  .rd-block-h .rd-h-per::before{content:none}
  /* Назва товару з брендом — шапка картки на всю ширину, без підпису «Товар» */
  table.tbl-stock.cards-mob td[data-label="Товар"]{display:block;text-align:left;padding:6px 0 8px}
  table.tbl-stock.cards-mob td[data-label="Товар"]::before{display:none}
  table.tbl-stock.cards-mob .st-name{font-weight:600}
  /* Підсумковий рядок: без display:block він лишався вузькою карткою по вмісту */
  table.tbl-stock.cards-mob tfoot{display:block}
  table.tbl-stock.cards-mob td.st-total-h{display:block;text-align:left;font-weight:600;padding:6px 0 8px}
}

/* «Динаміка», картка людини: показники, для яких є лише одна точка, — списком
   «назва — значення», а не суцільним рядком через крапки (Ok, 31.08.2026) */
.hs-singles-h{color:var(--muted);font-size:13px;margin-bottom:6px}
.hs-singles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 20px}
.hs-single{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--hairline-light);font-size:14px}
.hs-single > span{color:var(--stone)}

/* «Динаміка» рейтингу: плашка «переверніть телефон» видима лише в портреті телефона,
   там сам звіт ховаємо — багато показників у вузьку колонку не вкладаються (Ok, 31.08.2026) */
.hs-rotate{display:none}
@media(max-width:743px) and (orientation:portrait){
  .hs-rotate{display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:40px 24px;text-align:center;color:var(--muted)}
  .hs-rotate svg{color:var(--link)}
  .hs-rotate > div:nth-of-type(1){color:var(--ink);font-size:16px;font-weight:600}
  .hs-rotate-sub{font-size:13px;max-width:260px}
  .hs-wrap{display:none}
}

/* PnL, три підсумкові картки на телефоні: були по одній на рядок під одне число
   (у горизонтальному — на всі 816px). У портреті «Валові доходи» лишаємо на всю
   ширину як головне число, решта дві по половині; у горизонтальному — три в ряд
   (Ok, 31.08.2026). */
@media(max-width:743px) and (orientation:portrait){
  .cards.cards-pnl{display:grid;grid-template-columns:1fr 1fr}
  .cards.cards-pnl > .card{min-width:0}
  .cards.cards-pnl > .card:first-child{grid-column:1 / -1}
}
@media(max-height:500px) and (orientation:landscape){
  .cards.cards-pnl{display:grid;grid-template-columns:repeat(3,1fr)}
  .cards.cards-pnl > .card{min-width:0}
}

/* «Стан бізнесу»: у розкритих розділах перша колонка (локація / назва товару /
   працівник) стає шапкою картки, а бренд — підписом під нею. Було по 5 рядків
   «підпис — значення» на позицію, 209px кожна (Ok, 31.08.2026). */
@media(max-width:743px),(max-height:500px){
  .tbl-bs.cards-mob tbody td:first-child{display:block;text-align:left;padding:6px 0 4px;font-weight:600}
  .tbl-bs.cards-mob tbody td:first-child::before{display:none}
  .tbl-bs.cards-mob tbody td[data-label="Категорія"]{display:block;text-align:left;
    padding:0 0 8px;border-top:none;color:var(--muted);font-size:12px;font-weight:400}
  .tbl-bs.cards-mob tbody td[data-label="Категорія"]::before{display:none}
}

/* «Давно не приходили»: галочка й імʼя — шапка картки, телефон дрібним під ним.
   Було шість рядків «підпис — значення» по 269px на клієнта, а їх сотні
   (Ok, 31.08.2026). */
@media(max-width:743px),(max-height:500px){
  .tbl-inact.cards-mob tbody tr{display:flex;flex-wrap:wrap;align-items:center;padding:8px 14px}
  .tbl-inact.cards-mob tbody tr > td{flex:0 0 100%;order:3}
  /* галочка — праворуч від імені (Ok, 31.08.2026) */
  .tbl-inact.cards-mob tbody tr > td:first-child{order:1;flex:0 0 auto;border-top:none;
    margin-left:auto;padding:4px 0 4px 10px;width:auto;justify-content:flex-end;text-align:right}
  .tbl-inact.cards-mob tbody tr > td[data-label="Клієнт"]{order:0;flex:1;min-width:0;border-top:none;
    justify-content:flex-start;text-align:left;padding:4px 0;font-weight:600}
  .tbl-inact.cards-mob tbody tr > td[data-label="Телефон"]{order:2;flex:0 0 100%;border-top:none;
    justify-content:flex-start;text-align:left;padding:0 0 6px;font-size:13px}
  .tbl-inact.cards-mob tbody tr > td:first-child::before,
  .tbl-inact.cards-mob tbody tr > td[data-label="Клієнт"]::before,
  .tbl-inact.cards-mob tbody tr > td[data-label="Телефон"]::before{display:none}
}

/* «Борги між локаціями»: «Всього боргів» і «Пар локацій» — в один ряд. Загальний
   мінімум картки calc(50% - 6px) при проміжку 14px не влазив рівно на 2px, і друга
   падала вниз на всю ширину (Ok, 31.08.2026). */
@media(max-width:743px),(max-height:500px){
  .cards.cards-debt > .card{min-width:calc(50% - 7px)}
}

/* Cashflow: «стаття — сума» в один рядок замість картки з двох рядків із підписами.
   Було 89px на статтю і по 2 600px на блок надходжень/витрат (Ok, 31.08.2026). */
@media(max-width:743px),(max-height:500px){
  .tbl-cf.cards-mob tbody tr{display:flex;align-items:baseline;gap:12px;padding:9px 14px}
  .tbl-cf.cards-mob tbody tr > td{display:block;border-top:none;padding:0;text-align:right;
    white-space:nowrap}
  .tbl-cf.cards-mob tbody tr > td:first-child{flex:1;min-width:0;text-align:left;white-space:normal}
  .tbl-cf.cards-mob tbody tr > td::before{display:none}
}

/* Аналітика → Огляд, таблиці-картки на телефоні (Ok, 31.08.2026).
   Комірка в картці — флекс із розкиданням по краях, тож усе, що складається
   з кількох частин (назва + смужка + частка, імʼя + сума), розліталося по кутах.
   Назву локації/майстра робимо шапкою картки, складені значення тримаємо разом. */
@media(max-width:743px),(max-height:500px){
  .tbl-loc.cards-mob td[data-label="Локація"],
  .tbl-loc.cards-mob td[data-label="Майстер"]{display:block;text-align:left;padding:6px 0 8px}
  .tbl-loc.cards-mob td[data-label="Локація"]::before,
  .tbl-loc.cards-mob td[data-label="Майстер"]::before{display:none}
  .tbl-loc.cards-mob td[data-label="Локація"] > div:first-child{font-weight:600}
  /* «Найкращий / Найгірший»: імʼя і сума поруч праворуч, а не по різних краях */
  .tbl-lm.cards-mob td[data-label="Найкращий"],
  .tbl-lm.cards-mob td[data-label="Найгірший"]{justify-content:flex-end;gap:6px}
  .tbl-lm.cards-mob td[data-label="Найкращий"]::before,
  .tbl-lm.cards-mob td[data-label="Найгірший"]::before{margin-right:auto}
}

/* Планування на телефоні — однаково в обох положеннях (Ok, 31.08.2026) */
@media(max-width:743px),(max-height:500px){
  /* Планування (Ok, 31.08.2026): чотири підсумкові картки по дві в ряд, «Разом» під
     таблицею — на всю ширину з підписами, ручка перетягування на телефоні не потрібна
     (пальцем порядок так не зміниш, а цілий рядок картки вона з'їдала). */
  .cards.cards-2v{display:grid;grid-template-columns:1fr 1fr}
  .cards.cards-2v > .card, .cards.cards-2v > .card-wrap{min-width:0}
  .tbl-plan.cards-mob tfoot{display:block}
  .tbl-plan.cards-mob td.pl-total-h{display:block;text-align:left;font-weight:600;padding:6px 0 8px}
  .tbl-plan.cards-mob tbody td:first-child:has([data-drag]){display:none}
  /* прихована комірка лишалась «сусідом», тож «Стаття» отримувала лінію-роздільник
     зверху — над першим рядком картки її бути не має */
  .tbl-plan.cards-mob tbody td:first-child:has([data-drag]) + td{border-top:none}
  /* Назва статті і позначка джерела («пост.», «ЗП %») — поруч праворуч. Комірка
     розкидала їх по краях, і назва зависала посередині (Ok, 31.08.2026). */
  .tbl-plan.cards-mob tbody td:has(> .tag){justify-content:flex-end;gap:8px}
  .tbl-plan.cards-mob tbody td:has(> .tag)::before{margin-right:auto}
}

/* Рейтинг персоналу на телефоні — однаково в обох положеннях (Ok, 31.08.2026) */
@media(max-width:743px),(max-height:500px){
  /* Вкладка «Динаміка»: рядок майстра в один рядок — імʼя ліворуч, виручка й записи
     праворуч через крапку. Було три рядки «підпис — значення» на кожного (131px),
     та ще й числа стояли посередині через десктопну ширину колонки 120px
     (Ok, 31.08.2026). Рядок із графіком (одна комірка) не чіпаємо. */
  .tbl-hist.cards-mob tbody tr:has(> td[data-label="Майстер"]){display:flex;align-items:center;
    gap:10px;padding:10px 14px}
  .tbl-hist.cards-mob tbody tr:has(> td[data-label="Майстер"]) > td{display:block;border-top:none;
    padding:0;width:auto;flex:0 0 auto;text-align:right;white-space:nowrap}
  .tbl-hist.cards-mob tbody tr:has(> td[data-label="Майстер"]) > td[data-label="Майстер"]{flex:1;
    min-width:0;text-align:left;white-space:normal}
  .tbl-hist.cards-mob tbody tr:has(> td[data-label="Майстер"]) > td::before{display:none}
  .tbl-hist.cards-mob tbody tr:has(> td[data-label="Майстер"]) > td:last-child::before{
    display:inline;content:"· ";color:var(--stone);font-weight:400}
  /* Розкрита картка людини: комірка була флексовою з розкиданням по краях, тож
     «1 міс.» лишалось ліворуч, а весь текст тулився праворуч (Ok, 31.08.2026) */
  .tbl-hist.cards-mob tbody tr[data-det] > td{display:block;text-align:left;padding:2px 0;gap:0}
  .tbl-hist.cards-mob tbody tr[data-det] > td::before{display:none}
  /* Дашборд, «Топ-майстрів»: місце й імʼя одним рядком-шапкою, «88%» біля «14/16» */
  .tbl-mst.cards-mob tbody tr{display:flex;flex-wrap:wrap;align-items:center;padding:8px 14px}
  .tbl-mst.cards-mob tbody tr > td{flex:0 0 100%}
  .tbl-mst.cards-mob tbody tr > td[data-label="#"]{flex:0 0 auto;border-top:none;
    padding:6px 10px 6px 0;width:auto}
  .tbl-mst.cards-mob tbody tr > td[data-label="Майстер"]{flex:1;min-width:0;border-top:none;
    justify-content:flex-start;text-align:left;padding:6px 0}
  .tbl-mst.cards-mob td[data-label="#"]::before,
  .tbl-mst.cards-mob td[data-label="Майстер"]::before{display:none}
  .tbl-mst.cards-mob tbody tr > td:has(> small){justify-content:flex-end;gap:6px}
  .tbl-mst.cards-mob tbody tr > td:has(> small)::before{margin-right:auto}
  /* Місце, ім'я і посада — одним рядком-шапкою картки, а не трьома окремими рядками
     «підпис — значення». Стрілка «розгорнути» — у тому ж рядку праворуч. */
  .tbl-rt.cards-mob tbody tr:not(.rt-exp){display:flex;flex-wrap:wrap;align-items:center;padding:8px 14px}
  .tbl-rt.cards-mob tbody tr:not(.rt-exp) > td{flex:0 0 100%;order:2}
  .tbl-rt.cards-mob tbody tr:not(.rt-exp) > td[data-label="Місце"]{flex:0 0 auto;border-top:none;
    padding:6px 10px 6px 0;width:auto;order:0}
  .tbl-rt.cards-mob tbody tr:not(.rt-exp) > td[data-label="Майстер"],
  .tbl-rt.cards-mob tbody tr:not(.rt-exp) > td[data-label="Адміністратор"]{flex:1;min-width:0;border-top:none;
    justify-content:flex-start;text-align:left;padding:6px 0;order:0}
  .tbl-rt.cards-mob td[data-label="Місце"]::before,
  .tbl-rt.cards-mob td[data-label="Майстер"]::before,
  .tbl-rt.cards-mob td[data-label="Адміністратор"]::before{display:none}
  .tbl-rt.cards-mob tbody tr:not(.rt-exp) > td[data-label=""]{order:1;flex:0 0 auto;
    border-top:none;padding:6px 0 6px 8px}
  /* «88%» і «14/16» — поруч праворуч: комірка розкидала їх по краях. */
  .tbl-rt.cards-mob tbody tr:not(.rt-exp) > td:has(> small),
  .rt-bd table.cards-mob td:has(> small){justify-content:flex-end;gap:6px}
  .tbl-rt.cards-mob tbody tr:not(.rt-exp) > td:has(> small)::before,
  .rt-bd table.cards-mob td:has(> small)::before{margin-right:auto}
  /* Розкритий рядок: комірка з деталями була флексом із порожньою сіткою графіка
     ліворуч, і таблиця метрик тулилась до правого краю. */
  .tbl.cards-mob tr.rt-exp{padding-left:12px;padding-right:12px}
  .tbl.cards-mob tr.rt-exp > td{display:block;padding:0;gap:0}
  .tbl.cards-mob tr.rt-exp > td > .rt-exp-grid:empty{display:none}
  .tbl.cards-mob tr.rt-exp .rt-bd{width:100%}
  .tbl.cards-mob tr.rt-exp .rt-bd > table{padding-left:0;padding-right:0}
}

/* Аналітика → Клієнти, верхній блок: у портреті телефона картки ставали по одній на ряд
   (флексовий мінімум «половина мінус 6px» не влазив у проміжок 14px). Ok попросив дві
   в ряд (31.08.2026) — переводимо блок на сітку 2×2. Горизонтальне не чіпаємо. */
@media(max-width:743px) and (orientation:portrait){
  .cards.cards-4{display:grid;grid-template-columns:1fr 1fr}
  .cards.cards-4 > .card{min-width:0}
  /* «Повернення клієнтів»: перші дві картки в ряд, третя («Сер. візитів») на всю
     ширину — інакше вона лишалась сама на пів екрана (Ok, 31.08.2026). */
  .cards.cards-ret{display:grid;grid-template-columns:1fr 1fr}
  .cards.cards-ret > .card{min-width:0}
  .cards.cards-ret > .card:nth-child(3){grid-column:1 / -1}
  /* «Давно не приходили»: чотири пілюлі не влазили в рядок і «Свій» падав окремо.
     Тиснемо бокові поля кнопок 16→8px і проміжок 8→6 — усі чотири стають в один
     рядок (Ok, 31.08.2026). Інші смуги вкладок не чіпаємо. */
  .cli-inact-steps{gap:6px}
  .cli-inact-steps .fin-tab{padding-left:8px;padding-right:8px}
  /* Вкладка «Зриви»: «Втрачено» — третя картка, тож лишалась сама на пів рядка.
     Розтягуємо на всю ширину (Ok, 31.08.2026). */
  .cards.cards-fails > .card:nth-child(3){grid-column:1 / -1}
  /* «Зриви», рядок-картка: стрілочка «розкрити» стояла між підписом і фото майстра
     й читалась як частина підпису. Ставимо її після імені (Ok, 31.08.2026).
     Порядком у флексі, щоб не чіпати десктопну таблицю. */
  .fx-name .fx-chev{order:2}
  /* Розкритий список зривів: він лежав у картці-рядку з полями 14px, та ще й порожній
     підпис комірки додавав 14px проміжку — таблиця починалась аж на 43px від краю
     екрана. Тиснемо поля до 4px і прибираємо проміжок (Ok, 31.08.2026). */
  /* Просвіт від краю картки майстра до вкладеного списку — однаковий з усіх боків:
     зверху виходило 13px, з боків 5px, і рамка виглядала перекошеною (Ok, 31.08.2026). */
  .tbl.cards-mob tr.fx-det{padding-left:12px;padding-right:12px}
  .tbl.cards-mob tr.fx-det > td{gap:0}
  /* Всередині ще два шари полів: сама вкладена таблиця (16px) і кожна її картка-рядок
     (14px). Текст починався аж на 50px від краю — тиснемо до 34px: прибираємо поля
     таблиці, полям картки повертаємо звичні 14px (Ok, 31.08.2026, «на 4 пікселі назад»). */
  .fx-det .fx-inner{padding-left:0;padding-right:0}
  .fx-det .fx-inner > tbody > tr{padding-left:14px;padding-right:14px}
}

/* Календар періоду в горизонтальному телефоні: екран 390px заввишки, а попап 381px —
   швидкі кнопки внизу обрізало. Тиснемо все по вертикалі: кружечки дат 40→28px, менші
   шапка, підписи днів і поля (Ok, 31.08.2026). Портрет і планшет не чіпаємо. */
@media(max-height:500px) and (orientation:landscape){
  /* Ширший на 60px — по горизонталі місця вдосталь, зате всі п'ять швидких кнопок
     стають в один рядок замість двох (ще −25px висоти). */
  .dr-pop{padding:10px;width:min(360px,calc(100vw - 20px))}
  .dr-pop .dr-d{height:28px}
  .dr-head{margin-bottom:4px;font-size:13px}
  .dr-head .dr-nav{width:26px;height:26px}
  .dr-dow{margin-bottom:2px}
  .dr-dow span{font-size:12px}
  .dr-presets{margin-top:6px;padding-top:6px}
  .dr-presets button{padding:4px 6px;font-size:13px}
}

/* Налаштування: 2-колонкові інлайн-сітки (нагадування/логотипи/соцмережі) → 1 стовпчик на телефоні (Ok, 14.07.2026) */
@media(max-width:600px){ .set-grid2{grid-template-columns:1fr !important} }

/* ==================== Мікро-анімації: стримано, ease-out, поважає reduce-motion (Ok, 14.07.2026) ==================== */
@keyframes ozFade{from{opacity:0}to{opacity:1}}
@keyframes ozModalIn{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ozRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Попапи нижньої панелі календаря «виростають» із плашки (виїзд угору + масштаб від низу).
   Використовуємо незалежні translate/scale, щоб не перебити transform:translateX(-50%) у дзвоника. */
@keyframes calEmerge{from{opacity:0;translate:0 20px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
/* Нижні аркуші (Продаж/Запис/Черга) — виїзд знизу вгору (замість центрової ozModalIn) */
@keyframes calSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cal-emerge{animation:calEmerge .22s cubic-bezier(.2,.85,.25,1);transform-origin:bottom center}
@media(prefers-reduced-motion:reduce){.cal-emerge{animation:none}}
/* 1. Відкриття вікон */
.modal-bg{animation:ozFade .15s ease-out}
.modal-bg .modal{animation:ozModalIn .2s cubic-bezier(.2,.8,.2,1)}
/* 3. Перемикання розділів — ніжне проявлення контенту */
#main.view-in{animation:ozFade .16s ease-out}
/* 4. Натиск кнопки — ледь помітне втискання */
.btn:active{transform:scale(.985)}
.oz-trigger:active{transform:scale(.99)}
/* 5. Картки — делікатна поява зі стадійністю. Тільки при вході в розділ (клас anim-cards
   живе ~секунду), інакше вони підстрибували на кожну зміну фільтра (Ok, 20.08.2026) */
.anim-cards .cards > .card{animation:ozRise .3s ease-out both}
.anim-cards .cards > .card:nth-child(2){animation-delay:.04s}
.anim-cards .cards > .card:nth-child(3){animation-delay:.08s}
.anim-cards .cards > .card:nth-child(4){animation-delay:.12s}
.anim-cards .cards > .card:nth-child(5){animation-delay:.16s}
.anim-cards .cards > .card:nth-child(6){animation-delay:.2s}
/* повага до системного «менше руху» */
@media(prefers-reduced-motion:reduce){
  .anim-cards .cards > .card{animation:none}
  #main.view-in{animation:none}
}

/* ---------- Тех.карти: рядок матеріалу у формі ----------
   Чотири контроли в один ряд не влазять — назва матеріалу обрізалась до «Jones …»,
   а в поле кількості не було куди тицьнути (Ok, 28.07.2026). Тому матеріал завжди
   окремим рядком на всю ширину, а під ним кількість + одиниця + видалити. */
/* Рядок матеріалу: три поверхи (матеріал / витрата / перерахунок) — без повітря
   вони злипались в одну кашу (Ok, 21.08.2026) */
.tc-item{border-bottom:1px solid var(--hairline-light);padding-bottom:16px;margin-bottom:18px}
.tc-item:last-of-type{border-bottom:0;padding-bottom:0}
.tc-row{flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:10px}
.tc-row .tc-pw{flex:1 1 100%;min-width:0}
.tc-row .tc-pw select{width:100%}
/* одиниця — вузьким полем: у ній 2–3 літери, а порівну з витратою вона з'їдала
   місце й «витрата» обрізалась (Ok, 21.08.2026) */
.tc-row .tc-qw{flex:1 1 220px;min-width:190px}
.tc-row .tc-uw{flex:0 0 120px;min-width:120px}
.tc-row .tc-uw select{width:100%}
.tc-row .tc-del{flex:0 0 auto}
.tc-item .row-actions{margin-top:2px}
/* між підписом «Матеріали і витрата на один раз» і першим рядком теж потрібне повітря */
#tc-items{margin-top:10px}
/* витрата й перерахунок — з кружечками «−»/«+» замість стрілок (Ok, 21.08.2026) */
.tc-item .qty-step{display:flex;width:100%;align-items:center}
.tc-item .qty-step input{flex:1;width:auto;min-width:0;text-align:center}
.tc-item .qty-step .ai-step-btn{width:48px;height:48px;flex:0 0 48px}
/* «1 балон = 400 мл»: перерахунок під рядком матеріалу */
.tc-conv{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-left:2px;
  color:var(--stone);font-size:13px;flex-wrap:wrap}
.tc-conv > span{flex:0 0 auto;white-space:nowrap}
.tc-conv b{color:var(--body);font-weight:600}
.tc-conv-hint{opacity:.7}
.tc-conv-hint::before{content:"·";margin-right:8px}
/* Обʼєм пакування в картці матеріалу: «1 балон = [400] мл» (Ok, 21.08.2026) */
.pf-size{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-size > span{flex:0 0 auto;white-space:nowrap;color:var(--stone);font-size:13px}
.pf-size input{flex:1 1 140px;width:auto;min-width:120px;text-align:center}
@media(max-width:743px),(max-height:500px){
}

/* ---------- Інвентаризація: широка модалка акту (таблиця на 5 колонок) ---------- */
.modal.modal-wide{width:min(860px,94vw)}
/* Форми з рядками накладної (позиції: товар+ціна+кількість+куди+смітник) — ще ширші:
   на 860px поле товару стискалось до 140px і назви різались (Ok, 20.09.2026) */
.modal.modal-xw{width:min(1040px,94vw)}
.modal-wide table{font-size:14px}
.modal-wide td,.modal-wide th{padding:8px 10px}
@media(max-width:743px),(max-height:500px){
  .modal.modal-wide{width:96vw;padding:20px 14px}
  .modal-wide table{font-size:13px}
  .modal-wide td,.modal-wide th{padding:6px 5px}
  .modal-wide .sc-a{width:56px !important}
}
/* Перерахунок: «За системою» — по лівому краю заголовка (Ok, 20.08.2026).
   Таблиця сама вважає колонку числовою й тисне праворуч, тут це перебиваємо. */
.tbl.sc-tbl th:nth-child(2),.tbl.sc-tbl td:nth-child(2),
.tbl.sc-tbl th:nth-child(3),.tbl.sc-tbl td:nth-child(3){text-align:left}
.tbl.sc-tbl td:nth-child(3) .qty-step{justify-content:flex-start}
/* Перерахунок: «Факт» із кружечками «−»/«+» під висоту поля бланка (Ok, 20.08.2026) */
.qty-step .sc-a{text-align:center}
.qty-step:has(.sc-a){gap:6px}
.qty-step:has(.sc-a) .ai-step-btn{width:34px;height:34px;flex:0 0 34px}
.qty-step:has(.sc-a) .ai-step-btn svg{width:12px;height:12px}

/* ---------- Накладна: рядок позиції (товар / к-сть / ціна / сума) ----------
   Пʼять контролів в один ряд не влазять, тому товар завжди окремим рядком (Ok, 28.07.2026). */
/* Розчерк між позиціями — з повітрям з обох боків, а не впритул (Ok, 21.09.2026) */
.dl-item{border-bottom:1px solid var(--hairline-light);padding-bottom:14px;margin-bottom:14px}
.dl-item:last-of-type{border-bottom:0}
/* Рядок і його половинка — одне ціле: між ними розчерку немає */
.dl-item:has(+ .dl-item.dl-child){border-bottom:0;padding-bottom:0;margin-bottom:6px}
.dl-row{flex-wrap:wrap;align-items:flex-end;gap:8px;margin-bottom:6px}
/* Назва товару найдовша з усіх полів рядка — їй і найбільше місця (Ok, 20.09.2026).
   Ціна навпаки: це 3-4 цифри, широке поле під них було марнуванням ширини. */
.dl-row .dl-pw{flex:1 1 220px;min-width:0}
.dl-row .dl-pw select{width:100%}
/* «Кількість» тримає лічильник фіксованої ширини, ціна забирає решту (Ok, 20.08.2026) */
.dl-row .dl-qw{flex:0 0 auto;min-width:0}
.dl-row .dl-cw{flex:0 1 150px;min-width:120px}
.dl-row .dl-cw input{width:100%}
.dl-row .dl-qw .qty-step{width:184px}
.dl-row .dl-qw .qty-step .ai-step-btn{width:48px;height:48px;flex:0 0 48px}
/* підписи над кожним полем рядка: без них не зрозуміло, де що (Ok, 31.07.2026).
   Підпис має бути і над товаром, і над пігулкою — інакше рядок виглядає рваним (Ok, 19.08.2026) */
.dl-row .dl-kw{flex:0 0 auto}
.dl-lbl{display:block;font-size:12px;color:var(--mute);margin:0 0 4px 14px;line-height:1.2}
.dl-row .dl-kw .dl-lbl{margin-left:4px}
.dl-s{margin-right:auto;font-size:13px}

/* Сегментована пігулка (Склад / Товари) — як перемикач теми, але з підписами (Ok, 28.07.2026).
   Сама капсула описана вище одним правилом .seg — тут лишаються тільки її кнопки. */
.seg-btn{border:none;background:transparent;border-radius:999px;padding:0 13px;height:38px;
  font-family:inherit;font-size:14px;color:var(--stone);cursor:pointer;white-space:nowrap;
  transition:background .18s ease,color .18s ease}
.seg-btn.on{background:var(--canvas-dark);color:var(--on-dark);font-weight:600}
@media (hover:hover){.seg-btn:not(.on):hover{color:var(--ink)}}
/* Видалення позиції — той самий круглий «✗», що в «Що замовити» (.ro-rnd.ro-x):
   Ok показав його як зразок (20.09.2026). Тут лише прописка й вирівнювання. */
.dl-row .dl-xw{flex:0 0 auto;margin-left:auto;display:flex;gap:6px}
.dl-xw .ro-rnd{margin-top:7px}   /* по центру 48px-полів рядка */
.dl-xw .dl-lbl{position:absolute}   /* підпис-заглушка не має ламати flex-рядок кнопок */
.dl-xw{position:relative;padding-top:20px}
/* Рядок-половинка після «Розділити»: той самий товар за тією ж ціною, тому полів
   «Товар» і «Ціна» в ньому не видно. На широких екранах місце під ними ЛИШАЄТЬСЯ
   порожнім (visibility), щоб «Кількість» стояла рівно під «Кількістю», а «Куди»
   під «Куди» батьківського рядка (Ok, 21.09.2026). На телефоні колонки і так у
   стовпчик — там поля просто прибрані. */
@media(min-width:744px){
  .dl-item.dl-child .dl-pw,.dl-item.dl-child .dl-cw{visibility:hidden}
}
@media(max-width:743px),(max-height:500px){
  .dl-item.dl-child .dl-pw,.dl-item.dl-child .dl-cw{display:none}
  .dl-item.dl-child{margin-left:14px;padding-left:10px;border-left:2px solid var(--line)}
}
/* «Розділити» — така сама кругла кнопка, нейтральна; ховер підказує дію, не небезпеку */
.ro-rnd.dl-splitb{background:var(--canvas-light);border-color:var(--hairline-strong)}
@media(hover:hover){.ro-rnd.dl-splitb:hover{border-color:var(--canvas-dark);color:var(--ink)}}
/* На широких екранах рядок НЕ переноситься: пілюля з «Розділити» ширша, і «Куди»
   знову зістрибувало на другий рядок (Ok, 20.09.2026 — уже вдруге за день). Тепер
   замість переносу стискається поле товару: краще коротша назва, ніж рваний рядок.
   Вирівнювання ПО ВЕРХУ: підписи всіх колонок в одну лінію, поля під ними теж —
   інакше колонки з підказками-рядками (бренд/сума) висіли на різних висотах. */
@media(min-width:744px){
  .dl-row{flex-wrap:nowrap;align-items:flex-start}
  .dl-row .dl-pw{flex:1 1 0;min-width:140px}
  .dl-row .dl-cw{flex:0 1 150px;min-width:104px}
  .dl-row .seg-btn{padding:0 11px}
}
@media(max-width:743px),(max-height:500px){
  /* на телефоні товар окремим рядком, пігулка тягнеться, смітник — праворуч від неї */
  .dl-row .dl-pw{flex:1 1 100%}
  .dl-row .dl-qw{flex:1 1 100%}
  .dl-row .dl-qw .qty-step{display:flex;width:100%}
  .dl-row .dl-kw{flex:1 1 0;min-width:0}
  .dl-row .dl-kw .seg{display:flex;justify-content:stretch}
  .dl-row .seg-btn{flex:1 1 0}
}
/* Вертикальний планшет: модалка вужча за 1040px, і всі 5 колонок в один ряд не
   влазять — кнопки вилазили за край (Ok, 21.09.2026). Товар — окремим повним
   рядком, під ним ціна + кількість + «Куди» + кнопки в одну лінію. */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px) and (orientation:portrait){
  .dl-row{flex-wrap:wrap}
  .dl-row .dl-pw{flex:1 1 100%}
  .dl-row .dl-cw{flex:1 1 120px}
  /* половинка після «Розділити»: повний рядок товару тут був би дірою — ховаємо
     зовсім; ціна лишається невидимим плейсхолдером (visibility вище), щоб
     «Кількість» і «Куди» стояли рівно під колонками батьківського рядка */
  .dl-item.dl-child .dl-pw{display:none}
}

/* Локація другим рядком під статтею — за замовчуванням схована, вмикається лише
   у вертикальному планшеті (див. медіа-блок portrait) */
.pl-loc-sub{display:none}
/* Заголовок блока у звіті: розводить «стан зараз» і «рух за період» (Ok, 28.07.2026) */
.rep-head{font-size:13px;font-weight:600;color:var(--stone);text-transform:uppercase;
  letter-spacing:.04em;margin:18px 2px 8px}
.rep-head:first-child{margin-top:2px}
/* Верхній рівень заголовків таблиці — до якого блока належать колонки */
thead tr.th-group th{padding-bottom:2px;font-size:12px;color:var(--stone);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;border-bottom:0}
thead tr.th-group th:not(:empty){border-bottom:1px solid var(--hairline-light)}
/* Шапка на два рівні розповзалась: груповий підпис ламався на два рядки, а «Втрати ₴»
   переносило валюту вниз, тож назви колонок стояли на різних лініях (Ok, 26.08.2026).
   Груповий рядок тримаємо в один, назви колонок вирівнюємо по низу — під межу групи. */
thead tr.th-group th{white-space:nowrap}
/* Підпис останньої групи притиснутий до правого краю таблиці (Ok, 26.08.2026) */
thead tr.th-group th:last-child{text-align:right}
table:has(tr.th-group) thead th{vertical-align:bottom}

/* «Видалити …» текстом замість хрестика — зрозуміліше, ніж значок (Ok, 28.07.2026) */
.row-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap}
.lnk-del{background:none;border:0;padding:2px;font-family:inherit;font-size:13px;
  color:var(--danger);cursor:pointer}
@media (hover:hover){.lnk-del:hover{text-decoration:underline}}
/* нейтральна дія в рядку («Розділити»). Навмисно НЕ бренд-кольором: поруч червоне
   «Видалити», а теракота біля нього читається як така сама небезпечна дія */
.lnk-act{background:none;border:0;padding:2px;font-family:inherit;font-size:13px;
  color:var(--charcoal);cursor:pointer}
@media (hover:hover){.lnk-act:hover{text-decoration:underline}}

/* Зона «кинь сюди накладну». Раніше це була сіра кнопка серед інших і її просто
   не помічали, тому зробили помітною плашкою бренд-кольором (Ok, 31.07.2026) */
.ocr-zone{display:flex;align-items:center;gap:14px;margin-top:10px;padding:14px 16px;
  border:1.5px dashed var(--link);border-radius:var(--r-md,12px);cursor:pointer;
  background:color-mix(in srgb, var(--link) 6%, transparent);
  color:var(--link);transition:background .15s, border-color .15s}
.ocr-zone .ocr-ic{display:flex;flex:0 0 auto}
/* іконка велика, тому лінії тонші за стандартні 1.9 — інакше виглядає важкою (Ok, 19.08.2026) */
.ocr-zone .ocr-ic .mi{width:34px;height:34px;stroke-width:1.4}
.ocr-zone .ocr-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ocr-zone .ocr-txt b{font-size:14px;font-weight:600}
.ocr-zone .ocr-txt small{font-size:12.5px;color:var(--stone);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* перетягують файл над зоною — заливаємо помітніше, щоб було ясно «відпускай тут» */
.ocr-zone.over{border-style:solid;background:color-mix(in srgb, var(--link) 14%, transparent)}
.ocr-zone.busy{cursor:default;opacity:.75}
@media (hover:hover){.ocr-zone:hover{background:color-mix(in srgb, var(--link) 10%, transparent)}}

/* Прайс мережі: картка = послуга + ціна. Ліворуч список майстрів, праворуч велика ціна
   (макет Ok, 28.07.2026) */
.pc{display:flex;align-items:flex-start;gap:24px;background:var(--panel);border-radius:var(--r-md);
  padding:22px 26px;margin-bottom:12px}
/* назва послуги — підзаголовок над її картками */
.pc-h{font-size:20px;font-weight:500;margin:18px 2px 8px;display:flex;align-items:center;gap:8px}
.pc-h:first-child{margin-top:2px}
.pc-m{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;
  font-family:inherit;font-size:14px;color:var(--body);cursor:pointer;text-align:left}
.pc-ava{width:28px;height:28px;flex:0 0 28px;border-radius:50%;object-fit:cover;object-position:center 10%}
.pc-ini{background:var(--panel2);display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--muted)}
/* Заголовок напряму в «Прайсі мережі» (Ok, 11.08.2026) */
.pc-dir{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin:22px 2px 10px;padding-bottom:6px;border-bottom:1px solid var(--hairline-light)}
.pc-dir:first-child{margin-top:4px}

/* Прайс мережі рядками: майстри ліворуч, ціна праворуч — щоб уся мережа
   вміщалась на екран, а не розтягувалась на чотири прокрутки (Ok, 11.08.2026) */
.pcr{display:flex;align-items:center;gap:16px;background:var(--panel);border-radius:var(--r-md);
  padding:10px 16px;margin-bottom:8px;min-height:52px}
.pcr-people{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.pcr-right{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.pcr-price{font-size:22px;font-weight:500;letter-spacing:-0.3px;font-variant-numeric:tabular-nums;
  background:none;border:0;padding:2px 6px;border-radius:8px;color:var(--ink);font-family:inherit;cursor:pointer}
@media (hover:hover){.pcr-price:hover{background:var(--surface-soft)}}
.pcr-note{font-size:13px;color:var(--muted)}
/* Дорожче за каталог — зеленим (більше грошей), дешевше — просто приглушено.
   Раніше було навпаки, і знижка читалась як «добре» (Ok, 11.08.2026) */
.pcr-note.up{color:var(--teal,#2fbf98)}
.pcr-note.down{color:var(--muted)}
.pcr-edit{display:inline-flex;align-items:center;gap:8px}
.pcr-edit input{width:110px;height:36px;font-size:14px}
.pcr-miss{background:none;border:1px dashed var(--line);min-height:40px;padding:8px 16px}
.pcr-miss .pcr-people{gap:6px 14px}
.pcr-miss [data-miss-list]{display:contents}
.pc-m-sm{font-size:13px;color:var(--muted);gap:7px}
.pc-m-sm .pc-ava{width:22px;height:22px;flex:0 0 22px}
.pc-m-sm .pc-ini{font-size:10px}
/* Рядок «Зривів», що розкривається: стрілочка перед фото + вкладена таблиця (Ok, 11.08.2026) */
.fx-name{display:flex;align-items:center;gap:8px}
/* імʼя клієнта всередині рядка, що розкривається: свій клік — відкрити картку */
.fx-cli{cursor:pointer}
@media (hover:hover){.fx-cli:hover{text-decoration:underline}}
.fx-chev{flex:0 0 16px;color:var(--link);transition:transform .15s}
.fx-row{cursor:pointer}
.fx-row.fx-open .fx-chev{transform:rotate(90deg)}
.fx-det > td{padding:0 0 12px !important}
/* Вкладена таблиця сидить в одній комірці зовнішнього рядка. Правило підсвітки
   `tbody tr:hover td` бачить УСІ її комірки як нащадків цього рядка, тому при
   наведенні світилась уся вкладена таблиця. Гасимо протікання й повертаємо
   підсвітку лише тому рядку, під яким справді курсор (Ok, 11.08.2026) */
@media (hover:hover){
  tbody tr.fx-det:hover > td::before, tbody tr.fx-det:hover > td::after{content:none}
  tbody tr.fx-det:hover > td{border-bottom-color:transparent}
  tbody tr.fx-det:hover .fx-inner td::before{content:none}
  tbody tr.fx-det:hover .fx-inner tr:hover td::before{content:"";position:absolute;
    top:4px;bottom:4px;left:0;right:0;background:var(--surface-soft);z-index:-1;pointer-events:none}
}
.fx-det{cursor:default}
/* без власної рамки й фону: це не окрема картка, а продовження рядка (Ok, 11.08.2026) */
.fx-inner{margin:0;border:0;border-radius:0;background:transparent}
.fx-inner th{font-size:12px}
.fx-inner td, .fx-inner th{padding-top:8px;padding-bottom:8px}
/* Вкладена таблиця лежить усередині .tbl-num, і його правила (усе праворуч,
   перша колонка 60%) дістають і її. Перебиваємо через .fx-det (Ok, 11.08.2026) */
.fx-det table.fx-inner th, .fx-det table.fx-inner td{text-align:left}
.fx-det table.fx-inner th.num, .fx-det table.fx-inner td.num{text-align:right}
.fx-det table.fx-inner th:first-child, .fx-det table.fx-inner td:first-child{width:110px;white-space:nowrap}
/* короткий варіант (дата / що сталось / причина): без фіксованих ширин «Що сталось»
   забирає все вільне місце і відкидає «Причину» до правого краю (Ok, 11.08.2026) */
.fx-det table.fx-inner-3{table-layout:fixed}
.fx-det table.fx-inner-3 th:nth-child(2), .fx-det table.fx-inner-3 td:nth-child(2){width:150px}
/* пояснення до блоку живе під кружечком «і» в заголовку, а не текстом під таблицею.
   Заголовок — flex із gap:8px, тому власний margin іконки гасимо в мінус,
   інакше вона відлітає від назви на 16px (Ok, 11.08.2026) */
.rd-block-h > .info-dot{margin-left:-4px;vertical-align:baseline}
/* уточнення в тому ж рядку: телефон після імені, причина після статусу.
   Другим рядком воно робило блок у півтора раза вищим (Ok, 11.08.2026) */
.fx-sub{font-size:12.5px;color:var(--muted);margin-left:6px}
/* той самий підпис, але другим рядком — у списку клієнтів так читається краще */
.fx-under{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
@media(max-width:743px),(max-height:500px){
  .pcr{flex-direction:column;align-items:stretch;gap:10px}
  .pcr-right{justify-content:space-between}}
/* розмір і накреслення — як у заголовка сторінки (Ok, 28.07.2026) */
.pc-price{font-size:36px;font-weight:500;line-height:1.15;letter-spacing:-0.6px;font-variant-numeric:tabular-nums}
@media (hover:hover){.pc-m:hover{color:var(--accent)}
  /* Імʼя ще й підкреслюється — видно, що плашка клікабельна (Ok, 13.08.2026) */
  .pc-m:hover span:not(.pc-ava){text-decoration:underline;text-underline-offset:2px}}
@media(max-width:743px),(max-height:500px){
}

/* Картка-запис: тех.карта, постачальник тощо (Ok, 31.07.2026). Та сама мова, що
   в прайсі мережі: панель, ліворуч суть, праворуч велике число. Окремі класи,
   а не .pc — щоб правки прайсу не тягли за собою решту. */
.ec-list{display:flex;flex-direction:column;gap:12px}
.ec{display:flex;align-items:flex-start;gap:24px;background:var(--panel);
  border-radius:var(--r-lg);padding:20px 26px;cursor:pointer;transition:background .15s}
.ec-left{flex:1;min-width:0}
.ec-name{font-size:17px;font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* деталі — пілюлями: склад рецепта чи контакти читаються з одного погляду
   і не розповзаються рядком */
.ec-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ec-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:13px;
  background:var(--panel2);border-radius:var(--r-full);color:var(--body);text-decoration:none}
.ec-chip b{font-weight:600;color:var(--ink)}
/* іконка посилання в пілюлі (сайт постачальника) — дрібна, без правого відступу */
.ec-chip .mi{width:14px;height:14px;margin:0;flex:0 0 14px}
/* «Картка для клієнта»: дві звичайні кнопки в рядок, на вузькому — одна під одною
   (були дрібні ghost-пігулки зі стрілкою ↗) (Ok, 21.08.2026) */
.share-actions{display:flex;gap:10px;flex-wrap:wrap}
.share-actions > .btn{flex:1 1 auto;min-width:170px}
@media(max-width:560px){.share-actions > .btn{flex:1 1 100%}}
/* телефон — теж пілюля, але клікабельна: набрати можна просто зі списку */
@media (hover:hover){a.ec-chip:hover{color:var(--link)}}
.ec-sub{font-size:13px;color:var(--muted);margin-top:10px}
.ec-right{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ec-more{margin-bottom:4px}
.ec-num{font-size:28px;font-weight:500;line-height:1.15;letter-spacing:-0.4px;font-variant-numeric:tabular-nums}
.ec-cap{font-size:12.5px;color:var(--muted)}
@media (hover:hover){.ec:hover{background:var(--panel2)}}
/* Тех.карти — плиткою: 4 в ряд на великому екрані, далі 2, на телефоні 1 (Ok, 21.08.2026).
   Тільки для них: у «Постачальниках» ті самі класи, там список лишається стовпчиком.
   У вузькій картці «ліворуч суть / праворуч число» не тримається — тому вміст
   у стовпчик, число окремим рядком, «···» у верхньому правому куті. */
/* Постачальники — по дві картки в ряд на широкому екрані, на вужчому одна.
   Вміст у стовпчик, борг рядком унизу картки — як у тех.картах (Ok, 21.08.2026) */
.ec-list.ec-cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
@media(max-width:1100px){.ec-list.ec-cols2{grid-template-columns:1fr}}
.ec-list.ec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
@media(max-width:1279px){.ec-list.ec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:743px),(max-height:500px){.ec-list.ec-grid{grid-template-columns:1fr}}
/* картка не клікабельна — редагування лише через «···» (Ok, 21.08.2026) */
.ec-grid .ec,.ec-cols2 .ec{position:relative;flex-direction:column;align-items:flex-start;gap:12px;
  min-width:0;padding:18px 20px}
.ec-grid .ec{cursor:default}
@media (hover:hover){.ec-grid .ec:hover{background:var(--panel)}}
.ec-grid .ec-left,.ec-cols2 .ec-left{width:100%}
.ec-grid .ec-name,.ec-cols2 .ec-name{padding-right:38px}
/* довга назва матеріалу мусить переноситись УСЕРЕДИНІ пілюлі: як flex-рядок вона
   розтягувала пілюлю на всю ширину й відкидала кількість до правого краю */
.ec-grid .ec-chip{display:inline-block;max-width:100%}
/* число з підписом притиснуте до низу — у ряду картки різного зросту, і без цього
   ціни висіли на різній висоті */
.ec-grid .ec-right,.ec-cols2 .ec-right{flex-direction:row;align-items:baseline;gap:8px;width:100%;
  text-align:left;order:2;justify-content:flex-start;flex-wrap:wrap;margin-top:auto}
/* «···» у куті картки — дрібніша за звичайну: у плитці вона єдина дія і не має
   перетягувати увагу з назви (Ok, 21.08.2026) */
/* у постачальника борг стоїть у нижньому ПРАВОМУ куті картки, підпис — під сумою
   (Ok, 21.08.2026) */
.ec-cols2 .ec-right{flex-direction:column;align-items:flex-end;justify-content:flex-end;
  gap:2px;text-align:right}
.ec-grid .ec-more,.ec-cols2 .ec-more{position:absolute;top:14px;right:14px;margin:0;
  width:26px;height:26px;min-width:26px}
.ec-grid .ec-more svg,.ec-cols2 .ec-more svg{width:15px;height:15px}
.ec-grid .ec-num,.ec-cols2 .ec-num{font-size:22px}
@media(max-width:743px),(max-height:500px){
  .ec{flex-direction:column;gap:12px;padding:18px}
  /* на телефоні «···» лишається у верхньому правому куті, а число під назвою */
  .ec-right{flex-direction:row;align-items:baseline;gap:8px;width:100%;text-align:left;
    order:2;justify-content:flex-start}
  /* ⚠️ У «Постачальниках» нижче у файлі стоїть `.ec-cols2 .ec-right{align-items:flex-end}`
     (борг у правому нижньому куті на десктопі) — за вагою воно перебивало правило вище,
     і на телефоні сума з підписом лишались праворуч. Повторюємо з тим самим класом
     (Ok, 01.09.2026) */
  .ec-cols2 .ec-right{flex-direction:row;align-items:baseline;gap:8px;width:100%;
    text-align:left;order:2;justify-content:flex-start;flex-wrap:wrap}
  .ec-more{position:absolute;top:14px;right:14px;margin:0}
  .ec{position:relative}
  /* лишаємо місце під «···», щоб довга назва не залізла під кнопку */
  .ec-name{padding-right:38px}
  .ec-num{font-size:22px}
}

/* Колір-мітка бренду (Ok, 01.08.2026). Палітра фіксована — вибір кружечком,
   без вводу довільного відтінку, інакше довідник стане веселкою */
.br-colors{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0}
.br-c{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:0;padding:0;cursor:pointer;
  position:relative;box-shadow:0 0 0 1px var(--hairline-strong) inset}
/* обраний — у кільці кольору тексту, щоб було видно на будь-якому фоні */
.br-c.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink)}
.br-c-none{background:var(--panel2)}
/* «без кольору» — перекреслений кружечок */
.br-c-none::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:1.5px;
  background:var(--stone);transform:rotate(-45deg)}
/* у каталозі назву бренду фарбуємо його ж кольором */
.br-name{color:var(--bc);font-weight:500}
/* на темному тлі трохи піднімаємо яскравість: темні відтінки інакше зливаються
   з фоном (стосується й кольорів, збережених до зміни палітри) */
html[data-theme="dark"] .br-name{color:color-mix(in srgb, var(--bc) 72%, #ffffff)}

/* Баланс постачальника: взяли / продано / лежить / оплачено / винні (Ok, 28.07.2026) */
.sup-bal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sup-bal-i{background:var(--panel2);border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px}
.sup-bal-i span{font-size:12px}
.sup-bal-i b{font-size:18px;font-variant-numeric:tabular-nums}
.sup-bal-i.big{grid-column:1 / -1}
.sup-bal-i.big b{font-size:24px}
/* На телефоні лишаємо ті самі дві колонки: чотири картки в стовпчик — це 4 екрани
   гортання, а «Винні зараз» і так на всю ширину (Ok, 01.09.2026) */
@media(max-width:743px),(max-height:500px){
  .sup-bal{grid-template-columns:repeat(2,1fr);gap:8px}
  .sup-bal-i{padding:10px 12px}
  .sup-bal-i b{font-size:17px}
}

/* Попередження, що операція зачепить товар під реалізацію (борг виникне одразу) */
.cons-warn{margin-top:10px;padding:10px 12px;border-radius:12px;font-size:13px;
  background:rgba(194,82,56,0.10);color:var(--accent);line-height:1.45}

/* «Що замовити» — список закупівлі по постачальниках (Ok, 30.07.2026) */
/* Поради в рядках таблиць: помаранчева плашка + спливаюче віконце (Ok, 31.07.2026) */
.pr-name{font-weight:500;line-height:1.35}
.pr-sub{font-size:12px;color:var(--mute);margin-top:2px}
.pr-locs{font-size:12.5px;color:var(--mute);line-height:1.5}
.adv-badge{border:0;cursor:pointer;background:var(--link);color:#fff;font:inherit;
  font-size:11.5px;font-weight:600;line-height:1;padding:5px 10px;border-radius:8px;
  white-space:nowrap}
@media (hover:hover){.adv-badge:hover{filter:brightness(1.08)}}
/* поки віконце поради відкрите, плашка притемнена — видно, звідки воно (Ok, 11.08.2026) */
.adv-badge.adv-open{filter:brightness(.88)}
/* Плашка сидить язичком на нижній межі рядка, а сама межа стає помаранчевою —
   так порада помітна, але не займає місця в колонці (Ok, 31.07.2026) */
@media (min-width:744px) and (min-height:501px){
  /* плашка стоїть НА лінії: її низ і є та лінія, тому вигляд «виходить з неї»,
     а не «лінія навпіл». Рядку додаємо запас знизу, щоб язичок не наїжджав
     на бренд під назвою */
  /* запас знизу під язичок плашки дублюємо зверху, щоб текст рядка лишався
     по центру між лініями, а не «висів» угорі */
  /* саме border-bottom, а не тільки колір: в останньому рядку таблиці межу
     знято правилом tr:last-child, і лінія обривалась після першої колонки */
  .tbl tbody tr.has-adv > td{border-bottom:1px solid var(--link);padding-bottom:30px;padding-top:30px}
  /* --adv-x — відступ плашки від початку колонки; лінія стартує на 8px правіше
     (це радіус заокруглення), щоб зліва від плашки не стирчав хвіст */
  .tbl tbody tr.has-adv > td:first-child{position:relative;border-bottom-color:transparent;
    --adv-x:0px}
  /* лінію малюємо в ::after, а не в ::before: ::before зайнятий підсвіткою рядка
     при наведенні. Коли обидва правила ділили один псевдоелемент, у першій комірці
     зникала підсвітка, а сама лінія стрибала під шапку — top:4px від наведення
     плюс bottom:-1px звідси переважували одне одного (Ok, 11.08.2026) */
  .tbl tbody tr.has-adv > td:first-child::after{content:"";position:absolute;
    left:calc(var(--adv-x) + 8px);right:-12px;bottom:-1px;top:auto;height:1px;
    background:var(--link);pointer-events:none}
  /* при наведенні решта комірок отримує сіру лінію-роздільник — тут вона має
     лишатись помаранчевою, інакше праворуч від плашки колір обривається */
  @media (hover:hover){.tbl tbody tr.has-adv:hover > td::after{background:var(--link)}}
  .tbl tbody tr.has-adv > td:first-child .adv-badge{position:absolute;left:var(--adv-x);bottom:-1px;
    z-index:2;border-radius:8px 8px 0 8px}
  /* правий нижній кут не заокруглений, а «витікає» в лінію: увігнута галтель
     малюється радіальним градієнтом у псевдоелементі праворуч від плашки */
  .tbl tbody tr.has-adv > td:first-child .adv-badge::after{content:"";position:absolute;
    right:-8px;bottom:0;width:8px;height:8px;
    background:radial-gradient(circle at 100% 0,transparent 7.5px,var(--link) 8px)}
}
@media (max-width:743px),(max-height:500px){ .adv-badge{display:inline-block;margin-top:6px} }
.adv-pop{position:absolute;z-index:120;width:320px;max-width:calc(100vw - 24px);
  background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(0,0,0,.16);padding:12px 14px}
.adv-item + .adv-item{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.adv-h{font-size:12px;font-weight:600;color:var(--link);margin-bottom:4px}
.adv-t{font-size:13px;line-height:1.5}
.adv-m{font-size:12.5px;color:var(--mute);margin-top:4px}
.adv-do{margin-top:8px}
.ro-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:2px 0 14px;font-size:13px}
.ro-group{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:14px}
.ro-group-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ro-group-h b{font-size:15px}
.ro-group-h .muted{font-size:12px}
.ro-note{font-size:12.5px;color:var(--mute);line-height:1.5;margin-bottom:10px}
.ro-mark{display:inline-block;background:var(--surface-soft);color:var(--mute);
  border-radius:var(--r-full);padding:1px 8px;font-size:11px;vertical-align:middle}
.ro-hint{font-size:12px;color:var(--link);margin-top:3px;line-height:1.4}
.ro-soon{color:var(--danger)}
.ro-mark.ro-paid{background:var(--teal-soft,#e6f6f1);color:var(--teal,#2fbf98)}
/* Статус замовлення: плашка і сума в один рядок, кольори за станом (Ok, 31.07.2026) */
/* Аванс у постачальника — помітна підказка під сумою: людина має її побачити
   до того, як впише число (Ok, 31.07.2026) */
.od-adv{display:flex;gap:10px;align-items:flex-start;margin:-4px 0 4px;
  background:var(--teal-soft);color:var(--teal);border-radius:var(--r-md);
  padding:12px 14px;font-size:13.5px;line-height:1.5}
.od-adv .mi{width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;color:currentColor}
.od-adv b{font-size:16px;color:currentColor}
.ro-st{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ro-st-sum{font-variant-numeric:tabular-nums;white-space:nowrap}
.ro-mark.ro-wait{background:rgba(176,144,0,0.12);color:#b09000}      /* чекає нашої дії */
.ro-mark.ro-draft{background:var(--danger-soft);color:var(--danger)}  /* зібране, але не надіслане */
.ro-mark.ro-part{background:var(--link-soft,rgba(194,82,56,0.12));color:var(--link)}
/* Заявки на сертифікат ідуть по тій самій шкалі, що й статуси записів (Ok, 08.08.2026):
   синій = нова, сірий = чекає свого часу, жовтий = час дзвонити, зелений = видано.
   Жовтий — рівно той самий, що й «Підтверджений» у записах (Ok: не підкручувати). */
.ro-mark.ro-new{background:rgba(73,79,223,0.10);color:var(--primary)}
.ro-mark.ro-due{background:rgba(176,144,0,0.12);color:#b09000}
html[data-theme="dark"] .ro-mark.ro-new{background:rgba(143,149,255,0.16);color:#8f95ff}
html[data-theme="dark"] .ro-mark.ro-due{background:rgba(224,189,79,0.16);color:#e0bd4f}
/* Круглі кнопки замовлення успадковували від .btn.ghost світлу заливку на ховері —
   вона перебивала іконку. Лишаємо фон як є, скасування підсвічуємо червоним
   обідком (Ok, 27.08.2026) */
/* ⚠️ !important обовʼязковий: у темній темі є загальне правило
   `html[data-theme="dark"] .btn:hover{background:#c3c8cd!important}` — саме воно й давало
   світло-сіру заливку, через яку іконка зникала. */
@media(hover:hover){
  .ro-acts .btn.ghost.ic-btn:hover{background:var(--canvas-light)!important;
    border-color:var(--hairline-strong)!important;color:var(--ink)}
  /* селектор навмисно довший за правило вище — інакше воно перебивало б червоний обідок */
  .ro-acts .btn.ghost.ic-btn.ro-cancel:hover{background:var(--canvas-light)!important;
    border-color:var(--danger)!important;color:var(--danger)}
}
.ro-qty{width:104px;text-align:center;font-variant-numeric:tabular-nums}
/* Кількість із кружечками «−» / «+» — той самий лічильник, що в ШІ-календарі
   (.ai-step / .ai-step-btn), тут лише ширина поля (Ok, 20.08.2026) */
.qty-step .ro-qty{width:72px;padding-left:0;padding-right:0;height:36px;min-height:36px}
/* Лічильник у звичайному полі форми: кнопки під висоту поля, число по центру,
   на всю ширину поля (Ok, 21.08.2026) */
.field > .qty-step{display:flex;width:100%;align-items:center;gap:10px}
.field > .qty-step > input{flex:1;width:auto;min-width:0;text-align:center}
.field > .qty-step .ai-step-btn{width:48px;height:48px;flex:0 0 48px}
/* На телефоні «Кількість» стоїть у парі з сусіднім полем, і на лічильник лишалось
   154px: дві кнопки по 48 з'їдали все, поле вводу ставало 42px і цифра губилась
   між кружечками. Віддаємо такому рядку цілий рядок на поле.
   Тільки ВЕРТИКАЛЬНО: лежачи модалка ширша, і обидва поля спокійно стоять поруч
   (Ok, 01.09.2026). */
@media (max-width:743px) and (orientation:portrait){
  .modal .row:has(> .field > .qty-step){flex-wrap:wrap}
  .modal .row:has(> .field > .qty-step) > .field{flex:1 1 100%}
}
/* number-поля загортає в .oz-num (кастомні стрілки) — ширину задаємо обгортці */
.ro-group td .oz-num{width:104px}
.ro-group td .oz-num input[type="number"]{height:40px;padding:0 34px 0 14px}
/* Дописаний вручну рядок: чекбокс і випадайко зліва, круглі кнопки — у колонці
   «Замовити» праворуч від поля кількості (Ok, 31.07.2026) */
.ro-qty-w{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.ro-extra-p{display:flex;align-items:center;gap:8px}
.ro-extra-p .oz-select{flex:1;min-width:0;max-width:340px}
.ro-extra-p .oz-select .oz-trigger{width:100%}
.ro-assign{margin-top:6px}
/* Однакова сітка в усіх таблицях постачальників: без фіксованих колонок кожна
   таблиця міряла себе по власному вмісту, і стовпчики стрибали від блока до
   блока (Ok, 30.07.2026). Набір колонок скрізь однаковий — остання тримає
   кнопки дописаного рядка, «Позиція» забирає решту ширини. */
/* Ці ширини разом займали 590px, а на планшеті таблиця має ~624px — колонці «Позиція»
   не лишалось нічого: назва переносилась по одному слову, рядок ріс до 167px замість 65,
   заголовки «Позиція» і «На полиці» друкувались один на одному. Тому фіксовані ширини
   вмикаємо лише від 1025px, а на планшеті колонки розкладаються по вмісту (Ok, 27.08.2026). */
@media(min-width:1025px) and (min-height:501px){
  .ro-sup table.tbl{table-layout:fixed}
  .ro-sup table.tbl th:nth-child(1),.ro-sup table.tbl td:nth-child(1){width:52px}
  .ro-sup table.tbl th:nth-child(3),.ro-sup table.tbl td:nth-child(3){width:120px}
  .ro-sup table.tbl th:nth-child(4),.ro-sup table.tbl td:nth-child(4){width:120px}
  .ro-sup table.tbl th:nth-child(5),.ro-sup table.tbl td:nth-child(5){width:120px}
  /* остання колонка тримає ще й кнопки дописаного рядка; вміст притиснутий
     праворуч, щоб під ним не лишалось порожньої смуги (Ok, 31.07.2026) */
  .ro-sup table.tbl th:nth-child(6),.ro-sup table.tbl td:nth-child(6){width:178px;text-align:right}
  .ro-sup table.tbl td:nth-child(6) .oz-num{margin-left:auto}
  /* у дописаному рядку поле вужче — поруч стають дві круглі кнопки */
  .ro-sup table.tbl tr.ro-extra td:nth-child(6) .oz-num{width:78px}
  .ro-sup table.tbl tr.ro-extra td:nth-child(6) .ro-qty{width:56px}
}
/* «Замовлення в роботі» на планшеті: пʼять колонок у ~690px тиснули назву постачальника
   в стовпчик по одному слову. Тому рядок ділимо на два яруси — зверху постачальник із
   номером замовлення, знизу «що їде · куди · статус» і кнопки дій (Ok, 27.08.2026). */
@media(min-width:744px) and (min-height:501px) and (max-width:900px){
  table.ro-live thead{display:none}
  table.ro-live,table.ro-live tbody{display:block}
  /* Ярус 1: постачальник із номером. Ярус 2: «що їде · куди · статус».
     Кнопки — праворуч, по центру рядка (Ok, 27.08.2026).
     Другий ярус — звичайний текстовий потік із рядкових комірок: якщо статус довгий
     («Прийнято частково 4 330 ₴»), він переноситься на новий рядок ПІД собою, а не
     зриває кнопки вниз. Місце під кнопки тримає відступ праворуч. */
  table.ro-live tr{display:block;position:relative;padding:12px 250px 12px 14px;
    border-bottom:1px solid var(--line)}
  table.ro-live tbody tr:last-child{border-bottom:none}
  table.ro-live td{padding:0;border:none;text-align:left;white-space:nowrap}
  table.ro-live td:nth-child(1){display:block;margin-bottom:4px}
  table.ro-live td:nth-child(2),table.ro-live td:nth-child(3){display:inline;color:var(--muted)}
  /* статус — окремим рядком під «що їде · куди» (Ok, 27.08.2026) */
  table.ro-live td:nth-child(4){display:block;margin-top:6px}
  table.ro-live td:nth-child(4) > div,table.ro-live td:nth-child(4) .ro-st{
    display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
  /* крапка-розділювач між «що їде» і «куди» */
  table.ro-live td:nth-child(2)::after{content:" · ";color:var(--faint);white-space:pre}
  table.ro-live td:nth-child(5){position:absolute;right:14px;top:50%;
    transform:translateY(-50%);display:block}
  table.ro-live .ro-acts{justify-content:flex-end}
  /* «Що замовити» — той самий підхід (Ok, 27.08.2026): перший ярус — назва позиції з брендом,
     другий — залишок, витрата і на скільки вистачить. Галочка ліворуч, поле кількості
     праворуч; обидва винесені з потоку, тому текст їх не зсуває. */
  .ro-sup table.tbl,.ro-sup table.tbl tbody{display:block}
  .ro-sup table.tbl thead{display:none}
  .ro-sup table.tbl tr{display:block;position:relative;padding:12px 206px 12px 48px;
    border-bottom:1px solid var(--line)}
  .ro-sup table.tbl tbody tr:last-child{border-bottom:none}
  .ro-sup table.tbl td{display:inline;padding:0;border:none;text-align:left;
    white-space:nowrap;width:auto}
  .ro-sup table.tbl td:nth-child(1){position:absolute;left:12px;top:50%;
    transform:translateY(-50%);display:block}
  .ro-sup table.tbl td:nth-child(2){display:block;margin-bottom:4px;white-space:normal;width:auto}
  .ro-sup table.tbl td:nth-child(3),.ro-sup table.tbl td:nth-child(4),
  .ro-sup table.tbl td:nth-child(5){color:var(--muted)}
  /* «+10 в дорозі» лежить окремим блоком усередині комірки залишку — у рядковому
     ярусі він розривав рядок і наступна крапка-розділювач з'їжджала вниз */
  .ro-sup table.tbl td:nth-child(3) > div{display:inline;margin-left:4px}
  .ro-sup table.tbl td:nth-child(3)::after,.ro-sup table.tbl td:nth-child(4)::after{
    content:" · ";color:var(--faint);white-space:pre}
  .ro-sup table.tbl td:nth-child(6){position:absolute;right:12px;top:50%;
    transform:translateY(-50%);display:block;width:auto}
  /* Дописаний вручну рядок: у ньому праворуч не тільки поле кількості, а ще «✓» і «✗»,
     тож місця треба більше — інакше список позицій заповзає під кнопки (Ok, 27.08.2026) */
  .ro-sup table.tbl tr.ro-extra{padding-right:258px}
  /* У дописаному рядку перший ярус — це список висотою 48px, тож галочку і кнопки
     тримаємо на його лінії, а цифри лишаються рядком нижче (Ok, 27.08.2026) */
  .ro-sup table.tbl tr.ro-extra td:nth-child(1),
  .ro-sup table.tbl tr.ro-extra td:nth-child(6){top:12px;transform:none;
    height:48px;display:flex;align-items:center}
  .ro-sup table.tbl tr.ro-extra td:nth-child(6) .oz-num{width:78px}
  .ro-sup table.tbl tr.ro-extra td:nth-child(6) .ro-qty{width:56px}
}
/* На планшеті ширин не задаємо, тому браузер сам роздає місце — і «Позиція» отримувала
   найменше можливе (назва в стовпчик по одному слову), хоча праворуч місце було.
   Тому: таблиця на всю ширину, «Позиція» забирає залишок, цифрові колонки не переносяться. */
@media(min-width:744px) and (min-height:501px) and (max-width:1024px){
  .ro-sup table.tbl{width:100%}
  .ro-sup table.tbl th:nth-child(2),.ro-sup table.tbl td:nth-child(2){width:100%}
  .ro-sup table.tbl th:nth-child(3),.ro-sup table.tbl td:nth-child(3),
  .ro-sup table.tbl th:nth-child(4),.ro-sup table.tbl td:nth-child(4),
  .ro-sup table.tbl th:nth-child(5),.ro-sup table.tbl td:nth-child(5){white-space:nowrap}
  .ro-sup table.tbl th:nth-child(6),.ro-sup table.tbl td:nth-child(6){text-align:right}
  .ro-sup table.tbl td:nth-child(6) .oz-num{margin-left:auto}
}
.ro-rnd{width:34px;height:34px;flex:0 0 34px;border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink);padding:0;
  line-height:0}   /* інакше рядок тексту зміщує іконку в колі вниз */
/* margin-right:9px із загального .mi зсував би іконку вліво від центра кола */
.ro-rnd .mi{width:18px;height:18px;display:block;flex:0 0 18px;margin:0;vertical-align:baseline}
.ro-rnd.ro-ok{background:var(--canvas-dark);border-color:var(--canvas-dark);color:var(--on-dark)}
/* «✗» був порожнім обідком — тепер такий самий, як круглі кнопки в «Замовленнях
   у роботі» (.btn.ghost.ic-btn). На всіх екранах (Ok, 27.08.2026) */
.ro-rnd.ro-x{background:var(--canvas-light);border-color:var(--hairline-strong)}
@media(hover:hover){
  .ro-rnd.ro-x:hover{border-color:var(--danger);color:var(--danger)}
  .ro-rnd.ro-ok:hover{background:var(--body);border-color:var(--body)}
}
@media(max-width:743px),(max-height:500px){
  .ro-head{flex-direction:column;align-items:flex-start;gap:8px}
  .ro-group{padding:12px}
  .ro-group-h{flex-wrap:wrap}
  .ro-group td .oz-num{width:100%}
  /* Степер «Замовити» — компактний, притиснутий праворуч: на всю ширину комірки
     поле вводу було невиправдано широким (Ok, 01.09.2026) */
  .ro-group td .qty-step{display:flex;width:auto;margin-left:auto}
  .ro-group td .qty-step .ro-qty{flex:0 0 84px;width:84px;min-width:0}
  .ro-extra-p .oz-select{max-width:none}
  /* на телефоні кількість займає рядок, кнопки стають під нею праворуч */
  .ro-qty-w{flex-wrap:wrap}
  .ro-qty-w .oz-num,.ro-qty-w .qty-step{flex:1 0 100%}
}

/* Рядок позиції в замовленні та прийманні.
   Сітка, а не flex: select і number-поля CRM загортає у власні обгортки
   (.oz-select / .oz-num), тому ширину задаємо колонками, а не класами полів. */
.po-item{display:grid;grid-template-columns:1fr 118px 30px 200px 24px;align-items:center;
  gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
/* рядок ручного замовлення: позиція · кількість з «−»/«+» · прибрати (Ok, 31.07.2026) */
.po-item.no-item{grid-template-columns:1fr auto 30px}
/* кнопки лічильника тут по висоті поля рядка (44px, а не 36px як у таблицях) */
/* ширину задаємо обгортці: поле всередині лишається width:100% (правило .field input
   сильніше за наше) і просто стискається флексом до 72px */
.po-item .qty-step{display:inline-flex;width:176px}
.po-item .qty-step .ai-step-btn{width:44px;height:44px;flex:0 0 44px}
.po-del{background:none;border:none;padding:0;font-size:15px;line-height:1;
  color:var(--stone);cursor:pointer}
.po-item:last-child{border-bottom:none}
.po-name{font-size:14px;line-height:1.35}
.po-item>*{min-width:0}
.po-item input{width:100%;height:44px;text-align:center}
@media(max-width:743px),(max-height:500px){
  .po-item,.po-item:not(:has(.po-l)){grid-template-columns:1fr 30px 24px;row-gap:6px}
  .po-item.no-item{grid-template-columns:1fr 30px}
  .po-item .qty-step{display:flex;width:100%}
  .po-item .qty-step input{flex:1;width:auto;min-width:0}
  .po-name{grid-column:1 / -1}
  /* хрестик має стояти в рядку з кількістю, а точку-отримувача кидаємо під них */
  .po-item>.po-del{order:1}
  .po-item>.oz-select,.po-item>select{grid-column:1 / -1;order:2}
}

/* Накладна з фото: рядки, які ШІ не впізнав, людина обирає сама.
   ⚠️ margin тут перекриває звичайний відступ .dl-item — нижній 14px треба зберегти,
   інакше сусідні підкладки клеяться суцільним полотном (Ok, 21.09.2026) */
.dl-item.dl-unsure{background:var(--surface-soft);border-radius:var(--r-md);
  padding:8px 10px;margin:0 -10px 14px}
/* Рядок «З документа: …» був суцільно сірий 12.5px і губився (Ok, 21.09.2026):
   тепер назва з папірця — темна напівжирна, дія «оберіть позицію» — теракотова */
.dl-raw{font-size:13px;color:var(--mute);line-height:1.5;margin-top:6px}
.dl-raw-name{color:var(--ink);font-weight:600}
.dl-raw-act{color:var(--link);font-weight:600}
.lnk-pick{background:none;border:none;padding:0;font:inherit;font-size:12.5px;
  color:var(--link);text-decoration:underline;cursor:pointer}
.ai-usage{margin-bottom:18px}
.ai-usage-h{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13.5px;margin-bottom:6px}
.ai-bar{height:8px;border-radius:var(--r-full);background:var(--line);overflow:hidden}
.ai-bar-fill{height:100%;min-width:3px;background:var(--canvas-dark);border-radius:var(--r-full)}
@media(max-width:743px),(max-height:500px){}

/* Дії в шапці групи і в рядку замовлення */
.ro-group-act{margin-left:auto;display:flex;gap:8px;align-items:center}
.ro-acts{display:flex;gap:8px;justify-content:flex-end}
@media(max-width:743px),(max-height:500px){
  /* «+ Додати позицію» і «Оформити» — в один рядок, кожна на пів ширини (Ok, 01.09.2026) */
  .ro-group-act{margin-left:0;width:100%;flex-direction:row;align-items:center;gap:8px}
  .ro-group-act > .btn{flex:1 1 0;min-width:0}
  /* у картці замовлення всі кнопки в один рядок: головна тягнеться, круглі поруч
     праворуч (Ok, 01.09.2026). До цього головна займала окремий ряд на всю ширину */
  .ro-acts{flex-wrap:nowrap;width:100%;justify-content:flex-start;align-items:center}
  .ro-acts>.btn:not(.ic-btn){flex:1 1 auto;min-width:0}
}

/* Кнопка тільки з іконкою (без підпису): квадратна, іконка по центру */
.btn.ic-btn{padding:0;width:40px;min-width:40px;display:inline-flex;
  align-items:center;justify-content:center}
.btn.ic-btn .mi{margin:0;vertical-align:middle}
.btn.sm.ic-btn{width:34px;min-width:34px}
@media(max-width:743px),(max-height:500px){
  .ro-group-act .btn.ic-btn{width:100%;min-width:0}
}

/* Готовий документ замовлення: текст + способи надіслати */
.od-text{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  line-height:1.6;resize:vertical}
.od-deal{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 12px;background:var(--surface-soft);border-radius:10px;font-size:13.5px}
.od-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.od-acts .btn{text-decoration:none;display:inline-flex;align-items:center}
.od-acts .btn .mi{width:15px;height:15px;margin-right:7px}
@media(max-width:743px),(max-height:500px){.od-acts .btn{flex:1 1 calc(50% - 8px);justify-content:center}}

/* Історія оплат у картці замовлення */
.op-list{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.op-row{display:flex;gap:12px;align-items:center;padding:3px 0;font-size:13px}
.op-row>span:first-child{flex:0 0 92px}
.op-row>b{margin-left:auto}

/* Приймання: пояснення зверху й шапка над рядками позицій */
.rc-intro{font-size:13px;color:var(--mute);line-height:1.5;margin-bottom:14px}
/* рядок приймання: назва, кількість, одиниця — ціни по позиціях сховані */
.po-item.po-rc{grid-template-columns:1fr 118px 30px}
@media(max-width:743px),(max-height:500px){
  /* назва на всю ширину, під нею кількість */
  .po-item.po-rc{grid-template-columns:1fr 1fr}}
@media(max-width:743px),(max-height:500px){}

/* Позиції у вікні «Оформити»: тільки перегляд (кількість беруть із таблиці) */
.po-item.po-item-ro{grid-template-columns:1fr 90px 200px}
.po-item.po-item-ro .po-qty{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:743px),(max-height:500px){
  .po-item.po-item-ro,.po-item.po-item-ro:not(:has(.po-l)){grid-template-columns:1fr auto}
  .po-item.po-item-ro .oz-select{grid-column:1 / -1}
}

/* Фото майстра в таблиці звіту (Ok, 04.08.2026) */
.mst-ava{width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover;object-position:center 10%;
  border:1px solid var(--hairline-light)}
.mst-ava-ini{display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-soft);color:var(--mute);font-size:13px;font-weight:600}

/* Графік на телефоні: період має вміщатися цілком, тому колонки ділять
   екран порівну — прихований горизонтальний скрол гірший за вузькі стовпчики (Ok, 05.08.2026) */
@media(max-width:743px),(max-height:500px){
  .rd-bars.rd-d1,.rd-bars.rd-d2,.rd-bars.rd-d3,.rd-bars.rd-d4,.rd-bars.rd-d5{
    --rd-col-min:0px;--rd-gap:2px;--rd-pad:1px;--rd-bar-min:3px}
  /* «Динаміка повернення по місяцях»: колонка мінімум 46px + проміжок 12px давали
     336px на шість місяців, і останній місяць їхав у бічний скрол. Тут колонки просто
     ділять наявну ширину (Ok, 31.08.2026). Тільки для цього графіка — на «Тренді
     виручки» 31 колонка, і без мінімальної ширини вони злипаються в кашу. */
  .rd-bars.rd-bars-fit{--rd-col-min:0px;--rd-gap:4px}
}

/* Смужка-попередження під блоком (незакриті записи тощо) — не картка, щоб не
   конкурувати з KPI, але помітна за рахунок лівої лінії (Ok, 05.08.2026) */
.warn-strip{margin:-8px 0 24px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--hairline-light);font-size:13px;line-height:1.5;color:var(--body)}
.warn-strip b{color:var(--ink)}

/* Липке меню розділів «Огляду» (Ok, 05.08.2026): сторінка довга, тому пілюлі
   розділів лишаються під рукою. На телефоні враховуємо висоту верхньої панелі. */
.ov-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:10px 0;background:var(--app-bg)}
/* угорі сторінки ряду немає — пілюлі показуються лише в липкій плашці (Ok, 05.08.2026) */
.ov-nav:not(.stuck){display:none}
.ov-nav::-webkit-scrollbar{display:none}
/* під час скролу пілюлі лежать у плашці — щоб не висіли просто над вмістом */
.ov-nav.stuck{position:fixed;z-index:20;padding:8px;background:var(--surface-card);
  border:1px solid var(--hairline-light);border-radius:var(--r-full);
  box-shadow:0 12px 26px -16px rgba(0,0,0,0.45)}
.ov-nav-slot{margin:0 0 4px}
/* Обгортка пілюль-якорів. За замовчуванням поводиться як раніше — один ряд без
   переносу; переносити їх дозволено лише на планшеті (Ok, 26.08.2026) */
.ov-nav-pills{display:flex;gap:8px;flex-wrap:nowrap;min-width:0;align-items:center}

/* Фільтр усередині липкої плашки: без нижнього відступу й не переносимо в рядок */
.ov-nav > .filters{margin:0;flex:0 0 auto;flex-wrap:nowrap}
.ov-nav > .fpair{flex:0 0 auto;white-space:nowrap}
/* фільтр притиснутий до правого краю плашки, якорі лишаються зліва */
.ov-nav > .filters{margin-left:auto}
/* На телефоні в плашці ховаємо слово «Період» — місце потрібне пілюлям розділів */
@media(max-width:743px),(max-height:500px){
  .ov-nav > .fpair{font-size:0;gap:0}
  .ov-nav > .fpair > *{font-size:16px}
}

/* Поля фільтра всередині липкої плашки — заввишки як пілюлі-якорі (Ok, 05.08.2026).
   Правила діють ТІЛЬКИ в .ov-nav, у решті CRM фільтр лишається як був. */
.ov-nav{align-items:center}
.ov-nav > .filters{align-items:center;gap:6px;font-size:14px}
.ov-nav .dr-trigger,
.ov-nav .oz-trigger.oz-sel-trigger{height:36px;min-height:36px;padding:0 14px;font-size:14px}
.ov-nav .oz-trigger.oz-sel-trigger{min-width:0}
/* Довга назва локації розсувала весь фільтр (377 → 672px на десктопі) і з'їдала місце
   в якорів. Обмежуємо поле й ріжемо назву трикрапкою (Ok, 26.08.2026) */
.ov-nav .filters .oz-select{min-width:0}
.ov-nav .oz-trigger.oz-sel-trigger{max-width:220px}
.ov-nav .oz-trigger .oz-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ov-nav .dr-shift{width:36px;height:36px;min-width:36px;font-size:16px}
/* Поле локації в УСІХ панелях фільтрів (Ok, 26.08.2026). Було: поле росло під текст,
   і з довгою назвою фільтр стрибав у другий рядок. Фіксовану ширину Ok не захотів —
   поле має бути по вмісту й обрізатись лише коли впирається в край екрана.
   Як це працює: пара «Локація + поле» отримує flex-base 0 (`flex:1 1 0`), тож вона
   ніколи не ініціює перенос рядка — просто займає те, що лишилось. Саме поле не
   росте (`flex:0 1 auto`), тому при короткій назві лишається вузьким, а при довгій
   стискається до доступного місця, і назву ріже трикрапка з `.oz-label`.
   ⚠️ Правило прив'язане САМЕ до селекта локації (`select[id$="-loc"]`), а не до будь-якого
   поля у фільтрі. Спершу було ширше — і на вкладці «Динаміка» рейтингу, де в рядку чотири
   пари, усі вони стиснулись до нуля й підписи налізли на поля (Ok показав, 26.08.2026). */
/* Пари стоять по вмісту й ПОРУЧ. Раніше тут було `flex:1 1 0` — вони розтягувались
   на все вільне місце, і «Стаття» відлітала до правого краю, відірвана від «Локації»
   (Ok, 26.08.2026). Тепер ширина по вмісту, а стискаються лише за потреби.
   ⚠️ Спроба вимкнути перенос (`flex-wrap:nowrap`), щоб поля стискались замість переїзду
   вниз, не пройшла: там, де фільтрів чотири («Динаміка» рейтингу), вони або всихали
   до 20–30px, або вилазили за екран на 170px. Тож перенос лишаємо — при браку місця
   поле просто переїжджає вниз, але притиснуте ліворуч, а не відірване. */
.filters .fpair:has(select){flex:0 1 auto;min-width:0}
/* «Стаття» (Планування) — притиснута до правого краю рядка й ширша за решту:
   там довгі назви на кшталт «Комунальні послуги». На десктопі й планшеті горизонтально
   220px, у вертикальній 110px — ширше туди просто не влазить і рядок переносився.
   Що не вміститься — ріже трикрапка, як у локації (Ok, 26.08.2026) */
.filters .fpair:has(select#pl-cat){margin-left:auto}
/* Локація на «Плануванні» — така сама фіксована ширина, як у «Статті». Без неї поле
   росло під довгу назву («КОД: Київська 104(Глобал)» це 257px) і виштовхувало «Статтю»
   в другий рядок (Ok, 26.08.2026) */
.filters .fpair:has(select#pl-cat) .oz-trigger.oz-sel-trigger,
.filters .fpair:has(select#pl-loc) .oz-trigger.oz-sel-trigger{width:220px}
.filters .fpair:has(select) .oz-select{min-width:0;flex:0 1 auto}
/* 110px — межа, нижче якої поле стискати не можна: інакше воно всихало до кружечка
   зі стрілкою (Ok показав на «Плануванні», де довга «Комунальні послуги» забирала
   все місце в локації). Коли навіть по 110px не влазить — рядок переноситься,
   і це краще, ніж зникле поле (Ok, 26.08.2026) */
.filters .fpair:has(select) .oz-trigger.oz-sel-trigger{max-width:100%;min-width:110px}
/* На вужчих моніторах слова «Період»/«Локація» прибираємо — самі поля зрозумілі,
   а пілюлям розділів потрібне місце */
@media(max-width:1500px){
  .ov-nav > .filters{font-size:0;gap:4px}
  .ov-nav > .filters .fpair{font-size:0;gap:0}
  .ov-nav > .filters .fpair > *{font-size:14px}
}

/* Планшет: шість пілюль + фільтр = 962px у смузі 606px, тож усе їхало вбік і
   половина ховалась. Розширюємо плашку від краю меню до краю екрана, фільтр
   лишається праворуч, а якорі переносяться у два ряди (Ok, 26.08.2026).
   ⚠️ Блок стоїть саме ТУТ, після базових правил .ov-nav.stuck: у медіа-блоці на
   початку файлу ті ж властивості перебивались базовими (однакова вага, але вони
   нижче). left/width усе одно з !important — їх JS пише інлайном. */
@media (min-width:744px) and (min-height:501px) and (max-width:1024px){
  .ov-nav.stuck{left:82px !important;width:calc(100vw - 90px) !important;
    overflow-x:visible;padding:8px 10px}
  .ov-nav.stuck .ov-nav-pills{flex-wrap:wrap;row-gap:8px;flex:1 1 auto}
  /* Фільтр теж у два ряди: період зверху, локація під ним.
     Колонкою, а не переносом — так рядки гарантовані й не залежать від ширини.
     align-items:stretch — щоб нижній рядок (локація) був такої ж довжини, як верхній
     із кнопками періоду, а не тулився коротким хвостиком (Ok, 26.08.2026) */
  .ov-nav.stuck > .filters{flex:0 0 auto;margin-left:auto;
    flex-direction:column;align-items:stretch;gap:6px}
  .ov-nav.stuck > .filters > .fpair{width:100%}
  /* Рядок локації не має диктувати ширину всього фільтра: width:0 прибирає його
     з розрахунку максимальної ширини, а min-width:100% розтягує по рядку періоду.
     Без цього довга назва локації розпирала фільтр і трикрапка не спрацьовувала */
  .ov-nav.stuck > .filters > .fpair:last-child{width:0;min-width:100%}
  .ov-nav.stuck .oz-select{flex:1 1 auto;min-width:0}
  /* max-width:none — на планшеті рядок локації навпаки має бути на всю ширину
     рядка з датами, а не обрізаний до 220px як на десктопі */
  .ov-nav.stuck .oz-trigger.oz-sel-trigger{width:100%;max-width:none;justify-content:space-between}
  /* довга назва локації не розпирає рядок, а обрізається трикрапкою */
  .ov-nav.stuck .oz-trigger .oz-label{overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;min-width:0}
  /* пілюлі трохи компактніші — інакше шість штук не лягають рівно у два ряди */
  .ov-nav.stuck .fin-tab{padding:0 12px}
  /* Коли якорі стали у два ряди, плашка вже не пігулка — м'які кути замість
     повного кола. Клас вішає JS, бо CSS не вміє бачити факт переносу. */
  .ov-nav.stuck.rows-2{border-radius:var(--r-lg)}
}

/* Вузький десктоп: пілюлі (561px) + фільтр (377px) не влазять у плашку — на 1025px
   бракує 93px, і останні якорі заповзали ПІД фільтр (Ok, 26.08.2026).
   Тиснемо і пілюлі, і фільтр; перенос — як запобіжник, якщо все одно не вистачить. */
@media (min-width:1025px) and (min-height:501px) and (max-width:1400px){
  .ov-nav.stuck .ov-nav-pills{flex-wrap:wrap;row-gap:6px;gap:6px}
  .ov-nav.stuck .fin-tab{padding:0 12px;font-size:13px}
  .ov-nav.stuck .dr-trigger{padding:0 10px;font-size:13px}
  .ov-nav.stuck .dr-shift{width:32px;height:32px;min-width:32px}
  .ov-nav.stuck .oz-trigger.oz-sel-trigger{max-width:180px;padding:0 10px;font-size:13px}
  .ov-nav.stuck.rows-2{border-radius:var(--r-lg)}
}

/* Оновлення даних без «блимання»: старий вміст лишається на екрані притухлим,
   зверху йде тонка смужка прогресу (Ok, 05.08.2026) */
@keyframes ovBar{0%{transform:translateX(-60%)}100%{transform:translateX(180%)}}
.ov-busy{opacity:.5;pointer-events:none;transition:opacity .12s ease}
.ov-busy::before{content:"";position:fixed;top:0;left:0;width:35%;height:2px;
  background:var(--primary,#C25238);z-index:80;animation:ovBar 900ms ease-in-out infinite}
/* заглушка графіка тримає його висоту — інакше сторінка стрибає при перемальовці */
.empty-state.ov-chart-skel{min-height:330px;display:flex;align-items:center;justify-content:center}

/* Іконка «і» біля заголовка колонки + підказка (Ok, 05.08.2026) */
.info-dot{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:18px;height:18px;margin-left:2px;padding:0;border:none;background:none;
  color:var(--mute);cursor:pointer}
.info-dot svg{width:15px;height:15px}
@media (hover:hover){.info-dot:hover{color:var(--ink)}}
/* Іконка «і» в кутку картки: пояснення ховається під нею, а не займає рядок під числом
   (Ok, 06.08.2026). Картка вже position:relative, тож просто ставимо в кут. */
.card > .info-dot.card-info{position:absolute;top:12px;right:12px;margin:0;z-index:2}
.card.income > .info-dot.card-info,
.card.dark > .info-dot.card-info{color:var(--on-dark);opacity:.75}
@media (hover:hover){
  .card.income > .info-dot.card-info:hover,
  .card.dark > .info-dot.card-info:hover{color:var(--on-dark);opacity:1}
}
/* Щоб довга назва не залазила під іконку */
.card:has(> .info-dot.card-info) > .lbl{padding-right:26px}
.info-pop{position:absolute;z-index:90;max-width:320px;padding:12px 14px;
  background:var(--surface-card);border:1px solid var(--hairline-light);border-radius:var(--r-md);
  box-shadow:0 16px 32px -18px rgba(0,0,0,0.5);font-size:13px;line-height:1.5;color:var(--body)}
/* Кружечки завантаженості локацій — на всю ширину картки; на телефоні звичайна сітка */
@media(max-width:743px),(max-height:500px){
  .ut-donuts.ll-donuts{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important}
}
/* Заголовок колонки з іконкою «і» — тримаємо в один рядок (Ok, 05.08.2026) */
.hdr-info{white-space:nowrap;display:inline-flex;align-items:center}
/* У завантаженості локацій назви довгі («Новий Бульвар 7 (Манікюр)») — даємо перенос,
   інакше вони обрізаються трьома крапками (Ok, 05.08.2026) */
.ll-donuts .ut-dnm{max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}

/* Звітні таблиці з числами: перша колонка — текст, решта праворуч. Так вміст
   останньої колонки стоїть на тому ж відступі від краю, що й перша зліва,
   і праворуч не лишається порожньої зони (Ok, 05.08.2026) */
@media (min-width:744px) and (min-height:501px){
  .tbl-num th:not(:first-child), .tbl-num td:not(:first-child){text-align:right}
  .tbl-num th:first-child, .tbl-num td:first-child{width:60%}
  /* Журнал зарплат: сума праворуч, «Опис» забирає вільне місце (Ok, 07.08.2026) */
  .salj-tbl th:last-child, .salj-tbl td:last-child{text-align:right;white-space:nowrap}
  .salj-tbl th:nth-child(3), .salj-tbl td:nth-child(3){width:45%}
  .salj-tbl th:nth-child(2), .salj-tbl td:nth-child(2){white-space:nowrap}
  /* Історія замовлень: сума праворуч (Ok, 07.08.2026) */
  .ord-hist-tbl th:last-child, .ord-hist-tbl td:last-child{text-align:right;white-space:nowrap}
  /* Заявки на сертифікат: сума праворуч, номер заявки не переноситься */
  .cert-ord-tbl th:last-child, .cert-ord-tbl td:last-child{text-align:right;white-space:nowrap}
  .cert-ord-tbl th:first-child, .cert-ord-tbl td:first-child{white-space:nowrap}
}
/* «Майстри по локаціях»: найгірший притиснутий до правого краю — інакше
   праворуч лишалась порожня третина картки (Ok, 05.08.2026) */
@media (min-width:744px) and (min-height:501px){
  .tbl-lm th:first-child, .tbl-lm td:first-child{width:34%}
  .tbl-lm th:not(:first-child), .tbl-lm td:not(:first-child){text-align:right}
}

/* ---------- Рейтинг: вузька таблиця, решта метрик розкривається під рядком (Ok, 06.08.2026) ---------- */
/* Підсвітку розкритого рядка Ok просив прибрати (26.08.2026) — і з панелі під рядком,
   і з самого рядка (він отримує клас .open від загального правила нижче) */
.rt-exp > td{background:transparent}
.tbl-rt > tbody > tr.open{background:transparent}
.rt-exp-grid{display:flex;flex-wrap:wrap;gap:8px 26px;padding:4px 2px;font-size:13px}
.rt-exp-grid > span{color:var(--muted)}
.rt-exp-grid > span > b{color:var(--ink);margin-left:6px;font-weight:600}
/* Розклад балу тепер прямо в розкритому рядку, окремим блоком на всю ширину (Ok, 15.08.2026) */
.rt-exp-grid > .rt-bd{flex-basis:100%;margin-top:6px}
.rt-bd table.tbl{margin:0;background:transparent;border:0}
.rt-bd table.tbl th, .rt-bd table.tbl td{padding:7px 10px;font-size:13px}
/* Назва метрики ліворуч, усі числа (значення, вага, бали) — праворуч (Ok, 15.08.2026) */
@media (min-width:744px) and (min-height:501px){
  .rt-bd table.tbl th:not(:first-child), .rt-bd table.tbl td:not(:first-child){text-align:right}
}
/* Стрілка розкриття — бренд-теракотою, щоб її було видно як дію (Ok, 26.08.2026).
   SVG малюється stroke:currentColor, тож досить кольору тексту. */
.rt-chev{transition:transform .15s ease;vertical-align:middle;color:var(--link)}
.rt-chev.open{transform:rotate(180deg)}
/* Ширина колонок рейтингу: числа праворуч, стрілка розкриття — вузька колонка.
   Без цього «Рейтинг» розтягувався на чверть таблиці й праворуч зяяла порожнеча (Ok, 06.08.2026).
   Рядок-розкриття (.rt-exp) з цих правил виключений — у нього один td на всю ширину. */
/* Усі селектори — через прямого нащадка (`>`): інакше вони діяли й на таблицю
   «розкладу балу», вкладену в рядок-розкриття, і назви метрик там ставали по центру
   (Ok, 15.08.2026). */
@media (min-width:744px) and (min-height:501px){
  /* «Місце» — і заголовок, і номер по центру колонки (Ok, 15.08.2026) */
  .tbl-rt > thead > tr > th:first-child,
  .tbl-rt > tbody > tr:not(.rt-exp) > td:first-child{width:56px;text-align:center}
  /* Усі колонки, крім місця й імені, — праворуч. Раніше правило ловило лише три
     останні, і при трьох метриках перші з них лишались ліворуч (Ok, 15.08.2026). */
  .tbl-rt > thead > tr > th:not(:first-child):not(:nth-child(2)),
  .tbl-rt > tbody > tr:not(.rt-exp) > td:not(:first-child):not(:nth-child(2)){text-align:right;white-space:nowrap}
  .tbl-rt > thead > tr > th:last-child,
  .tbl-rt > tbody > tr:not(.rt-exp) > td:last-child{width:40px}
}
/* Підказка про формулу живе в шапці таблиці; на телефоні шапка схована,
   тому там показуємо дубль у заголовку секції (Ok, 06.08.2026) */
.rt-hint-mob{display:none;margin-left:6px}
@media (max-width:743px),(max-height:500px){.rt-hint-mob{display:inline-flex;vertical-align:middle}}
/* Планування: картка-пояснення, поки нічого не заведено (Ok, 06.08.2026) */
.pl-start{background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:var(--r-lg);padding:28px}
.pl-start p{max-width:820px}   /* рядок тексту не розтягуємо на весь екран — його стає важко читати */
.pl-start h3{margin:0 0 12px;font-size:20px;font-weight:600}
.pl-start p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--body)}
.pl-start-btns{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 14px}
/* Перемикачі в шапці Планування — однаково вирівняні на всіх ширинах */
.pl-sw{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
@media (max-width:743px),(max-height:500px){.pl-start{padding:20px}.pl-start-btns .btn{flex:1 1 100%}}
/* Планування: перемикачі окремим рядком під фільтрами (Ok, 06.08.2026) */
.pl-switches{display:flex;flex-wrap:wrap;gap:10px 22px;margin:-4px 0 14px 2px}
/* Поле «Оплачено» — без стрілок «більше/менше»: у грошах вони не потрібні
   і тільки крадуть місце в колонці (Ok, 06.08.2026) */
/* Поле суми в рядку таблиці: нижче за звичайний інпут (48px), інакше рядок роздувався
   по висоті. Ширина тут, а не інлайном у розмітці — інакше її не перебити (Ok, 26.08.2026).
   `input[type=number]` у селекторі — щоб перебити базове правило висоти, у нього вага більша. */
.pl-paid-inp{-moz-appearance:textfield;appearance:textfield;width:104px}
input[type="number"].pl-paid-inp{height:36px;padding:0 12px}
.pl-paid-inp::-webkit-outer-spin-button,
.pl-paid-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Підсумковий рядок «Разом»: у border-collapse:separate рамка на <tr> не малюється,
   тому лінію ставимо на самі клітинки (Ok, 06.08.2026) */
.tbl-total > td{font-weight:600;border-top:2px solid var(--hairline-strong)}
/* Іконка «і» у великому заголовку: по центру рядка вона висіла надто високо
   і виглядала дрібною — ставимо на базову лінію тексту й трохи більшою (Ok, 06.08.2026) */
h1 > .info-dot, h2 > .info-dot{vertical-align:baseline;width:22px;height:22px}
h1 > .info-dot svg{width:20px;height:20px}
h2 > .info-dot svg{width:17px;height:17px}
/* У заголовках блоків дашборда поруч із назвою йде дрібний сірий підпис — через нього
   базова лінія «пливе» і крапка «і» стає кривою. Тут центруємо (Ok, 09.08.2026) */
.dash-sec-h .side-h > .info-dot{vertical-align:middle;position:relative;top:-1px}
/* «Топ послуг»: подіум із трьох карток на телефоні — на всю ширину, одна під одною,
   і в портреті, і в горизонтальному (Ok, 30.08.2026). Назва послуги довга, у пів
   екрана вона ламалась на три рядки. Планшет і десктоп не чіпаємо. */
@media(max-width:743px),(max-height:500px){
  .cards.cards-rows.cards-podium{grid-template-columns:1fr}
}
/* Горизонтальний телефон (844px завширшки): у блоці «Фінанси» на Огляді вміщається
   три картки в ряд. По дві вони розтягувались на 401px під одне число, а сторінка
   тягнулась удвічі довше (Ok, 30.08.2026). Портрет і планшет не чіпаємо.
   Перший ряд — «Чистий прибуток» і «Надійшло в каси» по половині ширини, другий —
   решта три. Сітка на 6 колонок: половина = 3, третина = 2. */
@media(max-height:500px) and (orientation:landscape){
  .cards.cards-rows.cards-fin{grid-template-columns:repeat(6,1fr)}
  .cards.cards-rows.cards-fin > .card{grid-column:span 2}
  .cards.cards-rows.cards-fin > .card:nth-child(1),
  .cards.cards-rows.cards-fin > .card:nth-child(2){grid-column:span 3}
  /* «Продажі товарів», «Сертифікати», «Товари на продаж» — по три в ряд. У портреті
     ці картки розтягнуті на всю ширину, тому тут повертаємо їм звичайну одну колонку
     сітки (Ok, 30.08.2026). */
  .cards.cards-rows.cards-goods,
  .cards.cards-rows.cards-cert,
  .cards.cards-rows.cards-stock{grid-template-columns:repeat(3,1fr)}
  .cards.cards-goods > .card:last-child,
  .cards.cards-cert > .card,
  .cards.cards-stock > .card{grid-column:auto}
  /* «Витратка» — як «Фінанси»: «Позицій» і «Вартість запасу» по половині ширини,
     решта три по третині. */
  .cards.cards-rows.cards-cons{grid-template-columns:repeat(6,1fr)}
  .cards.cards-rows.cards-cons > .card{grid-column:span 2}
  .cards.cards-rows.cards-cons > .card:nth-child(1),
  .cards.cards-rows.cards-cons > .card:nth-child(2){grid-column:span 3}
}
/* ---------- Борги між локаціями ---------- */
.tbl-debts td.dbt-money,.tbl-debts td.dbt-goods,.tbl-debts td.dbt-cert{color:var(--muted)}
/* На телефоні п'ять колонок не вміщались і таблиця їхала вбік (Ok, 30.08.2026).
   Розвертаємо рядок у картку: зверху хто кому винен, знизу суми одним рядком.
   Планшет і десктоп лишаються звичайною таблицею. Умова тільки по ширині (без
   max-height:500px, як у решті мобільних правил): у горизонтальному положенні
   телефона 844px усі п'ять колонок влазять — там лишаємо звичайну таблицю. */
@media(max-width:743px){
  .tbl-debts,.tbl-debts tbody{display:block;overflow:visible;white-space:normal}
  .tbl-debts thead{display:none}
  .tbl-debts tr{display:block;padding:12px 2px;border-bottom:1px solid var(--hairline-light)}
  .tbl-debts tbody tr:last-child{border-bottom:none}
  .tbl-debts td{display:inline;padding:0;border:none;text-align:left;font-size:13px;white-space:normal}
  .tbl-debts td.dbt-from{display:block;font-size:14px}
  .tbl-debts td.dbt-to{display:block;color:var(--muted);margin:2px 0 6px}
  .tbl-debts td.dbt-to::before{content:"винна "}
  .tbl-debts td.dbt-sum::before{content:"борг ";color:var(--muted)}
  .tbl-debts td.dbt-money::before{content:" · гроші "}
  .tbl-debts td.dbt-goods::before{content:" · товар "}
  .tbl-debts td.dbt-cert::before{content:" · сертифікати "}
}
/* Горизонтальний телефон: тут звичайна таблиця, але загальне мобільне правило робить
   її блоком, і колонки стискаються по вмісту — суми зупинялись на двох третинах
   екрана (Ok, 31.08.2026). Тягнемо на всю ширину, як у PnL. */
@media(max-height:500px) and (orientation:landscape){
  .tbl-debts{display:table;width:100%;overflow:visible}
  /* Аналітика → Клієнти: верхні чотири картки в один ряд, «Повернення клієнтів» —
     три в ряд. У флексі мінімум «половина мінус 6px» ставив їх по одній на рядок
     (Ok, 31.08.2026). */
  .cards.cards-4{display:grid;grid-template-columns:repeat(4,1fr)}
  .cards.cards-ret{display:grid;grid-template-columns:repeat(3,1fr)}
  .cards.cards-4 > .card,.cards.cards-ret > .card{min-width:0}
  /* Вкладка «Зриви»: три картки в ряд, і той самий рівний просвіт навколо
     розкритого списку, що й у портреті (Ok, 31.08.2026). */
  .cards.cards-rows.cards-fails{grid-template-columns:repeat(3,1fr)}
  .fx-name .fx-chev{order:2}
  /* Звіт по складу (Ok, 31.08.2026): «Виручка + Прибуток» по половині, під ними решта
     три по третині; «Зараз на складі» — по дві в ряд. */
  .cards.cards-stockper{display:grid;grid-template-columns:repeat(6,1fr)}
  .cards.cards-stockper > .card{grid-column:span 2;min-width:0}
  .cards.cards-stockper > .card:nth-child(1),
  .cards.cards-stockper > .card:nth-child(2){grid-column:span 3}
  .cards.cards-2,.cards.cards-conper{display:grid;grid-template-columns:1fr 1fr}
  .cards.cards-2 > .card,.cards.cards-2 > .card-wrap,
  .cards.cards-conper > .card{min-width:0}
  /* Таблицю товарів/витратки лишаємо в мобільному картковому вигляді (Ok, 31.08.2026):
     звичайна таблиця з семи колонок на реальному телефоні стискала назву товару
     в стовпчик по одному слову. Тут — лише назва шапкою картки й підсумок на всю ширину,
     як у вертикальному. */
  table.tbl-stock.cards-mob td[data-label="Товар"]{display:block;text-align:left;padding:6px 0 8px}
  table.tbl-stock.cards-mob td[data-label="Товар"]::before{display:none}
  table.tbl-stock.cards-mob .st-name{font-weight:600}
  table.tbl-stock.cards-mob tfoot{display:block}
  table.tbl-stock.cards-mob td.st-total-h{display:block;text-align:left;font-weight:600;padding:6px 0 8px}
  .tbl.cards-mob tr.fx-det{padding-left:12px;padding-right:12px}
  .tbl.cards-mob tr.fx-det > td{gap:0}
  .fx-det .fx-inner{padding-left:0;padding-right:0}
  .fx-det .fx-inner > tbody > tr{padding-left:14px;padding-right:14px}
}
/* ---------- PnL: розкриття рядків, частка від продажів, підсумки (Ok, 06.08.2026) ---------- */
.pnl-period{font-size:13px;margin:0 0 12px 2px}
.pnl-tbl .pnl-num{text-align:right;white-space:nowrap}
.pnl-tgl{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.pnl-arr{color:var(--link);transition:transform .15s ease;flex:0 0 auto}
.pnl-arr.open{transform:rotate(90deg)}
.pnl-sub{padding-left:22px;color:var(--muted)}
.pnl-tgl.pnl-ind{padding-left:22px}
/* частка від продажів — тьмяним праворуч від суми, щоб не сперечалась із самою сумою */
.pnl-pct{display:inline-block;min-width:52px;text-align:right;color:var(--muted);font-size:12px;font-weight:400}
.pnl-tbl .pnl-sum > td{border-top:2px solid var(--hairline-strong);font-weight:600}
/* Перемикач місяців у PnL має виглядати 1-в-1 як вибір періоду на Cashflow:
   той самий проміжок між стрілками (6px, а не 8), без зайвого відступу зліва
   й без міжлітерного інтервалу — інакше рядок «стрибає» при перемиканні вкладок (Ok, 06.08.2026) */
#pnl-navwrap .sch-nav{gap:6px}
#pnl-navwrap .sch-range{margin-left:0;letter-spacing:normal;font-variant-numeric:tabular-nums}
/* Числові колонки таблиць — праворуч (клас проставляє table() автоматично).
   На телефоні таблиця стає картками, там значення й так притиснуті вправо. (Ok, 06.08.2026) */
@media (min-width:744px) and (min-height:501px){
  .tbl th.num, .tbl td.num{text-align:right}
  /* «Витратка»: собівартість — єдина числова колонка, і праворуч вона висіла з великою
     дірою після назви, а «Залишок» поруч стояв ліворуч. Читається зліва направо (Ok, 04.09.2026) */
  .tbl.pr-exp th.num, .tbl.pr-exp td.num{text-align:left}
}
/* Загальне мобільне правило робить будь-яку таблицю блоком зі скролом убік, і колонки
   всередині стискаються по вмісту — у PnL суми зупинялись на середині екрана, а праворуч
   зяяла порожнеча (Ok, 30.08.2026, горизонтальне положення). Колонок тут лише дві й вони
   влазять завжди, тож повертаємо звичайну таблицю на всю ширину. */
@media(max-width:743px),(max-height:500px){
  .pnl-tbl{display:table;width:100%;white-space:normal;overflow:visible}
}
/* А на вузькому екрані ще й тиснемо бокові відступи комірок: загальні 14px з'їдали
   28px на рядок і відсотки обрізало праворуч. Вертикальні відступи лишаються.
   У горизонтальному положенні місця вистачає — там падінг звичайний. */
@media(max-width:743px){
  .pnl-tbl td{padding-left:2px;padding-right:6px}
  .pnl-tbl td:last-child{padding-right:2px}
  .pnl-sub,.pnl-tgl.pnl-ind{padding-left:14px}
}
/* Лінійні стрілки в кружечках періоду центруються самі — прибираємо текстові метрики */
.dr-shift svg, #pnl-navwrap .sch-ico svg{display:block}
/* Лінійні стрілки в усіх перемикачах періоду — вирівнюємо по центру кнопки */
.sch-ico svg, .dr-nav svg, .oz-dt-nav svg{display:block}
.sch-ico, .dr-nav, .oz-dt-nav{display:inline-flex;align-items:center;justify-content:center}
/* Стрілки-шеврони в кнопках перемикання дня/місяця — по центру кнопки */
.mini-nav svg, .cal-toolbar .btn.sm svg{display:block}

/* Лічильник біля пункту меню (заявки на сертифікат) — Ok, 08.08.2026.
   У розгорнутому меню це цифра справа, у згорнутій смужці — крапка на іконці,
   бо текстові span-и там ховаються. */
#nav a .nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);
  background:#C25238;color:#fff;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}
#nav a.active .nav-badge{background:#C25238;color:#fff}
#nav a .nav-badge.hidden{display:none}
/* Смужка-іконки (середні екрани): текст ховається, тому цифру замінюємо крапкою.
   Крапка — у правому НИЖНЬОМУ куті кружечка (Ok, 28.08.2026). Була згори праворуч
   і з обідком кольору підкладки: на світлому активному кружечку від неї лишалось
   5px теракоти в сірій рамці — око не чіпляло. Тепер чиста крапка 8px без обідка. */
@media (min-width:744px) and (min-height:501px) and (max-width:1280px){
  .sidebar:not(:hover) #nav a{position:relative}
  .sidebar:not(:hover) #nav a .nav-badge{
    position:absolute;right:-4px;top:50%;bottom:auto;transform:translateY(-50%);min-width:8px;width:8px;height:8px;padding:0;
    font-size:0;overflow:hidden;border:none;margin:0;background:#C25238;
    /* підписи в смужці гасяться через opacity/max-width, і крапка гасла разом із ними —
       через це її взагалі не було видно (Ok, 28.08.2026). Повертаємо саме їй */
    opacity:1;max-width:none;flex:0 0 auto;pointer-events:none}
}
/* На тач-планшеті меню згорнуте ЗАВЖДИ (не через :hover), тож там потрібне те саме
   правило з іншим селектором — крапка зникає лише коли меню розкрили тапом. */
@media (min-width:744px) and (min-height:501px) and (max-width:1280px) and (hover:none){
  .sidebar:not(.tap-open) #nav a{position:relative}
  .sidebar:not(.tap-open) #nav a .nav-badge{
    position:absolute;right:-4px;top:50%;bottom:auto;transform:translateY(-50%);min-width:8px;width:8px;height:8px;padding:0;
    font-size:0;overflow:hidden;border:none;margin:0;background:#C25238;
    opacity:1;max-width:none;flex:0 0 auto;pointer-events:none}
}

/* Заявки на сертифікат: теракотова крапка = ще ніхто не відкривав (Ok, 08.08.2026).
   Порожня «розпірка» тримає той самий відступ у вже переглянутих рядках. */
.ro-dot{width:8px;height:8px;border-radius:50%;background:#C25238;flex:0 0 8px}
/* жовта — настав час передзвонити; той самий колір, що й пілюля статусу (Ok, 08.08.2026) */
.ro-dot.warn{background:#b09000}
.ro-dot-sp{width:8px;height:8px;flex:0 0 8px}

/* Другий рядок у комірці таблиці — дрібні цифри під назвою (Ok, 09.08.2026) */
.tbl-sub{display:block;font-size:12px;opacity:.6;font-weight:400;margin-top:2px}

/* Рядок обраної у фільтрі локації в таблиці «Локації» (Ok, 09.08.2026) */
.tbl tbody tr.tr-pick > td{background:var(--surface-soft);font-weight:600}

/* Вимкнена локація в списку налаштувань — приглушена (Ok, 09.08.2026) */
.rd-block.loc-off{opacity:.55}
@media (hover:hover){.rd-block.loc-off:hover{opacity:1}}

/* Висока зона завантаження фото з іконкою (Ok, 09.08.2026) */
.dropzone.dz-tall{flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px 16px;min-height:132px}
/* Зона перетягування як плитка в сітці галереї — того ж розміру, що й превʼю (Ok, 10.08.2026) */
.dropzone.dz-tile{min-height:80px;height:80px;padding:0;gap:0}
.dropzone.dz-tile span{display:none}
.dropzone.dz-tile .dz-ic{width:26px;height:26px}
/* Іконка-підказка в будь-якій зоні перетягування: сірий, приглушений прозорістю (Ok, 10.08.2026) */
.dropzone .dz-ic{width:44px;height:44px;color:var(--muted);opacity:.5;flex:none}
/* Картка локації: ліворуч дані точки, праворуч фото й галерея (Ok, 10.08.2026) */
.loc-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:stretch}
.loc-cols>div:first-child{border-right:1px solid var(--hairline-light);padding-right:18px}
.loc-cols>div:last-child{padding-left:18px}
/* Перетягування карток локацій: тягнемо за шапку (Ok, 10.08.2026) */
.rd-block[data-loc-id] [data-head]{cursor:grab}
.rd-block[data-loc-id].dragging{opacity:.5}
/* Картка локації в режимі перегляду: значення полів просто текстом (Ok, 10.08.2026) */
.lv-val{font-size:15px;line-height:1.5}
/* Роздільник між групами полів усередині колонки */
.fdiv{border-top:1px solid var(--hairline-light);margin:0 0 14px}
/* Графік роботи локації (схема Ok, 10.08.2026): на кожен день — плашка з назвою, під нею
   два поля часу поруч. Робочий день — активна плашка, вихідний — приглушена.
   Кути прямі (не пігулка) і блок вузький — так сім днів не займають пів екрана. */
.loc-hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.lh-card{display:flex;flex-direction:column;gap:4px}
.lh-cd{width:100%;min-height:48px;height:auto;padding:6px 10px;flex-direction:column;gap:0;
  justify-content:center;border-radius:var(--r-sm);font-size:16px;font-weight:500;
  letter-spacing:0;line-height:1.2}
/* дрібний підпис «Робочий / Вихідний» — щоб стан дня читався без здогадок (Ok, 10.08.2026) */
.lh-st{font-size:12px;font-weight:500;opacity:.65}
.lh-ct{display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* поля часу — звичайні поля вводу, як усюди на сайті (Ok, 10.08.2026) */
.loc-hours .oz-time{width:100%}
.loc-hours .oz-trigger{width:100%;padding:0 14px;justify-content:center}
.loc-hours .oz-trigger .oz-label{flex:none}
/* Режим перегляду: плашка не натискається, день ліворуч, час — праворуч у тій самій
   плашці (Ok, 10.08.2026) */
.lh-ro .lh-cd{cursor:default;pointer-events:none;flex-direction:row;justify-content:space-between;
  align-items:center;gap:12px;padding:6px 14px;text-align:left}
.lh-cd-l{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.lh-ro-t{font-size:15px;white-space:nowrap}
.lh-card.off .lh-ro-t{opacity:.7}
/* вихідний день — час пригашений і не редагується */
.lh-card.off .lh-ct{opacity:.45;pointer-events:none}
@media (max-width:743px),(max-height:500px){.loc-hours{grid-template-columns:1fr}}
/* Телефон ЛЕЖАЧИ: по два дні в ряд — ширини вистачає, а висота на вагу золота
   (Ok, 02.09.2026). Правило нижче за файлом, тож перебиває один стовпчик вище. */
@media (max-height:500px) and (orientation:landscape){.loc-hours{grid-template-columns:1fr 1fr}}
@media (max-width:743px),(max-height:500px){
  .loc-cols{grid-template-columns:1fr}
  .loc-cols>div:first-child{border-right:none;padding-right:0;border-bottom:1px solid var(--hairline-light);padding-bottom:4px;margin-bottom:14px}
  .loc-cols>div:last-child{padding-left:0}
}

/* Стан бізнесу: деталізація картками замість голих рядків-заголовків (Ok, 10.08.2026) */
.bs-sec{margin-top:12px;overflow:hidden}
.bs-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none}
.bs-t{font-weight:600}
/* сума праворуч — це головне число рядка, тож звичайним текстом і крупніше,
   а не приглушеною дрібнотою (Ok, 10.08.2026) */
.bs-sub{margin-left:auto;font-size:15px;font-weight:600;color:var(--ink);text-align:right}
/* стрілка перед заголовком (Ok, 10.08.2026) */
.bs-chev{display:inline-flex;flex-shrink:0;color:var(--link);transform:rotate(-90deg);transition:transform .15s ease}
.bs-sec.open .bs-chev{transform:none}
.bs-body{padding:0 16px 14px;border-top:1px solid var(--hairline-light)}
.bs-body>.rd-table-card{margin-top:0}
/* таблиця вже всередині картки — своя рамка й фон їй тут не потрібні,
   інакше виходить коробка в коробці */
.bs-body>.tbl{margin-top:12px;border:0;border-radius:0;background:transparent}
/* Однорядкова таблиця-«стрічка» чисел (напр. «Розподіл за кількістю візитів»):
   на всю ширину, але вміст колонок притиснутий вліво — читається зліва направо,
   а не «числа десь праворуч» (Ok, 04.09.2026).
   Тільки на широкому екрані: на телефоні така таблиця стає картками. */
@media (min-width:744px) and (min-height:501px){
  .tbl.tbl-left th,.tbl.tbl-left td{text-align:left}
}
@media(max-width:743px),(max-height:500px){
  .bs-head{flex-wrap:wrap;gap:6px 10px}
  /* сума йде під заголовок і вирівнюється по ньому, з відступом на ширину стрілки */
  .bs-sub{margin-left:0;order:3;width:100%;text-align:left;padding-left:30px}
}

/* Рядок довідника напрямів. На телефоні слово для місця й лічильник переносяться
   під назву, інакше кнопка «⋯» виїжджала за екран (Ok, 10.08.2026) */
.dir-row{display:flex;align-items:center;gap:10px}
.dir-meta{display:inline-flex;align-items:center;gap:10px;font-size:13px;justify-content:flex-end}
@media(max-width:743px),(max-height:500px){
  .dir-row{flex-wrap:wrap;row-gap:6px}
  /* назва і «⋯» лишаються у першому рядку, слово для місця й лічильник — у другому */
  /* відступ 26px був під ручку перетягування; на телефоні її більше немає
     (Ok, 03.09.2026), тож другий рядок рівняємо по назві */
  .dir-meta{order:3;flex:0 0 100%;justify-content:flex-start;margin-left:0}
}

/* Перемикач «Виконує послуги» в картці посади (Ok, 10.08.2026) */
.sp-mrow{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:0 0 14px}
.sp-mrow>input{margin-top:3px;flex-shrink:0}

/* Попередження про ризикового клієнта у формі запису (Ok, 11.08.2026).
   Теракотове, а не червоне: це підказка адміністратору, а не заборона. */
.bk-risk{display:flex;gap:9px;align-items:flex-start;margin-top:8px;padding:9px 11px;
  border-radius:8px;font-size:13px;line-height:1.45;
  background:color-mix(in srgb, var(--link) 14%, transparent);color:var(--link)}
.bk-risk svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px}
.bk-risk b{color:var(--link)}

/* Позначка «ризиковий» у звіті зривів — той самий сенс, що й попередження у формі запису */
.risk-tag{background:color-mix(in srgb, var(--link) 16%, transparent);color:var(--link);
  font-size:11.5px;font-weight:600;border-radius:6px;padding:2px 7px;white-space:nowrap}

/* Порожній блок у «Загальних» — один рядок замість колонки прочерків (Ok, 11.08.2026) */
.set-empty{display:flex;align-items:center;gap:12px;font-size:13px}
/* Чому це поле важливе — сірим під прочерком, без паніки й червоного */
.lv-why{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}
/* Соцмережа в перегляді: іконка, назва, посилання */
.soc-view-row{display:grid;grid-template-columns:18px 92px 1fr;gap:10px;align-items:center;min-width:0}
.soc-view-ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.soc-view-nm{font-size:13px;color:var(--muted);white-space:nowrap}
.soc-view-lnk{color:var(--link);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Комірка з кнопкою «⋯» у нижньому ряду картки (Локації, Послуги): відділена лінією
   зліва, кнопка по центру комірки (Ok, 11.08.2026) */
.card-more-cell{align-self:stretch;display:flex;align-items:center;justify-content:center;
  padding-left:14px;border-left:1px solid var(--hairline-light);min-width:62px}
/* Без розділової лінії — картки схем ЗП (Ok, 13.08.2026) */
.card-more-cell.no-div{border-left:none;padding-left:0;min-width:0}
/* На телефоні галочки стоять одна під одною, і вертикальна риска зліва від «···»
   висіла збоку на всю їх висоту, а сама кнопка бовталась посередині. Прибираємо
   риску, кнопку ставимо в нижній правий кут блока (Ok, 02.09.2026) */
@media(max-width:743px),(max-height:500px){
  .chk-row .card-more-cell{border-left:none;padding-left:0;min-width:0;align-self:flex-end}
}

/* Вузьке поле (пів ширини) на десктопі, на телефоні — на всю ширину (Ok, 13.08.2026) */
.fld-half{max-width:50%}
@media(max-width:743px),(max-height:500px){}

/* Форма правила бонусів: висота полів звичайна, але вони вужчі — по три в ряд,
   щоб форма не тягнулась донизу (Ok, 14.08.2026). На телефоні — в один стовпчик. */
.bonus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;align-items:start}
.bonus-grid > [data-targetval]{display:contents}
.bonus-grid > .field:empty{display:none}
@media(max-width:743px),(max-height:500px){.bonus-grid{grid-template-columns:1fr}}
/* Шапка картки бонусного правила на телефоні: назва і опис на всю ширину, а сума
   за місяць з перемикачем — окремим рядком під ними. Інакше назва стискалась
   у стовпчик по одному слову (Ok, 14.08.2026). Десктоп не змінюється. */
@media(max-width:743px),(max-height:500px){
  .br-head{flex-wrap:wrap;row-gap:8px}
  /* !important — бо ширина задана інлайном у розмітці картки */
  .br-head > .br-title{flex:1 0 100% !important;order:1}
  .br-head > [data-drag]{order:0}
  .br-head > .br-stat{order:2;flex:1 1 auto}
  .br-head > [data-toggle]{order:3}
  .br-head > [data-chev]{order:4}
}

/* Графік динаміки в історії рейтингу (Ok, 15.08.2026): лінія, місяці по горизонталі.
   Ширина SVG фіксована (80px на місяць) — не розтягується; вузький екран прокручується. */
.hc-wrap{position:relative;padding:6px 0 2px}
/* Розділювач між графіками в картці людини (Ok, 15.08.2026) */
.hs-sep{border-top:1px solid var(--hairline-light);margin:14px 0 0}

/* Легенда кольорів, коли показників кілька (Ok, 15.08.2026) */
.hc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:12px;margin:0 0 4px}
.hc-legend span{display:inline-flex;align-items:center;gap:5px}
.hc-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.hc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Позицію рахує JS і тримає в межах графіка, тож без transform (Ok, 15.08.2026) */
.hc-tip{position:absolute;z-index:5;background:var(--canvas-dark,#171819);
  color:var(--on-dark,#fff);padding:7px 10px;border-radius:8px;font-size:12px;line-height:1.4;
  white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* Рядок метрики рейтингу на телефоні: галочка й назва зверху, поле ваги — під ними
   зліва. Інакше на 390px назва ламалась по складах, а поле з'їдало чверть ширини
   (Ok, 14.08.2026). !important — бо сітка задана інлайном у розмітці. Десктоп як був. */
@media(max-width:743px),(max-height:500px){
  .rt-row{grid-template-columns:24px 1fr !important;row-gap:8px}
  /* поле ваги лежить в обгортці .oz-num (свій спінер) — рухаємо саме її */
  .rt-row > .oz-num, .rt-row > input[type="number"]{grid-column:2;justify-self:start;width:120px}
}
/* Лежачи ширини вистачає — повертаємо поле ваги в праву колонку, як на десктопі
   (Ok, 03.09.2026). Правило нижче за файлом, тож перебиває мобільне вище. */
@media (max-height:500px) and (orientation:landscape){
  .rt-row{grid-template-columns:24px 1fr 96px !important;row-gap:0}
  .rt-row > .oz-num, .rt-row > input[type="number"]{grid-column:3;justify-self:stretch;width:auto}
}

/* Нижній ряд картки послуги: горизонтальна лінія йде на всю ширину картки (разом із
   коміркою «⋯»), тому вона на ряду, а не на блоці галочок (Ok, 11.08.2026) */
.chk-row{display:flex;gap:12px;align-items:center;
  border-top:1px solid var(--hairline-light);padding-top:12px;margin-top:12px}
.svc-chks.flat{border-top:none;padding-top:0;margin-top:0}

/* Галочка вибору клієнта у списку «Давно не приходили» (Ok, 12.08.2026) */
.pick-cell{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pick-cell input{margin:0}

/* ---------- Налаштування → Доступи: таблиця «право × роль» (Ok, 15.08.2026) ---------- */
.perm-tbl{width:100%}   /* картку тягнемо на всю ширину контенту (Ok, 15.08.2026) */
.perm-tbl th:not(:first-child), .perm-tbl td:not(:first-child){text-align:center;width:130px}
.perm-tbl thead th .muted{font-size:11px;font-weight:400;margin-top:2px}
.perm-tbl .perm-name{max-width:420px}
.perm-tbl .perm-name .muted{font-size:12px;margin-top:2px;white-space:normal}
/* «Доступно завжди» — лінійна іконка в стилі решти CRM, не emoji-галочка (Ok, 15.08.2026) */
.perm-tbl .perm-fixed{color:var(--ok,#2fbf98);display:inline-flex;align-items:center}
.perm-tbl .perm-ok{display:block}
.perm-tbl input[type="checkbox"]{cursor:pointer}
.perm-tbl input[type="checkbox"]:disabled{opacity:.55}
@media (max-width:743px),(max-height:500px){
  /* Таблицю лишаємо таблицею — картки тут зламали б сенс «право × роль» */
  .perm-tbl th:not(:first-child), .perm-tbl td:not(:first-child){width:56px}
  .perm-tbl th, .perm-tbl td{padding:10px 4px;font-size:13px}
  .perm-tbl thead th{font-size:12px}
  .perm-tbl .perm-name .muted{display:none}   /* пояснення ховаємо, лишається назва права */
  /* «Власник» на телефоні не влазив і обрізався; він усе одно довідковий — про нього
     сказано в тексті над таблицею (Ok, 15.08.2026). Ховаємо саме цю колонку за класом:
     з появою власних ролей номер колонки «поїхав» і зникала чужа (Ok, 17.08.2026) */
  .perm-tbl .perm-owner{display:none}
  /* Колонки не стискаємо — краще прокрутити вбік, ніж зліпити їх у кашу.
     Назву права лишаємо вужчою, щоб три ролі влазили без прокрутки (Ok, 17.08.2026) */
  .perm-wrap .perm-tbl .perm-name{width:112px;min-width:112px;max-width:112px;white-space:normal}
  /* У шапці лишаємо тільки назву ролі: підпис «нікого · на базі співробітника»
     розтягував колонку так, що ролі виїжджали за екран (Ok, 17.08.2026) */
  .perm-tbl thead th .muted{display:none}
  .perm-tbl thead th{white-space:normal}
}
/* Лежачи таблиця займала лише 377 з 816px — праворуч зяяла порожнеча. Вузькі колонки
   з блоку вище розраховані на 390px, а тут місця вдосталь: ролям даємо 120px, назва
   права забирає решту (Ok, 03.09.2026). Правило нижче за файлом, тож перебиває. */
@media (max-height:500px) and (orientation:landscape){
  .perm-tbl th:not(:first-child), .perm-tbl td:not(:first-child){width:120px;min-width:120px}
  /* ⚠️ саме `width:100%`, а не `auto`: з auto колонка бралась по вмісту (213px) і
     праворуч лишалась порожнеча. 100% у таблиці = «забери все, що лишилось». */
  .perm-wrap .perm-tbl .perm-name{width:100%;min-width:112px;max-width:none}
}
/* Заголовок групи прав у таблиці «Доступи» (Ok, 15.08.2026) */
.perm-tbl .perm-grp > td{background:var(--surface-soft);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);padding:8px 10px}
/* «Ризикові клієнти»: поля гумові — тягнуться по ширині картки й ніколи за неї
   не вилазять (Ok, 16.08.2026). Фіксованих ширин навмисно немає; два поля в ряд
   ділять картку порівну через minmax(0,1fr), а нижче 560px стають одне під одним. */
.rk-body .set-gen{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){ .rk-body .set-gen{grid-template-columns:1fr} }
/* Числові поля лояльності теж не розтягуємо на всю картку (Ok, 16.08.2026) */
.loy-page .field{max-width:240px}
.loy-page .row{gap:14px;flex-wrap:wrap}
/* «Ризикові клієнти» — та сама сітка, що на «Лояльності»: .set-gen дає дві рівні
   колонки й сам складає їх в один стовпчик до 1000px. Тут лишаються тільки
   обмеження полів, щоб числові інпути не розтягувались на всю колонку
   (Ok, 16.08.2026). */

/* Webhooks: шапка хука і його форма — на окремих підкладках із просвітом, як на решті
   налаштувань. Тут не splitCardBodies, бо картка розкривається по кліку (Ok, 17.08.2026). */
.wh-card{background:transparent!important;border:none!important;padding:0!important;
  display:flex;flex-direction:column;gap:6px;border-radius:var(--r-md)}
.wh-card > [data-head],
.wh-card > [data-body]{background:var(--surface-card);border:1px solid var(--hairline-light);
  border-radius:inherit}

/* «Моя зарплата»: розкритий день — список операцій під рядком таблиці (Ok, 24.08.2026) */
.ms-day-details > td{padding:0 !important;background:var(--surface-soft)}
.ms-day-list{padding:4px 0}
.ms-day-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:10px 16px;border-top:1px solid var(--hairline-light)}
.ms-day-row:first-child{border-top:none}
.ms-day-row > div:last-child{white-space:nowrap}
tbody tr.open{background:var(--surface-soft)}

/* Лояльність → «Бали / кешбек»: три поля стоять сіткою, де підписи, поля вводу і
   пояснення — кожне у своєму рядку. Інакше на вужчому вікні довгий підпис
   переносився в два рядки і зсував своє поле нижче за сусідні (Ok, 29.08.2026). */
[data-cfg="points"] > .row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  grid-template-rows:auto auto auto;column-gap:14px;align-items:start}
[data-cfg="points"] > .row > .field{display:contents}
@media(max-width:743px),(max-height:500px){
  [data-cfg="points"] > .row{grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-rows:none;row-gap:10px}
  [data-cfg="points"] > .row > .field{display:flex}
}

/* Телефон, покладений набік: екран низький, але широкий — одна картка в ряд
   розтягувалась на всю ширину і виглядала порожньою (Ok, 30.08.2026).
   Ставимо дві в ряд. Портретний телефон лишається з однією колонкою. */
@media (max-height:500px) and (orientation:landscape){
  .dash-sec .cards:not(.cards-rows){grid-template-columns:1fr 1fr}
}

/* Стеля ширини списків у фільтрі на телефоні: довга назва локації
   («КОД: Київська 104(Глобал)» — 257px) розпирала рядок і виштовхувала сусідні
   поля вниз. Що не вміщається — ріже трикрапка (Ok, 30.08.2026).
   ⚠️ Блок стоїть у самому кінці файлу навмисно: глобальні правила
   `.filters .fpair:has(select) .oz-trigger{max-width:100%}` і фіксовані 220px
   на «Плануванні» лежать нижче основного мобільного блоку і перебивали стелю.
   Період не обмежуємо — дату різати не можна. */
@media(max-width:743px),(max-height:500px){
  .filters .fpair:has(select) .oz-trigger.oz-sel-trigger{max-width:100%}
  .filters .fpair:has(select#pl-cat) .oz-trigger.oz-sel-trigger,
  .filters .fpair:has(select#pl-loc) .oz-trigger.oz-sel-trigger{width:auto;max-width:100%}
}

/* Календар, телефон у ВЕРТИКАЛЬНОМУ: завжди 3 колонки майстрів на екран
   (Ok, 01.10.2026). Колишній блок «4 колонки на широких 428px+» (31.08.2026)
   прибрано — базове правило мобільного блоку вище вже ділить екран на
   min(mcols,3), окремий override не потрібен. */

/* ── Телефон у ГОРИЗОНТАЛЬНОМУ положенні: календар (Ok, 31.08.2026) ──
   Колонки майстрів тримають ту саму ширину, що й у вертикальному (~110–130px),
   тому їх на екран просто влазить більше — стеля росте разом із шириною екрана,
   а не лишається трьома розтягнутими на пів екрана колонками.
   Гілка max-height:500px — це і є «телефон лежить»; вертикальний сюди не потрапляє. */
@media (max-height:500px) and (min-width:600px) and (max-width:759px){
  .cal-cell-col{flex:0 0 calc((100vw - 30px - 36px) / min(var(--cal-mcols, 5), 5));max-width:calc((100vw - 30px - 36px) / min(var(--cal-mcols, 5), 5))}
}
@media (max-height:500px) and (min-width:760px) and (max-width:899px){
  .cal-cell-col{flex:0 0 calc((100vw - 30px - 36px) / min(var(--cal-mcols, 6), 6));max-width:calc((100vw - 30px - 36px) / min(var(--cal-mcols, 6), 6))}
}
@media (max-height:500px) and (min-width:900px){
  .cal-cell-col{flex:0 0 calc((100vw - 30px - 36px) / min(var(--cal-mcols, 7), 7));max-width:calc((100vw - 30px - 36px) / min(var(--cal-mcols, 7), 7))}
}
/* Вибір локації в шапці: у горизонтальному не розтягуємо на весь рядок —
   ширина по вмісту, притиснуто до правого краю (Ok, 31.08.2026). */
@media (max-height:500px){
  .cal-locrow2{flex:0 0 auto;margin-left:auto;max-width:min(360px,50vw)}
  .cal-locrow2 > .oz-select{flex:0 0 auto;max-width:100%}
  .cal-locrow2 .oz-trigger{width:auto;max-width:100%}
}

/* Прізвище співробітника в «Графіках змін» на телефоні — у два рядки замість трикрапки:
   у 108px не вміщались «Дмитро Костерін», «Ярослав Коритко», «Валерія Гаврилюк»
   (Ok, 01.09.2026). Рядок 64px витримує два рядки імені (31px) + години (16px).
   ⚠️ Блок у кінці файлу навмисно: базове правило `.sch-emp-i .nm{white-space:nowrap}`
   лежить нижче основного мобільного блоку і за рівної ваги перебивало його. */
@media(max-width:743px),(max-height:500px){
  .sch-emp-i .nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
}

/* «Графіки змін» на телефоні: увесь тиждень в один екран (Ok, 01.09.2026).
   Клітинки стислі (галочка / «лік.» / тире — як у місячному вигляді), тому день
   вміщається в ~29px. Решту місця віддали під імена: колонка 110px, з них ~64px
   на прізвище у два рядки.
   Рахунок під 390px: 362 видимих − 16 падінг сітки − 110 імена − 28 проміжки = 208
   на 7 днів. Блок у кінці файлу навмисно: базові `.sch-grid`/`.sch-row`/`.sch-head`
   лежать нижче основного мобільного блоку і за рівної ваги перебивали б його. */
@media(max-width:743px),(max-height:500px){
  /* width НЕ чіпаємо: базове `max-content` + `min-width:100%` розтягує підкладку сітки
     під усі колонки. Коли я поставила тут width:100%, тижневий вигляд сів рівно, зате
     в місячному (30 колонок) фон і рамка обривались на ширині екрана, а комірки їхали
     далі по порожньому — саме це Ok і показав на скріні (01.09.2026). */
  .sch-grid{--sch-c1:110px;gap:4px;padding:8px}
  .sch-head,.sch-row{gap:4px}
  .sch-cell{min-height:52px;padding:2px;gap:2px;border-radius:8px}
  .sch-cell .iv,.sch-cell .off{font-size:11px !important;line-height:1.1 !important}
  .sch-cell svg{width:15px;height:15px}
  .sch-hcell .dn{font-size:11px}
  .sch-hcell .dd{font-size:13px}
  .sch-hcell.today .dd{width:22px;height:22px}
  .sch-emp{gap:5px;padding:4px 2px}
  .sch-emp-i .hr{font-size:11px}
  /* аватар 36→28: у колонці 110px під прізвище лишалось 64px, і «Василенко» (71px)
     не влазило навіть другим рядком. З 28px маємо 73px — влазять усі (Ok, 01.09.2026) */
  .sch-av{width:28px;height:28px;font-size:11px}
  /* Рядок «заміни»: хрестик 40×40 стояв у потоці й з'їдав половину колонки — від імені
     лишалось 29px («М…» / «По…»), а пілюля «заміна» вилазила за край (Ok, 01.09.2026).
     Виносимо хрестик з потоку в правий верхній кут рядка, під нього резервуємо 20px
     тільки в рядках заміни. Зона тапу лишається 28px — для рідкої дії достатньо. */
  .sch-emp{position:relative}
  /* Хрестик — унизу праворуч, поруч із пілюлею «заміна»: там єдине вільне місце в
     110-піксельній колонці. Угорі він накривав перший рядок імені (Ok, 01.09.2026). */
  .sch-rmextra{position:absolute;top:auto;bottom:2px;right:0;width:26px;height:26px;
    min-width:26px;min-height:26px;z-index:2}
  .sch-rmextra svg{width:13px;height:13px}
  .sch-covertag{font-size:10px;padding:1px 6px}
}

/* ШІ-календар на телефоні: поле «змін на місяць» і кружечки −/+ дрібніші (Ok, 01.09.2026).
   Були 78×36 і 36×36 — на 390px вони з'їдали половину рядка, і імʼя майстра тулилось
   у вузьку колонку зліва. Блок у кінці файлу: базові розміри лежать нижче мобільного. */
@media(max-width:743px),(max-height:500px){
  .ai-mrow .ai-step{gap:6px}
  .ai-mrow .ai-step-btn{width:28px;height:28px;flex:0 0 28px}
  .ai-mrow .ai-step-btn svg{width:12px;height:12px}
  .ai-mrow input.ai-target{width:52px;height:30px;min-height:30px;font-size:14px;
    padding-left:6px;padding-right:6px}
  .ai-mrow .oz-num,.ai-mrow .ai-target-wrap .oz-num{flex:0 0 52px;width:52px}
  .ai-target-lbl{font-size:11px}
}

/* Шапка кроку 2 у ШІ-календарі: не фільтри, а підпис «локація · місяць» —
   на цьому кроці їх уже не міняють, вони зафіксовані на кроці 1 (Ok, 01.09.2026). */
.ai-head-static{font-size:14px;font-weight:600;color:var(--stone);margin-bottom:14px}

/* Графіки на телефоні: при горизонтальному скролі (місячний вигляд) вмикався режим
   `.sch-min` — колонка імен стискалась зі 110 до 92px, шрифт падав до 11px, а рядок
   із пілюлею «заміна» ховався. Наслідок на телефоні: «Інна Василен…» знову різалось,
   а хрестик заміни, лишившись без свого рядка, лягав просто на прізвище (Ok, 01.09.2026).
   Стиснення колонки — десктопна оптимізація, на телефоні від неї більше шкоди:
   82px, що вона економить, все одно не рятують 30-денний місяць. Вимикаємо. */
@media(max-width:743px),(max-height:500px){
  .sch-grid-wrap.sch-min .sch-grid{--sch-c1:110px}
  .sch-grid-wrap.sch-min .sch-av{width:28px;height:28px}
  .sch-grid-wrap.sch-min .sch-emp{gap:5px;padding:4px 2px}
  .sch-grid-wrap.sch-min .sch-emp-i .nm{font-size:13px;line-height:1.2}
  .sch-grid-wrap.sch-min .sch-emp-i .hr{display:flex}
}

/* Телефон ЛЕЖАЧИ: нижню плашку опускаємо ближче до краю — по висоті там усього ~390px,
   і 14px відступу знизу з'їдають місце в календарі та графіках (Ok, 01.09.2026).
   Гілка max-height:500px = горизонтальне положення; вертикальне не чіпаємо. */
@media (max-height:500px){
  .cal-botbar{left:8px;right:8px;bottom:calc(-2px + env(safe-area-inset-bottom));padding:4px 4px}
  .cal-botbar-spacer{height:calc(76px + env(safe-area-inset-bottom))}
}

/* Верхнє меню на телефоні: бургер на 6px ближче до лівого краю, аватар на 6px до правого —
   так вони стоять симетрично до країв плашки (Ok, 01.09.2026). */
@media(max-width:743px),(max-height:500px){
  .topbar .burger{margin-left:-8px}
  .topbar .side-acct{margin-right:-6px}
}

/* ── «Зарплати» на телефоні (Ok, 01.09.2026) ── */
@media(max-width:743px),(max-height:500px){
  /* «До виплати» на всю ширину, «Готівка» і «Карта» — поруч по половині:
     три картки поспіль з'їдали 390px із 780 і список починався за екраном */
  #sl-box > .cards > .card:first-child{flex:1 1 100%}
  #sl-box > .cards > .card:nth-child(2),
  #sl-box > .cards > .card:nth-child(3){flex:1 1 calc(50% - 7px);min-width:0}
  /* «Відмітити зміну» — у рядку заголовка, компактна (переносить JS) */
  .head.head-hasshift{flex-wrap:nowrap;gap:10px}
  .head.head-hasshift > h1{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* правий край кнопки — рівно під правим краєм аватара у верхньому меню:
     сторінка має падінг 14px, а плашка меню 8px + свій внутрішній, звідси різниця 2px */
  .head.head-hasshift > #sl-shift{flex:0 0 auto;margin-left:auto;margin-right:2px;height:36px;padding:0 14px;font-size:13px}
  /* Картка співробітника: імʼя і посада по лівому краю, «···» у тому ж рядку праворуч */
  table.sal-tbl.cards-mob td[data-label="Співробітник"] > div{width:100%}
  table.sal-tbl.cards-mob td[data-label="Співробітник"] > div > span{display:flex;flex-direction:column;
    align-items:flex-start;text-align:left;min-width:0}
  table.sal-tbl.cards-mob .sal-more-inrow{margin-left:auto;flex:0 0 auto}
}

/* Телефон ЛЕЖАЧИ, «Транзакції»: чотири фільтри + кнопка вивантаження не влазили
   в 639px і кнопка падала на другий рядок. Підтискаємо все потроху — поля пілюль,
   стрілки періоду й проміжки; стрілки лишаються круглими (Ok, 02.09.2026). */
@media (max-height:500px) and (orientation:landscape){
  #c-flt{column-gap:6px}
  #c-flt .oz-trigger{padding:0 8px}
  #c-flt .dr{gap:2px}
  #c-flt .dr-shift{width:32px;min-width:32px;height:32px;font-size:17px}
  #c-flt .dr-trigger{padding:0 8px}
}

/* Телефон ЛЕЖАЧИ, «Клієнти»: пошук стає в рядок фільтрів і коротшим — на всю ширину
   він займав там цілий ряд (Ok, 02.09.2026) */
@media (max-height:500px) and (orientation:landscape){
  #cl-flt .srch{flex:1 1 0;width:auto!important;max-width:186px;min-width:96px;
    margin-left:auto!important}
}

/* Телефон ЛЕЖАЧИ, шапка Налаштувань: кнопка «+ …» висіла посеред рядка, бо три
   елементи розганяв `justify-content:space-between`. Притискаємо її до пошуку —
   заголовок ліворуч, кнопка з пошуком парою праворуч (Ok, 03.09.2026) */
@media (max-height:500px) and (orientation:landscape){
  .head:has(> .set-find) > .btn{margin-left:auto}
  .head:has(> .btn) > .set-find{margin-left:0}
}

/* Телефон СТОЯЧИ: вміст картки-годинника рівняємо по правому краю (Ok, 03.09.2026).
   Лежачи й на десктопі лишається по лівому — там картка вузька колонка. */
@media (max-width:743px) and (orientation:portrait){
  .card.dash-clock-card{align-items:flex-end;text-align:right}
  /* Чотири верхні картки (годинник, Записів, Готівка, Картка) — по дві в ряд
     (Ok, 03.09.2026). Вони лежать у різних контейнерах, тож `display:contents`
     «розчиняє» обгортки і всі чотири стають комірками однієї сітки `.dash-top`.
     Рядок «Зміну не відкрито» лишається на всю ширину під ними. */
  .dash-top{grid-template-columns:1fr 1fr;gap:12px}
  .dash-top .dash-top-right,
  .dash-top .dash-top-right > .cards{display:contents}
  .dash-top .cards > .card{min-width:0;margin:0}
  .dash-top .dash-shift{grid-column:1/-1}
  /* у вдвічі вужчій картці підпис «в касі зараз» не влазив у рядок із сумою і рвався
     навпіл («в касі» / «зараз») — ставимо його окремим рядком під сумою */
  .dash-top .cards > .card .val span{display:block;margin-top:2px}
  /* Рядок «до закриття …» був 147px при 143px вмісту картки: з `white-space:nowrap`
     він вилазив за ліве поле, і відступи ліворуч/праворуч ставали різні (10 проти 17px).
     Дрібніший шрифт + дозвіл на перенос — тепер він завжди в межах полів (Ok, 03.09.2026).
     Саме 11px: при 12px «до закриття 3 год 58 хв» = 144px проти 141px вмісту, і «хв»
     зривалось у другий рядок сиротою. При 11px — 132px, є запас. */
  .card.dash-clock-card .dash-clock-left{font-size:11px;white-space:normal}
}

/* Телефон СТОЯЧИ, «Доступи»: заголовки стовпчиків скорочуємо («Що дозволено» →
   «Дозвіл», «Співробітник» → «Співр.», «Адміністратор» → «Адмін.»), інакше таблиця
   вилазила за екран і її доводилось гортати вбік (Ok, 03.09.2026).
   Скорочення живуть у розмітці як `thAbbr(повне, коротке)`. */
@media (max-width:743px) and (orientation:portrait){
  .perm-tbl .th-full{display:none}
  .perm-tbl .th-abbr{display:inline}
  /* Колонку з назвою права більше не тримаємо на 112px: після скорочення заголовків
     звільнилось місце, і назви на кшталт «Змінює ставки і схеми» сідають в один-два
     рядки замість трьох. Мінімум лишаємо — щоб при купі власних ролей не схлопнулась. */
  .perm-wrap .perm-tbl .perm-name{width:auto;min-width:112px;max-width:none}

  /* Лояльність → «Знижка за кількістю візитів»: рядок рівня не влазив у 328px, і
     підпис «візитів → знижка» ламався на два рядки просто між полями (Ok, 03.09.2026).
     Показуємо коротке «візитів →», а сенс другого поля пояснює «%» після нього. */
  [data-tier] .th-full{display:none}
  [data-tier] .th-abbr{display:inline}
  [data-tier] .tr-inp{width:70px!important;flex:0 0 70px!important}

  /* Лояльність → «Бали / кешбек»: два поля стоять поруч (це дає `.fld-pair`), але
     власні правила блока перебивали subgrid — підпис на два рядки зсував своє поле
     нижче за сусіднє. Піднімаємо вагу селектора, щоб підпис/поле/пояснення лягли
     на спільні рядки (Ok, 03.09.2026). */
  [data-cfg="points"] > .row.fld-pair{display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;column-gap:14px;row-gap:0;align-items:start}
  [data-cfg="points"] > .row.fld-pair > .field{display:grid;grid-template-rows:subgrid;
    grid-row:span 3;gap:6px}
}

/* Телефон СТОЯЧИ, «Клієнти»: пілюлі фільтра розтягуються на всю ширину рядка — рівно
   по краях карток під ними, без порожнього «хвоста» справа (Ok, 02.09.2026).
   Хвіст лишав саме `max-width:max-content` на другій пілюлі — знімаємо, і вона добирає
   решту рядка. Розтягуємо ТІЛЬКИ другу: у неї `flex-basis:0`, тож рядок ніколи не
   переноситься, а перша лишається по своєму тексту й нічого не ріже.
   Лежачи не чіпаємо — там у рядку ще й пошук. */
@media (max-width:743px) and (orientation:portrait){
  #cl-flt > .fpair:nth-child(2){max-width:none}
}

/* Телефон ЛЕЖАЧИ: три картки каси в один ряд — ширини вистачає (Ok, 02.09.2026) */
@media (max-height:500px) and (orientation:landscape){
  .tx-cards > .card,.tx-cards > .card.net{flex:1 1 0;min-width:0}
}

/* Телефон ЛЕЖАЧИ: пошук «Візитів» лишається в рядку фільтрів, але коротким —
   на всю ширину він там займав цілий ряд (Ok, 02.09.2026) */
@media (max-height:500px) and (orientation:landscape){
  /* гумовий: базова ширина 0 і стеля 186px — на вузькій горизонталі (667px) поле
     підтискається й лишається в тому самому рядку, а не зістрибує вниз (Ok, 02.09.2026) */
  #o-flt .srch,#iv-flt .srch{flex:1 1 0;width:auto!important;max-width:186px;min-width:96px;
    margin-left:auto!important}
}

/* Телефон ЛЕЖАЧИ: «До виплати», «Готівка» і «Карта» сідають в один ряд — ширини
   вистачає, а по висоті там усього ~390px і два ряди карток з'їдали пів екрана
   (Ok, 01.09.2026). Вертикальне положення лишається як було: 1 + 2. */
@media (max-height:500px) and (orientation:landscape){
  #sl-box > .cards > .card:first-child,
  #sl-box > .cards > .card:nth-child(2),
  #sl-box > .cards > .card:nth-child(3){flex:1 1 0;min-width:0}
}

/* «Зарплати», рядок локації: пілюля стояла на 10px правіше за вкладки й картки.
   Причина — у `.fpair` лишався текстовий вузол «Локація» (сам підпис на телефоні
   переїхав усередину пілюлі), і він плюс проміжок 8px зсували її вправо.
   Гасимо і проміжок, і ширину того тексту (Ok, 01.09.2026). */
@media(max-width:743px),(max-height:500px){
  #sal-flt .fpair{gap:0;font-size:0}
  #sal-flt .fpair > .oz-select{font-size:14px;margin-left:-2px}   /* 2px, що лишились від текстового вузла */
}

/* ---------- Що лишилось налаштувати: картки вгорі головної власника ---------- */
/* Показуються після майстра й зникають за фактом у базі, а не за натиснуту кнопку
   (Ok, 16.09.2026). Вигляд — той самий, що й у решти карток дашборда: та сама
   підкладка, рамка й радіус, без власної смужки збоку (Ok, 16.09.2026). */
.setup-wrap{margin:0 0 20px}
.setup-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.setup-head b{font-size:15px;color:var(--ink)}
.setup-head .muted{font-size:13px}
/* рівно чотири в ряд на широкому екрані (Ok, 16.09.2026), далі — по дві й по одній */
.setup-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media(max-width:1200px){.setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Смуга «майстер налаштування не пройдено» — над чеклістом (Ok, 16.09.2026) */
.wiz-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px;
  padding:16px 20px;border-radius:var(--r-lg);background:#C25238;color:var(--on-dark)}
.wiz-bar b{display:block;font-size:16px;margin-bottom:2px}
.wiz-bar span{font-size:14px;color:rgba(255,255,255,0.82)}
.wiz-bar .btn{margin-left:auto;background:#fff;border-color:#fff;color:#c25238}
@media (hover:hover){.wiz-bar .btn:hover{background:#fff;border-color:#fff;color:#a8442d}}
@media(max-width:760px){.wiz-bar .btn{margin-left:0;width:100%}}
html[data-theme="dark"] .wiz-bar{--on-dark:#ffffff}
/* Теракотові картки — як «Дохід» на дашборді: білий текст через --on-dark (Ok, 16.09.2026) */
.setup-card,.setup-more{background:#C25238;border-color:#C25238;color:var(--on-dark)}
.setup-card{min-width:0}
.setup-card .tt{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;color:var(--on-dark);margin-bottom:10px}
/* іконка заголовка: біла в напівпрозорому крузі, круг не стискається (Ok, 16.09.2026) */
.setup-ico{flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--on-dark);background:rgba(255,255,255,0.18)}
/* .mi має margin-right:9px і vertical-align:-3px — у крузі це зсувало іконку вліво-вниз */
.setup-ico .mi,.setup-ico svg{width:24px;height:24px;display:block;margin:0;vertical-align:middle;flex:0 0 auto}
.setup-card p{margin:0 0 auto;padding-bottom:18px;font-size:14px;color:rgba(255,255,255,0.82);line-height:1.5}
.setup-btns{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto}
/* кнопка дії — біла пігулка з теракотовим написом, щоб читалась на теракоті */
.setup-btns .btn{background:#fff;border-color:#fff;color:#c25238}
@media (hover:hover){.setup-btns .btn:hover{background:#fff;border-color:#fff;color:#a8442d}}
.setup-btns .lnk{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--on-dark);cursor:pointer}
.setup-btns .lnk.muted{color:rgba(255,255,255,0.6)}
/* «Ще N» — така сама картка, як решта, і стоїть четвертою в ряду (Ok, 16.09.2026) */
.setup-more{display:flex;align-items:center;justify-content:center;text-align:center;
  font:inherit;font-size:20px;font-weight:600;cursor:pointer}
@media (hover:hover){.setup-more:hover{color:var(--on-dark)}}
@media(max-width:760px){.setup-grid{grid-template-columns:1fr;gap:12px}}

/* Попередження про непогашений штраф у вікні оплати візиту (аудит, пункт 11).
   Момент розрахунку — єдиний, коли клієнт стоїть перед адміністратором. */
.pay-fine-warn{display:flex;flex-direction:column;gap:2px;padding:10px 12px;margin-bottom:12px;
  border:1px solid var(--danger);border-radius:8px;background:var(--danger-soft);font-size:13px}
.pay-fine-warn b{color:var(--danger);font-size:14px}

/* Рядок накладної: під кожним полем — те, що до нього стосується (Ok, 20.09.2026).
   Бренд під товаром, сума під ціною. Дії переїхали: розділення — пункт «Обидва»
   в пілюлі «Куди», видалення — смітник на краю рядка (варіант №2). */
.dl-sub{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:var(--mute);
  min-height:15px;text-align:left}
/* Розділ і бренд біля кандидата — дрібним, щоб не сперечались із назвою */
.dl-cand-meta{font-size:12px;color:var(--mute);font-weight:400}