/* ===================================================================== * SIPADU PEMDI — gaya khusus aplikasi * ===================================================================== * Berkas ini HANYA berisi kerangka halaman (topbar, sidebar, navigasi * bawah) dan sedikit utilitas yang memang tidak disediakan design system. * * ATURAN: * - Komponen (tombol, kartu, tabel, input, badge, modal, dsb) TIDAK * digayakan di sini — pakai kelas resmi `.ina-*` dari INA Digital * Design System (public/assets/vendor/idds/idds.min.css). * - Semua warna, jarak, radius, dan ukuran font di bawah WAJIB memakai * token `--ina-*`. Jangan menuliskan nilai hex langsung, supaya saat * design system diperbarui (atau tema brand diganti lewat atribut * data-brand pada ) tampilan ikut menyesuaikan otomatis. * ===================================================================== */ :root { /* Tinggi RENDER sebenarnya .ina-text-field__wrapper--size-sm (terukur di peramban): height 40px + padding 8+8 + border 1+1, karena box-sizing-nya content-box. Dipakai menyamakan tinggi tombol aksi di sebelah isian. */ --sipadu-tinggi-isian-sm: 58px; --sipadu-sidebar-width: 280px; --sipadu-topbar-height: 64px; --sipadu-bottom-nav-height: 64px; } /* --------------------------------------------------------------------- * Kerangka halaman * ------------------------------------------------------------------ */ body.sipadu-body { margin: 0; background: var(--ina-background-secondary); color: var(--ina-content-primary); font-size: var(--ina-font-sm); } .sipadu-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--sipadu-topbar-height)); } .sipadu-main { flex: 1 1 auto; min-width: 0; /* penting: mencegah tabel lebar mendorong layout */ } .sipadu-container { padding: var(--ina-spacing-4, 1rem); max-width: 1440px; } @media (min-width: 992px) { .sipadu-container { padding: var(--ina-spacing-6, 1.5rem); } } /* Ruang ekstra di bawah agar konten tidak tertutup navigasi bawah (mobile) */ .sipadu-main.has-bottom-nav { padding-bottom: calc(var(--sipadu-bottom-nav-height) + 1rem); } @media (min-width: 992px) { .sipadu-main.has-bottom-nav { padding-bottom: 0; } } /* --------------------------------------------------------------------- * Topbar * ------------------------------------------------------------------ */ .sipadu-topbar { position: sticky; top: 0; z-index: 1030; height: var(--sipadu-topbar-height); background: var(--ina-background-primary); border-bottom: 1px solid var(--ina-stroke-primary); } .sipadu-topbar__inner { height: 100%; display: flex; align-items: center; gap: var(--ina-spacing-3, 0.75rem); padding: 0 var(--ina-spacing-4, 1rem); } .sipadu-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--ina-spacing-2, 0.5rem); } /* Tautan yang berperan sebagai tombol. IDDS tidak mematikan garis bawah pada .ina-button (komponennya dirancang untuk