/* Внутренний интерфейс: читаемость важнее украшений.
   Ночная смена работает с телефона, поэтому поля ввода крупные.

   Оформление держится на токенах ниже. Правило: токен, добавленный в :root,
   обязан получить пару в тёмной теме — иначе ночью экран разъезжается.
   Цвет-действие (--accent, синий) и цвета статусов (ok/warn/err/done)
   несут смысл и не используются для украшения. Фирменный какао (--brand)
   живёт только на марке и подчёркивании активного раздела. */
:root {
  --bg: #f4f6f9; --panel: #fff; --panel-2: #f8fafc; --ink: #171a1f; --muted: #5b6779;
  --line: #e2e7ef; --accent: #1f5fbf; --accent-ink: #fff; --accent-soft: #e9f0fb;
  --brand: #6f4126; --focus: #1f5fbf;
  --ok: #1e7f4f; --ok-bg: #e6f5ec; --warn: #8a6100; --warn-bg: #fdf3dc;
  --err: #a11c2b; --err-bg: #fbe9eb; --done: #14507a; --done-bg: #e3eff8;
  --r1: 6px; --r2: 10px; --r3: 14px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-pop: 0 6px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c; --panel: #1c2027; --panel-2: #20252d; --ink: #e8ecf2; --muted: #94a3b8;
    --line: #2c333d; --accent: #4d8ee0; --accent-ink: #0b0e12; --accent-soft: #17233a;
    --brand: #c99a76; --focus: #6ea8ea;
    --ok: #6ddba0; --ok-bg: #14301f; --warn: #f0c36a; --warn-bg: #33280f;
    --err: #f2909c; --err-bg: #3a1a1f; --done: #8ec6f0; --done-bg: #13293a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, .5);
  }
}

/* --- база --- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- шапка --- */
header.top { position: sticky; top: 0; z-index: 40;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: var(--s2) var(--s4); display: flex; gap: var(--s4); align-items: center;
  flex-wrap: wrap; }
header.top .brand { font-weight: 700; letter-spacing: -.01em; }
header.top .brand a { color: var(--brand); text-decoration: none; }
header.top nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
header.top .who { margin-left: auto; color: var(--muted); font-size: 13px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.navlink { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px;
  border-radius: var(--r1); color: var(--ink); text-decoration: none; font-size: 14px;
  white-space: nowrap; }
.navlink:hover { background: var(--bg); }
.navlink.is-active { color: var(--brand); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--brand); border-radius: var(--r1) var(--r1) 0 0; }

/* Раскрывающиеся разделы сделаны на <details>: JS в проекте только для
   живого прогресса прогона, и разводить его ради меню незачем. */
.navgroup { position: relative; }
.navgroup > summary { list-style: none; cursor: pointer; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after { content: "▾"; font-size: 10px; color: var(--muted); }
.navgroup[open] > summary { background: var(--bg); }
.navmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 220px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--shadow-pop); padding: var(--s1); display: flex; flex-direction: column; }
.navmenu a, .navmenu button { display: block; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: var(--r1); color: var(--ink); text-decoration: none;
  font-size: 14px; background: none; border: none; cursor: pointer; font-family: inherit; }
.navmenu a:hover, .navmenu button:hover { background: var(--accent-soft); color: var(--accent); }
.navmenu a.is-active { color: var(--brand); font-weight: 600; }
.navmenu hr { border: none; border-top: 1px solid var(--line); margin: var(--s1) 0; }

/* --- каркас страницы --- */
main { max-width: 1200px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s6); }
h1 { font-size: 22px; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; margin: 0 0 var(--s1); }
h2 { font-size: 17px; letter-spacing: -.01em; font-weight: 650; margin: var(--s5) 0 var(--s2); }
.sub { color: var(--muted); margin: 0 0 18px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: var(--s6) 0 var(--s3); }
.eyebrow:first-child { margin-top: 0; }

h3 { font-size: 15px; font-weight: 650; margin: 0 0 var(--s1); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2);
  padding: var(--s4); margin-bottom: var(--s4); box-shadow: var(--shadow); }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel > p:last-child { margin-bottom: 0; }
.panel.narrow { max-width: 460px; }
.panel.form { max-width: 680px; }
/* Таблица идёт вровень с краем панели: собственные отступы панели рядом
   с отступами ячеек читались как двойная рамка. */
.panel.scroll { padding: 0; }
.panel.scroll th, .panel.scroll td { padding: 10px 14px; }

/* --- таблицы --- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
/* На телефоне :hover «залипает» после тапа — потому только для мыши. */
@media (hover: hover) { tbody tr:hover td { background: var(--panel-2); } }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Шапку таблицы липкой не делаем. Горизонтальная прокрутка (.scroll) делает
   контейнер и вертикальным скроллпортом, из-за чего sticky цепляется к нему,
   а не к странице; лечится это `overflow-y: clip`, но он же обрезает строки,
   вылезшие за высоту контейнера, — на пустой таблице пропадала строка
   «Рейсов за этот день нет». Читаемость дороже удобства прокрутки. */
.scroll table tr:first-child th { background: var(--panel-2); }

/* --- статусы --- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 600; white-space: nowrap; }
/* Точка перед текстом: статус читается и без цвета — в распечатке и при
   дальтонизме. */
.badge::before { content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.done { background: var(--done-bg); color: var(--done); }
.badge.none { background: var(--bg); color: var(--muted); }

/* --- кнопки --- */
.btn { display: inline-block; padding: 9px 16px; border-radius: var(--r1);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  text-decoration: none; cursor: pointer; font-size: 15px; font-weight: 550;
  font-family: inherit; white-space: nowrap; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); filter: none; }
.btn.tiny { padding: 3px 9px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; filter: none; }

/* --- раскладка --- */
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row.tight { gap: 6px; }
.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 260px; }
.inline { display: inline; }

/* --- формы --- */
form p { margin: 0 0 14px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: var(--s1); }
input[type=text], input[type=date], input[type=number], input[type=email], input[type=password],
select, textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: var(--r1); background: var(--bg); color: var(--ink); font-size: 15px;
  font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.helptext { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
ul.errorlist { color: var(--err); font-size: 13px; margin: var(--s1) 0; padding-left: 18px; }
.places-input { font-size: 22px; padding: var(--s3); text-align: center; max-width: 140px; }

/* --- сообщения --- */
.msg { padding: 10px 14px; border-radius: var(--r1); margin-bottom: var(--s3);
  border: 1px solid transparent; }
.msg.success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.msg.error { background: var(--err-bg); color: var(--err); border-color: var(--err); }
.msg.info { background: var(--done-bg); color: var(--done); border-color: var(--done); }

/* --- показатели --- */
.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: var(--s2) 0 var(--s4); }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2);
  padding: var(--s3) var(--s4); box-shadow: var(--shadow); }
.tile .v { font-size: 26px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .k { color: var(--muted); font-size: 13px; margin-top: 2px; }
.tile .v.err { color: var(--err); }
.tile p { margin: 6px 0 0; }
.tile p:last-child { margin-top: 10px; }
/* Работа, которую машина не сделала за человека, — то, ради чего сюда заходят. */
.tile.attention { border-color: var(--warn); background: var(--warn-bg); }
.tile.attention .v { color: var(--warn); }
.tile.attention .k { color: var(--warn); opacity: .85; }

/* --- прогресс и логи --- */
.progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden;
  margin: 10px 0; }
.progress > div { height: 100%; background: var(--accent); transition: width .3s; }
pre.log, pre.xml { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r1);
  padding: var(--s3); overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre.log { max-height: 380px; font-size: 13px; white-space: pre-wrap; }
pre.xml { max-height: 460px; font-size: 12px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r1); padding: 1px 5px; }

/* --- утилиты --- */
.scroll { overflow-x: auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.stack > * + * { margin-top: .5em; }
.flush { margin: 0; }
.card-meta { margin: 10px 0 0; }

/* --- телефон --- */
@media (max-width: 760px) {
  /* Шапка на телефоне не липкая: в три строки она съедала бы треть экрана —
     ровно то, что мешает ночной смене вводить места. */
  header.top { position: static; gap: var(--s2); padding: var(--s2) var(--s3); }
  header.top .brand { order: 1; }
  header.top nav { order: 2; width: 100%; gap: var(--s1); }
  /* Кто вошёл — под навигацией: ночью важнее разделы, чем собственное имя. */
  header.top .who { order: 3; width: 100%; margin-left: 0; font-size: 12px; }
  /* Меню остаётся всплывающим, но не шире экрана. */
  .navmenu { min-width: 190px; max-width: calc(100vw - 24px); }
}
@media (max-width: 640px) {
  main { padding: var(--s3) 10px 50px; }
  th, td { padding: 10px 6px; }
  .panel.scroll th, .panel.scroll td { padding: 10px 8px; }

  /* Таблица-карточки: ночная смена вводит места с телефона, и прокручивать
     широкую таблицу вбок ради одного поля — то же, что не иметь экрана. */
  .cards-host { padding: var(--s3); }
  .cards, .cards tbody, .cards tr, .cards td { display: block; width: 100%; }
  .cards tr:first-child { display: none; } /* заголовки столбцов заменены подписями ячеек */
  .cards tr { border: 1px solid var(--line); border-radius: var(--r2);
    padding: var(--s3); margin-bottom: var(--s3); background: var(--panel); }
  .cards tr:last-child { margin-bottom: 0; }
  .cards td { border: none; padding: 3px 0; text-align: left; }
  .cards td[data-label]::before { content: attr(data-label); display: block;
    font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  .cards .cards-title { font-size: 16px; margin-bottom: var(--s1); }
  .cards .places-input { max-width: 100%; }

  /* Кнопка сохранения всегда под большим пальцем. */
  .save-bar { position: sticky; bottom: 0; margin: 0 -10px; padding: var(--s3) 10px;
    background: var(--bg); border-top: 1px solid var(--line); }
  .save-bar .btn { width: 100%; padding: 14px; font-size: 17px; }
  h1 { font-size: 20px; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .tile .v { font-size: 22px; }
}