/**
 * darkmode.css
 * Dark Mode Overlay für das WebsiteBaker Admin-Theme
 *
 * KONZEPT: Diese Datei überschreibt NUR die neutralen Farben (Hintergründe,
 * Texte, Ränder). Die Akzentfarbe kommt weiterhin aus dem gewählten
 * Farb-Theme (w3-theme-wb.css etc.) und bleibt davon unberührt.
 *
 * Aktivierung: body.dark-mode { ... }
 *
 * @author           Dark Mode Extension für WB-Admin-Theme
 * @license          GNU General Public License 2.0
 */

/* ==========================================================================
   1. CSS-VARIABLEN: Die Basis – alle neutralen Farben überschreiben
   ========================================================================== */

body.dark-mode {
    /* Hintergründe */
    --white:             #1e1e2e;    /* Seiten- und Karten-Hintergrund */
    --light:             #2a2a3c;    /* Panels, Sidebar, Card-Backgrounds */
    --gray:              #6b7280;    /* Gedämpfte Grautöne */
    --darkgray:          #9ca3af;

    /* Text */
    --black:             #cbd5e1;    /* Primärer Fließtext */

    /* Ränder */
    --border-color:      #3a3a52;    /* Trennlinien, Tabellenränder */
    --input-border-color:#4a4a62;    /* Input-Felder */

    /* Link-Farben bleiben theme-abhängig, leicht aufgehellt für Lesbarkeit */
    --link:              var(--secondary);
    --link-hover:        var(--primary-light);
}

/* ==========================================================================
   2. BODY & GRUNDLEGENDES LAYOUT
   ========================================================================== */

body.dark-mode,
html body.dark-mode {
    background-color: #16161e !important;
    color: var(--black) !important;
}

/* Verhindert das helle Durchschimmern unter dem Footer
   (body ist oft größer als der sichtbare Inhalt) */
html:has(body.dark-mode) {
    background-color: #16161e !important;
}

/* Paragraphen, Standard-Text */
body.dark-mode p,
body.dark-mode span:not([class*="fa"]):not([class*="w3-theme-color"]) {
    color: inherit;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #c9d1d9 !important;
}

body.dark-mode a {
    color: var(--link);
}
body.dark-mode a:hover {
    color: var(--link-hover);
}

/* hr & Trennlinien */
body.dark-mode hr,
body.dark-mode .w3-border-top,
body.dark-mode .w3-border-bottom,
body.dark-mode .w3-border-left,
body.dark-mode .w3-border-right,
body.dark-mode .w3-table-all {
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   3. TOP-BAR (bleibt theme-farbig, keine Anpassung nötig)
   ========================================================================== */

/* Die Top-Bar hat .w3-theme und bleibt damit in der Akzentfarbe.
   Nur der Hover-Overlay für Icons wird minimal angepasst: */
body.dark-mode #wb-top-icons .w3-button:hover,
body.dark-mode #wb-top-icons a.w3-button:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================================================
   4. SIDEBAR (bleibt theme-farbig, keine Anpassung nötig)
   ========================================================================== */

/* Sidebar hat .w3-theme-d4/.w3-theme und kommt direkt aus dem Theme.
   Nur aktive Menüpunkte haben hardkodierte Farben: */
body.dark-mode #sidebar .active {
    color: var(--light) !important;
    background: rgba(255, 255, 255, 0.18) !important;
}

/* ==========================================================================
   5. HAUPT-INHALTSBEREICH
   ========================================================================== */

/* Info-Bar & Breadcrumb */
body.dark-mode #info-bar2 {
    background-color: #25253a !important;
    color: #94a3b8;
    border-bottom: 1px solid var(--border-color);
}

/* Cards / Panels */
body.dark-mode .w3-card,
body.dark-mode .w3-card-2,
body.dark-mode .w3-card-4 {
    background-color: #25253a !important;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.4);
}

/* Weißer Hintergrund-Bereich */
body.dark-mode .w3-white {
    background-color: #25253a !important;
    color: var(--black) !important;
}

body.dark-mode .w3-light-grey,
body.dark-mode .w3-lightgrey,
body.dark-mode .w3-pale-blue,
body.dark-mode .w3-pale-green,
body.dark-mode .w3-pale-yellow,
body.dark-mode .w3-pale-red,
body.dark-mode .w3-theme-l4,
body.dark-mode .w3-theme-l5,
body.dark-mode #welcome-message-container .w3-panel {
    background-color: #2d2d42 !important;
    color: var(--black) !important;
    border-color: var(--border-color) !important;
}

/* Allgemeine Container */
body.dark-mode .w3-container {
    color: inherit;
}

/* ==========================================================================
   6. BLOCK-OUTER (das Glassmorphism-Element)
   ========================================================================== */

body.dark-mode .block-outer {
    border-color: #3a3a52 !important;
    background: rgba(37, 37, 58, 0.85) !important;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   7. DASHBOARD TILES
   ========================================================================== */

body.dark-mode .tile-link {
    background-color: #25253a !important;
}

body.dark-mode .tile-title,
body.dark-mode .tile-description {
    color: var(--primary-light) !important;
}

body.dark-mode .dashboard-tile:hover,
body.dark-mode .dashboard-tile-small:hover,
body.dark-mode .dashboard-tile.tile-link:hover,
body.dark-mode .dashboard-grid .dashboard-tile:hover,
body.dark-mode .overview-grid .dashboard-tile:hover {
    background-color: #2b2b42 !important;
    border-color: #4a4a68 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    filter: none !important;
}

body.dark-mode .dashboard-grid .dashboard-tile,
body.dark-mode .overview-grid .dashboard-tile {
    background: #25253a !important;
    border-color: #3a3a52;
    color: var(--primary-light);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.dark-mode .dashboard-grid .dashboard-tile::after,
body.dark-mode .overview-grid .dashboard-tile::after {
    opacity: 0.45;
}

body.dark-mode .dashboard-grid .tile-icon,
body.dark-mode .overview-grid .tile-icon {
    background: #30304a;
    border-color: #484866;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

body.dark-mode #admintools-container.overview-grid .tile-icon {
    background:
        linear-gradient(135deg, rgba(48, 48, 74, 0.96), rgba(37, 37, 58, 0.92)),
        color-mix(in srgb, var(--tile-accent, var(--primary)) 16%, #30304a) !important;
    border-color: color-mix(in srgb, var(--tile-accent, var(--primary)) 26%, #484866) !important;
}

body.dark-mode .dashboard-grid .tile-title,
body.dark-mode .dashboard-grid .tile-description,
body.dark-mode .overview-grid .tile-title,
body.dark-mode .overview-grid .tile-description {
    color: var(--primary-light) !important;
}

/* ==========================================================================
   8. TABELLEN
   ========================================================================== */

body.dark-mode .w3-table td,
body.dark-mode .w3-table-all td,
body.dark-mode .w3-table-all th {
    border-color: var(--border-color) !important;
    color: var(--black) !important;
}

body.dark-mode .w3-table-all tr:hover {
    background-color: #2d2d42 !important;
}

/* pages_view Zebra-Stripes */
body.dark-mode .pages_view tbody tr {
    background-color: #25253a !important;
}
body.dark-mode .pages_view tbody tr:nth-child(odd) {
    background-color: #2a2a3c !important;
}
body.dark-mode .pages_view tbody tr:nth-child(even) {
    background-color: #25253a !important;
}
body.dark-mode .pages_view tbody tr:hover {
    background-color: #35354e !important;
}

body.dark-mode .pages_view th,
body.dark-mode .pages_view td {
    border-bottom-color: var(--border-color) !important;
    color: var(--black) !important;
}

/* addon-table */
body.dark-mode .addon-table tr {
    border-bottom-color: var(--border-color) !important;
}

/* ==========================================================================
   9. FORMULARELEMENTE
   ========================================================================== */

/* Formular-Labels ("Sprache:", "Zeitzone:", "E-Mail:", "Gruppe:" etc.) in edlem Silber-Slate */
body.dark-mode table.form-table {
    table-layout: fixed !important;
    width: 100% !important;
}

body.dark-mode .form-label-cell,
body.dark-mode .form-label-cell label,
body.dark-mode table.form-table td:first-child,
body.dark-mode .form-table td.form-label-cell_permissions,
body.dark-mode .user-form-label,
body.dark-mode .user-form-label label {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    text-align: right !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

body.dark-mode table.form-table td.form-label-cell,
body.dark-mode table.form-table td:first-child {
    width: 35% !important;
}

/* Benutzerverwaltung: Gruppen-Checkbox-Box & Mehrfachauswahlen im Dark Mode */
body.dark-mode .user-groups-checkboxes,
body.dark-mode select[multiple] {
    background-color: #161625 !important;
    background: #161625 !important;
    border: 1px solid #3b3b58 !important;
    color: #cbd5e1 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .user-group-checkbox span {
    color: #cbd5e1 !important;
}

body.dark-mode .user-group-checkbox:hover {
    background-color: #25253e !important;
    background: #25253e !important;
}

body.dark-mode .user-group-checkbox:hover span {
    color: #ffffff !important;
}

/* Vertiefte Formular-Eingabefelder & Select-Boxen (Rechts) */
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .w3-input,
body.dark-mode .w3-select {
    background-color: #161625 !important;
    background: #161625 !important;
    border: 1px solid #3b3b58 !important;
    color: #d5dde8 !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

body.dark-mode input[type="text"]:hover,
body.dark-mode input[type="password"]:hover,
body.dark-mode input[type="email"]:hover,
body.dark-mode input[type="number"]:hover,
body.dark-mode textarea:hover,
body.dark-mode select:hover,
body.dark-mode .w3-select:hover {
    border-color: #5478a8 !important;
    background-color: #1a1a2e !important;
}

body.dark-mode input:disabled,
body.dark-mode textarea:disabled,
body.dark-mode select:disabled {
    background-color: #2a2a3c !important;
    color: #6b7280 !important;
}

body.dark-mode select.w3-input:focus,
body.dark-mode select.w3-select:focus,
body.dark-mode textarea.w3-input:focus,
body.dark-mode input.w3-input:focus,
body.dark-mode select:focus,
body.dark-mode input[type="text"]:focus {
    border-color: var(--primary-light, #9bc2ed) !important;
    background-color: #1a1a2e !important;
    box-shadow: 0 0 0 3px rgba(155, 194, 237, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Select-Boxen mit klarem Pfeil-Icon und ausgeblendetem Browser-Pfeil */
body.dark-mode select:not(.backend-custom-select-native),
body.dark-mode .w3-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239bc2ed' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.2rem !important;
}

/* Placeholder */
body.dark-mode ::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

/* Radio- & Checkbox-Optionen im Dark Mode ohne Pill-Rahmen */
body.dark-mode .check-container {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 12px 0 0 !important;
    margin-right: 8px !important;
    color: #cbd5e1 !important;
}

body.dark-mode .check-container:hover {
    color: #ffffff !important;
}

body.dark-mode .check-container:has(input:checked) {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.dark-mode input[type="radio"],
body.dark-mode input[type="checkbox"],
body.dark-mode .w3-radio,
body.dark-mode .w3-check {
    accent-color: #4caf50 !important;
    background-color: #161625 !important;
    border-color: #5478a8 !important;
    color-scheme: dark !important;
}

body.dark-mode table input[type="checkbox"],
body.dark-mode .media-table input[type="checkbox"],
body.dark-mode .file-browser-table input[type="checkbox"],
body.dark-mode .file-browser-table input.bulk-file-checkbox,
body.dark-mode .file-browser-table #bulk-select-all-files,
body.dark-mode input.bulk-file-checkbox,
body.dark-mode #bulk-select-all-files,
body.dark-mode th input[type="checkbox"],
body.dark-mode td input[type="checkbox"] {
    background-color: #161625 !important;
    background: #161625 !important;
    accent-color: #4caf50 !important;
    border-color: #5478a8 !important;
    color-scheme: dark !important;
}

body.dark-mode .radiobtn,
body.dark-mode .checkbtn {
    background-color: #161625 !important;
    border: 1px solid #4a4a62 !important;
    box-shadow: none !important;
}

body.dark-mode .check-container:hover input ~ .radiobtn,
body.dark-mode .check-container:hover input ~ .checkbtn {
    background-color: #25253e !important;
    border-color: #5478a8 !important;
}

body.dark-mode .check-container input:checked ~ .radiobtn,
body.dark-mode .check-container input:checked ~ .checkbtn {
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
    box-shadow: none !important;
}

body.dark-mode .check-container .radiobtn:after {
    background-color: #ffffff !important;
}

/* ==========================================================================
   10. BUTTONS
   ========================================================================== */

/* Sekundär-/Grau-Buttons */
body.dark-mode .btn-secondary {
    background-color: #3a3a52 !important;
    border-color: #4a4a62 !important;
    color: #e2e8f0 !important;
}
body.dark-mode .btn-secondary:hover {
    background-color: #4a4a62 !important;
}

/* Standard w3-button ohne Farbklasse */
body.dark-mode .w3-button:not([class*="w3-theme"]):not([class*="btn-"]):not([class*="w3-blue"]):not([class*="w3-red"]):not([class*="w3-green"]):not([class*="w3-orange"]):not([class*="w3-grey"]) {
    color: #e2e8f0;
}

/* ==========================================================================
   11. CODE-BLÖCKE
   ========================================================================== */

body.dark-mode code {
    background-color: #2d2d42 !important;
    border-color: var(--border-color) !important;
    color: #f08080 !important;
}

body.dark-mode pre {
    background-color: #1e1e2e !important;
    color: #e2e8f0 !important;
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   12. STATUS- UND NACHRICHTEN-BOXEN
   ========================================================================== */

/* section-info (hellblauer Hintergrund) */
body.dark-mode .section-info {
    background-color: #2d2d42 !important;
    color: var(--black);
}

/* Msg / Error / Success Boxen – Ränder bleiben, BG wird dunkler */
body.dark-mode .msg-box {
    background: #1a2e1a !important;
    color: #86efac !important;
}
body.dark-mode .error-box,
body.dark-mode .warning-box {
    background: #2e1a1a !important;
    color: #fca5a5 !important;
}
body.dark-mode .success-box {
    background: #1a2e1a !important;
    color: #86efac !important;
}

body.dark-mode .note {
    background-color: #1a2a1a !important;
    color: #86efac !important;
}

/* message-box (Modal) */
body.dark-mode .message-box {
    background-color: #25253a !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .message-box-text {
    color: var(--black) !important;
}

/* ==========================================================================
   13. PERMISSION GROUP HEADER
   ========================================================================== */

body.dark-mode .permission-group-header {
    background-color: #2d2d42 !important;
    border-color: var(--border-color) !important;
    color: var(--black) !important;
}

/* ==========================================================================
   14. SEARCH-ERGEBNISSE
   ========================================================================== */

body.dark-mode #admin-search-results {
    background-color: #25253a !important;
    border: 1px solid var(--border-color) !important;
    color: var(--black) !important;
}
body.dark-mode #admin-search-results a.w3-bar-item {
    color: var(--black) !important;
    border-bottom-color: var(--border-color) !important;
}
body.dark-mode #admin-search-results a.w3-bar-item:hover {
    background-color: #35354e !important;
}

/* Sucheingabefeld (hat eigene Klasse .w3-gray-lighter) */
body.dark-mode #admin-search-input {
    background-color: rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* ==========================================================================
   15. DEBUG-INFOBAR (Footer)
   ========================================================================== */

body.dark-mode .w3-pale-green {
    background-color: #2d6a4f !important;
    color: #cbd5e1 !important;
}

body.dark-mode .w3-border-green {
    border-color: rgba(16, 185, 129, 0.35) !important;
}

body.dark-mode .w3-text-green {
    color: #6ee7b7 !important;
}


body.dark-mode .w3-light-green,
body.dark-mode .w3-hover-light-green:hover {
    background-color: #2f5f3f !important;
    border-color: #4f7f5c !important;
    color: #e8f5e9 !important;
}

body.dark-mode .w3-light-green *,
body.dark-mode .w3-hover-light-green:hover * {
    color: #e8f5e9 !important;
}

body.dark-mode #tooltip.w3-public,
body.dark-mode #tooltip.w3-private,
body.dark-mode #tooltip.w3-registered,
body.dark-mode #tooltip.w3-hidden,
body.dark-mode #tooltip.w3-none {
    color: var(--text-primary) !important;
}

body.dark-mode #tooltip.w3-public {
    background-color: #213b2b !important;
    border-color: #4f7f5c !important;
}

body.dark-mode #tooltip.w3-private {
    background-color: #463b22 !important;
    border-color: #9d7622 !important;
}

body.dark-mode #tooltip.w3-registered {
    background-color: #23364f !important;
    border-color: #557799 !important;
}

body.dark-mode #tooltip.w3-hidden {
    background-color: #3f3a24 !important;
    border-color: #8b7d2b !important;
}

body.dark-mode #tooltip.w3-none {
    background-color: #47282d !important;
    border-color: #8f4c56 !important;
}

body.dark-mode #tooltip span {
    color: var(--text-primary) !important;
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */

body.dark-mode .footer-main {
    background-color: #1e1e2e !important;
    color: #6b7280 !important;
    border-top: 1px solid var(--border-color);
}

body.dark-mode .footer-main a {
    color: var(--secondary) !important;
}

/* ==========================================================================
   17. JSANEL (Modal-Panels)
   ========================================================================== */

body.dark-mode .jspanel-content {
    background-color: #25253a !important;
    color: var(--black) !important;
}
body.dark-mode #errorlog-iframe,
body.dark-mode #sysinfo-iframe {
    background: #1e1e2e !important;
    filter: none !important;
}

/* ==========================================================================
   18. TITLE-LINE & SECTION DIVIDERS
   ========================================================================== */

body.dark-mode .title-line {
    border-bottom-color: var(--border-color) !important;
}
body.dark-mode .title-line h2 {
    color: #c9d1d9 !important;
}

/* ==========================================================================
   19. CUSTOM CHECKBOXEN
   ========================================================================== */

body.dark-mode .custom-checkbox {
    background-color: #2a2a3c !important;
    border-color: var(--input-border-color) !important;
}

body.dark-mode .custom-checkbox-label input[type="checkbox"]:checked ~ .custom-checkbox {
    background-color: #40668c !important;
    border-color: #6f8fb0 !important;
}

body.dark-mode .custom-checkbox-label input[type="checkbox"]:checked ~ .custom-checkbox::after {
    border-color: #f5f7fb !important;
}

body.dark-mode .custom-checkbox-container label::before {
    background-color: #2a2a3c !important;
    border-color: var(--secondary) !important;
}

/* ==========================================================================
   20. STATUS SLIDER (User aktiv/inaktiv Switch)
   ========================================================================== */

body.dark-mode .status-slider {
    background-color: #4a4a62 !important;
}
body.dark-mode .status-slider:before {
    background-color: #9ca3af !important;
}
body.dark-mode input:checked + .status-slider {
    background-color: var(--success) !important;
}
body.dark-mode input:checked + .status-slider:before {
    background-color: #ffffff !important;
}

/* ==========================================================================
   21. USER-STATUS TEXT
   ========================================================================== */

body.dark-mode .user-inactive {
    color: #6b7280 !important;
}
body.dark-mode .user-active {
    color: #e2e8f0 !important;
}

/* ==========================================================================
   22. SWEETALERT2 IM DARK MODE
   ========================================================================== */

body.dark-mode .swal2-popup {
    background-color: #25253a !important;
    color: #e2e8f0 !important;
}
body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
    color: #e2e8f0 !important;
}

/* ==========================================================================
   23. DARK-MODE-TOGGLE BUTTON (Der Schalter selbst)
   ========================================================================== */

#darkmode-toggle-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 10px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin: 0 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#darkmode-toggle-wrapper:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

#darkmode-toggle-icon {
    font-size: 18px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.4s ease;
}

#darkmode-toggle-wrapper:hover #darkmode-toggle-icon {
    opacity: 1;
}

/* Icon-Rotation beim Umschalten */
body.dark-mode #darkmode-toggle-icon {
    transform: rotate(180deg);
    opacity: 1;
}

/* ==========================================================================
   24. W3.CSS HELPER-KLASSEN IM DARK MODE ANPASSEN
   ========================================================================== */

/* Hellgraue Hintergründe (z.B. in Listenelementen) */
body.dark-mode .w3-grey,
body.dark-mode .w3-gray {
    background-color: #3a3a52 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .w3-light-grey,
body.dark-mode .w3-light-gray {
    background-color: #2d2d42 !important;
    color: #e2e8f0 !important;
}

/* w3-border allgemein */
body.dark-mode .w3-border {
    border-color: var(--border-color) !important;
}

body.dark-mode .w3-light-border,
body.dark-mode .w3-lighter-border {
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   25. BACKEND-SPEZIFISCHE KONTRASTKORREKTUREN
   ========================================================================== */

body.dark-mode #main-horizontal-nav .active-menu-item,
body.dark-mode #main-horizontal-nav .active-menu-item .menu-text {
    color: #d8e2ee !important;
}

body.dark-mode #main-horizontal-nav .active-menu-item:hover,
body.dark-mode #main-horizontal-nav .active-menu-item:hover .menu-text {
    color: #edf3f8 !important;
}

body.dark-mode #main-horizontal-nav .w3-bar-item:hover,
body.dark-mode #main-horizontal-nav .w3-bar-item:hover .menu-text {
    color: #edf3f8 !important;
}

body.dark-mode #main-horizontal-nav .w3-bar-item:not(.active-menu-item):not(:hover),
body.dark-mode #main-horizontal-nav .w3-bar-item:not(.active-menu-item):not(:hover) .menu-text {
    color: #dbe6f3 !important;
}

body.dark-mode #admin-search-input {
    color: #dbe6f3 !important;
}

body.dark-mode #admin-search-input::placeholder {
    color: #b6c5d6 !important;
}

body.dark-mode #js-resize-info-display {
    color: #8fb8df !important;
}

body.dark-mode .media-block .w3-pale-grey .w3-panel {
    color: #c0c8d4 !important;
}

body.dark-mode .media-block > .w3-bar,
body.dark-mode .media-block > .w3-bar label,
body.dark-mode .media-block > .w3-bar a {
    color: #9fbfdd !important;
}

body.dark-mode .media-block > .w3-bar a:hover {
    color: #c4daf0 !important;
}

body.dark-mode #media-actions-card > .w3-bar {
    background-color: #1e1e2e !important;
    border-bottom: 1px solid var(--border-color) !important;
}

body.dark-mode #media-actions-card .w3-bar .tab-link,
body.dark-mode .media-block .w3-bar .tab-link {
    background-color: #2d3c52 !important;
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode #media-actions-card .w3-bar .tab-link:hover,
body.dark-mode .media-block .w3-bar .tab-link:hover {
    background-color: #40668c !important;
    color: #edf3f8 !important;
}

body.dark-mode #media-actions-card .w3-bar .tab-link.w3-theme-d2,
body.dark-mode #media-actions-card .w3-bar .tab-link.active,
body.dark-mode .media-block .w3-bar .tab-link.w3-theme-d2,
body.dark-mode .media-block .w3-bar .tab-link.active {
    background-color: #557799 !important;
    border-color: #557799 !important;
    color: #edf3f8 !important;
}

body.dark-mode .tile-description a.wb-bold {
    color: #8fb8df !important;
}

body.dark-mode .tile-description a.wb-bold:hover {
    color: #b7d2ec !important;
}

body.dark-mode #default_language option,
body.dark-mode #language option,
body.dark-mode #dsgvo option {
    background-color: #1e1e2e !important;
    color: #d8e2ee !important;
    border-bottom-color: #3a3a52 !important;
}

body.dark-mode #default_language option[selected],
body.dark-mode #language option[selected],
body.dark-mode #dsgvo option[selected],
body.dark-mode #default_language option:checked,
body.dark-mode #language option:checked,
body.dark-mode #dsgvo option:checked {
    background-color: #557799 !important;
    color: #f0f5fb !important;
}

body.dark-mode #default_language option:hover,
body.dark-mode #language option:hover,
body.dark-mode #dsgvo option:hover {
    background-color: #2d2d42 !important;
    color: #edf3f8 !important;
}

body.dark-mode .btn-warning,
body.dark-mode .w3-orange {
    background-color: #c77712 !important;
    color: #16161e !important;
}

body.dark-mode .btn-warning:hover,
body.dark-mode .w3-hover-orange:hover {
    background-color: #a96510 !important;
    color: #f0f5fb !important;
}

body.dark-mode .w3-red {
    background-color: #d4443d !important;
    color: #f5f7fb !important;
}

body.dark-mode .w3-red:hover {
    background-color: #b93a34 !important;
}

body.dark-mode .title-line.button-bar .btn.w3-disabled,
body.dark-mode .title-line.button-bar .btn.w3-disabled:hover {
    background-color: #557799 !important;
    color: #d8e2ee !important;
    opacity: 1;
}

body.dark-mode .w3-text-grey,
body.dark-mode .w3-text-gray {
    color: #aeb7c4 !important;
}

body.dark-mode .w3-text-red {
    color: #ff8a80 !important;
}

body.dark-mode .w3-blue-wb .w3-text-yellow {
    color: #ffe082 !important;
}

body.dark-mode .pages_view .col-menu-title a,
body.dark-mode .pages_view .col-actions a,
body.dark-mode .footer-main a {
    color: #8fb8df !important;
}

body.dark-mode .pages_view .col-menu-title a:hover,
body.dark-mode .pages_view .col-actions a:hover,
body.dark-mode .footer-main a:hover {
    color: #b7d2ec !important;
}

body.dark-mode .pages_view .col-page-title,
body.dark-mode .pages_view .col-page-title .title-content,
body.dark-mode .pages_view .col-id,
body.dark-mode .pages_view .col-lang {
    color: #c0c8d4 !important;
}

body.dark-mode .elfinder {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .elfinder .ui-widget-content,
body.dark-mode .elfinder .elfinder-workzone,
body.dark-mode .elfinder .elfinder-cwd {
    background-color: #1e1e2e !important;
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .elfinder .elfinder-navbar,
body.dark-mode .elfinder .elfinder-statusbar {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    color: #c0c8d4 !important;
}

body.dark-mode .elfinder .elfinder-toolbar,
body.dark-mode .elfinder .elfinder-button {
    background-color: #40668c !important;
    border-color: #557799 !important;
}

body.dark-mode .elfinder .elfinder-cwd-file,
body.dark-mode .elfinder .elfinder-cwd-filename {
    color: #d8e2ee !important;
}

body.dark-mode .collapsible-container .collapsible-header {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .collapsible-container .collapsible-header:hover {
    background-color: #2d2d42 !important;
    color: #edf3f8 !important;
}

body.dark-mode .collapsible-container .collapsible-header:after {
    color: #aeb7c4 !important;
}

body.dark-mode .collapsible-container .collapsible-content {
    border-color: var(--border-color) !important;
}

body.dark-mode .droplets-block #DropletsTable,
body.dark-mode .droplets-block #DropletsTable tbody,
body.dark-mode .droplets-block #DropletsTable tr,
body.dark-mode .droplets-block #DropletsTable td {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .droplets-block #tableData tbody tr {
    background-color: #1e1e2e !important;
    color: #c0c8d4 !important;
}

body.dark-mode .droplets-block #tableData tbody tr:nth-child(even) {
    background-color: #25253a !important;
}

body.dark-mode .droplets-block #tableData tbody tr:hover {
    background-color: #2d2d42 !important;
}

body.dark-mode .droplets-block #tableData tbody td {
    border-color: var(--border-color) !important;
    color: #c0c8d4 !important;
}

body.dark-mode .droplets-block .noButton,
body.dark-mode .droplets-block .truncate,
body.dark-mode .droplets-block #dr-legende {
    color: #c0c8d4 !important;
}

body.dark-mode .droplets-block .noInput,
body.dark-mode .droplets-block .w3-light-grey {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .captcha-block .w3-sand,
body.dark-mode .captcha-block .w3-panel.w3-sand {
    background-color: #efe6cf !important;
    border-color: #557799 !important;
    color: #242536 !important;
}

body.dark-mode .captcha-block .w3-sand p,
body.dark-mode .captcha-block .w3-panel.w3-sand p {
    color: #242536 !important;
}

body.dark-mode .captcha-block table.form-table,
body.dark-mode .captcha-block table.form-table tbody,
body.dark-mode .captcha-block table.form-table tr,
body.dark-mode .captcha-block table.form-table th,
body.dark-mode .captcha-block table.form-table td {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    color: #c0c8d4 !important;
}

body.dark-mode .captcha-block table.form-table tr:nth-child(even) th,
body.dark-mode .captcha-block table.form-table tr:nth-child(even) td {
    background-color: #1e1e2e !important;
}

body.dark-mode .captcha-block table.form-table tr:hover th,
body.dark-mode .captcha-block table.form-table tr:hover td {
    background-color: #2d2d42 !important;
}

body.dark-mode .captcha-block .cpt-caption {
    background-color: #25253a !important;
    color: #d8e2ee !important;
}

body.dark-mode .captcha-block .cpt-setting_name,
body.dark-mode .captcha-block th span,
body.dark-mode .captcha-block .label,
body.dark-mode .captcha-block label,
body.dark-mode .captcha-block label.w3-validate {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

body.dark-mode .captcha-block .w3-container:has(> .cpt-setting_name) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

body.dark-mode .captcha-block select,
body.dark-mode .captcha-block input[type="text"],
body.dark-mode .captcha-block textarea {
    background-color: #1e1e2e !important;
    border-color: var(--input-border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .captcha-block option {
    background-color: #1e1e2e !important;
    color: #d8e2ee !important;
}

body.dark-mode .captcha-block .checkbtn {
    background-color: #1e1e2e !important;
    border-color: #557799 !important;
}

body.dark-mode .captcha-block .check-container {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding-left: 0 !important;
    margin: 0 !important;
    line-height: 1;
    vertical-align: middle !important;
}

body.dark-mode .captcha-block .check-container .checkbtn {
    position: relative;
    top: auto !important;
    left: auto;
    display: inline-block;
}

body.dark-mode .captcha-block .check-container .checkbtn:after {
    content: "" !important;
    position: absolute;
    display: none;
    left: 8px !important;
    top: 4px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    color: transparent !important;
    font-size: 0 !important;
}

/* Globale Lesbarkeit für Einstellungs-Labels im Dark Mode */
body.dark-mode td.setting_name,
body.dark-mode th.setting_name,
body.dark-mode .setting_name,
body.dark-mode label.setting_name {
    color: #94a3b8 !important;
}

body.dark-mode .captcha-block .check-container input:checked ~ .checkbtn:after {
    display: block;
}

body.dark-mode .block-outer:has(> #jsadmin_form) > h5.w3-note {
    background-color: #efe6cf !important;
    border-left-color: #d2b94f !important;
    color: #242536 !important;
}

body.dark-mode form[name="settings"] .filter-sidebar {
    border-left-color: var(--border-color) !important;
}

body.dark-mode form[name="settings"] .file-browser-scroll-area {
    background-color: #1e1e2e !important;
    border-color: var(--border-color) !important;
}

body.dark-mode form[name="settings"] .file-browser-table tbody tr {
    background-color: #1e1e2e !important;
    color: #c0c8d4 !important;
}

body.dark-mode form[name="settings"] .file-browser-table tbody tr:nth-child(even) {
    background-color: #25253a !important;
}

body.dark-mode form[name="settings"] .file-browser-table tbody tr:not([style*="display: none"]) {
    background-color: #1e1e2e !important;
}

body.dark-mode form[name="settings"] .file-browser-table tbody tr:nth-child(even of :not([style*="display: none"])) {
    background-color: #25253a !important;
}

body.dark-mode form[name="settings"] .file-browser-table tbody tr:hover {
    background-color: #2d2d42 !important;
}

body.dark-mode form[name="settings"] .file-browser-table tbody td,
body.dark-mode form[name="settings"] .file-browser-table .tooltip-trigger {
    border-color: var(--border-color) !important;
    color: #c0c8d4 !important;
}

body.dark-mode form[name="settings"] .w3-panel.w3-sand,
body.dark-mode form[name="settings"] .w3-code.w3-sand {
    background-color: #efe6cf !important;
    border-left-color: #d2b94f !important;
    color: #242536 !important;
}

body.dark-mode form[name="settings"] .w3-panel.w3-sand *,
body.dark-mode form[name="settings"] .w3-code.w3-sand * {
    color: #242536 !important;
}

body.dark-mode form[name="settings"] .w3-panel.w3-yellow {
    background-color: #d8b85a !important;
    border-color: #b88925 !important;
    color: #242536 !important;
}

body.dark-mode form[name="settings"] .w3-panel.w3-yellow * {
    color: #242536 !important;
}

body.dark-mode .tab {
    background-color: #1e1e2e !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .tab button,
body.dark-mode .tab .w3-button {
    background-color: #2d3c52 !important;
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .tab button:hover,
body.dark-mode .tab .w3-button:hover {
    background-color: #40668c !important;
    color: #edf3f8 !important;
}

body.dark-mode .tab button.active,
body.dark-mode .tab .w3-button.active {
    background-color: #25253a !important;
    color: #d8e2ee !important;
}

body.dark-mode .tab button.active:hover,
body.dark-mode .tab .w3-button.active:hover {
    background-color: #2d2d42 !important;
    color: #edf3f8 !important;
}

body.dark-mode #editeditorBlock tr.w3-pale-green,
body.dark-mode #editeditorBlock tr.w3-pale-green td {
    background-color: #1a2e1a !important;
    color: #d8e2ee !important;
}

body.dark-mode #editeditorBlock tr.w3-pale-green button.btn-link,
body.dark-mode #editeditorBlock tr.w3-pale-green i {
    color: #d8e2ee !important;
}

body.dark-mode #groups tr.w3-white,
body.dark-mode #groups tr.w3-theme-l4,
body.dark-mode #groups tr.w3-white td,
body.dark-mode #groups tr.w3-theme-l4 td {
    background-color: #25253a !important;
    color: #d8e2ee !important;
}

body.dark-mode #groups tr.w3-white:nth-child(even),
body.dark-mode #groups tr.w3-theme-l4:nth-child(even),
body.dark-mode #groups tr.w3-white:nth-child(even) td,
body.dark-mode #groups tr.w3-theme-l4:nth-child(even) td {
    background-color: #1e1e2e !important;
}

body.dark-mode #editEditor,
body.dark-mode #editEditor .w3-white {
    background-color: #1e1e2e !important;
    color: #d8e2ee !important;
}

body.dark-mode #editEditor .w3-theme-l4,
body.dark-mode #editEditor .w3-theme-l4 label {
    background-color: #25253a !important;
    color: #d8e2ee !important;
}

body.dark-mode #editEditor .w3-card-2 {
    background-color: #1e1e2e !important;
    color: #d8e2ee !important;
}

body.dark-mode #editEditor .legend {
    color: #aeb7c4 !important;
    margin-left: 0 !important;
}

body.dark-mode #editEditor footer .w3-light-green {
    background-color: #4f7f5c !important;
    border-color: #5f936d !important;
    color: #edf3f8 !important;
}

body.dark-mode #editEditor footer .w3-deep-orange {
    background-color: #9a5a3d !important;
    border-color: #b16b49 !important;
    color: #edf3f8 !important;
}

body.dark-mode #editEditor footer .w3-light-green:hover,
body.dark-mode #editEditor footer .w3-deep-orange:hover {
    filter: brightness(1.08);
    color: #ffffff !important;
}

/* ==========================================================================
   26. ALLGEMEINE LINK- UND MEDIENBROWSER-KORREKTUREN
   ========================================================================== */

body.dark-mode {
    --link: #8fc7ff;
    --link-hover: #b7dcff;
}

body.dark-mode a:not(.w3-button):not([class*="w3-theme"]):not([class*="w3-blue"]):not([class*="w3-green"]):not([class*="w3-red"]):not([class*="w3-orange"]),
body.dark-mode a:visited:not(.w3-button):not([class*="w3-theme"]):not([class*="w3-blue"]):not([class*="w3-green"]):not([class*="w3-red"]):not([class*="w3-orange"]),
body.dark-mode .w3-text-blue-wb,
body.dark-mode .w3-hover-text-blue-wb:hover,
body.dark-mode .w3-text-theme,
body.dark-mode .w3-hover-text-theme:hover,
body.dark-mode [style*="color: #003366"],
body.dark-mode [style*="color:#003366"],
body.dark-mode [style*="color: #2b5580"],
body.dark-mode [style*="color:#2b5580"] {
    color: var(--link) !important;
}

body.dark-mode a:hover:not(.w3-button):not([class*="w3-theme"]):not([class*="w3-blue"]):not([class*="w3-green"]):not([class*="w3-red"]):not([class*="w3-orange"]),
body.dark-mode a:focus:not(.w3-button):not([class*="w3-theme"]):not([class*="w3-blue"]):not([class*="w3-green"]):not([class*="w3-red"]):not([class*="w3-orange"]) {
    color: var(--link-hover) !important;
}

body.dark-mode .file-browser-scroll-area,
body.dark-mode .table-container {
    background-color: #1e1e2e !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .file-browser-table th,
body.dark-mode .browse-table thead th {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .file-browser-table td,
body.dark-mode .browse-table td,
body.dark-mode .browse-table th {
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .file-browser-table tbody tr,
body.dark-mode .browse-table tbody tr,
body.dark-mode .w3-table-all:not(.pages_view) tr:nth-child(odd),
body.dark-mode .w3-table-all:not(.pages_view) tr:nth-child(even),
body.dark-mode .w3-striped tbody tr:nth-child(even) {
    background-color: #1e1e2e !important;
}

body.dark-mode .file-browser-table tbody tr:nth-child(even),
body.dark-mode .browse-table tbody tr:nth-child(even) {
    background-color: #25253a !important;
}

body.dark-mode .file-browser-table tbody tr:hover,
body.dark-mode .browse-table tbody tr:hover,
body.dark-mode .w3-hoverable tbody tr:hover {
    background-color: #2d2d42 !important;
}

body.dark-mode .browse-header {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    color: #d8e2ee !important;
}

body.dark-mode .dimensions,
body.dark-mode .no-items-found {
    color: #aeb7c4 !important;
}

body.dark-mode .image-tooltip-preview {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
}

/* Bulk-Aktionsmenü im Medien-Browser (classic_browser) */
body.dark-mode .bulk-action-panel {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .bulk-move-toggle {
    color: var(--primary-light, #9bc2ed) !important;
    background-color: #1e1e2e !important;
    border-color: var(--input-border-color, #4a4a62) !important;
}

body.dark-mode .bulk-move-toggle:hover:not(:disabled),
body.dark-mode .bulk-move-toggle:focus:not(:disabled) {
    background-color: #2d2d42 !important;
    color: #ffffff !important;
    border-color: var(--primary-light, #9bc2ed) !important;
}

body.dark-mode .bulk-move-label {
    color: var(--black) !important;
}

/* Theme-Textfarben (Überschriften & Titel) im Darkmode aufhellen */
body.dark-mode .w3-theme-color-d4,
body.dark-mode .w3-theme-color-d3,
body.dark-mode .w3-theme-color-d2,
body.dark-mode .w3-theme-color-d1,
body.dark-mode .w3-text-theme,
body.dark-mode .media-global-settings-title span {
    color: var(--primary-light, #9bc2ed) !important;
}

/* Alle Medien-Hinweisboxen (Hauptseite & Medienoptionen) im Captcha-Cremesand-Design (#efe6cf) */
body.dark-mode .media-resize-notice #tooltip,
body.dark-mode .media-resize-notice .w3-public,
body.dark-mode #tooltip.w3-public,
body.dark-mode #create-folder-form .elfinder-media-limit-note.w3-container,
body.dark-mode #create-folder-form .classic-media-limit-note.w3-container,
body.dark-mode .elfinder-media-limit-note.w3-container,
body.dark-mode .classic-media-limit-note.w3-container {
    background: #efe6cf !important;
    background-color: #efe6cf !important;
    border: none !important;
    border-left: 4px solid #f5a623 !important;
    color: #242536 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode .media-resize-notice #tooltip strong,
body.dark-mode #tooltip.w3-public strong,
body.dark-mode #create-folder-form .elfinder-media-limit-note strong,
body.dark-mode #create-folder-form .classic-media-limit-note strong,
body.dark-mode .elfinder-media-limit-note strong,
body.dark-mode .classic-media-limit-note strong {
    color: #1e1e2e !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   CKEDITOR UI & DIALOGS DARK MODE (Option A: Icon Invertierung)
   ========================================================================== */

/* Haupt-Rahmen & Toolbar Container */
body.dark-mode .cke_chrome {
    background-color: #25253a !important;
    border-color: #3a3a52 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .cke_inner,
body.dark-mode .cke_top {
    background: #25253a !important;
    border-bottom-color: #3a3a52 !important;
}

body.dark-mode .cke_bottom {
    background: #1e1e2e !important;
    border-top-color: #3a3a52 !important;
    color: #94a3b8 !important;
}

body.dark-mode .cke_path_item,
body.dark-mode .cke_path_empty {
    color: #9bc2ed !important;
}

/* Button-Gruppen & Einzel-Buttons */
body.dark-mode .cke_toolgroup {
    background: #1e1e2e !important;
    border-color: #4a4a62 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.dark-mode .cke_button {
    background: transparent !important;
}

/* Option A: Schwarze Icons invertieren & Farbton erhalten (hue-rotate), damit sie hellweiss/bunt auf dunkel erscheinen */
body.dark-mode .cke_button_icon,
body.dark-mode .cke_button_arrow,
body.dark-mode .cke_combo_arrow,
body.dark-mode .cke_toolbar_icon {
    filter: invert(0.88) hue-rotate(180deg) brightness(1.15) !important;
}

/* Inaktive / Deaktivierte Buttons dezenter & braunfrei darstellen */
body.dark-mode .cke_button_disabled .cke_button_icon,
body.dark-mode .cke_button_disabled .cke_button_arrow {
    filter: invert(0.4) !important;
    opacity: 0.35 !important;
}

body.dark-mode .cke_button:hover,
body.dark-mode .cke_button:focus {
    background: #2d2d42 !important;
    border-color: #557799 !important;
    box-shadow: none !important;
}

body.dark-mode .cke_button_off:hover,
body.dark-mode .cke_button_off:focus {
    background: #2d2d42 !important;
}

body.dark-mode .cke_button_on {
    background: #353550 !important;
    border-color: var(--primary-light, #9bc2ed) !important;
}

/* Dropdown-Buttons (Format, Stil, Schriftgröße) */
body.dark-mode .cke_combo_button {
    background: #1e1e2e !important;
    border-color: #4a4a62 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.dark-mode .cke_combo_text {
    color: #e2e8f0 !important;
    text-shadow: none !important;
}

body.dark-mode .cke_combo_off a.cke_combo_button:hover,
body.dark-mode .cke_combo_off a.cke_combo_button:focus,
body.dark-mode .cke_combo_on a.cke_combo_button {
    background: #2d2d42 !important;
    border-color: var(--primary-light, #9bc2ed) !important;
}

/* Ausklappbare Panels (Format-/Stil-Listen) */
body.dark-mode .cke_combopanel,
body.dark-mode .cke_panel {
    background-color: #25253a !important;
    border-color: #3a3a52 !important;
}

body.dark-mode .cke_panel_listItem a {
    color: #e2e8f0 !important;
}

body.dark-mode .cke_panel_listItem a:hover,
body.dark-mode .cke_panel_listItem a:focus,
body.dark-mode .cke_panel_listItem.cke_selected a {
    background-color: #2d2d42 !important;
    color: #ffffff !important;
}

/* Inhalts-Frame Umrandung */
body.dark-mode .cke_contents {
    background-color: #1e1e2e !important;
    border-color: #3a3a52 !important;
}

/* CKEditor Dialog-Fenster (Link einfügen, Bild-Eigenschaften, Droplets etc.) */
body.dark-mode .cke_dialog_body,
body.dark-mode .cke_dialog_contents,
body.dark-mode .cke_dialog_contents_body,
body.dark-mode .cke_dialog_page_contents {
    background-color: #25253a !important;
    background: #25253a !important;
    border-color: #3a3a52 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .cke_dialog_title {
    color: var(--primary-light, #9bc2ed) !important;
    text-shadow: none !important;
    background: #25253a !important;
    border-bottom: 1px solid #3a3a52 !important;
}

body.dark-mode .cke_dialog_close_button {
    color: #e2e8f0 !important;
    opacity: 0.8;
}

body.dark-mode .cke_dialog_footer {
    background: #1e1e2e !important;
    background-image: none !important;
    border-top: 1px solid #3a3a52 !important;
}

body.dark-mode .cke_dialog_tab {
    background: #1e1e2e !important;
    color: #94a3b8 !important;
    border-color: #3a3a52 !important;
}

body.dark-mode .cke_dialog_tab_selected,
body.dark-mode .cke_dialog_tab:hover {
    background: #25253a !important;
    color: #ffffff !important;
}

/* Formular-Labels & Beschriftungen im Dialog */
body.dark-mode .cke_dialog_ui_lbl,
body.dark-mode .cke_dialog label,
body.dark-mode .cke_dialog_ui_html,
body.dark-mode #droplet-info,
body.dark-mode #droplet-usage,
body.dark-mode .cke_dialog_contents div,
body.dark-mode .cke_dialog_contents td,
body.dark-mode .cke_dialog_contents p {
    color: #cbd5e1 !important;
}

/* Textfelder & Dropdown-Auswahlfelder */
body.dark-mode .cke_dialog_ui_input_text input,
body.dark-mode .cke_dialog_ui_input_password input,
body.dark-mode .cke_dialog_ui_input_textarea textarea,
body.dark-mode .cke_dialog_ui_input_select select {
    background-color: #1e1e2e !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a4a62 !important;
    border-radius: 4px !important;
}

/* Dropdown-Optionen (<option>) lesbar machen */
body.dark-mode .cke_dialog select option,
body.dark-mode select option {
    background-color: #25253a !important;
    color: #e2e8f0 !important;
}

/* Dialog Buttons (OK, Abbrechen) ohne störende Innenrahmen */
body.dark-mode .cke_dialog_ui_button span,
body.dark-mode a.cke_dialog_ui_button span {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.dark-mode .cke_dialog_ui_button,
body.dark-mode a.cke_dialog_ui_button {
    background: #2b2b42 !important;
    background-image: none !important;
    border: 1px solid #4a4a62 !important;
    color: #e2e8f0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

body.dark-mode .cke_dialog_ui_button:hover,
body.dark-mode a.cke_dialog_ui_button:hover {
    background: #353550 !important;
    border-color: var(--primary-light, #9bc2ed) !important;
    color: #ffffff !important;
}

body.dark-mode .cke_dialog_ui_button_ok,
body.dark-mode a.cke_dialog_ui_button_ok {
    background-color: #2e7d32 !important;
    background: #2e7d32 !important;
    background-image: none !important;
    border: 1px solid #4caf50 !important;
    color: #ffffff !important;
}

body.dark-mode .cke_dialog_ui_button_ok:hover,
body.dark-mode a.cke_dialog_ui_button_ok:hover {
    background-color: #388e3c !important;
    background: #388e3c !important;
    color: #ffffff !important;
}

/* SweetAlert2 erzeugt eigene Modal-Struktur direkt im body. */
body.dark-mode .swal2-container .swal2-popup {
    background-color: #25253a !important;
    color: #e2e8f0 !important;
}

/* SweetAlert2 & WB Toasts im Dark Mode (Erfolgs-Grün #248147) */
body.dark-mode .swal2-popup.swal2-toast,
body.dark-mode .wb-toast-notification {
    background: #248147 !important;
    border: 1px solid #2ea159 !important;
    border-left: 5px solid #36cf72 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .swal2-popup.swal2-toast .swal2-title,
body.dark-mode .wb-toast-content {
    color: #ffffff !important;
}

body.dark-mode .swal2-popup.swal2-toast .swal2-icon,
body.dark-mode .wb-toast-icon {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

body.dark-mode .swal2-container .swal2-title,
body.dark-mode .swal2-container .swal2-html-container,
body.dark-mode .swal2-container .swal2-content,
body.dark-mode .swal2-container .swal2-footer {
    color: #e2e8f0 !important;
}

body.dark-mode .swal2-container .swal2-close {
    color: #d8e2ee !important;
    opacity: 0.9 !important;
}

body.dark-mode .swal2-container .swal2-close:hover,
body.dark-mode .swal2-container .swal2-close:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .swal2-container .swal2-icon.swal2-info {
    border-color: #8fc7ff !important;
    color: #8fc7ff !important;
}

/* jsPanel nutzt Theme-Header, deren Lightmode-Regeln im Darkmode zu dunkel werden. */
body.dark-mode .jsPanel {
    background-color: #25253a !important;
    border-color: var(--border-color) !important;
    color: #e2e8f0 !important;
}

body.dark-mode .jsPanel > .jsPanel-hdr,
body.dark-mode .jsPanel-theme-default > .jsPanel-hdr,
body.dark-mode .jsPanel-theme-primary > .jsPanel-hdr,
body.dark-mode .jsPanel-theme-info > .jsPanel-hdr {
    background-color: #2d3c52 !important;
    border-color: #557799 !important;
    color: #edf3f8 !important;
}

body.dark-mode .jsPanel > .jsPanel-hdr *,
body.dark-mode .jsPanel .jsPanel-title,
body.dark-mode .jsPanel .jsPanel-titlebar,
body.dark-mode .jsPanel .jsPanel-headerbar,
body.dark-mode .jsPanel .jsPanel-controlbar,
body.dark-mode .jsPanel .jsPanel-controlbar *,
body.dark-mode .jsPanel .jsPanel-btn {
    color: #edf3f8 !important;
    fill: #edf3f8 !important;
    stroke: #edf3f8 !important;
}

body.dark-mode .jsPanel .jsPanel-btn:hover,
body.dark-mode .jsPanel .jsPanel-controlbar button:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

body.dark-mode .jsPanel .jsPanel-content,
body.dark-mode .jsPanel .jsPanel-content.jsPanel-content-filled {
    background-color: #1e1e2e !important;
    color: #e2e8f0 !important;
}

body.dark-mode .jsPanel .jsPanel-ftr {
    background-color: #25253a !important;
    border-top-color: var(--border-color) !important;
    color: #e2e8f0 !important;
}

/* ==========================================================================
   Dashboard Tiles Dark Mode
   ========================================================================== */

body.dark-mode .dashboard-tile {
    background-color: #1e1e2e !important;
    border-color: #3a3a52 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .dashboard-tile.tile-link:hover {
    border-color: #4a4a68 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    background-color: #2b2b42 !important;
}

body.dark-mode .tile-icon {
    background-color: transparent !important;
}

body.dark-mode .tile-title {
    color: #e2e8f0 !important;
}

body.dark-mode .tile-description {
    color: #9ca3af !important;
}

/* ==========================================================================
   LOGIN PAGE DARK MODE
   ========================================================================== */

body.dark-mode #login-box {
    background-color: #25253a !important;
    border-color: #3a3a52 !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode #login-box header {
    border-bottom-color: #3a3a52 !important;
}

body.dark-mode #login-box header h1 {
    color: var(--primary-light, #9bc2ed) !important;
}

body.dark-mode #login-box .w3-input.form-control {
    background-color: #1e1e2e !important;
    color: #e2e8f0 !important;
    border-color: #4a4a62 !important;
}

body.dark-mode #login-box .w3-input.form-control:focus {
    background-color: #1e1e2e !important;
    border-color: var(--primary-light, #9bc2ed) !important;
    box-shadow: 0 0 0 3px rgba(112, 164, 219, 0.25) !important;
}

body.dark-mode #login-box .input-icon-left,
body.dark-mode #login-box .field-icon.toggle-password {
    color: #94a3b8 !important;
}

body.dark-mode #login-box .field-icon.toggle-password:hover {
    color: var(--primary-light, #9bc2ed) !important;
}

body.dark-mode #login-footer,
body.dark-mode .box-sub-footer {
    background-color: #1e1e2e !important;
    border-top-color: #3a3a52 !important;
    color: #94a3b8 !important;
}

body.dark-mode #login-footer a,
body.dark-mode .box-sub-footer a {
    color: var(--primary-light, #9bc2ed) !important;
}

body.dark-mode #login-footer a:hover,
body.dark-mode .box-sub-footer a:hover {
    color: #ffffff !important;
}

/* Login Darkmode Toggle Button */
.login-darkmode-toggle {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 100;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #4a5568;
    cursor: pointer;
    transition: all 0.25s ease;
}

.login-darkmode-toggle:hover {
    transform: scale(1.08);
    background: #ffffff;
    color: var(--primary, #4a8ab5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

body.dark-mode .login-darkmode-toggle {
    background: rgba(37, 37, 58, 0.9) !important;
    border-color: #3a3a52 !important;
    color: #ffc107 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .login-darkmode-toggle:hover {
    background: #2d2d42 !important;
    color: #ffd54f !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .dashboard-grid .tile-icon,
body.dark-mode .overview-grid .tile-icon {
    background: #30304a !important;
    border-color: #484866 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32) !important;
}

/* Entwurf-Hinweisbanner im WYSIWYG-Modul (Captcha-Sand-Farbe #efe6cf) */
body.dark-mode div[id^="draft-banner-"] {
    background: #efe6cf !important;
    background-color: #efe6cf !important;
    border: none !important;
    border-left: 4px solid #f5a623 !important;
    color: #242536 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode div[id^="draft-banner-"] strong {
    color: #1e1e2e !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   WYSIWYG DRAFT POPOVER MENU DARK MODE
   ========================================================================== */

body.dark-mode .draft-dropdown-wrapper > summary.btn,
body.dark-mode .draft-dropdown-wrapper > summary.btn.w3-light-grey,
body.dark-mode .button-bar details.draft-dropdown-wrapper > summary.btn {
    background-color: #25253a !important;
    background: #25253a !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a4a62 !important;
}

body.dark-mode .draft-dropdown-wrapper > summary.btn:hover,
body.dark-mode .draft-dropdown-wrapper > summary.btn.w3-light-grey:hover,
body.dark-mode .button-bar details.draft-dropdown-wrapper > summary.btn:hover {
    background-color: #2d2d42 !important;
    background: #2d2d42 !important;
    border-color: var(--primary-light, #9bc2ed) !important;
    color: #9bc2ed !important;
}

body.dark-mode .draft-popover-menu {
    background: #383854 !important;
    background-color: #383854 !important;
    border: 1px solid #525275 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .draft-popover-menu > div {
    border-bottom-color: #525275 !important;
    border-top-color: #525275 !important;
}

body.dark-mode .draft-popover-menu button {
    background: transparent !important;
    border: none !important;
    color: #cbd5e1 !important;
}

body.dark-mode .draft-popover-menu button:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .draft-popover-menu button.is-pinned {
    background-color: #1e3b5e !important;
    color: #38bdf8 !important;
}

body.dark-mode .draft-popover-menu a,
body.dark-mode form[id^="wysiwyg"] .draft-popover-menu a {
    color: #e2e8f0 !important;
}

body.dark-mode .draft-popover-menu a:hover,
body.dark-mode form[id^="wysiwyg"] .draft-popover-menu a:hover {
    background-color: #484868 !important;
    color: #ffffff !important;
}

body.dark-mode .draft-popover-menu a.danger-item:hover,
body.dark-mode form[id^="wysiwyg"] .draft-popover-menu a.danger-item:hover {
    background-color: #4a2424 !important;
    color: #fca5a5 !important;
}

/* ==========================================================================
   BACKEND CUSTOM SELECT DARK MODE (Sprach- & Seitenauswahlfelder)
   ========================================================================== */

body.dark-mode .backend-custom-select__trigger {
    background: #161625 !important;
    background-color: #161625 !important;
    border: 1px solid #3b3b58 !important;
    color: #d5dde8 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .backend-custom-select__trigger:hover,
body.dark-mode .backend-custom-select.is-open .backend-custom-select__trigger {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
    border-color: #5478a8 !important;
}

body.dark-mode .backend-custom-select__trigger-label,
body.dark-mode .backend-custom-select__option-label {
    color: #d5dde8 !important;
}

body.dark-mode .backend-custom-select__trigger-arrow {
    border-top-color: var(--primary-light, #9bc2ed) !important;
}

body.dark-mode .backend-custom-select__menu {
    background: #25253a !important;
    background-color: #25253a !important;
    border: 1px solid #4a4a62 !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .backend-custom-select__option {
    color: #e2e8f0 !important;
    background: transparent !important;
}

body.dark-mode .backend-custom-select__option:hover,
body.dark-mode .backend-custom-select__option:focus {
    background: #32324c !important;
    background-color: #32324c !important;
    color: #ffffff !important;
}

body.dark-mode .backend-custom-select__option.is-selected {
    background: #2d4a68 !important;
    background-color: #2d4a68 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   MULTISELECT DROPDOWN DARK MODE (z.B. DSGVO Datenschutzerklärung)
   ========================================================================== */

body.dark-mode .multiselect-dropdown {
    background-color: #161625 !important;
    background: #161625 !important;
    border: 1px solid #3b3b58 !important;
    color: #d5dde8 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239bc2ed' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

body.dark-mode .multiselect-dropdown span.optext {
    background-color: #32324c !important;
    background: #32324c !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a4a68 !important;
}

body.dark-mode .multiselect-dropdown span.optext .optdel {
    color: #94a3b8 !important;
}

body.dark-mode .multiselect-dropdown span.optext .optdel:hover {
    color: #f87171 !important;
}

body.dark-mode .multiselect-dropdown span.placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .multiselect-dropdown-list-wrapper {
    background: #25253a !important;
    background-color: #25253a !important;
    border-color: #4a4a62 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .multiselect-dropdown-list-wrapper .multiselect-dropdown-search {
    background-color: #1e1e2e !important;
    border-color: #4a4a62 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .multiselect-dropdown-list div {
    color: #e2e8f0 !important;
}

body.dark-mode .multiselect-dropdown-list div:hover {
    background-color: #32324c !important;
    color: #ffffff !important;
}

body.dark-mode .multiselect-dropdown-list div.checked {
    background-color: #2d4a68 !important;
    color: #ffffff !important;
}

body.dark-mode .multiselect-dropdown-all-selector {
    border-bottom-color: #4a4a62 !important;
}

/* ==========================================================================
   Addon File Editor (AFE) Dark Mode Overrides
   ========================================================================== */

body.dark-mode #mod_addon_file_editor,
body.dark-mode #mod_addon_file_editor form,
body.dark-mode #mod_addon_file_editor div.box {
    background-color: var(--light, #2a2a3c) !important;
    color: #cbd5e1 !important;
    border-color: var(--border-color, #3a3a52) !important;
}

/* Refined Info & Important Notice Boxes with subtle left accent borders */
body.dark-mode #mod_addon_file_editor .afe-important,
body.dark-mode #mod_addon_file_editor p.afe-important {
    background: rgba(234, 179, 8, 0.08) !important;
    border: 1px solid rgba(234, 179, 8, 0.25) !important;
    border-left: 4px solid #f59e0b !important;
    color: #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
}

body.dark-mode #mod_addon_file_editor .afe-info,
body.dark-mode #mod_addon_file_editor div.info,
body.dark-mode #mod_addon_file_editor p.afe-info {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    border-left: 4px solid #3b82f6 !important;
    color: #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
}

body.dark-mode #mod_addon_file_editor .afe-note,
body.dark-mode #mod_addon_file_editor p.afe-note {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-left: 4px solid #10b981 !important;
    color: #cbd5e1 !important;
    border-radius: 4px !important;
}

body.dark-mode #mod_addon_file_editor .afe-warning,
body.dark-mode #mod_addon_file_editor p.afe-warning {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    border-left: 4px solid #ef4444 !important;
    color: #cbd5e1 !important;
    border-radius: 4px !important;
}

body.dark-mode #mod_addon_file_editor .afe-info p,
body.dark-mode #mod_addon_file_editor .afe-important p,
body.dark-mode #mod_addon_file_editor .afe-note p,
body.dark-mode #mod_addon_file_editor .afe-warning p,
body.dark-mode #mod_addon_file_editor div.info p,
body.dark-mode #mod_addon_file_editor div.box p,
body.dark-mode #mod_addon_file_editor div.box a,
body.dark-mode #mod_addon_file_editor p,
body.dark-mode #mod_addon_file_editor span {
    color: #cbd5e1 !important;
}

body.dark-mode #mod_addon_file_editor th,
body.dark-mode #mod_addon_file_editor th.expanded,
body.dark-mode #mod_addon_file_editor th.collapsed {
    background-color: #25253a !important;
    color: #94a3b8 !important;
    border-color: #3a3a52 !important;
}

body.dark-mode #mod_addon_file_editor table.filemanager tr,
body.dark-mode #mod_addon_file_editor table.afe-table tr,
body.dark-mode #mod_addon_file_editor tr.folder td,
body.dark-mode #mod_addon_file_editor tr.file td {
    color: #cbd5e1 !important;
}


body.dark-mode #mod_addon_file_editor table.filemanager tr.odd,
body.dark-mode #mod_addon_file_editor table.afe-table tr.odd {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode #mod_addon_file_editor tr:hover,
body.dark-mode #mod_addon_file_editor tr:hover td {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode #mod_addon_file_editor thead,
body.dark-mode #mod_addon_file_editor thead tr:hover {
    background-color: #25253a !important;
}

/* Modern Buttons in Dark Mode */
body.dark-mode #mod_addon_file_editor input.submit,
body.dark-mode #mod_addon_file_editor input[type="submit"],
body.dark-mode #mod_addon_file_editor .afe-btn {
    color: #ffffff !important;
    background-color: #3b82f6 !important;
    border-color: #2563eb !important;
}

body.dark-mode #mod_addon_file_editor input.submit:hover,
body.dark-mode #mod_addon_file_editor input[type="submit"]:hover,
body.dark-mode #mod_addon_file_editor .afe-btn:hover {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

body.dark-mode #mod_addon_file_editor a.submit {
    color: #e2e8f0 !important;
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode #mod_addon_file_editor a.submit:hover {
    background-color: #4b5563 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
}

/* Help Modal Dialog in AFE */
body.dark-mode .afe-modal-dialog {
    background-color: #1e1e2e !important;
    color: #e2e8f0 !important;
    border-color: #3a3a52 !important;
}

body.dark-mode .afe-gradient-top,
body.dark-mode .afe-gradient-bottom {
    background: #1e1e2e !important;
}

body.dark-mode .afe-modal-header,
body.dark-mode .afe-modal-footer {
    background-color: #2a2a3c !important;
}

body.dark-mode .afe-modal-body {
    background-color: #1e1e2e !important;
    color: #e2e8f0 !important;
}

/* Dark mode overrides for subtle small collapse/expand buttons */
body.dark-mode .btn-subtle-small,
body.dark-mode #btn-toggle-all-sections {
    background-color: #2a2a3c !important;
    color: #cbd5e1 !important;
    border: 1px solid #3a3a52 !important;
    box-shadow: none !important;
}

body.dark-mode .btn-subtle-small:hover,
body.dark-mode #btn-toggle-all-sections:hover {
    background-color: #35354e !important;
    color: #ffffff !important;
    border-color: #4a4a68 !important;
}

body.dark-mode .btn-subtle-small i,
body.dark-mode #btn-toggle-all-sections i {
    color: #94a3b8 !important;
}

body.dark-mode .btn-subtle-small:hover i,
body.dark-mode #btn-toggle-all-sections:hover i {
    color: #ffffff !important;
}

/* Shared CodeMirror source-mode palette for CKEditor, Jodit, and WB code editors */
body.dark-mode .CodeMirror,
body.wb-dark-mode .CodeMirror {
    background: #1e1e2d !important;
    color: #f1f5f9 !important;
}

body.dark-mode .CodeMirror pre.CodeMirror-line,
body.dark-mode .CodeMirror pre.CodeMirror-line-like,
body.wb-dark-mode .CodeMirror pre.CodeMirror-line,
body.wb-dark-mode .CodeMirror pre.CodeMirror-line-like {
    background: transparent !important;
    color: inherit !important;
}

body.dark-mode .CodeMirror-gutters,
body.wb-dark-mode .CodeMirror-gutters {
    background: #181824 !important;
    border-right-color: #2d2f45 !important;
}

body.dark-mode .CodeMirror-linenumber,
body.wb-dark-mode .CodeMirror-linenumber {
    color: #64748b !important;
}

body.dark-mode .cm-s-default .cm-tag,
body.wb-dark-mode .cm-s-default .cm-tag {
    color: #60a5fa !important;
    font-weight: bold !important;
}

body.dark-mode .cm-s-default .cm-attribute,
body.wb-dark-mode .cm-s-default .cm-attribute {
    color: #c084fc !important;
}

body.dark-mode .cm-s-default .cm-string,
body.wb-dark-mode .cm-s-default .cm-string {
    color: #34d399 !important;
}

body.dark-mode .cm-s-default .cm-comment,
body.wb-dark-mode .cm-s-default .cm-comment {
    color: #64748b !important;
    font-style: italic !important;
}

body.dark-mode .cm-s-default .cm-keyword,
body.wb-dark-mode .cm-s-default .cm-keyword {
    color: #fbbf24 !important;
    font-weight: bold !important;
}

body.dark-mode .cm-s-default .cm-number,
body.wb-dark-mode .cm-s-default .cm-number {
    color: #fb923c !important;
}

body.dark-mode .cm-s-default .cm-atom,
body.wb-dark-mode .cm-s-default .cm-atom {
    color: #22d3ee !important;
}

body.dark-mode .CodeMirror-focused .CodeMirror-selected,
body.wb-dark-mode .CodeMirror-focused .CodeMirror-selected {
    background: #41495b !important;
}

body.dark-mode .CodeMirror-cursor,
body.wb-dark-mode .CodeMirror-cursor {
    border-left-color: #ffffff !important;
}

body.dark-mode .CodeMirror-activeline-background,
body.dark-mode .CodeMirror .activeline,
body.wb-dark-mode .CodeMirror-activeline-background,
body.wb-dark-mode .CodeMirror .activeline {
    background: #2b3042 !important;
}

/* Keep the page visibility hint readable without a bright warning background. */
body.dark-mode .page-settings-form #tooltip.w3-public,
body.wb-dark-mode .page-settings-form #tooltip.w3-public {
    background-color: #403b2b !important;
    border-left-color: #8b6f2a !important;
    color: #d9d1b8 !important;
}

body.dark-mode .page-settings-form #tooltip.w3-public span,
body.wb-dark-mode .page-settings-form #tooltip.w3-public span {
    color: #d9d1b8 !important;
}

body.dark-mode .page-settings-form .page-setting-seo-title,
body.wb-dark-mode .page-settings-form .page-setting-seo-title {
    color: #9ca3af !important;
}

body.dark-mode .page-settings-form .page-permissions-title,
body.wb-dark-mode .page-settings-form .page-permissions-title {
    color: #9ca3af !important;
}