/* ==========================================================================
   Anmelde-Seiten (Login, Magic-Link, Registrierung ...) - ein Erscheinungsbild fuer alle, mit Hell/Dunkel.
   Geladen von layout/app/login.php UND Shield/layout.php (beide nutzen denselben Seitenaufbau).
   Optik wie vor dem Redesign (sanfter Blauverlauf, Pillen-Button), jetzt ueber Variablen, damit der Dunkelmodus
   (assets/js/theme-init.js) funktioniert.
   ========================================================================== */
:root {
    --auth-page-bg: #fbfbfd;
    --auth-card-bg: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    --auth-card-border: transparent;
    --auth-title: #1f2937;
    --auth-text: #64748b;
    --auth-input-bg: #ffffff;
    --auth-input-text: #1f2937;
    --auth-input-border: #dbe7f5;
    --auth-input-focus-border: #60a5fa;
    --auth-input-focus-ring: rgba(37, 99, 235, 0.12);
    --auth-btn-bg: #eef4ff;
    --auth-btn-border: #cfe0ff;
    --auth-btn-text: #1d4ed8;
    --auth-btn-hover-bg: #1d4ed8;
    --auth-btn-hover-text: #ffffff;
    --auth-link: #2563eb;
    --auth-link-hover: #1d4ed8;
    --auth-summary-bg: #f0f7ff;
    --auth-summary-border: #d7e8ff;
    --auth-divider: #dbe7f5;
}

[data-bs-theme="dark"] {
    --auth-page-bg: #0e1116;
    --auth-card-bg: linear-gradient(180deg, #1a2029 0%, #151a22 100%);
    --auth-card-border: #2a303b;
    --auth-title: #e6e9ef;
    --auth-text: #9aa4b2;
    --auth-input-bg: #10141a;
    --auth-input-text: #e6e9ef;
    --auth-input-border: #2f3744;
    --auth-input-focus-border: #60a5fa;
    --auth-input-focus-ring: rgba(96, 165, 250, 0.22);
    --auth-btn-bg: rgba(96, 165, 250, 0.14);
    --auth-btn-border: rgba(96, 165, 250, 0.35);
    --auth-btn-text: #93c5fd;
    --auth-btn-hover-bg: #3b82f6;
    --auth-btn-hover-text: #ffffff;
    --auth-link: #7aaafa;
    --auth-link-hover: #a5c7fd;
    --auth-summary-bg: rgba(96, 165, 250, 0.10);
    --auth-summary-border: #2a3a52;
    --auth-divider: #2a303b;
}

html,
body {
    background: var(--auth-page-bg);
    color: var(--auth-text);
}

.auth-screen {
    min-height: 100vh;
}

@supports (min-height: 100dvh) {
    .auth-screen {
        min-height: 100dvh;
    }
}

.login-card,
.auth-card {
    max-width: 440px;
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-card-border) !important;
    border-radius: 18px;
}

.login-title,
.auth-title {
    color: var(--auth-title);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.25;
}

.login-text,
.auth-text {
    color: var(--auth-text);
    font-size: 0.98rem;
    line-height: 1.6;
}

.login-input.form-control {
    height: 52px;
    border-radius: 12px;
    background-color: var(--auth-input-bg);
    color: var(--auth-input-text);
    border: 1px solid var(--auth-input-border) !important;
    box-shadow: none !important;
    padding-top: 1.05rem;
    padding-bottom: 0.35rem;
}

.login-input.form-control:focus {
    border-color: var(--auth-input-focus-border) !important;
    box-shadow: 0 0 0 0.2rem var(--auth-input-focus-ring) !important;
}

.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-input-text);
    -webkit-box-shadow: 0 0 0 1000px var(--auth-input-bg) inset;
    transition: background-color 9999s ease-in-out 0s;
    border: 1px solid var(--auth-input-border) !important;
}

.form-floating > label {
    color: var(--auth-text);
    padding-left: 0.95rem;
    padding-right: 0.95rem;
}

/* Button: Pille in sanftem Blau, beim Ueberfahren gefuellt (wie vor dem Redesign) - Login UND Magic-Link gleich */
.login-submit,
.login-submit-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.55rem 1rem;
    border: 1px solid var(--auth-btn-border);
    border-radius: 999px;
    background-color: var(--auth-btn-bg);
    color: var(--auth-btn-text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.login-submit:hover,
.login-submit:focus,
.login-submit-inline:hover,
.login-submit-inline:focus {
    background-color: var(--auth-btn-hover-bg);
    border-color: var(--auth-btn-hover-bg);
    color: var(--auth-btn-hover-text);
}

.login-submit:active,
.login-submit-inline:active {
    transform: translateY(1px);
}

.email-summary {
    background-color: var(--auth-summary-bg);
    color: var(--auth-text);
    border: 1px solid var(--auth-summary-border);
}

.email-summary strong {
    color: var(--auth-title);
}

.email-edit-link,
.auth-link {
    color: var(--auth-link);
    font-weight: 600;
    text-decoration: none;
}

.email-edit-link:hover,
.email-edit-link:focus,
.auth-link:hover,
.auth-link:focus {
    color: var(--auth-link-hover);
    text-decoration: none;
}

.auth-divider {
    border-top: 1px solid var(--auth-divider);
}

.auth-muted {
    color: var(--auth-text);
}

.auth-alert-error {
    background-color: rgba(var(--bs-danger-rgb), .12);
    color: var(--bs-danger-text-emphasis);
    border-radius: 14px;
}