/* Pantauan Setoran (admin) di halaman Capaian Harian Santri. Dipakai js/pantauan-setoran.js.
   Satu aksen biru (sama dengan Statistik Penilaian). Warna status (hijau, kuning, merah) hanya
   dipakai berpasangan dengan teks, bentuk, atau label, tidak pernah sendirian.
   Semua aturan di-scope ke #tahfizPantauanPanel dan #psPetaPopupPanel (popup peta di dasbor) agar tidak bocor ke halaman lain. */

:is(#tahfizPantauanPanel, #psPetaPopupPanel) {
  --ps-series:#2270cc;
  --ps-on-series:#ffffff;
  --ps-track:#dce9fb;
  --ps-hair:rgba(15,23,42,.10);
  --ps-good:#15803d;
  --ps-warn:#a24c07;
  --ps-crit:#c62828;
  --ps-ink:var(--app-text);
  --ps-dim:#566274;
  --ps-surface:var(--app-card);
  --ps-muted:var(--app-muted);
  --ps-hover:var(--app-hover,rgba(127,127,127,.12));
  --ps-ring:0 0 0 3px rgba(34,112,204,.40);
  margin:12px 0 0;
  padding:16px 18px;
  border:1px solid var(--app-border);
  border-radius:16px;
  background:var(--ps-surface);
  color:var(--ps-ink);
  contain:content;
}
#tahfizView[data-theme="dark"] :is(#tahfizPantauanPanel, #psPetaPopupPanel),
#appShell[data-theme="dark"] :is(#tahfizPantauanPanel, #psPetaPopupPanel),
body[data-app-theme="dark"] :is(#tahfizPantauanPanel, #psPetaPopupPanel) {
  --ps-series:#5aa0f2;
  --ps-on-series:#0b1626;
  color-scheme:dark;
  --ps-dim:var(--app-dim);
  --ps-track:rgba(90,160,242,.22);
  --ps-hair:rgba(255,255,255,.12);
  --ps-good:#6fdc8c;
  --ps-warn:#f5b84a;
  --ps-crit:#ff8a80;
  --ps-ring:0 0 0 3px rgba(90,160,242,.50);
}
:is(#tahfizPantauanPanel, #psPetaPopupPanel)[hidden] { display:none; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) *, :is(#tahfizPantauanPanel, #psPetaPopupPanel) *::before, :is(#tahfizPantauanPanel, #psPetaPopupPanel) *::after { box-sizing:border-box; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) [hidden] { display:none !important; }

/* Tombol: timpa aturan global "semua tombol berbentuk pil" */
:is(#tahfizPantauanPanel, #psPetaPopupPanel) button { border-radius:10px !important; font-family:inherit; letter-spacing:normal; text-transform:none; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) button:focus-visible,
:is(#tahfizPantauanPanel, #psPetaPopupPanel) summary:focus-visible { outline:none; box-shadow:var(--ps-ring); }

/* ── Kepala ─────────────────────────────────────────────────────────── */
.ps-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ps-head-main { display:flex; align-items:center; gap:10px; min-width:0; }
.ps-head-main > .ps-ikon { color:var(--ps-series); flex:0 0 auto; }
.ps-ikon { display:inline-flex; flex:0 0 auto; }
.ps-title { margin:0; font-size:15px; line-height:1.25; font-weight:800; color:var(--ps-ink); }
.ps-sub { margin:2px 0 0; font-size:12px; line-height:1.4; font-weight:600; color:var(--ps-dim); }
.ps-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ps-updated { font-size:11px; font-weight:600; color:var(--ps-dim); font-variant-numeric:tabular-nums; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:7px 12px;
  border:1px solid var(--ps-hair); background:var(--ps-surface); color:var(--ps-ink);
  font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap;
  transition:background .15s, transform .12s ease-out;
}
@media (hover:hover) { :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn:hover:not(:disabled) { background:var(--ps-hover); } }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn:active:not(:disabled) { transform:scale(.97); }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn:disabled { opacity:.5; cursor:not-allowed; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn[aria-busy="true"] .ps-ikon { animation:ps-putar .9s linear infinite; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn[aria-expanded="false"] .ps-ikon { transform:rotate(-90deg); }

.ps-body { display:flex; flex-direction:column; gap:14px; margin-top:14px; transition:opacity .2s ease; }
.ps-body.is-memuat { opacity:.6; pointer-events:none; }
.ps-pekan { display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; font-size:11.5px; font-weight:600; color:var(--ps-dim); }
.ps-notice { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:9px 12px; border:1px solid color-mix(in srgb,var(--ps-warn) 45%,var(--ps-hair)); border-radius:10px; background:color-mix(in srgb,var(--ps-warn) 10%,var(--ps-surface)); font-size:12px; font-weight:700; color:var(--ps-ink); }
.ps-kosong { margin:0; padding:10px 2px; font-size:12.5px; font-weight:600; color:var(--ps-dim); }
.ps-galat { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px; border:1px solid color-mix(in srgb,var(--ps-crit) 45%,var(--ps-hair)); border-radius:12px; background:color-mix(in srgb,var(--ps-crit) 8%,var(--ps-surface)); }
.ps-galat p { margin:0; font-size:12.5px; font-weight:700; }

/* ── Ringkasan ──────────────────────────────────────────────────────── */
.ps-summary { display:grid; grid-template-columns:minmax(210px,270px) minmax(0,1fr); gap:16px; }
.ps-hero { display:flex; flex-direction:column; justify-content:center; gap:7px; padding:4px 18px 4px 0; border-right:1px solid var(--ps-hair); }
.ps-hero-label { font-size:11.5px; font-weight:800; color:var(--ps-dim); }
.ps-hero-value { font-size:52px; line-height:1; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ps-ink); }
.ps-hero-sub { font-size:12px; font-weight:600; color:var(--ps-dim); }
.ps-hero-note { padding:6px 9px; border-radius:8px; background:var(--ps-muted); font-size:11.5px; font-weight:700; color:var(--ps-ink); }
.ps-meter { display:block; height:8px; border-radius:999px; background:var(--ps-track); overflow:hidden; }
.ps-meter-fill { display:block; height:100%; border-radius:0 4px 4px 0; background:var(--ps-series); transition:width .35s ease; }
.ps-hero .ps-meter { height:10px; }
.ps-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-content:center; }
.ps-tile { display:flex; flex-direction:column; gap:3px; min-width:0; padding:12px 14px; border-radius:12px; background:var(--ps-muted); }
.ps-tile-label { font-size:11px; font-weight:800; color:var(--ps-dim); }
.ps-tile-value { font-size:26px; line-height:1.15; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ps-ink); }
.ps-tile-sub { font-size:11px; line-height:1.35; font-weight:600; color:var(--ps-dim); }

/* ── Filter & daftar halaqah ────────────────────────────────────────── */
.ps-blok { display:flex; flex-direction:column; gap:10px; min-width:0; }
.ps-filters { display:flex; flex-wrap:wrap; gap:8px 16px; }
.ps-pils { display:flex; flex-wrap:wrap; gap:6px; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-pil {
  min-height:36px; padding:7px 12px; border:1px solid var(--ps-hair); background:var(--ps-surface); color:var(--ps-ink);
  font-size:11.5px; font-weight:800; cursor:pointer; border-radius:999px !important; transition:background .15s, border-color .15s;
}
@media (hover:hover) { :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-pil:hover:not([aria-pressed="true"]) { background:var(--ps-hover); } }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-pil[aria-pressed="true"] { background:var(--ps-series); border-color:var(--ps-series); color:var(--ps-on-series); }
.ps-peta-bulan { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ps-peta-bulan-label { min-width:120px; text-align:center; font-size:13px; font-weight:800; color:var(--ps-ink); }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-peta-bulan .ps-btn { min-height:36px; }
.ps-peta-bulan .ps-peta-muat { margin-left:auto; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn[aria-busy="true"] { cursor:progress; }
.ps-legenda { margin:0; font-size:11px; font-weight:600; color:var(--ps-dim); }
.ps-list { list-style:none; margin:0; padding:0; max-height:440px; overflow-y:auto; border:1px solid var(--ps-hair); border-radius:12px; }
.ps-list > li + li { border-top:1px solid var(--ps-hair); }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-row {
  display:grid; grid-template-columns:minmax(150px,1.3fr) 84px minmax(150px,1fr) minmax(0,1.7fr); align-items:center; gap:12px;
  width:100%; padding:11px 14px; border:0; background:transparent; color:var(--ps-ink); text-align:left; cursor:pointer;
  border-radius:0 !important;
}
@media (hover:hover) { :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-row:hover { background:var(--ps-hover); } }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-row:active { background:var(--ps-hover); }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-row[aria-busy="true"] { opacity:.6; }
.ps-row > span { min-width:0; }
.ps-row-main { display:flex; flex-direction:column; gap:2px; }
.ps-row-nama { overflow:hidden; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.ps-row-meta { font-size:11px; font-weight:600; color:var(--ps-dim); }
.ps-row-hari { display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right; font-variant-numeric:tabular-nums; }
.ps-row-hari strong { font-size:14px; font-weight:800; }
.ps-row-hari small { font-size:10.5px; font-weight:600; color:var(--ps-dim); }
.ps-row-pekan { display:flex; flex-direction:column; gap:6px; }
.ps-row-pekan-atas { display:flex; align-items:center; gap:8px; }
.ps-row-pekan-atas .ps-meter { flex:1 1 auto; height:8px; }
.ps-row-pekan-atas b { min-width:34px; text-align:right; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.ps-dots { display:flex; flex-wrap:wrap; gap:4px; }
.ps-dot { display:inline-block; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--ps-series); background:transparent; }
.ps-dot[data-s="penuh"] { background:var(--ps-series); }
.ps-dot[data-s="sebagian"] { background:linear-gradient(90deg,var(--ps-series) 50%,transparent 50%); }
.ps-dot[data-s="kosong"] { border-color:var(--ps-crit); }
.ps-dot[data-s="libur"], .ps-dot[data-s="tutup"] { width:9px; height:2px; margin:4px 0; border:0; border-radius:1px; background:var(--ps-dim); }
.ps-dot[data-s="nanti"] { border-style:dotted; border-color:var(--ps-dim); opacity:.7; }
.ps-row-info { display:flex; flex-direction:column; gap:5px; }
.ps-row-capaian { font-size:11.5px; font-weight:600; color:var(--ps-dim); }
.ps-chips { display:flex; flex-wrap:wrap; gap:5px; }
.ps-chip { display:inline-flex; align-items:center; padding:3px 8px; border:1px solid var(--ps-hair); border-radius:999px; background:var(--ps-muted); font-size:11px; font-weight:700; color:var(--ps-ink); }
.ps-chip[data-tone="crit"] { border-color:color-mix(in srgb,var(--ps-crit) 55%,var(--ps-hair)); color:var(--ps-crit); background:color-mix(in srgb,var(--ps-crit) 9%,var(--ps-surface)); }
.ps-chip[data-tone="warn"] { border-color:color-mix(in srgb,var(--ps-warn) 55%,var(--ps-hair)); color:var(--ps-warn); background:color-mix(in srgb,var(--ps-warn) 9%,var(--ps-surface)); }

/* ── Daftar lipat: perlu dicek, belum setor beruntun ────────────────── */
.ps-details { border:1px solid var(--ps-hair); border-radius:12px; padding:0 14px; }
.ps-details > summary { display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; font-weight:800; cursor:pointer; list-style:none; }
.ps-details > summary::-webkit-details-marker { display:none; }
.ps-details > summary .ps-ikon { color:var(--ps-warn); }
.ps-details[open] > summary { border-bottom:1px solid var(--ps-hair); margin-bottom:4px; }
.ps-details > .ps-kosong { padding:10px 0 12px; }
.ps-items { list-style:none; margin:0; padding:0; max-height:420px; overflow-y:auto; }
.ps-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; }
.ps-item + .ps-item { border-top:1px solid var(--ps-hair); }
.ps-item-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ps-item-judul { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; }
.ps-item-meta { font-size:11px; font-weight:600; color:var(--ps-dim); }
.ps-item-pesan { font-size:12.5px; line-height:1.45; font-weight:600; overflow-wrap:anywhere; }
.ps-level { display:inline-flex; align-items:center; padding:2px 8px; border:1px solid var(--ps-hair); border-radius:999px; font-size:10.5px; font-weight:800; }
.ps-level[data-level="penting"] { border-color:color-mix(in srgb,var(--ps-crit) 55%,var(--ps-hair)); color:var(--ps-crit); }
.ps-level[data-level="sedang"] { border-color:color-mix(in srgb,var(--ps-warn) 55%,var(--ps-hair)); color:var(--ps-warn); }
.ps-level[data-level="ringan"] { color:var(--ps-dim); }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-lagi { margin:6px 0 12px; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) #psTS .ps-btn { min-height:44px; }

/* ── Kerangka muat ──────────────────────────────────────────────────── */
.ps-skel-wrap { display:flex; flex-direction:column; gap:12px; }
.ps-skel { border-radius:10px; background:var(--ps-track); animation:ps-denyut 1.4s ease-in-out infinite; }
.ps-skel-hero { height:96px; }
.ps-skel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ps-skel-tile { height:74px; }
.ps-skel-row { height:54px; }

/* ── Kedip kartu santri di daftar utama setelah dibuka dari panel ───── */
[data-santri-card].ps-flash { outline:3px solid #2270cc; outline-offset:2px; animation:ps-kedip 1.8s ease-out 1; }

@keyframes ps-putar { to { transform:rotate(360deg); } }
@keyframes ps-denyut { 0%,100% { opacity:1; } 50% { opacity:.55; } }
@keyframes ps-kedip { 0%,60% { outline-color:#2270cc; } 100% { outline-color:transparent; } }

/* ── Layar kecil ────────────────────────────────────────────────────── */
@media (max-width:900px) {
  :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; }
  .ps-row-pekan, .ps-row-info { grid-column:1 / -1; }
}
@media (max-width:700px) {
  :is(#tahfizPantauanPanel, #psPetaPopupPanel) { padding:14px; border-radius:14px; }
  .ps-summary { grid-template-columns:1fr; gap:12px; }
  .ps-hero { padding:0 0 12px; border-right:0; border-bottom:1px solid var(--ps-hair); }
  .ps-hero-value { font-size:44px; }
  .ps-tiles, .ps-skel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ps-pils { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; max-width:100%; }
  :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-pil { flex:0 0 auto; min-height:40px; }
  :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-lagi { min-height:40px; }
  .ps-item { align-items:stretch; flex-direction:column; }
  :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-item .ps-btn { min-height:44px; }
  :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-head .ps-btn { min-height:40px; }
}

@media (prefers-reduced-motion:reduce) {
  .ps-skel, :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn[aria-busy="true"] .ps-ikon, [data-santri-card].ps-flash { animation:none; }
  .ps-meter-fill, :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn, .ps-body { transition:none; }
  :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-btn:active:not(:disabled) { transform:none; }
}
@media (prefers-contrast:more) {
  :is(#tahfizPantauanPanel, #psPetaPopupPanel) { border-width:2px; }
  .ps-list, .ps-details, .ps-notice, .ps-galat { border-width:2px; }
}

/* ── Histori setoran hari ini ───────────────────────────────────────── */
.ps-histori-head { display:flex; flex-direction:column; gap:2px; }
.ps-histori-judul { margin:0; font-size:14px; line-height:1.3; font-weight:800; color:var(--ps-ink); }
.ps-histori-kontrol { display:flex; flex-wrap:wrap; gap:8px; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-cari, :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-pilih {
  min-height:36px; padding:7px 12px; border:1px solid var(--ps-hair); border-radius:10px !important;
  background:var(--ps-surface); color:var(--ps-ink); font:inherit; font-size:12.5px; font-weight:600;
}
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-cari { flex:1 1 220px; min-width:0; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-pilih { flex:0 1 260px; max-width:100%; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-cari:focus-visible, :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-pilih:focus-visible { outline:none; box-shadow:var(--ps-ring); }
.ps-histori-ringkas { margin:0; font-size:12px; font-weight:700; color:var(--ps-dim); }
.ps-hist { justify-content:flex-start; padding:11px 12px; }
.ps-hist-waktu { display:flex; flex:0 0 130px; flex-direction:column; gap:1px; font-variant-numeric:tabular-nums; }
.ps-hist-lalu { font-size:12.5px; font-weight:800; color:var(--ps-ink); }
.ps-hist-waktu small { font-size:10.5px; font-weight:600; color:var(--ps-dim); }
.ps-hist .ps-item-main { flex:1 1 auto; min-width:0; }
.ps-hist > .ps-btn { flex:0 0 auto; }
@media (max-width:700px) {
  .ps-hist { align-items:center; flex-direction:row; }
  .ps-hist-waktu { flex-basis:104px; }
}

/* ── Peta kelengkapan ───────────────────────────────────────────────── */
/* Skala biru enam tingkat, sama dengan peta di Statistik Penilaian (token itu terkunci di #statPenilaianView). */
:is(#tahfizPantauanPanel, #psPetaPopupPanel) {
  --ps-heat-0:#f0efec; --ps-heat-0-ink:#52514e;
  --ps-heat-1:#86b6ef; --ps-heat-1-ink:#0b0b0b;
  --ps-heat-2:#5598e7; --ps-heat-2-ink:#0b0b0b;
  --ps-heat-3:#2a78d6; --ps-heat-3-ink:#ffffff;
  --ps-heat-4:#1c5cab; --ps-heat-4-ink:#ffffff;
  --ps-heat-5:#0d366b; --ps-heat-5-ink:#ffffff;
}
#tahfizView[data-theme="dark"] :is(#tahfizPantauanPanel, #psPetaPopupPanel),
#appShell[data-theme="dark"] :is(#tahfizPantauanPanel, #psPetaPopupPanel),
body[data-app-theme="dark"] :is(#tahfizPantauanPanel, #psPetaPopupPanel) {
  --ps-heat-0:#383835; --ps-heat-0-ink:#c3c2b7;
  --ps-heat-1:#2a78d6; --ps-heat-1-ink:#ffffff;
  --ps-heat-2:#5598e7; --ps-heat-2-ink:#0b0b0b;
  --ps-heat-3:#86b6ef; --ps-heat-3-ink:#0b0b0b;
  --ps-heat-4:#b7d3f6; --ps-heat-4-ink:#0b0b0b;
  --ps-heat-5:#e6f0fd; --ps-heat-5-ink:#0b0b0b;
}
.ps-peta > summary .ps-ikon { color:var(--ps-series); }
.ps-peta-isi { display:flex; flex-direction:column; gap:10px; padding:10px 0 14px; min-width:0; }
.ps-heat-legend { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11px; font-weight:700; color:var(--ps-dim); }
.ps-heat-legend-item { display:inline-flex; align-items:center; gap:6px; }
.ps-heat-swatch { display:inline-block; width:14px; height:14px; border-radius:4px; }
.ps-heat-wrap { overflow:auto; max-width:100%; max-height:520px; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) table.ps-heat-table { width:max-content !important; min-width:0 !important; border-collapse:separate; border-spacing:2px; font-size:11px; transition:opacity .2s ease; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table tbody tr:hover { background:transparent; }
.ps-heat-wrap.is-memuat { opacity:.6; pointer-events:none; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table th, :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table td { width:auto !important; min-width:0 !important; max-width:none !important; height:auto; box-shadow:none !important; padding:0 !important; border:0; background:transparent; text-transform:none; letter-spacing:0; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table thead th { position:sticky; top:0; left:auto; z-index:2; padding:0 0 4px !important; background:var(--ps-surface); font-weight:800; color:var(--ps-dim); vertical-align:bottom; text-align:center; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table thead th.ps-heat-corner { left:0; z-index:3; padding:0 8px 4px 2px !important; text-align:left; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; }
.ps-heat-col span { font-size:11px; font-weight:700; color:var(--ps-ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table thead th.ps-heat-col-tegak { height:104px; }
.ps-heat-col-tegak span { display:inline-block; max-height:98px; overflow:hidden; writing-mode:vertical-rl; transform:rotate(180deg); text-overflow:ellipsis; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table th.ps-heat-row { position:sticky; left:0; z-index:1; padding:0 10px 0 2px !important; background:var(--ps-surface); text-align:left; font-size:12px; color:var(--ps-ink); white-space:nowrap; }
.ps-heat-row strong { font-weight:800; }
.ps-heat-row small { margin-left:6px; font-size:10.5px; font-weight:600; color:var(--ps-dim); }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat {
  display:flex; align-items:center; justify-content:center; width:40px; height:30px; margin:0; padding:0; border:0;
  border-radius:6px !important; font:inherit; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; outline:none; cursor:default;
}
:is(#tahfizPantauanPanel, #psPetaPopupPanel) button.ps-heat { cursor:pointer; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-padat .ps-heat, :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-padat .ps-heat-na { width:28px; height:28px; font-size:10.5px; }
.ps-heat-na { display:flex; align-items:center; justify-content:center; width:40px; height:30px; color:var(--ps-dim); outline:none; border-radius:6px; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat:hover, :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat:focus-visible, .ps-heat-na:focus-visible { box-shadow:0 0 0 2px var(--ps-ink); }
.ps-heat[data-bin="0"], .ps-heat-swatch[data-bin="0"] { background:var(--ps-heat-0); color:var(--ps-heat-0-ink); }
.ps-heat[data-bin="1"], .ps-heat-swatch[data-bin="1"] { background:var(--ps-heat-1); color:var(--ps-heat-1-ink); }
.ps-heat[data-bin="2"], .ps-heat-swatch[data-bin="2"] { background:var(--ps-heat-2); color:var(--ps-heat-2-ink); }
.ps-heat[data-bin="3"], .ps-heat-swatch[data-bin="3"] { background:var(--ps-heat-3); color:var(--ps-heat-3-ink); }
.ps-heat[data-bin="4"], .ps-heat-swatch[data-bin="4"] { background:var(--ps-heat-4); color:var(--ps-heat-4-ink); }
.ps-heat[data-bin="5"], .ps-heat-swatch[data-bin="5"] { background:var(--ps-heat-5); color:var(--ps-heat-5-ink); }
@media (max-width:700px) {
  .ps-heat-row small { display:none; }
  .ps-heat-wrap { max-height:440px; }
}
@media (prefers-reduced-motion:reduce) { :is(#tahfizPantauanPanel, #psPetaPopupPanel) table.ps-heat-table { transition:none; } }
@media (forced-colors:active) {
  .ps-heat, .ps-heat-swatch { border:1px solid CanvasText; }
}
/* Tooltip rincian sel: dipasang di body, jadi tidak ikut cakupan :is(#tahfizPantauanPanel, #psPetaPopupPanel). */
.ps-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; }
.ps-tip[hidden] { display:none; }
.ps-tip-value { font-size:14px; font-weight:800; }
.ps-tip-title { font-size:11.5px; font-weight:700; color:#cbd5e1; }
.ps-tip-sub { font-size:11px; font-weight:600; line-height:1.4; color:#94a3b8; }
/* Tombol pengingat WhatsApp di tooltip sel popup: tooltip jadi bisa disentuh hanya bila memuat tombol. */
.ps-tip.ps-tip-aktif { pointer-events:auto; }
.ps-tip-aksi { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.ps-tip-wa { min-height:36px; padding:0 12px; border:0; border-radius:8px; background:#25d366; color:#052e16; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; transition:transform .1s ease-out, filter .15s ease; }
.ps-tip-wa:hover { filter:brightness(1.07); }
.ps-tip-wa:active { transform:scale(.97); }
.ps-tip-wa:focus-visible { outline:2px solid #f8fafc; outline-offset:2px; }
@media (max-width:640px) { .ps-tip-wa { min-height:44px; } }
/* Jembatan tak terlihat di antara sel dan tooltip bertombol: kursor yang bergerak ke tombol tidak melewati sel tetangga. */
.ps-tip:is(.ps-tip-aktif, .pa-tip-aktif)::before { content:""; position:absolute; left:0; right:0; height:14px; }
.ps-tip:is(.ps-tip-aktif, .pa-tip-aktif)[data-sisi="bawah"]::before { top:-14px; }
.ps-tip:is(.ps-tip-aktif, .pa-tip-aktif)[data-sisi="atas"]::before { bottom:-14px; }
/* Tablet dan layar sentuh lain (lebar > 640px): sasaran ketuk 44px, tanpa jeda ketuk-ganda. */
@media (pointer:coarse) {
  .ps-tip-wa, .pa-tip-wa { min-height:44px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .ps-tip { max-width:min(320px, calc(100vw - 16px)); }
}
@media (prefers-reduced-motion:reduce) { .ps-tip-wa { transition:none; } .ps-tip-wa:active { transform:none; } }
/* Pembatas peta: judul + garis tebal antar jenjang, garis tipis antar jenis halaqah */
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table tr.ps-heat-grup th { padding:12px 0 4px !important; border-top:2px solid var(--ps-hair); background:var(--ps-surface); text-align:left; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ps-series); }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table tr.ps-heat-grup-awal th { padding-top:2px !important; border-top:0; }
.ps-heat-grup th > span { position:sticky; left:2px; display:inline-block; }
:is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table tr.ps-heat-sekat td { padding:4px 0 !important; }
.ps-heat-garis { height:0; border-top:1px dashed var(--ps-hair); }
/* Hari libur: kolom diblok gelap tanpa celah antar baris, kepala kolomnya ikut gelap */
.ps-heat-na.ps-heat-libur { background:color-mix(in srgb, var(--ps-ink) 85%, var(--ps-surface)); box-shadow:0 2px 0 color-mix(in srgb, var(--ps-ink) 85%, var(--ps-surface)), 0 -2px 0 color-mix(in srgb, var(--ps-ink) 85%, var(--ps-surface)); border-radius:0; }
.ps-heat-table .ps-heat-col-libur span { display:inline-block; padding:2px 6px; border-radius:6px; background:color-mix(in srgb, var(--ps-ink) 85%, var(--ps-surface)); color:var(--ps-surface); }
/* Baris rekap per hari di ujung tiap jenjang */
.ps-heat-rekap-hari .ps-heat, .ps-heat-rekap-hari .ps-heat-na { box-shadow:inset 0 0 0 1.5px var(--ps-ink); }
.ps-heat-rekap-hari th.ps-heat-row strong { color:var(--ps-series); }
@media (prefers-contrast:more) {
  :is(#tahfizPantauanPanel, #psPetaPopupPanel) .ps-heat-table tr.ps-heat-grup th { border-top-color:currentColor; }
  .ps-heat-garis { border-top-style:solid; border-top-color:var(--ps-dim); }
}
/* Rekap persen sudah dan belum terisi per jenjang */
.ps-rekap { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ps-rekap-judul { margin:0; font-size:12.5px; font-weight:800; color:var(--ps-ink); }
.ps-rekap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.ps-rekap-angka { display:flex; flex-wrap:wrap; gap:2px 14px; font-size:11.5px; font-weight:700; color:var(--ps-dim); }
.ps-rekap-angka b { font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ps-rekap-terisi b { color:var(--ps-series); }
.ps-rekap-belum b { color:var(--ps-ink); }

/* ── Warna jenjang (pastel): SD merah, SMP biru, TDP kuning. Dipakai peta dan dropdown halaqah via data-jj ── */
:root {
  --jj-sd-bg:#fde4e4;  --jj-sd-ink:#8f2a2a;  --jj-sd-ac:#e98a8a;
  --jj-smp-bg:#dfeafd; --jj-smp-ink:#1f4f99; --jj-smp-ac:#7aa7ea;
  --jj-tdp-bg:#fdf1c7; --jj-tdp-ink:#7a5a08; --jj-tdp-ac:#e3bd4a;
}
#appShell[data-theme="dark"], #tahfizView[data-theme="dark"], body[data-app-theme="dark"] {
  --jj-sd-bg:#4a2b2f;  --jj-sd-ink:#fbc4c4;  --jj-sd-ac:#d9777d;
  --jj-smp-bg:#26364f; --jj-smp-ink:#bcd6fb; --jj-smp-ac:#6c9ee0;
  --jj-tdp-bg:#4a4021; --jj-tdp-ink:#f6e1a0; --jj-tdp-ac:#cfa93c;
}
[data-jj="sd"]  { --jj-bg:var(--jj-sd-bg);  --jj-ink:var(--jj-sd-ink);  --jj-ac:var(--jj-sd-ac); }
[data-jj="smp"] { --jj-bg:var(--jj-smp-bg); --jj-ink:var(--jj-smp-ink); --jj-ac:var(--jj-smp-ac); }
[data-jj="tdp"] { --jj-bg:var(--jj-tdp-bg); --jj-ink:var(--jj-tdp-ink); --jj-ac:var(--jj-tdp-ac); }
.ps-rekap-kartu[data-jj] { background:var(--jj-bg); box-shadow:inset 4px 0 0 var(--jj-ac); }
.ps-rekap-kartu[data-jj] .ps-tile-label { color:var(--jj-ink); }
optgroup[data-jj], optgroup[data-jj] > option { background-color:var(--jj-bg); color:var(--jj-ink); }

/* ── Popup peta kelengkapan (dasbor admin) ──────────────────────────── */
.ps-popup { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(8,12,20,.55); }
.ps-popup-kartu { display:flex; flex-direction:column; width:min(1100px,100%); max-height:min(88vh,860px); border-radius:18px; background:var(--app-card,#fff); color:var(--app-text,#1e293b); box-shadow:0 24px 60px rgba(0,0,0,.35); overflow:hidden; }
.ps-popup-kepala { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 10px; }
.ps-popup-judul { margin:0; font-size:16px; line-height:1.25; font-weight:800; }
.ps-popup-sub { margin:2px 0 0; font-size:12px; font-weight:600; color:var(--app-dim,#566274); }
.ps-popup-tutup { flex:0 0 auto; width:36px; height:36px; padding:0; border:1px solid var(--app-border,rgba(15,23,42,.15)); border-radius:10px !important; background:var(--app-muted,transparent); color:inherit; font-size:22px; line-height:1; cursor:pointer; }
.ps-popup-tutup:hover { background:var(--app-hover,rgba(127,127,127,.15)); }
.ps-popup-tutup:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(34,112,204,.45); }
#psPetaPopupPanel { flex:1 1 auto; min-height:0; margin:0; padding:0 18px 16px; border:0; border-radius:0; background:transparent; overflow:auto; contain:none; }
#psPetaPopupPanel .ps-heat-wrap { max-height:none; overflow:visible; }
@media (max-width:640px) {
  .ps-popup { padding:0; align-items:flex-end; }
  .ps-popup-kartu { max-height:92vh; border-radius:18px 18px 0 0; }
}
@media (prefers-reduced-motion:no-preference) {
  .ps-popup { animation:ps-popup-in .16s ease-out both; }
  @keyframes ps-popup-in { from { opacity:0; } to { opacity:1; } }
}
/* Popup dipasang di <body>, di luar #appShell, jadi token tema gelap disalin ke sini. */
.ps-popup[data-theme="dark"] { --app-bg:#262624;--app-card:#30302e;--app-muted:#2c2c2a;--app-text:#e2e8f0;--app-dim:#94a3b8;--app-border:rgba(255,255,255,0.12);--app-hover:#353532;color-scheme:dark; }
.ps-popup-judul-wrap { min-width:0; }
.ps-popup-aksi { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.ps-popup-info { font-size:11.5px; font-weight:700; color:var(--app-dim,#566274); }
.ps-popup-salin { min-height:36px; padding:0 14px; border:1px solid #2270cc; border-radius:10px !important; background:#2270cc; color:#fff; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; }
.ps-popup-salin:hover:not(:disabled) { filter:brightness(1.08); }
.ps-popup-salin:disabled { opacity:.5; cursor:not-allowed; }
.ps-popup-salin:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(34,112,204,.45); }
.ps-popup[data-theme="dark"] .ps-popup-salin { background:#5aa0f2; border-color:#5aa0f2; color:#0b1626; }