/* Raport Indeks Prestasi Santri — tema Hijau Toska (kartu kaca) */
* { box-sizing: border-box; }
/* Atribut `hidden` WAJIB selalu menyembunyikan elemen — tanpa ini, elemen ber-kelas `display:<apa pun>`
   (mis. `.btn { display:inline-block }`) tetap TAMPIL walau `hidden` dipasang. Pelajaran yang sama
   sudah dicatat di aplikasi absensi; di raport baru ditambahkan 27 Sep 2026 (ditemukan saat menambah
   tombol ganti kamera depan/belakang yang ber-`hidden`). */
[hidden] { display: none !important; }
:root {
  --toska: #DC2626;
  --toska-terang: #F87171;
  --ink: #450A0A;
  --muted: #8A5555;
  --line: rgba(220, 38, 38, .18);
  --glass: rgba(255, 255, 255, .66);
}
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #FEF2F2;
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
}
.bg { position: fixed; inset: 0; overflow: hidden; z-index: -1; }
.bg .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.b1 { width: 520px; height: 520px; background: radial-gradient(circle, #FCA5A5, transparent 70%); top: -140px; left: -100px; }
.b2 { width: 460px; height: 460px; background: radial-gradient(circle, #F87171, transparent 70%); top: 120px; right: -120px; }
.b3 { width: 420px; height: 420px; background: radial-gradient(circle, #FECACA, transparent 70%); bottom: -160px; left: 35%; }
a { color: var(--toska); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- tata letak: menu samping + isi ---------- */
.tata-letak { display: flex; align-items: flex-start; gap: 0; min-height: 100vh; }
.utama { flex: 1 1 auto; min-width: 0; }

/* Menu samping (layar lebar) — warna lebih tua */
.menu-samping {
  position: sticky; top: 0; align-self: flex-start;
  width: 246px; flex: 0 0 246px;
  height: 100vh; max-height: 100vh; display: flex; flex-direction: column;
  /* PENTING (permintaan user 25 Sep 2026): kepala menu (ikon + nama lembaga) dan kaki menu harus
     TETAP di tempatnya saat daftar menu digeser. Karena itu panel TIDAK ikut menggeser isinya —
     hanya `.nav` (daftar menu) yang bisa digeser: lihat aturan .menu-samping > .nav di bawah. */
  overflow: hidden;
  padding: 18px 14px 14px; margin: 0;
  background: linear-gradient(180deg, #991B1B 0%, #7F1D1D 55%, #5A1010 100%);
  border-right: 1px solid rgba(255,255,255,.12);
  box-shadow: 6px 0 34px rgba(90,16,16, .28);
  z-index: 25;
  color: rgba(255,255,255,.9);
}

/* PENGAMAN layar lebar: panel menu harus selalu terlihat di posisinya (di samping),
   apa pun isi CSS lain yang mungkin masih tersimpan di cache browser pengguna. */
@media screen and (min-width: 901px) {
  /* Selector sengaja dibuat lebih spesifik (html body .tata-letak > aside.menu-samping) supaya
     tetap menang walaupun ada CSS lain/tersimpan di cache yang memakai !important. */
  html body .tata-letak > aside.menu-samping {
    display: flex !important;
    transform: none !important;
    left: auto !important; right: auto !important;
    position: sticky !important; top: 0 !important;
    visibility: visible !important; opacity: 1 !important;
    height: 100vh !important; max-height: 100vh !important;
    overflow: hidden !important;            /* kepala menu tidak ikut bergeser */
  }
  /* Hanya daftar menu yang digeser; kepala menu (logo + nama lembaga) & kaki menu tetap diam. */
  html body .tata-letak > aside.menu-samping > nav.nav {
    flex: 1 1 auto !important; min-height: 0 !important;
    overflow-y: auto !important; overflow-x: hidden !important;
  }
  html body .tata-letak > aside.menu-samping > .menu-brand,
  html body .tata-letak > aside.menu-samping > .menu-kepala,
  html body .tata-letak > aside.menu-samping > .menu-kaki {
    flex: 0 0 auto !important; position: static !important;
  }
  html body .tombol-menu, html body .selubung { display: none !important; }
}

/* Kepala menu: ikon + nama lembaga + nama aplikasi */
.menu-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-width: 0; }
.menu-logo {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 16px rgba(69,10,10, .28);
}
.menu-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.menu-teks { min-width: 0; }
.menu-teks strong {
  display: block; font-size: 13.5px; line-height: 1.25; color: #fff;
  text-transform: uppercase; letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.menu-teks small { display: block; font-size: 11px; line-height: 1.3; color: rgba(255,255,255,.72); margin-top: 2px; }
.menu-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.menu-judul {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
/* Daftar menu = satu-satunya bagian panel yang digeser (kepala & kaki menu tetap diam).
   `min-height: 0` wajib supaya flex item ini benar-benar bisa menyusut dan menggeser isinya. */
.nav {
  display: flex; flex-direction: column; gap: 4px; margin: 0;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.menu-brand, .menu-kepala, .menu-kaki { flex: 0 0 auto; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 11px; font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.86); border: 1px solid transparent;
}
.nav a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.nav a.on {
  background: linear-gradient(135deg, #F87171, #F87171); color: #450A0A; font-weight: 600;
  box-shadow: 0 8px 18px rgba(69,10,10, .3);
}
/* Ikon menu: garis (outline) seragam, senada tema toska. Warna ikut `currentColor` dari SVG,
   jadi cukup diatur di sini — jangan menaruh warna di dalam berkas SVG-nya. */
.nav-ikon { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; color: #FCA5A5; }
.nav-ikon svg { width: 19px; height: 19px; display: block; }
.nav a:hover .nav-ikon { color: var(--toska-terang); }
.nav a.on .nav-ikon { color: #450A0A; }
/* Tulisan menu HURUF KAPITAL SEMUA (permintaan user 3 Okt 2026): "Rubah tulisan Menu menjadi huruf
   KAPITAL semua". Ditulis di sini (bukan diubah satu per satu di lib/layout.php) supaya label asli di
   kode tetap Title Case — lebih enak dibaca di kode, dokumen, dan uji — sementara tampilannya kapital.
   Karena huruf kapital lebih lebar, ukuran huruf menu sedikit dirapatkan di HP (lihat media query). */
.nav-teks { min-width: 0; text-transform: uppercase; letter-spacing: 0; }

/* ---------- Menu INDUK + sub-menu (permintaan user 24 Sep 2026) ----------
   "Murajaah Online" berisi Catat & Rekap Murajaah; "Raport" berisi Cetak Raport & Cover Raport.
   Tombol induk membuka/menutup sub-menu (lihat assets/app.js). Tanpa JavaScript, sub-menu
   tetap TERBUKA karena aturan penutup hanya berlaku pada html.nav-js (ditandai di layout.php). */
.nav-grup-bungkus { display: flex; flex-direction: column; gap: 2px; }
.nav-grup {
  position: relative;   /* agar panah bisa ditempatkan absolut (tidak mengurangi lebar label) */
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 10px 30px 10px 12px; border-radius: 11px; font: inherit; font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.86); background: transparent; border: 1px solid transparent; text-align: left;
}
.nav-grup:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav-grup .nav-teks { flex: 1 1 auto; }
.nav-grup.on { color: #fff; font-weight: 600; background: rgba(255,255,255,.14); }
.nav-grup.on .nav-ikon { color: var(--toska-terang); }
.nav-panah {
  position: absolute; right: 9px; top: 50%; margin-top: -8px;
  opacity: .8; transition: transform .18s ease;
}
.nav-grup-bungkus.terbuka .nav-panah { transform: rotate(180deg); }
.nav-anak { display: flex; flex-direction: column; gap: 2px; margin: 0 0 0 12px; padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.22); }
.nav-anak a { font-size: 12.5px; padding: 8px 10px; border-radius: 9px; gap: 8px; font-weight: 500; min-height: 36px; }
.nav-anak .nav-ikon { width: 18px; height: 18px; }
.nav-anak .nav-ikon svg { width: 17px; height: 17px; }
html.nav-js .nav-anak { display: none; }
html.nav-js .nav-grup-bungkus.terbuka .nav-anak { display: flex; }
.menu-kaki { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.menu-kaki-teks { font-size: 11.5px; color: rgba(255,255,255,.62); }

/* Tombol menu (HP) & selubung — disembunyikan di layar lebar */
.tombol-menu { display: none; }
.tombol-tutup-menu { display: none; }
.selubung { display: none; }

/* Bilah atas: nama lembaga + nama akun + tombol keluar (desktop & HP) */
.bilah-atas {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px; margin: 0;
  background: rgba(255,255,255,.80); backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 8px 26px rgba(185, 28, 28, .08);
}
.bilah-atas .brand { margin-right: auto; }
.who { align-items: center; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  flex: 0 0 auto;
  background: rgba(255,255,255,.9); color: #fff; font-weight: 700; font-size: 19px;
  box-shadow: 0 8px 18px rgba(220,38,38,.22);
  border: 1px solid rgba(220,38,38,.18);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark.besar { width: 54px; height: 54px; border-radius: 15px; }
.brand-text { min-width: 0; }
.brand-text strong { display: block; font-size: 15px; color: var(--ink); line-height: 1.25; }
.brand-text small { color: var(--muted); font-size: 11.5px; }
.who { display: flex; align-items: center; gap: 12px; }
.who-text { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.25; }
.who-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.who-peran { font-style: normal; font-size: 11.5px; color: var(--muted); }
/* Tombol keluar: ikon keluar (tanpa tulisan) di samping nama akun — permintaan user 25 Sep 2026. */
.btn-keluar {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 12px; background: rgba(255,255,255,.9); border: 1px solid var(--line);
  color: var(--toska); box-shadow: 0 4px 12px rgba(185,28,28,.10);
}
.btn-keluar:hover { background: linear-gradient(135deg, var(--toska), var(--toska-terang)); color: #fff; border-color: transparent; text-decoration: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Foto (avatar) akun ----------
   Foto bulat di samping nama akun; kalau belum ada foto, tampil INISIAL nama. Gambar diletakkan
   di atas inisial dan punya onerror="this.remove()" sehingga inisial otomatis terlihat kembali
   bila fotonya gagal dimuat (mis. sedang luring). */
.avatar {
  position: relative; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--toska), var(--toska-terang));
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em;
  border: 2px solid #fff; box-shadow: 0 6px 16px rgba(220,38,38,.22);
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar i { font-style: normal; }
.avatar-kecil { width: 22px; height: 22px; font-size: 9.5px; border-width: 1.5px; box-shadow: none; }
.avatar-besar { width: 84px; height: 84px; font-size: 27px; border-width: 3px; }

/* ---------- Lonceng notifikasi (bilah atas) — permintaan user 25 Sep 2026 ----------
   Tampil untuk SEMUA akun (admin, guru, santri, orang tua). Bulatan hijau = jumlah notifikasi
   yang belum dibaca. Panel diisi di server (tetap terlihat walau JavaScript gagal dimuat) dan
   disegarkan berkala oleh assets/app.js lewat notifikasi.php?json=1. */
.notif { position: relative; flex: 0 0 auto; }
.notif-tombol {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 12px; background: rgba(255,255,255,.9); border: 1px solid var(--line);
  color: var(--toska); box-shadow: 0 4px 12px rgba(185,28,28,.10); cursor: pointer;
}
.notif-tombol:hover { background: linear-gradient(135deg, var(--toska), var(--toska-terang)); color: #fff; border-color: transparent; }
.notif-bulat {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: #17a34a; color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(23,163,74,.38);
}
.notif-bulat.berdenyut { animation: notif-denyut 1s ease-in-out 3; }
@keyframes notif-denyut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.notif-panel {
  position: absolute; top: calc(100% + 12px); right: 0; width: 380px;
  max-width: min(380px, calc(100vw - 24px));
  background: rgba(255,255,255,.97); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.9); border-radius: 16px;
  box-shadow: 0 22px 50px rgba(185,28,28,.22); z-index: 60; overflow: hidden;
}
.notif-kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.notif-kepala strong { font-size: 14px; color: var(--ink); }
.notif-isi { max-height: 340px; overflow-y: auto; }
.notif-kosong { margin: 0; padding: 18px 15px; color: var(--muted); font-size: 13px; }
.notif-item { display: flex; gap: 10px; padding: 12px 15px; border-bottom: 1px solid rgba(220,38,38,.08); text-decoration: none; color: inherit; }
.notif-item:hover { background: rgba(220,38,38,.06); text-decoration: none; }
.notif-item.sudah { opacity: .6; }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--toska-terang); margin-top: 5px; flex: 0 0 auto; }
.notif-item.sudah .notif-dot { background: rgba(220,38,38,.25); }
.notif-teks { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-teks strong { font-size: 13px; color: var(--ink); }
.notif-teks em { font-style: normal; font-size: 11.5px; color: var(--toska); font-weight: 600; }
.notif-teks small { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.notif-kaki {
  display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 11px 15px; border-top: 1px solid var(--line); background: rgba(255,255,255,.6);
}

/* ---------- Halaman Notifikasi (daftar penuh) ---------- */
.notif-daftar-halaman { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.notif-baris {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72);
}
.notif-baris.belum { border-color: rgba(220,38,38,.45); background: rgba(248,113,113,.10); }
.notif-ikon {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
  background: rgba(220,38,38,.10); color: var(--toska);
}
.notif-ikon svg { width: 20px; height: 20px; }
.notif-baris-isi { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.notif-judul { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-judul strong { font-size: 14px; color: var(--ink); }
.notif-pesan { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.notif-waktu { font-size: 11.5px; color: var(--muted); }
.notif-aksi { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }

/* ---------- Baris "Tetap masuk" di halaman masuk ---------- */
.ingat-baris {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.7);
  font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.ingat-baris input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--toska); }
.ingat-baris span { line-height: 1.45; }
.ingat-baris .hint { margin-top: 3px; }

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 22px 40px; }
.wide { max-width: none; }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: 27px; margin: 0 0 6px; letter-spacing: -.4px; }
.page-head p { margin: 0; color: var(--muted); font-size: 14px; }
.foot { text-align: center; color: var(--muted); font-size: 12.5px; padding: 18px 10px 30px; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 20px; }
/* Penting: anak grid/flex harus boleh menyusut, kalau tidak tabel di dalamnya
   memaksa halaman melebar di layar HP (min-width: auto bawaan grid). */
.grid > *, .rp-flex > * { min-width: 0; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Empat kotak statistik seragam (lebar & tinggi sama). */
.grid-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-stat .card.stat {
  min-height: 116px; justify-content: center; align-items: flex-start;
  padding: 18px 16px; aspect-ratio: 1 / 0.72;
}
.card {
  background: var(--glass); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7); border-radius: 18px; padding: 22px;
  box-shadow: 0 14px 40px rgba(185,28,28,.10);
}
.card h2 { margin: 0 0 14px; font-size: 17px; }
.card h3 { margin: 0 0 10px; font-size: 15px; }
/* Nama akun di samping judul (khusus tampilan HP) */
.akun-hp { display: none; }

/* ---------- FOTO AKUN (permintaan user 9 Okt 2026) ----------
   Gaya dasar .avatar / .avatar-kecil / .avatar-besar sudah ada di bagian atas berkas ini
   (gambar diletakkan absolut di atas inisial + onerror="this.remove()" di avatar_akun()).
   Di sini hanya tambahan yang belum ada: gambar untuk avatar BESAR dan kartu unggah fotonya. */
.avatar-besar { position: relative; display: grid; place-items: center; overflow: hidden; }
.avatar-besar i { font-style: normal; grid-area: 1 / 1; }
.avatar-besar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-akun-baris { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.foto-akun-form { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.foto-akun-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.foto-akun-form label input[type=file] { margin-top: 6px; background: #fff; }
/* Tombol avatar pada daftar akun (admin memilih akun yang difoto) */
a.avatar-tautan { display: inline-flex; align-items: center; gap: 8px; }
a.avatar-tautan:hover { text-decoration: none; }
a.avatar-tautan:hover .avatar { outline: 3px solid rgba(220,38,38,.35); outline-offset: 2px; }

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .num { font-size: 30px; font-weight: 700; background: linear-gradient(135deg, var(--toska), var(--toska-terang)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .lbl { color: var(--muted); font-size: 13px; }
.section-title { margin: 34px 0 16px; font-size: 18px; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; border-radius: 14px; max-width: 100%; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.72); font-size: 14px; }
table.tbl th, table.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
table.tbl th { background: rgba(220,38,38,.10); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
table.tbl tbody tr:hover { background: rgba(255,255,255,.9); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl td.mid, table.tbl th.mid { text-align: center; }

/* ---------- forms ---------- */
label.fl { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,.9); font: inherit; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(220,38,38,.35); border-color: transparent; }
input.cell { padding: 6px 8px; text-align: center; min-width: 56px; }
/* Tempel daftar santri (tambah massal): huruf berspasi tetap supaya kolom Nomor Induk/Nama lurus */
textarea[name=daftar] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 13.5px; line-height: 1.75; min-height: 168px; resize: vertical;
}
code { background: rgba(220,38,38,.10); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }

/* ---------- Catat Murajaah: formulir dari rumah ---------- */.wajib { color: #e11d48; font-weight: 700; }
.pilih-santri-tetap {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 11px;
  background: rgba(220,38,38,.08); border: 1px solid var(--line);
}
.pilih-santri-tetap strong { font-size: 14.5px; }
.surah-info { float: right; color: var(--toska); font-weight: 600; text-transform: none; }
.pilihan-cepat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pilihan-cepat .hint { margin: 0; }
.chip {
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px;
  background: rgba(255,255,255,.9); color: var(--ink); border: 1px solid var(--line);
}
.chip:hover { border-color: var(--toska); color: var(--toska); }
.chip.on { background: linear-gradient(135deg, var(--toska), var(--toska-terang)); color: #fff; border-color: transparent; font-weight: 600; }
.kotak-ayat {
  background: rgba(220,38,38,.07); border: 1px solid rgba(220,38,38,.28);
  border-radius: 14px; padding: 14px 14px 16px;
}
.kotak-ayat-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kotak-ayat-judul {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #B91C1C;
}
.kotak-ayat-judul svg { color: var(--toska); }
.kotak-ayat .fields { gap: 12px; }
.fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; padding: 11px 18px; border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--toska), var(--toska-terang)); color: #fff; font: inherit; font-weight: 600;
  box-shadow: 0 10px 24px rgba(220,38,38,.28);
}
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn.ghost { background: rgba(255,255,255,.85); color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-weight: 500; }
.btn.danger { background: linear-gradient(135deg, #e11d48, #f43f5e); box-shadow: none; }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.flash { margin: 0 0 20px; padding: 13px 16px; border-radius: 13px; font-size: 14px; }
.flash.ok { background: rgba(16,185,129,.14); border: 1px solid rgba(16,185,129,.35); color: #065f46; }
.flash.err { background: rgba(244,63,94,.13); border: 1px solid rgba(244,63,94,.35); color: #9f1239; }
.hint { color: var(--muted); font-size: 12.5px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: rgba(220,38,38,.12); color: var(--toska); font-weight: 600; }
.pill.g { background: rgba(16,185,129,.16); color: #047857; }
.pill.r { background: rgba(244,63,94,.14); color: #be123c; }
.pill.y { background: rgba(245,158,11,.18); color: #b45309; }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 420px; }
.login-card .brand-mark { width: 60px; height: 60px; font-size: 24px; border-radius: 16px; }
/* KEPALA HALAMAN MASUK (permintaan user 9 Okt 2026): ikon DI SAMPING teks, teks dua baris —
   baris 1 nama lembaga (huruf besar), baris 2 "nama aplikasi (keterangan aplikasi)". */
.login-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; text-align: left; }
.login-head .brand-mark { flex: 0 0 auto; }
.login-teks { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.login-teks strong {
  font-size: 19px; line-height: 1.2; letter-spacing: .3px; color: var(--ink);
  text-transform: uppercase; overflow-wrap: anywhere;
}
.login-sub { font-size: 13px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 380px) {
  /* Layar sangat sempit: ikon & huruf sedikit dikecilkan supaya baris teks tetap rapi. */
  .login-card .brand-mark { width: 52px; height: 52px; border-radius: 14px; }
  .login-head { gap: 12px; }
  .login-teks strong { font-size: 16.5px; }
  .login-sub { font-size: 12px; }
}

/* ---------- cetak / PDF ---------- */
.raport-paper {
  background: #fff; color: #111; padding: 26px 30px; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(127,29,29,.16); margin-bottom: 28px;
  max-width: 210mm; margin-left: auto; margin-right: auto;
}
.raport-paper + .raport-paper { page-break-before: always; break-before: page; }
/* KOP SURAT: memenuhi LEBAR kertas dari tepi kiri ke tepi kanan (permintaan user 25 Sep 2026),
   tingginya mengikuti proporsi gambar (tidak diregangkan). Batas tinggi diberikan sebagai pengaman
   supaya gambar yang hampir persegi tidak memakan seluruh halaman. */
.kop {
  width: 100%; height: auto; max-height: 210px; object-fit: contain;
  display: block; margin: 0 auto 6px;
}
.rp-title { text-align: center; margin: 8px 0 2px; }
.rp-title h1 { font-size: 17px; margin: 0; letter-spacing: .5px; }
.rp-title h2 { font-size: 14px; margin: 2px 0 0; font-weight: 600; }
.rp-title h3 { font-size: 13px; margin: 2px 0 0; font-weight: 500; }
table.rp { width: 100%; border-collapse: collapse; font-size: 12px; }
table.rp th, table.rp td { border: 1px solid #333; padding: 3.5px 6px; vertical-align: middle; }
table.rp th { background: #FDE8E8; font-size: 11px; text-align: center; }
table.rp .ident td { border: 0; padding: 2px 0; font-size: 12.5px; }
table.rp td.c { text-align: center; }
table.rp td.r { text-align: right; }
table.rp tr.total td { font-weight: 700; background: #FEF2F2; }
table.rp .label { background: #FEF2F2; font-weight: 700; text-align: center; }
.rp-block { margin-top: 12px; }
.rp-flex { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.rp-flex > * { flex: 1; }
.rp-mini { font-size: 11.5px; }
.catatan { border: 1px solid #333; padding: 7px 9px; font-size: 11.5px; margin-top: 2px; }
.ttd { display: flex; justify-content: space-between; margin-top: 20px; font-size: 12px; }
.ttd .c { text-align: center; min-width: 190px; }
.ttd .nm { margin-top: 52px; font-weight: 700; text-decoration: underline; }
.ttd .lurus { border-top: 1px solid #333; margin-top: 46px; padding-top: 3px; }

/* ---------- TANDA TANGAN & STEMPEL UNGGAHAN (permintaan user 25 Sep 2026) ----------
   Kotak tanda tangan diletakkan di atas nama penanda tangan. Tingginya tetap 46 px dan
   margin bawahnya dibuat negatif supaya jarak ke nama (`.ttd .nm`) tidak bertambah —
   halaman cetak tetap muat 1 halaman A4 baik ketika tanda tangan sudah diunggah maupun belum.
   STEMPEL DICETAK DI ATAS TANDA TANGAN (permintaan user 25 Sep 2026): stempel diletakkan menumpuk
   di tengah tanda tangan — seperti stempel basah yang dibubuhkan menimpa tanda tangan.
   (Sebelumnya stempel ada di sisi kanan tanda tangan.) PNG latar transparan akan terlihat rapi
   baik di layar, hasil cetak, maupun berkas PDF karena PDF memakai soft-mask untuk transparansi. */
.ttd-cap { position: relative; height: 46px; margin: 2px auto 0; max-width: 200px; }
.ttd-cap .ttd-gambar {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  max-height: 46px; max-width: 150px; object-fit: contain;
}
.ttd-cap .ttd-stempel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  max-height: 62px; max-width: 62px; object-fit: contain; opacity: .9;
}
/* Stempel unggahan yang dipakai menimpa tanda tangan: cukup satu gambar saja. */
.ttd-cap.hanya-stempel .ttd-stempel { opacity: .95; }
/* Bila tanda tangan sudah diunggah, ruang kosong untuk tanda tangan tangan (margin atas nama)
   digantikan oleh gambarnya — supaya tinggi halaman cetak tidak bertambah sama sekali. */
.ttd .ttd-cap + .nm, .syahadah-mengesahkan .ttd-cap + .nm { margin-top: 3px !important; }
/* Di syahadah tanda tangannya dibuat lebih besar (kolomnya memang lega). */
.syahadah-mengesahkan .ttd-cap { height: 62px; max-width: 220px; }
.syahadah-mengesahkan .ttd-cap .ttd-gambar { max-height: 62px; max-width: 170px; }
.syahadah-mengesahkan .ttd-cap .ttd-stempel { max-height: 74px; max-width: 74px; }

/* Blok tanda tangan pada COVER RAPORT halaman 2 (permintaan user 25 Sep 2026):
   tanda tangan + stempel Mudir ditampilkan di atas nama Mudir, sama seperti halaman raport. */
.cover-ttd .ttd-cap { height: 15mm; max-height: 15mm; max-width: 46mm; margin: 0 auto; }
.cover-ttd .ttd-cap .ttd-gambar { max-height: 15mm; max-width: 40mm; }
.cover-ttd .ttd-cap .ttd-stempel { max-height: 19mm; max-width: 19mm; }
.cover-ttd .ttd-cap + .nm { margin-top: 2mm !important; }

.leger-tbl { font-size: 11px; }
.leger-tbl th, .leger-tbl td { padding: 4px 6px; white-space: nowrap; }

/* Halaman cetak: A4 persis (210 x 297 mm) dengan margin 12mm kiri-kanan & 10mm atas-bawah.
   Ukuran ini dipakai juga saat pengguna memilih "Simpan sebagai PDF" di dialog cetak. */
/* Margin cetak 1,5 cm di semua sisi supaya garis/tulisan tidak terpotong.
   Area tercetak: portrait 180x267 mm, mendatar 267x180 mm. */
@page { size: A4 portrait; margin: 15mm; }
/* Leger: tabelnya 26 kolom sehingga butuh kertas lebih lebar; margin 10 mm + tabel
   diskalakan (zoom) supaya TIDAK ada kolom yang terpotong. */
@page leger { size: A4 landscape; margin: 10mm; }

@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .bg, .topbar, .foot, .no-print, .banner-jaringan, .tombol-pasang,
  .menu-samping, .tombol-menu, .selubung, .bilah-atas { display: none !important; }
  /* PENTING untuk cetak: `body` & `.tata-letak` sama-sama memakai min-height: 100vh di layar.
     Pada kertas MENDATAR, 100vh dihitung dari tinggi halaman penuh (210mm) sedangkan area cetak
     hanya 190mm (margin 10mm), sehingga kelebihannya membuat browser menambah HALAMAN KOSONG
     di akhir dokumen (isinya benar, hanya ada 1 halaman kosong). Diukur: dengan min-height ini
     dinolkan, rekap nilai tasmi' mendatar menjadi tepat 1 halaman. */
  html body { min-height: 0 !important; }
  .tata-letak { display: block !important; min-height: 0 !important; }
  .utama { min-width: 0 !important; }
  .wrap { padding: 0 !important; max-width: none !important; margin: 0 !important; }
  .flash { display: none !important; }

  .raport-paper {
    box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
    margin: 0 !important; width: 100% !important; max-width: 100% !important;
    /* zoom tampilan layar (assets/raport.js) HARUS dimatikan saat dicetak supaya
       hasil PDF tetap A4 ukuran sebenarnya: 1 raport = 1 halaman. */
    zoom: 1 !important;
    page-break-inside: avoid; break-inside: avoid;
  }
  .rp-toolbar { display: none !important; }
  .raport-paper + .raport-paper { page-break-before: always; break-before: page; }
  .raport-paper.leger-paper { page: leger; page-break-inside: auto; break-inside: auto; }

  /* KOP: penuh lebar kertas (kiri-kanan) seperti kop surat pada umumnya. Tinggi mengikuti proporsi
     gambar aslinya; 170px = batas pengaman (16,8% tinggi area cetak) untuk gambar hampir persegi.
     Kop rasio 4,28:1 (milik lembaga) memakai tinggi 159px sehingga MEMENUHI lebar kertas 680px. */
  .kop { width: 100% !important; height: auto !important; max-height: 170px !important; margin-bottom: 2px !important; }
  .kop-tasmi { max-height: 170px !important; }
  .rp-title { margin: 5px 0 1px !important; }
  .rp-title h1 { font-size: 15.5px !important; letter-spacing: .6px; }
  .rp-title h2 { font-size: 13px !important; }
  .rp-title h3 { font-size: 12px !important; }

  table.rp { font-size: 10.6px !important; }
  /* Padding dipadatkan sedikit (2,9 → 2,4 px) supaya raport TETAP 1 halaman A4 setelah
     kop dibuat memenuhi lebar kertas. Diukur: hemat ±17 px. */
  table.rp th, table.rp td { padding: 2.4px 4.2px !important; }
  table.rp .ident td { padding: 2.2px 0 !important; font-size: 12px !important; }
  .rp-flex { margin-top: 8px !important; gap: 8px !important; }
  .rp-mini { font-size: 10.6px !important; }
  .ttd { margin-top: 8px !important; font-size: 11px !important; }
  .ttd .nm { margin-top: 44px !important; }

  /* Tabel tidak boleh terpotong saat dicetak */
  .tbl-wrap { overflow: visible !important; }

  /* Leger (A4 mendatar): tabel 26 kolom diskalakan agar seluruh kolom masuk kertas */
  .leger-paper .rp-title h1, .leger-paper h2 { font-size: 14px !important; }
  table.leger-tbl { font-size: 9.4px !important; zoom: 0.66; }
  table.leger-tbl th, table.leger-tbl td { padding: 3px 4px !important; white-space: nowrap; }
}

/* ---------- PWA: banner offline & tombol pasang ---------- */
.banner-jaringan {
  position: sticky; top: 0; z-index: 40; margin: 10px 14px 0;
  padding: 11px 16px; border-radius: 13px; font-size: 13.5px; line-height: 1.4;
  background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .45); color: #7c4a03;
}
.tombol-pasang {
  position: fixed; right: 14px; bottom: 14px; z-index: 45;
  padding: 11px 16px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 13.5px; color: #fff;
  background: linear-gradient(135deg, var(--toska), var(--toska-terang));
  box-shadow: 0 12px 26px rgba(220, 38, 38, .35);
}

/* ---------- Tampilan HP: menu jadi tombol ---------- */
@media screen and (max-width: 900px) {
  body { font-size: 14.5px; }
  .tata-letak { display: block; }

  /* Tombol menu (ikon) di bilah atas */
  .tombol-menu {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 42px; height: 42px; padding: 0;
    border-radius: 13px; border: 1px solid rgba(220,38,38,.22);
    background: rgba(255,255,255,.95); color: var(--toska);
    box-shadow: 0 6px 16px rgba(185, 28, 28, .12);
    cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .tombol-menu:active { transform: scale(.94); }
  .tombol-menu .ikon-menu { display: block; }
  .tombol-menu .ikon-menu path {
    fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
    transform-box: fill-box; transform-origin: center;
    transition: transform .26s ease, opacity .18s ease;
  }
  /* Saat menu terbuka: dua garis atas/bawah berputar membentuk tanda silang */
  .tombol-menu[aria-expanded="true"] {
    background: linear-gradient(135deg, var(--toska), var(--toska-terang));
    color: #fff; border-color: transparent;
    box-shadow: 0 8px 20px rgba(220,38,38,.34);
  }
  .tombol-menu[aria-expanded="true"] .ikon-menu .l1 { transform: translateY(5px) rotate(45deg); }
  .tombol-menu[aria-expanded="true"] .ikon-menu .l2 { opacity: 0; transform: scaleX(.4); }
  .tombol-menu[aria-expanded="true"] .ikon-menu .l3 { transform: translateY(-5px) rotate(-45deg); }

  /* Menu samping jadi panel geser — lebar SETENGAH layar HP */
  .menu-samping {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh;
    width: 50vw; max-width: 240px; flex: none;
    border-radius: 0 16px 16px 0;
    transform: translateX(-102%); transition: transform .26s ease;
    z-index: 70; padding: 14px 10px 12px; overflow: hidden;
    background: linear-gradient(180deg, #991B1B 0%, #7F1D1D 55%, #5A1010 100%);
    border-right: 1px solid rgba(255,255,255,.12);
  }
  body.menu-terbuka .menu-samping { transform: translateX(0); box-shadow: 18px 0 45px rgba(90,16,16, .28); }
  body.menu-terbuka { overflow: hidden; }
  .tombol-tutup-menu {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; padding: 0; border-radius: 11px; border: 1px solid var(--line);
    background: #fff; color: var(--muted); cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .tombol-tutup-menu:active { transform: scale(.94); }
  .tombol-tutup-menu svg { display: block; }
  .tombol-tutup-menu svg path {
    fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  }
  .tombol-tutup-menu:hover { background: var(--toska); color: #fff; border-color: transparent; }
  .selubung {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(69,10,10, .38); backdrop-filter: blur(2px);
  }
  .selubung[hidden] { display: none; }
  .menu-brand { gap: 8px; margin-bottom: 10px; }
  .menu-logo { width: 34px; height: 34px; border-radius: 10px; }
  .menu-teks strong { font-size: 12px; }
  .menu-teks small { font-size: 10px; }
  .menu-kepala { margin-bottom: 8px; }
  .menu-judul { font-size: 11px; letter-spacing: .06em; }
  .tombol-tutup-menu {
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff;
  }
  .tombol-tutup-menu:hover { background: #fff; color: #7F1D1D; }
  /* Tautan menu: padding & huruf disesuaikan supaya label panjang tetap muat tanpa terpotong.
     Ukuran huruf diturunkan dari 13px → 12px pada 3 Okt 2026 karena label menu kini HURUF KAPITAL
     (kapital ±8% lebih lebar). Angka 12px dipilih dari pengukuran: label terpanjang "REKAP PEMBAYARAN"
     = 113px sedangkan ruang tersedia 113px pada layar 360px (panel 180px). JANGAN dinaikkan lagi
     tanpa mengukur — label akan terbungkus dua baris. */
  .nav a { padding: 11px 6px; font-size: 12px; border-radius: 9px; line-height: 1.25; gap: 7px; }
  /* padding kanan = ruang panah (lihat .nav-panah: lebar 13px + right 7px = 20px) */
  .nav-grup { padding: 11px 20px 11px 6px; font-size: 12px; border-radius: 9px; line-height: 1.25; gap: 6px; }
  .nav-grup .nav-ikon { width: 17px; height: 17px; }
  .nav-grup .nav-ikon svg { width: 16px; height: 16px; }
  /* Sub-menu: huruf & lekukan dikecilkan supaya label panjang tetap muat dalam panel
     separuh layar HP (mis. "CETAK NILAI TASMI") tanpa terbungkus atau terpotong. */
  .nav-anak { margin-left: 5px; padding-left: 5px; }
  .nav-anak a { font-size: 11.5px; padding: 9px 6px; gap: 5px; min-height: 36px; }
  .nav-anak .nav-ikon { width: 16px; height: 16px; }
  .nav-anak .nav-ikon svg { width: 15px; height: 15px; }
  .nav-panah { width: 13px; height: 13px; margin-top: -7px; right: 7px; }
  .nav-ikon { width: 18px; height: 18px; }
  .nav-ikon svg { width: 17px; height: 17px; }
  .menu-kaki { padding-top: 10px; }
  .menu-kaki-teks { font-size: 10.5px; line-height: 1.3; display: block; }

  /* Bilah atas versi HP */
  .bilah-atas { padding: 10px 12px; gap: 10px; }
  .bilah-atas .brand { gap: 9px; }
  .bilah-atas .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .bilah-atas .brand-text strong { font-size: 13.5px; }
  .bilah-atas .brand-text small { display: none; }
  /* Foto akun tetap tampil di bilah atas; nama & peran dipindah ke samping judul halaman. */
  .bilah-atas .who-name { font-size: 12px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bilah-atas .who { gap: 9px; }
  .bilah-atas .who-name { display: none; }
  .bilah-atas .who-peran { display: none; }
  .bilah-atas .avatar { width: 34px; height: 34px; font-size: 12px; }
  .bilah-atas .btn-keluar { width: 34px; height: 34px; border-radius: 11px; }
  /* Lonceng & panel notifikasi versi HP: panel dipasang terhadap BILAH ATAS (bukan terhadap
     loncengnya) supaya selebar layar dan tidak keluar layar walau lonceng ada di tengah bar. */
  .notif { position: static; }
  .notif-tombol { width: 34px; height: 34px; border-radius: 11px; }
  .notif-panel { position: absolute; top: 100%; left: 8px; right: 8px; width: auto; max-width: none; }
  .notif-isi { max-height: 60vh; }
  .notif-baris { flex-wrap: wrap; }
  .notif-aksi { margin-left: 52px; width: 100%; }
  .menu-kepala { margin-bottom: 10px; }
  .akun-hp {
    display: inline-flex; align-items: center; gap: 8px;
    float: right; margin: 2px 0 8px 10px; max-width: 52%;
    padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,.9); border: 1px solid var(--line); color: var(--ink);
    box-shadow: 0 4px 12px rgba(185,28,28,.08);
  }
  .akun-hp em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--muted); }
  .page-head::after { content: ''; display: block; clear: both; }

  /* Empat kotak statistik: 2x2 seragam di HP */
  .grid-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid-stat .card.stat { min-height: 104px; aspect-ratio: auto; padding: 14px 12px; }
  .grid-stat .stat .num { font-size: 23px; }
  .grid-stat .stat .lbl { font-size: 12px; }

  /* Isi halaman */
  .wrap { padding: 18px 12px 34px; }
  .banner-jaringan { margin: 12px 12px 0; }
  .page-head { margin-bottom: 16px; }
  .page-head h1 { font-size: 21px; }
  .page-head p { font-size: 13px; }
  .card { padding: 16px; border-radius: 15px; }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; gap: 14px; }
  .stat .num { font-size: 25px; }
  .section-title { margin: 22px 0 12px; font-size: 16px; }
  .fields { grid-template-columns: 1fr; gap: 12px; }
  .btn { padding: 12px 16px; }
  .row-actions .btn { flex: 1 1 auto; text-align: center; }
  .tbl-wrap { margin: 0 -4px; }
  table.tbl { font-size: 13px; }
  table.tbl th, table.tbl td { padding: 9px 10px; }
  input.cell { min-width: 52px; padding: 8px 6px; font-size: 15px; }
  input[type=text], input[type=password], input[type=number], select, textarea { font-size: 16px; }
  .flash { font-size: 13.5px; }
  .login-wrap { padding: 16px; }
  .login-card { max-width: 100%; }
  .raport-paper { min-width: 700px; }   /* raport A4: bisa digeser kiri-kanan, tidak dipaksa mengecil */
  .wrap:has(.raport-paper) { overflow-x: auto; }
  .tombol-pasang { right: 12px; bottom: 12px; font-size: 13px; padding: 10px 14px; }
}

@media screen and (max-width: 420px) {
  .brand-text strong { font-size: 14.5px; }
  .card .stat .num { font-size: 23px; }
  .ttd { flex-direction: column; gap: 26px; align-items: center; }
}

/* Layar sangat sempit (≤340px): rapatkan foto akun & ikon keluar supaya nama lembaga tetap
   SATU BARIS dan bilah atas tidak jadi lebih tinggi setelah foto akun ditambahkan
   (diukur: 72px → 59px pada layar 320px). */
@media screen and (max-width: 340px) {
  .bilah-atas { gap: 7px; padding: 8px 10px; }
  .bilah-atas .who { gap: 6px; }
  .bilah-atas .avatar { width: 28px; height: 28px; font-size: 10.5px; }
  .bilah-atas .btn-keluar { width: 28px; height: 28px; border-radius: 9px; }
  .notif-tombol { width: 28px; height: 28px; border-radius: 9px; }
  .notif-bulat { min-width: 17px; height: 17px; font-size: 10px; top: -4px; right: -4px; }
}

/* Aman saat dipasang (standalone) di HP: beri ruang bawah */
@media (display-mode: standalone) {
  .wrap { padding-bottom: 46px; }
}

/* ---------- Cover Raport (A4) ---------- */
.cover-paper {
  background: #fff; color: #111; width: 210mm; max-width: 100%;
  min-height: 297mm; margin: 0 auto 28px; padding: 14mm 16mm;
  border-radius: 12px; box-shadow: 0 18px 50px rgba(127,29,29,.16);
  display: flex; flex-direction: column;
}
/* Halaman sampul: judul berada di tengah halaman */
.cover-sampul .cover-judul { margin-top: 20mm; }
.cover-judul-2 { margin: 0 0 9mm !important; }
.cover-paper + .cover-paper { page-break-before: always; break-before: page; }
.cover-atas { display: flex; justify-content: flex-end; margin-bottom: 3mm; }
.cover-raport {
  border: 1px solid #222; border-radius: 4px; text-align: center; min-width: 36mm; padding: 2px 8px;
  margin-left: auto;   /* menempel di pojok kanan atas */
}
.cover-raport span {
  display: block; font-size: 8.5pt; letter-spacing: .06em; border-bottom: 1px solid #222; padding-bottom: 1px;
}
.cover-raport strong { display: block; font-size: 12pt; padding-top: 2px; font-weight: 700; }

/* Logo di cover: besar di tengah halaman 1, kecil di atas judul halaman 2 */
.cover-logo-besar {
  /* Mengisi ruang antara judul dan bingkai nama, lalu logo diletakkan tepat di tengahnya
     sehingga posisinya berada di tengah halaman A4 (bukan menempel di bawah judul). */
  flex: 1 1 auto; display: flex; justify-content: center; align-items: center;
  margin: 4mm 0; min-height: 40mm;
}
.cover-logo-besar img { width: auto; max-width: 84%; object-fit: contain; }
.cover-logo-kecil { display: flex; justify-content: center; align-items: center; margin-bottom: 4mm; }
.cover-logo-kecil img { width: auto; max-width: 60%; object-fit: contain; }
.cover-judul { text-align: center; margin: 6mm 0 10mm; }
.cover-judul h1 { font-size: 17pt; margin: 0 0 3px; letter-spacing: .06em; }
.cover-judul h2 { font-size: 11.5pt; margin: 0 0 2px; font-weight: 600; letter-spacing: .04em; }
.cover-judul h3 { font-size: 13pt; margin: 0; font-weight: 700; letter-spacing: .05em; }
/* Judul halaman sampul lebih besar (proporsional) */
.cover-sampul .cover-judul h1 { font-size: 22pt; }
.cover-sampul .cover-judul h2 { font-size: 13pt; }
.cover-sampul .cover-judul h3 { font-size: 15.5pt; }
.cover-nama {
  margin: auto auto 6mm;                 /* didorong ke bagian bawah halaman 1 */
  border: 1.5px solid #222; border-radius: 6px; padding: 6mm 8mm; width: 100%;
  background: #FFFAFA;
}
.cover-nama table { width: 100%; font-size: 13pt; }
.cover-nama td { padding: 4px 0; vertical-align: top; }
.cover-nama .lbl { width: 44mm; letter-spacing: .03em; }
.cover-nama .titik { width: 5mm; }
.cover-nama .isi { font-weight: 700; border-bottom: 1px solid #444; text-transform: uppercase; }
.cover-lembaga h4, .cover-pribadi h4 {
  font-size: 11.5pt; margin: 0 0 3mm; padding: 2px 8px; background: #FDE8E8;
  border-left: 3px solid var(--toska); letter-spacing: .04em;
}
.cover-lembaga table { width: 100%; font-size: 11pt; margin-bottom: 9mm; }
.cover-lembaga td { padding: 2.5px 0; vertical-align: top; }
.cover-lembaga .lbl { width: 48mm; }
.cover-lembaga .titik { width: 5mm; }
.cover-pribadi table { width: 100%; font-size: 11pt; }
.cover-pribadi td { padding: 2.6px 0; vertical-align: top; }
.cover-pribadi .lbl2 { width: 62mm; }
.cover-pribadi .titik { width: 5mm; }
.cover-pribadi .isi2 { border-bottom: 1px dotted #888; }
.cover-pribadi tr.grup td { font-weight: 700; padding-top: 5px; }
.cover-ttd { display: flex; justify-content: space-between; margin-top: 10mm; font-size: 11pt; }
.cover-ttd .kanan { text-align: center; min-width: 70mm; }
.cover-ttd .nm { margin-top: 22mm; font-weight: 700; text-decoration: underline; }

/* Blok identitas di form santri */
.blok-identitas { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 12px; }
.blok-identitas > summary {
  cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--toska); padding: 4px 0;
}
.blok-identitas[open] > summary { margin-bottom: 4px; }

@media print {
  .cover-paper {
    width: 100%; max-width: 100%; min-height: 0; margin: 0; padding: 0;
    box-shadow: none !important; border-radius: 0 !important;
    page-break-inside: avoid; break-inside: avoid;
  }
  /* Halaman sampul: judul di atas, logo besar di tengah, nama berbingkai di DASAR halaman.
     min-height = tinggi area tercetak (297mm - 2x15mm = 267mm) dikurangi sedikit agar
     `margin-top:auto` pada bingkai nama mendorongnya ke bawah tanpa melewati halaman. */
  .cover-sampul { display: flex; flex-direction: column; min-height: 263mm !important; }
  .cover-sampul .cover-logo-besar { min-height: 0 !important; }
  .cover-sampul .cover-judul { margin: 5mm 0 6mm !important; }
  /* Judul halaman pertama diperbesar, tetap proporsional terhadap lebar kertas */
  .cover-sampul .cover-judul h1 { font-size: 20pt !important; letter-spacing: .05em !important; }
  .cover-sampul .cover-judul h2 { font-size: 12pt !important; }
  .cover-sampul .cover-judul h3 { font-size: 14.5pt !important; }
  .cover-sampul .cover-logo-besar { margin: 3mm 0 !important; }
  .cover-sampul .cover-logo-besar img { max-width: 78% !important; }
  .cover-sampul .cover-nama { margin-top: auto !important; margin-bottom: 6mm !important; padding: 6mm 8mm !important; }
  .cover-sampul .cover-nama table { font-size: 12.5pt !important; }
  .cover-logo-kecil { margin-bottom: 3mm !important; }
  .cover-logo-kecil img { max-width: 45% !important; }

  /* Halaman biodata: dipadatkan supaya pas satu halaman A4 */
  .cover-judul, .cover-judul-2 { margin: 0 0 3.5mm !important; }
  .cover-judul h1 { font-size: 12.5pt !important; margin-bottom: 1px !important; }
  .cover-judul h2 { font-size: 9pt !important; }
  .cover-judul h3 { font-size: 10pt !important; }
  .cover-judul-2 h1 { font-size: 11.5pt !important; }
  .cover-judul-2 h2 { font-size: 8.5pt !important; }
  .cover-judul-2 h3 { font-size: 9.5pt !important; }
  .cover-lembaga table, .cover-pribadi table { line-height: 1.25 !important; }
  .cover-lembaga h4, .cover-pribadi h4 { font-size: 9pt !important; margin-bottom: 1mm !important; padding: 1px 5px !important; }
  .cover-lembaga table { font-size: 8.2pt !important; margin-bottom: 2mm !important; }
  .cover-lembaga td { padding: 0.4px 0 !important; }
  .cover-lembaga .lbl { width: 40mm !important; }
  .cover-pribadi table { font-size: 8.2pt !important; }
  .cover-pribadi td { padding: 0.4px 0 !important; }
  .cover-pribadi .lbl2 { width: 55mm !important; }
  .cover-pribadi tr.grup td { padding-top: 1px !important; }
  .cover-ttd { margin-top: 1.5mm !important; font-size: 8.6pt !important; }
  .cover-ttd .nm { margin-top: 8mm !important; }
  .cover-atas { margin-bottom: 2mm !important; }
  .cover-raport span, .cover-urut span { font-size: 7.5pt !important; }
  .cover-raport strong, .cover-urut strong { font-size: 10pt !important; }
}

@media screen and (max-width: 900px) {
  .cover-paper { min-width: 0; padding: 16px 14px; width: 100%; }
  .cover-pribadi .lbl2 { width: 42%; }
  .cover-lembaga .lbl { width: 38%; }
}

/* ---------- RAPORT: tampilan satu halaman layar (permintaan user) ----------
   Kertas A4 dirender tepat 210 mm, lalu dikecilkan dengan `zoom` oleh assets/raport.js
   supaya seluruh halaman terlihat sekaligus (tanpa geser kiri-kanan) di komputer maupun HP.
   Saat dicetak, zoom ini dimatikan (lihat @media print) sehingga hasil tetap A4 asli. */
.rp-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.rp-toolbar-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.rp-toolbar .chip.on { background: linear-gradient(135deg, var(--toska), var(--toska-terang)); color: #fff; border-color: transparent; font-weight: 600; }
/* Kertas selalu dirender tepat A4 (210 mm) supaya proporsinya sama dengan hasil cetak;
   besar-kecilnya di layar diatur oleh `zoom` (assets/raport.js).
   Berlaku untuk raport/leger, lembar nilai tasmi', dan syahadah. */
body.rp-kertas .raport-paper,
body.rp-kertas .syahadah-paper { width: 210mm; max-width: none; min-width: 0; }
/* Saat tampilan dibuat muat layar: jangan sampai muncul geser kiri-kanan. */
body.rp-sempit .wrap:has(.raport-paper),
body.rp-sempit .wrap:has(.syahadah-paper) { overflow-x: hidden; }
@media screen and (max-width: 900px) {
  /* Di HP: kertas tidak lagi dipaksa 700 px; tingginya mengikuti mode yang dipilih. */
  body.rp-kertas .raport-paper,
  body.rp-kertas .syahadah-paper { min-width: 0; }
}

/* ---------- KARTU INFAQ (permintaan user 24 Sep 2026) ----------
   Kartu dicetak/ditampilkan meniru kartu infaq lembaga: bingkai tebal, kepala tabel hijau toska,
   tiga bagian disusun berurutan ke bawah (syahriyah bulanan, kegiatan, lain-lain).
   Saat dicetak, kolom isian tampil sebagai garis/kotak kosong supaya tetap bisa ditulis tangan. */
.infaq-kartu {
  background: #fff; color: #111; border: 2px solid #111; border-radius: 8px;
  padding: 16px 18px 18px; margin-bottom: 24px; box-shadow: 0 10px 26px rgba(127,29,29,.12);
  page-break-inside: avoid; break-inside: avoid;
}
/* ---------- CARA PEMBAYARAN (nomor rekening + QRIS) — permintaan user 27 Sep 2026 ---------- */
.infaq-bayar-kartu { page-break-inside: avoid; break-inside: avoid; }
.infaq-bayar-isi { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.infaq-bayar-judul { font-weight: 700; font-size: 13px; letter-spacing: .3px; color: var(--toska);
  text-transform: uppercase; margin-bottom: 8px; }
ul.infaq-bayar-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.infaq-bayar-daftar li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.infaq-bayar-nomor { font-weight: 700; font-size: 15px; letter-spacing: .3px; word-break: break-word; }
.infaq-salin { flex: 0 0 auto; margin-left: auto; }
.infaq-salin.salin-selesai { background: var(--toska); color: #fff; border-color: transparent; }
.infaq-bayar-qris { text-align: center; }
.infaq-bayar-qris img { width: 100%; max-width: 260px; height: auto; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; padding: 8px; }
@media screen and (max-width: 900px) {
  .infaq-bayar-isi { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .infaq-bayar-qris img { max-width: 230px; }
}
@media print {
  /* Nomor rekening & QRIS ikut tercetak (wali murid sering membawa kartu ini untuk membayar),
     tetapi DIPADATKAN supaya tidak menghabiskan kertas: QRIS diperkecil & jarak dirapatkan. */
  .infaq-bayar-kartu { padding: 10px 12px !important; margin-bottom: 12px !important; }
  .infaq-bayar-kartu h2 { font-size: 14px; margin-bottom: 4px; }
  .infaq-bayar-isi { gap: 12px !important; }
  .infaq-bayar-judul { font-size: 11px; margin-bottom: 4px; }
  ul.infaq-bayar-daftar { gap: 5px; }
  /* Di kertas, nomor rekening ditulis BERDERET satu baris (bukan kartu per nomor) supaya kartu
     pembayaran hanya memakan sedikit ruang dan Kartu Infaq tetap 3 halaman A4. */
  ul.infaq-bayar-daftar { display: block; gap: 0; }
  ul.infaq-bayar-daftar li { display: inline; border: 0 !important; padding: 0 !important;
    background: transparent !important; }
  ul.infaq-bayar-daftar li + li::before { content: ' · '; }
  .infaq-bayar-nomor { font-size: 11.5px; line-height: 1.3; }
  /* Tinggi QRIS dibatasi (bukan hanya lebarnya) karena gambar QRIS umumnya portrait — dengan
     pembatasan lebar saja tingginya tetap ~145 px sehingga kartu jadi tinggi. 96 px ≈ 25 mm,
     masih bisa dipindai dari kertas maupun layar. */
  .infaq-bayar-qris img { max-width: 130px !important; max-height: 96px !important; width: auto !important; padding: 1px; }
  .infaq-bayar-isi { align-items: center; }
  .infaq-bayar-kartu h2 { margin: 0 0 4px !important; }
  .infaq-bayar-rek, .infaq-bayar-qris { text-align: left; }
  .infaq-bayar-kartu .infaq-salin { display: none !important; }
  /* Petunjuk/penjelasan TIDAK perlu di kertas — dihilangkan supaya kartu tetap ringkas dan
     Kartu Infaq tetap tercetak 3 halaman A4 (diukur; sebelumnya menambah satu halaman). */
  .infaq-bayar-kartu .hint { display: none !important; }
}
.infaq-judul { text-align: center; font-weight: 800; font-size: 17px; letter-spacing: .4px; margin: 0 0 6px; }
/* Pembungkus tabel kartu: di layar sempit isinya bisa digeser kiri-kanan (halaman tidak melebar). */
.infaq-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 4px; }
table.infaq-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.infaq-tbl th, table.infaq-tbl td { border: 2px solid #111; padding: 6px 9px; vertical-align: middle; }
table.infaq-tbl th { background: var(--toska); color: #fff; font-weight: 700; text-align: center; font-size: 13px; }
table.infaq-tbl td { height: 38px; }
table.infaq-tbl td.infaq-no { width: 52px; text-align: center; }
table.infaq-tbl th.infaq-no { width: 52px; }
table.infaq-tbl .infaq-rp { width: 26%; }
table.infaq-tbl .infaq-tgl { width: 18%; text-align: center; }
table.infaq-tbl td.infaq-kosong { text-align: center; color: var(--muted); }
/* Kolom isian di dalam kartu: tampil polos (tanpa kotak) supaya mirip kartu cetak */
table.infaq-tbl input.infaq-in {
  width: 100%; min-width: 0; padding: 3px 4px; border: 0; border-radius: 0; background: transparent;
  font: inherit; color: #111; text-align: center;
}
table.infaq-tbl input.infaq-in:focus { outline: 2px solid rgba(220,38,38,.4); outline-offset: -2px; background: #FFF7F7; }
table.infaq-tbl input.infaq-in-rp { text-align: right; font-weight: 600; }
.infaq-chips {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px;
}
.infaq-chips .hint { margin: 0; }
.infaq-chips .infaq-chip.on { background: linear-gradient(135deg, var(--toska), var(--toska-terang)); color: #fff; border-color: transparent; font-weight: 600; }
.infaq-aksi { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.infaq-aksi .hint { margin: 0; }
.infaq-nama-santri {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px;
  padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.75); border: 1px solid var(--line);
}
.infaq-nama-santri > span:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.infaq-nama-santri strong { font-size: 16px; }
.infaq-hapus-x {
  border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1;
  color: #e11d48; padding: 0 0 0 4px;
}
/* Kotak tagihan di akun orang tua */
.infaq-tagihan {
  border: 2px solid var(--toska); background: rgba(255,255,255,.9); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 22px; box-shadow: 0 10px 26px rgba(127,29,29,.12);
}
.infaq-tagihan-kepala { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.infaq-tagihan-kepala strong { font-size: 15px; }
.infaq-tagihan-total { font-weight: 700; color: var(--toska); }

/* ---------- PEMBAYARAN TAGIHAN VIA TRANSFER (permintaan user 25 Sep 2026) ----------
   Tombol "Bayar" di akun orang tua: pilih metode + unggah bukti TF. Pratinjau bukti di kartu admin
   dibuat kecil (klik untuk membuka ukuran penuh). Semuanya hanya di layar (disembunyikan saat cetak). */
.infaq-bayar { display: flex; flex-direction: column; gap: 6px; align-items: stretch; max-width: 260px; }
.infaq-bayar select, .infaq-bayar input[type=file], .infaq-bayar input[type=text] { font-size: 12.5px; }
/* Keterangan cara bayar pada baris tagihan (HANYA TRANSFER — pilihan Tunai dihapus,
   permintaan user 7 Okt 2026). Menggantikan kotak pilih yang dulu ada di sini. */
.infaq-bayar-cara {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--toska); text-align: center;
}
.infaq-bayar .btn { align-self: flex-start; }
/* ---------- BAYAR INFAQ — MODEL BARIS GULIR (permintaan user 5 Okt 2026) ----------
   "model Gulir pilihan pada setiap pembagian infaqnya, dan bisa obsi tombol tambah pembayaran.
    agar terlihat lebih simpel."
   Tiap baris: kotak gulir pembagian infaq + kolom nominal (atau nominal tetap dari tagihan admin)
   + tombol hapus baris. Semuanya hanya tampil di layar (disembunyikan saat cetak). */
.bayar-blok { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
  background: rgba(255,255,255,.6); }
.bayar-anak { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.bayar-anak strong { font-size: 15px; }
.bayar-rows { display: grid; gap: 10px; }
.bayar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 190px) 34px;
  gap: 10px; align-items: center; }
.bayar-row .bayar-jenis { width: 100%; min-width: 0; font-size: 13px; padding: 9px 10px; }
.bayar-row .bayar-slot { display: flex; align-items: center; gap: 8px; min-width: 0; }
input.bayar-nominal, .bayar-nominal.tetap {
  width: 100%; text-align: right; font-weight: 600; font: inherit;
  padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
.bayar-nominal.tetap { border-color: transparent; background: rgba(220,38,38,.10); color: var(--toska); }
.bayar-row .hint { white-space: nowrap; }
.bayar-hapus {
  width: 34px; height: 34px; padding: 0; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 18px; line-height: 1;
}
.bayar-hapus:hover { border-color: #e0a3a3; color: #b23b3b; background: #fff6f6; }
.bayar-aksi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
  align-items: end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.bayar-tombol { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bayar-tombol .btn { width: 100%; text-align: center; }
.bayar-total { font-weight: 600; color: var(--toska); }
/* CARA BAYAR YANG SUDAH PASTI — pilihan "Tunai" DIHAPUS dari semua formulir pembayaran infaq
   (permintaan user 7 Okt 2026: "hapus pilihan pembayaran tunai ... cukup via transfer saja").
   Karena itu kolom "Cara bayar" bukan lagi kotak pilih, melainkan keterangan tetap ini. */
.bayar-metode-tetap {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font-weight: 600; color: var(--toska);
}
@media (max-width: 900px) {
  .bayar-blok { padding: 12px; }
  .bayar-rows { gap: 12px; }
  /* Di HP: kotak gulir di atas, kolom nominal & tombol hapus di baris berikutnya. */
  .bayar-row { grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: 'jenis hapus' 'slot slot'; }
  .bayar-row .bayar-jenis { grid-area: jenis; }
  .bayar-row .bayar-slot { grid-area: slot; }
  .bayar-row .bayar-hapus { grid-area: hapus; }
  input.bayar-nominal, .bayar-nominal.tetap { text-align: left; }
  .bayar-aksi { grid-template-columns: 1fr; gap: 12px; }
}
@media print {
  #bayar-infaq, #riwayat-bayar, #konfirmasi-bayar-pilihan { display: none !important; }
}

.infaq-bukti-mini {
  max-width: 90px; max-height: 90px; border-radius: 8px;
  border: 1px solid var(--line); object-fit: cover; display: block; margin: 0 auto;
}
@media screen and (max-width: 900px) {
  /* Di HP: tabel kartu diberi lebar minimum lalu digeser kiri-kanan, supaya halaman tetap rapi. */
  table.infaq-tbl { min-width: 360px; font-size: 12.5px; }
  .infaq-kartu { padding: 12px 12px 14px; }
  .infaq-judul { font-size: 15px; }
}
@media print {
  .infaq-tbl-wrap { overflow: visible !important; }
  /* zoom tampilan (assets/infaq.js) HARUS dimatikan saat dicetak supaya ukurannya asli. */
  .infaq-sheet { zoom: 1 !important; }
  .infaq-toolbar { display: none !important; }
  /* Kartu infaq: tampil bersih di kertas (tanpa bayangan) dan kolom isian tetap bergaris kotak. */
  .infaq-kartu { box-shadow: none !important; border-width: 2px !important; margin-bottom: 14px !important; }
  .infaq-tbl th { background: #FDE8E8 !important; color: #111 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .infaq-aksi, .infaq-tagihan, .infaq-chips, .infaq-bayar { display: none !important; }
  table.infaq-tbl input.infaq-in { background: transparent !important; }
}

/* ---------- KARTU INFAQ: tampilan "satu layar" di HP (permintaan user 24 Sep 2026) ----------
   Ketiga kartu dibungkus #infaq-sheet; assets/infaq.js mengecilkannya dengan `zoom` supaya
   seluruh kartu terlihat sekaligus di layar HP. Saat dicetak zoom dimatikan (lihat @media print). */
.infaq-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.infaq-toolbar-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.infaq-toolbar .chip.on { background: linear-gradient(135deg, var(--toska), var(--toska-terang)); color: #fff; border-color: transparent; font-weight: 600; }
.infaq-sheet { transform-origin: top left; }
body.infaq-pas .infaq-sheet { width: 100%; }
@media screen and (max-width: 900px) {
  /* Di HP kartu dibuat lebih ringkas supaya pengecilannya tidak terlalu ekstrem. */
  table.infaq-tbl td { height: 30px; }
  table.infaq-tbl th, table.infaq-tbl td { padding: 3px 5px; }
  .infaq-judul { font-size: 14px; margin-bottom: 4px; }
  .infaq-kartu { padding: 10px 10px 12px; margin-bottom: 10px; }
}

/* Layar SANGAT sempit (<=340px, mis. 320px): label terpanjang pada sub-menu hanya muat bila
   hurufnya lebih kecil dan ikon sub-menu diganti titik penanda. Ikonnya tetap ADA di dalam halaman
   (hanya disembunyikan pada ukuran ini), jadi pemeriksaan ikon menu tetap berlaku.
   Angka-angka di blok ini DIPILIH DARI PENGUKURAN pada 3 Okt 2026 setelah menu memakai HURUF KAPITAL
   (kapital ±8% lebih lebar) — lihat .vibecoder/tmp/ukur_kapital.js:
     ruang tersedia pada panel 160px (layar 320px): item 99px · induk 89px · sub 110px (setelah
     dikurangi titik penanda 5px + jaraknya);
     label terpanjang tiap jenis pada 11px: "REKAP PEMBAYARAN" 101px · "MURAJAAH ONLINE" 91px ·
     "REKAP SUDAH UJI" 91px (diukur pada 13px: 119/110/136px).
   Jangan mengubah padding/huruf blok ini tanpa mengukur ulang dengan alat itu. */
@media screen and (max-width: 340px) {
  .nav a { padding: 9px 5px; font-size: 11px; gap: 6px; }
  .nav-ikon { width: 16px; height: 16px; }
  .nav-ikon svg { width: 15px; height: 15px; }
  /* padding kanan 18px = ruang panah 12px + right 5px (lihat .nav-panah di blok ini) */
  .nav-grup { padding: 9px 18px 9px 5px; font-size: 11px; gap: 5px; }
  .nav-grup .nav-ikon { width: 15px; height: 15px; }
  .nav-grup .nav-ikon svg { width: 14px; height: 14px; }
  .nav-anak { margin-left: 2px; padding-left: 2px; }
  .nav-anak a { font-size: 10.5px; padding: 8px 4px; gap: 4px; min-height: 34px; }
  .nav-anak a .nav-ikon { display: none; }
  .nav-anak a::before {
    content: ''; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%;
    background: currentColor; opacity: .75;
  }
  .nav-panah { width: 12px; height: 12px; right: 5px; margin-top: -6px; }
}

/* ---------- UJI TASMI': LEMBAR NILAI (permintaan user 25 Sep 2026) ----------
   Meniru berkas "DRAF NILAI TASMI' MUTQIN.xlsx": rekap kelas (A4 mendatar, 37 kolom surah)
   dan lembar per santri (A4 tegak). Aturan cetak: @page leger dipakai untuk rekap kelas. */
.tasmi-tbl input.tasmi-in { width: 74px; }
.tasmi-tbl input.tasmi-in.kosong { background: #FFFDF3; }
.tasmi-tbl td.tasmi-ket { font-size: 11.5px; }
.tasmi-kartu h2 { font-size: 16px; }
/* Kop surat pada lembar nilai tasmi': memenuhi LEBAR kertas (kiri-kanan) seperti kop raport,
   tingginya mengikuti proporsi gambar; 210px hanya pengaman. */
.kop-tasmi { max-height: 210px; margin-bottom: 4px; }
/* Tabel tanda tangan per kelas di Pengaturan (unggah TTD wali & penguji). */
.ttd-tbl { font-size: 12px; }
.ttd-tbl td, .ttd-tbl th { vertical-align: top; }
.ttd-tbl input[type=file] { width: 100%; }

/* Legenda huruf pada lembar per santri DIHAPUS, begitu juga kotak "NO. URUT" (permintaan user
   25 Sep 2026: "hapus nomor NIS, hapus pula tabel A B C dan angka yang ada di pojok atas").
   Jangan dibuat lagi di HTML/CSS.

   Kepala lembar: judul + NAMA SANTRI + KELAS dirata-tengah dan diperbesar. Ukurannya memakai `clamp`
   dengan acuan LEBAR KERTAS (bukan lebar layar) supaya tulisan besar tetapi TIDAK keluar kertas;
   nilainya sudah diukur pada kertas A4 (konten 680 px saat cetak / 734 px di layar). */
.tasmi-kepala { text-align: center; margin: 4px 0 2px; }
.tasmi-judul-atas {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .4px; line-height: 1.25;
  white-space: nowrap;
}
.tasmi-nama-atas {
  font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  line-height: 1.3; margin-top: 3px; white-space: nowrap;
}
.tasmi-kelas-atas { font-size: 15px; font-weight: 600; letter-spacing: .3px; margin-top: 1px; white-space: nowrap; }
.tasmi-catatan-blok { border: 1px solid #333; margin-top: 8px; }
.tasmi-catatan-judul { border-bottom: 1px solid #333; padding: 3px 8px; font-weight: 700; font-size: 11.5px; }
.tasmi-catatan-isi { padding: 6px 8px; font-size: 11.5px; min-height: 34px; }
.tasmi-ttd { justify-content: space-around; }
.tasmi-ttd .c { min-width: 210px; }

/* Rekap kelas (A4 mendatar): kolom surah dibuat rapat & huruf kecil seperti berkas Excel */
.tasmi-tbl-landscape { font-size: 8.6px; }
.tasmi-tbl-landscape th, .tasmi-tbl-landscape td { padding: 2px 2.5px; }
.tasmi-tbl-landscape .tasmi-surah-head { font-size: 7.2px; writing-mode: vertical-rl; text-orientation: mixed; height: 96px; white-space: nowrap; }
.tasmi-tbl-landscape td.tasmi-catatan { font-size: 7.6px; min-width: 120px; white-space: normal; }
.tasmi-paper-landscape { max-width: 297mm; }
@media print {
  /* Rekap kelas memakai kertas A4 MENDATAR (aturan @page leger: margin 10mm) */
  .tasmi-paper-landscape { page: leger; max-width: none; }
  /* Rekap kelas berisi 44 kolom × banyak santri: judul tabel diulang tiap halaman dan blok
     tanda tangan tidak dipotong. (Tidak dipaksa 1 halaman — sama seperti sheet LEGER di Excel.) */
  .tasmi-paper-landscape thead { display: table-header-group; }
  .tasmi-paper-landscape .tasmi-ttd { break-inside: avoid; page-break-inside: avoid; }
  .tasmi-paper-landscape .rp-title h1 { font-size: 13px !important; }
  table.rp.tasmi-tbl-landscape { font-size: 6.4px !important; }
  table.rp.tasmi-tbl-landscape th, table.rp.tasmi-tbl-landscape td { padding: 1px 1.2px !important; line-height: 1.1 !important; }
  .tasmi-tbl-landscape .tasmi-surah-head { font-size: 5.8px !important; height: 74px !important; }
  .tasmi-tbl-landscape td.tasmi-catatan { font-size: 6px !important; min-width: 92px !important; }
  /* Lembar per santri WAJIB muat 1 halaman A4: 37 baris surah + keterangan (diukur & disetel
     supaya keterangan tetap SATU baris, karena teks itu yang membuat baris jadi tinggi). */
  /* Selector dibuat lebih spesifik (table.rp.…) karena aturan cetak raport
     `table.rp th, table.rp td { padding: 2.9px 4.2px }` lebih kuat daripada `.tasmi-tbl-santri td`. */
  table.rp.tasmi-tbl-santri { font-size: 8px !important; }
  table.rp.tasmi-tbl-santri th, table.rp.tasmi-tbl-santri td { padding: 1px 2.5px !important; line-height: 1.1 !important; }
  table.rp.tasmi-tbl-santri td.tasmi-ket-sel { font-size: 6.4px !important; }
  /* Judul + nama + kelas pada lembar per santri: ukurannya dihitung di tasmi_cetak.php
     (tasmi_ukuran_pas) supaya nama panjang tetap muat kertas — JANGAN dipaksa !important di sini,
     karena itu akan menimpa ukuran hasil hitungan. */
  .tasmi-nama-atas { margin-top: 2px !important; }
  .tasmi-catatan-isi { font-size: 9px !important; min-height: 26px !important; }
  .tasmi-ttd .c { min-width: 150px !important; }
  .tasmi-ttd .nm { margin-top: 34px !important; }
  /* Kop surat pada lembar tasmi': penuh lebar kertas seperti kop raport (batas 170px = pengaman
     untuk gambar hampir persegi; kop rasio 4,28:1 memakai tinggi 159px = lebar penuh 680px).
     Tanda tangan unggahan dibuat sedikit lebih kecil di kertas supaya lembar tetap 1 halaman A4. */
  .kop-tasmi { max-height: 170px !important; margin-bottom: 2px !important; }
  .ttd-cap { height: 42px; margin-top: 2px; max-width: 170px; }
  .ttd-cap .ttd-gambar { max-height: 42px; max-width: 130px; }
  .ttd-cap .ttd-stempel { max-height: 56px; max-width: 56px; }
  .cover-ttd .ttd-cap { height: 13mm; max-height: 13mm; max-width: 42mm; }
  .cover-ttd .ttd-cap .ttd-gambar { max-height: 13mm; max-width: 36mm; }
  .cover-ttd .ttd-cap .ttd-stempel { max-height: 16mm; max-width: 16mm; }
  .ttd .ttd-cap + .nm, .syahadah-mengesahkan .ttd-cap + .nm { margin-top: 2px !important; }
  .syahadah-mengesahkan .ttd-cap { height: 54px; }
  .syahadah-mengesahkan .ttd-cap .ttd-gambar { max-height: 54px; max-width: 150px; }
  .syahadah-mengesahkan .ttd-cap .ttd-stempel { max-height: 64px; max-width: 64px; }
}

/* ---------- REKAP PEMBAYARAN INFAQ (permintaan user 27 Sep 2026) ----------
   Tabel rekap punya banyak kolom (12 bulan syahriyah + tiap kegiatan + total), jadi:
   - di LAYAR: dibungkus .rekap-wrap yang bisa digeser kiri-kanan (halaman tidak melebar),
   - saat CETAK: tabel dikecilkan dengan zoom supaya seluruh kolom masuk kertas A4 mendatar
     (pola yang sama dengan Leger — tanpa zoom, kolom terakhir terpotong). */
.rekap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
table.rekap-tbl { font-size: 11.5px; min-width: 900px; }
table.rekap-tbl th, table.rekap-tbl td { padding: 4px 6px; white-space: nowrap; }
table.rekap-tbl thead th { position: sticky; top: 0; z-index: 2; }
table.rekap-tbl tr.rekap-grup th { background: #FEE2E2; color: var(--ink); font-size: 11px;
  letter-spacing: .3px; text-align: center; }
table.rekap-tbl thead th.rekap-nilai { font-size: 10.5px; line-height: 1.25; vertical-align: bottom; }
table.rekap-tbl .rekap-grup-kecil { display: block; font-weight: 400; font-size: 9px; opacity: .7; }
table.rekap-tbl th.rekap-no, table.rekap-tbl td.rekap-no { width: 42px; }
table.rekap-tbl th.rekap-nis { width: 80px; }
table.rekap-tbl th.rekap-nama { width: 180px; text-align: left; }
table.rekap-tbl td.num, table.rekap-tbl th.num { text-align: right; }
table.rekap-tbl td.rekap-ada { font-weight: 700; }
table.rekap-tbl td.rekap-kosong { color: #A88C8C; }
table.rekap-tbl td.rekap-total, table.rekap-tbl th.rekap-total-kol { background: rgba(220,38,38,.09); }
table.rekap-tbl tfoot td { background: #FEE2E2; font-weight: 700; }
.rekap-kepala { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 10px; }
.rekap-kotak { background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.rekap-kotak .lbl { font-size: 12px; color: var(--muted); }
.rekap-kotak strong { font-size: 17px; }
@media screen and (max-width: 900px) {
  table.rekap-tbl { font-size: 11px; }
  .rekap-kotak strong { font-size: 15px; }
}
/* CATATAN: aturan CETAK halaman Rekap Pembayaran (kertas A4 mendatar) TIDAK ada di berkas ini,
   melainkan di assets/rekap.css yang hanya dimuat halaman itu — karena `@page` bersifat global. */

/* ---------- BANTUAN PEMASANGAN APLIKASI (permintaan user 27 Sep 2026) ----------
   Android/Play Protect bisa menolak paket aplikasi yang dibuat Chrome (pesan "aplikasi dibuat untuk
   versi Android lama" / "tidak aman"). Karena itu langkah-langkah yang bisa dikerjakan pengguna
   ditulis di halaman (lib/pasang.php) dan bisa dibuka kapan saja; tersembunyi dari hasil cetak. */
.pasang-bantuan {
  background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 13px;
  padding: 10px 14px; margin: 0 0 18px; font-size: 13.5px;
}
.pasang-bantuan > summary { cursor: pointer; font-weight: 600; color: var(--toska); }
.pasang-bantuan > summary::marker { color: var(--toska); }
.pasang-isi { margin-top: 10px; }
.pasang-isi p { margin: 0 0 10px; }
.pasang-isi #pasang-gagal {
  background: rgba(244,63,94,.10); border: 1px solid rgba(244,63,94,.30);
  border-radius: 11px; padding: 10px 12px; color: #9f1239;
}
ol.pasang-langkah { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 8px; }
ol.pasang-langkah li { line-height: 1.5; }
.pasang-catatan {
  background: rgba(220,38,38,.09); border-radius: 11px; padding: 10px 12px; margin: 0 !important;
}
@media screen and (max-width: 900px) {
  .pasang-bantuan { padding: 9px 11px; font-size: 13px; }
}
@media print { .pasang-bantuan { display: none !important; } }

/* ---------- TOMBOL SIMPAN TUNGGAL KARTU INFAQ (permintaan user 27 Sep 2026) ----------
   Satu tombol untuk ketiga kartu. Berada DI LUAR lembar kartu (yang dikecilkan zoom oleh
   assets/infaq.js) supaya ukurannya tetap normal, dan dibuat lebar penuh di HP agar mudah ditekan. */
.infaq-aksi-satu { align-items: center; gap: 12px; }
.infaq-aksi-satu .btn { padding: 12px 26px; font-size: 15px; }
@media screen and (max-width: 900px) {
  .infaq-aksi-satu { flex-direction: column; align-items: stretch; gap: 8px; }
  .infaq-aksi-satu .btn { width: 100%; }
  .infaq-aksi-satu .hint { font-size: 12px; }
}
@media print { .infaq-aksi-satu { display: none !important; } }

/* ---------- KAMERA DEPAN PADA SCAN ABSENSI (permintaan user 27 Sep 2026) ----------
   Kamera depan menghadap pengguna, jadi pratinjaunya dibalik (cermin) supaya terasa wajar.
   Yang dibalik HANYA tampilan lewat CSS — frame yang dipindai jsQR tetap gambar asli, sehingga
   QR tetap terbaca seperti biasa. */
#video-scan.kamera-depan { transform: scaleX(-1); }

/* ---------- HISTORIS ABSENSI (permintaan user 27 Sep 2026) ----------
   Tabel rekap & rincian harian; baris rincian bisa dibuka per santri (<details>). */
table.hist-tbl { font-size: 13px; }
table.hist-tbl td.num, table.hist-tbl th.num { text-align: right; white-space: nowrap; }
table.hist-tbl tfoot td { background: #FEE2E2; font-weight: 700; }
.hist-rincian > details { border: 0; }
.hist-rincian summary {
  cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-size: 14px; list-style: none;
}
.hist-rincian summary::-webkit-details-marker { display: none; }
.hist-rincian summary::before { content: "▸"; color: var(--toska); font-weight: 700; }
.hist-rincian details[open] summary::before { content: "▾"; }
.hist-rincian summary .pill { font-size: 11.5px; }
@media screen and (max-width: 900px) {
  table.hist-tbl { font-size: 12px; }
  .hist-rincian summary { font-size: 13px; }
}
@media print {
  .hist-rincian details > summary::before { content: ""; }
}

/* ---------- KONFIRMASI & TANGGAPAN MURAJAAH (permintaan user 27 Sep 2026) ----------
   Kotak "Perlu Dikonfirmasi" (wali kelas/admin) & tampilan tanggapan di tabel rincian. */
.murajaah-tanggapi {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
  background: rgba(255,255,255,.7);
}
.murajaah-tanggapi:last-child { margin-bottom: 0; }
.mt-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mt-isi { margin: 6px 0 10px; }
.mt-form { gap: 8px; }
.mt-input { flex: 1 1 240px; min-width: 180px; }
.mt-tanggapan {
  background: rgba(220,38,38,.10); border-left: 3px solid var(--toska);
  border-radius: 8px; padding: 8px 10px; font-size: 13.5px;
}
@media screen and (max-width: 900px) {
  .mt-input { flex: 1 1 100%; min-width: 0; }
  .mt-form { flex-direction: column; align-items: stretch; }
}
@media print { .mt-form, .mt-tanggapan .row-actions { display: none !important; } }

/* ---------- CEKLIS MURAJAAH (permintaan user 27 Sep 2026: dipisah dari Rekap Murajaah) ---------- */
.ceklis-kartu { margin-bottom: 16px; }
.ceklis-kartu.sudah { background: rgba(254,242,242,.85); }
.ck-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ck-isi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 8px 0 4px; }
.ck-tanggal { font-weight: 700; }
.ck-catatan { margin: 4px 0 10px; }
.ck-contoh {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0 10px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.ck-contoh .chip { font-size: 12.5px; text-align: left; white-space: normal; height: auto; padding: 7px 11px; }
.ck-contoh .chip.dipakai { background: var(--toska); color: #fff; border-color: transparent; }
.ck-form { gap: 8px; }
.ck-input { flex: 1 1 280px; min-width: 200px; }
@media screen and (max-width: 900px) {
  .ck-input { flex: 1 1 100%; min-width: 0; }
  .ck-form { flex-direction: column; align-items: stretch; }
  .ck-contoh .chip { font-size: 12px; }
}
@media print {
  .ck-contoh, .ck-form { display: none !important; }
  .ceklis-kartu { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- SAKELAR CATAT MURAJAAH (permintaan user 27 Sep 2026) ---------- */
table.ck-sakelar td, table.ck-sakelar th { vertical-align: middle; }
table.ck-sakelar .row-actions { flex-wrap: wrap; justify-content: center; gap: 6px; }
@media print { .ck-sakelar { display: none !important; } }

/* ---------- NILAI SETORAN HAFALAN: GRAFIK INDEKS PRESTASI (permintaan user 1 Okt 2026) ----------
   Grafiknya SVG yang dibuat di server; di sini hanya gaya warna & ukuran supaya ikut tema
   dan tetap enak dilihat/dicetak. */
.grafik-bungkus { width: 100%; overflow-x: auto; }
svg.setoran-grafik { width: 100%; height: auto; display: block; min-width: 0; }
svg.setoran-grafik .g-garis-bantu { stroke: rgba(220,38,38,.18); stroke-width: 1; }
svg.setoran-grafik .g-garis-kuat { stroke: rgba(220,38,38,.35); }
svg.setoran-grafik .g-garis-rata { stroke: #b45309; stroke-width: 1.4; stroke-dasharray: 6 5; }
svg.setoran-grafik .g-garis-utama { fill: none; stroke: var(--toska); stroke-width: 2.4;
  stroke-linejoin: round; stroke-linecap: round; }
svg.setoran-grafik .g-titik { fill: var(--toska-terang); stroke: #fff; stroke-width: 1.6; }
svg.setoran-grafik .g-label-y { fill: var(--muted); font-size: 11px; text-anchor: end; }
svg.setoran-grafik .g-label-x { fill: var(--muted); font-size: 10.5px; }
svg.setoran-grafik .g-label-nilai { fill: var(--ink); font-size: 11px; font-weight: 700; }
svg.setoran-grafik .g-label-rata { fill: #b45309; font-size: 11px; font-weight: 700; }
.bar-nilai { height: 9px; border-radius: 999px; background: rgba(220,38,38,.14); overflow: hidden; margin-bottom: 4px; }
.bar-nilai > span { display: block; height: 100%; background: linear-gradient(135deg, var(--toska), var(--toska-terang)); }
.hint.naik { color: #047857; }
.hint.turun { color: #b91c1c; }
@media screen and (max-width: 900px) {
  svg.setoran-grafik { min-width: 620px; }   /* di HP grafik bisa digeser kiri-kanan, tetap terbaca */
}
@media print {
  svg.setoran-grafik { min-width: 0; page-break-inside: avoid; break-inside: avoid; }
  .grafik-bungkus { overflow: visible !important; }
}

/* ---------- PENGUMUMAN (permintaan user 5 Okt 2026) ----------
   Daftar pengumuman berbentuk kartu; yang sudah lewat tanggal berakhirnya ditampilkan lebih redup
   dan diberi penanda (tetap terlihat oleh admin saja). */
.pum-daftar { display: grid; gap: 16px; }
.pum-item {
  border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 16px 18px;
  box-shadow: var(--shadow-kecil, 0 6px 18px rgba(127,29,29,.06));
}
.pum-item.pum-lewat { opacity: .62; background: #f7f9f9; }
.pum-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pum-kepala h3 { margin: 0; font-size: 16px; }
.pum-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.pum-isi { margin: 10px 0 0; white-space: pre-line; }
.pum-lampiran { margin: 12px 0 0; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
img.pum-gambar { max-width: 320px; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.pum-kaki { margin: 12px 0 0; }
@media (max-width: 900px) {
  .pum-item { padding: 13px 14px; }
  .pum-kepala h3 { font-size: 15px; }
  img.pum-gambar { max-width: 100%; }
}

/* =====================================================================================
   SMAF EDU — tambahan gaya khusus aplikasi ini (SPP).
   Ditulis di AKHIR berkas supaya aturannya menang tanpa mengubah gaya aplikasi Raport
   yang sudah terbukti (berkas style.css ini berasal dari sana).
   ===================================================================================== */

/* Sel tabel rata kanan (angka uang) */
table.tbl td.kanan, table.tbl th.kanan { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tfoot th { background: rgba(220,38,38,.10); font-size: 12.5px; }
table.tbl thead th[rowspan], table.tbl thead th[colspan] { text-align: center; }

/* Kotak statistik: struktur sederhana (hint / angka / keterangan) */
.stat > strong {
  font-size: 26px; font-weight: 700; line-height: 1.15;
  background: linear-gradient(135deg, var(--toska), var(--toska-terang));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat > em { font-style: normal; color: var(--muted); font-size: 12.5px; }
@media (max-width: 900px) { .stat > strong { font-size: 21px; } }

/* Tab halaman (Bayar SPP: input manual vs konfirmasi) */
.tab-baris { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.tab {
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.85); color: var(--ink); font-weight: 600; font-size: 14px;
}
.tab.on { background: linear-gradient(135deg, var(--toska), var(--toska-terang)); color: #fff; border-color: transparent; }
.tab:hover { text-decoration: none; }

/* Daftar anak pada form akun wali murid */
.blok-anak {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 14px;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(255,255,255,.7);
  max-height: 340px; overflow-y: auto;
}
.anak-judul { grid-column: 1 / -1; font-weight: 700; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-top: 6px; }
.anak-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.anak-item input { width: auto; }

/* Kotak informasi sesi "tetap masuk" */
.kotak-sesi {
  margin-top: 18px; padding: 14px 16px; border-radius: 14px;
  border: 1px dashed rgba(220,38,38,.45); background: rgba(220,38,38,.06);
}

/* ----- Kartu "Cara Pembayaran SPP" (rekening + QRIS) ----- */
.sp-bayar-kartu { margin-bottom: 20px; }
.sp-bayar-isi { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
ul.sp-bayar-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.sp-bayar-daftar li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-size: 13.5px;
}
ul.sp-bayar-daftar li span { min-width: 0; overflow-wrap: anywhere; }
.sp-bayar-qris img {
  /* Ukuran QRIS dibuat SEDANG (permintaan user 9 Okt 2026: "QRIS terlalu besar").
     Tetap bisa dipindai dari layar maupun dari hasil cetak, tetapi tidak lagi mendominasi kartu. */
  width: auto; max-width: 150px; max-height: 150px; height: auto; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; display: block; padding: 6px; margin: 0 auto;
}
/* Gambar QRIS bisa diketuk untuk dibuka satu layar penuh (lihat bagian PENAMPIL QRIS di bawah). */
button.sp-qris-buka {
  display: block; margin: 0 auto; padding: 0; border: 0; background: transparent;
  cursor: zoom-in; line-height: 0;
}
button.sp-qris-buka:focus-visible { outline: 3px solid var(--toska); outline-offset: 4px; border-radius: 14px; }
.sp-qris-aksi { justify-content: center; margin-top: 10px; }

/* ---------- PENAMPIL QRIS SATU LAYAR (permintaan user 9 Okt 2026) ----------
   Dibuat di server (lib/spp.php) dan disembunyikan dengan atribut `hidden`; seluruh ukurannya
   memakai satuan viewport supaya di HP muat dalam SATU LAYAR tanpa perlu menggulir:
   kepala (judul + tombol tutup) + gambar + tombol Unduh/Tutup + keterangan. */
body.qris-terbuka { overflow: hidden; }
.sp-qris-layar {
  /* z-index harus lebih tinggi daripada bilah atas (50), tombol menu HP (60), selubung (65),
     panel menu (70) — lihat catatan di lib/spp.php: penampil sengaja ada DI LUAR kartu supaya
     tidak terkurung stacking context milik kartu (backdrop-filter). */
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; background: rgba(30, 10, 60, .94);
}
.sp-qris-layar[hidden] { display: none !important; }
.sp-qris-kotak {
  background: #fff; border-radius: 18px; padding: 14px;
  width: 100%; max-width: 420px; max-height: 100%;
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(20, 6, 45, .5);
}
.sp-qris-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-qris-kepala strong { font-size: 15px; }
.sp-qris-tutup {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 20px; line-height: 1;
}
.sp-qris-kotak > img {
  /* Gambar selebar kotak & tingginya dibatasi 62vh supaya satu layar penuh (gambar QRIS tetap
     mudah dipindai; rasio tidak diubah karena memakai object-fit: contain). */
  width: 100%; height: auto; max-height: 62vh; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px;
}
.sp-qris-kaki { display: flex; gap: 10px; }
.sp-qris-kaki .btn { flex: 1 1 auto; text-align: center; }
.sp-qris-kotak .hint { font-size: 11.5px; }
@media screen and (max-height: 620px) {
  /* Layar pendek (mis. HP lama / mode mendatar): gambar dikecilkan lagi agar tetap satu layar. */
  .sp-qris-kotak > img { max-height: 52vh; }
  .sp-qris-kotak .hint { display: none; }
}
.sp-salin { flex: 0 0 auto; }

/* Pratinjau bukti transfer di kartu konfirmasi */
img.bukti-pratinjau {
  max-width: 260px; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; display: block;
}

/* Judul kecil di dalam kartu SPP (mis. "TAHUN AJARAN 2026-2027") */
.infaq-sub {
  text-align: center; font-size: 11.5px; letter-spacing: .06em; color: var(--muted);
  margin: -6px 0 10px; text-transform: uppercase;
}

/* Kolom isian NAMA kegiatan di kartu (admin dapat mengubah isi jenis biaya kegiatan):
   rata kiri seperti teks namanya, bukan rata tengah seperti kolom angka. */
table.infaq-tbl td.infaq-kegiatan input.infaq-in { text-align: left; font-weight: 600; }

/* Baris KOSONG untuk menambah jenis kegiatan langsung di kartu Biaya Kegiatan
   (permintaan user 9 Okt 2026). Dibedakan tipis supaya jelas itu baris isian, bukan pembayaran. */
table.infaq-tbl tr.infaq-baris-baru td { background: #FFF7F7; }
table.infaq-tbl tr.infaq-baris-baru input.infaq-in { text-align: left; color: var(--toska); }
table.infaq-tbl tr.infaq-baris-baru input.infaq-in::placeholder { color: var(--muted); font-style: italic; }
@media print { table.infaq-tbl tr.infaq-baris-baru { display: none !important; } }

/* Kolom NAMA (bulan / kegiatan) pada Kartu SPP memakai GARIS TABEL YANG LURUS & RAPI seperti
   kolom lain (permintaan user 9 Okt 2026: "munculkan garis pada nama Bulan dan Kegiatan,
   lurus dan rapih").
   Garisnya diwarisi dari aturan dasar `table.infaq-tbl th, td { border: 2px solid #111 }`, jadi
   SEMUA garis kolom/baris lurus dan bertemu rapi; yang diatur khusus di sini hanya perataan
   teks nama (rata kiri) dan padding yang sama dengan kolom lain supaya sejajar. */
table.infaq-tbl td.infaq-kegiatan { text-align: left; font-weight: 600; }

/* Kartu SPP yang sedang di-zoom tidak boleh melebar keluar layar */
#kartu-sheet { transform-origin: top left; }
body.kartu-sempit .wrap { overflow-x: hidden; }

/* Di HP: kartu pembayaran satu kolom, form akun menumpuk */
@media (max-width: 900px) {
  .sp-bayar-isi { grid-template-columns: 1fr; }
  .sp-bayar-qris img { max-width: 150px; }
  .blok-anak { grid-template-columns: 1fr; max-height: 260px; }
  img.bukti-pratinjau { max-width: 100%; }
}

@media print {
  #form-bayar, #form-bayar-manual, #konfirmasi-bayar, #tampilkan-tagihan, #massal,
  #cara-bayar, .sp-bayar-kartu, #kartu-toolbar, .tab-baris { display: none !important; }
  .infaq-toolbar { display: none !important; }
  .infaq-sheet { zoom: 1 !important; }
  /* QRIS di kertas diperkecil lagi (≈ 25 mm) dan tombol Salin disembunyikan. */
  .sp-bayar-qris img { max-width: 100px !important; max-height: 100px !important; padding: 2px; }
  .sp-bayar-qris { text-align: left; }
  .sp-bayar-kartu .hint, .sp-salin { display: none !important; }
  /* Penampil & baris tombol QRIS tidak ikut tercetak; GAMBARNYA tetap tercetak.
     CATATAN: tombol pembungkus gambar TIDAK boleh disembunyikan — gambarnya ada DI DALAM tombol itu,
     jadi ikut hilang bila tombolnya di-display:none. */
  .sp-qris-layar, .sp-qris-aksi { display: none !important; }
  button.sp-qris-buka { display: block !important; cursor: default; }
}

/* ----- Logo & Ikon Aplikasi (Pengaturan) ----- */
.logo-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 18px; }
.logo-pratinjau {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.logo-pratinjau img {
  width: 72px; height: 72px; object-fit: contain; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; padding: 4px; flex: 0 0 auto;
}
.logo-form { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.logo-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.logo-form label input[type=file] { margin-top: 6px; background: #fff; }
.logo-form .hint { margin: 8px 0 0; }