/* =============================================================================
   Identity-Seiten (Anmeldung, Passwort, Kontoverwaltung).

   Diese Seiten laufen als statisches SSR — dort funktionieren die interaktiven
   MudBlazor-Formularfelder nicht. Rahmen, Karten und Knöpfe kommen deshalb weiterhin
   von MudBlazor, die Formularfelder selbst sind natives HTML mit diesen Klassen.

   Alles baut auf denselben Tokens wie der Rest der Anwendung (siehe app.css und
   Components/Layout/AppTheme.cs), damit die Seiten kein Fremdkörper sind.
   Bootstrap wird nicht mehr geladen; die wenigen weiterhin benutzten Hilfsklassen
   stehen unten in Abschnitt 6.

   Gliederung
     1  Anmeldebereich (AuthLayout)
     2  Formularfelder
     3  Knöpfe
     4  Rückmeldungen
     5  Kontoverwaltung
     6  Hilfsklassen
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1  Anmeldebereich
   ------------------------------------------------------------------------- */

.auth-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.auth-topbar {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
}

.auth-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 8px 20px 56px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--mud-palette-text-primary);
}

.auth-brand .mud-icon-root {
    color: var(--mud-palette-primary);
}

.mud-paper.auth-card {
    width: 100%;
    max-width: 420px;
}

/* Breitere Karte, wo mehr hineinmuss (Wiederherstellungscodes, Authenticator). */
.mud-paper.auth-card-wide {
    max-width: 620px;
}

.auth-head {
    margin-bottom: 24px;
}

.auth-title {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.018em;
    margin: 0;
}

.auth-lead {
    margin: 6px 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

/* Trenner mit Beschriftung („ODER“). */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--mud-palette-lines-default);
}

.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem;
}

.auth-note {
    margin: 0;
    max-width: 420px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------------------------------------------------------------------------
   2  Formularfelder
   Nachbau der MudBlazor-Felder aus Variant.Outlined, damit Anmeldung und Dialoge
   gleich aussehen. Die Beschriftung steht über dem Feld; im Markup folgt sie dem
   Eingabefeld, deshalb wird sie per order nach oben gezogen.
   ------------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.field-label {
    order: -1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.field-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--app-radius-sm);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.field-input::placeholder {
    color: var(--mud-palette-text-disabled);
}

.field-input:hover:not(:disabled) {
    border-color: color-mix(in oklab, var(--mud-palette-text-primary) 30%, transparent);
}

.field-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: var(--app-focus-ring);
}

.field-input:disabled {
    color: var(--mud-palette-text-secondary);
    background-color: var(--app-surface-sunken);
    cursor: not-allowed;
}

.field-input.invalid,
.field-input[aria-invalid="true"] {
    outline: none;
    border-color: var(--mud-palette-error);
}

/* Feld mit angehängtem Zusatz, etwa dem Haken hinter der bestätigten E-Mail. */
.field-inline {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.field-inline .field-label {
    grid-column: 1 / -1;
}

.field-badge {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--app-radius-sm);
    font-weight: 600;
    color: var(--mud-palette-success);
    background-color: color-mix(in oklab, var(--mud-palette-success) 12%, transparent);
}

.field-hint {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    font-size: 0.875rem;
    cursor: pointer;
}

.check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   3  Knöpfe
   Gleiche Maße, Radien und Farben wie die MudBlazor-Buttons im Rest der Anwendung.
   ------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.75;
    color: var(--mud-palette-text-primary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--app-focus-ring);
}

.btn:disabled {
    color: var(--mud-palette-action-disabled);
    background-color: var(--mud-palette-action-disabled-background);
    cursor: not-allowed;
}

.btn-primary {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

.btn-primary:hover {
    background-color: var(--mud-palette-primary-darken);
}

.btn-danger {
    color: var(--mud-palette-error-text);
    background-color: var(--mud-palette-error);
}

.btn-danger:hover {
    background-color: var(--mud-palette-error-darken);
}

.btn-quiet {
    border-color: var(--mud-palette-lines-inputs);
}

.btn-quiet:hover {
    background-color: var(--app-surface-sunken);
    border-color: color-mix(in oklab, var(--mud-palette-text-primary) 25%, transparent);
}

.btn-link {
    padding: 0;
    color: var(--mud-palette-primary);
    background: none;
    border: none;
    line-height: inherit;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-block {
    width: 100%;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   4  Rückmeldungen
   ------------------------------------------------------------------------- */

.alert {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: var(--app-radius);
    font-size: 0.8125rem;
    border: 1px solid transparent;
}

.alert p {
    margin: 6px 0 0;
}

.alert p:first-child {
    margin-top: 0;
}

.alert a {
    color: inherit;
    font-weight: 600;
}

.alert-success {
    color: var(--mud-palette-success-darken);
    background-color: color-mix(in oklab, var(--mud-palette-success) 12%, transparent);
    border-color: color-mix(in oklab, var(--mud-palette-success) 30%, transparent);
}

.alert-danger {
    color: var(--mud-palette-error-darken);
    background-color: color-mix(in oklab, var(--mud-palette-error) 12%, transparent);
    border-color: color-mix(in oklab, var(--mud-palette-error) 30%, transparent);
}

.alert-warning {
    color: var(--mud-palette-warning-darken);
    background-color: color-mix(in oklab, var(--mud-palette-warning) 14%, transparent);
    border-color: color-mix(in oklab, var(--mud-palette-warning) 32%, transparent);
}

.alert-info {
    color: var(--mud-palette-info-darken);
    background-color: color-mix(in oklab, var(--mud-palette-info) 12%, transparent);
    border-color: color-mix(in oklab, var(--mud-palette-info) 30%, transparent);
}

/* Im dunklen Design sind die abgedunkelten Textfarben zu schwach. */
.mud-theme-dark .alert-success { color: var(--mud-palette-success); }
.mud-theme-dark .alert-danger { color: var(--mud-palette-error); }
.mud-theme-dark .alert-warning { color: var(--mud-palette-warning); }
.mud-theme-dark .alert-info { color: var(--mud-palette-info); }

.validation-errors {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--mud-palette-error);
}

/* ---------------------------------------------------------------------------
   4b  Seiten mit Schlüssel-Link (Auftragsanfrage, Terminvorschlag)

   Zwei Spalten aus Beschriftung und Wert. Auf schmalen Geräten untereinander —
   der Monteur liest das am Handy.
   ------------------------------------------------------------------------- */

.public-facts {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0 0 24px;
    font-size: 0.9375rem;
}

.public-facts dt {
    color: var(--mud-palette-text-secondary);
}

.public-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 599px) {
    .public-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .public-facts dd {
        margin-bottom: 10px;
    }
}

/* ---------------------------------------------------------------------------
   5  Kontoverwaltung
   ------------------------------------------------------------------------- */

.manage-section {
    max-width: 640px;
}

.manage-section > :first-child {
    margin-top: 0;
}

.manage-steps {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 0.875rem;
}

.manage-steps kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8125em;
    background-color: var(--app-surface-sunken);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-radius-xs);
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.recovery-code {
    padding: 8px 10px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--mud-palette-text-primary);
    background-color: var(--app-surface-sunken);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-radius-xs);
}

.passkey-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.passkey-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-radius);
}

.passkey-name {
    font-weight: 500;
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   6  Hilfsklassen
   MudBlazor liefert die Abstands- und Flex-Klassen mit; hier stehen nur die,
   die vorher aus Bootstrap kamen.
   ------------------------------------------------------------------------- */

.text-secondary { color: var(--mud-palette-text-secondary); }
.text-danger { color: var(--mud-palette-error); }
.text-success { color: var(--mud-palette-success); }
.text-info { color: var(--mud-palette-info); }

.w-100 { width: 100%; }

.stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prose {
    font-size: 0.875rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.prose p {
    margin: 0 0 12px;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose a {
    color: var(--mud-palette-primary);
}

/* ---------------------------------------------------------------------------
   Kleine Bildschirme
   Die Anmeldekarte ist mit max-width bereits flexibel; hier geht es nur um die
   Innenabstände, die auf einem Telefon zu viel Fläche kosten.
   ------------------------------------------------------------------------- */

@media (max-width: 599.98px) {
    .auth-main {
        padding: 8px 12px 40px;
    }

    /* Die Karte trägt die Utility-Klasse pa-8, die mit !important arbeitet. */
    .mud-paper.auth-card.pa-8 {
        padding: 20px !important;
    }

    .auth-links {
        gap: 8px;
    }
}

/* Firmenlogo über der Anmeldekarte; ohne Logo bleiben Symbol und Schriftzug. */
.auth-brand-logo {
    max-height: 64px;
    max-width: min(280px, 100%);
    object-fit: contain;
}