:root{
  --sidebar-w: 240px;
  --navy: #0d1b3e;
  --navy-2: #16224a;
  --blue: #2f6fed;
  --blue-soft: #e8f0fe;
  --green: #22a06b;
  --green-soft: #e5f7ef;
  --orange: #e08c1a;
  --orange-soft: #fdf1de;
  --red: #e0433d;
  --red-soft: #fce9e8;
  --purple: #7c5cff;
  --purple-soft: #efeaff;
  --teal: #17a2b8;
  --teal-soft: #e3f6f9;
  --navy-dot: #2a3a6b;
  --text-dark: #16203f;
  --text-muted: #8891a6;
  --bg: #f4f6fb;
  --card-border: #edf0f7;
}

*{box-sizing:border-box;}

body{
  background: var(--bg);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-dark);
  font-size: 14px;
}

a{ text-decoration:none; }

/* ===================== SIDEBAR ===================== */
.sidebar{
  width: var(--sidebar-w);
  min-height: 100vh;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #cfd6ea;
  padding: 20px 16px;
  position: sticky;
  top: 0;
  transition: margin-left .25s ease;
  flex-shrink: 0;
}
.sidebar.collapsed{
  margin-left: calc(var(--sidebar-w) * -1);
}

.sidebar-brand{ padding: 4px 4px 20px 4px; }
.brand-title{ font-weight: 700; color:#fff; font-size: 15px; letter-spacing:.5px;}
.brand-subtitle{ font-size: 10px; color:#8b96bd; letter-spacing:.5px;}

.sidebar-section-label{
  font-size: 10.5px;
  color:#6f7aa0;
  letter-spacing: .8px;
  margin: 10px 8px 8px;
}

.sidebar-nav .nav-link{
  color:#b7bfdb;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 2px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.sidebar-nav .nav-link i{ font-size: 15px; width:18px; text-align:center; }
.sidebar-nav .nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.sidebar-nav .nav-link.active{
  background: var(--blue);
  color:#fff;
  font-weight:600;
}

.sidebar-cta{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px;
  font-size: 12px;
  color:#aab4d4;
  text-align:center;
}

/* ===================== MAIN ===================== */
.main-content{
  padding: 20px 26px 10px;
  min-width: 0;
}

.toggle-btn{ display:none; }

.page-title{ font-size: 22px; font-weight: 700; color:#141a33;}
.page-subtitle{ font-size: 12.5px; color: var(--text-muted); }

.dropdown-pill{
  display:flex; align-items:center; gap:8px;
  background:#fff;
  border:1px solid #e6e9f2;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color:#3a4257;
}

.icon-btn{ border-radius: 10px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; }
.notif-badge{ position:absolute; top:-4px; right:-4px; font-size: 9px; padding: 3px 5px;}

.admin-block{ padding: 4px 8px; }
.admin-name{ font-size: 13px; font-weight:600; line-height:1.1;}
.admin-role{ font-size: 11px; color: var(--text-muted); }

.last-update{
  font-size: 11.5px;
  color: var(--text-muted);
  display:flex; align-items:center; gap:8px;
  margin: 6px 0 14px;
}
.refresh-btn{ width:26px; height:26px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:7px; }

/* ===================== STAT CARDS ===================== */
.stat-row{ margin-top: 4px; }
.stat-card{
  background:#fff;
  border:1px solid var(--card-border);
  border-radius: 14px;
  padding: 16px;
  height:100%;
}
.stat-icon{
  width:38px; height:38px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  font-size: 16px;
  margin-bottom: 10px;
}
.stat-label{ font-size: 12px; color: var(--text-muted); margin-bottom:4px; }
.stat-value{ font-size: 22px; font-weight:700; color:#141a33; }
.stat-sub{ font-size: 11.5px; margin-top:2px; }

.bg-blue-soft{ background: var(--blue-soft); } .text-blue{ color: var(--blue); }
.bg-green-soft{ background: var(--green-soft); } .text-green{ color: var(--green); }
.bg-orange-soft{ background: var(--orange-soft); } .text-orange{ color: var(--orange); }
.bg-red-soft{ background: var(--red-soft); } .text-red{ color: var(--red); }
.bg-purple-soft{ background: var(--purple-soft); } .text-purple{ color: var(--purple); }
.bg-teal-soft{ background: var(--teal-soft); } .text-teal{ color: var(--teal); }

/* ===================== PANELS ===================== */
.panel{
  background:#fff;
  border:1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px;
}
.panel-header{ margin-bottom: 14px; }
.panel-title{ font-size: 14.5px; font-weight:700; color:#141a33; margin:0; }
.panel-header-sub{ font-size: 11px; color: var(--text-muted); }
.panel-footnote{ font-size: 11px; color: var(--text-muted); margin-top: 10px; }
.panel-link{
  display:inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--blue);
  font-weight:600;
}

/* donut */
.donut-wrap{
  position:relative;
  width: 140px;
  height: 140px;
  flex-shrink:0;
}
.donut-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  pointer-events:none;
}
.donut-number{ font-size: 20px; font-weight:700; color:#141a33; line-height:1.1;}
.donut-label{ font-size: 10px; color: var(--text-muted); }

.legend-list{ list-style:none; padding:0; margin:0; font-size:12.5px; }
.legend-list li{ display:flex; align-items:center; gap:8px; padding: 5px 0; color:#3a4257; }
.legend-list li b{ font-weight:600; color:#141a33; }

.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-blue{ background: var(--blue);}
.dot-yellow{ background: #f5b638;}
.dot-red{ background: var(--red);}
.dot-purple{ background: var(--purple);}
.dot-green{ background: var(--green);}
.dot-navy{ background: var(--navy-dot);}

.chart-legend-inline{ display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:#3a4257; margin-bottom: 6px;}
.chart-legend-inline span{ display:flex; align-items:center; gap:6px; }

.line-chart-wrap{ height: 190px; }

/* bar list */
.bar-list{ list-style:none; padding:0; margin:0; }
.bar-list li{ margin-bottom: 12px; }
.bar-row-top{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; color:#3a4257; }
.bar-row-top b{ color:#141a33; font-weight:600; }
.bar-track{ background:#eef1f8; border-radius:6px; height:8px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:6px; background: var(--blue); }

/* table */
.risk-table{ font-size: 12.5px; }
.risk-table thead th{
  color: var(--text-muted);
  font-weight:600;
  font-size: 11.5px;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 8px;
}
.risk-table tbody td{ padding: 9px 6px; border-bottom: 1px solid #f4f5f9; color:#2c3350; }
.risk-table tbody tr:last-child td{ border-bottom:none; }
.pill{ font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight:600; }
.pill-tinggi{ background: var(--red-soft); color: var(--red); }
.pill-sedang{ background: var(--orange-soft); color: var(--orange); }
.link-followup{ color: var(--blue); font-weight:600; }
.link-monitoring{ color: var(--text-muted); font-weight:600; }

/* download / summary lists */
.download-list, .summary-list{ list-style:none; margin:0; padding:0; }
.download-list li{
  display:flex; align-items:center; gap:10px;
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 1px solid #f4f5f9;
  color:#2c3350;
  cursor:pointer;
}
.download-list li:last-child{ border-bottom:none; }
.download-list li i{ font-size: 16px; }

.summary-list li{
  display:flex; justify-content:space-between;
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 1px solid #f4f5f9;
  color:#5a6280;
}
.summary-list li:last-child{ border-bottom:none; }
.summary-list li b{ color:#141a33; font-weight:700; }

.dashboard-footer{
  text-align:center;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 10px 0 24px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991.98px){
  .sidebar{
    position: fixed;
    left:0; top:0; bottom:0;
    z-index: 1050;
    margin-left: calc(var(--sidebar-w) * -1);
  }
  .sidebar.show{ margin-left: 0; box-shadow: 0 0 30px rgba(0,0,0,.3); }
  .toggle-btn{ display:flex; align-items:center; justify-content:center; }
  .main-content{ padding: 16px; }
  .page-title{ font-size:18px; }
}

@media (max-width: 575.98px){
  .donut-wrap{ width: 110px; height:110px; }
  .stat-value{ font-size:18px; }
}