/* ── ThemeToggle-Button (Hell/Dunkel-Umschalter in der Topbar) ──
   Globale Regeln statt Scoped CSS, damit der Button in allen Modulen
   korrekt dargestellt wird – unabhaengig vom Blazor-Circuit-Status. */

.pm-theme-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    user-select: none;
}

.pm-theme-toggle:hover {
    background: #f0f4ff;
}

.pm-theme-toggle:focus-visible {
    outline: 2px solid #0098ff;
    outline-offset: 1px;
}

/* Hell: Mond zeigen (-> Dunkel einschalten), Sonne ausblenden */
.pm-theme-icon-sun {
    display: none;
}

/* Dunkel: Mond ausblenden, Sonne zeigen (-> Hell einschalten) */
html[data-theme="dark"] .pm-theme-icon-moon {
    display: none;
}

html[data-theme="dark"] .pm-theme-icon-sun {
    display: inline;
}

/* ── OBS Portal: Dunkles Design ──
   Aktiv ueber <html data-theme="dark"> (gesetzt von js/pm-theme.js, umgeschaltet per ThemeToggle).

   Die Module verwenden mehrere tausend fest codierte Farben in ihren Scoped-CSS-Dateien.
   Statt jede Regel einzeln zu ueberschreiben, wird die gesamte Seite per Filter invertiert
   (invert + hue-rotate): Hell/Dunkel kehrt sich um, Farbtoene (Blau, Rot, Gruen ...) bleiben erhalten.
   Bilder, Videos, Canvas etc. werden zurueckgedreht und behalten ihre Originalfarben.

   Opt-out fuer farbkritische Bereiche (z.B. frei konfigurierte Schichtfarben):
   Klasse "pm-theme-keep" am Element -> Inhalt wird in Originalfarben dargestellt. */

html[data-theme="dark"] {
    /* Canvas-Hintergrund wird nicht gefiltert -> direkt den invertierten Ton von #f2f2f2 setzen */
    background: #242424;
    filter: invert(0.9) hue-rotate(180deg);
    /* Viewport-Scrollbar wird ebenfalls nicht gefiltert */
    scrollbar-color: #5a5a5a #242424;
}

/* Scrollbars innerhalb der Seite werden mitgefiltert -> helle Werte angeben */
html[data-theme="dark"] body {
    scrollbar-color: #b4b4b4 #ececec;
}

/* Medien sofort (vor dem ersten Scan) zurueckdrehen */
html[data-theme="dark"] :is(img, video, picture, iframe, canvas, object, embed) {
    filter: invert(1) hue-rotate(180deg);
}

/* Vom Scanner in js/pm-theme.js gesetzt:
   data-pm-flip   -> Flaeche wird gegenueber ihrem Kontext gedreht (dunkle Flaeche behaelt Originalfarbe,
                     helle Flaeche in einer dunklen wird wieder invertiert)
   data-pm-noflip -> Medium liegt bereits in einem zurueckgedrehten Bereich */
html[data-theme="dark"] [data-pm-flip] {
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] [data-pm-noflip],
html[data-theme="dark"] picture img {
    filter: none;
}

/* Logo (transparentes PNG mit dunkler Schrift) mit der Seite invertieren, sonst Navy auf Dunkel */
html[data-theme="dark"] img.pm-brand-logo {
    filter: none;
}

/* Schatten werden durch die Invertierung zu hellen Schimmern -> abschwaechen */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .card {
    box-shadow: none;
}

/* Druck/PDF immer im hellen Design */
@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] * {
        filter: none !important;
    }

    html[data-theme="dark"] {
        background: #fff;
    }
}