:root {
  /* PALET UTAMA */
  --color-bg: #f3f5f6;
  --color-shell: rgba(243,245,246,0.2);
  --color-surface: #ffffff;
  --color-surface-muted: rgba(255,255,255,0.6);
  --color-primary: #0B7A75;
  --color-primary-soft: rgba(11,122,117,.12);
  --color-primary-border: rgba(11,122,117,.35);
  --color-text: #0f172a;
  --color-text-muted: #6b7280;
  --color-border: rgba(148,163,184,.12);
  --radius-lg: 1.35rem;
  --radius-md: 1rem;
  --shadow-sm: 0 10px 35px rgba(15,23,42,.06);
  --shadow-nav: 0 16px 45px rgba(15,23,42,.14);
  --display-latin: block;
  --display-translation: block;
}

/* DARK (base) */
body.dark-mode {
  --color-bg: #020617;
  --color-shell: rgba(2,6,23,.05);
  --color-surface: rgba(15,23,42,.65);
  --color-surface-muted: rgba(15,23,42,.35);
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-border: rgba(15,23,42,.3);
  --shadow-sm: 0 8px 30px rgba(0,0,0,.4);
  --shadow-nav: 0 18px 40px rgba(0,0,0,.6);
}

body.hide-latin { --display-latin: none; }
body.hide-translation { --display-translation: none; }

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #ffffff 0%, var(--color-bg) 58%, #e2e8f0 100%);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
  line-height: 1.55;
  transition: background .25s ease, color .25s ease;
}

body.dark-mode {
  background: radial-gradient(circle at top, #020617 0%, #020617 65%, #020617 100%);
}

a { color: inherit; text-decoration: none; }

.app-bg {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.app-shell {
  width: min(480px, 100vw);
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px;
  background: rgba(243,245,246,0);
}

/* HEADER */
.pwa-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .85rem .5rem;
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(243,245,246,.96), rgba(248,250,252,.9));
  border-bottom: 1px solid rgba(148,163,184,.12);
  box-shadow: 0 14px 32px rgba(15,23,42,.12);
}

body.dark-mode .pwa-header {
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.86));
  border-bottom-color: rgba(30,64,175,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.8);
}

.ph-left {
  display: flex;
  gap: .6rem;
  align-items: center;
}

.ph-avatar {
  width: 34px;
  height: 34px;
  border-radius: 1rem;
  background: radial-gradient(circle at 18% 12%, rgba(11,122,117,.45) 0, rgba(11,122,117,0) 70%);
  border: 1px solid rgba(11,122,117,.45);
  display: grid;
  place-items: center;
  color: var(--color-primary);
  box-shadow: 0 4px 10px rgba(15,23,42,.18);
}

body.dark-mode .ph-avatar {
  background: radial-gradient(circle at 18% 12%, rgba(34,197,94,.5) 0, rgba(15,23,42,0) 70%);
  border-color: rgba(34,197,94,.72);
  color: #bbf7d0;
}

.ph-greet {
  font-size: .6rem;
  color: var(--color-text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ph-title {
  font-size: .9rem;
  font-weight: 700;
}

.ph-sub {
  font-size: .58rem;
  color: rgba(148,163,184,.85);
}

/* HEADER BUTTON */
.ph-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148,163,184,.25);
  background: linear-gradient(135deg, #ffffff, #e5f0ff);
  border-radius: .9rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(15,23,42,.16);
}

.ph-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(15,23,42,.22);
  border-color: rgba(11,122,117,.45);
  background: linear-gradient(135deg, #e0f2fe, #dcfce7);
}

.ph-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

body.dark-mode .ph-btn {
  background: linear-gradient(135deg, rgba(15,23,42,.98), rgba(30,64,175,.8));
  border-color: rgba(148,163,184,.42);
  box-shadow: 0 6px 16px rgba(0,0,0,.75);
}

body.dark-mode .ph-btn:hover {
  background: linear-gradient(135deg, rgba(30,64,175,.9), rgba(34,197,94,.7));
}

/* CONTENT */
.app-content {
  padding: .6rem .85rem 1.25rem;
}

/* GENERIC CARD */
.card-soft {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 1.1rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all .26s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-soft::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), #22c55e);
  opacity: .8;
}

.card-soft:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,23,42,.16);
  border-color: rgba(11,122,117,.35);
}

body.dark-mode .card-soft {
  background: linear-gradient(135deg, rgba(30,41,59,.82), rgba(15,23,42,.96));
  border-color: var(--color-border);
}

/* TITLES */
.section-title {
  font-weight: 600;
  font-size: .83rem;
  margin-bottom: .3rem;
}

.section-subtitle {
  font-size: .67rem;
  color: var(--color-text-muted);
  margin-bottom: .6rem;
}

/* BOTTOM NAV */
.bottom-nav-container {
  position: fixed;
  bottom: .6rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, 100vw - 1.05rem);
  z-index: 100;
}

.bottom-nav {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-nav);
  padding: .25rem .3rem;
  display: grid;
  gap: .25rem;
  position: relative;
  overflow: hidden;
}

.bottom-nav.bn-6 { grid-template-columns: repeat(6, 1fr); }

.bottom-nav-item {
  border: none;
  background: transparent;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: .02rem;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  color: #94a3b8;
  padding: .35rem 0 .15rem;
  transition: all .18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.bottom-nav-item i { font-size: 1rem; }

.bottom-nav-item::before {
  content: '';
  position: absolute;
  inset-inline: 18%;
  bottom: .18rem;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transition: opacity .18s ease, background .18s ease;
}

.bottom-nav-item:hover {
  transform: translateY(-1px);
  color: #0f172a;
  background: rgba(148,163,184,.12);
}

.bottom-nav-item.active {
  background: rgba(11,122,117,.14);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(11,122,117,.28);
}

.bottom-nav-item.active::before {
  background: linear-gradient(90deg, var(--color-primary), #22c55e);
  opacity: 1;
}

body.dark-mode .bottom-nav {
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.9));
  border-color: rgba(15,23,42,.8);
  box-shadow: 0 18px 40px rgba(0,0,0,.92);
}

body.dark-mode .bottom-nav-item:hover {
  background: rgba(30,64,175,.35);
  color: #e5e7eb;
}

body.dark-mode .bottom-nav-item.active {
  background: rgba(34,197,94,.24);
  color: #e5e7eb;
  box-shadow: 0 8px 20px rgba(34,197,94,.4);
}

body.dark-mode .bottom-nav-item.active::before {
  background: linear-gradient(90deg, #22c55e, #0ea5e9);
}

/* ARABIC MODE */
.arabic {
  font-family: "LPMQ Isep Misbah", serif;
}
.latin { display: var(--display-latin); }
.translation { display: var(--display-translation); }

@media (max-width: 480px) {
  .pwa-header { border-radius: 0; }
  .app-shell { width: 100%; }
  .bottom-nav-container { bottom: .25rem; }
}

/* =========================================================
   DARK MODE – COLORS ONLY (COMBINED, FIXED)
   Letakkan SETELAH semua CSS lain.
   Tidak mengubah layout/spacing/size/shadow/radius—hanya warna.
   ========================================================= */

body.dark-mode {
  color-scheme: dark;

  /* ——— Core palette (dark) ——— */
  --color-bg: #0b1220;          /* latar utama */
  --color-surface: #111827;     /* permukaan kartu/panel */
  --color-surface-2: #0f172a;   /* permukaan sekunder */
  --color-overlay: #0b1220;

  /* Teks utama terang, TIDAK abu-abu */
  --color-text: #e5e7eb;        /* near-white (kontras tinggi) */

  /* Teks sekunder/muted BUKAN gray → tint biru lembut & kontras */
  --color-text-muted: #c1e9ff;

  /* Border jelas (bukan abu-abu kusam) */
  --color-border: #2a3a53;

  /* Brand & state */
  --color-primary: #0B7A75;
  --color-primary-contrast: #e6fffa;
  --color-link: #7dd3fc;
  --color-success: #22c55e;
  --color-warning: #fbbf24;
  --color-danger:  #ef4444;

  /* Form caret & selection */
  --color-caret: #e5e7eb;
  --color-selection-bg: rgba(125, 211, 252, .22);
  --color-selection-fg: #e5e7eb;

  /* Ikon netral mengikuti currentColor */
  --color-icon: #e5e7eb;
}

/* ——— Global background & text ——— */
body.dark-mode,
body.dark-mode .app-bg,
body.dark-mode .app-shell {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* ——— Permukaan umum (card/sheet/panel/section) ——— */
body.dark-mode .card,
body.dark-mode .card-soft,
body.dark-mode .sheet,
body.dark-mode .panel,
body.dark-mode .section,
body.dark-mode .modal,
body.dark-mode .dropdown,
body.dark-mode .tooltip-content,
body.dark-mode .toast,
body.dark-mode .nav,
body.dark-mode header,
body.dark-mode footer {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ——— Area sekunder/strip/toolbar/hero ——— */
body.dark-mode .subtle,
body.dark-mode .toolbar,
body.dark-mode .hero,
body.dark-mode .banner,
body.dark-mode .chip,
body.dark-mode .badge,
body.dark-mode .pill {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ——— Teks muted/meta/subtitle/helper: TIDAK abu-abu ——— */
body.dark-mode .muted,
body.dark-mode .meta,
body.dark-mode .subtitle,
body.dark-mode .desc,
body.dark-mode .helper,
body.dark-mode .hint,
body.dark-mode .label-muted,
body.dark-mode .ph-greet,
body.dark-mode .article-meta,
body-dark-mode .rb-sub,
body.dark-mode .surah-meta,
body.dark-mode .wawasan-subtitle,
body.dark-mode .wawasan-card-index,
body.dark-mode .wawasan-counter,
body.dark-mode .vd-meta,
body-dark-mode .ibadah-summary .label,
body-dark-mode .tasbih-sub,
body-dark-mode .tasbih-info,
body-dark-mode .ayah-latin {
  color: var(--color-text-muted) !important; /* biru muda lembut */
}

/* ——— Link ——— */
body.dark-mode a { color: var(--color-link) !important; }

/* ——— Garis/border ——— */
body.dark-mode hr,
body.dark-mode .divider,
body.dark-mode .separator,
body.dark-mode [class*="border"] {
  border-color: var(--color-border) !important;
}

/* ——— Tombol (warna saja) ——— */
body.dark-mode .btn,
body.dark-mode [class*="btn-"] {
  color: var(--color-text) !important;
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
body.dark-mode .btn-primary,
body.dark-mode [class*="btn-primary"] {
  color: var(--color-primary-contrast) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
body.dark-mode .btn-ghost,
body.dark-mode .btn-outline,
body.dark-mode [class*="btn-outline"],
body.dark-mode [class*="btn-ghost"] {
  color: var(--color-text) !important;
  background-color: transparent !important;
  border-color: var(--color-border) !important;
}

/* ——— Form field (warna saja) ——— */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  caret-color: var(--color-caret) !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--color-text-muted) !important; /* biru muda lembut */
}

/* ——— Tabel (warna saja) ——— */
body.dark-mode table { color: var(--color-text) !important; }
body.dark-mode thead,
body.dark-mode tr:hover {
  background-color: var(--color-surface-2) !important;
}
body.dark-mode td,
body.dark-mode th {
  border-color: var(--color-border) !important;
}

/* ——— Chip/Badge/Tag/Pill (warna saja) ——— */
body.dark-mode .chip,
body.dark-mode .badge,
body.dark-mode .tag,
body.dark-mode .pill {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ——— State text only ——— */
body.dark-mode .is-success,
body.dark-mode .text-success { color: var(--color-success) !important; }
body.dark-mode .is-warning,
body-dark-mode .text-warning, /* kompat untuk penulisan salah yang mungkin ada */
body.dark-mode .text-warning { color: var(--color-warning) !important; }
body.dark-mode .is-danger,
body.dark-mode .text-danger  { color: var(--color-danger)  !important; }

/* ——— Ikon & SVG mengikuti currentColor ——— */
body.dark-mode svg [fill]:not([fill="none"]) { fill: currentColor !important; }
body.dark-mode svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
body.dark-mode .icon,
body.dark-mode [class*="icon-"] { color: var(--color-icon) !important; }

/* ——— Kartu/list umum (warna saja) ——— */
body.dark-mode .list-item,
body.dark-mode .card-item,
body.dark-mode .media-card,
body.dark-mode .video-card,
body.dark-mode .article-card,
body.dark-mode .surah-card,
body-dark-mode .ayah-card,
body.dark-mode .qibla-card,
body-dark-mode .zakat-card,
body-dark-mode .wawasan-card,
body-dark-mode .tasbih-card,
body-dark-mode .ruqyah-block {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ——— Selection highlight ——— */
body.dark-mode ::selection {
  background: var(--color-selection-bg) !important;
  color: var(--color-selection-fg) !important;
}

/* =========================================================
   PATCH: tangani teks gelap (#102a43) agar tetap terbaca
   ========================================================= */

/* 1) Semua teks umum pakai var(--color-text) saat dark mode */
body.dark-mode h1,
body.dark-mode h2,
body-dark-mode h3,
body-dark-mode h4,
body-dark-mode h5,
body-dark-mode h6,
body-dark-mode p,
body-dark-mode span,
body-dark-mode small,
body-dark-mode strong,
body-dark-mode em,
body-dark-mode code,
body-dark-mode pre,
body-dark-mode blockquote,
body-dark-mode li,
body-dark-mode dt,
body-dark-mode dd,
body-dark-mode label,
body-dark-mode legend,
body-dark-mode caption,
body-dark-mode figcaption,
body-dark-mode a,
body-dark-mode button,
body-dark-mode .title,
body-dark-mode .subtitle,
body-dark-mode .heading,
body-dark-mode .meta,
body-dark-mode .desc,
body-dark-mode .helper,
body-dark-mode .hint {
  color: var(--color-text) !important;
}

/* 2) Link tetap punya aksen link */
body.dark-mode a { color: var(--color-link) !important; }

/* 3) Placeholder & teks “muted” dengan daftar eksplisit (tanpa :is) */
body.dark-mode .muted,
body-dark-mode .meta,
body-dark-mode .subtitle,
body-dark-mode .desc,
body-dark-mode .helper,
body-dark-mode .hint,
body-dark-mode .label-muted,
body-dark-mode input::placeholder,
body-dark-mode textarea::placeholder {
  color: var(--color-text-muted) !important;
}

/* 4) Override inline style yang hardcode #102a43 */
body.dark-mode [style*="#102a43"],
body.dark-mode [style*="#102A43"] {
  color: var(--color-text) !important;
}

/* =========================================================
   PATCH – MODAL DARK (COLORS ONLY)
   Letakkan di PALING AKHIR file dark mode CSS
   ========================================================= */

/* BACKDROP / OVERLAY */
body.dark-mode .modal-backdrop,
body.dark-mode .modal-backdrop.show,
body-dark-mode .backdrop,
body-dark-mode .overlay,
body-dark-mode .overlay.show,
body-dark-mode dialog::backdrop {
  background-color: rgba(0, 0, 0, .6) !important;
}

/* NATIVE <dialog> */
body.dark-mode dialog {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

/* BOOTSTRAP / GENERIC MODAL */
body.dark-mode .modal,
body-dark-mode .modal.show {
  background: transparent !important; /* biar backdrop yang kerja */
}

body.dark-mode .modal-content,
body.dark-mode .modal-dialog .modal-content {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

body.dark-mode .modal-header,
body-dark-mode .modal-body,
body-dark-mode .modal-footer {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* Tombol close (×) dan icon di header modal */
body.dark-mode .modal-header .btn-close,
body-dark-mode .modal-header .close,
body-dark-mode .modal-header .icon {
  color: var(--color-text) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* FORM & TEKS DI DALAM MODAL (warna saja) */
body.dark-mode .modal-content input,
body-dark-mode .modal-content textarea,
body-dark-mode .modal-content select {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  caret-color: var(--color-caret) !important;
}
body.dark-mode .modal-content input::placeholder,
body-dark-mode .modal-content textarea::placeholder {
  color: var(--color-text-muted) !important;
}

/* SWEETALERT2 (swal2) */
body.dark-mode .swal2-popup {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
body-dark-mode .swal2-title,
body-dark-mode .swal2-html-container {
  color: var(--color-text) !important;
}
body-dark-mode .swal2-actions .swal2-styled.swal2-confirm {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  border-color: var(--color-primary) !important;
}
body-dark-mode .swal2-actions .swal2-styled:not(.swal2-confirm) {
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

/* OFFCANVAS / DRAWER jika kamu pakai */
body.dark-mode .offcanvas,
body-dark-mode .drawer,
body-dark-mode .side-sheet {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* JAGA LINK & TEKS DI MODAL TETAP TERBACA */
body-dark-mode .modal-content a { color: var(--color-link) !important; }
body-dark-mode .modal-content .muted,
body-dark-mode .modal-content .meta,
body-dark-mode .modal-content .subtitle,
body-dark-mode .modal-content .desc,
body-dark-mode .modal-content .helper,
body-dark-mode .modal-content .hint,
body-dark-mode .modal-content .label-muted {
  color: var(--color-text-muted) !important;
}
/* =========================================================
   MODAL GLOBAL (LIGHT + DARK)
   ========================================================= */

/* BACKDROP / OVERLAY (UMUM + BOOTSTRAP) */
.modal-backdrop,
.modal-backdrop.show,
.backdrop,
.overlay,
.overlay.show,
dialog::backdrop {
  background-color: rgba(15, 23, 42, 0.55);
}

/* NATIVE <dialog> */
dialog {
  background-color: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: .85rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
}

/* BOOTSTRAP / GENERIC MODAL CONTAINER */
.modal,
.modal.show {
  background-color: transparent; /* overlay pakai backdrop di luar */
}

/* ISI MODAL */
.modal-content,
.modal-dialog .modal-content {
  background-color: #ffffff;
  color: #0f172a;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, .35);
  box-shadow: 0 22px 48px rgba(15, 23, 42, .22);
}

/* HEADER / BODY / FOOTER */
.modal-header,
.modal-body,
.modal-footer {
  background-color: #ffffff;
  color: #0f172a;
  border-color: rgba(148, 163, 184, .25);
}

/* JUDUL & TEKS DI MODAL */
.modal-title {
  font-size: .95rem;
  font-weight: 700;
  color: #0f172a;
}

/* TOMBOL CLOSE (×) / ICON HEADER */
.modal-header .btn-close,
.modal-header .close,
.modal-header .icon {
  color: #0f172a;
  opacity: .7;
  filter: none;
}
.modal-header .btn-close:hover,
.modal-header .close:hover,
.modal-header .icon:hover {
  opacity: 1;
}

/* FORM DI DALAM MODAL */
.modal-content input,
.modal-content textarea,
.modal-content select {
  background-color: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, .5);
  border-radius: .6rem;
  caret-color: #0f172a;
}
.modal-content input::placeholder,
.modal-content textarea::placeholder {
  color: #9ca3af;
}

/* LINK & TEKS MUTED DI MODAL */
.modal-content a {
  color: #0b7a75;
}
.modal-content .muted,
.modal-content .meta,
.modal-content .subtitle,
.modal-content .desc,
.modal-content .helper,
.modal-content .hint,
.modal-content .label-muted {
  color: #6b7280;
}

/* SWEETALERT2 (swal2) */
.swal2-popup {
  background: #ffffff;
  color: #0f172a;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, .35);
  box-shadow: 0 22px 48px rgba(15, 23, 42, .25);
}
.swal2-title,
.swal2-html-container {
  color: #0f172a;
}
.swal2-actions .swal2-styled.swal2-confirm {
  background: #0b7a75;
  color: #e6fffa;
  border: 1px solid #0b7a75;
}
.swal2-actions .swal2-styled:not(.swal2-confirm) {
  background: transparent;
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, .5);
}

/* OFFCANVAS / DRAWER */
.offcanvas,
.drawer,
.side-sheet {
  background-color: #ffffff;
  color: #0f172a;
  border-left: 1px solid rgba(148, 163, 184, .35);
}

/* =========================================================
   DARK MODE – MODAL (SOLID GELAP + TEKS PUTIH)
   ========================================================= */

body.dark-mode .modal-backdrop,
body.dark-mode .modal-backdrop.show,
body.dark-mode .backdrop,
body.dark-mode .overlay,
body.dark-mode .overlay.show,
body.dark-mode dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.65) !important;
}

/* container modal (overlay bootstrap) */
body.dark-mode .modal,
body.dark-mode .modal.show {
  background-color: rgba(0, 0, 0, 0.65) !important; /* TIDAK transparent */
}

/* NATIVE dialog */
body.dark-mode dialog {
  background-color: #020617 !important;
  color: #e5e7eb !important;
  border: 1px solid #1f2937 !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .85) !important;
}

/* isi modal */
body.dark-mode .modal-content,
body.dark-mode .modal-dialog .modal-content {
  background-color: #020617 !important;   /* gelap solid */
  color: #e5e7eb !important;              /* teks putih lembut */
  border-radius: 1rem;
  border: 1px solid #1f2937 !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.85) !important;
}

/* header / body / footer */
body.dark-mode .modal-header,
body.dark-mode .modal-body,
body.dark-mode .modal-footer {
  background-color: #020617 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
}

body.dark-mode .modal-title {
  color: #e5e7eb !important;
}

/* tombol close & icon */
body.dark-mode .modal-header .btn-close,
body.dark-mode .modal-header .close,
body.dark-mode .modal-header .icon {
  color: #e5e7eb !important;
  filter: none !important;
  opacity: 1 !important;
}

/* link & teks tambahan */
body.dark-mode .modal-content a {
  color: #7dd3fc !important;
}
body.dark-mode .modal-content .muted,
body.dark-mode .modal-content .meta,
body.dark-mode .modal-content .subtitle,
body.dark-mode .modal-content .desc,
body.dark-mode .modal-content .helper,
body.dark-mode .modal-content .hint,
body.dark-mode .modal-content .label-muted {
  color: #c1e9ff !important;
}

/* form di dalam modal */
body.dark-mode .modal-content input,
body.dark-mode .modal-content textarea,
body.dark-mode .modal-content select {
  background-color: #020617 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
  caret-color: #e5e7eb !important;
}
body.dark-mode .modal-content input::placeholder,
body.dark-mode .modal-content textarea::placeholder {
  color: #9ca3af !important;
}

/* SWEETALERT2 dark */
body.dark-mode .swal2-popup {
  background: #020617 !important;
  color: #e5e7eb !important;
  border: 1px solid #1f2937 !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .9) !important;
}
body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
  color: #e5e7eb !important;
}
body.dark-mode .swal2-actions .swal2-styled.swal2-confirm {
  background: #0b7a75 !important;
  color: #e6fffa !important;
  border-color: #0b7a75 !important;
}
body.dark-mode .swal2-actions .swal2-styled:not(.swal2-confirm) {
  background: transparent !important;
  color: #e5e7eb !important;
  border: 1px solid #1f2937 !important;
}

/* OFFCANVAS / DRAWER dark */
body.dark-mode .offcanvas,
body.dark-mode .drawer,
body.dark-mode .side-sheet {
  background-color: #020617 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
}