/* Peta kelengkapan absensi kelas (popup dasbor admin), dirender js/peta-absensi.js.
   Kerangka popup (.ps-popup*, .ps-tip*) dan warna jenjang ([data-jj]) dari pantauan-setoran.css. */

/* Skala biru enam tingkat, sama dengan Peta Halaqah dan Peta Mapel. */
.pa-pop {
  --pa-heat-0:#f0efec; --pa-heat-0-ink:#52514e;
  --pa-heat-1:#86b6ef; --pa-heat-1-ink:#0b0b0b;
  --pa-heat-2:#5598e7; --pa-heat-2-ink:#0b0b0b;
  --pa-heat-3:#2a78d6; --pa-heat-3-ink:#ffffff;
  --pa-heat-4:#1c5cab; --pa-heat-4-ink:#ffffff;
  --pa-heat-5:#0d366b; --pa-heat-5-ink:#ffffff;
  --pa-series:#2270cc; --pa-track:#dce9fb; --pa-ring:0 0 0 3px rgba(34,112,204,.45);
}
.pa-pop[data-theme="dark"] {
  --pa-heat-0:#383835; --pa-heat-0-ink:#c3c2b7;
  --pa-heat-1:#2a78d6; --pa-heat-1-ink:#ffffff;
  --pa-heat-2:#5598e7; --pa-heat-2-ink:#0b0b0b;
  --pa-heat-3:#86b6ef; --pa-heat-3-ink:#0b0b0b;
  --pa-heat-4:#b7d3f6; --pa-heat-4-ink:#0b0b0b;
  --pa-heat-5:#e6f0fd; --pa-heat-5-ink:#0b0b0b;
  --pa-series:#5aa0f2; --pa-track:rgba(90,160,242,.22); --pa-ring:0 0 0 3px rgba(90,160,242,.5);
}

/* Gerak masuk dan keluar dipegang pegas di JS (opacity dan transform lapisan); animasi CSS bawaan .ps-popup harus mati,
   kalau tidak ia menimpa nilai inline dan menahan opacity 1 saat popup menyusut. */
.pa-pop { animation:none !important; backdrop-filter:blur(6px) saturate(115%); -webkit-backdrop-filter:blur(6px) saturate(115%); }
.pa-pop .ps-popup-kartu { will-change:transform,opacity; }
.pa-pop .ps-popup-judul { letter-spacing:-.015em; }
@media (prefers-reduced-transparency:reduce) {
  .pa-pop { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(8,12,20,.82); }
}

.pa-isi { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px; padding:0 18px 18px; overflow:auto; overscroll-behavior:contain; }
/* Opacity dan transform .pa-konten dipegang pegas di JS saat masuk; jangan beri transisi CSS (keduanya akan bertabrakan). */
.pa-konten { display:flex; flex-direction:column; gap:12px; min-width:0; }
.pa-konten.is-memuat { opacity:.55; pointer-events:none; }

/* ── Pemilih bulan ─────────────────────────────────────────────────── */
.pa-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.pa-bulan { display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:var(--app-muted,#f1f5f9); }
.pa-bulan-label { min-width:9.5em; padding:0 6px; text-align:center; font-size:13.5px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--app-text,#1e293b); }
.pa-geser { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:0; border-radius:50% !important; background:transparent; color:var(--app-text,#1e293b); font:inherit; font-size:20px; line-height:1; cursor:pointer; transition:transform .1s ease-out, background-color .15s ease; }
.pa-geser:hover:not(:disabled) { background:var(--app-hover,rgba(127,127,127,.15)); }
.pa-geser:active:not(:disabled) { transform:scale(.9); }
.pa-geser:disabled { opacity:.32; cursor:default; }
.pa-btn { min-height:36px; padding:0 14px; border:1px solid var(--app-border,rgba(15,23,42,.15)); border-radius:999px !important; background:var(--app-card,#fff); color:var(--app-text,#1e293b); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:transform .1s ease-out, background-color .15s ease; }
.pa-btn:hover { background:var(--app-hover,rgba(127,127,127,.12)); }
.pa-btn:active { transform:scale(.96); }
.pa-btn[aria-busy="true"] { opacity:.65; cursor:progress; }
.pa-btn-utama { border-color:var(--pa-series); background:var(--pa-series); color:#fff; }
.pa-pop[data-theme="dark"] .pa-btn-utama { color:#0b1626; }
.pa-btn-utama:hover { background:var(--pa-series); filter:brightness(1.08); }
.pa-geser:focus-visible, .pa-btn:focus-visible { outline:none; box-shadow:var(--pa-ring); }

/* ── Legenda dan rekap ─────────────────────────────────────────────── */
.pa-legenda { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; font-weight:700; color:var(--app-text,#1e293b); }
.pa-legenda-item { display:inline-flex; align-items:center; gap:6px; }
.pa-swatch { display:inline-block; width:14px; height:14px; border-radius:4px; }
.pa-rekap { display:flex; flex-direction:column; gap:8px; min-width:0; }
.pa-rekap-judul { margin:0; font-size:12.5px; font-weight:800; letter-spacing:-.005em; color:var(--app-text,#1e293b); }
.pa-rekap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.pa-kartu { display:flex; flex-direction:column; gap:3px; min-width:0; padding:12px 14px; border-radius:12px; background:var(--app-muted,#f1f5f9); }
.pa-kartu[data-jj] { background:var(--jj-bg); box-shadow:inset 4px 0 0 var(--jj-ac); }
.pa-kartu-label { font-size:11px; font-weight:800; color:var(--app-dim,#64748b); }
.pa-kartu[data-jj] .pa-kartu-label { color:var(--jj-ink); }
.pa-kartu-angka { display:flex; flex-wrap:wrap; gap:2px 14px; font-size:11.5px; font-weight:700; color:var(--app-dim,#64748b); }
.pa-kartu-angka b { font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.pa-terisi b { color:var(--pa-series); }
.pa-belum b { color:var(--app-text,#1e293b); }
.pa-meter { display:block; height:8px; margin-top:2px; border-radius:999px; background:var(--pa-track); overflow:hidden; }
.pa-meter-isi { display:block; height:100%; border-radius:0 4px 4px 0; background:var(--pa-series); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.pa-kartu-sub { font-size:11px; line-height:1.35; font-weight:600; color:var(--app-dim,#64748b); }
.pa-catatan { margin:0; max-width:78ch; font-size:11.5px; line-height:1.5; font-weight:600; color:var(--app-dim,#64748b); }
.pa-catatan-galat { color:var(--app-danger,#dc2626); }

/* ── Tabel peta ────────────────────────────────────────────────────── */
.pa-wrap { overflow:auto; max-width:100%; }
/* !important: main.css punya aturan mobile untuk SEMUA tabel (table, thead th:nth-child(2) { min-width:50vw !important }). */
.pa-pop table.pa-tabel { width:max-content !important; min-width:0 !important; table-layout:auto !important; border-collapse:separate; border-spacing:2px; font-size:11px; background:transparent; }
.pa-pop .pa-tabel th, .pa-pop .pa-tabel td { width:auto !important; min-width:0 !important; max-width:none !important; height:auto; padding:0 !important; border:0; box-shadow:none !important; background:transparent; text-transform:none; letter-spacing:0; }
.pa-pop .pa-tabel tbody tr:hover { background:transparent; }
.pa-pop .pa-tabel thead th { position:sticky; top:0; z-index:2; padding:0 0 4px !important; background:var(--app-card,#fff); text-align:center; vertical-align:bottom; }
.pa-pop .pa-tabel thead th.pa-corner { left:0; z-index:3; padding:0 10px 4px 2px !important; text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--app-dim,#64748b); }
.pa-col span { display:inline-block; min-width:22px; padding:2px 0; border-radius:999px; font-size:11px; font-weight:700; line-height:1.3; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--app-text,#1e293b); }
.pa-col.is-hari-ini span { background:var(--pa-series); color:#fff; font-weight:800; }
.pa-pop[data-theme="dark"] .pa-col.is-hari-ini span { color:#0b1626; }
.pa-pop .pa-tabel th.pa-row { position:sticky; left:0; z-index:1; padding:0 10px 0 2px !important; background:var(--app-card,#fff); text-align:left; font-size:12px; white-space:nowrap; color:var(--app-text,#1e293b); }
.pa-row strong { font-weight:800; }
.pa-row small { margin-left:6px; font-size:10.5px; font-weight:600; color:var(--app-dim,#64748b); }
.pa-sel, .pa-na { display:flex; align-items:center; justify-content:center; width:32px; height:30px; margin:0; border-radius:6px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; outline:none; cursor:default; }
.pa-na { font-weight:700; color:var(--app-dim,#64748b); }
.pa-sel:hover, .pa-sel:focus-visible, .pa-na:focus-visible { box-shadow:0 0 0 2px var(--app-text,#1e293b); }
.pa-sel[data-bin="0"], .pa-swatch[data-bin="0"] { background:var(--pa-heat-0); color:var(--pa-heat-0-ink); }
.pa-sel[data-bin="1"], .pa-swatch[data-bin="1"] { background:var(--pa-heat-1); color:var(--pa-heat-1-ink); }
.pa-sel[data-bin="2"], .pa-swatch[data-bin="2"] { background:var(--pa-heat-2); color:var(--pa-heat-2-ink); }
.pa-sel[data-bin="3"], .pa-swatch[data-bin="3"] { background:var(--pa-heat-3); color:var(--pa-heat-3-ink); }
.pa-sel[data-bin="4"], .pa-swatch[data-bin="4"] { background:var(--pa-heat-4); color:var(--pa-heat-4-ink); }
.pa-sel[data-bin="5"], .pa-swatch[data-bin="5"] { background:var(--pa-heat-5); color:var(--pa-heat-5-ink); }
/* Judul jenjang: pil berwarna jenjang, ikut menempel di kiri saat tabel digulir mendatar. */
.pa-pop .pa-tabel tr.pa-grup th { padding:12px 0 4px !important; text-align:left; }
.pa-pop .pa-tabel tr.pa-grup:first-child th { padding-top:2px !important; }
.pa-grup th > span { position:sticky; left:2px; display:inline-block; padding:2px 10px; border-radius:999px; background:var(--jj-bg); color:var(--jj-ink); font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }

/* ── Keadaan: memuat, galat, kosong ────────────────────────────────── */
.pa-skel { display:flex; flex-direction:column; gap:8px; padding:6px 0; }
.pa-skel i { display:block; height:34px; border-radius:9px; background:var(--app-muted,#f1f5f9); animation:pa-denyut 1.3s ease-in-out infinite; }
.pa-skel i:nth-child(odd) { width:92%; }
@keyframes pa-denyut { 50% { opacity:.45; } }
.pa-galat { display:flex; flex-direction:column; align-items:center; gap:6px; padding:36px 16px; text-align:center; font-size:13px; color:var(--app-text,#1e293b); }
.pa-galat strong { font-size:14px; font-weight:800; letter-spacing:-.005em; }
.pa-galat p { margin:0; max-width:46ch; line-height:1.5; color:var(--app-dim,#64748b); }
.pa-galat[role="alert"] strong { color:var(--app-danger,#dc2626); }
.pa-galat .pa-btn { margin-top:8px; min-height:40px; padding:0 20px; }

/* ── Tombol pengingat WhatsApp di tooltip sel ──────────────────────── */
.ps-tip.pa-tip-aktif { pointer-events:auto; }
.pa-tip-aksi { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.pa-tip-wa { min-height:36px; padding:0 12px; border:0; border-radius:8px !important; background:#25d366; color:#052e16; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; transition:transform .1s ease-out, filter .15s ease; }
.pa-tip-wa:hover { filter:brightness(1.07); }
.pa-tip-wa:active { transform:scale(.97); }
.pa-tip-wa:focus-visible { outline:2px solid #f8fafc; outline-offset:2px; }

/* ── Layar kecil, kontras, gerak ───────────────────────────────────── */
@media (max-width:640px) {
  .pa-isi { padding:0 14px 16px; }
  .pa-geser { width:40px; height:40px; }
  .pa-btn { min-height:40px; }
  .pa-tip-wa { min-height:44px; }
  .pa-bulan-label { min-width:8.5em; }
  .pa-row small { display:none; }
  .pa-sel, .pa-na { width:28px; height:28px; font-size:10.5px; }
}
@media (pointer:coarse) {
  .pa-tip-wa { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .pa-skel i { animation:none; }
  .pa-geser, .pa-btn, .pa-meter-isi, .pa-tip-wa { transition:none; }
  .pa-geser:active:not(:disabled), .pa-btn:active, .pa-tip-wa:active { transform:none; }
}
@media (prefers-contrast:more) {
  .pa-kartu, .pa-bulan { border:2px solid currentColor; }
  .pa-sel { outline:1px solid currentColor; outline-offset:-1px; }
}
@media (forced-colors:active) {
  .pa-sel, .pa-swatch { border:1px solid CanvasText; }
}