/** * ============================================================================ * LINDEBERGS Design System v2.0 * ============================================================================ * * Corporate Design März 2026 * * WICHTIG: Alle Farben MÜSSEN aus diesem File verwendet werden! * Keine hartcodierten Farben in anderen CSS/SCSS Dateien! * * Theme-Unterstützung: * - Light Mode: Standard (:root) * - Dark Mode: [data-theme="dark"] * ============================================================================ */ /* ============================================================================= * DESIGN TOKENS - LIGHT MODE (Default) * ============================================================================= */ :root { /* Native Scrollbars / Form-UI an manuelles Light-Theme koppeln (data-theme auf ). */ color-scheme: light; /* ───────────────────────────────────────────────────────────────────────── * Brand / Primary Colors * ───────────────────────────────────────────────────────────────────────── */ --l-primary: #748b74; /* Sanftes Grün - Buttons, Akzente */ --l-primary-hover: #5a7a5a; /* Hover-State - etwas dunkler */ --l-primary-rgb: 116, 139, 116; /* Für rgba() Verwendung */ --l-primary-dark: #002019; /* Dunkelgrün - Header, Footer */ --l-primary-dark-hover: #003328; --l-primary-soft: rgba(116, 139, 116, 0.15); --l-primary-soft-strong: rgba(116, 139, 116, 0.25); --l-focus-ring: 0 0 0 2px rgba(116, 139, 116, 0.15); /* ───────────────────────────────────────────────────────────────────────── * Text Colors * ───────────────────────────────────────────────────────────────────────── */ --l-text: #312f2c; /* Dunkelbraun - Maximale Lesbarkeit */ --l-text-secondary: #5e5b54; /* Nebentexte */ --l-text-muted: #7a756c; /* Gedämpft */ --l-text-disabled: #8e8a82; /* Deaktivierte Texte */ --l-text-on-primary: #fbf7f5; /* Text auf Primary-Hintergrund */ /* ───────────────────────────────────────────────────────────────────────── * Background Colors * ───────────────────────────────────────────────────────────────────────── */ --l-bg: #fbf7f5; /* Off-White - Haupt-Hintergrund */ --l-bg-surface: #e7e4da; /* Karten, sekundäre Flächen */ --l-bg-surface-alt: #f5f3ef; /* Alternating rows - neutral beige */ --l-bg-elevated: #ffffff; /* Modals, Dropdowns */ --l-bg-hover: #f1eee6; /* Hover-State für neutrale Flächen */ --l-bg-disabled: #efede4; /* Deaktivierte Flächen */ /* ───────────────────────────────────────────────────────────────────────── * Semantic Colors * ───────────────────────────────────────────────────────────────────────── */ --l-success: #5a7a5a; /* Bestätigungen */ --l-success-hover: #4a6a4a; --l-success-bg: #e8f0e8; --l-info: #607d8b; /* Neutrale Hinweise */ --l-info-bg: #e8eef1; --l-warning: #997945; /* Warnungen */ --l-warning-hover: #846739; --l-warning-bg: #f8f3e8; --l-error: #a35d5d; /* Fehler, Lösch-Buttons */ --l-error-bg: #f5eaea; /* ───────────────────────────────────────────────────────────────────────── * Border & Divider * ───────────────────────────────────────────────────────────────────────── */ --l-border: #d1cdc0; /* Standard-Border */ --l-border-light: #e7e4da; /* Leichte Trenner */ --l-border-focus: #002019; /* Focus-Ring */ /* ───────────────────────────────────────────────────────────────────────── * Spacing * ───────────────────────────────────────────────────────────────────────── */ --l-space-xs: 0.25rem; /* 4px */ --l-space-sm: 0.5rem; /* 8px */ --l-space-md: 1rem; /* 16px */ --l-space-lg: 1.5rem; /* 24px */ --l-space-xl: 2rem; /* 32px */ --l-space-2xl: 3rem; /* 48px */ /* ───────────────────────────────────────────────────────────────────────── * Border Radius * ───────────────────────────────────────────────────────────────────────── */ --l-radius-sm: 4px; --l-radius-md: 8px; --l-radius-lg: 12px; --l-radius-xl: 16px; --l-radius-full: 9999px; /* ───────────────────────────────────────────────────────────────────────── * Shadows * ───────────────────────────────────────────────────────────────────────── */ --l-shadow-sm: 0 1px 2px rgba(0, 32, 25, 0.05); --l-shadow-md: 0 4px 6px rgba(0, 32, 25, 0.07); --l-shadow-lg: 0 10px 15px rgba(0, 32, 25, 0.1); --l-shadow-xl: 0 20px 25px rgba(0, 32, 25, 0.15); /* ───────────────────────────────────────────────────────────────────────── * Typography * ───────────────────────────────────────────────────────────────────────── */ --l-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --l-font-mono: "JetBrains Mono", "Fira Code", monospace; --l-text-xs: 0.75rem; /* 12px */ --l-text-sm: 0.875rem; /* 14px */ --l-text-base: 1rem; /* 16px */ --l-text-lg: 1.125rem; /* 18px */ --l-text-xl: 1.25rem; /* 20px */ --l-text-2xl: 1.5rem; /* 24px */ --l-text-3xl: 1.875rem; /* 30px */ /* ───────────────────────────────────────────────────────────────────────── * Transitions * ───────────────────────────────────────────────────────────────────────── */ --l-transition-fast: 150ms ease; --l-transition-base: 200ms ease; --l-transition-slow: 300ms ease; /* ───────────────────────────────────────────────────────────────────────── * Legacy Compatibility (für schrittweise Migration) * ───────────────────────────────────────────────────────────────────────── */ --color-primary: var(--l-primary); --color-primary-hover: var(--l-primary-hover); --color-primary-light: var(--l-primary-soft); --color-primary-rgb: var(--l-primary-rgb); --color-secondary: var(--l-text-secondary); --color-secondary-hover: var(--l-text); --color-bg-dark: var(--l-bg-surface); --color-bg-darker: var(--l-bg); --color-bg-light: var(--l-bg-elevated); --color-bg-white: #ffffff; --color-text-primary: var(--l-text); --color-text-secondary: var(--l-text-secondary); --color-text-muted: var(--l-text-muted); --color-text-dark: var(--l-text); --color-success: var(--l-success); --color-danger: var(--l-error); --color-warning: var(--l-warning); --color-info: var(--l-info); --color-border: var(--l-border); --color-border-light: var(--l-border-light); --spacing-xs: var(--l-space-xs); --spacing-sm: var(--l-space-sm); --spacing-md: var(--l-space-md); --spacing-lg: var(--l-space-lg); --spacing-xl: var(--l-space-xl); --radius-sm: var(--l-radius-sm); --radius-md: var(--l-radius-md); --radius-lg: var(--l-radius-lg); /* Irrtümlich oft verwendet — Aliase auf offizielle Tokens (Dark/Light folgt --l-text / --l-error) */ --l-text-primary: var(--l-text); --l-danger: var(--l-error); /* Bootstrap variable bridge (zentral statt viele Einzel-Overrides) */ --bs-primary: var(--l-primary); --bs-secondary-color: var(--l-text-secondary); --bs-body-bg: var(--l-bg); --bs-body-color: var(--l-text); --bs-secondary-bg: var(--l-bg-surface); --bs-tertiary-bg: var(--l-bg-elevated); --bs-border-color: var(--l-border); --bs-border-color-translucent: var(--l-border-light); --bs-focus-ring-color: rgba(var(--l-primary-rgb), 0.25); } /* ============================================================================= * DESIGN TOKENS - DARK MODE * ============================================================================= */ [data-theme="dark"] { /* Dunkle Scrollbars und passende System-UI auch ohne prefers-color-scheme: dark */ color-scheme: dark; --l-primary: #8da18d; /* Erdigeres, helles Salbeigrün für Dark Mode */ --l-primary-hover: #a3b5a3; --l-primary-rgb: 141, 161, 141; --l-text: #f1f0ed; --l-text-secondary: #cdcbc5; --l-text-muted: #aaa8a2; --l-text-disabled: #7f7d77; --l-text-on-primary: #1a1d1c; --l-bg: #181b1a; --l-bg-surface: #202524; --l-bg-surface-alt: #272d2b; --l-bg-elevated: #2d3432; --l-bg-hover: #323a38; --l-bg-disabled: #262c2b; --l-success: #78ad78; --l-success-hover: #8abd8a; --l-success-bg: #1e2a1e; --l-info: #7a99a8; --l-info-bg: #1e2528; --l-warning: #e0c789; --l-warning-hover: #ebd59f; --l-warning-bg: #2a251a; --l-error: #c07878; --l-error-bg: #2a1e1e; --l-border: #4a514e; --l-border-light: #3a413f; --l-border-focus: #4a9e8c; --l-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --l-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25); --l-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3); --l-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4); /* Legacy Overrides für Dark Mode */ --color-text-primary: var(--l-text); --color-bg-dark: var(--l-bg-surface); --color-bg-darker: var(--l-bg); /* Bootstrap variable bridge (dark) */ --bs-primary: var(--l-primary); --bs-secondary-color: var(--l-text-secondary); --bs-body-bg: var(--l-bg); --bs-body-color: var(--l-text); --bs-secondary-bg: var(--l-bg-surface); --bs-tertiary-bg: var(--l-bg-elevated); --bs-border-color: var(--l-border); --bs-border-color-translucent: var(--l-border-light); --bs-focus-ring-color: rgba(var(--l-primary-rgb), 0.3); } /* ============================================================================= * DARK THEME COMPONENT OVERRIDES * ============================================================================= */ /* Grid Dark Theme Fixes */ [data-theme="dark"] .e-grid, [data-theme="dark"] .e-grid .e-gridheader, [data-theme="dark"] .e-grid .e-gridcontent, [data-theme="dark"] .e-grid .e-table { background-color: var(--l-bg-surface) !important; color: var(--l-text) !important; border-color: var(--l-border) !important; } [data-theme="dark"] .e-grid .e-headercell, [data-theme="dark"] .e-grid .e-detailheadercell { background-color: var(--l-bg-elevated) !important; color: var(--l-text-secondary) !important; border-color: var(--l-border) !important; } [data-theme="dark"] .e-grid .e-rowcell { background-color: var(--l-bg-surface) !important; color: var(--l-text) !important; border-color: var(--l-border-light) !important; } [data-theme="dark"] .e-grid .e-altrow .e-rowcell { background-color: var(--l-bg-surface-alt) !important; } [data-theme="dark"] .e-grid .e-row:hover .e-rowcell, [data-theme="dark"] .e-grid .e-row:hover .e-rowcell:not(.e-cellselectionbackground) { background-color: rgba(141, 161, 141, 0.15) !important; color: var(--l-text) !important; } /* Card (e-card) Dark Theme Fixes */ [data-theme="dark"] .e-card { background-color: var(--l-bg-elevated) !important; color: var(--l-text) !important; border-color: var(--l-border) !important; box-shadow: var(--l-shadow-sm) !important; } [data-theme="dark"] .e-card .e-card-header-title { color: var(--l-text) !important; } [data-theme="dark"] .e-card .e-card-sub-title { color: var(--l-text-secondary) !important; } /* Dropdown/ComboBox Dark Theme Fixes */ [data-theme="dark"] .e-dropdownbase, [data-theme="dark"] .e-popup, [data-theme="dark"] .e-popup .e-content, [data-theme="dark"] .e-ddl-popup { background-color: var(--l-bg-elevated) !important; color: var(--l-text) !important; border-color: var(--l-border) !important; } [data-theme="dark"] .e-input-group, [data-theme="dark"] .e-input-group.e-control-wrapper, [data-theme="dark"] .e-float-input, [data-theme="dark"] .e-float-input.e-control-wrapper { background-color: var(--l-bg-elevated) !important; color: var(--l-text) !important; border-color: var(--l-border) !important; } [data-theme="dark"] .e-input-group input.e-input, [data-theme="dark"] .e-input-group.e-control-wrapper input.e-input { color: var(--l-text) !important; } [data-theme="dark"] .e-list-item, [data-theme="dark"] .e-dropdownbase .e-list-item { color: var(--l-text) !important; background-color: transparent !important; } [data-theme="dark"] .e-list-item.e-hover, [data-theme="dark"] .e-dropdownbase .e-list-item.e-hover, [data-theme="dark"] .e-list-item:hover { background-color: var(--l-bg-surface) !important; color: var(--l-text) !important; } [data-theme="dark"] .e-list-item.e-active, [data-theme="dark"] .e-list-item.e-selected, [data-theme="dark"] .e-dropdownbase .e-list-item.e-active, [data-theme="dark"] .e-dropdownbase .e-list-item.e-selected { background-color: var(--l-primary-soft) !important; color: var(--l-primary) !important; } /* Sidebar Fixes */ [data-theme="dark"] .l-sidebar, [data-theme="dark"] .e-sidebar { background-color: var(--l-bg-elevated) !important; color: var(--l-text) !important; border-right: 1px solid var(--l-border) !important; } /* ============================================================================= * GLOBAL STYLES * ============================================================================= */ /* Base styles */ body { font-family: var(--l-font-sans); background-color: var(--l-bg); color: var(--l-text); line-height: 1.5; } /* Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--l-text); font-weight: 600; } /* Links */ a { color: var(--l-primary); text-decoration: none; transition: color var(--l-transition-fast); } a:hover { color: var(--l-primary-hover); } /* Labels */ label, .form-label { color: var(--l-text); font-size: var(--l-text-sm); font-weight: 500; } /* ============================================================================= * L-BUTTON - Lindebergs Button System * ============================================================================= */ .l-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--l-space-sm); padding: var(--l-space-sm) var(--l-space-md); font-size: var(--l-text-sm); font-weight: 500; line-height: 1.5; border-radius: var(--l-radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--l-transition-fast); text-decoration: none; } .l-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Primary Button */ .l-btn--primary { background-color: var(--l-primary); color: var(--l-text-on-primary); border-color: var(--l-primary); } .l-btn--primary:hover:not(:disabled) { background-color: var(--l-primary-hover); border-color: var(--l-primary-hover); } /* Secondary / Outline Button */ .l-btn--secondary { background-color: transparent; color: var(--l-text); border-color: var(--l-border); } .l-btn--secondary:hover:not(:disabled) { background-color: var(--l-bg-surface); border-color: var(--l-primary); } /* Ghost Button */ .l-btn--ghost { background-color: transparent; color: var(--l-text); border-color: transparent; } .l-btn--ghost:hover:not(:disabled) { background-color: var(--l-bg-surface); } /* Danger Button */ .l-btn--danger { background-color: var(--l-error); color: #fff; border-color: var(--l-error); } .l-btn--danger:hover:not(:disabled) { background-color: #8b4d4d; border-color: #8b4d4d; } /* Success Button */ .l-btn--success { background-color: var(--l-success); color: #fff; border-color: var(--l-success); } .l-btn--success:hover:not(:disabled) { background-color: #4a6a4a; border-color: #4a6a4a; } /* Button Sizes */ .l-btn--sm { padding: var(--l-space-xs) var(--l-space-sm); font-size: var(--l-text-xs); } .l-btn--lg { padding: var(--l-space-md) var(--l-space-lg); font-size: var(--l-text-base); } /* Icon-only Button */ .l-btn--icon { padding: var(--l-space-sm); aspect-ratio: 1; } /* ============================================================================= * L-BADGE - Lindebergs Badge System * ============================================================================= */ .l-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: var(--l-text-xs); font-weight: 500; line-height: 1.5; border-radius: var(--l-radius-full); white-space: nowrap; } .l-badge--sm { padding: 1px 6px; font-size: 10px; } .l-badge--lg { padding: 4px 12px; font-size: var(--l-text-sm); } /* Badge Variants */ .l-badge--primary { background-color: rgba(0, 32, 25, 0.1); color: var(--l-primary); } .l-badge--secondary { background-color: var(--l-bg-surface); color: var(--l-text-secondary); } .l-badge--success { background-color: var(--l-success-bg); color: var(--l-success); } .l-badge--warning { background-color: var(--l-warning-bg); color: var(--l-warning); } .l-badge--error, .l-badge--danger { background-color: var(--l-error-bg); color: var(--l-error); } .l-badge--info { background-color: var(--l-info-bg); color: var(--l-info); } /* Solid Badge Variants */ .l-badge--primary-solid { background-color: var(--l-primary); color: var(--l-text-on-primary); } .l-badge--success-solid { background-color: var(--l-success); color: #fff; } .l-badge--warning-solid { background-color: var(--l-warning); color: #fff; } .l-badge--error-solid, .l-badge--danger-solid { background-color: var(--l-error); color: #fff; } .l-badge--info-solid { background-color: var(--l-info); color: #fff; } /* ============================================================================= * L-CARD - Lindebergs Card System * ============================================================================= */ .l-card { background-color: var(--l-bg-elevated); border: 1px solid var(--l-border-light); border-radius: var(--l-radius-lg); box-shadow: var(--l-shadow-sm); overflow: hidden; } .l-card__header { padding: var(--l-space-md) var(--l-space-lg); border-bottom: 1px solid var(--l-border-light); display: flex; align-items: center; justify-content: space-between; gap: var(--l-space-md); } .l-card__title { font-size: var(--l-text-lg); font-weight: 600; color: var(--l-text); margin: 0; } .l-card__body { padding: var(--l-space-lg); } .l-card__footer { padding: var(--l-space-md) var(--l-space-lg); border-top: 1px solid var(--l-border-light); display: flex; align-items: center; justify-content: flex-end; gap: var(--l-space-sm); } /* Card Variants */ .l-card--flat { box-shadow: none; } .l-card--surface { background-color: var(--l-bg-surface); } /* ============================================================================= * L-INPUT - Lindebergs Input System * ============================================================================= */ .l-input { width: 100%; padding: var(--l-space-sm) var(--l-space-md); font-size: var(--l-text-sm); line-height: 1.5; color: var(--l-text); background-color: var(--l-bg-elevated); border: 1px solid var(--l-border); border-radius: var(--l-radius-md); transition: border-color var(--l-transition-fast), box-shadow var(--l-transition-fast); } .l-input::placeholder { color: var(--l-text-muted); } .l-input:focus { outline: none; border-color: var(--l-border-focus); box-shadow: 0 0 0 3px rgba(0, 32, 25, 0.1); } textarea.l-input { display: block; box-sizing: border-box; min-height: 5rem; resize: vertical; font-family: inherit; } .l-input:disabled { background-color: var(--l-bg-surface); cursor: not-allowed; opacity: 0.7; } /* Input States */ .l-input--error { border-color: var(--l-error); } .l-input--error:focus { box-shadow: 0 0 0 3px var(--l-error-bg); } .l-input--success { border-color: var(--l-success); } /* ============================================================================= * L-CHECKBOX - Lindebergs Checkbox System * ============================================================================= */ .l-checkbox { display: inline-flex; align-items: center; gap: var(--l-space-sm); cursor: pointer; user-select: none; position: relative; } .l-checkbox__input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; pointer-events: none; } .l-checkbox__indicator { width: 18px; height: 18px; border: 2px solid var(--l-border); border-radius: var(--l-radius-sm); background-color: var(--l-bg-elevated); transition: all var(--l-transition-fast); flex-shrink: 0; } .l-checkbox__input:checked + .l-checkbox__indicator { background-color: var(--l-primary); border-color: var(--l-primary); background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fbf7f5' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .l-checkbox__input:focus + .l-checkbox__indicator { box-shadow: 0 0 0 3px rgba(0, 32, 25, 0.1); } .l-checkbox__input:disabled + .l-checkbox__indicator, .l-checkbox__input:disabled ~ .l-checkbox__label { opacity: 0.5; cursor: not-allowed; } .l-checkbox__label { font-size: var(--l-text-sm); color: var(--l-text); } /* ============================================================================= * L-ALERT - Lindebergs Alert System * ============================================================================= */ .l-alert { display: flex; align-items: flex-start; gap: var(--l-space-md); padding: var(--l-space-md) var(--l-space-lg); border-radius: var(--l-radius-md); font-size: var(--l-text-sm); } .l-alert__icon { flex-shrink: 0; margin-top: 2px; } .l-alert__content { flex: 1; } .l-alert__title { font-weight: 600; margin-bottom: 4px; } /* Alert Variants */ .l-alert--info { background-color: var(--l-info-bg); color: var(--l-info); border: 1px solid var(--l-info); } .l-alert--success { background-color: var(--l-success-bg); color: var(--l-success); border: 1px solid var(--l-success); } .l-alert--warning { background-color: var(--l-warning-bg); color: var(--l-warning); border: 1px solid var(--l-warning); } .l-alert--error, .l-alert--danger { background-color: var(--l-error-bg); color: var(--l-error); border: 1px solid var(--l-error); } /* ============================================================================= * L-TABLE - Lindebergs Table System * ============================================================================= */ .l-table { width: 100%; border-collapse: collapse; font-size: var(--l-text-sm); } .l-table th { text-align: left; padding: var(--l-space-sm) var(--l-space-md); font-weight: 600; color: var(--l-text-secondary); background-color: var(--l-bg-surface); border-bottom: 1px solid var(--l-border); } .l-table td { padding: var(--l-space-sm) var(--l-space-md); color: var(--l-text); border-bottom: 1px solid var(--l-border-light); } .l-table tbody tr:hover { background-color: var(--l-bg-surface); } /* ============================================================================= * UTILITY CLASSES * ============================================================================= */ /* Text Colors */ .text-primary { color: var(--l-primary) !important; } .text-secondary { color: var(--l-text-secondary) !important; } .text-muted { color: var(--l-text-muted) !important; } .text-success { color: var(--l-success) !important; } .text-warning { color: var(--l-warning) !important; } .text-error, .text-danger { color: var(--l-error) !important; } .text-info { color: var(--l-info) !important; } /* Background Colors */ .bg-primary { background-color: var(--l-primary) !important; } .bg-surface { background-color: var(--l-bg-surface) !important; } .bg-elevated { background-color: var(--l-bg-elevated) !important; } /* Border */ .border { border: 1px solid var(--l-border) !important; } .border-light { border: 1px solid var(--l-border-light) !important; } /* Spacing utilities */ .p-0 { padding: 0 !important; } .p-xs { padding: var(--l-space-xs) !important; } .p-sm { padding: var(--l-space-sm) !important; } .p-md { padding: var(--l-space-md) !important; } .p-lg { padding: var(--l-space-lg) !important; } .m-0 { margin: 0 !important; } .m-xs { margin: var(--l-space-xs) !important; } .m-sm { margin: var(--l-space-sm) !important; } .m-md { margin: var(--l-space-md) !important; } .m-lg { margin: var(--l-space-lg) !important; } .gap-xs { gap: var(--l-space-xs) !important; } .gap-sm { gap: var(--l-space-sm) !important; } .gap-md { gap: var(--l-space-md) !important; } .gap-lg { gap: var(--l-space-lg) !important; } /* ============================================================================= * DARK THEME & COMPONENT OVERRIDES (Grid, Card, Input fixes) * ============================================================================= */ /* --- Grid Dark Theme Fixes --- */ .e-grid, .e-grid .e-gridheader, .e-grid .e-gridcontent, .e-grid .e-table { background-color: var(--l-bg-surface) !important; color: var(--l-text) !important; border-color: var(--l-border) !important; } .e-grid .e-headercell, .e-grid .e-detailheadercell { background-color: var(--l-bg-elevated) !important; color: var(--l-text-secondary) !important; border-color: var(--l-border) !important; } .e-grid .e-rowcell { background-color: var(--l-bg-surface) !important; color: var(--l-text) !important; border-color: var(--l-border-light) !important; } .e-grid .e-altrow .e-rowcell { background-color: var(--l-bg-surface-alt) !important; } .e-grid .e-row:hover .e-rowcell, .e-grid .e-row:hover .e-rowcell:not(.e-cellselectionbackground) { background-color: rgba( 141, 161, 141, 0.15 ) !important; /* Soft primary hover */ color: var(--l-text) !important; } /* --- Card (e-card) Dark Theme Fixes --- */ .e-card { background-color: var(--l-bg-elevated) !important; color: var(--l-text) !important; border-color: var(--l-border) !important; box-shadow: var(--l-shadow-sm) !important; display: flex; flex-direction: column; } .e-card .e-card-header, .e-card .e-card-content, .e-card .e-card-actions, .e-card .e-card-stacked { background-color: transparent !important; color: var(--l-text) !important; } /* Ensure card content aligns to top, not center */ .e-card .e-card-header { align-self: stretch !important; flex-shrink: 0; } .e-card .e-card-content { flex: 1; align-self: stretch !important; } .e-card .e-card-header-title { color: var(--l-text) !important; } .e-card .e-card-sub-title { color: var(--l-text-secondary) !important; } /* --- Dropdown/ComboBox Dark Theme Fixes --- */ .e-dropdownbase, .e-popup, .e-popup .e-content, .e-ddl-popup { background-color: var(--l-bg-elevated) !important; color: var(--l-text) !important; border-color: var(--l-border) !important; } .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-control-wrapper { background-color: var(--l-bg-elevated) !important; color: var(--l-text) !important; border-color: var(--l-border) !important; } .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input { color: var(--l-text) !important; } .e-list-item, .e-dropdownbase .e-list-item { color: var(--l-text) !important; background-color: transparent !important; } .e-list-item.e-hover, .e-dropdownbase .e-list-item.e-hover, .e-list-item:hover { background-color: var(--l-bg-surface) !important; color: var(--l-text) !important; } .e-list-item.e-active, .e-list-item.e-selected, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-selected { background-color: var(--l-primary-soft) !important; color: var(--l-primary) !important; } /* --- Sidebar Fixes --- */ .l-sidebar, .e-sidebar { background-color: var(--l-bg-elevated) !important; color: var(--l-text) !important; border-right: 1px solid var(--l-border) !important; } /* Syncfusion Primary Button */ .e-btn.e-primary, .e-css.e-btn.e-primary { background-color: var(--l-primary); border-color: var(--l-primary); color: var(--l-text-on-primary); } .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover { background-color: var(--l-primary-hover); border-color: var(--l-primary-hover); } :root { --l-appbar-height: 56px; --l-dialog-viewport-gap: 20px; } /* Syncfusion Dialog */ .e-dialog { background-color: var(--l-bg-elevated); border: 1px solid var(--l-border-light); } .viewport-safe-dialog.e-dialog { /* Keep large dialogs below the fixed top bar while preserving centered behavior. */ top: calc(var(--l-appbar-height) / 2) !important; max-height: calc( 100vh - var(--l-appbar-height) - (2 * var(--l-dialog-viewport-gap)) ) !important; max-height: calc( 100dvh - var(--l-appbar-height) - (2 * var(--l-dialog-viewport-gap)) ) !important; display: flex; flex-direction: column; overflow: hidden; } .viewport-safe-dialog.e-dialog .e-dlg-header-content, .viewport-safe-dialog.e-dialog .e-footer-content { flex: 0 0 auto; } .viewport-safe-dialog.e-dialog .e-dlg-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } .e-schedule-dialog.e-dialog { /* The scheduler editor is rendered by Syncfusion outside our layout tree, so it needs the same navbar-safe viewport constraints as large body-targeted dialogs. */ top: calc(var(--l-appbar-height) / 2) !important; max-height: calc( 100vh - var(--l-appbar-height) - (2 * var(--l-dialog-viewport-gap)) ) !important; max-height: calc( 100dvh - var(--l-appbar-height) - (2 * var(--l-dialog-viewport-gap)) ) !important; display: flex; flex-direction: column; overflow: hidden; width: min(720px, 96vw) !important; min-width: min(320px, 96vw) !important; max-width: 96vw !important; border-radius: var(--l-radius-lg); box-shadow: var(--l-shadow-lg); } /* * Kalender-Termineditor: Syncfusion setzt dynamische z-index-Werte — Obergrenze, damit * NestedAboveScheduleEditor-Dialoge (Änderungsverlauf, Quick-Create Episode) darüber liegen. */ .e-dlg-container:has(.e-schedule-dialog.e-dialog) { z-index: 150000 !important; } /* * Änderungsverlauf (ChangeHistoryDialog, Target=body): fester Mindest-Stack über e-schedule-dialog; * dialog-stacking.js hebt bei Bedarf noch über den aktuellen Syncfusion-Wert. */ .e-dlg-container:has(.change-history-dialog.e-dialog) { z-index: 210000 !important; } .e-dlg-container:has(.change-history-dialog.e-dialog) > .e-dlg-overlay { z-index: 210000 !important; } .change-history-dialog.e-dialog.e-popup-open { z-index: 210001 !important; } .e-schedule-dialog.e-dialog .e-dlg-header-content, .e-schedule-dialog.e-dialog .e-footer-content { flex: 0 0 auto; } .e-schedule-dialog.e-dialog .e-dlg-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* Kalender: Termin-Editor — Header/Footer/Content an Corporate Design */ .e-schedule-dialog.e-dialog .e-dlg-header-content { /* Flex: Schließen-Icon ist Geschwister von .e-dlg-header (Theme nutzt float:right + 80%-Breite — sonst wirkt X zu hoch). */ display: flex; align-items: center; gap: var(--l-space-xs); padding: 0.65rem 0.9rem; background: linear-gradient( 180deg, var(--l-bg-elevated) 0%, var(--l-bg-surface-alt) 100% ); border-bottom: 1px solid var(--l-border-light); } .e-schedule-dialog.e-dialog .e-dlg-header-content > .e-dlg-header { flex: 1 1 auto; min-width: 0; width: auto !important; /* Close kommt im DOM oft vor dem Header; Flex ohne float sonst links */ order: 1; } /* * Theme bootstrap5.css: .e-icon-dlg-close hat top:-7px; Close-Button 20×20 + padding — Schnellaktionen nutzen 2.25rem. */ .e-schedule-dialog.e-dialog .e-dlg-header-content > .e-btn.e-dlg-closeicon-btn { float: none !important; flex: 0 0 auto; align-self: center; order: 2; margin-left: auto; height: 2.25rem !important; width: 2.25rem !important; min-width: 2.25rem !important; min-height: 2.25rem !important; padding: 0 !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .e-schedule-dialog.e-dialog .e-dlg-header-content .e-btn .e-btn-icon.e-icon-dlg-close { top: 0 !important; left: 0 !important; position: relative !important; } .e-schedule-dialog.e-dialog .e-dlg-header .e-title-text { font-size: var(--l-text-lg); font-weight: 600; color: var(--l-text); font-family: var(--l-font-sans); } /* EditorHeaderTemplate: eigener Titel statt nur lokalisierter Default-Text */ .e-schedule-dialog.e-dialog .e-dlg-header .l-schedule-editor-header-wrap { width: 100%; } .e-schedule-dialog.e-dialog .e-dlg-header .l-schedule-editor-header { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; max-width: 100%; } /* Titel + Schnellaktionen: eine Zeile, Aktionen rechts bündig */ .e-schedule-dialog.e-dialog .e-dlg-header .l-schedule-editor-header__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--l-space-md); width: 100%; min-width: 0; } .e-schedule-dialog.e-dialog .e-dlg-header .l-schedule-editor-header__title-block { flex: 1; min-width: 0; } .e-schedule-dialog.e-dialog .e-dlg-header .l-schedule-editor-header__subject-row { display: flex; align-items: center; gap: var(--l-space-sm); min-width: 0; } .e-schedule-dialog.e-dialog .e-dlg-header .l-schedule-editor-toolbar--header { padding: 0; background: transparent; border: none; border-radius: 0; flex: 0 0 auto; } .e-schedule-dialog.e-dialog .e-dlg-header .l-schedule-editor-toolbar--header .l-schedule-editor-toolbar__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--l-space-xs); min-width: 0; } /* * Icon-Zeile (Auge / Historie / Schließen): gleiche Zielgröße und optische Mitte. * Ohne feste Box wirken z. B. Lucide.X oder UA-Styles bei