/* ============================================================================
   auth.css — gemeinsames Stylesheet der Auth-Seiten (Phase 4, Inline-Styles)

   Strikt werterhaltender Umzug der frueheren Inline-<style>-Bloecke aus
   set_password.html, password_reset_confirm.html, password_reset_request.html,
   clear_registration.html, registration/login.html, register.html
   (Muster ADR-0015: shared Stylesheet + minimale Seiten-Overrides;
   Tokenisierung nur wert-exakt + rollenkonform, ADR-0012).

   Seiten-Scoping ueber die body-Klasse (base.html: {% block body_class %}):
     auth-set-password | auth-reset-confirm | auth-reset-request |
     auth-clear-registration | auth-login | auth-register
   Login/Register scopen zusaetzlich ueber ihre eindeutigen Wrapper
   (.login-container / .register-container).
   Gemeinsame Regeln der drei "Reset-Karten"-Seiten haengen am Wrapper
   .reset-container. Abweichungen einzelner Seiten (h1-Abstand, Button-
   margin-top, nur-REQ-Regeln) sind bewusst per body-Klasse gescoped —
   NICHT vereinheitlichen, das waere eine sichtbare Aenderung.

   Off-Brand-Werte bleiben bewusst literal (Angleichung = eigener Schritt):
   #dc3545/#c82333
   (Bootstrap-Rot), #d32f2f, #ffc107, #555, #ccc, #222, #f4f7f6.
   ============================================================================ */

/* --- 1. Seiten-Hintergrund der vier Karten-Seiten -------------------------- */
/* Login/Register erben weiterhin den base.html-Hintergrund (#f2f2f2).        */

body.auth-set-password,
body.auth-reset-confirm,
body.auth-reset-request,
body.auth-clear-registration {
    background-color: #f4f7f6;
}

/* --- 2. Reset-Karte: gemeinsame Basis (set_password/confirm/request) ------- */

.reset-container {
    max-width: 450px;
    margin: 70px auto;
    padding: 40px;
    background-color: var(--ds-bg-surface);
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    text-align: center;
}
.reset-container h1 {
    margin-bottom: 20px;
    color: var(--ds-text);
    font-size: 1.8em;
    font-weight: 600;
}
.reset-container .form-group label {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}
.reset-container .form-group input[type="password"],
.reset-container .form-group input[type="text"] {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 6px;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-size: 1em;
    color: var(--ds-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* E-Mail-Feld: nur auf der Request-Seite vorhanden (groesserer Abstand) */
.reset-container .form-group input[type="email"] {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 6px;
    margin-bottom: 25px;
    box-sizing: border-box;
    font-size: 1em;
    color: var(--ds-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.reset-container .form-group input[type="password"]:focus,
.reset-container .form-group input[type="text"]:focus,
.reset-container .form-group input[type="email"]:focus {
    border-color: var(--ds-color-accent);
    box-shadow: 0 0 0 3px rgba(var(--ds-color-accent-rgb), 0.2);
    outline: none;
}
.reset-container .form-group .errorlist {
    list-style-type: none;
    padding: 0;
    margin: -10px 0 10px 0;
    font-size: 0.9em;
    color: #dc3545;
    text-align: left;
}
.reset-container .btn-primary {
    background-color: var(--ds-color-accent);
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    width: 100%;
    transition: background-color 0.3s ease;
}
.reset-container .btn-primary:hover {
    background-color: var(--ds-color-accent-hover);
}
.reset-container .checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: flex-start;
    text-align: left;
}
.reset-container .checkbox-group input {
    margin-right: 8px;
}

/* --- 3. Seiten-Deltas der Reset-Karte (bewusste Abweichungen) --------------- */

body.auth-reset-confirm .reset-container h1 {
    margin-bottom: 25px;
}
body.auth-set-password .reset-container .btn-primary,
body.auth-reset-confirm .reset-container .btn-primary {
    margin-top: 10px;
}
body.auth-set-password .welcome-text {
    margin-bottom: 25px;
    color: #555;
    font-size: 1.1em;
    text-align: center;
}
/* Nur Request: gescoped, damit die Fehler-<p> von set_password/confirm
   (form.non_field_errors) NICHT mitgestylt werden. */
body.auth-reset-request .reset-container p {
    color: var(--ds-text-secondary);
    margin-bottom: 30px;
    font-size: 0.95em;
    line-height: 1.6;
}
body.auth-reset-request .login-link {
    display: block;
    margin-top: 25px;
    font-size: 0.9em;
    color: var(--ds-color-accent);
    text-decoration: none;
}
body.auth-reset-request .login-link:hover {
    text-decoration: underline;
}
body.auth-reset-request .error-message {
    background-color: var(--ds-error-bg);
    border-left: 3px solid var(--ds-error-icon);
    color: var(--ds-error-text);
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: left;
    font-size: 0.9em;
}
body.auth-reset-request .field-error {
    color: #d32f2f;
    text-align: left;
    font-size: 0.85em;
    margin-top: -20px;
    margin-bottom: 15px;
    display: block;
}

/* --- 4. clear_registration (Admin-Werkzeug; .container ist generisch,
       deshalb alles unter der body-Klasse) ---------------------------------- */

body.auth-clear-registration .container {
    max-width: 600px;
    margin: 70px auto;
    padding: 40px;
    background-color: var(--ds-bg-surface);
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
body.auth-clear-registration .container h1 {
    margin-bottom: 25px;
    color: var(--ds-text);
    font-size: 1.8em;
    font-weight: 600;
    text-align: center;
}
body.auth-clear-registration .form-group {
    margin-bottom: 20px;
}
body.auth-clear-registration .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}
body.auth-clear-registration .form-group input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box;
}
body.auth-clear-registration .btn-danger {
    background-color: #dc3545;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    display: inline-block;
}
body.auth-clear-registration .btn-danger:hover {
    background-color: #c82333;
}
body.auth-clear-registration .warning {
    background-color: var(--ds-warning-bg);
    color: var(--ds-warning-text);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 4px solid #ffc107;
}

/* --- 5. Login (registration/login.html; Djangos LoginView) ------------------ */
/* .form-group hat hier BEWUSST andere Werte als auf den Reset-Seiten
   (1rem-Raster, Inputs untypisiert mit 0.5rem-Padding) — nicht mergen. */

.login-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--ds-bg-surface);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* ehemaliges style=-Attribut am <h2> */
.login-container h2 {
    margin-bottom: 1.5rem;
    text-align: center;
}
.login-container .form-group {
    margin-bottom: 1rem;
}
.login-container .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.login-container .form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--ds-border-strong);
    border-radius: 4px;
}
.login-container .submit-btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--ds-color-accent);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}
.login-container .submit-btn:hover {
    background: var(--ds-color-accent-hover);
}
/* Fehlerbox-Variante des Logins (kompakter als die Request-Variante) */
.login-container .error-message {
    color: var(--ds-error-text);
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--ds-error-bg);
    border-radius: 4px;
}
.login-container .show-password-container {
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}
.login-container .show-password-container input[type="checkbox"] {
    margin-right: 0.5rem;
}
.login-container .show-password-container label {
    font-size: 0.85rem;
    color: var(--ds-text-secondary);
    cursor: pointer;
}

/* --- 6. Registrierung (register.html) --------------------------------------- */

.register-container {
    max-width: 400px;
    margin: 80px auto;
    background-color: var(--ds-bg-surface);
    padding: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
}
.register-container h1 {
    font-family: var(--ds-font-heading);
    font-size: 2.8em;
    margin-bottom: 30px;
    text-align: center;
    color: #222;
}
.register-container form p {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #555;
}
.register-container form input[type="text"],
.register-container form input[type="email"] {
    width: 100%;
    padding: 12px;
    margin: 8px 0 20px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}
.register-container form input[type="text"]:focus,
.register-container form input[type="email"]:focus {
    border-color: var(--ds-color-accent);
    outline: none;
}
.register-container form button {
    width: 100%;
    padding: 12px;
    background-color: var(--ds-color-accent);
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.register-container form button:hover {
    background-color: var(--ds-color-accent-hover);
}
.register-container .text-danger {
    color: #dc3545;
    font-size: 0.9em;
    margin-top: -15px;
    margin-bottom: 15px;
    display: block;
}
.register-container .form-label {
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
    color: var(--ds-text);
}
.register-container .mb-3 {
    margin-bottom: 20px;
}
.register-container .info-text {
    font-size: 0.9em;
    color: var(--ds-text-secondary);
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}
/* Login-Link-Stil aehnlich wie auf der Passwort-Reset-Seite
   (hier bewusst MIT text-align: center — nicht mit der Request-Variante mergen) */
.register-container .login-link {
    display: block;
    margin-top: 25px;
    font-size: 0.9em;
    color: var(--ds-color-accent);
    text-decoration: none;
    text-align: center;
}
.register-container .login-link:hover {
    text-decoration: underline;
}