/* ===========================================================================
   theme-rules.css — слой совместимости между разметкой и палитрами.

   Зачем
   -----
   Шаблоны написаны «светлыми» утилитами Tailwind (`bg-white`, `text-slate-900`,
   `border-slate-200` …) плюс разрозненными `dark:`-переопределениями. Из-за
   пропущенных переопределений в тёмной теме часть панелей оставалась белой, а
   заголовки — почти чёрными на тёмном фоне. Переписывать ~650 атрибутов class
   ради тем не хотелось, поэтому светлые утилиты **семейства slate** (плюс
   `white`) переадресованы здесь на смысловые переменные темы: `--c-surface`,
   `--c-ink`, `--c-border` и т. д. из theme.css.

   Цветные семейства (indigo, emerald, amber, rose …) правок не требуют: в
   theme.css их шкала сама зависит от режима, поэтому `bg-emerald-50` и
   `text-emerald-700` читаются в любой теме. Исключение — текст на ступенях
   600/700: соответствующие правила сгенерированы в конце theme.css.

   Почему это безопасно
   --------------------
   Каждое правило защищено `:not([class*="dark:…"])`. Если у элемента ЕСТЬ
   явное тёмное переопределение, оно побеждает, и правило его не трогает: где
   разметка высказалась — слушаем разметку, где промолчала — берём значение
   темы. Селекторы специфичнее утилит Tailwind (`[class]` + `:not()` против
   одного класса), поэтому порядок загрузки стилей не важен.

   Чего здесь намеренно НЕТ
   ------------------------
   - `text-white` — всегда белый: он стоит на насыщенных кнопках и подложках.
   - `bg-slate-700/800/900` — элементы, тёмные по замыслу (плавающая панель
     массовых действий, подложки модалок, полосы прокрутки).

   Плавающая панель массовых действий (#bulkBar) — единственная поверхность,
   тёмная в ЛЮБОЙ теме, поэтому «светлые» утилиты внутри неё приходится
   возвращать к исходным значениям: см. блок «Исключения» в конце файла.
   =========================================================================== */

/* ── Поверхности ───────────────────────────────────────────────────────── */
.bg-white:not([class*="dark:bg-"]) {
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity, 1));
}
.focus\:bg-white:focus:not([class*="dark:focus:bg-"]) {
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity, 1));
}
.bg-slate-50:not([class*="dark:bg-"]) {
  background-color: rgb(var(--c-canvas) / var(--tw-bg-opacity, 1));
}
.bg-slate-100:not([class*="dark:bg-"]) {
  background-color: rgb(var(--c-recessed) / var(--tw-bg-opacity, 1));
}
.bg-slate-200:not([class*="dark:bg-"]) {
  background-color: rgb(var(--c-recessed-strong) / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover:not([class*="dark:hover:bg-"]),
.hover\:bg-slate-100:hover:not([class*="dark:hover:bg-"]) {
  background-color: rgb(var(--c-hover) / var(--tw-bg-opacity, 1));
}

/* Полупрозрачные подложки (шапки таблиц, выходные в календаре): прозрачность
   вшита в саму утилиту, поэтому альфу повторяем здесь. */
.bg-slate-50\/40:not([class*="dark:bg-"]) { background-color: rgb(var(--c-canvas) / 0.40); }
.bg-slate-50\/50:not([class*="dark:bg-"]) { background-color: rgb(var(--c-canvas) / 0.50); }
.bg-slate-50\/60:not([class*="dark:bg-"]) { background-color: rgb(var(--c-canvas) / 0.60); }
.bg-slate-50\/70:not([class*="dark:bg-"]) { background-color: rgb(var(--c-canvas) / 0.70); }

/* ── Границы и разделители ─────────────────────────────────────────────── */
.border-slate-50:not([class*="dark:border-"]) {
  border-color: rgb(var(--c-border-faint) / var(--tw-border-opacity, 1));
}
.border-slate-100:not([class*="dark:border-"]) {
  border-color: rgb(var(--c-border-subtle) / var(--tw-border-opacity, 1));
}
.border-slate-200:not([class*="dark:border-"]) {
  border-color: rgb(var(--c-border) / var(--tw-border-opacity, 1));
}
.border-slate-300:not([class*="dark:border-"]) {
  border-color: rgb(var(--c-border-strong) / var(--tw-border-opacity, 1));
}
.divide-slate-100:not([class*="dark:divide-"]) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--c-border-subtle) / var(--tw-border-opacity, 1));
}

/* ── Текст ─────────────────────────────────────────────────────────────── */
.text-slate-900:not([class*="dark:text-"]) { color: rgb(var(--c-ink) / var(--tw-text-opacity, 1)); }
.text-slate-800:not([class*="dark:text-"]) { color: rgb(var(--c-ink-strong) / var(--tw-text-opacity, 1)); }
.text-slate-700:not([class*="dark:text-"]) { color: rgb(var(--c-ink-soft) / var(--tw-text-opacity, 1)); }
.text-slate-600:not([class*="dark:text-"]) { color: rgb(var(--c-ink-muted) / var(--tw-text-opacity, 1)); }
.text-slate-500:not([class*="dark:text-"]) { color: rgb(var(--c-ink-faint) / var(--tw-text-opacity, 1)); }
/* Две «почти невидимые» ступени. В шаблонах это подписи-подсказки, счётчики,
   диапазоны и «нет данных» — 187 и 18 мест. На стоковой палитре они давали
   2.6:1 и 1.4:1 на белом, то есть текст пропадал; генератор подбирает для них
   максимально светлый (в тёмных темах — максимально тёмный) оттенок, который
   всё ещё читается, поэтому иерархия сохраняется, а текст виден. */
.text-slate-400:not([class*="dark:text-"]) { color: rgb(var(--c-ink-subtle) / var(--tw-text-opacity, 1)); }
.text-slate-300:not([class*="dark:text-"]) { color: rgb(var(--c-ink-fainter) / var(--tw-text-opacity, 1)); }

/* В светлой теме правило выше не срабатывает на элементах с `dark:`-парой
   (`text-slate-500 dark:text-slate-400` — самый частый шаблон в шаблонах), а
   «сырая» ступень рампы у мягких палитр слишком светлая: в «Сепии» 500-я
   ступень давала 2.9:1. В светлой теме `dark:`-вариант всё равно неактивен,
   поэтому здесь его можно не учитывать и брать значение темы. Префикс
   `html:not(.dark)` добавляет элемент к специфичности — порядок загрузки
   стилей по-прежнему не важен. */
html:not(.dark) .text-slate-900 { color: rgb(var(--c-ink) / var(--tw-text-opacity, 1)); }
html:not(.dark) .text-slate-800 { color: rgb(var(--c-ink-strong) / var(--tw-text-opacity, 1)); }
html:not(.dark) .text-slate-700 { color: rgb(var(--c-ink-soft) / var(--tw-text-opacity, 1)); }
html:not(.dark) .text-slate-600 { color: rgb(var(--c-ink-muted) / var(--tw-text-opacity, 1)); }
html:not(.dark) .text-slate-500 { color: rgb(var(--c-ink-faint) / var(--tw-text-opacity, 1)); }
html:not(.dark) .text-slate-400 { color: rgb(var(--c-ink-subtle) / var(--tw-text-opacity, 1)); }
html:not(.dark) .text-slate-300 { color: rgb(var(--c-ink-fainter) / var(--tw-text-opacity, 1)); }
.hover\:text-slate-900:hover:not([class*="dark:hover:text-"]),
.hover\:text-slate-800:hover:not([class*="dark:hover:text-"]) {
  color: rgb(var(--c-ink) / var(--tw-text-opacity, 1));
}
.hover\:text-slate-700:hover:not([class*="dark:hover:text-"]) {
  color: rgb(var(--c-ink-soft) / var(--tw-text-opacity, 1));
}
.hover\:text-slate-600:hover:not([class*="dark:hover:text-"]) {
  color: rgb(var(--c-ink-muted) / var(--tw-text-opacity, 1));
}
.hover\:text-slate-400:hover:not([class*="dark:hover:text-"]) {
  color: rgb(var(--c-ink-subtle) / var(--tw-text-opacity, 1));
}

/* ── Исключения: поверхности, тёмные в любой теме ──────────────────────── */
/* #bulkBar — плавающая панель массовых действий (`bg-slate-900 text-white`).
   Она не следует за темой, поэтому `text-slate-400` внутри неё должен
   остаться прежним светлым серым: переадресация на --c-ink-subtle сделала бы
   его тёмным на тёмном. Селектор с id специфичнее правил выше, так что
   порядок объявления роли не играет. */
#bulkBar .text-slate-400,
#bulkBar.text-slate-400 { color: rgb(var(--c-slate-400) / var(--tw-text-opacity, 1)); }
#bulkBar .text-slate-300,
#bulkBar.text-slate-300 { color: rgb(var(--c-slate-300) / var(--tw-text-opacity, 1)); }

/* ── Мелкая полировка ──────────────────────────────────────────────────── */
::selection {
  background-color: rgb(var(--c-slate-300));
  color: rgb(var(--c-slate-900));
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--c-border-strong));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-ink-faint)); }
* { scrollbar-color: rgb(var(--c-border-strong)) transparent; }

/* Смена темы: цвета «дотекают» за 250 мс, но только пока идёт переключение —
   класс снимает таймер в theme.js, чтобы не тормозить интерфейс постоянно. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, fill 0.25s ease, stroke 0.25s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after { transition: none !important; }
}