/* ============================================
   ФАЙЛ: responsive.css
   ОПИСАНИЕ: Адаптивные стили для всех устройств
   ============================================ */

/* ========== МОБИЛЬНЫЕ УСТРОЙСТВА (до 575.98px) ========== */
@media (max-width: 575.98px) {
    /* Hero секция на мобильных */
    .hero-section {
        padding: var(--spacing-xl) 0 !important; /* Уменьшенные отступы */
        text-align: center;                    /* Центрирование текста */
    }
    
    /* Заголовок hero на мобильных */
    .hero-section h1 {
        font-size: 1.75rem;                   /* Уменьшенный размер шрифта */
        margin-bottom: var(--spacing-sm);     /* Уменьшенный отступ */
    }
    
    /* Контейнер с полной шириной на мобильных */
    .container-fluid {
        padding-left: var(--spacing-sm);      /* Уменьшенный отступ слева */
        padding-right: var(--spacing-sm);     /* Уменьшенный отступ справа */
    }
    
    /* Тело карточки на мобильных */
    .card-body {
        padding: var(--spacing-md) !important; /* Уменьшенные отступы с приоритетом */
    }
    
    /* Заголовки профиля, входа, тикетов на мобильных */
    .profile-header,
    .login-header,
    .ticket-header {
        padding: var(--spacing-lg) var(--spacing-md); /* Уменьшенные отступы */
    }
    
    /* Большая кнопка на мобильных */
    .btn-lg {
        padding: var(--spacing-sm) var(--spacing-md); /* Уменьшенные отступы */
        font-size: var(--font-size-base);     /* Базовый размер шрифта */
    }
    
    /* Бренд навигации на мобильных */
    .navbar-brand span {
        font-size: var(--font-size-lg);       /* Уменьшенный размер шрифта */
    }
    
    /* Заголовок страницы на мобильных */
    .title_page {
        font-size: 2rem;                      /* Уменьшенный размер шрифта */
        text-align: center;                   /* Центрирование */
    }
    
    /* Основной контент на мобильных */
    .main-content {
        padding: var(--spacing-lg) 0;         /* Уменьшенные отступы */
    }
    
    /* Карточки на мобильных */
    .card {
        margin-bottom: var(--spacing-md);     /* Уменьшенный отступ */
    }
    
    /* Изображения в карточках новостей на мобильных */
    .news-card .card-img-top {
        height: 150px;                        /* Уменьшенная высота */
    }
}

/* ========== ПЛАНШЕТЫ (от 576px до 767.98px) ========== */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Hero секция на планшетах */
    .hero-section {
        padding: var(--spacing-xxl) 0 !important; /* Стандартные отступы */
    }
    
    /* Заголовок hero на планшетах */
    .hero-section h1 {
        font-size: 2.5rem;                    /* Средний размер шрифта */
    }
    
    /* Изображение hero на планшетах */
    .img_hero {
        width: 180px;                         /* Средняя ширина */
        height: 180px;                        /* Средняя высота */
    }
    
    /* Контейнер с полной шириной на планшетах */
    .container-fluid {
        padding-left: var(--spacing-md);      /* Стандартный отступ слева */
        padding-right: var(--spacing-md);     /* Стандартный отступ справа */
    }
}

/* ========== НОУТБУКИ (от 768px до 991.98px) ========== */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Hero секция на ноутбуках */
    .hero-section {
        padding: var(--spacing-xxl) 0 !important; /* Стандартные отступы */
    }
    
    /* Заголовок hero на ноутбуках */
    .hero-section h1 {
        font-size: 3rem;                      /* Увеличенный размер шрифта */
    }
    
    /* Сайдбар на ноутбуках */
    .sidebar {
        margin-top: var(--spacing-xxl);        /* Отступ сверху */
    }
    
    /* Карточки в сайдбаре на ноутбуках */
    .sidebar .card {
        margin-bottom: var(--spacing-lg);     /* Стандартный отступ */
    }
}

/* ========== БОЛЬШИЕ ЭКРАНЫ (от 992px) ========== */
@media (min-width: 992px) {
    /* Hero секция на больших экранах */
    .hero-section {
        padding: var(--spacing-xxl) 0 !important; /* Большие отступы */
    }
    
    /* Заголовок hero на больших экранах */
    .hero-section h1 {
        font-size: 3.5rem;                    /* Очень большой размер шрифта */
    }
    
    /* Изображение hero на больших экранах */
    .img_hero {
        width: 200px;                         /* Полная ширина */
        height: 200px;                        /* Полная высота */
    }
}

/* ========== ОСОБЫЕ АДАПТИВНЫЕ ИСПРАВЛЕНИЯ ========== */
@media (max-width: 768px) {
    /* Flex контейнер на мобильных */
    .d-md-flex {
        display: flex !important;            /* Flex контейнер с приоритетом */
    }
    
    /* Направление колонка на мобильных */
    .flex-md-column {
        flex-direction: column !important;    /* Вертикальное направление с приоритетом */
    }
    
    /* Центрирование текста на мобильных */
    .text-md-center {
        text-align: center !important;        /* Центрирование с приоритетом */
    }
    
    /* Статистика профиля на мобильных */
    .profile-stats {
        grid-template-columns: 1fr;            /* Одна колонка в сетке */
    }
    
    /* Действия профиля на мобильных */
    .profile-actions {
        grid-template-columns: 1fr;          /* Одна колонка в сетке */
    }
    
    /* Элемент тикета на мобильных */
    .ticket-item {
        padding: var(--spacing-md) !important; /* Уменьшенные отступы с приоритетом */
    }
    
    /* Навигация на мобильных */
    .navbar-collapse {
        text-align: center;                   /* Центрирование навигации */
        margin-top: var(--spacing-md);        /* Отступ сверху */
    }
    
    /* Список навигации на мобильных */
    .navbar-nav {
        margin-top: var(--spacing-sm);        /* Отступ сверху */
        width: 100%;                          /* Полная ширина */
    }
    
    /* Элемент навигации на мобильных */
    .navbar-nav .nav-item {
        width: 100%;                          /* Полная ширина */
        text-align: center;                   /* Центрирование */
    }
    
    /* Ссылка навигации на мобильных */
    .navbar-nav .nav-link {
        padding: var(--spacing-sm) var(--spacing-md); /* Внутренние отступы */
        display: block;                       /* Блочный элемент */
        width: 100%;                          /* Полная ширина */
    }
    
    /* Кнопки в шапке на мобильных */
    header .btn {
        width: 100%;                          /* Полная ширина кнопок */
        margin-bottom: var(--spacing-sm);     /* Отступ снизу */
    }
    
    /* Выпадающее меню на мобильных */
    .dropdown-menu {
        width: 100%;                          /* Полная ширина меню */
        text-align: center;                   /* Центрирование */
    }
}

/* ========== ИСПРАВЛЕНИЯ ДЛЯ КАРТОЧЕК ========== */

/* Карточка с flexbox */
.card {
    display: flex;                            /* Flex контейнер */
    flex-direction: column;                   /* Вертикальное направление */
}

/* Тело карточки с flexbox */
.card-body {
    flex: 1 1 auto;                          /* Растягивается для заполнения пространства */
}

/* ========== ИСПРАВЛЕНИЯ ДЛЯ ТАБЛИЦ ========== */

/* Адаптивная таблица */
.table-responsive {
    overflow-x: auto;                         /* Горизонтальная прокрутка при переполнении */
    -webkit-overflow-scrolling: touch;        /* Плавная прокрутка на iOS */
}

/* Таблица на мобильных */
@media (max-width: 768px) {
    .table {
        font-size: var(--font-size-sm);       /* Уменьшенный размер шрифта */
    }
    
    .table th,
    .table td {
        padding: var(--spacing-xs) var(--spacing-sm); /* Уменьшенные отступы */
    }
}

/* ========== ИСПРАВЛЕНИЯ ДЛЯ ФОРМ ========== */

/* Группа формы */
.form-group {
    margin-bottom: var(--spacing-md);        /* Отступ снизу */
}

/* Поле ввода на мобильных */
@media (max-width: 768px) {
    .form-control {
        font-size: 16px;                      /* Размер шрифта для предотвращения зума на iOS */
        padding: var(--spacing-sm);          /* Внутренние отступы */
    }
    
    .form-label {
        font-size: var(--font-size-sm);       /* Уменьшенный размер метки */
        margin-bottom: var(--spacing-xs);     /* Уменьшенный отступ */
    }
}

/* ========== ИСПРАВЛЕНИЯ ДЛЯ КНОПОК ========== */

/* Вертикальная группа кнопок */
.btn-group-vertical {
    width: 100%;                              /* Полная ширина */
}

/* Кнопка в вертикальной группе */
.btn-group-vertical .btn {
    margin-bottom: var(--spacing-xs);        /* Отступ снизу */
    width: 100%;                              /* Полная ширина */
}

/* Кнопки на мобильных */
@media (max-width: 768px) {
    .btn {
        width: 100%;                          /* Полная ширина кнопок */
        margin-bottom: var(--spacing-sm);     /* Отступ снизу */
    }
    
    .btn-group .btn {
        width: auto;                          /* Автоматическая ширина в группе */
        margin-bottom: 0;                     /* Убираем отступ в группе */
    }
}

/* ========== ИСПРАВЛЕНИЯ ДЛЯ ИЗОБРАЖЕНИЙ ========== */

/* Адаптивное изображение */
img {
    max-width: 100%;                          /* Максимальная ширина */
    height: auto;                             /* Автоматическая высота */
}

/* Изображение на мобильных */
@media (max-width: 768px) {
    .img_hero {
        max-width: 150px;                     /* Максимальная ширина */
        margin: 0 auto;                       /* Центрирование */
    }
    
    .img_news_detail {
        width: 100% !important;              /* Полная ширина с приоритетом */
        margin-bottom: var(--spacing-md);     /* Отступ снизу */
    }
}

/* ========== ИСПРАВЛЕНИЯ ДЛЯ МОДАЛЬНЫХ ОКОН ========== */

/* Модальное окно на мобильных */
@media (max-width: 768px) {
    .modal-dialog {
        margin: var(--spacing-sm);            /* Отступы по краям */
        max-width: calc(100% - var(--spacing-md)); /* Максимальная ширина с отступами */
    }
    
    .modal-content {
        border-radius: var(--border-radius-md); /* Скругление углов */
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--spacing-md);          /* Внутренние отступы */
    }
}

/* ========== ИСПРАВЛЕНИЯ ДЛЯ ПОДВАЛА ========== */

/* Подвал на мобильных */
@media (max-width: 768px) {
    footer {
        padding: var(--spacing-lg) 0;        /* Уменьшенные отступы */
        text-align: center;                   /* Центрирование текста */
    }
    
    footer .col-lg-4,
    footer .col-md-6 {
        margin-bottom: var(--spacing-lg);     /* Отступ снизу */
        text-align: center;                   /* Центрирование */
    }
    
    footer .social-links {
        justify-content: center;              /* Центрирование социальных ссылок */
    }
}

/* ========== ОБЩИЕ АДАПТИВНЫЕ УЛУЧШЕНИЯ ========== */

/* Плавная прокрутка на всех устройствах */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: auto;             /* Плавная прокрутка отключена */
    }
}

/* Улучшение читаемости на маленьких экранах */
@media (max-width: 575.98px) {
    body {
        font-size: var(--font-size-sm);       /* Уменьшенный базовый размер шрифта */
    }
    
    h1 {
        font-size: 1.75rem;                   /* Уменьшенный размер заголовка */
    }
    
    h2 {
        font-size: 1.5rem;                    /* Уменьшенный размер подзаголовка */
    }
    
    h3 {
        font-size: 1.25rem;                   /* Уменьшенный размер подзаголовка */
    }
}

/* Улучшение отступов на планшетах */
@media (min-width: 576px) and (max-width: 991.98px) {
    .container-fluid {
        padding-left: var(--spacing-lg);      /* Увеличенный отступ слева */
        padding-right: var(--spacing-lg);     /* Увеличенный отступ справа */
    }
}