/* ============================================================
   RGG — UI-кит и общие компоненты
   Единый стиль для всего интерфейса: карточки, кнопки, поля,
   табы, бейджи, таблицы, модальные окна и тосты.
   Характер скина: тёплый светлый + оранжевый акцент,
   ПОДЧЁРКИВАЮЩИЕСЯ табы (в отличие от залитых «пилюль» в rg).
   Работает на токенах variables.css.
   ============================================================ */

/* ---------- Карточки ---------- */
.rg-card {
    background: var(--rg-surface);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-xs);
}
.rg-card--pad { padding: 22px; }
.rg-card--flat { box-shadow: none; }
.rg-card--accent { border-left: 4px solid rgb(var(--accent-primary)); }

/* Легаси-карточка → светлая тёплая */
.strict-card {
    background: var(--rg-surface) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-xs) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.strict-card:hover {
    box-shadow: var(--rg-shadow-sm) !important;
    transform: none !important;
    border-color: var(--rg-border-strong) !important;
}

/* ---------- Заголовки / секции ---------- */
.rg-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--rg-text);
    margin-bottom: 14px;
}
.rg-section-title .material-icons-outlined { color: rgb(var(--accent-primary-dark)); }
.rg-muted { color: var(--rg-text-muted); }
.rg-divider { height: 1px; background: var(--rg-border); margin: 16px 0; }
.accent-text {
    background: linear-gradient(92deg, rgb(var(--accent-primary)), rgb(var(--accent-purple)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Кнопки ---------- */
.rg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--rg-radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-duration) ease, border-color var(--transition-duration) ease, color var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
}
.rg-btn .material-icons-outlined { font-size: 20px; }

.rg-btn--primary { background: rgb(var(--accent-primary)); color: #fff; box-shadow: 0 4px 12px rgb(var(--accent-primary) / 0.25); }
.rg-btn--primary:hover { background: rgb(var(--accent-primary-dark)); box-shadow: var(--rg-shadow-accent); }

.rg-btn--secondary { background: var(--rg-surface); color: var(--rg-text-secondary); border-color: var(--rg-border-strong); }
.rg-btn--secondary:hover { background: var(--rg-surface-soft); color: var(--rg-text); }

.rg-btn--ink { background: rgb(var(--rg-ink)); color: rgb(var(--rg-ink-text)); }
.rg-btn--ink:hover { background: rgb(var(--rg-ink-2)); }

.rg-btn--ghost { background: transparent; color: var(--rg-text-secondary); }
.rg-btn--ghost:hover { background: var(--rg-surface-soft); color: var(--rg-text); }

.rg-btn--danger { background: rgb(var(--color-danger)); color: #fff; }
.rg-btn--danger:hover { background: rgb(var(--color-danger-strong)); }

.rg-btn--sm { height: 36px; padding: 0 14px; font-size: 0.82rem; }
.rg-btn--block { width: 100%; }

/* Легаси-кнопки → оранжевые аккуратные */
.strict-button {
    background: rgb(var(--accent-primary)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--rg-radius-sm) !important;
    box-shadow: 0 4px 12px rgb(var(--accent-primary) / 0.22);
    transition: background var(--transition-duration) ease, box-shadow var(--transition-duration) ease !important;
}
.strict-button:hover { background: rgb(var(--accent-primary-dark)) !important; box-shadow: var(--rg-shadow-accent) !important; }

.strict-button-secondary {
    background: var(--rg-surface) !important;
    border: 1px solid var(--rg-border-strong) !important;
    color: var(--rg-text-secondary) !important;
}
.strict-button-secondary:hover { background: var(--rg-surface-soft) !important; border-color: var(--rg-border-strong) !important; }

/* ---------- Поля ввода ---------- */
.rg-input,
.rg-select,
.rg-textarea {
    width: 100%;
    background: var(--rg-surface);
    border: 1px solid var(--rg-border-strong);
    border-radius: var(--rg-radius-sm);
    padding: 11px 14px;
    font-size: 0.9rem;
    color: var(--rg-text);
    outline: none;
    transition: border-color var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
}
.rg-input:focus,
.rg-select:focus,
.rg-textarea:focus { border-color: rgb(var(--accent-primary)); box-shadow: var(--rg-focus); }
.rg-input::placeholder,
.rg-textarea::placeholder { color: var(--rg-text-faint); }

.rg-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rg-text-secondary);
    margin-bottom: 6px;
}

/* ---------- Бейджи ---------- */
.rg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--rg-radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    background: var(--rg-surface-soft);
    color: var(--rg-text-secondary);
}
.rg-badge--primary { background: var(--rg-primary-soft); color: rgb(var(--accent-primary-dark)); }
.rg-badge--success { background: var(--rg-success-soft); color: rgb(var(--color-success)); }
.rg-badge--danger { background: var(--rg-danger-soft); color: rgb(var(--color-danger)); }
.rg-badge--warning { background: var(--rg-warning-soft); color: rgb(var(--color-warning)); }

/* ---------- Табы: ПОДЧЁРКИВАНИЕ ---------- */
.rg-tabs {
    display: flex;
    gap: 4px;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--rg-border);
    border-radius: 0;
    overflow-x: auto;
}
.rg-tab {
    flex: 1;
    white-space: nowrap;
    position: relative;
    padding: 11px 14px;
    border: none;
    background: transparent;
    border-radius: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--rg-text-muted);
    cursor: pointer;
    transition: color var(--transition-duration) ease;
}
.rg-tab::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background var(--transition-duration) ease;
}
.rg-tab:hover { color: var(--rg-text); }
.rg-tab.active,
.rg-tab[aria-selected="true"] { background: transparent; color: rgb(var(--accent-primary-dark)); box-shadow: none; }
.rg-tab.active::after,
.rg-tab[aria-selected="true"]::after { background: rgb(var(--accent-primary)); }

/* Легаси-табы приводим к тому же подчёркивающему виду */
.strict-tabs,
.activity-tablist {
    background: transparent !important;
    border-bottom: 1px solid var(--rg-border);
    border-radius: 0 !important;
}

.strict-tab,
.tourney-tab,
.compact-tab,
.profile-tab {
    position: relative;
    border: none;
    background: transparent !important;
    color: var(--rg-text-muted) !important;
    cursor: pointer;
    border-radius: 0 !important;
    padding: 11px 14px;
    font-weight: 700;
    transition: color var(--transition-duration) ease;
}
.strict-tab::after,
.tourney-tab::after,
.compact-tab::after,
.profile-tab::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background var(--transition-duration) ease;
}
.strict-tab:hover,
.tourney-tab:hover,
.compact-tab:hover,
.profile-tab:hover { color: var(--rg-text) !important; }

.strict-tab.active,
.tourney-tab.active,
.content-filter__item--active,
.compact-tab.active,
.profile-tab.active,
.profile-tab[aria-selected="true"] {
    background: transparent !important;
    color: rgb(var(--accent-primary-dark)) !important;
    box-shadow: none !important;
}
.strict-tab.active::after,
.tourney-tab.active::after,
.content-filter__item--active::after,
.compact-tab.active::after,
.profile-tab.active::after,
.profile-tab[aria-selected="true"]::after { background: rgb(var(--accent-primary)); }

/* Контейнеры табов внутри модалок — мягкая подложка */
.tourney-tabs-nav {
    background: var(--rg-surface-soft) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: var(--rg-radius-sm);
    padding: 4px;
}
.tourney-tabs-nav .tourney-tab { border-radius: var(--rg-radius-xs) !important; padding: 9px 12px; }
.tourney-tabs-nav .tourney-tab::after { display: none; }
.tourney-tabs-nav .tourney-tab.content-filter__item--active {
    background: rgb(var(--accent-primary)) !important;
    color: #fff !important;
}

/* ---------- Таблицы ---------- */
.rg-table-wrap { overflow-x: auto; border: 1px solid var(--rg-border); border-radius: var(--rg-radius); }
.rg-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.rg-table th {
    text-align: left;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rg-text-muted);
    background: var(--rg-surface-soft);
    padding: 12px 14px;
    border-bottom: 1px solid var(--rg-border);
}
.rg-table td { padding: 12px 14px; border-bottom: 1px solid var(--rg-border); color: var(--rg-text); }
.rg-table tbody tr:nth-child(even) { background: rgb(var(--color-card-soft) / 0.5); }
.rg-table tbody tr:hover { background: var(--rg-primary-soft-2); }
.rg-table tbody tr:last-child td { border-bottom: none; }

/* Легаси турнирные таблицы */
.tourney-table thead th {
    background: var(--rg-surface-soft) !important;
    color: var(--rg-text-muted) !important;
    border-bottom: 1px solid var(--rg-border) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tourney-table tbody td {
    color: var(--rg-text) !important;
    border-bottom: 1px solid var(--rg-border) !important;
}
.tourney-table tbody tr:nth-child(even) { background: rgb(var(--color-card-soft) / 0.5); }
.tourney-table tbody tr:hover { background: var(--rg-primary-soft-2) !important; }
.tourney-table a { color: var(--rg-text); }
.tourney-table a:hover { color: rgb(var(--accent-primary-dark)); }
.tourney-info-table td { border-bottom: 1px solid var(--rg-border) !important; }

/* ---------- Пустое состояние ---------- */
.rg-empty { text-align: center; padding: 44px 20px; color: var(--rg-text-muted); font-size: 0.92rem; }
.rg-empty .material-icons-outlined { font-size: 44px; opacity: 0.45; display: block; margin-bottom: 8px; color: rgb(var(--accent-primary)); }

/* ============================================================
   МОДАЛЬНЫЕ ОКНА — единый вид
   ============================================================ */
.modal-overlay {
    background: rgb(18 12 8 / 0.58) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 20px;
}
.modal-overlay.hidden { display: none !important; }

.modal-content,
.modal-overlay > .strict-card {
    background: var(--rg-surface) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: var(--rg-radius-xl) !important;
    box-shadow: var(--rg-shadow-lg) !important;
    color: var(--rg-text);
}
.modal-content { max-height: 90vh; }

/* Шапки модалок — тёплая линия и контрастный заголовок */
.modal-content h2,
.modal-content h3 { color: var(--rg-text) !important; }
.modal-content .border-t,
.modal-content .border-b,
.modal-content .border-l,
.modal-content .border-r,
.modal-content [class*="border-b"],
.modal-content [class*="border-t"] { border-color: var(--rg-border) !important; }

/* Кнопки закрытия — единый вид во всех модалках */
.modal-overlay button[aria-label*="Закрыть"],
.modal-content #closeLoginModal,
.modal-content #closeTeamModal,
.modal-content #closeNotifyModal,
.modal-content #closeNotifyAllModal,
.modal-content #closeProfileModal,
.modal-content #closeActivityModal,
.modal-content #closeDraftModal,
.modal-content #closeSubscriptionsModal,
.modal-content #closeStreamModal {
    color: var(--rg-text-muted) !important;
    transition: color var(--transition-duration) ease;
}
.modal-overlay button[aria-label*="Закрыть"]:hover,
.modal-content #closeLoginModal:hover,
.modal-content #closeTeamModal:hover,
.modal-content #closeNotifyModal:hover,
.modal-content #closeNotifyAllModal:hover,
.modal-content #closeProfileModal:hover,
.modal-content #closeActivityModal:hover,
.modal-content #closeDraftModal:hover,
.modal-content #closeSubscriptionsModal:hover,
.modal-content #closeStreamModal:hover { color: rgb(var(--accent-primary-dark)) !important; }

/* Инлайновый «золотой» хардкод старого скина → нейтральный */
.modal-overlay button[style*="FDB927"] { color: var(--rg-text-muted) !important; }
.modal-overlay button[style*="FDB927"]:hover { color: rgb(var(--accent-primary-dark)) !important; }

/* Активные вкладки внутри модалок */
.modal-content .compact-tab.active,
.modal-content .profile-tab.active { color: rgb(var(--accent-primary-dark)) !important; }

/* ============================================================
   ТОСТЫ (rgdevAlert) — единый вид
   ============================================================ */
#rgdevToastContainer { top: calc(var(--header-height) + 0.75rem); right: 1rem; }
@media (min-width: 769px) {
    #rgdevToastContainer { top: calc(var(--header-total-height) + 0.75rem); max-height: calc(100vh - var(--header-total-height) - 1.5rem); }
}

#rgdevToastContainer .rgdev-toast {
    background: var(--rg-surface) !important;
    border: 1px solid var(--rg-border) !important;
    border-left: 4px solid var(--rg-border-strong) !important;
    border-radius: var(--rg-radius) !important;
    box-shadow: var(--rg-shadow-lg) !important;
}
#rgdevToastContainer .rgdev-toast.rgdev-toast-success { border-left-color: rgb(var(--color-success)) !important; }
#rgdevToastContainer .rgdev-toast.rgdev-toast-error { border-left-color: rgb(var(--color-danger)) !important; }
#rgdevToastContainer .rgdev-toast.rgdev-toast-info { border-left-color: rgb(var(--accent-primary)) !important; }
#rgdevToastContainer .rgdev-toast.rgdev-toast-warning { border-left-color: rgb(var(--color-warning-light)) !important; }

#rgdevToastContainer .rgdev-toast-title { color: var(--rg-text) !important; }
#rgdevToastContainer .rgdev-toast-message { color: var(--rg-text-secondary) !important; }
#rgdevToastContainer .rgdev-toast-link { color: rgb(var(--accent-primary-dark)) !important; }
#rgdevToastContainer .rgdev-toast-close { color: var(--rg-text-muted) !important; }
#rgdevToastContainer .rgdev-toast-close:hover { color: var(--rg-text) !important; }
#rgdevToastContainer::-webkit-scrollbar-thumb { background: var(--rg-border-strong); }

/* ---------- Смена лиги / легаси-панели ---------- */
.league-menu-btn {
    color: rgb(var(--accent-primary-dark)) !important;
    background: var(--rg-primary-soft) !important;
    border: 1px solid rgb(var(--accent-primary) / 0.35) !important;
    border-radius: var(--rg-radius-sm) !important;
}
.league-menu-btn:hover { background: rgb(var(--accent-primary) / 0.20) !important; }
.league-menu-panel {
    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;
}
.league-switcher-btn { background: rgb(var(--accent-primary)) !important; color: #fff !important; border-radius: var(--rg-radius) !important; }
.league-switcher-btn:hover { background: rgb(var(--accent-primary-dark)) !important; }
.league-switcher-panel { background: var(--rg-surface) !important; border: 1px solid var(--rg-border) !important; }
.league-switcher-item { color: var(--rg-text-secondary) !important; }
.league-switcher-item:hover { background: var(--rg-surface-soft) !important; }
.league-switcher-item.active { background: rgb(var(--accent-primary)) !important; color: #fff !important; }

/* ---------- Скроллбары ---------- */
.sidebar::-webkit-scrollbar,
.search-results::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb { background: var(--rg-border-strong); border-radius: 4px; }
.sidebar::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track { background: transparent; }

/* ---------- Прогресс ---------- */
.strict-progress { background: var(--rg-border) !important; }
.strict-progress-bar { background: linear-gradient(90deg, rgb(var(--accent-primary)), rgb(var(--accent-purple))) !important; }

/* ---------- Трансляции: миниатюра в цветах сайта ---------- */
.stream-thumb {
    background:
        radial-gradient(120% 120% at 18% 12%, rgb(var(--accent-primary-light) / .55), transparent 55%),
        linear-gradient(135deg, rgb(var(--accent-primary)) 0%, rgb(var(--accent-primary-deep)) 100%);
}
a.block:hover .stream-thumb {
    background:
        radial-gradient(120% 120% at 18% 12%, rgb(var(--accent-primary-light) / .72), transparent 55%),
        linear-gradient(135deg, rgb(var(--accent-primary-dark)) 0%, rgb(var(--accent-primary-deepest)) 100%);
}
.stream-thumb .material-icons-outlined { color: rgba(255, 255, 255, .92); }