/* m27.ui-updates.1: Sidebar + top-bar app-shell layout.
 *
 * Global navigation shell: a fixed, full-height collapsible left sidebar plus
 * a slim sticky top bar. Replaces the retired top-right dropdown (nav.html).
 * Colors follow DESIGN_SYSTEM.md: brand-obsidian bg (#000), brand-smoke/10
 * borders, brand-lime (#CCFF00) active accent, Chakra Petch wordmark.
 */

:root { --sidebar-w: 16rem; }
[data-sidebar="collapsed"] { --sidebar-w: 4rem; }

/* ==========================================================================
 * Sidebar shell
 * ========================================================================== */

.app-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    background-color: #000000;                       /* brand-obsidian */
    border-inline-end: 1px solid rgba(162, 162, 162, 0.10); /* brand-smoke/10 */
    /* Below lg the sidebar is an off-canvas drawer (slid off-screen). */
    transform: translateX(-100%);
    transition: transform .2s ease, width .2s ease;
}

/* Header: logo mark (always) + wordmark (hidden when collapsed). */
.app-sidebar .sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 4rem;
    padding-inline: 0.75rem;
    flex-shrink: 0;
    border-block-end: 1px solid rgba(162, 162, 162, 0.10);
    overflow: hidden;
}

.app-sidebar .wordmark {
    font-family: "Chakra Petch", sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.025em;
    color: #ffffff;
    white-space: nowrap;
    transition: color .15s ease;
}
.app-sidebar .sidebar-header:hover .wordmark { color: #CCFF00; }

/* Nav list (scrolls independently of the pinned header/foot). */
.app-sidebar .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* ==========================================================================
 * Nav links
 * ========================================================================== */

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.25rem;
    color: #A2A2A2;                                  /* brand-smoke */
    font-size: 0.875rem;
    white-space: nowrap;
    border-inline-start: 2px solid transparent;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.nav-link:hover {
    color: #EAEAEA;                                  /* brand-silver */
    background-color: rgba(162, 162, 162, 0.10);
}

.nav-link .nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
.nav-link .nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* External-link sub-icon (API Docs). */
.nav-link .nav-sub-icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    opacity: 0.5;
}

/* Active item: lime left-accent border + subtle lime tint + lime text/icon. */
.nav-link.is-active {
    color: #CCFF00;
    background-color: rgba(204, 255, 0, 0.08);
    border-inline-start-color: #CCFF00;
}
.nav-link.is-active .nav-icon,
.nav-link.is-active .nav-label,
.nav-link.is-active .nav-sub-icon { color: #CCFF00; opacity: 1; }

/* ==========================================================================
 * Collapsed icon-rail
 * ========================================================================== */

[data-sidebar="collapsed"] .app-sidebar .nav-label,
[data-sidebar="collapsed"] .app-sidebar .nav-sub-icon,
[data-sidebar="collapsed"] .app-sidebar .wordmark { display: none; }

[data-sidebar="collapsed"] .app-sidebar .nav-link {
    justify-content: center;
    gap: 0;
    padding-inline: 0.5rem;
}
[data-sidebar="collapsed"] .app-sidebar .sidebar-header {
    justify-content: center;
    padding-inline: 0.5rem;
}

/* ==========================================================================
 * Collapse toggle (foot)
 * ========================================================================== */

.app-sidebar .sidebar-foot {
    flex-shrink: 0;
    padding: 0.5rem;
    border-block-start: 1px solid rgba(162, 162, 162, 0.10);
}
#sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.25rem;
    color: #A2A2A2;
    transition: color .15s ease, background-color .15s ease;
}
#sidebar-collapse-btn:hover {
    color: #EAEAEA;
    background-color: rgba(162, 162, 162, 0.10);
}
/* Chevron points left when expanded; flips to point right when collapsed. */
[data-sidebar="collapsed"] #sidebar-collapse-btn .nav-icon { transform: rotate(180deg); }

/* The collapse toggle is desktop-only (the drawer closes via backdrop/link). */
@media (max-width: 1023px) {
    .app-sidebar .sidebar-foot { display: none; }
}

/* ==========================================================================
 * Content area
 * ========================================================================== */

.app-content {
    margin-inline-start: 0;
    transition: margin-inline-start .2s ease;
}

@media (min-width: 1024px) {
    /* Sidebar is always visible on desktop; content is shifted by its width. */
    .app-sidebar { transform: translateX(0); }
    .app-content { margin-inline-start: var(--sidebar-w); }
}

/* ==========================================================================
 * Top bar
 * ========================================================================== */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 4rem;
    padding-inline: 1rem;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid rgba(162, 162, 162, 0.10);
}

/* Keep the user chip pinned to the right even when the mobile hamburger is
   hidden on desktop (a lone flex child would otherwise collapse to the left). */
.app-topbar #user-menu-container { margin-inline-start: auto; }

#mobile-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: #A2A2A2;
    border-radius: 0.25rem;
    transition: color .15s ease;
}
#mobile-nav-btn:hover { color: #CCFF00; }
@media (min-width: 1024px) {
    /* No hamburger on desktop (sidebar is persistent). */
    #mobile-nav-btn { display: none; }
}

/* ==========================================================================
 * Mobile off-canvas drawer + backdrop
 * ========================================================================== */

.app-sidebar.is-open { transform: translateX(0); }

.app-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: rgba(0, 0, 0, 0.60);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.app-sidebar-backdrop.is-open { opacity: 1; visibility: visible; }

@media (min-width: 1024px) {
    /* Drawer semantics disabled on desktop. */
    .app-sidebar-backdrop { display: none; }
}