/* ═══════════════════════════════════════════════════
   Hope & Cope — Mobile Responsive Stylesheet
   All rules inside media queries — desktop is UNTOUCHED
   ═══════════════════════════════════════════════════ */

/* ── HAMBURGER MENU BUTTON (hidden on desktop) ──── */
.hamburger-btn {
    display: none;
}

/* ── MOBILE OVERLAY (hidden on desktop) ─────────── */
.sidebar-overlay {
    display: none;
}

/* ═══════════════════════════════════════════════════
   TABLET — max 1024px
   ═══════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: rgba(255,255,255,0.1);
        border-radius: 8px;
        cursor: pointer;
        color: white;
        font-size: 22px;
        flex-shrink: 0;
    }
    .hamburger-btn:hover {
        background: rgba(255,255,255,0.2);
    }

    /* Topbar must be above sidebar so hamburger is tappable */
    .topbar {
        z-index: 1001 !important;
        position: sticky !important;
        gap: 12px !important;
    }
    .topbar-left {
        flex: 1;
    }

    /* Sidebar — fixed position, hidden by default, slides in as overlay */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh !important;
        min-height: unset !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    /* Allow sidebar nav to shrink so footer stays reachable */
    .sidebar-nav {
        flex-shrink: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    .sidebar-footer {
        flex-shrink: 0 !important;
    }

    /* Overlay behind sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    .sidebar-overlay.show {
        display: block;
    }

    /* Main content — full width */
    .main {
        margin-left: 0 !important;
    }

    /* Two column grids → single column */
    .two-col-grid,
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE — max 768px
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Topbar */
    .topbar {
        padding: 0 16px !important;
        height: 56px !important;
        gap: 8px;
    }
    .topbar h1 {
        font-size: 17px !important;
    }
    .topbar p {
        font-size: 11px !important;
    }
    .topbar-date {
        display: none !important;
    }

    /* Content area */
    .content-area {
        padding: 14px !important;
    }

    /* Stats grid → 2 columns */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .stat-card {
        padding: 14px !important;
        gap: 12px !important;
    }
    .stat-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 20px !important;
        border-radius: 10px !important;
    }
    .stat-value {
        font-size: 24px !important;
    }

    /* Cards */
    .card-header {
        padding: 14px 16px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .card-body {
        padding: 14px 16px !important;
    }
    .card-title {
        font-size: 15px !important;
    }

    /* Two column → single column */
    .two-col-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tables — horizontal scroll */
    .table-wrap,
    .card-body:has(table),
    div:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table {
        min-width: 600px;
    }

    /* Filter bars */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .filter-group {
        width: 100% !important;
    }
    .filter-group select,
    .filter-group input {
        width: 100% !important;
    }

    /* Report tabs */
    .report-tabs {
        width: 100% !important;
    }
    .report-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* Consent report stats */
    .consent-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .consent-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Modals — full width on mobile */
    .modal {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        margin: 16px !important;
    }
    .modal-body {
        padding: 16px !important;
    }

    /* Alert items */
    .alert-item {
        padding: 12px !important;
        gap: 10px !important;
    }
    .alert-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }

    /* Buttons */
    .btn, button {
        min-height: 44px;
    }
    .action-btns {
        gap: 6px !important;
    }

    /* Organization cards/table */
    .org-table {
        display: block;
        overflow-x: auto;
    }

    /* Compliance group bars */
    .group-bars {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════
   SMALL PHONE — max 480px
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    .consent-stats {
        grid-template-columns: 1fr !important;
    }
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    .topbar h1 {
        font-size: 15px !important;
    }
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

/* ═══════════════════════════════════════════════════
   STUDENT SIDEBAR (app pages)
   ═══════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .app-sidebar,
    .student-sidebar,
    nav.sidebar-nav-student {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
    }
    .app-sidebar.open,
    .student-sidebar.open,
    nav.sidebar-nav-student.open {
        transform: translateX(0);
    }
    .app-main,
    .student-main {
        margin-left: 0 !important;
    }
}