/* parkd — оболонка порталу.
   Кольори, розміри й радіуси беруться ТІЛЬКИ з tokens.css. Правила
   застосування — .claude/skills/ui-tokens. Нового відтінку тут не з'являється. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 28px; height: 28px; }

/* Поле, яке бачить лише менеджер паролів і не бачить людина. Потрібне поряд
   із полем нового пароля: без логіна поруч менеджер пропонує зберегти пароль
   під обліковим записом того, хто зараз у системі. */
.offscreen {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.skip {
  position: absolute; left: -9999px; top: var(--sp-2);
  background: var(--surface-raised); color: var(--text);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-btn);
}
.skip:focus { left: var(--sp-4); z-index: 10; }

/* ---------- каркас ---------- */

.shell { display: flex; min-height: 100vh; }

.nav {
  width: var(--w-sidebar);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-4);
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.nav__brand {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  font-weight: 700;
  color: var(--text);
  padding: 0 var(--sp-3);
}

.nav__items { display: flex; flex-direction: column; gap: var(--sp-1); }

.nav__item {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--h-control);
  padding: 0 var(--sp-3);
  border-left: 3px solid transparent;
  border-radius: var(--r-btn);
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
}
.nav__item:hover { background: var(--surface-raised); color: var(--text); }
.nav__item.is-active {
  background: var(--surface-raised);
  border-left-color: var(--accent);
  color: var(--text);
}
.nav__item.is-active .icon { color: var(--accent); }

.nav__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-3); }
.nav__user { display: flex; flex-direction: column; }
.nav__name { font-weight: 500; }
.nav__role {
  font-size: var(--fs-cap); line-height: var(--lh-cap);
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  color: var(--text-muted);
}

.main { flex: 1; min-width: 0; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); }

.entry {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
}

/* ---------- типографіка ---------- */

.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  font-weight: 700; margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  font-weight: 600; margin: 0 0 var(--sp-4);
}
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.head__sub { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-sm); max-width: 68ch; }
.muted { color: var(--text-muted); }
.num { font-family: var(--font-mono); font-size: var(--fs-num); line-height: var(--lh-num); font-variant-numeric: tabular-nums; }
.ta-r { text-align: right; }

.back {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--text-muted); text-decoration: none;
  font-size: var(--fs-sm); margin-bottom: var(--sp-2);
}
.back:hover { color: var(--text); }

.empty { color: var(--text-muted); padding: var(--sp-8) 0; text-align: center; }

.notice {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.notice--danger { border-color: var(--danger); background: var(--danger-soft); color: var(--text); }

/* ---------- картки ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--sh-1);
}
.card__hint { margin: 0 0 var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
/* Підказка під переліком або таблицею йде без верхнього відступу і злипається
   з останнім рядком; підказка в кінці картки, навпаки, додає зайві 16px до
   нижнього поля, і картка виглядає з різними полями зверху й знизу. */
.props + .card__hint, .table-scroll + .card__hint, .table + .card__hint { margin-top: var(--sp-4); }
.card > .card__hint:last-child, .card > *:last-child { margin-bottom: 0; }

.card--entry { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--sp-4); }
.entry__hint { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* Форма, що стоїть після переліку в картці, — окрема дія, а не ще один рядок
   таблиці. Без відступу «Додати машину» і «Звірити зараз» злипались із нею. */
.card > .table-scroll + form, .card > .props + form { margin-top: var(--sp-4); }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-6); align-items: start; }

.props { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--sp-3) var(--sp-4); margin: 0; }
.props dt { color: var(--text-muted); font-size: var(--fs-sm); }
.props dd { margin: 0; }

.raw {
  margin: 0;
  padding: var(--sp-4);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  color: var(--text-2);
  overflow-x: auto;
}

/* ---------- форми ---------- */

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field--inline { flex: 0 0 auto; }
.field--grow { flex: 1 1 220px; min-width: 0; }
.field__label {
  font-size: var(--fs-cap); line-height: var(--lh-cap);
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  color: var(--text-muted);
}

.input {
  height: var(--h-control);
  padding: 0 var(--sp-3);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  font: inherit;
  min-width: 0;
}
/* Кільце фокуса — --accent-ring, а не --accent-soft: пісочний --accent-soft на
   пісочному тлі не видно (1,01:1), і поле у фокусі трималось на самій рамці. */
.input:focus { outline: none; border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.input::placeholder { color: var(--text-muted); }

/* ---- власний список замість системного ----
   Рідний <select> лишається в DOM і ховається лише після того, як JS справді
   зібрав заміну (клас select--ready). Без JS сторінка працює як раніше. */
.select { position: relative; display: block; min-width: 0; }
.select--ready > select { display: none; }

.select__trigger {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  /* Ширину кнопки задає найдовший пункт, а не поточне значення: інакше «усі»
     під міткою «ЩО» дає кнопку в 60px, і будь-яке довше значення в ній
     обрізається одразу після вибору. Міряє select.js (--select-w); стеля
     потрібна, щоб «заведено з контролера» не розпихало ряд фільтрів. */
  min-width: min(max(var(--select-w, 9rem), 9rem), 16rem);
  text-align: left;
  cursor: pointer;
}
.select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.select__arrow {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform 140ms ease;
}
.select[data-open="true"] .select__arrow { transform: rotate(180deg); }
.select[data-open="true"] .select__trigger {
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.select__list {
  /* Шар фіксований, координати рахує select.js. Абсолютне позиціювання тут не
     годиться: роль оператора стоїть усередині .table-scroll, а той має
     overflow-x — список у ньому обрізало б і додавало смугу прокрутки. */
  position: fixed;
  z-index: 30;
  /* Ширину диктує найдовший пункт, а не кнопка: кнопка звужена під поточне
     значення, і «усі» зробило б список удвічі вужчим за «ручне відкриття».
     Стеля потрібна, щоб довгий підпис клієнта не виліз за екран. */
  width: max-content;
  max-width: min(22rem, 80vw);
  margin: 0; padding: var(--sp-1) 0;
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  /* Список — шар НАД вмістом, тому тінь тут потрібна в будь-якій схемі:
     у темній картки її не мають, і без тіні список зливається зі сторінкою. */
  box-shadow: var(--sh-2);
}
.select__option {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-3);
  white-space: nowrap;
  color: var(--text);
  cursor: pointer;
}
.select__option.is-active { background: var(--surface-raised); }
.select__option[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.select__option[aria-disabled="true"] { color: var(--text-muted); cursor: default; }


.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h-control);
  padding: 0 var(--sp-5);
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
}
.btn--compact { height: var(--h-control-compact); padding: 0 var(--sp-4); }
.btn--wide { width: 100%; }
/* Заливка золотом береться ТІЛЬКИ з --accent-fill: у світлій схемі --accent
   (#845C10) — колір тексту й рамки, а не тла (скіл ui-tokens). --accent-hover
   там теж текстовий і ще темніший, тому на наведенні кнопка не темнішає до
   майже чорного, а бере --accent-fill-hover і зберігає темний текст. */
.btn--primary { background: var(--accent-fill); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-fill-hover); color: var(--on-accent); }
.btn--secondary { border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover { background: var(--surface-raised); }
.btn--quiet { color: var(--text-2); }
.btn--quiet:hover { background: var(--surface-raised); color: var(--text); }
.btn--danger { color: var(--danger); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- таблиці ---------- */

.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th {
  height: 40px;
  text-align: left;
  font-size: var(--fs-cap); line-height: var(--lh-cap);
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-3);
  white-space: nowrap;
}
/* Зебри немає навмисно: розділювач і моноцифри читаються краще на довгому
   журналі, а рядок відмови не заливається кольором — статус живе в пілюлі. */
.table td { height: var(--h-row); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table--media td { height: var(--h-row-media); }
/* Наведення бере --surface-raised, а не --surface: половина таблиць лежить
   усередині картки, а в картки тло теж --surface — там підсвітки не було. */
.table tbody tr:hover { background: var(--surface-raised); }

.table th.ta-r, .table td.ta-r { text-align: right; }

.cell-link { color: var(--text); text-decoration: none; }
.cell-link:hover { color: var(--accent); }

/* .actions — це контейнер УСЕРЕДИНІ клітинки, а не сама клітинка:
   display:flex на <td> вимикає табличну розкладку, і сусідні рядки починають
   налазити один на одного. */
.actions { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; }
.actions form { display: inline-flex; }

.pager { display: flex; gap: var(--sp-3); padding: var(--sp-4) 0; }

/* Широка таблиця прокручується всередині себе, а не розсовує картку.
   Це потрібно не лише на телефоні: у вузькій колонці на десктопі так само. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- статуси й мітки ---------- */

.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  color: var(--text-2);
  font-size: 12px; line-height: 1; font-weight: 500;
  white-space: nowrap;
}
.pill i { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--danger { background: var(--danger-soft); color: var(--danger); }

/* Чип не пілюля (радіус 8, а не 999), але висота в них спільна: у шапці
   картки клієнта вони стоять поруч, і 20 проти 24 читалось як недогляд. */
.tag {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  color: var(--text-muted);
  font-size: var(--fs-cap); line-height: var(--lh-cap);
  margin-left: var(--sp-2);
}

/* ---------- кадри ---------- */

.thumbs { display: inline-flex; gap: var(--sp-2); vertical-align: middle; }
.thumb {
  display: block; width: 64px; height: 48px;
  border-radius: var(--r-btn);
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shots { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.shots-grid { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.shot img { width: 100%; border-radius: var(--r-btn); display: block; background: var(--bg-sunken); }
.shot__meta { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-sm); }
.shot__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 150px; padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-btn);
  background: var(--bg-sunken);
  color: var(--text-muted);
  text-align: center;
}
.shot__reason { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* ---------- телефон ---------- */

@media (max-width: 720px) {
  .shell { flex-direction: column; }
  .nav {
    width: auto;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav__brand { padding: 0; }
  .nav__items { flex-direction: row; flex: 1 1 100%; overflow-x: auto; }
  .nav__item { border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--r-btn) var(--r-btn) 0 0; }
  .nav__item.is-active { border-left-color: transparent; border-bottom-color: var(--accent); }
  .nav__foot { margin-top: 0; flex-direction: row; align-items: center; justify-content: space-between; flex: 1 1 100%; padding: 0; }

  .main { padding: var(--sp-4); gap: var(--sp-4); }
  .filters { flex-direction: column; align-items: stretch; }
  /* У колонковому напрямку flex-grow тягне поле ВГОРУ-ВНИЗ, і між полями
     з'являється порожнеча на пів екрана. Ріст потрібен лише по горизонталі. */
  .field--inline, .field--grow { flex: 0 0 auto; }
  .btn { width: 100%; }
  /* У таблиці кнопка на всю ширину ні до чого: таблиця й так має свою ширину
     й прокручується всередині себе. Стовпчик дій — виняток, він нижче. */
  .table .btn { width: auto; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions form, .actions .btn { width: 100%; }

  /* Таблиця не влазить у 390 px — прокрутка живе всередині неї,
     сторінка горизонтально не їздить. */
  .table { min-width: 560px; }

  /* Мінімальна висота клікабельного на телефоні — 44px (скіл ui-tokens).
     Компактні 36 і рядок списку 40 — це десктопна щільність, там ціляться
     мишею; пальцем по них не влучити. */
  .select__option { min-height: var(--h-control); }
  .btn--compact { height: var(--h-control); }
  .cell-line { min-height: var(--h-control); }
  /* Посилання в клітинці таблиці — теж ціль для пальця. */
  .cell-link { display: inline-flex; align-items: center; min-height: var(--h-control); }
  /* Кнопка займає всю ширину, тож і стеля знизу їй ні до чого. */
  .select__trigger { min-width: 0; }
}

/* ---------- реєстрація ідентифікатора піднесенням ---------- */

.enroll { display: flex; flex-direction: column; gap: var(--sp-4); }

.enroll__wait { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0; }
/* Таймер великий навмисно: на нього дивляться з відстані, тримаючи ідентифікатор. */
.enroll__timer {
  font-family: var(--font-display);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}

.enroll__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.enroll__actions form { display: inline-flex; }

.enroll__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }

.check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--h-control); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Розкривний блок: панель реєстрації, форми зміни обладнання. Компонент
   спільний — двох однакових речей під різними назвами в системі не буває. */
.drawer { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
/* Розкриття — теж клікабельний елемент: на телефоні в нього має бути 44px, а
   рядок тексту дає 22. Маркер свій, штриховою іконкою: системний трикутник
   випадає з набору. */
.drawer summary {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--h-control);
  cursor: pointer; color: var(--text-2);
  list-style: none;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary .icon { color: var(--text-muted); transition: transform 140ms ease; }
.drawer[open] summary .icon { transform: rotate(90deg); }
.drawer summary:hover { color: var(--text); }
.drawer summary:hover .icon { color: var(--text-2); }
.drawer > * { margin-top: var(--sp-3); }

@media (max-width: 720px) {
  .enroll__form { flex-direction: column; align-items: stretch; }
  .enroll__actions { flex-direction: column; align-items: stretch; }
  .enroll__actions form, .enroll__actions .btn { width: 100%; }
}

/* ---------- звіт ---------- */

.total { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.total__label {
  font-size: var(--fs-cap); line-height: var(--lh-cap);
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  color: var(--text-muted);
}
/* Головне число звіту — те, заради чого екран відкривають. */
.total__value {
  font-family: var(--font-display);
  font-size: 64px; line-height: 1;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.head__actions { display: flex; gap: var(--sp-3); flex: none; }

@media (max-width: 720px) {
  .head { flex-direction: column; }
  .head__actions { width: 100%; }
}

/* ---------- користувачі та журнал дій ---------- */

.inline-form { display: inline-flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* У таблиці операторів у клітинці дії живуть дві форми одразу — вони
   складаються стовпчиком, інакше рядок розповзається на півекрана. */
.stack { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
/* Поле «новий пароль» тягнеться на всю ширину останнього стовпчика, а йому
   вистачає 240px. Стовпчик правий, тож стовпчик дій притискаємо до краю. */
.actions--stack { flex-direction: column; align-items: stretch; gap: var(--sp-3); width: 240px; margin-left: auto; }
.actions--stack form { width: 100%; }
.table--users td { vertical-align: top; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
/* У сусідніх клітинках рядка стоять компактні контроли (36px) і звичайний
   текст (22px). Без цього перший рядок тексту виявляється на 7px вище за
   підпис на кнопці поруч, і весь рядок виглядає з'їхалим. */
.cell-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-height: var(--h-control-compact); }
.input--compact { height: var(--h-control-compact); font-size: var(--fs-sm); }

/* Зміна в журналі дій: було → стало. Старе значення приглушене, нове —
   основним кольором: дивляться на те, що стало. */
.change { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-sm); }
.change__field {
  font-size: var(--fs-cap); line-height: var(--lh-cap);
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  color: var(--text-muted);
}
.change__was { color: var(--text-muted); text-decoration: line-through; }
.change__now { color: var(--text); }

/* Компактні поле й список у таблиці операторів оголошені нижче за мобільний
   блок, тож їхню висоту доводиться перекривати окремо — тут, у кінці. На
   телефоні клікабельне не буває нижчим за 44px. */
@media (max-width: 720px) {
  .input--compact { height: var(--h-control); }
}