/* 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-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-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;
    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);
    overflow: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* ── 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);
}

/* ── 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;
    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;
    font-weight: 700;
    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;
}

.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;
}

.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;
}