/* ============================================================
   SITAKA — mode gelap tema-riski
   ------------------------------------------------------------
   Aktif bila <html data-theme="dark"> (tombol bulan/matahari di
   header; pilihan disimpan di localStorage "sitaka-theme").
   Hanya menimpa token --cj-* + elemen yang warnanya tetap; hero,
   kepala halaman, dan footer navy tetap seperti mode terang.
   Dimuat SETELAH sitaka-base.css & sitaka.css.
   ============================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;

  --cj-surface:     #141D2B;
  --cj-surface-alt: #0D1520;
  --cj-line:        #27354A;
  --cj-line-soft:   #1B2637;

  --cj-ink:         #E4EAF2;
  --cj-ink-strong:  #F6F9FC;
  --cj-muted:       #9BA9BC;
  --cj-muted-soft:  #6B7A8E;

  /* latar navy tetap; teks berwarna merek jadi emas/biru muda supaya terbaca */
  --cj-brand-text:  #FDB515;
  --cj-blue:        #7FB2E8;
  --cj-blue-light:  #8FC0F0;

  --cj-success:     #34D399;
  --cj-danger:      #F87171;
  --cj-warning:     #FBBF24;
  --cj-warning-bg:  #241D08;
  --cj-warning-text:#F3D68B;

  --cj-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
  --cj-shadow:      0 4px 16px rgba(0, 0, 0, 0.45);
  --cj-shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.55);
}

/* ---------- Header & navigasi ---------- */
:root[data-theme="dark"] .cj-header { background: #0F1826; border-bottom-color: var(--cj-line); }
:root[data-theme="dark"] .sk-brand__name { color: var(--cj-ink-strong); }
:root[data-theme="dark"] .cj-drawer__head .sk-brand__name { color: #fff !important; }
:root[data-theme="dark"] body.cj a.cj-nav__link,
:root[data-theme="dark"] .cj-nav__link { color: var(--cj-ink); }
:root[data-theme="dark"] .cj-nav__link.is-active { color: var(--cj-gold); }
:root[data-theme="dark"] .cj-theme { background: var(--cj-surface); border-color: var(--cj-line); color: var(--cj-gold); }

/* ---------- Pencarian & komponen beranda ---------- */
:root[data-theme="dark"] .sk-search__box { background: var(--cj-surface); border-color: var(--cj-line); }
:root[data-theme="dark"] body.cj .sk-search__box .input-transparent { color: var(--cj-ink-strong); }
:root[data-theme="dark"] .cj-btn--navy { background: var(--cj-gold); color: #0B1220; }
:root[data-theme="dark"] .cj-btn--navy:hover { color: #0B1220; filter: brightness(1.06); }
:root[data-theme="dark"] .sk-stat__num--brand { color: var(--cj-gold); }
:root[data-theme="dark"] .sk-stat__ico { background: var(--cj-line-soft); color: var(--cj-ink-strong); }
:root[data-theme="dark"] .er-item { background: #E9EEF5; border-radius: 12px; }
:root[data-theme="dark"] .cj-eyebrow { background: rgba(253, 181, 21, 0.12); color: var(--cj-gold); }
:root[data-theme="dark"] .cj-section--navy { background: #0A1424; }

/* ---------- Popup ---------- */
:root[data-theme="dark"] .sk-popup__body { background: var(--cj-surface-alt); }
:root[data-theme="dark"] .sk-popup__item img { background: #fff; }

/* ============================================================
   Elemen bawaan SLiMS / Bootstrap / Tailwind
   (hasil pencarian, detail koleksi, area anggota, komponen Vue)
   ============================================================ */
:root[data-theme="dark"] body.cj .card,
:root[data-theme="dark"] body.cj .modal-content,
:root[data-theme="dark"] body.cj .dropdown-menu,
:root[data-theme="dark"] body.cj .list-group-item,
:root[data-theme="dark"] body.cj .bg-white,
:root[data-theme="dark"] body.cj .bg-light,
:root[data-theme="dark"] body.cj .bg-grey-lightest,
:root[data-theme="dark"] body.cj .advanced-wraper {
  background-color: var(--cj-surface) !important;
  color: var(--cj-ink);
  border-color: var(--cj-line) !important;
}
:root[data-theme="dark"] body.cj .card-header,
:root[data-theme="dark"] body.cj .card-footer,
:root[data-theme="dark"] body.cj .modal-header,
:root[data-theme="dark"] body.cj .modal-footer { background: transparent; border-color: var(--cj-line); }
:root[data-theme="dark"] body.cj .dropdown-item { color: var(--cj-ink); }
:root[data-theme="dark"] body.cj .dropdown-item:hover { background: var(--cj-line-soft); color: var(--cj-ink-strong); }

:root[data-theme="dark"] body.cj .text-dark,
:root[data-theme="dark"] body.cj .text-grey-darkest,
:root[data-theme="dark"] body.cj .text-black { color: var(--cj-ink-strong) !important; }
:root[data-theme="dark"] body.cj .text-muted,
:root[data-theme="dark"] body.cj .text-grey-dark,
:root[data-theme="dark"] body.cj .text-secondary,
:root[data-theme="dark"] body.cj .subtitle-section { color: var(--cj-muted) !important; }

:root[data-theme="dark"] body.cj .form-control,
:root[data-theme="dark"] body.cj .custom-select,
:root[data-theme="dark"] body.cj input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
:root[data-theme="dark"] body.cj select,
:root[data-theme="dark"] body.cj textarea {
  background-color: var(--cj-surface-alt);
  color: var(--cj-ink-strong);
  border-color: var(--cj-line);
}
:root[data-theme="dark"] body.cj .form-control::placeholder,
:root[data-theme="dark"] body.cj input::placeholder { color: var(--cj-muted-soft); }

:root[data-theme="dark"] body.cj .table,
:root[data-theme="dark"] body.cj table { color: var(--cj-ink); border-color: var(--cj-line); }
:root[data-theme="dark"] body.cj .table td,
:root[data-theme="dark"] body.cj .table th,
:root[data-theme="dark"] body.cj table td,
:root[data-theme="dark"] body.cj table th { border-color: var(--cj-line); }
:root[data-theme="dark"] body.cj .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); }

:root[data-theme="dark"] body.cj .btn-light,
:root[data-theme="dark"] body.cj .btn-outline-secondary { background: var(--cj-surface); color: var(--cj-ink); border-color: var(--cj-line); }
:root[data-theme="dark"] body.cj .btn-primary { background: var(--cj-gold); border-color: var(--cj-gold); color: #0B1220; }
:root[data-theme="dark"] body.cj .page-link { background: var(--cj-surface); border-color: var(--cj-line); color: var(--cj-ink); }
:root[data-theme="dark"] body.cj .page-item.active .page-link { background: var(--cj-gold); border-color: var(--cj-gold); color: #0B1220; }
:root[data-theme="dark"] body.cj .nav-tabs { border-color: var(--cj-line); }
:root[data-theme="dark"] body.cj .nav-tabs .nav-link.active { background: var(--cj-surface); color: var(--cj-ink-strong); border-color: var(--cj-line) var(--cj-line) var(--cj-surface); }
:root[data-theme="dark"] body.cj .badge-light,
:root[data-theme="dark"] body.cj .badge-secondary { background: var(--cj-line); color: var(--cj-ink); }
:root[data-theme="dark"] body.cj hr { border-color: var(--cj-line); }
:root[data-theme="dark"] body.cj .alert-info { background: #0E2440; color: #BBD6F5; border-color: #1E3A5F; }
:root[data-theme="dark"] body.cj .alert-warning { background: var(--cj-warning-bg); color: var(--cj-warning-text); border-color: #4A3A10; }

/* ---------- komponen plugin Layanan Polines yang memakai warna tetap ---------- */
:root[data-theme="dark"] .sk-state--error { background: #2A1215; border-color: #5B2328; color: #FCA5A5; }
:root[data-theme="dark"] .sk-state--ok { background: #0D2A20; border-color: #1E5240; color: #86EFAC; }
:root[data-theme="dark"] .sk-loan--late { background: #1F1316; border-color: #5B2328; }
:root[data-theme="dark"] .sk-loan--late .sk-loan__ico { background: #2A1215; }
:root[data-theme="dark"] .sk-loan__ico { background: var(--cj-line-soft); color: var(--cj-ink-strong); }
:root[data-theme="dark"] .sk-found__ico { background: rgba(253, 181, 21, 0.14); color: #F5D77A; }
:root[data-theme="dark"] .sk-guide__ico { background: var(--cj-line-soft); color: var(--cj-ink-strong); }
:root[data-theme="dark"] .sk-guide--wa .sk-guide__ico { background: #0D2A20; color: #4ADE80; }
:root[data-theme="dark"] .cj-badge--grey { background: var(--cj-line); color: var(--cj-ink); }
:root[data-theme="dark"] .cj-badge--green { background: #0D2A20; color: #86EFAC; }
:root[data-theme="dark"] .cj-badge--red { background: #2A1215; color: #FCA5A5; }
:root[data-theme="dark"] .sk-rail__btn,
:root[data-theme="dark"] .sk-social a { background: var(--cj-surface); border-color: var(--cj-line); color: var(--cj-ink-strong); }

/* Formulir layanan */
:root[data-theme="dark"] .sk-form__ico { color: var(--cj-gold); }
:root[data-theme="dark"] .sk-form__section { border-left-color: var(--cj-gold); }
:root[data-theme="dark"] .sk-opt input { accent-color: var(--cj-gold); }
:root[data-theme="dark"] .sk-scale__opt:hover span { border-color: var(--cj-gold); }
:root[data-theme="dark"] .sk-scale__opt input:checked + span { background: var(--cj-gold); border-color: var(--cj-gold); color: #0F172A; }
:root[data-theme="dark"] .sk-q.has-error { box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }