/**
 * Палитра поверхностей сайта - единственный источник цвета для собственных
 * стилей страниц.
 *
 * ЗАЧЕМ. Bootstrap 5.3 перекрашивает свои компоненты сам по атрибуту
 * data-bs-theme, но не знает про цвета, которые страницы задали руками
 * (`background: #fff` в своём <style>, инлайновый `style=`, цвет, склеенный
 * в JS). Именно они и оставались белыми пятнами в тёмной теме.
 *
 * КАК ПОЛЬЗОВАТЬСЯ. В стилях страниц вместо литерала пишем токен:
 *   background: #fff      ->  background: var(--pb-surface)
 *   background: #f8f9fa   ->  background: var(--pb-surface-2)
 *   color:      #6c757d   ->  color:      var(--pb-muted)
 * Новые цвета руками не заводим: если нужного оттенка нет - добавляем токен
 * СЮДА (сразу с парой light/dark), а не в конкретную страницу.
 *
 * ПОЧЕМУ СВЕТЛАЯ ТЕМА НЕ ЕДЕТ. Значение каждого токена в светлой теме - это
 * ровно тот литерал, который он заменил (см. комментарий у строки). Там, где
 * литерал совпадает с токеном Bootstrap байт-в-байт, ссылаемся прямо на него,
 * чтобы не плодить второй источник правды.
 */

:root, [data-bs-theme="light"] {
    /* ── поверхности ─────────────────────────────────────────────────
       Порядок "карточка -> подложка внутри неё -> ещё глубже". Направление
       сдвига в тёмной теме зависит от роли: то, что ПРИПОДНЯТО над фоном
       (шапка, hover), светлеет; то, что УТОПЛЕНО (вложенная строка
       раскрытия, --pb-surface-sub), наоборот темнеет. */
    --pb-surface:        var(--bs-body-bg);      /* #fff    - карточка, поповер, тело таблицы */
    --pb-surface-2:      var(--bs-tertiary-bg);  /* #f8f9fa - шапка таблицы, подложка блока, hover строки */
    --pb-surface-3:      var(--bs-secondary-bg); /* #e9ecef - пилюли, hover глубже, disabled-инпут */
    --pb-surface-sub:    #fafbfc;                /* вложенная строка раскрытия: чуть ГЛУШЕ карточки */
    --pb-surface-mute:   #f1f3f5;                /* совсем бледная подложка/разделитель */
    --pb-surface-hover:  #eef1f4;                /* hover по сортируемой шапке */

    /* ── мягкие цветные подсветки ────────────────────────────────────
       В тёмной теме это не "светлый цвет потемнее", а тёмный оттенок того
       же тона: осветлённая заливка на тёмном фоне слепит и убивает текст. */
    --pb-accent-soft:    #fff3e6;  /* оранжевая подсветка (итоги, выбранный пункт) */
    --pb-accent-soft-hi: #ffe8cc;  /* она же под курсором */
    --pb-accent-soft-2:  #ffe6cc;  /* второй оранжевый оттенок */
    --pb-accent-soft-3:  #fde2c4;  /* третий, самый насыщенный */
    --pb-accent-soft-4:  #fff8e6;  /* самый бледный оранжевый */
    --pb-warn-soft:      #fff3cd;  /* жёлтая плашка предупреждения */
    --pb-warn-text:      #856404;  /* текст на ней */
    --pb-ok-soft:        #e8f5ec;  /* зелёная отметка "подходит" */
    --pb-ok-soft-2:      #d1e7dd;  /* зелёная плашка Bootstrap-успеха */
    --pb-ok-soft-3:      #f0f9f4;  /* бледно-зелёная строка "в плюсе" */
    --pb-ok-soft-4:      #e8f5e9;  /* ещё один бледно-зелёный */
    --pb-bad-soft:       #fdf4f4;  /* бледно-красная строка "в минусе" */
    --pb-bad-soft-2:     #fce4ec;  /* розовая строка убытка */
    --pb-bad-soft-3:     #fff5f5;  /* строка "предмет не найден" */
    --pb-bad-soft-4:     #f8d7da;  /* плашка убытка в бэктесте */
    --pb-info-soft:      #cff4fc;  /* голубая плашка "нейтрально" */
    --pb-violet-soft:    #f0ecf7;  /* фиолетовая кнопка раскрытия */

    /* ── текст ───────────────────────────────────────────────────────
       Приглушённый текст в тёмной теме нужно ОСВЕТЛЯТЬ: #6c757d на тёмном
       фоне даёт контраст около 3:1 и перестаёт читаться. */
    --pb-text-soft:      #495057;  /* основной "неяркий" текст */
    --pb-muted:          #6c757d;  /* подписи, hint'ы, шапки таблиц */

    /* ── линии ───────────────────────────────────────────────────────*/
    --pb-line:           var(--bs-border-color); /* #dee2e6 - рамка карточки, низ шапки */
    --pb-line-input:     #ced4da;                /* рамка поля ввода, пунктир */
    --pb-line-soft:      #f1f3f5;                /* разделитель строк таблицы */
    --pb-line-faint:     #eee;                   /* он же, ещё бледнее */
    --pb-line-mid:       #adb5bd;                /* разделитель строк потемнее */
    --pb-line-strong:    #495057;                /* жирная линия итогов */
    --pb-violet-line:    #c9bee0;                /* рамка фиолетовой кнопки */
    --pb-accent-line:    #ffd9b3;                /* рамка оранжевой плашки */

    /* ── акцентные цвета текста ──────────────────────────────────────
       Брендовые оттенки подобраны под БЕЛЫЙ фон и на тёмном дают контраст
       около 2:1 - заголовок или ссылка просто пропадают. В тёмной теме
       берём осветлённый вариант того же тона. */
    --pb-orange:         #c44115;  /* Torchlight, основной акцент */
    --pb-violet:         #3b2a60;  /* Trader/NPC, тёмно-фиолетовый */
    --pb-crimson:        #8b0000;  /* тёмно-красный заголовок */
    --pb-purple:         #6f42c1;  /* заголовок секции фласок */
    --pb-brown:          #8b4513;  /* текст на оранжевой плашке */
    --pb-amber:          #af6025;  /* янтарный */
    --pb-amber-2:        #997404;  /* янтарный тусклее */
    --pb-success:        #198754;
    --pb-success-2:      #0f5132;  /* текст на зелёной плашке */
    --pb-success-3:      #0a3622;  /* он же темнее */
    --pb-danger:         #dc3545;
    --pb-danger-2:       #b02a37;
    --pb-danger-3:       #58151c;  /* текст на красной плашке */
    --pb-link:           #0d6efd;
    --pb-link-2:         #0a58ca;
    --pb-text:           var(--bs-body-color); /* #212529 - основной текст */
    --pb-neutral:        #495057;  /* заголовок секции нейтрального типа */
    --pb-neutral-2:      #666;     /* запасной цвет для неизвестного типа */
    --pb-select-bg:      #dee2e6;  /* фон выбранной строки таблицы */

    /* ── рамки и подложки цветных плашек ─────────────────────────────*/
    --pb-warn-line:      #ffe69c;
    --pb-warn-text-2:    #664d03;  /* тот же текст, но темнее */
    --pb-info-line:      #b6effb;
    --pb-warm-line:      #e6cba1;  /* тёплый пунктир */
    --pb-ok-badge:       #d4edda;  /* бледно-зелёный бейдж */
    --pb-ok-badge-hi:    #a3d9a5;  /* он же насыщеннее */
    --pb-ok-badge-text:  #155724;

    /* ── полупрозрачные слои ─────────────────────────────────────────
       Вуали и тени в тёмной теме нельзя просто "затемнить": чёрное на
       тёмном не читается, поэтому вуаль светлеет, а тень наоборот
       набирает плотность. */
    --pb-veil:           rgba(0,0,0,.06);   /* hover по шапке таблицы */
    --pb-veil-code:      rgba(0,0,0,0.05);  /* подложка inline-кода */
    --pb-veil-ok:        rgba(25,135,84,.07);
    --pb-veil-bad:       rgba(220,53,69,.07);
    --pb-veil-info:      rgba(13,110,253,.06);
    /* Дефолты Chart.js: сохраняем их как светлые значения, чтобы график
       в светлой теме выглядел ровно так же, как до правки. */
    --pb-chart-tick:     #666;
    --pb-chart-grid:     rgba(0,0,0,0.1);
    --pb-shadow-sm:      rgba(0,0,0,0.08);
    --pb-shadow-md:      rgba(0,0,0,0.1);
    --pb-shadow-lg:      rgba(0,0,0,0.12);
}

[data-bs-theme="dark"] {
    /* Алиасы на токены Bootstrap ПОВТОРЯЮТСЯ здесь намеренно. Кастомное
       свойство наследуется уже ВЫЧИСЛЕННЫМ, поэтому без повтора вложенный
       остров (<div data-bs-theme="dark"> внутри светлой страницы) получил бы
       тёмный Bootstrap, но светлое унаследованное значение --pb-surface. */
    --pb-surface:        var(--bs-body-bg);
    --pb-surface-2:      var(--bs-tertiary-bg);
    --pb-surface-3:      var(--bs-secondary-bg);
    --pb-line:           var(--bs-border-color);
    --pb-text:           var(--bs-body-color);

    --pb-surface-sub:    #1b1e22;
    --pb-surface-mute:   #2f353b;
    --pb-surface-hover:  #343a40;

    --pb-accent-soft:    #3a2a1a;
    --pb-accent-soft-hi: #4d381f;
    --pb-accent-soft-2:  #4d381f;
    --pb-accent-soft-3:  #5a3f22;
    --pb-accent-soft-4:  #332813;
    --pb-warn-soft:      #332701;
    --pb-warn-text:      #ffda6a;
    --pb-ok-soft:        #14301f;
    --pb-ok-soft-2:      #143024;
    --pb-ok-soft-3:      #16281e;
    --pb-ok-soft-4:      #16281e;
    --pb-bad-soft:       #2e1a1a;
    --pb-bad-soft-2:     #331a22;
    --pb-bad-soft-3:     #2e1a1a;
    --pb-bad-soft-4:     #2c0b0e;
    --pb-info-soft:      #032830;
    --pb-violet-soft:    #2b2438;

    --pb-text-soft:      #ced4da;
    --pb-muted:          #adb5bd;

    --pb-line-input:     #495057;
    --pb-line-soft:      #343a40;
    --pb-line-faint:     #343a40;
    --pb-line-mid:       #3a4046;
    --pb-line-strong:    #8a929b;
    --pb-violet-line:    #4a3d63;
    --pb-accent-line:    #5a3f22;

    --pb-orange:         #ff8a5b;
    --pb-violet:         #b9a3e3;
    --pb-crimson:        #ff8b7a;
    --pb-purple:         #b39ae8;
    --pb-brown:          #d99a5b;
    --pb-amber:          #e0a060;
    --pb-amber-2:        #ffda6a;
    --pb-success:        #75b798;
    --pb-success-2:      #75b798;
    --pb-success-3:      #75b798;
    --pb-danger:         #ea868f;
    --pb-danger-2:       #ea868f;
    --pb-danger-3:       #ea868f;
    --pb-link:           #6ea8fe;
    --pb-link-2:         #8bb9fe;
    --pb-neutral:        #adb5bd;
    --pb-neutral-2:      #adb5bd;
    --pb-select-bg:      #3b4148;

    --pb-warn-line:      #664d03;
    --pb-warn-text-2:    #ffda6a;
    --pb-info-line:      #055160;
    --pb-warm-line:      #5a3f22;
    --pb-ok-badge:       #14301f;
    --pb-ok-badge-hi:    #1d4630;
    --pb-ok-badge-text:  #a3d9a5;

    --pb-veil:           rgba(255,255,255,.07);
    --pb-veil-code:      rgba(255,255,255,0.08);
    --pb-veil-ok:        rgba(117,183,152,.14);
    --pb-veil-bad:       rgba(234,134,143,.14);
    --pb-veil-info:      rgba(110,168,254,.13);
    --pb-chart-tick:     #adb5bd;
    --pb-chart-grid:     rgba(255,255,255,0.14);
    --pb-shadow-sm:      rgba(0,0,0,0.45);
    --pb-shadow-md:      rgba(0,0,0,0.5);
    --pb-shadow-lg:      rgba(0,0,0,0.55);
}

/* ── утилиты для мест, где Bootstrap не даёт адаптивного класса ──────
   `.bg-white` и `.bg-light` прибиты к #fff / #f8f9fa в обеих темах (это
   палитровые цвета, а не токены темы) - их замена: штатные `.bg-body`
   и `.bg-body-tertiary`. А вот для строк таблицы адаптивного аналога
   `.table-light` в Bootstrap нет, поэтому заводим свой. Значения светлой
   темы скопированы из `.table-light` один в один, поэтому подмена класса
   ничего не меняет визуально. */
.table-subtle {
    --bs-table-color: #000;
    --bs-table-bg: #f8f9fa;
    --bs-table-border-color: #c6c7c8;
    --bs-table-striped-bg: #ecedee;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfe0e1;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5e6e7;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-bs-theme="dark"] .table-subtle {
    --bs-table-color: #dee2e6;
    --bs-table-bg: #2b3035;
    --bs-table-border-color: #454b52;
    --bs-table-striped-bg: #33383d;
    --bs-table-striped-color: #dee2e6;
    --bs-table-active-bg: #3b4046;
    --bs-table-active-color: #dee2e6;
    --bs-table-hover-bg: #373c41;
    --bs-table-hover-color: #dee2e6;
}

/* ── контекстные строки таблиц в тёмной теме ─────────────────────────
   `.table-info`, `.table-success` и остальные в Bootstrap 5.3 заданы
   палитровыми цветами и тёмного варианта НЕ имеют: на тёмной странице
   это яркая пастельная полоса с чёрным текстом. Переопределяем ровно
   те же переменные, что задаёт сам Bootstrap, - светлая тема не
   затрагивается, потому что правило живёт под [data-bs-theme="dark"].
   Фоны взяты из штатных --bs-*-bg-subtle тёмной темы; исключение
   .table-light - он выровнен с .table-subtle, чтобы шапка таблицы
   выглядела одинаково независимо от того, какой класс на ней стоит. */
[data-bs-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-secondary {
    --bs-table-color: #dee2e6;
    --bs-table-striped-color: #dee2e6;
    --bs-table-active-color: #dee2e6;
    --bs-table-hover-color: #dee2e6;
}
[data-bs-theme="dark"] .table-info {
    --bs-table-bg: #032830; --bs-table-border-color: #0a4756;
    --bs-table-striped-bg: #08323b; --bs-table-active-bg: #0d3f4a; --bs-table-hover-bg: #0a3a45;
}
[data-bs-theme="dark"] .table-success {
    --bs-table-bg: #051b11; --bs-table-border-color: #0f5132;
    --bs-table-striped-bg: #0a2519; --bs-table-active-bg: #103021; --bs-table-hover-bg: #0d2b1d;
}
[data-bs-theme="dark"] .table-danger {
    --bs-table-bg: #2c0b0e; --bs-table-border-color: #842029;
    --bs-table-striped-bg: #351317; --bs-table-active-bg: #3f1a1e; --bs-table-hover-bg: #3a161a;
}
[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: #332701; --bs-table-border-color: #997404;
    --bs-table-striped-bg: #3c2f08; --bs-table-active-bg: #46380e; --bs-table-hover-bg: #41340b;
}
[data-bs-theme="dark"] .table-secondary {
    --bs-table-bg: #161719; --bs-table-border-color: #41464b;
    --bs-table-striped-bg: #1e2023; --bs-table-active-bg: #26282c; --bs-table-hover-bg: #222427;
}
[data-bs-theme="dark"] .table-primary {
    --bs-table-bg: #031633; --bs-table-border-color: #084298;
    --bs-table-striped-bg: #0a1d3a; --bs-table-active-bg: #112443; --bs-table-hover-bg: #0e213f;
}
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: #2b3035; --bs-table-border-color: #454b52;
    --bs-table-striped-bg: #33383d; --bs-table-active-bg: #3b4046; --bs-table-hover-bg: #373c41;
}