/* ===================================================
   PrepForge — Responsive CSS
   Mobile/tablet breakpoints
   =================================================== */

/* ─── Mobile sidebar collapse ────────────────────────── */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
    }

    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: 260px;
        min-width: 260px;
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
        z-index: 1000;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-backdrop {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        animation: fadeIn 0.2s ease;
    }
    .hamburger-btn { display: flex !important; }
    .page-content { padding: 1rem; }
    .page-content::after { left: 0; opacity: 0; }
    .cards-grid { grid-template-columns: 1fr; }
    .modal { max-width: 100% !important; max-height: 95vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; align-self: flex-end; }
    .modal-overlay { align-items: flex-end; padding: 0; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }
    .quick-capture-fab { bottom: 1rem; right: 1rem; }
    .split-pane { flex-direction: column !important; }
    .split-pane > * { width: 100% !important; height: 300px; }
}

@media (max-width: 480px) {
    .topbar-title { font-size: 1.2rem; }
    .tab-bar { overflow-x: auto; }
    .tab-btn { white-space: nowrap; }
    .stat-cards-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

/* Hidden by default, shown on mobile */
.hamburger-btn { display: none; }
.sidebar-backdrop { display: none; }