/* DARKMODE (08.10.2026, Vorgabe Bastian) - alles, was NICHT von Radzen kommt.
   Die Radzen-Bausteine bringen ihr dunkles Theme selbst mit (js/theme.js tauscht die Stylesheets),
   die Hausfarben stehen in css/nemesis-design.css als --nem-*. Hier bleiben nur die Flaechen, die
   wir ueber Bootstrap oder Metro beziehen und die fuer Weiss gebaut sind.
   Unsere eigenen Bausteine (Shortcut-Leiste, Tableiste) holen ihre Farben direkt aus der Palette
   und brauchen deshalb keine Gegenregel mehr. */

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

/* ---------- Grundflaechen ---------- */
html[data-theme="dunkel"],
html[data-theme="dunkel"] body {
    background-color: var(--nem-flaeche);
    color: var(--nem-schrift);
}

html[data-theme="dunkel"] .content,
html[data-theme="dunkel"] .main {
    background-color: var(--nem-flaeche);
    color: var(--nem-schrift);
}

/* Die Fusszeile ist hell gesetzt (app.css) - im Dunkeln waere sie ein weisser Balken. */
html[data-theme="dunkel"] .footer {
    background-color: var(--nem-reiter-flaeche);
    color: var(--nem-schrift);
    border-top: 1px solid var(--nem-kontur);
}

/* ---------- Bootstrap-Reste in unseren Seiten ---------- */
html[data-theme="dunkel"] .card,
html[data-theme="dunkel"] .modal-content,
html[data-theme="dunkel"] .list-group-item,
html[data-theme="dunkel"] .dropdown-menu {
    background-color: var(--nem-karte);
    color: var(--nem-schrift);
    border-color: var(--nem-kontur);
}

html[data-theme="dunkel"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nem-schrift);
    --bs-table-striped-bg: var(--nem-zebra);
    --bs-table-striped-color: var(--nem-schrift);
    --bs-table-hover-bg: var(--nem-tabelle-hover);
    --bs-table-hover-color: var(--nem-schrift);
    color: var(--nem-schrift);
    border-color: var(--nem-linie);
}

html[data-theme="dunkel"] .table > :not(caption) > * > * {
    border-color: var(--nem-linie);
}

/* Eingabefelder ausserhalb von Radzen (Bootstrap-Formulare, Scanfelder) */
html[data-theme="dunkel"] .form-control,
html[data-theme="dunkel"] .form-select,
html[data-theme="dunkel"] .input-group-text {
    background-color: var(--nem-eingabe-flaeche);
    color: var(--nem-schrift);
    border-color: var(--nem-kontur);
}

html[data-theme="dunkel"] .form-control::placeholder {
    color: var(--nem-schrift-gedimmt);
}

html[data-theme="dunkel"] .form-control:focus,
html[data-theme="dunkel"] .form-select:focus {
    background-color: var(--nem-eingabe-flaeche);
    color: var(--nem-schrift);
    border-color: var(--nem-akzent);
    box-shadow: 0 0 0 .2rem var(--nem-akzent-schleier);
}

html[data-theme="dunkel"] .btn-light,
html[data-theme="dunkel"] .btn-default {
    background-color: var(--nem-knopf-flaeche);
    color: var(--nem-knopf-schrift);
    border-color: var(--nem-kontur);
}

/* Meldungsbaender: Bootstrap-Alerts sind fuer Weiss gebaut - abdunkeln, Farbe bleibt erkennbar. */
html[data-theme="dunkel"] .alert {
    border-color: var(--nem-kontur);
    filter: brightness(.55) saturate(1.25);
}

/* ---------- Blazor-Eigenes ---------- */
html[data-theme="dunkel"] #blazor-error-ui {
    background: var(--nem-hinweis-flaeche);
    color: var(--nem-hinweis-schrift);
}

html[data-theme="dunkel"] .loading-progress-text {
    color: var(--nem-schrift);
}

/* Bildlaufleisten: fuer beide Fassungen in nemesis-design.css (09.10.2026). */

/* ---------- Logos und Bilder ---------- */
/* Strichzeichnungen auf Weiss (Symbole der Scanner- und Lagerseiten) verschwinden im Dunkeln.
   Nur ausdruecklich markierte Bilder werden invertiert - Fotos und Gefahrzettel NICHT. */
html[data-theme="dunkel"] img.theme-invertieren {
    filter: invert(1) hue-rotate(180deg);
}

/* ---------- Theme-Schalter ---------- */
/* In der Shortcut-Leiste traegt der Schalter die Klasse qat-btn und damit deren Aussehen.
   In der Kundenleiste gibt es keine .qat-Umgebung - dort braucht er eigene Masse. */
.theme-schalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--nem-radius, 2px);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.theme-schalter:hover {
    background: rgba(127, 127, 127, .25);
}

.theme-schalter-zelle {
    display: flex;
    align-items: center;
}

/* ---------- Metro-Reste im Rahmen der Anwendung ----------
   Ribbon-Menue und Kundenleiste kommen aus metro4.css mit festen hellen Farben. Die Auswahl hier
   ist spezifischer und greift deshalb, ohne dass die hellen Regeln angefasst werden muessen. */
/* Das Ribbon (RibbonMenu.razor.css) holt seine Farben inzwischen selbst aus der Palette -
   hier braucht es keine Gegenregel mehr. */

/* Metro-Aufklappmenues der Kundenleiste */
html[data-theme="dunkel"] .d-menu,
html[data-theme="dunkel"] .app-bar-menu .d-menu {
    background-color: var(--nem-karte);
    border-color: var(--nem-kontur);
    color: var(--nem-schrift);
}

html[data-theme="dunkel"] .d-menu a {
    color: var(--nem-schrift);
}

html[data-theme="dunkel"] .d-menu a:hover {
    background-color: var(--nem-hover-flaeche);
}