/**
 * SalonMate — Auth Pages (Login / Passwort vergessen / Passwort zurücksetzen)
 * Scope: templates/auth/*.html.twig
 *
 * Nutzt ausschließlich Foundation-Tokens aus app.css (--primary, --bg-*, --space-*, ...).
 * Keine neuen Hex-Werte, keine Duplikate von globalen .card/.form-control/.alert-Regeln —
 * nur seiten-spezifische Ergänzungen (Layout, 44px-Touch-Targets, Flash-Icon-Optik).
 */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
}

.auth-page__wrap {
    width: 100%;
    max-width: 400px;
}

/* ─── Brand Header ─── */
.auth-brand {
    text-align: center;
    margin-bottom: var(--space-6);
}

.auth-brand__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--primary);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.auth-brand__name {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-1);
}

.auth-brand__tagline {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ─── Card ─── */
.auth-card .card-body {
    padding: var(--space-6);
}

/* ─── Flash-Stil Fehlermeldungen (Icon + Text, wie flash-messages.html Kit) ─── */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.auth-alert__icon {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: var(--text-sm);
}

.auth-alert ul {
    margin: 0;
    padding-left: var(--space-4);
}

.alert-danger .auth-alert__icon  { color: var(--danger); }
.alert-warning .auth-alert__icon { color: var(--warning); }
.alert-info .auth-alert__icon    { color: var(--info); }

/* ─── Form ─── */
.auth-field {
    margin-bottom: var(--space-4);
}

.auth-field:last-of-type {
    margin-bottom: var(--space-6);
}

.auth-hint {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* Touch-Targets Pflicht: mind. 44px für alle interaktiven Elemente */
.auth-page .form-control,
.auth-page .input-group-text,
.auth-page .btn {
    min-height: 44px;
}

.auth-submit {
    width: 100%;
    min-height: 44px;
    font-size: var(--text-base);
}

.auth-links {
    text-align: center;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
}

.auth-links a {
    color: var(--primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.auth-links a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.auth-footer {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

@media (max-width: 400px) {
    .auth-page {
        padding: var(--space-6) var(--space-3);
    }
}