/* ============================================================
   topbar.css — sitewide top bar
   Loaded alongside topbar.php. Variables come from homeV0.01.css
   (--panel, --panel-light, --border, --text, --text-dim, --accent,
   --accent-soft, --success). Kept in its own file so the strict
   CSP can serve it as 'self' without inline rules.
============================================================ */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: linear-gradient(180deg, var(--panel), var(--panel-alt));
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

/* brand: site name link — sits just after the auth button on the left */
.topbar-brand {
    margin-left: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
}

.topbar-brand:hover,
.topbar-brand:focus {
    color: var(--accent-soft);
    outline: none;
}

.topbar-logo {
    display: block;
    height: 32px;
    width: auto;
}

.topbar-name {
    letter-spacing: 0.2px;
}

/* auth cluster — sits at the far left, where the logo used to be */
.topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* logo: split out of the brand link and pushed to the far right */
.topbar-logo-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* the login / logout toggle */
.topbar-auth {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    background: var(--panel-light);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.12s ease;
}

.topbar-auth:hover,
.topbar-auth:focus {
    background: var(--panel-hover);
    border-color: var(--accent);
    color: var(--text-strong);
    outline: none;
    transform: translateY(-1px);
}

.topbar-auth-label {
    line-height: 1;
}

/* the status dot */
.topbar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.topbar-dot-red {
    background: var(--danger);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.topbar-dot-green {
    background: var(--success);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

/* ------------------------------------------------------------
   Push site content below the fixed bar.
   Scoped to body.has-topbar so pages that do not include the
   partial are unaffected. We also shorten the sidebar's
   100vh min-height so it does not overflow.
------------------------------------------------------------ */
body.has-topbar {
    padding-top: 56px;
}

body.has-topbar .sidebar {
    min-height: calc(100vh - 56px);
}

/* small screens — keep the bar usable. The brand name stays visible on
   mobile (only the auth label collapses) so branding is consistent across
   every page that includes the topbar. */
@media (max-width: 480px) {
    .topbar {
        padding: 0 12px;
    }
    /* Collapse the label visually but keep it in the accessibility tree.
       display:none here left #stashNavToggle (a <button> whose only text is
       this span, the dot being aria-hidden) with no accessible name at all,
       failing button-name site-wide on mobile and taking the whole
       Agentic-Browsing score down with it. Same properties as .sr-only in
       theme.css, inlined because a media query cannot swap a class.
       Layout is unchanged: position:absolute takes it out of flow exactly
       as display:none did. */
    .topbar-auth-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .topbar-auth {
        padding: 9px 13px;
    }
}

input[type="range"] {
    accent-color: var(--accent);
}

/* ============================================================
   Off-canvas cloud menu (site-wide, logged-in only)

   Emitted by topbar.php and opened by the topbar "desktop" button
   (#stashNavToggle) via /topbar.js, which flips body.stash-nav-open.
   Self-contained — it does NOT depend on cloud.css — and everything
   is scoped under #stashSidebar so it can never collide with other
   .sidebar components (e.g. the home page's app catalogue).
============================================================ */

/* the topbar toggle is a <button> when logged in — match the .topbar-auth pill:
   inherit the font family (buttons don't by default) but keep the pill's own
   size/weight, and use a pointer cursor. */
button.topbar-auth {
    font-family: inherit;
    cursor: pointer;
}

/* sliding drawer container */
#stashSidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 240px;
    height: calc(100vh - 56px);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 1200;
    box-shadow: 2px 0 18px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
}
body.stash-nav-open #stashSidebar {
    transform: translateX(0);
}

/* nav surface inside the drawer (the included sidebar.php partial) */
#stashSidebar .sidebar {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
    color: var(--text);
    border-right: 1px solid var(--border);
}
#stashSidebar .sidebar h2 {
    margin: 0 0 20px 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--accent-soft);
}
#stashSidebar .sidebar a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.12s ease;
}
#stashSidebar .sidebar a:hover,
#stashSidebar .sidebar a:focus {
    background: var(--panel-hover);
    border-color: var(--accent);
    color: var(--text-strong);
    outline: none;
    transform: translateX(2px);
}
#stashSidebar .sidebar a.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent);
    border-color: var(--overlay-2);
    box-shadow: 0 0 0 1px var(--overlay-1),
                0 6px 18px rgba(37, 99, 235, 0.25);
}
#stashSidebar .sidebar-spacer {
    flex: 1;
}

/* dim backdrop behind the drawer */
.stash-nav-backdrop {
    position: fixed;
    inset: 56px 0 0 0;
    background: var(--scrim);
    z-index: 1100;
    border: none;
}
.stash-nav-backdrop[hidden] {
    display: none;
}