/* SDM-14 Theme CSS (distinct) — sengaja sederhana tapi "proper BERKAH": gradient header, panel border, tombol konsisten */
:root{
  --theme-from: #0ea5e9;
  --theme-to:   #22c55e;
  --theme-accent:#14b8a6;
  --ink:#0b1220;
}

.brand-b{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 800;
  background: rgba(255,255,255,0.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.nav-pill{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  transition: all .15s ease;
}
.nav-pill:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.16); }
.nav-pill-active{
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

.card{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 25px rgba(2, 6, 23, 0.05);
}
.panel{
  border-radius: 18px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  background: linear-gradient(180deg, rgba(20,184,166,0.06), rgba(14,165,233,0.03));
  overflow: hidden;
}
.panel-title{
  padding: 12px 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(2,6,23,0.06);
  color: var(--ink);
}
.panel-body{ padding: 14px; }

.lbl{ font-size: 12px; color: rgba(15,23,42,0.72); font-weight: 600; }
.help{ font-size: 12px; color: rgba(15,23,42,0.55); margin-top: 4px; }

.ctl{
  width: 100%;
  border-radius: 14px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  padding: 10px 12px;
  background: #fff;
  outline: none;
  transition: all .12s ease;
}
.ctl:focus{
  border-color: rgba(20,184,166,0.65);
  box-shadow: 0 0 0 4px rgba(20,184,166,0.15);
}

.btn{
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(2,6,23,0.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  transition: all .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-theme{
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  background: linear-gradient(90deg, var(--theme-from), var(--theme-to));
  box-shadow: 0 10px 25px rgba(14,165,233,0.18);
}
.btn-ghost{
  background: #fff;
  color: rgba(15,23,42,0.82);
}
.btn-mini{
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 12px;
}
.link{ color: rgba(15,23,42,0.70); text-decoration: underline; }
.link:hover{ color: rgba(15,23,42,0.90); }

.chip{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(2,6,23,0.10);
}
.chip-light{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
}
.chip-plain{
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.78);
}

.badge{
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(2,6,23,0.10);
}
.badge-ok{ background: rgba(34,197,94,0.12); color: rgba(22,163,74,0.95); border-color: rgba(34,197,94,0.25); }
.badge-off{ background: rgba(148,163,184,0.12); color: rgba(71,85,105,0.95); border-color: rgba(148,163,184,0.25); }

.tbl{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tbl thead th{
  text-align: left;
  padding: 10px 12px;
  color: #fff;
  background: rgba(15,23,42,0.92);
  border-right: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
}
.tbl thead th:first-child{ border-top-left-radius: 14px; }
.tbl thead th:last-child{ border-top-right-radius: 14px; border-right: none; }
.tbl tbody td{
  padding: 10px 12px;
  border-right: 1px solid rgba(2,6,23,0.06);
  border-bottom: 1px solid rgba(2,6,23,0.06);
}
.tbl tbody tr:hover td{ background: rgba(14,165,233,0.04); }
.tbl tbody td:last-child{ border-right:none; }

.kpi{
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(15,23,42,0.02));
  padding: 12px 14px;
}
.kpi-label{ font-size: 12px; color: rgba(15,23,42,0.62); font-weight: 700; }
.kpi-value{ font-size: 24px; font-weight: 900; color: rgba(15,23,42,0.92); margin-top: 2px; }

.stat{
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,0.08);
  padding: 12px 12px;
  background: #fff;
}
.stat-label{ font-size: 12px; color: rgba(15,23,42,0.58); font-weight: 700; }
.stat-value{ font-size: 14px; font-weight: 800; margin-top: 4px; }

.meter{
  height: 10px;
  border-radius: 999px;
  background: rgba(2,6,23,0.06);
  overflow:hidden;
}
.meter-bar{
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--theme-accent), var(--theme-to));
}
.meter-bar-2{
  background: linear-gradient(90deg, var(--theme-from), var(--theme-accent));
}

.info-item{ display:flex; gap: 10px; align-items:flex-start; }
.dot{ width: 10px; height: 10px; border-radius: 999px; margin-top: 4px; }
.dot-ok{ background: rgba(34,197,94,0.95); }
.dot-warn{ background: rgba(245,158,11,0.95); }

.action-card{
  border-radius: 18px;
  padding: 14px 14px;
  font-weight: 900;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 26px rgba(2,6,23,0.10);
  transition: all .15s ease;
}
.action-card:hover{ transform: translateY(-2px); }
.action-card-1{ background: linear-gradient(90deg, #0ea5e9, #22c55e); }
.action-card-2{ background: linear-gradient(90deg, #14b8a6, #60a5fa); }
.action-card-3{ background: linear-gradient(90deg, #f59e0b, #ef4444); }

.org{ margin: 0; padding-left: 18px; }
.org-node{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,0.08);
  background: #fff;
  box-shadow: 0 10px 20px rgba(2,6,23,0.04);
}
.org-badge{
  font-size: 11px;
  font-weight: 900;
  color: rgba(15,23,42,0.70);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(14,165,233,0.08);
  border: 1px solid rgba(14,165,233,0.18);
}
.org-code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; color: rgba(15,23,42,0.55); }

.timeline{ position: relative; padding-left: 8px; }
.timeline li{ position: relative; padding-left: 22px; margin-bottom: 10px; }
.tl-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--theme-accent);
  position: absolute; left: 2px; top: 7px;
}
.tl-card{
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,0.08);
  background: #fff;
  padding: 10px 12px;
}