:root{
 color-scheme:only light;
 --bg:#f7f7f5;
 --bg-soft:#fafaf9;
 --card:rgba(255,255,255,.92);
 --card-solid:#ffffff;
 --line:#e7e5e4;
 --line-soft:#f0efed;
 --text:#1c1917;
 --muted:#78716c;
 --muted-2:#a8a29e;
 --emerald:#10b981;
 --emerald-2:#14b8a6;
 --teal:#06b6d4;
 --teal-2:#22c55e;
 --amber:#f59e0b;
 --amber-2:#fbbf24;
 --rose:#e11d48;
 --slate:#64748b;
 --surface-tint:#f5f5f4;
 --shadow:0 8px 28px rgba(28,25,23,.055);
 --shadow-soft:0 3px 14px rgba(28,25,23,.035);
 --grid:rgba(120,113,108,.12);
 --focus:rgba(5,150,105,.10);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--text);background:
radial-gradient(circle at 0 0,rgba(5,150,105,.045),transparent 38%),
radial-gradient(circle at 100% 100%,rgba(217,119,6,.035),transparent 38%),var(--bg);transition:background .28s ease,color .28s ease}
button,select{font:inherit}
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--card-solid) 88%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1500px;margin:auto;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#3b82f6,#f59e0b);color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(5,150,105,.16)}
.brand h1{font-size:18px;margin:0;letter-spacing:-.03em}.brand p{margin:3px 0 0;font-size:11px;color:var(--muted);font-weight:600}
.actions{display:flex;gap:8px}.btn{border:1px solid var(--line);background:var(--card-solid);color:var(--slate);border-radius:11px;padding:9px 12px;font-size:12px;font-weight:800;cursor:pointer}
.btn:hover{background:var(--surface-tint)}.btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6}.btn-primary:hover{background:#2563eb}
main{max-width:1500px;margin:auto;padding:20px;display:grid;gap:17px}
.card{background:var(--card);border:1px solid #dbe5f1;border-radius:22px;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.pad{padding:17px}.section-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}
.section-title{font-size:14px;font-weight:800}.muted{font-size:11px;color:var(--muted);font-weight:600}
.notice{padding:12px 14px;border-radius:14px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;font-size:12px;font-weight:700}
.error{border-color:#fecaca;background:#fff1f2;color:#991b1b}
.hidden{display:none!important}
.filters{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:11px}
label{display:block;margin-bottom:5px;font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800}
select{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface-tint);color:#334155;font-size:12px;font-weight:700;outline:none}
select:focus{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(59,130,246,.10);background:var(--card-solid)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{padding:17px 18px}.kpi-label{font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:800}.kpi-num{font-size:31px;font-weight:800;letter-spacing:-.04em;margin-top:5px}.kpi-sub{font-size:10.5px;color:var(--muted);font-weight:700;margin-top:5px}
.kpi-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.kpi-dot{width:12px;height:12px;border-radius:99px;margin-top:5px}
.d-blue{background:#3b82f6}.d-green{background:#06b6d4}.d-amber{background:#22c55e}.d-violet{background:#e11d48}
.class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.class-card{padding:15px 16px;border:1px solid #dbe5f1;border-radius:18px;background:var(--card-solid);box-shadow:0 6px 18px rgba(15,23,42,.03)}
.class-name{font-size:12px;font-weight:800;line-height:1.4;min-height:34px}.class-numbers{margin-top:11px;display:flex;justify-content:space-between;align-items:end;gap:10px}
.class-main{font-size:27px;font-weight:800;letter-spacing:-.04em}.class-target{font-size:10px;color:var(--muted);font-weight:700}
.progress{height:7px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:10px}.progress>span{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#f59e0b);border-radius:99px}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.pill{font-size:9.5px;font-weight:800;border-radius:999px;padding:6px 10px}.p-dinas{background:#dbeafe;color:#1d4ed8}.p-cabdin{background:#fef3c7;color:#b45309}.p-missing{background:#fff1f2;color:#be123c}.p-over{background:#ffe4e6;color:#9f1239}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.chart-wrap{height:330px}.chart-wrap-sm{height:300px}
.table-wrap{overflow:auto;max-height:600px;border:1px solid var(--line-soft);border-radius:15px}
table{width:100%;border-collapse:collapse;font-size:11px;min-width:900px;background:var(--card-solid)}
thead{position:sticky;top:0;z-index:3;background:var(--surface-tint);color:var(--muted);text-transform:uppercase}
th,td{padding:10px 11px;border-top:1px solid var(--line-soft);text-align:left;white-space:nowrap}
th{font-size:9.5px}.center{text-align:center}.num{text-align:right;font-variant-numeric:tabular-nums}
.cell-ok{background:#dbeafe;color:#1d4ed8;font-weight:800}.cell-miss{background:#fef3c7;color:#b45309;font-weight:800}.cell-over{background:#ffe4e6;color:#be123c;font-weight:800}.cell-na{background:#f1f5f9;color:#94a3b8;font-weight:800}
.badge{display:inline-block;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:800;background:var(--surface-tint);color:var(--slate)}
.footer-note{font-size:10.5px;color:var(--muted);line-height:1.6}
.loading-overlay{position:fixed;inset:0;z-index:100;background:rgba(248,250,252,.72);backdrop-filter:blur(4px);display:grid;place-items:center}
.loader{width:46px;height:46px;border-radius:50%;border:4px solid #dbeafe;border-top-color:#059669;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){.kpis{grid-template-columns:repeat(2,1fr)}.class-grid{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}
@media(max-width:680px){
 main{padding:11px 8px 25px}.topbar-inner{padding:10px 10px}.brand h1{font-size:15px}.brand p{display:none}.logo{width:38px;height:38px;border-radius:12px}
 .actions .btn:not(.btn-primary){display:none}.card{border-radius:18px}.pad{padding:13px}
 .filters{grid-template-columns:1fr 1fr}.filters>div:first-child{grid-column:1/-1}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kpi{padding:13px}.kpi-num{font-size:25px}.kpi-label{font-size:8.5px}
 .class-grid{grid-template-columns:1fr}.chart-wrap,.chart-wrap-sm{height:275px}.table-wrap{max-height:480px}
}











.signature{
 text-align:center;
 font-size:11px;
 font-weight:800;
 letter-spacing:.16em;
 text-transform:uppercase;
 color:var(--muted)
}

/* ============================================================
   V1.6 — MOBILE CONTAINMENT
   Layout mengikuti pola dashboard referensi:
   halaman tidak boleh melebar; tabel scroll hanya di dalam card.
   ============================================================ */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{min-width:0}
main{
  width:100%;
  max-width:1500px;
  min-width:0;
  overflow-x:hidden;
}
main>*,.card,.filters,.kpis,.class-grid,.grid2,
.chart-wrap,.chart-wrap-sm,.table-wrap{
  min-width:0;
  max-width:100%;
}
canvas{
  display:block;
  width:100%!important;
  max-width:100%!important;
}
.table-wrap{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  contain:inline-size;
}


@media(max-width:620px){
  body{
    background:
      radial-gradient(circle at 0 0,rgba(16,185,129,.055),transparent 43%),
      radial-gradient(circle at 100% 100%,rgba(245,158,11,.045),transparent 43%),
      var(--bg);
  }

  .topbar-inner{
    width:100%;
    max-width:100%;
    padding:10px 10px;
    gap:8px;
  }
  .brand{min-width:0;gap:8px}
  .logo{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:12px;
    font-size:13px;
  }
  .brand h1{
    max-width:190px;
    font-size:14px;
    line-height:1.2;
    white-space:normal;
  }
  .brand p{display:none}

  .actions{gap:5px;flex:0 0 auto}
  .actions .btn{
    padding:7px 8px;
    font-size:10px;
    border-radius:9px;
    white-space:nowrap;
  }
  #resetBtn{display:none}
  

  main{
    padding:10px 8px 24px;
    gap:12px;
  }

  .card{
    width:100%;
    max-width:100%;
    border-radius:18px;
  }
  .pad{padding:13px}
  .section-head{
    gap:7px;
    margin-bottom:11px;
    flex-wrap:wrap;
  }
  .section-title{
    font-size:13.5px;
    line-height:1.3;
  }
  .muted{
    font-size:9.5px;
    line-height:1.45;
  }

  /* Filter seperti dashboard referensi: Kelas penuh,
     Kab/Kota dan From berdampingan. */
  .filters{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px 7px;
  }
  .filters>div{
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }
  .filters>div:first-child{grid-column:1/-1}
  label{
    font-size:8.5px;
    line-height:1.2;
    margin-bottom:5px;
    letter-spacing:.02em;
  }
  select{
    min-width:0;
    max-width:100%;
    min-height:42px;
    padding:8px 8px;
    border-radius:10px;
    font-size:11.5px;
    line-height:1.2;
  }

  /* KPI: dua kartu per baris seperti contoh. */
  .kpis{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .kpi{
    min-width:0;
    min-height:88px;
    padding:12px 11px;
  }
  .kpi-label{
    font-size:8px;
    line-height:1.25;
    white-space:normal;
  }
  .kpi-num{
    margin-top:5px;
    font-size:25px;
  }
  .kpi-sub{
    margin-top:4px;
    font-size:8.5px;
    line-height:1.3;
  }

  /* Rekap kelas satu kartu per baris. */
  .class-grid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .class-card{
    min-width:0;
    padding:13px 14px;
    border-radius:16px;
  }
  .class-name{
    min-height:0;
    font-size:11.5px;
  }
  .class-main{font-size:25px}
  .class-target{font-size:9px}
  .pills{gap:5px}
  .pill{font-size:8.5px;padding:4px 7px}

  /* Semua grafik turun ke satu kolom. */
  .grid2{
    width:100%;
    grid-template-columns:1fr;
    gap:11px;
  }
  .chart-wrap,
  .chart-wrap-sm{
    width:100%;
    max-width:100%;
    height:245px;
    overflow:hidden;
  }

  /* Matrix tetap lengkap, tetapi hanya tabelnya yang bergeser horizontal. */
  .table-wrap{
    max-height:440px;
    border-radius:12px;
  }
  .table-wrap table{
    width:max-content;
    min-width:720px;
    max-width:none;
    font-size:9.5px;
  }
  th,td{
    padding:8px 8px;
  }
  th{font-size:8px}
  .badge{
    font-size:8px;
    padding:4px 6px;
  }

  .footer-note{
    font-size:9px;
    padding-top:10px;
    padding-bottom:10px;
  }
}

@media(max-width:360px){
  main{padding-left:6px;padding-right:6px}
  .topbar-inner{padding-left:7px;padding-right:7px}
  .brand h1{max-width:160px;font-size:13px}
  .filters{gap:8px 6px}
  select{font-size:10.5px;padding-left:6px;padding-right:6px}
  .kpis{gap:6px}
  .kpi{padding:11px 9px}
  .kpi-num{font-size:23px}
  .chart-wrap,.chart-wrap-sm{height:225px}
}


.reload-short{display:none}
@media(max-width:620px){
  .reload-full{display:none}
  .reload-short{display:inline}
  #reloadBtn{min-width:34px}
}

/* V1.7 — LIGHT ONLY + iPhone polish */
html{
  color-scheme:only light!important;
  background:#fffdf7;
}
body{
  color-scheme:only light!important;
  background:
    radial-gradient(circle at 0 0,rgba(16,185,129,.075),transparent 40%),
    radial-gradient(circle at 100% 100%,rgba(245,158,11,.06),transparent 40%),
    #fffdf7!important;
}
.topbar{
  background:rgba(255,253,247,.94)!important;
}
@media(max-width:620px){
  html,body{
    width:100vw;
    max-width:100vw;
    overflow-x:hidden!important;
  }
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .topbar{
    width:100%;
    max-width:100%;
  }
  .topbar-inner{
    width:100%;
    max-width:100%;
    padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right));
  }
  main{
    width:100%;
    max-width:100%;
    padding-left:8px;
    padding-right:8px;
  }
  main>*{
    width:100%;
    max-width:100%;
  }
  .filters,.kpis,.class-grid,.grid2{
    width:100%;
    max-width:100%;
  }
  .chart-wrap,.chart-wrap-sm{
    position:relative;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  canvas{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
  }
  .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:auto!important;
    touch-action:pan-x pan-y;
  }
  .section-head>.muted{
    width:100%;
  }
}




/* V1.7.6 — balanced Tailwind region cards */
.region-source-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.source-summary-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:15px 16px;
  min-width:0;
  box-shadow:0 6px 18px rgba(15,23,42,.035)
}
.source-summary-card.dinas{border-top:4px solid #3b82f6}
.source-summary-card.cabdin{border-top:4px solid #f59e0b}
.source-summary-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px
}
.source-summary-title{
  font-size:13px;
  font-weight:800;
  line-height:1.3
}
.source-summary-score{
  flex:0 0 auto;
  min-width:56px;
  border-radius:12px;
  padding:7px 9px;
  text-align:center;
  font-size:10px;
  font-weight:800
}
.source-summary-card.dinas .source-summary-score{
  background:#dbeafe;
  color:#1d4ed8;
  border:1px solid #bfdbfe
}
.source-summary-card.cabdin .source-summary-score{
  background:#fef3c7;
  color:#b45309;
  border:1px solid #fde68a
}
.source-summary-progress{
  height:7px;
  border-radius:999px;
  background:#f1f5f9;
  overflow:hidden;
  margin-top:11px
}
.source-summary-progress span{
  display:block;
  height:100%;
  border-radius:999px
}
.source-summary-card.dinas .source-summary-progress span{background:#3b82f6}
.source-summary-card.cabdin .source-summary-progress span{background:#f59e0b}
.source-summary-stats{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px
}
.source-stat{
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
  font-weight:800
}
.source-summary-card.dinas .source-stat.done{
  background:#dbeafe;color:#1d4ed8
}
.source-summary-card.dinas .source-stat.wait{
  background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe
}
.source-summary-card.cabdin .source-stat.done{
  background:#fef3c7;color:#b45309
}
.source-summary-card.cabdin .source-stat.wait{
  background:#fffbeb;color:#d97706;border:1px solid #fde68a
}
.source-block{
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid #f1f5f9
}
.source-block-title{
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
  margin-bottom:8px
}
.region-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.region-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:999px;
  padding:6px 9px;
  font-size:9.5px;
  font-weight:800;
  line-height:1.2
}
.source-summary-card.dinas .region-chip.done{
  background:#dbeafe;
  color:#1d4ed8;
  border:1px solid #bfdbfe
}
.source-summary-card.dinas .region-chip.wait{
  background:#fff;
  color:#2563eb;
  border:1px solid #93c5fd
}
.source-summary-card.cabdin .region-chip.done{
  background:#fef3c7;
  color:#b45309;
  border:1px solid #fde68a
}
.source-summary-card.cabdin .region-chip.wait{
  background:#fff;
  color:#d97706;
  border:1px solid #fbbf24
}
.region-chip.empty{
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fed7aa
}
@media(max-width:620px){
  .region-source-grid{grid-template-columns:1fr;gap:10px}
  .source-summary-card{padding:13px 13px;border-radius:17px}
  .source-summary-title{font-size:12px}
  .source-summary-score{font-size:9px;min-width:52px}
  .region-chip{font-size:8.5px;padding:5px 8px}
}




.class-meta{
  margin-top:4px;
  font-size:9.5px;
  color:var(--muted);
  font-weight:700;
  line-height:1.35
}
@media(max-width:620px){
  .class-meta{font-size:8.5px}
}


/* V1.7.8 — top quota explorer */
.quota-filter-row{
  display:grid;
  grid-template-columns:minmax(210px,.35fr) 1fr;
  gap:12px;
  align-items:end
}
.quota-headline{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:9px 12px;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  color:#64748b;
  font-size:11px;
  font-weight:700;
  background:#f8fafc
}
.quota-overview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:13px
}
.quota-stage-card{
  background:#fff;
  border:1px solid #dbe5f1;
  border-radius:18px;
  padding:14px 15px;
  box-shadow:0 6px 18px rgba(15,23,42,.035);
  min-width:0
}
.quota-stage-card.dinas{border-top:4px solid #3b82f6}
.quota-stage-card.cabdin{border-top:4px solid #f59e0b}
.quota-stage-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start
}
.quota-stage-name{
  font-size:13px;
  font-weight:800;
  line-height:1.3
}
.quota-stage-date{
  margin-top:3px;
  font-size:9.5px;
  color:#64748b;
  font-weight:700
}
.quota-stage-total{
  flex:0 0 auto;
  border-radius:12px;
  padding:7px 9px;
  font-size:9px;
  font-weight:800
}
.quota-stage-card.dinas .quota-stage-total{
  background:#dbeafe;
  color:#1d4ed8;
  border:1px solid #bfdbfe
}
.quota-stage-card.cabdin .quota-stage-total{
  background:#fef3c7;
  color:#b45309;
  border:1px solid #fde68a
}
.quota-training-list{
  display:grid;
  gap:7px;
  margin-top:12px
}
.quota-training{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff
}
.quota-training-name{
  min-width:0;
  font-size:10.5px;
  font-weight:800;
  line-height:1.3;
  color:#334155
}
.quota-badge{
  flex:0 0 auto;
  min-width:42px;
  text-align:center;
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
  font-weight:800
}
.quota-stage-card.dinas .quota-badge{
  background:#eff6ff;
  color:#2563eb
}
.quota-stage-card.cabdin .quota-badge{
  background:#fffbeb;
  color:#d97706
}
.quota-empty{
  grid-column:1/-1;
  padding:16px;
  border:1px dashed #cbd5e1;
  border-radius:15px;
  text-align:center;
  color:#64748b;
  font-size:10.5px;
  font-weight:700;
  background:#f8fafc
}
@media(max-width:620px){
  .quota-filter-row{grid-template-columns:1fr;gap:8px}
  .quota-headline{min-height:0;font-size:9.5px;padding:8px 9px}
  .quota-overview{grid-template-columns:1fr;gap:9px}
  .quota-stage-card{padding:12px 12px;border-radius:16px}
  .quota-stage-name{font-size:12px}
  .quota-stage-date{font-size:8.5px}
  .quota-training{padding:8px 9px}
  .quota-training-name{font-size:9.5px}
  .quota-badge{font-size:8.5px}
}


.assignment-filter-row{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:end
}
.assignment-result-card{
  background:#fff;
  border:1px solid #dbe5f1;
  border-radius:18px;
  padding:14px 15px;
  box-shadow:0 6px 18px rgba(15,23,42,.035);
  min-width:0
}
.assignment-result-card.dinas{border-top:4px solid #3b82f6}
.assignment-result-card.cabdin{border-top:4px solid #f59e0b}
.assignment-stage{
  font-size:13px;
  font-weight:800;
  line-height:1.3
}
.assignment-date{
  margin-top:3px;
  font-size:9.5px;
  color:#64748b;
  font-weight:700
}
.assignment-training-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:11px
}
.assignment-training{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:9.5px;
  font-weight:800;
  line-height:1.2;
  border:1px solid transparent
}
.assignment-result-card.dinas .assignment-training{
  background:#dbeafe;
  color:#1d4ed8;
  border-color:#bfdbfe
}
.assignment-result-card.cabdin .assignment-training{
  background:#fef3c7;
  color:#b45309;
  border-color:#fde68a
}
.assignment-empty{
  grid-column:1/-1;
  padding:15px;
  border-radius:15px;
  border:1px dashed #cbd5e1;
  background:#f8fafc;
  color:#64748b;
  font-size:10.5px;
  font-weight:700;
  text-align:center
}
@media(max-width:620px){
  .assignment-filter-row{grid-template-columns:1fr 1fr;gap:7px}
  .assignment-result-card{padding:12px;border-radius:16px}
  .assignment-stage{font-size:12px}
  .assignment-date{font-size:8.5px}
  .assignment-training{font-size:8.5px;padding:5px 8px}
}
@media(max-width:360px){
  .assignment-filter-row{grid-template-columns:1fr}
}


.quota-kab-input{
  width:100%;min-height:42px;padding:10px 11px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--surface-tint);color:#334155;
  font-size:12px;font-weight:700;outline:none
}
.quota-kab-input:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(59,130,246,.10);
  background:var(--card-solid)
}
@media(max-width:620px){
  .quota-kab-input{min-height:42px;padding:8px;border-radius:10px;font-size:11.5px}
}
@media(max-width:360px){
  .quota-kab-input{font-size:10.5px;padding-left:6px;padding-right:6px}
}


.matrix-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px
}
.matrix-legend-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:999px;
  font-size:8.5px;
  font-weight:800;
  border:1px solid #e2e8f0;
  background:#fff
}
.matrix-legend-mark{
  min-width:18px;
  height:18px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border-radius:6px;
  font-size:9px;
  font-weight:800
}
.matrix-legend-mark.na{background:#f1f5f9;color:#94a3b8}
.matrix-legend-mark.wait{background:#fef3c7;color:#b45309}
.matrix-legend-mark.ok{background:#dbeafe;color:#1d4ed8}
.matrix-legend-mark.over{background:#ffe4e6;color:#be123c}
@media(max-width:620px){
  .matrix-legend{gap:5px}
  .matrix-legend-item{font-size:8px;padding:4px 6px}
  .matrix-legend-mark{min-width:17px;height:17px;font-size:8.5px}
}


/* V1.7.17 — global participant search */
.participant-search-card{position:relative;z-index:15}
.participant-search-wrap{position:relative}
.participant-search-box{position:relative}
.participant-search-input{
  width:100%;
  min-height:46px;
  padding:10px 42px 10px 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-tint);
  color:#334155;
  font-size:12px;
  font-weight:700;
  outline:none;
  transition:.18s ease
}
.participant-search-input:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(59,130,246,.10);
  background:#fff
}
.participant-search-clear{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#94a3b8;
  font-size:18px;
  line-height:1
}
.participant-search-clear:hover{background:#eef2f7;color:#475569}
.participant-search-help{
  margin-top:7px;
  font-size:9.5px;
  line-height:1.45;
  color:#64748b;
  font-weight:650
}
.participant-suggestions{
  position:absolute;
  left:0;right:0;
  top:calc(100% + 7px);
  z-index:90;
  max-height:330px;
  overflow:auto;
  padding:5px;
  background:#fff;
  border:1px solid #dbe5f1;
  border-radius:15px;
  box-shadow:0 20px 50px rgba(15,23,42,.16)
}
.participant-suggestion{
  width:100%;
  border:0;
  background:#fff;
  border-radius:11px;
  padding:10px 11px;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#334155
}
.participant-suggestion:hover,
.participant-suggestion.active{background:#eff6ff}
.participant-suggestion-main{min-width:0}
.participant-suggestion-name{
  font-size:10.5px;
  font-weight:800;
  color:#1e293b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.participant-suggestion-sub{
  margin-top:3px;
  font-size:8.8px;
  font-weight:650;
  color:#64748b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.participant-suggestion-count{
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:999px;
  background:#fef3c7;
  color:#b45309;
  border:1px solid #fde68a;
  font-size:8px;
  font-weight:800
}
.participant-result{
  margin-top:12px;
  border:1px solid #dbe5f1;
  border-radius:18px;
  background:#fff;
  overflow:hidden
}
.participant-profile-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 15px;
  border-bottom:1px solid #eef2f7
}
.participant-profile-main{min-width:0}
.participant-profile-name{
  font-size:16px;
  font-weight:800;
  color:#1e293b;
  line-height:1.3
}
.participant-profile-school{
  margin-top:4px;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  line-height:1.45
}
.participant-location-badge{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  font-size:8.5px;
  font-weight:800
}
.participant-detail-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:12px 15px
}
.participant-detail{
  min-width:0;
  padding:9px 10px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #eef2f7
}
.participant-detail-label{
  font-size:7.5px;
  font-weight:800;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.035em
}
.participant-detail-value{
  margin-top:4px;
  font-size:9.5px;
  font-weight:800;
  color:#334155;
  line-height:1.35;
  overflow-wrap:anywhere
}
.participant-training-block{
  padding:0 15px 14px
}
.participant-training-title{
  padding-top:11px;
  border-top:1px solid #eef2f7;
  font-size:9px;
  font-weight:800;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.035em
}
.participant-training-list{
  margin-top:8px;
  display:grid;
  gap:7px
}
.participant-training-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff
}
.participant-training-name{
  min-width:0;
  font-size:10px;
  font-weight:800;
  color:#334155;
  line-height:1.35
}
.participant-training-meta{
  margin-top:2px;
  font-size:8.5px;
  font-weight:700;
  color:#64748b
}
.participant-training-from{
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:999px;
  font-size:7.8px;
  font-weight:800
}
.participant-training-from.dinas{background:#dbeafe;color:#1d4ed8}
.participant-training-from.cabdin{background:#fef3c7;color:#b45309}
.participant-search-empty{
  padding:13px;
  text-align:center;
  font-size:9.5px;
  font-weight:700;
  color:#64748b
}

/* Tight matrix rows retained */
@media(max-width:620px){
  .participant-search-input{min-height:42px;padding:8px 39px 8px 10px;font-size:11px}
  .participant-suggestions{max-height:285px}
  .participant-suggestion{padding:8px 9px}
  .participant-suggestion-name{font-size:9.5px}
  .participant-suggestion-sub{font-size:8px}
  .participant-profile-top{padding:12px;gap:8px}
  .participant-profile-name{font-size:14px}
  .participant-profile-school{font-size:9px}
  .participant-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 12px;gap:6px}
  .participant-detail{padding:8px}
  .participant-detail-value{font-size:8.8px}
  .participant-training-block{padding:0 12px 12px}
  .participant-training-item{padding:8px 9px}
  .participant-training-name{font-size:9px}
  .participant-training-meta{font-size:7.8px}

  .table-wrap tbody tr{height:24px!important}
  .table-wrap tbody td{
    height:24px!important;
    padding-top:1px!important;
    padding-bottom:1px!important;
    line-height:1!important;
    vertical-align:middle!important
  }
  .table-wrap tbody td.center{padding-top:0!important;padding-bottom:0!important}
  .table-wrap .badge{padding-top:2px!important;padding-bottom:2px!important;line-height:1!important}
}
@media(max-width:390px){
  .table-wrap tbody tr,.table-wrap tbody td{height:22px!important}
  .table-wrap .badge{padding-top:1px!important;padding-bottom:1px!important}
}


/* V1.7.18 — replace large charts with information-dense KPI cards */
.summary-kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.summary-kpi-card{min-width:0}
.summary-kpi-list{display:grid;gap:7px}
.summary-stage-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
  padding:5px 8px;
  border-radius:9px;
  background:#f8fafc;
  border:1px solid #eef2f7
}
.summary-stage-label:first-child{margin-top:0}
.summary-stage-name{
  font-size:8.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
  color:#475569
}
.summary-stage-date{
  font-size:8px;
  font-weight:700;
  color:#94a3b8
}
.summary-kpi-row{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(155px,.75fr);
  gap:10px;
  align-items:center;
  padding:8px 9px;
  border:1px solid #e8edf4;
  border-radius:12px;
  background:#fff
}
.summary-kpi-main{min-width:0}
.summary-kpi-name{
  font-size:9.5px;
  font-weight:800;
  color:#334155;
  line-height:1.25
}
.summary-kpi-meta{
  margin-top:3px;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  align-items:center
}
.summary-mini-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 6px;
  font-size:7.5px;
  line-height:1;
  font-weight:800
}
.summary-mini-pill.blue{background:#dbeafe;color:#1d4ed8}
.summary-mini-pill.amber{background:#fef3c7;color:#b45309}
.summary-mini-pill.rose{background:#ffe4e6;color:#be123c}
.summary-mini-pill.slate{background:#f1f5f9;color:#64748b}
.summary-kpi-side{
  min-width:0;
  display:grid;
  gap:5px
}
.summary-number-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px
}
.summary-big-number{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.035em;
  color:#1e293b
}
.summary-target-text{
  font-size:8px;
  font-weight:750;
  color:#64748b;
  white-space:nowrap
}
.summary-progress{
  height:5px;
  border-radius:999px;
  background:#eef2f7;
  overflow:hidden
}
.summary-progress>span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#3b82f6,#f59e0b)
}
.summary-source-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px
}
.summary-source-box{
  min-width:0;
  padding:5px 6px;
  border-radius:9px;
  text-align:center
}
.summary-source-box.dinas{background:#eff6ff;border:1px solid #dbeafe}
.summary-source-box.cabdin{background:#fffbeb;border:1px solid #fef3c7}
.summary-source-label{
  font-size:6.8px;
  font-weight:800;
  letter-spacing:.035em
}
.summary-source-box.dinas .summary-source-label{color:#2563eb}
.summary-source-box.cabdin .summary-source-label{color:#d97706}
.summary-source-value{
  margin-top:2px;
  font-size:10px;
  font-weight:800;
  color:#334155
}
.summary-source-value small{
  font-size:7px;
  color:#94a3b8;
  font-weight:700
}
@media(max-width:900px){
  .summary-kpi-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .summary-kpi-grid{gap:10px}
  .summary-kpi-card{padding:12px}
  .summary-kpi-list{gap:5px}
  .summary-stage-label{padding:4px 6px}
  .summary-stage-name{font-size:7.8px}
  .summary-stage-date{font-size:7.2px}
  .summary-kpi-row{
    grid-template-columns:minmax(0,1fr) minmax(125px,.7fr);
    gap:7px;
    padding:6px 7px;
    border-radius:10px
  }
  .summary-kpi-name{font-size:8.5px}
  .summary-mini-pill{font-size:6.8px;padding:2px 5px}
  .summary-big-number{font-size:14px}
  .summary-target-text{font-size:7.2px}
  .summary-progress{height:4px}
  .summary-source-box{padding:4px 5px;border-radius:8px}
  .summary-source-label{font-size:6.2px}
  .summary-source-value{font-size:9px}
}
@media(max-width:390px){
  .summary-kpi-row{grid-template-columns:minmax(0,1fr) 118px}
}


/* V1.7.19 — Sky 400 background + Ivory paper cards, no blue accents */
:root{
  --bg:#38BDF8;
  --bg-soft:#38BDF8;
  --card:#FAF8F2;
  --card-solid:#FAF8F2;
  --surface-tint:#F4F0E7;
  --line:#E5DED0;
  --line-soft:#EEE8DC;
  --text:#2F2A24;
  --muted:#746C61;
  --muted-2:#9A9185;
  --slate:#6B7280;
  --focus:rgba(16,185,129,.14)
}

html{
  background:linear-gradient(
    135deg,
    #0EA5E9 0%,
    #7DD3FC 38%,
    #C4B5FD 68%,
    #F9A8D4 100%
  )!important;
}

body{
  background:
    linear-gradient(
      135deg,
      #0EA5E9 0%,
      #7DD3FC 38%,
      #C4B5FD 68%,
      #F9A8D4 100%
    ) fixed!important;
  color:#2F2A24!important;
}

/* Topbar + main surfaces */
.topbar{
  background:rgba(250,248,242,.94)!important;
  border-bottom:1px solid #E5DED0!important;
}
.card,
.class-card,
.source-summary-card,
.quota-stage-card,
.assignment-result-card,
.participant-result,
.participant-training-item,
.summary-kpi-row{
  background:#FAF8F2!important;
  border-color:#E5DED0!important;
  box-shadow:0 8px 22px rgba(66,45,22,.07)!important;
}
.surface,
.quota-headline,
.participant-search-input,
select{
  background:#F4F0E7!important;
}

/* No blue accents */
.logo{
  background:linear-gradient(135deg,#10B981,#F59E0B)!important;
  box-shadow:0 10px 24px rgba(120,78,18,.16)!important;
}
.btn-primary{
  background:#D97706!important;
  border-color:#D97706!important;
  color:#fff!important;
}
.btn-primary:hover{background:#B45309!important}

/* Focus state */
select:focus,
.quota-kab-input:focus,
.participant-search-input:focus{
  border-color:#10B981!important;
  box-shadow:0 0 0 4px rgba(16,185,129,.12)!important;
  background:#FFFDF8!important;
}

/* KPI dots */
.d-blue,.d-green,.d-amber{background:#10B981!important}
.d-violet{background:#E11D48!important}

/* Progress */
.progress>span,
.summary-progress>span{
  background:linear-gradient(90deg,#10B981,#F59E0B)!important
}

/* DINAS = emerald, CABDIN = amber */
.p-dinas,
.source-summary-card.dinas .source-summary-score,
.source-summary-card.dinas .source-stat.done,
.source-summary-card.dinas .region-chip.done,
.assignment-result-card.dinas .assignment-training,
.summary-mini-pill.blue,
.participant-location-badge,
.participant-training-from.dinas,
.summary-source-box.dinas{
  background:#D1FAE5!important;
  color:#047857!important;
  border-color:#A7F3D0!important
}
.source-summary-card.dinas{border-top-color:#10B981!important}
.source-summary-card.dinas .source-summary-progress span{background:#10B981!important}
.source-summary-card.dinas .source-stat.wait,
.source-summary-card.dinas .region-chip.wait{
  background:#ECFDF5!important;
  color:#059669!important;
  border-color:#6EE7B7!important
}

.p-cabdin,
.source-summary-card.cabdin .source-summary-score,
.source-summary-card.cabdin .source-stat.done,
.source-summary-card.cabdin .region-chip.done,
.assignment-result-card.cabdin .assignment-training,
.participant-training-from.cabdin,
.summary-source-box.cabdin{
  background:#FEF3C7!important;
  color:#B45309!important;
  border-color:#FDE68A!important
}
.source-summary-card.cabdin{border-top-color:#F59E0B!important}
.source-summary-card.cabdin .source-summary-progress span{background:#F59E0B!important}

/* Matrix */
.cell-ok{
  background:#D1FAE5!important;
  color:#047857!important
}
.cell-miss{
  background:#FEF3C7!important;
  color:#B45309!important
}
.cell-na{
  background:#ECE7DE!important;
  color:#8C8275!important
}
.cell-over{
  background:#FFE4E6!important;
  color:#BE123C!important
}
.matrix-legend-mark.ok{
  background:#D1FAE5!important;
  color:#047857!important
}

/* Search suggestions */
.participant-suggestion:hover,
.participant-suggestion.active{
  background:#ECFDF5!important
}
.participant-suggestion-count{
  background:#FEF3C7!important;
  color:#B45309!important;
  border-color:#FDE68A!important
}

/* Secondary paper tones */
.badge,
.summary-stage-label,
.participant-detail{
  background:#F1ECE2!important
}

/* Keep cards readable on strong Sky 400 background */
main{
  background:transparent!important
}


/* V1.7.21 — refined DINAS, matrix pills, larger mobile typography */

/* DINAS: same visual language as completed Kab/Kota chips */
.summary-source-box.dinas{
  background:#D1FAE5!important;
  border:1px solid #86EFAC!important;
  border-radius:999px!important
}
.summary-source-box.dinas .summary-source-label{
  color:#047857!important
}
.summary-source-box.dinas .summary-source-value{
  color:#065F46!important
}
.summary-source-box.dinas .summary-source-value small{
  color:#4B7F70!important
}

/* CABDIN follows the same capsule treatment */
.summary-source-box.cabdin{
  background:#FEF3C7!important;
  border:1px solid #FCD34D!important;
  border-radius:999px!important
}
.summary-source-box.cabdin .summary-source-label{
  color:#B45309!important
}
.summary-source-box.cabdin .summary-source-value{
  color:#92400E!important
}
.summary-source-box.cabdin .summary-source-value small{
  color:#A16207!important
}

/* Matrix: ivory cells + compact status pills */
.cell-ok,
.cell-miss,
.cell-na,
.cell-over{
  background:#FAF8F2!important;
  color:inherit!important
}
.matrix-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  font-weight:800;
  line-height:1;
  border:1px solid transparent
}
.matrix-status-pill.ok{
  background:#D1FAE5;
  color:#047857;
  border-color:#86EFAC
}
.matrix-status-pill.wait{
  background:#FEF3C7;
  color:#B45309;
  border-color:#FCD34D
}
.matrix-status-pill.na{
  background:#ECE7DE;
  color:#857B6F;
  border-color:#DDD5C8
}
.matrix-status-pill.over{
  background:#FFE4E6;
  color:#BE123C;
  border-color:#FDA4AF
}

/* Region chips stay strong emerald */
.source-summary-card.dinas .region-chip.done{
  background:#D1FAE5!important;
  color:#047857!important;
  border-color:#86EFAC!important
}

/* Typography closer to Master Dashboard on iPhone */
@media(max-width:620px){
  body{font-size:12px}

  .brand h1{font-size:15px!important}
  .section-title{font-size:14px!important}
  .muted{font-size:10.5px!important}

  label{font-size:9px!important}
  select,
  .quota-kab-input,
  .participant-search-input{
    font-size:12px!important
  }

  .kpi-label{font-size:8.8px!important}
  .kpi-num{font-size:27px!important}
  .kpi-sub{font-size:9px!important}

  .class-name{font-size:12px!important}
  .class-meta{font-size:9px!important}
  .class-target{font-size:9.5px!important}
  .pill{font-size:9px!important}

  .summary-stage-name{font-size:8.8px!important}
  .summary-stage-date{font-size:8.2px!important}
  .summary-kpi-name{font-size:9.8px!important}
  .summary-mini-pill{font-size:7.8px!important}
  .summary-big-number{font-size:16px!important}
  .summary-target-text{font-size:8px!important}
  .summary-source-label{font-size:8px!important}
  .summary-source-value{font-size:11.5px!important}
  .summary-source-value small{font-size:8px!important}

  .source-summary-title{font-size:12.5px!important}
  .source-summary-score{font-size:10px!important}
  .source-stat{font-size:9px!important}
  .region-chip{font-size:9.5px!important;padding:5px 8px!important}
  .source-block-title{font-size:9px!important}

  .participant-search-help{font-size:9.5px!important}
  .participant-suggestion-name{font-size:10px!important}
  .participant-suggestion-sub{font-size:8.8px!important}
  .participant-suggestion-count{font-size:8px!important}
  .participant-profile-name{font-size:15px!important}
  .participant-profile-school{font-size:10px!important}
  .participant-detail-label{font-size:8px!important}
  .participant-detail-value{font-size:9.5px!important}
  .participant-training-name{font-size:9.5px!important}
  .participant-training-meta{font-size:8.3px!important}

  /* Matrix remains tight but is easier to read */
  .table-wrap table{font-size:10px!important}
  .table-wrap th{font-size:8.6px!important}
  .table-wrap .badge{font-size:8.8px!important;padding:3px 6px!important}
  .table-wrap tbody tr,
  .table-wrap tbody td{
    height:26px!important
  }
  .table-wrap tbody td{
    padding-top:1px!important;
    padding-bottom:1px!important
  }
  .matrix-status-pill{
    min-width:27px;
    height:20px;
    padding:0 7px;
    font-size:10px
  }

  .matrix-legend-item{font-size:8.8px!important}
  .matrix-legend-mark{font-size:9px!important}
}

@media(max-width:390px){
  .table-wrap tbody tr,
  .table-wrap tbody td{height:24px!important}
  .matrix-status-pill{
    min-width:25px;
    height:19px;
    padding:0 6px;
    font-size:9.5px
  }
}


/* V1.7.22 — larger mobile typography */
@media(max-width:620px){
  body{font-size:13px!important}
  .topbar{padding-top:12px!important;padding-bottom:12px!important}
  .brand h1{font-size:17px!important;line-height:1.2!important}
  .brand p{font-size:11.5px!important;line-height:1.45!important}
  .section-title{font-size:15.5px!important;line-height:1.25!important}
  .muted{font-size:11.5px!important;line-height:1.5!important}
  label{font-size:10px!important;line-height:1.35!important}
  select,.quota-kab-input,.participant-search-input{
    min-height:44px!important;
    font-size:13.5px!important;
    font-weight:700!important;
    line-height:1.25!important;
  }
  .btn,.btn-primary,.btn-ghost{
    min-height:42px!important;
    font-size:12px!important;
    font-weight:800!important;
  }
  .kpi-label{font-size:9.6px!important;line-height:1.3!important}
  .kpi-num{font-size:31px!important;line-height:1.05!important}
  .kpi-sub{font-size:10.5px!important;line-height:1.4!important}
  .class-name{font-size:13.5px!important;line-height:1.25!important}
  .class-meta{font-size:10.3px!important;line-height:1.4!important}
  .class-target{font-size:10.5px!important;line-height:1.35!important}
  .pill{font-size:9.8px!important;padding:6px 9px!important;line-height:1.2!important}
  .summary-stage-name{font-size:9.3px!important}
  .summary-stage-date{font-size:8.8px!important}
  .summary-kpi-name{font-size:10.8px!important;line-height:1.35!important}
  .summary-mini-pill{font-size:8.4px!important;padding:3px 6px!important}
  .summary-big-number{font-size:18px!important}
  .summary-target-text{font-size:8.8px!important}
  .summary-source-label{font-size:8.5px!important}
  .summary-source-value{font-size:12.5px!important}
  .summary-source-value small{font-size:8.6px!important}
  .source-summary-title{font-size:13.5px!important;line-height:1.25!important}
  .source-summary-score{font-size:10.8px!important}
  .source-stat{font-size:9.8px!important;padding:6px 9px!important}
  .region-chip{font-size:10.3px!important;padding:6px 9px!important;line-height:1.2!important}
  .source-block-title{font-size:9.6px!important}
  .participant-search-help{font-size:10.2px!important;line-height:1.5!important}
  .participant-suggestion-name{font-size:10.8px!important}
  .participant-suggestion-sub{font-size:9.2px!important}
  .participant-suggestion-count{font-size:8.5px!important}
  .participant-profile-name{font-size:16px!important}
  .participant-profile-school{font-size:10.8px!important}
  .participant-location-badge{font-size:9px!important;padding:7px 10px!important}
  .participant-detail-label{font-size:8.4px!important}
  .participant-detail-value{font-size:10px!important;line-height:1.45!important}
  .participant-training-title{font-size:9.2px!important}
  .participant-training-name{font-size:10px!important}
  .participant-training-meta{font-size:8.6px!important}
  .participant-training-from{font-size:8.3px!important;padding:5px 8px!important}
  .table-wrap table{font-size:10.8px!important}
  .table-wrap th{font-size:9.2px!important;line-height:1.25!important}
  .table-wrap .badge{font-size:9.5px!important;padding:4px 7px!important;line-height:1.2!important}
  .table-wrap tbody tr,.table-wrap tbody td{height:28px!important}
  .matrix-status-pill{
    min-width:28px!important;
    height:21px!important;
    padding:0 8px!important;
    font-size:10.5px!important;
  }
  .matrix-legend-item{font-size:9.2px!important;padding:5px 7px!important}
  .matrix-legend-mark{font-size:9.3px!important}
}
@media(max-width:390px){
  body{font-size:12.6px!important}
  .brand h1{font-size:16px!important}
  .section-title{font-size:15px!important}
  select,.quota-kab-input,.participant-search-input{font-size:13px!important}
  .kpi-num{font-size:29px!important}
  .class-name{font-size:13px!important}
  .summary-kpi-name{font-size:10.4px!important}
  .summary-source-value{font-size:12px!important}
  .table-wrap table{font-size:10.3px!important}
  .table-wrap th{font-size:8.8px!important}
  .table-wrap tbody tr,.table-wrap tbody td{height:27px!important}
}


/* V1.7.23 — larger typography on laptop/desktop too */
@media(min-width:621px){
  body{font-size:14px!important}

  .brand h1{font-size:20px!important;line-height:1.2!important}
  .brand p{font-size:12.5px!important;line-height:1.45!important}
  .section-title{font-size:16.5px!important;line-height:1.3!important}
  .muted{font-size:12px!important;line-height:1.5!important}

  label{font-size:11px!important}
  select,
  .quota-kab-input,
  .participant-search-input{
    min-height:46px!important;
    font-size:14px!important;
    font-weight:700!important;
  }

  .btn,.btn-primary,.btn-ghost{
    min-height:42px!important;
    font-size:12.5px!important;
  }

  .kpi-label{font-size:11px!important}
  .kpi-num{font-size:36px!important}
  .kpi-sub{font-size:11.5px!important}

  .class-name{font-size:14px!important}
  .class-meta{font-size:10.8px!important}
  .class-target{font-size:11px!important}
  .pill{font-size:10.2px!important;padding:6px 10px!important}

  .summary-stage-name{font-size:9.8px!important}
  .summary-stage-date{font-size:9.2px!important}
  .summary-kpi-name{font-size:11.5px!important}
  .summary-mini-pill{font-size:8.8px!important;padding:3px 7px!important}
  .summary-big-number{font-size:20px!important}
  .summary-target-text{font-size:9.2px!important}
  .summary-source-label{font-size:9px!important}
  .summary-source-value{font-size:13.5px!important}
  .summary-source-value small{font-size:9px!important}

  .source-summary-title{font-size:14px!important}
  .source-summary-score{font-size:11.5px!important}
  .source-stat{font-size:10.2px!important;padding:6px 10px!important}
  .region-chip{font-size:10.8px!important;padding:7px 10px!important}
  .source-block-title{font-size:10px!important}

  .participant-search-help{font-size:10.8px!important}
  .participant-suggestion-name{font-size:11.5px!important}
  .participant-suggestion-sub{font-size:9.6px!important}
  .participant-suggestion-count{font-size:8.8px!important}
  .participant-profile-name{font-size:18px!important}
  .participant-profile-school{font-size:11.5px!important}
  .participant-location-badge{font-size:9.5px!important;padding:7px 11px!important}
  .participant-detail-label{font-size:8.8px!important}
  .participant-detail-value{font-size:10.8px!important}
  .participant-training-title{font-size:9.8px!important}
  .participant-training-name{font-size:10.8px!important}
  .participant-training-meta{font-size:9px!important}
  .participant-training-from{font-size:8.8px!important;padding:5px 9px!important}

  .table-wrap table{font-size:11.5px!important}
  .table-wrap th{font-size:9.8px!important}
  .table-wrap .badge{font-size:10.2px!important;padding:5px 8px!important}
  .matrix-status-pill{
    min-width:30px!important;
    height:23px!important;
    font-size:11px!important;
    padding:0 9px!important;
  }
  .matrix-legend-item{font-size:9.8px!important}
  .matrix-legend-mark{font-size:9.8px!important}
}


/* =========================================================
   V1.7.27 — MATCH THE APPROVED MOCKUP
   ========================================================= */

:root{
  --mock-paper:#FFFCF8;
  --mock-line:#E8E0D6;
  --mock-text:#202124;
  --mock-muted:#69645E;
}

/* Page */
html,body{
  background:
    linear-gradient(118deg,#28ABE2 0%,#79D1F1 39%,#B7A8F3 70%,#E5A0DD 100%) fixed!important;
}
main{
  max-width:1600px!important;
  gap:18px!important;
  padding:18px 22px 26px!important;
}
.card,
.class-card{
  background:rgba(255,252,248,.965)!important;
  border:1px solid rgba(226,216,205,.92)!important;
  box-shadow:0 9px 26px rgba(63,54,45,.07)!important;
}
.card{border-radius:22px!important}
.class-card{border-radius:19px!important}

.mock-card{
  position:relative;
  overflow:hidden;
}
.mock-card>.section-head{
  padding-right:92px;
}

/* top-right badge */
.mock-badge-wrap{
  position:absolute;
  right:17px;
  top:14px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.mock-dotfield{
  position:absolute;
  width:72px;
  height:44px;
  right:22px;
  top:-8px;
  opacity:.22;
  background-image:radial-gradient(currentColor 1.15px,transparent 1.25px);
  background-size:8px 8px;
  pointer-events:none;
}
.mock-badge{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:6px 11px;
  border-radius:9px;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
  border:1px solid currentColor;
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(5px);
}
.mock-badge i{font-size:10px;opacity:.7}
.badge-blue{color:#286FC3}
.badge-blue .mock-badge{background:rgba(232,241,255,.80);border-color:rgba(82,137,210,.17)}
.badge-green{color:#15986C}
.badge-green .mock-badge{background:rgba(222,248,237,.82);border-color:rgba(41,170,126,.16)}
.badge-red{color:#D43B58}
.badge-red .mock-badge{background:rgba(255,233,237,.83);border-color:rgba(216,77,102,.16)}
.badge-purple{color:#7457D8}
.badge-purple .mock-badge{background:rgba(238,233,255,.84);border-color:rgba(124,95,210,.16)}
.badge-orange{color:#C66B18}
.badge-orange .mock-badge{background:rgba(255,239,219,.84);border-color:rgba(217,131,54,.16)}

/* search card */
.participant-search-card{
  padding:22px 22px 18px!important;
}
.participant-search-card .section-head{
  margin-bottom:15px!important;
}
.participant-search-card .participant-search-input{
  min-height:55px!important;
  border-radius:14px!important;
  background:rgba(248,246,242,.75)!important;
  border:1px solid #DED8CF!important;
  padding-left:16px!important;
  font-size:14px!important;
}
.participant-search-help{
  color:#58708A!important;
  margin-top:9px!important;
}

/* KPI cards */
.mock-kpis{
  gap:13px!important;
}
.mock-kpi-card{
  min-height:128px;
  padding:20px 21px!important;
  overflow:hidden;
}
.mock-kpi-card .kpi-label{
  color:#56524D!important;
  font-size:10.3px!important;
  letter-spacing:0!important;
}
.mock-kpi-card .kpi-num{
  color:#222326!important;
  font-size:36px!important;
  margin-top:7px!important;
}
.mock-kpi-card .kpi-sub{
  color:#5F5A54!important;
  font-size:10.5px!important;
  margin-top:5px!important;
}

/* faint card-specific illustration */
.mock-kpi-art{
  position:absolute;
  width:116px;
  height:92px;
  right:4px;
  bottom:-8px;
  pointer-events:none;
  color:#7B8794;
}
.mock-kpi-art i{
  position:absolute;
  right:35px;
  bottom:24px;
  font-size:48px;
  color:transparent;
  -webkit-text-stroke:1.2px currentColor;
  opacity:.19;
}
.mock-kpi-art .art-dots{
  position:absolute;
  right:1px;
  bottom:5px;
  width:54px;
  height:69px;
  opacity:.14;
  background-image:radial-gradient(currentColor 1px,transparent 1.25px);
  background-size:7px 7px;
}
.mock-kpi-art::before,
.mock-kpi-art::after{
  content:"";
  position:absolute;
  border:1px solid currentColor;
  opacity:.12;
}
.mock-kpi-art::before{
  width:58px;height:58px;border-radius:50%;
  right:31px;bottom:16px;
}
.mock-kpi-art::after{
  width:34px;height:34px;border-radius:50%;
  right:43px;bottom:28px;
}
.art-green{color:#53A68A}
.art-red{color:#DC7890}
.art-purple{color:#8B78DE}
.art-orange{color:#D59A56}

/* target motif is more concentric */
.mock-kpi-card:nth-child(2) .mock-kpi-art i{
  font-size:34px;right:46px;bottom:34px;
}
.mock-kpi-card:nth-child(3) .mock-kpi-art::before,
.mock-kpi-card:nth-child(3) .mock-kpi-art::after,
.mock-kpi-card:nth-child(4) .mock-kpi-art::before,
.mock-kpi-card:nth-child(4) .mock-kpi-art::after{
  opacity:.08;
}

/* Progress shell */
.progress-shell{
  padding:21px 20px 20px!important;
}
.progress-shell .section-head{
  margin-bottom:16px!important;
}
.progress-shell .section-title{
  font-size:17px!important;
}
.class-grid{
  gap:12px!important;
}
.mock-class-card{
  min-height:176px;
  padding:18px 18px 15px!important;
  position:relative;
  overflow:hidden;
}
.mock-class-card .class-name{
  min-height:0!important;
  font-size:13.2px!important;
  color:#252525!important;
  max-width:72%;
}
.mock-class-card .class-meta{
  margin-top:11px;
  font-size:9.6px!important;
  color:#625D57!important;
}
.mock-class-card .class-numbers{
  margin-top:10px!important;
}
.mock-class-card .class-main{
  font-size:30px!important;
}
.mock-class-card .class-target{
  font-size:9.5px!important;
  text-align:right;
}
.mock-class-card .progress{
  height:6px!important;
  background:#EAE6DF!important;
  margin-top:9px!important;
}
.mock-class-card .progress>span{
  background:linear-gradient(90deg,#12AE79 0%,#18A778 56%,#F39B17 100%)!important;
}
.mock-class-card .pills{
  margin-top:10px!important;
  gap:7px!important;
}
.mock-class-card .pill{
  padding:5px 10px!important;
  font-size:8.8px!important;
}
.p-dinas{background:#DCF8EA!important;color:#0D8A61!important}
.p-cabdin{background:#FFF0CF!important;color:#BD7014!important}
.p-missing{background:#FFE8EB!important;color:#D3274A!important}
.p-over{background:#FFE0E5!important;color:#B91C3C!important}

/* class ghost illustration */
.mock-class-art{
  position:absolute;
  width:100px;height:86px;
  right:3px;top:18px;
  pointer-events:none;
}
.mock-class-art i{
  position:absolute;
  right:17px;top:6px;
  font-size:50px;
  color:transparent;
  -webkit-text-stroke:1px currentColor;
  opacity:.13;
}
.mock-class-art .class-art-dots{
  position:absolute;
  right:0;top:35px;
  width:45px;height:46px;
  opacity:.11;
  background-image:radial-gradient(currentColor 1px,transparent 1.2px);
  background-size:7px 7px;
}
.art-blue{color:#7891A8}
.art-amber{color:#C9A26C}
.art-slate{color:#8C8A88}
.art-green{color:#72A68C}

/* Bottom overview */
.mock-overview-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:13px!important;
}
.overview-card{
  min-height:230px;
  padding:18px 18px 15px!important;
}
.overview-title{
  padding-right:78px;
  font-size:12px;
  line-height:1.25;
  font-weight:800;
  color:#2B2B2C;
}
.overview-sub{
  padding-right:70px;
  margin-top:4px;
  font-size:9.2px;
  line-height:1.3;
  font-weight:650;
  color:#68635E;
}
.overview-content{
  margin-top:13px;
}
.overview-foot{
  margin-top:7px!important;
  font-size:9px!important;
}

/* Bar chart */
.mock-bar-chart{
  position:relative;
  height:157px;
  padding:11px 10px 0 16px;
  border-bottom:1px solid #D9D6D1;
}
.chart-gridlines{
  position:absolute;
  left:15px;right:7px;
  top:12px;bottom:25px;
  display:grid;
  grid-template-rows:repeat(4,1fr);
}
.chart-gridlines span{
  border-top:1px dashed rgba(123,119,113,.16);
}
.mock-bars{
  position:absolute;
  left:30px;right:20px;top:13px;bottom:0;
  display:flex;
  justify-content:space-around;
  align-items:flex-end;
  gap:36px;
}
.mock-bar-item{
  width:78px;
  height:125px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  position:relative;
}
.mock-bar-value{
  font-size:9.5px;
  font-weight:800;
  margin-bottom:5px;
}
.mock-bar{
  width:60px;
  min-height:12px;
  border-radius:3px 3px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.mock-bar.blue{background:linear-gradient(180deg,#3D7DE8,#2F66CB)}
.mock-bar.green{background:linear-gradient(180deg,#20B37B,#12A66F)}
.mock-bar-label{
  position:absolute;
  top:129px;
  width:106px;
  text-align:center;
  font-size:8.2px;
  color:#625E59;
  white-space:nowrap;
}

/* Donut */
.mock-source-layout{
  min-height:160px;
  display:grid;
  grid-template-columns:44% 56%;
  align-items:center;
  gap:6px;
}
.mock-donut{
  width:112px;height:112px;
  margin:auto;
  border-radius:50%;
  background:conic-gradient(#17AD75 0 var(--dinas),#FFAD49 var(--dinas) 100%);
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.025);
}
.mock-donut-hole{
  position:absolute;
  inset:24px;
  border-radius:50%;
  background:#FFFCF8;
  box-shadow:0 0 0 1px rgba(217,208,196,.5);
}
.mock-source-legend{
  display:grid;
  gap:18px;
}
.source-legend-row{
  display:grid;
  grid-template-columns:9px 1fr;
  gap:8px;
  font-size:9.2px;
  line-height:1.4;
  color:#595550;
}
.source-legend-row b{
  display:block;
  font-size:9.2px;
  color:#363431;
  margin-bottom:1px;
}
.source-dot{
  width:8px;height:8px;
  border-radius:2px;
  margin-top:3px;
}
.source-dot.dinas{background:#17AD75}
.source-dot.cabdin{background:#F29A22}

/* Mini matrix */
.mini-matrix{
  display:grid;
  gap:6px;
}
.mini-matrix-row{
  display:grid;
  grid-template-columns:45px 1fr;
  gap:7px;
  align-items:center;
}
.mini-matrix-label{
  font-size:7.7px;
  font-weight:700;
  color:#68635E;
  overflow:hidden;
}
.mini-matrix-cells{
  display:grid;
  grid-template-columns:repeat(16,minmax(0,1fr));
  gap:3px;
}
.mini-matrix-cell{
  aspect-ratio:1;
  border-radius:1px;
  background:#E7E4E0;
}
.mini-matrix-cell.full{background:#6F8FE8}
.mini-matrix-cell.partial{background:#B2ADF1}
.mini-matrix-cell.over{background:#EF9BAA}
.mini-matrix-cell.empty{background:#DDDAD5}
.mini-matrix-legend{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:11px;
  font-size:7.5px;
  color:#6D6862;
}
.mini-matrix-legend span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.mini-matrix-legend i{
  width:7px;height:7px;border-radius:1px;
}
.mini-matrix-legend i.full{background:#6F8FE8}
.mini-matrix-legend i.partial{background:#B2ADF1}
.mini-matrix-legend i.empty{background:#DDDAD5}

/* Region summary */
.region-status-list{
  display:grid;
  margin-top:2px;
}
.region-status-row{
  min-height:36px;
  display:grid;
  grid-template-columns:27px 1fr 28px;
  align-items:center;
  gap:8px;
  border-bottom:1px solid #EEE9E2;
}
.region-status-row:last-child{border-bottom:0}
.status-ring{
  width:24px;height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:2px solid currentColor;
  background:rgba(255,255,255,.42);
}
.status-ring i{font-size:9px}
.status-label{
  font-size:9.2px;
  color:#625D58;
  font-weight:650;
}
.region-status-row b{
  font-size:15px;
  text-align:right;
}
.region-status-row.green{color:#13A672}
.region-status-row.orange{color:#F29A22}
.region-status-row.red{color:#E84D6B}
.region-status-row.slate{color:#6D737B}

/* quota area is brought into the same family */
.quota-explorer{
  padding:20px 20px!important;
}
.quota-explorer .quota-headline{
  border-radius:12px!important;
}

/* Footer */
.footer-note{
  background:rgba(255,252,248,.88)!important;
}

.micro-footer{
  justify-self:end;
  width:max-content;
  margin:-4px 4px 0 0;
  padding:0 2px 2px;
  border:0;
  background:transparent;
  box-shadow:none;
  color:rgba(71,85,105,.62);
  font-size:8.5px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.015em;
  text-align:right;
  text-transform:none;
  white-space:nowrap;
}
#cakarieFooterText{
  display:inline-block;
  opacity:.88;
  transform:translateY(0);
  transition:opacity .32s ease, transform .32s ease;
}
#cakarieFooterText.is-changing{
  opacity:0;
  transform:translateY(2px);
}

@media(max-width:620px){
  .micro-footer{
    margin:-2px 2px 0 0;
    padding-bottom:1px;
    font-size:7.5px;
  }
}

/* Laptop scaling */
@media(min-width:1100px){
  .mock-kpi-card{min-height:136px}
  .overview-card{min-height:238px}
}

/* Tablet */
@media(max-width:1050px){
  .mock-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .class-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Mobile */
@media(max-width:620px){
  main{
    padding:12px!important;
    gap:13px!important;
  }
  .mock-badge-wrap{
    right:11px;
    top:11px;
  }
  .mock-badge{
    min-height:31px;
    padding:5px 9px;
    font-size:9px;
  }
  .mock-dotfield{
    width:58px;height:38px;
    background-size:7px 7px;
  }
  .mock-card>.section-head{
    padding-right:72px;
  }
  .mock-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .mock-kpi-card{
    min-height:123px;
    padding:16px 15px!important;
  }
  .mock-kpi-card .kpi-num{
    font-size:30px!important;
  }
  .mock-kpi-art{
    transform:scale(.78);
    transform-origin:right bottom;
  }
  .class-grid{
    grid-template-columns:1fr!important;
  }
  .mock-class-card{
    min-height:168px;
  }
  .mock-overview-grid{
    grid-template-columns:1fr!important;
  }
  .overview-card{
    min-height:225px;
  }
  .participant-search-card{
    padding:18px 15px 15px!important;
  }
}


/* =========================================================
   V1.7.28 — approved mockup, real line-art illustrations
   ========================================================= */

/* no decorative dot fields */
.mock-dotfield,
.art-dots,
.class-art-dots{
  display:none!important;
}

/* Badge stays clean: no dotted background */
.mock-badge-wrap{
  min-width:auto!important;
}
.mock-badge{
  box-shadow:0 2px 8px rgba(49,43,37,.035);
}

/* Actual vector illustrations like the approved mockup */
.mock-kpi-art{
  width:132px!important;
  height:104px!important;
  right:0!important;
  bottom:-5px!important;
  opacity:1!important;
}
.line-art-svg{
  width:100%;
  height:100%;
  display:block;
  color:inherit;
}
.mock-kpi-art .line-art-svg{
  opacity:.22;
}
.mock-kpi-art::before,
.mock-kpi-art::after{
  display:none!important;
}
.art-green{color:#67A994!important}
.art-red{color:#DE8A9A!important}
.art-purple{color:#998AE0!important}
.art-orange{color:#D7A46A!important}

.mock-class-art{
  width:112px!important;
  height:91px!important;
  right:3px!important;
  top:16px!important;
  color:#918B84;
}
.mock-class-art .line-art-svg{
  opacity:.20;
}
.mock-class-art i{display:none!important}
.art-blue{color:#8798A7!important}
.art-amber{color:#BDA17A!important}
.art-slate{color:#96918A!important}
.art-green{color:#7EAA94!important}

/* more room so illustration never fights the text */
.mock-class-card .class-name{
  max-width:70%!important;
}

/* Detailed matrix and detailed region lists are restored below the 4-card overview */
.detail-matrix-section,
.detail-region-section{
  padding:20px!important;
}
.detail-matrix-section>.section-head,
.detail-region-section>.section-head{
  padding-right:92px;
}
.detail-table-wrap{
  max-height:610px!important;
  background:rgba(255,255,255,.62);
}
.detail-table-wrap table{
  background:rgba(255,252,248,.96)!important;
}
.detail-table-wrap thead{
  background:#F7F3EE!important;
}

/* Make the restored DINAS/CABDIN detail cards harmonize with the mockup */
.detail-region-section .region-source-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.detail-region-section .source-summary-card{
  background:rgba(255,255,255,.70)!important;
  border:1px solid #E9E2D9!important;
  box-shadow:none!important;
}
.detail-region-section .source-summary-card.dinas{
  border-top:4px solid #19A875!important;
}
.detail-region-section .source-summary-card.cabdin{
  border-top:4px solid #F0A12A!important;
}
.detail-region-section .source-summary-card.dinas .source-summary-score,
.detail-region-section .source-summary-card.dinas .source-stat.done,
.detail-region-section .source-summary-card.dinas .region-chip.done{
  background:#DCF8EA!important;
  color:#0B8A60!important;
  border-color:#BCEBD6!important;
}
.detail-region-section .source-summary-card.dinas .source-stat.wait,
.detail-region-section .source-summary-card.dinas .region-chip.wait{
  background:#F7FFFB!important;
  color:#168563!important;
  border-color:#BCEBD6!important;
}
.detail-region-section .source-summary-card.dinas .source-summary-progress span{
  background:#19A875!important;
}
.detail-region-section .source-summary-card.cabdin .source-summary-score,
.detail-region-section .source-summary-card.cabdin .source-stat.done,
.detail-region-section .source-summary-card.cabdin .region-chip.done{
  background:#FFF0CF!important;
  color:#B86C13!important;
  border-color:#F6DA9A!important;
}
.detail-region-section .source-summary-card.cabdin .source-stat.wait,
.detail-region-section .source-summary-card.cabdin .region-chip.wait{
  background:#FFFCF5!important;
  color:#BC731A!important;
  border-color:#F6DA9A!important;
}
.detail-region-section .source-summary-card.cabdin .source-summary-progress span{
  background:#F0A12A!important;
}

/* matrix status pills stay compact/elegant */
.matrix-status-pill{
  display:inline-grid;
  place-items:center;
  min-width:29px;
  height:23px;
  padding:0 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
}
.matrix-status-pill.na{background:#EEECE9;color:#97928B}
.matrix-status-pill.wait{background:#FFF0CF;color:#B86C13}
.matrix-status-pill.ok{background:#DCF8EA;color:#0B8A60}
.matrix-status-pill.over{background:#FFE4E8;color:#CF3654}
.detail-table-wrap .cell-na,
.detail-table-wrap .cell-miss,
.detail-table-wrap .cell-ok,
.detail-table-wrap .cell-over{
  background:transparent!important;
}

/* Keep compact matrix in the mockup card, full matrix below */
.mini-matrix-cell.full{background:#718FE1!important}
.mini-matrix-cell.partial{background:#B3ADF0!important}
.mini-matrix-cell.over{background:#E99BAB!important}
.mini-matrix-cell.empty{background:#DDD9D4!important}

@media(max-width:1050px){
  .detail-region-section .region-source-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .mock-kpi-art{
    width:104px!important;
    height:82px!important;
  }
  .mock-class-art{
    width:92px!important;
    height:75px!important;
    top:16px!important;
  }
  .detail-matrix-section,
  .detail-region-section{
    padding:14px!important;
  }
  .detail-matrix-section>.section-head,
  .detail-region-section>.section-head{
    padding-right:72px;
  }
}


/* =========================================================
   V1.7.29 — iPhone filter refinement
   ========================================================= */

/* Make FROM and KAB/KOTA fields visually identical and more stable on iPhone */
.quota-filter-row.assignment-filter-row{
  align-items:end;
}
.quota-field-group{
  min-width:0;
}
.quota-field-group label{
  margin-bottom:8px!important;
  font-size:12px!important;
  letter-spacing:.02em;
  color:#736b64!important;
}
#quotaFrom,
#quotaKab{
  width:100%!important;
  min-height:64px!important;
  height:64px!important;
  padding:14px 18px!important;
  border-radius:18px!important;
  border:2px solid #E4DDCF!important;
  background:#FFFCF4!important;
  color:#32476B!important;
  font-size:24px!important;
  font-weight:800!important;
  line-height:1.1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
#quotaKab{
  appearance:none;
  -webkit-appearance:none;
}
#quotaFrom{
  appearance:none;
  -webkit-appearance:none;
  padding-right:52px!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 3 18 9'/><polyline points='6 15 12 21 18 15'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:21px 21px;
}
#quotaFrom:focus,
#quotaKab:focus{
  border-color:#AFC6EA!important;
  box-shadow:0 0 0 4px rgba(124,153,208,.12)!important;
  background:#FFFDF8!important;
}
#quotaKab::placeholder{
  color:#7D8AA4;
  opacity:1;
}

.quota-headline{
  min-height:56px!important;
  padding:12px 18px!important;
  border-radius:18px!important;
  font-size:18px!important;
  line-height:1.35!important;
  background:rgba(255,252,244,.78)!important;
  border:2px dashed #D8DDE6!important;
}

/* Result cards from the filter */
.assignment-result-card{
  border-radius:24px!important;
  padding:22px 24px 24px!important;
  border:2px solid #E5DDCF!important;
  box-shadow:0 8px 20px rgba(60,53,46,.045)!important;
}
.assignment-stage{
  font-size:26px!important;
  font-weight:800!important;
  line-height:1.15!important;
  color:#232325!important;
}
.assignment-date{
  margin-top:8px!important;
  font-size:15px!important;
  font-weight:700!important;
  color:#66728C!important;
}
.assignment-training-list{
  gap:12px!important;
  margin-top:18px!important;
}
.assignment-training{
  padding:11px 22px!important;
  border-radius:999px!important;
  font-size:16px!important;
  font-weight:800!important;
  line-height:1.2!important;
  border-width:2px!important;
}
.assignment-empty{
  padding:18px!important;
  border-radius:18px!important;
  font-size:15px!important;
}

/* Keep section header tidy on small screens */
.quota-explorer .section-head{
  align-items:flex-start!important;
}
.quota-explorer .section-title{
  font-size:18px!important;
}
.quota-explorer .muted{
  font-size:13px!important;
}
#lastUpdate{
  margin-top:4px;
  font-size:13px!important;
}

/* iPhone/mobile refinement */
@media(max-width:820px){
  .quota-filter-row.assignment-filter-row{
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
  }
  .quota-field-group label{
    font-size:18px!important;
    margin-bottom:10px!important;
  }
  #quotaFrom,
  #quotaKab{
    min-height:72px!important;
    height:72px!important;
    padding:16px 20px!important;
    border-radius:20px!important;
    font-size:22px!important;
  }
  #quotaFrom{
    padding-right:54px!important;
    background-size:22px 22px;
  }
  .quota-headline{
    min-height:58px!important;
    padding:14px 18px!important;
    font-size:18px!important;
  }
  .quota-overview{
    gap:14px!important;
    margin-top:14px!important;
  }
  .assignment-result-card{
    padding:20px 20px 22px!important;
    border-radius:22px!important;
  }
  .assignment-stage{
    font-size:22px!important;
  }
  .assignment-date{
    font-size:12px!important;
    margin-top:8px!important;
  }
  .assignment-training-list{
    gap:11px!important;
    margin-top:16px!important;
  }
  .assignment-training{
    padding:10px 16px!important;
    font-size:13px!important;
  }
}

@media(max-width:620px){
  .quota-explorer{
    padding:18px 16px!important;
  }
  .quota-explorer .section-head{
    margin-bottom:14px!important;
    padding-right:78px!important;
  }
  .quota-explorer .section-title{
    font-size:28px!important;
    line-height:1.12!important;
  }
  .quota-explorer .muted{
    font-size:16px!important;
    line-height:1.38!important;
  }
  #lastUpdate{
    font-size:16px!important;
    margin-top:10px!important;
  }
  .quota-filter-row.assignment-filter-row{
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    align-items:end!important;
  }
  .quota-field-group label{
    font-size:18px!important;
    margin-bottom:10px!important;
  }
  #quotaFrom,
  #quotaKab{
    min-height:76px!important;
    height:76px!important;
    padding:16px 20px!important;
    border-radius:20px!important;
    font-size:21px!important;
  }
  #quotaFrom{
    padding-right:54px!important;
  }
  .quota-headline{
    margin-top:8px!important;
    min-height:60px!important;
    padding:15px 18px!important;
    font-size:17px!important;
  }
  .assignment-result-card{
    padding:20px 18px 22px!important;
    border-radius:22px!important;
  }
  .assignment-stage{
    font-size:20px!important;
  }
  .assignment-date{
    font-size:11px!important;
    line-height:1.35!important;
  }
  .assignment-training{
    font-size:14px!important;
    padding:10px 16px!important;
  }
  .assignment-empty{
    font-size:14px!important;
  }
}

@media(max-width:430px){
  .quota-filter-row.assignment-filter-row{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  .quota-field-group label{
    font-size:17px!important;
  }
  #quotaFrom,
  #quotaKab{
    min-height:72px!important;
    height:72px!important;
    font-size:18px!important;
    padding:14px 16px!important;
  }
  #quotaFrom{
    padding-right:48px!important;
  }
  .quota-headline{
    font-size:16px!important;
  }
  .assignment-stage{
    font-size:18px!important;
  }
  .assignment-date{
    font-size:10px!important;
  }
  .assignment-training{
    font-size:12px!important;
    padding:9px 14px!important;
  }
}


/* =========================================================
   V1.7.30 — freeze detail matrix headers + Kab/Kota column
   ========================================================= */

/* Safari/iPhone is more reliable with separate borders for sticky table cells */
.detail-table-wrap{
  position:relative;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch;
  isolation:isolate;
}
.detail-table-wrap table{
  border-collapse:separate!important;
  border-spacing:0!important;
}

/* First header row: training names */
.detail-table-wrap #matrixHead tr:first-child th{
  position:sticky!important;
  top:0!important;
  z-index:12;
  height:42px;
  background:#F7F3EE!important;
  border-top:0!important;
  box-shadow:0 1px 0 #E9E2D9;
}

/* Second header row: DINAS / CABDIN */
.detail-table-wrap #matrixHead tr:nth-child(2) th{
  position:sticky!important;
  top:42px!important;
  z-index:11;
  height:38px;
  background:#FBF8F4!important;
  box-shadow:0 1px 0 #E9E2D9;
}

/* Freeze left Kab/Kota column */
.detail-table-wrap #matrixHead tr:first-child th:first-child{
  left:0!important;
  z-index:20!important;
  min-width:150px;
  width:150px;
  background:#F7F3EE!important;
  box-shadow:
    1px 0 0 #E2DBD1,
    8px 0 12px -12px rgba(43,39,34,.32),
    0 1px 0 #E9E2D9;
}

.detail-table-wrap #matrixBody td:first-child{
  position:sticky!important;
  left:0!important;
  z-index:8;
  min-width:150px;
  width:150px;
  background:#FFFCF8!important;
  box-shadow:
    1px 0 0 #E7DFD5,
    8px 0 12px -12px rgba(43,39,34,.28);
}

/* Keep the frozen region label visually solid */
.detail-table-wrap #matrixBody td:first-child .badge{
  position:relative;
  z-index:1;
}

/* Clear, subtle separation under both frozen header rows */
.detail-table-wrap #matrixHead{
  position:relative!important;
  z-index:15;
}

/* iPhone / narrow-screen tuning */
@media(max-width:620px){
  .detail-table-wrap #matrixHead tr:first-child th{
    height:38px;
  }
  .detail-table-wrap #matrixHead tr:nth-child(2) th{
    top:38px!important;
    height:34px;
  }
  .detail-table-wrap #matrixHead tr:first-child th:first-child,
  .detail-table-wrap #matrixBody td:first-child{
    min-width:132px;
    width:132px;
  }
}


/* =========================================================
   V1.7.31 — matrix pagination all devices
   ========================================================= */
.detail-table-wrap{
  max-height:none!important;
  overflow:auto!important;
}
.matrix-pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
}
.matrix-page-info{
  color:#776E66;
  font-size:13px;
  font-weight:700;
}
.matrix-page-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.matrix-page-list{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.matrix-page-btn,
.matrix-nav-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #DDD5C9;
  background:#FFFDF9;
  color:#61584F;
  border-radius:12px;
  min-width:38px;
  height:38px;
  padding:0 12px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:.18s ease;
  box-shadow:0 2px 8px rgba(69,55,43,.04);
}
.matrix-page-btn:hover,
.matrix-nav-btn:hover{
  border-color:#CABEA9;
  background:#FFFCF3;
}
.matrix-page-btn.active{
  background:#2F6FD5;
  border-color:#2F6FD5;
  color:#fff;
  box-shadow:0 8px 18px rgba(47,111,213,.18);
}
.matrix-nav-btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}
@media(max-width:620px){
  .matrix-pagination{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .matrix-page-info{
    font-size:12px;
  }
  .matrix-page-controls{
    width:100%;
    justify-content:flex-start;
    gap:8px;
  }
  .matrix-page-list{
    gap:5px;
  }
  .matrix-page-btn,
  .matrix-nav-btn{
    min-width:34px;
    height:34px;
    padding:0 10px;
    font-size:12px;
    border-radius:10px;
  }
}


/* =========================================================
   V1.7.32 — complete Excel export
   ========================================================= */
.export-card{
  padding:20px!important;
}
.export-card>.section-head{
  padding-right:96px;
  margin-bottom:14px!important;
}
.export-main-row{
  margin-bottom:12px;
}
.export-all-btn{
  width:100%;
  min-height:72px;
  border:1px solid #BFE8D8;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(220,248,234,.90),rgba(248,255,252,.94));
  color:#17694E;
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(34,118,88,.06);
}
.export-all-btn:hover{
  border-color:#91D8BD;
  background:linear-gradient(135deg,rgba(213,247,231,.97),#fff);
}
.export-all-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#ECFBF4;
  border:1px solid #BFE8D8;
  font-size:22px;
  color:#16805D;
}
.export-all-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.export-all-copy b{
  font-size:15px;
  font-weight:800;
  color:#1F4D3E;
}
.export-all-copy small{
  font-size:10px;
  font-weight:700;
  color:#638276;
}
.export-total-count{
  min-width:44px;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #BFE8D8;
  font-size:12px;
  font-weight:800;
  color:#16805D;
}
.export-class-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.export-class-btn{
  min-width:0;
  min-height:74px;
  border:1px solid #E6DED4;
  border-radius:16px;
  background:rgba(255,253,249,.88);
  display:grid;
  grid-template-columns:38px 1fr 24px;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  text-align:left;
  color:#4D4944;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(69,55,43,.03);
}
.export-class-btn:hover{
  border-color:#CFBFAE;
  background:#FFFDF8;
}
.export-class-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#F5F1EB;
  color:#7E756B;
  font-size:15px;
}
.export-class-copy{
  min-width:0;
  display:grid;
  gap:4px;
}
.export-class-copy b{
  font-size:10.5px;
  line-height:1.3;
  font-weight:800;
  color:#383633;
}
.export-class-copy small{
  font-size:10.5px;
  font-weight:700;
  color:#817A72;
}
.export-class-arrow{
  color:#9A9187;
  font-size:12px;
  text-align:center;
}
.export-status{
  margin-top:11px;
  padding:9px 11px;
  border-radius:12px;
  background:#FAF8F4;
  border:1px dashed #DDD5CB;
  font-size:9px;
  line-height:1.45;
  font-weight:650;
  color:#746D66;
}
@media(max-width:1050px){
  .export-class-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:620px){
  .export-card{padding:15px!important;}
  .export-card>.section-head{padding-right:76px;}
  .export-all-btn{
    min-height:68px;
    border-radius:16px;
    grid-template-columns:40px 1fr auto;
    gap:9px;
    padding:10px 11px;
  }
  .export-all-icon{width:38px;height:38px;border-radius:12px;font-size:19px;}
  .export-all-copy b{font-size:13px;}
  .export-all-copy small{font-size:9px;}
  .export-total-count{min-width:38px;height:29px;font-size:11px;}
  .export-class-grid{grid-template-columns:1fr;gap:8px;}
  .export-class-btn{
    min-height:66px;
    border-radius:14px;
    grid-template-columns:36px 1fr 22px;
    padding:9px 10px;
  }
  .export-class-icon{width:34px;height:34px;border-radius:11px;font-size:14px;}
  .export-class-copy b{font-size:10.5px;}
  .export-class-copy small{font-size:9px;}
  .export-status{font-size:8.5px;padding:8px 9px;}
}


/* =========================================================
   V1.7.34 — utility cards collapsed by default
   ========================================================= */
.collapse-head{
  margin-bottom:0!important;
}
.collapse-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.collapse-toggle{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  padding:7px 11px;
  border:1px solid #DDD5C9;
  border-radius:11px;
  background:rgba(255,255,255,.64);
  color:#5F5851;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(55,48,42,.035);
  transition:.18s ease;
}
.collapse-toggle:hover{
  background:#FFFDF9;
  border-color:#CFC4B4;
}
.collapse-toggle i{
  font-size:10px;
  transition:transform .18s ease;
}
.collapse-toggle[aria-expanded="true"] i{
  transform:rotate(180deg);
}
.collapse-body{
  margin-top:14px;
}
.collapse-body[hidden]{
  display:none!important;
}

/* keep the existing decorative badge from fighting the toggle */
.quota-explorer .collapse-head,
.participant-search-card .collapse-head,
.export-card .collapse-head{
  padding-right:88px;
}

@media(max-width:620px){
  .collapse-head{
    align-items:flex-start!important;
    gap:9px!important;
  }
  .collapse-head-actions{
    gap:7px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .collapse-toggle{
    min-height:32px;
    padding:6px 9px;
    border-radius:10px;
    font-size:10px;
  }
  .collapse-body{
    margin-top:12px;
  }
  .quota-explorer .collapse-head,
  .participant-search-card .collapse-head,
  .export-card .collapse-head{
    padding-right:72px!important;
  }
}


/* =========================================================
   V1.7.35 — custom export password dialog
   ========================================================= */
.export-all-end{
  display:flex;
  align-items:center;
  gap:10px;
}
.export-all-lock{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#F4FBF8;
  border:1px solid #BFE8D8;
  color:#14815E;
  font-size:14px;
}
.export-class-btn,
.export-all-btn{
  touch-action:manipulation;
}
.export-class-btn:active,
.export-all-btn:active{
  transform:translateY(1px);
}
.export-class-arrow{
  pointer-events:none;
}

.export-password-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:18px;
}
.export-password-modal[hidden]{
  display:none!important;
}
.export-password-backdrop{
  position:absolute;
  inset:0;
  background:rgba(35,31,28,.42);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}
.export-password-dialog{
  position:relative;
  z-index:1;
  width:min(430px,100%);
  border:1px solid rgba(228,218,207,.95);
  border-radius:26px;
  padding:24px;
  background:#FFFCF8;
  box-shadow:0 28px 80px rgba(38,31,26,.22);
}
.export-password-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#E3F8EE;
  border:1px solid #BFE8D8;
  color:#13845E;
  font-size:19px;
  margin-bottom:15px;
}
.export-password-title{
  font-size:21px;
  line-height:1.2;
  font-weight:800;
  color:#27231F;
}
.export-password-target{
  margin-top:5px;
  font-size:12px;
  line-height:1.5;
  font-weight:650;
  color:#746C64;
}
.export-password-label{
  margin-top:18px;
  margin-bottom:7px;
  display:block;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.055em;
  color:#80766D!important;
}
.export-password-field{
  position:relative;
}
.export-password-field input{
  width:100%;
  min-height:52px;
  padding:12px 48px 12px 14px;
  border:1.5px solid #DED6CC;
  border-radius:14px;
  background:#FFF;
  color:#2B2927;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:15px;
  font-weight:700;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.export-password-field input:focus{
  border-color:#7FC9AE;
  box-shadow:0 0 0 4px rgba(23,132,94,.09);
}
.export-password-eye{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:transparent;
  color:#8A8179;
  cursor:pointer;
}
.export-password-eye:hover{
  background:#F5F0EA;
}
.export-password-error{
  min-height:19px;
  margin-top:8px;
  font-size:11px;
  font-weight:750;
  color:#D33F57;
}
.export-password-actions{
  display:grid;
  grid-template-columns:1fr 1.45fr;
  gap:10px;
  margin-top:9px;
}
.export-password-cancel,
.export-password-confirm{
  min-height:44px;
  border-radius:13px;
  padding:10px 13px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.export-password-cancel{
  border:1px solid #DDD5CB;
  background:#FFF;
  color:#6E655D;
}
.export-password-confirm{
  border:1px solid #168560;
  background:#168560;
  color:#FFF;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.export-password-confirm:hover{
  background:#0F7552;
}
body.export-modal-open{
  overflow:hidden!important;
}

@media(max-width:620px){
  .export-password-modal{
    padding:14px;
    align-items:end;
  }
  .export-password-dialog{
    width:100%;
    border-radius:24px 24px 20px 20px;
    padding:20px;
    margin-bottom:max(0px,env(safe-area-inset-bottom));
  }
  .export-password-title{
    font-size:19px;
  }
  .export-password-target{
    font-size:11px;
  }
  .export-password-field input{
    min-height:54px;
    font-size:16px; /* avoids iOS zoom */
  }
  .export-password-actions{
    grid-template-columns:1fr 1.4fr;
  }
}


/* =========================================================
   V1.7.36 — compact Cek Pelatihan per Wilayah
   ========================================================= */

/* Desktop / laptop */
.quota-explorer{
  padding:16px!important;
}
.quota-explorer .section-head{
  margin-bottom:12px!important;
}
.quota-explorer .section-title{
  font-size:16px!important;
  line-height:1.25!important;
}
.quota-explorer .muted{
  font-size:11px!important;
  line-height:1.4!important;
}
#lastUpdate{
  margin-top:2px!important;
  font-size:11px!important;
}
.quota-filter-row.assignment-filter-row{
  gap:10px!important;
}
.quota-field-group label{
  margin-bottom:6px!important;
  font-size:10px!important;
}
#quotaFrom,
#quotaKab{
  min-height:50px!important;
  height:50px!important;
  padding:10px 14px!important;
  border-radius:14px!important;
  font-size:16px!important;
  border-width:1.5px!important;
}
#quotaFrom{
  padding-right:44px!important;
  background-position:right 13px center!important;
  background-size:17px 17px!important;
}
.quota-headline{
  min-height:44px!important;
  margin-top:0!important;
  padding:9px 14px!important;
  border-radius:14px!important;
  font-size:13px!important;
  line-height:1.35!important;
  border-width:1.5px!important;
}
.quota-overview{
  gap:10px!important;
  margin-top:10px!important;
}
.assignment-result-card{
  padding:15px 16px 16px!important;
  border-radius:17px!important;
  border-width:1.5px!important;
}
.assignment-stage{
  font-size:18px!important;
  line-height:1.2!important;
}
.assignment-date{
  margin-top:5px!important;
  font-size:11.5px!important;
  line-height:1.35!important;
}
.assignment-training-list{
  gap:8px!important;
  margin-top:12px!important;
}
.assignment-training{
  padding:7px 13px!important;
  font-size:12px!important;
  line-height:1.2!important;
  border-width:1.5px!important;
}
.assignment-empty{
  padding:13px!important;
  border-radius:14px!important;
  font-size:12px!important;
}

/* Tablet / phone */
@media(max-width:820px){
  .quota-explorer{
    padding:14px!important;
  }
  .quota-explorer .section-title{
    font-size:17px!important;
  }
  .quota-explorer .muted{
    font-size:11px!important;
  }
  #lastUpdate{
    font-size:10.5px!important;
  }
  .quota-filter-row.assignment-filter-row{
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }
  .quota-field-group label{
    font-size:11px!important;
    margin-bottom:6px!important;
  }
  #quotaFrom,
  #quotaKab{
    min-height:52px!important;
    height:52px!important;
    padding:11px 13px!important;
    border-radius:14px!important;
    font-size:16px!important; /* prevents iOS input zoom */
  }
  #quotaFrom{
    padding-right:42px!important;
    background-position:right 12px center!important;
    background-size:17px 17px!important;
  }
  .quota-headline{
    min-height:46px!important;
    padding:10px 13px!important;
    font-size:13px!important;
  }
  .quota-overview{
    gap:9px!important;
    margin-top:9px!important;
  }
  .assignment-result-card{
    padding:14px 14px 15px!important;
    border-radius:16px!important;
  }
  .assignment-stage{
    font-size:17px!important;
  }
  .assignment-date{
    margin-top:4px!important;
    font-size:11px!important;
  }
  .assignment-training-list{
    gap:7px!important;
    margin-top:10px!important;
  }
  .assignment-training{
    padding:7px 12px!important;
    font-size:12px!important;
  }
}

/* iPhone / Android narrow widths */
@media(max-width:620px){
  .quota-explorer{
    padding:13px!important;
  }
  .quota-explorer .section-head{
    margin-bottom:10px!important;
  }
  .quota-explorer .section-title{
    font-size:17px!important;
    line-height:1.2!important;
  }
  .quota-explorer .muted{
    font-size:10.5px!important;
    line-height:1.35!important;
  }
  #lastUpdate{
    margin-top:4px!important;
    font-size:10px!important;
  }
  .quota-filter-row.assignment-filter-row{
    gap:8px!important;
  }
  .quota-field-group label{
    font-size:10.5px!important;
    margin-bottom:5px!important;
  }
  #quotaFrom,
  #quotaKab{
    min-height:50px!important;
    height:50px!important;
    padding:10px 12px!important;
    border-radius:13px!important;
    font-size:16px!important;
  }
  #quotaFrom{
    padding-right:40px!important;
    background-size:16px 16px!important;
  }
  .quota-headline{
    min-height:44px!important;
    padding:9px 12px!important;
    border-radius:13px!important;
    font-size:12.5px!important;
  }
  .assignment-result-card{
    padding:13px 13px 14px!important;
    border-radius:15px!important;
  }
  .assignment-stage{
    font-size:16px!important;
  }
  .assignment-date{
    font-size:10.5px!important;
  }
  .assignment-training{
    padding:6px 11px!important;
    font-size:11.5px!important;
  }
}

@media(max-width:430px){
  #quotaFrom,
  #quotaKab{
    min-height:48px!important;
    height:48px!important;
    font-size:16px!important;
  }
  .assignment-stage{
    font-size:15.5px!important;
  }
  .assignment-training{
    font-size:11px!important;
    padding:6px 10px!important;
  }
}


/* =========================================================
   V1.7.37 — consistent Buka/Tutup placement
   ========================================================= */
.utility-card{position:relative}
.utility-card .utility-header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:14px!important;
  width:100%;
  margin:0!important;
  padding:0!important;
}
.utility-card .utility-copy{min-width:0;padding-top:1px}
.utility-card .utility-subtitle{margin-top:4px!important}
.utility-card .utility-update{
  margin-top:7px!important;
  font-size:10px!important;
  line-height:1.35!important;
  white-space:nowrap;
}
.utility-card .utility-actions{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  min-width:max-content;
  margin:0;
}
.utility-card .utility-actions .collapse-toggle{
  flex:0 0 auto;
  margin:0!important;
}
.utility-card .utility-actions .mock-badge-wrap{
  position:static!important;
  inset:auto!important;
  right:auto!important;
  top:auto!important;
  z-index:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
}
.utility-card .collapse-body{margin-top:14px!important}
.utility-card .collapse-head,
.quota-explorer.utility-card .collapse-head,
.participant-search-card.utility-card .collapse-head,
.export-card.utility-card .collapse-head{padding-right:0!important}
.utility-card .collapse-toggle{
  min-width:76px;
  min-height:36px;
  padding:7px 11px;
  border-radius:11px;
  font-size:11px;
}
@media(max-width:620px){
  .utility-card .utility-header{
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:8px!important;
  }
  .utility-card .utility-actions{gap:6px}
  .utility-card .collapse-toggle{
    min-width:66px;
    min-height:32px;
    padding:6px 8px;
    border-radius:10px;
    font-size:10px;
  }
  .utility-card .utility-actions .mock-badge{
    min-height:32px!important;
    padding:6px 9px!important;
    font-size:9px!important;
    border-radius:10px!important;
  }
  .utility-card .utility-update{
    margin-top:6px!important;
    font-size:9.5px!important;
    white-space:normal;
  }
  .utility-card .collapse-body{margin-top:12px!important}
}
@media(max-width:390px){
  .utility-card .utility-header{gap:6px!important}
  .utility-card .utility-actions{gap:5px}
  .utility-card .collapse-toggle{
    min-width:61px;
    padding-left:7px;
    padding-right:7px;
  }
  .utility-card .utility-actions .mock-badge{
    padding-left:7px!important;
    padding-right:7px!important;
  }
}



/* =========================================================
   V1.7.38 — export wilayah yang belum mengisi
   Menambah mode export tanpa mengubah export peserta yang sudah stabil.
   ========================================================= */
.export-subsection{display:grid;gap:10px}
.export-subhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 1px}
.export-subhead-copy{min-width:0}
.export-subhead-title{font-size:11px;font-weight:800;color:#3F3A34;line-height:1.3}
.export-subhead-note{margin-top:3px;font-size:9px;font-weight:650;color:#7A7167;line-height:1.45}
.export-divider{height:1px;background:#E8E0D6;margin:15px 0}
.export-missing-all-btn{
  border-color:#F2D4A5!important;
  background:linear-gradient(135deg,rgba(255,244,220,.92),rgba(255,252,246,.96))!important;
  color:#985F16!important;
}
.export-missing-all-btn:hover{
  border-color:#E7BE7E!important;
  background:linear-gradient(135deg,rgba(255,239,205,.98),#fff)!important;
}
.export-missing-all-btn .export-all-icon{
  background:#FFF7E7!important;
  border-color:#F2D4A5!important;
  color:#C77713!important;
}
.export-missing-all-btn .export-all-copy b{color:#704817!important}
.export-missing-all-btn .export-all-copy small{color:#96754D!important}
.export-missing-all-btn .export-total-count{
  border-color:#F2D4A5!important;
  color:#B46810!important;
}
.export-missing-all-btn .export-all-lock{
  background:#FFF9ED!important;
  border-color:#F2D4A5!important;
  color:#B46810!important;
}
.export-class-btn.export-missing-class-btn{
  border-color:#EBDCC6;
  background:#FFFCF7;
}
.export-class-btn.export-missing-class-btn:hover{
  border-color:#E2C49A;
  background:#FFF8EC;
}
.export-missing-class-btn .export-class-icon{
  background:#FFF3DD;
  color:#B86C14;
}
.export-missing-class-btn .export-class-copy small{color:#9A6B34}
.export-missing-count-zero{opacity:.66}
@media(max-width:620px){
  .export-subhead{gap:8px}
  .export-subhead-title{font-size:10.5px}
  .export-subhead-note{font-size:8.5px}
  .export-divider{margin:12px 0}
}

/* =========================================================
   V1.7.40 — KPI tahap: pendaftar + sisa target per tahap
   ========================================================= */
.kpi-stage-split{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  position:relative;
  z-index:2;
}
.kpi-stage-split span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #DAD4CA;
  background:rgba(255,253,248,.90);
  color:#5F5A54;
  font-size:11.8px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset;
}
.kpi-stage-split span:first-child{
  background:#F1EEFF;
  border-color:#D6CCFF;
  color:#6654D9;
}
.kpi-stage-split span:last-child{
  background:#FFEAF2;
  border-color:#F5C6D7;
  color:#C64778;
}
.kpi-stage-split b{
  font-size:9.8px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.035em;
}
@media(max-width:620px){
  .kpi-stage-split{
    gap:5px;
    margin-top:6px;
  }
  .kpi-stage-split span{
    min-height:23px;
    padding:4px 8px;
    font-size:9.4px;
    gap:4px;
  }
  .kpi-stage-split b{font-size:8px}
}



/* =========================================================
   V1.7.48 — KESESUAIAN PENGISIAN · COMPACT SHEET + LIVE SYNC
   DINAS  = PAUD/TK, SD, SMP
   CABDIN = SMA, SMK, SLB
   ========================================================= */
.wrong-room-card{
  border-color:#E2E8F0!important;
  overflow:hidden;
}
.wrong-room-card.has-issues{
  box-shadow:0 8px 22px rgba(15,23,42,.055)!important;
}
.wrong-sheet-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.wrong-sheet-title{
  font-size:14px;
  font-weight:850;
  line-height:1.25;
  color:#2F2A24;
}
.wrong-sheet-subtitle{
  margin-top:4px;
  font-size:11px;
  font-weight:700;
  color:#746C61;
  line-height:1.35;
}
.wrong-sheet-meta{
  flex:0 0 auto;
  min-width:210px;
  text-align:right;
}
.wrong-sheet-meta-label{
  font-size:7px;
  font-weight:850;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:#94A3B8;
}
.wrong-sheet-meta-time{
  margin-top:3px;
  font-size:10.5px;
  line-height:1.25;
  font-weight:800;
  color:#475569;
  white-space:nowrap;
}
.wrong-sheet-live{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid #BBF7D0;
  background:#F0FDF4;
  color:#15803D;
  font-size:8.5px;
  font-weight:850;
}
.wrong-sheet-live.syncing{
  border-color:#FDE68A;
  background:#FFFBEB;
  color:#B45309;
}
.wrong-sheet-live.error{
  border-color:#FECDD3;
  background:#FFF1F2;
  color:#BE123C;
}
.wrong-sheet-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-top:9px;
  padding:5px 7px;
  min-height:28px;
  border:1px solid #DADCE0;
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:#F8F9FA;
}
.wrong-sheet-toolbar-left,
.wrong-sheet-toolbar-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.wrong-sheet-count{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:9.5px;
  font-weight:850;
  color:#3C4043;
}
.wrong-sheet-count b{
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:#FCE8E6;
  color:#B3261E;
  font-size:9px;
}
.wrong-sheet-count.ok b{
  background:#E6F4EA;
  color:#137333;
}
.wrong-sheet-mini{
  padding-left:7px;
  border-left:1px solid #DADCE0;
  font-size:8.5px;
  font-weight:750;
  color:#5F6368;
  white-space:nowrap;
}
.wrong-sheet-hint{
  font-size:8.5px;
  font-weight:700;
  color:#80868B;
}
.wrong-room-table-wrap{
  margin-top:0!important;
  width:100%;
  max-height:380px;
  border:1px solid #DADCE0!important;
  border-radius:0 0 8px 8px!important;
  background:#fff!important;
  overflow:auto!important;
}
.wrong-room-table-wrap table{
  width:100%!important;
  min-width:0!important;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  background:#fff!important;
  font-family:Arial,Helvetica,sans-serif;
}
.wrong-room-table-wrap thead{
  position:sticky;
  top:0;
  z-index:4;
  background:#F8F9FA!important;
}
.wrong-room-table-wrap th{
  height:27px;
  padding:4px 6px;
  border-top:0!important;
  border-right:1px solid #DADCE0;
  border-bottom:1px solid #DADCE0;
  background:#F8F9FA!important;
  color:#5F6368!important;
  font-size:11.5px!important;
  font-weight:700!important;
  text-transform:none!important;
  letter-spacing:0!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wrong-room-table-wrap td{
  height:29px;
  padding:4px 6px;
  border-top:0!important;
  border-right:1px solid #E8EAED;
  border-bottom:1px solid #E8EAED;
  background:#fff!important;
  color:#202124!important;
  font-size:13px!important;
  font-weight:500!important;
  vertical-align:middle!important;
  line-height:1.2!important;
}
.wrong-room-table-wrap th:last-child,
.wrong-room-table-wrap td:last-child{border-right:0}
.wrong-room-table-wrap tbody tr:hover td{background:#F8FBFF!important}

/* Tujuh kolom: 5 informasi utama + 2 kolom pengisian */
.wrong-col-row{width:5%}
.wrong-col-name{width:24%}
.wrong-col-inst{width:22%}
.wrong-col-level{width:8%}
.wrong-col-training{width:17%}
.wrong-col-expected{width:12%}
.wrong-col-actual{width:12%}

.wrong-group-head{
  text-align:center!important;
  background:#F1F3F4!important;
  color:#475569!important;
}
.wrong-sheet-room-cell{
  text-align:center!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.wrong-sheet-room-cell.dinas{color:#047857!important}
.wrong-sheet-room-cell.cabdin{color:#B45309!important}

.wrong-sheet-rownum{
  text-align:center!important;
  color:#80868B!important;
  background:#F8F9FA!important;
  font-size:10.5px!important;
  font-weight:700!important;
  white-space:nowrap;
}
.wrong-sheet-row-link{
  color:#1A73E8;
  font-size:9px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.wrong-sheet-row-link:hover{text-decoration:underline}
.wrong-sheet-name{
  font-weight:700!important;
  overflow-wrap:anywhere;
  white-space:normal!important;
}
.wrong-sheet-instansi{
  overflow-wrap:anywhere;
  white-space:normal!important;
}
.wrong-sheet-kab-sub{
  display:block;
  margin-top:1px;
  color:#80868B;
  font-size:10px;
  font-weight:500;
}
.wrong-sheet-jenjang{
  text-align:center!important;
  white-space:normal!important;
}
.wrong-sheet-source{
  display:block;
  margin-top:1px;
  color:#9AA0A6;
  font-size:9px;
  font-weight:500;
}
.wrong-sheet-pelatihan{
  overflow-wrap:anywhere;
  white-space:normal!important;
}
.wrong-sheet-room-flow{
  text-align:center!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.wrong-sheet-room-flow .from.dinas{color:#047857}
.wrong-sheet-room-flow .from.cabdin{color:#B45309}
.wrong-sheet-room-flow .arrow{
  display:inline-block;
  margin:0 3px;
  color:#9AA0A6;
  font-weight:400;
}
.wrong-sheet-room-flow .to.dinas{color:#047857}
.wrong-sheet-room-flow .to.cabdin{color:#B45309}
.wrong-sheet-empty{
  height:50px!important;
  text-align:center!important;
  color:#5F6368!important;
  font-size:10px!important;
}
.participant-training-item.room-error{border-color:#FECDD3!important;background:#FFF8F9!important}
.participant-room-stack{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.participant-room-error{
  display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;
  background:#FFE4E6;color:#BE123C;border:1px solid #FECDD3;
  font-size:7.4px;font-weight:900;white-space:nowrap
}

@media(max-width:900px){
  .wrong-sheet-meta{min-width:185px}
  .wrong-sheet-meta-time{font-size:10px}
  .wrong-room-table-wrap table{
    min-width:660px!important;
  }
  .wrong-col-row{width:50px}
  .wrong-col-name{width:150px}
  .wrong-col-inst{width:145px}
  .wrong-col-level{width:60px}
  .wrong-col-training{width:95px}
  .wrong-col-expected{width:80px}
  .wrong-col-actual{width:80px}
}

@media(max-width:620px){
  .wrong-sheet-header{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .wrong-sheet-meta{
    width:100%;
    min-width:0;
    text-align:left;
  }
  .wrong-sheet-meta-time{white-space:normal}
  .wrong-sheet-toolbar{
    margin-top:7px;
    padding:4px 6px;
  }
  .wrong-sheet-toolbar-right{display:none}
  .wrong-sheet-mini{font-size:8px}
  .wrong-room-table-wrap{max-height:330px}
  .wrong-room-table-wrap table{
    min-width:640px!important;
  }
  .wrong-room-table-wrap th{
    height:30px;
    padding:4px 6px;
    font-size:9.5px!important;
  }
  .wrong-room-table-wrap td{
    height:34px;
    padding:5px 6px;
    font-size:11px!important;
  }
  .wrong-col-row{width:48px}
  .wrong-col-name{width:135px}
  .wrong-col-inst{width:140px}
  .wrong-col-level{width:58px}
  .wrong-col-training{width:95px}
  .wrong-col-expected{width:80px}
  .wrong-col-actual{width:84px}
  .wrong-sheet-kab-sub{font-size:8.5px}
  .wrong-sheet-source{display:none}
  .wrong-sheet-row-link{font-size:9px}
}


/* V1.7.52 — Kelengkapan Belajar.id */
.belajar-card{
  border-color:#E2E8F0!important;
  overflow:hidden;
}
.belajar-card.has-issues{
  box-shadow:0 8px 22px rgba(15,23,42,.055)!important;
}
.belajar-table-wrap{
  margin-top:0!important;
  width:100%;
  max-height:380px;
  border:1px solid #DADCE0!important;
  border-radius:0 0 8px 8px!important;
  background:#fff!important;
  overflow:auto!important;
}
.belajar-table-wrap table{
  width:100%!important;
  min-width:0!important;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  background:#fff!important;
  font-family:Arial,Helvetica,sans-serif;
}
.belajar-table-wrap thead{
  position:sticky;
  top:0;
  z-index:4;
  background:#F8F9FA!important;
}
.belajar-table-wrap th{
  height:27px;
  padding:4px 6px;
  border-top:0!important;
  border-right:1px solid #DADCE0;
  border-bottom:1px solid #DADCE0;
  background:#F8F9FA!important;
  color:#5F6368!important;
  font-size:11.5px!important;
  font-weight:700!important;
  text-transform:none!important;
  letter-spacing:0!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.belajar-table-wrap td{
  height:29px;
  padding:4px 6px;
  border-top:0!important;
  border-right:1px solid #E8EAED;
  border-bottom:1px solid #E8EAED;
  background:#fff!important;
  color:#202124!important;
  font-size:13px!important;
  font-weight:500!important;
  vertical-align:middle!important;
  line-height:1.2!important;
}
.belajar-table-wrap th:last-child,
.belajar-table-wrap td:last-child{border-right:0}
.belajar-table-wrap tbody tr:hover td{background:#F8FBFF!important}

.belajar-col-row{width:5%}
.belajar-col-name{width:24%}
.belajar-col-inst{width:23%}
.belajar-col-level{width:8%}
.belajar-col-training{width:17%}
.belajar-col-wali{width:10%}
.belajar-col-status{width:13%}

.belajar-sheet-rownum{
  text-align:center!important;
  color:#80868B!important;
  background:#F8F9FA!important;
  font-size:10.5px!important;
  font-weight:700!important;
  white-space:nowrap;
}
.belajar-sheet-name{
  font-weight:700!important;
  overflow-wrap:anywhere;
  white-space:normal!important;
}
.belajar-sheet-instansi{
  overflow-wrap:anywhere;
  white-space:normal!important;
}
.belajar-sheet-jenjang{
  text-align:center!important;
  white-space:normal!important;
}
.belajar-sheet-pelatihan{
  overflow-wrap:anywhere;
  white-space:normal!important;
}
.belajar-sheet-wali{
  text-align:center!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.belajar-sheet-wali.dinas{color:#047857!important}
.belajar-sheet-wali.cabdin{color:#B45309!important}
.belajar-sheet-status{
  text-align:center!important;
  color:#B45309!important;
  font-weight:700!important;
  white-space:normal!important;
  background:#FFFBEB!important;
}
.belajar-sheet-empty{
  height:50px!important;
  text-align:center!important;
  color:#5F6368!important;
  font-size:10px!important;
}

@media(max-width:900px){
  .belajar-table-wrap table{min-width:660px!important}
  .belajar-col-row{width:50px}
  .belajar-col-name{width:150px}
  .belajar-col-inst{width:150px}
  .belajar-col-level{width:60px}
  .belajar-col-training{width:105px}
  .belajar-col-wali{width:75px}
  .belajar-col-status{width:90px}
}
@media(max-width:620px){
  .belajar-table-wrap{max-height:330px}
  .belajar-table-wrap table{min-width:640px!important}
  .belajar-table-wrap th{
    height:25px!important;
    padding:3px 5px!important;
    font-size:9.5px!important;
  }
  .belajar-table-wrap td{
    height:29px!important;
    padding:4px 5px!important;
    font-size:11px!important;
  }
  .belajar-col-row{width:48px}
  .belajar-col-name{width:135px}
  .belajar-col-inst{width:140px}
  .belajar-col-level{width:58px}
  .belajar-col-training{width:95px}
  .belajar-col-wali{width:76px}
  .belajar-col-status{width:88px}
}


/* V1.7.53 — Belajar.id: bright green identity + collapsed + download */
.belajar-card{
  position:relative;
  border:1px solid #86EFAC!important;
  border-top:5px solid #22C55E!important;
  background:linear-gradient(180deg,#F0FDF4 0,#FAF8F2 118px)!important;
  box-shadow:0 9px 24px rgba(34,197,94,.10)!important;
}
.belajar-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#4ADE80;
  opacity:.95;
  pointer-events:none;
}
.belajar-card.has-issues{
  box-shadow:0 10px 28px rgba(34,197,94,.14)!important;
}
.belajar-sheet-header{
  align-items:center!important;
}
.belajar-header-copy{
  min-width:0;
  flex:1 1 auto;
}
.belajar-card .wrong-sheet-title{
  color:#166534!important;
}
.belajar-card .wrong-sheet-subtitle{
  color:#47705A!important;
}
.belajar-header-side{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:13px;
}
.belajar-sheet-meta{
  min-width:190px!important;
}
.belajar-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
.belajar-header-count{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:32px;
  padding:5px 9px;
  border:1px solid #86EFAC;
  border-radius:10px;
  background:#DCFCE7;
  color:#166534;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.belajar-header-count b{
  min-width:20px;
  height:20px;
  padding:0 5px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:#22C55E;
  color:#fff;
  font-size:9px;
}
.belajar-header-count.ok{
  background:#F0FDF4;
  color:#15803D;
}
.belajar-download-btn{
  appearance:none;
  -webkit-appearance:none;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid #16A34A;
  border-radius:10px;
  background:#22C55E;
  color:#fff;
  font:inherit;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(34,197,94,.18);
  transition:.18s ease;
}
.belajar-download-btn:hover{
  background:#16A34A;
  border-color:#15803D;
  transform:translateY(-1px);
}
.belajar-download-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.belajar-collapse-toggle{
  border-color:#86EFAC!important;
  background:#F0FDF4!important;
  color:#166534!important;
}
.belajar-collapse-toggle:hover{
  background:#DCFCE7!important;
  border-color:#4ADE80!important;
}
.belajar-card .wrong-sheet-toolbar{
  border-color:#BBF7D0!important;
  background:#F0FDF4!important;
}
.belajar-card .belajar-table-wrap{
  border-color:#BBF7D0!important;
}
.belajar-card .belajar-table-wrap th{
  background:#ECFDF5!important;
  border-bottom-color:#BBF7D0!important;
}
.belajar-card .belajar-sheet-status{
  background:#F0FDF4!important;
  color:#15803D!important;
}

@media(max-width:1000px){
  .belajar-sheet-header{
    align-items:flex-start!important;
  }
  .belajar-header-side{
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
  }
  .belajar-sheet-meta{
    min-width:0!important;
  }
}
@media(max-width:620px){
  .belajar-sheet-header{
    display:block!important;
  }
  .belajar-header-side{
    width:100%;
    margin-top:10px;
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
  }
  .belajar-sheet-meta{
    flex:1 1 auto;
    text-align:left!important;
  }
  .belajar-header-actions{
    flex:0 0 auto;
    gap:5px;
  }
  .belajar-header-count{
    min-height:30px;
    padding:4px 7px;
    font-size:8px;
  }
  .belajar-header-count b{
    min-width:18px;
    height:18px;
    font-size:8px;
  }
  .belajar-download-btn{
    min-height:32px;
    padding:6px 8px;
    font-size:9px;
  }
  .belajar-download-btn span{
    display:none;
  }
  .belajar-download-btn i{
    font-size:11px;
  }
}
@media(max-width:390px){
  .belajar-header-side{
    align-items:flex-start;
  }
  .belajar-header-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
}


/* V1.7.54 — Status Pengisian per Wilayah */
.region-status-card{
  position:relative;
  overflow:hidden;
  border:1px solid #BAE6FD!important;
  border-top:5px solid #38BDF8!important;
  background:linear-gradient(180deg,#F0F9FF 0,#FAF8F2 132px)!important;
  box-shadow:0 9px 24px rgba(14,165,233,.08)!important;
}
.region-status-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#7DD3FC;
  pointer-events:none;
}
.region-status-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.region-status-copy{min-width:0}
.region-status-title{
  font-size:14px;
  font-weight:850;
  color:#0F172A;
  line-height:1.3;
}
.region-status-sub{
  margin-top:4px;
  font-size:10px;
  line-height:1.5;
  color:#64748B;
  font-weight:650;
}
.region-status-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid #BAE6FD;
  border-radius:999px;
  background:#E0F2FE;
  color:#0369A1;
  font-size:8.5px;
  font-weight:850;
  white-space:nowrap;
}
.region-status-control{
  margin-top:14px;
  display:grid;
  grid-template-columns:minmax(240px,360px) minmax(0,1fr);
  gap:11px;
  align-items:end;
}
.region-status-input{
  width:100%;
  min-height:42px;
  padding:9px 11px;
  border:1px solid #BAE6FD;
  border-radius:12px;
  background:#fff;
  color:#334155;
  font:inherit;
  font-size:11.5px;
  font-weight:750;
  outline:none;
}
.region-status-input:focus{
  border-color:#38BDF8;
  box-shadow:0 0 0 4px rgba(56,189,248,.12);
}
.region-status-headline{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 11px;
  border:1px dashed #BAE6FD;
  border-radius:12px;
  background:rgba(255,255,255,.7);
  color:#64748B;
  font-size:10.5px;
  font-weight:700;
}
.region-status-headline strong{
  color:#0F172A;
  font-size:11.5px;
}
.region-status-overall{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:999px;
  font-size:8.5px;
  font-weight:850;
  white-space:nowrap;
}
.region-status-overall.wait{
  background:#FEF3C7;
  color:#92400E;
  border:1px solid #FDE68A;
}
.region-status-overall.ok{
  background:#DCFCE7;
  color:#166534;
  border:1px solid #86EFAC;
}
.region-status-summary{
  margin-top:11px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.region-status-summary-card{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid #E2E8F0;
}
.region-status-summary-card.dinas{
  border-color:#A7F3D0;
  background:#F0FDF4;
}
.region-status-summary-card.cabdin{
  border-color:#FDE68A;
  background:#FFFBEB;
}
.region-status-summary-main{min-width:0}
.region-status-summary-label{
  font-size:9px;
  font-weight:850;
  letter-spacing:.035em;
}
.region-status-summary-card.dinas .region-status-summary-label{color:#047857}
.region-status-summary-card.cabdin .region-status-summary-label{color:#B45309}
.region-status-summary-text{
  margin-top:3px;
  font-size:9.5px;
  font-weight:700;
  color:#64748B;
  line-height:1.35;
}
.region-status-summary-score{
  flex:0 0 auto;
  min-width:62px;
  text-align:center;
  padding:7px 8px;
  border-radius:11px;
  background:#fff;
  font-size:15px;
  font-weight:900;
  color:#1E293B;
  letter-spacing:-.03em;
}
.region-status-summary-score small{
  display:block;
  margin-top:1px;
  font-size:7px;
  color:#94A3B8;
  font-weight:800;
  letter-spacing:0;
}
.region-status-grid{
  margin-top:10px;
  display:grid;
  gap:7px;
}
.region-status-row{
  display:grid;
  grid-template-columns:minmax(180px,1.15fr) minmax(145px,.85fr) minmax(145px,.85fr);
  gap:8px;
  align-items:stretch;
  padding:8px;
  border:1px solid #E2E8F0;
  border-radius:14px;
  background:#fff;
}
.region-status-training{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 6px;
}
.region-status-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#F1F5F9;
  color:#64748B;
  font-size:13px;
}
.region-status-training-copy{min-width:0}
.region-status-training-name{
  font-size:10.5px;
  font-weight:850;
  color:#334155;
  line-height:1.3;
}
.region-status-training-meta{
  margin-top:2px;
  font-size:8px;
  font-weight:700;
  color:#94A3B8;
}
.region-status-side{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"label value" "bar status";
  gap:5px 8px;
  align-items:center;
  padding:7px 9px;
  border-radius:11px;
  border:1px solid #E2E8F0;
  background:#F8FAFC;
}
.region-status-side-label{
  grid-area:label;
  font-size:8px;
  font-weight:850;
  color:#64748B;
}
.region-status-side-value{
  grid-area:value;
  font-size:10.5px;
  font-weight:900;
  color:#334155;
  white-space:nowrap;
}
.region-status-mini-progress{
  grid-area:bar;
  height:5px;
  border-radius:999px;
  background:#E2E8F0;
  overflow:hidden;
}
.region-status-mini-progress span{
  display:block;
  height:100%;
  border-radius:999px;
}
.region-status-side-state{
  grid-area:status;
  font-size:7.5px;
  font-weight:850;
  white-space:nowrap;
}
.region-status-side.complete{
  background:#F0FDF4;
  border-color:#BBF7D0;
}
.region-status-side.complete .region-status-mini-progress span{background:#22C55E;width:100%}
.region-status-side.complete .region-status-side-state{color:#15803D}
.region-status-side.missing{
  background:#FFF1F2;
  border-color:#FECDD3;
}
.region-status-side.missing .region-status-mini-progress span{background:#F43F5E;width:6%}
.region-status-side.missing .region-status-side-state{color:#BE123C}
.region-status-side.over{
  background:#FFFBEB;
  border-color:#FDE68A;
}
.region-status-side.over .region-status-mini-progress span{background:#F59E0B;width:100%}
.region-status-side.over .region-status-side-state{color:#B45309}
.region-status-side.noquota{
  background:#F8FAFC;
  border-color:#E2E8F0;
  opacity:.72;
}
.region-status-side.noquota .region-status-mini-progress span{width:0}
.region-status-side.noquota .region-status-side-state{color:#94A3B8}
.region-status-conclusion{
  margin-top:10px;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid #E2E8F0;
  background:#fff;
  color:#475569;
  font-size:9.5px;
  font-weight:700;
  line-height:1.5;
}
.region-status-conclusion b{color:#0F172A}
.region-status-empty{
  margin-top:11px;
  padding:16px;
  text-align:center;
  border:1px dashed #BAE6FD;
  border-radius:14px;
  background:rgba(255,255,255,.65);
  color:#64748B;
  font-size:10px;
  font-weight:700;
}
@media(max-width:900px){
  .region-status-row{
    grid-template-columns:minmax(160px,1fr) minmax(130px,.85fr) minmax(130px,.85fr);
  }
}
@media(max-width:680px){
  .region-status-control{grid-template-columns:1fr;gap:8px}
  .region-status-summary{grid-template-columns:1fr}
  .region-status-row{grid-template-columns:1fr;gap:6px}
  .region-status-training{padding:2px 3px 5px}
  .region-status-header{gap:8px}
  .region-status-title{font-size:13px}
  .region-status-sub{font-size:9px}
}


/* V1.7.55 — grouped Tahap 1 + Tahap 2 */
.region-status-stage{
  margin-top:11px;
}
.region-status-stage-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  padding:7px 9px;
  border-radius:11px;
  background:#F8FAFC;
  border:1px solid #E2E8F0;
}
.region-status-stage-title{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9px;
  font-weight:900;
  color:#334155;
  letter-spacing:.025em;
}
.region-status-stage-title i{
  color:#0284C7;
}
.region-status-stage-date{
  font-size:8px;
  font-weight:750;
  color:#94A3B8;
  white-space:nowrap;
}
.region-status-stage .region-status-grid{
  margin-top:0;
}
.region-status-stage + .region-status-stage{
  margin-top:12px;
}
.region-status-stage-split{
  margin-top:5px;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.region-status-stage-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(148,163,184,.22);
  color:#64748B;
  font-size:7.5px;
  font-weight:800;
}
@media(max-width:680px){
  .region-status-stage-head{
    align-items:flex-start;
  }
  .region-status-stage-date{
    white-space:normal;
    text-align:right;
  }
}


/* V1.7.56 — export belum mengisi per Kab/Kota */
.export-missing-region-btn{
  border-color:#A5D8E8!important;
  background:linear-gradient(135deg,rgba(236,254,255,.94),rgba(248,253,255,.98))!important;
  color:#0F6C7A!important;
}
.export-missing-region-btn:hover{
  border-color:#67C3D7!important;
  background:linear-gradient(135deg,rgba(224,250,253,.98),#fff)!important;
}
.export-missing-region-btn .export-all-icon{
  background:#ECFEFF!important;
  border-color:#A5D8E8!important;
  color:#0891B2!important;
}
.export-missing-region-btn .export-all-copy b{
  color:#155E75!important;
}
.export-missing-region-btn .export-all-copy small{
  color:#5C7D85!important;
}
.export-missing-region-btn .export-total-count{
  border-color:#A5D8E8!important;
  color:#0E7490!important;
}
.export-missing-region-btn .export-all-lock{
  background:#F0FDFA!important;
  border-color:#A5D8E8!important;
  color:#0E7490!important;
}


/* V1.7.57 — Status wilayah: KPI Tahap 1 & Tahap 2 yang lebih sederhana */
.region-stage-kpi-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
.region-stage-kpi{
  min-width:0;
  padding:13px 14px;
  border:1px solid #D7E5EF;
  border-radius:17px;
  background:#fff;
  box-shadow:0 5px 16px rgba(15,23,42,.035);
}
.region-stage-kpi.stage1{border-top:4px solid #38BDF8}
.region-stage-kpi.stage2{border-top:4px solid #A78BFA}

.region-stage-kpi-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.region-stage-kpi-title{
  min-width:0;
}
.region-stage-kpi-title b{
  display:block;
  font-size:12.5px;
  font-weight:900;
  color:#0F172A;
}
.region-stage-kpi-title small{
  display:block;
  margin-top:3px;
  font-size:8.5px;
  font-weight:700;
  color:#94A3B8;
}
.region-stage-kpi-score{
  flex:0 0 auto;
  min-width:58px;
  padding:7px 8px;
  border-radius:11px;
  text-align:center;
  background:#F8FAFC;
  border:1px solid #E2E8F0;
}
.region-stage-kpi-score strong{
  display:block;
  font-size:18px;
  line-height:1;
  color:#1E293B;
  font-weight:900;
  letter-spacing:-.04em;
}
.region-stage-kpi-score span{
  display:block;
  margin-top:3px;
  font-size:7px;
  font-weight:800;
  color:#94A3B8;
}
.region-stage-kpi-score.ok{
  background:#F0FDF4;
  border-color:#BBF7D0;
}
.region-stage-kpi-score.ok strong{color:#15803D}
.region-stage-kpi-score.wait{
  background:#FFFBEB;
  border-color:#FDE68A;
}
.region-stage-kpi-score.wait strong{color:#B45309}

.region-stage-side{
  margin-top:10px;
  display:grid;
  gap:7px;
}
.region-stage-side-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.region-stage-side-label{
  padding-top:3px;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.025em;
}
.region-stage-side-label.dinas{color:#047857}
.region-stage-side-label.cabdin{color:#B45309}

.region-stage-training-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.region-stage-training-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  border-radius:999px;
  border:1px solid #E2E8F0;
  background:#F8FAFC;
  font-size:8.5px;
  font-weight:800;
  color:#475569;
  line-height:1.15;
}
.region-stage-training-chip .mini-count{
  font-size:7.5px;
  font-weight:900;
}
.region-stage-training-chip.complete{
  background:#F0FDF4;
  border-color:#BBF7D0;
  color:#15803D;
}
.region-stage-training-chip.missing{
  background:#FFF1F2;
  border-color:#FECDD3;
  color:#BE123C;
}
.region-stage-training-chip.over{
  background:#FFFBEB;
  border-color:#FDE68A;
  color:#B45309;
}
.region-stage-empty{
  font-size:8.5px;
  font-weight:700;
  color:#94A3B8;
  padding-top:3px;
}
.region-stage-kpi-foot{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid #EEF2F7;
  font-size:8.5px;
  font-weight:750;
  color:#64748B;
  line-height:1.4;
}

@media(max-width:780px){
  .region-stage-kpi-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .region-stage-kpi{padding:11px 12px;border-radius:15px}
  .region-stage-kpi-title b{font-size:11.5px}
  .region-stage-kpi-score strong{font-size:16px}
  .region-stage-side-row{grid-template-columns:62px minmax(0,1fr)}
  .region-stage-training-chip{font-size:8px;padding:4px 6px}
}


/* V1.7.58 — detail cards collapsed by default */
.detail-matrix-section .collapse-head,
.detail-region-section .collapse-head{
  padding-right:82px;
}
.detail-collapse-actions{
  min-width:0;
}
.detail-collapse-actions .muted{
  text-align:right;
}
.detail-collapse-content{
  margin-top:8px;
}

@media(max-width:620px){
  .detail-matrix-section .collapse-head,
  .detail-region-section .collapse-head{
    padding-right:0;
  }
  .detail-collapse-actions{
    width:100%;
    justify-content:space-between;
  }
  .detail-collapse-actions .muted{
    text-align:left;
  }
}


/* V1.7.59 — two detail cards: green / vivid red + aligned right controls */
.detail-matrix-section{
  position:relative;
  overflow:hidden;
  border:1px solid #4ADE80!important;
  border-top:5px solid #22C55E!important;
  background:linear-gradient(135deg,#ECFDF5 0%,#F0FDF4 48%,#FAF8F2 100%)!important;
  box-shadow:0 9px 24px rgba(34,197,94,.11)!important;
}
.detail-matrix-section::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#22C55E;
  pointer-events:none;
}
.detail-matrix-section .section-title{
  color:#14532D!important;
}
.detail-matrix-section .muted{
  color:#49735B!important;
}
.detail-matrix-section .collapse-toggle{
  border-color:#86EFAC!important;
  background:#F0FDF4!important;
  color:#166534!important;
}
.detail-matrix-section .collapse-toggle:hover{
  background:#DCFCE7!important;
  border-color:#4ADE80!important;
}

.detail-region-section{
  position:relative;
  overflow:hidden;
  border:1px solid #FB7185!important;
  border-top:5px solid #F43F5E!important;
  background:linear-gradient(135deg,#FFF1F2 0%,#FFE4E6 48%,#FAF8F2 100%)!important;
  box-shadow:0 9px 24px rgba(244,63,94,.12)!important;
}
.detail-region-section::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#F43F5E;
  pointer-events:none;
}
.detail-region-section .section-title{
  color:#881337!important;
}
.detail-region-section .muted{
  color:#9F4860!important;
}
.detail-region-section .collapse-toggle{
  border-color:#FDA4AF!important;
  background:#FFF1F2!important;
  color:#9F1239!important;
}
.detail-region-section .collapse-toggle:hover{
  background:#FFE4E6!important;
  border-color:#FB7185!important;
}

/* Right-side controls sit on one baseline and use the same height */
.detail-matrix-section>.section-head,
.detail-region-section>.section-head{
  padding-right:0!important;
  align-items:center!important;
}
.detail-collapse-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end;
  gap:8px!important;
  min-height:40px;
}
.detail-collapse-actions .collapse-toggle{
  height:40px!important;
  min-height:40px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
}
.inline-detail-badge{
  position:static!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  z-index:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:40px!important;
}
.inline-detail-badge .mock-badge{
  height:40px!important;
  min-height:40px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.detail-collapse-actions>.muted{
  display:flex;
  align-items:center;
  min-height:40px;
  margin:0!important;
  line-height:1.25;
}

@media(max-width:760px){
  .detail-matrix-section>.section-head,
  .detail-region-section>.section-head{
    align-items:flex-start!important;
  }
  .detail-collapse-actions{
    width:100%;
    justify-content:flex-end!important;
    flex-wrap:wrap;
  }
  .detail-collapse-actions>.muted{
    flex:1 1 100%;
    min-height:0;
    justify-content:flex-end;
    text-align:right!important;
  }
}
@media(max-width:620px){
  .detail-collapse-actions{
    justify-content:space-between!important;
  }
  .detail-collapse-actions>.muted{
    justify-content:flex-start;
    text-align:left!important;
  }
  .detail-collapse-actions .collapse-toggle,
  .inline-detail-badge,
  .inline-detail-badge .mock-badge{
    height:36px!important;
    min-height:36px!important;
  }
}


/* V1.7.60 — detail cards kembali netral; Export Data Peserta = ocean blue */

/* Detail cards: kembali seperti card ivory/netral bawaan dashboard. */
.detail-matrix-section,
.detail-region-section{
  position:relative;
  overflow:hidden;
  border:1px solid #E5DED0!important;
  border-top:1px solid #E5DED0!important;
  background:#FAF8F2!important;
  box-shadow:0 8px 22px rgba(66,45,22,.07)!important;
}
.detail-matrix-section::before,
.detail-region-section::before{
  display:none!important;
}
.detail-matrix-section .section-title,
.detail-region-section .section-title{
  color:#2F2A24!important;
}
.detail-matrix-section .muted,
.detail-region-section .muted{
  color:#746C61!important;
}
.detail-matrix-section .collapse-toggle,
.detail-region-section .collapse-toggle{
  border-color:#DDD5C9!important;
  background:rgba(255,255,255,.64)!important;
  color:#5F5851!important;
}
.detail-matrix-section .collapse-toggle:hover,
.detail-region-section .collapse-toggle:hover{
  background:#FFFDF9!important;
  border-color:#CFC4B4!important;
}

/* Export Data Peserta: warna laut, terang tapi tidak menyala. */
.export-card{
  position:relative;
  overflow:hidden;
  border:1px solid #7DD3FC!important;
  border-top:5px solid #0284C7!important;
  background:
    linear-gradient(135deg,#E0F2FE 0%,#F0F9FF 52%,#FAF8F2 100%)!important;
  box-shadow:0 9px 24px rgba(2,132,199,.11)!important;
}
.export-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#0EA5E9;
  pointer-events:none;
}
.export-card .section-title{
  color:#0C4A6E!important;
}
.export-card .utility-subtitle{
  color:#52758A!important;
}
.export-card .collapse-toggle{
  height:40px!important;
  min-height:40px!important;
  padding:0 12px!important;
  border-color:#7DD3FC!important;
  background:#F0F9FF!important;
  color:#075985!important;
}
.export-card .collapse-toggle:hover{
  background:#E0F2FE!important;
  border-color:#38BDF8!important;
}
.export-card .utility-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

/* Badge ocean untuk EXPORT. */
.badge-ocean{
  position:static!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:40px!important;
}
.badge-ocean .mock-badge{
  height:40px!important;
  min-height:40px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#E0F2FE!important;
  color:#0369A1!important;
  border:1px solid #7DD3FC!important;
}

/* Saat isi export dibuka, tone biru tetap konsisten namun lembut. */
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn){
  border-color:#BAE6FD!important;
  background:linear-gradient(135deg,#E0F2FE,#F8FCFF)!important;
  color:#075985!important;
}
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn):hover{
  border-color:#7DD3FC!important;
  background:linear-gradient(135deg,#D7F0FC,#FFFFFF)!important;
}
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn) .export-all-icon{
  background:#F0F9FF!important;
  border-color:#BAE6FD!important;
  color:#0284C7!important;
}
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn) .export-all-copy b{
  color:#0C4A6E!important;
}
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn) .export-all-copy small{
  color:#52758A!important;
}
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn) .export-total-count,
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn) .export-all-lock{
  border-color:#BAE6FD!important;
  color:#0284C7!important;
}

/* Pertahankan alignment kanan untuk dua card detail. */
.detail-matrix-section>.section-head,
.detail-region-section>.section-head{
  padding-right:0!important;
  align-items:center!important;
}
.detail-collapse-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-height:40px;
}
.detail-collapse-actions .collapse-toggle,
.inline-detail-badge,
.inline-detail-badge .mock-badge{
  height:40px!important;
  min-height:40px!important;
}
.inline-detail-badge{
  position:static!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.detail-collapse-actions>.muted{
  display:flex!important;
  align-items:center!important;
  min-height:40px!important;
  margin:0!important;
}

@media(max-width:620px){
  .export-card .collapse-toggle,
  .badge-ocean,
  .badge-ocean .mock-badge,
  .detail-collapse-actions .collapse-toggle,
  .inline-detail-badge,
  .inline-detail-badge .mock-badge{
    height:36px!important;
    min-height:36px!important;
  }
}


/* V1.7.61 — export Sudah Mengisi per Kab/Kota */
.export-filled-region-btn{
  border-color:#7DD3FC!important;
  background:linear-gradient(135deg,#E0F2FE 0%,#F0F9FF 58%,#FFFFFF 100%)!important;
  color:#075985!important;
}
.export-filled-region-btn:hover{
  border-color:#38BDF8!important;
  background:linear-gradient(135deg,#D7F0FC 0%,#FFFFFF 100%)!important;
}
.export-filled-region-btn .export-all-icon{
  background:#F0F9FF!important;
  border-color:#7DD3FC!important;
  color:#0284C7!important;
}
.export-filled-region-btn .export-all-copy b{
  color:#0C4A6E!important;
}
.export-filled-region-btn .export-all-copy small{
  color:#52758A!important;
}
.export-filled-region-btn .export-total-count{
  border-color:#7DD3FC!important;
  color:#0369A1!important;
  background:#F8FCFF!important;
}
.export-filled-region-btn .export-all-lock{
  border-color:#7DD3FC!important;
  background:#F0F9FF!important;
  color:#0284C7!important;
}


/* V1.7.62 — Matrix Dinas/Cabang Dinas yang belum mengusulkan */
.missing-matrix-card{
  position:relative;
  overflow:hidden;
  border:1px solid #F6D58A!important;
  border-top:5px solid #D6A21E!important;
  background:linear-gradient(135deg,#FFFBEB 0%,#FFFDF7 55%,#FAF8F2 100%)!important;
  box-shadow:0 9px 24px rgba(180,120,10,.08)!important;
}
.missing-matrix-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#F2C94C;
  pointer-events:none;
}
.missing-matrix-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.missing-matrix-copy{min-width:0}
.missing-matrix-card .section-title{color:#5F4300!important}
.missing-matrix-card .muted{color:#7B6A3C!important}
.missing-matrix-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
.missing-matrix-summary{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border:1px solid #F6D58A;
  border-radius:10px;
  background:#FFF8DE;
  color:#7C5700;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.missing-matrix-download{
  appearance:none;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  border:1px solid #E0B239;
  border-radius:10px;
  background:#F6C84C;
  color:#5F4300;
  font:inherit;
  font-size:9.5px;
  font-weight:850;
  cursor:pointer;
}
.missing-matrix-download:hover{background:#EFBF38}
.missing-matrix-download:disabled{opacity:.45;cursor:not-allowed}
.missing-matrix-toggle{
  border-color:#F6D58A!important;
  background:#FFF8DE!important;
  color:#7C5700!important;
}
.missing-matrix-toggle:hover{
  background:#FFF1BD!important;
  border-color:#E7BE55!important;
}

.missing-matrix-legend{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:13px;
  flex-wrap:wrap;
  color:#746C61;
  font-size:8.5px;
  font-weight:750;
}
.missing-matrix-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.missing-matrix-legend i{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:5px;
  font-style:normal;
  font-size:9px;
  font-weight:900;
}
.legend-one{
  background:#FFF1F2;
  border:1px solid #FDA4AF;
  color:#BE123C;
}
.legend-empty{
  background:#FFFFFF;
  border:1px solid #D1D5DB;
}
.legend-na{
  background:#D1D5DB;
  border:1px solid #B8BDC5;
}

.missing-matrix-wrap{
  margin-top:9px;
  width:100%;
  overflow:auto;
  border:1px solid #C9CDD3;
  border-radius:9px;
  background:#fff;
}
.missing-matrix-wrap table{
  width:100%!important;
  min-width:980px!important;
  border-collapse:collapse!important;
  table-layout:fixed;
  background:#fff!important;
  color:#111827!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.missing-matrix-wrap th{
  padding:7px 6px!important;
  border:1px solid #4B5563!important;
  background:#DCE6F8!important;
  color:#111827!important;
  text-align:center!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:800!important;
  text-transform:none!important;
  white-space:normal!important;
}
.missing-matrix-wrap th.mm-group{
  font-size:12px!important;
}
.missing-matrix-wrap td{
  height:27px!important;
  padding:3px 5px!important;
  border:1px solid #727780!important;
  background:#fff!important;
  color:#111827!important;
  font-size:11px!important;
  line-height:1.1!important;
  vertical-align:middle!important;
}
.missing-matrix-wrap .mm-no{
  text-align:center!important;
  font-weight:700!important;
}
.missing-matrix-wrap .mm-kab{
  font-weight:700!important;
  white-space:normal!important;
}
.missing-matrix-wrap .mm-wali{
  font-weight:800!important;
  white-space:nowrap!important;
}
.missing-matrix-wrap .mm-cell{
  text-align:center!important;
  font-weight:900!important;
}
.missing-matrix-wrap .mm-cell.na{
  background:#BFBFBF!important;
  color:#BFBFBF!important;
}
.missing-matrix-wrap .mm-cell.done{
  background:#FFFFFF!important;
  color:#FFFFFF!important;
}
.missing-matrix-wrap .mm-cell.missing{
  background:#FFF!important;
  color:#111827!important;
  font-size:12px!important;
}
.missing-matrix-wrap tr.mm-region-end td{
  border-bottom:5px solid #F5D77D!important;
}
.mm-col-no{width:56px}
.mm-col-kab{width:150px}
.mm-col-wali{width:86px}

.export-missing-matrix-btn{
  border-color:#F0C75E!important;
  background:linear-gradient(135deg,#FFF7D6,#FFFDF7)!important;
  color:#795500!important;
}
.export-missing-matrix-btn:hover{
  border-color:#DDB03A!important;
  background:linear-gradient(135deg,#FFF0B0,#FFFFFF)!important;
}
.export-missing-matrix-btn .export-all-icon{
  background:#FFF8DE!important;
  border-color:#F0C75E!important;
  color:#B57A00!important;
}
.export-missing-matrix-btn .export-all-copy b{color:#694A00!important}
.export-missing-matrix-btn .export-all-copy small{color:#8A7441!important}
.export-missing-matrix-btn .export-total-count,
.export-missing-matrix-btn .export-all-lock{
  border-color:#F0C75E!important;
  color:#9A6A00!important;
  background:#FFF8DE!important;
}

@media(max-width:760px){
  .missing-matrix-head{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .missing-matrix-actions{
    width:100%;
    justify-content:flex-end;
  }
}
@media(max-width:620px){
  .missing-matrix-actions{
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .missing-matrix-summary{
    flex:1 1 100%;
  }
  .missing-matrix-download span{display:none}
}


.mm-stage-label{
  display:inline-block;
  margin-top:3px;
  font-size:8px;
  font-weight:800;
  color:#64748B;
  line-height:1;
}


/* V1.7.64 — matrix tunggal: status warna tegas */
.missing-matrix-wrap .mm-cell.missing{
  background:#FEE2E2!important;
  color:#B91C1C!important;
  border-color:#FCA5A5!important;
  font-size:12px!important;
  font-weight:900!important;
}
.missing-matrix-wrap .mm-cell.done{
  background:#DCFCE7!important;
  color:#166534!important;
  border-color:#86EFAC!important;
}
.missing-matrix-wrap .mm-cell.na{
  background:#D1D5DB!important;
  color:#D1D5DB!important;
  border-color:#9CA3AF!important;
}
.missing-matrix-wrap tbody tr:hover .mm-cell.missing{
  background:#FECACA!important;
}
.missing-matrix-wrap tbody tr:hover .mm-cell.done{
  background:#BBF7D0!important;
}

/* Legend disamakan dengan warna isi matrix */
.missing-matrix-legend .legend-one{
  background:#FEE2E2!important;
  border-color:#FCA5A5!important;
  color:#B91C1C!important;
}
.missing-matrix-legend .legend-empty{
  background:#DCFCE7!important;
  border-color:#86EFAC!important;
}
.missing-matrix-legend .legend-na{
  background:#D1D5DB!important;
  border-color:#9CA3AF!important;
}


/* V1.7.67 — satu card, dua matrix */
.matrix-dual-card{
  overflow:hidden;
}
.matrix-dual-head{
  align-items:center!important;
}
.matrix-dual-actions{
  align-items:center!important;
}
.matrix-dual-summary-wrap{
  min-width:0;
  display:flex;
  align-items:center;
}
.matrix-mode-summary{
  white-space:nowrap;
  text-align:right;
}
.matrix-mode-switch{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid #DDD5C9;
  border-radius:12px;
  background:#F4F0E7;
}
.matrix-mode-btn{
  appearance:none;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 11px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#746C61;
  font:inherit;
  font-size:9.5px;
  font-weight:850;
  cursor:pointer;
  transition:.16s ease;
}
.matrix-mode-btn:hover{
  background:rgba(255,255,255,.78);
  color:#475569;
}
.matrix-mode-btn.active{
  background:#FFFFFF;
  border-color:#C4B5FD;
  color:#6D28D9;
  box-shadow:0 3px 9px rgba(109,40,217,.08);
}
.matrix-mode-btn[data-matrix-mode="missing"].active{
  border-color:#FDA4AF;
  color:#BE123C;
  box-shadow:0 3px 9px rgba(190,18,60,.07);
}
.matrix-mode-panel{
  margin-top:9px;
}
.matrix-missing-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
}
.matrix-missing-toolbar .missing-matrix-legend{
  margin-top:0!important;
}
.matrix-missing-toolbar .missing-matrix-download{
  flex:0 0 auto;
}
.matrix-dual-card .missing-matrix-wrap{
  margin-top:9px;
}

/* card utama tetap netral agar kedua matrix terasa satu keluarga */
.matrix-dual-card{
  border:1px solid #E5DED0!important;
  border-top:1px solid #E5DED0!important;
  background:#FAF8F2!important;
  box-shadow:0 8px 22px rgba(66,45,22,.07)!important;
}
.matrix-dual-card::before{
  display:none!important;
}
.matrix-dual-card .section-title{
  color:#2F2A24!important;
}
.matrix-dual-card .muted{
  color:#746C61!important;
}

@media(max-width:760px){
  .matrix-dual-head{
    align-items:flex-start!important;
  }
  .matrix-dual-actions{
    width:100%;
    flex-wrap:wrap;
    justify-content:flex-end!important;
  }
  .matrix-dual-summary-wrap{
    flex:1 1 100%;
    justify-content:flex-end;
  }
}
@media(max-width:620px){
  .matrix-mode-switch{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .matrix-mode-btn{
    width:100%;
    padding-left:7px;
    padding-right:7px;
    font-size:8.8px;
  }
  .matrix-missing-toolbar{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .matrix-missing-toolbar .missing-matrix-download{
    margin-left:auto;
  }
}


/* V1.7.68 — Status Pengisian per Wilayah: input clear + readable result */
.region-status-card{
  padding:20px 21px!important;
}
.region-status-header{
  align-items:center!important;
}
.region-status-title{
  font-size:17px!important;
  letter-spacing:-.015em;
}
.region-status-sub{
  margin-top:5px!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}
.region-status-control{
  margin-top:17px!important;
  grid-template-columns:minmax(280px,430px) minmax(0,1fr)!important;
  gap:13px!important;
}
.region-status-field label{
  font-size:10px!important;
  margin-bottom:6px!important;
}
.region-status-input-wrap{
  position:relative;
  width:100%;
}
.region-status-input{
  min-height:48px!important;
  padding:11px 44px 11px 13px!important;
  border-radius:13px!important;
  font-size:13px!important;
  font-weight:750!important;
}
.region-status-clear{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #BAE6FD;
  border-radius:9px;
  background:#F0F9FF;
  color:#0284C7;
  font-size:20px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:.15s ease;
}
.region-status-clear:hover{
  background:#E0F2FE;
  border-color:#7DD3FC;
  color:#075985;
}
.region-status-clear.hidden{
  display:none!important;
}
.region-status-headline{
  min-height:48px!important;
  padding:10px 13px!important;
  border-radius:13px!important;
  font-size:12px!important;
}
.region-status-headline strong{
  font-size:13.5px!important;
}
.region-status-overall{
  padding:6px 10px!important;
  font-size:9.5px!important;
}

/* Hasil dibuat lebih terbaca */
.region-stage-kpi-grid{
  margin-top:14px!important;
  gap:15px!important;
}
.region-stage-kpi{
  padding:18px 19px!important;
  border-radius:18px!important;
  box-shadow:0 7px 20px rgba(15,23,42,.045)!important;
}
.region-stage-kpi-head{
  align-items:center!important;
  gap:14px!important;
}
.region-stage-kpi-title b{
  font-size:16px!important;
  line-height:1.25!important;
}
.region-stage-kpi-title small{
  margin-top:4px!important;
  font-size:10px!important;
  line-height:1.3!important;
}
.region-stage-kpi-score{
  min-width:74px!important;
  padding:9px 10px!important;
  border-radius:13px!important;
}
.region-stage-kpi-score strong{
  font-size:24px!important;
}
.region-stage-kpi-score span{
  margin-top:4px!important;
  font-size:8.5px!important;
}
.region-stage-side{
  margin-top:14px!important;
  gap:10px!important;
}
.region-stage-side-row{
  grid-template-columns:86px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
}
.region-stage-side-label{
  padding-top:0!important;
  font-size:10.5px!important;
}
.region-stage-training-list{
  gap:7px!important;
}
.region-stage-training-chip{
  gap:6px!important;
  padding:7px 10px!important;
  font-size:11px!important;
  line-height:1.2!important;
}
.region-stage-training-chip .mini-count{
  font-size:9.5px!important;
}
.region-stage-empty{
  padding-top:0!important;
  font-size:10px!important;
}
.region-stage-kpi-foot{
  margin-top:14px!important;
  padding-top:11px!important;
  font-size:10.5px!important;
  line-height:1.45!important;
}
.region-status-empty{
  margin-top:13px!important;
  padding:21px!important;
  font-size:11.5px!important;
}

/* Setelah overview 4-card dihapus, beri ritme jarak antarkelompok. */
#regionStatusCard{
  margin-top:0;
}
#kpis{
  margin-top:1px;
}
.matrix-dual-card,
.detail-region-section{
  scroll-margin-top:90px;
}

@media(max-width:900px){
  .region-status-control{
    grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr)!important;
  }
}
@media(max-width:780px){
  .region-stage-kpi-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:680px){
  .region-status-card{
    padding:15px 14px!important;
  }
  .region-status-title{
    font-size:15px!important;
  }
  .region-status-sub{
    font-size:10px!important;
  }
  .region-status-control{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .region-status-input{
    min-height:45px!important;
    font-size:12px!important;
  }
  .region-status-headline{
    min-height:44px!important;
    font-size:10.5px!important;
  }
  .region-stage-kpi{
    padding:14px!important;
  }
  .region-stage-kpi-title b{
    font-size:14px!important;
  }
  .region-stage-kpi-title small{
    font-size:9px!important;
  }
  .region-stage-kpi-score strong{
    font-size:21px!important;
  }
  .region-stage-side-row{
    grid-template-columns:72px minmax(0,1fr)!important;
  }
  .region-stage-side-label{
    font-size:9.5px!important;
  }
  .region-stage-training-chip{
    padding:6px 8px!important;
    font-size:9.5px!important;
  }
  .region-stage-training-chip .mini-count{
    font-size:8.5px!important;
  }
  .region-stage-kpi-foot{
    font-size:9.5px!important;
  }
}


/* V1.7.69 — matrix lebih rapat + separator biru + layout 2 kolom */

/* ---------- Matrix Belum Mengusulkan ---------- */
.missing-matrix-wrap table{
  min-width:760px!important;
  width:100%!important;
  table-layout:fixed!important;
}
.mm-col-no{width:44px!important}
.mm-col-kab{width:128px!important}
.mm-col-wali{width:72px!important}
.mm-col-op{width:82px!important}
.mm-col-short{width:88px!important}
.mm-col-long{width:106px!important}

.missing-matrix-wrap th{
  padding:6px 4px!important;
  font-size:10px!important;
  line-height:1.12!important;
}
.missing-matrix-wrap th.mm-group{
  font-size:11px!important;
}
.missing-matrix-wrap td{
  height:25px!important;
  padding:2px 4px!important;
  font-size:10.5px!important;
}
.missing-matrix-wrap .mm-cell.missing{
  font-size:11.5px!important;
}

/* Pemisah tiap Kab/Kota: biru tebal, bukan kuning. */
.missing-matrix-wrap tr.mm-region-end td{
  border-bottom:4px solid #2563EB!important;
}

/* ---------- Grid dashboard desktop ---------- */
.dashboard-main-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start;
}

/* notice selalu full */
.dashboard-main-grid>#notice{
  grid-column:1/-1;
}

/* Card/area data-heavy tetap full width untuk keterbacaan. */
.dashboard-main-grid>#regionStatusCard,
.dashboard-main-grid>#kpis,
.dashboard-main-grid>.progress-shell,
.dashboard-main-grid>#matrixDualCard,
.dashboard-main-grid>#wrongRoomCard,
.dashboard-main-grid>#exportCard{
  grid-column:1/-1;
}

/* Card ringkas dipasangkan dua kolom. */
.dashboard-main-grid>.quota-explorer,
.dashboard-main-grid>#participantSearchCard,
.dashboard-main-grid>.detail-region-section,
.dashboard-main-grid>#belajarCard{
  grid-column:auto;
  min-width:0;
}

/* Jika card ringkas dibuka dan isinya padat, gunakan seluruh lebar.
   :has didukung Chrome/Edge/Android/iOS modern. */
.dashboard-main-grid>.quota-explorer:has(#quotaCollapse:not([hidden])),
.dashboard-main-grid>#participantSearchCard:has(#participantCollapse:not([hidden])),
.dashboard-main-grid>.detail-region-section:has(#regionDetailCollapse:not([hidden])),
.dashboard-main-grid>#belajarCard:has(#belajarCollapse:not([hidden])){
  grid-column:1/-1;
}

/* Saat card Wilayah masih setengah layar, isi internal jangan dipaksa 2 kolom. */
.dashboard-main-grid>.detail-region-section .region-source-grid{
  grid-template-columns:1fr!important;
}

/* Card ringkas: header jangan pecah jelek pada desktop medium. */
.dashboard-main-grid>.quota-explorer .utility-header,
.dashboard-main-grid>#participantSearchCard .utility-header,
.dashboard-main-grid>.detail-region-section .section-head,
.dashboard-main-grid>#belajarCard .belajar-sheet-header{
  min-width:0;
}

/* ---------- Tablet / mobile ---------- */
@media(max-width:980px){
  .dashboard-main-grid{
    grid-template-columns:1fr!important;
  }
  .dashboard-main-grid>*{
    grid-column:1!important;
  }

  /* Kembalikan grid Wilayah sesuai lebar layar penuh tablet jika cukup. */
  .dashboard-main-grid>.detail-region-section .region-source-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:680px){
  .dashboard-main-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }

  .dashboard-main-grid>*{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-column:1!important;
  }

  .dashboard-main-grid>.detail-region-section .region-source-grid{
    grid-template-columns:1fr!important;
  }

  /* Matrix: hanya tabel yang scroll horizontal, halaman tidak melebar. */
  .missing-matrix-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
  }
  .missing-matrix-wrap table{
    min-width:700px!important;
    width:700px!important;
    max-width:none!important;
  }
  .mm-col-no{width:40px!important}
  .mm-col-kab{width:112px!important}
  .mm-col-wali{width:66px!important}
  .mm-col-op{width:76px!important}
  .mm-col-short{width:80px!important}
  .mm-col-long{width:94px!important}

  .missing-matrix-wrap th{
    font-size:8.8px!important;
    padding:5px 3px!important;
  }
  .missing-matrix-wrap td{
    font-size:9.5px!important;
    padding:2px 3px!important;
  }
}

@media(max-width:390px){
  .missing-matrix-wrap table{
    min-width:660px!important;
    width:660px!important;
  }
  .mm-col-no{width:38px!important}
  .mm-col-kab{width:104px!important}
  .mm-col-wali{width:62px!important}
  .mm-col-op{width:72px!important}
  .mm-col-short{width:76px!important}
  .mm-col-long{width:88px!important}
}


/* ============================================================
   V1.7.70 — split static files + equal-height paired cards
   + restrained accent identity per dashboard card
   ============================================================ */

/* Desktop paired cards share the same row height. */
@media(min-width:981px){
  .dashboard-main-grid{
    align-items:stretch!important;
  }
  .dashboard-main-grid>.quota-explorer,
  .dashboard-main-grid>#participantSearchCard,
  .dashboard-main-grid>.detail-region-section,
  .dashboard-main-grid>#belajarCard{
    height:100%;
    align-self:stretch;
  }

  /* Keep collapsed region + Belajar.id pair visually balanced. */
  .dashboard-main-grid>.detail-region-section,
  .dashboard-main-grid>#belajarCard{
    min-height:152px;
  }
  .dashboard-main-grid>.detail-region-section>.section-head,
  .dashboard-main-grid>#belajarCard>.belajar-sheet-header{
    min-height:116px;
    height:100%;
    align-items:center!important;
  }
}

/* Accent system: light surface tint + top rule, never saturated blocks. */
.quota-explorer{
  border-top:5px solid #14B8A6!important;
  background:linear-gradient(135deg,#ECFEFF 0%,#F0FDFA 46%,#FAF8F2 100%)!important;
}
.quota-explorer .section-title{color:#115E59!important}

#participantSearchCard{
  border-top:5px solid #8B5CF6!important;
  background:linear-gradient(135deg,#F5F3FF 0%,#FAF5FF 46%,#FAF8F2 100%)!important;
}
#participantSearchCard .section-title{color:#5B21B6!important}

#regionStatusCard{
  border-top-color:#0EA5E9!important;
  background:linear-gradient(135deg,#F0F9FF 0%,#ECFEFF 48%,#FAF8F2 100%)!important;
}

.progress-shell{
  border-top:5px solid #F59E0B!important;
  background:linear-gradient(135deg,#FFFBEB 0%,#FFF7ED 48%,#FAF8F2 100%)!important;
}
.progress-shell .section-title{color:#92400E!important}

#matrixDualCard{
  border-top:5px solid #6366F1!important;
  background:linear-gradient(135deg,#EEF2FF 0%,#F5F3FF 48%,#FAF8F2 100%)!important;
}
#matrixDualCard .section-title{color:#4338CA!important}

.detail-region-section{
  border-top:5px solid #10B981!important;
  background:linear-gradient(135deg,#ECFDF5 0%,#F0FDF4 48%,#FAF8F2 100%)!important;
}
.detail-region-section .section-title{color:#065F46!important}

#belajarCard{
  border-top-color:#22C55E!important;
  background:linear-gradient(135deg,#F0FDF4 0%,#ECFDF5 48%,#FAF8F2 100%)!important;
}

#wrongRoomCard{
  border-top:5px solid #F43F5E!important;
  background:linear-gradient(135deg,#FFF1F2 0%,#FFF7ED 48%,#FAF8F2 100%)!important;
}
#wrongRoomCard .wrong-sheet-title{color:#9F1239!important}

#exportCard{
  border-top-color:#0284C7!important;
  background:linear-gradient(135deg,#E0F2FE 0%,#F0F9FF 50%,#FAF8F2 100%)!important;
}

/* KPI cards also get four distinct but restrained identities. */
#kpis .kpi:nth-child(1){border-top:4px solid #0EA5E9!important;background:#F0F9FF!important}
#kpis .kpi:nth-child(2){border-top:4px solid #10B981!important;background:#ECFDF5!important}
#kpis .kpi:nth-child(3){border-top:4px solid #F59E0B!important;background:#FFFBEB!important}
#kpis .kpi:nth-child(4){border-top:4px solid #8B5CF6!important;background:#F5F3FF!important}

/* On phones keep all cards single-column and let content define height. */
@media(max-width:980px){
  .dashboard-main-grid>.quota-explorer,
  .dashboard-main-grid>#participantSearchCard,
  .dashboard-main-grid>.detail-region-section,
  .dashboard-main-grid>#belajarCard{
    height:auto!important;
    min-height:0!important;
  }
  .dashboard-main-grid>.detail-region-section>.section-head,
  .dashboard-main-grid>#belajarCard>.belajar-sheet-header{
    min-height:0!important;
    height:auto!important;
  }
}


/* ============================================================
   V1.7.71 — fix expanded paired cards + tighter matrix +
   dual completeness tabs
   ============================================================ */

/* Equal-height only needs grid stretch. Do not force the header to 100%,
   otherwise the collapsed header can consume the opened card's height. */
@media(min-width:981px){
  .dashboard-main-grid>.detail-region-section>.section-head,
  .dashboard-main-grid>#belajarCard>.belajar-sheet-header{
    height:auto!important;
  }
  .dashboard-main-grid>.detail-region-section:has(#regionDetailCollapse:not([hidden])),
  .dashboard-main-grid>#belajarCard:has(#belajarCollapse:not([hidden])){
    height:auto!important;
    min-height:0!important;
    grid-column:1/-1!important;
  }
  .dashboard-main-grid>.detail-region-section:has(#regionDetailCollapse:not([hidden]))>.section-head,
  .dashboard-main-grid>#belajarCard:has(#belajarCollapse:not([hidden]))>.belajar-sheet-header{
    height:auto!important;
    min-height:0!important;
  }
}

/* Matrix Belum Mengusulkan: do not stretch six status columns across the card. */
.missing-matrix-wrap table{
  width:704px!important;
  min-width:704px!important;
  max-width:none!important;
  table-layout:fixed!important;
}
.mm-col-no{width:38px!important}
.mm-col-kab{width:112px!important}
.mm-col-wali{width:62px!important}
.mm-col-op{width:68px!important}
.mm-col-short{width:74px!important}
.mm-col-long{width:88px!important}
.missing-matrix-wrap th{padding:5px 3px!important;font-size:9.2px!important}
.missing-matrix-wrap td{padding:2px 3px!important;font-size:10px!important}

/* Belajar.id + Email Pribadi tabs */
.completeness-tabs{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:0 0 9px;
  padding:4px;
  border:1px solid #BBF7D0;
  border-radius:12px;
  background:#F0FDF4;
}
.completeness-tab{
  appearance:none;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#47705A;
  font:inherit;
  font-size:9.5px;
  font-weight:850;
  cursor:pointer;
}
.completeness-tab b{
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:999px;
  background:#DCFCE7;
  color:#15803D;
  font-size:8px;
}
.completeness-tab.active{
  background:#FFFFFF;
  border-color:#86EFAC;
  color:#166534;
  box-shadow:0 3px 9px rgba(22,101,52,.07);
}
.completeness-panel{min-width:0}
.email-count{border-color:#A7F3D0!important;background:#ECFDF5!important;color:#047857!important}
.email-count b{background:#10B981!important}
.email-toolbar{border-color:#A7F3D0!important;background:#ECFDF5!important}
.email-table-wrap{border-color:#A7F3D0!important}

@media(max-width:680px){
  .missing-matrix-wrap table{width:650px!important;min-width:650px!important}
  .mm-col-no{width:34px!important}
  .mm-col-kab{width:102px!important}
  .mm-col-wali{width:58px!important}
  .mm-col-op{width:62px!important}
  .mm-col-short{width:68px!important}
  .mm-col-long{width:82px!important}
  .completeness-tabs{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .completeness-tab{justify-content:center;padding:6px 7px;font-size:8.7px}
}