/* =============================================================
   Login-/Anmeldeseite

   Das Seiten- und Kartenlayout kommt vollstaendig aus Fluent UI
   (FluentCard/FluentStack/FluentLabel/FluentDivider, siehe Login.razor und
   Konzept/Fluent-UX-Konzept.md) - hier steht deshalb NUR noch das, was Fluent
   nicht abbilden kann:
   1. der Seiten-Hintergrund (.login-page), damit dieser exakt dem
      Content-Bereich der angemeldeten App entspricht (siehe unten),
   2. der Passwort-Sichtbar-Button IM Eingabefeld (unsere Hybrid-Inputs,
      Konzept Abschnitt 6),
   3. die Shake-Rueckmeldung bei einem Fehlversuch.
   Keine eigenen Karten-/Kopf-/Fusszeilen-/Typografie-Klassen mehr.
   ============================================================= */

/* Ohne diese Klasse faellt die Login-Seite auf den globalen body-Hintergrund
   zurueck (var(--neutral-layer-1), siehe app-shell.css) - der eingeloggte
   Content-Bereich (.app-content) nutzt dagegen bewusst die abgedunkelte
   --app-shell-background-Berechnung (siehe app.css). Dadurch wirkte die
   Login-Seite sichtbar heller/anders als der Rest der App. .login-page
   gleicht das an, indem sie denselben Token wie .app-content nutzt. */
.login-page {
    min-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    background: var(--app-shell-background);
}

/* Smartphone-Breite: weniger Aussenabstand rund um die Karte, damit die
   400px-Login-/Onboarding-Karte (.surface-card-footer-centered) den
   verfuegbaren Platz besser ausnutzt statt links/rechts unnoetig viel
   Rand zu verschenken. */
@media (max-width: 575px) {
    .login-page {
        padding: 12px !important;
    }
}

/* Augen-Button im Passwortfeld: Label UND Button liegen beide NACH dem
   <input> (CSS-Geschwister-Selektor-Beschraenkung fuer das Floating-Label,
   siehe app.css), der Button muss daher absolut in das Feld hineingesetzt
   werden. */
.login-input-icon-btn {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.login-input-icon-btn svg {
    fill: var(--accent-fill-rest) !important;
}

/* Kurzes, dezentes Shake auf beiden Feldern bei einem Fehlversuch (E-Mail UND
   Passwort, da bewusst nicht verraten wird, welches der beiden falsch war).
   @key in Login.razor erzeugt bei jedem Fehlversuch ein neues Element, damit
   die Animation wiederholt abspielt statt nur einmalig. */
.login-input-shake {
    animation: login-input-shake 0.32s ease-in-out;
}

@keyframes login-input-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(1px); }
}

/* Nutzer mit "reduced motion"-Einstellung (Barrierefreiheit) bekommen keine
   Bewegungsanimationen. */
@media (prefers-reduced-motion: reduce) {
    .login-input-shake {
        animation: none;
    }
}