html,
body {
    height: 100%;
}

/* Center the form vertically and horizontally */
.login-container {
    min-height: 100vh; /* Use min-height */
    /* display: flex; */ /* Already set inline/in tag */
    /* align-items: center; */ /* Already set inline/in tag */
    /* padding-top: 40px; */ /* Handled by py-4 */
    /* padding-bottom: 40px; */ /* Handled by py-4 */
    /* background-color: #f5f5f5; */ /* Handled by bg-body-tertiary */
}

/* Card Styling */
.card {
    border: 1px solid rgba(0, 0, 0, 0.125); /* Subtle border */
    border-radius: 0.5rem; /* Slightly more rounded corners */
}

/* Form Spacing and Elements */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    /* Ensure label floats correctly - Adjust if Bootstrap defaults work */
}

.form-floating label {
    padding-left: 1.1rem; /* Align label with input text */
}

/* Ensure consistent button styling (using Bootstrap variables ideally) */
#loginButton {
    /* Keep btn-primary for standard theming, or override here: */
    /* background-color: #333; */
    /* border-color: #2a2a2a; */
    padding-top: 0.75rem; /* Make slightly larger */
    padding-bottom: 0.75rem;
}

    #loginButton:hover {
        /* background-color: #222; */
        /* border-color: #1a1a1a; */
    }

/* Improve alert spacing and font size */
.alert.small {
    font-size: 0.85em;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
}

/* Align forgot password link */
#forgotPasswordLinkContainer {
    font-size: 0.9em;
}

/* Optional: Subtle focus outline */
.form-control:focus {
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 0.25rem var(--bs-primary-focus-shadow); /* Use Bootstrap's focus shadow variable */
}