/* Statistik Penilaian Harian (admin) — dipakai js/statistik-penilaian.js.
   Warna data: satu hue biru (seri & skala ordinal heatmap, sudah divalidasi
   kontras/CVD untuk mode terang & gelap). Warna status hanya untuk
   selesai / sedang diisi / belum dimulai dan selalu berpasangan dengan ikon + label. */

#statPenilaianView { display:none; }
#statPenilaianView.active { display:flex; }
#statPenilaianView [hidden] { display:none !important; }
#statPenilaianView .analitik-page-breadcrumb { flex-wrap:wrap; }

#statPenilaianView {
  --sp-series:#2a78d6;
  --sp-series-soft:#9ec5f4;
  --sp-track:#dce9fb;
  --sp-hair:rgba(15,23,42,.10);
  --sp-good:#0ca30c;
  --sp-warn:#fab219;
  --sp-serious:#ec835a;
  --sp-crit:#d03b3b;
  --sp-heat-0:#f0efec; --sp-heat-0-ink:#52514e;
  --sp-heat-1:#86b6ef; --sp-heat-1-ink:#0b0b0b;
  --sp-heat-2:#5598e7; --sp-heat-2-ink:#0b0b0b;
  --sp-heat-3:#2a78d6; --sp-heat-3-ink:#ffffff;
  --sp-heat-4:#1c5cab; --sp-heat-4-ink:#ffffff;
  --sp-heat-5:#0d366b; --sp-heat-5-ink:#ffffff;
}
#appShell[data-theme="dark"] #statPenilaianView {
  --sp-series:#3987e5;
  --sp-series-soft:#256abf;
  --sp-track:rgba(57,135,229,.20);
  --sp-hair:rgba(255,255,255,.12);
  --sp-heat-0:#383835; --sp-heat-0-ink:#c3c2b7;
  --sp-heat-1:#2a78d6; --sp-heat-1-ink:#ffffff;
  --sp-heat-2:#5598e7; --sp-heat-2-ink:#0b0b0b;
  --sp-heat-3:#86b6ef; --sp-heat-3-ink:#0b0b0b;
  --sp-heat-4:#b7d3f6; --sp-heat-4-ink:#0b0b0b;
  --sp-heat-5:#e6f0fd; --sp-heat-5-ink:#0b0b0b;
}

/* ── Filter ─────────────────────────────────────────────────────────── */
#statPenilaianView .sp-filters .laporan-filter-group { min-width:130px; }
#statPenilaianView .sp-filter-actions { flex:0 0 auto; min-width:0; flex-direction:row; align-items:flex-end; gap:8px; }
.sp-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid var(--app-border); border-radius:9px; background:var(--app-card); color:var(--app-text); font:inherit; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .15s,border-color .15s,transform .12s ease-out; }
.sp-btn svg { width:15px; height:15px; flex:0 0 auto; }
/* Hover hanya untuk perangkat yang benar-benar bisa hover: di layar sentuh efeknya menempel setelah diketuk. */
@media (hover:hover) { .sp-btn:hover:not(:disabled) { background:var(--app-hover); } }
/* Umpan balik tekan muncul saat jari/klik turun, tidak menunggu dilepas. */
.sp-btn:active:not(:disabled) { transform:scale(.97); transition:transform .1s ease-out; }
.sp-btn:not(.is-primary):active:not(:disabled) { background:color-mix(in srgb,var(--app-text) 9%,transparent); }
.sp-btn:focus-visible { outline:2px solid var(--sp-series); outline-offset:2px; }
.sp-btn:disabled { opacity:.5; cursor:not-allowed; }
.sp-btn.is-primary { background:#166534; border-color:#166534; color:#fff; }
@media (hover:hover) { .sp-btn.is-primary:hover:not(:disabled) { background:#14532d; border-color:#14532d; } }
.sp-btn.is-primary:active:not(:disabled) { background:#123f27; }
.sp-month-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sp-month-label { font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--app-dim); }
.sp-months { display:flex; gap:6px; flex-wrap:wrap; }
.sp-month { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:56px; padding:7px 12px; border:1px solid var(--app-border); border-radius:999px; background:var(--app-muted); color:var(--app-text); font:inherit; font-size:12px; font-weight:800; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.sp-month:hover { border-color:var(--sp-series); }
.sp-month:focus-visible { outline:2px solid var(--sp-series); outline-offset:2px; }
.sp-month.is-active { background:var(--sp-series); border-color:var(--sp-series); color:#fff; }
.sp-month.is-future:not(.is-active) { color:var(--app-dim); background:transparent; }
.sp-month-now { width:6px; height:6px; border-radius:50%; background:var(--app-accent); }
.sp-month.is-active .sp-month-now { background:#fff; }
.sp-lock { display:inline-flex; width:11px; height:11px; opacity:.8; }
.sp-lock svg { width:100%; height:100%; }
.sp-status { min-height:16px; font-size:11.5px; font-weight:600; color:var(--app-dim); }
.sp-status[data-tone="err"] { color:var(--app-danger); font-weight:700; }

/* ── Alarm Pertemuan CLIK ─────────────────────────────────────────── */
#statPenilaianView .sp-tab-badge { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; margin-left:5px; padding:0 5px; border-radius:999px; background:var(--sp-crit); color:#fff; font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; animation:sp-al-badge-in .16s ease-out both; }
@keyframes sp-al-badge-in { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
.sp-al-status { display:flex; align-items:center; gap:10px; min-height:38px; padding:8px 12px; border:1px solid var(--app-border); border-radius:10px; background:var(--app-muted); color:var(--app-text); font-size:12px; font-weight:700; transition:color .15s,background .15s; }
.sp-al-status[data-tone="alarm"], .sp-al-hero[data-status="alarm"] { color:var(--sp-crit); background:color-mix(in srgb,var(--sp-crit) 9%,var(--app-card)); }
.sp-al-status[data-tone="waiting"] { color:var(--app-text); background:color-mix(in srgb,var(--sp-warn) 13%,var(--app-card)); }
.sp-al-status[data-tone="good"], .sp-al-hero[data-status="aman"] { color:var(--app-text); background:color-mix(in srgb,var(--sp-good) 9%,var(--app-card)); }
.sp-al-status[data-tone="error"] { color:var(--sp-crit); }
.sp-al-status .sp-link-btn { margin-left:auto; }
.sp-al-summary { display:grid; grid-template-columns:minmax(185px,260px) minmax(0,1fr); gap:14px; }
.sp-al-hero { display:flex; flex-direction:column; justify-content:center; gap:5px; padding:16px; border-radius:12px; font-size:12px; font-weight:700; }
.sp-al-hero .sp-hero-value { color:inherit; font-variant-numeric:tabular-nums; }
.sp-al-summary .sp-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sp-al-gurus,.sp-al-list { display:flex; flex-direction:column; gap:8px; min-width:0; }
.sp-al-guru,.sp-al-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:12px; border:1px solid var(--app-border); border-radius:11px; background:var(--app-card); }
.sp-al-guru > div:first-child,.sp-al-main { display:flex; flex-direction:column; gap:5px; min-width:0; }
.sp-al-guru strong { color:var(--app-text); font-size:12.5px; }
.sp-al-guru small { display:block; color:var(--app-dim); font-size:11px; font-weight:600; }
.sp-al-guru-actions,.sp-al-action { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; flex:0 0 auto; }
.sp-al-title { display:flex; align-items:center; gap:7px; color:var(--app-text); font-size:13px; }
.sp-al-icon { color:var(--sp-good); font-weight:900; }
.sp-al-row[data-status="alarm"] .sp-al-icon,.sp-al-row[data-status="alarm"] .sp-al-result { color:var(--sp-crit); }
.sp-al-row[data-status="menunggu"] .sp-al-icon { color:var(--sp-warn); }
.sp-al-row[data-inval-only="true"] .sp-al-icon,.sp-al-row[data-inval-only="true"] .sp-al-result { color:var(--app-dim); }
.sp-al-meta { color:var(--app-dim); font-size:11px; font-weight:600; }
.sp-al-chips { display:flex; flex-wrap:wrap; gap:5px; }
.sp-al-chip { display:inline-flex; align-items:center; padding:4px 7px; border:1px solid var(--app-border); border-radius:999px; background:var(--app-muted); color:var(--app-text); font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.sp-al-chip[data-status="alarm"],.sp-al-chip[data-status="kurang"] { border-color:color-mix(in srgb,var(--sp-crit) 40%,var(--app-border)); }
.sp-al-chip[data-status="menunggu"] { border-color:color-mix(in srgb,var(--sp-warn) 55%,var(--app-border)); }
.sp-al-chip[data-status="inval"] { color:var(--app-dim); }
.sp-al-result { color:var(--sp-good); font-size:11.5px; font-weight:800; white-space:nowrap; }
.sp-al-toolbar { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sp-al-filters { display:flex; gap:5px; flex-wrap:wrap; }
.sp-al-filter { min-height:36px; padding:7px 11px; border:1px solid var(--app-border); border-radius:999px; background:var(--app-card); color:var(--app-text); font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.sp-al-filter[aria-pressed="true"] { background:var(--sp-series); border-color:var(--sp-series); color:#fff; }
.sp-al-filter:active,.sp-al-row .sp-btn:active { transform:scale(.97); transition:transform .1s ease-out; }
.sp-al-filter:focus-visible,.sp-al-chip:focus-visible,.sp-al-details summary:focus-visible { outline:2px solid var(--sp-series); outline-offset:2px; }
.sp-al-selected { color:var(--app-text); font-size:11.5px; font-weight:700; }
.sp-al-details { gap:8px; }
.sp-al-details summary { color:var(--app-text); font-size:12px; font-weight:800; cursor:pointer; }
.sp-al-details[open] summary { margin-bottom:8px; }
@media (hover:hover) { .sp-al-row:hover,.sp-al-guru:hover { background:var(--app-hover); } .sp-al-filter:hover:not([aria-pressed="true"]) { background:var(--app-hover); } }
@media (max-width:700px) {
  .sp-al-summary { grid-template-columns:1fr; }
  .sp-al-summary .sp-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sp-al-guru,.sp-al-row { align-items:stretch; flex-direction:column; }
  .sp-al-guru-actions,.sp-al-action { justify-content:space-between; }
  .sp-al-guru-actions button,.sp-al-action button,.sp-al-filter { min-height:44px; }
  .sp-al-toolbar .sp-search { width:100%; }
}
@media (prefers-reduced-motion:reduce) { #statPenilaianView .sp-tab-badge { animation:none; } .sp-al-filter:active,.sp-al-row .sp-btn:active { transform:none; } }
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) { .sp-al-row,.sp-al-guru,.sp-al-status { background:var(--app-card); border-width:2px; } }

/* ── Kerangka ───────────────────────────────────────────────────────── */
.sp-body { display:flex; flex-direction:column; gap:14px; transition:opacity .2s ease; }
.sp-body.is-loading { opacity:.55; pointer-events:none; }
.sp-card { display:flex; flex-direction:column; gap:12px; min-width:0; padding:16px 18px; }
.sp-card-head { display:flex; flex-direction:column; gap:2px; }
.sp-card-title { margin:0; font-size:14.5px; font-weight:800; color:var(--app-text); }
.sp-card-sub { margin:0; font-size:11.5px; font-weight:600; color:var(--app-dim); }
.sp-empty { margin:0; font-size:12.5px; font-weight:600; color:var(--app-dim); }
.sp-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:start; }
.sp-stack { display:flex; flex-direction:column; gap:14px; min-width:0; }

/* ── Ringkasan ──────────────────────────────────────────────────────── */
.sp-overview { display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); gap:18px; }
.sp-hero { display:flex; flex-direction:column; justify-content:center; gap:7px; padding-right:18px; border-right:1px solid var(--app-border); }
.sp-eyebrow { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--app-dim); }
.sp-hero-value { font-size:56px; line-height:1; font-weight:800; letter-spacing:-.03em; color:var(--app-text); }
.sp-hero-sub { font-size:12px; font-weight:600; color:var(--app-dim); }
.sp-hero-note { padding:6px 9px; border-radius:8px; background:var(--app-muted); font-size:11.5px; font-weight:700; color:var(--app-text); }
.sp-meter { display:block; height:8px; border-radius:999px; background:var(--sp-track); overflow:hidden; }
.sp-meter-fill { display:block; height:100%; border-radius:0 4px 4px 0; background:var(--sp-series); transition:width .35s ease; }
.sp-meter-hero { height:10px; }
.sp-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-content:center; }
.sp-tile { display:flex; flex-direction:column; gap:3px; min-width:0; padding:12px 14px; border-radius:12px; background:var(--app-muted); }
.sp-tile-label { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--app-dim); }
.sp-tile-ic { display:inline-flex; flex:0 0 auto; width:14px; height:14px; }
.sp-tile-ic svg { width:100%; height:100%; }
.sp-tile[data-status="critical"] .sp-tile-ic { color:var(--sp-crit); }
.sp-tile[data-status="good"] .sp-tile-ic { color:var(--sp-good); }
.sp-tile-value { font-size:26px; line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--app-text); }
.sp-tile-value small { font-size:13px; font-weight:700; letter-spacing:0; color:var(--app-dim); }
.sp-tile-sub { font-size:11px; font-weight:600; color:var(--app-dim); }

/* ── Tren semester (kolom) ──────────────────────────────────────────── */
.sp-trend { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.sp-col { display:flex; flex-direction:column; align-items:stretch; gap:7px; height:190px; padding:4px 0 6px; border:0; border-radius:10px; background:transparent; color:var(--app-text); font:inherit; cursor:pointer; }
.sp-col:hover:not(:disabled) { background:var(--app-hover); }
.sp-col:focus-visible { outline:2px solid var(--sp-series); outline-offset:2px; }
.sp-col:disabled { cursor:default; }
.sp-col-track { display:flex; flex-direction:column; flex:1; padding-top:22px; border-bottom:1px solid var(--sp-hair); }
.sp-col-plot { position:relative; display:flex; flex:1; align-items:flex-end; justify-content:center; }
.sp-col-bar { width:24px; max-width:70%; height:var(--h,0%); border-radius:4px 4px 0 0; background:var(--sp-series-soft); transition:height .35s ease; }
.sp-col.is-selected .sp-col-bar { background:var(--sp-series); }
.sp-col-val { position:absolute; left:0; right:0; bottom:calc(var(--h,0%) + 4px); text-align:center; font-size:12px; font-weight:800; color:var(--app-text); }
.sp-col.is-future .sp-col-val { color:var(--app-dim); }
.sp-col-lbl { display:inline-flex; align-items:center; justify-content:center; gap:4px; font-size:11.5px; font-weight:800; color:var(--app-dim); }
.sp-col.is-selected .sp-col-lbl { color:var(--app-text); }

/* ── Bar horizontal ─────────────────────────────────────────────────── */
.sp-hbars { display:flex; flex-direction:column; gap:2px; }
.sp-hbars-split { margin-top:6px; padding-top:8px; border-top:1px solid var(--app-border); }
.sp-hbar { display:grid; grid-template-columns:minmax(56px,96px) minmax(60px,1fr) 44px minmax(76px,auto); align-items:center; gap:10px; padding:5px 6px; border-radius:8px; outline:none; }
.sp-hbar:hover, .sp-hbar:focus-visible { background:var(--app-hover); }
.sp-hbar-label { display:flex; align-items:baseline; gap:6px; min-width:0; }
.sp-hbar-name { overflow:hidden; font-size:12.5px; font-weight:800; color:var(--app-text); white-space:nowrap; text-overflow:ellipsis; }
.sp-hbar-meta { font-size:10px; font-weight:700; color:var(--app-dim); }
.sp-hbar-track { height:10px; overflow:hidden; border-radius:0 4px 4px 0; background:var(--sp-track); }
.sp-hbar-fill { display:block; height:100%; border-radius:0 4px 4px 0; background:var(--sp-series); transition:width .35s ease; }
.sp-hbar-value { text-align:right; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--app-text); }
.sp-hbar-note { font-size:11px; font-weight:600; color:var(--app-dim); white-space:nowrap; }

/* ── Tabel ──────────────────────────────────────────────────────────── */
/* main.css punya gaya tabel global untuk tabel input nilai (kolom 1–2 sticky,
   lebar tetap, sebagian !important di layar ≤700px). Netralkan di halaman ini. */
:is(#statPenilaianView, #spPetaPopup) table { width:100% !important; min-width:0 !important; table-layout:auto !important; background:transparent; }
:is(#statPenilaianView, #spPetaPopup) thead th,
:is(#statPenilaianView, #spPetaPopup) thead th:nth-child(1),
:is(#statPenilaianView, #spPetaPopup) thead th:nth-child(2) { left:auto !important; width:auto !important; min-width:0 !important; max-width:none !important; overflow:visible !important; text-overflow:clip !important; box-shadow:none !important; padding:9px 12px !important; font-size:10.5px !important; }
:is(#statPenilaianView, #spPetaPopup) tbody td { height:auto !important; padding:9px 12px !important; border-top:0; font-size:12px !important; }
.sp-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#statPenilaianView .sp-search { flex:1 1 220px; max-width:300px; margin-left:auto; padding:9px 12px; border:1px solid var(--app-border); border-radius:9px; background:var(--app-muted); color:var(--app-text); font:inherit; font-size:12px; font-weight:600; outline:none; }
#statPenilaianView .sp-search:focus { border-color:var(--sp-series); box-shadow:var(--app-ring); }
.sp-table-wrap { overflow:auto; border:1px solid var(--app-border); border-radius:12px; }
.sp-table-scroll { max-height:560px; }
.sp-table { border-collapse:collapse; }
.sp-table thead th { position:sticky; top:0; z-index:1; border-bottom:1px solid var(--app-border); background:var(--app-thead); text-align:left; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--app-dim); white-space:nowrap; }
#statPenilaianView .sp-table thead th.sp-sort-th { padding:0 !important; }
#statPenilaianView .sp-sort-btn { display:flex; align-items:center; gap:7px; width:100%; min-height:40px; padding:10px 12px; border:0; border-radius:0 !important; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; text-align:inherit; white-space:nowrap; cursor:pointer; }
.sp-sort-th.sp-num .sp-sort-btn { justify-content:flex-end; }
.sp-sort-icon { width:12px; flex:0 0 12px; text-align:center; font-size:14px; line-height:1; opacity:.4; }
#statPenilaianView .sp-sort-th[aria-sort="ascending"] .sp-sort-btn, #statPenilaianView .sp-sort-th[aria-sort="descending"] .sp-sort-btn { color:var(--app-text); }
.sp-sort-th[aria-sort="ascending"] .sp-sort-icon, .sp-sort-th[aria-sort="descending"] .sp-sort-icon { opacity:1; color:var(--sp-series); }
@media (hover:hover) { #statPenilaianView .sp-sort-btn:hover { background:var(--app-hover); } }
#statPenilaianView .sp-sort-btn:focus-visible { outline:2px solid var(--sp-series); outline-offset:-3px; }
.sp-table tbody td { border-bottom:1px solid var(--app-border); color:var(--app-text); text-align:left; vertical-align:middle; }
.sp-table tbody tr:last-child td { border-bottom:0; }
.sp-table tbody tr:hover td { background:var(--app-hover); }
.sp-table tbody tr.is-active td { background:var(--app-sel); }
.sp-table thead th.sp-num, .sp-table tbody td.sp-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sp-strong { font-weight:800; }
.sp-muted { color:var(--app-dim); }
.sp-table tbody td.sp-td-empty { padding:18px 12px !important; text-align:center; color:var(--app-dim); }
.sp-guru-name { font-weight:800; white-space:nowrap; }
.sp-guru-meta { font-size:10.5px; font-weight:600; color:var(--app-dim); }
.sp-td-progress { outline:none; }
.sp-td-progress:focus-visible { box-shadow:inset 0 0 0 2px var(--sp-series); }
.sp-progress { display:flex; align-items:center; gap:8px; min-width:150px; }
.sp-progress .sp-meter { flex:1; }
.sp-progress-val { width:40px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }
.sp-link-btn { padding:0; border:0; background:none; color:var(--app-blue); font:inherit; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; }
.sp-link-btn:hover { text-decoration:underline; }
.sp-done-text { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--app-dim); white-space:nowrap; }
.sp-done-text .sp-pill-ic { color:var(--sp-good); }
.sp-pill { display:inline-flex; align-items:center; gap:6px; font-weight:700; white-space:nowrap; }
.sp-pill-ic { display:inline-flex; flex:0 0 auto; width:14px; height:14px; }
.sp-pill-ic svg { width:100%; height:100%; }
.sp-pill[data-status="selesai"] .sp-pill-ic { color:var(--sp-good); }
.sp-pill[data-status="proses"] .sp-pill-ic { color:var(--sp-warn); }
.sp-pill[data-status="belum"] .sp-pill-ic { color:var(--sp-crit); }
.sp-mapel { font-weight:700; }
.sp-tag { margin-left:6px; padding:1px 6px; border-radius:999px; background:var(--app-chip); font-size:9.5px; font-weight:800; color:var(--app-dim); }
.sp-comp-text { font-size:11.5px; color:var(--app-dim); white-space:nowrap; }
.sp-updated { color:var(--app-dim); white-space:nowrap; }
.sp-updated.is-stale { font-weight:700; color:var(--app-text); }
.sp-stale-ic { display:inline-flex; width:13px; height:13px; margin-right:4px; vertical-align:-2px; color:var(--sp-serious); }
.sp-stale-ic svg { width:100%; height:100%; }
.sp-table tbody td.sp-td-action { text-align:right; white-space:nowrap; }
.sp-open-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid var(--app-border); border-radius:8px; background:var(--app-card); color:var(--app-text); font:inherit; font-size:11.5px; font-weight:800; white-space:nowrap; cursor:pointer; }
.sp-open-btn:hover { border-color:var(--app-blue); color:var(--app-blue); }
.sp-open-btn:focus-visible { outline:2px solid var(--sp-series); outline-offset:2px; }
.sp-open-ic { display:inline-flex; width:13px; height:13px; }
.sp-open-ic svg { width:100%; height:100%; }
.sp-td-action .sp-wa-btn { margin-right:7px; }
.sp-wa-opts { display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; color:var(--app-text); }
.sp-wa-opts-title { font-size:11px; font-weight:800; color:var(--app-dim); }
.sp-check { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
#statPenilaianView .sp-check input[type="checkbox"] { width:16px; height:16px; margin:0; flex:0 0 16px; accent-color:#168458; cursor:pointer; }
#statPenilaianView .sp-check input[type="checkbox"]:focus-visible { outline:2px solid var(--sp-series); outline-offset:2px; }
.sp-wa-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid var(--app-border); border-radius:8px; background:var(--app-card); color:var(--app-text); font:inherit; font-size:11.5px; font-weight:800; white-space:nowrap; cursor:pointer; }
.sp-wa-btn:hover:not(:disabled) { border-color:#168458; }
.sp-wa-btn:focus-visible { outline:2px solid #168458; outline-offset:2px; }
.sp-wa-btn:active:not(:disabled) { transform:scale(.97); }
.sp-wa-btn:disabled { opacity:.48; cursor:not-allowed; }
.sp-wa-ic { display:inline-flex; width:14px; height:14px; color:#168458; }
.sp-wa-ic svg { width:100%; height:100%; }
/* Pengingat lewat Pesan in-app: biru aplikasi, supaya tidak tertukar dengan tombol WhatsApp (hijau). */
.sp-pesan-ic { color:var(--app-blue); }
.sp-pesan-btn:hover:not(:disabled), .sp-pesan-all-btn:hover:not(:disabled) { border-color:var(--app-blue); }
.sp-pesan-btn:focus-visible { outline-color:var(--app-blue); }
/* ── Jendela salin pesan WA & WhatSheet (modalSiap() di js) ─────────────
   Opacity & transform kartu diatur pegas SigFluid.Presenter, sama seperti jendela PLASMA.
   Tanpa fluid-motion.js, kartu yang sama tampil sebagai <dialog> biasa. */
body.sp-modal-open { overflow:hidden; }
.sp-modal, dialog.sp-modal-card { --sp-series:#2a78d6; }
#appShell[data-theme="dark"] .sp-modal, #appShell[data-theme="dark"] dialog.sp-modal-card { --sp-series:#3987e5; }
.sp-modal { position:fixed; inset:0; z-index:4000; -webkit-tap-highlight-color:transparent; }
.sp-modal[hidden] { display:none !important; }
.sp-modal.is-closing { pointer-events:none; }
.sp-modal-scrim { position:absolute; inset:0; background:rgba(15,23,42,.48); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; touch-action:none; }
dialog.sp-modal-card::backdrop { background:rgba(15,23,42,.48); }
/* display:flex di bawah mengalahkan aturan bawaan browser, jadi <dialog> tertutup disembunyikan eksplisit. */
dialog.sp-modal-card:not([open]) { display:none; }
/* Tinggi mengikuti isi sampai batas layar; bagian tengah yang bergulir, judul & tombol tetap. */
.sp-modal-card { display:flex; flex-direction:column; width:min(540px,calc(100vw - 32px)); height:fit-content; max-height:min(86vh,720px); max-height:min(86dvh,720px); margin:auto; padding:0; border:1px solid var(--app-border); border-radius:16px; background:var(--app-card); color:var(--app-text); box-shadow:0 28px 64px -16px rgba(15,23,42,.42),0 4px 14px rgba(15,23,42,.1); font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; overflow:hidden; outline:none; }
/* Di dalam root Presenter: root mengikuti viewport yang terlihat, jadi keyboard HP tidak menutupi kartu. */
.sp-modal .sp-modal-card { position:absolute; inset:0; will-change:transform,opacity; }
.sp-modal-grabber { display:none; }
.sp-modal-head { flex:0 0 auto; padding:18px 20px 4px; }
.sp-modal-head h3 { margin:0; font-size:17px; font-weight:800; line-height:1.3; letter-spacing:-.01em; }
.sp-modal-body { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:6px 20px 4px; }
.sp-modal-foot { flex:0 0 auto; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding:12px 20px 18px; }
.sp-modal-card p { margin:0 0 12px; font-size:12.5px; line-height:1.55; color:var(--app-dim); }
.sp-modal-card textarea { display:block; width:100%; min-height:260px; max-height:45vh; padding:12px; resize:vertical; border:1px solid var(--app-border); border-radius:9px; background:var(--app-muted); color:var(--app-text); font-family:inherit; font-size:12px; line-height:1.55; }
.sp-modal-card a:not(.sp-btn) { color:var(--app-blue); }
/* HP: sheet dari bawah; tarik pegangan/judul ke bawah untuk menutup. */
.sp-modal[data-mode="sheet"] .sp-modal-card {
  inset:auto 0 0 0; margin:0; width:100%; max-height:min(92%,780px); border-width:1px 0 0; border-radius:16px 16px 0 0;
  /* Perpanjangan permukaan ke bawah agar pantulan pegas tidak memperlihatkan celah. */
  box-shadow:0 -1px 0 rgba(0,0,0,.04),0 110px 0 0 var(--app-card);
}
.sp-modal[data-mode="sheet"] .sp-modal-grabber { display:block; position:absolute; top:6px; left:50%; width:38px; height:5px; margin-left:-19px; border-radius:3px; background:var(--app-dim); opacity:.5; pointer-events:none; }
.sp-modal[data-mode="sheet"] .sp-modal-head { padding-top:22px; touch-action:none; }
.sp-modal[data-mode="sheet"] .sp-modal-foot { padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
/* Target sentuh minimal 44pt (HIG). */
.sp-modal[data-mode="sheet"] .sp-modal-foot .sp-btn { flex:1 1 0; justify-content:center; min-height:44px; }
@media (prefers-reduced-transparency:reduce) {
  .sp-modal-scrim { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(15,23,42,.62); }
}
@media (prefers-contrast:more) {
  .sp-modal-card { border-color:var(--app-text); }
  .sp-modal-card p:not(.sp-ws-error), .sp-ws-sub { color:var(--app-text) !important; }
}
.sp-ws-btn { color:var(--app-text); }
.sp-ws-steps { margin:0 0 14px; padding-left:20px; color:var(--app-text); font-size:13px; line-height:1.6; }
.sp-ws-steps li + li { margin-top:10px; }
.sp-ws-list { max-height:180px; overflow:auto; margin:8px 0; padding-left:20px; font-size:12px; line-height:1.6; }
.sp-ws-help { max-height:none; color:var(--app-text); }
.sp-ws-help li + li { margin-top:6px; }
.sp-ws-sub { display:block; margin-top:3px; font-size:11.5px; line-height:1.5; color:var(--app-dim); }
/* Nilai + tombol Salin di ujungnya (seperti kolom teks dengan tombol); lebar tombol tetap saat jadi "Tersalin ✓". */
.sp-ws-copy { display:flex; align-items:center; gap:8px; margin:7px 0; }
.sp-ws-copy code { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; padding:7px 9px; border:1px solid var(--app-border); border-radius:7px; background:var(--app-muted); color:var(--app-text); font-size:11px; line-height:1.5; }
.sp-ws-copy .sp-btn { flex:0 0 auto; min-width:94px; justify-content:center; }
.sp-modal-card .sp-ws-input { display:block; width:100%; margin-top:7px; padding:9px 11px; border:1px solid var(--app-border); border-radius:8px; background:var(--app-card); color:var(--app-text); font:inherit; font-size:12px; }
.sp-modal-card .sp-ws-input:focus-visible { outline:2px solid var(--app-blue); outline-offset:2px; }
.sp-ws-error { color:#b42318 !important; }
#appShell[data-theme="dark"] .sp-ws-error { color:#f97066 !important; }
.sp-ws-details { font-size:12px; }
.sp-ws-details + .sp-ws-details { margin-top:10px; }
.sp-ws-details summary { cursor:pointer; font-weight:800; }
.sp-ws-link { border:0; padding:0; background:none; color:var(--app-blue); font:inherit; cursor:pointer; text-decoration:underline; }
/* ── Siapkan Broadcast WA: pilih guru penerima (bukaBroadcast() di js) ──
   Jendela ada di luar #statPenilaianView, jadi aturan centang tabel guru tidak berlaku di sini.
   Tanpa gulir bersarang: yang bergulir hanya .sp-modal-body (tarik-sheet di HP bergantung padanya). */
.sp-modal-card [hidden] { display:none !important; }
.sp-modal-card input[type="checkbox"] { width:18px; height:18px; margin:0; flex:0 0 18px; accent-color:#168458; cursor:pointer; }
.sp-modal-card input[type="checkbox"]:disabled { cursor:not-allowed; }
.sp-modal-card input[type="checkbox"]:focus-visible { outline:2px solid var(--sp-series); outline-offset:2px; }
#appShell[data-theme="dark"] .sp-modal-card input[type="checkbox"] { accent-color:#55cf98; }
.sp-ws-fieldset { min-width:0; margin:0; padding:0; border:0; }
.sp-ws-opts { display:flex; align-items:center; flex-wrap:wrap; gap:2px 16px; margin:0 0 8px; }
.sp-ws-opts-title { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--app-dim); }
.sp-ws-opts .sp-check { min-height:32px; gap:8px; font-size:12.5px; color:var(--app-text); }
.sp-modal-card .sp-ws-search { margin:0 0 12px; font-size:13px; }
/* Kepala daftar + daftar = satu kotak. Setiap baris punya garis atas, jadi garis di bawah kepala
   selalu tepat satu walau sebagian baris tersembunyi oleh pencarian. */
.sp-ws-pick-all { overflow:hidden; border:1px solid var(--app-border); border-bottom:0; border-radius:12px 12px 0 0; background:var(--app-thead); }
.sp-ws-pick-all .sp-ws-check { align-items:center; font-size:12.5px; font-weight:800; color:var(--app-text); }
.sp-ws-count { flex:0 0 auto; margin-left:auto; padding-left:8px; font-size:11.5px; font-weight:700; color:var(--app-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sp-ws-pick { margin:0 0 6px; padding:0; overflow:hidden; list-style:none; border:1px solid var(--app-border); border-top:0; border-radius:0 0 12px 12px; }
.sp-ws-pick > li { border-top:1px solid var(--app-border); }
/* Seluruh baris (kotak centang + nama) bisa diklik; "Lihat pesan" di luar label supaya tidak ikut mencentang. */
.sp-ws-check { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s; }
.sp-ws-pick-row:not(.is-off) > .sp-ws-check { padding-bottom:4px; }
/* Sorotan hanya untuk kotak centang yang bisa dipakai (bukan baris tanpa WA, bukan saat menulis). */
@media (hover:hover) { .sp-ws-check:has(input:enabled):hover { background:var(--app-hover); } }
.sp-ws-check:has(input:enabled):active { background:color-mix(in srgb,var(--app-text) 7%,transparent); transition:none; }
.sp-ws-check:has(input:disabled) { cursor:default; }
.sp-ws-pick-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.sp-ws-pick-name { font-size:13px; font-weight:800; line-height:18px; color:var(--app-text); overflow-wrap:anywhere; }
.sp-ws-pick-meta { font-size:11.5px; font-weight:600; line-height:1.45; color:var(--app-dim); font-variant-numeric:tabular-nums; }
/* Tanpa WA: tidak bisa dicentang. Petunjuk perbaikannya tetap terbaca (tidak ikut dipudarkan). */
.sp-ws-pick-row.is-off > .sp-ws-check { cursor:not-allowed; }
.sp-ws-pick-row.is-off input, .sp-ws-pick-row.is-off .sp-ws-pick-name { opacity:.55; }
/* Isi pesan menjorok sejajar nama: 12px padding + 18px kotak centang + 10px jarak. */
.sp-ws-msg { padding:0 12px 10px 40px; }
.sp-ws-msg summary { display:inline-flex; align-items:center; gap:6px; min-height:24px; list-style:none; cursor:pointer; font-size:11.5px; font-weight:800; color:var(--app-blue); }
.sp-ws-msg summary::-webkit-details-marker { display:none; }
.sp-ws-msg summary::before { content:''; border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .15s ease-out; }
.sp-ws-msg[open] summary::before { transform:rotate(90deg); }
.sp-ws-msg summary:focus-visible { outline:2px solid var(--sp-series); outline-offset:2px; border-radius:4px; }
.sp-ws-msg-text { margin-top:4px; padding:10px 12px; border:1px solid var(--app-border); border-radius:10px; background:var(--app-muted); color:var(--app-text); font-size:12px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.sp-ws-empty { padding:16px 12px; text-align:center; font-size:12.5px; font-weight:600; color:var(--app-dim); }
/* Lipatan kelompok guru: [kotak centang kelompok][tombol buka/tutup: nama · hitungan · panah].
   Baris guru di dalamnya menjorok sejajar nama kelompok: 12px + 18px kotak + 10px. */
.sp-ws-group-head { display:flex; align-items:stretch; transition:background .15s; }
@media (hover:hover) { .sp-ws-group-head:has(input:enabled):hover { background:var(--app-hover); } }
.sp-ws-group-box { display:flex; align-items:center; flex:0 0 auto; padding:0 10px 0 12px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sp-modal-card button.sp-ws-group-toggle { display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; min-height:44px; margin:0; padding:10px 12px 10px 0; border:0; border-radius:0 !important; background:none; color:var(--app-text); font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sp-modal-card button.sp-ws-group-toggle:focus-visible { outline:2px solid var(--sp-series); outline-offset:-2px; }
.sp-modal-card button.sp-ws-group-toggle:disabled { cursor:default; }
.sp-ws-group-name { flex:1 1 auto; min-width:0; font-size:13px; font-weight:800; line-height:18px; overflow-wrap:anywhere; }
.sp-ws-group-toggle .sp-ws-count { margin-left:0; padding-left:0; }
/* Panah ke kanan saat tertutup, ke bawah saat terbuka (sama dengan "Lihat pesan"). */
.sp-ws-chev { flex:0 0 auto; width:7px; height:7px; margin:0 4px 0 2px; border-right:2px solid var(--app-dim); border-bottom:2px solid var(--app-dim); transform:rotate(-45deg); transition:transform .18s ease-out; }
.sp-ws-group.is-open .sp-ws-chev { transform:translateY(-2px) rotate(45deg); }
.sp-ws-group-list { margin:0; padding:0; list-style:none; }
.sp-ws-group-list > li { border-top:1px solid var(--app-border); }
.sp-ws-group-list .sp-ws-check { padding-left:40px; }
.sp-ws-group-list .sp-ws-msg { padding-left:68px; }
.sp-ws-foot-note { align-self:center; margin-right:auto; font-size:12px; font-weight:700; color:var(--app-dim); }
/* HP: target sentuh minimal 44pt; catatan di atas tombol. */
.sp-modal[data-mode="sheet"] .sp-ws-check, .sp-modal[data-mode="sheet"] .sp-ws-opts .sp-check { min-height:44px; }
.sp-modal[data-mode="sheet"] .sp-ws-msg summary { min-height:36px; }
.sp-modal[data-mode="sheet"] .sp-ws-foot-note { flex-basis:100%; margin:0; text-align:center; }
@media (prefers-reduced-motion:reduce) { .sp-ws-msg summary::before, .sp-ws-chev { transition:none; } }
/* Font 16px mencegah Android/iOS memperbesar halaman saat kolom teks disentuh (sama dengan main.css). */
@media (max-width:767px) { .sp-modal-card .sp-ws-input { font-size:16px; } }
#appShell[data-theme="dark"] .sp-wa-ic { color:#55cf98; }
#appShell[data-theme="dark"] #statPenilaianView .sp-check input[type="checkbox"] { accent-color:#55cf98; }
.sp-chips { display:flex; gap:6px; flex-wrap:wrap; }
.sp-mapel-filter-label { align-self:center; margin-right:4px; color:var(--app-dim); font-size:11px; font-weight:800; }
.sp-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border:1px solid var(--app-border); border-radius:999px; background:var(--app-card); color:var(--app-dim); font:inherit; font-size:11.5px; font-weight:800; cursor:pointer; }
.sp-chip:hover { color:var(--app-text); }
.sp-chip.is-active { border-color:var(--app-blue); background:rgba(2,132,199,.10); color:var(--app-blue); }
.sp-chip-count { padding:0 6px; border-radius:999px; background:var(--app-muted); color:var(--app-text); font-variant-numeric:tabular-nums; }
.sp-chip-x { font-size:15px; line-height:1; }
.sp-all-done { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--app-text); }
.sp-all-done-ic { display:inline-flex; width:22px; height:22px; color:var(--sp-good); }
.sp-all-done-ic svg { width:100%; height:100%; }

/* ── Heatmap kelas × mapel ──────────────────────────────────────────── */
.sp-heat-legend { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11px; font-weight:700; color:var(--app-dim); }
.sp-heat-legend-item { display:inline-flex; align-items:center; gap:6px; }
.sp-heat-swatch { width:14px; height:14px; border-radius:4px; }
.sp-heat-wrap { overflow:auto; max-height:640px; }
:is(#statPenilaianView, #spPetaPopup) table.sp-heat-table { width:max-content !important; border-collapse:separate; border-spacing:2px; font-size:11px; }
.sp-heat-table th { font-weight:800; color:var(--app-dim); }
:is(#statPenilaianView, #spPetaPopup) .sp-heat-table thead th { top:0; height:118px; padding:0 0 6px !important; border:0; background:var(--app-card); vertical-align:bottom; text-transform:none; letter-spacing:0; }
:is(#statPenilaianView, #spPetaPopup) .sp-heat-table thead th.sp-heat-corner { position:sticky; left:0 !important; z-index:3; padding:0 8px 6px 2px !important; text-align:left; font-size:10.5px !important; letter-spacing:.04em; text-transform:uppercase; }
:is(#statPenilaianView, #spPetaPopup) .sp-heat-table thead th.sp-heat-col { position:sticky; z-index:2; text-align:center; }
.sp-heat-col span { display:inline-block; max-height:110px; overflow:hidden; writing-mode:vertical-rl; transform:rotate(180deg); font-size:11px; font-weight:700; color:var(--app-text); white-space:nowrap; text-overflow:ellipsis; }
.sp-heat-row { position:sticky; left:0; z-index:1; padding:0 10px 0 2px; background:var(--app-card); text-align:left; font-size:12px; color:var(--app-text) !important; white-space:nowrap; }
:is(#statPenilaianView, #spPetaPopup) .sp-heat-table tbody td { padding:0 !important; border:0; }
.sp-heat { display:flex; align-items:center; justify-content:center; width:40px; height:30px; border-radius:6px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; outline:none; cursor:pointer; }
.sp-heat:hover, .sp-heat:focus-visible, .sp-heat[aria-expanded="true"] { box-shadow:0 0 0 2px var(--app-text); }
.sp-heat-na span { display:flex; align-items:center; justify-content:center; width:40px; height:30px; color:var(--app-dim); }
.sp-heat[data-bin="0"], .sp-heat-swatch[data-bin="0"] { background:var(--sp-heat-0); color:var(--sp-heat-0-ink); }
.sp-heat[data-bin="1"], .sp-heat-swatch[data-bin="1"] { background:var(--sp-heat-1); color:var(--sp-heat-1-ink); }
.sp-heat[data-bin="2"], .sp-heat-swatch[data-bin="2"] { background:var(--sp-heat-2); color:var(--sp-heat-2-ink); }
.sp-heat[data-bin="3"], .sp-heat-swatch[data-bin="3"] { background:var(--sp-heat-3); color:var(--sp-heat-3-ink); }
.sp-heat[data-bin="4"], .sp-heat-swatch[data-bin="4"] { background:var(--sp-heat-4); color:var(--sp-heat-4-ink); }
.sp-heat[data-bin="5"], .sp-heat-swatch[data-bin="5"] { background:var(--sp-heat-5); color:var(--sp-heat-5-ink); }

/* ── Catatan data ───────────────────────────────────────────────────── */
.sp-notes { display:flex; flex-direction:column; gap:8px; margin:0; padding-left:18px; font-size:12px; color:var(--app-text); }
.sp-note-sub { display:flex; flex-direction:column; gap:3px; margin:6px 0 0; padding-left:16px; font-size:11.5px; color:var(--app-dim); }

/* ── Tooltip (ditempel ke body) ─────────────────────────────────────── */
.sp-tip { position:fixed; z-index:100000; display:flex; flex-direction:column; gap:2px; max-width:300px; padding:8px 11px; border-radius:10px; background:#111827; color:#f8fafc; box-shadow:0 10px 30px rgba(0,0,0,.28); pointer-events:none; }
.sp-tip[hidden] { display:none; }
.sp-tip-value { font-size:14px; font-weight:800; }
.sp-tip-title { font-size:11.5px; font-weight:700; color:#cbd5e1; }
.sp-tip-sub { font-size:11px; font-weight:600; line-height:1.4; color:#94a3b8; }
/* Bubble sel heatmap: baris huruf komponen (C L I K P) memakai .sp-kdot, variabelnya diarahkan ke palet gelap bubble. */
.sp-tip { --sp-good:#0ca30c; --sp-crit:#f87171; --app-dim:#94a3b8; --app-text:#f8fafc; --app-card:#111827; }
.sp-tip.has-komp { width:300px; max-width:calc(100vw - 16px); }
.sp-tip.is-pinned { pointer-events:auto; box-shadow:0 0 0 1px rgba(148,163,184,.45), 0 10px 30px rgba(0,0,0,.28); }
.sp-tip-aksi { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.sp-tip .sp-tip-wa { justify-content:center; min-height:36px; border:0; background:#25d366; color:#052e16; font-size:12.5px; white-space:normal; text-align:center; }
.sp-tip .sp-tip-wa:hover:not(:disabled) { filter:brightness(1.07); }
.sp-tip .sp-tip-pesan { background:#2a78d6; color:#fff; }
.sp-tip .sp-tip-pesan .sp-pesan-ic { color:#fff; }
.sp-tip .sp-tip-wa:focus-visible { outline:2px solid #f8fafc; outline-offset:2px; }
@media (max-width:640px) { .sp-tip .sp-tip-wa { min-height:44px; } }
.sp-tip-komp { align-self:flex-start; gap:10px; padding:10px 2px 8px; }
.sp-tip .sp-kdot { width:26px; height:26px; font-size:11px; }
.sp-tip.is-pinned .sp-kdot { cursor:default; transition:box-shadow .12s ease; }
.sp-tip.is-pinned .sp-kdot:hover, .sp-tip .sp-kdot:focus-visible { box-shadow:0 0 0 2px #f8fafc; outline:none; }
/* Tinggi area rincian dibuat tetap supaya bubble tidak bergeser saat kursor pindah antar huruf. */
.sp-tip-detail { display:flex; flex-direction:column; gap:2px; min-height:56px; padding-top:7px; border-top:1px solid rgba(148,163,184,.22); }
.sp-tip-detail-head { overflow:hidden; font-size:11.5px; font-weight:700; line-height:1.35; color:#e2e8f0; white-space:nowrap; text-overflow:ellipsis; }
.sp-tip-detail-sub { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:11px; font-weight:600; line-height:1.4; color:#94a3b8; }

/* ── Responsif ──────────────────────────────────────────────────────── */
@media (max-width:980px) {
  .sp-overview { grid-template-columns:1fr; }
  .sp-hero { padding:0 0 14px; border-right:0; border-bottom:1px solid var(--app-border); }
  .sp-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  #statPenilaianView { padding:8px !important; gap:8px !important; }
  .sp-card { padding:14px; }
  .sp-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .sp-tile-value { font-size:22px; }
  .sp-hero-value { font-size:48px; }
  .sp-trend { gap:2px; }
  .sp-col { height:170px; }
  .sp-col-bar { width:18px; }
  .sp-col-val { font-size:11px; }
  .sp-hbar { grid-template-columns:minmax(40px,64px) minmax(40px,1fr) 40px; row-gap:0; }
  .sp-hbar-note { grid-column:2 / -1; }
  #statPenilaianView .sp-search { max-width:none; margin-left:0; }
  .sp-wa-opts { flex-basis:100%; }
  #statPenilaianView .sp-filters .laporan-filter-group { min-width:calc(50% - 6px); }
  #statPenilaianView .sp-filters .sp-filter-actions { width:100%; }
}

/* Kolom komponen per mapel (gaya KBM Kontrol): cincin = proporsi santri terisi */
.sp-kolom { display:inline-flex; align-items:center; gap:8px; padding:0 2px 6px; }
.sp-kdot { position:relative; isolation:isolate; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-family:ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace; font-size:10px; font-weight:700; color:var(--app-dim); background:conic-gradient(var(--sp-good) calc(var(--p, 0) * 1%), color-mix(in srgb,var(--app-dim) 22%,transparent) 0); }
.sp-kdot::before { content:""; position:absolute; inset:2.5px; z-index:-1; border-radius:50%; background:var(--app-card,var(--app-bg,#fff)); }
.sp-kdot.full { background:var(--sp-good); color:#fff; }
.sp-kdot.full::before { display:none; }
.sp-kdot.part { color:var(--app-text); }
.sp-kdot.req::after { content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:2px; margin-left:-5px; border-radius:2px; background:var(--app-dim); opacity:.55; }
.sp-kdot.req.full::after { background:var(--sp-good); opacity:1; }
.sp-kdot.req.is-belum:not(.full)::after { background:var(--sp-crit); opacity:1; }

/* ── Popup peta mapel (dasbor admin): kerangka memakai .ps-popup dari pantauan-setoran.css ── */
.sp-pop {
  --sp-heat-0:#f0efec; --sp-heat-0-ink:#52514e;
  --sp-heat-1:#86b6ef; --sp-heat-1-ink:#0b0b0b;
  --sp-heat-2:#5598e7; --sp-heat-2-ink:#0b0b0b;
  --sp-heat-3:#2a78d6; --sp-heat-3-ink:#ffffff;
  --sp-heat-4:#1c5cab; --sp-heat-4-ink:#ffffff;
  --sp-heat-5:#0d366b; --sp-heat-5-ink:#ffffff;
}
.sp-pop[data-theme="dark"] {
  --sp-heat-0:#383835; --sp-heat-0-ink:#c3c2b7;
  --sp-heat-1:#2a78d6; --sp-heat-1-ink:#ffffff;
  --sp-heat-2:#5598e7; --sp-heat-2-ink:#0b0b0b;
  --sp-heat-3:#86b6ef; --sp-heat-3-ink:#0b0b0b;
  --sp-heat-4:#b7d3f6; --sp-heat-4-ink:#0b0b0b;
  --sp-heat-5:#e6f0fd; --sp-heat-5-ink:#0b0b0b;
}
.sp-pop-isi { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px; padding:0 18px 18px; overflow:auto; }
.sp-pop-bulan { display:flex; flex-wrap:wrap; gap:6px; }
.sp-pop-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.sp-pop-muat { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border:1px solid var(--app-border); border-radius:999px !important; background:var(--app-card); color:var(--app-text); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:transform 90ms ease-out, background-color 140ms ease; }
.sp-pop-muat:hover { background:var(--app-hover); }
.sp-pop-muat:active { transform:scale(.97); }
.sp-pop-muat[aria-busy="true"] { cursor:progress; opacity:.7; }
.sp-pop-muat-ikon { display:inline-flex; }
.sp-pop-muat[aria-busy="true"] .sp-pop-muat-ikon { animation:sp-pop-putar .9s linear infinite; }
.sp-pop-muat:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(34,112,204,.45); }
@keyframes sp-pop-putar { to { transform:rotate(360deg); } }
.sp-pop-chip { min-height:36px; padding:0 14px; border:0; border-radius:999px !important; background:var(--app-muted); color:var(--app-text); font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:transform .12s ease,background-color .15s ease; }
.sp-pop-chip:hover { background:var(--app-hover); }
.sp-pop-chip:active { transform:scale(.97); }
.sp-pop-chip[aria-pressed="true"] { background:#2270cc; color:#fff; }
.sp-pop[data-theme="dark"] .sp-pop-chip[aria-pressed="true"] { background:#5aa0f2; color:#0b1626; }
.sp-pop-chip:focus-visible, .sp-pop-retry:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(34,112,204,.45); }
.sp-pop-note { margin:0; max-width:72ch; font-size:13px; line-height:1.5; color:var(--app-text); }
.sp-pop-warn { margin:0; padding:10px 12px; border-radius:10px; background:rgba(217,119,6,.12); font-size:13px; color:var(--app-text); }
.sp-pop-state { display:flex; flex-direction:column; align-items:center; gap:6px; padding:36px 16px; text-align:center; font-size:13px; color:var(--app-text); }
.sp-pop-state strong { font-size:14px; font-weight:800; }
.sp-pop-state.is-error strong { color:var(--app-danger); }
.sp-pop-retry { min-height:40px; margin-top:8px; padding:8px 18px; font-size:12px; }
.sp-pop-skel { display:flex; flex-direction:column; gap:8px; padding:6px 0; }
.sp-pop-skel i { display:block; height:34px; border-radius:9px; background:var(--app-muted); animation:sp-pop-pulse 1.3s ease-in-out infinite; }
@keyframes sp-pop-pulse { 50% { opacity:.45; } }
/* Rekap persen sudah dan belum terisi per jenjang (warna jenjang dari [data-jj] di pantauan-setoran.css) */
.sp-pop { --sp-rekap-series:#2270cc; --sp-rekap-track:#dce9fb; }
.sp-pop[data-theme="dark"] { --sp-rekap-series:#5aa0f2; --sp-rekap-track:rgba(90,160,242,.22); }
.sp-rekap { display:flex; flex-direction:column; gap:8px; min-width:0; }
.sp-rekap-judul { margin:0; font-size:12.5px; font-weight:800; color:var(--app-text); }
.sp-rekap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.sp-rekap-kartu { display:flex; flex-direction:column; gap:3px; min-width:0; padding:12px 14px; border-radius:12px; background:var(--app-muted); }
.sp-rekap-kartu[data-jj] { background:var(--jj-bg); box-shadow:inset 4px 0 0 var(--jj-ac); }
.sp-rekap-kartu.is-gabungan { box-shadow:inset 4px 0 0 var(--sp-rekap-series); }
.sp-rekap-label { font-size:11px; font-weight:800; color:var(--app-dim); }
.sp-rekap-kartu[data-jj] .sp-rekap-label { color:var(--jj-ink); }
.sp-rekap-angka { display:flex; flex-wrap:wrap; gap:2px 14px; font-size:11.5px; font-weight:700; color:var(--app-dim); }
.sp-rekap-angka b { font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sp-rekap-terisi b { color:var(--sp-rekap-series); }
.sp-rekap-belum b { color:var(--app-text); }
.sp-rekap-meter { display:block; height:8px; margin-top:2px; border-radius:999px; background:var(--sp-rekap-track); overflow:hidden; }
.sp-rekap-meter-isi { display:block; height:100%; border-radius:0 4px 4px 0; background:var(--sp-rekap-series); }
.sp-rekap-sub { font-size:11px; line-height:1.35; font-weight:600; color:var(--app-dim); }
.sp-rekap-catatan { margin:0; font-size:11px; font-weight:600; color:var(--app-dim); }
.sp-pop .sp-heat-wrap { max-height:none; overflow:visible; }
.sp-pop .sp-heat-legend { font-size:12px; color:var(--app-text); }
#spPetaPopup .sp-heat-table thead th.sp-heat-corner { font-size:12px !important; letter-spacing:0; text-transform:none; }
@media (prefers-reduced-motion:reduce) { .sp-pop-skel i { animation:none; } .sp-pop-chip { transition:none; } .sp-pop-muat { transition:none; } .sp-pop-muat:active { transform:none; } .sp-pop-muat[aria-busy="true"] .sp-pop-muat-ikon { animation:none; } }