html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa; /* A very light gray, subtle background */
    margin: 0;
    box-sizing: border-box;
}

/* The login-container is now primarily styled by Bootstrap (card, shadow, p-4) */
/* We keep custom styles for specific refinements not fully covered by Bootstrap or overrides */
.login-container {
    border-radius: 12px; /* Ensure consistent border-radius */
    max-width: 400px; /* Control max width explicitly if needed, but Bootstrap columns usually handle this */
    width: 100%; /* Ensure it takes full width up to max-width */
    text-align: center; /* Keep container text aligned center for heading, logo etc. */
}

/* Override text-align for specific form elements to left */
.login-container .mb-3,
.login-container .form-label {
    text-align: left;
}


.login-logo img {
    max-width: 150px;
    height: auto;
}

h2 {
    color: #343a40; /* Darker text for heading */
    font-size: 24px; /* Slightly larger heading */
    font-weight: bold;
}

/* Custom styles for labels and inputs are largely replaced by Bootstrap's form-label and form-control */
/* Keeping these for potential fine-tuning if Bootstrap defaults aren't perfect */
label.form-label {
    font-weight: 600; /* Slightly bolder labels */
    color: #495057; /* Darker label text */
    font-size: 15px;
}

.form-control {
    height: calc(2.25rem + 2px); /* Standard height for form controls */
    font-size: 1rem; /* Standard font size */
    border-radius: .25rem; /* Standard border radius */
}

.form-control:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

/* Responsive adjustments - simplified as Bootstrap handles much of this */
@media (max-width: 480px) {
    .login-container {
        padding: 25px; /* Slightly less padding on small screens */
        margin: 0 15px; /* Add horizontal margin to prevent touching edges */
    }
    h2 {
        font-size: 22px;
    }
    .login-logo img {
        max-width: 150px;
    }
}