/* style/authentication.css
   Gemeinsame, theme-basierte Darstellung für Passwortkomponente und
   Login-Sperranzeige. Es werden ausschließlich bestehende semantische
   Theme-Variablen und die zentralen SWCE-Buttons/Formfelder verwendet. */

.swce-password-component {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.swce-password-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.swce-password-field > label {
    color: var(--text-muted, #bdc3c7);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.swce-password-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
    min-width: 0;
}

.swce-password-input-row .form-control {
    min-width: 0;
}

.swce-password-compact-action {
    min-width: 92px;
    white-space: nowrap;
}

.swce-password-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.swce-password-actions .btn {
    flex: 1 1 150px;
    min-width: 0;
}

.swce-password-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #34495e);
    border-radius: 6px;
    background: color-mix(in srgb, var(--panel-bg, #17212b) 82%, transparent);
    cursor: var(--cursor-hover, pointer);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.swce-password-option:hover,
.swce-password-option:focus-within {
    border-color: var(--accent-info, #3498db);
    background: color-mix(in srgb, var(--accent-info, #3498db) 8%, var(--panel-bg, #17212b));
}

.swce-password-option > span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.swce-password-option strong {
    color: var(--text-main, #ecf0f1);
    font-size: 0.86rem;
}

.swce-password-option small,
.swce-password-policy-hint {
    color: var(--text-muted, #bdc3c7);
    font-size: 0.76rem;
    line-height: 1.45;
}

.swce-password-policy-hint {
    margin: 0;
}

.swce-password-strength {
    display: grid;
    gap: 6px;
}

.swce-password-strength-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted, #bdc3c7);
    font-size: 0.76rem;
}

.swce-password-strength-head output {
    color: var(--text-main, #ecf0f1);
    font-weight: 700;
}

.swce-password-strength-track {
    height: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color, #34495e);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-main, #0b0f13) 88%, transparent);
}

.swce-password-strength-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--text-muted, #bdc3c7);
    transition: width 0.18s ease, background 0.18s ease;
}

.swce-password-strength-track[data-strength="1"] > span {
    background: var(--accent-danger, #e74c3c);
}

.swce-password-strength-track[data-strength="2"] > span {
    background: var(--accent-warning, #f1c40f);
}

.swce-password-strength-track[data-strength="3"] > span {
    background: var(--accent-info, #3498db);
}

.swce-password-strength-track[data-strength="4"] > span {
    background: var(--accent-success, #2ecc71);
}

.swce-password-status {
    min-height: 1.3em;
    margin: 0;
    color: var(--text-muted, #bdc3c7);
    font-size: 0.78rem;
    line-height: 1.4;
}

.swce-password-status.is-success {
    color: var(--accent-success, #2ecc71);
}

.swce-password-status.is-warning {
    color: var(--accent-warning, #f1c40f);
}

.swce-password-status.is-error {
    color: var(--accent-danger, #e74c3c);
}

.swce-login-lock-notice {
    align-items: center;
}

.swce-login-lock-notice[hidden] {
    display: none !important;
}

.swce-login-lock-notice [data-swce-login-lock-message] {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
    .swce-password-input-row {
        grid-template-columns: 1fr;
    }

    .swce-password-compact-action,
    .swce-password-actions .btn {
        width: 100%;
    }
}

/* Gemeinsames, kompaktes Seitenlayout für öffentliche Authentifizierungsabläufe. */
.swce-auth-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
}

.swce-auth-card {
    width: min(100%, 34rem);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 1.75rem);
}

.swce-auth-card-wide {
    width: min(100%, 44rem);
}

.swce-auth-title,
.swce-auth-description {
    margin-top: 0;
}

.swce-auth-description {
    color: var(--text-muted, #bdc3c7);
    line-height: 1.55;
}

.swce-auth-expiry {
    margin: 0;
    color: var(--text-muted, #bdc3c7);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.swce-auth-notice {
    margin: 1rem 0;
}

.swce-auth-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.swce-auth-form .swce-password-field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.swce-auth-form .form-control,
.swce-auth-form .swce-password-field input {
    width: 100%;
    min-width: 0;
}

.swce-auth-submit {
    justify-content: center;
    width: 100%;
}

.swce-auth-back-link {
    display: inline-flex;
    margin-top: 1rem;
}

@media (max-width: 520px) {
    .swce-auth-page {
        align-items: start;
        padding: 0.75rem;
    }

    .swce-auth-card,
    .swce-auth-card-wide {
        padding: 1rem;
    }
}

/* Zusätzliche Mailbox-Prüfung nach auffälligen Login-Fehlern. */
.swce-login-step-up {
    display: grid;
    gap: 7px;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid var(--accent-warning, #f1c40f);
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent-warning, #f1c40f) 7%, var(--panel-bg, #17212b));
}

.swce-login-step-up[hidden] {
    display: none !important;
}

.swce-auth-field-label {
    color: var(--text-muted, #bdc3c7);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
}

.swce-auth-field-help {
    margin: 0;
    color: var(--text-muted, #bdc3c7);
    font-size: 0.76rem;
    line-height: 1.45;
}

/* Das Honeypot-Feld bleibt für einfache Formularbots vorhanden, ist aber für
   Tastatur-, Maus- und Screenreader-Nutzer vollständig außerhalb des Layouts. */
.swce-auth-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}