/* =====================================================================
   PALAPA THEME — Fase 1: design tokens & pemolesan komponen global.

   Dimuat PALING AKHIR di layout.html sehingga menimpa default
   Bootstrap 4 dan style.css template lama. Halaman modul cukup memakai
   kelas standar Bootstrap agar otomatis tampil konsisten.

   Bahasa desain (sama dengan garansibank / halaman resolve):
   - Ink gelap  #1f2937 untuk header/nav
   - Border     #e5e7eb / #f1f5f9
   - Aksen indigo #4f46e5 (pill: #eef2ff / #3730a3 / #c7d2fe)
   - Font dasar 16px, angka pakai monospace
   ===================================================================== */

/* ── SATU-SATUNYA BLOK TOKEN ──────────────────────────────────────────
   Semua custom property tema dideklarasikan DI SINI dan hanya di sini.
   (Dulu tiga blok :root — Fase 1, Fase 4, Fase 6 — saling menimpa;
   nilai di bawah adalah nilai akhir yang menang. Jangan menambah blok
   :root baru di bawah: ubah nilainya di sini.) */
:root {
  /* teks & garis — kontras Fase 4 (thd putih: text 10.9:1, muted 7.6:1,
     faint 4.8:1) utk WCAG AA/AAA, ramah mata lelah/minus */
  --pal-ink: #1f2937;
  --pal-ink-hover: #111827;
  --pal-ink-fill: #1f2937;   /* latar pekat (banner, thead/tfoot). --pal-ink adalah TEKS: di mode gelap ia menerang, jangan dipakai sebagai latar */
  --pal-text: #1f2937;
  --pal-muted: #4b5563;
  --pal-faint: #6b7280;
  --pal-border: #d8dee9;
  --pal-border-soft: #e8edf4;
  /* Tahap B: latar netral datar gaya Fluent/D365 — rona biru dingin
     lama (#f4f6fb) diganti abu netral supaya senada dengan halaman
     .d365-page yang sudah ada */
  --pal-bg-soft: #f5f5f6;
  --pal-page-bg: #f5f5f6;

  /* Peran yang dulu dirangkap token lain. Nilainya di mode terang
     sama persis dengan sebelumnya, jadi tampilan terang tidak berubah;
     gunanya muncul di mode gelap, ketika teks dan isian harus bergerak
     ke arah yang berlawanan.
       --pal-surface      latar kartu/tabel/sidebar (dulu "#fff" x37)
       --pal-on-accent    teks di atas isian pekat  (dulu "#fff")
       --pal-fill         isian pekat: kepala modal, thead, chip, tooltip
       --pal-indigo-hover isian hover tombol utama (dulu --pal-indigo-dark,
                          yang juga warna tautan - dua arah berbeda) */
  --pal-surface: #ffffff;
  --pal-on-accent: #ffffff;
  --pal-fill: #1f2937;
  --pal-fill-hover: #111827;
  --pal-indigo-hover: #4338ca;

  /* rona semantik — pola triple <warna> aksen, -soft latar, -border
     garis, -ink teks. Artinya TETAP: indigo = aksen/terpilih, hijau =
     disetujui, merah = salah, amber = perhatian, teal = identitas
     netral (bukan status; dipekatkan ke teal-700 agar teks putih di
     atasnya 5,40:1 — teal-600 hanya 3,74:1). */
  --pal-indigo: #4f46e5;
  --pal-indigo-dark: #4338ca;
  --pal-indigo-soft: #eef2ff;
  --pal-indigo-border: #c7d2fe;
  --pal-indigo-ink: #312e81;
  --pal-green: #15803d;
  --pal-green-soft: #f0fdf4;
  --pal-green-border: #bbf7d0;
  --pal-red: #b91c1c;
  --pal-red-soft: #fef2f2;
  --pal-red-border: #fecaca;
  --pal-amber: #92400e;
  --pal-amber-soft: #fef3c7;
  --pal-amber-border: #fde68a;
  --pal-teal: #0f766e;
  --pal-teal-soft: #f0fdfa;
  --pal-teal-border: #99f6e4;
  --pal-teal-ink: #115e59;

  /* Peran keempat rona semantik: AKSEN - titik status, garis kiri kartu,
     isian sakelar. Berbeda dari <warna> yang di atas: yang itu warna
     TEKS dan sengaja dipekatkan demi kontras di atas putih, terlalu
     gelap untuk dipakai sebagai aksen (amber-800 #92400e sebagai garis
     kartu terbaca cokelat lumpur, bukan amber). */
  --pal-green-accent: #16a34a;
  --pal-amber-accent: #d97706;
  --pal-red-accent: #dc2626;

  /* Isian status PEKAT - tombol, lencana, utilitas .bg-*. Sengaja
     bernilai SAMA di mode terang dan gelap: permukaan berwarna terbaca
     benar di kedua halaman, jadi ia tidak perlu dibalik. Kalau ikut
     menerang seperti -accent, teks putih di atasnya hilang. Nilainya
     dipilih yang teks putihnya lolos WCAG AA. */
  --pal-green-fill: #15803d;
  --pal-red-fill: #b91c1c;
  --pal-amber-fill: #b45309;
  --pal-teal-fill: #0f766e;

  /* Teks SAMAR di atas isian pekat (.pal-card-head, .s-card-head).
     Isian itu gelap di kedua mode, jadi teks di atasnya tidak boleh
     ikut membalik - --pal-faint akan menggelap bersama palet dan
     hilang. Karena itu nilainya sama di kedua mode, seperti keluarga
     -fill. Kontras terhadap --pal-fill: 5,4:1 terang, 4,4:1 gelap. */
  --pal-on-accent-muted: #9ca3af;

  /* Bootstrap 4 mendeklarasikan --primary/--blue = #007bff di :root
     miliknya sendiri. Ditimpa di sini supaya apa pun yang membacanya
     ikut indigo — lihat juga seksi "Jembatan primary Bootstrap". */
  --primary: #4f46e5;
  --blue: #4f46e5;

  /* ukuran rangka (topnav + sidebar) */
  --pal-topnav-h: 56px;
  --pal-side-w: 280px;
  --pal-rail-w: 64px;

  /* bentuk, bayangan, gerak */
  --pal-radius: 8px;
  --pal-radius-lg: 14px;
  --pal-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .05);
  --pal-shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);
  --pal-focus: 0 0 0 3px rgba(79, 70, 229, .35);
  --pal-t: 150ms;

  /* huruf */
  --pal-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --pal-mono: Consolas, Menlo, "Courier New", monospace;

  /* ── SATU ANGKA UNTUK SELURUH TEKS PORTAL ─────────────────────────
     Naikkan kalau teks terasa kecil, turunkan kalau terlalu besar:
         0px  ukuran lama          2px  lebih besar lagi
         1px  ukuran sekarang      3px  besar sekali
     Berlaku ke SEMUA ukuran huruf palapa-theme.css & palapa-d365.css:
     tiap ukuran ditulis calc(<ukuran> + var(--fs-naik)); perbandingan
     antar tingkat tetap. (+1px karena token memakai rem dan <html>
     tidak diberi font-size, jadi 1rem = 16px bawaan browser — dengan
     +1px ukurannya sama dengan yang terdokumentasi.) */
  --fs-naik: 1px;

  /* ── 5 tingkat ukuran — tidak boleh ada ukuran lain ── */
  --fs-xs: calc(0.8125rem + var(--fs-naik, 1px));   /* ±14px — label kecil, badge, keterangan */
  --fs-sm: calc(0.9125rem + var(--fs-naik, 1px));   /* ±16px — teks sekunder, isi tabel       */
  --fs-md: calc(1rem + var(--fs-naik, 1px));        /* 17px  — teks utama                     */
  --fs-lg: calc(1.25rem + var(--fs-naik, 1px));     /* ±21px — judul kartu / sub-judul        */
  --fs-xl: calc(1.75rem + var(--fs-naik, 1px));     /* ±30px — judul halaman                  */
}

/* ====================================================================
   MODE GELAP
   Satu blok, hanya menimpa NILAI token - tidak ada satu pun selector
   komponen yang ditulis ulang. Itu sebabnya palapa-d365.css ikut gelap
   tanpa disentuh: seluruh warnanya sudah var(--pal-*).

   Dipasang oleh skrip di <head> layout.html sebelum halaman digambar
   (baca localStorage "palTema"), jadi tidak ada kedip putih.

   Kontras diperiksa terhadap --pal-surface #1b212b:
     --pal-text  #e8ecf2  13,9:1      --pal-muted #aeb7c4  7,6:1
     --pal-faint #8b95a5  4,9:1       tautan #a5a0fa       7,1:1
   dan teks putih di atas isian --pal-indigo #5b57e0: 5,4:1.
   ==================================================================== */
/* ════════════════════════════════════════════════════════════════════
   JEMBATAN PERMUKAAN BOOTSTRAP
   Bootstrap membawa warnanya sendiri di puluhan kelas. Yang menyetel
   HANYA SATU SISI pasangan kontras (cuma latar, atau cuma teks) menjadi
   pasangan separuh begitu palet dibalik: sisi Bootstrap diam, sisi
   lawannya membalik. Kelas-kelas itu ditawar di sini.

   .badge-* dan .btn-* Bootstrap TIDAK disebut di sini dengan sengaja:
   keduanya menyetel latar DAN teks sekaligus, jadi tetap terbaca di mode
   gelap. Menyeragamkan warnanya keputusan palet, bukan keterbacaan.

   !important dipakai karena utility Bootstrap juga memakainya; tanpa itu
   penawarnya tidak pernah menang.
   ════════════════════════════════════════════════════════════════════ */

/* -- warna teks (latar diwarisi) -- */
.text-dark { color: var(--pal-text) !important; }
.text-secondary { color: var(--pal-faint) !important; }
.text-white { color: var(--pal-on-accent) !important; }
.text-danger { color: var(--pal-red-accent) !important; }
.text-success { color: var(--pal-green-accent) !important; }
/* kuning Bootstrap #ffc107 hanya 1,7:1 di atas putih - tidak pernah
   benar-benar terbaca; amber portal 4,6:1 */
.text-warning { color: var(--pal-amber-accent) !important; }
/* cyan #17a2b8 2,6:1 -> teal portal 4,9:1 */
.text-info { color: var(--pal-teal) !important; }

/* -- latar (teks diwarisi) -- */
.bg-white { background-color: var(--pal-surface) !important; }
.bg-light { background-color: var(--pal-bg-soft) !important; }
.bg-dark { background-color: var(--pal-fill) !important; }

/* -- permukaan komponen: Bootstrap memberi latar putih, tema hanya
      mengurus bentuknya, jadi di mode gelap isinya tetap putih -- */
.modal-content,
.dropdown-menu,
.list-group-item,
.popover,
.card {
  background-color: var(--pal-surface);
  color: var(--pal-text);
}
.page-link { background-color: var(--pal-surface); }
.breadcrumb, .jumbotron { background-color: var(--pal-bg-soft); }
.input-group-text { background-color: var(--pal-bg-soft); color: var(--pal-text); }
.close { color: var(--pal-text); }

/* -- rona baris tabel: latar tipis, teksnya diwarisi -- */
.table-success, .table-danger, .table-warning, .table-info,
.table-primary, .table-secondary, .table-light, .table-dark {
  color: var(--pal-ink-hover);
}

/* Kepala modal memakai isian pekat, jadi tombol tutupnya harus terang -
   aturan .close di atas mengenai seluruh halaman, ini mengembalikannya
   khusus di kepala modal. */
.modal-header .close { color: var(--pal-on-accent); }

/* ════════════════════════════════════════════════════════════════════
   RONA SEMANTIK BOOTSTRAP -> PALET PORTAL
   Bootstrap membawa hijau #28a745, merah #dc3545, kuning #ffc107, cyan
   #17a2b8. Kelas-kelas ini tetap terbaca di mode gelap karena mematok
   latar DAN teks sekaligus - yang jadi soal, ia menampilkan palet kedua
   di sebelah palet portal. Sama persis dengan kekeliruan biru d365 yang
   dulu disatukan ke indigo.

   BENTUKNYA tidak diubah: lencana tetap pil solid, tombol tetap tombol.
   Yang ditukar cuma ronanya.

   Kuning dan cyan bergeser paling jauh (#ffc107 -> amber portal,
   #17a2b8 -> teal portal). Itu disengaja: keduanya di atas putih hanya
   1,7:1 dan 2,6:1, jadi selain seragam ia juga jadi terbaca.
   ════════════════════════════════════════════════════════════════════ */

/* -- lencana: pil solid, rona portal -- */
.badge-success { background-color: var(--pal-green-fill); color: var(--pal-on-accent); }
.badge-danger { background-color: var(--pal-red-fill); color: var(--pal-on-accent); }
.badge-warning { background-color: var(--pal-amber-fill); color: var(--pal-on-accent); }
.badge-info { background-color: var(--pal-teal-fill); color: var(--pal-on-accent); }
.badge-secondary { background-color: var(--pal-faint); color: var(--pal-on-accent); }
.badge-dark { background-color: var(--pal-fill); color: var(--pal-on-accent); }
.badge-light {
  background-color: var(--pal-bg-soft);
  color: var(--pal-text);
  border: 1px solid var(--pal-border);
}

/* -- tombol -- */
.btn-success, .btn-success:disabled, .btn-success.disabled {
  background-color: var(--pal-green-fill); border-color: var(--pal-green-fill);
  color: var(--pal-on-accent);
}
.btn-danger, .btn-danger:disabled, .btn-danger.disabled {
  background-color: var(--pal-red-fill); border-color: var(--pal-red-fill);
  color: var(--pal-on-accent);
}
.btn-warning, .btn-warning:disabled, .btn-warning.disabled {
  background-color: var(--pal-amber-fill); border-color: var(--pal-amber-fill);
  color: var(--pal-on-accent);
}
.btn-info, .btn-info:disabled, .btn-info.disabled {
  background-color: var(--pal-teal-fill); border-color: var(--pal-teal-fill);
  color: var(--pal-on-accent);
}
.btn-dark, .btn-dark:disabled, .btn-dark.disabled {
  background-color: var(--pal-fill); border-color: var(--pal-fill);
  color: var(--pal-on-accent);
}
.btn-light, .btn-light:disabled, .btn-light.disabled {
  background-color: var(--pal-bg-soft); border-color: var(--pal-border);
  color: var(--pal-text);
}
/* keadaan sentuh: satu langkah lebih pekat, memakai rona TEKS yang
   memang versi gelap dari tiap rona */
.btn-success:hover, .btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--pal-green); border-color: var(--pal-green);
  color: var(--pal-on-accent);
}
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active {
  background-color: var(--pal-red); border-color: var(--pal-red);
  color: var(--pal-on-accent);
}
.btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active {
  background-color: var(--pal-amber); border-color: var(--pal-amber);
  color: var(--pal-on-accent);
}
.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active {
  background-color: var(--pal-teal-ink); border-color: var(--pal-teal-ink);
  color: var(--pal-on-accent);
}
.btn-dark:hover, .btn-dark:not(:disabled):not(.disabled):active {
  background-color: var(--pal-fill-hover); border-color: var(--pal-fill-hover);
}
.btn-light:hover, .btn-light:not(:disabled):not(.disabled):active {
  background-color: var(--pal-border-soft); border-color: var(--pal-border);
  color: var(--pal-text);
}
.btn-outline-dark { color: var(--pal-text); border-color: var(--pal-border); }
.btn-outline-dark:hover, .btn-outline-dark:not(:disabled):not(.disabled):active {
  background-color: var(--pal-fill); border-color: var(--pal-fill);
  color: var(--pal-on-accent);
}
.btn-outline-light { color: var(--pal-text); border-color: var(--pal-border); }
.btn-outline-light:hover {
  background-color: var(--pal-bg-soft); color: var(--pal-text);
}

/* -- utilitas latar (dipakai bersama .text-white) -- */
.bg-success { background-color: var(--pal-green-fill) !important; }
.bg-danger { background-color: var(--pal-red-fill) !important; }
.bg-warning { background-color: var(--pal-amber-fill) !important; }
.bg-info { background-color: var(--pal-teal-fill) !important; }
.bg-secondary { background-color: var(--pal-faint) !important; }
.text-light { color: var(--pal-bg-soft) !important; }

/* -- permukaan kecil yang tersisa -- */
.progress { background-color: var(--pal-bg-soft); }
.card-footer { background-color: var(--pal-bg-soft); }
.custom-file-label { background-color: var(--pal-surface); color: var(--pal-text); }
.list-group-item-action { color: var(--pal-text); }
.alert-light {
  background-color: var(--pal-bg-soft);
  border-color: var(--pal-border);
  color: var(--pal-text);
}

/* ════════════════════════════════════════════════════════════════════
   SELECT2 -> TOKEN PORTAL
   Select2 membawa stylesheet sendiri dengan latar putih dipatok, dan
   sampai 8 Sep 2026 tema tidak pernah menawarnya - itu sebabnya kotak
   pilih tetap menyala terang di tengah halaman gelap.

   Dua salinan dipakai: static/vendor/select2-4.1.0-rc.0.min.css dan
   milik Django admin (admin/css/vendor/select2/select2.min.css).
   Keduanya Select2 v4 bernama kelas sama, jadi aturan di bawah menutup
   dua-duanya.

   Pemilih diawali "html" DENGAN SENGAJA: kedua <link> itu dimuat
   SESUDAH palapa-theme.css, jadi pada kekhususan yang sama Select2
   menang. Menambah satu elemen di depan cukup untuk membalik urutan
   tanpa menaburkan !important.
   ════════════════════════════════════════════════════════════════════ */
html .select2-dropdown {
  background-color: var(--pal-surface);
  border-color: var(--pal-border);
}
html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-selection--multiple {
  background-color: var(--pal-surface);
  border-color: var(--pal-border);
}
html .select2-container--default .select2-selection--single
  .select2-selection__rendered { color: var(--pal-text); }
html .select2-container--default .select2-selection--single
  .select2-selection__placeholder,
html .select2-container--default .select2-selection--multiple
  .select2-selection__placeholder { color: var(--pal-faint); }
html .select2-container--default .select2-selection--single
  .select2-selection__arrow b { border-top-color: var(--pal-faint); }
html .select2-container--default.select2-container--open
  .select2-selection--single .select2-selection__arrow b {
  border-bottom-color: var(--pal-faint);
}
html .select2-container--default.select2-container--disabled
  .select2-selection--single,
html .select2-container--default.select2-container--disabled
  .select2-selection--multiple { background-color: var(--pal-bg-soft); }

/* pil pilihan pada mode multi - disamakan dengan .pal-badge is-indigo */
html .select2-container--default .select2-selection--multiple
  .select2-selection__choice {
  background-color: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}
html .select2-container--default .select2-selection--multiple
  .select2-selection__choice__remove { color: var(--pal-indigo-ink); }

/* daftar hasil */
html .select2-container--default .select2-results__option {
  color: var(--pal-text);
}
html .select2-container--default .select2-results__option--disabled,
html .select2-container--default
  .select2-results__option[aria-disabled="true"] { color: var(--pal-faint); }
html .select2-container--default .select2-results__option--selected,
html .select2-container--default
  .select2-results__option[aria-selected="true"] {
  background-color: var(--pal-bg-soft);
}
/* biru #5897fb bawaan Select2 adalah palet ketiga di layar yang sama */
html .select2-container--default
  .select2-results__option--highlighted[aria-selected],
html .select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--pal-indigo);
  color: var(--pal-on-accent);
}
html .select2-container--default .select2-search--dropdown
  .select2-search__field {
  background-color: var(--pal-surface);
  border-color: var(--pal-border);
  color: var(--pal-text);
}

/* ════════════════════════════════════════════════════════════════════
   BARIS TABEL BERTONA & HOVER
   Dilaporkan 8 Sep 2026: baris bertona "memutih" saat disentuh di mode
   gelap. Dua sebab.

   1. Bootstrap menyetel DUA hal di ".table-hover tbody tr:hover":
      color #212529 DAN latar. Tema hanya menimpa latarnya, jadi warna
      teksnya lolos - baris yang disentuh teksnya jadi hampir hitam di
      atas latar gelap dan tampak kosong.

   2. Tona dasar .table-success dst. sudah dijembatani, tapi versi
      HOVER-nya (.table-hover .table-success:hover) belum - jadi baris
      hijau gelap melompat ke hijau pucat begitu disentuh.

   Bootstrap membuat tona hover satu langkah lebih PEKAT: benar di mode
   terang, terbalik di gelap. Satu token tidak bisa dua arah, jadi
   latarnya dikunci ke tona dasarnya dan umpan baliknya diberi lapisan
   abu netral 12% - lapisan itu menarik warna apa pun ke arah abu
   tengah, sehingga menggelapkan tona terang DAN menerangkan tona
   gelap. Benar di kedua mode, tanpa token tambahan.
   ════════════════════════════════════════════════════════════════════ */

/* teks baris yang disentuh ikut token, bukan #212529 milik Bootstrap */
.table-hover tbody tr:hover { color: var(--pal-text); }

/* tona dasar */
.table-primary, .table-primary > td, .table-primary > th { background-color: var(--pal-indigo-border); }
.table-secondary, .table-secondary > td, .table-secondary > th { background-color: var(--pal-border); }
.table-success, .table-success > td, .table-success > th { background-color: var(--pal-green-border); }
.table-danger, .table-danger > td, .table-danger > th { background-color: var(--pal-red-border); }
.table-warning, .table-warning > td, .table-warning > th { background-color: var(--pal-amber-border); }
.table-info, .table-info > td, .table-info > th { background-color: var(--pal-teal-border); }
.table-light, .table-light > td, .table-light > th { background-color: var(--pal-bg-soft); }
.table-dark, .table-dark > td, .table-dark > th { background-color: var(--pal-border); }

/* hover tona: dikunci ke tona dasarnya supaya tidak melompat terang */
html .table-hover .table-primary:hover,
html .table-hover .table-primary:hover > td,
html .table-hover .table-primary:hover > th { background-color: var(--pal-indigo-border); }
html .table-hover .table-secondary:hover,
html .table-hover .table-secondary:hover > td,
html .table-hover .table-secondary:hover > th { background-color: var(--pal-border); }
html .table-hover .table-success:hover,
html .table-hover .table-success:hover > td,
html .table-hover .table-success:hover > th { background-color: var(--pal-green-border); }
html .table-hover .table-danger:hover,
html .table-hover .table-danger:hover > td,
html .table-hover .table-danger:hover > th { background-color: var(--pal-red-border); }
html .table-hover .table-warning:hover,
html .table-hover .table-warning:hover > td,
html .table-hover .table-warning:hover > th { background-color: var(--pal-amber-border); }
html .table-hover .table-info:hover,
html .table-hover .table-info:hover > td,
html .table-hover .table-info:hover > th { background-color: var(--pal-teal-border); }
html .table-hover .table-light:hover,
html .table-hover .table-light:hover > td,
html .table-hover .table-light:hover > th { background-color: var(--pal-bg-soft); }
html .table-hover .table-dark:hover,
html .table-hover .table-dark:hover > td,
html .table-hover .table-dark:hover > th { background-color: var(--pal-border); }

/* umpan balik hover yang benar di kedua mode */
html .table-hover tbody tr[class*="table-"]:hover > td,
html .table-hover tbody tr[class*="table-"]:hover > th {
  box-shadow: inset 0 0 0 9999px rgba(128, 128, 128, .12);
}

/* garis dalam baris bertona: netral, supaya terlihat di kedua mode */
.table-primary td, .table-primary th, .table-primary tbody + tbody,
.table-secondary td, .table-secondary th, .table-secondary tbody + tbody,
.table-success td, .table-success th, .table-success tbody + tbody,
.table-danger td, .table-danger th, .table-danger tbody + tbody,
.table-warning td, .table-warning th, .table-warning tbody + tbody,
.table-info td, .table-info th, .table-info tbody + tbody,
.table-light td, .table-light th, .table-light tbody + tbody,
.table-dark td, .table-dark th, .table-dark tbody + tbody {
  border-color: var(--pal-border);
}

/* ════════════════════════════════════════════════════════════════════
   KONTROL FORM
   Dilaporkan 9 Sep 2026: "hampir semua filter tidak terbaca di mode
   gelap karena latarnya putih".

   Tema menyetel color dan border-color pada .form-control/.custom-select
   tapi TIDAK PERNAH background-color, jadi latar putih Bootstrap tetap
   berlaku sementara teksnya sudah ikut token dan menerang: teks terang
   di atas kotak putih. Ini pasangan separuh yang sama seperti bug Meja
   Kerja, hanya saja hidup di lapisan CSS - bukan di templat - sehingga
   penjaga yang membaca templat tidak bisa melihatnya.

   Keadaan focus ikut disebut karena Bootstrap MENGEMBALIKAN latar ke
   #fff di situ; tanpa itu kotaknya memutih justru saat sedang diisi.
   ════════════════════════════════════════════════════════════════════ */
.form-control,
.custom-select,
textarea.form-control,
select.form-control {
  background-color: var(--pal-surface);
}
.form-control:focus,
.custom-select:focus,
select.form-control:focus {
  background-color: var(--pal-surface);
  color: var(--pal-text);
}
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  background-color: var(--pal-bg-soft);
  color: var(--pal-muted);
}
.form-control-plaintext { color: var(--pal-text); }
.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label { color: var(--pal-faint); }

/* Panah .custom-select adalah gambar SVG bergaris #343a40 - nyaris tak
   terlihat di atas latar gelap. Diganti versi bergaris terang. Ini satu
   dari sedikit aturan mode gelap yang menyentuh komponen, bukan token:
   warna di dalam data URI tidak bisa dijangkau custom property. */
html.pal-gelap .custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23aeb7c4' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}

/* Dikurung @media screen dengan sengaja: media cetak tidak boleh
   melihat nilai ini sama sekali, sehingga jatuh kembali ke :root yang
   terang. Kertas tidak punya mode gelap, dan browser membuang latar
   saat mencetak tapi TIDAK membuang warna teks - tanpa kurungan ini
   cetakan jadi teks abu muda di atas putih. */
@media screen {
  html.pal-gelap {
    color-scheme: dark;

    --pal-ink: #e8ecf2;
    --pal-ink-hover: #ffffff;
    --pal-ink-fill: #1f2937;   /* latar pekat tetap pekat */
    --pal-text: #e8ecf2;
    --pal-muted: #aeb7c4;
    --pal-faint: #8b95a5;
    --pal-border: #2f3947;
    --pal-border-soft: #262f3b;
    --pal-bg-soft: #202733;
    --pal-page-bg: #14181f;

    --pal-surface: #1b212b;
    --pal-on-accent: #f2f5f9;
    --pal-fill: #2b3442;
    --pal-fill-hover: #3a4557;

    /* indigo: -indigo isian, -hover isian saat disentuh (lebih terang),
       -dark warna TAUTAN (di gelap ia justru yang paling terang) */
    --pal-indigo: #5b57e0;
    --pal-indigo-hover: #6f6ae8;
    --pal-indigo-dark: #a5a0fa;
    --pal-indigo-soft: #232447;
    --pal-indigo-border: #3d3b78;
    --pal-indigo-ink: #c9c5ff;

    /* rona semantik dibalik: aksen jadi terang, -soft jadi gelap pekat */
    --pal-green: #6ee7a2;
    --pal-green-soft: #14251c;
    --pal-green-border: #235039;
    --pal-red: #f79189;
    --pal-red-soft: #2a1618;
    --pal-red-border: #5c2c2e;
    --pal-amber: #f0c674;
    --pal-amber-soft: #2a2114;
    --pal-amber-border: #5a4523;
    --pal-teal: #5ecfc0;
    --pal-teal-soft: #11221e;
    --pal-teal-border: #23443c;
    --pal-teal-ink: #a7e8de;

  --pal-green-accent: #4ade80;
  --pal-amber-accent: #f0b429;
  --pal-red-accent: #f87171;

  /* sengaja sama dengan mode terang - lihat komentarnya di :root */
  --pal-green-fill: #15803d;
  --pal-red-fill: #b91c1c;
  --pal-amber-fill: #b45309;
  --pal-teal-fill: #0f766e;

  /* sengaja sama dengan mode terang - lihat :root */
  --pal-on-accent-muted: #9ca3af;

    --primary: #5b57e0;
    --blue: #5b57e0;

    /* bayangan tidak terbaca di atas latar gelap kalau warnanya biru
       transparan - dipekatkan ke hitam supaya kedalaman tetap terasa */
    --pal-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .45);
    --pal-shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
    --pal-focus: 0 0 0 3px rgba(139, 133, 245, .5);
  }
}


/* ── Warisan style.css (satu-satunya yang layak hidup) ────────────────
   Portal lahir dari template marketing (style.css) yang kini sudah
   dibuang. Seluruh halaman ditulis dengan asumsi reset ini aktif —
   tanpa dia, setiap <ul> konten tiba-tiba berbintik bullet dan
   ber-indentasi. Aturan elemen lain milik style.css sengaja TIDAK
   diport: font/warna sudah ditutup tema, dan b/sup/sub/u/del oranye
   (#ff5e13) adalah artefak marketing yang memang mau dimatikan. */
ul { margin: 0; padding: 0; }
li { list-style: none; }

/* ── Tipografi dasar ──────────────────────────────────────────────── */
body {
  font-family: var(--pal-font);
  font-size: calc(16px + var(--fs-naik, 1px));
  color: var(--pal-text);
  background: var(--pal-surface);
  -webkit-font-smoothing: antialiased;
  /* footer selalu menempel di dasar layar meski konten pendek */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
p {
  font-family: var(--pal-font);
  font-size: calc(1rem + var(--fs-naik, 1px));
  line-height: 1.6;
  color: var(--pal-text);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pal-font);
  color: var(--pal-ink);
  font-weight: 700;
}
a {
  color: var(--pal-indigo-dark);
}
a:hover {
  color: var(--pal-indigo-ink);
  text-decoration: none;
}
small, .small {
  font-size: 87.5%;
}
code, kbd, pre, samp, .text-monospace {
  font-family: var(--pal-mono);
}

/* ── Tombol ───────────────────────────────────────────────────────── */
.btn {
  font-family: var(--pal-font);
  border-radius: var(--pal-radius);
  font-weight: 600;
}
.btn:focus, .btn.focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}
.btn-primary {
  background: var(--pal-indigo);
  border-color: var(--pal-indigo);
}
/* .focus (kelas) ikut disebut, bukan cuma :focus (pseudo): Bootstrap
   memasang kelas itu lewat JS pada tombol di dalam grup & dropdown —
   tanpa ini tombolnya berkedip biru saat diklik. */
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background: var(--pal-indigo-hover);
  border-color: var(--pal-indigo-hover);
}
.btn-primary.disabled, .btn-primary:disabled {
  background: var(--pal-indigo);
  border-color: var(--pal-indigo);
}
.btn-outline-primary {
  color: var(--pal-indigo-dark);
  border-color: var(--pal-indigo-border);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: var(--pal-indigo-dark);
  border-color: var(--pal-indigo-border);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
  background: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}
/* .btn-xs dipakai empat template tapi tidak pernah didefinisikan: kelas
   itu ada di Bootstrap 3 dan DIBUANG di Bootstrap 4, jadi selama ini
   tombolnya diam-diam dirender seukuran tombol penuh dan memakan lebar
   kolom aksi. Didefinisikan di sini, bukan diganti btn-sm satu per satu
   di tiap template, supaya seluruh pemakainya sembuh sekaligus. */
.btn-xs {
  padding: .15rem .45rem;
  font-size: var(--fs-xs);
  line-height: 1.25;
  border-radius: .2rem;
}

.btn-secondary {
  background: var(--pal-fill);
  border-color: var(--pal-fill);
}
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active {
  background: var(--pal-fill-hover);
  border-color: var(--pal-fill-hover);
}

/* ── Form controls ────────────────────────────────────────────────── */
.form-control, .custom-select {
  font-family: var(--pal-font);
  font-size: calc(16px + var(--fs-naik, 1px));
  color: var(--pal-text);
  border-color: var(--pal-border);
  border-radius: var(--pal-radius);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--pal-indigo-border);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.form-control::placeholder {
  color: var(--pal-faint);
}
label {
  color: var(--pal-text);
  font-weight: 600;
}
.form-text, .help-block, .invalid-feedback {
  font-size: calc(14px + var(--fs-naik, 1px));
}

/* ── Kartu ────────────────────────────────────────────────────────── */
.card {
  border-color: var(--pal-border);
  border-radius: var(--pal-radius-lg);
  box-shadow: var(--pal-shadow);
}
.card-header {
  background: var(--pal-bg-soft);
  border-bottom-color: var(--pal-border);
  font-weight: 700;
  color: var(--pal-ink);
}

/* ── Tabel ────────────────────────────────────────────────────────── */
.table {
  color: var(--pal-text);
}
.table thead th {
  background: var(--pal-bg-soft);
  border-bottom: 1px solid var(--pal-border);
  border-top: none;
  color: var(--pal-muted);
  font-weight: 700;
}
.table td, .table th {
  border-top-color: var(--pal-border-soft);
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: var(--pal-bg-soft);
}
.thead-dark th, .table .thead-dark th {
  background-color: var(--pal-fill) !important;
  border-color: var(--pal-fill) !important;
  color: var(--pal-on-accent);
}

/* ── Alert, badge ─────────────────────────────────────────────────── */
.alert {
  border-radius: var(--pal-radius-lg);
  font-size: calc(15px + var(--fs-naik, 1px));
}
.alert-success {
  background: var(--pal-green-soft);
  border-color: var(--pal-green-border);
  color: var(--pal-green);
}
.alert-danger, .alert-error {
  background: var(--pal-red-soft);
  border-color: var(--pal-red-border);
  color: var(--pal-red);
}
.alert-warning {
  background: var(--pal-amber-soft);
  border-color: var(--pal-amber-border);
  color: var(--pal-amber);
}
.alert-info {
  background: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}
.badge {
  border-radius: 12px;
  font-weight: 700;
  padding: 4px 10px;
}

/* ── Modal ────────────────────────────────────────────────────────── */
.modal-content {
  border: 1px solid var(--pal-border);
  border-radius: var(--pal-radius-lg);
  box-shadow: var(--pal-shadow-lg);
}
.modal-header {
  background: var(--pal-fill);
  color: var(--pal-on-accent);
  border-bottom: none;
  border-radius: calc(var(--pal-radius-lg) - 1px) calc(var(--pal-radius-lg) - 1px) 0 0;
  padding: 12px 18px;
}
.modal-header .modal-title {
  color: var(--pal-on-accent);
  font-size: calc(17px + var(--fs-naik, 1px));
}
.modal-header .close {
  color: var(--pal-on-accent);
  text-shadow: none;
  opacity: 0.7;
}
.modal-header .close:hover {
  opacity: 1;
}
.modal-footer {
  border-top-color: var(--pal-border-soft);
}

/* ── Dropdown ─────────────────────────────────────────────────────── */
.dropdown-menu {
  border-color: var(--pal-border);
  border-radius: var(--pal-radius-lg);
  box-shadow: var(--pal-shadow-lg);
  font-size: calc(15px + var(--fs-naik, 1px));
}
.dropdown-item {
  color: var(--pal-text);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--pal-indigo-soft);
  color: var(--pal-indigo-ink);
}
.dropdown-header {
  font-size: calc(12px + var(--fs-naik, 1px));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pal-faint);
}

/* ── Pagination (blok bawaan layout.html) ─────────────────────────── */
.pagination {
  margin: 24px 0;
  justify-content: center;
}
.pagination .page-links {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: calc(15px + var(--fs-naik, 1px));
}
.pagination .page-links a {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--pal-border);
  border-radius: var(--pal-radius);
  color: var(--pal-text);
  font-weight: 600;
  background: var(--pal-surface);
}
.pagination .page-links a:hover {
  background: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}
.pagination .page-current {
  color: var(--pal-muted);
  padding: 0 6px;
}
.page-link {
  color: var(--pal-indigo-dark);
}
.page-item.active .page-link {
  background: var(--pal-indigo);
  border-color: var(--pal-indigo);
}
.pal-brand-logo {
  height: 34px;
  width: auto;
  margin-right: 8px;
}
.pal-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
/* fallback avatar: lingkaran inisial bila foto profil tidak ada/rusak */
.pal-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pal-indigo), var(--pal-indigo-ink));
  color: var(--pal-on-accent);
  font-size: calc(11.5px + var(--fs-naik, 1px));
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── Loading state global tombol submit (anti double-submit) ──────── */
.pal-btn-loading {
  pointer-events: none;
  opacity: 0.75;
}
button.pal-btn-loading::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: -2px;
  animation: pal-spin 0.7s linear infinite;
}
@keyframes pal-spin {
  to { transform: rotate(360deg); }
}

/* ── Pencarian menu cepat (Ctrl+K) ────────────────────────────────── */
/* Sapaan menurut jam + nama pengguna, di sebelah merek. Sengaja tidak
   setebal merek dan tidak sepucat teks samar: ia dibaca sekilas sekali
   saat halaman terbuka, lalu tidak boleh lagi menarik mata.

   Disembunyikan di bawah xl karena di lebar itu navbar sudah memuat
   tombol lipat, merek, kotak pencarian, chip cabang, saklar tema dan
   avatar - sapaan yang memaksa masuk akan menggencet kotak pencarian
   yang jauh lebih sering dipakai. */
.pal-sapaan {
  display: none;
  align-items: center;
  flex: none;
  margin-right: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--pal-border);
  color: var(--pal-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1200px) {
  .pal-sapaan { display: inline-flex; }
}

.pal-nav-search-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.pal-nav-search-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--pal-on-accent);
  border-radius: var(--pal-radius);
  font-size: calc(14px + var(--fs-naik, 1px));
  padding: 5px 12px;
  width: 190px;
  transition: width 0.15s ease, background 0.15s ease;
}
.pal-nav-search-input::placeholder {
  color: var(--pal-faint);
}
.pal-nav-search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--pal-indigo-border);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
  width: 240px;
}
.pal-nav-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 300px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--pal-surface);
  border: 1px solid var(--pal-border);
  border-radius: var(--pal-radius-lg);
  box-shadow: var(--pal-shadow-lg);
  display: none;
  z-index: 1050;
}
.pal-nav-search-results.show {
  display: block;
}
.pal-nav-search-results a {
  display: block;
  padding: 8px 16px;
  font-size: calc(14.5px + var(--fs-naik, 1px));
  color: var(--pal-text);
}
.pal-nav-search-results a:hover,
.pal-nav-search-results a.active {
  background: var(--pal-indigo-soft);
  color: var(--pal-indigo-ink);
  text-decoration: none;
}
.pal-nav-search-results .psr-group {
  font-size: calc(11px + var(--fs-naik, 1px));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pal-faint);
  padding: 8px 16px 2px;
}
.pal-nav-search-results .psr-empty {
  padding: 10px 16px;
  color: var(--pal-muted);
  font-size: calc(14px + var(--fs-naik, 1px));
}
@media (max-width: 991.98px) {
  .pal-nav-search-item {
    margin: 8px 0;
  }
  .pal-nav-search-input,
  .pal-nav-search-input:focus {
    width: 100%;
  }
  .pal-nav-search-results {
    left: 0;
    right: auto;
    width: 100%;
  }
}

/* ── Pola halaman standar (dipakai bertahap mulai Fase 3) ─────────── */
.pal-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 16px;
}
.pal-page-title {
  font-size: calc(22px + var(--fs-naik, 1px));
  font-weight: 800;
  color: var(--pal-ink);
  margin: 0;
}
.pal-page-sub {
  font-size: calc(14px + var(--fs-naik, 1px));
  color: var(--pal-muted);
  margin-top: 2px;
}
.pal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pal-pill {
  display: inline-block;
  font-family: var(--pal-mono);
  font-weight: 700;
  font-size: calc(15px + var(--fs-naik, 1px));
  background: var(--pal-indigo-soft);
  color: var(--pal-indigo-ink);
  padding: 3px 12px;
  border-radius: var(--pal-radius);
  border: 1px solid var(--pal-indigo-border);
  letter-spacing: 0.3px;
}
.pal-card {
  background: var(--pal-surface);
  border: 1px solid var(--pal-border);
  border-radius: var(--pal-radius-lg);
  overflow: hidden;
  box-shadow: var(--pal-shadow);
  margin-bottom: 16px;
}
.pal-card-head {
  background: var(--pal-fill);
  color: var(--pal-on-accent);
  padding: 9px 14px;
  font-size: calc(15px + var(--fs-naik, 1px));
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pal-card-body {
  padding: 16px;
}
/* wadah halaman form: sempit & di tengah */
.pal-form-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 12px 40px;
}
.pal-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--pal-border-soft);
}

/* ── Polesan halaman form gaya lama (h1#judul + crispy) ───────────── */
/* Berlaku otomatis untuk ±47 halaman form/proses yang belum dikonversi
   ke pola .pal-* — heading template lama sangat besar (2.5rem Poppins) */
#judul,
.case_details_area h1,
.case_details_area h2 {
  font-size: calc(24px + var(--fs-naik, 1px));
  font-weight: 800;
  color: var(--pal-ink);
}
.case_details_area .border-bottom {
  border-bottom-color: var(--pal-border) !important;
}
legend {
  font-size: calc(18px + var(--fs-naik, 1px));
  font-weight: 700;
  color: var(--pal-ink);
  padding-bottom: 6px;
}
/* tombol aksi utama bergaya lama (btn-outline-info) diselaraskan indigo */
.btn-outline-info {
  color: var(--pal-indigo-dark);
  border-color: var(--pal-indigo-border);
}
.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active {
  background: var(--pal-indigo);
  border-color: var(--pal-indigo);
  color: var(--pal-on-accent);
}

/* ── Area konten ──────────────────────────────────────────────────── */
/* style.css template lama memberi padding-top:100px + margin-top:138px
   untuk mengimbangi header overlay — dengan navbar sticky in-flow yang
   baru, offset itu hanya jadi ruang kosong di atas heading tiap halaman */
.case_details_area {
  padding-top: 12px !important;
  margin-top: 0 !important;
}
/* Lebar ergonomis di layar lebar (xl/xxl): konten yang membentang
   penuh justru sulit dibaca — mata menempuh terlalu jauh dari kolom
   kiri ke kanan dan mudah kehilangan barisnya. Konten dibatasi
   ±1460px dan ditengahkan; berlaku untuk halaman ber-.container
   (MRV, Resi) maupun halaman fluid .d365-page (Surat Jalan, Purchase
   Invoice, Payment, Claim, Invoices, dst.). Halaman form tidak
   terpengaruh: punya max-width sendiri (.pal-form-wrap / nested). */
@media (min-width: 1200px) {
  /* Dua kekeliruan diperbaiki di sini 8 Sep 2026, dua-duanya membuat
     halaman terasa sempit padahal komentar di atas menjanjikan 1460px.

     1. Pemilihnya dulu "body > .container". Sejak navigasi pindah ke
        sidebar rantainya body > .pal-shell > .pal-body > .container,
        jadi kombinator anak dari body TIDAK PERNAH cocok: yang berlaku
        selama ini cuma max-width 1140px bawaan Bootstrap, untuk SETIAP
        halaman ber-.container.
     2. ".d365-page.container-fluid" dulu ikut dibatasi di sini. Itu
        selalu salah satu dari dua hal: redundan (halamannya memang di
        dalam .container yang sudah dibatasi) atau merusak (halamannya
        memilih lebar penuh, tapi isinya tetap terkunci 1460px).

     Batas ini untuk PROSA. Tabel dipindai per kolom, bukan dibaca
     kiri-ke-kanan, jadi halaman daftar keluar lewat pal-lebar. */
  .pal-body > .container {
    max-width: min(92vw, 1460px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Footer ramping ───────────────────────────────────────────────── */
.pal-footer {
  /* margin-top:auto (bukan nilai tetap) mendorong footer ke dasar
     flex column body saat konten halaman pendek */
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--pal-border);
  background: var(--pal-bg-soft);
  color: var(--pal-muted);
  font-size: calc(14px + var(--fs-naik, 1px));
  padding: 18px 0;
}
.pal-footer a {
  color: var(--pal-muted);
}
.pal-footer a:hover {
  color: var(--pal-ink);
}
.pal-footer .pal-footer-logo {
  height: 26px;
  width: auto;
  margin-right: 6px;
  vertical-align: middle;
}

/* ── Halaman auth: login / logout ─────────────────────────────────── */
.pal-auth {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 62px);
  margin-top: -1px;
}
/* panel kiri: brand */
.pal-auth-side {
  flex: 1 1 52%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 7%;
  color: #e5e7eb;
  background:
    radial-gradient(1100px 560px at 15% -10%, #2c3a52 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #312e81 0%, transparent 55%),
    linear-gradient(160deg, #1f2937 0%, #111827 100%);
}
.pal-auth-side::before,
.pal-auth-side::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.pal-auth-side::before { width: 460px; height: 460px; right: -140px; bottom: -160px; }
.pal-auth-side::after  { width: 300px; height: 300px; right: 40px;  bottom: -60px;  }
.pal-auth-eyebrow {
  font-size: calc(12px + var(--fs-naik, 1px));
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pal-faint);
  margin-bottom: 18px;
}
.pal-auth-side h1 {
  font-size: calc(42px + var(--fs-naik, 1px));
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
}
.pal-auth-accent {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6366f1, #a5b4fc);
  margin-bottom: 22px;
}
.pal-auth-side p {
  color: #cbd5e1;
  font-size: calc(17px + var(--fs-naik, 1px));
  max-width: 460px;
}
.pal-auth-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.pal-auth-chips span {
  font-size: calc(13px + var(--fs-naik, 1px));
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(165, 180, 252, 0.25);
  border-radius: 20px;
  padding: 5px 14px;
}
/* panel kanan: kartu form */
.pal-auth-main {
  flex: 1 1 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--pal-bg-soft);
}
.pal-auth-card {
  width: 100%;
  max-width: 430px;
  background: var(--pal-surface);
  border: 1px solid var(--pal-border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
  padding: 42px 38px 34px;
}
.pal-auth-card .pal-auth-logo {
  height: 46px;
  width: auto;
  margin-bottom: 18px;
}
.pal-auth-card h2 {
  font-size: calc(24px + var(--fs-naik, 1px));
  font-weight: 800;
  margin-bottom: 4px;
}
.pal-auth-card .pal-auth-sub {
  color: var(--pal-muted);
  font-size: calc(15px + var(--fs-naik, 1px));
  margin-bottom: 26px;
}
.pal-auth-label {
  display: block;
  font-size: calc(13px + var(--fs-naik, 1px));
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pal-muted);
  margin-bottom: 6px;
}
.pal-auth-field {
  position: relative;
  margin-bottom: 18px;
}
.pal-auth-field > .fa {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pal-faint);
  font-size: calc(15px + var(--fs-naik, 1px));
  pointer-events: none;
}
.pal-auth-field input {
  width: 100%;
  padding: 12px 44px 12px 42px;
  border: 1px solid var(--pal-border);
  border-radius: 8px;
  font-size: calc(16px + var(--fs-naik, 1px));
  color: var(--pal-text);
  background: var(--pal-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pal-auth-field input:focus {
  outline: none;
  border-color: var(--pal-indigo-border);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.13);
}
.pal-auth-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--pal-faint);
  padding: 8px 10px;
  cursor: pointer;
}
.pal-auth-eye:hover { color: var(--pal-text); }
.pal-auth-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--pal-indigo), var(--pal-indigo-dark));
  color: var(--pal-on-accent);
  font-size: calc(16px + var(--fs-naik, 1px));
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pal-auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.42);
  color: var(--pal-on-accent);
}
.pal-auth-links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--pal-border-soft);
  font-size: calc(14px + var(--fs-naik, 1px));
  color: var(--pal-muted);
}
.pal-auth-links a { font-weight: 600; }
.pal-auth-error {
  background: var(--pal-red-soft);
  border: 1px solid var(--pal-red-border);
  color: var(--pal-red);
  border-radius: 8px;
  font-size: calc(14.5px + var(--fs-naik, 1px));
  padding: 10px 14px;
  margin-bottom: 18px;
}
/* kartu logout di tengah */
.pal-auth-center {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background:
    radial-gradient(900px 480px at 85% -10%, var(--pal-indigo-soft) 0%, transparent 60%),
    var(--pal-bg-soft);
}
.pal-auth-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  background: var(--pal-indigo-soft);
  border: 1px solid var(--pal-indigo-border);
  color: var(--pal-indigo);
  font-size: calc(28px + var(--fs-naik, 1px));
}
@media (max-width: 991.98px) {
  .pal-auth { flex-direction: column; min-height: 0; }
  .pal-auth-side { padding: 42px 24px; }
  .pal-auth-side h1 { font-size: calc(30px + var(--fs-naik, 1px)); }
  .pal-auth-side::before, .pal-auth-side::after { display: none; }
  .pal-auth-main { padding: 32px 16px 48px; }
  .pal-auth-card { padding: 32px 24px 28px; }
}

/* ── Scrollbar halus (WebKit) ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--pal-bg-soft);
}
::-webkit-scrollbar-thumb {
  background: var(--pal-border);
  border-radius: 6px;
  border: 2px solid var(--pal-bg-soft);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pal-faint);
}

/* ── Print: sembunyikan shell aplikasi ────────────────────────────── */
@media print {
  /* .pal-side & .pal-scrim ditambahkan bersama sidebar: <nav> tidak
     ikut tersapu oleh selector "header, footer" seperti navbar lama */
  header, footer, .pal-footer, .pagination, .pal-side, .pal-scrim {
    display: none !important;
  }
}

/* =====================================================================
   FASE 4 — TAMPILAN SEGAR + RAMAH MATA (accessibility-first)

   Tujuan:
   1. Teks lebih besar & kontras tinggi (WCAG AA/AAA) — nyaman utk mata
      yang lelah/minus, tanpa mengubah struktur halaman.
   2. Target klik lebih besar (tombol/field min 44px) & focus ring jelas.
   3. Tampilan modern: sudut lebih membulat, bayangan halus berlapis,
      warna aksen lebih hidup, spasi lebih lega.

   Dimuat paling akhir sehingga menimpa Fase 1–3 di atas.
   ===================================================================== */

/* (Token kontras/radius/bayangan fase ini sudah menyatu ke blok token
   tunggal di kepala berkas.) */


/* ── Dasar: teks lebih besar & lega ────────────────────────────────── */
body {
  font-size: calc(17px + var(--fs-naik, 1px));
  line-height: 1.65;
  color: var(--pal-text);
  background: var(--pal-page-bg);
  letter-spacing: .002em;
}
main, .container { color: var(--pal-text); }
p { font-size: calc(1rem + var(--fs-naik, 1px)); line-height: 1.7; }
h1 { font-size: calc(1.9rem + var(--fs-naik, 1px)); letter-spacing: -.01em; }
h2 { font-size: calc(1.6rem + var(--fs-naik, 1px)); letter-spacing: -.01em; }
h3 { font-size: calc(1.35rem + var(--fs-naik, 1px)); }
h4 { font-size: calc(1.18rem + var(--fs-naik, 1px)); }
h5 { font-size: calc(1.05rem + var(--fs-naik, 1px)); }
small, .small { font-size: .9rem; }
.text-muted { color: var(--pal-muted) !important; }

/* Jangan biarkan teks super kecil di halaman lama menjadi tak terbaca:
   naikkan lantai ukuran font pada elemen umum. */
body, td, th, li, label, span, div, a, button, input, select, textarea {
  font-size: inherit;
}
[style*="font-size:11"], [style*="font-size: 11"],
[style*="font-size:12"], [style*="font-size: 12"] { font-size: 13.5px !important; }
[style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 14.5px !important; }

/* ── Focus ring jelas di SEMUA elemen interaktif ───────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid var(--pal-indigo);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus, .btn.focus { box-shadow: var(--pal-focus); }

/* ── Tombol: lebih besar & tegas ───────────────────────────────────── */
.btn {
  border-radius: var(--pal-radius);
  font-weight: 600;
  padding: .5rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm {
  min-height: 38px;
  padding: .35rem .8rem;
  font-size: .95rem;
}
.btn-lg { min-height: 52px; font-size: calc(1.1rem + var(--fs-naik, 1px)); }
.btn-primary { box-shadow: 0 1px 2px rgba(79, 70, 229, .35); }
.btn-outline-primary, .btn-outline-secondary,
.btn-outline-success, .btn-outline-danger, .btn-outline-info,
.btn-outline-warning {
  border-width: 2px;
  font-weight: 600;
}
.btn-outline-secondary { color: var(--pal-text); border-color: var(--pal-border); }
.btn-outline-secondary:hover { background: var(--pal-bg-soft); color: var(--pal-ink-hover); }

/* ── Field: tinggi nyaman, border tegas ────────────────────────────── */
.form-control, .custom-select, .select2-container--default .select2-selection--single {
  min-height: 44px;
  font-size: calc(1rem + var(--fs-naik, 1px));
  border-radius: var(--pal-radius);
  border: 1.5px solid var(--pal-border);
  color: var(--pal-text);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--pal-indigo);
  box-shadow: var(--pal-focus);
}
.form-control::placeholder { color: var(--pal-faint); }
label, .col-form-label { font-weight: 600; color: var(--pal-muted); }
.form-control-file { min-height: auto; }

/* ── Kartu & panel: modern, berlapis lembut ────────────────────────── */
.card, .pal-card {
  border-radius: var(--pal-radius-lg);
  border: 1px solid var(--pal-border);
  box-shadow: var(--pal-shadow);
  background: var(--pal-surface);
}
.card-header, .pal-card-head {
  border-top-left-radius: var(--pal-radius-lg);
  border-top-right-radius: var(--pal-radius-lg);
  font-size: .95rem;
  letter-spacing: .01em;
}
.pal-card-head { padding: .85rem 1.15rem; }
.pal-card-body { padding: 1.15rem; }

/* ── Tabel data: baris lebih tinggi, garis lebih terbaca ───────────── */
.table { font-size: .97rem; color: var(--pal-text); }
.table thead th {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pal-text);
  background: var(--pal-bg-soft);
  border-bottom: 2px solid var(--pal-border);
  padding: .7rem .85rem;
  white-space: nowrap;
}
.table td, .table th { padding: .7rem .85rem; vertical-align: middle; }
.table tbody tr { border-bottom: 1px solid var(--pal-border-soft); }
.table-hover tbody tr:hover { background: var(--pal-indigo-soft); }
.table-sm td, .table-sm th { padding: .5rem .7rem; }
/* zebra ringan biar mata tidak "loncat baris" */
.table-hover tbody tr:nth-child(even):not(:hover):not([class*="table-"]) {
  background: var(--pal-bg-soft);
}
.money, .text-monospace, code, kbd, pre, samp {
  font-family: var(--pal-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ── Alert & badge: kontras naik, ikon lebih besar ─────────────────── */
.alert {
  border-radius: var(--pal-radius-lg);
  border-width: 1.5px;
  font-size: calc(1rem + var(--fs-naik, 1px));
  padding: 1rem 1.15rem;
  box-shadow: var(--pal-shadow);
}
.alert-success { background: var(--pal-green-soft); border-color: var(--pal-green-border); color: var(--pal-green); }
.alert-danger  { background: var(--pal-red-soft); border-color: var(--pal-red-border); color: var(--pal-red); }
.alert-warning { background: var(--pal-amber-soft); border-color: var(--pal-amber-border); color: var(--pal-amber); }
.alert-info    { background: var(--pal-indigo-soft); border-color: var(--pal-indigo-border); color: var(--pal-indigo-ink); }
.badge { font-size: .82rem; font-weight: 700; padding: .38em .7em; border-radius: 999px; }
.dropdown-item { padding: .55rem 1.1rem; }
.dropdown-header {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pal-muted);
  font-weight: 800;
}


/* ── Halaman: latar lembut + kartu putih supaya konten "mengapung" ─── */
.pal-page-title { font-size: calc(1.75rem + var(--fs-naik, 1px)); letter-spacing: -.01em; }
.pal-page-sub { font-size: calc(1rem + var(--fs-naik, 1px)); color: var(--pal-muted); }
.pal-pill { font-size: .85rem; padding: .25em .8em; }

/* ── Modal & tooltip lebih terbaca ─────────────────────────────────── */
.modal-content { border-radius: var(--pal-radius-lg); box-shadow: var(--pal-shadow-lg); }
.modal-title { font-size: calc(1.15rem + var(--fs-naik, 1px)); }
.tooltip-inner { font-size: .9rem; padding: .5rem .7rem; max-width: 320px; }

/* ── Hormati preferensi sistem: kurangi animasi ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =====================================================================
   FASE 5 — POLA HALAMAN SERAGAM + KURANGI "KOTAK DALAM KOTAK"

   (2) Setiap halaman punya bentuk yang sama:
       breadcrumb → judul + subjudul → aksi utama di kanan → konten.
   (3) Hierarki dibentuk oleh JARAK & UKURAN, bukan tumpukan garis:
       kartu di dalam kartu kehilangan border/bayangan, tabel di dalam
       kartu tidak ber-border ganda, pemisah memakai garis lembut.
   ===================================================================== */

/* ── (2) Kepala halaman ────────────────────────────────────────────── */
.pal-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  color: var(--pal-faint);
  margin-bottom: 4px;
}
.pal-breadcrumb a { color: var(--pal-muted); text-decoration: none; }
.pal-breadcrumb a:hover { color: var(--pal-indigo-dark); text-decoration: underline; }
.pal-breadcrumb .sep { opacity: .55; }
.pal-breadcrumb .current { color: var(--pal-text); font-weight: 600; }

.pal-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 22px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pal-border-soft);
}
.pal-page-title {
  font-size: calc(1.75rem + var(--fs-naik, 1px));
  font-weight: 800;
  color: var(--pal-ink);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.pal-page-sub {
  font-size: calc(1rem + var(--fs-naik, 1px));
  color: var(--pal-muted);
  margin-top: 4px;
}
.pal-actions { gap: 8px; }

/* Halaman lama (belum dikonversi) ikut mendapat bentuk yang sama */
.pal-card-head .fa { color: var(--pal-indigo); }
.pal-card { margin-bottom: 22px; }
.pal-card-body { padding: 1.25rem; }

/* kartu / panel BERSARANG kehilangan bingkainya sendiri */
.pal-card .card,
.pal-card .pal-card,
.card .card,
.card .pal-card,
.pal-card-body > .card,
.pal-card-body > .border,
.modal-body .card {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0;
}
/* tabel di dalam kartu: tanpa border luar & sudut ikut kartu */
.pal-card > .table-responsive,
.card > .table-responsive { border: 0; }
.pal-card > .table-responsive > .table,
.card > .table-responsive > .table,
.pal-card > .table,
.card > .table {
  margin-bottom: 0;
  border: 0;
}
.pal-card > .table-responsive > .table td,
.card > .table-responsive > .table td { border-left: 0; border-right: 0; }
/* baris terakhir tidak perlu garis bawah — sudah ada tepi kartu */
.pal-card .table tbody tr:last-child td,
.card .table tbody tr:last-child td { border-bottom: 0; }

/* Catatan: dulu di sini ada aturan bersandar "main > .container".
   Portal tidak punya elemen <main> satu pun (rantainya
   body > .pal-shell > .pal-body > .container), jadi aturan itu tidak
   pernah berlaku dan dibuang 8 Sep 2026. Kalau kelak padding/tipografi
   itu memang diinginkan, tulis ulang dengan ".pal-body >" - tapi sadari
   itu perubahan tampilan yang terlihat, bukan sekadar rapi-rapi. */
/* ── Ruang bernapas ────────────────────────────────────────────────── */
.pal-card + .pal-card,
.card + .card { margin-top: 0; }
.stat-row, .pm-stat-row, .dash-grid { gap: 14px !important; margin-bottom: 22px !important; }

/* panel filter: lebih ringan, tanpa kotak tebal */
#searchForm .card,
#searchForm .card-body,
.pm-filter {
  background: var(--pal-bg-soft) !important;
  border: 1px solid var(--pal-border-soft) !important;
  border-radius: var(--pal-radius-lg);
  box-shadow: none !important;
}

/* pemisah dalam kartu memakai garis lembut, bukan garis tegas */
.pal-card hr, .card hr { border-top-color: var(--pal-border-soft); }
.border-bottom { border-bottom-color: var(--pal-border-soft) !important; }
.border-top { border-top-color: var(--pal-border-soft) !important; }

/* ── Kartu statistik: rata & konsisten antar modul ─────────────────── */
.stat-card, .pm-stat, .dash-card {
  border-radius: var(--pal-radius-lg) !important;
  border: 1px solid var(--pal-border) !important;
  box-shadow: var(--pal-shadow) !important;
  padding: 16px 18px !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
.stat-card:hover, .pm-stat:hover, .dash-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .10) !important;
}

/* =====================================================================
   FASE 6 — SKALA TIPOGRAFI · TABEL · UMPAN BALIK · IKON

   1. Tipografi: HANYA 5 tingkat ukuran. Ukuran inline lama (puluhan
      variasi) dipetakan otomatis ke tingkat terdekat, jadi seluruh
      halaman ikut patuh tanpa harus disunting satu per satu.
   2. Tabel: header menempel saat scroll, angka rata kanan monospace,
      kolom identitas menonjol, kerapatan Nyaman / Padat.
   3. Umpan balik halus: toast di pojok, skeleton saat memuat,
      transisi 150ms.
   4. Ikon garis Lucide (SVG sprite) menggantikan Font Awesome 4.
   ===================================================================== */

/* (Skala tipografi --fs-*, --pal-t, dan rona teal sudah menyatu ke
   blok token tunggal di kepala berkas.) */

/* ── 1. Skala tipografi ────────────────────────────────────────────── */
h1, .pal-page-title { font-size: var(--fs-xl); }
h2 { font-size: calc(1.5rem + var(--fs-naik, 1px)); }
h3, .pal-card-head, .card-header { font-size: var(--fs-lg); }
h4 { font-size: calc(1.1rem + var(--fs-naik, 1px)); }
h5, h6 { font-size: var(--fs-md); }
p, .pal-page-sub { font-size: var(--fs-md); }
small, .small, .pal-breadcrumb, .form-text { font-size: var(--fs-sm); }
.table, .table td, .table th { font-size: var(--fs-sm); }
.badge, .pal-pill, .pm-pill, .sfa-pill, .st-badge, .j-pill, .bp-pill,
.gb-pill, .cl-pill { font-size: var(--fs-xs); }
.btn { font-size: var(--fs-sm); }
.btn-sm, .btn-group-sm > .btn { font-size: var(--fs-xs); }

/* Petakan ukuran inline lama (10–24px / 0.6–1.4rem) ke tingkat terdekat.
   Template lama tidak perlu diubah tapi tampilannya jadi konsisten. */
[style*="font-size:10"], [style*="font-size: 10"],
[style*="font-size:11"], [style*="font-size: 11"],
[style*="font-size:12"], [style*="font-size: 12"],
[style*="font-size:0.6"], [style*="font-size: 0.6"],
[style*="font-size:0.7"], [style*="font-size: 0.7"],
[style*="font-size:.7"], [style*="font-size: .7"] { font-size: var(--fs-xs) !important; }

[style*="font-size:13"], [style*="font-size: 13"],
[style*="font-size:14"], [style*="font-size: 14"],
[style*="font-size:15"], [style*="font-size: 15"],
[style*="font-size:0.8"], [style*="font-size: 0.8"],
[style*="font-size:0.9"], [style*="font-size: 0.9"],
[style*="font-size:.8"], [style*="font-size: .8"],
[style*="font-size:.9"], [style*="font-size: .9"] { font-size: var(--fs-sm) !important; }

[style*="font-size:16"], [style*="font-size: 16"],
[style*="font-size:17"], [style*="font-size: 17"],
[style*="font-size:18"], [style*="font-size: 18"],
[style*="font-size:1.0"], [style*="font-size: 1.0"],
[style*="font-size:1.1"], [style*="font-size: 1.1"] { font-size: var(--fs-md) !important; }

[style*="font-size:20"], [style*="font-size: 20"],
[style*="font-size:21"], [style*="font-size: 21"],
[style*="font-size:22"], [style*="font-size: 22"],
[style*="font-size:24"], [style*="font-size: 24"],
[style*="font-size:1.2"], [style*="font-size: 1.2"],
[style*="font-size:1.3"], [style*="font-size: 1.3"],
[style*="font-size:1.4"], [style*="font-size: 1.4"] { font-size: var(--fs-lg) !important; }

/* angka besar di kartu statistik memang harus menonjol */
.s-value, .dc-value, .stat-card .value, .pm-stat .value,
.dash-card .value { font-size: var(--fs-xl) !important; }

/* ── 2. Tabel data ─────────────────────────────────────────────────── */
/* Wadah tabel jadi area gulir sendiri supaya header bisa menempel.
   Batas tinggi hanya berlaku untuk tabel panjang; tabel pendek utuh. */
.table-responsive {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
}
.table-responsive.pal-no-stick { max-height: none; overflow-y: visible; }
.modal .table-responsive { max-height: 60vh; }

/* header menempel saat scroll */
.table thead th,
.pm-table thead th, .sfa-table thead th, .bp-table thead th,
.jobs-table thead th, .line-table thead th, .gb-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--pal-bg-soft);
  box-shadow: inset 0 -1px 0 var(--pal-border);
}
/* tabel dua baris header (colspan) — baris kedua ikut menempel */
.table thead tr:nth-child(2) th { top: 34px; }

/* kolom identitas di kiri: jangan terpotong, sedikit lebih tegas */
.table tbody td:first-child,
.pm-table tbody td:first-child,
.sfa-table tbody td:first-child { white-space: nowrap; }
.table tbody td:first-child > a,
.pm-table tbody td:first-child > a { font-weight: 600; }

/* angka rata kanan + monospace tabular (lebar digit seragam) */
.table td.text-right, .table th.text-right,
.pm-table td.text-right, .sfa-table td.text-right,
.line-table td.text-right, .jobs-table td.text-right,
td.money, .money, .num {
  font-family: var(--pal-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.table th.text-right { font-family: var(--pal-font); }

/* kerapatan: Nyaman (bawaan) vs Padat */
html.pal-dense .table td, html.pal-dense .table th,
html.pal-dense .pm-table tbody td, html.pal-dense .pm-table thead th,
html.pal-dense .sfa-table tbody td, html.pal-dense .sfa-table thead th,
html.pal-dense .line-table tbody td, html.pal-dense .line-table thead th,
html.pal-dense .bp-table td, html.pal-dense .bp-table th {
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
  line-height: 1.35;
}
html.pal-dense .table, html.pal-dense .table td, html.pal-dense .table th,
html.pal-dense .pm-table, html.pal-dense .sfa-table { font-size: var(--fs-xs); }

.pal-density { display: inline-flex; align-items: center; gap: 5px; }
.pal-density > span { font-size: var(--fs-xs); color: var(--pal-faint); }
.pal-density button {
  border: 1px solid var(--pal-border);
  background: var(--pal-surface);
  color: var(--pal-muted);
  border-radius: 6px;
  padding: 3px 11px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  min-height: 30px;
}
.pal-density button:hover { border-color: var(--pal-indigo-border); color: var(--pal-indigo-dark); }
.pal-density button.active {
  background: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}

@media print {
  .table-responsive { max-height: none !important; overflow: visible !important; }
  .table thead th { position: static !important; }
  .pal-density, .pal-toast-wrap { display: none !important; }
}

/* ── 3. Toast di pojok (menggantikan tumpukan alert) ───────────────── */
.pal-toast-wrap {
  position: fixed;
  /* tepat di bawah navbar atas 56px (dulu 74px: topbar + navbar lama) */
  top: 66px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.pal-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--pal-surface);
  border: 1px solid var(--pal-border);
  border-left: 4px solid var(--pal-indigo);
  border-radius: var(--pal-radius-lg);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--pal-text);
  animation: palToastIn 220ms cubic-bezier(.2, .8, .3, 1);
}
.pal-toast.is-out { animation: palToastOut 180ms ease forwards; }
.pal-toast-icon { flex-shrink: 0; margin-top: 2px; font-size: calc(1.05rem + var(--fs-naik, 1px)); }
/* pesan berbaris banyak (mis. ringkasan impor) tetap terbaca */
.pal-toast-body { flex: 1; min-width: 0; overflow-wrap: break-word; white-space: pre-line; }
.pal-toast-close {
  background: none; border: 0; color: var(--pal-faint);
  font-size: calc(20px + var(--fs-naik, 1px)); line-height: 1; cursor: pointer; padding: 0 2px;
  min-height: auto;
}
.pal-toast-close:hover { color: var(--pal-text); }
.pal-toast.success { border-left-color: var(--pal-green-accent); }
.pal-toast.success .pal-toast-icon { color: var(--pal-green-accent); }
.pal-toast.danger, .pal-toast.error { border-left-color: var(--pal-red-accent); }
.pal-toast.danger .pal-toast-icon, .pal-toast.error .pal-toast-icon { color: var(--pal-red-accent); }
.pal-toast.warning { border-left-color: var(--pal-amber-accent); }
.pal-toast.warning .pal-toast-icon { color: var(--pal-amber-accent); }
.pal-toast.info { border-left-color: var(--pal-indigo); }
.pal-toast.info .pal-toast-icon { color: var(--pal-indigo); }
@keyframes palToastIn {
  from { opacity: 0; transform: translateX(26px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes palToastOut {
  to { opacity: 0; transform: translateX(26px) scale(.98); }
}

/* ── Skeleton saat memuat ──────────────────────────────────────────── */
.pal-skeleton {
  background: linear-gradient(90deg, var(--pal-bg-soft) 25%, var(--pal-bg-soft) 37%, var(--pal-bg-soft) 63%);
  background-size: 400% 100%;
  animation: palShimmer 1.2s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
  min-height: 1em;
}
.pal-skeleton-row { height: 14px; margin: 12px 0; }
.pal-skeleton-row.w-75 { width: 75%; }
.pal-skeleton-row.w-50 { width: 50%; }
.pal-skeleton-row.w-25 { width: 25%; }
@keyframes palShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── Transisi 150ms ────────────────────────────────────────────────── */
a, .btn, .card, .pal-card, .stat-card, .pm-stat, .dash-card,
.dropdown-item, .nav-link, .table tbody tr, .badge, .form-control,
.custom-select, .pal-density button, .close, .list-group-item {
  transition: background-color var(--pal-t) ease, color var(--pal-t) ease,
    border-color var(--pal-t) ease, box-shadow var(--pal-t) ease,
    transform var(--pal-t) ease;
}
.btn:active { transform: translateY(1px); }

/* ── 4. Ikon garis (Lucide, self-host) ─────────────────────────────── */
.pal-icon {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.17em;
  flex-shrink: 0;
}
.pal-icon-lg { width: 1.3em; height: 1.3em; }
.pal-icon-2x { width: 1.9em; height: 1.9em; }
.pal-icon-3x { width: 2.6em; height: 2.6em; }
.pal-icon-spin { animation: palSpin 1s linear infinite; transform-origin: 50% 50%; }
@keyframes palSpin { to { transform: rotate(360deg); } }
/* ikon di dalam tombol/heading mewarisi warna teks */
.btn .pal-icon, .pal-card-head .pal-icon, .nav-link .pal-icon,
.dropdown-item .pal-icon { color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .pal-skeleton, .pal-icon-spin, .pal-toast { animation: none !important; }
}

/* ── Pola halaman daftar (Fase 4) ─────────────────────────────────────
   Dipakai pertama oleh company/vendor_list.html. Semuanya generik:
   halaman daftar berikutnya cukup memakai kelas ini, jangan menyalin
   blok <style> per halaman lagi (dulu tiap list menulis ulang sendiri
   full-bleed + kartu statistik + chip dengan angka yang beda-beda).
   ------------------------------------------------------------------ */

/* Kartu KPI ber-badge — label, angka besar, badge status di kanan atas,
   lalu satu baris keterangan di bawah garis. Badge-nya BUKAN hiasan: ia
   memberi tahu komposisi angka di atasnya (berapa persen yang telat,
   berapa vendor bermasalah), sesuatu yang tidak muat di angka tunggal. */
.pal-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.pal-kpi {
  background: var(--pal-surface);
  border: 1px solid var(--pal-border);
  border-radius: var(--pal-radius-lg);
  box-shadow: var(--pal-shadow);
  padding: 14px 16px 0;
  display: flex;
  flex-direction: column;
  /* grid item: tanpa ini isi yang lebar ikut melebarkan kartunya di
     trak desktop yang minmax(232px, 1fr) */
  min-width: 0;
  transition: box-shadow 0.15s, border-color 0.15s;
}
a.pal-kpi:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.09);
  border-color: var(--pal-indigo-border);
  text-decoration: none;
}
/* Di ponsel, baris label + badge DITUMPUK (lihat blok @media di bawah).
   Tanpa itu keduanya terkunci di lebar min-content masing-masing:
   .pal-kpi-label tanpa min-width:0 berlantai pada kata terpanjangnya,
   dan .pal-badge sengaja flex-shrink:0 + white-space:nowrap supaya di
   dalam sel tabel tidak gepeng. Di ponsel, kartu KPI dua kolom hanya
   punya ±134px isi (viewport 360 − 30 padding container − 10 gap, dibagi
   dua, − 24 padding kartu − 2 border) sedangkan kartu terburuk
   ("BELUM DI-APPROVE" + "semua approved") butuh ±209px — selisih 75px
   itulah yang terlihat menembus tepi kartu. Kartunya sendiri tidak bisa
   melar karena traknya minmax(0, 1fr), yang justru meniadakan ukuran
   minimum otomatis grid item. Batasnya di sekitar 510px lebar layar;
   di atas itu semuanya muat, jadi bug ini hanya kelihatan di ponsel. */
.pal-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 10px;
  min-width: 0;
}
.pal-kpi-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pal-muted);
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pal-kpi-value {
  font-family: var(--pal-mono);
  font-variant-numeric: tabular-nums;
  font-size: calc(1.55rem + var(--fs-naik, 1px));
  font-weight: 800;
  color: var(--pal-ink);
  line-height: 1.25;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* satuan ("Rp" di depan, "jt" di belakang) sengaja kecil & pudar:
   yang harus terbaca duluan angkanya, bukan satuannya */
.pal-kpi-value .unit {
  font-family: var(--pal-font);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--pal-faint);
}
.pal-kpi-value .unit:first-child {
  margin-right: 3px;
}
.pal-kpi-value .unit:last-child {
  margin-left: 3px;
}
.pal-kpi-value.is-danger {
  color: var(--pal-red);
}
/* keterangan di bawah garis pemisah, menempel di dasar kartu supaya
   keempat kartu tetap rata walau panjang teksnya beda */
.pal-kpi-foot {
  margin-top: auto;
  padding: 8px 0 12px;
  border-top: 1px solid var(--pal-border-soft);
  font-size: var(--fs-xs);
  color: var(--pal-muted);
  line-height: 1.35;
}
.pal-kpi-foot strong {
  color: var(--pal-text);
  font-weight: 700;
}

/* Badge lunak — warna latar tipis + teks pekat, bukan blok warna penuh:
   di deretan kartu, badge pekat menarik mata lebih dulu daripada
   angkanya sendiri. */
.pal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.pal-badge .pal-icon,
.pal-badge .fa {
  font-size: 0.9em;
}
.pal-badge.is-green {
  background: var(--pal-green-soft);
  border-color: var(--pal-green-border);
  color: var(--pal-green);
}
.pal-badge.is-red {
  background: var(--pal-red-soft);
  border-color: var(--pal-red-border);
  color: var(--pal-red);
}
.pal-badge.is-amber {
  background: var(--pal-amber-soft);
  border-color: var(--pal-amber-border);
  color: var(--pal-amber);
}
.pal-badge.is-indigo {
  background: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}
.pal-badge.is-muted {
  background: var(--pal-bg-soft);
  border-color: var(--pal-border);
  color: var(--pal-muted);
}

/* Chip filter — pengganti dropdown untuk pilihan yang cuma 2-3 dan
   sering dipakai; satu klik, dan pilihan aktif terbaca sekilas. */
.pal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border: 1px solid var(--pal-border);
  border-radius: 999px;
  background: var(--pal-surface);
  color: var(--pal-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pal-chip:hover {
  background: var(--pal-bg-soft);
  color: var(--pal-text);
  text-decoration: none;
}
.pal-chip.active {
  background: var(--pal-fill);
  border-color: var(--pal-fill);
  color: var(--pal-on-accent);
}

/* Bar proporsi di kolom angka — panjangnya relatif terhadap nilai
   terbesar di halaman, jadi mata langsung tahu mana yang besar tanpa
   membaca digitnya satu per satu. */
.pal-bar {
  display: block;
  height: 3px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--pal-border-soft);
}
.pal-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--pal-indigo);
  opacity: 0.5;
}
.pal-bar.is-late > span {
  background: var(--pal-red);
  opacity: 0.45;
}

/* Saklar on/off — pengganti ikon lingkaran yang tidak kelihatan bisa
   diklik. Nilainya di aria-checked supaya pembaca layar ikut tahu. */
.pal-switch {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--pal-border);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s;
}
.pal-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--pal-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.pal-switch[aria-checked="true"] {
  background: var(--pal-green-accent);
}
.pal-switch[aria-checked="true"]::after {
  transform: translateX(15px);
}
.pal-switch:disabled {
  opacity: 0.5;
  cursor: default;
}
.pal-switch:focus-visible {
  outline: 2px solid var(--pal-indigo);
  outline-offset: 2px;
}

/* Baris kedua di dalam sel (alamat, keterangan telat) */
.pal-sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--pal-faint);
  line-height: 1.3;
  margin-top: 1px;
}
.pal-sub.is-late {
  color: var(--pal-red);
  font-weight: 600;
}
/* alamat panjang dipotong satu baris supaya tinggi baris tetap rata */
.pal-truncate {
  display: block;
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kaki tabel: jumlah baris di kiri, navigasi halaman di kanan */
.pal-tablefoot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--pal-border);
  background: var(--pal-bg-soft);
  font-size: var(--fs-xs);
  color: var(--pal-muted);
}
.pal-tablefoot .pagination {
  margin: 0;
}

/* Tabel jadi daftar kartu di layar kecil — 8 kolom di ponsel hanya
   menghasilkan gulir menyamping. Butuh data-label di tiap <td>. */
@media (max-width: 767.98px) {
  /* Tabel, tbody, DAN baris harus jadi blok. Kalau hanya <tr> yang diubah,
     elemen <table> tetap memakai tata letak tabel dan kotaknya menyusut
     seukuran isi — kartunya jadi separuh lebar layar dengan ruang kosong
     di kanan. table-layout:fixed + width:100% memaksa lebar penuh. */
  .pal-resp,
  .pal-resp > tbody {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .pal-resp thead,
  .pal-resp tfoot {
    /* total per perusahaan sudah tampil di kepala kartu; baris tfoot
       ber-colspan hanya jadi deretan sel kosong dalam mode kartu */
    display: none;
  }
  /* kolom flex, bukan block, supaya sel identitas bisa dinaikkan ke atas
     kartu lewat order — di layar kecil nomor dokumen harus terbaca lebih
     dulu, bukan muncul di baris keempat */
  .pal-resp tbody tr {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--pal-border);
    border-radius: var(--pal-radius);
    padding: 8px 12px;
    margin-bottom: 8px;
  }
  /* di ponsel, gulir halaman lebih wajar daripada area gulir di dalam
     kartu; tinggi maksimum untuk header menempel tidak ada gunanya di
     layar sependek ini */
  .table-responsive {
    max-height: none;
    overflow-y: visible;
  }
  .pal-resp tbody td {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border: 0 !important;
    padding: 2px 0 !important;
    text-align: right;
  }
  /* nilai panjang (nama vendor, alamat) boleh turun baris, jangan
     mendorong kartu jadi lebih lebar dari layar */
  .pal-resp tbody td > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .pal-resp tbody td::before {
    content: attr(data-label);
    color: var(--pal-faint);
    font-size: var(--fs-xs);
    text-align: left;
    flex: 0 0 auto;
  }
  .pal-resp tbody td.pal-resp-main {
    display: block;
    order: -1;
    text-align: left;
    padding-bottom: 6px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--pal-border-soft) !important;
    font-size: var(--fs-md);
  }
  .pal-resp tbody td.pal-resp-main::before {
    display: none;
  }
  .pal-resp tbody td.pal-resp-hide {
    display: none;
  }
  .pal-resp .pal-truncate {
    max-width: none;
    white-space: normal;
  }
  .pal-resp .pal-bar {
    display: none;
  }
  .pal-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pal-kpi {
    padding: 11px 12px 0;
  }
  /* Di kartu selebar ±134px, menaruh label dan badge sebaris selalu
     berakhir sempit. Ditumpuk saja: keduanya dapat lebar penuh kartu.
     Ditumpuk, bukan dibungkus dengan flex-wrap: flex-wrap di aturan dasar
     ikut berlaku di desktop — badge kartu ke-2 dan ke-4 turun ke baris
     kedua dan menempel ke kiri, padahal tempatnya kanan atas — sementara
     di ponsel ia tidak berperan sama sekali, karena kontainer flex arah
     kolom tanpa tinggi tetap tidak pernah memenggal baris. */
  .pal-kpi-top {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Menumpuk saja belum cukup: badge terpanjang (±138px) masih lebih lebar
     daripada isi kartunya (±134px), jadi teksnya harus boleh turun baris.
     Dibatasi ke dalam kartu KPI: badge di sel tabel tetap utuh, dan di
     desktop tidak ada yang berubah sama sekali. */
  .pal-kpi-top .pal-badge {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }
  /* FontAwesome mematok line-height:1 lewat shorthand `font:`, jadi kotak
     ikonnya cuma 11,7px sementara satu baris teks 19,5px. Begitu teks
     badge turun baris, align-items:center milik .pal-badge menengahkan
     ikon terhadap blok DUA baris — centangnya melayang di sela
     antar-baris. Disamakan dengan tinggi satu baris lalu dikunci ke atas. */
  .pal-kpi-top .pal-badge .fa {
    align-self: flex-start;
    line-height: 1.5;
  }
  .pal-kpi-value {
    font-size: calc(1.2rem + var(--fs-naik, 1px));
  }
}


/* =====================================================================
   KEPALA BAGIAN DOKUMEN — .pal-bagian-judul
   ---------------------------------------------------------------------
   Untuk halaman yang meniru tata letak sebuah dokumen resmi (mis. bukti
   potong BPPU dengan bagian A/B/C). Sebelumnya kepala bagian memakai
   resep label netral yang sama persis dengan header tabel: --fs-xs,
   huruf besar semua, abu-abu. Di halaman yang isinya berderet-deret
   baris "kode · label · nilai", resep itu larut — batas antar-bagian
   tidak kelihatan sama sekali.

   Yang dipakai di sini tetap idiom rona lunak milik tema (latar <soft>,
   teks <ink>), TETAPI ditambah dua hal yang sengaja tidak dimiliki oleh
   state hover/active mana pun: garis aksen 4px di kiri dan kotak huruf
   berisi warna pekat. Itu penting karena --pal-indigo-soft di tema ini
   merangkap sebagai warna hover hampir semua permukaan; tanpa dua penanda
   tadi, kepala bagian berona indigo akan terbaca seolah "sedang disorot".

   Garis aksen juga satu-satunya bagian yang ikut tercetak: kedua blok
   @media print tidak menyetel print-color-adjust, jadi latar apa pun
   hilang saat dicetak — border tidak.
   ===================================================================== */
.pal-bagian-judul {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-left: 4px solid var(--pal-border);
  border-bottom: 1px solid var(--pal-border-soft);
  background: var(--pal-bg-soft);
  color: var(--pal-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
/* kotak huruf bagian (A / B / C) — satu-satunya blok warna pekat */
.pal-bagian-huruf {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--pal-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pal-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--pal-on-accent);
  background: var(--pal-faint);
}
.pal-bagian-judul.is-indigo {
  border-left-color: var(--pal-indigo);
  background: var(--pal-indigo-soft);
  color: var(--pal-indigo-ink);
}
.pal-bagian-judul.is-indigo .pal-bagian-huruf { background: var(--pal-indigo); }
.pal-bagian-judul.is-amber {
  border-left-color: var(--pal-amber);
  background: var(--pal-amber-soft);
  color: var(--pal-amber);
}
.pal-bagian-judul.is-amber .pal-bagian-huruf { background: var(--pal-amber); }
.pal-bagian-judul.is-teal {
  border-left-color: var(--pal-teal);
  background: var(--pal-teal-soft);
  color: var(--pal-teal-ink);
}
.pal-bagian-judul.is-teal .pal-bagian-huruf { background: var(--pal-teal); }

/* =====================================================================
   MODAL YANG BISA DIGESER — .modal[data-geser]
   ---------------------------------------------------------------------
   Perilakunya di palapa-ui.js. Di sini hanya tampilannya.

   Penggeseran memakai transform pada .modal-dialog, bukan left/top,
   karena modal di proyek ini memakai .modal-dialog-centered yang menaruh
   dialog lewat flexbox — left/top akan berkelahi dengan pemusatannya.

   Transisi transform milik Bootstrap (animasi fade) harus dimatikan saat
   sedang digeser, kalau tidak kursor akan "ditinggal" dialognya.
   ===================================================================== */
.modal[data-geser] .modal-header {
  cursor: move;
  /* teks judul tidak ikut terblok saat digeser */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  /* di layar sentuh: jangan diartikan sebagai gulir halaman */
  touch-action: none;
}
/* tombol tutup tetap kursor biasa — menegaskan ia bukan pegangan geser */
.modal[data-geser] .modal-header .close { cursor: pointer; touch-action: auto; }
.modal[data-geser].pal-sedang-geser .modal-dialog {
  transition: none !important;
}
.modal[data-geser].pal-sedang-geser .modal-header { cursor: grabbing; }
/* bayangan sedikit lebih tegas saat lepas dari posisi tengahnya, supaya
   jelas dialognya "mengambang" di atas halaman */
.modal[data-geser].pal-sudah-digeser .modal-content {
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.26);
}
/* petunjuk kecil di kepala modal; disembunyikan di layar sempit karena
   di sana modal memenuhi layar dan menggesernya tidak ada gunanya */
.pal-geser-petunjuk {
  font-size: var(--fs-xs);
  font-weight: 400;
  opacity: 0.72;
  margin-left: 10px;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .pal-geser-petunjuk { display: none; }
  /* di layar sentuh sempit, kembalikan gulir normal */
  .modal[data-geser] .modal-header { cursor: default; touch-action: auto; }
}

/* =====================================================================
   KOMPONEN BERSAMA (frontend tahap 4) — pola yang dulu disalin-tempel
   antar halaman sebagai <style> lokal, diangkat ke sini SEKALI.
   ===================================================================== */

/* ── Kartu statistik (.pal-stat) ──────────────────────────────────────
   Dulu hidup sebagai pm-stat / so-stat / dst. di tiap halaman list.
   Bentuk: baris kartu fleksibel, tiap kartu tautan ber-garis kiri warna
   status, label kecil kapital + angka besar tabular. */
.pal-stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.pal-stat {
  flex: 1; min-width: 200px; background: var(--pal-surface);
  border: 1px solid var(--pal-border); border-radius: var(--pal-radius-lg);
  padding: 14px 18px; box-shadow: var(--pal-shadow);
  text-decoration: none; display: block;
  transition: box-shadow var(--pal-t, 150ms);
  border-left-width: 4px;
}
/* hover hanya kartu yang tautan — kartu angka polos jangan pura-pura
   bisa diklik */
a.pal-stat:hover { box-shadow: var(--pal-shadow-lg); text-decoration: none; }
.pal-stat .s-label {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .6px; color: var(--pal-faint);
}
.pal-stat .s-value {
  font-size: 24px; font-weight: 700; color: var(--pal-ink);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.pal-stat.red    { border-left-color: var(--pal-red-accent); } .pal-stat.red .s-value    { color: var(--pal-red); }
.pal-stat.amber  { border-left-color: var(--pal-amber-accent); } .pal-stat.amber .s-value  { color: var(--pal-amber); }
.pal-stat.indigo { border-left-color: var(--pal-indigo); } .pal-stat.indigo .s-value { color: var(--pal-indigo-ink); }
.pal-stat.green  { border-left-color: var(--pal-green-accent); } .pal-stat.green .s-value  { color: var(--pal-green); }
.pal-stat.slate  { border-left-color: var(--pal-faint); } .pal-stat.slate .s-value  { color: var(--pal-text); }
.pal-stat.teal   { border-left-color: var(--pal-teal); } .pal-stat.teal .s-value { color: var(--pal-teal-ink); }

/* ── Spanduk insight (.pal-insight) ───────────────────────────────────
   Pengingat kontekstual di atas daftar (mis. FP masa M-2 belum lengkap):
   warn = amber, bad = merah. */
.pal-insight {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border-radius: var(--pal-radius-lg); margin-bottom: 16px;
}
.pal-insight.warn { background: var(--pal-amber-soft); border: 1px solid var(--pal-amber-border); }
.pal-insight.bad  { background: var(--pal-red-soft);   border: 1px solid var(--pal-red-border); }
.pal-insight .pi-icon { font-size: 24px; flex-shrink: 0; }
.pal-insight.warn .pi-icon { color: var(--pal-amber); }
.pal-insight.bad  .pi-icon { color: var(--pal-red); }
.pal-insight .pi-body { flex: 1; min-width: 0; }
.pal-insight .pi-title { font-weight: 700; font-size: 15.5px; }
.pal-insight.warn .pi-title { color: var(--pal-amber); }
.pal-insight.bad  .pi-title { color: var(--pal-red); }
.pal-insight .pi-text { font-size: 14px; color: var(--pal-amber); margin-top: 1px; }
.pal-insight.bad .pi-text { color: var(--pal-red); }

/* ── Matriks kelengkapan per masa (.bp-matrix / .bp-legend) ───────────
   Dipakai daftar Bukti Potong dan Pajak Masukan (dulu CSS-nya disalin
   antar keduanya). table-layout:fixed supaya 12 kolom bulan sama lebar;
   sel memakai token status tema supaya sewarna badge portal. */
.bp-matrix { table-layout: fixed; width: 100%; font-size: var(--fs-xs); }
.bp-matrix th, .bp-matrix td { padding: 4px 2px !important; white-space: nowrap; }
.bp-matrix thead th { background: var(--pal-bg-soft); color: var(--pal-muted); font-weight: 600; }
.bp-matrix .kolom-company {
  width: 20%; max-width: 0; /* izinkan ellipsis pada table-layout:fixed */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 8px !important;
}
.bp-matrix .kolom-total { width: 7%; background: var(--pal-bg-soft); }
.bp-matrix tbody td { font-variant-numeric: tabular-nums; }
.bp-matrix .sel-lengkap  { background: var(--pal-green-soft); color: var(--pal-green); font-weight: 700; }
.bp-matrix .sel-sebagian { background: var(--pal-amber-soft); color: var(--pal-amber); font-weight: 700; }
.bp-matrix .sel-kosong   { background: var(--pal-red-soft);   color: var(--pal-red); }
/* bulan belum tiba / masa berjalan: netral, bukan merah */
.bp-matrix .sel-nanti,
.bp-matrix .sel-berjalan { background: repeating-linear-gradient(
    45deg, var(--pal-surface), var(--pal-surface) 4px, var(--pal-bg-soft) 4px, var(--pal-bg-soft) 8px);
  color: var(--pal-faint); }
.bp-matrix .sel-berjalan { box-shadow: inset 0 -2px 0 var(--pal-indigo-border); }
/* data di masa yang belum tiba = hampir pasti salah ketik masa — tonjolkan */
.bp-matrix .sel-anomali { background: var(--pal-amber-soft); color: var(--pal-amber);
  font-weight: 700; outline: 2px dashed var(--pal-amber-border); outline-offset: -2px; }
.bp-matrix tr.baris-nihil td { background: var(--pal-surface) !important; color: var(--pal-faint) !important;
  font-weight: 400 !important; }
.bp-matrix tr.baris-nihil .kolom-company { font-style: italic; }
.bp-legend { display: flex; flex-wrap: wrap; gap: 10px;
  font-size: var(--fs-xs); color: var(--pal-muted); }
.bp-legend .kotak { display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 3px; vertical-align: -1px;
  border: 1px solid var(--pal-border); }
.bp-legend .kotak.lengkap  { background: var(--pal-green-soft); border-color: var(--pal-green-border); }
.bp-legend .kotak.sebagian { background: var(--pal-amber-soft); border-color: var(--pal-amber-border); }
.bp-legend .kotak.kosong   { background: var(--pal-red-soft);   border-color: var(--pal-red-border); }
.bp-legend .kotak.nanti    { background: var(--pal-bg-soft); }
@media (max-width: 767.98px) {
  .bp-matrix { table-layout: auto; }
  .bp-matrix .kolom-company { position: sticky; left: 0; z-index: 1;
    background: var(--pal-surface); max-width: 110px; width: auto; }
  /* header Company di atas header bulan yang juga sticky */
  .bp-matrix thead th.kolom-company { z-index: 4; background: var(--pal-bg-soft); }
}

/* ── Penyelarasan Select2 (self-host) ─────────────────────────────────
   Media django-autocomplete-light menunjuk berkas yang tidak ada di
   static kita, jadi Select2 dimuat manual per halaman; aturan tinggi/
   lebar ini dulu ikut disalin per halaman. Berlaku global — halaman
   tanpa Select2 tidak terpengaruh. */
.select2-container { width: 100% !important; max-width: 100%; }
.select2-container--default .select2-selection--single {
  height: calc(1.5em + .75rem + 2px); display: flex; align-items: center;
  border: 1px solid var(--pal-border); border-radius: var(--pal-radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal; padding-left: 0; padding-right: 18px; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }

/* ── Hormati preferensi "kurangi gerakan" (a11y) ──────────────────────
   Pengguna yang menyalakan reduce-motion di OS-nya (vestibular,
   sensitif gerakan) mendapat portal tanpa animasi/transisi: toast,
   skeleton, chevron, hover — semuanya langsung ke keadaan akhir. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 992px) {
  /* panel lebar tidak butuh jembatan hover ::before setinggi menu
     sempit; warisan aturan lama tetap aman karena top:-10px saja */
}

/* pencarian menu: kotak terang di atas navbar terang */
.pal-nav-search-input {
  background: var(--pal-bg-soft);
  border: 1px solid var(--pal-border);
  color: var(--pal-text);
}
.pal-nav-search-input::placeholder { color: var(--pal-faint); }
.pal-nav-search-input:focus {
  background: var(--pal-surface);
  border-color: var(--pal-indigo-border);
  box-shadow: var(--pal-focus);
}

.pal-footer { background: var(--pal-surface); }

/* ── Pembungkus konten lebar penuh (.pal-lebar) ───────────────────────
   Pengganti resmi hack width:100vw + translateX(-50%). 100vw mengukur
   lebar LAYAR: begitu ada sidebar (atau sekadar scrollbar), halaman
   meluber dan memunculkan gulir mendatar. Kelas ini mengambil lebar
   INDUKNYA, jadi tetap benar di layout mana pun.
   Dipakai lewat {% block lebar %}pal-lebar{% endblock %} di layout. */
.pal-lebar {
  width: 100%;
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/* Pembungkus dalam yang jadi anak langsung .pal-lebar tidak boleh
   menambah padding lagi. Banyak halaman daftar membungkus isinya sekali
   lagi dengan "container-fluid px-4"; .pal-lebar sudah memberi 34px di
   layar lebar, lalu px-4 Bootstrap menambah 24px per sisi - dan karena
   utility Bootstrap memakai !important, satu-satunya cara menawarnya
   juga !important. Yang hilang tanpa alasan: 116px lebar tabel.

   Hanya ANAK LANGSUNG: container-fluid bersarang di dalam isi halaman
   (kartu, panel) tetap memakai paddingnya sendiri. */
.pal-lebar > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (min-width: 1200px) {
  .pal-lebar { padding-left: 34px; padding-right: 34px; }
}
@media (max-width: 575.98px) {
  .pal-lebar { padding-left: 12px; padding-right: 12px; }
}

/* =====================================================================
   RANGKA SIDEBAR — topnav tetap + sidebar kiri + area kerja

   Menggantikan navbar mega di atas. Tiga keadaan:
     bentang  html tanpa .pal-rail   sidebar 280px, label tampil
     rail     html.pal-rail          64px, hanya ikon + flyout label
     drawer   < 992px                melayang di atas konten + scrim

   Keadaan lipat dipasang di <html> oleh skrip kepala SEBELUM render
   (pola yang sama dengan kerapatan tabel) supaya tidak berkedip.
   .pal-js menandai JavaScript hidup: TANPA itu seluruh grup dirender
   terbuka dan menu tetap terpakai penuh.
   ===================================================================== */
/* (Ukuran rangka --pal-topnav-h / --pal-side-w / --pal-rail-w ada di
   blok token tunggal di kepala berkas.) */

/* ── Navbar atas ─────────────────────────────────────────────────── */
.pal-topnav {
  position: sticky; top: 0; z-index: 1035;
  display: flex; align-items: center; gap: 10px;
  height: var(--pal-topnav-h); padding: 0 12px;
  background: var(--pal-surface); border-bottom: 1px solid var(--pal-border);
}
/* Saklar tema di navbar — sengaja sebentuk dengan .pal-burger di ujung
   seberang bilah: kotak membulat, tanpa isian, hanya menyala saat
   disentuh. Dua tombol ikon di satu bilah yang bentuknya berbeda
   terbaca sebagai dua jenis kontrol yang berbeda. */
.pal-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  border: 0;
  border-radius: var(--pal-radius);
  background: none;
  color: var(--pal-muted);
  font-size: calc(15px + var(--fs-naik, 1px));
  line-height: 1;
  cursor: pointer;
  transition: background var(--pal-t) ease, color var(--pal-t) ease;
}
.pal-tema:hover { background: var(--pal-bg-soft); color: var(--pal-ink); }
.pal-tema:focus-visible { box-shadow: var(--pal-focus); outline: none; }

.pal-burger {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: var(--pal-radius);
  background: none; color: var(--pal-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pal-burger:hover { background: var(--pal-bg-soft); color: var(--pal-ink); }
.pal-topnav .pal-brand {
  display: flex; align-items: center; gap: 8px; flex: none;
  color: var(--pal-ink); font-weight: 800; letter-spacing: .3px;
  font-size: calc(15px + var(--fs-naik, 1px));
}
.pal-topnav .pal-brand:hover { color: var(--pal-ink); text-decoration: none; }
.pal-topnav .pal-brand-logo { height: 28px; width: auto; }
.pal-topnav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* chip kode cabang — dulu tinggal di topbar gelap, kini di navbar terang */
.pal-topbar-branch {
  display: inline-block; border-radius: 10px; padding: 1px 8px;
  background: var(--pal-indigo-soft); border: 1px solid var(--pal-indigo-border);
  color: var(--pal-indigo-ink); font-family: var(--pal-mono);
  font-size: var(--fs-xs); letter-spacing: .3px;
}
.pal-akun { display: inline-flex; align-items: center; padding: 2px; }
.pal-akun::after { color: var(--pal-faint); }
.pal-topnav .pal-avatar { margin-right: 0; border: 0; }
.pal-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--pal-faint); font-size: 13px; pointer-events: none;
}
.pal-topnav .pal-nav-search-item { flex: 1 1 auto; max-width: 420px; margin: 0 0 0 6px; }
.pal-topnav .pal-nav-search-input { width: 100%; padding-left: 30px; }
.pal-topnav .pal-nav-search-input:focus { width: 100%; }

/* ── Rangka ──────────────────────────────────────────────────────── */
.pal-shell { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }
.pal-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.pal-side {
  flex: 0 0 var(--pal-side-w); width: var(--pal-side-w);
  align-self: flex-start;
  position: sticky; top: var(--pal-topnav-h);
  height: calc(100vh - var(--pal-topnav-h));
  overflow-y: auto; overflow-x: hidden;
  background: var(--pal-surface); border-right: 1px solid var(--pal-border);
  padding: 8px 0 20px; scrollbar-width: thin;
  transition: flex-basis .18s ease, width .18s ease;
}
html.pal-rail .pal-side { flex-basis: var(--pal-rail-w); width: var(--pal-rail-w); }

.pal-side-sec {
  padding: 15px 16px 5px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pal-faint);
}
/* Kepala sub-bagian di dalam grup. Diberi garis halus di bawahnya
   supaya batas antar-bagian terbaca tanpa perlu jarak besar, dan
   isinya dibungkus .pal-grp-panel supaya menjorok satu tingkat lagi —
   sejajar dengan isi sub-grup yang bisa dilipat, jadi kedua bentuk
   itu terbaca sebagai kedalaman yang sama. Garisnya sengaja dimulai
   dari batas teks (bukan dari tepi sidebar) supaya sejajar dengan
   item di bawahnya. */
.pal-grp-cap {
  margin: 10px 14px 4px 45px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--pal-border-soft);
  white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pal-faint);
}

.pal-navlink, .pal-grp-btn {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 44px;                       /* target sentuh 44px */
  padding: 9px 14px; margin: 0; border: 0; background: none;
  font-family: var(--pal-font); font-size: var(--fs-sm); font-weight: 600;
  color: var(--pal-muted); text-align: left; cursor: pointer; position: relative;
}
.pal-navlink:hover, .pal-grp-btn:hover {
  background: var(--pal-bg-soft); color: var(--pal-ink); text-decoration: none;
}
.pal-navlink:focus-visible, .pal-grp-btn:focus-visible {
  outline: none; box-shadow: var(--pal-focus); border-radius: var(--pal-radius); z-index: 2;
}
.pal-side .pal-ico { flex: none; width: 20px; text-align: center; font-size: 16px; }
.pal-side .pal-lbl { flex: 1 1 auto; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pal-chev { flex: none; color: var(--pal-faint); font-size: 14px;
  transition: transform .16s ease; }
.pal-grp-btn[aria-expanded="true"] { color: var(--pal-ink); }
.pal-grp-btn[aria-expanded="true"] .pal-chev { transform: rotate(90deg); }

/* item di dalam grup: menjorok, dengan garis jenjang */
.pal-grp-panel .pal-navlink {
  padding-left: 45px; font-weight: 500; min-height: 38px;
  font-size: calc(14px + var(--fs-naik, 1px));
}
.pal-grp-panel .pal-navlink::after {
  content: ""; position: absolute; left: 26px; top: 0; bottom: 0;
  width: 1px; background: var(--pal-border-soft);
}
/* jenjang kedua */
.pal-grp-2 > .pal-grp-btn { padding-left: 45px; min-height: 38px;
  font-size: calc(14px + var(--fs-naik, 1px)); color: var(--pal-faint); }
/* Panel di dalam panel — dua bentuk sekaligus: isi sub-grup yang bisa
   dilipat, DAN isi kepala bagian (.pal-grp-cap). Keduanya sengaja
   sedalam yang sama. */
.pal-grp-panel .pal-grp-panel .pal-navlink { padding-left: 62px; }
.pal-grp-panel .pal-grp-panel .pal-navlink::after { left: 45px; }

/* halaman yang sedang dibuka: garis aksen kiri (bahasa D365) */
.pal-navlink.is-active { color: var(--pal-indigo-ink); background: var(--pal-indigo-soft); }
.pal-navlink.is-active::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--pal-indigo);
}
/* entri yang dimatikan feature flag: bukan tautan, jadi bukan pointer */
.pal-navlink.is-disabled { color: var(--pal-faint); cursor: not-allowed; }

/* ── Lipat/bentang grup: hanya berlaku saat JavaScript hidup ─────── */
/* "> .pal-grp-panel" WAJIB pakai anak langsung: panel pembungkus isi
   .pal-grp-cap juga memakai kelas ini tetapi BUKAN anak .pal-grp —
   dengan pemilih longgar ia ikut tersembunyi dan bagian itu lenyap. */
html.pal-js .pal-grp > .pal-grp-panel { display: none; }
html.pal-js .pal-grp[data-open="true"] > .pal-grp-panel { display: block; }

/* ── Mode rail: ikon saja, label jadi flyout ─────────────────────── */
html.pal-rail .pal-side-sec { height: 12px; padding: 8px 0 0; visibility: hidden; }
html.pal-rail .pal-grp-cap,
html.pal-rail .pal-lbl,
html.pal-rail .pal-chev,
html.pal-rail .pal-grp-panel { display: none !important; }
html.pal-rail .pal-navlink,
html.pal-rail .pal-grp-btn { justify-content: center; padding: 9px 0; }
html.pal-rail [data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%); z-index: 1050;
  background: var(--pal-fill); color: var(--pal-on-accent); white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; padding: 5px 10px;
  border-radius: 6px; box-shadow: var(--pal-shadow-lg);
}

/* ── Ponsel & tablet: sidebar jadi drawer ────────────────────────── */
.pal-scrim { display: none; }
@media (max-width: 991.98px) {
  .pal-side {
    position: fixed; top: var(--pal-topnav-h); left: 0; bottom: 0;
    height: auto; z-index: 1040; box-shadow: var(--pal-shadow-lg);
    transform: translateX(-102%); transition: transform .22s ease;
  }
  /* rail tidak berlaku di layar sempit — drawer selalu lebar penuh */
  html.pal-rail .pal-side { flex-basis: var(--pal-side-w); width: var(--pal-side-w); }
  html.pal-rail .pal-lbl, html.pal-rail .pal-chev,
  html.pal-rail .pal-grp-cap { display: initial !important; }
  html.pal-rail .pal-grp[data-open="true"] > .pal-grp-panel { display: block !important; }
  html.pal-rail .pal-navlink, html.pal-rail .pal-grp-btn {
    justify-content: flex-start; padding: 9px 14px; }
  html.pal-rail .pal-grp-panel .pal-navlink { padding-left: 45px; }
  html.pal-rail .pal-side-sec { height: auto; padding: 15px 16px 5px; visibility: visible; }
  .pal-shell[data-drawer="open"] .pal-side { transform: none; }
  .pal-scrim {
    display: block; position: fixed; inset: var(--pal-topnav-h) 0 0 0;
    background: rgba(15, 23, 42, .42); z-index: 1039;
  }
  .pal-topnav .pal-brand-nama { display: none; }
  .pal-topnav .pal-nav-search-item { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pal-side { transition: none; }
}

/* =====================================================================
   JEMBATAN "PRIMARY" BOOTSTRAP → INDIGO PORTAL

   Bootstrap 4 membawa biru #007bff di 43 selector. Tema ini sejak awal
   hanya menimpa yang paling kentara (.btn-primary, .btn-outline-primary,
   a, .page-link), sehingga SISANYA tetap biru dan tampil berdampingan
   dengan chrome indigo: teks .text-primary (17 template), lencana
   .badge-primary (10), dan — yang paling terasa — switch/checkbox
   .custom-control yang menyala biru di tengah form berwarna indigo.

   Daftar di bawah diambil dengan menelusuri berkas Bootstrap-nya,
   bukan dikira-kira: persis sisa yang belum tertutup.
   ===================================================================== */
.text-primary { color: var(--pal-indigo-dark) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--pal-indigo-ink) !important; }
.bg-primary { background-color: var(--pal-indigo) !important; }
a.bg-primary:hover, a.bg-primary:focus { background-color: var(--pal-indigo-hover) !important; }
.border-primary { border-color: var(--pal-indigo) !important; }

.badge-primary { background-color: var(--pal-indigo); color: var(--pal-on-accent); }
a.badge-primary:hover, a.badge-primary:focus { background-color: var(--pal-indigo-hover); }

.btn-link { color: var(--pal-indigo-dark); }
.btn-link:hover { color: var(--pal-indigo-ink); }

/* Switch & checkbox: bentuk paling sering terlihat, dan satu-satunya
   yang menyala penuh warna di tengah form. */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--pal-indigo);
  border-color: var(--pal-indigo);
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  background-color: var(--pal-indigo);
  border-color: var(--pal-indigo);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--pal-focus); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--pal-indigo-border);
}
/* kotak centang & radio bawaan peramban (bukan .custom-control) */
input[type="checkbox"], input[type="radio"], .form-check-input {
  accent-color: var(--pal-indigo);
}

.custom-range::-webkit-slider-thumb { background-color: var(--pal-indigo); }
.custom-range::-moz-range-thumb { background-color: var(--pal-indigo); }
.custom-range::-ms-thumb { background-color: var(--pal-indigo); }

/* Item terpilih: rona lunak, bukan blok pekat — sejalan dengan bahasa
   D365 yang dipakai seluruh portal (penonjolan lewat rona lembut dan
   garis, bukan bidang warna penuh). */
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--pal-indigo-soft);
  color: var(--pal-indigo-ink);
}
.list-group-item.active {
  background-color: var(--pal-indigo);
  border-color: var(--pal-indigo);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--pal-indigo);
}
.progress-bar { background-color: var(--pal-indigo); }