/* =====================================================================
   RJA — komponen khusus anggaran & realisasi.
   Dimuat SETELAH app.css (sistem desain rekap: Anton + Montserrat,
   hitam + hijau, sidebar ikon garis). Semua warna memakai token app.css —
   jangan tulis hex baru kecuali memang warna baru yang disengaja.
   ===================================================================== */

:root{
  --serap-aman:var(--green); --serap-aman-bg:var(--green-bg);
  --serap-waspada:var(--amber); --serap-waspada-bg:var(--amber-bg);
  --serap-bahaya:var(--red); --serap-bahaya-bg:var(--red-bg);
  --serap-kosong:#9ca3af; --serap-kosong-bg:#f0f0ee;
  /* Alur kosong di belakang bar/gauge/donat, dan batang netral "pagu" pada
     grafik berpasangan. Token supaya tidak ada hex yang ditulis di template. */
  --alur:#eeeeec; --bar-pagu:#d8d8d4;
  /* Latar baris pohon laporan: makin dalam levelnya makin terang. */
  --lv1-bg:#ededea; --lv2-bg:#f4f4f2; --lv3-bg:#fafaf8; --baris-hover:#f7f7f4;
}

/* Ukuran BAWAAN ikon garis. Wajib ada: <svg> tanpa width/height adalah elemen
   tergantikan yang melar ke ukuran induknya (terpantau 948x948 px di bilah
   filter). Sebelumnya ukuran hanya diatur per-konteks (.sidebar nav a .ico,
   .btn .ico, .dr-trigger .ico), jadi setiap pemakaian di tempat baru rusak
   sampai ada yang menambahkan aturannya. Aturan ini membuat kasus bawaan aman;
   selektor per-konteks di atas tetap menang karena spesifisitasnya lebih tinggi. */
svg.ico{width:17px;height:17px;flex:0 0 auto;vertical-align:-3px}

/* Wordmark RJA memakai aturan yang sama dengan sistem desain rekap. */
.rja-logo{display:block;width:auto;height:32px;color:inherit}
.brand .rja-logo{width:100%;height:auto}
.topbar-brand .rja-logo{height:21px;color:var(--ink)}
.auth .rja-logo{height:clamp(46px,13vw,74px);color:var(--ink)}
.rja-logo-img{display:block;max-width:100%;height:auto}
.brand .rja-logo-img{width:100%;max-height:76px;object-fit:contain;background:#fff;border-radius:12px;padding:10px 12px}
.topbar-brand .rja-logo-img{height:26px;width:auto}
.auth .rja-logo-img{max-height:88px;width:auto;margin:0 auto .2rem}

/* Sidebar: label pemisah kelompok menu. 11 menu tanpa pengelompokan terbaca
   sebagai daftar panjang; tiga kelompok membuatnya bisa dipindai sekali lihat. */
.nav-group{padding:1.1rem .95rem .35rem;font-size:.63rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#6a6a67}

/* Pemilih tahun anggaran di topbar */
.tahun-switch{margin:0}
.tahun-switch select{width:auto;padding:.32rem 1.6rem .32rem .6rem;font-size:.8rem;font-weight:700;
  border-radius:20px;background-color:var(--bg)}
.err-code{font-family:var(--display);font-size:3.5rem;line-height:1;margin-bottom:.4rem}

/* ---------------------------------------------------------------------
   Bilah filter global — satu komponen dipakai SEMUA laporan (PRD §7.1).
   --------------------------------------------------------------------- */
.filterbar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.85rem 1rem;margin-bottom:1.1rem}
.filterbar-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.filterbar .fb-item{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.filterbar .fb-item>span{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6b7280}
.filterbar select,.filterbar input{width:auto;min-width:132px;padding:.45rem .6rem;font-size:.85rem}
.filterbar .fb-grow{flex:1 1 190px}
.filterbar .fb-grow input{width:100%;min-width:0}
.filterbar-actions{display:flex;gap:.5rem;align-items:center;margin-left:auto;flex-wrap:wrap}
/* Ringkasan filter aktif — supaya pengguna tahu angka yang dilihat itu irisan apa,
   dan tahu bahwa file Excel yang diunduh mengikuti irisan yang sama. */
.fb-summary{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.7rem;
  padding-top:.7rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.fb-chip{background:#f2f2f0;color:#3f3f3d;padding:2px 9px;border-radius:20px;font-weight:600;font-size:.76rem}
.fb-chip b{font-weight:800;color:var(--ink)}
.fb-chip a{color:var(--muted);margin-left:.35rem;font-weight:700}
@media(max-width:860px){
  .filterbar-row{flex-direction:column;align-items:stretch}
  .filterbar .fb-item{width:100%}
  .filterbar select,.filterbar input{width:100%;min-width:0}
  .filterbar-actions{margin-left:0}
  .filterbar-actions .btn{flex:1 1 0}
}

/* ---------------------------------------------------------------------
   Status serapan — satu bahasa warna di seluruh aplikasi (layar & Excel).
   --------------------------------------------------------------------- */
.st{display:inline-block;padding:2px 9px;border-radius:20px;font-weight:700;font-size:.75rem;white-space:nowrap}
.st-aman{background:var(--serap-aman-bg);color:var(--serap-aman)}
.st-waspada{background:var(--serap-waspada-bg);color:var(--serap-waspada)}
.st-bahaya{background:var(--serap-bahaya-bg);color:var(--serap-bahaya)}
.st-kosong{background:var(--serap-kosong-bg);color:var(--serap-kosong)}

/* Bar serapan tipis — dipakai di tabel laporan & panel pagu */
.serap{display:flex;align-items:center;gap:.5rem;min-width:118px}
.serap-track{flex:1;height:7px;background:var(--alur);border-radius:4px;overflow:hidden;min-width:44px}
.serap-fill{height:100%;border-radius:4px;background:var(--serap-aman);transition:width .25s}
.serap-fill.waspada{background:var(--serap-waspada)}
.serap-fill.bahaya{background:var(--serap-bahaya)}
.serap-num{font-size:.78rem;font-weight:700;white-space:nowrap;flex:0 0 auto}

/* Penanda transaksi yang melewati pagu (D6) */
.ribbon-over{display:inline-block;background:var(--red-bg);color:var(--red);border:1px solid #f0cfc9;
  font-size:.66rem;font-weight:800;letter-spacing:.05em;padding:1px 7px;border-radius:5px;white-space:nowrap}
tr.over-pagu td:first-child{border-left:3px solid var(--red)}

/* ---------------------------------------------------------------------
   Tabel laporan — hierarki kode 4 level, kolom angka rata kanan.
   --------------------------------------------------------------------- */
.tbl-lap{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl-lap th{text-align:left;background:var(--navy);color:#fff;padding:.55rem .7rem;font-weight:600;
  white-space:nowrap;position:sticky;top:0;z-index:2}
.tbl-lap th.n,.tbl-lap td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-lap td{padding:.45rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl-lap .kode{font-family:'Consolas',monospace;font-size:.8rem;color:var(--muted);white-space:nowrap}
/* Baris induk (level 1-3) = penjumlahan otomatis, bukan data yang bisa diisi.
   Dibedakan dengan latar & tebal, makin dalam levelnya makin ringan.

   Latarnya dipasang di <tr>, BUKAN di <td>. Kolom kode yang dibekukan
   (.freeze-1 di bawah) memakai `background:inherit` supaya ikut warna barisnya;
   `inherit` membaca latar induknya — kalau warnanya hanya ada di <td>, sel beku
   itu jadi tembus pandang dan angka yang digeser lewat di belakangnya. */
.tbl-lap tbody tr,.tbl-lap tfoot tr{background:var(--card)}
.tbl-lap tr.lv1{background:var(--lv1-bg)} .tbl-lap tr.lv1>td{font-weight:800}
.tbl-lap tr.lv2{background:var(--lv2-bg)} .tbl-lap tr.lv2>td{font-weight:700}
.tbl-lap tr.lv3{background:var(--lv3-bg)} .tbl-lap tr.lv3>td{font-weight:600}
.tbl-lap tbody tr:hover{background:var(--baris-hover)}
.tbl-lap tr.total{background:var(--ink)}
.tbl-lap tr.total>td{background:var(--ink);color:#fff;font-weight:800;border-bottom:none;
  position:sticky;bottom:0}
.tbl-lap tr.total .kode{color:#b9b9b9}
.lv-ind{display:inline-block}
.lv2 .lv-ind{padding-left:.9rem} .lv3 .lv-ind{padding-left:1.8rem} .lv4 .lv-ind{padding-left:2.7rem}
/* Tombol buka/tutup cabang */
.tw{border:none;background:none;cursor:pointer;font-family:inherit;font-size:.7rem;color:var(--muted);
  padding:0 .35rem 0 0;width:1.1rem}
.tw::before{content:'▾'} .tw.closed::before{content:'▸'}
.tbl-lap tr[hidden]{display:none}

/* Kolom pertama tetap terlihat saat tabel 12 bulan digeser mendatar */
.tbl-lap.freeze-1 th:first-child,.tbl-lap.freeze-1 td:first-child{position:sticky;left:0;z-index:1}
.tbl-lap.freeze-1 th:first-child{z-index:3}
.tbl-lap.freeze-1 td:first-child{background:inherit;box-shadow:1px 0 0 var(--line)}

/* ---------------------------------------------------------------------
   Penyusunan pagu — tabel mirip Excel: 1 kode + 12 kolom bulan.
   --------------------------------------------------------------------- */
.tbl-pagu{width:100%;border-collapse:collapse;font-size:.82rem}
.tbl-pagu th{background:var(--navy);color:#fff;padding:.5rem .55rem;font-weight:600;white-space:nowrap;
  position:sticky;top:0;z-index:2;text-align:right}
.tbl-pagu th:first-child{text-align:left;left:0;z-index:3}
.tbl-pagu td{padding:.25rem .3rem;border-bottom:1px solid var(--line)}
.tbl-pagu td:first-child{position:sticky;left:0;background:#fff;box-shadow:1px 0 0 var(--line);
  padding:.35rem .55rem;min-width:230px}
.tbl-pagu input{width:100%;min-width:96px;padding:.32rem .45rem;font-size:.8rem;text-align:right;
  font-variant-numeric:tabular-nums;border-radius:6px}
.tbl-pagu input.pg-tahun{font-weight:800;border-color:var(--ink)}
.tbl-pagu tr.grup td{background:#f2f2f0;font-weight:700}
.tbl-pagu tr.grup td:first-child{background:#f2f2f0}
/* Indikator D7: Σ12 bulan harus = pagu tahun */
.pg-bal{font-size:.7rem;font-weight:800;white-space:nowrap;padding:0 .4rem}
.pg-bal.ok{color:var(--green)} .pg-bal.off{color:var(--red)}
.pagu-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.pagu-total{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;background:var(--ink);color:#fff;
  border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:1rem}
.pagu-total .lbl{color:#b9b9b9;font-size:.82rem}
.pagu-total .big{font-size:1.9rem;font-weight:800;line-height:1.1}

/* ---------------------------------------------------------------------
   Panel sisa pagu hidup di form input realisasi (PRD F6) — inti Prinsip 2:
   pengguna melihat dampak transaksinya SEBELUM menekan Simpan.
   --------------------------------------------------------------------- */
.pagu-panel{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.pagu-panel.waspada{border-left-color:var(--amber);background:#fffdf7}
.pagu-panel.bahaya{border-left-color:var(--red);background:#fffaf9}
.pagu-panel.kosong{border-left-color:var(--line)}
.pp-kode{font-family:'Consolas',monospace;font-size:.78rem;color:var(--muted)}
.pp-nama{font-weight:700;margin:.1rem 0 .75rem;line-height:1.35}
.pp-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.28rem 0;font-size:.86rem}
.pp-row .k{color:var(--muted)}
.pp-row .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-row.sisa{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.5rem}
.pp-row.sisa .v{font-size:1.05rem}
.pp-row .v.neg{color:var(--red)}
.pp-after{margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--line);font-size:.82rem}
.pp-after b{font-variant-numeric:tabular-nums}
.pp-warn{margin-top:.7rem;font-size:.8rem;font-weight:600;line-height:1.45;display:flex;gap:.45rem;align-items:flex-start}
.pp-warn .ico{width:15px;height:15px;flex:0 0 auto;margin-top:.12rem}
.pp-warn.waspada{color:#8a5200} .pp-warn.bahaya{color:var(--red)}
.pp-empty{color:var(--muted);font-size:.86rem;line-height:1.5}
/* Form realisasi: form di kiri, panel pagu menempel di kanan & ikut menggulir */
.tx-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.2rem;align-items:start}
.tx-layout .pagu-panel{position:sticky;top:5rem}
@media(max-width:900px){ .tx-layout{grid-template-columns:1fr} .tx-layout .pagu-panel{position:static;order:-1} }

/* ---------------------------------------------------------------------
   Pohon kode anggaran (master)
   --------------------------------------------------------------------- */
.tree{list-style:none;margin:0;padding:0}
.tree ul{list-style:none;margin:0;padding:0 0 0 1.35rem;border-left:1px dashed var(--line)}
.tree li{margin:0}
.tree-row{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:8px}
.tree-row:hover{background:#f4f4f2}
.tree-row .kode{font-family:'Consolas',monospace;font-size:.8rem;color:var(--muted);flex:0 0 auto;min-width:78px}
.tree-row .nm{flex:1;min-width:0;overflow-wrap:anywhere}
.tree-row.lv1 .nm{font-weight:800} .tree-row.lv2 .nm{font-weight:700} .tree-row.lv3 .nm{font-weight:600}
.tree-row.off{opacity:.5}
.tree-meta{color:var(--muted);font-size:.76rem;white-space:nowrap;flex:0 0 auto}
.tree-act{display:flex;gap:.3rem;flex:0 0 auto;opacity:0;transition:.12s}
.tree-row:hover .tree-act,.tree-row:focus-within .tree-act{opacity:1}
@media(max-width:860px){ .tree-act{opacity:1} .tree-row{flex-wrap:wrap} }

/* ---------------------------------------------------------------------
   Dashboard yang bisa disusun sendiri (PRD §8)
   --------------------------------------------------------------------- */
.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-bottom:1.1rem}
.w2{grid-column:span 2} .w3{grid-column:span 3}
@media(max-width:1000px){ .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .w3{grid-column:span 2} }
@media(max-width:680px){ .dash-grid{grid-template-columns:minmax(0,1fr)} .w2,.w3{grid-column:span 1} }

.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.05rem 1.15rem;display:flex;flex-direction:column;min-width:0}
.widget-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.85rem}
.widget-head h3{margin:0;font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}
.widget-head a{font-size:.76rem;font-weight:700;white-space:nowrap}
.widget .big{font-size:1.9rem;font-weight:800;line-height:1.1;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.widget .sub{color:var(--muted);font-size:.8rem;margin-top:.3rem}
.widget.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.widget.dark .widget-head h3{color:#9a9a97}
.widget.dark .sub{color:#b9b9b9}
.widget-empty{color:var(--muted);font-size:.85rem;padding:1.2rem 0;text-align:center}

/* Gauge setengah lingkaran + garis target waktu (serapan vs tahun berjalan) */
.gauge{position:relative;width:100%;max-width:250px;margin:0 auto}
.gauge svg{width:100%;height:auto;display:block}
.gauge-track{fill:none;stroke:var(--alur);stroke-width:15;stroke-linecap:round}
.gauge-fill{fill:none;stroke:var(--serap-aman);stroke-width:15;stroke-linecap:round;transition:stroke-dashoffset .5s}
.gauge-fill.waspada{stroke:var(--serap-waspada)} .gauge-fill.bahaya{stroke:var(--serap-bahaya)}
.gauge-target{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:3 2.5}
.gauge-val{position:absolute;left:0;right:0;bottom:.2rem;text-align:center}
.gauge-val .n{font-size:2rem;font-weight:800;line-height:1}
.gauge-val .t{font-size:.74rem;color:var(--muted);margin-top:.15rem}

/* Grafik batang berpasangan pagu vs realisasi per bulan (CSS murni, tanpa pustaka) */
.mbar{display:flex;align-items:flex-end;gap:.45rem;height:170px;padding-top:.4rem}
.mbar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:0;height:100%}
.mbar-pair{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;width:100%;min-height:0}
.mbar-b{width:44%;max-width:15px;border-radius:3px 3px 0 0;transition:height .3s}
.mbar-b.pagu{background:var(--bar-pagu)}
.mbar-b.real{background:var(--green)}
.mbar-b.real.waspada{background:var(--amber)} .mbar-b.real.bahaya{background:var(--red)}
.mbar-x{font-size:.64rem;color:var(--muted);white-space:nowrap}
.mbar-col.now .mbar-x{color:var(--ink);font-weight:800}

/* Snapshot 4 kuartal */
.kuartal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.kuartal-box{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;min-width:0}
.kuartal-box .q{font-family:var(--display);font-size:1.05rem;letter-spacing:.02em}
.kuartal-box .v{font-weight:700;font-size:.88rem;margin:.25rem 0 .4rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kuartal-box.now{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
@media(max-width:680px){ .kuartal-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Editor dashboard: daftar widget yang bisa digeser urutannya */
.wl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.wl li{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border:1px solid var(--line);
  border-radius:9px;background:#fff}
.wl li.drag{opacity:.45;border-style:dashed}
.wl li.over{border-color:var(--green);box-shadow:0 0 0 2px var(--green-bg)}
.wl .grip{cursor:grab;color:#b5b5b1;font-size:1.05rem;letter-spacing:-1px;flex:0 0 auto;user-select:none}
.wl .wl-nama{flex:1;min-width:0;font-weight:600;font-size:.88rem}
.wl .wl-desc{display:block;font-weight:400;font-size:.76rem;color:var(--muted);margin-top:.1rem}
.wl select{width:auto;font-size:.78rem;padding:.25rem .5rem;flex:0 0 auto}
.wl li.mati{background:#fafafa} .wl li.mati .wl-nama{color:var(--muted)}

/* ---------------------------------------------------------------------
   Kunci periode — 12 kotak bulan
   --------------------------------------------------------------------- */
.bulan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.bulan-box{border:1px solid var(--line);border-radius:10px;padding:.75rem .85rem;min-width:0}
.bulan-box .b{font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.bulan-box .v{font-size:.88rem;font-weight:700;margin:.3rem 0 .55rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bulan-box.locked{background:#f4f4f2;border-color:#d6d6d2}
.bulan-box.locked .b{color:var(--muted)}
.bulan-box form{margin:0}
@media(max-width:860px){ .bulan-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:480px){ .bulan-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------------------------------------------------------------------
   Serba-serbi
   --------------------------------------------------------------------- */
.empty{text-align:center;padding:2.6rem 1rem;color:var(--muted)}
.empty .t{font-weight:700;color:var(--ink);margin-bottom:.3rem}
.hint{color:var(--muted);font-size:.8rem;line-height:1.5;margin-top:.35rem}
.num-cell{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.1rem}
.form-grid .full{grid-column:1/-1}
@media(max-width:860px){ .form-grid{grid-template-columns:1fr} }
/* Tombol tambah mengambang di HP — jalur tercepat ke input realisasi */
.fab{display:none}
@media(max-width:860px){
  .fab{display:flex;position:fixed;right:1rem;bottom:1rem;z-index:15;width:54px;height:54px;
    border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;
    box-shadow:0 6px 20px rgba(10,10,10,.3)}
  .fab .ico{width:24px;height:24px}
  .content{padding-bottom:5rem}
}
/* Cetak: hanya isi laporan, tanpa sidebar/topbar/kontrol */
@media print{
  .sidebar,.topbar,.filterbar,.fab,.nav-backdrop,.btn,.pager{display:none!important}
  .layout{display:block} .content{padding:0;max-width:none}
  .card,.widget{border:none;box-shadow:none;padding:0}
  .tbl-lap th{position:static;background:#eee!important;color:#000!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tbl-lap tr.total>td{position:static;background:#ddd!important;color:#000!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-head{display:block!important}
}
.print-head{display:none}

/* =====================================================================
   MODUL E · LAPORAN — tambahan minimal untuk bilah filter & halaman laporan.
   (Ditaruh paling bawah sesuai aturan kepemilikan berkas.)
   ===================================================================== */
/* Kontrol turunan periode (Bulan/Kuartal/Semester/Rentang) hanya muncul sesuai
   pilihan. Butuh selector 3 tingkat karena .filterbar .fb-item sudah display:flex,
   yang akan mengalahkan atribut [hidden] bawaan browser. */
.filterbar .fb-item.fb-hide{display:none}
/* Bagian & Penginput boleh dipilih beberapa sekaligus — beri tinggi yang wajar
   supaya terlihat bahwa daftarnya bisa digulir, bukan dropdown biasa. */
.filterbar select[multiple]{min-height:74px;padding:.3rem .4rem;line-height:1.5}
/* Kop cetak: hanya muncul saat dicetak (aturan @media print di atas). */
.print-head h1{font-size:1.15rem;margin:.15rem 0 .3rem}
.print-head h2{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:#444}
.print-head{margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1.5px solid var(--ink)}

/* =====================================================================
   Modul Realisasi (agen D) — tambahan kecil untuk daftar transaksi.
   Dua kelas saja; sisanya memakai komponen yang sudah ada di atas.
   ===================================================================== */

/* Chip bagian: warnanya datang dari data (bagian.warna), jadi latar belakangnya
   diset lewat atribut style di template — bentuk & tipografinya di sini.
   `background:var(--muted)` adalah cadangan untuk bagian yang belum diberi warna;
   dengan begitu template tidak perlu menuliskan hex sendiri. */
.bagian-chip{display:inline-block;padding:2px 9px;border-radius:20px;color:#fff;
  background:var(--muted);font-weight:700;font-size:.74rem;line-height:1.5;white-space:nowrap}

/* Baris TOTAL di kaki daftar transaksi — ikut berubah bersama filter. */
.tx-total td{background:var(--ink);color:#fff;font-weight:800;border-bottom:none}
.tx-total td:first-child{letter-spacing:.02em}
@media(max-width:640px){
  .tbl--cards tr.tx-total{border-color:var(--ink)}
  .tbl--cards tr.tx-total td::before{color:#b9b9b9}
}

/* =====================================================================
   MODUL H — ADMINISTRASI (Kunci Periode · Pengaturan · Audit Log)
   Prefiks .adm-* supaya tidak bertabrakan dengan komponen modul lain.
   ===================================================================== */

/* Ikon garis di dalam tombol/paragraf. Macro ic.icon() memakai viewBox tanpa
   width/height, jadi tanpa aturan ini SVG-nya melar ke ukuran bawaan 300x150. */
.adm-ico .ico{width:15px;height:15px;vertical-align:-3px}

.adm-sub{margin:1.3rem 0 .6rem;font-size:.95rem}
.adm-list{margin:.45rem 0;padding-left:1.15rem}
.adm-list li{margin:.15rem 0}

/* Pengungkap isi panjang: rincian audit & form buka kunci periode. Isi berat
   (JSON, form beralasan) disembunyikan sampai memang diminta. */
.adm-det{margin-top:.35rem}
.adm-det>summary{display:inline-block;cursor:pointer;color:var(--brand);font-size:.78rem;
  font-weight:700;list-style:none}
.adm-det>summary::-webkit-details-marker{display:none}
.adm-det>summary::before{content:'▸ ';font-size:.7rem}
.adm-det[open]>summary::before{content:'▾ '}
.adm-det input[type=text]{margin:.45rem 0;padding:.4rem .55rem;font-size:.82rem}

/* Daftar kolom yang berubah — nilai lama dicoret merah, nilai baru hijau. */
.adm-chg{list-style:none;margin:.45rem 0 0;padding:0;font-size:.78rem;line-height:1.6}
.adm-chg li{padding:.12rem 0;overflow-wrap:anywhere}
.adm-chg .lama{color:var(--red);text-decoration:line-through}
.adm-chg .baru{color:var(--green);font-weight:700}
.adm-chg .panah{color:var(--muted);padding:0 .15rem}

/* JSON mentah kolom sebelum/sesudah */
.adm-json-lbl{margin-top:.5rem;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#6b7280}
.adm-json{margin:.2rem 0 0;padding:.55rem .7rem;background:#f7f7f4;border:1px solid var(--line);
  border-radius:8px;font-family:'Consolas',monospace;font-size:.75rem;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}

.adm-sum{max-width:420px;overflow-wrap:anywhere;line-height:1.45}
.adm-ip{display:block}

/* Filter Audit Log — filternya milik halaman ini sendiri (waktu kejadian),
   bukan bilah filter global yang terikat tahun anggaran. */
.adm-f{flex:0 1 auto;margin:0;font-size:.68rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#6b7280}
.adm-f input,.adm-f select{display:block;width:100%;min-width:168px;max-width:none;
  margin-top:.25rem;padding:.45rem .6rem;font-size:.85rem;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--ink)}

@media(max-width:860px){
  .adm-f{flex:1 1 100%}
  .adm-f input,.adm-f select{min-width:0}
}
@media(max-width:640px){
  /* Sel ringkasan berisi teks panjang + pengungkap rincian; dijejer kanan-kiri
     seperti sel kartu lain, isinya jadi terjepit. */
  .tbl--cards td.adm-sum{display:block;text-align:left}
  .tbl--cards td.adm-sum::before{display:block;margin-bottom:.2rem}
  .adm-sum{max-width:none}
}

/* =====================================================================
   MODUL G — DASHBOARD: komponen widget yang belum ada di bagian atas.
   Semua warna memakai token app.css; warna irisan donat & bagian datang
   dari DATA (atribut inline), bukan dari kelas.
   ===================================================================== */

/* Widget yang seluruh kotaknya bisa diklik menuju laporan detail. */
a.widget,a.kuartal-box,a.mbar-col,a.hbar,a.leg-i{color:inherit;text-decoration:none}
a.widget:hover,a.kuartal-box:hover{border-color:var(--ink)}
a.mbar-col:hover .mbar-x,a.hbar:hover .hbar-nm,a.leg-i:hover .leg-nm{color:var(--ink);font-weight:700}
.widget .ico{width:14px;height:14px;vertical-align:-2px}

/* Bar horizontal bertumpuk ke bawah — Top 10 Penyerap. */
.hbar-list{display:flex;flex-direction:column;gap:.6rem}
.hbar{display:block}
.hbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;
  font-size:.8rem;margin-bottom:.22rem}
.hbar-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.hbar-v{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.hbar-track{display:block;height:8px;background:var(--alur);border-radius:4px;overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:4px;background:var(--serap-aman)}
.hbar-fill.waspada{background:var(--serap-waspada)}
.hbar-fill.bahaya{background:var(--serap-bahaya)}

/* Donat komposisi belanja — lingkaran ber-stroke, dipotong stroke-dasharray. */
.donut{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.donut svg{width:126px;height:126px;flex:0 0 auto;transform:rotate(-90deg)}
.donut-seg{fill:none;stroke-width:16}

/* Keterangan warna — dipakai donat & serapan per bagian. */
.leg{display:flex;flex-direction:column;gap:.4rem;flex:1 1 150px;min-width:0;font-size:.82rem}
.leg-i{display:flex;align-items:center;gap:.5rem;min-width:0}
.leg-dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.leg-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.leg-v{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}

/* Bar bertumpuk mendatar — kontribusi tiap bagian terhadap total realisasi. */
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--alur);margin-bottom:.8rem}
.stack>span{display:block;height:100%;min-width:2px}

/* Kurva kumulatif (kelas garis .tc-* sudah ada di app.css). */
.tchart svg{width:100%;height:auto;display:block}

/* Penyusunan dashboard: tombol naik/turun — jalur tanpa JS & jalur di HP. */
.wl-ord{display:flex;gap:.25rem;flex:0 0 auto}
.wl-ord .btn{padding:.2rem .45rem;line-height:1.1}
.wl li[draggable=true]{cursor:default}
.dash-preset{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.55rem 0;
  border-bottom:1px solid var(--line)}
.dash-preset:last-child{border-bottom:none}
.dash-preset .nm{flex:1;min-width:0;font-weight:600}
@media(max-width:680px){
  .wl li{flex-wrap:wrap}
  .wl .wl-nama{flex:1 1 100%;order:-1}
  .wl select{flex:1 1 auto}
}

/* =====================================================================
   INTEGRASI — aturan yang baru terlihat perlu setelah seluruh modul disatukan.
   ===================================================================== */

/* Ikon di dalam tombol. `ic.icon()` memakai viewBox tanpa width/height, jadi
   tanpa aturan ini SVG-nya memakai ukuran bawaan elemen tergantikan (300×150px)
   dan meledakkan tombolnya. Sengaja satu aturan generik di sini, bukan satu
   kelas pembungkus per modul. */
.btn .ico{width:15px;height:15px;flex:0 0 auto;vertical-align:-2px}
.btn.sm .ico{width:13px;height:13px}

/* =====================================================================
   AUDIT TAMPILAN — kelas yang sebelumnya ditulis sebagai hex mentah di
   template, plus penyelarasan tabel laporan di HP. Ditaruh paling bawah
   sesuai aturan kepemilikan berkas.
   ===================================================================== */

/* Keterangan warna yang warnanya TETAP (bukan dari data): batang pagu abu-abu
   dan batang realisasi hijau pada grafik Pagu vs Realisasi per Bulan. */
.leg-dot.pagu{background:var(--bar-pagu)}
.leg-dot.real{background:var(--green)}

/* Cincin dasar donat komposisi — bagian yang belum terisi irisan mana pun. */
.donut-track{stroke:var(--alur)}

/* Logo bawaan di kotak pratinjau halaman Pengaturan. */
.logo-tile .rja-logo{height:44px;width:auto;color:var(--ink)}

/* Angka negatif (sisa pagu minus) di luar .pp-row — mis. ringkasan "setelah
   transaksi ini" pada form realisasi. Merah yang sama dengan sisa lainnya. */
.neg{color:var(--red)}

/* Tabel laporan lebar yang JUGA berubah jadi kartu di HP (mis. Kuartalan,
   12 Bulan, Rekap per Bagian). Pembekuan kolom & baris TOTAL yang menempel
   hanya masuk akal saat tabelnya masih tabel; begitu tiap sel jadi blok,
   position:sticky justru membuat sel-sel itu melayang di atas kartu. */
@media(max-width:640px){
  .tbl-lap.tbl--cards.freeze-1 th:first-child,
  .tbl-lap.tbl--cards.freeze-1 td:first-child{position:static;box-shadow:none}
  .tbl-lap.tbl--cards tr.total>td{position:static}
  /* Label kolom di kartu TOTAL berlatar hitam: abu-abu terang, bukan --muted. */
  .tbl-lap.tbl--cards tr.total td::before{color:#b9b9b9}
}

/* ---------------------------------------------------------------------
   Perbaikan tata letak HP — ditemukan dengan mengukur geometri hasil render
   di lebar 375px, bukan dari membaca kode. Keduanya lolos 660 tes otomatis
   karena tak satu pun tes mengukur posisi piksel.
   --------------------------------------------------------------------- */

/* .chk diwarisi dari sistem desain asal, tempat isinya satu-dua kata ("Aktif"),
   sehingga white-space:nowrap aman di sana. Di RJA label pilihan berisi kalimat
   penuh — mis. penjelasan aturan lebih-pagu di Pengaturan — dan nowrap membuatnya
   menonjol 269px keluar layar. Dibiarkan membungkus; label pendek tetap tak
   terpotong karena memang muat. */
.chk{white-space:normal;align-items:flex-start;line-height:1.45}
.chk input[type=checkbox],.chk input[type=radio]{margin-top:.2rem}

@media(max-width:640px){
  /* Pohon kode: indentasi 4 level (3 x 1.35rem) + kolom kode 78px + keterangan
     + tombol aksi tidak muat di 375px. Tombol turun ke barisnya sendiri dan
     indentasinya dipendekkan, alih-alih memaksa halaman bisa digeser mendatar. */
  .tree ul{padding-left:.6rem}
  .tree-row{align-items:flex-start}
  .tree-row .kode{min-width:0}
  .tree-meta{white-space:normal}
  .tree-act{width:100%;justify-content:flex-end;margin-top:.25rem}
}

/* ---------------------------------------------------------------------
   Bilah filter yang bisa dilipat di HP (templates/_filterbar.html).
   Terukur sebelum ini ada: di layar 375px bilah filter setinggi 993px dan
   angka pertama baru terlihat setelah menggulir 1339px. Di layar lebar
   tidak ada yang berubah — pelipatnya hanya hidup di bawah 860px.
   --------------------------------------------------------------------- */
/* Disembunyikan tanpa membuat halaman bisa digeser mendatar.
   Dua kekeliruan yang sudah terukur dan dihindari di sini:
   1. `position:absolute` TANPA koordinat tidak memindahkan apa pun — elemen tetap
      duduk di posisi statisnya, yaitu ujung baris flex, dan menonjol keluar layar.
   2. `clip-path`/`clip` hanya memengaruhi PENGGAMBARAN, bukan kotak tata letak;
      getBoundingClientRect() tetap melaporkan kotak yang menonjol itu, dan
      peramban tetap memunculkan gulir mendatar.
   Karena itu ia dijangkarkan ke sudut .filterbar dengan left/top eksplisit.
   Tetap fokusable supaya bisa dipakai keyboard — cincin fokusnya muncul di label
   lewat .fb-buka:focus-visible ~ .fb-toggle.

   Selektornya sengaja `.filterbar .fb-buka` (0,2,0), bukan `.fb-buka` (0,1,0):
   aturan lebar `.filterbar input{width:100%}` di blok responsif punya bobot lebih
   tinggi dan akan melebarkan kotak ini jadi selebar bilahnya. */
.filterbar{position:relative}
.filterbar .fb-buka{position:absolute;left:0;top:0;width:1px;height:1px;min-width:0;
  margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.fb-toggle{display:none}
@media(max-width:860px){
  .fb-toggle{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;
    font-size:.9rem;font-weight:600;color:var(--ink);padding:.1rem 0;user-select:none}
  .fb-toggle b{font-weight:800}
  .fb-toggle .ico{color:var(--green)}
  /* Periode aktif tetap terbaca walau bilahnya tertutup — supaya pengguna tak perlu
     membukanya cuma untuk memastikan sedang melihat bulan apa. */
  .fb-toggle-ket{color:var(--muted);font-weight:500;font-size:.82rem;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fb-toggle::after{content:'▾';margin-left:auto;color:var(--muted);flex:0 0 auto;
    font-size:.8rem;padding-left:.4rem}
  .fb-buka:checked ~ .fb-toggle::after{content:'▴'}
  .fb-buka:focus-visible ~ .fb-toggle{outline:2px solid var(--ink);outline-offset:3px;
    border-radius:6px}

  .filterbar-row{display:none}
  .fb-buka:checked ~ .filterbar-row{display:flex}
  /* Tertutup: ringkasan filter menempel langsung di bawah tombol tanpa garis
     pemisah yang tak lagi memisahkan apa pun. */
  .fb-buka:not(:checked) ~ .fb-summary{border-top:none;margin-top:.5rem;padding-top:0}
}

/* Plafon institusi: kotak isian di dalam panel gelap .pagu-total. Dibuat
   sebesar angka di sebelahnya supaya terbaca sebagai "angka yang kamu patok",
   bukan sebagai field formulir kecil yang mudah terlewat. */
.pagu-total .pg-plafon{width:100%;max-width:290px;background:transparent;border:none;
  border-bottom:2px solid #4a4a4a;border-radius:0;color:#fff;font-family:inherit;
  font-size:1.9rem;font-weight:800;line-height:1.1;padding:0 0 .1rem;
  font-variant-numeric:tabular-nums}
.pagu-total .pg-plafon:focus{outline:none;border-bottom-color:var(--green);box-shadow:none}
.pagu-total .pg-plafon:read-only{border-bottom-style:dashed;color:#d8d8d4}
.pagu-total .big.neg{color:#ff6b6b}
/* Pola bulanan: 12 kotak sempit yang tetap terbaca; di HP tabelnya digeser
   mendatar (.scroll-x) alih-alih dipaksa muat dan jadi terlalu kecil disentuh. */
.tbl-pagu input[data-rol="plafon-bulan"]{min-width:104px}

/* Judul langkah di layar Susun Pagu ("1 · Plafon…", "2 · Alokasi…"). Kelas ini
   dulu ada di app.css warisan, lalu ikut terhapus saat pembersihan selektor
   domain lama — dipasang kembali di sini karena sekarang benar-benar dipakai. */
.section-title{margin:1.6rem 0 .9rem;font-size:1.1rem}
.section-title:first-child{margin-top:0}