/* =====================================================================================
 * Stillhalter Tracker - Design-Schicht im Stil von shadcn/ui
 * =====================================================================================
 *
 * WAS DAS IST
 * shadcn/ui selbst laesst sich hier nicht einbauen (React + Radix + Tailwind, wir haben
 * Flask + Jinja + Bootstrap 5 ohne Build-Schritt). Diese Datei baut stattdessen die
 * GESTALTUNGSSPRACHE nach: dieselben Farb-Token, dieselben Radien, dieselbe Zurueckhaltung
 * (flache Flaechen, 1px-Raender, gedaempfte Sekundaertexte) - als duenne Schicht ueber
 * Bootstrap.
 *
 * AUFBAU (in dieser Reihenfolge)
 *   1. Token           - die offizielle shadcn-Standardpalette (Zinc/Neutral) als HSL-Tripel
 *   2. Bootstrap-Bruecke - Bootstrap-eigene Variablen auf die Token umbiegen
 *   3. Grundlagen      - Body, Typografie, Links, Scrollbalken
 *   4. Navigation      - Navbar, Bottom-Tab-Bar
 *   5. Flaechen        - Karten, Dropdowns, Listen, Alerts
 *   6. Bedienelemente  - Buttons, Formularfelder, Badges
 *   7. Tabellen        - Grundstil, Summenzeile, offene Trades
 *   8. Dashboard       - Kennzahl-Kacheln
 *   9. Fremdkomponenten- DataTables, FixedColumns, Select2
 *  10. Mobil           - Kartenansichten, Tab-Bar
 *  11. Dunkelmodus    - nur das, was sich nicht ueber ein Token loesen laesst
 *
 * ZU DEN BEIDEN MODI: Die Abschnitte 1-10 gelten fuer hell UND dunkel und arbeiten
 * ausschliesslich mit den Token aus Abschnitt 1 - ein Moduswechsel tauscht also im
 * Regelfall nur die Zahlen in Abschnitt 1 aus. Abschnitt 11 sammelt die wenigen Faelle,
 * in denen das nachweislich nicht reicht: Deckkraft-Angaben, die auf dunklem Grund
 * verschwinden, und fremdes CSS mit fest verdrahteten hellen Farben.
 *
 * UMKEHRBAR: Die App laeuft ohne diese Datei weiter (dann eben im alten Bootstrap-Look).
 * Zum Zurueckdrehen genuegt es, den <link> in templates/base.html zu entfernen bzw. die
 * Sicherung /root/backups/base.html_vor_shadcn_* zurueckzuspielen.
 *
 * ACHTUNG BEIM AENDERN: /static/ wird von nginx 30 Tage gecacht. Nach jeder Aenderung an
 * dieser Datei den Parameter ?v=N im <link> in base.html hochzaehlen UND denselben Wert in
 * static/sw.js (Konstante VERSION + Eintrag in PRECACHE_ASSETS) nachziehen, sonst behalten
 * bestehende Geraete die alte Fassung.
 *
 * FARBSCHREIBWEISE: Die Token sind absichtlich blosse HSL-Komponenten ("240 10% 3.9%") und
 * keine fertigen Farben - so lassen sie sich mit Transparenz verwenden:
 * hsl(var(--foreground) / 0.05).
 * ===================================================================================== */


/* =====================================================================================
 * 1. TOKEN
 * ===================================================================================== */

:root,
[data-bs-theme="light"] {
    /* Sagt dem Browser, in welchem Modus er seine EIGENEN Bedienelemente zeichnen soll -
       Datums-/Zeitwaehler, aufgeklappte <select>-Listen, Suchfeld-Loeschkreuz, native
       Scrollbalken. Ohne diese Zeile bleiben die im Dunkelmodus hellgrau und stechen
       heraus; sie lassen sich mit CSS sonst nicht erreichen. */
    color-scheme: light;

    /* --- shadcn-Standardpalette, Hellmodus (unveraendert uebernommen) --- */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 5% 38%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 6% 86%;
    --input: 240 6% 82%;
    --ring: 240 10% 3.9%;
    --radius: 0.5rem;

    /* --- Abgeleitete Radien: shadcn nutzt fuer Buttons/Felder einen Tick weniger --- */
    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    /* --- Semantische Zusatzfarben ---------------------------------------------------
     * Diese sind NICHT Teil der shadcn-Grundpalette, aber fachlich unverzichtbar:
     * Gewinn/Verlust und die Kennzahl-Kacheln muessen unterscheidbar bleiben. Bewusst
     * gedaempfter und weniger bunt als die alten iOS-Farben, damit sie zur Palette passen. */
    --positive: 144 80% 29%;   /* Gewinn  */
    --negative: 0 82% 45%;     /* Verlust */
    --accent-green: 144 78% 29%;
    --accent-red: 0 82% 47%;
    --accent-blue: 221 83% 45%;
    --accent-orange: 28 92% 37%;
    --accent-teal: 190 90% 30%;
    --accent-purple: 271 65% 48%;

    /* --- Diagramm-Palette (Ringdiagramme Branchen/Laender auf dem Dashboard) --------
     * Zwoelf Farbtoene mit einheitlicher Saettigung/Helligkeit, damit keiner heraussticht.
     * Wird von dashboard.html ausgelesen. */
    --chart-1: 221 83% 45%;
    --chart-2: 145 72% 33%;
    --chart-3: 28 92% 42%;
    --chart-4: 271 70% 52%;
    --chart-5: 0 82% 48%;
    --chart-6: 190 90% 33%;
    --chart-7: 84 62% 33%;
    --chart-8: 45 95% 36%;
    --chart-9: 320 65% 47%;
    --chart-10: 215 18% 45%;
    --chart-11: 340 78% 48%;
    --chart-12: 20 55% 40%;

    /* --- Schattierung: shadcn arbeitet fast schattenlos ----------------------------- */
    --shadow-xs: 0 1px 2px 0 hsl(var(--foreground) / 0.05);
    --shadow-sm: 0 1px 3px 0 hsl(var(--foreground) / 0.08), 0 1px 2px -1px hsl(var(--foreground) / 0.06);
    --shadow-md: 0 4px 12px -2px hsl(var(--foreground) / 0.10), 0 2px 4px -2px hsl(var(--foreground) / 0.06);

    /* --- Altlasten-Bruecke ----------------------------------------------------------
     * Einzelne Templates (trade_form, kalender, hilfe_release_notes, index/aktien/pivot)
     * benutzen noch --glass-bg / --glass-border aus dem alten Glas-Design. Statt sie
     * ueberall zu suchen, zeigen die beiden Namen jetzt einfach auf die neuen Token. */
    --glass-bg: hsl(var(--muted));
    --glass-border: hsl(var(--border));
}

[data-bs-theme="dark"] {
    /* --- shadcn-Standardpalette, Dunkelmodus ---------------------------------------
     * Bewusst NICHT die rohe shadcn-Vorlage: dort sind --card/--popover identisch mit
     * --background und --border/--input/--muted/--accent alle derselbe Wert (15.9%).
     * In einer Anwendung mit vielen Karten, Tabellen und Dialogen ergibt das eine sehr
     * flache Flaeche, in der nichts mehr voneinander abgesetzt ist.
     *
     * Stattdessen eine gestufte Leiter aus wenigen, klar unterscheidbaren Helligkeiten
     * (der uebliche Weg fuer dunkle Oberflaechen mit viel Inhalt):
     *   3.9 %  Seitenhintergrund  (--background)
     *  10   %  Karten             (--card)
     *  12   %  schwebende Ebenen  (--popover: Dropdown, Dialog, Select2-Liste)
     *  15   %  ruhige Fuellung    (--muted: Tabellenkopf, Summenzeile, Alert)
     *  18   %  Sekundaerflaeche   (--secondary: Buttons, Plaketten)
     *  20   %  Raender            (--border)
     *  22   %  Hover/aktiv        (--accent)
     *  26   %  Feldraender        (--input) - Formularfelder sollen sichtbar umrandet sein
     * Damit hebt sich jede Ebene von der darunter ab, ohne dass irgendwo grau wird. */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 6% 10%;
    --card-foreground: 0 0% 98%;
    --popover: 240 6% 12%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 4% 18%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 4% 15%;
    /* 64.9 % (shadcn-Vorgabe) trifft auf --muted knapp 6:1 - fuer die vielen sehr kleinen
       Sekundaertexte (Kachel-Formeln 0.6875rem, Tabellenkopf 0.75rem) zu knapp. */
    --muted-foreground: 240 5% 68%;
    --accent: 240 5% 22%;
    --accent-foreground: 0 0% 98%;
    /* Bleibt ein DUNKLES Rot mit weisser Schrift (nur .btn-danger nutzt es als Flaeche) -
       ein hellrot geflutetes Loeschen-Feld waere auf dunklem Grund viel zu laut. Die
       semantische Verlustfarbe fuer Text ist --negative, siehe unten. */
    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 100%;
    --border: 240 5% 20%;
    --input: 240 5% 26%;
    --ring: 240 5% 72%;

    /* Auf dunklem Grund brauchen die semantischen Farben mehr Helligkeit, sonst sind sie
       nicht mehr lesbar - aber weniger Saettigung als zuvor (65 %/80 %), sonst leuchten
       ganze Zahlenspalten neongruen bzw. neonpink. Geprueft: Gruen 8,5:1 und Rot 5,5:1
       gegen die Kartenflaeche, beide also klar ueber der Lesbarkeitsschwelle. */
    --positive: 145 72% 50%;
    --negative: 2 88% 64%;
    --accent-green: 145 72% 50%;
    --accent-red: 2 88% 64%;
    --accent-blue: 217 95% 66%;
    --accent-orange: 32 100% 58%;
    --accent-teal: 189 90% 52%;
    --accent-purple: 271 85% 72%;

    --chart-1: 217 95% 66%;
    --chart-2: 145 68% 52%;
    --chart-3: 32 100% 58%;
    --chart-4: 271 85% 72%;
    --chart-5: 2 88% 64%;
    --chart-6: 189 90% 52%;
    --chart-7: 84 60% 52%;
    --chart-8: 45 95% 56%;
    --chart-9: 320 75% 66%;
    --chart-10: 215 22% 62%;
    --chart-11: 340 82% 66%;
    --chart-12: 20 62% 56%;

    /* Auf Dunkel wirken helle Schatten falsch - Schatten kommen hier aus Schwarz. Sie
       tragen hier ohnehin wenig (Schwarz auf fast Schwarz); die Abgrenzung leisten die
       gestufte Flaechenhelligkeit und der 1px-Rand. */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 8px 24px -6px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.5);

    color-scheme: dark;

    /* DataTables faerbt seine "Blocker" (die kleinen Flicken ueber den fixierten Spalten)
       aus dieser eigenen Variable. Ihr Standardwert ist hart "white"; die mitgelieferte
       Dunkel-Fassung haengt an einer Klasse .dark, die diese App nicht benutzt. */
    --dt-html-background: hsl(var(--background));
}


/* =====================================================================================
 * 2. BOOTSTRAP-BRUECKE
 * Bootstrap 5.3 rechnet intern mit eigenen Variablen. Werden die einmal zentral auf die
 * shadcn-Token umgebogen, ziehen sehr viele Komponenten automatisch mit und brauchen
 * keine Einzelregel mehr.
 * ===================================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: hsl(var(--background));
    --bs-body-color: hsl(var(--foreground));
    --bs-emphasis-color: hsl(var(--foreground));
    --bs-heading-color: hsl(var(--foreground));

    --bs-secondary-color: hsl(var(--muted-foreground));
    --bs-secondary-bg: hsl(var(--secondary));
    --bs-tertiary-color: hsl(var(--muted-foreground));
    --bs-tertiary-bg: hsl(var(--muted));

    --bs-border-color: hsl(var(--border));
    --bs-border-color-translucent: hsl(var(--border));
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-lg);
    --bs-border-radius-pill: 9999px;

    --bs-link-color: hsl(var(--foreground));
    --bs-link-hover-color: hsl(var(--foreground));

    --bs-focus-ring-color: hsl(var(--ring) / 0.35);
    --bs-focus-ring-width: 3px;

    /* Fuer die wenigen Stellen, an denen Bootstrap direkt eine Utility-Farbe zieht. */
    --bs-primary: hsl(var(--primary));
    --bs-danger: hsl(var(--destructive));
    --bs-code-color: hsl(var(--foreground));
}
/* --bs-link-color-rgb wird von den .link-*-Hilfsklassen zusammen mit --bs-link-opacity
   benutzt und braucht deshalb echte RGB-Zahlen - die lassen sich nicht aus den HSL-Token
   ableiten, also je Modus einmal von Hand. */
:root, [data-bs-theme="light"] { --bs-link-color-rgb: 9, 9, 11; --bs-body-color-rgb: 9, 9, 11; --bs-body-bg-rgb: 255, 255, 255; }
[data-bs-theme="dark"] { --bs-link-color-rgb: 250, 250, 250; --bs-body-color-rgb: 250, 250, 250; --bs-body-bg-rgb: 9, 9, 11; }


/* =====================================================================================
 * 3. GRUNDLAGEN
 * ===================================================================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: hsl(var(--foreground));
}
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: 0.9375rem; }

/* Sekundaertext: in shadcn immer --muted-foreground, nie "einfach transparenter". */
.text-muted,
.text-secondary,
.text-body-secondary { color: hsl(var(--muted-foreground)) !important; }

hr { border-color: hsl(var(--border)); opacity: 1; }

a { color: hsl(var(--foreground)); text-underline-offset: 0.2em; }
a:hover { color: hsl(var(--foreground)); }
a.text-decoration-none:hover { color: inherit; }

code, kbd, samp {
    font-size: 0.85em;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

::selection { background: hsl(var(--foreground) / 0.12); }

*:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Schmale, unauffaellige Scrollbalken statt der breiten grauen aus dem alten Design. */
* { scrollbar-color: hsl(var(--border)) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 9999px;
    border: 2px solid hsl(var(--background));
}
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }


/* =====================================================================================
 * 4. NAVIGATION
 * Frueher: milchige Glasleiste mit backdrop-filter. Jetzt: flache Flaeche, unten 1px Rand.
 * ===================================================================================== */

.navbar {
    background: hsl(var(--background)) !important;
    border-bottom: 1px solid hsl(var(--border));
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Der obere Sicherheitsabstand ist im Browser 0 und wird nur in der iOS-App wirksam
       (dort zusammen mit viewport-fit=cover in der Kopfzeile). Ohne ihn laege die Marke
       unter der Statusleiste bzw. der Dynamic Island. */
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: 0.5rem;
    box-shadow: none;
}
/* Seitlicher Abstand fuer das Querformat: dort liegen die Sicherheitsbereiche links und
   rechts, sonst klebt der Inhalt an der abgerundeten Ecke. */
body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
.navbar-brand {
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.02em;
    color: hsl(var(--foreground));
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.navbar-brand:hover { color: hsl(var(--foreground)); }

.nav-link {
    color: hsl(var(--muted-foreground));
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    margin: 0 1px;
    padding: 0.375rem 0.625rem !important;
    transition: color 0.15s ease, background-color 0.15s ease;
    /* Ohne dies bricht der Browser an den Bindestrichen um ("Rendite-/Check",
       "Portfolio-/Delta", "Options-/Finder") und die Leiste wird zweizeilig. */
    white-space: nowrap;
}

/* Alle Eintraege auf eine gemeinsame Mittellinie. Die rechte Gruppe hatte das ueber eine
   Hilfsklasse im Markup, die linke nicht - dadurch standen Text- und Symboleintraege
   unterschiedlich hoch. */
.navbar .navbar-nav {
    align-items: center;
    flex-wrap: nowrap;
}

/* Die E-Mail-Adresse ist der laengste und zugleich unwichtigste Eintrag. Sie darf schrumpfen
   und notfalls abgeschnitten werden, damit die Menuepunkte immer vollstaendig sichtbar
   bleiben; der vollstaendige Wert steht im Tooltip. */
.navbar .nav-link.text-muted {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zwischen 992 und 1400 Pixeln wird es eng, sobald alle Menuepunkte sichtbar sind - dort
   etwas enger setzen, statt umzubrechen. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar .nav-link { padding: 0.375rem 0.45rem !important; margin: 0; }
    .navbar .nav-link.text-muted { max-width: 14ch; }
}
/* Zwischen 992 und 1150 px reicht der Platz auch mit dem Aufklappmenue "Analyse" nicht:
   gemessen standen dort noch rund 54 Bildpunkte ueber, was die ganze SEITE waagrecht scrollen
   liess. Deshalb entfaellt in diesem Bereich die Zoom-Bedienung (reine Bequemlichkeit, ueber
   den Browser-Zoom ohnehin vorhanden) und die E-Mail-Anzeige wird weiter gekuerzt. Sie bleibt
   aber sichtbar - bei mehreren Konten in einem Haushalt ist der Hinweis, wer gerade angemeldet
   ist, keine Zierde. Der vollstaendige Text steht weiterhin im Tooltip. */
@media (min-width: 992px) and (max-width: 1149.98px) {
    .navbar .zoom-btn,
    .navbar .zoom-level { display: none !important; }
    .navbar .nav-link.text-muted { max-width: 10ch; overflow: hidden; text-overflow: ellipsis;
                                   white-space: nowrap; }
}
.nav-link:hover,
.nav-link:focus { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.nav-link.active {
    color: hsl(var(--accent-foreground));
    background: hsl(var(--accent));
    font-weight: 600;
}
.navbar .nav-link.text-muted { color: hsl(var(--muted-foreground)) !important; }
.navbar .nav-link.text-muted:hover { background: transparent; }

.theme-toggle { cursor: pointer; font-size: 1rem; opacity: 1; }
.zoom-btn { opacity: 1 !important; }
.zoom-level { font-variant-numeric: tabular-nums; }


/* =====================================================================================
 * 5. FLAECHEN
 * shadcn grenzt Flaechen ueber einen 1px-Rand ab, nicht ueber Schatten oder Weichzeichner.
 * ===================================================================================== */

.card {
    --bs-card-bg: hsl(var(--card));
    --bs-card-color: hsl(var(--card-foreground));
    --bs-card-border-color: hsl(var(--border));
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: hsl(var(--card-foreground));
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: var(--shadow-xs);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--card-foreground));
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    padding: 0.875rem 1.125rem;
}
.card-footer { background: transparent; border-top: 1px solid hsl(var(--border)); }
.card-title { font-weight: 600; letter-spacing: -0.02em; }
.card-subtitle, .card-text.text-muted { color: hsl(var(--muted-foreground)); }

.dropdown-menu {
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 0.25rem;
    font-size: 0.875rem;
}
.dropdown-item {
    border-radius: var(--radius-md);
    color: hsl(var(--popover-foreground));
    padding: 0.375rem 0.625rem;
}
.dropdown-item:hover,
.dropdown-item:focus { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.dropdown-item.active,
.dropdown-item:active { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.dropdown-divider { border-color: hsl(var(--border)); }
.dropdown-header { color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 600; }

.list-group {
    --bs-list-group-bg: hsl(var(--card));
    --bs-list-group-color: hsl(var(--card-foreground));
    --bs-list-group-border-color: hsl(var(--border));
    --bs-list-group-border-radius: var(--radius-lg);
    --bs-list-group-action-hover-bg: hsl(var(--muted));
    --bs-list-group-action-hover-color: hsl(var(--foreground));
    --bs-list-group-action-active-bg: hsl(var(--accent));
    --bs-list-group-action-active-color: hsl(var(--accent-foreground));
    font-size: 0.875rem;
}

.modal-content {
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.modal-header, .modal-footer { border-color: hsl(var(--border)); }

.accordion {
    --bs-accordion-bg: hsl(var(--card));
    --bs-accordion-color: hsl(var(--card-foreground));
    --bs-accordion-border-color: hsl(var(--border));
    --bs-accordion-border-radius: var(--radius-lg);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-color: hsl(var(--foreground));
    --bs-accordion-active-bg: hsl(var(--muted));
    --bs-accordion-active-color: hsl(var(--foreground));
    --bs-accordion-btn-focus-box-shadow: none;
}

/* --- Alerts: flache, getoente Hinweisflaechen mit 1px-Rand ------------------------- */
.alert {
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    box-shadow: none;
}
/* Die Bedeutung tragen Flaechenton und Rand; der Fliesstext bleibt in --foreground und damit
   auch bei laengeren Hinweiskaesten (Break-Even-Erklaerung, Pre-Trade-Checkliste) gut
   lesbar. Nur Symbol, Ueberschrift und Verweise nehmen die Signalfarbe an. */
.alert-success {
    background: hsl(var(--positive) / 0.08);
    border-color: hsl(var(--positive) / 0.28);
}
.alert-success > .bi, .alert-success > i, .alert-success strong, .alert-success .alert-link,
.alert-success h1, .alert-success h2, .alert-success h3, .alert-success h4, .alert-success h5, .alert-success h6 {
    color: hsl(var(--positive));
}
.alert-danger, .alert-error {
    background: hsl(var(--destructive) / 0.08);
    border-color: hsl(var(--destructive) / 0.30);
}
.alert-danger > .bi, .alert-danger > i, .alert-danger strong, .alert-danger .alert-link,
.alert-danger h1, .alert-danger h2, .alert-danger h3, .alert-danger h4, .alert-danger h5, .alert-danger h6 {
    color: hsl(var(--negative));
}
.alert-warning {
    background: hsl(var(--accent-orange) / 0.10);
    border-color: hsl(var(--accent-orange) / 0.30);
}
.alert-warning > .bi, .alert-warning > i, .alert-warning strong, .alert-warning .alert-link,
.alert-warning h1, .alert-warning h2, .alert-warning h3, .alert-warning h4, .alert-warning h5, .alert-warning h6 {
    color: hsl(var(--accent-orange));
}
.alert-info {
    background: hsl(var(--accent-blue) / 0.08);
    border-color: hsl(var(--accent-blue) / 0.28);
}
.alert-info > .bi, .alert-info > i, .alert-info strong, .alert-info .alert-link,
.alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4, .alert-info h5, .alert-info h6 {
    color: hsl(var(--accent-blue));
}
.alert .alert-link { font-weight: 600; }
.btn-close { --bs-btn-close-color: hsl(var(--foreground)); opacity: 0.5; }
.btn-close:hover { opacity: 1; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }


/* =====================================================================================
 * 6. BEDIENELEMENTE
 * ===================================================================================== */

/* --- Buttons ---------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-padding-y: 0.4375rem;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}
.btn-sm {
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-padding-x: 0.6875rem;
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-border-radius: var(--radius-md);
}
.btn-lg { --bs-btn-font-size: 0.9375rem; --bs-btn-border-radius: var(--radius-md); }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* Hauptaktion: fast schwarz auf weiss (bzw. weiss auf fast schwarz im Dunkelmodus). */
.btn-primary,
.btn-dark {
    --bs-btn-bg: hsl(var(--primary));
    --bs-btn-border-color: hsl(var(--primary));
    --bs-btn-color: hsl(var(--primary-foreground));
    --bs-btn-hover-bg: hsl(var(--primary) / 0.88);
    --bs-btn-hover-border-color: hsl(var(--primary) / 0.88);
    --bs-btn-hover-color: hsl(var(--primary-foreground));
    --bs-btn-active-bg: hsl(var(--primary) / 0.8);
    --bs-btn-active-border-color: hsl(var(--primary) / 0.8);
    --bs-btn-active-color: hsl(var(--primary-foreground));
    --bs-btn-disabled-bg: hsl(var(--primary) / 0.5);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-color: hsl(var(--primary-foreground));
}

.btn-secondary,
.btn-light {
    --bs-btn-bg: hsl(var(--secondary));
    --bs-btn-border-color: hsl(var(--secondary));
    --bs-btn-color: hsl(var(--secondary-foreground));
    --bs-btn-hover-bg: hsl(var(--secondary) / 0.75);
    --bs-btn-hover-border-color: hsl(var(--secondary) / 0.75);
    --bs-btn-hover-color: hsl(var(--secondary-foreground));
    --bs-btn-active-bg: hsl(var(--secondary) / 0.7);
    --bs-btn-active-border-color: hsl(var(--secondary) / 0.7);
    --bs-btn-active-color: hsl(var(--secondary-foreground));
}

/* Der mit Abstand haeufigste Button in der App - die shadcn-"outline"-Variante. */
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark,
.btn-outline-light {
    --bs-btn-color: hsl(var(--foreground));
    --bs-btn-border-color: hsl(var(--border));
    --bs-btn-bg: hsl(var(--background));
    --bs-btn-hover-bg: hsl(var(--accent));
    --bs-btn-hover-border-color: hsl(var(--border));
    --bs-btn-hover-color: hsl(var(--accent-foreground));
    --bs-btn-active-bg: hsl(var(--accent));
    --bs-btn-active-border-color: hsl(var(--border));
    --bs-btn-active-color: hsl(var(--accent-foreground));
    --bs-btn-disabled-color: hsl(var(--muted-foreground));
    --bs-btn-disabled-border-color: hsl(var(--border));
}

/* Gefaehrliche Aktionen bleiben klar rot erkennbar. */
.btn-danger {
    --bs-btn-bg: hsl(var(--negative));
    --bs-btn-border-color: hsl(var(--negative));
    --bs-btn-color: hsl(var(--destructive-foreground));
    --bs-btn-hover-bg: hsl(var(--negative) / 0.88);
    --bs-btn-hover-border-color: hsl(var(--negative) / 0.88);
    --bs-btn-hover-color: hsl(var(--destructive-foreground));
    --bs-btn-active-bg: hsl(var(--negative) / 0.8);
    --bs-btn-active-border-color: hsl(var(--negative) / 0.8);
    --bs-btn-active-color: hsl(var(--destructive-foreground));
}
.btn-outline-danger {
    --bs-btn-color: hsl(var(--negative));
    --bs-btn-border-color: hsl(var(--negative) / 0.35);
    --bs-btn-bg: hsl(var(--background));
    --bs-btn-hover-bg: hsl(var(--negative) / 0.08);
    --bs-btn-hover-border-color: hsl(var(--negative) / 0.45);
    --bs-btn-hover-color: hsl(var(--negative));
    --bs-btn-active-bg: hsl(var(--negative) / 0.12);
    --bs-btn-active-border-color: hsl(var(--negative) / 0.45);
    --bs-btn-active-color: hsl(var(--negative));
}

/* Bestaetigende Aktionen (Sync/Speichern) - gedaempftes Gruen statt Bootstrap-Signalgruen. */
.btn-success {
    --bs-btn-bg: hsl(var(--positive));
    --bs-btn-border-color: hsl(var(--positive));
    --bs-btn-color: hsl(var(--primary-foreground));
    --bs-btn-hover-bg: hsl(var(--positive) / 0.88);
    --bs-btn-hover-border-color: hsl(var(--positive) / 0.88);
    --bs-btn-hover-color: hsl(var(--primary-foreground));
    --bs-btn-active-bg: hsl(var(--positive) / 0.8);
    --bs-btn-active-border-color: hsl(var(--positive) / 0.8);
    --bs-btn-active-color: hsl(var(--primary-foreground));
    --bs-btn-disabled-bg: hsl(var(--positive) / 0.5);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-color: hsl(var(--primary-foreground));
}
.btn-outline-success {
    --bs-btn-color: hsl(var(--positive));
    --bs-btn-border-color: hsl(var(--positive) / 0.35);
    --bs-btn-bg: hsl(var(--background));
    --bs-btn-hover-bg: hsl(var(--positive) / 0.08);
    --bs-btn-hover-border-color: hsl(var(--positive) / 0.45);
    --bs-btn-hover-color: hsl(var(--positive));
    --bs-btn-active-bg: hsl(var(--positive) / 0.12);
    --bs-btn-active-border-color: hsl(var(--positive) / 0.45);
    --bs-btn-active-color: hsl(var(--positive));
}

.btn-link {
    --bs-btn-color: hsl(var(--foreground));
    --bs-btn-hover-color: hsl(var(--foreground));
    text-underline-offset: 0.25em;
}

/* --- Formularfelder --------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--input));
    color: hsl(var(--foreground));
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    padding: 0.4375rem 0.6875rem;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control-sm, .form-select-sm {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
}
.form-control::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
.form-control:focus,
.form-select:focus {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    border-color: hsl(var(--ring));
    outline: none;
    /* Der typische shadcn-Fokusring: erst ein Absatz in Hintergrundfarbe, dann der Ring. */
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.65);
}
.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    opacity: 1;
}
.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 0.375rem;
}
.form-text { color: hsl(var(--muted-foreground)); font-size: 0.8125rem; }
.col-form-label { font-size: 0.875rem; font-weight: 500; }

.input-group-text {
    background: hsl(var(--muted));
    border-color: hsl(var(--input));
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    border-radius: var(--radius-md);
}

.form-check-input {
    background-color: hsl(var(--background));
    border-color: hsl(var(--border));
    box-shadow: none;
}
.form-check-input:checked {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
}
.form-check-input:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.65);
}
.form-check-label { font-size: 0.875rem; }
/* Im Dunkelmodus ist --primary fast weiss - Haken bzw. Schalterknopf muessen dann dunkel
   sein, sonst waeren sie weiss auf weiss und damit unsichtbar. */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a0a0b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230a0a0b'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230a0a0b'/%3e%3c/svg%3e");
}

/* --- Badges: in shadcn kleine, ruhige Plaketten mit 1px-Rand ---------------------- */
.badge {
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    padding: 0.2em 0.5em;
    border: 1px solid transparent;
    letter-spacing: 0;
}
.badge.bg-secondary {
    background: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
    border-color: hsl(var(--border));
}
.badge.bg-success {
    background: hsl(var(--positive) / 0.16) !important;
    color: hsl(var(--positive)) !important;
    border-color: hsl(var(--positive) / 0.40);
}
.badge.bg-danger {
    background: hsl(var(--negative) / 0.16) !important;
    color: hsl(var(--negative)) !important;
    border-color: hsl(var(--negative) / 0.40);
}
/* bg-warning = Put, bg-info = alles andere (Call, Iron Condor ...) in der Trades-Tabelle.
   Muessen unterscheidbar bleiben, deshalb bewusst zwei klar verschiedene Farbtoene (warm/kalt)
   statt neutralem Grau. Die hoehere Spezifitaet ist noetig, weil im Markup zusaetzlich
   .text-dark steht.

   VOLL GEFUELLT statt zart getoent (Rueckmeldung: die Typ-Plaketten waren zu blass). Der Typ
   ist das wichtigste Ordnungsmerkmal einer Zeile und darf deshalb kraeftiger auftreten als der
   Status daneben ("Offen"/"Geschlossen"), der bewusst zart bleibt - so entsteht eine
   Rangfolge statt eines Farbwettbewerbs.
   Kontrast nachgerechnet: weisse Schrift auf Orange 4,79:1, auf Blau 6,77:1. */
.badge.bg-warning,
.badge.bg-warning.text-dark {
    background: hsl(var(--accent-orange)) !important;
    color: #fff !important;
    border-color: hsl(var(--accent-orange));
}
.badge.bg-info,
.badge.bg-info.text-dark {
    background: hsl(var(--accent-blue)) !important;
    color: #fff !important;
    border-color: hsl(var(--accent-blue));
}
.badge.bg-primary {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

/* --- Gewinn/Verlust: bleibt semantisch, nur gedaempfter ---------------------------- */
.pos { color: hsl(var(--positive)) !important; }
.neg { color: hsl(var(--negative)) !important; }
.pos a, .neg a { color: inherit !important; }

/* --- Farb-Hilfsklassen von Bootstrap auf die Palette umbiegen ---------------------
 * Betrifft u.a. den Hinweis "gelb markiert" in den Einstellungen, die farbig umrandete
 * Abo-Karte und das Margin-Feld im Trade-Formular (bekommt per JS .border-warning). */
.text-success { color: hsl(var(--positive)) !important; }
.text-danger { color: hsl(var(--negative)) !important; }
.text-warning { color: hsl(var(--accent-orange)) !important; }
.text-info { color: hsl(var(--accent-blue)) !important; }
.border-success { border-color: hsl(var(--positive) / 0.45) !important; }
.border-danger { border-color: hsl(var(--negative) / 0.45) !important; }
.border-warning { border-color: hsl(var(--accent-orange) / 0.6) !important; }
.border-info { border-color: hsl(var(--accent-blue) / 0.45) !important; }

/* Der "Datenbank leeren"-Kartenkopf in den Einstellungen ist im Markup bg-danger +
   text-white. Als flache, getoente Warnflaeche statt Signalrot - .text-white muss dafuer
   mit hoeherer Spezifitaet zurueckgenommen werden. */
.card-header.bg-danger,
.card-header.bg-danger.text-white {
    background: hsl(var(--negative) / 0.10) !important;
    color: hsl(var(--negative)) !important;
    border-bottom-color: hsl(var(--negative) / 0.25);
}


/* =====================================================================================
 * 7. TABELLEN
 * Ruhig: Kopfzeile in --muted, duenne Trennlinien, kaum Zebra, Hover in --muted.
 * ===================================================================================== */

/* Bootstrap malt Streifen und Hover ueber einen riesigen inset-Schatten
   (box-shadow: inset 0 0 0 9999px ...). Das ueberdeckt jede eigene background-color - unter
   anderem den Tint offener Trades. Deshalb wird der Mechanismus hier abgeschaltet
   (--bs-table-*-bg: transparent, box-shadow: none) und Streifen/Hover werden direkt ueber
   background-color gesetzt. Dadurch bleibt die Reihenfolge steuerbar:
   Hover schlaegt "offener Trade" schlaegt Streifen. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: hsl(var(--foreground));
    --bs-table-border-color: hsl(var(--border));
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: hsl(var(--foreground));
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: hsl(var(--foreground));
    --bs-table-accent-bg: transparent;
    border-collapse: separate;
    border-spacing: 0;
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}
.table > :not(caption) > * > * {
    border-bottom: 1px solid hsl(var(--border));
    background-color: transparent;
    box-shadow: none;
}
/* Nur ein Hauch Zebra - shadcn-Tabellen sind bewusst ruhig. */
.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: hsl(var(--muted) / 0.45); }

/* Bootstrap-Klasse .table-dark steht im Markup noch auf einigen <thead> - hier neutralisiert
   und durch die ruhige shadcn-Kopfzeile ersetzt. */
.table > thead.table-dark,
.table > thead {
    --bs-table-bg: transparent;
    --bs-table-color: hsl(var(--muted-foreground));
    --bs-table-border-color: hsl(var(--border));
}
.table thead th,
.table thead.table-dark th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    padding: 0.5rem 0.5rem !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    vertical-align: middle;
}
/* Die Filterzeile unter den Spaltenkoepfen (index/aktien/pivot) soll eng bleiben - die
   allgemeine Kopfzeilen-Polsterung oben wuerde sie sonst unnoetig hoch machen. */
.table thead tr.filter-row th { padding: 0.1875rem 0.25rem !important; }
.table td {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.5rem !important;
    vertical-align: middle;
    white-space: nowrap;
    color: hsl(var(--foreground));
}
.table-hover > tbody > tr:hover > td {
    background-color: hsl(var(--muted)) !important;
    background-image: none !important;
    color: hsl(var(--foreground));
}

.table-responsive { max-height: calc(100vh - 260px); overflow-y: auto; overflow-x: auto; }

/* Summenzeile am Tabellenfuss */
.sum-footer {
    font-weight: 600;
    font-size: 0.8125rem;
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--muted));
}
.sum-footer td {
    padding: 0.5rem !important;
    background: hsl(var(--muted));
    border-top: 1px solid hsl(var(--border));
}

/* Offene Trades: frueher blauer Flaechen-Tint plus 3px-Rand an JEDER Zelle. Jetzt nur noch
   ein feiner Tint und ein Markierungsstreifen an der ersten Zelle der Zeile. */
tr.row-open > td {
    background-color: hsl(var(--accent-blue) / 0.07) !important;
    border-left: 0;
}
/* Die hohe Spezifitaet ist noetig, weil DataTables allen Zellen einen eigenen box-shadow
   verpasst (siehe Abschnitt 9) - sonst faellt der Markierungsstreifen weg. */
table.dataTable tr.row-open > td:first-child,
tr.row-open > td:first-child {
    box-shadow: inset 3px 0 0 0 hsl(var(--accent-blue)) !important;
}
.card.row-open {
    border-left: 2px solid hsl(var(--accent-blue)) !important;
    background: hsl(var(--accent-blue) / 0.04);
}


/* =====================================================================================
 * 8. DASHBOARD - Kennzahl-Kacheln
 * ===================================================================================== */

.stat-card {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background: hsl(var(--card));
    box-shadow: var(--shadow-xs);
    min-height: 168px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Kein Anheben mehr - shadcn-Karten bleiben liegen und werden nur etwas deutlicher. */
.stat-card:hover {
    transform: none;
    border-color: hsl(var(--foreground) / 0.18);
    box-shadow: var(--shadow-sm);
}
.stat-card-link { display: block; height: 100%; color: inherit; }

.stat-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 10px;
}
.stat-icon.green  { background: hsl(var(--accent-green) / 0.12);  color: hsl(var(--accent-green)); }
.stat-icon.red    { background: hsl(var(--accent-red) / 0.12);    color: hsl(var(--accent-red)); }
.stat-icon.blue   { background: hsl(var(--accent-blue) / 0.12);   color: hsl(var(--accent-blue)); }
.stat-icon.orange { background: hsl(var(--accent-orange) / 0.12); color: hsl(var(--accent-orange)); }
.stat-icon.teal   { background: hsl(var(--accent-teal) / 0.12);   color: hsl(var(--accent-teal)); }
.stat-icon.purple { background: hsl(var(--accent-purple) / 0.12); color: hsl(var(--accent-purple)); }

.stat-card .fs-4 {
    font-weight: 600;
    font-size: 1.5rem !important;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.stat-card .stat-formula {
    font-size: 0.6875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.35;
    margin: 2px 0 6px;
}
.stat-card .text-muted.small { font-size: 0.8125rem; }


/* =====================================================================================
 * 9. FREMDKOMPONENTEN
 * ===================================================================================== */

/* --- DataTables 2.x (Klassen dt-container/dt-search/dt-length/dt-paging/dt-info) --- */
div.dt-container { font-size: 0.875rem; overflow-x: auto; }
div.dt-container .dt-layout-row { align-items: center; }

div.dt-container .dt-search,
div.dt-container .dt-length { color: hsl(var(--muted-foreground)); font-size: 0.8125rem; }
div.dt-container .dt-search label,
div.dt-container .dt-length label { font-weight: 500; }
div.dt-container .dt-search input,
div.dt-container .dt-length select,
div.dt-container .dt-input {
    background: hsl(var(--background));
    border: 1px solid hsl(var(--input));
    color: hsl(var(--foreground));
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    padding: 0.3125rem 0.5625rem;
    box-shadow: none;
}
div.dt-container .dt-search input { min-width: 220px; }
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus,
div.dt-container .dt-input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.65);
}
div.dt-container .dt-info { color: hsl(var(--muted-foreground)); font-size: 0.8125rem; padding-top: 0.5rem; }
div.dt-container .dt-empty { color: hsl(var(--muted-foreground)); }

/* Blaetternavigation: schlichte Outline-Knoepfe, aktive Seite in --primary. */
div.dt-container .dt-paging .pagination { --bs-pagination-border-radius: var(--radius-md); gap: 0.25rem; }
.page-link {
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md) !important;
    font-size: 0.8125rem;
    padding: 0.3125rem 0.625rem;
    box-shadow: none;
}
.page-link:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-color: hsl(var(--border)); }
.page-link:focus { box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.65); }
.page-item.active .page-link {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}
.page-item.disabled .page-link {
    background: hsl(var(--background));
    color: hsl(var(--muted-foreground));
    border-color: hsl(var(--border));
    opacity: 0.5;
}

/* Sortierpfeile: im Ruhezustand kaum sichtbar, aktiv in --foreground. */
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc { cursor: pointer; }
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover { background: hsl(var(--accent)) !important; }
table.dataTable thead > tr > th span.dt-column-order:before,
table.dataTable thead > tr > th span.dt-column-order:after {
    color: hsl(var(--muted-foreground));
    opacity: 0.35;
}
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after {
    color: hsl(var(--foreground));
    opacity: 1;
}
table.dataTable > tbody > tr > * { box-shadow: none !important; }
div.dt-processing {
    background: hsl(var(--popover));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: hsl(var(--foreground));
}

/* --- FixedColumns: fixierte Spalten muessen blickdicht sein ----------------------
   Die App setzt --bs-table-bg nicht auf den Zellen, deshalb waeren die fixierten Spalten
   durchsichtig und der weggescrollte Inhalt schiene durch. Die Streifen werden ueber ein
   zusaetzliches background-image nachgebildet, statt sie zu verlieren. */
table.dataTable tbody tr > .dtfc-fixed-start,
table.dataTable tbody tr > .dtfc-fixed-end {
    background-color: hsl(var(--background));
}
table.dataTable thead tr > .dtfc-fixed-start,
table.dataTable thead tr > .dtfc-fixed-end,
table.dataTable tfoot tr > .dtfc-fixed-start,
table.dataTable tfoot tr > .dtfc-fixed-end {
    background-color: hsl(var(--muted));
}
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > .dtfc-fixed-start,
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > .dtfc-fixed-end {
    background-color: hsl(var(--background));
    background-image: linear-gradient(hsl(var(--muted) / 0.5), hsl(var(--muted) / 0.5));
}
/* tr.row-open > td setzt seinen Tint mit !important - hier mit hoeherer Spezifitaet
   ueberschreiben, sonst bleiben offene Trades in den fixierten Spalten durchsichtig. */
table.dataTable tr.row-open > td.dtfc-fixed-start,
table.dataTable tr.row-open > td.dtfc-fixed-end {
    background-color: hsl(var(--background)) !important;
    background-image: linear-gradient(hsl(var(--accent-blue) / 0.07), hsl(var(--accent-blue) / 0.07)) !important;
}
/* Muss NACH allen Streifen-/Fixed-Column-Regeln stehen, sonst schlaegt deren hoehere
   Spezifitaet den Hover-Effekt (auch offene Zeilen sollen beim Ueberfahren reagieren). */
table.dataTable.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td {
    background-color: hsl(var(--muted)) !important;
    background-image: none !important;
}

/* DataTables haengt an jede Kopfzelle einen Sortierpfeil - auch an die Filterzeile, obwohl
   dort dank orderCellsTop gar nicht sortiert wird. Dort nur Zierrat, also ausblenden. */
table.dataTable thead tr.filter-row th span.dt-column-order { display: none; }

/* Bei waagerecht scrollenden Tabellen (scrollX, hier auf /app, /aktien und /pivot) baut
   DataTables ZWEI Tabellen uebereinander: die sichtbare Kopftabelle in div.dt-scroll-head
   und darunter die Datentabelle. Deren eigener <thead> dient nur noch zum Ausmessen der
   Spaltenbreiten und ist normalerweise 0 Pixel hoch (die Zellinhalte stecken in
   div.dt-scroll-sizing mit height:0).
   Die Kopfzeilen-Regel weiter oben (Polsterung 0.5rem, Flaeche --muted) trifft aber auch
   diesen Messkopf und macht ihn sichtbar: ein 24 Pixel hoher, leerer grauer Streifen mit
   verwaisten Sortierpfeilen zwischen Tabellenkopf und erster Datenzeile. Betrifft beide
   Modi, faellt auf dunklem Grund nur staerker auf.
   WICHTIG: nur die SENKRECHTE Polsterung zuruecknehmen. Die waagerechte bestimmt mit,
   welche Spaltenbreiten DataTables misst - wird sie geaendert, laufen Kopf- und
   Datentabelle um genau diesen Betrag auseinander. (Nachgemessen: Spaltenbreiten vor und
   nach dieser Regel identisch.) */
div.dt-scroll-body table.dataTable > thead > tr > th,
div.dt-scroll-body table.dataTable > thead > tr > td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    line-height: 0;
}
div.dt-scroll-body table.dataTable > thead span.dt-column-order { display: none; }

/* --- Select2 (Auswahlfelder im Trade-Formular) ------------------------------------ */
/* Select2 uebernimmt die Breite beim Start aus dem ersetzten <select> und bleibt sonst
   schmaler als das Raster - das empfiehlt auch die Anleitung des Bootstrap-5-Themes. */
.select2-container--bootstrap-5 { width: 100% !important; }
.select2-container--bootstrap-5 .select2-selection {
    background: hsl(var(--background));
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius-md);
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    box-shadow: none;
}
.select2-container--bootstrap-5 .select2-selection--single { padding: 0.4375rem 2.25rem 0.4375rem 0.6875rem; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: hsl(var(--foreground)); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: hsl(var(--muted-foreground)); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.65);
}
.select2-container--bootstrap-5 .select2-dropdown {
    background: hsl(var(--popover));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background: hsl(var(--background));
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius-md);
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.65);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option {
    color: hsl(var(--popover-foreground));
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    padding: 0.375rem 0.625rem;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--selected {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__message { color: hsl(var(--muted-foreground)); }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    color: hsl(var(--secondary-foreground));
}

/* --- Bootstrap-Icons: optisch mittig zur Schrift ---------------------------------- */
.btn > .bi, .nav-link > .bi, .badge > .bi { line-height: 1; }


/* =====================================================================================
 * 10. MOBIL
 * ===================================================================================== */

@media (max-width: 991.98px) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    .mobile-compact-table th { font-size: 0.6875rem; padding: 0.375rem 0.25rem !important; }
    .mobile-compact-table td { font-size: 0.75rem; padding: 0.3125rem 0.25rem !important; white-space: normal; }
    .table-responsive { max-height: none; }
}

/* Kartenansicht auf /app, /aktien, /pivot */
.mobile-trade-cards .card,
.aktien-mobile-card .card { box-shadow: none; }
.mobile-trade-cards .card:active,
.aktien-mobile-card .card:active { background: hsl(var(--muted)); }

/* Bottom-Tab-Bar: flach statt milchig, oben 1px Rand. */
.bottom-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: hsl(var(--background));
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid hsl(var(--border));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 991.98px) {
    .bottom-tab-bar { display: flex; }
}
.bottom-tab-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px 6px;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.bottom-tab-bar a i { font-size: 1.25rem; line-height: 1; }
.bottom-tab-bar a.active { color: hsl(var(--foreground)); font-weight: 600; }


/* =====================================================================================
 * 11. DUNKELMODUS-FEINSCHLIFF
 * =====================================================================================
 *
 * Alles oberhalb gilt fuer BEIDE Modi und arbeitet nur mit Token - das meiste zieht im
 * Dunkelmodus deshalb von allein mit. Was hier steht, sind die Faelle, in denen ein
 * einziger Wert fuer beide Modi nachweislich nicht reicht:
 *
 *   a) Deckkraft-Angaben. Ein Ton mit 7 % Deckkraft auf Weiss ist gut sichtbar, auf
 *      Fast-Schwarz praktisch nicht - dunkle Flaechen schlucken schwache Auflagen.
 *      Betrifft Zebra-Streifen, Hover, die Markierung offener Trades, Alert-Toenungen
 *      und die Kachel-Symbole.
 *   b) Fremd-CSS mit fest verdrahteten hellen Farben (Select2, DataTables) bzw. mit
 *      Dunkel-Regeln, die an einer Klasse .dark haengen, die diese App nicht setzt.
 *   c) Zwei Seiten-Stylesheets in den Templates, die hier nicht geaendert werden duerfen
 *      (screener.html, index/aktien/pivot) und je eine helle Festfarbe mitbringen.
 *
 * Bewusst als eigener Abschnitt am Dateiende statt verstreut in den Abschnitten 1-10:
 * so bleibt der fertige Hellmodus buchstaeblich unberuehrt, und alles, was den
 * Dunkelmodus betrifft, steht an einer Stelle.
 * ===================================================================================== */

/* --- 11.1 Tabellen: Streifen, Markierung offener Trades, Hover --------------------
 * Die drei Zustaende muessen in dieser Rangfolge sichtbar bleiben:
 *   Hover  >  offener Trade  >  Zebra-Streifen  >  normale Zeile
 * Im Hellmodus reicht dafuer --muted mit 45 % bzw. 100 %. Auf dunklem Grund waere das
 * kaum zu sehen, deshalb hier stattdessen eine neutrale WEISS-Auflage: die hellt jede
 * Unterlage auf, egal ob die Zeile auf dem Seitenhintergrund oder auf einer Karte
 * liegt. Gewaehlte Stufen: 4 % (Streifen) und 10 % (Hover) - damit liegen die drei
 * Helligkeiten bei rund 4 %, 7 % und 13 % und sind gut auseinanderzuhalten.
 * Der Vollstaendigkeit halber: Bootstrap und DataTables malen ihre eigenen Streifen
 * ueber einen grossen inset-box-shadow; der ist in Abschnitt 7 bzw. 9 bereits
 * abgeschaltet, sonst wuerde er alles hier Folgende ueberdecken. */
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: hsl(0 0% 100% / 0.04);
}

/* Offene Trades: der Flaechen-Tint muss die Streifen sicher uebertoenen, sonst sieht
   eine offene Zeile je nach Zeilennummer unterschiedlich aus. */
[data-bs-theme="dark"] tr.row-open > td {
    background-color: hsl(var(--accent-blue) / 0.18) !important;
}
[data-bs-theme="dark"] .card.row-open {
    background: hsl(var(--accent-blue) / 0.10);
}

/* Fixierte Spalten sind blickdicht und koennen deshalb keinen halbtransparenten Tint
   erben - dort werden Streifen und Markierung als Verlaufsbild nachgebildet
   (siehe Abschnitt 9). Beide Werte muessen hier mitgezogen werden. */
[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > .dtfc-fixed-start,
[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > .dtfc-fixed-end {
    background-image: linear-gradient(hsl(0 0% 100% / 0.04), hsl(0 0% 100% / 0.04));
}
[data-bs-theme="dark"] table.dataTable tr.row-open > td.dtfc-fixed-start,
[data-bs-theme="dark"] table.dataTable tr.row-open > td.dtfc-fixed-end {
    background-image: linear-gradient(hsl(var(--accent-blue) / 0.18), hsl(var(--accent-blue) / 0.18)) !important;
}

/* Muss - wie im Hellmodus - NACH Streifen und Markierung stehen, sonst gewinnt deren
   hoehere Spezifitaet und offene Zeilen reagieren nicht mehr auf den Mauszeiger. */
[data-bs-theme="dark"] table.dataTable.table-hover > tbody > tr:hover > td,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td {
    background-color: hsl(0 0% 100% / 0.10) !important;
    background-image: none !important;
}
/* Ausnahme fuer die fixierten Spalten: die liegen ueber dem waagerecht weggescrollten
   Inhalt und muessen blickdicht bleiben. Die Weiss-Auflage von oben ist durchsichtig -
   ohne diese Regel schiene beim Ueberfahren einer Zeile der Text der weggescrollten
   Spalten durch. Deshalb hier dieselbe Aufhellung, aber als Bild ueber einer deckenden
   Grundfarbe (dasselbe Muster wie bei Streifen und Markierung weiter oben). */
[data-bs-theme="dark"] table.dataTable.table-hover > tbody > tr:hover > td.dtfc-fixed-start,
[data-bs-theme="dark"] table.dataTable.table-hover > tbody > tr:hover > td.dtfc-fixed-end,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td.dtfc-fixed-start,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td.dtfc-fixed-end {
    background-color: hsl(var(--background)) !important;
    background-image: linear-gradient(hsl(0 0% 100% / 0.10), hsl(0 0% 100% / 0.10)) !important;
}

/* Der Tabellenkopf klebt beim Scrollen oben (position: sticky) und muss deshalb wirklich
   blickdicht sein - --muted ist als Token blickdicht, hier nur zur Sicherheit gegen
   durchscheinende Zeilen noch der Rand darunter etwas deutlicher. */
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table thead.table-dark th {
    border-bottom-color: hsl(var(--border)) !important;
}

/* --- 11.2 Flaechen ---------------------------------------------------------------- */
/* Der Hover-Hinweis auf den Dashboard-Kacheln arbeitet mit einer aufgehellten Randfarbe.
   18 % Weiss liegen praktisch auf dem normalen Rand (20 %) - der Effekt waere unsichtbar. */
[data-bs-theme="dark"] .stat-card:hover {
    border-color: hsl(var(--foreground) / 0.35);
}
/* Die getoenten Symbolfelder der Kacheln: 12 % einer hellen Farbe verschwinden auf der
   Karte fast, 18 % geben ihnen wieder eine erkennbare Flaeche. */
[data-bs-theme="dark"] .stat-icon.green  { background: hsl(var(--accent-green) / 0.18); }
[data-bs-theme="dark"] .stat-icon.red    { background: hsl(var(--accent-red) / 0.18); }
[data-bs-theme="dark"] .stat-icon.blue   { background: hsl(var(--accent-blue) / 0.18); }
[data-bs-theme="dark"] .stat-icon.orange { background: hsl(var(--accent-orange) / 0.18); }
[data-bs-theme="dark"] .stat-icon.teal   { background: hsl(var(--accent-teal) / 0.18); }
[data-bs-theme="dark"] .stat-icon.purple { background: hsl(var(--accent-purple) / 0.18); }

/* Textmarkierung: 12 % Weiss auf fast schwarzem Grund ist beim Markieren kaum zu sehen. */
[data-bs-theme="dark"] ::selection { background: hsl(var(--foreground) / 0.26); }

/* Alerts und Plaketten: gleiche Ueberlegung wie bei den Symbolfeldern. Schrift und Rand
   bleiben unveraendert, nur die Fuellung wird kraeftiger. */
[data-bs-theme="dark"] .alert-success { background: hsl(var(--positive) / 0.13); border-color: hsl(var(--positive) / 0.35); }
[data-bs-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .alert-error   { background: hsl(var(--negative) / 0.13); border-color: hsl(var(--negative) / 0.35); }
[data-bs-theme="dark"] .alert-warning { background: hsl(var(--accent-orange) / 0.14); border-color: hsl(var(--accent-orange) / 0.35); }
[data-bs-theme="dark"] .alert-info    { background: hsl(var(--accent-blue) / 0.13); border-color: hsl(var(--accent-blue) / 0.35); }
[data-bs-theme="dark"] .badge.bg-success { background: hsl(var(--positive) / 0.22) !important; border-color: hsl(var(--positive) / 0.45); }
[data-bs-theme="dark"] .badge.bg-danger  { background: hsl(var(--negative) / 0.22) !important; border-color: hsl(var(--negative) / 0.45); }
/* Typ-Plaketten auch dunkel voll gefuellt. Auf hellem Grund braucht es hier DUNKLE Schrift -
   weiss auf dem hellen Orange waere unlesbar. Nachgerechnet: dunkle Schrift auf Orange 9,45:1,
   auf Blau 6,72:1. */
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning.text-dark {
    background: hsl(var(--accent-orange)) !important;
    color: hsl(var(--background)) !important;
    border-color: hsl(var(--accent-orange));
}
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-info.text-dark {
    background: hsl(var(--accent-blue)) !important;
    color: hsl(var(--background)) !important;
    border-color: hsl(var(--accent-blue));
}
[data-bs-theme="dark"] .card-header.bg-danger,
[data-bs-theme="dark"] .card-header.bg-danger.text-white { background: hsl(var(--negative) / 0.14) !important; }

/* Loeschen/Abbrechen: --negative ist im Dunkelmodus ein HELLES Rot (Textfarbe). Als
   Buttonflaeche waere das viel zu laut, deshalb hier das dunkle --destructive mit
   weisser Schrift - das entspricht auch der Erwartung an einen Gefahren-Button. */
[data-bs-theme="dark"] .btn-danger {
    --bs-btn-bg: hsl(var(--destructive));
    --bs-btn-border-color: hsl(var(--destructive));
    --bs-btn-hover-bg: hsl(var(--destructive) / 0.85);
    --bs-btn-hover-border-color: hsl(var(--destructive) / 0.85);
    --bs-btn-active-bg: hsl(var(--destructive) / 0.75);
    --bs-btn-active-border-color: hsl(var(--destructive) / 0.75);
}

/* --- 11.3 Formularfelder ---------------------------------------------------------- */
/* Automatisch ausgefuellte Felder (Anmeldung, gespeicherte Zugangsdaten): Chrome und
   Safari malen dort eine eigene helle Flaeche, die sich nur ueber diesen box-shadow-Trick
   uebermalen laesst - background-color wird dabei ignoriert. */
[data-bs-theme="dark"] input:-webkit-autofill,
[data-bs-theme="dark"] input:-webkit-autofill:hover,
[data-bs-theme="dark"] input:-webkit-autofill:focus,
[data-bs-theme="dark"] textarea:-webkit-autofill,
[data-bs-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: hsl(var(--foreground));
    -webkit-box-shadow: 0 0 0 1000px hsl(var(--background)) inset;
    box-shadow: 0 0 0 1000px hsl(var(--background)) inset;
    caret-color: hsl(var(--foreground));
    transition: background-color 100000s ease-in-out 0s;
}
/* Ausgeschalteter Schalter: Bootstrap zeichnet den Knopf mit 25 % Weiss - auf der
   fast schwarzen Bahn ist kaum zu erkennen, ob der Schalter ueberhaupt da ist. */
[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-color: hsl(var(--muted));
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.6%29'/%3e%3c/svg%3e");
}

/* --- 11.4 Fremdkomponenten -------------------------------------------------------- */
/* Select2: das Bootstrap-5-Thema kennt keinen Dunkelmodus und setzt an mehreren Stellen
   feste helle Farben. Die Auswahl-Plaketten der Mehrfachauswahl treffen unsere Regel aus
   Abschnitt 9 nicht, weil das Fremd-CSS dort eine Klasse mehr im Selektor hat und damit
   gewinnt - deshalb ist dessen Selektor hier vollstaendig nachgebildet. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-color: hsl(var(--border));
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled=true],
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
    color: hsl(var(--muted-foreground));
}
/* Die Loeschkreuze sind Grafiken mit fester Farbe (grau, beim Ueberfahren schwarz) -
   auf dunklem Grund waere das Schwarz unsichtbar. Umkehren statt nachzeichnen. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__clear,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice__remove {
    filter: invert(1) grayscale(100%) brightness(1.7);
}

/* DataTables: die Flicken ueber den fixierten Spalten sind fest auf Weiss gesetzt,
   sobald die Tabelle im eigenen Scrollrahmen laeuft. */
[data-bs-theme="dark"] div.dt-scroll div.dtfc-top-blocker,
[data-bs-theme="dark"] div.dt-scroll div.dtfc-bottom-blocker,
[data-bs-theme="dark"] div.dtfh-floatingparent div.dtfc-top-blocker,
[data-bs-theme="dark"] div.dtfh-floatingparent div.dtfc-bottom-blocker {
    background-color: hsl(var(--background));
}
[data-bs-theme="dark"] table.dataTable.table-bordered th:last-child,
[data-bs-theme="dark"] table.dataTable.table-bordered td:last-child {
    border-right-color: hsl(var(--border));
}
/* Aufklapp-Dreieck der Zeilendetails: fest halbtransparentes Schwarz. */
[data-bs-theme="dark"] table.dataTable td.dt-control:before {
    border-left-color: hsl(var(--muted-foreground)) !important;
}
[data-bs-theme="dark"] table.dataTable tr.dt-hasChild td.dt-control:before {
    border-top-color: hsl(var(--muted-foreground)) !important;
}

/* --- 11.5 Seiten mit eigenem <style>-Block ----------------------------------------
 * Diese Regeln stehen in Templates, die in diesem Auftrag nicht geaendert werden duerfen.
 * Der Zugriff erfolgt deshalb von hier aus ueber hoehere Spezifitaet (Attributselektor
 * plus Klasse schlaegt die Klasse allein - unabhaengig davon, dass der <style>-Block im
 * Dokument spaeter kommt als diese Datei). */

/* screener.html: mittlere Risikostufe und der Hinweiskasten benutzen ein festes dunkles
   Bernstein (#b45309). Auf hellem Grund gut, auf dunklem Grund nur noch etwa 3:1 - zu
   wenig fuer eine Kennzahl, die eine Warnstufe ausdruecken soll. */
[data-bs-theme="dark"] .risiko-mittel { color: hsl(var(--accent-orange)); }
[data-bs-theme="dark"] .hinweis-box { border-left-color: hsl(var(--accent-orange)); }

/* index/aktien/pivot: die Firmenlogos liegen auf einer weissen Kachel, damit freigestellte
   Logos ueberhaupt zu erkennen sind. Reines Weiss sticht in einer dunklen Tabelle
   unangenehm heraus - etwas abgesenkt bleibt der Zweck erhalten, das Blenden faellt weg. */
[data-bs-theme="dark"] .option-logo { background: hsl(0 0% 88%); }


/* ============================================================================
   10b) Menueblatt "Mehr" der unteren Leiste (nur Handy)
   Die untere Leiste fasst bewusst nur fuenf Eintraege. Alles Weitere sitzt in diesem
   Blatt - Navigation gehoert in die Navigationsebene, nicht in die Einstellungen.
   ============================================================================ */
/* Bootstrap setzt die Hoehe ueber .offcanvas.offcanvas-bottom - ZWEI Klassen. Eine einzelne
   .mehr-blatt-Regel verliert dagegen, egal in welcher Reihenfolge die Dateien geladen werden;
   das Blatt blieb dadurch bei Bootstraps Vorgabe von 30vh stehen und zeigte von sechs Punkten
   nur einen. Deshalb hier drei Klassen - eindeutig staerker. */
.offcanvas.offcanvas-bottom.mehr-blatt {
    height: auto;
    max-height: 85vh;
    border-top-left-radius: var(--radius-lg, 0.75rem);
    border-top-right-radius: var(--radius-lg, 0.75rem);
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border-top: 1px solid hsl(var(--border));
}
.mehr-blatt .offcanvas-header {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid hsl(var(--border));
}
/* Die Tab-Leiste liegt HINTER dem Blatt, es braucht also keinen Platz fuer sie - ein
   reservierter Streifen von 5rem war nur toter Raum. Was bleibt, ist Luft fuer den
   Home-Indikator randloser Geraete. */
.mehr-blatt .offcanvas-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

.mehr-gruppe {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--muted-foreground));
    margin: 1rem 0 0.35rem;
}
.mehr-gruppe:first-child { margin-top: 0.25rem; }

.mehr-punkt {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.5rem;
    border-radius: var(--radius, 0.5rem);
    color: hsl(var(--foreground));
    text-decoration: none;
}
.mehr-punkt + .mehr-punkt { border-top: 1px solid hsl(var(--border)); }
.mehr-punkt i { font-size: 1.25rem; color: hsl(var(--muted-foreground)); flex: 0 0 1.5rem; }
.mehr-punkt span { display: flex; flex-direction: column; line-height: 1.25; }
.mehr-punkt small { color: hsl(var(--muted-foreground)); font-size: 0.78rem; margin-top: 0.1rem; }
.mehr-punkt:active { background: hsl(var(--muted)); }
.mehr-punkt.active { font-weight: 600; }
.mehr-punkt.active i { color: hsl(var(--foreground)); }

/* Sortierbare Spaltenkoepfe. Standen frueher im Kopf von screener.html - dadurch waren sie
   ausserhalb des Options-Finders nicht vorhanden, und die Kopfzeilen der Options-Tagesliste
   haetten wie gewoehnliche blaue Verweise ausgesehen. */
.sortlink { color: inherit; text-decoration: none; white-space: nowrap; }
.sortlink:hover { color: hsl(var(--foreground)); }
.sortlink-aktiv { color: hsl(var(--foreground)); font-weight: 600; }
.sortpfeil { font-size: 0.65rem; margin-left: 0.2rem; }
.sortpfeil-leer { opacity: 0.25; }
.sortlink:hover .sortpfeil-leer { opacity: 0.7; }

/* Aktienverkaeufe im Monatsabsprung - dieselbe Schriftgroesse wie die Trade-Tabelle, die sie
   ueber div.dt-container bekommt. Sonst stehen zwei Tabellen untereinander, die sich in
   Groesse und Randabstand unterscheiden. */
.aktien-monat { font-size: 0.875rem; }

/* --- Hinweis auf veraltete Optionsdaten ------------------------------------------------- *
 * Der Aktualisieren-Knopf pocht, wenn die Kurse aelter als drei Stunden sind UND seitdem
 * tatsaechlich gehandelt wurde (Pruefung serverseitig). Ohne die zweite Bedingung liefe der
 * Hinweis das ganze Wochenende und waere nach zwei Tagen unsichtbar geworden.
 *
 * Bewusst ein ruhiges Pochen und kein hartes Blinken: ein hart blinkendes Element zieht den
 * Blick staendig von der Tabelle weg, um die es eigentlich geht. */
.btn.mahnt {
    animation: mahnen 2s ease-in-out infinite;
}
/* Die Einfaerbung nur bei den umrandeten Knoepfen. Auf einem gefuellten Knopf (Fruehwarnung
   nutzt btn-primary) ergaebe orangefarbene Schrift auf blauem Grund ein unlesbares Ergebnis -
   dort genuegt das Pochen. */
.btn-outline-secondary.mahnt,
.btn-outline-primary.mahnt {
    border-color: hsl(var(--warning, 38 92% 50%));
    color: hsl(var(--warning, 38 92% 50%));
}
@keyframes mahnen {
    0%, 100% { box-shadow: 0 0 0 0 hsla(38, 92%, 50%, 0.5); }
    50%      { box-shadow: 0 0 0 6px hsla(38, 92%, 50%, 0); }
}
/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie auch hier nicht -
   der Knopf bleibt dann ruhig hervorgehoben statt zu pochen. */
@media (prefers-reduced-motion: reduce) {
    .btn.mahnt { animation: none; box-shadow: 0 0 0 3px hsla(38, 92%, 50%, 0.35); }
}

/* --- Antippbare Erklaerungen auf Geraeten ohne Mauszeiger --------------------------------- *
 * Das Zeichen wird nur dort per JavaScript eingefuegt (siehe base.html). Zurueckhaltend
 * gestaltet: es steht an rund 85 Stellen, ein auffaelliges Zeichen waere dort Unruhe. */
.hinweis-marke {
    display: inline-flex;
    align-items: center;
    margin-left: 0.3em;
    color: hsl(var(--muted-foreground));
    opacity: 0.7;
    cursor: pointer;
    font-size: 0.9em;
    /* Grosszuegige Trefferflaeche, ohne den Textfluss zu veraendern - ein 12px-Zeichen ist
       mit dem Finger sonst kaum zu treffen. */
    padding: 0.35rem;
    margin-top: -0.35rem;
    margin-bottom: -0.35rem;
}
.hinweis-marke:focus { outline: none; opacity: 1; }
.popover { max-width: 22rem; }
.popover-body { font-size: 0.8125rem; }