/* ==========================================================================
   Zentrales Styling für den gesamten Anmeldevorgang (Login, 2FA & Passwort)
   ========================================================================== */

/* Vertikale und horizontale Zentrierung angepasst an Ihren dashboard-wrapper */
.dashboard-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh; 
    font-family: sans-serif;
}

/* Die zentrale Anmelde-Kachel */
.login-box {
    width: 100%;
    max-width: 450px;
    padding: 30px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    h2 {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 1.5rem;
        color: #333333;
        text-align: center;
    }

    /* Formular-Gruppen und Eingabefelder (Auf Ihre HTML-Klassen angepasst!) */
    .form-group, .form-group-large {
        margin-bottom: 20px;

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555555;
        }

        /* KORREKTUR: "form-input" statt "form-control" nutzt nun Ihre HTML-Struktur */
        .form-input {
            width: 100%;
            padding: 10px;
            font-size: 1rem;
            border: 1px solid #cccccc;
            border-radius: 4px;
            box-sizing: border-box;
            transition: border-color 0.2s ease;

            &:focus {
                border-color: #0066cc;
                outline: none;
            }
        }

        /* Zusätzlicher Hinweistext im Formular */
        .hint {
            display: block;
            margin-top: 6px;
            font-size: 0.8rem;
            color: #666666;
            line-height: 1.3;
        }
    }

    /* Speziell optimiert für das 6-stellige 2FA-Feld (ID-basiert für maximale Sicherheit) */
    #code {
        text-align: center;
        font-size: 24px;       
        letter-spacing: 6px;   
        font-family: monospace; 
    }

    /* Feedback-Meldungen */
    .error-message {
        padding: 12px;
        margin-bottom: 20px;
        background-color: #fdf2f2;
        border-left: 4px solid #de350b;
        border-top: 1px solid #ebccd1;
        border-right: 1px solid #ebccd1;
        border-bottom: 1px solid #ebccd1;
        color: #de350b;
        font-size: 0.9rem;
        border-radius: 0 4px 4px 0;
    }

    .success-message {
        padding: 12px;
        margin-bottom: 20px;
        background-color: #f3faf7;
        border-left: 4px solid #00875a;
        border-top: 1px solid #e3f2fd; 
        border-right: 1px solid #e3f2fd;
        border-bottom: 1px solid #e3f2fd;
        color: #00875a;
        font-size: 0.9rem;
        border-radius: 0 4px 4px 0;
    }

    .info-text {
        font-size: 0.95rem;
        color: #666666;
        margin-bottom: 20px;
        line-height: 1.4;
        text-align: center;
    }

    /* Styling für die Passwort-Bedingungen */
    .password-requirements {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-left: 4px solid #0066cc; 
        border-radius: 0 4px 4px 0;
        padding: 15px;
        margin-bottom: 25px;
        font-size: 0.9rem;
        color: #495057;

        h4 {
            margin-top: 0;
            margin-bottom: 8px;
            font-size: 0.95rem;
            color: #333333;
        }

        ul {
            margin: 0;
            padding-left: 20px;
            line-height: 1.5;

            li strong {
                color: #212529;
            }
        }
    }

    /* Absende-Buttons (Unterstützt jetzt btn-submit UND btn-login durch Ihre HTML-Nutzung) */
    .btn-submit, .btn-login {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
        font-weight: bold;
        color: #ffffff;
        background-color: #0066cc;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: #004c99;
        }
    }
}

/* Universeller Reset für sichere POST-Links */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;

    &:hover {
        color: #004c99;
    }
}

/* ==========================================================================
   Spezifisches Styling für die Arbeitszeit-Erfassung (Erster Login des Tages)
   ========================================================================== */

.login-box {
    /* Modifikator für eine kompaktere Zeiteingabe-Box */
    &.work-start-box {
        max-width: 400px;
        margin: 50px auto;
    }

    /* Das große, zentrierte Zeiteingabefeld */
    .time-input-container {
        margin-bottom: 25px;

        .form-input-time {
            font-size: 24px;
            padding: 10px;
            width: 150px;
            text-align: center;
            border: 2px solid #0066cc; /* Nutzt dein zentrales Blau */
            border-radius: 6px;
            color: #333333;
            font-family: monospace; /* Passt optisch hervorragend zum 2FA-Feld */
            font-weight: bold;
            box-sizing: border-box;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;

            &:focus {
                border-color: #004c99;
                box-shadow: 0 0 8px rgba(0, 102, 204, 0.2);
                outline: none;
            }
        }
    }
}