/* БАЗОВЫЕ СТИЛИ */
body {
    font-family: 'Segoe UI', sans-serif; /* основной шрифт */
    font-size: 1rem; /* базовый размер шрифта */
    line-height: 1.5; /* межстрочный интервал */
    padding-top: 70px; /* отступ для фиксированного навбара */
    overflow-x: hidden; /* предотвращает горизонтальную прокрутку */
}

header {
    background-color: #ffffff; /* белый фон хедера */
    padding: 10px 20px; /* внутренние отступы */
    border-bottom: 1px solid #e5e5e5; /* нижняя граница */
}

/* НАВБАР - Базовые стили */
.navbar {
    position: fixed; /* фиксированное позиционирование */
    top: 0; /* прижимает к верху */
    width: 100%; /* на всю ширину экрана */
    z-index: 1030; /* слой выше других элементов */
    background-color: rgba(0, 0, 0, 0); /* полупрозрачный белый фон */
    border-bottom: 1px solid rgba(255, 255, 255, 0.47); /* нижняя граница */
    padding: 10px 0; /* вертикальные отступы */
    backdrop-filter: blur(10px); /* размытие фона */
}

/* Логотип навигации */
.nav-bar-logo {
    max-width: 120px; /* максимальная ширина логотипа */
    height: auto; /* автоматическая высота */
}

/* Ссылки пользователей */
.user-link {
    display: inline-flex; /* флекс в строку */
    align-items: center; /* выравнивание по центру */
    text-decoration: none; /* убирает подчеркивание */
    color: inherit; /* наследует цвет */
}

.user-link img {
    width: 15px; /* ширина иконки */
    height: 15px; /* высота иконки */
    margin-right: 5px; /* отступ справа */
}

/* Эффект при наведении на ссылки навигации */
.nav-link:hover {
    background-color: #495057; /* темный фон при наведении */
    border-radius: 5px; /* скругленные углы */
}

/* ОСНОВНОЙ КОНТЕНТ */
.content-wrapper {
    display: flex; /* флекс-контейнер */
    align-items: flex-start; /* выравнивание к верху */
    gap: 30px; /* отступ между элементами */
    padding: 0 30px; /* горизонтальные отступы */
}

/* БАННЕРЫ */
.banner img {
    width: 80%; /* ширина изображения */
    height: auto; /* автоматическая высота */
    max-height: 400px; /* максимальная высота */
    object-fit: cover; /* сохраняет пропорции */
    border-radius: 10px; /* скругленные углы */
}

.banner-img {
    object-fit: cover; /* сохраняет пропорции */
    height: 200px; /* фиксированная высота */
}

/* КАРТОЧКИ */
.card {
    border-radius: 10px; /* скругленные углы */
    overflow: hidden; /* скрывает выступающий контент */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* плавные переходы */
}

.card:hover {
    transform: translateY(-2px); /* поднимает карточку при наведении */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* добавляет тень */
}

.card img {
    object-fit: cover; /* сохраняет пропорции изображений */
}

/* КНОПКИ */
.btn-outline-secondary {
    border-color: #a85b7c; /* цвет границы кнопки */
    color: #a85b7c; /* цвет текста */
}

.btn-outline-secondary:hover {
    background-color: #a85b7c; /* фон при наведении */
    color: #fff; /* белый текст при наведении */
}

.btn-accept-all {
    background-color: #a85b7c; /* основной цвет кнопки */
    color: white; /* белый текст */
    border: none; /* без границы */
    padding: 12px 30px; /* внутренние отступы */
    border-radius: 8px; /* скругленные углы */
    font-size: 1rem; /* размер шрифта */
    transition: all 0.3s ease; /* плавный переход */
}

.btn-accept-all:hover {
    background-color: #946a7a; /* темнее при наведении */
    transform: translateY(-1px); /* поднимает кнопку */
    box-shadow: 0 4px 10px rgba(168, 91, 124, 0.3); /* добавляет тень */
}

/* ФОРМЫ */
.form-container {
    max-width: 500px; /* максимальная ширина формы */
    margin: 50px auto; /* центрирование с отступами */
    padding: 30px; /* внутренние отступы */
    border-radius: 15px; /* скругленные углы */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* тень вокруг формы */
}

.form-section {
    background-color: rgba(255, 255, 255, 0.05); /* полупрозрачный фон */
    border-radius: 15px; /* скругленные углы */
    padding: 25px; /* внутренние отступы */
    margin-bottom: 30px; /* отступ снизу */
}

/* ПАГИНАЦИЯ - базовые стили */
.home-pagination .page-item .page-link {
    background-color: transparent; /* прозрачный фон */
    color: #000; /* черный цвет текста */
    border: none; /* без границы */
    padding: 0.5rem 0.75rem; /* внутренние отступы */
}

.home-pagination .page-item.active .page-link {
    background-color: #a85b7c; /* активная страница */
    color: #fff; /* белый текст */
    border-radius: 0.5rem; /* скругленные углы */
}

.home-pagination .page-item.disabled .page-link {
    color: #aaa; /* серый цвет для отключенных */
    pointer-events: none; /* отключает клики */
}

/* МЕНЕДЖЕР ПАНЕЛЬ */
#wrapper {
    min-height: 100vh; /* минимальная высота на весь экран */
}

#sidebar-wrapper {
    min-height: 100vh; /* минимальная высота сайдбара */
    background-color: #343a40; /* темно-серый фон */
}

/* ФУТЕР */
footer {
    padding: 20px; /* внутренние отступы */
    text-align: center; /* выравнивание по центру */
    font-size: 0.9em; /* размер шрифта */
    color: #777; /* серый цвет текста */
    margin-top: 50px; /* отступ сверху */
}

footer a {
    color: #a85b7c; /* цвет ссылок в футере */
    text-decoration: none; /* без подчеркивания */
}

/* ДЕСКТОПНАЯ ВЕРСИЯ НАВБАРА */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        padding: 8px 16px; /* отступы ссылок */
        margin: 0 4px; /* внешние отступы */
        border-radius: 6px; /* скругленные углы */
        transition: all 0.3s ease; /* плавный переход */
    }

    .navbar-nav .nav-link:hover {
        background-color: #747487; /* фон при наведении */
        transform: translateY(-1px); /* поднимает ссылку */
    }

    /* Убираем padding-top для десктопа если навбар не фиксированный */
    body {
        padding-top: 0; /* без отступа сверху */
    }

    /* Если навбар все же фиксированный на десктопе */
    .navbar-fixed-desktop body {
        padding-top: 70px; /* отступ для фиксированного навбара */
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ НАВБАРА */
@media (max-width: 991px) {
    /* Навбар остается сверху */
    .navbar {
        padding: 8px 0; /* уменьшенные отступы */
    }

    /* Контейнер навбара на мобильных */
    .navbar .container-fluid {
        display: flex; /* флекс-контейнер */
        align-items: center; /* выравнивание по центру */
        justify-content: space-between; /* распределяет элементы */
        position: relative; /* относительное позиционирование */
    }

    /* Бургер перед логотипом */
    .navbar-toggler {
        order: 1; /* первый в порядке */
        border: none; /* без границы */
        padding: 6px 10px; /* внутренние отступы */
        background-color: #6c757d !important; /* серый фон */
        border-radius: 4px; /* скругленные углы */
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* иконка бургера */
        width: 20px; /* ширина иконки */
        height: 20px; /* высота иконки */
    }

    /* Логотип по центру */
    .logo {
        order: 2; /* второй в порядке */
        position: absolute; /* абсолютное позиционирование */
        left: 50%; /* от левого края 50% */
        transform: translateX(-50%); /* центрирует логотип */
    }

    .nav-bar-logo {
        max-width: 100px; /* уменьшенный размер для мобильных */
    }

    /* Правая часть (язык, тема) остается справа */
    .mobile-right-controls {
        order: 3; /* третий в порядке */
        display: flex; /* флекс-контейнер */
        align-items: center; /* выравнивание по центру */
        gap: 8px; /* отступ между элементами */
    }

    /* Скрываем стандартный коллапс */
    .navbar-collapse {
        display: none !important; /* полностью скрываем */
    }

    /* Боковая панель слева */
    .mobile-sidebar {
        position: fixed; /* фиксированное позиционирование */
        top: 0; /* прижимает к верху экрана */
        left: -300px; /* скрывает панель за левым краем */
        width: 280px; /* ширина панели */
        height: 100vh; /* высота на весь экран */
        background-color: #504040; /* основной цвет фона панели */
        box-shadow: 2px 0 10px rgba(175, 155, 155, 0.15); /* тень справа от панели */
        transition: left 0.3s ease; /* плавная анимация появления */
        z-index: 1040; /* слой выше других элементов */
        overflow-y: auto; /* вертикальная прокрутка при необходимости */
        padding: 0; /* убирает внутренние отступы */
    }

    .mobile-sidebar.show {
        left: 0; /* показывает панель (сдвигает к левому краю) */
    }

    /* Заголовок боковой панели */
    .sidebar-header {
        padding: 20px; /* внутренние отступы */
        border-bottom: 1px solid #666; /* нижняя граница */
        background-color: #504040; /* цвет фона заголовка */
        display: flex; /* флекс-контейнер */
        justify-content: space-between; /* распределяет элементы по краям */
        align-items: center; /* выравнивает по центру вертикально */
    }

    .sidebar-close {
        background: none; /* убирает фон кнопки */
        border: none; /* убирает рамку */
        font-size: 24px; /* размер иконки закрытия */
        color: #ffffff; /* белый цвет иконки */
        cursor: pointer; /* указатель при наведении */
        padding: 0; /* убирает отступы */
        width: 30px; /* ширина кнопки */
        height: 30px; /* высота кнопки */
        display: flex; /* флекс для центрирования */
        align-items: center; /* центрирует по вертикали */
        justify-content: center; /* центрирует по горизонтали */
    }

    .sidebar-close:hover {
        color: #cccccc; /* светло-серый при наведении */
    }

    /* Контент боковой панели */
    .sidebar-content {
        padding: 20px 0; /* вертикальные отступы */
    }

    .sidebar-nav {
        list-style: none; /* убирает маркеры списка */
        padding: 0; /* убирает отступы списка */
        margin: 0; /* убирает внешние отступы */
    }

    .sidebar-nav li {
        margin: 0; /* убирает отступы элементов списка */
    }

    .sidebar-nav .nav-link {
        display: block; /* блочный элемент */
        padding: 12px 20px; /* внутренние отступы ссылки */
        color: #ffffff; /* белый цвет текста */
        text-decoration: none; /* убирает подчеркивание */
        border-bottom: 1px solid #666; /* нижняя граница */
        transition: background-color 0.2s; /* плавный переход фона */
    }

    .sidebar-nav .nav-link:hover {
        background-color: #665555; /* темнее фон при наведении */
        color: #ffffff; /* белый цвет остается */
    }

    /* Пользователь в боковой панели */
    .sidebar-user {
        padding: 15px 20px; /* внутренние отступы */
        border-top: 1px solid #666; /* верхняя граница */
        background-color: #504040; /* цвет фона секции пользователя */
        margin-top: auto; /* прижимает к низу */
    }

    .sidebar-user .user-info {
        display: flex; /* флекс-контейнер */
        align-items: center; /* выравнивает по центру */
        margin-bottom: 10px; /* отступ снизу */
        color: #ffffff; /* белый цвет текста */
    }

    .sidebar-user .user-info img {
        width: 24px; /* ширина аватара */
        height: 24px; /* высота аватара */
        margin-right: 8px; /* отступ справа от аватара */
    }

    .sidebar-user .btn {
        width: 100%; /* кнопка на всю ширину */
        margin-top: 8px; /* отступ сверху */
        background-color: #665555; /* цвет фона кнопки */
        border-color: #665555; /* цвет границы кнопки */
        color: #ffffff; /* белый цвет текста кнопки */
    }

    .sidebar-user .btn:hover {
        background-color: #776666; /* светлее при наведении */
        border-color: #776666; /* цвет границы при наведении */
        color: #ffffff; /* белый цвет остается */
    }

    /* Оверлей */
    .mobile-overlay {
        position: fixed; /* фиксированное позиционирование */
        top: 0; /* прижимает к верху */
        left: 0; /* прижимает к левому краю */
        width: 100%; /* на всю ширину экрана */
        height: 100%; /* на всю высоту экрана */
        background-color: rgba(255, 255, 255, 0.36); /* полупрозрачное затемнение фона */
        z-index: 1035; /* слой ниже панели, но выше остального контента */
        opacity: 0; /* невидимый по умолчанию */
        visibility: hidden; /* скрыт по умолчанию */
        transition: all 0.3s ease; /* плавная анимация появления */
    }

    .mobile-overlay.show {
        opacity: 1; /* делает видимым */
        visibility: visible; /* показывает элемент */
    }

    /* Компактные контролы в навбаре */
    .mobile-right-controls .form-select {
        font-size: 0.8rem; /* размер шрифта селекта */
        padding: 4px 8px; /* внутренние отступы */
        min-width: 60px; /* минимальная ширина */
    }

    .mobile-right-controls .btn {
        font-size: 0.8rem; /* размер шрифта кнопки */
        padding: 4px 8px; /* внутренние отступы */
    }
}

/* АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ */

/* Очень маленькие экраны */
@media (max-width: 576px) {
    /* Общие настройки */
    body {
        font-size: 0.9rem; /* уменьшенный размер шрифта */
        padding-top: 60px; /* меньший отступ для мобильных */
    }

    /* Хедер */
    header {
        padding: 8px 15px; /* уменьшенные отступы */
    }

    /* Мобильная боковая панель */
    .mobile-sidebar {
        width: 260px; /* уменьшенная ширина панели */
        left: -260px; /* соответствующий отступ */
    }

    .nav-bar-logo {
        max-width: 80px; /* еще меньше логотип */
    }

    .mobile-right-controls .form-select {
        font-size: 0.75rem; /* еще меньший шрифт */
        padding: 3px 6px; /* уменьшенные отступы */
        min-width: 55px; /* минимальная ширина */
    }

    .mobile-right-controls .btn {
        font-size: 0.75rem; /* еще меньший шрифт */
        padding: 3px 6px; /* уменьшенные отступы */
    }

    /* Основной контент - делаем колонкой */
    .content-wrapper {
        flex-direction: column; /* вертикальное расположение */
        gap: 20px; /* отступ между элементами */
        padding: 0 15px; /* горизонтальные отступы */
    }

    /* Контейнеры */
    .container {
        padding-left: 1rem; /* левый отступ контейнера */
        padding-right: 1rem; /* правый отступ контейнера */
    }

    /* Баннеры */
    .banner img {
        width: 100%; /* на всю ширину */
        max-height: 250px; /* уменьшенная максимальная высота */
    }

    .banner-img {
        height: 180px; /* уменьшенная высота */
    }

    /* Формы */
    .form-control,
    .form-select,
    .btn {
        font-size: 0.9rem; /* размер шрифта элементов формы */
        padding: 0.5rem 0.75rem; /* внутренние отступы */
    }

    .form-container {
        margin: 20px auto; /* отступы контейнера формы */
        padding: 20px; /* внутренние отступы */
        max-width: 100%; /* на всю доступную ширину */
    }

    .form-section {
        padding: 15px; /* уменьшенные отступы секции формы */
        margin-bottom: 20px; /* отступ снизу */
    }

    .btn-accept-all {
        width: 100%; /* кнопка на всю ширину */
        padding: 12px; /* внутренние отступы */
        font-size: 0.95rem; /* размер шрифта */
    }

    form .mb-3 {
        margin-bottom: 1rem !important; /* отступ между полями формы */
    }

    /* Заголовки */
    h2 {
        font-size: 1.5rem; /* размер основных заголовков */
        margin-bottom: 1.5rem; /* отступ снизу */
    }

    h4 {
        font-size: 1.2rem; /* размер подзаголовков */
        margin-bottom: 1rem; /* отступ снизу */
    }

    h5 {
        font-size: 1.1rem; /* размер малых заголовков */
    }

    /* Навигация */
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem; /* отступы ссылок навигации */
        font-size: 0.9rem; /* размер шрифта */
    }

    /* Карточки */
    .card {
        margin-bottom: 1rem; /* отступ между карточками */
    }

    .card-img-top {
        height: 200px; /* высота изображений в карточках */
        object-fit: cover; /* сохраняет пропорции */
    }

    /* Пагинация на мобильных */
    .home-pagination .page-item .page-link {
        padding: 0.4rem 0.6rem; /* уменьшенные отступы */
        font-size: 0.85rem; /* меньший размер шрифта */
    }

    .pagination {
        justify-content: center; /* центрирует пагинацию */
        flex-wrap: wrap; /* переносит элементы на новую строку */
    }

    .page-link {
        margin: 2px; /* отступы между ссылками */
    }

    /* Списки */
    .list-group-item {
        padding: 0.8rem 1rem; /* внутренние отступы элементов списка */
        font-size: 0.9rem; /* размер шрифта */
    }

    /* Модальные окна */
    .modal-dialog {
        margin: 10px; /* отступы модального окна */
        max-width: calc(100% - 20px); /* максимальная ширина */
    }

    .modal-body img {
        max-height: 250px; /* максимальная высота изображений */
        width: 100%; /* на всю ширину */
        object-fit: contain; /* сохраняет пропорции */
    }

    /* Отступы контейнеров */
    .py-5 {
        padding-top: 2rem !important; /* верхний отступ */
        padding-bottom: 2rem !important; /* нижний отступ */
    }

    /* Сайдбар на мобильных */
    #sidebar-wrapper {
        min-height: auto; /* автоматическая высота */
    }

    /* Футер */
    footer {
        padding: 15px; /* уменьшенные отступы */
        font-size: 0.8em; /* меньший размер шрифта */
        margin-top: 30px; /* отступ сверху */
    }
}

/* Планшеты */
@media (min-width: 577px) and (max-width: 768px) {
    .content-wrapper {
        gap: 20px; /* отступ между элементами */
        padding: 0 20px; /* горизонтальные отступы */
    }

    .banner-img {
        height: 280px; /* высота банерного изображения */
    }

    .form-container {
        margin: 40px auto; /* отступы контейнера формы */
        padding: 25px; /* внутренние отступы */
    }

    .form-section {
        padding: 25px; /* внутренние отступы секции формы */
    }

    .card-img-top {
        height: 220px; /* высота изображений в карточках */
    }
}

/* Планшеты в портретном режиме */
@media (min-width: 577px) and (max-width: 991px) {
    .mobile-sidebar {
        width: 300px; /* ширина боковой панели */
        left: -300px; /* скрывает панель */
    }

    .mobile-right-controls .form-select {
        font-size: 0.85rem; /* размер шрифта селекта */
        padding: 5px 10px; /* внутренние отступы */
        min-width: 65px; /* минимальная ширина */
    }

    .mobile-right-controls .btn {
        font-size: 0.85rem; /* размер шрифта кнопки */
        padding: 5px 10px; /* внутренние отступы */
    }
}

/* Средние экраны (планшеты и небольшие десктопы) */
@media (min-width: 768px) {
    .banner-img {
        height: 350px; /* увеличенная высота баннера */
    }

    body {
        padding-top: 70px; /* восстанавливаем отступ для навбара */
    }
}

/* Большие экраны */
@media (min-width: 992px) {
    .content-wrapper {
        gap: 40px; /* больший отступ между элементами */
        padding: 0 40px; /* горизонтальные отступы */
    }

    .banner-img {
        height: 400px; /* максимальная высота баннера */
    }

    .form-section {
        padding: 30px; /* увеличенные внутренние отступы */
    }

    .card-img-top {
        height: 250px; /* высота изображений в карточках */
    }
}

/* Ландшафтная ориентация на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-sidebar {
        width: 280px; /* ширина боковой панели */
        left: -280px; /* скрывает панель */
    }

    .navbar {
        padding: 6px 0; /* уменьшенные отступы навбара */
    }

    body {
        padding-top: 55px; /* меньший отступ сверху */
    }

    .modal-body img {
        max-height: 200px; /* уменьшенная высота изображений в модалках */
    }
}

/* ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ УЛУЧШЕНИЯ UX */

/* Плавные переходы для всех интерактивных элементов */
* {
    box-sizing: border-box; /* включает границы и отступы в размеры элементов */
}

/* Улучшение скроллинга на мобильных */
html {
    scroll-behavior: smooth; /* плавная прокрутка */
    -webkit-overflow-scrolling: touch; /* улучшенная прокрутка на iOS */
}

/* Предотвращение выделения текста на интерактивных элементах */
.btn, .card, .page-link, .nav-link {
    -webkit-user-select: none; /* отключает выделение на WebKit */
    -moz-user-select: none; /* отключает выделение на Firefox */
    -ms-user-select: none; /* отключает выделение на IE */
    user-select: none; /* стандартное свойство */
}

/* Улучшение производительности анимаций */
.card, .btn, .nav-link, .mobile-sidebar, .mobile-overlay {
    will-change: transform; /* оптимизирует анимации */
    transform: translateZ(0); /* активирует аппаратное ускорение */
}