: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:"DM 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:"DM 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:"DM 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:"DM Sans",system-ui,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:"DM Sans",system-ui,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:"DM Sans",system-ui,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}
}


/* V1.7.72 — Matrix Status XLS action */
.matrix-status-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
}
.matrix-status-toolbar .matrix-legend{margin-top:0!important}
.status-matrix-download{
  appearance:none;
  flex:0 0 auto;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  border:1px solid #A78BFA;
  border-radius:10px;
  background:#EDE9FE;
  color:#6D28D9;
  font:inherit;
  font-size:9.5px;
  font-weight:850;
  cursor:pointer;
  transition:.15s ease;
}
.status-matrix-download:hover{
  background:#DDD6FE;
  border-color:#8B5CF6;
  color:#5B21B6;
}
@media(max-width:620px){
  .matrix-status-toolbar{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .status-matrix-download{margin-left:auto}
  .status-matrix-download span{display:none}
}


/* V1.7.72 — Status Usulan dibuat sekompak Matrix Belum Mengusulkan */
.status-matrix-wrap{
  margin-top:9px;
  width:100%;
  max-width:100%;
  overflow:auto;
  border:1px solid #C4B5FD;
  border-radius:9px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
.status-matrix-wrap table{
  width:760px!important;
  min-width:760px!important;
  max-width:none!important;
  border-collapse:collapse!important;
  table-layout:fixed!important;
  background:#fff!important;
  color:#111827!important;
  font-family:"DM Sans",system-ui,sans-serif!important;
}
.status-matrix-wrap th{
  padding:6px 4px!important;
  border:1px solid #6B7280!important;
  background:#EDE9FE!important;
  color:#312E81!important;
  text-align:center!important;
  font-size:10px!important;
  line-height:1.12!important;
  font-weight:800!important;
  text-transform:none!important;
  white-space:normal!important;
}
.status-matrix-wrap th.sm-group{
  background:#DDD6FE!important;
  font-size:11px!important;
}
.status-matrix-wrap td{
  height:25px!important;
  padding:2px 4px!important;
  border:1px solid #8A8F99!important;
  font-size:10.5px!important;
  line-height:1.1!important;
  vertical-align:middle!important;
}
.status-matrix-wrap .sm-no{text-align:center!important;font-weight:700!important;background:#fff!important}
.status-matrix-wrap .sm-kab{font-weight:700!important;background:#fff!important;white-space:normal!important}
.status-matrix-wrap .sm-wali{font-weight:800!important;background:#fff!important;white-space:nowrap!important}
.status-matrix-wrap .sm-cell{text-align:center!important;font-weight:900!important}
.status-matrix-wrap .sm-cell.na{background:#D1D5DB!important;color:#D1D5DB!important}
.status-matrix-wrap .sm-cell.wait{background:#FEF3C7!important;color:#B45309!important}
.status-matrix-wrap .sm-cell.ok{background:#DCFCE7!important;color:#166534!important}
.status-matrix-wrap .sm-cell.over{background:#EDE9FE!important;color:#6D28D9!important}
.status-matrix-wrap tr.sm-region-end td{border-bottom:4px solid #2563EB!important}
@media(max-width:680px){
  .status-matrix-wrap{overflow-x:auto!important;overflow-y:auto!important;touch-action:pan-x pan-y}
  .status-matrix-wrap table{width:700px!important;min-width:700px!important}
  .status-matrix-wrap th{font-size:8.8px!important;padding:5px 3px!important}
  .status-matrix-wrap td{font-size:9.5px!important;padding:2px 3px!important}
}
@media(max-width:390px){
  .status-matrix-wrap table{width:660px!important;min-width:660px!important}
}

/* =========================================================
   V1.7.75 — surat XLS starts directly with table header on row 1
   ========================================================= */
.export-letter-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.export-letter-grid .export-main-row{margin-bottom:0;}
.export-letter-btn{min-height:78px;}
.export-letter-dinas{
  border-color:#BFDBFE;
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(248,252,255,.96));
  color:#1D4ED8;
}
.export-letter-dinas:hover{border-color:#93C5FD;background:linear-gradient(135deg,#EFF6FF,#fff);}
.export-letter-dinas .export-all-icon{background:#EFF6FF;border-color:#BFDBFE;color:#2563EB;}
.export-letter-dinas .export-all-copy b{color:#1E3A8A;}
.export-letter-dinas .export-all-copy small{color:#64748B;}
.export-letter-dinas .export-total-count{border-color:#BFDBFE;color:#2563EB;}
.export-letter-cabdin{
  border-color:#F3D6A2;
  background:linear-gradient(135deg,rgba(255,248,235,.97),rgba(255,253,248,.96));
  color:#B45309;
}
.export-letter-cabdin:hover{border-color:#F0C982;background:linear-gradient(135deg,#FFF7E8,#fff);}
.export-letter-cabdin .export-all-icon{background:#FFF7E8;border-color:#F3D6A2;color:#B45309;}
.export-letter-cabdin .export-all-copy b{color:#7C2D12;}
.export-letter-cabdin .export-all-copy small{color:#78716C;}
.export-letter-cabdin .export-total-count{border-color:#F3D6A2;color:#B45309;}
@media(max-width:760px){
  .export-letter-grid{grid-template-columns:1fr;gap:8px;}
  .export-letter-btn{min-height:68px;}
}


/* =========================================================
   V1.7.77 — shareable Export Data view
   ========================================================= */
.export-utility-actions{flex-wrap:wrap;justify-content:flex-end}
.export-share-view-btn{
  min-height:36px;
  border:1px solid #9bd8f8;
  border-radius:12px;
  background:rgba(255,255,255,.78);
  color:#0875b4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  font:700 10px/1 "DM Sans",system-ui,sans-serif;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.export-share-view-btn:hover{
  transform:translateY(-1px);
  border-color:#67c6f5;
  background:#fff;
  box-shadow:0 7px 18px rgba(8,117,180,.10);
}
.export-share-view-btn.copied{
  border-color:#8bd7b2;
  color:#158356;
  background:#f3fff8;
}

body.export-only-mode .topbar,
body.export-only-mode .dashboard-main-grid > section:not(#exportCard),
body.export-only-mode .dashboard-main-grid > #notice,
body.export-only-mode .dashboard-main-grid > footer{
  display:none!important;
}
body.export-only-mode{
  min-height:100vh;
  background:linear-gradient(180deg,#eef9ff 0%,#f8fbfd 48%,#fffaf2 100%);
}
body.export-only-mode .dashboard-main-grid{
  display:block!important;
  width:min(1520px,calc(100% - 28px));
  max-width:1520px;
  margin:0 auto;
  padding:18px 0 30px!important;
}
body.export-only-mode #exportCard{
  display:block!important;
  width:100%;
  margin:0!important;
}
body.export-only-mode #exportCard .collapse-toggle{
  display:none!important;
}
body.export-only-mode #exportCollapse{
  display:block!important;
  margin-top:16px!important;
}
body.export-only-mode #exportCard .utility-header{
  align-items:center;
}
body.export-only-mode #exportCard .utility-subtitle::after{
  content:" · Tampilan share";
  color:#0884c7;
  font-weight:750;
}
body.export-only-mode .export-share-view-btn{
  min-height:38px;
  border-color:#72cafa;
  background:#fff;
  color:#056ea8;
  padding:0 14px;
}

@media(max-width:760px){
  .export-share-view-btn{min-height:34px;padding:0 9px;font-size:9px;border-radius:10px}
  .export-share-view-btn .export-share-view-label{display:none}
  body.export-only-mode .export-share-view-btn .export-share-view-label{display:inline}
  body.export-only-mode .dashboard-main-grid{width:calc(100% - 16px);padding:8px 0 18px!important}
  body.export-only-mode #exportCard{padding:12px!important;border-radius:18px}
  body.export-only-mode #exportCard .utility-actions{width:auto!important}
  body.export-only-mode #exportCard .utility-header{gap:8px!important}
}

/* =========================================================
   V1.7.78 — shareable Matrix view
   ========================================================= */
.matrix-share-view-btn{
  min-height:36px;
  border:1px solid #c9b8f4;
  border-radius:12px;
  background:rgba(255,255,255,.82);
  color:#6746ad;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  font:700 10px/1 "DM Sans",system-ui,sans-serif;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.matrix-share-view-btn:hover{
  transform:translateY(-1px);
  border-color:#a992e7;
  background:#fff;
  box-shadow:0 7px 18px rgba(103,70,173,.10);
}
.matrix-share-view-btn.copied{
  border-color:#8bd7b2;
  color:#158356;
  background:#f3fff8;
}
body.matrix-only-mode .topbar,
body.matrix-only-mode .dashboard-main-grid > section:not(#matrixDualCard),
body.matrix-only-mode .dashboard-main-grid > #notice,
body.matrix-only-mode .dashboard-main-grid > footer{
  display:none!important;
}
body.matrix-only-mode{
  min-height:100vh;
  background:linear-gradient(180deg,#f7f4ff 0%,#f8fbfd 48%,#fffaf2 100%);
}
body.matrix-only-mode .dashboard-main-grid{
  display:block!important;
  width:min(1520px,calc(100% - 28px));
  max-width:1520px;
  margin:0 auto;
  padding:18px 0 30px!important;
}
body.matrix-only-mode #matrixDualCard{
  display:block!important;
  width:100%;
  margin:0!important;
}
body.matrix-only-mode #matrixDualCard .collapse-toggle{
  display:none!important;
}
body.matrix-only-mode #matrixDualCollapse{
  display:block!important;
  margin-top:16px!important;
}
body.matrix-only-mode .matrix-share-view-btn{
  min-height:38px;
  border-color:#bba7ed;
  background:#fff;
  color:#5f3fa8;
  padding:0 14px;
}
body.matrix-only-mode #matrixDualCard .matrix-dual-head{
  align-items:center;
}
body.matrix-only-mode #matrixDualCard .matrix-dual-head .muted::after{
  content:" · Tampilan share";
  color:#7253b6;
  font-weight:750;
}
@media(max-width:760px){
  .matrix-share-view-btn{min-height:34px;padding:0 9px;font-size:9px;border-radius:10px}
  .matrix-share-view-btn .matrix-share-view-label{display:none}
  body.matrix-only-mode .matrix-share-view-btn .matrix-share-view-label{display:inline}
  body.matrix-only-mode .dashboard-main-grid{width:calc(100% - 16px);padding:8px 0 18px!important}
  body.matrix-only-mode #matrixDualCard{padding:12px!important;border-radius:18px}
  body.matrix-only-mode #matrixDualCard .matrix-dual-actions{width:auto!important;gap:7px}
}

/* =========================================================
   dashboard monitor tendik 2026 — Audit perubahan peserta terhadap baseline resmi
   ========================================================= */
.participant-audit-card{
  border-color:#d8e6dc;
  background:linear-gradient(135deg,rgba(251,255,252,.96),rgba(248,252,255,.96));
}
.participant-audit-header{gap:14px}
.participant-audit-header-copy{min-width:0;flex:1}
.participant-audit-subtitle{margin-top:4px;line-height:1.55}
.participant-audit-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.participant-audit-badge{
  min-height:34px;padding:0 12px;border-radius:999px;border:1px solid #a9dfbf;
  background:#effcf4;color:#197a45;display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:800;white-space:nowrap;
}
.participant-audit-badge b{font-size:13px}
.participant-audit-badge.danger{border-color:#ffb6b6;background:#fff1f1;color:#c72f3e}
.participant-audit-badge.danger i{color:#e33f50}
.participant-audit-stats{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 12px;
}
.participant-audit-stats span{
  display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:10px;
  background:#f4f7f9;border:1px solid #e1e8ed;color:#52616d;font-size:10px;font-weight:700;
}
.participant-audit-stats b{font-size:11px;color:#24333e}
.participant-audit-stats .audit-stat-ok{background:#effcf4;border-color:#c4ecd2;color:#237a4d}
.participant-audit-stats .audit-stat-danger{background:#fff4f4;border-color:#ffd0d0;color:#ba3543}
.participant-audit-notice{
  margin-bottom:10px;padding:10px 12px;border-radius:12px;border:1px solid #cbe9d5;
  background:#f2fff7;color:#277a4d;font-size:10px;font-weight:700;line-height:1.5;
}
.participant-audit-notice.danger{border-color:#ffc5c5;background:#fff5f5;color:#b52c3c}
.participant-audit-table-wrap{overflow:auto;border:1px solid #dfe7eb;border-radius:14px;background:#fff}
.participant-audit-table{width:100%;min-width:1180px;border-collapse:separate;border-spacing:0;font-size:10px}
.participant-audit-table th{
  position:sticky;top:0;z-index:2;background:#eef4f7;color:#344552;text-align:left;
  padding:10px 11px;border-bottom:1px solid #d8e1e7;font-size:9px;font-weight:800;white-space:nowrap;
}
.participant-audit-table td{padding:10px 11px;border-bottom:1px solid #edf1f3;vertical-align:top;color:#273944}
.participant-audit-table tr:last-child td{border-bottom:0}
.participant-audit-training{font-weight:800;color:#1f4052;white-space:nowrap}
.participant-audit-wali{font-weight:800;white-space:nowrap}
.participant-audit-wali.dinas{color:#07875f}.participant-audit-wali.cabdin{color:#c55c00}
.audit-person-name{font-weight:800;color:#1f2f39;line-height:1.4}
.audit-person-inst{display:block;margin-top:2px;color:#6c7a84;line-height:1.35}
.audit-person-meta{display:block;margin-top:4px;color:#88959d;font-size:9px;line-height:1.4}
.audit-empty{color:#a6b0b6;font-style:italic}
.audit-change-list{display:grid;gap:5px;min-width:260px}
.audit-change-item{display:grid;grid-template-columns:88px minmax(0,1fr);gap:6px;align-items:start}
.audit-change-label{font-size:8px;font-weight:850;color:#b72e3c;text-transform:uppercase;letter-spacing:.02em}
.audit-change-values{line-height:1.35;color:#5f6d76;word-break:break-word}
.audit-change-values .before{color:#a3333f;text-decoration:line-through;text-decoration-thickness:1px}
.audit-change-values .after{color:#176e49;font-weight:750}
.audit-change-values .arrow{padding:0 4px;color:#9aa5ac}
.audit-status-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#fff0f0;border:1px solid #ffc4c4;color:#be3040;font-size:8px;font-weight:850;white-space:nowrap;margin-bottom:6px}
.audit-row-link{display:inline-flex;align-items:center;gap:4px;color:#0b76b6;text-decoration:none;font-weight:800;white-space:nowrap}
.audit-row-link:hover{text-decoration:underline}
.participant-audit-empty-row td{text-align:center;padding:26px!important;color:#25814f;font-weight:800;background:#f7fff9}
@media(max-width:760px){
  .participant-audit-header{align-items:flex-start!important}
  .participant-audit-actions{gap:6px}
  .participant-audit-badge{min-height:31px;padding:0 9px;font-size:9px}
  .participant-audit-badge b{font-size:11px}
  .participant-audit-subtitle{font-size:9px}
  .participant-audit-stats{gap:5px}
  .participant-audit-stats span{padding:6px 8px;font-size:9px}
  .participant-audit-table{font-size:9px;min-width:1080px}
}

/* =========================================================
   Internal refinement — dashboard monitor tendik 2026
   Four-card monitoring layout + audit false-positive cleanup
   ========================================================= */

/* Four monitoring cards share one visual system. */
#matrixDualCard,
#participantAuditCard,
.detail-region-section,
#belajarCard{
  border-radius:24px!important;
  border-width:1px!important;
  box-shadow:0 12px 30px rgba(43,61,77,.075)!important;
  overflow:hidden;
  position:relative;
}

#matrixDualCard::after,
#participantAuditCard::after,
.detail-region-section::after,
#belajarCard::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  pointer-events:none;
  opacity:.95;
}
#matrixDualCard::after{background:linear-gradient(90deg,#6366F1,#8B5CF6)}
#participantAuditCard::after{background:linear-gradient(90deg,#EF4444,#FB7185)}
.detail-region-section::after{background:linear-gradient(90deg,#10B981,#34D399)}
#belajarCard::after{background:linear-gradient(90deg,#0EA5E9,#22C55E)}

/* Matrix and audit need the full canvas; the two compact monitors pair below. */
.dashboard-main-grid>#participantAuditCard{
  grid-column:1/-1!important;
  min-width:0;
}

@media(min-width:981px){
  #matrixDualCard>.matrix-dual-head,
  #participantAuditCard>.participant-audit-header{
    min-height:104px;
    padding-top:4px;
    align-items:center!important;
  }
  .dashboard-main-grid>.detail-region-section,
  .dashboard-main-grid>#belajarCard{
    min-height:190px!important;
  }
}

/* Consistent icon + copy unit. */
.overview-title-block{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1 1 auto;
}
.overview-title-block>div{min-width:0}
.overview-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  font-size:18px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 15px rgba(38,54,66,.08);
}
.overview-icon-matrix{background:#EEF2FF;color:#4F46E5;border-color:#C7D2FE}
.overview-icon-audit{background:#FFF1F2;color:#E11D48;border-color:#FECDD3}
.overview-icon-region{background:#ECFDF5;color:#059669;border-color:#A7F3D0}
.overview-icon-account{background:#ECFEFF;color:#0891B2;border-color:#A5F3FC}

#matrixDualCard .section-title,
#participantAuditCard .section-title,
.detail-region-section .section-title,
#belajarCard .wrong-sheet-title{
  font-size:18px!important;
  line-height:1.22!important;
  letter-spacing:-.02em;
}
#matrixDualCard .muted,
#participantAuditCard .muted,
.detail-region-section .muted,
#belajarCard .wrong-sheet-subtitle{
  color:#5D6A73!important;
  line-height:1.55!important;
}

/* Audit: calm surface when clean, strong signal only through the badge when needed. */
#participantAuditCard{
  background:linear-gradient(135deg,#FFF8F8 0%,#FFFDFC 48%,#F7FBFF 100%)!important;
  border-color:#F0DADD!important;
}
#participantAuditCard .participant-audit-header{
  padding:4px 2px;
}
#participantAuditCard .participant-audit-actions{
  padding-left:10px;
}
.participant-audit-badge{
  min-height:38px!important;
  padding:0 14px!important;
  box-shadow:0 4px 12px rgba(32,87,55,.06);
}
.participant-audit-badge.danger{
  box-shadow:0 5px 14px rgba(190,48,64,.08);
}

/* Expanded audit uses the full width and a denser, easier-to-scan table. */
#participantAuditCard:has(#participantAuditCollapse:not([hidden])){
  grid-column:1/-1!important;
}
.participant-audit-table-wrap{
  border-radius:16px!important;
  box-shadow:0 4px 14px rgba(29,45,57,.035);
}
.participant-audit-table{
  min-width:1120px!important;
}
.participant-audit-table th{
  background:#F1F5F8!important;
  color:#41515D!important;
}
.participant-audit-table tbody tr:hover td{
  background:#FFFDF8;
}
.audit-change-item{
  grid-template-columns:82px minmax(0,1fr)!important;
}

/* Region card: keep controls clean and aligned on the paired row. */
.detail-region-section{
  background:linear-gradient(135deg,#F0FDF4 0%,#F4FFF8 55%,#FFFDFC 100%)!important;
  border-color:#CDEBDC!important;
}
.detail-region-section>.section-head{
  min-height:150px!important;
  gap:16px!important;
  align-items:center!important;
}
.detail-region-section .detail-collapse-actions{
  flex-wrap:nowrap!important;
}

/* Completeness card: avoid the cramped multi-column header seen before. */
#belajarCard{
  background:linear-gradient(135deg,#ECFEFF 0%,#F0FDF4 54%,#FFFDFC 100%)!important;
  border-color:#C8E9E3!important;
}
#belajarCard>.belajar-sheet-header{
  min-height:150px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:14px!important;
  align-content:center!important;
  align-items:center!important;
}
#belajarCard .belajar-header-copy{
  width:100%;
}
#belajarCard .belajar-header-side{
  width:100%!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:14px!important;
  flex-wrap:wrap!important;
}
#belajarCard .belajar-sheet-meta{
  min-width:170px;
}
#belajarCard .belajar-header-actions{
  margin-left:auto;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* Buttons within the four monitoring cards use one quieter shape language. */
#matrixDualCard .collapse-toggle,
#participantAuditCard .collapse-toggle,
.detail-region-section .collapse-toggle,
#belajarCard .collapse-toggle,
#matrixDualCard .matrix-share-view-btn{
  min-height:38px!important;
  border-radius:12px!important;
}

/* Tablet/mobile: all four cards stack and titles remain compact. */
@media(max-width:980px){
  .dashboard-main-grid>#participantAuditCard{grid-column:1!important}
  #matrixDualCard,
  #participantAuditCard,
  .detail-region-section,
  #belajarCard{border-radius:20px!important}
  .overview-icon{width:42px;height:42px;flex-basis:42px;border-radius:13px;font-size:16px}
  #belajarCard>.belajar-sheet-header,
  .detail-region-section>.section-head{min-height:0!important}
}

@media(max-width:680px){
  .overview-title-block{gap:10px;align-items:flex-start}
  .overview-icon{width:38px;height:38px;flex-basis:38px;border-radius:12px;font-size:14px}
  #matrixDualCard .section-title,
  #participantAuditCard .section-title,
  .detail-region-section .section-title,
  #belajarCard .wrong-sheet-title{font-size:15px!important}
  #participantAuditCard .participant-audit-header,
  .detail-region-section>.section-head,
  #belajarCard>.belajar-sheet-header{gap:12px!important}
  #belajarCard .belajar-header-side{align-items:flex-start!important}
  #belajarCard .belajar-header-actions{margin-left:0;width:100%;justify-content:flex-start}
  .participant-audit-actions{padding-left:0!important}
}

/* =========================================================
   V1.7.91 — protected cards + audit "Baru Terisi"
   ========================================================= */
body.card-modal-open{overflow:hidden!important}
.card-protected-toggle .card-lock-icon{
  font-size:9px!important;
  opacity:.78;
  margin-left:2px;
}
.card-protected-toggle[aria-expanded="true"] .card-lock-icon{
  color:#168560;
  opacity:.92;
}
.region-status-actions,
.wrong-room-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  min-width:0;
}
.wrong-room-header-actions .wrong-sheet-meta{min-width:190px}
#kpiSummaryCard{
  grid-column:1/-1;
  border-top:5px solid #0EA5E9!important;
  background:linear-gradient(135deg,#F0F9FF 0%,#ECFDF5 48%,#FAF8F2 100%)!important;
}
#kpiSummaryCard .section-title{color:#075985!important}
#kpiSummaryCard #kpis{margin-top:2px}
#progressCard .collapse-head{align-items:center}
#progressCard .collapse-body{margin-top:12px}
#regionStatusCard .collapse-body,
#wrongRoomCard .collapse-body{margin-top:14px}
.participant-audit-stats .audit-stat-new{
  background:#EFF6FF;
  border-color:#BFDBFE;
  color:#1D4ED8;
}
.audit-status-chip.audit-status-new{
  border-color:#BFDBFE!important;
  background:#EFF6FF!important;
  color:#1D4ED8!important;
}
.participant-audit-table tr.audit-row-newFilled td{
  background:#F8FBFF;
}
@media(max-width:720px){
  .region-status-actions,
  .wrong-room-header-actions{gap:6px;align-items:flex-start}
  .wrong-room-header-actions{flex-direction:column;align-items:flex-end}
  .wrong-room-header-actions .wrong-sheet-meta{min-width:0}
}
.card-protected-toggle .card-lock-icon{transform:none!important}

/* ============================================================
   V1.8.0 — MINIMAL INSTITUTIONAL
   Visual-only refinement. No data, audit, password, sync, or export logic changed.
   ============================================================ */
:root{
  --bg:#f4f5f7;
  --bg-soft:#f7f8fa;
  --card:#ffffff;
  --card-solid:#ffffff;
  --line:#d8dee7;
  --line-soft:#e8ebef;
  --text:#202833;
  --muted:#66717f;
  --muted-2:#929ba6;
  --slate:#44505e;
  --surface-tint:#f6f7f9;
  --shadow:none;
  --shadow-soft:none;
  --focus:rgba(31,78,121,.10);
  --institution:#1f4e79;
  --institution-dark:#173a5b;
  --institution-soft:#eef3f8;
}

html,body{
  font-family:"DM Sans",system-ui,sans-serif!important;
  background:#f4f5f7!important;
  color:var(--text)!important;
  transition:none!important;
}
body::before,body::after{display:none!important}

/* Header: flat, compact, administrative. */
.topbar{
  background:#fff!important;
  border-bottom:1px solid #d8dee7!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.topbar-inner{
  max-width:1320px!important;
  padding:12px 18px!important;
}
.brand{gap:10px!important}
.logo{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border-radius:7px!important;
  background:var(--institution)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:700!important;
}
.brand h1{
  font-size:17px!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:0!important;
  color:#1f2933!important;
}
.brand p{
  margin-top:2px!important;
  font-size:11.5px!important;
  font-weight:400!important;
  color:#6c7682!important;
}
.actions .btn,
.btn{
  border-radius:6px!important;
  box-shadow:none!important;
  font-weight:600!important;
  transition:none!important;
}
.btn-primary{
  background:var(--institution)!important;
  border-color:var(--institution)!important;
}
.btn-primary:hover{background:var(--institution-dark)!important}

/* Page rhythm. */
main,.dashboard-main-grid{
  max-width:1320px!important;
  padding:18px!important;
  gap:12px!important;
}
.card,
.mock-card,
#matrixDualCard,
#participantAuditCard,
.detail-region-section,
#belajarCard,
#regionStatusCard,
#wrongRoomCard,
#exportCard,
#kpiSummaryCard,
.progress-shell,
.quota-explorer,
#participantSearchCard{
  background:#fff!important;
  border:1px solid #d8dee7!important;
  border-top:1px solid #d8dee7!important;
  border-radius:10px!important;
  box-shadow:none!important;
  overflow:visible;
}
.card::before,.card::after,
.mock-card::before,.mock-card::after,
#matrixDualCard::before,#matrixDualCard::after,
#participantAuditCard::before,#participantAuditCard::after,
.detail-region-section::before,.detail-region-section::after,
#belajarCard::before,#belajarCard::after,
#regionStatusCard::before,#regionStatusCard::after,
#wrongRoomCard::before,#wrongRoomCard::after,
#exportCard::before,#exportCard::after,
#kpiSummaryCard::before,#kpiSummaryCard::after,
.progress-shell::before,.progress-shell::after,
.quota-explorer::before,.quota-explorer::after,
#participantSearchCard::before,#participantSearchCard::after{
  display:none!important;
  content:none!important;
}
.pad{padding:15px!important}

/* Headers: no decorative badges / illustration blocks. */
.mock-badge-wrap,
.mock-kpi-art,
.mock-class-art,
.overview-icon,
.region-status-badge{
  display:none!important;
}
.utility-header,
.section-head,
.region-status-header,
.participant-audit-header,
.wrong-sheet-header,
.belajar-sheet-header,
.matrix-dual-head{
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  gap:12px!important;
  align-items:center!important;
}
.overview-title-block{
  gap:0!important;
  align-items:center!important;
}
.section-title,
.region-status-title,
.wrong-sheet-title,
#matrixDualCard .section-title,
#participantAuditCard .section-title,
.detail-region-section .section-title,
#belajarCard .wrong-sheet-title,
#kpiSummaryCard .section-title,
.progress-shell .section-title{
  font-size:14.5px!important;
  line-height:1.35!important;
  font-weight:650!important;
  letter-spacing:0!important;
  color:#26313d!important;
}
.muted,
.utility-subtitle,
.region-status-sub,
.wrong-sheet-subtitle,
.participant-audit-subtitle,
#matrixDualCard .muted,
#participantAuditCard .muted,
.detail-region-section .muted,
#belajarCard .wrong-sheet-subtitle{
  font-size:11px!important;
  line-height:1.45!important;
  font-weight:400!important;
  color:#6d7783!important;
}
.utility-subtitle,.participant-audit-subtitle{margin-top:3px!important}

/* Collapse / action buttons: rectangular, quiet, consistent. */
.collapse-toggle,
#matrixDualCard .collapse-toggle,
#participantAuditCard .collapse-toggle,
.detail-region-section .collapse-toggle,
#belajarCard .collapse-toggle,
.export-card .collapse-toggle,
.utility-card .collapse-toggle,
.matrix-share-view-btn,
.export-share-view-btn,
.status-matrix-download,
.missing-matrix-download,
.belajar-download-btn{
  min-height:32px!important;
  height:32px!important;
  padding:0 10px!important;
  border:1px solid #cbd3dc!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#3e4b59!important;
  box-shadow:none!important;
  font-size:10.5px!important;
  font-weight:600!important;
  transform:none!important;
  transition:none!important;
}
.collapse-toggle:hover,
.matrix-share-view-btn:hover,
.export-share-view-btn:hover,
.status-matrix-download:hover,
.missing-matrix-download:hover,
.belajar-download-btn:hover{
  background:#f5f7f9!important;
  border-color:#aeb8c3!important;
  color:#26313d!important;
  transform:none!important;
  box-shadow:none!important;
}
.collapse-toggle i{font-size:9px!important}
.card-protected-toggle .card-lock-icon{
  color:#7b8794!important;
  opacity:1!important;
}
.card-protected-toggle[aria-expanded="true"] .card-lock-icon{color:var(--institution)!important}
.collapse-body{margin-top:14px!important}

/* Inputs and controls. */
label{
  font-size:9.5px!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
  color:#687482!important;
}
input,select,textarea,
.quota-kab-input,
.region-status-input,
.participant-search-input{
  border:1px solid #cfd6de!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#27323e!important;
  box-shadow:none!important;
}
input:focus,select:focus,textarea:focus,
.quota-kab-input:focus,.region-status-input:focus,.participant-search-input:focus{
  border-color:#6f8fab!important;
  box-shadow:0 0 0 3px rgba(31,78,121,.08)!important;
  outline:none!important;
}

/* KPI: one restrained summary strip instead of four decorated cards. */
#kpiSummaryCard{
  grid-column:1/-1!important;
  background:#fff!important;
}
#kpiSummaryCard #kpis{
  margin-top:0!important;
}
.kpis{
  gap:0!important;
  border:1px solid #dfe4ea!important;
  border-radius:8px!important;
  overflow:hidden!important;
  background:#fff!important;
}
#kpis .kpi,
.mock-kpi-card,
#kpis .kpi:nth-child(1),#kpis .kpi:nth-child(2),#kpis .kpi:nth-child(3),#kpis .kpi:nth-child(4){
  min-height:0!important;
  padding:14px 16px!important;
  border:0!important;
  border-right:1px solid #e2e6eb!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
#kpis .kpi:last-child{border-right:0!important}
.kpi-label,.mock-kpi-card .kpi-label{
  font-size:10.5px!important;
  font-weight:600!important;
  text-transform:none!important;
  letter-spacing:0!important;
  color:#65717e!important;
}
.kpi-num,.mock-kpi-card .kpi-num{
  margin-top:5px!important;
  font-size:27px!important;
  line-height:1.05!important;
  font-weight:650!important;
  letter-spacing:-.02em!important;
  color:#1f2933!important;
}
.kpi-sub,.mock-kpi-card .kpi-sub{
  margin-top:6px!important;
  font-size:10px!important;
  font-weight:400!important;
  color:#77818c!important;
}
.kpi-stage-split{gap:8px!important}
.kpi-stage-split span{font-weight:400!important}

/* Progress: remove illustration language, keep data hierarchy. */
.class-grid{gap:9px!important}
.class-card,.mock-class-card{
  padding:13px 14px!important;
  border:1px solid #dfe4ea!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.mock-class-card .class-name,.class-name{
  min-height:0!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:650!important;
  color:#2a3541!important;
}
.mock-class-card .class-meta,.class-meta{
  margin-top:3px!important;
  font-size:10px!important;
  font-weight:400!important;
  color:#7a8490!important;
}
.mock-class-card .class-numbers,.class-numbers{margin-top:10px!important}
.mock-class-card .class-main,.class-main{
  font-size:23px!important;
  font-weight:650!important;
  color:#26313d!important;
}
.mock-class-card .class-target,.class-target{
  font-size:9.5px!important;
  font-weight:400!important;
  color:#7a8490!important;
}
.progress,.mock-class-card .progress{
  height:5px!important;
  border-radius:2px!important;
  background:#e8ecf0!important;
}
.progress>span,.mock-class-card .progress>span{
  background:var(--institution)!important;
  border-radius:2px!important;
}
.pills,.mock-class-card .pills{gap:5px!important}
.pill,.mock-class-card .pill{
  padding:4px 6px!important;
  border-radius:4px!important;
  font-size:9px!important;
  font-weight:600!important;
}
.p-dinas{background:#eef3f8!important;color:#2f5f8f!important}
.p-cabdin{background:#f6f1e9!important;color:#8a5a21!important}
.p-missing{background:#fdf0f1!important;color:#a33a46!important}
.p-over{background:#f8e9ea!important;color:#94313d!important}

/* Matrix and tabs: plain segmented controls. */
.matrix-mode-switch,
.completeness-tabs{
  padding:3px!important;
  border:1px solid #d8dee7!important;
  border-radius:7px!important;
  background:#f5f6f8!important;
  box-shadow:none!important;
}
.matrix-mode-btn,
.completeness-tab{
  border:0!important;
  border-radius:5px!important;
  background:transparent!important;
  color:#5a6572!important;
  box-shadow:none!important;
  font-weight:600!important;
}
.matrix-mode-btn.active,
.completeness-tab.active,
.matrix-mode-btn[data-matrix-mode="missing"].active{
  background:#fff!important;
  color:var(--institution)!important;
  box-shadow:0 1px 2px rgba(20,30,40,.08)!important;
}
.matrix-legend-item,.missing-matrix-legend span{
  font-weight:400!important;
  color:#66717e!important;
}

/* Tables: understated office-document styling. */
.table-wrap,
.status-matrix-wrap,
.missing-matrix-wrap,
.participant-audit-table-wrap,
.belajar-table-wrap,
.wrong-room-table-wrap{
  border:1px solid #dfe4ea!important;
  border-radius:7px!important;
  background:#fff!important;
  box-shadow:none!important;
}
table{background:#fff!important}
thead,
.participant-audit-table th,
.status-matrix-wrap th,
.missing-matrix-wrap th,
.belajar-table-wrap th,
.wrong-room-table-wrap th{
  background:#f3f5f7!important;
  color:#4f5b68!important;
  text-transform:none!important;
  letter-spacing:0!important;
  font-weight:650!important;
}
th,td{border-color:#e5e9ed!important}
tbody tr:hover td{background:#fafbfc!important}

/* Audit: retain meaning, remove presentation flair. */
#participantAuditCard{
  background:#fff!important;
  border-color:#d8dee7!important;
}
#participantAuditCard .participant-audit-header{padding:0!important}
#participantAuditCard .participant-audit-actions{padding-left:0!important}
.participant-audit-badge{
  min-height:30px!important;
  padding:0 9px!important;
  border-radius:5px!important;
  background:#f4f7f5!important;
  border:1px solid #d4ddd8!important;
  color:#3f6551!important;
  box-shadow:none!important;
  font-size:10px!important;
  font-weight:600!important;
}
.participant-audit-badge.danger{
  background:#fbf2f3!important;
  border-color:#e8cfd2!important;
  color:#9a3e49!important;
  box-shadow:none!important;
}
.participant-audit-stats{
  gap:6px!important;
  margin-bottom:10px!important;
}
.participant-audit-stats span{
  padding:5px 7px!important;
  border-radius:5px!important;
  background:#f6f7f8!important;
  border:1px solid #e1e5e9!important;
  color:#5f6974!important;
  font-weight:500!important;
}
.participant-audit-stats .audit-stat-ok{background:#f3f7f4!important;border-color:#d9e5dc!important;color:#4c7059!important}
.participant-audit-stats .audit-stat-danger{background:#fbf3f4!important;border-color:#ead4d7!important;color:#98505a!important}
.participant-audit-stats .audit-stat-new{background:#f1f5f9!important;border-color:#d7e0e8!important;color:#49667f!important}
.participant-audit-notice{
  border-radius:6px!important;
  background:#f5f8f6!important;
  border-color:#dce7df!important;
  color:#4e6e5a!important;
  font-weight:500!important;
}
.participant-audit-notice.danger{background:#fbf4f5!important;border-color:#ecd7da!important;color:#94434e!important}
.audit-status-chip,
.audit-status-chip.audit-status-new{
  border-radius:4px!important;
  font-weight:600!important;
}

/* Region / completeness / consistency cards: remove forced showcase heights. */
.detail-region-section>.section-head,
#belajarCard>.belajar-sheet-header,
#matrixDualCard>.matrix-dual-head,
#participantAuditCard>.participant-audit-header{
  min-height:0!important;
  height:auto!important;
}
#belajarCard .belajar-header-side{
  gap:10px!important;
}
.wrong-sheet-meta-label{
  font-size:9px!important;
  font-weight:600!important;
  color:#7a8490!important;
}
.wrong-sheet-meta-time,
.wrong-sheet-live{
  font-weight:400!important;
}

/* Export: plain action list, status colors only where meaningful. */
.export-subsection{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.export-divider{border-color:#e3e7eb!important}
.export-subhead-title{
  color:#3a4652!important;
  font-weight:650!important;
}
.export-all-btn,
.export-class-btn,
.export-letter-btn,
.export-missing-class-btn,
.export-missing-all-btn,
.export-missing-region-btn,
.export-letter-dinas,
.export-letter-cabdin,
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn){
  border:1px solid #d8dee7!important;
  border-radius:7px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#34404c!important;
  transition:none!important;
}
.export-all-btn:hover,
.export-class-btn:hover,
.export-letter-btn:hover,
.export-letter-dinas:hover,
.export-letter-cabdin:hover,
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn):hover{
  background:#f7f8fa!important;
  border-color:#b9c3ce!important;
  transform:none!important;
  box-shadow:none!important;
}
.export-all-icon,
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn) .export-all-icon{
  border-radius:5px!important;
  background:#eef3f8!important;
  border-color:#d7e1ea!important;
  color:var(--institution)!important;
  box-shadow:none!important;
}
.export-all-copy b,
.export-letter-dinas .export-all-copy b,
.export-letter-cabdin .export-all-copy b,
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn) .export-all-copy b{
  color:#303b47!important;
  font-weight:650!important;
}
.export-all-copy small,
.export-letter-dinas .export-all-copy small,
.export-letter-cabdin .export-all-copy small{
  color:#7b8590!important;
  font-weight:400!important;
}
.export-total-count,
.export-letter-dinas .export-total-count,
.export-letter-cabdin .export-total-count{
  border-radius:4px!important;
  background:#f3f5f7!important;
  border-color:#dce1e6!important;
  color:#44515e!important;
}

/* Password dialog: plain and deliberate. */
.export-password-backdrop{background:rgba(28,34,40,.42)!important;backdrop-filter:none!important}
.export-password-dialog{
  border-radius:10px!important;
  border:1px solid #d4dae1!important;
  box-shadow:0 18px 50px rgba(20,28,36,.18)!important;
  background:#fff!important;
}
.export-password-icon{
  border-radius:6px!important;
  background:#eef3f8!important;
  color:var(--institution)!important;
  box-shadow:none!important;
}
.export-password-title{font-weight:650!important;color:#26313d!important}
.export-password-label{letter-spacing:.03em!important}
.export-password-confirm,
.export-password-cancel,
.export-password-eye{
  border-radius:6px!important;
  box-shadow:none!important;
}
.export-password-confirm{
  background:var(--institution)!important;
  border-color:var(--institution)!important;
}
.export-password-confirm:hover{background:var(--institution-dark)!important}

/* Share-only views keep the same institutional surface. */
body.matrix-only-mode,
body.export-only-mode{
  background:#f4f5f7!important;
}
body.matrix-only-mode .dashboard-main-grid,
body.export-only-mode .dashboard-main-grid{
  max-width:1320px!important;
}

/* Mobile: retain information density without oversized cards. */
@media(max-width:980px){
  main,.dashboard-main-grid{padding:12px!important;gap:10px!important}
  .card,.mock-card,#matrixDualCard,#participantAuditCard,.detail-region-section,#belajarCard{
    border-radius:8px!important;
  }
}
@media(max-width:680px){
  .topbar-inner{padding:9px 10px!important}
  .logo{width:34px!important;height:34px!important;min-width:34px!important;border-radius:6px!important}
  .brand h1{font-size:14px!important}
  .pad{padding:12px!important}
  main,.dashboard-main-grid{padding:10px 8px 20px!important;gap:9px!important}
  .section-title,.region-status-title,.wrong-sheet-title,
  #matrixDualCard .section-title,#participantAuditCard .section-title,
  .detail-region-section .section-title,#belajarCard .wrong-sheet-title{
    font-size:13.5px!important;
  }
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #kpis .kpi{border-right:1px solid #e2e6eb!important;border-bottom:1px solid #e2e6eb!important}
  #kpis .kpi:nth-child(2n){border-right:0!important}
  #kpis .kpi:nth-last-child(-n+2){border-bottom:0!important}
  .kpi-num,.mock-kpi-card .kpi-num{font-size:23px!important}
  .class-grid{gap:7px!important}
  .collapse-toggle,.matrix-share-view-btn,.export-share-view-btn{height:30px!important;min-height:30px!important;padding:0 8px!important}
  .participant-audit-badge{min-height:28px!important}
}

/* ============================================================
   V1.8.2 — CONSISTENT EDITORIAL LAYOUT
   Visual-only refinement. Single reading axis, consistent header composition.
   No data, sync, audit, password, collapse, or export logic changed.
   ============================================================ */

/* One deliberate reading axis on desktop: every primary section shares
   the same left and right edge. This removes the alternating half-card feel. */
.dashboard-main-grid{
  grid-template-columns:minmax(0,1fr)!important;
  align-items:start!important;
}
.dashboard-main-grid > *{
  grid-column:1!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

/* A slightly narrower editorial measure makes the stacked layout feel
   intentional rather than stretched. */
.topbar-inner,
main,
.dashboard-main-grid{
  max-width:1220px!important;
}

/* All card headers use exactly the same composition:
   copy on the left, controls/status on the right. */
.utility-header,
.section-head,
.region-status-header,
.participant-audit-header,
.wrong-sheet-header,
.belajar-sheet-header,
.matrix-dual-head,
.detail-region-section > .section-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:18px!important;
  row-gap:8px!important;
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
}

/* Left title/copy column. */
.utility-copy,
.region-status-copy,
.participant-audit-header-copy,
.overview-title-block,
.belajar-header-copy,
.wrong-sheet-header > div:first-child,
.section-head > div:first-child{
  min-width:0!important;
  margin:0!important;
  text-align:left!important;
  justify-self:start!important;
}

/* Right action/status column. */
.utility-actions,
.region-status-actions,
.collapse-head-actions,
.detail-collapse-actions,
.matrix-dual-actions,
.participant-audit-actions,
.belajar-header-side,
.belajar-header-actions,
.wrong-room-header-actions{
  min-width:0!important;
  margin:0!important;
  margin-left:auto!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  text-align:right!important;
  flex-wrap:nowrap!important;
}

/* Meta blocks also follow the right-side alignment on desktop. */
.wrong-sheet-meta,
.belajar-sheet-meta,
.matrix-dual-summary-wrap{
  margin:0!important;
  text-align:right!important;
  align-items:flex-end!important;
}
.matrix-dual-summary-wrap{
  min-width:0!important;
  max-width:330px!important;
}
.matrix-mode-summary{
  text-align:right!important;
  white-space:normal!important;
}

/* Every collapse control has the same footprint and always sits at the
   far end of its action group. */
.collapse-toggle,
#matrixDualCard .collapse-toggle,
#participantAuditCard .collapse-toggle,
.detail-region-section .collapse-toggle,
#belajarCard .collapse-toggle,
#wrongRoomCard .collapse-toggle,
#exportCard .collapse-toggle{
  min-width:72px!important;
  justify-content:center!important;
  flex:0 0 auto!important;
}

/* Keep title/subtitle rhythm identical across differently-built cards. */
.section-title,
.region-status-title,
.wrong-sheet-title,
#matrixDualCard .section-title,
#participantAuditCard .section-title,
.detail-region-section .section-title,
#belajarCard .wrong-sheet-title,
#kpiSummaryCard .section-title,
.progress-shell .section-title{
  margin:0!important;
}
.utility-subtitle,
.region-status-sub,
.wrong-sheet-subtitle,
.participant-audit-subtitle{
  margin:3px 0 0!important;
}

/* Consistent content inset once a card is opened. */
.collapse-body{
  width:100%!important;
  margin-top:14px!important;
  padding-top:14px!important;
  border-top:1px solid #e8ebef!important;
}

/* Cards that previously had special paired-card sizing no longer need it. */
.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;
  align-self:auto!important;
}
.dashboard-main-grid > .detail-region-section > .section-head,
.dashboard-main-grid > #belajarCard > .belajar-sheet-header{
  min-height:42px!important;
  height:auto!important;
}

/* On the full-width regional card, two internal source panels can be used
   when there is enough room; the outer section itself remains aligned. */
.dashboard-main-grid > .detail-region-section .region-source-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Controls inside opened cards share left alignment. */
.quota-filter-row,
.assignment-filter-row,
.region-status-control,
.participant-search-wrap,
.matrix-mode-switch-wrap,
.participant-audit-stats,
.completeness-tabs-wrap{
  text-align:left!important;
}

/* Tablet: preserve one-column cards; headers still use left/right composition
   until there is genuinely not enough width. */
@media(max-width:900px){
  .topbar-inner,main,.dashboard-main-grid{max-width:100%!important}
  .belajar-header-side,
  .wrong-room-header-actions{
    flex-wrap:wrap!important;
  }
  .wrong-sheet-meta,
  .belajar-sheet-meta{
    max-width:240px!important;
  }
}

/* Phone: use one consistent vertical header pattern on every card:
   title first, then actions below it, both left aligned. */
@media(max-width:680px){
  .utility-header,
  .section-head,
  .region-status-header,
  .participant-audit-header,
  .wrong-sheet-header,
  .belajar-sheet-header,
  .matrix-dual-head,
  .detail-region-section > .section-head{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    row-gap:9px!important;
    min-height:0!important;
  }

  .utility-actions,
  .region-status-actions,
  .collapse-head-actions,
  .detail-collapse-actions,
  .matrix-dual-actions,
  .participant-audit-actions,
  .belajar-header-side,
  .belajar-header-actions,
  .wrong-room-header-actions{
    width:100%!important;
    margin-left:0!important;
    justify-self:start!important;
    justify-content:flex-start!important;
    text-align:left!important;
    flex-wrap:wrap!important;
  }

  .wrong-sheet-meta,
  .belajar-sheet-meta,
  .matrix-dual-summary-wrap,
  .matrix-mode-summary{
    width:100%!important;
    max-width:none!important;
    text-align:left!important;
    align-items:flex-start!important;
  }

  .collapse-toggle,
  #matrixDualCard .collapse-toggle,
  #participantAuditCard .collapse-toggle,
  .detail-region-section .collapse-toggle,
  #belajarCard .collapse-toggle,
  #wrongRoomCard .collapse-toggle,
  #exportCard .collapse-toggle{
    margin-left:auto!important;
  }

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

  .collapse-body{
    margin-top:12px!important;
    padding-top:12px!important;
  }
}

/* ============================================================
   V1.8.3 — SOFT INDIGO EDITORIAL
   Visual reference: restrained blue/lilac atmosphere + clean admin UI.
   Layout/functionality remain inherited from v1.8.2.
   ============================================================ */
:root{
  --bg:#f7f8fc;
  --bg-soft:#fbfcff;
  --card:#ffffff;
  --card-solid:#ffffff;
  --line:#e4e7ef;
  --line-soft:#eef0f5;
  --text:#1f2440;
  --muted:#71778a;
  --muted-2:#9ba0af;
  --slate:#41485d;
  --surface-tint:#f8f9fc;
  --institution:#5b67e8;
  --institution-dark:#4652ce;
  --institution-soft:#eef0ff;
  --focus:rgba(91,103,232,.12);
}

html,body{
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  background:
    linear-gradient(180deg,rgba(240,246,255,.72) 0,rgba(248,249,252,0) 210px),
    #f7f8fc!important;
  color:var(--text)!important;
}

/* Soft reference atmosphere only in the application header. */
.topbar{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 12% -20%,rgba(127,180,255,.24),transparent 42%),
    radial-gradient(circle at 92% -35%,rgba(190,132,255,.22),transparent 45%),
    linear-gradient(105deg,#f7fbff 0%,#f8f8ff 54%,#faf5ff 100%)!important;
  border-bottom:1px solid rgba(218,221,235,.9)!important;
  box-shadow:none!important;
}
.topbar::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  width:128px!important;
  height:128px!important;
  border:22px solid rgba(100,116,255,.06)!important;
  border-radius:50%!important;
  right:7%!important;
  top:-82px!important;
  pointer-events:none!important;
}
.topbar-inner{
  position:relative!important;
  z-index:1!important;
  max-width:1220px!important;
  padding:16px 20px!important;
}
.brand{gap:12px!important}
.logo{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,#6574f5,#7e66ed)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  color:#fff!important;
  box-shadow:0 7px 20px rgba(91,103,232,.17)!important;
  font-size:14px!important;
  font-weight:800!important;
}
.brand h1{
  font-size:18px!important;
  line-height:1.2!important;
  letter-spacing:-.025em!important;
  font-weight:750!important;
  color:#1d2454!important;
}
.brand p{
  margin-top:3px!important;
  font-size:11.5px!important;
  font-weight:500!important;
  color:#757b91!important;
}

.btn,.actions .btn{
  border-radius:9px!important;
  border-color:#dde1eb!important;
  font-family:"DM Sans",system-ui,sans-serif!important;
  font-weight:650!important;
}
.btn-primary{
  background:#5b67e8!important;
  border-color:#5b67e8!important;
  box-shadow:0 4px 11px rgba(91,103,232,.14)!important;
}
.btn-primary:hover{background:#4c57d6!important;border-color:#4c57d6!important}

/* Main page remains a single consistent axis from v1.8.2. */
main,.dashboard-main-grid{
  max-width:1220px!important;
  padding:18px 18px 26px!important;
  gap:11px!important;
}

.card,.mock-card,#matrixDualCard,#participantAuditCard,.detail-region-section,
#belajarCard,#regionStatusCard,#wrongRoomCard,#exportCard,#kpiSummaryCard,
.progress-shell,.quota-explorer,#participantSearchCard{
  border:1px solid #e4e7ef!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 1px 2px rgba(27,35,58,.025),0 6px 22px rgba(27,35,58,.025)!important;
}
.pad{padding:16px 17px!important}

.section-title,.region-status-title,.wrong-sheet-title,
#matrixDualCard .section-title,#participantAuditCard .section-title,
.detail-region-section .section-title,#belajarCard .wrong-sheet-title,
#kpiSummaryCard .section-title,.progress-shell .section-title{
  font-family:"DM Sans",system-ui,sans-serif!important;
  color:#252b45!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:-.012em!important;
}
.muted,.utility-subtitle,.region-status-sub,.wrong-sheet-subtitle,
.participant-audit-subtitle,#matrixDualCard .muted,#participantAuditCard .muted,
.detail-region-section .muted,#belajarCard .wrong-sheet-subtitle{
  color:#7b8191!important;
  font-weight:500!important;
}

/* Simple right-side controls — no decorative badge language. */
.collapse-toggle,.matrix-share-view-btn,.export-share-view-btn{
  min-height:32px!important;
  height:32px!important;
  border-radius:8px!important;
  border:1px solid #dde1ea!important;
  background:#fff!important;
  color:#4c5367!important;
  box-shadow:none!important;
  font-family:"DM Sans",system-ui,sans-serif!important;
  font-size:10.5px!important;
  font-weight:650!important;
}
.collapse-toggle:hover,.matrix-share-view-btn:hover,.export-share-view-btn:hover{
  background:#f6f7fd!important;
  border-color:#cfd4e3!important;
  color:#4d59d3!important;
}
.collapse-toggle[aria-expanded="true"]{
  background:#f0f2ff!important;
  border-color:#d8dcfb!important;
  color:#4d59d3!important;
}

.collapse-body{
  border-top:1px solid #edf0f5!important;
  margin-top:14px!important;
  padding-top:15px!important;
}

/* Inputs have the quiet light surface seen in clean admin products. */
input,select,textarea,
.quota-kab-input,.participant-search-input,.region-status-input{
  font-family:"DM Sans",system-ui,sans-serif!important;
  background:#fbfcff!important;
  border-color:#e1e5ee!important;
  border-radius:9px!important;
  color:#333a52!important;
}
input:focus,select:focus,textarea:focus,
.quota-kab-input:focus,.participant-search-input:focus,.region-status-input:focus{
  background:#fff!important;
  border-color:#aab3f3!important;
  box-shadow:0 0 0 3px rgba(91,103,232,.09)!important;
  outline:none!important;
}
label{
  color:#7b8191!important;
  font-weight:650!important;
  letter-spacing:.035em!important;
}

/* KPI panel: one clean segmented strip, not four floating cards. */
#kpis{
  border:1px solid #e9ebf1!important;
  border-radius:11px!important;
  overflow:hidden!important;
  background:#fff!important;
  gap:0!important;
}
#kpis .kpi{
  border:0!important;
  border-right:1px solid #eceef4!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  padding:17px 18px!important;
}
#kpis .kpi:last-child{border-right:0!important}
.kpi-label,.mock-kpi-card .kpi-label{
  color:#82889a!important;
  font-size:9.5px!important;
  font-weight:650!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.kpi-num,.mock-kpi-card .kpi-num{
  color:#252b45!important;
  font-size:27px!important;
  font-weight:750!important;
  letter-spacing:-.045em!important;
}
.kpi-sub{color:#979cab!important;font-weight:500!important}
.kpi-dot{width:7px!important;height:7px!important;margin-top:7px!important}

/* Progress cards: compact operational rows. */
.class-grid{gap:8px!important}
.class-card{
  border:1px solid #e8ebf2!important;
  border-radius:10px!important;
  box-shadow:none!important;
  background:#fff!important;
  padding:14px 15px!important;
}
.class-name{color:#343a50!important;font-weight:700!important}
.class-main{color:#252b45!important;font-size:25px!important;font-weight:750!important}
.progress{height:6px!important;background:#eef0f5!important}
.progress>span{
  background:#6672ed!important;
  box-shadow:none!important;
}
.pill,.badge,.participant-audit-badge,.audit-status-chip{
  border-radius:6px!important;
  font-family:"DM Sans",system-ui,sans-serif!important;
  font-weight:650!important;
}

/* Tables and data panels. */
.table-wrap{
  border-color:#e6e9f0!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
table{font-family:"DM Sans",system-ui,sans-serif!important}
thead{
  background:#f8f9fc!important;
  color:#7d8394!important;
  text-transform:none!important;
}
th{
  font-size:9.5px!important;
  font-weight:700!important;
  letter-spacing:.005em!important;
}
th,td{border-color:#eef0f4!important}

/* Status colors stay semantic; their saturation is reduced. */
.cell-ok,.p-dinas{background:#eef4ff!important;color:#34599a!important}
.cell-miss,.p-cabdin{background:#fff7e9!important;color:#9a6b26!important}
.cell-over,.p-missing,.p-over{background:#fff0f2!important;color:#9f4955!important}
.cell-na{background:#f4f5f7!important;color:#8d94a2!important}

.participant-audit-notice{
  background:#f8fafc!important;
  border-color:#e6e9ef!important;
  color:#5f677a!important;
}

/* Export actions: retain functionality, align with the new visual system. */
.export-all-btn,.export-class-btn,.export-letter-btn,.export-missing-class-btn,
.export-missing-all-btn,.export-missing-region-btn,.export-letter-dinas,
.export-letter-cabdin,.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn){
  border-color:#e0e4ec!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#3d4459!important;
}
.export-all-btn:hover,.export-class-btn:hover,.export-letter-btn:hover,
.export-letter-dinas:hover,.export-letter-cabdin:hover,
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn):hover{
  background:#f8f9fe!important;
  border-color:#d2d7e5!important;
}
.export-all-icon,
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn) .export-all-icon{
  background:#f0f2ff!important;
  border-color:#dfe2fa!important;
  color:#5561db!important;
  border-radius:7px!important;
}

/* Dialog styling follows the same family. */
.export-password-dialog{
  font-family:"DM Sans",system-ui,sans-serif!important;
  border-radius:13px!important;
  border-color:#dfe3ec!important;
  box-shadow:0 24px 70px rgba(34,40,75,.16)!important;
}
.export-password-icon{
  background:#eef0ff!important;
  color:#5661dc!important;
  border-radius:8px!important;
}
.export-password-confirm{
  background:#5b67e8!important;
  border-color:#5b67e8!important;
}
.export-password-confirm:hover{background:#4c57d6!important}

@media(max-width:680px){
  html,body{
    background:linear-gradient(180deg,#f3f7ff 0,#f7f8fc 135px)!important;
  }
  .topbar-inner{padding:11px 10px!important}
  .logo{width:36px!important;height:36px!important;min-width:36px!important;border-radius:9px!important}
  .brand h1{font-size:14.5px!important;letter-spacing:-.02em!important}
  main,.dashboard-main-grid{padding:10px 8px 22px!important;gap:9px!important}
  .card,.mock-card,#matrixDualCard,#participantAuditCard,.detail-region-section,
  #belajarCard,#regionStatusCard,#wrongRoomCard,#exportCard,#kpiSummaryCard,
  .progress-shell,.quota-explorer,#participantSearchCard{
    border-radius:11px!important;
  }
  .pad{padding:13px!important}
  #kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #kpis .kpi{border-right:1px solid #eceef4!important;border-bottom:1px solid #eceef4!important;padding:13px 12px!important}
  #kpis .kpi:nth-child(2n){border-right:0!important}
  #kpis .kpi:nth-last-child(-n+2){border-bottom:0!important}
  .kpi-num,.mock-kpi-card .kpi-num{font-size:23px!important}
}


/* ============================================================
   V1.8.4 — NEXUS-INSPIRED QUIET ADMIN
   Visual-only refinement. Functional layout and interactions stay intact.
   Principles: DM Sans, white workspace, thin borders, restrained blue,
   consistent alignment, compact controls, minimal decoration.
   ============================================================ */
:root{
  --bg:#fafbfc;
  --bg-soft:#f7f9fc;
  --card:#ffffff;
  --card-solid:#ffffff;
  --line:#e8ebf0;
  --line-soft:#f0f2f5;
  --text:#20232d;
  --muted:#737989;
  --muted-2:#a0a5b1;
  --slate:#454b5b;
  --surface-tint:#f8fafc;
  --institution:#3478f6;
  --institution-dark:#2563d9;
  --institution-soft:#eef5ff;
  --focus:rgba(52,120,246,.12);
}

html,body{
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  background:#fafbfc!important;
  color:#20232d!important;
}

/* Nexus-like app bar: quiet, white, functional. */
.topbar{
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid #e9ecf1!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.topbar::before{display:none!important}
.topbar-inner{
  max-width:1240px!important;
  min-height:64px!important;
  padding:11px 20px!important;
}
.brand{gap:11px!important}
.logo{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  border-radius:9px!important;
  background:#3478f6!important;
  border:0!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:700!important;
}
.brand h1{
  color:#20232d!important;
  font-size:17px!important;
  line-height:1.18!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}
.brand p{
  margin-top:2px!important;
  color:#858b98!important;
  font-size:11px!important;
  font-weight:400!important;
}

.btn,.actions .btn{
  font-family:"DM Sans",system-ui,sans-serif!important;
  min-height:34px!important;
  border-radius:7px!important;
  font-weight:600!important;
}
.btn-primary{
  background:#3478f6!important;
  border-color:#3478f6!important;
  box-shadow:none!important;
}
.btn-primary:hover{background:#2869df!important;border-color:#2869df!important}

/* One disciplined content rail. */
main,.dashboard-main-grid{
  max-width:1240px!important;
  padding:18px 20px 30px!important;
  gap:10px!important;
}

.card,.mock-card,#matrixDualCard,#participantAuditCard,.detail-region-section,
#belajarCard,#regionStatusCard,#wrongRoomCard,#exportCard,#kpiSummaryCard,
.progress-shell,.quota-explorer,#participantSearchCard{
  background:#fff!important;
  border:1px solid #e7eaf0!important;
  border-radius:9px!important;
  box-shadow:0 1px 2px rgba(16,24,40,.018)!important;
}
.pad{padding:15px 16px!important}

/* Consistent title hierarchy. */
.section-title,.region-status-title,.wrong-sheet-title,
#matrixDualCard .section-title,#participantAuditCard .section-title,
.detail-region-section .section-title,#belajarCard .wrong-sheet-title,
#kpiSummaryCard .section-title,.progress-shell .section-title{
  font-family:"DM Sans",system-ui,sans-serif!important;
  color:#252832!important;
  font-size:13.5px!important;
  font-weight:650!important;
  letter-spacing:-.01em!important;
}
.muted,.utility-subtitle,.region-status-sub,.wrong-sheet-subtitle,
.participant-audit-subtitle,#matrixDualCard .muted,#participantAuditCard .muted,
.detail-region-section .muted,#belajarCard .wrong-sheet-subtitle{
  color:#858b98!important;
  font-size:10.5px!important;
  font-weight:400!important;
}

/* Remove ornamental UI language, keep action affordances. */
.mock-badge-wrap,.region-status-badge,.inline-detail-badge,
.overview-icon,.overview-icon-matrix{display:none!important}
.utility-actions,.region-status-actions,.collapse-head-actions,.detail-collapse-actions,
.matrix-dual-actions{gap:7px!important}

.collapse-toggle,.matrix-share-view-btn,.export-share-view-btn{
  min-height:30px!important;
  height:30px!important;
  padding:0 10px!important;
  border-radius:6px!important;
  border:1px solid #e1e5eb!important;
  background:#fff!important;
  color:#626878!important;
  box-shadow:none!important;
  font-family:"DM Sans",system-ui,sans-serif!important;
  font-size:10.5px!important;
  font-weight:600!important;
}
.collapse-toggle:hover,.matrix-share-view-btn:hover,.export-share-view-btn:hover{
  background:#f7f9fc!important;
  border-color:#d5dae3!important;
  color:#3478f6!important;
}
.collapse-toggle[aria-expanded="true"]{
  background:#eef5ff!important;
  border-color:#d7e7ff!important;
  color:#2869df!important;
}
.collapse-body{
  border-top:1px solid #eef0f3!important;
  margin-top:13px!important;
  padding-top:14px!important;
}

/* Form controls: neutral white/gray, blue only on focus. */
input,select,textarea,
.quota-kab-input,.participant-search-input,.region-status-input{
  font-family:"DM Sans",system-ui,sans-serif!important;
  background:#fff!important;
  border:1px solid #dfe3e9!important;
  border-radius:7px!important;
  color:#30343f!important;
  box-shadow:none!important;
}
input:focus,select:focus,textarea:focus,
.quota-kab-input:focus,.participant-search-input:focus,.region-status-input:focus{
  border-color:#8eb6fb!important;
  box-shadow:0 0 0 3px rgba(52,120,246,.09)!important;
  outline:none!important;
}
label{
  color:#747b89!important;
  font-family:"DM Sans",system-ui,sans-serif!important;
  font-size:9.5px!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
}

/* KPI: flat metric strip, visually closer to mature admin software. */
#kpis{
  border:1px solid #e8ebf0!important;
  border-radius:8px!important;
  background:#fff!important;
  overflow:hidden!important;
  gap:0!important;
}
#kpis .kpi{
  border:0!important;
  border-right:1px solid #eceff3!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  padding:15px 16px!important;
}
#kpis .kpi:last-child{border-right:0!important}
.kpi-label,.mock-kpi-card .kpi-label{
  color:#858b98!important;
  font-size:9.5px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.kpi-num,.mock-kpi-card .kpi-num{
  color:#242833!important;
  font-size:25px!important;
  font-weight:700!important;
  letter-spacing:-.035em!important;
}
.kpi-sub{color:#a0a5b1!important;font-weight:400!important}
.kpi-dot{width:6px!important;height:6px!important;margin-top:7px!important}

/* Progress: clean blocks, no decorative glow. */
.class-grid{gap:7px!important}
.class-card{
  border:1px solid #e9ecf1!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:none!important;
  padding:13px 14px!important;
}
.class-name{color:#3b404d!important;font-weight:600!important}
.class-main{color:#242833!important;font-size:24px!important;font-weight:700!important}
.progress{height:5px!important;background:#edf0f4!important;border-radius:999px!important}
.progress>span{background:#4c86f7!important;box-shadow:none!important}

/* Pills exist only to communicate state. */
.pill,.badge,.participant-audit-badge,.audit-status-chip{
  border-radius:5px!important;
  font-family:"DM Sans",system-ui,sans-serif!important;
  font-weight:600!important;
}

/* Data surfaces. */
.table-wrap{
  border:1px solid #e7eaf0!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
table{font-family:"DM Sans",system-ui,sans-serif!important}
thead{background:#f8f9fb!important;color:#767d8b!important;text-transform:none!important}
th{font-size:9.5px!important;font-weight:600!important;letter-spacing:0!important}
th,td{border-color:#eef0f3!important}
tbody tr:hover{background:#fbfcfe!important}

/* Calm semantic state colors. */
.cell-ok,.p-dinas{background:#edf5ff!important;color:#3268a8!important}
.cell-miss,.p-cabdin{background:#fff8e9!important;color:#8b6628!important}
.cell-over,.p-missing,.p-over{background:#fff1f2!important;color:#98505a!important}
.cell-na{background:#f4f5f7!important;color:#878e9a!important}
.participant-audit-notice{
  background:#f8fafc!important;
  border-color:#e8ebf0!important;
  color:#626977!important;
}

/* Export and dialogs use the same small-radius system. */
.export-all-btn,.export-class-btn,.export-letter-btn,.export-missing-class-btn,
.export-missing-all-btn,.export-missing-region-btn,.export-letter-dinas,
.export-letter-cabdin,.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn){
  border-color:#e0e4ea!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#444a58!important;
  box-shadow:none!important;
}
.export-all-btn:hover,.export-class-btn:hover,.export-letter-btn:hover,
.export-letter-dinas:hover,.export-letter-cabdin:hover,
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn):hover{
  background:#f7f9fc!important;
  border-color:#d5dae3!important;
}
.export-all-icon,
.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn) .export-all-icon{
  background:#eef5ff!important;
  border-color:#dceaff!important;
  color:#3478f6!important;
  border-radius:6px!important;
}
.export-password-dialog{
  font-family:"DM Sans",system-ui,sans-serif!important;
  border-radius:10px!important;
  border-color:#dfe3e9!important;
  box-shadow:0 22px 60px rgba(20,28,45,.15)!important;
}
.export-password-icon{background:#eef5ff!important;color:#3478f6!important;border-radius:7px!important}
.export-password-confirm{background:#3478f6!important;border-color:#3478f6!important}
.export-password-confirm:hover{background:#2869df!important}

@media(max-width:680px){
  html,body{background:#fafbfc!important}
  .topbar-inner{padding:10px 10px!important;min-height:58px!important}
  .logo{width:34px!important;height:34px!important;min-width:34px!important;border-radius:8px!important}
  .brand h1{font-size:14px!important;letter-spacing:-.015em!important}
  main,.dashboard-main-grid{padding:9px 8px 22px!important;gap:8px!important}
  .card,.mock-card,#matrixDualCard,#participantAuditCard,.detail-region-section,
  #belajarCard,#regionStatusCard,#wrongRoomCard,#exportCard,#kpiSummaryCard,
  .progress-shell,.quota-explorer,#participantSearchCard{border-radius:8px!important}
  .pad{padding:12px!important}
  #kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #kpis .kpi{border-right:1px solid #eceff3!important;border-bottom:1px solid #eceff3!important;padding:12px!important}
  #kpis .kpi:nth-child(2n){border-right:0!important}
  #kpis .kpi:nth-last-child(-n+2){border-bottom:0!important}
  .kpi-num,.mock-kpi-card .kpi-num{font-size:22px!important}
  .collapse-toggle,.matrix-share-view-btn,.export-share-view-btn{height:29px!important;min-height:29px!important;padding:0 9px!important}
}

/* ============================================================
   V1.8.5 — READABILITY PASS
   Typography-only readability refinement for desktop and mobile.
   No functional selectors, state rules, or JS behavior changed.
   ============================================================ */
html body{
  font-size:13px!important;
  line-height:1.5!important;
}

/* App bar */
.brand h1{
  font-size:18.5px!important;
  line-height:1.22!important;
}
.brand p{
  font-size:12.5px!important;
  line-height:1.4!important;
}
.btn,.actions .btn{
  font-size:12px!important;
}

/* Section hierarchy */
.section-title,.region-status-title,.wrong-sheet-title,
#matrixDualCard .section-title,#participantAuditCard .section-title,
.detail-region-section .section-title,#belajarCard .wrong-sheet-title,
#kpiSummaryCard .section-title,.progress-shell .section-title{
  font-size:15px!important;
  line-height:1.35!important;
}
.muted,.utility-subtitle,.region-status-sub,.wrong-sheet-subtitle,
.participant-audit-subtitle,#matrixDualCard .muted,#participantAuditCard .muted,
.detail-region-section .muted,#belajarCard .wrong-sheet-subtitle{
  font-size:12px!important;
  line-height:1.5!important;
}

/* Controls */
.collapse-toggle,.matrix-share-view-btn,.export-share-view-btn{
  font-size:12px!important;
}
.collapse-toggle i{font-size:10px!important}
label{
  font-size:11.5px!important;
  line-height:1.35!important;
}
input,select,textarea,
.quota-kab-input,.participant-search-input,.region-status-input{
  font-size:12.5px!important;
  line-height:1.4!important;
}

/* KPI */
.kpi-label,.mock-kpi-card .kpi-label{
  font-size:11.5px!important;
  line-height:1.35!important;
}
.kpi-num,.mock-kpi-card .kpi-num{
  font-size:28px!important;
  line-height:1.08!important;
}
.kpi-sub{
  font-size:11.5px!important;
  line-height:1.4!important;
}

/* Progress / class cards */
.class-name{
  font-size:12.5px!important;
  line-height:1.35!important;
}
.class-main{
  font-size:26px!important;
  line-height:1.08!important;
}
.class-sub,.class-meta,.progress-label,.progress-meta{
  font-size:11.5px!important;
  line-height:1.4!important;
}

/* Data tables */
table{
  font-size:11.5px!important;
}
th{
  font-size:11px!important;
  line-height:1.35!important;
}
td{
  font-size:11.5px!important;
  line-height:1.45!important;
}
.status-matrix-wrap th,.missing-matrix-wrap th{
  font-size:10.5px!important;
}
.status-matrix-wrap td,.missing-matrix-wrap td{
  font-size:11px!important;
}

/* Status, audit and dense helper text */
.pill,.badge,.participant-audit-badge,.audit-status-chip,
.participant-audit-stats span,.participant-audit-notice,
.audit-change-label,.audit-person-meta{
  font-size:11px!important;
  line-height:1.4!important;
}
.participant-audit-badge b,.participant-audit-stats b{
  font-size:13px!important;
}
.participant-audit-table{
  font-size:11.5px!important;
}
.participant-audit-table th{
  font-size:10.5px!important;
}
.participant-audit-table td{
  font-size:11px!important;
}
.completeness-tab{
  font-size:11px!important;
}

/* Export/action cards */
.export-all-btn,.export-class-btn,.export-letter-btn,.export-missing-class-btn,
.export-missing-all-btn,.export-missing-region-btn,.export-letter-dinas,
.export-letter-cabdin,.export-card .export-all-btn:not(.export-missing-all-btn):not(.export-missing-region-btn){
  font-size:11.5px!important;
}
.export-password-dialog,
.export-password-dialog input,
.export-password-dialog button{
  font-size:12px!important;
}

@media(max-width:680px){
  html body{font-size:12.5px!important}
  .brand h1{font-size:16px!important}
  .brand p{font-size:11.5px!important}
  .section-title,.region-status-title,.wrong-sheet-title,
  #matrixDualCard .section-title,#participantAuditCard .section-title,
  .detail-region-section .section-title,#belajarCard .wrong-sheet-title,
  #kpiSummaryCard .section-title,.progress-shell .section-title{
    font-size:14.5px!important;
  }
  .muted,.utility-subtitle,.region-status-sub,.wrong-sheet-subtitle,
  .participant-audit-subtitle,#matrixDualCard .muted,#participantAuditCard .muted,
  .detail-region-section .muted,#belajarCard .wrong-sheet-subtitle{
    font-size:11.5px!important;
  }
  .collapse-toggle,.matrix-share-view-btn,.export-share-view-btn{
    font-size:11.5px!important;
  }
  label{font-size:11px!important}
  input,select,textarea,
  .quota-kab-input,.participant-search-input,.region-status-input{
    font-size:12px!important;
  }
  .kpi-label,.mock-kpi-card .kpi-label{font-size:11px!important}
  .kpi-num,.mock-kpi-card .kpi-num{font-size:25px!important}
  .kpi-sub{font-size:11px!important}
  .class-name{font-size:12px!important}
  .class-main{font-size:24px!important}
  table{font-size:11px!important}
  th{font-size:10.5px!important}
  td{font-size:11px!important}
  .status-matrix-wrap th,.missing-matrix-wrap th{font-size:10px!important}
  .status-matrix-wrap td,.missing-matrix-wrap td{font-size:10.5px!important}
  .participant-audit-table{font-size:11px!important}
  .participant-audit-table th{font-size:10px!important}
  .participant-audit-table td{font-size:10.5px!important}
}

/* =========================================================
   V1.8.6 — compact audit layout + audit export controls
   Visual density only; audit comparison logic is unchanged.
   ========================================================= */
.participant-audit-summary-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-top:2px;
}
.participant-audit-summary-row .participant-audit-stats{
  flex:1 1 auto;
  min-width:0;
  margin:0!important;
}
.participant-audit-export-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}
.participant-audit-export-btn{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border:1px solid #d8dee8;
  border-radius:8px;
  background:#fff;
  color:#344054;
  font:600 11.5px/1 "DM Sans",sans-serif;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
.participant-audit-export-btn:hover{
  border-color:#b9c4d5;
  background:#f8fafc;
  color:#1d4ed8;
}
.participant-audit-export-btn:active{transform:translateY(1px)}
.participant-audit-export-btn .audit-export-lock{
  font-size:9px;
  color:#98a2b3;
}

/* Keep the browser view compact: the table now respects the card width instead
   of letting long e-mail / change values force very wide columns. */
.participant-audit-table-wrap{
  width:100%;
  max-width:100%;
  overflow:auto;
}
.participant-audit-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
.participant-audit-table col.audit-col-training{width:14%}
.participant-audit-table col.audit-col-region{width:9%}
.participant-audit-table col.audit-col-wali{width:6%}
.participant-audit-table col.audit-col-person{width:22%}
.participant-audit-table col.audit-col-change{width:22%}
.participant-audit-table col.audit-col-row{width:5%}
.participant-audit-table th,
.participant-audit-table td{
  min-width:0!important;
  overflow-wrap:anywhere;
  word-break:normal;
}
.participant-audit-training,
.participant-audit-wali{
  white-space:normal!important;
}
.audit-person-name,
.audit-person-inst,
.audit-person-meta,
.audit-change-values{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.audit-person-meta{
  line-height:1.48!important;
}
.audit-change-list{
  min-width:0!important;
  gap:4px!important;
}
.audit-change-item{
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:5px!important;
}
.audit-change-label{
  letter-spacing:0!important;
}
.audit-status-chip{
  max-width:100%;
  white-space:normal!important;
  line-height:1.25!important;
}
.audit-row-link{
  white-space:normal!important;
  justify-content:flex-start;
}

@media(max-width:1100px){
  .participant-audit-table{
    min-width:920px!important;
    table-layout:fixed!important;
  }
  .participant-audit-table col.audit-col-training{width:135px}
  .participant-audit-table col.audit-col-region{width:92px}
  .participant-audit-table col.audit-col-wali{width:70px}
  .participant-audit-table col.audit-col-person{width:210px}
  .participant-audit-table col.audit-col-change{width:205px}
  .participant-audit-table col.audit-col-row{width:62px}
}
@media(max-width:680px){
  .participant-audit-summary-row{
    flex-direction:column;
    align-items:stretch;
    gap:9px;
  }
  .participant-audit-export-actions{
    justify-content:flex-end;
  }
  .participant-audit-export-btn{
    min-height:32px;
    font-size:11px;
  }
}