/* =================================================================== Aplikasi Akuntansi — gaya tambahan di atas Bootstrap 5.3 =================================================================== */ :root { --app-sidebar-width: 264px; --app-sidebar-bg: #10263f; --app-sidebar-bg-hover: #1b3a5c; --app-accent: #0d6efd; /* Ditimpa dari Pengaturan → Tampilan (lihat font_style_vars()) */ --app-font-size: 15px; --app-report-font-size: 12px; } body { background-color: #f4f6fa; font-size: var(--app-font-size, 15px); } [data-bs-theme="dark"] body { background-color: #12161c; } /* ------------------------------------------------------------ Sidebar */ .app-sidebar { position: fixed; top: 0; inset-inline-start: 0; width: var(--app-sidebar-width); height: 100vh; background: var(--app-sidebar-bg); color: #cbd6e4; display: flex; flex-direction: column; z-index: 1040; overflow-y: auto; transition: transform .2s ease-in-out; } .app-sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1.05rem 1.15rem; color: #fff; font-weight: 600; letter-spacing: .2px; border-bottom: 1px solid rgba(255, 255, 255, .08); text-decoration: none; } .app-sidebar .brand .bi { font-size: 1.4rem; color: #5aa9ff; } .app-sidebar .nav-section { padding: 1rem 1.15rem .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: #7d93ad; } .app-sidebar .nav-link { display: flex; align-items: center; gap: .65rem; padding: .55rem 1.15rem; color: #c3d0e0; border-inline-start: 3px solid transparent; font-size: .9rem; } .app-sidebar .nav-link:hover { background: var(--app-sidebar-bg-hover); color: #fff; } .app-sidebar .nav-link.active { background: var(--app-sidebar-bg-hover); color: #fff; border-inline-start-color: #5aa9ff; font-weight: 500; } .app-sidebar .nav-link .bi { width: 1.1rem; text-align: center; } /* Kelompok menu yang dapat dilipat */ .app-sidebar .nav-group { width: 100%; background: none; border: 0; text-align: start; } .app-sidebar .nav-caret { font-size: .7rem; transition: transform .15s ease-in-out; } .app-sidebar .nav-group.collapsed .nav-caret { transform: rotate(-90deg); } /* Anak menu: tanpa ikon, menjorok, dan sedikit lebih kecil */ .app-sidebar .nav-sub .nav-link { padding-block: .4rem; padding-inline-start: 3rem; font-size: .86rem; } .app-sidebar .nav-sub .nav-link.active { font-weight: 600; } .app-sidebar .sidebar-footer { margin-top: auto; padding: .9rem 1.15rem; font-size: .75rem; color: #7d93ad; border-top: 1px solid rgba(255, 255, 255, .08); } /* --------------------------------------------------------- Area utama */ .app-main { margin-inline-start: var(--app-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-inline-start .2s ease-in-out; } /* Sidebar disembunyikan di layar lebar; pilihannya disimpan di localStorage dan dipasang sejak agar tidak ada kedipan saat halaman dimuat. */ @media (min-width: 992px) { html.sidebar-hidden .app-sidebar { transform: translateX(-100%); } html.sidebar-hidden .app-main { margin-inline-start: 0; } } .app-topbar { background: #fff; border-bottom: 1px solid var(--bs-border-color); padding: .65rem 1.25rem; position: sticky; top: 0; z-index: 1030; } [data-bs-theme="dark"] .app-topbar { background: #1b2027; } .app-content { padding: 1.25rem; flex: 1 1 auto; } @media (max-width: 991.98px) { .app-sidebar { transform: translateX(-100%); transition: transform .2s ease-in-out; } .app-sidebar.show { transform: translateX(0); box-shadow: 0 0 30px rgba(0, 0, 0, .35); } .app-main { margin-inline-start: 0; } .app-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1035; } } /* ------------------------------------------------------------- Kartu */ .card { border: 1px solid var(--bs-border-color-translucent); box-shadow: 0 1px 2px rgba(16, 38, 63, .05); } .card-header { background: transparent; font-weight: 600; padding: .8rem 1rem; } .stat-card .stat-icon { width: 46px; height: 46px; border-radius: .6rem; display: grid; place-items: center; font-size: 1.3rem; } .stat-card .stat-value { font-size: 1.35rem; font-weight: 600; line-height: 1.2; } .stat-card .stat-label { font-size: .78rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; } /* ------------------------------------------------------------- Tabel */ /* Ukuran font tabel laporan diatur global lewat Pengaturan → Tampilan */ .table-report { font-variant-numeric: tabular-nums; font-size: var(--app-report-font-size, 12px); } .table-report th { font-size: .92em; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); } .table-report td, .table-report th { vertical-align: middle; } /* Baris rapat agar laporan lebar tetap muat */ .table-report.table-sm > :not(caption) > * > * { padding: .3rem .4rem; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Kolom angka menyusut sesuai isinya sehingga kolom nama akun mendapat sisa ruang dan tidak terpotong ke beberapa baris. */ .table-report th.num, .table-report td.num { width: 1%; } .text-mono { font-family: var(--bs-font-monospace); font-size: .85em; } /* Anak flex baru mau menyusut kalau lebar minimumnya dilepas */ .min-width-0 { min-width: 0; } /* Kolom pendamping ikut terlihat saat kolom utama yang panjang digulir. Batas tinggi menjaga bagian bawahnya tetap terjangkau di layar pendek. */ @media (min-width: 1200px) { .side-stack { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; } } .row-group td { background: var(--bs-tertiary-bg); font-weight: 600; } .row-total td { border-top: 2px solid var(--bs-border-color); font-weight: 600; } .row-grand td { border-top: 3px double var(--bs-border-color); border-bottom: 3px double var(--bs-border-color); font-weight: 700; } /* -------------------------------------------------- Form baris jurnal */ .journal-line input.amount { text-align: right; } .journal-line .form-select, .journal-line .form-control { font-size: .875rem; } .balance-indicator.ok { color: var(--bs-success); } .balance-indicator.off { color: var(--bs-danger); } /* ----------------------------------------------------------- Select2 */ /* Samakan tinggi & tipografi dengan kontrol Bootstrap */ .select2-container--bootstrap-5 .select2-selection { min-height: calc(1.5em + .75rem + 2px); } .select2-container--bootstrap-5.select2--small .select2-selection { min-height: calc(1.5em + .5rem + 2px); font-size: .875rem; } /* Baris jurnal & rincian faktur memakai kontrol berukuran kecil */ .journal-line .select2-container, .invoice-item .select2-container { font-size: .875rem; } /* Dropdown selalu di atas offcanvas/sticky topbar */ .select2-container--open { z-index: 1060; } .select2-container--bootstrap-5 .select2-dropdown { box-shadow: 0 .5rem 1rem rgba(16, 38, 63, .12); } /* ------------------------------------------------------------- Cetak */ .print-header { border-bottom: 2px solid #000; margin-bottom: 1rem; padding-bottom: .6rem; } @media print { .no-print, .app-sidebar, .app-topbar, .select2-container { display: none !important; } .app-main { margin: 0; } .app-content { padding: 0; } body { background: #fff; font-size: calc(var(--app-font-size, 15px) - 2px); } .card { border: 0; box-shadow: none; } .table { font-size: var(--app-report-font-size, 12px); } a[href]:after { content: ""; } }