:root{
  --bg:#14171a; --surface:#1c2126; --surface-2:#242a31; --border:#333b44;
  --text:#ece9e2; --muted:#8b95a1; --orange:#ff7a29; --orange-dim:#4a3421;
  --green:#5fd98a; --green-dim:#1e3327; --red:#ff5c5c; --red-dim:#3a2225; --blue:#5b9bd9;
  /* accent-ink — колір ТЕКСТУ поверх суцільної плашки акцентного кольору
     (кнопки, значок ДЛ, іконка сповіщення): на темних темах це темний
     текст (акцент завжди яскравий), на світлій темі — навпаки, білий.
     orange-border/orange-hover/green-border — дрібні відтінки, що раніше
     були захардкоджені окремими hex-значеннями (не змінювались темою) —
     тепер теж змінні, щоб 2-й і 3-й варіант дизайну (нижче) виглядали
     цілісно, а не з "залишками" кольорів першого варіанту. */
  --accent-ink:#14171a; --orange-border:#6b4020; --orange-hover:#ff8c47; --green-border:#2c5a3f;
}
*{box-sizing:border-box;}
/* Запобіжник: якщо десь на сторінці якийсь елемент раптом стане ширшим за
   екран (довгий рядок у таблиці, майбутня зміна тощо) — раніше через це
   ВЕСЬ сайт ставав горизонтально прокрутним і на телефоні виглядав "не на
   всю ширину" (контент притиснутий ліворуч, порожньо праворуч). Кожна
   таблиця й так має власну прокрутку (.table-wrap{overflow:auto}) — їй
   overflow-x:hidden тут не заважає, а сторінку в цілому захищає. */
html,body{overflow-x:hidden;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
/* Адміністративні елементи не блимають співробітнику до завершення /api/me. */
.owner-only{display:none!important;}
html[data-owner="1"] .owner-only{display:flex!important;}
/* Смуга прокрутки в темі — за замовчуванням браузер малює світлий системний
   повзунок, який випадає з дизайну. Firefox — через scrollbar-color/-width,
   Chrome/Edge/Safari — через ::-webkit-scrollbar. Застосовано глобально (і
   для .table-wrap теж, бо там своя горизонтальна прокрутка). */
*{scrollbar-color:var(--border) var(--surface); scrollbar-width:thin;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--surface);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;border:2px solid var(--surface);}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}
.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}
h1,h2,h3,.disp{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.02em;}
/* Відступи зменшено (в т.ч. нижче по всій сторінці) — щоб влазило більше
   без прокрутки, зберігаючи розбірливість. */
.wrap{max-width:1800px;margin:0 auto;padding:16px 20px 40px;}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:12px;}
.top .brand{display:flex;align-items:center;gap:12px;}
.plate{background:var(--orange);color:var(--accent-ink);font-family:'IBM Plex Mono',monospace;font-weight:600;padding:5px 10px;border-radius:4px;font-size:13px;letter-spacing:.05em;}
.top h1{font-size:24px;margin:0;font-weight:600;color:var(--text);}
.top .sub{color:var(--muted);font-size:13px;margin-top:2px;}
.period{color:var(--muted);font-size:13px;text-align:right;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;}
.period select, .period input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 10px;font-family:'IBM Plex Mono',monospace;}
.logout{color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer;background:none;border:none;}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:14px;}
.kpi{background:var(--surface);padding:11px 16px;}
.kpi .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.kpi .val{font-size:20px;font-weight:600;}
.kpi.profit .val{color:var(--green);}
.kpi.warn .val{color:var(--orange);}
/* Панель вкладок і далі прилипає до верху сторінки під час прокрутки — це
   навігація, зручно мати завжди напохваті. Заголовки таблиць більше НЕ
   прилипають (див. .table-wrap) — раніше координація цих двох окремих
   sticky-елементів і була джерелом давнього бага, тепер конфліктувати
   нема з чим. min-height (не height!) — щоб на вузьких екранах, де вкладки
   переносяться на 2 рядки, панель могла вирости, а не обрізати другий рядок. */
.tabs{display:flex;align-items:center;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border);flex-wrap:wrap;position:sticky;top:0;z-index:100;background:var(--bg);min-height:40px;box-sizing:border-box;}
.tab{padding:8px 16px;font-family:'Oswald',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;user-select:none;}
.tab.active{color:var(--orange);border-bottom-color:var(--orange);}
.tab:hover{color:var(--text);}
.panel{display:none;}
.panel.active{display:block;}
.alert{background:linear-gradient(135deg,var(--orange-dim),var(--surface));border:1px solid var(--orange-border);border-left:3px solid var(--orange);border-radius:10px;padding:14px 18px;margin-bottom:16px;}
.alert-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.alert-head .ico{width:26px;height:26px;border-radius:6px;background:var(--orange);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none;}
.alert-head b{font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:.02em;text-transform:uppercase;}
.alert p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;}
.missing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px;}
.missing-item{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:13px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px;}
.card-head{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
.card-head h2{font-size:15px;margin:0;font-weight:500;color:var(--text);}
.card-head .note{font-size:12px;color:var(--muted);}
/* Каскад прибутку — згортається, щоб не займати місце на екрані, коли він
   зараз не потрібен. Стан (згорнуто/розгорнуто) запам'ятовується між
   заходами (localStorage), щоб не доводилось згортати заново щоразу. */
#waterfallCard.collapsed .waterfall-row{display:none;}
#waterfallCard.collapsed .card-head{border-bottom:none;}
/* РАНІШЕ таблиці мали власну обмежену висотою прокрутну "коробку"
   (max-height + прилипаючий заголовок top:0 всередині неї) — окремий
   скрол таблиці ПОВЕРХ звичайного скролу сторінки. За проханням прибрано:
   тепер таблиця просто розгортається на всю довжину, і гортається сторінка
   ЦІЛКОМ, як одна звичайна сторінка, без "подвійного" скролу. thead більше
   НЕ прилипає (не position:sticky) — саме це й було коренем давнього багу
   "рядок ховається під заголовком" (два незалежні sticky-елементи, шапка
   таблиці й панель вкладок, мусили щоразу збігтися пікселем у піксель) —
   без sticky-заголовка в таблиці цей конфлікт просто неможливий. Панель
   вкладок (.tabs) лишається прилипати окремо — це навігація, а не таблиця,
   й ніхто на неї не скаржився. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* border-collapse:separate (не collapse!) — просто для однорідного вигляду
   рамок між рядками/колонками. */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
/* Комірки мають white-space:nowrap (нижче) — без цього перевизначення
   таблиця стискається під ширину обгортки замість того, щоб рости і
   вмикати горизонтальну прокрутку в .table-wrap, і зайві колонки просто
   візуально обрізаються без жодного скролбару. */
.table-wrap table{width:auto;min-width:100%;}
thead th{text-align:right;padding:7px 14px;background:var(--surface-2);color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;}
thead th:first-child, thead th:nth-child(2){text-align:left;}
thead th.sortable{cursor:pointer;user-select:none;}
thead th.sortable:hover{color:var(--text);}
thead th .sort-arrow{display:inline-block;margin-left:4px;color:var(--orange);width:10px;}
tbody td{padding:7px 14px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;}
tbody td:first-child, tbody td:nth-child(2){text-align:left;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
tr.total td{background:var(--surface-2);font-weight:600;border-top:1px solid var(--border);}
/* Підсвітка авто в "Автопарк" після кліку на номер у "Працівниках" (див.
   jumpToVehicle в app.js) — колір з теми, а не жорстко прибитий, щоб
   лишався контрастним у всіх 3 варіантах дизайну. Зникає при кліку де
   завгодно поза цим рядком (document click listener в app.js). */
tbody tr.row-highlight td{background:var(--orange-dim);border-bottom-color:var(--orange-border);}
.plate-link{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;}
.plate-link:hover{color:var(--orange);}
.name{font-weight:600;}
.plate-cell{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:12px;}
.pos{font-size:11px;color:var(--muted);}
.badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600;letter-spacing:.02em;}
.badge.debt{background:var(--red-dim);color:var(--red);}
.badge.ok{background:var(--green-dim);color:var(--green);}
/* Довідка при наведенні — замінює довгі постійно видимі підказки: маленьке
   коло з "?", повний текст показує браузерний title при наведенні мишкою. */
.note-icon{color:var(--orange);cursor:help;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1px solid var(--orange);border-radius:50%;font-size:10px;font-weight:700;line-height:1;margin-left:6px;vertical-align:middle;flex:none;}
.mini-select{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:4px;font-size:11px;padding:3px 6px;margin-top:5px;display:block;}
.mini-check{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-top:5px;cursor:pointer;}
.mini-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:12px;padding:2px 9px;font-size:10px;cursor:pointer;margin-left:6px;}
.mini-btn:hover{border-color:var(--orange);color:var(--orange);}
.mini-btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--border));}
.mini-btn:disabled{opacity:.42;cursor:not-allowed;pointer-events:none;}
/* Єдиний вигляд сортування для таблиць. Нейтральна ↕ означає, що колонка
   ще не вибрана; активний напрямок показується ▲ або ▼. */
th.app-sortable{cursor:pointer;user-select:none;white-space:normal;}
th.app-sortable::after{content:'↕';display:inline-block;margin-left:6px;color:var(--muted);font-size:.86em;line-height:1;vertical-align:1px;}
th.app-sortable[data-sort-dir="asc"]::after{content:'▲';color:var(--orange);}
th.app-sortable[data-sort-dir="desc"]::after{content:'▼';color:var(--orange);}
th.app-sortable:hover{color:var(--orange);}
.booking-group-mark{display:inline-flex;align-items:center;justify-content:center;vertical-align:1px;margin-left:6px;padding:1px 6px;border:1px solid color-mix(in srgb,var(--orange) 62%,var(--border));border-radius:999px;color:var(--orange);background:color-mix(in srgb,var(--orange) 9%,transparent);font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;line-height:1.5;cursor:help;white-space:nowrap;}
.bar-cell{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.bar-track{width:60px;height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;}
.bar-fill{height:100%;background:var(--green);}
.foot-note{font-size:12px;color:var(--muted);padding:14px 18px;line-height:1.6;border-top:1px solid var(--border);}
.exp-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;padding:18px;}
.add-form{display:flex;gap:10px;padding:16px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.add-form input, .add-form select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:9px 12px;font-family:'Inter',Arial,sans-serif;font-size:13px;}
.add-form input[type="text"]{flex:2;min-width:180px;}
.add-form select{flex:1;min-width:140px;}
.add-form input[type="number"], .add-form input[type="date"]{width:150px;font-family:'IBM Plex Mono',monospace;}
.add-form button{background:var(--orange);color:var(--accent-ink);border:none;border-radius:6px;padding:9px 16px;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;}
.add-form button:hover{background:var(--orange-hover);}
.exp-list .row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.exp-list .row .nm{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.exp-list .row:last-child{border-bottom:none;}
.exp-list .row .barbg{flex:1;height:6px;background:var(--surface-2);border-radius:3px;margin:0 12px;overflow:hidden;}
.exp-list .row .barfg{height:100%;background:var(--blue);}
.exp-side{background:var(--surface-2);border-radius:8px;padding:16px;}
.exp-side h3{font-size:13px;margin:0 0 12px;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-family:'Inter';}
.exp-side .big{font-size:26px;font-weight:600;color:var(--orange);margin-bottom:4px;}
.waterfall-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px;}
.wf-step{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;min-width:150px;}
.wf-step .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.wf-step .v{font-size:15px;font-weight:600;}
.wf-final{background:var(--green-dim);border:1px solid var(--green-border);border-radius:8px;padding:10px 16px;min-width:170px;}
.wf-final .l{font-size:10.5px;color:var(--green);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.wf-final .v{font-size:18px;font-weight:700;color:var(--green);}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:36px;width:340px;}
.login-card h1{font-size:20px;margin:0 0 4px;}
.login-card .sub{color:var(--muted);font-size:13px;margin-bottom:22px;}
.login-card input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:11px 12px;margin-bottom:12px;font-size:14px;}
.login-card button{width:100%;background:var(--orange);color:var(--accent-ink);border:none;border-radius:6px;padding:11px;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;}
.login-card .err{color:var(--red);font-size:12px;margin-top:10px;min-height:16px;}
@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr);} table{font-size:12px;} .exp-grid{grid-template-columns:1fr;}}

/* Мобільний телефон — менше бокових відступів (більше корисної ширини на
   маленькому екрані), і верхній рядок (лого + період/кнопки) складається
   у стовпчик замість того, щоб тиснутись в один рядок і "виштовхувати"
   кнопки за межі екрана. */
@media(max-width:700px){
  .wrap{padding:12px 10px 40px;}
  .top{align-items:flex-start;}
  .top h1{font-size:21px;}
  .period{width:100%;justify-content:flex-start;text-align:left;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .exp-grid{grid-template-columns:1fr;}
  .modal-box{width:94vw;}
}

.bulk-bar{display:none;align-items:center;gap:10px;padding:10px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.bulk-bar.show{display:flex;}
.bulk-bar .cnt{font-size:12px;color:var(--text);font-weight:600;}
.bulk-bar select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 10px;font-size:13px;}
.bulk-bar button{border:none;border-radius:6px;padding:7px 14px;font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;}
.bulk-bar .btn-danger{background:var(--red);color:#fff;}
.bulk-bar .btn-primary{background:var(--orange);color:var(--accent-ink);}
th.chk-col, td.chk-col{width:34px;padding-left:14px;padding-right:0;}
.badge.category-badge{background:var(--surface-2);color:var(--text);border:1px solid var(--border);}
.badge.cat-driver{background:var(--surface-2);color:var(--blue);border:1px solid var(--blue);}
.badge.cat-office{background:var(--surface-2);color:var(--muted);border:1px solid var(--border);}
.badge.cat-booking{background:var(--orange-dim);color:var(--orange);border:1px solid var(--orange);}
.term-badge{background:var(--red-dim);color:var(--red);border-radius:20px;font-size:10px;padding:2px 7px;font-weight:600;display:inline-block;margin-top:5px;}

.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center;}
.modal-backdrop.show{display:flex;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:min(640px,92vw);max-height:80vh;overflow-y:auto;}
.modal-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{margin:0;font-size:15px;font-weight:500;color:var(--text);}

/* Єдиний фірмовий діалог замість системних alert/confirm/prompt браузера. */
.app-dialog-backdrop{z-index:3000;padding:18px;background:rgba(2,8,15,.72);backdrop-filter:blur(4px);}
.app-dialog-box{width:min(520px,94vw);max-height:min(86vh,680px);overflow:hidden;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.42);}
.app-dialog-accent{height:4px;background:var(--orange);}
.app-dialog-body{padding:22px;}
.app-dialog-heading{display:flex;align-items:flex-start;gap:14px;}
.app-dialog-icon{display:flex;align-items:center;justify-content:center;flex:0 0 42px;height:42px;border-radius:50%;background:var(--orange-dim);border:1px solid var(--orange);color:var(--orange);font:700 20px/1 'Inter',Arial,sans-serif;}
.app-dialog-title{margin:1px 0 7px;color:var(--text);font:600 18px/1.25 'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.025em;}
.app-dialog-message{color:var(--muted);font-size:13.5px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;}
.app-dialog-input-wrap{margin:18px 0 0 56px;}
.app-dialog-input{box-sizing:border-box;width:100%;margin:0;padding:11px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font:500 14px 'Inter',Arial,sans-serif;outline:none;}
.app-dialog-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-dim);}
.app-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;}
.app-dialog-btn{min-width:105px;border:1px solid var(--border);border-radius:8px;padding:10px 16px;background:var(--surface-2);color:var(--text);font:600 12px 'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.035em;cursor:pointer;}
.app-dialog-btn:hover{border-color:var(--orange);}
.app-dialog-btn.primary{border-color:var(--orange);background:var(--orange);color:var(--accent-ink);}
.app-dialog-btn.danger{border-color:var(--red);background:var(--red);color:#fff;}
.app-dialog-backdrop[data-kind="error"] .app-dialog-accent,.app-dialog-backdrop[data-kind="danger"] .app-dialog-accent{background:var(--red);}
.app-dialog-backdrop[data-kind="error"] .app-dialog-icon,.app-dialog-backdrop[data-kind="danger"] .app-dialog-icon{background:var(--red-dim);border-color:var(--red);color:var(--red);}
.app-dialog-backdrop[data-kind="success"] .app-dialog-accent{background:var(--green);}
.app-dialog-backdrop[data-kind="success"] .app-dialog-icon{background:var(--green-dim);border-color:var(--green);color:var(--green);}
@media(max-width:520px){
  .app-dialog-body{padding:18px;}.app-dialog-heading{gap:11px}.app-dialog-icon{flex-basis:38px;height:38px}.app-dialog-input-wrap{margin-left:0}.app-dialog-actions{flex-direction:column-reverse}.app-dialog-btn{width:100%;}
}

tr.section-row td{background:var(--surface-2);color:var(--orange);font-family:'Oswald',sans-serif;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:8px 14px;border-bottom:1px solid var(--border);white-space:nowrap;}

/* Плиточка-перемикач для форм внесення даних (Працівники, Автопарк, Рейси,
   Витрати, Відомості) — форма за замовчуванням схована, щоб не займала
   місце й не заважала одразу бачити таблицю/дані; клік по плиточці
   розгортає форму нижче. Стан НЕ запам'ятовується між сесіями навмисно —
   кожна форма за замовчуванням згорнута при заході на вкладку. */
.tile-btn{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--orange);}
.tile-btn:hover{background:var(--orange-dim);}
.tile-btn .arrow{margin-left:auto;color:var(--muted);font-family:'Inter',Arial,sans-serif;font-size:12px;text-transform:none;letter-spacing:0;}
.collapsible-form{display:none;}
.collapsible-form.show{display:flex;}
/* Варіант для блоків з таблицею всередині (не рядок полів вводу) — display:block, не flex. */
.collapsible-block{display:none;}
.collapsible-block.show{display:block;}

/* Плиточки-ДІЇ (внести запис, додати рейс, завантажити акти тощо) — на
   відміну від .tile-btn вище (яка розгортає щось ПРЯМО НА СТОРІНЦІ, і й
   далі так робить для суто довідкових розгорток типу "Історія завантажених
   актів"), ці плиточки symmetric і клік по них відкриває МОДАЛЬНЕ вікно
   (той самий .modal-backdrop, що й редагування працівника/авто) — сама дія
   ніколи не займає місце на сторінці, поки її не викликали. Колір — той
   самий акцентний помаранчевий, що і решта інтерактивних елементів
   застосунку (assets, tab.active, note-icon) — символізує "це дія", а рамка
   й трохи інший фон (surface-2 з бордером) відрізняють її від карток з
   даними навколо. */
.action-bar{display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);}
.action-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:132px;padding:14px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;cursor:pointer;user-select:none;font-family:'Oswald',sans-serif;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--orange);text-align:center;line-height:1.3;transition:background .15s,border-color .15s;}
.action-tile:hover{background:var(--orange-dim);border-color:var(--orange);}
.action-tile .ic{font-size:20px;line-height:1;}
@media(max-width:900px){.action-tile{width:auto;flex:1;min-width:110px;}}
/* Форма всередині модалки дії — той самий .add-form (поля/кнопка виглядають
   однаково з рештою застосунку), але без нижньої лінії й округлення знизу,
   бо тут вона остання (і єдина) частина модального вікна, а не рядок над таблицею. */
.add-form.in-modal{border-bottom:none;border-radius:0 0 10px 10px;}
.employee-rate-create{flex:1 0 100%;display:grid;grid-template-columns:minmax(150px,1fr) minmax(170px,1fr);gap:8px 10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);}
.employee-rate-create>.note{grid-column:1/-1;}.employee-rate-create label,.employee-rate-form label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:10px;}
.employee-rate-create input[type="number"],.employee-rate-create input[type="month"]{box-sizing:border-box;width:100%;}
.edit-employee-body{padding:6px 18px 18px;display:flex;flex-direction:column;gap:16px;}
.employee-edit-section{border-top:1px solid var(--border);padding-top:14px;}.employee-edit-section:first-child{border-top:none;padding-top:0;}
.employee-inline-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;}.employee-inline-form input,.employee-rate-form input{box-sizing:border-box;width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);font:500 12px 'Inter',Arial,sans-serif;}
.employee-inline-form input:focus,.employee-rate-form input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-dim);}
.employee-rate-form{display:grid;grid-template-columns:minmax(130px,1fr) minmax(150px,1fr) auto auto;gap:8px;align-items:end;}
.employee-rate-history{display:flex;flex-direction:column;gap:5px;margin-top:10px;}.employee-rate-history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font-size:10.5px;color:var(--muted);}.employee-rate-history-row b{color:var(--text);font-family:'IBM Plex Mono',monospace;}.employee-rate-history-row .mini-btn{margin:0;}
@media(max-width:650px){.employee-rate-create{grid-template-columns:1fr}.employee-rate-form{grid-template-columns:1fr 1fr}.employee-rate-form .mini-btn{width:100%}.employee-inline-form{grid-template-columns:1fr}.employee-inline-form .mini-btn{width:100%}}

/* "Налаштування" (лише власник) — перемикачі модулів (увімкнено на цьому
   сайті взагалі) і список людей з доступом по модулях. Той самий
   .modal-backdrop/.modal-box, що й решта модалок застосунку. */
.toggle{position:relative;display:inline-block;width:38px;height:22px;flex:none;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle .slider{position:absolute;inset:0;background:var(--border);border-radius:22px;cursor:pointer;transition:background .15s;}
.toggle .slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;}
.toggle input:checked + .slider{background:var(--orange);}
.toggle input:checked + .slider:before{transform:translateX(16px);}
.module-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.module-row:last-child{border-bottom:none;}
.module-row .lbl{font-size:12.5px;color:var(--text);}
.modal-subtitle{margin-top:4px;color:var(--muted);font-size:10px;line-height:1.35;}
.employee-categories-box{width:min(760px,94vw);max-height:min(820px,92vh);overflow:hidden;box-shadow:0 26px 90px rgba(0,0,0,.38);}
.employee-categories-body{padding:16px 18px 19px;overflow-y:auto;max-height:calc(92vh - 70px);}
.employee-categories-note{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px;padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:11px;background:var(--surface-2);font-size:10.5px;line-height:1.5;color:var(--muted);}
.employee-categories-note b{flex:none;color:var(--text);font-size:11px;}.employee-categories-note span{min-width:0;}
.employee-category-create{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-bottom:14px;padding:11px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface-2) 74%,transparent);}
.employee-category-create input{min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);font:500 12px 'Inter',Arial,sans-serif;outline:none;}
.employee-category-create input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-dim);}
.employee-category-create button{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border:1px solid var(--orange);border-radius:9px;background:var(--orange);color:var(--accent-ink);font:600 11px 'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.025em;cursor:pointer;}
.employee-category-create button:hover{background:var(--orange-hover);}.employee-category-create button span{font:700 17px/1 'Inter',Arial,sans-serif;}
.employee-category-list{display:flex;flex-direction:column;gap:7px;}
.employee-category-row{display:grid;grid-template-columns:32px 30px minmax(170px,1fr) auto minmax(190px,auto);align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;}
.employee-category-row:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--border));background:color-mix(in srgb,var(--surface-2) 82%,var(--orange-dim));}
.employee-category-row.system{border-left:3px solid var(--orange);padding-left:9px;}.employee-category-row.dragging{opacity:.72;border-color:var(--orange);background:var(--orange-dim);box-shadow:0 12px 32px rgba(0,0,0,.26);transform:scale(1.01);}
.employee-category-handle{display:flex;align-items:center;justify-content:center;width:30px;height:36px;color:var(--muted);font:700 16px/1 'IBM Plex Mono',monospace;cursor:grab;user-select:none;touch-action:none;}.employee-category-handle:active{cursor:grabbing;color:var(--orange);}
.employee-category-position{display:flex;align-items:center;justify-content:center;width:27px;height:27px;border:1px solid var(--border);border-radius:8px;color:var(--muted);font:600 10px 'IBM Plex Mono',monospace;background:var(--surface);}
.employee-category-info{min-width:0;}.employee-category-info>b{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-size:12.5px;line-height:1.35;}.employee-category-info>div{display:flex;align-items:center;gap:7px;margin-top:4px;color:var(--muted);font-size:9.5px;}
.employee-category-system-label{padding:2px 6px;border:1px solid var(--orange-border);border-radius:999px;background:var(--orange-dim);color:var(--orange);font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;}
.employee-category-order-buttons,.employee-category-actions{display:flex;align-items:center;gap:5px;}.employee-category-row .mini-btn{margin:0;min-height:27px;}.employee-category-row .mini-btn.icon-only{display:flex;align-items:center;justify-content:center;width:29px;padding:2px 0;font-size:14px;}.employee-category-actions{justify-content:flex-end;min-width:190px;}
.module-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
@media(max-width:520px){.module-check-grid{grid-template-columns:1fr;}}
@media(max-width:650px){
  .employee-categories-box{width:96vw;max-height:94vh;}.employee-categories-body{padding:12px;max-height:calc(94vh - 66px);}.employee-categories-note{display:block;}.employee-categories-note b{display:block;margin-bottom:4px;}
  .employee-category-create{grid-template-columns:1fr;}.employee-category-create button{width:100%;}
  .employee-category-row{grid-template-columns:30px 28px minmax(0,1fr);gap:7px;padding:9px;}.employee-category-handle{grid-row:1/4;align-self:stretch;height:auto;}.employee-category-position{grid-column:2;grid-row:1;}.employee-category-info{grid-column:3;grid-row:1;}.employee-category-order-buttons{grid-column:2/4;grid-row:2;}.employee-category-actions{grid-column:2/4;grid-row:3;justify-content:flex-start;min-width:0;flex-wrap:wrap;}
}
.settings-section-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--orange);margin:0 0 8px;}
.user-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.user-row:last-child{border-bottom:none;}
.user-row .who{display:flex;flex-direction:column;gap:2px;}
.user-row .who .uname{font-size:13px;color:var(--text);font-weight:600;}
.user-row .who .mods{font-size:10.5px;color:var(--muted);}
.user-row .acts{display:flex;gap:6px;flex-wrap:wrap;}
.ua-save-btn{align-self:flex-start;min-width:142px;padding:10px 18px;border-radius:9px;box-shadow:0 7px 18px color-mix(in srgb,var(--orange) 20%,transparent);}
.copy-access-body{display:flex;flex-direction:column;gap:13px;padding:10px 18px 19px;}.copy-access-body b{color:var(--text)}.copy-access-targets{grid-template-columns:1fr!important;max-height:320px;overflow:auto;padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}
/* Водієві назва вже видна у навігації; прибираємо дубльовану верхню назву
   всередині вкладки. Календар не має цього класу й лишається з поясненням. */
html[data-driver-view="1"] .page-panel-title{display:none;}

/* ---------- Вигляд (варіанти дизайну) — доступно КОЖНІЙ людині, не лише
   власнику: суто особисте налаштування зручності перегляду, зберігається
   в localStorage ЦЬОГО браузера (не на сервері й не в базі — тому в різних
   людей чи на різних пристроях може відрізнятись, це навмисно). Варіант 1
   ("Класична") — це /стандартні/ значення :root вище, лишені без змін.
   Варіанти 2 і 3 — через атрибут data-theme на <html> (виставляється
   інлайн-скриптом у <head> ще ДО першої відмальовки, щоб не було
   "спалаху" не тієї теми при завантаженні сторінки). */
html[data-theme="ocean"]{
  --bg:#0d1620; --surface:#141f2b; --surface-2:#1b2a38; --border:#2c4256;
  --text:#e6edf3; --muted:#87a0b3; --orange:#3fb8e0; --orange-dim:#173a4a;
  --green:#4fd8a0; --green-dim:#123329; --red:#ff6b6b; --red-dim:#3a1f22; --blue:#6fb7ea;
  --accent-ink:#0d1620; --orange-border:#1f5872; --orange-hover:#5cc9ea; --green-border:#1f5c46;
}
html[data-theme="light"]{
  --bg:#f3f5f7; --surface:#ffffff; --surface-2:#eef1f4; --border:#dbe1e7;
  --text:#1c2530; --muted:#5c6b7a; --orange:#6440c9; --orange-dim:#efe9ff;
  --green:#146b3d; --green-dim:#e2f5e9; --red:#b91c1c; --red-dim:#fbe4e4; --blue:#2f6fb0;
  --accent-ink:#ffffff; --orange-border:#a78bfa; --orange-hover:#522fa3; --green-border:#a8dfc0;
}
/* Ширина сторінки (.wrap вище) однакова в УСІХ трьох варіантах — теми
   відрізняються лише кольоровою палітрою (custom properties вище), не
   версткою. Висота таблиць так само не обмежується в жодній темі (сторінка
   гортається цілком, див. .table-wrap вище). */

.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.theme-card{border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;background:var(--surface-2);transition:border-color .15s,box-shadow .15s;user-select:none;}
.theme-card:hover{border-color:var(--orange);}
.theme-card.active{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);}
.theme-swatch{display:flex;gap:4px;margin-bottom:9px;}
.theme-swatch span{width:22px;height:22px;border-radius:5px;border:1px solid rgba(120,120,120,.25);}
.theme-name{font-size:11.5px;color:var(--text);font-weight:600;line-height:1.3;}
.theme-desc{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.3;}

/* Два режими навігації. У стандартному aside «розчиняється» й лишає
   звичайні верхні вкладки. У CRM-режимі це повноцінна оболонка застосунку. */
.layout-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.layout-card{border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;background:var(--surface-2);transition:transform .15s,border-color .15s,box-shadow .15s;user-select:none;}
.layout-card:hover{transform:translateY(-1px);border-color:var(--orange);}
.layout-card.active{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 8px 24px rgba(0,0,0,.15);}
.layout-preview{height:58px;border:1px solid var(--border);border-radius:8px;background:var(--bg);display:flex;gap:5px;padding:6px;margin-bottom:9px;overflow:hidden;}
.layout-preview .layout-nav{display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--orange);font-size:15px;border-radius:5px;}
.layout-preview .layout-canvas{display:block;flex:1;border-radius:5px;background:linear-gradient(180deg,var(--surface) 0 28%,var(--surface-2) 28% 34%,var(--surface) 34% 64%,var(--surface-2) 64% 70%,var(--surface) 70%);}
.layout-preview.standard{flex-direction:column;}
.layout-preview.standard .layout-nav{height:12px;width:100%;font-size:9px;}
.layout-preview.sidebar .layout-nav{width:25%;height:100%;}
.access-subtitle{grid-column:1/-1;color:var(--orange);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.app-sidebar{display:contents;}
.sidebar-brand,.sidebar-section-label,.sidebar-footer,.sidebar-mobile-open,.page-context,.sidebar-overlay{display:none;}
.nav-icon{display:none;}

html[data-layout="sidebar"]{--sidebar-width:276px;}
html[data-layout="sidebar"][data-sidebar-collapsed="1"]{--sidebar-width:84px;}
html[data-layout="sidebar"] body{background:radial-gradient(circle at 78% -15%,var(--orange-dim),transparent 34%),var(--bg);}
html[data-layout="sidebar"] .wrap{max-width:none;margin:0;padding:22px 28px 48px calc(var(--sidebar-width) + 28px);transition:padding-left .22s ease;}
html[data-layout="sidebar"] .app-sidebar{
  display:flex;position:fixed;z-index:600;inset:0 auto 0 0;width:var(--sidebar-width);
  flex-direction:column;padding:18px 14px;background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);
  border-right:1px solid var(--border);box-shadow:18px 0 45px rgba(0,0,0,.18);transition:width .22s ease,transform .22s ease;
}
html[data-layout="sidebar"] .sidebar-brand{display:flex;align-items:center;gap:11px;min-height:54px;padding:0 4px 17px;border-bottom:1px solid var(--border);position:relative;}
html[data-layout="sidebar"] .sidebar-logo{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(145deg,var(--orange),var(--blue));color:var(--accent-ink);font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.04em;box-shadow:0 8px 24px color-mix(in srgb,var(--orange) 25%,transparent);}
html[data-layout="sidebar"] .sidebar-brand-copy{min-width:0;overflow:hidden;white-space:nowrap;}
html[data-layout="sidebar"] .sidebar-company{font-family:'Oswald',sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:.03em;color:var(--text);overflow:hidden;text-overflow:ellipsis;}
html[data-layout="sidebar"] .sidebar-product{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:2px;}
html[data-layout="sidebar"] .sidebar-collapse-btn{position:absolute;right:-27px;top:9px;width:25px;height:30px;border:1px solid var(--border);border-left:0;border-radius:0 8px 8px 0;background:var(--surface);color:var(--muted);cursor:pointer;font-size:22px;line-height:1;box-shadow:8px 0 18px rgba(0,0,0,.1);}
html[data-layout="sidebar"] .sidebar-collapse-btn:hover{color:var(--orange);}
html[data-layout="sidebar"] .sidebar-section-label{display:block;padding:19px 12px 8px;color:var(--muted);font-family:'Oswald',sans-serif;font-size:9px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;}
html[data-layout="sidebar"] .tabs{display:flex;position:static;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:5px;min-height:0;margin:0;padding:0;border:0;background:transparent;overflow-y:auto;}
html[data-layout="sidebar"] .tab{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:1px solid transparent;border-radius:10px;color:var(--muted);font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;transition:background .15s,border-color .15s,color .15s;}
html[data-layout="sidebar"] .tab:hover{color:var(--text);background:var(--surface-2);}
html[data-layout="sidebar"] .tab.active{color:var(--text);background:linear-gradient(90deg,var(--orange-dim),var(--surface-2));border-color:var(--orange-border);box-shadow:inset 3px 0 0 var(--orange);}
html[data-layout="sidebar"] .nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;color:currentColor;}
html[data-layout="sidebar"] .nav-icon svg,.sidebar-quick-actions svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
html[data-layout="sidebar"] .tab.active .nav-icon{color:var(--orange);}
html[data-layout="sidebar"] .sidebar-footer{display:flex;align-items:center;gap:9px;margin-top:auto;padding:14px 5px 2px;border-top:1px solid var(--border);min-width:0;}
html[data-layout="sidebar"] .sidebar-user-avatar{display:flex;align-items:center;justify-content:center;width:35px;height:35px;flex:none;border-radius:11px;background:var(--orange-dim);border:1px solid var(--orange-border);color:var(--orange);font-weight:700;text-transform:uppercase;}
html[data-layout="sidebar"] .sidebar-user-copy{min-width:0;flex:1;overflow:hidden;white-space:nowrap;}
html[data-layout="sidebar"] .sidebar-user-copy div{font-size:11.5px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;}
html[data-layout="sidebar"] .sidebar-user-copy span{font-size:9.5px;color:var(--muted);}
html[data-layout="sidebar"] .sidebar-quick-actions{display:flex;gap:2px;}
html[data-layout="sidebar"] .sidebar-quick-actions button{display:flex;align-items:center;justify-content:center;width:29px;height:29px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;padding:0;}
html[data-layout="sidebar"] .sidebar-quick-actions button:hover{background:var(--surface-2);color:var(--orange);}

html[data-layout="sidebar"][data-sidebar-collapsed="1"] .sidebar-brand-copy,
html[data-layout="sidebar"][data-sidebar-collapsed="1"] .sidebar-section-label,
html[data-layout="sidebar"][data-sidebar-collapsed="1"] .nav-label,
html[data-layout="sidebar"][data-sidebar-collapsed="1"] .sidebar-user-copy,
html[data-layout="sidebar"][data-sidebar-collapsed="1"] .sidebar-quick-actions{display:none;}
html[data-layout="sidebar"][data-sidebar-collapsed="1"] .sidebar-brand{justify-content:center;padding-left:0;padding-right:0;}
html[data-layout="sidebar"][data-sidebar-collapsed="1"] .sidebar-footer{justify-content:center;}
html[data-layout="sidebar"][data-sidebar-collapsed="1"] .tab{justify-content:center;padding:11px 8px;}
html[data-layout="sidebar"][data-sidebar-collapsed="1"] .sidebar-collapse-btn{transform:rotate(180deg);}

html[data-layout="sidebar"] .top{position:relative;align-items:center;min-height:72px;padding:13px 16px;margin-bottom:16px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 12px 34px rgba(0,0,0,.10);}
html[data-layout="sidebar"] .top .brand{display:none;}
html[data-layout="sidebar"] .page-context{display:block;}
html[data-layout="sidebar"] .page-eyebrow{font-size:9px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-bottom:3px;}
html[data-layout="sidebar"] .page-context h2{font-size:20px;margin:0;color:var(--text);font-weight:500;}
html[data-layout="sidebar"] .period{margin-left:auto;}
html[data-layout="sidebar"] .period #whoami{display:none;}
html[data-layout="sidebar"] .period .logout{padding:7px 9px;border:1px solid var(--border);border-radius:9px;text-decoration:none;background:var(--surface-2);}
html[data-layout="sidebar"] .kpi-row{gap:12px;background:transparent;border:0;border-radius:0;overflow:visible;}
html[data-layout="sidebar"] .kpi{position:relative;min-height:102px;padding:16px 17px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:0 12px 30px rgba(0,0,0,.09);overflow:hidden;}
html[data-layout="sidebar"] .kpi::after{content:"";position:absolute;right:-24px;bottom:-36px;width:92px;height:92px;border-radius:50%;background:var(--orange-dim);opacity:.65;}
html[data-layout="sidebar"] .kpi .lbl{font-size:9.5px;letter-spacing:.08em;padding-right:22px;}
html[data-layout="sidebar"] .kpi .val{font-size:22px;margin-top:12px;position:relative;z-index:1;}
html[data-layout="sidebar"] .card{border-radius:15px;box-shadow:0 12px 34px rgba(0,0,0,.09);}
html[data-layout="sidebar"] .card-head{padding:14px 17px;}
html[data-layout="sidebar"] .card-head h2{font-family:'Inter',sans-serif;font-size:13px;text-transform:none;letter-spacing:0;font-weight:650;}
html[data-layout="sidebar"] .alert{border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.07);}
html[data-layout="sidebar"] .action-bar{gap:8px;padding:11px 15px;background:var(--surface);}
html[data-layout="sidebar"] .action-tile{width:auto;min-width:142px;flex-direction:row;justify-content:flex-start;padding:10px 13px;border-radius:10px;font-family:'Inter',sans-serif;font-size:10.5px;text-transform:none;color:var(--text);}
html[data-layout="sidebar"] .action-tile .ic{font-size:16px;color:var(--orange);}
html[data-layout="sidebar"] thead th{background:color-mix(in srgb,var(--surface-2) 86%,var(--bg));padding-top:10px;padding-bottom:10px;}
html[data-layout="sidebar"] tbody td{padding-top:9px;padding-bottom:9px;}

@media(max-width:900px){
  .layout-grid{grid-template-columns:1fr;}
  html[data-layout="sidebar"]{--sidebar-width:276px;}
  html[data-layout="sidebar"] .wrap{max-width:none;margin:0;padding:12px 10px 40px;}
  html[data-layout="sidebar"] .app-sidebar{transform:translateX(-105%);width:276px;box-shadow:24px 0 60px rgba(0,0,0,.42);}
  html[data-layout="sidebar"][data-sidebar-open="1"] .app-sidebar{transform:translateX(0);}
  html[data-layout="sidebar"] .sidebar-collapse-btn{display:none;}
  html[data-layout="sidebar"] .sidebar-overlay{display:block;position:fixed;z-index:590;inset:0;background:rgba(4,8,12,.62);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;}
  html[data-layout="sidebar"][data-sidebar-open="1"] .sidebar-overlay{opacity:1;visibility:visible;}
  html[data-layout="sidebar"] .sidebar-mobile-open{display:flex;width:39px;height:39px;flex-direction:column;justify-content:center;align-items:center;gap:4px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:0;cursor:pointer;}
  html[data-layout="sidebar"] .sidebar-mobile-open span{width:17px;height:2px;border-radius:2px;background:var(--text);}
  html[data-layout="sidebar"] .top{min-height:62px;padding:10px 11px;gap:10px;}
  html[data-layout="sidebar"] .page-context h2{font-size:17px;}
  html[data-layout="sidebar"] .period{width:auto;flex:1;justify-content:flex-end;}
  html[data-layout="sidebar"] .period > span:not(#whoami),html[data-layout="sidebar"] .period .logout,html[data-layout="sidebar"] #dashboardRefreshBtn{display:none;}
  html[data-layout="sidebar"] .period input{max-width:145px;}
  html[data-layout="sidebar"] .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  html[data-layout="sidebar"] .kpi{min-height:92px;padding:13px;}
  html[data-layout="sidebar"] .kpi .val{font-size:18px;}
}
@media(max-width:520px){html[data-layout="sidebar"] .kpi-row{grid-template-columns:1fr;}}

/* ---------- Готівка / мультикасова книга ---------- */
.cash-hero{overflow:hidden;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 82%,var(--orange-dim)));}
.cash-head,.cash-analytics-head{align-items:center;gap:14px;}
.cash-head-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.cash-balance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:13px 18px 7px;overflow:hidden;}
.cash-balance-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0;overflow:hidden;padding:12px 14px;text-align:left;color:var(--text);background:color-mix(in srgb,var(--surface-2) 76%,transparent);border:1px solid var(--border);border-right:0;}
.cash-balance-card:first-child{border-radius:12px 0 0 12px;}.cash-balance-card:last-child{border-right:1px solid var(--border);border-radius:0 12px 12px 0;}
.cash-balance-name{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.cash-balance-card strong{display:block;max-width:100%;font-family:'IBM Plex Mono',monospace;font-size:clamp(13px,1.35vw,18px);line-height:1.35;letter-spacing:-.035em;white-space:nowrap;}
.cash-balance-card strong.negative{color:var(--red);}
.cash-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px 18px 18px;}
.cash-action{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:background .15s,border-color .15s;}
.cash-action:hover{background:var(--surface-2);border-color:var(--orange-border);}
.cash-action>span{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;font-size:22px;font-weight:700;background:var(--orange-dim);color:var(--orange);}
.cash-action.expense>span{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);}
.cash-action.transfer>span,.cash-action.exchange>span{background:color-mix(in srgb,var(--blue) 15%,transparent);color:var(--blue);}
.cash-action b{font-size:12px;}.cash-action small{color:var(--muted);font-size:9.5px;margin-top:2px;}
.cash-summary-card,.cash-analytics-card{margin-top:16px;}
.cash-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:15px 18px 18px;}
.cash-summary-item{padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);}
.cash-summary-item h4{margin:0 0 9px;font-size:11px;color:var(--text);}.cash-summary-line{display:flex;justify-content:space-between;gap:8px;margin-top:6px;color:var(--muted);font-size:10px;}.cash-summary-line b{font-family:'IBM Plex Mono',monospace;color:var(--text);font-size:10.5px;}.cash-summary-line.net{padding-top:7px;border-top:1px solid var(--border);}.cash-summary-line.net b.positive{color:var(--green);}.cash-summary-line.net b.negative{color:var(--red);}
.cash-segments{display:flex;gap:3px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);}
.cash-segments button{border:0;border-radius:7px;padding:6px 10px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;white-space:nowrap;}.cash-segments button.active{background:var(--surface);color:var(--text);box-shadow:0 3px 12px rgba(0,0,0,.12);}
.cash-account-filter{display:flex;gap:7px;flex-wrap:wrap;padding:13px 18px 0;}.cash-account-filter button{padding:7px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:10px;}.cash-account-filter button.active{border-color:var(--orange-border);background:var(--orange-dim);color:var(--orange);}
.ua-employee-choice-grid{grid-template-columns:1fr!important;gap:5px!important;padding-right:4px}.ua-employee-category{position:sticky;top:0;z-index:1;margin:5px 0 1px;padding:6px 7px;background:var(--surface);border-bottom:1px solid var(--border)}
.cash-analytics-layout{display:grid;grid-template-columns:minmax(420px,1.25fr) minmax(360px,1fr);gap:18px;padding:15px 18px 19px;align-items:start;}
.cash-chart{display:grid;grid-template-columns:repeat(12,minmax(24px,1fr));align-items:end;gap:6px;min-height:250px;padding:16px 8px 3px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(to top,var(--surface-2),transparent);}
.cash-chart-month{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:215px;min-width:0;}.cash-chart-bars{display:flex;align-items:flex-end;gap:3px;height:180px;width:100%;justify-content:center;}.cash-chart-bar{width:min(14px,42%);min-height:2px;border-radius:5px 5px 2px 2px;background:var(--green);position:relative;}.cash-chart-bar.expense{background:var(--red);}.cash-chart-month small{font-size:8.5px;color:var(--muted);}.cash-chart-empty{grid-column:1/-1;align-self:center;text-align:center;color:var(--muted);font-size:11px;}
.cash-category-wrap{max-height:280px;border:1px solid var(--border);border-radius:12px;}.cash-category-wrap td,.cash-category-wrap th{padding:8px 10px;font-size:9.5px;}.cash-category-wrap td:not(:first-child){font-family:'IBM Plex Mono',monospace;text-align:right;}
.cash-journal-filters{display:flex;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);}.cash-search{width:min(390px,100%);margin:0;}
.table-wrap .cash-journal-table{width:100%;min-width:760px;table-layout:fixed;}
.cash-journal-table tr.cancelled{opacity:.52;text-decoration:line-through;}
.cash-journal-table th,.cash-journal-table td{box-sizing:border-box;vertical-align:top;white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.35;padding-left:9px;padding-right:9px;}
.cash-journal-table .cash-col-date{width:88px;white-space:nowrap;}.cash-journal-table .cash-col-type{width:82px;}.cash-journal-table .cash-col-route{width:105px;}.cash-journal-table .cash-col-amount{width:118px;}.cash-journal-table .cash-col-category{width:135px;}.cash-journal-table .cash-col-description{width:280px;min-width:280px;overflow-wrap:break-word;word-break:normal;hyphens:auto;}.cash-journal-table .cash-col-balance{width:145px;}.cash-journal-table .cash-col-audit{width:125px;}.cash-journal-table .cash-col-actions{width:110px;}
.cash-type-badge{display:inline-flex;padding:4px 7px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);font-size:9px;white-space:nowrap;}.cash-type-badge.income{color:var(--green);}.cash-type-badge.expense{color:var(--red);}.cash-route{font-size:10px;color:var(--text);white-space:normal;overflow-wrap:anywhere;}.cash-entry-amount{font-family:'IBM Plex Mono',monospace;font-weight:650;white-space:nowrap;}.cash-entry-amount.positive{color:var(--green);}.cash-entry-amount.negative{color:var(--red);}.cash-staff-names{margin-top:5px;color:var(--muted);font-size:9.5px;line-height:1.45;}.cash-journal-actions{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap;}

/* Швидка форма: усі головні варіанти — плитками, без зайвих списків. */
.cash-composer-box{width:min(780px,95vw);max-height:min(860px,94vh);}.cash-composer-body{padding:14px 18px 19px;overflow:auto;max-height:calc(94vh - 70px);}.cash-action-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px;}.cash-action-picker button{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:10.5px;}.cash-action-picker button span{font-size:17px;}.cash-action-picker button.active{background:var(--orange-dim);border-color:var(--orange-border);color:var(--orange);}
.cash-form-grid{display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:end;}.cash-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}.cash-field>span{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}.cash-field .mini-select{display:block;width:100%;margin:0;}.cash-account-field{grid-column:span 1;}.cash-account-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}.cash-account-tile{padding:9px 5px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:9.5px;cursor:pointer;text-align:center;}.cash-account-tile b{display:block;color:var(--text);font-size:12px;margin-bottom:2px;}.cash-account-tile.active{background:var(--orange-dim);border-color:var(--orange-border);color:var(--orange);}.cash-account-tile.external b{font-size:10px;}
.cash-amount-field{grid-column:1/-1;}.cash-money-input{display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden;}.cash-money-input:focus-within{border-color:var(--orange-border);box-shadow:0 0 0 3px var(--orange-dim);}.cash-money-input input{min-width:0;flex:1;padding:13px 14px;border:0;outline:0;background:transparent;color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:23px;}.cash-money-input b{padding:0 15px;color:var(--orange);font-size:18px;}.cash-category-chips{display:flex;gap:6px;flex-wrap:wrap;}.cash-category-chip{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:9.5px;cursor:pointer;}.cash-category-chip.active{background:var(--orange-dim);border-color:var(--orange-border);color:var(--orange);}.cash-category-more{max-width:280px;margin-top:1px!important;}.cash-projection{min-height:38px;margin:3px 0 12px;padding:9px 11px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);font-size:10px;}.cash-projection strong{color:var(--text);}.cash-projection.negative{border-color:color-mix(in srgb,var(--red) 50%,var(--border));background:color-mix(in srgb,var(--red) 8%,transparent);color:var(--red);}.cash-save-row{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.cash-employee-switch{margin:0 0 12px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);}.cash-employee-switch label{display:flex;align-items:center;gap:10px;cursor:pointer;}.cash-employee-switch input{width:18px;height:18px;accent-color:var(--orange);}.cash-employee-switch label>span{display:flex;flex-direction:column;gap:3px;}.cash-employee-switch b{font-size:11px;}.cash-employee-switch small{font-size:9.5px;color:var(--muted);}.cash-employee-switch.active{border-color:var(--orange-border);background:var(--orange-dim);}.cash-employee-fields{margin:0 0 12px;padding:13px;border:1px solid var(--orange-border);border-radius:12px;background:color-mix(in srgb,var(--orange-dim) 48%,transparent);}.cash-staff-kind-picker{grid-template-columns:repeat(3,1fr);margin-bottom:12px;}.cash-employee-fields>.note{margin-top:10px;line-height:1.5;}
.cash-categories-body{padding:14px 18px 19px;}.cash-category-create{display:grid;grid-template-columns:1.3fr 1fr 1.3fr auto;gap:7px;align-items:center;margin-bottom:13px;}.cash-category-create .mini-select{margin:0;width:100%;}.cash-category-row{display:grid;grid-template-columns:1.3fr 1fr 1.3fr auto auto;gap:7px;padding:8px 0;border-top:1px solid var(--border);align-items:center;}.cash-category-row .mini-select{margin:0;width:100%;}.cash-category-system{font-size:9px;color:var(--muted);}
.cash-history-item{padding:11px 12px;margin-bottom:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);}.cash-history-item h4{margin:0 0 5px;font-size:11px;}.cash-toast{position:fixed;z-index:999;right:20px;bottom:20px;padding:11px 15px;border:1px solid var(--green);border-radius:11px;background:var(--surface);color:var(--text);box-shadow:0 15px 45px rgba(0,0,0,.3);font-size:11px;animation:cashToastIn .2s ease;}@keyframes cashToastIn{from{transform:translateY(10px);opacity:0}}
.staff-cash-allocation{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(130px,.7fr) auto;gap:8px;align-items:end;padding:10px 0;border-top:1px solid var(--border);}.staff-cash-allocation .cash-field{margin:0;}.staff-cash-allocation>.mini-btn{margin-bottom:2px;}

/* Власницька інструкція */
.program-guide-box{width:min(980px,95vw);height:min(720px,92vh);}.program-guide-layout{display:grid;grid-template-columns:220px 1fr;min-height:0;height:calc(100% - 58px);}.program-guide-nav{padding:13px;border-right:1px solid var(--border);overflow:auto;}.program-guide-nav button{display:block;width:100%;margin-bottom:5px;padding:9px 10px;text-align:left;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:10.5px;cursor:pointer;}.program-guide-nav button.active{background:var(--orange-dim);border-color:var(--orange-border);color:var(--orange);}.program-guide-content{padding:22px 26px;overflow:auto;line-height:1.65;color:var(--muted);font-size:12px;}.program-guide-content h2{margin:0 0 13px;color:var(--text);font-size:21px;}.program-guide-content p{max-width:720px;}.program-guide-content b{color:var(--text);}

@media(max-width:1050px){.cash-action-grid,.cash-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.cash-analytics-layout{grid-template-columns:1fr;}}
@media(max-width:700px){.cash-action-grid,.cash-summary-grid{grid-template-columns:1fr;}.cash-balance-grid{grid-template-columns:repeat(4,minmax(122px,1fr));padding-left:12px;padding-right:12px;overflow-x:auto;}.cash-balance-card{min-width:122px;padding:10px 11px;}.cash-balance-card strong{font-size:14px;}.cash-journal-filters{align-items:stretch;flex-direction:column;}.cash-search{width:100%;}.cash-action-picker{grid-template-columns:repeat(2,1fr);}.cash-staff-kind-picker{grid-template-columns:1fr;}.cash-form-grid{grid-template-columns:1fr;}.cash-account-field,.cash-amount-field{grid-column:1;}.cash-account-tiles{grid-template-columns:repeat(2,1fr);}.cash-category-create,.cash-category-row,.staff-cash-allocation{grid-template-columns:1fr;}.cash-chart{gap:3px;padding-left:3px;padding-right:3px;overflow-x:auto;}.program-guide-box{height:94vh;}.program-guide-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr;}.program-guide-nav{display:flex;gap:4px;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto;padding:8px;}.program-guide-nav button{width:auto;white-space:nowrap;margin:0;}.program-guide-content{padding:17px;}}

/* ---------- Календар фактичних вихідних / відпусток водіїв ---------- */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:auto;padding:0 5px;border-radius:999px;background:var(--orange);color:#101214;font-family:'Inter',sans-serif;font-size:9px;font-weight:800;line-height:1;}
.nav-badge[hidden]{display:none!important}
.timeoff-card{overflow:hidden}.timeoff-head{align-items:center;gap:14px}.timeoff-head>div{min-width:0}.timeoff-toolbar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.timeoff-month-label{min-width:170px;border:0;background:transparent;color:var(--text);font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;cursor:pointer}.timeoff-legend{display:flex;gap:13px;flex-wrap:wrap;margin-left:auto;color:var(--muted);font-size:9.5px}.timeoff-legend span{display:flex;align-items:center;gap:5px}.timeoff-dot{display:inline-block;width:8px;height:8px;border-radius:50%}.timeoff-dot.dayoff{background:var(--blue)}.timeoff-dot.vacation{background:#9a7cff}.timeoff-dot.pending{background:var(--orange)}
.timeoff-calendar-scroll{overflow-x:auto;padding:14px 18px 18px}.timeoff-weekdays,.timeoff-calendar{display:grid;grid-template-columns:repeat(7,minmax(118px,1fr));min-width:826px}.timeoff-weekdays{border:1px solid var(--border);border-bottom:0;border-radius:12px 12px 0 0;background:var(--surface-2)}.timeoff-weekdays span{padding:8px 9px;border-right:1px solid var(--border);color:var(--muted);font-size:9px;font-weight:700;text-align:center;text-transform:uppercase}.timeoff-weekdays span:last-child{border-right:0}.timeoff-calendar{border-left:1px solid var(--border);border-top:1px solid var(--border)}
.timeoff-day{position:relative;min-height:128px;padding:8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);overflow:hidden}.timeoff-day:nth-child(7n){border-right:1px solid var(--border)}.timeoff-day:nth-last-child(-n+7):first-child,.timeoff-day:last-child{border-radius:0}.timeoff-day.outside{background:color-mix(in srgb,var(--surface-2) 72%,var(--bg));opacity:.58}.timeoff-day.today{box-shadow:inset 0 0 0 2px var(--blue)}.timeoff-day.has-pending{background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--orange) 9%,var(--surface)))}.timeoff-day-number-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}.timeoff-day-number{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:8px;color:var(--text);font:600 11px 'IBM Plex Mono',monospace}.timeoff-day.today .timeoff-day-number{background:var(--blue);color:#081116}.timeoff-capacity{padding:3px 6px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:8px;white-space:nowrap}.timeoff-capacity.full{border-color:var(--orange-border);color:var(--orange)}
.timeoff-events{display:flex;flex-direction:column;gap:4px}.timeoff-event{display:block;width:100%;padding:5px 6px;border:1px solid color-mix(in srgb,var(--blue) 35%,var(--border));border-radius:7px;background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--text);font-size:8.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.timeoff-event.vacation{border-color:color-mix(in srgb,#9a7cff 40%,var(--border));background:color-mix(in srgb,#9a7cff 13%,transparent)}.timeoff-event.pending{border-style:dashed;border-color:var(--orange-border);background:var(--orange-dim);color:var(--orange)}.timeoff-event.cancelled,.timeoff-event.rejected{opacity:.5;text-decoration:line-through}
.timeoff-pending-card{border-color:var(--orange-border)}.timeoff-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:6px;border-radius:999px;background:var(--orange-dim);color:var(--orange);font:700 10px 'Inter',sans-serif}.timeoff-request-list{padding:6px 18px 16px}.timeoff-request{display:grid;grid-template-columns:minmax(160px,1.3fr) minmax(150px,1fr) minmax(120px,.8fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}.timeoff-request:last-child{border-bottom:0}.timeoff-request-name{font-weight:650;font-size:10.5px}.timeoff-request-meta{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.4}.timeoff-request-type{font-size:10px}.timeoff-status{display:inline-flex;width:max-content;padding:4px 7px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:8.5px}.timeoff-status.approved{color:var(--green)}.timeoff-status.pending{color:var(--orange);border-color:var(--orange-border)}.timeoff-status.rejected{color:var(--red)}.timeoff-request-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}.timeoff-empty{padding:20px;color:var(--muted);font-size:10px;text-align:center}
.timeoff-composer-box{width:min(650px,94vw)}.timeoff-composer-body{padding:14px 18px 19px}.timeoff-type-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}.timeoff-type-picker button{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--muted);text-align:left;cursor:pointer}.timeoff-type-picker button b{color:var(--text);font-size:11px}.timeoff-type-picker button small{font-size:9px;line-height:1.4}.timeoff-type-picker button.active{border-color:var(--orange-border);background:var(--orange-dim)}.timeoff-type-picker button.active b{color:var(--orange)}.timeoff-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.timeoff-composer-body textarea{resize:vertical;min-height:68px}.timeoff-rule-note{margin:2px 0 13px;padding:9px 11px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);font-size:9.5px;line-height:1.5}
@media(max-width:700px){.timeoff-head{align-items:flex-start;flex-direction:column}.timeoff-toolbar{flex-wrap:wrap;padding:10px 12px}.timeoff-month-label{min-width:150px;text-align:left}.timeoff-legend{width:100%;margin-left:0}.timeoff-calendar-scroll{padding:10px 12px 14px}.timeoff-weekdays,.timeoff-calendar{grid-template-columns:repeat(7,112px);min-width:784px}.timeoff-day{min-height:118px}.timeoff-request{grid-template-columns:1fr}.timeoff-request-actions{justify-content:flex-start}.timeoff-type-picker,.timeoff-date-grid{grid-template-columns:1fr}}

/* Серверне розблокування через passkey/WebAuthn. Дані під сторінкою не
   лишаються доступними для кліку/підглядання, доки системний діалог
   підтвердження користувача не завершився. */
html.app-locked body>*:not(.app-lock-overlay){filter:blur(7px);pointer-events:none;user-select:none}
.app-lock-overlay{position:fixed;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(7px)}
.app-lock-overlay[hidden]{display:none}.app-lock-card{display:flex;flex-direction:column;align-items:center;gap:9px;width:min(360px,90vw);padding:26px 24px;border:1px solid var(--orange-border);border-radius:18px;background:var(--surface);box-shadow:0 22px 70px rgba(0,0,0,.4);text-align:center}.app-lock-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--orange-dim);color:var(--orange);font-size:20px}.app-lock-card b{font-family:'Oswald',sans-serif;font-size:17px}.app-lock-card span{color:var(--muted);font-size:11px}
.passkey-settings{display:flex;flex-direction:column;gap:10px;margin-top:5px;padding-top:15px;border-top:1px solid var(--border)}
.passkey-settings>b,.passkey-settings b{font-size:12px}.passkey-add-btn{align-self:flex-start;padding:9px 13px;border:1px solid var(--orange-border);border-radius:9px;background:var(--orange);color:#111;font-family:'Oswald',sans-serif;font-weight:700;cursor:pointer}
.passkey-list{display:flex;flex-direction:column;gap:6px}.passkey-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.passkey-row b{font-size:10px}
.login-card .passkey-login-btn{margin-top:7px;border:1px solid var(--orange-border);background:transparent;color:var(--orange)}