/* ============================================================
   RGG — Каркас (layout)
   Принципиально другой каркас:
   • двухуровневая графитовая шапка (лого/поиск/профиль + строка
     навигации с оранжевым индикатором активного раздела);
   • меню — выезжающий слева дровер на ВСЕХ разрешениях (а не
     постоянный сайдбар, как в rg);
   • контент — на всю ширину с ограничением по максимуму;
   • тёмный графитовый футер;
   • нижняя мобильная навигация.
   Загружается после legacy style.css и переопределяет каркас.
   Цвета «чернил» (ink) — триплеты в variables.css, поэтому здесь
   всегда rgb(var(--rg-ink*)).
   ============================================================ */

/* ---------- Фон страницы ---------- */
body.strict-bg,
body {
    background:
        radial-gradient(1100px 520px at 82% -8%, rgb(var(--accent-primary) / 0.10), transparent 62%),
        radial-gradient(900px 480px at 0% 4%, rgb(var(--accent-purple) / 0.08), transparent 58%),
        var(--rg-bg);
    color: var(--rg-text);
    font-family: 'Inter', sans-serif;
}

/* Текстура фона: мягкая тёплая сетка + оранжевое свечение */
.grid-lines {
    background-image:
        radial-gradient(circle at 88% 4%, rgb(var(--accent-primary) / 0.14), transparent 42%),
        linear-gradient(rgb(var(--accent-primary) / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--accent-primary) / 0.05) 1px, transparent 1px);
    background-size: auto, 46px 46px, 46px 46px;
}

/* ============================================================
   ШАПКА
   ============================================================ */
.rg-header,
header#mainHeader {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgb(var(--rg-ink)) !important;
    border: none !important;
    box-shadow: 0 6px 24px rgb(20 13 8 / 0.28);
    color: rgb(var(--rg-ink-text));
    height: auto !important;
    display: block !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.rg-header__bar { background: rgb(var(--rg-ink)); }

.rg-header__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    height: var(--header-height);
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Логотип: в графитовой шапке — светлый вариант */
.rg-header .logo { flex: 0 0 auto; display: flex; align-items: center; }
.rg-header .logo-link { display: inline-flex; align-items: center; gap: 10px; }
.rg-header .logo-img { height: 38px; width: auto; display: block; }
.rg-header .logo-white-img { display: block !important; }
.rg-header .logo-black-img { display: none !important; }

/* Иконочные кнопки в шапке */
.rg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid rgb(var(--rg-ink-line));
    border-radius: var(--rg-radius-sm);
    background: rgb(255 255 255 / 0.04);
    color: rgb(var(--rg-ink-text));
    cursor: pointer;
    transition: background var(--transition-duration) ease, color var(--transition-duration) ease, border-color var(--transition-duration) ease;
}
.rg-icon-btn:hover { background: rgb(var(--accent-primary) / 0.18); color: rgb(var(--accent-primary-light)); border-color: rgb(var(--accent-primary) / 0.55); }
.rg-icon-btn .material-icons-outlined { font-size: 22px; }

/* Вторая строка — навигация */
.rg-header__nav {
    background: rgb(var(--rg-ink-2));
    border-top: 1px solid rgb(var(--rg-ink-line));
}
.rg-header__nav-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    height: var(--header-nav-height);
}
.rg-header__nav-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(var(--rg-ink-text-muted));
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.rg-header__nav-meta .material-icons-outlined { font-size: 18px; color: rgb(var(--accent-primary-light)); }

/* ---------- Горизонтальная навигация ---------- */
.rg-topnav { display: flex; align-items: stretch; gap: 2px; }

.rg-topnav a,
.rg-topnav button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    height: var(--header-nav-height);
    border: none;
    background: none;
    color: rgb(var(--rg-ink-text-muted));
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-duration) ease;
}
.rg-topnav a::after,
.rg-topnav button::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background var(--transition-duration) ease;
}
.rg-topnav a:hover,
.rg-topnav button:hover { color: #fff; }
.rg-topnav a:hover::after,
.rg-topnav button:hover::after { background: rgb(var(--rg-ink-3)); }
.rg-topnav a.active { color: rgb(var(--accent-primary-light)); }
.rg-topnav a.active::after { background: rgb(var(--accent-primary)); }
.rg-topnav .material-icons-outlined { font-size: 18px; }

/* LIVE-пункт с пульсирующей точкой */
.rg-topnav-live .live-badge-dot { margin-left: 2px; }

/* ---------- Поиск ---------- */
.search-container {
    position: relative;
    flex: 1 1 auto;
    width: auto !important;
    max-width: 560px;
    margin: 0 auto;
    min-width: 0;
}

.search-form {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 6px 0 16px;
    background: rgb(255 255 255 / 0.07) !important;
    border: 1px solid rgb(var(--rg-ink-line)) !important;
    border-radius: var(--rg-radius-full);
    transition: border-color var(--transition-duration) ease, box-shadow var(--transition-duration) ease, background var(--transition-duration) ease;
}
.search-form:focus-within {
    border-color: rgb(var(--accent-primary)) !important;
    background: rgb(255 255 255 / 0.11) !important;
    box-shadow: 0 0 0 3px rgb(var(--accent-primary) / 0.25);
}
.search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
    color: rgb(var(--rg-ink-text)) !important;
}
.search-input::placeholder { color: rgb(var(--rg-ink-text-muted)) !important; }

.search-button {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: none;
    border-radius: var(--rg-radius-full);
    background: rgb(var(--accent-primary));
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-duration) ease;
}
.search-button:hover { background: rgb(var(--accent-primary-dark)); }
.search-button .material-icons-outlined { font-size: 20px; }

.search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--rg-surface) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: var(--rg-radius) !important;
    box-shadow: var(--rg-shadow-lg) !important;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px;
    display: none;
    z-index: 260;
    color: var(--rg-text);
}
.search-results.active { display: block; }

/* ---------- Действия пользователя ---------- */
.user-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.rg-header .user-actions a,
.rg-header .user-actions button,
.rg-header .user-actions span { color: rgb(var(--rg-ink-text)); }
.rg-header .user-actions a:hover,
.rg-header .user-actions button:hover { color: rgb(var(--accent-primary-light)); }

/* ============================================================
   КОНТЕНТ
   ============================================================ */
.main-container {
    display: block !important;
    flex-direction: column;
    max-width: var(--content-max-width) !important;
    margin: 0 auto;
    padding: 26px 22px 56px !important;
    gap: 0 !important;
}
.main-content { width: 100% !important; min-width: 0; padding-bottom: 0; }

/* ============================================================
   САЙДБАР → ВЫЕЗЖАЮЩИЙ ДРОВЕР (на всех разрешениях)
   ============================================================ */
.sidebar-placeholder { display: none !important; }

.sidebar,
.sidebar.collapsed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(366px, 90vw) !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 320 !important;
    display: block !important;
    background: var(--rg-surface) !important;
    border: none !important;
    border-right: 1px solid var(--rg-border) !important;
    border-radius: 0 !important;
    padding: 18px !important;
    overflow-y: auto;
    transform: translateX(-104%);
    transition: transform 0.26s ease;
    box-shadow: none;
}
.sidebar.mobile-active {
    transform: translateX(0) !important;
    box-shadow: var(--rg-shadow-lg) !important;
    z-index: 330 !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(366px, 90vw) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: var(--rg-surface) !important;
    border-radius: 0 !important;
    overflow-y: auto;
}

/* Нейтрализуем «сворачивание» (в дровере не используется) */
.sidebar.collapsed .menu-text { display: inline !important; }
.sidebar.collapsed .menu-item { justify-content: flex-start !important; padding: 11px 12px !important; gap: 12px !important; }
.sidebar.collapsed .sidebar-header { justify-content: space-between !important; }
.sidebar.collapsed .menu-divider { margin: 10px 6px !important; }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--rg-border);
}
.sidebar-header .menu-text {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--rg-text-muted);
    margin: 0;
}
.desktop-toggle-btn { display: none !important; }
.mobile-close-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-sm);
    background: var(--rg-surface-soft);
    color: var(--rg-text-muted);
    cursor: pointer;
}
.mobile-close-btn:hover { color: rgb(var(--accent-primary-dark)); border-color: rgb(var(--accent-primary) / 0.5); }

/* Пункты меню */
.sidebar .menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    padding: 11px 12px;
    margin-bottom: 2px;
    border: none;
    border-radius: var(--rg-radius-sm);
    background: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--rg-text-secondary);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: background var(--transition-duration) ease, color var(--transition-duration) ease;
}
.sidebar .menu-item:hover { background: var(--rg-primary-soft-2); color: rgb(var(--accent-primary-dark)); }
.sidebar .menu-item.active,
.sidebar .menu-item.menu-item--active { background: var(--rg-primary-soft); color: rgb(var(--accent-primary-dark)); }
.sidebar .menu-item.active::before,
.sidebar .menu-item.menu-item--active::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgb(var(--accent-primary));
}
.sidebar .menu-item .material-icons-outlined { font-size: 20px; color: currentColor; }
.sidebar .menu-item.inactive { opacity: 0.5; cursor: default; }
.sidebar .menu-item.inactive:hover { background: none; color: var(--rg-text-secondary); }

.sidebar .menu-divider { height: 1px; background: var(--rg-border); margin: 10px 6px; }

/* Группы меню */
.rg-menu-group { margin-top: 12px; }
.rg-menu-group__title {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rg-text-faint);
    padding: 8px 12px 4px;
}
.rg-menu-group + .rg-menu-group { border-top: 1px solid var(--rg-border); padding-top: 8px; }

/* Дровер: единый список без разделения на группы */
.sidebar.mobile-active .rg-menu-group { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
.sidebar.mobile-active .rg-menu-group__title { display: none !important; }

/* Подложка под дровер */
.rg-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(18 12 8 / 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 290;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}
.rg-sidebar-backdrop.active { opacity: 1; pointer-events: auto; }

/* ============================================================
   ФУТЕР (графитовый)
   ============================================================ */
footer.rg-footer {
    background: rgb(var(--rg-ink));
    color: rgb(var(--rg-ink-text-muted));
    border-top: 1px solid rgb(var(--rg-ink-line));
    margin-top: 56px;
    padding: 44px 0 26px;
}
footer.rg-footer .rg-footer__inner { max-width: var(--content-max-width); margin: 0 auto; padding: 0 22px; }
footer.rg-footer h3,
footer.rg-footer h4 { color: rgb(var(--rg-ink-text)); }
footer.rg-footer p,
footer.rg-footer li,
footer.rg-footer a { color: rgb(var(--rg-ink-text-muted)); }
footer.rg-footer a { text-decoration: none; transition: color var(--transition-duration) ease; }
footer.rg-footer a:hover { color: rgb(var(--accent-primary-light)); }
footer.rg-footer .material-icons-outlined { color: rgb(var(--accent-primary-light)); }
footer.rg-footer .rg-footer__bottom {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgb(var(--rg-ink-line));
    text-align: center;
    font-size: 0.78rem;
}

/* ---------- Кнопка «наверх» ---------- */
#scrollToTop {
    background: rgb(var(--accent-primary)) !important;
    color: #fff !important;
    box-shadow: var(--rg-shadow-accent);
}
#scrollToTop:hover { background: rgb(var(--accent-primary-dark)) !important; }

/* ============================================================
   МОБИЛЬНАЯ НИЖНЯЯ НАВИГАЦИЯ
   ============================================================ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 210;
    display: none;
    align-items: stretch;
    justify-content: space-around;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    background: rgb(var(--color-card) / 0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--rg-border) !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 9px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--rg-text-muted) !important;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
}
.mobile-nav-item > span:not(.material-icons-outlined),
.mobile-nav-item > select { max-width: 100%; }
.mobile-nav-item > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-nav-item .material-icons-outlined { flex: none; }
.mobile-league-switch { min-width: 0; max-width: 100%; overflow: hidden; }
#mobileLeagueSelect { max-width: 100%; }
.mobile-nav-item.active,
.mobile-nav-item:hover { color: rgb(var(--accent-primary-dark)) !important; }
.mobile-nav-item .material-icons-outlined { font-size: 22px; }

/* ---------- Мобильный поиск ---------- */
.mobile-search-form {
    background: rgb(var(--rg-ink)) !important;
    border-bottom: 1px solid rgb(var(--rg-ink-line)) !important;
    height: var(--header-height);
}
.mobile-search-input { color: rgb(var(--rg-ink-text)) !important; }
.mobile-search-input::placeholder { color: rgb(var(--rg-ink-text-muted)) !important; }
.mobile-search-close { color: rgb(var(--rg-ink-text-muted)); }
.mobile-search-close:hover { color: #fff; }
.mobile-search-results {
    background: var(--rg-surface) !important;
    color: var(--rg-text);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1024px) {
    .search-container { max-width: 360px; }
}

@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: 66px; }

    .main-container { padding: 16px 14px 40px !important; }

    .rg-header__nav { display: none; }
    .rg-header .logo-img { height: 32px; }

    .search-container { flex: 0 0 auto; max-width: none; margin: 0; }
    .search-form { display: none !important; }

    .mobile-search-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: 1px solid rgb(var(--rg-ink-line));
        border-radius: var(--rg-radius-sm);
        background: rgb(255 255 255 / 0.04);
        color: rgb(var(--rg-ink-text));
        cursor: pointer;
    }
    .mobile-search-button:hover { color: rgb(var(--accent-primary-light)); }

    .mobile-search-form {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 320 !important;
        padding: 0 14px;
        align-items: center;
    }
    .mobile-search-form.active { display: flex !important; }

    .mobile-search-results {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 300;
        overflow-y: auto;
        padding: 14px;
        display: none;
    }
    .mobile-search-results.active { display: block; }

    .search-active .logo,
    .search-active .user-actions,
    .search-active .rg-menu-btn,
    .search-active .mobile-search-button { display: none !important; }
}

/* Планшет: строка навигации видна, но без «мета» */
@media (min-width: 769px) and (max-width: 1024px) {
    .rg-header__nav-meta { display: none; }
    .rg-topnav a, .rg-topnav button { padding: 0 11px; font-size: 0.85rem; }
}

/* ============================================================
   Плавающие кнопки: «Наверх» + «Сообщения»
   Один столбец у правого края контента: не накладываются друг
   на друга и не выходят за пределы страницы (выравнивание по
   max-width контента, а не по краю вьюпорта).
   ============================================================ */
#scrollToTop {
    right: max(18px, calc((100% - var(--content-max-width, 1400px)) / 2 + 18px)) !important;
    bottom: 84px !important;
    z-index: 230 !important;
}
.msg-fab {
    right: max(18px, calc((100% - var(--content-max-width, 1400px)) / 2 + 18px)) !important;
    bottom: 24px !important;
    z-index: 230 !important;
}
.msg-fab-hint {
    right: max(76px, calc((100% - var(--content-max-width, 1400px)) / 2 + 80px)) !important;
    z-index: 230 !important;
}
.msg-panel { z-index: 240 !important; }

@media (max-width: 768px) {
    #scrollToTop {
        right: 14px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 138px) !important;
    }
    .msg-fab {
        right: 14px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 78px) !important;
    }
    .msg-fab-hint {
        right: 72px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 78px) !important;
    }
}