/* ============================================================ Ines4 Dark Mode Aktiviert ausschließlich manuell über die Klasse `ines4-dark` auf (Schalter im Sidebar-Footer, persistiert in localStorage['ines4_theme']). KEIN prefers-color-scheme — der Modus folgt nie den Systemeinstellungen. Technik: app.css ist ein gepurgter Tailwind-v4-Build; dessen Utilities liegen in @layer. Die Regeln hier sind unlayered und gewinnen daher ohne !important (außer gegen !important-Regeln aus overrides.css — dort wird gezielt gekontert). Ausnahme: Die Papier-Vorschauen (Exposé, CV-PDF) bleiben hell, sie simulieren die gedruckte Seite. ============================================================ */ html.ines4-dark { color-scheme: dark; /* Flächen */ --i4d-page: #0b1120; /* Seitenhintergrund */ --i4d-card: #1e293b; /* Karten / bg-white */ --i4d-elev: #263349; /* gray-50: Sektionen, Tabellenköpfe, Hover */ --i4d-elev2: #2d3c55; /* gray-100 */ --i4d-elev3: #33435e; /* gray-200 */ --i4d-input: #17223a; /* Formularfelder */ /* Linien */ --i4d-border-soft: #283850; /* gray-100 */ --i4d-border: #334155; /* gray-200 / slate-200 */ --i4d-border-strong: #46587a; /* gray-300 */ /* Text */ --i4d-text: #f1f5f9; /* gray-900 */ --i4d-text-2: #e2e8f0; /* gray-800 */ --i4d-text-3: #cbd5e1; /* gray-700 */ --i4d-text-4: #a3b1c6; /* gray-600 */ --i4d-text-5: #8b9bb3; /* gray-500 */ --i4d-text-6: #64748b; /* gray-400 */ } html.ines4-dark, html.ines4-dark body { background-color: var(--i4d-page); color: var(--i4d-text-2); } /* Semantische shadcn-Theme-Variablen aus app.css (bg-card, text-muted-foreground, border-input …) auf die Dark-Palette umstellen. */ html.ines4-dark { --background: #0b1120; --foreground: #e2e8f0; --card: #1e293b; --card-foreground: #e2e8f0; --popover: #1e293b; --popover-foreground: #e2e8f0; --primary: #f1f5f9; --primary-foreground: #16213a; --secondary: #263349; --secondary-foreground: #f1f5f9; --muted: #263349; --muted-foreground: #8b9bb3; --accent: #263349; --accent-foreground: #f1f5f9; --destructive: #7f1d1d; --destructive-foreground: #fecaca; --border: rgba(148, 163, 184, 0.22); --input: rgba(148, 163, 184, 0.28); --input-background: #17223a; --ring: #64748b; } /* App-Shell & Login: heller Verlauf -> flächiges Dunkel */ html.ines4-dark #ines4-app-shell, html.ines4-dark body.bg-gradient-to-br { background-image: none; background-color: var(--i4d-page); } /* ------------------------------------------------------------ Neutrale Hintergründe ------------------------------------------------------------ */ html.ines4-dark .bg-white { background-color: var(--i4d-card); } html.ines4-dark .bg-white\/90 { background-color: rgba(30, 41, 59, 0.92); } html.ines4-dark .bg-gray-50 { background-color: var(--i4d-elev); } html.ines4-dark .bg-gray-50\/80 { background-color: rgba(38, 51, 73, 0.8); } html.ines4-dark .bg-gray-50\/70 { background-color: rgba(38, 51, 73, 0.7); } html.ines4-dark .bg-gray-50\/40 { background-color: rgba(38, 51, 73, 0.4); } html.ines4-dark .bg-gray-100 { background-color: var(--i4d-elev2); } html.ines4-dark .bg-gray-200 { background-color: var(--i4d-elev3); } html.ines4-dark .bg-gray-300 { background-color: #3b4d6b; } html.ines4-dark .bg-gray-400 { background-color: #475569; } html.ines4-dark .bg-slate-50 { background-color: var(--i4d-elev); } html.ines4-dark .bg-slate-50\/80 { background-color: rgba(38, 51, 73, 0.8); } html.ines4-dark .bg-slate-100 { background-color: var(--i4d-elev2); } html.ines4-dark .bg-slate-200 { background-color: var(--i4d-elev3); } /* Modal-Backdrop: kräftiger abdunkeln */ html.ines4-dark .bg-slate-900\/55 { background-color: rgba(2, 6, 23, 0.72); } /* ------------------------------------------------------------ Farbige Tint-Hintergründe (50er/100er) ------------------------------------------------------------ */ html.ines4-dark .bg-blue-50 { background-color: #1d2f4f; } html.ines4-dark .bg-blue-50\/80 { background-color: rgba(29, 47, 79, 0.8); } html.ines4-dark .bg-blue-50\/30 { background-color: rgba(29, 47, 79, 0.35); } html.ines4-dark .bg-blue-100 { background-color: #234067; } html.ines4-dark .bg-red-50 { background-color: #3b1f26; } html.ines4-dark .bg-red-50\/30 { background-color: rgba(59, 31, 38, 0.35); } html.ines4-dark .bg-red-100 { background-color: #55232d; } html.ines4-dark .bg-green-50 { background-color: #152e20; } html.ines4-dark .bg-green-100 { background-color: #1d4229; } html.ines4-dark .bg-emerald-50 { background-color: #132e27; } html.ines4-dark .bg-emerald-100 { background-color: #1b4438; } html.ines4-dark .bg-amber-50 { background-color: #392c14; } html.ines4-dark .bg-amber-100 { background-color: #4a3a1c; } html.ines4-dark .bg-yellow-50 { background-color: #393214; } html.ines4-dark .bg-purple-50 { background-color: #2c2148; } html.ines4-dark .bg-indigo-50 { background-color: #232853; } html.ines4-dark .bg-indigo-100 { background-color: #2d3468; } html.ines4-dark .bg-violet-50 { background-color: #2a2151; } html.ines4-dark .bg-violet-100 { background-color: #362b66; } html.ines4-dark .bg-rose-50 { background-color: #3c1f2c; } html.ines4-dark .bg-rose-100 { background-color: #542639; } html.ines4-dark .bg-orange-50 { background-color: #3d2817; } /* Kräftige Vollflächen (Buttons, Badges, Balken) bleiben unverändert: bg-blue-500/600/700, bg-red-400..700, bg-green-500/600, bg-amber-400/500, bg-emerald-600, bg-purple-500, bg-slate-600 … funktionieren auf Dunkel. */ /* ------------------------------------------------------------ Textfarben — Neutrale ------------------------------------------------------------ */ html.ines4-dark .text-gray-900 { color: var(--i4d-text); } html.ines4-dark .text-gray-800 { color: var(--i4d-text-2); } html.ines4-dark .text-gray-700 { color: var(--i4d-text-3); } html.ines4-dark .text-gray-600 { color: var(--i4d-text-4); } html.ines4-dark .text-gray-500 { color: var(--i4d-text-5); } html.ines4-dark .text-gray-400 { color: var(--i4d-text-6); } html.ines4-dark .text-gray-300 { color: #475569; } html.ines4-dark .text-slate-900 { color: var(--i4d-text); } html.ines4-dark .text-slate-800 { color: var(--i4d-text-2); } html.ines4-dark .text-slate-700 { color: var(--i4d-text-3); } html.ines4-dark .text-slate-600 { color: var(--i4d-text-4); } html.ines4-dark .text-slate-500 { color: var(--i4d-text-5); } html.ines4-dark .text-slate-400 { color: var(--i4d-text-6); } /* ------------------------------------------------------------ Textfarben — Akzente (heller gemappt) ------------------------------------------------------------ */ html.ines4-dark .text-blue-400 { color: #60a5fa; } html.ines4-dark .text-blue-500 { color: #60a5fa; } html.ines4-dark .text-blue-600 { color: #60a5fa; } html.ines4-dark .text-blue-700 { color: #93c5fd; } html.ines4-dark .text-blue-800 { color: #bfdbfe; } html.ines4-dark .text-blue-900 { color: #dbeafe; } html.ines4-dark .text-red-400 { color: #f87171; } html.ines4-dark .text-red-500 { color: #f87171; } html.ines4-dark .text-red-600 { color: #f87171; } html.ines4-dark .text-red-700 { color: #fca5a5; } html.ines4-dark .text-red-700\/90 { color: rgba(252, 165, 165, 0.9); } html.ines4-dark .text-red-800 { color: #fecaca; } html.ines4-dark .text-red-900 { color: #fee2e2; } html.ines4-dark .text-red-950 { color: #fee2e2; } html.ines4-dark .text-green-400 { color: #4ade80; } html.ines4-dark .text-green-500 { color: #4ade80; } html.ines4-dark .text-green-600 { color: #4ade80; } html.ines4-dark .text-green-700 { color: #86efac; } html.ines4-dark .text-green-800 { color: #bbf7d0; } html.ines4-dark .text-green-900 { color: #dcfce7; } html.ines4-dark .text-emerald-600 { color: #34d399; } html.ines4-dark .text-emerald-700 { color: #6ee7b7; } html.ines4-dark .text-emerald-800 { color: #a7f3d0; } html.ines4-dark .text-emerald-900 { color: #d1fae5; } html.ines4-dark .text-amber-400 { color: #fbbf24; } html.ines4-dark .text-amber-500 { color: #fbbf24; } html.ines4-dark .text-amber-600 { color: #fbbf24; } html.ines4-dark .text-amber-700 { color: #fcd34d; } html.ines4-dark .text-amber-800 { color: #fde68a; } html.ines4-dark .text-amber-900 { color: #fef3c7; } html.ines4-dark .text-amber-950 { color: #fef3c7; } html.ines4-dark .text-yellow-500 { color: #facc15; } html.ines4-dark .text-yellow-700 { color: #fde047; } html.ines4-dark .text-purple-400 { color: #c084fc; } html.ines4-dark .text-purple-500 { color: #c084fc; } html.ines4-dark .text-purple-600 { color: #c084fc; } html.ines4-dark .text-purple-700 { color: #d8b4fe; } html.ines4-dark .text-purple-900 { color: #f3e8ff; } html.ines4-dark .text-indigo-500 { color: #818cf8; } html.ines4-dark .text-indigo-600 { color: #818cf8; } html.ines4-dark .text-indigo-700 { color: #a5b4fc; } html.ines4-dark .text-indigo-900 { color: #e0e7ff; } html.ines4-dark .text-violet-500 { color: #a78bfa; } html.ines4-dark .text-violet-700 { color: #c4b5fd; } html.ines4-dark .text-violet-800 { color: #ddd6fe; } html.ines4-dark .text-rose-700 { color: #fda4af; } html.ines4-dark .text-orange-400 { color: #fb923c; } html.ines4-dark .text-orange-500 { color: #fb923c; } html.ines4-dark .text-orange-600 { color: #fb923c; } html.ines4-dark .text-orange-700 { color: #fdba74; } /* ------------------------------------------------------------ Rahmen / Trennlinien ------------------------------------------------------------ */ html.ines4-dark .border-gray-50 { border-color: #243248; } html.ines4-dark .border-gray-100 { border-color: var(--i4d-border-soft); } html.ines4-dark .border-gray-200 { border-color: var(--i4d-border); } html.ines4-dark .border-gray-300 { border-color: var(--i4d-border-strong); } html.ines4-dark .border-gray-400 { border-color: #54688c; } html.ines4-dark .border-slate-100 { border-color: var(--i4d-border-soft); } html.ines4-dark .border-slate-200 { border-color: var(--i4d-border); } html.ines4-dark .border-slate-300 { border-color: var(--i4d-border-strong); } html.ines4-dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: #243248; } html.ines4-dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--i4d-border-soft); } html.ines4-dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--i4d-border); } html.ines4-dark .border-blue-100 { border-color: #1e3a66; } html.ines4-dark .border-blue-200 { border-color: #2c4a77; } html.ines4-dark .border-blue-300 { border-color: #365a8c; } html.ines4-dark .border-blue-400 { border-color: #3f6ba3; } html.ines4-dark .border-red-100 { border-color: #55232d; } html.ines4-dark .border-red-200 { border-color: #6b2f3a; } html.ines4-dark .border-red-300 { border-color: #82404c; } html.ines4-dark .border-green-100 { border-color: #1d4429; } html.ines4-dark .border-green-200 { border-color: #245a35; } html.ines4-dark .border-green-300 { border-color: #2f7043; } html.ines4-dark .border-emerald-100 { border-color: #1c4437; } html.ines4-dark .border-emerald-200 { border-color: #245a49; } html.ines4-dark .border-amber-100 { border-color: #54401a; } html.ines4-dark .border-amber-200 { border-color: #6b5220; } html.ines4-dark .border-amber-300 { border-color: #7d6126; } html.ines4-dark .border-amber-400 { border-color: #b45309; } html.ines4-dark .border-yellow-200 { border-color: #5c4d1d; } html.ines4-dark .border-purple-100 { border-color: #3c2a5e; } html.ines4-dark .border-purple-200 { border-color: #4c3573; } html.ines4-dark .border-purple-300 { border-color: #5d4390; } html.ines4-dark .border-indigo-200 { border-color: #3b3f78; } html.ines4-dark .border-indigo-300 { border-color: #4a4f95; } html.ines4-dark .border-violet-200 { border-color: #43307a; } html.ines4-dark .border-violet-300 { border-color: #533d96; } html.ines4-dark .border-rose-200 { border-color: #5e2940; } /* border-red-500/600/700, border-green-500/600, border-blue-500/600, border-amber-500/600, border-orange-600/700 bleiben unverändert. */ /* Ringe */ html.ines4-dark .ring-blue-100 { --tw-ring-color: #1e3a66; } /* ------------------------------------------------------------ Gradient-Stützpunkte (Tailwind v4 Variablen) ------------------------------------------------------------ */ html.ines4-dark .from-blue-50 { --tw-gradient-from: #1d2f4f; } html.ines4-dark .from-green-50 { --tw-gradient-from: #152e20; } html.ines4-dark .from-slate-100 { --tw-gradient-from: var(--i4d-elev2); } html.ines4-dark .via-white { --tw-gradient-via: var(--i4d-card); } html.ines4-dark .to-purple-50 { --tw-gradient-to: #2c2148; } html.ines4-dark .to-slate-50 { --tw-gradient-to: var(--i4d-elev); } html.ines4-dark .to-emerald-50 { --tw-gradient-to: #132e27; } /* ------------------------------------------------------------ Hover-Varianten (müssen nach den Basis-Overrides stehen) ------------------------------------------------------------ */ html.ines4-dark .hover\:bg-gray-50:hover { background-color: var(--i4d-elev); } html.ines4-dark .hover\:bg-gray-100:hover { background-color: var(--i4d-elev2); } html.ines4-dark .hover\:bg-gray-200:hover { background-color: var(--i4d-elev3); } html.ines4-dark .hover\:bg-gray-300:hover { background-color: #3b4d6b; } html.ines4-dark .hover\:bg-slate-50:hover { background-color: var(--i4d-elev); } html.ines4-dark .hover\:bg-slate-100:hover { background-color: var(--i4d-elev2); } html.ines4-dark .hover\:bg-slate-200:hover { background-color: var(--i4d-elev3); } html.ines4-dark .hover\:bg-blue-50:hover { background-color: #1d2f4f; } html.ines4-dark .hover\:bg-blue-100:hover { background-color: #234067; } html.ines4-dark .hover\:bg-red-50:hover { background-color: #3b1f26; } html.ines4-dark .hover\:bg-red-100:hover { background-color: #55232d; } html.ines4-dark .hover\:bg-green-50:hover { background-color: #152e20; } html.ines4-dark .hover\:bg-amber-50:hover { background-color: #392c14; } html.ines4-dark .hover\:bg-amber-100:hover { background-color: #4a3a1c; } html.ines4-dark .hover\:bg-violet-100:hover { background-color: #362b66; } html.ines4-dark .hover\:bg-indigo-100:hover { background-color: #2d3468; } html.ines4-dark .hover\:bg-orange-50:hover { background-color: #3d2817; } html.ines4-dark .hover\:text-gray-700:hover { color: var(--i4d-text-3); } html.ines4-dark .hover\:text-gray-900:hover { color: var(--i4d-text); } html.ines4-dark .hover\:text-slate-600:hover { color: var(--i4d-text-4); } html.ines4-dark .hover\:text-blue-600:hover { color: #60a5fa; } html.ines4-dark .hover\:text-blue-700:hover { color: #93c5fd; } html.ines4-dark .hover\:text-blue-800:hover { color: #bfdbfe; } html.ines4-dark .hover\:text-blue-900:hover { color: #dbeafe; } html.ines4-dark .hover\:text-red-500:hover { color: #f87171; } html.ines4-dark .hover\:text-red-600:hover { color: #f87171; } html.ines4-dark .hover\:text-red-700:hover { color: #fca5a5; } html.ines4-dark .hover\:border-gray-300:hover { border-color: var(--i4d-border-strong); } html.ines4-dark .hover\:border-gray-400:hover { border-color: #54688c; } html.ines4-dark .hover\:border-blue-300:hover { border-color: #365a8c; } html.ines4-dark .hover\:border-red-300:hover { border-color: #82404c; } html.ines4-dark .hover\:border-green-300:hover { border-color: #2f7043; } html.ines4-dark .hover\:border-amber-300:hover { border-color: #7d6126; } html.ines4-dark .hover\:border-purple-300:hover { border-color: #5d4390; } html.ines4-dark .hover\:border-indigo-300:hover { border-color: #4a4f95; } /* Disabled-Varianten */ html.ines4-dark .disabled\:bg-slate-200:disabled { background-color: var(--i4d-elev2); } html.ines4-dark .disabled\:bg-gray-300:disabled { background-color: #3b4d6b; } html.ines4-dark .disabled\:text-slate-500:disabled { color: #7c8ba1; } html.ines4-dark .disabled\:text-gray-500:disabled { color: #7c8ba1; } html.ines4-dark .disabled\:border-slate-300:disabled { border-color: var(--i4d-border-strong); } /* Focus-Ringe (blue-500 etc. bleiben — auf Dunkel gut sichtbar) */ html.ines4-dark .focus\:ring-blue-100:focus { --tw-ring-color: #1e3a66; } /* ------------------------------------------------------------ Formularelemente (Fallback für Felder ohne bg-Utility) ------------------------------------------------------------ */ html.ines4-dark input[type="text"], html.ines4-dark input[type="search"], html.ines4-dark input[type="email"], html.ines4-dark input[type="password"], html.ines4-dark input[type="number"], html.ines4-dark input[type="url"], html.ines4-dark input[type="tel"], html.ines4-dark input[type="date"], html.ines4-dark input[type="time"], html.ines4-dark input[type="datetime-local"], html.ines4-dark input[type="month"], html.ines4-dark select, html.ines4-dark textarea { background-color: var(--i4d-input); color: var(--i4d-text-2); } html.ines4-dark input::placeholder, html.ines4-dark textarea::placeholder { color: #64748b; } html.ines4-dark select option { background-color: var(--i4d-card); color: var(--i4d-text-2); } /* Weiße Formularfelder (bg-white auf input/select/textarea) dunkler als Karte */ html.ines4-dark input.bg-white, html.ines4-dark select.bg-white, html.ines4-dark textarea.bg-white { background-color: var(--i4d-input); } /* ------------------------------------------------------------ Eigene Komponenten aus overrides.css ------------------------------------------------------------ */ /* Sidebar-Kategorien */ html.ines4-dark .ines4-nav-cat { color: #7d8ca3; } /* Quickfilter */ html.ines4-dark .ines4-quickfilter-btn { color: var(--i4d-text-3); } html.ines4-dark .ines4-quickfilter-btn:hover { background: var(--i4d-elev); } html.ines4-dark .ines4-quickfilter-btn--active { background: #1d2f4f; color: #93c5fd; } /* Sticky-Savebar/Filterbar */ html.ines4-dark .ines4-sticky-savebar { border-bottom-color: var(--i4d-border); } /* AI-Task Prompt-Karten */ html.ines4-dark .ines4-ai-task-prompt-card { border-color: var(--i4d-border); background: var(--i4d-card); } html.ines4-dark .ines4-ai-task-test-run-card { border-color: #2c4a77; background: linear-gradient(to bottom right, var(--i4d-card), rgba(29, 47, 79, 0.85)); } html.ines4-dark .ines4-ai-task-test-progress-track { background: var(--i4d-elev2); } /* Modale Dialoge (Changelog/Toolbar) */ html.ines4-dark .ines4-modal__backdrop { background: rgba(2, 6, 23, 0.72); } html.ines4-dark .ines4-modal__card { background: var(--i4d-card); } html.ines4-dark .ines4-modal__head { border-bottom-color: var(--i4d-border); } html.ines4-dark .ines4-modal__foot { border-top-color: var(--i4d-border); } html.ines4-dark .ines4-modal__x { color: var(--i4d-text-5); } html.ines4-dark .ines4-modal__x:hover { background: var(--i4d-elev); color: var(--i4d-text); } html.ines4-dark .ines4-modal__tabs { background: var(--i4d-elev); } html.ines4-dark .ines4-modal__tab { color: var(--i4d-text-5); } html.ines4-dark .ines4-modal__btn--secondary { border-color: var(--i4d-border-strong); background: var(--i4d-card); color: var(--i4d-text-3); } html.ines4-dark .ines4-modal__btn--secondary:hover { background: var(--i4d-elev); } /* Modal-Aktionsbuttons (overrides.css nutzt !important — hier kontern) */ html.ines4-dark button[data-ines4-modal-action="secondary"] { color: var(--i4d-text-3) !important; background-color: var(--i4d-card) !important; border-color: var(--i4d-border-strong) !important; } html.ines4-dark button[data-ines4-modal-action="secondary"]:hover { background-color: var(--i4d-elev) !important; color: var(--i4d-text) !important; } /* Stellenmarkt „Archivieren" (weißer Grund per !important in overrides.css) */ html.ines4-dark button[data-job-archive-open="1"] { color: #fb923c !important; background-color: var(--i4d-card) !important; border-color: #c2410c !important; } html.ines4-dark button[data-job-archive-open="1"]:hover { color: #fdba74 !important; background-color: #3d2817 !important; } /* Talentpool Versand-Sperr-Hinweis (#fff2f2 per !important) */ html.ines4-dark [data-talent-sm-org-lock-hint="1"] { background-color: #3b1f26 !important; border-color: #6b2f3a !important; } /* Audit-Log-Modal */ html.ines4-dark .ines4-audit-modal__header { border-bottom-color: var(--i4d-border); } html.ines4-dark .ines4-audit-modal__title { color: var(--i4d-text); } html.ines4-dark .ines4-audit-modal__close { color: var(--i4d-text-5); } html.ines4-dark .ines4-audit-modal__close:hover { background: var(--i4d-elev); } html.ines4-dark .ines4-audit-modal__filters { background: var(--i4d-elev); border-bottom-color: var(--i4d-border); } html.ines4-dark .ines4-audit-modal__label { color: var(--i4d-text-4); } html.ines4-dark .ines4-audit-modal__control { background: var(--i4d-input); border-color: var(--i4d-border-strong); color: var(--i4d-text-2); } html.ines4-dark .ines4-audit-modal__btn--ghost { background: var(--i4d-card); color: var(--i4d-text-3); border-color: var(--i4d-border-strong); } html.ines4-dark .ines4-audit-modal__btn--ghost:hover { background: var(--i4d-elev); } html.ines4-dark .ines4-audit-modal__footer { background: var(--i4d-elev); border-top-color: var(--i4d-border); } html.ines4-dark .ines4-audit-modal__loadmore { background: var(--i4d-card); color: var(--i4d-text-3); border-color: var(--i4d-border-strong); } html.ines4-dark .ines4-audit-modal__loadmore:hover { background: var(--i4d-elev); } /* Toolbar-Update-Banner (Amber) */ html.ines4-dark .ines4-update-banner__card { background: linear-gradient(180deg, #352a12 0%, #392c14 100%); border-color: #6b5220; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2); color: #fde68a; } html.ines4-dark .ines4-update-banner__icon { background: #54401a; color: #fbbf24; } html.ines4-dark .ines4-update-banner__text strong { color: #fef3c7; } html.ines4-dark .ines4-update-banner__meta { color: #fbbf24; } html.ines4-dark .ines4-update-banner__x { color: #fbbf24; } html.ines4-dark .ines4-update-banner__x:hover { background: #54401a; color: #fef3c7; } /* Direktmailer */ html.ines4-dark .dm-mode-option:hover { border-color: #365a8c; background-color: var(--i4d-elev); } html.ines4-dark .dm-spinner { border-color: #475569; border-top-color: #60a5fa; } html.ines4-dark .dm-examples-progress-track { background: var(--i4d-elev2); } /* CV-PDF Sektionskarten (Editor-Seitenleiste, nicht die Papier-Vorschau) */ html.ines4-dark .ines4-cv-pdf-section-card { border-color: var(--i4d-border); background: var(--i4d-card); } html.ines4-dark .ines4-cv-pdf-section-card .ines4-cv-pdf-section-title { color: var(--i4d-text-2); } html.ines4-dark .ines4-cv-pdf-section-card button { color: var(--i4d-text-4); } html.ines4-dark .ines4-cv-pdf-section-card button:hover { color: var(--i4d-text); } /* Skeleton-Loader mit Inline-Style (Direktmailer-Detail) */ html.ines4-dark [style*="background:#eef2f7"] { background: var(--i4d-elev2) !important; } /* E-Mail-Vorschauen (compose_mail_html: inline Arial + color:#111 — Paraphrase- Beispiele, Mailtesting, Logfile-Ansicht): Mails sind ein helles Medium und bekommen im Dark Mode eine weiße Kachel, analog zur Summernote-Schreibfläche. */ html.ines4-dark [style*="font-family:Arial"][style*="color:#111"] { background: #fff; border-radius: 8px; padding: 12px 14px; color-scheme: light; } /* Organisations-Logos: meist dunkle Schrift auf Transparenz — weiße Kachel unterlegen */ html.ines4-dark img[data-organization-logo-img="1"] { background: #fff; border-radius: 6px; padding: 3px; box-sizing: border-box; } /* ------------------------------------------------------------ Summernote (WYSIWYG): Chrome dunkel, Schreibfläche bleibt hell — der Inhalt (E-Mail/Web) wird später auf hellem Grund dargestellt. ------------------------------------------------------------ */ html.ines4-dark .note-editor.note-frame, html.ines4-dark .note-editor.note-airframe { border-color: var(--i4d-border-strong); } html.ines4-dark .note-editor.note-frame .note-toolbar, html.ines4-dark .note-editor .note-statusbar { background-color: var(--i4d-elev); border-color: var(--i4d-border); } html.ines4-dark .note-editor .note-statusbar { border-top: 1px solid var(--i4d-border); } html.ines4-dark .note-btn { background-color: var(--i4d-card); border-color: var(--i4d-border-strong); color: var(--i4d-text-3); } html.ines4-dark .note-btn:hover, html.ines4-dark .note-btn:focus, html.ines4-dark .note-btn.active { background-color: var(--i4d-elev2); color: var(--i4d-text); } html.ines4-dark .note-dropdown-menu { background-color: var(--i4d-card); border-color: var(--i4d-border-strong); color: var(--i4d-text-2); } html.ines4-dark .note-dropdown-menu .note-dropdown-item:hover, html.ines4-dark .note-dropdown-item:hover { background-color: var(--i4d-elev); } html.ines4-dark .note-modal .note-modal-content { background-color: var(--i4d-card); border-color: var(--i4d-border-strong); color: var(--i4d-text-2); } html.ines4-dark .note-modal .note-modal-header { border-color: var(--i4d-border); } html.ines4-dark .note-modal .note-modal-title { color: var(--i4d-text); } html.ines4-dark .note-modal .note-modal-footer { border-color: var(--i4d-border); } html.ines4-dark .note-input, html.ines4-dark .note-modal input[type="text"] { background-color: var(--i4d-input); border-color: var(--i4d-border-strong); color: var(--i4d-text-2); } /* Schreibfläche: hell belassen (Vorschau des Endprodukts) */ html.ines4-dark .note-editor .note-editable { background-color: #fff; color-scheme: light; } /* ------------------------------------------------------------ Papier-Vorschauen (Exposé / CV-PDF) bleiben hell. Utilities innerhalb der Seite auf Print-Farben zurücksetzen. ------------------------------------------------------------ */ html.ines4-dark .ines4-expose-page, html.ines4-dark .ines4-cv-pdf-page { color-scheme: light; } html.ines4-dark .ines4-expose-page .text-gray-900, html.ines4-dark .ines4-cv-pdf-page .text-gray-900 { color: #111827; } html.ines4-dark .ines4-expose-page .text-gray-700, html.ines4-dark .ines4-cv-pdf-page .text-gray-700 { color: #374151; } html.ines4-dark .ines4-expose-page .text-gray-500, html.ines4-dark .ines4-cv-pdf-page .text-gray-500 { color: #6b7280; } html.ines4-dark .ines4-expose-page .bg-white, html.ines4-dark .ines4-cv-pdf-page .bg-white { background-color: #fff; } /* ------------------------------------------------------------ Scrollbars (WebKit) — dezent dunkel ------------------------------------------------------------ */ html.ines4-dark ::-webkit-scrollbar { width: 12px; height: 12px; } html.ines4-dark ::-webkit-scrollbar-track { background: transparent; } html.ines4-dark ::-webkit-scrollbar-thumb { background: #3b4d6b; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } html.ines4-dark ::-webkit-scrollbar-thumb:hover { background-color: #54688c; } /* ------------------------------------------------------------ Theme-Umschalter (Sidebar-Footer) ------------------------------------------------------------ */ #ines4-theme-toggle { flex: 0 0 auto; cursor: pointer; } #ines4-theme-toggle .ines4-theme-icon-sun { display: none; } #ines4-theme-toggle .ines4-theme-icon-moon { display: block; } html.ines4-dark #ines4-theme-toggle .ines4-theme-icon-sun { display: block; } html.ines4-dark #ines4-theme-toggle .ines4-theme-icon-moon { display: none; }