/* ===== Responsive app shell =====
   Turns the fixed 240px sidebar into an off-canvas drawer on narrow screens.
   All rules are scoped to `.has-shell` (added by shell.js only when a
   `.nav-sidebar` exists), so this file is inert on pages without the shell. */

.mobile-topbar { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 768px) {
    body.has-shell { padding-top: 52px; }

    .has-shell .mobile-topbar {
        position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 90;
        display: flex; align-items: center; gap: 14px; padding: 0 14px;
        background: rgba(12, 12, 20, 0.98);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .mobile-ham {
        display: flex; flex-direction: column; gap: 4px;
        background: none; border: none; padding: 8px; margin: -8px; cursor: pointer;
    }
    .mobile-ham span {
        display: block; width: 20px; height: 2px;
        background: #c77dff; border-radius: 2px;
    }
    .mobile-brand {
        font-size: 15px; font-weight: 800;
        background: linear-gradient(135deg, #c77dff, #e0c068);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .has-shell .nav-sidebar {
        position: fixed; top: 0; left: 0; height: 100%;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 100;
    }
    .has-shell .nav-sidebar.open {
        transform: translateX(0);
        box-shadow: 12px 0 48px rgba(0, 0, 0, 0.6);
    }

    .nav-backdrop {
        position: fixed; inset: 0; z-index: 95; display: none;
        background: rgba(0, 0, 0, 0.55);
    }
    .nav-backdrop.show { display: block; }

    /* Let the dashboard header reflow instead of truncating */
    .has-shell .dash-header { flex-wrap: wrap; gap: 12px; }
    .has-shell .dash-header-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .has-shell .nav-sidebar, .nav-backdrop { transition: none; }
}