/* Tema SIREMUN — dimuat SETELAH Tailwind CDN (lihat templates/layouts/master.html).
 *
 * Arah: institusional, tenang, dominan biru. Tanpa gradasi dekoratif, tanpa bayangan tebal,
 * huruf tidak terlalu tebal, satu keluarga warna (biru) + warna status seperlunya
 * (hijau = selesai/disetujui, kuning = menunggu, merah = ditolak/bermasalah).
 *
 * Palet biru diatur di tailwind.config (master.html): blue-50 … blue-950. Warna lain yang dulu
 * dipakai sebagai aksen (violet, cyan, sky, indigo, purple, teal) dipetakan ke skala biru yang sama.
 */

:root {
  --navy: #0b1f3f;
  --navy-2: #12305c;
  --canvas: #edf2f9;
  --line: #c3d1e6;
  --ink: #0f1e33;
  --muted: #5a6b84;
  --blue: #1d5bc4;
}

html, body { background: var(--canvas) !important; }
body {
  background-image: none !important;
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
table, .tabular-nums, [class*="text-3xl"], [class*="text-2xl"] { font-variant-numeric: tabular-nums; }

/* ── Gradasi dekoratif → warna datar (warna awal gradasi) ───────────────────────── */
[class*="bg-gradient-to"] {
  background-image: none !important;
  background-color: var(--tw-gradient-from, #fff) !important;
}
/* lingkaran hiasan di dalam banner gradasi */
[class*="bg-gradient-to"] > .absolute.rounded-full { display: none !important; }
.soft-card { background: #fff !important; border: 1px solid var(--line) !important; }
.glass-panel { background: #fff !important; backdrop-filter: none !important; }

/* Bayangan & lengkung: lebih tenang, konsisten dengan tailwind.config */
.shadow-sm, .shadow, .shadow-md { box-shadow: 0 1px 2px rgba(11, 31, 63, .06) !important; }
.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: 0 6px 20px rgba(11, 31, 63, .10) !important; }
[class*="shadow-blue-"], [class*="shadow-sky-"], [class*="shadow-cyan-"] { --tw-shadow-color: rgba(11, 31, 63, .10) !important; }
.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md { backdrop-filter: none !important; }
[class*="animate-pulse"] { animation: none !important; }

/* ── Kerangka: sidebar ─────────────────────────────────────────────────────────
   Dua tema, dipilih lewat html[data-tema] (tombol di kaki sidebar, disimpan di localStorage):
   terang = biru muda (bawaan), gelap = biru tua. Semua warna sidebar lewat variabel --sb-*. */
:root {
  --sb-bg: #d3e4fb; --sb-border: #b6d0f2;
  --sb-fg: #1b3658; --sb-icon: #3f66a0; --sb-section: #41639a;
  --sb-brand: #143c8f; --sb-brand-sub: #9a5a00; --sb-line: rgba(15, 42, 82, .16);
  --sb-hover: rgba(29, 91, 196, .14); --sb-hover-fg: #0f2a52;
  --sb-active: #b3d0f8; --sb-active-fg: #0f2a52; --sb-active-icon: #1d5bc4; --sb-bar: #1d5bc4;
  --sb-user-bg: rgba(255, 255, 255, .5); --sb-user-name: #0f2a52; --sb-user-sub: #3f6094;
  --sb-avatar-bg: #a9c8f5; --sb-avatar-fg: #12305c; --sb-thumb: rgba(15, 42, 82, .28);
}
html[data-tema="gelap"] {
  --sb-bg: #0a1638; --sb-border: transparent;
  --sb-fg: #c3d1ea; --sb-icon: #7f98c2; --sb-section: #6f89b3;
  --sb-brand: #ffffff; --sb-brand-sub: #f6c85f; --sb-line: rgba(255, 255, 255, .08);
  --sb-hover: rgba(255, 255, 255, .06); --sb-hover-fg: #ffffff;
  --sb-active: rgba(106, 168, 255, .2); --sb-active-fg: #ffffff; --sb-active-icon: #9fc8ff; --sb-bar: #6aa8ff;
  --sb-user-bg: rgba(0, 0, 0, .14); --sb-user-name: #ffffff; --sb-user-sub: #8ea6cb;
  --sb-avatar-bg: #2a5bb8; --sb-avatar-fg: #dbe8ff; --sb-thumb: rgba(255, 255, 255, .18);
}
.sb {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-border) !important;
  box-shadow: none !important;
  color: var(--sb-fg);
}
.sb-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--sb-line);
}
.sb-brand img { width: 40px; height: 40px; flex: none; border-radius: 999px; background: #fff; padding: 3px; object-fit: contain; box-shadow: 0 0 0 1px var(--sb-line); }
.sb-brand b { display: block; color: var(--sb-brand); font-size: 14px; font-weight: 600; letter-spacing: .08em; line-height: 1.2; }
.sb-brand span { display: block; margin-top: 2px; font-weight: 500; color: var(--sb-brand-sub); font-size: 12px; line-height: 1.2; }
.sb-nav { flex: 1; overflow-y: auto; padding: 14px 12px 12px; background: transparent !important; }

.sidebar-section {
  color: var(--sb-section) !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .12em !important;
  padding: 16px 12px 6px !important;
}
.sidebar-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 38px;
  padding: 8px 12px !important;
  margin-bottom: 2px;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--sb-fg) !important;
  font-size: 14px; font-weight: 500 !important; letter-spacing: 0 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background .12s ease, color .12s ease;
}
.sidebar-link svg { color: var(--sb-icon) !important; flex: none; }
.sidebar-link:not(.active):hover { background: var(--sb-hover) !important; color: var(--sb-hover-fg) !important; }
.sidebar-link:not(.active):hover svg { color: var(--sb-active-icon) !important; }
.sidebar-link.active { background: var(--sb-active) !important; color: var(--sb-active-fg) !important; font-weight: 600 !important; }
.sidebar-link.active svg { color: var(--sb-active-icon) !important; }
.sidebar-link.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sb-bar);
}
.sb-user {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 12px 16px;
  border-top: 1px solid var(--sb-line);
  background: var(--sb-user-bg);
}
.sb-user .avatar {
  width: 36px; height: 36px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sb-avatar-bg); color: var(--sb-avatar-fg); font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.sb-user .who { flex: 1; min-width: 0; margin-left: 4px; }
.sb-user .who p:first-child { color: var(--sb-user-name); font-size: 14px; font-weight: 600; }
.sb-user .who p:last-child { color: var(--sb-user-sub); font-size: 12px; }
.sb-user .aksi { width: 32px; height: 32px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--sb-user-sub) !important; background: transparent; border: 0; cursor: pointer; transition: background .12s, color .12s; }
.sb-user .aksi:hover { color: var(--sb-user-name) !important; background: var(--sb-hover) !important; }
.sb-user .ikon-bulan { display: none; }
html[data-tema="gelap"] .sb-user .ikon-bulan { display: block; }
html[data-tema="gelap"] .sb-user .ikon-matahari { display: none; }

/* scrollbar sidebar */
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }

/* ── Kerangka: topbar & konten ─────────────────────────────────────────────────── */
.topbar {
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  padding: 14px 24px !important;
}
.topbar h1 { color: var(--ink) !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: -.01em; }
.topbar p { color: var(--muted) !important; font-size: 12.5px !important; font-weight: 400 !important; }
.app-main { background: var(--canvas) !important; padding: 22px 24px 32px !important; }
@media (max-width: 640px) { .app-main { padding: 14px 12px 24px !important; } .topbar { padding: 12px 14px !important; } }

/* ── Komponen umum ─────────────────────────────────────────────────────────────── */
/* judul bagian kecil (uppercase) lebih kalem */
[class*="uppercase"][class*="tracking-"] { letter-spacing: .08em; }

/* kartu: garis netral tipis, bukan garis biru pastel */
.border-blue-100, .border-blue-50, .border-sky-100, .border-cyan-100 { border-color: var(--line) !important; }

/* tab berbentuk kapsul → tab bergaris bawah (kelas ditambahkan di markup: .tabbar / .tab) */
.tabbar { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); background: transparent !important; padding: 0 !important; box-shadow: none !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; margin-bottom: 4px; }
.tabbar > div { display: flex; gap: 4px; }
.tab {
  position: relative; white-space: nowrap;
  padding: 10px 14px !important; margin-bottom: -1px;
  background: transparent !important; color: var(--muted) !important;
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  font-size: 13.5px !important; font-weight: 500 !important; box-shadow: none !important;
}
.tab:hover { color: var(--blue) !important; }
.tab.is-active { color: var(--blue) !important; border-bottom-color: var(--blue) !important; font-weight: 600 !important; }

/* tombol utama: biru datar */
button.bg-blue-600, a.bg-blue-600 { transition: background .12s ease; }

/* fokus terlihat jelas untuk keyboard */
:focus-visible { outline: 2px solid #6ea1f0; outline-offset: 2px; }

/* ── Komponen halaman ──────────────────────────────────────────────────────────── */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.page-title { margin-top: 2px; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.section-title { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.chip-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.chip-solid { background: #e1ecfc; color: #173d80; }
.chip-soft { background: #fff; color: var(--muted); border: 1px solid var(--line); }

.notice { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .12s; }
.notice:hover { border-color: #93b8f0; }
.notice-label { flex: none; padding: 3px 9px; border-radius: 4px; background: #e1ecfc; color: #173d80; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ringkasan angka: satu panel, pembatas tipis (bukan kartu terpisah) */
.kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.kpi { display: flex; flex-direction: column; padding: 18px 20px 16px; border-right: 1px solid var(--line); transition: background .12s; }
.kpi:last-child { border-right: 0; }
.kpi:hover { background: #f7faff; }
.kpi-label { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.kpi-value { margin-top: 10px; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-empty { color: #b9c5d8; }
.kpi-note { margin-top: 6px; font-size: 13px; color: var(--muted); min-height: 20px; }
.kpi-link { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; color: var(--blue); }
.kpi:hover .kpi-link span { display: inline-block; transform: translateX(2px); }
@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .kpi { padding: 14px 14px 12px; }
  .kpi-value { font-size: 26px; margin-top: 8px; }
  .kpi-note { font-size: 12.5px; }
}

.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.badge-ok { background: #e7f5ec; color: #166534; }
.badge-info { background: #e1ecfc; color: #173d80; }
.badge-warn { background: #fdf3dc; color: #8a5a00; }
.badge-bad { background: #fdeaea; color: #a61b1b; }

.row-link { display: flex; align-items: center; gap: 14px; padding: 14px 18px; transition: background .12s; }
.row-link:hover { background: #f7faff; }
.row-icon { width: 20px; height: 20px; flex: none; color: var(--blue); }
.row-chevron { width: 16px; height: 16px; flex: none; color: #b0bccf; transition: transform .12s, color .12s; }
.row-link:hover .row-chevron { color: var(--blue); transform: translateX(2px); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.2; transition: background .12s, border-color .12s; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #1a4aa3; }
.btn-outline { background: #fff; color: var(--ink); border: 1px solid #c5d0e0; }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

/* panel angka (rekap presensi, ringkasan kecil) */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.stat { padding: 14px 18px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-label { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .03em; }
.stat-value { margin-top: 6px; font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-value.stat-warn { color: #a86a00; }
.stat-value.stat-bad { color: #b42323; }
.stat-note { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

.avatar-lg { width: 56px; height: 56px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #e1ecfc; color: #173d80; font-size: 18px; font-weight: 600; letter-spacing: .04em; }

/* Banner besar (dulu gradasi biru cerah) → header halaman terang, seragam dengan Dashboard/Identitas.
   Hanya skala 500+ (from-blue-50 dst. memang sudah terang). */
[class*="bg-gradient-to"][class~="from-blue-500"],
[class*="bg-gradient-to"][class~="from-blue-600"],
[class*="bg-gradient-to"][class~="from-blue-700"],
[class*="bg-gradient-to"][class~="from-blue-800"],
[class*="bg-gradient-to"][class~="from-blue-900"],
[class*="bg-gradient-to"][class~="from-blue-950"],
[class*="bg-gradient-to"][class~="from-violet-500"],
[class*="bg-gradient-to"][class~="from-violet-600"],
[class*="bg-gradient-to"][class~="from-violet-700"],
[class*="bg-gradient-to"][class~="from-violet-800"],
[class*="bg-gradient-to"][class~="from-violet-900"],
[class*="bg-gradient-to"][class~="from-violet-950"],
[class*="bg-gradient-to"][class~="from-indigo-500"],
[class*="bg-gradient-to"][class~="from-indigo-600"],
[class*="bg-gradient-to"][class~="from-indigo-700"],
[class*="bg-gradient-to"][class~="from-indigo-800"],
[class*="bg-gradient-to"][class~="from-indigo-900"],
[class*="bg-gradient-to"][class~="from-indigo-950"],
[class*="bg-gradient-to"][class~="from-sky-500"],
[class*="bg-gradient-to"][class~="from-sky-600"],
[class*="bg-gradient-to"][class~="from-sky-700"],
[class*="bg-gradient-to"][class~="from-sky-800"],
[class*="bg-gradient-to"][class~="from-sky-900"],
[class*="bg-gradient-to"][class~="from-sky-950"],
[class*="bg-gradient-to"][class~="from-cyan-500"],
[class*="bg-gradient-to"][class~="from-cyan-600"],
[class*="bg-gradient-to"][class~="from-cyan-700"],
[class*="bg-gradient-to"][class~="from-cyan-800"],
[class*="bg-gradient-to"][class~="from-cyan-900"],
[class*="bg-gradient-to"][class~="from-cyan-950"],
[class*="bg-gradient-to"][class~="from-purple-500"],
[class*="bg-gradient-to"][class~="from-purple-600"],
[class*="bg-gradient-to"][class~="from-purple-700"],
[class*="bg-gradient-to"][class~="from-purple-800"],
[class*="bg-gradient-to"][class~="from-purple-900"],
[class*="bg-gradient-to"][class~="from-purple-950"],
[class*="bg-gradient-to"][class~="from-teal-500"],
[class*="bg-gradient-to"][class~="from-teal-600"],
[class*="bg-gradient-to"][class~="from-teal-700"],
[class*="bg-gradient-to"][class~="from-teal-800"],
[class*="bg-gradient-to"][class~="from-teal-900"],
[class*="bg-gradient-to"][class~="from-teal-950"],
[class*="bg-gradient-to"][class~="from-slate-700"],
[class*="bg-gradient-to"][class~="from-slate-800"],
[class*="bg-gradient-to"][class~="from-slate-900"],
[class*="bg-gradient-to"][class~="from-slate-950"] {
  background-color: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
[class*="bg-gradient-to"][class~="from-blue-500"] .text-white,
[class*="bg-gradient-to"][class~="from-blue-600"] .text-white,
[class*="bg-gradient-to"][class~="from-blue-700"] .text-white,
[class*="bg-gradient-to"][class~="from-blue-800"] .text-white,
[class*="bg-gradient-to"][class~="from-blue-900"] .text-white,
[class*="bg-gradient-to"][class~="from-blue-950"] .text-white,
[class*="bg-gradient-to"][class~="from-violet-500"] .text-white,
[class*="bg-gradient-to"][class~="from-violet-600"] .text-white,
[class*="bg-gradient-to"][class~="from-violet-700"] .text-white,
[class*="bg-gradient-to"][class~="from-violet-800"] .text-white,
[class*="bg-gradient-to"][class~="from-violet-900"] .text-white,
[class*="bg-gradient-to"][class~="from-violet-950"] .text-white,
[class*="bg-gradient-to"][class~="from-indigo-500"] .text-white,
[class*="bg-gradient-to"][class~="from-indigo-600"] .text-white,
[class*="bg-gradient-to"][class~="from-indigo-700"] .text-white,
[class*="bg-gradient-to"][class~="from-indigo-800"] .text-white,
[class*="bg-gradient-to"][class~="from-indigo-900"] .text-white,
[class*="bg-gradient-to"][class~="from-indigo-950"] .text-white,
[class*="bg-gradient-to"][class~="from-sky-500"] .text-white,
[class*="bg-gradient-to"][class~="from-sky-600"] .text-white,
[class*="bg-gradient-to"][class~="from-sky-700"] .text-white,
[class*="bg-gradient-to"][class~="from-sky-800"] .text-white,
[class*="bg-gradient-to"][class~="from-sky-900"] .text-white,
[class*="bg-gradient-to"][class~="from-sky-950"] .text-white,
[class*="bg-gradient-to"][class~="from-cyan-500"] .text-white,
[class*="bg-gradient-to"][class~="from-cyan-600"] .text-white,
[class*="bg-gradient-to"][class~="from-cyan-700"] .text-white,
[class*="bg-gradient-to"][class~="from-cyan-800"] .text-white,
[class*="bg-gradient-to"][class~="from-cyan-900"] .text-white,
[class*="bg-gradient-to"][class~="from-cyan-950"] .text-white,
[class*="bg-gradient-to"][class~="from-purple-500"] .text-white,
[class*="bg-gradient-to"][class~="from-purple-600"] .text-white,
[class*="bg-gradient-to"][class~="from-purple-700"] .text-white,
[class*="bg-gradient-to"][class~="from-purple-800"] .text-white,
[class*="bg-gradient-to"][class~="from-purple-900"] .text-white,
[class*="bg-gradient-to"][class~="from-purple-950"] .text-white,
[class*="bg-gradient-to"][class~="from-teal-500"] .text-white,
[class*="bg-gradient-to"][class~="from-teal-600"] .text-white,
[class*="bg-gradient-to"][class~="from-teal-700"] .text-white,
[class*="bg-gradient-to"][class~="from-teal-800"] .text-white,
[class*="bg-gradient-to"][class~="from-teal-900"] .text-white,
[class*="bg-gradient-to"][class~="from-teal-950"] .text-white,
[class*="bg-gradient-to"][class~="from-slate-700"] .text-white,
[class*="bg-gradient-to"][class~="from-slate-800"] .text-white,
[class*="bg-gradient-to"][class~="from-slate-900"] .text-white,
[class*="bg-gradient-to"][class~="from-slate-950"] .text-white { color: var(--ink) !important; }
[class*="bg-gradient-to"][class~="from-blue-500"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-blue-600"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-blue-700"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-blue-800"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-blue-900"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-blue-950"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-violet-500"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-violet-600"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-violet-700"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-violet-800"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-violet-900"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-violet-950"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-indigo-500"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-indigo-600"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-indigo-700"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-indigo-800"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-indigo-900"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-indigo-950"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-sky-500"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-sky-600"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-sky-700"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-sky-800"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-sky-900"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-sky-950"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-cyan-500"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-cyan-600"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-cyan-700"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-cyan-800"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-cyan-900"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-cyan-950"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-purple-500"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-purple-600"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-purple-700"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-purple-800"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-purple-900"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-purple-950"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-teal-500"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-teal-600"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-teal-700"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-teal-800"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-teal-900"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-teal-950"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-slate-700"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-slate-800"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-slate-900"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-slate-950"] [class*="text-blue-1"],
[class*="bg-gradient-to"][class~="from-blue-500"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-blue-600"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-blue-700"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-blue-800"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-blue-900"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-blue-950"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-violet-500"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-violet-600"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-violet-700"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-violet-800"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-violet-900"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-violet-950"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-indigo-500"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-indigo-600"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-indigo-700"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-indigo-800"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-indigo-900"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-indigo-950"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-sky-500"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-sky-600"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-sky-700"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-sky-800"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-sky-900"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-sky-950"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-cyan-500"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-cyan-600"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-cyan-700"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-cyan-800"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-cyan-900"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-cyan-950"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-purple-500"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-purple-600"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-purple-700"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-purple-800"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-purple-900"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-purple-950"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-teal-500"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-teal-600"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-teal-700"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-teal-800"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-teal-900"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-teal-950"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-slate-700"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-slate-800"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-slate-900"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-slate-950"] [class*="text-blue-2"],
[class*="bg-gradient-to"][class~="from-blue-500"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-blue-600"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-blue-700"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-blue-800"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-blue-900"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-blue-950"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-violet-500"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-violet-600"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-violet-700"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-violet-800"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-violet-900"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-violet-950"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-indigo-500"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-indigo-600"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-indigo-700"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-indigo-800"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-indigo-900"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-indigo-950"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-sky-500"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-sky-600"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-sky-700"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-sky-800"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-sky-900"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-sky-950"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-cyan-500"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-cyan-600"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-cyan-700"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-cyan-800"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-cyan-900"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-cyan-950"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-purple-500"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-purple-600"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-purple-700"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-purple-800"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-purple-900"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-purple-950"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-teal-500"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-teal-600"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-teal-700"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-teal-800"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-teal-900"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-teal-950"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-slate-700"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-slate-800"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-slate-900"] [class*="text-white/"],
[class*="bg-gradient-to"][class~="from-slate-950"] [class*="text-white/"] { color: var(--muted) !important; }
[class*="bg-gradient-to"][class~="from-blue-500"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-blue-600"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-blue-700"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-blue-800"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-blue-900"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-blue-950"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-violet-500"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-violet-600"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-violet-700"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-violet-800"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-violet-900"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-violet-950"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-indigo-500"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-indigo-600"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-indigo-700"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-indigo-800"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-indigo-900"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-indigo-950"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-sky-500"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-sky-600"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-sky-700"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-sky-800"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-sky-900"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-sky-950"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-cyan-500"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-cyan-600"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-cyan-700"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-cyan-800"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-cyan-900"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-cyan-950"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-purple-500"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-purple-600"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-purple-700"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-purple-800"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-purple-900"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-purple-950"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-teal-500"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-teal-600"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-teal-700"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-teal-800"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-teal-900"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-teal-950"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-slate-700"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-slate-800"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-slate-900"] [class*="bg-white/"],
[class*="bg-gradient-to"][class~="from-slate-950"] [class*="bg-white/"] { background-color: #e1ecfc !important; border-color: transparent !important; color: #173d80 !important; box-shadow: none !important; }
[class*="bg-gradient-to"][class~="from-blue-500"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-blue-600"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-blue-700"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-blue-800"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-blue-900"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-blue-950"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-violet-500"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-violet-600"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-violet-700"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-violet-800"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-violet-900"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-violet-950"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-indigo-500"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-indigo-600"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-indigo-700"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-indigo-800"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-indigo-900"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-indigo-950"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-sky-500"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-sky-600"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-sky-700"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-sky-800"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-sky-900"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-sky-950"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-cyan-500"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-cyan-600"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-cyan-700"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-cyan-800"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-cyan-900"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-cyan-950"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-purple-500"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-purple-600"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-purple-700"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-purple-800"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-purple-900"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-purple-950"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-teal-500"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-teal-600"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-teal-700"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-teal-800"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-teal-900"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-teal-950"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-slate-700"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-slate-800"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-slate-900"] [class*="bg-white/"] svg,
[class*="bg-gradient-to"][class~="from-slate-950"] [class*="bg-white/"] svg { color: #1d5bc4 !important; }
[class*="bg-gradient-to"][class~="from-blue-500"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-blue-600"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-blue-700"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-blue-800"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-blue-900"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-blue-950"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-violet-500"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-violet-600"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-violet-700"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-violet-800"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-violet-900"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-violet-950"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-indigo-500"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-indigo-600"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-indigo-700"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-indigo-800"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-indigo-900"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-indigo-950"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-sky-500"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-sky-600"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-sky-700"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-sky-800"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-sky-900"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-sky-950"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-cyan-500"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-cyan-600"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-cyan-700"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-cyan-800"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-cyan-900"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-cyan-950"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-purple-500"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-purple-600"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-purple-700"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-purple-800"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-purple-900"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-purple-950"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-teal-500"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-teal-600"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-teal-700"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-teal-800"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-teal-900"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-teal-950"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-slate-700"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-slate-800"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-slate-900"] [class*="bg-white/"].text-white,
[class*="bg-gradient-to"][class~="from-slate-950"] [class*="bg-white/"].text-white { color: #173d80 !important; }

/* bilah notifikasi: dari blok jenuh → panel bertinta lembut (isi tetap terbaca) */
.bg-red-500.text-white, .bg-red-600.text-white {
  background: #fdeeee !important; color: #8f1d1d !important; border: 1px solid #f1c3c3 !important; box-shadow: none !important;
}
.bg-emerald-500.text-white, .bg-emerald-600.text-white {
  background: #eaf6ee !important; color: #14532d !important; border: 1px solid #bfe0cb !important; box-shadow: none !important;
}
.bg-red-500.text-white *, .bg-red-600.text-white *, .bg-emerald-500.text-white *, .bg-emerald-600.text-white * { color: inherit !important; }


/* Kartu: garis batas tegas + sudut membulat + bayangan tipis agar terpisah dari latar */
.border-slate-200, .border-slate-300\/70 { border-color: var(--line) !important; }
.border-slate-100 { border-color: #d5e0ef !important; }
.panel, .kpi-strip, .stat-strip, .notice,
.rounded-2xl.bg-white, .rounded-xl.bg-white, .rounded-2xl.border, .rounded-xl.border.bg-white {
  border-color: var(--line) !important;
  box-shadow: 0 1px 3px rgba(11, 31, 63, .09) !important;
}
.panel, .kpi-strip, .stat-strip, .notice { border-radius: 14px; }
.badge { border-radius: 6px; }

/* Kartu angka: masing-masing kartu sendiri (bulat, garis tegas), bukan satu panel bersekat */
.kpi-strip, .stat-strip { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; gap: 14px; }
.kpi, .stat {
  background: #fff; border: 1px solid var(--line) !important; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(11, 31, 63, .09);
}
.kpi:nth-child(n), .stat:nth-child(n) { border-bottom: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; }
.kpi:hover { background: #f5f9ff; border-color: #93b8f0 !important; }

/* ── Dialog / modal: hanya kotak dialognya yang berwarna (krem putih + cyan lembut) ───────────
   Latar redup di belakang dialog tetap netral. Berlaku untuk semua modal (kelas z-50 dengan panel
   shadow-2xl). Bagian lain aplikasi tetap biru. */
:root {
  --dlg-bg: #f3fbfc; --dlg-head: #fbefc2; --dlg-line: #a3d6df; --dlg-ink: #0f3a44; --dlg-muted: #4a7480;
  --dlg-accent: #0e7490; --dlg-accent-dark: #0b5d75;
  --dlg-mint: #c4eaf1; --dlg-mint-line: #0e8aa6; --dlg-sand: #e1f3f6; --dlg-field: #ffffff;
  --dlg-brick: #a23b2a; --dlg-brick-soft: #fdeeea; --dlg-brick-line: #f0c9bf;
}
[class*="z-50"][class*="bg-black/"], [class*="z-50"] > .absolute.inset-0[class*="bg-slate-9"] {
  background-color: rgba(15, 23, 42, .5) !important;
}
[class*="z-50"] .shadow-2xl {
  background: var(--dlg-bg) !important; border: 1px solid var(--dlg-line) !important; border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .28) !important; color: var(--dlg-ink);
}
[class*="z-50"] .shadow-2xl .border-b { background: var(--dlg-head) !important; border-color: var(--dlg-line) !important; }
[class*="z-50"] .shadow-2xl .border-t { border-color: var(--dlg-line) !important; background: transparent !important; }
[class*="z-50"] .shadow-2xl h1, [class*="z-50"] .shadow-2xl h2, [class*="z-50"] .shadow-2xl h3,
[class*="z-50"] .shadow-2xl .text-slate-700, [class*="z-50"] .shadow-2xl .text-slate-800, [class*="z-50"] .shadow-2xl .text-slate-900 { color: var(--dlg-ink) !important; }
[class*="z-50"] .shadow-2xl .text-slate-400, [class*="z-50"] .shadow-2xl .text-slate-500, [class*="z-50"] .shadow-2xl .text-slate-600 { color: var(--dlg-muted) !important; }
[class*="z-50"] .shadow-2xl .bg-slate-50, [class*="z-50"] .shadow-2xl .bg-white { background-color: var(--dlg-sand) !important; }
[class*="z-50"] .shadow-2xl .border-slate-200, [class*="z-50"] .shadow-2xl .border-slate-300, [class*="z-50"] .shadow-2xl .border-blue-100 { border-color: var(--dlg-line) !important; }
/* isian */
[class*="z-50"] .shadow-2xl input, [class*="z-50"] .shadow-2xl textarea, [class*="z-50"] .shadow-2xl select { background: var(--dlg-field) !important; border-color: var(--dlg-line) !important; color: var(--dlg-ink); }
[class*="z-50"] .shadow-2xl input:focus, [class*="z-50"] .shadow-2xl textarea:focus { border-color: var(--dlg-accent) !important; box-shadow: 0 0 0 3px rgba(14, 116, 144, .22) !important; outline: none; }
[class*="z-50"] .shadow-2xl canvas { background: var(--dlg-field) !important; border-color: #9ccbd6 !important; }
/* pilihan (radio/opsi) terpilih → zaitun; sebelumnya biru */
[class*="z-50"] .shadow-2xl label[class*="border-2"] { background: var(--dlg-field); border-color: var(--dlg-line); }
[class*="z-50"] .shadow-2xl label[class*="border-blue-500"], [class*="z-50"] .shadow-2xl label[class*="border-amber-500"], [class*="z-50"] .shadow-2xl label[class*="border-orange-500"] { background: var(--dlg-mint) !important; border-color: var(--dlg-mint-line) !important; }
[class*="z-50"] .shadow-2xl [class*="bg-blue-500"], [class*="z-50"] .shadow-2xl [class*="bg-amber-500"], [class*="z-50"] .shadow-2xl [class*="bg-orange-500"] { background-color: var(--dlg-mint-line) !important; border-color: var(--dlg-mint-line) !important; }
/* chip tanggal */
[class*="z-50"] .shadow-2xl .bg-slate-50 span, [class*="z-50"] .shadow-2xl span.rounded { background: var(--dlg-field) !important; border-color: var(--dlg-line) !important; color: var(--dlg-ink) !important; }
/* tombol utama → terakota */
[class*="z-50"] .shadow-2xl button.bg-blue-600, [class*="z-50"] .shadow-2xl button.bg-blue-700, [class*="z-50"] .shadow-2xl button[type="submit"], [class*="z-50"] .shadow-2xl a.bg-blue-600 { background: var(--dlg-accent) !important; color: #fff !important; border: 0 !important; }
[class*="z-50"] .shadow-2xl button.bg-blue-600:hover, [class*="z-50"] .shadow-2xl button.bg-blue-700:hover, [class*="z-50"] .shadow-2xl button[type="submit"]:hover { background: var(--dlg-accent-dark) !important; }
[class*="z-50"] .shadow-2xl button[type="submit"]:disabled, [class*="z-50"] .shadow-2xl button:disabled { background: #c5dde3 !important; color: #7fa4af !important; }
/* peringatan / kesalahan → bata; catatan → kuning tanah */
[class*="z-50"] .shadow-2xl .bg-red-50, [class*="z-50"] .shadow-2xl .bg-red-100 { background: var(--dlg-brick-soft) !important; border-color: var(--dlg-brick-line) !important; }
[class*="z-50"] .shadow-2xl .text-red-500, [class*="z-50"] .shadow-2xl .text-red-600, [class*="z-50"] .shadow-2xl .text-red-700, [class*="z-50"] .shadow-2xl .text-red-800 { color: var(--dlg-brick) !important; }
[class*="z-50"] .shadow-2xl .bg-amber-50, [class*="z-50"] .shadow-2xl .bg-amber-100 { background: #fbf2dc !important; border-color: #ecdcae !important; }
[class*="z-50"] .shadow-2xl .text-amber-700, [class*="z-50"] .shadow-2xl .text-amber-800 { color: #7a5a12 !important; }
[class*="z-50"] .shadow-2xl .bg-emerald-50 { background: var(--dlg-mint) !important; border-color: #b5e0e8 !important; }
[class*="z-50"] .shadow-2xl .text-emerald-700, [class*="z-50"] .shadow-2xl .text-emerald-800 { color: #0b5d75 !important; }
/* tautan kecil di dalam dialog */
[class*="z-50"] .shadow-2xl .underline, [class*="z-50"] .shadow-2xl a.text-blue-600, [class*="z-50"] .shadow-2xl a.text-blue-700 { color: var(--dlg-accent) !important; }

/* Tabel: sel pertama dan terakhir tidak menempel ke tepi kartu */
table th:first-child, table td:first-child { padding-left: 18px; }
table th:last-child, table td:last-child { padding-right: 18px; }
table th { padding-top: 10px; padding-bottom: 10px; }
table td { padding-top: 10px; padding-bottom: 10px; }

/* Dialog: sudut bulat sampai ke kepala, isian dan opsi lebih bulat, kepala berwarna lebih tua */
[class*="z-50"] .shadow-2xl { overflow: hidden; border-radius: 22px !important; }
[class*="z-50"] .shadow-2xl .border-b { border-bottom: 1px solid #a9cbbd !important; }
[class*="z-50"] .shadow-2xl h1, [class*="z-50"] .shadow-2xl h2, [class*="z-50"] .shadow-2xl h3,
[class*="z-50"] .shadow-2xl .border-b p:first-child { color: #12332c !important; }
[class*="z-50"] .shadow-2xl input:not([type="checkbox"]):not([type="radio"]), [class*="z-50"] .shadow-2xl textarea, [class*="z-50"] .shadow-2xl select { border-radius: 14px !important; border: 1.5px solid #b4d2c6 !important; }
[class*="z-50"] .shadow-2xl label[class*="border-2"] { border-radius: 14px !important; border-width: 1.5px !important; }
[class*="z-50"] .shadow-2xl button[type="submit"], [class*="z-50"] .shadow-2xl button.bg-blue-600, [class*="z-50"] .shadow-2xl button.bg-blue-700 { border-radius: 999px !important; padding-top: 12px; padding-bottom: 12px; font-weight: 600; }
[class*="z-50"] .shadow-2xl canvas { border-radius: 16px !important; border: 1.5px dashed #8fbcab !important; background: #fff !important; }
[class*="z-50"] .shadow-2xl .bg-slate-50 { border-radius: 14px !important; background-color: #e2efe9 !important; }
[class*="z-50"] .shadow-2xl .bg-slate-50 span, [class*="z-50"] .shadow-2xl span.rounded { border-radius: 999px !important; padding: 3px 12px !important; border: 1px solid #a9cbbd !important; background: #fff !important; }
[class*="z-50"] .shadow-2xl .bg-blue-50, [class*="z-50"] .shadow-2xl .bg-blue-100 { background-color: #d8ebe3 !important; border-color: #a9cbbd !important; border-radius: 14px !important; }
[class*="z-50"] .shadow-2xl .text-blue-600, [class*="z-50"] .shadow-2xl .text-blue-700 { color: #23695a !important; }

/* Judul (kepala) dialog: kuning lembut; teks cokelat tua */
[class*="z-50"] .shadow-2xl .border-b h1, [class*="z-50"] .shadow-2xl .border-b h2, [class*="z-50"] .shadow-2xl .border-b h3,
[class*="z-50"] .shadow-2xl .border-b .text-slate-700, [class*="z-50"] .shadow-2xl .border-b .text-slate-800 { color: #5a4610 !important; }
[class*="z-50"] .shadow-2xl .border-b .text-slate-400, [class*="z-50"] .shadow-2xl .border-b .text-slate-500 { color: #8a7430 !important; }
[class*="z-50"] .shadow-2xl .border-b button { color: #7a6420 !important; }
[class*="z-50"] .shadow-2xl .border-b button:hover { color: #5a4610 !important; background: rgba(90, 70, 16, .08) !important; }

/* ══ TEMA GELAP — area konten ═════════════════════════════════════════════════════════
   Aktif bersama sidebar gelap (html[data-tema="gelap"], tombol di kaki sidebar). Seluruh warna
   permukaan lewat variabel; kelas Tailwind yang dipakai di markup (bg-white, text-slate-*, dst.)
   dipetakan ulang di sini. Dialog tetap memakai gaya dialognya sendiri (krem/cyan). */
html[data-tema="gelap"] {
  color-scheme: dark;
  --canvas: #0e1d44; --line: #38589e; --ink: #f4f7ff; --muted: #b2c2e6; --blue: #7ab4ff;
  --surf: #162a5c; --surf-2: #102050; --surf-3: #203a76;
  scrollbar-color: #35517d transparent;
}

/* permukaan */
html[data-tema="gelap"] .topbar,
html[data-tema="gelap"] .panel,
html[data-tema="gelap"] .notice,
html[data-tema="gelap"] .soft-card,
html[data-tema="gelap"] .glass-panel,
html[data-tema="gelap"] .kpi,
html[data-tema="gelap"] .stat,
html[data-tema="gelap"] .chip-soft,
html[data-tema="gelap"] .btn-outline,
html[data-tema="gelap"] [class~="bg-white"],
html[data-tema="gelap"] [class*="bg-white/"] { background-color: var(--surf) !important; }
html[data-tema="gelap"] .btn-outline { color: var(--ink) !important; border-color: var(--line) !important; }
html[data-tema="gelap"] .kpi:hover { background-color: var(--surf-3) !important; border-color: #6fa6ff !important; }
html[data-tema="gelap"] .kpi-empty { color: #4d69a8; }
html[data-tema="gelap"] .shadow-sm, html[data-tema="gelap"] .shadow, html[data-tema="gelap"] .shadow-md,
html[data-tema="gelap"] .panel, html[data-tema="gelap"] .kpi, html[data-tema="gelap"] .stat { box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important; }

html[data-tema="gelap"] [class~="bg-slate-50"], html[data-tema="gelap"] [class~="bg-gray-50"],
html[data-tema="gelap"] [class~="bg-slate-100"], html[data-tema="gelap"] [class~="bg-gray-100"] { background-color: var(--surf-2) !important; }
html[data-tema="gelap"] [class~="bg-blue-50"], html[data-tema="gelap"] [class~="bg-sky-50"], html[data-tema="gelap"] [class~="bg-cyan-50"],
html[data-tema="gelap"] [class~="bg-indigo-50"] { background-color: var(--surf-3) !important; }
html[data-tema="gelap"] .hover\:bg-slate-50:hover, html[data-tema="gelap"] .hover\:bg-blue-50:hover,
html[data-tema="gelap"] .hover\:bg-gray-50:hover, html[data-tema="gelap"] .row-link:hover { background-color: var(--surf-3) !important; }

/* teks */
html[data-tema="gelap"] .text-slate-900, html[data-tema="gelap"] .text-slate-800,
html[data-tema="gelap"] .text-gray-900, html[data-tema="gelap"] .text-gray-800 { color: #e8eefb !important; }
html[data-tema="gelap"] .text-slate-700, html[data-tema="gelap"] .text-gray-700 { color: #d3deef !important; }
html[data-tema="gelap"] .text-slate-600, html[data-tema="gelap"] .text-gray-600 { color: #b5c4dd !important; }
html[data-tema="gelap"] .text-slate-500, html[data-tema="gelap"] .text-gray-500 { color: #9aadca !important; }
html[data-tema="gelap"] .text-slate-400, html[data-tema="gelap"] .text-gray-400 { color: #8296b6 !important; }
html[data-tema="gelap"] .text-slate-300 { color: #607699 !important; }
html[data-tema="gelap"] .text-blue-600, html[data-tema="gelap"] .text-blue-700, html[data-tema="gelap"] .text-blue-800,
html[data-tema="gelap"] .text-sky-600, html[data-tema="gelap"] .text-sky-700 { color: #8fbaf7 !important; }
html[data-tema="gelap"] .text-blue-900, html[data-tema="gelap"] .text-sky-900 { color: #b9d4fb !important; }
html[data-tema="gelap"] .page-title, html[data-tema="gelap"] .kpi-value, html[data-tema="gelap"] .stat-value { color: var(--ink); }

/* garis */
html[data-tema="gelap"] .border-slate-100, html[data-tema="gelap"] .border-slate-200, html[data-tema="gelap"] .border-slate-300,
html[data-tema="gelap"] .border-gray-100, html[data-tema="gelap"] .border-gray-200, html[data-tema="gelap"] .border-gray-300,
html[data-tema="gelap"] .border-blue-100, html[data-tema="gelap"] .border-blue-200, html[data-tema="gelap"] .border-sky-100 { border-color: var(--line) !important; }
html[data-tema="gelap"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html[data-tema="gelap"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
html[data-tema="gelap"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }
html[data-tema="gelap"] hr { border-color: var(--line); }

/* status: warna dasar dibuat transparan agar tetap terbaca di latar gelap */
html[data-tema="gelap"] [class~="bg-green-50"], html[data-tema="gelap"] [class~="bg-green-100"],
html[data-tema="gelap"] [class~="bg-emerald-50"], html[data-tema="gelap"] [class~="bg-emerald-100"] { background-color: rgba(52, 211, 153, .16) !important; }
html[data-tema="gelap"] .text-green-600, html[data-tema="gelap"] .text-green-700, html[data-tema="gelap"] .text-green-800,
html[data-tema="gelap"] .text-emerald-600, html[data-tema="gelap"] .text-emerald-700, html[data-tema="gelap"] .text-emerald-800 { color: #6ee7b7 !important; }
html[data-tema="gelap"] [class~="bg-red-50"], html[data-tema="gelap"] [class~="bg-red-100"], html[data-tema="gelap"] [class~="bg-rose-50"] { background-color: rgba(248, 113, 113, .16) !important; }
html[data-tema="gelap"] .text-red-500, html[data-tema="gelap"] .text-red-600, html[data-tema="gelap"] .text-red-700, html[data-tema="gelap"] .text-red-800 { color: #fca5a5 !important; }
html[data-tema="gelap"] .border-red-200, html[data-tema="gelap"] .border-red-300 { border-color: rgba(248, 113, 113, .45) !important; }
html[data-tema="gelap"] [class~="bg-amber-50"], html[data-tema="gelap"] [class~="bg-amber-100"], html[data-tema="gelap"] [class~="bg-yellow-50"],
html[data-tema="gelap"] [class~="bg-yellow-100"], html[data-tema="gelap"] [class~="bg-orange-50"], html[data-tema="gelap"] [class~="bg-orange-100"] { background-color: rgba(251, 191, 36, .14) !important; }
html[data-tema="gelap"] .text-amber-600, html[data-tema="gelap"] .text-amber-700, html[data-tema="gelap"] .text-amber-800, html[data-tema="gelap"] .text-amber-900,
html[data-tema="gelap"] .text-orange-600, html[data-tema="gelap"] .text-orange-700, html[data-tema="gelap"] .text-yellow-700 { color: #fcd34d !important; }
html[data-tema="gelap"] .border-amber-200, html[data-tema="gelap"] .border-amber-300 { border-color: rgba(251, 191, 36, .42) !important; }
html[data-tema="gelap"] [class~="bg-blue-100"], html[data-tema="gelap"] [class~="bg-sky-100"], html[data-tema="gelap"] [class~="bg-indigo-100"],
html[data-tema="gelap"] [class~="bg-cyan-100"], html[data-tema="gelap"] [class~="bg-violet-100"], html[data-tema="gelap"] [class~="bg-purple-100"] { background-color: rgba(96, 165, 250, .2) !important; }
html[data-tema="gelap"] .text-indigo-700, html[data-tema="gelap"] .text-indigo-800, html[data-tema="gelap"] .text-violet-700,
html[data-tema="gelap"] .text-purple-700, html[data-tema="gelap"] .text-sky-800, html[data-tema="gelap"] .text-cyan-700 { color: #a9c8fa !important; }
html[data-tema="gelap"] .badge-ok { background: rgba(52, 211, 153, .16); color: #6ee7b7; }
html[data-tema="gelap"] .badge-info, html[data-tema="gelap"] .chip-solid, html[data-tema="gelap"] .notice-label { background: rgba(96, 165, 250, .2); color: #a9c8fa; }
html[data-tema="gelap"] .badge-warn { background: rgba(251, 191, 36, .16); color: #fcd34d; }
html[data-tema="gelap"] .badge-bad { background: rgba(248, 113, 113, .16); color: #fca5a5; }

/* spanduk bekas gradasi: di mode terang jadi kartu terang (teks gelap), di mode gelap jadi permukaan gelap (teks terang) */
html[data-tema="gelap"] [class*="bg-gradient-to"][class*="from-"] { background-color: var(--surf-3) !important; border: 1px solid var(--line); }

/* tabel */
html[data-tema="gelap"] table thead, html[data-tema="gelap"] table th { background-color: var(--surf-2) !important; color: var(--muted) !important; }
html[data-tema="gelap"] table td { border-color: var(--line) !important; }
html[data-tema="gelap"] table tbody tr:hover { background-color: var(--surf-3) !important; }

/* isian formulir (bukan di dalam dialog — dialog punya gayanya sendiri) */
html[data-tema="gelap"] input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])),
html[data-tema="gelap"] textarea, html[data-tema="gelap"] select {
  background-color: var(--surf-2); color: var(--ink); border-color: var(--line);
}
html[data-tema="gelap"] ::placeholder { color: #7d93c4; opacity: 1; }
html[data-tema="gelap"] input:disabled, html[data-tema="gelap"] textarea:disabled, html[data-tema="gelap"] select:disabled { background-color: #0c1a42; color: #7d93c4; }
html[data-tema="gelap"] input[type="checkbox"], html[data-tema="gelap"] input[type="radio"] { accent-color: #6ea1f0; }
html[data-tema="gelap"] .tab:hover { color: #a9c8fa !important; }
html[data-tema="gelap"] .tab.is-active { color: #8fbaf7 !important; border-bottom-color: #6aa8ff !important; }

/* tombol biru lebih cerah di latar gelap */
html[data-tema="gelap"] [class~="bg-blue-600"], html[data-tema="gelap"] [class~="bg-blue-700"], html[data-tema="gelap"] .btn-primary { background-color: #3b82f6 !important; color: #fff !important; }
html[data-tema="gelap"] .hover\:bg-blue-700:hover, html[data-tema="gelap"] .btn-primary:hover { background-color: #2f6fe0 !important; }
html[data-tema="gelap"] [class~="bg-red-50"], html[data-tema="gelap"] [class~="bg-red-100"], html[data-tema="gelap"] [class~="bg-rose-50"] { background-color: rgba(251, 113, 133, .13) !important; }

/* ── Dialog gelap ───────────────────────────────────────────────────────────────────
   Kotak dialog biru malam dengan kepala emas lembut; isian dan opsi gelap; tombol biru cerah. */
html[data-tema="gelap"] {
  --dlg-bg: #162a5c; --dlg-head: #4a3e14; --dlg-line: #3d5fa8; --dlg-ink: #eef3ff; --dlg-muted: #b2c2e6;
  --dlg-accent: #3b82f6; --dlg-accent-dark: #2f6fe0;
  --dlg-mint: #24498f; --dlg-mint-line: #7ab4ff; --dlg-sand: #102050; --dlg-field: #102050;
  --dlg-brick: #fca5a5; --dlg-brick-soft: rgba(248, 113, 113, .14); --dlg-brick-line: rgba(248, 113, 113, .42);
}
html[data-tema="gelap"] [class*="z-50"][class*="bg-black/"],
html[data-tema="gelap"] [class*="z-50"] > .absolute.inset-0[class*="bg-slate-9"] { background-color: rgba(3, 8, 22, .68) !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl { box-shadow: 0 24px 64px rgba(0, 0, 0, .6) !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl h1,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl h2,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl h3 { color: var(--dlg-ink) !important; }
/* kepala dialog: emas lembut */
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b { background: var(--dlg-head) !important; border-bottom: 1px solid #6d5b22 !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b h1,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b h2,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b h3,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b p:first-child,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b .text-slate-700,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b .text-slate-800 { color: #fde68a !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b .text-slate-400,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b .text-slate-500,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b p:not(:first-child) { color: #d9c27a !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b button { color: #f6d983 !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .border-b button:hover { color: #fff !important; background: rgba(253, 230, 138, .14) !important; }
/* isian, opsi, chip */
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl input:not([type="checkbox"]):not([type="radio"]),
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl textarea,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl select { border: 1.5px solid var(--dlg-line) !important; background: var(--dlg-field) !important; color: var(--dlg-ink) !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl input:focus,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl textarea:focus { border-color: #7ab4ff !important; box-shadow: 0 0 0 3px rgba(122, 180, 255, .28) !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl ::placeholder { color: #7d93c4; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl canvas { background: #fff !important; border: 1.5px dashed #7ab4ff !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .bg-slate-50 { background-color: #102050 !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .bg-slate-50 span,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl span.rounded { background: #25427f !important; border: 1px solid var(--dlg-line) !important; color: var(--dlg-ink) !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .bg-blue-50,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .bg-blue-100 { background-color: #24498f !important; border-color: var(--dlg-line) !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .text-blue-600,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .text-blue-700,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .underline,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl a.text-blue-600,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl a.text-blue-700 { color: #8fbaf7 !important; }
/* tombol */
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl button[type="submit"]:disabled,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl button:disabled { background: #2a4182 !important; color: #8da2d1 !important; }
/* kotak peringatan */
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .bg-amber-50,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .bg-amber-100 { background: rgba(251, 191, 36, .14) !important; border-color: rgba(251, 191, 36, .42) !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .text-amber-700,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .text-amber-800 { color: #fcd34d !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .bg-emerald-50 { background: rgba(52, 211, 153, .16) !important; border-color: rgba(52, 211, 153, .4) !important; }
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .text-emerald-700,
html[data-tema="gelap"] [class*="z-50"] .shadow-2xl .text-emerald-800 { color: #6ee7b7 !important; }

/* ── Aksen warna kartu angka (mode gelap): garis atas berwarna, supaya tidak monoton ─────── */
html[data-tema="gelap"] .kpi, html[data-tema="gelap"] .stat { border-top: 3px solid #5aa2ff !important; }
html[data-tema="gelap"] .kpi:nth-child(4n+2), html[data-tema="gelap"] .stat:nth-child(4n+2) { border-top-color: #f6c85f !important; }
html[data-tema="gelap"] .kpi:nth-child(4n+3), html[data-tema="gelap"] .stat:nth-child(4n+3) { border-top-color: #fb7185 !important; }
html[data-tema="gelap"] .kpi:nth-child(4n), html[data-tema="gelap"] .stat:nth-child(4n) { border-top-color: #2dd4bf !important; }
html[data-tema="gelap"] .kpi-label, html[data-tema="gelap"] .stat-label { color: #c3d2f0; }
html[data-tema="gelap"] table th { color: #c3d2f0 !important; }
html[data-tema="gelap"] .topbar { border-bottom-color: #38589e !important; }