/* ====== Map page (Leaflet) ====== */

/* Shell peta */
.map-shell{
  width: 100%;
  min-height: calc(100vh - 220px);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
}

/* Intro card atas peta */
.map-intro{ padding:10px; margin-bottom:12px; }
.map-title{ margin:0 0 3px; }

/* Popup konten */
.leaflet-popup-content{ margin:0; }
.cam-popup{ width: min(92vw, 560px); }
.cam-header{
  background:#2f343c; color:#fff; text-align:center; font-weight:700;
  padding:8px 10px; border-radius:10px 10px 0 0; font-size:14px;
}
.cam-title{ margin:0; }
.cam-body{ padding:10px; background:var(--card, #fff); border-radius:0 0 10px 10px; }
.cam-body .video-wrap{ border-radius:8px; overflow:hidden; }
.leaflet-popup-content-wrapper{ background:transparent; box-shadow:0 16px 28px rgba(0,0,0,.25); border-radius:12px; }
.leaflet-popup-tip{ background:transparent; }

/* Legend control */
.leaflet-control.legend{
  background:var(--card, #fff);
  border:1px solid var(--border, #e5e7eb);
  border-radius:12px;
  padding:8px 10px;
  font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.leaflet-control.legend .row{ display:flex; align-items:center; gap:8px; margin:2px 0; }
.leaflet-control.legend .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }

/* === Themeable tooltip for camera names === */

/* default (fallback) */
:root{
  --cctv-tip-bg: rgba(17,24,39,.92); /* #111827 ~ slate-900 */
  --cctv-tip-fg: #fff;
  --cctv-tip-border: rgba(0,0,0,.2);
  --cctv-tip-shadow: rgba(0,0,0,.25);
}

/* light mode */
:root[data-theme="light"]{
  --cctv-tip-bg: rgba(17,24,39,.92); /* tetap gelap agar teks putih terbaca */
  --cctv-tip-fg: #fff;
  --cctv-tip-border: rgba(0,0,0,.2);
  --cctv-tip-shadow: rgba(0,0,0,.25);
}

/* dark mode */
:root[data-theme="dark"]{
  --cctv-tip-bg: rgba(17,24,39,.92);
  --cctv-tip-fg: #fff;
  --cctv-tip-border: rgba(255,255,255,.15);
  --cctv-tip-shadow: rgba(0,0,0,.35);
}

.leaflet-tooltip.cctv-tip{
  background: var(--cctv-tip-bg);
  color: var(--cctv-tip-fg);
  border: 1px solid var(--cctv-tip-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .9rem;
  box-shadow: 0 8px 18px var(--cctv-tip-shadow);
}

/* arah 'top' yang kita pakai */
.leaflet-tooltip.cctv-tip.leaflet-tooltip-top:before{
  border-top-color: var(--cctv-tip-bg);
}