/**
 * Memberlux Sidebar Menu Styles
 */

/* Обертка для контента с меню */
.mlsm-content-wrapper {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: flex-start;
}

.mlsm-content-wrapper.mlsm-sidebar-left {
    flex-direction: row;
}

.mlsm-content-wrapper.mlsm-sidebar-right {
    flex-direction: row-reverse;
}

/* Контейнер основного контента */
.mlsm-main-content {
    flex: 1;
    min-width: 0; /* Позволяет контенту сжиматься */
}

/* Контейнер бокового меню */
.mlsm-sidebar-container {
    flex: 0 0 280px; /* Фиксированная ширина, не сжимается */
    width: 280px;
    align-self: flex-start;
    overflow: visible !important; /* Не обрезать скруглённые углы меню */
    border-radius: 4px;
    /* Меню часть потока документа, не фиксированное */
}

/* Контейнер меню материалов — та же скруглённость, не обрезаем углы */
.mlsm-materials-menu-container {
    overflow: visible !important;
    border-radius: 4px;
}

/* Специальные стили для меню внутри page-title-row (стартовая страница и страницы продажи доступа) */
/* Применяем Flexbox только когда есть меню - используем фиксированную ширину как на странице Материала */
.page-title-row .row[data-mlsm-integrated="true"] {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px; /* Отступ между меню и контентом, как на странице Материала */
    margin-left: 0 !important; /* Убираем отрицательные margin от Bootstrap */
    margin-right: 0 !important; /* Убираем отрицательные margin от Bootstrap */
}

/* Убираем padding у container внутри page-title-row когда есть меню */
.page-title-row[data-mlsm-integrated="true"] .container,
.page-title-row .container[data-mlsm-integrated="true"] {
    padding-left: 15px; /* Оставляем только минимальный padding для контейнера */
    padding-right: 15px;
}

.page-title-row .mlsm-sidebar-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-top: 10px;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center {
    flex: 1 1 auto;
    min-width: 0; /* Позволяет контенту сжиматься */
    padding-left: 0 !important; /* Убираем лишний padding слева */
    padding-right: 0 !important; /* Убираем лишний padding справа */
    max-width: 100% !important; /* Контент занимает всю доступную ширину */
    width: 100% !important; /* Занимает всю доступную ширину */
    text-align: center !important; /* Устанавливаем выравнивание по центру для контента */
}

.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > * {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Явно отменяем стили для .page-title - убираем инлайн стили, которые могли быть добавлены */
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-title,
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > h1.page-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Исключение: контейнер описания должен быть по центру и занимать 100% ширины на десктопе */
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* На десктопе описание занимает 100% ширины когда меню интегрировано */
@media (min-width: 768px) {
    body .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content.visible,
    body .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content,
    body .page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .page-description-content.visible,
    body .page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .page-description-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Вложенный .content внутри описания тоже на 100% */
    body .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content.visible > .content,
    body .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content > .content,
    body .page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .page-description-content.visible .content,
    body .page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .page-description-content .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
}

/* Исключение: кнопка "подробнее" должна быть по центру */
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center .toggle-category-description-button,
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center .page-description-content .toggle-category-description-button,
.page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .toggle-category-description-button {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: auto !important;
    float: none !important;
}

.page-title-row #mlsm-sidebar-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Папки на стартовой странице должны адаптироваться к ширине контейнера */
/* Убираем фиксированные размеры папок и делаем их адаптивными к ширине колонки */
.page-title-row .folder-wrap.folder-with-files,
.page-title-row .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SVG папки должны масштабироваться пропорционально */
.page-title-row .folder-wrap .folder-front,
.page-title-row .folder-wrap .folder-sub-front,
.page-title-row .folder-wrap .folder-back,
.page-title-row .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Переопределяем для всех медиа-запросов */
@media (min-width: 1400px) {
    .page-title-row .folder-wrap.folder-with-files,
    .page-title-row .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .page-title-row .folder-wrap .folder-front,
    .page-title-row .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .page-title-row .folder-wrap.folder-with-files,
    .page-title-row .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .page-title-row .folder-wrap .folder-front,
    .page-title-row .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .page-title-row .folder-wrap.folder-with-files,
    .page-title-row .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .page-title-row .folder-wrap .folder-front,
    .page-title-row .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .page-title-row .folder-wrap.folder-with-files,
    .page-title-row .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .page-title-row .folder-wrap .folder-front,
    .page-title-row .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 767px) {
    .page-title-row .row[data-mlsm-integrated="true"] {
        flex-wrap: wrap !important;
    }
    
    .page-title-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
    
    .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Для планшетов и десктопов (общие стили для всех экранов >= 768px) */
@media (min-width: 768px) {
    .page-title-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center {
        flex: 1 1 auto !important;
    }
}

/* Стили для страниц с подкатегориями (folders-row) */
.folders-row .container[data-mlsm-integrated="true"] {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    box-sizing: border-box;
}

.folders-row .mlsm-sidebar-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Обертка для контента - изолирует Bootstrap grid от flex-контейнера */
.folders-row .mlsm-materials-content {
    flex: 1 1 auto;
    /* Убираем min-width: 0, чтобы не ограничивать ширину */
    /* Критично: display должен быть block, а НЕ flex */
    display: block;
    box-sizing: border-box;
}

/* .row внутри обертки работает как обычный Bootstrap row */
/* НО: убираем отрицательные margin, так как flex-контейнер уже обрабатывает padding */
.folders-row .mlsm-materials-content > .row {
    /* Убираем отрицательные margin, как в page-title-row */
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Колонки Bootstrap должны работать с float как обычно */
/* НО: оставляем стандартные padding от Bootstrap - они нужны для отступов между колонками */
.folders-row .mlsm-materials-content > .row [class*="col-"] {
    float: left !important;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Папки должны адаптироваться к ширине контейнера */
/* Убираем фиксированные размеры папок и делаем их адаптивными к ширине колонки */
.folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
.folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SVG папки должны масштабироваться пропорционально */
.folders-row .mlsm-materials-content .folder-wrap .folder-front,
.folders-row .mlsm-materials-content .folder-wrap .folder-sub-front,
.folders-row .mlsm-materials-content .folder-wrap .folder-back,
.folders-row .mlsm-materials-content .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Переопределяем для всех медиа-запросов */
@media (min-width: 1400px) {
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

/* Clearfix для .row */
.folders-row .mlsm-materials-content > .row::before,
.folders-row .mlsm-materials-content > .row::after {
    display: table;
    content: " ";
    box-sizing: border-box;
}

.folders-row .mlsm-materials-content > .row::after {
    clear: both;
}

.folders-row #mlsm-sidebar-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 767px) {
    .folders-row .container[data-mlsm-integrated="true"] {
        flex-wrap: wrap !important;
    }
    
    .folders-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px;
    }
    
    .folders-row .mlsm-materials-content {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Для планшетов и десктопов (общие стили для всех экранов >= 768px) */
@media (min-width: 768px) {
    .folders-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .folders-row .mlsm-materials-content {
        flex: 1 1 auto !important;
    }
}

/* УНИВЕРСАЛЬНОЕ ИСПРАВЛЕНИЕ: Папки везде где есть меню должны быть адаптивными */
/* Применяется ко всем контейнерам с интегрированным меню */
/* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ - переопределяет все правила из app.css */
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
body .folders-row .container .mlsm-materials-content .folder-wrap.folder-with-files,
body .folders-row .container .mlsm-materials-content .folder-wrap.folder-with-subfolders,
body .folders-row .mlsm-materials-content .row .folder-wrap.folder-with-files,
body .folders-row .mlsm-materials-content .row .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-sub-front,
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-back,
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-sub-back,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap .folder-front,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap .folder-sub-front,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap .folder-back,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap .folder-sub-back,
body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front,
body .folders-row .mlsm-materials-content .folder-wrap .folder-back,
body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Медиа-запросы для универсального правила - МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ */
@media (min-width: 1400px) {
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        float: none !important;
    }
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        float: none !important;
    }
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        float: none !important;
    }
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        float: none !important;
    }
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

/* Стили для страниц категорий - общая обертка для page-title-row и materials-row */
.mlsm-category-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.mlsm-category-wrapper .mlsm-sidebar-container {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    box-sizing: border-box;
}

.mlsm-category-wrapper .mlsm-category-content {
    flex: 1 1 auto !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Контейнеры внутри контента должны быть на всю ширину */
.mlsm-category-wrapper .mlsm-category-content .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin: 0 !important;
}

/* Убираем margin и другие стили у секций внутри обертки */
.mlsm-category-wrapper .page-title-row,
.mlsm-category-wrapper .materials-row {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    clear: both !important;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Папки в category-wrapper должны адаптироваться к ширине контейнера */
/* Убираем фиксированные размеры папок и делаем их адаптивными к ширине колонки */
.mlsm-category-wrapper .folder-wrap.folder-with-files,
.mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SVG папки должны масштабироваться пропорционально */
.mlsm-category-wrapper .folder-wrap .folder-front,
.mlsm-category-wrapper .folder-wrap .folder-sub-front,
.mlsm-category-wrapper .folder-wrap .folder-back,
.mlsm-category-wrapper .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Переопределяем для всех медиа-запросов */
@media (min-width: 1400px) {
    .mlsm-category-wrapper .folder-wrap.folder-with-files,
    .mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .mlsm-category-wrapper .folder-wrap .folder-front,
    .mlsm-category-wrapper .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .mlsm-category-wrapper .folder-wrap.folder-with-files,
    .mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .mlsm-category-wrapper .folder-wrap .folder-front,
    .mlsm-category-wrapper .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mlsm-category-wrapper .folder-wrap.folder-with-files,
    .mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .mlsm-category-wrapper .folder-wrap .folder-front,
    .mlsm-category-wrapper .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .mlsm-category-wrapper .folder-wrap.folder-with-files,
    .mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .mlsm-category-wrapper .folder-wrap .folder-front,
    .mlsm-category-wrapper .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 767px) {
    .mlsm-category-wrapper {
        flex-wrap: wrap !important;
    }
    
    .mlsm-category-wrapper .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
    
    .mlsm-category-wrapper .mlsm-category-content {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Старый способ интеграции (для совместимости) */
.materials-row .container[data-mlsm-integrated="true"] {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px;
}

.materials-row .mlsm-sidebar-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.materials-row .mlsm-materials-content {
    flex: 1 1 auto;
    min-width: 0; /* Позволяет контенту сжиматься */
}

.materials-row #mlsm-sidebar-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 767px) {
    .materials-row .container[data-mlsm-integrated="true"] {
        flex-wrap: wrap !important;
    }
    
    .materials-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px;
    }
    
    .materials-row .mlsm-materials-content {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Для одной колонки на мобильных - ограничиваем ширину контейнера как при двух колонках */
    .materials-row.one-in-line .container,
    .materials-row.one-in-line .container[data-mlsm-integrated="true"] {
        max-width: 370px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Для планшетов */
@media (min-width: 768px) and (max-width: 991px) {
    .materials-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .materials-row .mlsm-materials-content {
        flex: 1 1 auto !important;
    }
}

/* Для десктопов */
@media (min-width: 992px) {
    .materials-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .materials-row .mlsm-materials-content {
        flex: 1 1 auto !important;
    }
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Папки в materials-row должны адаптироваться к ширине контейнера */
/* Убираем фиксированные размеры папок и делаем их адаптивными к ширине колонки */
.materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
.materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SVG папки должны масштабироваться пропорционально */
.materials-row .mlsm-materials-content .folder-wrap .folder-front,
.materials-row .mlsm-materials-content .folder-wrap .folder-sub-front,
.materials-row .mlsm-materials-content .folder-wrap .folder-back,
.materials-row .mlsm-materials-content .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Переопределяем для всех медиа-запросов */
@media (min-width: 1400px) {
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .materials-row .mlsm-materials-content .folder-wrap .folder-front,
    .materials-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .materials-row .mlsm-materials-content .folder-wrap .folder-front,
    .materials-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .materials-row .mlsm-materials-content .folder-wrap .folder-front,
    .materials-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .materials-row .mlsm-materials-content .folder-wrap .folder-front,
    .materials-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}


/* Стили для страниц материалов (lesson-row) - идентично materials-row */
.lesson-row .container.mlsm-has-sidebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px;
}

.lesson-row .mlsm-sidebar-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.lesson-row .mlsm-lesson-content {
    flex: 1 1 auto;
    min-width: 0; /* Позволяет контенту сжиматься */
}

.lesson-row .mlsm-materials-menu-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.lesson-row #mlsm-sidebar-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

.lesson-row #mlsm-materials-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

/* ============================================
   МОБИЛЬНОЕ ПЕРЕКЛЮЧЕНИЕ МЕЖДУ МЕНЮ (replace mode)
   ============================================ */

/* Пункты переключения между меню - скрыты на десктопе */
.mlsm-menu-switch-item {
    display: none !important;
}

/* Стили для пункта переключения на мобильных - как десктопные стрелки навигации */
@media (max-width: 767px) {
    .mlsm-menu-switch-item.mlsm-mobile-only {
        display: flex !important;
        align-items: center !important;
        padding: 15px 20px !important;
        color: #333 !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        background-color: transparent !important;
        border-bottom: 1px solid #E3E3E3;
        margin: 0 !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        list-style: none !important;
    }
    
    .mlsm-menu-switch-item.mlsm-mobile-only:hover,
    .mlsm-menu-switch-item.mlsm-mobile-only:active {
        background-color: #f5f5f5 !important;
    }
    
    /* Скрытие неактивного меню на мобильных (при режиме replace) */
    #mlsm-sidebar-menu.mlsm-mobile-menu-hidden,
    #mlsm-materials-menu.mlsm-mobile-menu-hidden {
        display: none !important;
    }
}

/* Общие стили для переключателей меню (применяются ко всем устройствам) */
.mlsm-menu-switch-item .mlsm-switch-arrow {
    font-size: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.mlsm-menu-switch-item .mlsm-menu-text {
    flex: 1;
}

/* Общие стили для переключателей меню */
.mlsm-menu-switch-item[data-switch-to="rubrics"],
.mlsm-menu-switch-item[data-switch-to="materials"] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Общие стили для текста в переключателях */
.mlsm-menu-switch-item[data-switch-to="rubrics"] .mlsm-menu-text,
.mlsm-menu-switch-item[data-switch-to="materials"] .mlsm-menu-text {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Общие стили для стрелок в переключателях */
.mlsm-menu-switch-item[data-switch-to="rubrics"] .mlsm-switch-arrow,
.mlsm-menu-switch-item[data-switch-to="materials"] .mlsm-switch-arrow {
    margin-left: auto !important;
    flex-shrink: 0;
    padding-right: 0 !important;
}

/* Общие стили для иконок в переключателях (16px размер, одинаково на всех устройствах) */
.mlsm-menu-switch-item[data-switch-to="rubrics"] .icon-folder-open-o,
.mlsm-menu-switch-item[data-switch-to="rubrics"] .iconmoon.icon-folder-open-o,
.mlsm-menu-switch-item[data-switch-to="materials"] .icon-file-text-o,
.mlsm-menu-switch-item[data-switch-to="materials"] .iconmoon.icon-file-text-o {
    font-size: 16px !important;
    width: 20px;
    height: 19px;
    line-height: 20px;
    margin-right: 8px !important; /* Унифицированный отступ между иконкой и текстом - 8px */
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: #333 !important;
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 767px) {
    /* Сохраняем ограничение ширины контейнера как на странице Рубрики (max-width: 370px), но меню внутри растягиваем на 100% */
    .lesson-row .container.mlsm-has-sidebar {
        flex-wrap: wrap !important;
        /* Восстанавливаем ограничение ширины контейнера для центрирования и соответствия странице Рубрики */
        max-width: 370px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Дополнительная специфичность для переопределения стилей Memberlux */
    .lesson-row .container[data-mlsm-integrated="true"].mlsm-has-sidebar {
        max-width: 370px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Меню ВСЕГДА над контентом на мобильной (и «Справа», и «Вместо рубрик») */
    .lesson-row .mlsm-menu-switch-wrapper,
    .lesson-row .mlsm-sidebar-container,
    .lesson-row .mlsm-materials-menu-container {
        order: -1 !important;
    }
    .lesson-row .mlsm-lesson-content {
        order: 0 !important;
    }
    
    /* Меню должно занимать 100% ширины своего контейнера */
    .lesson-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Меню внутри контейнера должно занимать 100% ширины */
    .lesson-row #mlsm-sidebar-menu {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Обертка переключения меню должна занимать 100% ширины контейнера */
    .lesson-row .mlsm-menu-switch-wrapper {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .lesson-row .mlsm-lesson-content {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .lesson-row .mlsm-materials-menu-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
}

/* Для планшетов и десктопов (общие стили для всех экранов >= 768px) */
@media (min-width: 768px) {
    .lesson-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .lesson-row .mlsm-lesson-content {
        flex: 1 1 auto !important;
    }
    
    .lesson-row .mlsm-materials-menu-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    /* Справа от контента: Рубрики | Контент | Материалы */
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="right"] {
        flex-direction: row !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="right"] .mlsm-sidebar-container {
        order: 1 !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="right"] .mlsm-lesson-content {
        order: 2 !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="right"] .mlsm-materials-menu-container {
        order: 3 !important;
    }
    
    /* Между рубриками и контентом: Рубрики | Материалы | Контент */
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="between"] {
        flex-direction: row !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="between"] .mlsm-sidebar-container {
        order: 1 !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="between"] .mlsm-materials-menu-container {
        order: 2 !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="between"] .mlsm-lesson-content {
        order: 3 !important;
    }
}


/* Само меню */
#mlsm-sidebar-menu {
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
    padding: 0 !important; /* Убираем все внутренние отступы контейнера - отступы только внутри элементов */
    /* Меню скрыто по умолчанию только если есть класс pending-integration */
    /* Без класса pending-integration меню будет видно (fallback) */
    position: relative;
    top: 0;
    max-height: none;
    overflow: hidden; /* Обеспечивает обрезку по скруглённым углам, без «квадратного» слоя поверх */
}

/* Скрываем меню до интеграции (если есть класс pending-integration) */
/* НО: если меню уже интегрировано в контейнер, показываем его */
#mlsm-sidebar-menu.mlsm-pending-integration:not(.mlsm-integrated):not(:has(+ .mlsm-materials-content)),
#mlsm-materials-menu.mlsm-pending-integration:not(.mlsm-integrated):not(:has(+ .mlsm-materials-content)) {
    display: none !important;
    visibility: hidden !important;
}

/* Показываем меню, если оно интегрировано, даже если есть pending-integration */
.mlsm-sidebar-container #mlsm-sidebar-menu,
.mlsm-materials-menu-container #mlsm-materials-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fallback: если меню не интегрировано через 2 секунды, показываем его */
/* Это предотвращает ситуацию, когда меню остается скрытым из-за проблем с JavaScript */
@keyframes mlsm-show-fallback {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Через 2 секунды после загрузки показываем меню, если оно все еще имеет класс pending-integration */
/* Это будет переопределено JavaScript, если интеграция произойдет раньше */

/* Отступ сверху для обертки меню рубрик убран для совпадения с меню Материалов */

/* Меню материалов - использует те же стили, что и основное меню */
#mlsm-materials-menu {
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
    padding: 0 !important; /* Убираем все внутренние отступы контейнера - отступы только внутри элементов */
    /* Меню скрыто по умолчанию только если есть класс pending-integration */
    /* Без класса pending-integration меню будет видно (fallback) */
    position: relative;
    top: 0;
    max-height: none;
    overflow: hidden; /* Обеспечивает обрезку по скруглённым углам, без «квадратного» слоя поверх */
}

/* Отступ сверху для обертки меню материалов убран по запросу пользователя */

/* Когда меню материалов интегрировано в контейнер */
.mlsm-materials-menu-container #mlsm-materials-menu {
    display: block !important;
    position: sticky;
    top: 20px;
    max-height: none;
}

/* На десктопе контент меню материалов всегда виден, мобильный toggle скрыт */
@media (min-width: 768px) {
    #mlsm-materials-menu.mlsm-mobile-collapsed .mlsm-mobile-toggle {
        display: none !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed .mlsm-mobile-collapsed-content {
        display: block !important;
    }
}

/* Стили для мобильного свернутого меню материалов */
@media (max-width: 767px) {
    #mlsm-materials-menu.mlsm-mobile-collapsed .mlsm-mobile-toggle {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        cursor: pointer !important;
        user-select: none !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed .mlsm-mobile-collapsed-content {
        display: none !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed.mlsm-mobile-expanded .mlsm-mobile-collapsed-content {
        display: block !important;
    }
}

/* Когда меню интегрировано в контейнер, применяем эти стили */
.mlsm-sidebar-container #mlsm-sidebar-menu {
    display: block !important;
    position: sticky;
    top: 20px;
    max-height: none;
}

.mlsm-menu-wrapper {
    width: 100%;
}

.mlsm-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mlsm-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    /* Убираем padding-bottom, отступы будут через margin-bottom */
}

/* Убираем отступ у первого пункта меню на всех устройствах */
.mlsm-menu-list > .mlsm-menu-item:first-child,
.mlsm-menu-list > .mlsm-menu-item:not(.mlsm-menu-switch-item):first-of-type {
    margin-top: 0 !important;
}

.mlsm-menu-list > .mlsm-menu-switch-item:first-child ~ .mlsm-menu-item:first-of-type {
    margin-top: 0 !important;
}

.mlsm-submenu-item {
    margin: 0;
    padding: 0;
    padding-bottom: 0px !important;
}

.mlsm-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px !important; /* Единые отступы для всех устройств (как у заголовка и "Назад") */
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: "PT Sans", sans-serif;
    font-size: 16px;
}

.mlsm-menu-link:hover {
    background-color: #f5f5f5;
}

.mlsm-menu-item.mlsm-current > .mlsm-menu-link,
.mlsm-menu-item.mlsm-ancestor > .mlsm-menu-link {
    font-weight: 600;
}

.mlsm-submenu-item.mlsm-current > .mlsm-menu-link,
.mlsm-submenu-item.mlsm-ancestor > .mlsm-menu-link {
    font-weight: 600;
}

.mlsm-menu-text {
    flex: 1;
}

.mlsm-access-icon {
    margin-right: 8px !important; /* Унифицированный отступ между иконкой и текстом - 8px для всех элементов */
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    height: 19px;
    display: block;
    line-height: 20px;
    text-align: left;
    position: relative;
    float: left;
}

/* Иконка открытого доступа (зеленый замок открыт) */
.mlsm-access-icon.icon-unlock::before {
    content: "\f09c"; /* fa-unlock */
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro";
    font-weight: 900;
    color: #5FA34E; /* Зеленый цвет для открытого доступа */
    display: block;
}

/* Иконка частичного доступа (оранжевый замок частично открыт) */
.mlsm-access-icon.icon-unlock-alt::before {
    content: "\f13e"; /* fa-unlock-alt */
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro";
    font-weight: 900;
    color: #F5A623; /* Оранжевый цвет для частичного доступа */
    display: block;
}

/* Иконка закрытого доступа (красный замок закрыт) */
.mlsm-access-icon.icon-lock::before {
    content: "\f023"; /* fa-lock */
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro";
    font-weight: 900;
    color: #B85A5A; /* Красный цвет для закрытого доступа */
    display: block;
}

/* Цвета для иконок папок в меню рубрик (сохраняем те же цвета что были у замков)
   НО эти цвета применяются только если не переопределены цветами текста из настроек */
#mlsm-sidebar-menu .mlsm-rubric-icon.mlsm-access-lock {
    color: #cd2a27 !important; /* Красный - заблокировано */
}

#mlsm-sidebar-menu .mlsm-rubric-icon.mlsm-access-unlock-alt {
    color: #ff9f09 !important; /* Оранжевый - частично доступно */
}

#mlsm-sidebar-menu .mlsm-rubric-icon.mlsm-access-unlock {
    color: #56bf50 !important; /* Зеленый - доступно */
}

/* Цвета для иконок файлов в меню материалов (сохраняем те же цвета что были у замков)
   НО эти цвета применяются только если не переопределены цветами текста из настроек */
#mlsm-materials-menu .mlsm-material-icon.mlsm-access-lock {
    color: #cd2a27 !important; /* Красный - заблокировано */
}

#mlsm-materials-menu .mlsm-material-icon.mlsm-access-unlock {
    color: #56bf50 !important; /* Зеленый - доступно */
}

.mlsm-toggle-icon {
    width: 20px;
    height: 19px;
    text-align: center;
    font-weight: bold;
    font-size: 16px !important;
    line-height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Стрелка drill-down навигации */
.mlsm-drill-down-arrow {
    flex-shrink: 0;
    margin-left: 8px;
    cursor: pointer;
    font-size: 16px !important;
    color: #666;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: color 0.2s ease;
}

.mlsm-drill-down-arrow:hover {
    color: #333;
}

/* Кнопка "Назад" в drill-down режиме */
.mlsm-drill-down-back-item {
    margin: 0 !important;
    padding: 0 !important;
    /* Отступ создается через padding внутри .mlsm-menu-link */
}

.mlsm-drill-down-back-item .mlsm-menu-link {
    font-weight: 500;
    color: #0073aa;
}

.mlsm-drill-down-back-item .mlsm-menu-link:hover {
    color: #005177;
    background-color: #f5f5f5;
}

.mlsm-drill-down-back-item .icon-arrow-left {
    margin-right: 8px;
    font-size: 16px;
}

/* На десктопе иконки переключения видны и работают, как на мобильных */
@media (min-width: 768px) {
    /* Иконки переключения теперь видны на десктопе */
    .mlsm-toggle-icon {
        display: inline-block !important;
    }
    
    /* Стрелки drill-down навигации видны на десктопе */
    .mlsm-drill-down-arrow {
        display: inline-block !important;
    }
    
    /* Подменю управляются через JavaScript, не принудительно показываются */
    /* Позволяем JavaScript управлять видимостью через inline стили */
    .mlsm-submenu[style*="display: none"] {
        display: none !important;
    }
    .mlsm-submenu[style*="display: block"] {
        display: block !important;
    }
    
    /* Скрываем мобильный тоггл на десктопе */
    .mlsm-mobile-toggle {
        display: none !important;
    }
    
    /* На десктопе контент меню всегда виден */
    .mlsm-mobile-collapsed-content {
        display: block !important;
    }
}

.mlsm-submenu {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    /* background-color теперь управляется через настройки */
}

/* Первый элемент подменю - отступ сверху равен отступу между пунктами меню (10px padding-bottom родителя + 10px padding-top = 20px) */
.mlsm-submenu > .mlsm-submenu-item:first-child > .mlsm-menu-link {
    padding-top: 20px;
}

/* Последний элемент подменю - отступ снизу равен padding-bottom элемента меню (10px) */
.mlsm-submenu > .mlsm-submenu-item:last-child > .mlsm-menu-link {
    padding-bottom: 10px;
}

.mlsm-submenu .mlsm-menu-link {
    padding-left: 35px;
    font-size: 0.95em;
}

.mlsm-submenu .mlsm-submenu .mlsm-menu-link {
    padding-left: 50px;
}

/* ============================================
   АДАПТИВНОСТЬ - РАЗЛИЧИЯ МЕЖДУ МОБИЛЬНЫМИ И ДЕСКТОПОМ
   ============================================ */

/* Общие стили для десктопа (применяются ко всем экранам >= 768px) */
@media (min-width: 768px) {
    .mlsm-sidebar-container {
        flex: 0 0 280px;
        width: 280px;
        max-width: 280px;
    }
}

/* На мобильных устройствах (телефоны) - меню на всю ширину */
@media (max-width: 767px) {
    .mlsm-content-wrapper {
        flex-direction: column !important;
    }
    
    .mlsm-sidebar-container {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 20px;
    }
    
    /* Переопределяем ширину меню для всех типов страниц на мобильных */
    .page-title-row .mlsm-sidebar-container,
    .folders-row .mlsm-sidebar-container,
    .materials-row .mlsm-sidebar-container,
    .lesson-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    #mlsm-sidebar-menu {
        max-height: none;
    }
}

/* Скроллбар */
#mlsm-sidebar-menu::-webkit-scrollbar,
#mlsm-materials-menu::-webkit-scrollbar {
    width: 6px;
}

#mlsm-sidebar-menu::-webkit-scrollbar-track,
#mlsm-materials-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#mlsm-sidebar-menu::-webkit-scrollbar-thumb,
#mlsm-materials-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#mlsm-sidebar-menu::-webkit-scrollbar-thumb:hover,
#mlsm-materials-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Показываем меню рубрик только когда оно интегрировано */
.mlsm-sidebar-container #mlsm-sidebar-menu,
#mlsm-sidebar-menu.mlsm-integrated,
.mlsm-sidebar-container #mlsm-sidebar-menu.mlsm-pending-integration {
    display: block !important;
    visibility: visible !important;
}


/* Показываем меню материалов только когда оно интегрировано */
.mlsm-materials-menu-container #mlsm-materials-menu,
#mlsm-materials-menu.mlsm-integrated {
    display: block !important;
    visibility: visible !important;
}

/* Стили для стрелок навигации между меню */
.mlsm-menu-nav-arrow {
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    margin: 0;
    transition: all 0.2s ease;
    color: #333;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Минимальный размер для touch-устройств */
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    user-select: none;
}

.mlsm-menu-nav-arrow:hover {
    color: #0073aa;
    transform: scale(1.1);
}

/* Базовые стили для стрелок навигации (унифицированные) */
.mlsm-menu-nav-back,
.mlsm-menu-nav-forward {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    font-size: 16px !important; /* Размер как на мобильных */
    line-height: 1 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Стрелка "Назад" - отступ справа */
.mlsm-menu-nav-back {
    margin-right: 8px !important;
    margin-left: 0 !important;
}

/* Стрелка "Вперед" - отступ слева */
.mlsm-menu-nav-forward {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* Стрелка в wrapper должна иметь такой же отступ, как и стрелка в заголовке */
.mlsm-menu-switch-wrapper > .mlsm-menu-nav-arrow.mlsm-switch-wrapper-arrow {
    margin: 0 !important;
}

/* Стили для заголовка меню материалов с навигацией - только для десктопа */
@media (min-width: 768px) {
    .mlsm-materials-menu-header,
    #mlsm-materials-menu .mlsm-materials-menu-header {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        min-height: 44px !important; /* Минимальная высота для консистентности */
        cursor: pointer !important; /* Весь заголовок кликабельный, как на мобильных */
    }
    
    /* Отступ между заголовком и списком на десктопе - через margin-top первого элемента (как на мобильном) */
    #mlsm-materials-menu .mlsm-menu-wrapper .mlsm-menu-list > .mlsm-menu-item:first-child,
    #mlsm-materials-menu .mlsm-menu-wrapper .mlsm-menu-list > .mlsm-menu-item:not(.mlsm-menu-switch-item):first-of-type {
        margin-top: 0 !important;
    }
}

/* На мобильных заголовок меню материалов скрыт (используется мобильный toggle) */
@media (max-width: 767px) {
    .mlsm-materials-menu-header,
    #mlsm-materials-menu .mlsm-materials-menu-header {
        display: none !important;
    }
}

/* Стили для заголовка меню рубрик с навигацией - унифицированные с меню Материалов */
@media (min-width: 768px) {
    .mlsm-menu-header.mlsm-desktop-header,
    #mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        min-height: 44px !important; /* Минимальная высота для консистентности */
        gap: 0 !important; /* Убираем gap для контроля через margin */
        cursor: pointer !important; /* Весь заголовок кликабельный, как на мобильных */
    }
    
    /* Убираем отступ у первого элемента списка на десктопе */
    #mlsm-sidebar-menu .mlsm-menu-wrapper .mlsm-menu-list > .mlsm-menu-item:first-child,
    #mlsm-sidebar-menu .mlsm-menu-wrapper .mlsm-menu-list > .mlsm-menu-item:not(.mlsm-menu-switch-item):first-of-type {
        margin-top: 0 !important;
    }
}


/* Унифицированные стили для всех иконок в заголовках меню (18px размер, как в списках) - применяются ко всем устройствам */
.mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-icon,
#mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-icon,
.mlsm-materials-menu-header .mlsm-materials-menu-icon,
#mlsm-materials-menu .mlsm-materials-menu-header .mlsm-materials-menu-icon,
.mlsm-mobile-toggle-icon {
    margin-right: 8px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 18px !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    width: 20px;
    height: 19px;
}

/* Унифицированные стили для заголовков текста - применяются ко всем устройствам */
.mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-title,
#mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-title,
.mlsm-materials-menu-header .mlsm-materials-menu-title,
#mlsm-materials-menu .mlsm-materials-menu-header .mlsm-materials-menu-title {
    flex: 1 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* Для десктопа заголовок должен быть flex */
@media (min-width: 768px) {
    .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-title,
    #mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-title {
        display: flex !important;
    }
}

/* Заголовок меню материалов в режиме replace (← Курсы школы) — кликабелен */
.mlsm-materials-menu-header,
#mlsm-materials-menu .mlsm-materials-menu-header {
    cursor: pointer;
}

/* Унифицированные стили для навигационных стрелок в заголовках */
.mlsm-materials-menu-header .mlsm-menu-nav-back,
#mlsm-materials-menu .mlsm-materials-menu-header .mlsm-menu-nav-back {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    font-size: 14px !important; /* Размер стрелки "Назад" - 14px */
    line-height: 1 !important;
    padding: 0 !important;
    width: 20px !important; /* Единый размер для всех стрелок */
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

/* Стили для стрелки "Вперед" в заголовке рубрик - вынесены отдельно для точного контроля */
.mlsm-menu-header.mlsm-desktop-header .mlsm-menu-nav-forward,
#mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-nav-forward {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

/* Специфичные стили для стрелки "Назад" на десктопе - справа, как стрелка "Вперед" (порядок элементов в HTML: иконка → текст → стрелка) */
@media (min-width: 768px) {
    .mlsm-materials-menu-header .mlsm-menu-nav-back,
    #mlsm-materials-menu .mlsm-materials-menu-header .mlsm-menu-nav-back {
        margin-left: auto !important; /* Выравнивание справа, как стрелка "Вперед" */
        margin-right: 0 !important;
    }
}

/* Специфичные стили для стрелки "Вперед" на десктопе */
@media (min-width: 768px) {
    .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-nav-forward,
    #mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-nav-forward {
        margin-left: auto !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
        font-size: 14px !important;
        line-height: 1 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* Скрытие меню при переключении */
.mlsm-sidebar-menu.mlsm-hidden-by-materials,
.mlsm-sidebar-container.mlsm-hidden-by-materials {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Показ меню при переключении обратно */
.mlsm-sidebar-container:not(.mlsm-hidden-by-materials),
.mlsm-menu-switch-wrapper .mlsm-sidebar-container:not(.mlsm-hidden-by-materials) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mlsm-materials-menu-container.mlsm-replace-mode {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Скрытие меню материалов при переключении на меню рубрик */
.mlsm-materials-menu-container.mlsm-replace-mode.mlsm-hidden-by-materials,
.mlsm-materials-menu-container.mlsm-replace-mode[style*="display: none"],
#mlsm-materials-menu.mlsm-hidden-by-materials,
#mlsm-materials-menu[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Обертка для переключения между меню в режиме replace */
.mlsm-menu-switch-wrapper {
    position: relative;
    flex: 0 0 280px !important;
    max-width: 280px !important;
    width: 280px !important;
}

/* На мобильных устройствах обертка должна занимать 100% ширины контейнера */
@media (max-width: 767px) {
    .mlsm-menu-switch-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Стрелка навигации в wrapper - больше не используется, стрелка остается в заголовке меню */
/* Убрано: стрелка больше не перемещается в wrapper, остается в заголовке для правильного flexbox выравнивания */
.mlsm-menu-switch-wrapper > .mlsm-menu-nav-arrow.mlsm-switch-wrapper-arrow {
    /* Этот класс больше не используется - стрелка остается в заголовке меню */
    display: none !important;
}

/* Убеждаемся, что стрелка "Вперед" не видна в заголовке меню материалов */
.mlsm-materials-menu-header .mlsm-menu-nav-forward,
#mlsm-materials-menu .mlsm-materials-menu-header .mlsm-menu-nav-forward {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* На мобильных стрелки должны быть всегда видны и доступны */
@media (max-width: 767px) {
    .mlsm-menu-nav-arrow {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
        pointer-events: auto !important;
        z-index: 1000 !important; /* Высокий z-index для мобильных */
    }
}

/* Для режима replace - оба контейнера внутри обертки */
.mlsm-menu-switch-wrapper .mlsm-sidebar-container.mlsm-replace-mode,
.mlsm-menu-switch-wrapper .mlsm-materials-menu-container.mlsm-replace-mode {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

/* Когда меню материалов активно, оно должно быть поверх меню рубрик */
.mlsm-menu-switch-wrapper .mlsm-materials-menu-container.mlsm-replace-mode {
    z-index: 2;
}

/* Когда меню рубрик активно, оно должно быть поверх меню материалов */
.mlsm-menu-switch-wrapper .mlsm-sidebar-container.mlsm-replace-mode:not(.mlsm-hidden-by-materials) {
    z-index: 2;
}