/**
 * Frontend Login (felogin) – Interstellar Ball Manager
 * Styling angelehnt an die Modal-Popups (.sbm-confirm-modal): Karten-Look mit Rand, Glow, gleicher Button-Stil.
 */

/* Wrapper: Login- und Logout-Formulare im Hauptinhalt */
.site-main form#tx-felogin-login,
.site-main form[action*="logintype=login"],
.site-main form[action*="logintype=logout"],
.site-main .ce-felogin-login form {
    max-width: 420px;
    margin: 0 auto;
}

/* Im 2-Spalten-Container: volle Breite nutzen */
.sbc-container--2col .site-main form,
.sbc-container--2col .ce-felogin-login form,
.sbc-container--2col form#tx-felogin-login,
.sbc-container--2col form[action*="logintype=login"] {
    max-width: 100%;
}

.sbc-container--2col .site-main form fieldset,
.sbc-container--2col form fieldset:has(#tx-felogin-input-username),
.sbc-container--2col form fieldset:has(#tx-felogin-input-logout) {
    max-width: 100%;
}

/* Überschrift & Hinweistext über dem Formular (falls noch vorhanden) */
.site-main .ce-felogin-login h3,
.site-main .ce-felogin-login > h3 {
    font-family: var(--sbm-font-family);
    font-size: var(--sbm-font-size-lg);
    font-weight: var(--sbm-font-weight-bold);
    color: var(--sbm-text-primary);
    margin: 0 0 var(--sbm-spacing-sm) 0;
    letter-spacing: 0.02em;
}

.site-main .ce-felogin-login > p,
.site-main .ce-felogin-login h3 + p {
    color: var(--sbm-text-secondary);
    font-size: var(--sbm-font-size-sm);
    margin: 0 0 var(--sbm-spacing-lg) 0;
    line-height: var(--sbm-line-height-relaxed);
}

/* Fieldset = Karten-Container mit Neon-Glow (Primary + Cyan-Akzent) */
.site-main .ce-felogin-login fieldset,
.site-main form fieldset:has(#tx-felogin-input-username),
.site-main form fieldset:has(#tx-felogin-input-logout) {
    position: relative;
    padding: var(--sbm-spacing-lg) var(--sbm-spacing-xl);
    font-family: var(--sbm-font-family);
    font-size: var(--sbm-font-size-base);
    line-height: var(--sbm-line-height-normal);
    color: var(--sbm-text-primary);
    background: linear-gradient(160deg, var(--sbm-bg-card) 0%, var(--sbm-color-bg) 100%);
    border: 2px solid var(--sbm-color-primary-light);
    border-radius: var(--sbm-radius-sm);
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.4),
        0 0 20px rgba(99, 102, 241, 0.35),
        0 0 40px rgba(99, 102, 241, 0.25),
        0 0 60px rgba(6, 182, 212, 0.15),
        0 20px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    margin: 0 0 var(--sbm-spacing-md) 0;
}

/* Logout-Formular: Neon-Glow in Amber/Orange */
.site-main form fieldset:has(#tx-felogin-input-logout) {
    border-color: var(--sbm-color-warning-light);
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.4),
        0 0 20px rgba(245, 158, 11, 0.35),
        0 0 40px rgba(245, 158, 11, 0.2),
        0 0 60px rgba(239, 68, 68, 0.1),
        0 20px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Legend = Kopfzeile mit Neon-Text-Glow */
.site-main .ce-felogin-login fieldset legend,
.site-main form fieldset:has(#tx-felogin-input-username) legend,
.site-main form fieldset:has(#tx-felogin-input-logout) legend {
    font-size: var(--sbm-font-size-sm);
    font-weight: var(--sbm-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sbm-color-primary-light);
    text-shadow:
        0 0 8px rgba(99, 102, 241, 0.8),
        0 0 16px rgba(99, 102, 241, 0.5),
        0 0 24px rgba(129, 140, 248, 0.3);
    padding: 0 var(--sbm-spacing-sm);
    margin-left: -0.25rem;
    float: left;
}

.site-main form fieldset:has(#tx-felogin-input-logout) legend {
    color: var(--sbm-color-warning-light);
    text-shadow:
        0 0 8px rgba(245, 158, 11, 0.8),
        0 0 16px rgba(245, 158, 11, 0.5),
        0 0 24px rgba(251, 191, 36, 0.3);
}

/* Form-Gruppen */
.site-main .ce-felogin-login fieldset > div,
.site-main form fieldset:has(#tx-felogin-input-username) > div,
.site-main form fieldset:has(#tx-felogin-input-logout) > div {
    clear: both;
    margin-bottom: var(--sbm-spacing-md);
}

.site-main .ce-felogin-login fieldset > div:last-of-type,
.site-main form fieldset:has(#tx-felogin-input-username) > div:last-of-type,
.site-main form fieldset:has(#tx-felogin-input-logout) > div:last-of-type {
    margin-bottom: 0;
}

/* Labels */
.site-main .ce-felogin-login fieldset label,
.site-main form fieldset:has(#tx-felogin-input-username) label,
.site-main form fieldset:has(#tx-felogin-input-logout) label {
    display: block;
    font-size: var(--sbm-font-size-sm);
    font-weight: var(--sbm-font-weight-semibold);
    color: var(--sbm-text-secondary);
    margin-bottom: var(--sbm-spacing-sm);
}

/* Text- & Passwortfelder */
.site-main .ce-felogin-login input[type="text"],
.site-main .ce-felogin-login input[type="password"],
.site-main form fieldset:has(#tx-felogin-input-username) input[type="text"],
.site-main form fieldset:has(#tx-felogin-input-username) input[type="password"] {
    width: 100%;
    max-width: 100%;
    padding: var(--sbm-spacing-sm) var(--sbm-spacing-md);
    font-size: var(--sbm-font-size-base);
    font-family: var(--sbm-font-family);
    color: var(--sbm-text-primary);
    background: var(--sbm-color-bg);
    border: 1px solid var(--sbm-border);
    border-radius: var(--sbm-radius-sm);
    transition: border-color var(--sbm-transition-fast), box-shadow var(--sbm-transition-fast);
    box-sizing: border-box;
}

.site-main .ce-felogin-login input[type="text"]:focus,
.site-main .ce-felogin-login input[type="password"]:focus,
.site-main form fieldset:has(#tx-felogin-input-username) input[type="text"]:focus,
.site-main form fieldset:has(#tx-felogin-input-username) input[type="password"]:focus {
    outline: none;
    border-color: var(--sbm-color-primary-light);
    box-shadow:
        0 0 0 2px rgba(99, 102, 241, 0.4),
        0 0 12px rgba(99, 102, 241, 0.5),
        0 0 24px rgba(99, 102, 241, 0.25);
}

.site-main .ce-felogin-login input[type="text"]::placeholder,
.site-main .ce-felogin-login input[type="password"]::placeholder {
    color: var(--sbm-text-muted);
}

/* Anzeige Username (Logout) – nur Text */
.site-main form fieldset:has(#tx-felogin-input-logout) div:first-of-type {
    color: var(--sbm-text-primary);
    font-size: var(--sbm-font-size-base);
}

/* Checkbox (Angemeldet bleiben) */
.site-main .ce-felogin-login input[type="checkbox"],
.site-main form fieldset:has(#tx-felogin-input-username) input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: var(--sbm-spacing-sm);
    accent-color: var(--sbm-color-primary);
    vertical-align: middle;
}

/* Submit-Button = Neon-Glow (Login: Indigo/Violet) */
.site-main .ce-felogin-login input[type="submit"],
.site-main form fieldset:has(#tx-felogin-input-username) input[type="submit"] {
    font-family: var(--sbm-font-family);
    font-size: var(--sbm-font-size-sm);
    font-weight: var(--sbm-font-weight-semibold);
    padding: var(--sbm-spacing-sm) var(--sbm-spacing-lg);
    color: var(--sbm-color-text-on-dark);
    background: linear-gradient(135deg, var(--sbm-color-primary) 0%, var(--sbm-color-primary-dark) 100%);
    border: 1px solid var(--sbm-color-primary-light);
    border-radius: var(--sbm-radius-sm);
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: box-shadow var(--sbm-transition-fast), transform var(--sbm-transition-fast);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 16px rgba(99, 102, 241, 0.5),
        0 0 32px rgba(99, 102, 241, 0.35),
        0 0 48px rgba(6, 182, 212, 0.2);
}

.site-main .ce-felogin-login input[type="submit"]:hover,
.site-main form fieldset:has(#tx-felogin-input-username) input[type="submit"]:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 24px rgba(99, 102, 241, 0.65),
        0 0 48px rgba(99, 102, 241, 0.45),
        0 0 64px rgba(6, 182, 212, 0.25);
    transform: translateY(-1px);
}

.site-main .ce-felogin-login input[type="submit"]:focus-visible,
.site-main form fieldset:has(#tx-felogin-input-username) input[type="submit"]:focus-visible {
    outline: 2px solid var(--sbm-color-primary-light);
    outline-offset: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(99, 102, 241, 0.6),
        0 0 40px rgba(99, 102, 241, 0.4);
}

/* Logout-Button = Neon-Glow (Amber/Orange + leichter Rot-Saum) */
.site-main form fieldset:has(#tx-felogin-input-logout) input[type="submit"] {
    background: linear-gradient(135deg, var(--sbm-color-warning) 0%, #d97706 100%);
    border-color: var(--sbm-color-warning-light);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 16px rgba(245, 158, 11, 0.5),
        0 0 32px rgba(245, 158, 11, 0.35),
        0 0 48px rgba(239, 68, 68, 0.15);
}

.site-main form fieldset:has(#tx-felogin-input-logout) input[type="submit"]:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 24px rgba(245, 158, 11, 0.65),
        0 0 48px rgba(245, 158, 11, 0.45),
        0 0 64px rgba(239, 68, 68, 0.2);
}

.site-main form fieldset:has(#tx-felogin-input-logout) input[type="submit"]:focus-visible {
    outline-color: var(--sbm-color-warning-light);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(245, 158, 11, 0.6),
        0 0 40px rgba(245, 158, 11, 0.4);
}

/* Versteckte Felder */
.site-main .ce-felogin-login .felogin-hidden,
.site-main form .felogin-hidden {
    display: none !important;
}

/* Link "Passwort vergessen" mit Neon-Glow beim Hover */
.site-main .ce-felogin-login a,
.site-main form[action*="logintype=login"] + a {
    display: inline-block;
    margin-top: var(--sbm-spacing-md);
    font-size: var(--sbm-font-size-sm);
    color: var(--sbm-color-primary-light);
    text-decoration: none;
    text-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
    transition: color var(--sbm-transition-fast), text-shadow var(--sbm-transition-fast);
}

.site-main .ce-felogin-login a:hover,
.site-main form[action*="logintype=login"] + a:hover {
    color: #a5b4fc;
    text-shadow:
        0 0 12px rgba(129, 140, 248, 0.8),
        0 0 24px rgba(99, 102, 241, 0.5);
}

/* Flash-Messages (Fehler/Erfolg) */
.site-main .ce-felogin-login .typo3-messages,
.site-main .ce-felogin-login .alert {
    margin-bottom: var(--sbm-spacing-md);
    padding: var(--sbm-spacing-md) var(--sbm-spacing-lg);
    border-radius: var(--sbm-radius-sm);
    font-size: var(--sbm-font-size-sm);
}

.site-main .ce-felogin-login .typo3-messages .alert-danger,
.site-main .ce-felogin-login .alert-danger {
    background: var(--sbm-color-error-bg);
    border: 1px solid var(--sbm-color-error-border);
    color: var(--sbm-color-error-light);
}

.site-main .ce-felogin-login .typo3-messages .alert-success,
.site-main .ce-felogin-login .alert-success {
    background: var(--sbm-color-success-bg);
    border: 1px solid var(--sbm-color-success-border);
    color: var(--sbm-color-success-light);
}

/* Fallback: Form ohne .ce-felogin-login */
.site-main form fieldset:has(#tx-felogin-input-username),
.site-main form fieldset:has(#tx-felogin-input-logout) {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}