/* ========================================================= LACKplus – Dark Mode Aktiv via (gesetzt aus dem "theme"-Claim). Strategie: 1) Design-Tokens umdefinieren (greift überall, wo var(--lp-*) genutzt wird) 2) Globale Bootstrap-Flächen (card/form/table/modal/dropdown ...) 3) App-Chrome (Subnav etc.) 4) Explizite Overrides für bekannte Flächen/Texte 5) Generisches Sicherheitsnetz für Module ohne Variablen Farbige Badges/Chips/Gradients bleiben bewusst erhalten. ========================================================= */ html[data-theme="dark"] { --lp-bg: #0f172a; /* Seiten-Canvas */ --lp-surface: #1e293b; /* Karten/Panels */ --lp-surface-2: #16202e; /* Eingaben / eingelassene Flächen */ --lp-surface-3: #243345; /* Hover / weiche Flächen */ /* Tokens aus lackplus.css überschreiben (höhere Spezifität als :root) */ --lp-card: #1e293b; --lp-border: #334155; --lp-text: #e2e8f0; --lp-muted: #94a3b8; } /* ---------- Canvas ---------- */ html[data-theme="dark"] body { background: var(--lp-bg); color: var(--lp-text); } html[data-theme="dark"] hr { border-color: var(--lp-border); color: var(--lp-border); } /* ---------- Bootstrap-Flächen ---------- */ html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .accordion-item, html[data-theme="dark"] .accordion-button, html[data-theme="dark"] .popover { background-color: var(--lp-surface); color: var(--lp-text); border-color: var(--lp-border); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer, html[data-theme="dark"] .list-group-item { border-color: var(--lp-border); } html[data-theme="dark"] .dropdown-item { color: var(--lp-text); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--lp-surface-3); color: #fff; } html[data-theme="dark"] .dropdown-divider { border-color: var(--lp-border); } /* ---------- Formulare ---------- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .input-group-text, html[data-theme="dark"] .lp-input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="datetime-local"] { background-color: var(--lp-surface-2) !important; color: var(--lp-text) !important; border-color: var(--lp-border) !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b; } html[data-theme="dark"] .lp-input[readonly], html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-select:disabled { background-color: #0d1521 !important; color: #94a3b8 !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] .lp-input:focus { border-color: #3399ff !important; box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .25); } /* Date/Time-Picker-Icon im Dark Mode sichtbar machen */ html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.6); } /* Switch / Checkbox */ html[data-theme="dark"] .form-check-input { background-color: var(--lp-surface-2); border-color: var(--lp-border); } html[data-theme="dark"] .form-check-input:checked { background-color: #0783ff; border-color: #0783ff; } /* ---------- Tabellen ---------- */ html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--lp-text); color: var(--lp-text); } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--lp-text); border-color: var(--lp-border); } html[data-theme="dark"] .table thead th { background-color: var(--lp-surface-2); color: var(--lp-text); border-color: var(--lp-border); } html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--lp-surface-3); color: #fff; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, .03); } /* ---------- Bootstrap-Utilities ---------- */ html[data-theme="dark"] .bg-white { background-color: var(--lp-surface) !important; } html[data-theme="dark"] .bg-light { background-color: var(--lp-surface-2) !important; } html[data-theme="dark"] .bg-body { background-color: var(--lp-bg) !important; } html[data-theme="dark"] .text-dark { color: var(--lp-text) !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--lp-muted) !important; } html[data-theme="dark"] .text-body { color: var(--lp-text) !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--lp-border) !important; } html[data-theme="dark"] .btn-light { background-color: var(--lp-surface-3); border-color: var(--lp-border); color: var(--lp-text); } html[data-theme="dark"] .btn-light:hover { background-color: #2f4255; color: #fff; } html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-outline-dark { color: var(--lp-text); border-color: var(--lp-border); } html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--lp-surface-3); color: #fff; } html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--lp-border); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--lp-muted); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--lp-surface); color: var(--lp-text); border-color: var(--lp-border) var(--lp-border) var(--lp-surface); } /* ---------- App-Chrome: Subnav ---------- */ html[data-theme="dark"] .lp-subnav { background: var(--lp-surface); border-bottom-color: var(--lp-border); } html[data-theme="dark"] .lp-navlink { color: #cbd5e1; } html[data-theme="dark"] .lp-navlink:hover { background: var(--lp-surface-3); color: #93c5fd; } html[data-theme="dark"] .lp-navlink.active { background: #1d2b3f; color: #93c5fd; border-color: #2f4664; } html[data-theme="dark"] .lp-subnav-sep { background: var(--lp-border); } /* Standort-Switcher-Menü (öffnet aus dem Header) */ html[data-theme="dark"] .lp-loc-switcher-menu { background: var(--lp-surface); color: var(--lp-text); border-color: var(--lp-border); } html[data-theme="dark"] .lp-loc-switcher-head { color: var(--lp-muted); } html[data-theme="dark"] .lp-loc-switcher-item { color: var(--lp-text); } html[data-theme="dark"] .lp-loc-switcher-item:hover:not([disabled]) { background: var(--lp-surface-3); } /* Back-Button */ html[data-theme="dark"] .btn-back, html[data-theme="dark"] .lp-back-link { background: var(--lp-surface-3); color: var(--lp-text); border-color: var(--lp-border); } html[data-theme="dark"] .btn-back:hover, html[data-theme="dark"] .lp-back-link:hover { background: #2f4255; color: #fff; } /* ========================================================= Explizite Flächen (weiße Karten -> Surface) ========================================================= */ html[data-theme="dark"] .lp-card, html[data-theme="dark"] .lp-settings-tabs-wrap, html[data-theme="dark"] .lp-settings-card, html[data-theme="dark"] .lp-infobox, html[data-theme="dark"] .lp-perm, html[data-theme="dark"] .lp-list-item, html[data-theme="dark"] .lp-accordion-card, html[data-theme="dark"] .lp-accordion-head, html[data-theme="dark"] .lp-accordion-body, html[data-theme="dark"] .lp-chart-card, html[data-theme="dark"] .lp-vac-card, html[data-theme="dark"] .lp-file-item, html[data-theme="dark"] .lp-file-row, html[data-theme="dark"] .lp-hr-stat, html[data-theme="dark"] .lp-hr-list, html[data-theme="dark"] .lp-hr-wizard, html[data-theme="dark"] .lp-emp-card, html[data-theme="dark"] .lp-emp-detail-body, html[data-theme="dark"] .lp-sick-card, html[data-theme="dark"] .lp-sick-hero-stat, html[data-theme="dark"] .lp-as-card, html[data-theme="dark"] .lp-as-loc-card, html[data-theme="dark"] .lp-md-row, html[data-theme="dark"] .lp-md-add-phase, html[data-theme="dark"] .lp-md-phase-row, html[data-theme="dark"] .lp-dtg-row, html[data-theme="dark"] .lp-dtm-phase-row, html[data-theme="dark"] .lp-dash-quickbar, html[data-theme="dark"] .lp-dash-hcard, html[data-theme="dark"] .lp-dash-panel, html[data-theme="dark"] .lp-dash-mini, html[data-theme="dark"] .lp-dash-agenda-time, html[data-theme="dark"] .lp-note, html[data-theme="dark"] .lp-note-header, html[data-theme="dark"] .lp-note-footer, html[data-theme="dark"] .lp-note-item, html[data-theme="dark"] .lp-note-settings-section, html[data-theme="dark"] .lp-cw, html[data-theme="dark"] .lp-cw-body, html[data-theme="dark"] .lp-hrstats-kpi, html[data-theme="dark"] .lp-hrstats-chart-card, html[data-theme="dark"] .lp-hrstats-details, html[data-theme="dark"] .lp-hrstats-empty, html[data-theme="dark"] .lp-hd-list, html[data-theme="dark"] .lp-hd-empty, html[data-theme="dark"] .lp-hrd-card, html[data-theme="dark"] .lp-hrd-empty, html[data-theme="dark"] .lp-emi-card, html[data-theme="dark"] .fp-kpi, html[data-theme="dark"] .fp-due-banner, html[data-theme="dark"] .fp-table-wrap, html[data-theme="dark"] .fp-modal-box, html[data-theme="dark"] .fp-due-section, html[data-theme="dark"] .det-card, html[data-theme="dark"] .det-mini-box { background: var(--lp-surface); border-color: var(--lp-border); color: var(--lp-text); } /* Aktivitäten-Pager im Dark Mode */ html[data-theme="dark"] .lp-pg { background: var(--lp-surface-2, #1e293b); border-color: var(--lp-border); color: var(--lp-text); } html[data-theme="dark"] button.lp-pg:hover { background: rgba(37,99,235,.2); border-color: #0783ff; color: #93c5fd; } html[data-theme="dark"] .lp-pg--active { background: #0783ff; border-color: #0783ff; color: #fff; } /* Weiche Flächen (#f8fafc / #f1f5f9 / #f7fbff ...) -> Surface-2 */ html[data-theme="dark"] .lp-soft, html[data-theme="dark"] .lp-switch, html[data-theme="dark"] .lp-level-row, html[data-theme="dark"] .lp-supervisor-info, html[data-theme="dark"] .lp-sick-flags-row, html[data-theme="dark"] .lp-hr-link, html[data-theme="dark"] .lp-tile, html[data-theme="dark"] .lp-dash-shortcut, html[data-theme="dark"] .lp-dash-agenda-item, html[data-theme="dark"] .lp-dash-donut-legend > div, html[data-theme="dark"] .lp-dash-panel-meta, html[data-theme="dark"] .lp-as-section, html[data-theme="dark"] .lp-as-loc-edit, html[data-theme="dark"] .lp-md-edit, html[data-theme="dark"] .lp-md-phase-edit, html[data-theme="dark"] .lp-dtg-edit, html[data-theme="dark"] .lp-dep-page-check, html[data-theme="dark"] .lp-emp-mini-card, html[data-theme="dark"] .lp-emp-row { background: var(--lp-surface-2); border-color: var(--lp-border); color: var(--lp-text); } html[data-theme="dark"] .lp-tile-ico { background: var(--lp-surface-3); border-color: var(--lp-border); color: #93c5fd; } /* Tabs (Settings) */ html[data-theme="dark"] .lp-tab { background: var(--lp-surface-2); color: var(--lp-text); } html[data-theme="dark"] .lp-tab:hover { background: var(--lp-surface-3); } html[data-theme="dark"] .lp-tab.active { background: var(--lp-surface); } html[data-theme="dark"] .lp-settings-mini { border-left-color: var(--lp-border); color: var(--lp-text); } html[data-theme="dark"] .lp-settings-mini:hover { background: var(--lp-surface-3); } html[data-theme="dark"] .lp-settings-mini-name { color: var(--lp-text); } html[data-theme="dark"] .lp-settings-mini-role { color: var(--lp-text-muted, #94a3b8); } /* App-Settings-Tabs / Buttons */ html[data-theme="dark"] .lp-as-tab, html[data-theme="dark"] .lp-as-edit-btn, html[data-theme="dark"] .lp-as-cancel-btn { background: var(--lp-surface); color: var(--lp-text); border-color: var(--lp-border); } /* Profil-Panel (lila getönt) – Hintergrund leicht dunkel, Text hell */ html[data-theme="dark"] .lp-panel, html[data-theme="dark"] .lp-panel--purple { background: linear-gradient(180deg, rgba(124, 58, 237, .12), rgba(124, 58, 237, .04)); border-color: rgba(124, 58, 237, .45); } html[data-theme="dark"] .lp-panel--green { background: linear-gradient(180deg, rgba(34, 197, 94, .12), rgba(34, 197, 94, .04)); border-color: rgba(34, 197, 94, .4); } /* Avatar-Rahmen */ html[data-theme="dark"] .lp-avatar { border-color: var(--lp-border); background: var(--lp-surface-2); } /* ========================================================= Texte (explizite dunkle Hex-Farben -> hell) ========================================================= */ html[data-theme="dark"] .lp-label, html[data-theme="dark"] .lp-card-title, html[data-theme="dark"] .lp-list-title, html[data-theme="dark"] .lp-tile-title, html[data-theme="dark"] .lp-file-title, html[data-theme="dark"] .lp-profile-name, html[data-theme="dark"] .lp-profile-role, html[data-theme="dark"] .lp-panel-title, html[data-theme="dark"] .lp-switch-title, html[data-theme="dark"] .lp-perm-text, html[data-theme="dark"] .lp-act-title, html[data-theme="dark"] .lp-ibox-value, html[data-theme="dark"] .lp-level-title, html[data-theme="dark"] .lp-vac-card-dates, html[data-theme="dark"] .lp-chart-title, html[data-theme="dark"] .lp-supervisor-info-title, html[data-theme="dark"] .lp-wf-title, html[data-theme="dark"] .lp-as-section-head, html[data-theme="dark"] .lp-as-loc-name, html[data-theme="dark"] .lp-md-phase-name, html[data-theme="dark"] .lp-dtg-code, html[data-theme="dark"] .lp-dtg-name, html[data-theme="dark"] .lp-dt-group-name, html[data-theme="dark"] .lp-dash-hcard-val, html[data-theme="dark"] .lp-dash-agenda-time, html[data-theme="dark"] .lp-dash-agenda-title, html[data-theme="dark"] .lp-emp-row-name, html[data-theme="dark"] .lp-emp-info-val, html[data-theme="dark"] .lp-emp-stat-val, html[data-theme="dark"] .lp-emp-mini-card-val, html[data-theme="dark"] .lp-hr-row-name, html[data-theme="dark"] .lp-check .form-check-label, html[data-theme="dark"] .lp-hr-page-title { color: var(--lp-text); } /* Gedämpfte Texte vereinheitlichen */ html[data-theme="dark"] .lp-muted, html[data-theme="dark"] .lp-hint, html[data-theme="dark"] .lp-card-sub, html[data-theme="dark"] .lp-tile-sub, html[data-theme="dark"] .lp-list-sub, html[data-theme="dark"] .lp-switch-sub, html[data-theme="dark"] .lp-file-sub, html[data-theme="dark"] .lp-profile-mail, html[data-theme="dark"] .lp-as-label, html[data-theme="dark"] .lp-as-hint { color: var(--lp-muted); } /* ========================================================= Generisches Sicherheitsnetz für Module ohne CSS-Variablen (Auftrag/Kalender/Versicherung/Kunden/Leihwagen/Auslastung ...). :not([class*="--"]) lässt farbige BEM-Varianten (z.B. --blue, --red) in Ruhe, damit farbige Badges/Karten erhalten bleiben. ========================================================= */ html[data-theme="dark"] [class*="-card"]:not([class*="--"]):not([class*="eng-card"]):not([class*="hcard"]), html[data-theme="dark"] [class*="-panel"]:not([class*="--"]):not([class*="overlay"]), html[data-theme="dark"] [class*="-box"]:not([class*="--"]):not([class*="timebox"]):not([class*="combobox"]), html[data-theme="dark"] [class*="-table-wrap"]:not([class*="--"]), html[data-theme="dark"] [class*="-sheet"]:not([class*="--"]), html[data-theme="dark"] [class*="-list-card"]:not([class*="--"]) { background-color: var(--lp-surface); border-color: var(--lp-border); color: var(--lp-text); } /* Popover/Overlay-Karten (Erinnerungen, Nachtrag etc.) */ html[data-theme="dark"] .lp-checkin-prompt-card, html[data-theme="dark"] .lp-time-reminder-card, html[data-theme="dark"] .lp-pending-co-card, html[data-theme="dark"] .lp-dialog, html[data-theme="dark"] .lp-dialog-box, html[data-theme="dark"] .lp-loc-picker-menu { background: var(--lp-surface); color: var(--lp-text); border-color: var(--lp-border); } /* ========================================================= Mitarbeiter-Einstellungen (Preferences) – Toggle-Größe (theme-unabhängig, daher hier kompakt mitgeführt) ========================================================= */ .lp-pref-switch { align-items: center; } .lp-pref-switch .lp-pref-ico { font-size: 24px; color: #7c3aed; flex: 0 0 auto; } .lp-pref-grow { flex: 1; min-width: 0; } .lp-pref-toggle { padding-left: 2.8em; } .lp-pref-toggle .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; } /* ========================================================= Module-Abdeckung: Aufträge / Versicherung / Kunden / HR-Konsole / Fuhrpark / Kalender / Leihwagen / Auslastung ========================================================= */ /* --- weiße Flächen -> Surface --- */ html[data-theme="dark"] .ord-tabs, html[data-theme="dark"] .ord-daynav, html[data-theme="dark"] .ord-table-card, html[data-theme="dark"] .ord-orphan-card, html[data-theme="dark"] .ord-kpi, html[data-theme="dark"] .ord-stepper-card, html[data-theme="dark"] .ord-card, html[data-theme="dark"] .ord-monitor-card, html[data-theme="dark"] .ord-paint-card, html[data-theme="dark"] .ord-scope-card, html[data-theme="dark"] .ord-scope-chip, html[data-theme="dark"] .ord-scope-hint, html[data-theme="dark"] .ord-week-col, html[data-theme="dark"] .ord-drop-overlay-inner, html[data-theme="dark"] .ord-presence-modal-card, html[data-theme="dark"] .ord-presence-note, html[data-theme="dark"] .lp-docview-filecard, html[data-theme="dark"] .lp-gal-item, html[data-theme="dark"] .ins-index-table, html[data-theme="dark"] .ins-detail-card, html[data-theme="dark"] .ins-import-card, html[data-theme="dark"] .sim-card, html[data-theme="dark"] .ins-btn-create, html[data-theme="dark"] .cu-table, html[data-theme="dark"] .lp-hrc-header-cta, html[data-theme="dark"] .lp-hrc-stat6, html[data-theme="dark"] .lp-hrc-table-wrap, html[data-theme="dark"] .lp-hrc-profile-card, html[data-theme="dark"] .lp-hrc-detail-card, html[data-theme="dark"] .lp-hrc-appr-stat, html[data-theme="dark"] .lp-hrc-modal, html[data-theme="dark"] .fp-due-banner, html[data-theme="dark"] .fp-due-section, html[data-theme="dark"] .det-card, html[data-theme="dark"] .det-mini-box { background-color: var(--lp-surface) !important; border-color: var(--lp-border) !important; color: var(--lp-text); } /* --- weiche Flächen -> Surface-2 --- */ html[data-theme="dark"] .ord-filter-panel, html[data-theme="dark"] .cu-kpi, html[data-theme="dark"] .cu-quick-action, html[data-theme="dark"] .det-defect-card, html[data-theme="dark"] .det-info-box, html[data-theme="dark"] .wiz-summary-box, html[data-theme="dark"] .wiz-info-box, html[data-theme="dark"] .lp-team-col, html[data-theme="dark"] .lp-eng-voters, html[data-theme="dark"] .lp-as-collapsible, html[data-theme="dark"] .lp-as-empty { background-color: var(--lp-surface-2) !important; border-color: var(--lp-border) !important; color: var(--lp-text); } /* --- "Was wird gemacht?" — Auswahlkarten & Chips --- */ html[data-theme="dark"] .ord-scope-title { color: var(--lp-text); } html[data-theme="dark"] .ord-scope-sub, html[data-theme="dark"] .ord-scope-hint { color: var(--lp-muted); } html[data-theme="dark"] .ord-scope-hint { background-color: var(--lp-surface-2) !important; } html[data-theme="dark"] .ord-scope-card:hover { background-color: var(--lp-surface-3) !important; } html[data-theme="dark"] .ord-scope-check { background-color: var(--lp-surface-2); border-color: var(--lp-border); } /* aktive Karte behält den grünen Zustand -> dunkle Schrift bleibt lesbar */ html[data-theme="dark"] .ord-scope-card.active { background: linear-gradient(135deg,#14532d,#166534) !important; border-color:#22c55e !important; } html[data-theme="dark"] .ord-scope-card.active .ord-scope-title { color:#dcfce7; } html[data-theme="dark"] .ord-scope-card.active .ord-scope-sub { color:#86efac; } html[data-theme="dark"] .ord-scope-card.active .ord-scope-icon { color:#4ade80; } html[data-theme="dark"] .ord-scope-card.active .ord-scope-check { background-color:#22c55e; border-color:#22c55e; } html[data-theme="dark"] .ord-scope-chip { color: var(--lp-text); } html[data-theme="dark"] .ord-scope-chip i { color: var(--lp-muted); } html[data-theme="dark"] .ord-scope-chip-service { background-color: rgba(59,130,246,.15) !important; border-color: rgba(59,130,246,.4) !important; color:#93c5fd; } html[data-theme="dark"] .ord-scope-chip-service i { color:#60a5fa; } /* --- Custom-Tabellen dieser Module --- */ html[data-theme="dark"] .ord-table, html[data-theme="dark"] .ord-orphan-table, html[data-theme="dark"] .cu-table, html[data-theme="dark"] .lp-hrc-table { color: var(--lp-text); } html[data-theme="dark"] .ord-table th, html[data-theme="dark"] .ord-table td, html[data-theme="dark"] .cu-table th, html[data-theme="dark"] .cu-table td, html[data-theme="dark"] .lp-hrc-table th, html[data-theme="dark"] .lp-hrc-table td { border-color: var(--lp-border); } html[data-theme="dark"] .ord-table thead th, html[data-theme="dark"] .cu-table thead th, html[data-theme="dark"] .lp-hrc-table thead tr, html[data-theme="dark"] .fp-table th { background-color: var(--lp-surface-2) !important; color: var(--lp-text); } html[data-theme="dark"] .ord-table tr:hover td, html[data-theme="dark"] .cu-table tr:hover, html[data-theme="dark"] .fp-table tr.fp-row:hover { background-color: var(--lp-surface-3) !important; } /* ========================================================= Generisches Sicherheitsnetz (erweitert) für Flächen in Modulen ohne CSS-Variablen. :not([class*="--"]) schützt farbige BEM-Varianten. ========================================================= */ html[data-theme="dark"] [class*="-card"]:not([class*="--"]):not([class*="eng-card"]):not([class*="hcard"]), html[data-theme="dark"] [class*="-table-card"]:not([class*="--"]), html[data-theme="dark"] [class*="-table-wrap"]:not([class*="--"]), html[data-theme="dark"] [class*="-kpi"]:not([class*="--"]):not([class*="label"]):not([class*="val"]), html[data-theme="dark"] [class*="-modal"]:not([class*="--"]):not([class*="backdrop"]):not([class*="overlay"]), html[data-theme="dark"] [class*="-stepper-card"]:not([class*="--"]), html[data-theme="dark"] [class*="-monitor-card"]:not([class*="--"]), html[data-theme="dark"] [class*="-week-col"]:not([class*="--"]) { background-color: var(--lp-surface); border-color: var(--lp-border); color: var(--lp-text); } /* ========================================================= Text-Sicherheitsnetz (primärer Text -> hell, Sekundär -> gedämpft). Gradient-Hero-Texte (eigene helle Farbe) sind ausgenommen. ========================================================= */ html[data-theme="dark"] [class*="-title"]:not([class*="--"]):not([class*="hero"]):not([class*="area"]), html[data-theme="dark"] [class*="-name"]:not([class*="--"]):not([class*="hero"]), html[data-theme="dark"] [class*="-cell"]:not([class*="--"]), html[data-theme="dark"] [class*="-dates"]:not([class*="--"]), html[data-theme="dark"] [class*="-val"]:not([class*="--"]):not([class*="interval"]):not([class*="hero"]):not([class*="vac-stat"]) { color: var(--lp-text); } html[data-theme="dark"] [class*="-label"]:not([class*="--"]):not(.form-label):not([class*="hero"]):not([class*="area"]), html[data-theme="dark"] [class*="-hint"]:not([class*="--"]), html[data-theme="dark"] [class*="-meta"]:not([class*="--"]):not([class*="hero"]) { color: var(--lp-muted); } /* --- Spezifische Text-Klassen, die das Substring-Netz nicht erfasst --- */ html[data-theme="dark"] .ord-day, html[data-theme="dark"] .ord-appt-date, html[data-theme="dark"] .ord-kv .v, html[data-theme="dark"] .ord-monitor-card .mc-num, html[data-theme="dark"] .ord-monitor-card .mc-customer, html[data-theme="dark"] .ord-week-cust, html[data-theme="dark"] .ord-transferred-customer, html[data-theme="dark"] .ord-history-person strong, html[data-theme="dark"] .ord-vmodal-list li, html[data-theme="dark"] .lp-hrc-header-cta, html[data-theme="dark"] .bp-cat-tab, html[data-theme="dark"] .lp-hrc-detail-tab, html[data-theme="dark"] .vac-filter-tab, html[data-theme="dark"] .rc-info-grid > div > div, html[data-theme="dark"] .rc-due-date, html[data-theme="dark"] .rc-defect-desc, html[data-theme="dark"] .lp-msg-text { color: var(--lp-text); } /* Chat- & Notiz-Widget besitzen eigene Dark-Varianten (per JS aktiviert). Damit die FAB-Buttons im Dark-Theme passen: */ html[data-theme="dark"] .lp-msg-order-card-num { color: var(--lp-text); } /* ===== Dashboard-Shortcuts (Admin Icon-Picker + Mitarbeiter-Auswahl) ===== */ html[data-theme="dark"] .lp-sc-iconpicker { background: #0f172a; border-color: var(--lp-border); } html[data-theme="dark"] .lp-sc-icon-tile { background: var(--lp-card); border-color: var(--lp-border); color: var(--lp-muted); } html[data-theme="dark"] .lp-sc-icon-tile.is-active { background: #1e3a5f; color: #93c5fd; border-color: #3399ff; } html[data-theme="dark"] .lp-sc-pref-col { background: #0f172a; border-color: var(--lp-border); } html[data-theme="dark"] .lp-sc-chip { background: var(--lp-card); border-color: var(--lp-border); } html[data-theme="dark"] .lp-sc-chip-label { color: var(--lp-text); } html[data-theme="dark"] .lp-sc-pref-count { background: #1e3a5f; border-color: #3399ff; color: #bfdbfe; } html[data-theme="dark"] .lp-dash-quickbar-empty { background: linear-gradient(135deg, #172554, #1e293b); border-color: #0656b0; color: #bfdbfe !important; } /* ===== Angemeldete Geräte / aktive Sitzungen ===== */ html[data-theme="dark"] .lp-session { background: var(--lp-card); border-color: var(--lp-border); } html[data-theme="dark"] .lp-session--current { background: #0f2a1c; border-color: #166534; } html[data-theme="dark"] .lp-session-ico { background: #1e293b; color: #93c5fd; } html[data-theme="dark"] .lp-session--current .lp-session-ico { background: #14331f; color: #4ade80; } html[data-theme="dark"] .lp-session-name { color: var(--lp-text); } html[data-theme="dark"] .lp-session-meta { color: #94a3b8; } html[data-theme="dark"] .lp-session-badge { background: #14331f; border-color: #166534; color: #4ade80; } html[data-theme="dark"] .lp-session-logout { background: #3a1414; border-color: #7f1d1d; color: #fca5a5; } html[data-theme="dark"] .lp-session-logout:hover { background: #dc2626; color: #fff; } html[data-theme="dark"] .lp-danger-ghost-btn { background: var(--lp-card); border-color: #7f1d1d; color: #fca5a5; } html[data-theme="dark"] .lp-danger-ghost-btn:hover { background: #3a1414; color: #fca5a5; } /* --- Kalkulation & Freigabe (Dark) --- */ html[data-theme="dark"] .ord-calc-block--calc { background-color: rgba(124,58,237,.12) !important; border-color: rgba(124,58,237,.35) !important; } html[data-theme="dark"] .ord-calc-block--approval { background-color: rgba(7,131,255,.12) !important; border-color: rgba(7,131,255,.35) !important; } html[data-theme="dark"] .ord-calc-input { background-color: var(--lp-surface-2) !important; color: var(--lp-text) !important; } html[data-theme="dark"] .ord-calc-amount { color:#c4b5fd; } html[data-theme="dark"] .ord-calc-amount--approval { color:#7cc0ff; } html[data-theme="dark"] .ord-calc-block--approval .ord-calc-meta { color:#93c5fd; } html[data-theme="dark"] .ord-calc-rework, html[data-theme="dark"] .ord-rework-badge { background-color: rgba(220,38,38,.15) !important; border-color: rgba(220,38,38,.45) !important; color:#fca5a5 !important; } html[data-theme="dark"] .ord-calc-rework-title { color:#fca5a5; } html[data-theme="dark"] .ord-calc-rework-text { color:#fecaca; } /* --- Teile-Bestellung Straße (Dark) --- */ html[data-theme="dark"] .ord-parts-panel, html[data-theme="dark"] .ord-parts-pop { background-color: var(--lp-surface) !important; border-color: var(--lp-border) !important; color: var(--lp-text); } html[data-theme="dark"] .ord-parts-panel-item, html[data-theme="dark"] .ord-parts-mini { background-color: var(--lp-surface-2) !important; border-color: var(--lp-border) !important; } html[data-theme="dark"] .ord-parts-mini-row { color: var(--lp-text); } html[data-theme="dark"] .ord-parts-pop-date { background-color: var(--lp-surface-2) !important; color: var(--lp-text) !important; border-color: var(--lp-border) !important; } html[data-theme="dark"] .ord-parts-set-btn { background-color: rgba(7,131,255,.15) !important; } html[data-theme="dark"] .ord-parts-mini.parts-overdue, html[data-theme="dark"] .ord-parts-mini.parts-due { background-color: rgba(220,38,38,.14) !important; border-color: rgba(220,38,38,.4) !important; } html[data-theme="dark"] .ord-parts-mini.parts-soon, html[data-theme="dark"] .ord-parts-mini.parts-plan { background-color: rgba(245,158,11,.14) !important; border-color: rgba(245,158,11,.4) !important; } html[data-theme="dark"] .ord-parts-mini.parts-scheduled { background-color: rgba(16,185,129,.14) !important; border-color: rgba(16,185,129,.4) !important; } /* ===== Termin-Typ-Chips in den Auftragsübersichten ===== */ html[data-theme="dark"] .ord-appt-type--inspection, html[data-theme="dark"] .ord-week-type--inspection { background-color: rgba(7,131,255,.18) !important; color: #93c5fd !important; border-color: rgba(7,131,255,.45) !important; } html[data-theme="dark"] .ord-appt-type--intake, html[data-theme="dark"] .ord-week-type--intake { background-color: var(--lp-surface-2) !important; color: var(--lp-muted) !important; border-color: var(--lp-border) !important; } html[data-theme="dark"] .ord-appt-type--transport, html[data-theme="dark"] .ord-week-type--transport { background-color: rgba(14,165,233,.18) !important; color: #7dd3fc !important; border-color: rgba(14,165,233,.45) !important; } html[data-theme="dark"] .ord-week-status { color: var(--lp-muted); } /* --- Automarken-Katalog (Dark) --- */ html[data-theme="dark"] .lp-brand-item { background-color: var(--lp-surface-2) !important; border-color: var(--lp-border) !important; } html[data-theme="dark"] .lp-brand-models { background-color: var(--lp-surface) !important; border-color: var(--lp-border) !important; } html[data-theme="dark"] .lp-brand-toggle:hover { background-color: rgba(148,163,184,.15); } html[data-theme="dark"] .lp-brand-meta { color: var(--lp-text-muted, #94a3b8); }