/* =========================================================================
   Тёмная тема LogiTrack (14.10.2026).
   Включается атрибутом data-theme="dark" на <html>; ставит его скрипт в <head>
   до отрисовки, выбор хранится в localStorage('theme'). По умолчанию светлая.

   Как устроено: здесь — значения переменных для тёмной темы и точечные
   правки. Цвета, зашитые прямо в правилах (#fff, #F8FAFD и т.п.), получают
   тёмных двойников в конце своих же файлов (блок «ТЁМНАЯ ТЕМА», собран
   tools/gen.py): так двойник весит столько же, сколько исходное правило,
   и не перебивает соседние состояния (hover, активная вкладка).

   Палитра: холодный графит с синевой (тон бокового меню), один акцент —
   тот же синий. Текст на поверхностях проверен на WCAG AA:
   --ink 14:1, --mute 6.9:1, --faint 6.0:1 на --surface; белый на --acc 4.7:1.
   Акцентный ТЕКСТ — --acc-d (светло-синий, 7.3:1), заливки — --acc.
   ========================================================================= */

html[data-theme=dark]{
  color-scheme:dark;
  --bg:#0E1420;
  --surface:#151C2A;
  --surface-2:#1A2232;
  --line:#2A3447;
  --line-2:#222B3C;
  --ink:#E3E9F4;
  --ink-2:#C2CBDC;
  --mute:#9DA9C1;
  --faint:#909CB5;

  --acc:#2F6BEF;
  --acc-d:#86ADFF;
  --acc-l:#6E9BFF;
  --acc-t:#1A2B4D;
  --acc-t2:#26396A;

  --loss:#FF8A80;
  --loss-t:#3A1D22;
  --loss-line:#5E2E35;
  --warn-t:#332A14;
  --warn-tx:#F0C46A;
  --warn-line:#5A4A1E;
  --grn:#5CD08F;
  --grn-t:#14301F;

  /* мобильный слой (m.css): фон и плашки уже тёмные, светлыми были карточки */
  --m-card:#151C2A;
}
/* Кабинет водителя держит свои переменные на body — перекрываем там же. */
html[data-theme=dark] body.drvapp{
  --d-bg:#0E1420;
  --d-surface:#151C2A;
  --d-inset:#1A2232;
  --d-line:#2A3447;
  --d-line-2:#222B3C;
  --d-ink:#E8EDF6;
  --d-ink-2:#C2CBDC;
  --d-mute:#9DA9C1;
  --d-faint:#7F8BA5;
  --d-sh:0 1px 2px rgba(0,0,0,.35);
  --acc:#2F6BEF;
  --acc-d:#86ADFF;
  --acc-l:#6E9BFF;
  --acc-t:#1A2B4D;
  --acc-t2:#26396A;
}

/* ------------------------------ Переключатель ----------------------------- */
/* Одна кнопка, два значка: в светлой показываем луну (включить тёмную),
   в тёмной — солнце. Значки инлайн-SVG, состояние читается из атрибута. */
.thm{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;padding:0;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  -webkit-tap-highlight-color:transparent}
.thm:hover{border-color:var(--acc-t2);color:var(--acc-d)}
.thm:focus-visible{outline:2px solid var(--acc-l);outline-offset:2px}
.thm svg{width:17px;height:17px;display:block}
/* !important: в шапке есть общие правила для svg, они не должны показать оба значка */
html:not([data-theme=dark]) .t-sun{display:none !important}
html[data-theme=dark] .t-moon{display:none !important}
/* в мобильной шапке кнопка — такой же круглый .m-rb, как поиск и колокольчик */
@media (min-width:821px){ .thm-m{display:none !important} }
@media (max-width:820px){ header.top .thm{display:none} }
/* шапка кабинета водителя: круглая, слева от инициалов */
.dv-thm{border-radius:50%;margin-right:10px;align-self:center;
  background:var(--d-inset,#F4F6FA);border-color:var(--d-line,#E7EBF3);color:var(--d-ink-2,#39435A)}

/* ------------------------------ Точечные правки --------------------------- */
html[data-theme=dark] a:hover{color:#B3CBFF}
/* Поля ввода красятся двойниками своих же правил (белое → поверхность);
   здесь только плейсхолдер и выключенные поля. */
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#7F8BA5;opacity:1}
html[data-theme=dark] input:disabled,html[data-theme=dark] select:disabled,
html[data-theme=dark] textarea:disabled{background-color:var(--bg);color:var(--mute)}
/* стрелка у select нарисована тёмным svg — даём светлую */
/* стрелка select осталась серой #697774 — на тёмном читается, не трогаем */

/* Чекбоксы и радио: системный вид под тёмную схему */
html[data-theme=dark] input[type=checkbox],html[data-theme=dark] input[type=radio]{accent-color:var(--acc)}

/* Подсказки и тосты на тёмном фоне в светлой теме были тёмными плашками —
   в тёмной поднимаем их на тон, чтобы отделялись от страницы */
html[data-theme=dark] .modal,html[data-theme=dark] dialog{background:var(--surface);color:var(--ink)}

/* Скроллбары внутри таблиц */
html[data-theme=dark] ::-webkit-scrollbar-thumb{background:#36425A}
html[data-theme=dark] ::-webkit-scrollbar-track{background:transparent}

/* ---------------- Список заказов: строки по статусу, как в 4Logist ----------------
   В светлой теме строка белая с цветной полосой слева. В тёмной даём ещё и
   приглушённую заливку того же цвета, что в 4Logist (голубой — в работе,
   жёлтый — выполнен, зелёный — оплачен перевозчику, красный — закрыт):
   тёмные тона одной светлоты, различаются оттенком, текст на всех 11:1 и выше. */
html[data-theme=dark] main table.ord tr.ph-planning{--phc:#56627C}
html[data-theme=dark] main table.ord tr.ph-in_progress{--phc:#4C8DFF}
html[data-theme=dark] main table.ord tr.ph-completed{--phc:#E0A243}
html[data-theme=dark] main table.ord tr.ph-carrier_paid{--phc:#34B26E}
html[data-theme=dark] main table.ord tr.ph-financially_closed{--phc:#E0628F}
html[data-theme=dark] main table.ord tr.ph-planning td{background:#151C2A}
html[data-theme=dark] main table.ord tr.ph-in_progress td{background:#152842}
html[data-theme=dark] main table.ord tr.ph-completed td{background:#29271A}
html[data-theme=dark] main table.ord tr.ph-carrier_paid td{background:#14291F}
html[data-theme=dark] main table.ord tr.ph-financially_closed td{background:#311A24}
html[data-theme=dark] main table.ord tr.ph-cancelled td{background:#121824}
html[data-theme=dark] main table.ord tr.ph-planning:hover td{background:#1C2537}
html[data-theme=dark] main table.ord tr.ph-in_progress:hover td{background:#1A3152}
html[data-theme=dark] main table.ord tr.ph-completed:hover td{background:#333022}
html[data-theme=dark] main table.ord tr.ph-carrier_paid:hover td{background:#193327}
html[data-theme=dark] main table.ord tr.ph-financially_closed:hover td{background:#3C202C}
html[data-theme=dark] main table.ord tr.ph-cancelled:hover td{background:#18202E}

/* Вход: левая панель — графит с зеленью (--nav из app.css). Правую ведём
   в том же семействе, чтобы не стояли рядом два разных тёмных. */
@media (min-width:821px){
  html[data-theme=dark] body.loginpage{background:#0F1514}
}

/* Холст страницы тёмный с первого кадра (на телефоне его красит m.css) */
@media (min-width:821px){ html[data-theme=dark]{background-color:#0E1420} }