/* wepa-manager — Minimale Ergaenzungen zu Tabler v1.4.0
 * Richtwert: max. 150 Zeilen. Jede Regel mit Kommentar warum keine Tabler-Klasse passt.
 */

/* Public Pages (Landing, Login): horizontalen Overflow verhindern —
   .row negative Margins und shadow-lg koennen auf Mobile ueber den Viewport ragen */
.page-public {
  overflow-x: hidden;
}

/* Public Pages: Container-Padding auf Mobile erhoehen — 0.75rem (Tabler-Default) ist
   fuer Landing-Content zu knapp, 1.25rem gibt 20px Seitenabstand */
@media (max-width: 767.98px) {
  .page-public .container-xl {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Landing-Navbar Collapse Mobile: volle Viewport-Breite — Tabler/Bootstrap collapse erbt
   Container-Padding, weisser Hintergrund endet daher vor dem Viewport-Rand */
@media (max-width: 767.98px) {
  .page-public #navbar-menu {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 1rem;
  }
}

/* Landing-Navbar Logo: fixe Hoehe — kein Bootstrap-Utility fuer rem-basierte Hoehe */
.landing-logo {
  height: 1.8rem;
  margin-top: 0.2rem;
}
@media (min-width: 768px) {
  .landing-logo {
    height: 2rem;
  }
}

/* Landing Hero-Titel: responsive font-size + line-height — Bootstrap hat keine responsive Display-Klassen (display-lg-5 etc.).
   DM Serif Display braucht mehr Zeilenabstand als die Default-1.2 bei Umbruch */
.hero-title {
  font-size: 1.75rem;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 3rem;
  }
}

/* Auth-Logo: max-width 60% — kein Bootstrap-Utility vorhanden */
.auth-logo {
  max-width: 60%;
}

/* Sidebar-Navbar: min-height begrenzen — Tabler setzt keine explizite min-height */
.navbar {
  min-height: 4rem;
  --tblr-navbar-active-bg: var(--tblr-active-bg);
}

/* Navbar-Logo: Padding + max-width — Tabler hat keinen Utility fuer Logo-Sizing in Sidebar */
.navbar-logo {
  padding: .5rem calc(var(--tblr-page-padding));
  padding-top: 0.4rem;
  padding-bottom: 0.8rem;
  max-width: 80%;
}


/* Page-Header: min-height erhoehen — Tabler default 2.25rem zu kompakt fuer das Layout */
.page-header {
  min-height: 4.6rem;
}

/* Formular-Sektionsgruppe — Seitenhintergrund fuer visuelle Gruppierung auf weisser Card */
.form-section {
  background-color: var(--tblr-body-bg);
}

/* Filter-Tabs: weisser Hintergrund — btn-outline-secondary ist transparent,
   Seiten-Hintergrund scheint durch. Rundung passend zu btn-sm. */
.btn-group[role="group"] {
  background-color: #ffffff;
  border-radius: var(--tblr-border-radius);
}
[data-bs-theme="dark"] .btn-group[role="group"] {
  background-color: var(--tblr-bg-surface);
}

/* Filter-Tab Count-Badges: eigene Klasse statt bg-secondary-lt, da Tabler-Utility !important
   verwendet und bei Button-Hover nicht ohne !important ueberschrieben werden kann */
.badge-tab-count {
  background-color: rgba(var(--tblr-secondary-rgb), 0.1);
  color: var(--tblr-secondary);
}
.btn-outline-secondary:hover .badge-tab-count,
.btn-outline-secondary:focus .badge-tab-count {
  background-color: var(--tblr-gray-200);
  color: var(--tblr-secondary);
}

/* Card > table-responsive: Ecken-Rundung erben — Tabler 1.4.0 setzt kein border-radius
   auf .table-responsive, daher weisse Ecken-Luecke bei Tabellen in Cards.
   overflow-x: auto (Tabler-Default) clippt Inhalte automatisch auf die gerundete Form. */
.card > .table-responsive:first-child {
  border-top-left-radius: var(--tblr-card-inner-border-radius);
  border-top-right-radius: var(--tblr-card-inner-border-radius);
}
.card > .table-responsive:last-child {
  border-bottom-left-radius: var(--tblr-card-inner-border-radius);
  border-bottom-right-radius: var(--tblr-card-inner-border-radius);
}

/* Top-Navbar Suche: min/max-width — kein Tabler-Utility fuer flexible Suchfeld-Breite */
#topnav-search-wrapper {
  min-width: 160px;
  max-width: 400px;
  flex: 1;
}

/* Top-Navbar Recents: min-width:0 erlaubt Flex-Shrink, overflow:hidden verhindert
   Flash von Overflow-Items bevor JS die Priority-Plus-Verteilung durchfuehrt */
#topnav-recents {
  min-width: 0;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow: hidden;
}

/* Suchfeld Ergebnis-Dropdown — breiter als Suchfeld, rechtsbuendig (erweitert nach links) */
.topnav-search-results {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1000;
  min-width: 500px;
  max-width: 600px;
}

/* Webfont-Icons in Navigation: Tabler nutzt SVGs mit icon-Klasse (1.25rem), Webfont erbt nur body font-size */
.nav-link-icon .ti {
  font-size: 1.1rem;
}
.navbar-nav .nav-link > .ti {
  font-size: 1.1rem;
}
.dropdown-item-icon.ti {
  font-size: 1.1rem;
}

/* Icon-only Buttons: Webfont-Icons groesser — Tabler setzt icon-size nur fuer .icon (SVG), nicht fuer .ti (Webfont) */
.btn-icon .ti {
  font-size: 1.2rem;
}

/* Avatar Webfont-Icons: Tabler setzt avatar-icon-size nur fuer SVG (.icon),
   Webfont-Icons erben stattdessen die zu kleine avatar-font-size (Initialen-Groesse) */
.avatar .ti {
  font-size: var(--tblr-avatar-icon-size);
}

/* Empty-State Icons: Tabler setzt icon-size nur fuer SVG, Webfont erbt zu kleine body font-size */
.empty-icon .ti {
  font-size: 3rem;
  color: var(--tblr-gray-300);
}

/* Navbar Dark Mode — Tabler-Selektoren matchen nur body[data-bs-theme] oder .navbar[data-bs-theme],
   nicht html[data-bs-theme]. Wir setzen das Attribut auf <html>, daher hier die fehlende Bruecke. */
[data-bs-theme="dark"] .navbar {
  --tblr-navbar-color: rgba(255, 255, 255, 0.7);
  --tblr-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --tblr-navbar-active-color: #ffffff;
  --tblr-navbar-brand-color: #ffffff;
}

/* Logo-Umschaltung Dark Mode — dediziertes weisses Logo statt CSS-Filter */
.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: block; opacity: 0.7; }

/* Formular-Sektionen im Dark Mode — tblr-gray-100 ist im Dark Mode zu hell */
[data-bs-theme="dark"] .form-section {
  background-color: var(--tblr-bg-surface-secondary);
}

/* Dark Mode Farbvariablen aufhellen — Tabler passt text-{color} und bg-{color}-lt
   Utility-Klassen nicht automatisch an, Light-Mode-Werte (#066fd1 etc.) sind auf
   #111827 schlecht lesbar. Alle Werte WCAG AA (4.5:1 Kontrast) gegen #1f2937. */
[data-bs-theme="dark"] {
  --tblr-blue: #4da3ff;
  --tblr-blue-rgb: 77, 163, 255;
  --tblr-green: #51cf66;
  --tblr-green-rgb: 81, 207, 102;
  --tblr-red: #ff6b6b;
  --tblr-red-rgb: 255, 107, 107;
  --tblr-yellow: #ffd43b;
  --tblr-yellow-rgb: 255, 212, 59;
  --tblr-purple: #cc5de8;
  --tblr-purple-rgb: 204, 93, 232;
  --tblr-orange: #ff922b;
  --tblr-orange-rgb: 255, 146, 43;
}

/* Badge-Outline im Dark Mode: leichter Hintergrund-Tint — transparent + farbiger Text
   hat auf dunklem Grund zu wenig Kontrast */
[data-bs-theme="dark"] .badge-outline {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* bg-*-lt Badges im Dark Mode: Text auf aufgehellte Variante setzen — Tabler invertiert
   den Text dunkel auf hellem Hintergrund, was im Dark Mode schlecht lesbar ist */
[data-bs-theme="dark"] .bg-yellow-lt { color: var(--tblr-yellow); }
[data-bs-theme="dark"] .bg-red-lt { color: var(--tblr-red); }
[data-bs-theme="dark"] .bg-green-lt { color: var(--tblr-green); }
[data-bs-theme="dark"] .bg-blue-lt { color: var(--tblr-blue); }
[data-bs-theme="dark"] .bg-purple-lt { color: var(--tblr-purple); }
[data-bs-theme="dark"] .bg-orange-lt { color: var(--tblr-orange); }
[data-bs-theme="dark"] .bg-cyan-lt { color: var(--tblr-cyan, #15aabf); }

/* Tabellen-Borders im Dark Mode: Tabler translucent borders (rgba 0.14) sind
   auf dunklem Hintergrund kaum sichtbar — erhoehen auf opaken Wert */
[data-bs-theme="dark"] .table {
  --tblr-table-border-color: var(--tblr-border-color);
}

/* bg-light Alternative fuer Dark Mode: Light Mode = normales bg-light Verhalten,
   Dark Mode = dunkle Surface-Farbe statt hartkodiertem Grau */
.bg-light-dm {
  background-color: var(--tblr-gray-100);
}
[data-bs-theme="dark"] .bg-light-dm {
  background-color: var(--tblr-bg-surface-secondary) !important;
}

/* Assistant Sidebar — Tabler Offcanvas ersetzt durch eigene fixed Sidebar, da Offcanvas
   modal-artig ist (Backdrop, Seite deaktiviert) und nicht fuer persistente Nutzung geeignet */
#assistant-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  z-index: 1040;
  background: var(--tblr-bg-surface);
  border-left: 1px solid var(--tblr-border-color);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
body.assistant-open #assistant-sidebar {
  transform: translateX(0);
}
/* Content zusammenschieben wenn Sidebar offen — nur Desktop */
@media (min-width: 992px) {
  body.assistant-open {
    padding-right: 380px;
    transition: padding-right 0.3s ease;
  }
  body:not(.assistant-open) {
    transition: padding-right 0.3s ease;
  }
}
/* Assistant Sidebar auf Tablets schmaeler — 380px nimmt zu viel vom
   Content-Bereich weg wenn Viewport unter 1200px */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #assistant-sidebar {
    width: 304px;
  }
  body.assistant-open {
    padding-right: 304px;
  }
}
/* Dashboard: Grosse Content-Cards stacken bei offener Assistant-Sidebar —
   Bootstrap-Grid reagiert auf Viewport, nicht auf verfuegbaren Platz.
   Nur col-lg-4/8 (Content-Sections), nicht col-lg-3 (KPI-Cards). */
@media (max-width: 1399.98px) {
  body.assistant-open .row-deck > .col-lg-4,
  body.assistant-open .row-deck > .col-lg-8 {
    width: 100%;
    flex: 0 0 100%;
  }
}
/* Trigger-Button verstecken wenn Sidebar offen */
body.assistant-open #assistant-trigger {
  display: none !important;
}

/* Assistant Typing-Animation — kein Tabler-Utility fuer animierte Punkte */
.animated-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Assistant Chat-Widget: Textarea Auto-Height — kein Tabler-Utility fuer resize:none + overflow:hidden */
#assistant-input {
  resize: none;
  overflow: hidden;
}

/* Assistant Markdown: Kompakte Absaetze in Chat-Bubbles — Tabler/Bootstrap p-Margin (1rem) ist zu gross fuer Chat */
.assistant-markdown p { margin-bottom: 0.4em; }
.assistant-markdown p:last-child { margin-bottom: 0; }
.assistant-markdown ul, .assistant-markdown ol { margin-bottom: 0.4em; padding-left: 1.25em; }
.assistant-markdown li { margin-bottom: 0.15em; }
.assistant-markdown a { color: var(--tblr-primary); text-decoration: underline; }
.assistant-markdown strong { font-weight: 600; }

/* Assistant Suggestion-Badges — Tabler badge-outline hat keinen hover-state */
.assistant-suggestion,
.assistant-new-chat {
  cursor: pointer;
  transition: background-color 0.15s;
}
/* Truncation fuer lange Vorschlagstexte — kein Tabler-Utility fuer ellipsis auf flex-item Badges */
.assistant-suggestion {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistant-suggestion:hover {
  background-color: var(--tblr-bg-surface-secondary);
}
/* Dismiss-Button — nur bei Hover sichtbar, oben-links am Badge */
.assistant-suggestion-dismiss {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: var(--tblr-secondary);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.assistant-suggestion-wrapper:hover .assistant-suggestion-dismiss {
  opacity: 1;
}

/* Sidebar Active-State: Font-Weight erhoehen — Tabler setzt nur Farbe + linken Rand,
   font-weight bleibt bei 400. Mit 600 wird der aktive Menuepunkt deutlicher erkennbar. */
.navbar-nav .nav-item.active > .nav-link {
  font-weight: 600;
}

/* Navbar-Badge Inline-Position — Tabler setzt position:absolute + transform fuer Notification-Dots,
   wir wollen das Badge inline neben dem Menuetitel anzeigen */
.navbar .navbar-nav .nav-link .badge {
  position: static;
  transform: none;
}

/* code-Element: Padding + Hintergrund + Farbe zuruecksetzen - Tabler hinterlegt <code>
   sonst grau und mit Akzent-Farbe, was bei ISIN/WKN/Kontonummern in Tabellen wie
   ein Badge wirkt. Ziel: nur Monospace-Schrift, kein visuelles Gewicht. */
code {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/* Copy-Button (ISIN, WKN, etc.): Icon verkleinert + Hover — kein Tabler-Utility fuer 0.85em Icon-Size mit Cursor */
.copy-btn { font-size: 0.85em; cursor: pointer; color: var(--tblr-secondary); }
.copy-btn:hover { color: var(--tblr-primary); }
.isin-copy { white-space: nowrap; }

/* Icon-only Badges (Quellen-Spalte): gleiche Padding alle Seiten —
   Tabler badge padding (0.25em 0.5em) ist fuer Text optimiert, Icon-only braucht quadratisch */
.badge-icononly {
  padding: 0.35em;
  line-height: 1;
}

/* Kompakte Icon-Badges in Datagrid-Titeln — rem statt em, damit Badge-Groesse
   nicht von der kleinen Parent-Font-Size (0.75rem) kaskadiert wird */
.datagrid-title .badge-icononly {
  padding: 0.2rem;
  vertical-align: 1px;
  font-size: 0.75rem;
}

/* Cross-Menu-Icons verkleinert nach Linktext — kein Tabler-Utility fuer Icon-Skalierung unter 1rem */
.ti-xs { font-size: 0.9em; }

/* Sidebar-Dropdowns: aktive/hover-Hintergruende bis zum Menuerand ziehen —
   Tabler v1.4 setzt horizontal Padding auf .dropdown-menu und border-radius auf
   .dropdown-item, was den Hintergrund "eingezogen" wirken laesst. Diese Regel
   ueberschreibt das fuer alle Dropdowns innerhalb der vertikalen Sidebar. */
.navbar-vertical .dropdown-menu {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;  /* verhindert dass Item-Hintergrund in den Menue-Border-Radius ragt */
}

.navbar-vertical .dropdown-menu .dropdown-item {
  border-radius: 0;
}

/* Item-Stretching: Chrome behandelt <button> mit display:flex als intrinsic-sized,
   wodurch width:100% aus CSS nicht greift (siehe Tabler .dropdown-item Regel).
   Loesung: alle Wrapper-Ebenen zwischen .dropdown-menu und den Items als
   Flex-Column setzen — Flex-Items werden per Default via align-items:stretch
   auf 100% der Cross-Axis gestretcht, unabhaengig vom Button-Sizing.
   Betrifft die verbleibenden Sidebar-Dropdowns mit .dropdown-menu-Klasse
   (Datenquellen, Auswertung). Depot-Scope, Mandant- und Impersonation-Switcher
   nutzen eigenes .dsm-*-Styling und sind hiervon nicht betroffen.
   WICHTIG: Nur auf .show-Zustand fuer den Menu-Container selbst anwenden, sonst
   wuerde Tablers display:none (geschlossener Zustand) ueberschrieben und das
   Menu waere permanent offen. Innere Wrapper duerfen immer flex sein — sie
   erben die Sichtbarkeit vom Container. */
.navbar-vertical .dropdown-menu.show,
.navbar-vertical .dropdown-menu > div,
.navbar-vertical .dropdown-menu form,
.navbar-vertical .dropdown-menu form > div,
.navbar-vertical .dropdown-menu > div > form {
  display: flex;
  flex-direction: column;
}

/* Extrahierter PDF-Rohtext: pre-wrap — kein Tabler-Utility fuer vorformatierten Text */
.raw-text-pre {
  white-space: pre-wrap;
  font-size: 0.8rem;
}

/* Impersonation-Banner: Sticky am oberen Rand — kein Tabler-Utility fuer sticky + z-index Kombination */
.alert-impersonation {
  position: sticky;
  top: 0;
  z-index: 1050;
  border-radius: 0;
}

/* Inline-Zuordnung Abstimmung: Ausgewaehlte Zeilen hervorheben — kein Tabler-Utility fuer selektierte Radio-Zeilen */
tr.abstimmung-kb-selected > td,
tr.abstimmung-tx-selected > td {
  background-color: var(--tblr-bg-surface-secondary);
}

/* Drop-Zone: Dashed border + Drag-over Highlight — kein Tabler-Utility fuer dashed borders / drag-states */
.drop-zone {
  border: 2px dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
}
.drop-zone.drag-over {
  border-color: var(--tblr-primary);
  background-color: rgba(var(--tblr-primary-rgb), 0.04);
}
.drop-zone.drop-zone-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.drop-zone-icon {
  font-size: 3rem;
  color: var(--tblr-secondary);
}

/* Loading-Bar: NProgress-Style Fortschrittsbalken am oberen Viewport-Rand —
   Tabler hat keine indeterminate Fixed-Position Progress-Bar */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--tblr-primary);
  z-index: 9999;
  pointer-events: none;
  transition: none;
}
.loading-bar-active {
  animation: loading-bar-progress 12s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes loading-bar-progress {
  0%   { width: 0; }
  10%  { width: 25%; }
  30%  { width: 55%; }
  50%  { width: 72%; }
  70%  { width: 84%; }
  100% { width: 97%; }
}

/* Verlauf-Timeline: Tabler .steps hat padding-left + border-left fuer Wizard-Stepper,
   im Verlauf-Kontext nicht gewuenscht */
.steps-timeline {
  padding-left: 0;
  border-left: 0;
  margin-left: 0;
  margin-bottom: 0;
}

/* Floating Bulk-Toolbar: fixed am unteren Viewport-Rand, zentriert —
   kein Tabler-Utility fuer centered fixed-bottom Action-Bar */
.bulk-toolbar-floating {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1030;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: opacity 0.2s, transform 0.2s;
}
.bulk-toolbar-floating.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(1rem);
  pointer-events: none;
}

/* Fehler-Karte in Listen: gestrichelte Border im Default-Zustand (Filter nicht aktiv).
   Differenziert "Fehler existieren in Daten" (dashed) von "Filter ist aktiv" (solid).
   Kein Tabler-Utility fuer border-style: dashed mit Tabler-Farbvariable vorhanden. */
.card.border-dashed-danger {
  border: 1px dashed var(--tblr-danger);
}
.card.border-dashed-warning {
  border: 1px dashed var(--tblr-warning);
}

/* Progress-Bar extra hoch fuer prominente Fortschrittsanzeigen (z.B. Multi-Import-Detail).
   Tabler bietet nur progress-sm (0.25rem) und progress-lg (1rem) - ca. 3x Default (0.5rem) fehlt. */
.progress-xl {
  --tblr-progress-height: 1.5rem;
}

/* Bookmark-Popover: feste Breite, damit Dialog mit und ohne Loeschen-Button
   identisch wirkt (Tabler-Default: auto-shrink schrumpft ohne Loeschen-Button
   sichtbar zusammen). min+max = effektiv fixe Breite. */
.popover.bookmark-popover {
  min-width: 340px;
  max-width: 340px;
}
.popover.bookmark-popover .popover-body {
  padding: 0.75rem 1rem 1rem;
}

/* PDF-Viewer-Modal: Hoehe auf dem Block-Container .modal-body, iframe fuellt via h-100.
   Grund: iframe ist inline-Element - height auf dem iframe selbst wirkt bei
   about:blank-Content erst nach Erst-Render (Modal wuerde klein aufploppen). */
#pdf-viewer-modal .modal-body {
  height: calc(100vh - 180px);
  min-height: 480px;
}

/* Batch-Inhalt-Modal (Multi-Import-Pruefung): einheitliche Hoehe ueber alle
   Datenarten hinweg, damit unterschiedlich grosse Inhalte (1 Zeile vs. 50)
   nicht zu unterschiedlich hohen Modals fuehren. Flex-Column auf .modal-body
   sorgt dafuer, dass kuerzere Inhalte den verbleibenden Platz weiss lassen
   statt das Modal auf Inhalts-Hoehe zusammenzuziehen.
   Werte ~25 % kompakter als #pdf-viewer-modal (`calc(75vh - 135px)` =
   0,75 * `calc(100vh - 180px)`), weil die Tabellen-Modals sonst auf
   grossen Monitoren ueberdimensioniert wirken. */
.modal-batch-content .modal-body {
  height: calc(75vh - 135px);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.modal-batch-content .modal-body > .batch-quelldatei,
.modal-batch-content .modal-body > .batch-section {
  flex: 0 0 auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   Sidebar-Popover (Depot-, Mandant- und Impersonation-Switcher)
   --------------------------------------------------------------------------
   Rich-Row-Dropdown mit Icon-Kachel, Chip-Meta und optionalem Positions-/
   Typ-/Rollen-Hinweis. Strikt unter #depot-scope-menu, #mandant-switcher-menu
   und #impersonation-menu gescoped - die .dsm-* Klassen sind nicht zur
   Wiederverwendung ausserhalb gedacht. Kein Tabler-Utility fuer dieses
   Pattern (Broker-/Tenant-/Rollen-Farbsystem, mehrzeilige Rich-Rows, linker
   Aktiv-Indikator).
   Positionierung per position:fixed, Toggle per .show (JS in sidebar_nav.html).
   ────────────────────────────────────────────────────────────────────────── */
#depot-scope-menu,
#mandant-switcher-menu,
#impersonation-menu {
  position: fixed;
  display: none;
  width: 360px;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 10px;
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  z-index: 1050;
  font-size: 0.8125rem;
}
#depot-scope-menu.show,
#mandant-switcher-menu.show,
#impersonation-menu.show { display: block; }

#depot-scope-menu .dsm-head,
#mandant-switcher-menu .dsm-head,
#impersonation-menu .dsm-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--tblr-border-color);
}
#depot-scope-menu .dsm-head .dsm-label,
#mandant-switcher-menu .dsm-head .dsm-label,
#impersonation-menu .dsm-head .dsm-label {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  font-weight: 700;
}

/* Dezentes Suchfeld im Popover-Header (z.B. Mandant-Switcher). Volle Breite,
   reduzierter Kontrast - soll Rich-Rows nicht dominieren. */
#depot-scope-menu .dsm-search,
#mandant-switcher-menu .dsm-search,
#impersonation-menu .dsm-search {
  margin-top: 8px;
  width: 100%;
  border: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.8125rem;
  color: var(--tblr-body-color);
  line-height: 1.2;
}
#depot-scope-menu .dsm-search:focus,
#mandant-switcher-menu .dsm-search:focus,
#impersonation-menu .dsm-search:focus {
  outline: none;
  border-color: var(--tblr-primary);
  background: var(--tblr-bg-surface);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.12);
}
#depot-scope-menu .dsm-search::placeholder,
#mandant-switcher-menu .dsm-search::placeholder,
#impersonation-menu .dsm-search::placeholder {
  color: var(--tblr-secondary);
  opacity: 0.75;
}

#depot-scope-menu form,
#mandant-switcher-menu form,
#impersonation-menu form { margin: 0; }

#depot-scope-menu .dsm-all-tile,
#mandant-switcher-menu .dsm-all-tile,
#impersonation-menu .dsm-all-tile {
  padding: 10px 10px 4px;
}
#depot-scope-menu .dsm-all-inner,
#mandant-switcher-menu .dsm-all-inner,
#impersonation-menu .dsm-all-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), 0.08), rgba(var(--tblr-primary-rgb), 0.02));
  border: 1px solid rgba(var(--tblr-primary-rgb), 0.18);
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
}
#depot-scope-menu .dsm-all-inner:hover,
#mandant-switcher-menu .dsm-all-inner:hover,
#impersonation-menu .dsm-all-inner:hover {
  background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), 0.12), rgba(var(--tblr-primary-rgb), 0.04));
}
#depot-scope-menu .dsm-all-inner.is-active,
#mandant-switcher-menu .dsm-all-inner.is-active,
#impersonation-menu .dsm-all-inner.is-active {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--tblr-primary-rgb), 0.25);
}
#depot-scope-menu .dsm-all-inner .dsm-icon-all,
#mandant-switcher-menu .dsm-all-inner .dsm-icon-all,
#impersonation-menu .dsm-all-inner .dsm-icon-all {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(var(--tblr-primary-rgb), 0.14);
  color: var(--tblr-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex: 0 0 36px;
}
#depot-scope-menu .dsm-all-inner.is-active .dsm-icon-all,
#mandant-switcher-menu .dsm-all-inner.is-active .dsm-icon-all,
#impersonation-menu .dsm-all-inner.is-active .dsm-icon-all {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
#depot-scope-menu .dsm-all-inner .dsm-body,
#mandant-switcher-menu .dsm-all-inner .dsm-body,
#impersonation-menu .dsm-all-inner .dsm-body {
  flex: 1;
  min-width: 0;
}
#depot-scope-menu .dsm-all-inner .dsm-name,
#mandant-switcher-menu .dsm-all-inner .dsm-name,
#impersonation-menu .dsm-all-inner .dsm-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--tblr-body-color);
  letter-spacing: -0.005em;
}
#depot-scope-menu .dsm-all-inner.is-active .dsm-name,
#mandant-switcher-menu .dsm-all-inner.is-active .dsm-name,
#impersonation-menu .dsm-all-inner.is-active .dsm-name { color: #fff; }
#depot-scope-menu .dsm-all-inner .dsm-meta,
#mandant-switcher-menu .dsm-all-inner .dsm-meta,
#impersonation-menu .dsm-all-inner .dsm-meta {
  font-size: 0.6875rem;
  color: var(--tblr-secondary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
#depot-scope-menu .dsm-all-inner.is-active .dsm-meta,
#mandant-switcher-menu .dsm-all-inner.is-active .dsm-meta,
#impersonation-menu .dsm-all-inner.is-active .dsm-meta {
  color: rgba(255, 255, 255, 0.85);
}
#depot-scope-menu .dsm-all-inner .dsm-pill,
#mandant-switcher-menu .dsm-all-inner .dsm-pill,
#impersonation-menu .dsm-all-inner .dsm-pill {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#depot-scope-menu .dsm-grp,
#mandant-switcher-menu .dsm-grp,
#impersonation-menu .dsm-grp {
  padding: 14px 16px 6px;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#depot-scope-menu .dsm-grp .dsm-grp-count,
#mandant-switcher-menu .dsm-grp .dsm-grp-count,
#impersonation-menu .dsm-grp .dsm-grp-count {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-secondary);
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 0.625rem;
}

#depot-scope-menu .dsm-list,
#mandant-switcher-menu .dsm-list,
#impersonation-menu .dsm-list {
  padding: 0 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#depot-scope-menu .dsm-item,
#mandant-switcher-menu .dsm-item,
#impersonation-menu .dsm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
}
#depot-scope-menu .dsm-item:hover,
#mandant-switcher-menu .dsm-item:hover,
#impersonation-menu .dsm-item:hover {
  background: var(--tblr-bg-surface-secondary, #f8fafc);
}
#depot-scope-menu .dsm-item.is-active,
#mandant-switcher-menu .dsm-item.is-active,
#impersonation-menu .dsm-item.is-active {
  background: rgba(var(--tblr-primary-rgb), 0.05);
}
#depot-scope-menu .dsm-item.is-active::before,
#mandant-switcher-menu .dsm-item.is-active::before,
#impersonation-menu .dsm-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--tblr-primary);
  border-radius: 0 2px 2px 0;
}
#depot-scope-menu .dsm-item .dsm-icon,
#mandant-switcher-menu .dsm-item .dsm-icon,
#impersonation-menu .dsm-item .dsm-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  flex: 0 0 30px;
}
#depot-scope-menu .dsm-item .dsm-body,
#mandant-switcher-menu .dsm-item .dsm-body,
#impersonation-menu .dsm-item .dsm-body { min-width: 0; flex: 1; }
#depot-scope-menu .dsm-item .dsm-nameline,
#mandant-switcher-menu .dsm-item .dsm-nameline,
#impersonation-menu .dsm-item .dsm-nameline {
  display: flex;
  align-items: center;
  gap: 6px;
}
#depot-scope-menu .dsm-item .dsm-name,
#mandant-switcher-menu .dsm-item .dsm-name,
#impersonation-menu .dsm-item .dsm-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
#depot-scope-menu .dsm-item .dsm-check,
#mandant-switcher-menu .dsm-item .dsm-check,
#impersonation-menu .dsm-item .dsm-check {
  background: rgba(var(--tblr-primary-rgb), 0.12);
  color: var(--tblr-primary);
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex: 0 0 16px;
}
#depot-scope-menu .dsm-item .dsm-meta-row,
#mandant-switcher-menu .dsm-item .dsm-meta-row,
#impersonation-menu .dsm-item .dsm-meta-row {
  margin-top: 5px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.6875rem;
}
/* Chip-Hintergrund bewusst auf der weissen Surface-Farbe (mit Border) statt auf
   --tblr-bg-surface-secondary (#f1f5f9): letzteres verschluckt sich beim
   Item-Hover (#f8fafc) praktisch komplett. Border hebt den Chip in beiden
   Zustaenden (normal und Hover) sichtbar ab. */
#depot-scope-menu .dsm-item .dsm-broker-chip,
#mandant-switcher-menu .dsm-item .dsm-broker-chip,
#impersonation-menu .dsm-item .dsm-broker-chip {
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
  border: 1px solid var(--tblr-border-color);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.01em;
}
#depot-scope-menu .dsm-item .dsm-num,
#mandant-switcher-menu .dsm-item .dsm-num,
#impersonation-menu .dsm-item .dsm-num {
  color: var(--tblr-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.6875rem;
}
#depot-scope-menu .dsm-item .dsm-meta-row-2,
#mandant-switcher-menu .dsm-item .dsm-meta-row-2,
#impersonation-menu .dsm-item .dsm-meta-row-2 {
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.6875rem;
  color: var(--tblr-secondary);
}
#depot-scope-menu .dsm-item .dsm-meta-row-2 .ti,
#mandant-switcher-menu .dsm-item .dsm-meta-row-2 .ti,
#impersonation-menu .dsm-item .dsm-meta-row-2 .ti { font-size: 0.75rem; }

/* Broker-Chip-Farben: markenspezifische Paletten, bewusst Hex (keine Tabler-Entsprechung). */
#depot-scope-menu .dsm-icon.broker-spk { background: #dbeafe; color: #1d4ed8; }
#depot-scope-menu .dsm-icon.broker-vbk { background: #fef3c7; color: #92400e; }
#depot-scope-menu .dsm-icon.broker-bdr { background: #fee2e2; color: #b91c1c; }
#depot-scope-menu .dsm-icon.broker-con { background: #dcfce7; color: #166534; }
#depot-scope-menu .dsm-icon.broker-bnp { background: #ede9fe; color: #5b21b6; }
#depot-scope-menu .dsm-icon.broker-ing { background: #ffedd5; color: #c2410c; }
#depot-scope-menu .dsm-icon:not([class*="broker-"]) {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-secondary);
}

/* Tenant-Typ-Farben (nur Mandant-Switcher): Koerperschaft (blau) vs. Privatperson
   (lila). Bewusst eigene Paletten - semantische Markierung des Rechtsform-Typs
   analog zu den Broker-Chips. */
#mandant-switcher-menu .dsm-icon.tenant-kor { background: #dbeafe; color: #1d4ed8; }
#mandant-switcher-menu .dsm-icon.tenant-prv { background: #ede9fe; color: #5b21b6; }
#mandant-switcher-menu .dsm-icon:not([class*="tenant-"]) {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-secondary);
}

/* Rollen-Farben (nur Impersonation-Switcher): visuelle Unterscheidung der Rollen
   beim User-Wechsel. Palette wiederverwendet aus Broker-/Tenant-Swatches:
   Admin lila, Steuerberater blau, Verwalter gruen, Firma orange. Betrachter
   faellt auf den neutralen Fallback. */
#impersonation-menu .dsm-icon.role-adm { background: #ede9fe; color: #5b21b6; }
#impersonation-menu .dsm-icon.role-stb { background: #dbeafe; color: #1d4ed8; }
#impersonation-menu .dsm-icon.role-vwt { background: #dcfce7; color: #166534; }
#impersonation-menu .dsm-icon.role-frm { background: #ffedd5; color: #c2410c; }
#impersonation-menu .dsm-icon:not([class*="role-"]) {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-secondary);
}

#depot-scope-menu .dsm-empty,
#mandant-switcher-menu .dsm-empty,
#impersonation-menu .dsm-empty {
  padding: 14px 16px;
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
  text-align: center;
}

#depot-scope-menu .dsm-foot,
#mandant-switcher-menu .dsm-foot,
#impersonation-menu .dsm-foot {
  border-top: 1px solid var(--tblr-border-color);
  padding: 6px;
  background: var(--tblr-bg-surface-secondary, #fbfcfd);
}
#depot-scope-menu .dsm-foot .dsm-link,
#mandant-switcher-menu .dsm-foot .dsm-link,
#impersonation-menu .dsm-foot .dsm-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
#depot-scope-menu .dsm-foot .dsm-link:hover,
#mandant-switcher-menu .dsm-foot .dsm-link:hover,
#impersonation-menu .dsm-foot .dsm-link:hover {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-body-color);
}
#depot-scope-menu .dsm-foot .dsm-link i,
#mandant-switcher-menu .dsm-foot .dsm-link i,
#impersonation-menu .dsm-foot .dsm-link i { color: var(--tblr-muted, #94a3b8); }