:root{
  --sidebar-bg: #14213d;
  --accent: #fca311;
  --bg: #f4f6f9;
}
body{ background: var(--bg); font-family: 'Segoe UI', system-ui, sans-serif; }
#wrapper{ min-height: 100vh; }
.sidebar{
  width: 250px;
  min-width: 250px;
  background: var(--sidebar-bg);
  min-height: 100vh;
  position: sticky;
  top: 0;
}
.sidebar .nav-link{
  color: rgba(255,255,255,.75);
  border-radius: 8px;
  font-size: .93rem;
}
.sidebar .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.sidebar .nav-link.active{ background: var(--accent); color:#14213d; font-weight:600; }
.content-area{ min-width: 0; }
.topbar{ background:#fff; border-bottom:1px solid #e5e7eb; }
.stat-card{
  border: none;
  border-radius: 14px;
  color: #fff;
  padding: 1.25rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.stat-card .icon{ font-size: 2rem; opacity:.85; }
.stat-card h3{ font-weight:700; margin-bottom:0; }
.bg-c1{ background: linear-gradient(135deg,#4361ee,#3a0ca3); }
.bg-c2{ background: linear-gradient(135deg,#2a9d8f,#264653); }
.bg-c3{ background: linear-gradient(135deg,#f4a261,#e76f51); }
.bg-c4{ background: linear-gradient(135deg,#e63946,#9d0208); }
.card{ border:none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#14213d,#1d2d50);
}
.login-card{ width: 380px; border-radius: 16px; }

/* ===== Split login (kiri: branding, kanan: form) ===== */
.login-split{ min-height: 100vh; }
.login-split-left{
  background: linear-gradient(160deg, var(--sidebar-bg) 0%, #1d2d50 55%, #24345f 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 3rem;
}
.login-split-left .brand-icon{
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--accent);
}
.login-split-left h1{ font-weight: 700; font-size: 2rem; }
.login-split-left .feature-item{
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: 1.1rem;
}
.login-split-left .feature-item i{
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background: rgba(252,163,17,.15); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.login-split-left .decor-circle{
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.login-split-right{
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.login-form-wrap{ width: 100%; max-width: 380px; }
@media (max-width: 991.98px){
  .login-split-left{ display: none !important; }
}
#mapPicker, #mapFull{ height: 380px; border-radius: 10px; }
table.table thead{ background:#14213d; color:#fff; }
.badge-layak{ background:#2a9d8f; }
.badge-tidak-layak{ background:#e63946; }