/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar - адаптируется под тему */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.dark ::-webkit-scrollbar-track {
    background: #161616;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #2a2a2a;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a;
}

/* Animation for flash messages */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slide-in {
    animation: slideInRight 0.3s ease-out;
}

/* Унификация размеров иконок в info-cards */
.icon-bg-color {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-bg-color i {
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.icon-bg-color svg {
    width: 32px !important;
    height: 32px !important;
}


/* Dropdown items with icons - force horizontal layout */
.dropdown-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem;
}

.dropdown-item svg {
    flex-shrink: 0;
}

/* Корректное вычисление высоты sidebar с учетом viewport на мобильных */
/* Высота применяется через JavaScript напрямую к элементу для совместимости */
:root {
    --vh: 1vh; /* Fallback значение */
}

.sidebar-height {
    height: 100vh; /* Fallback */
    height: calc(var(--vh, 1vh) * 100); /* Используем CSS переменную */
    /* JavaScript переопределит значение напрямую для Edge Mobile */
}

/* Учитываем safe-area для нижней панели браузера на мобильных */
.mobile-sidebar-footer {
    padding-bottom: 1rem;
}

@supports (padding: max(0px)) {
    .mobile-sidebar-footer {
        padding-bottom: max(1rem, calc(1rem + env(safe-area-inset-bottom)));
    }
}

@media (max-width: 1023px) {
    /* На мобильных открываем dropdown вверх, чтобы не перекрывался нижней панелью браузера */
    .mobile-sidebar-footer details[open] .dropdown-menu {
        bottom: 100% !important;
        top: auto !important;
        margin-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
        margin-top: 0 !important;
    }
}

/* Поддержка динамического цвета фона иконок для темной темы */
.icon-bg-color {
    background-color: var(--bg-light);
}

.dark .icon-bg-color {
    background-color: var(--bg-dark);
}



/* Стили для контента из редактора */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    font-weight: 700;
    color: #111827;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.dark .article-content h1,
.dark .article-content h2,
.dark .article-content h3,
.dark .article-content h4,
.dark .article-content h5,
.dark .article-content h6 {
    color: #ffffff;
}

.article-content p {
    color: #374151;
    line-height: 1.75;
    margin-bottom: 1em;
}

.dark .article-content p {
    color: #d1d5db;
}

.article-content a {
    color: #9333ea;
    text-decoration: none;
}

.article-content a:hover {
    text-decoration: underline;
}

.article-content strong {
    font-weight: 600;
    color: #111827;
}

.dark .article-content strong {
    color: #ffffff;
}

.article-content em {
    font-style: italic;
}

.article-content code {
    color: #9333ea;
    background-color: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.dark .article-content code {
    background-color: #2a2a2a;
}

.article-content pre {
    background-color: #111827;
    color: #f3f4f6;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1em 0;
}

.dark .article-content pre {
    background-color: #1a1a1a;
}

.article-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

.article-content blockquote {
    border-left: 4px solid #9333ea;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 1em 0;
    background-color: #f9fafb;
    color: #374151;
    font-style: italic;
}

.dark .article-content blockquote {
    background-color: #2a2a2a;
    color: #d1d5db;
}

.article-content ul,
.article-content ol {
    margin: 1em 0;
    padding-left: 1.5rem;
}

.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content li {
    color: #374151;
    margin: 0.25em 0;
}

.dark .article-content li {
    color: #d1d5db;
}

.article-content img {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin: 1em 0;
    max-width: 100%;
    height: auto;
}

.article-content hr {
    border: none;
    border-top: 1px solid #d1d5db;
    margin: 2em 0;
}

.dark .article-content hr {
    border-top-color: #4b5563;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.article-content th,
.article-content td {
    border: 1px solid #d1d5db;
    padding: 0.5rem;
    text-align: left;
}

.dark .article-content th,
.dark .article-content td {
    border-color: #4b5563;
}

.article-content th {
    background-color: #f3f4f6;
    font-weight: 600;
}

.dark .article-content th {
    background-color: #2a2a2a;
}

/* Sidebar Collapse Styles */
/* Когда сайдбар свернут, применяем узкую ширину */
/* Предзагрузка состояния для предотвращения визуального "прыжка" */
@media (min-width: 1024px) {
    html.sidebar-collapsed-preload body,
    body.sidebar-collapsed {
        /* Применяем класс к body через JS после загрузки */
    }
    
    html.sidebar-collapsed-preload #sidebar,
    body.sidebar-collapsed #sidebar {
        width: 5.5rem; /* 88px - шире для комфортного размещения элементов */
    }
    
    /* Скрываем переход при предзагрузке */
    html.sidebar-collapsed-preload #sidebar {
        transition: none;
    }
    
    /* Скрываем текстовые элементы при сворачивании */
    html.sidebar-collapsed-preload #sidebar .sidebar-brand-text,
    html.sidebar-collapsed-preload #sidebar .sidebar-menu-text,
    html.sidebar-collapsed-preload #sidebar .sidebar-section-title,
    html.sidebar-collapsed-preload #sidebar .sidebar-footer-text,
    html.sidebar-collapsed-preload #sidebar .sidebar-footer-icon,
    body.sidebar-collapsed #sidebar .sidebar-brand-text,
    body.sidebar-collapsed #sidebar .sidebar-menu-text,
    body.sidebar-collapsed #sidebar .sidebar-section-title,
    body.sidebar-collapsed #sidebar .sidebar-footer-text,
    body.sidebar-collapsed #sidebar .sidebar-footer-icon {
        display: none !important;
    }
    
    /* Центрируем элементы в узком сайдбаре */
    html.sidebar-collapsed-preload #sidebar .sidebar-header,
    body.sidebar-collapsed #sidebar .sidebar-header {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        justify-content: center;
    }
    
    html.sidebar-collapsed-preload #sidebar .sidebar-header-content,
    body.sidebar-collapsed #sidebar .sidebar-header-content {
        justify-content: center;
        width: 100%;
    }
    
    /* В развёрнутом состоянии логотип по левому краю */
    #sidebar .sidebar-header-content {
        justify-content: flex-start;
    }
    
    /* Убираем скроллбар на мобильных при открытом сайдбаре */
    @media (max-width: 1023px) {
        /* Убираем скроллбар у body и html когда сайдбар открыт */
        body.sidebar-open,
        html.sidebar-open {
            overflow: hidden !important;
            height: 100% !important;
            position: fixed !important;
            width: 100% !important;
        }
        
        /* Сайдбар может иметь свой скролл, но не должен вызывать скролл у body */
        #sidebar {
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Убираем скроллбар у контента страницы на мобильных когда сайдбар открыт */
        body.sidebar-open .min-h-screen,
        body.sidebar-open header,
        body.sidebar-open main {
            overflow: hidden !important;
        }
    }
    
    /* Анимация иконки кнопки сворачивания */
    #sidebar .sidebar-collapse-btn .sidebar-collapse-icon {
        transition: transform 0.3s ease;
    }
    
    body.sidebar-collapsed #sidebar .sidebar-collapse-btn:hover .sidebar-collapse-icon {
        transform: scale(1.1);
    }
    
    html.sidebar-collapsed-preload #sidebar .sidebar-menu-item,
    body.sidebar-collapsed #sidebar .sidebar-menu-item {
        margin-left: 0;
    }
    
    html.sidebar-collapsed-preload #sidebar .sidebar-menu-item a,
    html.sidebar-collapsed-preload #sidebar .sidebar-menu-item > div,
    body.sidebar-collapsed #sidebar .sidebar-menu-item a,
    body.sidebar-collapsed #sidebar .sidebar-menu-item > div {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    html.sidebar-collapsed-preload #sidebar .sidebar-footer,
    body.sidebar-collapsed #sidebar .sidebar-footer {
        padding: 0.5rem;
    }
    
    html.sidebar-collapsed-preload #sidebar .sidebar-footer-summary,
    body.sidebar-collapsed #sidebar .sidebar-footer-summary {
        justify-content: center;
        gap: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    html.sidebar-collapsed-preload #sidebar .sidebar-footer-dropdown,
    body.sidebar-collapsed #sidebar .sidebar-footer-dropdown {
        position: relative;
    }
    
    /* Скрываем текст в dropdown при свёрнутом сайдбаре */
    html.sidebar-collapsed-preload #sidebar .sidebar-dropdown-text,
    body.sidebar-collapsed #sidebar .sidebar-dropdown-text {
        display: none !important;
    }
    
    /* Центрируем иконки в dropdown при свёрнутом сайдбаре */
    html.sidebar-collapsed-preload #sidebar .sidebar-dropdown-item,
    body.sidebar-collapsed #sidebar .sidebar-dropdown-item {
        justify-content: center !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Скрываем разделитель в dropdown при свёрнутом сайдбаре */
    html.sidebar-collapsed-preload #sidebar .sidebar-dropdown-divider,
    body.sidebar-collapsed #sidebar .sidebar-dropdown-divider {
        display: none !important;
    }
    
    /* Адаптируем размер и позиционирование dropdown при свёрнутом сайдбаре */
    /* Ширина dropdown должна совпадать с шириной summary (блока с аватаркой) */
    html.sidebar-collapsed-preload #sidebar .sidebar-dropdown-menu,
    body.sidebar-collapsed #sidebar .sidebar-dropdown-menu {
        width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateX(0) !important;
    }
    
    /* Убеждаемся, что dropdown не выходит за границы свёрнутого сайдбара */
    html.sidebar-collapsed-preload #sidebar .sidebar-footer-dropdown[open] .sidebar-dropdown-menu,
    body.sidebar-collapsed #sidebar .sidebar-footer-dropdown[open] .sidebar-dropdown-menu {
        position: absolute !important;
        bottom: 100% !important;
        top: auto !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Адаптация отступов контента при сворачивании сайдбара */
    html.sidebar-collapsed-preload .lg\:pl-64,
    body.sidebar-collapsed .lg\:pl-64 {
        padding-left: 5.5rem !important; /* 88px вместо 256px */
    }
    
    /* Адаптация header при сворачивании */
    html.sidebar-collapsed-preload .header-sidebar.lg\:pl-64,
    body.sidebar-collapsed .header-sidebar.lg\:pl-64 {
        padding-left: 5.5rem !important; /* 88px вместо 256px */
    }
    
    /* Убираем скроллбар при наведении - скрываем overflow-x, но разрешаем tooltip выходить за границы */
    html.sidebar-collapsed-preload #sidebar,
    body.sidebar-collapsed #sidebar {
        overflow-y: auto;
        overflow-x: clip; /* clip вместо hidden для лучшей поддержки tooltip */
    }
    
    /* Разрешаем tooltip выходить за границы сайдбара */
    html.sidebar-collapsed-preload #sidebar nav,
    body.sidebar-collapsed #sidebar nav {
        overflow-y: auto;
        overflow-x: clip;
    }
    
    /* Убеждаемся, что аватарка остается круглой */
    html.sidebar-collapsed-preload #sidebar .sidebar-footer-summary img,
    body.sidebar-collapsed #sidebar .sidebar-footer-summary img,
    html.sidebar-collapsed-preload #sidebar .sidebar-footer-summary > div,
    body.sidebar-collapsed #sidebar .sidebar-footer-summary > div {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        aspect-ratio: 1 / 1;
    }
    
}

/* Smooth scroll offset for department sections */
.department-section {
    scroll-margin-top: 6rem;
}

/* Button Group navigation styling */
.department-navigation-group {
    flex-wrap: nowrap;
}

.department-nav-btn {
    white-space: nowrap;
    min-width: fit-content;
    padding-left: 1rem;
    padding-right: 1rem;
}