/* ============================================================================
   Aurora Glass auf den Identity-Seiten (D21).

   Anmeldung, Passkeys und Kontoverwaltung sind server-gerendert und tragen
   Bootstrap (D8), waehrend die Anwendung auf Radzen sitzt. Zwei Themes hiessen
   zwei Programme: man meldet sich in dem einen an und landet im anderen.

   Bootstrap wird deshalb NICHT entfernt — es traegt dort das Raster, und der
   Austausch waere ein Umbau jeder Identity-Seite fuer nichts. Stattdessen zeigen
   seine Variablen auf dieselben Tokens, und die wenigen Flaechen, die man
   wirklich sieht, bekommen dieselbe Behandlung wie ihre Radzen-Geschwister.

   Gebunden wird an .rz-body: die Identity-Seiten laufen ueber dasselbe
   MainLayout (ManageLayout setzt es ausdruecklich), also liegen sie darin —
   und Bootstrap faerbt damit nichts ausserhalb.
   ============================================================================ */

:root {
    --bs-body-font-family:      var(--sp-font);
    --bs-body-bg:               transparent;
    --bs-body-color:            var(--sp-text);
    --bs-secondary-color:       var(--sp-muted);
    --bs-tertiary-color:        var(--sp-faint);
    --bs-emphasis-color:        var(--sp-text);

    --bs-primary:               var(--sp-accent);
    --bs-primary-rgb:           27, 73, 101;
    --bs-danger:                var(--sp-neg);
    --bs-success:               var(--sp-pos);
    --bs-warning:               var(--sp-warn);
    --bs-info:                  var(--sp-accent-2);

    --bs-border-color:          var(--sp-border);
    --bs-border-radius:         var(--sp-radius-sm);
    --bs-border-radius-lg:      var(--sp-radius);
    --bs-link-color:            var(--sp-accent);
    --bs-link-hover-color:      var(--sp-accent-hover);
}

/* ------------------------------------------------------------ Ueberschrift -- */

/* Die Skala muss ueber ALLE Stufen fallen, die auf diesen Seiten vorkommen.
   Nur h1 und h2 zu setzen liess h3 auf Bootstraps 1.75rem stehen — auf der
   Anmeldeseite stand die rechte Spalte damit groesser da als die linke. */
.rz-body h1,
.rz-body h2,
.rz-body h3,
.rz-body h4 {
    color: var(--sp-text);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.16;
}

.rz-body h1 { font-size: 1.85rem; margin-bottom: 1rem; }
.rz-body h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.rz-body h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.rz-body h4 { font-size: 1.05rem; margin-bottom: .4rem; }

.rz-body hr {
    background-color: var(--sp-border);
    border: 0;
    height: 1px;
    margin: 1.35rem 0;
    opacity: 1;
}

/* ---------------------------------------------------------------- Knoepfe -- */

/* position und overflow nur dort, wo der Lichtstreifen sie braucht — siehe
   den Befund am Datumswaehler in components.css. */
.rz-body .btn {
    border-radius: var(--sp-radius-sm);
    font-family: var(--sp-font);
    font-weight: 600;
    transition: transform var(--sp-fast) var(--sp-ease),
                box-shadow var(--sp-base) var(--sp-ease),
                background var(--sp-base) var(--sp-ease),
                color var(--sp-base) var(--sp-ease);
}

.rz-body .btn:not(:disabled):hover  { transform: translateY(-1px); }
.rz-body .btn:not(:disabled):active { transform: translateY(0); transition-duration: 60ms; }

.rz-body .btn-primary {
    background-image: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
    border: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 18px -10px var(--sp-accent);
    color: var(--sp-on-accent);
}

.rz-body .btn-primary:not(:disabled):hover {
    box-shadow: 0 10px 26px -10px var(--sp-accent);
}

/* Derselbe Lichtstreifen wie auf dem Hauptknopf der Anwendung. Er ist das
   Wiedererkennungszeichen ueber die Grenze zwischen Bootstrap und Radzen. */
.rz-body .btn-primary::after {
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    bottom: 0;
    content: "";
    left: -60%;
    position: absolute;
    top: 0;
    transform: skewX(-18deg);
    transition: left 700ms var(--sp-ease);
    width: 45%;
}

.rz-body .btn-primary:not(:disabled):hover::after { left: 130%; }

.rz-body .btn-danger {
    background: transparent;
    border: 1px solid var(--sp-neg);
    color: var(--sp-neg);
}

.rz-body .btn-danger:not(:disabled):hover {
    background: var(--sp-neg);
    color: #fff;
}

.rz-body .btn-link {
    color: var(--sp-accent);
    text-decoration-color: color-mix(in srgb, var(--sp-accent) 35%, transparent);
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- Eingaben -- */

.rz-body .form-control {
    background: var(--sp-glass-2);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    color: var(--sp-text);
    transition: border-color var(--sp-base) var(--sp-ease),
                box-shadow var(--sp-base) var(--sp-ease),
                background var(--sp-base) var(--sp-ease);
}

.rz-body .form-control:hover { border-color: var(--sp-border-strong); }

.rz-body .form-control:focus {
    background: var(--sp-solid);
    border-color: var(--sp-accent);
    box-shadow: var(--sp-glow);
    color: var(--sp-text);
}

/* Das schwebende Etikett ist Bootstraps eigenes Muster; es bekommt nur die
   Farben, damit es nicht als graues Relikt im Feld sitzt. */
.rz-body .form-floating > label { color: var(--sp-faint); }

.rz-body .form-floating > .form-control:focus ~ label,
.rz-body .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--sp-accent);
}

.rz-body .form-label { color: var(--sp-muted); font-weight: 500; }

.rz-body .form-check-input {
    background-color: var(--sp-glass-2);
    border-color: var(--sp-border-strong);
}

.rz-body .form-check-input:checked {
    background-color: var(--sp-accent);
    border-color: var(--sp-accent);
}

.rz-body .form-check-input:focus {
    border-color: var(--sp-accent);
    box-shadow: var(--sp-glow);
}

.rz-body .input-group-text {
    background: var(--sp-glass);
    border: 1px solid var(--sp-border);
    color: var(--sp-muted);
}

/* ---------------------------------------------------------------- Hinweise -- */

.rz-body .alert {
    backdrop-filter: var(--sp-blur);
    -webkit-backdrop-filter: var(--sp-blur);
    background: var(--sp-glass);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-accent);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-1);
    color: var(--sp-text);
}

.rz-body .alert-warning { border-left-color: var(--sp-warn); }
.rz-body .alert-danger  { border-left-color: var(--sp-neg); }
.rz-body .alert-info    { border-left-color: var(--sp-accent); }

/* Die Textfarben der Validierung. text-danger steht 36-mal auf diesen Seiten
   und ist damit die haeufigste Farbaussage ueberhaupt. Bootstrap setzt sie
   selbst mit !important, also braucht die Korrektur dasselbe Gewicht. */
.rz-body .text-danger    { color: var(--sp-neg) !important; }
.rz-body .text-success   { color: var(--sp-pos) !important; }
.rz-body .text-info      { color: var(--sp-accent) !important; }
.rz-body .text-secondary { color: var(--sp-muted) !important; }

/* --------------------------------------------------- Kontoverwaltung (Nav) -- */

.rz-body .nav-pills .nav-link {
    border-radius: var(--sp-radius-sm);
    color: var(--sp-muted);
    font-weight: 500;
    transition: background var(--sp-base) var(--sp-ease),
                color var(--sp-base) var(--sp-ease);
}

.rz-body .nav-pills .nav-link:hover {
    background: var(--sp-glass-2);
    color: var(--sp-text);
}

.rz-body .nav-pills .nav-link.active {
    background: var(--sp-accent-soft);
    box-shadow: inset 3px 0 0 0 var(--sp-accent);
    color: var(--sp-accent);
}

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

.rz-body .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sp-text);
    border-color: var(--sp-border);
}

.rz-body .table > :not(caption) > * > * {
    background: transparent;
    border-bottom-color: var(--sp-border);
    color: var(--sp-text);
}

/* Die Wiederherstellungscodes sind Daten und keine Prosa. */
.rz-body .recovery-code {
    font-family: var(--sp-font-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/* ============================================================================
   Am Telefon (D35).

   Bootstrap bricht sein Raster von selbst um — col-lg-* wird unter 992 px zur
   vollen Breite, Anmeldung und Kontoverwaltung stehen dann untereinander. Was
   fehlt, sind die Trefferflaechen: ein Bootstrap-Knopf ist 38 px hoch, ein
   Menuepunkt der Kontoverwaltung noch flacher. Dieselben 44 px wie in der
   Anwendung, dieselbe Grenze (siehe css/components.css).
   ============================================================================ */

@media (max-width: 767.98px) {
    .rz-body .btn {
        min-height: 2.75rem;
    }

    /* Der Hauptknopf der Anmeldung traegt btn-lg und ist ohnehin gross; die
       Nebenwege — "Mit Passkey anmelden", "Passwort vergessen" — sind Links im
       Knopfgewand und waren die schmalsten Ziele der ganzen Anwendung. */
    .rz-body .nav-pills .nav-link {
        min-height: 2.75rem;
        padding-block: 0.65rem;
    }
}