/* Global dark mode */
body.dark-mode {
  background-color: transparent !important; /* ✅ Ganti #111 jadi transparent */
  color: #f1f1f1 !important;
}

/* Teks umum */
body.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 label,
body.dark-mode div,
body.dark-mode strong,
body.dark-mode small,
body.dark-mode b,
body.dark-mode i,
body.dark-mode u,
body.dark-mode li,
body.dark-mode nav,
body.dark-mode blockquote {
  color: #f1f1f1 !important;
}

/* Link */
body.dark-mode a {
  color: #80cbc4 !important;
}
body.dark-mode .footer-nav a {
  color: #eee !important;
}
body.dark-mode .footer-nav a:hover {
  background-color: #333 !important;
}

/* Komponen kontainer */
body.dark-mode .card,
body.dark-mode .container,
body.dark-mode .box,
body.dark-mode .form-box,
body.dark-mode .content,
body.dark-mode .login-container,
body.dark-mode .section,
body.dark-mode .row,
body.dark-mode .col {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
  border-color: #444 !important;
}

/* Input form */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="checkbox"] {
  background-color: #222 !important;
  color: #eee !important;
  border: 1px solid #555 !important;
}

/* Checkbox modern */
body.dark-mode input[type="checkbox"] {
  accent-color: #80cbc4 !important;
}

/* Tombol */
body.dark-mode button,
body.dark-mode .btn,
body.dark-mode input[type="submit"] {
  background-color: #444 !important;
  color: #fff !important;
  border: 1px solid #777 !important;
}

/* Table dan border */
body.dark-mode table,
body.dark-mode th,
body.dark-mode td {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
  border-color: #444 !important;
}
body.dark-mode .border,
body.dark-mode hr {
  border-color: #444 !important;
}

/* Teks tambahan */
body.dark-mode .text-muted,
body.dark-mode .text-dark,
body.dark-mode .text-black,
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-500 {
  color: #ccc !important;
}

/* Komponen Tailwind/Bootstrap */
body.dark-mode .bg-white {
  background-color: #1e1e1e !important;
}
body.dark-mode .text-blue-600 {
  color: #90caf9 !important;
}
body.dark-mode .bg-blue-600 {
  background-color: #1565c0 !important;
}
body.dark-mode .bg-red-100 {
  background-color: #5c0000 !important;
  color: #ffbdbd !important;
}
body.dark-mode .bg-green-100 {
  background-color: #003d33 !important;
  color: #a5d6a7 !important;
}

/* Footer navigasi */
body.dark-mode .footer-nav {
  background-color: #1a1a1a !important;
  border-top: 1px solid #444 !important;
}

/* Komponen khusus */
body.dark-mode #containerKiblat {
  background-color: #222 !important;
  border-color: #333 !important;
}
body.dark-mode #arahKiblat {
  color: #f1f1f1 !important;
}

/* Headings untuk tampilan terang (default) */
h1, h2 {
  color: #00695c !important;
  font-size: 28px !important;
  font-weight: bold !important;
  margin: 20px 0 !important;
  position: relative !important;
  z-index: 999 !important;
  background: transparent !important;
}

/* Headings dark mode override */
body.dark-mode h1,
body.dark-mode h2 {
  color: #f1f1f1 !important;
}
.kalender-box {
  display: inline-block;
  padding: 10px 20px;
  background: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.kalender-teks {
  font-size: 1em;
  color: #333;
}

.kalender-hijri {
  color: #00695c;
}

/* DARK MODE SUPPORT */
body.dark-mode .kalender-box {
  background: #1e1e1e;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}

body.dark-mode .kalender-teks {
  color: #f1f1f1;
}

body.dark-mode .kalender-hijri {
  color: #80cbc4;
}
.judul-doa {
  font-size: 1.8rem;
  font-weight: bold;
  color: #14532d; /* hijau gelap untuk light mode */
}

.dark-mode .judul-doa {
  color: #a7f3d0; /* hijau terang untuk dark mode */
}

body.dark-mode .accordion .accordion-body {
  background-color: #222;
  color: #fff;
}

.accordion .accordion-body {
  color: #fff !important;
  background-color: #222 !important;
}

/* =========================================
   ✅ FIX: WARNA WAKTU SHOLAT DI DARK MODE
   ========================================= */

/* Target saat Dark Mode aktif */
.dark-mode .sholat-item-compact,
[data-bs-theme="dark"] .sholat-item-compact,
.dark-mode .sholat-item,
[data-bs-theme="dark"] .sholat-item {
  /* Ubah background kotak jadi agak transparan putih/gelap */
  background: rgba(255, 255, 255, 0.1) !important; 
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Warna Nama Sholat (Subuh, Dzuhur, dll) */
.dark-mode .sholat-nama-compact,
[data-bs-theme="dark"] .sholat-nama-compact,
.dark-mode .sholat-nama,
[data-bs-theme="dark"] .sholat-nama {
  color: rgba(255, 255, 255, 0.7) !important; /* Abu-abu terang */
}

/* Warna JAM Sholat (04:34, 11:50, dll) */
.dark-mode .sholat-waktu-compact,
[data-bs-theme="dark"] .sholat-waktu-compact,
.dark-mode .sholat-waktu,
[data-bs-theme="dark"] .sholat-waktu {
  color: #4ade80 !important; /* Hijau Neon Terang (Kontras) */
  font-weight: 700 !important;
}

/* Judul Card "Waktu Sholat" */
.dark-mode .card-title,
[data-bs-theme="dark"] .card-title {
  color: #ffffff !important;
}

/* Badge "Live" atau "Lokal" */
.dark-mode .badge,
[data-bs-theme="dark"] .badge {
  background-color: #4ade80 !important;
  color: #000 !important; /* Teks badge jadi hitam agar terbaca */
}