/* ================================================================
   GLOBAL MOBILE ADJUSTMENTS
   ================================================================ */

@media (max-width: 768px) {

    /* --- Mobile Page Headers (Internal) --- */
    .mobile-page-header {
        margin-bottom: 1rem !important;
        background: #fff;
        padding: 1rem;
        margin: -1rem -0.5rem 1rem -0.5rem;
        border-bottom: 1px solid #f1f5f9;
        flex-direction: row;
        align-items: center;
        border-radius: 0 0 1rem 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .mobile-h3 { font-size: 1.2rem !important; margin-bottom: 0 !important; }
    .mobile-date-badge { padding: 0.35rem 0.75rem !important; font-size: 0.75rem; }

    /* Adjust main content padding on mobile */
    .container-fluid.p-4.bg-light { padding: 1rem 0.5rem !important; }

    /* Exam Header Specifics */
    .exam-header-mobile {
        margin-bottom: 1rem !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    .exam-header-title-mobile { font-size: 1.4rem !important; }
    .small-mobile { font-size: 0.8rem; }

    /* Hide breadcrumbs on mobile */
    .breadcrumb-mobile-wrapper { display: none !important; }

    /* --- Typography Scaling --- */
    h1, .h1 { font-size: 1.5rem !important; }
    h2, .h2 { font-size: 1.25rem !important; }
    h3, .h3 { font-size: 1.1rem !important; }
    h4, .h4 { font-size: 1rem !important; }

    /* --- Layout & Spacing --- */
    .container, .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .main-content { padding: 1rem 0.5rem !important; }
    .mb-mobile-3 { margin-bottom: 1rem !important; }

    /* --- Cards --- */
    .card { margin-bottom: 1rem; border-radius: 0.75rem !important; }
    .card-body { padding: 1rem !important; }

    /* --- Stats Grid --- */
    .stats-grid, .row-cols-md-3, .row-cols-lg-4 {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .row { margin-right: 0; margin-left: 0; }
    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    /* --- Tables --- */
    .table-responsive { border: 0; overflow-x: auto; }
    .table-mobile-stack thead { display: none; }
    .table-mobile-stack tr {
        display: block;
        margin-bottom: 1rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        padding: 0.5rem;
    }
    .table-mobile-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #f1f5f9;
        padding: 0.75rem 0.5rem !important;
        text-align: right;
        min-height: 48px;
    }
    .table-mobile-stack td:last-child { border-bottom: none; }
    .table-mobile-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        text-align: left;
        margin-right: 1rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    /* --- Navbar/Header --- */
    .main-navbar {
        padding: 0 0.75rem !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #ffffff !important;
        overflow: hidden;
    }
    .main-navbar .container-fluid {
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
    }
    .btn-header {
        width: 38px; height: 38px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem;
        background: #f8fafc;
        border: 1px solid #f1f5f9;
        transition: all 0.2s;
    }
    .btn-header:active { background: #f1f5f9; transform: scale(0.95); }
    .navbar-brand { font-size: 1.1rem; }

    /* --- Buttons & Modals & Forms --- */
    .btn-mobile-full { width: 100%; display: block; margin-bottom: 0.5rem; }
    .modal-dialog { margin: 0.5rem; }
    .modal-content { border-radius: 1rem !important; }
    .form-control { font-size: 16px !important; }
    .btn-lg { font-size: 1rem; padding: 0.75rem 1rem; }

    /* --- Mobile Tab Grid (2x2) --- */
    .mobile-tab-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem !important; }
    .mobile-tab-grid .nav-item { width: 100%; }
    .mobile-tab-grid .nav-link {
        font-size: 0.8rem !important; padding: 0.75rem 0.25rem !important;
        height: 100%; border-radius: 12px !important;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        text-align: center; white-space: normal !important;
    }
    .mobile-tab-grid .nav-link i { font-size: 1.25rem; margin-bottom: 0.25rem; margin-right: 0 !important; }
    .mobile-tab-grid .tab-text { line-height: 1.1; }

    /* --- Mobile Horizontal Card Styles --- */
    .card-icon-wrapper { width: 50px !important; height: 50px !important; font-size: 1.5rem !important; }
    .mobile-text-h6 { font-size: 1rem !important; }

    /* Compact breadcrumbs */
    .breadcrumb-mobile { padding: 0.5rem 1rem !important; margin-bottom: 1rem !important; font-size: 0.85rem; }
}

/* Hide on tiny screens */
@media (max-width: 360px) {
    .lang-switcher-left { display: none !important; }
}

/* Landscape Mode */
@media (max-width: 900px) and (orientation: landscape) {
    .main-navbar { min-height: 50px; }
}

/* ================================================================
   MOBILE BOTTOM NAVIGATION
   ================================================================ */

.mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%; height: 65px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    border-top: 1px solid #eee;
    padding-bottom: env(safe-area-inset-bottom);
}

.bloc-icon {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-decoration: none !important;
    color: #64748b; font-size: 0.7rem;
    width: 25%; height: 100%;
    transition: all 0.2s ease;
}
.bloc-icon i { font-size: 1.4rem; margin-bottom: 2px; }
.bloc-icon.active { color: #4f46e5; font-weight: 600; }
.bloc-icon:hover { color: #4f46e5; }

@media (max-width: 768px) {
    body { padding-bottom: 80px !important; }
    .fab-btn, .fab-folder-toggle { bottom: 90px !important; }
    .exam-header-mobile { margin-bottom: 1.5rem !important; }
    .exam-header-title-mobile { font-size: 1.75rem !important; }
}

/* ================================================================
   ADMIN SIDEBAR — MOBILE OVERLAY
   ================================================================ */

@media (max-width: 768px) {
    #sidebar-wrapper {
        position: fixed !important;
        top: 0; bottom: 0; left: 0;
        width: 260px !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100% !important;
        display: block !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 10000 !important;
        margin-left: -260px;
        transition: margin-left 0.3s ease;
        padding-bottom: 20px;
        background-color: var(--bg-sidebar, #1e293b) !important;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0 !important;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
    }

    #sidebar-wrapper .list-group { padding-bottom: 40px; }

    #wrapper.toggled::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        backdrop-filter: blur(2px);
    }

    #page-content-wrapper { padding-bottom: 80px; }

    body.sidebar-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%; height: 100%;
    }
}

/* Utilities */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ================================================================
   QUESTION BANK PAGE — RESPONSIVE
   ================================================================ */

/* Tablet (≤992px): sidebar stacks above content */
@media (max-width: 992px) {
    .content-split-layout {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .content-split-layout .folder-sidebar {
        width: 100% !important;
        position: static !important;
        max-height: 280px !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
    }

    /* Folder list becomes a wrapping pill-row */
    .vertical-folder-list {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .vertical-folder-item {
        flex: 0 0 auto !important;
        padding: 0.55rem 1rem !important;
        border-radius: 20px !important;
    }

    .vertical-folder-icon { font-size: 1.1rem !important; }
    .vertical-folder-title { font-size: 0.85rem !important; }

    .content-main-area { width: 100% !important; }

    /* Question options: single column */
    .question-options-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile (≤600px): tighter adjustments */
@media (max-width: 600px) {
    /* Container padding */
    .container-fluid[style*="padding: 20px"] { padding: 10px !important; }

    /* Action bar wraps and shrinks buttons */
    .qb-action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .qb-action-bar > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .qb-action-bar .btn,
    .qb-action-bar a.btn {
        font-size: 0.78rem !important;
        padding: 0.45rem 0.75rem !important;
        flex: 0 0 auto;
    }

    /* Inline action bar (no class, inline style-based) */
    div[style*="justify-content: space-between"][style*="margin-bottom: 1.5rem"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    div[style*="justify-content: space-between"][style*="margin-bottom: 1.5rem"] > div {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    /* Question cards */
    .content-card {
        padding: 0.9rem !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        border-radius: 12px !important;
    }
    .content-card .content-icon {
        width: 36px !important; height: 36px !important;
        font-size: 0.9rem !important; border-radius: 8px !important;
    }

    /* Edit/Delete buttons inline row */
    .content-card > div[style*="flex-direction: column"] {
        flex-direction: row !important;
        justify-content: flex-end;
        gap: 0.5rem;
        width: 100%;
    }

    /* Match grid: vertical on mobile */
    .match-grid {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
    }
    .match-grid > div { flex: 1 1 100% !important; }

    /* Statement items */
    .statement-item { gap: 0.5rem !important; }

    /* Bulk import textarea */
    #bulkRawText { min-height: 180px !important; font-size: 0.85rem !important; }

    /* Tab + breadcrumb row */
    .tabs { gap: 0.25rem !important; font-size: 0.85rem; }
    .tab-btn { padding: 0.6rem 0.75rem !important; }
}

/* ================================================================
   STUDENT PAGES — RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {

    /* Dashboard: hero + notifications full width */
    .row.mb-4 .col-lg-8,
    .row.mb-4 .col-lg-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Join Exam hero: reduce padding */
    .card-body.p-5 { padding: 1.25rem !important; }

    /* Quick Links: 2-column grid */
    .row.g-4.stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }
    .stats-grid .col-md-4 { width: 100% !important; max-width: 100% !important; }

    /* Exam list: stack card content */
    .exam-card-horizontal { flex-direction: column !important; }

    /* Hero h2 */
    .card h2.fw-bold { font-size: 1.25rem !important; }

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

    /* Study material list items */
    .study-item-row { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem; }

    /* Profile: stack columns */
    .profile-avatar-col,
    .profile-form-col {
        width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
    }

    /* Notifications: compact */
    .notification-card { padding: 0.75rem !important; }

    /* Exam take: readable question text */
    .question-text { font-size: 1rem !important; line-height: 1.6 !important; }
    .option-label { padding: 0.75rem 1rem !important; font-size: 0.9rem !important; }
    .exam-timer-badge { font-size: 0.9rem !important; padding: 0.4rem 0.75rem !important; }

    /* Result stats: 2-column */
    .result-stat-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Extra-small (≤480px) */
@media (max-width: 480px) {
    /* Single column dashboard quick links */
    .row.g-4.stats-grid { grid-template-columns: 1fr !important; }

    /* Exam code input group: stack vertically */
    .input-group.input-group-lg { flex-direction: column; gap: 0.5rem; }
    .input-group.input-group-lg .form-control,
    .input-group.input-group-lg .input-group-text,
    .input-group.input-group-lg .btn {
        border-radius: 8px !important;
        width: 100%;
    }

    /* Result stat: single column */
    .result-stat-grid { grid-template-columns: 1fr !important; }

    /* Question Bank folder list: vertical stack */
    .vertical-folder-list { flex-direction: column !important; }
    .vertical-folder-item { border-radius: 10px !important; }

    /* Modals: near full-screen */
    .modal-dialog { margin: 0.25rem !important; max-width: calc(100% - 0.5rem) !important; }
    .modal-content { border-radius: 0.75rem !important; }

    /* Desktop icon wrapper (preserve desktop sizing) */
    @media (min-width: 769px) {
        .card-icon-wrapper { width: 80px !important; height: 80px !important; font-size: 2rem !important; }
    }
}