/* collapsible-menu.css - добавляем к существующим стилям */

/* Кнопка сворачивания */
.toggle-menu-btn {
    position: fixed;
    left: 15px;
    top: 120px;
    z-index: 1000;
    background: #337AB7;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.toggle-menu-btn:hover {
    background: #1c7da0;
    transform: scale(1.05);
}

/* Меню с возможностью сворачивания */
#leftMenu {
    transition: width 0.3s ease, padding 0.3s ease;
    overflow-x: hidden;
    /*background: rgba(255, 255, 255, 0.9);*/
    border-radius: 10px;
    margin: 10px;
}

/* Свернутое состояние */
#leftMenu.collapsed {
    width: 60px !important;
    min-width: 60px !important;
}

#leftMenu.collapsed .list5a li {
    padding: 10px 5px;
}

#leftMenu.collapsed .list5a li a {
    justify-content: center;
}

#leftMenu.collapsed .menu-text {
    display: none;
}

/* Стили для пунктов меню с иконками */
#leftMenu .list5a li a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

#leftMenu .list5a li a i {
    font-size: 18px;
    min-width: 24px;
    text-align: center;
}

#leftMenu .menu-text {
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

/* Основной контент подстраивается */
#top-main {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

#chapter, #main {
    flex: 1;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .toggle-menu-btn {
        top: auto;
        bottom: 20px;
        left: 20px;
    }

    #leftMenu.collapsed {
        width: 50px !important;
    }
}

#leftMenu {
    transition: none !important;
}

.right-content {
    transition: none !important;
}