/* src/components/basic/XWUINavMenu/XWUINavMenu.css */
/**
 * XWUINavMenu Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/menu/*.css (component-specific border widths)
 * - Roundness: theme/roundness/menu/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-menu {
    width: 100%;
    /* A menu is a control, not prose. Without this, dragging across items
       highlights their labels like body text and a double-click selects a word
       instead of activating the item - and the drag-select survives the click,
       leaving blue text behind. -webkit- kept for older WebKit/iOS. */
    -webkit-user-select: none;
    user-select: none;
}

.xwui-menu-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

.xwui-menu-vertical .xwui-menu-list {
    flex-direction: column;
    gap: var(--xwui-nav-menu-list-gap, var(--spacing-xs, 0.25rem));
}

/* Menu item */
.xwui-menu-item {
    position: relative;
}

.xwui-menu-link {
    display: flex;
    align-items: center;
    /* --xwui-nav-menu-item-*: a host retunes the row from tokens instead of
       out-ranking these rules. Every fallback is the value this rule had
       before the tokens existed, so an unset token changes nothing. */
    gap: var(--xwui-nav-menu-item-gap, var(--spacing-sm, 0.5rem));
    min-height: var(--xwui-nav-menu-item-height, auto);
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1rem);
    border-radius: var(--xwui-nav-menu-item-radius, var(--radius-menu, var(--radius-sm, 6px)));
    text-decoration: none;
    color: var(--xwui-nav-menu-item-fg, var(--text-primary));
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

/* State rules use the CHILD combinator (>), never a descendant space. A parent
   item and its submenu items are NESTED (li > a + ul > li > a), so
   `.xwui-menu-item-selected .xwui-menu-link` matched every link underneath the
   selected parent - selecting "Projects" painted "Active" and "Archived" as
   selected too. The same leak applied to the disabled rule. */
.xwui-menu-item:not(.xwui-menu-item-disabled) > .xwui-menu-link:hover {
    /* --bg-secondary is #f8f9fa against a #ffffff surface in the light theme -
       a 1.5% difference, so hover read as no feedback at all. Tint with the
       LIVE accent instead: it tracks whichever accent pack is loaded and stays
       visible on both light and dark surfaces. */
    background: var(--xwui-nav-menu-item-bg-hover, color-mix(in srgb, var(--accent-primary) 12%, transparent));
    color: var(--xwui-nav-menu-item-fg-hover, var(--xwui-nav-menu-item-fg, var(--text-primary)));
}

.xwui-menu-item-selected > .xwui-menu-link {
    background: var(--xwui-nav-menu-item-bg-active, var(--accent-primary));
    /* --text-on-accent is the token that means "legible on the accent fill";
       --text-inverse is the light/dark flip and only coincidentally matches. */
    color: var(--xwui-nav-menu-item-fg-active, var(--text-on-accent, var(--text-inverse)));
    box-shadow: var(--xwui-nav-menu-item-ring-active, none);
}

/* Hovering an already-selected item must still register, so deepen the accent
   rather than tinting a surface that is already fully accent-filled. A host
   whose active fill is a soft tint (not a solid accent) sets
   --xwui-nav-menu-item-bg-active-hover to keep the active look on hover. */
.xwui-menu-item-selected > .xwui-menu-link:hover {
    background: var(--xwui-nav-menu-item-bg-active-hover, color-mix(in srgb, var(--accent-primary) 82%, var(--text-primary)));
    color: var(--xwui-nav-menu-item-fg-active, var(--text-on-accent, var(--text-inverse)));
}

/* Icon and arrow must follow the link's colour into the selected state, or they
   keep --text-primary and render dark-on-accent while the label beside them is
   white.
   Two traps here, both verified in the browser:
   1. The class is .xwui-icon, NOT .xwui-menu-icon. XWUIComponent hosts REWRITE
      their container's className, so the `xwui-menu-icon` span this component
      creates comes back as `xwui-icon` - any rule keyed on .xwui-menu-icon
      never matches anything and fails silently.
   2. XWUIIcon writes `color: currentcolor` as an INLINE style on that host, and
      an inline declaration outranks every stylesheet rule. !important is the
      only lever left from here; it is scoped to the selected link alone so it
      cannot leak into normal icon styling. The real fix is for XWUIIcon to stop
      writing an inline colour it does not need. */
.xwui-menu-item-selected > .xwui-menu-link .xwui-icon,
.xwui-menu-item-selected > .xwui-menu-link .xwui-icon svg {
    color: var(--xwui-nav-menu-item-fg-active, var(--text-on-accent, var(--text-inverse))) !important;
}

.xwui-menu-item-selected > .xwui-menu-link .xwui-menu-arrow {
    color: inherit;
}

.xwui-menu-item-disabled > .xwui-menu-link {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-menu-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xwui-menu-icon svg {
    width: 1em;
    height: 1em;
}

.xwui-menu-label {
    flex: 1;
}

.xwui-menu-arrow {
    margin-inline-start: auto;
    font-size: var(--font-size-sm, 0.875rem);
}

/* The arrow toggles the group while the row navigates, so it needs to LOOK
   like its own target and be big enough to hit. Negative margin keeps the row
   height unchanged while the padding widens the hit area past the glyph. */
.xwui-menu-expand-click .xwui-menu-arrow[role='button'] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    align-self: stretch;
    padding-inline: 0.35rem;
    margin-block: -0.35rem;
    border-radius: 4px;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

.xwui-menu-expand-click .xwui-menu-arrow[role='button']:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.xwui-menu-expand-click .xwui-menu-arrow[role='button']:focus-visible {
    outline: 2px solid var(--accent-primary, #3b82f6);
    outline-offset: 1px;
}

/* Points down when the group is open - the arrow now has two states a reader
   acts on directly, so it has to show which one it is in. */
.xwui-menu-item-open > .xwui-menu-link .xwui-menu-arrow[role='button'] {
    transform: rotate(90deg);
}

/* Submenu */
.xwui-menu-submenu {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 200px;
    background: var(--bg-primary);
    border: var(--border-menu-width, var(--border-width-regular, 1.5px)) var(--border-menu-style, solid) var(--border-menu-color, var(--border-color));
    border-radius: var(--radius-menu, var(--radius-md, 8px));
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: var(--spacing-sm, 0.5rem);
    margin: 0;
    z-index: 1000;
}

.xwui-menu:not(.xwui-menu-expand-click) .xwui-menu-item:hover .xwui-menu-submenu {
    display: block;
}

/* Click-expand mode: submenus stay closed until the parent is explicitly
   clicked (toggles .xwui-menu-item-open on the <li>); the arrow rotates to
   point down while open. */
.xwui-menu-expand-click .xwui-menu-item-open > .xwui-menu-submenu {
    display: block;
}

.xwui-menu-arrow {
    display: inline-block;
    transition: transform 0.15s ease;
}

.xwui-menu-expand-click .xwui-menu-item-open > .xwui-menu-link > .xwui-menu-arrow {
    transform: rotate(90deg);
}

/* ── Submenu placement (config: submenuMode) ──────────────────────────────
   WHERE a submenu opens is independent of the menu's ORIENTATION, so it is its
   own axis rather than something inferred from `mode`:

     vertical   + inline  → expands in place, indented under its parent
     vertical   + flyout  → panel beside the item (inset-inline-start: 100%), context-menu style
     horizontal + inline  → a second horizontal strip beneath the parent
     horizontal + flyout  → panel below the item, classic dropdown

   Previously vertical always meant inline and horizontal always meant flyout,
   which is why a sidebar could not show a context-style panel and a top bar
   could not show a sub-bar. */

/* INLINE - the submenu joins the document flow, so it pushes siblings down
   instead of covering them. Strip the panel chrome the base rule applies. */
.xwui-menu-sub-inline .xwui-menu-submenu {
    position: static;
    min-width: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.xwui-menu-sub-inline.xwui-menu-vertical .xwui-menu-submenu {
    margin-top: var(--spacing-xs, 0.25rem);
    margin-inline-start: var(--spacing-md, 1rem);
    padding-inline-start: var(--spacing-sm, 0.5rem);
    /* The rail is the only affordance tying children to their parent once the
       panel chrome is gone. */
    border-inline-start: 2px solid var(--border-color);
}

/* A horizontal parent opens a horizontal strip - the children must lay out in a
   row, so this overrides the `display: block` the open-state rule sets. It
   carries one more class than that rule, so it wins without !important. */
.xwui-menu-sub-inline.xwui-menu-horizontal .xwui-menu-item-open > .xwui-menu-submenu {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    margin-top: var(--spacing-xs, 0.25rem);
}

/* FLYOUT - a floating panel. Keeps the base rule's chrome and only decides
   which edge it hangs off. */
.xwui-menu-sub-flyout .xwui-menu-submenu {
    position: absolute;
    /* --bg-menu is the token for menu surfaces; --bg-primary was painting the
       panel the same colour as the page in themes where they differ. */
    background: var(--bg-menu, var(--bg-elevated, var(--bg-primary)));
}

.xwui-menu-sub-flyout.xwui-menu-vertical .xwui-menu-submenu {
    top: 0;
    inset-inline-start: 100%;
    margin-inline-start: var(--spacing-xs, 0.25rem);
}

.xwui-menu-sub-flyout.xwui-menu-horizontal .xwui-menu-submenu {
    top: 100%;
    inset-inline-start: 0;
    margin-top: var(--spacing-xs, 0.25rem);
}

/* A MINIMIZED rail shows icons only, so the disclosure caret has nothing left to
   disclose in place and nothing left to sit beside - it just crowds a 64px
   column with a mark pointing at a label that is not rendered. The row still
   works: clicking it navigates, and the collapsed rail reveals children its own
   way. Scoped to the collapsed sidebar so an expanded menu keeps its carets. */
.xwui-sidebar-collapsed .xwui-menu-arrow,
/* The click-mode arrow is targeted at 0,3,0 by the rule that makes it a button
   (.xwui-menu-expand-click .xwui-menu-arrow[role="button"]). A plain 0,2,0
   selector loses to it, so the caret stayed visible in the collapsed rail even
   though the rule matched - match its shape to outrank it rather than reaching
   for !important. */
.xwui-sidebar-collapsed .xwui-menu-expand-click .xwui-menu-arrow[role="button"] {
  display: none;
}

/* A flyout opens sideways, so the caret keeps pointing that way instead of
   rotating down as it does for an inline disclosure. */
.xwui-menu-sub-flyout.xwui-menu-vertical .xwui-menu-item-open > .xwui-menu-link > .xwui-menu-arrow {
    transform: none;
}

/* -- Section headings and groups (data: item.heading) ---------------------
   A heading is a label row, never a target; the items after it sit in one
   role="group" list that reuses .xwui-menu-list, so they lay out like the
   top level. Only data with `heading` items produces these nodes. */
.xwui-menu-heading {
    list-style: none;
    padding: var(--xwui-nav-menu-heading-pad, var(--spacing-md, 1rem) var(--xwui-menu-pad-x, 1rem) var(--spacing-xs, 0.25rem));
    font-family: var(--xwui-nav-menu-heading-font-family, inherit);
    font-size: var(--xwui-nav-menu-heading-font-size, var(--font-size-xs, 0.75rem));
    font-weight: var(--xwui-nav-menu-heading-font-weight, 600);
    letter-spacing: var(--xwui-nav-menu-heading-tracking, 0.08em);
    text-transform: var(--xwui-nav-menu-heading-transform, uppercase);
    color: var(--xwui-nav-menu-heading-color, var(--text-secondary));
    -webkit-user-select: none;
    user-select: none;
}

.xwui-menu-group {
    list-style: none;
}

/* -- Badge tones danger / warning (item.badgeTone) ------------------------
   Solid pills at the end of the row, in every appearance. The fallbacks are
   the theme's own error / warning colours. */
.xwui-menu .xwui-menu-badge.xwui-menu-badge-danger,
.xwui-menu .xwui-menu-badge.xwui-menu-badge-warning {
    flex: none;
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    margin-inline-start: auto;
    min-width: var(--xwui-nav-menu-badge-min-width, 20px);
    max-width: none;
    height: var(--xwui-nav-menu-badge-height, 20px);
    padding: 0 var(--xwui-nav-menu-badge-pad-x, 6px);
    border-radius: var(--xwui-nav-menu-badge-radius, 9999px);
    font-family: var(--xwui-nav-menu-badge-font-family, inherit);
    font-size: var(--xwui-nav-menu-badge-font-size, 11px);
    font-weight: var(--xwui-nav-menu-badge-font-weight, 700);
    line-height: 1;
    white-space: nowrap;
}

.xwui-menu .xwui-menu-badge.xwui-menu-badge-danger {
    background: var(--xwui-nav-menu-badge-bg, var(--accent-error, #dc2626));
    color: var(--xwui-nav-menu-badge-fg, #fff);
}

.xwui-menu .xwui-menu-badge.xwui-menu-badge-warning {
    background: var(--xwui-nav-menu-badge-warning-bg, var(--accent-warning, #f59e0b));
    color: var(--xwui-nav-menu-badge-warning-fg, #1a1000);
}

/* A badge already pushed to the end: the caret sits beside it. */
.xwui-menu .xwui-menu-badge:is(.xwui-menu-badge-danger, .xwui-menu-badge-warning) + .xwui-menu-arrow {
    margin-inline-start: 0;
}

/* -- Always expanded (config: alwaysExpanded) -----------------------------
   Every group shows its children in place, whatever expandOn says. */
.xwui-menu.xwui-menu-always-expanded .xwui-menu-submenu {
    display: block;
}

/* Divider */
.xwui-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-sm, 0.5rem) 0;
    list-style: none;
}

/* ── Size variants ────────────────────────────────────────────────────────
   The schema advertises the full canonical scale plus legacy aliases, but only
   s/sm and l/lg were ever styled - so xxs, xs, md, xl, xxl and friends were
   accepted, written onto the root as .xwui-menu-<size>, and then did nothing.
   Every advertised value now resolves.

   Each step sets ONE custom property pair; the link rule below consumes them.
   That keeps the per-size blocks to two declarations and means anything else
   that needs to scale with the menu (icon box, gap) can read the same values
   instead of re-deriving them. --xwui-menu-fs also drives the icon, because
   XWUIIcon sizes its host in px and only the font-size reaches the svg. */
.xwui-menu {
    --xwui-menu-fs: var(--font-size-sm, 0.875rem);
    --xwui-menu-pad-y: var(--spacing-sm, 0.5rem);
    --xwui-menu-pad-x: var(--spacing-md, 1rem);
}

:is(.xwui-menu-xxxxs, .xwui-menu-xxxs) { --xwui-menu-fs: 0.625rem; --xwui-menu-pad-y: 0.125rem; --xwui-menu-pad-x: 0.375rem; }
:is(.xwui-menu-xxs)                    { --xwui-menu-fs: 0.6875rem; --xwui-menu-pad-y: 0.1875rem; --xwui-menu-pad-x: 0.5rem; }
:is(.xwui-menu-xs, .xwui-menu-tiny)    { --xwui-menu-fs: var(--font-size-xs, 0.75rem); --xwui-menu-pad-y: 0.25rem; --xwui-menu-pad-x: 0.625rem; }
:is(.xwui-menu-s, .xwui-menu-sm, .xwui-menu-small) { --xwui-menu-fs: var(--font-size-sm, 0.875rem); --xwui-menu-pad-y: 0.375rem; --xwui-menu-pad-x: 0.75rem; }
:is(.xwui-menu-m, .xwui-menu-md, .xwui-menu-medium) { --xwui-menu-fs: var(--font-size-base, 1rem); --xwui-menu-pad-y: 0.5rem; --xwui-menu-pad-x: 1rem; }
:is(.xwui-menu-l, .xwui-menu-lg, .xwui-menu-large) { --xwui-menu-fs: var(--font-size-lg, 1.125rem); --xwui-menu-pad-y: 0.625rem; --xwui-menu-pad-x: 1.25rem; }
:is(.xwui-menu-xl)                     { --xwui-menu-fs: var(--font-size-xl, 1.25rem); --xwui-menu-pad-y: 0.75rem; --xwui-menu-pad-x: 1.5rem; }
:is(.xwui-menu-xxl)                    { --xwui-menu-fs: var(--font-size-2xl, 1.5rem); --xwui-menu-pad-y: 0.875rem; --xwui-menu-pad-x: 1.75rem; }
:is(.xwui-menu-xxxl, .xwui-menu-xxxxl) { --xwui-menu-fs: var(--font-size-3xl, 1.875rem); --xwui-menu-pad-y: 1rem; --xwui-menu-pad-x: 2rem; }

.xwui-menu .xwui-menu-link {
    padding: var(--xwui-nav-menu-item-pad-y, var(--xwui-menu-pad-y)) var(--xwui-nav-menu-item-pad-x, var(--xwui-menu-pad-x));
    font-size: var(--xwui-nav-menu-item-font-size, var(--xwui-menu-fs));
    /* No fallback on purpose: an unset token makes the declaration
       invalid-at-computed-value, which for these inherited properties means
       inherit - exactly what the link did before the token existed. */
    font-weight: var(--xwui-nav-menu-item-font-weight);
    font-family: var(--xwui-nav-menu-item-font-family);
}

/* XWUIIcon writes width/height in px INLINE on its host, so the box cannot be
   scaled from here - but the svg inside is sized in em by its own attributes,
   so raising the host's font-size scales the glyph with the menu. */
.xwui-menu .xwui-menu-link .xwui-icon {
    font-size: var(--xwui-menu-fs);
}

/* ── Item content (config: itemDisplay + iconPosition) ────────────────────
   itemDisplay picks WHAT a link shows - icon+label, icon only (a rail), or
   label only. iconPosition picks WHERE the icon sits relative to the label,
   including the stacked forms used by bottom bars and app rails. The two are
   independent, and both are independent of mode/submenuMode. */

/* The label is a plain span this component owns, so a normal rule hides it. */
.xwui-menu-items-icon .xwui-menu-label { display: none; }

/* The icon is NOT ours by the time it renders: XWUIIcon writes
   `display: inline-flex` as an INLINE style on its host, and inline beats any
   stylesheet rule - so `display: none` here is ignored without !important.
   Same root cause as the selected-icon colour rule above. */
.xwui-menu-items-text .xwui-menu-link .xwui-icon { display: none !important; }

/* Icon-only links would keep the label's leftover gap and stretch to the full
   sidebar width, so square them up and drop the caret's auto margin. */
.xwui-menu-items-icon .xwui-menu-link {
    justify-content: center;
    gap: 0;
}

.xwui-menu-iconpos-end .xwui-menu-link { flex-direction: row-reverse; }

/* Stacked: the label sits on its own line, so the flex row becomes a column and
   the caret's `margin-inline-start: auto` (which assumes a row) has to be neutralised
   or it shoves the arrow off-axis. */
.xwui-menu-iconpos-top .xwui-menu-link,
.xwui-menu-iconpos-bottom .xwui-menu-link {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    text-align: center;
}

.xwui-menu-iconpos-bottom .xwui-menu-link { flex-direction: column-reverse; }

:is(.xwui-menu-iconpos-top, .xwui-menu-iconpos-bottom) .xwui-menu-arrow {
    margin-inline-start: 0;
}

:is(.xwui-menu-iconpos-top, .xwui-menu-iconpos-bottom) .xwui-menu-label {
    flex: none;
}


/* ── Appearance: sidebar (config: appearance = 'sidebar') ─────────────────
   An app sidebar: 40px rows (22px icon, 17px label), one soft fill shared by
   hover, the selected item and the group that holds it (.xwui-menu-item-in-
   trail, set by the view only in this appearance), a 22px chevron that turns
   a quarter when its group opens, count badges, and children in a rounded
   panel of 36px rows marked by a 6px dot with hairline rules between them.

   The values are measured from a rendered shadcn-style sidebar and kept as
   custom properties, so the look is exact by default and a theme can still
   retune it. The root carries two classes, so every rule here outranks the
   default rules above without !important (the one exception is the icon
   colour, which XWUIIcon writes inline - see the selected-icon note above). */
.xwui-menu.xwui-menu-appearance-sidebar {
    --xwui-menu-sidebar-font: Manrope, ui-sans-serif, system-ui, sans-serif;
    --xwui-menu-sidebar-fg: rgb(9 9 11);
    --xwui-menu-sidebar-fill: rgb(212 212 216 / 0.9);
    --xwui-menu-sidebar-fill-fg: rgb(9 9 11);
    --xwui-menu-sidebar-rule: rgb(228 228 231);
    --xwui-menu-sidebar-badge-bg: rgb(228 228 231);
    --xwui-menu-sidebar-badge-fg: rgb(9 9 11);
    --xwui-menu-sidebar-panel-bg: rgb(255 255 255 / 0.7);
    --xwui-menu-sidebar-dot: rgb(82 82 91);
    color: var(--xwui-menu-sidebar-fg);
}

[data-theme="dark"] .xwui-menu.xwui-menu-appearance-sidebar {
    --xwui-menu-sidebar-fg: rgb(242 242 242);
    --xwui-menu-sidebar-fill: rgb(96 165 250 / 0.15);
    --xwui-menu-sidebar-fill-fg: rgb(96 165 250);
    --xwui-menu-sidebar-rule: rgb(39 39 42);
    --xwui-menu-sidebar-badge-bg: rgb(96 165 250 / 0.15);
    --xwui-menu-sidebar-badge-fg: rgb(96 165 250);
    --xwui-menu-sidebar-panel-bg: rgb(12 10 9 / 0.7);
    --xwui-menu-sidebar-dot: rgb(255 255 255);
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-list {
    gap: 4px;
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-link {
    box-sizing: border-box;
    height: 40px;
    padding: 8px;
    gap: 16px;
    border-radius: 8.4px;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: var(--xwui-menu-sidebar-fg);
    overflow: hidden;
}

/* 22px glyphs. XWUIIcon writes its 16px box INLINE on the host, so only
   !important resizes it from here (same trap as the selected-icon colour
   above); the svg is sized in em, so the font-size scales the drawing. Sized
   here rather than by creating the icon at 22px because a runtime appearance
   switch would then rebuild the icon under the engine's root, which react
   refuses ("node to be removed is not a child"). */
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-link .xwui-icon {
    flex: none;
    width: 22px !important;
    height: 22px !important;
    font-size: 22px;
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-link .xwui-icon svg {
    width: 22px;
    height: 22px;
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--xwui-menu-sidebar-font);
    font-size: 17px;
    font-weight: 400;
    line-height: 20px;
}

/* One fill for hover, the selected item and the group holding it. */
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item:not(.xwui-menu-item-disabled) > .xwui-menu-link:hover,
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-selected > .xwui-menu-link,
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-selected > .xwui-menu-link:hover,
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-in-trail > .xwui-menu-link {
    background: var(--xwui-menu-sidebar-fill);
    color: var(--xwui-menu-sidebar-fill-fg);
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-selected > .xwui-menu-link .xwui-icon,
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-selected > .xwui-menu-link .xwui-icon svg {
    color: currentColor !important;
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-link:focus-visible {
    outline: 2px solid var(--focus-ring-color, var(--accent-primary));
    outline-offset: -2px;
}

/* Count badge: a 24px pill at the end of the row. */
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-badge {
    flex: none;
    box-sizing: border-box;
    min-width: 28px;
    max-width: 80px;
    height: 24px;
    padding: 4px 8px;
    border-radius: 9999px;
    background: var(--xwui-menu-sidebar-badge-bg);
    color: var(--xwui-menu-sidebar-badge-fg);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Accent badge: a solid 20px circle for things that want attention. */
.xwui-menu.xwui-menu-appearance-sidebar {
    --xwui-menu-sidebar-accent: rgb(37 99 235);
}

[data-theme="dark"] .xwui-menu.xwui-menu-appearance-sidebar {
    --xwui-menu-sidebar-accent: rgb(96 165 250);
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-badge.xwui-menu-badge-accent {
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background: var(--xwui-menu-sidebar-accent);
    color: rgb(255 255 255);
    font-weight: 500;
    line-height: 20px;
}

/* Chevron: the '›' glyph is replaced by a 22px drawn chevron (stroke 2, round
   caps) that keeps the arrow's role, label and keyboard handling. */
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-arrow {
    flex: none;
    width: 22px;
    min-width: 22px;
    height: 22px;
    align-self: center;
    margin-inline-start: auto;
    margin-block: 0;
    padding: 0;
    font-size: 0;
    color: inherit;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
    transition: transform 0.2s ease;
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-badge + .xwui-menu-arrow {
    margin-inline-start: 0;
}

/* Closed, the chevron points along the reading direction. */
[dir="rtl"] .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item:not(.xwui-menu-item-open) > .xwui-menu-link > .xwui-menu-arrow {
    transform: scaleX(-1);
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-open > .xwui-menu-link > .xwui-menu-arrow {
    transform: rotate(90deg);
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-arrow[role='button']:hover {
    background-color: currentColor;
}

/* Section rule between groups. No bottom margin: the list gap already
   separates it from the next row (4px gap, 4px margin, rule, 4px gap = the
   reference's 13px between the two rows). */
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-divider {
    height: 1px;
    margin: 4px 8px 0;
    background: var(--xwui-menu-sidebar-rule);
}

/* Children: a rounded panel of dotted rows with hairline rules between them. */
.xwui-menu.xwui-menu-appearance-sidebar.xwui-menu-vertical .xwui-menu-submenu {
    margin: 8px 0 0;
    padding: 0 0 0 0;
    padding-inline-start: 8px;
    border: none;
    border-radius: 12px;
    background: var(--xwui-menu-sidebar-panel-bg);
    overflow: hidden;
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu > .xwui-menu-item + .xwui-menu-item {
    border-top: 1px solid color-mix(in srgb, var(--xwui-menu-sidebar-rule) 60%, transparent);
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-list,
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu {
    gap: 0;
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-link {
    height: 36px;
    padding: 0 8px;
    /* The reference nudges sub-rows one pixel toward the start edge. */
    transform: translateX(-1px);
    gap: 8px;
    border-radius: 0;
    font-size: 14px;
    line-height: 14px;
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-link::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--xwui-menu-sidebar-dot);
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-link .xwui-icon {
    display: none !important;
}

.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-label {
    font-family: inherit;
    font-size: 14px;
    line-height: 14px;
}

[dir="rtl"] .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-link {
    transform: translateX(1px);
}

/* Collapsed rail (itemDisplay: 'icon'): 40px icon squares, nothing else. */
.xwui-menu.xwui-menu-appearance-sidebar.xwui-menu-items-icon .xwui-menu-link {
    width: 40px;
    padding: 8px 10px;
    justify-content: center;
}

.xwui-menu.xwui-menu-appearance-sidebar.xwui-menu-items-icon :is(.xwui-menu-badge, .xwui-menu-arrow, .xwui-menu-submenu) {
    display: none;
}

/* Icon-only rows have no room for a section label or a pill; the grouping
   stays in the accessibility tree through the group's aria-labelledby. */
.xwui-menu.xwui-menu-items-icon .xwui-menu-heading,
.xwui-menu.xwui-menu-items-icon :is(.xwui-menu-badge-danger, .xwui-menu-badge-warning) {
    display: none;
}

/* Focus ring for keyboard roving in the default appearance (the sidebar
   appearance draws its own above). */
.xwui-menu:not(.xwui-menu-appearance-sidebar) .xwui-menu-link:focus-visible {
    outline: 2px solid var(--xwui-nav-menu-focus-ring, var(--focus-ring-color, var(--accent-primary)));
    outline-offset: -2px;
}