/* ==========================================================================
   KORDATA V4.17 — TAILADMIN LIGHT (komplemen Tailwind CDN)
   Skin desktop mengikuti referensi owner: TailAdmin React — Free Tailwind
   Admin Dashboard (Outfit, latar gray-50, kartu putih rounded-2xl border
   gray-200, brand #465FFF, tabel garis halus, chip badge light).
   FITUR TIDAK BERUBAH — hanya UI. PWA (pwa.css) tidak memuat file ini.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  /* Palet TailAdmin (Untitled UI gray + brand indigo) */
  --ta-gray-25:  #FCFCFD;
  --ta-gray-50:  #F9FAFB;
  --ta-gray-100: #F2F4F7;
  --ta-gray-200: #EAECF0;
  --ta-gray-300: #D0D5DD;
  --ta-gray-400: #98A2B3;
  --ta-gray-500: #667085;
  --ta-gray-600: #475467;
  --ta-gray-700: #344054;
  --ta-gray-800: #1D2939;
  --ta-gray-900: #101828;
  --ta-brand-50:  #ECF3FF;
  --ta-brand-100: #DDE9FF;
  --ta-brand-200: #C2D6FF;
  --ta-brand-300: #9CB9FF;
  --ta-brand-400: #7592FF;
  --ta-brand-500: #465FFF;
  --ta-brand-600: #3641F5;
  --ta-brand-700: #2A31D8;
  --ta-green-50:  #ECFDF3;  --ta-green-500: #12B76A;  --ta-green-600: #039855;  --ta-green-700: #067647;
  --ta-red-50:    #FEF3F2;  --ta-red-500:   #F04438;  --ta-red-600:   #D92D20;  --ta-red-700:   #B42318;
  --ta-amber-50:  #FFFAEB;  --ta-amber-500: #F79009;  --ta-amber-600: #DC6803;  --ta-amber-700: #B54708;
  --ta-sky-50:    #F0F9FF;  --ta-sky-600:   #026AA2;
  --shadow-theme-xs: 0 1px 2px 0 rgba(16,24,40,.05);
  --shadow-theme-sm: 0 1px 3px 0 rgba(16,24,40,.10), 0 1px 2px -1px rgba(16,24,40,.10);
  --shadow-theme-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-theme-lg: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
}

.font-sans { font-family: 'Outfit', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; }

html { color-scheme: light; }
body { background: var(--ta-gray-50); color: var(--ta-gray-700); }
::selection { background: rgba(70,95,255,.18); color: var(--ta-gray-900); }

/* ---------- SHADOW TEMA (utility ala TailAdmin) ---------- */
.shadow-theme-xs { box-shadow: var(--shadow-theme-xs) !important; }
.shadow-theme-sm { box-shadow: var(--shadow-theme-sm) !important; }
.shadow-theme-md { box-shadow: var(--shadow-theme-md) !important; }
.shadow-theme-lg { box-shadow: var(--shadow-theme-lg) !important; }

/* ---------- KARTU: permukaan putih TailAdmin ---------- */
.bg-white { box-shadow: var(--shadow-theme-xs); }
.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg {
  box-shadow: var(--shadow-theme-xs);
  transition: box-shadow .15s ease;
}
.bg-white.rounded-xl:hover, .bg-white.rounded-2xl:hover { box-shadow: var(--shadow-theme-md); }

/* ---------- TABEL: gaya TailAdmin (header ringan, garis halus) ---------- */
table tbody tr { transition: background .12s ease; }
main table { width: 100%; border-collapse: separate; border-spacing: 0; }
main table thead th {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ta-gray-500) !important;
  background: transparent;
  border-bottom: 1px solid var(--ta-gray-100);
  border-top: 1px solid var(--ta-gray-100);
  padding: 10px 12px !important;
  white-space: nowrap;
}
main table thead tr:first-child th:first-child { border-top-left-radius: 10px; }
main table thead tr:first-child th:last-child  { border-top-right-radius: 10px; }
main table tbody td { padding: 12px !important; vertical-align: middle; font-size: 14px; color: var(--ta-gray-600); }
main table tbody tr { border-bottom: 1px solid var(--ta-gray-100); }
main table tbody tr:last-child { border-bottom: 0; }
main table tbody tr:hover { background: var(--ta-gray-50); }

/* ---------- TOMBOL: medium, radius 10px, tanpa paksaan tebal ---------- */
button, [type=button], [type=submit] { cursor: pointer; }
main button[type=submit], main button:not([type=button]):not([type=reset]),
main a[class*="bg-"][class*="rounded"] {
  font-weight: 500;
  border-radius: 10px;
  box-shadow: var(--shadow-theme-xs);
}
main button { transition: background-color .15s ease, color .15s ease, transform .05s ease; }
main button:active { transform: translateY(1px); }

/* ---------- FORM: putih, border gray-300, fokus ring brand ---------- */
input[type=text], input:not([type]), input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url], input[type=date],
input[type=datetime-local], input[type=time], textarea, select {
  background-color: #FFFFFF !important;
  border-color: var(--ta-gray-300) !important;
  color: var(--ta-gray-800) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-theme-xs) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--ta-gray-400) !important; opacity: 1 !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--ta-brand-300) !important;
  box-shadow: 0 0 0 4px rgba(70,95,255,.12) !important;
  outline: none !important;
}
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right .5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.35em 1.35em !important;
}
select option { background-color: #FFFFFF; color: var(--ta-gray-800); }
input[type=checkbox], input[type=radio] {
  border-color: var(--ta-gray-300) !important;
  box-shadow: var(--shadow-theme-xs) !important;
}
input[type=checkbox]:not(:checked), input[type=radio]:not(:checked) {
  background-color: #FFFFFF !important;
}
input[type=checkbox]:checked, input[type=radio]:checked { background-color: var(--ta-brand-500) !important; border-color: var(--ta-brand-500) !important; }
input[type=color] { background-color: #FFFFFF !important; border-color: var(--ta-gray-300) !important; padding: 2px; }
input[type=range] { accent-color: var(--ta-brand-500); }
label { color: var(--ta-gray-700); }

/* ---------- LABEL FORM: gaya TailAdmin ---------- */
main label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ta-gray-700);
}

/* ---------- CHIP/BADGE: gaya badge light TailAdmin ---------- */
.k-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.k-chip.green  { background: var(--ta-green-50);  color: var(--ta-green-700); border: none; }
.k-chip.yellow { background: var(--ta-amber-50);  color: var(--ta-amber-700); border: none; }
.k-chip.red    { background: var(--ta-red-50);    color: var(--ta-red-700);   border: none; }
.k-chip.blue   { background: var(--ta-brand-50);  color: var(--ta-brand-600); border: none; }
.k-chip.cyan   { background: var(--ta-sky-50);    color: var(--ta-sky-600);   border: none; }
.k-chip.pink   { background: #FDF2FA; color: #C11574; border: none; }
.k-chip.indigo { background: var(--ta-brand-50);  color: var(--ta-brand-600); border: none; }
.k-chip.gray   { background: var(--ta-gray-100);  color: var(--ta-gray-600);  border: none; }
main .k-chip { text-transform: none; letter-spacing: 0; }

.k-stat  { font-size: 24px; font-weight: 700; color: var(--ta-gray-800); line-height: 1.15; }
.k-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ta-gray-400); }

/* ---------- V4.17.1: TOMBOL AKSI IKON + TOOLTIP (standar semua tabel CRUD) ---------- */
.k-aksi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}
.k-aksi:active { transform: translateY(1px); }
.k-aksi.t-brand { color: var(--ta-brand-500); } .k-aksi.t-brand:hover { background: var(--ta-brand-50); color: var(--ta-brand-600); }
.k-aksi.t-green { color: var(--ta-green-600); } .k-aksi.t-green:hover { background: var(--ta-green-50); color: var(--ta-green-700); }
.k-aksi.t-red   { color: var(--ta-red-600);   } .k-aksi.t-red:hover   { background: var(--ta-red-50);   color: var(--ta-red-700); }
.k-aksi.t-amber { color: var(--ta-amber-600); } .k-aksi.t-amber:hover { background: var(--ta-amber-50); color: var(--ta-amber-700); }
.k-aksi.t-gray  { color: var(--ta-gray-500);  } .k-aksi.t-gray:hover  { background: var(--ta-gray-100); color: var(--ta-gray-700); }
.k-aksi-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.k-aksi-row form.k-aksi-form { display: inline-flex; margin: 0; }
form.k-aksi-form { display: inline-flex; align-items: center; margin: 0; }

/* Tooltip global [data-tip] — bubble mengikuti kursor (dibuat app.js, position:fixed
 * sehingga TIDAK terpotong kontainer tabel overflow-x-auto). */
.k-floating-tip {
  position: fixed; z-index: 90; left: -9999px; top: -9999px; pointer-events: none;
  background: var(--ta-gray-900); color: #FFFFFF;
  font-size: 11.5px; font-weight: 600; line-height: 1.25;
  padding: 5px 10px; border-radius: 8px; box-shadow: var(--shadow-theme-md);
  max-width: 280px; text-align: center; white-space: nowrap;
  opacity: 0; transform: translate(-50%, calc(-100% - 8px));
  transition: opacity .12s ease;
}
.k-floating-tip.show { opacity: 1; }

/* ---------- HEADER: putih polos (pewaris .glass-header lama) ---------- */
.glass-header { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }

/* ---------- SIDEBAR mobile ---------- */
.sidebar { max-width: 18rem; }
@media (max-width: 1023px) {
  .sidebar.translate-x-0 { box-shadow: var(--shadow-theme-lg); }
}

/* ---------- FOKUS ---------- */
button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(70,95,255,.55); outline-offset: 2px; border-radius: .5rem;
}

/* ---------- GRID DEKORATIF LOGIN (versi light TailAdmin) ---------- */
.bg-grid {
  background-image:
    radial-gradient(circle at 15% 15%, rgba(70,95,255,.07), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(156,185,255,.10), transparent 40%);
}

/* ---------- SCROLLBAR: tipis abu TailAdmin ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ta-gray-200); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ta-gray-300); }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: var(--ta-gray-200) transparent; scrollbar-width: thin; }

/* ---------- LAIN-LAIN ---------- */
.badge-dot { box-shadow: 0 0 0 2px #FFFFFF; }
.k-eye { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--ta-gray-400); }
.k-eye:hover { color: var(--ta-gray-600); }

/* ---------- JUDUL: normal case, berat medium (ala TailAdmin) ---------- */
main h1, main h2, main h3, main h4 { word-break: break-word; }
main .bg-white h2 { font-size: .95rem; }
main .bg-white h3 { font-size: .9rem; }

/* ---------- FOOTER ---------- */
main + footer, body > footer { user-select: none; }

/* ---------- PRINT (laporan) — tetap hemat tinta ---------- */
@media print {
  aside, header, button, form { display: none !important; }
  body, .bg-white, .bg-gray-50, .bg-gray-100 { background: #fff !important; }
  body * { color: #111 !important; }
}

/* ==========================================================================
   V4.18 — MODE GELAP GLOBAL (html.dark) ala TailAdmin dark
   Default LIGHT. Kelas .dark di <html> oleh assets/js/theme.js (localStorage
   'kd-theme'). Pemetaan utility Tailwind yang dipakai views ke bahasa dark
   TailAdmin: kanvas #0C111D, permukaan #101828, garis #1D2939/putih tipis,
   teks abu terang, aksen brand-400 #7592FF, tint warna jadi transparan.
   Tombol solid (bg-brand-500/red-600/… + text-white) TIDAK diubah.
   ========================================================================== */
html.dark { color-scheme: dark; }

html.dark {
  --shadow-theme-xs: 0 1px 2px 0 rgba(0,0,0,.45);
  --shadow-theme-sm: 0 1px 3px 0 rgba(0,0,0,.50), 0 1px 2px -1px rgba(0,0,0,.40);
  --shadow-theme-md: 0 4px 8px -2px rgba(0,0,0,.50), 0 2px 4px -2px rgba(0,0,0,.35);
  --shadow-theme-lg: 0 12px 16px -4px rgba(0,0,0,.55), 0 4px 6px -2px rgba(0,0,0,.35);
}

/* ---------- Dasar ---------- */
html.dark body { background: #0C111D; color: #98A2B3; }
html.dark ::selection { background: rgba(117,146,255,.30); color: #F2F4F7; }

/* ---------- Kanvas & permukaan ---------- */
html.dark .bg-white { background-color: #101828 !important; }
html.dark .bg-gray-25 { background-color: rgba(255,255,255,.03); }
html.dark .bg-gray-50 { background-color: #0C111D; }
html.dark .bg-gray-100 { background-color: rgba(255,255,255,.05); }
html.dark .bg-gray-200 { background-color: #2A3648; }
html.dark .bg-gray-300 { background-color: #344054; }
html.dark .bg-gray-500 { background-color: #667085; }
html.dark .bg-gray-900 { background-color: #101828; }
html.dark .bg-gray-950 { background-color: #0C111D; }

/* ---------- Teks ---------- */
html.dark .text-gray-900 { color: #F9FAFB; }
html.dark .text-gray-800 { color: #F0F2F5; }
html.dark .text-gray-700 { color: #E4E7EC; }
html.dark .text-gray-600 { color: #D0D5DD; }
html.dark .text-gray-500 { color: #98A2B3; }
html.dark .text-gray-400 { color: #98A2B3; }
html.dark .text-gray-300 { color: #98A2B3; }
html.dark .text-gray-100 { color: #EAECF0; }
html.dark .text-gray-50  { color: #F2F4F7; }
html.dark .text-slate-400, html.dark .text-slate-500 { color: #98A2B3; }
html.dark .text-indigo-900, html.dark .text-emerald-900 { color: #C7D2FE; }
html.dark .text-emerald-900 { color: #A7F3D0; }

/* ---------- Border, ring, divide ---------- */
html.dark .border-gray-50  { border-color: rgba(255,255,255,.06); }
html.dark .border-gray-100 { border-color: rgba(255,255,255,.08); }
html.dark .border-gray-200 { border-color: #1D2939; }
html.dark .border-gray-300 { border-color: #344054; }
html.dark .border-gray-400 { border-color: #475467; }
html.dark .ring-gray-200 { --tw-ring-color: rgba(255,255,255,.14); }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,.08); }

/* ---------- Hover netral ---------- */
html.dark .hover\:bg-gray-50:hover  { background-color: rgba(255,255,255,.04); }
html.dark .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,.07); }
html.dark .hover\:bg-gray-200:hover { background-color: rgba(255,255,255,.10); }
html.dark .hover\:text-gray-600:hover { color: #D0D5DD; }
html.dark .hover\:text-gray-700:hover { color: #E4E7EC; }
html.dark .hover\:text-gray-800:hover { color: #F0F2F5; }
html.dark .hover\:text-gray-900:hover { color: #F9FAFB; }

/* ---------- Aksen brand (soft → transparan, teks → brand terang) ---------- */
html.dark .bg-brand-50      { background-color: rgba(70,95,255,.12); }
html.dark .bg-brand-50\/60  { background-color: rgba(70,95,255,.08); }
html.dark .bg-brand-100     { background-color: rgba(70,95,255,.18); }
html.dark .text-brand-500   { color: #7592FF; }
html.dark .text-brand-600   { color: #7592FF; }
html.dark .text-brand-700   { color: #9CB9FF; }
html.dark .text-brand-800   { color: #9CB9FF; }
html.dark .border-brand-100 { border-color: rgba(70,95,255,.25); }
html.dark .border-brand-200 { border-color: rgba(70,95,255,.35); }
html.dark .border-brand-300 { border-color: rgba(70,95,255,.45); }
html.dark .border-brand-400 { border-color: rgba(117,146,255,.55); }
html.dark .ring-brand-200   { --tw-ring-color: rgba(70,95,255,.40); }
html.dark .hover\:bg-brand-50:hover  { background-color: rgba(70,95,255,.10); }
html.dark .hover\:bg-brand-100:hover { background-color: rgba(70,95,255,.16); }
html.dark .hover\:bg-brand-500\/20:hover { background-color: rgba(70,95,255,.22); }
html.dark .hover\:text-brand-500:hover { color: #7592FF; }
html.dark .hover\:text-brand-600:hover { color: #9CB9FF; }
html.dark .hover\:text-brand-700:hover { color: #9CB9FF; }
html.dark .hover\:border-brand-200:hover { border-color: rgba(70,95,255,.35); }
html.dark .hover\:border-brand-400\/40:hover { border-color: rgba(117,146,255,.40); }
html.dark .from-brand-50 { --tw-gradient-from: rgba(70,95,255,.10); }
html.dark .ring-brand-500\/20 { --tw-ring-color: rgba(70,95,255,.25); }
html.dark .ring-brand-500\/40 { --tw-ring-color: rgba(70,95,255,.45); }
html.dark .ring-brand-400\/40 { --tw-ring-color: rgba(117,146,255,.45); }

/* ---------- Hijau / emerald / teal ---------- */
html.dark .bg-green-50    { background-color: rgba(18,183,106,.13); }
html.dark .bg-green-100   { background-color: rgba(18,183,106,.20); }
html.dark .bg-emerald-50  { background-color: rgba(16,185,129,.13); }
html.dark .bg-teal-50     { background-color: rgba(20,184,166,.13); }
html.dark .text-green-500 { color: #12B76A; }
html.dark .text-green-600 { color: #32D583; }
html.dark .text-green-700 { color: #32D583; }
html.dark .text-emerald-500 { color: #12B76A; }
html.dark .text-emerald-600 { color: #34D399; }
html.dark .text-emerald-700 { color: #34D399; }
html.dark .text-teal-600 { color: #2DD4BF; }
html.dark .border-green-200 { border-color: rgba(18,183,106,.35); }
html.dark .border-emerald-200 { border-color: rgba(16,185,129,.35); }
html.dark .ring-green-200 { --tw-ring-color: rgba(18,183,106,.40); }
html.dark .ring-green-300 { --tw-ring-color: rgba(18,183,106,.45); }
html.dark .hover\:bg-green-700:hover { filter: brightness(1.12); }

/* ---------- Merah / rose / orange / pink ---------- */
html.dark .bg-red-50    { background-color: rgba(240,68,56,.14); }
html.dark .bg-red-50\/50 { background-color: rgba(240,68,56,.09); }
html.dark .bg-red-50\/60 { background-color: rgba(240,68,56,.11); }
html.dark .bg-red-100   { background-color: rgba(240,68,56,.22); }
html.dark .bg-rose-50   { background-color: rgba(244,63,94,.13); }
html.dark .bg-orange-50 { background-color: rgba(234,88,12,.13); }
html.dark .bg-orange-100 { background-color: rgba(234,88,12,.20); }
html.dark .bg-pink-50   { background-color: rgba(236,72,153,.13); }
html.dark .bg-pink-100  { background-color: rgba(236,72,153,.20); }
html.dark .text-red-500 { color: #F04438; }
html.dark .text-red-600 { color: #F97066; }
html.dark .text-red-700 { color: #F97066; }
html.dark .text-rose-600 { color: #FB7185; }
html.dark .text-rose-700 { color: #FB7185; }
html.dark .text-orange-600 { color: #FB923C; }
html.dark .text-orange-700 { color: #FB923C; }
html.dark .text-pink-600 { color: #F472B6; }
html.dark .border-red-100 { border-color: rgba(240,68,56,.25); }
html.dark .border-red-200 { border-color: rgba(240,68,56,.35); }
html.dark .border-red-300 { border-color: rgba(240,68,56,.45); }
html.dark .border-red-400\/30 { border-color: rgba(240,68,56,.35); }
html.dark .border-red-400\/40 { border-color: rgba(240,68,56,.40); }
html.dark .ring-rose-200 { --tw-ring-color: rgba(244,63,94,.40); }
html.dark .ring-red-300  { --tw-ring-color: rgba(240,68,56,.45); }
html.dark .ring-red-400  { --tw-ring-color: rgba(240,68,56,.55); }
html.dark .bg-red-500\/5  { background-color: rgba(240,68,56,.08); }
html.dark .bg-red-500\/15 { background-color: rgba(240,68,56,.18); }
html.dark .bg-red-500\/20 { background-color: rgba(240,68,56,.22); }
html.dark .hover\:bg-red-50:hover { background-color: rgba(240,68,56,.16); }

/* ---------- Amber / yellow ---------- */
html.dark .bg-amber-50     { background-color: rgba(247,144,9,.14); }
html.dark .bg-amber-50\/40 { background-color: rgba(247,144,9,.10); }
html.dark .bg-yellow-50    { background-color: rgba(240,177,40,.13); }
html.dark .bg-yellow-50\/50 { background-color: rgba(240,177,40,.09); }
html.dark .bg-yellow-50\/60 { background-color: rgba(240,177,40,.11); }
html.dark .bg-yellow-100   { background-color: rgba(240,177,40,.20); }
html.dark .text-amber-500 { color: #F79009; }
html.dark .text-amber-600 { color: #FDB022; }
html.dark .text-amber-700 { color: #FDB022; }
html.dark .text-yellow-600 { color: #F5C84B; }
html.dark .text-yellow-700 { color: #F5C84B; }
html.dark .text-amber-100 { color: #FDB022; }
html.dark .border-amber-200 { border-color: rgba(247,144,9,.35); }
html.dark .border-amber-300 { border-color: rgba(247,144,9,.45); }
html.dark .border-yellow-100 { border-color: rgba(240,177,40,.25); }
html.dark .border-yellow-200 { border-color: rgba(240,177,40,.35); }
html.dark .border-yellow-300 { border-color: rgba(240,177,40,.45); }
html.dark .ring-amber-200 { --tw-ring-color: rgba(247,144,9,.40); }
html.dark .ring-amber-400 { --tw-ring-color: rgba(247,144,9,.55); }
html.dark .bg-amber-400\/70 { background-color: rgba(247,144,9,.55); }

/* ---------- Indigo / purple / violet / cyan / blue ---------- */
html.dark .bg-indigo-50  { background-color: rgba(99,102,241,.13); }
html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.20); }
html.dark .bg-indigo-600\/15 { background-color: rgba(99,102,241,.20); }
html.dark .text-indigo-500 { color: #A5B4FC; }
html.dark .text-indigo-600 { color: #818CF8; }
html.dark .text-indigo-700 { color: #818CF8; }
html.dark .text-purple-500 { color: #B197FC; }
html.dark .text-purple-600 { color: #B197FC; }
html.dark .text-purple-700 { color: #B197FC; }
html.dark .text-violet-600 { color: #A78BFA; }
html.dark .text-cyan-600 { color: #22D3EE; }
html.dark .text-cyan-700 { color: #22D3EE; }
html.dark .bg-purple-50  { background-color: rgba(159,90,253,.13); }
html.dark .bg-cyan-50    { background-color: rgba(6,182,212,.13); }
html.dark .text-blue-600 { color: #7AA7FF; }
html.dark .border-indigo-200 { border-color: rgba(99,102,241,.35); }
html.dark .border-indigo-400 { border-color: rgba(99,102,241,.50); }
html.dark .border-yellow-300 { border-color: rgba(240,177,40,.45); }
html.dark .ring-indigo-200 { --tw-ring-color: rgba(99,102,241,.40); }
html.dark .ring-indigo-400\/40 { --tw-ring-color: rgba(99,102,241,.45); }
html.dark .ring-purple-200 { --tw-ring-color: rgba(159,90,253,.40); }
html.dark .ring-cyan-200 { --tw-ring-color: rgba(6,182,212,.40); }
html.dark .hover\:border-indigo-300:hover { border-color: rgba(99,102,241,.45); }
html.dark .hover\:bg-indigo-700:hover { filter: brightness(1.15); }

/* ---------- Header, sidebar, kartu dekoratif ---------- */
html.dark .glass-header { background: rgba(16,24,40,.92); border-color: #1D2939; }
html.dark .bg-grid {
  background-image:
    radial-gradient(circle at 15% 15%, rgba(70,95,255,.10), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(117,146,255,.07), transparent 40%);
}
html.dark .badge-dot { box-shadow: 0 0 0 2px #101828; }

/* ---------- TABEL ---------- */
html.dark main table thead th { color: #98A2B3 !important; border-color: rgba(255,255,255,.08); }
html.dark main table tbody td { color: #D0D5DD; }
html.dark main table tbody tr { border-color: rgba(255,255,255,.06); }
html.dark main table tbody tr:hover { background: rgba(255,255,255,.03); }

/* ---------- FORM ---------- */
html.dark input[type=text], html.dark input:not([type]), html.dark input[type=email],
html.dark input[type=password], html.dark input[type=number], html.dark input[type=search],
html.dark input[type=tel], html.dark input[type=url], html.dark input[type=date],
html.dark input[type=datetime-local], html.dark input[type=time], html.dark textarea,
html.dark select {
  background-color: #131C2E !important;
  border-color: #344054 !important;
  color: #F2F4F7 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #667085 !important; }
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
  border-color: rgba(156,185,255,.60) !important;
  box-shadow: 0 0 0 4px rgba(70,95,255,.22) !important;
}
html.dark select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2398A2B3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}
html.dark select option { background-color: #131C2E; color: #F2F4F7; }
html.dark input[type=checkbox], html.dark input[type=radio] { border-color: #475467 !important; }
html.dark input[type=checkbox]:not(:checked), html.dark input[type=radio]:not(:checked) { background-color: #131C2E !important; }
html.dark input[type=color] { background-color: #131C2E !important; border-color: #344054 !important; }
html.dark label, html.dark main label { color: #D0D5DD; }

/* ---------- CHIP / BADGE / STAT ---------- */
html.dark .k-chip.green  { background: rgba(18,183,106,.14);  color: #32D583; }
html.dark .k-chip.yellow { background: rgba(247,144,9,.14);   color: #FDB022; }
html.dark .k-chip.red    { background: rgba(240,68,56,.14);   color: #F97066; }
html.dark .k-chip.blue   { background: rgba(70,95,255,.14);   color: #7592FF; }
html.dark .k-chip.cyan   { background: rgba(6,182,212,.14);   color: #22D3EE; }
html.dark .k-chip.pink   { background: rgba(214,31,105,.16);  color: #FAA7E0; }
html.dark .k-chip.indigo { background: rgba(70,95,255,.14);   color: #7592FF; }
html.dark .k-chip.gray   { background: rgba(255,255,255,.07); color: #D0D5DD; }
html.dark .k-stat  { color: #F0F2F5; }
html.dark .k-label { color: #98A2B3; }

/* ---------- TOMBOL AKSI IKON (v4.17.1) ---------- */
html.dark .k-aksi.t-brand { color: #7592FF; } html.dark .k-aksi.t-brand:hover { background: rgba(70,95,255,.14); color: #9CB9FF; }
html.dark .k-aksi.t-green { color: #32D583; } html.dark .k-aksi.t-green:hover { background: rgba(18,183,106,.14); color: #32D583; }
html.dark .k-aksi.t-red   { color: #F97066; } html.dark .k-aksi.t-red:hover   { background: rgba(240,68,56,.14); color: #F97066; }
html.dark .k-aksi.t-amber { color: #FDB022; } html.dark .k-aksi.t-amber:hover { background: rgba(247,144,9,.14); color: #FDB022; }
html.dark .k-aksi.t-gray  { color: #98A2B3; } html.dark .k-aksi.t-gray:hover  { background: rgba(255,255,255,.07); color: #E4E7EC; }

/* ---------- SCROLLBAR ---------- */
html.dark ::-webkit-scrollbar-thumb { background: #2A3648; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #344054; }
html.dark * { scrollbar-color: #2A3648 transparent; }