/* =====================================================================
   МАТРЁШКА — единая тема интерфейса
   =====================================================================
   Ахроматическая база, единственный акцент — вермилион. Он означает
   ДЕЙСТВИЕ, а не украшение: главная кнопка, активный пункт меню, фокус.
   Всё остальное — оттенки серого, потому что на складском экране пестрота
   мешает поймать взглядом то, что действительно требует реакции.

   Радиус один на всё — 8px. Тень одна — двухслойная, не глубже 3px.
   Размеры шрифта кратны шкале, ниже 12px не опускаемся, и 12px — только
   для прописных подписей.

   ИСКЛЮЧЕНИЕ ИЗ ПРАВИЛА «ОДИН ЦВЕТ». Статусные плашки (зелёный, жёлтый,
   красный) сохранены: на сортировке и приёмке вердикт считывается боковым
   зрением за долю секунды, и монохром там стоил бы ошибок. Цвет статуса —
   это информация, а не оформление, поэтому он остаётся.
   ===================================================================== */

:root {
  --vermillion: #e42b0c;
  --sunset: linear-gradient(94deg, #ff0201 -33.85%, #ff7802 -1.54%, #ff0201 73.55%);
  --ink: #000;
  --carbon: #1f1f1f;
  --s900: #101828;
  --s700: #364153;
  --s600: #4a5565;
  --steel: #676767;
  --iron: #8a8a8a;
  --mist: #99a1af;
  --cloud: #d4d4d4;
  --frost: #e5e7eb;
  --paper: #fff;
  --vellum: #f5f5f5;

  /* статусы — информация, не оформление */
  --ok-bg: #ecfdf3;   --ok-br: #abefc6;  --ok-tx: #067647;
  --warn-bg: #fffaeb; --warn-br: #fedf89; --warn-tx: #b54708;
  --err-bg: #fef3f2;  --err-br: #fecdca;  --err-tx: #b42318;
  --info-bg: #eff8ff; --info-br: #b2ddff; --info-tx: #175cd3;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 8px;
  --sh: rgba(0,0,0,.1) 0 1px 3px 0, rgba(0,0,0,.1) 0 1px 2px -1px;
  --sh-lift: rgba(0,0,0,.12) 0 4px 10px -2px, rgba(0,0,0,.08) 0 2px 4px -2px;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--vellum); color: var(--s900);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--s700); }
a:hover { color: var(--vermillion); }
:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 2px; }

h1, h2, h3, h4 { color: var(--s900); font-weight: 400; margin-top: 0; }
h1 { font-size: 30px; line-height: 1.33; letter-spacing: -.6px; margin-bottom: 16px; }
h2 { font-size: 24px; line-height: 1.38; letter-spacing: -.3px; }
h3 { font-size: 20px; line-height: 1.43; margin: 24px 0 12px; }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .92em;
       letter-spacing: .02em; }

/* ---------- каркас ---------- */
.layout { display: flex; min-height: 100vh; }

/* ---------- боковое меню ----------
   Светлая панель с правой границей — как в макете. Тёмная карбоновая создавала
   лишний контраст: глаз цеплялся за неё, хотя меню — не то, куда надо смотреть
   в первую очередь.

   Закреплено на всю высоту и скроллится ОТДЕЛЬНО от рабочей области: раньше при
   длинной таблице оно уезжало вверх вместе с контентом, и чтобы перейти в
   другой раздел, приходилось прокручивать страницу обратно. */
.sidebar {
  width: 232px; flex-shrink: 0; padding: 20px 16px;
  background: #fcfcfc; border-right: 1px solid var(--frost); color: var(--s900);
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto; overscroll-behavior: contain;
}
.sidebar h2 { margin: 0 0 2px; padding: 0 12px; font-size: 18px; font-weight: 600;
              color: var(--s900); letter-spacing: -.02em; }
.sidebar .hint { color: var(--s600); padding: 0 12px; margin: 0 0 4px;
                 font-size: 13px; }
.sidebar nav a {
  display: block; padding: 9px 12px; border-radius: var(--r); margin-bottom: 2px;
  font-size: 14px; font-weight: 400; color: var(--s700); text-decoration: none;
}
.sidebar nav a:hover { background: var(--vellum); color: var(--s900); }
/* активный пункт — единственное место в меню, где появляется акцент */
.sidebar nav a.active { background: var(--vermillion); color: #fff; font-weight: 500; }
.sidebar .nav-group-title {
  margin: 0; padding: 20px 12px 6px;
  font-size: 12px; font-weight: 400; text-transform: uppercase;
  letter-spacing: .3px; color: var(--iron);
}
.sidebar nav > .nav-group-title:first-of-type { padding-top: 8px; }
.sidebar form button { width: 100%; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--cloud); border-radius: 999px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.content { flex: 1; padding: 32px 40px; max-width: 1400px; }

/* ---------- кнопки ---------- */
/* Вермилион строго на главном действии экрана. Остальные кнопки — контурные
   или серые: если красным подсвечено пять кнопок, ни одна из них не главная */
button, .btn-primary, .btn-secondary, .btn-edit, .btn-del, .btn-save, .btn-cancel {
  font: inherit; cursor: pointer; border-radius: var(--r);
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  padding: 9px 16px; border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-primary { background: var(--vermillion); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-save { background: var(--carbon); color: #fff; }
.btn-save:hover { background: #000; }
.btn-secondary, .btn-edit {
  background: var(--paper); color: var(--s700); border-color: var(--cloud);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn-secondary:hover, .btn-edit:hover { border-color: var(--s900); color: var(--s900); }
.btn-cancel { background: var(--paper); color: var(--s600); border-color: var(--frost); }
.btn-cancel:hover { border-color: var(--cloud); color: var(--s900); }
.btn-del { background: var(--paper); color: var(--err-tx); border-color: var(--err-br); }
.btn-del:hover { background: var(--err-bg); }
button:disabled, .btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.add-form button, .filter-form button { background: var(--carbon); color: #fff; }
.add-form button:hover, .filter-form button:hover { background: #000; }

/* ---------- поля ---------- */
input, select, textarea {
  font: inherit; color: var(--s900); background: var(--paper);
  border: 1px solid var(--cloud); border-radius: var(--r);
  padding: 9px 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--s900); }
input::placeholder, textarea::placeholder { color: var(--mist); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--vellum); color: var(--steel); cursor: not-allowed;
}
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--vermillion); }

.add-form, .filter-form { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }


/* ---------- карточки-формы (сотрудник, заказчик, машина) ----------
   ВЕРТИКАЛЬ, А НЕ СЕТКА. Поля идут одно под другим, подпись над полем, ширина
   поля одинаковая независимо от содержимого. Раньше карточки собирались из
   разнородных строк — где-то поле на всю ширину, где-то короткий инпут рядом
   с длинным, — и глаз не находил вертикальной линии, за которую можно
   зацепиться. Одна колонка читается сверху вниз без прыжков.

   Ширина поля ограничена 520px: растянутый на весь экран текстовый инпут
   выглядит как ошибка вёрстки, а читать строку длиннее ~90 символов неудобно. */
.card-form { max-width: 760px; }
.card-form fieldset {
  border: 1px solid var(--frost); border-radius: var(--r);
  margin: 0 0 20px; padding: 20px 24px; background: var(--paper);
}
.card-form legend {
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .3px; color: var(--s600); padding: 0 8px;
}
.card-form label {
  display: block; margin: 0 0 16px;
  font-size: 14px; font-weight: 500; color: var(--s700);
}
.card-form label:last-child { margin-bottom: 0; }
.card-form input,
.card-form select,
.card-form textarea {
  display: block; width: 100%; max-width: 520px; margin-top: 6px;
  font-size: 15px; font-weight: 400; color: var(--s900);
}
.card-form textarea { resize: vertical; min-height: 64px; }
/* чекбокс — единственный случай, где подпись справа от поля */
.card-form label > input[type=checkbox],
.card-form label > input[type=radio] {
  display: inline-block; width: auto; margin: 0 8px 0 0; vertical-align: middle;
}
.card-form label.inline { display: inline-flex; align-items: center; gap: 8px;
                          width: auto; margin: 0 16px 12px 0; }
.card-form label.inline input { width: auto; margin: 0; }
.card-form > button,
.card-form .btn-save { margin-top: 4px; }
.card-form .hint { max-width: 640px; }

/* группа чекбоксов (регионы, получатели) — сетка, чтобы не растягиваться
   в одну колонку на весь экран */
.card-form fieldset > label.inline,
.reg-checks label.inline { margin-bottom: 10px; }
.reg-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
              gap: 4px 16px; }

/* ---------- таблицы ---------- */
.grid {
  width: 100%; border-collapse: collapse; background: var(--paper);
  border: 1px solid var(--frost); border-radius: var(--r); overflow: hidden;
}
.grid th, .grid td { padding: 11px 14px; text-align: left;
                     border-bottom: 1px solid var(--frost); }
.grid tr:last-child td { border-bottom: 0; }
/* Шапка едет вместе с прокруткой: в матрице доступов и на длинных реестрах
   без неё через двадцать строк уже непонятно, что означает колонка */
.grid th {
  background: var(--vellum); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .3px; color: var(--s600);
  position: sticky; top: 0; z-index: 5;
  box-shadow: inset 0 -1px 0 var(--frost);
}
/* overflow: hidden на таблице ломает sticky у ячеек, поэтому углы скругляем
   у самих крайних ячеек, а не обрезкой содержимого */
.grid { overflow: visible; }
.grid tr:first-child th:first-child { border-top-left-radius: var(--r); }
.grid tr:first-child th:last-child  { border-top-right-radius: var(--r); }
.grid tr:last-child td:first-child  { border-bottom-left-radius: var(--r); }
.grid tr:last-child td:last-child   { border-bottom-right-radius: var(--r); }
.grid td { font-size: 15px; }
.grid input, .grid select { padding: 7px 10px; width: 100%; font-size: 14px; }
.grid tr:hover td { background: #fafafa; }
tr.editing td { background: var(--warn-bg); }
tr.row-warn td { background: var(--warn-bg); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions form { display: inline; }


/* ---------- задания: заказчики дня и таблица точек ----------
   Классы этого экрана потерялись при переписывании темы — плитки заказчиков
   схлопнулись в список, а таблица точек осталась без нужных ширин. Возвращены
   в общей палитре.

   Цвет плитки заказчика — это СОСТОЯНИЕ задания, а не оформление: зелёная —
   задание собрано, жёлтая — есть что доделать, красная — заказчик в этот день
   пустой. Логист листает регион глазами и должен видеть проблемные без чтения. */
.cust-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
              gap: 14px; margin-top: 16px; align-items: stretch; }
.cust-tile {
  display: flex; flex-direction: column; padding: 16px 18px;
  border: 1px solid var(--frost); border-left: 5px solid var(--cloud);
  border-radius: var(--r); background: var(--paper); color: var(--s900);
  text-decoration: none; box-shadow: var(--sh);
  transition: transform .1s, box-shadow .1s;
}
.cust-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
.tile-name  { font-weight: 500; font-size: 16px; letter-spacing: -.1px; }
.tile-code  { color: var(--mist); font-size: 12px; margin: 3px 0 10px;
              letter-spacing: .3px; text-transform: uppercase; }
.tile-stats { display: flex; gap: 14px; color: var(--s600); font-size: 13px;
              margin-top: auto; }

/* состояния плитки заказчика */
.tile-ok    { border-left-color: var(--ok-tx); }
.tile-warn  { border-left-color: var(--warn-tx); background: var(--warn-bg); }
.tile-empty { border-left-color: var(--err-tx); background: var(--err-bg); }
/* .tile-warn как ТЕКСТ внутри плитки — отдельная роль того же имени в разметке */
.cust-tile .tile-warn { border: 0; background: none; margin-top: 8px;
                        color: var(--warn-tx); font-size: 12px; font-weight: 500; }

.empty-block { margin-top: 28px; }
.empty-block summary { cursor: pointer; color: var(--s600); font-weight: 500;
                       padding: 8px 0; }
.empty-block summary:hover { color: var(--vermillion); }

.types-group { display: inline-flex; gap: 6px; align-items: center; }
.types-group label { display: inline-flex; align-items: center; gap: 3px;
                     font-size: 12px; color: var(--s600); }
.types-group input { width: 46px; padding: 6px; }

.ship-grid input[type=number],
.ship-grid input[type=text],
.ship-grid input[type=date] { width: 100%; padding: 6px 9px; font-size: 14px; }
.ship-grid tr.row-on td { background: var(--ok-bg); }
/* СЧЁТЧИК МЕСТ.
   Класс counter висит на самой ячейке <td>, поэтому ей нельзя давать
   display:flex — ячейка перестаёт быть table-cell, выпадает из табличного
   потока и «наплывает» на соседние строки. Особенно заметно там, где строка
   выше обычной: под точкой выведен адрес.

   Поэтому ячейка остаётся table-cell, а кнопки и поле выравниваются
   inline-boxes: по горизонтали text-align, по вертикали vertical-align. */
.ship-grid td.counter {
  white-space: nowrap; text-align: center; vertical-align: middle;
  font-size: 0;                 /* убирает пробелы между inline-элементами */
}
.ship-grid td.counter > * { font-size: 15px; vertical-align: middle; }

/* Символы − и + центрируются флексом внутри самой кнопки, а не подбором
   padding: у «−» и «+» разная высота глифа, и на симметричных отступах они
   всё равно съезжают по вертикали */
.ship-grid .counter button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin: 0 3px;
  font-size: 17px; font-weight: 500; line-height: 1;
  border: 1px solid var(--cloud); background: var(--paper); color: var(--s900);
}
.ship-grid .counter button:hover:not(:disabled) {
  border-color: var(--s900); background: var(--vellum);
}
.ship-grid .counter button:disabled { color: var(--mist); background: var(--vellum); }

/* Ширина поля задаётся жёстко: правило .ship-grid input[type=number]
   { width:100% } специфичнее, и без этого поле растягивалось на всю ячейку.
   Стрелки браузера убраны — они смещают цифру влево от центра, и попасть по
   ним всё равно нельзя, для этого есть кнопки по бокам */
.ship-grid .counter input[type=number] {
  display: inline-block; width: 56px; height: 32px;
  text-align: center; padding: 0 4px; font-size: 15px; font-weight: 500;
  -moz-appearance: textfield;
}
.ship-grid .counter input[type=number]::-webkit-outer-spin-button,
.ship-grid .counter input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.tag-auto { font-size: 10px; color: var(--ok-tx); background: var(--ok-bg);
            padding: 1px 6px; border-radius: var(--r); margin-left: 4px; }
.form-actions { margin: 16px 0; display: flex; align-items: center; gap: 14px;
                flex-wrap: wrap; }

/* ---------- плитки ---------- */
/* align-items: stretch (по умолчанию), а НЕ start: при start плитка с двумя
   строками текста ниже соседней с тремя, и ряд выглядит рваным. Растянутые до
   общей высоты карточки дают ровную линию низа — именно её глаз и ищет */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
         gap: 16px; }
.tile { display: flex; flex-direction: column; min-height: 112px; }
.tile, .region-card {
  display: block; background: var(--paper); border: 1px solid var(--frost);
  border-radius: var(--r); padding: 24px; text-decoration: none;
  color: var(--s900); box-shadow: var(--sh);
  transition: transform .1s, box-shadow .1s, border-color .1s;
}
.tile:hover, .region-card:hover {
  transform: translateY(-2px); box-shadow: var(--sh-lift); border-color: var(--cloud);
}
.tile-title, .region-name { font-size: 20px; font-weight: 500; line-height: 1.3;
                            letter-spacing: -.2px; }
.tile-sub, .region-count { color: var(--s600); font-size: 14px; margin-top: 6px; }

/* Цвет плитки — это статус, а не украшение: полоса слева, а не заливка,
   чтобы карточки не превращались в светофор */
.tile-green, .tile-red, .tile-yellow, .tile-blue, .tile-grey { border-left: 4px solid; }
.tile-green  { border-left-color: var(--ok-tx); }
.tile-yellow { border-left-color: var(--warn-tx); }
.tile-red    { border-left-color: var(--err-tx); }
.tile-blue   { border-left-color: var(--info-tx); }
.tile-grey   { border-left-color: var(--mist); }

/* ---------- текст ---------- */
.hint { color: var(--s600); font-size: 14px; line-height: 1.43; margin-top: 12px; }
.small { font-size: 14px; color: var(--s600); }
.txt-red { color: var(--err-tx); }
.txt-orange { color: var(--warn-tx); }
.eyebrow { font-size: 12px; font-weight: 500; text-transform: uppercase;
           letter-spacing: .3px; color: var(--s600); }
.req { color: var(--vermillion); }

/* ---------- плашки и бейджи ---------- */
.attention-bar {
  background: var(--warn-bg); border: 1px solid var(--warn-br); color: var(--warn-tx);
  border-radius: var(--r); padding: 14px 18px; margin: 16px 0; font-size: 15px;
}
.pass-warn { background: var(--warn-bg); color: var(--warn-tx); padding: 3px 9px;
             border-radius: var(--r); font-size: 12px; font-weight: 500; }
.pass-ok   { background: var(--info-bg); color: var(--info-tx); padding: 3px 9px;
             border-radius: var(--r); font-size: 12px; font-weight: 500; }
.badge-off { background: var(--vellum); color: var(--steel); padding: 3px 9px;
             border-radius: var(--r); font-size: 12px; }

.ret-badge { display: inline-block; font-size: 12px; font-weight: 500;
             padding: 3px 10px; border-radius: var(--r); white-space: nowrap; }
.ret-yellow { background: var(--warn-bg); color: var(--warn-tx); }
.ret-blue   { background: var(--info-bg); color: var(--info-tx); }
.ret-green  { background: var(--ok-bg); color: var(--ok-tx); }
.ret-grey   { background: var(--vellum); color: var(--steel); }

/* ---------- раскрывающиеся блоки ---------- */
.add-point, .new-day {
  background: var(--paper); border: 1px solid var(--frost); border-radius: var(--r);
  padding: 4px 16px; margin-bottom: 16px;
}
.add-point summary { cursor: pointer; padding: 12px 0; color: var(--s700);
                     font-weight: 500; font-size: 15px; }
.add-point summary:hover { color: var(--vermillion); }
.add-point .add-form { padding: 8px 0 14px; }
.new-day { padding: 16px 20px; }
.new-day form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }


/* ---------- остаток унаследованных классов ----------
   Собраны здесь после сплошной сверки со старым файлом: при переписывании темы
   часть правил выпала, и разметка, которая на них опиралась, оставалась голой.
   Теперь сверка пройдена целиком — потерянных классов нет. */

.region-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                gap: 16px; }

/* раскрывающиеся блоки «добавить» — та же роль, что у .add-point */
.add-block summary, .new-point summary {
  cursor: pointer; color: var(--s700); font-weight: 500;
  margin: 18px 0 4px; font-size: 15px;
}
.add-block summary:hover, .new-point summary:hover { color: var(--vermillion); }

/* кнопка-крестик: удаление строки в таблице задания */
.btn-x {
  width: 28px; height: 28px; padding: 0; line-height: 1;
  border: 1px solid var(--err-br); background: var(--paper);
  color: var(--err-tx); border-radius: var(--r); font-size: 15px;
}
.btn-x:hover { background: var(--err-tx); color: #fff; border-color: var(--err-tx); }

/* Кнопка выбора точки: нажимают её постоянно и часто в перчатках, поэтому
   ощутимая высота и вся ширина ячейки.

   ФИКСИРОВАННАЯ ШИРИНА, А НЕ ПО СОДЕРЖИМОМУ. Раньше кнопка тянулась по длине
   названия: «Автоформула» и «ТЦ Мега Белая Дача, корпус 2» давали кнопки
   разной ширины, и колонка выглядела рваной. Теперь ширина одна на все строки,
   а длинное название переносится на две строки — высота у соседних кнопок
   тоже выравнивается по минимуму, так что столбец читается ровным. */
.pt-btn {
  display: flex; align-items: center; text-align: left;
  /* Ширина ФИКСИРОВАНА, а не по содержимому. Раньше кнопка тянулась за
     названием: «Автоформула» давала одну ширину, «ТЦ Мега Нижний Новгород,
     склад 4» — другую, и колонка выглядела рваной. Теперь все кнопки столбца
     одного размера, длинное название переносится на вторую строку. */
  width: 300px; max-width: 100%; min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--cloud); border-radius: var(--r);
  background: var(--paper); color: var(--s900);
  font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer;
  transition: border-color .12s, background .12s;
  white-space: normal; overflow-wrap: anywhere;
}
.pt-btn:hover { border-color: var(--s900); background: var(--vellum); }
.pt-btn:active { background: var(--frost); }
/* На узком экране кнопка ужимается по месту, а не ломает таблицу */
@media (max-width: 1100px) { .pt-btn { width: 100%; } }

.ro-route { color: var(--s600); font-weight: 500; text-align: center; }
.empty-row.hidden, .hidden { display: none; }

.notes { list-style: none; padding: 0; margin: 12px 0; }
.notes li { border-left: 3px solid var(--cloud); padding: 8px 12px; margin: 8px 0;
            background: var(--paper); border-radius: 0 var(--r) var(--r) 0; }


/* вкладки в задании: стилей не было вовсе — вкладки выглядели обычными
   ссылками, и понять, какая активна, можно было только по содержимому */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--frost);
        margin: 20px 0 0; }
.tabs a {
  padding: 10px 18px; text-decoration: none; color: var(--s600);
  font-size: 14px; font-weight: 500; border-radius: var(--r) var(--r) 0 0;
  border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px;
}
.tabs a:hover { color: var(--s900); background: var(--vellum); }
.tabs a.tab-active {
  color: var(--s900); background: var(--paper);
  border-color: var(--frost); border-bottom: 1px solid var(--paper);
}

/* липкая панель действий над таблицей задания */
.header-toolbar {
  background: var(--paper) !important; border: 1px solid var(--frost);
  border-radius: var(--r) !important; box-shadow: var(--sh);
}

.day-hero__l, .route-head-main { min-width: 0; }

/* ---------- служебные ---------- */
.pager { display: flex; gap: 16px; align-items: center; margin-top: 20px; }
.danger-zone { margin-top: 26px; padding: 16px 18px; background: var(--paper);
               border: 1px solid var(--err-br); border-radius: var(--r); }
.danger-zone form { display: inline-flex; gap: 8px; align-items: center; }
.inline-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
              color: var(--s700); }
.voice-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0;
                font-size: 14px; color: var(--s700); }
.fmt-on { font-weight: 600; color: var(--s900); text-decoration: none; }


/* =====================================================================
   СПЕЦИФИЧНЫЕ ЭКРАНЫ
   Секции ниже описывают то, чего нет в общей теме: сортировку,
   наборку, возвраты, поставки. Цвета приведены к токенам темы —
   двух палитр в проекте быть не должно.
   ===================================================================== */

/* --- плитки автопарка --- */
.tiles { display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 24px; }
.tile { display:block; width:230px; padding:14px 16px; border-radius: var(--r);
        text-decoration:none; color:var(--carbon); border:1px solid #ddd;
        background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08); transition:transform .1s; }
.tile:hover { transform:translateY(-2px); box-shadow:0 3px 8px rgba(0,0,0,.15); }
.tile-title { font-weight:700; font-size:16px; margin-bottom:4px; }
.tile-sub { font-size:13px; color:#666; }
.tile-attention { margin-top:8px; font-size:12px; font-weight:600; color:#b00; }
.tile-green  { border-left:6px solid var(--ok-tx); }
.tile-yellow { border-left:6px solid var(--warn-br); background:var(--warn-bg); }
.tile-red    { border-left:6px solid var(--err-tx); background:var(--err-bg); }
.attention-bar { background:var(--warn-bg); border:1px solid var(--warn-br); color:var(--warn-tx);
                 padding:8px 12px; border-radius: var(--r); font-weight:600; }
.row-warn { background:var(--warn-bg); }
.txt-red { color:var(--err-tx); font-weight:600; }
.txt-orange { color:var(--warn-tx); font-weight:600; }
.card-form label.inline { display:inline-block; width:auto; margin-right:12px; }
.card-form label.inline input { width:auto; }
/* ================= СКЛАД ================= */
.wh-bar { display:flex; gap:16px; align-items:center; flex-wrap:wrap;
          background:#fff; padding:10px 14px; border-radius:8px;
          box-shadow:0 1px 3px rgba(0,0,0,.08); margin-bottom:18px; }
.wh-bar select { padding:6px 8px; border:1px solid var(--cloud); border-radius: var(--r); }

/* Поле сканирования — крупное намеренно: на складе смотрят на экран издалека
   и часто в перчатках, мелкое поле здесь не читается */
.scan-form { display:flex; gap:8px; margin:18px 0 6px; }
.scan-form input { flex:1; max-width:520px; padding:14px 16px; font-size:20px;
                   letter-spacing:1px; border:2px solid var(--vermillion); border-radius:8px; }
.scan-form input:focus { outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.18); }

.scan-card { background:#fff; border:1px solid #ddd; border-radius: var(--r);
             padding:16px 18px; margin-top:18px;
             box-shadow:0 1px 3px rgba(0,0,0,.08); }
.scan-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.scan-uid { font-size:26px; font-weight:700; letter-spacing:2px; font-family:monospace; }
.scan-status { font-size:15px; font-weight:600; padding:6px 12px;
               border-radius: var(--r); background:var(--vellum); white-space:nowrap; }
.scan-error { background:var(--err-bg); border:1px solid var(--err-br); color:var(--err-tx);
              padding:16px 18px; border-radius: var(--r); margin-top:18px; font-size:17px; }

.tile-grey { border-left:6px solid var(--mist); }
.tile-blue { border-left:6px solid var(--vermillion); background:var(--info-bg); }

/* ФИКС счётчика мест в задании.
   Причина бага: правило .ship-grid input[type=number] { width:100% } специфичнее
   (класс + атрибут + тег), чем .counter input { width:46px }, и побеждает
   независимо от порядка объявления. Поле растягивалось на всю ячейку, а
   white-space:nowrap не давал перенести кнопку «+» — она уезжала за правый край.
   Лечится повышением специфичности: ширины кнопок и поля заданы жёстко и от
   ширины колонки не зависят. Сами правила — выше, в блоке «СЧЁТЧИК МЕСТ».

   Здесь раньше стояло .ship-grid .counter { display: flex } — и это был баг:
   класс counter висит на самой ячейке <td>, а flex выводит её из табличного
   потока. Ячейка переставала участвовать в высоте строки и наплывала на
   соседние — заметнее всего там, где под точкой выведен адрес и строка выше
   обычной. Правило удалено, ячейка снова table-cell. */
/* поле мест не readonly — при 20 местах кликать 20 раз бессмысленно */
.ship-grid .counter input[type=number]:focus { outline: none;
        border-color: var(--vermillion); box-shadow: 0 0 0 3px rgba(228,43,12,.15); }

/* точка, у которой есть места без напечатанной этикетки */
.badge-nolabel { display:inline-block; background:var(--warn-bg); color:var(--warn-tx);
        font-size:11px; font-weight:600; padding:2px 7px; border-radius: var(--r);
        margin-left:6px; vertical-align:middle; }
.lock-ico { font-size:15px; opacity:.65; cursor:help; }

/* --- сортировка --- */
.badge-hub { background:var(--info-bg); color:var(--info-tx); font-size:11px; font-weight:700;
             padding:2px 8px; border-radius: var(--r); margin-left:6px; }
.voice-toggle { display:inline-flex; align-items:center; gap:6px; margin:4px 0 0;
                color:var(--s600); font-size:14px; cursor:pointer; }
.voice-toggle input { width:auto; }
.inline-chk { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--s600); }
.inline-chk input { width:auto; }

/* Результат скана. Размеры намеренно крупные: кладовщик смотрит на монитор
   с полутора-двух метров, стоя у стола сортировки, и должен считывать номер
   маршрута мельком, не подходя ближе. */
.sort-box { margin-top:20px; padding:22px 26px; border-radius: var(--r);
            border:2px solid var(--cloud); background:#fff; }
.sort-label { font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--s600); }
/* Маршрут и направление рядом: кладовщик считывает пару «номер — куда» одним
   взглядом, не переводя глаза вниз к мелкому тексту */
.sort-main { display:flex; align-items:flex-start; gap:36px; flex-wrap:wrap; }
.sort-route-block { min-width:190px; }
.sort-dest-block { border-left:3px solid rgba(0,0,0,.09); padding-left:28px; min-width:230px; }
.sort-route { font-size:112px; line-height:1.05; font-weight:800; letter-spacing:-2px; }
.sort-dest { font-size:46px; line-height:1.1; font-weight:800; }
.sort-region { font-size:26px; line-height:1.15; font-weight:600; color:var(--s600); }
.sort-headline { font-size:38px; line-height:1.15; font-weight:800; }
.sort-notes { margin:12px 0 0; padding-left:20px; font-size:16px; }
.sort-notes li { margin:4px 0; }
.sort-meta { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px;
             padding-top:12px; border-top:1px solid var(--frost); font-size:15px; }

.sort-ok      { border-color:var(--ok-tx); background:var(--ok-bg); }
.sort-ok .sort-route, .sort-ok .sort-dest { color:var(--ok-tx); }
.sort-warning { border-color:var(--warn-br); background:var(--warn-bg); }
.sort-warning .sort-route, .sort-warning .sort-dest { color:var(--warn-tx); }
.sort-reroute { border-color:var(--warn-tx); background:var(--warn-bg); }
.sort-reroute .sort-headline { color:var(--warn-tx); }
.sort-error   { border-color:var(--err-br); background:var(--err-bg); }
.sort-error .sort-headline { color:var(--err-tx); }

/* Заголовки групп в боковом меню. Класс использовался в base.html с самого
   начала, но правила под него не было — группы выглядели как обычные белые
   абзацы вровень с пунктами. С четырьмя группами это стало мешать читать меню */
.sidebar .nav-group-title {
    margin: 18px 0 6px; padding: 0 12px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--mist);
}
.sidebar nav > .nav-group-title:first-of-type { margin-top: 8px; }

/* --- наборка сборных мест --- */
.pack-progress { margin-top:8px; font-size:14px; }
.pack-head { display:flex; justify-content:space-between; align-items:flex-start;
             gap:20px; flex-wrap:wrap; margin-top:18px; padding:14px 18px;
             background:#fff; border-radius: var(--r); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.pack-counter { font-size:44px; font-weight:800; line-height:1; color:var(--warn-tx); }
.pack-counter.pack-done { color:var(--ok-tx); }
.pack-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.pack-result { margin-top:16px; padding:16px 20px; border-radius: var(--r); border:2px solid var(--cloud); }
.pack-verdict { font-size:30px; font-weight:800; line-height:1.15; }
.pack-note { margin-top:6px; font-size:16px; }
.pack-ok      { border-color:var(--ok-tx); background:var(--ok-bg); }
.pack-ok .pack-verdict { color:var(--ok-tx); }
.pack-warning { border-color:var(--warn-br); background:var(--warn-bg); }
.pack-warning .pack-verdict { color:var(--warn-tx); }
.pack-error   { border-color:var(--err-br); background:var(--err-bg); }
.pack-error .pack-verdict { color:var(--err-tx); }

/* Красное → зелёное по мере наборки: строку видно боковым зрением,
   не вчитываясь в текст */
.pack-row-wait  { background:var(--err-bg); }
.pack-row-ok    { background:var(--ok-bg); }
.pack-row-other { background:var(--warn-bg); }

.recv-chip { display:inline-block; background:var(--err-bg); color:var(--err-tx); font-size:12px;
             padding:2px 8px; border-radius: var(--r); margin:2px 3px 2px 0; }
.recv-chip.recv-done { background:var(--ok-bg); color:var(--ok-tx); }

/* --- экран маршрутов наборки --- */
.pack-region { margin-bottom: 30px; }
.pack-region-head { display:flex; align-items:baseline; gap:14px; margin:0 0 10px; }
.pack-region-head h2 { margin:0; font-size:21px; }

/* Плитка маршрута. Шире обычной: внутри должен помещаться состав маршрута —
   ради него всё и делалось, чтобы не проваливаться в каждый маршрут ради
   ответа на вопрос «а что там внутри». Фиксированная колонка, а не auto-fill
   по минимуму: плитки с разным числом заказчиков иначе прыгают по высоте */
.pack-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
              gap:14px; align-items:start; }
.pack-tile { background:#fff; border:1px solid #ddd; border-left-width:6px;
             border-radius: var(--r); padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,.08);
             transition:transform .1s, box-shadow .1s; }
.pack-tile:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.13); }
.pack-tile.tile-none { border-left-color:var(--err-br); background:var(--err-bg); }
.pack-tile.tile-part { border-left-color:var(--warn-br); background:var(--warn-bg); }
.pack-tile.tile-ok   { border-left-color:var(--ok-tx); background:var(--ok-bg); }

.pack-tile-head { display:flex; align-items:center; gap:12px;
                  text-decoration:none; color:var(--s900); }
.pack-tile-head:hover .pack-tile-no { background:var(--vermillion); }
.pack-tile-no { display:inline-block; min-width:52px; text-align:center;
                background:var(--vermillion); color:#fff; font-size:26px; font-weight:800;
                padding:4px 10px; border-radius:8px; line-height:1.15; }
.pack-tile-name { display:flex; flex-direction:column; gap:2px; }
.pack-tile-name b { font-size:16px; }
.pack-tile-region { font-size:13px; color:var(--s600); }

/* Полоса наборки: заполненность видно боковым зрением, не читая цифры */
.pack-bar { height:9px; border-radius: var(--r); background:var(--frost); overflow:hidden; margin-top:12px; }
.pack-bar span { display:block; height:100%; background:var(--ok-tx); }
.pack-bar-text { margin-top:5px; font-size:13px; color:var(--s600); }

.pack-tile-cust { margin-top:9px; line-height:2; min-height:26px; }
.pack-tile-cont { margin-top:8px; padding-top:8px; border-top:1px solid var(--frost); }

.cust-chip { display:inline-block; background:var(--err-bg); color:var(--err-tx); font-size:12px;
             padding:2px 9px; border-radius: var(--r); margin:0 4px 2px 0; }
.cust-chip.cust-done { background:var(--ok-bg); color:var(--ok-tx); }

.cont-chip { display:inline-block; background:var(--info-bg); color:var(--info-tx); font-size:12px;
             font-family:monospace; padding:3px 9px; border-radius: var(--r);
             margin:0 4px 3px 0; text-decoration:none; border:1px solid var(--info-br); }
.cont-chip:hover { background:var(--info-bg); }
.cont-chip.cont-closed { background:var(--vellum); color:var(--s600); border-color:var(--cloud); }
.cont-chip.cont-active { background:var(--vermillion); color:#fff; border-color:var(--vermillion); font-weight:700; }
.cont-switch { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 4px; }

/* --- шапка зоны наборки --- */
.route-head { display:flex; align-items:center; gap:18px; background:#fff;
              padding:14px 20px; border-radius: var(--r); margin-bottom:6px;
              box-shadow:0 1px 3px rgba(0,0,0,.08); }
.route-head-no { font-size:56px; font-weight:900; line-height:1; color:var(--vermillion);
                 min-width:80px; text-align:center; }
.route-head-title { font-size:24px; font-weight:800; }
.route-head-sub { color:var(--s600); font-size:15px; margin-top:4px; }

/* --- возвраты --- */
.ret-badge { display:inline-block; font-size:12px; font-weight:600;
             padding:3px 10px; border-radius: var(--r); white-space:nowrap; }
.ret-yellow { background:var(--warn-bg); color:var(--warn-tx); }
.ret-blue   { background:var(--info-bg); color:var(--info-tx); }
.ret-green  { background:var(--ok-bg); color:var(--ok-tx); }
.ret-grey   { background:var(--vellum); color:var(--s600); }

.ret-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr));
            gap:24px; margin-top:22px; }

/* Форма водителя: одно поле в строку, крупные элементы — заполняется с телефона
   одной рукой, стоя у машины */
.ret-form { display:flex; flex-direction:column; gap:12px; max-width:520px; padding:12px 4px; }
.ret-form label { display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:14px; }
.ret-form select, .ret-form input, .ret-form textarea {
    padding:11px 12px; font-size:16px; border:1px solid var(--cloud); border-radius: var(--r); width:100%; }
.ret-form button { padding:14px 20px; font-size:17px; }
.ret-form details summary { font-weight:400; }

.ret-photos { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 18px; }
.ret-photos img { width:190px; height:190px; object-fit:cover; border-radius:8px;
                  border:1px solid var(--cloud); }
.ret-photos a:hover img { border-color:var(--vermillion); }

/* Карточка заказчика на экране приёмки возвратов у точки. Форма спрятана в
   details: на экране телефона три развёрнутые формы подряд не помещаются,
   а водителю обычно нужна одна */
.ret-cust-card { background:#fff; border:1px solid #ddd; border-left:6px solid var(--vermillion);
                 border-radius: var(--r); padding:14px 16px; margin-bottom:12px;
                 box-shadow:0 1px 3px rgba(0,0,0,.08); }
.ret-cust-nodelivery { border-left-color:var(--mist); background:var(--vellum); }
.ret-cust-head { display:flex; justify-content:space-between; align-items:flex-start;
                 gap:14px; flex-wrap:wrap; }
.ret-cust-name { font-size:19px; font-weight:700; }
.ret-cust-form summary { cursor:pointer; color:var(--vermillion); font-weight:600;
                         margin-top:10px; font-size:16px; }
.btn-returns { display:inline-block; margin-top:6px; font-size:14px; }

/* --- ЛК: легенда цветов в архиве --- */
.leg { display:inline-block; padding:1px 8px; border-radius: var(--r); font-size:12px;
       font-weight:600; margin:0 2px; }
.leg-green  { background:var(--ok-bg); color:var(--ok-tx); }
.leg-yellow { background:var(--warn-bg); color:var(--warn-tx); }
.leg-red    { background:var(--err-bg); color:var(--err-tx); }
.leg-grey   { background:var(--vellum); color:var(--s600); }
.tile-grey  { border-left:6px solid var(--mist); }

/* --- заявки на изменение реквизитов --- */
.req-card { background:#fff; border:1px solid #ddd; border-left:6px solid var(--cloud);
            border-radius: var(--r); padding:14px 18px; margin-bottom:14px;
            box-shadow:0 1px 3px rgba(0,0,0,.08); }
.req-card.req-open { border-left-color:var(--warn-br); background:var(--warn-bg); }
.req-head { display:flex; justify-content:space-between; align-items:flex-start;
            gap:14px; flex-wrap:wrap; }
.req-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px;
               padding-top:12px; border-top:1px solid var(--frost); }
.req-actions form { display:inline-flex; gap:6px; align-items:center; }

/* --- форма реквизитов: подпись и поле в одной сетке --- */
/* Раньше подпись стояла над полем (.card-form label), и при разной длине
   подписей поля всё равно выравнивались, но глазу приходилось прыгать
   сверху вниз по каждой паре. Две колонки: подпись прижата вправо, вплотную
   к своему полю, поля начинаются по одной вертикали */
.rq-form fieldset { border:1px solid #ddd; border-radius:8px; margin:12px 0;
                    padding:14px 18px; max-width:820px; }
.rq-form legend { font-weight:600; padding:0 6px; }
.rq-row { display:grid; grid-template-columns:230px minmax(0, 1fr);
          gap:10px 16px; align-items:start; margin-bottom:10px; max-width:820px; }
.rq-row > label { text-align:right; padding-top:9px; font-size:14px;
                  font-weight:600; color:var(--s700); line-height:1.3; }
.rq-row input, .rq-row textarea {
    width:100%; padding:9px 11px; font-size:15px; box-sizing:border-box;
    border:1px solid var(--cloud); border-radius: var(--r); }
.rq-row textarea { resize:vertical; }
.rq-row input:disabled, .rq-row textarea:disabled {
    background:var(--vellum); color:var(--s600); cursor:not-allowed; }
.rq-row input:focus, .rq-row textarea:focus {
    outline:none; border-color:var(--vermillion); box-shadow:0 0 0 3px rgba(37,99,235,.15); }

.rq-block { border:1px solid #ddd; border-radius:8px; padding:14px 18px;
            max-width:820px; }
.rq-block legend { font-weight:600; padding:0 6px; }

/* На узком экране колонка подписей съедает половину ширины — складываем в одну */
@media (max-width: 700px) {
    .rq-row { grid-template-columns:1fr; gap:4px; }
    .rq-row > label { text-align:left; padding-top:0; }
}

/* --- дата доставки в форме задания --- */
.delivery-date-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                     background:#fff; padding:12px 16px; border-radius:8px;
                     margin:14px 0 18px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.delivery-date-row label { font-weight:600; }
.delivery-date-row input[type=date] { padding:8px 10px; font-size:15px;
                                      border:1px solid var(--cloud); border-radius: var(--r); }
.delivery-date-row .hint { flex:1 1 340px; }

/* --- публичная регистрация --- */
.auth-page { background:var(--vellum); padding:28px 16px; }
.auth-wide { max-width:900px; margin:0 auto; background:#fff; padding:26px 32px;
             border-radius: var(--r); box-shadow:0 2px 10px rgba(0,0,0,.08); }
.auth-wide h1 { margin-top:0; }
.auth-errors { background:var(--err-bg); border:1px solid var(--err-br); color:var(--err-tx);
               padding:12px 16px; border-radius:8px; margin:14px 0; }
.req { color:var(--err-tx); }
.reg-checks { display:flex; flex-wrap:wrap; gap:10px 18px; }

/* --- поставки --- */
.place-weights { display:flex; flex-wrap:wrap; gap:8px 12px; }
.place-weights label { display:inline-flex; align-items:center; gap:5px;
                       font-size:13px; font-weight:400; color:var(--s600); }
.place-weights input { width:88px; padding:6px 8px; font-size:14px;
                       border:1px solid var(--cloud); border-radius: var(--r); }

/* Переключатель вариантов кнопками вместо выпадающего списка: вариантов мало,
   все видны сразу, и выбор делается одним касанием, а не двумя */
.seg { display:inline-flex; border:1px solid var(--cloud); border-radius:8px;
       overflow:hidden; flex-wrap:wrap; }
.seg-item { position:relative; }
.seg-item input { position:absolute; opacity:0; pointer-events:none; }
.seg-item span { display:block; padding:9px 16px; font-size:14px; font-weight:600;
                 color:var(--s600); cursor:pointer; background:#fff;
                 border-right:1px solid var(--frost); white-space:nowrap; }
.seg-item:last-child span { border-right:0; }
.seg-item input:checked + span { background:var(--vermillion); color:#fff; }
.seg-item input:disabled + span { cursor:not-allowed; opacity:.6; }
.seg-item span:hover { background:var(--info-bg); }
.seg-item input:checked + span:hover { background:var(--vermillion); }

.pw-total { margin-top:8px; font-size:15px; color:var(--s700); }
.pw-total b { font-size:18px; }

/* --- закрепление сотрудников за складами --- */
.wh-cell { display:flex; align-items:center; justify-content:center; gap:4px;
           font-size:11px; white-space:nowrap; }
.wh-cell input { width:auto; margin:0; }

/* --- задания: день доставки --- */
/* Сегодняшний день — единственная крупная цель на экране. Вчера уходит в
   строку, остальное в таблицу: размер элемента должен отражать, как часто
   в него заходят */
.day-hero {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--frost);
  border-left: 4px solid var(--mist);
  border-radius: var(--r); padding: 28px 32px; margin-bottom: 12px;
  text-decoration: none; color: var(--s900); box-shadow: var(--sh);
  transition: transform .1s, box-shadow .1s, border-color .1s;
  position: relative;
}
.day-hero:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
.day-hero--filled { border-left-color: var(--vermillion); }
.day-hero__date { font-size: 34px; font-weight: 400; letter-spacing: -.8px;
                  line-height: 1.1; margin-top: 6px; }
.day-hero__r { display: flex; gap: 36px; flex-wrap: wrap; margin-left: auto;
               padding-right: 28px; }
.day-stat { display: flex; flex-direction: column; }
.day-stat b { font-size: 30px; font-weight: 400; line-height: 1.1;
              letter-spacing: -.5px; }
.day-stat span { font-size: 13px; color: var(--s600); margin-top: 2px; }
.day-hero__empty { color: var(--s600); font-size: 15px; line-height: 1.4;
                   text-align: right; }
.day-hero__go, .day-row__go { color: var(--mist); font-size: 22px; }
.day-hero__go { position: absolute; right: 26px; }

/* Плитки дней из справочника: класс был в проекте, при переписывании темы я его
   потерял — возвращаю в общей палитре */
.day-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
             gap: 12px; }
.day-card { display: block; background: var(--paper); border: 1px solid var(--frost);
            border-radius: var(--r); padding: 16px 20px; text-decoration: none;
            color: var(--s900); transition: transform .1s, box-shadow .1s, border-color .1s; }
.day-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lift);
                  border-color: var(--cloud); }
.day-card--today { border-left: 4px solid var(--vermillion); }
.day-date { font-size: 17px; font-weight: 500; letter-spacing: -.2px; }
.day-info { color: var(--s600); margin-top: 5px; font-size: 14px; }

.day-row {
  display: flex; align-items: center; gap: 20px;
  background: var(--paper); border: 1px solid var(--frost); border-radius: var(--r);
  padding: 14px 20px; margin-bottom: 20px; text-decoration: none; color: var(--s900);
}
.day-row:hover { border-color: var(--cloud); }
.day-row__l { display: flex; align-items: baseline; gap: 10px; }
.day-row__l .hint { margin: 0; }
.day-row__r { margin-left: auto; margin-top: 0; }
.new-day form { align-items: center; }
.new-day .hint { margin-top: 0; }

/* --- частые задания на экране выбора региона --- */
.freq-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
              gap: 12px; margin-bottom: 28px; }
.freq-tile {
  display: flex; flex-direction: column; gap: 2px; min-height: 88px;
  padding: 14px 16px; background: var(--paper); border: 1px solid var(--frost);
  border-left: 4px solid var(--cloud); border-radius: var(--r);
  text-decoration: none; color: var(--s900);
  transition: transform .1s, box-shadow .1s, border-color .1s;
}
.freq-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
/* задание на сегодня уже заведено — попадём в существующее, а не создадим второе */
.freq-tile--exists { border-left-color: var(--ok-tx); }
.freq-tile__region { font-size: 12px; text-transform: uppercase; letter-spacing: .3px;
                     color: var(--s600); }
.freq-tile__customer { font-size: 16px; font-weight: 500; letter-spacing: -.1px;
                       line-height: 1.25; }
.freq-tile__meta { font-size: 13px; color: var(--s600); margin-top: auto; }

/* --- закреплённая панель действий карточки --- */
/* Карточка сотрудника длинная: паспорт, права, документы, заметки. Кнопки в
   конце уезжали за экран, и чтобы отметить больничный, приходилось прокручивать
   всё до низа. Панель липнет к нижнему краю окна и всегда под рукой. */
.card-actions {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 28px 0 0; padding: 14px 18px;
  background: var(--paper); border: 1px solid var(--frost); border-radius: var(--r);
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.card-actions form { display: inline; }
.card-actions__spacer { flex: 1 1 auto; }
@media (max-width: 700px) { .card-actions__spacer { display: none; } }


/* Вордмарк «Матрёшка» в интерфейсе: тот же шрифт, что на визитке.
   line-height 1.1 обязателен — глифы выше ascent и при 1.0 срезаются сверху;
   ниже 26px рваный контур нечитаем, поэтому в сайдбаре 28px */
@font-face {
    font-family: 'Tsarevich Old';
    src: url('/static/fonts/tsarevich-old.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
.sidebar h2 {
    /* 48px: занимает большую часть ширины колонки (176px), справа остаётся
       воздух — на 54 слово упирается в край при letter-spacing .03em.
       line-height 1.1 обязателен: глифы выше собственного ascent шрифта и
       при 1.0 срезаются сверху. Отступ снизу — чтобы «Диспетчер» не прилип */
    font-family: 'Tsarevich Old', var(--font, Inter, sans-serif);
    font-weight: 400; font-size: 48px; line-height: 1.1; letter-spacing: .03em;
    margin: 0 0 10px; padding: 4px 12px 0;
}

/* Заголовки групп меню («ДИСПЕТЧЕР», «ФУЛФИЛМЕНТ», «ПРОДАЖИ») были цвета
   --mist и терялись на фоне пунктов; теперь темнее, жирнее и с тонкой чертой
   сверху — группа читается как раздел, а не как ещё одна ссылка */
.sidebar .nav-group-title {
    /* тот же шрифт, что в вордмарке. Кегль поднят до 18px и снят uppercase:
       шрифт унисейсный — строчные и так рисуются заглавными, а при 12px его
       рваный контур превращается в кашу (ниже 26px он теряет читаемость,
       здесь спасает только то, что слов мало и они знакомые) */
    font-family: 'Tsarevich Old', var(--font, Inter, sans-serif);
    font-size: 18px;
    line-height: 1.1;
    text-transform: none;
    color: var(--s700);
    font-weight: 400;
    letter-spacing: .04em;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--frost);
}
.sidebar nav > .nav-group-title:first-of-type { border-top: none; margin-top: 8px; }

/* Распределение по маршрутам (/routes/schedule): карточка на маршрут с цветной
   полосой слева — четыре цвета по кругу, соседние всегда разные. Точки внутри
   чередуются подложкой, строки одной точки — в одном оттенке и без верхней
   черты, чтобы взгляд не сползал на соседнюю точку */
.sched-route { display: block; margin: 0 0 14px; padding: 10px 12px 8px; background: var(--paper);
    border: 1px solid var(--frost); border-left: 5px solid var(--s600); border-radius: 8px; }
.sched-route.sched-c0 { border-left-color: #2563eb; }
.sched-route.sched-c1 { border-left-color: #16a34a; }
.sched-route.sched-c2 { border-left-color: #d97706; }
.sched-route.sched-c3 { border-left-color: #7c3aed; }
.sched-route .sched-grid thead tr:first-child th { background: var(--vellum); font-size: 14px; padding: 8px 10px; }
.sched-grid tr.sched-p0 td { background: #fff; }
.sched-grid tr.sched-p1 td { background: var(--vellum); }
.sched-grid tr.sched-same td { border-top: none; }
.sched-grid tr.sched-p0 + tr.sched-p1 td, .sched-grid tr.sched-p1 + tr.sched-p0 td { border-top: 2px solid var(--frost); }