/* =========================================================
   TM PRODUCTION — token tema, komponen rasa-native, mode gelap
   Tema brand: biru gradasi hitam
   ========================================================= */

:root {
  color-scheme: light;
  --bg: #eef3fb;          --surface: #ffffff;
  --surface-2: #f6f9ff;   --surface-3: #eaf1ff;
  --border: #e5ebf6;      --border-strong: #d3dced;
  --text: #0f172a;        --text-2: #475569;
  --text-3: #64748b;      --text-muted: #94a3b8;  --text-faint: #cbd5e1;
  --accent-text: #1d4ed8;
  --aurora-1: rgba(37,99,235,.16); --aurora-2: rgba(14,165,233,.12); --aurora-3: rgba(15,23,42,.10);
  --card-shadow:   0 1px 2px rgba(16,24,40,.04), 0 14px 30px -18px rgba(29,78,216,.28);
  --card-shadow-h: 0 2px 4px rgba(16,24,40,.05), 0 22px 40px -20px rgba(29,78,216,.38);
  --chart-1: #2563eb; --chart-2: #e8890c; --chart-grid: #e2e8f0; --chart-text: #64748b;
}

html.dark {
  color-scheme: dark;
  --bg: #050912;          --surface: #0f1729;
  --surface-2: #141f36;   --surface-3: #1b2945;
  --border: rgba(148,176,255,.13);  --border-strong: rgba(148,176,255,.24);
  --text: #e9eefc;        --text-2: #b9c6e2;
  --text-3: #93a3c4;      --text-muted: #77879f;  --text-faint: #4d5b78;
  --accent-text: #8ab4ff;
  --aurora-1: rgba(37,99,235,.26); --aurora-2: rgba(14,165,233,.16); --aurora-3: rgba(2,6,23,.6);
  --card-shadow:   0 1px 2px rgba(0,0,0,.3), 0 14px 30px -18px rgba(0,0,0,.6);
  --card-shadow-h: 0 2px 4px rgba(0,0,0,.35), 0 22px 40px -20px rgba(0,0,0,.7);
  --chart-1: #3b82f6; --chart-2: #d97706; --chart-grid: rgba(148,176,255,.12); --chart-text: #93a3c4;
}

/* ---------- Dasar ---------- */
html { background-color: var(--bg); }
html body { background-color: transparent; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  color: var(--text);
}
[x-cloak] { display: none !important; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.tabular { font-variant-numeric: tabular-nums; }

/* Aurora latar */
body::before {
  content: ''; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(38vmax 38vmax at 12% 8%,  var(--aurora-1) 0, transparent 62%),
    radial-gradient(34vmax 34vmax at 92% 4%,  var(--aurora-2) 0, transparent 60%),
    radial-gradient(42vmax 42vmax at 72% 96%, var(--aurora-3) 0, transparent 64%);
  animation: auroraDrift 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5vmax,-2vmax,0) scale(1.06); }
  100% { transform: translate3d(-2vmax,2.5vmax,0) scale(1.02); }
}

/* ---------- Gradasi brand (biru → hitam) ---------- */
.brand-gradient { background: linear-gradient(160deg, #020617 0%, #0b1a4a 46%, #1d4ed8 100%); }
.fab-gradient   { background: linear-gradient(150deg, #0b1a4a, #2563eb); }
.btn-gradient   { background: linear-gradient(135deg, #0b1a4a 0%, #1d4ed8 60%, #2563eb 100%); }
html.dark .brand-gradient { background: linear-gradient(160deg, #01030b 0%, #081436 50%, #16307d 100%); }

.hero-glow {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #020617 0%, #0f2a7a 55%, #2563eb 125%);
}
html.dark .hero-glow { background: linear-gradient(150deg, #01030b 0%, #0c1f5c 55%, #1d4ed8 130%); }
.hero-glow::before {
  content: ''; position: absolute; top: -120px; left: 50%;
  width: 340px; height: 250px; transform: translateX(-50%);
  filter: blur(6px); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.28), rgba(255,255,255,0));
}
.hero-glow::after {
  content: ''; position: absolute; bottom: -90px; right: -60px;
  width: 280px; height: 220px; filter: blur(10px); pointer-events: none;
  background: radial-gradient(closest-side, rgba(96,165,250,.45), rgba(96,165,250,0));
}
.hero-gloss {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(168deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 34%, rgba(255,255,255,0) 56%);
}
.hero-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
}
.brand-gradient, .hero-glow { background-size: 200% 200%; animation: brandFlow 22s ease-in-out infinite; }
@keyframes brandFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.kartu-hijau  { background: linear-gradient(150deg, #ecfdf5, #f6fffb); }
.kartu-jingga { background: linear-gradient(150deg, #fff7ed, #fffbf5); }
.kartu-biru   { background: linear-gradient(150deg, #eff6ff, #f7faff); }
.kartu-merah  { background: linear-gradient(150deg, #fff1f2, #fffafa); }

/* ---------- Gerak ---------- */
.press { transition: transform .12s ease; }
.press:active { transform: scale(.97); }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }
.fade-in { animation: fadeIn .25s ease-out; }
@keyframes toastIn { from { opacity:0; transform: translateY(-14px) scale(.96);} to { opacity:1; transform: translateY(0) scale(1);} }
.toast-in { animation: toastIn .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes sheetUp { from { transform: translateY(100%);} to { transform: translateY(0);} }
.modal-panel { animation: sheetUp .3s cubic-bezier(.22,1,.36,1) both; }
@media (min-width: 768px) { .modal-panel { animation: fadeIn .22s ease-out both; } }

.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request#app-table { opacity: .6; transition: opacity .15s; }

main .bg-white.rounded-2xl, main .bg-white.rounded-3xl, main .bg-white.rounded-\[22px\] { box-shadow: var(--card-shadow); }

/* Sidebar */
.sb-link { transition: background-color .15s ease, color .15s ease; }
.sb-link.aktif { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 3px 0 0 #60a5fa; }

/* Tabel desktop */
.tabel th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.tabel tbody tr { transition: background-color .12s ease; }

/* Transisi ganti tema */
html.tema-anim, html.tema-anim *, html.tema-anim *::before, html.tema-anim *::after {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, fill .35s ease, box-shadow .35s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  body::before, .brand-gradient, .hero-glow { animation: none !important; }
  html.tema-anim, html.tema-anim * { transition: none !important; }
  .press:active { transform: none; }
}

/* =========================================================
   MODE GELAP — override kelas Tailwind terang (spesifisitas 0,2,0)
   ========================================================= */
@media screen {
  .dark .bg-white { background-color: var(--surface); }
  .dark .bg-white\/70 { background-color: rgba(15,23,41,.72); }
  .dark .bg-white\/80, .dark .bg-white\/90 { background-color: rgba(15,23,41,.85); }
  .dark .bg-slate-50 { background-color: var(--surface-2); }
  .dark .bg-slate-100 { background-color: var(--surface-3); }
  .dark .bg-slate-200, .dark .bg-slate-200\/60, .dark .bg-slate-200\/70 { background-color: rgba(148,176,255,.10); }
  .dark .bg-slate-300 { background-color: rgba(148,176,255,.2); }
  .dark .bg-slate-100\/95 { background-color: rgba(5,9,18,.95); }
  .dark .from-slate-100\/95 { --tw-gradient-from: rgba(5,9,18,.95) var(--tw-gradient-from-position); --tw-gradient-to: rgba(5,9,18,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
  .dark .via-slate-100\/70 { --tw-gradient-to: rgba(5,9,18,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(5,9,18,.7) var(--tw-gradient-via-position), var(--tw-gradient-to); }

  .dark .text-slate-900, .dark .text-slate-800, .dark .text-gray-900, .dark .text-gray-800 { color: var(--text); }
  .dark .text-slate-700, .dark .text-gray-700 { color: #d5ddf0; }
  .dark .text-slate-600, .dark .text-gray-600 { color: var(--text-2); }
  .dark .text-slate-500, .dark .text-gray-500 { color: var(--text-3); }
  .dark .text-slate-400, .dark .text-gray-400 { color: var(--text-muted); }
  .dark .text-slate-300, .dark .text-gray-300 { color: var(--text-faint); }

  .dark .text-brand-700, .dark .text-brand-600, .dark .text-blue-700, .dark .text-blue-600 { color: var(--accent-text); }
  .dark .text-brand-400 { color: #7aa7f7; }
  .dark .text-red-600, .dark .text-red-700, .dark .text-rose-600, .dark .text-rose-700 { color: #fb7185; }
  .dark .text-green-600, .dark .text-green-700, .dark .text-emerald-600, .dark .text-emerald-700 { color: #34d399; }
  .dark .text-amber-600, .dark .text-amber-700, .dark .text-orange-600, .dark .text-orange-700 { color: #fbbf24; }
  .dark .text-violet-600, .dark .text-violet-700 { color: #c4b5fd; }
  .dark .text-sky-600, .dark .text-sky-700 { color: #7dd3fc; }
  .dark .text-teal-600, .dark .text-teal-700 { color: #5eead4; }

  .dark .bg-brand-50, .dark .bg-blue-50, .dark .bg-blue-100 { background-color: rgba(59,130,246,.16); }
  .dark .bg-sky-50, .dark .bg-sky-100 { background-color: rgba(14,165,233,.16); }
  .dark .bg-amber-50, .dark .bg-amber-100, .dark .bg-orange-50, .dark .bg-orange-100 { background-color: rgba(245,158,11,.16); }
  .dark .bg-green-50, .dark .bg-green-100, .dark .bg-emerald-50, .dark .bg-emerald-100 { background-color: rgba(16,185,129,.16); }
  .dark .bg-red-50, .dark .bg-red-100, .dark .bg-rose-50, .dark .bg-rose-100 { background-color: rgba(244,63,94,.16); }
  .dark .bg-violet-50, .dark .bg-violet-100 { background-color: rgba(139,92,246,.18); }
  .dark .bg-teal-50, .dark .bg-teal-100 { background-color: rgba(20,184,166,.16); }

  .dark .border-slate-100, .dark .border-slate-200, .dark .border-gray-200, .dark .border-slate-300 { border-color: var(--border); }
  .dark .border-slate-900\/\[\.06\], .dark .border-slate-900\/\[\.07\], .dark .border-slate-900\/\[\.08\] { border-color: var(--border); }
  .dark .border-emerald-100, .dark .border-green-200 { border-color: rgba(16,185,129,.28); }
  .dark .border-amber-100, .dark .border-amber-200, .dark .border-orange-100 { border-color: rgba(245,158,11,.28); }
  .dark .border-rose-100, .dark .border-red-200, .dark .border-rose-200 { border-color: rgba(244,63,94,.3); }
  .dark .border-blue-100, .dark .border-blue-200, .dark .border-brand-100 { border-color: rgba(59,130,246,.3); }
  .dark .divide-slate-100 > * + *, .dark .divide-slate-200 > * + * { border-color: var(--border); }

  .dark .hover\:bg-slate-50:hover, .dark .active\:bg-slate-50:active, .dark .hover\:bg-slate-100:hover { background-color: var(--surface-3); }
  .dark .hover\:bg-brand-50:hover, .dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,.2); }
  .dark .focus\:bg-white:focus { background-color: var(--surface-2); }

  .dark .peer:checked ~ .peer-checked\:bg-white { background-color: var(--surface-3); }
  .dark .peer:checked ~ .peer-checked\:text-slate-900 { color: var(--text); }
  .dark .peer:checked ~ .peer-checked\:bg-green-50 { background-color: rgba(16,185,129,.16); }
  .dark .peer:checked ~ .peer-checked\:bg-brand-50 { background-color: rgba(59,130,246,.18); }
  .dark .peer:checked ~ .peer-checked\:bg-amber-50 { background-color: rgba(245,158,11,.16); }

  .dark .kartu-hijau  { background: linear-gradient(150deg, rgba(16,185,129,.16), rgba(16,185,129,.06)); }
  .dark .kartu-jingga { background: linear-gradient(150deg, rgba(245,158,11,.16), rgba(245,158,11,.06)); }
  .dark .kartu-biru   { background: linear-gradient(150deg, rgba(59,130,246,.18), rgba(59,130,246,.06)); }
  .dark .kartu-merah  { background: linear-gradient(150deg, rgba(244,63,94,.16), rgba(244,63,94,.06)); }

  .dark input:not([type='checkbox']):not([type='radio']):not([type='file']):not(.tetap-terang),
  .dark select, .dark textarea {
    background-color: var(--surface-2); color: var(--text); border-color: var(--border);
  }
  .dark input::placeholder, .dark textarea::placeholder { color: var(--text-muted); }
  .dark input::file-selector-button { background: var(--surface-3); color: var(--text); border: 0; }
  .dark .shadow-sm, .dark .shadow { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

  @media (min-width: 768px) {
    .dark .md\:bg-white { background-color: var(--surface); }
    .dark .md\:bg-green-50 { background-color: rgba(16,185,129,.14); }
    .dark .md\:bg-red-50 { background-color: rgba(244,63,94,.14); }
    .dark .md\:bg-amber-50 { background-color: rgba(245,158,11,.14); }
    .dark .md\:bg-blue-50 { background-color: rgba(59,130,246,.14); }
    .dark .md\:text-green-700 { color: #34d399; }
    .dark .md\:text-red-700 { color: #fb7185; }
    .dark .md\:text-amber-700 { color: #fbbf24; }
    .dark .md\:text-blue-700 { color: var(--accent-text); }
  }
}

/* ---------- Cetak ---------- */
@media print {
  .no-print { display: none !important; }
  body::before { display: none; }
  html, body { background: #fff !important; }
}