/** * GxP Cockpit - Tabler Theme Customization * Based on: Tabler v1.4.0 * * Angepasst an das tatsächliche GxP Cockpit Dashboard Design * * Verwendung: * 1. Tabler CSS einbinden * 2. Diese Datei NACH Tabler einbinden * 3. data-bs-theme="dark" auf oder setzen */ /* ========================================================================== Google Fonts Import - DM Sans ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); /* ========================================================================== CSS Custom Properties - GxP Cockpit Theme ========================================================================== */ :root { /* ------------------------------------------------------------------------- Brand Colors - Deep Navy Spectrum (aus Screenshot) ------------------------------------------------------------------------- */ --gxp-navy-900: #0B1120; /* Darkest - Page Background */ --gxp-navy-800: #0F172A; /* Cards Background */ --gxp-navy-700: #1E293B; /* Elevated elements, inputs */ --gxp-navy-600: #334155; /* Borders, dividers */ /* ------------------------------------------------------------------------- Accent Colors - Teal/Cyan Spectrum ------------------------------------------------------------------------- */ --gxp-teal-500: #14B8A6; /* Primary Teal */ --gxp-teal-400: #2DD4BF; /* Lighter Teal - Hover, highlights */ --gxp-teal-300: #5EEAD4; /* Lightest Teal */ --gxp-teal-600: #0D9488; /* Darker Teal */ /* ------------------------------------------------------------------------- Status Colors ------------------------------------------------------------------------- */ --gxp-success: #10B981; /* Green - Positive values */ --gxp-warning: #F59E0B; /* Amber - Attention badge */ --gxp-danger: #EF4444; /* Red - Errors */ --gxp-info: #14B8A6; /* Teal - Info */ /* ------------------------------------------------------------------------- Text Colors ------------------------------------------------------------------------- */ --gxp-text-primary: #F8FAFC; /* White - Headlines, primary text */ --gxp-text-secondary: #94A3B8; /* Gray - Secondary text, labels */ --gxp-text-muted: #64748B; /* Darker gray - Muted text */ --gxp-text-label: #64748B; /* Labels, uppercase headers */ /* ------------------------------------------------------------------------- Typography ------------------------------------------------------------------------- */ --tblr-font-sans-serif: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tblr-body-font-family: var(--tblr-font-sans-serif); /* ------------------------------------------------------------------------- Border Radius ------------------------------------------------------------------------- */ --tblr-border-radius: 8px; --tblr-border-radius-sm: 6px; --tblr-border-radius-lg: 12px; --tblr-border-radius-xl: 16px; --tblr-border-radius-pill: 9999px; } /* ========================================================================== Dark Theme - Main Configuration ========================================================================== */ [data-bs-theme="dark"] { color-scheme: dark; /* ------------------------------------------------------------------------- Body Colors & Backgrounds ------------------------------------------------------------------------- */ --tblr-body-color: var(--gxp-text-primary); --tblr-body-color-rgb: 248, 250, 252; --tblr-body-bg: var(--gxp-navy-900); --tblr-body-bg-rgb: 11, 17, 32; /* ------------------------------------------------------------------------- Surface Backgrounds ------------------------------------------------------------------------- */ --tblr-bg-surface: var(--gxp-navy-800); --tblr-bg-surface-secondary: var(--gxp-navy-700); --tblr-bg-surface-tertiary: var(--gxp-navy-900); --tblr-bg-forms: var(--gxp-navy-700); --tblr-secondary-bg: var(--gxp-navy-800); --tblr-secondary-bg-rgb: 15, 23, 42; --tblr-tertiary-bg: var(--gxp-navy-700); --tblr-tertiary-bg-rgb: 30, 41, 59; /* ------------------------------------------------------------------------- Text Colors ------------------------------------------------------------------------- */ --tblr-emphasis-color: #ffffff; --tblr-emphasis-color-rgb: 255, 255, 255; --tblr-secondary-color: var(--gxp-text-secondary); --tblr-secondary-color-rgb: 148, 163, 184; --tblr-tertiary-color: var(--gxp-text-muted); --tblr-tertiary-color-rgb: 100, 116, 139; --tblr-tertiary: var(--gxp-text-muted); --tblr-muted: var(--gxp-text-muted); --tblr-muted-rgb: 100, 116, 139; /* ------------------------------------------------------------------------- Primary Color - Teal ------------------------------------------------------------------------- */ --tblr-primary: var(--gxp-teal-500); --tblr-primary-rgb: 20, 184, 166; --tblr-primary-text-emphasis: var(--gxp-teal-300); --tblr-primary-bg-subtle: rgba(20, 184, 166, 0.1); --tblr-primary-border-subtle: rgba(20, 184, 166, 0.3); /* ------------------------------------------------------------------------- Secondary Color ------------------------------------------------------------------------- */ --tblr-secondary: var(--gxp-text-muted); --tblr-secondary-rgb: 100, 116, 139; /* ------------------------------------------------------------------------- Success Color ------------------------------------------------------------------------- */ --tblr-success: var(--gxp-success); --tblr-success-rgb: 16, 185, 129; --tblr-success-text-emphasis: #34D399; --tblr-success-bg-subtle: rgba(16, 185, 129, 0.1); --tblr-success-border-subtle: rgba(16, 185, 129, 0.3); /* ------------------------------------------------------------------------- Warning Color ------------------------------------------------------------------------- */ --tblr-warning: var(--gxp-warning); --tblr-warning-rgb: 245, 158, 11; --tblr-warning-text-emphasis: #FBBF24; --tblr-warning-bg-subtle: rgba(245, 158, 11, 0.15); --tblr-warning-border-subtle: rgba(245, 158, 11, 0.3); /* ------------------------------------------------------------------------- Danger Color ------------------------------------------------------------------------- */ --tblr-danger: var(--gxp-danger); --tblr-danger-rgb: 239, 68, 68; --tblr-danger-text-emphasis: #F87171; --tblr-danger-bg-subtle: rgba(239, 68, 68, 0.1); --tblr-danger-border-subtle: rgba(239, 68, 68, 0.3); /* ------------------------------------------------------------------------- Info Color ------------------------------------------------------------------------- */ --tblr-info: var(--gxp-teal-400); --tblr-info-rgb: 45, 212, 191; --tblr-info-text-emphasis: var(--gxp-teal-300); --tblr-info-bg-subtle: rgba(45, 212, 191, 0.1); --tblr-info-border-subtle: rgba(45, 212, 191, 0.3); /* ------------------------------------------------------------------------- Light & Dark ------------------------------------------------------------------------- */ --tblr-light: var(--gxp-navy-700); --tblr-light-rgb: 30, 41, 59; --tblr-dark: var(--gxp-navy-900); --tblr-dark-rgb: 11, 17, 32; /* ------------------------------------------------------------------------- Border Colors ------------------------------------------------------------------------- */ --tblr-border-color: rgba(255, 255, 255, 0.08); --tblr-border-color-translucent: rgba(255, 255, 255, 0.06); /* ------------------------------------------------------------------------- Link Colors ------------------------------------------------------------------------- */ --tblr-link-color: var(--gxp-teal-400); --tblr-link-color-rgb: 45, 212, 191; --tblr-link-hover-color: var(--gxp-teal-300); --tblr-link-hover-color-rgb: 94, 234, 212; /* ------------------------------------------------------------------------- Shadows ------------------------------------------------------------------------- */ --tblr-shadow-input: none; --tblr-shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5); --tblr-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --tblr-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --tblr-box-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4); /* ------------------------------------------------------------------------- Active/Hover States ------------------------------------------------------------------------- */ --tblr-active-bg: rgba(20, 184, 166, 0.15); --tblr-hover-bg: rgba(20, 184, 166, 0.1); /* ------------------------------------------------------------------------- Code ------------------------------------------------------------------------- */ --tblr-code-color: var(--gxp-teal-400); --tblr-code-bg: rgba(20, 184, 166, 0.1); /* ------------------------------------------------------------------------- Forms ------------------------------------------------------------------------- */ --tblr-form-valid-color: var(--gxp-success); --tblr-form-valid-border-color: var(--gxp-success); --tblr-form-invalid-color: var(--gxp-danger); --tblr-form-invalid-border-color: var(--gxp-danger); } /* ========================================================================== Base Styles ========================================================================== */ [data-bs-theme="dark"] body { background-color: var(--gxp-navy-900); } /* ========================================================================== Page Wrapper & Layout ========================================================================== */ [data-bs-theme="dark"] .page-wrapper { background-color: var(--gxp-navy-900); } [data-bs-theme="dark"] .page-body { background-color: var(--gxp-navy-900); } /* ========================================================================== Cards (wie im Screenshot) ========================================================================== */ [data-bs-theme="dark"] .card { --tblr-card-bg: var(--gxp-navy-800); --tblr-card-border-color: rgba(255, 255, 255, 0.06); background-color: var(--gxp-navy-800); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--tblr-border-radius-lg); } [data-bs-theme="dark"] .card-header { background-color: transparent; border-bottom-color: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .card-footer { background-color: transparent; border-top-color: rgba(255, 255, 255, 0.06); } /* Nested Cards (wie Regulatory Feed Items) */ [data-bs-theme="dark"] .card .card { background-color: var(--gxp-navy-700); border-color: rgba(255, 255, 255, 0.04); } /* ========================================================================== Sidebar / Navbar Vertical (wie im Screenshot) ========================================================================== */ [data-bs-theme="dark"] .navbar-vertical { background-color: var(--gxp-navy-900); border-right: 1px solid rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .navbar-vertical .navbar-brand { color: var(--gxp-text-primary); } [data-bs-theme="dark"] .navbar-vertical .nav-link { color: var(--gxp-text-secondary); border-radius: var(--tblr-border-radius); margin: 2px 8px; padding: 10px 12px; transition: all 0.15s ease; } [data-bs-theme="dark"] .navbar-vertical .nav-link:hover { color: var(--gxp-text-primary); background-color: rgba(255, 255, 255, 0.05); } /* Active Nav Item - Teal Background wie im Screenshot */ [data-bs-theme="dark"] .navbar-vertical .nav-link.active { color: var(--gxp-text-primary); background-color: var(--gxp-teal-500); font-weight: 500; } [data-bs-theme="dark"] .navbar-vertical .nav-link .nav-link-icon { color: inherit; opacity: 0.8; } [data-bs-theme="dark"] .navbar-vertical .nav-link.active .nav-link-icon { opacity: 1; } /* User Profile Section am unteren Rand */ [data-bs-theme="dark"] .navbar-vertical .navbar-profile { background-color: var(--gxp-navy-800); border-radius: var(--tblr-border-radius-lg); margin: 8px; padding: 12px; } /* ========================================================================== Top Navbar / Header ========================================================================== */ [data-bs-theme="dark"] .navbar:not(.navbar-vertical) { background-color: var(--gxp-navy-900); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .navbar-brand-autodark { filter: none; } /* ========================================================================== Buttons ========================================================================== */ /* Primary Button - Teal Filled (wie "Analyze Impact") */ [data-bs-theme="dark"] .btn-primary { --tblr-btn-color: var(--gxp-navy-900); --tblr-btn-bg: var(--gxp-teal-500); --tblr-btn-border-color: var(--gxp-teal-500); --tblr-btn-hover-color: var(--gxp-navy-900); --tblr-btn-hover-bg: var(--gxp-teal-400); --tblr-btn-hover-border-color: var(--gxp-teal-400); --tblr-btn-active-color: var(--gxp-navy-900); --tblr-btn-active-bg: var(--gxp-teal-600); --tblr-btn-active-border-color: var(--gxp-teal-600); --tblr-btn-disabled-color: var(--gxp-text-muted); --tblr-btn-disabled-bg: var(--gxp-navy-700); --tblr-btn-disabled-border-color: var(--gxp-navy-700); font-weight: 500; } /* Secondary Button - Dark Filled (wie "Read Summary") */ [data-bs-theme="dark"] .btn-secondary { --tblr-btn-color: var(--gxp-text-primary); --tblr-btn-bg: var(--gxp-navy-700); --tblr-btn-border-color: var(--gxp-navy-600); --tblr-btn-hover-color: var(--gxp-text-primary); --tblr-btn-hover-bg: var(--gxp-navy-600); --tblr-btn-hover-border-color: var(--gxp-navy-600); font-weight: 500; } /* Outline Primary - Teal Ghost (wie Quick Action Buttons) */ [data-bs-theme="dark"] .btn-outline-primary { --tblr-btn-color: var(--gxp-teal-400); --tblr-btn-border-color: var(--gxp-teal-500); --tblr-btn-hover-color: var(--gxp-navy-900); --tblr-btn-hover-bg: var(--gxp-teal-500); --tblr-btn-hover-border-color: var(--gxp-teal-500); --tblr-btn-active-color: var(--gxp-navy-900); --tblr-btn-active-bg: var(--gxp-teal-600); font-weight: 500; } /* Ghost Button */ [data-bs-theme="dark"] .btn-ghost-primary { --tblr-btn-color: var(--gxp-teal-400); --tblr-btn-bg: transparent; --tblr-btn-border-color: transparent; --tblr-btn-hover-color: var(--gxp-teal-300); --tblr-btn-hover-bg: rgba(20, 184, 166, 0.1); --tblr-btn-hover-border-color: transparent; } /* Icon Button (wie Send Button im Chat) */ [data-bs-theme="dark"] .btn-icon.btn-primary { border-radius: var(--tblr-border-radius); } /* ========================================================================== Badges / Status Labels (wie im Screenshot) ========================================================================== */ /* Base Badge Styles */ [data-bs-theme="dark"] .badge { font-weight: 500; padding: 0.35em 0.75em; border-radius: var(--tblr-border-radius-pill); } /* Stable Badge - Teal Filled */ [data-bs-theme="dark"] .badge.bg-success, [data-bs-theme="dark"] .badge.bg-teal { background-color: var(--gxp-teal-500) !important; color: var(--gxp-navy-900); } /* Attention Badge - Orange/Amber Filled */ [data-bs-theme="dark"] .badge.bg-warning { background-color: var(--gxp-warning) !important; color: var(--gxp-navy-900); } /* Active Badge - Teal Outline/Ghost */ [data-bs-theme="dark"] .badge.bg-primary-lt, [data-bs-theme="dark"] .badge.badge-outline-primary { background-color: transparent !important; color: var(--gxp-teal-400); border: 1px solid var(--gxp-teal-500); } /* Info Badge */ [data-bs-theme="dark"] .badge.bg-info { background-color: var(--gxp-teal-400) !important; color: var(--gxp-navy-900); } /* Danger Badge */ [data-bs-theme="dark"] .badge.bg-danger { background-color: var(--gxp-danger) !important; color: white; } /* ========================================================================== Status Dot / Indicator ========================================================================== */ [data-bs-theme="dark"] .status-dot { width: 8px; height: 8px; border-radius: 50%; } [data-bs-theme="dark"] .status-dot.status-teal, [data-bs-theme="dark"] .status-dot.status-primary { background-color: var(--gxp-teal-400); } [data-bs-theme="dark"] .status-dot.status-warning { background-color: var(--gxp-warning); } /* ========================================================================== Progress Bars ========================================================================== */ [data-bs-theme="dark"] .progress { background-color: var(--gxp-navy-700); border-radius: var(--tblr-border-radius-pill); height: 6px; } [data-bs-theme="dark"] .progress-bar { background-color: var(--gxp-teal-500); border-radius: var(--tblr-border-radius-pill); } /* ========================================================================== Form Controls & Inputs ========================================================================== */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--gxp-navy-700); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--gxp-text-primary); border-radius: var(--tblr-border-radius); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--gxp-navy-700); border-color: var(--gxp-teal-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15); color: var(--gxp-text-primary); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--gxp-text-muted); } /* Search Input (wie im Header) */ [data-bs-theme="dark"] .form-control.form-control-search, [data-bs-theme="dark"] .input-icon .form-control { background-color: var(--gxp-navy-800); border-color: rgba(255, 255, 255, 0.08); } /* Input Group */ [data-bs-theme="dark"] .input-group-text { background-color: var(--gxp-navy-700); border-color: rgba(255, 255, 255, 0.1); color: var(--gxp-text-muted); } /* ========================================================================== Alerts (wie Warning Box im Screenshot) ========================================================================== */ [data-bs-theme="dark"] .alert { border-radius: var(--tblr-border-radius-lg); border: none; } /* Warning Alert - Orange Background */ [data-bs-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, 0.15); color: var(--gxp-warning); border-left: 4px solid var(--gxp-warning); } [data-bs-theme="dark"] .alert-warning .alert-title { color: var(--gxp-warning); } /* Success Alert */ [data-bs-theme="dark"] .alert-success { background-color: rgba(16, 185, 129, 0.15); color: var(--gxp-success); border-left: 4px solid var(--gxp-success); } /* Danger Alert */ [data-bs-theme="dark"] .alert-danger { background-color: rgba(239, 68, 68, 0.15); color: #F87171; border-left: 4px solid var(--gxp-danger); } /* Info Alert - Teal */ [data-bs-theme="dark"] .alert-info { background-color: rgba(20, 184, 166, 0.15); color: var(--gxp-teal-400); border-left: 4px solid var(--gxp-teal-500); } /* ========================================================================== Tables ========================================================================== */ [data-bs-theme="dark"] .table { --tblr-table-bg: transparent; --tblr-table-color: var(--gxp-text-primary); --tblr-table-border-color: rgba(255, 255, 255, 0.06); --tblr-table-striped-bg: rgba(255, 255, 255, 0.02); --tblr-table-hover-bg: rgba(20, 184, 166, 0.05); } [data-bs-theme="dark"] .table thead th { color: var(--gxp-text-muted); font-weight: 500; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background-color: transparent; } [data-bs-theme="dark"] .table td { border-bottom-color: rgba(255, 255, 255, 0.04); } /* ========================================================================== Dropdown Menus ========================================================================== */ [data-bs-theme="dark"] .dropdown-menu { background-color: var(--gxp-navy-800); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); border-radius: var(--tblr-border-radius-lg); } [data-bs-theme="dark"] .dropdown-item { color: var(--gxp-text-secondary); border-radius: var(--tblr-border-radius-sm); margin: 2px 4px; } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: rgba(20, 184, 166, 0.1); color: var(--gxp-teal-400); } [data-bs-theme="dark"] .dropdown-item.active, [data-bs-theme="dark"] .dropdown-item:active { background-color: var(--gxp-teal-500); color: var(--gxp-navy-900); } [data-bs-theme="dark"] .dropdown-divider { border-top-color: rgba(255, 255, 255, 0.06); } /* ========================================================================== Modals ========================================================================== */ [data-bs-theme="dark"] .modal-content { background-color: var(--gxp-navy-800); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--tblr-border-radius-xl); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); } [data-bs-theme="dark"] .modal-header { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .modal-footer { border-top-color: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } /* ========================================================================== List Groups ========================================================================== */ [data-bs-theme="dark"] .list-group-item { background-color: transparent; border-color: rgba(255, 255, 255, 0.06); color: var(--gxp-text-primary); } [data-bs-theme="dark"] .list-group-item:hover { background-color: rgba(255, 255, 255, 0.03); } [data-bs-theme="dark"] .list-group-item.active { background-color: rgba(20, 184, 166, 0.15); border-color: rgba(20, 184, 166, 0.3); color: var(--gxp-teal-400); } /* ========================================================================== Tabs & Pills ========================================================================== */ [data-bs-theme="dark"] .nav-tabs { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--gxp-text-muted); border-color: transparent; } [data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: var(--gxp-text-primary); border-color: transparent; } [data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--gxp-teal-400); background-color: transparent; border-color: transparent transparent var(--gxp-teal-500); } [data-bs-theme="dark"] .nav-pills .nav-link { color: var(--gxp-text-secondary); border-radius: var(--tblr-border-radius); } [data-bs-theme="dark"] .nav-pills .nav-link:hover { color: var(--gxp-text-primary); background-color: rgba(255, 255, 255, 0.05); } [data-bs-theme="dark"] .nav-pills .nav-link.active { color: var(--gxp-navy-900); background-color: var(--gxp-teal-500); } /* ========================================================================== Pagination ========================================================================== */ [data-bs-theme="dark"] .page-link { background-color: transparent; border-color: rgba(255, 255, 255, 0.08); color: var(--gxp-text-secondary); } [data-bs-theme="dark"] .page-link:hover { background-color: rgba(20, 184, 166, 0.1); border-color: rgba(20, 184, 166, 0.3); color: var(--gxp-teal-400); } [data-bs-theme="dark"] .page-item.active .page-link { background-color: var(--gxp-teal-500); border-color: var(--gxp-teal-500); color: var(--gxp-navy-900); } [data-bs-theme="dark"] .page-item.disabled .page-link { background-color: transparent; border-color: rgba(255, 255, 255, 0.04); color: var(--gxp-text-muted); } /* ========================================================================== Breadcrumbs ========================================================================== */ [data-bs-theme="dark"] .breadcrumb-item a { color: var(--gxp-text-muted); } [data-bs-theme="dark"] .breadcrumb-item a:hover { color: var(--gxp-teal-400); } [data-bs-theme="dark"] .breadcrumb-item.active { color: var(--gxp-text-primary); } [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--gxp-text-muted); } /* ========================================================================== Tooltips & Popovers ========================================================================== */ [data-bs-theme="dark"] .tooltip-inner { background-color: var(--gxp-navy-700); color: var(--gxp-text-primary); border: 1px solid rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .popover { background-color: var(--gxp-navy-800); border-color: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .popover-header { background-color: var(--gxp-navy-700); border-bottom-color: rgba(255, 255, 255, 0.06); } /* ========================================================================== Accordions ========================================================================== */ [data-bs-theme="dark"] .accordion-item { background-color: var(--gxp-navy-800); border-color: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .accordion-button { background-color: var(--gxp-navy-800); color: var(--gxp-text-primary); } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(20, 184, 166, 0.1); color: var(--gxp-teal-400); } [data-bs-theme="dark"] .accordion-button:focus { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15); border-color: var(--gxp-teal-500); } /* ========================================================================== Avatar ========================================================================== */ [data-bs-theme="dark"] .avatar { background-color: var(--gxp-navy-700); } [data-bs-theme="dark"] .avatar-list-stacked .avatar { border-color: var(--gxp-navy-800); } /* ========================================================================== Chat/Messaging Styles (wie AI Compliance Assistant) ========================================================================== */ /* Chat Container */ .gxp-chat { background-color: var(--gxp-navy-800); border-radius: var(--tblr-border-radius-lg); border: 1px solid rgba(255, 255, 255, 0.06); } /* User Message */ .gxp-chat-message-user { background-color: var(--gxp-navy-700); color: var(--gxp-text-primary); border-radius: var(--tblr-border-radius-lg); padding: 12px 16px; } /* AI Message - Teal Background */ .gxp-chat-message-ai { background-color: var(--gxp-teal-600); color: white; border-radius: var(--tblr-border-radius-lg); padding: 12px 16px; } /* Chat Input */ .gxp-chat-input { background-color: var(--gxp-navy-700); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--tblr-border-radius-lg); color: var(--gxp-text-primary); } .gxp-chat-input:focus { border-color: var(--gxp-teal-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15); } /* Quick Action Buttons */ .gxp-quick-action { background-color: transparent; border: 1px solid var(--gxp-teal-500); color: var(--gxp-teal-400); border-radius: var(--tblr-border-radius-pill); padding: 8px 16px; font-size: 0.875rem; font-weight: 500; transition: all 0.15s ease; } .gxp-quick-action:hover { background-color: var(--gxp-teal-500); color: var(--gxp-navy-900); } /* ========================================================================== Stats Cards (wie Audit Readiness, etc.) ========================================================================== */ .gxp-stat-card { background-color: var(--gxp-navy-800); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--tblr-border-radius-lg); padding: 20px; } .gxp-stat-label { color: var(--gxp-text-muted); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .gxp-stat-value { color: var(--gxp-text-primary); font-size: 2.5rem; font-weight: 700; line-height: 1; } .gxp-stat-change { color: var(--gxp-teal-400); font-size: 0.875rem; font-weight: 500; } .gxp-stat-change.negative { color: var(--gxp-danger); } /* ========================================================================== Feed Items (wie Regulatory Feed) ========================================================================== */ .gxp-feed-item { background-color: var(--gxp-navy-700); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--tblr-border-radius); padding: 16px; } .gxp-feed-label { color: var(--gxp-text-muted); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; } .gxp-feed-title { color: var(--gxp-text-primary); font-weight: 500; margin: 8px 0; } /* ========================================================================== Hexagon Icon Badge (wie AI Assistant Icon) ========================================================================== */ .gxp-icon-badge { width: 40px; height: 40px; background: linear-gradient(135deg, var(--gxp-teal-500), var(--gxp-teal-400)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; } /* ========================================================================== Chart/Graph Area ========================================================================== */ .gxp-chart-area { background-color: var(--gxp-navy-800); border-radius: var(--tblr-border-radius-lg); padding: 20px; } /* ========================================================================== Utility Classes ========================================================================== */ /* Text Colors */ .text-teal { color: var(--gxp-teal-400) !important; } .text-teal-dark { color: var(--gxp-teal-500) !important; } /* Background Colors */ .bg-navy-900 { background-color: var(--gxp-navy-900) !important; } .bg-navy-800 { background-color: var(--gxp-navy-800) !important; } .bg-navy-700 { background-color: var(--gxp-navy-700) !important; } .bg-teal { background-color: var(--gxp-teal-500) !important; } /* Border Colors */ .border-teal { border-color: var(--gxp-teal-500) !important; } /* Gradient Backgrounds */ .bg-gradient-teal { background: linear-gradient(135deg, var(--gxp-teal-500), var(--gxp-teal-400)) !important; } /* Status Indicator Animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .status-indicator { width: 8px; height: 8px; border-radius: 50%; background-color: var(--gxp-teal-400); } .status-indicator.pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Live Badge */ .badge-live { background-color: var(--gxp-navy-700); color: var(--gxp-text-secondary); font-size: 0.75rem; padding: 4px 10px; border-radius: var(--tblr-border-radius-pill); } .badge-live::before { content: ""; display: inline-block; width: 6px; height: 6px; background-color: var(--gxp-teal-400); border-radius: 50%; margin-right: 6px; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* ========================================================================== Scrollbar Styling ========================================================================== */ [data-bs-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--gxp-navy-900); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--gxp-navy-600); border-radius: 4px; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--gxp-navy-700); } /* ========================================================================== Selection Styling ========================================================================== */ [data-bs-theme="dark"] ::selection { background-color: var(--gxp-teal-500); color: var(--gxp-navy-900); } /* ========================================================================== Print Styles ========================================================================== */ @media print { [data-bs-theme="dark"] { --tblr-body-bg: #ffffff; --tblr-body-color: #000000; } }