/* SmartLease MapLibre kit: controls, popups and credits that follow the theme and mode. */

.maplibregl-map { font-family: var(--font-sans); }

.maplibregl-ctrl-group {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-1, #e6e1d5);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.maplibregl-ctrl-group button { width: 34px; height: 34px; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--border-1, #e6e1d5); }
[data-mode="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }

.sl-sat-ctrl button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 0 12px;
  color: var(--fg-1, #0b0f16);
  font: 600 12px/1 var(--font-sans);
}
.sl-sat-ctrl svg { width: 16px; height: 16px; }
.sl-sat-ctrl button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-fg, #fff); }

.maplibregl-popup-content {
  padding: 10px 12px;
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated, #fff);
  color: var(--fg-1, #0b0f16);
  border: 1px solid var(--border-1, #e6e1d5);
  box-shadow: var(--shadow-lg);
  font: 12px/1.5 var(--font-sans);
}
.maplibregl-popup-tip { display: none; }
.sl-pop-title { font-weight: 600; font-size: 13px; }
.sl-pop-meta { color: var(--fg-3, #5c6478); }
.sl-pop-code { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3, #5c6478); }

/* maplibre-gl.css paints the expanded credits white with a more specific selector */
.maplibregl-ctrl.maplibregl-ctrl-attrib,
.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact-show {
  background: color-mix(in srgb, var(--bg-page, #fafaf5) 82%, transparent);
  color: var(--fg-3, #5c6478);
  font-size: 10px;
}
.maplibregl-ctrl-attrib a { color: var(--fg-2, #2d3748); }
[data-mode="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* Edge length on a plot boundary (SLMap.plotView) */
.sl-edge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font: 500 11px/1.2 var(--font-mono);
  color: var(--fg-1, #0b0f16);
  background: color-mix(in srgb, var(--bg-elevated, #fff) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
  pointer-events: none;
}

/* Survey beacons on a plot (SLMap.plotView with beacons). */
.sl-beacon { width: 14px; height: 14px; pointer-events: none; }  /* stays absolute (.maplibregl-marker) */
.sl-beacon i { position: absolute; inset: 0; border-radius: 50%; background: var(--bg-card, #fff); border: 2.5px solid var(--color-accent, #C9A84C); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #C9A84C) 30%, transparent), 0 2px 6px rgba(0,0,0,.35); }
.sl-beacon span { position: absolute; left: 16px; top: -14px; padding: 1px 6px; border-radius: 5px; background: rgba(11, 15, 22, 0.78); color: #fff; font: 600 10.5px var(--font-mono, monospace); letter-spacing: 0.04em; white-space: nowrap; }