/* Global dark mode — toggled via html.a11y-dark (accessibility panel) */

html.a11y-dark {
  --wd-bg: #0f172a;
  --wd-surface: #1e293b;
  --wd-surface-2: #253347;
  --wd-surface-3: #1a2638;
  --wd-border: #334155;
  --wd-text: #e2e8f0;
  --wd-text-muted: #94a3b8;
  --wd-text-dim: #7d8a99;
  --wd-green: #4ade80;
  --wd-green-soft: #1a3d2f;
  --wd-green-hover: #166534;
}

/* ── Dashboard shell ─────────────────────────────────────────────────────── */

html.a11y-dark .wd-body,
html.a11y-dark .wd-body-home,
html.a11y-dark .wd-body-auth,
html.a11y-dark .wd-body-page,
html.a11y-dark .wd-body-dashboard,
html.a11y-dark .wd-body-quran,
html.a11y-dark .wd-body-hifz,
html.a11y-dark .wd-body-tilawa,
html.a11y-dark .wd-body-translation {
  background: var(--wd-bg) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-sidebar {
  background: var(--wd-surface) !important;
  border-inline-end-color: var(--wd-border) !important;
}

html.a11y-dark .wd-main,
html.a11y-dark .wd-main-quran,
html.a11y-dark .wd-main-hifz,
html.a11y-dark .wd-content,
html.a11y-dark .wd-content-quran,
html.a11y-dark .wd-content-hifz,
html.a11y-dark .wd-quran-layout,
html.a11y-dark .wd-hifz-layout,
html.a11y-dark .wd-hifz-viewport,
html.a11y-dark .wd-hifz-tools-top,
html.a11y-dark .wd-quran-tools-top,
html.a11y-dark .wd-home-minimal,
html.a11y-dark .wd-auth-content {
  background: var(--wd-bg) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-sidebar-toggle,
html.a11y-dark .wd-quran-tools-toggle,
html.a11y-dark .wd-sidebar-close {
  background: var(--wd-surface-2) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-nav a {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-nav a:hover {
  background: var(--wd-surface-2) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-nav a.is-active {
  background: var(--wd-green-soft) !important;
  color: var(--wd-green) !important;
}

html.a11y-dark .wd-sidebar-foot {
  border-top-color: var(--wd-border) !important;
}

html.a11y-dark .wd-sidebar-foot > a {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-sidebar-foot > a:hover {
  background: var(--wd-surface-2) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-sidebar-lang .wird-lang-button {
  background: transparent !important;
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-sidebar-lang .wird-lang-button:hover {
  background: var(--wd-surface-2) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-user {
  background: var(--wd-surface) !important;
}

html.a11y-dark .wd-user strong {
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-user small {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-topbar {
  background: var(--wd-surface) !important;
  border-bottom-color: var(--wd-border) !important;
}

html.a11y-dark .wd-search {
  background: var(--wd-surface-2) !important;
  border-color: transparent !important;
}

html.a11y-dark .wd-search:focus-within {
  background: var(--wd-surface) !important;
  border-color: rgba(74, 222, 128, 0.35) !important;
}

html.a11y-dark .wd-search i,
html.a11y-dark .wd-search input {
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-search input::placeholder {
  color: var(--wd-text-dim) !important;
}

html.a11y-dark .wd-icon-btn,
html.a11y-dark .wd-btn-main-site {
  background: var(--wd-surface-2) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-icon-btn:hover,
html.a11y-dark .wd-btn-main-site:hover {
  background: var(--wd-green-soft) !important;
  color: var(--wd-green) !important;
}

html.a11y-dark .wd-icon-btn-logout {
  color: #f87171 !important;
}

html.a11y-dark .wd-icon-btn-logout:hover {
  background: rgba(127, 29, 29, 0.35) !important;
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
}

html.a11y-dark .wd-page-head h1,
html.a11y-dark .wd-page-head p,
html.a11y-dark .wd-chart-head h2,
html.a11y-dark .wd-table-section h2,
html.a11y-dark .wd-newsletter h2,
html.a11y-dark .wd-newsletter p {
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-stat,
html.a11y-dark .wd-chart-card,
html.a11y-dark .wd-newsletter,
html.a11y-dark .wd-table,
html.a11y-dark .wd-toast {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-stat strong,
html.a11y-dark .wd-table-user strong {
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-stat small,
html.a11y-dark .wd-stat-top,
html.a11y-dark .wd-table-user small,
html.a11y-dark .wd-table-meta,
html.a11y-dark .wd-table-date,
html.a11y-dark .wd-empty {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-table-row {
  border-bottom-color: var(--wd-border) !important;
}

html.a11y-dark .wd-pill {
  background: var(--wd-surface-2) !important;
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-chart-labels {
  color: var(--wd-text-dim) !important;
}

html.a11y-dark .wd-newsletter input,
html.a11y-dark .wd-home-newsletter input {
  background: var(--wd-surface-2) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

/* ── Home page ───────────────────────────────────────────────────────────── */

html.a11y-dark .wd-home-techniques-title,
html.a11y-dark .wd-home-reciters-title,
html.a11y-dark .wd-home-footer-meta {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-home-technique,
html.a11y-dark .wd-home-stats .wd-stat,
html.a11y-dark .wd-home-app-card {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-home-technique:hover {
  background: var(--wd-surface-2) !important;
  border-color: rgba(74, 222, 128, 0.35) !important;
}

html.a11y-dark .wd-home-technique span,
html.a11y-dark .wd-home-reciter-name {
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-home-reciters-arrow {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-home-reciters-arrow:hover {
  background: var(--wd-surface-2) !important;
  color: var(--wd-green) !important;
}

html.a11y-dark .wd-home-reciter-fallback {
  background: var(--wd-surface-2) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-home-app-btn {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-home-app-btn:hover {
  background: var(--wd-surface-2) !important;
}

html.a11y-dark .wd-home-footer-divider {
  background: var(--wd-border) !important;
}

html.a11y-dark .wd-home-footer-meta a:hover {
  color: var(--wd-green) !important;
}

/* ── Auth ────────────────────────────────────────────────────────────────── */

html.a11y-dark .wd-auth-card,
html.a11y-dark .wd-page-card {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35) !important;
}

html.a11y-dark .wd-auth-title,
html.a11y-dark .wd-auth-label {
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-auth-tabs {
  background: var(--wd-surface-2) !important;
}

html.a11y-dark .wd-auth-tab {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-auth-tab.is-active {
  background: var(--wd-surface) !important;
  color: var(--wd-green) !important;
}

html.a11y-dark .wd-auth-input,
html.a11y-dark .wd-auth-password {
  background: var(--wd-surface-2) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-auth-password .wd-auth-input {
  background: transparent !important;
}

html.a11y-dark .wd-auth-password-toggle {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-auth-password-toggle:hover {
  background: var(--wd-surface) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-auth-link {
  color: var(--wd-green) !important;
}

/* ── Language modal ──────────────────────────────────────────────────────── */

html.a11y-dark #wirdLanguageDropdownRoot.wird-lang-modal-root {
  background: rgba(2, 6, 23, 0.72) !important;
}

html.a11y-dark #wirdLanguageDropdownRoot .wird-lang-modal,
html.a11y-dark .wird-lang-fallback-inner.wird-lang-modal {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
}

html.a11y-dark .wird-lang-modal-title {
  color: var(--wd-text) !important;
}

html.a11y-dark .wird-lang-modal-close {
  background: var(--wd-surface-2) !important;
  color: var(--wd-text-muted) !important;
}

html.a11y-dark #wirdLanguageDropdownRoot .wird-lang-tile,
html.a11y-dark .wird-lang-fallback .wird-lang-tile {
  background: var(--wd-surface-2) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark #wirdLanguageDropdownRoot .wird-lang-tile:hover,
html.a11y-dark .wird-lang-fallback .wird-lang-tile:hover {
  background: var(--wd-surface) !important;
  border-color: rgba(74, 222, 128, 0.35) !important;
}

html.a11y-dark #wirdLanguageDropdownRoot .wird-lang-tile.is-active,
html.a11y-dark .wird-lang-fallback .wird-lang-tile.is-active {
  background: var(--wd-green-soft) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  color: var(--wd-green) !important;
}

/* ── Quran / translation chrome ──────────────────────────────────────────── */

html.a11y-dark .quran-sel-trigger,
html.a11y-dark .quran-tool-chip,
html.a11y-dark .quran-tool-toggle,
html.a11y-dark .quran-fihris-tab,
html.a11y-dark .quran-sel-list-item,
html.a11y-dark .quran-sel-search,
html.a11y-dark .quran-index-tab,
html.a11y-dark .quran-index-modal > div,
html.a11y-dark .wd-quran-info-panel,
html.a11y-dark .quran-word-meanings-rail,
html.a11y-dark .quran-thematic-rail,
html.a11y-dark #wordPanel,
html.a11y-dark #quranThematicPanel {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .quran-sel-panel {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

html.a11y-dark .quran-sel-trigger:hover,
html.a11y-dark .quran-sel-list-item:hover,
html.a11y-dark .quran-sel-list-item.is-active,
html.a11y-dark .quran-fihris-tab.is-active {
  background: var(--wd-surface-2) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .quran-sel-panel-title,
html.a11y-dark .wd-quran-info-panel-head {
  color: var(--wd-green) !important;
}

html.a11y-dark .quran-sel-trigger-icon,
html.a11y-dark .quran-sel-close {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-quran-viewport,
html.a11y-dark #mushafArea,
html.a11y-dark #tafsirArea,
html.a11y-dark #centerColumn {
  background: var(--wd-bg) !important;
}

html.a11y-dark .translation-lang-flags,
html.a11y-dark .trans-flag-btn,
html.a11y-dark .translation-surah-panel,
html.a11y-dark .translation-book-shell,
html.a11y-dark .translation-book-toolbar,
html.a11y-dark .translation-book-btn,
html.a11y-dark .translation-page-scroll,
html.a11y-dark .translation-page-content,
html.a11y-dark .translation-page-pill,
html.a11y-dark .translation-playback-row,
html.a11y-dark .wd-translation-playback-dock,
html.a11y-dark .wd-quran-float-btn {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .translation-book-btn:hover,
html.a11y-dark .trans-flag-btn.is-active {
  background: var(--wd-surface-2) !important;
  color: var(--wd-green) !important;
}

html.a11y-dark .translation-page-content .translation-text,
html.a11y-dark .translation-page-content .translation-line,
html.a11y-dark .translation-page-content .translation-surah-heading,
html.a11y-dark .tafsir-page-scroll,
html.a11y-dark .tafsir-text {
  color: var(--wd-text) !important;
}

/* ── Hifz chrome ─────────────────────────────────────────────────────────── */

html.a11y-dark .hifz-nav-btn,
html.a11y-dark .hifz-bookmark-btn,
html.a11y-dark .hifz-toolbar-pill-btn,
html.a11y-dark .hifz-inline-audio,
html.a11y-dark .hifz-inline-select,
html.a11y-dark .hifz-options-panel,
html.a11y-dark .hifz-technique-card,
html.a11y-dark .hifz-recitation-panel {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .hifz-inline-select:hover,
html.a11y-dark .hifz-nav-btn:hover,
html.a11y-dark .hifz-toolbar-pill-btn:hover {
  background: var(--wd-surface-2) !important;
}

html.a11y-dark .hifz-fullscreen-label,
html.a11y-dark .hifz-volume-icon {
  color: var(--wd-text-muted) !important;
}

/* ── Tilawa ──────────────────────────────────────────────────────────────── */

html.a11y-dark .wd-tilawa-content,
html.a11y-dark .wd-tilawa-toolbar-reciter,
html.a11y-dark .wd-tilawa-qari-card,
html.a11y-dark .wd-tilawa-search-wrap,
html.a11y-dark .wd-tilawa-listen-header,
html.a11y-dark .wd-tilawa-listen-body,
html.a11y-dark .wd-tilawa-player,
html.a11y-dark .wd-tilawa-player-btn,
html.a11y-dark .wd-tilawa-autoplay-gate,
html.a11y-dark .wd-tilawa-autoplay-btn,
html.a11y-dark .wd-tilawa-surah-row,
html.a11y-dark .tilawa-mushaf-btn:not(.is-active) {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-tilawa-qari-card:hover,
html.a11y-dark .wd-tilawa-surah-row:hover,
html.a11y-dark .wd-tilawa-player-btn:hover {
  background: var(--wd-surface-2) !important;
}

html.a11y-dark .wd-tilawa-qari-name,
html.a11y-dark .wd-tilawa-player-title,
html.a11y-dark .wd-tilawa-listen-reciter-name {
  color: var(--wd-text) !important;
}

html.a11y-dark .wd-tilawa-qari-tag,
html.a11y-dark .wd-tilawa-player-error {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .wd-tilawa-qari-avatar-fallback {
  background: var(--wd-green-soft) !important;
  border-color: var(--wd-border) !important;
}

/* ── Legacy navbar pages (about, contact, privacy) ─────────────────────── */

html.a11y-dark .site-input,
html.a11y-dark .site-card,
html.a11y-dark .site-panel,
html.a11y-dark .site-surface {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .site-text {
  color: var(--wd-text) !important;
}

html.a11y-dark .site-text-muted {
  color: var(--wd-text-muted) !important;
}

html.a11y-dark .site-border {
  border-color: var(--wd-border) !important;
}

html.a11y-dark .app-wrapper,
html.a11y-dark .app-content,
html.a11y-dark main.container {
  background: var(--wd-bg) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .wird-mobile-menu,
html.a11y-dark .wird-mobile-menu-header {
  background: var(--wd-bg) !important;
  border-color: var(--wd-border) !important;
}

/* ── Keep media & brand greens readable ──────────────────────────────────── */

html.a11y-dark .wd-btn-green,
html.a11y-dark .wd-user-avatar,
html.a11y-dark .wd-topbar-avatar,
html.a11y-dark .quran-badge-chip,
html.a11y-dark #quranBadgeChip,
html.a11y-dark #tafsirBadgeChip,
html.a11y-dark .site-btn-primary {
  color: #fff !important;
}

html.a11y-dark img.mushaf-page-img,
html.a11y-dark .wd-brand img,
html.a11y-dark .wd-home-reciter-card img,
html.a11y-dark .wd-table-user img,
html.a11y-dark .wd-tilawa-qari-avatar,
html.a11y-dark .wd-tilawa-listen-reciter-img {
  filter: none !important;
}

/* ── Modals & popovers ───────────────────────────────────────────────────── */

html.a11y-dark .quran-index-modal,
html.a11y-dark #dailyReadingModal > div,
html.a11y-dark #newKhatmaModal > div,
html.a11y-dark .modal-panel,
html.a11y-dark [id$="Modal"] .rounded-2xl,
html.a11y-dark [id$="Popover"] {
  background: var(--wd-surface) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}

html.a11y-dark .quran-index-modal button,
html.a11y-dark .modal-panel button:not(.wd-btn-green) {
  background: var(--wd-surface-2) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text) !important;
}