/*
 * mobile.css  —  SchoolHub Global Mobile & Responsive Stylesheet
 * Injected into every JSP page. Covers:
 *   • Sidebar (fixed left 290px → top sticky bar on mobile)
 *   • Main content area offset
 *   • Card grids (repeat(N,1fr) → 2-col → 1-col)
 *   • Table horizontal scroll
 *   • Forms / inputs / buttons
 *   • Modals / overlays
 *   • Font scaling
 * -----------------------------------------------------------
 * Breakpoints:
 *   ≥1400px  — desktop wide          (default)
 *   ≤1200px  — small desktop/tablet landscape
 *   ≤900px   — tablet portrait / large phone landscape
 *   ≤560px   — mobile portrait
 *   landscape + max-height 520px     — phone landscape
 * -----------------------------------------------------------
 */

/* ─── 0. BASE GLOBAL SAFETY ─── */
*, *::before, *::after { box-sizing: border-box; }

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

img, canvas, svg, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

input, select, textarea, button {
    max-width: 100%;
}

/* ─── TABLE SCROLL WRAPPER ─── */
.table-wrap,
.table-wrapper,
.tableWrap,
.tableBox,
.table-box,
.table-container,
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Make sure all bare tables inside scroll wrappers don't break layout */
.table-wrap table,
.tableWrap table,
.table-wrapper table,
.table-container table,
.table-responsive table {
    min-width: 600px;
}

/* ─── 1. ≤1200px  small desktop / tablet landscape ─── */
@media (max-width: 1200px) {

    /* Multi-column card grids → 3 columns */
    .cards,
    .studentGrid,
    .stats-grid,
    .kpi-grid,
    .info-grid,
    .dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ─── 2. ≤900px  tablet portrait / large phone landscape ─── */
@media (max-width: 900px) {

    /* ── Sidebar: collapse to a sticky top bar ── */
    .sidebar {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 0 22px 22px !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        z-index: 9000 !important;
        box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
    }

    /* Logo inside sidebar */
    .sidebar .logo,
    .sidebar > .logo {
        min-width: max-content !important;
        margin: 0 8px 0 0 !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Profile card inside sidebar */
    .sidebar .profile {
        min-width: 180px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        flex-shrink: 0 !important;
        border-radius: 14px !important;
    }

    .sidebar .avatar {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
        flex-shrink: 0 !important;
    }

    /* Nav links inside sidebar */
    .sidebar a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 10px 14px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        transform: none !important;
    }

    .sidebar a:hover {
        transform: none !important;
    }

    /* Child switcher (dropdowns in sidebar) */
    .switcher,
    .sidebar .switcher {
        min-width: 180px !important;
        max-width: 220px !important;
        flex-shrink: 0 !important;
    }

    .switcher select {
        margin-bottom: 0 !important;
    }

    /* ── Main content: full width ── */
    .main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 18px 16px !important;
    }

    /* ── Page headers ── */
    .header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .header-title,
    .header h2,
    .header h1 {
        font-size: 20px !important;
    }

    .search,
    .pill,
    .filter-bar,
    .action-bar {
        width: 100% !important;
    }

    /* ── Card grids → 2 columns ── */
    .cards,
    .studentGrid,
    .stats-grid,
    .kpi-grid,
    .info-grid,
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    /* ── Generic grids → single column ── */
    .grid,
    .form-grid,
    .summary-grid,
    .content-grid,
    .two-col,
    .three-col {
        grid-template-columns: 1fr !important;
    }

    /* ── Panels, boxes, cards ── */
    .panel,
    .box,
    .form-card,
    .table-card,
    .chart-box,
    .headerCard,
    .info-card {
        border-radius: 18px !important;
        padding: 18px !important;
    }

    /* ── Tab rows — wrap on mobile ── */
    .tab-row,
    .tabs {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .tab {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }

    /* ── Forms ── */
    .form-group,
    .form-row {
        grid-template-columns: 1fr !important;
    }

    label {
        font-size: 13px !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }

    /* ── Buttons ── */
    .btn,
    button[type="submit"],
    .submit-btn,
    .action-btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* ── Tables — force scroll ── */
    table {
        min-width: 580px;
    }

    /* ── Modals ── */
    .modal-content,
    .modal-box,
    .modal-card {
        width: 94% !important;
        max-width: 94% !important;
        margin: 10px auto !important;
        border-radius: 20px !important;
        padding: 20px !important;
    }
}

/* ─── 3. ≤560px  mobile portrait ─── */
@media (max-width: 560px) {

    /* Sidebar wraps to two rows on tiny screens */
    .sidebar {
        flex-wrap: wrap !important;
        border-radius: 0 0 18px 18px !important;
        padding: 10px 12px !important;
    }

    .sidebar .logo {
        width: 100% !important;
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .sidebar .profile {
        width: 100% !important;
        min-width: 0 !important;
    }

    .sidebar a {
        flex: 1 1 calc(50% - 8px) !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        min-height: 42px !important;
        font-size: 12px !important;
    }

    .switcher,
    .sidebar .switcher {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Cards → single column */
    .cards,
    .studentGrid,
    .stats-grid,
    .kpi-grid,
    .info-grid,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .card {
        min-height: 90px !important;
        padding: 14px 16px !important;
    }

    .card-value {
        font-size: 20px !important;
        margin-top: 8px !important;
    }

    .card-title {
        font-size: 11px !important;
    }

    /* Header title smaller */
    .header-title,
    .header h2,
    .header h1 {
        font-size: 18px !important;
    }

    /* Panels */
    .panel,
    .box,
    .form-card,
    .table-card,
    .chart-box,
    .headerCard {
        border-radius: 14px !important;
        padding: 14px !important;
    }

    /* Tab text smaller */
    .tab {
        font-size: 11px !important;
        padding: 7px 10px !important;
    }

    /* Modals full width */
    .modal-content,
    .modal-box,
    .modal-card {
        width: 98% !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    /* Main padding tighter */
    .main {
        padding: 12px 10px !important;
    }
}

/* ─── 4. Phone landscape (short height, wide width) ─── */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {

    /* Sidebar becomes a fixed left column again */
    .sidebar {
        display: block !important;
        position: fixed !important;
        top: 8px !important;
        left: 8px !important;
        width: 220px !important;
        height: calc(100vh - 16px) !important;
        border-radius: 20px !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        z-index: 9000 !important;
    }

    .sidebar .logo {
        min-width: 0 !important;
        margin-bottom: 10px !important;
        font-size: 15px !important;
        white-space: normal !important;
        width: auto !important;
    }

    .sidebar .profile {
        min-width: 0 !important;
        width: auto !important;
        margin-bottom: 10px !important;
    }

    .sidebar a {
        display: flex !important;
        justify-content: flex-start !important;
        white-space: nowrap !important;
        width: 100% !important;
        flex: none !important;
        font-size: 13px !important;
        padding: 10px 12px !important;
        margin-bottom: 4px !important;
        min-height: 0 !important;
        text-align: left !important;
        transform: none !important;
    }

    .main {
        margin-left: 236px !important;
        padding: 14px !important;
    }

    /* Cards → 2-col in landscape */
    .cards,
    .studentGrid,
    .stats-grid,
    .kpi-grid,
    .info-grid,
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .header {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* ─── 5. Print (bonus) ─── */
@media print {
    .sidebar { display: none !important; }
    .main { margin-left: 0 !important; padding: 0 !important; }
    .tab-row, .tabs { display: none !important; }
    .panel { display: block !important; }
}