/* ============================================================
   NoorAlFajr — Dark Mode
   ============================================================ */

[data-theme="dark"] {
  --color-bg:           #0f1923;
  --color-bg-card:      #1a2433;
  --color-bg-sidebar:   #111820;
  --color-border:       rgba(255,255,255,0.08);
  --color-text:         #e2e8f0;
  --color-text-muted:   #94a3b8;
  --color-text-light:   #64748b;
  --color-link:         var(--primary-400);
  --color-link-hover:   var(--primary-300);
}

[data-theme="dark"] .site-header {
  background: rgba(15,25,35,0.95);
  border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .card,
[data-theme="dark"] .surah-card,
[data-theme="dark"] .ayah-card,
[data-theme="dark"] .hadith-card,
[data-theme="dark"] .dua-card,
[data-theme="dark"] .adhkar-item {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea {
  background: var(--color-bg-sidebar);
  border-color: rgba(255,255,255,0.1);
  color: var(--color-text);
}
[data-theme="dark"] .input:focus,
[data-theme="dark"] .select:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
[data-theme="dark"] .nav-link { color: var(--color-text-muted); }
[data-theme="dark"] .nav-link:hover { background: rgba(16,185,129,0.1); color: var(--primary-400); }
[data-theme="dark"] .nav-link.active { background: rgba(16,185,129,0.15); color: var(--primary-300); }
[data-theme="dark"] .site-sidebar { background: var(--color-bg-sidebar); border-right-color: var(--color-border); }
[data-theme="dark"] .bottom-nav { background: rgba(17,24,39,0.97); border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .tabs { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .tab-btn.active { background: var(--color-bg-card); color: var(--primary-400); }
[data-theme="dark"] .badge-green  { background: rgba(16,185,129,0.15); color: var(--primary-300); }
[data-theme="dark"] .badge-gold   { background: rgba(245,158,11,0.15);  color: var(--gold-300); }
[data-theme="dark"] .badge-gray   { background: rgba(255,255,255,0.08); color: var(--color-text-muted); }
[data-theme="dark"] .alert-success { background: rgba(16,185,129,0.1); color: var(--primary-300); }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.1);  color: var(--gold-300); }
[data-theme="dark"] .alert-error   { background: rgba(239,68,68,0.1);   color: #fca5a5; }
[data-theme="dark"] .name-card-back { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
[data-theme="dark"] .compass-rose { background: radial-gradient(circle, var(--color-bg-card) 0%, var(--color-bg-sidebar) 100%); border-color: rgba(16,185,129,0.2); }
[data-theme="dark"] .dua-card .dua-arabic { background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(245,158,11,0.05)); }
[data-theme="dark"] .gold-frame { border-color: rgba(245,158,11,0.3); }
[data-theme="dark"] .gold-frame::before { background: var(--color-bg-card); }
[data-theme="dark"] .progress-bar { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .header-btn { color: var(--color-text-muted); }
[data-theme="dark"] .header-btn:hover { background: rgba(16,185,129,0.1); color: var(--primary-300); }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1e2d3d 25%, #233040 50%, #1e2d3d 75%); background-size: 200% 100%; }
[data-theme="dark"] .toast { background: var(--gray-700); }
[data-theme="dark"] .adhkar-item.done { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg-sidebar); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(16,185,129,0.3); }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6 { color: var(--color-text); }
[data-theme="dark"] .quran-text { color: #e2e8f0; }
[data-theme="dark"] .logo-text  { color: var(--primary-300); }
[data-theme="dark"] ::selection { background-color: rgba(16,185,129,0.3); color: var(--primary-100); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --color-bg:           #0f1923;
    --color-bg-card:      #1a2433;
    --color-bg-sidebar:   #111820;
    --color-border:       rgba(255,255,255,0.08);
    --color-text:         #e2e8f0;
    --color-text-muted:   #94a3b8;
    --color-text-light:   #64748b;
  }
}