/* NOTE: This is a hack to hide the "cluster count" section of the esri legend. */
/* This might cause issues with other legends! */
.esri-legend__layer > :nth-child(2) {
  visibility: hidden;
  display: none;
}

/* Hide "No legend" text that might appear during legend initialization */
.esri-legend__message,
.esri-legend__message--no-legend,
.esri-legend .esri-widget__content:empty::after {
  display: none !important;
  visibility: hidden !important;
}

/* Hide empty legend containers that might show "No legend" */
.esri-legend .esri-widget__content:empty {
  display: none !important;
}

.esri-widget__heading.esri-legend__service-label {
  display: none;
}

.esri-legend__layer-table.esri-legend__layer-table--size-ramp > .esri-legend__layer-caption {
  display: none;
}

/*
This section forces apexcharts menu to use black text.
This is required because otherwise the apexchart menus don't completely
adhere to our light/dark theming. The text changes color, but the
background doesn't.
*/
.apexcharts-menu-item {
  color: black;
}

/*
Cluster Map Page Specific Legend Styling
This targets the Esri legend specifically on the cluster map page to make it narrower.
The selector uses the page title to ensure it only affects the cluster map page.
*/
.cluster-map-page .esri-legend,
#cluster-map-page .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/* Alternative approach using route-based targeting */
[data-path*="2d-cluster-map"] .esri-legend,
[data-route="2d-cluster-map"] .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Most specific approach: Target the legend when the page title contains "Cluster Map"
This uses the browser's document title to identify the specific page.
*/
body:has([title*="Cluster Map"]) .esri-legend,
body:has([title*="2D Cluster Map"]) .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Fallback approach: Target based on the specific route path
This will work if the URL contains "2d-cluster-map"
*/
body[data-current-route*="2d-cluster-map"] .esri-legend,
html[data-route*="2d-cluster-map"] .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Primary approach: Target the legend when the cluster map page is active
This uses the class added by the React component to the body element.
*/
body.cluster-map-page-active .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Heatmap Page Specific Legend Styling
This targets the Esri legend specifically on the heatmap page to make it narrower.
*/
.heatmap-page .esri-legend,
#heatmap-page .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/* Target the specific layer element that has the scroll badge */
.heatmap-page .esri-legend_layer,
#heatmap-page .esri-legend_layer {
  overflow: hidden !important;
  max-width: 115px !important;
}

/* Target the info cell that's causing the extra width */
.heatmap-page .esri-legend_layer-cell--info,
#heatmap-page .esri-legend_layer-cell--info {
  max-width: 80px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Target the ramp labels container */
.heatmap-page .esri-legend_ramp-labels,
#heatmap-page .esri-legend_ramp-labels {
  max-width: 80px !important;
  overflow: hidden !important;
}

/* Alternative approach using route-based targeting for heatmap */
[data-path*="heatmap"] .esri-legend,
[data-route="heatmap"] .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/*
Most specific approach: Target the legend when the page title contains "Heatmap"
This uses the browser's document title to identify the specific page.
*/
body:has([title*="Heatmap"]) .esri-legend,
body:has([title*="2D Heatmap"]) .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/*
Fallback approach: Target based on the specific route path for heatmap
This will work if the URL contains "heatmap"
*/
body[data-current-route*="heatmap"] .esri-legend,
html[data-route*="heatmap"] .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/*
Primary approach: Target the legend when the heatmap page is active
This uses the class added by the React component to the body element.
*/
body.heatmap-page-active .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/* Target the specific layer element that has the scroll badge */
body.heatmap-page-active .esri-legend_layer {
  overflow: hidden !important;
  max-width: 115px !important;
}

/* Target the info cell that's causing the extra width */
body.heatmap-page-active .esri-legend_layer-cell--info {
  max-width: 80px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Target the ramp labels container */
body.heatmap-page-active .esri-legend_ramp-labels {
  max-width: 80px !important;
  overflow: hidden !important;
}

/* Heatmap page specific styling for legend cells */
body.heatmap-page-active .esri-legend__layer-cell.esri-legend__layer-cell--info {
  max-width: 50px !important;
  min-width: 50px !important;
  width: 50px !important;
  overflow: hidden !important;
}

body.heatmap-page-active .esri-legend__ramp-labels {
  max-width: 50px !important;
  min-width: 50px !important;
  width: 50px !important;
  overflow: hidden !important;
}

/* Fix for top label cutting off */
.esri-legend__ramp-label {
  margin-top: 5px !important;
}