/* ============================================================
   m2 identity server – Design-System (Bootstrap 5.3)
   Markenfarbe: m2-Orange (#FF9400)
   ============================================================ */

/* --- Schriftart: InterDisplay (1:1 aus der Diamond-Demo, lokal gehostet) ---
   Ausgeliefert wird ein WOFF2-Subset: Latin + Latin Extended-A + Satzzeichen +
   Waehrungen (489 Zeichen). Das deckt Deutsch, Franzoesisch, Italienisch, Englisch
   und Mitteleuropa ab und druckt die vier Schnitte von je ~265 KB (OTF, unkomprimiert)
   auf je ~36 KB. Nicht enthalten sind Vietnamesisch, IPA, kombinierende Akzente sowie
   Mathe- und Pfeilsymbole - die haetten die Dateien verdoppelt und fallen ueber die
   font-family-Kette in --bs-body-font-family sauber auf die Systemschrift zurueck. */

@font-face {
    font-family: "InterDisplay";
    src: url("/fonts/InterDisplay-Regular.woff2?v=1") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "InterDisplay";
    src: url("/fonts/InterDisplay-Medium.woff2?v=1") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "InterDisplay";
    src: url("/fonts/InterDisplay-SemiBold.woff2?v=1") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "InterDisplay";
    src: url("/fonts/InterDisplay-Bold.woff2?v=1") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- bootstrap-icons: nur die tatsaechlich benutzten Glyphen ---
   Die Bibliotheksschrift unter wwwroot/lib bringt 2078 Icons mit (131 KB), benutzt
   werden 47. Diese Datei enthaelt nur diese 47 (4.4 KB). Sie ueberschreibt das
   @font-face aus bootstrap-icons.min.css, weil site.css im Layout danach eingebunden
   wird; die Bibliothek selbst bleibt unberuehrt (sie wird von LibMan verwaltet und
   waere sonst beim naechsten Restore wieder ueberschrieben).
   ACHTUNG: Ein neu eingesetztes bi-*-Icon fehlt in dieser Datei und bleibt leer.
   In dem Fall das Subset neu erzeugen - die Klassenliste steckt in den Views. */
@font-face {
    font-family: "bootstrap-icons";
    src: url("/fonts/bootstrap-icons-subset.woff2?v=1") format("woff2");
    font-display: block;
}

:root {
    --m2-brand: #ff9400;
    --m2-brand-dark: #e07f00;
    --m2-brand-darker: #c06c00;
    --m2-brand-rgb: 255, 148, 0;

    /* Schriftart der gesamten Oberfläche auf InterDisplay umstellen */
    --bs-body-font-family: "InterDisplay", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Markenfarbe in Bootstrap-Komponenten verdrahten --- */

.btn-primary {
    --bs-btn-bg: var(--m2-brand);
    --bs-btn-border-color: var(--m2-brand);
    --bs-btn-hover-bg: var(--m2-brand-dark);
    --bs-btn-hover-border-color: var(--m2-brand-dark);
    --bs-btn-active-bg: var(--m2-brand-darker);
    --bs-btn-active-border-color: var(--m2-brand-darker);
    --bs-btn-disabled-bg: var(--m2-brand);
    --bs-btn-disabled-border-color: var(--m2-brand);
    --bs-btn-focus-shadow-rgb: var(--m2-brand-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--m2-brand-dark);
    --bs-btn-border-color: var(--m2-brand);
    --bs-btn-hover-bg: var(--m2-brand);
    --bs-btn-hover-border-color: var(--m2-brand);
    --bs-btn-active-bg: var(--m2-brand-dark);
    --bs-btn-active-border-color: var(--m2-brand-dark);
    --bs-btn-focus-shadow-rgb: var(--m2-brand-rgb);
}

[data-bs-theme=light] {
    --bs-link-color-rgb: 192, 108, 0;
    --bs-link-hover-color-rgb: 224, 127, 0;
}

[data-bs-theme=dark] {
    --bs-link-color-rgb: 255, 173, 64;
    --bs-link-hover-color-rgb: 255, 196, 115;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(var(--m2-brand-rgb), .6);
    box-shadow: 0 0 0 .25rem rgba(var(--m2-brand-rgb), .2);
}

.form-check-input:checked {
    background-color: var(--m2-brand);
    border-color: var(--m2-brand);
}

/* --- Seitengerüst --- */

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Weisser Hintergrund (bzw. dunkle Fläche im Dark Mode); kein Foto mehr */
    background-color: var(--bs-body-bg);
}

.site-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.site-footer {
    flex-shrink: 0;
    padding: 1rem 0;
}

/* --- Navbar --- */

.site-navbar {
    background: transparent;
    padding-top: .75rem;
}

.site-navbar .navbar-brand {
    font-weight: 600;
    letter-spacing: .01em;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    color: #fff;
    background-color: var(--m2-brand);
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: rgb(var(--bs-link-color-rgb));
}

.theme-toggle {
    border: 0;
    background: none;
    font-size: 1.1rem;
}

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

.auth-card {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
}

.auth-card .card-body {
    padding: 2.25rem 2rem;
}

.auth-card-wide {
    max-width: 56rem;
}

.auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--m2-brand);
    background-color: var(--bs-tertiary-bg);
}

.auth-title {
    /* Schriftgrösse 1:1 aus der Diamond-Demo (title-h5 = text-4xl, font-medium, leading-snug) */
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.375;
    text-align: center;
    margin-bottom: .5rem;
}

.auth-subtitle {
    text-align: center;
    color: var(--bs-secondary-color);
    margin-bottom: 1.5rem;
}

/* Trennlinie mit Text („oder klassisch …") */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: var(--bs-secondary-color);
    font-size: 1rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--bs-border-color);
}

/* Externe Login-Provider */
.auth-providers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.auth-providers .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Icon-only, kompakt nebeneinander statt prominent volle Breite.
       min-width sorgt für einen sauberen Touch-Target auf Mobile. */
    min-width: 3.5rem;
    padding: .5rem 1rem;
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 500;
}

/* --- Auth-Split: zweispaltig (Formular + Bild), nach Vorbild der Diamond-Demo --- */

.auth-split {
    width: 100%;
    max-width: 56rem;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}

.auth-split-form {
    padding: 2.75rem 2.5rem;
}

@media (min-width: 992px) {
    .auth-split-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem;
    }
}

/* Bildspalte: Zugersee-Landschaft, analog zum bisherigen Hintergrund.
   Quelle: Wikimedia Commons "Risch Zugersee.JPG", gemeinfrei (Public Domain). */
.auth-split-media {
    min-height: 26rem;
    /* Vier Dateien statt einer: AVIF, wo der Browser es kann (Chrome 85+, Firefox 93+,
       Safari 16.4+), sonst progressives mozjpeg-JPEG. Je Format eine Fassung fuer normale
       Displays (900x675 - die Bildspalte ist durch max-width: 56rem auf 447 CSS-Px
       begrenzt) und eine fuer HiDPI (1632x1224). Vorher lag hier eine einzige,
       unkomprimierte Datei mit 903 KB; jetzt sind es im Normalfall 40 KB.
       Das ?v= ist der Cache-Buster: Dateien mit v-Parameter liefert der Server ein Jahr
       lang immutable aus (StaticFileOptions in Startup.cs) -- bei Bildwechsel hochzaehlen.
       Die erste Zeile ist die Rueckfallebene fuer Browser ohne image-set(). */
    background-image: url("/images/auth-zug.jpg?v=2");
    background-image: -webkit-image-set(url("/images/auth-zug.jpg?v=2") 1x,
                                        url("/images/auth-zug-2x.jpg?v=2") 2x);
    background-image: image-set(url("/images/auth-zug.avif?v=2") type("image/avif") 1x,
                                url("/images/auth-zug-2x.avif?v=2") type("image/avif") 2x,
                                url("/images/auth-zug.jpg?v=2") type("image/jpeg") 1x,
                                url("/images/auth-zug-2x.jpg?v=2") type("image/jpeg") 2x);
    background-size: cover;
    background-position: center;
}

/* Submit-Button: Schriftgrösse wie Diamond (body-button = 1rem statt btn-lg 1.25rem) */
.auth-split-form .btn-lg {
    font-size: 1rem;
}

/* Querverweis Login <-> Registrieren (body-small = 1rem) */
.auth-switch {
    font-size: 1rem;
}

/* --- Float-Label-Variante "on": Label sitzt auf der oberen Rahmenlinie (wie PrimeNG variant="on") ---
   Bootstraps Standard-form-floating ist die "in"-Variante (Label innen oben). Wir heben das
   schwebende Label auf die Rahmenlinie und legen eine Kerbe in Hintergrundfarbe darunter. */

/* Eingabefeld kompakter: Bootstraps form-floating ist 3.5rem hoch, die "on"-Variante
   der Demo ist ~2.6rem. Text vertikal mittig – auch im gefloateten Zustand (Bootstrap
   würde ihn sonst nach unten drücken). */
.form-floating > .form-control,
.form-floating > .form-select {
    min-height: calc(2.6rem + 2px);
    height: auto;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: .55rem;
    padding-bottom: .55rem;
}

/* Ruhezustand: Label mittig wie ein Platzhalter */
.form-floating > label {
    height: auto;
    top: 50%;
    left: .45rem;
    padding: 0 .3rem;
    transform: translateY(-50%);
    transform-origin: 0 50%;
    transition: transform .12s ease-in-out, top .12s ease-in-out, color .12s ease-in-out;
    color: var(--bs-secondary-color);
}

/* Bootstraps innere Hintergrund-Pille (für die "in"-Variante) deaktivieren */
.form-floating > label::after {
    display: none;
}

/* Aktiv/gefüllt: Label auf die Rahmenlinie heben, Kerbe in Hintergrundfarbe */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    top: 0;
    transform: translateY(-50%) scale(.85);
    background-color: var(--bs-body-bg);
    border-radius: .25rem;
    opacity: 1;
    color: var(--bs-secondary-color);
}

/* Im Fokus zusätzlich die Markenfarbe */
.form-floating > .form-control:focus ~ label {
    color: var(--m2-brand-dark);
}

/* --- Validierung (aspnet-client-validation) --- */

.input-validation-error {
    border-color: var(--bs-form-invalid-border-color);
}

.input-validation-error:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
}

.field-validation-error {
    display: block;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-form-invalid-color);
}

.validation-summary-errors {
    margin-top: 1rem;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.validation-summary-valid {
    display: none;
}