/* ===============================
   DEDOLAND — maps.css (restore)
   Letak: public/css/maps.css
   =============================== */

/* ----- dasar halaman ----- */
:root{
  --wrap-w: 1100px;
  --card-bg: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e5e7eb;
  --soft: #f8fafc;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#f6f7fb;
}

/* ----- pembungkus konten publik (opsional) ----- */
.wrap{    /*UKURAN PETA */
  max-width:1200px;
  margin:0px auto;
  padding:0px;
  background:var(--card-bg);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

/* Jika ingin tanpa panel putih: hapus background & shadow di atas */

/* ----- MAP CONTAINER ----- */
/* gunakan .map-public di blade; tetap sediakan #map sebagai fallback */
#map,
.map-public{
  width:100%;
  height:800px;            /* tinggi default */
  border:1px solid var(--line);
  border-radius:0px;
  background:#eef2ff;      /* warna saat tiles belum termuat */
  overflow:hidden;
}

/* variasi tinggi siap pakai */
.map-400{height:400px!important}
.map-480{height:480px!important}
.map-600{height:600px!important}
.map-720{height:720px!important}

/* Leaflet expects the container to have explicit size */
.leaflet-container{width:100%;height:100%}

/* ----- readout area ----- */
.readout{
  margin-top:12px;
  padding:10px 12px;
  background:#fff;
  border:1px dashed var(--line);
  border-radius:10px;
  font-size:14px;
  color:var(--muted);
}
.readout b{color:var(--ink)}

/* ----- halaman publik (opsional kosmetik) ----- */
body.public-page{background:#fff}
.public-page .wrap{
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}

/* ----- responsif ----- */
@media (max-width: 768px){
  #map,.map-public{height:420px}
}
@media (max-width: 480px){
  #map,.map-public{height:360px}
}