/* public/css/sidebar-nav.css
 * Left sidebar app shell — replaces the old fixed top .navbar sitewide.
 * Loaded last (after arena.css) so it wins the cascade on the handful of
 * shared selectors (.user-menu/.user-btn/etc.)
 * it reuses rather than reinventing.
 */

.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.app-sidebar {
    flex: 0 0 240px;
    width: 240px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    z-index: 200;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-subtle);
    flex: 0 0 auto;
}
.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
}
.sidebar-brand-logo { height: 28px; width: auto; }
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar-brand-name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.sidebar-brand-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar-nav {
    flex: 1 1 auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sidebar-group-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 10px 6px;
}

.sidebar-group { display: flex; flex-direction: column; gap: 2px; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.sidebar-link i { width: 16px; text-align: center; color: var(--text-muted); flex-shrink: 0; transition: color 0.15s; }
.sidebar-link:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.sidebar-link:hover i { color: var(--text-primary); }
.sidebar-link.active {
    background: var(--arena-cyan-soft, rgba(0,217,255,0.14));
    color: var(--arena-cyan-text, var(--arena-cyan));
}
.sidebar-link.active i { color: var(--arena-cyan-text, var(--arena-cyan)); }
.sidebar-link-create {
    background: var(--arena-grad, linear-gradient(135deg, #00D9FF, #3b82f6));
    color: #04212b;
    font-weight: 800;
}
.sidebar-link-create i { color: #04212b; }
.sidebar-link-create:hover { filter: brightness(1.08); background: var(--arena-grad); color: #04212b; }

.sidebar-bottom {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

/* The button this belongs to sits near the bottom of a sticky, scrollable
   240px column — a dropdown opening downward (the old top-navbar's
   top:100%) would render straight into the scroll clipping boundary, or
   off the bottom of the viewport. Float it upward instead, positioned
   against the viewport so it can never be clipped by .app-sidebar's own
   overflow:auto. */
.sidebar-bottom .user-dropdown {
    position: fixed;
    top: auto;
    bottom: 76px;
    left: 12px;
    right: auto;
    width: 216px;
    transform-origin: bottom center;
    transform: translateY(16px) scaleY(0.92);
}
.sidebar-bottom .user-dropdown.active { transform: translateY(0) scaleY(1); }

/* Mobile-only close button inside the drawer */
.sidebar-close { display: none; }

/* ── Content column ──────────────────────────────────────────────────── */
.app-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Mobile-only bar (hamburger + brand). On desktop every child is hidden, so
   the bar itself is hidden too instead of leaving an empty bordered strip. */
.app-topbar {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 150;
}

.app-topbar-brand { display: none; align-items: center; gap: 8px; margin-right: auto; text-decoration: none; }
.app-topbar-brand img { height: 22px; }
.app-topbar-brand span { font-family: var(--font-display); font-weight: 900; color: var(--text-primary); font-size: 1rem; }

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    margin-right: auto;
}
.sidebar-toggle span { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.sidebar-toggle span::before, .sidebar-toggle span::after {
    content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
}
.sidebar-toggle span::before { top: -5px; }
.sidebar-toggle span::after { top: 5px; }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 190;
}
.sidebar-backdrop.active { display: block; }

.app-main { flex: 1 1 auto; }

/* Non-scrolling pages (the home dashboard): the page itself never scrolls —
   .app-content gets a hard viewport-height ceiling instead of its usual
   min-height floor, so .app-main's flex-shrink can actually do its job.
   Anything that doesn't fit scrolls internally (e.g. a long server list),
   not the page. */
.app-content:has(.home-noscroll) {
    height: 100vh;
    overflow: hidden;
}
/* The sitewide footer's links already live in the sidebar nav — on this
   one page it would only compete with real content for the same fixed
   vertical space, so it's dropped here. */
.app-content:has(.home-noscroll) .footer { display: none; }
.app-main:has(> .home-noscroll) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
/* The "everything fits in one screen, nothing scrolls" trick only works
   because a desktop viewport is wide enough to lay the hero stats and the
   two content cards out side by side. On a phone-width screen the same
   content has to stack into a single column, needs far more vertical
   room than any phone viewport has, and there's no drawer/tab to hide
   the overflow into — so below the sidebar's own mobile breakpoint this
   page reverts to a normal, scrollable one like every other page instead
   of silently clipping Server Status off the bottom of the screen. */
@media (max-width: 900px) {
    .app-content:has(.home-noscroll) {
        height: auto;
        overflow: visible;
    }
    .app-content:has(.home-noscroll) .footer { display: block; }
    .app-main:has(> .home-noscroll) {
        display: block;
        overflow: visible;
    }
}

/* ── Mobile: sidebar becomes an off-canvas drawer ───────────────────── */
@media (max-width: 900px) {
    .app-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        height: 100vh;
        height: 100dvh; /* mobile Safari: 100vh includes the hidden URL bar */
        width: 240px;
        transition: left 0.22s ease;
        box-shadow: 0 0 40px rgba(0,0,0,0.5);
    }
    .app-sidebar.open { left: 0; }
    .app-topbar { display: flex; }
    .sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        margin-left: auto;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
    }
    .sidebar-toggle { display: flex; }
    .app-topbar-brand { display: flex; }

    /* The old top-navbar hid these labels/toggles below 768px because a
       single horizontal row ran out of room. The sidebar drawer is a full
       240px-wide vertical column with room to spare, so restore them here. */
    .sidebar-bottom .user-btn span,
    .sidebar-bottom .user-btn i.fa-chevron-down { display: inline-block; }
    .sidebar-bottom .user-btn { padding: 6px 10px 6px 6px; background: var(--bg-tertiary); border-color: var(--border-color); }
    .sidebar-bottom .user-btn img { width: 28px; height: 28px; }
    .sidebar-bottom .nav-steam-btn-label { display: inline; }
    .sidebar-bottom .nav-steam-btn { width: auto; padding: 10px 16px; gap: 8px; }
}

/* Create Room is always gradient-filled, so give its active state a ring
   instead — otherwise "you are here" was indistinguishable from idle. */
.sidebar-link-create.active { box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--arena-cyan); color: #04212b; }
.sidebar-link-create.active i { color: #04212b; }