/* =========================================================================
   Mobile App-Style Navigation
   -------------------------------------------------------------------------
   Everything in this file is scoped to small screens (max-width: 768px)
   or is invisible by default (.mobile-menu-btn / .mobile-nav-overlay).
   Desktop / tablet layout above 768px is completely untouched.
   ========================================================================= */

.mobile-menu-btn { display: none; }

.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mobile-nav-overlay.active { display: block; opacity: 1; }

@media (max-width: 768px) {

    /* Hamburger button shown inside the topbar */
    .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        margin-right: 8px;
        background: transparent;
        border: none;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        color: var(--text-heading, #111827);
        border-radius: 8px;
    }
    .mobile-menu-btn:active { background: rgba(0,0,0,0.08); }

    /* ---- Sidebar becomes a full off-canvas drawer (not a squeezed icon rail) ---- */
    .sidebar {
        width: 280px !important;
        max-width: 82vw !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s ease !important;
        z-index: 1000 !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    }
    .sidebar.mobile-open { transform: translateX(0) !important; }

    /* Restore full text/labels inside the drawer (previous rules hid these
       for the old icon-only rail — now the whole sidebar slides off-canvas
       instead, so the labels should always be visible when it's open) */
    .sidebar-logo span, .sidebar-logo small { display: block !important; }
    .nav-label { display: block !important; }
    .nav-item span { display: inline !important; }
    .menu-search { display: block !important; }

    /* Content now takes the full width — the drawer floats above it */
    .main { margin-left: 0 !important; }
    .profile-overlay { left: 0 !important; width: 100% !important; }

    body.mobile-nav-locked { overflow: hidden; }

    /* ---- Topbar: fit hamburger + title comfortably ---- */
    .topbar { padding: 12px 14px !important; flex-wrap: wrap !important; gap: 8px !important; }
    .topbar-title { font-size: 16px !important; display: flex !important; align-items: center; }
    .topbar-right { gap: 8px !important; }
    #currentTime { display: none !important; }

    .content { padding: 14px !important; }

    /* ---- App-like compact layouts ---- */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .grid-2, .grid-3, .form-row { grid-template-columns: 1fr !important; }

    /* Let wide tables scroll horizontally inside their card instead of
       breaking the page layout */
    .card-body { overflow-x: auto; }

    .modal { width: 94% !important; max-width: 420px !important; }
}

@media (max-width: 420px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .stat-card .value { font-size: 22px !important; }
}