/* ─────────────────────────────────────────────────────────────────────────────
   ARB.CORE — admin.css
   Версия 2.0: единый дизайн-токен, мобильная адаптивность, скролл-индикаторы
───────────────────────────────────────────────────────────────────────────── */

/* ═══ 1. СБРОС И БАЗОВЫЕ ТОКЕНЫ ══════════════════════════════════════════ */
html, body {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background-color: #ffffff;   /* белая зона статус-бара iOS (Safari тонирует её фоном body) */
    margin: 0; padding: 0;
    height: 100vh;          /* фолбэк для старых браузеров */
    height: 100dvh;         /* iOS Safari: реальная видимая высота (без бага со 100vh) */
    overflow: hidden;
    overscroll-behavior: none;
}

input, textarea, a, .select-text {
    -webkit-user-select: text;
    user-select: text;
}

/* ═══ 2. СКРОЛЛБАР ════════════════════════════════════════════════════════ */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* ═══ 3. ИНДИКАТОР ЗАГРУЗКИ ══════════════════════════════════════════════ */
#loading-bar {
    position: fixed; top: 0; left: 0; height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
    background-size: 200% 100%;
    z-index: 9999;
    transition: width 0.3s ease, opacity 0.4s;
    width: 0%; opacity: 0;
}

body.is-loading #loading-bar {
    opacity: 1;
    width: 60%;
    animation: loading-shimmer 1.5s ease infinite;
}

@keyframes loading-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

body.is-loading { pointer-events: none; cursor: wait; }

/* ═══ 4. АНИМАЦИИ ════════════════════════════════════════════════════════ */
@keyframes slide-up {
    from { transform: translateY(100%) translateX(-50%); opacity: 0; }
    to   { transform: translateY(0) translateX(-50%); opacity: 1; }
}
@keyframes slide-left {
    from { transform: translateX(-20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-slide-up   { animation: slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.animate-slide-left { animation: slide-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.animate-fade-in    { animation: fade-in 0.3s ease forwards; }

/* ═══ 5. ШИММЕР (СКЕЛЕТОН) ═══════════════════════════════════════════════ */
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ═══ 6. CLUSTERIZE.JS ════════════════════════════════════════════════════ */
.clusterize-scroll table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse;
}
.clusterize-scroll td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* ═══ 6.1 АФФОРДАНС ТУЛТИПОВ КОЛОНОК ═════════════════════════════════════ */
/* Заголовок колонки с подсказкой (data-tip): курсор-«?» + пунктир,
   чтобы было видно, что при наведении появится описание метрики. */
#content-area th[data-tip] {
    cursor: help;
    text-decoration: underline dotted rgba(100, 116, 139, 0.45);
    text-underline-offset: 3px;
}
/* Сортируемые заголовки (кликабельные) сохраняют курсор-указатель */
#content-area th[data-tip].cursor-pointer {
    cursor: pointer;
}

/* ═══ 7. ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ С ИНДИКАТОРОМ ════════════════════════════ */

/* Обёртка-контейнер для таблиц с горизонтальным скроллом */
.table-scroll-wrap {
    position: relative;
}

/* Тень-индикатор справа: сигнализирует что контент можно скроллить */
.table-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 6px; /* под скроллбар */
    width: 60px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 0 1.5rem 1.5rem 0;
}

/* Показываем тень только если есть скролл (управляется JS) */
.table-scroll-wrap.has-overflow::after {
    opacity: 1;
}

/* Скроллбар для таблиц: тонкий, но видимый */
.overflow-x-auto::-webkit-scrollbar {
    height: 5px;
}
.overflow-x-auto::-webkit-scrollbar-track {
    background: #f8fafc;
    margin: 0 1rem;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ═══ 8. МОБИЛЬНАЯ АДАПТИВНОСТЬ ═════════════════════════════════════════ */

/* 8.1 — Сайдбар скрывается и выезжает на мобилке */
@media (max-width: 1024px) {
    aside {
        position: fixed;
        left: -280px;
        top: 0; bottom: 0;
        width: 280px;
        z-index: 100;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: env(safe-area-inset-top);   /* статус-бар на iPhone (notch) */
    }
    aside.mobile-open { left: 0; }

    /* Шапка не должна заезжать под статус-бар (часы) на iOS при viewport-fit=cover */
    #main-header {
        height: auto;
        min-height: 2.75rem;                       /* = h-11 */
        padding-top: env(safe-area-inset-top);
    }
}

/* 8.2 — Контентная область: меньше отступов на мобилке */
@media (max-width: 640px) {
    /* Уменьшаем padding самой области */
    #content-area {
        padding: 0.5rem !important;
    }

    /* Внешние обёртки страниц: сжимаем отступы */
    #content-area > div {
        padding: 0.375rem !important;
    }

    /* Карточки-контейнеры (панели, таблицы) */
    #content-area .p-8 {
        padding: 1rem !important;
    }
    #content-area .p-7 {
        padding: 0.875rem !important;
    }
    #content-area .p-6 {
        padding: 0.75rem !important;
    }

    /* Ячейки таблиц */
    #content-area .p-5 {
        padding: 0.5rem 0.625rem !important;
    }

    /* Финансовые виджеты дашборда: в 2 колонки вместо 4 */
    #finance-widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Текстовые метки в виджетах: меньше размер */
    #content-area .text-3xl {
        font-size: 1.5rem !important;
    }
    #content-area .text-2xl {
        font-size: 1.25rem !important;
    }

    /* Скругления: чуть меньше на мобилке */
    #content-area .rounded-\[3rem\],
    #content-area .rounded-\[3\.5rem\],
    #content-area .rounded-\[4rem\] {
        border-radius: 1.25rem !important;
    }
    #content-area .rounded-\[2\.5rem\] {
        border-radius: 1rem !important;
    }

    /* Верхние панели фильтров: убираем лишние отступы */
    #content-area .space-y-8 {
        gap: 0.75rem !important;
    }
    #content-area .space-y-6 {
        gap: 0.625rem !important;
    }

    /* Инпуты: запрет авто-зума в Safari */
    input[type="text"],
    input[type="date"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Панели управления (фильтры сверху) */
    #content-area .gap-6 {
        gap: 0.5rem !important;
    }
    #content-area .gap-4 {
        gap: 0.375rem !important;
    }
}

/* 8.3 — Средние экраны (планшеты) */
@media (max-width: 768px) {
    /* Более видимый горизонтальный скроллбар */
    .overflow-x-auto::-webkit-scrollbar {
        height: 6px;
    }
    .overflow-x-auto::-webkit-scrollbar-thumb {
        background: #94a3b8;
    }

    /* Карточки и кнопки: touch-friendly размеры */
    #content-area .h-12 {
        min-height: 44px;
    }
    #content-area .w-12 {
        min-width: 44px;
    }
}

/* 8.4 — Клавиатура на мобилке не перекрывает инпуты */
@media (max-height: 600px) and (max-width: 768px) {
    aside { height: 100dvh; }
    main  { height: 100dvh; }
}

/* ═══ 8.5 — ЕДИНЫЙ СТИЛЬ И АДАПТИВ ФИЛЬТР-БАРОВ (все аналитические страницы) ═══
   Плашка периода (Сегодня/Вчера/7д/30д) визуально приравнивается к блоку дат:
   пунктирный бордер, тот же фон (slate-50/50), без внутренней тени, та же высота.
   На мобилке/планшете блоки фильтра занимают всю ширину, кнопки-иконки — справа.
   Селекторы группы периода ловятся по [class*="period-btn"] (универсально для всех страниц). */

/* Единая высота всех атомов фильтр-бара (одинаково на всех страницах) */
#content-area { --fbar-h: 2.75rem; }

/* Внешний вид плашки периода = как у блока дат (пунктир, фон, без тени) */
#content-area .shadow-inner:has(> [class*="period-btn"]) {
    background-color: rgba(248, 250, 252, 0.5);   /* = bg-slate-50/50 */
    border-style: dashed;
    box-shadow: none;
}
/* Единая ВЫСОТА: плашка периода, блок дат, LFL-блок («Сравнить с»), пунктирный блок-селект (напр. «Первоисточник») */
#content-area .shadow-inner:has(> [class*="period-btn"]),
#content-area .border-dashed:has(> input[type="date"]),
#content-area .border-dashed:has(> select),
#content-area [id^="lfl-box"],
#content-area #lfl-selector-container {
    height: var(--fbar-h);
    min-height: var(--fbar-h);
    align-items: center;
}
/* Единый ШРИФТ и гориз. паддинг кнопок периода + шрифт дат (убирает разнобой между страницами) */
#content-area [class*="period-btn"] { font-size: 9px; padding-left: 1rem; padding-right: 1rem; }
#content-area .border-dashed:has(> input[type="date"]) input[type="date"] { font-size: 10px; }
/* Кнопки-ИКОНКИ бара (Обновить / Экспорт / Сравнить) — КВАДРАТ той же высоты, что блок дат.
   Только иконочные (есть класс h-10/h-11/h-12), чтобы не сплющивать кнопки-пилюли с текстом (напр. «CSV» в Конструкторе). */
#content-area div:has(> .shadow-inner > [class*="period-btn"]) > button[class*="h-1"],
#content-area div:has(> .border-dashed > input[type="date"]) > button[class*="h-1"] {
    width: var(--fbar-h);
    height: var(--fbar-h);
    min-width: var(--fbar-h);
    flex: none;
    padding: 0;
}
/* Селекты-фильтры в баре — та же высота и единый шрифт */
#content-area div:has(> .shadow-inner > [class*="period-btn"]) select,
#content-area div:has(> .border-dashed > input[type="date"]) select {
    height: var(--fbar-h);
    min-height: var(--fbar-h);
    font-size: 11px;
}

/* Десктоп: если плашка периода и блок дат лежат в одном контейнере — прижимаем их вправо
   (плашка оказывается вплотную к датам). Узко: только такие компактные бары, чтобы не задеть бары с заголовками/вкладками. */
@media (min-width: 1024px) {
    #content-area div:has(> .shadow-inner > [class*="period-btn"]):has(> .border-dashed > input[type="date"]) {
        justify-content: flex-end;
    }
}

/* Таб-переключатели «По часам» (Пивот/Тепловая карта), «Источники» (6 вкладок), «Нейминги»
   (Сводка/Доставляемость/Причины) и блок «Окно дозревания» (Когорты) — тот же пунктирный вид, что у блока дат */
#content-area .shadow-inner:has(> .hourly-tab),
#content-area .shadow-inner:has(> .srctab),
#content-area .shadow-inner:has(> .nmtab),
#content-area .shadow-inner:has(> .ch-mature-btn),
#content-area .shadow-inner:has(> .opltab),
#content-area .shadow-inner:has(> .nmgtab),
#content-area .shadow-inner:has(> .rb-dim-btn),
#content-area .shadow-inner:has(> .chtab),
#content-area .shadow-inner:has(> .sectab),
#content-area .shadow-inner:has(> .mktab),
#content-area .shadow-inner:has(> .addlog-tab) {
    background-color: rgba(248, 250, 252, 0.5);
    border-style: dashed;
    box-shadow: none;
    height: var(--fbar-h);
    min-height: var(--fbar-h);
    align-items: center;
}
#content-area .hourly-tab,
#content-area .srctab,
#content-area .nmtab,
#content-area .ch-mature-btn,
#content-area .opltab,
#content-area .nmgtab,
#content-area .rb-dim-btn,
#content-area .chtab,
#content-area .sectab,
#content-area .mktab,
#content-area .addlog-tab { font-size: 9px; }

@media (max-width: 1023px) {
    /* Контейнер плашки периода / диапазона дат → перенос строк: крупные блоки
       занимают всю ширину, кнопки-иконки прижимаются вправо.
       Матчим по факту наличия плашки/дат внутри — независимо от flex-классов бара. */
    #content-area div:has(> .shadow-inner > [class*="period-btn"]),
    #content-area div:has(> .border-dashed > input[type="date"]) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }
    /* Плашка периода — на всю ширину, кнопки равной ширины */
    #content-area .shadow-inner:has(> [class*="period-btn"]) { width: 100%; }
    #content-area [class*="period-btn"] {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }
    /* Диапазон дат — на всю ширину, инпуты делят место поровну и сжимаются.
       Уменьшаем внутренние отступы/зазор (как в «Когортах»), иначе на узких экранах
       (iPhone SE) обрезается пунктир по краям и год прячется за иконкой календаря. */
    #content-area .border-dashed:has(> input[type="date"]) {
        width: 100%;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        column-gap: 0.375rem;
    }
    #content-area .border-dashed:has(> input[type="date"]) > input[type="date"] { flex: 1 1 0; min-width: 0; }
    /* Выпадающие фильтры рядом с периодом/датами — на всю ширину */
    #content-area div:has(> .shadow-inner > [class*="period-btn"]) select,
    #content-area div:has(> .border-dashed > input[type="date"]) select { width: 100%; }
    /* ЛЮБОЙ select внутри карточки-фильтра (содержит период или блок дат) — на всю ширину контейнера,
       чтобы все фильтр-дропдауны были одинаковой длины и не «недотягивались» */
    #content-area .shadow-sm:has([class*="period-btn"]) select,
    #content-area .shadow-sm:has(.border-dashed > input[type="date"]) select { width: 100%; }

    /* Сегментные табы на всю ширину, кнопки равной ширины:
       «По часам», «Нейминги»(аналитика), «Определение операторов», «Нейминги и шаблоны» */
    #content-area .shadow-inner:has(> .hourly-tab),
    #content-area .shadow-inner:has(> .nmtab),
    #content-area .shadow-inner:has(> .opltab),
    #content-area .shadow-inner:has(> .nmgtab),
    #content-area .shadow-inner:has(> .rb-dim-btn),
    #content-area .shadow-inner:has(> .chtab),
    #content-area .shadow-inner:has(> .sectab),
    #content-area .shadow-inner:has(> .mktab),
    #content-area .shadow-inner:has(> .addlog-tab) { width: 100%; }
    #content-area .hourly-tab,
    #content-area .nmtab,
    #content-area .opltab,
    #content-area .nmgtab,
    #content-area .rb-dim-btn,
    #content-area .chtab,
    #content-area .sectab,
    #content-area .mktab,
    #content-area .addlog-tab { flex: 1 1 0; min-width: 0; }

    /* «Источники»: 6 вкладок → сетка на всю ширину с переносом (≈3 в ряд), высота auto */
    #content-area .shadow-inner:has(> .srctab) { width: 100%; flex-wrap: wrap; height: auto; min-height: var(--fbar-h); }
    #content-area .srctab { flex: 1 1 28%; min-width: 0; }
}

/* ═══ 9. ТРАНСФОРМАЦИЯ CLUSTERIZE-ТАБЛИЦ В КАРТОЧКИ НА МОБИЛКЕ ══════════ */
@media (max-width: 768px) {
    .clusterize-scroll thead { display: none; }

    .clusterize-scroll tr {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.75rem !important;
        margin: 0.5rem 0 !important;
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.875rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .clusterize-scroll td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        border: none !important;
        padding: 0.375rem 0 !important;
        width: 100% !important;
        font-size: 0.75rem;
    }

    .clusterize-scroll td::before {
        content: attr(data-label);
        font-weight: 800;
        text-transform: uppercase;
        font-size: 9px;
        color: #94a3b8;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    .clusterize-scroll td:first-child {
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 0.375rem;
        padding-bottom: 0.625rem !important;
        font-weight: bold;
    }
    .clusterize-scroll td:first-child::before { display: none; }
}

/* ═══ 10. SIDEBAR ════════════════════════════════════════════════════════ */

/* Активный пункт меню */
.nav-link.active,
.nav-link[aria-current="page"] {
    background-color: #1e293b;
    color: white;
}

/* Hover-эффект пункта меню */
.nav-link:hover {
    color: white;
}

/* Категориальные разделители: тонкие и аккуратные */
.nav-section-label {
    padding: 0.625rem 0.75rem 0.375rem;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #475569;
    border-top: 1px solid #1e293b;
    margin-top: 0.25rem;
}

.nav-section-label:first-child {
    border-top: none;
    margin-top: 0;
}

/* ═══ 11. МОДАЛКИ ════════════════════════════════════════════════════════ */

/* Модалки на мобилке: полноэкранные снизу */
@media (max-width: 640px) {
    /* Плавное появление модалки снизу на мобилке */
    [id$="-modal"] > div {
        animation: modal-slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes modal-slide-up {
        from { transform: translateY(30px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }

    /* Боттом-шит паттерн: модалки приклеиваются снизу */
    .modal-sheet {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        border-radius: 2rem 2rem 0 0 !important;
        max-height: 92dvh;
        overflow-y: auto;
    }
}

/* ═══ 12. TOAST ══════════════════════════════════════════════════════════ */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 2rem);
}

/* ═══ 13. ТУЛТИПЫ ════════════════════════════════════════════════════════ */
/* Скрываем тултипы на тач-устройствах (там они не работают) */
@media (hover: none) {
    [data-tip]::after { display: none !important; }
}

/* ═══ 14. ВСПОМОГАТЕЛЬНЫЕ КОМПОНЕНТЫ ════════════════════════════════════ */

/* Бейджи статусов */
.badge-active   { @apply inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-black uppercase bg-emerald-100 text-emerald-700; }
.badge-disabled { @apply inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-black uppercase bg-red-50 text-red-500; }

/* Метрика (большое число + подпись) */
.metric-val   { font-size: 1.75rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.metric-label { font-size: 9px;     font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #94a3b8; }

/* Кнопка-иконка (12×12 hit area, touch-friendly) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 0.75rem;
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
    cursor: pointer;
}
.icon-btn:active { transform: scale(0.93); }

/* Разделитель */
.divider { border: none; border-top: 1px solid #f1f5f9; margin: 0; }

/* Пустое состояние */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: #94a3b8;
}
.empty-state i { font-size: 2.5rem; margin-bottom: 1rem; opacity: 0.3; }
.empty-state p { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

/* ═══ 15. ПЕЧАТЬ ══════════════════════════════════════════════════════════ */
@media print {
    aside, header, #loading-bar, #toast-container { display: none !important; }
    main { height: auto !important; overflow: visible !important; }
    #content-area { overflow: visible !important; height: auto !important; }
}

/* ═══ 12. ЦВЕТОВЫЕ ТЕМЫ ════════════════════════════════════════════════ */

/* ── Золотая тема ── */
html[data-theme="gold"] aside {
    background:
        radial-gradient(ellipse at 25% 8%, rgba(253, 224, 71, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse at 80% 90%, rgba(251, 146, 60, 0.18) 0%, transparent 45%),
        linear-gradient(158deg, #b45309 0%, #92400e 52%, #7c2d12 100%) !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="gold"] aside > div:first-child {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="gold"] .sidebar-logo-icon {
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="gold"] aside .sidebar-logo-icon ~ span {
    color: #ffffff !important;
}

html[data-theme="gold"] .sidebar-logo-dot {
    color: #fde047 !important;
}

html[data-theme="gold"] aside button:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="gold"] .nav-section-label {
    color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="gold"] .nav-link {
    color: rgba(255, 255, 255, 0.82);
}

/* Активный пункт (роутер вешает утилиту .bg-slate-800 напрямую) — в золотой
   теме заменяем тёмное выделение на мягкое золотистое стекло с акцентом */
html[data-theme="gold"] .nav-link.active,
html[data-theme="gold"] .nav-link[aria-current="page"],
html[data-theme="gold"] .nav-link.bg-slate-800 {
    background: linear-gradient(90deg, rgba(253, 224, 71, 0.22) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #fde047, 0 2px 10px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Иконка активного пункта: роутер красит её text-blue-400 → перекрываем золотом */
html[data-theme="gold"] .nav-link.bg-slate-800 i {
    color: #fde047 !important;
}

html[data-theme="gold"] .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}