/* General styles for the page */
html, body {
    height: 100%; /* Full height for the page */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Stack header, content, and footer vertically */
}

body > div {
    flex-grow: 1; /* Ensure the main content grows to fill available space */
}

/* Sticky Footer */
footer {
    background-color: #333;
    color: white;
    padding: 10px;
    width: 100%;
    margin-top: auto; /* Push the footer to the bottom of the page */
}

/* MODAL INPUT FIELD STYLES */

/* Ensure modal input fields have consistent styling */
.modal input.form-control {
    background-color: #f8f9fa !important; /* Light background */
    color: black !important; /* Dark text */
    border: 1px solid #007bff !important; /* Blue border */
    box-shadow: none !important; /* Remove shadow */
}

/* Hover and Focus State for Input Fields inside Modals */
.modal input.form-control:hover,
.modal input.form-control:focus {
    background-color: #f8f9fa !important; /* Light background remains consistent */
    color: black !important; /* Dark text remains consistent */
    box-shadow: none !important; /* No additional shadow on focus or hover */
}

/* CHROME AUTOFILL FIX */

/* Chrome autofill behavior to maintain consistency */
input:-webkit-autofill {
    background-color: #f8f9fa !important; /* Light background for autofill */
    color: black !important; /* Ensure autofill text is dark */
    -webkit-text-fill-color: black !important; /* Force autofill text color */
    box-shadow: 0 0 0px 1000px #f8f9fa inset !important; /* Remove default autofill background highlight */
}

/* Custom styles for autofill on focus */
input:-webkit-autofill:focus {
    background-color: #f8f9fa !important; /* Keep light background on autofill focus */
    color: black !important; /* Keep dark text on autofill focus */
}