/* ============================================================================
   Тёмная тема витрины (17.09.2026) — ручная часть.
   Включается атрибутом html[data-theme="dark"]: его до загрузки CSS ставит
   инлайн-скрипт в header.tpl по localStorage('mid_theme'), переключает
   .theme-toggle в шапке (common.js). Основная масса правил — в dark-auto.css:
   его генерирует tools/build_dark_theme.py из CSS темы и <style> шаблонов
   (те же селекторы, пересчитанные цвета), руками он НЕ правится; тёмные
   версии лендингов описаний товаров — там же, в stylesheet/dark/. Здесь — то,
   что генератор не покрывает: переключатель, логотип, спрайт, инлайн-стили
   из БД, палитра Bootstrap, а также точечные доработки после просмотра
   страниц. Файл подключён после dark-auto.css и перекрывает его.
   ============================================================================ */

/* ---- Палитра ---- */
/* `only light` — ещё и отказ от Auto Dark Theme Chrome на Android: без него Chrome
   сам перекрашивает светлую страницу (так заказчик и снимал «тёмные» скриншоты),
   теперь тёмная тема — только наша, по системной настройке или переключателю */
html {
    color-scheme: only light;
}
html[data-theme="dark"] {
    color-scheme: dark; /* нативные контролы, скроллбары, автозаполнение — тёмные */
    --dt-bg: #121416;         /* фон страницы (в него же генератор красит белые подложки) */
    --dt-surface: #1a1d21;    /* карточки, панели, попапы */
    --dt-surface-2: #22262b;  /* поля ввода, второстепенные плашки */
    --dt-border: #2e3339;
    --dt-text: #e4e6e7;
    --dt-text-muted: #9aa3ab;
    --dt-accent: #2dc5ff;
    /* Bootstrap 5.3 (подвал, формы, модалки) переключается своим data-bs-theme="dark",
       он ставится вместе с data-theme; его палитру сводим к нашей */
    --bs-body-bg: var(--dt-bg);
    --bs-body-bg-rgb: 18, 20, 22;
    --bs-body-color: var(--dt-text);
    --bs-body-color-rgb: 228, 230, 231;
    --bs-secondary-color: var(--dt-text-muted);
    --bs-tertiary-color: #7d868e;
    --bs-secondary-bg: var(--dt-surface-2);
    --bs-tertiary-bg: var(--dt-surface);
    --bs-border-color: var(--dt-border);
    --bs-link-color: #85c1dc;
    --bs-link-hover-color: #a5d5ea;
    --bs-link-color-rgb: 133, 193, 220;
    --bs-link-hover-color-rgb: 165, 213, 234;
}
html[data-theme="dark"] body {
    background: var(--dt-bg);
    color: var(--dt-text);
}

/* ---- Переключатель темы (виден в обеих темах; стоит в .header__region рядом с
        валютой и языком, на телефоне уезжает с ними в шторку) ---- */
.theme-toggle {
    position: relative;
    flex: none;
    align-self: center;
    width: 46px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 1px solid #00364a;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s, border-color .2s;
}
.theme-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00364a;
    color: #fff;
    transition: transform .2s, background-color .2s;
}
.theme-toggle__icon {
    display: block;
    width: 12px;
    height: 12px;
}
.theme-toggle__icon--moon {
    display: none;
}
.theme-toggle:focus-visible {
    outline: 2px solid #2dc5ff;
    outline-offset: 2px;
}
html[data-theme="dark"] .theme-toggle {
    border-color: var(--dt-accent);
    background: var(--dt-accent);
}
html[data-theme="dark"] .theme-toggle__knob {
    transform: translateX(22px);
    background: #0f1a20;
}
html[data-theme="dark"] .theme-toggle__icon--sun {
    display: none;
}
html[data-theme="dark"] .theme-toggle__icon--moon {
    display: block;
}

/* ---- Шапка и подвал ---- */
/* Логотип тёмно-синий (#00364a) и на тёмном не виден — рядом в разметке светлая
   версия image/logo-dark.svg, показываем её */
.logo-dark {
    display: none;
}
html[data-theme="dark"] .logo-light {
    display: none;
}
html[data-theme="dark"] .logo-dark {
    display: inline-block;
}
/* Иконки входа/сравнения/избранного/корзины: у символов спрайта нет fill — чёрные по
   умолчанию; берём цвет ссылки (в тёмной теме он светлый) */
html[data-theme="dark"] .nav-icons svg {
    fill: currentColor;
}

/* Прелоадер страницы: image/preloader.gif — непрозрачный GIF с белой подложкой, на тёмном
   фоне висел светлым квадратом. Инвертируем: белое → чёрное (под него и фон), голубой
   логотип после поворота тона — снова голубой. Только div: в варианте с видео тот же
   класс носит <video>, его трогать нельзя */
html[data-theme="dark"] .preloader {
    background: #000;
}
html[data-theme="dark"] div.preloader__image {
    filter: invert(1) hue-rotate(180deg);
}

/* ---- Островки на брендовом фоне ----
   Панель подписки (#subscribe, категории/акции) остаётся ярко-голубой, а генератор
   затемнил её содержимое: белую строку формы и зелёную плашку «Вы уже подписаны» —
   тёмное на голубом. Внутри панели оставляем светлый вид, как в светлой теме */
html[data-theme="dark"] #subscribe .form {
    background-color: #fff;
}
html[data-theme="dark"] #subscribe .form div {
    color: grey;
}
html[data-theme="dark"] #subscribe .form input {
    background: #F8F8F8;
    border-color: rgba(151, 151, 151, 0.35);
    color: #4A4A4A;
}
html[data-theme="dark"] #subscribe button[disabled="disabled"] {
    background: lightgray;
}
html[data-theme="dark"] #subscribe .success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
html[data-theme="dark"] #subscribe .notification .alert-success {
    background-color: #BCE6AF;
    border-color: #d6e9c6;
    color: #295800;
}
html[data-theme="dark"] #subscribe .notification .figure {
    border-color: #fff;
    background-color: #fff;
}
html[data-theme="dark"] #subscribe .notification .close {
    color: inherit;
}

/* ---- Контент из БД (описания товаров, статьи): инлайн-стили визуального редактора ----
   Самые частые значения по product_description: чёрный/тёмно-серый текст,
   тёмно-зелёный, светлые подложки. Синие ссылки (#1ea3d2, #3594bd) на тёмном
   читаются и так, красные акценты оставляем. */
html[data-theme="dark"] [style*="color: rgb(0, 0, 0)"],
html[data-theme="dark"] [style*="color:rgb(0, 0, 0)"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: rgb(51, 51, 51)"],
html[data-theme="dark"] [style*="color: rgb(47, 47, 47)"],
html[data-theme="dark"] [style*="color: rgb(34, 34, 34)"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color: #222"] {
    color: inherit !important;
}
html[data-theme="dark"] [style*="color: rgb(0, 128, 0)"],
html[data-theme="dark"] [style*="color:#008000"],
html[data-theme="dark"] [style*="color: #008000"],
html[data-theme="dark"] [style*="color:#006600"],
html[data-theme="dark"] [style*="color: green"],
html[data-theme="dark"] [style*="color:green"] {
    color: #6fd67c !important;
}
html[data-theme="dark"] [style*="background-color: #e1f4fd"],
html[data-theme="dark"] [style*="background-color: rgb(240, 248, 255)"] {
    background-color: #16303b !important;
}
html[data-theme="dark"] [style*="background-color: rgb(204, 204, 204)"] {
    background-color: var(--dt-surface-2) !important;
}
html[data-theme="dark"] [style*="background-color: rgb(204, 255, 204)"] {
    background-color: #1c3a22 !important;
}