/* === Сброс === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    overflow: hidden;
    background: #f9f9fb;
    color: #333;
}

/* === App === */
.app {
    display: grid;
    /* ОБНОВЛЕНО: Используем переменную для ширины сайдбара (Задача 2) */
    grid-template-columns: var(--sidebar-width, 280px) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    height: 100vh;
    transition: grid-template-columns 0.3s ease;
}

.app.sidebar-hidden {
    /* ОБНОВЛЕНО: Используем переменную */
    grid-template-columns: 0 1fr;
}

/* ДОБАВЛЕНО (Задача 2): Класс для расширения по наведению */
.app.sidebar-hover-expanded {
    /* max-content заставит колонку расшириться под самый длинный элемент */
grid-template-columns: var(--sidebar-max-width, 280px) 1fr;
   
   /* Переменную --sidebar-width тоже обновляем на этот вычисленный максимум */
   --sidebar-width: var(--sidebar-max-width, 280px);
}

/* === Кнопка меню === */
.toggle-btn {
    position: fixed;
    top: 12px;
    left: 8px;
    z-index: 1100;
    background: #005096;
    color: white;
    border: none;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.toggle-btn:hover {
    background: #004c9c;
}

.toggle-btn svg {
    width: 20px;
    height: 20px;
}

/* === Заголовок === */
.app-header {
    grid-area: header;
    background: #fff;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 1000;
}

.app-header h1 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    padding-left: 50px;
}

.header-logo {
    position: absolute;
    top: 16px;
    right: 20px;
    height: 35px;
    width: auto; 
    object-fit: contain;
    z-index: 1001;
}
.app-header {
    position: relative; /* необходимо для позиционирования дочернего absolute */
}

/* === Сайдбар === */
.sidebar {
    grid-area: sidebar;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 900;
    transition: transform 0.3s ease;
    /* ДОБАВЛЕНО (Задача 2): Убедимся, что сайдбар подчиняется сетке */
    width: 100%;
}

.sidebar.hidden {
    transform: translateX(-100%);
}

.sidebar-header {
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
}

/* === Меню === */
.nav-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px 0; /* ДОБАВЛЕНО: Немного воздуха */
}

/* === РАЗДЕЛ — ОБНОВЛЕНО (Задача 3) === */
.nav-section {
    display: block; 
    user-select: none
}

.nav-section-header {
    /* ПЕРЕНОСИМ СЮДА все стили flex-контейнера */
    display: flex;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer; /* Клик теперь тут */

    /* И стили для текста */
    font-weight: 600;
    color: #163867;

    /* И стили для многоточия */
    white-space: nowrap;
    overflow: hidden;
}

.nav-section-header:hover {
    background: #f1f8ff; /* ОБНОВЛЕНО: Еле заметный фон при наведении */
    color: #005096;
}

.nav-section-header.active {
    background: #E3F2FF;
    color: #005096;
}

/* ОБНОВЛЕНО (Задача 3): Переносим стрелку вправо */
.section-toggle {
    /*position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);*/
    font-size: 0.8em;
    transition: transform 0.2s ease;
    color: #666; /* Цвет иконок */
    flex-shrink: 0; /* Стрелка не должна сжиматься */
    margin-left: 8px; /* Небольшой отступ от названия */
}


.nav-section .section-title {
    margin-left: 0; /* УБРАН отступ слева */
    /*display: block;*/
    
    /* ДОБАВЛЕНО (Задача 2): Для определения переполнения */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; /* Занимает все место */
    min-width: 0; /* Разрешает ellipsis работать */ 
   /* padding-right: 10px; /* Чтобы текст не заезжал под стрелку */*/
}

.nav-section.expanded .section-toggle {
    transform: rotate(90deg);
}

/* === ПОДСПИСОК — ОБНОВЛЕНО (Задача 3) === */
.nav-sublist {
    list-style: none;
    max-height: 1000px;
    overflow: hidden;
    /* ОБНОВЛЕНО: Используем 'ease-in-out' для более плавного старта и финиша */
    transition: max-height 0.3s ease-in-out;
    background: #ffffff;
    padding-left: 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 8px; 
}

.nav-section:not(.expanded) .nav-sublist {
    max-height: 0;
    border-top: none; /* Скрываем рамку, когда схлопнуто */
    margin-top: 0;
}


.nav-sublist li {
    /* ОБНОВЛЕНО: Увеличиваем отступ слева для иконки */
    padding: 11px 20px 11px 44px; 
    cursor: pointer;
    font-size: 0.92rem;
    color: #163857; /* Цвет сохранен */
    /*display: flex;*/
    /*align-items: center;*/
    /*gap: 8px;*/
    transition: all 0.2s ease;
    position: relative; /* Для позиционирования иконки */
    
    /* ДОБАВЛЕНО (Задача 2): Для определения переполнения */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ОБНОВЛЕНО: Позиционируем иконки абсолютно */
.nav-sublist li::before {
    content: '';
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    flex-shrink: 0;
    
    /* ДОБАВЛЕНО: Позиционирование */
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.nav-sublist li[data-type="pdf"]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/><path d="M14 2v6h6" fill="%23fff"/></svg>');
}

.nav-sublist li[data-type="video"]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M8 5v14l11-7L8 5z"/></svg>');
}

.nav-sublist li[data-type="test"]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
}

.nav-sublist li[data-type="web"]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
}

/* ОБНОВЛЕНО: Убираем "прыжок" отступа */
.nav-sublist li:hover {
    background: #f1f8ff; /* Цвет сохранен */
    /* padding-left: 4px; */ /* УБРАНО */
    color: #005096; /* ДОБАВЛЕНО: Делаем текст ярче при наведении */
}

/* ОБНОВЛЕНО: Корректируем отступ для рамки */
.nav-sublist li.active {
    background: #E3F2FF; /* Цвет сохранен */
    color: #005096; /* Цвет сохранен */
    font-weight: 500;
    border-left: 5px solid #C10831; /* Цвет сохранен */
    /* ОБНОВЛЕНО: 44px (базовый) - 5px (рамка) = 39px */
    padding-left: 39px; 
}



/* === Контент === */
.main-content {
    grid-area: main;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.video-player {
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.video-player video {
    max-width: 100%;
    max-height: 100vh;
    outline: none;
}

.main-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    flex: 1;
}

/* === Адаптив === */
@media (max-width: 768px) {
    .app {
        grid-template-columns: 0 1fr;
    }
    .app.sidebar-visible {
        grid-template-columns: 260px 1fr;
    }
    .toggle-btn {
        left: 12px;
        top: 12px;
    }
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 1000;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
}