/* General Styles */
body {
    font-family: 'Poppins', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
}

/* Global Font Styling */
* {
    font-family: 'Poppins', Arial, sans-serif; /* Use Poppins globally with fallback fonts */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Include padding and border in element dimensions */
}

/* Header Styling */
header {
    position: relative; /* Enable positioning for child elements */
    background-color: #D2B48C; /* Tan */
    color: #fff;
    padding: 15px 20px;
    text-align: left; /* Align header content to the left */
    font-size: 1.5em; /* Smaller font size for the header */
    font-weight: 600; /* Slightly lighter font weight */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin: 0; /* Remove extra margin around the title */
    font-size: 1.2em; /* Further reduce font size for the title */
}

.return-button {
    background-color: #fff; /* White background */
    color: #333; /* Dark text for contrast */
    padding: 5px 10px; /* Reduced padding for proportional button size */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    font-size: 0.65em; /* Smaller font size */
    text-decoration: none; /* Remove underline */
    cursor: pointer; /* Pointer cursor */
    font-family: 'Poppins', Arial, sans-serif; /* Use Poppins font */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
    position: absolute; /* Keep it positioned within the header */
    top: 50%; /* Center vertically */
    right: 20px; /* Position it to the right */
    transform: translateY(-50%); /* Adjust for proper centering */
}

.return-button:hover {
    background-color: #D2B48C; /* Tan background on hover */
    color: #fff; /* White text on hover */
}

/* Control Panel Styling */
.control-panel {
    background-color: #fff; /* White background for the box */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Spacing inside the box */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    max-width: 1200px; /* Match the max-width of the container */
    width: 100%; /* Ensure it stretches to full width within its container */
    margin: 20px auto; /* Center the box with spacing above and below */
}

/* Section Spacing Inside Control Panel */
.control-panel > div {
    margin-bottom: 20px; /* Add spacing between sections */
}

/* Remove Extra Spacing for the Last Section */
.control-panel > div:last-child {
    margin-bottom: 0;
}

/* Filter Section Styling */
.filter-section {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align items to the left */
    gap: 10px; /* Add space between elements */
    background-color: transparent; /* Remove background */
    border: none; /* Remove borders */
    padding: 0; /* Remove additional padding */
}

label[for="state-filter"] {
    margin-bottom: 5px; /* Space below label */
}

#state-filter,
#district-filter {
    margin-bottom: 10px; /* Add spacing between dropdowns */
    width: 100%; /* Ensure dropdown stretches to full width */
}

/* Column Selection Styling */
.column-section {
    display: flex;
    flex-direction: column; /* Stack column selection vertically */
    align-items: flex-start; /* Align items to the left */
    gap: 10px; /* Add space between elements */
}

/* Add Consistent Spacing Between Buttons */
.control-panel button {
    margin-top: 10px; /* Add spacing between buttons when stacked */
}

/* Container for Data Section */
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: auto;
    max-height: 600px; /* Limit container height for scrolling */
}

/* Data Section */
.data-section {
    font-size: 0.9em;
    font-family: 'Poppins', Arial, sans-serif;
    line-height: 1.5;
    color: #333;
}

/* Buttons */
button {
    background-color: #800000; /* Maroon */
    color: #fff; /* White text */
    border: none;
    padding: 8px 15px; /* Reduced padding for narrower buttons */
    font-size: 0.9em; /* Slightly smaller font size */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    font-family: 'Poppins', Arial, sans-serif;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #660000; /* Darker Maroon */
}

/* Style for dynamically generated table */
#data-display table {
    font-family: 'Poppins', Arial, sans-serif; /* Ensure Poppins for the table */
    font-size: 0.9em; /* Adjust font size if needed */
    width: 100%; /* Ensure the table takes full width of the container */
    border-collapse: collapse; /* Remove spacing between table cells */
    color: #333; /* Dark text for readability */
}

/* Style for table headers */
#data-display th {
    font-family: 'Poppins', Arial, sans-serif; /* Ensure Poppins for headers */
    font-weight: bold; /* Bold headers */
    background-color: #D2B48C; /* Tan background for headers */
    color: #fff; /* White text */
    padding: 10px; /* Padding inside header cells */
    text-align: left; /* Left align text */
    border: 1px solid #ddd; /* Subtle border */
}

/* Style for table data cells */
#data-display td {
    font-family: 'Poppins', Arial, sans-serif; /* Ensure Poppins for cells */
    padding: 10px; /* Padding inside cells */
    text-align: left; /* Left align text */
    border: 1px solid #ddd; /* Subtle border for separation */
}

/* Styling for Data Display Section Headline */
.container h2 {
    font-size: 1.2em; /* Smaller font size for the headline */
    font-weight: normal; /* Remove bold styling */
    color: #333; /* Dark grey text for readability */
    margin-bottom: 20px; /* Add spacing below the headline */
    text-align: left; /* Align the headline to the left */
    font-family: 'Poppins', Arial, sans-serif; /* Use Poppins for consistency */
}

#column-filter {
    width: 100%; /* Make the dropdown take the full width of its container */
    max-width: 100%; /* Ensure it doesn't exceed the container's width */
    padding-left: 10px; /* Add space to the left of the text */
    background-color: #f9f9f9; /* Light grey background */
    border: 1px solid #ccc; /* Subtle border */
    box-sizing: border-box; /* Include padding in width calculation */
    appearance: none; /* Remove default dropdown styling */
    background-clip: padding-box; /* Ensure the background color applies correctly */
}