/* =========================================================
   Skin: dunkel
   ---------------------------------------------------------
   Sehr dunkle, gruen getoente Flaechen mit einer abgestuften
   Retro-Gruen-Palette. Lange Texte bleiben ruhig, aktive
   Elemente und Icons leuchten deutlicher.
   ========================================================= */

:root,
body.skin-dunkel {
    /* Marke, Status und Fokus */
    /* Das zentrale Primaergruen ist absichtlich dunkler: Viele alte
       Komponenten verwenden es als Buttonflaeche mit heller Schrift. */
    --dbx-primary:                    #198342;
    --dbx-secondary:                  #587762;
    --dbx-success:                    #168348;
    --dbx-warning:                    #e6bf57;
    --dbx-danger:                     #ff6f75;
    --dbx-info:                       #57d8bd;
    --dbx-text-link:                  #62ff62;
    --dbx-focus-ring:                 rgba(99, 245, 141, 0.32);

    /* Grundflaechen */
    --dbx-bg-body:                    #000201;
    --dbx-bg-main:                    #010402;
    --dbx-bg-header:                  #000201;
    --dbx-bg-footer:                  #000201;
    --dbx-bg-panel:                   #020703;
    --dbx-bg-muted:                   #040b06;

    /* Die zuvor hellgrauen Night-Surfaces muessen im Dark-Skin
       ebenfalls dunkel sein. Diese Tokens werden von CMS,
       Formularen, Reports und Bootstrap-Komponenten verwendet. */
    --dbx-night-surface:              #020703;
    --dbx-night-surface-2:            #040a05;
    --dbx-night-surface-3:            #061008;
    --dbx-night-surface-text:         #7cff7c;
    --dbx-night-surface-muted:        #52d966;
    --dbx-night-surface-border:       #185b2b;

    /* Panels und Arbeitsflaechen */
    --dbx-panel-bg-top:               #061009;
    --dbx-panel-bg-bottom:            #010402;
    --dbx-panel-bg-base:              #020703;
    --dbx-panel-head-bg-top:          #0a2111;
    --dbx-panel-head-bg-bottom:       #010603;
    --dbx-panel-head-border:          rgba(112, 255, 153, 0.28);
    --dbx-panel-head-text:            #8aff8a;
    --dbx-panel-inner-bg-top:         #061008;
    --dbx-panel-inner-bg-bottom:      #020603;
    --dbx-panel-border:               #1b402a;
    --dbx-panel-border-light:         #173722;
    --dbx-panel-border-strong:        #2c6842;
    --dbx-panel-shadow:               0 12px 32px rgba(0, 0, 0, 0.62), 0 2px 7px rgba(0, 0, 0, 0.46);
    --dbx-panel-inset-highlight:      rgba(133, 255, 168, 0.12);
    --dbx-panel-inset-shadow:         rgba(0, 0, 0, 0.88);
    --dbx-panel-row-highlight:        rgba(116, 255, 157, 0.055);
    --dbx-content-media-bg:           #020705;
    --dbx-content-gallery-border:     #1c4a2e;
    --dbx-content-gallery-accent:     #3a8a56;
    --dbx-gallery-overlay-bg:         rgba(1, 6, 3, 0.94);
    --dbx-content-stamp-opacity:      0.22;
    --dbx-content-stamp-opacity-mobile: 0.16;

    /* Ruhiges Gruen fuer Text, helleres Gruen fuer wichtige Inhalte */
    --dbx-text-main:                  #7cff7c;
    --dbx-text-muted:                 #52d966;
    --dbx-text-invert:                #b8ffb8;

    --dbx-border-color:               #1b402a;
    --dbx-border-light:               #14331f;
    --dbx-border-dark:                #2b6641;

    --dbx-hover-bg:                   rgba(99, 245, 141, 0.085);
    --dbx-active-bg:                  rgba(99, 245, 141, 0.16);

    --dbx-input-bg:                   #020a04;
    --dbx-input-bg-focus:             #071b0c;
    --dbx-input-bg-disabled:          #030704;

    --dbx-shadow-sm:                  0 1px 3px rgba(0, 0, 0, 0.54);
    --dbx-shadow-md:                  0 5px 16px rgba(0, 0, 0, 0.62);
    --dbx-shadow-lg:                  0 14px 38px rgba(0, 0, 0, 0.70);

    /* Bars und Reports */
    --dbx-bar-icon-color:             #76ff76;
    --dbx-bar-meta-color:             rgba(105, 240, 115, 0.80);
    --dbx-bar-outset-light:           rgba(120, 255, 158, 0.15);
    --dbx-bar-inset-dark:             rgba(0, 0, 0, 0.90);
    --dbx-report-bar-bg-top:          rgba(15, 41, 24, 0.98);
    --dbx-report-bar-bg-bottom:       rgba(4, 14, 8, 0.98);
    --dbx-report-bar-border:          rgba(98, 225, 134, 0.38);
    --dbx-report-bar-title-color:     #8aff8a;
    --dbx-report-row-bg:              #020703;
    --dbx-report-row-striped-bg:      #040a05;
    --dbx-report-row-hover-bg:        #10291a;
    --dbx-report-row-hover-border:    #367a4d;

    /* Menue: Admin bewusst dunkler als Benutzer-Menue */
    --dbx-bg-menu-main-top:           rgba(9, 29, 16, 0.99);
    --dbx-bg-menu-main-bottom:        rgba(2, 11, 6, 0.99);
    --dbx-bg-menu-admin-top:          rgba(3, 13, 7, 0.995);
    --dbx-bg-menu-admin-bottom:       rgba(0, 4, 2, 0.995);
    --dbx-menu-text:                  #72f779;
    --dbx-menu-main-text:             #7cff7c;
    --dbx-menu-admin-text:            #63e96b;
    --dbx-menu-text-active:           #b8ffb8;
    --dbx-menu-top-hover-bg:          rgba(99, 245, 141, 0.12);
    --dbx-menu-top-active-bg:         rgba(99, 245, 141, 0.19);
    --dbx-menu-sub-hover-bg:          rgba(99, 245, 141, 0.13);
    --dbx-menu-main-top-hover-bg:     rgba(99, 245, 141, 0.12);
    --dbx-menu-main-top-active-bg:    rgba(99, 245, 141, 0.19);
    --dbx-menu-main-sub-hover-bg:     rgba(99, 245, 141, 0.13);
    --dbx-menu-separator:             rgba(121, 255, 158, 0.14);
    --dbx-menu-accent-active:         #72ff9b;
    --dbx-menu-accent-glow:           rgba(83, 255, 132, 0.58);
    --dbx-menu-glass-light:           rgba(131, 255, 166, 0.13);
    --dbx-menu-glass-shadow:          rgba(0, 0, 0, 0.72);

    --dbx-submenu-bg-top:             rgba(11, 31, 18, 0.99);
    --dbx-submenu-bg-bottom:          rgba(3, 12, 7, 0.99);
    --dbx-submenu-admin-bg-top:       rgba(5, 18, 10, 0.995);
    --dbx-submenu-admin-bg-bottom:    rgba(0, 6, 3, 0.995);
    --dbx-submenu-line-light:         rgba(124, 255, 161, 0.20);
    --dbx-submenu-line-dark:          rgba(0, 0, 0, 0.62);
    --dbx-submenu-line-shadow:        rgba(0, 0, 0, 0.48);
    --dbx-submenu-panel-border-light: rgba(116, 255, 155, 0.24);
    --dbx-submenu-panel-border-dark:  rgba(0, 0, 0, 0.82);
    --dbx-submenu-panel-shadow:
        0 10px 34px rgba(0, 0, 0, 0.72),
        0 2px 9px rgba(0, 0, 0, 0.54);
    --dbx-menu-tech-opacity-main:     0.42;
    --dbx-menu-tech-opacity-admin:    0.48;
    --dbx-tech-canvas-opacity:        0.18;

    --dbx-menu-mobile-panel-main-top:    rgba(8, 26, 14, 0.995);
    --dbx-menu-mobile-panel-main-bottom: rgba(2, 10, 5, 0.995);
    --dbx-menu-mobile-panel-admin-top:   rgba(3, 14, 7, 0.995);
    --dbx-menu-mobile-panel-admin-bottom:rgba(0, 5, 2, 0.995);

    /* Login-Bildseite */
    --dbx-auth-visual-overlay-top:    rgba(3, 18, 9, 0.18);
    --dbx-auth-visual-overlay-bottom: rgba(1, 10, 5, 0.54);
    --dbx-auth-visual-text:           #8dff8d;
    --dbx-auth-visual-muted:          #59dc68;
    --dbx-auth-visual-border:         rgba(101, 245, 142, 0.46);
    --dbx-auth-visual-item-bg:        rgba(1, 13, 6, 0.64);
    --dbx-auth-visual-item-border:    rgba(126, 255, 163, 0.24);

    /* Overlays und Editor */
    --dbx-overlay-bg:                 rgba(0, 5, 2, 0.76);
    --dbx-editor-bg:                  rgba(3, 18, 9, 0.96);
    --dbx-editor-bg-hover:            rgba(12, 55, 27, 0.98);
    --dbx-editor-border:              rgba(116, 255, 155, 0.52);
    --dbx-editor-border-hover:        rgba(146, 255, 176, 0.82);
    --dbx-editor-color:               #82ff82;
    --dbx-editor-shadow:              rgba(0, 0, 0, 0.96);
    --dbx-editor-icon-filter:
        brightness(0) saturate(100%) invert(85%) sepia(34%) saturate(922%)
        hue-rotate(78deg) brightness(108%) contrast(104%)
        drop-shadow(0 0 2px rgba(103, 255, 146, 0.82))
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.96));
    --dbx-editor-icon-filter-hover:
        brightness(0) saturate(100%) invert(93%) sepia(25%) saturate(1044%)
        hue-rotate(72deg) brightness(111%) contrast(108%)
        drop-shadow(0 0 3px rgba(137, 255, 171, 1))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 1));

    /* openWin */
    --dbx-window-bg:                  #040b07;
    --dbx-window-border:              #28623d;
    --dbx-window-header:              #071c0e;
    --dbx-window-header-top:          #10331c;
    --dbx-window-header-bottom:       #020905;
    --dbx-window-header-modal:        #041108;
    --dbx-window-header-modal-top:    #0a2815;
    --dbx-window-header-modal-bottom: #010603;
    --dbx-window-header-color:        #8dff8d;
    --dbx-window-subbar-top:          #102b19;
    --dbx-window-subbar-bottom:       #06130b;
    --dbx-window-subbar-text:         #76f77c;
    --dbx-window-subbar-border:       #2a6840;
    --dbx-window-body-bg:             #07110b;
    --dbx-window-body-color:          #7cff7c;
    --dbx-window-footer-bg:           rgba(71, 202, 108, 0.075);
    --dbx-window-footer-border:       #173722;
    --dbx-window-control-color:       #72e978;
    --dbx-window-control-hover:       #b8ffb8;
    --dbx-window-overlay-bg:          rgba(0, 4, 2, 0.74);

    /* Grid */
    --dbx-grid-header-top:            rgba(13, 38, 21, 0.98);
    --dbx-grid-header-bottom:         rgba(3, 13, 7, 0.99);
    --dbx-grid-header-border:         rgba(104, 245, 144, 0.26);
    --dbx-grid-col-top:               #12341e;
    --dbx-grid-col-bottom:            #071a0e;
    --dbx-grid-col-hover-top:         #1a4829;
    --dbx-grid-col-hover-bottom:      #0c2816;
    --dbx-grid-col-text:              #7cff7c;
    --dbx-grid-line-row:              rgba(118, 247, 154, 0.18);
    --dbx-grid-line-col:              rgba(118, 247, 154, 0.10);
    --dbx-grid-line-header:           rgba(118, 247, 154, 0.18);
    --dbx-grid-scroll-thumb:          #2c6e44;
    --dbx-grid-scroll-thumb-hover:    #3e945b;
    --dbx-grid-scroll-thumb-active:   #52bd71;
    --dbx-grid-scroll-track:          #041008;
    --dbx-grid-sep-header:            #24583a;
    --dbx-grid-sep-body:              #173a25;
}

/* =========================================================
   Bootstrap und harte Altfarben im Dark-Skin
   ========================================================= */

body.dbx-app.skin-dunkel {
    color-scheme: dark;
    accent-color: var(--dbx-primary);
    --bs-primary-rgb: 25, 131, 66;
    --bs-link-color-rgb: 98, 255, 98;
    --bs-body-color-rgb: 124, 255, 124;
    --bs-secondary-color-rgb: 82, 217, 102;
    --bs-emphasis-color: #aaffaa;
    --bs-heading-color: #8cff8c;
    --bs-tertiary-color: #52d966;
    --bs-form-control-color: #7cff7c;
    --bs-form-control-bg: #020a04;
    --bs-form-control-disabled-bg: #030704;
    background-color: var(--dbx-bg-main);
    background-image:
        radial-gradient(circle at 10% 12%, rgba(70, 222, 111, 0.13), transparent 31%),
        radial-gradient(circle at 91% 8%, rgba(47, 144, 76, 0.10), transparent 25%),
        radial-gradient(circle at 72% 96%, rgba(72, 196, 105, 0.08), transparent 36%),
        linear-gradient(135deg, #010503, var(--dbx-bg-main)) !important;
}

body.dbx-app.skin-dunkel :where(.text-dark, .text-black, .text-body, .text-body-emphasis) {
    color: var(--dbx-text-main) !important;
}

body.dbx-app.skin-dunkel :where(.text-muted, .text-secondary) {
    color: var(--dbx-text-muted) !important;
}

body.dbx-app.skin-dunkel .cms-hero .hero-text {
    color: var(--dbx-text-main) !important;
}

body.dbx-app.skin-dunkel :where(
    .card,
    .card-body,
    .modal-content,
    .offcanvas,
    .dropdown-menu,
    .list-group-item,
    .accordion-item,
    .toast,
    .popover,
    .bg-white,
    .bg-light
) {
    background-color: var(--dbx-night-surface) !important;
    border-color: var(--dbx-night-surface-border) !important;
    color: var(--dbx-night-surface-text) !important;
}

/* Die allgemeine Glass-3D-Schicht verwendet fuer helle Skins starke
   weisse Reflexe. Im dunklen Skin bleiben dieselben Tiefenstaffelungen,
   aber mit sehr schwachem Phosphorgruen auf nahezu schwarzer Basis. */
body.dbx-app.skin-dunkel :where(.dbx-panel, .dbx-content-frame, .dbxForm_wrapper, .dbxReport) {
    background:
        linear-gradient(135deg, rgba(79, 255, 79, 0.045), transparent 30%),
        linear-gradient(180deg, var(--dbx-panel-bg-top), var(--dbx-panel-bg-bottom)) !important;
}

body.dbx-app.skin-dunkel .dbx-content-frame:has(.c-cms) {
    background:
        linear-gradient(135deg, rgba(86, 255, 86, 0.055), transparent 30%),
        linear-gradient(180deg, var(--dbx-panel-bg-top), var(--dbx-panel-bg-bottom)) !important;
}

body.dbx-app.skin-dunkel .dbx-content-page {
    background:
        linear-gradient(135deg, rgba(72, 255, 72, 0.035), transparent 26%),
        var(--dbx-night-surface) !important;
    box-shadow:
        inset 0 1px 0 rgba(104, 255, 104, 0.09),
        inset 0 0 0 1px rgba(45, 170, 65, 0.10) !important;
}

body.dbx-app.skin-dunkel :where(.dbx-panel-inner, .dbx-form-group, .dbx-grid-body, .dbx-report-body) {
    background:
        linear-gradient(135deg, rgba(75, 255, 75, 0.035), transparent 34%),
        linear-gradient(180deg, var(--dbx-panel-inner-bg-top), var(--dbx-panel-inner-bg-bottom)) !important;
}

body.dbx-app.skin-dunkel :where(.card, .dbx-admin-dashboard-card, .dbx-stat-card, .dbx-dashboard-card) {
    background:
        linear-gradient(135deg, rgba(88, 255, 88, 0.055), transparent 34%),
        linear-gradient(180deg, var(--dbx-night-surface-3), var(--dbx-night-surface)) !important;
    box-shadow:
        inset 0 1px 0 rgba(105, 255, 105, 0.10),
        inset 0 -2px 0 rgba(0, 0, 0, 0.82),
        0 8px 20px rgba(0, 0, 0, 0.58) !important;
}

body.dbx-app.skin-dunkel :where(
    .dbx-bar,
    .dbx-module-bar,
    .dbx-grid-bar,
    .dbx-report-bar,
    .dbx-report-footer,
    .dbxForm_wrapper .dbx-form-bar,
    .dbx-grid-head,
    .dbx-grid-toolbar,
    .dbx-panel-head
) {
    background:
        linear-gradient(180deg, rgba(108, 255, 108, 0.12), rgba(60, 220, 70, 0.035) 42%, transparent 62%),
        linear-gradient(180deg, var(--dbx-panel-head-bg-top), var(--dbx-panel-head-bg-bottom)) !important;
}

body.dbx-app.skin-dunkel :where(.dropdown-item, .accordion-button, .nav-link, .page-link) {
    color: var(--dbx-text-main);
}

body.dbx-app.skin-dunkel :where(.dropdown-item:hover, .dropdown-item:focus, .accordion-button:hover, .nav-link:hover, .page-link:hover) {
    background-color: var(--dbx-hover-bg);
    color: #aaffaa;
}

body.dbx-app.skin-dunkel :where(.dropdown-item.active, .dropdown-item:active, .accordion-button:not(.collapsed), .nav-link.active, .page-item.active .page-link) {
    background-color: var(--dbx-active-bg);
    border-color: var(--dbx-primary);
    color: #b8ffb8;
}

body.dbx-app.skin-dunkel :where(.btn-primary, .btn-outline-primary, .btn-secondary, .btn-outline-secondary, .btn-light) {
    --bs-btn-color: #b8ffb8;
    --bs-btn-bg: #123a20;
    --bs-btn-border-color: #3ca95e;
    --bs-btn-hover-color: #d2ffd2;
    --bs-btn-hover-bg: #1b572f;
    --bs-btn-hover-border-color: #70f495;
    --bs-btn-active-color: #d2ffd2;
    --bs-btn-active-bg: #1f6736;
    --bs-btn-active-border-color: #8affaa;
    --bs-btn-disabled-color: #789681;
    --bs-btn-disabled-bg: #0c1710;
    --bs-btn-disabled-border-color: #254631;
}

body.dbx-app.skin-dunkel :where(input, textarea, select, .form-control, .form-select) {
    color: var(--dbx-text-main);
    border-color: var(--dbx-border-dark);
}

body.dbx-app.skin-dunkel :where(input, textarea, .form-control)::placeholder {
    color: #6f9278;
    opacity: 1;
}

body.dbx-app.skin-dunkel :where(.form-check-input, .form-range, button, .btn, a, [role="button"]):focus-visible {
    outline-color: var(--dbx-primary);
}

body.dbx-app.skin-dunkel :where(.text-primary, .link-primary, .btn-link) {
    color: var(--dbx-text-link) !important;
}

/* =========================================================
   Login: abgestufte, gut lesbare Dark-Surfaces
   ---------------------------------------------------------
   Die Eingaben sind bewusst dunkles Graphit statt Schwarz.
   So bleiben Feldgrenzen, Text und Icons auch auf dem sehr
   dunklen Skin eindeutig erkennbar.
   ========================================================= */

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-panel-main {
    background:
        linear-gradient(135deg, rgba(119, 255, 139, 0.055), transparent 34%),
        linear-gradient(180deg, #17231a, #0e1711) !important;
    border-color: #39724a !important;
    box-shadow:
        inset 0 1px 0 rgba(165, 255, 178, 0.15),
        inset 0 -2px 0 rgba(0, 0, 0, 0.44),
        0 18px 38px rgba(0, 0, 0, 0.58) !important;
    color: #c8ffcd !important;
}

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-panel-head {
    background:
        linear-gradient(180deg, rgba(82, 142, 94, 0.35), rgba(26, 55, 34, 0.74)),
        #17231a !important;
    border-bottom-color: #477f56 !important;
    box-shadow:
        inset 0 1px 0 rgba(183, 255, 190, 0.18),
        inset 0 -2px 0 rgba(0, 0, 0, 0.38) !important;
}

body.dbx-app.skin-dunkel .dbx-user-login :where(.dbx-auth-panel-title strong, label, .control-label) {
    color: #baffbf !important;
    text-shadow: 0 0 6px rgba(93, 255, 107, 0.30);
}

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-brand-icon {
    background: linear-gradient(180deg, #274d31, #14291a) !important;
    border-color: #54a568 !important;
    color: #9cffaa !important;
    box-shadow:
        inset 0 1px 0 rgba(187, 255, 195, 0.22),
        0 0 13px rgba(83, 255, 105, 0.18) !important;
}

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-field :where(
    input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .form-control,
    .form-select
) {
    background: linear-gradient(180deg, #253129, #1b251e) !important;
    border-color: #477554 !important;
    box-shadow:
        inset 0 1px 0 rgba(211, 255, 217, 0.08),
        inset 0 2px 6px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(0, 0, 0, 0.38) !important;
    color: #e0ffe3 !important;
    caret-color: #8cff98;
}

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-field :where(
    input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .form-control,
    .form-select
):hover {
    background: linear-gradient(180deg, #2a382e, #202b24) !important;
    border-color: #63a875 !important;
}

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-field :where(
    input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .form-control,
    .form-select
):focus {
    background: linear-gradient(180deg, #314235, #222f27) !important;
    border-color: #7ee991 !important;
    box-shadow:
        0 0 0 3px rgba(105, 255, 127, 0.19),
        0 0 15px rgba(80, 255, 104, 0.12),
        inset 0 2px 6px rgba(0, 0, 0, 0.24) !important;
}

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-field :where(.dbx-auth-field-icon, .dbx-auth-password-toggle) {
    color: #9bffab !important;
    filter: drop-shadow(0 0 4px rgba(83, 255, 108, 0.50));
}

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-password-toggle:hover,
body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-password-toggle:focus {
    color: #d1ffd6 !important;
}

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-register-link a {
    color: #8cff98 !important;
}

body.dbx-app.skin-dunkel .dbx-user-login .dbx-auth-register-link a:hover {
    color: #ceffd2 !important;
}

/* Phosphor-Eindruck alter Gruenmonitore: Fliesstext bleibt scharf,
   Navigation, Ueberschriften, Links und Icons leuchten klarer. */
body.dbx-app.skin-dunkel :where(.dbx-content-page, .dbxForm_wrapper, .dbxReport, .dbx-window-body) {
    text-shadow: 0 0 3px rgba(73, 255, 73, 0.24);
}

body.dbx-app.skin-dunkel :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a,
    .dbx-menu-link,
    .dbx-menu-toggle,
    .dbx-window-title,
    .dbx-bar-title,
    .dbx-module-bar-heading
) {
    text-shadow:
        0 0 3px rgba(95, 255, 95, 0.72),
        0 0 9px rgba(63, 255, 63, 0.30);
}

/* Icons folgen der helleren Akzentstufe und bleiben auch auf fast
   schwarzen Leisten sichtbar. Farbige Status-Buttons erben weiterhin
   ihre jeweils eigene Textfarbe. */
body.dbx-app.skin-dunkel :where(
    .dbx-bar,
    .dbx-module-bar,
    .dbx-window-header,
    .dbx-window-controls,
    .dbx-grid-head,
    .dbxForm_wrapper,
    .dbxReport,
    .dbx-cms
) .bi {
    color: currentColor;
    filter:
        drop-shadow(0 0 3px rgba(91, 255, 91, 0.72))
        drop-shadow(0 0 8px rgba(45, 255, 45, 0.30));
}

body.dbx-app.skin-dunkel .dbx-user-menu-mail {
    background: linear-gradient(180deg, #12361f, #06140b);
    border-color: #3b8b55;
    color: #80ff80;
}

/* CMS/Jodit: die Komponenten enthalten noch feste helle Farben. Die
   hoehere Skin-Spezifitaet haelt Toolbar, Schreibflaeche und Popups
   konsequent dunkel. */
body.dbx-app.skin-dunkel .dbx-cms-editor-group .jodit-toolbar__box {
    background: linear-gradient(180deg, #12361f, #06140b) !important;
    border-bottom-color: #357c4d !important;
    box-shadow: inset 0 1px 0 rgba(126, 255, 162, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.92) !important;
}

body.dbx-app.skin-dunkel .dbx-cms-editor-group :where(.jodit-toolbar-button__button, .jodit-toolbar-button__trigger) {
    color: #80ff80 !important;
}

body.dbx-app.skin-dunkel .dbx-cms-editor-group :where(
    .jodit-toolbar-button:hover .jodit-toolbar-button__button,
    .jodit-toolbar-button__button:hover,
    .jodit-toolbar-button__trigger:hover,
    .jodit-toolbar-button__button[aria-pressed="true"]
) {
    background: rgba(98, 245, 140, 0.17) !important;
    color: #b8ffb8 !important;
}

body.dbx-app.skin-dunkel .dbx-cms-editor-group :where(
    .jodit-container,
    .jodit-workplace,
    .jodit-wysiwyg,
    .jodit-source,
    .jodit-source textarea
) {
    background: var(--dbx-night-surface) !important;
    border-color: var(--dbx-night-surface-border) !important;
    caret-color: var(--dbx-primary) !important;
    color: var(--dbx-night-surface-text) !important;
}

body.dbx-app.skin-dunkel :where(.jodit-popup, .jodit-toolbar-popup, .jodit-dialog__panel, .dbx-cms-jodit-image-dialog),
body.dbx-app.skin-dunkel .dbx-cms-jodit-image-dialog :where(.jodit-dialog__header, .jodit-dialog__content, .jodit-dialog__body, .jodit-form, .jodit-dialog__footer) {
    background: var(--dbx-night-surface-2) !important;
    border-color: var(--dbx-panel-border-strong) !important;
    color: var(--dbx-night-surface-text) !important;
}

/* openWin-Titel, Unterleiste und Bedienelemente */
body.dbx-app.skin-dunkel .dbx-window-header,
body.dbx-app.skin-dunkel .dbx-window-header :where(.dbx-window-title, .bi, button, span) {
    color: var(--dbx-window-header-color) !important;
}

body.dbx-app.skin-dunkel .dbx-window .dbx-window-body :where(.dbx-bar, .dbx-module-bar),
body.dbx-app.skin-dunkel .dbx-window .dbx-window-body :where(.dbx-bar-title, .dbx-module-bar-heading, .dbx-bar-meta, .bi) {
    color: var(--dbx-window-subbar-text) !important;
}

/* Prozess- und Workflow-Komponenten besitzen noch feste helle
   Arbeitsflaechen. Im Dark-Skin werden nur deren Flaechen und Texte
   umgestellt; fachliche Statusfarben bleiben erhalten. */
body.dbx-app.skin-dunkel :where(
    .dbx-process-message,
    .dbx-workflow-step-nav-item,
    .dbx-workflow-step-nav-no,
    .dbx-workflow-builder,
    .dbx-workflow-goal-stage,
    .dbx-workflow-check-stage,
    .dbx-workflow-check-preview-item,
    .dbx-workflow-step-contract,
    .dbx-workflow-runtime-goal,
    .dbx-workflow-requirements,
    .dbx-workflow-requirement,
    .dbx-workflow-step-row,
    .dbx-workflow-module-block,
    .dbx-workflow-done-check
) {
    background: var(--dbx-night-surface-2) !important;
    border-color: var(--dbx-night-surface-border) !important;
    color: var(--dbx-night-surface-text) !important;
}

body.dbx-app.skin-dunkel :where(.dbx-process-progress-label, .dbx-process-progress-value, .dbx-workflow-technical summary) {
    color: #72e978 !important;
}

body.dbx-app.skin-dunkel :where(.dbx-process-meta, .dbx-workflow-step-active) {
    color: var(--dbx-text-muted) !important;
}

body.dbx-app.skin-dunkel :where(.dbx-process-bar, .dbx-workflow-instance-progress) {
    background: #041008 !important;
    border-color: #24583a !important;
}

body.dbx-app.skin-dunkel .dbx-workflow-step-nav-item:is(.is-active, .is-done) {
    background: #10291a !important;
    border-color: #3a8a56 !important;
}

body.dbx-app.skin-dunkel .dbx-workflow-step-nav-item.is-locked {
    background: #09110c !important;
    color: #6f9278 !important;
}

body.dbx-app.skin-dunkel .dbx-workflow-instance-progress span {
    color: #b8ffb8 !important;
    text-shadow: 0 1px 2px #000000;
}

body.dbx-app.skin-dunkel :where(.dbx-workflow-palette, .dbx-workflow-canvas, .dbx-workflow-step-main, .dbx-workflow-action-options) {
    background-color: #07130d !important;
    border-color: #285a3b !important;
}

body.dbx-app.skin-dunkel .dbx-workflow-action-choice {
    color: #8ff596 !important;
}

body.dbx-app.skin-dunkel .dbx-workflow-action-choice:has(.form-check-input:checked) {
    background: #10291a !important;
    color: #b8ffb8 !important;
}

body.dbx-app.skin-dunkel .dbx-workflow-canvas {
    background-image:
        linear-gradient(rgba(86, 210, 112, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(86, 210, 112, .08) 1px, transparent 1px) !important;
}

body.dbx-app.skin-dunkel .dbx-workflow-palette > button {
    background: #0b1d12 !important;
    border-color: #2b6040 !important;
    color: #b8ffb8 !important;
}

body.dbx-app.skin-dunkel :where(
    .dbx-workflow-palette-title,
    .dbx-workflow-palette button small,
    .dbx-workflow-palette-help,
    .dbx-workflow-step-kind,
    .dbx-workflow-step-caption strong,
    .dbx-workflow-step-caption small,
    .dbx-workflow-goal-stage h3,
    .dbx-workflow-check-stage h3,
    .dbx-workflow-steps-stage-head h3,
    .dbx-workflow-runtime-steps-head h3,
    .dbx-workflow-requirements h3,
    .dbx-workflow-check-preview-item strong,
    .dbx-workflow-check-preview-item small,
    .dbx-workflow-requirement-copy strong,
    .dbx-workflow-requirement-copy small,
    .dbx-workflow-step-contract header,
    .dbx-workflow-step-contract header small
) {
    color: #8ff596 !important;
}

body.dbx-app.skin-dunkel :where(.dbx-workflow-check-rule, .dbx-workflow-check-required, .dbx-workflow-check-resolver) {
    background: #10291a !important;
    border: 1px solid #2b6040 !important;
    color: #b8ffb8 !important;
}

body.dbx-app.skin-dunkel :where(.dbx-workflow-requirement-state, .dbx-workflow-step-data-label, .dbx-workflow-step-validation-hint) {
    color: #8ff596 !important;
}

body.dbx-app.skin-dunkel .dbx-workflow-step-main :where(.form-label, .form-control, .form-select) {
    color: #b8ffb8 !important;
}

body.dbx-app.skin-dunkel .dbx-workflow-flow-line { stroke: #5be678; }
body.dbx-app.skin-dunkel .dbx-workflow-flow-label { fill: #b8ffb8; stroke: #07130d; }
body.dbx-app.skin-dunkel .dbx-workflow-flow-lines marker path { fill: #5be678; }

/* Tabellen behalten auf allen Zeilen ihre lesbare Grundfarbe. */
body.dbx-app.skin-dunkel :where(.table, .dbxReport table, .dbx-report table) {
    --bs-table-color: var(--dbx-text-main);
    --bs-table-bg: var(--dbx-report-row-bg);
    --bs-table-border-color: var(--dbx-border-color);
    --bs-table-striped-color: var(--dbx-text-main);
    --bs-table-striped-bg: var(--dbx-report-row-striped-bg);
    --bs-table-hover-color: #b8ffb8;
    --bs-table-hover-bg: var(--dbx-report-row-hover-bg);
}

@media (prefers-reduced-motion: no-preference) {
    body.dbx-app.skin-dunkel :where(a, button, .btn, .dbx-menu-link, .card) {
        transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
}