/* ==========================================================================
   LAPORAN KEUANGAN & TRANSPARANSI (PROMPT #7)
   Dipakai: tab pengurus "Laporan Keuangan", halaman publik laporan-keuangan.php,
   dan tampilan cetak laporan-cetak.php.
   Memakai token design system supaya tetap satu keluarga dengan situs publik.
   Mobile-first; sasaran sentuh ≥44px; tanpa geser mendatar.
   ========================================================================== */

/* LANTAI UKURAN HURUF (aturan design system: tidak ada teks di bawah 12px).
   Tag <small> bawaan peramban 0,8em sehingga di dalam tabel (font 14px) jatuh
   ke 11,73px — melanggar lantai 12px dan tertangkap uji desain. Dinaikkan ke
   token terkecil (--fs-100 = 12px). Berlaku pada halaman yang memuat berkas ini
   (halaman pengurus & halaman laporan). */
small { font-size: var(--fs-100); }

/* --- ringkasan angka dashboard --- */
.lap-statistik {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
@media (min-width: 700px) { .lap-statistik { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lap-statistik { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lap-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--pad-kartu-kecil, 20px);
  text-align: left;
}
.lap-stat__angka { font-family: var(--font-display); font-size: var(--fs-600); font-weight: 700; line-height: 1.1; }
.lap-stat--hijau .lap-stat__angka { color: var(--color-secondary); }
.lap-stat__label { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.lap-stat__ket { font-size: var(--fs-100); color: var(--color-text-muted); }

/* --- susunan dua kolom & sub judul --- */
.lap-dua {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 900px) { .lap-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lap-sub {
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-400);
}
.lap-sub small { font-weight: 400; font-size: var(--fs-100); color: var(--color-text-muted); }

/* --- daftar istilah (dt/dd) --- */
.lap-data { margin: 0; }
.lap-data > div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-4);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.lap-data > div:last-child { border-bottom: 0; }
.lap-data dt { flex: 0 0 40%; font-size: var(--fs-200); color: var(--color-text-muted); }
.lap-data dd { flex: 1 1 50%; margin: 0; font-size: var(--fs-200); overflow-wrap: anywhere; }
@media (min-width: 760px) {
  .lap-data--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-5); }
  .lap-data--3 > div { border-bottom: 0; }
  .lap-data--3 dt { flex: 0 0 100%; }
  .lap-data--3 dd { flex: 1 1 100%; }
}
.lap-ket { margin: var(--sp-3) 0 0; max-width: 560px; font-size: var(--fs-200); color: var(--color-text-muted); }
/* Panjang baris: 620px ternyata menghasilkan 94 huruf/baris pada ukuran huruf
   keterangan (uji tipografi menandai batas 92), jadi dipersempit ke 560px
   (≈85 huruf/baris). Aturan lama di proyek ini: batas lebar selalu dalam PIKSEL. */

/* Wadah grafik harus boleh menyusut (min-width:0). Tanpa itu, label sumber
   yang panjang membuat kolom kisi melebar dan halaman bergeser mendatar
   (terukur 11,7px pada halaman publik laporan). */
.grafik, .grafik__kanvas, .diagram-batang, .diagram-batang__baris, .diagram-batang__label { min-width: 0; }
.diagram-batang__baris { grid-template-columns: minmax(0, 1fr); }
.diagram-batang__label { flex-wrap: wrap; }
.lap-kosong { color: var(--color-text-muted); font-style: italic; }
.lap-nilai { font-family: var(--font-display); font-size: var(--fs-400); font-variant-numeric: tabular-nums; }
.lap-sumber { display: block; margin-top: 2px; font-size: var(--fs-100); color: var(--color-text-muted); overflow-wrap: anywhere; }
.lap-daftar { margin: 6px 0 0; padding-left: 18px; }
.lap-daftar li { margin-bottom: 3px; }
.lap-naik { color: var(--color-secondary); }
.lap-turun { color: var(--color-primary-dark); }
.lap-versi {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  font-size: var(--fs-100);
  font-weight: 700;
  vertical-align: middle;
}

/* --- kop laporan di halaman pengurus --- */
.lap-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-4);
  margin-bottom: var(--sp-2);
  border-bottom: 2px solid var(--color-primary);
}
.lap-kop strong { display: block; font-family: var(--font-display); font-size: var(--fs-400); }
.lap-kop small { color: var(--color-text-muted); font-size: var(--fs-100); }
.lap-kop__judul { font-size: var(--fs-300); font-weight: 700; }

/* --- indikator ringkasan --- */
.lap-metrik {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 760px) { .lap-metrik { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lap-metrik__grup h4 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-300);
  color: var(--color-text);
}
.lap-metrik__grup {
  padding: var(--pad-kartu-kecil, 20px);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-width: 0;
}

/* --- rekap tahunan --- */
.lap-tahun {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.lap-tahun__kotak {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--pad-kartu-kecil, 20px);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.lap-tahun__angka { font-family: var(--font-display); font-size: var(--fs-500); font-weight: 700; }
.lap-tahun__ket { font-size: var(--fs-100); color: var(--color-text-muted); }
.lap-tahun__baris { font-size: var(--fs-200); overflow-wrap: anywhere; }
.lap-tahun__baris small { color: var(--color-text-muted); }

/* --- baris tombol aksi (tidak menumpuk rapat) --- */
.lap-aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lap-aksi-form { margin: 0; }
.lap-form-revisi { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.lap-form-revisi .medan { margin: 0; min-width: 220px; flex: 1 1 240px; }
.lap-aksi .tombol, .lap-form-revisi .tombol { min-height: var(--sentuh-min, 44px); }

/* ==========================================================================
   HALAMAN CETAK (laporan-cetak.php) & KELUARAN PUBLIK
   ========================================================================== */
.lap-cetak {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  color: #1F1B3A;
}
.lap-cetak__kop { text-align: center; padding-bottom: var(--sp-4); border-bottom: 2px solid var(--merah); margin-bottom: var(--sp-5); }
.lap-cetak__kop strong { display: block; font-family: var(--font-display); font-size: 1.35rem; }
.lap-cetak__kop small { display: block; margin-top: 2px; font-size: .82rem; color: var(--color-text-muted); }
.lap-cetak__judul { margin: var(--sp-4) 0 var(--sp-2); font-size: 1.1rem; text-align: center; }
.lap-cetak__meta { margin: 0 0 var(--sp-5); text-align: center; font-size: .85rem; color: var(--color-text-muted); }
.lap-cetak h2 {
  margin: var(--sp-6) 0 var(--sp-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border-strong);
  font-size: 1rem;
}
.lap-cetak table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lap-cetak th, .lap-cetak td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.lap-cetak th { background: var(--color-surface-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.lap-cetak td.angka, .lap-cetak th.angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lap-cetak__kaki { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px dashed var(--color-border-strong); font-size: .78rem; color: var(--color-text-muted); }
.lap-cetak__tanda { margin-top: var(--sp-8); display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; font-size: .8rem; }
.lap-cetak__tanda div { flex: 1 1 180px; padding-top: 56px; border-top: 1px solid var(--color-border-strong); text-align: center; }

/* Tombol cetak di halaman cetak (disembunyikan dari hasil cetak). */
.lap-cetak__aksi { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--sp-5); }
.lap-cetak__aksi .tombol { min-height: var(--sentuh-min, 44px); }

@media print {
  .kepala, .kaki, .pita-jam, .remah, .sematan, .lap-cetak__aksi,
  .nav, .nav-tirai, .togel-nav, .footer { display: none !important; }
  .lap-cetak { max-width: none; padding: 0; }
  .lap-cetak table { font-size: 10pt; }
  .lap-cetak h2 { page-break-after: avoid; }
  .lap-cetak tr { page-break-inside: avoid; }
  @page { size: A4; margin: 14mm 12mm; }
}

/* --- penyaring publik ---
   Aturan .lap-chip dipindahkan ke assets/desain/komponen.css (PROMPT #11) karena
   komponen ini juga dipakai halaman PORTAL yang tidak memuat laporan.css. */

/* --- kartu laporan publik --- */
.lap-daftar-publik {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--gap-kartu);
}
.lap-kartu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--pad-kartu-kecil, 20px);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.lap-kartu__judul { margin: 0; font-size: var(--fs-300); }
.lap-kartu__ket { margin: 0; font-size: var(--fs-100); color: var(--color-text-muted); }
.lap-kartu__tautan { margin-top: auto; padding-top: var(--sp-3); }
.lap-kartu__tautan a { min-height: var(--sentuh-min, 44px); display: inline-flex; align-items: center; }