/*
 * ═══════════════════════════════════════════════════════════
 *  SIRAT-UL QALB — NIGHT MODE DESIGN SYSTEM
 *  Elevation-based dark gray surfaces (Material Design inspired)
 *
 *  Surface Elevation Scale:
 *   --dm-base:    #1a1a1a  → App background (lowest)
 *   --dm-01:      #212121  → Sidebar / drawer background
 *   --dm-02:      #272727  → Cards, panels (1dp elevation)
 *   --dm-03:      #2e2e2e  → Raised cards, modals (2dp elevation)
 *   --dm-04:      #323232  → Hover/active states (4dp elevation)
 *   --dm-05:      #383838  → Tooltips, top surfaces (8dp elevation)
 *   --dm-header:  #1e1e1e  → Sticky header (slight raise)
 *   --dm-text:    #e8e8e8  → Primary text
 *   --dm-muted:   #9a9a9a  → Secondary / muted text
 *   --dm-subtle:  #5a5a5a  → Disabled / placeholder text
 *   --dm-border:  rgba(255,255,255,0.06) → Subtle dividers
 *   --dm-accent:  #34d399  → Emerald accent (slightly lighter for dark bg)
 *   --dm-gold:    #f0c060  → Gold accent
 * ═══════════════════════════════════════════════════════════
 */

/* ── DARK MODE CSS CUSTOM PROPERTIES ─────────────────────── */
body.dark {
    --dm-base:    #1a1a1a;
    --dm-01:      #212121;
    --dm-02:      #272727;
    --dm-03:      #2e2e2e;
    --dm-04:      #323232;
    --dm-05:      #383838;
    --dm-header:  #1e1e1e;
    --dm-text:    #e8e8e8;
    --dm-muted:   #9a9a9a;
    --dm-subtle:  #5a5a5a;
    --dm-border:  rgba(255, 255, 255, 0.07);
    --dm-accent:  #34d399;
    --dm-gold:    #f0c060;
}

/* ── BASE BACKGROUND ──────────────────────────────────────── */
body.dark {
    background-color: var(--dm-base) !important;
    background-image: none !important;
    color: var(--dm-text) !important;
}

body.dark::before {
    background-image: none !important;
    display: none;
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
body.dark #main-sidebar {
    background: linear-gradient(180deg, var(--dm-01) 0%, #1c1c1c 100%) !important;
    border-right-color: var(--dm-border) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}

body.dark #main-sidebar .p-8 {
    border-bottom-color: var(--dm-border) !important;
}

/* Sidebar bottom version text */
body.dark #main-sidebar .border-t {
    border-top-color: var(--dm-border) !important;
}

/* Sidebar nav links */
body.dark #main-sidebar .nav-link {
    color: var(--dm-muted) !important;
}

body.dark #main-sidebar .nav-link:hover,
body.dark #main-sidebar .nav-link.active {
    background-color: rgba(52, 211, 153, 0.08) !important;
    color: var(--dm-accent) !important;
    border-left-color: var(--dm-accent) !important;
}

/* ── MAIN SCROLL AREA ─────────────────────────────────────── */
body.dark #main-scroll-area {
    background-color: var(--dm-base) !important;
}

/* ── STICKY HEADER ────────────────────────────────────────── */
body.dark header.sticky {
    background: rgba(30, 30, 30, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom-color: var(--dm-border) !important;
    box-shadow: 0 1px 0 var(--dm-border), 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Header clock & date */
body.dark #hero-local-time {
    color: var(--dm-text) !important;
}

body.dark #hero-greg-date {
    color: var(--dm-accent) !important;
    opacity: 0.9 !important;
}

/* Header dropdowns */
body.dark select,
body.dark select option {
    background-color: var(--dm-03) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* ── THEME TOGGLE BUTTON ──────────────────────────────────── */
body.dark #theme-toggle {
    background-color: var(--dm-04) !important;
    border-color: rgba(52, 211, 153, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark #theme-toggle:hover {
    background-color: var(--dm-05) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

/* ── ANIME CARDS (Elevated Surfaces) ─────────────────────── */
body.dark .anime-card {
    background: var(--dm-02) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

body.dark .anime-card:hover {
    background: var(--dm-04) !important;
    border-color: rgba(52, 211, 153, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(52, 211, 153, 0.1) !important;
    transform: translateY(-4px) !important;
}

/* ── BG-WHITE / BG-[#fcfdfd] CARD OVERRIDES ──────────────── */
body.dark [class*="bg-white"],
body.dark [class*="bg-[#fcfdfd]"],
body.dark [class*="bg-[#f8fafc]"],
body.dark [class*="bg-[#f5f2eb]"] {
    background-color: var(--dm-02) !important;
}

body.dark .bg-white,
body.dark .bg-gray-50,
body.dark .bg-gray-100 {
    background-color: var(--dm-02) !important;
}

body.dark .bg-gray-800 {
    background-color: var(--dm-03) !important;
}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
    color: var(--dm-text) !important;
}

body.dark p,
body.dark span,
body.dark label {
    color: inherit;
}

body.dark .text-gray-400,
body.dark .text-gray-500 {
    color: var(--dm-muted) !important;
}

body.dark .text-gray-600,
body.dark .text-gray-700 {
    color: #b0b0b0 !important;
}

body.dark .text-gray-800,
body.dark .text-gray-900 {
    color: var(--dm-text) !important;
}

body.dark .text-white {
    color: var(--dm-text) !important;
}

/* ── BORDERS & DIVIDERS ───────────────────────────────────── */
body.dark .border,
body.dark .border-gray-100,
body.dark .border-gray-200 {
    border-color: var(--dm-border) !important;
}

body.dark .border-gray-700,
body.dark .border-gray-800 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── HERO SECTION ─────────────────────────────────────────── */
body.dark .hero-bg-card,
body.dark [class*="rounded-[40px]"].anime-entrance {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── PRAYER TIMES SECTION ─────────────────────────────────── */
body.dark #prayer-times-grid [class*="rounded-[40px]"],
body.dark [id^="card-"] {
    background-color: var(--dm-02) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

body.dark #prayer-times-grid [class*="rounded-[40px]"]:hover,
body.dark [id^="card-"]:hover {
    background-color: var(--dm-04) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* ── SALAH / NAFIL GUIDE CARDS ────────────────────────────── */
body.dark #farz-guide-grid [class*="bg-["],
body.dark #nafil-guide-grid [class*="bg-["] {
    background-color: var(--dm-02) !important;
    border-bottom-color: inherit;
}

body.dark #farz-guide-grid [class*="p-8"],
body.dark #nafil-guide-grid [class*="p-8"] {
    background-color: var(--dm-02) !important;
}

/* ── MODALS ───────────────────────────────────────────────── */
body.dark #fazilat-modal > div,
body.dark .modal-content {
    background-color: var(--dm-03) !important;
    border-color: var(--dm-border) !important;
}

body.dark #quran-modal {
    background-color: rgba(10, 10, 10, 0.85) !important;
}

body.dark #quran-modal > div {
    background-color: var(--dm-03) !important;
    border-color: var(--dm-border) !important;
}

/* ── SURAH INDEX GRID ─────────────────────────────────────── */
body.dark #surah-index-grid .anime-card {
    background-color: var(--dm-02) !important;
    border-color: var(--dm-border) !important;
}

body.dark #surah-index-grid .anime-card:hover {
    background-color: var(--dm-04) !important;
}

/* ── POPULAR SURAH CARDS ──────────────────────────────────── */
body.dark [onclick*="openReader"] {
    background-color: var(--dm-02) !important;
    border-color: var(--dm-border) !important;
}

body.dark [onclick*="openReader"]:hover {
    background-color: var(--dm-04) !important;
    border-color: rgba(52, 211, 153, 0.2) !important;
}

/* ── SECTION CONTAINERS ───────────────────────────────────── */
body.dark .view-section {
    background-color: var(--dm-base) !important;
}

/* Feature/Module grid cards on dashboard */
body.dark [class*="view-section"] .anime-card {
    background-color: var(--dm-02) !important;
}

/* ── TABS / BUTTONS ───────────────────────────────────────── */
body.dark button:not(#theme-toggle):not(.nav-link):not([class*="bg-emerald"]):not([class*="bg-[#10b981"]):not([class*="bg-[#064e3b"]):not([class*="bg-slate"]) {
    background-color: var(--dm-03) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

body.dark button:not(#theme-toggle):not(.nav-link):not([class*="bg-emerald"]):not([class*="bg-[#10b981"]):not([class*="bg-[#064e3b"]):not([class*="bg-slate"]):hover {
    background-color: var(--dm-05) !important;
}

/* Emerald accent buttons — keep their color, just add dark shadow */
body.dark [class*="bg-emerald"],
body.dark [class*="bg-[#10b981]"],
body.dark [class*="bg-[#064e3b]"] {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
}

/* ── CALENDAR SECTION ─────────────────────────────────────── */
body.dark #calendar-banner,
body.dark #cal-banner {
    background: linear-gradient(135deg, #1e2e28, #222e26) !important;
}

body.dark #hijri-months-grid .anime-card {
    background-color: var(--dm-02) !important;
    border-color: var(--dm-border) !important;
}

body.dark #hijri-months-grid .anime-card:hover {
    background-color: var(--dm-04) !important;
}

/* ── RAMADAN SECTION ──────────────────────────────────────── */
body.dark #view-ramadan {
    background-color: var(--dm-base) !important;
}

body.dark #ramadan-module-grid .anime-card {
    background-color: var(--dm-02) !important;
}

/* ── 99 NAMES GRID ────────────────────────────────────────── */
body.dark #names-grid [class*="p-8"],
body.dark #names-grid [class*="rounded-[40px]"] {
    background-color: var(--dm-02) !important;
    border-color: var(--dm-border) !important;
}

body.dark #names-grid [class*="p-8"]:hover {
    background-color: var(--dm-04) !important;
}

/* ── DUAS SECTION ─────────────────────────────────────────── */
body.dark #duas-grid [class*="rounded-[40px]"],
body.dark #daily-duas-grid [class*="rounded-[40px]"] {
    background-color: var(--dm-02) !important;
    border-color: var(--dm-border) !important;
}

/* ── LIBRARY / DUROOD ─────────────────────────────────────── */
body.dark #library-grid [class*="p-8"],
body.dark #durood-grid [class*="p-8"] {
    background-color: var(--dm-02) !important;
    border-color: var(--dm-border) !important;
}

/* ── MOBILE DRAWER ────────────────────────────────────────── */
body.dark #mobile-drawer {
    background: linear-gradient(180deg, var(--dm-01) 0%, #1c1c1c 100%) !important;
    border-right-color: var(--dm-border) !important;
}

body.dark #mobile-drawer .nav-link:hover {
    background-color: rgba(52, 211, 153, 0.08) !important;
}

/* ── MOBILE BOTTOM NAV ────────────────────────────────────── */
body.dark nav[class*="fixed bottom"] {
    background: rgba(25, 25, 25, 0.95) !important;
    border-top-color: var(--dm-border) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
}

/* ── INPUT FIELDS ─────────────────────────────────────────── */
body.dark input,
body.dark textarea {
    background-color: var(--dm-03) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: var(--dm-subtle) !important;
}

body.dark input:focus,
body.dark textarea:focus {
    background-color: var(--dm-04) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12) !important;
}

/* ── SKELETON SHIMMER (DARK) ──────────────────────────────── */
body.dark .skeleton {
    background: linear-gradient(
        90deg,
        var(--dm-02) 25%,
        var(--dm-04) 50%,
        var(--dm-02) 75%
    ) !important;
    background-size: 600px 100% !important;
}

/* ── OPACITY HELPERS IN DARK MODE ─────────────────────────── */
body.dark .opacity-30 { opacity: 0.5 !important; }
body.dark .opacity-40 { opacity: 0.6 !important; }

/* ── BACK-OVERLAY BG ──────────────────────────────────────── */
body.dark .backdrop-blur-sm,
body.dark .backdrop-blur-md,
body.dark .backdrop-blur-xl {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ── ACCENT COLOR HIGHLIGHTS ──────────────────────────────── */
body.dark .text-emerald-500,
body.dark .text-emerald-600 {
    color: var(--dm-accent) !important;
}

/* Explicit hex color overrides for dark mode text */
body.dark [style*="color:#10b981"],
body.dark [style*="color: #10b981"] {
    color: var(--dm-accent) !important;
}

body.dark [style*="color:#064e3b"],
body.dark [style*="color: #064e3b"] {
    color: var(--dm-accent) !important;
}

body.dark [style*="color:#af944d"],
body.dark [style*="color: #af944d"] {
    color: var(--dm-gold) !important;
}

/* All emerald-text Tailwind classes — covered via CSS variable cascade */
body.dark .text-emerald-600 { color: var(--dm-accent) !important; }
body.dark .text-emerald-700 { color: #6ee7b7 !important; }

/* Emerald borders in dark mode */
body.dark .border-emerald-500\/20,
body.dark [class*="border-emerald"] {
    border-color: rgba(52, 211, 153, 0.12) !important;
}

/* ── SCROLLBAR ─────────────────────────────────────────────── */
body.dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.dark ::-webkit-scrollbar-track {
    background: var(--dm-01);
}

body.dark ::-webkit-scrollbar-thumb {
    background: var(--dm-04);
    border-radius: 99px;
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-05);
}

/* ── SECTION HEADING LABELS ───────────────────────────────── */
body.dark .text-slate-500 {
    color: var(--dm-muted) !important;
}

/* Deep navy text in light mode → light in dark mode */
body.dark [style*="color:#0f172a"] {
    color: var(--dm-text) !important;
}

/* Ring / focus outlines */
body.dark :focus-visible {
    outline-color: var(--dm-accent) !important;
}

/* ══════════════════════════════════════════════════════════
   QURAN READER — NIGHT MODE SURFACES
   Day mode: light parchment + mint surface → readable black text
   Night mode: elevated dark gray surfaces → light text
   ══════════════════════════════════════════════════════════ */

/* Arabic pane — parchment in day, dark surface in night */
body.dark .arabic-pane {
    background: var(--dm-02) !important;
    color: #e8e0c8 !important;
    border-right-color: rgba(52, 211, 153, 0.08) !important;
}

/* Translation pane — mint in day, dark surface in night */
body.dark .translation-pane {
    background: var(--dm-01) !important;
    color: var(--dm-text) !important;
    border-left-color: rgba(52, 211, 153, 0.12) !important;
}

/* Arabic verse text — cream in night mode */
body.dark .arabic-text-sharp,
body.dark .quran-arabic-text {
    color: #f5ecd4 !important;
}

/* Verse row hover */
body.dark #quran-content [id^="ayah-row-"]:hover {
    background: rgba(52, 211, 153, 0.04) !important;
}

body.dark #quran-content .border-b {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* Transliteration */
body.dark .quran-transliteration {
    color: var(--dm-gold) !important;
    border-left-color: rgba(240, 192, 96, 0.4) !important;
}

/* English translation */
body.dark .quran-translation {
    color: var(--dm-text) !important;
}

/* Hinglish block */
body.dark .quran-hinglish {
    color: #86efac !important;
    background: rgba(52, 211, 153, 0.06) !important;
    border-color: rgba(52, 211, 153, 0.15) !important;
}

/* Urdu text */
body.dark .quran-urdu {
    color: #cbd5e1 !important;
}

/* Verse number badge */
body.dark .w-10.h-10.rounded-full {
    background: rgba(240, 192, 96, 0.12) !important;
    border-color: rgba(240, 192, 96, 0.3) !important;
}

/* Quran content container */
body.dark #quran-content {
    background: var(--dm-base) !important;
}

/* Reader header area */
body.dark #quran-reader-view {
    background: var(--dm-01) !important;
}