/* ============================================================================
 * LayerSwitcher visual refresh (Option A — cherry-picked UX wins)
 *
 * MINIMALLY INVASIVE rewrite — only changes colours / shadows / borders /
 * fonts. We do NOT touch layout (no display/float/position/padding/margin
 * overrides on the existing rows), because ol-ext relies on a specific
 * internal flow: buttons + opacity slider float right, the chevron icons
 * use absolute-positioned pseudo-elements within their button container,
 * and the checkbox / radio is drawn via label::before / label::after.
 *
 * Earlier aggressive overrides broke that flow — restoring the chevron
 * means treating ol-ext's stock layout as a working contract and only
 * skinning the surface.
 * ============================================================================ */

:root {
  --ls-accent:        var(--brand-green-bright, #41b6a6);
  --ls-accent-strong: var(--brand-blue-strong, #005eb8);
  --ls-text:          var(--brand-navy, #1e1a4b);
  --ls-text-muted:    var(--brand-gray-medium, #7a7a7a);
  --ls-text-dim:      #98a2b3;
  --ls-surface:       rgba(255, 255, 255, 0.97);
  --ls-surface-2:     #f9fafc;
  --ls-border:        rgba(30, 26, 75, 0.10);
  --ls-border-strong: rgba(30, 26, 75, 0.22);
  --ls-shadow:        0 12px 38px rgba(30, 26, 75, 0.18), 0 2px 8px rgba(30, 26, 75, 0.08);
  --ls-shadow-sm:     0 2px 8px rgba(30, 26, 75, 0.10);
  --ls-radius:        14px;
  --ls-radius-sm:     9px;
  --ls-transition:    .18s cubic-bezier(.4, 0, .2, 1);
  --ls-font:          'Exo', var(--font-sans, system-ui, sans-serif);
  --ls-font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================================
   PANEL CONTAINER + COLLAPSE BUTTON
   ============================================================================ */

.ol-layerswitcher {
  font-family: var(--ls-font);
}

/* Collapse-toggle button — branded with the LUSPA logo instead of ol-ext's
   stack-of-papers pseudo glyph.
   The background-image URL is set from JavaScript in MapView.js so Vite can
   resolve it against `import.meta.env.BASE_URL` — that way the icon works
   whether the app is deployed at the domain root or under a sub-path. */
.ol-layerswitcher > button {
  background-color: var(--ls-surface) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  border: 1px solid var(--ls-border);
  color: var(--ls-text);
  border-radius: var(--ls-radius-sm);
  width: 36px;
  height: 36px;
  backdrop-filter: blur(14px);
  box-shadow: var(--ls-shadow-sm);
  transition: background-color var(--ls-transition), border-color var(--ls-transition),
              transform .12s;
}
.ol-layerswitcher > button:hover {
  background-color: rgba(65, 182, 166, 0.10) !important;
  border-color: var(--ls-accent);
  transform: scale(1.04);
}

/* Suppress ol-ext's stack-of-papers pseudo glyph
   (ol-ext.css line ~2153: .ol-layerswitcher > button:before/:after) */
.ol-layerswitcher > button::before,
.ol-layerswitcher > button::after {
  display: none !important;
  content: none !important;
}

.ol-layerswitcher .panel-container {
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius);
  backdrop-filter: blur(16px);
  box-shadow: var(--ls-shadow);
  color: var(--ls-text);
  font-size: 13px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The <ul.panel> — scrollable; keep ol-ext's padding intact for the chevron
   pseudos to space correctly */
.ol-layerswitcher .panel-container > ul.panel {
  background: transparent;
  border: none;
  overflow-y: auto;
  flex: 1 1 auto;
  margin: 0;
}
.ol-layerswitcher .panel-container > ul.panel::-webkit-scrollbar { width: 4px; }
.ol-layerswitcher .panel-container > ul.panel::-webkit-scrollbar-thumb {
  background: var(--ls-border-strong);
  border-radius: 4px;
}

/* Hide ol-ext's "Map" header LI — we render our own active-count badge */
.ol-layerswitcher .panel li.ol-header {
  display: none;
}

/* ============================================================================
   LIST ITEMS — colours only, no layout changes
   ============================================================================ */

.ol-layerswitcher .panel li {
  border-left: 2px solid transparent;
  transition: background var(--ls-transition), border-color var(--ls-transition);
}
.ol-layerswitcher .panel li:hover {
  background: rgba(65, 182, 166, 0.06);
}
.ol-layerswitcher .panel li.ol-visible:not(.baselayer) {
  border-left-color: var(--ls-accent);
}
.ol-layerswitcher .panel li.ol-layer-group > .li-content {
  background: rgba(30, 26, 75, 0.03);
}
.ol-layerswitcher .panel li.ol-layer-group > .li-content label > span {
  font-weight: 600;
}

/* Label and label text colour — keep ol-ext's `padding-left: 1.7em` so the
   checkbox pseudo sits in its expected slot. */
.ol-layerswitcher .panel li label {
  color: var(--ls-text);
}
.ol-layerswitcher .panel li label > span {
  color: var(--ls-text);
}

/* ============================================================================
   CHECKBOX / RADIO — pseudo-elements on the LABEL (input is 0×0, hidden)
   Just recolour ol-ext's existing pseudos.
   ============================================================================ */

/* Box outline (unchecked) — clearly visible against the panel background.
   ol-ext sets it to a 2 px navy-blue border by default; we recolour to a
   medium grey that's readable both at rest and on hover. */
.ol-layerswitcher [type="checkbox"] + label:before,
.ol-layerswitcher [type="radio"] + label:before {
  border-color: #9ca3af !important;     /* visible grey (Tailwind gray-400) */
  border-width: 2px !important;
  background: #fff !important;
  transition: border-color var(--ls-transition), background var(--ls-transition);
}
.ol-layerswitcher .panel li:hover [type="checkbox"] + label:before,
.ol-layerswitcher .panel li:hover [type="radio"] + label:before {
  border-color: var(--ls-accent) !important;
}

/* Checkbox checked — accent-filled box, white tick.
   IMPORTANT: these rules must use !important too, otherwise they lose to
   the base unchecked rule (which also uses !important to override ol-ext). */
.ol-layerswitcher [type="checkbox"]:checked + label:before {
  background: var(--ls-accent) !important;
  border-color: var(--ls-accent) !important;
}
.ol-layerswitcher [type="checkbox"]:checked + label:after {
  border-color: #fff !important;
  box-shadow: none !important;
}

/* Radio checked — strong-blue dot */
.ol-layerswitcher [type="radio"]:checked + label:before {
  border-color: var(--ls-accent-strong) !important;
}
.ol-layerswitcher [type="radio"]:checked + label:after {
  background: var(--ls-accent-strong) !important;
}

/* Focus ring */
.ol-layerswitcher li:has(> div.li-content > .ol-visibility:focus) {
  border-color: var(--ls-accent);
  box-shadow: inset 0 0 0 1px var(--ls-accent);
}

/* ============================================================================
   ACTION BUTTONS (Extent, Info, Trash, Expand/Collapse)
   Each button has a solid `background: #369` from ol-ext stock + white pseudo
   glyphs. We recolour the background to a softer accent — the white pseudos
   stay visible.

   .expend-layers / .collapse-layers are special: their parent background is
   already transparent and the pseudo BARS are #369. We recolour those bars
   to our accent so the "+" / "−" chevron uses the brand palette.
   ============================================================================ */

.ol-layerswitcher .layerInfo,
.ol-layerswitcher .layerTrash,
.ol-layerswitcher .layerExtent,
.ol-layerswitcher .layerup {
  background: var(--ls-accent-strong);
  border-radius: 4px;
  transition: background var(--ls-transition), transform .12s;
}
.ol-layerswitcher .layerInfo:hover,
.ol-layerswitcher .layerTrash:hover,
.ol-layerswitcher .layerExtent:hover,
.ol-layerswitcher .layerup:hover {
  background: var(--ls-accent);
  transform: scale(1.08);
}

/* layerInfo round badge — keep ol-ext's `border-radius: 100%` */
.ol-layerswitcher .layerInfo {
  border-radius: 100%;
}

/* Replace ol-ext's bar-drawn "+" / "−" with the GeoView-style chevron SVG.
   Approach:
     • Hide ol-ext's ::before/::after bars (we don't want them).
     • The chevron <div> hosts an injected <svg> (see drawlist handler).
     • The SVG uses stroke="currentColor", so a CSS `color` rule tints it.
     • .expend-layers is the collapsed state (chevron right ▶).
     • .collapse-layers is the expanded state — rotate 90° to point down ▼.
*/
.ol-layerswitcher .expend-layers:before,
.ol-layerswitcher .expend-layers:after,
.ol-layerswitcher .collapse-layers:before,
.ol-layerswitcher .collapse-layers:after {
  display: none !important;
}

.ol-layerswitcher .expend-layers,
.ol-layerswitcher .collapse-layers {
  background-color: transparent !important;
  color: var(--ls-accent-strong);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: color var(--ls-transition), transform var(--ls-transition);
}

.ol-layerswitcher .expend-layers > svg.ls-chevron-svg,
.ol-layerswitcher .collapse-layers > svg.ls-chevron-svg {
  pointer-events: none; /* keep the parent div the click target */
  display: block;
}

.ol-layerswitcher .collapse-layers {
  transform: rotate(90deg);
}

.ol-layerswitcher .expend-layers:hover,
.ol-layerswitcher .collapse-layers:hover {
  color: var(--ls-accent);
}

/* ============================================================================
   OPACITY SLIDER — recolour, don't relayout
   The slider lives inside `.li-content`, after the label.
   ============================================================================ */

.ol-layerswitcher .layerswitcher-opacity {
  background: rgba(30, 26, 75, 0.10);
  border-radius: 3px;
  height: 4px;
  margin-top: 4px;
}
.ol-layerswitcher .layerswitcher-opacity-cursor {
  background: var(--ls-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(30, 26, 75, 0.25);
}
.ol-layerswitcher .layerswitcher-opacity-label {
  color: var(--ls-text-dim);
  font-family: var(--ls-font-mono);
  font-size: 10px;
}

/* Hide the opacity slider for group and base layer rows — they don't need it.
   Correct selector: it lives inside `.li-content`, not as a direct child of li. */
.ol-layerswitcher .panel li.ol-layer-group > .li-content > .layerswitcher-opacity,
.ol-layerswitcher .panel li.ol-layer-group > .li-content > .layerswitcher-opacity-label,
.ol-layerswitcher .panel li.baselayer > .li-content > .layerswitcher-opacity,
.ol-layerswitcher .panel li.baselayer > .li-content > .layerswitcher-opacity-label {
  display: none;
}

/* ============================================================================
   INJECTED ELEMENTS — populated by MapView's drawlist handler
   ============================================================================ */

/* Layer info — subtitle text below the layer name (e.g. "Vector / Polygon").
   Injected per-layer when `layer.get('typeDescription')` is set. */
.ls-layer-subtitle {
  display: block;
  font-family: var(--ls-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ls-text-dim);
  line-height: 1.3;
  margin: 2px 0 4px 1.8em; /* indent under label, past the checkbox pseudo */
  pointer-events: none;
}

/* Per-layer Remove button (×) — only injected for layers with `removable: true`.
   Sits next to ol-ext's own buttons inside `.ol-layerswitcher-buttons`. */
.ls-remove-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 2px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ls-text-dim);
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--ls-transition), color var(--ls-transition),
              border-color var(--ls-transition);
}
.ls-remove-btn:hover {
  background: rgba(220, 38, 38, 0.10);
  border-color: rgba(220, 38, 38, 0.55);
  color: #dc2626;
}
.ls-remove-btn svg {
  display: block;
  pointer-events: none;
}

/* Type-tag chip — appended INSIDE the label's <span>; floated tightly */
.ls-type-tag {
  display: inline-block;
  font-family: var(--ls-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.4;
  margin-left: 6px;
  vertical-align: middle;
}
.ls-type-tag-wms  { background: rgba(0, 94, 184, 0.13);   color: #005eb8; }
.ls-type-tag-wfs  { background: rgba(168, 85, 247, 0.14); color: #8b3cd9; }
.ls-type-tag-xyz  { background: rgba(255, 158, 27, 0.18); color: #b25c00; }
.ls-type-tag-vec  { background: rgba(65, 182, 166, 0.15); color: #218778; }
.ls-type-tag-geo  { background: rgba(0, 107, 63, 0.13);   color: #006b3f; }
.ls-type-tag-base { background: rgba(30, 26, 75, 0.08);   color: #1e1a4b; }

/* Import-state chip — rendered on layers that came in via a shp/GeoJSON/KML
   import (see LUPMIS2_Import_Upload_Design.docx §3.2). Sits to the right of
   the type-tag chip on the same row. Click behaviour is wired in MapView's
   _decorateLayerListItem and in main.js. */
.ls-import-chip {
  display: inline-block;
  font-family: var(--ls-font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  line-height: 1.4;
  margin-left: 6px;
  vertical-align: middle;
  user-select: none;
}
.ls-import-chip-mapped    { background: rgba(0, 94, 184, 0.16);   color: #005eb8; }
.ls-import-chip-mapped:hover { background: rgba(0, 94, 184, 0.26); }
.ls-import-chip-uploading { background: rgba(107, 114, 128, 0.18); color: #4b5563; }
/* submitted = row exists in lu_parcels_upload_tmp, awaiting supervisor review */
.ls-import-chip-submitted { background: rgba(245, 158, 11, 0.18); color: #b45309; }
/* migrated = supervisor approved and promoted to the live lu_parcels table */
.ls-import-chip-migrated  { background: rgba(16, 185, 129, 0.18); color: #058a4e; }
.ls-import-chip-failed    { background: rgba(220, 38, 38, 0.18);  color: #b91c1c; }
.ls-import-chip-failed:hover { background: rgba(220, 38, 38, 0.28); }

/* Header "active count" badge — sits at top of panel-container, before the <ul> */
.ls-active-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--ls-border);
  background: var(--ls-surface-2);
}
.ls-active-badge-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-text-muted);
}
.ls-active-badge-count {
  font-family: var(--ls-font-mono);
  font-size: 10px;
  color: var(--ls-accent);
  background: rgba(65, 182, 166, 0.12);
  border: 1px solid rgba(65, 182, 166, 0.30);
  border-radius: 20px;
  padding: 1px 8px;
  font-weight: 600;
  white-space: nowrap;
}

/* Footer row — sits at bottom of panel-container, after the <ul> */
.ls-footer-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--ls-border);
  background: var(--ls-surface-2);
  /* Defensive: never let the row contents overflow the panel width */
  min-width: 0;
}
.ls-footer-note {
  font-family: var(--ls-font-mono);
  font-size: 9.5px;
  color: var(--ls-text-dim);
  /* Truncate gracefully if the count grows long */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* IMPORTANT: OpenLayers' own stylesheet forces every <button> inside an
   .ol-control to a fixed 1.375em × 1.375em square (ol/ol.css `.ol-control
   button`). Without these overrides our text-bearing footer button shrinks
   to ~18 px and the label spills out (looking like an overlapping checkbox). */
.ls-footer-btn {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  line-height: 1 !important;
  margin: 0 !important;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--ls-font);
  color: var(--ls-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--ls-border-strong) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ls-transition), color var(--ls-transition),
              border-color var(--ls-transition);
}
.ls-footer-btn:hover {
  background: rgba(65, 182, 166, 0.10) !important;
  border-color: var(--ls-accent) !important;
  color: var(--ls-accent) !important;
}

/* ============================================================================
   BASE-MAP PICKER  (separate floating button + thumbnail panel)
   ============================================================================ */

/* Toggle button — stacked directly above the My Location control.
   LUSPA overrides ol-ext's default in index.html:
       .ol-geobt        { bottom: 90 px; right: 10 px; }
       .ol-geobt button { min-width: 44 px; min-height: 44 px; }
   So the My Location button occupies 90 px → ~140 px from the bottom.
   We anchor this button at bottom: 144 px (8 px gap above) and use the
   same right: 10 px so they line up vertically on the right edge. */
.ls-basemap-toggle {
  position: absolute;
  right: 10px;
  bottom: 144px;             /* 90 px (anchor) + 44 px (button) + 10 px gap */
  z-index: 1000;             /* above ol-ext controls (which sit at ~1) */
  width: 44px;               /* match LUSPA's .ol-geobt button (44 × 44) */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius-sm);
  color: var(--ls-text);
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow: var(--ls-shadow-sm);
  transition: background var(--ls-transition), color var(--ls-transition),
              border-color var(--ls-transition);
}

/* Bump the SVG icon slightly to balance the larger 44 × 44 button */
.ls-basemap-toggle svg {
  width: 22px;
  height: 22px;
}
.ls-basemap-toggle:hover,
.ls-basemap-toggle.active {
  background: rgba(65, 182, 166, 0.10);
  border-color: var(--ls-accent);
  color: var(--ls-accent);
}
.ls-basemap-toggle svg { display: block; pointer-events: none; }

/* The slide-out picker panel — sits to the LEFT of the button (since the
   button is anchored to the right edge) */
.ls-basemap-panel {
  position: absolute;
  right: 62px;     /* 10 px (button right) + 44 px (button width) + 8 px gap */
  bottom: 144px;   /* match the button */
  z-index: 1000;
  width: 250px;
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
  backdrop-filter: blur(16px);
  padding: 10px 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity .14s ease, transform .14s ease;
}
.ls-basemap-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
/* Touch mode keeps the same offsets because LUSPA's custom .ol-geobt button
   is already a 44 × 44 px touch target. */

.ls-basemap-header {
  font-family: var(--ls-font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ls-border);
}

.ls-basemap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ls-bm-chip {
  position: relative;
  cursor: pointer;
  display: block;
  margin: 0;
}
.ls-bm-chip input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.ls-bm-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 5px 6px;
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius-sm);
  background: rgba(30, 26, 75, 0.02);
  cursor: pointer;
  transition: background var(--ls-transition), border-color var(--ls-transition);
}
.ls-bm-chip:hover .ls-bm-label {
  border-color: var(--ls-accent);
}
.ls-bm-chip input:checked + .ls-bm-label {
  background: rgba(65, 182, 166, 0.10);
  border-color: var(--ls-accent);
}
.ls-bm-thumb {
  width: 100%;
  height: 34px;
  border-radius: 4px;
}
.ls-bm-name {
  font-family: var(--ls-font);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ls-text-muted);
  text-align: center;
  line-height: 1.2;
}
.ls-bm-chip input:checked + .ls-bm-label .ls-bm-name {
  color: var(--ls-accent);
  font-weight: 700;
}

/* ============================================================================
   DARK MODE
   ============================================================================ */

body.dark-mode {
  --ls-text:          #e4e9f4;
  --ls-text-muted:    #98a2b3;
  --ls-text-dim:      #6e7e99;
  --ls-surface:       rgba(14, 18, 28, 0.94);
  --ls-surface-2:     #14182a;
  --ls-border:        rgba(255, 255, 255, 0.10);
  --ls-border-strong: rgba(255, 255, 255, 0.22);
}
body.dark-mode .ol-layerswitcher .panel li.ol-layer-group > .li-content {
  background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .ol-layerswitcher [type="radio"] + label:before,
body.dark-mode .ol-layerswitcher [type="checkbox"] + label:before {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: #6b7280 !important;  /* lighter grey in dark mode */
}
body.dark-mode .ls-type-tag-base {
  background: rgba(255, 255, 255, 0.08);
  color: #e4e9f4;
}
