/* ==========================================================
   Peradi Bersatu - tema aplikasi
   Biru gradasi hitam + aksen emas. Mobile native-feel.
   ========================================================== */

:root {
  color-scheme: light;
  --bg: #f1f5fd;
  --surface: #ffffff;
  --surface-2: #f7faff;
  --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;
  --ok: #059669;
  --warn: #d97706;
  --bad: #e11d48;

  --aurora-1: rgba(29, 78, 216, .18);
  --aurora-2: rgba(56, 189, 248, .16);
  --aurora-3: rgba(15, 27, 45, .12);

  --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -18px rgba(29, 78, 216, .26);
  --card-shadow-h: 0 2px 4px rgba(16, 24, 40, .05), 0 22px 40px -20px rgba(29, 78, 216, .36);
}

html.dark {
  color-scheme: dark;
  --bg: #05080f;
  --surface: #0e1729;
  --surface-2: #142035;
  --surface-3: #1b2a45;
  --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;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;

  --aurora-1: rgba(29, 78, 216, .30);
  --aurora-2: rgba(14, 165, 233, .20);
  --aurora-3: rgba(124, 58, 237, .18);
}

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

.font-serif-num { font-family: 'Newsreader', Georgia, serif; }
.font-mono-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

html { background-color: var(--bg); }
html body { background-color: transparent; }

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

/* ---------- Lapisan hidup: 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 ---------- */
.brand-gradient {
  background: linear-gradient(135deg, #05080f 0%, #0f1b2d 38%, #1d4ed8 100%);
  background-size: 200% 200%;
  animation: brandFlow 22s ease-in-out infinite;
}
.hero-glow {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #05080f 0%, #14264d 50%, #1d4ed8 122%);
  background-size: 200% 200%;
  animation: brandFlow 22s ease-in-out infinite;
}
html.dark .brand-gradient { background-image: linear-gradient(135deg, #03060d 0%, #0a1220 40%, #16307d 100%); }
html.dark .hero-glow { background-image: linear-gradient(150deg, #03060d 0%, #0d1a36 50%, #16307d 130%); }

@keyframes brandFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.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, .34), 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(125, 211, 252, .45), rgba(125, 211, 252, 0));
}
.hero-gloss {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(168deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 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(226, 169, 49, .55), rgba(255, 255, 255, 0));
}
.hero-alive::after {
  content: ''; position: absolute;
  top: -20%; bottom: -20%; left: -75%; width: 55%;
  pointer-events: none; transform: skewX(-18deg); z-index: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .14) 50%, transparent 100%);
  animation: heroShine 9s cubic-bezier(.4, 0, .2, 1) 1.4s infinite;
}
@keyframes heroShine { 0% { left: -75%; } 45%, 100% { left: 135%; } }

/* ---------- Kartu bergradasi lembut ---------- */
.kartu-biru   { background: linear-gradient(150deg, #eff6ff, #f8fbff); }
.kartu-hijau  { background: linear-gradient(150deg, #ecfdf5, #f6fffb); }
.kartu-jingga { background: linear-gradient(150deg, #fff7ed, #fffbf5); }
.kartu-merah  { background: linear-gradient(150deg, #fef2f2, #fffafa); }
html.dark .kartu-biru   { background: linear-gradient(150deg, rgba(37,99,235,.15), rgba(37,99,235,.05)); }
html.dark .kartu-hijau  { background: linear-gradient(150deg, rgba(16,185,129,.15), rgba(16,185,129,.05)); }
html.dark .kartu-jingga { background: linear-gradient(150deg, rgba(217,119,6,.16), rgba(217,119,6,.05)); }
html.dark .kartu-merah  { background: linear-gradient(150deg, rgba(225,29,72,.15), rgba(225,29,72,.05)); }

/* ---------- Gerak & umpan balik ---------- */
.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 pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }
.pulse-dot { animation: pulseDot 1.8s ease-in-out infinite; }

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

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

/* ---------- Bayangan kartu bernuansa brand ---------- */
@media screen {
  main .bg-white.rounded-2xl,
  main .bg-white.rounded-3xl,
  main .bg-white.rounded-\[20px\],
  main .bg-white.rounded-\[22px\] { box-shadow: var(--card-shadow); }
  main .bg-white.rounded-2xl:hover,
  main .bg-white.rounded-\[22px\]:hover { box-shadow: var(--card-shadow-h); }
}

/* ---------- Sidebar ---------- */
.nav-item { transition: background-color .15s ease, color .15s ease; }
.nav-aktif { background: rgba(226, 169, 49, .14); color: #F0DCB6 !important; }
.nav-aktif::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px; background: #C79A4E;
}

/* ---------- Mode gelap: override kelas Tailwind terang ---------- */
@media screen {
  .dark .bg-white { background-color: var(--surface); }
  .dark .bg-slate-50 { background-color: var(--surface-2); }
  .dark .bg-slate-100 { background-color: var(--surface-3); }
  .dark .bg-slate-100\/70 { background-color: rgba(27, 42, 69, .7); }
  .dark .bg-slate-200 { background-color: var(--surface-3); }
  .dark .bg-slate-200\/70 { background-color: rgba(27, 42, 69, .8); }
  .dark .bg-slate-300 { background-color: var(--border-strong); }
  .dark .bg-white\/70 { background-color: rgba(14, 23, 41, .78); }
  .dark .bg-white\/80 { background-color: rgba(14, 23, 41, .85); }

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

  .dark .text-brand-700, .dark .text-brand-600 { color: var(--accent-text); }
  .dark .text-blue-700, .dark .text-blue-600 { color: #8ab4ff; }
  .dark .text-green-700, .dark .text-green-600, .dark .text-emerald-600 { 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 { color: var(--bad); }
  .dark .text-orange-700 { color: #fdba74; }

  .dark .bg-brand-50 { background-color: rgba(59, 130, 246, .16); }
  .dark .bg-blue-50, .dark .bg-blue-100 { background-color: rgba(59, 130, 246, .16); }
  .dark .bg-green-50, .dark .bg-green-100 { background-color: rgba(16, 185, 129, .16); }
  .dark .bg-emerald-50 { background-color: rgba(16, 185, 129, .16); }
  .dark .bg-amber-50, .dark .bg-amber-100 { background-color: rgba(217, 119, 6, .18); }
  .dark .bg-orange-100 { background-color: rgba(234, 88, 12, .18); }
  .dark .bg-red-50, .dark .bg-red-100 { background-color: rgba(225, 29, 72, .16); }
  .dark .bg-rose-50 { background-color: rgba(225, 29, 72, .16); }
  .dark .bg-violet-50, .dark .bg-violet-100 { background-color: rgba(139, 92, 246, .18); }

  .dark .border-slate-100 { border-color: var(--border); }
  .dark .border-slate-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 .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 .active\:bg-slate-50:active { background-color: var(--surface-2); }

  .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: 0;
  }

  @media (min-width: 768px) {
    .dark .md\:bg-green-50 { background-color: rgba(16, 185, 129, .16); }
    .dark .md\:bg-red-50 { background-color: rgba(225, 29, 72, .16); }
    .dark .md\:bg-amber-50 { background-color: rgba(217, 119, 6, .18); }
    .dark .md\:bg-blue-50 { background-color: rgba(59, 130, 246, .16); }
    .dark .md\:bg-white { background-color: var(--surface); }
  }
}

/* ---------- Cetak ---------- */
@media print {
  .no-print, aside, nav, header, footer, #modal-container { display: none !important; }
  body { background: #fff !important; }
  body::before { display: none !important; }
  main { padding: 0 !important; }
  .print-block { display: block !important; }
  @page { margin: 12mm; }
}

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

/* ==========================================================
   LAPISAN MOBILE — mengikuti folder handoff (UI-SPEC 3)
   Kanvas hangat, kartu padat, radius 10-12px, aksen emas.
   ========================================================== */
@media screen and (max-width: 767px) {
  :root {
    --bg: #F5F3EE;
    --surface: #FFFFFF;
    --surface-2: #FAF9F6;
    --surface-3: #EDEAE3;
    --border: rgba(15, 27, 45, .09);
    --aurora-1: transparent;
    --aurora-2: transparent;
    --aurora-3: transparent;
  }
  html.dark {
    --bg: #05080f;
    --surface: #0e1729;
    --surface-2: #142035;
    --surface-3: #1b2a45;
  }
  body::before { display: none; }
}

/* Header mobile gelap (layar dashboard) */
.kop-mobile {
  background: #0C1728;
  padding-top: calc(env(safe-area-inset-top) + 18px);
}
html.dark .kop-mobile { background: #060c17; }

/* Header mobile terang (layar dalam) */
.kop-mobile-terang {
  background: var(--surface);
  border-bottom: 1px solid rgba(15, 27, 45, .08);
  padding-top: calc(env(safe-area-inset-top) + 14px);
}
html.dark .kop-mobile-terang { border-bottom-color: var(--border); }

/* Kartu dasar handoff */
.kartu-hf {
  background: var(--surface);
  border: 1px solid rgba(15, 27, 45, .08);
  border-radius: 12px;
}
html.dark .kartu-hf { border-color: var(--border); }

.kartu-kpi { border-radius: 11px; padding: 12px 13px; }

.label-kpi {
  font-size: 9.5px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(15, 27, 45, .5);
}
html.dark .label-kpi { color: var(--text-3); }

.angka-kpi {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 27px; line-height: 1.1; font-weight: 500;
  color: #0F1B2D; margin-top: 5px;
}
html.dark .angka-kpi { color: var(--text); }

.sub-kpi { font-size: 10.5px; font-weight: 600; margin-top: 3px; }

/* Chip filter pil (handoff) */
.chip-hf {
  height: 31px; padding: 0 12px; border-radius: 16px;
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 11.5px; font-weight: 600;
  background: var(--surface); border: 1px solid rgba(15, 27, 45, .12);
  color: rgba(15, 27, 45, .6);
}
.chip-hf-aktif { background: #0C1728; border-color: #0C1728; color: #fff; }
.chip-hf-merah { border-color: rgba(179, 38, 30, .3); color: #8E241D; }
.chip-hf-emas  { border-color: rgba(226, 169, 49, .4); color: #8A5E1E; }
html.dark .chip-hf { border-color: var(--border); color: var(--text-2); }
html.dark .chip-hf-aktif { background: #1b2a45; border-color: #1b2a45; color: #fff; }

/* Badge sisa hari */
.badge-hari {
  font-size: 10.5px; font-weight: 600; border-radius: 6px;
  padding: 3px 7px; flex: none; white-space: nowrap;
}
.badge-kritis { background: #B3261E; color: #fff; }
.badge-dekat  { background: rgba(226, 169, 49, .2); color: #8A5E1E; }
.badge-aman   { background: rgba(23, 121, 94, .12); color: #0E5F49; }

/* Tombol aksi kartu (32px) */
.tombol-kartu {
  flex: 1; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
}
.tombol-wa { background: rgba(23, 121, 94, .1); color: #0E5F49; }
.tombol-garis { border: 1px solid rgba(15, 27, 45, .13); color: #0F1B2D; }
html.dark .tombol-garis { border-color: var(--border); color: var(--text); }

/* Bilah tab bawah (82px, datar) */
.tab-hf {
  height: calc(82px + env(safe-area-inset-bottom));
  padding: 9px 6px env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid rgba(15, 27, 45, .09);
  backdrop-filter: blur(12px);
}
html.dark .tab-hf { background: rgba(14, 23, 41, .95); border-top-color: var(--border); }

.tab-item { color: rgba(15, 27, 45, .45); }
.tab-item-aktif { color: #0F1B2D; }
html.dark .tab-item { color: var(--text-muted); }
html.dark .tab-item-aktif { color: var(--accent-text); }

/* Bilah aksi bawah (layar verifikasi) */
.aksi-bawah {
  padding: 11px 16px calc(env(safe-area-inset-bottom) + 14px);
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid rgba(15, 27, 45, .09);
  backdrop-filter: blur(12px);
}
html.dark .aksi-bawah { background: rgba(14, 23, 41, .96); border-top-color: var(--border); }

/* CTA melayang aksi massal */
.cta-melayang {
  height: 46px; border-radius: 12px; background: #0E5F49;
  box-shadow: 0 10px 26px rgba(14, 95, 73, .32);
}

/* Dokumen belum diunggah */
.dok-kosong {
  background: rgba(179, 38, 30, .04);
  border: 1px dashed rgba(179, 38, 30, .35);
}