/* =============================================================
   SalatiPal — Quran reader: dark-mode readability + control polish
   Scope: body[data-sp-route="quran"].  Night flag: body[data-sp-qnight]
          (set by quran-darkfix.js when verse text renders white).
   Tasks:
     #1 selected verse readable in night mode
     #3 per-verse play button contrast (both modes)
     #4 top-bar reader buttons + download buttons polish
   ( #2 offline-always-light is handled by a bundle edit, not here. )
   Safe to remove: drop the <link>/<script> from index.html.
   ============================================================= */

/* ---- #1 Verse-highlight readability in night mode ---------------
   Both the currently-RECITING verse (theme highlightBg — green/mint)
   and the TAP-SELECTED verse (buttonAccent — light blue) get a LIGHT
   inline background on their ayah row, while the Arabic text is forced
   white → white-on-light = unreadable. quran-darkfix.js measures each
   highlighted row against the dark page and tags the unreadable ones
   with .sp-hl-night, plus .sp-hl-sel (selected) / .sp-hl-play (reciting)
   to keep the hue. Repaint each with a readable translucent highlight.
   (Light mode keeps the light highlight + dark text, which is fine.) */
body[data-sp-route="quran"][data-sp-qnight] .sp-hl-night {
  border-radius: 8px !important;
}
/* NIGHT-MODE ONLY: repaint the verse highlight to a SOLID DARK-BROWN box
   with cream text. In day/normal mode we do NOT tag verses, so the app's
   native GREEN highlight + green play button stay exactly as-is (user
   request). In night mode the green/light highlight under white Arabic text
   is unreadable, so JS tags the highlighted ayah (selected OR reciting,
   Surah AND Page mode) .sp-hl-sel and this paints it dark brown. The
   per-verse play button keeps its green via rule #3 below, in both modes. */
body[data-sp-route="quran"][data-sp-qnight] .sp-hl-sel,
body[data-sp-route="quran"][data-sp-qnight] .sp-hl-play {
  background-color: #3b2412 !important;                            /* dark brown */
  background-image: none !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(124, 86, 48, 0.65) !important;  /* warm brown rim */
}
body[data-sp-route="quran"][data-sp-qnight] .sp-hl-sel,
body[data-sp-route="quran"][data-sp-qnight] .sp-hl-sel *,
body[data-sp-route="quran"][data-sp-qnight] .sp-hl-play,
body[data-sp-route="quran"][data-sp-qnight] .sp-hl-play * {
  color: #fdf6e3 !important;                                       /* warm cream — max contrast */
}

/* ---- #3 Per-verse play button contrast (both light & dark) ------
   The idle button used linear-gradient(primary, accent) but `accent`
   is undefined in the theme → the gradient is invalid → no fill, just
   a faint blue-bordered glyph (hard to see in both modes). Give the
   IDLE (Play) button a solid high-contrast green fill with a white
   icon. The PLAYING (Pause) button keeps its amber gradient; we only
   guarantee its glyph is white. */
body[data-sp-route="quran"] button[title="Play Verse Recitation"] {
  background: #16a34a !important;
  border-color: #15803d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
  opacity: 1 !important;
}
body[data-sp-route="quran"] button[title="Play Verse Recitation"]:hover {
  background: #15893f !important;
}
body[data-sp-route="quran"] button[title="Play Verse Recitation"] svg,
body[data-sp-route="quran"] button[title="Pause Verse Recitation"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
}

/* ---- #4 Top-bar reader buttons ----------------------------------
   `.sp-reader-glass-btn` (Chapters, close, etc.) shipped with NO CSS
   at all, so they rendered as bare outline buttons. Give them a real
   pill style with a comfortable 40px touch target, in both modes. */
body[data-sp-route="quran"] .sp-reader-glass-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: rgba(0, 102, 204, 0.10) !important;
  border: 1px solid rgba(0, 102, 204, 0.28) !important;
  color: #0b63c4 !important;
  transition: background-color .15s ease, transform .08s ease,
              box-shadow .15s ease !important;
}
body[data-sp-route="quran"] .sp-reader-glass-btn:hover {
  background: rgba(0, 102, 204, 0.18) !important;
}
body[data-sp-route="quran"] .sp-reader-glass-btn:active {
  transform: scale(0.94) !important;
}
body[data-sp-route="quran"] .sp-reader-glass-btn svg {
  width: 18px !important;
  height: 18px !important;
}
/* night-mode variant for the glass buttons (white-on-dark) */
body[data-sp-route="quran"][data-sp-qnight] .sp-reader-glass-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #e8eefc !important;
}

/* ---- #4 Download buttons in the reader top bar ------------------ */
body[data-sp-route="quran"] button[title="Download offline translations"],
body[data-sp-route="quran"] button[title="Download offline recitations"] {
  height: 40px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) !important;
  font-weight: 600 !important;
}
body[data-sp-route="quran"] button[title="Download offline translations"]:active,
body[data-sp-route="quran"] button[title="Download offline recitations"]:active {
  transform: scale(0.96) !important;
}

/* ---- #2 Offline Downloads modal: always light --------------------
   The reader's night mode also darkens the Offline Downloads modal,
   which the user wants kept light. The JS tags the modal panel with
   .sp-offline-modal; here we force the Tailwind dark utilities the
   bundle applies inside it back to their light equivalents. Scoped to
   the modal only, so the reader page is unaffected. */
.sp-offline-modal,
.sp-offline-modal .bg-gray-900,
.sp-offline-modal .bg-gray-800 {
  background-color: #ffffff !important;
}
.sp-offline-modal .bg-gray-700 {
  background-color: #f3f4f6 !important;
}
.sp-offline-modal .bg-blue-900\/50 {
  background-color: #eff6ff !important;
}
.sp-offline-modal,
.sp-offline-modal .text-white,
.sp-offline-modal .text-gray-100,
.sp-offline-modal .text-gray-200 {
  color: #111827 !important;
}
.sp-offline-modal .text-gray-400,
.sp-offline-modal .text-gray-300 {
  color: #4b5563 !important;
}
.sp-offline-modal .border-gray-700,
.sp-offline-modal .border-gray-600 {
  border-color: #e5e7eb !important;
}
/* keep the blue "Back" link and colored badges legible on white */
.sp-offline-modal .text-blue-400 { color: #2563eb !important; }

/* ---- #5 2026-06-02 Quran top buttons: bigger + more breathing room ----
   Both the mobile pair (title="Offline translations" + its adjacent dark
   toggle, no title) and the desktop pair sat at 32px with an 8px gap →
   cramped & small. Bump to ~44px touch targets, larger icons, wider gap. */
body[data-sp-route="quran"] button[title="Offline translations"],
body[data-sp-route="quran"] button[title="Offline translations"] + button,
body[data-sp-route="quran"] button[title="Download offline translations"],
body[data-sp-route="quran"] button[title="Download offline recitations"],
body[data-sp-route="quran"] button[title="Toggle Dark Mode"] {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
}
body[data-sp-route="quran"] button[title="Offline translations"],
body[data-sp-route="quran"] button[title="Offline translations"] + button,
body[data-sp-route="quran"] button[title="Toggle Dark Mode"] {
  width: 42px !important;
  min-width: 42px !important;
}
/* widen the gap between the offline & dark-mode buttons (mobile + desktop) */
body[data-sp-route="quran"] button[title="Offline translations"] + button,
body[data-sp-route="quran"] button[title="Toggle Dark Mode"] {
  margin-left: 8px !important;
}
body[data-sp-route="quran"] button[title="Offline translations"] svg,
body[data-sp-route="quran"] button[title="Offline translations"] + button svg,
body[data-sp-route="quran"] button[title="Toggle Dark Mode"] svg,
body[data-sp-route="quran"] button[title="Download offline translations"] svg,
body[data-sp-route="quran"] button[title="Download offline recitations"] svg {
  width: 19px !important;
  height: 19px !important;
}

/* ---- #3 2026-06-02 Offline Downloads: unify accents to emerald green ----
   The modal already uses emerald/green for most accents; a few blue accents
   remained (links, badges, info panel, selected states). Flip them to emerald
   so the whole download manager reads as one emerald-green theme. (These come
   AFTER the "keep blue Back link" rule above, so they win.) Scoped to modal. */
.sp-offline-modal .text-blue-200,
.sp-offline-modal .text-blue-300,
.sp-offline-modal .text-blue-400,
.sp-offline-modal .text-blue-500,
.sp-offline-modal .text-blue-600,
.sp-offline-modal .text-blue-700 {
  color: #059669 !important;             /* emerald-600 */
}
.sp-offline-modal .bg-blue-600,
.sp-offline-modal .bg-blue-500 {
  background-color: #059669 !important;
  border-color: #047857 !important;
}
.sp-offline-modal .bg-blue-900\/50 {
  background-color: #ecfdf5 !important;  /* emerald-50 tint */
}
.sp-offline-modal .border-blue-200,
.sp-offline-modal .border-blue-300 {
  border-color: #a7f3d0 !important;      /* emerald-200 */
}
.sp-offline-modal .ring-blue-500\/20 { --tw-ring-color: rgba(16,185,129,.2) !important; }
/* tab/segmented gradients in the modal that were blue→cyan → emerald→green */
.sp-offline-modal .from-blue-500 { --tw-gradient-from: #10b981 var(--tw-gradient-from-position) !important; }
.sp-offline-modal .to-cyan-500   { --tw-gradient-to:   #059669 var(--tw-gradient-to-position) !important; }
.sp-offline-modal .from-blue-600 { --tw-gradient-from: #059669 var(--tw-gradient-from-position) !important; }
.sp-offline-modal .to-cyan-600   { --tw-gradient-to:   #047857 var(--tw-gradient-to-position) !important; }

/* #3 cont. — the modal's Download buttons are default-variant <Button> from the
   main bundle = `bg-primary` (blue). Recolor primary→emerald INSIDE the modal
   only, so every Download button / primary link / accent goes emerald-green. */
.sp-offline-modal .bg-primary { background-color: #059669 !important; }
.sp-offline-modal .bg-primary:hover { background-color: #047857 !important; }
.sp-offline-modal .text-primary { color: #059669 !important; }
.sp-offline-modal .border-primary { border-color: #059669 !important; }
.sp-offline-modal .ring-primary { --tw-ring-color: #059669 !important; }
/* selected-state rings/badges sometimes use blue utilities too */
.sp-offline-modal .bg-blue-100 { background-color: #d1fae5 !important; }
.sp-offline-modal .bg-blue-50  { background-color: #ecfdf5 !important; }