/* ux-compound-sidebar-nav — the compound's OWN visual layer.
 *
 * COMPOSITION-CATALOG-001: ONE visual source for the sidebar-nav identity.
 * Design tokens are CSS custom properties scoped to the root BEM block
 * (`.rr-sidebar-nav`); consumers override TOKENS, never rules. Defaults
 * match the JS runtimes' visual identity
 * (react/elements/src/sidebar-nav-react/SidebarNav.tsx STYLES const + the
 * SolidJS twin) — dark sidebar surface, brand header row, uppercase section
 * labels, icon+label+badge items, hover/active states, rail mode.
 *
 * Consumer-settable tokens (surface-level integration):
 *   --rr-sidebar-nav-surface        sidebar background          (#0f172a)
 *   --rr-sidebar-nav-ink            sidebar foreground          (#e2e8f0)
 *   --rr-sidebar-nav-border         chrome border color         (#1e293b)
 *   --rr-sidebar-nav-item-hover     item hover background       (#1e293b)
 *   --rr-sidebar-nav-item-active    active item background      (#1e40af)
 *   --rr-sidebar-nav-item-active-ink  active item foreground    (#ffffff)
 *   --rr-sidebar-nav-muted          section labels / muted ink  (#64748b)
 *   --rr-sidebar-nav-accent         badge background            (#ef4444)
 *   --rr-sidebar-nav-accent-info    info badge background       (#3b82f6)
 *   --rr-sidebar-nav-toggle-border  toggle border               (#334155)
 *   --rr-sidebar-nav-divider-width  edge divider width          (0 — no divider
 *                                   until the consumer opts in; see the
 *                                   edge-placement block below)
 *   --rr-sidebar-nav-radius         sidebar corner radius       (0.75rem)
 *   --rr-sidebar-nav-item-radius    item corner radius          (0.375rem)
 *   --rr-sidebar-nav-font           font stack                  (Inter, system-ui, sans-serif)
 *   --rr-sidebar-nav-transition     item transition             (background 120ms)
 *   --rr-sidebar-nav-item-font-size item font size              (0.8rem)
 *   --rr-sidebar-nav-item-gap       item icon/label gap         (0.5rem)
 *   --rr-sidebar-nav-icon-width     item icon column width      (1.25rem)
 *   --rr-sidebar-nav-item-font-size item font size              (0.8rem)
 *   --rr-sidebar-nav-item-gap       item icon/label gap         (0.5rem)
 *   --rr-sidebar-nav-icon-width     item icon column width      (1.25rem)
 */

.rr-sidebar-nav {
    /* ── Design tokens (the JS visual identity) ─────────────────────── */
    --rr-sidebar-nav-surface: #0f172a;
    --rr-sidebar-nav-ink: #e2e8f0;
    --rr-sidebar-nav-border: #1e293b;
    --rr-sidebar-nav-item-hover: #1e293b;
    --rr-sidebar-nav-item-active: #1e40af;
    --rr-sidebar-nav-item-active-ink: #ffffff;
    --rr-sidebar-nav-muted: #64748b;
    --rr-sidebar-nav-accent: #ef4444;
    --rr-sidebar-nav-accent-info: #3b82f6;
    --rr-sidebar-nav-toggle-border: #334155;
    --rr-sidebar-nav-divider-width: 0px;
    --rr-sidebar-nav-radius: 0.75rem;
    --rr-sidebar-nav-item-radius: 0.375rem;
    --rr-sidebar-nav-font: Inter, system-ui, sans-serif;
    --rr-sidebar-nav-transition: background 120ms;
    --rr-sidebar-nav-item-font-size: 0.8rem;
    --rr-sidebar-nav-item-gap: 0.5rem;
    --rr-sidebar-nav-icon-width: 1.25rem;

    /* ── Root chrome ────────────────────────────────────────────────── */
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* JS reference identity (.sidebar): never shrink in the flex row */
    background: var(--rr-sidebar-nav-surface);
    color: var(--rr-sidebar-nav-ink);
    border-radius: var(--rr-sidebar-nav-radius);
    font-family: var(--rr-sidebar-nav-font);
    /* The root never scrolls (JS `.sidebar` overflow:hidden): the sections
       region (flex:1 + min-height:0 + overflow-y:auto) is the single scroll
       context — a double scroll context (root AND sections) was recon delta
       D8 (round-2 findings). */
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* Deterministic box model regardless of the host page's global reset — the
   shadow-DOM JS runtimes compute border-box from their own STYLES; the
   light-DOM compound must not inherit a host accident (round-2 recon delta
   D9: identical min-height/padding rules measured 57px vs 73px header rows
   under content-box vs border-box). */
.rr-sidebar-nav,
.rr-sidebar-nav *,
.rr-sidebar-nav *::before,
.rr-sidebar-nav *::after {
    box-sizing: border-box;
}

/* ── Placement policy (SIDEBAR-NAV-LEFTBAR-001) ────────────────────────
 * Config-driven positioning/scroll chrome (the `placement` subconfig):
 * the leftbar's fixed-viewport behavior is COMPOUND-OWNED, selected per
 * display type, instead of bespoke consumer CSS. `--fixed` pins the bar to
 * the viewport edge; `--dvh` spans the dynamic viewport (100dvh with a 100vh
 * fallback line below); `--scroll-contain` stops scroll chaining at the
 * menu's own end; `--safe-area` pads the home-indicator inset. */
.rr-sidebar-nav--fixed {
    position: fixed;
    top: 0;
    left: 0;
    /* No z-index here BY DESIGN: stacking belongs to the consumer's chrome
       layer (the shell wrapper owns z-100; its handheld expanded overlay wants
       z-200). A compound-set z-index would clobber the consumer's stacking at
       equal specificity (the compound stylesheet loads later). */
}

.rr-sidebar-nav--sticky {
    position: sticky;
    top: 0;
}

.rr-sidebar-nav--static {
    position: static;
}

.rr-sidebar-nav--dvh {
    height: 100vh;   /* legacy fallback (engines without dvh) */
    height: 100dvh;  /* dynamic viewport — tracks the browser toolbar state */
}

.rr-sidebar-nav--vh {
    height: 100vh;
}

.rr-sidebar-nav--scroll-contain .rr-sidebar-nav__sections,
.rr-sidebar-nav--scroll-contain .rr-sidebar-nav__content {
    overscroll-behavior: contain;
}

.rr-sidebar-nav--safe-area {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Edge placement — `rr-sidebar-nav--right` (plan
 * `viz-sidebar-nav-side-placement-and-design-rail-parity`) ──────────────
 * The class is emitted by `SidebarNavPlacement::css_classes_resolved()`
 * for a Right-resolved instance; this is its compound-owned rule set
 * (previously the class was EMITTED with NO rule — consumers hand-rolled
 * the edge chrome, e.g. the shell's `.sidebar.config-sidebar`).
 *
 * Edge chrome policy (closed set):
 *   - A rail's DIVIDER sits on the edge FACING the content: a left-edge
 *     rail borders right, a right-edge rail borders left. Divider width is
 *     the `--rr-sidebar-nav-divider-width` token (0 default — the shell
 *     leftbar and divider-less consumers are unchanged; consumers opt in
 *     with the token instead of duplicating border rules).
 *   - A FIXED right rail pins to the RIGHT viewport edge (`--fixed` alone
 *     pins left: 0 — wrong for a right-resolved instance).
 *   - The toggle glyph direction is COMPONENT-owned (collapse points AWAY
 *     from the panel's edge — see component.rs's glyph match); no CSS here.
 *   - `--scroll-contain` interplay is edge-agnostic (it targets the
 *     sections/content scrollers) — unchanged.
 *   - NO z-index (stacking stays consumer-owned — the shell keeps its
 *     z-100/z-200 overlay states; the leftbar plan's standing precedent). */
.rr-sidebar-nav {
    border-right: var(--rr-sidebar-nav-divider-width) solid var(--rr-sidebar-nav-border);
}

.rr-sidebar-nav--right {
    border-right: 0;
    border-left: var(--rr-sidebar-nav-divider-width) solid var(--rr-sidebar-nav-border);
}

.rr-sidebar-nav--fixed.rr-sidebar-nav--right {
    left: auto;
    right: 0;
}

/* ── Brand header row (JS `.sidebar-header`) ──────────────────────────── */
.rr-sidebar-nav__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid var(--rr-sidebar-nav-border);
    min-height: 3rem;
    flex-shrink: 0;
}

.rr-sidebar-nav__brand {
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
}

/* Header without a brand (brand-less consumers): center the toggle —
   the JS collapsed-header look, without inventing a brand. */
.rr-sidebar-nav__header:not(:has(.rr-sidebar-nav__brand)) {
    justify-content: flex-end;
}

/* ── Toggle (JS `.toggle-btn`) ────────────────────────────────────────── */
.rr-sidebar-nav__toggle {
    background: transparent;
    border: 1px solid var(--rr-sidebar-nav-toggle-border);
    color: var(--rr-sidebar-nav-muted);
    border-radius: 0.375rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    flex-shrink: 0;
    transition: var(--rr-sidebar-nav-transition);
}

.rr-sidebar-nav__toggle:hover {
    background: var(--rr-sidebar-nav-item-hover);
    color: var(--rr-sidebar-nav-ink);
}

/* A brand-less sidebar (the shell rail) keeps the toggle reachable at the
   top without a header row — sticky, right-aligned, as before. */
.rr-sidebar-nav:not(:has(.rr-sidebar-nav__header)) .rr-sidebar-nav__toggle {
    position: sticky;
    top: 12px;
    z-index: 3;
    margin: 12px 12px 0 auto;
}

/* ── Search control (the `show_search` subconfig) ─────────────────────── */
.rr-sidebar-nav__search {
    padding: 0.5rem 0.75rem 0;
    flex-shrink: 0;
}

.rr-sidebar-nav__search input {
    width: 100%;
    box-sizing: border-box;
    background: var(--rr-sidebar-nav-item-hover);
    border: 1px solid var(--rr-sidebar-nav-toggle-border);
    border-radius: var(--rr-sidebar-nav-item-radius);
    color: var(--rr-sidebar-nav-ink);
    font: inherit;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
}

.rr-sidebar-nav__search input::placeholder {
    color: var(--rr-sidebar-nav-muted);
}

.rr-sidebar-nav__search input:focus-visible {
    outline: 2px solid var(--rr-sidebar-nav-item-active);
    outline-offset: 1px;
}

/* ── Sections (JS `.sections` / `.section-label`) ─────────────────────── */
.rr-sidebar-nav__sections {
    flex: 1;
    /* The single scroll context (root is overflow:hidden) — min-height:0 is
       load-bearing for flex-column shrink-and-scroll. */
    min-height: 0;
    overflow-y: auto;
    /* SIDEBAR-NAV-LEFTBAR-001 — scroll-distance containment: when the menu's
       own scroll reaches its end, the scroll must NOT chain to the central
       page (the handheld drawer would drag the page under itself). The ROOT
       block has had `overscroll-behavior: contain` since the JS-parity port;
       the sections list is the element that ACTUALLY scrolls on long menus,
       so it needs the containment too. */
    overscroll-behavior: contain;
    /* Home-indicator safe area: the last rail item must clear the gesture bar
       on notched phones. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding: 0.5rem 0;
}

.rr-sidebar-nav__section {
    margin-bottom: 0.25rem;
}

.rr-sidebar-nav__section-title {
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.75rem 0.25rem;
    border: 0;
    background: transparent;
    font-size: 0.65rem;
    /* JS reference identity (.section-label carries no weight — 400); the
       h3 UA default (bold) must not leak in (round-2 recon delta D5). */
    font-weight: 400;
    font-family: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rr-sidebar-nav-muted);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.rr-sidebar-nav__section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    border-radius: var(--rr-sidebar-nav-item-radius);
}

.rr-sidebar-nav__section-toggle:hover,
.rr-sidebar-nav__section-toggle:focus-visible {
    color: var(--rr-sidebar-nav-ink);
    background: var(--rr-sidebar-nav-item-hover);
    outline: none;
}

.rr-sidebar-nav__section-toggle-icon {
    font-size: 10px;
    line-height: 1;
}

/* ── Items (JS `.nav-item` / `.nav-icon` / `.nav-label` / `.badge`) ───── */
.rr-sidebar-nav__item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rr-sidebar-nav__item-link {
    display: flex;
    align-items: center;
    gap: var(--rr-sidebar-nav-item-gap);
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0.375rem;
    border-radius: var(--rr-sidebar-nav-item-radius);
    color: var(--rr-sidebar-nav-ink);
    text-decoration: none;
    font-size: var(--rr-sidebar-nav-item-font-size);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--rr-sidebar-nav-transition);
}

.rr-sidebar-nav__item-link:hover {
    background: var(--rr-sidebar-nav-item-hover);
    color: var(--rr-sidebar-nav-ink);
    text-decoration: none;
}

/* Demo-policy items (VIZ-DEMO-RESOLVABILITY-001): a nav item that must NEVER
 * resolve renders as a `<button>` styled EXACTLY like the anchor — button
 * chrome reset so the demo presentation is indistinguishable from the real
 * nav (UX-PARITY-001), while the element is structurally non-navigable. */
button.rr-sidebar-nav__item-link {
    background: transparent;
    border: 0;
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.rr-sidebar-nav__item-link:focus-visible {
    outline: 2px solid var(--rr-sidebar-nav-accent, #1e40af);
    outline-offset: 1px;
}

.rr-sidebar-nav__item--active .rr-sidebar-nav__item-link {
    background: var(--rr-sidebar-nav-item-active);
    color: var(--rr-sidebar-nav-item-active-ink);
}

/* WCAG 2.2 §2.4.11 focus visibility — a token-driven ring on keyboard
   focus, never the pointer. */
.rr-sidebar-nav__item-link:focus-visible,
.rr-sidebar-nav__toggle:focus-visible {
    outline: 2px solid var(--rr-sidebar-nav-item-active);
    outline-offset: 1px;
}

.rr-sidebar-nav__item-icon {
    flex-shrink: 0;
    width: var(--rr-sidebar-nav-icon-width);
    text-align: center;
}

.rr-sidebar-nav__item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-sidebar-nav__item-badge {
    font-size: 0.6rem;
    background: var(--rr-sidebar-nav-accent);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.4rem;
    flex-shrink: 0;
}

.rr-sidebar-nav__item-badge--info {
    background: var(--rr-sidebar-nav-accent-info);
}

/* ── Collapsed / rail modes (labels out, icons centered) ─────────────── */
.rr-sidebar-nav--collapsed .rr-sidebar-nav__item-link,
.rr-sidebar-nav--rail .rr-sidebar-nav__item-link {
    justify-content: center;
    padding: 0.5rem;
    margin: 0.125rem 0.25rem;
}

.rr-sidebar-nav--collapsed .rr-sidebar-nav__section-title,
.rr-sidebar-nav--rail .rr-sidebar-nav__section-title,
.rr-sidebar-nav--collapsed .rr-sidebar-nav__item-label,
.rr-sidebar-nav--rail .rr-sidebar-nav__item-label,
.rr-sidebar-nav--collapsed .rr-sidebar-nav__item-badge,
.rr-sidebar-nav--rail .rr-sidebar-nav__item-badge,
.rr-sidebar-nav--collapsed .rr-sidebar-nav__brand,
.rr-sidebar-nav--rail .rr-sidebar-nav__brand,
.rr-sidebar-nav--collapsed .rr-sidebar-nav__search,
.rr-sidebar-nav--rail .rr-sidebar-nav__search {
    display: none;
}

.rr-sidebar-nav--collapsed .rr-sidebar-nav__header,
.rr-sidebar-nav--rail .rr-sidebar-nav__header {
    justify-content: center;
    padding: 0.5rem;
}

/* ── Content host + rail actions + bottom row ────────────────────────── */
.rr-sidebar-nav__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.rr-sidebar-nav__rail-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem;
}

/* A slot consumer's collapsed-rail button (e.g. the dev-config panel's tab
   icons) — the compound's rail-action chrome for content-slot consumers. */
.rr-sidebar-nav__rail-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0.125rem 0;
    border: 0;
    border-radius: var(--rr-sidebar-nav-item-radius);
    background: transparent;
    color: var(--rr-sidebar-nav-ink);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--rr-sidebar-nav-transition);
}

.rr-sidebar-nav__rail-tab:hover,
.rr-sidebar-nav__rail-tab:focus-visible {
    background: var(--rr-sidebar-nav-item-hover);
    outline: none;
}

.rr-sidebar-nav__bottom {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    border-top: 1px solid var(--rr-sidebar-nav-border);
    flex-shrink: 0;
}

.rr-sidebar-nav__bottom .rr-sidebar-nav__bottom-btn,
.rr-sidebar-nav__bottom .rr-sidebar-nav__bottom-btn--destructive {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--rr-sidebar-nav-ink);
    border-radius: var(--rr-sidebar-nav-item-radius);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
    transition: var(--rr-sidebar-nav-transition);
}

.rr-sidebar-nav__bottom .rr-sidebar-nav__bottom-btn:hover,
.rr-sidebar-nav__bottom .rr-sidebar-nav__bottom-btn--destructive:hover {
    background: var(--rr-sidebar-nav-item-hover);
}

.rr-sidebar-nav__bottom-icon {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

.rr-sidebar-nav__bottom-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rr-sidebar-nav--collapsed .rr-sidebar-nav__bottom-label,
.rr-sidebar-nav--rail .rr-sidebar-nav__bottom-label {
    display: none;
}

.rr-sidebar-nav--collapsed .rr-sidebar-nav__bottom .rr-sidebar-nav__bottom-btn,
.rr-sidebar-nav--rail .rr-sidebar-nav__bottom .rr-sidebar-nav__bottom-btn,
.rr-sidebar-nav--collapsed .rr-sidebar-nav__bottom .rr-sidebar-nav__bottom-btn--destructive,
.rr-sidebar-nav--rail .rr-sidebar-nav__bottom .rr-sidebar-nav__bottom-btn--destructive {
    justify-content: center;
    padding: 0.5rem;
}

.rr-sidebar-nav__custom-bottom {
    flex-shrink: 0;
}