/* mobile.css - Надежный адаптивный дизайн */

@media (max-width: 768px) {
    /* 1. БАЗА (Снимаем ограничения высоты) */
    body {
        height: auto;
        overflow-y: auto !important; 
    }
    .dashboard-layout {
        display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 15px;
    }

    /* 2. ШАПКА ПРИЛОЖЕНИЯ И МЕНЮ-СВАЙПЕР */
    .sidebar {
        padding: 15px;
        display: flex;
        flex-direction: column-reverse; /* Профиль встанет НАД меню */
        gap: 15px;
    }
    .brand { display: none; } /* Прячем логотип для экономии места */
    
    .profile-widget {
        margin: 0;
        background: rgba(255,255,255,0.03);
        justify-content: center;
        padding: 12px;
    }

    /* Делаем меню скроллируемым по горизонтали */
    .sidebar > div:first-child {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar > div:first-child::-webkit-scrollbar { display: none; }
    
    .nav-menu {
        flex-direction: row;
        gap: 8px;
        width: max-content; /* Позволяет кнопкам не сжиматься, а уходить за край экрана */
    }
    .nav-btn {
        width: auto;
        padding: 12px 20px;
        white-space: nowrap; /* Запрет переноса текста в кнопке */
    }

    /* 3. КОНТЕНТ И КНОПКИ */
    .main-content {
        padding: 20px 15px;
        min-height: unset;
        overflow: visible;
    }
    .header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 20px;
    }
    .header h1 { font-size: 26px; line-height: 1.2; }
    
    /* Умная группировка кнопок (например, в админке) - 2 в ряд */
    .btn-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }
    .btn-mass, .btn-primary, .btn-back {
        width: 100%;
        padding: 14px;
        text-align: center;
        justify-content: center;
        font-size: 10px;
    }

    /* 4. ЗАЩИТА ОТ ЗУМА ПРИ КЛИКЕ (Строго 16px) */
    .form-input, .search-input, .sort-select, .filter-select {
        font-size: 16px !important;
        padding: 14px 15px;
    }
    .table-controls { flex-direction: column; gap: 10px; }
    .search-input { padding-left: 45px; }

    /* 5. ТАБЛИЦЫ */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }
    th, td {
        white-space: nowrap;
        padding: 15px;
    }

    /* 6. ГРИДЫ (Статистика, формы) */
    .stats-grid, .middle-grid, .tops-grid, .form-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    /* 7. ПРОФИЛЬ */
    .profile-hero {
        flex-direction: column;
        text-align: center;
        padding: 25px 15px;
        gap: 15px;
    }
    .hero-left-wrapper { flex-direction: column; }
    .hero-badges { justify-content: center; }
    .weekly-chart { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .day-box { flex: 1 1 20%; padding: 15px 0; }
    
    .achievements-panel { padding: 25px 15px; }
    .achievements-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; }
    .achievement-item { min-height: 80px; padding: 12px; }

    /* 8. МОДАЛЬНЫЕ ОКНА */
    .modal-box {
        margin: 15px;
        padding: 25px 20px;
        max-height: 85vh;
        overflow-y: auto;
    }
    .modal-footer { flex-direction: column; gap: 10px; }
    .modal-footer button { width: 100%; padding: 16px; }

    /* 9. СТРАНИЦА ЛОГИНА */
    .login-card { padding: 40px 20px; margin: 15px; }
}
/* ========================================= */
    /* 10. СТРАНИЦА РОЗЫГРЫША (LOTTERY)          */
    /* ========================================= */
    
    /* Заголовок с номером розыгрыша */
    .main-content .header h1 {
        flex-direction: column; /* Переносим номер на новую строку */
        align-items: flex-start;
        gap: 10px;
        font-size: 24px;
    }
    .draw-number-badge {
        font-size: 14px;
        padding: 4px 10px;
    }

    /* Главный блок лотереи */
    .lottery-hero {
        padding: 30px 15px; /* Уменьшаем боковые отступы */
        margin-bottom: 25px;
        border-radius: 16px;
    }
    
    /* Сумма выигрыша */
    .prize-amount {
        font-size: 48px; /* Уменьшаем шрифт, чтобы не вылезал за края */
        margin-bottom: 25px;
    }
    
    /* Блок таймера */
    .timer-box {
        min-width: 100%; /* Растягиваем на всю ширину карточки */
        padding: 15px;
        margin-bottom: 25px;
    }
    .timer-value {
        font-size: 32px; /* Чуть меньше для мобилок */
        letter-spacing: 1px;
    }
    
    /* Кнопка участия */
    #btn-container {
        width: 100%;
    }
    .btn-participate {
        width: 100%; /* Делаем кнопку широкой — удобно нажимать пальцем */
        padding: 18px 10px;
        font-size: 14px;
        letter-spacing: 2px;
    }
    
    /* Статистика под кнопкой */
    .stats-row {
        gap: 15px;
        margin-top: 25px;
        flex-direction: column; /* Блоки статистики друг под другом */
    }
    .stat-val {
        font-size: 20px;
    }

    /* Исправление колонки с номером в истории */
    .draw-id-col {
        font-size: 12px;
        padding-right: 10px !important;
    }