/* ==========================================================================
   KasirKu — MODE GELAP (dark mode)
   Dimuat SETELAH theme-casual.css. Semua aturan di-scope ke
   html[data-theme="dark"] sehingga mode terang tidak tersentuh sama sekali.

   Pendekatan: seluruh UI memakai utilitas Tailwind hard-coded (bg-white,
   text-slate-700, ...) yang dibuat di HTML maupun di template string app.js.
   Karena itu warna dipetakan ulang di lapisan CSS ini — bukan dengan
   mengubah ribuan class di markup/JS.

   Kunci teknis:
   - Selector atribut memakai [class~="..."] (token persis) agar
     bg-white/10 di sidebar tetap transparan, tidak jadi permukaan solid.
   -!important dipakai karena theme-casual.css juga memakai !important.
   - Struk / area cetak SELALU putih.
   ========================================================================== */

/* ------------------------------------------------------------- 0. Token */
html[data-theme="dark"] {
  color-scheme: dark;

  --dk-canvas:    #0a1310;   /* latar halaman */
  --dk-surface:   #14211c;   /* kartu, header, modal (lebih terang dari kanvas) */
  --dk-surface-2: #1b2a24;   /* input, hover, chip netral */
  --dk-surface-3: #23352d;   /* hover lebih tegas */
  --dk-line:      #22352d;
  --dk-line-soft: #1a2a24;
  --dk-line-strong:#2c443b;

  --dk-ink:       #e9f4ef;
  --dk-ink-soft:  #d5e5df;
  --dk-text:      #b3c7c0;
  --dk-muted:     #93a8a3;
  --dk-faint:     #7d918c;

  --dk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  --dk-shadow:    0 2px 4px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .45);
  --dk-shadow-lg: 0 8px 20px rgba(0, 0, 0, .5), 0 24px 56px rgba(0, 0, 0, .55);

  /* tint semantik */
  --dk-tint-emerald: rgba(16, 185, 129, .14);
  --dk-tint-rose:    rgba(244, 63, 94, .15);
  --dk-tint-amber:   rgba(245, 158, 11, .15);
  --dk-tint-indigo:  rgba(99, 102, 241, .18);
  --dk-tint-sky:     rgba(14, 165, 233, .16);
  --dk-tint-blue:    rgba(59, 130, 246, .16);
  --dk-tint-purple:  rgba(168, 85, 247, .16);
  --dk-tint-lime:    rgba(132, 204, 22, .14);
}

html[data-theme="light"] { color-scheme: light; }

/* -------------------------------------------------------------- 1. Base */
html[data-theme="dark"] body,
html[data-theme="dark"] #app-shell,
html[data-theme="dark"] #admin-app {
  background-color: var(--dk-canvas) !important;
  color: var(--dk-ink) !important;
}

html[data-theme="dark"] body.kk-canvas-gradient {
  background-color: var(--dk-canvas) !important;
  background-image:
    radial-gradient(circle at 12% -10%, rgba(16, 185, 129, .16), transparent 46%),
    radial-gradient(circle at 90% 0%, rgba(20, 184, 166, .12), transparent 42%) !important;
}

html[data-theme="dark"] ::selection { background: rgba(16, 185, 129, .35); color: #f0fff9; }

/* Scrollbar */
html[data-theme="dark"] * { scrollbar-color: #2b4238 transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1614; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2b4238 !important; border-color: var(--dk-canvas) !important; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a5a4c !important; }

html[data-theme="dark"] :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 2px;
}

/* Gradient hero di landing page (nilai arbitrary Tailwind) */
html[data-theme="dark"] [class*="radial-gradient(45rem"] {
  background-image: radial-gradient(45rem 50rem at top, #0d2a22, #0a1310) !important;
  opacity: 1 !important;
}

/* ------------------------------------------- 2. Utilitas netral (permukaan) */
html[data-theme="dark"] [class~="bg-white"]      { background-color: var(--dk-surface) !important; }
html[data-theme="dark"] [class~="bg-slate-50"]   { background-color: #101c17 !important; }
html[data-theme="dark"] [class~="bg-slate-50/80"]{ background-color: rgba(16, 28, 23, .8) !important; }
html[data-theme="dark"] [class~="bg-slate-100"]  { background-color: #0b1512 !important; }
html[data-theme="dark"] [class~="bg-slate-100/70"]{ background-color: rgba(11, 21, 18, .7) !important; }
html[data-theme="dark"] [class~="bg-slate-200"]  { background-color: var(--dk-surface-3) !important; }
html[data-theme="dark"] [class~="bg-slate-200/60"]{ background-color: rgba(35, 53, 45, .6) !important; }
html[data-theme="dark"] [class~="bg-slate-300"]  { background-color: var(--dk-line-strong) !important; }

/* Sidebar & panel gelap: tetap gelap, sedikit disesuaikan */
html[data-theme="dark"] [class~="bg-slate-800"]  { background-color: #12211c !important; }
html[data-theme="dark"] [class~="bg-slate-900"]  { background-color: #0d1a15 !important; }
html[data-theme="dark"] [class~="bg-slate-950"]  { background-color: #070d0b !important; }

/* Hover state */
html[data-theme="dark"] [class~="hover:bg-slate-50"]:hover  { background-color: #16241f !important; }
html[data-theme="dark"] [class~="hover:bg-slate-100"]:hover { background-color: #16241f !important; }
html[data-theme="dark"] [class~="hover:bg-slate-200"]:hover { background-color: var(--dk-surface-3) !important; }
html[data-theme="dark"] [class~="hover:bg-slate-300"]:hover { background-color: var(--dk-line-strong) !important; }
html[data-theme="dark"] [class~="hover:bg-slate-800"]:hover { background-color: #17281f !important; }
html[data-theme="dark"] [class~="hover:bg-slate-900"]:hover { background-color: #0b1611 !important; }

/* -------------------------------------------------- 3. Teks netral */
html[data-theme="dark"] [class~="text-slate-950"],
html[data-theme="dark"] [class~="text-slate-900"] { color: var(--dk-ink) !important; }
html[data-theme="dark"] [class~="text-slate-800"] { color: var(--dk-ink-soft) !important; }
html[data-theme="dark"] [class~="text-slate-700"] { color: #cfdfd9 !important; }
html[data-theme="dark"] [class~="text-slate-600"] { color: #b7cac3 !important; }
html[data-theme="dark"] [class~="text-slate-500"] { color: var(--dk-muted) !important; }
html[data-theme="dark"] [class~="text-slate-400"] { color: var(--dk-faint) !important; }

html[data-theme="dark"] [class~="hover:text-slate-600"]:hover { color: #cfdfd9 !important; }
html[data-theme="dark"] [class~="hover:text-slate-800"]:hover { color: var(--dk-ink) !important; }

/* ------------------------------------------------------- 4. Garis/border */
html[data-theme="dark"] [class~="border-slate-100"],
html[data-theme="dark"] [class~="border-slate-200"],
html[data-theme="dark"] [class~="border-slate-200/80"],
html[data-theme="dark"] [class~="border-slate-200/90"] { border-color: var(--dk-line) !important; }
html[data-theme="dark"] [class~="border-slate-300"] { border-color: var(--dk-line-strong) !important; }
html[data-theme="dark"] [class~="divide-slate-100"] > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] [class~="divide-slate-50"]  > :not([hidden]) ~ :not([hidden]) { border-color: var(--dk-line-soft) !important; }

html[data-theme="dark"] .border-slate-200 { border-color: var(--dk-line) !important; }
html[data-theme="dark"] .border-slate-100 { border-color: var(--dk-line-soft) !important; }

/* --------------------------------------------------------- 5. Form control */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--dk-surface-2) !important;
  border-color: var(--dk-line) !important;
  color: var(--dk-ink) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6f847f !important; }
html[data-theme="dark"] select option,
html[data-theme="dark"] datalist option { background-color: var(--dk-surface-2); color: var(--dk-ink); }
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] { accent-color: #10b981; background-color: var(--dk-surface-2); }
html[data-theme="dark"] input[type="file"] { color: var(--dk-text); }
html[data-theme="dark"] input[type="file"]::file-selector-button {
  background: var(--dk-surface-3);
  color: var(--dk-ink);
  border: 1px solid var(--dk-line);
  border-radius: .5rem;
  padding: .35rem .75rem;
  margin-right: .6rem;
  font-weight: 600;
  cursor: pointer;
}
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] button:disabled { background-color: #131f1a !important; color: #7d918c !important; opacity: .8; }

/* --------------- 4b. Token "hover:*" juga perlu warna dasar di mode gelap */
/* theme-casual memakai selector substring [class*="..."] sehingga elemen yang
   hanya punya class hover:bg-slate-50 (mis. <tr class="hover:bg-slate-50">)
   ikut diwarnai PERMANEN terang. Di sini warna dasarnya dikembalikan ke gelap,
   lalu state :hover ditangani aturan hover di atas. */
html[data-theme="dark"] [class~="hover:bg-slate-50"]  { background-color: #111d19 !important; }
html[data-theme="dark"] [class~="hover:bg-slate-100"] { background-color: #16241f !important; }
html[data-theme="dark"] [class~="hover:bg-slate-200"] { background-color: #1b2a24 !important; }
html[data-theme="dark"] [class~="hover:bg-slate-300"] { background-color: #23352d !important; }
html[data-theme="dark"] [class~="hover:bg-slate-800"] { background-color: #0d1a15 !important; }
html[data-theme="dark"] [class~="hover:bg-slate-900"] { background-color: #0b1512 !important; }
html[data-theme="dark"] [class~="hover:bg-white"]     { background-color: #1b2a24 !important; }
html[data-theme="dark"] [class~="hover:bg-indigo-50"],
html[data-theme="dark"] [class~="hover:bg-indigo-100"],
html[data-theme="dark"] [class~="hover:bg-blue-100"],
html[data-theme="dark"] [class~="hover:bg-purple-100"] { background-color: rgba(99, 102, 241, .18) !important; }
html[data-theme="dark"] [class~="hover:bg-brand-50"],
html[data-theme="dark"] [class~="hover:bg-brand-100"],
html[data-theme="dark"] [class~="hover:bg-emerald-50"],
html[data-theme="dark"] [class~="hover:bg-emerald-100"] { background-color: rgba(16, 185, 129, .14) !important; }
html[data-theme="dark"] [class~="hover:bg-rose-50"],
html[data-theme="dark"] [class~="hover:bg-rose-100"]   { background-color: rgba(244, 63, 94, .15) !important; }
html[data-theme="dark"] [class~="hover:bg-amber-50"],
html[data-theme="dark"] [class~="hover:bg-amber-100"]  { background-color: rgba(245, 158, 11, .15) !important; }
html[data-theme="dark"] [class~="hover:bg-lime-100"]   { background-color: rgba(132, 204, 22, .14) !important; }

html[data-theme="dark"] [class~="hover:text-slate-600"] { color: #b7cac3 !important; }
html[data-theme="dark"] [class~="hover:text-slate-800"] { color: var(--dk-ink) !important; }
html[data-theme="dark"] [class~="hover:text-brand-600"],
html[data-theme="dark"] [class~="hover:text-brand-700"],
html[data-theme="dark"] [class~="hover:text-brand-800"] { color: #34d399 !important; }
html[data-theme="dark"] [class~="hover:text-indigo-700"] { color: #a5b4fc !important; }
html[data-theme="dark"] [class~="hover:text-rose-700"],
html[data-theme="dark"] [class~="hover:text-rose-800"] { color: #fda4af !important; }
html[data-theme="dark"] [class~="hover:border-brand-300"] { border-color: rgba(52, 211, 153, .40) !important; }

/* Tombol solid brand: di kanvas gelap dinaikkan kontrasnya
   (putih di atas #059669 hanya 3.8:1, di atas #047857 menjadi 5.9:1) */
html[data-theme="dark"] [class~="bg-emerald-600"],
html[data-theme="dark"] [class~="bg-brand-600"] { background-color: #047857 !important; }
html[data-theme="dark"] [class~="bg-emerald-500"],
html[data-theme="dark"] [class~="bg-brand-500"] { background-color: #059669 !important; }
html[data-theme="dark"] [class~="hover:bg-emerald-700"]:hover,
html[data-theme="dark"] [class~="hover:bg-brand-700"]:hover { background-color: #065f46 !important; }
html[data-theme="dark"] [class~="hover:bg-emerald-600"]:hover,
html[data-theme="dark"] [class~="hover:bg-brand-600"]:hover { background-color: #047857 !important; }
html[data-theme="dark"] [class~="hover:bg-emerald-400"]:hover { background-color: #10b981 !important; }
html[data-theme="dark"] [class~="bg-amber-600"] { background-color: #b45309 !important; }
html[data-theme="dark"] [class~="hover:bg-amber-700"]:hover { background-color: #92400e !important; }
html[data-theme="dark"] [class~="bg-rose-600"] { background-color: #be123c !important; }

/* --------------------------------------------------------------- 6. Tabel */
html[data-theme="dark"] thead th {
  background-color: #0e1915 !important;
  color: var(--dk-muted) !important;
  border-bottom-color: var(--dk-line) !important;
}
html[data-theme="dark"] tbody tr:hover { background-color: #17251f !important; }
html[data-theme="dark"] tbody td { border-color: var(--dk-line-soft); }

/* ------------------------------------------------------------- 7. Header */
html[data-theme="dark"] .glass-header {
  background: rgba(11, 20, 17, .88) !important;
  border-bottom-color: var(--dk-line) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4) !important;
}

/* ------------------------------------- 8. Komponen theme-casual (kk-*) */
html[data-theme="dark"] .card,
html[data-theme="dark"] .kk-card,
html[data-theme="dark"] .kk-stat,
html[data-theme="dark"] .kk-modal,
html[data-theme="dark"] .pos-card {
  background: var(--dk-surface) !important;
  border-color: var(--dk-line) !important;
  box-shadow: var(--dk-shadow-sm) !important;
}
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .kk-card:hover,
html[data-theme="dark"] .kk-stat:hover,
html[data-theme="dark"] .pos-card:hover {
  border-color: #2f4a3f !important;
  box-shadow: var(--dk-shadow) !important;
}
html[data-theme="dark"] .kk-stat::after { background: radial-gradient(circle, rgba(16, 185, 129, .18), transparent 70%); }

html[data-theme="dark"] .kk-btn-ghost {
  background: var(--dk-surface-2) !important;
  color: var(--dk-ink-soft) !important;
  border-color: var(--dk-line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .kk-btn-ghost:hover { background: var(--dk-surface-3) !important; border-color: #2f4a3f !important; }

html[data-theme="dark"] .kk-nav-link { color: var(--dk-text) !important; }
html[data-theme="dark"] .kk-nav-link:hover { color: #6ee7b7 !important; background: var(--dk-surface-2) !important; }

html[data-theme="dark"] .kk-badge-success { background: var(--dk-tint-emerald); color: #6ee7b7; }
html[data-theme="dark"] .kk-badge-warn    { background: var(--dk-tint-amber);   color: #fcd34d; }
html[data-theme="dark"] .kk-badge-danger  { background: var(--dk-tint-rose);    color: #fda4af; }
html[data-theme="dark"] .kk-badge-info    { background: var(--dk-tint-sky);     color: #7dd3fc; }
html[data-theme="dark"] .kk-badge-muted   { background: var(--dk-surface-2);    color: var(--dk-muted); }

html[data-theme="dark"] .onboarding-header {
  background: linear-gradient(120deg, #1b2450 0%, #2b3384 55%, #432c72 100%) !important;
}

/* Chip sidebar "OTOMATIS": theme-casual mengubah bg-indigo-500/20 jadi
   emerald-500 solid sehingga teks emerald-300 nyaris tak terbaca.
   Di mode gelap dikembalikan sebagai tint transparan. */
html[data-theme="dark"] [class~="bg-indigo-500/20"] { background-color: rgba(16, 185, 129, .22) !important; }

html[data-theme="dark"] .kk-skeleton {
  background: linear-gradient(90deg, #16241f 25%, #1d3029 37%, #16241f 63%);
  background-size: 400% 100%;
}
html[data-theme="dark"] .kk-divider { background: var(--dk-line); }
html[data-theme="dark"] .kk-soft-text,
html[data-theme="dark"] .kk-empty { color: var(--dk-muted); }

/* ---------------------------------- 9. Komponen style.css (panduan, tour) */
html[data-theme="dark"] .beginner-help {
  background: linear-gradient(135deg, #10201c 0%, #141a2b 100%) !important;
  border-color: #2b3a63 !important;
  color: #c7d2fe !important;
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .8) !important;
}
html[data-theme="dark"] .beginner-help .help-icon { background: rgba(99, 102, 241, .22); color: #a5b4fc; }
html[data-theme="dark"] .beginner-help .help-text { color: #b6c2f0 !important; }
html[data-theme="dark"] .beginner-help .help-step { color: #a5b4fc !important; }
html[data-theme="dark"] .beginner-help .help-step b { background: #4f46e5; color: #fff; }
html[data-theme="dark"] .beginner-help .help-close { color: #8b9cd8; }
html[data-theme="dark"] .beginner-help .help-close:hover { background: rgba(99, 102, 241, .22); color: #c7d2fe; }
html[data-theme="dark"] .beginner-help .help-link { color: #a5b4fc !important; }
html[data-theme="dark"] .beginner-help .help-link:hover { color: #c7d2fe !important; }

html[data-theme="dark"] .onboarding-card { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; box-shadow: var(--dk-shadow-sm) !important; }
html[data-theme="dark"] .onboarding-step { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; color: var(--dk-ink) !important; }
html[data-theme="dark"] .onboarding-step:hover { background: var(--dk-surface-2) !important; border-color: #33544a !important; }
html[data-theme="dark"] .onboarding-step .step-dot { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
html[data-theme="dark"] .onboarding-step.done { background: rgba(16, 185, 129, .12) !important; border-color: rgba(16, 185, 129, .35) !important; }
html[data-theme="dark"] .onboarding-step.next { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, .16) !important; }

html[data-theme="dark"] .guide-card > summary:hover,
html[data-theme="dark"] .guide-card[open] > summary { background: var(--dk-surface-2) !important; }
html[data-theme="dark"] .guide-step-number { background: rgba(16, 185, 129, .18); color: #6ee7b7; }

html[data-theme="dark"] .faq-item > summary { color: var(--dk-ink) !important; }
html[data-theme="dark"] .faq-item > summary:hover,
html[data-theme="dark"] .faq-item[open] > summary { background: var(--dk-surface-2) !important; }
html[data-theme="dark"] .faq-item .faq-answer { color: var(--dk-text) !important; }

html[data-theme="dark"] .tour-highlight {
  outline-color: #34d399 !important;
  background-color: rgba(16, 185, 129, .12) !important;
}

/* ------------------------------------------- 9b. Komponen beginner-mode.css */
html[data-theme="dark"] .kk-next-steps {
  background: var(--dk-surface) !important;
  border-color: var(--dk-line) !important;
  box-shadow: var(--dk-shadow-sm) !important;
}
html[data-theme="dark"] .kk-ns-head h3 { color: var(--dk-ink) !important; }
html[data-theme="dark"] .kk-ns-head h3 i { color: #34d399 !important; }
html[data-theme="dark"] .kk-ns-head p { color: var(--dk-muted) !important; }
html[data-theme="dark"] .kk-ns-progress {
  background: var(--dk-tint-emerald) !important;
  color: #6ee7b7 !important;
  border-color: rgba(52, 211, 153, .32) !important;
}
html[data-theme="dark"] .kk-ns-bar { background: #1b2a24 !important; }
html[data-theme="dark"] .kk-ns-item {
  background: #182a22 !important;
  border-color: var(--dk-line) !important;
  color: var(--dk-ink) !important;
}
html[data-theme="dark"] .kk-ns-item:hover { background: #1d3229 !important; border-color: #2f4a3f !important; }
html[data-theme="dark"] .kk-ns-item.next {
  background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(20, 184, 166, .10)) !important;
  border-color: rgba(52, 211, 153, .45) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .10) !important;
}
html[data-theme="dark"] .kk-ns-dot { background: rgba(16, 185, 129, .18) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .kk-ns-title { color: var(--dk-ink) !important; }
html[data-theme="dark"] .kk-ns-item.done .kk-ns-title { color: var(--dk-muted) !important; }
html[data-theme="dark"] .kk-ns-hint { color: var(--dk-text) !important; }
html[data-theme="dark"] .kk-ns-badge { background: rgba(16, 185, 129, .20) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .kk-ns-foot { color: var(--dk-faint) !important; }
html[data-theme="dark"] .kk-gloss {
  background: rgba(16, 185, 129, .16) !important;
  border-color: rgba(52, 211, 153, .38) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .kk-gloss:hover { background: rgba(16, 185, 129, .28) !important; }
html[data-theme="dark"] .kk-help-toggle {
  background: rgba(16, 185, 129, .12) !important;
  border-color: rgba(52, 211, 153, .38) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .kk-help-toggle:hover { background: rgba(16, 185, 129, .22) !important; }
html[data-theme="dark"] .kk-help-toggle.open { background: rgba(16, 185, 129, .28) !important; }

/* ---------------------------------------------- 10. Warna semantik (tint) */
/* EMERALD / BRAND — sukses */
html[data-theme="dark"] [class~="bg-emerald-50"],
html[data-theme="dark"] [class~="bg-emerald-50/50"],
html[data-theme="dark"] [class~="bg-emerald-50/40"],
html[data-theme="dark"] [class~="bg-emerald-100"],
html[data-theme="dark"] [class~="bg-brand-50"],
html[data-theme="dark"] [class~="bg-brand-100"] { background-color: var(--dk-tint-emerald) !important; }
html[data-theme="dark"] [class~="hover:bg-emerald-50"]:hover,
html[data-theme="dark"] [class~="hover:bg-emerald-100"]:hover,
html[data-theme="dark"] [class~="hover:bg-brand-50"]:hover,
html[data-theme="dark"] [class~="hover:bg-brand-100"]:hover { background-color: rgba(16, 185, 129, .24) !important; }
html[data-theme="dark"] [class~="border-emerald-100"],
html[data-theme="dark"] [class~="border-emerald-200"] { border-color: rgba(52, 211, 153, .32) !important; }
html[data-theme="dark"] [class~="text-emerald-900"],
html[data-theme="dark"] [class~="text-emerald-800"] { color: #6ee7b7 !important; }
html[data-theme="dark"] [class~="text-emerald-700"],
html[data-theme="dark"] [class~="text-emerald-600"] { color: #34d399 !important; }
html[data-theme="dark"] [class~="text-brand-900"],
html[data-theme="dark"] [class~="text-brand-700"],
html[data-theme="dark"] [class~="text-brand-600"] { color: #34d399 !important; }
html[data-theme="dark"] [class~="hover:text-brand-600"]:hover,
html[data-theme="dark"] [class~="hover:text-brand-700"]:hover { color: #6ee7b7 !important; }

/* ROSE / RED — bahaya */
html[data-theme="dark"] [class~="bg-rose-50"],
html[data-theme="dark"] [class~="bg-rose-50/50"],
html[data-theme="dark"] [class~="bg-rose-50/30"],
html[data-theme="dark"] [class~="bg-rose-100"] { background-color: var(--dk-tint-rose) !important; }
html[data-theme="dark"] [class~="hover:bg-rose-50"]:hover,
html[data-theme="dark"] [class~="hover:bg-rose-100"]:hover { background-color: rgba(244, 63, 94, .26) !important; }
html[data-theme="dark"] [class~="border-rose-100"],
html[data-theme="dark"] [class~="border-rose-200"] { border-color: rgba(251, 113, 133, .32) !important; }
html[data-theme="dark"] [class~="text-rose-900"],
html[data-theme="dark"] [class~="text-rose-800"],
html[data-theme="dark"] [class~="text-rose-700"],
html[data-theme="dark"] [class~="text-rose-600"] { color: #fda4af !important; }
html[data-theme="dark"] [class~="hover:text-rose-700"]:hover,
html[data-theme="dark"] [class~="hover:text-rose-800"]:hover { color: #fecdd3 !important; }

/* AMBER / YELLOW — peringatan */
html[data-theme="dark"] [class~="bg-amber-50"],
html[data-theme="dark"] [class~="bg-amber-50/60"],
html[data-theme="dark"] [class~="bg-amber-50/70"],
html[data-theme="dark"] [class~="bg-amber-100"],
html[data-theme="dark"] [class~="bg-amber-200"] { background-color: var(--dk-tint-amber) !important; }
html[data-theme="dark"] [class~="hover:bg-amber-50"]:hover,
html[data-theme="dark"] [class~="hover:bg-amber-100"]:hover { background-color: rgba(245, 158, 11, .26) !important; }
html[data-theme="dark"] [class~="border-amber-100"],
html[data-theme="dark"] [class~="border-amber-200"],
html[data-theme="dark"] [class~="border-amber-200/60"],
html[data-theme="dark"] [class~="border-amber-300"] { border-color: rgba(251, 191, 36, .34) !important; }
html[data-theme="dark"] [class~="text-amber-900"],
html[data-theme="dark"] [class~="text-amber-800"] { color: #fcd34d !important; }
html[data-theme="dark"] [class~="text-amber-700"],
html[data-theme="dark"] [class~="text-amber-600"] { color: #fbbf24 !important; }

/* INDIGO / PURPLE / BLUE / SKY — informasi */
html[data-theme="dark"] [class~="bg-indigo-50"],
html[data-theme="dark"] [class~="bg-indigo-100"],
html[data-theme="dark"] [class~="bg-blue-50"],
html[data-theme="dark"] [class~="bg-blue-100"],
html[data-theme="dark"] [class~="bg-sky-50"],
html[data-theme="dark"] [class~="bg-sky-100"],
html[data-theme="dark"] [class~="bg-purple-50"],
html[data-theme="dark"] [class~="bg-purple-100"] { background-color: var(--dk-tint-indigo) !important; }
html[data-theme="dark"] [class~="hover:bg-indigo-50"]:hover,
html[data-theme="dark"] [class~="hover:bg-indigo-100"]:hover,
html[data-theme="dark"] [class~="hover:bg-blue-100"]:hover,
html[data-theme="dark"] [class~="hover:bg-purple-100"]:hover { background-color: rgba(99, 102, 241, .28) !important; }
html[data-theme="dark"] [class~="border-indigo-100"],
html[data-theme="dark"] [class~="border-indigo-200"],
html[data-theme="dark"] [class~="border-blue-200"],
html[data-theme="dark"] [class~="border-sky-100"],
html[data-theme="dark"] [class~="border-purple-200"] { border-color: rgba(129, 140, 248, .32) !important; }
html[data-theme="dark"] [class~="text-indigo-900"],
html[data-theme="dark"] [class~="text-indigo-950"],
html[data-theme="dark"] [class~="text-indigo-800"] { color: #c7d2fe !important; }
html[data-theme="dark"] [class~="text-indigo-700"],
html[data-theme="dark"] [class~="text-indigo-600"] { color: #a5b4fc !important; }
html[data-theme="dark"] [class~="text-sky-800"],
html[data-theme="dark"] [class~="text-sky-700"],
html[data-theme="dark"] [class~="text-sky-600"] { color: #7dd3fc !important; }
html[data-theme="dark"] [class~="text-blue-700"],
html[data-theme="dark"] [class~="text-blue-600"] { color: #93c5fd !important; }
html[data-theme="dark"] [class~="text-purple-700"],
html[data-theme="dark"] [class~="text-purple-600"] { color: #d8b4fe !important; }
html[data-theme="dark"] [class~="hover:text-indigo-700"]:hover { color: #c7d2fe !important; }

/* LIME / GREEN — aksen "Saran" */
html[data-theme="dark"] [class~="bg-lime-50"],
html[data-theme="dark"] [class~="bg-lime-100"] { background-color: var(--dk-tint-lime) !important; }
html[data-theme="dark"] [class~="hover:bg-lime-100"]:hover { background-color: rgba(132, 204, 22, .26) !important; }
html[data-theme="dark"] [class~="border-lime-100"],
html[data-theme="dark"] [class~="border-lime-200"] { border-color: rgba(163, 230, 53, .3) !important; }
html[data-theme="dark"] [class~="text-lime-900"],
html[data-theme="dark"] [class~="text-lime-700"] { color: #bef264 !important; }

/* ------------------------------- 10b. Panel admin: keluarga warna tambahan */
/* statCard()/status di admin.js memakai sky, rose, emerald, amber, indigo, red,
   cyan, slate. red & cyan (+ teal/violet/orange untuk modul berikutnya) belum
   terpetakan di atas, jadi ditambahkan di sini. */
html[data-theme="dark"] [class~="bg-red-50"],
html[data-theme="dark"] [class~="bg-red-100"],
html[data-theme="dark"] [class~="bg-cyan-50"],
html[data-theme="dark"] [class~="bg-cyan-100"],
html[data-theme="dark"] [class~="bg-teal-50"],
html[data-theme="dark"] [class~="bg-teal-100"],
html[data-theme="dark"] [class~="bg-violet-50"],
html[data-theme="dark"] [class~="bg-violet-100"],
html[data-theme="dark"] [class~="bg-orange-50"],
html[data-theme="dark"] [class~="bg-orange-100"] { background-color: rgba(148, 163, 184, .12) !important; }
html[data-theme="dark"] [class~="text-red-600"],
html[data-theme="dark"] [class~="text-red-700"],
html[data-theme="dark"] [class~="text-red-800"] { color: #fda4af !important; }
html[data-theme="dark"] [class~="text-cyan-600"],
html[data-theme="dark"] [class~="text-cyan-700"],
html[data-theme="dark"] [class~="text-cyan-800"] { color: #67e8f9 !important; }
html[data-theme="dark"] [class~="text-teal-600"],
html[data-theme="dark"] [class~="text-teal-700"] { color: #5eead4 !important; }
html[data-theme="dark"] [class~="text-violet-600"],
html[data-theme="dark"] [class~="text-violet-700"] { color: #c4b5fd !important; }
html[data-theme="dark"] [class~="text-orange-600"],
html[data-theme="dark"] [class~="text-orange-700"] { color: #fdba74 !important; }
html[data-theme="dark"] [class~="border-red-100"],
html[data-theme="dark"] [class~="border-red-200"],
html[data-theme="dark"] [class~="border-cyan-100"],
html[data-theme="dark"] [class~="border-teal-100"],
html[data-theme="dark"] [class~="border-violet-100"],
html[data-theme="dark"] [class~="border-orange-100"] { border-color: var(--dk-line) !important; }

/* ---------------------------------------- 10c. Panel admin: state terpilih */
/* Nav admin memakai bg-slate-800 saat aktif dan setiap item punya
   hover:bg-slate-800 → tanpa aturan ini item aktif tenggelam di sidebar. */
html[data-theme="dark"] .admin-nav[class~="bg-slate-800"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, .26), rgba(20, 184, 166, .16)) !important;
  color: #eaf4f0 !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .30);
  border-radius: var(--kk-radius, 1rem);
}
/* Chip "terpilih" (filter Saran, tab Audit, tombol Tutup struk): di kanvas gelap
   dibuat terang agar tetap jadi penanda pilihan, bukan lubang gelap. */
html[data-theme="dark"] button[class~="bg-slate-900"],
html[data-theme="dark"] button[class~="bg-slate-800"] {
  background-color: #2a4038 !important;
  color: #eaf4f0 !important;
  box-shadow: inset 0 0 0 1px #365246;
}
html[data-theme="dark"] button[class~="bg-slate-900"]:hover,
html[data-theme="dark"] button[class~="bg-slate-800"]:hover { background-color: #33504a !important; }

/* Badge/avatar berlatar aksen terang (lime-400, amber-400, …) harus tetap
   berteks gelap; kalau tidak, override text-slate-950 membuatnya pudar. */
html[data-theme="dark"] [class~="bg-lime-400"][class~="text-slate-950"],
html[data-theme="dark"] [class~="bg-lime-300"][class~="text-slate-950"],
html[data-theme="dark"] [class~="bg-amber-400"][class~="text-slate-950"],
html[data-theme="dark"] [class~="bg-amber-300"][class~="text-slate-950"],
html[data-theme="dark"] [class~="bg-emerald-400"][class~="text-slate-950"],
html[data-theme="dark"] [class~="bg-lime-400"][class~="text-slate-900"],
html[data-theme="dark"] [class~="bg-amber-400"][class~="text-slate-900"] { color: #07110e !important; }

/* ---------------------------------------------------- 11. Struk & cetak */
/* Kertas struk selalu putih, baik di layar maupun saat dicetak. */
html[data-theme="dark"] .receipt-paper {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .6) !important;
}
html[data-theme="dark"] .receipt-paper * { color: #000000 !important; }
html[data-theme="dark"] .receipt-dashed { border-top-color: #6b7280 !important; }

/* Barcode (SVG hitam) diberi alas putih agar tetap terbaca */
html[data-theme="dark"] #label-barcode { background: #fff; padding: 4px; border-radius: 4px; }

@media print {
  html[data-theme="dark"] body,
  html[data-theme="dark"] #app-main,
  html[data-theme="dark"] #app-shell,
  html[data-theme="dark"] [class~="bg-slate-100"],
  html[data-theme="dark"] [class~="bg-slate-50"],
  html[data-theme="dark"] [class~="bg-white"] {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
  }
  html[data-theme="dark"] .receipt-paper,
  html[data-theme="dark"] .receipt-paper * { color: #000 !important; background: #fff !important; }
}

/* ------------------------------------------------------------- 12. Media */
html[data-theme="dark"] img:not([src$=".svg"]) { color-scheme: only light; }
html[data-theme="dark"] iframe { background: #0f1a16; }
html[data-theme="dark"] hr { border-color: var(--dk-line); }
html[data-theme="dark"] [class~="bg-black/50"],
html[data-theme="dark"] [class~="bg-black/60"] { background-color: rgba(0, 0, 0, .65) !important; }

html[data-theme="dark"] [class~="hover:bg-white"]:hover { background-color: var(--dk-surface-3) !important; }

/* Tombol pilihan tema yang sedang aktif (berlaku di terang maupun gelap).
   Selector diberi prefix agar menang dari aturan [class~="text-slate-600"]. */
html[data-theme] [data-theme-set][class~="kk-theme-active"] {
  background: linear-gradient(135deg, #059669, #0d9488) !important;
  color: #fff !important;
  border: 1px solid rgba(52, 211, 153, .35);
  box-shadow: 0 4px 14px rgba(5, 150, 105, .28);
}

/* ------------------- 13. Perbaikan bug lama: teks bergradien tak terlihat */
/* Tailwind di app ini rilis v4, sehingga utilitas `bg-gradient-to-r` tidak
   menghasilkan background-image. Elemen dengan bg-clip-text + text-transparent
   (mis. judul "Akuntansi Otomatis" di landing page) jadi tak terlihat di tema
   terang maupun gelap. Di sini gradiennya didefinisikan ulang. */
[class~="bg-clip-text"] {
  background-image: linear-gradient(90deg, #059669 0%, #14b8a6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="dark"] [class~="bg-clip-text"] {
  background-image: linear-gradient(90deg, #6ee7b7 0%, #5eead4 100%) !important;
}

/* Transisi halus saat tema berganti (dimatikan oleh prefers-reduced-motion) */
html[data-theme] body,
html[data-theme] header,
html[data-theme] aside,
html[data-theme] .card,
html[data-theme] .kk-card,
html[data-theme] .kk-stat,
html[data-theme] .kk-modal,
html[data-theme] .pos-card {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}