/* ===============================
   GLOBAL ROOT
================================= */
:root{
  --sidebar-w: 360px;
}

/* ===============================
   GLOBAL BASE
================================= */
html,body{
  height:100%;
  margin:0;
  background:#0b0f19;
  color:#eaeef6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* KUNCI SUPAYA TIDAK SCROLL HALAMAN */
  overflow:hidden;
}

/* ===============================
   MAIN LAYOUT (SIDEBAR + CONTENT)
================================= */
#layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:100%;
  /* PAKSA PAS 1 LAYAR */
  height:100vh;
  width:100%;
}

/* COLLAPSED SIDEBAR */
body.sidebar-collapsed #layout{
  grid-template-columns:0 1fr;
}

#sidebar{
  background:#0d1324;
  border-right:1px solid #1f2a44;
  display:flex;
  flex-direction:column;
  width:var(--sidebar-w);
  max-width:560px;
  z-index:10;
  transition:transform .25s ease;
  overflow:hidden;
  /* PAKSA TINGGI SESUAI VIEWPORT */
  height:100vh;
}

body.sidebar-collapsed #sidebar{
  transform:translateX(-100%);
}

/* CONTENT AREA */
#content{
  position:relative;
  overflow:hidden;
  background:#020617;
}

/* Cesium full size */
#content > #cesiumContainer{
  position:absolute !important;
  inset:0;
}

/* ===============================
   SIDEBAR TOGGLE (☰ MENU)
   Perbaikan: default HIDE, muncul hanya saat sidebar-collapsed
================================= */
#sidebarToggle.sidebar-toggle{
  /* default: sidebar terbuka -> tombol menu HILANG */
  display:none;

  position:fixed;
  left:12px;
  top:10px;
  z-index:1200; /* pastikan di atas UI lain */
  border:1px solid #1f2a44;
  background:#0b1120;
  color:#eaeef6;
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);

  /* optional: supaya enak secara visual */
  align-items:center;
  gap:8px;
}

/* Saat sidebar collapsed -> tombol menu tampil */
body.sidebar-collapsed #sidebarToggle.sidebar-toggle{
  display:inline-flex;
}

/* ===============================
   SIDEBAR BRAND + COLLAPSE BUTTON
================================= */
#brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid #1f2a44;
  flex-shrink:0; /* JANGAN IKUT KECIL SAAT SCROLL */
}

#brand img.poseidon-logo{
  height:60px;
  width:auto;
  border-radius:12px;
  object-fit:contain;
}

/* Collapse button inside sidebar */
.sidebar-collapse{
  margin-left:auto;
  background:transparent;
  border:1px solid #1f2a44;
  color:#9fb3ff;
  border-radius:999px;
  padding:4px 8px;
  cursor:pointer;
  font-size:12px;
  line-height:1;
}
.sidebar-collapse:hover{
  background:#111827;
}

/* ===============================
   SIDEBAR CONTROLS
================================= */
#controls{
  padding:10px 12px;
  /* AREA INI YANG BOLEH SCROLL (BUKAN BODY) */
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
}

/* Cards */
.card{
  border:1px solid #1f2a44;
  border-radius:12px;
  background:#0f1526;
  padding:10px;
}

/* --- COLLAPSIBLE CARD --- */
.card.collapsible{
  padding:0; /* header dan body kita pisah */
}

.card.collapsible h3{
  margin:0;
  padding:10px 12px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9fb3ff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}

.card.collapsible h3::after{
  content:"▾";
  font-size:12px;
  opacity:.8;
  transition:transform .2s ease;
}

/* body card collapsible */
.card-body{
  padding:10px 12px 12px 12px;
  border-top:1px solid #1f2a44;
}

/* default: tertutup */
.card.collapsible:not(.open) .card-body{
  display:none;
}

/* icon rotate saat open */
.card.collapsible.open h3::after{
  transform:rotate(180deg);
}

.card h3:not(.collapsible){
  margin:0 0 10px 0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9fb3ff;
}

/* Sidebar .row (grid) */
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

label{
  font-size:12px;
  opacity:.9;
}

input,select{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #2a385e;
  background:#0b1120;
  color:#eaeef6;
  font-size:12px;
}
input[type=file]{color:#9fb3ff}

.btn{
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  border:none;
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  font-size:12px;
}
.btn.secondary{background:#223055}

.stack{display:flex;flex-wrap:wrap;gap:8px;}
.switch{display:flex;gap:8px;align-items:center;}
.muted{font-size:12px;opacity:.8;}

.status{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #2a385e;
  background:#0b1120;
  font-size:12px;
  color:#9fb3ff;
}

/* ===============================
   MAP WRAPPER
================================= */
#map{
  position:relative;
}
#cesiumContainer{
  position:absolute;
  inset:0;
}

/* ===============================
   LEGEND
================================= */
#legend{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:15;
  background:rgba(18,24,38,.92);
  border:1px solid #1f2a44;
  border-radius:10px;
  padding:10px;
  min-width:120px;
}
#legend h5{
  margin:0 0 6px 0;
  font-size:12px;
  color:#c7d2fe;
}
#legend canvas{
  display:block;
  border:1px solid #1f2a44;
  border-radius:8px;
  background:#0b1120;
}

/* ===============================
   POPUP
================================= */
#popup{
  position:absolute;
  z-index:20;
  min-width:220px;
  max-width:320px;
  background:rgba(14,18,30,.98);
  border:1px solid #223055;
  border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  padding:10px;
  display:none;
  pointer-events:none;
}
#popup h4{
  margin:0 0 6px 0;
  font-size:13px;
  color:#c7d2fe;
}
#popup .rowp{
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:8px;
}

/* Hide Cesium credits */
.cesium-widget-credits{display:none !important}

/* ===============================
   PROFILE BOX (sidebar profile)
================================= */
#profileBox{
  border:1px solid #1f2a44;
  border-radius:10px;
  background:#0f1526;
  padding:10px;
}
#profileCanvas{
  width:100%;
  height:140px;
  border:1px solid #1f2a44;
  border-radius:8px;
  background:#0b1120;
}
#profileStats{
  font-size:12px;
  margin-top:6px;
  opacity:.9;
}

/* ===============================
   TOOLBAR (TOP CENTER)
================================= */
#toolbar{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  z-index:30;
  display:flex;
  gap:8px;
  align-items:center;
  background:rgba(13,19,36,.85);
  border:1px solid #1f2a44;
  border-radius:999px;
  padding:6px 10px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

#toolbar .tool-sep{
  width:1px;
  height:22px;
  background:#1f2a44;
}

.tool-btn{
  border:1px solid #2a385e;
  background:#0b1120;
  color:#eaeef6;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  line-height:1;
  font-size:12px;
}
.tool-btn:hover{background:#12203b;}
.tool-btn.active{
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  border-color:#2563eb;
  color:#fff;
}

/* ===============================
   FLOATING PANELS (STORE / LAYERS)
================================= */
.panel{
  position:absolute;
  z-index:40;
  background:rgba(11,18,32,.9);
  border:1px solid #1e2a47;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  color:#eaeef6;
}
.panel.card{
  padding:0;
  width:360px;
}

#storePanel{
  top:72px;
  right:12px;
}

#layersPanel{
  top:72px;
  right:388px; /* storePanel width + gap */
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid #1e2a47;
}
.panel-head h3{
  margin:0;
  font-size:14px;
}

.panel-actions .mini{
  border:1px solid #2a3a66;
  background:#1f2d57;
  color:#eaeef6;
  padding:4px 6px;
  border-radius:6px;
  cursor:pointer;
  margin-left:6px;
  font-size:11px;
}

.panel-body{
  padding:10px 12px;
}

/* .panel-row (map panel fields) */
.panel-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin:8px 0;
}
.panel-row label{
  flex:0 0 130px;
  color:#9fb3ff;
  font-size:12px;
}
.panel-row input{
  flex:1;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid #1e2a47;
  background:#0f1730;
  color:#eaeef6;
  font-size:12px;
}
.panel-row button{
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #2a3a66;
  background:#1f2d57;
  color:#eaeef6;
  cursor:pointer;
  font-size:12px;
  white-space:nowrap;
}

.panel-row-inline{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  font-size:12px;
}

.hidden{display:none !important;}

/* ===============================
   PROFILE DOCK (BOTTOM)
================================= */
#profileDock{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:25;
  background:rgba(14,18,30,.96);
  border:1px solid #1f2a44;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  overflow:hidden;
  transition:transform .25s ease, opacity .2s ease;
}

#profileDock.closed{
  transform:translateY(calc(100% + 12px));
  opacity:0;
  pointer-events:none;
}

#profileDock .dock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #1f2a44;
  background:rgba(15,21,38,.9);
}

#profileDock .dock-left{
  display:flex;
  align-items:center;
  gap:10px;
}
#profileDock .dock-right{
  display:flex;
  align-items:center;
  gap:8px;
}

#chartSearch{
  width:220px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #2a385e;
  background:#0b1120;
  color:#eaeef6;
  font-size:12px;
}

#profileDock .dock-body{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:260px;
}

/* CHART LIST LEFT */
.chart-list{
  border-right:1px solid #1f2a44;
  background:#0f1526;
  overflow:auto;
}
#chartList{
  list-style:none;
  margin:0;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#chartList li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid #243255;
  border-radius:10px;
  padding:8px 10px;
  background:#0b1120;
  cursor:pointer;
}
#chartList li.active{
  border-color:#3b82f6;
  background:#0e1a33;
}
#chartList .title{
  font-size:13px;
  color:#c7d2fe;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#chartList .meta{
  font-size:11px;
  opacity:.8;
}
#chartList .actions{
  display:flex;
  gap:6px;
}
#chartList .mini{
  border:1px solid #2a385e;
  background:#0b1120;
  color:#eaeef6;
  padding:4px 8px;
  border-radius:8px;
  cursor:pointer;
  font-size:11px;
}

/* CHART PANEL RIGHT */
.chart-panel{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#dockCanvas{
  width:100%;
  height:240px;
  border:1px solid #1f2a44;
  border-radius:10px;
  background:#0b1120;
}
.chart-meta{
  font-size:12px;
  opacity:.9;
  color:#eaeef6;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* ===============================
   RESPONSIVE
================================= */
@media (max-width:900px){
  :root{ --sidebar-w: 280px; }
  #layersPanel{ right:12px; }
  #profileDock{
    left:8px;
    right:8px;
  }
}