/* This file is reserved for overriding and extending the template styles. */

.select2-container--bootstrap4 .select2-results__group {
    color: var(--eu-teks-2);
    font-weight: 600;
    padding: 6px 12px;
    background-color: transparent;
    border-bottom: 1px solid var(--separator);
    margin-top: 4px;
    font-size: var(--t-note);
    line-height: var(--t-note-lh);
}

/* Optional: Style the options within a group to be indented */
.select2-container--bootstrap4 .select2-results__option .select2-results__option {
    padding-left: 18px;
}

/* =========================================================================
   ARTHA 2026, penyegaran warna dan kartu dashboard
   -------------------------------------------------------------------------
   Ruang dan kelembutan mengikuti cara Apple, ketegasan struktur dan warna
   mengikuti Microsoft Fluent 2. Ditulis di sini, bukan di styles.css, karena
   berkas ini memang disediakan template untuk override dan dimuat paling
   akhir. Menghapus blok ini mengembalikan tampilan lama sepenuhnya.

   Selektor html[data-color] dipakai supaya menang atas
   html[data-color=light-sky] milik template: spesifisitasnya sama, tapi
   berkas ini dimuat belakangan. Berlaku untuk semua pilihan tema.
   ========================================================================= */

html[data-color] {
  /* Navy ini bukan pilihan baru: template sudah memakainya di 230 tempat yang
     di-hardcode, dan warnanya sama dengan wordmark di logo Euforia. Menyamakan
     variabel ke nilai itu membuat kartu baru serasi dengan tombol, sidebar, dan
     badge yang sudah ada, tanpa perlu menimpa satu per satu. */
  /* Ditulis sebagai triplet, bukan hex, karena template memakai keduanya:
     var(--primary) di sebagian aturan dan rgba(var(--primary-rgb), 1) di
     sebagian lain, misalnya garis kolom isian saat fokus. Kalau cuma hex-nya
     yang ditukar, separuh aplikasi berubah warna dan separuhnya tidak. */
  --primary-rgb: 29, 61, 88;
  --primary: rgb(var(--primary-rgb));
  --secondary-rgb: 15, 122, 128;
  --secondary: rgb(var(--secondary-rgb));
  --tertiary-rgb: 113, 96, 168;
  --tertiary: rgb(var(--tertiary-rgb));
  --quaternary-rgb: 16, 124, 65;
  --quaternary: rgb(var(--quaternary-rgb));

  --primary-darker: #16304a;
  --secondary-darker: #0c6166;
  --tertiary-darker: #5b4d8b;
  --quaternary-darker: #0d6334;

  /* Peran lain ditulis sebagai triplet dengan alasan yang sama seperti
     primary. Template memakai rgba(var(--<peran>-rgb), .15) untuk latar lunak
     alert dan chip, dan triplet itu tidak ikut ditukar waktu hex-nya diganti,
     jadi teksnya memakai palet Artha sementara latarnya masih hijau toska
     Acorn. Hex-nya sekarang dirakit dari tripletnya supaya tidak bisa
     berpisah lagi. */
  --danger-rgb: 180, 40, 60;
  --danger: rgb(var(--danger-rgb));
  --danger-darker: #8f1f30;
  --success-rgb: 15, 117, 64;
  --success: rgb(var(--success-rgb));
  --success-darker: #0d6334;
  --warning-rgb: 183, 121, 31;
  --warning: rgb(var(--warning-rgb));
  --warning-darker: #935f18;
  --info-rgb: 42, 100, 153;
  --info: rgb(var(--info-rgb));
  --info-darker: #245785;

  --background: #eaeff4;
  --foreground: #ffffff;
  --background-theme: #ffffff;
  --background-light: #f2f4f7;

  --body: #3f4757;
  --alternate: #556074;
  --muted: #626d7d;
  --separator: #e4e7ec;
  --separator-light: #eef1f5;

  --light-text: #ffffff;
  --dark-text: #1b1f26;

  /* Token sendiri untuk teks yang paling kuat dan untuk bayangan kartu.
     --dark-text milik template berarti "warna gelap", bukan "teks utama", dan
     template menahannya di #191c1f pada semua tema termasuk yang gelap. Kalau
     dipakai langsung, angka saldo jadi hitam di atas latar hitam. */
  --eu-teks-kuat: var(--dark-text);
  --eu-bayang: 0 .3px .9px rgba(16, 24, 40, .06), 0 2px 6px -2px rgba(16, 24, 40, .10);
}

/* Tema gelap bawaan template tetap dihormati, nadanya diselaraskan ke navy
   yang sama dengan wordmark Artha, bukan abu netral. Tidak ada satu pun
   aturan di bawah blok ini yang bercabang per tema: semuanya lewat variabel,
   jadi tampilan terang tidak tersentuh sama sekali. */
html[data-color^="dark-"] {
  --background: #04141f;
  --foreground: #0a2135;
  --background-theme: #08192a;
  --background-light: #0e2739;
  --body: #c3d5e4;
  --alternate: #9db3c7;
  --muted: #8ba3ba;
  --separator: #1e4064;
  --separator-light: #16324e;

  /* Navy #1d3d58 terlalu gelap untuk jadi aksen di atas latar gelap, jadi
     diangkat. Perannya tetap sama: tombol utama, tautan, menu aktif. */
  --primary-rgb: 74, 159, 224;
  --primary: rgb(var(--primary-rgb));
  --primary-darker: #3a86c4;
  --secondary-rgb: 47, 163, 159;
  --secondary: rgb(var(--secondary-rgb));
  --tertiary-rgb: 155, 138, 208;
  --tertiary: rgb(var(--tertiary-rgb));
  --quaternary-rgb: 52, 168, 95;
  --quaternary: rgb(var(--quaternary-rgb));
  --success-rgb: 76, 187, 146;
  --success: rgb(var(--success-rgb));
  --danger-rgb: 232, 122, 95;
  --danger: rgb(var(--danger-rgb));
  --warning-rgb: 224, 163, 60;
  --warning: rgb(var(--warning-rgb));
  --info-rgb: 99, 179, 224;
  --info: rgb(var(--info-rgb));

  --eu-teks-kuat: #e6eef5;
  --eu-bayang: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 20px -12px rgba(0, 0, 0, .65);
}

/* -------------------------------------------------------------------------
   Tambalan tema gelap untuk bagian yang menulis warna terang secara langsung
   -------------------------------------------------------------------------
   Semua di bawah ini dipagari html[data-color^="dark-"], jadi tampilan terang
   tidak tersentuh sama sekali.
   ------------------------------------------------------------------------- */

/* Bar atas. Template mengunci navcolor ke "light" dan warnanya diambil dari
   satu variabel, jadi cukup variabelnya yang ditarik ke permukaan gelap. */
html[data-color^="dark-"] {
  --background-navcolor-light: #08192a;
  --menu-shadow-navcolor: 0 3px 10px rgba(0, 0, 0, .5);
}

/* Hover menu aslinya hitam 5 persen, praktis lenyap di atas latar gelap.
   Ditukar jadi angkatan putih yang cukup terasa, plus teksnya dikuatkan supaya
   ada dua petunjuk sekaligus. Sasarannya dua menu: menu utama di nav dan
   .side-menu di dalam halaman. */
html[data-color^="dark-"] .menu-container .menu a:hover,
html[data-color^="dark-"] .side-menu a:hover,
html[data-color^="dark-"] #nav ul li > a:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--eu-teks-kuat);
  border-radius: 6px;
}

/* Pil menu aktif memakai .bg-primary yang latarnya masih navy hardcode.
   Itu justru bagus di tema gelap: navy pekat jadi permukaan yang naik, dan
   tulisan putih di atasnya terbaca. Yang perlu dipastikan hanya teksnya. */
html[data-color^="dark-"] li.bg-primary > a,
html[data-color^="dark-"] li.bg-primary > a .label {
  color: #ffffff !important;
}

/* Pohon jaringan. tree.css menulis "background: white" dan abu terang langsung,
   bukan lewat variabel, sehingga kartunya tetap putih dan teksnya yang sudah
   terang jadi tidak terbaca. */
html[data-color^="dark-"] .tree-node-card {
  background: var(--foreground) !important;
  border-color: var(--separator) !important;
  box-shadow: var(--eu-bayang) !important;
}

html[data-color^="dark-"] .tree-node-card:hover {
  box-shadow: var(--eu-bayang) !important;
  border-color: var(--primary) !important;
}

/* Slot kosong. Selektor tree.css sengaja ditiru persis lalu diberi awalan
   tema, karena versi yang lebih pendek kalah spesifisitas dari
   ".flex-tree-container ul > li.empty-slot > *:not(ul):not(li)". */
html[data-color^="dark-"] .flex-tree-container ul > li.empty-slot > *:not(ul):not(li),
html[data-color^="dark-"] .flex-tree-container ul > li.empty-slot > div,
html[data-color^="dark-"] .flex-tree-container .empty-slot-card {
  background: var(--background-light) !important;
  background-image: none !important;
  border-color: var(--separator) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html[data-color^="dark-"] .flex-tree-container ul > li.empty-slot > *:not(ul):not(li):hover,
html[data-color^="dark-"] .flex-tree-container .empty-slot-card:hover {
  border-color: var(--muted) !important;
  box-shadow: var(--eu-bayang) !important;
  opacity: 1 !important;
}

/* Arsir diagonalnya aslinya abu terang, di atas gelap perlu diredam. */
html[data-color^="dark-"] .flex-tree-container ul > li.empty-slot > *:not(ul):not(li):before,
html[data-color^="dark-"] .flex-tree-container .empty-slot-card:before {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, .04) 10px,
    rgba(255, 255, 255, .04) 20px
  );
}

/* Bootstrap .text-black memaksa hitam, dipakai di badge dalam simpul pohon. */
html[data-color^="dark-"] .tree-node-card .text-black {
  color: var(--body) !important;
}

/* Batang gulir pohon ikut tema, aslinya abu terang tetap. */
html[data-color^="dark-"] .flex-tree-container::-webkit-scrollbar-track {
  background: var(--background);
}

html[data-color^="dark-"] .flex-tree-container::-webkit-scrollbar-thumb {
  background: var(--separator);
}

html[data-color^="dark-"] .flex-tree-container::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* -------------------------------------------------------------------------
   Kartu dashboard
   ------------------------------------------------------------------------- */

.eu-card {
  background: var(--foreground);
  border: 1px solid var(--separator);
  border-radius: 10px;
  box-shadow: var(--eu-bayang);
}

/* Tingkat 1: saldo, angka terbesar di halaman */
.eu-saldo { padding: 1.375rem; }

.eu-saldo__label,
.eu-paket__label {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  font-weight: 500;
  color: var(--eu-teks-2);
}

.eu-saldo__angka {
  font-size: var(--t-hero);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: var(--t-hero-lh);
  color: var(--eu-teks-1);
  font-variant-numeric: tabular-nums;
  margin: .5rem 0 .875rem;
}

.eu-saldo__satuan {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--eu-teks-2);
  letter-spacing: 0;
  margin-left: .4rem;
}

.eu-saldo__pecah {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1rem;
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
  margin-bottom: 1.125rem;
}

.eu-saldo__pecah span { display: inline-flex; align-items: center; gap: .4rem; }
.eu-saldo__pecah i { width: 8px; height: 8px; border-radius: 50%; display: block; }

/* Tingkat 1: paket aktif dengan progres kontrak */
.eu-paket { padding: 1.375rem; height: 100%; }
.eu-paket__nama {
  font-size: var(--t-section);
  line-height: var(--t-section-lh);
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--eu-teks-1);
}

/* Bar progres kontrak. Isinya bernada aksi yang sama dengan tombol Tarik
   Dana, karena keduanya bicara soal uang yang menjadi hak member.

   Terhadap kartu putih nadanya 3,40:1 dan terhadap kartu gelap 3,13:1
   melawan relnya, keduanya lewat ambang 3:1 WCAG 1.4.11 untuk elemen
   antarmuka yang membawa arti. Warnanya solid, tanpa gradasi. */
.eu-bar {
  height: 10px;
  border-radius: 99px;
  background: var(--separator);
  overflow: hidden;
  margin-bottom: .875rem;
}

.eu-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--eu-aksi);
}

/* Kolom progres di tabel butuh lebar minimum, kalau tidak barnya remuk jadi
   beberapa piksel di layar sempit. Lebarnya di kelas, bukan di atribut style
   pada blade. */
.eu-kolom-progres { min-width: 150px; }

/* Angka di tabel selalu tabular, supaya kolom uang lurus antar baris. Ditulis
   sekali di sini, bukan per halaman tabel. */
.table th, .table td { font-variant-numeric: tabular-nums; }

/* Tingkat 2: tiga kantong bonus, setara satu sama lain */
.eu-kantong { padding: 1.125rem; height: 100%; }

/* Versi tautannya. Warnanya diwarisi supaya kartu tidak berubah jadi teks
   biru, dan tepinya menyala saat disinggahi, sama dengan kartu antrean. */
a.eu-kantong { display: block; text-decoration: none; color: inherit; transition: border-color .14s ease; }
a.eu-kantong:hover { border-color: var(--primary); }

.eu-kantong__nilai {
  font-size: var(--t-display);
  line-height: var(--t-display-lh);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--eu-teks-1);
  font-variant-numeric: tabular-nums;
}

.eu-kantong__kaki {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .625rem;
  margin-top: .625rem;
  padding-top: .5625rem;
  border-top: 1px solid var(--separator);
  font-size: var(--t-note);
  line-height: var(--t-note-lh);
  color: var(--eu-teks-2);
}

.eu-kantong__kaki b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Baris informasi kedua tetap satu kelompok dengan total diterima, jadi tidak
   menambah garis pemisah baru di dalam kartu yang sama. */
.eu-kantong__kaki--lanjutan {
  margin-top: .25rem;
  padding-top: 0;
  border-top: 0;
}

/* Satuan di belakang angka kartu, sama perlakuannya dengan satuan di kartu
   omzet: tinta sekunder, bobot 600, supaya angkanya tetap yang bicara. */
.eu-kantong__satuan {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--eu-teks-2);
  letter-spacing: 0;
  margin-left: .4rem;
}

/* Petak ikon: warna hadir sebagai penanda, bukan sebagai blok */
.eu-tile {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tone, var(--primary)) 12%, transparent);
  color: var(--tone, var(--primary));
}

.eu-tile--sm { width: 30px; height: 30px; }
.eu-tile--md { width: 38px; height: 38px; }
.eu-tile [data-acorn-icon] { width: 17px; height: 17px; }

.eu-tone-pasif { --tone: var(--secondary); }
.eu-tone-aktif { --tone: var(--primary); }
.eu-tone-aktivasi { --tone: var(--tertiary); }
.eu-tone-masuk { --tone: var(--success); }
.eu-tone-keluar { --tone: var(--danger); }

/* Tingkat 3: baris riwayat, dipisah garis rambut bukan blok warna */
.eu-baris {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6875rem 0;
  border-bottom: 1px solid var(--separator);
}

.eu-baris:last-of-type { border-bottom: 0; }
.eu-baris__judul { font-size: var(--t-body); line-height: var(--t-body-lh); font-weight: 600; color: var(--eu-teks-1); }
/* Keterangan mutasi dan cap waktunya dulu memakai kelas yang sama, jadi
   keduanya 11px dengan tinta yang sama persis dan terbaca sebagai satu
   gumpalan. Keterangan bonus pairing menyebut dua nama member, panjangnya
   dua baris sendiri, dan tanpa beda ukuran barisnya menyatu dengan tanggal.
   Keterangan naik satu anak tangga ke Label, cap waktunya tetap di Note. */
.eu-baris__ket { font-size: var(--t-label); line-height: var(--t-label-lh); color: var(--eu-teks-2); }
.eu-baris__waktu { font-size: var(--t-note); line-height: var(--t-note-lh); color: var(--eu-teks-2); }
.eu-baris__nilai { font-size: var(--t-body); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Satuan menempel di angka baris, seukuran Note dengan tinta sekunder, sama
   perlakuannya dengan .eu-kantong__satuan: terbaca tanpa ikut menarik
   perhatian dari angkanya. */
.eu-baris__satuan { font-size: var(--t-note); font-weight: 600; color: var(--eu-teks-2); margin-left: .1875rem; }

/* Baris yang bisa diklik. Warnanya diwarisi supaya tidak berubah jadi biru
   tautan, dan seluruh baris jadi sasaran klik, bukan cuma judulnya. */
.eu-baris--tautan {
  color: inherit;
  text-decoration: none;
  margin-inline: -.5rem;
  padding-inline: .5rem;
  border-radius: 8px;
  transition: background-color .12s ease-out;
}

.eu-baris--tautan:hover,
.eu-baris--tautan:focus-visible {
  color: inherit;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.eu-kosong { text-align: center; padding: 2.5rem 0; color: var(--eu-teks-2); }

/* Tangga reward di beranda member.

   Dua bar, bukan satu, karena syaratnya dua kondisi sekaligus: omset minimum
   yang sama harus terpenuhi di kaki kiri dan kaki kanan. Bar tunggal dari kaki
   terkecil memang cukup untuk tahu kapan terbuka, tapi menyembunyikan kaki
   mana yang menahan, dan itu satu satunya hal yang bisa ditindaklanjuti. */
.eu-reward {
  padding: 1.25rem 1.5rem;
  display: grid;
  gap: 1.25rem;
}

.eu-reward__kepala { margin-bottom: 1rem; }

.eu-reward__ambang {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
  margin-top: .125rem;
}

/* Capaian jadi kolomnya sendiri di kanan, bukan lencana kecil di pojok kepala.
   Barnya sengaja dibatasi 46rem, jadi separuh kanan kartu memang kosong di
   layar lebar, dan capaian satu satunya isi lain yang layak menempatinya.
   Garis rambut memisahkannya, bukan permukaan baru: kartu di dalam kartu
   dilarang. */
.eu-reward__capaian {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .625rem;
}

.eu-reward__bintang { display: flex; gap: .375rem; }

/* Dua selektor karena ikonnya berganti wujud: `<i data-acorn-icon>` sebelum
   AcornIcons.replace() jalan, `<svg class="acorn-icons">` sesudahnya. Atribut
   datanya tidak ikut disalin ke svg, kelasnya ikut. Tanpa pasangan ini
   bintangnya melompat dari 18px ke 20px bawaan svg begitu skripnya jalan. */
.eu-reward__bintang [data-acorn-icon],
.eu-reward__bintang .acorn-icons {
  width: 26px;
  height: 26px;
  color: var(--eu-teks-3);
}

/* Bintang yang sudah diraih memakai nada aksi, sama dengan bar progres
   kontrak, jadi "capaian" terbaca satu bahasa di seluruh dasbor. */
.eu-reward__bintang .is-raih { color: var(--eu-aksi); }

/* Bintang penuh dan kosong cuma berbeda warna, dan warna saja bukan pembeda
   yang cukup. Hitungannya ditulis, sekalian jadi teks yang dibaca pembaca
   layar menggantikan baris bintang yang aria-hidden. */
.eu-reward__hitung {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
}

/* Dibatasi lebarnya. Kartunya selebar halaman, dan bar yang membentang
   1500px membuat angkanya terlempar jauh dari ujung barnya, jadi mata harus
   menyeberangi ruang kosong untuk mencocokkan keduanya. */
.eu-reward__kaki { display: grid; gap: .5rem; max-width: 46rem; }

.eu-reward__baris {
  display: grid;
  grid-template-columns: 5.5rem 1fr 5rem;
  align-items: center;
  gap: .75rem;
}

.eu-reward__label {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
}

.eu-reward__nilai {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Kaki yang menahan diberi tinta penuh, yang sudah lewat diturunkan. Bukan
   diberi warna lain: warna di dasbor ini sudah punya arti sendiri, hijau untuk
   uang masuk dan merah untuk keluar, dan kaki yang tertinggal bukan keduanya. */
.eu-reward__baris.is-menahan .eu-reward__label,
.eu-reward__baris.is-menahan .eu-reward__nilai {
  color: var(--eu-teks-1);
  font-weight: 600;
}

.eu-reward__sisa {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
  margin: .875rem 0 0;
}

/* Dua kolom baru di lg ke atas. Di bawah itu kartunya sudah sesempit barnya,
   jadi capaian turun ke bawah sebagai penutup, bukan diperkecil di pojok. */
@media (min-width: 992px) {
  .eu-reward {
    grid-template-columns: minmax(0, 46rem) 1fr;
    gap: 0 2rem;
  }

  .eu-reward__capaian {
    border-left: 1px solid var(--separator);
    align-items: center;
    gap: .875rem;
  }

  .eu-reward__bintang { gap: .625rem; }

  .eu-reward__bintang [data-acorn-icon],
  .eu-reward__bintang .acorn-icons {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 575.98px) {
  .eu-reward { padding: 1.125rem; }

  /* Label naik ke atas barnya, kalau tidak barnya tinggal beberapa piksel */
  .eu-reward__baris {
    grid-template-columns: 1fr auto;
    gap: .25rem .75rem;
  }

  .eu-reward__baris .eu-bar { grid-column: 1 / -1; order: 3; }
}

/* Kartu langkah aktivasi di beranda member baru.

   Rantainya digambar sebagai garis tegak yang menyambung antar penanda, bukan
   sebagai tiga kartu berdampingan: urutannya wajib, dan tiga kartu sejajar
   justru menyiratkan tiga pilihan yang boleh dikerjakan sesuka hati.

   Keadaan tidak pernah dibedakan warna saja. Yang selesai memakai centang,
   yang menunggu verifikasi memakai jam, yang belum memakai nomor urutnya. */
.eu-langkah { padding: 1.5rem; }

.eu-langkah__kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.eu-langkah__hitung {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
  font-variant-numeric: tabular-nums;
}

.eu-langkah__ringkas {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--eu-teks-2);
  margin: .375rem 0 1.25rem;
  max-width: 68ch;
}

.eu-langkah__daftar {
  list-style: none;
  margin: 0;
  padding: 0;
}

.eu-langkah__baris {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding-bottom: 1.375rem;
}

.eu-langkah__baris:last-child { padding-bottom: 0; }

/* Garis penyambung berhenti di baris terakhir, kalau tidak ia menggantung
   di bawah langkah penutup seolah masih ada lanjutannya. */
.eu-langkah__baris:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 6px;
  width: 2px;
  background: var(--separator);
}

.eu-langkah__baris.is-selesai:not(:last-child)::before { background: var(--success); }

.eu-langkah__tanda {
  position: relative;
  z-index: 1;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-label);
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--separator);
  background: var(--foreground);
  color: var(--eu-teks-3);
}

.eu-langkah__tanda [data-acorn-icon] { width: 15px; height: 15px; }

.is-selesai .eu-langkah__tanda {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.is-sekarang .eu-langkah__tanda {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.is-menunggu .eu-langkah__tanda {
  border-color: var(--tertiary);
  color: var(--tertiary);
}

/* Lebar bacanya dibatasi: kartunya selebar halaman, dan keterangan satu baris
   yang membentang 1500px memaksa mata melompat jauh mencari awal baris
   berikutnya. */
.eu-langkah__isi { flex: 1 1 auto; min-width: 0; max-width: 68ch; }

.eu-langkah__judul {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: 600;
  color: var(--eu-teks-1);
}

/* Langkah terkunci diturunkan tintanya, bukan disamarkan sampai tak terbaca:
   member tetap perlu tahu apa yang menantinya. */
.is-terkunci .eu-langkah__judul { color: var(--eu-teks-2); }

.eu-langkah__sebab {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
  margin-top: .125rem;
}

.eu-langkah__aksi { margin-top: .625rem; }

/* Ikon kalender bawaan peramban pada input[type=date] digambar gelap, jadi di
   tema gelap ia nyaris tidak terlihat di atas medan yang juga gelap. Peramban
   tidak mengambilnya dari palet kita, jadi warnanya dibalik di sini. Ini salah
   satu permukaan bawaan peramban yang disebut DESIGN.md: yang tidak kita
   gambar sendiri pun tetap bagian dari tampilan. */
html[data-color^="dark-"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .6;
  cursor: pointer;
}

html[data-color^="dark-"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

@media (max-width: 575.98px) {
  .eu-langkah { padding: 1.125rem; }
  .eu-langkah__aksi { display: block; width: 100%; }
}

@media (max-width: 575.98px) {
  .eu-saldo, .eu-paket { padding: 1.125rem; }
  .eu-kantong { padding: 1rem; }
}

/* -------------------------------------------------------------------------
   Kartu blok warna lama, di halaman mana pun
   -------------------------------------------------------------------------
   Pola lamanya selalu sama: .card.bg-<warna> dengan isi .text-white. Diubah
   jadi permukaan tenang lewat satu aturan umum, bukan disunting satu per satu
   di setiap blade, supaya halaman yang belum tersentuh pun ikut seragam.
   Warna aslinya tidak hilang, hanya turun jadi petak ikon dan nada aksen.
   ------------------------------------------------------------------------- */

.card.bg-primary    { --tone: var(--primary); }
.card.bg-secondary  { --tone: var(--secondary); }
.card.bg-tertiary   { --tone: var(--tertiary); }
.card.bg-quaternary { --tone: var(--quaternary); }
.card.bg-success    { --tone: var(--success); }
.card.bg-info       { --tone: var(--info); }
.card.bg-warning    { --tone: var(--warning); }
.card.bg-danger     { --tone: var(--danger); }
.card.bg-dark       { --tone: var(--alternate); }

.card.bg-primary,
.card.bg-secondary,
.card.bg-tertiary,
.card.bg-quaternary,
.card.bg-success,
.card.bg-info,
.card.bg-warning,
.card.bg-danger,
.card.bg-dark {
  background-color: var(--foreground) !important;
  background-image: none !important;
  border: 1px solid var(--separator);
  border-radius: 10px;
  box-shadow: var(--eu-bayang);
  color: var(--body) !important;
}

/* Teks di dalamnya tadinya putih di atas blok, sekarang perlu warna gelap */
.card[class*="bg-"] .text-white { color: var(--eu-teks-1) !important; }
.card[class*="bg-"] .text-white-50 { color: var(--eu-teks-2) !important; }
.card[class*="bg-"] .text-muted { color: var(--eu-teks-2) !important; }
.card[class*="bg-"] .cta-1,
.card[class*="bg-"] .cta-2,
.card[class*="bg-"] .cta-3 {
  color: var(--eu-teks-1) !important;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Alert warisan template, di halaman mana pun
   -------------------------------------------------------------------------
   Pola template: latar `rgba(var(--<peran>-rgb), .15)` dengan seluruh teks
   ditulis dalam warna perannya. Di atas latar gelap itu terbaca sebagai blok
   neon, dan satu paragraf penuh bernada biru melanggar aturan bahwa hierarki
   tidak boleh dibawa warna. Perlakuannya disamakan dengan kartu `.card.bg-*`:
   permukaannya tenang, nadanya turun jadi garis kiri setipis rambut dan kata
   penanda di depan kalimat. Teks isinya kembali ke tinta biasa.

   Latarnya sengaja transparan, bukan `--foreground`: sebagian alert duduk di
   dalam kartu, dan permukaan baru di dalam kartu adalah kartu di dalam kartu
   yang dilarang. Garis rambut sudah cukup memberinya batas.
   ------------------------------------------------------------------------- */

.alert-primary   { --tone: var(--primary); }
.alert-secondary { --tone: var(--secondary); }
.alert-success   { --tone: var(--success); }
.alert-info      { --tone: var(--info); }
.alert-warning   { --tone: var(--warning); }
.alert-danger    { --tone: var(--danger); }

.alert {
  background-color: transparent;
  border: 1px solid var(--separator);
  border-left: 1px solid var(--tone, var(--separator));
  border-radius: 10px;
  color: var(--eu-teks-2);
}

/* Penekanan di dalam alert naik lewat bobot, bukan warna. Nadanya cukup
   dibawa garis kiri. */
.alert :is(b, strong) { color: var(--eu-teks-1); }
.alert .alert-link { color: var(--tone, var(--primary)); }

/* Lingkaran ikon putih di dalam blok jadi petak bernada, seperti di dashboard */
.card[class*="bg-"] .bg-light {
  background-color: color-mix(in srgb, var(--tone) 12%, transparent) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.card[class*="bg-"] .bg-light [data-acorn-icon] { color: var(--tone) !important; }

/* Tombol outline putih tidak terbaca di permukaan terang.
   Warna teksnya perlu !important karena Acorn menyetel .btn-outline-light
   dengan aturan yang lebih kuat dari selektor ini. */
.card[class*="bg-"] .btn-outline-light,
.card[class*="bg-"] .btn-outline-light [data-acorn-icon] {
  color: var(--tone) !important;
  border-color: color-mix(in srgb, var(--tone) 35%, transparent) !important;
  font-weight: 700;
}

.card[class*="bg-"] .btn-outline-light:hover,
.card[class*="bg-"] .btn-outline-light:hover [data-acorn-icon] {
  background-color: var(--tone) !important;
  border-color: var(--tone) !important;
  color: #fff !important;
}

/* Lingkaran penanda arah mutasi: isi penuh diganti petak bernada */
.card[class*="bg-"] .rounded-circle.bg-success,
.card[class*="bg-"] .rounded-circle.bg-danger,
.card[class*="bg-"] .rounded-circle.bg-primary,
.card[class*="bg-"] .rounded-circle.bg-warning {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.card[class*="bg-"] .rounded-circle.bg-success { background-color: color-mix(in srgb, var(--success) 13%, transparent) !important; }
.card[class*="bg-"] .rounded-circle.bg-danger  { background-color: color-mix(in srgb, var(--danger) 13%, transparent) !important; }
.card[class*="bg-"] .rounded-circle.bg-primary { background-color: color-mix(in srgb, var(--primary) 13%, transparent) !important; }
.card[class*="bg-"] .rounded-circle.bg-warning { background-color: color-mix(in srgb, var(--warning) 13%, transparent) !important; }
.card[class*="bg-"] .rounded-circle.bg-success [data-acorn-icon] { color: var(--success) !important; }
.card[class*="bg-"] .rounded-circle.bg-danger [data-acorn-icon]  { color: var(--danger) !important; }
.card[class*="bg-"] .rounded-circle.bg-primary [data-acorn-icon] { color: var(--primary) !important; }
.card[class*="bg-"] .rounded-circle.bg-warning [data-acorn-icon] { color: var(--warning) !important; }

/* Baris riwayat di dalam kartu tersebut: garis rambut, bukan kotak transparan putih */
.card[class*="bg-"] .mutasi-item,
.card[class*="bg-"] .aktivitas-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--separator) !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
}

.card[class*="bg-"] .mutasi-item:hover,
.card[class*="bg-"] .aktivitas-item:hover {
  background: var(--background-light) !important;
  transform: none !important;
}

/* Badge di dalam kartu tetap perlu kontras sendiri */
.card[class*="bg-"] .badge.bg-outline-white {
  color: var(--muted) !important;
  border: 1px solid var(--separator);
}

/* Foto profil bawaan adalah logo gelap di atas transparan, jadi lenyap di tema
   gelap. Diberi alas terang secukupnya, bukan diganti berkasnya. */
html[data-color^="dark-"] .user .profile {
  background: rgba(255, 255, 255, .92);
}

/* Nada semantik sengaja diangkat di atas supaya teks berwarna seperti
   .text-success terbaca di latar gelap. Akibatnya lencana dan tombol padat
   dengan nada itu jadi terlalu terang untuk tulisan putih. Yang diturunkan
   teksnya, bukan nadanya, supaya keduanya tetap terpenuhi. */
html[data-color^="dark-"] :is(.badge.bg-success, .badge.bg-warning, .badge.bg-info,
  .badge.bg-secondary, .btn-success, .btn-warning, .btn-info, .btn-secondary),
html[data-color^="dark-"] :is(.badge.bg-success, .badge.bg-warning, .badge.bg-info,
  .badge.bg-secondary, .btn-success, .btn-warning, .btn-info, .btn-secondary) * {
  color: #08202f !important;
}


/* Kuning terlalu terang untuk tulisan putih di tema mana pun: putih di atas
   #b7791f cuma 3.6:1. Chip padat bernada warning memakai teks gelap, aturan
   yang sama sudah berlaku di tema gelap beberapa blok di atas. */
html[data-color^="light-"] :is(.badge.bg-warning, .btn-warning),
html[data-color^="light-"] :is(.badge.bg-warning, .btn-warning) * {
  color: var(--dark-text) !important;
}

/* =========================================================================
   SISTEM HURUF ARTHA, gabungan Apple dan Microsoft Fluent 2
   -------------------------------------------------------------------------
   Aturan lengkapnya ada di DESIGN.md di akar project. Ringkasnya:

   Dari Fluent 2 diambil bentuk tangganya. Ukuran ditulis dalam px dengan
   tinggi baris yang dipasangkan, bukan em yang bertumpuk. Template memakai
   em, dan tumpukan html 16px lalu body 87,5% lalu .text-small 0,7em membuat
   label yang paling sering dibaca jatuh ke 9,8px. Sekali tangganya tetap,
   angka seperti itu tidak bisa muncul lagi dari mana pun.

   Dari Apple diambil lantainya. Tidak ada teks di bawah 11px dan tidak ada
   bobot di bawah 400. Teks sekunder ditulis sebagai alpha dari warna teks
   utama, bukan abu solid, supaya ikut menyesuaikan di atas kartu putih,
   kartu bernada, maupun permukaan gelap.

   Keduanya memakai satu keluarga huruf saja dan menaikkan bobot untuk
   penekanan. Karena itu --font-heading ditarik ke --font: Montserrat
   dilepas, hierarki dibangun dari bobot, bukan dari dua tipografi.
   ========================================================================= */

html[data-color] {
  --font-heading: var(--font);

  /* Tangga huruf. Delapan peran, tidak ada ukuran di luar daftar ini. */
  --t-hero: clamp(2rem, 4.5vw, 2.75rem);
  --t-hero-lh: 1.08;
  --t-display: 28px;
  --t-display-lh: 34px;
  --t-heading: 24px;
  --t-heading-lh: 32px;
  --t-title: 20px;
  --t-title-lh: 26px;
  --t-section: 16px;
  --t-section-lh: 22px;
  --t-body: 14px;
  --t-body-lh: 20px;
  --t-label: 12px;
  --t-label-lh: 16px;
  --t-note: 11px;
  --t-note-lh: 15px;

  /* Warna teks sebagai satu tinta dengan tiga tingkat alpha. Menukar
     --eu-teks-rgb saja sudah memindahkan ketiganya ke tema lain. */
  --eu-teks-rgb: 8 35 52;
  --eu-teks-1: rgb(var(--eu-teks-rgb));
  --eu-teks-2: rgb(var(--eu-teks-rgb) / .66);
  --eu-teks-3: rgb(var(--eu-teks-rgb) / .48);
  --eu-teks-kuat: var(--eu-teks-1);

  /* Nada aksi. Dipakai dua tempat, tombol utama dan bar progres kontrak,
     terpisah dari --primary yang mengurus hirarki, tautan, dan menu aktif.
     Ini nada yang sama dengan sapuan di wordmark.

     Teksnya putih atas permintaan pemilik produk. Angkanya perlu diketahui:
     putih di atas #da6d09 bernilai 3,40:1 dan tidak memenuhi ambang WCAG AA
     4,5:1 untuk teks berukuran biasa, sedangkan navy yang dipakai sebelumnya
     bernilai 4,91:1. Kalau suatu saat ambangnya mau dipenuhi tanpa melepas
     teks putih, gelapkan --eu-aksi ke #b95d08 pada rona yang sama persis:
     putih di atasnya 4,53:1, dan permukaannya masih 3,61:1 terhadap kartu
     gelap sehingga batas komponennya tetap lolos. */
  --eu-tinta-isian: #08202f;
  --eu-aksi: #da6d09;
  --eu-aksi-teks: #ffffff;

  /* Garis kolom isian saat diam. WCAG 1.4.11 minta 3:1 untuk batas kontrol,
     dan ini nilai yang memenuhinya di atas permukaan kartu masing masing
     tema: 3,13:1 di atas putih, 3,65:1 di atas #0a2135. */
  --eu-garis-kontrol: #88939e;
}

/* Putih murni di atas navy pekat membuat huruf mengembang, jadi tinta
   gelapnya ditahan di #e6eef5. */
html[data-color^="dark-"] {
  --eu-teks-rgb: 230 238 245;
  --eu-garis-kontrol: #587a9c;
}

/* Judul: keluarga dan ukuran bawaan Bootstrap dipertahankan, yang diperbaiki
   bobot dan warnanya. Template menyetel semua judul ke bobot 400 dengan warna
   --body yang sama persis dengan teks isi, sehingga judul hanya berbeda
   ukuran. Warna adalah sumbu yang paling cepat runtuh di tema gelap.

   Tintanya --eu-teks-1, sama dengan .small-title dan angka kartu. Sebelumnya
   abu mati #8b8b8d yang cuma 3,40:1 di atas kartu putih: lolos untuk judul
   besar, gagal ambang 4,5:1 untuk peran kecil seperti .h6 di halaman masuk.
   Judul juga tidak boleh lebih pudar dari teks isi di bawahnya. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #F0A315;
  font-weight: 600;
  letter-spacing: -.012em;
}

/* Utilitas ukuran template dipetakan ulang ke tangga di atas. Semuanya perlu
   !important karena aturan aslinya di styles.css juga memakainya; berkas ini
   dimuat belakangan sehingga menang pada spesifisitas yang sama. */
.text-small {
  font-size: var(--t-label) !important;
  line-height: var(--t-label-lh) !important;
  font-weight: 500 !important;
}

.text-extra-small {
  font-size: var(--t-note) !important;
  line-height: var(--t-note-lh) !important;
  font-weight: 500 !important;
}

/* Aslinya .text-small menulis font-weight: initial !important, jadi fw-bold di
   elemen yang sama tidak pernah berlaku. Dikembalikan. */
.text-small.fw-bold,
.text-extra-small.fw-bold,
.text-small .fw-bold,
.text-extra-small .fw-bold { font-weight: 700 !important; }

.text-medium { font-size: var(--t-body) !important; }
.text-semi-large { font-size: var(--t-section) !important; }
.text-large { font-size: var(--t-title) !important; font-weight: 600 !important; }
.text-xlarge { font-size: var(--t-hero) !important; font-weight: 700 !important; }

/* Judul bagian. Aslinya seukuran teks isi dan hanya dibedakan warna primary,
   plus tinggi tetap 2rem yang memotong huruf begitu ukurannya naik. */
.small-title {
  font-size: var(--t-section);
  line-height: var(--t-section-lh);
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--eu-teks-1);
  height: auto;
  margin-bottom: .5rem;
}

/* Judul bagian yang berpasangan dengan satu tautan lanjutan, misalnya
   "Mutasi Saldo" dengan "Lihat semua". Baseline keduanya disejajarkan lewat
   align-items: baseline, bukan center, supaya tautannya duduk di garis huruf
   judul dan tidak mengambang di tengahnya. Jarak bawahnya mengambil alih
   margin .small-title yang dinolkan di markup. */
.eu-judul-baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}

.eu-judul-baris a {
  color: var(--eu-teks-2);
  text-decoration: none;
  white-space: nowrap;
}

.eu-judul-baris a:hover,
.eu-judul-baris a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Penyaring riwayat. Satu baris di layar lebar, menumpuk di ponsel, dengan
   tombolnya menempel di ujung supaya tidak melayang sendirian di baris baru. */
.eu-saring {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}

.eu-saring__medan {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1 1 10rem;
  min-width: 0;
}

.eu-saring__label {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
}

.eu-saring__aksi {
  display: flex;
  gap: .5rem;
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  .eu-saring__medan { flex-basis: 100%; }
  .eu-saring__aksi { width: 100%; }
  .eu-saring__aksi .btn { flex: 1 1 0; }
}

/* Penanda kolom wajib.

   Atribut required sudah terpasang di hampir semua form, jadi peramban dan
   pembaca layar sejak dulu tahu mana yang wajib. Yang tidak tahu justru orang
   yang melihat layarnya: tidak ada satu pun tanda, dan barisan delapan kolom
   kosong terbaca seolah semuanya opsional sampai tombol simpan ditekan.

   Ditulis sebagai aturan CSS, bukan bintang yang diketik satu satu di tiap
   blade, supaya tandanya tidak bisa berbohong. Tujuh belas form memakai pola
   yang sama, dan bintang yang ditulis tangan akan tertinggal begitu ada kolom
   yang berubah wajib atau berhenti wajib. Password di form Pengguna contohnya:
   wajib saat menambah, tidak wajib saat mengubah, dan atributnya memang sudah
   dirender bersyarat.

   Bintangnya dekoratif dan sengaja tidak dibacakan pembaca layar: atribut
   required pada inputnya yang mengabarkan itu, jadi menambahkannya lagi di
   sini cuma membuat labelnya dibacakan dua kali. */
.form-label:has(~ input[required], ~ select[required], ~ textarea[required])::after {
  content: "*";
  margin-left: .2em;
  color: var(--danger);
  font-weight: 700;
}

/* Kolom yang ditolak peramban maupun server sama sama diberi garis merah, tapi
   .was-validated baru menempel sesudah tombol simpan pertama kali ditekan. Itu
   memang pola bawaan Bootstrap dan tidak diubah: memerahkan kolom yang belum
   sempat diisi, sebelum orangnya selesai mengetik, lebih mengganggu daripada
   menolong. */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger);
}

/* Select2 menyembunyikan <select> aslinya dan menggambar widgetnya sendiri,
   jadi garis merah dari aturan di atas menempel pada elemen yang tidak
   terlihat. Tanpa tambalan ini, menekan simpan pada form yang kolom Select2
   nya kosong memerahkan enam kolom biasa dan tidak memberi tanda apa apa pada
   dua kolom yang sama sama menahan pengiriman. */
/* Pesan galat per kolom yang disisipkan components/form_validation.blade.php.
   Selalu tampil begitu ada, tidak menunggu pemilih saudara :invalid milik
   Bootstrap, sebab pada kolom Select2 pemilih itu menunjuk <select> yang
   disembunyikan dan pesannya ikut hilang. */
.eu-galat-medan {
  display: block;
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--danger);
  margin-top: .25rem;
}

/* !important-nya terpaksa: styles.css menulis
   `.select2-container--bootstrap4 .select2-selection { border: ... !important }`,
   dan deklarasi !important tidak bisa dikalahkan kekhususan berapa pun. Ini
   pola yang sama dengan tambalan Select2 lain di berkas ini. */
.was-validated select:invalid + .select2-container .select2-selection,
select.is-invalid + .select2-container .select2-selection {
  border-color: var(--danger) !important;
}

/* Angka dan ajakan. Bobot 400 terlalu ringan untuk angka sebesar ini, dan
   Apple menyebut khusus supaya bobot ringan dihindari. */
.cta-1, .cta-2, .cta-3, .cta-4 {
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.cta-1 { font-size: var(--t-display); line-height: var(--t-display-lh); }
.cta-2 { font-size: var(--t-heading); line-height: var(--t-heading-lh); }
.cta-3 { font-size: var(--t-title); line-height: var(--t-title-lh); }
.cta-4 { font-size: var(--t-section); line-height: var(--t-section-lh); font-weight: 600; }

/* Kartu polos. Sebelumnya hanya dasbor yang punya tepi lewat .eu-card,
   sekitar 120 kartu di halaman lain rata dengan latar: bayangan template
   beralpha 3% dan tidak ada garis sama sekali. */
.card {
  border: 1px solid var(--separator);
  box-shadow: var(--eu-bayang) !important;
}

.card.no-shadow { box-shadow: none !important; }

/* Simpul pohon jaringan. Ukurannya dulu ditulis langsung di atribut style
   pada blade, di luar tangga mana pun. */
.eu-simpul__nama {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: 600;
  color: var(--eu-teks-1);
}

.eu-simpul__nama--kosong {
  font-weight: 500;
  color: var(--eu-teks-2);
}

.eu-simpul__surel {
  font-size: var(--t-note);
  line-height: var(--t-note-lh);
  font-weight: 500;
  color: var(--eu-teks-2);
}

.eu-simpul__tag {
  font-size: var(--t-note) !important;
  line-height: var(--t-note-lh) !important;
  font-weight: 600 !important;
}

/* Avatar simpul: aslinya gradasi biru yang di-hardcode di markup, di luar
   palet dan dengan halo berwarna di bawahnya. */
.eu-simpul__avatar {
  background: var(--primary);
  box-shadow: none;
}

/* Judul halaman. Template menyetel seluruh kelas .display-* ke bobot 300 dengan
   ukuran em yang ikut mengecil dari body 87,5%, jadi judul halaman keluar di
   sekitar 26px bobot 300. Apple menyebut bobot Ultralight, Thin, dan Light
   sebagai bobot yang harus dihindari, dan di tema gelap bobot itu yang paling
   cepat memudar. Dipetakan ke tangga dengan bobot yang terbaca. */
.display-3 { font-size: var(--t-hero); line-height: var(--t-hero-lh); font-weight: 700; letter-spacing: -.022em; }
.display-4 { font-size: var(--t-display); line-height: var(--t-display-lh); font-weight: 700; letter-spacing: -.02em; }
.display-5 { font-size: var(--t-heading); line-height: var(--t-heading-lh); font-weight: 600; letter-spacing: -.014em; }
.display-6 { font-size: var(--t-title); line-height: var(--t-title-lh); font-weight: 600; letter-spacing: -.01em; }

/* =========================================================================
   Komponen vendor: Select2 dan DataTables
   -------------------------------------------------------------------------
   Dua komponen ini paling sering muncul di halaman role admin: Select2 di 18
   halaman, DataTables di 13. Keduanya membawa CSS vendor sendiri yang menulis
   warna terang secara langsung, di luar variabel tema.

   Sebagian besar permukaannya ternyata sudah ikut tema karena template
   menempelkannya ke variabel. Yang diukur benar benar putus cuma yang
   ditambal di bawah ini, jadi daftarnya sengaja pendek.
   ========================================================================= */

/* Panel dropdown Select2 disamakan dengan kartu: garis rambut dan bayangan
   yang sama, bukan garis aksen terang. */
.select2-container--bootstrap4 .select2-dropdown,
.select2-container--default .select2-dropdown {
  background-color: var(--foreground);
  border-color: var(--separator) !important;
  border-radius: var(--border-radius-md);
  box-shadow: var(--eu-bayang);
}

.select2-results__option {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}

/* Baris tersorot aslinya biru vendor yang tidak ada di palet. */
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--primary) !important;
  color: var(--light-text) !important;
}

/* Nada primary di tema gelap adalah biru terang, jadi tulisannya diturunkan,
   aturan yang sama dipakai lencana padat beberapa blok di atas. */
html[data-color^="dark-"] .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
html[data-color^="dark-"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  color: #08202f !important;
}

/* Baris terpilih yang sedang di-hover: latar primary, bukan background-light.
   Tanpa ini, warna teks gelap dari aturan hover menang tapi latar tetap gelap
   dari [aria-selected="true"], sehingga teks nyatu dengan background. */
.select2-container--bootstrap4 .select2-dropdown .select2-results__option--highlighted[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
  background-color: var(--primary) !important;
  color: var(--light-text) !important;
}

html[data-color^="dark-"] .select2-container--bootstrap4 .select2-dropdown .select2-results__option--highlighted[aria-selected="true"],
html[data-color^="dark-"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
  color: #08202f !important;
}

/* Baris yang sudah terpilih: penanda tenang, bukan blok warna. */
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background-color: var(--background-light) !important;
  color: var(--eu-teks-1) !important;
}

/* Chip pilihan ganda. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--background-light) !important;
  border-color: var(--separator) !important;
  color: var(--eu-teks-1) !important;
}

.select2-container .select2-selection__placeholder { color: var(--eu-teks-2) !important; }

/* DataTables. Baris terpilih aslinya #0275d8, biru vendor yang tidak ada di
   palet mana pun dan sama terangnya di kedua tema. */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > * {
  background-color: color-mix(in srgb, var(--primary) 16%, transparent) !important;
  color: var(--eu-teks-1) !important;
  box-shadow: none !important;
}

/* Tombol buka baris pada mode responsif, warna dan lingkarannya juga vendor. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
  background-color: var(--primary) !important;
  border-color: transparent !important;
  color: var(--light-text) !important;
  box-shadow: none !important;
}

html[data-color^="dark-"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
html[data-color^="dark-"] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  color: #08202f !important;
}

/* Tombol halaman yang mati sebelumnya berwarna primary, sama persis dengan
   tautan yang masih bisa diklik. */
.dataTables_wrapper .paginate_button.disabled .page-link,
.dataTables_wrapper .paginate_button.disabled .page-link:hover,
.dataTables_wrapper .paginate_button.disabled .page-link:focus {
  color: var(--eu-teks-3) !important;
  background-color: transparent !important;
}

/* Panel koleksi tombol ekspor dan kotak infonya menulis latar putih. */
div.dt-button-collection,
div.dt-button-collection div.dt-button-collection-title,
div.dt-button-info {
  background-color: var(--foreground) !important;
  border-color: var(--separator) !important;
  color: var(--body) !important;
  box-shadow: var(--eu-bayang) !important;
}

/* Keterangan jumlah data dan label kontrol adalah label, bukan teks isi. */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
}

/* Kotak cari dan select panjang bawaan DataTables, kalau sDom tidak
   disembunyikan. Aslinya latar putih vendor. */
html[data-color] .dataTables_wrapper .dataTables_filter input,
html[data-color] .dataTables_wrapper .dataTables_length select {
  background-color: var(--foreground);
  color: var(--eu-teks-1);
  border: 1px solid var(--eu-garis-kontrol);
  border-radius: var(--border-radius-md);
  transition: border-color .14s ease, box-shadow .14s ease;
}

html[data-color] .dataTables_wrapper .dataTables_filter input:focus,
html[data-color] .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  outline: 0;
}

/* Tabel rapat di laporan rekap, dipindah dari blok style di blade-nya. */
.table-condensed th,
.table-condensed td {
  padding: .3rem;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}

/* Baris rekap yang disorot, aslinya kuning terang #fff3cd yang menyala di
   tema gelap. */
.table-warning,
.table-warning > * {
  background-color: color-mix(in srgb, var(--warning) 16%, transparent) !important;
  color: var(--eu-teks-1) !important;
}

/* Tirai saat tabel ranking sedang memuat, aslinya putih 80 persen. */
.table-loading { position: relative; }

.table-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--foreground) 80%, transparent);
  z-index: 1;
}

/* SweetAlert2, dipakai lewat realrashid/sweet-alert untuk toast dan dialog
   hapus. Berkas sweetalert.all.js menyuntikkan CSS-nya sendiri ke <head> saat
   dijalankan, jadi aturannya masuk sesudah berkas ini dan menang pada
   spesifisitas yang sama. Awalan tema menaikkan spesifisitasnya, jadi tidak
   perlu !important.

   Satu satunya yang tidak bisa diselesaikan dengan spesifisitas adalah latar
   popup, alasannya di bawah. */

/* Latar popup ditulis package sebagai atribut style inline, dari
   config('sweetalert.background') yang nilai bawaannya '#fff'. Atribut style
   cuma bisa dikalahkan !important, jadi ini satu satunya baris di blok ini
   yang memakainya. Toast dari lonceng-verifikasi.js tidak lewat package dan
   tidak punya style inline, tapi aturan yang sama tetap benar untuknya. */
html[data-color] .swal2-popup { background: var(--foreground) !important; }

html[data-color^="dark-"] .swal2-popup {
  color: var(--eu-teks-1);
  border: 1px solid var(--separator);
  box-shadow: var(--eu-bayang);
}

/* Tintanya disamakan di kedua tema, bukan cuma yang gelap. Aslinya abu vendor
   #545454 dan #757575 yang tidak ada di palet. */
html[data-color] .swal2-title,
html[data-color] .swal2-toast .swal2-title {
  color: var(--eu-teks-1);
}

html[data-color] .swal2-html-container,
html[data-color] .swal2-footer {
  color: var(--eu-teks-2);
}

html[data-color] .swal2-footer { border-top-color: var(--separator); }

html[data-color] .swal2-close { color: var(--eu-teks-2); }
html[data-color] .swal2-close:hover { color: var(--eu-teks-1); }

/* Bilah waktu toast aslinya hitam beralpha, lenyap di atas permukaan gelap. */
html[data-color^="dark-"] .swal2-timer-progress-bar {
  background: rgba(230, 238, 245, .3);
}

/* Tombol dialog, di kedua tema. Aslinya ungu #7066e0 dan abu #6e7881, dua
   warna yang tidak ada di palet mana pun, dan tulisan putih di atas abu itu
   cuma 4,4:1. Tombolnya dipakai untuk menyetujui maupun menghapus, jadi
   nadanya primary, bukan danger.

   Selektornya diberi awalan html[data-color] supaya menang atas CSS yang
   disuntikkan sweetalert.all.js ke <head> sesudah berkas ini, tanpa
   !important. */
html[data-color] .swal2-styled.swal2-confirm {
  background-color: var(--primary);
  color: var(--light-text);
}

html[data-color^="dark-"] .swal2-styled.swal2-confirm { color: #08202f; }

html[data-color] .swal2-styled.swal2-cancel {
  background-color: transparent;
  border: 1px solid var(--separator);
  color: var(--eu-teks-1);
}

html[data-color] .swal2-styled.swal2-cancel:hover {
  background-color: var(--background-light);
}

html[data-color] .swal2-styled:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* =========================================================================
   Kolom aksi tabel
   -------------------------------------------------------------------------
   Dirangkai oleh aksi_tabel() di app/Helpers/custom.php. Satu aksi utama
   tampil sebagai tombol, sisanya turun ke menu titik tiga.

   Sebelumnya setiap controller membungkus aksinya dengan
   <nav aria-label="breadcrumb">, sehingga pembatas "|" bawaan Bootstrap
   muncul di antara tombol dan pecah ke baris kedua begitu selnya sempit.
   Pembaca layar juga mengumumkan satu navigasi breadcrumb per baris tabel.
   ========================================================================= */

.eu-aksi {
  display: flex;
  align-items: center;
  gap: 2px;
}

.eu-aksi__utama {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  font-weight: 600;
  color: var(--eu-teks-1);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--separator);
  border-radius: 7px;
  padding: .25rem .65rem;
  transition: background-color .14s ease, border-color .14s ease;
}

.eu-aksi__utama:hover,
.eu-aksi__utama:focus-visible {
  color: var(--eu-teks-1);
  background: var(--background-light);
  border-color: var(--muted);
}

.eu-aksi__ikon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--eu-teks-2);
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}

.eu-aksi__ikon:hover,
.eu-aksi__ikon:focus-visible {
  background: var(--background-light);
  color: var(--eu-teks-1);
}

.eu-aksi__ikon [data-acorn-icon] { width: 16px; height: 16px; }

/* Ikon menu langsung dirender bersama baris tabel, tanpa inisialisasi Acorn. */
.eu-aksi__ikon .eu-aksi__titik {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--light-text, #fff);
  fill: currentColor;
}

/* Satu satunya aksi dan sifatnya merusak, jadi nadanya dibawa di hover saja
   supaya tidak jadi titik merah di setiap baris. */
.eu-aksi__ikon--bahaya:hover,
.eu-aksi__ikon--bahaya:focus-visible {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.eu-aksi .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}

.eu-aksi .dropdown-item [data-acorn-icon] { width: 15px; height: 15px; }

/* Acorn menyetel warna .dropdown-item ke --body, jadi butir merusak perlu
   selektor yang lebih kuat, bukan !important. */
.eu-aksi .dropdown-item.eu-aksi__hapus,
.eu-aksi .dropdown-item.eu-aksi__hapus [data-acorn-icon] { color: var(--danger); }

.eu-aksi .dropdown-item.eu-aksi__hapus:hover,
.eu-aksi .dropdown-item.eu-aksi__hapus:hover [data-acorn-icon],
.eu-aksi .dropdown-item.eu-aksi__hapus:focus-visible {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

/* =========================================================================
   Halaman masuk dan wordmark
   ========================================================================= */

/* Ukurannya dulu ditulis di atribut style pada nav dan di atribut width plus
   height yang rasionya salah pada halaman masuk, sehingga browser menyediakan
   ruang yang salah lalu menggambar ulang. Lebarnya sekarang diatur di sini,
   bukan di markup. */
.eu-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}

.eu-logo--nav { width: 350px; }

/* Wordmark Artha berwarna putih di atas latar transparan, jadi yang lenyap
   justru di tema terang: putih di atas kartu putih dan bar atas putih. Diberi
   alas navy secukupnya, kebalikan dari kasus foto profil di bar atas yang
   perlu alas terang di tema gelap.

   Di tema gelap wordmark ini sudah terbaca sendiri, jadi tidak diberi alas.
   Begitu ada berkas versi tinta gelap, aturan ini bisa dibuang seluruhnya dan
   diganti penukaran berkas per tema. */
html[data-color^="light-"] .eu-logo {
  background: var(--primary);
  border-radius: 8px;
  padding: 10px 14px;
}

html[data-color^="light-"] .eu-logo--nav {
  border-radius: 6px;
  padding: 5px 9px;
}

.eu-masuk__kaki {
  margin: 2rem 0 0;
  font-size: var(--t-note);
  line-height: var(--t-note-lh);
  color: var(--eu-teks-2);
}

/* -------------------------------------------------------------------------
   Tombol bergaris
   -------------------------------------------------------------------------
   Bootstrap menulis .btn-outline-success sebagai color dan border-color
   #198754, nilai mati yang tidak pernah ikut tema. Di atas kartu tema gelap
   nilainya cuma 3,62:1, di bawah ambang 4,5:1, jadi tombolnya nyaris menyatu
   dengan latar saat diam. Begitu disinggahi ia terisi penuh dan mencolok.

   Buat yang memakainya, tombol Verifikasi dan Batal di halaman verifikasi
   pembelian terlihat hilang timbul, padahal tidak ada javascript apa pun di
   halaman itu dan tombolnya tidak pernah lepas dari DOM. Yang berubah cuma
   keterbacaannya, dan di halaman yang memutuskan uang orang masuk atau tidak
   itu bukan urusan kecil.

   Diambil dari peran warna tema, yang di tema gelap sudah dicerahkan: success
   jadi 6,89:1, danger 5,76:1, primary 5,72:1. Tinta saat terisi memakai navy
   pekat, bukan putih: putih di atas hijau muda cuma 2,38:1 sedangkan navy
   7,02:1. */
html[data-color] :is(.btn-outline-primary, .btn-outline-success, .btn-outline-danger,
                     .btn-outline-warning, .btn-outline-info, .btn-outline-secondary) {
  background-color: transparent;
  border-color: var(--peran);
  color: var(--peran);
}

html[data-color] :is(.btn-outline-primary, .btn-outline-success, .btn-outline-danger,
                     .btn-outline-warning, .btn-outline-info, .btn-outline-secondary):is(:hover, :focus-visible, :active) {
  background-color: var(--peran);
  border-color: var(--peran);
  /* !important terpaksa: styles.css menulis `color: var(--light-text)
     !important` untuk tombol bergaris yang disinggahi, dan putih di atas
     hijau muda tema gelap cuma 2,38:1. Navy pekat 7,02:1. */
  color: var(--eu-tinta-isian) !important;
}

html[data-color] .btn-outline-primary { --peran: var(--primary); }
html[data-color] .btn-outline-success { --peran: var(--success); }
html[data-color] .btn-outline-danger { --peran: var(--danger); }
html[data-color] .btn-outline-warning { --peran: var(--warning); }
html[data-color] .btn-outline-info { --peran: var(--info); }
html[data-color] .btn-outline-secondary { --peran: var(--secondary); }

/* -------------------------------------------------------------------------
   Tombol utama
   -------------------------------------------------------------------------
   Acorn menulis latar diam .btn-primary sebagai #1D3D58 yang di-hardcode,
   sedangkan hover dan keadaan aktifnya memakai var(--primary-darker). Dua
   sumber warna yang tidak pernah disamakan, jadi begitu nadanya diganti,
   tombolnya satu warna waktu diam dan warna lain waktu disentuh.

   Di sini keduanya diturunkan dari --eu-aksi yang sama, dan hover dihitung
   dari nada itu juga, jadi tidak ada nilai kedua yang harus diingat.

   Arah hover mengikuti warna teksnya. Waktu teksnya navy, hover diterangkan,
   sebab menggelapkan oranye justru menjatuhkan kontras navy. Sekarang teksnya
   putih, jadi logikanya terbalik: menerangkan oranye menurunkan kontras putih
   dari 3,40:1 ke 3,12:1, sedangkan menggelapkan 8 persen menaikkannya ke
   3,79:1. Hover tidak boleh membuat keadaan lebih buruk daripada diam. */
html[data-color] :is(.btn-primary, .btn-primary:focus, .btn-primary:disabled, .btn-primary.disabled),
html[data-color] :is(.btn-primary, .btn-primary:focus) * {
  background-color: var(--eu-aksi) !important;
  border-color: var(--eu-aksi) !important;
  color: var(--eu-aksi-teks) !important;
}

html[data-color] :is(.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active),
html[data-color] :is(.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active) * {
  background-color: color-mix(in srgb, var(--eu-aksi) 92%, #000) !important;
  border-color: color-mix(in srgb, var(--eu-aksi) 92%, #000) !important;
  color: var(--eu-aksi-teks) !important;
}

/* -------------------------------------------------------------------------
   Permukaan .bg-foreground dan kolom isian di dalamnya
   -------------------------------------------------------------------------
   Akar semua kekacauannya ada di satu aturan styles.css:

       .bg-foreground { background-color: #f8fbfd !important;
                        color: var(--primary) !important; }

   Latarnya nilai terang mati, satu satunya utilitas latar di styles.css yang
   tidak lewat variabel, dan warnanya dipaksa ke var(--primary) yang justru
   berbalik jadi biru muda di tema gelap.

   Kelas ini dipakai 25 tempat, bukan cuma di halaman masuk: kotak cari di
   setiap halaman tabel dan select filter di tabel livewire. Semuanya tetap
   putih menyala di tema gelap.

   Sebelumnya permukaannya dibiarkan terang dan isinya ikut dikunci terang
   supaya tetap terbaca. Itu benar untuk halaman masuk, tapi salah untuk 24
   pemakaian lainnya yang duduk di atas kartu bertema. Sekarang yang dibalik
   permukaannya: latarnya ditarik ke var(--foreground), sehingga isinya boleh
   ikut tema seperti kolom isian mana pun.

   Latar dan warna teksnya perlu !important karena aturan aslinya juga
   !important. Sisanya cukup dimenangkan lewat spesifisitas.

   Angkanya, terukur di atas kartu putih dan kartu #0a2135:
     teks yang diketik  --eu-teks-1        16,15:1 dan 13,97:1
     placeholder        --eu-teks-2         5,31:1 dan  6,77:1
     garis kolom diam   --eu-garis-kontrol  3,13:1 dan  3,65:1, ambang 1.4.11
     garis saat fokus   --primary          11,29:1 dan  5,72:1
     garis tidak sah    --danger            6,35:1 dan  5,76:1

   Latar harus var(--foreground), bukan #FEF6E7 atau #f8fbfd. Netralnya navy
   dingin (DESIGN.md §7). Kartu masuk (.eu-masuk__kartu) sengaja putih dan
   dikecualikan di blok bawah.
   ------------------------------------------------------------------------- */
html[data-color] .bg-foreground {
  background-color: var(--foreground) !important;
  color: var(--eu-teks-1) !important;
}

html[data-color] .bg-foreground .form-control,
html[data-color] .bg-foreground .form-control:focus,
html[data-color] .bg-foreground .form-select,
html[data-color] .bg-foreground .form-select:focus {
  background: transparent;
  color: var(--eu-teks-1);
  border: 1px solid var(--eu-garis-kontrol);
  transition: border-color .14s ease, box-shadow .14s ease;
}

html[data-color] .bg-foreground .form-control:hover:not(:focus),
html[data-color] .bg-foreground .form-select:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--eu-garis-kontrol) 70%, var(--eu-teks-1));
}

html[data-color] .bg-foreground .form-control:focus,
html[data-color] .bg-foreground .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

html[data-color] .bg-foreground .form-control.is-invalid,
html[data-color] .bg-foreground .form-control.is-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent) !important;
}

/* Placeholder harus jelas lebih pudar dari teks yang diketik, tapi tetap
   terbaca. Kalau sama pekatnya, kolom kosong tidak bisa dibedakan dari kolom
   yang sudah diisi. */
html[data-color] .bg-foreground .form-control::placeholder { color: var(--eu-teks-2); }

html[data-color] .bg-foreground .filled > [data-acorn-icon],
html[data-color] .bg-foreground .filled > svg,
html[data-color] .bg-foreground .search-magnifier-icon,
html[data-color] .bg-foreground .search-delete-icon {
  color: var(--eu-teks-2);
  transition: color .14s ease;
}

html[data-color] .bg-foreground .filled:focus-within > [data-acorn-icon],
html[data-color] .bg-foreground .filled:focus-within > svg,
html[data-color] .bg-foreground .search-magnifier-icon:hover,
html[data-color] .bg-foreground .search-delete-icon:hover { color: var(--primary); }

/* Badge dan chip status di setiap tabel. */
.badge {
  font-size: var(--t-note);
  line-height: var(--t-note-lh);
  font-weight: 500;
}

/* Pesan kesalahan halaman masuk. Sebelumnya seluruh kesalahan ditumpuk jadi
   daftar di dalam alert merah di atas form, jadi pembacanya harus menebak
   sendiri kolom mana yang salah. Sekarang menempel di kolomnya. */
.eu-masuk__galat {
  margin: .4rem 0 0;
  font-size: var(--t-note);
  line-height: var(--t-note-lh);
  font-weight: 500;
  color: var(--danger);
}

/* Kolom bergaya .filled memakai garis transparan, jadi keadaan salah tidak
   terlihat sama sekali tanpa aturan ini. Ikon peringatan bawaan Bootstrap
   dimatikan karena pesannya sudah ditulis di bawah kolom. */
.filled .form-control.is-invalid,
.filled .form-control.is-invalid:focus {
  border-color: var(--danger);
  background-image: none;
}

/* =========================================================================
   Lonceng antrean verifikasi
   ========================================================================= */

.eu-lonceng { position: relative; }

.eu-lonceng > a { position: relative; display: inline-flex; }

/* Tautannya setinggi bar, ikonnya cuma 20px dan duduk di tengah. Lencana
   dipatok ke tengah lalu dinaikkan supaya menempel di pojok kanan atas ikon,
   bukan melayang di sudut tautannya. */
.eu-lonceng__hitung {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--danger);
  color: var(--light-text);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--background-navcolor-light, var(--foreground));
}

/* Nada danger di tema gelap sudah diangkat supaya terbaca sebagai teks,
   akibatnya terlalu terang untuk tulisan putih di atasnya. */
html[data-color^="dark-"] .eu-lonceng__hitung { color: #08202f; }

/* Acorn membuang garis dropdown di dalam bar atas lewat
   html[data-placement=...] .nav-container .dropdown-menu { border: initial },
   spesifisitasnya 0,3,1. Panel ini perlu tepinya, jadi selektornya ditiru
   persis supaya menang tanpa !important. */
html[data-placement] .nav-container .eu-lonceng__panel,
.eu-lonceng__panel {
  min-width: 250px;
  padding: 6px;
  border: 1px solid var(--separator);
  border-radius: 10px;
  box-shadow: var(--eu-bayang);
}

.eu-lonceng__kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem .5rem .5rem;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--separator);
  font-size: var(--t-note);
  line-height: var(--t-note-lh);
  font-weight: 600;
  color: var(--eu-teks-2);
}

.eu-lonceng__kepala [data-ringkas] { color: var(--eu-teks-1); font-variant-numeric: tabular-nums; }

.eu-lonceng__baris {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .5rem;
  border-radius: 7px;
  text-decoration: none;
}

.eu-lonceng__baris + .eu-lonceng__baris { margin-top: 1px; }
.eu-lonceng__baris:hover { background: var(--background-light); }

.eu-lonceng__isi { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.eu-lonceng__nama {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: 600;
  color: var(--eu-teks-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Penanda item yang masuk sesudah lonceng terakhir dibuka. Hilang begitu
   loncengnya dibuka lagi. */
.eu-lonceng__titik {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--danger);
}

.eu-lonceng__meta {
  font-size: var(--t-note);
  line-height: var(--t-note-lh);
  color: var(--eu-teks-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eu-lonceng__nilai {
  flex: none;
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  font-weight: 700;
  color: var(--eu-teks-1);
  font-variant-numeric: tabular-nums;
}

/* Keempat antrean nilainya uang, jadi satuannya selalu USDT. Ditulis lebih
   ringan supaya angkanya tetap yang dibaca duluan. */
.eu-lonceng__satuan {
  margin-left: .25rem;
  font-weight: 500;
  color: var(--eu-teks-2);
}

/* Kaki panel: jalan ke daftar penuh tiap jenis, sekaligus penampung sisa item
   yang tidak muat ditampilkan satu per satu. */
.eu-lonceng__kaki {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--separator);
  display: flex;
  flex-direction: column;
}

.eu-lonceng__kaki-tautan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem .5rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: var(--t-note);
  line-height: var(--t-note-lh);
  font-weight: 500;
  color: var(--eu-teks-2);
}

.eu-lonceng__kaki-tautan:hover { background: var(--background-light); color: var(--eu-teks-1); }
.eu-lonceng__kaki-tautan b { color: var(--eu-teks-1); font-variant-numeric: tabular-nums; }

.eu-lonceng__tile {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.eu-lonceng__tile [data-acorn-icon] { width: 14px; height: 14px; }

.eu-lonceng__label {
  flex: 1;
  min-width: 0;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: 500;
  color: var(--eu-teks-1);
  white-space: nowrap;
}

.eu-lonceng__pil {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--background-light);
  font-size: var(--t-note);
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--eu-teks-1);
  font-variant-numeric: tabular-nums;
}

.eu-lonceng__kosong {
  margin: 0;
  padding: 1rem .5rem 1.1rem;
  text-align: center;
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
}

/* Kartu antrean di dasbor operator. Angkanya yang dibaca duluan, labelnya
   menyusul, jadi urutannya dibalik dari kartu biasa. */
.eu-antrean {
  position: relative;
  display: block;
  padding: 1.125rem;
  height: 100%;
  text-decoration: none;
  transition: border-color .14s ease;
}

.eu-antrean:hover { border-color: var(--primary); }

.eu-antrean__jumlah {
  font-size: var(--t-display);
  line-height: var(--t-display-lh);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--eu-teks-1);
  font-variant-numeric: tabular-nums;
}

.eu-antrean__label {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  font-weight: 500;
  color: var(--eu-teks-2);
  margin-top: .15rem;
}

/* Kartu tanpa antrean diturunkan bobotnya. Nol dan satu tidak boleh terbaca
   sama kuat, kalau tidak yang benar benar punya kerja harus dicari satu satu.
   Yang turun bobot dan tingkat tintanya, bukan ukurannya, supaya barisan
   kartunya tetap rata. */
.eu-antrean.is-nol .eu-antrean__jumlah {
  color: var(--eu-teks-2);
  font-weight: 600;
}

/* Lencana hitung di pojok kartu. Nadanya sengaja sama dengan lonceng di bar
   atas karena angkanya memang angka yang sama, satu sinyal satu warna. */
.eu-antrean__lencana,
.eu-kantong__lencana {
  position: absolute;
  top: .875rem;
  right: .875rem;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--danger);
  color: var(--light-text);
  font-size: var(--t-note);
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Nada danger di tema gelap sudah diangkat supaya terbaca sebagai teks,
   akibatnya terlalu terang untuk tulisan putih di atasnya. */
html[data-color^="dark-"] :is(.eu-antrean__lencana, .eu-kantong__lencana) { color: #08202f; }

/* Kartu ringkasan tidak selalu membutuhkan lencana. Hanya kartu yang memiliki
   pekerjaan mendesak, seperti penarikan tertunda, menjadi penampung relatif. */
.eu-kantong--bernotifikasi { position: relative; }

/* Daftar item di dasbor. Barisnya memakai kelas lonceng, yang beda cuma
   penampungnya: di sini sebuah kartu, bukan panel melayang, jadi ruang
   dalamnya sedikit lebih lega dan tidak perlu bayangan lagi. */
.eu-antrean-daftar { padding: .5rem; }
.eu-antrean-daftar .eu-lonceng__baris { padding: .55rem .625rem; }
.eu-antrean-daftar .eu-kosong { padding: 1.75rem 0; }

/* Lencana antrean di menu bar atas. Lonceng cuma terlihat kalau dilirik,
   menu yang menyimpan pekerjaannya juga perlu ikut bilang. */
.eu-menu-lencana {
  display: inline-block;
  min-width: 17px;
  height: 17px;
  margin-left: .35rem;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--danger);
  color: var(--light-text);
  font-size: var(--t-note);
  line-height: 17px;
  font-weight: 700;
  text-align: center;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}

html[data-color^="dark-"] .eu-menu-lencana { color: #08202f; }

/* =========================================================================
   Kartu verifikasi yang dituju dari lonceng
   -------------------------------------------------------------------------
   Tautan di lonceng menunjuk ke #item-<id>. Tanpa scroll-margin-top, kartunya
   berhenti persis di bawah bar atas yang menempel dan tertutup separuh.
   Sorotannya sekali jalan lalu memudar, cukup untuk menunjukkan yang mana
   tanpa meninggalkan bekas warna permanen di halaman.
   ========================================================================= */

.eu-sasaran { scroll-margin-top: 96px; }

.eu-sasaran:target > .card {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  animation: eu-sorot 2.4s ease-out 1;
}

@keyframes eu-sorot {
  0%, 55% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
  100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .eu-sasaran:target > .card { animation: none; }
}

/* Tombol mata di halaman masuk: warnanya mengikuti teks yang diketik,
   bukan warna ikon SVG bawaan .filled yang pudar. */
html[data-color] .bg-foreground .filled .eu-tampilkan-sandi,
html[data-color] .bg-foreground .filled .eu-tampilkan-sandi svg {
  color: var(--eu-teks-kuat) !important;
}

/* -------------------------------------------------------------------------
   Kartu halaman masuk tetap terang di kedua tema
   -------------------------------------------------------------------------
   Permintaan pemilik produk: halaman masuk kembali putih seperti sebelumnya.
   Yang dibalik cuma tokennya, bukan tiap aturannya. Seluruh aturan
   .bg-foreground di atas sudah memakai var(), jadi menukar tinta di sini
   membuat teks, placeholder, garis kolom, garis fokus, ikon mata, dan pesan
   galat ikut kembali ke nilai terangnya tanpa satu pun aturan diulang.

   Hanya kartu masuk yang dikecualikan. Kotak cari dan select filter di
   halaman tabel memakai .bg-foreground yang sama dan tetap ikut tema, karena
   memang duduk di atas kartu bertema.

   Latarnya perlu !important karena aturan .bg-foreground juga !important, dan
   blok ini ditaruh paling akhir supaya menang pada spesifisitas yang sama.
   ------------------------------------------------------------------------- */
html[data-color] .eu-masuk__kartu {
  background-color: #fff !important;
  color: var(--eu-teks-1) !important;

  /* Ketiga tingkat tintanya ditulis utuh, bukan cuma tripletnya. var() di
     dalam custom property disubstitusi di tempat ia dideklarasikan, jadi
     --eu-teks-1 yang dirakit di <html> sudah telanjur memakai triplet tema
     gelap dan tidak dihitung ulang di sini. */
  --eu-teks-rgb: 8 35 52;
  --eu-teks-1: rgb(8 35 52);
  --eu-teks-2: rgb(8 35 52 / .66);
  --eu-teks-3: rgb(8 35 52 / .48);
  --eu-teks-kuat: rgb(8 35 52);
  --eu-garis-kontrol: #88939e;
  --primary-rgb: 29, 61, 88;
  --primary: rgb(var(--primary-rgb));
  --danger: #b4283c;
}

/* Logo di halaman masuk tidak butuh alas, dan alas justru merusaknya.
   Berkasnya beda dengan wordmark di bar atas:

     logo-wide.png  (bar atas)      putih murni di atas transparan
     logo-depan.png (halaman masuk) navy #003048 dan oranye #d86030

   Aturan alas navy dibuat untuk yang putih. Dipakai pada yang berwarna,
   wordmark navy itu duduk di atas navy dan cuma 1,23:1, praktis lenyap. Di
   atas kartu putih tanpa alas ia terbaca 13,85:1. Aturan lamanya dipagari
   html[data-color^="light-"], jadi dilepas di sini untuk kedua tema. */
html[data-color] .eu-masuk__kartu .eu-logo {
  background: none;
  padding: 0;
}

/* Persetujuan wajib dibaca sebelum akun anggota dibuat. Tombol simpan baru
   ditampilkan sesudah checkbox dicentang; aturan CSS ini tetap berfungsi
   tanpa JavaScript.

   Lebarnya dulu dipatok 75ch demi lebar baca yang nyaman, tapi di dalam form
   hasilnya blok yang berhenti di tengah sementara kolom isian dan alert di
   atasnya menyentuh tepi kartu, jadi terbaca seperti salah taruh. Kalimatnya
   pendek dan cuma satu, jadi lebar penuh masih terbaca dan barisannya rapi.
   Di layar sempit ia menyusut sendiri mengikuti kartunya. */
.eu-persetujuan {
  width: 100%;
}

/* Kotak centang dan teksnya sejajar di puncak, bukan di tengah baris, supaya
   waktu kalimatnya membungkus jadi dua baris di layar sempit kotaknya tetap
   berada di sebelah baris pertama. */
.eu-persetujuan .form-check {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: 0;
  padding: 0;
}

.eu-persetujuan .form-check-input {
  margin: .15rem 0 0;
  flex: none;
  float: none;
}

.eu-persetujuan .form-check-label {
  color: var(--eu-teks-2);
  cursor: pointer;
}

.eu-persetujuan__bantuan {
  margin-top: .5rem;
  color: var(--eu-teks-2);
  font-size: var(--t-note);
  line-height: 1.4;
}

.eu-persetujuan__submit {
  display: none;
}

.eu-persetujuan:has(#persetujuan-member:checked) .eu-persetujuan__submit {
  display: inline-flex;
}

.eu-persetujuan:has(#persetujuan-member:checked) .eu-persetujuan__bantuan {
  display: none;
}

/* -------------------------------------------------------------------------
   Status kesiapan
   -------------------------------------------------------------------------
   Tiga tampilan dari satu sumber, KesiapanService: kartu peringatan di dasbor
   operator, tabel rincian di halaman Konfigurasi, dan halaman tertahan yang
   menggantikan 404 di sisi member.

   Tidak ada nada baru di sini. Kesiapan bukan transaksi, jadi hijau dan merah
   tidak boleh dipakai untuk membedakan siap dan belum, sesuai bagian 5. Yang
   membedakan bobot dan tingkat tinta, pola yang sama dengan .eu-antrean:
   yang belum beres terbaca lebih kuat, yang sudah beres mundur ke tinta
   sekunder. Satu satunya nada di kartu ini lencana angkanya, dan itu memakai
   ulang .eu-kantong__lencana supaya satu sinyal tetap satu warna. */

.eu-siap { padding: 1.125rem 1.25rem; }

.eu-siap__kepala { display: flex; align-items: flex-start; gap: .75rem; }

.eu-siap__judul {
  font-size: var(--t-section);
  line-height: var(--t-section-lh);
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--eu-teks-1);
  margin: 0;
}

.eu-siap__ringkas {
  color: var(--eu-teks-2);
  margin: .15rem 0 0;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}

.eu-siap__aksi { margin-left: auto; flex: none; }

/* Dipisah garis rambut, bukan permukaan baru, karena kartu di dalam kartu
   dilarang. */
.eu-siap__daftar {
  list-style: none;
  margin: .875rem 0 0;
  padding: .875rem 0 0;
  border-top: 1px solid var(--separator);
}

.eu-siap__item { display: flex; align-items: baseline; gap: .5rem; padding: .4rem 0; }
.eu-siap__item + .eu-siap__item { border-top: 1px solid var(--separator-light); }

.eu-siap__nama {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: 600;
  color: var(--eu-teks-1);
}

.eu-siap__sebab {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
}

/* Fitur yang mati, bukan nama kolom database. Yang dibaca pemilik masalah
   adalah apa yang berhenti. */
.eu-siap__dampak {
  margin-left: auto;
  flex: none;
  font-size: var(--t-note);
  line-height: var(--t-note-lh);
  color: var(--eu-teks-2);
  text-align: right;
}

/* Prasyarat yang diperbaiki di halaman lain jadi tautan, dan tautan memang
   peran --primary menurut bagian 5. Percobaan sebelumnya memakai warna warisan
   dengan garis bawah --eu-garis-kontrol saja, dan hasilnya tidak terbaca
   sebagai sesuatu yang bisa diklik. Hierarki tabelnya tetap tidak bergantung
   warna: bobot 600 dan tingkat tinta yang menyusunnya, warna di sini menandai
   "ada tujuan di balik ini", bukan tingkat kepentingan. */
.eu-siap__tautan {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .14s ease;
}

.eu-siap__tautan:hover,
.eu-siap__tautan:focus-visible {
  color: var(--primary);
  text-decoration-color: var(--primary);
}

/* Keterangan lingkup di bawah judul tabel kesiapan. Tabel ini duduk di halaman
   Konfigurasi tapi tidak semua barisnya diatur di form bawahnya, dan itu perlu
   dikatakan, bukan dibiarkan disimpulkan sendiri. */
.eu-siap-lingkup {
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
  margin: .1rem 0 0;
}

/* Status di tabel Konfigurasi. Berteks penuh, tanpa pil dan tanpa nada, jadi
   terbaca sama jelasnya oleh yang tidak membedakan warna. */
.eu-status {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  white-space: nowrap;
}

.eu-status--belum { font-weight: 600; color: var(--eu-teks-1); }
.eu-status--siap { font-weight: 400; color: var(--eu-teks-2); }

.eu-siap-tabel td { vertical-align: top; }

.eu-siap-tabel .ket {
  display: block;
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--eu-teks-2);
  margin-top: .1rem;
}

/* Halaman tertahan, pengganti 404. Meneruskan bentuk .eu-kosong yang sudah
   dipakai untuk tabel kosong, jadi member sudah kenal bentuknya. */
.eu-tahan {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 2.75rem 1.5rem;
}

.eu-tahan__judul {
  font-size: var(--t-title);
  line-height: var(--t-title-lh);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--eu-teks-1);
  margin: 0 0 .4rem;
}

.eu-tahan__isi {
  color: var(--eu-teks-2);
  margin: 0 auto 1.25rem;
  max-width: 44ch;
}

.eu-tahan__aksi { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 767.98px) {
  /* Di layar sempit tombolnya turun ke bawah teks, dan kolom dampak ikut
     turun supaya nama prasyaratnya tidak tergencet jadi dua huruf per baris. */
  .eu-siap__kepala { flex-wrap: wrap; }
  .eu-siap__aksi { margin-left: 0; width: 100%; }
  .eu-siap__aksi .btn { width: 100%; justify-content: center; }
  .eu-siap__item { flex-wrap: wrap; }
  .eu-siap__dampak { margin-left: 0; text-align: left; }
}

/* -------------------------------------------------------------------------
   Paginasi di layar sempit
   -------------------------------------------------------------------------
   Di bawah breakpoint sm, paginasi Laravel berganti dari nomor halaman jadi
   dua tombol berkata, "Previous" dan "Next". Acorn mematok .page-link ke
   --input-height supaya nomor halaman jadi kotak seragam 36px, dan kata di
   dalam kotak selebar itu pecah jadi satu huruf per baris. Yang dilepas cuma
   patokan lebarnya, dan hanya di blok yang memang berisi kata, jadi kotak
   nomor halaman di layar lebar tidak tersentuh. */
.d-sm-none .pagination .page-link {
  width: auto;
  min-width: var(--input-height);
  white-space: nowrap;
}