/* =============================================================================
   INSIGHT EDITORIAL DARK — Map Styles
   Ohio School Insight
   =============================================================================
   Leaflet.js overrides for dark theming, custom map controls, overlay panels,
   legend treatments, and Ohio district polygon styling.
   Import after tokens.css.

   All Leaflet overrides use !important to defeat the library's inline styles
   and specificity. Map component classes do not require !important.
   ============================================================================= */


/* =============================================================================
   LEAFLET CORE OVERRIDES
   ============================================================================= */

/* Map container background — matches deep navy */
.leaflet-container {
  background: var(--background) !important;
  font-family: var(--font-ui) !important;
  color: var(--on-surface) !important;
}

/* Disable default Leaflet focus ring (we manage our own) */
.leaflet-container:focus {
  outline: none !important;
}

/* Prevent tile loading flash */
.leaflet-tile {
  filter: brightness(0.85) saturate(0.7);  /* Subtle desaturation for dark harmony */
}


/* =============================================================================
   POPUP
   ============================================================================= */

.leaflet-popup-content-wrapper {
  background: var(--surface-container-high) !important;
  color: var(--on-surface) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-ambient) !important;
  border: none !important;
  padding: 0 !important;  /* We control padding in content */
}

/* Remove the white gap between wrapper and tip */
.leaflet-popup-content {
  margin: 0 !important;
  line-height: var(--leading-normal) !important;
  color: var(--on-surface) !important;
}

/* The arrow tip below the popup */
.leaflet-popup-tip-container {
  margin-top: -1px !important;
}

.leaflet-popup-tip {
  background: var(--surface-container-high) !important;
  box-shadow: none !important;
}

/* Close button */
.leaflet-popup-close-button {
  color: var(--on-surface-variant) !important;
  font-size: 16px !important;
  padding: 6px 8px !important;
  top: 4px !important;
  right: 4px !important;
  transition: color var(--duration-fast) var(--ease-editorial);
}

.leaflet-popup-close-button:hover {
  color: var(--on-surface) !important;
  background: none !important;
}


/* =============================================================================
   ZOOM CONTROLS
   ============================================================================= */

.leaflet-control-zoom {
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

.leaflet-control-zoom a {
  background: var(--surface-container-high) !important;
  color: var(--on-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--outline-variant) !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  transition: background-color var(--duration-fast) var(--ease-editorial) !important;
}

.leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

.leaflet-control-zoom a:hover {
  background: var(--surface-container-highest) !important;
  color: var(--primary) !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font-family: var(--font-ui) !important;
}


/* =============================================================================
   ATTRIBUTION
   ============================================================================= */

.leaflet-control-attribution {
  background: rgba(11, 19, 38, 0.8) !important;
  color: var(--on-surface-variant) !important;
  font-size: 9px !important;
  font-family: var(--font-ui) !important;
  padding: 2px 6px !important;
  letter-spacing: 0.03em;
  border-radius: var(--radius-sm) 0 0 0 !important;
}

.leaflet-control-attribution a {
  color: var(--primary) !important;
  text-decoration: none !important;
}

.leaflet-control-attribution a:hover {
  text-decoration: underline !important;
}

/* Separator pipe */
.leaflet-control-attribution span {
  color: var(--outline) !important;
}


/* =============================================================================
   SCALE BAR
   ============================================================================= */

.leaflet-control-scale-line {
  background: rgba(11, 19, 38, 0.7) !important;
  color: var(--on-surface-variant) !important;
  border: 1px solid var(--outline-variant) !important;
  border-top: none !important;
  font-size: 9px !important;
  padding: 2px 4px !important;
  font-family: var(--font-ui) !important;
}


/* =============================================================================
   MAP OVERLAY PANEL
   Glassmorphism sidebar/legend panel floating over the map.
   ============================================================================= */

.map-overlay-panel {
  position: absolute;
  z-index: var(--z-overlay);   /* z-40 */

  background: rgba(19, 27, 46, 0.9);   /* surface-container-low at 90% */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border-radius: var(--radius-md);
  padding: var(--space-4);

  /* Subtle teal border for depth */
  border: 1px solid rgba(60, 221, 199, 0.08);

  /* Ambient shadow */
  box-shadow: var(--shadow-md);

  /* Prevent clicks from passing through to map */
  pointer-events: auto;
}

/* Panel header */
.map-overlay-panel .panel-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--on-surface-variant);
  margin-bottom: var(--space-3);
}


/* =============================================================================
   MAP LEGEND
   Pill-shaped container for choropleth color scale.
   ============================================================================= */

.map-legend {
  position: absolute;
  z-index: var(--z-overlay);

  background: rgba(19, 27, 46, 0.9);   /* surface-container-low at 90% */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border-radius: var(--radius-full);    /* Pill shape */
  padding: var(--space-2) var(--space-4);

  display: flex;
  align-items: center;
  gap: var(--space-3);

  /* Pointer events off so users can click through to map */
  pointer-events: none;

  box-shadow: var(--shadow-sm);
}

.map-legend-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--on-surface-variant);
  white-space: nowrap;
}

/* Color ramp bar */
.map-legend-ramp {
  height: 8px;
  min-width: 80px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Teal ramp — performance scores */
.map-legend-ramp-teal {
  background: linear-gradient(
    90deg,
    var(--primary-container) 0%,
    var(--primary) 100%
  );
}

/* Gold ramp */
.map-legend-ramp-gold {
  background: linear-gradient(
    90deg,
    var(--on-secondary-container) 0%,
    var(--secondary) 100%
  );
}

/* Diverging ramp — negative to positive */
.map-legend-ramp-diverging {
  background: linear-gradient(
    90deg,
    var(--error) 0%,
    var(--surface-container-highest) 50%,
    var(--primary) 100%
  );
}

/* Legend min/max labels */
.map-legend-min,
.map-legend-max {
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--on-surface-variant);
  white-space: nowrap;
}

/* Stepped legend (categorical) */
.map-legend-steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.map-legend-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.map-legend-step-swatch {
  width: 16px;
  height: 8px;
  border-radius: 2px;
}

.map-legend-step-label {
  font-size: 0.5625rem;   /* 9px */
  font-weight: 600;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}


/* =============================================================================
   MAP POPUP ACCENT
   2px gradient stripe at top of custom popup content
   ============================================================================= */

.map-popup-accent {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--on-primary-container) 100%
  );
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  /* Applied as first child of popup content */
}

/* Full popup content wrapper with accent */
.map-popup-content {
  padding: var(--space-4);
  min-width: 200px;
  max-width: 280px;
}

.map-popup-district {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--on-surface);
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}

.map-popup-county {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--on-surface-variant);
  margin-bottom: var(--space-4);
}

.map-popup-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-1) 0;
  border-bottom: 1px solid rgba(69, 70, 77, 0.2);
}

.map-popup-metric:last-child {
  border-bottom: none;
}

.map-popup-metric-label {
  font-size: var(--text-xs);
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
}

.map-popup-metric-value {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

.map-popup-metric-value.highlight {
  color: var(--primary);
}

/* Popup action link */
.map-popup-link {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--primary);
  text-decoration: none;
  text-align: right;
  transition: color var(--duration-fast) var(--ease-editorial);
}

.map-popup-link:hover {
  color: var(--primary-fixed);
}


/* =============================================================================
   DISTRICT POLYGONS
   SVG path elements rendered by Leaflet's GeoJSON layer.
   ============================================================================= */

/* Default polygon state */
.district-polygon {
  fill-opacity: 0.7;
  stroke: var(--surface-container-lowest);
  stroke-width: 0.5;
  transition: fill 300ms var(--ease-editorial),
              fill-opacity 200ms var(--ease-editorial),
              stroke var(--duration-fast) var(--ease-editorial),
              stroke-width var(--duration-fast) var(--ease-editorial);
  cursor: pointer;
}

/* Hovered polygon */
.district-polygon:hover {
  fill-opacity: 0.9;
  stroke: var(--primary);
  stroke-width: 1.5;
}

/* Selected / focused polygon */
.district-polygon.selected {
  fill-opacity: 1;
  stroke: var(--primary);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(60, 221, 199, 0.5));
}

/* Dimmed polygon (when another is selected/searched) */
.district-polygon.dimmed {
  fill-opacity: 0.25;
  stroke-opacity: 0.3;
}

/* Performance tier fill colors — applied by JS based on score */
.fill-tier-1  { fill: #1a4d45; }   /* Very low — darkest teal */
.fill-tier-2  { fill: #1a6b5f; }
.fill-tier-3  { fill: #1d8a78; }
.fill-tier-4  { fill: #25a893; }
.fill-tier-5  { fill: #3cddc7; }   /* Top — full primary */

/* Gold performance fills */
.fill-gold-1  { fill: #4a3300; }
.fill-gold-2  { fill: #6b4a00; }
.fill-gold-3  { fill: #9c6e00; }
.fill-gold-4  { fill: #d4970a; }
.fill-gold-5  { fill: #ffc640; }   /* Top — full secondary */

/* Diverging — below/at/above state average */
.fill-below-3 { fill: #7a1a1a; }
.fill-below-2 { fill: #a02020; }
.fill-below-1 { fill: #c43030; }
.fill-avg     { fill: var(--surface-container-highest); }
.fill-above-1 { fill: #1a5a52; }
.fill-above-2 { fill: #1d8a78; }
.fill-above-3 { fill: var(--primary); }


/* =============================================================================
   MAP SEARCH OVERLAY
   ============================================================================= */

.map-search {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-overlay);
  width: min(400px, calc(100% - 2rem));
}

.map-search .search-input {
  width: 100%;
  box-shadow: var(--shadow-md);
}


/* =============================================================================
   MAP TOOLTIP (hover card — lighter than popup)
   ============================================================================= */

.map-tooltip {
  background: rgba(34, 42, 61, 0.95);  /* surface-container-high at 95% */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  border-top: 2px solid var(--primary);

  font-size: var(--text-xs);
  color: var(--on-surface);
  font-family: var(--font-ui);
  white-space: nowrap;
}

.map-tooltip-name {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--on-surface);
  margin-bottom: 2px;
}

.map-tooltip-value {
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}


/* =============================================================================
   RESPONSIVE MAP ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
  /* Move overlay panels to bottom on mobile */
  .map-overlay-panel {
    position: fixed;
    bottom: calc(var(--mobile-nav-h) + var(--space-2));
    left: var(--space-4);
    right: var(--space-4);
    top: auto;
  }

  /* Smaller legend pill */
  .map-legend {
    padding: var(--space-1) var(--space-3);
    gap: var(--space-2);
  }

  .map-legend-ramp {
    min-width: 60px;
  }

  /* Mobile panel overlay — constrain width and enable scroll */
  #map-panels-container.fixed {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Each panel fills available width on mobile */
  #map-panels-container .w-72 {
    width: 100% !important;
    max-width: 100%;
  }
}

/* Mobile panel toggle button hover / active states */
#map-panels-toggle:hover {
  background: rgba(60, 221, 199, 0.15) !important;
  border-color: rgba(60, 221, 199, 0.5) !important;
}

#map-panels-toggle:active {
  transform: scale(0.95);
}