/* ============================================================================
 * kontrak.css — pelengkap AppStack untuk SIPK
 * ============================================================================
 *
 * SEBELUMNYA berkas ini adalah JEMBATAN MIGRASI Tabler → AppStack: core
 * aplikasi di-clone dari ../aplikasi yang memakai Tabler, dan segelintir kelas
 * khas Tabler perlu didefinisikan ulang di sini supaya halaman warisan tidak
 * rusak.
 *
 * JEMBATAN ITU SUDAH DIBONGKAR (2026-09-01). Seluruh halaman kini memakai
 * komponen AppStack dan Bootstrap 5.3 asli, dan empat kelas yang dulu dicatat
 * sebagai utang sudah lunas:
 *
 *   .page-header / .page-title  DIHAPUS — tidak ada lagi yang memakainya;
 *                               judul halaman kini ada di topbar (index.volt)
 *   .card-actions               DIHAPUS — diganti `ms-auto d-flex gap-2`
 *   .empty*                     DIGANTI NAMA jadi .kosong*
 *
 * Dua di antaranya BERTABRAKAN NAMA dengan kelas milik AppStack yang artinya
 * berbeda, dan karena kontrak.css dimuat sesudah app.css, definisi di sinilah
 * yang menang — bug diam yang kini tidak mungkin terjadi lagi:
 *
 *   .card-actions  di AppStack = wadah ikon kecil di kepala kartu
 *   .empty         di AppStack = {margin:1px}, milik salah satu plugin
 *
 * Yang tersisa di berkas ini BUKAN lagi jembatan, melainkan dua hal:
 *
 *   1. UTILITAS KECIL yang tidak dipunyai AppStack maupun Bootstrap
 *      (.subheader, .card-table, .w-1, .kosong*)
 *   2. KOMPONEN MILIK APLIKASI INI SENDIRI — chip tahun anggaran, pita alur
 *      lima langkah, kartu rantai anggaran, daftar label/nilai
 *
 * ---------------------------------------------------------------------------
 * ATURAN PEMILIHAN KELAS (ditetapkan 2026-08-31, tetap berlaku)
 * ---------------------------------------------------------------------------
 * Komponen AppStack DIDAHULUKAN. Bootstrap dipakai hanya bila tema tidak punya
 * padanannya. Kelas baru ditambahkan di sini HANYA kalau keduanya tidak punya:
 *
 *   badge   -> .badge-subtle-* (AppStack)   bukan .bg-*-subtle (Bootstrap)
 *   kartu KPI -> .card + .stat (AppStack)
 *   kartu, grid, tombol, form -> Bootstrap, karena AppStack tidak
 *                                mendefinisikan padanannya sendiri
 *
 * Seluruh nilai memakai variabel CSS Bootstrap (--bs-*) agar ikut berubah
 * otomatis saat tema gelap aktif. Warna yang dipatok manual akan menjadi cacat
 * yang baru ketahuan setelah ada yang menyalakan dark mode.
 *
 * Konsekuensi yang diketahui dan diterima: .badge-subtle-* milik AppStack
 * memaku warnanya sebagai rgba literal dan tidak punya aturan khusus tema
 * gelap. Latarnya tembus pandang (alpha 0.175) sehingga tetap terbaca di atas
 * latar gelap, tapi ia tidak berbalik seperti variabel Bootstrap. Kalau dark
 * mode dinyalakan, inilah tempat pertama yang perlu diperiksa — bukan cacat
 * tersembunyi, melainkan tukar-tambah yang sudah dicatat.
 * ------------------------------------------------------------------------- */

/* ===========================================================================
 * POPPINS — DIINANGKAN SENDIRI
 * ===========================================================================
 * Tema AppStack sudah menyatakan `--bs-font-sans-serif: "Poppins", …`, tapi
 * TIDAK ADA satu pun berkas Poppins di repo ini. Google Fonts pun tidak bisa
 * menolong: CSP aplikasi memakai `style-src 'self'` dan `font-src 'self'`
 * (docker/nginx/default.conf), sehingga stylesheet maupun berkas fontnya
 * diblokir DIAM-DIAM. Hasilnya seluruh aplikasi selama ini jatuh ke Segoe UI —
 * tanpa satu pun galat di konsol yang menjelaskannya.
 *
 * Lima bobot, subset `latin` saja (39 KB seluruhnya). Subset latin-ext tidak
 * diambil: bahasa Indonesia tidak memerlukannya, dan tanda yang dipakai
 * antarmuka ini — em dash "—" (U+2014) dan middot "·" (U+00B7) — keduanya sudah
 * berada di dalam jangkauan latin.
 *
 * `font-display: swap` disengaja: teks tampil segera memakai font cadangan lalu
 * bertukar begitu Poppins siap. Alternatifnya (`block`) menyembunyikan teks
 * sampai font termuat, dan pada jaringan dinas yang lambat itu berarti halaman
 * kosong selama beberapa detik.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-800.woff2") format("woff2");
}





/* --- HURUF ----------------------------------------------------------------
 * Riwayat keputusan client: Poppins semua (2026-09-20) → IBM Plex, Fondasi C
 * (2026-10-10) → CAMPURAN (2026-10-10, berlaku): Poppins hanya untuk judul,
 * nama halaman, merek, dan angka besar (--siterang-font-judul, aturan di akhir
 * berkas); isi, tabel, form, lencana, tombol, grafik IBM Plex Sans; kode
 * (rekening, paket) IBM Plex Mono. Angka uang tabular lewat
 * font-variant-numeric, bukan monospace.
 */
:root {
  /* Fondasi C (dipilih client 2026-10-10): IBM Plex Sans untuk semua teks,
     IBM Plex Mono khusus kode (rekening, paket, nomor dokumen di <code>). */
  --bs-font-sans-serif: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  /* .font-monospace dipakai untuk ANGKA UANG — tetap Plex Sans, angkanya tabular. */
  --bs-font-monospace: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --siterang-font-kode: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  /* Huruf campuran (dipilih client 2026-10-10): Poppins khusus judul, merek, angka besar. */
  --siterang-font-judul: "Poppins", "IBM Plex Sans", -apple-system, "Segoe UI", Arial, sans-serif;
}

/* --- Kode di dalam teks: <code> ------------------------------------------
 *
 * PERSENTASE YANG BERTUMPUK. AppStack dan stylesheet Quill sama-sama menyetel
 * `code { font-size: 85% }`, dan 85% itu relatif terhadap induknya — bukan
 * terhadap ukuran dasar. Di dalam pembungkus yang sudah mengecil, ia mengecil
 * lagi:
 *
 *     body 0.825rem ........ 13,20 px
 *     .small 80% ........... 10,56 px
 *     code 85% ............... 8,98 px   <- di kotak petunjuk halaman impor
 *     code 85% (di tabel) ... 11,22 px   <- Tabel::kode()
 *
 * Sembilan piksel, untuk isi yang justru HARUS terbaca huruf demi huruf: kode
 * rekening, kode sub kegiatan, dan contoh format pagu. Kalau `5.2.04.01.001.00003`
 * tidak terbaca, kotak petunjuk yang memuatnya tidak menjelaskan apa pun.
 *
 * Diperbaiki dengan satuan ABSOLUT, bukan persen. Persen berapa pun akan
 * bertumpuk lagi begitu <code> dipakai di dalam pembungkus kecil yang lain;
 * `rem` memutus rantainya sekali untuk seluruh aplikasi. Nilainya sengaja
 * setara teks badan (13,20 px) — kode bukan keterangan tambahan, ia isinya.
 *
 * Latar, padding, dan radiusnya dibiarkan seperti bawaan tema.
 * ------------------------------------------------------------------------- */
code {
  font-size: 0.825rem;
}

/* --- Penanda isian wajib: label.required -------------------------------------
 *
 * KELAS INI SUDAH DIPAKAI 14 LABEL SEJAK LAMA — DAN TIDAK PERNAH MENGGAMBAR
 * APA PUN.
 *
 * `.required` datang dari Tabler, tempat core aplikasi ini di-clone. AppStack
 * tidak pernah mendefinisikannya, jadi <label class="form-label required"> di
 * formulir User, Role, Menu, Unit, dan Akses tampil persis sama dengan label
 * biasa. Tidak ada error, tidak ada yang menyadarinya — kelas kegagalan yang
 * sama dengan .page-header dan bg-*-lt yang sudah dicatat di kepala berkas ini.
 *
 * Sekarang ia benar-benar ada, dan dipakai SELURUH formulir.
 *
 * `content: " *"` DENGAN SPASI di depannya, bukan margin: bintangnya bagian
 * dari teks label, jadi ia ikut membungkus dengan benar saat labelnya panjang
 * dan terpotong dua baris.
 *
 * aria-hidden tidak bisa dipasang pada pseudo-element, dan memang tidak perlu:
 * pembaca layar mendapat kewajiban isian dari atribut `required` pada
 * kontrolnya sendiri, bukan dari bintang ini. Bintangnya untuk mata.
 */
.form-label.required::after {
  content: " *";
  color: var(--bs-danger);
  font-weight: 700;
}

/* --- Label kecil di atas angka besar (kartu ringkasan dashboard) ---------- */
.subheader {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* --- Tabel yang menempel ke tepi kartu ------------------------------------
 * Tabler membuat <table class="card-table"> menembus padding .card-body.
 * Di sini tabel memang berada langsung di dalam .card (tanpa .card-body),
 * jadi yang dibutuhkan hanya menghapus margin bawah bawaan <table> supaya
 * tidak menyisakan celah di atas tepi kartu.
 */
.card-table {
  margin-bottom: 0;
}

.card-table> :not(caption)>*>* {
  padding-inline: 1.25rem;
}

/* --- Kolom tabel selebar isinya ------------------------------------------
 * Dipakai pada kolom aksi supaya tidak ikut melar. width:1% + nowrap adalah
 * cara baku memaksa <td> menyusut ke lebar isinya.
 */
.w-1 {
  width: 1%;
  white-space: nowrap;
}

/* --- Keadaan kosong ------------------------------------------------------
 * Muncul saat daftar tidak berisi apa pun ATAU saat pencarian tidak menemukan
 * hasil. Keduanya memakai blok yang sama dengan teks berbeda — perbedaannya
 * ada di template, bukan di sini.
 */
.kosong {
  padding: 3rem 1rem;
  text-align: center;
}

.kosong-header {
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--bs-secondary-color);
}

.kosong-title {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.kosong-subtitle {
  margin-bottom: 0;
  color: var(--bs-secondary-color);
}

.kosong-action {
  margin-top: 1.5rem;
}

/* ===========================================================================
 * KOMPONEN DOMAIN KONTRAK
 * ===========================================================================
 * Berbeda sifat dari blok di atasnya. Yang di atas adalah JEMBATAN MIGRASI
 * Tabler -> AppStack dan seharusnya menyusut sampai hilang; yang di bawah ini
 * adalah komponen milik aplikasi ini sendiri yang memang tidak ada di AppStack:
 * chip tahun anggaran, pita alur lima langkah, dan kartu rantai anggaran.
 *
 * Seluruhnya memakai variabel CSS Bootstrap (--bs-*) supaya ikut berubah saat
 * tema gelap dinyalakan. Warna yang dipatok manual akan menjadi cacat yang baru
 * ketahuan setelah ada yang menyalakan dark mode — pelajaran yang sudah dicatat
 * di kepala berkas ini untuk .badge-subtle-*.
 * ------------------------------------------------------------------------- */

/* --- Merek di sidebar ---------------------------------------------------- */
/* AppStack memasang .sidebar-brand sebagai blok rata tengah. Merek di sini
 * dua bagian — penanda "PU" dan dua baris nama instansi — jadi barisnya
 * dijadikan flex rata kiri, mengikuti mockup v6.
 */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.15rem 1.25rem;
  text-align: left;
}

/* Kepala merek memakai navy yang LEBIH TERANG daripada badan menu (#2D4154 di
 * atas #1C2B39) — dicuplik dari mockup, bukan dikira-kira. Versi pertama
 * memasangnya terbalik: yang lebih tua di atas. Perbedaan warnanya yang
 * memisahkan merek dari menu, jadi garis tipis tidak perlu lagi. */
html[data-sidebar-theme="dark"] .sidebar-brand {
  background: #2D4154;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Lambang dinas, menggantikan penanda teks "PU" (rencana 40). Tingginya
 * dipatok supaya baris merek tidak berubah tinggi saat berkasnya diganti. */
.sidebar-brand-logo {
  display: block;
  flex-shrink: 0;
  height: 2.5rem;
  width: auto;
}

.sidebar-brand-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #FFFFFF;
}

/* Teks nama dinas resmi: kontras dipertegas untuk keterbacaan optimal */
.sidebar-brand-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.75);
  opacity: 1;
}

/* --- Navigasi sidebar ----------------------------------------------------
 * Bentuk pil + kepala bagian, mengikuti mockup v6. Aturan warna dipagari
 * html[data-sidebar-theme=dark] SUPAYA TIDAK MENANG SENDIRI: aturan tema
 * terang milik AppStack punya spesifisitas yang sama persis, dan berkas ini
 * dimuat belakangan — tanpa pagar itu, sidebar tema terang ikut jadi navy
 * dengan teks putih di atas putih.
 * ------------------------------------------------------------------------- */
html[data-sidebar-theme="dark"] .sidebar,
html[data-sidebar-theme="dark"] .sidebar-content {
  background: #1C2B39;
}

/* Latar .sidebar saja tidak cukup — .sidebar-content punya latarnya sendiri
 * dan menutupinya.
 */

.sidebar-nav {
  padding: 0.75rem 0 1.25rem;
}

.sidebar-header {
  padding: 0.85rem 1.375rem 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Amber dengan pemisah antar-grup (Opsi B Mockup & color palet.png) */
html[data-sidebar-theme="dark"] .sidebar-header {
  color: #BD8B40;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0.5rem;
  padding-top: 1rem;
}

html[data-sidebar-theme="dark"] .sidebar-header:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0.85rem;
}

.sidebar-link,
a.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 2px 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  min-height: 42px;
  transition: all 0.15s ease;
}

.sidebar-link i,
.sidebar-link svg,
a.sidebar-link i,
a.sidebar-link svg {
  width: 18px;
  height: 18px;
  margin-right: 0;
}

html[data-sidebar-theme="dark"] .sidebar-link,
html[data-sidebar-theme="dark"] a.sidebar-link {
  color: rgba(255, 255, 255, 0.88);
}

html[data-sidebar-theme="dark"] .sidebar-link:hover,
html[data-sidebar-theme="dark"] a.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

/* Bidang emas penuh berteks tinta (#BD8B40 & #1C2B39, ±5,2:1) dengan soft shadow */
html[data-sidebar-theme="dark"] .sidebar-item.active > .sidebar-link {
  background: #BD8B40;
  color: #1C2B39;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(184, 134, 59, 0.35);
}

html[data-sidebar-theme="dark"] .sidebar-item.active > .sidebar-link:hover {
  background: #C99A52;
  color: #1C2B39;
  box-shadow: 0 4px 16px rgba(184, 134, 59, 0.45);
}

/* Batang penanda di tepi sidebar DIBUANG (rencana 40): bidang amber di atas
 * sudah menyatakan menu mana yang terbuka, dan dua penanda untuk satu keadaan
 * hanya menambah bising.
 */

/* --- Topbar --------------------------------------------------------------
 * Garis amber inilah yang memisahkan topbar dari isi; tanpa itu keduanya
 * menyatu sebagai dua bidang terang yang bersebelahan.
 * ------------------------------------------------------------------------- */
.navbar-bg {
  border-bottom: 3px solid #BD8B40;
}

.navbar-judul-utama {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: #1C2B39;
}

.navbar-judul-sub {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--bs-secondary-color);
}

/* --- Inisial pengguna di navbar ------------------------------------------ */
.avatar-inisial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #1C2B39;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

/* --- Chip tahun anggaran -------------------------------------------------
 * Penyaring periode global (§5.5). Ia SELALU tampil karena penyaring yang
 * tidak terlihat adalah penyaring yang membuat orang bertanya "kenapa kontrak
 * saya hilang". Varian -tombol hanya dipasang bila memang ada tahun lain yang
 * bisa dipilih.
 */
/* --- Modern Context Capsule: Cakupan & Tahun Anggaran (Rencana 63) --------
 * Menggantikan chip krem lama dengan kapsul segmen modern (Modern Context Capsule).
 * Menyatukan penyaring cakupan unit kerja dan tahun anggaran dalam satu wadah
 * terpadu berlatar slate lembut dengan pembatas vertikal tipis, ikon visual
 * tematik (gedung instansi & kalender), serta badge peran/status yang jelas.
 */
.topbar-context-capsule {
  display: inline-flex;
  align-items: stretch;
  background: #F5EEDF;
  border: 1.5px solid #E3D3B0;
  border-radius: 12px;
  padding: 3px;
  box-shadow: 0 1px 3px rgba(184, 134, 59, 0.08);
  transition: all 0.2s ease;
}

.topbar-context-capsule:hover {
  background: #FAF6EC;
  border-color: #E5D3A0;
  box-shadow: 0 2px 8px rgba(184, 134, 59, 0.15);
}

.topbar-capsule-segment {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.topbar-capsule-divider {
  width: 1px;
  background: #E8D8B0;
  margin: 4px 2px;
  flex-shrink: 0;
}

/* Chip segmen di dalam kapsul */
.topbar-context-capsule .chip-tahun {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.85rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  line-height: 1.2;
  text-decoration: none;
  cursor: default;
  transition: all 0.15s ease;
}

.topbar-context-capsule a.chip-tahun-tombol {
  cursor: pointer;
}

.topbar-context-capsule a.chip-tahun-tombol:hover,
.topbar-context-capsule a.chip-tahun-tombol:focus {
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.topbar-context-capsule .chip-pemicu {
  padding-right: 0.85rem;
}

.topbar-context-capsule .chip-pemicu::after {
  display: none; /* Menggantikan tanda panah ::after lama dengan ikon FontAwesome .capsule-chevron */
}

.capsule-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.capsule-icon-cakupan {
  background: rgba(184, 134, 59, 0.18);
  color: #B45309;
}

.capsule-icon-tahun {
  background: rgba(184, 134, 59, 0.22);
  color: #B45309;
}

.capsule-text-box {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.capsule-label-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.topbar-context-capsule .chip-tahun-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A7332;
  margin-bottom: 0;
}

.capsule-badge-role,
.capsule-badge-status {
  font-size: 0.60rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.capsule-badge-role {
  background: #BD8B40;
  color: #1C2B39;
}

.capsule-badge-status {
  background: #DCFCE7;
  color: #15803D;
}

.capsule-value-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.topbar-context-capsule .chip-tahun-nilai {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1C2B39;
  margin-bottom: 0;
}

.topbar-context-capsule .chip-cakupan-nilai {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capsule-chevron {
  font-size: 0.68rem;
  color: #A39888;
  margin-left: 0.15rem;
  transition: transform 0.15s ease;
}

.chip-pemicu[aria-expanded="true"] .capsule-chevron {
  transform: rotate(180deg);
}

/* Fallback gaya chip tunggal di luar kapsul */
.chip-tahun:not(.topbar-context-capsule *) {
  display: inline-flex;
  flex-direction: column;
  padding: 0.3rem 0.8rem;
  border: 1px solid #E6DFD2;
  border-radius: 0.75rem;
  background: #FAF8F3;
  line-height: 1.15;
  text-decoration: none;
}
.chip-tahun:not(.topbar-context-capsule *) .chip-tahun-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #76695C;
}
.chip-tahun:not(.topbar-context-capsule *) .chip-tahun-nilai {
  font-size: 0.95rem;
  font-weight: 700;
  color: #14202B;
}

/* Responsivitas Layar */
@media (max-width: 767.98px) {
  .topbar-context-capsule .chip-cakupan-nilai {
    max-width: 8rem;
  }
  .capsule-icon-box {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

@media (max-width: 575.98px) {
  .topbar-context-capsule {
    padding: 2px;
  }
  .topbar-context-capsule .chip-tahun {
    padding: 0.25rem 0.5rem;
    gap: 0.4rem;
  }
  .topbar-context-capsule .chip-cakupan-nilai {
    max-width: 5.5rem;
  }
}

/* Dropdown styling peningkatan */
.topbar-context-capsule .dropdown-menu {
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  border: 1px solid #E6DFD2;
  margin-top: 6px;
}

/* --- Pita alur lima langkah ----------------------------------------------
 * Sistem ini adalah urutan lima langkah, dan pengguna baru perlu melihat
 * urutan itu sebelum melihat angka. Diambil dari mockup, tapi ditulis dengan
 * komponen Bootstrap alih-alih warna yang dipatok.
 */
.pita-alur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.pita-alur-langkah {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 10rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

a.pita-alur-langkah:hover {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}

.pita-alur-langkah.nonaktif {
  opacity: 0.55;
}

.pita-alur-nomor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.pita-alur-langkah.nonaktif .pita-alur-nomor {
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.pita-alur-teks {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.pita-alur-angka {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
}

/* --- Kartu rantai anggaran -----------------------------------------------
 * Muncul di formulir paket, kontrak, dan tagihan begitu induknya dipilih.
 * Isinya jenjang di atas baris yang sedang dibuat, supaya operator melihat
 * pagu mana yang akan ia potong SEBELUM mengetik angkanya.
 */
/*
 * TABEL, BUKAN DERETAN BARIS YANG MASING-MASING MENGATUR DIRINYA SENDIRI.
 *
 * Versi pertama rencana 46 memberi `display: grid` pada .rantai-baris — dan
 * itu keliru: setiap baris jadi grid TERSENDIRI, sehingga lebar kolom labelnya
 * dihitung ulang per baris. Label panjang seperti "Pagu sub kegiatan"
 * mendorong nilainya lebih ke kanan daripada baris "Bidang" atau "Kode" di
 * atasnya — dilaporkan client 2026-09-20 berikut tangkapan layarnya.
 *
 * Sekarang gridnya milik .rantai — SATU untuk seluruh kartu — dan barisnya
 * `display: contents` supaya sel-selnya naik menjadi anak langsung grid itu.
 * Dengan begitu seluruh baris berbagi lebar kolom yang sama:
 *
 *     Bidang            : Bidang Bina Marga
 *     Kode              : 1.03.10.2.01.0069
 *     Pagu sub kegiatan : Rp 3.200.000.000,00
 *     Sisa pagu         : Rp 50.000.000,00
 *
 * Titik duanya dari ::after pada label, BUKAN elemen tersendiri: label memakai
 * flex ber-`justify-content: space-between`, jadi titik dua terdorong ke tepi
 * kanan kolom label yang lebarnya sudah seragam — ikut berbaris tanpa satu pun
 * perubahan di formulir.js.
 */
.rantai {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg);
}

/* Keadaan kosong isinya satu kalimat, bukan pasangan label/nilai. */
.rantai.kosong {
  display: block;
  color: var(--bs-secondary-color);
  font-style: italic;
}

.rantai-baris {
  display: contents;
}

.rantai-label,
.rantai-nilai {
  padding: 0.3rem 0;
  font-size: 0.8125rem;
  border-top: 1px dashed var(--bs-border-color);
}

/* Garis pemisah hanya ANTAR baris. Dengan display:contents tidak ada elemen
   baris yang bisa disasar `+`, jadi yang dimatikan adalah garis pada sel
   milik baris pertama. */
.rantai-baris:first-child .rantai-label,
.rantai-baris:first-child .rantai-nilai {
  border-top: 0;
}

.rantai-label {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.rantai-label::after {
  content: ":";
}

.rantai-nilai {
  text-align: left;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Di layar sempit kolom label memakan terlalu banyak ruang untuk nilai panjang
   seperti nama paket; barisnya ditumpuk dan titik duanya dilepas. */
@media (max-width: 575.98px) {
  .rantai {
    grid-template-columns: minmax(0, 1fr);
  }

  .rantai-label {
    border-top: 0;
    padding-bottom: 0;
  }

  .rantai-baris:not(:first-child) .rantai-label {
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.45rem;
  }

  .rantai-nilai {
    border-top: 0;
    padding-top: 0;
  }

  .rantai-label::after {
    content: "";
  }
}

.rantai-angka {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- Daftar pasangan label/nilai pada halaman detail --------------------- */
.kv {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.kv:last-child {
  border-bottom: 0;
}

.kv-label {
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

.kv-nilai {
  text-align: right;
  font-weight: 500;
  /* min-width:0 supaya nilai panjang boleh membungkus, bukan mendorong
   * labelnya keluar. text-wrap:pretty menyeimbangkan baris terakhir sehingga
   * nama panjang seperti "Program Pengembangan Sistem Penyediaan Air Minum"
   * tidak menyisakan satu kata sendirian di baris kedua. */
  min-width: 0;
  text-wrap: pretty;
}

.kv-nilai.angka {
  font-variant-numeric: tabular-nums;
}

/* --- Penanda kolom terkunci pada formulir --------------------------------
 * Dipakai untuk nilai kontrak yang sudah punya tagihan disetujui (§5.7) dan
 * untuk nilai SP2D yang mengikuti nilai tagihan (§4.4). Input readonly saja
 * tidak cukup: tanpa penanda, kolom yang tidak bisa diketik terbaca sebagai
 * formulir yang rusak.
 */
.form-terkunci {
  /*
   * LATARNYA yang membedakan, bukan hurufnya — dan itu temuan yang membalik
   * perbaikan pertama (laporan client 2026-09-20: "ini kenapa belum berubah?").
   *
   * Nilai efektif tema ini:
   *
   *   .form-control  latar var(--bs-secondary-bg) = #fff
   *                  huruf var(--bs-body-color)   = #5C5045
   *   .form-terkunci latar var(--bs-secondary-bg) = #fff   <- SAMA PERSIS
   *
   * Dua akibatnya sekaligus. Pertama, `.form-terkunci` selama ini tidak
   * mengubah apa pun yang terlihat: isian terkunci tampil identik dengan isian
   * yang masih bisa diketik, dan satu-satunya tanda bedanya adalah kursor yang
   * baru muncul saat disentuh mouse. Kedua, menyetel hurufnya ke #5C5045 —
   * percobaan pertama permintaan ini — nol efeknya, sebab SELURUH teks
   * aplikasi memang sudah berwarna itu.
   *
   * Yang dipakai sekarang `--bs-quaternary-bg` (#E6DFD2): abu yang sama persis
   * dengan yang dipakai tema untuk `.form-control:disabled`. Dengan begitu
   * keempat isian legalitas yang `readonly` tampak setara dengan keempat
   * select yang `disabled` di formulir yang sama — yang memang sama-sama
   * berlabel "TIDAK BISA DIUBAH".
   *
   * Kontras huruf #5C5045 di atas latar isian terkunci ±5,8:1 — lolos AA
   * (tema Ulin & Emas, 2026-10-10; sebelumnya #6c757d = 3,80:1, gagal AA).
   */
  background: var(--bs-quaternary-bg) !important;
  cursor: not-allowed;
  color: #5C5045 !important;
  -webkit-text-fill-color: #5C5045;
  opacity: 1;
}

/*
 * KONTROL YANG DIMATIKAN ikut abu-abu yang sama.
 *
 * .form-terkunci di atas hanya mengenai <input readonly>. Di /kontrak/{id}
 * ada EMPAT isian terkunci lain yang berupa <select disabled> — paket,
 * penyedia, skema pembayaran, dan wilayah — dan ketiganya berlabel sama
 * "tidak bisa diubah". Tanpa aturan di bawah, hanya separuh isian terkunci di
 * satu halaman yang berubah warna, dan separuh yang tidak terbaca sebagai
 * kelalaian.
 *
 * SELECT2 PERLU BARISNYA SENDIRI. Tiga dari empat select itu ber-`data-pilih`,
 * jadi select2 menyembunyikan <select> aslinya dan menggambar markup-nya
 * sendiri — aturan apa pun pada <select> tidak akan terlihat. Skin
 * bootstrap-5 bawaan tema sudah memberinya `var(--bs-secondary-color)`, tapi
 * token itu beralfa .75 sehingga hasilnya lebih pucat daripada #5C5045 yang
 * diminta; skin `--default` malah memberi #444 pada anak `__rendered`-nya,
 * yang akan menimpa warna induknya. Keduanya karena itu disebut eksplisit.
 */
.form-control:disabled,
.form-select:disabled,
.select2-container--disabled .select2-selection,
.select2-container--disabled .select2-selection__rendered {
  color: #5C5045 !important;
  -webkit-text-fill-color: #5C5045;
  opacity: 1;
}

.label-terkunci {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.05rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* --- Judul kartu yang diikuti subjudul -----------------------------------
 * Bootstrap memberi .card-subtitle margin-top NEGATIF (-0.25 * spacer) supaya
 * ia merapat ke .card-title yang punya margin-bottom positif. Seluruh halaman
 * di aplikasi ini menulis judulnya `<h5 class="card-title mb-0">` — margin
 * bawahnya dimatikan, sementara tarikan negatif subjudulnya tetap berlaku.
 * Hasilnya subjudul naik 4px MENIMPA baris judul: itulah tumpang tindih yang
 * terlihat di hampir semua kartu.
 *
 * Diperbaiki di sini, bukan dengan membuang `mb-0` di 20-an berkas view,
 * supaya pola "judul + subjudul" tetap satu bentuk dan tidak bisa lupa.
 */
.card-title.mb-0+.card-subtitle {
  margin-top: 0.25rem;
}

/* --- Batang kemajuan realisasi fisik -------------------------------------
 * Menggantikan .progress/.progress-bar Bootstrap KHUSUS untuk sel tabel.
 * Alasannya bukan selera: keduanya butuh tinggi dan lebar yang diatur per
 * pemakaian, dan satu-satunya cara ringkasnya — atribut style — diabaikan
 * browser karena CSP aplikasi ini melarang gaya sebaris. Tinggi dan lebar
 * minimum karena itu ditetapkan di sini sekali untuk semua; hanya lebar isian
 * yang tersisa untuk dipasang ui.js dari data-persen.
 */
.kemajuan {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kemajuan-alur {
  flex: 1 1 auto;
  min-width: 72px;
  height: 6px;
  border-radius: 3px;
  background: var(--bs-secondary-bg);
  overflow: hidden;
}

.kemajuan-isi {
  width: 0;
  /* ui.js yang mengisinya; nol = data belum terbaca */
  height: 100%;
  border-radius: 3px;
}

.kemajuan-angka {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Kepala kartu: judul + tombol aksi -----------------------------------
 * Pola yang dipakai sepuluh halaman daftar:
 *
 *   <div class="card-header d-flex align-items-center">
 *     <div>judul + subjudul</div>
 *     <div class="ms-auto d-flex ...">tombol</div>
 *
 * Keduanya flex item yang boleh menyusut, dan subjudul di sini panjang-panjang
 * (satu-dua kalimat penjelas). Yang terjadi: teks mendorong, tombol mengalah,
 * dan "Tambah Paket" pecah jadi dua baris di dalam tombol yang tergencet.
 * Tombol adalah ukuran tetap — yang boleh mengalah adalah teksnya.
 */
.card-header.d-flex>.ms-auto {
  flex: 0 0 auto;
}

.card-header.d-flex>.ms-auto .btn {
  white-space: nowrap;
}

/* min-width:0 melawan bawaan flex item yang menolak menyempit di bawah lebar
 * kata terpanjangnya — tanpa ini blok judul tetap mendorong keluar kartu. */
.card-header.d-flex> :first-child {
  min-width: 0;
}

/* --- Lebar minimum tabel daftar ------------------------------------------
 * Sebuah tabel di dalam .table-responsive TIDAK langsung menggulir saat
 * kolomnya kebanyakan. Browser lebih dulu memeras setiap kolom yang boleh
 * dibungkus sampai selebar kata terpanjangnya, dan baru meluber kalau sudah
 * tidak bisa lagi. Akibatnya pada layar 1280 px: "Pembangunan Jembatan Kampung
 * Naha Aruq" turun jadi lima baris satu kata, dan tingginya baris ikut kacau —
 * persis keluhan "tergencet".
 *
 * Lebar minimum di bawah membalik urutan itu: kolom mendapat lebar wajarnya
 * lebih dulu, dan yang menggulir adalah pembungkusnya. Nilainya sengaja 1000px
 * — tepat di bawah lebar area isi pada layar 1440 px, sehingga layar lebar
 * TIDAK mendapat batang gulir yang tidak perlu, sementara layar sempit
 * mendapat kolom yang masih terbaca.
 *
 * Dipasang per tabel, bukan ke semua .table: tabel master hanya empat kolom
 * dan sudah muat di mana pun.
 *
 * Selektornya keturunan, bukan anak langsung: DataTables menyisipkan
 * pembungkusnya sendiri (.dt-container > .row > .col) di antara .table-
 * responsive dan <table>, jadi `>` tidak pernah cocok.
 */
.table-responsive table.tabel-lega {
  min-width: 1000px;
}
/* --- Formulir satu kartu dengan label bagian -----------------------------
 * Dipakai formulir kontrak (kontrak/form.volt). Sebelumnya formulir itu lima
 * .card bertumpuk, masing-masing dengan .card-header sendiri; sekarang satu
 * kartu dengan lima label bergaris di dalamnya. Susunannya diambil dari
 * mockup v6 (.sec-label), tapi HANYA susunannya — seluruh isian tetap
 * memakai .row/.col-md-* dan kontrol Bootstrap yang sama seperti dulu.
 *
 * Kenapa bukan .card-header: kepala kartu membawa latar, batas, dan padding
 * horizontalnya sendiri, dan lima di antaranya membuat satu formulir terbaca
 * seperti lima formulir terpisah. Label bergaris memisahkan bagian tanpa
 * memisahkan dokumennya.
 */
.judul-bagian {
  margin: 1.75rem 0 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Bagian pertama menempel ke tepi atas .card-body, tanpa jarak tambahan. */
.judul-bagian:first-child {
  margin-top: 0;
}

.jb-baris {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  /* Sengaja LEBIH PEKAT dari --bs-emphasis-color (#4A3F36) yang dipakai judul
   * kartu di halaman lain. Nilai ini diambil dari mockup v6 (--ink-900) dan
   * itulah yang disetujui saat pratinjau. Kalau kelak seluruh teks aplikasi
   * dipekatkan mengikuti mockup, baris ini yang pertama boleh kembali ke
   * variabel. */
  color: #16212b;
}

/* Kotak bernomor. Navy dipatok, sama seperti latar sidebar di atas, dengan
 * konsekuensi yang sama pula — lihat catatan tema gelap di kepala berkas.
 * Ukurannya tetap 20x20 supaya deret 1..5 sama lebar; itu sebabnya ia bukan
 * .badge, yang lebarnya mengikuti isi.
 */
.jb-baris .n {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #0b2545;
  color: #fff;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
}

/* Penjelasan bagian. Dulu .card-subtitle; model v6 tidak punya tempat untuk
 * ini, jadi tempatnya dibuat — kalimatnya isi, bukan hiasan.
 */
.jb-sub {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}
/* --- Kartu datar untuk SELURUH aplikasi ----------------------------------
 * Bawaan AppStack memberi setiap .card bayang halus tanpa batas:
 *     box-shadow: 0 0 .875rem 0 rgba(41,48,66,.05)
 *     border-width: 0; border-color: transparent; border-radius: .25rem
 * Mockup v6 kebalikannya — datar, bergaris 1px, sudut 10px.
 *
 * Berlaku untuk 115 kartu di 54 view, SENGAJA. Sempat dicoba sebagai kelas
 * penanda `.kartu-datar` di masing-masing kartu, dan itu keliru: begitu
 * sebagian kartu datar sementara sisanya berbayang, satu halaman terbaca
 * seperti dua aplikasi — persis kegagalan yang sudah diperingatkan komentar
 * di puncak kontrak/index.volt soal kartu KPI. Rupa kartu adalah keputusan
 * satu aplikasi, bukan keputusan per halaman, jadi tempatnya di satu aturan.
 *
 * Spesifisitasnya sama dengan milik AppStack (0,1,0); yang memenangkan aturan
 * ini semata-mata urutan muat — kontrak.css sesudah app.css di index.volt.
 */
.card {
  /* KEDUA radius harus diset bersamaan.
   *
   * Bootstrap membulatkan anak-anak kartu yang menempel ke tepi —
   * .card-header:first-child, .card-footer:last-child, .card>.list-group —
   * memakai --bs-card-inner-border-radius, BUKAN border-radius kartunya.
   * Menaikkan sudut luar sendirian meninggalkan variabel itu di 0.25rem
   * bawaan AppStack, dan karena latar kepala kartu putih sementara latar
   * halaman abu (#F7F4EE), kotak putih itu menyembul keluar dari lengkung
   * kartu: sudut kiri-atas dan kanan-atas terlihat tergigit. Sudah terjadi.
   *
   * Rumus dalamnya mengikuti Bootstrap sendiri: radius luar dikurangi tebal
   * garis, supaya lengkung dalam sejajar dengan sisi dalam garisnya.
   */
  --bs-card-border-radius: 0.625rem;
  --bs-card-inner-border-radius: calc(0.625rem - 1px);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-card-border-radius);
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Pohon unit organisasi (rencana 28) — /admin/unit
 *
 * Dipakai HANYA oleh satu halaman, dan satu-satunya daftar di aplikasi ini yang
 * bukan DataTables. Alasan lengkapnya di UnitController::indexAction().
 *
 * Garis penghubungnya digambar dengan ::before/::after pada kotak selebar rel,
 * bukan dengan gambar atau karakter: ia harus ikut memanjang saat baris
 * meninggi karena nama unit yang membungkus.
 * ------------------------------------------------------------------------- */

.pohon-garis {
  display: flex;
  flex-shrink: 0;
  align-self: stretch;
}

.pohon-rel,
.pohon-siku {
  width: 1.125rem;
  flex-shrink: 0;
  position: relative;
}

/* Garis leluhur yang masih punya adik: diteruskan melewati baris ini. */
.pohon-rel.lanjut::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.5rem;
  width: 1px;
  background: var(--bs-border-color);
}

/* Siku ke baris ini sendiri: turun separuh, lalu membelok ke kanan. */
.pohon-siku::before {
  content: "";
  position: absolute;
  top: 0;
  height: 50%;
  left: 0.5rem;
  width: 1px;
  background: var(--bs-border-color);
}

.pohon-siku::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.5rem;
  width: 0.625rem;
  height: 1px;
  background: var(--bs-border-color);
}

/* Masih punya adik di bawahnya: garisnya diteruskan melewati siku. */
.pohon-siku.lanjut::before {
  bottom: 0;
  height: auto;
}

.pohon-tombol {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-right: 0.4rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  cursor: pointer;
}

.pohon-tombol:hover {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
}

.pohon-tombol i {
  font-size: 0.625rem;
  transition: transform 0.14s ease;
}

.pohon-tombol[aria-expanded="true"] i {
  transform: rotate(90deg);
}

/* Baris daun: tempatnya tetap dipesan supaya nama unit sebidang dengan
   saudaranya yang punya tombol. */
.pohon-daun {
  visibility: hidden;
  border-color: transparent;
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .pohon-tombol i { transition: none; }
}

.pohon-nama mark {
  padding: 0 0.125rem;
  border-radius: 0.1875rem;
}

/* --- Dropdown Cakupan & Tahun anggaran (rencana 30) ----------------------
 * Chip yang sama, tapi menekannya membuka daftar di tempat, bukan pindah ke
 * /pilih-unit atau /pilih-tahun.
 *
 * Tanda panahnya dipasang lewat ::after pada chip, BUKAN lewat .dropdown-toggle:
 * chip ini flex-direction column, jadi caret bawaan Bootstrap akan jatuh sebagai
 * baris ketiga di bawah nilainya.
 */
.chip-pemicu {
  position: relative;
  padding-right: 1.75rem;
}

.chip-pemicu::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--bs-secondary-color);
  border-bottom: 1.5px solid var(--bs-secondary-color);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}

.chip-pemicu[aria-expanded="true"] {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}

.chip-pemicu[aria-expanded="true"]::after {
  border-color: var(--bs-primary);
  transform: translateY(-30%) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .chip-pemicu::after { transition: none; }
}

.chip-menu {
  min-width: 18rem;
  max-width: 22rem;
}

.chip-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: normal;
}

.chip-menu-cek {
  width: 1rem;
  flex-shrink: 0;
  color: var(--bs-primary);
}

/* Nama unit TIDAK dipotong di sini. Di chip ia berelipsis supaya menu akun tidak
   terdorong keluar layar; di dropdown pengguna membandingkan nama utuh. */
.chip-menu-nama {
  flex: 1;
  min-width: 0;
}

.chip-menu-item[aria-current="true"] .chip-menu-nama {
  font-weight: 600;
}

.chip-menu-tahun {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.chip-menu-kaki {
  padding: 0.25rem 1.5rem 0.5rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  white-space: normal;
}

/* --- Kotak cari pohon unit (rencana 28, dibetulkan rencana 31) ------------
 * Lebarnya ditetapkan di sini, BUKAN lewat style="width: 15rem" di view seperti
 * versi pertama. CSP aplikasi ini `style-src 'self'` tanpa 'unsafe-inline',
 * jadi atribut style di HTML diblokir browser dan kotaknya jatuh ke lebar
 * bawaannya -- tanpa satu pun pesan di layar.
 */
.pohon-cari {
  width: 15rem;
  max-width: 100%;
}

/* ==========================================================================
 *  Halaman masuk SIPK (rencana 39)
 * ==========================================================================
 *  Dipakai `kosong.volt` — kerangka /login, /pilih-tahun, dan /pilih-unit.
 *
 *  LATAR BERLAPIS, dan urutannya menentukan. Yang pertama ditulis PALING ATAS:
 *
 *    1. bingkai ornamen kiri + kanan   tengahnya transparan  -> tetap pekat
 *    2. kabut putih                    peredam untuk teks    -> hanya foto
 *    3. foto Mahakam Ulu
 *
 *  Versi pertama memakai satu berkas yang sudah menyatukan foto dan bingkai;
 *  akibatnya kabut ikut memudarkan ornamennya. Bingkainya ditambatkan ke tepi
 *  dengan `auto 100%`, jadi LEBARNYA MENGIKUTI TINGGI layar — itu sebabnya
 *  ruang kiri kolom teks di bawah diukur `vh`, bukan `vw`.
 * ========================================================================== */

/* Wajib: komponen ber-`display` eksplisit menimpa atribut `hidden` bawaan HTML. */
[hidden] { display: none !important; }

.masuk-panggung {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background:
    url("/assets/app/img/bingkai-kiri.png?v=tinta1")  left bottom / auto 100% no-repeat,
    url("/assets/app/img/bingkai-kanan.png?v=tinta1") right center / auto 100% no-repeat,
    linear-gradient(100deg,
      rgba(245, 242, 234, 0.92) 0%,
      rgba(245, 242, 234, 0.86) 30%,
      rgba(245, 242, 234, 0.62) 46%,
      rgba(245, 242, 234, 0) 64%),
    url("/assets/app/img/latar-login.jpg") center / cover no-repeat,
    #F5F2EA;
}

.masuk-isi {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 5vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

@media (min-width: 1101px) {
  /* Baji kiri menjorok jauh; tanpa ruang ini ia memakan tepi judul. */
  .masuk-panggung .masuk-isi { padding-left: clamp(5rem, 16vw, 15.5rem); }
}

/* --- kolom kiri ---------------------------------------------------------- */
.masuk-kiri {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2rem;
  min-height: auto;
}

.masuk-instansi { display: flex; align-items: center; gap: 0.85rem; }
.masuk-instansi img { height: 48px; width: auto; display: block; }

.masuk-instansi-nama {
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  color: #2D4154;
}

.masuk-sambutan { align-self: center; max-width: 44rem; }

.masuk-judul {
  font-size: clamp(1.8rem, 2.7vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: #2D4154;
  text-transform: uppercase;
}

/*
 * Aksen "Mahakam Ulu": hurufnya TETAP navy, kuning jadi garis di bawahnya.
 *
 * Kuning #BD8B40 di atas bidang terang hanya 1,9:1 — gagal bahkan untuk ambang
 * teks besar yang 3:1. Dengan garis, yang berkontras rendah adalah hiasannya,
 * bukan informasinya; bentuknya pun mengutip goresan kuning di bawah logo SIPK.
 */
.masuk-sorot { position: relative; padding-bottom: 0.1em; }

.masuk-sorot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.085em;
  border-radius: 999px;
  background: #BD8B40;
}

.masuk-keterangan {
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0;
  color: #1a325a;
  max-width: 42ch;
}

/*
 * Moto ditambatkan ke sudut kiri bawah panggung, bukan mengikuti aliran kolom:
 * ruang kiri di atas akan menggesernya ke kanan. Ukurannya diambil dari mockup
 * (±8% dari kiri, ±3,7% dari dasar), dan warnanya PUTIH karena pitanya gelap.
 */
.masuk-moto {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 8vw, 8rem);
  bottom: clamp(0.5rem, 2.5vh, 1.75rem);
  font-size: clamp(0.75rem, 0.95vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}

.masuk-moto span { margin: 0 0.55rem; color: rgba(255, 255, 255, 0.75); }

/* --- kartu --------------------------------------------------------------- */
.masuk-kolom {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.masuk-kartu {
  background: #fff;
  border-radius: 18px;
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 16px 40px rgba(18, 38, 74, 0.14), 0 2px 6px rgba(18, 38, 74, 0.05);
  border: 1px solid rgba(201, 210, 228, 0.5);
}

.masuk-merek {
  display: block;
  margin: 0 auto 1rem;
  height: 52px;
  width: auto;
}

.masuk-kartu h1 {
  font-size: 1.45rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 0.25rem;
  color: #2D4154;
  letter-spacing: -0.01em;
}

.masuk-ajakan {
  text-align: center;
  margin: 0 0 1.35rem;
  color: #76695C;
  font-size: 0.875rem;
}

.masuk-kartu .mb-3 {
  margin-bottom: 0.9rem !important;
}

.masuk-kartu .form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #2D4154;
}

.masuk-kartu .form-control,
.masuk-kartu .form-select {
  border: 1.5px solid #D6CCBB;
  border-radius: 9px;
  padding: 0.55rem 0.85rem;
  min-height: 42px;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.masuk-kartu .form-control:focus,
.masuk-kartu .form-select:focus {
  border-color: #2D4154;
  box-shadow: 0 0 0 3px rgba(32, 56, 100, 0.14);
}

.masuk-kartu .input-group .form-control {
  border-right: 0;
  border-radius: 9px 0 0 9px;
}

.masuk-kartu .input-group .btn {
  border: 1.5px solid #D6CCBB;
  border-left: 0;
  border-radius: 0 9px 9px 0;
  color: #76695C;
  padding: 0 0.85rem;
}

/* Tombol merek SITERANG (Tinta Emas): putih di atas emas tua #8F672B ±5,0:1 (AA). */
.btn-sipk {
  background: #8F672B;
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  min-height: 44px;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(28, 43, 57, 0.25);
  transition: all 0.15s ease;
}

.btn-sipk:hover,
.btn-sipk:focus {
  background: #765422;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(184, 134, 59, 0.4);
}
.btn-sipk:focus-visible { outline: 3px solid #1C2B39; outline-offset: 3px; }

.masuk-bantuan {
  text-align: center;
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: #8A7D6E;
}

/* --- layar sempit -------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Foto dan bingkainya dilepas: bingkai terpotong dan judul jatuh di atas air.
     Yang tersisa warna mereknya — kartunya yang penting di lebar ini. */
  .masuk-panggung {
    background: linear-gradient(160deg, #fff 0%, #F5F2EA 55%, #f2ecdf 100%);
    align-items: flex-start;
  }

  .masuk-isi { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; }
  .masuk-kiri { min-height: 0; gap: 1.25rem; }
  .masuk-sambutan { max-width: none; }
  .masuk-judul { font-size: clamp(1.5rem, 5.5vw, 2.1rem); }
  .masuk-keterangan { font-size: 1rem; }
  .masuk-moto { display: none; }
  .masuk-kartu { box-shadow: 0 12px 32px rgba(28, 43, 57, 0.12); }
}

@media (max-width: 700px) {
  /* Formulir harus terlihat tanpa menggulir: di ponsel orang datang untuk
     masuk, bukan membaca. */
  .masuk-judul { font-size: 1.3rem; margin-bottom: 0; }
  .masuk-keterangan { display: none; }
}

@media (max-width: 560px) {
  .masuk-instansi-nama { font-size: 0.9rem; }
  .masuk-kartu { border-radius: 22px; padding: 1.5rem 1.25rem; }
}

/* Pemenggalan judul dikunci hanya di layar lebar — mengikuti mockup. Di bawah
   itu teks dibiarkan mengalir: pemenggalan mati menghasilkan baris satu kata. */
.masuk-patah { display: none; }

@media (min-width: 1101px) {
  .masuk-patah { display: inline; }
}

/* ==========================================================================
 *  Area isi dan footer (rencana 40)
 * ==========================================================================
 *  Pita batik ditempel di DASAR area isi, bukan di dalam footer. Di mockup ia
 *  alas halaman dan footer putih duduk di bawahnya; kalau dipasang di footer,
 *  pitanya ikut mengecil setiap kali tinggi footer berubah.
 * ========================================================================== */
.content {
  background:
    url("/assets/app/img/batik-bawah.png") center bottom / 1400px auto repeat-x,
    #F7F4EE;
}

.footer {
  background: #fff;
  border-top: 3px solid #BD8B40;
}

/* ==========================================================================
 *  Sidebar lapang + rail yang bisa diciutkan (rencana 41)
 * ==========================================================================
 *  ⚠ ARTI `.collapsed` MILIK TEMA BERBALIK DI 992 px:
 *
 *      >= 992 px  .sidebar.collapsed -> margin-left:-260px  (disembunyikan)
 *      <  992 px  .sidebar.collapsed -> margin-left:0       (laci DIBUKA)
 *
 *  Karena itu seluruh aturan rail di bawah dipagari `min-width: 992px`.
 *  Tanpa pagar itu, tombol yang membuka menu di ponsel justru akan
 *  menciutkannya jadi rail — kebalikan dari yang diharapkan.
 * ========================================================================== */

/* --- Keadaan terbuka: dilapangkan --------------------------------------- */
@media (min-width: 992px) {
  .sidebar {
    min-width: 268px;
    max-width: 268px;
  }
}

/* 40 px, bukan 34 px. "Pelaku Pengadaan Barang dan Jasa" — label terpanjang di
 * basis data — sebelumnya pecah dua baris, satu-satunya item yang tingginya
 * berbeda dari yang lain, tepat di tengah daftar. */
.sidebar-link,
a.sidebar-link {
  min-height: 40px;
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
}

.sidebar-link i,
.sidebar-link svg,
a.sidebar-link i,
a.sidebar-link svg {
  width: 18px;
  height: 18px;
}

/* Nomor alur sebagai lencana, bukan bagian teks label: label jadi lebih
 * pendek, dan urutan 1→5 bisa dipindai tanpa membaca kalimatnya. */
.sidebar-nomor {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
}

html[data-sidebar-theme="dark"] .sidebar-nomor {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

html[data-sidebar-theme="dark"] .sidebar-item.active > .sidebar-link .sidebar-nomor {
  background: rgba(28, 43, 57, 0.2);
  color: #1C2B39;
}

/* --- Keadaan ciut: rail ikon -------------------------------------------- */
@media (min-width: 992px) {
  html[data-sisi="ciut"] .sidebar,
  html[data-sisi] .sidebar.collapsed {
    margin-left: 0;
    min-width: 76px;
    max-width: 76px;
  }

  /*
   * Label disembunyikan SECARA VISUAL, bukan dengan display:none.
   *
   * display:none mencabutnya dari pembaca layar juga — rail jadi 21 tautan
   * tanpa nama. Teknik ini menyisakan teksnya untuk pembaca layar, sementara
   * pengguna awas mendapatkannya lewat atribut title.
   */
  html[data-sisi="ciut"] .sidebar-teks,
  html[data-sisi="ciut"] .sidebar-brand-text,
  html[data-sisi="ciut"] .sidebar-header,
  html[data-sisi] .sidebar.collapsed .sidebar-teks,
  html[data-sisi] .sidebar.collapsed .sidebar-brand-text,
  html[data-sisi] .sidebar.collapsed .sidebar-header {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-top: none;
  }

  html[data-sisi="ciut"] .sidebar-link,
  html[data-sisi] .sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 0.5rem;
  }

  /* Lencana nomor ikut disembunyikan: di rail ia berebut tempat dengan ikon,
   * dan ikonlah yang membedakan satu menu dari yang lain. */
  html[data-sisi="ciut"] .sidebar-nomor,
  html[data-sisi] .sidebar.collapsed .sidebar-nomor {
    display: none;
  }

  html[data-sisi="ciut"] .sidebar-brand,
  html[data-sisi] .sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding: 1.15rem 0.5rem;
  }
}

/* ==========================================================================
 *  Bagian mockup yang sebelumnya belum diambil (rencana 41)
 * ========================================================================== */

/*
 * Tombol utama SITERANG (tema Tinta Emas = warna mockup v27, 2026-10-10):
 * emas tua #8F672B (--gold-deep) berteks putih, ±5,0:1 — lolos WCAG AA. Emas #BD8B40 hanya untuk bidang (menu aktif,
 * garis, ikon), tidak untuk tombol berteks putih (±3:1, gagal AA).
 *
 * Berlaku untuk SELURUH .btn-primary — "Tambah", "Simpan", "Lanjutkan" —
 * supaya tidak ada dua warna aksi utama.
 */
.btn-primary {
  background: #8F672B;
  border-color: #8F672B;
  color: #fff;
  font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #765422;
  border-color: #765422;
  color: #fff;
}

.btn-primary:focus-visible {
  outline: 3px solid #1C2B39;
  outline-offset: 2px;
}

/*
 * Kartu: GARIS, tanpa bayangan (keputusan client 2026-09-19, opsi B).
 *
 * Versi rencana 41 menulis `border: 0` dan menyandarkan tepi kartu pada
 * bayangan saja. Di atas latar #F7F4EE yang hampir putih, bayangan setipis itu
 * nyaris tidak terlihat — dan ia hal pertama yang hilang saat halaman
 * diproyeksikan di ruang rapat. Garis tidak pernah hilang.
 *
 * Bayangan juga dilepas, bukan sekadar ditambah garis: formulir kontrak memuat
 * tiga kartu berturut-turut, dan bayangan bertumpuk membuat halaman terasa
 * berat tanpa menambah keterbacaan.
 */
.card {
  /*
   * ⚠ KEDUA RADIUS, sekali lagi. Aturan .card di atas berkas ini sudah
   * memperingatkannya, dan versi pertama aturan INI tetap melanggarnya:
   * radius luar dinaikkan ke 16 px sementara --bs-card-inner-border-radius
   * tertinggal di 9 px, sehingga .card-header putih menyembul keluar dari
   * lengkung kartu — sudut kiri-atas dan kanan-atas terlihat terputus.
   * Dilaporkan client 2026-09-19 di /master/program/baru.
   *
   * Rumus dalamnya mengikuti Bootstrap: radius luar dikurangi tebal garis.
   */
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: calc(1rem - 1px);
  border: 1px solid #E7E0D3;
  border-radius: var(--bs-card-border-radius);
  box-shadow: none;
}

/* ==========================================================================
 * Baris Alat DataTables: "Tampilkan N baris" dan Kotak Cari
 * Menyesuaikan 100% dengan gaya mockup referensi (contoh_aja/image.png):
 *  - Sudut rapi border-radius: 4px (bukan pill/rounded 10px yang kaku)
 *  - Garis batas halus border: 1px solid #D9CEBC
 *  - padding-right: 1.85rem pada select agar angka pilihan (10, 25, 50, 100)
 *    TIDAK PERNAH tertutup oleh ikon panah dropdown (chevron)
 *  - Kotak cari berlebar proporsional (380px) agar placeholder terbaca utuh
 *    tanpa terpotong dan seimbang dengan tinggi kontrol di sebelah kirinya
 * ========================================================================== */
.dataTables_wrapper .dataTables_length select,
div.dt-container div.dt-length select,
.dt-container .dt-length select {
  border: 1px solid #D9CEBC;
  border-radius: 4px;
  padding: 0.25rem 1.85rem 0.25rem 0.6rem !important;
  font-size: 0.8125rem;
  line-height: 1.5;
  background-color: #fff;
  color: #1C2B39;
  min-width: 4.2rem;
  height: calc(1.5em + 0.5rem + 2px);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dataTables_wrapper .dataTables_length select:focus,
div.dt-container div.dt-length select:focus,
.dt-container .dt-length select:focus {
  border-color: #BD8B40;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(184, 134, 59, 0.2);
}

.dataTables_wrapper .dataTables_filter input,
div.dt-container div.dt-search input,
.dt-container .dt-search input {
  width: 420px;
  min-width: 380px;
  max-width: 100%;
  border: 1px solid #D9CEBC;
  border-radius: 4px;
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  height: calc(1.5em + 0.5rem + 2px);
  background-color: #fff;
  color: #1C2B39;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dataTables_wrapper .dataTables_filter input:focus,
div.dt-container div.dt-search input:focus,
.dt-container .dt-search input:focus {
  border-color: #BD8B40;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(184, 134, 59, 0.2);
}

@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_filter input,
  div.dt-container div.dt-search input,
  .dt-container .dt-search input {
    width: 100%;
    min-width: 100%;
  }
}

/* Kolom NIP pada Master Pelaku Pengadaan:
 * NIP adalah nomor identitas 18 digit (bukan besaran angka matematis).
 * Memastikan judul kolom dan sel NIP tetap rata kiri secara konsisten
 * meski DataTables 2 menyematkan .dt-type-numeric saat hasil pencarian berisi baris digit.
 */
table[data-tabel="konfig-tabel-pelaku"] th:first-child,
table[data-tabel="konfig-tabel-pelaku"] td:first-child {
  text-align: left !important;
}

/* Perataan judul kolom (aturan client 2026-10-10, menggantikan "semua judul rata
 * kiri" warisan kontrak): judul MENGIKUTI isinya — nominal uang rata kanan di
 * judul maupun isi; teks, bulan, dan status rata kiri. */

/* ==========================================================================
 *  Pagination DataTables (Rencana 89: Opsi 1 Modern Clean Pill)
 * ==========================================================================
 *  Bentuk kapsul membulat 50px, navigasi chevron ramping « ‹ › »,
 *  halaman aktif amber #BD8B40 dengan warm glow elevation shadow,
 *  pemisah elipsis borderless, dan hover krem-emas #F8F1E2.
 * ========================================================================== */
.pagination {
  margin: 0;
  gap: 5px;
  align-items: center;
}

.pagination .page-item {
  margin: 0;
}

.pagination .page-link {
  border-radius: 50px !important;
  min-width: 36px;
  height: 36px;
  padding: 0 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  background: #ffffff;
  border: 1px solid #D6CCBB;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pagination .page-link:hover {
  background: #F8F1E2;
  border-color: #BD8B40;
  color: #1C2B39;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(184, 134, 59, 0.2);
}

.pagination .page-item.active .page-link {
  background: #BD8B40 !important;
  border-color: #BD8B40 !important;
  color: #1C2B39 !important;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(184, 134, 59, 0.35);
  transform: translateY(-1px);
}

.pagination .page-item.disabled .page-link {
  background: #FAF8F3 !important;
  border-color: #E6DFD2 !important;
  color: #D6CCBB !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

.pagination .page-item.disabled .page-link.ellipsis {
  background: transparent !important;
  border: none !important;
  color: #A39888 !important;
  min-width: 24px;
  padding: 0;
  font-weight: bold;
  opacity: 1;
}

.pagination .page-link.first,
.pagination .page-link.previous,
.pagination .page-link.next,
.pagination .page-link.last {
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 600;
}

.dt-info {
  font-size: 0.875rem;
  color: #76695C;
}

/* ==========================================================================
 *  Kosakata tombol (rencana 42, varian 1)
 * ==========================================================================
 *  SATU tombol berisi warna per layar — yang menambah data. Sisanya bergaris.
 *
 *  `.btn-alat` untuk aksi BERKAS: Impor dan Ekspor. Sebelumnya Impor biru
 *  (.btn-outline-primary) dan Ekspor abu (.btn-outline-secondary) — dua warna
 *  untuk dua aksi yang setara, dan tidak ada yang bisa menjelaskan bedanya.
 *
 *  Kelas sendiri, BUKAN menimpa .btn-outline-primary: kelas itu juga dipakai
 *  tombol "Ubah" di halaman detail, yang bukan aksi berkas.
 * ========================================================================== */
.btn-alat {
  background: #fff;
  border: 1px solid #D3C8B5;
  color: #2D4154;
  font-weight: 600;
}

.btn-alat:hover,
.btn-alat:focus {
  background: #F2EEE6;
  border-color: #2D4154;
  color: #1C2B39;
}

.btn-alat:focus-visible {
  outline: 3px solid #2D4154;
  outline-offset: 2px;
}

/* ==========================================================================
 *  Baris aksi formulir sebagai KARTU TERSENDIRI (rencana 43, varian 4)
 * ==========================================================================
 *  Aksi dipisahkan dari isian: kartu isian selesai, lalu ada zona keputusan.
 *  Baris aksi yang menempel DI DALAM kartu isian tidak memberi jeda itu.
 *
 *  `position: sticky; bottom: 1rem` dipilih karena ia BERPERILAKU DUA-DUANYA:
 *  pada formulir pendek ia duduk di tempatnya seperti kartu biasa, dan pada
 *  formulir panjang — kontrak 15 isian, tagihan — ia menempel supaya Simpan
 *  tidak berada tiga layar di bawah. Tidak perlu aturan berbeda per halaman.
 * ========================================================================== */
.aksi-kartu {
  position: sticky;
  bottom: 1rem;
  z-index: 5;
  background: #fff;
  border: 1px solid #E7E0D3;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  gap: 0.6rem;
}

/*
 * Batal: PUTIH BERGARIS, bukan abu berisi.
 *
 * Yang membuatnya aman bersebelahan dengan Simpan bukan bobot warnanya,
 * melainkan JARAKNYA — ia di kiri, aksi maju di kanan. Karena itu ia boleh
 * tetap terlihat sebagai tombol.
 */
.btn-light {
  background: #fff;
  border: 1px solid #D3C8B5;
  color: #2D4154;
  font-weight: 600;
}

.btn-light:hover,
.btn-light:focus {
  background: #F2EEE6;
  border-color: #2D4154;
  color: #1C2B39;
}

/* --- Status kontrak: "Menunggu FHO" -------------------------------------
 *
 * KENAPA KELAS SENDIRI, BUKAN .badge-subtle-info (rencana 44).
 *
 * Status ini dulu memakai .badge-subtle-info, dan kelas itu menanggung LIMA
 * arti lain di aplikasi: tagihan "Terealisasi" (Fmt.php:284 dan
 * tagihan/detail.volt), peran "Verifikator Keuangan" (KontrakController),
 * pelaku "PA" (PelakuController), dan penanda peran "sistem" (RoleController).
 * Mendefinisikan ulang .badge-subtle-info akan menggeser kelimanya diam-diam.
 *
 * KENAPA PLUM, BUKAN BIRU LAIN.
 *
 * Laporan client 2026-09-20: "birunya tipis dengan label Berjalan". Keduanya
 * terukur. Berjalan #3f80ea ada di sudut warna 284,0 dan FHO #1f9bcf di 248,6
 * — terpaut 35,5 derajat, sementara tiap pasangan status LAIN terpaut 75
 * derajat atau lebih. Kromanya pun 38,3 melawan 56-61 milik yang lain, jadi ia
 * memang badge paling pucat dari keempatnya.
 *
 * #B4005F dipilih setelah ruang warna disisir untuk mencari warna yang lolos
 * kontras >= 4,6:1, kroma >= 48, DAN >= 45 derajat dari ketiga status lain.
 * Hanya rumpun plum yang lolos ketiganya: kontras 4,86:1, kroma 65,6, jarak
 * sudut terdekat 74,1 derajat. Ungu sempat dicoba dan GUGUR — #5B4BC4 hanya
 * 18,6 derajat dari biru Berjalan, lebih dekat daripada warna yang dikeluhkan,
 * sebab sudut warna CIE memampat di wilayah biru-ungu.
 *
 * Alpha 0,175 disamakan dengan .badge-subtle-* milik AppStack supaya ia
 * seragam dengan badge status di sebelahnya. Konsekuensinya sama pula: warna
 * dipatok rgba literal dan tidak berbalik saat tema gelap dinyalakan — lihat
 * catatan .badge-subtle-* di kepala berkas ini.
 */
.badge-status-fho {
  background-color: rgba(180, 0, 95, 0.175);
  color: #b4005f;
}

/* --- Dropdown unit organisasi: penanda hierarki ---------------------------
 *
 * Indentasinya sudah digambar ui.js lewat padding (rencana 29). Yang
 * ditambahkan di sini hanya PENANDA, mengikuti mockup select bertingkat
 * (rencana 46): titik kecil untuk unit yang bisa dipilih, dan garis amber
 * tipis di kiri untuk baris yang sedang terpilih.
 *
 * Kenapa bukan blok biru penuh bawaan select2: pada daftar menjorok, blok
 * setinggi baris menelan indentasinya sendiri — struktur yang justru jadi
 * alasan dropdown ini dibuat berhierarki hilang tepat di baris yang sedang
 * dilihat orang.
 *
 * Baris KONTEKS tidak diberi titik: ia bukan pilihan, dan memberinya penanda
 * yang sama dengan pilihan sungguhan hanya mengundang klik yang tidak
 * menghasilkan apa-apa.
 */
.select2-results__option[aria-disabled="true"] {
  cursor: default;
  padding-top: 0.5rem;
  padding-bottom: 0.15rem;
}

.select2-results__option--highlighted[aria-selected="false"],
.select2-results__option--highlighted {
  background-color: #F2EEE6;
  color: #1C2B39;
}

.select2-results__option[aria-selected="true"] {
  position: relative;
  background-color: #F8F1E2;
  color: #1C2B39;
  font-weight: 600;
}

.select2-results__option[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #BD8B40;
}

.select2-results__option[aria-selected="true"]::after {
  content: "\2713";
  position: absolute;
  right: 0.75rem;
  color: #BD8B40;
  font-weight: 700;
}

/* ============================================================================
 * Dashboard Analitik & Alur Penyerapan Anggaran (Rencana 61)
 * ========================================================================= */

.bg-kpi-blue   { background-color: #2176FF !important; }
.bg-kpi-green  { background-color: #00A878 !important; }
.bg-kpi-purple { background-color: #6F42C1 !important; }
.bg-kpi-orange { background-color: #FF8811 !important; }
.bg-kpi-cyan   { background-color: #00B4D8 !important; }

.legend-dot-blue {
  width: 10px;
  height: 10px;
  background-color: #2176FF;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot-green {
  width: 10px;
  height: 10px;
  background-color: #00A878;
  border-radius: 50%;
  display: inline-block;
}

.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12.5px !important; }
.w-40px { width: 40px !important; }

/* Top KPI Cards */
.kpi-card {
  background: #FFFFFF;
  border: 1px solid #E6DFD2;
  border-radius: 12px;
  padding: 1.15rem 1.15rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

/* Aksen Warna Atas Kartu KPI */
.kpi-card-blue { border-top: 3px solid #2176FF !important; }
.kpi-card-green { border-top: 3px solid #00A878 !important; }
.kpi-card-purple { border-top: 3px solid #6F42C1 !important; }
.kpi-card-orange { border-top: 3px solid #FF8811 !important; }

/* Proteksi Header Teks terhadap Watermark */
.card-header-text {
  position: relative;
  z-index: 1;
  padding-right: 28px;
}

/* Format Nilai Rupiah: Rp di atas, Angka di bawah */
.kpi-amount-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0.65rem;
}
.kpi-currency-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #76695C;
  background-color: #F3EFE6;
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 3px;
  line-height: 1.2;
}
.kpi-amount-value {
  font-family: var(--bs-font-monospace);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: #14202B;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kpi-icon-bubble {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.95rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  flex-shrink: 0;
}

.kpi-watermark {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.6rem;
  opacity: 0.045;
  color: #1C2B39;
  pointer-events: none;
  z-index: 0;
}

.kpi-value {
  font-family: var(--bs-font-sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

/* Circular Donut Progress */
.donut-progress-container {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.donut-progress-svg {
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
}
.donut-circle-bg {
  fill: none;
  stroke: #E9ECEF;
  stroke-width: 4;
}
.donut-circle-val {
  fill: none;
  stroke: #00B4D8;
  stroke-width: 4.5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}
.donut-center-text {
  position: absolute;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1C2B39;
  font-family: var(--bs-font-sans-serif);
}

/* Responsivitas Kartu KPI Berdasarkan Resolusi Layar */
@media (max-width: 1440px) {
  .kpi-amount-value {
    font-size: 1.18rem;
  }
  .donut-progress-container,
  .donut-progress-svg {
    width: 48px;
    height: 48px;
  }
  .donut-center-text {
    font-size: 0.68rem;
  }
}

@media (max-width: 1200px) {
  .kpi-amount-value {
    font-size: 1.12rem;
  }
}

@media (max-width: 576px) {
  .kpi-card {
    padding: 1rem 1rem;
  }
  .kpi-amount-value {
    font-size: 1.25rem;
  }
}

/* Funnel Chart Styling */
.funnel-container {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}
.funnel-tier {
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%);
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  position: relative;
}
.funnel-tier:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
}
.funnel-tier-1 { width: 100%; background-color: #2176FF; }
.funnel-tier-2 { width: 88%; background-color: #00A878; }
.funnel-tier-3 { width: 76%; background-color: #FF8811; }
.funnel-tier-4 { width: 64%; background-color: #6F42C1; }

.funnel-tier-val {
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.1;
  font-family: var(--bs-font-sans-serif);
}
.funnel-tier-pct {
  font-size: 0.70rem;
  opacity: 0.9;
  line-height: 1;
}

/* Step Timeline Right Side */
.funnel-steps-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 6px 0 6px 12px;
}
.funnel-step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.step-circle-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}
.step-circle-1 { background-color: #2176FF; }
.step-circle-2 { background-color: #00A878; }
.step-circle-3 { background-color: #FF8811; }
.step-circle-4 { background-color: #6F42C1; }

/* Actionable Items & Task Tables */
.card-task {
  border: 1px solid #E5EDF6;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(17, 34, 68, 0.04);
  background: #FFFFFF;
  overflow: hidden;
}
.card-task .card-header {
  background: #FFFFFF;
  border-bottom: 1px solid #F2EEE6;
  padding: 1.1rem 1.4rem;
}
.task-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #76695C;
  background: #F8FAFD;
  border-bottom: 1px solid #E6DFD2;
  padding: 0.65rem 0.55rem;
  white-space: nowrap;
}
.task-table tbody td {
  font-size: 0.81rem;
  padding: 0.65rem 0.55rem;
  vertical-align: middle;
  border-bottom: 1px solid #F2EEE6;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.task-table th:last-child,
.task-table td:last-child {
  white-space: nowrap !important;
  width: 75px;
  min-width: 65px;
  text-align: center;
}
.task-table .btn-xs {
  white-space: nowrap;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  display: inline-block;
}
/* Catatan Alasan Maksimal 2 Baris dengan Ellipsis (Rencana 77) */
.table-catatan-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  line-height: 1.35;
  max-height: 2.7em;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.card-task .table-responsive {
  scrollbar-width: thin;
  scrollbar-color: #D6CCBB #FAF8F3;
}
.card-task .table-responsive::-webkit-scrollbar {
  height: 6px;
}
.card-task .table-responsive::-webkit-scrollbar-track {
  background: #FAF8F3;
}
.card-task .table-responsive::-webkit-scrollbar-thumb {
  background: #D6CCBB;
  border-radius: 4px;
}

/* Card Header Icon Box & Subtitle Alignment */
.card-header-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Table Currency & Amount Formatting */
.table-currency-label {
  display: block;
  font-size: 0.60rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A39888;
  line-height: 1;
  margin-bottom: 1px;
}
.table-amount-value {
  font-family: var(--bs-font-monospace);
  font-size: 0.82rem;
  font-weight: 700;
  color: #1C2B39;
  line-height: 1.15;
  white-space: nowrap;
}

/* Action button and link effects */
.btn-link-action {
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.btn-link-action:hover {
  transform: translateX(2px);
}

/* ==========================================================================
 * Chart.js Static Styles (Kepatuhan CSP: style-src 'self')
 * Menampung gaya deteksi resize dan monitor render Chart.js secara statis
 * agar Chart.js tidak perlu menginjeksi tag <style> inline ke document.head
 * yang diblokir oleh Content-Security-Policy aplikasi.
 * ========================================================================== */
@keyframes chartjs-render-animation {
  from { opacity: 0.99; }
  to { opacity: 1; }
}

.chartjs-render-monitor {
  animation: chartjs-render-animation 0.001s;
}

.chartjs-size-monitor,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-shrink {
  position: absolute;
  direction: ltr;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  z-index: -1;
}

.chartjs-size-monitor-expand > div {
  position: absolute;
  width: 1000000px;
  height: 1000000px;
  left: 0;
  top: 0;
}

.chartjs-size-monitor-shrink > div {
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
  top: 0;
}

/* ==========================================================================
 * Monitoring Pagu & Sisa Anggaran (Rencana 70)
 * ========================================================================== */
.btn-toggle-expand {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: #ffffff;
  border: 1px solid #D9CEBC;
  color: #4A3F36;
  transition: all 0.15s ease-in-out;
}
.btn-toggle-expand:hover {
  background-color: #F3EFE6;
  border-color: #A39888;
  color: #14202B;
}
tr.shown > td {
  background-color: #FAF8F3 !important;
}

/* ==========================================================================
 * Penjelasan Kriteria Status Kontrak pada Hover Detail (Rencana 73)
 * ========================================================================== */
.badge-status-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: help;
  transition: all 0.2s ease;
  user-select: none;
}
.badge-status-detail:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.popover.popover-status-kontrak {
  --bs-popover-max-width: 430px !important;
  max-width: 430px !important;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #D6CCBB !important;
}
.popover-status-kontrak .popover-header {
  background: #ffffff;
  border-bottom: 1px solid #F3EFE6;
  font-weight: 700;
  font-size: 0.86rem;
  color: #1C2B39;
  padding: 10px 14px;
}
.popover-status-kontrak .popover-body {
  padding: 12px;
  background: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.status-row-card {
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: #FAF8F3;
  border: 1px solid #E6DFD2;
}
.status-row-card.is-active {
  background: #eff6ff;
  border-color: #93c5fd;
}
.status-row-card:last-child {
  margin-bottom: 0;
}
.status-badge-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.status-bullet-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 5px;
}
.status-bullet-list li {
  position: relative;
  padding-left: 14px;
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.45;
  margin-bottom: 3px;
}
.status-bullet-list li:last-child {
  margin-bottom: 0;
}
.status-bullet-list li::before {
  content: "–";
  position: absolute;
  left: 2px;
  color: #A39888;
  font-weight: bold;
}
.status-sim-tag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}


/* SITERANG: tahun Tutup = mode baca saja (tiket 1) */
.capsule-badge-status.capsule-badge-tutup { background: #fdecea; color: #b42318; }

/* SITERANG: tabel bertingkat (Sub Kegiatan, T3) */
.tabel-bertingkat .baris-induk { cursor: pointer; }
.tabel-bertingkat .baris-induk:hover { background: rgba(28, 43, 57, 0.04); }
.tabel-bertingkat .ikon-lipat { transition: transform .15s ease; color: #8A7D6E; }
.tabel-bertingkat .baris-induk.terbuka .ikon-lipat { transform: rotate(90deg); }
.tabel-bertingkat .baris-anak td { background: #FAF8F3; border-top: 0; }
.tabel-rincian td { vertical-align: middle; }
.kolom-uang { min-width: 11rem; }
/* SITERANG: riwayat pengajuan/tagihan (T11, T19) */
.riwayat-daftar .riwayat-baris { position: relative; padding: 0 0 .9rem 1.1rem; border-left: 2px solid #E6DFD2; margin-left: .3rem; }
.riwayat-daftar .riwayat-baris::before { content: ""; position: absolute; left: -6px; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: #D6CCBB; }
.riwayat-daftar .riwayat-kini::before { background: #BD8B40; }
.riwayat-daftar .riwayat-baris:last-child { padding-bottom: 0; }
.info-anggaran { background: #F3EFE6; border-radius: .5rem; padding: .75rem 1rem; }
/* SITERANG: tagihan (T18–T21) */
.badge.badge-subtle-oranye { background: #fff0e0; color: #c2410c; }
.kotak-alasan { background: #fdecef; border: 1px solid #f5c2cb; border-radius: .5rem; padding: .75rem 1rem; color: #7f1d1d; }
.kotak-ringkasan { background: #FAF8F3; border: 1px dashed #D6CCBB; border-radius: .5rem; padding: .75rem 1rem; }
.pilihan-perbaiki { border-bottom: 1px solid #EFEBE3; padding: .5rem 0; }
.detail-baca dt { font-weight: 500; color: var(--bs-secondary-color); }
.detail-baca dd { font-size: 1rem; }
/* SITERANG: laporan (T30–T36) */
.ringkasan-laporan { font-weight: 600; text-align: right; }
.tabel-lebar th, .tabel-lebar td { white-space: nowrap; }
.tabel-lebar th:nth-child(1), .tabel-lebar td:nth-child(1) { position: sticky; left: 0; z-index: 2; background: var(--bs-body-bg); min-width: 3.5rem; }
.tabel-lebar th:nth-child(2), .tabel-lebar td:nth-child(2) { position: sticky; left: 3.5rem; z-index: 2; background: var(--bs-body-bg); box-shadow: 1px 0 0 var(--bs-border-color); }
/* SITERANG: dashboard (T40) — warna batang SVG */
/* SITERANG: topbar ponsel — kapsul memadat agar menu pengguna tidak terdorong keluar layar */
@media (max-width: 575.98px) {
  .topbar-context-capsule .capsule-icon-box, .topbar-context-capsule .capsule-badge-role { display: none; }
}
/* SITERANG: ponsel — tombol header kartu membungkus, kotak cari tidak keluar kartu */
.card-header > .ms-auto.d-flex { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 1; min-width: 0; }
@media (max-width: 767.98px) {
  div.dt-container div.dt-search, div.dt-container div.dt-search label { width: 100%; }
  div.dt-container div.dt-search input { min-width: 0; width: 100%; margin-left: 0; }
}
/* Kode & nomor dokumen tidak dipatah di garis miring/tanda hubung */
.table code, .table td.font-monospace { white-space: nowrap; }
/* SITERANG: judul halaman di ponsel (topbar tidak muat) */
.judul-ponsel { font-size: 1.15rem; font-weight: 700; color: var(--bs-emphasis-color); margin: 0 0 .75rem; }
/* Tombol Kembali tidak terlipat */
.btn { white-space: nowrap; }
/* SITERANG: laporan padat — kolom tiket muat tanpa geser di 1440 px (spesifik melawan CSS DataTables) */
table.dataTable.tabel-padat, table.dataTable.tabel-padat td { font-size: .78rem; }
table.dataTable.tabel-padat > thead > tr > th, table.dataTable.tabel-padat > tbody > tr > td { padding: .5rem .3rem; }
table.dataTable.tabel-padat > thead > tr > th { white-space: normal !important; vertical-align: bottom; }
table.dataTable.tabel-padat .badge { white-space: nowrap; }
/* SITERANG: dashboard — ikon kartu & corong alur (mockup v27) */
.ikon-kartu { flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.ikon-pagu { background: #1C2B39; } .ikon-aju { background: #BD8B40; } .ikon-tunggu { background: #A94438; } .ikon-real { background: #3F5D4E; }
.sidebar-jumlah { font-size: .72rem; opacity: .6; font-variant-numeric: tabular-nums; }
/* SITERANG: ponsel — baris tabel tampil sebagai kartu "Label: isi" (label dari siterang.js) */
@media (max-width: 575.98px) {
  table.dataTable:not(.tanpa-kartu), table.tabel-kartu { min-width: 0 !important; width: 100% !important; }
  table.dataTable:not(.tanpa-kartu) > thead, table.tabel-kartu > thead { display: none; }
  table.dataTable:not(.tanpa-kartu) > tbody > tr, table.tabel-kartu > tbody > tr {
    display: block; border: 1px solid var(--bs-border-color); border-radius: .6rem; margin-bottom: .75rem; padding: .35rem .25rem; background: var(--bs-body-bg);
  }
  table.dataTable:not(.tanpa-kartu) > tbody > tr > td, table.tabel-kartu > tbody > tr > td {
    display: flex; gap: .75rem; justify-content: space-between; align-items: flex-start; border: 0 !important;
    padding: .3rem .6rem !important; text-align: right !important; white-space: normal !important;
    position: static !important; box-shadow: none !important; background: transparent !important;
  }
  table.dataTable:not(.tanpa-kartu) > tbody > tr > td::before, table.tabel-kartu > tbody > tr > td::before {
    content: attr(data-label); flex: 0 0 38%; text-align: left; font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color);
  }
  table.dataTable:not(.tanpa-kartu) > tbody > tr > td:not([data-label])::before,
  table.dataTable:not(.tanpa-kartu) > tbody > tr > td[data-label=""]::before, table.tabel-kartu > tbody > tr > td[data-label=""]::before { content: none; }
  table.dataTable:not(.tanpa-kartu) > tbody > tr > td.dt-empty { display: block; text-align: center !important; }
  table.dataTable:not(.tanpa-kartu) > tbody > tr > td > *, table.tabel-kartu > tbody > tr > td > * { min-width: 0; }
  .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
}
.isi-sel .badge + .badge { margin-left: .25rem; }

/* ==========================================================================
 *  TEMA SITERANG "TINTA EMAS" = warna mockup v27 (dipilih client 2026-10-10)
 *  Tinta #1C2B39 · tinta terang #2D4154 · emas #BD8B40 (mockup #B8863B, dicerahkan sedikit agar teks tinta di atasnya ≥4,5:1) · emas tua #8F672B (tombol & tautan)
 *  kertas #F5F2EA · hutan #3F5D4E · karat #A94438. Warna status tetap semantik.
 *  Menimpa primary biru bawaan AppStack (#3f80ea) agar tidak ada biru tersisa
 *  di tautan, fokus isian, centang, tab, dropdown, dan pagination.
 * ========================================================================== */
:root, [data-bs-theme="light"] {
  --bs-primary: #2D4154;
  --bs-primary-rgb: 45, 65, 84;
  --bs-primary-bg-subtle: #F1E9D6;
  --bs-primary-border-subtle: #DDBF85;
  --bs-primary-text-emphasis: #1C2B39;
  --bs-link-color: #8F672B;
  --bs-link-color-rgb: 143, 103, 43;
  --bs-link-hover-color: #6E4F20;
  --bs-link-hover-color-rgb: 110, 79, 32;
  --bs-focus-ring-color: rgba(184, 134, 59, 0.3);
}
.form-control:focus, .form-select:focus {
  border-color: #BD8B40;
  box-shadow: 0 0 0 0.2rem rgba(184, 134, 59, 0.25);
}
.form-check-input:checked { background-color: #2D4154; border-color: #2D4154; }
.form-check-input:focus { border-color: #BD8B40; box-shadow: 0 0 0 0.2rem rgba(184, 134, 59, 0.25); }
.text-primary { color: #2D4154 !important; }
.bg-primary { background-color: #2D4154 !important; }
.btn-outline-primary { color: #2D4154; border-color: #2D4154; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active {
  color: #fff; background-color: #2D4154; border-color: #2D4154;
}
.nav-tabs .nav-link.active { color: #1C2B39; border-bottom-color: #BD8B40; }
.nav-tabs .nav-link:hover { color: #2D4154; }
.dropdown-item.active, .dropdown-item:active { background-color: #2D4154; color: #fff; }
.page-link { color: #2D4154; }
/* Dropdown select2: sorotan TIPIS, bukan blok warna pekat (QA UI 2026-10-10).
   Disorot = kertas tipis + teks tinta; terpilih = emas tipis + tebal + centang emas. */
.select2-container .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted,
.select2-results__option--highlighted { background-color: #F1ECE2 !important; color: #1C2B39 !important; }
.select2-container .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true],
.select2-results__option[aria-selected="true"] { background-color: #F7EEDB !important; color: #1C2B39 !important; font-weight: 600; }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection { border-color: #BD8B40 !important; }

/* Warna dasar AppStack → teks tinta & latar kertas mockup v27 */
:root, [data-bs-theme="light"] {
  --bs-body-bg: #F7F4EE;
  --bs-body-bg-rgb: 247, 244, 238;
  --bs-body-color: #44505C;
  --bs-body-color-rgb: 68, 80, 92;
  --bs-emphasis-color: #1C2B39;
  --bs-emphasis-color-rgb: 28, 43, 57;
  --bs-heading-color: #1C2B39;
  --bs-border-color: #E3DACB;
}

/* ==========================================================================
 *  QA AKSESIBILITAS (WCAG 2.1 AA, audit 2026-10-10)
 *  Semua teks ≥4,5:1 (teks besar ≥3:1). Yang diperbaiki bawaan AppStack/kontrak:
 *  teks redup #92989e (2,91), lencana biru #3f80ea (2,9–3,1), merah #d9534f
 *  (3,2–4,0), kode merah muda #e83e8c (3,5). Latar dipertahankan, teks digelapkan.
 * ========================================================================== */
:root, [data-bs-theme="light"] {
  --bs-secondary-color: #6E6155;            /* 5,9:1 di atas putih */
  --bs-secondary-color-rgb: 110, 97, 85;
  --bs-danger: #B03A2E;
  --bs-danger-rgb: 176, 58, 46;
  --bs-danger-text-emphasis: #8F2A17;
  --bs-code-color: #8A3D1F;
}
.text-muted, .form-text, .card-subtitle.text-muted { color: #6E6155 !important; }
code { color: #8A3D1F; }
code.text-muted { color: #6E6155 !important; }
.text-danger { color: #A93226 !important; }
.bg-danger { background-color: #B03A2E !important; }
.btn-outline-danger { color: #A93226; border-color: #B03A2E; }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active { color: #fff; background-color: #B03A2E; border-color: #B03A2E; }
.btn-danger { background-color: #B03A2E; border-color: #B03A2E; }
.badge.badge-subtle-primary, .badge.badge-subtle-info { background: #E2ECF6; color: #1F4A75; }
.badge.badge-subtle-danger  { background: #FBE3DD; color: #8F2A17; }
.badge.badge-subtle-success { background: #DCEFD9; color: #24622C; }
.badge.badge-subtle-warning { background: #FCEFD2; color: #7A4E08; }
.badge.badge-subtle-secondary, .badge.badge-subtle-dark { background: #EFEAE1; color: #4A3F36; }
.badge.badge-subtle-oranye  { background: #FFE9D6; color: #9A3412; }
.topbar-context-capsule .chip-tahun-label { color: #6E5A28; }
.masuk-bantuan { color: #6E6155; }
/* Hijau sukses bawaan AppStack #4bbf73 (2,1–2,3:1) → #2E7D4F (5,2:1 dengan putih) */
:root, [data-bs-theme="light"] { --bs-success: #2E7D4F; --bs-success-rgb: 46, 125, 79; }
.text-success { color: #24622C !important; }
.bg-success { background-color: #2E7D4F !important; }
.btn-success { background-color: #2E7D4F; border-color: #2E7D4F; color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: #24622C; border-color: #24622C; color: #fff; }
.btn-outline-success { color: #24622C; border-color: #2E7D4F; }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active { color: #fff; background-color: #2E7D4F; border-color: #2E7D4F; }
/* Kotak cari di dropdown select2 selebar dropdown-nya (QA form 2026-10-10) */
.select2-container .select2-search--dropdown .select2-search__field { width: 100% !important; box-sizing: border-box; }
.select2-container .select2-dropdown { border-color: #BD8B40; }
.select2-container .select2-search--dropdown .select2-search__field:focus { border-color: #BD8B40 !important; outline: 0; box-shadow: 0 0 0 0.2rem rgba(184, 134, 59, 0.25); }

/* ==========================================================================
 *  SISTEM UI SITERANG (dipilih client 2026-10-10)
 *  Fondasi C · Lencana A (kapsul bertitik) · Tabel B (grid padat)
 *  Satu skala: judul halaman 20/600 · judul kartu 16/600 · teks 14 · label 13/500
 *  · keterangan 12 · lencana 12/600 · angka besar 28/600. Jarak kelipatan 4.
 *  Sudut: isian 6 · tombol 8 · kartu 12. Kendali 40 px (sm 32 px).
 * ========================================================================== */

/* --- Tipografi ------------------------------------------------------------ */
body { font-size: 14px; line-height: 1.55; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: 0; color: #1C2B39; }
.navbar-judul-utama { font-size: 20px; font-weight: 600; letter-spacing: 0; color: #1C2B39; }
.card-title, .card-header .card-title, h5.card-title { font-size: 16px; line-height: 24px; font-weight: 600; color: #1C2B39; }
.card-subtitle, h6.card-subtitle { font-size: 12px; line-height: 18px; font-weight: 400; margin-top: 2px; }
.card .h2, .card .h3 { font-size: 28px; line-height: 36px; font-weight: 600; }
.subheader { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }
.small, small { font-size: 12px; }
.form-label { font-size: 13px; font-weight: 500; color: #1C2B39; margin-bottom: 6px; }
.form-text { font-size: 12px; margin-top: 4px; }
.form-control, .form-select { font-size: 14px; min-height: 40px; border-radius: 6px; }
.form-control-sm, .form-select-sm { font-size: 13px; min-height: 32px; border-radius: 6px; }
textarea.form-control { min-height: 0; }
.btn { font-size: 14px; font-weight: 600; border-radius: 8px; }
.btn:not(.btn-sm):not(.btn-lg):not(.btn-close):not(.btn-link) { min-height: 40px; }
.btn-sm { font-size: 13px; font-weight: 600; border-radius: 6px; min-height: 32px; }
.sidebar-link, .sidebar .sidebar-link { font-size: 14px; }
.font-monospace, .text-end { font-variant-numeric: tabular-nums; }
code, .kode, .chip-kode { font-family: var(--siterang-font-kode); font-size: 12px; }

/* --- Lencana status: kapsul bertitik (model A) -----------------------------
 *  Delapan nada makna; kelas lama .badge-subtle-* dipetakan ke nada:
 *  secondary/dark = netral · primary = tinta · info = biru · success = hijau
 *  warning = kuning · danger = merah · oranye · redup (dibatalkan).        */
.badge[class*="badge-subtle-"] {
  --lc-bg: #EFECE6; --lc-fg: #4A4F55; --lc-titik: #8A857C;
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none;
  white-space: nowrap; vertical-align: middle;
  background: var(--lc-bg) !important; color: var(--lc-fg) !important; border: 0;
}
.badge[class*="badge-subtle-"]::before {
  content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--lc-titik);
}
.badge.badge-subtle-primary   { --lc-bg: #E4E9EF; --lc-fg: #1C2B39; --lc-titik: #2D4154; }
.badge.badge-subtle-info      { --lc-bg: #E2EBF5; --lc-fg: #1F4A75; --lc-titik: #2F6DB0; }
.badge.badge-subtle-success   { --lc-bg: #E2F0E5; --lc-fg: #1F6235; --lc-titik: #2E8B4E; }
.badge.badge-subtle-warning   { --lc-bg: #FBF0D9; --lc-fg: #7A5108; --lc-titik: #C08A28; }
.badge.badge-subtle-danger    { --lc-bg: #FBE5E1; --lc-fg: #9A2E1E; --lc-titik: #C4412F; }
.badge.badge-subtle-oranye    { --lc-bg: #FDECDD; --lc-fg: #934210; --lc-titik: #D9772E; }
.badge.badge-subtle-redup     { --lc-bg: #F1EFEC; --lc-fg: #6B665E; --lc-titik: #A39E95; }
.badge.badge-subtle-secondary, .badge.badge-subtle-dark { --lc-bg: #EFECE6; --lc-fg: #4A4F55; --lc-titik: #8A857C; }
.badge.badge-status-fho { --lc-bg: #E4E9EF; --lc-fg: #1C2B39; --lc-titik: #2D4154; }

/* Penanda tambahan (bukan status): Direvisi */
.penanda-revisi { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #8F672B; white-space: nowrap; vertical-align: middle; }
.penanda-revisi svg { width: 12px; height: 12px; }

/* --- Chip: label/tag/kode — BUKAN status, jadi tanpa titik & netral -------- */
.chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px;
  background: #F1ECE2; color: #44505C; font-size: 11px; font-weight: 600; line-height: 1;
  white-space: nowrap; vertical-align: middle; letter-spacing: 0;
}
.chip-kode { font-weight: 500; font-size: 11px; }
.chip-merah { background: #FBE5E1; color: #9A2E1E; }
.chip-emas  { background: #F3E7CD; color: #7A5108; }
.chip-tinta { background: #E4E9EF; color: #1C2B39; }

/* --- Kapsul topbar & angka sidebar ---------------------------------------- */
.capsule-badge-role, .capsule-badge-status {
  display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1;
}
.capsule-badge-role { background: #F3E7CD; color: #7A5108; }
.capsule-badge-status { background: #E2F0E5; color: #1F6235; }
.sidebar-badge, .badge.sidebar-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #BD8B40 !important; color: #1C2B39 !important; font-size: 11px; font-weight: 700;
}

/* --- Tabel model B: grid padat --------------------------------------------- */
.table {
  --bs-table-striped-bg: #FBF9F5; --bs-table-hover-bg: #F5EFE3; --bs-table-border-color: #EFEAE0;
  font-size: 13px; color: #1C2B39;
  border: 1px solid #E4DED2; border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.table > thead > tr > th, .table > thead > tr > td {
  background: #F3EFE6 !important; color: #44505C; font-size: 12px; font-weight: 600; line-height: 16px;
  padding: 10px 14px; border-bottom: 1px solid #DAD3C2; vertical-align: bottom; text-transform: none; letter-spacing: 0;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th {
  padding: 8px 14px; line-height: 18px; border-bottom: 1px solid #EFEAE0; height: 40px;
}
.table > :not(caption) > tr > :not(:first-child) { border-left: 1px solid #EFEAE0; }
.table > thead > tr > :not(:first-child) { border-left-color: #E4DED2; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table > tfoot > tr > * { background: #F3EFE6; font-weight: 600; border-top: 1px solid #DAD3C2; }
.table .fw-semibold, .table .fw-bold { font-weight: 500; }
.table .small, .table small, .table .text-muted.small { font-size: 12px; line-height: 16px; }
.table td, .table th { font-variant-numeric: tabular-nums; }
.table-sm > :not(caption) > tr > * { padding: 6px 12px; height: 34px; }
/* Tabel tanpa bingkai (di dalam kartu yang sudah bertepi/menempel penuh) */
.card > .table, .card > .table-responsive > .table, .card-body.p-0 > .table, .card-body.p-0 > .table-responsive > .table { border: 0; border-radius: 0; }
.dt-container .table { margin-top: 4px; }
/* DataTables mewarnai baris ganjil rgba abu-abu tembus pandang; Tabel B memakai zebra kertas yang pekat. */
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * { background: #FBF9F5; }
table.dataTable thead th.text-end, table.dataTable thead td.text-end { text-align: right; }

/* --- Tabel isian komponen gaji (Tabel B) ----------------------------------- */
.card > .table-responsive > .tabel-komponen > thead > tr > th:first-child,
.card > .table-responsive > .tabel-komponen > tbody > tr > td:first-child { padding-left: 20px; }
.card > .table-responsive > .tabel-komponen > thead > tr > th:last-child,
.card > .table-responsive > .tabel-komponen > tbody > tr > td:last-child { padding-right: 20px; }
.tabel-komponen td code { display: block; margin-top: 2px; font-size: 12px; }
.tabel-komponen .kolom-uang { width: 210px; }
.tabel-komponen input.form-control:disabled {
  background: transparent !important; border-color: transparent !important; box-shadow: none;
  color: #1C2B39 !important; -webkit-text-fill-color: #1C2B39; font-weight: 500; padding-right: 0; cursor: default;
}
.tabel-komponen input.form-control:disabled::placeholder { color: #A39E95; -webkit-text-fill-color: #A39E95; }
.tabel-komponen-total {
  display: flex; justify-content: flex-end; align-items: center; gap: 24px;
  padding: 12px 20px; background: #F3EFE6; border-top: 1px solid #DAD3C2;
  border-radius: 0 0 var(--bs-card-inner-border-radius, 11px) var(--bs-card-inner-border-radius, 11px);
}
.tabel-komponen-total .label-total { font-size: 13px; font-weight: 500; color: #44505C; }
.tabel-komponen-total .nilai-total { font-size: 16px; font-weight: 700; color: #1C2B39; min-width: 170px; text-align: right; }

/* Kolom tabel lebar (Tabel B): uraian tidak terpecah per kata, batang kemajuan ringkas. */
.table td.kolom-uraian { min-width: 220px; }
.table td.kolom-kemajuan { width: 132px; min-width: 132px; }
.table td.kolom-kemajuan .kemajuan-alur { min-width: 48px; }
@media (max-width: 575.98px) {
  .table td.kolom-uraian, .table td.kolom-kemajuan { min-width: 0; width: auto; }
}

/* Sel aksi: label status + tombol "⋯" (Tabel B). */
.sel-aksi { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn-aksi {
  width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #E4DED2; border-radius: 6px; background: #fff; color: #44505C;
}
.btn-aksi svg { width: 16px; height: 16px; }
.btn-aksi:hover, .btn-aksi[aria-expanded="true"] { background: #F3EFE6; border-color: #DAD3C2; color: #1C2B39; }
.btn-aksi:focus-visible { outline: 2px solid #8F672B; outline-offset: 2px; }
.dropdown-menu form { margin: 0; }
/* Animasi dropdown AppStack (fill-mode forwards) menimpa transform Popper: menu baris jatuh ke pojok layar. */
.btn-aksi + .dropdown-menu.show { animation: none; }
.dropdown-menu .dropdown-item.text-danger:hover { background: #FBE5E1; color: #9A2E1E !important; }

/* Tabel rapat: daftar dengan banyak kolom (Kontrak, T12). Padding sel lebih
 * sempit, dan kolom Aksi menempel di kanan bila tabel tetap lebih lebar dari
 * wadahnya — tombol aksi tidak pernah hilang di balik gulir horizontal. */
@media (min-width: 576px) {
  .table.tabel-rapat { overflow: visible; }
  .table.tabel-rapat > thead > tr > *, .table.tabel-rapat > tbody > tr > * { padding-left: 10px; padding-right: 10px; }
  .tabel-rapat td.kolom-kemajuan { width: 88px; min-width: 88px; }
  .tabel-rapat .kemajuan { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .tabel-rapat .kemajuan-alur { min-width: 0; }
  .tabel-rapat .kemajuan-angka { font-size: 12px; line-height: 16px; }
  .tabel-rapat td.kolom-uraian { min-width: 200px; }
  .tabel-rapat > :not(caption) > tr > :last-child {
    position: sticky; right: 0; z-index: 1;
    background-color: #fff;
    box-shadow: -6px 0 8px -6px rgba(28, 43, 57, .18);
  }
  .tabel-rapat > thead > tr > :last-child { background-color: #F3EFE6 !important; }
}

/* Menu aksi yang terbuka harus di atas paginasi: sel sticky membentuk konteks tumpukan sendiri. */
.table > tbody > tr > td:has(.dropdown-menu.show) { z-index: 1060 !important; }

/* Ponsel (kartu): Tabel B menetapkan tinggi sel 40px dan display tabel — di mode kartu
 * sel adalah baris flex dan tabel harus blok penuh, kalau tidak isi dua baris saling menumpuk. */
@media (max-width: 575.98px) {
  table.dataTable:not(.tanpa-kartu), table.tabel-kartu { display: block; border: 0; border-radius: 0; overflow: visible; }
  table.dataTable:not(.tanpa-kartu) > tbody, table.tabel-kartu > tbody { display: block; }
  table.dataTable:not(.tanpa-kartu) > tbody > tr > td, table.tabel-kartu > tbody > tr > td { height: auto; }
}

/* --- Konsistensi isian (Fondasi C) ----------------------------------------
 * Dua ukuran saja untuk semua kontrol: normal 40px/14px, kecil 32px/13px,
 * radius 6px, garis #E3DACB. select2, kotak cari & jumlah baris DataTables,
 * dan label input-group sebelumnya punya ukuran/garis/radius sendiri-sendiri. */
.select2-container--bootstrap-5 .select2-selection {
  min-height: 40px; font-size: 14px; line-height: 20px; border-color: #E3DACB; border-radius: 6px; background-color: #fff;
}
.select2-container--bootstrap-5 .select2-selection--single { padding: 9px 36px 9px 12px; background-position: right 12px center; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { line-height: 20px; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: #6E6155; }
.select2-container--bootstrap-5 .select2-selection--multiple { padding: 5px 12px; }
.select2-container .select2-selection--single { height: auto; }
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection { min-height: 32px; font-size: 13px; line-height: 18px; border-radius: 6px; }
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single { padding: 6px 32px 6px 10px; background-position: right 10px center; }
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { line-height: 18px; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: #BD8B40; box-shadow: 0 0 0 0.2rem rgba(184, 134, 59, 0.25); }
.select2-container--bootstrap-5 .select2-dropdown { font-size: 14px; border-radius: 6px; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option { padding: 8px 12px; }
div.dt-container div.dt-search input, div.dt-container div.dt-length select { border-color: #E3DACB; border-radius: 6px; }
.input-group-text { font-size: 14px; border-color: #E3DACB; }
.input-group-sm > .input-group-text { font-size: 13px; }
.input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.select2-container--bootstrap-5.select2-container--disabled .select2-selection { border-color: #E3DACB; }
/* Isian terkunci/terhitung: latar kertas hangat, bukan abu-biru bawaan. */
.form-control:disabled, .form-control[readonly], .form-select:disabled,
.select2-container--bootstrap-5.select2-container--disabled .select2-selection { background-color: #F3EFE6; color: #44505C; }

/* --- Tombol model A "Emas tegas + garis" (dipilih client 2026-10-10) -------
 * Empat peran saja: PRIMER emas tua pekat · SEKUNDER putih bergaris tipis ·
 * TEKS emas tua · BAHAYA merah karat (garis; pekat hanya di dialog konfirmasi).
 * Varian Bootstrap lain dipetakan ke peran itu agar tidak ada lagi tujuh warna
 * garis berbeda (abu Bootstrap, merah #d9534f, kuning lama, dst.). */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 8px; --bs-btn-font-size: 14px; min-height: 40px;
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(184, 134, 59, 0.3);
  --bs-btn-disabled-bg: #EDE8DE; --bs-btn-disabled-border-color: #EDE8DE; --bs-btn-disabled-color: #A39E95; --bs-btn-disabled-opacity: 1; }
.btn-sm, .btn-group-sm > .btn { --bs-btn-border-radius: 6px; --bs-btn-font-size: 13px; min-height: 32px; }
.btn.btn-primary, .btn.btn-success, .btn.btn-sipk {
  --bs-btn-bg: #8F672B; --bs-btn-border-color: #8F672B; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #765422; --bs-btn-hover-border-color: #765422; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #654818; --bs-btn-active-border-color: #654818; --bs-btn-active-color: #fff;
  background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.btn.btn-primary:hover, .btn.btn-success:hover, .btn.btn-sipk:hover { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: #fff; }
.btn.btn-alat, .btn.btn-light, .btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-success, .btn.btn-outline-warning, .btn.btn-secondary {
  --bs-btn-bg: #fff; --bs-btn-border-color: #DAD3C2; --bs-btn-color: #1C2B39;
  --bs-btn-hover-bg: #F3EFE6; --bs-btn-hover-border-color: #CFC6B2; --bs-btn-hover-color: #1C2B39;
  --bs-btn-active-bg: #EBE5D8; --bs-btn-active-border-color: #CFC6B2; --bs-btn-active-color: #1C2B39;
  background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.btn.btn-alat:hover, .btn.btn-light:hover, .btn.btn-outline-primary:hover, .btn.btn-outline-secondary:hover, .btn.btn-outline-success:hover,
.btn.btn-outline-warning:hover, .btn.btn-secondary:hover { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: #1C2B39; }
.btn.btn-outline-danger {
  --bs-btn-bg: #fff; --bs-btn-border-color: #E3B9B2; --bs-btn-color: #A94438;
  --bs-btn-hover-bg: #FBE5E1; --bs-btn-hover-border-color: #D99A90; --bs-btn-hover-color: #8E3329;
  --bs-btn-active-bg: #F6D3CC; --bs-btn-active-border-color: #D99A90; --bs-btn-active-color: #8E3329;
  background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.btn.btn-outline-danger:hover { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: #8E3329; }
.btn.btn-danger {
  --bs-btn-bg: #A94438; --bs-btn-border-color: #A94438; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8E3329; --bs-btn-hover-border-color: #8E3329; --bs-btn-hover-color: #fff;
  background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: #fff;
}
.btn.btn-danger:hover { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: #fff; }
.btn.btn-link { --bs-btn-color: #8F672B; --bs-btn-hover-color: #654818; color: #8F672B; font-weight: 600; text-decoration: none; }
.btn.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  background-color: #EDE8DE !important; border-color: #EDE8DE !important; color: #A39E95 !important; opacity: 1;
}
.btn-close { min-height: 0; }
/* Isi tombol selalu di tengah tinggi 40/32px, dan tombol bersebelahan sejajar (mis. Ubah + Hapus nonaktif). */
.btn:not(.dropdown-toggle-split) { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.btn.w-100, .btn.d-block { display: flex; }
td > .d-inline-block, td > form.d-inline { vertical-align: middle; }
.btn { gap: 8px; }
.btn > i[class*="me-"], .btn > svg[class*="me-"], .btn > span[class*="me-"] { margin-right: 0 !important; }

/* Multi-select select2: chip krem rapi dalam satu kotak 40px, kolom cari menyatu tanpa bingkai. */
.select2-container--bootstrap-5 .select2-selection--multiple { padding: 6px 10px; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: 0; padding: 0 8px;
  background: #F1ECE2; border: 0; border-radius: 6px; color: #1C2B39; font-size: 13px; font-weight: 500;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: #6E6155; font-size: 16px; line-height: 1;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover { color: #A94438; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline { flex: 1 1 120px; min-width: 120px; margin: 0; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field:focus {
  width: 100% !important; height: 26px; margin: 0; padding: 0 2px; border: 0 !important; box-shadow: none !important; outline: 0; background: transparent; font-size: 14px;
}

/* Kepala simetris: blok merek sidebar dan topbar sama tinggi (80px) dan garis emas 3px
 * menyambung dari tepi kiri sampai kanan, bukan dua garis yang meleset 4px. */
@media (min-width: 992px) {
  .sidebar-brand { box-sizing: border-box; height: 80px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center;
    border-bottom: 3px solid #BD8B40 !important; }
  .main > .navbar.navbar-bg { box-sizing: border-box; height: 80px; min-height: 80px; padding-top: 0; padding-bottom: 0; }
}

/* Grafik dashboard (Chart.js): wadah bertinggi tetap, kanvas mengisi. */
.grafik-wadah { position: relative; width: 100%; min-height: 220px; }
.grafik-alur { height: 300px; }
.grafik-donat { height: 200px; max-width: 220px; margin: 0 auto; min-height: 0; }

/* Kolom angka (rata kanan): ikon urut pindah ke KIRI judul, supaya judul rata
 * tepat dengan digit di bawahnya (kaidah tabel: angka & judulnya rata kanan). */
table.dataTable thead > tr > th.text-end:is(.dt-orderable-asc, .dt-orderable-desc, .dt-ordering-asc, .dt-ordering-desc) { padding-right: 14px; padding-left: 30px; }
table.dataTable.tabel-rapat thead > tr > th.text-end:is(.dt-orderable-asc, .dt-orderable-desc, .dt-ordering-asc, .dt-ordering-desc) { padding-right: 10px; }
table.dataTable thead > tr > th.text-end:is(.dt-orderable-asc, .dt-orderable-desc, .dt-ordering-asc, .dt-ordering-desc) span.dt-column-order { right: auto; left: 12px; }

/* --- Daftar keterangan (halaman detail) ------------------------------------
 * Kolom label tetap 200px (bukan 25% layar), garis tipis per baris supaya mata
 * bisa menyusuri label → nilai, label redup 13px, nilai tinta 14px. */
dl.detail-baca.row { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 0; --bs-gutter-x: 0; }
dl.detail-baca.row > dt, dl.detail-baca.row > dd {
  width: auto; max-width: none; margin: 0; padding: 10px 0; border-bottom: 1px solid #F1ECE2;
  font-size: 14px; line-height: 20px;
}
dl.detail-baca.row > dt { padding-right: 16px; font-size: 13px; font-weight: 500; color: #6E6155; }
dl.detail-baca.row > dd { color: #1C2B39; }
dl.detail-baca.row > :nth-last-child(-n+2) { border-bottom: 0; }
dl.detail-baca.row > dd .font-monospace, dl.detail-baca.row > dd.font-monospace { font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
  dl.detail-baca.row { grid-template-columns: minmax(0, 1fr); }
  dl.detail-baca.row > dt { padding-bottom: 0; border-bottom: 0; }
  dl.detail-baca.row > dd { padding-top: 2px; }
}

/* Kepala kartu: satu garis pemisah, jarak sama di semua kartu. */
.card > .card-header { padding: 16px 20px; border-bottom: 1px solid #EFEAE0; background: transparent; }
.card > .card-header + .card-body { padding-top: 12px; }

/* --- Pesan & alert model C (dipilih client 2026-10-10) ----------------------
 * Di dalam halaman: gaya A — latar lembut + garis kiri 4px berwarna, ikon
 * berwarna tanpa blok, teks tinta-warna ≥ 4,5:1. Berlaku untuk markup flash
 * (.alert > .alert-icon + .alert-message) MAUPUN <div class="alert"> polos.
 * Pesan "berhasil" dipindah siterang.js menjadi toast tinta (.alert-toast). */
.alert {
  --a-bg: #E6EEF7; --a-fg: #1F4A75; --a-aksen: #2F6DB0;
  display: flex; align-items: flex-start; gap: 12px; position: relative;
  padding: 12px 16px 12px 14px; margin-bottom: 16px;
  background: var(--a-bg) !important; color: var(--a-fg);
  border: 0; border-left: 4px solid var(--a-aksen); border-radius: 0 8px 8px 0;
  font-size: 14px; line-height: 20px; box-shadow: none;
}
.alert-success { --a-bg: #E7F2EA; --a-fg: #1F6235; --a-aksen: #2E7D4F; }
.alert-info, .alert-primary { --a-bg: #E6EEF7; --a-fg: #1F4A75; --a-aksen: #2F6DB0; }
.alert-warning { --a-bg: #FBF1DC; --a-fg: #6E4A07; --a-aksen: #C08A28; }
.alert-danger { --a-bg: #FBE7E3; --a-fg: #8E2A1C; --a-aksen: #C4412F; }
.alert-secondary, .alert-light { --a-bg: #F3EFE6; --a-fg: #44505C; --a-aksen: #8A857C; }
.alert > .alert-icon {
  flex: 0 0 auto; width: auto; padding: 0; margin: 0; background: none !important;
  color: var(--a-aksen); font-size: 16px; line-height: 20px; border: 0;
}
.alert > .alert-message { flex: 1 1 auto; min-width: 0; padding: 0; margin: 0; border: 0; background: none; color: inherit; }
.alert .alert-heading { color: inherit; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.alert a:not(.btn) { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.alert hr { border-color: currentColor; opacity: .2; }
.alert.py-2 { padding-top: 8px; padding-bottom: 8px; }

/* Toast: pesan berhasil, pojok kanan atas, hilang sendiri (siterang.js). */
.toast-wadah {
  position: fixed; top: 96px; right: 24px; z-index: 1085;
  display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.alert.alert-toast {
  pointer-events: auto; margin: 0; padding: 12px 10px 12px 14px;
  background: #1C2B39 !important; color: #F3EFE6; border-left: 0; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(28, 43, 57, .28); animation: toast-masuk .2s ease-out;
}
.alert.alert-toast > .alert-icon { color: #6FC28E; }
.alert.alert-toast > .alert-message { color: #F3EFE6; }
.alert.alert-toast .tutup-toast {
  flex: 0 0 auto; margin: -2px 0 0 4px; padding: 0 6px; border: 0; border-radius: 6px; background: none;
  color: #D9D3C7; font-size: 20px; line-height: 24px; cursor: pointer;
}
.alert.alert-toast .tutup-toast:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.alert.alert-toast .tutup-toast:focus-visible { outline: 2px solid #BD8B40; outline-offset: 1px; }
.alert.alert-toast.keluar { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
@keyframes toast-masuk { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .alert.alert-toast { animation: none; } .alert.alert-toast.keluar { transition: none; } }
@media (max-width: 991.98px) { .toast-wadah { top: 72px; right: 16px; } }

/* Beberapa chip dalam satu sel: jarak 4px mendatar DAN menurun saat membungkus. */
.grup-chip { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
/* Tombol berderet di sel tabel: jarak tetap 6px, tidak bergantung spasi di HTML. */
td > :is(.btn, form, .d-inline-block) + :is(.btn, form, .d-inline-block) { margin-left: 6px; }
td.w-1 { white-space: nowrap; }

/* --- Huruf campuran: Poppins untuk judul, nama halaman, merek, angka besar ---
 * Isi, tabel, form, lencana, tombol, dan grafik tetap IBM Plex Sans (padat, angka tabular). */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .navbar-judul-utama, .judul-ponsel, .sidebar-brand, .sidebar-brand *,
.masuk-judul, .kpi-value, .modal-title { font-family: var(--siterang-font-judul); }
.masuk-bantuan { text-wrap: balance; }