/* ============================================================
   mobile.css — Universal mobile-responsive overrides
   Applied across all In-Odyssey personas via base templates.

   Breakpoints:
     ≤768px   tablet landscape / phone landscape
     ≤576px   phone portrait
   ============================================================ */

/* ── Sidebar collapse on mobile ─────────────────────────────── */
@media (max-width: 768px) {

    /* Push sidebar off-screen by default (overrides both hidden + shown states) */
    #sidebar,
    .sidebar-main,
    .teacher-sidebar,
    .admin-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1100 !important;
        position: fixed !important;
    }

    /* When mobile.js adds .mobile-open, slide it in */
    #sidebar.mobile-open,
    .sidebar-main.mobile-open,
    .teacher-sidebar.mobile-open,
    .admin-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* Content area takes full width — no margin for sidebar */
    .content-area,
    .teacher-content,
    #mainContent,
    .admin-content-area {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Compact topbar on mobile */
    .search-profile-bar {
        padding: 0.5rem 1rem !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Hide long text hints in topbar on very small screens */
    .topbar-hint { display: none !important; }
}

/* ── Sidebar overlay ────────────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1099;
    backdrop-filter: blur(2px);
}

/* ── Dashboard layout ───────────────────────────────────────── */
@media (max-width: 768px) {

    /* Stack wrapper children vertically (sidebar + content) */
    .dashboard-wrapper {
        flex-direction: column !important;
        overflow-x: hidden;
    }

    /* Page body padding */
    .page-body,
    .cd-content,
    .container-fluid.p-4 {
        padding: 1rem !important;
    }

    /* Hero sections */
    .cd-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    .cd-hero-btn { width: 100% !important; justify-content: center; }

    /* Stats grids — 2 per row on tablet, 1 per row on phone */
    .cd-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Cards — remove hover transforms on touch devices */
    .glass-card:hover {
        transform: none !important;
    }

    /* Tables — allow horizontal scroll inside wrapper */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide verbose table columns on small screens */
    .d-md-table-cell { display: none !important; }

    /* Modals — full-width on mobile */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100vw - 1rem) !important;
    }

    /* Communication layout (2-pane → stacked) */
    .cm-layout {
        flex-direction: column !important;
    }
    .cm-sidebar {
        width: 100% !important;
        max-height: 45vh;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .cm-info-panel {
        display: none !important;
    }
    .cm-chat-area {
        min-height: 55vh;
    }

    /* Teacher radar / chart panels */
    .radar-grid,
    .chart-grid {
        grid-template-columns: 1fr !important;
    }

    /* Newsfeed / card grids */
    .nf-feed-grid,
    .feed-grid {
        grid-template-columns: 1fr !important;
    }

    /* Provider job hub cards */
    .jobs-grid,
    .hub-grid {
        grid-template-columns: 1fr !important;
    }

    /* Earnings breakdown */
    .earnings-grid {
        grid-template-columns: 1fr !important;
    }

    /* Form layouts — stack label + input vertically */
    .form-row-inline {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Pill nav tabs — allow horizontal scroll */
    .nav-pills,
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .nav-pills::-webkit-scrollbar { display: none; }
}

/* ── Phone portrait ─────────────────────────────────────────── */
@media (max-width: 576px) {

    .cd-stats,
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .cd-hero-title { font-size: 1.1rem !important; }

    /* Topbar — hide non-essential elements */
    .d-none.d-md-flex { display: none !important; }
    .d-sm-block { display: none !important; }

    /* Reduce card padding */
    .glass-card { padding: 1rem !important; }

    /* Sidebar illustration — hide on phones */
    .sidebar-illustration { display: none !important; }

    /* Full-width buttons */
    .btn-mobile-full { width: 100% !important; }

    /* Stack user mini-profile */
    .user-profile-mini { flex-direction: column; align-items: flex-end; }

    /* Hide secondary badges */
    .badge.d-none-mobile { display: none !important; }

    /* Filter bars — stack vertically */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .filter-bar .form-select,
    .filter-bar .form-control,
    .filter-bar .btn {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ── Mobile sidebar toggle button (visible on mobile) ───────── */
.mobile-sidebar-btn {
    display: none;
}
@media (max-width: 768px) {
    .mobile-sidebar-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: none;
        border: none;
        color: #64748b;
        font-size: 1.3rem;
        cursor: pointer;
        transition: background 0.15s;
    }
    .mobile-sidebar-btn:hover {
        background: rgba(0, 0, 0, 0.06);
    }
}