/* --- File: ./app/static/css/pages/login.css --- */
/* Spezifische Stile nur für die Login-Seite (login.html) */

/* Spezieller Container für Login-Seite, um Formular zu zentrieren */
main.main-content.login-page {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Erlaubt Flash-Nachrichten über dem Container */
    justify-content: center;
    align-items: center;
    padding: 1.25rem;
    box-sizing: border-box;
}

/* Der .login-wrapper wird entfernt. Der .form-container übernimmt das Styling. */
/* Der .login-container wird durch .form-container ersetzt. */

/* Titel auf Login-Seite - jetzt linksbündig über .text-left im HTML */
.form-container h1.text-left {
    text-align: left;
    margin-bottom: 1.5625rem;
    padding-bottom: 0.9375rem;
    font-size: 1.8rem;
}

/* Formulargruppen auf Login-Seite */
.form-container .form-group {
    margin-bottom: 1.25rem;
}

/* Labels auf Login-Seite */
.form-container label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-color-light);
    font-weight: bold;
    font-size: 1rem;
}

/* Input-Felder auf Login-Seite */
.form-container input[type="text"],
.form-container input[type="password"] {
    padding: 0.75rem 0.9375rem;
    /* Andere Styles (Farben etc.) kommen von forms.css */
}

/* Checkbox-Gruppe ('Angemeldet bleiben') */
.form-container .checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 1.5625rem;
}

.form-container .checkbox-group input[type="checkbox"] {
    margin-right: 0.625rem;
    width: 16px;
    height: 16px;
    /* Akzentfarbe kommt aus forms.css */
}

.form-container .checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
    font-size: 1rem;
    color: var(--text-color);
}

/* Submit-Button auf Login-Seite */
.form-container button[type="submit"].btn,
.form-container input[type="submit"].btn {
    width: 100%; /* Volle Breite bleibt spezifisch */
}

/* Fehlermeldungen auf Login-Seite */
.form-container .error-message {
    color: var(--flash-error-text);
    font-size: 0.9rem;
    margin-top: 0.3125rem;
}

.form-container ul.errors li {
    color: var(--flash-error-text);
    font-size: 0.9rem;
    list-style: none;
    margin-top: 0.3125rem;
}

/* Spezielle Positionierung für Flash-Nachrichten auf Login-Seite */
.flash-messages-container.login-flash {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 1.25rem auto;
    padding: 0;
    position: static; /* Zurücksetzen, da der main-Container jetzt flex-column ist */
    transform: none;
    order: -1; /* Flash-Nachrichten vor dem Formular anzeigen */
}