/* =====================================================================
   PANEL SIDEBAR POLISH — hover animations + icon tweaks
   Scoped to #sidebar to avoid affecting other UI.
   ===================================================================== */

/* [TBC fix] После CMS 4.3.1 между server-selector (#toolbarDrop) и
   balance-блоком появился лишний отступ — вендорский .content-side-full
   получил margin-top или padding-top по умолчанию. Сжимаем. */
#sidebar #toolbarDrop {
    margin-bottom: 8px !important;
}
#sidebar .content-side.content-side-full {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Uniform hover for ALL nav links / submit-style menu buttons */
#sidebar .nav-main a,
#sidebar .nav-main button,
#sidebar .pay_button_menu,
#sidebar .support_button_menu {
    position: relative;
    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
    border-radius: 4px;
}

#sidebar .nav-main li a:hover,
#sidebar .nav-main li button:hover {
    background-color: rgba(255, 196, 107, 0.08);
    color: #ffc46b !important;
    box-shadow: -2px 0 0 0 #ffc46b inset;
}

/* Icon — only color tint on hover, no movement */
#sidebar .nav-main li a i,
#sidebar .nav-main li button i,
#sidebar .pay_button_menu i,
#sidebar .support_button_menu i {
    transition: color 0.22s ease;
}

/* Pay / Top-up button — golden shimmer */
#sidebar .pay_button_menu {
    overflow: hidden;
}
#sidebar .pay_button_menu::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
#sidebar .pay_button_menu:hover::before {
    transform: translateX(110%);
}
#sidebar .pay_button_menu:hover {
    box-shadow: 0 0 18px -4px rgba(255, 196, 107, 0.55);
    filter: brightness(1.06);
}

/* Support button — softer hover */
#sidebar .support_button_menu:hover {
    box-shadow: 0 0 16px -4px rgba(98, 178, 255, 0.5);
    filter: brightness(1.06);
}

/* Refresh / withdraw / balance pill rows */
#sidebar .balance_info_menu .submit-btn:hover .span_balance,
#sidebar .balance_info_menu .submit-btn:hover .span_balance_blue,
#sidebar .balance_info_menu .submit-btn:hover .span_balance_green {
    filter: brightness(1.12);
}
#sidebar .balance_info_menu .submit-btn {
    transition: filter 0.22s ease;
}

/* Bonus-code: теперь обычный <li><a class="submit-btn btn_bonuscod"> в menu_left.tpl,
   наследует геометрию и hover-стиль от .nav-main a / .nav-main li a:hover автоматически.
   Никаких отдельных override-ов не нужно. */

/* Logout link — symmetric polish */
#sidebar a[href*="logout"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background-color 0.22s ease, color 0.22s ease, transform 0.18s ease;
}
#sidebar a[href*="logout"]:hover {
    background-color: rgba(255, 99, 99, 0.08);
    color: #ff8a8a !important;
}

/* Sidebar icons — slightly heavier weight + golden tint on idle */
#sidebar .nav-main li a > i,
#sidebar .nav-main li button > i {
    font-size: 1.05em;
    width: 1.5em;
    text-align: center;
    color: rgba(255, 196, 107, 0.7);
    transition: color 0.22s ease, transform 0.25s ease;
}

/* Language selector — subtle hover */
#sidebar #change_lang {
    transition: color 0.22s ease, background-color 0.22s ease;
    cursor: pointer;
}
#sidebar #change_lang:hover {
    color: #ffc46b !important;
}

/* Active page indicator (when nav-main li has .active class) */
#sidebar .nav-main li.active > a {
    background-color: rgba(255, 196, 107, 0.12);
    color: #ffc46b !important;
    box-shadow: -3px 0 0 0 #ffc46b inset;
}

/* =====================================================================
   ГРУППИРОВКА САЙДБАРА (Этап 4, Master ТЗ §4)
   Группы: БАЛАНС / ИГРА / НАВИГАЦИЯ
   Микро-заголовки (10px UPPERCASE) + разделители (1px navy-purple)
   ===================================================================== */

/* Группа — узкие padding-ы по краям (отступы вокруг метки теперь
   живут на .sidebar-group-header через margin, чтобы метка
   "прилипала" к своей группе, а не висела между двумя). */
#sidebar .sidebar-group {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-top: none !important;
}
/* Последняя группа (ОБЩЕЕ) перед футером — без нижнего разделителя */
#sidebar .sidebar-group-navigation {
    border-bottom: none !important;
}

/* Микро-заголовок группы — по спеке пользователя:
   color #7A8095 (контрастнее старого #5A5F7A), 10px, ls 1.5px,
   uppercase, 600.
   Margin: 20px top (большой — отделяет от пред. группы),
           8px bottom (маленький — заголовок "прилипает" к своему
           списку, не висит посередине). */
#sidebar .sidebar-group-header {
    color: #7A8095;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 8px;
    padding-left: 4px;
    user-select: none;
}

/* Расстояние между nav-пунктами внутри группы — 4-6px (ТЗ §4) */
#sidebar .sidebar-group .nav-main li {
    margin-bottom: 4px;
}
#sidebar .sidebar-group .nav-main li:last-child {
    margin-bottom: 0;
}

/* =====================================================================
   SERVER-SELECTOR DROPDOWN (#toolbarDrop)
   render_menu_server() из Helpers/render_html.php — кнопка с
   списком серверов (Nostalgia/Retro/Eternal). Меню по умолчанию
   рендерится белым вендорским — приводим к navy как у gear-dropdown
   в карточке аккаунта (Этап 3).
   ===================================================================== */

.dropdown-menu[aria-labelledby="toolbarDrop"] {
    background: var(--tbc-bg-panel-end, #1A1D2E) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: var(--tbc-radius-card, 6px) !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    padding: 6px !important;
    margin-top: 6px !important;
    min-width: 200px;
}

/* Заголовок группы серверов ("Lineage2") если есть несколько игр */
.dropdown-menu[aria-labelledby="toolbarDrop"] .dropdown-header {
    color: #7A8095 !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 12px 6px !important;
    margin: 0;
}

/* Пункт-сервер */
.dropdown-menu[aria-labelledby="toolbarDrop"] .dropdown-item {
    display: block;
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: var(--tbc-text-primary, #FFFFFF) !important;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.3px;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    margin: 1px 0;
    transition: all 0.18s ease;
    box-shadow: none !important;
}
.dropdown-menu[aria-labelledby="toolbarDrop"] .dropdown-item:hover,
.dropdown-menu[aria-labelledby="toolbarDrop"] .dropdown-item:focus {
    background: rgba(245, 166, 35, 0.10) !important;
    color: var(--tbc-accent-cta, #F5A623) !important;
    outline: none;
}
/* Активный сервер (текущий) — gold-tinted с inset-индикатором слева */
.dropdown-menu[aria-labelledby="toolbarDrop"] .dropdown-item.active {
    background: rgba(245, 166, 35, 0.15) !important;
    color: var(--tbc-accent-cta, #F5A623) !important;
    box-shadow: -3px 0 0 0 var(--tbc-accent-cta, #F5A623) inset !important;
    font-weight: 600;
}

/* Вендорский .ml-10 wrapper внутри dropdown-menu сбиваем — у нас
   своя сетка padding-ов */
.dropdown-menu[aria-labelledby="toolbarDrop"] > div.ml-10 {
    margin-left: 0 !important;
}

/* =====================================================================
   LANGUAGE SELECTOR (sidebar footer)
   Bootstrap-dropdown в стиле server-selector. Native <select> заменён
   на <button>+<div class="dropdown-menu"> чтобы стилизовать выпадашку
   под navy-палитру (native <select> options использует OS-styling).
   ===================================================================== */

#sidebar .lang-selector-wrap {
    position: relative;
    margin-top: 4px;
    margin-bottom: 14px;
}
#sidebar .lang-selector-label-text {
    display: block;
    color: var(--tbc-text-muted, #5A5F7A);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
    padding-left: 4px;
}

#sidebar .lang-selector-toggle {
    background: var(--tbc-bg-card, #252942);
    border: 1px solid var(--tbc-border-default, #2F3454);
    color: var(--tbc-text-primary, #FFFFFF);
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    text-align: left;
}
#sidebar .lang-selector-toggle:hover,
#sidebar .lang-selector-toggle[aria-expanded="true"] {
    border-color: var(--tbc-accent-cta, #F5A623);
    background: var(--tbc-bg-card-hover, #2C3050);
}
#sidebar .lang-selector-toggle:focus {
    outline: none;
    box-shadow: var(--tbc-shadow-focus, 0 0 0 2px rgba(245, 166, 35, 0.5));
}
#sidebar .lang-selector-current {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#sidebar .lang-selector-caret {
    color: var(--tbc-text-muted, #5A5F7A);
    font-size: 12px;
    margin-left: 6px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    /* dropup → стрелка по дефолту смотрит ВВЕРХ (показывает куда
       откроется меню). При закрытом — вверх (rotate 180). При открытом
       — вниз (rotate 0). */
    transform: rotate(180deg);
}
#sidebar .lang-selector-toggle[aria-expanded="true"] .lang-selector-caret {
    transform: rotate(0deg);
    color: var(--tbc-accent-cta, #F5A623);
}

/* Меню — навь, как у server-selector.
   position: fixed !important — выходим из любого overflow:hidden
   parent (sidebar / SimpleBar клиппят). Popper.js с data-boundary
   "window" уже считает позицию относительно viewport — fixed
   позиционирование делает её правильной. */
.dropdown-menu.lang-selector-menu {
    background: var(--tbc-bg-panel-end, #1A1D2E) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: var(--tbc-radius-card, 6px) !important;
    box-shadow:
        0 -8px 24px rgba(0, 0, 0, 0.5),  /* shadow вверх */
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    padding: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important; /* gap между тогглом и меню при dropup */
    min-width: 180px !important;
    max-height: 280px;
    overflow-y: auto;
    z-index: 9999;
    /* Custom scrollbar для тёмной темы */
    scrollbar-width: thin;
    scrollbar-color: var(--tbc-accent-cta, #F5A623) transparent;
}
.dropdown-menu.lang-selector-menu.show {
    /* fixed после Popper-расчёта — viewport-relative позиционирование
       пробивает все overflow:hidden ancestor контейнеры */
    position: fixed !important;
}
.dropdown-menu.lang-selector-menu::-webkit-scrollbar {
    width: 6px;
}
.dropdown-menu.lang-selector-menu::-webkit-scrollbar-track {
    background: transparent;
}
.dropdown-menu.lang-selector-menu::-webkit-scrollbar-thumb {
    background: var(--tbc-border-default, #2F3454);
    border-radius: 3px;
}
.dropdown-menu.lang-selector-menu::-webkit-scrollbar-thumb:hover {
    background: var(--tbc-accent-cta, #F5A623);
}
.dropdown-menu.lang-selector-menu .dropdown-item {
    display: block;
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: var(--tbc-text-primary, #FFFFFF) !important;
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.3px;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    margin: 1px 0;
    transition: all 0.18s ease;
    box-shadow: none !important;
    text-decoration: none !important;
}
.dropdown-menu.lang-selector-menu .dropdown-item:hover,
.dropdown-menu.lang-selector-menu .dropdown-item:focus {
    background: rgba(245, 166, 35, 0.10) !important;
    color: var(--tbc-accent-cta, #F5A623) !important;
    outline: none;
}
.dropdown-menu.lang-selector-menu .dropdown-item.active {
    background: rgba(245, 166, 35, 0.15) !important;
    color: var(--tbc-accent-cta, #F5A623) !important;
    box-shadow: -3px 0 0 0 var(--tbc-accent-cta, #F5A623) inset !important;
    font-weight: 600;
}

/* =====================================================================
   MENU BADGE (Discord/Telegram-style счётчик уведомлений справа)
   Используется для пунктов вида "Склад [19]" — текст обычного
   начертания, число в скруглённой пилюле справа.
   ===================================================================== */

#sidebar .nav-main li a.menu-item-with-badge {
    display: flex !important;
    align-items: center;
    padding-right: 12px !important; /* место под badge справа */
}
#sidebar .nav-main li a.menu-item-with-badge > .sidebar-mini-hide {
    flex: 1;
    font-weight: normal !important; /* было: жирно у Склад — теперь обычное */
}
#sidebar .nav-main li a.menu-item-with-badge .menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 7px;
    border-radius: 10px;
    background: var(--tbc-bg-card, #252942);
    color: var(--tbc-text-secondary, #8B90B0);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    margin-left: 8px;
    border: 1px solid var(--tbc-border-default, #2F3454);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* На hover пункта badge становится золотым акцентом */
#sidebar .nav-main li a.menu-item-with-badge:hover .menu-badge {
    background: rgba(245, 166, 35, 0.15);
    color: var(--tbc-accent-cta, #F5A623);
    border-color: rgba(245, 166, 35, 0.4);
}

/* [TBC fix] render_menu() (Helpers/render_html.php) рендерит вендорские
   <li class="nav-main-heading"> внутри списка — старая внутренняя
   группировка панели. У нас своя группировка (БАЛАНС/ИГРА/ОБЩЕЕ),
   вендорские заголовки создают лишние gaps. Прячем. */
#sidebar .nav-main li.nav-main-heading,
#sidebar .nav-main-heading {
    display: none !important;
}

/* [TBC fix] auth.menu.php содержит пункты с class="d-none" на <a>
   (Магазин/Поддержка/Перевести в игру/Баланс между Рейтинг и Настройки).
   Сам <li> остаётся видимым → создаёт пустую дырку. Прячем <li>
   целиком если все его <a> с d-none.
   :has() поддерживается всеми современными браузерами. */
#sidebar .nav-main li:has(> a.d-none),
#sidebar .nav-main li:has(> a[class*="d-none"]) {
    display: none !important;
}

/* =====================================================================
   FOOTER САЙДБАРА (Этап 4, Master ТЗ §4)
   - Email: НЕ CAPS, мягкий muted цвет (агрессивный CAPS был раздражающим)
   - Logout: симметричный полированный link
   ===================================================================== */

#sidebar .sidebar-footer {
    border-top: 1px solid var(--tbc-border-default, #2F3454) !important;
    padding-top: 16px !important;
}

#sidebar .sidebar-user-email {
    color: var(--tbc-text-secondary, #8B90B0);
    font-size: 12px;
    text-align: center;
    padding: 6px 8px 10px;
    margin: 0 0 10px;
    word-break: break-all;
    text-transform: none !important;
    font-weight: 400;
    line-height: 1.3;
    /* НЕ uppercase — email-адреса в CAPS читаются плохо и выглядят
       агрессивно (ТЗ §2 "что требует доработки") */
}

#sidebar ul.sidebar-logout-wrap {
    margin-bottom: 16px;
    padding-left: 0;
    list-style: none;
}
/* Принудительно навешиваем padding под absolute-icon (.nav-main a > i
   у вендора left:18px). Без этого текст "Выйти" наползал на иконку —
   вендорский .nav-main a { padding-left:40px } почему-то проигрывал
   по специфичности кому-то ещё. */
#sidebar .nav-main li > a.sidebar-logout-link {
    padding: 9px 18px 9px 40px !important;
    display: block !important;
    position: relative;
}
/* Logout-пункт наследует ВСЁ от .nav-main li a (icon sizing,
   gold-tint, hover-полоса) — здесь только семантический override:
   на hover иконка/полоса красные (destructive), не золотые. */
#sidebar .nav-main li > a.sidebar-logout-link:hover {
    background-color: rgba(231, 76, 60, 0.08) !important;
    color: #ff8a8a !important;
    box-shadow: -2px 0 0 0 var(--tbc-accent-error, #E74C3C) inset !important;
}
#sidebar .nav-main li > a.sidebar-logout-link:hover > i {
    color: var(--tbc-accent-error, #E74C3C) !important;
    filter: drop-shadow(0 0 4px rgba(231, 76, 60, 0.45));
}

@media (prefers-reduced-motion: reduce) {
    #sidebar .nav-main a,
    #sidebar .nav-main button,
    #sidebar .nav-main li a i,
    #sidebar .pay_button_menu,
    #sidebar .pay_button_menu::before,
    #sidebar .support_button_menu,
    #sidebar .sidebar-logout-link,
    #sidebar a[href*="logout"] {
        transition: none;
        animation: none;
    }
}