/* =============================================================
DESIGN SYSTEM — "Soft Corporate Dashboard"
=============================================================
File ini adalah SATU-SATUNYA sumber warna aplikasi.
Bootstrap 5.3 dimuat lewat CDN sebelum file ini, dan seluruh
komponennya dibangun di atas CSS variable. Karena itu warna
seluruh halaman cukup diubah dari sini — tanpa menyentuh satu
pun kelas di file Blade, sehingga tidak ada risiko merusak
alur, form, modal, atau JavaScript yang sudah berjalan.
Saat menambah elemen baru: pakai var(--color-*) di bawah,
jangan menulis hex baru.
============================================================= */
:root {
/* ---------- Tata letak ---------- */
/* Lebar sidebar ikut dikecilkan 80% bersama skala huruf di bawah
(250px dan 76px sebelumnya), supaya perbandingannya ke konten sama. */
--sidebar-width: 200px;
--sidebar-width-collapsed: 61px;
/* ---------- Brand / primary ----------
Aksi utama, tautan, menu aktif, pagination aktif, branding. */
--color-primary: #5B8DEF;
--color-primary-hover: #4B7FE4;
--color-primary-soft: #EEF4FF;
--color-primary-border: #CFE0FF;
/* ---------- Secondary ----------
Aksi sekunder, batal, elemen tanpa status khusus. */
--color-secondary: #7A8088;
--color-secondary-hover: #696F78;
--color-secondary-soft: #F1F3F5;
--color-secondary-border: #DDE1E6;
/* ---------- Success ----------
Berhasil, aktif, disetujui, selesai, data valid. */
--color-success: #4FA77A;
--color-success-soft: #EDF8F2;
--color-success-border: #CBEAD9;
/* ---------- Danger ----------
Ditolak, gagal, error, hapus, aksi destruktif. */
--color-danger: #D96B78;
--color-danger-soft: #FDF0F2;
--color-danger-border: #F2CDD2;
/* ---------- Warning ----------
Menunggu, pending, perlu perhatian, proses belum selesai. */
--color-warning: #D6A94A;
--color-warning-soft: #FFF8E8;
--color-warning-border: #F3E2B6;
/* ---------- Info ----------
Informasi, bantuan, alert informatif. */
--color-info: #55AFC2;
--color-info-soft: #EDF8FA;
--color-info-border: #CBE8ED;
/* ---------- Varian teks ----------
Warna pastel di atas terlalu terang untuk dipakai sebagai
teks: #D96B78 di atas putih hanya 3.0:1, sedangkan pesan
validasi dan label badge perlu minimal 4.5:1 supaya
terbaca. Nilai di bawah adalah warna yang SAMA, hanya
digelapkan, khusus untuk teks dan ikon di atas latar
terang. Latar, border, dan isian tombol tetap memakai
warna pastel di atas. */
--color-primary-text: #2F5FBF;
--color-secondary-text: #4E545C;
--color-success-text: #2E7355;
--color-danger-text: #A63744;
--color-warning-text: #8A6A1E;
--color-info-text: #226E7E;
/* Primary yang digelapkan, khusus untuk area yang diisi penuh
dan bertuliskan teks putih (panel branding halaman masuk). */
--color-primary-deep: #3C6FD0;
/* Warna teks di atas latar yang diisi penuh warna solid (tombol
primary, item dropdown yang di-hover/aktif) — supaya tetap
terbaca (putih), bukan warna teks biasa. */
--color-on-fill: #FFFFFF;
/* Putih yang sama dalam bentuk RGB, untuk lapisan transparan di atas
latar berwarna (sidebar): rgba(var(--color-on-fill-rgb), .22). */
--color-on-fill-rgb: 255, 255, 255;
/* Tombol gelap (.btn-dark) saat di-hover dan ditekan. */
--color-dark-hover: #22252F;
/* Hitam, dan RGB-nya untuk bayangan serta latar penutup (backdrop). */
--color-black: #000000;
--color-black-rgb: 0, 0, 0;
/* RGB warna danger pastel, untuk cincin fokus input yang tidak valid. */
--color-danger-rgb: 217, 107, 120;
/* ---------- Netral / permukaan ---------- */
--color-bg: #F7F7FA;
--color-surface: #FFFFFF;
--color-surface-soft: #FBFBFD;
--color-surface-muted: #F3F4F7;
--color-text: #2D3140;
--color-text-secondary: #5F6472;
--color-text-muted: #8A909D;
/* Placeholder di atas isian putih: lebih gelap dari text-muted supaya terbaca (4.7:1),
tetap lebih pucat dari teks yang diketik. */
--color-placeholder: #6E7480;
--color-border: #E6E8ED;
--color-border-strong: #D8DCE3;
/* Garis isian saat di-hover: campuran primary dan border-strong, belum sekuat garis fokus. */
--color-border-hover: #8DADEA;
--color-focus: rgba(91, 141, 239, 0.18);
--color-shadow:
0 1px 2px rgba(45, 49, 64, 0.03),
0 8px 24px rgba(45, 49, 64, 0.06);
/* Bayangan lebih dalam untuk kartu yang berdiri sendiri di tengah layar (halaman masuk & OTP). */
--color-shadow-lg:
0 24px 64px rgba(45, 49, 64, 0.12),
0 2px 6px rgba(45, 49, 64, 0.05);
}
/* =============================================================
JEMBATAN KE BOOTSTRAP
-------------------------------------------------------------
Memetakan variabel bawaan Bootstrap ke token di atas. Satu blok
ini membuat text-muted, bg-*-subtle, text-*-emphasis, border,
tautan, dan bayangan di SELURUH halaman ikut memakai palet baru.
Catatan: --bs-*-rgb sengaja diisi varian teks yang lebih gelap,
sebab variabel itulah yang dipakai kelas .text-primary,
.text-danger, dan sejenisnya. Warna pastelnya tetap dipakai
sebagai latar lewat --bs-*-bg-subtle dan variabel komponen.
============================================================= */
:root {
--bs-primary: var(--color-primary);
--bs-secondary: var(--color-secondary);
--bs-success: var(--color-success);
--bs-danger: var(--color-danger);
--bs-warning: var(--color-warning);
--bs-info: var(--color-info);
--bs-light: var(--color-surface-muted);
--bs-dark: var(--color-text);
/* Dipakai .text-* dan .bg-* — nilainya varian teks agar terbaca. */
--bs-primary-rgb: 47, 95, 191;
--bs-secondary-rgb: 78, 84, 92;
--bs-success-rgb: 46, 115, 85;
--bs-danger-rgb: 166, 55, 68;
--bs-warning-rgb: 138, 106, 30;
--bs-info-rgb: 34, 110, 126;
--bs-light-rgb: 243, 244, 247;
--bs-dark-rgb: 45, 49, 64;
/* Dipakai .text-*-emphasis (teks badge & label status). */
--bs-primary-text-emphasis: var(--color-primary-text);
--bs-secondary-text-emphasis: var(--color-secondary-text);
--bs-success-text-emphasis: var(--color-success-text);
--bs-danger-text-emphasis: var(--color-danger-text);
--bs-warning-text-emphasis: var(--color-warning-text);
--bs-info-text-emphasis: var(--color-info-text);
/* Dipakai .bg-*-subtle (latar badge & alert). */
--bs-primary-bg-subtle: var(--color-primary-soft);
--bs-secondary-bg-subtle: var(--color-secondary-soft);
--bs-success-bg-subtle: var(--color-success-soft);
--bs-danger-bg-subtle: var(--color-danger-soft);
--bs-warning-bg-subtle: var(--color-warning-soft);
--bs-info-bg-subtle: var(--color-info-soft);
--bs-light-bg-subtle: var(--color-surface-soft);
/* Dipakai .border-*-subtle. */
--bs-primary-border-subtle: var(--color-primary-border);
--bs-secondary-border-subtle: var(--color-secondary-border);
--bs-success-border-subtle: var(--color-success-border);
--bs-danger-border-subtle: var(--color-danger-border);
--bs-warning-border-subtle: var(--color-warning-border);
--bs-info-border-subtle: var(--color-info-border);
/* Teks & permukaan dasar. */
--bs-body-color: var(--color-text);
--bs-body-color-rgb: 45, 49, 64;
--bs-body-bg: var(--color-bg);
--bs-emphasis-color: var(--color-text);
--bs-heading-color: var(--color-text);
/* .text-muted dan .text-body-secondary. */
--bs-secondary-color: var(--color-text-secondary);
--bs-secondary-bg: var(--color-surface-muted);
--bs-tertiary-color: var(--color-text-muted);
--bs-tertiary-bg: var(--color-surface-muted);
--bs-border-color: var(--color-border);
--bs-border-color-translucent: var(--color-border);
--bs-link-color: var(--color-primary-text);
--bs-link-color-rgb: 47, 95, 191;
--bs-link-hover-color: var(--color-primary-hover);
--bs-link-hover-color-rgb: 75, 127, 228;
/* Bayangan bawaan Bootstrap diganti yang jauh lebih lembut. */
--bs-box-shadow: var(--color-shadow);
--bs-box-shadow-sm: 0 1px 2px rgba(45, 49, 64, 0.04);
--bs-box-shadow-lg: 0 2px 4px rgba(45, 49, 64, 0.04), 0 16px 40px rgba(45, 49, 64, 0.08);
}
/* =============================================================
DASAR
============================================================= */
/* Skala tampilan seluruh aplikasi: 90% dari ukuran bawaan, setara zoom
browser 90%. Bootstrap dan file ini menulis huruf, jarak, dan komponen
dalam rem, jadi cukup mengubah ukuran akar di sini — tanpa `zoom` CSS
yang membuat satuan vh (mis. tinggi sidebar) tidak ikut terskala.
Kembalikan ke 100% untuk tampilan lama. */
html {
font-size: 90%;
}
body {
margin: 0;
padding: 0;
background-color: var(--color-bg);
color: var(--color-text);
font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}
/* =============================================================
TOMBOL
-------------------------------------------------------------
Bootstrap menulis warna tombol sebagai nilai mentah di dalam
.btn-*, bukan lewat variabel :root, sehingga tiap varian perlu
diarahkan ulang satu per satu.
============================================================= */
.btn {
--bs-btn-focus-box-shadow: 0 0 0 .25rem var(--color-focus);
font-weight: 500;
}
/* Aksi utama — satu-satunya tombol berisi warna penuh yang
sering muncul. */
.btn-primary {
--bs-btn-bg: var(--color-primary);
--bs-btn-border-color: var(--color-primary);
--bs-btn-color: var(--color-on-fill);
--bs-btn-hover-bg: var(--color-primary-hover);
--bs-btn-hover-border-color: var(--color-primary-hover);
--bs-btn-hover-color: var(--color-on-fill);
--bs-btn-active-bg: var(--color-primary-hover);
--bs-btn-active-border-color: var(--color-primary-hover);
--bs-btn-active-color: var(--color-on-fill);
--bs-btn-disabled-bg: var(--color-primary);
--bs-btn-disabled-border-color: var(--color-primary);
--bs-btn-disabled-color: var(--color-on-fill);
}
/* Aksi sekunder — lembut, bukan abu-abu pekat. */
.btn-secondary {
--bs-btn-bg: var(--color-secondary-soft);
--bs-btn-border-color: var(--color-secondary-border);
--bs-btn-color: var(--color-text-secondary);
--bs-btn-hover-bg: var(--color-secondary-border);
--bs-btn-hover-border-color: var(--color-border-strong);
--bs-btn-hover-color: var(--color-text);
--bs-btn-active-bg: var(--color-secondary-border);
--bs-btn-active-border-color: var(--color-border-strong);
--bs-btn-active-color: var(--color-text);
--bs-btn-disabled-bg: var(--color-secondary-soft);
--bs-btn-disabled-border-color: var(--color-secondary-border);
--bs-btn-disabled-color: var(--color-text-muted);
}
/* Setuju & tolak/hapus tetap berisi warna penuh: keduanya adalah
keputusan akhir di dalam modal konfirmasi, dan versi lembutnya
membuat tombol "Ya, Hapus" tidak lagi terbaca sebagai
peringatan. Warnanya sendiri sudah jauh lebih kalem. */
.btn-success {
--bs-btn-bg: var(--color-success);
--bs-btn-border-color: var(--color-success);
--bs-btn-color: var(--color-on-fill);
--bs-btn-hover-bg: var(--color-success-text);
--bs-btn-hover-border-color: var(--color-success-text);
--bs-btn-hover-color: var(--color-on-fill);
--bs-btn-active-bg: var(--color-success-text);
--bs-btn-active-border-color: var(--color-success-text);
--bs-btn-active-color: var(--color-on-fill);
--bs-btn-disabled-bg: var(--color-success);
--bs-btn-disabled-border-color: var(--color-success);
--bs-btn-disabled-color: var(--color-on-fill);
}
.btn-danger {
--bs-btn-bg: var(--color-danger);
--bs-btn-border-color: var(--color-danger);
--bs-btn-color: var(--color-on-fill);
--bs-btn-hover-bg: var(--color-danger-text);
--bs-btn-hover-border-color: var(--color-danger-text);
--bs-btn-hover-color: var(--color-on-fill);
--bs-btn-active-bg: var(--color-danger-text);
--bs-btn-active-border-color: var(--color-danger-text);
--bs-btn-active-color: var(--color-on-fill);
--bs-btn-disabled-bg: var(--color-danger);
--bs-btn-disabled-border-color: var(--color-danger);
--bs-btn-disabled-color: var(--color-on-fill);
}
/* Kuning dan sian terlalu terang untuk tulisan putih — teksnya
dibuat gelap agar tetap terbaca. */
.btn-warning {
--bs-btn-bg: var(--color-warning);
--bs-btn-border-color: var(--color-warning);
--bs-btn-color: var(--color-text);
--bs-btn-hover-bg: var(--color-warning-text);
--bs-btn-hover-border-color: var(--color-warning-text);
--bs-btn-hover-color: var(--color-on-fill);
--bs-btn-active-bg: var(--color-warning-text);
--bs-btn-active-border-color: var(--color-warning-text);
--bs-btn-active-color: var(--color-on-fill);
--bs-btn-disabled-bg: var(--color-warning);
--bs-btn-disabled-border-color: var(--color-warning);
--bs-btn-disabled-color: var(--color-text);
}
.btn-info {
--bs-btn-bg: var(--color-info);
--bs-btn-border-color: var(--color-info);
--bs-btn-color: var(--color-text);
--bs-btn-hover-bg: var(--color-info-text);
--bs-btn-hover-border-color: var(--color-info-text);
--bs-btn-hover-color: var(--color-on-fill);
--bs-btn-active-bg: var(--color-info-text);
--bs-btn-active-border-color: var(--color-info-text);
--bs-btn-active-color: var(--color-on-fill);
--bs-btn-disabled-bg: var(--color-info);
--bs-btn-disabled-border-color: var(--color-info);
--bs-btn-disabled-color: var(--color-text);
}
/* Tombol netral yang paling sering dipakai di aplikasi ini
(Reset, Lihat semua, dsb.). */
.btn-light {
--bs-btn-bg: var(--color-surface);
--bs-btn-border-color: var(--color-border);
--bs-btn-color: var(--color-text-secondary);
--bs-btn-hover-bg: var(--color-surface-muted);
--bs-btn-hover-border-color: var(--color-border-strong);
--bs-btn-hover-color: var(--color-text);
--bs-btn-active-bg: var(--color-surface-muted);
--bs-btn-active-border-color: var(--color-border-strong);
--bs-btn-active-color: var(--color-text);
--bs-btn-disabled-bg: var(--color-surface);
--bs-btn-disabled-border-color: var(--color-border);
--bs-btn-disabled-color: var(--color-text-muted);
}
.btn-dark {
--bs-btn-bg: var(--color-text);
--bs-btn-border-color: var(--color-text);
--bs-btn-color: var(--color-on-fill);
--bs-btn-hover-bg: var(--color-dark-hover);
--bs-btn-hover-border-color: var(--color-dark-hover);
--bs-btn-hover-color: var(--color-on-fill);
--bs-btn-active-bg: var(--color-dark-hover);
--bs-btn-active-border-color: var(--color-dark-hover);
--bs-btn-active-color: var(--color-on-fill);
}
/* ---------- Varian outline ----------
Garis tepi memakai warna pastel, teks memakai varian gelap,
dan saat disentuh berubah jadi latar lembut — bukan blok warna
penuh seperti bawaan Bootstrap. */
.btn-outline-primary {
--bs-btn-color: var(--color-primary-text);
--bs-btn-border-color: var(--color-primary-border);
--bs-btn-hover-bg: var(--color-primary-soft);
--bs-btn-hover-border-color: var(--color-primary);
--bs-btn-hover-color: var(--color-primary-text);
--bs-btn-active-bg: var(--color-primary-soft);
--bs-btn-active-border-color: var(--color-primary);
--bs-btn-active-color: var(--color-primary-text);
--bs-btn-disabled-color: var(--color-text-muted);
--bs-btn-disabled-border-color: var(--color-border);
}
.btn-outline-secondary {
--bs-btn-color: var(--color-text-secondary);
--bs-btn-border-color: var(--color-secondary-border);
--bs-btn-hover-bg: var(--color-secondary-soft);
--bs-btn-hover-border-color: var(--color-border-strong);
--bs-btn-hover-color: var(--color-text);
--bs-btn-active-bg: var(--color-secondary-soft);
--bs-btn-active-border-color: var(--color-border-strong);
--bs-btn-active-color: var(--color-text);
--bs-btn-disabled-color: var(--color-text-muted);
--bs-btn-disabled-border-color: var(--color-border);
}
.btn-outline-success {
--bs-btn-color: var(--color-success-text);
--bs-btn-border-color: var(--color-success-border);
--bs-btn-hover-bg: var(--color-success-soft);
--bs-btn-hover-border-color: var(--color-success);
--bs-btn-hover-color: var(--color-success-text);
--bs-btn-active-bg: var(--color-success-soft);
--bs-btn-active-border-color: var(--color-success);
--bs-btn-active-color: var(--color-success-text);
--bs-btn-disabled-color: var(--color-text-muted);
--bs-btn-disabled-border-color: var(--color-border);
}
.btn-outline-danger {
--bs-btn-color: var(--color-danger-text);
--bs-btn-border-color: var(--color-danger-border);
--bs-btn-hover-bg: var(--color-danger-soft);
--bs-btn-hover-border-color: var(--color-danger);
--bs-btn-hover-color: var(--color-danger-text);
--bs-btn-active-bg: var(--color-danger-soft);
--bs-btn-active-border-color: var(--color-danger);
--bs-btn-active-color: var(--color-danger-text);
--bs-btn-disabled-color: var(--color-text-muted);
--bs-btn-disabled-border-color: var(--color-border);
}
.btn-outline-warning {
--bs-btn-color: var(--color-warning-text);
--bs-btn-border-color: var(--color-warning-border);
--bs-btn-hover-bg: var(--color-warning-soft);
--bs-btn-hover-border-color: var(--color-warning);
--bs-btn-hover-color: var(--color-warning-text);
--bs-btn-active-bg: var(--color-warning-soft);
--bs-btn-active-border-color: var(--color-warning);
--bs-btn-active-color: var(--color-warning-text);
}
.btn-outline-info {
--bs-btn-color: var(--color-info-text);
--bs-btn-border-color: var(--color-info-border);
--bs-btn-hover-bg: var(--color-info-soft);
--bs-btn-hover-border-color: var(--color-info);
--bs-btn-hover-color: var(--color-info-text);
--bs-btn-active-bg: var(--color-info-soft);
--bs-btn-active-border-color: var(--color-info);
--bs-btn-active-color: var(--color-info-text);
}
.btn-link {
--bs-btn-color: var(--color-primary-text);
--bs-btn-hover-color: var(--color-primary-hover);
}
/* =============================================================
BADGE / STATUS
-------------------------------------------------------------
Pola di seluruh aplikasi sudah "bg-*-subtle + text-*-emphasis",
dan keduanya kini menunjuk ke token lembut di atas. Tinggal
menambahkan garis tepi tipis supaya bentuknya tegas tanpa
perlu warna pekat.
============================================================= */
.badge {
font-weight: 600;
}
.badge.bg-primary-subtle { border: 1px solid var(--color-primary-border); }
.badge.bg-secondary-subtle { border: 1px solid var(--color-secondary-border); }
.badge.bg-success-subtle { border: 1px solid var(--color-success-border); }
.badge.bg-danger-subtle { border: 1px solid var(--color-danger-border); }
.badge.bg-warning-subtle { border: 1px solid var(--color-warning-border); }
.badge.bg-info-subtle { border: 1px solid var(--color-info-border); }
/* Chip netral — dipakai untuk hal yang memang tidak punya status:
label hak akses, penghitung jumlah, tag fungsi narahubung, dan
jumlah hasil pencarian (10 tempat di 6 halaman). Sebelumnya
"bg-light text-dark border" bawaan Bootstrap, yang tampil datar
karena garis tepinya nyaris tak terlihat.
Hanya latar dan garis tepi yang diatur di sini; warna teksnya
sengaja dibiarkan diatur kelas text-dark/text-muted yang sudah
menempel, supaya chip "+N lainnya" tetap lebih redup. */
.badge.bg-light {
/* Garis tepinya ditulis lengkap, bukan cuma border-color: satu chip
di halaman Approval tidak memakai kelas "border", dan tanpa ini
ia jadi satu-satunya yang tampil tanpa garis. */
background-color: var(--color-surface-muted) !important;
border: 1px solid var(--color-border-strong) !important;
padding: .4em .7em;
font-weight: 500;
}
/* Daftar hak akses (modal Tambah/Ubah Role) ada di css/pages/kelola-role.css. */
/* =============================================================
ALERT
============================================================= */
.alert {
--bs-alert-border-radius: .625rem;
border-width: 1px;
}
.alert-primary {
--bs-alert-bg: var(--color-primary-soft);
--bs-alert-border-color: var(--color-primary-border);
--bs-alert-color: var(--color-primary-text);
--bs-alert-link-color: var(--color-primary-text);
}
.alert-secondary {
--bs-alert-bg: var(--color-secondary-soft);
--bs-alert-border-color: var(--color-secondary-border);
--bs-alert-color: var(--color-secondary-text);
--bs-alert-link-color: var(--color-secondary-text);
}
.alert-success {
--bs-alert-bg: var(--color-success-soft);
--bs-alert-border-color: var(--color-success-border);
--bs-alert-color: var(--color-success-text);
--bs-alert-link-color: var(--color-success-text);
}
.alert-danger {
--bs-alert-bg: var(--color-danger-soft);
--bs-alert-border-color: var(--color-danger-border);
--bs-alert-color: var(--color-danger-text);
--bs-alert-link-color: var(--color-danger-text);
}
.alert-warning {
--bs-alert-bg: var(--color-warning-soft);
--bs-alert-border-color: var(--color-warning-border);
--bs-alert-color: var(--color-warning-text);
--bs-alert-link-color: var(--color-warning-text);
}
.alert-info {
--bs-alert-bg: var(--color-info-soft);
--bs-alert-border-color: var(--color-info-border);
--bs-alert-color: var(--color-info-text);
--bs-alert-link-color: var(--color-info-text);
}
.alert-light {
--bs-alert-bg: var(--color-surface-soft);
--bs-alert-border-color: var(--color-border);
--bs-alert-color: var(--color-text-secondary);
}
/* =============================================================
FORM
============================================================= */
.form-label {
color: var(--color-text);
font-weight: 500;
}
/* Isian yang bisa diketik berlatar putih dengan garis tegas. Abu-abu khusus
isian terkunci (disabled/readonly), karena abu-abu terkesan tidak bisa diisi. */
.form-control,
.form-select {
background-color: var(--color-surface);
border-color: var(--color-border-strong);
color: var(--color-text);
}
.form-control::placeholder {
color: var(--color-placeholder);
}
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
border-color: var(--color-border-hover);
}
.form-control:focus,
.form-select:focus {
background-color: var(--color-surface);
border-color: var(--color-primary);
box-shadow: 0 0 0 .25rem var(--color-focus);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
background-color: var(--color-surface-muted);
border-color: var(--color-border);
color: var(--color-text-muted);
}
/* Readonly tetap terlihat terkunci saat difokuskan (mis. Kode Faktur yang terisi otomatis). */
.form-control[readonly]:focus {
background-color: var(--color-surface-muted);
border-color: var(--color-border);
box-shadow: none;
}
.form-check-input {
border-color: var(--color-border-strong);
}
.form-check-input:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.form-check-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 .25rem var(--color-focus);
}
/* Dipakai sebagai kotak ikon cari di depan isian, jadi ikut putih seperti isiannya. */
.input-group-text {
background-color: var(--color-surface);
border-color: var(--color-border-strong);
color: var(--color-text-secondary);
}
/* Garis kotak ikon ikut berubah bersama isiannya, supaya terbaca sebagai satu kolom. */
.input-group:hover > .input-group-text {
border-color: var(--color-border-hover);
}
.input-group:focus-within > .input-group-text {
border-color: var(--color-primary);
}
/* Pesan galat bawaan Laravel/Bootstrap. */
.invalid-feedback,
.form-text.text-danger {
color: var(--color-danger-text);
}
.form-control.is-invalid,
.form-select.is-invalid {
border-color: var(--color-danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
border-color: var(--color-danger);
box-shadow: 0 0 0 .25rem rgba(var(--color-danger-rgb), .18);
}
/* =============================================================
KARTU, MODAL, DROPDOWN
============================================================= */
.card {
--bs-card-bg: var(--color-surface);
--bs-card-border-color: var(--color-border);
--bs-card-cap-bg: var(--color-surface-soft);
--bs-card-border-radius: .75rem;
}
/* Aplikasi ini memakai "card border-0 shadow-sm" hampir di mana
pun. Tanpa garis tepi, kartu putih di atas latar yang juga
nyaris putih kehilangan batasnya — jadi bayangannya diganti
bayangan lembut plus garis tipis. */
.card.border-0 {
border: 1px solid var(--color-border) !important;
}
.card.shadow-sm {
box-shadow: var(--color-shadow) !important;
}
.modal-content {
--bs-modal-bg: var(--color-surface);
--bs-modal-border-color: var(--color-border);
--bs-modal-border-radius: .875rem;
--bs-modal-header-border-color: var(--color-border);
--bs-modal-footer-border-color: var(--color-border);
}
.dropdown-menu {
--bs-dropdown-bg: var(--color-surface);
--bs-dropdown-border-color: var(--color-border);
--bs-dropdown-border-radius: .625rem;
--bs-dropdown-link-color: var(--color-text-secondary);
--bs-dropdown-link-hover-bg: var(--color-surface-muted);
--bs-dropdown-link-hover-color: var(--color-text);
--bs-dropdown-link-active-bg: var(--color-primary-soft);
--bs-dropdown-link-active-color: var(--color-primary-text);
--bs-dropdown-header-color: var(--color-text-muted);
}
/* =============================================================
NAVIGASI & PAGINATION
============================================================= */
.nav-pills {
--bs-nav-pills-link-active-bg: var(--color-primary-soft);
--bs-nav-pills-link-active-color: var(--color-primary-text);
--bs-nav-link-color: var(--color-text-secondary);
--bs-nav-link-hover-color: var(--color-primary-text);
}
.nav-tabs {
--bs-nav-tabs-border-color: var(--color-border);
--bs-nav-tabs-link-active-color: var(--color-primary-text);
--bs-nav-tabs-link-active-border-color: var(--color-border) var(--color-border) var(--color-surface);
--bs-nav-link-color: var(--color-text-secondary);
}
.pagination {
--bs-pagination-color: var(--color-text-secondary);
--bs-pagination-bg: var(--color-surface);
--bs-pagination-border-color: var(--color-border);
--bs-pagination-hover-color: var(--color-primary-text);
--bs-pagination-hover-bg: var(--color-primary-soft);
--bs-pagination-hover-border-color: var(--color-primary-border);
--bs-pagination-focus-color: var(--color-primary-text);
--bs-pagination-focus-bg: var(--color-primary-soft);
--bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--color-focus);
--bs-pagination-active-color: var(--color-on-fill);
--bs-pagination-active-bg: var(--color-primary);
--bs-pagination-active-border-color: var(--color-primary);
--bs-pagination-disabled-color: var(--color-text-muted);
--bs-pagination-disabled-bg: var(--color-surface);
--bs-pagination-disabled-border-color: var(--color-border);
}
.progress {
--bs-progress-bg: var(--color-surface-muted);
--bs-progress-bar-bg: var(--color-primary);
}
.list-group {
--bs-list-group-bg: var(--color-surface);
--bs-list-group-border-color: var(--color-border);
--bs-list-group-color: var(--color-text);
--bs-list-group-action-hover-bg: var(--color-surface-muted);
--bs-list-group-active-bg: var(--color-primary-soft);
--bs-list-group-active-border-color: var(--color-primary-border);
--bs-list-group-active-color: var(--color-primary-text);
}
.accordion {
--bs-accordion-bg: var(--color-surface);
--bs-accordion-border-color: var(--color-border);
--bs-accordion-btn-color: var(--color-text);
--bs-accordion-active-bg: var(--color-primary-soft);
--bs-accordion-active-color: var(--color-primary-text);
--bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--color-focus);
}
/* Panel branding dan kartu halaman masuk & OTP ada di css/pages/guest.css. */
/* =============================================================
KERANGKA HALAMAN
============================================================= */
.main-content {
height: 100vh;
overflow-y: auto;
background-color: var(--color-bg);
}
.main-wrapper {
min-height: 100vh;
}
/* Padding konten (.p-4 di layouts/app.blade.php) sengaja diperkecil hanya
di HP — 1.5rem tiap sisi menyisakan sedikit ruang isi di layar ~360px. */
@media (max-width: 575.98px) {
.main-wrapper > .p-4 {
padding: 1rem !important;
}
}
.search-form {
max-width: 320px;
}
.filter-select {
width: 150px;
}
.navbar {
border-bottom: 1px solid var(--color-border) !important;
}
.app-navbar {
padding-top: .85rem;
padding-bottom: .85rem;
}
.btn-icon-plain {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: none;
background: transparent;
border-radius: .6rem;
color: var(--color-text-muted);
transition: background-color .15s ease, color .15s ease;
}
.btn-icon-plain:hover {
background: var(--color-surface-muted);
color: var(--color-text);
}
/* Tautan "Kembali" — tanpa latar dan tanpa garis tepi sama sekali,
cuma teks + ikon. Menghitam sesaat saat diklik untuk umpan balik. */
.btn-back {
display: inline-flex;
align-items: center;
gap: .4rem;
border: none;
background: transparent;
padding: .35rem .1rem;
font-size: .85rem;
font-weight: 600;
color: var(--color-text-secondary);
text-decoration: none;
transition: color .15s ease;
}
.btn-back:hover {
color: var(--color-text);
}
.btn-back:active {
color: var(--color-black);
}
.navbar-search-wrapper {
max-width: 520px;
width: 100%;
}
/* Kotak cari (navbar dan atas tabel): putih bergaris tegas seperti .form-control. */
.navbar-search {
display: flex;
align-items: center;
gap: .6rem;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: .75rem;
padding: .5rem .9rem;
transition: border-color .15s ease, background-color .15s ease;
}
.navbar-search:hover {
border-color: var(--color-border-hover);
}
.navbar-search:focus-within {
background: var(--color-surface);
border-color: var(--color-primary);
box-shadow: 0 0 0 .25rem var(--color-focus);
}
.navbar-search input {
border: none;
background: transparent;
outline: none;
width: 100%;
font-size: .875rem;
color: var(--color-text);
}
.navbar-search input::placeholder {
color: var(--color-placeholder);
}
/* Kotak cari di atas tabel: dibatasi lebarnya supaya tidak melebar penuh. */
.navbar-search-tabel {
max-width: 300px;
}
/* Kotak ikon persegi bersudut membulat (kartu Akun, daftar Role). */
.ikon-kotak {
width: 36px;
height: 36px;
}
.ikon-kotak-sm {
width: 30px;
height: 30px;
}
/* Panel saran pencarian global (public/js/components/cari-global.js). */
.cari-panel {
z-index: 1050;
max-height: 70vh;
overflow-y: auto;
}
.cari-kelompok {
font-size: .7rem;
}
.cari-subjudul {
font-size: .75rem;
}
.cari-item:hover,
.cari-item:focus {
background-color: var(--color-surface-muted);
outline: none;
}
/* Caret Bootstrap bawaan dimatikan, diganti ikon bi-chevron-down eksplisit
di markup supaya ukuran & warnanya bisa diatur sendiri. */
.navbar-user-toggle::after {
display: none;
}
.navbar-user-toggle {
padding: .3rem .5rem;
border-radius: .6rem;
transition: background-color .15s ease;
}
.navbar-user-toggle:hover {
background: var(--color-surface-muted);
}
.navbar-user-role {
font-size: .75rem;
}
.navbar-user-caret {
margin-left: .4rem;
font-size: .7rem;
color: var(--color-text-muted);
}
.avatar-circle-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: var(--color-on-fill);
font-weight: 700;
font-size: .95rem;
}
/* =============================================================
SIDEBAR
============================================================= */
.sidebar {
position: sticky;
top: 0;
z-index: 1000; /* Memastikan sidebar selalu di atas */
width: var(--sidebar-width);
min-width: var(--sidebar-width);
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
background: var(--color-primary);
transition: width .2s ease, min-width .2s ease;
}
.sidebar.collapsed {
width: var(--sidebar-width-collapsed);
min-width: var(--sidebar-width-collapsed);
}
.sidebar .brand {
display: flex;
align-items: center;
gap: .6rem;
padding: 0 .5rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--color-on-fill);
white-space: nowrap;
/* Sidebar menyempit saat diciutkan, sedangkan tulisan ini tetap selebar
aslinya karena white-space: nowrap. Tanpa dijaga, ia menyembul keluar
dan mendorong lebar sidebar. */
overflow: hidden;
}
.sidebar .brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: .55rem;
background: rgba(var(--color-on-fill-rgb), .22);
font-size: .78rem;
font-weight: 700;
}
.sidebar.collapsed .brand {
padding: 0;
justify-content: center;
}
.sidebar .menu-label {
font-size: .72rem;
font-weight: 700;
color: rgba(var(--color-on-fill-rgb), .6);
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
}
.sidebar .nav-link {
display: flex;
align-items: center;
padding: .55rem .75rem;
border-radius: .5rem;
font-size: .92rem;
font-weight: 500;
color: rgba(var(--color-on-fill-rgb), .85);
white-space: nowrap;
transition: all .2s;
}
.sidebar .nav-link i {
flex-shrink: 0;
width: 22px;
font-size: 1.05rem;
}
.sidebar .nav-link.active {
background: var(--color-surface);
color: var(--color-primary-text);
font-weight: 600;
box-shadow: 0 4px 10px rgba(var(--color-black-rgb), .12);
}
.sidebar .nav-link:hover:not(.active) {
background: rgba(var(--color-on-fill-rgb), .12);
color: var(--color-on-fill);
}
.sidebar.collapsed .menu-label,
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .brand span:not(.brand-mark) {
display: none;
}
.sidebar.collapsed .nav-link {
justify-content: center;
}
/* =============================================================
SIDEBAR — MOBILE (off-canvas)
-------------------------------------------------------------
Di bawah 768px, sidebar 250px selalu tampil menggencet konten
sampai nyaris tak tersisa. Di lebar ini ia disembunyikan di luar
layar (translateX) dan hanya muncul sebagai overlay saat tombol
hamburger (#sidebarToggle, lihat layouts/navbar.blade.php) ditekan
— ditoggle lewat class .mobile-open dari layouts/app.blade.php.
Tidak menyentuh apa pun di atas 768px: aturan .sidebar.collapsed
(icon-rail) yang dipakai desktop tetap seperti semula di sana.
============================================================= */
@media (max-width: 767.98px) {
.sidebar {
position: fixed;
left: 0;
top: 0;
transform: translateX(-100%);
width: var(--sidebar-width);
min-width: var(--sidebar-width);
transition: transform .25s ease;
}
.sidebar.mobile-open {
transform: translateX(0);
}
/* Collapse ke icon-rail cuma relevan di desktop yang punya ruang di
samping konten. Di mobile sidebar selalu lebar penuh saat dibuka,
supaya labelnya tetap terbaca. */
.sidebar.collapsed {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
}
.sidebar.collapsed .menu-label,
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .brand span:not(.brand-mark) {
display: block;
}
.sidebar.collapsed .nav-link {
justify-content: flex-start;
}
}
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(var(--color-black-rgb), .35);
z-index: 1040; /* Di bawah .sidebar (1000 dasar, tapi mobile-open perlu tampil di atas backdrop). */
}
@media (max-width: 767.98px) {
.sidebar.mobile-open {
z-index: 1050;
}
.sidebar-backdrop.show {
display: block;
}
}
/* Gaya halaman dashboard ada di css/pages/dashboard.css. */
/* =============================================================
MODAL — perbaikan tata letak (bukan warna)
============================================================= */
/*
* .modal-dialog-scrollable mengandalkan modal-header/body/footer sebagai
* anak langsung dari .modal-content supaya tata letak flex-nya bisa
* membatasi tinggi .modal-body dan memberinya scrollbar sendiri. Begitu
* ketiganya dibungkus