/* ============================================================
   PETA SPATIAL — MapLibre shell + panel kawalan
   RSN Johor 2040 · Dashboard Analitik
   Guna token tema (tokens.css); sedar cerah/gelap.
   ============================================================ */

.peta-view{display:flex;flex-direction:column;height:calc(100vh - 132px);min-height:520px}

.peta-shell{
  flex:1;display:grid;grid-template-columns:264px 1fr;gap:16px;min-height:0;
}

/* ── Panel kawalan ── */
.peta-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;
}
.pp-group{display:flex;flex-direction:column;gap:10px}
.pp-title{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--ink-3);padding-bottom:6px;border-bottom:1px solid var(--border-2);
}

/* Peta asas */
.pp-basemaps,.pp-layers{display:flex;flex-direction:column;gap:4px}
.pp-radio,.pp-layer{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .15s;border:1px solid transparent;
}
.pp-radio:hover,.pp-layer:hover{background:var(--surface-2)}
.pp-radio input,.pp-layer input{accent-color:var(--primary);width:15px;height:15px;flex-shrink:0;cursor:pointer}
.pp-radio input:checked ~ .pp-lbl{color:var(--ink);font-weight:600}

.pp-swatch{width:26px;height:18px;border-radius:4px;flex-shrink:0;border:1px solid var(--border);background-size:cover}
.sw-carto{background:linear-gradient(135deg,#f7f7f5,#e6e6e2)}
.sw-osm{background:linear-gradient(135deg,#e8efe0,#cfe0c3)}
.sw-google{background:linear-gradient(135deg,#3b4a2f,#5a7043)}

.pp-lbl{font-size:12.5px;color:var(--ink-2);line-height:1.3}

/* Lapisan */
.pp-layer-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.pp-meta{font-size:10px;color:var(--ink-3)}
.pp-chip{width:14px;height:14px;border-radius:4px;flex-shrink:0;background:var(--chip);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--chip) 18%,transparent)}

/* Petunjuk */
.pp-legend{gap:8px}
.pp-legend-row{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2)}
.pp-legend-line{width:20px;height:0;border-top:3px solid var(--chip);border-radius:3px;flex-shrink:0}
.pp-note{font-size:11px;color:var(--ink-3);line-height:1.5;margin-top:4px}

/* ── Peta ── */
.peta-map-wrap{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow);min-height:0;
}
#peta-map{position:absolute;inset:0;width:100%;height:100%;background:var(--surface-2)}

.peta-status{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:5;
  background:var(--surface);color:var(--ink-2);border:1px solid var(--border);
  border-radius:99px;padding:6px 14px;font-size:11.5px;font-weight:600;box-shadow:var(--shadow-md);
}

/* Kawalan navigasi MapLibre — selaraskan dengan tema */
.peta-map-wrap .maplibregl-ctrl-group{
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
}
.peta-map-wrap .maplibregl-ctrl-group button+button{border-top:1px solid var(--border-2)}
.peta-map-wrap .maplibregl-ctrl button .maplibregl-ctrl-icon{filter:none}
[data-theme="dark"] .peta-map-wrap .maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(1)}
.peta-map-wrap .maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--surface) 85%,transparent)}
.peta-map-wrap .maplibregl-ctrl-attrib a{color:var(--ink-3)}

/* Popup — gaya kad tema */
.maplibregl-popup.peta-popup .maplibregl-popup-content{
  background:var(--surface);color:var(--ink);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:0;overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;min-width:190px;
}
.maplibregl-popup.peta-popup .maplibregl-popup-tip{border-top-color:var(--surface);border-bottom-color:var(--surface)}
.maplibregl-popup.peta-popup .maplibregl-popup-close-button{color:var(--ink-3);font-size:16px;padding:2px 7px}
.peta-pop{padding:11px 13px}
.peta-pop-kick{font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;color:var(--chip,#17278C)}
.peta-pop-ttl{font-size:13.5px;font-weight:700;color:var(--ink);margin:2px 0 8px;line-height:1.3}
.peta-pop-row{display:flex;justify-content:space-between;gap:16px;font-size:11.5px;padding:3px 0;border-top:1px solid var(--border-2)}
.peta-pop-row .k{color:var(--ink-3)}
.peta-pop-row .v{color:var(--ink-2);font-weight:600;font-family:'JetBrains Mono',monospace}

/* ── Responsif ── */
@media (max-width:860px){
  .peta-view{height:auto}
  .peta-shell{grid-template-columns:1fr}
  .peta-map-wrap{height:60vh;min-height:420px}
}