/* ========================================================================== ManCoPilot Web — Design Tokens & Komponenten (Dark Theme) Drei Schichten: 1. :root Variablen (Surface, Text, Border, Akzent, Risk-Farben, Fonts) 2. Komponenten-Klassen (.app-shell, .card, .kpi, .data-table, …) 3. Tailwind-Utility-Overrides (bg-white, text-slate-*, border-slate-*, Pastell-Farben, mcp-Brand) damit existierende Templates ohne Edit dunkel werden. Reihenfolge wichtig: tokens.css MUSS nach Tailwind CDN geladen werden. ========================================================================== */ :root { /* Surface */ --bg-base: #0b0d10; --bg-elev-1: #11151a; --bg-elev-2: #161b22; --bg-elev-3: #1c2230; --border-subtle: #1f2630; --border-strong: #2a3340; /* Text */ --text-primary: #e6edf3; --text-secondary: #9aa6b2; --text-tertiary: #6b7785; --text-disabled: #4a5360; /* Akzent (kuehl, Bloomberg-naher Cyan) */ --accent: #4cc9f0; --accent-dim: #2b8db0; --accent-glow: rgba(76, 201, 240, 0.12); /* Diagramm-Gitterlinien: bewusst nur angedeutet (siehe charts.js/theme.js) */ --chart-grid: rgba(230, 237, 243, 0.06); /* Semantische Risk-Farben */ --risk-low: #4ade80; --risk-medium: #fbbf24; --risk-mid: #fbbf24; /* alias used by procedures / VARC templates */ --risk-high: #f87171; --risk-critical: #ef4444; /* Typografie */ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-sans: 'Inter Tight', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Theme-abhaengige System-Hints (native Controls, Scrollbars). */ color-scheme: dark; } /* ========================================================================== Light Theme — aktiviert via . Nur die theme-abhaengigen Tokens werden ueberschrieben; alle Komponenten- und Utility-Klassen weiter unten lesen ausschliesslich diese Variablen und passen sich daher automatisch an. Dark bleibt der Default (:root), damit ohne gesetztes Attribut nichts bricht. Die durchscheinenden Risk-/Akzent-Pastelle (rgba(...)) bleiben bewusst auf der kraeftigen Palette — sie wirken auf hellem wie dunklem Grund stimmig; die Textfarben darin (--risk-*) werden fuer hellen Grund abgedunkelt. ========================================================================== */ :root[data-theme="light"] { /* Surface — etwas mehr Abstufung + sichtbarere Flaechen als zuvor. */ --bg-base: #ffffff; --bg-elev-1: #f4f6f9; --bg-elev-2: #e9edf2; --bg-elev-3: #dde3eb; --border-subtle: #d4dae3; --border-strong: #b4bfcc; /* Text — deutlich kontrastreicher (alle Stufen >= AA auf Weiss). */ --text-primary: #0f172a; /* ~16:1 */ --text-secondary: #334155; /* ~10:1 */ --text-tertiary: #51607a; /* ~6:1 — auch fuer kleine Labels lesbar */ --text-disabled: #94a3b8; /* Akzent — Cyan-700, damit weisse Schrift auf Akzent-Buttons ausreichend kontrastiert und Akzent-Text auf Weiss klar erkennbar bleibt. */ --accent: #0e7490; --accent-dim: #0b5a72; --accent-glow: rgba(14, 116, 144, 0.12); /* Diagramm-Gitterlinien nur angedeutet (dunkles Liniennetz auf Hell). */ --chart-grid: rgba(15, 23, 42, 0.06); /* Semantische Risk-Farben (dunklere Varianten fuer Text auf Weiss). */ --risk-low: #15803d; --risk-medium: #b45309; --risk-mid: #b45309; --risk-high: #dc2626; --risk-critical: #b91c1c; color-scheme: light; } /* Die linke Navigationsleiste bleibt bewusst IMMER dunkel (auch im Light-Mode), damit das markante dunkelblaue Branding erhalten bleibt. Dafuer werden die Tokens nur fuer den Sidebar-Teilbaum wieder auf die Dunkel-Palette gesetzt; alle Kindelemente (.nav-item, .nav-sub, Logo, Status) erben diese Werte. */ :root[data-theme="light"] .app-sidebar { --bg-base: #0b0d10; --bg-elev-1: #11151a; --bg-elev-2: #161b22; --bg-elev-3: #1c2230; --border-subtle: #1f2630; --border-strong: #2a3340; --text-primary: #e6edf3; --text-secondary: #9aa6b2; --text-tertiary: #6b7785; --text-disabled: #4a5360; --accent: #4cc9f0; --accent-dim: #2b8db0; --accent-glow: rgba(76, 201, 240, 0.12); --risk-low: #4ade80; --risk-medium: #fbbf24; --risk-mid: #fbbf24; --risk-high: #f87171; --risk-critical: #ef4444; color-scheme: dark; } * { box-sizing: border-box; } html, body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-sans); font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* Auswahl */ ::selection { background: var(--accent-glow); color: var(--text-primary); } /* Links */ a { color: inherit; } a.text-accent, a.text-accent:hover { color: var(--accent); } /* Gedaempfter Link (z.B. "Kommentar bearbeiten") — nutzt den abgedunkelten Akzent, damit er in Dark nicht grell wirkt; hellt beim Hover zum vollen Akzent auf. Funktioniert in Hell wie Dunkel ueber die Tokens. */ .link-muted { color: var(--accent-dim); cursor: pointer; transition: color 120ms; } .link-muted:hover { color: var(--accent); text-decoration: underline; } /* ========================================================================== Utility-Klassen (eigene Tokens) ========================================================================== */ .font-mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; } .font-sans { font-family: var(--font-sans); } .tabular { font-variant-numeric: tabular-nums; } .bg-base { background-color: var(--bg-base) !important; } .bg-elev-1 { background-color: var(--bg-elev-1) !important; } .bg-elev-2 { background-color: var(--bg-elev-2) !important; } .bg-elev-3 { background-color: var(--bg-elev-3) !important; } .text-primary { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-tertiary { color: var(--text-tertiary) !important; } .text-disabled { color: var(--text-disabled) !important; } .text-accent { color: var(--accent) !important; } .border-subtle { border-color: var(--border-subtle) !important; } .border-strong { border-color: var(--border-strong) !important; } .text-risk-low { color: var(--risk-low) !important; } .text-risk-medium { color: var(--risk-medium) !important; } .text-risk-high { color: var(--risk-high) !important; } .text-risk-critical { color: var(--risk-critical) !important; } .bg-risk-low { background-color: rgba(74, 222, 128, 0.12); color: var(--risk-low); } .bg-risk-medium { background-color: rgba(251, 191, 36, 0.12); color: var(--risk-medium); } .bg-risk-high { background-color: rgba(248, 113, 113, 0.14); color: var(--risk-high); } .bg-risk-critical { background-color: rgba(239, 68, 68, 0.16); color: var(--risk-critical); } /* ========================================================================== App-Shell (Sidebar + Topbar + Main) ========================================================================== */ .app-shell { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 56px 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; min-height: 100vh; } /* Topbar: Benutzer-Menue (
) */ .mcw-user-menu > summary { list-style: none; } .mcw-user-menu > summary::-webkit-details-marker { display: none; } .app-sidebar { grid-area: sidebar; border-right: 1px solid var(--border-subtle); background: var(--bg-elev-1); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .app-topbar { grid-area: topbar; border-bottom: 1px solid var(--border-subtle); background: var(--bg-elev-1); position: sticky; top: 0; z-index: 20; overflow: visible; } .app-main { grid-area: main; min-width: 0; } /* ========================================================================== Schriftgroessen-Skalierung im Hauptbereich (~90 %). Die Sidebar-Navigation (.app-sidebar) bleibt unveraendert. Statt globalem `zoom` werden die Schriftgroessen explizit ueber CSS Custom Properties, eine reduzierte Basis-Schrift im Container und Overrides der gaengigen Tailwind-Utilities (text-xs/sm/base/lg/xl/2xl/3xl sowie text-[Npx]) gesetzt -- damit greift die Reduktion gleichmaessig und ohne Render-Tricks. ========================================================================== */ :root { --ui-scale: 0.9; --fs-2xs: calc(10px * var(--ui-scale)); /* ~9px */ --fs-xs: calc(11px * var(--ui-scale)); /* ~10px */ --fs-sm: calc(12px * var(--ui-scale)); /* ~11px */ --fs-md: calc(13px * var(--ui-scale)); /* ~12px */ --fs-base: calc(14px * var(--ui-scale)); /* ~13px */ --fs-lg: calc(16px * var(--ui-scale)); /* ~14px */ --fs-xl: calc(18px * var(--ui-scale)); /* ~16px */ --fs-2xl: calc(20px * var(--ui-scale)); /* ~18px */ --fs-3xl: calc(24px * var(--ui-scale)); /* ~22px */ --fs-4xl: calc(30px * var(--ui-scale)); /* ~27px */ } .app-main, .app-topbar { font-size: var(--fs-base); line-height: 1.45; } /* Tailwind-Schriftgroessen-Utilities im Hauptbereich (rem-basiert). */ .app-main .text-xs, .app-topbar .text-xs { font-size: var(--fs-xs); line-height: 1.4; } .app-main .text-sm, .app-topbar .text-sm { font-size: var(--fs-md); line-height: 1.45; } .app-main .text-base, .app-topbar .text-base { font-size: var(--fs-base); line-height: 1.5; } .app-main .text-lg, .app-topbar .text-lg { font-size: var(--fs-lg); line-height: 1.5; } .app-main .text-xl, .app-topbar .text-xl { font-size: var(--fs-xl); line-height: 1.45; } .app-main .text-2xl, .app-topbar .text-2xl { font-size: var(--fs-2xl); line-height: 1.35; } .app-main .text-3xl, .app-topbar .text-3xl { font-size: var(--fs-3xl); line-height: 1.3; } .app-main .text-4xl, .app-topbar .text-4xl { font-size: var(--fs-4xl); line-height: 1.25; } /* Im Codebase haeufig genutzte Tailwind-Arbitrary-Werte (text-[Npx]). */ .app-main .text-\[10px\], .app-topbar .text-\[10px\] { font-size: var(--fs-2xs); } .app-main .text-\[11px\], .app-topbar .text-\[11px\] { font-size: var(--fs-xs); } .app-main .text-\[12px\], .app-topbar .text-\[12px\] { font-size: var(--fs-sm); } .app-main .text-\[13px\], .app-topbar .text-\[13px\] { font-size: var(--fs-md); } .app-main .text-\[14px\], .app-topbar .text-\[14px\] { font-size: var(--fs-base); } .app-main .text-\[15px\], .app-topbar .text-\[15px\] { font-size: var(--fs-lg); } .app-main .text-\[16px\], .app-topbar .text-\[16px\] { font-size: var(--fs-lg); } .app-main .text-\[18px\], .app-topbar .text-\[18px\] { font-size: var(--fs-xl); } /* Komponenten-Klassen aus tokens.css im Hauptbereich (Cards, KPIs, Tabellen, Badges, Pills, Buttons, Inputs). Werte = ~90 % der Originalgroessen. */ :where(.app-main, .app-topbar) .section-label { font-size: var(--fs-xs); } :where(.app-main, .app-topbar) .subtab { font-size: var(--fs-sm); } :where(.app-main, .app-topbar) .card-header { font-size: var(--fs-xs); } :where(.app-main, .app-topbar) .kpi-label { font-size: var(--fs-2xs); } :where(.app-main, .app-topbar) .kpi-value { font-size: calc(24px * var(--ui-scale)); } :where(.app-main, .app-topbar) .kpi-delta { font-size: var(--fs-xs); } :where(.app-main, .app-topbar) .data-table { font-size: var(--fs-sm); } :where(.app-main, .app-topbar) .data-table thead th { font-size: var(--fs-2xs); } :where(.app-main, .app-topbar) .excel-grid { font-size: calc(0.8125rem * var(--ui-scale)); } :where(.app-main, .app-topbar) .excel-grid thead th { font-size: calc(0.6875rem * var(--ui-scale)); } :where(.app-main, .app-topbar) .badge { font-size: var(--fs-2xs); } :where(.app-main, .app-topbar) .pill { font-size: calc(0.75rem * var(--ui-scale)); } :where(.app-main, .app-topbar) .btn-mcp-primary, :where(.app-main, .app-topbar) .btn-mcp-secondary { font-size: calc(0.875rem * var(--ui-scale)); } :where(.app-main, .app-topbar) input, :where(.app-main, .app-topbar) select, :where(.app-main, .app-topbar) textarea { font-size: var(--fs-md); } @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; grid-template-rows: 56px auto 1fr; grid-template-areas: "topbar" "sidebar" "main"; } .app-sidebar { position: relative; height: auto; } } /* ========================================================================== Sidebar-Navigation ========================================================================== */ .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 1px 8px; font-size: 13px; color: var(--text-secondary); border-left: 2px solid transparent; letter-spacing: 0.01em; text-decoration: none; transition: background 120ms, color 120ms, border-color 120ms; } .nav-item:hover { background: var(--bg-elev-2); color: var(--text-primary); } .nav-item.active { background: var(--bg-elev-2); color: var(--text-primary); border-left-color: var(--accent); } .nav-item.disabled { color: var(--text-disabled); cursor: not-allowed; } .nav-item.disabled:hover { background: transparent; color: var(--text-disabled); } .nav-sub { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 32px; margin: 0 8px; font-size: 12px; color: var(--text-tertiary); text-decoration: none; border-left: 2px solid transparent; transition: color 120ms, background 120ms, border-color 120ms; } .nav-sub:hover { color: var(--text-secondary); background: var(--bg-elev-2); } .nav-sub.active { color: var(--text-primary); border-left-color: var(--accent); background: var(--bg-elev-2); } /* Section-Label (uppercase, kleine Headlines) */ .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); font-weight: 500; } /* ========================================================================== Sub-Tabs (Risk-Modul) ========================================================================== */ .subtabs { display: flex; border-bottom: 1px solid var(--border-subtle); padding: 0 24px; background: var(--bg-elev-1); } .subtab { padding: 10px 18px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); border-bottom: 2px solid transparent; text-decoration: none; transition: color 120ms, border-color 120ms; } .subtab:hover { color: var(--text-secondary); } .subtab.active { color: var(--text-primary); border-bottom-color: var(--accent); } /* ========================================================================== Cards ========================================================================== */ .card { background: var(--bg-elev-1); border: 1px solid var(--border-subtle); border-radius: 4px; } .card-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: 500; } .card-body { padding: 14px; } /* KPI-Tile */ .kpi { background: var(--bg-elev-1); border: 1px solid var(--border-subtle); padding: 14px 16px; position: relative; overflow: hidden; } .kpi::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--accent); opacity: 0.5; } .kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 6px; } .kpi-value { font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); } .kpi-delta { font-family: var(--font-mono); font-size: 11px; margin-top: 4px; } /* ========================================================================== Daten-Tabellen (.data-table = neu, .excel-grid = redefiniert) ========================================================================== */ .data-table { width: 100%; border-collapse: collapse; font-size: 12px; } .data-table thead th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-elev-1); position: sticky; top: 0; } .data-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); } .data-table tbody tr:hover { background: var(--bg-elev-2); } .data-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } /* .excel-grid: bestehender Klassenname, dunkles Re-Theming. */ .excel-grid { width: 100%; font-size: 0.8125rem; border-collapse: separate; border-spacing: 0; color: var(--text-primary); } .excel-grid thead th { position: sticky; top: 0; z-index: 5; background: var(--bg-elev-1) !important; color: var(--text-tertiary) !important; text-align: left; padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--border-subtle); font-weight: 500; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.06em; } .excel-grid tbody td { padding: 0.4375rem 0.625rem; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); background: var(--bg-elev-1); } .excel-grid tbody td:last-child { border-right: 0; } .excel-grid tbody tr:nth-child(even) td { background: var(--bg-base); } .excel-grid tbody tr:hover td { background: var(--bg-elev-2); } .excel-grid tbody td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } /* Drift-Vergleich unter dem Hauptwert: Datum und Betrag ohne Umbruch (tausender-Leerzeichen in Zahlen sonst Wrap-Risiko). */ .excel-grid tbody td.num .drift-detail-stack { display: block; margin-top: 4px; } .excel-grid tbody td.num .drift-detail-line { white-space: nowrap; } .excel-grid tbody td.num .drift-detail-line + .drift-detail-line { margin-top: 2px; } .excel-grid .col-sticky { position: sticky; left: 0; background: var(--bg-elev-1); border-right: 1px solid var(--border-strong); } .excel-grid tbody tr:nth-child(even) td.col-sticky { background: var(--bg-base); } .excel-grid tbody tr:hover td.col-sticky { background: var(--bg-elev-2); } .excel-grid thead th.col-sticky { background: var(--bg-elev-1) !important; z-index: 6; border-right: 1px solid var(--border-strong); } /* Backtesting: Zeilen, in denen die Clean P&L den VaR überschreitet (Breach), leicht rot hinterlegen — auch über Zebra/Hover/Sticky hinweg. */ .excel-grid tbody tr.bt-breach-row td, .excel-grid tbody tr.bt-breach-row:nth-child(even) td, .excel-grid tbody tr.bt-breach-row td.col-sticky, .excel-grid tbody tr.bt-breach-row:nth-child(even) td.col-sticky { background: rgba(248, 113, 113, 0.12); } .excel-grid tbody tr.bt-breach-row:hover td, .excel-grid tbody tr.bt-breach-row:hover td.col-sticky { background: rgba(248, 113, 113, 0.20); } /* Positionsnamen: immer einzeilig; extrem lange Namen werden mit "…" gekürzt (voller Name bleibt als title-Tooltip und im Export erhalten). */ .excel-grid td.pos-name { max-width: 28ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== Badges, Pills, Status-Dots ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px; font-weight: 500; } .pill { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; background: var(--bg-elev-3); color: var(--text-secondary); } .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } /* ========================================================================== Fonds-Tabellen: Steuerleiste & Paginierung (.ft-* , theme-variabel). Funktioniert hell wie dunkel, da nur Theme-Tokens gelesen werden. ========================================================================== */ .ft-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .ft-pager { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; } .ft-btn { min-width: 2rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; border: 1px solid var(--border-subtle); background: var(--bg-elev-1); color: var(--text-primary); font-size: 0.8125rem; line-height: 1.25rem; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .ft-btn:hover:not(:disabled) { background: var(--bg-elev-2); border-color: var(--accent); } .ft-btn:disabled { opacity: 0.45; cursor: default; } .ft-btn.is-active { background: var(--accent); color: var(--bg-base); border-color: var(--accent); font-weight: 600; } .ft-select { padding: 0.25rem 0.5rem; border-radius: 0.375rem; border: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-primary); font-size: 0.8125rem; cursor: pointer; } .ft-info { font-size: 0.75rem; color: var(--text-tertiary); } /* Segmentierter Umschalter fuer die Chart-Ansicht (AUM/Transaktionen/Gemischt) */ .flow-view-bar { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: 0.5rem; overflow: hidden; } .flow-view-btn { padding: 0.3rem 0.75rem; font-size: 0.75rem; line-height: 1rem; background: transparent; color: var(--text-primary); cursor: pointer; border: none; border-left: 1px solid var(--border-subtle); transition: background .12s ease; } .flow-view-btn:first-child { border-left: none; } .flow-view-btn:hover { background: var(--bg-elev-2); } .flow-view-btn.active { background: var(--accent); color: var(--bg-base); font-weight: 600; } /* Zeitraumfilter fuer AUM-/Transaktions-Charts */ .flow-period-wrap { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .flow-period-bar { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: 0.5rem; overflow: hidden; } .flow-period-btn { padding: 0.3rem 0.65rem; font-size: 0.75rem; line-height: 1rem; background: transparent; color: var(--text-primary); cursor: pointer; border: none; border-left: 1px solid var(--border-subtle); transition: background .12s ease; white-space: nowrap; } .flow-period-btn:first-child { border-left: none; } .flow-period-btn:hover { background: var(--bg-elev-2); } .flow-period-btn.active { background: var(--bg-elev-2); color: var(--text-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-strong); } .flow-period-custom { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--text-tertiary); } .flow-period-date { padding: 0.25rem 0.45rem; border-radius: 0.375rem; border: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-primary); font-size: 0.75rem; font-family: monospace; } /* Externer Chart-Tooltip mit eigener Farbmarkierung je Zeile */ .flow-tooltip { position: absolute; z-index: 60; pointer-events: none; background: var(--bg-elev-2); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 0.5rem; padding: 0.5rem 0.625rem; min-width: 168px; font-size: 0.75rem; line-height: 1.15rem; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); opacity: 0; transition: opacity .12s ease; } .flow-tt-title { font-weight: 600; margin-bottom: 0.3rem; } .flow-tt-row { display: flex; align-items: center; gap: 0.45rem; } .flow-tt-box { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: 0 0 auto; } .flow-tt-label { flex: 1 1 auto; color: var(--text-tertiary); } .flow-tt-val { font-variant-numeric: tabular-nums; font-family: monospace; } /* Detail-Fenster: Transaktions-Aufschluss je Tag */ .flow-modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; } .flow-modal-backdrop[hidden] { display: none; } .flow-modal { background: var(--bg-elev-1); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 0.75rem; width: 100%; max-width: 640px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); } .flow-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); } .flow-modal-x { background: transparent; border: none; cursor: pointer; color: var(--text-tertiary); font-size: 1.5rem; line-height: 1; padding: 0 0.25rem; } .flow-modal-x:hover { color: var(--text-primary); } .flow-modal-body { padding: 0.75rem 1.25rem 1.25rem; overflow-y: auto; } .flow-modal-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .flow-modal-table th { padding: 0.4rem 0.5rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); } .flow-modal-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border-subtle); } .flow-modal-table tfoot td { border-top: 2px solid var(--border-strong); border-bottom: none; font-weight: 600; } .flow-td-name { color: var(--text-primary); } .flow-td-num { text-align: right; font-variant-numeric: tabular-nums; font-family: monospace; } .flow-key { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.6875rem; font-family: monospace; background: var(--bg-elev-2); color: var(--text-tertiary); } .flow-pos { color: #16a34a; } .flow-neg { color: #dc2626; } /* ========================================================================== Charts ========================================================================== */ .chart-wrap { position: relative; width: 100%; height: 280px; } .chart-wrap.tall { height: 360px; } /* ========================================================================== Buttons (MCP-Brand redefiniert auf neuen Akzent) ========================================================================== */ .btn-mcp-primary { background: var(--bg-elev-2); border: 1px solid var(--border-strong); color: var(--text-primary); padding: 0.375rem 0.875rem; border-radius: 0.25rem; font-weight: 500; font-size: 0.875rem; transition: background 120ms, border-color 120ms, color 120ms; } .btn-mcp-primary:hover { background: var(--bg-elev-3); border-color: var(--accent-dim); color: var(--text-primary); } .btn-mcp-primary:active { background: var(--bg-elev-3); } .btn-mcp-accent { background: var(--accent); border: 1px solid var(--accent-dim); color: var(--bg-base); padding: 0.375rem 0.875rem; border-radius: 0.25rem; font-weight: 500; font-size: 0.875rem; transition: background 120ms, opacity 120ms; } .btn-mcp-accent:hover { background: var(--accent-dim); color: var(--bg-base); } /* ========================================================================== Form-Inputs (gilt auch fuer Tailwind-styled Inputs ohne weitere Klassen) ========================================================================== */ /* Greift auch fuer ohne explizites type-Attribut (HTML-Default = text). */ input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]):not([type="range"]), select, textarea { background-color: var(--bg-elev-2); color: var(--text-primary); border-color: var(--border-strong); caret-color: var(--accent); } input::placeholder, textarea::placeholder { color: var(--text-tertiary); } input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]):not([type="range"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); } option { background-color: var(--bg-elev-2); color: var(--text-primary); } input[disabled], input:disabled, select[disabled], select:disabled, textarea[disabled], textarea:disabled { background-color: var(--bg-base) !important; color: var(--text-tertiary) !important; border-color: var(--border-subtle) !important; } code, pre { background-color: var(--bg-elev-2) !important; color: var(--text-primary) !important; border-radius: 2px; } hr { border-color: var(--border-subtle); } /* ========================================================================== Animation ========================================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 200ms ease-out both; } /* ========================================================================== Tailwind-Utility-Overrides -------------------------------------------------------------------------- So bleibt der Grossteil der bestehenden Templates ohne Markup-Edit dunkel. Die !important-Schwere ist gewollt, damit Inline-Tailwind-Klassen ueber- schrieben werden. ========================================================================== */ /* --- Hintergrund-Flaechen --- */ .bg-white { background-color: var(--bg-elev-1) !important; } .bg-slate-50 { background-color: var(--bg-base) !important; } /* Opacity-Variante (z.B. Kommentar-/Detail-Boxen): eigener Selektor, sonst bliebe Tailwinds helles Slate stehen und passt in keinem Theme. */ .bg-slate-50\/60 { background-color: var(--bg-elev-2) !important; } .bg-slate-100 { background-color: var(--bg-elev-2) !important; } .bg-slate-200 { background-color: var(--bg-elev-3) !important; } .bg-slate-300 { background-color: var(--bg-elev-3) !important; } .bg-slate-700 { background-color: var(--bg-elev-2) !important; } .bg-slate-800 { background-color: var(--bg-elev-1) !important; } .bg-slate-900 { background-color: var(--bg-base) !important; } .bg-gray-50 { background-color: var(--bg-base) !important; } .bg-gray-100 { background-color: var(--bg-elev-2) !important; } /* --- Texte (Schiefer-Skala) --- */ .text-white { color: var(--text-primary) !important; } .text-slate-900, .text-slate-800, .text-slate-700 { color: var(--text-primary) !important; } .text-slate-600, .text-slate-500 { color: var(--text-secondary) !important; } .text-slate-400, .text-slate-300 { color: var(--text-tertiary) !important; } .text-slate-200, .text-slate-100 { color: var(--text-secondary) !important; } .text-gray-900, .text-gray-800, .text-gray-700 { color: var(--text-primary) !important; } .text-gray-600, .text-gray-500 { color: var(--text-secondary) !important; } .text-gray-400, .text-gray-300 { color: var(--text-tertiary) !important; } /* --- Borders (Schiefer-Skala) --- */ .border-slate-100, .border-slate-200 { border-color: var(--border-subtle) !important; } .border-slate-300, .border-slate-400 { border-color: var(--border-strong) !important; } .border-gray-200 { border-color: var(--border-subtle) !important; } .border-gray-300 { border-color: var(--border-strong) !important; } .hover\:border-slate-200:hover, .hover\:border-slate-300:hover { border-color: var(--border-strong) !important; } .hover\:bg-slate-50:hover { background-color: var(--bg-elev-2) !important; } .hover\:bg-slate-100:hover { background-color: var(--bg-elev-2) !important; } .hover\:text-slate-900:hover, .hover\:text-slate-800:hover { color: var(--text-primary) !important; } .hover\:text-white:hover { color: var(--text-primary) !important; } /* --- MCP-Brand → neue Tokens --- */ .bg-mcp-navy { background-color: var(--bg-elev-1) !important; color: var(--text-primary); } .bg-mcp-navy2 { background-color: var(--bg-elev-2) !important; color: var(--text-primary); } .bg-mcp-blue { background-color: var(--accent) !important; color: var(--bg-base) !important; } .bg-mcp-blue700 { background-color: var(--accent-dim) !important; color: var(--bg-base) !important; } .bg-mcp-blue50 { background-color: var(--bg-elev-2) !important; } .bg-mcp-blueBtn { background-color: var(--accent) !important; color: var(--bg-base) !important; } .text-mcp-navy { color: var(--text-primary) !important; } .text-mcp-blue { color: var(--accent) !important; } .text-mcp-blueTxt { color: var(--bg-base) !important; } .border-mcp-navy, .border-mcp-navy2, .border-mcp-blueBor { border-color: var(--border-subtle) !important; } .border-mcp-blue { border-color: var(--accent) !important; } .hover\:border-mcp-blue:hover { border-color: var(--accent) !important; } .hover\:border-mcp-blue\/40:hover { border-color: rgba(76, 201, 240, 0.4) !important; } .focus\:border-mcp-blue:focus { border-color: var(--accent) !important; } .hover\:text-mcp-navy:hover { color: var(--text-primary) !important; } .hover\:bg-mcp-navy2:hover { background-color: var(--bg-elev-2) !important; } .hover\:bg-slate-700:hover { background-color: var(--bg-elev-2) !important; } .text-blue-100 { color: var(--text-secondary) !important; } /* --- Risk-Pastelle: Pill-/Badge-Bgs auf semantische Tokens --- */ .bg-emerald-50, .bg-emerald-100 { background-color: rgba(74, 222, 128, 0.12) !important; color: var(--risk-low); } .bg-emerald-500, .bg-emerald-600, .bg-emerald-700 { background-color: var(--risk-low) !important; color: var(--bg-base) !important; } .text-emerald-900, .text-emerald-800, .text-emerald-700, .text-emerald-600 { color: var(--risk-low) !important; } .border-emerald-200 { border-color: rgba(74, 222, 128, 0.35) !important; } .bg-amber-50, .bg-amber-100 { background-color: rgba(251, 191, 36, 0.12) !important; color: var(--risk-medium); } .bg-amber-500, .bg-amber-600, .bg-amber-700 { background-color: var(--risk-medium) !important; color: var(--bg-base) !important; } .bg-amber-50\/30 { background-color: rgba(251, 191, 36, 0.06) !important; } .text-amber-900, .text-amber-800, .text-amber-700, .text-amber-600, .text-amber-200 { color: var(--risk-medium) !important; } .border-amber-200, .border-amber-300, .border-amber-400 { border-color: rgba(251, 191, 36, 0.35) !important; } .bg-rose-50, .bg-rose-100 { background-color: rgba(248, 113, 113, 0.14) !important; color: var(--risk-high); } .bg-rose-500, .bg-rose-600, .bg-rose-700 { background-color: var(--risk-high) !important; color: var(--bg-base) !important; } .bg-rose-50\/30 { background-color: rgba(248, 113, 113, 0.06) !important; } .text-rose-900, .text-rose-800, .text-rose-700, .text-rose-600 { color: var(--risk-high) !important; } .border-rose-200 { border-color: rgba(248, 113, 113, 0.35) !important; } .bg-red-50, .bg-red-100 { background-color: rgba(239, 68, 68, 0.14) !important; color: var(--risk-critical); } .bg-red-600, .bg-red-700 { background-color: var(--risk-critical) !important; color: var(--bg-base) !important; } .text-red-900, .text-red-800, .text-red-700, .text-red-600 { color: var(--risk-high) !important; } .border-red-200 { border-color: rgba(239, 68, 68, 0.35) !important; } .bg-emerald-50\/30 { background-color: rgba(74, 222, 128, 0.06) !important; } /* --- Indigo (Result-Upload Drop-Zone) → Akzent --- */ .bg-indigo-50, .bg-indigo-50\/40 { background-color: var(--accent-glow) !important; } .bg-indigo-100 { background-color: rgba(76, 201, 240, 0.18) !important; } .bg-indigo-500, .bg-indigo-600, .bg-indigo-700 { background-color: var(--accent) !important; color: var(--bg-base) !important; } .text-indigo-700, .text-indigo-600, .text-indigo-500 { color: var(--accent) !important; } .border-indigo-400, .border-indigo-500 { border-color: var(--accent) !important; } .hover\:bg-indigo-700:hover { background-color: var(--accent-dim) !important; } .hover\:bg-indigo-100:hover { background-color: rgba(76, 201, 240, 0.18) !important; } .hover\:border-indigo-400:hover { border-color: var(--accent) !important; } .hover\:bg-indigo-50\/40:hover { background-color: var(--accent-glow) !important; } .disabled\:bg-slate-300:disabled { background-color: var(--bg-elev-3) !important; color: var(--text-disabled) !important; } .file\:bg-indigo-50::file-selector-button { background-color: var(--accent-glow) !important; color: var(--accent) !important; } .file\:text-indigo-700::file-selector-button { color: var(--accent) !important; } .hover\:file\:bg-indigo-100:hover::file-selector-button { background-color: rgba(76, 201, 240, 0.18) !important; } /* --- Blue (User-Edit, Audit-View Buttons) --- */ .bg-blue-50, .bg-blue-100 { background-color: var(--accent-glow) !important; color: var(--accent); } .bg-blue-500, .bg-blue-600, .bg-blue-700 { background-color: var(--accent) !important; color: var(--bg-base) !important; } .text-blue-900, .text-blue-800, .text-blue-700, .text-blue-600 { color: var(--accent) !important; } .hover\:bg-blue-700:hover { background-color: var(--accent-dim) !important; } .focus\:border-blue-500:focus { border-color: var(--accent) !important; } .focus\:ring-blue-500:focus { box-shadow: 0 0 0 1px var(--accent) !important; } .border-blue-400, .border-blue-500 { border-color: var(--accent) !important; } /* Risk-Heatmap-Quadrate (Sidebar): semantische Solid-Farben behalten */ .bg-emerald-500 { background-color: var(--risk-low) !important; } .bg-amber-500 { background-color: var(--risk-medium) !important; } .bg-rose-500 { background-color: var(--risk-high) !important; } .bg-slate-400, .bg-slate-500, .bg-slate-600 { background-color: var(--bg-elev-3) !important; } /* Purple/Violet (Mappings: position-Level Pills) */ .bg-purple-100, .bg-violet-100 { background-color: rgba(167, 139, 250, 0.16) !important; color: #c4b5fd !important; } .text-purple-800, .text-purple-700, .text-violet-800, .text-violet-700 { color: #c4b5fd !important; } /* Green-Skala (existiert vereinzelt neben emerald) */ .text-green-700, .text-green-600 { color: var(--risk-low) !important; } /* Amber-Banner mit transparenter Bg (Sidebar-Schemawarnung) */ .bg-amber-500\/10 { background-color: rgba(251, 191, 36, 0.10) !important; } .border-amber-500\/30 { border-color: rgba(251, 191, 36, 0.30) !important; } /* Focus-Ringe */ .focus\:ring-slate-400:focus, .focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--accent-glow) !important; } .focus\:border-slate-400:focus { border-color: var(--accent) !important; } /* --- Login-Button-Override (war bg-slate-900) --- */ .bg-slate-900.text-white { background-color: var(--accent) !important; color: var(--bg-base) !important; } .bg-slate-900.text-white:hover, .hover\:bg-slate-800:hover { background-color: var(--accent-dim) !important; } /* Shadow-Cards weicher auf Dark */ .shadow, .shadow-sm, .shadow-md, .shadow-lg { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important; } /* Footer-Text dezenter */ footer { color: var(--text-tertiary); } /* Native — Kalender-Icon hell auf Dark-Theme */ input[type="date"], input.mcp-date-input { color-scheme: dark; } input[type="date"]::-webkit-calendar-picker-indicator, input.mcp-date-input::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.15) !important; -webkit-filter: invert(1) brightness(1.15) !important; cursor: pointer; opacity: 1 !important; } input[type="date"]::-webkit-calendar-picker-indicator:hover, input.mcp-date-input::-webkit-calendar-picker-indicator:hover { filter: invert(1) brightness(1.35) !important; -webkit-filter: invert(1) brightness(1.35) !important; } /* Firefox: natives Datumsfeld dunkel */ @-moz-document url-prefix() { input[type="date"], input.mcp-date-input { color-scheme: dark; } } /* ========================================================================== Light-Theme-Feinschliff -------------------------------------------------------------------------- Nur Stellen, die im Dark-Theme bewusst auf einen dunklen Untergrund abgestimmt waren (kraeftige Schatten, invertierte System-Icons). ========================================================================== */ /* Weichere, dezentere Schatten auf hellem Grund. */ :root[data-theme="light"] .shadow, :root[data-theme="light"] .shadow-sm, :root[data-theme="light"] .shadow-md, :root[data-theme="light"] .shadow-lg { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10) !important; } /* Natives Datumsfeld + Kalender-Icon hell statt invertiert. */ :root[data-theme="light"] input[type="date"], :root[data-theme="light"] input.mcp-date-input { color-scheme: light; } :root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="light"] input.mcp-date-input::-webkit-calendar-picker-indicator { filter: none !important; -webkit-filter: none !important; } @-moz-document url-prefix() { :root[data-theme="light"] input[type="date"], :root[data-theme="light"] input.mcp-date-input { color-scheme: light; } } /* ========================================================================== Theme-Umschalter (Hell/Dunkel) ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-elev-2); color: var(--text-secondary); cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms; } .theme-toggle:hover { background: var(--bg-elev-3); color: var(--text-primary); border-color: var(--accent-dim); } .theme-toggle:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); } .theme-toggle svg { width: 16px; height: 16px; display: block; } /* Icon-Logik: zeigt das Ziel-Theme. Dark aktiv -> Sonne (Klick = wechsel zu Hell) Light aktiv -> Mond (Klick = wechsel zu Dunkel) */ .theme-toggle .theme-toggle__moon { display: none; } .theme-toggle .theme-toggle__sun { display: block; } :root[data-theme="light"] .theme-toggle .theme-toggle__moon { display: block; } :root[data-theme="light"] .theme-toggle .theme-toggle__sun { display: none; } /* Variante als schwebender Button (Login-Seite). */ .theme-toggle--floating { position: fixed; top: 1rem; right: 1rem; z-index: 50; }