/**
 * primitives.css — die gemeinsame Formensprache
 * =============================================
 *
 * Quelle: docs/design/GlareCheck-UI-Vorlage.html (Abschnitte 02 „Token-Ebene"
 * und 03 „Primitive"). Die Vorlage ist maßgeblich — wer hier etwas ändert,
 * ändert es dort zuerst. Wer einen neuen Baustein braucht, sieht zuerst in
 * docs/DESIGN-BAUSTEINE.md nach.
 *
 * Diese Datei ist ADDITIV: sie definiert nur neue Namen und überschreibt
 * keinen bestehenden Token. Sie wird direkt NACH variables.css geladen.
 * Alte Klassen bleiben, bis sie Baustein für Baustein abgelöst sind.
 *
 * Zwei bewusste Abweichungen von der Vorlage:
 *
 * 1. `--text-muted` wird hier NICHT definiert. Der Name existiert schon in
 *    variables.css (#94a3b8) und wird auf allen Seiten benutzt; ihn hier auf
 *    #64748b zu heben wäre kein additiver Schritt, sondern Schritt 1 der
 *    Vorlage (Token-Kopf in variables.css ersetzen) — der steht aus. Wo die
 *    Vorlage in den Primitiven `--text-muted` schreibt, steht hier
 *    `--text-3`. Beide zeigen in der Vorlage auf --n-500, der Wert ist
 *    derselbe.
 *
 * 2. Die Kategorie-Akzente `--cat-*` zeigen auf die `--obj-rail-*` aus
 *    variables.css statt auf die Werte der Vorlage. Grund: der farbige
 *    Streifen an einer Objektkarte trägt die Farbe, die das Objekt AUF DER
 *    KARTE hat (Owner 11.09.2026) — er sagt etwas, er ist keine Deko. Die
 *    Vorlage kennt die Kartenfarben nicht.
 */

:root {
    /* ── Marke ───────────────────────────────────────────────────────── */
    --b-700: #2a4d6e;
    --b-600: #35608a;
    --b-500: #4274a5;
    --b-400: #5a8fc4;
    --b-100: #dce8f2;
    --b-50:  #eef4f9;

    /* ── Neutrals — Slate, weil der Code sie faktisch schon nutzt ────── */
    --n-900: #0f172a;
    --n-800: #1e293b;
    --n-700: #334155;
    --n-600: #475569;
    --n-500: #64748b;
    --n-400: #94a3b8;
    --n-300: #cbd5e1;
    --n-200: #e2e8f0;
    --n-100: #f1f5f9;
    --n-50:  #f8fafc;
    --n-0:   #ffffff;

    /* ── Semantik ────────────────────────────────────────────────────── */
    --ok:   #0f9d6b; --ok-bg:   #e7f7f0; --ok-bd:   #a7e3cb;
    --warn: #b45309; --warn-bg: #fffbeb; --warn-bd: #fcd34d;
    --err:  #c62828; --err-bg:  #fdecee; --err-bd:  #f3b6bb;
    --info: var(--b-500); --info-bg: var(--b-50); --info-bd: var(--b-100);

    /* ── Rollen ──────────────────────────────────────────────────────── */
    --text:   var(--n-800);
    --text-2: var(--n-600);
    --text-3: var(--n-500);   /* gedämpfter Text — 4,76:1 */
    --deco:   var(--n-400);   /* KEINE Textfarbe: Platzhalter, Deko, disabled */
    --bd: var(--n-200); --bd-strong: var(--n-300);
    --bg: var(--n-0); --bg-sunken: var(--n-50); --bg-sunken-2: var(--n-100);

    /* ── Radien — 4 Stufen, sonst nichts ─────────────────────────────── */
    --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px;

    /* ── Typo-Skala — 8 Stufen statt ~20 Ad-hoc-Werten ───────────────── */
    --fs-micro: 0.6875rem;
    --fs-xs:    0.75rem;
    --fs-sm:    0.8125rem;
    --fs-base:  0.875rem;
    --fs-md:    1rem;
    --fs-lg:    1.125rem;
    --fs-xl:    1.375rem;
    --fs-2xl:   1.75rem;

    /* ── Abstände ────────────────────────────────────────────────────── */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

    /* ── Schatten ────────────────────────────────────────────────────── */
    --sh-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --sh-md: 0 2px 8px rgba(15, 23, 42, .08);
    --sh-lg: 0 8px 24px rgba(15, 23, 42, .10);
    --sh-xl: 0 16px 48px rgba(15, 23, 42, .16);

    --t-fast: .12s ease;
    --t: .15s ease;

    /* ── Kategorie-Akzente (Editor-Listen) = Kartenfarben ────────────── */
    --cat-pv:       var(--obj-rail-pv);
    --cat-op:       var(--obj-rail-op);
    --cat-excluded: var(--obj-rail-excl);
    --cat-obstacle: var(--obj-rail-obs);
    --cat-ruler:    var(--obj-rail-ruler);
    --cat-topo:     var(--obj-rail-topo);
}

/* ============================================================
   PRIMITIVE — genau eine Implementierung pro Element
   ============================================================ */

/* — Button — */
.u-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2); padding: 8px 14px;
    border: 1px solid transparent; border-radius: var(--r-md);
    font: 500 var(--fs-base)/1.4 inherit; cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
    white-space: nowrap; text-decoration: none;
}
.u-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(66, 116, 165, .25); }
.u-btn:disabled { opacity: .55; cursor: not-allowed; }
.u-btn--primary { background: var(--b-500); color: #fff; }
.u-btn--primary:hover:not(:disabled) { background: var(--b-600); color: #fff; }
.u-btn--secondary { background: var(--n-0); color: var(--text); border-color: var(--bd-strong); }
.u-btn--secondary:hover:not(:disabled) { background: var(--n-100); border-color: var(--n-400); color: var(--text); }
.u-btn--ghost { background: transparent; color: var(--b-500); }
.u-btn--ghost:hover:not(:disabled) { background: var(--b-50); }
.u-btn--danger { background: var(--err); color: #fff; }
.u-btn--danger:hover:not(:disabled) { background: #a81f1f; }
.u-btn--danger-ghost { background: transparent; color: var(--err); }
.u-btn--danger-ghost:hover:not(:disabled) { background: var(--err-bg); }
.u-btn--xs { padding: 3px 8px; font-size: var(--fs-xs); }
.u-btn--sm { padding: 5px 11px; font-size: var(--fs-sm); }
.u-btn--lg { padding: 11px 20px; font-size: var(--fs-md); }
.u-btn--block { display: flex; width: 100%; }

/* — Icon-Button — */
.u-ibtn {
    width: 32px; height: 32px; border-radius: var(--r-md);
    border: 1px solid var(--bd); background: var(--n-0);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-3); cursor: pointer; transition: all var(--t);
    font-size: var(--fs-base); flex-shrink: 0;
}
.u-ibtn:hover { background: var(--b-50); border-color: var(--b-400); color: var(--b-500); }
.u-ibtn--sm { width: 28px; height: 28px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.u-ibtn--xs { width: 24px; height: 24px; border-radius: var(--r-sm); font-size: var(--fs-xs); }
.u-ibtn--danger:hover { background: var(--err-bg); border-color: var(--err-bd); color: var(--err); }
.u-ibtn.is-active { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.u-ibtn--plain { border-color: transparent; background: transparent; }
.u-ibtn--plain:hover { background: var(--b-50); border-color: transparent; }

/* — Input / Select — */
.u-input, .u-select {
    width: 100%; padding: 7px 11px;
    border: 1px solid var(--bd); border-radius: var(--r-md);
    font: 400 var(--fs-base)/1.4 inherit; color: var(--text); background: var(--n-0);
    transition: border-color var(--t), box-shadow var(--t);
}
.u-input:hover, .u-select:hover { border-color: var(--bd-strong); }
.u-input:focus, .u-select:focus {
    outline: none; border-color: var(--b-500);
    box-shadow: 0 0 0 3px rgba(66, 116, 165, .15);
}
.u-input:disabled { background: var(--n-50); color: var(--text-3); cursor: not-allowed; }
.u-input--sm { padding: 4px 8px; font-size: var(--fs-sm); }
.u-input::placeholder { color: var(--deco); }
.u-input--num { text-align: right; font-variant-numeric: tabular-nums; }

.u-label {
    display: block; font-size: var(--fs-xs); font-weight: 500;
    color: var(--text-2); margin-bottom: var(--s-1);
}
.u-field { margin-bottom: var(--s-3); }
.u-hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: 3px; }
.u-unit { display: flex; }
.u-unit .u-input { border-radius: var(--r-md) 0 0 var(--r-md); border-right: none; }
.u-unit__suffix {
    display: flex; align-items: center; padding: 0 10px;
    background: var(--n-50); border: 1px solid var(--bd);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap;
}
/* Gegenstück zum Suffix: ein Zeichen VOR dem Feld (z. B. „±" beim
   Winkelbereich eines Trackers), 20.09.2026. */
.u-unit__praefix {
    display: flex; align-items: center; padding: 0 8px;
    background: var(--n-50); border: 1px solid var(--bd); border-right: none;
    border-radius: var(--r-md) 0 0 var(--r-md);
    font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap;
}
.u-unit__praefix + .u-input { border-radius: 0; border-left: none; }

/* — Checkbox / Radio / Switch — */
.u-check, .u-radio {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px;
    border: 1.5px solid var(--bd-strong); background: var(--n-0);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--t); flex-shrink: 0; position: relative;
}
.u-check { border-radius: 3px; }
.u-radio { border-radius: 50%; }
.u-check:hover, .u-radio:hover { border-color: var(--b-500); }
.u-check:checked, .u-radio:checked { background: var(--b-500); border-color: var(--b-500); }
.u-check:checked::after {
    content: ""; width: 8px; height: 4px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}
.u-radio:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.u-check:focus-visible, .u-radio:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(66, 116, 165, .25); }
.u-checkline {
    display: flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-base); color: var(--text); cursor: pointer; margin: 0;
}

.u-switch {
    appearance: none; -webkit-appearance: none;
    width: 34px; height: 20px; border-radius: var(--r-pill);
    background: var(--n-300); position: relative; cursor: pointer;
    transition: background var(--t); flex-shrink: 0; border: none;
}
.u-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    transition: transform var(--t); box-shadow: var(--sh-sm);
}
.u-switch:checked { background: var(--b-500); }
.u-switch:checked::after { transform: translateX(14px); }

/* — Badge — */
.u-badge {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: 2px 8px; border-radius: var(--r-sm);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
}
.u-badge--neutral { background: var(--n-100); color: var(--text-2); }
.u-badge--info { background: var(--info-bg); color: var(--b-600); }
.u-badge--ok { background: var(--ok-bg); color: var(--ok); }
.u-badge--warn { background: var(--warn-bg); color: var(--warn); }
.u-badge--err { background: var(--err-bg); color: var(--err); }
.u-badge--solid { color: #fff; background: var(--b-500); }

/* Statuspunkt — Zustand einer Quelle/Verbindung in einem Blick (grün erreichbar,
   rot gestört, grau unbekannt/nicht geprüft). Erst Vorlage, dann hier (Design-Regel). */
.u-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--n-300); vertical-align: middle; margin-right: 6px; flex: none; }
.u-dot--ok { background: var(--ok); }
.u-dot--warn { background: var(--warn); }
.u-dot--err { background: var(--err); }

/* — Info-Box — (i) immer info-circle-fill, immer currentColor — */
.u-info {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; border-radius: var(--r-md); border: 1px solid;
    font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--s-3);
}
.u-info > i.bi { font-size: var(--fs-md); line-height: 1; margin-top: 1px; flex-shrink: 0; opacity: .85; }
/* Bootstrap gibt jedem <p> ein margin-bottom. Als letztes Kind reißt das
   unten Leerraum in den Kasten (Owner 13.09.2026). */
.u-info p { margin-bottom: var(--s-2); }
.u-info p:last-child { margin-bottom: 0; }
.u-info--info { background: var(--info-bg); border-color: var(--info-bd); color: var(--b-700); }
.u-info--warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.u-info--err  { background: var(--err-bg);  border-color: var(--err-bd);  color: var(--err); }
.u-info--ok   { background: var(--ok-bg);   border-color: var(--ok-bd);   color: var(--ok); }
/* Leerer Zustand einer Liste (ui/bausteine.js leerZustand): ein u-info mit
   Titelzeile und dem nächsten Schritt — dieselbe Form wie der Hinweis. */
.u-leer { margin: var(--s-3) 0 0; }
.u-leer__titel { font-weight: 600; font-size: var(--fs-base); margin-bottom: var(--s-1); }
.u-leer p { margin-bottom: var(--s-2); }
.u-leer__schritt { display: flex; align-items: baseline; gap: 6px; font-weight: 500; }
.u-leer__schritt > i.bi { font-size: var(--fs-sm); }

/* — Panel-Chrome — */
.u-panel {
    background: var(--n-0); border: 1px solid var(--bd);
    border-radius: var(--r-xl); overflow: hidden;
    display: flex; flex-direction: column;
}
.u-phead {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); padding: 13px 16px;
    background: linear-gradient(135deg, var(--b-50) 0%, var(--b-100) 100%);
    border-bottom: 1px solid var(--b-100);
    color: var(--b-700); font-weight: 600; font-size: var(--fs-md);
}
.u-phead__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.u-phead__icon {
    width: 30px; height: 30px; border-radius: var(--r-md);
    background: var(--n-0); border: 1px solid var(--b-100); color: var(--b-500);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.u-phead__actions { display: flex; gap: var(--s-1); flex-shrink: 0; }
.u-pbody { padding: var(--s-4); overflow-y: auto; }
.u-pfoot {
    padding: 12px 16px; background: var(--bg-sunken); border-top: 1px solid var(--bd);
    display: flex; gap: var(--s-2); justify-content: flex-end; flex-shrink: 0;
}

.u-seclabel {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-3); font-weight: 600; margin: var(--s-4) 0 var(--s-2);
}
.u-seclabel:first-child { margin-top: 0; }
.u-seclabel > i.bi { font-size: var(--fs-xs); color: var(--b-500); opacity: .8; }
.u-seclabel__rule { flex: 1; height: 1px; background: var(--bd); }

/* — Listen-Item — */
.u-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--n-0); border: 1px solid var(--bd);
    border-left: 3px solid var(--acc, var(--bd-strong)); border-radius: var(--r-md);
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.u-item:hover { background: var(--bg-sunken); box-shadow: var(--sh-sm); }
.u-item--pv { --acc: var(--cat-pv); }
.u-item--op { --acc: var(--cat-op); }
.u-item--excluded { --acc: var(--cat-excluded); }
.u-item--obstacle { --acc: var(--cat-obstacle); }
.u-item--ruler { --acc: var(--cat-ruler); }
.u-item--topo { --acc: var(--cat-topo); }
.u-item__lead {
    width: 28px; height: 28px; border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--acc, var(--b-500)) 12%, #fff);
    color: var(--acc, var(--b-500));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-base); flex-shrink: 0;
}
.u-item__info { flex: 1; min-width: 0; }
.u-item__name {
    font-size: var(--fs-base); font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-item__meta { font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }
.u-item__lead i.bi { opacity: .95; }
.u-item__actions { display: flex; gap: var(--s-1); flex-shrink: 0; }
.u-item--locked { opacity: .6; }
.u-item--locked .u-item__name { text-decoration: line-through; }
.u-item.is-expanded {
    border-radius: var(--r-md) var(--r-md) 0 0; background: var(--bg-sunken);
    border-color: var(--acc, var(--b-500)); border-bottom: none;
}
.u-item-body {
    border: 1px solid var(--acc, var(--b-500)); border-top: none; border-left-width: 3px;
    border-radius: 0 0 var(--r-md) var(--r-md); background: var(--n-0);
    padding: var(--s-3) var(--s-4); font-size: var(--fs-sm);
}
.u-item-body__row {
    display: flex; justify-content: space-between; gap: var(--s-3);
    padding: 5px 0; border-bottom: 1px dashed var(--bd);
}
.u-item-body__row:last-of-type { border-bottom: none; }
.u-item-body__row dt { color: var(--text-2); margin: 0; }
.u-item-body__row dd { color: var(--text); font-weight: 500; margin: 0; font-variant-numeric: tabular-nums; }

/* — Objektkarte im Editor-Menü: Aussehen in panels.css („Objektkarte“,
   Prod-Form, Owner 11.10.2026). Hier nur die Prüfmarkierung der u-btn-
   Knöpfe (z. B. „Eckpunkte“ im PV-Körper). — */
.u-btn.is-fehlt { border-color: var(--err); color: var(--err); }

/* — Aktionsmenü „⋯“ (Bootstrap-Dropdown, nur das Aussehen) — */
.u-menu {
    padding: 4px; min-width: 200px; font-size: var(--fs-sm);
    border: 1px solid var(--bd); border-radius: var(--r-md); box-shadow: var(--sh-md);
}
.u-menu .dropdown-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    border-radius: var(--r-sm); color: var(--text); background: none; border: 0; width: 100%;
}
.u-menu .dropdown-item:hover, .u-menu .dropdown-item:focus { background: var(--b-50); color: var(--text); }
.u-menu .dropdown-item i.bi { width: 16px; text-align: center; color: var(--text-2); }
.u-menu .dropdown-item.u-menu__gefahr, .u-menu .dropdown-item.u-menu__gefahr i.bi { color: var(--err); }
.u-menu .dropdown-item.u-menu__gefahr:hover { background: var(--err-bg); }
.u-menu .dropdown-divider { margin: 4px 0; border-top-color: var(--bd); }

/* — Tabelle — */
.u-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.u-table thead th {
    padding: 8px 12px; text-align: left;
    font-size: var(--fs-micro); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-3); background: var(--bg-sunken);
    border-bottom: 1px solid var(--bd); white-space: nowrap;
}
.u-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--n-100); color: var(--text); }
.u-table tbody tr:hover td { background: var(--bg-sunken); }
.u-table tbody tr:last-child td { border-bottom: none; }
.u-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Tabelle mit Eingabefeldern (Koordinaten, Höhen) in Detailpanels:
   scrollender Rahmen, Kopf bleibt stehen, Felder kompakt (07.10.2026). */
.u-tabelle { max-height: 420px; overflow: auto; border: 1px solid var(--bd); border-radius: var(--r-md); }
.u-table--felder thead th { position: sticky; top: 0; z-index: 1; padding: 6px 8px; }
.u-table--felder tbody td { padding: 3px 6px; vertical-align: middle; }
.u-table--felder .u-input { padding: 3px 6px; font-size: var(--fs-xs); min-width: 0; }
.u-table--felder .u-unit__suffix { padding: 0 6px; }
/* Fußzeile „Für alle“ klebt unten (sticky): deckend, sonst scheint die darunter
   gescrollte Zeile durch (Sichtfelder mit 7 Punkten zeigten eine „6“ hinter „Für alle“,
   11.10.2026). Trennlinie als Schatten, weil border-collapse Rahmen nicht mitklebt. */
.u-table--felder tfoot { z-index: 1; }
.u-table--felder tfoot td { background: var(--bg-sunken); box-shadow: inset 0 1px 0 var(--bd); }
.u-input[readonly] { background: var(--n-50); color: var(--text-2); }
.u-table--felder input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; min-width: 7ch; }
/* Koordinaten (Textfelder, 6 Nachkommastellen) vollständig lesbar */
.u-table--felder input[type="text"] { min-width: 10.5ch; font-variant-numeric: tabular-nums; }
/* Fehlender Pflichtwert: nur roter Rahmen, kein Bootstrap-Symbol im schmalen Feld */
.u-table--felder .u-input.is-invalid { border-color: var(--err); background-image: none; box-shadow: none; }

/* — Karte / Kennzahl — */
.u-card { background: var(--n-0); border: 1px solid var(--bd); border-radius: var(--r-lg); padding: var(--s-4); }
.u-stat__label { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.u-stat__value {
    font-size: var(--fs-xl); font-weight: 600; color: var(--text);
    line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums;
}
.u-stat__delta { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.u-bar {
    height: 6px; background: var(--n-200); border-radius: var(--r-sm);
    overflow: hidden; margin-top: var(--s-2);
}
.u-bar > span { display: block; height: 100%; background: var(--b-500); border-radius: var(--r-sm); }

/* — Tabs / Segmented — */
.u-seg { display: inline-flex; background: var(--n-100); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.u-seg button {
    padding: 5px 12px; border: none; background: transparent; border-radius: var(--r-sm);
    font: 500 var(--fs-sm)/1.4 inherit; color: var(--text-2); cursor: pointer; transition: all var(--t);
}
.u-seg button:hover { color: var(--text); }
.u-seg button[aria-selected=true] { background: var(--n-0); color: var(--b-600); box-shadow: var(--sh-sm); }

.u-navitem {
    display: flex; align-items: center; gap: var(--s-2); padding: 8px 14px;
    font-size: var(--fs-base); color: var(--text-2);
    border-left: 3px solid transparent; cursor: pointer; transition: all var(--t);
    text-decoration: none; background: none;
    border-top: none; border-right: none; border-bottom: none;
    width: 100%; text-align: left;
}
.u-navitem:hover { background: var(--bg-sunken); color: var(--text); }
.u-navitem.is-active {
    background: var(--b-50); color: var(--b-600);
    border-left-color: var(--b-500); font-weight: 500;
}
.u-navitem > i.bi { width: 18px; text-align: center; font-size: var(--fs-base); opacity: .85; flex-shrink: 0; }