/* ============================================================
   Тёмная тема кабинета OkRouter

   Продолжение темы лендинга: у кабинета и лендинга общий набор
   имён (`--indigo-*`, `--bg`, `--surface`, `--ink`), поэтому
   основа одна и та же, и человек не чувствует стыка, переходя
   с сайта в кабинет.

   Своё у кабинета — состояния: «работает», «внимание»,
   «не получилось», «к сведению». Каждое состоит из трёх частей:
   краска текста, подложка и точка-индикатор. На белом подложка
   светлая, а текст тёмный; в темноте роли меняются местами —
   подложка уходит в тень, а краска становится яркой. Смысл
   цвета при этом сохраняется: зелёное остаётся зелёным.

   Подключается последним, после ui.css и app-extra.css.
   Ни одна строка существующих файлов не тронута.
   ============================================================ */

html[data-theme="dark"]{
  color-scheme:dark;

  /* --- Марка ---------------------------------------------- */
  /* Индиго рассчитан на белый лист. На чернильном фоне нижние
     ступени читаются как грязно-синий, поэтому вся шкала поднята. */
  --indigo-800:#241A6E;
  --indigo-700:#33269C;
  --indigo-600:#4A38DC;   /* заливка крупных кнопок */
  --indigo-500:#6553F0;
  --indigo-400:#8E7DFF;   /* значки, акценты */
  --indigo-100:#1E1938;   /* была почти белая подложка */
  --indigo-50:#15122A;

  --grad-action:linear-gradient(135deg,#6553F0,#4A38DC);

  /* --- Основа --------------------------------------------- */
  --bg:#08070C;
  --surface:#100F17;
  --ink:#F4F3F8;
  --ink-2:#D2CFDB;
  --muted:#A6A2B5;
  --muted-2:#7F7B8E;
  --border:#232130;
  --border-2:#1A1823;

  /* --- Состояния ------------------------------------------ */
  /* Краска яркая, подложка тёмная, точка остаётся насыщенной:
     по ней состояние узнают боковым зрением. */
  --ok:#5FD3A0;     --ok-bg:rgba(31,163,107,.14);   --ok-dot:#2FBF80;
  --warn:#EBC161;   --warn-bg:rgba(217,158,34,.14); --warn-dot:#D99E22;
  --err:#F0857B;    --err-bg:rgba(214,63,50,.14);   --err-dot:#E4574A;
  --info:#74B8ED;   --info-bg:rgba(46,124,196,.14); --info-dot:#3E90D6;

  /* --- Пастельные подложки -------------------------------- */
  --mint:rgba(31,163,107,.12);
  --blue:rgba(46,124,196,.12);
  --yellow:rgba(217,158,34,.12);
  --lilac:rgba(110,92,240,.14);

  /* --- Тени ----------------------------------------------- */
  /* На тёмном тень падать некуда. Объём даёт светлая кромка
     сверху, а плотная тень снизу отделяет карточку от фона. */
  --shadow-1:inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.5);
  --shadow-2:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.6);
  --shadow-action:0 10px 28px rgba(101,83,240,.42);
}

/* ============================================================
   Основа
   ============================================================ */

html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}

/* ============================================================
   Кнопка смены оформления
   ============================================================ */

.theme-switch{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:transparent;color:var(--muted);cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.theme-switch svg{width:20px;height:20px;display:block;transition:transform .32s var(--ease-out)}
.theme-switch:hover{color:var(--ink);border-color:var(--muted-2)}
.theme-switch:active svg{transform:scale(.92)}
html[data-theme="dark"] .theme-switch svg{transform:rotate(180deg)}
html[data-theme="dark"] .theme-switch:active svg{transform:rotate(180deg) scale(.92)}
@media (prefers-reduced-motion:reduce){.theme-switch svg{transition:none}}

/* Кнопка в углу окна — для экрана входа, где шапки нет. */
.theme-switch--corner{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  right:calc(14px + env(safe-area-inset-right));
  z-index:60;
  background:var(--surface);
  box-shadow:var(--shadow-1);
}

/* ============================================================
   Магазин

   Шапка магазина — стекло с зашитым белым фоном. Стекло остаётся
   стеклом, но тёмным: сквозь него должно просвечивать то, что
   под ним, иначе оно мёртвое.
   ============================================================ */

html[data-theme="dark"] .shop-top{
  background:rgba(16,15,23,.82);
  border-bottom-color:var(--border);
}

/* ============================================================
   Индиго на индиго

   Бейджи и счётчики берут краску из НИЖНИХ ступеней шкалы —
   `--indigo-600` и `--indigo-700`. На белом листе это читается,
   на чернильном фоне получается тёмно-синее на почти чёрном:
   замер дал 1,5:1 у счётчиков в меню и 2,5:1 у бейджа
   «Оформлен». Это экран оператора, и по бейджу он узнаёт
   состояние заказа боковым зрением.

   Берём ту ступень, которая в этой теме и заведена для значков
   и акцентов, — `--indigo-400`. Подложки не трогаем: они уже
   тёмные и правильные.
   ============================================================ */

html[data-theme="dark"] .badge--indigo{ color:var(--indigo-400); }
/* Выбранный пункт исключён намеренно: у него подложка — залитая индиго
   кнопка, и текст там белый. Первая правка была без этого исключения и
   перебила белое своей светлой ступенью: на залитой кнопке получилось
   2,3:1, то есть я своей же рукой внёс новую беду взамен старой. */
html[data-theme="dark"] .navitem:not(.navitem--on) .navitem__n,
html[data-theme="dark"] .chip:not(.chip--on) .chip__n{ color:var(--indigo-400); }

/* ============================================================
   Подложки, заданные почти белым насмерть

   Карточки сводки, журнал, ячейка QR и пустые плитки устройств
   держат `#F6F7FC` — цвет, рассчитанный на белый лист. В тёмной
   теме краска текста уходит в светлую, и получается светлое на
   почти белом: замер дал 1:1 на числах сводки. Это первый экран,
   на который владелец смотрит утром, и цифры на нём не видно
   вовсе.

   Светлую тему не трогаем: там эти подложки верны. Здесь
   подставляем поверхность темы — карточка остаётся карточкой,
   но своего цвета.
   ============================================================ */

html[data-theme="dark"] .stat,
html[data-theme="dark"] .log,
html[data-theme="dark"] .qr,
html[data-theme="dark"] .device--empty{ background:var(--surface); }
html[data-theme="dark"] button.list__row:hover{ background:var(--surface); }

/* ============================================================
   Путь заказа

   Текущий шаг красится `--indigo-700` — нижней ступенью шкалы.
   На белом это уместно, на чернильном фоне получается 1,8:1:
   строка «Оформлен» — главная на странице, её открывают по
   ссылке из письма сразу после оплаты, — читалась хуже всех
   остальных.

   Берём ту же ступень для значков и акцентов, что и у бейджей.
   ============================================================ */

html[data-theme="dark"] .ostage--now{ color:var(--indigo-400); }

/* ============================================================
   Ссылки

   Ссылка красится `--indigo-600` — ступенью для заливки крупных
   кнопок. На белом листе она читается; на чернильном фоне это
   2,6–2,8:1. Хуже всего там, где это важнее всего: «офертой» и
   «обработкой данных» под кнопкой оплаты — человек соглашается
   с тем, чего почти не видит.

   Берём ту же акцентную ступень, что у бейджей и шагов заказа.
   Заливку кнопок не трогаем: там белый текст на индиго, и она
   в порядке.
   ============================================================ */

/* Кнопки исключены: у `.btn--primary` заливка индиго и белый текст. Без
   этого исключения моё же правило перекрасило «Оформить заказ» светлым
   индиго по индиго — 1,6:1. Поймал следующим прогоном; это вторая такая
   правка за три итерации, и обе нашёл только замер после изменения. */
html[data-theme="dark"] a:not(.btn){ color:var(--indigo-400); }
html[data-theme="dark"] .linkish{ color:var(--indigo-400); }
html[data-theme="dark"] .linkish:hover{ color:var(--indigo-500); }

/* --------------------------------------------------------------------
   ПОДЛОЖКИ, ЗАБИТЫЕ СВЕТЛЫМ НАПРЯМУЮ

   В ui.css у полосы прогресса и у заглушки-скелета фон задан цифрой
   #EBEEF6, мимо переменных. В темноте это светлые прямоугольники посреди
   чёрного экрана, а подпись на них становится нечитаемой: проба контраста
   намерила 2.1:1 на подписи «24» под столбиком графика в сводке админки.

   (Заодно отмечу, не трогая: класс .bar в ui.css — полоса прогресса, а в
   app-extra.css — столбик графика. Имя одно, смысла два, и фон от первого
   достаётся второму. Переименование — отдельная работа.)
   -------------------------------------------------------------------- */
html[data-theme="dark"] .bar,
html[data-theme="dark"] .skel{
  background:#1B1926;
}

/* Зона нажатия у переключателя темы.

   Рисунок оставляем 40×40 — он стоит в ряду с логотипом и меню, и растить
   его значит перекраивать шапку. Растим только зону: невидимый квадрат
   44×44 поверх, ровно как у аватара в кабинете. Проба мишеней держала эту
   кнопку в тесных на всех страницах сразу. Угловую (экран входа) не трогаем:
   это правило стоит ниже её position:fixed и уводило кнопку за край экрана. */
.theme-switch:not(.theme-switch--corner){position:relative}
.theme-switch::after{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}

/* Все роутеры (08.10): пометка оператора индиго-700 на тёмном фоне почти не
   видна — светлее, как у других индиго-подписей тёмной темы. */
html[data-theme="dark"] .reg-label { color: var(--indigo-400); }

/* --------------------------------------------------------------------
   ЕЩЁ ПОДЛОЖКИ, ЗАБИТЫЕ СВЕТЛЫМ (08.10)

   Замер контраста по всем разделам админки в тёмной теме: серые бейджи
   («10 дней», «не прошит», «это вы», «всегда») дали 2,18:1 — светлый текст
   на почти белой подложке #EFF0F6. Тот же класс поломки — у переключателя,
   сегментов, шагов, подсказки «?», флага-кода, легенды, пустых клеток
   «Денег по дням», выключенного поля и крестика окна. Светлую тему не
   трогаем: там эти цвета верны.
   -------------------------------------------------------------------- */
html[data-theme="dark"] .badge--grey,
html[data-theme="dark"] .seg,
html[data-theme="dark"] .step-pill,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .flag--code,
html[data-theme="dark"] .list__ico,
html[data-theme="dark"] .inst__mark,
html[data-theme="dark"] .modal__close,
html[data-theme="dark"] .funnel__bar,
html[data-theme="dark"] .formbox,
html[data-theme="dark"] .legend,
html[data-theme="dark"] .note--plain,
html[data-theme="dark"] .input[disabled]{ background:#1B1926; }
html[data-theme="dark"] .modal__close:hover{ background:#262333; }
html[data-theme="dark"] .switch__track,
html[data-theme="dark"] .sheet__grip{ background:#2C2939; }
/* Клетки «Денег по дням»: пустая — тёмная, а шкала идёт от тёмного индиго к
   яркому, как и в светлой теме — от бледного к насыщенному. */
html[data-theme="dark"] .tile{ background:#1B1926; }
html[data-theme="dark"] .tile--1{ background:#2E2668; }
html[data-theme="dark"] .tile--2{ background:#4A3CB0; }
html[data-theme="dark"] .tile--3{ background:#6B5AE6; }

/* --------------------------------------------------------------------
   ИНДИГО-700 ТЕКСТОМ В АДМИНКЕ (08.10)

   Замер с открытыми карточками нашёл ещё четыре места, где текст красится
   нижней ступенью шкалы: число у выбранной вкладки (1,52:1), текущий шаг
   заказа (1,72:1), пункт меню под мышью и ключ на наклейке. Берём ту же
   акцентную ступень, что у бейджей и ссылок; выбранный пункт меню исключён —
   у него белый текст на залитом индиго.
   -------------------------------------------------------------------- */
html[data-theme="dark"] #adminView .prov-step--now,
html[data-theme="dark"] #adminView .navitem:not(.navitem--on):hover{ color:var(--indigo-400); }
/* Только в админке: программа склада печатает ту же наклейку на белом. */
@media screen{
  html[data-theme="dark"] #adminView .prov-label__key{ color:var(--indigo-400); }
}

/* Столбик графика продаж — без подложки и в темноте (08.10): правило выше для
   полосы прогресса (.bar) перебивало «background: none» графика, и каждый день
   рисовался тёмным прямоугольником во всю высоту. */
html[data-theme="dark"] .chart .bar{ background:none; }

/* Карточки-числа «внимание» и «плохо» в темноте (08.10): общее правило .stat
   выше снимало их окраску, а рамки прибиты светлыми цветами (#F2DFB4, #F1D3CF) —
   оставались белёсые обводки без смысла цвета. Только в админке. */
html[data-theme="dark"] #adminView .stat--warn{ background:var(--warn-bg); border-color:transparent; }
html[data-theme="dark"] #adminView .stat--err{ background:var(--err-bg); border-color:transparent; }

/* Окно «Вы уверены?» в админке (08.10): подложка была прибита к светлой
   теме (#fff в ui.css), а текст — светлый под тёмную; окно теперь на каждой
   кнопке, изменяющей данные. */
html[data-theme="dark"] #adminView .modal{ background:var(--surface); border:1px solid var(--border); }