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

.select2-container--bootstrap4 .select2-results__group {
    color: #3f8be1;
    font-weight: bold;
    padding: 6px 12px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin-top: 4px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

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

/* =========================================================================
   EUFORIA 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. */
  --primary: #1d3d58;
  --secondary: #0f7a80;
  --tertiary: #7160a8;
  --quaternary: #107c41;

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

  --danger: #b4283c;
  --danger-darker: #8f1f30;
  --success: #0f7540;
  --success-darker: #0d6334;
  --warning: #b7791f;
  --warning-darker: #935f18;
  --info: #2a6499;
  --info-darker: #245785;

  --background: #f7f8fa;
  --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 Euforia, 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: #4a9fe0;
  --primary-darker: #3a86c4;
  --secondary: #2fa39f;
  --tertiary: #9b8ad0;
  --quaternary: #34a85f;
  --success: #4cbb92;
  --danger: #e87a5f;
  --warning: #e0a33c;
  --info: #63b3e0;

  --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 { border-top: 3px solid var(--primary); padding: 1.375rem; }

.eu-saldo__label,
.eu-paket__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--muted);
}

.eu-saldo__angka {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: var(--eu-teks-kuat);
  font-variant-numeric: tabular-nums;
  margin: .5rem 0 .875rem;
}

.eu-saldo__satuan {
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: .4rem;
}

.eu-saldo__pecah {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1rem;
  font-size: .8rem;
  color: var(--muted);
  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-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--eu-teks-kuat);
}

.eu-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--separator);
  overflow: hidden;
  margin-bottom: .875rem;
}

.eu-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  /* navy ke biru terang: satu satunya tempat gradasi dipakai, supaya progres
     kontrak jadi elemen paling menarik mata setelah angka saldo */
  background: linear-gradient(90deg, var(--primary), #3f92db);
}

/* Tingkat 2: tiga kantong bonus, setara satu sama lain */
.eu-kantong { padding: 1.125rem; position: relative; overflow: hidden; height: 100%; }
.eu-kantong::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone); }

.eu-kantong__nilai {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--eu-teks-kuat);
  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 dashed var(--separator);
  font-size: .74rem;
  color: var(--muted);
}

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

/* 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: .83rem; font-weight: 700; color: var(--eu-teks-kuat); }
.eu-baris__waktu { font-size: .72rem; color: var(--muted); }
.eu-baris__nilai { font-size: .87rem; font-weight: 700; font-variant-numeric: tabular-nums; }

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

@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 garis 3px dan petak ikon.
   ------------------------------------------------------------------------- */

.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-left: 3px solid var(--tone);
  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-kuat) !important; }
.card[class*="bg-"] .text-white-50 { color: var(--muted) !important; }
.card[class*="bg-"] .text-muted { color: var(--muted) !important; }
.card[class*="bg-"] .cta-1,
.card[class*="bg-"] .cta-2,
.card[class*="bg-"] .cta-3 {
  color: var(--eu-teks-kuat) !important;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

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