/**
 * Schattenwelt – Login (Redesign, dunkles Gold-Theme).
 * Nur auf der Login-Seite geladen (siehe auth/login.blade.php @push('styles')).
 * Farb-Tokens (--sw-gold, --sw-panel-dark, ...) und Buttons (.btn-gilded) kommen
 * aus layout.css (site-weit geladen).
 */

/* Bricht wie die Startseite aus dem geboxten .site-main aus - Karte schwebt frei
   auf dem dunklen Seitenhintergrund statt in einem grauen Panel zu stecken. */
main.site-main.site-main--auth {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 4rem 1.5rem;
    background: var(--sw-bg-deep);
    box-shadow: none;
    border-radius: 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card,
.auth-card * ,
.auth-card *::before,
.auth-card *::after {
    box-sizing: border-box;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--sw-panel-dark);
    border: 1px solid var(--sw-border-gold);
    border-radius: var(--sw-radius);
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.auth-card__title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.4rem;
    text-align: center;
    color: var(--sw-gold-bright);
    margin: 0 0 1.75rem;
}

.auth-card__status {
    margin: 0 0 1.25rem;
    text-align: center;
    color: #7fd88f;
    font-size: 0.9rem;
}

.auth-card__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.auth-field label {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sw-text-muted);
}

.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--sw-border-gold);
    border-radius: var(--sw-radius-sm);
    color: var(--sw-gold-bright);
    font-size: 0.95rem;
}

/* Native <option>-Popups respektieren rgba-Hintergruende oft nicht zuverlaessig (werden vom
   Betriebssystem/Browser-Chrome gerendert, nicht von der Seite selbst) - hier bewusst eine
   solide Farbe statt der halbtransparenten Select-Hintergrundfarbe. */
.auth-field select option {
    background: #14120e;
    color: var(--sw-gold-bright);
}

.auth-field input[type="text"]:focus,
.auth-field input[type="email"]:focus,
.auth-field input[type="password"]:focus,
.auth-field select:focus {
    outline: none;
    border-color: var(--sw-gold);
    box-shadow: 0 0 0 3px rgba(201, 166, 92, 0.15);
}

.auth-field__error {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #e07a7a;
}

.auth-field__checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--sw-text-muted);
    cursor: pointer;
}

.auth-field__checkbox input {
    accent-color: var(--sw-gold);
}