/* ============================================================================
 * Cadrify Maps — shared Leaflet skin
 *
 * Loaded globally (base.html) after cadrify.css. Everything here is scoped to
 * Leaflet's own container/control classes, so it only touches map surfaces and
 * never bleeds into the rest of the UI. Colour tokens come from cadrify.css.
 *
 *   1. Basemap   — mute the OSM tiles so they sit behind, not in front of, data
 *   2. Chrome     — zoom / attribution / scale controls
 *   3. Popups + tooltips
 *   4. Legend     — .leaflet-legend (existing) + .cadrify-legend (new)
 *   5. Round labels
 * ========================================================================== */

/* ── 1. Basemap ────────────────────────────────────────────────────────────
 * The single biggest brand win: the raw OSM palette is bright and clashes with
 * Cadrify's paper/ink surfaces. Desaturate + warm it so data markers read as
 * the foreground. Filtering the whole tile pane (not each tile) avoids seams. */
.leaflet-container { background: var(--map-water); }
.leaflet-tile-pane { filter: var(--map-basemap-filter); }

.leaflet-container { font-family: var(--font-sans); }

/* ── 2. Chrome ─────────────────────────────────────────────────────────── */

/* Zoom */
.leaflet-control-zoom {
  border: 1px solid var(--ink-12); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(14,26,43,.06); overflow: hidden;
}
.leaflet-control-zoom a {
  background: var(--surface-overlay); color: var(--fg-default);
  width: 30px; height: 30px; line-height: 30px;
  border-bottom: 1px solid var(--ink-12);
  font: 400 16px/30px var(--font-sans);
}
.leaflet-control-zoom a:last-child { border-bottom: none; }
.leaflet-control-zoom a:hover { background: var(--ink-04); color: var(--fg-default); }
.leaflet-control-zoom a.leaflet-disabled { background: var(--ink-04); color: var(--fg-subtle); }

/* Attribution */
.leaflet-control-attribution {
  background: var(--surface-2); color: var(--fg-muted);
  font: 400 11px/1.5 var(--font-mono);
  border: 1px solid var(--ink-12); border-right: none; border-bottom: none;
  border-top-left-radius: 2px; padding: 2px 8px; box-shadow: none;
}
.leaflet-control-attribution a { color: var(--fg-muted); }

/* Scale bar */
.leaflet-control-scale-line {
  background: var(--surface-2); color: var(--fg-default);
  border: 1px solid var(--ink-20); border-top: none; border-radius: 0 0 2px 2px;
  font: 400 11px/1.4 var(--font-mono); padding: 1px 6px; box-shadow: none;
}

/* ── 3. Popups + tooltips ──────────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  background: var(--surface-overlay); color: var(--fg-default);
  border: 1px solid var(--ink-12); border-radius: 4px;
  box-shadow: 0 2px 4px rgba(14,26,43,.06), 0 8px 16px rgba(14,26,43,.06);
}
.leaflet-popup-content { margin: 11px 13px; font: 400 13px/1.4 var(--font-sans); }
.leaflet-popup-tip { background: var(--surface-overlay); border: 1px solid var(--ink-12); box-shadow: none; }
.leaflet-popup-close-button { color: var(--fg-subtle); }
.leaflet-popup-close-button:hover { color: var(--fg-default); }

.leaflet-tooltip {
  background: var(--surface-overlay); color: var(--fg-default);
  border: 1px solid var(--ink-12); border-radius: 3px;
  box-shadow: 0 1px 3px rgba(14,26,43,.12);
  font: 400 12px/1.4 var(--font-sans); padding: 4px 8px;
}
.leaflet-tooltip-top::before { border-top-color: var(--ink-12); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--ink-12); }
.leaflet-tooltip-left::before { border-left-color: var(--ink-12); }
.leaflet-tooltip-right::before { border-right-color: var(--ink-12); }

/* Popup content helpers (used by branded popups) */
.pop-eyebrow { font: 400 10px/1.2 var(--font-mono); letter-spacing: .03em; color: var(--fg-muted); text-transform: uppercase; }
.pop-title { font: 600 13px/1.3 var(--font-sans); color: var(--fg-default); margin: 4px 0 6px; }
.pop-meta { display: flex; align-items: center; gap: 7px; font: 400 12px/1 var(--font-sans); color: var(--fg-default); }
.pop-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink-12); flex: none; }

/* ── 4. Legend ─────────────────────────────────────────────────────────── */
/* Existing inline legends use .leaflet-legend; restyle in place. */
.leaflet-legend {
  background: var(--surface-overlay); border: 1px solid var(--ink-12); border-radius: 4px;
  box-shadow: 0 2px 4px rgba(14,26,43,.06), 0 8px 16px rgba(14,26,43,.06);
  padding: 10px 13px; font: 400 12px/1.7 var(--font-sans); color: var(--fg-default);
  max-height: 320px; overflow-y: auto;
}
.leaflet-legend .legend-ward-label { font-weight: 600; margin-top: 4px; display: block; color: var(--fg-default); }

/* New branded legend control */
.cadrify-legend {
  background: var(--surface-overlay); border: 1px solid var(--ink-12); border-radius: 4px;
  box-shadow: 0 2px 4px rgba(14,26,43,.06), 0 8px 16px rgba(14,26,43,.06);
  padding: 12px 14px; min-width: 200px;
}
.cadrify-legend .lg-eyebrow { font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); margin-bottom: 9px; }
.cadrify-legend .lg-rows { display: flex; flex-direction: column; gap: 6px; }
.cadrify-legend .lg-row { display: flex; align-items: center; gap: 9px; font: 400 12px/1 var(--font-sans); color: var(--fg-default); }
.cadrify-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink-12); flex: none; }

/* ── 5. Round labels ───────────────────────────────────────────────────── */
.round-label-wrap { background: none; border: none; }
.round-label {
  display: inline-block; font: 500 10px/1 var(--font-mono); letter-spacing: .04em;
  color: var(--fg-default); background: var(--surface-overlay);
  border: 1px solid var(--ink-12); border-radius: 2px; padding: 2px 5px; white-space: nowrap;
}

/* ============================================================================
 * MapLibre GL JS skin (mirrors the Leaflet rules above for the migrated maps).
 * Positron is already a muted greyscale basemap, so no tile-filter hack here.
 * ========================================================================== */
.maplibregl-map { font-family: var(--font-sans); background: var(--map-water); }

/* Dark mode: invert the Positron vector canvas so the basemap reads dark.
   Light mode leaves Positron untouched (it is already a muted greyscale). The
   filter resolves to `none` in light via --map-basemap-filter on the canvas
   wrapper, so we scope it to dark to avoid touching the light basemap. */
html[data-theme="dark"] .maplibregl-canvas { filter: var(--map-basemap-filter); }

/* Shown in the map container when WebGL is unavailable (CadrifyMap.create). */
.cadrify-map-unavailable {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; justify-content: center;
  height: 100%; min-height: 160px; padding: 20px 24px;
  background: var(--surface-2);
  border: 1px solid var(--ink-12); border-radius: var(--radius-md, 4px);
}
.cadrify-map-unavailable strong { font: 600 14px/1.3 var(--font-sans); color: var(--fg-default); }
.cadrify-map-unavailable span { font: 400 13px/1.5 var(--font-sans); color: var(--fg-muted); max-width: 46ch; }

/* Controls (zoom / scale) */
.maplibregl-ctrl-group {
  border: 1px solid var(--ink-12); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(14,26,43,.06); overflow: hidden; background: var(--surface-overlay);
}
.maplibregl-ctrl-group button {
  width: 30px; height: 30px; background: var(--surface-overlay);
  border-bottom: 1px solid var(--ink-12);
}
.maplibregl-ctrl-group button:last-child { border-bottom: none; }
.maplibregl-ctrl-group button:hover { background: var(--ink-04); }

/* Attribution */
.maplibregl-ctrl-attrib {
  background: var(--surface-2); color: var(--fg-muted);
  font: 400 11px/1.5 var(--font-mono); box-shadow: none;
}
.maplibregl-ctrl-attrib a { color: var(--fg-muted); }
.maplibregl-ctrl-attrib.maplibregl-compact { border: 1px solid var(--ink-12); border-radius: 2px; }

/* Scale bar */
.maplibregl-ctrl-scale {
  background: var(--surface-2); color: var(--fg-default);
  border: 1px solid var(--ink-20); border-top: none; border-radius: 0 0 2px 2px;
  font: 400 11px/1.4 var(--font-mono); box-shadow: none;
}

/* Popups (CadrifyMap.popup adds .cadrify-popup) */
.maplibregl-popup-content {
  background: var(--surface-overlay); color: var(--fg-default);
  border: 1px solid var(--ink-12); border-radius: 4px;
  box-shadow: 0 2px 4px rgba(14,26,43,.06), 0 8px 16px rgba(14,26,43,.06);
  padding: 11px 13px; font: 400 13px/1.4 var(--font-sans);
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--surface-overlay); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--surface-overlay); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface-overlay); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface-overlay); }
.maplibregl-popup-close-button { color: var(--fg-subtle); font-size: 16px; padding: 0 5px; }
.maplibregl-popup-close-button:hover { color: var(--fg-default); background: none; }