/* =====================================================================
   📱 MOBILE.CSS - ИДЕАЛЬНАЯ АДАПТАЦИЯ (СМАРТФОНЫ И ПЛАНШЕТЫ < 900px)
   ===================================================================== */

@media screen and (max-width: 900px) {

    /* --- 1. БАЗА И КАРКАС --- */
    body {
        height: 100vh; 
        overflow: hidden !important;
    }

    .dashboard-layout {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
        height: 100vh;
        overflow: hidden;
    }

    /* --- 2. УМНАЯ ШАПКА-СВАЙПЕР (Вместо левого меню) --- */
    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        padding: 12px 15px 5px 15px !important;
        position: relative !important;
        z-index: 9999 !important;
        background: rgba(10, 10, 10, 0.98) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .brand, .sidebar .profile-widget { 
        display: none !important; 
    }
    
    .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
        width: 100% !important;
        padding-bottom: 8px !important;
    }
    .nav-menu::-webkit-scrollbar { display: none !important; }
    
    .nav-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
        width: auto !important;
    }

    /* --- 3. ГЛАВНЫЙ КОНТЕНТ --- */
    .main-content {
        padding: 20px 15px 40px 15px !important;
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        min-height: unset;
    }

    .header-top, .header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 20px;
    }
    .header h1 { 
        font-size: 24px; 
        line-height: 1.2; 
    }
    .mode-selector { width: 100%; display: flex; }
    .mode-btn { flex: 1; text-align: center; }

    /* --- 4. ЗАЩИТА ОТ ЗУМА iOS И ФОРМЫ --- */
    .form-input, .search-input, .sort-select, .filter-select, textarea {
        font-size: 16px !important; 
        padding: 14px 15px;
    }
    .table-controls { flex-direction: column; gap: 10px; }
    .search-input { padding-left: 45px; }
    
    .form-container { 
        padding: 20px; 
        box-shadow: none; 
        border-radius: 16px; 
        max-width: 100%;
    }
    textarea { height: 120px; }

    /* --- 5. КНОПКИ И ПАНЕЛИ ДЕЙСТВИЙ --- */
    .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: 11px;
    }
    
    .action-bar { 
        flex-direction: column; 
        gap: 15px; 
        align-items: stretch; 
        padding: 15px; 
    }
    .controls-left { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 10px; 
    }
    .btn-punish, .btn-submit { width: 100%; }

    /* --- 6. ТАБЛИЦЫ (Дни рождения, Коллеги) --- */
    .table-container, .history-table-wrapper, .lottery-table, .table-responsive, table {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch !important; 
        border-radius: 12px;
        flex-shrink: 0 !important;
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 1 !important; 
    }
    table { min-width: 500px; }
    th, td {
        white-space: nowrap !important; 
        padding: 12px 15px !important;
        font-size: 11px !important;
    }

    /* --- 7. ГРИДЫ (СЕТКА СТАТИСТИКИ) --- */
    .stats-grid { 
        grid-template-columns: 1fr !important; /* На главной карточки по одной в ряд, чтобы счетчик не выпирал */
        gap: 15px; 
    }
    .stat-card { padding: 15px; text-align: center; }
    .stat-title { justify-content: center; }
    .stat-val, .stat-value { font-size: 26px; justify-content: center; }
    
    .timer-box { justify-content: center; flex-wrap: wrap; gap: 8px; }
    .time-block { padding: 8px; min-width: 55px; }
    .time-block .num { font-size: 18px; }

    .cards-grid, .middle-grid, .tops-grid, .form-grid { 
        grid-template-columns: 1fr !important; 
        gap: 15px; 
    }

    /* --- 8. ПРОФИЛЬ (Шапка Личного дела) --- */
    .profile-hero {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: max-content !important;
        flex-shrink: 0 !important; 
        overflow: visible !important;
        padding: 25px 15px !important;
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .hero-left-wrapper {
        flex: none !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        height: auto !important;
    }

    .hero-info {
        height: auto !important;
        flex-shrink: 0 !important;
        width: 100% !important;
    }

    .hero-avatar {
        width: 110px !important; 
        height: 110px !important;
        flex-shrink: 0 !important; 
        margin: 0 auto !important;
        border-radius: 20px !important;
    }

    .hero-name {
        white-space: normal !important; 
        word-wrap: break-word !important; 
        text-align: center !important;
        font-size: 26px !important; 
        line-height: 1.2 !important;
        width: 100% !important;
    }

    .hero-badges {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .hero-left-wrapper .btn-primary, 
    .hero-left-wrapper button,
    .hero-left-wrapper a {
        width: 100% !important;
        padding: 14px !important;
        margin-top: 10px !important;
        flex-shrink: 0 !important;
    }

    /* --- 9. МОДАЛЬНЫЕ ОКНА И ЛОГИН --- */
    .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; }

    .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 {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important; 
        min-height: max-content !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        padding: 30px 15px !important;
        margin-bottom: 25px !important;
        border-radius: 16px;
        position: relative !important;
        z-index: 5 !important;
    }
    .prize-amount { font-size: 42px; margin-bottom: 25px; }
    
    .timer-value { font-size: 28px; letter-spacing: 1px; }
    
    #btn-container, .btn-participate {
        position: relative !important;
        z-index: 999 !important; 
        pointer-events: auto !important; 
        flex-shrink: 0 !important;
        margin-top: 10px !important;
        display: block !important;
        width: 100% !important;
    }

    .btn-participate {
        padding: 18px 10px;
        font-size: 14px;
        letter-spacing: 2px;
    }
    
    .stats-row {
        gap: 15px;
        margin-top: 25px;
        flex-direction: column;
    }
    .draw-id-col { font-size: 12px; padding-right: 10px !important; }

    /* --- 11. ПАНЕЛЬ "ДОБРО ПОЖАЛОВАТЬ" (ГЛАВНАЯ) --- */
    .hero-banner { 
        flex-direction: column; 
        text-align: center; 
        padding: 25px 20px; 
        gap: 15px; 
        min-height: auto;
    }
    .hero-text h1 { font-size: 20px; margin-bottom: 5px; }
    .hero-text p { font-size: 10px; padding-bottom: 0; }

    /* --- 12. ЗАЛ СЛАВЫ (ПРОФИЛЬ - АЧИВКИ) --- */
    @media (max-width: 600px) {
        .achievements-grid { 
            grid-template-columns: repeat(2, 1fr) !important; 
            gap: 12px !important; 
        }
        .achievements-panel { padding: 20px 15px; }
        .achievement-item { padding: 15px 10px !important; border-radius: 12px; }
        
        .ach-icon-wrap { height: 60px !important; margin-bottom: 10px; }
        .achievement-item img { max-width: 50px !important; max-height: 50px !important; }
        
        .ach-title { font-size: 11px !important; margin-bottom: 4px; }
        .ach-desc { font-size: 9px !important; line-height: 1.4; }
        .ach-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    }
}