/* ========================================================================
   StackBuddy Layout System — CSS Variables & Responsive Utilities
   ======================================================================== */

:root {
    --sb-sidebar-width: 220px;
    --sb-sidebar-collapsed: 56px;
    --sb-drawer-width: 420px;
    --sb-drawer-rail: 48px;
    --sb-appbar-height: 64px;
}

/* Offset class for pages that include the NoteEditorDrawer.
   Replaces all hardcoded `margin-right:440px` inline styles. */
.sb-drawer-offset {
    margin-right: calc(var(--sb-drawer-width) + 40px);
    padding-right: 16px;
    transition: margin-right 0.2s ease;
}

/* ── Tablet: auto-collapse sidebar to icon rail ────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --sb-sidebar-width: var(--sb-sidebar-collapsed);
    }

    .sb-sidebar {
        width: var(--sb-sidebar-collapsed) !important;
    }

    .sb-sidebar .sb-sidebar-header {
        display: none;
    }

    .sb-sidebar .mud-nav-link span,
    .sb-sidebar .mud-nav-group .mud-nav-group-text {
        display: none;
    }

    .sb-sidebar .mud-nav-link {
        justify-content: center;
        padding: 8px 0;
    }

    /* Narrow the drawer on tablets to give pages more room */
    .sb-drawer-offset {
        margin-right: calc(var(--sb-drawer-width) + 24px);
        padding-right: 8px;
    }
}

/* ── Mobile: hide sidebar, full-width content ──────────────────────────── */
@media (max-width: 768px) {
    :root {
        --sb-sidebar-width: 0px;
        --sb-drawer-width: 0px;
    }

    .sb-sidebar {
        transform: translateX(-100%);
        width: 220px !important;        /* Full width when shown as overlay */
        z-index: 1300 !important;        /* Above everything */
    }

    .sb-sidebar.sb-sidebar--mobile-open {
        transform: translateX(0);
    }

    .sb-sidebar-backdrop {
        display: block !important;
    }

    .sb-drawer-offset {
        margin-right: 0;
    }

    /* NoteEditorDrawer: full-width overlay on mobile */
    .sb-composer.mud-drawer--right {
        width: 100% !important;
        max-width: 100vw !important;
        position: fixed !important;
        z-index: 1400 !important;
        top: var(--sb-appbar-height) !important;
        bottom: 0 !important;
    }

    /* Hide FAB dock on very small mobile to reclaim space */
    .sb-fab-dock {
        bottom: 12px !important;
        right: 12px !important;
    }
}

/* ── Sidebar mobile backdrop ───────────────────────────────────────────── */
.sb-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1299;
}

/* ── AppNavBar hamburger — only visible on mobile ──────────────────────── */
.sb-hamburger {
    display: none !important;
}

@media (max-width: 768px) {
    .sb-hamburger {
        display: flex !important;
    }
}