/* SCHOOL PORTAL - ENTERPRISE MOBILE OPTIMIZATION */
/* САМЫЙ ВАЖНЫЙ ФАЙЛ. ЭТОТ ФАЙЛ - ОПТИМИЗИАЦИЯ ВСЕГО САЙТА ПОД МОБИЛКИ */
/* ============================================== */

/* 1. Базовые мобильные настройки */
@media (max-width: 768px) {
    :root {
        --mobile-padding: 15px;
        --touch-target: 44px;
        --safe-area: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

    /* Предотвращение горизонтального скролла */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
        position: relative;
    }

    /* Контейнеры */
    .container {
        width: 100%;
        padding: 0 var(--mobile-padding);
        box-sizing: border-box;
    }

    /* 2. Типографика для мобильных */
    h1 {
        font-size: clamp(24px, 6vw, 32px) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    h2 {
        font-size: clamp(20px, 5vw, 28px) !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: clamp(18px, 4vw, 24px) !important;
    }

    h4 {
        font-size: clamp(16px, 3.5vw, 20px) !important;
    }

    p,
    li,
    a,
    span,
    label,
    input,
    textarea,
    select,
    button {
        font-size: clamp(14px, 4vw, 16px) !important;
        line-height: 1.5 !important;
    }

    /* 3. Тач-дружественные элементы */
    button,
    .btn-primary,
    .btn-secondary,
    a[role="button"],
    .nav-item,
    .tile-option,
    .class-btn,
    .note-item,
    .stat-card {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
        padding: 12px 16px !important;
    }

    /* 4. Улучшенные интерактивные элементы */
    input,
    textarea,
    select {
        font-size: 16px !important;
        /* Предотвращает зум на iOS */
        padding: 12px 15px !important;
        border-radius: 8px !important;
    }

    /* 5. Гибкие сетки */
    .stats-grid,
    .content-grid,
    .features-grid,
    .admin-stats,
    .action-grid,
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* 6. Адаптивные карточки */
    .card,
    .feature-card,
    .stat-card,
    .content-card,
    .auth-card,
    .action-card {
        padding: 20px !important;
        margin: 10px 0 !important;
        border-radius: 12px !important;
    }
}

/* 7. Small phones (320px - 480px) */
@media (max-width: 480px) {
    :root {
        --mobile-padding: 10px;
    }

    .container {
        padding: 0 var(--mobile-padding);
    }

    h1 {
        font-size: clamp(22px, 5vw, 28px) !important;
    }

    .hero {
        padding: 30px 0 !important;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
}

/* 8. Tablet optimization (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 95%;
    }

    .stats-grid,
    .content-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dashboard-container {
        gap: 20px;
    }
}

/* 9. Ландшафтная ориентация */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 20px 0 !important;
        min-height: auto !important;
    }

    .mobile-nav {
        padding-top: 60px;
    }

    .auth-container {
        padding: 20px 0 !important;
    }
}

/* 10. Высокопиксельные дисплеи */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .logo img,
    .nav-icon,
    .stat-icon img,
    .activity-icon,
    .holiday-icon img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* 11. Доступность - reduced motion */
@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;
    }
}

/* 12. Темная тема для OLED */
@media (prefers-color-scheme: dark) {
    .oled-optimized {
        background: #000000;
    }
}

/* 13. Большие экраны (школьные проекторы/доски) */
@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }

    h1 {
        font-size: 3.5rem !important;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Global Mobile Responsive Styles */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    h1 {
        font-size: clamp(24px, 6vw, 32px) !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: clamp(20px, 5vw, 28px) !important;
    }

    h3 {
        font-size: clamp(18px, 4vw, 24px) !important;
    }

    button,
    .btn-primary,
    .btn-secondary {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ��������� ����������� */
@media (max-width: 768px) {
    .mobile-auth-panel {
        display: block !important;
    }

    .auth-buttons {
        display: none !important;
    }

    /* �������������� ������� ��� �������� */
    main {
        padding-bottom: 80px;
    }
}