/* =============================================================
   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 ---------- */
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 76px;

    /* ---------- 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;

    /* ---------- 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;

    --color-border: #E6E8ED;
    --color-border-strong: #D8DCE3;

    --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);
}

/* =============================================================
   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
   ============================================================= */

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: #fff;
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-disabled-color: #fff;
}

/* 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: #fff;
    --bs-btn-hover-bg: var(--color-success-text);
    --bs-btn-hover-border-color: var(--color-success-text);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--color-success-text);
    --bs-btn-active-border-color: var(--color-success-text);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--color-success);
    --bs-btn-disabled-border-color: var(--color-success);
    --bs-btn-disabled-color: #fff;
}

.btn-danger {
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--color-danger-text);
    --bs-btn-hover-border-color: var(--color-danger-text);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--color-danger-text);
    --bs-btn-active-border-color: var(--color-danger-text);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--color-danger);
    --bs-btn-disabled-border-color: var(--color-danger);
    --bs-btn-disabled-color: #fff;
}

/* 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: #fff;
    --bs-btn-active-bg: var(--color-warning-text);
    --bs-btn-active-border-color: var(--color-warning-text);
    --bs-btn-active-color: #fff;
    --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: #fff;
    --bs-btn-active-bg: var(--color-info-text);
    --bs-btn-active-border-color: var(--color-info-text);
    --bs-btn-active-color: #fff;
    --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: #fff;
    --bs-btn-hover-bg: #22252F;
    --bs-btn-hover-border-color: #22252F;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #22252F;
    --bs-btn-active-border-color: #22252F;
    --bs-btn-active-color: #fff;
}

/* ---------- 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/Edit Role)
   -------------------------------------------------------------
   Sebelumnya deretan checkbox polos tanpa batas antar baris, jadi
   sulit dilihat mana yang sedang aktif. Sekarang tiap hak jadi
   satu baris yang bisa disorot, dan yang tercentang diberi latar
   primary lembut.
   ============================================================= */

.permission-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem .6rem;
    /* Menimpa padding-left bawaan .form-check (dipakai untuk mengosongkan
       tempat kotak centang yang di-float) — di sini posisinya sudah diatur
       lewat flex + gap di atas, jadi padding itu cuma bikin baris ini
       menjorok tanpa alasan. */
    padding-left: .6rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.permission-row:hover {
    background-color: var(--color-surface-muted);
}

/* Bootstrap menaruh kotak centang lewat float + margin negatif (dibaca
   dari padding-left kontainernya) — cocok untuk daftar checkbox polos,
   tapi di baris sepadat ini membuat kotak centangnya terlihat terpisah
   dari teksnya. Digeser ke flex + gap supaya keduanya menyatu jadi satu
   kesatuan yang jelas kaitannya. */
.permission-row .form-check-input {
    float: none;
    margin-left: 0;
    margin-top: .2rem;
    flex-shrink: 0;
}

.permission-row .form-check-label {
    margin-left: 0;
}

/* :has() dipakai sebagai penyempurna saja — di peramban yang belum
   mendukungnya, barisnya cuma kehilangan sorotan, tidak rusak.

   Sengaja tidak ikut mengubah border-color: garis tepi di atas latar
   lembut ini kelihatan seperti pembatas baris tersendiri, padahal
   yang perlu ditonjolkan cuma latarnya. */
.permission-row:has(.form-check-input:checked) {
    background-color: var(--color-primary-soft);
}

.permission-row .form-check-label {
    cursor: pointer;
}

.perm-modul-progress {
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-weight: 600;
}

.perm-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: .6rem;
    padding: .4rem .7rem;
    font-size: .78rem;
    color: var(--color-text-muted);
}

.perm-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: .78rem;
    color: var(--color-text);
    width: 100%;
    max-width: 160px;
}

.perm-search input::placeholder {
    color: var(--color-text-muted);
}

.perm-counter {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface);
    padding: .5rem 0;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: .8rem;
    color: var(--color-text-secondary);
}

.perm-counter strong {
    color: var(--color-primary-text);
}

/* =============================================================
   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;
}

.form-control,
.form-select {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text);
}

.form-control::placeholder {
    color: var(--color-text-muted);
}

.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 {
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.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);
}

.input-group-text {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* 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(217, 107, 120, .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: #fff;
    --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 (halaman masuk & OTP)
   -------------------------------------------------------------
   Satu-satunya area yang diisi warna primary penuh. Nadanya
   digelapkan supaya tulisan putih di atasnya lolos kontras.
   ============================================================= */

.brand-panel {
    background-color: var(--color-primary-deep);
    color: #fff;
}

/* --bs-heading-color dipaksa gelap secara global (lihat blok
   JEMBATAN KE BOOTSTRAP di atas) supaya judul di halaman lain
   konsisten — tapi itu ikut menimpa warna putih yang diwariskan
   .brand-panel ke <h1>-<h6> di dalamnya. Judul di panel ini
   ditulis putih secara eksplisit untuk mengembalikannya. */
.brand-panel h1,
.brand-panel h2,
.brand-panel h3,
.brand-panel h4,
.brand-panel h5,
.brand-panel h6 {
    color: #fff;
}

/* =============================================================
   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: #000;
}

.navbar-search-wrapper {
    max-width: 520px;
    width: 100%;
}

.navbar-search {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    padding: .5rem .9rem;
    transition: border-color .15s ease, background-color .15s ease;
}

.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-text-muted);
}

/* 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-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: #fff;
    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: #fff;
    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(255, 255, 255, .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(255, 255, 255, .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(255, 255, 255, .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(0, 0, 0, .12);
}

.sidebar .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.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(0, 0, 0, .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;
    }
}

/* =============================================================
   KARTU STATISTIK DASHBOARD
   ============================================================= */

.dashboard-view .card {
    border-radius: 1rem;
}

.dashboard-view .stat-card .card-body {
    padding: 1.5rem;
}

/* Nama kelasnya warna (blue/red/orange/teal), tetapi maknanyalah yang
   menentukan isinya: tiap kartu memakai token semantik yang sama dengan
   badge dan tombol pada halaman lain — bukan hex baru. */
.stat-card-blue {
    background: var(--color-primary);
}

.stat-card-red {
    background: var(--color-danger);
}

.stat-card-orange {
    background: var(--color-warning);
}

.stat-card-teal {
    background: var(--color-success);
}

.dashboard-view .stat-label {
    font-size: 1rem;
    color: #fff;
}

.dashboard-view .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
}

.dashboard-view .chart-card .card-body {
    padding: 1.5rem;
}

/* Select & tanggal di header grafik menyamai sudut input abu yang
   dipakai halaman lain, bukan sudut default Bootstrap. */
.dashboard-view .chart-card .form-select,
.dashboard-view .chart-card .form-control {
    border-radius: .6rem;
}

.dashboard-view .chart-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* =============================================================
   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 <form> (perlu untuk mengirim data), form tersebut
 * jadi satu-satunya anak flex dari .modal-content — dan karena flex item
 * secara bawaan menolak menyusut di bawah tinggi kontennya (min-height:
 * auto), .modal-content yang overflow-nya hidden memotong sisa isi modal
 * tanpa scrollbar sama sekali, bukan menampilkannya.
 *
 * Menjadikan <form> ikut flex column, dengan min-height 0 supaya ia mau
 * menyusut, mengembalikan .modal-body sebagai satu-satunya bagian yang
 * di-scroll — persis seperti tanpa <form> di tengahnya.
 */
.modal-dialog-scrollable form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.avatar-circle {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--color-surface-muted);
}

/* =============================================================
   TABEL
   ============================================================= */

.table {
    --bs-table-color: var(--color-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--color-border);
    --bs-table-hover-bg: var(--color-primary-soft);
    --bs-table-hover-color: var(--color-text);
}

.table thead th {
    padding: .85rem .75rem;
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.table tbody td {
    padding: .85rem .75rem;
    vertical-align: middle;
    border-color: var(--color-border);
}

.table tbody tr:hover td {
    background-color: var(--color-surface-soft);
}

/* Tabel Utama (Misal: Daftar Pelanggan) */
.table-utama {
    table-layout: fixed;
}

.table-utama th:nth-child(1), .table-utama td:nth-child(1) { width: 8%; }
.table-utama th:nth-child(2), .table-utama td:nth-child(2) { width: 42%; }
.table-utama th:nth-child(3), .table-utama td:nth-child(3) { width: 15%; }
.table-utama th:nth-child(4), .table-utama td:nth-child(4) { width: 20%; }
.table-utama th:nth-child(5), .table-utama td:nth-child(5) { width: 15%; }

/* Memotong teks panjang di tabel utama */
.table-utama td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tabel Narahubung */
.table-narahubung {
    table-layout: fixed;
}

.table-narahubung th:nth-child(1), .table-narahubung td:nth-child(1) { width: 25%; }
.table-narahubung th:nth-child(2), .table-narahubung td:nth-child(2) {
    width: 32%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-narahubung th:nth-child(3), .table-narahubung td:nth-child(3) { width: 23%; }
.table-narahubung th:nth-child(4), .table-narahubung td:nth-child(4) { width: 20%; }

/* =============================================================
   DETAIL PELANGGAN
   ============================================================= */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35em .75em;
    border-radius: 50rem;
    font-size: .78rem;
    font-weight: 600;
}

.detail-field-label {
    margin-bottom: .15rem;
    font-size: .78rem;
    color: var(--color-text-muted);
}

.detail-field-value {
    font-weight: 600;
    color: var(--color-text);
}

/* =============================================================
   DETAIL PELANGGAN
   -------------------------------------------------------------
   Semua di bawah ini sengaja dipagari di dalam .pelanggan-detail-view
   supaya kartu/modal di halaman LAIN (Data Pelanggan, Approval, dst.)
   tidak ikut berubah — .card dan .modal-content adalah komponen
   Bootstrap bersama yang dipakai di seluruh aplikasi.
   ============================================================= */

.pelanggan-detail-view .card {
    border-radius: 1.125rem;
}

.pelanggan-detail-view .modal-content {
    border-radius: 1.125rem;
}

.status-panel {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.25rem;
    border-radius: 1.125rem;
    border: 1px solid;
    box-shadow: var(--color-shadow);
}

.status-panel-icon {
    flex-shrink: 0;
    margin-top: .2rem;
    font-size: 1.05rem;
}

.status-panel-title {
    font-weight: 600;
    font-size: .92rem;
    color: var(--color-text);
    margin-bottom: .3rem;
}

.status-panel-title .sep {
    color: var(--color-text-muted);
    margin: 0 .35rem;
}

.status-panel-title .waktu {
    font-weight: 400;
    font-size: .82rem;
    color: var(--color-text-muted);
}

.status-panel-body {
    font-size: .84rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.status-panel-warning {
    background: var(--color-warning-soft);
    border-color: var(--color-warning-border);
}

.status-panel-warning .status-panel-icon {
    color: var(--color-warning-text);
}

.status-panel-danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
}

.status-panel-danger .status-panel-icon {
    color: var(--color-danger-text);
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 2.5rem;
}

.field-k {
    font-size: .76rem;
    color: var(--color-text-muted);
    margin-bottom: .2rem;
}

.field-v {
    font-size: .9rem;
    font-weight: 500;
    color: var(--color-text);
}

@media (max-width: 575.98px) {
    .field-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   DATA PELANGGAN (index)
   -------------------------------------------------------------
   Dipagari ke .pelanggan-index-view: dropdown filter dan pagination
   adalah komponen Bootstrap bersama, dipakai juga di halaman lain
   (Approval, Log Activity, dst.) yang tidak diminta ikut berubah.
   ============================================================= */

.pelanggan-index-view select.form-select {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    border-radius: .7rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--color-text);
}

.pelanggan-index-view .pagination {
    gap: .35rem;
}

.pelanggan-index-view .pagination .page-link {
    border-radius: .5rem !important;
    min-width: 32px;
    text-align: center;
    padding: .4rem .55rem;
}

.pelanggan-index-view .btn-filter {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: .7rem;
    padding: .45rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text);
    transition: background-color .15s ease;
}

.pelanggan-index-view .btn-filter:hover {
    background: var(--color-surface-muted);
}

.pelanggan-index-view .filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}

.pelanggan-index-view .filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 560px;
    max-width: calc(100vw - 3rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1.1rem;
    box-shadow: var(--color-shadow);
}

.pelanggan-index-view .filter-panel.open {
    display: block;
}

.pelanggan-index-view .filter-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem 1rem;
    margin-bottom: 1rem;
}

.pelanggan-index-view .filter-panel-grid label {
    display: block;
    font-size: .72rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: .3rem;
}

.pelanggan-index-view .filter-panel-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: .85rem;
    border-top: 1px solid var(--color-border);
}

.pelanggan-index-view .chip-active {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .4rem .35rem .7rem;
    border-radius: 999px;
}

.pelanggan-index-view .chip-active .chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: inherit;
    font-size: .7rem;
    text-decoration: none;
}

.pelanggan-index-view .chip-active .chip-remove:hover {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.pelanggan-index-view .clear-all {
    font-size: .78rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-decoration: underline;
}

.pelanggan-index-view .clear-all:hover {
    color: var(--color-text);
}

@media (max-width: 575.98px) {
    .pelanggan-index-view .filter-panel {
        width: calc(100vw - 3rem);
    }

    .pelanggan-index-view .filter-panel-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   STEPPER
   -------------------------------------------------------------
   Tiga kolom sama lebar (flex: 1 1 0) supaya urutan langkah rapi
   tanpa terpengaruh panjang label. Garis penghubung digambar lewat
   ::after pada tiap kolom (bukan elemen terpisah) sehingga selalu
   berhenti tepat di tengah lingkaran kolom berikutnya, berapa pun
   lebar kolomnya.
   ============================================================= */

.cp-stepper {
    display: flex;
    margin-bottom: 1.75rem;
}

.cp-step {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}

.cp-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--color-border-strong);
    z-index: 0;
    transition: background-color .2s ease;
}

.cp-step.is-done:not(:last-child)::after {
    background: var(--color-success);
}

.cp-step-circle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cp-step-check {
    display: none;
}

.cp-step.is-done .cp-step-number {
    display: none;
}

.cp-step.is-done .cp-step-check {
    display: inline-flex;
}

.cp-step.is-active .cp-step-circle {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: #fff;
}

.cp-step.is-done .cp-step-circle {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.cp-step-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color .2s ease;
}

.cp-step.is-active .cp-step-label,
.cp-step.is-done .cp-step-label {
    color: var(--color-text);
}

@media (max-width: 575.98px) {
    .cp-step-label {
        white-space: normal;
        text-align: center;
        font-size: .7rem;
    }
}