:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { background:#0f0f10; color:#eaeaea; font-family: system-ui, Arial, sans-serif; }

/* Layout */
#app { width:100vw; height:100vh; display:flex; }
#map { flex:1; height:100%; }

/* Sidebar / Drawer */
#sidebar{
  width:260px; min-width:220px; max-width:300px;
  background:#151517; border-right:1px solid #2a2a2d;
  padding:12px; display:flex; flex-direction:column; gap:10px; overflow:auto; z-index:1000;
}
#sidebar h2{ margin:0 0 4px; font-size:16px; text-align:center; }

#stats{
  border:1px solid #242428; border-radius:10px; padding:10px; background:#131316;
  font-size:13px; line-height:1.35;
}
#stats .row{ display:flex; justify-content:space-between; margin:4px 0; }
#stats .hint{ font-size:11px; opacity:.8; margin-top:6px; }

#search{
  width:100%; padding:8px 10px; border-radius:8px;
  border:1px solid #2b2b2e; background:#0f0f10; color:#eee; outline: none;
}
#cameraList{
  list-style:none; padding:0; margin:0; flex:1; overflow:auto;
  border:1px solid #242428; border-radius:8px;
}
#cameraList li{
  padding:10px 12px; cursor:pointer; border-bottom:1px solid #222225;
  display:flex; align-items:center; gap:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#cameraList li:hover { background:#202024; }
#cameraList li.active { background:#2a2a2f; font-weight:600; }
#cameraList li:last-child { border-bottom:none; }

.badge{
  margin-left:auto; font-size:11px; padding:2px 6px; border-radius:999px;
  background:#2a2a2f; border:1px solid #38383f; color:#cfcfd8;
}

/* Drawer trigger */
#menuBtn{
  position: fixed; left:10px; top: calc(10px + env(safe-area-inset-top));
  z-index:1100; border:1px solid #2a2a2d; background:#151517cc; color:#fff;
  padding:8px 10px; border-radius:8px; backdrop-filter: blur(6px);
}
#backdrop { display:none; }

/* Mobile */
@media (max-width:768px){
  #app{ display:block; }
  #map{ height:100vh; width:100vw; }
  #sidebar{
    position:fixed; inset:0 auto 0 0; height:100vh;
    transform: translateX(-100%); transition: transform .25s ease;
    width:85vw; max-width:360px; box-shadow:12px 0 24px rgba(0,0,0,.45);
  }
  #sidebar.open{ transform: translateX(0); }
  #backdrop.show{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:900;
  }
  .leaflet-top.leaflet-right{ margin-top:56px; } /* ruang tombol menu */
}
@media (min-width:769px){ #menuBtn{ display:none; } }

/* Popup video rapi */
.cctv-popup .leaflet-popup-content { margin:0 !important; }
.cctv-popup .leaflet-popup-content-wrapper { padding:10px !important; border-radius:12px; }
.cctv { width:440px; max-width:92vw; }
.cctv-title { font-weight:600; margin:0 0 8px; }
.cctv-player { position:relative; width:100%; background:#000; border-radius:10px; overflow:hidden; }
.cctv-player::before { content:""; display:block; padding-top:56.25%; } /* 16:9 */
.cctv-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Tooltip */
.leaflet-tooltip.cctv-tooltip{
  background:#151517; color:#fff; border:1px solid #2a2a2d;
  border-radius:6px; padding:4px 8px; font-size:12px; box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* Error toast */
#err{ position:fixed; right:10px; bottom:10px; background:#3a1f1f; color:#ffdada; border:1px solid #5b2b2b; border-radius:8px; padding:8px 10px; display:none; z-index:1200; max-width:60ch; }