/* Auth-pages (Login/Register/Forgot/Reset/Confirm/Resend). Alle selectors vallen onder
   .auth-page: niets mag lekken naar andere pagina's. Kleuren, schaduwen en radii
   uitsluitend via --cn-*-tokens uit het v1-thema. */
.auth-page .auth-card {
    max-width: 30rem;
    margin-inline: auto;
    background: var(--cn-card-bg);
    border: 1px solid var(--cn-brown);
    border-radius: 10px;
    box-shadow: var(--cn-shadow-md);
}

/* Kaartkop: display-H1 goud + korte uitleg. Geen losse eyebrow of embleem;
   dezelfde typografische taal als de publieke surface. */
.auth-page .auth-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-page .auth-title {
    font-family: var(--cn-font-family-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--cn-gold);
    margin-bottom: 0.5rem;
}

.auth-page .auth-switch {
    color: rgba(238, 238, 238, 0.65);
}

.auth-page .auth-switch a {
    color: rgba(238, 238, 238, 0.7);
    text-decoration: none;
    transition: color 0.25s ease;
}

.auth-page .auth-switch a:hover {
    color: var(--cn-gold);
}

.auth-page .auth-help {
    color: rgba(238, 238, 238, 0.75);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Labels op auth-formulieren: goud, caps (landing §1). */
.auth-page .form-label {
    color: var(--cn-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Focus is altijd zichtbaar (toetsenbord + muis): gouden ring uit het thema. */
.auth-page .form-control:focus,
.auth-page .form-select:focus,
.auth-page .form-check-input:focus {
    border-color: var(--cn-gold);
    box-shadow: 0 0 0 0.2rem rgba(200, 165, 91, 0.25);
    outline: none;
}

/* Server- en client-validatiefouten: rode rand + lichtrood veld, geen kale tekst alleen. */
.auth-page .form-control.is-invalid,
.auth-page .form-control.input-validation-error,
.auth-page .form-select.is-invalid,
.auth-page .form-select.input-validation-error {
    border-color: var(--cn-danger);
    background-color: var(--cn-card-bg);
}

.auth-page .form-control.is-invalid:focus,
.auth-page .form-control.input-validation-error:focus {
    border-color: var(--cn-danger);
    box-shadow: 0 0 0 0.2rem var(--cn-glow-red);
}

.auth-page .field-validation-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--cn-danger-bright);
}

/* Serverfouten als vaste error-box (zelfde vorm als auth-note). */
.auth-page .validation-summary-errors {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cn-danger);
    border-left-width: 4px;
    border-radius: 0.5rem;
    background-color: var(--cn-card-bg);
    color: var(--cn-danger-bright);
    font-size: 0.875rem;
}

.auth-page .validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

/* Disabled/bezig-state: geen dubbele submits, zichtbaar aan de knop. */
.auth-page .btn:disabled,
.auth-page .btn.is-busy {
    opacity: 0.65;
    cursor: wait;
}

.auth-page .btn .is-busy-spinner {
    display: none;
}

.auth-page .btn.is-busy .is-busy-spinner {
    display: inline-block;
}

/* Wachtwoordveld met show/hide-toggle. */
.auth-page .auth-password-wrap {
    position: relative;
}

.auth-page .auth-password-wrap .form-control {
    padding-right: 3rem;
}

.auth-page .auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--cn-smoke);
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    line-height: 1;
}

.auth-page .auth-password-toggle:hover,
.auth-page .auth-password-toggle:focus-visible {
    color: var(--cn-gold);
    outline: 2px solid var(--cn-gold);
    outline-offset: 1px;
}

/* Caps-lock-hint: icoon + tekst, nooit alleen kleur. */
.auth-page .auth-caps-hint {
    display: none;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--cn-warning-bright);
}

.auth-page .auth-caps-hint.is-visible {
    display: inline-flex;
}

/* Lichte strength-meter: 4 segmenten, breedte via --cn-*-segmentkleur. */
.auth-page .auth-strength {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.auth-page .auth-strength-segment {
    height: 0.375rem;
    flex: 1;
    border-radius: 0.25rem;
    background-color: var(--cn-steel-gray);
}

.auth-page .auth-strength[data-strength="1"] .auth-strength-segment:nth-child(-n+1) {
    background-color: var(--cn-danger-bright);
}

.auth-page .auth-strength[data-strength="2"] .auth-strength-segment:nth-child(-n+2) {
    background-color: var(--cn-warning-bright);
}

.auth-page .auth-strength[data-strength="3"] .auth-strength-segment:nth-child(-n+3) {
    background-color: var(--cn-warning-bright);
}

.auth-page .auth-strength[data-strength="4"] .auth-strength-segment {
    background-color: var(--cn-success-bright);
}

.auth-page .auth-strength-label {
    font-size: 0.8125rem;
    color: var(--cn-smoke);
    margin-top: 0.25rem;
    min-height: 1.25rem;
}

/* Info-/waarschuwingsblok (mail uit, verlopen resetlink): één vorm,
   kleur van icoon en linkerrand bepaalt de toon. */
.auth-page .auth-note {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    background-color: var(--cn-card-bg);
    border: 1px solid var(--cn-brown);
    border-left: 4px solid var(--cn-info);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--cn-light);
}

.auth-page .auth-note a {
    color: var(--cn-gold);
}

.auth-page .auth-note-info > i {
    color: var(--cn-info-bright);
}

.auth-page .auth-note-warning {
    border-left-color: var(--cn-warning);
}

.auth-page .auth-note-warning > i {
    color: var(--cn-warning-bright);
}

/* Kleine linkrij onder het formulier (Forgot / Resend / Terms). */
.auth-page .auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    justify-content: center;
    font-size: 0.875rem;
}

.auth-page .auth-links a {
    color: rgba(238, 238, 238, 0.7);
    text-decoration: none;
    transition: color 0.25s ease;
}

.auth-page .auth-links a:hover {
    color: var(--cn-gold);
}

/* Terug-link onder de kaart (naar home). */
.auth-page .auth-back {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.9rem;
}

.auth-page .auth-back a {
    color: rgba(238, 238, 238, 0.7);
    text-decoration: none;
    transition: color 0.25s ease;
}

.auth-page .auth-back a:hover {
    color: var(--cn-gold);
}

@media (prefers-reduced-motion: reduce) {
    .auth-page .btn,
    .auth-page .form-control,
    .auth-page .auth-password-toggle {
        transition: none;
    }
}