/* =====================================================================
   DESIGN TOKENS — TBC панель, navy-purple палитра по Master ТЗ §3
   ---------------------------------------------------------------------
   Создан в рамках Этапа 1 редизайна (2026-05-24).
   Источник истины: D:\Mind\Mind\10 - Projects\TheBattleClub\
                    2026-05-24 - Master ТЗ редизайн личного кабинета.md

   Главное решение: уйти от тёплой грифель-серой базы к холодной
   тёмно-сине-фиолетовой. Оранжевые CTA-кнопки на холодном фоне
   "вспыхивают" — иерархия восстанавливается без перекраски кнопок.

   ВАЖНО:
   - Этот файл подключается ПОСЛЕ codebase.css/тем/custom.css,
     поэтому переопределяет вендорские background-цвета.
   - Цвета задаются как CSS-переменные в :root для повторного
     использования всеми последующими этапами (карточка персонажа,
     сайдбар-группы, реферальный блок и т.д.).
   - В рамках Этапа 1 трогаем ТОЛЬКО фоны панели/сайдбара/карточек.
     Кнопки, типографику и компоненты — следующие этапы.
   ===================================================================== */

:root {
    /* ---------- Фоны (по ТЗ §3) ---------- */
    --tbc-bg-panel-start:   #1E2138;  /* верх-лево основной панели */
    --tbc-bg-panel-end:     #1A1D2E;  /* низ-право основной панели */
    --tbc-bg-panel-base:    #1E2138;  /* fallback solid */
    --tbc-bg-sidebar:       #141724;  /* левая колонка (темнее) */
    --tbc-bg-card:          #252942;  /* карточки внутри блоков */
    --tbc-bg-card-hover:    #2C3050;  /* +6% по lightness */

    /* ---------- Бордеры и разделители ---------- */
    --tbc-border-default:   #2F3454;
    --tbc-border-subtle:    rgba(47, 52, 84, 0.5);

    /* ---------- Акценты ---------- */
    --tbc-accent-cta:       #F5A623;  /* оранжевый — главные действия */
    --tbc-accent-cta-hover: #FFB840;
    --tbc-accent-success:   #3AC569;  /* зелёный — вывод монет */
    --tbc-accent-success-hover: #4ED77B;
    --tbc-accent-error:     #E74C3C;

    /* ---------- Текст ---------- */
    --tbc-text-primary:     #FFFFFF;
    --tbc-text-secondary:   #8B90B0;
    --tbc-text-muted:       #5A5F7A;

    /* ---------- Тени и эффекты ---------- */
    --tbc-shadow-card:      0 4px 16px rgba(0, 0, 0, 0.25);
    --tbc-shadow-card-hover:0 6px 22px rgba(0, 0, 0, 0.35);
    --tbc-shadow-focus:     0 0 0 2px rgba(245, 166, 35, 0.5);

    /* ---------- Радиусы ---------- */
    --tbc-radius-block:     8px;   /* крупные блоки */
    --tbc-radius-card:      6px;   /* кнопки, мелкие карточки */
    --tbc-radius-pill:      999px;

    /* ---------- Типографика ---------- */
    --tbc-font-size-h1:     18px;
    --tbc-font-size-h2:     14px;
    --tbc-font-size-body:   14px;
    --tbc-font-size-caption:12px;
    --tbc-font-size-meta:   10px;  /* UPPERCASE метки разделов */
}

/* =====================================================================
   ПРИМЕНЕНИЕ ПАЛИТРЫ
   Минимально-инвазивно — только перекрашиваем существующие фоны.
   ===================================================================== */

/* ----- Overlay поверх фона-замка (ТЗ §9 — вытащено в Этап 1
        чтобы navy-палитра "села" правильно. Без оверлея замок
        конкурирует с панелями по яркости — пропадает глубина).

        z-index: -1 на pseudo — стандартный трюк: pseudo сидит
        ВЫШЕ body background-image (замка), но НИЖЕ любого DOM-
        контента (z-index auto). Так не нужно трогать positioning
        и z-index у #sidebar / #page-container — иначе ломается
        codebase position:fixed и весь layout уезжает (была эта
        ошибка в коммите aa96554, fix здесь). ----- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(20, 23, 36, 0.70) 0%,
        rgba(20, 23, 36, 0.85) 100%
    );
    z-index: -1;
    pointer-events: none;
}

/* ----- Основные блоки контента (центральная + правая колонка) ----- */
/* Перекрываем тёплый градиент #404043→#171723 на холодный navy
   + тонкая тень (ТЗ §9 — приподнимаем блоки над оверлеем) */
.block,
.new_block_content,
.bg_body_gradient,
.gamepage {
    background: linear-gradient(
        132.48deg,
        var(--tbc-bg-panel-start) 0%,
        var(--tbc-bg-panel-end) 99.39%
    ) !important;
    box-shadow: var(--tbc-shadow-card) !important;
}

/* ----- Сайдбар (левая колонка) — чуть темнее основной панели ----- */
#sidebar,
#page-container.sidebar-inverse #sidebar {
    background-color: var(--tbc-bg-sidebar) !important;
}

/* Внутренний контейнер сайдбара — прозрачный, чтобы фон #sidebar просвечивал */
.sidebar-content,
.sidebar-content-сustom,
.simplebar-content {
    background-color: transparent !important;
}

/* ----- Карточки внутри блоков (.list_account уже стилизован
        в account-block-polish.css — НЕ трогаем его здесь,
        чтобы не сломать текущий вид). Этап 2 перепишет его
        под новые токены. ----- */

/* ----- Server-selector + Bonus-code submit-btn в сайдбаре —
        выровняем фон под новую сайдбар-палитру ----- */
#sidebar #toolbarDrop,
.chose_server_custom {
    background-color: var(--tbc-bg-card) !important;
    border-color: var(--tbc-border-default) !important;
}

/* ----- Form-control внутри панели — подстроим под navy фон,
        чтобы серо-оливковый input не выбивался ----- */
.form-control,
.input-group-text {
    background-color: rgba(20, 23, 36, 0.6) !important;  /* navy с прозрачностью */
    border-color: var(--tbc-border-default) !important;
    color: var(--tbc-text-primary) !important;
}
.form-control::placeholder {
    color: var(--tbc-text-muted) !important;
}

/* ----- Уравниваем h1-h6 цвет с токеном (custom.css уже задаёт #fff
        через !important; дублируем через переменную для будущей правки) ----- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--tbc-text-primary) !important;
}

/* ----- Mute-текст по проекту (вторичный/третичный) ----- */
.text-muted,
small.text-muted,
.blockquote-footer {
    color: var(--tbc-text-secondary) !important;
}

/* =====================================================================
   ЗАЩИТА ОТ ПОБОЧНЫХ ЭФФЕКТОВ
   В custom.css есть `.bg-white` с зелёным градиентом (явно
   декоративный override). Его НЕ трогаем — он по своему смыслу.
   ===================================================================== */