/*
 * auth-forms.css — page-specific styles for the public auth FORMS
 * (forgot_password, reset_password, register, change_password).
 *
 * These pages reuse the login standard: they load auth-ui.css + login-modern.css
 * and use the .login-card / .login-header / .login-body shell, so the bulk of the
 * theme-token layout, focus rings, alert colors and dark-theme contrast come for
 * free from login-modern.css. This file adds ONLY what those forms need on top:
 *   - a generic, accessible password show/hide toggle (multiple fields per page)
 *   - the password-requirements helper panel
 *   - small spacing helpers for the success / invalid-token states
 *
 * ZERO hardcoded hex: every color consumes a theme token already published by
 * header.php (resolveActiveTheme) — --bs-*, --w5obm-*, --theme-accent-*.
 */

/* Primary-action label/spinner swap. login-modern.css scopes this to #loginButton;
   these forms use their own button ids, so mirror the swap on any .action-button
   that carries .is-loading (set by JS on submit). */
.action-button .login-btn-spinner {
    align-items: center;
}

.action-button.is-loading .login-btn-label {
    display: none;
}

.action-button.is-loading .login-btn-spinner {
    display: inline-flex !important;
    align-items: center;
}

/* The login standard styles the single password toggle by id (#password-toggle).
   These forms have several password fields, so the toggle button is targeted by
   class instead. Mirror the login toggle's look + visible focus ring on light
   AND dark surfaces (.35 alpha so it reads on either). */
.auth-pw-toggle {
    background: var(--light-gray, var(--bs-tertiary-bg, #f8f9fa));
    border: 2px solid var(--bs-border-color, #e9ecef);
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;
    cursor: pointer;
    height: calc(2.875rem + 2px);
    padding: 0.875rem 1rem;
    font-size: 1.125rem;
    color: var(--bs-body-color, #1a1a1a);
}

.auth-pw-toggle:focus,
.auth-pw-toggle:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), .35);
    outline: none;
    z-index: 3;
}

/* Requirement / guidance panel inside the card. Uses the tertiary surface token
   so it reads as a calm, secondary block on both light and dark cards. */
.auth-requirements {
    background: var(--bs-tertiary-bg, var(--login-surface-alt, #f8f9fa));
    color: var(--bs-body-color, #1a1a1a);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.auth-requirements .auth-requirements-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.auth-requirements ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.auth-requirements li {
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.auth-requirements li:last-child {
    margin-bottom: 0;
}

.auth-requirements li i {
    color: var(--theme-accent-primary, var(--bs-primary));
    width: 1.25rem;
}

/* Live password-match / strength helper line under a field. */
.auth-field-feedback {
    min-height: 1.25rem;
    line-height: 1.3;
}

/* Centered success / invalid-token states reuse the card body but want a little
   breathing room around their icon + single action. */
.auth-state-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1rem;
}

.auth-state-icon.is-success {
    color: var(--bs-success, #198754);
}

.auth-state-icon.is-warning {
    color: var(--bs-warning, #b45309);
}

.auth-state-icon.is-danger {
    color: var(--bs-danger, #dc3545);
}

/* Account-context callout on reset_password (whose account is being reset). */
.auth-account-callout {
    background: var(--bs-tertiary-bg, var(--login-surface-alt, #f8f9fa));
    color: var(--bs-body-color, #1a1a1a);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 5px solid var(--theme-accent-primary, var(--bs-primary));
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
}

.auth-account-callout strong {
    color: inherit;
}

/* Secondary link row beneath the primary action. login-modern.css already styles
   .login-links a; this just gives stacked links sensible spacing. */
.auth-secondary-links {
    text-align: center;
    margin-top: 1.25rem;
}

.auth-secondary-links a {
    display: inline-block;
    margin: 0.15rem 0.75rem;
}