/* Sistem tema dashboard Analisa (5 tema x 2 mode).
 *
 * Atribut data-dash-theme / data-dash-mode dipasang per dashboard (bukan <html>),
 * agar tiap dashboard bisa punya tema sendiri tanpa mengganggu shell aplikasi
 * (atribut data-theme sudah dipakai shell). Tanpa atribut = tampilan bawaan.
 *
 * Mekanisme ganda:
 *  1. Kelas utilitas token (.dbg, .dcard, .dtx, ...) untuk markup baru.
 *  2. Override ter-skup [data-dash-theme] memetakan kelas Tailwind netral/aksen
 *     yang dipakai perender kartu ke token — mencakup konten JS tanpa rewrite.
 * Chart.js membaca token yang sama lewat app/javascript/charts/theme.js.
 */

/* ── Tema 1: Clinical Calm (default terang) ─────────────────────────── */
[data-dash-theme="clinical"] {
  --bg: #F6F8F9; --card: #FFFFFF; --tx: #14211F; --mu: #6B7B78; --bd: #E2E8E7;
  --ac: #0F766E; --ac-soft: #CCFBF1; --ac-strong: #0B5E57; --ac-ink: #134E4A; --ac-btn: #FFFFFF;
  --ok: #16A34A; --wr: #D97706; --er: #DC2626;
  --c1: #0F766E; --c2: #38BDF8; --c3: #A3E635; --c4: #F59E0B; --c5: #94A3B8;
  --soft: #EDF2F1;
  --radius: 16px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 33, 31, .06);
  --density: 1;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-head: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-num: "Inter", ui-sans-serif, system-ui, sans-serif;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-lg: 16px;
  --fs-xl: 20px; --fs-2xl: 24px; --fs-kpi: 28px;
  --fw-body: 400; --fw-head: 600; --fw-strong: 700;
  --lh-tight: 1.15; --lh-base: 1.5; --ls-head: -0.01em; --ls-caps: 0.05em;
  --tt-bg: #14211F; --tt-tx: #F6F8F9; --grid: rgba(20, 33, 31, .07);
}
[data-dash-theme="clinical"][data-dash-mode="dark"] {
  --bg: #0E1514; --card: #162120; --tx: #E6EFEE; --mu: #8FA3A0; --bd: #243331;
  --ac: #2DD4BF; --ac-soft: #12423D; --ac-strong: #5EEAD4; --ac-ink: #99F6E4; --ac-btn: #06201D;
  --ok: #22C55E; --wr: #F59E0B; --er: #F87171;
  --soft: #1C2827;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --tt-bg: #E6EFEE; --tt-tx: #14211F; --grid: rgba(230, 239, 238, .08);
}

/* ── Tema 2: Midnight Ops (gelap-first) ─────────────────────────────── */
[data-dash-theme="midnight"] {
  --bg: #0B1220; --card: #121A2B; --tx: #E6EBF5; --mu: #8B97B1; --bd: #1F2A44;
  --ac: #22D3EE; --ac-soft: #0E3A47; --ac-strong: #67E8F9; --ac-ink: #A5F3FC; --ac-btn: #062A33;
  --ok: #34D399; --wr: #FBBF24; --er: #F87171;
  --c1: #22D3EE; --c2: #818CF8; --c3: #34D399; --c4: #FBBF24; --c5: #F472B6;
  --soft: #182136;
  --radius: 10px; --radius-sm: 6px;
  --shadow: none;
  --density: 0.9;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-head: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 10.5px; --fs-sm: 12px; --fs-base: 13.5px; --fs-lg: 15px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-kpi: 26px;
  --fw-body: 400; --fw-head: 600; --fw-strong: 700;
  --lh-tight: 1.15; --lh-base: 1.5; --ls-head: -0.005em; --ls-caps: 0.08em;
  --tt-bg: #E6EBF5; --tt-tx: #0B1220; --grid: rgba(230, 235, 245, .08);
}
[data-dash-theme="midnight"][data-dash-mode="light"] {
  --bg: #F1F5F9; --card: #FFFFFF; --tx: #0F172A; --mu: #64748B; --bd: #E2E8F0;
  --ac: #0891B2; --ac-soft: #CFFAFE; --ac-strong: #0E7490; --ac-ink: #155E75; --ac-btn: #FFFFFF;
  --ok: #059669; --wr: #D97706; --er: #DC2626;
  --soft: #E8EEF5;
  --tt-bg: #0F172A; --tt-tx: #F1F5F9; --grid: rgba(15, 23, 42, .06);
}

/* ── Tema 3: Warm Paper ─────────────────────────────────────────────── */
[data-dash-theme="paper"], [data-dash-theme="warm-paper"] {
  --bg: #FAF7F2; --card: #FFFEFB; --tx: #2B2622; --mu: #7A6F66; --bd: #E8E0D5;
  --ac: #C2410C; --ac-soft: #FFEDD5; --ac-strong: #9A3412; --ac-ink: #7C2D12; --ac-btn: #FFFFFF;
  --ok: #4D7C0F; --wr: #B45309; --er: #B91C1C;
  --c1: #C2410C; --c2: #0F766E; --c3: #CA8A04; --c4: #6D28D9; --c5: #78716C;
  --soft: #F1EAE0;
  --radius: 12px; --radius-sm: 8px;
  --shadow: 0 2px 8px rgba(120, 80, 40, .08);
  --density: 1.15;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-head: "Fraunces", Georgia, serif;
  --font-num: "Inter", ui-sans-serif, system-ui, sans-serif;
  --fs-xs: 11.5px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 17px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-kpi: 32px;
  --fw-body: 400; --fw-head: 600; --fw-strong: 700;
  --lh-tight: 1.15; --lh-base: 1.6; --ls-head: -0.015em; --ls-caps: 0.06em;
  --tt-bg: #2B2622; --tt-tx: #FAF7F2; --grid: rgba(43, 38, 34, .07);
}
[data-dash-theme="paper"][data-dash-mode="dark"], [data-dash-theme="warm-paper"][data-dash-mode="dark"] {
  --bg: #1C1917; --card: #25201D; --tx: #F5EFE8; --mu: #A39A90; --bd: #3A332E;
  --ac: #FB923C; --ac-soft: #432A18; --ac-strong: #FDBA74; --ac-ink: #FED7AA; --ac-btn: #431407;
  --ok: #84CC16; --wr: #FBBF24; --er: #F87171;
  --soft: #2C2724;
  --shadow: 0 2px 8px rgba(0, 0, 0, .4);
  --tt-bg: #F5EFE8; --tt-tx: #1C1917; --grid: rgba(245, 239, 232, .08);
}

/* ── Tema 4: Ocean Fintech ──────────────────────────────────────────── */
[data-dash-theme="ocean"] {
  --bg: #F5F7FF; --card: #FFFFFF; --tx: #0F172A; --mu: #64748B; --bd: #E2E8F0;
  --ac: #4F46E5; --ac-soft: #E0E7FF; --ac-strong: #4338CA; --ac-ink: #3730A3; --ac-btn: #FFFFFF;
  --ok: #059669; --wr: #EA580C; --er: #E11D48;
  --c1: #4F46E5; --c2: #06B6D4; --c3: #10B981; --c4: #F59E0B; --c5: #EC4899;
  --soft: #ECEFFB;
  --radius: 20px; --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(79, 70, 229, .08);
  --density: 1;
  --font-body: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-num: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-lg: 16px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-kpi: 34px;
  --fw-body: 400; --fw-head: 700; --fw-strong: 800;
  --lh-tight: 1.15; --lh-base: 1.5; --ls-head: -0.02em; --ls-caps: 0.04em;
  --tt-bg: #0F172A; --tt-tx: #F5F7FF; --grid: rgba(15, 23, 42, .06);
}
[data-dash-theme="ocean"][data-dash-mode="dark"] {
  --bg: #0B1020; --card: #151B33; --tx: #E8EBFA; --mu: #96A0C4; --bd: #242C4D;
  --ac: #818CF8; --ac-soft: #232A5E; --ac-strong: #A5B4FC; --ac-ink: #C7D2FE; --ac-btn: #141A3A;
  --ok: #34D399; --wr: #FB923C; --er: #FB7185;
  --soft: #1C2340;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --tt-bg: #E8EBFA; --tt-tx: #0B1020; --grid: rgba(232, 235, 250, .08);
}

/* ── Tema 5: Mono Slate ─────────────────────────────────────────────── */
[data-dash-theme="mono"] {
  --bg: #FAFAFA; --card: #FFFFFF; --tx: #18181B; --mu: #71717A; --bd: #E4E4E7;
  --ac: #18181B; --ac-soft: #F4F4F5; --ac-strong: #000000; --ac-ink: #3F3F46; --ac-btn: #FFFFFF;
  --ok: #15803D; --wr: #C2410C; --er: #B91C1C;
  --c1: #18181B; --c2: #52525B; --c3: #A1A1AA; --c4: #D4D4D8; --c5: #E4E4E7;
  --soft: #F0F0F1;
  --radius: 6px; --radius-sm: 4px;
  --shadow: none;
  --density: 0.9;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-head: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13.5px; --fs-lg: 15px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-kpi: 24px;
  --fw-body: 400; --fw-head: 500; --fw-strong: 600;
  --lh-tight: 1.15; --lh-base: 1.5; --ls-head: -0.01em; --ls-caps: 0.06em;
  --tt-bg: #18181B; --tt-tx: #FAFAFA; --grid: rgba(24, 24, 27, .07);
}
[data-dash-theme="mono"][data-dash-mode="dark"] {
  --bg: #09090B; --card: #111113; --tx: #FAFAFA; --mu: #A1A1AA; --bd: #27272A;
  --ac: #FAFAFA; --ac-soft: #1F1F23; --ac-strong: #FFFFFF; --ac-ink: #E4E4E7; --ac-btn: #09090B;
  --ok: #22C55E; --wr: #FB923C; --er: #F87171;
  --soft: #1A1A1D;
  --tt-bg: #FAFAFA; --tt-tx: #09090B; --grid: rgba(250, 250, 250, .09);
}

/* ── Fallback :root (Clinical terang) agar kelas token selalu resolve ── */
:root {
  --bg: #F6F8F9; --card: #FFFFFF; --tx: #14211F; --mu: #6B7B78; --bd: #E2E8E7;
  --ac: #0F766E; --ac-soft: #CCFBF1; --ac-strong: #0B5E57; --ac-ink: #134E4A; --ac-btn: #FFFFFF;
  --ok: #16A34A; --wr: #D97706; --er: #DC2626;
  --c1: #0F766E; --c2: #38BDF8; --c3: #A3E635; --c4: #F59E0B; --c5: #94A3B8;
  --soft: #EDF2F1;
  --radius: 16px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 33, 31, .06);
  --density: 1;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-head: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-num: "Inter", ui-sans-serif, system-ui, sans-serif;
  --tt-bg: #14211F; --tt-tx: #F6F8F9; --grid: rgba(20, 33, 31, .07);
}

/* ── Mode gelap: kontrol native ─────────────────────────────────────── */
[data-dash-theme][data-dash-mode="dark"] { color-scheme: dark; }
[data-dash-theme]:not([data-dash-mode="dark"]) { color-scheme: light; }

/* ── Dasar scope tema ──────────────────────────────────────────────── */
[data-dash-theme] {
  background-color: var(--bg);
  font-family: var(--font-body) !important;
  font-size: calc(15px * var(--density));
}
[data-dash-theme] h3,
[data-dash-theme] .kpi-value { font-family: var(--font-head); }
[data-dash-theme] td,
[data-dash-theme] th,
[data-dash-theme] .kpi-value {
  font-variant-numeric: tabular-nums;
}
[data-dash-theme] td,
[data-dash-theme] th { font-family: var(--font-num); }

/* ── Permukaan ─────────────────────────────────────────────────────── */
[data-dash-theme] .bg-white { background-color: var(--card); }
[data-dash-theme] .bg-slate-50,
[data-dash-theme] .bg-slate-100 { background-color: var(--soft); }
[data-dash-theme] .hover\:bg-slate-50:hover,
[data-dash-theme] .hover\:bg-slate-100:hover { background-color: var(--soft); }

/* ── Teks netral ───────────────────────────────────────────────────── */
[data-dash-theme] .text-slate-900,
[data-dash-theme] .text-slate-800,
[data-dash-theme] .text-slate-700,
[data-dash-theme] .text-slate-600 { color: var(--tx); }
[data-dash-theme] .text-slate-500,
[data-dash-theme] .text-slate-400,
[data-dash-theme] .text-slate-300 { color: var(--mu); }
[data-dash-theme] .hover\:text-slate-600:hover,
[data-dash-theme] .hover\:text-slate-700:hover { color: var(--tx); }

/* ── Border & pembagi ──────────────────────────────────────────────── */
[data-dash-theme] .border-slate-100,
[data-dash-theme] .border-slate-200,
[data-dash-theme] .border-slate-300 { border-color: var(--bd); }
[data-dash-theme] .divide-slate-50 > * + *,
[data-dash-theme] .divide-slate-100 > * + *,
[data-dash-theme] .divide-slate-200 > * + * { border-color: var(--bd); }

/* ── Aksen (violet/sky → --ac) ─────────────────────────────────────── */
[data-dash-theme] .bg-violet-50,
[data-dash-theme] .bg-violet-100,
[data-dash-theme] .bg-sky-50 { background-color: var(--ac-soft); }
[data-dash-theme] .hover\:bg-violet-50:hover { background-color: var(--ac-soft); }
[data-dash-theme] .bg-violet-600 { background-color: var(--ac); color: var(--ac-btn); }
[data-dash-theme] .hover\:bg-violet-700:hover { background-color: var(--ac-strong); }
[data-dash-theme] .text-violet-400,
[data-dash-theme] .text-violet-500,
[data-dash-theme] .text-violet-600,
[data-dash-theme] .text-violet-700,
[data-dash-theme] .text-sky-400 { color: var(--ac); }
[data-dash-theme] .text-violet-800,
[data-dash-theme] .text-sky-700,
[data-dash-theme] .text-sky-800 { color: var(--ac-ink); }
[data-dash-theme] .hover\:text-violet-700:hover { color: var(--ac-strong); }
[data-dash-theme] .hover\:text-sky-700:hover { color: var(--ac-ink); }
[data-dash-theme] .border-violet-100,
[data-dash-theme] .border-violet-200,
[data-dash-theme] .border-sky-100 { border-color: color-mix(in srgb, var(--ac) 22%, transparent); }
[data-dash-theme] .focus\:border-violet-500:focus { border-color: var(--ac); }

/* ── Status (hijau/oranye/merah hanya untuk status) ────────────────── */
[data-dash-theme] .bg-emerald-50 { background-color: color-mix(in srgb, var(--ok) 12%, var(--card)); }
[data-dash-theme] .bg-amber-50 { background-color: color-mix(in srgb, var(--wr) 12%, var(--card)); }
[data-dash-theme] .bg-rose-50 { background-color: color-mix(in srgb, var(--er) 12%, var(--card)); }
[data-dash-theme] .text-emerald-600,
[data-dash-theme] .text-emerald-700 { color: var(--ok); }
[data-dash-theme] .text-amber-600,
[data-dash-theme] .text-amber-700 { color: var(--wr); }
[data-dash-theme] .text-rose-500,
[data-dash-theme] .text-rose-600,
[data-dash-theme] .text-rose-700 { color: var(--er); }
[data-dash-theme] .hover\:text-rose-500:hover { color: var(--er); }
[data-dash-theme] .border-emerald-200 { border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
[data-dash-theme] .border-amber-200 { border-color: color-mix(in srgb, var(--wr) 32%, transparent); }
[data-dash-theme] .border-rose-200 { border-color: color-mix(in srgb, var(--er) 32%, transparent); }

/* ── Bentuk: radius & bayangan ─────────────────────────────────────── */
[data-dash-theme] .rounded-2xl { border-radius: var(--radius); }
[data-dash-theme] .rounded-xl { border-radius: var(--radius-sm); }
[data-dash-theme] .shadow-sm,
[data-dash-theme] .shadow-md,
[data-dash-theme] .shadow-lg { box-shadow: var(--shadow); }

/* ── Kelas utilitas token (markup baru & pratinjau modal) ──────────── */
.dbg { background-color: var(--bg); }
.dcard { background-color: var(--card); }
.dsoft { background-color: var(--soft); }
.dtx { color: var(--tx); }
.dmu { color: var(--mu); }
.dbd { border-color: var(--bd); }
.dac { color: var(--ac); }
.dac-bg { background-color: var(--ac); color: var(--ac-btn); }
.dac-soft { background-color: var(--ac-soft); color: var(--ac-ink); }
.dok { color: var(--ok); }
.dwr { color: var(--wr); }
.der { color: var(--er); }
.dfont-head { font-family: var(--font-head); }
.dfont-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.drounded { border-radius: var(--radius); }
.drounded-sm { border-radius: var(--radius-sm); }
.dshadow { box-shadow: var(--shadow); }

/* Bilah edit tata letak: hover token (tak bisa via variant Tailwind). */
[data-edit-bar] button:hover { background-color: var(--ac-soft); }
[data-edit-bar] button:hover.der { color: var(--er); }