html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevents scrollbars on the page itself */
}

/* Full-screen map container */
#map {
    height: 100vh;
    width: 100vw; /* Corrected from 1000vw, assuming full viewport width */
}

/* Tooltip customization */
.leaflet-tooltip {
    background: #2C3E50 !important;
    color: #FFFFFF !important; /* Using hex for consistency */
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    /* Default z-index for tooltips. Leaflet's tooltipPane is typically z-index: 650. */
    /* This rule will apply to hover tooltips if they don't have .district-label-permanent. */
    z-index: 650; /* Base z-index, aligning with Leaflet's tooltipPane */
}

/* Permanent district label styling */
.district-label-permanent {
    font-weight: lighter;
    font-size: 12px;
    font-family: 'Arial', sans-serif; /* Use a common font for better compatibility */
    color: #fff !important;
    text-shadow: none; /* Removes any text shadow if not desired */
    /* max-width: 90px; */ /* Remove or comment out max-width to allow full text */
    white-space: nowrap; /* Keeps the label text on a single line */
    overflow: visible;   /* This is key: allows text to go beyond the element's box */
    /* text-overflow: ellipsis; No longer needed as overflow is visible */
    transform: translate(-50%, -50%);
    pointer-events: none; /* Changed back to none to make labels click-through */
    text-align: center;
    background-color: transparent !important; /* Ensure background is transparent, overriding leaflet tooltip if necessary */
    /* Add a little padding so the text isn't cramped, especially useful if it's near borders or other elements */
    padding: 1px 3px;
    /* Ensure permanent labels are drawn on top of other tooltips. */
    z-index: 651 !important; /* Higher than the default .leaflet-tooltip z-index. !important for emphasis. */
}

/* "Get This Data" button styling */
/* MODIFIED "Get This Data" button styling */
.get-data-btn {
    /* REMOVED: position, bottom, right, z-index (these are now on .bottom-right-controls) */
    background-color: #e8e8e82a; /* A light, slightly opaque background for the button itself */
    color: #0c5ca5;            /* Black text */
    padding: 6px 10px;         /* Adjusted padding for a balanced look */
    border: 1px solid #b0b0b000; /* A subtle border for the button */
    border-radius: 5px;        /* Rounded corners for the button */
    font-size: 12px;
    cursor: pointer;
    /* No need for individual z-index, position, bottom, right */
}

.get-data-btn:hover {
    color: #0c5ca5;             /* Link-like color on hover */
    background-color: #d8d8d811;  /* Slightly darker background on hover */
    border-color: #0c5ca5;
}

/* Container for bottom-right controls (data source label and button) */
.bottom-right-controls {
    position: absolute; /* Positions the container relative to the viewport */
    bottom: 20px; /* 20px from the bottom */
    right: 20px; /* 20px from the left */
    z-index: 1000; /* Ensures it's on top of the map and other elements */
    display: flex; /* Arranges children (label and button) in a row */
    align-items: center; /* Vertically aligns the label and button if their heights differ */
    background-color: rgba(255, 255, 255, 0); /* Semi-transparent white background for the container */
    padding: 8px 12px; /* Padding inside the container */
    border-radius: 8px; /* Rounded corners for the container */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0); /* Optional: subtle shadow for better separation from the map */
}

/* Data source label styling */
.data-source-label {
    margin-right: 15px; /* Creates space between the label and the button */
    font-size: 12px;
    font-family: Arial, sans-serif; /* Or your preferred font */
    color: #0c5ca5;   /* Dark grey text for good readability on the light background */
}

.separator {
  margin-left: 10px;
  margin-right: 10px;
}

.map-source-attribution {
    position: absolute;
    bottom: 0px;
    right: 10px;
    z-index: 1000;
    color: #888;
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.2); /* Optional: Semi-transparent background */
    padding: 2px 5px; /* Optional: Add some padding for better readability */
}

.bottom-left-controls {
    position: absolute; /* Positions the container relative to the viewport */
    bottom: 20px; /* 20px from the bottom */
    right: 5px; /* 20px from the left */
    
    z-index: 1000; /* Ensures it's on top of the map and other elements */
    display: flex; /* Arranges children (label and button) in a row */
    align-items: center; /* Vertically aligns the label and button if their heights differ */
}

/* Legend Styles for Horizontal Bar */
.info.legend {
    padding: 8px 12px;
    font: 12px/1.5 Arial, Helvetica, sans-serif;
    background: transparent; /* Removed white background */
    /* background: rgba(255, 255, 255, 0.85); */ /* Commented out semi-transparent white */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    color: #ffffff;
    width: 250px; /* Adjust width as needed */
}
.info.legend .legend-labels span {
    color: #0c5ca5;
}

.legend h4 {
    margin: 0 0 8px; /* Increased bottom margin slightly */
    color: #0c5ca5;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.legend-bar {
    display: flex; /* Arrange color segments horizontally */
    height: 20px;  /* Height of the color bar */
    border: 1px solid #777; /* Optional border around the bar */
    margin-bottom: 8px; /* Adjusted space to move labels further below the bar */
}

/* ... other legend styles ... */

.legend-bar-segment {
    flex-grow: 1; /* Each color segment takes equal width */
    /* Add a very subtle inner border if colors are too similar, e.g. */
    /* box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.1); */
    transition: transform 0.1s ease-in-out, outline 0.1s ease-in-out; /* Smooth transition for hover effect */
}
.legend-bar-segment:hover {
    transform: scale(1.1); /* Slightly enlarge the hovered segment */
    outline: 2px solid #000000; /* Add a black outline to the hovered segment */
    outline-offset: -1px; /* Optional: pulls outline inward slightly if needed */
    z-index: 10; /* Ensure hovered segment is on top if they overlap due to scaling */
    cursor: default; /* Or 'pointer' if you plan to add click events later */
}

/* styles.css */
/* ... other styles ... */

.legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    margin-bottom: 5px; /* Add this line to create space below the labels */
}

/* ... other styles ... */


.legend-labels span {
    text-align: center; /* Center text if labels wrap, though they shouldn't with current formatting */
    /* flex-basis: 0; */ /* Helps with even distribution if needed */
    /* flex-grow: 1; */   /* Also helps with even distribution */
}