/* ============================================================================
   Layout — app shell, sidebar, page header
   ========================================================================== */

.app-sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-item-active-text);
    height: 100vh;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
}
.app-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    /* Without min-width:0 a flex item is sized by its widest unbreakable content — one long clone
       URL in a table was enough to push the whole page sideways past the viewport. */
    min-width: 0;
    padding: var(--space-14) var(--space-16) var(--statusbar-height);
    min-height: 100vh;
    max-width: var(--content-max);
}

.sidebar-brand {
    padding: var(--space-10) var(--space-9);
    border-bottom: var(--border-width) solid var(--sidebar-border);
    flex-shrink: 0;
}
.sidebar-brand h1 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tighter);
    color: var(--sidebar-brand-text);
}
.sidebar-brand small {
    display: block;
    font-size: var(--text-xs);
    color: var(--sidebar-brand-sub);
    margin-top: var(--space-1);
    font-weight: var(--weight-normal);
}
/* The nav is the only part of the sidebar allowed to scroll: on a short viewport the menu
   would otherwise run past the bottom edge and the last items become unreachable. min-height:0
   is what lets a flex child shrink below its content height and actually overflow. */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-6) var(--space-5);
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-scroll-thumb) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: var(--space-3); }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--sidebar-scroll-thumb);
    border-radius: var(--radius-xs);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--sidebar-scroll-thumb-hover); }
.sidebar-nav-group {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--sidebar-group);
    padding: var(--space-7) var(--space-6) var(--space-3);
}
.sidebar-nav-group:first-child { padding-top: var(--space-2); }
.sidebar-nav a, .sidebar-footer a {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--sidebar-item);
    transition: background var(--transition), color var(--transition);
    margin-bottom: var(--space-1);
}
.sidebar-nav a:hover, .sidebar-footer a:hover {
    background: var(--sidebar-item-hover-bg);
    color: var(--sidebar-item-hover-text);
}
.sidebar-nav a.active, .sidebar-footer a.active {
    background: var(--sidebar-item-active-bg);
    color: var(--sidebar-item-active-text);
}
.sidebar-nav a i, .sidebar-footer a i {
    width: var(--space-9);
    text-align: center;
    font-size: var(--text-lg);
}
/* A footer child that is not a link. Every rule above names `a`, because this footer held nothing
   else until a product put a signed-in identity line in one. The padding matches a link's so the
   text lines up with the labels above it instead of sitting flush against the edge. */
.sidebar-footer p {
    margin: 0;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-sm);
    color: var(--sidebar-brand-sub);
}
.sidebar-footer {
    padding: var(--space-5) var(--space-5) var(--space-8);
    border-top: var(--border-width) solid var(--sidebar-border);
    flex-shrink: 0;
}
/* The alerts entry carries a count badge pinned to its right edge. */
.sidebar-nav-item-badged { position: relative; }
.sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-9);
    height: var(--space-9);
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: var(--text-inverse);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    margin-left: auto;
}
.sidebar-badge:empty { display: none; }

/* Theme switcher — five segmented buttons in the sidebar footer. */
.theme-switch {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    margin: var(--space-1) 0 var(--space-4);
    background: var(--sidebar-item-hover-bg);
    border-radius: var(--radius-md);
}
.theme-switch-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sidebar-item);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.theme-switch-btn:hover { color: var(--sidebar-item-hover-text); }
.theme-switch-btn[aria-pressed="true"] {
    background: var(--sidebar-item-active-bg);
    color: var(--sidebar-item-active-text);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}
/* Header actions keep their intrinsic width — a long description must not squeeze them into wraps. */
.page-header .btn { flex-shrink: 0; white-space: nowrap; }
.page-header h1 {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--text);
}
.page-header p {
    font-size: var(--text-base);
    color: var(--text-body);
    margin-top: var(--space-1);
}