/* === Тема приложения ==================================================
   Единственное место, где живут цвета обеих тем. Подключается ПОСЛЕ
   base.css на каждой странице и перекрывает его токены.

   Три состояния, именно в таком порядке приоритета:
     1) человек выбрал вручную  -> html[data-theme="light" | "dark"]
     2) человек не выбирал      -> системная тема (prefers-color-scheme)
     3) браузер без поддержки   -> тёмная (значения из base.css)

   Значение каждого цвета написано ОДИН раз — в палитре ниже (--l-* для
   светлой, --d-* для тёмной). Дальше идут только присваивания вида
   `--bg: var(--l-bg)`. Так правка цвета делается в одном месте, а не в
   трёх блоках, где про третий обязательно забудут.

   Почему не light-dark(): значения --chart-* читает JS через
   getComputedStyle и отдаёт в Chart.js как строку цвета. Из light-dark()
   он получил бы литерал «light-dark(#a, #b)», и графики бы не нарисовались.
   var() же подставляется на этапе вычисления — JS видит готовый цвет. */

:root {
    /* ── Палитра: светлая ── */
    --l-bg: #F3F5F7;
    --l-bg-card: #FFFFFF;
    --l-bg-card-hover: #F7F9FA;
    --l-bg-input: #EEF1F4;
    --l-card-raised: #F7F9FA;
    --l-text: #1C252B;
    --l-text-secondary: #5C6672;
    --l-text-muted: #6C7882;          /* 4.5:1 к белой карточке */
    --l-border: rgba(15, 30, 40, 0.10);
    --l-border-hover: rgba(15, 30, 40, 0.20);
    --l-brand-glow: rgba(2, 77, 196, 0.10);
    --l-shadow: 0 4px 24px rgba(15, 30, 40, 0.08);
    --l-shadow-lg: 0 8px 40px rgba(15, 30, 40, 0.12);

    --l-danger-bg: rgba(192, 91, 76, 0.10);
    --l-danger-border: rgba(192, 91, 76, 0.32);
    --l-soft-fill: rgba(92, 102, 114, 0.12);

    /* Шкала «в срок → забыли»: цвет здесь несёт смысл, а не украшает,
       поэтому он общий для всех тулов и живёт рядом с остальными токенами. */
    --l-sev-ok: #1F8A5B;
    --l-sev-warn: #A8861F;
    --l-sev-late: #B86C1F;
    --l-sev-bad: #A8452E;
    --l-sev-worst: #8C241C;

    /* Группы себестоимости РРЦ. Хранится ТРОЙКА каналов, а не готовый цвет:
       в rrc.css один и тот же оттенок используется с десятком прозрачностей
       (0.08 для фона строки, 0.5 для рамки), и токен на каждую был бы адом. */
    --l-grp-shop-rgb: 191 138 0;
    --l-grp-oh-rgb: 194 84 122;
    --l-grp-vat-rgb: 46 138 84;
    --l-grp-comm-rgb: 43 108 176;
    --l-grp-profit-rgb: 191 106 26;
    --l-grp-disc-rgb: 138 79 168;

    /* Подложки и статусы теми же тройками */
    --l-surface-rgb: 15 30 40;
    --l-green-rgb: 31 138 91;
    --l-red-rgb: 192 63 48;
    --l-warn-rgb: 176 128 20;
    --l-blue-rgb: 43 108 176;
    --l-purple-rgb: 125 60 152;

    --l-chart-primary: #2E7FA0;
    --l-chart-green:   #0A8DA1;
    --l-chart-purple:  #C1762B;
    --l-chart-orange:  #A97922;
    --l-chart-blue:    #5F6F8F;
    --l-chart-red:     #C05B4C;
    --l-chart-gray:    #8A96A0;
    --l-chart-extra1:  #2F9E6E;
    --l-chart-extra2:  #c96a15;
    --l-chart-extra3:  #2471a3;
    --l-chart-extra4:  #7d3c98;
    --l-chart-ink:     #5C6672;

    /* Текстовые варианты «хорошо/плохо». Палитра --chart-* нарисована под
       ЛИНИИ графиков: там цвет лежит полосой в 2px и контраст не критичен.
       Теми же токенами красится текст бейджей, чипов и ячеек таблицы, а для
       текста нужно 4.5:1 — на белой карточке зелёный давал 3.37, красный 4.34.
       Затемнены до нормы с запасом на заливку чипа: она подмешивает 7% цвета
       в фон, и контраст на чипе выходит ниже, чем на чистой карточке
       карточки — она с градиентом и чуть темнее белого. */
    --l-ink-ok:        #0C7548;
    --l-ink-bad:       #AE4A3C;
    --l-chart-grid:    rgba(15, 30, 40, 0.08);

    /* ── Палитра: тёмная ── */
    --d-bg: #0f1117;
    --d-bg-card: #1a1d27;
    --d-bg-card-hover: #1f2230;
    --d-bg-input: #252836;
    --d-card-raised: #1B242B;
    --d-text: #e8eaed;
    --d-text-secondary: #9aa0b0;
    --d-text-muted: #7F8497;          /* 4.5:1 к тёмной карточке */
    --d-border: rgba(255, 255, 255, 0.06);
    --d-border-hover: rgba(255, 255, 255, 0.12);
    --d-brand-glow: rgba(2, 77, 196, 0.15);
    --d-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --d-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);

    --d-danger-bg: rgba(231, 76, 60, 0.10);
    --d-danger-border: rgba(231, 76, 60, 0.30);
    --d-soft-fill: rgba(127, 132, 151, 0.16);

    --d-sev-ok: #2E9E6B;
    --d-sev-warn: #C9A227;
    --d-sev-late: #D9822B;
    --d-sev-bad: #C4553B;
    --d-sev-worst: #A32F26;

    --d-grp-shop-rgb: 255 224 130;
    --d-grp-oh-rgb: 248 187 208;
    --d-grp-vat-rgb: 165 214 167;
    --d-grp-comm-rgb: 144 202 249;
    --d-grp-profit-rgb: 255 204 128;
    --d-grp-disc-rgb: 206 147 216;

    --d-surface-rgb: 255 255 255;
    --d-green-rgb: 46 204 113;
    --d-red-rgb: 231 76 60;
    --d-warn-rgb: 255 193 7;
    --d-blue-rgb: 52 152 219;
    --d-purple-rgb: 155 89 182;

    --d-chart-primary: #5EA9C4;
    --d-chart-green:   #46BCCA;
    --d-chart-purple:  #E89A48;
    --d-chart-orange:  #C1902F;
    --d-chart-blue:    #7E8CA8;
    --d-chart-red:     #DC7361;
    --d-chart-gray:    #61707B;
    --d-chart-extra1:  #57B98A;

    /* В тёмной теме контраст и так проходит (5.6 и 4.9), берём как есть */
    --d-ink-ok:        #57B98A;
    --d-ink-bad:       #DC7361;
    --d-chart-extra2:  #e67e22;
    --d-chart-extra3:  #2980b9;
    --d-chart-extra4:  #8e44ad;
    --d-chart-ink:     #94A4AF;
    --d-chart-grid:    rgba(255, 255, 255, 0.06);
}

/* Белый на брендовой заливке — одинаков в обеих темах, поэтому задаётся
   один раз здесь, а не тремя случайными #fff по тулам. */
:root {
    /* Бренд и затемнение одинаковы в обеих темах */
    --brand-rgb: 6 130 142;
    --overlay-rgb: 0 0 0;
    --on-brand: #fff;
    /* Заголовки «ФАКТ» и «ПРОГНОЗ» в сводной таблице РРЦ: плотная заливка с
       белым текстом, одинаково читается на обеих темах — поэтому один цвет. */
    --hdr-fact: #2F5496;
    --hdr-forecast: #548235;
    --on-brand-dim: rgba(255, 255, 255, 0.85);
}

/* Ключи --chart-* исторические (green/purple/…), но означают РОЛИ:
   green = Отгружено/продажи, purple = Оплачено, orange = КП,
   blue = Счета, primary = сделки/бренд, red = отказы. */

/* ── Тёмная: и по умолчанию, и по явному выбору ── */
:root,
html[data-theme="dark"] {
    --bg: var(--d-bg);
    --bg-card: var(--d-bg-card);
    --bg-card-hover: var(--d-bg-card-hover);
    --bg-input: var(--d-bg-input);
    --card-raised: var(--d-card-raised);
    --text: var(--d-text);
    --text-secondary: var(--d-text-secondary);
    --text-muted: var(--d-text-muted);
    --border: var(--d-border);
    --border-hover: var(--d-border-hover);
    --brand-glow: var(--d-brand-glow);
    --shadow: var(--d-shadow);
    --shadow-lg: var(--d-shadow-lg);

    --danger-bg: var(--d-danger-bg);
    --danger-border: var(--d-danger-border);
    --soft-fill: var(--d-soft-fill);
    --sev-ok: var(--d-sev-ok);
    --sev-warn: var(--d-sev-warn);
    --sev-late: var(--d-sev-late);
    --sev-bad: var(--d-sev-bad);
    --sev-worst: var(--d-sev-worst);

    --grp-shop-rgb: var(--d-grp-shop-rgb);
    --grp-oh-rgb: var(--d-grp-oh-rgb);
    --grp-vat-rgb: var(--d-grp-vat-rgb);
    --grp-comm-rgb: var(--d-grp-comm-rgb);
    --grp-profit-rgb: var(--d-grp-profit-rgb);
    --grp-disc-rgb: var(--d-grp-disc-rgb);
    --surface-rgb: var(--d-surface-rgb);
    --green-rgb: var(--d-green-rgb);
    --red-rgb: var(--d-red-rgb);
    --warn-rgb: var(--d-warn-rgb);
    --blue-rgb: var(--d-blue-rgb);
    --purple-rgb: var(--d-purple-rgb);

    --chart-primary: var(--d-chart-primary);
    --chart-green:   var(--d-chart-green);
    --chart-purple:  var(--d-chart-purple);
    --chart-orange:  var(--d-chart-orange);
    --chart-blue:    var(--d-chart-blue);
    --chart-red:     var(--d-chart-red);
    --chart-gray:    var(--d-chart-gray);
    --chart-extra1:  var(--d-chart-extra1);
    --ink-ok:        var(--d-ink-ok);
    --ink-bad:       var(--d-ink-bad);
    --chart-extra2:  var(--d-chart-extra2);
    --chart-extra3:  var(--d-chart-extra3);
    --chart-extra4:  var(--d-chart-extra4);
    --chart-ink:     var(--d-chart-ink);
    --chart-grid:    var(--d-chart-grid);

    color-scheme: dark;
}

/* ── Светлая по настройке системы — пока человек не выбрал сам ── */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: var(--l-bg);
        --bg-card: var(--l-bg-card);
        --bg-card-hover: var(--l-bg-card-hover);
        --bg-input: var(--l-bg-input);
        --card-raised: var(--l-card-raised);
        --text: var(--l-text);
        --text-secondary: var(--l-text-secondary);
        --text-muted: var(--l-text-muted);
        --border: var(--l-border);
        --border-hover: var(--l-border-hover);
        --brand-glow: var(--l-brand-glow);
        --shadow: var(--l-shadow);
        --shadow-lg: var(--l-shadow-lg);

        --danger-bg: var(--l-danger-bg);
        --danger-border: var(--l-danger-border);
        --soft-fill: var(--l-soft-fill);
        --sev-ok: var(--l-sev-ok);
        --sev-warn: var(--l-sev-warn);
        --sev-late: var(--l-sev-late);
        --sev-bad: var(--l-sev-bad);
        --sev-worst: var(--l-sev-worst);

        --danger-bg: var(--l-danger-bg);
    --danger-border: var(--l-danger-border);
    --soft-fill: var(--l-soft-fill);
    --sev-ok: var(--l-sev-ok);
    --sev-warn: var(--l-sev-warn);
    --sev-late: var(--l-sev-late);
    --sev-bad: var(--l-sev-bad);
    --sev-worst: var(--l-sev-worst);

    --grp-shop-rgb: var(--l-grp-shop-rgb);
    --grp-oh-rgb: var(--l-grp-oh-rgb);
    --grp-vat-rgb: var(--l-grp-vat-rgb);
    --grp-comm-rgb: var(--l-grp-comm-rgb);
    --grp-profit-rgb: var(--l-grp-profit-rgb);
    --grp-disc-rgb: var(--l-grp-disc-rgb);
    --surface-rgb: var(--l-surface-rgb);
    --green-rgb: var(--l-green-rgb);
    --red-rgb: var(--l-red-rgb);
    --warn-rgb: var(--l-warn-rgb);
    --blue-rgb: var(--l-blue-rgb);
    --purple-rgb: var(--l-purple-rgb);

    --chart-primary: var(--l-chart-primary);
        --chart-green:   var(--l-chart-green);
        --chart-purple:  var(--l-chart-purple);
        --chart-orange:  var(--l-chart-orange);
        --chart-blue:    var(--l-chart-blue);
        --chart-red:     var(--l-chart-red);
        --chart-gray:    var(--l-chart-gray);
        --chart-extra1:  var(--l-chart-extra1);
        --ink-ok:        var(--l-ink-ok);
        --ink-bad:       var(--l-ink-bad);
        --chart-extra2:  var(--l-chart-extra2);
        --chart-extra3:  var(--l-chart-extra3);
        --chart-extra4:  var(--l-chart-extra4);
        --chart-ink:     var(--l-chart-ink);
        --chart-grid:    var(--l-chart-grid);

        color-scheme: light;
    }
}

/* ── Светлая по явному выбору: побеждает системную тёмную ── */
html[data-theme="light"] {
    --bg: var(--l-bg);
    --bg-card: var(--l-bg-card);
    --bg-card-hover: var(--l-bg-card-hover);
    --bg-input: var(--l-bg-input);
    --card-raised: var(--l-card-raised);
    --text: var(--l-text);
    --text-secondary: var(--l-text-secondary);
    --text-muted: var(--l-text-muted);
    --border: var(--l-border);
    --border-hover: var(--l-border-hover);
    --brand-glow: var(--l-brand-glow);
    --shadow: var(--l-shadow);
    --shadow-lg: var(--l-shadow-lg);

    --danger-bg: var(--l-danger-bg);
    --danger-border: var(--l-danger-border);
    --soft-fill: var(--l-soft-fill);
    --sev-ok: var(--l-sev-ok);
    --sev-warn: var(--l-sev-warn);
    --sev-late: var(--l-sev-late);
    --sev-bad: var(--l-sev-bad);
    --sev-worst: var(--l-sev-worst);
    --grp-shop-rgb: var(--l-grp-shop-rgb);
    --grp-oh-rgb: var(--l-grp-oh-rgb);
    --grp-vat-rgb: var(--l-grp-vat-rgb);
    --grp-comm-rgb: var(--l-grp-comm-rgb);
    --grp-profit-rgb: var(--l-grp-profit-rgb);
    --grp-disc-rgb: var(--l-grp-disc-rgb);
    --surface-rgb: var(--l-surface-rgb);
    --green-rgb: var(--l-green-rgb);
    --red-rgb: var(--l-red-rgb);
    --warn-rgb: var(--l-warn-rgb);
    --blue-rgb: var(--l-blue-rgb);
    --purple-rgb: var(--l-purple-rgb);

    --chart-primary: var(--l-chart-primary);
    --chart-green:   var(--l-chart-green);
    --chart-purple:  var(--l-chart-purple);
    --chart-orange:  var(--l-chart-orange);
    --chart-blue:    var(--l-chart-blue);
    --chart-red:     var(--l-chart-red);
    --chart-gray:    var(--l-chart-gray);
    --chart-extra1:  var(--l-chart-extra1);
    --ink-ok:        var(--l-ink-ok);
    --ink-bad:       var(--l-ink-bad);
    --chart-extra2:  var(--l-chart-extra2);
    --chart-extra3:  var(--l-chart-extra3);
    --chart-extra4:  var(--l-chart-extra4);
    --chart-ink:     var(--l-chart-ink);
    --chart-grid:    var(--l-chart-grid);

    color-scheme: light;
}

/* ── Переключатель ──────────────────────────────────────────────────────
   Один вид кнопки во всех тулах: у каждого своя шапка, но эта кнопка
   должна выглядеть и стоять одинаково, иначе «единый дизайн» опять
   разъедется. */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-xs);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition),
                background var(--transition);
}

.theme-toggle:hover {
    color: var(--text);
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}