/* =========================================================
   theme.css - Safta Sejuk Manajemen
   Token tema, mode gelap, dan lapisan "hidup" (animasi halus).
   Tema utama: gold gradasi hitam (kontras tinggi).
   ========================================================= */

:root {
  color-scheme: light;
  --bg: #f7f4ec;
  --surface: #ffffff;
  --surface-2: #fbf9f3;
  --surface-3: #f4efe1;
  --border: #ece5d3;
  --border-strong: #ddd3ba;
  --text: #17130b;
  --text-2: #4b4536;
  --text-3: #6b6452;
  --text-muted: #9a917b;
  --text-faint: #d2cab5;
  --accent-text: #8a6210;
  --ok: #059669;
  --warn: #d97706;
  --bad: #e11d48;

  --aurora-1: rgba(224, 178, 50, .20);
  --aurora-2: rgba(245, 215, 110, .18);
  --aurora-3: rgba(28, 23, 16, .10);

  --card-shadow: 0 1px 2px rgba(24, 20, 12, .04), 0 14px 30px -18px rgba(138, 98, 16, .30);
  --card-shadow-h: 0 2px 4px rgba(24, 20, 12, .05), 0 22px 40px -20px rgba(138, 98, 16, .40);

  --tabbar-h: 58px;
  --tabbar-bg: rgba(255, 255, 255, .97);
  --tabbar-garis: rgba(23, 19, 11, .09);
  --tab-aktif-bg: rgba(201, 151, 28, .16);
}

html.dark {
  color-scheme: dark;
  --bg: #0a0805;
  --surface: #17130c;
  --surface-2: #1e1910;
  --surface-3: #272015;
  --border: rgba(245, 215, 110, .12);
  --border-strong: rgba(245, 215, 110, .22);
  --text: #f6efdc;
  --text-2: #d7ccb0;
  --text-3: #b3a789;
  --text-muted: #8c8169;
  --text-faint: #5a5240;
  --accent-text: #f5d76e;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;

  --aurora-1: rgba(201, 151, 28, .22);
  --aurora-2: rgba(245, 215, 110, .10);
  --aurora-3: rgba(0, 0, 0, .45);

  --tabbar-bg: rgba(18, 15, 9, .96);
  --tabbar-garis: rgba(245, 215, 110, .14);
  --tab-aktif-bg: rgba(245, 215, 110, .16);
}

/* ---------- Dasar rasa-native ---------- */
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;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[x-cloak] { display: none !important; }

/* ---------- Umpan balik tekan ---------- */
.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; }

.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* ---------- Gradasi brand: gold gradasi hitam ---------- */
.brand-gradient {
  background: linear-gradient(135deg, #0b0905 0%, #241b0b 42%, #6e4d10 78%, #a97a12 100%);
}
.gold-gradient {
  background: linear-gradient(150deg, #8a6210 0%, #c9971c 55%, #e9c04a 100%);
}
.gold-teks {
  background: linear-gradient(120deg, #f8e39a 0%, #e0b232 45%, #f5d76e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.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%; }
}

.hero-glow {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #0b0905 0%, #2a1f0b 38%, #8a6210 80%, #e0b232 125%);
}
.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, 240, 200, .30), rgba(255, 240, 200, 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(245, 215, 110, .50), rgba(245, 215, 110, 0));
}
.hero-gloss {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(168deg, rgba(255, 255, 255, .18) 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(245, 215, 110, 0), rgba(245, 215, 110, .7), rgba(245, 215, 110, 0));
}
.hero-alive::after {
  content: ''; position: absolute;
  top: -20%; bottom: -20%; left: -75%; width: 55%;
  pointer-events: none; transform: skewX(-18deg); z-index: 1;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 236, 179, .16) 50%, transparent 100%);
  animation: heroShine 9s cubic-bezier(.4, 0, .2, 1) 1.4s infinite;
}
@keyframes heroShine { 0% { left: -75%; } 45%, 100% { left: 135%; } }

html.dark .hero-glow {
  background: linear-gradient(150deg, #050402 0%, #1d160a 42%, #6e4d10 88%, #a97a12 132%);
}
html.dark .brand-gradient {
  background: linear-gradient(135deg, #050402 0%, #17120a 50%, #5a3f0d 100%);
}

/* ---------- 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); }
}

/* ---------- Kartu penekanan ---------- */
.kartu-hijau { background: linear-gradient(150deg, #ecfdf5, #f6fffb); }
.kartu-jingga { background: linear-gradient(150deg, #fff7ed, #fffbf5); }
.kartu-gold { background: linear-gradient(150deg, #fdf6dc, #fffbef); }
.kartu-biru { background: linear-gradient(150deg, #eff6ff, #f7fbff); }
.kartu-merah { background: linear-gradient(150deg, #fff1f2, #fff7f8); }
html.dark .kartu-hijau { background: linear-gradient(150deg, rgba(16, 185, 129, .16), rgba(16, 185, 129, .07)); }
html.dark .kartu-jingga { background: linear-gradient(150deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .07)); }
html.dark .kartu-gold { background: linear-gradient(150deg, rgba(224, 178, 50, .18), rgba(224, 178, 50, .06)); }
html.dark .kartu-biru { background: linear-gradient(150deg, rgba(59, 130, 246, .18), rgba(59, 130, 246, .07)); }
html.dark .kartu-merah { background: linear-gradient(150deg, rgba(244, 63, 94, .16), rgba(244, 63, 94, .07)); }

/* ---------- 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;
}

/* ---------- Grafik batang dashboard ---------- */
.grafik-batang { display: flex; align-items: flex-end; gap: 4px; height: 168px; }
.grafik-kolom { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; position: relative; }
.grafik-seg { border-radius: 0; min-height: 0; transition: height .5s cubic-bezier(.22, 1, .36, 1); }
.grafik-seg:first-child { border-radius: 4px 4px 0 0; }
/* Warna mengikuti entitas (tervalidasi CVD): Unit AC = gold, Sparepart = biru. */
.grafik-seg-ac, .warna-ac { background: #a97a12; }
.grafik-seg-sp, .warna-sp { background: #3f73c9; }
html.dark .grafik-seg-ac, html.dark .warna-ac { background: #c08a14; }
html.dark .grafik-seg-sp, html.dark .warna-sp { background: #5a8fd8; }
.grafik-kolom:hover .grafik-tip, .grafik-kolom:focus .grafik-tip { display: block; }
.grafik-kolom:focus { outline: none; }
.grafik-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; display: none; pointer-events: none; z-index: 5;
  animation: fadeIn .15s ease-out;
  background: #17130b; color: #fff; font-size: 11px; font-weight: 600; padding: 6px 9px; border-radius: 10px;
}
.grafik-tip.tip-kiri { left: 0; transform: none; }
.grafik-tip.tip-kanan { left: auto; right: 0; transform: none; }
.grafik-garis { border-top: 1px dashed var(--border); }

/* =========================================================
   BILAH TAB BAWAH (mobile)
   ========================================================= */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: var(--tabbar-bg);
  border-top: 1px solid var(--tabbar-garis);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-tap-highlight-color: transparent;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar {
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}
.tabbar-isi { display: flex; align-items: stretch; height: var(--tabbar-h); }
.tab-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 7px 2px 6px;
  color: var(--text-muted);
  transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.tab-ikon {
  width: 46px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 16px;
  transition: background-color .2s ease, transform .16s ease, color .2s ease;
}
.tab-label {
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .005em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab-item:active .tab-ikon { transform: scale(.9); }
.tab-item.aktif { color: var(--accent-text); }
.tab-item.aktif .tab-ikon { background: var(--tab-aktif-bg); }
.tab-aksi .tab-ikon {
  width: 44px; color: #fff; border-radius: 13px;
  background: linear-gradient(150deg, #241b0b, #8a6210 55%, #e0b232);
  box-shadow: 0 4px 10px -3px rgba(138, 98, 16, .6);
}
.tab-aksi { color: var(--text-3); }
.tab-aksi .fa-plus { transition: transform .28s cubic-bezier(.22, 1, .36, 1); }

main.pb-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px); }
@media (min-width: 768px) {
  main.pb-tabbar { padding-bottom: 1.5rem; }
}

/* ---------- Layar kasir ---------- */
.nota-panel { box-shadow: 0 -14px 44px rgba(24, 20, 12, .22); }
.bilah-kasir { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
@media (min-width: 768px) {
  .nota-panel { box-shadow: var(--card-shadow); }
}

/* =========================================================
   MODE GELAP - override kelas Tailwind terang
   Dibungkus @media screen agar hasil cetak tetap terang.
   ========================================================= */
@media screen {
  .dark .bg-white { background-color: var(--surface); }
  .dark .bg-slate-50, .dark .bg-gray-50 { background-color: var(--surface-2); }
  .dark .bg-slate-50\/60 { background-color: rgba(30, 25, 16, .6); }
  .dark .bg-slate-100, .dark .bg-gray-100 { background-color: var(--surface-3); }
  .dark .bg-slate-200 { background-color: var(--surface-3); }
  .dark .bg-slate-200\/60 { background-color: rgba(39, 32, 21, .7); }
  .dark .bg-slate-200\/70 { background-color: rgba(39, 32, 21, .7); }
  .dark .bg-slate-300 { background-color: var(--border-strong); }
  .dark .bg-white\/70 { background-color: rgba(23, 19, 12, .78); }
  .dark .bg-white\/80 { background-color: rgba(23, 19, 12, .86); }
  .dark .bg-white\/90 { background-color: rgba(23, 19, 12, .92); }

  .dark .text-slate-900, .dark .text-gray-900 { color: var(--text); }
  .dark .text-slate-800, .dark .text-gray-800 { color: var(--text); }
  .dark .text-slate-700, .dark .text-gray-700 { color: var(--text-2); }
  .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-brand-800 { color: var(--accent-text); }
  .dark .text-blue-700, .dark .text-blue-600 { color: #7fb0ff; }
  .dark .text-green-700, .dark .text-green-600, .dark .text-emerald-600, .dark .text-emerald-700 { color: var(--ok); }
  .dark .text-amber-700, .dark .text-amber-600 { color: var(--warn); }
  .dark .text-red-600, .dark .text-rose-600, .dark .text-red-700, .dark .text-rose-700 { color: var(--bad); }
  .dark .text-violet-600, .dark .text-violet-700 { color: #b08cff; }
  .dark .text-sky-600, .dark .text-sky-700 { color: #7dd3fc; }
  .dark .text-brand-900 { color: #faf0cc; }
  .dark .text-amber-900, .dark .text-amber-800 { color: #fde68a; }
  .dark .text-emerald-900, .dark .text-emerald-800 { color: #a7f3d0; }
  .dark .text-rose-900, .dark .text-rose-800 { color: #fecdd3; }

  .dark .bg-brand-50 { background-color: rgba(224, 178, 50, .16); }
  .dark .bg-brand-100 { background-color: rgba(224, 178, 50, .24); }
  .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-green-50, .dark .bg-green-100, .dark .bg-emerald-50, .dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .16); }
  .dark .bg-amber-50, .dark .bg-amber-100 { background-color: rgba(245, 158, 11, .16); }
  .dark .bg-rose-50, .dark .bg-red-50, .dark .bg-red-100, .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, .16); }
  .dark .bg-slate-900 { background-color: #040302; }

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

  .dark .hover\:bg-slate-50:hover { background-color: var(--surface-2); }
  .dark .hover\:bg-slate-100:hover { background-color: var(--surface-3); }
  .dark .hover\:bg-brand-50:hover { background-color: rgba(224, 178, 50, .14); }
  .dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, .14); }
  .dark .active\:bg-slate-50:active { 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-brand-50 { background-color: rgba(224, 178, 50, .18); }
  .dark .peer:checked ~ .peer-checked\:bg-green-50 { background-color: rgba(16, 185, 129, .18); }
  .dark .peer:checked ~ .peer-checked\:bg-amber-50 { background-color: rgba(245, 158, 11, .18); }

  .dark input:not([type='checkbox']):not([type='radio']):not([type='file']),
  .dark select, .dark textarea {
    background-color: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
  }
  .dark ::placeholder { color: var(--text-muted); }
  .dark ::file-selector-button {
    background-color: var(--surface-3); color: var(--text-2);
    border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px;
  }
  .dark table thead th { color: var(--text-3); }
  .dark .grafik-tip { background: #f6efdc; color: #17130b; }

  @media (min-width: 768px) {
    .dark .md\:bg-green-50 { background-color: rgba(16, 185, 129, .16); }
    .dark .md\:bg-rose-50 { background-color: rgba(244, 63, 94, .16); }
    .dark .md\:bg-amber-50 { background-color: rgba(245, 158, 11, .16); }
    .dark .md\:bg-brand-50 { background-color: rgba(224, 178, 50, .16); }
    .dark .md\:text-green-700 { color: var(--ok); }
    .dark .md\:text-red-600 { color: var(--bad); }
    .dark .md\:text-amber-700 { color: var(--warn); }
    .dark .md\:text-brand-800 { color: var(--accent-text); }
    .dark .md\:border-green-200 { border-color: rgba(16, 185, 129, .3); }
    .dark .md\:border-red-200 { border-color: rgba(244, 63, 94, .3); }
    .dark .md\:border-amber-200 { border-color: rgba(245, 158, 11, .3); }
    .dark .md\:border-brand-200 { border-color: rgba(224, 178, 50, .3); }
  }

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

/* ---------- Halaman cetak ---------- */
@media print {
  .no-print, nav, aside, header, footer, .htmx-indicator, .tabbar { display: none !important; }
  body { background: #fff !important; }
  body::before { display: none !important; }
  main { padding: 0 !important; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  thead { display: table-header-group; }
}

/* ---------- Hormati preferensi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .brand-gradient, .hero-glow, .hero-alive::after { animation: none !important; }
  html.tema-anim, html.tema-anim * { transition: none !important; }
  .fade-in, .toast-in { animation: none !important; }
}