/*
 * Dark Mode
 *
 * Wird immer geladen; alle Regeln hängen an html.dark-mode, greifen also nur,
 * wenn das Theme aktiv ist. Die Klasse setzt layout_tb.phtml serverseitig aus
 * dem Cookie, damit beim Laden kein heller Blitz entsteht.
 *
 * Overrides statt Umbau: style.css bleibt unangetastet, hier stehen nur die
 * Farbwerte, die im Dunkeln anders sein müssen. Die Selektoren sind bewusst mit
 * html.dark-mode geprefixt - das schlägt auch die !important-Regeln aus style.css.
 */

html.dark-mode {
    /*
     * Flächen, von der Seite nach vorne gestapelt. Die Stufen liegen bewusst weit
     * auseinander (je ~6-8 % Helligkeit): dicht beieinander liegende Grautöne lassen
     * die Oberfläche flach wirken, und Eingabefelder verschwinden dann als schwarze
     * Löcher in der Karte. Alle Töne tragen den Blaustich der Marke, kein Neutralgrau.
     */
    --dm-bg: #171b26;
    --dm-surface: #212739;
    --dm-surface-2: #293045;
    --dm-surface-3: #323a52;
    --dm-surface-hover: #2d3549;

    --dm-border: #333c56;
    --dm-border-strong: #454f6d;

    --dm-text: #d3d8e4;
    --dm-text-strong: #f1f3f9;
    --dm-text-muted: #949cb2;

    /* Akzente: gegenüber dem hellen Theme aufgehellt, sonst reicht der Kontrast
       auf dunklem Grund nicht */
    --dm-primary: #8aa2ff;
    --dm-success: #3ddca5;
    --dm-info: #56cfe1;
    --dm-warning: #f8cf68;
    --dm-danger: #f77367;

    --dm-shadow: rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}

/* ---------------------------------------------------------------- Basis */

html.dark-mode body {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

html.dark-mode #wrapper #content-wrapper,
html.dark-mode #content,
html.dark-mode .container,
html.dark-mode .container-fluid {
    background-color: transparent;
}

html.dark-mode #wrapper #content-wrapper {
    background-color: var(--dm-bg);
}

html.dark-mode hr {
    border-top-color: var(--dm-border);
}

html.dark-mode a {
    color: var(--dm-primary);
}

html.dark-mode a:hover {
    color: #9db1ff;
}

html.dark-mode ::selection {
    background: rgba(123, 150, 255, 0.35);
}

/* -------------------------------------------------------- Text-Utilities */

html.dark-mode .text-dark,
html.dark-mode .text-black,
html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800,
html.dark-mode .text-gray-700 {
    color: var(--dm-text-strong) !important;
}

html.dark-mode .text-gray-600,
html.dark-mode .text-gray-500,
html.dark-mode .text-secondary,
html.dark-mode .text-muted,
html.dark-mode .muted-text {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .text-gray-400,
html.dark-mode .text-gray-300,
html.dark-mode .text-gray-200,
html.dark-mode .text-light,
html.dark-mode .text-white {
    color: var(--dm-text) !important;
}

html.dark-mode .text-primary {
    color: var(--dm-primary) !important;
}

html.dark-mode .text-success {
    color: var(--dm-success) !important;
}

html.dark-mode .text-info,
html.dark-mode .text-light-blue {
    color: var(--dm-info) !important;
}

html.dark-mode .text-warning {
    color: var(--dm-warning) !important;
}

html.dark-mode .text-danger {
    color: var(--dm-danger) !important;
}

/* .mp-red/-green/-yellow sind schon fürs Helle-auf-Dunkel gebaut (#FF7564, #6DFFA4,
   #FFF97B) und bleiben unangetastet - nur die beiden dunklen Blautöne der Palette
   tragen auf dunklem Grund nicht. */
html.dark-mode .mp-darkblue {
    color: #8fa5ff !important;
}

html.dark-mode .mp-blue {
    color: var(--dm-info) !important;
}

/* ----------------------------------------------------- Flächen-Utilities */

html.dark-mode .bg-white,
html.dark-mode .bg-light,
html.dark-mode .bg-gray-100,
html.dark-mode .bg-gray-200,
html.dark-mode .bg-grey,
html.dark-mode .bg-gradient-light {
    background-color: var(--dm-surface) !important;
    background-image: none !important;
    color: var(--dm-text);
}

html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-right,
html.dark-mode .border-bottom,
html.dark-mode .border-left {
    border-color: var(--dm-border) !important;
}

html.dark-mode .shadow,
html.dark-mode .shadow-sm,
html.dark-mode .shadow-lg {
    box-shadow: 0 0.15rem 1.75rem 0 var(--dm-shadow) !important;
}

/* ----------------------------------------------------------- Topbar/Nav */

html.dark-mode .topbar,
html.dark-mode .navbar-light.bg-white {
    background-color: var(--dm-surface) !important;
    border-bottom: 1px solid var(--dm-border);
}

html.dark-mode .topbar .nav-link,
html.dark-mode .navbar-light .navbar-nav .nav-link {
    color: var(--dm-text);
}

html.dark-mode .topbar .topbar-divider {
    border-right-color: var(--dm-border);
}

/* Die Sidebar behält ihr Markenblau, nur abgedunkelt. Entsättigt man sie zu Grau,
   verschmilzt sie mit dem Content und die Seite verliert ihren Anker. */
html.dark-mode .sidebar.bg-gradient-primary {
    background-color: #263354 !important;
    background-image: linear-gradient(180deg, #2b3a63 10%, #1e2848 100%) !important;
    border-right: 1px solid #3a4870;
}

html.dark-mode .sidebar-dark .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.7);
}

html.dark-mode .sidebar-dark .nav-item .nav-link:hover,
html.dark-mode .sidebar-dark .nav-item.active .nav-link {
    color: #fff;
}

html.dark-mode .sidebar-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .sticky-footer {
    background-color: var(--dm-surface);
    color: var(--dm-text-muted);
}

html.dark-mode .sticky-footer a {
    color: var(--dm-primary);
}

/* -------------------------------------------------------------- Karten */

html.dark-mode .card {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .card-header,
html.dark-mode .card-footer {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text-strong);
}

html.dark-mode .card-body {
    background: var(--dm-surface);
    color: var(--dm-text);
}

html.dark-mode .card-title,
html.dark-mode .key-title {
    color: var(--dm-text-strong);
}

/* Die Farbkacheln der Startseite sind Markenelemente mit weißem Text - sie werden nur
   abgedunkelt, nicht entfärbt, sonst verliert die Seite ihren einzigen Farbakzent. */
html.dark-mode .blue-box {
    background-color: #3b63ba;
}

html.dark-mode .box-shape {
    background-color: #2455b8;
}

html.dark-mode .orange-box {
    background-color: #c95a4dd1;
}

html.dark-mode .orange-box .box-shape {
    background-color: #c95a4d;
}

/* ------------------------------------------------------------ Tabellen */

html.dark-mode .table {
    color: var(--dm-text);
}

html.dark-mode .table th,
html.dark-mode .table td {
    border-color: var(--dm-border);
}

html.dark-mode .table thead th {
    border-bottom-color: var(--dm-border-strong);
    color: var(--dm-text-strong);
}

html.dark-mode .table .thead-light th {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text-strong);
}

html.dark-mode .table-bordered,
html.dark-mode .table-bordered th,
html.dark-mode .table-bordered td {
    border-color: var(--dm-border);
}

html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.025);
}

html.dark-mode .table-hover tbody tr:hover {
    background-color: var(--dm-surface-hover);
    color: var(--dm-text-strong);
}

/* Die kontextuellen Zeilenfarben von Bootstrap sind Pastelltöne auf Weiß -
   auf dunklem Grund als getönte Schleier neu aufgebaut. */
html.dark-mode .table-primary,
html.dark-mode .table-primary > th,
html.dark-mode .table-primary > td {
    background-color: rgba(78, 115, 223, 0.22);
    color: var(--dm-text-strong);
}

html.dark-mode .table-success,
html.dark-mode .table-success > th,
html.dark-mode .table-success > td {
    background-color: rgba(28, 200, 138, 0.18);
    color: var(--dm-text-strong);
}

html.dark-mode .table-info,
html.dark-mode .table-info > th,
html.dark-mode .table-info > td {
    background-color: rgba(54, 185, 204, 0.18);
    color: var(--dm-text-strong);
}

html.dark-mode .table-warning,
html.dark-mode .table-warning > th,
html.dark-mode .table-warning > td {
    background-color: rgba(246, 194, 62, 0.18);
    color: var(--dm-text-strong);
}

html.dark-mode .table-danger,
html.dark-mode .table-danger > th,
html.dark-mode .table-danger > td {
    background-color: rgba(231, 74, 59, 0.2);
    color: var(--dm-text-strong);
}

html.dark-mode .table-active,
html.dark-mode .table-active > th,
html.dark-mode .table-active > td,
html.dark-mode .table-light,
html.dark-mode .table-light > th,
html.dark-mode .table-light > td {
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
}

/* ---------------------------------------------------------- Formulare */

/* Eingabefelder liegen eine Stufe über der Karte und tragen einen deutlichen Rand.
   Ohne den Rand liest sich das Feld auf dunklem Grund nicht als Feld, sondern als
   Loch in der Fläche. */
html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode .custom-file-label,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode input[type="text"],
html.dark-mode input[type="number"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="search"],
html.dark-mode input[type="date"] {
    background-color: var(--dm-surface-2);
    border: 1px solid var(--dm-border-strong);
    color: var(--dm-text-strong);
}

html.dark-mode .form-control:focus,
html.dark-mode .custom-select:focus {
    background-color: var(--dm-surface-3);
    border-color: var(--dm-primary);
    color: var(--dm-text-strong);
    box-shadow: 0 0 0 0.2rem rgba(123, 150, 255, 0.25);
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly] {
    background-color: #1a1e28;
    color: var(--dm-text-muted);
}

html.dark-mode .form-control::placeholder {
    color: #6d7488;
}

html.dark-mode .input-group-text {
    background-color: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
    color: var(--dm-text);
}

html.dark-mode .form-control-plaintext,
html.dark-mode label,
html.dark-mode .col-form-label {
    color: var(--dm-text);
}

/*
 * Die eigenen Checkboxen zeichnen den Haken absichtlich groesser als das Kaestchen: er ragt oben
 * rechts heraus. Damit er den Rahmen dort nicht kreuzt, legt ::before einen deckend weissen Keil
 * darueber, der das Stueck Rahmen wegwischt. Auf hellem Grund faellt das nicht auf, auf dunklem
 * bleibt ein weisser Fleck stehen.
 *
 * Der Keil traegt deshalb die Farbe der Flaeche, auf der die Checkbox liegt. Voreinstellung ist
 * die Kartenflaeche; Container mit einer anderen Flaeche setzen --dm-checkbox-mask selbst, die
 * Variable vererbt sich dann auf alle Checkboxen darin.
 */
html.dark-mode .custom-control.overflow-checkbox .overflow-control-indicator {
    border-color: var(--dm-border-strong);
}

html.dark-mode .custom-control.overflow-checkbox .overflow-control-indicator::after {
    border-bottom-color: var(--dm-text);
    border-right-color: var(--dm-text);
}

html.dark-mode .custom-control.overflow-checkbox .overflow-control-indicator::before {
    border-right-color: var(--dm-checkbox-mask, var(--dm-surface));
}

html.dark-mode .stock-card__quick,
html.dark-mode .stock-sort-bar,
html.dark-mode .card-header,
html.dark-mode .card-footer,
html.dark-mode .modal-header,
html.dark-mode .modal-footer,
html.dark-mode .dropdown-menu,
html.dark-mode .protocol-body,
html.dark-mode .item-edit-tabs,
html.dark-mode tr.item-row.alternate,
html.dark-mode tr.item-details.alternate {
    --dm-checkbox-mask: var(--dm-surface-2);
}

html.dark-mode .custom-control-label::before {
    background-color: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
}

html.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--dm-primary);
    border-color: var(--dm-primary);
}

html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
}

/* Native Checkbox/Radio: ohne das hier bleiben sie hellgrau und stechen heraus */
html.dark-mode input[type="checkbox"],
html.dark-mode input[type="radio"] {
    accent-color: var(--dm-primary);
}

html.dark-mode .form-text,
html.dark-mode small {
    color: var(--dm-text-muted);
}

/* ------------------------------------------------------------ Buttons */

html.dark-mode .btn-light {
    background-color: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
    color: var(--dm-text-strong);
}

html.dark-mode .btn-light:hover,
html.dark-mode .btn-light:focus {
    background-color: #363d50;
    border-color: var(--dm-border-strong);
    color: #fff;
}

html.dark-mode .btn-outline-secondary,
html.dark-mode .btn-outline-dark {
    border-color: var(--dm-border-strong);
    color: var(--dm-text);
}

html.dark-mode .btn-outline-secondary:hover,
html.dark-mode .btn-outline-dark:hover {
    background-color: var(--dm-surface-3);
    color: var(--dm-text-strong);
}

html.dark-mode .btn-link {
    color: var(--dm-primary);
}

html.dark-mode .btn-secondary {
    background-color: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
    color: var(--dm-text-strong);
}

/* ---------------------------------------------------------- Dropdowns */

html.dark-mode .dropdown-menu {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
    box-shadow: 0 0.5rem 1.5rem var(--dm-shadow);
}

html.dark-mode .dropdown-item {
    color: var(--dm-text);
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background-color: var(--dm-surface-hover);
    color: var(--dm-text-strong);
}

html.dark-mode .dropdown-item.active,
html.dark-mode .dropdown-item:active {
    background-color: var(--dm-primary);
    color: #10131a;
}

html.dark-mode .dropdown-divider {
    border-top-color: var(--dm-border);
}

html.dark-mode .dropdown-header {
    color: var(--dm-text-muted);
}

html.dark-mode .dropdown-menu li label {
    color: var(--dm-text);
}

/* ---------------------------------------------- Modals / Popover / Tooltip */

html.dark-mode .modal-content {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text-strong);
}

html.dark-mode .modal-backdrop.show {
    opacity: 0.7;
}

html.dark-mode .close {
    color: var(--dm-text-strong);
    text-shadow: none;
}

html.dark-mode .close:hover {
    color: #fff;
}

html.dark-mode .popover {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .popover-header {
    background-color: var(--dm-surface-3);
    border-bottom-color: var(--dm-border);
    color: var(--dm-text-strong);
}

html.dark-mode .popover-body {
    color: var(--dm-text);
}

html.dark-mode .popover .arrow::after {
    border-top-color: var(--dm-surface-2);
    border-bottom-color: var(--dm-surface-2);
    border-left-color: var(--dm-surface-2);
    border-right-color: var(--dm-surface-2);
}

/* ------------------------------------------------- Tabs / Pagination / Listen */

html.dark-mode .nav-tabs {
    border-bottom-color: var(--dm-border);
}

html.dark-mode .nav-tabs .nav-link {
    color: var(--dm-text-muted);
}

html.dark-mode .nav-tabs .nav-link:hover,
html.dark-mode .nav-tabs .nav-link:focus {
    border-color: var(--dm-border) var(--dm-border) transparent;
    color: var(--dm-text-strong);
}

html.dark-mode .nav-tabs .nav-link.active,
html.dark-mode .nav-tabs .nav-item.show .nav-link {
    background-color: var(--dm-surface);
    border-color: var(--dm-border) var(--dm-border) var(--dm-surface);
    color: var(--dm-text-strong);
}

html.dark-mode .page-link {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-primary);
}

html.dark-mode .page-link:hover {
    background-color: var(--dm-surface-hover);
    border-color: var(--dm-border);
    color: var(--dm-text-strong);
}

html.dark-mode .page-item.active .page-link {
    background-color: var(--dm-primary);
    border-color: var(--dm-primary);
    color: #10131a;
}

html.dark-mode .page-item.disabled .page-link {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text-muted);
}

html.dark-mode .list-group-item {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .list-group-item-action:hover,
html.dark-mode .list-group-item-action:focus {
    background-color: var(--dm-surface-hover);
    color: var(--dm-text-strong);
}

/* Alerts: die hellen Pastellflächen durch getönte Kästen mit farbigem Rand ersetzen */
html.dark-mode .alert {
    border-width: 1px;
}

html.dark-mode .alert-primary {
    background-color: rgba(78, 115, 223, 0.15);
    border-color: rgba(78, 115, 223, 0.45);
    color: #a9baff;
}

html.dark-mode .alert-success {
    background-color: rgba(28, 200, 138, 0.14);
    border-color: rgba(28, 200, 138, 0.45);
    color: #6fe4bb;
}

html.dark-mode .alert-info {
    background-color: rgba(54, 185, 204, 0.14);
    border-color: rgba(54, 185, 204, 0.45);
    color: #7adcea;
}

html.dark-mode .alert-warning {
    background-color: rgba(246, 194, 62, 0.14);
    border-color: rgba(246, 194, 62, 0.45);
    color: #f7d484;
}

html.dark-mode .alert-danger {
    background-color: rgba(231, 74, 59, 0.14);
    border-color: rgba(231, 74, 59, 0.45);
    color: #f79187;
}

html.dark-mode .alert-secondary,
html.dark-mode .alert-light,
html.dark-mode .alert-dark {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .badge-light {
    background-color: var(--dm-surface-3);
    color: var(--dm-text-strong);
}

html.dark-mode .progress {
    background-color: var(--dm-surface-3);
}

/* ------------------------------------------------------- Stock / Artikel */

html.dark-mode .stock-sort-bar {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .stock-card {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

html.dark-mode .stock-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-color: var(--dm-border-strong);
}

/* Der Schnellbearbeiten-Streifen sitzt unter der Karte und trägt die Eingabefelder.
   Er bleibt leicht abgesetzt, damit die Karte ihre zwei Hälften behält. */
html.dark-mode .stock-card__quick {
    background-color: var(--dm-surface-2);
    border-top-color: var(--dm-border);
}

html.dark-mode .item-row.saved,
html.dark-mode .item-row-top.saved,
html.dark-mode .item-row.alternate.saved,
html.dark-mode .item-row-top.alternate.saved {
    background-color: rgba(61, 220, 165, 0.18);
}

/* Suchfeld, Filterknöpfe und Export tragen im hellen Theme weiße Verläufe. Hier muss
   das background-Shorthand gesetzt werden, nicht nur background-color: sonst bleibt
   das Gradientenbild liegen und deckt die neue Farbe zu. */
html.dark-mode .stock-search-field {
    background: var(--dm-surface-2);
    border-color: var(--dm-border-strong);
    color: var(--dm-text-strong);
}

html.dark-mode .stock-search-field:focus {
    background: var(--dm-surface-3);
    border-color: var(--dm-primary);
    color: var(--dm-text-strong);
}

html.dark-mode .stock-search-icon {
    color: var(--dm-text-muted);
}

html.dark-mode .stock-search-count {
    background: var(--dm-surface-3);
    color: var(--dm-text);
}

html.dark-mode .stock-filter-export,
html.dark-mode .filter-dropdown-list .list-items .dropdown-toggle {
    background: var(--dm-surface-2);
    border-color: var(--dm-border-strong);
    color: var(--dm-text);
}

html.dark-mode .stock-filter-export:hover,
html.dark-mode .filter-dropdown-list .list-items .dropdown-toggle:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-primary);
    color: var(--dm-text-strong);
}

/* Auf der Cash-Back-Seite wird zusaetzlich stock.min.css geladen (auf der Lagerseite ist das
   auskommentiert). Die setzt die Farbe der Filterknoepfe ueber ihre id auf ein mittleres Grau und
   sticht damit die Regel darueber aus - der Filter stand dort als einziger dunkel. */
html.dark-mode #searchoption-type,
html.dark-mode #searchoption-filter-fba,
html.dark-mode #searchoption-color,
html.dark-mode #searchoption-stock {
    color: var(--dm-text);
}

/* Der Export-Knopf setzt seine Schriftfarbe im hellen Theme mit !important, die Regeln darueber
   greifen bei ihm deshalb nicht - er stand als einziger der Reihe in dunklem Grau. */
html.dark-mode .stock-filter-export {
    color: var(--dm-text) !important;
}

html.dark-mode .stock-filter-export:hover {
    color: var(--dm-text-strong) !important;
}

/* Die Eintraege der Filtermenues setzen ihre Schriftfarbe auf ein dunkles Grau und sind damit
   spezifischer als die allgemeine Link-Regel - auf dunklem Grund waren sie kaum zu lesen. */
html.dark-mode .filter-dropdown-list .dropdown-menu li > a,
html.dark-mode .filter-dropdown-list .dropdown-submenu > a {
    color: var(--dm-text);
}

/* Die dritte Menuebene faerbt ihre Eintraege mit einer Klasse mehr im Selektor als die Regel
   darueber und behielt deshalb ihr dunkles Grau - sie stand als einzige Ebene dunkel im Menue. */
html.dark-mode .filter-dropdown-list .dropdown-submenu .dropdown-submenu .dropdown-menu li > a {
    color: var(--dm-text);
}

/* Die Pfeile zu den Untermenues stehen im Hellen auf halber Deckkraft. Auf dunklem Grund
   verschwinden sie damit fast - hier tragen sie die Textfarbe und decken staerker. */
html.dark-mode .filter-dropdown-list .submenu-arrow {
    color: var(--dm-text);
    opacity: 0.85;
}

html.dark-mode .filter-dropdown-list .dropdown-submenu > a:hover .submenu-arrow {
    color: var(--dm-text-strong);
    opacity: 1;
}

/* Die Hover-Verläufe der Filtermenüs sind im Hellen zarte Farbtöne. Auf dunklem Grund
   wird daraus ein einheitlicher Hover - die Farbe steckt ohnehin schon im Eintrag. */
html.dark-mode .filter-dropdown-list .dropdown-menu li > a:hover,
html.dark-mode .filter-dropdown-list .dropdown-submenu > a:hover,
html.dark-mode .filter-dropdown-list .dropdown-submenu .dropdown-menu li > a:hover,
html.dark-mode .filter-dropdown-list .dropdown-submenu .dropdown-submenu > a:hover,
html.dark-mode .filter-dropdown-list .dropdown-submenu .dropdown-submenu .dropdown-menu li > a:hover,
html.dark-mode .filter-dropdown-list .dropdown-menu li > a[data-value]:hover {
    background: var(--dm-surface-hover);
    color: var(--dm-text-strong);
}

html.dark-mode .filter-dropdown-list .dropdown-menu li.divider {
    background: linear-gradient(90deg, transparent 0%, var(--dm-border) 50%, transparent 100%);
}

html.dark-mode .edit-stock-div {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .item-details-container {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.6);
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

html.dark-mode .item-details-close-bar {
    background-color: var(--dm-surface);
    border-bottom-color: var(--dm-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

html.dark-mode .item-details-close {
    color: var(--dm-text-muted);
}

html.dark-mode .item-details-close:hover {
    color: #fff;
}

html.dark-mode .image-preview-popup {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
}

html.dark-mode .item-edit-tabs {
    background-color: var(--dm-surface-2);
}

html.dark-mode .item-edit-tabs .nav-link {
    color: var(--dm-text-muted);
}

html.dark-mode .item-edit-tabs .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--dm-primary);
}

html.dark-mode .item-edit-tabs .nav-link.active {
    background-color: var(--dm-surface-2);
    color: var(--dm-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html.dark-mode .item-details-resize-handle::after {
    background-color: var(--dm-border-strong);
}

/* Produktbilder kommen mit weißem Hintergrund von Amazon - eine helle Kachel
   darunter ist ehrlicher als ein Bild, das im Dunkeln als weißer Block klebt */
html.dark-mode .item-picture {
    background-color: #e9eaee;
    border-color: var(--dm-border);
}

/* Die Zahlen-Chips behalten ihre Pastellflaechen - die sind die Statusfarbe und
   funktionieren im Dunkeln genauso. Ihre Schrift erbt aber die helle Textfarbe und
   wird damit unlesbar, also hier ein dunkler Ton passend zur Chipfarbe. */
html.dark-mode .pricecolor {
    color: #23283a;
}

/* das Dunkelgruen aus dem hellen Theme traegt auf dunklem Grund nicht */
html.dark-mode .costfeature-positive {
    color: var(--dm-success);
}

html.dark-mode #competitor-floatbox {
    background: var(--dm-surface-2);
    border-color: var(--dm-border-strong);
    color: var(--dm-text);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.6);
}

html.dark-mode .filter-dropdown-list .dropdown-submenu > .dropdown-menu {
    background-color: var(--dm-surface-2);
}

/* Jede .dropdown-menu erbt aus style.css opacity:.95. Da die Untermenüs im DOM ineinander
   verschachtelt sind, multipliziert sich der Wert pro Ebene (0.95³ ≈ 0.86), wodurch die dritte
   Ebene sichtbar blasser wirkt als die erste und zweite. Im Dunkeln haben die Menüs eine deckende
   Fläche - opacity zurück auf 1, damit alle Ebenen gleich hell sind. */
html.dark-mode .filter-dropdown-list .dropdown-menu {
    opacity: 1;
}

/* Die Icons unter dem Artikeltitel haengen in Links und wuerden sonst das Link-Blau der Regel
   `html.dark-mode a` tragen - die ist genauso spezifisch wie ihre Regel in style.css und steht
   spaeter. Sie gehoeren zusammen und sind erst beim Ueberfahren der Akzent. */
html.dark-mode .stock-card__meta-icons a {
    color: var(--dm-text-muted);
}

html.dark-mode .stock-card__meta-icons a:hover {
    color: var(--dm-primary);
}

html.dark-mode .marquee {
    color: var(--dm-danger);
}

/* Overlays waren im Hellen milchig weiß - auf dunklem Grund blendet das, also
   dunkle Schleier mit gleicher Deckkraft. */
html.dark-mode .item-details-loading {
    background-color: rgba(23, 27, 38, 0.7);
}

/* Die Platte wurde hier dunkel, die Pfeile darauf behielten aber ihr mittleres Grau aus dem
   hellen Theme - auf dem dunklen Grund war davon kaum noch etwas zu erkennen. */
html.dark-mode .image-preview-sync {
    background-color: rgba(33, 39, 57, 0.95);
    border-color: var(--dm-border-strong);
    color: var(--dm-text);
}

html.dark-mode .image-preview-sync:hover {
    color: var(--dm-primary);
}

/* Die BuyBox-Checker-Icons sind fertige svg-Dateien mit fest eingebauten Farben (#6F6F6F grau,
   #355CCC blau, im Aus-Zustand zusaetzlich auf 40% Deckkraft) - per css kommt man an die Fuellungen
   nicht heran. Bleibt der Filter: er hellt die Grafik als Ganzes auf, damit sie sich vom dunklen
   Untergrund abhebt. Die Zaehler-Plakette darin wird mit aufgehellt, was ihr guttut. */
html.dark-mode .stock-card__bbc a {
    filter: brightness(1.9);
}

/* Der Scrollbalken der Wettbewerberliste liegt auf dunklem Grund, das dunkle Grau des hellen
   Themes verschwindet dort. */
html.dark-mode .item-details-competitor-wrap {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

html.dark-mode .protocol-body {
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
}

/* Die Meldungsleiste nutzt noch die alten Bootstrap-3-Alerts mit hellen Pastellflächen */
html.dark-mode #mp-messages .alert-error {
    background-color: rgba(231, 74, 59, 0.16);
    border-color: rgba(231, 74, 59, 0.45);
    color: #f79187;
}

html.dark-mode #mp-messages .alert-warning {
    background-color: rgba(246, 194, 62, 0.16);
    border-color: rgba(246, 194, 62, 0.45);
    color: #f7d484;
}

html.dark-mode #mp-messages .alert-info {
    background-color: rgba(54, 185, 204, 0.16);
    border-color: rgba(54, 185, 204, 0.45);
    color: #7adcea;
}

html.dark-mode .price-opportunity-badge-margin {
    background-color: rgba(28, 200, 138, 0.18);
    border-color: rgba(28, 200, 138, 0.45);
    color: #6fe4bb;
}

html.dark-mode .price-opportunity-badge-competitivePrice {
    background-color: rgba(54, 185, 204, 0.18);
    border-color: rgba(54, 185, 204, 0.45);
    color: #7adcea;
}

html.dark-mode .no-dropdown-icon::after,
html.dark-mode [type="radio"]:checked + label:before,
html.dark-mode [type="radio"]:not(:checked) + label:before {
    background: var(--dm-surface-2);
    border-color: var(--dm-border-strong);
}

html.dark-mode .error:after,
html.dark-mode .error:before {
    background: var(--dm-bg);
}

html.dark-mode .topbar .dropdown-list .dropdown-item:active,
html.dark-mode .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
html.dark-mode .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background-color: var(--dm-surface-hover);
}

html.dark-mode #n8n-chat .chat-footer {
    background: var(--dm-surface-2);
    border-top-color: var(--dm-border);
}

/* ------------------------------------------------------------- Cash Back */

/*
 * Die Cash-Back-Tabellen benutzen noch die alten Tabellenzeilen aus stock.css
 * (#fcfcfc / #f6f6f6 im Wechsel). Bewusst ueber tr.item-row selektiert: auf der
 * Lagerseite traegt dieselbe Klasse inzwischen ein div in der Karte, das seine
 * Farbe schon von .stock-card__quick bekommt.
 */
html.dark-mode tr.item-row,
html.dark-mode tr.item-details {
    background-color: var(--dm-surface);
}

html.dark-mode tr.item-row.alternate,
html.dark-mode tr.item-details.alternate {
    background-color: var(--dm-surface-2);
}

html.dark-mode tr.item-row.mp-border,
html.dark-mode tr.item-row.mp-border-loading,
html.dark-mode tr.item-details.mp-border {
    background-color: var(--dm-surface-2);
}

html.dark-mode tr.item-row.delete {
    background-color: rgba(231, 74, 59, 0.2);
}

html.dark-mode tr.item-row.alternate.delete {
    background-color: rgba(231, 74, 59, 0.28);
}

/* ------------------------------------------------- Dashboard / Startseite */

/*
 * base.css baut die drei Karussell-Tabs (Top-Artikel, Flop-Artikel, Buybox) jeweils
 * eigenstaendig auf, mit denselben Regeln unter drei verschiedenen Ids. Deshalb hier
 * dieselbe Dreier-Liste - eine gemeinsame Klasse gibt es dort nicht.
 */
html.dark-mode #nav-tabContent,
html.dark-mode #nav-tabContent-buybox,
html.dark-mode #nav-tabContent-top {
    background: var(--dm-surface);
    color: var(--dm-text);
}

html.dark-mode #nav-tab,
html.dark-mode #nav-tab-buybox,
html.dark-mode #nav-tab-top {
    border-bottom-color: var(--dm-border);
}

html.dark-mode #nav-tab .nav-link,
html.dark-mode #nav-tab-buybox .nav-link,
html.dark-mode #nav-tab-top .nav-link {
    color: var(--dm-text-muted);
}

html.dark-mode #nav-tab .nav-link:hover,
html.dark-mode #nav-tab-buybox .nav-link:hover,
html.dark-mode #nav-tab-top .nav-link:hover,
html.dark-mode #nav-tab .nav-link.active,
html.dark-mode #nav-tab-buybox .nav-link.active,
html.dark-mode #nav-tab-top .nav-link.active {
    color: var(--dm-primary);
}

/* Das Dreieck unter dem aktiven Reiter ist ein Rahmen in der Farbe der Flaeche
   darunter - faerbt man sie um, muss es mitgehen, sonst bleibt ein weisser Zacken. */
html.dark-mode #nav-tab .nav-link.active::after,
html.dark-mode #nav-tab-buybox .nav-link.active::after,
html.dark-mode #nav-tab-top .nav-link.active::after {
    border-bottom-color: var(--dm-surface);
}

/* Die Verlaufs-Schleier links und rechts am Umsatzgraphen blenden ihn gegen die
   Kartenflaeche aus, sie muessen also deren Farbe tragen, nicht Weiss. */
html.dark-mode .dashboard-gradient-overlay-left {
    background-image: linear-gradient(to right, var(--dm-surface) 0px, rgba(33, 39, 57, 0.0001) 100%);
}

html.dark-mode .dashboard-gradient-overlay-right {
    background-image: linear-gradient(to right, rgba(33, 39, 57, 0.0001) 0px, var(--dm-surface) 100%);
}

html.dark-mode .mp-box-black-base,
html.dark-mode .mp-box-black-base-b {
    background: var(--dm-surface-2);
}

html.dark-mode #mp-carousel-base .item {
    border-color: var(--dm-border);
}

html.dark-mode #mp-carousel-base .carousel-indicators li {
    border-color: var(--dm-text-muted);
}

html.dark-mode #mp-carousel-base .carousel-indicators .active {
    background-color: var(--dm-text);
}

html.dark-mode .base-sum-rev {
    color: var(--dm-text);
}

html.dark-mode .article-data-link:hover {
    color: var(--dm-text-strong);
}

/* Die beiden Popover-Inhalte der Startseite bringen ihre eigene helle Flaeche mit,
   innerhalb des schon dunklen Popovers. */
html.dark-mode .buybox-loss-tooltip,
html.dark-mode .top-articles-tooltip {
    background: var(--dm-surface-2);
    box-shadow: none;
}

html.dark-mode .buybox-loss-tooltip .tooltip-label,
html.dark-mode .top-articles-tooltip .tooltip-label {
    color: var(--dm-text-strong);
}

html.dark-mode .buybox-loss-tooltip .tooltip-value,
html.dark-mode .top-articles-tooltip .tooltip-value,
html.dark-mode .top-articles-tooltip .tooltip-value-small {
    color: var(--dm-text);
}

html.dark-mode .top-articles-tooltip .tooltip-value-primary {
    color: var(--dm-primary);
}

html.dark-mode .buybox-loss-tooltip .tooltip-value-success,
html.dark-mode .top-articles-tooltip .tooltip-value-success {
    color: var(--dm-success);
}

html.dark-mode .buybox-loss-tooltip .tooltip-value-warning {
    color: var(--dm-warning);
}

html.dark-mode .buybox-loss-tooltip .tooltip-value-danger {
    color: var(--dm-danger);
}

/* ------------------------------------------------- Multiselect (Strategie) */

html.dark-mode .ms-container .ms-selectable,
html.dark-mode .ms-container .ms-selection {
    background: var(--dm-surface-2);
    color: var(--dm-text);
}

html.dark-mode .ms-container .ms-list {
    border-color: var(--dm-border-strong);
    box-shadow: none;
}

html.dark-mode .ms-container .ms-list.ms-focus {
    border-color: var(--dm-primary);
    box-shadow: 0 0 0 0.2rem rgba(123, 150, 255, 0.25);
}

html.dark-mode .ms-container .ms-optgroup-label {
    color: var(--dm-text-muted);
}

html.dark-mode .ms-container .ms-selectable li.ms-elem-selectable,
html.dark-mode .ms-container .ms-selection li.ms-elem-selection {
    border-bottom-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .ms-container .ms-selectable li.ms-hover,
html.dark-mode .ms-container .ms-selection li.ms-hover {
    background-color: var(--dm-surface-hover);
    color: var(--dm-text-strong);
}

html.dark-mode .ms-container .ms-selectable li.disabled,
html.dark-mode .ms-container .ms-selection li.disabled {
    background-color: var(--dm-surface);
    color: var(--dm-text-muted);
}

/* -------------------------------------------------------- jQuery UI */

html.dark-mode .ui-widget-content,
html.dark-mode .ui-datepicker,
html.dark-mode .ui-autocomplete {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .ui-widget-header,
html.dark-mode .ui-datepicker .ui-datepicker-header {
    background: var(--dm-surface-3);
    border-color: var(--dm-border);
    color: var(--dm-text-strong);
}

html.dark-mode .ui-state-default,
html.dark-mode .ui-widget-content .ui-state-default,
html.dark-mode .ui-datepicker td a {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html.dark-mode .ui-state-hover,
html.dark-mode .ui-widget-content .ui-state-hover,
html.dark-mode .ui-state-active,
html.dark-mode .ui-widget-content .ui-state-active {
    background: var(--dm-primary);
    border-color: var(--dm-primary);
    color: #10131a;
}

html.dark-mode .ui-widget-overlay {
    background: #000;
    opacity: 0.6;
}

/* --------------------------------------------------------- Scrollbars */

html.dark-mode * {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

html.dark-mode ::-webkit-scrollbar-track {
    background-color: transparent;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* ------------------------------------------------------------- n8n Chat */

html.dark-mode {
    --chat--color-white: #1b1f2a;
    --chat--color-light: #232837;
    --chat--color-light-shade-50: #2c3242;
    --chat--color-light-shade-100: #3a4154;
    --chat--color-medium: #454d63;
    --chat--color-dark: #e8eaf0;
    --chat--color-typing: #c2c7d4;
    --chat--message--bot--color: #e8eaf0;
}

/* das !important steht so auch im hellen Theme - ohne Gegenstück bliebe das Feld weiß */
html.dark-mode #n8n-chat .chat-input textarea {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-strong);
}

/* ------------------------------------------------------- Theme-Umschalter */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e3e6f0;
    border-radius: 50%;
    background-color: transparent;
    color: #858796;
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.theme-toggle:hover,
.theme-toggle:focus {
    background-color: #f8f9fc;
    border-color: #d1d5e4;
    color: #4e73df;
    outline: none;
}

/* Es hängen beide Icons im Markup; sichtbar ist immer das, in das der Klick
   führen würde - im Hellen der Mond, im Dunkeln die Sonne. */
.theme-toggle__icon--sun {
    display: none;
}

html.dark-mode .theme-toggle {
    border-color: var(--dm-border-strong);
    color: var(--dm-text-muted);
}

html.dark-mode .theme-toggle:hover,
html.dark-mode .theme-toggle:focus {
    background-color: var(--dm-surface-3);
    border-color: var(--dm-primary);
    color: var(--dm-warning);
}

html.dark-mode .theme-toggle__icon--sun {
    display: block;
}

html.dark-mode .theme-toggle__icon--moon {
    display: none;
}

html.dark-mode .brand-logo--light {
    display: none;
}

html.dark-mode .brand-logo--dark {
    display: inline-block;
}

/* Die gerade bearbeitete Karte ist am roten Rahmen zu erkennen. Der steht in style.css nur als
   Farbe an .stock-card.mp-border - html.dark-mode .stock-card ist spezifischer und hat ihn im
   Dunkeln wieder überschrieben, im Hellen bleibt er. Auch beim Überfahren muss er stehen
   bleiben, sonst zieht die Hover-Regel ihn zurück. */
html.dark-mode .stock-card.mp-border,
html.dark-mode .stock-card.mp-border:hover {
    border-color: #FF7564;
}