/* Raport Indeks Prestasi Santri — tema Hijau Toska (kartu kaca) */
* { box-sizing: border-box; }
:root {
  --toska: #0FA3A0;
  --toska-terang: #2ED3CB;
  --ink: #0E2E2D;
  --muted: #4E7674;
  --line: rgba(13, 148, 136, .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: #EDFBF8;
  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, #2ED3CB, transparent 70%); top: -140px; left: -100px; }
.b2 { width: 460px; height: 460px; background: radial-gradient(circle, #0FA3A0, transparent 70%); top: 120px; right: -120px; }
.b3 { width: 420px; height: 420px; background: radial-gradient(circle, #7BE3C7, 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, #0E6E6B 0%, #0A5452 55%, #073C3B 100%);
  border-right: 1px solid rgba(255,255,255,.12);
  box-shadow: 6px 0 34px rgba(6, 60, 58, .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(3, 40, 39, .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, #19B7B2, #2ED3CB); color: #06302F; font-weight: 600;
  box-shadow: 0 8px 18px rgba(3, 40, 39, .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: #7BE3C7; }
.nav-ikon svg { width: 19px; height: 19px; display: block; }
.nav a:hover .nav-ikon { color: var(--toska-terang); }
.nav a.on .nav-ikon { color: #06302F; }
.nav-teks { min-width: 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(12, 110, 108, .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(13,148,136,.22);
  border: 1px solid rgba(13,148,136,.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(12,110,108,.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(13,148,136,.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(12,110,108,.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(12,110,108,.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(13,148,136,.08); text-decoration: none; color: inherit; }
.notif-item:hover { background: rgba(13,148,136,.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(13,148,136,.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(13,148,136,.45); background: rgba(46,211,203,.10); }
.notif-ikon {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
  background: rgba(13,148,136,.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(12,110,108,.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; }

.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(13,148,136,.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(13,148,136,.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(13,148,136,.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(13,148,136,.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(15,163,160,.07); border: 1px solid rgba(15,163,160,.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: #0A7F7C;
}
.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(13,148,136,.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(13,148,136,.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: 52px; height: 52px; font-size: 24px; border-radius: 15px; }
.login-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

/* ---------- cetak / PDF ---------- */
.raport-paper {
  background: #fff; color: #111; padding: 26px 30px; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(12,70,69,.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: #E4F7F5; 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: #F1FCFA; }
table.rp .label { background: #F1FCFA; 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(13, 148, 136, .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(13,148,136,.22);
    background: rgba(255,255,255,.95); color: var(--toska);
    box-shadow: 0 6px 16px rgba(12, 110, 108, .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(13,148,136,.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, #0E6E6B 0%, #0A5452 55%, #073C3B 100%);
    border-right: 1px solid rgba(255,255,255,.12);
  }
  body.menu-terbuka .menu-samping { transform: translateX(0); box-shadow: 18px 0 45px rgba(12, 60, 60, .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(14, 46, 45, .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: #0A5452; }
  /* Tautan menu: padding & huruf disesuaikan supaya label panjang tetap muat tanpa terpotong */
  .nav a { padding: 11px 9px; font-size: 13px; border-radius: 9px; line-height: 1.25; gap: 8px; }
  .nav-grup { padding: 11px 20px 11px 9px; font-size: 12.5px; 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. "Rekap Murajaah Saya") 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(12,110,108,.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(12,70,69,.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: #F7FFFE;
}
.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: #E4F7F5;
  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(12,70,69,.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(13,148,136,.4); outline-offset: -2px; background: #F6FFFD; }
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(12,70,69,.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; }
.infaq-bayar .btn { align-self: flex-start; }
.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: #E4F7F5 !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
   ("Rekap Murajaah Saya" / "Rekap Murajaah Anak" ±110px) 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. */
@media screen and (max-width: 340px) {
  .nav a { padding: 10px 8px; font-size: 12px; gap: 6px; }
  .nav-ikon { width: 16px; height: 16px; }
  .nav-ikon svg { width: 15px; height: 15px; }
  .nav-grup { padding: 10px 20px 10px 8px; font-size: 12px; 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; }
  /* 11px dipilih dari pengukuran: label terpanjang "Rekap Murajaah Anak" (19 huruf) ±106px
     sedangkan ruang tersedia ±113px pada panel 160px. */
  .nav-anak a { font-size: 11px; padding: 8px 6px; gap: 5px; min-height: 34px; }
  .nav-anak a .nav-ikon { display: none; }
  .nav-anak a::before {
    content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: .75;
  }
}

/* ---------- 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: #E7FBF6; 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: #9aa6a4; }
table.rekap-tbl td.rekap-total, table.rekap-tbl th.rekap-total-kol { background: rgba(15,163,160,.09); }
table.rekap-tbl tfoot td { background: #E7FBF6; 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(15,163,160,.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; } }