/* ═══════════════════════════════════════════════════════════════════════════
   RAPOR MANDIRI — Laporan › Rapor Mandiri
   Kotak "Sumber nilai", kartu tinjau impor leger (chip ringkasan, daftar
   galat/peringatan, tabel "Santri · Kolom · Lama → Baru"), dan cetak.
   Kertas rapornya sendiri memakai gaya .rapse-* di main.css (bentuknya harus
   sama persis dengan Rapor Semester); file ini hanya untuk sekelilingnya.

   Aturan global main.css yang diam-diam menimpa komponen baru dan sengaja
   dinyatakan ulang di sini: table { width:max-content !important } di layar
   sempit, tbody td { height:38px }, dan button { border-radius: pill }.
   Gerak: pendek, tidak pernah mengunci klik, dan mengalah pada "kurangi gerakan".
   ═══════════════════════════════════════════════════════════════════════════ */

#lapPanelRaporMandiri {
  --rapmd-aksen: #6366f1;
  --rapmd-aksen-teks: #4338ca;
  --rapmd-info-bg: rgba(99, 102, 241, .12);
  --rapmd-info-garis: rgba(99, 102, 241, .38);
  --rapmd-peringatan-teks: #92400e;
  --rapmd-galat-teks: #b91c1c;
  --rapmd-ease: cubic-bezier(.2, .8, .2, 1);
}
#appShell[data-theme="dark"] #lapPanelRaporMandiri {
  --rapmd-aksen: #818cf8;
  --rapmd-aksen-teks: #c7d2fe;
  --rapmd-info-bg: rgba(129, 140, 248, .16);
  --rapmd-info-garis: rgba(129, 140, 248, .48);
  --rapmd-peringatan-teks: #fcd34d;
  --rapmd-galat-teks: #fca5a5;
}

/* ── Baris tombol langkah ① ② ③ ─────────────────────────────────────────── */
#lapPanelRaporMandiri .rapmd-langkah {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
#lapPanelRaporMandiri .rapmd-status {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--app-dim);
  overflow-wrap: anywhere;
}

/* Respons instan: tombol menekan begitu disentuh, dan melepas lebih lembut. */
#lapPanelRaporMandiri .laporan-btn:active:not(:disabled),
#lapPanelRaporMandiri button.rapmd-hapus:active,
#lapPanelRaporMandiri button.rapmd-lebih:active {
  transform: scale(.97);
  transition: transform 90ms ease-out;
}
#lapPanelRaporMandiri .laporan-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Kotak "Sumber nilai" ───────────────────────────────────────────────── */
#lapPanelRaporMandiri .rapmd-sumber {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-left: 3px solid var(--rapmd-aksen);
  border-radius: 12px;
}
#lapPanelRaporMandiri .rapmd-sumber-kosong { border-left-color: var(--app-dim); }
#lapPanelRaporMandiri .rapmd-sumber-galat { border-left-color: var(--app-danger); }
#lapPanelRaporMandiri .rapmd-sumber-teks { flex: 1; min-width: 0; }
#lapPanelRaporMandiri .rapmd-sumber-judul {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--app-dim);
}
#lapPanelRaporMandiri .rapmd-sumber-isi {
  font-size: 12px;
  line-height: 1.6;
  color: var(--app-text);
  overflow-wrap: anywhere;
}
#lapPanelRaporMandiri .rapmd-sumber-berkas { font-weight: 700; }
#lapPanelRaporMandiri .rapmd-sumber-catatan { margin-top: 6px; font-size: 11px; color: var(--app-dim); }
#lapPanelRaporMandiri .rapmd-sumber-aksi { flex: 0 0 auto; }

#lapPanelRaporMandiri button.rapmd-hapus {
  padding: 7px 14px;
  border: 1px solid rgba(220, 38, 38, .5);
  background: transparent;
  color: var(--rapmd-galat-teks);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s ease, transform 160ms var(--rapmd-ease);
}
#lapPanelRaporMandiri button.rapmd-hapus:hover { background: rgba(220, 38, 38, .09); }

/* ── Chip ringkasan ─────────────────────────────────────────────────────── */
#lapPanelRaporMandiri .rapmd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#lapPanelRaporMandiri .rapmd-tinjau > .rapmd-chips { margin-top: 0; }
#lapPanelRaporMandiri .rapmd-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#lapPanelRaporMandiri .rapmd-chip-netral { background: var(--app-muted); border-color: var(--app-border); color: var(--app-text); }
#lapPanelRaporMandiri .rapmd-chip-info { background: var(--rapmd-info-bg); border-color: var(--rapmd-info-garis); color: var(--rapmd-aksen-teks); }
#lapPanelRaporMandiri .rapmd-chip-peringatan { background: rgba(217, 119, 6, .13); border-color: rgba(217, 119, 6, .42); color: var(--rapmd-peringatan-teks); }
#lapPanelRaporMandiri .rapmd-chip-galat { background: rgba(220, 38, 38, .11); border-color: rgba(220, 38, 38, .42); color: var(--rapmd-galat-teks); }

/* ── Kartu tinjau ───────────────────────────────────────────────────────── */
#lapPanelRaporMandiri .rapmd-tinjau {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  animation: rapmd-masuk 260ms var(--rapmd-ease) both;
}
#lapPanelRaporMandiri .rapmd-tinjau.rapmd-tenang { animation: none; }   /* digambar ulang (Lihat semua): tanpa berkedip */
#lapPanelRaporMandiri .rapmd-tinjau-siap { border-color: var(--rapmd-info-garis); }
#lapPanelRaporMandiri .rapmd-tinjau-galat { border-color: rgba(220, 38, 38, .5); }
@keyframes rapmd-masuk {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes rapmd-pudar {
  from { opacity: 0; }
  to { opacity: 1; }
}

#lapPanelRaporMandiri .rapmd-tinjau-judul {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;   /* huruf lebih besar → jarak lebih rapat */
  color: var(--app-text);
}
#lapPanelRaporMandiri .rapmd-tinjau-file {
  margin-top: 3px;
  font-size: 11px;
  color: var(--app-dim);
  overflow-wrap: anywhere;
}

#lapPanelRaporMandiri .rapmd-blok {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 12px;
}
#lapPanelRaporMandiri .rapmd-blok-galat { background: rgba(220, 38, 38, .07); border-color: rgba(220, 38, 38, .38); }
#lapPanelRaporMandiri .rapmd-blok-peringatan { background: rgba(217, 119, 6, .08); border-color: rgba(217, 119, 6, .38); }
#lapPanelRaporMandiri .rapmd-blok-judul { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--app-text); }
#lapPanelRaporMandiri .rapmd-blok-galat .rapmd-blok-judul { color: var(--rapmd-galat-teks); }
#lapPanelRaporMandiri .rapmd-blok-peringatan .rapmd-blok-judul { color: var(--rapmd-peringatan-teks); }
#lapPanelRaporMandiri ul.rapmd-daftar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: disc;
  font-size: 12px;
  line-height: 1.55;
  color: var(--app-text);
  overflow-wrap: anywhere;
}
#lapPanelRaporMandiri .rapmd-daftar .rapmd-lebih-teks { list-style: none; margin-left: -18px; color: var(--app-dim); }
#lapPanelRaporMandiri .rapmd-catatan-kecil { font-size: 11px; line-height: 1.5; color: var(--app-dim); }

/* ── Tabel perubahan: Santri · Kolom · Lama → Baru ──────────────────────── */
#lapPanelRaporMandiri .rapmd-tabel-bungkus {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 10px;
}
#lapPanelRaporMandiri table.rapmd-tabel {
  width: 100% !important;          /* menimpa table { width:max-content !important } */
  min-width: 0 !important;
  border-collapse: collapse;
  table-layout: fixed !important;  /* menimpa table { table-layout:auto !important } di layar sempit;
                                       lebar kolom ditulis lewat <colgroup> karena lebar sel judul ditimpa aturan global */
  font-size: 12px;
  background: transparent;
}
#lapPanelRaporMandiri table.rapmd-tabel th {
  padding: 8px 10px;
  background: var(--app-thead);
  border-bottom: 1px solid var(--app-border);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-align: left !important;     /* aturan global tabel memusatkan isi sel */
  text-transform: uppercase;
  color: var(--app-dim);
}
#lapPanelRaporMandiri table.rapmd-tabel td {
  height: auto !important;         /* menimpa tbody td { height:38px } */
  padding: 7px 10px !important;
  border-top: 1px solid var(--app-border);
  vertical-align: top;
  text-align: left !important;
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: var(--app-text);
}
#lapPanelRaporMandiri table.rapmd-tabel tbody tr:first-child td { border-top: 0; }
#lapPanelRaporMandiri table.rapmd-tabel tbody tr:hover { background: var(--app-hover); }
#lapPanelRaporMandiri .rapmd-td-ubah { font-variant-numeric: tabular-nums; }
#lapPanelRaporMandiri .rapmd-lama { color: var(--app-dim); text-decoration: line-through; text-decoration-thickness: 1px; }
#lapPanelRaporMandiri .rapmd-panah { margin: 0 1px; color: var(--app-dim); }   /* spasi sungguhan di HTML memberi tempat patah kata */
#lapPanelRaporMandiri .rapmd-baru { font-weight: 800; color: var(--rapmd-aksen-teks); }

#lapPanelRaporMandiri .rapmd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#lapPanelRaporMandiri button.rapmd-lebih {
  align-self: flex-start;
  margin-top: 8px;
  padding: 7px 14px;
  border: 1px solid var(--app-border);
  background: var(--app-muted);
  color: var(--app-text);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s ease, transform 160ms var(--rapmd-ease);
}
#lapPanelRaporMandiri button.rapmd-lebih:hover { background: var(--app-chip); }
#lapPanelRaporMandiri button.rapmd-lebih:focus-visible,
#lapPanelRaporMandiri button.rapmd-hapus:focus-visible { outline: 2px solid var(--app-blue); outline-offset: 2px; }

#lapPanelRaporMandiri .rapmd-aksi { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }

/* ── Layar sempit: satu kolom, sasaran sentuh ≥ 44px ────────────────────── */
@media (max-width: 700px) {
  #lapPanelRaporMandiri .rapmd-sumber { flex-direction: column; }
  #lapPanelRaporMandiri .rapmd-tinjau { padding: 12px; gap: 10px; }
  #lapPanelRaporMandiri table.rapmd-tabel { font-size: 11.5px; }
  #lapPanelRaporMandiri table.rapmd-tabel td { padding: 6px 8px !important; }
  #lapPanelRaporMandiri .laporan-btn,
  #lapPanelRaporMandiri button.rapmd-hapus,
  #lapPanelRaporMandiri button.rapmd-lebih { min-height: 44px; }
  #lapPanelRaporMandiri .rapmd-aksi .laporan-btn { flex: 1 1 140px; justify-content: center; }
}

/* ── Preferensi pengguna ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Tanpa geser dan skala: cukup memudar. */
  #lapPanelRaporMandiri .rapmd-tinjau { animation: rapmd-pudar 160ms ease both; }
  #lapPanelRaporMandiri .rapmd-tinjau.rapmd-tenang { animation: none; }
  #lapPanelRaporMandiri .laporan-btn:active:not(:disabled),
  #lapPanelRaporMandiri button.rapmd-hapus:active,
  #lapPanelRaporMandiri button.rapmd-lebih:active { transform: none; }
}
@media (prefers-contrast: more) {
  #lapPanelRaporMandiri .rapmd-chip { border-color: currentColor; }
  #lapPanelRaporMandiri .rapmd-sumber,
  #lapPanelRaporMandiri .rapmd-tinjau,
  #lapPanelRaporMandiri .rapmd-blok { border-width: 2px; }
}

/* ── Cetak / PDF: hanya #rapmdResult ────────────────────────────────────────
   Salinan pola Rapor Semester (main.css, body.rapse-printing) yang dialihkan ke
   panel dan hasil Rapor Mandiri. Selain rapor, semuanya display:none — bukan
   sekadar visibility:hidden — supaya tidak lahir halaman kosong di ujung. */
@media print {
  body.rapmd-printing > *:not(#appShell) { display: none !important; }
  body.rapmd-printing #appShell > *:not(#laporanView) { display: none !important; }
  body.rapmd-printing #laporanView > *:not(#lapPanelRaporMandiri) { display: none !important; }
  body.rapmd-printing #lapPanelRaporMandiri > *:not(#rapmdResult) { display: none !important; }

  /* Kanvas cetak mengambil latar dari <html>; html/body yang dikunci setinggi
     layar (overflow tersendiri) akan memotong rapor sebatas satu layar. */
  html.rapmd-printing,
  body.rapmd-printing,
  body.rapmd-printing #appShell {
    background: #fff !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* @page bermargin nol (rapmdPrint): seluruh induk dinolkan, jadi sudut kiri-atas
     dokumen tepat di sudut kertas dan padding .rapse-doc menjadi margin halaman. */
  body.rapmd-printing,
  body.rapmd-printing #appShell,
  body.rapmd-printing #laporanView,
  body.rapmd-printing #lapPanelRaporMandiri,
  body.rapmd-printing #rapmdResult {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    max-width: none !important;
    transform: none !important;
    background: #fff !important;
  }

  body.rapmd-printing .rapse-preview {
    display: block;
    gap: 0;
    overflow: visible;
    padding: 0;
  }

  /* Tinggi lembar dilepas saat cetak: kotak setinggi tepat satu halaman dengan
     margin nol mudah melahirkan halaman kedua yang kosong karena pembulatan
     piksel. Isi tetap menempel ke atas; watermark memakai koordinat cm mutlak. */
  body.rapmd-printing .rapse-doc {
    height: auto !important;
    min-height: 0;
    padding-bottom: 0;
    overflow: visible;
    border: none;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  body.rapmd-printing .rapse-doc:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  body.rapmd-printing .rapse-doc .rapse-wm,
  body.rapmd-printing .rapse-doc .rapse-t td.rapse-grid {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Satu baris mapel tidak boleh terbelah kalau isinya melebihi satu halaman. */
  body.rapmd-printing .rapse-doc tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}