/* ──────────────────────────────────────────────────────────────
   App-level styles on top of Tailwind + daisyUI.
   Brand overrides (Eldoret green / gold) + Leaflet ⇄ daisyUI glue.
   ────────────────────────────────────────────────────────────── */

/* Brand colours for the two daisyUI themes we use (oklch triplets) */
[data-theme="corporate"] {
  --p: 47% 0.12 158;      /* Eldoret green #0a6b3a */
  --pc: 98% 0.01 158;
  --s: 76% 0.15 85;       /* Eldoret gold  #d4a017 */
  --sc: 25% 0.05 85;
  --rounded-btn: 0.5rem;
}
[data-theme="business"] {
  --p: 52% 0.13 158;
  --pc: 98% 0.01 158;
  --s: 80% 0.15 85;
  --sc: 22% 0.05 85;
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  margin-bottom: 0.4rem;
}

.layer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  padding: 3px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.layer-row:hover { background: oklch(var(--b2)); }
.sw { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.15); }
.sw.line { height: 3px; border-radius: 2px; border: 0; }
.sw.line.dashed { background-image: linear-gradient(90deg, transparent 0 30%, oklch(var(--b1)) 30% 45%, transparent 45%); }
.sw.dot { border-radius: 50%; width: 12px; height: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }

/* Definition list used in detail panels */
.dl { display: grid; grid-template-columns: 42% 1fr; row-gap: 4px; column-gap: 8px; font-size: 13px; }
.dl dt { opacity: 0.6; }
.dl dd { margin: 0; font-weight: 500; word-break: break-word; }

/* ── Leaflet integration ─────────────────────────────────────── */
.leaflet-container { font-family: inherit; }
.leaflet-container a { color: oklch(var(--p)); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: oklch(var(--b1));
  color: oklch(var(--bc));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.leaflet-popup-content-wrapper { border-radius: 0.75rem; }
.leaflet-popup-content { margin: 12px 14px; line-height: 1.45; }
.leaflet-popup-close-button { color: oklch(var(--bc)) !important; }
.leaflet-bar { border: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,.2) !important; border-radius: 0.5rem !important; overflow: hidden; }
.leaflet-bar a,
.leaflet-bar a:hover {
  background: oklch(var(--b1));
  color: oklch(var(--bc));
  border-bottom: 1px solid oklch(var(--b3));
  width: 34px; height: 34px; line-height: 34px;
}
.leaflet-bar a:last-child { border-bottom: 0; }
.leaflet-bar a:hover { background: oklch(var(--b2)); }
.leaflet-bar a.leaflet-disabled { opacity: .4; }
.leaflet-ctl-btn { font-size: 16px; display: grid !important; place-items: center; }
.leaflet-control-scale-line {
  background: oklch(var(--b1) / .85);
  color: oklch(var(--bc));
  border-color: oklch(var(--bc) / .5);
}
.leaflet-control-attribution {
  background: oklch(var(--b1) / .85) !important;
  color: oklch(var(--bc)) !important;
  font-size: 10px;
}
.leaflet-container .leaflet-control-attribution a { color: oklch(var(--p)); }

/* Tailwind preflight sets img{display:block;max-width:100%} — keep tiles crisp */
.leaflet-container img.leaflet-tile { max-width: none !important; }
.leaflet-container .leaflet-marker-icon { max-width: none; }

/* Key-free light/dark basemaps: OSM tiles restyled with filters */
.tiles-light { filter: grayscale(1) brightness(1.06) contrast(0.88); }
.tiles-dark  { filter: invert(1) hue-rotate(180deg) grayscale(0.55) brightness(0.85) contrast(0.95); }

/* Address number labels */
.addr-label { background: oklch(var(--b1)); color: oklch(var(--bc)); border: 1px solid oklch(var(--bc) / .3); border-radius: 4px; padding: 0 4px; font: 700 11px/16px ui-monospace, monospace; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.addr-label::before { display: none; }

/* Pulse for the selected address marker */
@keyframes eld-pulse { 0% { transform: scale(1); opacity: .9 } 100% { transform: scale(2.6); opacity: 0 } }
.eld-pulse { border-radius: 50%; background: #d4a017; animation: eld-pulse 1.4s ease-out infinite; }

/* Print: only the record card */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
}