/* web_app/static/css/05-responsive.css
   Медиа-запросы: планшет, телефон, prefers-reduced-motion, touch.
   Выделено из style.css (разбивка god-файла). Порядок подключения важен —
   файлы 01..06 образуют единый каскад, см. templates/partials/_styles.html.
   Меняй стили в файле, чей номер соответствует блоку; новые правила —
   в конец тематического файла, последним каскадом идёт 06-ui.css. */

/* ==========================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ — комплексные медиа-запросы
   ========================================================================== */

/* --- Планшет (<=1024px) --- */
@media (max-width: 1024px) {
    .container {
        padding: 15px;
    }

    .main-header {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

    .header-left h1 {
        font-size: 1.4rem;
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .character-page {
        grid-template-columns: 1fr;
    }

    .character-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 20px;
    }

    /* Навигация персонажа — горизонтальная на планшете */
    .character-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .nav-btn {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .sheet-layout {
        grid-template-columns: 1fr;
    }

    .sheet-silhouette {
        max-width: 240px;
    }

    .sheet-checks-grid {
        grid-template-columns: 1fr;
    }

    .spells-grid,
    .crafts-grid,
    .abilities-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .stats-grid,
    .attributes-editor,
    .derived-attributes-editor,
    .side-attributes-editor,
    .talents-editor {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .derived-attributes-split {
        grid-template-columns: 1fr;
    }
}

/* --- Мобильный телефон (<=768px) --- */
@media (max-width: 768px) {
    /* --- Контейнер --- */
    .container {
        padding: 10px;
    }

    /* --- Заголовок --- */
    .main-header {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom-width: 1px;
    }

    .header-left {
        flex: 1 1 100%;
        min-width: 0;
    }

    .header-left h1 {
        font-size: 1.15rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .header-right {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Переключатель темы — компактнее */
    .theme-switch {
        --toggle-size: 12px;
        flex-shrink: 0;
    }

    /* Имя пользователя — компактнее */
    .username-display {
        font-size: 0.85rem;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Кнопки в шапке — меньше */
    .header-right .btn {
        padding: 6px 12px;
        font-size: 0.82rem;
    }

    .menu-toggle-btn {
        font-size: 1.5rem;
        padding: 4px 8px;
    }

    /* --- Боковая навигация --- */
    .side-nav {
        width: 260px;
    }

    .side-nav-right {
        width: 260px;
    }

    /* --- Модальные окна --- */
    .modal-content {
        margin: 5% auto;
        padding: 20px;
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .event-modal-content {
        margin: 10% auto;
        width: 95%;
    }

    .admin-schedule-content {
        margin: 2% auto;
        width: 95%;
        max-height: 90vh;
        padding: 18px;
    }

    /* --- Страница персонажа --- */
    .character-page {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .character-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        border-radius: 12px;
        padding: 16px;
    }

    /* Навигация — горизонтальная прокрутка на мобильных */
    .character-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding-bottom: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .character-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-btn {
        padding: 8px 12px;
        font-size: 0.82rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .character-content {
        padding: 16px;
        border-radius: 12px;
    }

    /* Силка экипировки — компактнее */
    .sheet-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sheet-silhouette {
        max-width: 200px;
    }

    .sheet-checks-grid {
        grid-template-columns: 1fr;
    }

    /* --- Сетки характеристик --- */
    .stats-grid,
    .attributes-editor,
    .derived-attributes-editor,
    .side-attributes-editor,
    .talents-editor {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .derived-attributes-split {
        grid-template-columns: 1fr;
    }

    /* --- Сетки карточек --- */
    .characters-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .spells-grid,
    .crafts-grid,
    .abilities-grid {
        grid-template-columns: 1fr;
    }

    .character-inventory-grid,
    .shop-grid {
        grid-template-columns: 1fr;
    }

    /* --- Формы --- */
    .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wallet-form {
        grid-template-columns: 1fr;
    }

    .inventory-custom-form {
        grid-template-columns: 1fr;
    }

    .inventory-custom-form textarea,
    .inventory-custom-form #customItemTags {
        grid-column: auto;
    }

    .inventory-section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .inventory-section-header .character-search-input {
        max-width: none;
    }

    .inventory-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .inventory-filter-bar label,
    .inventory-filter-bar select {
        width: 100%;
        max-width: none;
    }

    .inventory-filter-summary {
        margin-left: 0;
        padding-bottom: 0;
    }

    /* --- Дашборд --- */
    .dashboard-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .quick-links-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .quick-link-card {
        padding: 14px;
    }

    .quick-link-icon {
        font-size: 1.5rem;
    }

    .quick-link-title {
        font-size: 0.85rem;
    }

    /* --- Календарь --- */
    .calendar-card {
        padding: 14px;
    }

    .calendar-header h3 {
        font-size: 1rem;
    }

    .calendar-day {
        font-size: 0.8rem;
        border-radius: 6px;
    }

    .event-dots {
        bottom: 3px;
        gap: 2px;
    }
    .event-dot {
        width: 5px;
        height: 5px;
    }

    .schedule-legend {
        font-size: 0.7rem;
    }

    .event-item {
        padding: 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .event-date {
        min-width: auto;
    }

    /* --- Биография --- */
    #bioForm textarea {
        min-height: 60px;
    }

    /* --- Книга игрока --- */
    .topics-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .article-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* --- Уровень и опыт --- */
    .level-exp-display {
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px;
    }

    .exp-bar-container {
        min-width: 100%;
    }

    /* --- Кнопки отдыха --- */
    .sheet-rest-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .sheet-rest-buttons .btn {
        min-width: auto;
    }

    /* --- Проверки навыков --- */
    .sheet-skill-row {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    .sheet-skill-formula {
        display: none;
    }

    .sheet-skill-value {
        display: none;
    }

    /* --- Подвкладки --- */
    .sub-tabs {
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
    }

    .sub-tabs::-webkit-scrollbar {
        display: none;
    }

    .sub-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 6px 14px;
        font-size: 0.82rem;
    }

    /* --- Полоски ресурсов --- */
    .sheet-resource-edit {
        flex-wrap: wrap;
    }

    /* --- Поиск --- */
    .character-search-input {
        max-width: 100%;
    }

    /* --- Auth section --- */
    .auth-section {
        padding: 24px;
        margin: 20px auto;
    }

    /* --- Пустая страница --- */
    .empty-page-section {
        padding: 40px 20px;
    }

    /* --- Контакты ГМа --- */
    .contact-btn {
        max-width: 100%;
    }

    /* --- Админ-управление расписанием --- */
    .admin-event-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .admin-event-actions {
        margin-left: 0;
    }

    /* --- User ID Search --- */
    .user-id-search-form {
        flex-direction: column;
    }

    .user-id-search-form input {
        width: 100%;
    }

    /* --- Скорости --- */
    .sheet-speed {
        flex-direction: column;
        gap: 8px;
    }

    /* --- Текущее/максимальное значения --- */
    .current-max-display .current-value-input {
        width: 60px;
        font-size: 1.1rem;
    }

    .current-max-display .total-value {
        font-size: 1.1rem;
    }

    /* --- Силуэт и ячейки --- */
    .sheet-zone-panel {
        padding: 10px;
    }

    .sheet-slot-info {
        flex-wrap: wrap;
    }

    .sheet-slot-custom-block {
        flex-direction: column;
    }

    .sheet-slot-custom-block .sheet-slot-weight-input {
        width: 100%;
    }

    /* --- Эффекты экипировки --- */
    .sheet-effects-totals {
        gap: 6px;
    }

    .sheet-effects-coverage {
        font-size: 0.78rem;
    }

    /* --- Тема-переключатель: уменьшить анимации --- */
    .bg-sun {
        width: 80px;
        height: 80px;
        right: 8%;
    }

    .bg-moon {
        width: 60px;
        height: 60px;
        right: 10%;
    }

    /* Облака — меньше */
    .cloud-1 { width: 100px; height: 30px; }
    .cloud-2 { width: 130px; height: 36px; }
    .cloud-3 { width: 90px; height: 26px; }
    .cloud-4 { width: 70px; height: 22px; }
    .cloud-5 { width: 120px; height: 32px; }
    .cloud-6 { width: 100px; height: 28px; }

    /* --- Паддинги и шрифты --- */
    .character-card {
        padding: 14px;
    }

    .character-card h3 {
        font-size: 1rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .attribute-card {
        padding: 12px;
    }

    .attribute-card h4 {
        font-size: 0.9rem;
    }

    /* --- Кнопка броска кубика --- */
    .btn-roll {
        font-size: 1rem;
        padding: 4px 8px;
    }

    /* --- Модалки событий --- */
    .event-detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .event-detail-label {
        width: auto;
    }

    /* --- Сворачиваемые характеристики --- */
    .attribute-main-display {
        flex-wrap: wrap;
    }

    /* --- Кнопки подтверждения --- */
    .confirm-dialog__actions {
        flex-direction: column-reverse;
    }

    .confirm-dialog__actions .btn {
        width: 100%;
    }

    /* --- Адаптивное карточное представление (Card View) для таблиц на мобильных --- */
    .table-responsive-card,
    .levels-table {
        display: block;
        width: 100%;
    }
    .table-responsive-card thead,
    .levels-table thead {
        display: none;
    }
    .table-responsive-card tbody,
    .levels-table tbody {
        display: block;
        width: 100%;
    }
    .table-responsive-card tr,
    .levels-table tr {
        display: flex;
        flex-direction: column;
        background: var(--card-background);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 12px;
        gap: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .table-responsive-card td,
    .levels-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 4px 0;
        border-bottom: 1px dashed var(--border-color);
        width: 100%;
        box-sizing: border-box;
    }
    .table-responsive-card td:last-child,
    .levels-table td:last-child {
        border-bottom: none;
    }
    .table-responsive-card td[data-label]::before,
    .levels-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        opacity: 0.7;
        margin-right: 8px;
        flex-shrink: 0;
    }

    /* --- Сетка быстрых ссылок --- */
    .quick-links-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Маленький телефон (<=480px) --- */
@media (max-width: 480px) {
    .container {
        padding: 8px;
    }

    .header-left h1 {
        font-size: 1rem;
    }

    /* Переключатель темы — ещё компактнее */
    .theme-switch {
        --toggle-size: 10px;
    }

    /* Кнопки в шапке */
    .header-right .btn {
        padding: 5px 10px;
        font-size: 0.78rem;
    }

    .username-display {
        max-width: 70px;
        font-size: 0.78rem;
    }

    /* Быстрые ссылки — одна колонка */
    .quick-links-grid {
        grid-template-columns: 1fr;
    }

    .quick-link-card {
        padding: 12px;
        flex-direction: row;
        gap: 12px;
    }

    .quick-link-icon {
        font-size: 1.3rem;
    }

    /* Боковая навигация — почти на всю ширину */
    .side-nav {
        width: 85vw;
        max-width: 300px;
    }

    .side-nav-right {
        width: 85vw;
        max-width: 300px;
    }

    /* Модалки */
    .modal-content {
        margin: 2% auto;
        padding: 16px;
        width: 97%;
        max-height: 95vh;
        border-radius: 12px;
    }

    .auth-section {
        padding: 18px;
        margin: 10px auto;
    }

    /* Страница персонажа */
    .character-content {
        padding: 12px;
        border-radius: 10px;
    }

    .character-sidebar {
        padding: 12px;
        border-radius: 10px;
    }

    /* Календарь — ещё компактнее */
    .calendar-weekdays {
        font-size: 0.75rem;
    }

    .calendar-day {
        font-size: 0.72rem;
    }

    /* Кнопки навигации персонажа */
    .nav-btn {
        padding: 7px 10px;
        font-size: 0.78rem;
    }

    /* Силка */
    .sheet-silhouette {
        max-width: 160px;
    }

    /* Шрифты */
    .stat-value {
        font-size: 1.2rem;
    }

    .total-value {
        font-size: 1.2rem;
    }

    /* Инвентарь — кошелёк */
    .wallet-form label {
        font-size: 0.78rem;
    }

    /* Кнопки действий */
    .btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    .btn-block {
        padding: 10px;
        font-size: 0.9rem;
    }

    /* Секции */
    .characters-section {
        padding: 16px;
        border-radius: 10px;
    }

    .spell-learning,
    .ability-learning,
    .craft-learning {
        padding: 14px;
        border-radius: 10px;
    }

    /* Админ-событие */
    .admin-schedule-content {
        padding: 14px;
        border-radius: 10px;
    }

    /* Контакты ГМа */
    .contact-btn {
        padding: 10px;
        font-size: 0.9rem;
    }
}

/* --- Доступность: уменьшение анимаций при prefers-reduced-motion ---
   Игроки с вестибулярными нарушениями просят убрать движение. Глобально
   почти отключаем анимации и переходы (оставляя мгновенные 0.01ms, чтобы не
   ломать код, который слушает transitionend/animationend), и выключаем
   плавную прокрутку. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Полностью останавливаем декоративные фоновые анимации (облака, звёзды). */
    .bg-layer,
    .cloud,
    .bg-shooting-star {
        animation: none !important;
    }
}

/* --- Touch-дружественные цели (минимум 44px) --- */
@media (pointer: coarse) {
    .nav-btn {
        min-height: 44px;
    }

    .sub-tab-btn {
        min-height: 40px;
        padding: 10px 16px;
    }

    .btn {
        min-height: 40px;
    }

    .calendar-day {
        min-height: 38px;
    }

    .cat-btn {
        min-height: 40px;
        padding: 10px;
    }

    .close-nav-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 44px;
        font-size: 16px; /* Предотвращает зум на iOS */
    }

    .wallet-form input,
    .inventory-custom-form input,
    .inventory-custom-form textarea,
    .inventory-item-actions input,
    .shop-buy-row input,
    .inventory-sell-row input {
        min-height: 44px;
        font-size: 16px;
    }

    .sheet-resource-edit input {
        min-height: 40px;
        font-size: 16px;
    }

    .sheet-skill-input {
        min-height: 40px;
        font-size: 16px;
        width: 60px;
    }

    .attribute-row input {
        min-height: 40px;
        font-size: 16px;
    }

    .current-max-display .current-value-input {
        min-height: 40px;
        font-size: 16px;
    }
}

/* --- Ландшафтный телефон (короткая высота) --- */
@media (max-height: 500px) and (orientation: landscape) {
    .main-header {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .header-left h1 {
        font-size: 1rem;
    }

    .character-sidebar {
        position: relative;
        top: 0;
    }

    .modal-content {
        margin: 1% auto;
        max-height: 98vh;
        padding: 14px;
    }

    .auth-section {
        margin: 10px auto;
        padding: 16px;
    }
}