… header surface, judul 18px, garis divider */
.ps-modal .modal-header { background: var(--ps-surface); border-bottom-color: var(--ps-divider); }
.ps-modal .modal-title { font-size: var(--ps-fs-h); font-weight: 700; line-height: 1.3; color: var(--ps-text); }
.ps-modal .modal-footer { border-top-color: var(--ps-divider); }
/* ============ 6. ISIAN & BARIS FILTER ============
Label SELALU di atas input.
Galat & wajib-isi memakai Bootstrap (is-invalid + invalid-feedback, text-danger) — warnanya sudah tema. */
.ps-field { margin-bottom: var(--ps-sp-4); }
.ps-field > label { display: block; font-size: var(--ps-fs-sm); font-weight: 600; color: var(--ps-text-muted); margin-bottom: var(--ps-sp-1); }
.ps-field .form-control,
.ps-field .custom-select { height: var(--ps-control-h); font-size: var(--ps-fs-body); }
.ps-field textarea.form-control { height: auto; }
.ps-field .form-text, .ps-field .invalid-feedback { font-size: var(--ps-fs-sm); }
/* select2 (tema bootstrap4) di dalam ps-field: tinggi 48px. Warnanya diselaraskan global di §8.
select2-bootstrap4.min.css memakai height:…!important → !important WAJIB (D58, frontend-conventions §5 #18). */
.ps-field .select2-container--bootstrap4 .select2-selection--single { height: var(--ps-control-h) !important; }
.ps-field .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
line-height: calc(var(--ps-control-h) - 2px); font-size: var(--ps-fs-body); color: var(--ps-text); padding-left: .75rem;
}
.ps-field .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { height: calc(var(--ps-control-h) - 2px); }
/* teks galat/valid di atas latar surface (kartu, pita panel): token -ink agar tetap >= 4.5:1 (merah solid 4.1:1) */
:is(.ps-card, .ps-panel-band) .invalid-feedback { color: var(--ps-danger-ink); }
:is(.ps-card, .ps-panel-band) .valid-feedback { color: var(--ps-success-ink); }
/* Baris filter: isian + tombol sejajar di bawah (tombol tidak turun karena hint/label).
Hint (.form-text) jangan diletakkan di dalam baris filter — taruh di bawahnya. */
.ps-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ps-sp-3) var(--ps-sp-4); margin-bottom: var(--ps-sp-4); }
.ps-filter > .ps-field { flex: 1 1 200px; margin-bottom: 0; }
.ps-filter > .ps-filter-actions { display: flex; flex-wrap: wrap; gap: var(--ps-sp-2); }
/* ============ 7. JUDUL HALAMAN ============ */
.ps-page-head {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px;
margin-bottom: 18px; padding-left: 14px; border-left: 4px solid var(--ps-action);
}
.ps-page-head h1, .ps-page-head h2 { font-size: var(--ps-fs-title); font-weight: 800; line-height: 1.2; color: var(--ps-text); margin: 0 0 4px; }
.ps-page-head p { font-size: var(--ps-fs-body); color: var(--ps-text-muted); margin: 0; max-width: 70ch; }
.ps-page-head .ps-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* ============ 8. PENYELARASAN GLOBAL — komponen di luar build Bootstrap (BUKAN opt-in) ============
Satu-satunya bagian file ini yang berlaku ke semua halaman. Isinya hanya WARNA, untuk komponen pihak ketiga
yang menulis warnanya sendiri sehingga tidak ikut palet tema di build Bootstrap (keputusan PM 2026-10-16:
warna tema otomatis terimplementasi tanpa merombak kode). Nilai = palet tema; tidak ada ukuran/tata letak. */
/* Sidebar SB-Admin: navbar ber-bg-dark kini navy (palet tema), tetapi sb-admin.min.css menulis sidebar #343a40
sendiri → chrome dua warna. Disamakan. (Penanda menu aktif emas milik project-tema TIDAK dibawa — bug #1 review.) */
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav { background: var(--ps-chrome); }
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level { background: var(--ps-chrome-2); }
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a { background-color: var(--ps-chrome-2); }
#mainNav.fixed-top.navbar-dark .sidenav-toggler { background-color: var(--ps-brand-navy); }
.scroll-to-top { background: rgba(30, 42, 58, .6); } /* --ps-chrome 60% */
.scroll-to-top:hover { background: var(--ps-chrome); }
/* select2 tema bootstrap4 (±272 view): select2-bootstrap4.min.css menulis border #ced4da, fokus #80bdff dan sorotan
opsi #007bff sendiri. Disamakan dengan .form-control dari build tema: border --ps-border-control, fokus = border
lighten(primary, 25%) + cincin primary .25 (nilai persis hasil build), sorotan opsi = biru tema. */
.select2-container--bootstrap4 .select2-selection,
.select2-container--bootstrap4 .select2-dropdown,
.select2-search--dropdown .select2-search__field { border-color: var(--ps-border-control); }
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
border-color: rgb(95, 144, 231); /* = .form-control:focus build tema */
box-shadow: 0 0 0 .2rem rgba(26, 79, 173, .25); /* --ps-action .25 */
}
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] { color: #fff; background-color: var(--ps-action); }