/**
 * Layout для страницы мероприятия (split view с сайдбаром)
 * Используется в show_view_sidebar.php
 */

/* ===== БАЗОВЫЙ LAYOUT ===== */

.split-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    width: 100%; /* Растягиваем контейнер на всю доступную ширину */
    max-width: 1280px; /* Ограничиваем максимальную ширину */
    margin: 0 auto;
    gap: var(--spacing-sm);
}

/* Когда split-layout внутри page-layout, сбрасываем вертикальные отступы */
.page-layout > .split-layout {
    /* Отступами управляет gap родителя page-layout */
}

/* Event Content - контейнер для контента страниц результатов/организаторов/заявок/скводов */
.event-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Адаптивные отступы для event-content */
@media (max-width: 1312px) { /* 1280px + 32px запас */
    .event-content {
        padding: 0 var(--spacing-md); /* 16px по бокам */
    }
}

@media (max-width: 991px) {
    .event-content {
        padding: 0; /* Без отступов на мобильных - gc-panel сам управляет */
        gap: var(--spacing-sm); /* 8px на мобильных */
    }
}

/* Адаптивные отступы - как у catalog-layout */
@media (max-width: 1312px) { /* 1280px + 32px запас */
    .split-layout {
        padding: 0 var(--spacing-md); /* 16px по бокам */
    }
    
    .page-layout > .split-layout {
        /* Отступами управляет gap родителя page-layout */
    }
}

@media (max-width: 991px) {
    .split-layout {
        padding: 0; /* Без отступов на мобильных */
    }
    
    .page-layout > .split-layout {
        /* Отступами управляет gap родителя page-layout */
    }
}

@media (min-width: 1600px) {
    .split-layout {
        grid-template-columns: 400px 1fr;
    }
}

/* ===== ЛЕВАЯ КОЛОНКА (САЙДБАР) ===== */

.split-left {
    grid-column: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.split-left::-webkit-scrollbar {
    display: none;
}

/* ===== ПРАВАЯ КОЛОНКА (КОНТЕНТ) ===== */

.split-right {
    grid-column: 2;
    background: transparent;
    padding: 0;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.split-right::-webkit-scrollbar {
    display: none;
}

/* ===== СЕКЦИИ КОНТЕНТА ===== */
/* Мигрировано на gc-panel. См. styles.css для определения компонента */

/* Form Controls Wrapper - обертка для формы с инпутами */
.gc-form-controls {
    display: flex;
    gap: var(--spacing-xs);
    position: relative;
}

/* Dropdown Order Section - секция с кнопками сортировки */
.gc-dropdown-order-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

/* Tabs - для обратной совместимости с старым кодом */
.content-section-tabs {
    margin-top: 0; /* Убран лишний margin */
}

/* Tab Content - контейнер для переключаемых табов */
/* Логика табов определена в bootstrap-tab-fix.css */

/* ===== ТАБЫ GC (для страницы мероприятия) ===== */
/* ВСЕ стили табов определены в tabs.css (UI-kit) */
/* gc-search-container определен в tabs.css (UI-kit) */

.gc-input-text-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--font-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 1;
}

.gc-input-text-button:hover {
    color: var(--font-primary);
}

.gc-input-text-button i {
    font-size: var(--font-size-md); /* 16px */
}

/* Результаты поиска - используют UI-Kit стили (.gc-list-group, .gc-list-item) */
/* Старые классы удалены - используйте .gc-list-group-header */

/* Обертка формы поиска и результатов */
.gc-search-wrapper {
    display: flex;
    flex-direction: column;
}

/* Группы результатов (обертки с заголовком и списком) */
#searchResults {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Отступ сверху только если результаты не пустые */
#searchResults:not(:empty) {
    margin-top: var(--spacing-md);
}

/* Обертка для gc-list-group-header + gc-list-group */
#searchResults > div {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* ===== ПЕРЕОПРЕДЕЛЕНИЯ UI KIT (для страницы мероприятия) ===== */
/* Базовые стили gc-list-group и gc-list-item определены в lists.css */

/* Переопределение для дропдаунов - нужен visible overflow */
.split-right .gc-list-group {
    overflow: visible;
}

/* Заголовок категории класса оружия (badge + название + иконка) */
.sidebar-class-category-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Бадж класса оружия определен в lists.css */

/* Название типа оружия */
.sidebar-class-type-name {
    font-size: var(--font-size-mdl); /* 14px */
    font-weight: 500;
    color: var(--font-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Иконка типа оружия */
.sidebar-class-type-icon {
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: filter var(--transition-base);
}

/* Инверсия SVG иконок в светлой теме */
[data-theme="light"] .sidebar-class-type-icon {
    filter: invert(1);
}

/* В темной теме - оставляем как есть */
[data-theme="dark"] .sidebar-class-type-icon {
    filter: none;
}

/* Название подкласса (Открытый, Серийный и т.д.) */
.gc-weapon-subclass-title {
    font-size: var(--font-size-xs); /* 12px */
    color: var(--font-secondary);
    font-weight: 500;
    margin-bottom: 0;
}

.gc-weapon-subclass-title + .gc-list-group {
    margin-bottom: 0; /* Отступами управляет gap родителя */
}

/* Элемент списка определен в lists.css */

/* ===== ТРАНСПОРТ ===== */

.gc-vehicle-card {
    min-height: auto !important;
    cursor: pointer;
    padding: var(--spacing-md) !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.gc-vehicle-card:hover {
    background-color: var(--bg-hover);
}

.gc-vehicle-icon {
    width: 40px;
    height: 40px;
    background-color: var(--bg-content-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gc-vehicle-icon i {
    font-size: var(--font-size-lg); /* 18px */
    color: var(--font-primary);
}

.gc-plate-badge {
    background-color: var(--bg-content-secondary);
    border: 1px solid var(--border-primary);
    padding: var(--spacing-4xs) var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: bold;
    color: var(--font-primary);
    letter-spacing: 0.7px;
}

/* Название автомобиля - более жирное, чем обычный .gc-list-title */
.gc-vehicle-title {
    font-weight: 600;
    color: var(--font-primary);
    font-size: var(--font-size-sm);
    /* Использует базовый font-size: 15px */
}

/* Адреса и роли используют .gc-list-meta из lists.css */

/* Индикатор статуса (зеленая точка) */
/* Индикатор статуса перенесен в indicators.css (UI Kit) */

/* Имена пассажиров и водителей используют .gc-list-title из lists.css */

/* Аватар 40px */
.gc-avatar-40 {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
}

/* Контейнер всех секций транспорта */
.gc-transport-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md); /* Управляет отступами между секциями */
}

.gc-transport-section-title {
    font-size: var(--font-size-sm); /* 12px, было 13px - округлено до ближайшего токена */
    color: var(--font-secondary);
    font-weight: normal;
    margin: 0; /* Отступами управляет gap родителя */
}

.gc-transport-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0; /* Отступами управляет gc-transport-content через gap */
}

.gc-transport-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== HOVER ЭФФЕКТЫ ===== */

.exercise-item-hover {
    cursor: pointer;
}

.exercise-item-hover:hover {
    background-color: var(--bg-content-secondary) !important;
    transition: background-color 0.2s ease;
}

/* Универсальная кнопка меню "..." (для упражнений, транспорта, участников) */
.exercise-menu-btn,
.participant-menu-btn {
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base);
}

.exercise-menu-btn:hover,
.participant-menu-btn:hover {
    background-color: var(--bg-hover) !important;
}

/* Hover для редактируемой секции описания */
.description-section-editable:hover {
    background-color: var(--bg-content-secondary) !important;
    transition: background-color 0.2s ease;
}

.description-section-editable:hover .gc-panel-header {
    background-color: var(--bg-content-secondary) !important;
    transition: background-color 0.2s ease;
}

.list-group-item.profile-trigger {
    border: none !important;
    border-radius: 0.5rem;
    /* margin-bottom убран - отступами управляет gap родителя */
}

/* ===== ОПИСАНИЕ МЕРОПРИЯТИЯ ===== */

.event-description-text {
    word-wrap: break-word;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    color: var(--font-secondary) !important;
    font-weight: 400;
    font-size: var(--font-size-md); /* 16px */
}

.event-description-text p {
    margin-bottom: 1em;
    color: var(--font-secondary);
}

.event-description-text p:last-child {
    margin-bottom: 0;
}

.event-description-text strong,
.event-description-text b {
    font-weight: 700;
}

.event-description-text em,
.event-description-text i {
    font-style: italic;
}

.event-description-text a {
    color: var(--accent-link);
    text-decoration: none;
}

.event-description-text a:hover {
    color: var(--accent-link-hover);
    text-decoration: underline;
}

/* Упоминания */
.event-description-text .mention {
    background: rgba(241, 90, 48, 0.08);
    color: var(--accent-link);
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.event-description-text .mention:hover {
    background: rgba(241, 90, 48, 0.15) !important;
    color: var(--accent-link-hover);
    text-decoration: none;
}

/* Виджеты */
.event-description-text .weather-widget,
.event-description-text .yandex-map-inline,
.event-description-text .event-widget,
.event-description-text .yandex-disk-widget {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0px 6px;
    background: rgba(241, 90, 48, 0.08);
    color: var(--accent-link);
    border-radius: 4px;
    font-size: inherit;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.event-description-text .weather-widget:hover,
.event-description-text .yandex-map-inline:hover,
.event-description-text .event-widget:hover,
.event-description-text .yandex-disk-widget:hover {
    background: rgba(241, 90, 48, 0.15);
    color: var(--accent-link-hover);
    text-decoration: none !important;
}

/* ===== ПЛАНШЕТЫ И МОБИЛЬНЫЕ ===== */

/* Планшеты */
@media (max-width: 991px) {
    .split-layout {
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Скрываем сайдбар на мобильных */
    .split-left {
        display: none;
    }
    
    .split-right {
        grid-column: 1;
        overflow-y: visible;
        overflow-x: hidden;
        width: 100%;
        gap: var(--spacing-sm); /* 8px на мобильных */
    }
    
    /* Фикс для dropdown в списке участников */
    .gc-panel:has(#participants-tabs) {
        overflow: visible !important;
    }
    
    .gc-panel:has(#participants-tabs) .gc-panel-content {
        overflow: visible !important;
    }
    
    .gc-panel:has(#participants-tabs) .tab-content {
        overflow: visible !important;
    }
    
    #participants-order-content,
    #participants-classes-content {
        overflow: visible !important;
    }
    
    #participants-order-content .gc-list-group,
    #participants-classes-content .gc-list-group {
        overflow: visible !important;
    }
}

/* Мобильные устройства */
@media (max-width: 767px) {
    .split-layout {
        gap: 0;
        overflow-x: hidden;
    }
    
    .split-right {
        gap: var(--spacing-sm); /* 8px на мобильных */
    }
    
    .content-section {
        border-radius: 12px;
    }
    
    /* Фикс для dropdown в списке участников */
    .gc-panel:has(#participants-tabs) {
        overflow: visible !important;
    }
    
    .gc-panel:has(#participants-tabs) .gc-panel-content {
        overflow: visible !important;
    }
    
    .gc-panel:has(#participants-tabs) .tab-content {
        overflow: visible !important;
    }
    
    #participants-order-content,
    #participants-classes-content {
        overflow: visible !important;
    }
    
    #participants-order-content .gc-list-group,
    #participants-classes-content .gc-list-group {
        overflow: visible !important;
    }
    
    /* Адаптивные заголовки секций */
    /* Адаптивные размеры используют Foundation токены автоматически */
    
    /* Раньше обрезаем длинные имена в списках */
    .gc-list-item .text-truncate {
        max-width: 220px;
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .split-layout {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .gc-panel {
        border-radius: 12px;
        max-width: 100%;
    }
    
    /* Фикс для dropdown в списке участников */
    .gc-panel:has(#participants-tabs) {
        overflow: visible !important;
    }
    
    .gc-panel:has(#participants-tabs) .gc-panel-content {
        overflow: visible !important;
    }
    
    .gc-panel:has(#participants-tabs) .tab-content {
        overflow: visible !important;
    }
    
    #participants-order-content,
    #participants-classes-content {
        overflow: visible !important;
    }
    
    #participants-order-content .gc-list-group,
    #participants-classes-content .gc-list-group {
        overflow: visible !important;
    }
    
    /* Раньше обрезаем длинные имена в списках */
    .gc-list-item .text-truncate {
        max-width: 240px;
    }
}

/* ===== ДВУХУРОВНЕВЫЕ ТАБЫ С DROPDOWN ===== */

/* Wrapper для скролла табов */
.tabs-scroll-wrapper {
    width: 100%; /* Занимаем всю ширину родителя */
    overflow: visible; /* Wrapper не скроллит, dropdown не обрезается */
}

/* На мобилке табы занимают 100% ширины и скроллят свои элементы */
@media (max-width: 767px) {
    .tabs-scroll-wrapper .gc-tabs.gc-tabs-auto {
        width: 100% !important; /* Занимаем всю ширину wrapper */
        overflow-x: auto; /* Скроллим таб-итемы внутри */
        overflow-y: visible; /* Dropdown не обрезается */
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    }
}

/* На мобильных */
@media (max-width: 767px) {
    /* Убираем двойной border у последнего участника в мобильной таблице */
    .d-md-none > div:last-child {
        border-bottom: none !important;
    }
}

.gc-tab-item {
    position: relative;
}

.gc-tab-item.gc-tab-dropdown {
    position: relative;
}

/* На десктопе dropdown табы имеют специфичный padding */
@media (min-width: 768px) {
    .gc-tab-item.gc-tab-dropdown .gc-tab-link {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

.gc-tab-item.gc-tab-dropdown .gc-tab-link {
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.tab-type-name {
    white-space: nowrap;
    font-size: var(--font-size-sm); /* 12px */
    font-weight: 500;
}

.tab-class-badge-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Бадж в табах - используется UI-kit стиль */

.gc-tab-item.gc-tab-dropdown .gc-tab-link i {
    font-size: 0.625rem; /* 10px - нет токена, используем rem */
    flex-shrink: 0;
    opacity: 0.6;
}

.gc-tab-item.gc-tab-dropdown .gc-tab-link.active i {
    opacity: 0.85;
}

/* На мобильных скрываем dropdown в табах (используется модал) */
@media (max-width: 767px) {
    .gc-tab-item .gc-dropdown-menu {
        display: none !important;
    }
}

/* Dropdown в табах */
.gc-tab-item .gc-dropdown-menu {
    min-width: 200px;
}

/* ===== DROPDOWN ДЛЯ ВЫБОРА КЛАССА (МОБИЛЬНЫЕ) ===== */
/* На мобилке используется отдельный dropdown вместо inline */

/* Overlay для dropdown */
.gc-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1999;
}

/* На десктопе скрываем */
@media (min-width: 768px) {
    #classSelectModal {
        display: none !important;
    }
}

/* Тень для dropdown выбора класса */
#classSelectModal {
    box-shadow: var(--shadow-lg);
}

/* На мобилке позиционируем как bottom sheet */
@media (max-width: 767px) {
    #classSelectModal {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-height: 70vh;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }
}