/* 
   - 4:3 мониторы: 1440x1080, 1600x1200, 1280x1024
   - Full HD: 1920x1080
   - 2K: 2560x1440
   - 4K: 3840x2160
*/

/* Базовые переменные для адаптивности */
:root {
    --container-xs: 100%;
    --container-sm: 90%;
    --container-md: 85%;
    --container-lg: 80%;
    --container-xl: 75%;
    --container-2xl: 70%;
    
    /* Отступы для контейнеров */
    --container-padding-sm: 16px;
    --container-padding-md: 24px;
    --container-padding-lg: 32px;
    --container-padding-xl: 40px;
    
    /* Размеры для таблиц */
    --table-font-size-sm: 0.75rem;
    --table-font-size-md: 0.875rem;
    --table-font-size-lg: 1rem;
    
    /* Размеры для карточек */
    --card-padding-sm: 16px;
    --card-padding-md: 20px;
    --card-padding-lg: 24px;
}

/* ============================================
   АДАПТИВНЫЕ КОНТЕЙНЕРЫ
   ============================================ */

/* Базовые контейнеры с адаптивной шириной */
.responsive-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-md);
    padding-right: var(--container-padding-md);
}

/* Адаптация существующих max-w-* классов */
@media (min-width: 1280px) and (max-width: 1599px) {
    /* 4:3 мониторы включая 1440x1080 */
    .max-w-4xl {
        max-width: 95% !important;
    }
    
    .max-w-6xl {
        max-width: 98% !important;
    }
    
    .max-w-7xl {
        max-width: 90% !important;
    }
    
    .max-w-full {
        max-width: 100% !important;
        padding-left: 0.5%;
        padding-right: 0.5%;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    /* 4:3 и небольшие Full HD мониторы */
    .max-w-4xl {
        max-width: 90% !important;
    }
    
    .max-w-6xl {
        max-width: 95% !important;
    }
    
    .max-w-7xl {
        max-width: 85% !important;
    }
    
    .max-w-full {
        max-width: 98% !important;
        padding-left: 1%;
        padding-right: 1%;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    /* Full HD и небольшие 2K мониторы */
    .max-w-4xl {
        max-width: 85% !important;
    }
    
    .max-w-6xl {
        max-width: 90% !important;
    }
    
    .max-w-7xl {
        max-width: 80% !important;
    }
    
    .max-w-full {
        max-width: 95% !important;
        padding-left: 2.5%;
        padding-right: 2.5%;
    }
}

@media (min-width: 2560px) {
    /* 2K и выше */
    .max-w-4xl {
        max-width: 1400px !important;
    }
    
    .max-w-6xl {
        max-width: 1800px !important;
    }
    
    .max-w-7xl {
        max-width: 2000px !important;
    }
    
    .max-w-full {
        max-width: 95% !important;
        padding-left: 2.5%;
        padding-right: 2.5%;
    }
}

/* ============================================
   АДАПТИВНЫЕ ТАБЛИЦЫ
   ============================================ */

/* Базовые стили для адаптивных таблиц */
.responsive-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.responsive-table {
    width: 100%;
    min-width: fit-content;
    border-collapse: collapse;
}

/* Адаптация размера шрифта в таблицах */
@media (min-width: 1280px) and (max-width: 1599px) {
    .table {
        font-size: var(--table-font-size-sm);
    }
    
    .table th,
    .table td {
        padding: 8px 10px;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .table {
        font-size: var(--table-font-size-md);
    }
    
    .table th,
    .table td {
        padding: 10px 12px;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .table {
        font-size: var(--table-font-size-lg);
    }
    
    .table th,
    .table td {
        padding: 12px 16px;
    }
}

@media (min-width: 2560px) {
    .table {
        font-size: var(--table-font-size-lg);
    }
    
    .table th,
    .table td {
        padding: 14px 20px;
    }
}

/* ============================================
   АДАПТИВНЫЕ GRID LAYOUTS
   ============================================ */

/* Адаптация grid-cols для разных разрешений */
@media (min-width: 1280px) and (max-width: 1599px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    
    .grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
    
    .grid-cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }
    
    .grid-cols-6 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 2560px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }
    
    .grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* ============================================
   АДАПТИВНЫЕ КАРТОЧКИ
   ============================================ */

@media (min-width: 1280px) and (max-width: 1599px) {
    .card {
        padding: 14px;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .card {
        padding: var(--card-padding-sm);
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .card {
        padding: var(--card-padding-md);
    }
}

@media (min-width: 2560px) {
    .card {
        padding: var(--card-padding-lg);
    }
}

/* ============================================
   АДАПТИВНЫЕ МОДАЛЬНЫЕ ОКНА
   ============================================ */

/* Исключаем форму авторизации из адаптации */
@media (min-width: 1280px) {
    /* Форма авторизации всегда остается нормального размера - не растягивается */
    .login-page .max-w-md,
    .login-page .max-w-md .card {
        max-width: 28rem !important;
        width: 100% !important;
    }
    
    /* Остальные max-w-md (не карточки и не на странице логина) адаптируются */
    .max-w-md:not(.card):not(.login-page .max-w-md) {
        max-width: 95% !important;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .max-w-md:not(.card):not(.login-page .max-w-md) {
        max-width: 500px !important;
    }
}

@media (min-width: 2560px) {
    .max-w-md:not(.card):not(.login-page .max-w-md) {
        max-width: 600px !important;
    }
}

/* ============================================
   АДАПТИВНЫЕ ФОРМЫ
   ============================================ */

@media (min-width: 1280px) and (max-width: 1599px) {
    /* Формы с grid-cols-2 могут быть слишком узкими */
    .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    /* Формы с grid-cols-2 могут быть слишком узкими */
    .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1920px) {
    .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* Страница голд дроп - самая сложная */
@media (min-width: 1280px) and (max-width: 1599px) {
    /* Уменьшаем размер ячеек и шрифт для 1440x1080 */
    .attendance-table {
        font-size: 0.7rem;
        min-width: 900px !important;
    }
    
    .attendance-table th,
    .attendance-table td {
        padding: 3px 5px;
    }
    
    .attendance-table .w-8 {
        width: 20px !important;
        height: 20px !important;
    }
    
    .attendance-table .text-xs {
        font-size: 0.6rem;
    }
    
    /* Адаптация sticky колонок для голд дроп */
    .attendance-table .sticky.left-0 {
        left: 0 !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }
    
    .attendance-table .sticky.left-20 {
        left: 90px !important;
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    /* Уменьшаем размер ячеек и шрифт */
    .attendance-table {
        font-size: 0.75rem;
        min-width: 1000px !important;
    }
    
    .attendance-table th,
    .attendance-table td {
        padding: 4px 6px;
    }
    
    .attendance-table .w-8 {
        width: 24px !important;
        height: 24px !important;
    }
    
    .attendance-table .text-xs {
        font-size: 0.625rem;
    }
    
    /* Адаптация sticky колонок для голд дроп */
    .attendance-table .sticky.left-0 {
        left: 0 !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }
    
    .attendance-table .sticky.left-20 {
        left: 100px !important;
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .attendance-table {
        font-size: 0.875rem;
        min-width: 1100px !important;
    }
    
    .attendance-table th,
    .attendance-table td {
        padding: 6px 8px;
    }
    
    .attendance-table .w-8 {
        width: 32px !important;
        height: 32px !important;
    }
    
    .attendance-table .sticky.left-0 {
        left: 0 !important;
        width: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
    }
    
    .attendance-table .sticky.left-20 {
        left: 130px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }
}

@media (min-width: 2560px) {
    .attendance-table {
        font-size: 1rem;
        min-width: 1200px !important;
    }
    
    .attendance-table th,
    .attendance-table td {
        padding: 8px 12px;
    }
    
    .attendance-table .w-8 {
        width: 40px !important;
        height: 40px !important;
    }
    
    .attendance-table .sticky.left-0 {
        left: 0 !important;
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }
    
    .attendance-table .sticky.left-20 {
        left: 160px !important;
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
}

/* Страница снаряжения - таблица с sticky колонками */
@media (min-width: 1280px) and (max-width: 1599px) {
    .table[style*="min-width: 1400px"] {
        min-width: 1100px !important;
        font-size: 0.8125rem;
    }
    
    .table[style*="min-width: 1400px"] .sticky.left-0 {
        left: 0 !important;
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
    }
    
    .table[style*="min-width: 1400px"] .sticky[style*="left: 150px"] {
        left: 110px !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .table[style*="min-width: 1400px"] {
        min-width: 1200px !important;
        font-size: 0.875rem;
    }
    
    .table[style*="min-width: 1400px"] .sticky.left-0 {
        left: 0 !important;
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
    
    .table[style*="min-width: 1400px"] .sticky[style*="left: 150px"] {
        left: 120px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .table[style*="min-width: 1400px"] {
        min-width: 1300px !important;
        font-size: 0.9375rem;
    }
    
    .table[style*="min-width: 1400px"] .sticky.left-0 {
        left: 0 !important;
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
    
    .table[style*="min-width: 1400px"] .sticky[style*="left: 150px"] {
        left: 140px !important;
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
    }
}

@media (min-width: 2560px) {
    .table[style*="min-width: 1400px"] {
        min-width: 1400px !important;
        font-size: 1rem;
    }
    
    .table[style*="min-width: 1400px"] .sticky.left-0 {
        left: 0 !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }
    
    .table[style*="min-width: 1400px"] .sticky[style*="left: 150px"] {
        left: 150px !important;
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
}

/* Адаптация sticky колонок для общих таблиц */
@media (min-width: 1280px) and (max-width: 1599px) {
    .table:not(.attendance-table) .sticky.left-0 {
        left: 0 !important;
        width: 100px !important;
        min-width: 100px !important;
    }
    
    .table:not(.attendance-table) .sticky.left-20 {
        left: 100px !important;
        width: 80px !important;
        min-width: 80px !important;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .table:not(.attendance-table) .sticky.left-0 {
        left: 0 !important;
        width: 120px !important;
        min-width: 120px !important;
    }
    
    .table:not(.attendance-table) .sticky.left-20 {
        left: 120px !important;
        width: 100px !important;
        min-width: 100px !important;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .table:not(.attendance-table) .sticky.left-0 {
        left: 0 !important;
        width: 150px !important;
        min-width: 150px !important;
    }
    
    .table:not(.attendance-table) .sticky.left-20 {
        left: 150px !important;
        width: 120px !important;
        min-width: 120px !important;
    }
}

@media (min-width: 2560px) {
    .table:not(.attendance-table) .sticky.left-0 {
        left: 0 !important;
        width: 180px !important;
        min-width: 180px !important;
    }
    
    .table:not(.attendance-table) .sticky.left-20 {
        left: 180px !important;
        width: 150px !important;
        min-width: 150px !important;
    }
}

/* Адаптация таблиц с фиксированной минимальной шириной */
@media (min-width: 1280px) and (max-width: 1599px) {
    .table[style*="min-width"] {
        font-size: 0.8125rem;
    }
    
    /* Уменьшаем минимальную ширину для узких экранов */
    .table[style*="min-width: 1200px"] {
        min-width: 900px !important;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .table[style*="min-width"] {
        font-size: 0.875rem;
    }
    
    /* Уменьшаем минимальную ширину для узких экранов */
    .table[style*="min-width: 1200px"] {
        min-width: 1000px !important;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .table[style*="min-width"] {
        font-size: 0.9375rem;
    }
    
    .table[style*="min-width: 1200px"] {
        min-width: 1100px !important;
    }
}

@media (min-width: 2560px) {
    .table[style*="min-width"] {
        font-size: 1rem;
    }
    
    .table[style*="min-width: 1200px"] {
        min-width: 1200px !important;
    }
}

/* ============================================
   АДАПТАЦИЯ ГЛАВНОЙ СТРАНИЦЫ
   ============================================ */

/* Grid с кнопками на главной странице */
@media (min-width: 1280px) and (max-width: 1599px) {
    .grid.grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .grid.grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .grid.grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.25rem;
    }
}

@media (min-width: 2560px) {
    .grid.grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1.5rem;
    }
}

/* Статистические блоки на главной */
@media (min-width: 1280px) and (max-width: 1599px) {
    .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1rem;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1.25rem;
    }
}

@media (min-width: 2560px) {
    .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 1.5rem;
    }
}

/* Grid для списка игр */
@media (min-width: 1280px) and (max-width: 1599px) {
    #games-grid,
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    #games-grid,
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    #games-grid,
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.25rem;
    }
}

@media (min-width: 2560px) {
    #games-grid,
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1.5rem;
    }
}

/* ============================================
   АДАПТАЦИЯ СТРАНИЦЫ ОТРЯДОВ
   ============================================ */

@media (min-width: 1280px) and (max-width: 1599px) {
    [id^="squad-card-"],
    .squad-card {
        padding: 10px;
        font-size: 0.8125rem;
    }
    
    [id^="squad-card-"] h3,
    .squad-card h3 {
        font-size: 0.9375rem;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    [id^="squad-card-"],
    .squad-card {
        padding: 12px;
        font-size: 0.875rem;
    }
    
    [id^="squad-card-"] h3,
    .squad-card h3 {
        font-size: 1rem;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    [id^="squad-card-"],
    .squad-card {
        padding: 16px;
        font-size: 0.9375rem;
    }
    
    [id^="squad-card-"] h3,
    .squad-card h3 {
        font-size: 1.125rem;
    }
}

@media (min-width: 2560px) {
    [id^="squad-card-"],
    .squad-card {
        padding: 20px;
        font-size: 1rem;
    }
    
    [id^="squad-card-"] h3,
    .squad-card h3 {
        font-size: 1.25rem;
    }
}

/* ============================================
   АДАПТАЦИЯ КАРТОЧКИ ИГРОКА
   ============================================ */

@media (min-width: 1280px) and (max-width: 1599px) {
    .chart-container,
    canvas {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    .flex.justify-between.items-center {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .chart-container,
    canvas {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    .flex.justify-between.items-center {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .chart-container,
    canvas {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 2560px) {
    .chart-container,
    canvas {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   АДАПТАЦИЯ HEADER И SIDEBAR
   ============================================ */

@media (min-width: 1280px) and (max-width: 1599px) {
    .content {
        padding: 12px !important;
    }
    
    .header-bar {
        padding: 10px 12px;
    }
    
    .header-title {
        font-size: 0.9375rem;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .content {
        padding: 16px !important;
    }
    
    .header-bar {
        padding: 12px 16px;
    }
    
    .header-title {
        font-size: 1rem;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .content {
        padding: 20px !important;
    }
    
    .header-bar {
        padding: 16px 20px;
    }
    
    .header-title {
        font-size: 1.125rem;
    }
}

@media (min-width: 2560px) {
    .content {
        padding: 24px !important;
    }
    
    .header-bar {
        padding: 20px 24px;
    }
    
    .header-title {
        font-size: 1.25rem;
    }
}

/* ============================================
   АДАПТАЦИЯ МОДАЛЬНЫХ ОКОН
   ============================================ */

@media (min-width: 1280px) and (max-width: 1599px) {
    /* Модальные окна - ограничиваем размер */
    .fixed.inset-0 .bg-white.rounded-lg,
    .fixed.inset-0 .max-w-md:not(.card) {
        max-width: 28rem !important;
        margin: 15px auto;
        max-height: 92vh;
        overflow-y: auto;
    }
    
    /* Модальное окно "Редактировать роль" - делаем пошире */
    #roleModal .max-w-4xl {
        max-width: 42rem !important;
        width: 90% !important;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    /* Модальные окна - ограничиваем размер */
    .fixed.inset-0 .bg-white.rounded-lg,
    .fixed.inset-0 .max-w-md:not(.card) {
        max-width: 28rem !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Модальное окно "Редактировать роль" - делаем пошире */
    #roleModal .max-w-4xl {
        max-width: 42rem !important;
        width: 85% !important;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    /* Модальные окна - ограничиваем размер */
    .fixed.inset-0 .bg-white.rounded-lg,
    .fixed.inset-0 .max-w-md:not(.card) {
        max-width: 28rem !important;
        margin: 40px auto;
        max-height: 85vh;
    }
    
    /* Модальное окно "Редактировать роль" - делаем пошире */
    #roleModal .max-w-4xl {
        max-width: 42rem !important;
        width: 80% !important;
    }
}

@media (min-width: 2560px) {
    /* Модальные окна - ограничиваем размер */
    .fixed.inset-0 .bg-white.rounded-lg,
    .fixed.inset-0 .max-w-md:not(.card) {
        max-width: 28rem !important;
        margin: 50px auto;
        max-height: 80vh;
    }
    
    /* Модальное окно "Редактировать роль" - делаем пошире */
    #roleModal .max-w-4xl {
        max-width: 42rem !important;
        width: 75% !important;
    }
}

/* ============================================
   АДАПТАЦИЯ КНОПОК
   ============================================ */

@media (min-width: 1280px) and (max-width: 1599px) {
    .btn {
        padding: 5px 12px;
        font-size: 0.8125rem;
    }
    
    .btn.text-sm {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .btn {
        padding: 6px 14px;
        font-size: 0.875rem;
    }
    
    .btn.text-sm {
        padding: 5px 12px;
        font-size: 0.8125rem;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .btn {
        padding: 8px 16px;
        font-size: 0.9375rem;
    }
    
    .btn.text-sm {
        padding: 6px 14px;
        font-size: 0.875rem;
    }
}

@media (min-width: 2560px) {
    .btn {
        padding: 10px 20px;
        font-size: 1rem;
    }
    
    .btn.text-sm {
        padding: 8px 16px;
        font-size: 0.9375rem;
    }
}

/* ============================================
   АДАПТАЦИЯ ТЕКСТА И ЗАГОЛОВКОВ
   ============================================ */

@media (min-width: 1280px) and (max-width: 1599px) {
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.375rem;
    }
    
    h3 {
        font-size: 1.125rem;
    }
    
    .text-3xl {
        font-size: 1.5rem;
    }
    
    .text-2xl {
        font-size: 1.375rem;
    }
    
    .text-xl {
        font-size: 1.125rem;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .text-3xl {
        font-size: 1.75rem;
    }
    
    .text-2xl {
        font-size: 1.5rem;
    }
    
    .text-xl {
        font-size: 1.25rem;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    .text-3xl {
        font-size: 2rem;
    }
    
    .text-2xl {
        font-size: 1.75rem;
    }
    
    .text-xl {
        font-size: 1.5rem;
    }
}

@media (min-width: 2560px) {
    h1 {
        font-size: 2.25rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.75rem;
    }
    
    .text-3xl {
        font-size: 2.25rem;
    }
    
    .text-2xl {
        font-size: 2rem;
    }
    
    .text-xl {
        font-size: 1.75rem;
    }
}

/* ============================================
   СПЕЦИАЛЬНАЯ АДАПТАЦИЯ ДЛЯ 1280x768 И ПОХОЖИХ РАЗРЕШЕНИЙ
   ============================================ */

@media (min-width: 1280px) and (max-width: 1366px) {
    /* Карточка игрока - адаптация для узкого экрана */
    .max-w-7xl {
        max-width: 100% !important;
        padding-left: 0.5%;
        padding-right: 0.5%;
    }
    
    /* Заголовок карточки игрока - делаем кнопки вертикальными на маленьких экранах */
    .flex.justify-between.items-center {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .flex.justify-between.items-center > div:last-child {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Статистические блоки в карточке игрока - уменьшаем количество колонок */
    .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem;
    }
    
    .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 > div {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }
    
    .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 .text-2xl {
        font-size: 1.25rem;
    }
    
    .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 .text-sm {
        font-size: 0.75rem;
    }
    
    /* Фильтры в карточке игрока */
    .flex.gap-2.items-center.flex-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .flex.gap-2.items-center.flex-wrap > div {
        width: 100%;
    }
    
    .flex.gap-2.items-center.flex-wrap label {
        font-size: 0.8125rem;
    }
    
    .flex.gap-2.items-center.flex-wrap input,
    .flex.gap-2.items-center.flex-wrap select {
        font-size: 0.8125rem;
        padding: 4px 8px;
    }
    
    /* Графики в карточке игрока */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Голд дроп - максимальная оптимизация для 1280x768 */
    .attendance-table {
        font-size: 0.6rem !important;
        min-width: 700px !important;
    }
    
    .attendance-table th,
    .attendance-table td {
        padding: 1px 3px !important;
    }
    
    .attendance-table .w-8 {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
    }
    
    .attendance-table .text-xs {
        font-size: 0.5rem !important;
    }
    
    .attendance-table th {
        font-size: 0.55rem !important;
        line-height: 1.2 !important;
    }
    
    /* Sticky колонки для голд дроп - еще меньше */
    .attendance-table .sticky.left-0 {
        left: 0 !important;
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        font-size: 0.6rem !important;
        padding: 2px 4px !important;
    }
    
    .attendance-table .sticky.left-20 {
        left: 70px !important;
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        font-size: 0.55rem !important;
        padding: 2px 4px !important;
    }
    
    /* Уменьшаем размеры ячеек с датами в голд дроп */
    .attendance-table th[colspan] {
        font-size: 0.55rem !important;
        padding: 2px 4px !important;
    }
    
    /* Снаряжение - максимальная оптимизация */
    .table[style*="min-width: 1400px"] {
        min-width: 900px !important;
        font-size: 0.7rem !important;
    }
    
    .table[style*="min-width: 1400px"] th,
    .table[style*="min-width: 1400px"] td {
        padding: 4px 6px !important;
    }
    
    .table[style*="min-width: 1400px"] .sticky.left-0 {
        left: 0 !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        font-size: 0.7rem !important;
    }
    
    .table[style*="min-width: 1400px"] .sticky[style*="left: 150px"] {
        left: 90px !important;
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        font-size: 0.65rem !important;
    }
    
    /* Уменьшаем размеры кнопок в таблице снаряжения */
    .table[style*="min-width: 1400px"] .btn {
        padding: 2px 6px;
        font-size: 0.65rem;
    }
    
    /* Общие таблицы - уменьшаем размеры */
    .table {
        font-size: 0.75rem;
    }
    
    .table th,
    .table td {
        padding: 4px 6px;
    }
    
    /* Кнопки - уменьшаем размеры */
    .btn {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
    
    .btn.text-sm {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
    
    /* Заголовки - уменьшаем размеры */
    h1 {
        font-size: 1.375rem;
    }
    
    h2 {
        font-size: 1.25rem;
    }
    
    h3 {
        font-size: 1rem;
    }
    
    .text-3xl {
        font-size: 1.375rem;
    }
    
    .text-2xl {
        font-size: 1.25rem;
    }
    
    .text-xl {
        font-size: 1rem;
    }
    
    /* Карточки - уменьшаем padding */
    .card {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    /* Контейнеры - уменьшаем отступы */
    .content {
        padding: 10px !important;
    }
    
    /* Уменьшаем отступы между элементами */
    .mb-6 {
        margin-bottom: 12px !important;
    }
    
    .mb-4 {
        margin-bottom: 8px !important;
    }
    
    .mt-10 {
        margin-top: 12px !important;
    }
    
    /* Навигация по неделям в голд дроп - уменьшаем */
    .flex.justify-between.items-center.mb-4 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Уменьшаем размеры текста в информационных блоках */
    .text-sm {
        font-size: 0.75rem;
    }
    
    .text-xs {
        font-size: 0.65rem;
    }
}