/* ═══════════════════════════════════════════════════════════════════════ robopult — Design System v1 (rebranded from basestar.io) KI-gestütztes Telefon-Management für moderne SaaS-Unternehmen ═══════════════════════════════════════════════════════════════════════ Struktur: 1. Reset + Root-Tokens (Light-Theme) 2. Dark-Theme Overrides 3. Legacy-Aliase (rueckwaerts-kompatibel, bleibt bis Phase-J) 4. Typography / Base-Elements 5. Base-Komponenten (bs-*) 6. Legacy-Layouts (Login, Sidebar, Tabs, Dialoge …) 7. Utilities 8. Responsive Alle neuen Features IMMER mit bs-* Tokens/Klassen bauen. Alte Klassen bleiben fuer bestehenden Code funktionsfaehig. ═══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ ROBOPULT DESIGN-SYSTEM „Digitale Manufaktur" V1.0 Brand-Anchor: Industrial Navy + Precision Emerald 90 % Neutrals (Slate), 10 % Akzent (Emerald), Navy für Brand-Moments Single-Source: --rp-* Tokens. Bestehende --bs-* sind kompatible Aliases. ═══════════════════════════════════════════════════════════════════════ */ :root { /* === Core Brand: Industrial Navy (Logo, Header, Autorität) === */ --rp-navy: #1A2B3C; /* Industrial Navy — Primärfarbe für Brand-Moments */ --rp-navy-strong: #0F1B2A; /* Hover/Active */ --rp-navy-soft: #E2E8F0; /* Soft-BG-Companion (gleicher Slate-Stack) */ /* === Foundation: Slate-Stack (90 % der UI) === */ --rp-slate-50: #F8FAFC; --rp-slate-100: #F1F5F9; --rp-slate-200: #E2E8F0; --rp-slate-300: #CBD5E1; --rp-slate-400: #94A3B8; --rp-slate-500: #64748B; --rp-slate-600: #475569; --rp-slate-700: #334155; --rp-slate-800: #1E293B; --rp-slate-900: #0F172A; /* === Brand-Akzent: Precision Emerald (Action-Buttons, "System Aktiv") === */ --rp-emerald-50: #ECFDF5; --rp-emerald-100: #D1FAE5; --rp-emerald-300: #6EE7B7; --rp-emerald-400: #34D399; --rp-emerald-500: #10B981; /* Precision Emerald — Brand-Akzent */ --rp-emerald-600: #059669; --rp-emerald-700: #047857; /* === Module-Akzente (kategorial — pro Modul ein Ton) === */ --rp-mod-attendant: var(--rp-emerald-500); --rp-mod-attendant-soft: var(--rp-emerald-100); --rp-mod-voicemail: #0891B2; /* cyan-600 — Stream/Tech */ --rp-mod-voicemail-soft: #CFFAFE; --rp-mod-announcements: #D97706; /* amber-600 — Audio/Warmth */ --rp-mod-announcements-soft: #FEF3C7; --rp-mod-team: #7C3AED; /* violet-600 — Friendly People */ --rp-mod-team-soft: #EDE9FE; --rp-mod-platform: var(--rp-slate-600); --rp-mod-platform-soft: var(--rp-slate-200); /* === Status (semantisch, sparsam) === */ --rp-success: var(--rp-emerald-500); --rp-success-soft: var(--rp-emerald-100); --rp-warning: #D97706; --rp-warning-soft: #FEF3C7; --rp-danger: #EF4444; --rp-danger-soft: #FEE2E2; --rp-info: var(--rp-slate-600); --rp-info-soft: var(--rp-slate-200); /* === Ticket-Status-Palette (R10 — distinkte Farbe pro Workflow-State) === Jeder Status bekommt eine eigene visuelle Identität. Workflow-Logik: open = Frisch rein, Aufmerksamkeit nötig → Blue-600 (Info-Klassiker) in_progress = Aktiv bearbeitet (Mensch dran) → Violet-600 (Team-Akzent) snoozed = Wartet auf Termin / Wiedervorlage → Amber-600 (Pause-Signal) done = Erledigt / fertig → Emerald-600 (Erfolg) dropped = Verworfen / abgehakt (kein Fehler!) → Slate-500 (neutral) */ --rp-status-open: #2563EB; /* blue-600 */ --rp-status-open-soft: #DBEAFE; /* blue-100 */ --rp-status-progress: #7C3AED; /* violet-600 */ --rp-status-progress-soft:#EDE9FE; /* violet-100 */ --rp-status-snoozed: #D97706; /* amber-600 */ --rp-status-snoozed-soft: #FEF3C7; /* amber-100 */ --rp-status-done: #059669; /* emerald-600 */ --rp-status-done-soft: #D1FAE5; /* emerald-100 */ --rp-status-dropped: var(--rp-slate-500); --rp-status-dropped-soft: var(--rp-slate-200); /* === Shadows (modern, soft, layered — kein hartes Black) === */ --rp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --rp-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04); --rp-shadow-md: 0 4px 12px -4px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --rp-shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06); --rp-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px rgba(15, 23, 42, 0.08); /* ─── Brand-Anchor: Navy für Sidebar-Logo, Wordmark, Header-Decoration ── */ --bs-brand-navy: var(--rp-navy); --bs-brand-navy-hover: var(--rp-navy-strong); /* ─── Backward-Compat: --bs-* aliasen auf RP-Tokens ───────────────── */ --bs-primary: var(--rp-slate-700); /* Buttons + Body-CTA (nicht zu dunkel) */ --bs-primary-hover: var(--rp-slate-800); --bs-primary-strong: var(--rp-slate-900); --bs-primary-soft: var(--rp-slate-100); --bs-primary-fg: #ffffff; --bs-accent: var(--rp-emerald-500); /* Brand-Akzent: System Aktiv, CTA */ --bs-accent-soft: var(--rp-emerald-100); --bs-accent-cyan: var(--rp-emerald-400); --bs-accent-sky: var(--rp-slate-600); --bs-mod-attendant: var(--rp-mod-attendant); --bs-mod-attendant-soft: var(--rp-mod-attendant-soft); --bs-mod-voicemail: var(--bs-mod-voicemail); --bs-mod-voicemail-soft: var(--bs-mod-voicemail-soft); --bs-mod-announcements: var(--bs-mod-announcements); --bs-mod-announcements-soft:var(--bs-mod-announcements-soft); --bs-mod-team: var(--bs-mod-team); --bs-mod-team-soft: var(--bs-mod-team-soft); --bs-mod-platform: var(--rp-mod-platform); --bs-mod-platform-soft: var(--rp-mod-platform-soft); --bs-gradient-brand: linear-gradient(135deg, var(--rp-slate-800) 0%, var(--rp-emerald-500) 100%); --bs-gradient-hero: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); --bs-gradient-text: linear-gradient(135deg, #ffffff 30%, #34d399 70%, #10b981 100%); --bs-glow-indigo: radial-gradient(circle at 30% 30%, rgba(30,41,59,0.14), transparent 60%); --bs-glow-purple: radial-gradient(circle at 70% 70%, rgba(16,185,129,0.14), transparent 60%); /* --- Flaechen --- */ --bs-bg: #f8fafc; --bs-bg-elevated: #ffffff; --bs-bg-subtle: #f1f5f9; --bs-bg-inset: #f8fafc; /* --bs-input-bg: Background fuer Form-Controls (Inputs, Textareas, Selects). Light: weiss (gleich wie elevated). Dark: slate-900 (hebt sich gegen slate-800-Card ab). */ --bs-input-bg: #ffffff; /* --- Auth-Hero (Login-Page Stage links) — eigene Token-Skala, weil das Hero eigene Slate-Werte hat (Pearl-100 / Slate-800) statt page-bg / elevated. --- */ --bs-hero-bg: #F1F5F9; /* slate-100 — light pearl */ --bs-hero-fg: #0F172A; /* slate-900 — Brand-Navy-Anchor */ --bs-hero-border: #E2E8F0; --bs-hero-headline: var(--rp-navy); --bs-hero-accent: #10B981; /* emerald-500 */ --bs-hero-subtitle: #475569; /* slate-600 */ --bs-hero-feature: var(--rp-navy); --bs-hero-feature-icon-bg: #FFFFFF; --bs-hero-feature-icon-color: #10B981; --bs-hero-feature-icon-border: rgba(16, 185, 129, 0.35); --bs-hero-footer: #64748B; --bs-hero-status-bg: rgba(15, 23, 42, 0.05); --bs-hero-status-border: rgba(15, 23, 42, 0.14); --bs-hero-status-fg: #475569; --bs-hero-trust-shadow: rgba(15, 23, 42, 0.10); --bs-hero-mark-shadow: rgba(15, 23, 42, 0.18); --bs-hero-grid-line: rgba(15, 23, 42, 0.05); /* --- Brand-Mark Fills (Login-Card, Sidebar, Hero — alle nutzen dieselbe Skala) --- */ --bs-mark-bg: var(--rp-navy); --bs-mark-fg: #ffffff; --bs-mark-shadow: rgba(26, 43, 60, 0.30); /* --- Dash-Hero Glow (Light: dezent, Dark: kraeftiger) --- */ --bs-dash-hero-glow-navy: rgba(30, 41, 59, 0.16); --bs-dash-hero-glow-emerald: rgba(16, 185, 129, 0.13); /* --- Sidebar-Logo Stroke (in Dark heller damit Logo lesbar bleibt) --- */ --bs-sidebar-logo-fg: var(--bs-brand-navy); /* --- Att-Bar-Fill (Stat-Bar-Charts im Attendant-Dashboard) --- */ --bs-att-bar-fill-gradient: linear-gradient(180deg, #475569, #1A2B3C); --bs-att-bar-fill-emerald-gradient: linear-gradient(180deg, #34D399, #10B981); /* --- Att-Session Outcomes ("Anrufer aufgelegt" / "Sonstige") --- In Light: Navy + Pink-600. In Dark: Slate-300 + Pink-300 (Lesbarkeit). */ --bs-att-sess-hangup-bg: rgba(26, 43, 60, 0.10); --bs-att-sess-hangup-fg: var(--rp-navy); --bs-att-sess-hangup-bar: var(--rp-navy); --bs-att-sess-default-bg: rgba(219, 39, 119, 0.10); --bs-att-sess-default-fg: #DB2777; --bs-att-sess-default-bar: #DB2777; /* --- Att-KPI-Month-Icon (Monats-KPI-Card-Icon, Navy in Light, Slate-300 in Dark) --- */ --bs-att-kpi-month-bg: var(--bs-primary-soft); --bs-att-kpi-month-fg: var(--bs-primary); /* --- Ti-Icon-Backgrounds (Tenant-Integrationen Tab Icons, Domain-coded) --- */ --bs-ti-icon-teal-bg: rgba(13, 148, 136, 0.10); --bs-ti-icon-teal-fg: #0d9488; --bs-ti-icon-teal-border: rgba(13, 148, 136, 0.22); --bs-ti-icon-emerald-bg: rgba(16, 185, 129, 0.12); --bs-ti-icon-emerald-fg: var(--rp-emerald-500); --bs-ti-icon-emerald-border: rgba(16, 185, 129, 0.24); --bs-ti-icon-danger-bg: rgba(239, 68, 68, 0.10); --bs-ti-icon-danger-fg: #b91c1c; --bs-ti-icon-danger-border: rgba(239, 68, 68, 0.24); /* --- Ti-Section-Icon-VM (Voicemail-Section-Icon-Color im Tab-Header) --- */ --bs-ti-section-icon-vm: #0d9488; /* --- Ti-Key-Status (API-Key-Status-Pille im Tenant-Integrationen Tab) --- */ --bs-ti-key-status-ok-bg: rgba(16,185,129,0.12); --bs-ti-key-status-ok-fg: #047857; --bs-ti-key-status-fallback-bg: rgba(245,158,11,0.12); --bs-ti-key-status-fallback-fg: #b45309; --bs-ti-key-status-missing-bg: rgba(239,68,68,0.10); --bs-ti-key-status-missing-fg: #b91c1c; /* --- Bundle-Unlock-Chip (in einer aktiven Bundle-Card; weisses Overlay in Light, Slate-Alpha in Dark) --- */ --bs-bundle-unlock-active-bg: rgba(255, 255, 255, 0.4); /* --- Tu-Feat-Row Hover (Tenant-User Per-Feature-Permission-Row) --- */ --bs-tu-feat-row-hover-bg: var(--bs-bg-subtle); /* --- Ann-Card-Assigned-Banner is-live (Live-Slot-Anzeige) --- */ --bs-ann-banner-live-bg: rgba(16, 185, 129, 0.06); --bs-ann-banner-live-border: rgba(16, 185, 129, 0.32); /* --- Modsec-Att-Card (Module-Section Attendant-Card im Platform-Admin) --- */ --bs-modsec-att-card-bg: var(--bs-bg-subtle); --bs-modsec-att-card-border: var(--bs-border); /* --- Att-Test-Pending/Error Pills (Test-Anruf Status-Banner) --- */ --bs-att-test-pending-bg: var(--bs-warning-soft); --bs-att-test-pending-fg: #92400e; --bs-att-test-error-bg: var(--bs-danger-soft); --bs-att-test-error-fg: #991b1b; /* --- Att-Ext-Presets-Section (Erweiterte Preset-Liste fuer Attendant) --- */ --bs-att-ext-presets-bg: var(--bs-bg-subtle); /* --- Dae-Preset-Banner (DepartmentExplorer Preset-Banner) --- */ --bs-dae-preset-banner-bg: rgba(16, 185, 129, 0.08); --bs-dae-preset-banner-border: rgba(16, 185, 129, 0.28); /* --- Dash2-KPI Hover (Tenant-Dashboard KPI-Card-Hover) --- */ --bs-dash2-kpi-hover-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); /* --- Dash2-Icon-{vm,att,ann} (Module-Icon-Backgrounds im Tenant-Dashboard) --- */ --bs-dash2-icon-bg: var(--bs-bg-subtle); /* --- Dash-Att-Header (Attendant-Header im Tenant-Dashboard) --- */ --bs-dash-att-header-bg: var(--bs-bg-subtle); --bs-dash-att-header-border: var(--bs-border); /* --- Dae-Explainer (Wizard-Erlaeuterungs-Block) --- */ --bs-dae-explainer-bg: var(--bs-bg-subtle); /* --- Dad-Output-Row Active (Department-Editor Output-Konfig aktiv) --- */ --bs-dad-output-active-bg: rgba(16, 185, 129, 0.08); --bs-dad-output-active-border: rgba(16, 185, 129, 0.30); /* --- Dad-Crm-Section / Att-Dep-Crm-Line / Att-Msg-Crm-Badge --- */ --bs-dad-crm-section-bg: var(--bs-bg-subtle); --bs-att-dep-crm-line-color: var(--bs-fg-muted); --bs-att-msg-crm-badge-bg: rgba(16, 185, 129, 0.10); --bs-att-msg-crm-badge-fg: #047857; --bs-dam-sync-block-bg: var(--bs-bg-subtle); /* --- Dad-Mode-Card Active (Mode-Picker aktiv) --- */ --bs-dad-mode-active-bg: var(--bs-primary-soft); --bs-dad-mode-active-icon-bg: var(--bs-bg-elevated); --bs-dad-mode-active-icon-fg: var(--bs-primary); /* --- Att-Dep-Mode-Transfer/Ticket (Mode-Pills im Department) --- */ --bs-att-dep-mode-transfer-bg: rgba(30, 41, 59, 0.06); --bs-att-dep-mode-transfer-fg: var(--bs-primary); --bs-att-dep-mode-ticket-bg: rgba(217, 119, 6, 0.08); --bs-att-dep-mode-ticket-fg: #B45309; /* --- Att-Dep-Action-Transfer (Action-Linie fuer Transfer-Mode) --- */ --bs-att-dep-action-transfer-color: var(--bs-primary); /* --- Dae-Discover-Bar / Dae-Analyze-Ok (DepartmentExplorer Discover-Wizard) --- */ --bs-dae-discover-bar-bg: var(--bs-bg-subtle); --bs-dae-analyze-ok-bg: rgba(16, 185, 129, 0.10); --bs-dae-analyze-ok-fg: #047857; /* --- Tnt-Btn text-color on Accent (warning/success/accent Buttons im Tenant-Modal) --- Light: Navy fuer Kontrast auf Amber/Emerald. Dark: slate-900 (etwas dunkler). */ --bs-tnt-btn-color-on-accent: #1A2B3C; /* --- Text --- */ --bs-fg: #0f172a; --bs-fg-muted: #475569; --bs-fg-subtle: #64748b; /* --- Rahmen --- */ --bs-border: #e2e8f0; --bs-border-hover: #cbd5e1; --bs-border-strong: #94a3b8; /* --- Status --- */ --bs-success: #10b981; --bs-success-soft: #d1fae5; --bs-warning: #f59e0b; --bs-warning-soft: #fef3c7; --bs-danger: #ef4444; --bs-danger-soft: #fee2e2; --bs-info: #475569; /* slate-600 — neutral info statt Sky-Blau */ --bs-info-soft: #f1f5f9; /* slate-100 */ /* --- Typography (Robopult: Outfit für Display + UI, JetBrains Mono für Code) --- */ --bs-font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif; --bs-font-display: 'Outfit', 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif; --bs-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --bs-text-xs: 11px; --bs-text-sm: 12px; --bs-text-base: 14px; --bs-text-md: 16px; --bs-text-lg: 20px; --bs-text-xl: 24px; --bs-text-2xl: 32px; --bs-weight-normal: 400; --bs-weight-medium: 500; --bs-weight-semibold: 600; --bs-weight-bold: 700; /* --- Spacing (4px grid) --- */ --bs-1: 4px; --bs-2: 8px; --bs-3: 12px; --bs-4: 16px; --bs-5: 20px; --bs-6: 24px; --bs-8: 32px; --bs-10: 40px; --bs-12: 48px; --bs-16: 64px; /* --- Radii (Robopult Pillow-Scale, matched zur „Digitale Manufaktur"-Vorlage) --- */ --bs-r-sm: 8px; /* small chips, mono-tags */ --bs-r: 12px; /* default cards, inputs, buttons (rounded-xl) */ --bs-r-lg: 16px; /* prominent cards (rounded-2xl) */ --bs-r-xl: 24px; /* hero cards, panels (rounded-3xl) */ --bs-r-2xl: 32px; /* mega-panels */ --bs-r-3xl: 48px; /* hero-section / decorative wrappers (rounded-[3rem]) */ --bs-r-full: 999px; /* --- Shadows --- */ --bs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --bs-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.08); --bs-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); --bs-shadow-glow: 0 0 0 3px rgba(30,41,59, 0.22); /* --- Motion --- */ --bs-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); --bs-transition-slow: 250ms cubic-bezier(0.16, 1, 0.3, 1); /* --- Z-Index --- */ --bs-z-sidebar: 30; --bs-z-banner: 40; --bs-z-topbar: 50; --bs-z-dialog: 100; --bs-z-toast: 200; } /* ────── 2. Dark-Theme Overrides (Robopult Atmospheric Slate) ──────────────── */ [data-theme="dark"] { --bs-primary: #cbd5e1; /* slate-300 — heller Stem für Dark */ --bs-primary-hover: #e2e8f0; /* slate-200 */ --bs-primary-strong: #f1f5f9; /* slate-100 */ --bs-primary-soft: rgba(203, 213, 225, 0.16); /* +60% Alpha → tab-btn.active sichtbar */ --bs-primary-fg: #0f172a; --bs-accent: #34d399; /* emerald-400 — heller Akzent für Dark */ --bs-accent-soft: rgba(52, 211, 153, 0.16); --bs-accent-cyan: #6ee7b7; /* emerald-300 */ --bs-accent-sky: #94a3b8; /* slate-400 */ /* Module-Palette Dark — heller-saturierter, soft mit Alpha statt Pastell */ --bs-mod-attendant: #34d399; --bs-mod-attendant-soft: rgba(52, 211, 153, 0.16); --bs-mod-voicemail: #22d3ee; /* cyan-400 */ --bs-mod-voicemail-soft: rgba(34, 211, 238, 0.14); --bs-mod-announcements: #fbbf24; /* amber-400 */ --bs-mod-announcements-soft:rgba(251, 191, 36, 0.14); --bs-mod-team: #a78bfa; /* violet-400 */ --bs-mod-team-soft: rgba(167, 139, 250, 0.14); --bs-mod-platform: #94a3b8; /* slate-400 */ --bs-mod-platform-soft: rgba(148, 163, 184, 0.14); /* Ticket-Status-Palette Dark — heller-saturierter, Soft mit Alpha statt Pastell */ --rp-status-open: #60A5FA; /* blue-400 */ --rp-status-open-soft: rgba(96, 165, 250, 0.16); --rp-status-progress: #A78BFA; /* violet-400 */ --rp-status-progress-soft: rgba(167, 139, 250, 0.16); --rp-status-snoozed: #FBBF24; /* amber-400 */ --rp-status-snoozed-soft: rgba(251, 191, 36, 0.16); --rp-status-done: #34D399; /* emerald-400 */ --rp-status-done-soft: rgba(52, 211, 153, 0.16); --rp-status-dropped: #94A3B8; /* slate-400 */ --rp-status-dropped-soft: rgba(148, 163, 184, 0.16); --bs-gradient-hero: radial-gradient(at 30% 20%, rgba(30,41,59,0.4), transparent 50%), radial-gradient(at 70% 80%, rgba(16,185,129,0.10), transparent 50%), linear-gradient(180deg, #0F172A 0%, #1E293B 100%); /* Mai 26 V3 — Dark-Mode auf saubere Tailwind-Slate-Werte gehoben. Vorher: pitch-dark #060a13 (zu düster, schluckte Icons + soft-Banner). Jetzt: slate-900/800/700 — lesbar, Hairline-Borders weiterhin sichtbar. */ --bs-bg: #0F172A; /* slate-900 — Page-BG, deepest */ --bs-bg-elevated: #1E293B; /* slate-800 — Cards, Modals, Topbar, Sidebar */ --bs-bg-subtle: #273349; /* between slate-800/700 — Hover-Surface, sichtbarer Lift */ --bs-bg-inset: #0F172A; /* slate-900 — Inputs/Wells, „eingedrückt" */ --bs-input-bg: #0F172A; /* slate-900 — Inputs setzen sich von slate-800-Cards ab */ /* --- Auth-Hero (Dark) — slate-800 als Pearl-Dark, Brand-White als Fg --- */ --bs-hero-bg: #1E293B; /* slate-800 — deutlich heller als Page-BG */ --bs-hero-fg: #F8FAFC; --bs-hero-border: #334155; --bs-hero-headline: #F8FAFC; --bs-hero-accent: #34D399; /* emerald-400 */ --bs-hero-subtitle: #CBD5E1; /* slate-300 */ --bs-hero-feature: #E2E8F0; --bs-hero-feature-icon-bg: rgba(16, 185, 129, 0.12); --bs-hero-feature-icon-color: #34D399; --bs-hero-feature-icon-border: rgba(16, 185, 129, 0.35); --bs-hero-footer: #94A3B8; --bs-hero-status-bg: rgba(248, 250, 252, 0.06); --bs-hero-status-border: rgba(248, 250, 252, 0.14); --bs-hero-status-fg: #CBD5E1; --bs-hero-trust-shadow: rgba(248, 250, 252, 0.18); --bs-hero-mark-shadow: rgba(248, 250, 252, 0.10); --bs-hero-grid-line: rgba(248, 250, 252, 0.06); /* Brand-Mark in Dark: invertiert (heller Container, navy Stems) */ --bs-mark-bg: #F1F5F9; --bs-mark-fg: var(--rp-navy); --bs-mark-shadow: rgba(241, 245, 249, 0.20); /* Dash-Hero Glow Dark: staerker */ --bs-dash-hero-glow-navy: rgba(30, 41, 59, 0.28); --bs-dash-hero-glow-emerald: rgba(16, 185, 129, 0.22); /* Sidebar-Logo Dark: slate-300 fuer Kontrast auf slate-800 */ --bs-sidebar-logo-fg: var(--rp-slate-300); /* Bento-Card Glass-Morph: nur in Dark sinnvoll (auf hellem BG zu durchscheinend) */ --bs-bento-bg-overlay: rgba(255, 255, 255, 0.015); --bs-bento-filter: blur(20px); /* Team-Card Hover (Dark: weisses Overlay statt elevated) */ --bs-team-card-hover-bg: rgba(255, 255, 255, 0.03); --bs-team-card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); /* Att-Bar-Fill Dark: heller Slate-Blue + heller Emerald */ --bs-att-bar-fill-gradient: linear-gradient(180deg, #94A3B8, #64748B); --bs-att-bar-fill-emerald-gradient: linear-gradient(180deg, #6EE7B7, #34D399); /* Att-Session Outcomes Dark */ --bs-att-sess-hangup-bg: rgba(148, 163, 184, 0.16); --bs-att-sess-hangup-fg: #cbd5e1; --bs-att-sess-hangup-bar: #94a3b8; --bs-att-sess-default-bg: rgba(244, 114, 182, 0.16); --bs-att-sess-default-fg: #f9a8d4; --bs-att-sess-default-bar: #f472b6; /* Att-KPI-Month-Icon Dark: Slate-300 statt Navy */ --bs-att-kpi-month-bg: rgba(148, 163, 184, 0.16); --bs-att-kpi-month-fg: #cbd5e1; /* Ti-Icon-Backgrounds Dark: heller-saturierte Variants */ --bs-ti-icon-teal-bg: rgba(45, 212, 191, 0.14); --bs-ti-icon-teal-fg: #2dd4bf; --bs-ti-icon-teal-border: rgba(13, 148, 136, 0.22); --bs-ti-icon-emerald-bg: rgba(16, 185, 129, 0.18); --bs-ti-icon-emerald-fg: #34d399; --bs-ti-icon-emerald-border: rgba(16, 185, 129, 0.24); --bs-ti-icon-danger-bg: rgba(239, 68, 68, 0.16); --bs-ti-icon-danger-fg: #fca5a5; --bs-ti-icon-danger-border: rgba(239, 68, 68, 0.24); /* Ti-Section-Icon-VM Dark: Teal-400 */ --bs-ti-section-icon-vm: #2dd4bf; /* Ti-Key-Status Dark: heller-saturiert */ --bs-ti-key-status-ok-bg: rgba(16,185,129,0.18); --bs-ti-key-status-ok-fg: #6ee7b7; --bs-ti-key-status-fallback-bg: rgba(245,158,11,0.18); --bs-ti-key-status-fallback-fg: #fcd34d; --bs-ti-key-status-missing-bg: rgba(239,68,68,0.16); --bs-ti-key-status-missing-fg: #fca5a5; /* Bundle-Unlock-Chip Dark: Slate-Alpha statt White-Alpha */ --bs-bundle-unlock-active-bg: rgba(30,41,59, 0.18); /* Tu-Feat-Row Hover Dark */ --bs-tu-feat-row-hover-bg: rgba(255, 255, 255, 0.025); /* Ann-Banner Live Dark */ --bs-ann-banner-live-bg: rgba(16, 185, 129, 0.12); --bs-ann-banner-live-border: rgba(16, 185, 129, 0.35); /* Modsec-Att-Card Dark */ --bs-modsec-att-card-bg: rgba(255, 255, 255, 0.02); --bs-modsec-att-card-border: rgba(255, 255, 255, 0.08); --bs-modsec-att-card-gradient: linear-gradient(135deg, rgba(30,41,59,0.12), rgba(16,185,129,0.10)); --bs-modsec-att-card-border-color: rgba(30,41,59, 0.3); /* Att-Test-Pending/Error Dark */ --bs-att-test-pending-bg: rgba(245,158,11,0.10); --bs-att-test-pending-fg: #fcd34d; --bs-att-test-error-bg: rgba(239,68,68,0.10); --bs-att-test-error-fg: #fca5a5; /* Att-Ext-Presets-Section Dark */ --bs-att-ext-presets-bg: rgba(255, 255, 255, 0.02); --bs-att-ext-presets-gradient: linear-gradient(135deg, rgba(30,41,59,0.10), rgba(16,185,129,0.06)); /* Dae-Preset-Banner Dark */ --bs-dae-preset-banner-bg: rgba(16, 185, 129, 0.12); --bs-dae-preset-banner-border: rgba(16, 185, 129, 0.32); --bs-dae-preset-banner-gradient: linear-gradient(135deg, rgba(30,41,59,0.12), rgba(16,185,129,0.08)); /* Dash2-KPI Hover Dark */ --bs-dash2-kpi-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --bs-dash2-kpi-hover-box-shadow: 0 12px 32px -16px rgba(0,0,0,0.4); /* Dash2-Icon-{vm,att,ann} Dark */ --bs-dash2-icon-bg: rgba(255, 255, 255, 0.04); --bs-dash2-icon-shadow: 0 4px 14px -4px rgba(16, 185, 129, 0.40); /* Dash-Att-Header Dark */ --bs-dash-att-header-bg: rgba(255, 255, 255, 0.02); --bs-dash-att-header-border: rgba(255, 255, 255, 0.08); --bs-dash-att-header-gradient: linear-gradient(90deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06)); /* Dae-Explainer Dark */ --bs-dae-explainer-bg: rgba(255, 255, 255, 0.02); --bs-dae-explainer-gradient: linear-gradient(135deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06)); --bs-dae-explainer-border: rgba(30,41,59,0.2); /* Dad-Output-Row Active Dark */ --bs-dad-output-active-bg: rgba(16, 185, 129, 0.12); --bs-dad-output-active-border: rgba(16, 185, 129, 0.32); --bs-dad-output-row-active-bg: rgba(30,41,59,0.08); /* Dad-Crm-Section / Att-Dep-Crm-Line / Att-Msg-Crm-Badge Dark */ --bs-dad-crm-section-bg: rgba(255, 255, 255, 0.02); --bs-dad-crm-section-active-bg: rgba(30,41,59,0.08); --bs-dad-crm-section-active-border: rgba(30,41,59,0.18); --bs-att-dep-crm-line-color: #CBD5E1; --bs-att-dep-crm-line-bg: rgba(30,41,59,0.08); --bs-att-msg-crm-badge-bg: rgba(16,185,129,0.12); --bs-att-msg-crm-badge-fg: #6ee7b7; --bs-dam-sync-block-bg: rgba(255, 255, 255, 0.02); --bs-dam-sync-block-gradient: linear-gradient(135deg, rgba(16,185,129,0.08), var(--bs-bg-subtle)); --bs-dam-sync-block-border: rgba(16,185,129,0.4); /* Dad-Mode-Card Active Dark */ --bs-dad-mode-active-bg: var(--bs-primary-soft); --bs-dad-mode-active-icon-bg: rgba(255, 255, 255, 0.06); --bs-dad-mode-active-icon-fg: #CBD5E1; --bs-dad-mode-card-active-bg: rgba(30,41,59,0.12); --bs-dad-mode-card-active-icon-bg: var(--bs-bg-elevated); /* Att-Dep-Mode-Transfer/Ticket Dark */ --bs-att-dep-mode-transfer-bg: rgba(255,255,255,0.06); --bs-att-dep-mode-transfer-fg: var(--bs-fg); --bs-att-dep-mode-ticket-bg: rgba(245,158,11,0.15); --bs-att-dep-mode-ticket-fg: #fcd34d; /* Att-Dep-Action-Transfer Dark */ --bs-att-dep-action-transfer-color: #93C5FD; --bs-att-dep-action-transfer-bg: rgba(255,255,255,0.04); /* Dae-Discover-Bar / Dae-Analyze-Ok Dark */ --bs-dae-discover-bar-bg: rgba(255, 255, 255, 0.04); --bs-dae-analyze-ok-bg: rgba(16, 185, 129, 0.16); --bs-dae-analyze-ok-fg: #6EE7B7; --bs-dae-discover-bar-gradient: linear-gradient(135deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06)); --bs-dae-discover-bar-border: rgba(30,41,59,0.2); --bs-dae-analyze-ok-bg-soft: rgba(16,185,129,0.08); --bs-dae-analyze-fail-bg-soft: rgba(239,68,68,0.08); /* Tnt-Btn text-color on Accent Dark */ --bs-tnt-btn-color-on-accent: var(--rp-slate-900); --bs-fg: #F1F5F9; /* slate-100 — hoher Kontrast */ --bs-fg-muted: #CBD5E1; /* slate-300 — sekundäre Texte, Icon-Default */ --bs-fg-subtle: #94A3B8; /* slate-400 — Caption, Meta */ --bs-border: #334155; /* slate-700 — deutliche Hairline */ --bs-border-hover: #475569; /* slate-600 */ --bs-border-strong: #64748B; /* slate-500 */ /* Status-Foregrounds in Dark hochziehen — Light-Werte (z.B. emerald-500 #10b981) wirken auf dem dunklen BG zu satt; -400-Varianten lesbarer + freundlicher. */ --bs-success: #34D399; /* emerald-400 */ --bs-warning: #FBBF24; /* amber-400 */ --bs-danger: #F87171; /* red-400 */ --bs-info: #94A3B8; /* slate-400 */ --bs-success-soft: rgba(16, 185, 129, 0.18); --bs-warning-soft: rgba(245, 158, 11, 0.18); --bs-danger-soft: rgba(239, 68, 68, 0.18); --bs-info-soft: rgba(148, 163, 184, 0.16); --bs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --bs-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --bs-shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.6); --bs-shadow-glow: 0 0 0 3px rgba(52, 211, 153, 0.28); --bs-glow-indigo: radial-gradient(circle at 30% 30%, rgba(30,41,59,0.32), transparent 60%); --bs-glow-purple: radial-gradient(circle at 70% 70%, rgba(16,185,129,0.18), transparent 60%); } /* Wenn Theme auf 'auto' steht (oder nicht gesetzt): prefers-color-scheme. WICHTIG: Muss identisch sein zu [data-theme="dark"] oben — sonst sieht der User ein anderes Erscheinungsbild zwischen "Theme=Dark" und "Theme=Auto + System=Dark". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bs-primary: #cbd5e1; /* slate-300 — heller Stem für Dark */ --bs-primary-hover: #e2e8f0; /* slate-200 */ --bs-primary-strong: #f1f5f9; /* slate-100 */ --bs-primary-soft: rgba(203, 213, 225, 0.16); /* +60% Alpha → tab-btn.active sichtbar */ --bs-primary-fg: #0f172a; --bs-accent: #34d399; /* emerald-400 — heller Akzent für Dark */ --bs-accent-soft: rgba(52, 211, 153, 0.16); --bs-accent-cyan: #6ee7b7; /* emerald-300 */ --bs-accent-sky: #94a3b8; /* slate-400 */ /* Module-Palette Dark — heller-saturierter, soft mit Alpha statt Pastell */ --bs-mod-attendant: #34d399; --bs-mod-attendant-soft: rgba(52, 211, 153, 0.16); --bs-mod-voicemail: #22d3ee; /* cyan-400 */ --bs-mod-voicemail-soft: rgba(34, 211, 238, 0.14); --bs-mod-announcements: #fbbf24; /* amber-400 */ --bs-mod-announcements-soft:rgba(251, 191, 36, 0.14); --bs-mod-team: #a78bfa; /* violet-400 */ --bs-mod-team-soft: rgba(167, 139, 250, 0.14); --bs-mod-platform: #94a3b8; /* slate-400 */ --bs-mod-platform-soft: rgba(148, 163, 184, 0.14); /* Ticket-Status-Palette Dark — heller-saturierter, Soft mit Alpha statt Pastell */ --rp-status-open: #60A5FA; /* blue-400 */ --rp-status-open-soft: rgba(96, 165, 250, 0.16); --rp-status-progress: #A78BFA; /* violet-400 */ --rp-status-progress-soft: rgba(167, 139, 250, 0.16); --rp-status-snoozed: #FBBF24; /* amber-400 */ --rp-status-snoozed-soft: rgba(251, 191, 36, 0.16); --rp-status-done: #34D399; /* emerald-400 */ --rp-status-done-soft: rgba(52, 211, 153, 0.16); --rp-status-dropped: #94A3B8; /* slate-400 */ --rp-status-dropped-soft: rgba(148, 163, 184, 0.16); --bs-gradient-hero: radial-gradient(at 30% 20%, rgba(30,41,59,0.4), transparent 50%), radial-gradient(at 70% 80%, rgba(16,185,129,0.10), transparent 50%), linear-gradient(180deg, #0F172A 0%, #1E293B 100%); --bs-bg: #0F172A; /* slate-900 — Page-BG, deepest */ --bs-bg-elevated: #1E293B; /* slate-800 — Cards, Modals, Topbar, Sidebar */ --bs-bg-subtle: #273349; /* between slate-800/700 — Hover-Surface, sichtbarer Lift */ --bs-bg-inset: #0F172A; /* slate-900 — Inputs/Wells, „eingedrückt" */ --bs-input-bg: #0F172A; /* slate-900 — Inputs setzen sich von slate-800-Cards ab */ /* --- Auth-Hero (Dark) — slate-800 als Pearl-Dark, Brand-White als Fg --- */ --bs-hero-bg: #1E293B; --bs-hero-fg: #F8FAFC; --bs-hero-border: #334155; --bs-hero-headline: #F8FAFC; --bs-hero-accent: #34D399; --bs-hero-subtitle: #CBD5E1; --bs-hero-feature: #E2E8F0; --bs-hero-feature-icon-bg: rgba(16, 185, 129, 0.12); --bs-hero-feature-icon-color: #34D399; --bs-hero-feature-icon-border: rgba(16, 185, 129, 0.35); --bs-hero-footer: #94A3B8; --bs-hero-status-bg: rgba(248, 250, 252, 0.06); --bs-hero-status-border: rgba(248, 250, 252, 0.14); --bs-hero-status-fg: #CBD5E1; --bs-hero-trust-shadow: rgba(248, 250, 252, 0.18); --bs-hero-mark-shadow: rgba(248, 250, 252, 0.10); --bs-hero-grid-line: rgba(248, 250, 252, 0.06); /* Brand-Mark in Dark: invertiert */ --bs-mark-bg: #F1F5F9; --bs-mark-fg: var(--rp-navy); --bs-mark-shadow: rgba(241, 245, 249, 0.20); /* Dash-Hero Glow Dark: staerker */ --bs-dash-hero-glow-navy: rgba(30, 41, 59, 0.28); --bs-dash-hero-glow-emerald: rgba(16, 185, 129, 0.22); /* Sidebar-Logo Dark: slate-300 fuer Kontrast auf slate-800 */ --bs-sidebar-logo-fg: var(--rp-slate-300); /* Bento-Card Glass-Morph: nur in Dark sinnvoll */ --bs-bento-bg-overlay: rgba(255, 255, 255, 0.015); --bs-bento-filter: blur(20px); /* Team-Card Hover Dark */ --bs-team-card-hover-bg: rgba(255, 255, 255, 0.03); --bs-team-card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); /* Att-Bar-Fill Dark */ --bs-att-bar-fill-gradient: linear-gradient(180deg, #94A3B8, #64748B); --bs-att-bar-fill-emerald-gradient: linear-gradient(180deg, #6EE7B7, #34D399); /* Att-Session Outcomes Dark */ --bs-att-sess-hangup-bg: rgba(148, 163, 184, 0.16); --bs-att-sess-hangup-fg: #cbd5e1; --bs-att-sess-hangup-bar: #94a3b8; --bs-att-sess-default-bg: rgba(244, 114, 182, 0.16); --bs-att-sess-default-fg: #f9a8d4; --bs-att-sess-default-bar: #f472b6; /* Att-KPI-Month-Icon Dark */ --bs-att-kpi-month-bg: rgba(148, 163, 184, 0.16); --bs-att-kpi-month-fg: #cbd5e1; /* Ti-Icon-Backgrounds Dark */ --bs-ti-icon-teal-bg: rgba(45, 212, 191, 0.14); --bs-ti-icon-teal-fg: #2dd4bf; --bs-ti-icon-teal-border: rgba(13, 148, 136, 0.22); --bs-ti-icon-emerald-bg: rgba(16, 185, 129, 0.18); --bs-ti-icon-emerald-fg: #34d399; --bs-ti-icon-emerald-border: rgba(16, 185, 129, 0.24); --bs-ti-icon-danger-bg: rgba(239, 68, 68, 0.16); --bs-ti-icon-danger-fg: #fca5a5; --bs-ti-icon-danger-border: rgba(239, 68, 68, 0.24); /* Ti-Section-Icon-VM Dark */ --bs-ti-section-icon-vm: #2dd4bf; /* Ti-Key-Status Dark */ --bs-ti-key-status-ok-bg: rgba(16,185,129,0.18); --bs-ti-key-status-ok-fg: #6ee7b7; --bs-ti-key-status-fallback-bg: rgba(245,158,11,0.18); --bs-ti-key-status-fallback-fg: #fcd34d; --bs-ti-key-status-missing-bg: rgba(239,68,68,0.16); --bs-ti-key-status-missing-fg: #fca5a5; /* Bundle-Unlock-Chip Dark */ --bs-bundle-unlock-active-bg: rgba(30,41,59, 0.18); /* Tu-Feat-Row Hover Dark */ --bs-tu-feat-row-hover-bg: rgba(255, 255, 255, 0.025); /* Ann-Banner Live Dark */ --bs-ann-banner-live-bg: rgba(16, 185, 129, 0.12); --bs-ann-banner-live-border: rgba(16, 185, 129, 0.35); /* Modsec-Att-Card Dark */ --bs-modsec-att-card-bg: rgba(255, 255, 255, 0.02); --bs-modsec-att-card-border: rgba(255, 255, 255, 0.08); --bs-modsec-att-card-gradient: linear-gradient(135deg, rgba(30,41,59,0.12), rgba(16,185,129,0.10)); --bs-modsec-att-card-border-color: rgba(30,41,59, 0.3); /* Att-Test-Pending/Error Dark */ --bs-att-test-pending-bg: rgba(245,158,11,0.10); --bs-att-test-pending-fg: #fcd34d; --bs-att-test-error-bg: rgba(239,68,68,0.10); --bs-att-test-error-fg: #fca5a5; /* Att-Ext-Presets-Section Dark */ --bs-att-ext-presets-bg: rgba(255, 255, 255, 0.02); --bs-att-ext-presets-gradient: linear-gradient(135deg, rgba(30,41,59,0.10), rgba(16,185,129,0.06)); /* Dae-Preset-Banner Dark */ --bs-dae-preset-banner-bg: rgba(16, 185, 129, 0.12); --bs-dae-preset-banner-border: rgba(16, 185, 129, 0.32); --bs-dae-preset-banner-gradient: linear-gradient(135deg, rgba(30,41,59,0.12), rgba(16,185,129,0.08)); /* Dash2-KPI Hover Dark */ --bs-dash2-kpi-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --bs-dash2-kpi-hover-box-shadow: 0 12px 32px -16px rgba(0,0,0,0.4); /* Dash2-Icon-{vm,att,ann} Dark */ --bs-dash2-icon-bg: rgba(255, 255, 255, 0.04); --bs-dash2-icon-shadow: 0 4px 14px -4px rgba(16, 185, 129, 0.40); /* Dash-Att-Header Dark */ --bs-dash-att-header-bg: rgba(255, 255, 255, 0.02); --bs-dash-att-header-border: rgba(255, 255, 255, 0.08); --bs-dash-att-header-gradient: linear-gradient(90deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06)); /* Dae-Explainer Dark */ --bs-dae-explainer-bg: rgba(255, 255, 255, 0.02); --bs-dae-explainer-gradient: linear-gradient(135deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06)); --bs-dae-explainer-border: rgba(30,41,59,0.2); /* Dad-Output-Row Active Dark */ --bs-dad-output-active-bg: rgba(16, 185, 129, 0.12); --bs-dad-output-active-border: rgba(16, 185, 129, 0.32); --bs-dad-output-row-active-bg: rgba(30,41,59,0.08); /* Dad-Crm-Section / Att-Dep-Crm-Line / Att-Msg-Crm-Badge Dark */ --bs-dad-crm-section-bg: rgba(255, 255, 255, 0.02); --bs-dad-crm-section-active-bg: rgba(30,41,59,0.08); --bs-dad-crm-section-active-border: rgba(30,41,59,0.18); --bs-att-dep-crm-line-color: #CBD5E1; --bs-att-dep-crm-line-bg: rgba(30,41,59,0.08); --bs-att-msg-crm-badge-bg: rgba(16,185,129,0.12); --bs-att-msg-crm-badge-fg: #6ee7b7; --bs-dam-sync-block-bg: rgba(255, 255, 255, 0.02); --bs-dam-sync-block-gradient: linear-gradient(135deg, rgba(16,185,129,0.08), var(--bs-bg-subtle)); --bs-dam-sync-block-border: rgba(16,185,129,0.4); /* Dad-Mode-Card Active Dark */ --bs-dad-mode-active-bg: var(--bs-primary-soft); --bs-dad-mode-active-icon-bg: rgba(255, 255, 255, 0.06); --bs-dad-mode-active-icon-fg: #CBD5E1; --bs-dad-mode-card-active-bg: rgba(30,41,59,0.12); --bs-dad-mode-card-active-icon-bg: var(--bs-bg-elevated); /* Att-Dep-Mode-Transfer/Ticket Dark */ --bs-att-dep-mode-transfer-bg: rgba(255,255,255,0.06); --bs-att-dep-mode-transfer-fg: var(--bs-fg); --bs-att-dep-mode-ticket-bg: rgba(245,158,11,0.15); --bs-att-dep-mode-ticket-fg: #fcd34d; /* Att-Dep-Action-Transfer Dark */ --bs-att-dep-action-transfer-color: #93C5FD; --bs-att-dep-action-transfer-bg: rgba(255,255,255,0.04); /* Dae-Discover-Bar / Dae-Analyze-Ok Dark */ --bs-dae-discover-bar-bg: rgba(255, 255, 255, 0.04); --bs-dae-analyze-ok-bg: rgba(16, 185, 129, 0.16); --bs-dae-analyze-ok-fg: #6EE7B7; --bs-dae-discover-bar-gradient: linear-gradient(135deg, rgba(30,41,59,0.1), rgba(16,185,129,0.06)); --bs-dae-discover-bar-border: rgba(30,41,59,0.2); --bs-dae-analyze-ok-bg-soft: rgba(16,185,129,0.08); --bs-dae-analyze-fail-bg-soft: rgba(239,68,68,0.08); /* Tnt-Btn text-color on Accent Dark */ --bs-tnt-btn-color-on-accent: var(--rp-slate-900); --bs-fg: #F1F5F9; /* slate-100 — hoher Kontrast */ --bs-fg-muted: #CBD5E1; /* slate-300 — sekundäre Texte, Icon-Default */ --bs-fg-subtle: #94A3B8; /* slate-400 — Caption, Meta */ --bs-border: #334155; /* slate-700 — deutliche Hairline */ --bs-border-hover: #475569; /* slate-600 */ --bs-border-strong: #64748B; /* slate-500 */ /* Status-Foregrounds in Dark hochziehen — Light-Werte (z.B. emerald-500 #10b981) wirken auf dem dunklen BG zu satt; -400-Varianten lesbarer + freundlicher. */ --bs-success: #34D399; /* emerald-400 */ --bs-warning: #FBBF24; /* amber-400 */ --bs-danger: #F87171; /* red-400 */ --bs-info: #94A3B8; /* slate-400 */ --bs-success-soft: rgba(16, 185, 129, 0.18); --bs-warning-soft: rgba(245, 158, 11, 0.18); --bs-danger-soft: rgba(239, 68, 68, 0.18); --bs-info-soft: rgba(148, 163, 184, 0.16); --bs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --bs-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --bs-shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.6); --bs-shadow-glow: 0 0 0 3px rgba(52, 211, 153, 0.28); --bs-glow-indigo: radial-gradient(circle at 30% 30%, rgba(30,41,59,0.32), transparent 60%); --bs-glow-purple: radial-gradient(circle at 70% 70%, rgba(16,185,129,0.18), transparent 60%); } } /* ────── 3. Legacy-Aliase (rueckwaerts-kompatibel) ──────────────────── */ :root { --primary: var(--bs-primary); --primary-dark: var(--bs-primary-hover); --accent: var(--bs-accent-sky); --success: var(--bs-success); --warning: var(--bs-warning); --danger: var(--bs-danger); /* --gradient/-soft: Legacy-Aliases. War früher Indigo→Purple-Verlauf, jetzt fix Emerald für saubere Modul-Avatare/Badges. Soft bleibt Hero-Gradient. */ --gradient: var(--rp-emerald-500); --gradient-soft: var(--bs-gradient-hero); --text: var(--bs-fg); --text-secondary: var(--bs-fg-muted); --text-muted: var(--bs-fg-subtle); --border: var(--bs-border); --border-hover: var(--bs-border-hover); --bg: var(--bs-bg); --bg-subtle: var(--bs-bg-subtle); --card: var(--bs-bg-elevated); --radius-sm: var(--bs-r-sm); --radius: var(--bs-r); --radius-lg: var(--bs-r-lg); --radius-xl: var(--bs-r-xl); --shadow-sm: var(--bs-shadow-sm); --shadow: var(--bs-shadow); --shadow-lg: var(--bs-shadow-lg); --shadow-glow: var(--bs-shadow-glow); --transition: var(--bs-transition); } /* ────── 4. Typography / Base-Elements ──────────────────────────────── */ html { height: 100%; background: var(--bs-bg); } body { height: 100%; } body { font-family: var(--bs-font-sans); background: var(--bs-bg); color: var(--bs-fg); font-size: var(--bs-text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--bs-transition), color var(--bs-transition); } .view { min-height: 100vh; background: var(--bs-bg); color: var(--bs-fg); } /* Focus-Visible — sichtbar ueberall */ :focus-visible { outline: none; box-shadow: var(--bs-shadow-glow); border-radius: var(--bs-r-sm); } /* Selection */ ::selection { background: var(--bs-primary-soft); color: var(--bs-fg); } /* Scrollbars (dezent) */ * { scrollbar-width: thin; scrollbar-color: var(--bs-border-hover) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--bs-border-hover); border-radius: 10px; border: 2px solid var(--bs-bg); } *::-webkit-scrollbar-thumb:hover { background: var(--bs-border-strong); } /* ────── 5. Base-Komponenten (bs-*) ─────────────────────────────────── */ /* --- Brand Logo (inline usage) --- */ .bs-logo { width: 36px; height: 36px; display: inline-block; vertical-align: middle; } .bs-brand { display: inline-flex; align-items: center; gap: var(--bs-2); font-family: var(--bs-font-sans); font-weight: var(--bs-weight-bold); font-size: var(--bs-text-lg); letter-spacing: -0.01em; color: var(--bs-fg); text-decoration: none; } .bs-brand .bs-brand-accent { color: var(--bs-primary); } /* --- Button --- */ .bs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bs-2); height: 36px; padding: 0 var(--bs-4); border: 1px solid transparent; border-radius: var(--bs-r-sm); font-family: inherit; font-size: var(--bs-text-base); font-weight: var(--bs-weight-medium); line-height: 1; cursor: pointer; white-space: nowrap; user-select: none; transition: all var(--bs-transition); text-decoration: none; /* Phase 19g: a.bs-btn → kein Underline */ } .bs-btn:hover { text-decoration: none; } .bs-btn:disabled { opacity: 0.5; cursor: not-allowed; } .bs-btn svg { flex-shrink: 0; } .bs-btn-primary { background: var(--bs-primary); color: var(--bs-primary-fg); } .bs-btn-primary:hover:not(:disabled) { background: var(--bs-primary-hover); } .bs-btn-secondary { background: var(--bs-bg-elevated); color: var(--bs-fg); border-color: var(--bs-border); } .bs-btn-secondary:hover:not(:disabled) { background: var(--bs-bg-subtle); border-color: var(--bs-border-hover); } .bs-btn-ghost { background: transparent; color: var(--bs-fg-muted); } .bs-btn-ghost:hover:not(:disabled) { background: var(--bs-bg-subtle); color: var(--bs-fg); } /* Tenant-User-Trash — ghost-Btn mit Danger-Hover (statt inline color:#dc2626) */ .tenant-user-del { color: var(--bs-fg-muted); } .tenant-user-del:hover:not(:disabled) { background: var(--bs-danger-soft); color: var(--bs-danger); } .bs-btn-danger { background: transparent; color: var(--bs-danger); border-color: var(--bs-danger-soft); } .bs-btn-danger:hover:not(:disabled) { background: var(--bs-danger-soft); border-color: var(--bs-danger); } .bs-btn-sm { height: 28px; padding: 0 var(--bs-3); font-size: var(--bs-text-sm); } .bs-btn-lg { height: 44px; padding: 0 var(--bs-5); font-size: var(--bs-text-md); } .bs-btn-block { width: 100%; } .bs-btn-icon { width: 36px; padding: 0; border-color: var(--bs-border); background: var(--bs-bg-elevated); color: var(--bs-fg-muted); } .bs-btn-icon:hover:not(:disabled) { background: var(--bs-bg-subtle); color: var(--bs-fg); border-color: var(--bs-border-hover); } .bs-btn-icon.bs-btn-sm { width: 28px; } /* --- Card --- */ .bs-card { background: var(--bs-bg-elevated); border: 1px solid var(--bs-border); border-radius: var(--bs-r-lg); padding: var(--bs-6); } .bs-card-interactive { cursor: pointer; transition: all var(--bs-transition); } .bs-card-interactive:hover { border-color: var(--bs-border-hover); box-shadow: var(--bs-shadow-sm); transform: translateY(-1px); } .bs-card-compact { padding: var(--bs-4); } /* --- Stat-Card --- */ .bs-stat-card { display: flex; align-items: center; gap: var(--bs-3); padding: var(--bs-4) var(--bs-5); background: var(--bs-bg-elevated); border: 1px solid var(--bs-border); border-radius: var(--bs-r); transition: all var(--bs-transition); } .bs-stat-card:hover { border-color: var(--bs-border-hover); } .bs-stat-card-icon { width: 40px; height: 40px; border-radius: var(--bs-r-sm); background: var(--bs-primary-soft); color: var(--bs-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bs-stat-card-value { font-size: var(--bs-text-xl); font-weight: var(--bs-weight-bold); color: var(--bs-fg); line-height: 1.1; } .bs-stat-card-label { font-size: var(--bs-text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-fg-muted); font-weight: var(--bs-weight-semibold); margin-top: 2px; } /* --- Form --- */ .bs-field { display: flex; flex-direction: column; gap: var(--bs-2); margin-bottom: var(--bs-4); } .bs-label { font-size: var(--bs-text-sm); font-weight: var(--bs-weight-medium); color: var(--bs-fg-muted); } .bs-input, .bs-textarea, .bs-select { width: 100%; height: 38px; padding: 0 var(--bs-3); /* --bs-input-bg: in Light = weiss, in Dark = slate-900 (heller Lift gegen slate-800-Card) */ background: var(--bs-input-bg); border: 1px solid var(--bs-border); border-radius: var(--bs-r-sm); color: var(--bs-fg); font-family: inherit; font-size: var(--bs-text-base); transition: all var(--bs-transition); } .bs-input:hover, .bs-textarea:hover, .bs-select:hover { border-color: var(--bs-border-hover); } .bs-input:focus, .bs-textarea:focus, .bs-select:focus { outline: none; border-color: var(--bs-primary); box-shadow: var(--bs-shadow-glow); } /* ═══════════════════════════════════════════════════════════════════════ MOBILE — Auto-Zoom auf iOS verhindern iOS Safari zoomt beim Fokus in jedes Input < 16px font-size — das fühlt sich nicht-app-mäßig an. Drei Schutzschichten: 1. text-size-adjust verhindert dass iOS automatisch Body-Text vergrößert 2. font-size 16px auf alle Form-Controls (das Hauptkriterium von Safari) 3. Inline-style-Override (fängt JS-generierte Inputs mit `style="font-size:..."`) Breakpoint: <= 1024px — deckt alle iPhones (Portrait + Landscape) UND iPad mini portrait ab. Eine Tablet/Desktop-Optimierung folgt erst > 1024. ════════════════════════════════════════════════════════════════════ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (max-width: 1024px) { /* Schicht 2 — alle Form-Controls auf 16px, egal welche Klasse/Type. */ .bs-input, .bs-textarea, .bs-select, .tnt-input, .tnt-textarea, .tnt-select, input, textarea, select { font-size: 16px !important; } /* Schicht 3 — Inline-Style-Override mit zusätzlicher Selector-Priorität. `[style]`-Attribut-Selector verbessert die Specificity, damit unsere Regel auch lokal gesetzte font-size überschreibt. */ input[style], textarea[style], select[style], input[style*="font-size"], textarea[style*="font-size"], select[style*="font-size"] { font-size: 16px !important; } } .bs-textarea { height: auto; min-height: 88px; padding: var(--bs-3); resize: vertical; line-height: 1.5; } .bs-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 5,5 9,1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--bs-3) center; padding-right: var(--bs-8); } .bs-input[disabled], .bs-textarea[disabled], .bs-select[disabled] { opacity: 0.5; cursor: not-allowed; } .bs-input::placeholder, .bs-textarea::placeholder { color: var(--bs-fg-subtle); } .bs-help { font-size: var(--bs-text-xs); color: var(--bs-fg-subtle); margin-top: -2px; } .bs-error-text { font-size: var(--bs-text-sm); color: var(--bs-danger); min-height: 18px; } /* --- Badge / Pill --- */ .bs-badge { display: inline-flex; align-items: center; gap: var(--bs-1); padding: 2px var(--bs-2); border-radius: var(--bs-r-sm); font-size: var(--bs-text-xs); font-weight: var(--bs-weight-semibold); background: var(--bs-bg-subtle); color: var(--bs-fg-muted); text-transform: uppercase; letter-spacing: 0.03em; } .bs-badge-primary { background: var(--bs-primary-soft); color: var(--bs-primary); } .bs-badge-success { background: var(--bs-success-soft); color: var(--bs-success); } .bs-badge-warning { background: var(--bs-warning-soft); color: var(--bs-warning); } .bs-badge-danger { background: var(--bs-danger-soft); color: var(--bs-danger); } .bs-pill { display: inline-flex; align-items: center; gap: var(--bs-1); padding: var(--bs-1) var(--bs-3); border-radius: var(--bs-r-full); font-size: var(--bs-text-xs); font-weight: var(--bs-weight-medium); background: var(--bs-bg-subtle); color: var(--bs-fg-muted); } .bs-pill-primary { background: var(--bs-primary-soft); color: var(--bs-primary); } .bs-pill-success { background: var(--bs-success-soft); color: var(--bs-success); } /* --- Switch --- */ .bs-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; display: inline-block; } .bs-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .bs-switch-slider { position: absolute; inset: 0; background: var(--bs-border-hover); border-radius: var(--bs-r-full); cursor: pointer; transition: background var(--bs-transition); } .bs-switch-slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: white; border-radius: 50%; box-shadow: var(--bs-shadow-sm); transition: transform var(--bs-transition); } .bs-switch input:checked + .bs-switch-slider { background: var(--bs-primary); } .bs-switch input:checked + .bs-switch-slider::before { transform: translateX(18px); } .bs-switch input:focus-visible + .bs-switch-slider { box-shadow: var(--bs-shadow-glow); } /* --- Empty / Loading / Error States --- */ .bs-empty-state { text-align: center; padding: var(--bs-10) var(--bs-5); background: var(--bs-bg-elevated); border: 1px dashed var(--bs-border); border-radius: var(--bs-r-lg); } .bs-empty-icon { width: 56px; height: 56px; margin: 0 auto var(--bs-3); display: flex; align-items: center; justify-content: center; background: var(--bs-bg-subtle); border-radius: var(--bs-r-full); color: var(--bs-fg-muted); } .bs-empty-title { font-size: var(--bs-text-md); font-weight: var(--bs-weight-semibold); color: var(--bs-fg); margin-bottom: var(--bs-1); } .bs-empty-text { font-size: var(--bs-text-sm); color: var(--bs-fg-muted); max-width: 340px; margin: 0 auto; } .bs-loading { display: flex; align-items: center; justify-content: center; gap: var(--bs-2); padding: var(--bs-10); color: var(--bs-fg-muted); font-size: var(--bs-text-sm); } .bs-spinner { width: 18px; height: 18px; border: 2px solid var(--bs-border); border-top-color: var(--bs-primary); border-radius: 50%; animation: bs-spin 600ms linear infinite; } @keyframes bs-spin { to { transform: rotate(360deg); } } .bs-error-banner { display: flex; align-items: center; gap: var(--bs-3); padding: var(--bs-3) var(--bs-4); background: var(--bs-danger-soft); color: var(--bs-danger); border-radius: var(--bs-r-sm); font-size: var(--bs-text-sm); } /* --- Theme Toggle (Segmented) --- */ .bs-theme-toggle { display: inline-flex; background: var(--bs-bg-subtle); border: 1px solid var(--bs-border); border-radius: var(--bs-r-full); padding: 2px; gap: 0; } .bs-theme-toggle button { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--bs-r-full); color: var(--bs-fg-muted); cursor: pointer; transition: all var(--bs-transition); } .bs-theme-toggle button:hover { color: var(--bs-fg); } .bs-theme-toggle button.active { background: var(--bs-bg-elevated); color: var(--bs-primary); box-shadow: var(--bs-shadow-sm); } .bs-theme-toggle button svg { width: 14px; height: 14px; } /* ═══════ Login (Setup-Hint + Badge — Layout in §10 V4) ═══════════════ */ /* Legacy .view-auth / .login-card / .bg-orbs / .login-title / .login-subtitle wurden in V4 (Robopult Split-Screen-Hero) durch §10 ersetzt — siehe ~Z.2467ff. Hier bleiben nur die Setup-Hint-Styles, die im Login-Card-Body verwendet werden. */ .setup-hint { margin-top: 24px; padding: 16px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: var(--radius); text-align: center; } .setup-hint p { color: var(--text-secondary); margin-bottom: 10px; font-size: 13px; } .badge-new { display: inline-block; padding: 2px 10px; background: var(--gradient); color: var(--bs-primary-fg); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 8px; } #setup-box { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } #setup-box h3 { font-size: 16px; margin-bottom: 16px; } /* ═══════ Forms ═══════════════════════════════════════════════════════ */ .field { margin-bottom: 16px; } .field label, label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { width: 100%; padding: 10px 14px; border: 1px solid var(--bs-border); border-radius: var(--bs-r-sm); font-size: 14px; font-family: inherit; background: var(--bs-bg-elevated); color: var(--bs-fg); transition: all var(--bs-transition); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-glow); } textarea { resize: vertical; min-height: 100px; } .toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; } .toggle input { width: auto; margin: 0; } .toggle span { color: var(--text); font-weight: 500; font-size: 14px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } } .form-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; } .inline-form { display: flex; gap: 8px; padding: 12px; background: var(--bg-subtle); border-radius: var(--radius); margin-top: 10px; } .inline-form input, .inline-form select { flex: 1; } .error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 8px 0; } /* ═══════ Buttons ═════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all var(--transition); white-space: nowrap; user-select: none; /* Phase 19g (2026-05-13): Anchor-`.btn`-Elemente (z.B. ``) erben sonst den Default-Browser-Underline. Buttons sehen unterstrichen mit Klick-Optik nicht stimmig aus. */ text-decoration: none; } .btn:hover { text-decoration: none; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn svg { flex-shrink: 0; } .btn-block { width: 100%; } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-primary { background: var(--gradient); color: var(--bs-primary-fg); box-shadow: 0 1px 2px rgba(30,41,59, 0.3); } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30,41,59, 0.4); } .btn-secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { border-color: var(--border-hover); background: var(--bg-subtle); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); } .btn-danger { background: var(--bs-bg-elevated); color: var(--bs-danger); border: 1px solid var(--bs-danger-soft); } .btn-danger:hover:not(:disabled) { background: var(--bs-danger-soft); border-color: var(--bs-danger); } .arrow { transition: transform var(--transition); } .btn:hover .arrow { transform: translateX(3px); } /* ═══════ App Layout ══════════════════════════════════════════════════ */ #view-app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } .sidebar { background: var(--card); border-right: 1px solid var(--border); padding: 24px 16px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; } .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .logo-dot { width: 28px; height: 28px; border-radius: 8px; background: var(--gradient); box-shadow: 0 2px 8px rgba(30,41,59, 0.3); position: relative; } .logo-dot::after { content: ''; position: absolute; inset: 6px; border-radius: 3px; background: white; opacity: 0.9; } .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; } .tab-btn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; background: transparent; color: var(--text-secondary); font-weight: 500; font-size: 14px; font-family: inherit; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); text-align: left; } .tab-btn:hover { background: var(--bg-subtle); color: var(--text); } .tab-btn.active { background: var(--gradient); color: var(--bs-primary-fg); box-shadow: 0 2px 8px rgba(30,41,59, 0.25); } .tab-btn svg { flex-shrink: 0; } .sidebar-footer { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gradient); color: var(--bs-primary-fg); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; } .user-info { min-width: 0; flex: 1; } .user-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* ═══════ Content ═════════════════════════════════════════════════════ */ .content { padding: 32px; max-width: 1400px; width: 100%; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .page-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .page-subtitle { color: var(--text-muted); font-size: 14px; margin-top: 2px; } .page-actions { display: flex; gap: 8px; } /* ═══════ Stats Row ═══════════════════════════════════════════════════ */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--card); padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--border); display: flex; align-items: center; gap: 12px; transition: all var(--transition); } .stat-card:hover { border-color: var(--border-hover); transform: translateY(-1px); } /* Phase 19g (2026-05-13): klickbare Stat-Karte — Voicemail-Counter setzen Status-Filter beim Klick. Button-Default-Styles reset. */ .stat-card-clickable { cursor: pointer; font-family: inherit; text-align: left; width: 100%; appearance: none; } .stat-card-clickable:hover { background: var(--bs-bg-subtle); } .stat-card-clickable:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } .stat-card-clickable:active { transform: translateY(0); } .stat-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--gradient-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .stat-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; } .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.02em; } /* ═══════ Empty State ═════════════════════════════════════════════════ */ .empty-state { padding: 60px 20px; text-align: center; background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius-lg); } .empty-state .emoji { font-size: 48px; margin-bottom: 12px; display: block; } .empty-state h3 { font-size: 16px; margin-bottom: 6px; color: var(--text); } .empty-state p { color: var(--text-muted); font-size: 13px; } /* ═══════ Cards ═══════════════════════════════════════════════════════ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .editor-card { margin-bottom: 24px; box-shadow: var(--shadow-sm); } .editor-card h3 { margin-bottom: 16px; font-size: 16px; } /* OpenAI-spezifische TTS-Controls im Ansagen-Editor (Modell + Style + Normalize + Power-User) */ .ann-openai-controls { margin-top: 16px; padding: 14px 16px; background: var(--bs-bg-subtle); border: 1px solid var(--bs-border); border-radius: var(--bs-r); } .ann-openai-controls .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .ann-openai-controls .grid-2 { grid-template-columns: 1fr; } } .ann-openai-controls .field { margin-bottom: 12px; } .ann-openai-controls .field:last-of-type { margin-bottom: 0; } .ann-openai-controls .bs-toggle-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .ann-openai-controls .bs-toggle-row input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--bs-primary); flex-shrink: 0; } .ann-power-user > summary { list-style: none; padding: 6px 0; } .ann-power-user > summary::-webkit-details-marker { display: none; } .ann-power-user[open] > summary { color: var(--bs-fg); } .ann-power-user textarea { font-family: var(--bs-font-mono); font-size: 12px; line-height: 1.5; resize: vertical; } /* ═══════ Voicemail List ══════════════════════════════════════════════ */ .voicemail-list { display: flex; flex-direction: column; gap: 8px; } .voicemail-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all var(--transition); position: relative; } .voicemail-item:hover { border-color: var(--border-hover); transform: translateX(2px); box-shadow: var(--shadow); } .voicemail-item.unread { background: linear-gradient(to right, rgba(30,41,59, 0.04), transparent); border-left: 3px solid var(--primary); padding-left: 15px; } .vm-icon-wrap { width: 44px; height: 44px; border-radius: 50%; background: var(--gradient); color: var(--bs-primary-fg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(30,41,59, 0.25); } .vm-main { flex: 1; min-width: 0; } .vm-from { font-weight: 600; font-size: 14px; color: var(--text); } .vm-preview { color: var(--text-secondary); font-size: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vm-meta-col { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .vm-date { font-size: 12px; color: var(--text-muted); } .vm-status-tag { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; } .vm-status-pending { background: rgba(245, 158, 11, 0.1); color: #b45309; } .vm-status-done { background: rgba(16, 185, 129, 0.1); color: #047857; } .vm-status-error { background: rgba(239, 68, 68, 0.1); color: #b91c1c; } /* Voicemail-Toolbar (Select-All + Page-Size) — über der Liste, kompakte Höhe */ .vm-toolbar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; margin-bottom: 10px; background: var(--bs-bg-subtle); border: 1px solid var(--bs-border); border-radius: var(--bs-r); font-size: var(--bs-text-sm); color: var(--bs-fg-muted); white-space: nowrap; flex-wrap: nowrap; overflow-x: auto; } .vm-select-all-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; color: var(--bs-fg); white-space: nowrap; } .vm-select-all-label input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--bs-primary); margin: 0; } .vm-pagesize-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bs-text-sm); white-space: nowrap; } .vm-pagesize-label > span { white-space: nowrap; } .vm-pagesize-label select { padding: 2px 6px; font-size: var(--bs-text-sm); height: 26px; min-width: 56px; min-height: 0; } /* Voicemail-Pagination (Vor/Zurück) — unter der Liste */ .vm-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 0; margin-top: 8px; border-top: 1px solid var(--bs-border); } .vm-pg-info { font-size: var(--bs-text-sm); color: var(--bs-fg-muted); font-variant-numeric: tabular-nums; } /* Quick-Action-Buttons in Voicemail-Card (Hover-State per CSS, kein inline-onmouseover) */ .vm-quick-actions { display: flex; gap: 4px; margin-top: 4px; } .vm-quick-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--bs-border); background: var(--bs-bg-elevated); border-radius: 6px; cursor: pointer; color: var(--vm-q-color, var(--bs-fg-muted)); transition: background var(--transition), color var(--transition), border-color var(--transition); } .vm-quick-btn:hover { background: var(--vm-q-hover, var(--bs-primary)); color: var(--bs-primary-fg); border-color: var(--vm-q-hover, var(--bs-primary)); } .vm-quick-btn:focus-visible { outline: 2px solid var(--vm-q-hover, var(--bs-primary)); outline-offset: 2px; } .vm-duration-badge { padding: 2px 8px; background: var(--bg-subtle); border-radius: 999px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ═══════ Announcements Grid ══════════════════════════════════════════ */ .announcement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .announcement-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: all var(--transition); } .announcement-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow); } .announcement-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--text); } .announcement-card .text-snippet { color: var(--text-secondary); font-size: 13px; margin-bottom: 10px; line-height: 1.5; } .announcement-card .meta-row { color: var(--text-muted); font-size: 12px; margin-bottom: 10px; } .announcement-card audio { width: 100%; margin: 10px 0; border-radius: 8px; } .announcement-card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } /* ═══════ Tenant Grid ═════════════════════════════════════════════════ */ .tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .tenant-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: all var(--transition); } .tenant-card:hover { border-color: var(--primary); box-shadow: var(--shadow); } .tenant-card h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .tenant-card .sub { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; } .tenant-card .stats { display: flex; gap: 12px; margin-bottom: 14px; font-size: 12px; color: var(--text-secondary); } .tenant-card .stats span strong { color: var(--text); font-weight: 600; } .tenant-card .actions { display: flex; gap: 6px; } /* ═══════ Dialog ══════════════════════════════════════════════════════ */ .dialog { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 150ms ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dialog-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .dialog-inner { position: relative; background: var(--card); border-radius: var(--radius-lg); max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: slideUp 200ms cubic-bezier(0.16, 1, 0.3, 1); } .dialog-lg { max-width: 680px; } .dialog-xl { max-width: 960px; } .dialog-xxl { max-width: min(95vw, 1400px); width: 95vw; } .dialog-sm { max-width: 440px; } .dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card); z-index: 2; } .dialog-header h3 { font-size: 18px; font-weight: 600; } .dialog-close { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .dialog-close:hover { background: var(--bg-subtle); color: var(--text); } .dialog-inner form, .dialog-inner .section-header, .dialog-inner .field, .dialog-inner .grid-2, .dialog-inner .form-actions, .dialog-inner .divider, .dialog-inner .toggle, .dialog-inner .user-list, .dialog-inner .inline-form { margin-left: 24px; margin-right: 24px; } .dialog-inner form { margin-bottom: 0; padding-top: 16px; } .dialog-inner .form-actions { margin-top: 20px; margin-bottom: 24px; } .section-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 24px 24px 12px 24px; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .section-icon { font-size: 14px; } .divider { height: 1px; background: var(--border); margin: 24px 0; } /* ═══════ Voicemail Dialog ═══════════════════════════════════════════ */ .vm-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 24px 16px 24px; padding: 16px; background: var(--bg-subtle); border-radius: var(--radius); } .vm-info-item { display: flex; flex-direction: column; gap: 2px; } .vm-info-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } #vm-audio { width: calc(100% - 48px); margin: 0 24px 16px 24px; border-radius: 8px; } .transcript-header { margin: 0 24px 8px 24px; } .transcript-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); } .vm-transcript { background: var(--gradient-soft); border-radius: var(--radius); padding: 16px 18px; margin: 0 24px 20px 24px; line-height: 1.6; font-size: 14px; white-space: pre-wrap; color: var(--text); border: 1px solid rgba(30,41,59, 0.15); } .vm-transcript:empty::before { content: "Noch keine Transkription verfügbar"; color: var(--text-muted); font-style: italic; } /* ═══════ Voicemail Dialog (aufgeraeumt) ═══════════════════════════════ */ .vm-dialog { max-width: 640px; } .vm-dialog .dialog-header { gap: 12px; padding: 18px 20px; } .vm-dialog .dialog-close svg { width: 18px; height: 18px; } .vm-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; } .vm-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; } .vm-status-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .vm-status-btn { padding: 10px 12px; border: 1px solid var(--bs-border); background: var(--bs-bg-elevated); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500; transition: all 0.15s; } .vm-status-btn:hover { border-color: var(--border-hover); background: var(--bg-subtle); } .vm-status-btn svg { width: 15px; height: 15px; } .vm-meta-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px 14px; background: var(--bg-subtle); border-radius: 8px; } .vm-meta-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vm-meta-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .vm-meta-cell > span:last-child { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vm-dialog audio { width: 100%; border-radius: 8px; } .vm-block { display: flex; flex-direction: column; gap: 6px; } .vm-block-header { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .vm-block-icon svg { width: 13px; height: 13px; } .vm-dialog .vm-transcript { margin: 0; padding: 14px 16px; font-size: 13px; } .vm-dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 13px; resize: vertical; line-height: 1.5; } .vm-dialog textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,41,59,0.1); } .vm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .vm-field { display: flex; flex-direction: column; gap: 4px; } .vm-field label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .vm-field label svg { width: 12px; height: 12px; } .vm-field input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; } .vm-field input[type="text"] { font-family: 'JetBrains Mono', monospace; } .vm-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,41,59,0.1); } .vm-footer { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg-subtle); } .vm-footer .btn { padding: 8px 14px; } .vm-call-btn, .vm-icon-btn, .vm-danger-btn { display: inline-flex; align-items: center; gap: 6px; } .vm-danger-btn { color: #dc2626; } .vm-danger-btn:hover { background: #fee2e2; } /* ═══════ User List (im Tenant-Dialog) ═══════════════════════════════ */ .user-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .user-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg-subtle); border-radius: var(--radius-sm); } .user-row-info { display: flex; align-items: center; gap: 10px; } .user-row .email { font-weight: 500; font-size: 13px; } .user-row .role-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--card); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .user-row .role-badge.admin { background: var(--gradient); color: var(--bs-primary-fg); } /* ═══════ Toast ══════════════════════════════════════════════════════ */ .toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; background: var(--text); color: var(--bs-primary-fg); border-radius: var(--radius); font-size: 14px; font-weight: 500; z-index: 1000; box-shadow: var(--shadow-lg); animation: slideUp 200ms cubic-bezier(0.16, 1, 0.3, 1); } .toast.success { background: var(--success); } .toast.error { background: var(--danger); } /* Phase 18y/19b Audit-Fix: warn (orange) + info (Brand-Blue) — vorher nicht im CSS definiert, JS hat sie aber benutzt → fallback auf var(--text). */ .toast.warn { background: var(--bs-warning, #f59e0b); color: var(--bs-primary-fg); } .toast.info { background: var(--bs-info, #0ea5e9); color: var(--bs-primary-fg); } /* ═══════ Loading ═══════════════════════════════════════════════════ */ .loading-dots { display: inline-flex; gap: 4px; align-items: center; } .loading-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: bounce 1.4s infinite ease-in-out both; } .loading-dots span:nth-child(1) { animation-delay: -0.32s; } .loading-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* ═══════ Responsive ═════════════════════════════════════════════════ */ @media (max-width: 900px) { #view-app { grid-template-columns: 1fr; } .sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; padding: 8px; flex-direction: row; gap: 0; border-top: 1px solid var(--border); border-right: none; z-index: 50; } .sidebar-logo, .sidebar-footer { display: none; } .sidebar-nav { flex-direction: row; justify-content: space-around; width: 100%; } .tab-btn { flex-direction: column; gap: 2px; font-size: 11px; padding: 8px 6px; } .content { padding: 20px 16px 100px 16px; } .page-header h1 { font-size: 22px; } } /* ═══ ANN-CARD v2 ═════════════════════════════════════════════════════ */ .announcement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-auto-rows: 1fr; gap: 16px; } .ann-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: all var(--transition); position: relative; } .ann-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow); transform: translateY(-1px); } .ann-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ann-card-status { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; } .ann-card-status .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .ann-card-status .status-dot.s-ready { background: var(--success); } .ann-card-status .status-dot.s-pending { background: var(--warning); animation: pulse-soft 1.5s ease-in-out infinite; } .ann-card-status .status-dot.s-error { background: var(--danger); } @keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } .ann-card h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ann-card-delete { width: 28px; height: 28px; padding: 0; border: 1px solid transparent; background: transparent; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.6; } .ann-card:hover .ann-card-delete { opacity: 1; } .ann-card-delete:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,0.05); } .ann-card-delete svg { width: 14px; height: 14px; stroke-width: 2; } .ann-card-voice { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; font-weight: 500; padding: 3px 10px; background: var(--bg-subtle); border-radius: 999px; align-self: flex-start; max-width: 100%; } .ann-card-voice svg { width: 12px; height: 12px; flex-shrink: 0; } .ann-card-voice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ann-card-text { margin: 0; padding: 10px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); border-left: 3px solid var(--primary); color: var(--text-secondary); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; transition: all var(--transition); } .ann-card-text:hover { background: rgba(30,41,59,0.05); border-left-color: var(--primary-dark); } .ann-card-audio { width: 100%; height: 34px; border-radius: var(--radius-sm); } .ann-card-status-msg { padding: 10px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; font-style: italic; } .ann-card-divider { height: 1px; background: var(--border); margin: 0 -18px; } .ann-card-assign-empty, .ann-card-assign { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .ann-card-assign-hint { margin: 0; color: var(--text-muted); font-size: 12px; text-align: center; font-style: italic; } /* Live-Status Banner */ .ann-card-live-status { display: flex; align-items: center; gap: 8px; font-size: 12px; } .live-pulse { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .live-pulse.active { background: var(--success); box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: live-pulse-anim 2s ease-out infinite; } .live-pulse.idle { background: var(--text-muted); opacity: 0.5; } @keyframes live-pulse-anim { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } .live-text { font-weight: 600; color: var(--text); } .live-spacer { flex: 1; } .live-sync-hint { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 11px; font-weight: 500; } .live-sync-hint svg { width: 11px; height: 11px; } /* CTA */ .assign-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; border: 0; border-radius: var(--radius-sm); background: var(--gradient); color: var(--bs-primary-fg); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition); box-shadow: 0 2px 8px rgba(30,41,59,0.22); } .assign-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30,41,59,0.32); } .assign-cta svg { width: 15px; height: 15px; stroke-width: 2.2; } /* Chips */ .assign-chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 5px 5px 10px; background: linear-gradient(135deg, rgba(30,41,59,0.08), rgba(16,185,129,0.05)); border: 1px solid rgba(30,41,59,0.18); border-radius: 999px; font-size: 12px; color: var(--text); max-width: 100%; } .chip-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; } .chip-slotid { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); background: rgba(255,255,255,0.6); padding: 1px 6px; border-radius: 999px; } .chip-status { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; padding: 1px 6px; border-radius: 999px; font-weight: 500; } .chip-status.fresh { background: rgba(16,185,129,0.15); color: #047857; } .chip-status.stale { background: rgba(245,158,11,0.15); color: #b45309; } .chip-status.none { background: rgba(148,163,184,0.15); color: var(--text-muted); } .chip-x { border: 0; background: rgba(255,255,255,0.7); color: var(--text-muted); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all var(--transition); padding: 0; } .chip-x:hover { background: var(--danger); color: var(--bs-primary-fg); } .chip-x svg { width: 12px; height: 12px; stroke-width: 2.2; } /* Inline-Lucide-Icon im Chip-Status (statt ⇡ Emoji) */ .chip-status-icon { display: inline-flex; vertical-align: -1px; margin-right: 1px; } .chip-status-icon svg { width: 10px; height: 10px; stroke-width: 2.2; } /* Banner-Headline-Icon (statt ✓ Emoji) */ .ann-card-assigned-banner .banner-icon { display: inline-flex; vertical-align: -2px; margin-right: 4px; } .ann-card-assigned-banner .banner-icon svg { width: 14px; height: 14px; stroke-width: 2.2; } /* Detail-Dialog */ .det-voice-row { margin-bottom: 12px; } .det-text { margin: 0 0 16px 0; padding: 14px 16px; background: var(--bg-subtle); border-radius: var(--radius-sm); border-left: 3px solid var(--primary); color: var(--text); font-size: 14px; line-height: 1.6; max-height: 320px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; } .det-audio { width: 100%; height: 38px; margin-bottom: 20px; border-radius: var(--radius-sm); } .det-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 10px; } .det-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; } /* ═══════ Impersonation-Banner (tenant UI) ═══════════════════════════ */ #impersonation-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: linear-gradient(90deg, #f59e0b, #dc2626); color: var(--bs-primary-fg); padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } #impersonation-banner button { background: var(--bs-bg-elevated); color: var(--bs-danger); border: none; padding: 4px 12px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 12px; } #impersonation-banner button:hover { background: #fef3c7; } /* ═══════════════════════════════════════════════════════════════════════ 8. Legacy-Token-Konsolidierung (frueher §8 "Dark-Theme Legacy-Overrides") Diese Sektion enthielt vor V5 component-spezifische Dark-Toggle-Overrides fuer Legacy-Komponenten (.card / .sidebar / .tab-btn / .btn-* / ...). Architektur-Bug: sie griffen nur bei manuellem Dark-Toggle, nicht bei prefers-color-scheme dark. Loesung: alle Properties in Base-Definitionen via var(--bs-*) migriert, sodass sie automatisch dem Theme folgen — egal ob Toggle oder System-Setting. Verbleibende Hard-/Element-Selectors stehen unten. ═══════════════════════════════════════════════════════════════════════ */ /* Forms — plain /