/* ========================================
   UI Kit - Navigation Bar
   ======================================== */

/* ========================================
   Desktop Navigation (Fixed + Glassmorphism)
   ======================================== */

.gc-desktop-nav {
    /* Позиционирование */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    
    /* Внутренние отступы */
    padding: var(--spacing-sm) 0; /* 8px сверху/снизу */
    
    /* Glassmorphism эффект */
    background: rgba(var(--bg-rgb), 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Border для акцента */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Тень для глубины */
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    
    /* Анимация при прокрутке */
    transition: all 0.3s ease;
}

/* Dark theme */
[data-theme="dark"] .gc-desktop-nav {
    background: rgba(28, 28, 30, 0.7) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light theme */
[data-theme="light"] .gc-desktop-nav {
    background: rgba(255, 255, 255, 0.7) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-desktop-nav {
        background: rgba(255, 255, 255, 0.7) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    }
}

/* Fallback для браузеров без поддержки backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .gc-desktop-nav {
        background: var(--bg-content-main) !important;
    }
}

/* Ограничиваем ширину контента в navbar */
.gc-desktop-nav .container-fluid {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Уменьшенный размер текста в десктопном navbar */
.gc-desktop-nav .navbar-nav {
    gap: var(--spacing-xs); /* Расстояние между пунктами */
}

.gc-desktop-nav .navbar-nav .nav-link {
    font-size: var(--font-size-mdl); 
    padding: var(--spacing-xs) var(--spacing-sm); /* Компактные отступы */
    font-weight: 600;
}

/* Активный пункт навигации на десктопе */
.gc-desktop-nav .navbar-nav .nav-link.active {
    color: var(--font-primary);
    background-color: var(--bg-main);
    border-radius: var(--radius-md);
}

/* Логотип компактнее */
.gc-desktop-nav .navbar-brand {
    padding-top: var(--spacing-2xs);
    padding-bottom: var(--spacing-2xs);
}

.gc-desktop-nav .navbar-brand img {
    max-height: 32px; /* Чуть меньше логотип */
}

/* Отступ для контента под фиксированным navbar */
@media (min-width: 992px) {
    body {
        padding-top: 56px; /* Высота navbar + отступы */
    }
}

/* ========================================
   Mobile Navigation Bar
   ======================================== */

/* ========================================
   Floating Search Bar (Glassmorphism)
   ======================================== */

.gc-floating-search {
    position: fixed;
    bottom: calc(var(--spacing-sm) + 70px); /* Над нижним навбаром (8px + 70px высота navbar) */
    left: var(--spacing-sm); /* 8px от левого края */
    right: var(--spacing-sm); /* 8px от правого края */
    z-index: 1025; /* Ниже навбара (1030), но выше контента */
}

.gc-floating-search-inner {
    /* Glassmorphism эффект */
    background: rgba(var(--bg-rgb), 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Border для акцента */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Скругление */
    border-radius: var(--radius-full); /* Полное скругление */
    
    /* Внутренние отступы */
    padding: var(--spacing-sm) var(--spacing-md);
    
    /* Flexbox для иконки + input */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    
    /* Тень для глубины */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    
    /* Анимация */
    transition: all 0.3s ease;
}

.gc-floating-search-inner:focus-within {
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.gc-floating-search-inner i {
    color: var(--font-secondary);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.gc-floating-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--font-primary);
    font-size: var(--font-size-base);
    padding: 0;
}

.gc-floating-search-input::placeholder {
    color: var(--font-tertiary);
}

/* Dark theme */
[data-theme="dark"] .gc-floating-search-inner {
    background: rgba(28, 28, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light theme */
[data-theme="light"] .gc-floating-search-inner {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-floating-search-inner {
        background: rgba(255, 255, 255, 0.7) !important;
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
    }
}

/* ========================================*/

/* Мобильный навбар с эффектом glassmorphism */
.gc-mobile-nav-top {
    /* Позиционирование */
    position: fixed;
    top: var(--spacing-sm); /* 8px от верха */
    left: var(--spacing-sm); /* 8px от левого края */
    right: var(--spacing-sm); /* 8px от правого края */
    z-index: 1030;
    
    /* Внутренние отступы */
    padding: var(--spacing-sm) var(--spacing-md); /* 8px сверху/снизу, 12px слева/справа */
    
    /* Скругление */
    border-radius: var(--radius-xl) !important; /* 16px - увеличенное скругление */
    overflow: hidden !important; /* КРИТИЧНО: обрезаем всё содержимое по border-radius */
    
    /* Glassmorphism эффект */
    background: rgba(var(--bg-rgb), 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Border для акцента */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    /* Тень для глубины */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    
    /* Анимация при прокрутке */
    transition: all 0.3s ease;
}

/* Контейнер контента мобильного навбара */
.gc-nav-content {
    /* Flex структура для управления gap между gc-nav-header и gc-tabs-container */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm); /* 8px между gc-nav-header и gc-tabs-container */
}

/* ========================================
   Градиентные overlay слои (Fade-эффект)
   ОТКЛЮЧЕНО ПО ЗАПРОСУ
   ======================================== */

/* ЗАКОММЕНТИРОВАНО: Градиенты на мобильных устройствах
@media (max-width: 991px) {
    [data-theme="dark"] body::before {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 100px;
        background: linear-gradient(
            to bottom,
            rgba(28, 28, 30, 0.9) 0%,
            rgba(28, 28, 30, 0.6) 40%,
            rgba(28, 28, 30, 0.3) 70%,
            rgba(28, 28, 30, 0) 100%
        );
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0) 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0) 100%
        );
        pointer-events: none;
        z-index: 1020;
    }
    
    [data-theme="dark"] body::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 90px;
        background: linear-gradient(
            to top,
            rgba(28, 28, 30, 0.9) 0%,
            rgba(28, 28, 30, 0.6) 40%,
            rgba(28, 28, 30, 0.3) 70%,
            rgba(28, 28, 30, 0) 100%
        );
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        mask-image: linear-gradient(
            to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0) 100%
        );
        -webkit-mask-image: linear-gradient(
            to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0) 100%
        );
        pointer-events: none;
        z-index: 1020;
    }
    
    [data-theme="light"] body::before {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.6) 40%,
            rgba(255, 255, 255, 0.3) 70%,
            rgba(255, 255, 255, 0) 100%
        );
    }
    
    [data-theme="light"] body::after {
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.6) 40%,
            rgba(255, 255, 255, 0.3) 70%,
            rgba(255, 255, 255, 0) 100%
        );
    }
    
    body.no-mobile-top-gradient::before {
        display: none !important;
    }
}
*/

/* ========================================*/

/* Скрыть на десктопе */
@media (min-width: 992px) {
    .gc-mobile-nav-top {
        display: none !important;
    }
}

/* Dark theme */
[data-theme="dark"] .gc-mobile-nav-top {
    background: rgba(28, 28, 30, 0.7) !important; /* Темный полупрозрачный */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Light theme */
[data-theme="light"] .gc-mobile-nav-top {
    background: rgba(255, 255, 255, 0.7) !important; /* Светлый полупрозрачный */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-mobile-nav-top {
        background: rgba(255, 255, 255, 0.7) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
    }
}

/* Улучшение читаемости контента внутри navbar */
.gc-mobile-nav-top .nav-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-weight: 700;
    flex-shrink: 1; /* Может сжиматься */
    white-space: nowrap; /* Не переносится */
    overflow: hidden; /* Скрывает текст за пределами */
    text-overflow: ellipsis; /* Показывает ... */
    min-width: 0; /* Важно для работы ellipsis в flex */
    max-width: 200px; /* Максимальная ширина для раннего обрезания */
}

/* Иконки */
.gc-mobile-nav-top .gc-nav-icon {
    background: rgba(var(--bg-rgb), 0);
    border-radius: 50%; /* Круглые кнопки */
    padding: var(--spacing-xs);
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--font-primary) !important; /* Переопределяем .btn-link (акцентный цвет) */
}

.gc-mobile-nav-top .gc-nav-icon:hover {
    background: rgba(var(--bg-rgb), 0.5);
    transform: scale(1.05);
    color: var(--font-primary) !important; /* Сохраняем цвет при hover */
}

.gc-mobile-nav-top .gc-nav-icon:active,
.gc-mobile-nav-top .gc-nav-icon:focus {
    color: var(--font-primary) !important; /* Сохраняем цвет при активации */
}

/* Дропдаун в навбаре */
.gc-mobile-nav-top .gc-dropdown-toggle {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.gc-mobile-nav-top .gc-dropdown-toggle::after {
    display: none !important;
    content: none !important;
}

/* Убираем border и псевдоэлементы у элементов меню в навбаре */
.gc-mobile-nav-top .gc-dropdown-menu .gc-dropdown-item,
.gc-mobile-nav-top .gc-dropdown-menu button.gc-dropdown-item,
.gc-mobile-nav-top .gc-dropdown-menu a.gc-dropdown-item {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.gc-mobile-nav-top .gc-dropdown-menu .gc-dropdown-item::after,
.gc-mobile-nav-top .gc-dropdown-menu .gc-dropdown-item::before,
.gc-mobile-nav-top .gc-dropdown-menu button::after,
.gc-mobile-nav-top .gc-dropdown-menu button::before {
    display: none !important;
    content: none !important;
}

/* ПРИМЕЧАНИЕ: Отступы .container-fluid внутри навбаров переопределены в layout.css */

/* Navbar Level 1 (с табами) - увеличенные верхний и нижний отступы */
.gc-mobile-nav-top:has(.gc-tabs-container) {
    padding-top: var(--spacing-sm) !important; /* 12px - симметрично с bottom */
    padding-bottom: var(--spacing-md) !important; /* 12px - больше пространства для табов */
}

/* Navbar Level 2 (без табов) - полное скругление */
.gc-mobile-nav-top:not(:has(.gc-tabs-container)) {
    border-radius: var(--radius-full) !important; /* Полное скругление для level 2 */
}

/* Структура верхнего navbar */
.gc-mobile-nav-top .gc-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 40px; /* Минимальная высота для центрирования */
}

/* Отступ между gc-nav-header и gc-tabs-container управляется gap родителя */

.gc-mobile-nav-top .gc-nav-spacer {
    flex: 1; /* Занимают равное пространство */
    display: flex;
    align-items: center;
    gap: 4px; /* Отступ между кнопками */
}

.gc-mobile-nav-top .gc-nav-spacer:first-child {
    justify-content: flex-start; /* Левый - прижат к левому краю */
}

.gc-mobile-nav-top .gc-nav-spacer:last-child {
    justify-content: flex-end; /* Правый - прижат к правому краю */
}

/* Контейнер табов */
.gc-mobile-nav-top .gc-tabs-container {
    width: calc(100% + var(--spacing-md) * 2); /* Растягиваем на ширину отступов */
    margin: 0 calc(var(--spacing-md) * -1); /* Компенсируем отступы навбара (-12px) */
    padding: 0; /* БЕЗ padding - он будет у scrollable списка */
    /* overflow и border-radius НЕ нужны - обрезает родитель (nav) */
}

.gc-mobile-nav-top .gc-tabs {
    display: flex;
    gap: var(--spacing-md);
    width: 100%;
    padding: 0 var(--spacing-md); /* 12px отступы для первого/последнего таба */
    border-radius: 0 !important; /* Убираем скругление у контейнера */
}

/* Скроллируемые табы (для длинных названий, например в профиле) */
.gc-mobile-nav-top .gc-tabs-scrollable {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling на iOS */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-behavior: auto; /* Мгновенная прокрутка по умолчанию, без анимации */
    width: 100%;
    flex-wrap: nowrap; /* Не переносим табы на новую строку */
    padding: 0 var(--spacing-md); /* 12px отступы для первого/последнего таба */
    opacity: 0; /* Скрываем до инициализации JS */
    transition: opacity 0.15s ease; /* Плавное появление */
}

/* Показываем после инициализации JS */
.gc-mobile-nav-top .gc-tabs-scrollable.initialized {
    opacity: 1;
}

/* Скрываем скроллбар в webkit */
.gc-mobile-nav-top .gc-tabs-scrollable::-webkit-scrollbar {
    display: none;
}

/* Для скроллируемых табов - элементы растягиваются, если помещаются */
.gc-mobile-nav-top .gc-tabs-scrollable .gc-tab-item {
    flex: 1 1 0; /* Растягиваем равномерно, если помещаются */
    min-width: fit-content; /* Минимум по содержимому (для скролла) */
}

/* Обычные табы растягиваются равномерно */
.gc-mobile-nav-top .gc-tabs:not(.gc-tabs-scrollable) .gc-tab-item {
    flex: 1 1 0;
    min-width: 0;
}

.gc-mobile-nav-top .gc-tab-link {
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-md) !important; /* 8px - меньше чем у навбара */
}

.gc-mobile-nav-top .gc-tab-link.active {
    border-radius: var(--radius-md) !important; /* Консистентное скругление */
}

/* Fallback для браузеров без поддержки backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .gc-mobile-nav-top {
        background: var(--bg-content-main) !important;
    }
}

/* ========================================
   Нижний мобильный навбар с glassmorphism
   ======================================== */

.gc-mobile-nav-bottom {
    /* Glassmorphism эффект */
    background: rgba(var(--bg-rgb), 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Border для акцента */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none !important; /* Убираем нижний border */
    
    /* Тень для глубины (вверх) */
    box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.1);
    
    /* Анимация */
    transition: all 0.3s ease;
}

/* Dark theme */
[data-theme="dark"] .gc-mobile-nav-bottom {
    background: rgba(28, 28, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none !important;
}

/* Light theme */
[data-theme="light"] .gc-mobile-nav-bottom {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-bottom: none !important;
    box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-mobile-nav-bottom {
        background: rgba(255, 255, 255, 0.7) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        border-bottom: none !important;
        box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.08);
    }
}

/* Размеры и отступы нижнего navbar (из styles.css @media max-width: 991.98px) */
.navbar.fixed-bottom.gc-mobile-nav-bottom {
    height: 60px;
    padding: 0;
    margin: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm); /* 8px отступы */
    border-radius: var(--radius-full); /* Полное скругление 30px */
    overflow: hidden; /* КРИТИЧНО: обрезаем содержимое по радиусу родителя */
    left: 0;
    right: 0;
    width: auto;
    z-index: var(--z-fixed, 1030);
    /* position: fixed задано через Bootstrap класс .fixed-bottom */
}

/* Строка с колонками - на всю высоту */
.navbar.fixed-bottom.gc-mobile-nav-bottom .row {
    height: 100%;
    margin: 0;
}

/* Колонки - на всю высоту */
.navbar.fixed-bottom.gc-mobile-nav-bottom .col {
    height: 100%;
    padding: 0;
}

/* Стили для ссылок в нижнем навбаре */
.navbar.fixed-bottom.gc-mobile-nav-bottom .nav-link {
    display: flex !important; /* Flex для центрирования содержимого */
    flex-direction: column !important; /* Вертикальное расположение иконки и текста */
    align-items: center !important;
    justify-content: center !important;
    height: 100%; /* На всю высоту родителя */
    color: var(--font-secondary);
    padding: 0; /* Убираем padding, используем justify-content: center */
    font-size: var(--font-size-sm); /* 12px */
    text-decoration: none;
    transition: var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.navbar.fixed-bottom.gc-mobile-nav-bottom .nav-link:hover {
    background: rgba(var(--bg-rgb), 0.3);
}

.navbar.fixed-bottom.gc-mobile-nav-bottom .nav-link.active {
    color: var(--accent-link);
    background: rgba(var(--accent-link-rgb), 0.15);
}

/* Иконки в нижнем навбаре */
.navbar.fixed-bottom.gc-mobile-nav-bottom i {
    font-size: var(--font-size-base); /* 16px */
    display: block;
    margin-bottom: var(--spacing-2xs); /* 4px */
}

/* Текст под иконками */
.navbar.fixed-bottom.gc-mobile-nav-bottom small {
    font-size: var(--font-size-xs); /* 11px */
}

/* Fallback для нижнего navbar */
@supports not (backdrop-filter: blur(20px)) {
    .gc-mobile-nav-bottom {
        background: var(--bg-content-main) !important;
    }
}

/* Отступ снизу у body для нижнего navbar на мобильных */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 72px; /* Высота navbar */
    }
}

/* ========================================
   Дуэль - специальная навигация для переключения раундов
   ======================================== */

.gc-duel-nav-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 var(--spacing-md);
}

.gc-duel-nav-btn {
    color: white !important;
    min-width: 40px;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition-fast);
}

.gc-duel-nav-btn:hover {
    opacity: 0.8;
}

.gc-duel-nav-title {
    flex-grow: 1;
    text-align: center;
    color: white;
    font-size: var(--font-size-sm);
}

/* ========================================
   UI Kit Docs Preview Styles
   ======================================== */

/* Контейнер для превью нижнего навбара в документации */
.gc-nav-preview-container {
    width: 430px;
    min-height: 80px;
    position: relative;
    margin: 0 auto;
}

/* Превью нижнего навбара - позиционируем абсолютно внутри контейнера */
.navbar.fixed-bottom.gc-mobile-nav-bottom.gc-nav-preview {
    position: absolute !important;
    bottom: 0 !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    display: block !important; /* Переопределяем d-lg-none чтобы показать в превью */
}

/* Контейнер для превью верхнего навбара */
.gc-nav-preview-top-container {
    width: 430px;
    min-height: 160px;
    position: relative;
    margin: 0 auto;
}

/* Маленький контейнер для navbar level 2 (без табов) */
.gc-nav-preview-top-container-small {
    min-height: 80px;
}

/* Превью верхнего навбара - позиционируем абсолютно внутри контейнера */
nav.gc-mobile-nav-top.gc-nav-preview-top {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    display: block !important; /* Переопределяем display none на больших экранах */
}