/* Общий слой оформления трекера.
   Здесь лежат только «кирпичи», одинаковые для всех страниц: цвета, поля ввода,
   кнопки, карточки, таблицы. Всё, что относится к одному экрану, по-прежнему
   живёт в <style> самой страницы и, стоя ниже по каскаду, перебивает эти
   правила — поэтому общий слой можно править, не ломая отдельные экраны.

   Цвета собраны в переменные: одна правка здесь меняет оттенок везде. */
:root {
  --ink:       #1a1a2e;   /* основной текст */
  --ink-2:     #464b5c;   /* подписи полей */
  --ink-3:     #6b7080;   /* пояснения */
  --ink-4:     #8a8f9e;   /* совсем второстепенное */
  --bg:        #f4f5f7;   /* фон страницы */
  --surface:   #ffffff;   /* фон карточек и таблиц */
  --surface-2: #f7f8fb;   /* шапки таблиц, чередование строк */
  --line:      #e3e6f0;   /* граница карточки */
  --line-2:    #eef0f6;   /* разделитель внутри карточки */
  --field:     #ccd0dd;   /* рамка поля ввода */
  --accent:    #2453ff;   /* цвет главного действия */
  --accent-ink:#1c3fd0;
  --accent-bg: #eef3ff;   /* мягкая заливка выбранного */
  --ring:      rgba(36, 83, 255, .18);
  --ok:        #1c7c3c;
  --warn-ink:  #8a6100;
  --bad:       #c0392b;
  --nav:       #1a1a2e;
  --nav-ink:   #cfd2e3;
  --nav-hover: #33335c;
  --r-sm: 7px; --r: 9px; --r-lg: 12px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(26, 26, 46, .06);
  --sh-2: 0 1px 4px rgba(26, 26, 46, .10);
}

* { box-sizing: border-box; }
/* Атрибут hidden должен прятать что угодно. Своё display у кнопок и полос
   отбора сильнее браузерного правила для [hidden], и скрытая кнопка
   оставалась на виду — поэтому здесь !important. */
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }

/* Заголовки различаются размером, а не только жирностью — так страница
   читается сверху вниз без усилий. */
h1 { font-size: 29px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
h2 { font-size: 22px; font-weight: 650; letter-spacing: -.015em; margin: 22px 0 8px; }
h3 { font-size: 18px; font-weight: 650; letter-spacing: -.01em; margin: 18px 0 6px; }
h4 { font-size: 15px; font-weight: 650; margin: 14px 0 5px; }

/* ── Меню ──────────────────────────────────────────────────────────────── */
nav { display: flex; align-items: center; gap: 4px; padding: 8px; background: var(--nav);
  position: sticky; top: 0; z-index: 1100; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
nav .nav-logo { width: 28px; height: 28px; border-radius: 6px; margin-right: 4px; }
nav a { color: var(--nav-ink); text-decoration: none; padding: 8px 14px; border-radius: var(--r);
  white-space: nowrap; transition: background .12s, color .12s; }
nav a.active, nav a:hover { background: var(--nav-hover); color: #fff; }
nav a.active { font-weight: 600; }
nav .spacer { flex: 1; }
/* «⟳ Обновить» — сосед «Выйти» и выглядит так же, как пункты меню: это не
   действие раздела, а служебная кнопка. Нужна потому, что в установленном
   ярлыке нет адресной строки, а значит нет и кнопки перезагрузки браузера. */
nav .reload-btn { padding: 8px 14px; border: 0; border-radius: var(--r); background: none;
  font: inherit; color: var(--nav-ink); cursor: pointer; white-space: nowrap; }
nav .reload-btn:hover { background: var(--nav-hover); color: #fff; }
@media (max-width: 600px) { nav a, nav .reload-btn { padding: 8px 10px; font-size: 14px; } }

#map { height: calc(100vh - 52px); }
.panel { padding: 14px 16px 40px; max-width: 900px; margin: 0 auto; }

/* ── Поля ввода ────────────────────────────────────────────────────────────
   16 px обязательны: на iPhone поле мельче браузер увеличивает страницу и
   обратно её не возвращает. */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  padding: 9px 11px; font-size: 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--field); border-radius: var(--r); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--accent); }
::placeholder { color: var(--ink-4); }

/* Галочка с подписью — одним «пятном», а не текстом, прилипшим к квадратику. */
label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }

/* ── Кнопки ────────────────────────────────────────────────────────────────
   Три уровня: главная синяя (.act), обычная белая (просто <button>), опасная
   красная (.danger). Раньше синими были все — и не было видно, какая главная. */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 15px; font-size: 15px; font-weight: 500; white-space: nowrap;
  color: #2c3040; background: var(--surface); border: 1px solid var(--field);
  border-radius: var(--r); cursor: pointer; transition: background .12s, border-color .12s; }
button:hover, .btn:hover { background: #f3f5fb; border-color: #b6bcd0; }
button:active, .btn:active { background: #e9edf7; }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
button:disabled, .btn:disabled { opacity: .55; cursor: default; }
button.act, .btn.act, .login-box button {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.act:hover, .btn.act:hover, .login-box button:hover {
  background: var(--accent-ink); border-color: var(--accent-ink); }
button.danger, .btn.danger { color: var(--bad); }
button.danger:hover, .btn.danger:hover { background: #fff2f2; border-color: #e0a6a6; }

/* ── Полоса отбора над содержимым ──────────────────────────────────────────
   Одинаковая на всех экранах: белая полоса под меню, поля и кнопки в строку,
   на узком экране переносятся. */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.controls label { color: var(--ink-2); font-size: 15px; }

/* ── Карточка ──────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); }

/* ── Таблицы ───────────────────────────────────────────────────────────────
   Без сетки «в клеточку»: строки разделяет тонкая линия, глаз ведёт по строке,
   а не спотыкается о рамку каждой ячейки. */
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { border: none; border-bottom: 1px solid var(--line-2); padding: 9px 11px; text-align: left; }
th { background: var(--surface-2); font-size: 13px; font-weight: 600; color: #55607a;
  white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }

/* Длинные таблицы держим в своём окне со своей прокруткой: иначе горизонтальный
   ползунок оказывается в самом низу страницы, и до него нужно домотать всю таблицу.
   Шапка и первый столбец (обычно фамилия) закреплены — при прокрутке вбок и вниз
   видно, к какой строке и колонке относится ячейка. */
.table-box { max-height: min(70vh, 620px); overflow: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.table-box table { border-collapse: separate; border-spacing: 0; width: 100%; }
.table-box th, .table-box td { border: none; border-bottom: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2); padding: 7px 10px; text-align: left; white-space: nowrap; }
/* на некоторых страницах шапка — просто первая строка, без <thead> */
.table-box thead th, .table-box tr:first-child th { position: sticky; top: 0;
  background: var(--surface-2); z-index: 1; box-shadow: inset 0 -1px 0 var(--line); }
.table-box th:first-child, .table-box td:first-child { position: sticky; left: 0;
  background: var(--surface); z-index: 1; }
.table-box thead th:first-child, .table-box tr:first-child th:first-child { z-index: 2;
  background: var(--surface-2); }
.table-box tbody tr:nth-child(even) td,
.table-box tbody tr:nth-child(even) td:first-child { background: #fafbfd; }

/* ── Вход ──────────────────────────────────────────────────────────────── */
.login-box { max-width: 340px; margin: 14vh auto; padding: 28px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-2);
  display: grid; gap: 10px; }

/* ── Мелкие общие пометки ──────────────────────────────────────────────── */
.err { color: var(--bad); }
.ok { color: var(--ok); }
.muted { color: var(--ink-3); }
.hint { color: var(--ink-4); font-size: 13px; }
.stale { color: var(--bad); font-weight: 600; }

/* «Пилюля» — короткий ответ системы рядом с кнопкой: зелёная сделано,
   красная беда, жёлтая внимание, синяя идёт работа. */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 6px;
  border-radius: var(--r-pill); font-size: 14px; }
.pill.ok   { background: #e9f7ef; color: #1b6b3f; }
.pill.bad  { background: #fdecea; color: var(--bad); }
.pill.warn { background: #fff6e0; color: var(--warn-ink); }
.pill.wait { background: var(--accent-bg); color: #2b3a67; }

/* Числа, которые читают столбиком (суммы, километры, время), — одной ширины,
   иначе колонка «пляшет». */
.num, td.num, th.num { font-variant-numeric: tabular-nums; }