/* Palet kustom di atas theme dasar DaisyUI "light" & "dark" yang valid,
   supaya semua token warna (base-content, base-100/200/300, dst) tetap
   konsisten dan kontras. Nuansa: hijau zamrud (elegan, bukan hijau mint),
   emas kaya, dan aksen merah marun — kombinasi klasik seni Islami. */
[data-theme="light"] {
  --p: 158 55% 24%;   /* primary: hijau zamrud dalam */
  --pc: 0 0% 100%;    /* teks di atas tombol primary: putih */
  --s: 40 72% 48%;    /* secondary: emas kaya */
  --a: 355 45% 38%;   /* accent: merah marun — aksen seni Islami klasik */
  --b1: 40 35% 99%;   /* base-100: nyaris putih, hangat */
  --b2: 36 28% 91%;   /* base-200: boks/card — dibuat lebih beda dari latar */
  --b3: 34 24% 85%;   /* base-300: kontainer lebih dalam */
  --deco1: 158 55% 30%;  /* dekorasi landing: hijau zamrud */
  --deco2: 40 72% 52%;   /* dekorasi landing: emas */
  --deco3: 355 45% 42%;  /* dekorasi landing: merah marun */
  --deco4: 190 55% 35%;  /* dekorasi landing: biru kehijauan (pirus) */
}
/* Dark mode: diselaraskan dengan tema visual Dokumen Induk program
   "Satu Malam Satu Ayat — Tadabbur & Hidayah" (sampul hitam-keunguan nyaris
   pekat dengan aksen magenta/fuchsia terang) — diukur langsung dari warna
   sampul dokumen (HSL ±326° 100% 45% untuk aksen, ±300° latar nyaris hitam). */
[data-theme="dark"] {
  --p: 326 80% 50%;   /* primary: magenta/fuchsia — khas sampul Dokumen Induk */
  --pc: 0 0% 100%;    /* teks di atas tombol primary: putih */
  --s: 40 75% 56%;    /* secondary: emas — tetap dipertahankan sbg aksen hangat */
  --a: 300 55% 42%;   /* accent: ungu-magenta lebih dalam, variasi dari primary */
  --bc: 0 0% 98%;     /* teks utama: putih tegas, bukan abu-abu */
  --b1: 300 14% 7%;   /* base-100: nyaris hitam dengan rona ungu, seperti latar sampul */
  --b2: 300 12% 13%;  /* base-200: boks/card — dibuat lebih beda dari latar */
  --b3: 300 10% 19%;  /* base-300 */
  --deco1: 326 80% 50%;  /* dekorasi landing: magenta */
  --deco2: 40 75% 55%;   /* dekorasi landing: emas */
  --deco3: 300 55% 42%;  /* dekorasi landing: ungu-magenta dalam */
  --deco4: 190 55% 40%;  /* dekorasi landing: pirus — penyeimbang dingin */
}

html[data-theme="light"] body {
  background: radial-gradient(circle at 15% -10%, #fdf6e8 0%, transparent 45%),
              radial-gradient(circle at 85% 10%, #eef7f2 0%, transparent 40%),
              radial-gradient(circle at 50% 100%, #fbeef0 0%, transparent 35%),
              #fffdf9;
  color: #1a2420;
}
html[data-theme="dark"] body {
  background: radial-gradient(circle at 15% -10%, #2a0f22 0%, transparent 45%),
              radial-gradient(circle at 85% 10%, #1c0e1a 0%, transparent 40%),
              radial-gradient(circle at 50% 100%, #200a18 0%, transparent 35%),
              #0a0609;
}
body { min-height: 100vh; transition: background-color .25s ease, color .25s ease; font-family: "Al-Quranos Arabic", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }

/* FONT STANDAR AL-QUR'AN: KFGQPC HAFS Uthmanic Script v2.0 (King Fahd Glorious Qur'an
   Printing Complex). File font disertakan apa adanya, tidak diubah (lihat
   /fonts/LICENSE-KFGQPC.txt). Dipakai untuk SEMUA teks Arab di aplikasi lewat variabel
   --font-arabic; Amiri/Traditional Arabic hanya cadangan bila font gagal dimuat. */
@font-face {
  font-family: 'KFGQPC Uthmanic Hafs V20';
  src: local('KFGQPC HAFS Uthmanic Script'), local('KFGQPC Uthmanic Script HAFS'),
       url('/fonts/UthmanicHafs_V20.ttf') format('truetype');
  font-display: swap;
}
/* Standar untuk SEMUA teks Arab (termasuk Arab yang terselip di jawaban AI, hadits, chat, form):
   family khusus dengan unicode-range hanya aktif untuk aksara Arab, sisanya tetap pakai font biasa. */
@font-face {
  font-family: 'Al-Quranos Arabic';
  src: local('KFGQPC HAFS Uthmanic Script'), local('KFGQPC Uthmanic Script HAFS'),
       url('/fonts/UthmanicHafs_V20.ttf') format('truetype');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
  font-display: swap;
}
:root { --font-arabic: 'KFGQPC Uthmanic Hafs V20', "Amiri", "Traditional Arabic", "Scheherazade New", serif; }
.arabic { font-family: var(--font-arabic); }
.arabic-mushaf {
  font-family: var(--font-arabic);
  line-height: 2.2;
}

/* ---------- Animasi & interaktivitas ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  50%      { transform: translateY(-14px) translateX(6px) rotate(3deg); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.fade-in-up { animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) both; }
.fade-in-up-1 { animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) .05s both; }
.fade-in-up-2 { animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) .12s both; }
.fade-in-up-3 { animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) .2s both; }

/* ---------- Transisi antar halaman — cepat & mulus, tanpa kedipan ---------- */
html { background-color: hsl(var(--b1)); } /* cegah kilatan putih polos sebelum body ke-style */
body {
  opacity: 0;
  animation: pageFadeIn .18s ease-out forwards;
}
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.page-leaving {
  opacity: 0 !important;
  transition: opacity .12s ease-in;
}

/* ---------- Cetak Handout Peserta — sembunyikan semua kecuali lembar handout ---------- */
@media print {
  body * { visibility: hidden; }
  #handoutCard, #handoutCard * { visibility: visible; }
  #handoutCard { position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none !important; }
}

.bg-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: 0.32;
  animation: floatSlow 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
html[data-theme="light"] .bg-blob { opacity: 0.18; }

/* Pola geometris Arab (bintang) yang berputar sangat pelan, di belakang
   konten hero — dibuat transparan supaya teks di atasnya tetap terbaca jelas */
.geo-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  animation: spinSlow 140s linear infinite;
  transform-origin: center;
}
html[data-theme="light"] .geo-pattern { opacity: 0.04; }

.hover-lift {
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
}

.btn, .card, .input, .select, .textarea { transition: all .18s ease; }
.btn:active { transform: scale(0.97); }

/* ---------- Batas kotak tegas & jelas (tidak polos) ---------- */
.card {
  border: 1.5px solid hsl(var(--bc) / 0.14);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
html[data-theme="dark"] .card {
  border-color: hsl(var(--bc) / 0.16);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.card.hover-lift:hover { border-color: hsl(var(--p) / 0.5); }

/* Ayat yang sedang diputar audionya (autoplay/manual) — efek "timbul" sama
   seperti hover, tapi dipaksa aktif terus selama ayat itu sedang dibacakan,
   supaya pengguna tahu persis ayat mana yang sedang berjalan. */
.ayat-playing {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.35) !important;
  border-color: hsl(var(--p) / 0.6) !important;
}

.input, .select, .textarea, .file-input {
  border-width: 1.5px !important;
  border-color: hsl(var(--bc) / 0.2) !important;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: hsl(var(--p)) !important;
}

.chat-bubble { border: 1.5px solid hsl(var(--bc) / 0.12); }
.chat-bubble-primary { border-color: hsl(var(--p) / 0.4); }

.navbar { border-bottom: 1px solid hsl(var(--bc) / 0.1); }
.btm-nav-quranos { border-top: 1.5px solid hsl(var(--bc) / 0.14) !important; background-color: hsl(var(--b2)) !important; opacity: 1 !important; box-shadow: 0 -4px 16px rgba(0,0,0,0.12); }

table.table { border: 1.5px solid hsl(var(--bc) / 0.12); border-radius: .5rem; overflow: hidden; }
table.table th, table.table td { border-bottom: 1px solid hsl(var(--bc) / 0.08); }

.alert { border-width: 1.5px !important; }

/* Offline/online indicator dot */
.status-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.status-dot.online { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.status-dot.offline { background: #f87171; box-shadow: 0 0 6px #f87171; }

/* Bottom nav (mobile) */
.btm-nav-quranos { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; }

[x-cloak] { display: none !important; }

/* ---------- Kerapian & simetri ---------- */
.navbar { flex-wrap: wrap; gap: .5rem; row-gap: .25rem; }
.card-title { line-height: 1.35; }
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Semua popup/modal/toast WAJIB solid, tidak transparan ---------- */
.modal-box {
  background-color: hsl(var(--b1)) !important;
  opacity: 1 !important;
  border: 1.5px solid hsl(var(--bc) / 0.14);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* Pemusatan modal yang presisi & bulletproof — tidak bergantung pada CSS
   bawaan DaisyUI yang beberapa kali terbukti tertimpa CDN lain di app ini.
   Modal selalu tepat di tengah viewport, di PC maupun mobile, dan tak
   pernah terpotong layar (dibatasi tinggi + bisa di-scroll sendiri). */
.modal.modal-open {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  padding: 1rem;
  overflow-y: auto;
}
.modal.modal-open .modal-box {
  position: relative !important;
  margin: auto !important;
  max-height: min(88vh, 100%);
  transform: none !important;
}
.modal.modal-open .modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1;
}

/* Varian "auto-fit" untuk boks Chat — ukuran pas mengikuti layar (besar di
   desktop, hampir penuh di HP karena layarnya memang kecil), TAPI tidak
   dipaksa 100vw/100vh seperti fullscreen murni — tetap ada jarak tipis dari
   tepi dan sudut membulat, supaya terasa seperti kotak, bukan menutupi
   seluruh aplikasi. */
.modal.modal-open.modal-chat .modal-box {
  width: min(94vw, 960px) !important;
  height: min(88vh, 700px) !important;
  max-width: min(94vw, 960px) !important;
  max-height: min(88vh, 700px) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}
.modal-backdrop {
  background-color: hsl(0 0% 0% / 0.5) !important;
}
.toast .alert {
  background-color: hsl(var(--b2)) !important;
  opacity: 1 !important;
  border: 1.5px solid hsl(var(--bc) / 0.16);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.alert { opacity: 1 !important; }
.dropdown-content { background-color: hsl(var(--b1)) !important; opacity: 1 !important; }

/* Teks di dalam popup selalu kontras & tidak menimpa elemen lain */
.modal-box, .toast .alert {
  color: hsl(var(--bc));
  line-height: 1.5;
}
.modal-box * , .toast .alert * { max-width: 100%; word-break: break-word; }
.modal-action { flex-wrap: wrap; gap: .5rem; }
.toast { max-width: min(92vw, 22rem); }

/* Mode gelap: teks sekunder dibuat tetap tegas (putih terang), bukan abu-abu
   pudar — permintaan eksplisit untuk keterbacaan maksimal di dark mode. */
html[data-theme="dark"] .text-base-content\/70,
html[data-theme="dark"] .text-base-content\/60,
html[data-theme="dark"] .text-base-content\/50,
html[data-theme="dark"] .text-base-content\/40 {
  color: hsl(var(--bc) / 0.9) !important;
}

/* Konflik specificity CDN: pastikan utility responsive Tailwind selalu menang
   atas base style komponen DaisyUI (.navbar/.btm-nav memaksa display:flex). */
.navbar.hidden { display: none !important; }
@media (min-width: 1024px) {
  .navbar.hidden.lg\:flex { display: flex !important; }
  .navbar.lg\:hidden { display: none !important; }
}
@media (min-width: 768px) {
  .btm-nav.md\:hidden { display: none !important; }
}

/* ---------- Perbaikan drawer sidebar mobile: implementasi sendiri, tidak
   bergantung pada CSS DaisyUI yang bisa tertimpa CDN Tailwind ---------- */
@media (max-width: 1023.98px) {
  .drawer-side {
    position: fixed !important;
    inset: 0 !important;
    z-index: 60 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    visibility: hidden;
    pointer-events: none;
  }
  .drawer-toggle:checked ~ .drawer-side {
    visibility: visible;
    pointer-events: auto;
  }
  .drawer-side .drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(0, 0, 0, 0) !important;
    transition: background-color .3s ease;
  }
  .drawer-toggle:checked ~ .drawer-side .drawer-overlay {
    background-color: rgba(0, 0, 0, 0.55) !important;
  }
  .drawer-side > aside {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    height: 100% !important;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .3s ease;
    background-color: hsl(var(--b2)) !important;
    opacity: 1 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
    z-index: 61 !important;
    overflow-y: auto;
  }
  .drawer-toggle:checked ~ .drawer-side > aside {
    transform: translateX(0);
  }
}

/* ---------- Autofit mobile/tablet: cegah scroll horizontal, pastikan
   popup/nav/intro selalu pas dalam satu layar ---------- */
html, body { overflow-x: hidden; max-width: 100vw; }
* { box-sizing: border-box; }

.modal-box {
  max-height: 88vh;
  overflow-y: auto;
}

.btm-nav-quranos {
  padding-bottom: env(safe-area-inset-bottom, 0);
  height: calc(4rem + env(safe-area-inset-bottom, 0));
}
body:has(.btm-nav-quranos) { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0)); }

.dropdown-content { max-width: min(88vw, 20rem); }
.dropdown-content.lang-dropdown { max-width: 92vw !important; width: 20rem !important; }

#introSplash, #hintsModal, #pwaInstallPopup {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Kontainer utama tidak boleh lebih lebar dari viewport */
.navbar, .drawer, main { max-width: 100%; }

@media (max-width: 480px) {
  .card-body { padding: 1rem; }
  .stat { padding: 0.75rem; }
  .btn.btn-sm { font-size: 0.8rem; }
}

/* Perbaikan boks statistik dashboard (.stat DaisyUI menimpa bg-base-200
   Tailwind, sama seperti kasus .navbar/.card sebelumnya) */
.stat.bg-base-200 {
  background-color: hsl(var(--b2)) !important;
  border: 1.5px solid hsl(var(--bc) / 0.14) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 1rem 1.25rem !important;
}
html[data-theme="dark"] .stat.bg-base-200 { box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
/* .stats-horizontal/.stats-vertical DaisyUI tetap dipakai apa adanya di
   halaman publik (beranda) — tidak perlu di-override, itu sumber bug
   sebelumnya yang membuat statistik landing tampak vertikal berjejer. */

/* ---------- Penguatan kontras mode gelap (bukan sekadar variabel CSS,
   tapi properti warna langsung, supaya tidak ada celah tertimpa apa pun) ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .chat-bubble,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] main,
html[data-theme="dark"] .drawer-side aside {
  color: #f5f5f5 !important;
}
html[data-theme="dark"] .chat-bubble.bg-base-200,
html[data-theme="dark"] .card.bg-base-200,
html[data-theme="dark"] .card.bg-base-300 {
  background-color: hsl(var(--b2)) !important;
  color: #f5f5f5 !important;
}
html[data-theme="dark"] .chat-bubble-primary {
  background-color: hsl(var(--p)) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select {
  background-color: hsl(var(--b1)) !important;
  color: #f5f5f5 !important;
  border-color: hsl(0 0% 100% / 0.25) !important;
}
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder {
  color: hsl(0 0% 100% / 0.45) !important;
}
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-outline {
  color: #f5f5f5 !important;
}
html[data-theme="dark"] .btn-primary {
  color: #ffffff !important;
}

/* Checkbox polos (tanpa modifier warna seperti checkbox-primary) menggambar
   tanda centang lewat formula gradient bawaan DaisyUI yang memakai variabel
   --chkbg/--chkfg (default: base-content/base-100). Di tema gelap custom ini
   kombinasinya jadi kurang kontras/kurang terlihat saat dicentang dibanding
   tema terang. Override langsung ke --chkbg/--chkfg di sini (bukan
   background-color biasa, karena background-image gradient DaisyUI akan
   menimpanya) supaya status "dicentang" SELALU terlihat jelas & berwarna di
   kedua tema, dengan warna primer aplikasi (magenta di gelap, hijau di terang). */
.checkbox {
  --chkbg: hsl(var(--p));
  --chkfg: hsl(var(--pc));
}
.checkbox:checked,
.checkbox[aria-checked="true"] {
  border-color: hsl(var(--p)) !important;
}

/* ---------- Popup/notif dipusatkan di mobile, bukan mepet pojok ---------- */
@media (max-width: 640px) {
  .toast {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    bottom: 5rem !important; /* di atas bottom-nav supaya tidak tertutup */
    width: 92vw !important;
    max-width: 92vw !important;
  }
  .modal-box { margin: 0 auto; }
}