/**
 * IHK ExamPrep / Prüfungs-Simulator - Mobile Stylesheet
 * Exclusively loaded and applied on screens smaller than 768px.
 */

@media (max-width: 768px) {
    /* ==========================================================================
       1. GLOBAL RESET & TYPOGRAPHY
       ========================================================================== */
    body {
        font-size: 0.9rem !important;
        overflow-x: hidden !important;
    }
    
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }

    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.2rem !important; }
    h3 { font-size: 1.1rem !important; }
    
    input, textarea, select, button {
        font-size: 0.9rem !important;
    }

    /* ==========================================================================
       2. AUTH PAGES (login.php, register.php)
       ========================================================================== */
    .auth-wrapper {
        padding: 1rem 12px !important;
        display: block !important;
    }

    .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem 1rem !important;
        border-radius: 12px !important;
        box-shadow: var(--shadow-md) !important;
    }

    .auth-card button[type="submit"] {
        min-height: 46px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
    }

    /* ==========================================================================
       3. USER DASHBOARD (dashboard.php)
       ========================================================================== */
    .dashboard-content-wrapper {
        gap: 1.25rem !important;
    }

    /* Container padding adjustment */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Header Nav items centering / vertical stack */
    .nav-container {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem 12px !important;
        text-align: center;
    }

    .dashboard-nav-actions {
        width: 100%;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    /* Welcome Banner on Mobile */
    .welcome-banner {
        padding: 1.25rem !important;
        text-align: left;
    }

    .welcome-banner h2 {
        font-size: 1.35rem !important;
    }

    .welcome-banner p {
        font-size: 0.9rem !important;
    }

    /* Quick stats grid (2x2 on mobile) */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
    }

    .stat-card {
        padding: 0.85rem 0.6rem !important;
        text-align: center;
    }

    .stat-card .stat-number {
        font-size: 1.5rem !important;
    }

    .stat-card .stat-label {
        font-size: 0.75rem !important;
    }

    /* Module Tabs Navigation (Mobile Stack) */
    .tabs-navigation {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    .tab-btn {
        width: 100% !important;
        min-height: 80px !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
    }

    .tab-btn-header {
        font-size: 0.95rem !important;
    }

    .tab-btn-subtitle {
        font-size: 0.8rem !important;
    }

    /* Accordion Header & Body on Mobile */
    .accordion-header {
        padding: 0.9rem 1rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .accordion-header > div {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .accordion-header span {
        font-size: 0.9rem !important;
    }

    .accordion-body {
        padding: 1rem 0.75rem !important;
    }

    /* Exam Cards Grid */
    .exams-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .exam-set-card {
        padding: 1rem !important;
    }

    .exam-set-card h4 {
        font-size: 0.95rem !important;
    }

    .exam-set-card .btn {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }

    /* Schwächen-Radar Card on Mobile */
    .recs-card {
        padding: 1.25rem 1rem !important;
    }

    .recs-card h3 {
        font-size: 1.1rem !important;
    }

    .recs-list {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .rec-item {
        padding: 1rem !important;
    }

    .rec-description {
        font-size: 0.825rem !important;
        padding: 0.65rem 0.75rem !important;
    }

    /* Reset Progress Button Mobile */
    .recs-card div[style*="text-align: right"] {
        text-align: center !important;
    }

    .recs-card button {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem !important;
    }

    /* Footer Grid stacking */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
    }

    /* ==========================================================================
       4. EXAM SIMULATOR (exam.php)
       ========================================================================== */
    body {
        overflow: auto !important;
        overflow-y: auto !important; /* Override body-lock during exam on mobile */
    }

    .exam-sticky-header {
        position: sticky !important;
        top: 0;
        z-index: 1000;
        padding: 0.75rem 10px !important;
        height: auto !important;
        flex-wrap: wrap;
        gap: 0.5rem;
        box-shadow: var(--shadow-sm);
        background-color: #ffffff;
    }

    .exam-sticky-header h2 {
        font-size: 0.95rem !important;
        order: 1;
        width: 100%;
        text-align: left !important;
        margin-top: 0.25rem !important;
    }

    .exam-layout {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Sidebar Navigation buttons collapse into a horizontal scrolling container */
    .exam-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--color-border);
        padding: 0.75rem 10px !important;
        position: static !important;
        height: auto !important;
    }

    .sidebar-task-list {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-task-btn {
        flex-shrink: 0 !important;
        width: auto !important;
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
    }

    /* Hide redundant buttons in mobile sidebar, or make them responsive */
    .exam-sidebar div:last-child {
        display: none !important; /* Hide sidebar submit/cancel. Use bottom buttons instead */
    }

    /* Main Area layout */
    .exam-main {
        width: 100% !important;
        padding: 10px 8px !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* A4 document layout */
    .a4-document {
        padding: 1.5rem 12px !important;
        margin-bottom: 1.5rem !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Stacking header elements of the IHK exam sheet */
    .ihk-header-box {
        flex-direction: column !important;
        border-width: 1px !important;
    }

    .ihk-header-left, .ihk-header-middle, .ihk-header-right {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #000000 !important;
        padding: 0.5rem !important;
        box-sizing: border-box;
    }

    .ihk-header-right {
        border-bottom: none !important;
    }

    /* Stacking subtask question vs correction margin column */
    .subtask-row {
        flex-direction: column !important;
        gap: 1rem !important;
        padding-bottom: 1.5rem !important;
    }

    .subtask-main-col {
        width: 100% !important;
        padding-right: 0 !important;
    }

    .subtask-correction-col {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px dashed #e2e8f0;
        padding-left: 0 !important;
        padding-top: 0.75rem !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .correction-box {
        width: 110px !important;
        height: 34px !important;
    }

    /* Make large tables or math models scrollable */
    table, .table-wrapper {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    /* Lined / Checkered textareas sizing */
    .lined-textarea {
        background-size: 100% 26px !important;
        line-height: 26px !important;
        font-size: 0.88rem !important;
    }

    .checkered-box {
        min-height: 140px !important;
    }

    .checkered-textarea {
        min-height: 120px !important;
        font-size: 0.85rem !important;
    }

    /* Bottom buttons positioning */
    .exam-nav-buttons {
        position: sticky !important;
        bottom: 0;
        background-color: #f3f4f6;
        padding: 0.75rem !important;
        margin: 1rem -8px -10px -8px !important;
        border-top: 1px solid var(--color-border);
        display: flex;
        gap: 0.5rem;
    }

    .exam-nav-buttons button {
        flex: 1;
        padding: 0.75rem 0.25rem !important;
        font-size: 0.85rem !important;
    }

    /* ==========================================================================
       5. RESULTS DASHBOARD (result.php)
       ========================================================================== */
    .result-header {
        padding: 2.25rem 10px !important;
    }

    .result-header h1 {
        font-size: 1.6rem !important;
    }

    .result-summary-card {
        padding: 1.5rem 12px !important;
    }

    .result-summary-card h2 {
        font-size: 1.4rem !important;
    }

    main.container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Result Filter Bar Mobile */
    .result-filter-bar {
        gap: 0.4rem !important;
        justify-content: space-between !important;
    }

    .btn-filter {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.65rem !important;
        flex: 1 1 calc(50% - 0.4rem) !important;
        justify-content: center !important;
    }

    /* Task details block & 2-column comparison grid on mobile */
    .subtask-result-card {
        padding: 1.1rem 0.85rem !important;
        margin-bottom: 1.25rem !important;
    }

    .comparison-grid {
        grid-template-columns: 1fr !important; /* Stack user input & Musterlösung vertically on small screens */
        gap: 0.85rem !important;
    }

    .subtask-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    /* Code & answer display box spacing */
    pre, div[style*="font-family: monospace"] {
        font-size: 0.8rem !important;
        padding: 0.75rem !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }

    /* ==========================================================================
       6. FOOTER & LEGAL PAGES MOBILE OVERRIDES
       ========================================================================== */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        margin-bottom: 2.5rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .footer-legal-links {
        justify-content: center !important;
    }

    .legal-hero {
        padding: 3rem 0 2rem 0 !important;
    }

    .legal-hero h1 {
        font-size: 1.6rem !important;
    }

    .legal-body-container {
        padding: 2rem 0.85rem 3.5rem 0.85rem !important;
    }

    .legal-card-item {
        padding: 1.4rem 1rem !important;
    }

    .legal-toc-grid {
        grid-template-columns: 1fr !important;
    }

    /* Accordion mobile styling */
    .accordion-header {
        padding: 0.9rem 1rem !important;
    }
    
    .accordion-header span {
        font-size: 0.92rem !important;
    }

    .accordion-body {
        padding: 1rem 0.75rem !important;
    }

    .recs-card {
        position: static !important;
    }
}