/* ── Map fill ── */
#hp-map,#precip-village-map { width:100%; height:100%; z-index:1; background:#dfe8f2; }

/* Leaflet light tweaks */
.leaflet-container { font-family:"Inter",system-ui,sans-serif; background:#dfe8f2; }
.leaflet-control-zoom a { color:#0B1F44 !important; }
.leaflet-bar { border:1px solid #E4ECF5 !important; box-shadow:0 8px 24px rgba(15,35,70,.08) !important; }

/* ── Light popup ── */
.village-popup .leaflet-popup-content-wrapper {
  background:#fff; border-radius:14px; box-shadow:0 12px 32px rgba(15,35,70,.18);
  padding:0; border:1px solid #E4ECF5;
}
.village-popup .leaflet-popup-content { margin:12px 14px; color:#0B1F44; }
.village-popup .leaflet-popup-tip { background:#fff; }
.village-popup .leaflet-popup-close-button { color:#7A8AA3 !important; font-size:18px !important; top:6px !important; right:8px !important; }
.leaflet-popup-content { font-size:13px; line-height:1.5; }

.climate-popup .cp-name { font-size:15px; font-weight:700; color:#0B1F44; }
.climate-popup .cp-meta { font-size:11px; color:#53657D; margin-top:1px; }
.climate-popup .cp-stats { margin:8px 0; }
.climate-popup .cp-stat-lbl { font-size:11px; color:#53657D; text-transform:uppercase; letter-spacing:.03em; }
.climate-popup .cp-stat-val { display:block; font-size:22px; font-weight:700; color:#0B1F44; }
.climate-popup .cp-level { display:flex; align-items:center; gap:7px; font-size:12px; color:#0B1F44; margin-top:4px; }
.climate-popup .cp-dot { width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.climate-popup .cp-level-range { color:#7A8AA3; }
.climate-popup .cp-nodata { color:#7A8AA3; font-style:italic; }
.climate-popup .vf-btn { margin-top:10px; width:100%; border:none; background:#1677F2; color:#fff; border-radius:10px; padding:9px; font-size:13px; font-weight:600; cursor:pointer; }
.climate-popup .vf-btn:hover { background:#0B4FB3; }
/* IMD category row — shown below the mm value */
.climate-popup .cp-imd-row { display:flex; align-items:center; gap:7px; margin-top:6px; padding:5px 8px; background:#F1F5F9; border-radius:8px; }
.climate-popup .cp-imd-dot { width:12px; height:12px; border-radius:3px; flex:0 0 auto; }
.climate-popup .cp-imd-label { font-size:12px; font-weight:700; color:#0B1F44; flex:1; }
.climate-popup .cp-imd-range { font-size:11px; color:#53657D; white-space:nowrap; font-variant-numeric:tabular-nums; }
.climate-popup .cp-pmfby { margin-top:8px; padding:7px 8px; background:#F8FAFC; border:1px solid #E2E8F0; border-radius:8px; font-size:12px; color:#0B1F44; }
.climate-popup .cp-pmfby .muted { color:#53657D; }
.climate-popup .cp-pmfby-station-lbl { margin-top:6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; }
.climate-popup .cp-pmfby-station { font-weight:700; }
.cp-loading { color:#7A8AA3; font-size:13px; padding:4px; }

/* Rainfall weather-station dots: plain white circles for wet and dry readings. */
.station-dot-dry {
  filter:drop-shadow(0 1px 3px rgba(15,35,70,.35));
}
.station-dot-dry:hover {
  filter:drop-shadow(0 2px 5px rgba(15,35,70,.55));
}

/* Temperature stations are coloured per-station by the IMD temperature band. */
.station-dot-temp {
  filter:drop-shadow(0 1px 3px rgba(15,35,70,.35));
}
.station-dot-temp:hover {
  filter:drop-shadow(0 2px 5px rgba(15,35,70,.55));
}

.station-observation-popup .leaflet-popup-content-wrapper {
  padding:0; overflow:hidden; border:1px solid #D8E5F3; border-radius:16px;
  box-shadow:0 16px 40px rgba(11,31,68,.22);
}
.station-observation-popup { translate:0 40px; }
.station-observation-popup .leaflet-popup-tip-container { display:none; }
.station-observation-popup .leaflet-popup-content { margin:0; width:310px !important; }
.station-observation-popup .leaflet-popup-tip { background:#fff; }
.station-observation-popup .leaflet-popup-close-button {
  top:8px !important; right:9px !important; z-index:2; color:#DCEAFF !important;
  font-size:21px !important;
}
.station-popup { color:#0B1F44; line-height:1.4; }
.station-popup .sp-header { padding:14px 16px 13px; color:#fff; background:linear-gradient(135deg,#0B4FB3,#1677F2); }
.station-popup .sp-eyebrow { font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#CFE4FF; }
.station-popup .sp-title { margin-top:2px; font-size:17px; line-height:1.2; font-weight:750; }
.station-popup .sp-time { margin-top:4px; font-size:10.5px; color:#EAF4FF; }
.station-popup .sp-body { padding:12px 14px 13px; background:#fff; }
.station-popup .sp-icon {
  width:14px; height:14px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.station-popup .sp-location { display:flex; align-items:center; gap:6px; color:#53657D; font-size:11.5px; font-weight:600; }
.station-popup .sp-location .sp-icon { color:#1677F2; }
.station-popup .sp-station-box {
  display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px;
  margin-top:9px; padding:10px; background:#F7FAFE; border:1px solid #E4ECF5; border-radius:11px;
}
.station-popup .sp-station-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:#1677F2; background:#EAF4FF; border-radius:9px; }
.station-popup .sp-station-icon .sp-icon { width:18px; height:18px; }
.station-popup .sp-field-label { display:flex; align-items:center; gap:5px; color:#53657D; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.station-popup .sp-station-name { color:#0B1F44; font-size:13.5px; font-weight:750; overflow-wrap:anywhere; }
.station-popup .sp-station-type { color:#7A8AA3; font-size:10px; font-weight:600; }
.station-popup .sp-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
.station-popup .sp-cell { min-width:0; padding:8px 9px; background:#fff; border:1px solid #E4ECF5; border-radius:10px; }
.station-popup .sp-cell .sp-icon { color:#1677F2; }
.station-popup .sp-cell-rain { background:#EAF4FF; border-color:#CFE4FF; }
.station-popup .sp-field-value { margin-top:4px; color:#0B1F44; font-size:17px; line-height:1.2; font-weight:750; font-variant-numeric:tabular-nums; }
.station-popup .sp-text-value { font-size:12px; line-height:1.3; overflow-wrap:anywhere; }
.station-popup .sp-unit { color:#53657D; font-size:10px; font-weight:650; }
.station-popup .sp-missing { color:#7A8AA3; }
.station-popup .sp-arg-note { display:flex; gap:7px; margin-top:9px; padding:8px 9px; color:#53657D; background:#FFF8E6; border:1px solid #F5E3B3; border-radius:9px; font-size:10.5px; line-height:1.4; }
.station-popup .sp-arg-note .sp-icon { margin-top:1px; color:#B7791F; }
.station-popup .sp-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid #E4ECF5; color:#7A8AA3; font-size:10px; }
.station-popup .sp-footer a { display:inline-flex; align-items:center; gap:4px; color:#1677F2; font-weight:700; text-decoration:none; white-space:nowrap; }
.station-popup .sp-footer a:hover { color:#0B4FB3; text-decoration:underline; }
.station-popup .sp-footer .sp-icon { width:11px; height:11px; }

body.station-popup-open .map-top { visibility:hidden; }

@media (max-width:700px) {
  .station-observation-popup { translate:12px 60px; }
}

/* ── Hover tooltip ── */
.village-tooltip {
  background:#0B1F44; color:#fff; border:none; border-radius:8px; font-size:11px;
  padding:5px 9px; box-shadow:0 4px 14px rgba(15,35,70,.25);
}
.village-tooltip .vt-tip strong { font-size:12px; }
.village-tooltip .vt-sub { display:block; font-size:10px; color:#A7BBDD; margin-top:1px; }
.village-tooltip .vt-nodata { color:#cbd5e1; font-style:italic; }
.village-tooltip .vt-hint { color:#7f9bcf; font-style:italic; font-size:10px; }
.village-tooltip.leaflet-tooltip-top:before { border-top-color:#0B1F44; }
.village-tooltip.leaflet-tooltip-bottom:before { border-bottom-color:#0B1F44; }
.village-tooltip.leaflet-tooltip-left:before { border-left-color:#0B1F44; }
.village-tooltip.leaflet-tooltip-right:before { border-right-color:#0B1F44; }

/* ── State labels on map ── */
.state-label { background:transparent; border:none; box-shadow:none; color:#0B1F44; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 9px #fff; }
.state-label:before { display:none; }

/* ── Selected-village permanent label ────────────────────────────────────── */
.village-selected-label {
  background: #0f172a;
  border: 2px solid #facc15;
  border-radius: 6px;
  color: #facc15;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  pointer-events: none;
}
.village-selected-label.leaflet-tooltip-top::before {
  border-top-color: #facc15;
}

/* ── IMD hatch-pattern overlay on village polygons ─────────────────────────
   The hatching itself is drawn as SVG <pattern> fills (see map-reports.js
   ensureImdPatternDefs / _refreshVillagePatternOverlay) directly inside the
   Leaflet SVG renderer's <svg> — no CSS classes needed for the texture, it's
   pure SVG geometry layered on top of the canvas-rendered colour fill.
   The overlay paths are already created with interactive:false in JS, but
   this belt-and-braces rule also keeps the whole pane out of the hit-test
   path so it never blocks clicks/hovers on the village polygons beneath it. */
.leaflet-pane.leaflet-overlay-pane path[fill^="url(#imd-pattern"] {
  pointer-events: none;
}