/* =====================================================
   KY Highway Projects Dashboard Styles
   =====================================================

   This CSS file contains all styling for the Kentucky Highway Projects Dashboard.
   The dashboard uses a custom color scheme with CSS variables for easy maintenance.
   Layout is responsive with flexbox and grid for optimal viewing on all devices.

   Main sections:
   1. CSS Variables and Global Styles
   2. Header Styling
   3. Layout Containers
   4. Chart Styling (Pie Chart and Bar Chart)
   5. Map Styling
   6. Table Styling
   7. Interactive Controls (Basemap, Filters)
   8. Responsive Design
   ===================================================== */

/* =====================================================
   1. CSS VARIABLES AND GLOBAL STYLES
   ===================================================== */
/* CSS Custom Properties (Variables) for consistent theming */
:root {
  --bg: #e6ebe6;           /* Main background color - light sage green */
  --card-bg: #f2f4f2;      /* Card/panel background - lighter sage */
  --primary: #3c5e49;      /* Primary brand color - dark green */
  --accent: #709072;       /* Accent color - medium green */
  --text: #2e2f2b;         /* Primary text color - dark charcoal */
  --muted: #58745c;        /* Muted text color - medium sage */
  --header-bg: #878c82;    /* Header background - sage gray */
}

/* Global body styling */
/* ...existing code... */
}

/* =====================================================
   2. HEADER STYLING
   ===================================================== */
/* Override Bootstrap's primary background color for header */
.bg-primary {
  background-color: var(--header-bg) !important;
}

/* Header container styling with rounded corners */
header.bg-primary {
  border-radius: 0.5rem;  /* Rounded corners for modern look */
  margin: 1rem;           /* Space around header */
}

/* Header content styling - removes default constraints */
.header-content {
  max-width: none;  /* Remove max-width constraint */
  padding: 0;       /* Remove default padding */
}

/* Header Help Button Styles */
.help-btn {
  text-decoration: none;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.help-btn .help-icon {
  font-size: 1.1rem;
  color: white;
  border-radius: 50%;
  border: 1.5px solid white;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(60, 94, 73, 0.7);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* =====================================================
   3. LAYOUT CONTAINERS
   ===================================================== */
/* Main container override for full-width layout */
.container {
  max-width: 95%;      /* Use most of screen width */
  padding-left: 0;     /* Remove left padding */
  padding-right: 0;    /* Remove right padding */
}

/* Ensure main container has proper stacking context */
main.container {
  position: relative;  /* Create stacking context */
  z-index: 1;         /* Ensure content appears above other elements */
}

/* Dashboard container - main layout wrapper for charts and map */
.dashboard-container {
  display: flex;        /* Flexbox layout for responsive design */
  flex-wrap: wrap;      /* Allow wrapping on smaller screens */
  gap: 1rem;           /* Space between flex items */
  margin: 0 1rem;      /* Horizontal margin */
  position: relative;   /* Enable absolute positioning for child elements */
}

/* Left panels container - holds pie chart and bar chart panels */
.left-panels {
  flex: 1 1 300px;               /* Flexible sizing with 300px minimum */
  display: grid;                 /* Grid layout for equal-height panels */
  gap: 1rem;                    /* Space between grid items */
  grid-template-rows: repeat(2, 1fr);  /* Two equal-height rows */
  height: 520px;                /* Fixed height for consistency */
  position: relative;            /* Enable absolute positioning for child elements */
}

/* =====================================================
   4. CHART STYLING
   ===================================================== */
/* Panel styling - applies to both chart panels */
.panel {
  background-color: #BBCABE;     /* Light sage background */
  border-radius: 0.5rem;        /* Rounded corners */
  padding: 0rem;                /* No internal padding */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);  /* Subtle shadow */
  overflow: hidden;             /* Prevent content overflow */
}

/* Panel titles styling */
.panel h6 {
  color: var(--text);      /* Use primary text color */
  margin-bottom: 0rem;     /* Remove bottom margin */
  font-weight: 800;        /* Bold font weight */
}

/* Chart header container */
.chart-header {
  display: flex;           /* Flexbox layout */
  flex-direction: column;  /* Stack vertically */
  gap: 0;                 /* No gap between items */
  height: 100%;           /* Full height of parent */
  height: 100%;           /* Full height of parent */
  padding: 0rem 0;        /* No vertical padding */
}

/* Chart main section - contains total count and pie chart */
.chart-main {
  display: flex;                    /* Flexbox layout */
  align-items: center;              /* Center items vertically */
  justify-content: space-between;   /* Space items apart */
  gap: 0rem;                       /* No gap between items */
  flex: 0;                         /* Don't grow or shrink */
  height: 100%;                    /* Full height */
  width: 95%;                      /* Most of available width */
}

/* Total projects count display section */
.total-section {
  display: flex;              /* Flexbox layout */
  flex-direction: column;     /* Stack vertically */
  justify-content: flex-start; /* Align to top */
  align-items: flex-start;    /* Align to left */
  flex: 0;                   /* Don't grow or shrink */
  padding-left: 0.5rem;      /* Left padding */
  padding-top: 0rem;         /* No top padding */
}

/* Large number display for total project count */
.total-count {
  font-size: 2.5rem;    /* Large font size */
  font-weight: bold;    /* Bold text */
  color: black;         /* Black text color */
  line-height: 1;       /* Tight line height */
  margin-left: 0.25rem; /* Small left margin */
  margin-bottom: 0.5rem; /* Bottom margin */
}

/* Container for pie chart and legend */
.chart-and-legend {
  display: flex;        /* Flexbox layout */
  align-items: center;  /* Center items vertically */
  gap: 0.5rem;         /* Small gap between chart and legend */
  flex: 0 0 auto;      /* Don't grow or shrink */
  padding-right: 0.5rem; /* Right padding */
}

/* Pie chart container with fixed dimensions */
.chart-container {
  width: 130px;         /* Fixed width */
  height: 130px;        /* Fixed height */
  position: relative;   /* For absolute positioning of children */
  flex-shrink: 0;       /* Don't shrink */
}

/* Pie chart canvas styling */
#projectsPieChart {
  width: 100% !important;   /* Force full width */
  height: 100% !important;  /* Force full height */
}

/* Pie chart legend container */
.chart-legend {
  display: flex;           /* Flexbox layout */
  flex-direction: column;  /* Stack vertically */
  gap: 0.4rem;            /* Small gap between legend items */
}

/* Individual legend item */
.legend-item {
  display: flex;        /* Flexbox layout */
  align-items: center;  /* Center items vertically */
  gap: 0.4rem;         /* Small gap between elements */
  font-size: 0.75rem;  /* Small font size */
}

/* Legend color indicator (small circle) */
.legend-color {
  width: 12px;          /* Fixed width */
  height: 12px;         /* Fixed height */
  border-radius: 50%;   /* Make circular */
  flex-shrink: 0;       /* Don't shrink */
}

/* Awarded projects color - gray */
.legend-color.awarded {
  background-color: #71716C;
}

/* Current projects color - dark green */
.legend-color.current {
  background-color: #2F5441;
}

/* Legend label text */
.legend-label {
  color: var(--text);     /* Use primary text color */
  white-space: nowrap;    /* Prevent text wrapping */
}

/* Legend value (count) */
.legend-value {
  font-weight: 600;       /* Semi-bold text */
  color: var(--text);     /* Use primary text color */
  margin-left: auto;      /* Push to right side */
}

/* =====================================================
   5. PROJECT YEARS CHART STYLING (BAR CHART)
   ===================================================== */
/* Container for horizontal bar chart */
.years-chart-container {
  height: calc(100% - 2rem);  /* Full height minus padding */
  padding: 0.5rem;            /* Internal padding */
  display: flex;              /* Flexbox layout */
  align-items: center;        /* Center vertically */
  justify-content: center;    /* Center horizontally */
}

/* Bar chart canvas styling */
#projectYearsChart {
  width: 100% !important;   /* Force full width */
  height: 100% !important;  /* Force full height */
  max-height: 240px;        /* Limit maximum height */
}

/* =====================================================
   6. MAIN MAP AREA STYLING
   ===================================================== */
/* Main map area container */
.main-map-area {
  flex: 3 1 600px;         /* Flexible sizing with 600px minimum */
  display: flex;            /* Flexbox layout */
  flex-direction: column;   /* Stack vertically */
  gap: 1rem;               /* Gap between items */
  min-height: 560px;       /* Minimum height constraint */
}

/* Panel general styling overrides */
.panel > div {
  border-radius: 0.5rem;   /* Rounded corners for panel children */
}

/* Individual panel height specifications */
.panel:nth-child(1) {
  height: 200px;           /* Pie chart panel height */
}

.panel:nth-child(2) {
  background-color: #D0D7D0;  /* Bar chart panel background */
  padding: 0;                 /* No padding */
  height: 300px;             /* Bar chart panel height */
}

.panel:nth-child(2) > div {
  height: 100%;              /* Full height for bar chart container */
}

/* Panel header styling for non-display headings */
.panel h6:not([class*="display"]) {
  padding: 1rem 1rem 0 1rem;  /* Padding on top and sides */
  margin: 0;                  /* No margin */
  color: var(--text);         /* Primary text color */
  font-weight: 800;           /* Extra bold */
  font-size: 1.75rem;         /* Large font size */
}

/* Specific styling for display-6 headings (pie chart panel) */
.panel h6.display-6 {
  padding: 0 0 0 0;          /* No padding */
  margin-top: 0.2rem;        /* Small top margin */
  margin-left: 0.75rem;      /* Left margin */
  color: var(--text);        /* Primary text color */
  font-weight: 700;          /* Bold */
  line-height: 1.2;          /* Consistent line height */
}

/* Adjust font size when filters are applied to fit panel width */
.panel h6.display-6.has-filter {
  font-size: 1.4rem;         /* Smaller font size to fit longer text */
}

/* =====================================================
   7. TABLE SECTION STYLING
   ===================================================== */
/* Table section - full width container */
.table-section {
  width: 100%;                    /* Full width */
  margin: 0.5rem;                 /* Reduced margin for more table space */
  background-color: #ffffff;      /* White background */
  border-radius: 0.5rem;         /* Rounded corners */
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);  /* Subtle shadow */
}

/* Map and table container styling */
.map-container, .table-container {
  background-color: #ffffff;      /* White background */
  border-radius: 0.5rem;         /* Rounded corners */
  padding: 0;                    /* No padding */
  box-shadow: none;              /* No shadow */
  overflow: hidden;              /* Hide overflow */
}

/* Table container specific styling */
.table-container {
  min-height: 400px;             /* Minimum height */
  width: 100%;                   /* Full width */
  display: block;                /* Block display */
  overflow-x: hidden;            /* Hide horizontal overflow */
}

/* Tabulator table wrapper - ensure full width responsiveness */
#highway-projects-table {
  width: 100% !important;        /* Force full width */
  min-width: 100% !important;    /* Ensure minimum full width */
  max-width: 100% !important;    /* Prevent overflow */
}

/* Tabulator table element responsiveness */
.tabulator {
  width: 100% !important;        /* Force full width */
  border: 1px solid #dee2e6;     /* Light border */
  border-radius: 0.375rem;       /* Rounded corners */
  overflow: hidden;              /* Hide overflow */
}

/* Tabulator table header responsiveness */
.tabulator .tabulator-header {
  width: 100% !important;        /* Force full width */
  overflow: hidden;              /* Hide overflow */
}

/* Tabulator table body responsiveness */
.tabulator .tabulator-tableHolder {
  width: 100% !important;        /* Force full width */
  overflow-x: auto;              /* Allow horizontal scrolling if needed */
}

/* Tabulator table responsiveness */
.tabulator .tabulator-table {
  width: 100% !important;        /* Force full width */
  table-layout: auto;            /* Allow auto table layout for responsive behavior */
}

/* Table content wrapper */
.table-content {
  background-color: #ffffff;     /* White background */
  height: 100%;                  /* Full height */
  padding: 1rem;                 /* Reduced padding for more table space */
  min-height: 400px;             /* Minimum height */
  box-sizing: border-box;        /* Include padding in width calculation */
  width: 100%;                   /* Full width */
}

/* Table content header styling */
.table-content h6 {
  color: var(--text);            /* Primary text color */
  margin-bottom: 1rem;           /* Bottom margin */
  font-weight: 700;              /* Bold font */
  font-size: 1.25rem;            /* Font size */
}

.table-header {
  display: flex;                    /* Flexbox layout */
  justify-content: space-between;   /* Space between title and controls */
  align-items: center;              /* Center items vertically */
  margin-bottom: 1rem;              /* Bottom margin */
}

/* Table header controls container - holds export buttons and reload button */
.table-header-controls {
  display: flex;                    /* Flexbox layout */
  align-items: center;              /* Center items vertically */
  gap: 1rem;                       /* Space between button groups */
}

/* Export buttons container */
.export-buttons {
  display: flex;                    /* Flexbox layout */
  gap: 0.5rem;                     /* Small gap between export buttons */
}

/* Export button styling */
.export-buttons .btn {
  font-size: 0.75rem;              /* Smaller font size */
  padding: 4px 8px;                /* Compact padding */
  border-radius: 4px;              /* Rounded corners */
  transition: all 0.2s ease;       /* Smooth transitions */
  font-family: system-ui, -apple-system, sans-serif;  /* System font */
  line-height: 1.2;                /* Consistent line height */
}

/* Custom outline button styling with color scheme */
.btn-outline-custom {
  color: #244332 !important;           /* Text color matching your color scheme */
  border-color: #244332 !important;    /* Border color matching your color scheme */
  background-color: transparent !important;  /* Transparent background */
}

.btn-outline-custom:hover {
  color: #ffffff !important;           /* White text on hover */
  background-color: #244332 !important;  /* Background color on hover */
  border-color: #244332 !important;    /* Border color on hover */
  transform: translateY(-1px);         /* Slight lift on hover */
  box-shadow: 0 2px 4px rgba(36, 67, 50, 0.3);  /* Subtle shadow with color scheme */
}

.btn-outline-custom:focus {
  box-shadow: 0 0 0 0.2rem rgba(36, 67, 50, 0.25);  /* Focus ring with color scheme */
}

.btn-outline-custom:active {
  color: #ffffff !important;           /* White text when active */
  background-color: #244332 !important;  /* Background color when active */
  border-color: #244332 !important;    /* Border color when active */
}

/* Specific button styling to override Bootstrap defaults */
#downloadCSV,
#downloadJSON,
#downloadXLSX {
  color: #244332 !important;           /* Ensure text color consistency */
  border-color: #244332 !important;    /* Ensure border color consistency */
  background-color: transparent !important;  /* Ensure transparent background */
  font-size: 0.75rem !important;       /* Force consistent font size */
  padding: 4px 8px !important;         /* Force consistent padding */
  border-width: 1px !important;        /* Force border width */
  border-style: solid !important;      /* Force border style */
}

#downloadCSV:hover,
#downloadJSON:hover,
#downloadXLSX:hover {
  color: #ffffff !important;           /* White text on hover */
  background-color: #244332 !important;  /* Background color on hover */
  border-color: #244332 !important;    /* Border color on hover */
}

#downloadCSV:focus,
#downloadJSON:focus,
#downloadXLSX:focus {
  box-shadow: 0 0 0 0.2rem rgba(36, 67, 50, 0.25) !important;  /* Focus ring */
}

#downloadCSV:active,
#downloadJSON:active,
#downloadXLSX:active {
  color: #ffffff !important;           /* White text when active */
  background-color: #244332 !important;  /* Background color when active */
  border-color: #244332 !important;    /* Border color when active */
}

/* Force remove any Bootstrap button variants */
.export-buttons .btn-outline-success,
.export-buttons .btn-outline-info,
.export-buttons .btn-outline-warning {
  color: #244332 !important;
  border-color: #244332 !important;
  background-color: transparent !important;
}

.export-buttons .btn-outline-success:hover,
.export-buttons .btn-outline-info:hover,
.export-buttons .btn-outline-warning:hover {
  color: #ffffff !important;
  background-color: #244332 !important;
  border-color: #244332 !important;
}

/* Ultimate override - target all button elements in export-buttons */
.export-buttons button {
  color: #244332 !important;
  border: 1px solid #244332 !important;
  background-color: transparent !important;
  font-size: 0.75rem !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.export-buttons button:hover {
  color: #ffffff !important;
  background-color: #244332 !important;
  border-color: #244332 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(36, 67, 50, 0.3) !important;
}

.export-buttons button:focus {
  box-shadow: 0 0 0 0.2rem rgba(36, 67, 50, 0.25) !important;
}

.export-buttons button:active {
  color: #ffffff !important;
  background-color: #244332 !important;
  border-color: #244332 !important;
}

/* Ensure consistent emoji size across all export buttons */
.export-buttons .btn::before {
  font-size: 12px;                 /* Smaller, consistent icon size */
  margin-right: 4px;               /* Space between icon and text */
}

/* Specific styling to ensure clipboard emoji is consistent size */
.export-buttons .btn {
  font-size: 0.75rem !important;   /* Control overall font size */
}

/* Target the emoji specifically in each button */
#downloadCSV,
#downloadJSON,
#downloadXLSX {
  font-size: 0.75rem !important;   /* Force consistent font size */
  line-height: 1.2 !important;     /* Consistent line height */
}

/* Override any emoji sizing issues */
.export-buttons button[id^="download"] {
  font-size: 0.75rem !important;   /* Force small font size */
}

/* Reload Button to refresh data from SQLite db view */
.reload-btn {
  background-color: var(--primary) !important;  /* Primary color background */
  border: 1px solid var(--primary) !important;  /* Primary color border */
  color: white !important;                      /* White text */
  padding: 6px 8px !important;                  /* Compact padding */
  border-radius: 4px !important;                /* Rounded corners */
  transition: all 0.2s ease;                    /* Smooth transitions */
}

/* Reload button icon styling */
.reload-btn img {
  filter: brightness(0) invert(1);  /* Make icon white */
  transition: transform 0.2s ease;  /* Smooth rotation transition */
}

/* Reload button hover effects */
.reload-btn:hover {
  background-color: var(--accent) !important;  /* Accent color on hover */
  border-color: var(--accent) !important;      /* Accent color border on hover */
}

/* Reload button icon rotation on hover */
.reload-btn:hover img {
  transform: rotate(180deg);        /* Rotate icon on hover */
}

/* Table controls container - holds record count and pagination info */
.table-controls {
  display: flex;                    /* Flexbox layout */
  align-items: center;              /* Center items vertically */
  gap: 1rem;                       /* Space between items */
  background-color: transparent;    /* Transparent background */
  padding: 0;                      /* No padding */
  border: none;                    /* No border */
}

/* =====================================================
   TABULATOR.JS CUSTOM STYLING
   ===================================================== */
/* Main Tabulator container styling */
#highway-projects-table {
  border-radius: 0.5rem;           /* Rounded corners */
  overflow: hidden;                /* Hide overflow for rounded corners */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);  /* Subtle shadow */
  width: 100%;                     /* Full width of container */
  max-width: 100%;                 /* Don't exceed container width */
}

/* Tabulator table element - ensure it fills the container */
#highway-projects-table .tabulator {
  width: 100% !important;          /* Force full width */
  max-width: 100% !important;      /* Don't exceed container */
}

/* Tabulator table holder - the main table container */
#highway-projects-table .tabulator-tableholder {
  overflow-x: auto;                /* Horizontal scroll if needed */
  overflow-y: auto;                /* Vertical scroll if needed */
}

/* Tabulator table - the actual table element */
#highway-projects-table .tabulator-table {
  width: 100% !important;          /* Force full width */
  min-width: 100% !important;      /* Ensure minimum width fills container */
  table-layout: fixed;             /* Fixed table layout for better control */
}

/* Tabulator header styling */
#highway-projects-table .tabulator-header {
  background-color: var(--primary); /* Primary color background */
  border-bottom: 2px solid var(--accent);  /* Accent color border */
}

/* Tabulator header column styling */
#highway-projects-table .tabulator-col {
  color: white;                     /* White text */
  font-weight: 600;                 /* Semi-bold */
  border-right: 1px solid rgba(255,255,255,0.2);  /* Subtle column separators */
}

/* Tabulator row styling */
#highway-projects-table .tabulator-row {
  border-bottom: 1px solid #e9ecef;  /* Light border between rows */
}

/* Tabulator row hover effect */
#highway-projects-table .tabulator-row:hover {
  background-color: #f8f9fa;        /* Light background on hover */
}

/* Tabulator selected row styling */
#highway-projects-table .tabulator-row.tabulator-selected {
  background-color: var(--accent);   /* Accent color for selected rows */
  color: white;                      /* White text for selected rows */
}

/* Tabulator pagination styling */
#highway-projects-table .tabulator-footer {
  background-color: #f8f9fa;        /* Light background */
  border-top: 1px solid #dee2e6;    /* Top border */
  padding: 0.5rem;                  /* Padding */
}

/* Tabulator pagination buttons */
#highway-projects-table .tabulator-paginator button {
  background-color: var(--primary);  /* Primary color background */
  color: white;                      /* White text */
  border: 1px solid var(--primary);  /* Primary color border */
  border-radius: 4px;                /* Rounded corners */
  margin: 0 2px;                     /* Small margin between buttons */
  transition: all 0.2s ease;         /* Smooth transitions */
}

/* Tabulator pagination button hover */
#highway-projects-table .tabulator-paginator button:hover {
  background-color: var(--accent);   /* Accent color on hover */
  border-color: var(--accent);       /* Accent color border on hover */
}

.table-container h6 {
  padding: 0;
  margin: 0 0 1rem 0;
  color: var(--text);
  font-weight: 700;
  font-size: 1.25rem;
}

#projectsTable {
  font-size: 0.875rem;
}

#projectsTable th {
  background-color: var(--primary);
  color: white;
  font-weight: 600;
  border-color: var(--primary);
}

#projectsTable td {
  border-color: #dee2e6;
}

/* Map Styling */
.map-container {
  height: 520px;
  flex: 0 0 520px;
  padding: 10px;
  display: block;
}

#map {
  width: 100%;
  height: 500px;
  border-radius: 0.5rem;
  background-color: #f0f0f0;
  position: relative;
  z-index: 1;
}

/* Basemap Control */
.basemap-control {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.basemap-toggle-btn {
  width: 34px;
  height: 34px;
  background: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333;
  transition: background-color 0.2s;
  position: relative;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.basemap-toggle-btn:hover {
  background: #f4f4f4;
}

/* Tooltip for basemap button */
.basemap-toggle-btn::after {
  content: "Change Basemap";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 5px;
  z-index: 1001;
}

.basemap-toggle-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 1px;
  z-index: 1001;
}

.basemap-toggle-btn:hover::after,
.basemap-toggle-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

.basemap-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  min-width: 200px;
  overflow: hidden;
  margin-top: 5px;
  display: none;
}

.basemap-menu.show {
  display: block;
}

.basemap-option {
  display: block;
  width: 100%;
  padding: 10px 15px;
  background: white;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s;
  border-bottom: 1px solid #eee;
}

.basemap-option:last-child {
  border-bottom: none;
}

.basemap-option:hover {
  background: #f4f4f4;
}

.basemap-option.active {
  background: var(--primary);
  color: white;
}

/* Clear All Control */
.clear-all-control {
  position: absolute;
  top: 50px;
  right: 10px;
  z-index: 1000;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

/* County Filter Control */
.county-filter-control {
  position: absolute;
  top: 90px;
  right: 10px;
  z-index: 1000;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.county-filter-btn {
  width: 34px;
  height: 34px;
  background: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: grey;
  transition: background-color 0.2s;
  position: relative;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.county-filter-btn:hover {
  background: #f4f4f4;
}

/* Tooltip for county filter button */
.county-filter-btn::after {
  content: "County Filter";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 5px;
  z-index: 1001;
}

.county-filter-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 1px;
  z-index: 1001;
}

.county-filter-btn:hover::after,
.county-filter-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

.county-filter-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  min-width: 250px;
  overflow: hidden;
  margin-top: 5px;
  display: none;
  max-height: 350px;
  overflow-y: auto;
}

.county-filter-menu.show {
  display: block;
}

.county-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: var(--primary);
  color: white;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

.clear-county-filter-btn {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.clear-county-filter-btn:hover {
  background: rgba(255,255,255,0.2);
}

.county-search-container {
  padding: 10px;
}

.county-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  margin-bottom: 10px;
}

.county-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(60, 94, 73, 0.1);
}

.county-options-container {
  max-height: 200px;
  overflow-y: auto;
}

.county-option {
  display: block;
  width: 100%;
  padding: 8px 15px;
  background: white;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s;
  border-bottom: 1px solid #f0f0f0;
}

.county-option:last-child {
  border-bottom: none;
}

.county-option:hover {
  background: #f8f9fa;
}

.county-option.active {
  background: var(--primary);
  color: white;
}

.no-results {
  padding: 15px;
  text-align: center;
  color: #666;
  font-style: italic;
}

.error-message {
  padding: 15px;
  text-align: center;
  color: #dc3545;
  background: #f8d7da;
  border-radius: 4px;
  margin: 10px;
}

/* District Filter Control */
.district-filter-control {
  position: absolute;
  top: 130px;
  right: 10px;
  z-index: 1000;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.district-filter-btn {
  width: 34px;
  height: 34px;
  background: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: maroon;
  transition: background-color 0.2s;
  position: relative;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.district-filter-btn:hover {
  background: #f4f4f4;
}

/* Tooltip for district filter button */
.district-filter-btn::after {
  content: "District Filter";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 5px;
  z-index: 1001;
}

.district-filter-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 1px;
  z-index: 1001;
}

.district-filter-btn:hover::after,
.district-filter-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

.district-filter-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  min-width: 220px;
  overflow: hidden;
  margin-top: 5px;
  display: none;
  max-height: 300px;
  overflow-y: auto;
}

.district-filter-menu.show {
  display: block;
}

.district-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: var(--primary);
  color: white;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

.clear-filter-btn {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.clear-filter-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* Clear All Button */
.clear-all-btn {
  width: 34px;
  height: 34px;
  background: #244332;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  transition: background-color 0.2s;
  position: relative;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.clear-all-btn:hover {
  background: #1a2f24;
}

/* Tooltip for clear all button */
.clear-all-btn::after {
  content: "Clear All Filters";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 5px;
  z-index: 1001;
}

.clear-all-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 1px;
  z-index: 1001;
}

.clear-all-btn:hover::after,
.clear-all-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

.district-options-container {
  max-height: 200px;
  overflow-y: auto;
}

.district-option {
  display: block;
  width: 100%;
  padding: 10px 15px;
  background: white;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s;
  border-bottom: 1px solid #eee;
}

.district-option:last-child {
  border-bottom: none;
}

.district-option:hover {
  background: #f4f4f4;
}

.district-option.active {
  background: maroon;
  color: white;
}

.loading-districts,
.error-message {
  padding: 15px;
  text-align: center;
  color: #666;
  font-style: italic;
}

.error-message {
  color: #d32f2f;
}

/* Project Type Filter Control */
.project-type-filter-control {
  position: absolute;
  top: 170px;
  right: 10px;
  z-index: 1000;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.project-type-filter-btn {
  width: 34px;
  height: 34px;
  background: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #244332;
  transition: background-color 0.2s;
  position: relative;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.project-type-filter-btn:hover {
  background: #f4f4f4;
}

.project-type-filter-btn:hover img {
  opacity: 1 !important;
}

/* Tooltip for project type filter button */
.project-type-filter-btn::after {
  content: "Project Type Filter";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 5px;
  z-index: 1001;
}

.project-type-filter-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 1px;
  z-index: 1001;
}

.project-type-filter-btn:hover::after,
.project-type-filter-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

.project-type-filter-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  min-width: 280px;
  overflow: hidden;
  margin-top: 5px;
  display: none;
  max-height: 350px;
  overflow-y: auto;
}

.project-type-filter-menu.show {
  display: block;
}

.project-type-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: var(--primary);
  color: white;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

.clear-project-type-filter-btn {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.clear-project-type-filter-btn:hover {
  background: rgba(255,255,255,0.2);
}

.project-type-search-container {
  padding: 10px;
}

.project-type-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  margin-bottom: 10px;
}

.project-type-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(60, 94, 73, 0.1);
}

.project-type-options-container {
  max-height: 200px;
  overflow-y: auto;
}

.project-type-option {
  display: block;
  width: 100%;
  padding: 8px 15px;
  background: white;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s;
  border-bottom: 1px solid #f0f0f0;
}

.project-type-option:last-child {
  border-bottom: none;
}

.project-type-option:hover {
  background: #f8f9fa;
}

.project-type-option.active {
  background: var(--primary);
  color: white;
}

.loading-project-types {
  padding: 15px;
  text-align: center;
  color: #666;
  font-style: italic;
}

/* =====================================================
   KYTC API CONTROL STYLES
   ===================================================== */
.kytc-api-control {
  position: absolute;
  top: 210px;
  right: 10px;
  z-index: 1000;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.kytc-api-btn {
  background: white;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  transition: all 0.2s;
  position: relative;
}

.kytc-api-btn:hover {
  background: #f4f4f4;
  transform: scale(1.05);
}

/* Tooltip for KYTC API button */
.kytc-api-btn::after {
  content: "KYTC Route Information";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 5px;
  z-index: 1001;
}

.kytc-api-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-right: 1px;
  z-index: 1001;
}

.kytc-api-btn:hover::after,
.kytc-api-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

/* KYTC Instruction Box */
.kytc-instruction-box {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: white;
  border: none;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 1000;
  max-width: 300px;
}

.kytc-instruction-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kytc-instruction-content p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.kytc-instruction-content .kytc-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.kytc-get-info-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
}

.kytc-get-info-btn:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.kytc-cancel-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
}

.kytc-cancel-btn:hover {
  background: #f0f0f0;
  color: #333;
}

/* KYTC Results Popup */
.kytc-results-popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kytc-results-popup h6 {
  background: var(--primary);
  color: white;
  margin: 0;
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
}

.kytc-results-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  max-height: calc(100% - 120px);
}

.kytc-result-item {
  margin-bottom: 10px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
}

.kytc-result-item strong {
  color: var(--primary);
  display: block;
  margin-bottom: 2px;
}

.kytc-close-btn {
  margin: 15px;
  padding: 10px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s;
}

.kytc-close-btn:hover {
  background: var(--accent);
}

/* =====================================================
   LEGEND CONTROL STYLES
   ===================================================== */
.legend-control {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1000;
}

.legend-btn {
  background: white;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  transition: all 0.2s;
  color: #333;
  font-weight: bold;
}

.legend-btn:hover {
  background: #f4f4f4;
  transform: translateY(-1px);
}

.legend-popup {
  position: absolute;
  bottom: 45px;
  left: 0;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  min-width: 200px;
  border: 1px solid #ccc;
}

.legend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
  border-radius: 6px 6px 0 0;
}

.legend-header span {
  font-weight: bold;
  color: #333;
  font-size: 13px;
}

.legend-close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.legend-close-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.legend-content {
  padding: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: #333;
}

.legend-item:last-child {
  margin-bottom: 0;
}

.legend-color {
  width: 20px;
  height: 3px;
  border-radius: 1px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Project legend items should display as lines */
.legend-item:nth-child(1) .legend-color,
.legend-item:nth-child(2) .legend-color {
  width: 20px;
  height: 3px;
  border-radius: 1px;
}

/* Boundary legend items should display as squares */
.legend-item:nth-child(3) .legend-color,
.legend-item:nth-child(4) .legend-color {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

/* County boundaries - thinner border */
.legend-item:nth-child(3) .legend-color {
  border-width: 2px;
}

/* District boundaries - thicker border for emphasis */
.legend-item:nth-child(4) .legend-color {
  border-width: 3px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
  }
}

/* Card tweaks */
.card {
    background-color: var(--card-bg);
    color: var(--text-dark);
    border: none;
}

.card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.card .card-text.display-6 {
    font-size: 2.2rem;
    color: var(--primary-green);
}

/* Chart containers */
#chartBar,
#chartOther {
    min-height: 200px;
    background: white;
    border: 1px solid var(--accent-green);
}

/* Responsive tweaks */
@media (max-width: 770px) {
    aside {
        margin-bottom: 1rem;
    }

    #map {
        min-height: 250px;
    }
}

/* Override Bootstrap colors */
.bg-primary {
    background-color: var(--header-bg) !important;
}

.text-primary {
    color: var(--primary-green) !important;
}

.btn-primary {
    background-color: var(--muted-teal);
    border-color: var(--muted-teal);
}

.btn-primary:hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

/* Hide datalist arrow in some browsers */
input[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

/* Custom button tweaks */
.btn[title="Clear Filters"],
.btn[title="Download CSV"] {
    font-size: 1.2rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--muted-teal);
    color: white;
    border: none;
}

.btn[title="Clear Filters"]:hover,
.btn[title="Download CSV"]:hover {
    background-color: var(--primary-green);
}

.district-label .label-box {
    background-color: white;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Download button states */
#downloadBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

#downloadBtn.loading {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* Notification styling */
.download-notification,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
    backdrop-filter: blur(10px);
    background-color: var(--card-bg);
    color: var(--text-dark);
    border: 1px solid var(--primary-green);
}

/* Database buttons */
#updateDatabaseBtn,
#saveToDataFolderBtn,
#clearDatabaseBtn {
    font-size: 0.9rem;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

#updateDatabaseBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#updateDatabaseBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#saveToDataFolderBtn {
    background-color: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
}

#saveToDataFolderBtn:hover {
    background-color: var(--muted-teal);
    border-color: var(--muted-teal);
}

#clearDatabaseBtn {
    background-color: #a94442;
    border-color: #a94442;
    color: white;
}

#clearDatabaseBtn:hover {
    background-color: #843534;
    border-color: #843534;
}

/* Database status indicators */
.database-status {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--card-bg);
}

.database-status.success {
    background: #cde0d1;
    color: var(--text-dark);
}

.database-status.error {
    background: #f5c6cb;
    color: var(--text-dark);
}

.badge[title] {
    cursor: help;
}

/* Basemap Control */
.basemap-control {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.basemap-toggle-btn {
    width: 34px;
    height: 34px;
    background: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    transition: background-color 0.2s;
}

.basemap-toggle-btn:hover {
    background: #f4f4f4;
}

.basemap-toggle-btn svg {
    width: 16px;
    height: 16px;
}

.basemap-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    min-width: 200px;
    overflow: hidden;
    margin-top: 5px;
    display: none;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.basemap-menu.show {
    display: block;
}

.basemap-option {
    display: block;
    width: 100%;
    padding: 12px 15px;
    background: white;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s;
    border-bottom: 1px solid #eee;
}

.basemap-option:last-child {
    border-bottom: none;
}

.basemap-option:hover {
    background: #f4f4f4;
}

.basemap-option.active {
    background: var(--primary-green);
    color: white;
    font-weight: 500;
}

.basemap-option.active:hover {
    background: var(--accent-green);
}