/* Anpassung Anfang: Darkmode */
/*
 * Darkmode – gemeinsame Basis für Agenten-Panel und Kundenportal
 *
 * Aktiv, sobald <html data-theme="dark"> gesetzt ist (siehe js/darkmode.js).
 * Die Original-CSS-Dateien bleiben unverändert; diese Datei wird nach ihnen
 * geladen und überschreibt nur Farben.
 *
 * Wird NACH scp/css/darkmode.css bzw. assets/default/css/darkmode.css
 * geladen – wie redactor.css, select2 usw. nach scp.css/theme.css.
 *
 * Aufbau der Selektoren:
 *   :where(html[data-theme="dark"]) <Original-Selektor>
 * :where() hat die Spezifität 0. Jede Regel hier hat damit exakt die
 * Spezifität der Original-Regel, die sie ersetzt, und gewinnt nur durch die
 * spätere Ladereihenfolge. Spezifischere Original-Regeln (z. B. in
 * thread.css) behalten so weiterhin Vorrang – wie im hellen Design.
 *
 * Fremde HTML-Inhalte (E-Mails im Ticketverlauf, KB-Artikel, Editor-Inhalt)
 * werden NICHT umgefärbt, sondern als Ganzes invertiert (siehe Abschnitt
 * "Fremde Inhalte"). So bleiben auch Inline-Farben aus E-Mails
 * (style="color:#000", <font color>, weiße Tabellen …) lesbar.
 */

html[data-theme="dark"] {
    color-scheme: dark;

    /* Flächen */
    --dm-bg: #17191b;            /* Seitenhintergrund */
    --dm-surface: #202326;       /* Inhaltsbereich */
    --dm-surface-2: #282b2f;     /* Panels, Tabellenköpfe, Dialoge */
    --dm-surface-3: #31353a;     /* Buttons, aktive Elemente */
    --dm-hover: #3a3f45;
    --dm-input: #1a1c1f;
    --dm-border: #4b5157;
    --dm-border-soft: #393d42;
    --dm-shadow: rgba(0, 0, 0, 0.6);

    /* Text */
    --dm-text: #e1e3e5;
    --dm-text-strong: #f5f6f7;
    --dm-text-muted: #b0b5ba;
    --dm-text-faint: #9aa0a6;
    --dm-link: #7ab7f5;
    --dm-link-hover: #a9d1fa;
    --dm-heading: #8cc4ff;
    --dm-accent: #f39c45;        /* osTicket-Orange */
    --dm-selected: #1f5f99;      /* Auswahl/Hover in Menüs */

    /* Hinweisfarben */
    --dm-info-bg: #13303f;
    --dm-info-border: #2a6b88;
    --dm-info-text: #a4d6ef;
    --dm-success-bg: #173a20;
    --dm-success-border: #2f8a45;
    --dm-success-text: #9fe0ad;
    --dm-warning-bg: #3d3214;
    --dm-warning-border: #b07d1c;
    --dm-warning-text: #f3d48a;
    --dm-error-bg: #461d1d;
    --dm-error-border: #b03c3c;
    --dm-error-text: #ff9494;
}

/* Umschalter: zeigt die Beschriftung des gewählten Modus (data-theme-mode) */
.darkmode-toggle > span {
    display: none;
}
html[data-theme-mode="auto"] .darkmode-toggle > .dm-auto,
html[data-theme-mode="dark"] .darkmode-toggle > .dm-dark,
html[data-theme-mode="light"] .darkmode-toggle > .dm-light {
    display: inline;
}

html[data-theme="dark"],
:where(html[data-theme="dark"]) body {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

:where(html[data-theme="dark"]) ::placeholder {
    color: var(--dm-text-faint);
    opacity: 1;
}

/* Browser-Autofill (sonst hellblauer Hintergrund mit heller Schrift) */
:where(html[data-theme="dark"]) input:-webkit-autofill,
:where(html[data-theme="dark"]) input:-webkit-autofill:hover,
:where(html[data-theme="dark"]) input:-webkit-autofill:focus,
:where(html[data-theme="dark"]) textarea:-webkit-autofill,
:where(html[data-theme="dark"]) select:-webkit-autofill {
    -webkit-text-fill-color: var(--dm-text);
    box-shadow: 0 0 0 1000px var(--dm-input) inset;
    caret-color: var(--dm-text);
}

/* Browser-Standardlinie (inset) hat eine helle Unterkante.
 * Ganz in :where(), damit jede hr-Regel der Themes Vorrang hat. */
:where(html[data-theme="dark"] hr) {
    border-style: solid;
    border-color: #111214 #111214 var(--dm-border-soft) var(--dm-border-soft);
}

:where(html[data-theme="dark"]) ::selection {
    background-color: #2b5f91;
    color: #fff;
}

/* ------------------------------------------------------------------------
 * Fremde Inhalte
 *
 * Ticket-Nachrichten, KB-Artikel, Landing-Page und der Editor-Inhalt werden
 * per Filter invertiert und der Farbton zurückgedreht. Alles, was darin im
 * hellen Design lesbar ist, bleibt dadurch auch dunkel lesbar.
 *
 * WICHTIG: Innerhalb dieser Bereiche gelten deshalb weiter die HELLEN
 * Farbwerte. Hintergründe, die hier für den Darkmode gesetzt werden, sind
 * "Vorbilder", die erst durch den Filter dunkel werden
 * (Umrechnung: invertieren, dann Farbton um 180° drehen).
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) .thread-body,
:where(html[data-theme="dark"]) .redactor-in,
:where(html[data-theme="dark"]) div.selected-signature .inner {
    filter: invert(1) hue-rotate(180deg);
}
:where(html[data-theme="dark"]) .thread-body {
    background-color: #dadcdf;   /* wird zu #212326 */
    color: #333333;              /* wird zu #cccccc */
}
:where(html[data-theme="dark"]) .redactor-in,
:where(html[data-theme="dark"]) div.selected-signature .inner {
    color: #333333;
}

/* Bilder, Videos usw. zurückdrehen, damit sie im Original erscheinen.
 * Der weiße Hintergrund hält transparente Logos aus E-Mail-Signaturen
 * lesbar – sie sind für weißen Hintergrund gestaltet. */
:where(html[data-theme="dark"]) .thread-body img,
:where(html[data-theme="dark"]) .thread-body video,
:where(html[data-theme="dark"]) .thread-body iframe,
:where(html[data-theme="dark"]) .thread-body object,
:where(html[data-theme="dark"]) .thread-body embed,
:where(html[data-theme="dark"]) .thread-body canvas,
:where(html[data-theme="dark"]) .thread-body svg,
:where(html[data-theme="dark"]) .redactor-in img,
:where(html[data-theme="dark"]) .redactor-in video,
:where(html[data-theme="dark"]) .redactor-in iframe,
:where(html[data-theme="dark"]) div.selected-signature .inner img {
    filter: invert(1) hue-rotate(180deg);
    background-color: #fff;
}

/* Klassen der Oberfläche, die auch innerhalb der invertierten Bereiche
 * vorkommen, bekommen dort wieder ihre hellen Werte. */
:where(html[data-theme="dark"]) .thread-body .faded {
    color: rgba(0, 0, 0, 0.5);
}
:where(html[data-theme="dark"]) .thread-body .attachments {
    background-color: #e3e7eb;   /* wird zu #15191d */
    border-top-color: rgba(0, 0, 0, 0.2);
}
/* Links (thread.css: #428bca) wären nach dem Invertieren zu dunkel */
:where(html[data-theme="dark"]) .thread-body a:not(.button) {
    color: #1c5997 !important;   /* wird zu #7ab7f5 */
}
:where(html[data-theme="dark"]) .thread-body a:not(.button):hover,
:where(html[data-theme="dark"]) .thread-body a:not(.button):focus {
    color: #113962;              /* wird zu #a9d1fa */
}
/* Zitate etwas kräftiger als im hellen Design (#777), sonst zu blass */
:where(html[data-theme="dark"]) .thread-body blockquote {
    color: #666;
}

/* ------------------------------------------------------------------------
 * osticket.css
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) #loading {
    border-color: #2a67ac;
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) #loading h4 {
    color: var(--dm-accent);
}
:where(html[data-theme="dark"]) .non-local-image {
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) div.section-break {
    border-top-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .notice_bar {
    border-color: var(--dm-success-border);
    background-color: var(--dm-success-bg);
    color: var(--dm-success-text);
}
:where(html[data-theme="dark"]) .warning_bar {
    border-color: var(--dm-warning-border);
    background-color: var(--dm-warning-bg);
    color: var(--dm-warning-text);
}
:where(html[data-theme="dark"]) .error_bar {
    border-color: var(--dm-error-border);
    background-color: var(--dm-error-bg);
    color: var(--dm-error-text);
}
:where(html[data-theme="dark"]) .submitBtnFormChanged {
    color: #ff7070;
}

/* ------------------------------------------------------------------------
 * Redactor (Editor)
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) .redactor-box.redactor-styles-on {
    background-color: var(--dm-input);
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .redactor-focus.redactor-styles-on,
:where(html[data-theme="dark"]) .redactor-focus:focus.redactor-styles-on {
    border-color: #3d7fc1 !important;
}
:where(html[data-theme="dark"]) .redactor-source-view,
:where(html[data-theme="dark"]) .redactor-source-view.redactor-styles-on {
    border-color: var(--dm-border) !important;
}
:where(html[data-theme="dark"]) .redactor-source,
:where(html[data-theme="dark"]) .redactor-source:hover,
:where(html[data-theme="dark"]) .redactor-source:focus {
    background-color: #111315;
    color: #d0d0d0;
}
:where(html[data-theme="dark"]) .redactor-statusbar {
    background-color: var(--dm-surface-2);
}
:where(html[data-theme="dark"]) .redactor-statusbar li {
    color: var(--dm-text-faint);
    border-right-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .redactor-statusbar a {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .redactor-toolbar a,
:where(html[data-theme="dark"]) .redactor-air a {
    color: var(--dm-text);
    background-color: var(--dm-surface-3);
    box-shadow: 0 1px 2px var(--dm-shadow);
}
:where(html[data-theme="dark"]) .redactor-toolbar a:hover,
:where(html[data-theme="dark"]) .redactor-air a:hover {
    color: #fff;
    background-color: var(--dm-selected);
}
:where(html[data-theme="dark"]) .redactor-toolbar a.redactor-button-active {
    background-color: var(--dm-hover);
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .redactor-toolbar a.redactor-button-disabled:hover,
:where(html[data-theme="dark"]) .redactor-air a.redactor-button-disabled:hover {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .redactor-toolbar.redactor-toolbar a {
    background-color: transparent;
}
:where(html[data-theme="dark"]) .redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
    background-color: var(--dm-surface-2);
    box-shadow: 0 4px 10px -6px var(--dm-shadow);
}
:where(html[data-theme="dark"]) .redactor-in[style*=' width:'],
:where(html[data-theme="dark"]) .redactor-in[style^='width:'] {
    border-right-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .redactor-air-helper {
    color: var(--dm-text);
    background-color: var(--dm-surface-3);
}
:where(html[data-theme="dark"]) .redactor-air-helper:hover {
    background-color: var(--dm-hover);
}
:where(html[data-theme="dark"]) .redactor-dropdown {
    background-color: var(--dm-surface-2);
    box-shadow: 0 4px 14px var(--dm-shadow);
}
:where(html[data-theme="dark"]) .redactor-dropdown a {
    color: var(--dm-text);
    border-bottom-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .redactor-dropdown a.redactor-dropdown-item-disabled {
    color: var(--dm-text-faint);
    background-color: var(--dm-surface-2);
}
:where(html[data-theme="dark"]) .redactor-dropdown-selector span:hover,
:where(html[data-theme="dark"]) .redactor-dropdown-selector span.active {
    background-color: var(--dm-hover);
}
:where(html[data-theme="dark"]) .redactor-dropdown-selector span.active {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .redactor-dropdown-format .redactor-dropdown-item-blockquote {
    color: var(--dm-text-muted);
}
:where(html[data-theme="dark"]) .redactor-modal {
    background-color: var(--dm-surface-2);
    box-shadow: 0 0 0 1px var(--dm-border-soft), 0 2px 15px var(--dm-shadow);
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .redactor-modal-header {
    color: var(--dm-text-strong);
    border-bottom-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .redactor-modal-footer {
    border-top-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .redactor-modal-tabs {
    border-bottom-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .redactor-modal-tabs a {
    color: var(--dm-text-muted);
}
:where(html[data-theme="dark"]) .redactor-modal-tabs a:hover,
:where(html[data-theme="dark"]) .redactor-modal-tabs a.active {
    color: var(--dm-link);
    border-bottom-color: var(--dm-link);
}
:where(html[data-theme="dark"]) .redactor-modal .redactor-close {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .redactor-modal label {
    color: var(--dm-text-muted);
}
:where(html[data-theme="dark"]) .redactor-modal .desc {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .redactor-modal fieldset {
    border-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .redactor-modal input,
:where(html[data-theme="dark"]) .redactor-modal select,
:where(html[data-theme="dark"]) .redactor-modal textarea,
:where(html[data-theme="dark"]) .redactor-modal input:hover,
:where(html[data-theme="dark"]) .redactor-modal textarea:hover,
:where(html[data-theme="dark"]) .redactor-modal select:hover,
:where(html[data-theme="dark"]) .redactor-modal input:focus,
:where(html[data-theme="dark"]) .redactor-modal textarea:focus,
:where(html[data-theme="dark"]) .redactor-modal select:focus {
    background-color: var(--dm-input);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .redactor-modal input[type="file"] {
    background-color: transparent;
}
:where(html[data-theme="dark"]) .redactor-modal button {
    color: var(--dm-link);
    background-color: transparent;
    border-color: var(--dm-link);
}
:where(html[data-theme="dark"]) .redactor-modal button.redactor-button-secondary {
    border-color: var(--dm-text-muted);
    color: var(--dm-text-muted);
}
:where(html[data-theme="dark"]) .redactor-modal button.redactor-button-danger,
:where(html[data-theme="dark"]) .redactor-modal button.redactor-button-unstyled {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .redactor-modal .redactor-toolbar {
    border-bottom-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .redactor-file-item {
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .upload-redactor-box {
    background-color: var(--dm-surface-2);
}
:where(html[data-theme="dark"]) .upload-redactor-placeholder {
    color: var(--dm-text-faint);
}

/* ------------------------------------------------------------------------
 * Select2
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) .select2-dropdown {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--single,
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--multiple {
    background-color: var(--dm-input);
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--single .select2-selection__rendered,
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--dm-text-muted) transparent transparent transparent;
}
:where(html[data-theme="dark"]) .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--dm-text-muted) transparent;
}
:where(html[data-theme="dark"]) .select2-container--default.select2-container--disabled .select2-selection--single,
:where(html[data-theme="dark"]) .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--dm-surface-3);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--dm-surface-3);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--dm-text-strong);
}
:where(html[data-theme="dark"]) .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--dm-text-muted);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--dm-input);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .select2-results__option {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-results__option[aria-disabled=true] {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--dm-hover);
}
:where(html[data-theme="dark"]) .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dm-selected);
    color: #fff;
}

/* ------------------------------------------------------------------------
 * Datei-Upload (filedrop.css)
 *
 * filedrop.css wird erst mit dem Formular nachgeladen, also nach dieser
 * Datei. Deshalb hier html[data-theme="dark"] statt :where(…), sonst
 * gewänne bei gleicher Spezifität die nachgeladene Datei.
 * ------------------------------------------------------------------------ */
html[data-theme="dark"] .filedrop .dropzone {
    border-color: var(--dm-border);
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--dm-text-faint);
}
html[data-theme="dark"] .filedrop .dropzone a {
    color: var(--dm-link);
}
html[data-theme="dark"] .filedrop .files:not(:empty) {
    border-color: var(--dm-border);
}
html[data-theme="dark"] .filedrop .files .file:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .filedrop .files .file .filesize,
html[data-theme="dark"] .filedrop .files .file .upload-rate {
    color: var(--dm-text-faint);
}
html[data-theme="dark"] .progress {
    background-color: var(--dm-surface-3);
}
html[data-theme="dark"] .progress-bar {
    background-color: #2d6aa3;
}
html[data-theme="dark"] .progress-bar[aria-valuenow="0"] {
    color: var(--dm-text-faint);
}

/* ------------------------------------------------------------------------
 * Typeahead-Vorschläge (typeahead.css)
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) .dropdown-menu {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    box-shadow: 0 10px 15px -5px var(--dm-shadow);
}
:where(html[data-theme="dark"]) .dropdown-menu .divider {
    background-color: var(--dm-border-soft);
    border-bottom-color: var(--dm-surface-2);
}
:where(html[data-theme="dark"]) .dropdown-menu a {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .dropdown-menu li > a:hover,
:where(html[data-theme="dark"]) .dropdown-menu .active > a,
:where(html[data-theme="dark"]) .dropdown-menu .active > a:hover {
    color: #fff;
    background-color: var(--dm-selected);
}
:where(html[data-theme="dark"]) .dropdown-menu li + li {
    border-top-color: var(--dm-border-soft);
}

/* ------------------------------------------------------------------------
 * jQuery UI (Datepicker, Dialoge, Autocomplete)
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) .ui-widget.ui-widget-content,
:where(html[data-theme="dark"]) .ui-widget-content {
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .ui-widget-content {
    background: var(--dm-surface-2);
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .ui-widget-content a {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .ui-widget-header {
    border-color: #a8650c;
    background: #8a520b;
    color: #fff;
}
:where(html[data-theme="dark"]) .ui-state-default,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-default,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-default,
:where(html[data-theme="dark"]) .ui-button {
    border-color: var(--dm-border);
    background: var(--dm-surface-3);
    color: var(--dm-link);
}
:where(html[data-theme="dark"]) .ui-state-default a,
:where(html[data-theme="dark"]) .ui-state-default a:link,
:where(html[data-theme="dark"]) .ui-state-default a:visited,
:where(html[data-theme="dark"]) a.ui-button,
:where(html[data-theme="dark"]) a:link.ui-button,
:where(html[data-theme="dark"]) a:visited.ui-button {
    color: var(--dm-link);
}
:where(html[data-theme="dark"]) .ui-state-hover,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-hover,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-hover,
:where(html[data-theme="dark"]) .ui-state-focus,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-focus,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-focus,
:where(html[data-theme="dark"]) .ui-button:hover,
:where(html[data-theme="dark"]) .ui-button:focus {
    border-color: #c08a1e;
    background: #4a3a17;
    color: #ffd18a;
}
:where(html[data-theme="dark"]) .ui-state-hover a,
:where(html[data-theme="dark"]) .ui-state-hover a:hover,
:where(html[data-theme="dark"]) .ui-state-hover a:link,
:where(html[data-theme="dark"]) .ui-state-hover a:visited,
:where(html[data-theme="dark"]) .ui-state-focus a,
:where(html[data-theme="dark"]) .ui-state-focus a:hover,
:where(html[data-theme="dark"]) .ui-state-focus a:link,
:where(html[data-theme="dark"]) .ui-state-focus a:visited,
:where(html[data-theme="dark"]) a.ui-button:hover,
:where(html[data-theme="dark"]) a.ui-button:focus {
    color: #ffd18a;
}
:where(html[data-theme="dark"]) .ui-state-active,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-active,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-active,
:where(html[data-theme="dark"]) a.ui-button:active,
:where(html[data-theme="dark"]) .ui-button:active,
:where(html[data-theme="dark"]) .ui-button.ui-state-active:hover {
    border-color: #d7a12a;
    background: #5a4210;
    color: #ffc04d;
}
:where(html[data-theme="dark"]) .ui-state-active a,
:where(html[data-theme="dark"]) .ui-state-active a:link,
:where(html[data-theme="dark"]) .ui-state-active a:visited {
    color: #ffc04d;
}
:where(html[data-theme="dark"]) .ui-state-highlight,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-highlight,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-highlight {
    border-color: #b8961a;
    background: #4d420f;
    color: #ffe9a0;
}
:where(html[data-theme="dark"]) .ui-state-highlight a,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-highlight a,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-highlight a {
    color: #ffe9a0;
}
:where(html[data-theme="dark"]) .ui-icon,
:where(html[data-theme="dark"]) .ui-widget-content .ui-icon {
    background-image: url("ui-lightness/images/ui-icons_ffffff_256x240.png");
}
:where(html[data-theme="dark"]) .ui-widget-overlay {
    background: #000;
}
:where(html[data-theme="dark"]) .ui-widget-shadow {
    box-shadow: -5px -5px 5px #000;
}
:where(html[data-theme="dark"]) .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
    border-bottom-color: var(--dm-border);
}

/* ------------------------------------------------------------------------
 * Hilfethemen-Auswahl als Baum (jstree_element.css)
 * ------------------------------------------------------------------------ */
/* Das Pfeil-PNG des Eingabefelds hat einen weißen Hintergrund
 * (im Original mit !important gesetzt) */
:where(html[data-theme="dark"]) .jsTreeDisplayField {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M5 8l4.5 4.5L14 8' fill='none' stroke='%23b0b5ba' stroke-width='2'/%3E%3C/svg%3E") !important;
}
:where(html[data-theme="dark"]) .jsTreeBox {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .jstree-anchor {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .jstree-default .jstree-hovered,
:where(html[data-theme="dark"]) .jstree-default .jstree-context,
:where(html[data-theme="dark"]) .jstree-default .jstree-wholerow-hovered,
:where(html[data-theme="dark"]) .jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered,
:where(html[data-theme="dark"]) .jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered {
    background: var(--dm-hover);
    box-shadow: none;
}
:where(html[data-theme="dark"]) .jstree-default .jstree-clicked,
:where(html[data-theme="dark"]) .jstree-default .jstree-wholerow-clicked {
    background: var(--dm-selected);
    box-shadow: none;
}
:where(html[data-theme="dark"]) .jstree-default .jstree-disabled {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .jstree-default .jstree-disabled.jstree-clicked {
    background: var(--dm-surface-3);
}
:where(html[data-theme="dark"]) .jstree-default .jstree-search {
    color: #ff8f8f;
}
:where(html[data-theme="dark"]) .vakata-context,
:where(html[data-theme="dark"]) .vakata-context ul {
    background: var(--dm-surface-2);
    box-shadow: 2px 2px 2px var(--dm-shadow);
}
:where(html[data-theme="dark"]) .vakata-context li > a {
    color: var(--dm-text);
    text-shadow: none;
}
:where(html[data-theme="dark"]) .vakata-context li > a:hover,
:where(html[data-theme="dark"]) .vakata-context .vakata-context-hover > a {
    background-color: var(--dm-hover);
}

/* ------------------------------------------------------------------------
 * Plus: Kalenderwoche im Datepicker (osticket.css / scp.css)
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) .ui-datepicker-week-col {
    background-color: var(--dm-surface-3);
}
/* Anpassung Ende: Darkmode */