/* ============================================================
   Токены VPN Панели — копия public/ui/tokens.css кабинета
   simreg (C:/Users/user/PycharmProjects/regsim). Правится там и копируется
   сюда целиком: две палитры, разошедшиеся по мелочи, читаются как два
   разных продукта. Ниже этой шапки файл не менялся (переводы строк — LF).
   ============================================================ */

/* ============================================================
   Токены кабинета.

   Единственное место, где заданы цвета, скругления и тени. Разделы цветов
   не знают: они описывают колонки и поля, а не рисуют оформление.

   Три состояния темы, как в референсе:
     без data-theme    — как в системе (работает медиазапрос)
     data-theme=light  — светлая принудительно
     data-theme=dark   — тёмная принудительно
   Выбор хранится в localStorage под ключом cabinet:theme. Префикс обязателен:
   старая панель пишет ключ theme без префикса, и без разделения настройки
   двух панелей перетекали бы друг в друга.

   Палитра — фирменная, из admin-style.css, чтобы кабинет не выглядел
   продуктом другой компании.
   ============================================================ */

:root {
  --brand: #07538f;          /* фирменный глубокий синий (Deep Blue): заливка главных кнопок */
  --on-brand: #ffffff;       /* на глубоком синем (7.9:1) читается белый текст */
  --brand-soft: #e4f2f6;
  /* Заливка главных кнопок: Deep Blue #07538f, одна в обеих темах (в тёмной — тот же цвет, что в светлой). Текст на ней всегда белый (7.9:1). */
  --brand-fill: #07538f;
  --brand-edge: #07538f;
  --on-fill: #ffffff;
  --link: #00718c;           /* Digital Teal, затемнённый до 5.6:1 на белом, чтобы ссылка читалась текстом */

  /* ---- прелоадеры ----
     Подложка экрана загрузки и цвет пульсирующих точек (.pdots в shell.css).
     Точки общие у трёх мест: экран загрузки, накладка поверх всего экрана и
     накладка поверх списка. Держатся здесь, а не рядом с раскладкой: цвета
     кабинета живут в токенах, и вторая их копия однажды разошлась бы с этой.

     ⚠️ Цвет точек идёт за темой, и это не украшательство: бирюзовый #00a9ae
     на светлом даёт контраст 2.9, и точка им читается слабо — что на
     светлой подложке экрана загрузки, что поверх белого списка. В светлой
     теме его место занимает Digital Teal #0086a4 из той же гаммы. */
  --boot-bg: rgba(245, 245, 245, .93);
  --dot-color: #0086a4;

  /* ---- полоса прокрутки ----
     Три ступени: в покое ползунок почти прозрачный (-idle), когда курсор над областью прокрутки —
     заметнее (--scroll-thumb), над самим ползунком и при перетаскивании — фирменный бирюзовый
     (в светлой теме Digital Teal: #00a9ae на белом заметно бледнее, как и у точек загрузки). */
  --scroll-thumb: rgba(0, 0, 0, .22);
  --scroll-thumb-idle: rgba(0, 0, 0, .07);
  --scroll-thumb-hover: rgba(0, 134, 164, .6);

  /* Длительность одного всплеска. Здесь, а не в shell.css: срок подобран
     под то, сколько живёт самый короткий из прелоадеров — экран загрузки
     (MIN_SHOW_MS в core/boot-screen.js), — и эти два числа читают вместе. */
  --dot-pulse: .8s;

  /* ---- цвета операторов ----
     Ими покрашены папки каталога тарифов: семь одинаковых серых кнопок
     приходилось читать словами, хотя бренд в кабинете уже опознаётся
     логотипом в списке заявок. Значения — те же, что видит клиент в анкете
     (getBrandPreset в public/script.js): один и тот же бренд не должен
     выглядеть в кабинете и в анкете двумя разными.
     Пара `-on` — цвет текста поверх заливки, а не «светлее/темнее»: на
     жёлтом и салатовом читается только чёрный. */
  --op-beeline: #ffd100;     --op-beeline-on: #111111;
  --op-mts: #e30613;         --op-mts-on: #ffffff;
  --op-megafon: #00b956;     --op-megafon-on: #ffffff;
  --op-rostelecom: #6f2c91;  --op-rostelecom-on: #ffffff;
  --op-tele2: #111111;       --op-tele2-on: #ffffff;
  --op-yota: #00b5e2;        --op-yota-on: #ffffff;

  --ground: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #f0f1f3;
  --rail: #fafafa;
  --line: #e3e4e7;
  --line-soft: #eeeff1;

  --ink: #1f1f1f;
  --ink-2: #3a3d43;
  --muted: rgba(0, 0, 0, .58);

  --ok: #1e8f55;
  --ok-soft: #e4f4ec;
  --warn: #c9820f;
  --warn-soft: #fcf1df;
  --info: #0d74ab;
  --info-soft: #e4f1f9;
  --info-on: #ffffff;   /* текст на заливке --info */
  --crit: #e53935;
  --crit-soft: #fdeaea;

  --shadow: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-pop: 0 12px 28px -12px rgba(31, 31, 31, .22);

  /* Сетка сот на фоне — та же плитка, что у точек «Билайн 2.0»
     (b2-theme.css), только клетка мельче: см. --grid-tile ниже. */
  --grid: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22114%22%20height=%2265.8179%22%20viewBox=%220%200%20114%2065.8179%22%3E%3Cpath%20d=%22M-33.25,8.23Q-38.0,0.0%20-33.25,-8.23L-23.75,-24.68Q-19.0,-32.91%20-9.5,-32.91L9.5,-32.91Q19.0,-32.91%2023.75,-24.68L33.25,-8.23Q38.0,0.0%2033.25,8.23L23.75,24.68Q19.0,32.91%209.5,32.91L-9.5,32.91Q-19.0,32.91%20-23.75,24.68ZM80.75,8.23Q76.0,0.0%2080.75,-8.23L90.25,-24.68Q95.0,-32.91%20104.5,-32.91L123.5,-32.91Q133.0,-32.91%20137.75,-24.68L147.25,-8.23Q152.0,0.0%20147.25,8.23L137.75,24.68Q133.0,32.91%20123.5,32.91L104.5,32.91Q95.0,32.91%2090.25,24.68ZM23.75,41.14Q19.0,32.91%2023.75,24.68L33.25,8.23Q38.0,-0.0%2047.5,-0.0L66.5,-0.0Q76.0,-0.0%2080.75,8.23L90.25,24.68Q95.0,32.91%2090.25,41.14L80.75,57.59Q76.0,65.82%2066.5,65.82L47.5,65.82Q38.0,65.82%2033.25,57.59ZM-33.25,74.05Q-38.0,65.82%20-33.25,57.59L-23.75,41.14Q-19.0,32.91%20-9.5,32.91L9.5,32.91Q19.0,32.91%2023.75,41.14L33.25,57.59Q38.0,65.82%2033.25,74.05L23.75,90.5Q19.0,98.73%209.5,98.73L-9.5,98.73Q-19.0,98.73%20-23.75,90.5ZM80.75,74.05Q76.0,65.82%2080.75,57.59L90.25,41.14Q95.0,32.91%20104.5,32.91L123.5,32.91Q133.0,32.91%20137.75,41.14L147.25,57.59Q152.0,65.82%20147.25,74.05L137.75,90.5Q133.0,98.73%20123.5,98.73L104.5,98.73Q95.0,98.73%2090.25,90.5Z%22%20fill=%22none%22%20stroke=%22rgba(13,18,32,0.075)%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --focus-ring: 0 0 0 3px rgba(0, 159, 227, .35);

  /* На светлом фоне жёлтый по тонкой линии почти не читается — держим
     заметно выше, чем в тёмной теме, где он светится сам по себе. */
  --glow-strength: .12;

  /* Подсветка под курсором — поверх бродящего свечения, поэтому слабее. */
  --glow-hover: .10;

  --f-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --r: 14px;
  --r-sm: 10px;

  --side-w: 244px;
  --side-w-mini: 60px;   /* полоса значков: 40px кнопка + поля сайдбара */
  /* Ширина колонки с карточкой заявки. В токене, а не в одном правиле,
     потому что по ней равняется и полоса свёрнутых карточек. */
  /* Ширина колонки с карточкой. Верхний предел поднят: на большом мониторе
     карточке есть куда расти, а реквизиты в широкой колонке встают в две
     колонки (.facts в rail.css) — и прокрутки внутри карточки становится
     заметно меньше. Списку при этом остаётся не меньше двух третей окна. */
  --rail-w: clamp(320px, 26vw, 560px);
  --fade: .13s ease-out; /* смена раздела; столько же ждёт FADE_MS в router.js */
  /* Появление оболочки после входа и уход экрана загрузки. Дольше, чем
     --fade, намеренно: там подменяется кусок внутри готового экрана и
     переход должен быть незаметен, а здесь меняется весь экран, и на
     130 мс это читается как мигание. Столько же ждёт FADE_SHELL_MS в
     core/ui/fade.js. */
  --fade-shell: .28s ease-out;
  --top-h: 56px;

  /* Плитка сот: у точки продаж 114×65.82, здесь 64×36.95 — те же
     пропорции (ширина ÷ √3), клетка почти вдвое мельче.
     Высоту менять только вместе с шириной: узор стыкуется сам с собой
     лишь при этом соотношении, иначе на швах плитки будет разрыв.
     Сам узор — со скруглёнными углами, поэтому у соседних сот в вершине
     остаётся просвет: три соты скругляют там свои углы навстречу. */
  --grid-tile: 64px 36.95px;

  /* Смещение узора. Свечение обрезается маской из той же плитки, и её
     положение обязано совпадать с узором до пикселя — иначе блик
     пойдёт по своим линиям, рядом с нарисованными. Один токен на оба
     слоя как раз и не даёт им разъехаться. */
  --grid-offset: center -4px;

  /* Та же плитка сот, но обводка непрозрачная: маска смотрит только на
     альфа-канал, полупрозрачная дала бы едва заметное свечение. */
  --grid-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22114%22%20height=%2265.8179%22%20viewBox=%220%200%20114%2065.8179%22%3E%3Cpath%20d=%22M-33.25,8.23Q-38.0,0.0%20-33.25,-8.23L-23.75,-24.68Q-19.0,-32.91%20-9.5,-32.91L9.5,-32.91Q19.0,-32.91%2023.75,-24.68L33.25,-8.23Q38.0,0.0%2033.25,8.23L23.75,24.68Q19.0,32.91%209.5,32.91L-9.5,32.91Q-19.0,32.91%20-23.75,24.68ZM80.75,8.23Q76.0,0.0%2080.75,-8.23L90.25,-24.68Q95.0,-32.91%20104.5,-32.91L123.5,-32.91Q133.0,-32.91%20137.75,-24.68L147.25,-8.23Q152.0,0.0%20147.25,8.23L137.75,24.68Q133.0,32.91%20123.5,32.91L104.5,32.91Q95.0,32.91%2090.25,24.68ZM23.75,41.14Q19.0,32.91%2023.75,24.68L33.25,8.23Q38.0,-0.0%2047.5,-0.0L66.5,-0.0Q76.0,-0.0%2080.75,8.23L90.25,24.68Q95.0,32.91%2090.25,41.14L80.75,57.59Q76.0,65.82%2066.5,65.82L47.5,65.82Q38.0,65.82%2033.25,57.59ZM-33.25,74.05Q-38.0,65.82%20-33.25,57.59L-23.75,41.14Q-19.0,32.91%20-9.5,32.91L9.5,32.91Q19.0,32.91%2023.75,41.14L33.25,57.59Q38.0,65.82%2033.25,74.05L23.75,90.5Q19.0,98.73%209.5,98.73L-9.5,98.73Q-19.0,98.73%20-23.75,90.5ZM80.75,74.05Q76.0,65.82%2080.75,57.59L90.25,41.14Q95.0,32.91%20104.5,32.91L123.5,32.91Q133.0,32.91%20137.75,41.14L147.25,57.59Q152.0,65.82%20147.25,74.05L137.75,90.5Q133.0,98.73%20123.5,98.73L104.5,98.73Q95.0,98.73%2090.25,90.5Z%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");

  /* Бирюзовый для свечения — цифрами, потому что в градиентах нужна
     прозрачность: rgba(var(--glow-rgb), .5). Это Turquoise #00a9ae. */
  --glow-rgb: 0, 169, 174;
}

/* `only light`, а не `light`. Chrome на Android (и Samsung Internet, и
   WebView мессенджеров) при системной тёмной теме сам инвертирует страницы,
   которые «не умеют тёмную», — Auto Dark Theme, в настройках это «Тёмная тема
   для веб-контента». Значение `light` инверсию не отключает: браузер читает
   его как «страница светлая, надо помочь», и выбранная сотрудником светлая
   тема остаётся перекрашенной в тёмную. Отступает он только от ключевого
   слова `only`. Тёмной ветке `only` не нужен — подменять там нечего.
   То же решение и в public/lib/theme-paint.js для клиентской части. */
:root:not([data-theme="dark"]) { color-scheme: only light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #00a9ae;
    --on-brand: #0a0d16;
    --brand-soft: #123338;
    --link: #4cc9ce;

    /* Прелоадеры: на тёмном фирменный жёлтый читается сам. */
    --boot-bg: rgba(14, 16, 19, .93);
    --dot-color: #00a9ae;
    --scroll-thumb: rgba(255, 255, 255, .22);
    --scroll-thumb-idle: rgba(255, 255, 255, .09);
    --scroll-thumb-hover: rgba(0, 169, 174, .55);

    /* Чёрный Tele2 на тёмном фоне — плашка, которой не видно. В тёмной теме
       его представляет светлая пара: смысл цвета тот же («чёрно-белый»), а
       плашка видна. Остальным операторам подмена не нужна. */
    --op-tele2: #e9eaec;       --op-tele2-on: #111111;

    --ground: #0e1013;
    --surface: #16191e;
    --surface-2: #232730;
    --rail: #121418;
    --line: #2a2e37;
    --line-soft: #21242b;

    --ink: #f0f2f4;
    --ink-2: #b7bbc0;
    --muted: #949aa3;

    --ok: #3cb178;
    --ok-soft: #12291f;
    --warn: #efac3c;
    --warn-soft: #2c2213;
    --info: #5297e4;
    --info-soft: #14202f;
    /* В тёмной теме синий сам светлее фона, и белый текст на нём тонет. */
    --info-on: #0b1220;
    --crit: #f55b5a;
    --crit-soft: #31171a;

    --shadow: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-pop: 0 12px 28px -12px rgba(0, 0, 0, .6);

    /* На тёмном обводка сот светлая — тёмная не видна вовсе. */
    --grid: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22114%22%20height=%2265.8179%22%20viewBox=%220%200%20114%2065.8179%22%3E%3Cpath%20d=%22M-33.25,8.23Q-38.0,0.0%20-33.25,-8.23L-23.75,-24.68Q-19.0,-32.91%20-9.5,-32.91L9.5,-32.91Q19.0,-32.91%2023.75,-24.68L33.25,-8.23Q38.0,0.0%2033.25,8.23L23.75,24.68Q19.0,32.91%209.5,32.91L-9.5,32.91Q-19.0,32.91%20-23.75,24.68ZM80.75,8.23Q76.0,0.0%2080.75,-8.23L90.25,-24.68Q95.0,-32.91%20104.5,-32.91L123.5,-32.91Q133.0,-32.91%20137.75,-24.68L147.25,-8.23Q152.0,0.0%20147.25,8.23L137.75,24.68Q133.0,32.91%20123.5,32.91L104.5,32.91Q95.0,32.91%2090.25,24.68ZM23.75,41.14Q19.0,32.91%2023.75,24.68L33.25,8.23Q38.0,-0.0%2047.5,-0.0L66.5,-0.0Q76.0,-0.0%2080.75,8.23L90.25,24.68Q95.0,32.91%2090.25,41.14L80.75,57.59Q76.0,65.82%2066.5,65.82L47.5,65.82Q38.0,65.82%2033.25,57.59ZM-33.25,74.05Q-38.0,65.82%20-33.25,57.59L-23.75,41.14Q-19.0,32.91%20-9.5,32.91L9.5,32.91Q19.0,32.91%2023.75,41.14L33.25,57.59Q38.0,65.82%2033.25,74.05L23.75,90.5Q19.0,98.73%209.5,98.73L-9.5,98.73Q-19.0,98.73%20-23.75,90.5ZM80.75,74.05Q76.0,65.82%2080.75,57.59L90.25,41.14Q95.0,32.91%20104.5,32.91L123.5,32.91Q133.0,32.91%20137.75,41.14L147.25,57.59Q152.0,65.82%20147.25,74.05L137.75,90.5Q133.0,98.73%20123.5,98.73L104.5,98.73Q95.0,98.73%2090.25,90.5Z%22%20fill=%22none%22%20stroke=%22rgba(255,255,255,0.065)%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");

    /* На тёмном фоне жёлтый виден сам — свечение мягче. */
    --glow-strength: .10;

    /* Подсветка под курсором — поверх бродящего свечения, поэтому слабее. */
    --glow-hover: .09;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #00a9ae;
  --on-brand: #0a0d16;
  --brand-soft: #123338;
  --link: #4cc9ce;

  /* Прелоадеры: на тёмном фирменный жёлтый читается сам. */
  --boot-bg: rgba(14, 16, 19, .93);
  --dot-color: #00a9ae;
  --scroll-thumb: rgba(255, 255, 255, .22);
  --scroll-thumb-idle: rgba(255, 255, 255, .09);
  --scroll-thumb-hover: rgba(0, 169, 174, .55);

  /* Чёрный Tele2 на тёмном фоне — плашка, которой не видно. В тёмной теме
     его представляет светлая пара: смысл цвета тот же («чёрно-белый»), а
     плашка видна. Остальным операторам подмена не нужна. */
  --op-tele2: #e9eaec;       --op-tele2-on: #111111;

  --ground: #0e1013;
  --surface: #16191e;
  --surface-2: #232730;
  --rail: #121418;
  --line: #2a2e37;
  --line-soft: #21242b;

  --ink: #f0f2f4;
  --ink-2: #b7bbc0;
  --muted: #949aa3;

  --ok: #3cb178;
  --ok-soft: #12291f;
  --warn: #efac3c;
  --warn-soft: #2c2213;
  --info: #5297e4;
  --info-soft: #14202f;
  --info-on: #0b1220;
  --crit: #f55b5a;
  --crit-soft: #31171a;

  --shadow: 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-pop: 0 12px 28px -12px rgba(0, 0, 0, .6);

  /* На тёмном обводка сот светлая — тёмная не видна вовсе. */
  --grid: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22114%22%20height=%2265.8179%22%20viewBox=%220%200%20114%2065.8179%22%3E%3Cpath%20d=%22M-33.25,8.23Q-38.0,0.0%20-33.25,-8.23L-23.75,-24.68Q-19.0,-32.91%20-9.5,-32.91L9.5,-32.91Q19.0,-32.91%2023.75,-24.68L33.25,-8.23Q38.0,0.0%2033.25,8.23L23.75,24.68Q19.0,32.91%209.5,32.91L-9.5,32.91Q-19.0,32.91%20-23.75,24.68ZM80.75,8.23Q76.0,0.0%2080.75,-8.23L90.25,-24.68Q95.0,-32.91%20104.5,-32.91L123.5,-32.91Q133.0,-32.91%20137.75,-24.68L147.25,-8.23Q152.0,0.0%20147.25,8.23L137.75,24.68Q133.0,32.91%20123.5,32.91L104.5,32.91Q95.0,32.91%2090.25,24.68ZM23.75,41.14Q19.0,32.91%2023.75,24.68L33.25,8.23Q38.0,-0.0%2047.5,-0.0L66.5,-0.0Q76.0,-0.0%2080.75,8.23L90.25,24.68Q95.0,32.91%2090.25,41.14L80.75,57.59Q76.0,65.82%2066.5,65.82L47.5,65.82Q38.0,65.82%2033.25,57.59ZM-33.25,74.05Q-38.0,65.82%20-33.25,57.59L-23.75,41.14Q-19.0,32.91%20-9.5,32.91L9.5,32.91Q19.0,32.91%2023.75,41.14L33.25,57.59Q38.0,65.82%2033.25,74.05L23.75,90.5Q19.0,98.73%209.5,98.73L-9.5,98.73Q-19.0,98.73%20-23.75,90.5ZM80.75,74.05Q76.0,65.82%2080.75,57.59L90.25,41.14Q95.0,32.91%20104.5,32.91L123.5,32.91Q133.0,32.91%20137.75,41.14L147.25,57.59Q152.0,65.82%20147.25,74.05L137.75,90.5Q133.0,98.73%20123.5,98.73L104.5,98.73Q95.0,98.73%2090.25,90.5Z%22%20fill=%22none%22%20stroke=%22rgba(255,255,255,0.065)%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");

  /* На тёмном фоне жёлтый виден сам — свечение мягче. */
  --glow-strength: .10;

  /* Подсветка под курсором — поверх бродящего свечения, поэтому слабее. */
  --glow-hover: .09;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Полосы прокрутки — одно оформление на все разделы.

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

   ⚠️ Правила webkit и стандартные свойства не смешиваем: Chrome с 121 при заданных
   `scrollbar-color` / `scrollbar-width` webkit-псевдоэлементы игнорирует вовсе, и таблетка
   с наведением пропала бы. Поэтому стандартные свойства — только там, где webkit-полос нет
   (Firefox).
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-idle);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
  min-height: 36px; min-width: 36px;
  transition: background-color .2s ease;
}
/* Курсор над областью прокрутки — ползунок проступает. Класс `sb-hot` ставит /ui/scroll-hover.js:
   `:hover` контейнера Chrome для полосы не пересчитывает. Над самой полосой работает и он. */
.sb-hot::-webkit-scrollbar-thumb,
:hover::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--scroll-thumb-hover); }

@supports not selector(::-webkit-scrollbar) {
  html, * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb-idle) transparent; }
  .sb-hot, *:hover { scrollbar-color: var(--scroll-thumb-hover) transparent; }
}