/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR — flache Kernnavigation (Desktop)
   ────────────────────────────────────────────────────────────────────────────
   Aufbau: Kopf (Logo) · Objektkontext · Kernnavigation (scrollt) · fester Fuß
           (Verwaltung + Benutzer). „+ Neu" und die globale Suche stehen im HEADER
           — bewusst nicht zusätzlich in der Sidebar (kein doppelter Bedienweg).
   Nur .nav scrollt — Kopf, Objektkontext und Fuß bleiben fixiert,
   damit die Sidebar auch bei ~700 px Fensterhöhe bedienbar bleibt.
   Verhalten: public/app.js (renderSidebarNav · _navToggleModuleDrawer)
   ════════════════════════════════════════════════════════════════════════════ */

/* Kopf/Objektkontext/Fuß fix — nur die Modulliste scrollt */
.sidebar .sidebar-head,
.sidebar .onv-sb-wrap,
.sidebar .sidebar-footer { flex: 0 0 auto; }
/* ── SCROLLBEREICH DER MODULLISTE ────────────────────────────────────────────
   Die Schale hat GENAU DREI Teile: ein kleiner fester Kopf (Logo + Objektkontext),
   die scrollende Modulliste, ein kleiner fester Fuß (Hilfe + Benutzer). Kopf und
   Fuß sind bewusst knapp — jedes Pixel dort fehlt der Liste.

   Die Scrollkante ist WEICH: oben und unten blendet die Liste über 20 px aus.
   Vorher schnitt sie hart ab, sodass ein halber Modulname („Energie") unter dem
   Objektkontext klebte und wie ein Darstellungsfehler aussah. Die Maske läuft nur,
   wenn wirklich gescrollt werden kann (`.has-scroll`, gesetzt in app.js). */
.sidebar .nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* `overflow-x: hidden` würde den weißen Ausläufer des aktiven Punktes an der
     rechten Kante abschneiden — genau die Verbindung zum Arbeitsbereich, die ihn
     lesbar macht. `clip` mit Achsenausnahme lässt ihn stehen und verhindert
     trotzdem waagerechtes Scrollen. */
  overflow-x: clip;
  overflow-clip-margin: var(--space-2, 8px);
  padding: var(--space-1, 4px) var(--space-2, 8px) var(--space-2, 8px);
  /* KEINE sichtbare Scrollbar und KEIN reservierter Streifen (17.08.2026).
     Ein Balken am rechten Rand zerschneidet genau die Kante, an der der aktive
     Punkt in den Arbeitsbereich übergeht — und ein `scrollbar-gutter` nimmt der
     Beschriftung dauerhaft Breite weg, auch wenn gar nicht gescrollt werden kann.
     Die Scrollbarkeit zeigt stattdessen die weiche Kante (Maske unten): dort, wo
     noch etwas folgt, blendet die Liste aus. Gescrollt wird mit Rad, Trackpad,
     Tastatur (die Liste ist fokussierbar) — alle Wege bleiben erhalten. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar .nav::-webkit-scrollbar { width: 0; height: 0; }
.sidebar .nav.has-scroll {
  --nav-fade: 20px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--color-black) var(--nav-fade),
                      var(--color-black) calc(100% - var(--nav-fade)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, var(--color-black) var(--nav-fade),
                      var(--color-black) calc(100% - var(--nav-fade)), transparent 100%);
}
/* Am Anfang bzw. Ende der Liste blendet nur die Seite aus, an der noch etwas kommt. */
.sidebar .nav.has-scroll.at-top {
  -webkit-mask-image: linear-gradient(to bottom, var(--color-black) calc(100% - var(--nav-fade)), transparent 100%);
          mask-image: linear-gradient(to bottom, var(--color-black) calc(100% - var(--nav-fade)), transparent 100%);
}
.sidebar .nav.has-scroll.at-bottom {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--color-black) var(--nav-fade));
          mask-image: linear-gradient(to bottom, transparent 0, var(--color-black) var(--nav-fade));
}


/* ── D) Kernnavigation: flach, gleiche Zeilenhöhe, genau EIN aktiver Punkt ──
   Jeder Modulpunkt ist ein <button> (Tastatur + Screenreader out of the box).

   AKTIVER ZUSTAND (Redesign 16.08.2026): Der aktive Punkt ist eine WEISSE Fläche
   mit grüner Schrift — der einzige weiße Block in der ganzen Navigationsfläche und
   damit auf jedem Screenshot sofort auffindbar. Der frühere schmale Farbbalken am
   linken Rand entfällt: zwei Indikatoren für denselben Zustand sind einer zu viel.
   Bewusst KEIN Farbwechsel des Fließtextes für Hover — Hover ist eine Fläche,
   Aktiv ist eine andere Fläche; die Bedeutung liegt in der Fläche, nicht in Farbe. */
.sidebar .nav-item {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 42px; padding: 0 13px;
  border: none; background: transparent; text-align: left;
  border-radius: var(--radius-lg, 12px);
  color: var(--sb-text, rgba(255,255,255,.92));
  font-family: inherit;
  /* 14 px, nicht 15: bei 15 px brach „Dokumente & Kommunikation" mit
     Auslassungspunkten ab — ein Modulname darf nie unvollständig dastehen. */
  font-size: var(--text-md, 14px); font-weight: var(--fw-medium, 500);
  letter-spacing: -0.005em;
  cursor: pointer; position: relative;
  transition: background 130ms ease, color 130ms ease;
}
/* LUFT ZWISCHEN DEN PUNKTEN (17.08.2026, Nutzerwunsch nach der Referenz).
   Vorher lagen die Modulpunkte 2 px auseinander — die Navigation las sich als
   EIN Block Text, in dem man die Zeile suchen musste. Jeder Punkt ist jetzt ein
   eigenes Ziel.
   WARUM 6 UND NICHT 13 PX (wie in der Vorlage): die Vorlage hat sechs Menüpunkte,
   VICore elf plus drei Abschnitts-Überschriften. Bei 10 px Abstand rutschten
   „Auswertungen" und „Administration" bei 900 px Fensterhöhe unter die Scrollkante —
   zwei Bereiche wären nur noch durch Scrollen auffindbar gewesen. 6 px geben dem
   Raster dreimal so viel Luft wie vorher und halten alle elf Bereiche sichtbar.
   Wer den Abstand erhöht, muss vorher prüfen, ob die Liste noch vollständig passt —
   `node /tmp/navcheck` bzw. die Prüfung in Schritt 4 misst das. */
.sidebar .nav-item + .nav-item { margin-top: 5px; }
.sidebar .nav-item:hover { background: var(--sb-hover, rgba(255,255,255,.10)); color: var(--nav-text-strong, #fff); }
.sidebar .nav-item:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: -2px; box-shadow: none; }

/* AKTIVER PUNKT — läuft bis an die RECHTE KANTE der Navigationsfläche und
   verschmilzt dort mit dem weißen Arbeitsbereich (Prinzip der Referenz).
   Dadurch ist der aktive Bereich nicht nur markiert, sondern optisch mit dem
   Inhalt VERBUNDEN: die Navigation zeigt, wo man ist, und der weiße Ausläufer
   sagt, wohin dieser Punkt führt. Deshalb nur links gerundet — eine Rundung
   rechts würde die Verbindung wieder aufschneiden. */
.sidebar .nav-item.active {
  background: var(--sb-active-bg, #fff);
  color: var(--sb-active-text, var(--green-700, #0F5C42));
  font-weight: var(--fw-semibold, 600);
  width: calc(100% + var(--space-2, 8px) + 1px);
  margin-right: calc(-1 * (var(--space-2, 8px) + 1px));
  border-radius: var(--radius-lg, 12px) 0 0 var(--radius-lg, 12px);
  box-shadow: none;
}
.sidebar .nav-item.active .nav-icon { opacity: 1; }
.sidebar .nav-item .nav-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: .95; }
.sidebar .nav-item .nav-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .nav-sep { height: 1px; margin: 10px 4px; background: var(--sb-border, rgba(255,255,255,.13)); }
.sidebar .nav-item.active .nav-more-count { background: var(--green-50, #EDF7F2); color: inherit; }
.sidebar .nav-item-more.is-open { background: var(--sb-hover, rgba(255,255,255,.12)); }

/* Zähler/Badges am Modulpunkt: ruhig, tabellarisch, nie schreiend. */
.sidebar .nav-item .nav-badge {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: rgba(255,255,255,.18); color: inherit;
  font-size: var(--text-xxs); font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums;
}
.sidebar .nav-item.active .nav-badge { background: var(--green-100, #D8EEE3); color: var(--green-700, #0F5C42); }

/* ── F) Fester Fußbereich: Verwaltung + Benutzerprofil ────────────────────────
   Visuell vom Arbeitsbereich abgesetzt (eigene Trennlinie, ruhigerer Ton). */
/* FESTER FUSS — EINE Zeile: Benutzer links, Hilfe als Symbolknopf rechts.
   Vorher waren es drei Blöcke übereinander (Hilfe als volle Menüzeile, Profilzeile,
   Versionszeile) — zusammen 139 px, die der Modulliste fehlten. Die Version steht
   jetzt im Profilmenü, Hilfe braucht nur ihr Symbol. */
.sidebar .sidebar-footer {
  /* `flex-direction: row` ausdrücklich: style.css setzt für den Fuß `column`.
     Ohne diese Angabe stünde der Hilfe-Knopf UNTER der Benutzerzeile und der Fuß
     wäre wieder zweizeilig — genau das, was hier abgeschafft wird. */
  display: flex; flex-direction: row; align-items: center; gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border-top: 1px solid var(--sb-border, rgba(255,255,255,.13));
  background: var(--nav-bg-deep, transparent);
}
.sidebar .sidebar-footer .sb-user { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.sidebar .sidebar-footer .sb-foot-nav { flex: 0 0 auto; order: 2; }
.sidebar .sidebar-footer .sb-foot-actions { display: none; }
/* Hilfe im Fuß: nur Symbol. Die Beschriftung steht im Tooltip und im Screenreader. */
.sb-foot-nav .nav-item {
  min-height: 38px; width: 38px; padding: 0; justify-content: center; gap: 0;
  border-radius: var(--radius-md, 8px);
}
.sb-foot-nav .nav-item .nav-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sb-foot-nav .nav-item + .nav-item { margin-top: 0; margin-left: 4px; }

/* Benutzerprofil = eigener Fußpunkt mit kleinem Menü (Profil · Signatur · Abmelden) */
.sb-profile { position: relative; }
.sb-profile-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 40px; padding: 3px 8px;
  border: none; border-radius: var(--radius-md, 8px);
  background: transparent; color: var(--sb-text, rgba(255,255,255,.86));
  font-family: inherit; font-size: var(--text-md, 14px); text-align: left; cursor: pointer;
}
.sb-profile-btn:hover { background: var(--sb-hover, rgba(255,255,255,.10)); }
.sb-profile-btn:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: -2px; box-shadow: none; }
.sb-profile-av {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.18); color: var(--nav-text-strong, #fff);
  font-size: var(--text-xxs); font-weight: var(--fw-semibold, 600); letter-spacing: .02em;
}
.sb-profile-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-profile-name { font-weight: var(--fw-medium, 500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-profile-role { font-size: var(--text-xs, 11.5px); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-profile-chev { flex: 0 0 auto; width: 14px; height: 14px; opacity: .6; }
.sb-profile-menu {
  display: none; position: absolute; left: 4px; right: 4px; bottom: calc(100% + 6px);
  z-index: 70; padding: 5px;
  background: var(--color-surface, #fff); color: var(--gray-900);
  border: 1px solid var(--gray-300, #D8DFDC); border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-pop, var(--shadow-md));
}
.sb-profile.is-open .sb-profile-menu { display: block; }
.sb-profile-mi {
  /* justify-content ausdrücklich: design-system.css zentriert Buttons global. */
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; min-height: 36px; padding: 0 10px;
  border: none; border-radius: var(--radius-sm, 6px);
  background: transparent; color: inherit;
  font-family: inherit; font-size: var(--text-sm, 13.5px); text-align: left; cursor: pointer;
}
.sb-profile-mi-ic {
  flex: 0 0 15px; width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center; opacity: .65;
}
.sb-profile-mi-ic svg { display: block; }
.sb-profile-mi:hover .sb-profile-mi-ic { opacity: 1; }
.sb-profile-mi:hover { background: var(--gray-100); }
.sb-profile-mi:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sb-profile-sep { height: 1px; margin: 4px 6px; background: var(--gray-100); }

/* Version im Profilmenü (nicht mehr als Dauerzeile im Fuß). */
.sb-profile-ver {
  padding: 6px 10px 2px; text-align: left;
  font-size: var(--text-xxs, 11px); color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

/* Dauerhaft sichtbare Versionszeile im Fuß (Nutzerentscheidung 18.08.2026):
   der ausgelieferte Stand muss auf einen Blick erkennbar sein. */
.sb-version {
  margin: 3px 4px 0; text-align: center;
  font-size: var(--text-xxs, 11px); opacity: .62;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  user-select: text;
}

/* ── Eingeklappte Sidebar (Icon-Rail): 68 px, nur Icons + Tooltips ───────── */
@media (min-width: 1024px) {
  .sidebar.is-collapsed { width: 68px; }
  /* WICHTIG: Der Ausklapp-Knopf MUSS im Icon-Modus sichtbar bleiben — sonst gibt es
     keinen Weg zurück (die alte Regel in style.css blendet ihn aus). Kopf wird
     zweizeilig: Logo oben, Knopf darunter (Chevron zeigt nach rechts = ausklappen). */
  .sidebar.is-collapsed .sidebar-head { flex-direction: column; gap: 6px; padding: 14px 0 10px; }
  /* Icon-Leiste: nur das Bildzeichen bleibt — die Markenfläche schrumpft mit auf ein
     quadratisches Plättchen und darf die 68 px nicht sprengen. */
  .sidebar.is-collapsed .logo { padding: 7px; }
  .sidebar.is-collapsed .sidebar-collapse-btn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 34px; height: 30px;
    border-radius: var(--radius-sm, 6px);
  }
  .sidebar.is-collapsed .sidebar-collapse-btn svg { transform: scaleX(-1); }
  .sidebar.is-collapsed .nav-more-count { display: none; }
  .sidebar.is-collapsed .nav { padding-left: 6px; padding-right: 6px; }
  .sidebar.is-collapsed .nav-item { justify-content: center; padding: 0; }
  /* Icon-Leiste: kein Ausläufer nach rechts — dort gibt es keine Beschriftung,
     mit der sich die Verbindung zum Inhalt erklären würde. */
  .sidebar.is-collapsed .nav-item.active {
    width: 100%; margin-right: 0; border-radius: var(--radius-lg, 12px);
  }
  .sidebar.is-collapsed .nav-item .nav-text { display: none; }
  .sidebar.is-collapsed .nav-item .nav-badge { display: none; }
  /* Benutzerprofil im Icon-Modus: nur Avatar, Menü klappt weiterhin auf */
  .sidebar.is-collapsed .sb-profile-btn { justify-content: center; padding: 4px 0; }
  .sidebar.is-collapsed .sb-profile-main,
  .sidebar.is-collapsed .sb-profile-chev { display: none; }
  .sidebar.is-collapsed .sb-profile-menu { left: 4px; right: auto; width: 232px; }
  .sidebar.is-collapsed .sb-version { display: none; }
}

/* ── Abschnitts-Überschriften der Kernnavigation (reine visuelle Gruppen) ─────
   HAUPTNAVIGATION · AUSWERTUNG · ADMINISTRATION. Nicht interaktiv, KEIN Akkordeon.
   Eigene Klasse `nav-grouphead` (NICHT `.nav-label` — das trägt Alt-Styles der
   früheren Akkordeon-Navigation: Chevron, Hover). */
.sidebar .nav-grouphead {
  display: flex; align-items: center;
  /* Kompakt gehalten: die Luft gehört den Modulpunkten, nicht den Überschriften.
     Jede Überschrift kostet Platz, den sonst ein ganzer Bereich bräuchte. */
  padding: 12px 13px 4px;
  font-size: var(--text-xxs, 11px); font-weight: var(--fw-semibold, 600);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sb-faint, rgba(255,255,255,.74));
  user-select: none; pointer-events: none;
}
.sidebar .nav > .nav-grouphead:first-child { padding-top: 4px; }
.sidebar .nav-grouphead-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .sidebar-footer .nav-grouphead { padding: 8px 12px 4px; }

/* ── Dienstprogramme im Fuß (Feedback · Hilfe & Support · Einstellungen) ─────
   Nutzen dieselbe .nav-item-Optik, etwas ruhiger als die Hauptmodule. */
.sidebar .sb-foot-actions { margin-top: 2px; }
.sidebar .sb-foot-actions .nav-item { min-height: 38px; opacity: .9; }
.sidebar .sb-foot-actions .nav-item:hover { opacity: 1; }

/* ── Eingeklappter Icon-Modus: Gruppen-Überschrift → schmaler Trenner ──────── */
@media (min-width: 1024px) {
  .sidebar.is-collapsed .nav-grouphead { padding: 9px 12px 8px; pointer-events: none; }
  .sidebar.is-collapsed .nav-grouphead .nav-grouphead-text {
    display: block; width: 100%; height: 1px; text-indent: -9999px; overflow: hidden;
    background: var(--sb-border, rgba(255,255,255,.16)); border-radius: 1px;
  }
  /* Dienstprogramme klappen wie die Module zu Icon-only (Regeln oben greifen bereits). */
}

/* ════════════════════════════════════════════════════════════════════════════
   NAVIGATIONSFLÄCHE (Redesign 16.08.2026)
   ────────────────────────────────────────────────────────────────────────────
   Die Hauptnavigation ist eine eigene, durchgehende Fläche — kein heller Streifen
   mit Rahmen. Sie trennt sich vom Arbeitsbereich durch FARBE, nicht durch eine
   Linie; deshalb entfällt der rechte Rahmen. Kopf und Fuß sitzen eine Spur tiefer
   im Ton, damit die scrollende Modulliste dazwischen als eigener Bereich lesbar
   bleibt, ohne dass irgendwo eine Kante gezeichnet werden muss.
   ════════════════════════════════════════════════════════════════════════════ */
.sidebar { border-right: 0; }

.sidebar .sidebar-head {
  padding: 18px 14px 12px;
  background: var(--nav-bg-deep, transparent);
}

/* ── MARKENFLÄCHE (17.08.2026, Nutzerwunsch) ──────────────────────────────────
   Das Logo stand direkt auf der dunkelgrünen Navigationsfläche. Damit es dort
   überhaupt sichtbar blieb, wurde es umgefärbt (Dächer 60 % Weiß, Kern in hellem
   Akzentgrün) — es verlor dadurch genau die Farbabstufung, die das Zeichen ausmacht:
   drei Häuser in zwei Tönen wurden zu drei Häusern in fast einem Ton. Genau dieses
   „verwaschen" war der Befund.

   Statt das Logo weiter der Fläche anzupassen, bekommt es jetzt SEINE Fläche:
   eine helle Platte im Navigationskopf. Darauf steht das Logo in den ORIGINALFARBEN
   (Dächer --gray-400 var(--gray-400), Kern --green-600 var(--green-600), Wortmarke in Forest/Grün) —
   also so, wie es gestaltet wurde. Das gilt auch für hochgeladene Mandantenlogos
   (`img.vi-brand-logo-img`), die fast immer für helle Untergründe gezeichnet sind.

   Abgrenzung zum aktiven Navigationspunkt (der ebenfalls hell ist): der ist ein
   Block über die volle Breite mit grüner Beschriftung, die Markenfläche ist eine
   schmale, nur so breite Platte wie die Marke selbst und trägt nie einen Zustand. */
.sidebar .logo {
  display: inline-flex; align-items: center;
  padding: 7px 12px;
  border-radius: var(--radius-md, 8px);
  background: var(--nav-brand-plate, #FFFFFF);
  /* Kein Schatten: die Platte schwebt nicht, sie ist eine Fläche (Designregel
     „Schatten nur für Schwebendes"). Die feine Kante trennt sie bei hellem
     Mandanten-Branding von der Navigationsfläche. */
  box-shadow: inset 0 0 0 1px rgba(10, 85, 57, .08);
}
.sidebar .logo-lockup { gap: 9px; }

/* Originalfarben des Bildzeichens — dieselben Werte wie im SVG-Fallback (index.html). */
.sidebar .logo-mark .logo-roof { fill: var(--gray-400, #A6B0AC); }
.sidebar .logo-mark .logo-core { fill: var(--green-600, #147352); }
/* Wortmarke: „VI" im dunklen Marken-Ink, „Core" im Markengrün — die Abstufung, die
   auf dem grünen Grund nicht darstellbar war. */
.sidebar .logo-company { color: var(--color-forest, #0F5C40); font-size: 20px; letter-spacing: -.025em; }
.sidebar .logo-company .lc-accent { color: var(--green-600, #147352); }
/* Hochgeladenes Mandantenlogo sitzt auf derselben Platte. */
.sidebar .logo img.vi-brand-logo-img { display: block; }
.sidebar .sidebar-collapse-btn { color: var(--nav-text-muted, rgba(255,255,255,.74)); border-radius: var(--radius-md, 8px); }
.sidebar .sidebar-collapse-btn:hover { background: var(--nav-hover, rgba(255,255,255,.10)); color: var(--nav-text-strong, #fff); }

/* Objektkontext = Zustand, nicht Ziel. Er darf deshalb NICHT wie der aktive
   Modulpunkt aussehen (weiße Fläche) — sonst gibt es zwei „aktive" Blöcke
   übereinander und die Navigation verliert ihre eindeutige Ortsangabe. */
.sidebar .onv-sb-wrap { background: var(--nav-bg-deep, transparent); padding: 0 12px 12px; }
.sidebar .onv-card {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.09);
  padding: 9px 10px;
}
.sidebar .onv-card:hover,
.sidebar .onv-card.is-open {
  background: rgba(255,255,255,.17);
  border-color: rgba(255,255,255,.28);
  color: var(--nav-text-strong, #fff);
}
.sidebar .onv-card-over, .sidebar .onv-card-scope { color: var(--nav-text-muted, rgba(255,255,255,.74)); }
.sidebar .onv-card-clear {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.09);
  color: var(--nav-text-muted, rgba(255,255,255,.74));
}
.sidebar .onv-card-clear:hover { background: rgba(255,255,255,.2); color: var(--nav-text-strong, #fff); border-color: transparent; }