/* ================================================================
   BESMM PANEL — Palet Warna Tema (Mode Terang & Mode Gelap)
   Dipilih admin: Admin > Configuration > Tema Warna
     Mode terang (utility light_palette): default (ungu) | orange (oranye cerah) | green (hijau terang)
     Mode gelap  (utility dark_palette) : green (hijau tua, default) | orange (oranye tua) | black (hitam mengkilap)
   Atribut di <html>: data-theme="dark" (toggle user), data-dark="..." & data-light="..." (pengaturan admin).
   Variabel:
     --lt-1 / --lt-2 / --lt-rgb / --lt-soft / --lt-3 : aksen utama halaman (tombol, banner, chip). Default = ungu lama.
     --dk-*                                          : warna latar/kartu/garis/aksen saat mode gelap.
   ================================================================ */

/* ══════════════ MODE TERANG ══════════════ */
/* Oranye cerah */
html[data-light="orange"] {
  --lt-1: #ff6a00; --lt-2: #ff9100; --lt-rgb: 255,106,0; --lt-soft: #fff1e6; --lt-3: #ffb066;
}
html[data-light="orange"]:not([data-theme="dark"]) {
  --lt-ink: #111827;   /* teks yang dulu berwarna aksen -> hitam agar terbaca */
  --lt-on:  #111827;   /* teks di atas latar oranye (tombol, banner) -> hitam */
  --lt-all: 255,106,0; /* warna kategori (game, voucher, e-money, dll.) ikut oranye */
  --lt-hero: linear-gradient(135deg, #ff6a00 0%, #ff9100 100%); /* banner halaman yang punya warna sendiri */
}
/* Hijau terang */
html[data-light="green"] {
  --lt-1: #00b14f; --lt-2: #22c55e; --lt-rgb: 0,177,79; --lt-soft: #e8f9ef; --lt-3: #6ee7a0;
}
html[data-light="green"]:not([data-theme="dark"]) {
  --lt-ink: #111827;
  --lt-on:  #111827;
  --lt-all: 0,177,79;
  --lt-hero: linear-gradient(135deg, #00b14f 0%, #22c55e 100%);
}
/* Komponen Bootstrap/Vuexy (bawaan #7367f0) ikut warna terang terpilih */
html[data-light="orange"]:not([data-theme="dark"]) .btn-primary,
html[data-light="green"]:not([data-theme="dark"]) .btn-primary,
html[data-light="orange"]:not([data-theme="dark"]) .bg-primary,
html[data-light="green"]:not([data-theme="dark"]) .bg-primary,
html[data-light="orange"]:not([data-theme="dark"]) .badge-primary,
html[data-light="green"]:not([data-theme="dark"]) .badge-primary,
html[data-light="orange"]:not([data-theme="dark"]) .page-item.active .page-link,
html[data-light="green"]:not([data-theme="dark"]) .page-item.active .page-link,
html[data-light="orange"]:not([data-theme="dark"]) .nav-pills .nav-link.active,
html[data-light="green"]:not([data-theme="dark"]) .nav-pills .nav-link.active,
html[data-light="orange"]:not([data-theme="dark"]) .custom-control-input:checked ~ .custom-control-label::before,
html[data-light="green"]:not([data-theme="dark"]) .custom-control-input:checked ~ .custom-control-label::before,
html[data-light="orange"]:not([data-theme="dark"]) .progress-bar,
html[data-light="green"]:not([data-theme="dark"]) .progress-bar {
  background: linear-gradient(135deg, var(--lt-1), var(--lt-2)) !important;
  background-color: var(--lt-1) !important;
  border-color: var(--lt-1) !important;
  color: var(--lt-on) !important;
}
html[data-light="orange"]:not([data-theme="dark"]) .btn-primary:hover,
html[data-light="green"]:not([data-theme="dark"]) .btn-primary:hover { box-shadow: 0 8px 22px -10px rgba(var(--lt-rgb),.9) !important; filter: brightness(1.05); }
html[data-light="orange"]:not([data-theme="dark"]) .btn-outline-primary,
html[data-light="green"]:not([data-theme="dark"]) .btn-outline-primary { color: var(--lt-ink) !important; border-color: var(--lt-1) !important; }
html[data-light="orange"]:not([data-theme="dark"]) .btn-outline-primary:hover,
html[data-light="green"]:not([data-theme="dark"]) .btn-outline-primary:hover { background: var(--lt-1) !important; color: var(--lt-on) !important; }
html[data-light="orange"]:not([data-theme="dark"]) .text-primary,
html[data-light="green"]:not([data-theme="dark"]) .text-primary,
html[data-light="orange"]:not([data-theme="dark"]) a:not([class]),
html[data-light="green"]:not([data-theme="dark"]) a:not([class]) { color: var(--lt-ink) !important; }
html[data-light="orange"]:not([data-theme="dark"]) .badge-light-primary,
html[data-light="green"]:not([data-theme="dark"]) .badge-light-primary { background: rgba(var(--lt-rgb),.18) !important; color: var(--lt-ink) !important; }
html[data-light="orange"]:not([data-theme="dark"]) .form-control:focus,
html[data-light="green"]:not([data-theme="dark"]) .form-control:focus { border-color: var(--lt-1) !important; box-shadow: 0 0 0 .2rem rgba(var(--lt-rgb),.18) !important; }
html[data-light="orange"]:not([data-theme="dark"]) .main-menu.menu-light .navigation > li.active > a,
html[data-light="green"]:not([data-theme="dark"]) .main-menu.menu-light .navigation > li.active > a,
html[data-light="orange"]:not([data-theme="dark"]) .main-menu.menu-light .navigation > li ul .active,
html[data-light="green"]:not([data-theme="dark"]) .main-menu.menu-light .navigation > li ul .active {
  background: linear-gradient(118deg, var(--lt-1), rgba(var(--lt-rgb),.72)) !important;
  box-shadow: 0 0 10px 1px rgba(var(--lt-rgb),.5) !important; color: var(--lt-on) !important;
}
html[data-light="orange"]:not([data-theme="dark"]) .main-menu.menu-light .navigation > li.active > a *,
html[data-light="green"]:not([data-theme="dark"]) .main-menu.menu-light .navigation > li.active > a *,
html[data-light="orange"]:not([data-theme="dark"]) .main-menu.menu-light .navigation > li ul .active *,
html[data-light="green"]:not([data-theme="dark"]) .main-menu.menu-light .navigation > li ul .active * { color: var(--lt-on) !important; }
html[data-light="orange"]:not([data-theme="dark"]) .main-menu.menu-light .navigation li a:hover,
html[data-light="green"]:not([data-theme="dark"]) .main-menu.menu-light .navigation li a:hover { color: var(--lt-ink) !important; background: rgba(var(--lt-rgb),.12) !important; }
html[data-light="orange"]:not([data-theme="dark"]) #footer-bar a.active-nav i,
html[data-light="green"]:not([data-theme="dark"]) #footer-bar a.active-nav i,
html[data-light="orange"]:not([data-theme="dark"]) #footer-bar a.active-nav span,
html[data-light="green"]:not([data-theme="dark"]) #footer-bar a.active-nav span { color: var(--lt-ink) !important; }
html[data-light="orange"]:not([data-theme="dark"]) #footer-bar a.active-nav em,
html[data-light="green"]:not([data-theme="dark"]) #footer-bar a.active-nav em { background: var(--lt-1) !important; }

/* ══════════════ MODE GELAP ══════════════ */
/* Hijau tua (default) */
html[data-theme="dark"],
html[data-theme="dark"][data-dark="green"] {
  --dk-bg:          #0b1510;  /* latar halaman */
  --dk-surface:     #11221a;  /* kartu, navbar, sidebar */
  --dk-surface-2:   #0e1c15;  /* input, area dalam kartu */
  --dk-surface-3:   #183324;  /* hover / fokus */
  --dk-border:      #224331;
  --dk-accent:      #00aa5b;  /* hijau Tokopedia */
  --dk-accent-rgb:  0,170,91;
  --dk-accent-2:    #03ac0e;
  --dk-accent-grad: linear-gradient(180deg, #00aa5b 0%, #03ac0e 100%);
  --dk-accent-soft: #4fd18b;  /* link / teks aktif */
  --dk-muted:       #7f9c8c;
  --dk-text-2:      #b5cabd;
  --dk-gloss:       none;
  color-scheme: dark;
}

/* Oranye tua (gradasi #F63F2D -> #F84C2F) */
html[data-theme="dark"][data-dark="orange"] {
  --dk-bg:          #160b08;
  --dk-surface:     #24120d;
  --dk-surface-2:   #1c0e0a;
  --dk-surface-3:   #331a12;
  --dk-border:      #4d2419;
  --dk-accent:      #f63f2d;
  --dk-accent-rgb:  246,63,45;
  --dk-accent-2:    #f84c2f;
  --dk-accent-grad: linear-gradient(180deg, #f63f2d 0%, #f84c2f 100%);
  --dk-accent-soft: #ff7a5c;
  --dk-muted:       #a98679;
  --dk-text-2:      #d8beb3;
}

/* Hitam mengkilap (piano black): latar hitam pekat, permukaan berkilau, aksen perak/grafit */
html[data-theme="dark"][data-dark="black"] {
  --dk-bg:          #050505;
  --dk-surface:     #121212;
  --dk-surface-2:   #0b0b0b;
  --dk-surface-3:   #1d1d1f;
  --dk-border:      #2b2b2e;
  --dk-accent:      #3f3f46;
  --dk-accent-rgb:  140,140,150;
  --dk-accent-2:    #27272a;
  --dk-accent-grad: linear-gradient(180deg, #5c5c63 0%, #2c2c30 48%, #141416 52%, #1f1f22 100%);
  --dk-accent-soft: #e4e4e7;
  --dk-muted:       #8b8b93;
  --dk-text-2:      #c8c8ce;
  --dk-gloss:       linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,0) 60%);
}
/* Efek kilap pada kartu, navbar, sidebar & navbar bawah */
html[data-theme="dark"][data-dark="black"] .card,
html[data-theme="dark"][data-dark="black"] .header-navbar,
html[data-theme="dark"][data-dark="black"] .main-menu,
html[data-theme="dark"][data-dark="black"] #footer-bar,
html[data-theme="dark"][data-dark="black"] .modal-content,
html[data-theme="dark"][data-dark="black"] .dropdown-menu { background-image: var(--dk-gloss) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px -12px rgba(0,0,0,.9) !important; }
html[data-theme="dark"][data-dark="black"] .btn-primary,
html[data-theme="dark"][data-dark="black"] .main-menu .navigation > li.active > a { border: 1px solid #4a4a50 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px -8px rgba(0,0,0,.9) !important; }

/* Di mode gelap, aksen halaman (banner, tombol, chip) mengikuti palet gelap */
html[data-theme="dark"] {
  --lt-1: var(--dk-accent); --lt-2: var(--dk-accent-2); --lt-rgb: var(--dk-accent-rgb);
  --lt-soft: rgba(var(--dk-accent-rgb), .15); --lt-3: var(--dk-accent-soft);
}


/* ══════════════ MODE TERANG BERWARNA (Oranye Cerah / Hijau Terang) ══════════════
   Logika sama seperti mode gelap: SELURUH halaman (latar, kartu, sidebar, navbar, input) berwarna,
   hanya TEKS yang hitam. Aktif saat mode terang + pilihan Oranye Cerah/Hijau Terang
   (<html data-theme="dark" data-tint="orange|green">, diatur skrip tema). */
html[data-theme="dark"][data-tint="orange"] {
  --dk-bg:          #e9ecef;   /* latar halaman: putih silver */
  --dk-surface:     #f8f9fa;   /* kartu, navbar, sidebar */
  --dk-surface-2:   #f1f3f5;   /* input, area dalam kartu */
  --dk-surface-3:   #e2e6ea;   /* hover / fokus */
  --dk-border:      #d3d8de;
  --dk-accent:      #d84315;   /* tombol utama: oranye pekat */
  --dk-accent-rgb:  216,67,21;
  --dk-accent-2:    #e65100;
  --dk-accent-grad: linear-gradient(180deg, #e65100 0%, #c43e00 100%);
  --dk-accent-soft: #111827;   /* tautan: hitam */
  --dk-on-accent:   #ffffff;   /* teks di atas tombol oranye pekat */
  --dk-muted:       #4b5563;
  --dk-text:        #111827;
  --dk-text-2:      #1f2937;
  --dk-text-mut:    #4b5563;
  --dk-text-rgb:    17,24,39;
  --dk-line-rgb:    0,0,0;
  --dk-ok: #166534; --dk-err: #b91c1c; --dk-warn: #92400e; --dk-info: #075985;
  --dk-gloss: none;
  /* banner & tombol beli: oranye lebih pekat, teks putih */
  --lt-1: #c43e00; --lt-2: #e65100; --lt-rgb: 216,67,21; --lt-soft: #fdebe3; --lt-3: #111827;
  --lt-on: #ffffff; --lt-ink: #111827; --lt-all: 216,67,21;
  --lt-hero: linear-gradient(135deg, #b33900 0%, #e65100 100%);
  color-scheme: light;
}
html[data-theme="dark"][data-tint="green"] {
  --dk-bg:          #e6e9ec;   /* putih silver */
  --dk-surface:     #fbfcfd;   /* kartu mengkilap (lihat --dk-gloss) */
  --dk-surface-2:   #f0f2f4;
  --dk-surface-3:   #e1e5e9;
  --dk-border:      #cfd5db;
  --dk-accent:      #00843a;   /* tombol utama: hijau pekat */
  --dk-accent-rgb:  0,132,58;
  --dk-accent-2:    #009a44;
  --dk-accent-grad: linear-gradient(180deg, #009a44 0%, #006b2f 100%);
  --dk-accent-soft: #0b1f12;
  --dk-on-accent:   #ffffff;
  --dk-muted:       #4b5563;
  --dk-text:        #111827;
  --dk-text-2:      #1f2937;
  --dk-text-mut:    #4b5563;
  --dk-text-rgb:    17,24,39;
  --dk-line-rgb:    0,0,0;
  --dk-ok: #166534; --dk-err: #b91c1c; --dk-warn: #92400e; --dk-info: #075985;
  /* kilap: highlight putih di atas, bayangan halus di bawah */
  --dk-gloss: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.55) 45%, rgba(225,230,235,.35) 100%);
  --lt-1: #006b2f; --lt-2: #00843a; --lt-rgb: 0,132,58; --lt-soft: #e3f4ea; --lt-3: #111827;
  --lt-on: #ffffff; --lt-ink: #111827; --lt-all: 0,132,58;
  --lt-hero: linear-gradient(135deg, #005a27 0%, #00843a 100%);
  color-scheme: light;
}
/* Efek kilap (silver mengkilap) untuk Hijau Terang */
html[data-theme="dark"][data-tint="green"] body,
html[data-theme="dark"][data-tint="green"] .app-content { background-image: linear-gradient(180deg, #f4f6f8 0%, #e6e9ec 220px) !important; background-attachment: fixed !important; }
html[data-theme="dark"][data-tint="green"] .card,
html[data-theme="dark"][data-tint="green"] .header-navbar,
html[data-theme="dark"][data-tint="green"] .main-menu,
html[data-theme="dark"][data-tint="green"] #footer-bar,
html[data-theme="dark"][data-tint="green"] .modal-content,
html[data-theme="dark"][data-tint="green"] .dropdown-menu { background-image: var(--dk-gloss) !important; box-shadow: inset 0 1px 0 #fff, 0 8px 22px -12px rgba(15,23,42,.35) !important; }
/* Detail tema berwarna: bayangan lebih lembut, overlay terang, tombol putih berbingkai */
html[data-theme="dark"][data-tint] .card,
html[data-theme="dark"][data-tint] .header-navbar,
html[data-theme="dark"][data-tint] .main-menu { box-shadow: 0 6px 18px -10px rgba(0,0,0,.35) !important; }
html[data-theme="dark"][data-tint] .btn-primary { border: 0 !important; box-shadow: 0 6px 16px -8px rgba(var(--dk-accent-rgb),.8) !important; }
html[data-theme="dark"][data-tint] .sidenav-overlay { background-color: rgba(0,0,0,.35) !important; }
html[data-theme="dark"][data-tint] .main-menu .navigation > li.active > a,
html[data-theme="dark"][data-tint] .main-menu .navigation li ul li.active > a { box-shadow: 0 6px 16px -8px rgba(var(--dk-accent-rgb),.8) !important; }
html[data-theme="dark"][data-tint] ::selection { background: rgba(0,0,0,.2); color: #111827; }
html[data-theme="dark"][data-tint] input::placeholder,
html[data-theme="dark"][data-tint] textarea::placeholder { color: rgba(0,0,0,.45) !important; }
html[data-theme="dark"][data-tint] [class*="-hero"] a:not([class]) { color: inherit !important; }

/* ── Aksen utama komponen Bootstrap / Vuexy di mode gelap ───── */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .bg-primary,
html[data-theme="dark"] .badge-primary,
html[data-theme="dark"] .badge.badge-primary,
html[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before,
html[data-theme="dark"] .progress-bar {
  background: var(--dk-accent) !important;
  background-color: var(--dk-accent) !important;
  border-color: var(--dk-accent) !important;
  color: var(--dk-on-accent,#fff) !important;
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .nav-pills .nav-link.active { background-image: var(--dk-accent-grad) !important; }
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:active { background: var(--dk-accent-2) !important; border-color: var(--dk-accent-2) !important; box-shadow: 0 8px 22px -10px rgba(var(--dk-accent-rgb),.9) !important; }
html[data-theme="dark"] .btn-outline-primary { color: var(--dk-accent-soft) !important; border-color: var(--dk-accent) !important; background: transparent !important; }
html[data-theme="dark"] .btn-outline-primary:hover { background: var(--dk-accent) !important; color: var(--dk-on-accent,#fff) !important; }
html[data-theme="dark"] .text-primary { color: var(--dk-accent-soft) !important; }
html[data-theme="dark"] .border-primary { border-color: var(--dk-accent) !important; }
html[data-theme="dark"] .badge-light-primary { background: rgba(var(--dk-accent-rgb),.15) !important; color: var(--dk-accent-soft) !important; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus { border-color: var(--dk-accent) !important; box-shadow: 0 0 0 .2rem rgba(var(--dk-accent-rgb),.2) !important; }

/* Menu sidebar aktif (Vuexy memakai gradien ungu) */
html[data-theme="dark"] .main-menu.menu-light .navigation > li.active > a,
html[data-theme="dark"] .main-menu .navigation > li.active > a,
html[data-theme="dark"] .main-menu.menu-light .navigation > li ul .active,
html[data-theme="dark"] .main-menu .navigation li ul li.active > a {
  background: var(--dk-accent-grad) !important;
  box-shadow: 0 0 10px 1px rgba(var(--dk-accent-rgb),.55) !important;
  color: var(--dk-on-accent,#fff) !important;
}
html[data-theme="dark"] .main-menu .navigation > li.active > a span,
html[data-theme="dark"] .main-menu .navigation > li.active > a i,
html[data-theme="dark"] .main-menu .navigation li ul li.active > a span,
html[data-theme="dark"] .main-menu .navigation li ul li.active > a i { color: var(--dk-on-accent,#fff) !important; }

/* Navbar bawah (HP) */
html[data-theme="dark"] #footer-bar { background: var(--dk-surface) !important; border-top: 1px solid var(--dk-border) !important; }
html[data-theme="dark"] #footer-bar a.active-nav i,
html[data-theme="dark"] #footer-bar a.active-nav span,
html[data-theme="dark"] #footer-bar a:hover i { color: var(--dk-accent-soft) !important; }
html[data-theme="dark"] #footer-bar a.active-nav em,
html[data-theme="dark"] #footer-bar em { background: var(--dk-accent) !important; }

/* Kartu & pembatas umum */
html[data-theme="dark"] .card { border-color: var(--dk-border) !important; }
html[data-theme="dark"] hr { border-color: var(--dk-border) !important; }
html[data-theme="dark"] ::selection { background: rgba(var(--dk-accent-rgb),.45); color: #fff; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dk-border); }

/* Bayangan gradasi menu & overlay (sebelumnya biru navy) */
html[data-theme="dark"] .main-menu .shadow-bottom { background: linear-gradient(var(--dk-surface) 41%, transparent 95%) !important; }
html[data-theme="dark"] .header-navbar-shadow { background: linear-gradient(180deg, var(--dk-bg) 44%, transparent) !important; }
html[data-theme="dark"] .sidenav-overlay { background-color: rgba(0,0,0,.65) !important; }

/* Pemilih tema di admin: pratinjau */
.dk-swatch-green  { --sw-bg:#0b1510; --sw-card:#11221a; --sw-acc:#00aa5b; --sw-soft:#4fd18b; --sw-bd:#224331; }
.dk-swatch-orange { --sw-bg:#160b08; --sw-card:#24120d; --sw-acc:#f63f2d; --sw-soft:#ff7a5c; --sw-bd:#4d2419; }
.dk-swatch-black  { --sw-bg:#050505; --sw-card:#121212; --sw-acc:#4a4a50; --sw-soft:#e4e4e7; --sw-bd:#2b2b2e; --sw-gloss:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%); }
.lt-swatch-default { --sw-bg:#f8fafc; --sw-card:#ffffff; --sw-acc:#4f46e5; --sw-acc2:#7c3aed; --sw-soft:#4f46e5; --sw-bd:#e2e8f0; }
.lt-swatch-orange  { --sw-bg:#e9ecef; --sw-card:#f8f9fa; --sw-acc:#c43e00; --sw-acc2:#e65100; --sw-soft:#d84315; --sw-bd:#d3d8de; }
.lt-swatch-green   { --sw-bg:#e6e9ec; --sw-card:#fbfcfd; --sw-acc:#006b2f; --sw-acc2:#00843a; --sw-soft:#00843a; --sw-bd:#cfd5db; --sw-gloss:linear-gradient(180deg,#fff,rgba(255,255,255,.4) 50%,rgba(220,226,232,.5)); }

/* Tombol/tautan di dalam banner (hero) halaman tetap putih agar kontras di atas latar berwarna */
html[data-theme="dark"] [class*="-hero"] a:not([class]) { color: inherit !important; filter: none; }
html[data-light]:not([data-theme="dark"]) [class*="-hero"] a:not([class]) { color: inherit !important; }
html[data-theme="dark"][data-tint] a:not([class]) { text-decoration: none !important; }
/* Teks di atas banner (hero) oranye/hijau pekat: putih agar terbaca (mengalahkan aturan judul/teks mode gelap) */
html[data-theme="dark"][data-tint] [class*="-hero"],
html[data-theme="dark"][data-tint] [class*="-hero"] :is(h1,h2,h3,h4,h5,h6,p,span,small,b,strong,label,i,div) { color: var(--lt-on) !important; }