/* Dark Mode Overrides
Applied when is set.
Status colors (#00c981 green, #ff5f3c red, #f7ba1e yellow) are intentionally preserved.
*/
/* ── Page background ─────────────────────────────────────────── */
html[data-theme="dark"] {
background-color: #0f172a;
color: #f1f5f9;
}
html[data-theme="dark"] body {
color: #f1f5f9;
}
/* ── Main layout grid ─────────────────────────────────────────── */
html[data-theme="dark"] .maingrid {
background: #0f172a;
}
html[data-theme="dark"] .mainleft,
html[data-theme="dark"] .w271 {
background: #1e293b;
background-color: #1e293b;
}
html[data-theme="dark"] .footer {
background: #1e293b;
background-color: #1e293b;
}
/* ── Sidebar / menu ───────────────────────────────────────────── */
html[data-theme="dark"] .menu {
color: #f1f5f9;
}
html[data-theme="dark"] .menuitem {
color: #94a3b8;
background: #1e293b !important;
}
html[data-theme="dark"] .menuitem:hover,
html[data-theme="dark"] .menuitem.active {
background: rgba(27, 93, 226, 0.25) !important;
color: #7ba7ff;
}
html[data-theme="dark"] .divider {
color: #334155;
}
html[data-theme="dark"] .logodiv #chlogo_text_hub {
fill: #94a3b8 !important;
}
html[data-theme="dark"] .logodiv p {
color: #94a3b8;
}
/* ── User panel (top-right bar) ───────────────────────────────── */
html[data-theme="dark"] .userpanel {
background-color: #1e293b;
}
html[data-theme="dark"] .langs {
border-color: #475569;
}
html[data-theme="dark"] .lang {
color: rgb(27 93 226 / 1);
}
html[data-theme="dark"] .lang.langinactive {
color: #64748b;
}
html[data-theme="dark"] .usernametext {
color: #f1f5f9;
}
html[data-theme="dark"] .companynametext {
color: #64748b;
}
html[data-theme="dark"] .ub2 {
border-color: #1e293b;
}
/* ── User dropdown menu ───────────────────────────────────────── */
html[data-theme="dark"] .urmenu {
background: #1e293b;
background-color: #1e293b;
border-color: #334155;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .urmenubutton {
background: transparent;
background-color: transparent;
}
html[data-theme="dark"] .urmenubutton:hover {
background: rgba(27, 93, 226, 0.2) !important;
}
html[data-theme="dark"] .urmenubutton svg,
html[data-theme="dark"] .urmenubutton span {
color: #94a3b8;
}
/* ── Headings ─────────────────────────────────────────────────── */
html[data-theme="dark"] h2 {
color: rgba(241, 245, 249, 0.45);
}
html[data-theme="dark"] .title h1 {
color: #f1f5f9;
}
html[data-theme="dark"] .title {
color: #94a3b8;
}
/* ── Generic box / content containers ────────────────────────── */
html[data-theme="dark"] .box {
background-color: rgba(30, 41, 59, 0.85);
}
html[data-theme="dark"] .infopanel_part {
background-color: rgba(30, 41, 59, 0.65);
}
html[data-theme="dark"] .bgwhite {
background-color: #1e293b;
}
/* ── Tables ───────────────────────────────────────────────────── */
html[data-theme="dark"] .fixedheader td:not(.ready, .open, .work, .gray, .yellow, .red, .green) {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] .fixedheader th {
background-color: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] #lksgtable1,
html[data-theme="dark"] #lksgtable2 {
color: #f1f5f9;
}
html[data-theme="dark"] #lksgtable1 td:not(.ready, .COMPLETED, .open, .OPEN, .work, .IN_PROGRESS),
html[data-theme="dark"] #lksgtable2 td:not(.ready, .COMPLETED, .open, .OPEN, .work, .IN_PROGRESS) {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] #lksgtable1 td,
html[data-theme="dark"] #lksgtable2 td {
border-color: #334155;
}
html[data-theme="dark"] #lksgtable1 th {
background-color: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] td,
html[data-theme="dark"] th {
border-color: #334155;
}
/* ── Pagination ───────────────────────────────────────────────── */
html[data-theme="dark"] .pagination-controls .btn {
background-color: #1e293b;
border-color: #475569;
color: #f1f5f9;
}
/* ── Buttons ──────────────────────────────────────────────────── */
html[data-theme="dark"] .button.inactive,
html[data-theme="dark"] .button.disabled,
html[data-theme="dark"] .button:disabled {
background-color: #334155;
color: #64748b;
}
html[data-theme="dark"] .titleandbutton .button {
background-color: #334155;
color: #94a3b8;
}
html[data-theme="dark"] .titleandbutton td:last-child {
color: #94a3b8;
}
/* ── Links ────────────────────────────────────────────────────── */
html[data-theme="dark"] a.nodecoration {
color: #f1f5f9;
}
html[data-theme="dark"] .impressum a {
color: #7ba7ff;
}
html[data-theme="dark"] #menu a,
html[data-theme="dark"] #menu a:visited {
color: #f1f5f9;
}
html[data-theme="dark"] .filelist a,
html[data-theme="dark"] .filelist a:visited {
color: #94a3b8;
}
html[data-theme="dark"] #versionsno {
color: #475569;
}
/* ── Inputs / forms ───────────────────────────────────────────── */
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="password"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
background-color: #1e293b;
color: #f1f5f9;
border-color: #475569;
}
html[data-theme="dark"] input[type="text"]:focus,
html[data-theme="dark"] input[type="email"]:focus,
html[data-theme="dark"] input[type="number"]:focus,
html[data-theme="dark"] input[type="search"]:focus,
html[data-theme="dark"] input[type="password"]:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
border-color: #1b5de2;
}
html[data-theme="dark"] input::placeholder {
color: #64748b;
}
/* ── Login panel ──────────────────────────────────────────────── */
html[data-theme="dark"] .logininput input[type="text"],
html[data-theme="dark"] .logininput input[type="password"] {
background-color: rgba(27, 93, 226, 0.1) !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
/* Override browser autofill background (cannot use background-color for this) */
html[data-theme="dark"] .logininput input:-webkit-autofill,
html[data-theme="dark"] .logininput input:-webkit-autofill:hover,
html[data-theme="dark"] .logininput input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px #1a2744 inset !important;
box-shadow: 0 0 0px 1000px #1a2744 inset !important;
-webkit-text-fill-color: #f1f5f9 !important;
border-color: #334155 !important;
caret-color: #f1f5f9;
}
html[data-theme="dark"] .loginButtons input[type="submit"]:disabled {
background-color: #334155;
color: #64748b;
}
html[data-theme="dark"] .sso-divider {
color: #64748b;
}
html[data-theme="dark"] .sso-divider::before,
html[data-theme="dark"] .sso-divider::after {
border-color: #334155;
}
html[data-theme="dark"] .btn-sso-microsoft {
background-color: #1e293b;
color: #f1f5f9;
border-color: #475569;
}
html[data-theme="dark"] .btn-sso-microsoft:hover {
background-color: #293548;
}
html[data-theme="dark"] .error {
background-color: #3b1a1a;
color: #fca5a5;
}
html[data-theme="dark"] .info {
background-color: #14291a;
color: #86efac;
}
html[data-theme="dark"] .loginerror {
color: #f87171;
}
/* ── Cookie banner ────────────────────────────────────────────── */
html[data-theme="dark"] #cookiebanner {
background-color: #1e293b;
color: #f1f5f9;
}
/* ── Multi-select widget ──────────────────────────────────────── */
html[data-theme="dark"] .multi-select-button {
background-color: #1e293b;
color: #f1f5f9;
border-color: #475569;
}
html[data-theme="dark"] .multi-select-menu {
background-color: #1e293b;
border-color: #475569;
}
html[data-theme="dark"] .multi-select-option {
color: #f1f5f9;
}
html[data-theme="dark"] .multi-select-option:hover {
background-color: rgba(27, 93, 226, 0.2);
}
/* ── jQuery UI overrides ──────────────────────────────────────── */
html[data-theme="dark"] .ui-widget-content {
background: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] .ui-widget-header {
background: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] .ui-state-default,
html[data-theme="dark"] .ui-widget-content .ui-state-default {
background: #293548;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] .ui-state-hover,
html[data-theme="dark"] .ui-widget-content .ui-state-hover {
background: rgba(27, 93, 226, 0.25);
color: #f1f5f9;
border-color: #1b5de2;
}
html[data-theme="dark"] .ui-state-active,
html[data-theme="dark"] .ui-widget-content .ui-state-active {
background: rgba(27, 93, 226, 0.35);
color: #f1f5f9;
border-color: #1b5de2;
}
html[data-theme="dark"] .ui-dialog {
background: #1e293b;
border-color: #334155;
}
html[data-theme="dark"] .ui-dialog-titlebar {
background: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] .ui-menu .ui-menu-item-wrapper {
color: #f1f5f9;
}
/* ── Autocomplete dropdown ────────────────────────────────────── */
html[data-theme="dark"] .autocomplete-items {
background-color: #1e293b;
border-color: #334155;
color: #f1f5f9;
}
html[data-theme="dark"] .autocomplete-items div:hover,
html[data-theme="dark"] .autocomplete-active {
background: rgba(27, 93, 226, 0.25);
}
/* ── Questions panel warning highlights ───────────────────────── */
html[data-theme="dark"] .ozontable input:disabled {
background-color: #1e293b;
color: #94a3b8;
}
/* The orange warning highlight (rgb(254,235,203)) in questions */
html[data-theme="dark"] td[style*="background-color: rgb(254,235,203)"],
html[data-theme="dark"] input[style*="background-color: rgb(254,235,203)"] {
background-color: #3d2a00 !important;
}
/* ── Dark mode toggle button ──────────────────────────────────── */
.darkmode-toggle {
background: transparent;
border: none;
cursor: pointer;
padding: 4px 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: #6b7280;
transition: background 0.15s ease, color 0.15s ease;
vertical-align: middle;
}
.darkmode-toggle:hover {
background: rgba(27, 93, 226, 0.12);
color: #1b5de2;
}
html[data-theme="dark"] .darkmode-toggle {
color: #94a3b8;
}
html[data-theme="dark"] .darkmode-toggle:hover {
background: rgba(27, 93, 226, 0.25);
color: #7ba7ff;
}
.darkmode-toggle .dm-sun { display: none; }
.darkmode-toggle .dm-moon { display: block; }
html[data-theme="dark"] .darkmode-toggle .dm-sun { display: block; }
html[data-theme="dark"] .darkmode-toggle .dm-moon { display: none; }
/* ════════════════════════════════════════════════════════════════
PANEL-SPECIFIC OVERRIDES (appended after initial investigation)
════════════════════════════════════════════════════════════════ */
/* ── Generic: catch-all for plain white table cells & rows ────── */
html[data-theme="dark"] table td,
html[data-theme="dark"] table th {
color: #f1f5f9;
}
/* Reset for status cells so colour stays visible */
html[data-theme="dark"] td.ready, html[data-theme="dark"] td.green,
html[data-theme="dark"] td.COMPLETED { color: #000; }
html[data-theme="dark"] td.open, html[data-theme="dark"] td.red,
html[data-theme="dark"] td.OPEN { color: #000; }
html[data-theme="dark"] td.work, html[data-theme="dark"] td.yellow,
html[data-theme="dark"] td.IN_PROGRESS { color: #000; }
/* ── Supplier list: mainsup / subsup row highlights ───────────── */
html[data-theme="dark"] tr.mainsup td { background-color: #2a2a18 !important; }
html[data-theme="dark"] tr.subsup td { background-color: #182a2a !important; }
/* ── Mailing popup ────────────────────────────────────────────── */
html[data-theme="dark"] #newmailing {
background-color: #1e293b;
color: #f1f5f9;
}
html[data-theme="dark"] #newmailing select {
border-color: #475569;
background-color: #1e293b;
color: #f1f5f9;
}
/* ── shadow1 / shadow2 table row alternates ───────────────────── */
html[data-theme="dark"] .shadow1 td { background-color: #23261d !important; }
html[data-theme="dark"] .shadow2 td { background-color: #1d2326 !important; }
/* ── User-information table (supplier detail) ─────────────────── */
html[data-theme="dark"] #userinformation table tbody td {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] #userinformation table tbody tr:hover td {
background-color: #293548;
}
/* ── General table headers (light-blue rgb(233,239,253)) ──────── */
html[data-theme="dark"] .materialtable th,
html[data-theme="dark"] .suppliertable th,
html[data-theme="dark"] .partsliststable th,
html[data-theme="dark"] .partslisttable th,
html[data-theme="dark"] .mctable th,
html[data-theme="dark"] #materialtable th,
html[data-theme="dark"] #suppliertable th,
html[data-theme="dark"] #partsliststable th {
background-color: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
/* ── General table cells (white bg) ──────────────────────────── */
html[data-theme="dark"] .materialtable td,
html[data-theme="dark"] .suppliertable td,
html[data-theme="dark"] .partsliststable td,
html[data-theme="dark"] .partslisttable td,
html[data-theme="dark"] .mctable td,
html[data-theme="dark"] #materialtable td,
html[data-theme="dark"] #suppliertable td,
html[data-theme="dark"] #partsliststable td {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
/* ── Table links (hardcoded black) ───────────────────────────── */
html[data-theme="dark"] .materialtable a,
html[data-theme="dark"] .materialtable a:visited,
html[data-theme="dark"] .suppliertable a,
html[data-theme="dark"] .suppliertable a:visited,
html[data-theme="dark"] .partsliststable a,
html[data-theme="dark"] .partsliststable a:visited,
html[data-theme="dark"] .partslisttable a,
html[data-theme="dark"] .partslisttable a:visited,
html[data-theme="dark"] #materialtable a,
html[data-theme="dark"] #materialtable a:visited,
html[data-theme="dark"] #suppliertable a,
html[data-theme="dark"] #suppliertable a:visited,
html[data-theme="dark"] #lksgchoosetable a,
html[data-theme="dark"] #lksgchoosetable a:visited {
color: #93c5fd;
}
/* ── Excel upload/download popup ─────────────────────────────── */
html[data-theme="dark"] #excelupdiv,
html[data-theme="dark"] #excel_popup {
background-color: #1e293b;
background: #1e293b;
color: #f1f5f9;
}
html[data-theme="dark"] #excel_popup h1,
html[data-theme="dark"] #excel_popup p,
html[data-theme="dark"] #excelupdiv h1 {
color: #f1f5f9;
}
/* ── iframe (editor) ─────────────────────────────────────────── */
html[data-theme="dark"] iframe {
background-color: #1e293b;
color-scheme: dark;
}
/* ── h3 subheadings ──────────────────────────────────────────── */
html[data-theme="dark"] h3 { color: #94a3b8; }
/* ── Column-toggles panel (mats) ────────────────────────────── */
html[data-theme="dark"] .column-toggles {
background-color: #1e293b;
color: #f1f5f9;
}
html[data-theme="dark"] .toggle-group {
border-color: #334155;
}
/* ── Anfragen (request list) table ───────────────────────────── */
html[data-theme="dark"] #anfragen_table td {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] #anfragen_table th {
background-color: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] #anfragen_table a,
html[data-theme="dark"] #anfragen_table a:visited {
color: #93c5fd;
}
/* ── Directive label (request form checkboxes) ───────────────── */
html[data-theme="dark"] .directive-label:hover,
html[data-theme="dark"] .directive-label:focus-within {
background-color: #293548;
outline-color: #475569;
}
html[data-theme="dark"] .anfrage-directives .directive-tag {
background-color: #1a3050;
border-color: #2a5070;
color: #93c5fd;
}
/* ── Anfragen buttons ────────────────────────────────────────── */
html[data-theme="dark"] #btn_neue_anfrage span,
html[data-theme="dark"] #anfragen_table button {
background-color: #2a3a7f;
color: #f1f5f9;
}
html[data-theme="dark"] #btn_neue_anfrage span:hover,
html[data-theme="dark"] #anfragen_table button:hover {
background-color: #3a4a9f;
}
/* ── Result / Auswertungen ───────────────────────────────────── */
html[data-theme="dark"] .result_materialtable td,
html[data-theme="dark"] .result_materialtable tbody td {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] .result_materialtable th {
background-color: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] #plchoosetxtautocomplete-list {
background-color: #1e293b;
border-color: #334155;
color: #f1f5f9;
}
html[data-theme="dark"] .modal-content {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] .template-option {
border-color: #334155;
}
html[data-theme="dark"] .template-option:hover {
background-color: #293548;
}
/* ── LKSG tables ─────────────────────────────────────────────── */
html[data-theme="dark"] #lksgc2 table td,
html[data-theme="dark"] #lksgc3 table td,
html[data-theme="dark"] #lksgc5 table td,
html[data-theme="dark"] #lksgc6 table td,
html[data-theme="dark"] #lksgd5 table td,
html[data-theme="dark"] #lksgd6 table td {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] #lksgtable1 tbody tr:not(.ready, .open, .work) td,
html[data-theme="dark"] #lksgtable2 tbody tr:not(.ready, .open, .work) td {
background-color: #1e293b;
}
html[data-theme="dark"] h2 a,
html[data-theme="dark"] h2 a:visited,
html[data-theme="dark"] h2.folder { color: #94a3b8; }
html[data-theme="dark"] .lksgbox a { color: #93c5fd; }
html[data-theme="dark"] #lksgtabs a,
html[data-theme="dark"] #lksgtabs td { color: #94a3b8; }
html[data-theme="dark"] #lksgtabs a:hover { color: #f1f5f9; }
html[data-theme="dark"] #lksgtabs td.active { color: #7ba7ff; }
html[data-theme="dark"] .ui-selectmenu-button,
html[data-theme="dark"] .ui-selectmenu-button:hover,
html[data-theme="dark"] .ui-selectmenu-button.ui-button {
background-color: #1e293b;
color: #f1f5f9;
border-color: #475569;
}
html[data-theme="dark"] .ui-button:focus {
background: #293548;
color: #f1f5f9;
border-color: #1b5de2;
}
/* ── REACH / ZTN tables (SVHC, ozone, RoHS, PFAS …) ─────────── */
html[data-theme="dark"] .ozontable th,
html[data-theme="dark"] .svhctable th,
html[data-theme="dark"] #rohsstofftable th,
html[data-theme="dark"] #rohsextable th,
html[data-theme="dark"] #logtable th,
html[data-theme="dark"] #lksgcerts th,
html[data-theme="dark"] #lksgriskmgmt th,
html[data-theme="dark"] #pfasDataTable th {
background-color: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] .ozontable td,
html[data-theme="dark"] .svhctable td,
html[data-theme="dark"] #rohsstofftable td,
html[data-theme="dark"] #rohsextable td,
html[data-theme="dark"] #logtable td,
html[data-theme="dark"] #lksgcerts td,
html[data-theme="dark"] #lksgriskmgmt td,
html[data-theme="dark"] #pfasDataTable td {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
/* Orange warning boxes (annex17, ROHS declare, PFAS) */
html[data-theme="dark"] #annex17warning,
html[data-theme="dark"] #xviidescription,
html[data-theme="dark"] #rohsdesclarewarningtxt {
background-color: #3d2a00;
color: #fcd34d;
}
html[data-theme="dark"] .ozontable input:disabled {
background-color: #293548;
color: #94a3b8;
}
/* ── Questionnaire: regulation list (#reglist) ───────────────── */
html[data-theme="dark"] #reglist {
background-color: #1e293b;
color: #f1f5f9;
border-color: #475569;
}
/* ── Config / code editor (config.css) ───────────────────────── */
html[data-theme="dark"] code[class*="language-"],
html[data-theme="dark"] :not(pre) > code[class*="language-"] {
background: #293548 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] p code {
background-color: #293548;
color: #e2e8f0;
}
html[data-theme="dark"] .highlighted-text {
background-color: #3d3d00;
color: #fde68a;
}
html[data-theme="dark"] #editing {
caret-color: #f1f5f9;
}
/* ── general.css: message dialog & text areas ────────────────── */
html[data-theme="dark"] .msgbox {
background-color: #1e293b;
color: #f1f5f9;
}
html[data-theme="dark"] .lksgtext,
html[data-theme="dark"] #comment {
border-color: #475569;
background-color: #1e293b;
color: #f1f5f9;
}
/* ── ztn.css: inactive ZTN button ────────────────────────────── */
html[data-theme="dark"] .ztnbutton.inactive {
background-color: #334155;
color: #64748b;
}
/* ── questions.css: SVHC/ozone table cells (explicit white bg) ─ */
html[data-theme="dark"] .ozontable td:not([class*="ready"]):not([class*="open"]):not([class*="work"]),
html[data-theme="dark"] .svhctable td:not([class*="ready"]):not([class*="open"]):not([class*="work"]),
html[data-theme="dark"] #rohsstofftable td:not([class*="ready"]):not([class*="open"]):not([class*="work"]),
html[data-theme="dark"] #rohsextable td:not([class*="ready"]):not([class*="open"]):not([class*="work"]),
html[data-theme="dark"] #logtable td:not([class*="ready"]):not([class*="open"]):not([class*="work"]),
html[data-theme="dark"] #lksgcerts td:not([class*="ready"]):not([class*="open"]):not([class*="work"]),
html[data-theme="dark"] #lksgriskmgmt td:not([class*="ready"]):not([class*="open"]):not([class*="work"]),
html[data-theme="dark"] #pfasDataTable td:not([class*="ready"]):not([class*="open"]):not([class*="work"]) {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
/* Inputs inside those tables */
html[data-theme="dark"] .svhctable input,
html[data-theme="dark"] #rohsstofftable input,
html[data-theme="dark"] #rohsextable input,
html[data-theme="dark"] #lksgcerts input[type="text"],
html[data-theme="dark"] #lksgriskmgmt input[type="text"],
html[data-theme="dark"] #pfasDataTable input {
background-color: transparent;
color: #f1f5f9;
}
/* ── Hint in manufacturer questionnaire (#rad2hinweis area) ──── */
html[data-theme="dark"] #rad2hinweis {
color: #94a3b8;
}
/* ── admindash.css refresh button ────────────────────────────── */
html[data-theme="dark"] .refresh {
color: rgba(241, 245, 249, 0.5);
}
/* ── anfr.css bare `button` selector override ─────────────────── */
html[data-theme="dark"] #neue_anfrage button,
html[data-theme="dark"] #btn_neue_anfrage span {
background-color: #2a3a7f;
color: #f1f5f9;
}
html[data-theme="dark"] #neue_anfrage button:hover,
html[data-theme="dark"] #btn_neue_anfrage span:hover {
background-color: #3a4a9f;
}
/* ── directives-fieldset error state ─────────────────────────── */
html[data-theme="dark"] .directives-fieldset {
border-color: #475569;
}
html[data-theme="dark"] .directives-fieldset.error {
border-color: #f87171;
background-color: #3b1a1a;
}
/* ── mailings / mailing_dialog ────────────────────────────────── */
html[data-theme="dark"] .historyform.readonly input,
html[data-theme="dark"] .historyform.readonly select,
html[data-theme="dark"] .historyform.readonly textarea {
background-color: #293548;
color: #94a3b8;
border-color: #475569;
}
/* ══════════════════════════════════════════════════════════════
BROAD CATCH-ALL — placed last so it wins via cascade order
for any remaining table cells with hardcoded white backgrounds.
Status colours are preserved via :not() guards.
══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] table td:not(.ready):not(.open):not(.work):not(.green):not(.red):not(.yellow):not(.gray):not(.COMPLETED):not(.OPEN):not(.IN_PROGRESS),
html[data-theme="dark"] table tr:not(.ready):not(.open):not(.work) td:not(.ready):not(.open):not(.work):not(.green):not(.red):not(.yellow):not(.gray):not(.COMPLETED):not(.OPEN):not(.IN_PROGRESS) {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] table.titleandbutton td{
background-color: transparent !important;
}
html[data-theme="dark"] table th {
background-color: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
/* ══════════════════════════════════════════════════════════════
STATUS COLOUR RESTORATION — must be the very last rules.
Uses !important so earlier td-override rules in this file
(which lack :not guards) cannot override the status colours.
══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] td.ready,
html[data-theme="dark"] td.green,
html[data-theme="dark"] td.COMPLETED {
background-color: #00c981 !important;
color: #000 !important;
}
html[data-theme="dark"] td.open,
html[data-theme="dark"] td.red,
html[data-theme="dark"] td.OPEN {
background-color: #ff5f3c !important;
color: #000 !important;
}
html[data-theme="dark"] td.work,
html[data-theme="dark"] td.yellow,
html[data-theme="dark"] td.IN_PROGRESS {
background-color: #f7ba1e !important;
color: #000 !important;
}
/* Child elements (links, spans) inside status cells inherit #000 via the td rule above,
but only when they have no explicit color of their own. Cover all cases with !important. */
html[data-theme="dark"] td.ready *, html[data-theme="dark"] td.green *, html[data-theme="dark"] td.COMPLETED *,
html[data-theme="dark"] td.open *, html[data-theme="dark"] td.red *, html[data-theme="dark"] td.OPEN *,
html[data-theme="dark"] td.work *, html[data-theme="dark"] td.yellow *, html[data-theme="dark"] td.IN_PROGRESS * {
color: #000 !important;
}
/* ── Config panel (panel=config) ─────────────────────────────── */
html[data-theme="dark"] fieldset {
border-color: #475569;
color: #f1f5f9;
}
html[data-theme="dark"] legend {
color: #94a3b8;
}
html[data-theme="dark"] .form-control {
background-color: #1e293b;
color: #f1f5f9;
border-color: #475569;
border-width: 1px;
border-style: solid;
}
html[data-theme="dark"] .form-control:focus {
border-color: #1b5de2;
outline: none;
}
/* Prism.js code editor & syntax-highlighted pre blocks */
html[data-theme="dark"] pre[class*="language-"],
html[data-theme="dark"] #highlighting {
background: #13111a !important;
color: #f1f5f9;
}
html[data-theme="dark"] code[class*="language-"],
html[data-theme="dark"] :not(pre) > code[class*="language-"] {
background: #13111a !important;
color: #f1f5f9 !important;
}
/* Override prism token colours that are invisible on dark bg */
html[data-theme="dark"] .token.selector,
html[data-theme="dark"] .token.attr-name,
html[data-theme="dark"] .token.string,
html[data-theme="dark"] .token.char,
html[data-theme="dark"] .token.builtin {
color: #fbbf24; /* amber instead of yellow — readable on dark */
}
/* Alert boxes from Bootstrap-lite in config */
html[data-theme="dark"] .alert-danger {
--bs-danger-text-emphasis: #fca5a5;
--bs-danger-bg-subtle: #3b1a1a;
--bs-danger-border-subtle: #7f1d1d;
}
html[data-theme="dark"] .alert {
color: var(--bs-alert-color);
background-color: var(--bs-alert-bg);
border-color: var(--bs-alert-border-color);
}
/* Mail template table (inside config) */
html[data-theme="dark"] #mailtemplate_table th {
background-color: #1e3a5f;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] #mailtemplate_table td {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
/* ── Table action icons with hardcoded inline colour ─────────── */
/* _table_auswertung.svg has style="color: rgba(0,0,0,0.33)" inline;
!important is required to override inline styles. */
html[data-theme="dark"] a.gotoresult svg {
color: rgba(255, 255, 255, 0.55) !important;
}
html[data-theme="dark"] #neue_anfrage input, html[data-theme="dark"] #neue_anfrage textarea{
background-color: #1e293b;
color: #f1f5f9;
border-color: #475569;
}