/* 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-Tabs mit Umbruch: keine Streckung, kleiner Zeilenabstand.
   Bootstrap-Default .btn-group > .btn ist flex: 1 1 auto - das streckt Buttons
   in der zweiten Zeile auf die volle Containerbreite. row-gap statt gap,
   damit der horizontale -1px-Border-Overlap zwischen Buttons intakt bleibt.
   Container-Hintergrund auf transparent: sonst leuchten Zeilenluecke und freier
   Platz nach dem letzten Button in Zeile 2 als weisser Block. Stattdessen
   wandert das Weiss auf die einzelnen outline-Buttons - die haben sonst
   transparenten Hintergrund und wuerden auf body-bg unleserlich werden. */
.btn-group[role="group"].flex-wrap > .btn {
  flex: 0 0 auto;
}
.btn-group[role="group"].flex-wrap {
  row-gap: 4px;
  background-color: transparent;
}
/* Nur im Ruhe-Zustand weisses bg setzen - Bootstrap-Hover/Focus/Active sonst
   ueberschrieben (weisser Text auf weissem bg). */
.btn-group[role="group"].flex-wrap
  > .btn-outline-secondary:not(:hover):not(:focus):not(:active) {
  background-color: #ffffff;
}
[data-bs-theme="dark"]
  .btn-group[role="group"].flex-wrap
  > .btn-outline-secondary:not(:hover):not(:focus):not(:active) {
  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);
}

/* Wertpapier-Avatar mit Logo: img fuellt den Avatar, Padding gegen Rand-Beruehrung,
   weisser Hintergrund, weil viele Logos transparent + farbig sind und auf dem
   Light-Avatar-Hintergrund (bg-{farbe}-lt) sonst gefaerbt wirken. */
.wp-avatar { overflow: hidden; }
.wp-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  border-radius: inherit;
}

/* elbstream Hobby-Lizenz: Backlink mit min. 12pt Schriftgroesse erforderlich.
   Tabler Body-Default ist 0.875rem (~10.5pt) - hier explizit 1rem (~12pt).
   Farbe gray-400 fuer dezenten, aber sichtbaren Hinweis. */
.elbstream-attribution {
  font-size: 1rem;
  color: var(--tblr-gray-400);
}
.elbstream-attribution a {
  color: var(--tblr-gray-400);
}

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

/* GuV-Drilldown-Wrapper: dunklerer Hintergrund (gray-400) damit die
   enthaltene Card sich klarer vom Bereich rundherum abhebt */
.bg-guv-drilldown {
  background-color: var(--tblr-gray-200);
}
[data-bs-theme="dark"] .bg-guv-drilldown {
  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);
  background-color: var(--tblr-bg-surface-secondary);
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
}
.drop-zone:hover:not(.drop-zone-disabled) {
  border-color: var(--tblr-primary);
  background-color: rgba(var(--tblr-primary-rgb), 0.03);
}
.drop-zone.drag-over {
  border-color: var(--tblr-primary);
  background-color: rgba(var(--tblr-primary-rgb), 0.08);
}
.drop-zone.drop-zone-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.drop-zone-icon {
  font-size: 4rem;
  color: var(--tblr-primary);
}

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

/* Toast-Container: ueber Modal-Footer in modal-fullscreen-Kontext.
   Tabler/Bootstrap setzen --bs-toast-zindex (1090) nur auf .toast selbst,
   nicht auf den leeren .toast-container - was bei modal-fullscreen +
   modal-blur zu Stacking-Konflikten fuehrt (Toast verschwindet hinter dem
   Footer-Button). 1100 liegt sicher ueber Modal (1055) und Backdrop (1050). */
.toast-container.position-fixed {
  z-index: 1100;
}

/* Toast-Level-Hintergruende: opaque Variante der Tabler bg-{color}-lt.
   Tabler's bg-{X}-lt nutzt rgba(..., 0.1) - im Toast-Kontext scheinen damit
   darunterliegende Modal-Footer-Buttons durch (Lesbarkeit broken). Wir mixen
   12% Tabler-Farbe mit der Surface-Farbe zu einem opaquen Pendant, das
   visuell dem Original entspricht aber nichts durchscheinen laesst. */
.toast.bg-green-lt {
  background-color: color-mix(in srgb, var(--tblr-green) 12%, var(--tblr-bg-surface)) !important;
}
.toast.bg-red-lt {
  background-color: color-mix(in srgb, var(--tblr-red) 12%, var(--tblr-bg-surface)) !important;
}
.toast.bg-yellow-lt {
  background-color: color-mix(in srgb, var(--tblr-yellow) 12%, var(--tblr-bg-surface)) !important;
}
.toast.bg-blue-lt {
  background-color: color-mix(in srgb, var(--tblr-blue) 12%, var(--tblr-bg-surface)) !important;
}

/* 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);
}
#mandant-switcher-menu .dsm-item.is-active,
#impersonation-menu .dsm-item.is-active {
  background: rgba(var(--tblr-primary-rgb), 0.05);
}
#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-Picker: Wrapper-Row um den Auswahl-Button.
   Active-Marker sitzt auf .dsm-item-row, damit er die volle Row-Breite abdeckt. */
#depot-scope-menu .dsm-item-row {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  position: relative;
  border-radius: 8px;
}
#depot-scope-menu .dsm-item-row > form {
  flex: 1 1 auto;
  margin: 0;
}
#depot-scope-menu .dsm-item-row > form .dsm-item {
  width: 100%;
}
#depot-scope-menu .dsm-item-row.is-active {
  background: rgba(var(--tblr-primary-rgb), 0.05);
}
#depot-scope-menu .dsm-item-row.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;
}
#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);
}
#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); }

/* ──────────────────────────────────────────────────────────────────────────
   Theme-Switcher-Flyout (Sidebar-Eintrag "Darstellung")
   --------------------------------------------------------------------------
   Schlankes laterales Flyout mit 4 Modi (Hell/Dunkel/Seitenleiste/System).
   BEWUSST NICHT das .dsm-*-Pattern: das ist fuer 360px-Rich-Rows (Avatare,
   Chips, Suchfeld) gebaut - hier genuegen 4 simple Option-Buttons. Auch kein
   Bootstrap-Dropdown, da dieses nicht lateral aus der Sidebar oeffnet.
   Positionierung per position:fixed, Toggle per .show (JS in theme-switcher.js).
   ────────────────────────────────────────────────────────────────────────── */
#theme-switcher-menu {
  position: fixed;
  display: none;
  width: 200px;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 10px;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.16),
    0 2px 6px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  z-index: 1050;
  font-size: 0.8125rem;
}
#theme-switcher-menu.show { display: block; }

#theme-switcher-menu .tsm-head {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--tblr-border-color);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  font-weight: 700;
}
#theme-switcher-menu .tsm-options {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#theme-switcher-menu .tsm-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--tblr-body-color);
  font-size: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
#theme-switcher-menu .tsm-option i { color: var(--tblr-muted, #94a3b8); }
#theme-switcher-menu .tsm-option:hover {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
}
#theme-switcher-menu .tsm-option.active {
  color: var(--tblr-primary);
  font-weight: 600;
}
#theme-switcher-menu .tsm-option.active i { color: var(--tblr-primary); }

/* Pruef-Modal Split-Layout (auf modal-fullscreen): Tabelle + iFrame fuellen den    */
/* gesamten Viewport zwischen Header und Footer. Scroll nur in der linken Tabelle,   */
/* PDF-Viewer im iFrame scrollt rechts unabhaengig.                                  */
/* Tabler/Bootstrap haben kein eingebautes Split-Modal-Pattern — eigene Klassen.     */

/* Hoehere Spezifitaet (0,1,1) als Bootstrap's .modal-body (0,1,0), sonst gewinnt    */
/* die Bootstrap-Regel overflow-y: auto im Modal-Fullscreen-Variant.                  */
.modal-content > .pruefmodal-body {
  overflow: hidden;
}
.pruefmodal-split {
  height: calc(100vh - 120px);
}
/* Beide Spalten brauchen eine eigene max-height, weil Bootstrap's .row mit          */
/* flex-wrap: wrap die Kinder NICHT auf die Container-Hoehe stretcht (Default-Flex   */
/* align-items: stretch wirkt nicht wie erwartet). Ohne max-height waechst die Liste */
/* auf Content-Hoehe (>15.000px bei 283 Eintraegen) und schiebt alles weg.            */
.pruefmodal-liste,
.pruefmodal-pdf,
.pruefmodal-csv {
  max-height: calc(100vh - 120px);
}
.pruefmodal-liste {
  overflow-y: auto;
}
/* Header-Reihen links (Tabellen-thead) und rechts (PDF-Meta) auf gleicher Hoehe.   */
/* Verhindert sichtbaren Versatz durch das Icon im rechten Header (py-2 + Glyph).    */
/* Hintergruende ueber Tabler-CSS-Variablen (theme-aware) statt bg-light/bg-white,   */
/* damit sie sich an Light/Dark Mode anpassen.                                       */
.pruefmodal-liste thead th {
  height: 2.75rem;
}
/* Beide Header auf derselben Variable, damit Light- UND Dark-Mode bruchfrei         */
/* zwischen linker Tabelle und rechtem PDF-Container ueberblenden. surface ist hier  */
/* die Card-Fuellfarbe (Light: #fff, Dark: dunkel-blaugrau).                          */
.pruefmodal-thead th,
.pruefmodal-pdf-header {
  background: var(--tblr-bg-surface);
}
/* Feste Breite der Filter-/Kategorie-Spalte im Pruef-Modal - haelt Titel-     */
/* und Filter-Zeile im selben Spaltenraster. Tabler hat keine passende         */
/* Width-Utility fuer diesen Wert; deshalb eine benannte Klasse.               */
.pruefmodal-filter-spalte {
  width: 200px;
}
.pruefmodal-pdf-header {
  height: 2.75rem;
}
.pruefmodal-pdf {
  background: var(--tblr-bg-surface-secondary);
}
/* Lade-Overlay fuer PDF-iframes (Pruef-Maske + globales Viewer-Modal). Deckt das  */
/* leere iframe waehrend des S3-Proxy-Downloads ab. d-none (Bootstrap, !important) */
/* blendet aus; ohne d-none greift display:flex aus dieser Regel.                  */
.pdf-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--tblr-bg-surface-secondary);
  z-index: 5;
}
/* Interim-Overlay beim Start einer asynchronen Freigabe (QW1): ueberbrueckt die   */
/* Roundtrip-Luecke zwischen Klick und Fortschritts-Modal. Sichtbarkeit per         */
/* Display-Toggle ueber die von hx-indicator gesetzte htmx-request-Klasse (kein JS).*/
/* z-index ueber dem PDF-Overlay (5), damit es auch die rechte Spalte abdeckt.       */
.freigabe-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .72);
}
.freigabe-start-overlay.htmx-request { display: flex; }
.modal-pruefen-row.cursor-pointer { cursor: pointer; }
.modal-pruefen-row.cursor-pointer:hover { background: var(--tblr-bg-surface-secondary, #f1f5f9); }

/* CSV-Pane (rechter Pane fuer Verrechnungskonto-Imports): Flex-Container, damit    */
/* die innere .table-responsive auf min-height: 0 schrumpfen und dann mit            */
/* overflow-y: auto scrollen kann. Ohne diese Begrenzung waechst die Tabelle auf     */
/* volle Content-Hoehe (>11.000px bei ~150 CSV-Zeilen), und scrollIntoView verschiebt */
/* das Modal-Body (overflow:hidden) — die linke KB-Tabelle rutscht dann aus dem      */
/* Viewport. Tabler/Bootstrap haben kein Utility-Set fuer dieses                     */
/* Flex-min-height-0-Scroll-Pattern (analog Kommentar Z. 1056-1059).                  */
.pruefmodal-csv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pruefmodal-csv .table-responsive {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Excel-Look fuer die CSV-Rohdaten-Tabelle (rechter Pane).                          */
/* Spaltentrenner als zarte Vertikalen, kompaktere Schrift, Header buendig zur       */
/* PDF-Header-Linie links (beide 2.75rem). Tabler hat kein Utility fuer vertikale    */
/* Trennlinien — daher Inline-CSS auf der Adapter-spezifischen Klasse.               */
.pruefmodal-csv-table {
  font-size: 0.8125rem;
  line-height: 1.35;
}
.pruefmodal-csv-table > thead > tr > th,
.pruefmodal-csv-table > tbody > tr.csv-row > td {
  border-right: 1px solid var(--tblr-border-color);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.pruefmodal-csv-table > thead > tr > th:last-child,
.pruefmodal-csv-table > tbody > tr.csv-row > td:last-child {
  border-right: 0;
}
.pruefmodal-csv-table > thead > tr > th {
  height: 2.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tblr-secondary);
  vertical-align: middle;
}
.pruefmodal-csv-table .pruefmodal-csv-toggle-col {
  width: 2.5rem;
  min-width: 2.5rem;
}
.pruefmodal-csv-table .pruefmodal-csv-toggle-cell {
  text-align: center;
  padding: 0.15rem 0.25rem;
}
.pruefmodal-csv-transpose-btn[aria-expanded="true"] {
  color: var(--tblr-primary);
  background: var(--tblr-bg-surface-secondary);
}
.pruefmodal-csv-transpose > td {
  background: var(--tblr-bg-surface-secondary);
  border-bottom: 1px solid var(--tblr-border-color);
}
.pruefmodal-csv-transpose-body {
  padding: 0.75rem 1rem;
}
.pruefmodal-csv-transpose-table {
  font-size: 0.8125rem;
}
.pruefmodal-csv-transpose-table > tbody > tr > td {
  padding: 0.2rem 0.5rem;
  vertical-align: top;
}
.pruefmodal-csv-transpose-table .pruefmodal-csv-transpose-key {
  width: 14rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tblr-secondary);
  white-space: nowrap;
}

/* Drilldown im Job-Status-Partial: native <details> mit Chevron-Rotation.    */
/* Browser-Default-Marker raus, eigener Chevron via .pruefmodal-drilldown-chevron. */
.pruefmodal-drilldown > summary {
  cursor: pointer;
  list-style: none;
}
.pruefmodal-drilldown > summary::-webkit-details-marker { display: none; }
.pruefmodal-drilldown[open] > summary .pruefmodal-drilldown-chevron {
  transform: rotate(90deg);
}
.pruefmodal-drilldown-chevron { transition: transform 0.15s ease; }
/* Filter-Switch "Nur nicht freigegebene" erst im aufgeklappten Drilldown zeigen. */
.pruefmodal-drilldown:not([open]) > summary .pruefmodal-drilldown-filter {
  display: none;
}

@media (max-width: 991.98px) {
  /* Unter lg stapeln die Bootstrap-Cols vertikal (col-lg-5/7 -> col-12).            */
  /* Die Split-Hoehe wird dann ueber die zwei Sub-Container verteilt.                 */
  .pruefmodal-split { height: auto; min-height: calc(100vh - 120px); }
  .pruefmodal-liste { max-height: 50vh; }
  .pruefmodal-pdf { height: 50vh; }
  .pruefmodal-csv { height: 50vh; max-height: 50vh; }
}

/* min-width:0 erlaubt einem Flex-Item, unter seine Inhaltsbreite zu schrumpfen */
/* - Voraussetzung dafuer, dass text-truncate in einem Flex-Container greift     */
/* statt einen Zeilenumbruch zu erzwingen. Bootstrap 5.1 / Tabler 1.4 haben      */
/* dafuer keine Utility-Klasse (gleiches Pattern wie .navbar-recents oben).      */
.min-w-0 { min-width: 0; }

/* Linksseitiges Truncation fuer lange Reporting-Dateinamen im Job-Drilldown.   */
/* Tabler/Bootstrap kennen nur .text-truncate (Ellipse rechts) - hier bleibt    */
/* das aussagekraeftige Ende (Datum, .pdf) sichtbar, der Pfad-Anfang wird links */
/* mit Ellipse abgeschnitten. direction:rtl klappt die Ellipse-Seite um,        */
/* text-align:left haelt kurze Namen linksbuendig.                              */
.text-truncate-start {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}

/* Zurueck-Link (components/back_link.html): die Hover-Unterstreichung soll   */
/* nur den Text treffen, nicht das vorangestellte Pfeil-Icon. Die Linie wird  */
/* vom <a> gezeichnet und propagiert sonst auf alle Kinder. Bootstrap/Tabler  */
/* bieten keine Utility, die eine Hover-Unterstreichung auf ein einzelnes     */
/* Kind beschraenkt. .back-link:hover (0,2,0) schlaegt Tablers a:hover.       */
.back-link,
.back-link:hover { text-decoration: none; }
.back-link:hover .back-link-text { text-decoration: underline; }

/* Wertpapier-Zelle in kompakten Tabellen (Dashboard "Letzte Transaktionen", */
/* Transaktionsliste): begrenzt die Spaltenbreite, damit text-truncate auf   */
/* der Bezeichnung greift. Bootstrap-Utility text-truncate braucht festen    */
/* Container; Tabler liefert dafuer keine fertige Klasse, und Inline-Styles  */
/* sind nach Tabler-First-Regel verboten.                                    */
.cell-wp { max-width: 320px; height: 3.5em; }
.cell-wp .truncate-row { display: flex; align-items: center; min-width: 0; }
.cell-wp .truncate-row > a.text-truncate { flex: 1 1 auto; min-width: 0; }
/* Transaktionsliste ohne Depot-Spalte: Wertpapier-Zelle enger fassen, damit  */
/* die Tabelle ohne Horizontal-Scroll in die Card passt und die rechte        */
/* Aktions-Icon-Spalte sichtbar bleibt. Tabler bietet keine passende Utility. */
.tx-kompakt .cell-wp { max-width: 240px; }

/* GuV-Drill-Down: klickbare Zell-Werte. Hand-Cursor + Hover-Unterstreichung. */
/* .is-active markiert den aktuell aufgeklappten Trigger (bleibt unterstrichen,*/
/* damit man sieht, wo der offene Drill-Down haengt). Kein Farbwechsel - die  */
/* Tabelle soll als Lese-Tabelle ruhig bleiben (User-Vorgabe).                */
.guv-drilldown-trigger { cursor: pointer; }
.guv-drilldown-trigger:hover,
.guv-drilldown-trigger.is-active { text-decoration: underline; }

/* Icon-Button-Variante (Realisierte Positionen): kein Underline am Icon - das */
/* btn-ghost-secondary-Hover liefert das Feedback bereits. KEIN Farbwechsel    */
/* (Blau = Link-Konvention, wuerde das Icon faelschlich wie einen Link wirken  */
/* lassen). Der offene Drill-Down wird stattdessen durch das Umschalten        */
/* Plus -> Minus angezeigt (siehe unten). Die Text-Trigger (klickbare Betraege */
/* in GuV/Kapitalfluss) behalten ihr Underline - .btn greift nur am <button>.  */
.guv-drilldown-trigger.btn:hover,
.guv-drilldown-trigger.btn.is-active { text-decoration: none; }

/* Plus/Minus-Umschaltung des Drill-down-Icons: geschlossen zeigt der Button   */
/* ti-square-plus, offen (.is-active) ti-square-minus. Das jeweils inaktive    */
/* Icon wird per display:none ausgeblendet (nimmt keinen Platz, btn-icon       */
/* zentriert das sichtbare Icon weiterhin korrekt).                            */
.guv-drilldown-trigger.btn .drilldown-icon-open { display: none; }
.guv-drilldown-trigger.btn.is-active .drilldown-icon-closed { display: none; }
.guv-drilldown-trigger.btn.is-active .drilldown-icon-open { display: inline-flex; }

/* Drill-Down-Zeile soll den Hover-Effekt der Eltern-Tabelle (table-hover)   */
/* NICHT erben - sonst wird beim Mouseover die ganze Sub-Tabelle grau        */
/* eingefaerbt. Bootstrap setzt --bs-table-bg-state per :hover, wir resetten */
/* die Custom-Property auf der Drill-Down-Zeile.                             */
.guv-drilldown-row > * { --bs-table-bg-state: transparent; }

/* Dashboard-/Performance-KPI-Werte: DM Serif Display fuer prominente         */
/* Kennzahlen - dieselbe Display-Serife wie die oeffentlichen Seiten. Tabler  */
/* hat kein Serif-Display-Utility, daher diese eigene Klasse mit fester        */
/* Display-Groesse (ueberschreibt die .h1-Groesse fuer mehr Praesenz). Werte  */
/* vom User im Browser abgestimmt. Hinweis: DM Serif liefert nur weight 400 -  */
/* font-weight:500 rendert der Browser als synthetisches Bolding (faux bold).  */
.kpi-serif {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 1.8rem;
  line-height: 2.1rem;
}

/* Feste Hoehe fuer ECharts-Container (ECharts braucht eine explizite */
/* Pixel-Hoehe am Init-Element; Tabler hat dafuer keine Utility-Klasse). */
.chart-h-300 {
  height: 300px;
}

/* Tabler Icons v3.44: Filled-Glyphen liegen seit dem Split (~v3.40) in einer */
/* separaten Font; die Klassennamen `ti-<name>-filled` existieren nicht mehr.  */
/* Die 3 projektweit genutzten Filled-Icons hier ueber die Filled-Font         */
/* abbilden, damit das bestehende `ti-<name>-filled`-Markup unveraendert       */
/* bleibt. Kein Tabler-Aequivalent, daher lokaler @font-face noetig.           */
@font-face {
  font-family: "tabler-icons-filled";
  font-style: normal;
  font-weight: 400;
  src: url("../vendor/tabler-icons/fonts/tabler-icons-filled.991f3ea39a78.woff2") format("woff2"),
       url("../vendor/tabler-icons/fonts/tabler-icons-filled.3baafe055820.woff") format("woff"),
       url("../vendor/tabler-icons/fonts/tabler-icons-filled.9ff6080d7a27.ttf") format("truetype");
}
.ti-bookmark-filled,
.ti-clipboard-text-filled,
.ti-caret-down-filled {
  font-family: "tabler-icons-filled" !important;
}
.ti-bookmark-filled::before { content: "\fa88"; }
.ti-clipboard-text-filled::before { content: "\100e9"; }
.ti-caret-down-filled::before { content: "\fb2a"; }