/* ============================================================
   МОНТАЖНЫЙ САЙДБАР - ИСПРАВЛЕН ФОН НАВЕДЕНИЯ АККОРДЕОНА
   ============================================================ */

:root {
    /* Цвета сайдбара - светлая тема (градиент подобран под разноцветные иконки) */
    --sidebar-bg: linear-gradient(160deg, #12345b 0%, #0f2744 58%, #0b1b31 100%);
    --sidebar-hover: rgba(255, 255, 255, 0.1);
    --sidebar-hover-border: rgba(125, 211, 252, 0.28);
    --sidebar-active: #7dd3fc;
    --sidebar-active-bg: rgba(56, 189, 248, 0.18);
    --sidebar-active-border: rgba(125, 211, 252, 0.35);
    --sidebar-text: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.7);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-icon-color: rgba(255, 255, 255, 0.6);
    --sidebar-icon-active: #ffffff;
    
    /* Размеры */
    --sidebar-width: 280px;
    --sidebar-header-height: 70px;
    --sidebar-item-radius: 10px;
    
    /* Тени */
    --sidebar-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);

    /* Палитра для разноцветных иконок меню (см. блок в конце файла) */
    --mi-red: #ff6b6b;
    --mi-orange: #ff922b;
    --mi-yellow: #ffc61a;
    --mi-lime: #a9e34b;
    --mi-green: #51cf66;
    --mi-mint: #38d9a9;
    --mi-teal: #20c997;
    --mi-cyan: #22b8cf;
    --mi-blue: #74c0fc;
    --mi-indigo: #748ffc;
    --mi-violet: #b197fc;
    --mi-purple: #da77f2;
    --mi-pink: #f783ac;
    --mi-gray: #adb5bd;
}

/* ============================================================
   ТЕМНАЯ ТЕМА
   ============================================================ */
[data-theme="dark"] {
    /* Градиент админ-сайдбара в тёмной теме — индиго → фиолетовый → тёмный синий */
    --sidebar-bg: linear-gradient(160deg, #312e81 0%, #2e1065 55%, #172554 100%);
    --sidebar-hover: rgba(255, 255, 255, 0.1);
    --sidebar-hover-border: rgba(255, 255, 255, 0.12);
    --sidebar-active: #818cf8;
    --sidebar-active-bg: rgba(129, 140, 248, 0.2);
    --sidebar-active-border: rgba(129, 140, 248, 0.2);
    --sidebar-text: #e2e8f0;
    --sidebar-text-muted: rgba(226, 232, 240, 0.6);
    --sidebar-border: rgba(255, 255, 255, 0.04);
    --sidebar-icon-color: rgba(226, 232, 240, 0.5);
    --sidebar-icon-active: #e2e8f0;
}

/* ============================================================
   БАЗОВЫЕ СТИЛИ
   ============================================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    box-shadow: var(--sidebar-shadow);
    overflow-y: auto;
    transition: width 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sidebar-border);
    z-index: 1030 !important; /* Меньше чем у модальных окон (1040+) */
    will-change: transform;
}

/* Свернутый desktop-sidebar: оставляем иконки доступными, скрываем подписи. */
body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width, 72px);
}

body.sidebar-collapsed .sidebar .clinic-name,
body.sidebar-collapsed .sidebar .link-text,
body.sidebar-collapsed .sidebar .sidebar-link span,
body.sidebar-collapsed .sidebar .menu-section-text,
body.sidebar-collapsed .sidebar .menu-arrow,
body.sidebar-collapsed .sidebar .badge,
body.sidebar-collapsed .sidebar .sidebar-user-details,
body.sidebar-collapsed .sidebar .sidebar-clock,
body.sidebar-collapsed .sidebar .admin-link span {
    display: none;
}

body.sidebar-collapsed .sidebar .sidebar-link,
body.sidebar-collapsed .sidebar .menu-section-toggle {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

body.sidebar-collapsed .sidebar .sidebar-link i,
body.sidebar-collapsed .sidebar .menu-section-toggle > i:first-child {
    margin: 0;
}

body.sidebar-collapsed .sidebar .sidebar-collapse-btn {
    margin-left: auto;
    margin-right: auto;
}

/* Скроллбар */
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   ШАПКА
   ============================================================ */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    min-height: var(--sidebar-header-height);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.menu_logo {
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img,
.logo-img-default {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: white;
    flex-shrink: 0;
}

.clinic-name {
    font-size: 18px;
    font-weight: 200;
    font-famaly:"Roboto";
    color: var(--sidebar-text);
    letter-spacing: 0.3px;
    line-height: 1.2;0
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Кнопка закрытия (только мобильные) */
.sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    flex-shrink: 0;
}

.sidebar-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* ============================================================
   ТЕЛО САЙДБАРА
   ============================================================ */
.side-title-bt {
    flex: 1;
    padding: 16px 16px 20px;
    overflow-y: auto;
}

/* ============================================================
   ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ
   ============================================================ */
.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--sidebar-active-bg);
    border-radius: var(--sidebar-item-radius);
    margin-bottom: 16px;
    border: 1px solid var(--sidebar-border);
}

.sidebar-user-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--sidebar-active);
    flex-shrink: 0;
}

.sidebar-user-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-user-details {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--sidebar-text);
    margin-bottom: 2px;
}

.sidebar-user-email {
    font-size: 12px;
    color: var(--sidebar-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   МЕНЮ ПОЛЬЗОВАТЕЛЯ
   ============================================================ */
.sidebar-user-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.sidebar-user-menu .sidebar-link {
    padding: 10px 16px;
    border-radius: var(--sidebar-item-radius);
    color: var(--sidebar-text);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.sidebar-user-menu .sidebar-link:hover {
    background: var(--sidebar-hover);
    border: 1px solid var(--sidebar-hover-border);
}

.sidebar-user-menu .sidebar-link i {
    width: 18px;
    font-size: 14px;
    color: var(--menu-icon-color, var(--sidebar-icon-color));
    opacity: 0.7;
}

.sidebar-user-menu .sidebar-link:hover i {
    opacity: 1;
    color: var(--menu-icon-color, var(--sidebar-icon-active));
}

.sidebar-user-menu .logout-link {
    color: #f87171;
    border-top: 1px solid var(--sidebar-border);
    margin-top: 4px;
    padding-top: 12px;
}

.sidebar-user-menu .logout-link:hover {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
}

/* ============================================================
   ОСНОВНЫЕ ССЫЛКИ
   ============================================================ */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--sidebar-text);
    border-radius: var(--sidebar-item-radius);
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
}

.sidebar-link:hover {
    background: var(--sidebar-hover);
    border-color: var(--sidebar-hover-border);
    color: #ffffff;
    transform: translateX(4px);
}

.sidebar-link i {
    width: 20px;
    font-size: 16px;
    color: var(--menu-icon-color, var(--sidebar-icon-color));
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sidebar-link:hover i {
    color: var(--menu-icon-color, #ffffff);
    opacity: 1;
}

.sidebar-link.active {
    background: var(--sidebar-active-bg);
    color: #ffffff;
    border: 1px solid var(--sidebar-active-border);
}

.sidebar-link.active i {
    color: var(--menu-icon-color, #ffffff);
    opacity: 1;
}

/* ============================================================
   ГЛАВНАЯ ССЫЛКА
   ============================================================ */
.sidebar-link.home-link {
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--sidebar-border);
    padding-bottom: 16px;
    color: #ffffff;
}

.sidebar-link.home-link i {
    font-size: 18px;
    color: var(--menu-icon-color, rgba(255, 255, 255, 0.8));
}

.sidebar-link.home-link:hover {
    background: var(--sidebar-hover);
    border-color: var(--sidebar-hover-border);
}

/* ============================================================
   АККОРДЕОН (РАЗДЕЛЫ МЕНЮ) - ✅ ИСПРАВЛЕН ФОН НАВЕДЕНИЯ
   ============================================================ */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-section {
    border-radius: var(--sidebar-item-radius);
    overflow: hidden;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.menu-section:hover {
    border-color: var(--sidebar-border);
}

/* ✅ Кнопка-заголовок аккордеона */
.menu-section-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--sidebar-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    border-radius: var(--sidebar-item-radius);
}

/* ✅ Фон наведения для заголовка аккордеона */
.menu-section-toggle:hover {
    background: var(--sidebar-hover);
    border-color: var(--sidebar-hover-border);
    color: #ffffff;
}

.menu-section-toggle i {
    width: 20px;
    font-size: 16px;
    color: var(--menu-icon-color, var(--sidebar-icon-color));
    flex-shrink: 0;
}

.menu-section-toggle:hover i {
    color: var(--menu-icon-color, #ffffff);
}

.menu-section-toggle .menu-section-text {
    flex: 1;
    font-weight: 500;
    color: var(--sidebar-text);
}

.menu-arrow {
    font-size: 12px;
    color: var(--sidebar-icon-color);
    transition: transform 0.3s ease;
}

.menu-section-toggle[aria-expanded="true"] .menu-arrow {
    transform: rotate(90deg);
    color: #ffffff;
}

.menu-section-toggle .badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 4px;
}

/* ============================================================
   СОДЕРЖИМОЕ АККОРДЕОНА - ✅ ИСПРАВЛЕН ФОН НАВЕДЕНИЯ
   ============================================================ */
.menu-section-content {
    padding: 4px 8px 8px 16px;
    background: var(--sidebar-active-bg);
    border-radius: 0 0 var(--sidebar-item-radius) var(--sidebar-item-radius);
}

.menu-section-content .sidebar-link {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 8px;
    color: var(--sidebar-text-muted);
    border: 1px solid transparent;
}

.menu-section-content .sidebar-link i {
    font-size: 13px;
    width: 18px;
    color: var(--menu-icon-color, var(--sidebar-icon-color));
}

/* ✅ Фон наведения для ссылок внутри аккордеона */
.menu-section-content .sidebar-link:hover {
    background: var(--sidebar-hover);
    border-color: var(--sidebar-hover-border);
    color: #ffffff;
    padding-left: 20px;
}

.menu-section-content .sidebar-link:hover i {
    color: var(--menu-icon-color, #ffffff);
}

.menu-section-content .sidebar-link.active {
    color: #ffffff;
    background: var(--sidebar-active-bg);
    border-color: var(--sidebar-active-border);
}

.menu-section-content .sidebar-link.active i {
    color: var(--menu-icon-color, #ffffff);
}

.menu-section-content .sidebar-link .badge {
    font-size: 9px;
    padding: 2px 6px;
    margin-left: auto;
}

/* ============================================================
   ОВЕРЛЕЙ (МОБИЛЬНЫЕ)
   ============================================================ */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    /* ✅ Оверлей должен быть ниже модальных окон, но выше контента */
    z-index: 1020 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.show {
    display: block !important;
    opacity: 1;
}

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */

/* Десктоп (>= 769px) */
@media (min-width: 769px) {
    .sidebar {
        transform: none !important;
    }
    
    .sidebar-close {
        display: none !important;
    }
    
    .sidebar-overlay {
        display: none !important;
    }
}

/* Планшет (577px - 768px) */
@media (max-width: 768px) {
    body.sidebar-collapsed .sidebar { width: 300px !important; }
    .sidebar {
        width: 300px !important;
        max-width: 85% !important;
        transform: translateX(-105%) !important;
        border-right: none;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3);
    }
    
    .sidebar.open {
        transform: translateX(0) !important;
    }
    
    .sidebar-close {
        display: flex !important;
    }
    
    .sidebar-overlay.show {
        display: block !important;
    }
    
    .mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--sidebar-bg);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        height: 56px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-header .logo {
        gap: 10px;
    }
    
    .mobile-header .logo-img {
        width: 32px;
        height: 32px;
    }
    
    .mobile-header .clinic-name {
        font-size: 14px;
        color: #ffffff;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    body.sidebar-open {
        overflow: hidden !important;
    }
}

/* Маленькие телефоны (<= 576px) */
@media (max-width: 576px) {
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .sidebar-header {
        padding: 14px 16px;
    }
    
    .clinic-name {
        font-size: 14px;
    }
    
    .sidebar-user-info {
        padding: 12px 14px;
    }
    
    .sidebar-user-photo {
        width: 36px;
        height: 36px;
    }
    
    .sidebar-user-name {
        font-size: 13px;
    }
    
    .sidebar-link {
        padding: 8px 14px;
        font-size: 13px;
    }
    
    .menu-section-toggle {
        padding: 8px 14px;
        font-size: 13px;
    }
    
    .menu-section-content .sidebar-link {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ============================================================
   АНИМАЦИИ
   ============================================================ */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-link {
    animation: slideIn 0.3s ease forwards;
}

.sidebar-link:nth-child(1) { animation-delay: 0.02s; }
.sidebar-link:nth-child(2) { animation-delay: 0.04s; }
.sidebar-link:nth-child(3) { animation-delay: 0.06s; }
.sidebar-link:nth-child(4) { animation-delay: 0.08s; }
.sidebar-link:nth-child(5) { animation-delay: 0.10s; }
.sidebar-link:nth-child(6) { animation-delay: 0.12s; }
.sidebar-link:nth-child(7) { animation-delay: 0.14s; }
.sidebar-link:nth-child(8) { animation-delay: 0.16s; }
.sidebar-link:nth-child(9) { animation-delay: 0.18s; }
.sidebar-link:nth-child(10) { animation-delay: 0.20s; }

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ
   ============================================================ */

/* Бейджи в меню - светлый текст на темном фоне */
.menu-section-toggle .badge {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 600;
}

.menu-section-toggle .badge.bg-warning {
    background: rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}

.menu-section-toggle .badge.bg-info {
    background: rgba(96, 165, 250, 0.25);
    color: #60a5fa;
}

.menu-section-toggle .badge.bg-success {
    background: rgba(52, 211, 153, 0.25);
    color: #34d399;
}

.menu-section-toggle .badge.bg-danger {
    background: rgba(248, 113, 113, 0.25);
    color: #f87171;
}

/* Отключенные ссылки */
.sidebar-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sidebar-link.disabled:hover {
    background: transparent !important;
    transform: none !important;
    border-color: transparent !important;
}

/* Разделители */
.sidebar-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 8px 16px;
}

/* Часы в сайдбаре (для мобильных) */
.sidebar-clock {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--sidebar-active-bg);
    border-radius: var(--sidebar-item-radius);
    margin-bottom: 16px;
    border: 1px solid var(--sidebar-border);
}

.sidebar-clock i {
    color: var(--sidebar-active);
    font-size: 16px;
}

#sidebarClock {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--sidebar-text);
}

/* Кнопка администратора */
.sidebar-admin-btn {
    margin-bottom: 16px;
}

.admin-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(165, 180, 252, 0.15), rgba(165, 180, 252, 0.05));
    border: 1px solid rgba(165, 180, 252, 0.15);
    border-radius: var(--sidebar-item-radius);
    color: var(--sidebar-text);
    font-weight: 500;
    font-size: 13px;
    transition: all 0.3s ease;
}

.admin-link:hover {
    background: rgba(165, 180, 252, 0.25);
    transform: translateX(4px);
    color: #ffffff;
    border-color: rgba(165, 180, 252, 0.3);
}

.admin-link i {
    font-size: 16px;
    color: var(--sidebar-icon-color);
}

.admin-link:hover i {
    color: #ffffff;
}

/* Убираем ненужные элементы */
#sidebarHeaderElements {
    display: none;
}

@media (max-width: 768px) {
    #sidebarHeaderElements {
        display: block !important;
    }
    
    #desktopClock,
    #desktopAdminBtn,
    #desktopUserMenu {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-header {
        display: none !important;
    }
    
    #sidebarHeaderElements {
        display: none !important;
    }
}

/* ============================================================
   СПЕЦИАЛЬНЫЕ ПРАВИЛА ДЛЯ АККОРДЕОНА - ✅ ГАРАНТИЯ КОРРЕКТНОГО ФОНА
   ============================================================ */

/* ✅ Гарантируем, что фон наведения для аккордеона отличается от ссылки */
.sidebar .menu-section-toggle,
.sidebar .menu-section-content .sidebar-link {
    transition: all 0.2s ease;
}

/* ✅ Фон наведения для заголовка аккордеона */
.sidebar .menu-section-toggle:hover {
    background: var(--sidebar-hover) !important;
    border-color: var(--sidebar-hover-border) !important;
}

/* ✅ Фон наведения для ссылок внутри аккордеона */
.sidebar .menu-section-content .sidebar-link:hover {
    background: var(--sidebar-hover) !important;
    border-color: var(--sidebar-hover-border) !important;
}

/* ✅ Активное состояние для ссылок внутри аккордеона */
.sidebar .menu-section-content .sidebar-link.active {
    background: var(--sidebar-active-bg) !important;
    border-color: var(--sidebar-active-border) !important;
}

/* ✅ Убеждаемся, что фон не сливается с цветом текста */
.sidebar .menu-section-toggle,
.sidebar .menu-section-content .sidebar-link {
    background: transparent;
}

.sidebar .menu-section-toggle:hover,
.sidebar .menu-section-content .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* ✅ В темной теме фон наведения немного темнее */
[data-theme="dark"] .sidebar .menu-section-toggle:hover,
[data-theme="dark"] .sidebar .menu-section-content .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* ========== СТИЛИ ДЛЯ АККОРДЕОНА В САЙДБАРЕ ========== */

/* Скрываем контент по умолчанию */
.menu-collapse {
    display: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Показываем когда есть класс show */
.menu-collapse.show {
    display: block;
}

/* Стили для кнопок-переключателей */
.menu-section-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    background: transparent;
    border: none;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    gap: 10px;
}

.menu-section-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.menu-section-toggle .menu-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
    font-size: 12px;
}

/* Поворот стрелки при открытии */
.menu-section-toggle.active .menu-arrow {
    transform: rotate(90deg);
}

.menu-section-toggle i:first-child {
    width: 20px;
    text-align: center;
    color: #718096;
}

.menu-section-text {
    flex: 1;
    text-align: left;
}

/* Стили для контента секции */
.menu-section-content {
    padding: 5px 0 5px 45px;
}

.menu-section-content .sidebar-link {
    display: flex;
    align-items: center;
    padding: 6px 15px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.2s ease;
    gap: 10px;
}

.menu-section-content .sidebar-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #2b6cb0;
}

.menu-section-content .sidebar-link.active {
    background: rgba(43, 108, 176, 0.1);
    color: #2b6cb0;
}

.menu-section-content .sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: 14px;
}

/* Анимация открытия/закрытия */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-collapse.show .menu-section-content {
    animation: slideDown 0.3s ease forwards;
}

/* Бейджи в меню */
.menu-section-content .badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ============================================================
   ЕДИНЫЙ РАЗМЕР ШРИФТА ДЛЯ ССЫЛОК САЙДБАРА (16px)
   Перекрывает 13–14px из правил выше, включая подменю
   и ссылки пользовательского меню (sidebar и admin-sidebar).
   ============================================================ */
.sidebar .sidebar-link,
.sidebar .sidebar-link.home-link,
.sidebar .sidebar-user-menu .sidebar-link,
.sidebar .menu-section-content .sidebar-link {
    font-size: 16px;
}

/* ============================================================
   СВОРАЧИВАНИЕ САЙДБАРА (КНОПКА + HOVER-РАСКРЫТИЕ)
   ============================================================ */
:root {
    --sidebar-collapsed-width: 72px;
}

/* Плавная анимация ширины сайдбара (переопределяем базовую transition) */
.sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Кнопка сворачивания в шапке сайдбара (только десктоп) */
.sidebar-collapse-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media (min-width: 769px) {
    .sidebar-collapse-btn {
        display: flex;
    }
}

/* ---- Свёрнутое состояние (только десктоп) ---- */
@media (min-width: 769px) {
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-collapsed-width);
    }

    /* Шапка тоже сдвигается при свёрнутом сайдбаре
       (перебивает !important из header.css за счёт большей специфичности) */
    body.sidebar-collapsed .site-header {
        left: var(--sidebar-collapsed-width) !important;
        width: calc(100% - var(--sidebar-collapsed-width)) !important;
    }

    /* Полное раскрытие при наведении (поверх контента) */
    body.sidebar-collapsed .sidebar:hover {
        width: var(--sidebar-width);
        box-shadow: var(--sidebar-shadow);
    }

    /* Шапка в свёрнутом виде: скрываем лого, центрируем кнопку */
    body.sidebar-collapsed .sidebar .sidebar-header {
        padding: 12px 0;
        justify-content: center;
    }

    body.sidebar-collapsed .sidebar .menu_logo {
        display: none;
    }

    /* Скрываем текстовые элементы, оставляем только иконки */
    body.sidebar-collapsed .sidebar .clinic-name,
    body.sidebar-collapsed .sidebar .link-text,
    body.sidebar-collapsed .sidebar .menu-section-text,
    body.sidebar-collapsed .sidebar .menu-arrow,
    body.sidebar-collapsed .sidebar .sidebar-user-name,
    body.sidebar-collapsed .sidebar .sidebar-user-email,
    body.sidebar-collapsed .sidebar .clock-display,
    body.sidebar-collapsed .sidebar .sidebar-admin-btn span,
    body.sidebar-collapsed .sidebar .sidebar-user-menu .sidebar-link span,
    body.sidebar-collapsed .sidebar .badge {
        display: none !important;
    }

    body.sidebar-collapsed .sidebar .sidebar-clock,
    body.sidebar-collapsed .sidebar .sidebar-user-info {
        display: none !important;
    }

    /* Центрируем иконки в рейле */
    body.sidebar-collapsed .sidebar .sidebar-link,
    body.sidebar-collapsed .sidebar .menu-section-toggle,
    body.sidebar-collapsed .sidebar .sidebar-user-menu .sidebar-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    body.sidebar-collapsed .sidebar .menu-section-content {
        padding: 4px 4px 8px;
    }

    body.sidebar-collapsed .sidebar .menu-section-content .sidebar-link {
        justify-content: center;
        padding: 8px 0;
    }

    body.sidebar-collapsed .sidebar .side-title-bt {
        padding: 8px 4px 12px;
    }

    /* ---- Восстановление при наведении ---- */
    body.sidebar-collapsed .sidebar:hover .sidebar-header {
        padding: 18px 20px;
        justify-content: space-between;
    }

    body.sidebar-collapsed .sidebar:hover .menu_logo {
        display: flex;
    }

    body.sidebar-collapsed .sidebar:hover .clinic-name,
    body.sidebar-collapsed .sidebar:hover .link-text,
    body.sidebar-collapsed .sidebar:hover .menu-section-text,
    body.sidebar-collapsed .sidebar:hover .menu-arrow,
    body.sidebar-collapsed .sidebar:hover .clock-display,
    body.sidebar-collapsed .sidebar:hover .sidebar-admin-btn span,
    body.sidebar-collapsed .sidebar:hover .sidebar-user-menu .sidebar-link span,
    body.sidebar-collapsed .sidebar:hover .badge {
        display: inline-block !important;
    }

    body.sidebar-collapsed .sidebar:hover .sidebar-user-name,
    body.sidebar-collapsed .sidebar:hover .sidebar-user-email {
        display: block !important;
    }

    body.sidebar-collapsed .sidebar:hover .sidebar-clock,
    body.sidebar-collapsed .sidebar:hover .sidebar-user-info {
        display: flex !important;
    }

    body.sidebar-collapsed .sidebar:hover .sidebar-link,
    body.sidebar-collapsed .sidebar:hover .menu-section-toggle,
    body.sidebar-collapsed .sidebar:hover .sidebar-user-menu .sidebar-link {
        justify-content: flex-start;
        padding-left: 16px;
        padding-right: 16px;
    }

    body.sidebar-collapsed .sidebar:hover .menu-section-content {
        padding: 4px 8px 8px 16px;
    }

    body.sidebar-collapsed .sidebar:hover .menu-section-content .sidebar-link {
        justify-content: flex-start;
        padding: 8px 12px;
    }

    body.sidebar-collapsed .sidebar:hover .side-title-bt {
        padding: 16px 16px 20px;
    }
}

/* ============================================================
   РАЗНОЦВЕТНЫЕ ИКОНКИ МЕНЮ
   ------------------------------------------------------------
   Цвет иконки задаётся CSS-переменной --menu-icon-color на <i>.
   Общие правила цвета иконок (см. выше) читают её через var();
   если переменная не задана — используется прежний цвет.
   Работает и для обычного сайдбара (sidebar.html), и для
   админ-панели (sidebar-admin.html).
   ============================================================ */

/* --- Общие элементы: шапка, профиль, меню пользователя --- */
.sidebar i.fa-home              { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-star              { --menu-icon-color: var(--mi-yellow); }
.sidebar i.fa-cogs              { --menu-icon-color: var(--mi-gray); }
.sidebar i.fa-user-circle       { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-book-medical      { --menu-icon-color: var(--mi-violet); }
.sidebar i.fa-user-friends      { --menu-icon-color: var(--mi-indigo); }
.sidebar i.fa-sign-out-alt      { --menu-icon-color: var(--mi-red); }

/* --- Регистратура --- */
.sidebar i.fa-users             { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-user-plus         { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-address-book      { --menu-icon-color: var(--mi-cyan); }
.sidebar i.fa-file-medical-alt  { --menu-icon-color: var(--mi-violet); }
.sidebar i.fa-history           { --menu-icon-color: var(--mi-orange); }
.sidebar i.fa-archive           { --menu-icon-color: var(--mi-pink); }
.sidebar i.fa-calendar-check    { --menu-icon-color: var(--mi-mint); }
.sidebar i.fa-inbox             { --menu-icon-color: var(--mi-indigo); }
.sidebar i.fa-calendar-plus     { --menu-icon-color: var(--mi-teal); }
.sidebar i.fa-stethoscope       { --menu-icon-color: var(--mi-lime); }

/* --- Касса --- */
.sidebar i.fa-cash-register     { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-file-invoice      { --menu-icon-color: var(--mi-orange); }
.sidebar i.fa-exchange-alt      { --menu-icon-color: var(--mi-cyan); }

/* --- Стационар --- */
.sidebar i.fa-hospital-user     { --menu-icon-color: var(--mi-red); }
.sidebar i.fa-procedures        { --menu-icon-color: var(--mi-pink); }
.sidebar i.fa-building          { --menu-icon-color: var(--mi-indigo); }

/* --- Лаборатория / Рентген --- */
.sidebar i.fa-flask             { --menu-icon-color: var(--mi-violet); }
.sidebar i.fa-tags              { --menu-icon-color: var(--mi-orange); }
.sidebar i.fa-sliders-h         { --menu-icon-color: var(--mi-cyan); }
.sidebar i.fa-x-ray             { --menu-icon-color: var(--mi-cyan); }

/* --- Товары и услуги --- */
.sidebar i.fa-boxes             { --menu-icon-color: var(--mi-orange); }
.sidebar i.fa-shopping-cart     { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-concierge-bell    { --menu-icon-color: var(--mi-teal); }
.sidebar i.fa-folder            { --menu-icon-color: var(--mi-yellow); }
.sidebar i.fa-gift              { --menu-icon-color: var(--mi-pink); }
.sidebar i.fa-truck             { --menu-icon-color: var(--mi-indigo); }
.sidebar i.fa-dolly             { --menu-icon-color: var(--mi-violet); }
.sidebar i.fa-warehouse         { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-truck-loading     { --menu-icon-color: var(--mi-red); }

/* --- Сотрудники --- */
.sidebar i.fa-user-md           { --menu-icon-color: var(--mi-pink); }
.sidebar i.fa-comment-dots      { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-calendar-alt      { --menu-icon-color: var(--mi-violet); }

/* --- Справочники / Настройки --- */
.sidebar i.fa-book              { --menu-icon-color: var(--mi-yellow); }
.sidebar i.fa-paw               { --menu-icon-color: var(--mi-orange); }
.sidebar i.fa-list-ul           { --menu-icon-color: var(--mi-cyan); }
.sidebar i.fa-file-signature    { --menu-icon-color: var(--mi-indigo); }
.sidebar i.fa-cog               { --menu-icon-color: var(--mi-gray); }
.sidebar i.fa-users-cog         { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-user-tag          { --menu-icon-color: var(--mi-purple); }
.sidebar i.fa-sign-in-alt       { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-lock              { --menu-icon-color: var(--mi-yellow); }

/* --- Иконки, повторяющиеся в разных разделах --- */
.sidebar i.fa-list              { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-plus-circle       { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-file-alt          { --menu-icon-color: var(--mi-indigo); }
.sidebar i.fa-chart-line        { --menu-icon-color: var(--mi-mint); }

/* --- Админ-панель (sidebar-admin.html) --- */
.sidebar i.fa-chart-pie         { --menu-icon-color: var(--mi-indigo); }
.sidebar i.fa-user              { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-briefcase         { --menu-icon-color: var(--mi-pink); }
.sidebar i.fa-hospital          { --menu-icon-color: var(--mi-red); }
.sidebar i.fa-clinic-medical    { --menu-icon-color: var(--mi-teal); }
.sidebar i.fa-receipt           { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-calendar-week     { --menu-icon-color: var(--mi-violet); }
.sidebar i.fa-calendar-day      { --menu-icon-color: var(--mi-purple); }
.sidebar i.fa-file-excel        { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-ruble-sign        { --menu-icon-color: var(--mi-lime); }
.sidebar i.fa-calculator        { --menu-icon-color: var(--mi-lime); }
.sidebar i.fa-file-archive      { --menu-icon-color: var(--mi-orange); }
.sidebar i.fa-percent           { --menu-icon-color: var(--mi-orange); }
.sidebar i.fa-layer-group       { --menu-icon-color: var(--mi-indigo); }
.sidebar i.fa-chart-bar         { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-plug              { --menu-icon-color: var(--mi-cyan); }
.sidebar i.fa-paper-plane       { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-bullhorn          { --menu-icon-color: var(--mi-orange); }
.sidebar i.fa-yandex            { --menu-icon-color: var(--mi-red); }
.sidebar i.fa-map-marked-alt    { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-hospital-alt      { --menu-icon-color: var(--mi-teal); }
.sidebar i.fa-vk                { --menu-icon-color: var(--mi-blue); }
.sidebar i.fa-robot             { --menu-icon-color: var(--mi-cyan); }
.sidebar i.fa-file-invoice-dollar { --menu-icon-color: var(--mi-lime); }
.sidebar i.fa-notes-medical     { --menu-icon-color: var(--mi-mint); }
.sidebar i.fa-globe             { --menu-icon-color: var(--mi-cyan); }
.sidebar i.fa-user-cog          { --menu-icon-color: var(--mi-indigo); }
.sidebar i.fa-box               { --menu-icon-color: var(--mi-orange); }
.sidebar i.fa-sitemap           { --menu-icon-color: var(--mi-indigo); }
.sidebar i.fa-shield-alt        { --menu-icon-color: var(--mi-green); }
.sidebar i.fa-code-branch       { --menu-icon-color: var(--mi-purple); }