/* MudBlazor-Styles nur für MudBlazor-Komponenten.

   MudBlazor.min.css bringt neben den Komponentenregeln (.mud-…) eine Handvoll
   globaler Regeln mit: einen Reset für jedes Element (* { margin:0; padding:0;
   border-width:0; border-style:solid }), eigene Grundwerte für body, a, button,
   label, input/select/textarea, strong/b und iframe und eigene Farben für die
   Blazor-Fehlerleiste. Ohne Gegenmaßnahme gelten sie für jedes Element der App,
   auch für unsere.

   Diese Datei nimmt genau diese Regeln für alles zurück, was kein MudBlazor-
   Element ist (keine Klasse mit „mud-“). Für unsere Elemente gilt danach nur,
   was Bootstrap und unsere Stylesheets festlegen – so, als gäbe es
   MudBlazor.min.css nicht. MudBlazor-Elemente behalten ihre Styles vollständig.

   Wie das funktioniert:
   - Jede Regel hier hat exakt die Spezifität der MudBlazor-Regel, die sie
     zurücknimmt (:where() zählt nicht mit), und steht direkt dahinter. Damit
     gewinnt sie gegen MudBlazor und verliert gegen alles, was danach kommt.
   - revert setzt eine Eigenschaft auf den Wert, den sie ohne Autoren-Styles
     hätte, also die Browser-Vorgabe. Wo Bootstrap oder unser CSS einen Wert
     setzt, gewinnt der ohnehin.
   Deshalb MUSS diese Datei in index.html direkt nach MudBlazor.min.css und vor
   allen anderen Stylesheets stehen.

   Die Datei gibt es zweimal, identisch: CaliSearch/wwwroot/css und
   CaliSearch.Review/wwwroot/css. Ein Link im csproj statt der Kopie landet
   zwar im Publish, der Dev-Server liefert ihn aber leer aus. Änderungen also
   in beiden Dateien – MudBlazorScopeTests prüft, dass sie gleich sind.

   Zugeschnitten auf die MudBlazorVersion in Directory.Build.props. Bringt ein
   Update neue globale Regeln, schlägt MudBlazorScopeTests fehl und nennt sie. */

/* --- Reset für alle Elemente ---------------------------------------------- */

*:where(:not([class*="mud-"])) {
    box-sizing: revert;
    margin: revert;
    padding: revert;
    border-width: revert;
    border-style: revert;
    -webkit-font-smoothing: revert;
    -moz-osx-font-smoothing: revert;
    -webkit-tap-highlight-color: revert;
}

/* --- Grundwerte der Seite ------------------------------------------------- */

body:where(:not([class*="mud-"])) {
    color: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
    letter-spacing: revert;
    text-transform: revert;
    background-color: revert;
}

strong:where(:not([class*="mud-"])),
b:where(:not([class*="mud-"])) {
    font-weight: revert;
}

a:where(:not([class*="mud-"])) {
    color: revert;
    text-decoration: revert;
}

/* MudBlazor nimmt Links den Fokusrahmen – für Tastaturnutzer der einzige
   Hinweis, wo sie gerade sind. */
a:focus-visible:where(:not([class*="mud-"])) {
    outline: revert;
}

label:where(:not([class*="mud-"])) {
    display: revert;
}

iframe:where(:not([class*="mud-"])) {
    border: revert;
    height: revert;
    width: revert;
}

[hidden]:where(:not([class*="mud-"])) {
    display: revert !important;
}

/* --- Formularelemente ------------------------------------------------------ */

button:where(:not([class*="mud-"])) {
    color: revert;
    border: revert;
    cursor: revert;
    margin: revert;
    display: revert;
    outline: revert;
    padding: revert;
    position: revert;
    align-items: revert;
    user-select: revert;
    border-radius: revert;
    vertical-align: revert;
    appearance: revert;
    justify-content: revert;
    text-decoration: revert;
    background-color: revert;
    -webkit-tap-highlight-color: revert;
    font-family: revert;
    font-size: revert;
    line-height: revert;
    overflow: revert;
    text-transform: revert;
}

button:focus:where(:not([class*="mud-"])) {
    outline: revert;
}

input:where(:not([class*="mud-"])),
select:where(:not([class*="mud-"])),
optgroup:where(:not([class*="mud-"])),
textarea:where(:not([class*="mud-"])) {
    margin: revert;
    font-family: revert;
    font-size: revert;
    line-height: revert;
}

input:where(:not([class*="mud-"])) {
    overflow: revert;
}

select:where(:not([class*="mud-"])) {
    text-transform: revert;
    word-wrap: revert;
}

[type=button]:where(:not([class*="mud-"])),
[type=reset]:where(:not([class*="mud-"])),
[type=submit]:where(:not([class*="mud-"])) {
    appearance: revert;
}

/* --- Blazor-Fehlerleiste und Reconnect-Dialog ------------------------------ */

/* MudBlazor färbt die Fehlerleiste um (weiße Schrift); unsere eigene Gestaltung
   in app.css setzt keine Schriftfarbe und wäre damit unlesbar. */
#blazor-error-ui:where(:not([class*="mud-"])) {
    background-color: revert;
    color: revert;
    bottom: revert;
    box-shadow: revert;
    display: revert;
    left: revert;
    padding: revert;
    position: revert;
    width: revert;
    z-index: revert;
}

#blazor-error-ui .reload:where(:not([class*="mud-"])) {
    color: revert;
    text-decoration: revert;
}

#blazor-error-ui .dismiss:where(:not([class*="mud-"])) {
    color: revert;
    cursor: revert;
    position: revert;
    right: revert;
    top: revert;
}

/* Nur Blazor Server kennt diesen Dialog; der Vollständigkeit halber. */
#components-reconnect-modal:where(:not([class*="mud-"])) {
    z-index: revert !important;
    background-color: revert !important;
}

#components-reconnect-modal h5:where(:not([class*="mud-"])) {
    font-size: revert;
}

#components-reconnect-modal button:where(:not([class*="mud-"])) {
    color: revert;
    padding: revert;
    font-size: revert;
    min-width: revert;
    box-sizing: revert;
    transition: revert;
    font-weight: revert;
    line-height: revert;
    border-radius: revert;
    letter-spacing: revert;
    text-transform: revert;
    margin: revert !important;
}

#components-reconnect-modal button:hover:where(:not([class*="mud-"])) {
    background-color: revert;
}