/* ============================================================
   THEME SYSTEM — Light & Dark Mode (aditif, non-destruktif)
   File ini dimuat PALING AKHIR. Mode gelap = tampilan asli
   (tidak ada perubahan). Mode terang = override token + surface.
   ============================================================ */

/* ---------- Transisi halus saat ganti tema ---------- */
html.theme-anim,
html.theme-anim body,
html.theme-anim .app-header,
html.theme-anim .sidebar,
html.theme-anim .bottom-nav,
html.theme-anim .glass,
html.theme-anim .glass-strong,
html.theme-anim .stat-card,
html.theme-anim .card,
html.theme-anim .input,
html.theme-anim .btn,
html.theme-anim .tbl thead th,
html.theme-anim .tbl tbody td {
  transition:
    background-color 240ms ease,
    background-image 240ms ease,
    color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-anim,
  html.theme-anim * {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Tombol toggle tema ---------- */
.theme-toggle {
  --tt-w: 62px;
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: var(--tt-w);
  height: 34px;
  padding: 3px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(120, 170, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--n-blue, #2f8bff);
  outline-offset: 2px;
}
.theme-toggle .tt-ico {
  flex: 1;
  display: grid;
  place-items: center;
  line-height: 1;
  z-index: 1;
  opacity: 0.5;
  transition: opacity 200ms ease, color 200ms ease;
}
.theme-toggle .tt-ico svg { width: 15px; height: 15px; }
.sr-only-theme {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.theme-toggle .tt-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f8bff, #7a4dff);
  box-shadow: 0 4px 14px -4px rgba(47, 139, 255, 0.9);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
/* Dark = knob kanan (bulan aktif) */
html[data-theme="dark"] .theme-toggle .tt-knob { transform: translateX(calc(var(--tt-w) - 34px)); }
html[data-theme="dark"] .theme-toggle .tt-moon { opacity: 1; color: #fff; }
html[data-theme="light"] .theme-toggle .tt-knob { transform: translateX(0); }
html[data-theme="light"] .theme-toggle .tt-sun { opacity: 1; color: #fff; }

.theme-toggle-fixed {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 60;
  backdrop-filter: blur(14px);
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
html[data-theme="light"] {
  color-scheme: light;

  --bg-0: #eef2f9;
  --bg-1: #f6f8fc;
  --bg-2: #ffffff;

  --card-1: #ffffff;
  --card-2: #fbfcff;
  --card-bg: #ffffff;
  --card-brd: rgba(15, 23, 42, 0.1);
  --line: rgba(15, 23, 42, 0.1);
  --line-soft: rgba(15, 23, 42, 0.07);

  --glass-bg: #ffffff;
  --glass-bg-2: #f4f7fd;
  --glass-brd: rgba(15, 23, 42, 0.1);
  --glass-brd-2: rgba(15, 23, 42, 0.16);

  --txt: #0f172a;
  --txt-dim: #4b5675;
  --txt-mute: #6b7590;

  --n-blue: #1d6fe0;
  --n-cyan: #0891b2;
  --n-violet: #7c3aed;
  --n-green: #12925a;
  --n-amber: #b45309;
  --n-red: #dc2626;

  --neon-cyan: var(--n-cyan);
  --neon-blue: var(--n-blue);
  --neon-violet: var(--n-violet);
  --neon-lime: var(--n-green);
  --neon-amber: var(--n-amber);
  --neon-red: var(--n-red);
  --neon-magenta: var(--n-violet);

  --sh-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --sh-md: 0 8px 24px rgba(15, 23, 42, 0.09);
  --sh-lg: 0 18px 44px rgba(15, 23, 42, 0.14);
  --glow-blue: 0 6px 20px -8px rgba(29, 111, 224, 0.5);
  --glow-violet: 0 6px 20px -8px rgba(124, 58, 237, 0.45);
  --glow-cyan: 0 6px 20px -8px rgba(8, 145, 178, 0.45);
}

/* ---------- Dasar ---------- */
html[data-theme="light"],
html[data-theme="light"] body {
  background: var(--bg-1) !important;
  color: var(--txt);
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(48rem 30rem at 6% -8%, rgba(47, 139, 255, 0.1), transparent 62%),
    radial-gradient(44rem 30rem at 104% 2%, rgba(124, 58, 237, 0.08), transparent 62%),
    var(--bg-1) !important;
}
html[data-theme="light"] body::after { display: none !important; }

/* ---------- Kartu / glass ---------- */
html[data-theme="light"] .glass,
html[data-theme="light"] .glass-strong,
html[data-theme="light"] .card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .qr-tile,
html[data-theme="light"] .chart-box,
html[data-theme="light"] .donut-box {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-sm) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .glass-hover:hover {
  border-color: rgba(29, 111, 224, 0.35) !important;
  box-shadow: 0 12px 30px -14px rgba(15, 23, 42, 0.35) !important;
}
html[data-theme="light"] .section-title,
html[data-theme="light"] .card-title,
html[data-theme="light"] .stat-card .stat-value,
html[data-theme="light"] .donut-center b,
html[data-theme="light"] .legend-row b,
html[data-theme="light"] .row-item .row-title,
html[data-theme="light"] .hd-name,
html[data-theme="light"] .modal-title,
html[data-theme="light"] .np-title,
html[data-theme="light"] .nh-nama,
html[data-theme="light"] .notif-pop .np-nama,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3 {
  color: var(--txt) !important;
  text-shadow: none !important;
}
html[data-theme="light"] .card-sub,
html[data-theme="light"] .section-sub,
html[data-theme="light"] .text-dim,
html[data-theme="light"] .hd-sub,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .stat-card .stat-label,
html[data-theme="light"] .row-time,
html[data-theme="light"] .label,
html[data-theme="light"] .form-label {
  color: var(--txt-dim) !important;
}

/* ---------- Header ---------- */
html[data-theme="light"] .app-header {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .hd-logo,
html[data-theme="light"] .brand-logo {
  background: #f2f6ff !important;
  border: 1px solid rgba(29, 111, 224, 0.28) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .hd-clock,
html[data-theme="light"] .chip {
  background: #f2f6ff !important;
  border-color: rgba(29, 111, 224, 0.2) !important;
  color: var(--txt-dim) !important;
}
html[data-theme="light"] .hd-bell {
  background: #f4f7fd !important;
  border-color: var(--line) !important;
  color: var(--txt) !important;
}

/* ---------- Sidebar & bottom nav ---------- */
html[data-theme="light"] .sidebar {
  background: #ffffff !important;
  background-image: none !important;
  border-right: 1px solid var(--line) !important;
}
html[data-theme="light"] .sidebar-brand,
html[data-theme="light"] .sidebar-foot { color: var(--txt) !important; }
html[data-theme="light"] .nav-item { color: var(--txt-dim) !important; }
html[data-theme="light"] .nav-item:hover { background: #eef3ff !important; color: var(--txt) !important; }
html[data-theme="light"] .nav-item.active {
  color: #0b3fa0 !important;
  background: linear-gradient(120deg, rgba(29, 111, 224, 0.14), rgba(124, 58, 237, 0.1)) !important;
  border: 1px solid rgba(29, 111, 224, 0.32) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border-top: 1px solid var(--line) !important;
}
html[data-theme="light"] .bn-item { color: var(--txt-mute) !important; }
html[data-theme="light"] .bn-item.active { color: var(--n-blue) !important; }
html[data-theme="light"] .bn-item.bn-scan { color: #fff !important; }
html[data-theme="light"] .sidebar-backdrop { background: rgba(15, 23, 42, 0.35) !important; }

/* ---------- Hero ---------- */
html[data-theme="light"] .hero-card {
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(124, 58, 237, 0.12), transparent 58%),
    linear-gradient(158deg, #ffffff, #f2f6ff) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-sm) !important;
}
html[data-theme="light"] .hero-card h2 { color: var(--txt) !important; }

/* ---------- Tabel ---------- */
html[data-theme="light"] .table-wrap {
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
}
html[data-theme="light"] .tbl thead th {
  background: #eef2f9 !important;
  color: #3c4763 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .tbl tbody td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: var(--txt);
}
html[data-theme="light"] .tbl tbody tr:hover { background: #eef4ff !important; }
html[data-theme="light"] .table-empty { color: var(--txt-dim) !important; }
html[data-theme="light"] .row-item,
html[data-theme="light"] .list-row,
html[data-theme="light"] .info-list li {
  background: #fbfcff !important;
  border-color: var(--line) !important;
}

/* ---------- Badge status (kontras tinggi) ---------- */
html[data-theme="light"] .badge { box-shadow: none !important; }
html[data-theme="light"] .badge-hadir  { color: #0b6b41 !important; background: #dcfce7 !important; border-color: #86efac !important; }
html[data-theme="light"] .badge-telat  { color: #92400e !important; background: #fef3c7 !important; border-color: #fcd34d !important; }
html[data-theme="light"] .badge-izin   { color: #5b21b6 !important; background: #ede9fe !important; border-color: #c4b5fd !important; }
html[data-theme="light"] .badge-sakit  { color: #0e4fa3 !important; background: #dbeafe !important; border-color: #93c5fd !important; }
html[data-theme="light"] .badge-alfa   { color: #9f1239 !important; background: #ffe4e6 !important; border-color: #fda4af !important; }
html[data-theme="light"] .badge-pulang { color: #155e75 !important; background: #cffafe !important; border-color: #67e8f9 !important; }
html[data-theme="light"] .badge-default { color: #334155 !important; background: #eef2f9 !important; border-color: #cbd5e1 !important; }

html[data-theme="light"] .neon-blue,
html[data-theme="light"] .neon-lime,
html[data-theme="light"] .neon-amber,
html[data-theme="light"] .neon-violet,
html[data-theme="light"] .neon-magenta,
html[data-theme="light"] .neon-red,
html[data-theme="light"] .neon-cyan { text-shadow: none !important; }

html[data-theme="light"] .stat-card .stat-ico {
  background: #f6f9ff !important;
  box-shadow: none !important;
}
html[data-theme="light"] .stat-c-blue,
html[data-theme="light"] .stat-c-lime,
html[data-theme="light"] .stat-c-amber,
html[data-theme="light"] .stat-c-violet,
html[data-theme="light"] .stat-c-red { box-shadow: var(--sh-sm) !important; }

/* ---------- Tombol ---------- */
html[data-theme="light"] .btn {
  background: #ffffff !important;
  color: var(--txt) !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
html[data-theme="light"] .btn:hover {
  background: #eef4ff !important;
  border-color: rgba(29, 111, 224, 0.4) !important;
}
html[data-theme="light"] .btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1d6fe0, #6d3ce0) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px -8px rgba(29, 111, 224, 0.9) !important;
}
html[data-theme="light"] .btn-neon { color: #0e4fa3 !important; background: #eaf2ff !important; border-color: rgba(29, 111, 224, 0.35) !important; }
html[data-theme="light"] .btn-lime { color: #0b6b41 !important; border-color: rgba(18, 146, 90, 0.4) !important; }
html[data-theme="light"] .btn-magenta { color: #5b21b6 !important; border-color: rgba(124, 58, 237, 0.4) !important; }
html[data-theme="light"] .btn-danger { color: #b91c1c !important; border-color: rgba(220, 38, 38, 0.4) !important; }
html[data-theme="light"] .btn-danger:hover { background: #fee2e2 !important; }
html[data-theme="light"] .link-more { color: var(--n-blue) !important; }

/* ---------- Form ---------- */
html[data-theme="light"] .input,
html[data-theme="light"] select.input,
html[data-theme="light"] textarea.input,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="email"] {
  background: #ffffff !important;
  color: var(--txt) !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
}
html[data-theme="light"] .input::placeholder { color: #94a3b8 !important; }
html[data-theme="light"] .input:focus {
  border-color: var(--n-blue) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(29, 111, 224, 0.16) !important;
}
html[data-theme="light"] .input:disabled,
html[data-theme="light"] .input[readonly] { background: #f1f5f9 !important; }
html[data-theme="light"] .filter-bar,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .btn-group { color: var(--txt); }
html[data-theme="light"] option { background: #ffffff; color: var(--txt); }

/* ---------- Modal / sheet / dropdown ---------- */
html[data-theme="light"] .modal-card,
html[data-theme="light"] .sheet,
html[data-theme="light"] .result-card,
html[data-theme="light"] dialog,
html[data-theme="light"] .notif-panel,
html[data-theme="light"] .notif-pop,
html[data-theme="light"] .dropdown,
html[data-theme="light"] [role="menu"] {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--txt) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-lg) !important;
}
html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .notif-backdrop,
html[data-theme="light"] .result-backdrop { background: rgba(15, 23, 42, 0.42) !important; }
html[data-theme="light"] .nh-item { border-color: var(--line) !important; }
html[data-theme="light"] .nh-item.unread { background: #eff6ff !important; }
html[data-theme="light"] .nh-meta,
html[data-theme="light"] .nh-time { color: var(--txt-dim) !important; }

/* ---------- Toast ---------- */
html[data-theme="light"] .toast {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--txt) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-md) !important;
  border-left-width: 4px !important;
}
html[data-theme="light"] .toast.success { border-left-color: #12925a !important; }
html[data-theme="light"] .toast.error { border-left-color: #dc2626 !important; }
html[data-theme="light"] .toast.warning { border-left-color: #d97706 !important; }
html[data-theme="light"] .toast.info { border-left-color: #1d6fe0 !important; }

/* ---------- Misc ---------- */
html[data-theme="light"] .skeleton,
html[data-theme="light"] .skel-line,
html[data-theme="light"] .skel-card {
  background: linear-gradient(90deg, #eef2f9 25%, #e2e8f0 37%, #eef2f9 63%) !important;
}
html[data-theme="light"] .avatar,
html[data-theme="light"] .profile-photo,
html[data-theme="light"] .row-item .row-avatar { border-color: rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .skip-link { background: #ffffff !important; color: var(--txt) !important; }
html[data-theme="light"] .theme-toggle {
  background: #f1f5fb;
  border-color: rgba(15, 23, 42, 0.14);
}
html[data-theme="light"] .pwa-install-btn { color: var(--txt) !important; }

/* Halaman scan: area kamera tetap gelap agar pemindaian optimal,
   hanya panel hasil & tombol yang mengikuti tema. */
html[data-theme="light"] .scan-stage,
html[data-theme="light"] .scan-video,
html[data-theme="light"] .scan-overlay { background-color: #05060d; }
html[data-theme="light"] .scan-topbar,
html[data-theme="light"] .scan-dock {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--txt) !important;
  border-color: var(--line) !important;
}
html[data-theme="light"] .scan-brand,
html[data-theme="light"] .dock-item { color: var(--txt) !important; }
html[data-theme="light"] .scan-status-pill { color: var(--txt) !important; background: #eef4ff !important; }


/* ============================================================
   TOKEN GENERIK (alias) — dapat dipakai komponen baru tanpa
   perlu tahu nama token internal. Nilainya mengikuti tema aktif.
   ============================================================ */
html[data-theme="dark"],
html[data-theme="light"] {
  --bg-primary: var(--bg-1);
  --bg-secondary: var(--bg-2, var(--bg-1));
  --bg-card: var(--glass, var(--bg-1));
  --text-primary: var(--txt);
  --text-secondary: var(--txt-dim);
  --border-color: var(--line);
  --input-bg: var(--bg-card);
  --shadow-color: var(--sh-md);
  --accent-color: var(--n-blue);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-secondary: #f2f6ff;
  --bg-card: #ffffff;
  --input-bg: #ffffff;
}
html[data-theme="dark"] { color-scheme: dark; }

/* ---------- Komponen sisa: tooltip, pagination, empty/loading/error ---------- */
html[data-theme="light"] .tooltip,
html[data-theme="light"] [role="tooltip"],
html[data-theme="light"] .popover,
html[data-theme="light"] .popup {
  background: #ffffff !important;
  color: var(--txt) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-md) !important;
}
html[data-theme="light"] .pagination a,
html[data-theme="light"] .pagination span,
html[data-theme="light"] .page-link {
  background: #ffffff !important;
  color: var(--txt) !important;
  border: 1px solid var(--line) !important;
}
html[data-theme="light"] .pagination .active,
html[data-theme="light"] .page-link.active {
  background: var(--n-blue) !important;
  color: #ffffff !important;
  border-color: var(--n-blue) !important;
}
html[data-theme="light"] .empty-state,
html[data-theme="light"] .empty,
html[data-theme="light"] .state-empty,
html[data-theme="light"] .state-loading,
html[data-theme="light"] .state-error {
  color: var(--txt-dim) !important;
}
html[data-theme="light"] .alert {
  background: #f6f9ff !important;
  color: var(--txt) !important;
  border: 1px solid var(--line) !important;
}
html[data-theme="light"] .alert-success { background: #dcfce7 !important; border-color: #86efac !important; color: #0b6b41 !important; }
html[data-theme="light"] .alert-error,
html[data-theme="light"] .alert-danger  { background: #fee2e2 !important; border-color: #fca5a5 !important; color: #b91c1c !important; }
html[data-theme="light"] .alert-warning { background: #fef3c7 !important; border-color: #fcd34d !important; color: #92400e !important; }

/* Chart / statistik: garis grid & label ikut tema */
html[data-theme="light"] .chart-grid line,
html[data-theme="light"] .chart svg .grid line { stroke: rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .chart text,
html[data-theme="light"] .chart-label,
html[data-theme="light"] .axis-label { fill: var(--txt-dim) !important; color: var(--txt-dim) !important; }

/* Scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: #eef2f9 !important; }

/* Halaman error & cetak pratinjau */
html[data-theme="light"] .page-center { background: var(--bg-1) !important; }