/* ============================================================
   MOBILE.CSS - Full Mobile Optimization
   VIRGIL (Creative) + SITI (CEdO) - Hexagon Council
   Covers: iOS Safari, Android Chrome, small screens
   Breakpoints: 480px (phone), 768px (tablet)
   ============================================================ */

/* ============================================================
   EXAM PAGE - Mobile Critical Fixes
   ============================================================ */

/* Fix sticky header on iOS Safari (position: sticky bug) */
@supports (-webkit-overflow-scrolling: touch) {
    .exam-header {
        position: -webkit-sticky;
        position: sticky;
    }

    .exam-bottom-bar {
        position: -webkit-sticky;
    }
}

/* Exam header: compact on small screens */
@media (max-width: 480px) {
    .exam-header-inner {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .exam-subject-badge {
        font-size: 11px;
        padding: 4px 10px;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .exam-progress-text {
        font-size: 11px;
        white-space: nowrap;
    }

    .exam-timer {
        font-size: 14px;
        font-weight: 900;
        white-space: nowrap;
    }

    /* Pause button: icon only on very small screens */
    #pauseBtn {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Question card: full-bleed on mobile */
@media (max-width: 480px) {
    .question-container {
        padding: 0 12px;
        margin-top: 12px;
    }

    .question-card {
        padding: 16px;
        border-radius: 16px;
    }

    .question-text {
        font-size: 16px;
        line-height: 1.7;
    }

    /* Options: larger tap targets (SITI: kids have big fingers!) */
    .option-card {
        padding: 14px 12px;
        min-height: 56px;
        border-radius: 12px;
    }

    .option-label {
        width: 36px;
        height: 36px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .option-text {
        font-size: 15px;
        line-height: 1.5;
    }

    /* Bottom bar: full width buttons */
    .exam-bottom-bar {
        padding: 10px 12px;
        /* Account for iOS home indicator */
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .nav-btn {
        padding: 12px 16px;
        font-size: 14px;
        border-radius: 12px;
    }

    /* Question navigator dots: slightly smaller */
    .question-dot {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }

    /* Audio button: full width on mobile */
    .audio-btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 12px;
    }
}

/* ============================================================
   LOGIN PAGE - Mobile Optimization
   ============================================================ */

@media (max-width: 480px) {
    .login-page {
        padding: 16px;
        align-items: flex-start;
        padding-top: 40px;
    }

    .login-container {
        max-width: 100%;
    }

    .login-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .login-mascot {
        width: 80px;
        height: 80px;
        font-size: 40px;
        margin-bottom: 12px;
    }

    .login-card h2 {
        font-size: 22px;
    }

    /* Role tabs: smaller text */
    .role-tab {
        font-size: 11px;
        padding: 8px 6px;
    }

    /* Avatar grid: 4 columns still, but smaller */
    .avatar-grid {
        gap: 8px;
    }

    .avatar-option {
        font-size: 28px;
        border-radius: 12px;
    }

    /* Login button: large tap target */
    .login-btn {
        padding: 16px;
        font-size: 18px;
        border-radius: 14px;
    }

    /* Input fields: larger for mobile */
    .input-field {
        font-size: 16px;
        /* Prevents iOS zoom on focus! */
        padding: 14px 14px 14px 44px;
    }
}

/* ============================================================
   LANDING PAGE - Mobile Optimization
   ============================================================ */

@media (max-width: 480px) {

    /* Hero: single column, mascot first */
    .hero {
        min-height: auto;
        padding-top: 80px;
        /* navbar height */
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 0 40px;
        text-align: center;
    }

    .hero-text h1 {
        font-size: 28px;
        line-height: 1.2;
    }

    .hero-text p {
        font-size: 15px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 320px;
    }

    /* Mascot: smaller on phone */
    .hero-illustration .mascot {
        width: 160px;
        height: 160px;
        font-size: 72px;
    }

    /* Features: 1 column */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .feature-card {
        padding: 24px 20px;
        text-align: left;
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .feature-icon {
        width: 52px;
        height: 52px;
        font-size: 26px;
        flex-shrink: 0;
        margin: 0;
    }

    .feature-card h4 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .feature-card p {
        font-size: 14px;
    }

    /* CTA box */
    .cta-box {
        padding: 32px 20px;
        border-radius: 20px;
    }

    .cta-box h2 {
        font-size: 24px;
    }
}

/* ============================================================
   DASHBOARD - Mobile Optimization
   ============================================================ */

@media (max-width: 480px) {
    .dash-header {
        padding: 16px 0;
        /* Account for iOS notch */
        padding-top: calc(16px + env(safe-area-inset-top));
    }

    .dash-header-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .dash-user-info h3 {
        font-size: 15px;
    }

    .dash-user-info p {
        font-size: 11px;
    }

    .dash-logout {
        font-size: 11px;
        padding: 6px 10px;
        white-space: nowrap;
    }

    /* Stats: 2 columns on phone */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-card {
        padding: 14px 10px;
    }

    .stat-value {
        font-size: 22px;
    }

    .stat-icon {
        font-size: 24px;
    }

    /* Sections */
    .dash-section {
        padding: 16px;
        border-radius: 14px;
    }

    /* Tables: horizontal scroll */
    .history-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .history-table {
        min-width: 480px;
    }

    /* Tabs: scrollable */
    .dash-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

    .dash-tab {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
        padding: 8px 14px;
    }
}

/* ============================================================
   ADMIN DASHBOARD - Mobile Optimization (FERRAN)
   ============================================================ */

@media (max-width: 480px) {

    /* Forms: full width */
    .admin-form input,
    .admin-form select,
    .admin-form textarea {
        font-size: 16px;
        /* Prevent iOS zoom */
        width: 100%;
    }

    /* Action buttons: stack vertically */
    .admin-actions {
        flex-direction: column;
        gap: 8px;
    }

    .admin-actions button {
        width: 100%;
    }

    /* User cards in admin: compact */
    .user-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .user-card-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .user-card-actions button {
        flex: 1;
        font-size: 12px;
        padding: 8px;
    }
}

/* ============================================================
   GLOBAL MOBILE UTILITIES
   ============================================================ */

/* Prevent horizontal overflow */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .container {
        padding: 0 16px;
    }
}

/* Touch-friendly: minimum 44px tap targets (Apple HIG) */
@media (hover: none) and (pointer: coarse) {

    button,
    a,
    [role="button"] {
        min-height: 44px;
    }

    .option-card {
        min-height: 52px;
    }

    .avatar-option {
        min-height: 52px;
    }
}

/* Landscape phone: compact header */
@media (max-height: 500px) and (orientation: landscape) {
    .exam-header {
        padding: 6px 0;
    }

    .login-mascot {
        display: none;
    }

    .login-card {
        padding: 16px;
    }

    .hero {
        min-height: auto;
    }
}

/* ============================================================
   iOS SAFARI SPECIFIC FIXES
   ============================================================ */

/* Fix 100vh on iOS Safari (includes browser chrome) */
@supports (-webkit-touch-callout: none) {

    .login-page,
    .hero {
        min-height: -webkit-fill-available;
    }
}

/* Fix input zoom on iOS (font-size must be >= 16px) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"] {
        font-size: 16px;
    }
}

/* ============================================================
   INSTALL PROMPT BANNER (PWA)
   ============================================================ */

.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #E5E7EB;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 200;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.pwa-install-banner .pwa-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.pwa-install-banner .pwa-text {
    flex: 1;
}

.pwa-install-banner .pwa-text strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #1F2937;
}

.pwa-install-banner .pwa-text span {
    font-size: 12px;
    color: #6B7280;
}

.pwa-install-banner .pwa-btn-install {
    background: #16A34A;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.pwa-install-banner .pwa-btn-dismiss {
    background: none;
    border: none;
    color: #9CA3AF;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
}