(yang position:relative & overflow-hidden) -- jadi inilah yang seharusnya jadi kontainer scroll-nya, bukan .page-content di bawahnya. position:absolute + inset:0 membuatnya persis mengisi kotak

(termasuk ikut turun sesuai padding-top header mobile), lalu overflow-y:auto di sini yang benar-benar aktif men-scroll konten yang lebih tinggi dari layar. */ .page-container { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Utils */ .d-none { display: none !important; } /* Mobile Sidebar Overlays */ #mobile-overlay.active { opacity: 1; pointer-events: auto; } .sidebar-container { transform: translateX(0); } @media (max-width: 1024px) { .sidebar-container { transform: translateX(-100%); position: absolute; left: 0; top: 0; } .sidebar-container.open { transform: translateX(0); } } /* .page-content menggantikan .page-transition (MPA: 1 halaman = 1 file, tidak perlu animasi show/hide) */ /* PENTING (perbaikan bug tidak bisa di-scroll di HP): dulu cuma pakai min-height:100%, jadi elemen ini bebas tumbuh setinggi apapun mengikuti isinya lalu "meluber" keluar dari

(yang overflow-nya default visible) sampai akhirnya kepotong oleh yang overflow-hidden -- hasilnya konten kepotong & TIDAK BISA discroll sama sekali, paling kerasa di HP karena kontennya menumpuk 1 kolom jadi lebih tinggi dari layar. Sekarang .page-content jadi flex child yang mengisi SISA tinggi

(flex:1 1 auto) dan overflow-y:auto beneran aktif karena tingginya dibatasi (min-height:0 wajib ada, ini "gotcha" flexbox: tanpa ini, flex child tidak mau menyusut di bawah tinggi isinya). */ .page-content { width: 100%; min-height: 100%; padding: 2rem; } @media (max-width: 768px) { .page-content { padding: 1.25rem; } } /* ===== Halaman Cetak Data ===== */ .cetak-blok { margin-bottom: 1.75rem; } .cetak-blok:last-child { margin-bottom: 0; } .cetak-blok-judul { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; border-bottom: 2px solid #1e293b; padding-bottom: .4rem; margin-bottom: .6rem; } .cetak-blok-judul h3 { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 0; } .cetak-blok-judul span { font-size: .72rem; font-weight: 600; color: #475569; white-space: nowrap; } table.cetak-tabel { width: 100%; border-collapse: collapse; font-size: .82rem; } table.cetak-tabel thead tr { background: #1e293b; color: #fff; } table.cetak-tabel th { padding: .5rem .6rem; text-align: left; font-weight: 700; border: 1px solid #1e293b; } table.cetak-tabel .cetak-td { padding: .5rem .6rem; border: 1px solid #cbd5e1; color: #1e293b; } table.cetak-tabel tbody tr:nth-child(even) { background: #f8fafc; } /* Sembunyikan semua elemen non-cetak & tampilkan hanya area cetak saat print */ @media print { @page { size: A4 portrait; margin: 14mm 12mm; } body * { visibility: hidden; } #cetak-print-area, #cetak-print-area * { visibility: visible; } #cetak-print-area { position: absolute; top: 0; left: 0; width: 100%; padding: 0; margin: 0; background: #fff !important; } #cetak-print-area .cetak-blok { page-break-inside: avoid; } #cetak-print-area .cetak-blok + .cetak-blok { page-break-before: auto; } table.cetak-tabel thead tr { background: #1e293b !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }