@import url('/fonts.css');

:root {
    /* Палітра ARTLINE (artline.ua, rich-ai): бірюзовий акцент, чорний, холодні сірі.
       Числа шкали — не «світліше/темніше червоного», а ролі: 400 — фірмовий колір
       для заливок, 700 — той самий тон, достатньо темний для тексту на білому. */
    --brand-50:#e9f9fa; --brand-100:#cdf1f4; --brand-200:#9fe3e9; --brand-300:#5fd1da;
    --brand-400:#19bcc9; --brand-600:#14a3ae; --brand-700:#0e7b84;
    --brand-800:#0a5d64; --brand-950:#101010;
    --n-0:#fff; --n-50:#f7f8fa; --n-100:#eef1f4; --n-200:#e1e6eb;
    --n-300:#d0d7de; --n-400:#aab4bf; --n-500:#5e6a78;
    --n-600:#434c56; --n-700:#252525; --n-800:#1a2128; --n-900:#101010;
    --success:#1a7f4b; --success-400:#3db076; --success-bg:#e6f6ed; --success-line:#b3e2c6;
    --warning:#9a5b00; --warning-400:#ffc77e; --warning-bg:#fff1dc; --warning-line:#ffc77e;
    --danger:#d63c3c; --danger-400:#eb5757; --danger-bg:#fdeaea; --danger-line:#f5b5b5;
    --info:#3a63c2; --info-400:#6890e4; --info-bg:#e9eefb;
    --violet:#5a48c9; --violet-bg:#eeebfb; --orange:#b4540a; --orange-bg:#fff1e6;
    --bg:var(--n-50); --panel:var(--n-0); --ink:var(--n-700);
    --muted:var(--n-500); --line:var(--n-200); --brand:var(--brand-400);
    --brand2:var(--brand-950); --ok:var(--success); --warn:var(--warning);
    --on-brand:var(--n-900); --chrome:var(--n-900); --chrome-ink:#fff; --chrome-muted:var(--n-400);
    --overlay:rgba(16,16,16,.45); --brand-glow:rgba(25,188,201,.18);
    --font-display:'Montserrat',system-ui,'Segoe UI',Arial,sans-serif;
    --font-body:'Montserrat',system-ui,'Segoe UI',Arial,sans-serif;
    --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    /* Радіуси як на artline.ua: гострі. 999px лишається для пігулок і кружків. */
    --r-sm:2px; --r-md:4px; --r-lg:4px; --r-xl:6px;
    --sh-sm:0 1px 2px rgba(16,16,16,.06);
    --sh-md:0 4px 12px rgba(16,16,16,.08);
    --sh-lg:0 10px 30px rgba(16,16,16,.10);
    --sh-up:0 -6px 18px rgba(16,16,16,.10);
}
*{box-sizing:border-box}
/* Атрибут hidden сильніший за наш display. Правило браузера [hidden]{display:none}
   має найнижчу вагу, тож будь-який наш .клас{display:flex|grid|block} його переб'є —
   і елемент, який JS «ховає» через element.hidden, лишається на екрані. Так модальне
   вікно PDF висіло поверх кожної заявки й перехоплювало всі кліки. Одне правило
   з !important закриває цей клас помилок для всіх елементів одразу. */
[hidden]{display:none!important}
html{font-family:var(--font-body);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh}
a{color:var(--brand-700);text-decoration:none}a:hover{color:var(--brand-800);text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand-400);outline-offset:2px;border-radius:var(--r-sm)}
h1,h2,h3{font-family:var(--font-display);color:var(--n-900);letter-spacing:-.005em}
h1{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.01em}h2{font-size:28px;line-height:36px;font-weight:700}h3{font-size:20px;line-height:28px;font-weight:700}
.container{width:min(1240px,calc(100% - 32px));margin-inline:auto}.public-container{width:min(920px,calc(100% - 32px));margin:32px auto 56px}
.topbar{background:var(--chrome);color:var(--chrome-ink);border-bottom:2px solid var(--brand-400)}.topbar .container{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--n-900);font-family:var(--font-display);white-space:nowrap}.brand:hover{text-decoration:none;color:var(--n-900)}.brand img{display:block;width:112px;height:28px;object-fit:contain}.brand small{display:block;padding-left:12px;border-left:1px solid var(--n-300);color:var(--n-500);font-size:10px;font-weight:600;letter-spacing:.12em;line-height:1.2;text-transform:uppercase}.topbar .brand,.topbar .brand:hover{color:var(--chrome-ink)}.topbar .brand small{color:var(--chrome-muted);border-left-color:var(--n-600)}
.nav{display:flex;gap:4px;align-items:center;flex:1}.nav a{color:var(--chrome-muted);font-weight:500;padding:9px 12px;border-radius:var(--r-md)}.nav a:hover{color:var(--chrome-ink);background:rgba(255,255,255,.06);text-decoration:none}.nav a.active{background:var(--brand-400);color:var(--on-brand);text-decoration:none}
/* Лічильник незакритих запитів щодо даних: у них строк відповіді 30 днів,
   тож число має бути видно з будь-якої сторінки, а не лише на своїй. */
.nav-count{display:inline-block;min-width:16px;margin-left:6px;padding:1px 5px;border-radius:999px;background:var(--danger);color:var(--n-0);font-size:11px;font-weight:700;line-height:14px;text-align:center}
.nav a.active .nav-count{background:var(--n-900)}.userbox{display:flex;gap:12px;align-items:center;color:var(--chrome-muted);font-size:14px}.userbox a{color:var(--chrome-ink)}.userbox .btn{background:transparent;border-color:var(--n-600);color:var(--chrome-ink)}.userbox .btn:hover{background:rgba(255,255,255,.08);border-color:var(--n-400)}.portal-who{color:var(--chrome-muted)}.portal-who b{color:var(--chrome-ink)}.main{padding:28px 0 56px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}.card-pad{padding:22px}.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.span-2{grid-column:span 2}.span-all{grid-column:1/-1}
.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:18px}.page-head h1,h1,h2,h3{margin:0}.page-head p,.lead{margin:6px 0 0;color:var(--muted)}.section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px}
.stack{display:grid;gap:14px}.field{display:grid;gap:6px;align-content:start}.field>label,.field>.field-label{font-size:13px;font-weight:600;color:var(--n-800);line-height:20px;min-height:20px}.hint{font-size:12px;color:var(--muted)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;min-height:44px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);padding:10px 13px;color:var(--ink);font:inherit}textarea{resize:vertical;min-height:92px}input:focus,select:focus,textarea:focus{outline:3px solid var(--brand-100);border-color:var(--brand-700)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--n-300);border-radius:var(--r-md);padding:0 18px;font-family:var(--font-body);font-weight:600;font-size:14px;cursor:pointer;background:var(--n-0);color:var(--n-900)}.btn:hover{text-decoration:none;background:var(--n-100);border-color:var(--n-400)}.btn-primary{background:var(--brand-400);border-color:var(--brand-400);color:var(--on-brand)}.btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600);color:var(--on-brand)}.btn-danger{background:var(--danger-bg);border-color:var(--danger-bg);color:var(--danger)}.btn-small{min-height:36px;padding:0 14px;font-size:12px;border-radius:var(--r-md)}.actions{display:flex;gap:12px 24px;flex-wrap:wrap;align-items:center}
/* Ряд, у якому поруч із кнопкою стоять поля з підписами: кнопка має стояти
   на лінії самих полів, а не посередині підпису й поля. */
.actions:has(>.field){align-items:flex-end}
.alert{padding:12px 14px;border-radius:var(--r-md);margin-bottom:16px;border:1px solid}.alert-success{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}.alert-error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}.errors{margin:0;padding-left:20px}
/* Перелік усередині повідомлення: заявки, до яких може належати лист. */
.plain{list-style:none;margin:6px 0;padding:0}.plain li{margin:2px 0}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:20px}.kpi{padding:18px}.kpi .value{font-family:var(--font-display);color:var(--n-900);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}.kpi .label{color:var(--muted);font-size:13px}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:14px}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.table td{padding:12px;border-bottom:1px solid var(--n-100);vertical-align:top}.table tr:last-child td{border-bottom:0}.table tr:hover td{background:var(--n-50)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.small{font-size:12px}
.badge{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:var(--r-sm);background:var(--n-100);color:var(--n-700);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.badge-submitted{background:var(--brand-50);color:var(--brand-700)}.badge-received,.badge-diagnosis{background:var(--info-bg);color:var(--info)}.badge-awaiting_approval,.badge-waiting_parts{background:var(--warning-bg);color:var(--warning)}.badge-repair{background:var(--violet-bg);color:var(--violet)}.badge-ready{background:var(--success-bg);color:var(--success)}.badge-issued,.badge-closed{background:var(--n-100);color:var(--n-600)}.badge-rejected{background:var(--danger-bg);color:var(--danger)}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:18px;align-items:start}.detail-list{display:grid;grid-template-columns:180px 1fr;gap:8px 16px;font-size:14px}.detail-list dt{color:var(--muted)}.detail-list dd{margin:0;white-space:pre-wrap}.timeline{display:grid;gap:0}.event{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--n-100);font-size:13px}.tabs{display:flex;gap:12px 18px;flex-wrap:wrap}.tab{padding:8px 14px;border-radius:var(--r-md);border:1px solid var(--line);color:var(--n-600);font-weight:500;background:var(--n-0)}.tab.active{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-200);text-decoration:none}.row-warning td{background:var(--warning-bg)}.nowrap{white-space:nowrap}.col-when{width:130px}.searchbar-5{grid-template-columns:200px 220px 150px 150px auto}.link-code{font-size:28px;letter-spacing:.18em;font-weight:700}.table-list td{padding:10px 12px}.table-list{table-layout:fixed;width:100%;min-width:880px}.col-number{width:196px;white-space:nowrap}.col-number .tags{white-space:normal}.col-state{width:174px}.col-engineer{width:124px}.col-date{width:132px;white-space:nowrap}.table-list thead .col-date{white-space:normal}.table-list td{overflow-wrap:anywhere}.tags{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:6px}.tags .badge-review{margin-left:0}.tag{display:inline-block;padding:1px 6px;border-radius:var(--r-sm);background:var(--n-100);color:var(--n-600);font-size:11px}.row-link{color:inherit}.row-new td{background:var(--brand-50)}.days{margin-top:4px;font-size:12px;color:var(--muted)}.days-warn{color:var(--warning);font-weight:600}.days-bad{color:var(--danger);font-weight:600}.searchbar.searchbar-list{grid-template-columns:150px 140px 160px 160px auto 1fr auto}.btn-ghost{border-color:transparent;background:transparent}.kpis-4{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}.kpi-bad .value{color:var(--danger)}.danger{color:var(--danger)}.warn-text{color:var(--warning)}.actionbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px 28px;flex-wrap:wrap;margin:0 0 18px;padding:10px 14px;background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}.actionbar-state{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--n-700)}.actionbar-state .days{margin:0}.actionbar-actions{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}.actionbar-actions form{margin:0}.menu{position:relative}.menu summary{list-style:none;cursor:pointer}.menu summary::-webkit-details-marker{display:none}.menu-list{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;display:flex;flex-direction:column;background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:6px;z-index:30}.menu-list a{padding:8px 10px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}.menu-list a:hover{background:var(--n-50)}.card-head-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.card-head-row h2{margin:0}.error-page{padding-top:40px}.error-card{max-width:640px;margin:0 auto;text-align:center}.error-code{font-size:56px;font-weight:700;color:var(--brand-400);letter-spacing:.04em}.error-card .actions{justify-content:center}.checks{display:flex;gap:14px;flex-wrap:wrap}@media print{.topbar,.actionbar,.actionbar-actions,form,.btn,.pagination,.searchbar,.event-raw,.menu,.alert{display:none!important}.main{padding:0}.container{width:100%}.card{box-shadow:none;border:1px solid var(--n-300);break-inside:avoid}.split{grid-template-columns:1fr}body{background:var(--n-0)}}.status-track-compact{width:100%;gap:6px}.status-track-compact .status-step{font-size:11px;padding:4px 8px}.actionbar-hint{width:100%;margin:8px 0 0}.sign{max-width:960px;margin:0 auto}.sign-doc{height:46vh;min-height:280px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--n-100);margin-bottom:14px}.sign-doc iframe{width:100%;height:100%;border:0}.sign-pad{position:relative;border:2px dashed var(--n-300);border-radius:var(--r-lg);background:var(--n-0);touch-action:none}.sign-pad canvas{display:block;width:100%;touch-action:none;cursor:crosshair}.sign-baseline{position:absolute;left:24px;right:24px;bottom:34px;border-top:1px solid var(--n-300);pointer-events:none}.doc-row{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--n-100)}.doc-row:last-child{border-bottom:0}.doc-actions{display:flex;gap:12px 24px;flex-wrap:wrap}.chip-primary{background:var(--brand-400);color:var(--on-brand);border-color:var(--brand-700)}.passport-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.customer-lookup{position:relative}.lookup-results{position:absolute;left:0;right:0;top:100%;z-index:25;display:flex;flex-direction:column;background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:6px;max-height:320px;overflow:auto}.lookup-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:0;border-radius:var(--r-sm);background:transparent;text-align:left;cursor:pointer;font:inherit}.lookup-item:hover{background:var(--n-50)}.lookup-none{padding:8px 10px}.capture{max-width:640px;margin:0 auto}.stage-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.stage-tile{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;padding:8px 10px;border:2px solid var(--n-300);border-radius:var(--r-lg);background:var(--n-0);font-weight:600;text-align:center;cursor:pointer}.stage-tile input{position:absolute;opacity:0;width:0;height:0}.stage-tile:has(input:checked){border-color:var(--brand-700);background:var(--brand-50);color:var(--brand-700)}/* Плитки-спостереження на прийманні й стан коробки: як етапи знімання, але
   компактніші й багато в ряд — їх понад десять, і кожна має вміститись на телефоні. */
/* Спадний вибір на публічній формі: тридцять варіантів не мають лежати
   розсипом на сторінці. Згорнуте поле виглядає як звичайний список вибору —
   те саме, що поруч, — а розкрите показує позначки. Без сценарію теж працює:
   details відкриває браузер сам. */
.picker{border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0)}
.picker>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;list-style:none;cursor:pointer;font-size:14px;color:var(--n-900)}
.picker>summary::-webkit-details-marker{display:none}
.picker>summary::after{content:'';flex:0 0 auto;width:8px;height:8px;margin-left:4px;border-right:2px solid var(--n-600);border-bottom:2px solid var(--n-600);transform:rotate(45deg) translateY(-2px)}
.picker[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.picker[open]>summary{border-bottom:1px solid var(--n-200)}
.picker:hover{border-color:var(--n-400)}
.picker:has(:focus-visible){outline:2px solid var(--brand-400);outline-offset:2px}
.picker-state{color:var(--muted);font-size:13px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker:has(input:checked) .picker-state{color:var(--brand-700);font-weight:600}
.picker-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px;padding:8px;max-height:320px;overflow:auto}
.picker-option{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 10px;border-radius:var(--r-sm);font-size:13px;color:var(--n-700);cursor:pointer}
.picker-option:hover{background:var(--n-50)}
.picker-option input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--brand-700)}
.picker-option:has(input:checked){background:var(--brand-50);color:var(--brand-700);font-weight:600}
/* Куди везти або надсилати. Найважливіший рядок сторінки для того, хто
   відправляє посилку, — тому він не сірий дрібний текст серед підказок, а
   окремий блок. Адреса виділяється одним натисканням: половина скопійованої
   адреси гірша за жодної. */
/* Підпис до групи полів. Коли поля разом відповідають на одне питання
   («куди повернути пристрій»), це питання має стояти над ними, а не сірою
   підказкою під одним із них: під одним воно й читається як підказка до
   одного. */
.field-group{display:grid;gap:10px;padding:12px 14px;margin:12px 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--n-50)}
.field-group-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n-700)}
.ship-to{display:grid;gap:8px;padding:14px 16px;margin:12px 0;border:1px solid var(--brand-200);border-left:3px solid var(--brand-400);border-radius:var(--r-md);background:var(--brand-50)}
.ship-to-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-700)}
.ship-to-address{font-size:16px;font-weight:700;line-height:1.45;color:var(--ink);user-select:all;overflow-wrap:anywhere}
.ship-to-hours{font-size:13px;color:var(--n-700)}
/* Карта підвантажується лише за натисканням, тож місце під неї не тримаємо:
   порожня сіра пляма на пів екрана гірша за кнопку. */
.ship-map{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.ship-map iframe{width:100%;height:260px;border:1px solid var(--brand-200);border-radius:var(--r-md)}
.ship-to-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0;padding-top:8px;border-top:1px solid var(--brand-200);font-size:13px;line-height:1.45}
.ship-to-rows dt{color:var(--n-600);white-space:nowrap}
.ship-to-rows dd{margin:0;color:var(--n-900)}
.ship-to-strong{font-weight:700;letter-spacing:.03em;user-select:all}
.ship-to-note{font-size:13px;line-height:1.5;color:var(--n-700);padding-top:8px;border-top:1px solid var(--brand-200)}
.ship-to-number{font-size:17px;letter-spacing:.04em;white-space:nowrap;user-select:all}
.picker-option-alone{grid-column:1/-1;margin-top:6px;padding-top:10px;border-top:1px solid var(--n-200)}
.picker-foot{display:flex;justify-content:flex-end;padding:0 8px 8px}
.pick-tiles{display:flex;flex-wrap:wrap;gap:6px}
.pick-tile{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);font-size:13px;font-weight:600;color:var(--n-700);cursor:pointer;user-select:none}
.pick-tile input{position:absolute;opacity:0;width:0;height:0}
.pick-tile:has(input:checked){border-color:var(--brand-700);background:var(--brand-50);color:var(--brand-700);box-shadow:inset 0 0 0 1px var(--brand-700)}
.pick-tile:has(input:focus-visible){outline:2px solid var(--brand-400);outline-offset:2px}
.pick-note-label{margin-top:8px}
.capture-buttons{display:grid;gap:10px}.capture-note{margin:-2px 0 2px;line-height:1.35}.capture-btn{min-height:64px;font-size:16px;cursor:pointer}.capture-btn input{display:none}.capture-log{list-style:none;margin:0;padding:0;display:grid;gap:8px}.capture-item{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:var(--n-0)}.capture-item .progress{grid-column:1/-1}.capture-item.is-done{border-color:var(--success-line)}.capture-item.is-failed{border-color:var(--danger);background:var(--danger-bg)}.capture-item.is-short{border-color:var(--warning);background:var(--warning-bg)}.capture-warn{grid-column:1/-1;color:var(--n-800);line-height:1.35}.capture-warn:empty{display:none}.capture-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.media-stage{margin:18px 0 8px;display:flex;align-items:center;gap:8px}.media-stage h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.media-edit{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}.media-edit select{min-height:32px;font-size:12px;padding:0 8px}.media-edit .checkline{font-size:12px}.share-url{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.share-url input{flex:1;min-width:240px;font-family:var(--font-mono);font-size:13px}.doc-list{margin:0;padding-left:18px}.menu-form{min-width:320px;padding:12px}.menu-form .field{margin:0 0 8px}.disclosure summary{list-style:none;display:inline-flex;cursor:pointer}.disclosure summary::-webkit-details-marker{display:none}.disclosure[open] summary{margin-bottom:6px}.actionbar-warn{color:var(--danger);font-weight:700;text-decoration:underline;text-underline-offset:3px}.actionbar-warn:hover{color:var(--danger)}.field-due label{color:var(--danger);font-weight:700}.field-due select{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}.event-raw{margin-top:4px}.event-raw summary{cursor:pointer;list-style:none}.event-raw summary::-webkit-details-marker{display:none}.event-raw summary::before{content:'›';display:inline-block;margin-right:4px;transition:transform .15s}.event-raw[open] summary::before{transform:rotate(90deg)}.event-raw code{display:block;margin-top:4px;white-space:pre-wrap;word-break:break-all;color:var(--muted)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.media{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--n-50)}.media img,.media video{display:block;width:100%;height:150px;object-fit:contain;background:var(--n-900)}.media .meta{padding:8px;font-size:12px}
.form-section{padding:20px;border-bottom:1px solid var(--line)}.form-section:last-child{border-bottom:0}/* Ряд фільтрів над списком. Був жорсткою сіткою з порахованими стовпцями —
   і щойно підпис виростав або проміжок ставав більшим, полю пошуку лишалось
   кілька пікселів, а курсор нікуди було поставити. Тепер це ряд, який
   переноситься: у кожного фільтра своя найменша ширина, пошук забирає решту
   й ніколи не стає вужчим за 200px, кнопки тримаються праворуч. */
.searchbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.searchbar>.sel,.searchbar>select{flex:1 1 160px;min-width:150px;max-width:220px}
.searchbar>input[type=search],.searchbar>input[type=text],.searchbar>.combo{flex:4 1 220px;min-width:200px}
.searchbar>.datefield{flex:1 1 210px;min-width:190px}
.searchbar>.checks{flex:0 1 auto}
.searchbar>.actions{flex:0 0 auto;margin-left:auto}.pagination{padding:18px}
.public-hero{background:var(--chrome);color:var(--chrome-ink);border-radius:var(--r-xl);border-bottom:3px solid var(--brand-400);padding:32px;margin-bottom:18px;box-shadow:var(--sh-lg)}.public-hero h1{color:var(--chrome-ink)}.public-hero p{color:var(--n-300);max-width:720px}.public-card{overflow:hidden}.status-track{display:flex;gap:10px;flex-wrap:wrap}.status-step{font-size:12px;padding:7px 9px;border-radius:var(--r-md);background:var(--n-100);color:var(--n-500)}.status-step.active{background:var(--brand-400);color:var(--on-brand)}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.divider{height:1px;background:var(--line);margin:18px 0}.login{width:min(430px,calc(100% - 32px));margin:10vh auto}.login .card{padding:28px}.public-nav{display:flex;align-items:center;margin-bottom:18px}.empty{padding:36px;text-align:center;color:var(--muted)}
@media(max-width:900px){.grid-4,.grid-3,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.topbar .container{flex-wrap:wrap;padding:12px 0}.nav{order:3;flex:0 0 100%;width:100%;overflow:auto}.detail-list{grid-template-columns:1fr}.detail-list dd{margin-bottom:6px}}
@media(max-width:620px){.container,.public-container{width:min(100% - 20px,1240px)}.grid-2,.grid-3,.grid-4,.kpis{grid-template-columns:1fr}.span-2{grid-column:auto}.searchbar,.searchbar.searchbar-list,.searchbar-5{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.event{grid-template-columns:1fr}.userbox span{display:none}.brand small{display:none}.public-foot{flex-direction:column;align-items:flex-start;gap:8px}}
.badge-review{background:var(--warning-bg);color:var(--warning);margin-left:6px}
.checkline{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--n-600);white-space:nowrap}
.checkline input{width:auto;margin:0}
.ocr-panel{background:var(--n-50);border:1px dashed var(--n-300);border-radius:var(--r-lg);padding:16px}
.ocr-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.ocr-controls>.field{flex:1 1 280px}
.ocr-result{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.ocr-result .small.muted{flex:1 1 100%}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);cursor:pointer;font:inherit}
.chip:hover{border-color:var(--brand-400);background:var(--brand-50)}
.field-filled{border-color:var(--success)!important;background:var(--success-bg)}
.ocr-block{margin-top:6px;padding-top:6px;border-top:1px solid var(--n-200)}
.ocr-line{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:12px;margin-top:3px}
.doc-tile{display:flex;align-items:center;justify-content:center;min-height:120px;background:var(--n-100);color:var(--n-600);font-weight:700;letter-spacing:.08em;border-radius:var(--r-md);text-decoration:none}
.health-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.health-item{min-width:110px;padding:10px 14px;border:1px solid var(--n-200);border-radius:var(--r-md);background:var(--n-50)}
.health-item .value{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--n-900)}
.health-item .label{font-size:12px;color:var(--n-500)}
.health-item.is-warn{border-color:var(--warning);background:var(--warning-bg)}
.health-item.is-down{border-color:var(--danger);background:var(--danger-bg)}
.alert-warning{background:var(--warning-bg);color:var(--n-800);border:1px solid var(--warning)}
.badge-warranty-active{background:var(--success-bg);color:var(--success)}
.badge-warranty-expiring{background:var(--warning-bg);color:var(--warning)}
.badge-warranty-expired{background:var(--danger-bg);color:var(--danger)}
.badge-warranty-unknown{background:var(--n-100);color:var(--n-600)}
.warranty-expired{border-color:var(--danger)}
.warranty-expiring{border-color:var(--warning)}
.box-text{white-space:pre-wrap;padding:10px 12px;border:1px solid var(--n-200);border-radius:var(--r-md);background:var(--n-50);font-size:14px;min-height:96px}
.recovery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0}
.recovery code{display:block;padding:8px 10px;border:1px dashed var(--n-300);border-radius:var(--r-md);background:var(--n-0);font-size:15px;text-align:center}
.userbox a{color:inherit;text-decoration:none}
.kpi-inline{text-align:right;white-space:nowrap}

/* ─────────────────────────────────────────────────────────────────────────────
   Дизайн-система: керуючі елементи, які раніше лишались системними,
   і класи замість інлайнових стилів у шаблонах.
   ───────────────────────────────────────────────────────────────────────── */

/* Вибір файлів. Системна кнопка «Choose files» виглядає по-різному в кожному
   браузері й не слухається шрифта форми. Оригінальний input лишається на
   місці (він і відкриває діалог, бо всередині <label>), але не показується. */
.filepick{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px 6px 6px;border:1px dashed var(--n-300);border-radius:var(--r-md);background:var(--n-0);cursor:pointer}
.filepick:hover{border-color:var(--brand-400);background:var(--brand-50)}
.filepick:focus-within{outline:3px solid var(--brand-100);border-color:var(--brand-700);border-style:solid}
.filepick-input{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;margin:0;border:0;opacity:0;cursor:pointer}
.filepick-button{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-100);color:var(--n-900);font-size:13px;font-weight:600;white-space:nowrap}
.filepick-name{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filepick.has-files{border-style:solid;border-color:var(--success);background:var(--success-bg)}
.filepick.has-files .filepick-name{color:var(--success);font-weight:600}

/* Прапорці й перемикачі: розмір під палець, підпис не з’їжджає від базової лінії.
   Саму галочку малюємо нижче, у блоці дизайн-системи керуючих елементів. */
.checkline{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--n-700);white-space:nowrap;cursor:pointer;min-height:36px}
.checkline>span{white-space:normal}
.checkline-block{display:flex;white-space:normal;align-items:flex-start;padding:2px 0}
.checkline-block input[type=checkbox]{margin-top:3px}

/* Списки: власна стрілка, щоб висота й відступи збігалися з полями вводу.
   Це вигляд поля БЕЗ скрипта — сам розкритий перелік малює операційна
   система, і вплинути на нього звідси не можна. Зі скриптом список
   підмінюється власним (.sel нижче). */
select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235e6a78' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center}

/* Поля дати й часу в Safari виростають вище за решту — вирівнюємо явно */
input[type=date],input[type=datetime-local],input[type=time]{min-height:44px;line-height:22px}

/* Лічильники в числових полях малює браузер, і в кожному вони свої.
   Прибираємо: стрілками вгору/вниз і колесом крок працює далі. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Хрестик «очистити» в полі пошуку WebKit малює сам, і він не в дизайні */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button{-webkit-appearance:none;display:none}

/* Прапорці й перемикачі малюємо самі: accent-color задає лише колір,
   а форму галочки й товщину рамки кожна система вирішує по-своєму. */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;
    width:18px;height:18px;min-height:0;flex:0 0 auto;margin:0;padding:0;
    border:1.5px solid var(--n-400);background:var(--n-0);cursor:pointer;
    background-repeat:no-repeat;background-position:center}
input[type=checkbox]{border-radius:var(--r-sm)}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--brand-400)}
input[type=checkbox]:checked,input[type=radio]:checked{background-color:var(--brand-700);border-color:var(--brand-700)}
input[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5.2 4.3 8.5 11 1.5'/%3E%3C/svg%3E")}
input[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23ffffff'/%3E%3C/svg%3E")}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:default}

/* ─────────────────────────────────────────────────────────────────────────────
   Власний спадний список і власний календар.

   Нативний елемент лишається в розмітці: він зберігає значення, надсилається
   з формою й далі бере участь у перевірці required — просто стає прозорим.
   Саме тому він не display:none: прихований елемент браузер не вміє показати
   біля нього підказку «заповніть це поле» і мовчки блокує надсилання.
   ───────────────────────────────────────────────────────────────────────── */
.sel{position:relative;display:block;min-width:0}
.sel-native{position:absolute;left:0;top:0;width:100%;height:100%;min-height:0;
    opacity:0;pointer-events:none;border:0;padding:0;margin:0;background:none}
.sel-button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
    border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);
    padding:10px 36px 10px 13px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235e6a78' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center}
.sel-button:hover{border-color:var(--n-400)}
.sel-button.is-open{outline:3px solid var(--brand-100);border-color:var(--brand-700)}
.sel-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-value.is-placeholder{color:var(--muted)}

/* Поле з підказками: те саме поле вводу, стрілка як у списку, вікно — .ui-pop */
.combo{position:relative;display:block;min-width:0}
.combo>input{padding-right:36px}
.combo-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:34px;border:0;border-radius:0 var(--r-md) var(--r-md) 0;background:transparent no-repeat center url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235e6a78' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");cursor:pointer}
.combo.is-open>input{outline:3px solid var(--brand-100);border-color:var(--brand-700)}

.ui-pop{position:fixed;z-index:80;display:flex;flex-direction:column;overflow:hidden;
    background:var(--panel);border:1px solid var(--n-300);border-radius:var(--r-md);
    box-shadow:var(--sh-lg);font-size:14px}
.sel-search{margin:8px;min-height:38px;flex:0 0 auto}
/* Загальне правило для полів вводу (width:100%) специфічніше за клас, тому
   поле пошуку у вікні списку виходило за його межі: сто відсотків ширини
   плюс власні поля з обох боків. Тут та сама специфічність, і поле займає
   рівно те, що лишилось. */
.ui-pop>input[type=text].sel-search{width:auto;align-self:stretch}
.ui-list{list-style:none;margin:0;padding:4px;overflow:auto;scrollbar-width:thin}
.ui-list::-webkit-scrollbar{width:10px}
.ui-list::-webkit-scrollbar-thumb{background:var(--n-300);border:3px solid var(--panel);border-radius:999px}
.ui-opt{padding:9px 12px;border-radius:var(--r-md);cursor:pointer;line-height:1.35}
.ui-opt.is-placeholder{color:var(--muted)}
.ui-opt.is-active{background:var(--brand-50)}
.ui-opt.is-selected{background:var(--brand-400);color:var(--on-brand);font-weight:600}
.ui-opt.is-selected.is-placeholder{color:var(--n-0)}
.ui-opt.is-disabled{opacity:.5;cursor:default}
.ui-empty{padding:14px;color:var(--muted);text-align:center}

.datefield{position:relative;display:flex;gap:12px;align-items:stretch;min-width:0}
.date-native{position:absolute;left:0;top:0;width:100%;height:100%;min-height:0;
    opacity:0;pointer-events:none;border:0;padding:0;margin:0;background:none}
.date-text{flex:1 1 auto;min-width:0}
.date-time{flex:0 0 86px;width:86px;text-align:center}
.date-text.is-bad{border-color:var(--danger);background:var(--danger-bg)}
.date-open{flex:0 0 44px;width:44px;min-height:44px;border:1px solid var(--n-300);
    border-radius:var(--r-md);background:var(--n-0);cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect x='1.75' y='3.25' width='14.5' height='13' rx='2.5' fill='none' stroke='%23434c56' stroke-width='1.5'/%3E%3Cpath d='M1.75 7.25h14.5M5.75 1.75v3M12.25 1.75v3' fill='none' stroke='%23434c56' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center}
.date-open:hover{border-color:var(--brand-400);background-color:var(--brand-50)}
.date-open.is-open{outline:3px solid var(--brand-100);border-color:var(--brand-700)}

.cal{padding:12px;min-width:288px}
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cal-title{flex:1;text-align:center;font-family:var(--font-display);font-weight:700;color:var(--n-900)}
.cal-nav{width:34px;height:34px;border:1px solid var(--n-300);border-radius:var(--r-md);
    background:var(--n-0);color:var(--n-700);font-size:18px;line-height:1;cursor:pointer}
.cal-nav:hover{background:var(--brand-50);border-color:var(--brand-400)}
.cal-grid{display:grid;grid-template-columns:repeat(7,36px);gap:2px;justify-content:center}
.cal-dow{height:26px;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.cal-day{height:34px;border:1px solid transparent;border-radius:var(--r-md);background:none;
    color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.cal-day:hover{background:var(--brand-50);color:var(--brand-700)}
.cal-day.is-today{border-color:var(--brand-300);font-weight:700}
.cal-day.is-selected{background:var(--brand-400);border-color:var(--brand-400);color:var(--on-brand);font-weight:700}
.cal-foot{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.cal-foot .btn{flex:1}

/* Підстановка з OCR підсвічує поле — і підмінене теж */
.sel.field-filled .sel-button,.datefield.field-filled .date-text{border-color:var(--success);background:var(--success-bg)}

/* Гортання сторінок */
.pager{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
.pager-link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;
    padding:0 12px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);
    color:var(--n-800);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
a.pager-link:hover{background:var(--brand-50);border-color:var(--brand-400);color:var(--brand-700);text-decoration:none}
.pager-link.is-current{background:var(--brand-400);border-color:var(--brand-400);color:var(--on-brand)}
.pager-link.is-off{color:var(--n-400);border-color:var(--line);background:var(--n-50)}
.pager-gap{display:inline-flex;align-items:center;padding:0 4px;color:var(--muted)}
.pager-count{margin-top:10px;text-align:center;color:var(--muted);font-size:12px}

.public-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

/* Відступи, які раніше жили в інлайнових style= */
.section-top{margin-top:18px}
.section-top-small{margin-top:12px}
.section-bottom{margin-bottom:18px}
.form-top{margin-top:16px}
.alert-top{margin-top:16px}
.field-top{margin-top:12px}
.actions-top{margin-top:18px}
.actions-tight{margin-top:6px}
.actions-end{align-items:flex-end}
.actions-forms{gap:16px;flex-wrap:wrap;align-items:flex-end}
.grid-inset{margin:12px 0}
.grid-tight{gap:6px}
.alert-inset{margin:0 0 12px}
.login-brand{text-align:center;margin-bottom:18px}
.card-warning{border-color:var(--warning)}
.card-accent{border-color:var(--brand-300)}
.detail-list-narrow{grid-template-columns:110px 1fr}
.box-key{min-height:auto;font-size:18px;letter-spacing:.06em}
.box-link{min-height:auto;word-break:break-all}
.total-value{font-size:20px;font-weight:700}
.doc-row{margin-bottom:8px}
.searchbar-simple{grid-template-columns:1fr auto}
.searchbar-filter{grid-template-columns:1fr auto auto}

/* Нотатки: раніше кольори були зашиті просто в атрибут style */
.notes{margin:16px 0}
/* Примітка тепер може бути цілим листом клієнта: переноси рядків значущі
   (під «Numer seryjny» стоїть перелік вузлів), а посилання й довгі коди
   без пробілів інакше розсовували картку на телефоні. */
.note{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--n-50);white-space:pre-wrap;overflow-wrap:anywhere}.note .small{white-space:normal}
.note-public{border-color:var(--success-line);background:var(--success-bg)}
.note-payment{white-space:normal;margin-top:12px;line-height:1.6}
/* Строк ремонту: «до 03.10 · 3 дн.» тихо, «минає» жовтим, «прострочено» червоним;
   терміновий ремонт — окремий значок, бо в нього свій строк. */
.sla{display:inline-block;font-size:12px;font-weight:600;white-space:nowrap}
.sla-ok{color:var(--muted);font-weight:500}
.sla-soon{color:var(--warning)}
.sla-overdue{color:var(--danger)}
.sla-row{margin-top:2px}
.badge-urgent{background:var(--danger);color:var(--n-0);margin-left:6px}
.sla-form{margin:10px 0 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.sla-line{display:inline-flex;align-items:center;gap:8px}
.verify{padding:12px 14px;border:1px dashed var(--n-300);border-radius:var(--r-md);background:var(--n-50)}
.verify-lead{margin:0 0 8px}
.verify-input{max-width:180px;letter-spacing:.12em}

@media(max-width:620px){
    .public-foot{flex-direction:column;align-items:flex-start}
    .filepick{flex-wrap:wrap}
}

/* QR для двофакторного входу.
   width:auto — свідомо: SVG малюється з цілим розміром модуля, і будь-яке
   стиснення робить модулі різної ширини. Саме через це камера не читала
   код: 61 модуль у 218 пікселях — 3,5 пікселя на модуль. */
/* ─────────────────────────────────────────────────────────────────────────────
   Правка рядка таблиці. Форма розкривається окремим рядком на всю ширину:
   у вузькій колонці «Правка» поля обрізались і половину форми не було видно.
   ───────────────────────────────────────────────────────────────────────── */
.card-summary{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--n-900);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.card-summary::-webkit-details-marker{display:none}
.card-summary::before{content:'';width:8px;height:8px;border-right:2px solid var(--n-500);border-bottom:2px solid var(--n-500);transform:rotate(-45deg);transition:transform .15s ease}
details[open]>.card-summary::before{transform:rotate(45deg)}
.table-editable td{vertical-align:middle}
.table-editable .col-action{width:1%;white-space:nowrap;text-align:right;vertical-align:top}
.row-edit>td{background:var(--n-50);border-bottom:2px solid var(--line);padding:18px}
.table-editable tr.row-edit:hover>td{background:var(--n-50)}
.edit-form{align-items:start}

/* Підписи «нетто» / «брутто». Найдорожча плутанина в сервісі — 23% різниці
   між тим, що в прайсі, і тим, що клієнт платить. Жодна сума не показується
   без підпису, тому підпис зроблено дрібним, але постійним. */
.tag-net,.tag-gross{display:inline-block;padding:1px 6px;border-radius:var(--r-sm);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.tag-net{background:var(--n-100);color:var(--n-600)}
.tag-gross{background:var(--info-bg);color:var(--info)}
.totals{text-align:right;min-width:230px}
.totals-row{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:2px 0}
.totals-gross{border-top:1px solid var(--line);margin-top:4px;padding-top:6px;font-weight:700;color:var(--n-900)}
.totals-note{margin-top:4px}

/* Історія пристрою: той самий серійник уже бував у сервісі. */
.history{border-color:var(--info)}
.history-return{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.history .row-return>td{background:var(--danger-bg)}
.badge-repeat{background:var(--info-bg);color:var(--info)}
.badge-return{background:var(--danger);color:var(--n-0)}
a.badge-repeat:hover,a.badge-return:hover{text-decoration:none;filter:brightness(1.08)}
.alert-danger{background:var(--danger-bg);color:var(--n-800);border:1px solid var(--danger)}
.serial-hint{font-size:12px;padding:6px 10px;border-radius:var(--r-md);line-height:1.4}
.serial-hint.is-new{background:var(--n-100);color:var(--n-600)}
.serial-hint.is-known{background:var(--warning-bg);color:var(--warning);font-weight:600}
.serial-hint a{color:inherit;text-decoration:underline}

@media(max-width:900px){
    .totals{min-width:0;width:100%}
    .row-edit>td{padding:12px}
}

.qr{margin:14px 0 0;display:grid;gap:8px;justify-items:start}
.qr svg{display:block;width:auto;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--n-0)}

/* ─────────────────────────────────────────────────────────────────────────────
   Помилки біля полів, підтвердження, тип заявки
   ───────────────────────────────────────────────────────────────────────── */
.field-error{font-size:12px;color:var(--danger);font-weight:600;line-height:1.35}
[aria-invalid=true]:not([type=checkbox]):not([type=radio]),.field:has(.field-error)>input:not([type=checkbox]):not([type=radio]),.field:has(.field-error)>textarea,.field:has(.field-error)>.sel>.sel-button,.field:has(.field-error)>.datefield>.date-text{border-color:var(--danger);background:var(--danger-bg)}

.confirm{border:1px solid var(--n-300);border-radius:var(--r-lg);padding:22px;max-width:min(440px,calc(100% - 32px));box-shadow:var(--sh-lg);color:var(--ink);font-family:var(--font-body)}
.confirm::backdrop{background:var(--overlay)}
.confirm-title{margin:0 0 8px}
.confirm-text{margin:0 0 18px;line-height:1.5}
.btn.is-busy{opacity:.6;cursor:progress}
.btn-block{width:100%}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:var(--n-0)}

/* Перемикач з кількох варіантів */
.segmented{display:inline-flex;border:1px solid var(--n-300);border-radius:var(--r-md);overflow:hidden;background:var(--n-0)}
.segmented-item{position:relative;display:flex;align-items:center;min-height:44px;padding:0 18px;cursor:pointer;font-weight:600;color:var(--n-700);border-right:1px solid var(--n-300)}
.segmented-item:last-child{border-right:0}
.segmented-item input{position:absolute;opacity:0;width:0;height:0;margin:0}
.segmented-item:has(input:checked){background:var(--brand-400);color:var(--on-brand)}
.segmented-item:has(input:focus-visible){outline:2px solid var(--brand-400);outline-offset:-2px}

.badge-case-warranty{background:var(--success-bg);color:var(--success)}
.badge-case-paid{background:var(--warning-bg);color:var(--warning)}
.badge-case-partner_rma{background:var(--info-bg);color:var(--info)}
.badge-case-goodwill{background:var(--violet-bg);color:var(--violet)}
/* Шлях повернення: свої стани й свій колір поруч із номером. Помаранчевий — як
   */
.badge-inspection{background:var(--info-bg);color:var(--info)}
.badge-decision{background:var(--warning-bg);color:var(--warning)}
.badge-flow-return{background:var(--orange-bg);color:var(--orange)}
.tag-return{background:var(--orange-bg);color:var(--orange)}
.flow-tiles{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.flow-tiles .stage-tile{min-height:48px}
.return-tiles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}

/* Контраст: фокус-рамка полів і рамка самого поля */
input:focus,select:focus,textarea:focus,.sel-button:focus-visible,.date-text:focus{outline:2px solid var(--brand-400);outline-offset:1px;border-color:var(--brand-700)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.sel-button,.date-open{border-color:var(--n-400)}

/* Сторінка статусу: кроки з датами, що далі, повідомлення клієнта */
.status-step{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px}
.status-step small{font-size:10px;opacity:.8}
.status-step.done{background:var(--success-bg);color:var(--success)}
.steps{margin:0;padding-left:22px;display:grid;gap:6px}.steps-card{display:grid;gap:6px}
.note-client{border-color:var(--info);background:var(--info-bg)}
.badge-pay-unpaid{background:var(--danger-bg);color:var(--danger)}
.badge-pay-paid,.badge-pay-not_required{background:var(--success-bg);color:var(--success)}
.badge-pay-invoiced{background:var(--info-bg);color:var(--info)}

/* Експорт: смуга поступу */
.export-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.progress{height:12px;border-radius:999px;background:var(--n-100);overflow:hidden;border:1px solid var(--n-200)}
.progress-fill{height:100%;width:0;background:var(--brand-400);border-radius:999px;transition:width .4s ease}
.export-progress.is-busy .progress-fill{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent);background-size:24px 24px;animation:progress-stripes 1s linear infinite}
@keyframes progress-stripes{from{background-position:0 0}to{background-position:24px 0}}

/* Кошторис на сторінці статусу */
.estimate{margin:12px 0;padding:14px;border:1px solid var(--warning);border-radius:var(--r-md);background:var(--warning-bg)}
.table-compact td{padding:6px 8px;background:transparent!important}
.table-compact tr.total td{border-top:1px solid var(--warning);border-bottom:0}
.right{text-align:right}

/* ─────────────────────────────────────────────────────────────────────────────
   Телефон (≤620px). Одним блоком наприкінці файла, щоб перекривати все вище.
   Правила гри:
   - сторінка ніколи не прокручується вбік; таблиця стає стосом карток, а підпис
     стовпчика показується над значенням із data-label (app.js переносить його
     з thead — initTableLabels);
   - дії заявки — окремою панеллю внизу екрана, під великим пальцем; стан
     і попередження лишаються згори, біля номера;
   - поля вводу 16px: iOS Safari збільшує сторінку на фокусі, якщо менше;
   - меню розділів — стрічка з прокручуванням, активний розділ підʼїжджає
     в кадр (initNav).
   ───────────────────────────────────────────────────────────────────────── */
/* Прапорець поруч із полями: підпис зверху займає 20px + 6px відступу, тож
   без цієї подушки галочка стояла вище за сусідні поля. Раніше це було
   число в style= прямо в шаблоні — його ніхто не оновить, коли зміниться
   висота підпису, і воно розʼїдеться тихо. */
.field-check{padding-top:38px}
.field-end{align-self:end}

/* Сторінка заявки: один ритм. Заголовки карток — одного розміру (дрібні
   капітелі, як «Клієнт і пристрій»), а не 28px поруч із 12px; між блоками
   однакові 18px; номер заявки не ламається на два рядки — доріжка станів
   переходить під нього, коли не вміщається. */
.page-head{flex-wrap:wrap}.page-head>div:first-child{flex:1 1 320px;min-width:0}.page-head h1.mono{white-space:nowrap}
.card .page-head{margin-bottom:12px;align-items:flex-start;gap:10px 16px}.card .page-head h2{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);line-height:20px}.card .page-head p{margin:4px 0 0;font-size:13px}
.card>h2.section-title,.card>.card-pad>h2.section-title{margin-bottom:12px}
.split>.stack{gap:18px}
.steps-head{display:grid;gap:4px}.steps-head p{max-width:72ch}

/* Текст і кнопка в одному ряду — не сусіди. Довгий підпис прапорця («також
   надіслати листом на …») упирався прямо в кнопку «Надіслати», і кнопка
   читалась як продовження фрази. Кнопки після тексту йдуть до правого краю;
   на вузькому екрані ряд переноситься, і auto нічого не робить. */
.actions>label+.btn,.actions>span+.btn,.actions>p+.btn,.actions>label+button,.actions>span+button,.actions>p+button{margin-left:auto}
/* Панель дій: кроки процесу окремо від інструментів (камера, документи) —
   між групами риска, інакше пʼять різних кнопок читаються одним рядком. */
.actionbar-tools{display:flex;align-items:center;gap:14px 24px;margin-left:4px;padding-left:28px;border-left:1px solid var(--n-300)}
/* Значок поруч із текстом у списку означень: 4px виглядали як одне слово. */
.detail-list dd>.badge+span,.detail-list dd>.badge+.small{margin-left:6px}

/* Заготовки: список стоїть у рядку з підписом поля, а не над ним — інакше
   форма з шести полів виростає вдвічі. Список вужчий за поле й візуально
   тихіший: він спосіб набрати текст, а не саме значення. */
.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;min-height:20px}
.field-head>label,.field-head>.field-label{font-size:13px;font-weight:600;color:var(--n-800);line-height:20px}
.preset-pick{flex:0 1 auto;max-width:min(320px,60%);min-height:32px;padding:4px 10px;font-size:12px;color:var(--n-600);background:var(--n-50)}
.preset-pick+textarea,.preset-pick+input{margin-top:2px}
/* Плитки приймання: скільки обрано й кнопка зняти — у тому самому рядку. */
.pick-state{display:flex;align-items:center;gap:10px}

/* Вкладка «Клієнт»: листування одним стовпцем. Від нас — праворуч, темніше;
   від клієнта — ліворуч, світліше: як у будь-якому листуванні, без підписів
   «хто». Рамка зі сторінкою статусу — та сама сторінка, що в клієнта. */
.thread{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.msg{max-width:min(720px,92%);padding:10px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--n-50)}
.msg-out{margin-left:auto;background:var(--brand-50);border-color:var(--brand-200)}
.msg-mail{border-style:dashed}
.msg-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:13px}
.msg-dir{font-weight:700;color:var(--brand-700)}.msg-in .msg-dir{color:var(--info)}
.msg-title{font-weight:600}
.msg-when{margin-left:auto;white-space:nowrap}
.msg-body{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.msg.is-new{border-color:var(--info);box-shadow:0 0 0 3px var(--info-bg)}
.client-preview{width:100%;height:820px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--n-0);margin-top:8px}

/* «Що далі»: кроки для поточного стану. Зроблене — зелена галочка й
   закреслене; те, без чого перехід не спрацює, — червоний знак оклику.
   Кнопка переходу стоїть тут же, коли обовʼязкове зроблено. */
.steps-head .section-title{margin:0}.steps-head p{margin:0}
.steps-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.step{display:flex;align-items:center;gap:12px;font-size:14px;min-height:28px}
.step-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--n-300);font-size:12px;font-weight:700;color:var(--n-500);flex:0 0 auto}
.step.is-done .step-mark{background:var(--success-bg);border-color:var(--success);color:var(--success)}
.step.is-done .step-label{color:var(--muted);text-decoration:line-through}
.step.is-required .step-mark{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.step-note{color:var(--danger)}
.steps-next{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.steps-next form{margin:0}

/* Вкладки заявки. Бейдж має колір за змістом: червоний — блокер процесу,
   жовтий — незавершене, синій — нове з останнього візиту. Число без кольору
   змушувало б відкривати вкладку, щоб дізнатись, що там. */
.tabs-nav{margin-bottom:18px}
.tabs-nav .tab{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tab-badge-block{background:var(--danger);color:var(--n-0)}
.tab-badge-pending{background:var(--warning-bg);color:var(--warning);border:1px solid var(--warning-line)}
.tab-badge-fresh{background:var(--info);color:var(--n-0)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Кнопки-розкривачі в один ряд. Кожна details — блок, тому дві поспіль стояли
   одна під одною врізнобій; у ряду закриті стоять поруч, а відкрита займає
   всю ширину під ними. */
.disclosure-row{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start}
.disclosure-row>.disclosure{flex:0 0 auto}
.disclosure-row>.disclosure[open]{flex:1 0 100%}
.disclosure-row>.disclosure[open]>summary{margin-bottom:0}

/* Автозбереження форм: набране лежить на сервері, але в заявці його ще немає.
   Колір попередження, а не помилки: нічого не зламалось, але й не збережено.
   Найважливіше тут — щоб поле з чернеткою не виглядало як звичайне заповнене
   поле: інакше людина певна, що дані вже в базі. */
.draft-note{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--warning-line);border-radius:var(--r-md);background:var(--warning-bg);color:var(--n-800);font-size:13px;line-height:1.4}
.draft-message{font-weight:600}
.draft-status{margin-left:auto;white-space:nowrap}
.draft-error{flex-basis:100%;font-weight:600}
.field.is-draft>label,.field.is-draft>.field-label{color:var(--warning)}
input.is-draft,select.is-draft,textarea.is-draft,.is-draft>.ui-select,.is-draft>.ui-date{border-color:var(--warning);box-shadow:0 0 0 3px var(--warning-bg)}
input.is-conflict,select.is-conflict,textarea.is-conflict{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.draft-conflict{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--danger)}

/* Швидкі черги над списком заявок: готові посиланнями, свої — поруч із ними.
   Чіп із хрестиком — це посилання й форма видалення в одній рамці, тож рамку
   малює обгортка, а не сам чіп. */
.filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filter-chips .chip{text-decoration:none;color:var(--n-700)}
.filter-chips .chip-primary{color:var(--on-brand)}
.chip-own{display:inline-flex;align-items:center;gap:2px}
.chip-own form{margin:0}
.chip-remove{border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;line-height:1;padding:6px 6px;border-radius:var(--r-md)}
.chip-remove:hover{background:var(--n-100);color:var(--danger)}
.menu-list-pad{padding:12px}

/* Панель групових дій: зʼявляється лише коли щось обрано. */
.bulk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:0 0 12px;padding:10px 14px;background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--r-lg)}
.bulk-bar select{min-width:180px}
.bulk-count{font-weight:600;color:var(--brand-700)}
.bulk-bar [data-bulk-clear]{margin-left:auto}
.col-pick{width:40px}
.col-pick input{width:18px;height:18px}

/* Шапка: пунктів меню побільшало, і на звичайному ноутбуці вони почали
   тиснути кутовий блок — «Прайс робіт» ламався на два рядки, а «Вийти»
   виїжджало за край екрана. Підпис пункту не переноситься ніколи, меню
   гортається замість того, щоб стискати сусіда, а кутовий блок не
   стискається взагалі: у ньому вихід. */
.nav{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap}
.userbox{flex:0 0 auto;white-space:nowrap}
.userbox a{white-space:nowrap}
.topbar .container{flex-wrap:wrap;gap:10px 16px;padding:10px 0;min-height:0}
.nav{order:3;flex:0 0 100%;width:100%;padding-bottom:2px}
.userbox{margin-left:auto}

/* Доріжка станів має читатись як шлях, а не як купка міток поруч.
   Горизонтальна з переносом ним і не читалась: шість кроків у вузькій картці
   лягали по три-два-один, рядки виходили рваними, а стрілка наприкінці рядка
   вказувала в порожнечу. Вертикальна читається згори вниз незалежно від
   ширини картки й кількості кроків — і має те, чого бракувало: суцільну
   лінію, по якій одразу видно, скільки шляху пройдено й скільки лишилось.
   Компактна доріжка в шапці заявки лишається горизонтальною: там вона над
   кнопками дії й має триматись одного рядка. */
.status-step{position:relative}
.status-track:not(.status-track-compact){display:grid;gap:0}
.status-track:not(.status-track-compact) .status-step{display:block;padding:0 0 18px 30px;background:none;border-radius:0;box-shadow:none;animation:none;font-size:13px;line-height:1.35;color:var(--n-500)}
.status-track:not(.status-track-compact) .status-step:last-child{padding-bottom:0}
.status-track:not(.status-track-compact) .status-step small{display:block;margin-top:2px;font-size:11px;opacity:1;color:var(--muted)}
/* Кружок кроку й лінія до наступного. Лінія тягнеться від краю кружка до
   самого низу кроку, тож сусідні відрізки сходяться без розривів. */
.status-track:not(.status-track-compact) .status-step::before{content:'';position:absolute;left:0;top:2px;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--n-300);border-radius:50%;background:var(--n-0)}
.status-track:not(.status-track-compact) .status-step:not(:last-child)::after{content:'';position:absolute;left:6px;top:18px;bottom:0;width:2px;background:var(--n-200)}
.status-track:not(.status-track-compact) .status-step.done{color:var(--n-600)}
.status-track:not(.status-track-compact) .status-step.done::before{border-color:var(--success);background:var(--success)}
.status-track:not(.status-track-compact) .status-step.done:not(:last-child)::after{background:var(--success)}
.status-track:not(.status-track-compact) .status-step.active{color:var(--ink);font-weight:600}
.status-track:not(.status-track-compact) .status-step.active::before{border-color:var(--brand-400);background:var(--brand-400);box-shadow:0 0 0 4px var(--brand-100)}
.status-track.status-track-compact{align-items:center;gap:14px 0}
.status-track-compact .status-step:not(:last-child){margin-right:42px}
.status-track-compact .status-step:not(:last-child)::after{content:'';position:absolute;left:calc(100% + 17px);top:50%;width:8px;height:8px;margin-top:-5px;border-right:2px solid var(--n-300);border-top:2px solid var(--n-300);transform:rotate(45deg)}
.status-track-compact .status-step.done:not(:last-child)::after{border-color:var(--success)}
.status-track-compact .status-step{flex-direction:row;align-items:center;gap:6px;font-weight:600}
.status-track-compact .status-step.done::before{content:'✓';font-weight:700;line-height:1}
.status-step.active{box-shadow:0 0 0 3px var(--brand-100)}

/* Один спокійний удар на відкриття сторінки: око знаходить поточний крок і
   далі не смикається. Тим, хто вимкнув анімації в системі, — нічого. */
@keyframes step-pulse{from{box-shadow:0 0 0 3px var(--brand-100)}50%{box-shadow:0 0 0 9px var(--brand-glow)}to{box-shadow:0 0 0 3px var(--brand-100)}}
.status-step.active{animation:step-pulse 2.2s ease-in-out 2}
@media(prefers-reduced-motion:reduce){.status-step.active{animation:none}}

/* «Що далі» згортається: підпис лишається рядком, у якому видно те, заради
   чого блок відкривали б, — скільки кроків лишилось і який найближчий. */
.steps>.steps-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;cursor:pointer;list-style:none;padding-left:0;margin:0 0 4px}
.steps>.steps-summary::-webkit-details-marker{display:none}
.steps>.steps-summary::before{content:'';flex:0 0 auto;width:8px;height:8px;margin-right:2px;border-right:2px solid var(--n-500);border-bottom:2px solid var(--n-500);transform:rotate(-45deg);transition:transform .15s ease}
.steps[open]>.steps-summary::before{transform:rotate(45deg)}
.steps>.steps-summary .section-title{margin:0}
.steps-summary-note{margin-left:auto;text-align:right}
.steps[open] .steps-summary-note{display:none}

/* Кабінет партнера: у кутовому блоці — хто і від чийого імені. */
.portal-who{font-size:13px;white-space:nowrap}
/* ── Чим скінчилось ───────────────────────────────────────────────────────
   Стоїть там само, де в живій заявці «Що далі»: на це місце людина дивиться
   першим, і питання до закритої заявки — «чим воно скінчилось?». */
.closed-summary{border-left:3px solid var(--n-300)}
.closed-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.closed-list{display:grid;grid-template-columns:210px 1fr;gap:6px 18px;margin:14px 0 0;font-size:14px}
.closed-list dt{color:var(--muted)}
.closed-list dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
/* ── Розділи вкладки приймання ────────────────────────────────────────────
   Сімнадцять полів поспіль однією сіткою читались як одна анкета, і поля з
   різних моментів життя заявки («Запчастину очікуємо» на щойно поданій)
   стояли в ній нарівні з тими, що заповнюють просто зараз. Тепер кожен
   розділ — окремий блок, а той, час якого настав, помічений смугою збоку й
   не згортається за замовчуванням. */
.ticket-part{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-bottom:12px;background:var(--n-0)}
.ticket-part.is-active{border-color:var(--brand-300);box-shadow:inset 3px 0 0 var(--brand-400)}
/* Прострочений розділ — сильніший за «зараз саме час»: без нього заявка далі
   не піде. Якби обидва виглядали однаково, «зараз саме час» на пʼяти
   розділах поспіль перестало б означати будь-що. */
.ticket-part.is-due{border-color:var(--warning-line);box-shadow:inset 3px 0 0 var(--warning)}
.badge-due{background:var(--warning-bg);color:var(--warning)}
/* Картка, час якої ще не настав або вже минув: приглушена, але робоча. */
.is-offstage{opacity:.72}
.is-offstage:hover,.is-offstage:focus-within{opacity:1}
.ticket-part-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;cursor:pointer;list-style:none}
.ticket-part-head::-webkit-details-marker{display:none}
.ticket-part-head::before{content:'▸';color:var(--muted);font-size:12px;line-height:1}
.ticket-part[open]>.ticket-part-head::before{content:'▾'}
.ticket-part-title{font-size:13px;font-weight:700;color:var(--n-800)}
.badge-now{background:var(--brand-100);color:var(--brand-800)}
.ticket-part-lead{margin:8px 0 0}
.ticket-part-body{margin-top:12px}
/* ── Юридичні особи партнера ──────────────────────────────────────────────
   Кілька форм поспіль в одній комірці таблиці зливаються в суцільне поле
   вводу: не видно, де закінчується одне ТОВ і починається наступне. Тому
   кожна стоїть окремою карткою, а не просто рядком полів. */
.entities{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.entity-form{padding:14px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--n-50)}
.entity-form:last-of-type{margin-bottom:16px}
/* ── Повідомити про проблему ──────────────────────────────────────────────
   Кнопка стоїть у кутку кожної сторінки панелі, тому вона навмисно мала й
   тиха: помітна, коли її шукають, і не заважає, коли працюють. На вузькому
   екрані від неї лишається сам значок — підпис там зʼїдає половину ширини.
   Знизу вона піднята над панеллю дій заявки, яка на телефоні прибита до
   низу екрана. */
.report-fab{position:fixed;right:16px;bottom:calc(16px + var(--actionbar-h,0px));z-index:30;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--n-300);border-radius:999px;background:var(--n-0);color:var(--n-800);font-size:13px;font-weight:600;box-shadow:var(--sh-md)}
.report-fab:hover{background:var(--n-100);border-color:var(--n-400);color:var(--n-900);text-decoration:none}
.issue-dialog{width:min(620px,calc(100% - 32px));max-height:calc(100vh - 48px);border:1px solid var(--n-300);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-lg);color:var(--ink);font-family:var(--font-body);overflow:auto}
.issue-dialog::backdrop{background:var(--overlay)}
.issue-dialog-title{margin:0 0 4px}
.issue-dialog .issue-form{margin-top:14px}
/* Те, що форма додає сама. Рамка ліворуч, а не картка: це примітка до
   форми, а не окремий її розділ. */
.issue-collected{border-left:2px solid var(--line);padding-left:12px}
.issue-collected ul{margin:4px 0 0;padding-left:16px}
.issue-collected li{overflow-wrap:anywhere}
/* Пул звернень. Смуга ліворуч — єдине, що відрізняє «стоїть робота» від
   решти, коли карток на сторінці двадцять. */
.issue-card{border-left:3px solid var(--line)}
.issue-card.is-blocking{border-left-color:var(--danger)}
.issue-card.is-highlight{border-left-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-glow)}
.issue-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.issue-id{font-weight:700;color:var(--n-900)}
.issue-body{margin:12px 0 8px;white-space:pre-wrap;overflow-wrap:anywhere}
.issue-where{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.issue-shots{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.issue-shots img{display:block;width:180px;height:112px;object-fit:cover;object-position:top left;border:1px solid var(--line);border-radius:var(--r-md)}
.issue-details{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.issue-details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--n-800)}
.issue-errors{margin:8px 0 0;padding-left:18px}
.issue-errors li{margin:3px 0;overflow-wrap:anywhere}
.issue-context{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:8px 0 0}
.issue-context dd{margin:0;overflow-wrap:anywhere}
/* Три відповіді поряд: «вирішено», «відхилити», «те саме, що №». У стовпчик
   вони перетворюють картку на анкету, тому стоять в один ряд, поки місце є. */
.issue-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.issue-answer-text{margin:6px 0 0;white-space:pre-wrap}
.nav-count-danger,.nav a.active .nav-count-danger{background:var(--danger)}
@media(max-width:620px){
body{overflow-x:hidden}
.main{padding:16px 0 40px}
h1{font-size:26px;line-height:32px}h2{font-size:21px;line-height:28px}h3{font-size:17px;line-height:24px}
.card-pad{padding:16px 14px}
.page-head{gap:10px;margin-bottom:14px}
.page-head>.btn,.page-head>.actions>.btn{width:100%}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.sel-button,.date-text{font-size:16px}
.btn{min-height:44px}
.btn-small{min-height:40px}
.actions>.btn,.actions>form{flex:1 1 auto}
.actions>form>.btn{width:100%}
.checkline{white-space:normal}

/* шапка: логотип і вихід у першому рядку, розділи — стрічкою під ними */
.topbar .container{gap:8px 12px;min-height:0;padding:10px 0}
.nav{order:3;display:flex;gap:4px;flex:0 0 calc(100% + 20px);width:calc(100% + 20px);margin:0 -10px;padding:0 10px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;padding:8px 12px;font-size:14px;flex:0 0 auto}
.userbox{margin-left:auto;gap:8px}

/* огляд: плитки по дві, компактніше */
.kpis,.kpis-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kpi{padding:12px 14px}.kpi .value{font-size:26px}.kpi .label{font-size:12px}
.health-item{flex:1 1 calc(50% - 10px);min-width:0}

/* пошук у списку: рядок пошуку першим і на всю ширину, фільтри — по два */
.searchbar,.searchbar.searchbar-list,.searchbar-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.searchbar input[type=search],.searchbar>.checks,.searchbar>.actions{grid-column:1/-1}
.searchbar input[type=search]{order:-1}
.searchbar-simple,.searchbar-filter{grid-template-columns:1fr}

/* таблиці → картки */
.table-wrap{overflow:visible}
.table-list{min-width:0;table-layout:auto}
.table thead{display:none}
.table,.table tbody,.table tr,.table td{display:block;width:auto}
.table tr{padding:10px 0;border-bottom:1px solid var(--n-100)}
.table tbody tr:last-child{border-bottom:0}
.card>.table-wrap>.table tr{padding-left:14px;padding-right:14px}
.table tr:hover td{background:transparent}
.table td,.table-compact td,.table-list td{padding:3px 0;border:0;overflow-wrap:anywhere}
.table td:first-child{padding-top:0}
.table td:empty{display:none}
.table td[data-label]:not([data-label=""])::before{content:attr(data-label);display:inline-block;margin:0 6px 0 0;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--n-500);vertical-align:baseline}
.table td[data-label]:not([data-label=""]):first-child::before{display:none}
.col-number,.col-state,.col-engineer,.col-date,.col-when{width:auto;white-space:normal}
.table .nowrap{white-space:normal}
.table-editable .col-action{width:auto;text-align:left;white-space:normal;padding-top:8px}
.row-edit>td{padding:12px 0}
.table td.empty{padding:6px 0}
.table td.right{text-align:left}
.table-compact tr.total{border-top:1px solid var(--warning)}
.table-compact tr.total td{border-top:0}
.totals{min-width:0;width:100%}

/* заявка: стан згори, кнопки — панеллю внизу екрана */
.actionbar{position:static;margin:0 0 14px;padding:10px 12px}
.actionbar-state{gap:6px 10px;font-size:13px}
.actionbar-actions{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:var(--n-0);border-top:1px solid var(--line);box-shadow:var(--sh-up)}
.actionbar-actions form,.actionbar-actions .menu{width:100%;margin:0}
.actionbar-actions .btn{width:100%;min-height:44px;font-size:13px;padding:0 10px}
.actionbar-actions .menu-list{top:auto;bottom:calc(100% + 8px);left:0;right:0;min-width:0}
body:has(.actionbar-actions) .main{padding-bottom:calc(var(--actionbar-h,200px) + 16px + env(safe-area-inset-bottom))}
.menu-list{min-width:min(260px,calc(100vw - 20px))}
.menu-form{min-width:0}

/* решта */
.portal-who{display:none}
.steps-summary-note{margin-left:0;text-align:left;flex-basis:100%}
.status-track-compact{gap:8px}
.status-track-compact .status-step:not(:last-child){margin-right:0}
.status-track-compact .status-step:not(:last-child)::after{display:none}
.searchbar>*{flex:1 1 100%;max-width:none}
.searchbar>.actions{margin-left:0}
.bulk-bar{position:sticky;bottom:0;z-index:15}
.bulk-bar select,.bulk-bar .btn{width:100%}
.bulk-bar [data-bulk-clear]{margin-left:0}
.filter-chips{gap:8px}
.preset-pick{max-width:100%;flex:1 1 100%}
.field-head{gap:6px}
.actionbar-tools{display:contents}
.actions>label+.btn,.actions>span+.btn,.actions>p+.btn,.actions>label+button,.actions>span+button,.actions>p+button{margin-left:0}
.msg{max-width:100%}.msg-when{margin-left:0;white-space:normal}.client-preview{height:560px}
.page-head h1.mono{white-space:normal;overflow-wrap:anywhere}
/* На телефоні page-head — колонка, і flex-basis:320px першого блока став би
   його ВИСОТОЮ: між номером заявки й доріжкою станів зяяло 300px порожнечі. */
.page-head>div:first-child{flex-basis:auto}
.field-check{padding-top:0}
.tabs-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-10px;padding-inline:10px}
.tabs-nav::-webkit-scrollbar{display:none}
.tabs-nav .tab{white-space:nowrap;flex:0 0 auto}
.disclosure-row>.disclosure{flex:1 1 auto}
.disclosure-row>.disclosure>summary{width:100%;justify-content:center}
.draft-status{margin-left:0;flex-basis:100%;white-space:normal}
.ui-pop{max-width:calc(100vw - 16px)}
.detail-list{grid-template-columns:1fr;gap:2px 0}
.detail-list dt{margin-top:8px;font-size:12px}
.event{grid-template-columns:1fr;gap:2px;padding:8px 0}
.status-track-compact .status-step{font-size:11px;padding:4px 7px}
.tabs .tab{padding:8px 10px;font-size:13px}
.doc-row{flex-direction:column}
.share-url input{min-width:0;width:100%}
.stage-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.capture-btn{min-height:56px}
.sign-doc{height:38vh}
.split,.grid{gap:12px}
.section-top{margin-top:14px}
.pagination{padding:12px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.link-code{font-size:22px;letter-spacing:.12em}
.error-code{font-size:44px}
.confirm{padding:16px}
.public-container{margin:16px auto 40px}
.report-fab{right:10px;padding:0 10px}
.report-fab-text{display:none}
.issue-dialog{padding:16px}
.issue-actions{grid-template-columns:1fr}
.issue-shots img{width:140px;height:88px}
.closed-list{grid-template-columns:1fr;gap:2px 0}
.closed-list dd{margin-bottom:8px}
}