/*
 * OPTIK NAS — TATA LETAK LEMBAR SPJ (12-09-2026)
 *
 * Dipindahkan APA ADANYA dari <style> di public/input-realisasi.html, supaya
 * lembar SPJ yang disusun public/lembar-spj.js tampil sama di layar mana pun
 * yang memuatnya — Input Realisasi (PUMK) maupun Registrasi SPJ (pelaksana).
 *
 * Urutan aturannya TIDAK diubah. Dalam CSS urutan menentukan siapa yang menang
 * saat dua aturan berebut; menyusun ulang "supaya rapi" adalah cara paling
 * mudah mengubah tampilan dokumen pembayaran tanpa sengaja.
 *
 * Halaman yang memuat berkas ini juga harus memuat lembar-spj.js.
 */

/* ===== B1: Cetak SPJ (dokumen resmi) ===== */
#spjPrintArea { display: none; }
body.cetak-spj #spjPrintArea { display: block; }
@media print {
  /* Saat mencetak SPJ, sembunyikan SELURUH halaman kecuali dokumen SPJ. */
  body.cetak-spj > *:not(#spjPrintArea) { display: none !important; }
  body.cetak-spj #spjPrintArea { display: block; }
  body.cetak-spj .spj-page { page-break-after: always; margin-bottom: 0; }
  body.cetak-spj .spj-page:last-child { page-break-after: auto; }

  /* (12-09-2026, permintaan DIT KK) Kepala & kaki bawaan peramban — alamat
     halaman di atas, tanggal/jam dan nama berkas di bawah — DIHILANGKAN.
     Keduanya digambar peramban di dalam MARGIN halaman; selama marginnya
     bukan nol, ia akan menaruh tulisannya di situ. Maka marginnya dinolkan,
     dan jarak 10mm yang tadinya dari @page dipindahkan jadi padding
     .spj-page. Luas area isinya tetap sama persis — yang hilang hanya
     tulisan peramban, bukan tepi dokumennya.

     Catatan jujur: ini berlaku di Chrome/Edge. Di sebagian peramban lain
     pilihan "Headers and footers" di kotak cetak tetap menang, dan kalau
     begitu tinggal matikan dari situ. */
  @page { size: A4; margin: 0; }
  body.cetak-spj .spj-page { padding: 10mm; }
}
/* Tahoma 11 -- sesuai contoh SPJ resmi. Verdana/DejaVu hanya cadangan
   kalau Tahoma tidak terpasang di komputer yang mencetak. */
/* PENTING: halaman ini punya aturan  * { font-family: 'Plus Jakarta Sans' }  di atas.
   Aturan bintang itu mengenai SETIAP elemen secara langsung, jadi anak-anak
   .spj-page tidak pernah mewarisi Tahoma. Karena itu keluarga hurufnya
   dipasang ke .spj-page DAN seluruh isinya, dengan !important. */
.spj-page, .spj-page * { font-family: Tahoma, Verdana, 'DejaVu Sans', Geneva, sans-serif !important; }
.spj-page { color: #000; font-size: 11pt; line-height: 1.26; margin: 0 auto 18px; background: #fff; }
.spj-box { border: 1px solid #000; }
.spj-dalam { padding: 8px 10px; }
/* Ukuran judul tiap lembar -- mengikuti contoh SPJ resmi */
.spj-j14 { font-size: 14pt; }
.spj-j12 { font-size: 12pt; }
.spj-c { text-align: center; }
.spj-b { font-weight: bold; }
.spj-u { text-decoration: underline; }
.spj-hr { border: none; border-top: 1px solid #000; margin: 7px 0; }
/* garis pemisah di dalam kotak: ditarik sampai mepet tepi kotak */
.spj-dalam > .spj-hr { margin-left: -10px; margin-right: -10px; }
.spj-hr-tebal { border: none; border-top: 2px solid #000; margin: 10px 0; }

/* Label : Isi -- baris sambungan rata di bawah ISI, bukan di bawah titik dua. */
.spj-kv { display: flex; align-items: flex-start; }
.spj-kv > .k { flex: 0 0 auto; width: 150px; }
.spj-kv > .t { flex: 0 0 auto; width: 12px; }
.spj-kv > .v { flex: 1 1 auto; min-width: 0; }

.spj-sign3 { display: flex; gap: 10px; margin-top: 10px; }
.spj-sign3 > div { width: 33.33%; display: flex; flex-direction: column; }
.spj-sign2 { display: flex; gap: 16px; margin-top: 10px; }
.spj-sign2 > div { width: 50%; display: flex; flex-direction: column; }
.spj-ttd-atas { min-height: 2.7em; }
.spj-gap { height: 46px; }

/* ---- Lembar Rincian: TANPA garis mendatar antar baris (di-merge) ---- */
table.spj-rinci { width: 100%; border-collapse: collapse; font-size: 11pt; margin-top: 6px;
                  border: 1px solid #000; }
table.spj-rinci th, table.spj-rinci td { border: none; padding: 1px 6px; vertical-align: top; }
table.spj-rinci th + th, table.spj-rinci td + td { border-left: 1px solid #000; }
table.spj-rinci thead th { border-bottom: 1px solid #000; font-weight: normal; }
table.spj-rinci tr.rinci-jumlah > td { border-top: 1px solid #000; }
table.spj-rinci tr.rinci-jumlah > td:first-child { border-top: none; }
table.spj-rinci tr.rinci-terbilang > td { border-top: 1px solid #000; }
table.spj-rinci td.num { text-align: right; white-space: nowrap; }
table.spj-rinci td.num > .rp { float: left; }
table.spj-rinci td.tsel { position: relative; text-align: center; }
table.spj-rinci td.tsel > .lbl { position: absolute; left: 6px; top: 1px; font-weight: normal; }
.rinci-itm { display: flex; }
.rinci-itm > .d { flex: 0 0 auto; width: 15px; }
.rinci-itm > .n { flex: 1 1 auto; min-width: 0; }
.rinci-itm > .q { flex: 0 0 auto; width: 72px; }
.rinci-itm > .h { flex: 0 0 auto; width: 92px; text-align: right; }

/* ---- Lembar SPD: garis atas, garis antar nomor, satu garis tegak di tengah ---- */
table.spj-spd { width: 100%; border-collapse: collapse; font-size: 11pt;
                border-top: 1px solid #000; }
table.spj-spd > tbody > tr > td { border-bottom: 1px solid #000; padding: 5px 6px; vertical-align: top; }
table.spj-spd > tbody > tr > td.nilai { border-left: 1px solid #000; }
table.spj-spd > tbody > tr.tanpa-tegak > td.nilai { border-left: none; }
table.spj-spd table.spd-ikut { width: 100%; border-collapse: collapse; }
table.spj-spd table.spd-ikut td { border: none; padding: 1px 2px; vertical-align: top; white-space: nowrap; }
/* a. / b. / c. -- baris sambungan menjorok sejajar teksnya */
.spd-abc { padding-left: 20px; text-indent: -20px; }