/* ========================================================================
   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;
}

/* App shell (replaces MudLayout/MudMainContent). The fixed appbar (.sb-appbar) and
   fixed sidebar (.sb-sidebar, top:64px) overlay this; main is offset to clear both. */
.sb-app-shell {
    min-height: 100vh;
    /* Warm cream base (token, so it follows dark mode too) — white cards now pop on it,
       giving /app the cozy, landing-like feel without losing calm. */
    background: var(--sb-paper-soft);
}

.sb-app-main {
    margin-left: var(--sb-sidebar-width);
    padding-top: var(--sb-appbar-height);
    /* Breathing room at the end of every page — content never kisses the viewport edge,
       and there's always a little over-scroll so the last card sits comfortably. */
    padding-bottom: 64px;
    transition: margin-left 0.2s ease;
}

/* Top bar (replaces MudAppBar) — used by both the app shell (AppNavBar) and the
   public MainLayout. The .appbar-glass/.appbar-glass-dark classes supply the backdrop. */
header.sb-appbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sb-appbar-height, 64px);
    /* Above the composer rail (z-1100) so appbar dropdowns (avatar menu, AI command bar)
       open over it instead of behind it. Still below the mobile composer sheet (z-1400). */
    z-index: 1150;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
}

.sb-appbar-title {
    display: inline-flex;
    align-items: center;
}

.sb-appbar-title .brand-title {
    /* Token, not inherit: the appbar has no own color, so inherit resolved to the
       browser-default black — invisible "Stack" half of the wordmark in dark mode. */
    color: var(--sb-ink);
    text-decoration: none;
}

/* Floating action buttons (replaces MudFab) */
.sb-fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--sb-shadow-md);
    transition: box-shadow .12s ease, filter .12s ease;
}

/* Calm lift — deeper shadow + a touch brighter on hover; no hard offset / translate. */
.sb-fab:hover {
    box-shadow: var(--sb-shadow-lg);
    filter: brightness(1.04);
}
.sb-fab:active {
    box-shadow: var(--sb-shadow-sm);
}

.sb-fab--primary {
    background: var(--sb-accent, #F7C61E);
    color: var(--sb-on-accent, #15171C); /* black icon on the yellow FAB */
}

.sb-fab--secondary {
    background: var(--sb-teal, #2F80ED);
}

/* The composer is an app-wide right rail (420px); the floating dock has a higher
   z-index and would otherwise cover its Save / Add-to-Queue buttons. While a composer
   panel is open, tuck the dock just left of the rail so it stays usable without
   overlapping. Keyed off the rendered panel via :has() because the composer state
   lives in a WASM singleton the layout can't see; !important beats the dock's inline
   right:24px. Desktop only — the mobile composer is a full-screen sheet with its own
   dock positioning. */
@media (min-width: 769px) {
    .sb-app-shell:has(.sb-composer--open) .sb-fab-dock {
        right: 444px !important;
    }
}

.ext-banner-close {
    color: inherit;
    margin-left: auto;
}

/* 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;
}

/* Composer dismiss bar — only shown on mobile (full-screen sheet); hidden on the desktop drawer. */
.sb-composer-mobilebar { display: none; }
.sb-composer-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    color: var(--sb-ink);
    cursor: pointer;
    padding: 4px 0;
}

/* Mobile-only "Save draft" primary action on the compose surface (hidden on the desktop drawer). */
.sb-compose-mobile-save { display: none; }

/* Mobile-only notice: explains that phone-captured notes are drafts that sync from desktop. */
.sb-compose-mobile-note { display: none; }

/* ── 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 .sb-navlink .sb-navlink-text,
    .sb-sidebar .sb-navlink span,
    .sb-sidebar .sb-navgroup-summary .sb-navlink-text {
        display: none;
    }

    .sb-sidebar .sb-navlink {
        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);
    }

    /* The open mobile drawer is a 220px overlay with room for labels — undo the ≤1024
       icon-rail (collapse) treatment so nav items read clearly instead of icon-only. */
    .sb-sidebar.sb-sidebar--mobile-open .sb-navlink .sb-navlink-text,
    .sb-sidebar.sb-sidebar--mobile-open .sb-navlink span,
    .sb-sidebar.sb-sidebar--mobile-open .sb-navgroup-summary .sb-navlink-text,
    .sb-sidebar.sb-sidebar--mobile-open .sb-sidebar-header {
        display: revert;
    }
    .sb-sidebar.sb-sidebar--mobile-open .sb-navlink,
    .sb-sidebar.sb-sidebar--mobile-open .sb-navgroup-summary {
        justify-content: flex-start;
        padding: 8px 14px;
    }

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

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

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

    /* The panel renders even when closed — on mobile that blank/closed sheet must not cover the page. */
    .sb-composer--closed { display: none !important; }

    /* Mobile = capture/draft: the composer overlay only shows on the dedicated Compose surface
       (opt-in via ShowOnMobile). On every other page it would just cover read/manage content,
       and scheduling needs the desktop extension anyway. */
    .sb-composer:not(.sb-composer--mobileok) { display: none !important; }

    /* Dismiss bar inside the full-screen mobile sheet so the user is never trapped. */
    .sb-composer-mobilebar {
        display: flex;
        align-items: center;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 10px 12px;
        background: var(--sb-paper);
        border-bottom: 1px solid var(--sb-hairline);
    }

    /* Capture/draft: scheduling + extension chrome hidden on mobile; Save draft becomes the action. */
    .sb-compose-sched { display: none !important; }
    .sb-compose-mobile-save {
        display: inline-flex !important;
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
    .sb-compose-mobile-note {
        display: flex !important;
        gap: 8px;
        align-items: flex-start;
        margin: 8px 10px 2px;
        padding: 10px 12px;
        background: var(--sb-info-bg);
        border: 1px solid color-mix(in srgb, var(--sb-info) 30%, transparent);
        border-radius: var(--sb-radius-sm);
        color: var(--sb-ink-soft);
        font-size: 0.8rem;
        line-height: 1.4;
    }
    .sb-compose-mobile-note .sb-icon { color: var(--sb-info); flex-shrink: 0; margin-top: 1px; }

    /* Hide FAB dock on very small mobile to reclaim space */
    .sb-fab-dock {
        bottom: 12px !important;
        right: 12px !important;
    }
    /* On mobile keep only the AI-assistant FAB. Feedback + How-to-schedule now live in the
       sidebar (hamburger), so we drop those two here — a 3-FAB stack covered page content
       (e.g. form fields on Settings). One FAB is the standard, unobtrusive mobile pattern. */
    .sb-fab-dock .sb-fab--secondary,
    .sb-fab-dock .sb-fab--primary { display: none; }
}

/* ── 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;
    }
}

/* ── Appbar: hide non-essential widgets on mobile so the bar doesn't overflow ──
   (AiCommandBar + UsageIndicator). Hamburger · logo · bell · avatar stay. */
.sb-appbar-desktop-only {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 768px) {
    .sb-appbar-desktop-only {
        display: none !important;
    }
}

/* ── Mobile bottom tab bar (thumb-reachable primary nav) ───────── */
.sb-bottomnav { display: none; }
@media (max-width: 768px) {
    .sb-bottomnav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250;
        background: var(--sb-paper);
        border-top: 1.5px solid var(--sb-line);
        box-shadow: 0 -2px 10px rgba(24, 18, 37, 0.08);
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    }
    .sb-bottomnav-item {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 2px; text-decoration: none;
        color: var(--sb-ink-mute); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.01em;
    }
    .sb-bottomnav-item.active { color: var(--sb-accent); }
    .sb-bottomnav-item:active { transform: translateY(1px); }
    /* The compose button is an action (opens the editor drawer in place), not a nav link —
       reset the <button> chrome and tint it accent so it reads as the primary action. */
    button.sb-bottomnav-item { background: none; border: none; cursor: pointer; font-family: inherit; }
    .sb-bottomnav-item--compose { color: var(--sb-accent); }
    /* clear the bar so page content isn't hidden behind it */
    .sb-app-main { padding-bottom: 76px; }
    /* float the FAB dock above the tab bar */
    .sb-fab-dock { bottom: 84px !important; }
}