/* Sistem materi: kolom materi (.mk-cb*), timeline dua garis (.mk-tl*), Papan Briefing dan Peta Progres (.mk-*).
   Kerangka popup (.ps-popup*) dari pantauan-setoran.css, gerak popup dari js/materi-papan.js. */

.mhd-modal, .mk-pop {
  --mk-merah:#b91c1c; --mk-merah-bg:rgba(220,38,38,.10); --mk-merah-kuat:#dc2626;
  --mk-amber:#a24c07; --mk-amber-bg:rgba(217,119,6,.12);
  --mk-hijau:#15803d; --mk-hijau-bg:rgba(22,163,74,.11);
  --mk-biru:#1c5cab; --mk-biru-bg:rgba(42,120,214,.12); --mk-biru-kuat:#2a78d6;
  --mk-abu:var(--app-dim,#566274); --mk-abu-bg:color-mix(in srgb,var(--app-text,#1e293b) 7%,transparent);
  --mk-garis:var(--app-border,rgba(15,23,42,.14));
  --mk-sel-l1:#f7c1c1; --mk-sel-l1-ink:#791f1f;
  --mk-sel-l2:#e24b4a; --mk-sel-l2-ink:#ffffff;
  --mk-sel-l3:#a32d2d; --mk-sel-l3-ink:#ffffff;
  --mk-sel-c1:#b5d4f4; --mk-sel-c1-ink:#0c447c;
  --mk-sel-c2:#378add; --mk-sel-c2-ink:#ffffff;
  --mk-sel-ok:#e7e6df; --mk-sel-ok-ink:#3d3d3a;
}
.mk-pop[data-theme="dark"], [data-theme="dark"] .mhd-modal, body[data-app-theme="dark"] .mhd-modal {
  --mk-merah:#ff8a80; --mk-merah-bg:rgba(255,138,128,.14); --mk-merah-kuat:#ff8a80;
  --mk-amber:#f5b84a; --mk-amber-bg:rgba(245,184,74,.15);
  --mk-hijau:#6fdc8c; --mk-hijau-bg:rgba(111,220,140,.13);
  --mk-biru:#8fbdf5; --mk-biru-bg:rgba(90,160,242,.18); --mk-biru-kuat:#5aa0f2;
  --mk-sel-l1:#791f1f; --mk-sel-l1-ink:#f7c1c1;
  --mk-sel-l2:#a32d2d; --mk-sel-l2-ink:#ffffff;
  --mk-sel-l3:#e24b4a; --mk-sel-l3-ink:#ffffff;
  --mk-sel-c1:#0c447c; --mk-sel-c1-ink:#b5d4f4;
  --mk-sel-c2:#378add; --mk-sel-c2-ink:#ffffff;
  --mk-sel-ok:#383835; --mk-sel-ok-ink:#c3c2b7; --mk-mat-ok:#2a5fa5;
}

/* ── Kolom materi ───────────────────────────────────────────────── */
.mk-cb { position:relative; min-width:0; }
.mk-cb-kotak { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:38px; padding:3px 4px 3px 8px; border:1px solid var(--app-border); border-radius:9px; background:var(--app-card); cursor:text; }
.mk-cb-kotak:focus-within { border-color:var(--app-accent); }
.mk-cb.is-kosong .mk-cb-kotak { border-color:var(--mk-merah-kuat,#dc2626); background:color-mix(in srgb,#dc2626 4%,var(--app-card)); }
.mk-cb.is-nonaktif .mk-cb-kotak { background:var(--app-muted); cursor:not-allowed; }
.mhd-meta-field .mk-cb-input { flex:1 1 120px; min-width:80px; height:30px; padding:0 3px; border:0; border-radius:0; outline:none; background:transparent; color:var(--app-text); font-family:inherit; font-size:12.5px; font-weight:700; }
.mhd-meta-field .mk-cb-input::placeholder { font-weight:600; color:var(--app-dim); opacity:.85; }
.mk-cb-panah { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--app-dim); cursor:pointer; font-size:18px; }
.mk-cb-panah:hover { background:var(--mk-abu-bg,rgba(127,127,127,.12)); }
.mk-cb-chips { display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; list-style:none; min-width:0; }
.mk-cb-chips[hidden] { display:none; }
.mk-chip { display:inline-flex; align-items:center; gap:3px; max-width:100%; min-height:26px; padding:2px 3px 2px 9px; border-radius:7px; background:var(--mk-hijau-bg,rgba(22,163,74,.11)); color:var(--mk-hijau,#15803d); font-size:12px; font-weight:800; }
.mk-chip[data-t="b"] { background:var(--mk-amber-bg,rgba(217,119,6,.12)); color:var(--mk-amber,#a24c07); }
.mk-chip[data-t="n"] { background:var(--mk-abu-bg,rgba(127,127,127,.12)); color:var(--app-dim); }
.mk-chip-teks { overflow-wrap:anywhere; }
.mk-chip-hapus { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:0; border-radius:5px; background:transparent; color:inherit; cursor:pointer; font-size:15px; line-height:1; }
.mk-chip-hapus:hover { background:color-mix(in srgb,currentColor 16%,transparent); }
.mk-cb-daftar { position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; max-height:300px; overflow:auto; overscroll-behavior:contain; padding:4px; border:1px solid var(--app-border); border-radius:11px; background:var(--app-card); box-shadow:0 12px 32px rgba(0,0,0,.2); }
.mk-cb-daftar[hidden] { display:none; }
.mk-cb-grup { padding:8px 9px 3px; font-size:11px; font-weight:800; color:var(--app-dim); }
.mk-cb-opsi { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; padding:6px 9px; border-radius:7px; color:var(--app-text); font-size:12.5px; font-weight:700; cursor:pointer; }
.mk-cb-opsi:hover, .mk-cb-opsi.is-aktif { background:color-mix(in srgb,var(--app-accent) 12%,transparent); }
/* Grup "Pekan ini" (pekan yang sedang berjalan) diberi warna biru dan garis di kiri supaya mudah ditemukan di daftar yang panjang. */
.mk-cb-daftar [data-grup="pekan-ini"] { margin:2px 0; border-left:3px solid var(--mk-biru-kuat,#2a78d6); border-radius:4px 9px 9px 4px; background:var(--mk-biru-bg,rgba(42,120,214,.12)); }
.mk-cb-daftar [data-grup="pekan-ini"] .mk-cb-grup { color:var(--mk-biru,#1c5cab); }
.mk-cb-daftar [data-grup="pekan-ini"] .mk-cb-opsi-ket { color:var(--mk-biru,#1c5cab); font-weight:800; }
.mk-cb-daftar [data-grup="pekan-ini"] .mk-cb-opsi:hover, .mk-cb-daftar [data-grup="pekan-ini"] .mk-cb-opsi.is-aktif { background:color-mix(in srgb,var(--mk-biru-kuat,#2a78d6) 22%,transparent); }
.mk-cb-opsi-bebas { margin-top:3px; border-top:1px dashed var(--app-border); border-radius:0 0 7px 7px; color:var(--app-dim); }
.mk-cb-opsi-teks { min-width:0; overflow-wrap:anywhere; }
.mk-cb-opsi-ket { flex:0 0 auto; font-size:11px; font-weight:700; color:var(--app-dim); white-space:nowrap; }
.mk-cb-kosong { padding:12px 9px; font-size:12px; font-weight:600; color:var(--app-dim); }
.mhd-meta-field-grow { min-width:min(100%,260px); }
.mhd-materi-kepala { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; font-size:11px; }
.mhd-pekan-info { font-weight:800; color:var(--mk-biru); font-variant-numeric:tabular-nums; }
.mhd-pekan-info[hidden] { display:none; }

/* Agenda Pembelajaran: centang otomatis dari pertemuan */
.ktr-bab-otomatis { margin-left:auto; padding-left:8px; font-size:10.5px; font-weight:700; color:var(--app-dim); white-space:nowrap; }

/* ── Tab Timeline di modal ──────────────────────────────────────── */
.mhd-tabs.sig-seg[style*="--seg-n:4"] .mhd-tab { padding-inline:4px; }
#mhdTimelineIsi { display:flex; flex-direction:column; gap:12px; min-width:0; }

/* ── Timeline dua garis ─────────────────────────────────────────── */
.mk-tl { display:flex; flex-direction:column; gap:12px; min-width:0; color:var(--app-text); }
.mk-tl-kepala { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.mk-tl-judul { margin:0; font-size:14px; font-weight:800; }
.mk-status { display:inline-flex; align-items:center; gap:5px; min-height:26px; padding:2px 10px; border-radius:7px; font-size:12px; font-weight:800; }
.mk-status[data-s="terlambat"] { background:var(--mk-merah-bg); color:var(--mk-merah); }
.mk-status[data-s="cepat"] { background:var(--mk-biru-bg); color:var(--mk-biru); }
.mk-status[data-s="sesuai"] { background:var(--mk-hijau-bg); color:var(--mk-hijau); }
.mk-status[data-s="tanpa-rencana"], .mk-status[data-s="tanpa-pekan"] { background:var(--mk-abu-bg); color:var(--mk-abu); }
.mk-tl-sub { font-size:12px; font-weight:600; color:var(--app-dim); }
.mk-angka { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.mk-angka-kartu { padding:10px 12px; border:1px solid var(--mk-garis); border-radius:11px; background:var(--app-muted); }
.mk-angka-kartu b { display:block; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; }
.mk-angka-kartu span { display:block; font-size:12px; font-weight:800; }
.mk-angka-kartu small { display:block; margin-top:2px; font-size:11px; font-weight:600; color:var(--app-dim); }
.mk-tl-bingkai { position:relative; min-width:0; }
.mk-tl-gulir { overflow-x:auto; border:1px solid var(--mk-garis); border-radius:11px; background:var(--app-card); }
.mk-tl-gulir:focus-visible { outline:3px solid var(--app-blue,#2a78d6); outline-offset:1px; }
.mk-tl-svg { display:block; max-width:none; }
.mk-tl-sumbu { fill:var(--app-dim); font-size:11px; font-weight:700; font-family:inherit; }
.mk-tl-label { position:absolute; left:1px; padding:1px 6px 1px 8px; border-radius:0 6px 6px 0; background:var(--app-card); color:var(--app-text); font-size:12px; font-weight:800; line-height:16px; pointer-events:none; }
.mk-tl-garis-r { stroke:var(--app-dim); stroke-width:2; }
.mk-tl-garis-a { stroke:var(--mk-biru-kuat); stroke-width:2; }
.mk-tl-hub { stroke:var(--app-dim); stroke-width:1.2; opacity:.55; }
.mk-tl-hub[data-g="telat"] { stroke:var(--mk-merah-kuat); opacity:.9; stroke-dasharray:4 3; }
.mk-tl-hub[data-g="cepat"] { stroke:var(--mk-biru-kuat); opacity:.9; stroke-dasharray:4 3; }
.mk-tl-hub[data-g="agenda"] { stroke-dasharray:2 3; }
.mk-tl-rencana { fill:var(--app-dim); stroke:var(--app-card); stroke-width:1.5; }
.mk-tl-rencana[data-kosong] { fill:var(--app-card); stroke:var(--app-dim); }
.mk-tl-aktual { fill:var(--mk-biru-kuat); stroke:var(--app-card); stroke-width:1.5; }
.mk-tl-aktual[data-g="telat"] { fill:var(--mk-merah-kuat); }
.mk-tl-aktual[data-g="agenda"] { fill:var(--app-card); stroke:var(--mk-biru-kuat); stroke-dasharray:2 2; }
.mk-tl-kini { stroke:var(--app-text); stroke-width:1; stroke-dasharray:2 3; }
.mk-tl-legenda { display:flex; flex-wrap:wrap; gap:5px 14px; font-size:11.5px; font-weight:700; color:var(--app-dim); }
.mk-tl-legenda i { display:inline-block; width:18px; height:0; margin-right:6px; vertical-align:middle; border-top:2px solid var(--app-dim); }
.mk-tl-legenda i[data-g="telat"] { border-top:2px dashed var(--mk-merah-kuat); }
.mk-tl-legenda i[data-g="cepat"] { border-top:2px dashed var(--mk-biru-kuat); }
.mk-tl-legenda i[data-g="agenda"] { border-top:2px dotted var(--app-dim); }
.mk-tl-rincian { border:1px solid var(--mk-garis); border-radius:11px; background:var(--app-card); }
.mk-tl-rincian summary { min-height:40px; padding:10px 12px; font-size:12.5px; font-weight:800; cursor:pointer; }
.mk-tl-tabel-wrap { overflow-x:auto; border-top:1px solid var(--mk-garis); }
.mk-tl-tabel { width:100%; border-collapse:collapse; font-size:12px; }
.mk-tl-tabel th { position:sticky; top:0; padding:7px 10px; background:var(--app-muted); text-align:left; text-transform:none; letter-spacing:normal; font-size:11px; font-weight:800; color:var(--app-dim); white-space:nowrap; }
.mk-tl-tabel td { padding:7px 10px; border:0; border-top:1px solid var(--mk-garis); text-align:left; font-size:12px; font-weight:600; vertical-align:top; color:var(--app-text); }
.mk-tl-tabel td:first-child { font-variant-numeric:tabular-nums; white-space:nowrap; }
.mk-tl-tabel td.mk-tl-ket-telat { color:var(--mk-merah); font-weight:800; }
.mk-tl-tabel td.mk-tl-ket-cepat { color:var(--mk-biru); font-weight:800; }
.mk-tl-tabel td.mk-tl-ket-tepat { color:var(--mk-hijau); font-weight:800; }
.mk-tl-tabel td.mk-tl-ket-belum { color:var(--app-dim); }
.mk-tl-catatan { margin:0; font-size:11.5px; font-weight:600; color:var(--app-dim); }

/* ── Popup ──────────────────────────────────────────────────────── */
.mk-pop { animation:none !important; backdrop-filter:blur(6px) saturate(115%); -webkit-backdrop-filter:blur(6px) saturate(115%); }
.mk-pop .ps-popup-kartu { will-change:transform,opacity; }
@media (prefers-reduced-transparency:reduce) {
  .mk-pop { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(8,12,20,.82); }
}
.mk-isi { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px; padding:0 18px 18px; overflow:auto; overscroll-behavior:contain; color:var(--app-text); }
/* Isi popup yang menggulir, bukan tiap bagian. Tanpa ini tabel (wadah overflow, min-height 0) ikut mengecil di kolom flex
   sampai barisnya terpotong saat isinya lebih tinggi dari popup. */
.mk-isi > *, .mk-tl > * { flex-shrink:0; }
.mk-tab-baris { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.mk-tabs { flex:0 1 400px; --seg-n:3; }
.mk-btn { min-height:38px; 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; }
.mk-btn:hover:not(:disabled) { background:var(--app-hover,rgba(127,127,127,.12)); }
.mk-btn:disabled { opacity:.55; cursor:default; }
.mk-btn[aria-busy="true"] { cursor:progress; opacity:.65; }
.mk-btn:focus-visible, .mk-sel-btn:focus-visible { outline:3px solid var(--app-blue,#2a78d6); outline-offset:1px; }
.mk-tanggal { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--app-dim); }
.mk-tanggal input { height:38px; padding:0 10px; border:1px solid var(--app-border); border-radius:9px; background:var(--app-card); color:var(--app-text); font:inherit; font-size:13px; font-weight:700; }
.mk-diperbarui { font-size:11.5px; font-weight:600; color:var(--app-dim); font-variant-numeric:tabular-nums; }
.mk-kanan { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mk-kartu-angka { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; }
.mk-kpi { padding:11px 13px; border-radius:11px; background:var(--app-muted); }
.mk-kpi b { display:block; font-size:24px; line-height:1.1; font-weight:800; font-variant-numeric:tabular-nums; }
.mk-kpi span { display:block; margin-top:2px; font-size:12px; font-weight:700; color:var(--app-dim); }
.mk-kpi[data-s="belum"] b { color:var(--mk-merah); }
.mk-kpi[data-s="terisi"] b { color:var(--mk-hijau); }
.mk-judul-bagian { margin:6px 0 0; font-size:13px; font-weight:800; }
.mk-grup-guru { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:14px; align-items:start; }
.mk-grup { display:flex; flex-direction:column; gap:7px; min-width:0; }
.mk-grup-judul { margin:0; font-size:12.5px; font-weight:800; color:var(--app-dim); }
.mk-tagih { display:flex; flex-direction:column; margin:0; padding:0; list-style:none; border:1px solid var(--mk-garis); border-radius:12px; background:var(--app-card); }
.mk-tagih li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding:11px 13px; }
.mk-tagih li + li { border-top:1px solid var(--mk-garis); }
.mk-tagih-nama { font-size:13px; font-weight:800; }
.mk-tagih-rincian b { font-weight:800; color:var(--app-text); }
.mk-tagih-rincian { flex:1 1 100%; font-size:12px; font-weight:600; color:var(--app-dim); overflow-wrap:anywhere; }
.mk-lencana { display:inline-flex; align-items:center; min-height:24px; padding:1px 9px; border-radius:7px; background:var(--mk-merah-bg); color:var(--mk-merah); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
/* Peta kelengkapan: kotak per mapel, dikelompokkan per kelas */
.mk-tampil-baris { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.mk-tampil-baris .mk-judul-bagian { margin:0; }
.mk-tampil { flex:0 1 190px; --seg-n:2; }
.mk-tampil > button[aria-pressed="true"] { color:var(--app-text); }
.mk-peta-wrap { display:flex; flex-direction:column; gap:12px; }
.mk-peta { display:flex; flex-direction:column; gap:8px; }
.mk-peta-kelas { padding:9px 10px 10px; border:1px solid var(--mk-garis); border-radius:12px; background:var(--app-card); }
.mk-peta-kelas-nama { margin:0 0 7px; font-size:12px; font-weight:800; color:var(--app-dim); }
.mk-kotak-baris { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.mk-kotak { display:flex; flex-direction:column; gap:1px; min-width:0; padding:7px 9px 7px 11px; border-radius:9px; border-left:4px solid var(--mk-k,var(--mk-abu)); background:var(--mk-kb,var(--mk-abu-bg)); cursor:default; }
.mk-kotak[data-s="terisi"], .mk-kotak-contoh[data-s="terisi"] { --mk-k:var(--mk-hijau); --mk-kb:var(--mk-hijau-bg); }
.mk-kotak[data-s="belum"], .mk-kotak-contoh[data-s="belum"] { --mk-k:var(--mk-merah-kuat); --mk-kb:var(--mk-merah-bg); }
.mk-kotak[data-s="berlangsung"], .mk-kotak-contoh[data-s="berlangsung"] { --mk-k:var(--mk-amber); --mk-kb:var(--mk-amber-bg); }
.mk-kotak[data-s="perlu-cek"], .mk-kotak-contoh[data-s="perlu-cek"] { --mk-k:var(--mk-abu); --mk-kb:transparent; outline:1px dashed var(--mk-garis); outline-offset:-1px; }
.mk-kotak-mapel { font-size:12.5px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.mk-kotak-guru { font-size:11.5px; font-weight:600; line-height:1.25; color:var(--app-dim); overflow-wrap:anywhere; }
.mk-kotak-status { margin-top:2px; font-size:11px; font-weight:800; color:var(--mk-k); }
.mk-kotak[data-s="berlangsung"] .mk-kotak-status, .mk-kotak[data-s="perlu-cek"] .mk-kotak-status { color:var(--app-dim); }
.mk-kotak-contoh { display:inline-block; width:14px; height:14px; border-radius:4px; border-left:4px solid var(--mk-k); background:var(--mk-kb); }
/* Per Guru: matriks guru x tanggal */
.mk-mat .mk-grid th:first-child { max-width:210px; overflow:hidden; text-overflow:ellipsis; }
.mk-mat .mk-grid tbody th { font-size:12.5px; color:var(--app-text); }
.mk-mat .mk-grid thead th:nth-child(1) { text-align:left; }
.mk-mat .mk-grid thead th:nth-child(1), .mk-mat .mk-grid tbody th { min-width:150px !important; max-width:210px !important; }
.mk-mat-th b { display:block; font-size:12.5px; font-weight:800; color:var(--app-text); font-variant-numeric:tabular-nums; }
.mk-mat-th small { display:block; font-size:10px; font-weight:700; color:var(--app-dim); text-transform:none; }
.mk-mat-th[data-ini="1"] b { color:var(--mk-biru); }
.mk-mat-belum { min-width:44px; text-align:center; }
.mk-mat .mk-sel-btn { width:38px; min-width:38px; height:30px; }
.mk-sel-btn[data-g="lengkap"] { background:var(--mk-mat-ok,#12417a); color:#fff; }
.mk-sel-btn[data-g="belum"] { background:var(--mk-sel-l2); color:var(--mk-sel-l2-ink); }
.mk-sel-btn[data-g="berlangsung"] { background:var(--mk-amber-bg); color:var(--mk-amber); }
.mk-mat .mk-sel-btn[aria-pressed="true"] { outline:3px solid var(--app-text); outline-offset:1px; }
.mk-legenda .mk-sel-kosong { width:20px; height:18px; }
.mk-detail { padding:10px 12px; border:1px solid var(--mk-garis); border-radius:11px; background:var(--app-card); font-size:12.5px; }
.mk-detail > b { font-weight:800; }
.mk-detail-daftar { display:flex; flex-direction:column; gap:3px; margin:6px 0 0; padding:0; list-style:none; }
.mk-detail-daftar li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; font-weight:600; }
.mk-detail-status { font-weight:800; color:var(--app-dim); }
.mk-detail-daftar li[data-s="belum"] .mk-detail-status { color:var(--mk-merah); }
.mk-detail-daftar li[data-s="terisi"] .mk-detail-status { color:var(--mk-hijau); }
.mk-lengkap { padding:16px; border:1px dashed var(--mk-garis); border-radius:12px; text-align:center; font-size:13px; font-weight:700; color:var(--mk-hijau); }
.mk-catatan { margin:0; font-size:11.5px; font-weight:600; color:var(--app-dim); }
.mk-galat { padding:14px; border:1px solid color-mix(in srgb,var(--mk-merah) 40%,transparent); border-radius:12px; background:var(--mk-merah-bg); font-size:12.5px; font-weight:700; }
.mk-galat strong { display:block; margin-bottom:4px; font-size:13px; }
.mk-galat p { margin:0 0 9px; font-weight:600; }
.mk-perhatian { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:10px 13px; border-radius:11px; background:var(--mk-amber-bg); color:var(--mk-amber); font-size:12.5px; font-weight:700; }
.mk-skel { display:grid; gap:8px; }
.mk-skel i { display:block; height:44px; border-radius:10px; background:var(--mk-abu-bg); animation:mk-denyut 1.3s ease-in-out infinite; }
@keyframes mk-denyut { 50% { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { .mk-skel i { animation:none; } }

/* Peta kelas x jam dan Peta Progres */
.mk-tabel-wrap { overflow-x:auto; border:1px solid var(--mk-garis); border-radius:12px; background:var(--app-card); }
.mk-grid { width:auto; min-width:0; border-collapse:separate; border-spacing:3px; font-size:12px; }
.mk-grid th, .mk-grid td { border:0; text-align:center; text-transform:none; letter-spacing:normal; }
.mk-grid td { padding:0; background:transparent; }
.mk-grid th { padding:3px 5px; font-size:11.5px; font-weight:800; color:var(--app-dim); white-space:nowrap; background:var(--app-card); }
.mk-grid thead th { position:sticky; top:0; left:auto; z-index:2; background:var(--app-card) !important; }
.mk-grid .mk-sel-btn, .mk-grid .mk-sel-kosong { margin:0 auto; }
/* Netralkan aturan global main.css `thead th:nth-child(1|2)` (lebar tetap, kolom lengket, 50vw di layar kecil) yang melebarkan kolom tabel mana pun. */
.mk-grid thead th:nth-child(n), .mk-tl-tabel thead th:nth-child(n) { min-width:0 !important; width:auto !important; max-width:none !important; box-shadow:none; overflow:visible !important; text-overflow:clip !important; }
.mk-grid thead th:nth-child(2) { left:auto; text-align:center; }
.mk-grid thead th:nth-child(1) { left:0; }
.mk-tl-tabel thead th:nth-child(1), .mk-tl-tabel thead th:nth-child(2) { position:sticky; left:auto; }
.mk-grid tbody th { position:sticky; left:0; z-index:1; text-align:left; color:var(--app-text); }
.mk-grid thead th:first-child { left:0; z-index:3; }
.mk-grup-th th { padding-top:10px; text-align:left; color:var(--app-text); font-size:12px; }
.mk-sel-kosong { width:36px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--mk-abu); opacity:.5; }
.mk-legenda { display:flex; flex-wrap:wrap; gap:5px 14px; font-size:11.5px; font-weight:700; color:var(--app-dim); }
.mk-legenda span { display:inline-flex; align-items:center; gap:6px; }
.mk-legenda .mk-sel-btn { width:20px; height:18px; min-width:20px; font-size:11px; border-radius:4px; cursor:default; }
.mk-sel-btn { display:flex; align-items:center; justify-content:center; width:46px; min-width:46px; height:32px; padding:0; border:0; border-radius:6px !important; font:inherit; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; cursor:pointer; }
.mk-sel-btn[data-b="ok"] { background:var(--mk-sel-ok); color:var(--mk-sel-ok-ink); }
.mk-sel-btn[data-b="l1"] { background:var(--mk-sel-l1); color:var(--mk-sel-l1-ink); }
.mk-sel-btn[data-b="l2"] { background:var(--mk-sel-l2); color:var(--mk-sel-l2-ink); }
.mk-sel-btn[data-b="l3"] { background:var(--mk-sel-l3); color:var(--mk-sel-l3-ink); }
.mk-sel-btn[data-b="c1"] { background:var(--mk-sel-c1); color:var(--mk-sel-c1-ink); }
.mk-sel-btn[data-b="c2"] { background:var(--mk-sel-c2); color:var(--mk-sel-c2-ink); }
.mk-sel-btn[data-b="na"] { background:transparent; border:1px dashed var(--mk-garis); color:var(--mk-abu); }
.mk-kolom-mapel { max-width:62px; white-space:normal !important; line-height:1.15; font-size:11px !important; vertical-align:bottom; }
.mk-progres-ringkas { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
.mk-kembali { align-self:flex-start; }

@media (max-width:640px) {
  .mk-isi { padding:0 12px 14px; }
  .mk-kanan { margin-left:0; }
  .mk-tabs { flex:1 1 100%; }
  .mk-cb-daftar { max-height:240px; }
}

/* ── Isi Absen & Materi dari jadwal mengajar guru (.jisi-*) ─────────
   Dipakai di tab Jadwal Mengajar Hari Ini (latar terang/gelap mengikuti tema) dan di kartu dasbor (selalu gelap). */
.jisi-daftar, .jisi-lampau, .jisi-aksi {
  --jisi-ink:var(--app-text,#1e293b); --jisi-redup:var(--app-dim,#566274);
  --jisi-garis:var(--app-border,rgba(15,23,42,.14)); --jisi-bg:var(--app-card,#fff);
  --jisi-aksen:var(--app-accent,#16a34a); --jisi-aksen-bg:color-mix(in srgb,var(--jisi-aksen) 10%,transparent);
  --jisi-ok:#15803d; --jisi-ok-bg:rgba(22,163,74,.13); --jisi-belum:#a24c07; --jisi-belum-bg:rgba(217,119,6,.14);
}
[data-theme="dark"] .jisi-daftar, [data-theme="dark"] .jisi-lampau, [data-theme="dark"] .jisi-aksi,
#dashJadwalHarian .jisi-lampau, #dashJadwalHarian .jisi-aksi {
  --jisi-ok:#86efac; --jisi-ok-bg:rgba(74,222,128,.16); --jisi-belum:#fcd34d; --jisi-belum-bg:rgba(245,184,74,.18);
}
#dashJadwalHarian .jisi-lampau, #dashJadwalHarian .jisi-aksi {
  --jisi-ink:rgba(236,243,229,.96); --jisi-redup:rgba(194,207,181,.78);
  --jisi-garis:rgba(139,153,124,.5); --jisi-bg:rgba(139,153,124,.16);
  --jisi-aksen:rgba(215,226,204,.95); --jisi-aksen-bg:rgba(139,153,124,.22);
}

.jisi-daftar { display:flex; flex-direction:column; gap:8px; }
.jisi-kartu { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border:1px solid var(--jisi-garis); border-radius:12px; background:var(--jisi-bg); }
.jisi-kartu-info { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.jisi-kartu-jam { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:11.5px; font-weight:700; color:var(--jisi-redup); font-variant-numeric:tabular-nums; }
.jisi-kartu-jam b { font-weight:800; color:var(--jisi-ink); }
.jisi-pil { padding:1px 7px; border:1px solid currentColor; border-radius:999px; font-style:normal; font-size:9.5px; font-weight:800; white-space:nowrap; color:#6366f1; }
.jisi-pil.is-reguler { color:var(--jisi-aksen); }
.jisi-pil.is-inval { color:var(--jisi-belum); }
.jisi-kartu-mapel { font-size:14px; font-weight:800; line-height:1.3; color:var(--jisi-ink); overflow-wrap:anywhere; }
.jisi-kartu-mapel span { margin-left:8px; font-size:12px; font-weight:700; color:var(--jisi-redup); white-space:nowrap; }
.jisi-kartu-aksi { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.jisi-kartu-aksi .jisi-masuk { min-height:40px; padding:0 14px; font-size:12px; white-space:nowrap; }

.jisi-aksi { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.jisi-btn { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 8px; min-height:40px; padding:6px 12px; border:1px solid color-mix(in srgb,var(--jisi-aksen) 45%,transparent); border-radius:10px; background:var(--jisi-aksen-bg); color:var(--jisi-aksen); font:inherit; font-size:12px; font-weight:800; line-height:1.2; cursor:pointer; touch-action:manipulation; }
.jisi-btn:hover { background:color-mix(in srgb,var(--jisi-aksen) 17%,transparent); }
.jisi-btn:focus-visible, .jisi-baris:focus-visible, .mhd-sisa-btn:focus-visible { outline:2px solid var(--jisi-aksen,var(--app-accent)); outline-offset:2px; }
.jisi-btn-teks { white-space:nowrap; }
.jisi-btn-teks b { font-weight:900; }
.jisi-tanda { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px; background:color-mix(in srgb,var(--jisi-redup) 14%,transparent); color:var(--jisi-redup); font-size:10.5px; font-weight:800; white-space:nowrap; }
.jisi-tanda::before { content:'…'; font-weight:900; }
.jisi-tanda[data-s="ok"] { background:var(--jisi-ok-bg); color:var(--jisi-ok); }
.jisi-tanda[data-s="ok"]::before { content:'✓'; }
.jisi-tanda[data-s="belum"] { background:var(--jisi-belum-bg); color:var(--jisi-belum); }
.jisi-tanda[data-s="belum"]::before { content:'○'; }
#dashJadwalHarian .jisi-aksi { flex:1 1 100%; margin-bottom:4px; }
#dashJadwalHarian .jisi-btn { min-height:36px; font-size:11px; }

.jisi-lampau { margin-top:10px; }
.jisi-lampau[hidden] { display:none; }
.jisi-lampau-lipat > summary { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:4px 12px 4px 6px; border:1px solid var(--jisi-garis); border-radius:999px; background:var(--jisi-bg); color:var(--jisi-ink); font-size:11.5px; font-weight:800; cursor:pointer; list-style:none; touch-action:manipulation; }
.jisi-lampau-lipat > summary::-webkit-details-marker { display:none; }
.jisi-lampau-lipat > summary:focus-visible { outline:2px solid var(--jisi-belum); outline-offset:2px; }
.jisi-lampau-jml { min-width:24px; padding:3px 7px; border-radius:999px; background:var(--jisi-belum-bg); color:var(--jisi-belum); text-align:center; font-variant-numeric:tabular-nums; }
.jisi-lampau-lipat > summary i { width:7px; height:7px; margin-left:2px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-2px); opacity:.7; }
.jisi-lampau-lipat[open] > summary i { transform:rotate(-135deg) translateY(-2px); }
/* Paling banyak sekitar empat baris yang tampil; sisanya digulir di dalam kotaknya sendiri. */
.jisi-lampau-daftar { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:4px; max-height:176px; margin-top:8px; padding-right:2px; overflow-y:auto; overscroll-behavior:contain; }
.jisi-baris { display:flex; align-items:center; gap:8px; min-height:40px; padding:4px 10px; border:1px solid var(--jisi-garis); border-radius:10px; background:var(--jisi-bg); color:var(--jisi-ink); font:inherit; text-align:left; cursor:pointer; touch-action:manipulation; }
.jisi-baris:hover { border-color:var(--jisi-belum); }
.jisi-baris-tgl { flex:0 0 auto; min-width:68px; font-size:11px; font-weight:800; color:var(--jisi-redup); font-variant-numeric:tabular-nums; white-space:nowrap; }
.jisi-baris-nama { flex:1 1 auto; min-width:0; font-size:12px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jisi-baris-kurang { flex:0 0 auto; padding:2px 7px; border-radius:999px; background:var(--jisi-belum-bg); color:var(--jisi-belum); font-size:10.5px; font-weight:800; white-space:nowrap; }

@media (max-width:560px) {
  .jisi-kartu-aksi { flex:1 1 100%; }
  .jisi-kartu-aksi .jisi-masuk, .jisi-kartu-aksi .jisi-aksi, .jisi-kartu-aksi .jisi-btn { flex:1 1 auto; }
}
@media (pointer:coarse) {
  .jisi-btn, .jisi-kartu-aksi .jisi-masuk, #dashJadwalHarian .jisi-btn, .jisi-baris, .jisi-lampau-lipat > summary { min-height:44px; }
  .jisi-lampau-daftar { max-height:192px; }
}

/* ── Daftar kehadiran per pertemuan: tablet, laptop, dan HP tegak maupun rebah ── */
/* Modal hidup di #mhdLapis (anak <body>), bukan di #appShell, jadi warna tema gelap disediakan di sini. */
#mhdLapis[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-accent:#22c55e; --app-blue:#38bdf8; --app-warn:#f59e0b; --app-danger:#ef4444; --app-chip:#1f1e1d; --app-thead:#292927; --app-hover:#353532; --app-sel:#1a3a55; --app-ring:0 0 0 3px rgba(56,189,248,0.35); --app-shadow:0 4px 20px rgba(0,0,0,0.3); }
.mhd-modal.has-presenter .mhd-modal-card { height:min(92dvh,1100px); }
.mhd-row-name b { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; line-height:1.25; overflow-wrap:anywhere; }
.mhd-status-btn { touch-action:manipulation; }
/* Menempel di dasar daftar: santri yang tidak hadir ditandai dulu, lalu satu ketukan untuk sisanya. */
.mhd-sisa-bar { position:sticky; bottom:-16px; z-index:2; margin:-6px 0 -16px; padding:0; pointer-events:none; }
.mhd-sisa-btn { pointer-events:auto; display:block; width:100%; min-height:46px; margin:0 0 12px; padding:0 16px; border:0; border-radius:12px; background:#15803d; color:#fff; font:inherit; font-size:14px; font-weight:800; cursor:pointer; box-shadow:0 6px 18px rgba(21,128,61,.32), 0 0 0 6px var(--app-card,#fff); touch-action:manipulation; }
.mhd-sisa-btn:hover { background:#166534; }
.mhd-sisa-btn[hidden] { display:none; }
@media (pointer:coarse) {
  .mhd-status-btn { width:44px; height:44px; font-size:14px; }
  .mhd-status-btns { gap:6px; }
  .mhd-row-reason { height:38px; font-size:13px; }
  .mhd-pertemuan-chip { min-height:44px; }
}
/* Layar lebar: ringkasan dan pencarian sebaris. Daftar santri tetap satu kolom berurutan 1..n agar mudah dibaca dan tidak zig-zag. */
@media (min-width:900px) {
  #mhdInputPanel.active { flex-direction:row; flex-wrap:wrap; align-items:center; }
  #mhdInputPanel > * { flex:1 1 100%; min-width:0; }
  #mhdInputPanel > .mhd-stats { flex:1 1 0; }
  #mhdInputPanel > .mhd-tools { flex:0 1 300px; }
}
/* Keterangan huruf hanya di layar yang lega: chip ringkasan di atasnya sudah menyebut Hadir, Sakit, Izin, Alpa, Pulang. */
@media (max-width:720px), (max-height:820px) {
  .mhd-legend { display:none !important; }
}
@media (max-width:720px) {
  .mhd-sisa-bar { bottom:-14px; margin-bottom:-14px; }
  .mhd-row { padding:8px 10px; row-gap:0; }
  .mhd-status-btns { margin-top:6px; }
  .mhd-status-btn { width:100%; }
}
/* HP rebah: tinggi layar sangat terbatas, jadi kepala dan kaki modal dipadatkan dan daftar santri tetap satu kolom. */
@media (max-height:520px) and (orientation:landscape) {
  .mhd-modal.has-presenter .mhd-modal-card, .mhd-modal[data-mode="sheet"] .mhd-modal-card { height:100dvh; }
  .mhd-modal-head, [data-mode="sheet"] .mhd-modal-head { padding:6px 16px; align-items:center; }
  [data-mode="sheet"] .mhd-grabber { display:none; }
  .mhd-modal-title { display:none; }
  .mhd-modal-sub { margin-top:0; font-size:12.5px; font-weight:800; color:var(--app-text); }
  .mhd-tabs.sig-seg { margin:6px 16px 0; }
  .mhd-tabs .mhd-tab { padding-block:5px; }
  .mhd-body { padding:8px 14px; gap:8px; }
  .mhd-panel { gap:8px; }
  .mhd-meta-row { flex-direction:row; align-items:flex-end; padding:8px; }
  .mhd-foot, [data-mode="sheet"] .mhd-foot { padding:3px 14px; }
  .mhd-foot .mhd-mini-btn { display:none; }
  .mhd-sisa-bar { bottom:-8px; margin-bottom:-8px; display:flex; justify-content:flex-end; }
  .mhd-sisa-btn { width:auto; min-height:44px; margin-bottom:8px; box-shadow:0 6px 18px rgba(21,128,61,.4); }
}
@media (max-height:520px) and (orientation:landscape) and (min-width:640px) {
  .mhd-list { gap:6px; }
  .mhd-row { grid-template-columns:20px minmax(0,1fr) auto; gap:6px; padding:6px 8px; }
  .mhd-row-name b { font-size:12px; }
  .mhd-status-btns { grid-column:auto; display:flex; gap:4px; margin-top:0; }
  .mhd-status-btn { width:40px; height:40px; }
}