/* ============================================================
   royal-midnight.css – ثيم "Royal Midnight" (من temp2.html)
   خلفيات داكنة، نصوص فاتحة، لمسات ذهبية / نيون
   ============================================================ */

/* ---------- الصفحة الرئيسية ---------- */
html, body {
    background: #0a192f !important;
    background-image: radial-gradient(ellipse at 20% 50%, rgba(100, 255, 218, 0.06) 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 50%, rgba(243, 198, 143, 0.04) 0%, transparent 60%) !important;
}
body::before {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(100, 255, 218, 0.015) 40px, rgba(100, 255, 218, 0.015) 41px),
                      repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(100, 255, 218, 0.015) 40px, rgba(100, 255, 218, 0.015) 41px) !important;
}

/* ---------- البطاقة الرئيسية ---------- */
.card {
    background: rgba(17, 34, 64, 0.88) !important;
    border-color: #233554 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 80px rgba(100, 255, 218, 0.02) !important;
}

/* ---------- الشريط العلوي (Top Nav) ---------- */
.top-nav {
    background: rgba(10, 25, 47, 0.95) !important;
    border-bottom-color: #233554 !important;
}
.top-nav .brand {
    color: #c7a648 !important
}
.top-nav .brand:hover {
    color: #f3c68f !important;
}
.top-nav .hamburger {
    color: #ffffff !important;
}
.top-nav .hamburger:hover {
    background: rgba(100, 255, 218, 0.08) !important;
}
.top-nav .user-greeting {
    color: #e6f1ff !important;
}
.top-nav .user-greeting .greeting-text {
    color: #c7a648 !important
}
.top-nav .user-greeting .level-badge {
    background: rgba(100, 255, 218, 0.08) !important;
    border-color: rgba(100, 255, 218, 0.2) !important;
    color: #ffffff !important
}
.top-nav .user-greeting .divider {
    color: rgba(230, 241, 255, 0.15) !important;
}

/* ---------- القائمة الجانبية (Drawer) ---------- */
.drawer {
    background: rgba(17, 34, 64, 0.98) !important;
    border-left-color: #233554 !important;
    scrollbar-color: rgba(100, 255, 218, 0.3) transparent !important;
}
.drawer .drawer-header .drawer-brand {
    color: #c7a648 !important
}
.drawer .drawer-header .close-btn:hover {
    color: #64ffda !important;
    background: rgba(100, 255, 218, 0.06) !important;
}
.drawer-search input {
    background: #0a192f !important;
    border-color: #233554 !important;
    color: #e6f1ff !important;
}
.drawer-search input::placeholder {
    color: #8892b0 !important;
}
.drawer-search input:focus {
    border-color: #64ffda !important;
    background: #112240 !important;
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.10) !important;
}
.drawer .drawer-group .group-label {
    color: #8892b0 !important;
}
.drawer .drawer-group a {
    color: #e6f1ff !important;
}
.drawer .drawer-group a:hover {
    background: rgba(100, 255, 218, 0.06) !important;
    color: #64ffda !important;
}
.drawer .drawer-group a.active {
    background: rgba(100, 255, 218, 0.08) !important;
    color: #64ffda !important;
    border-right-color: #64ffda !important;
}

/* ================================================================
   الجزء الأساسي: تحسينات داخل quran-view (وضوح تام على الدارك)
   ================================================================ */

/* الحاوية الرئيسية */
.quran-view {
    color: #e6f1ff !important;
}

/* ---------- شريط التنقل (السهمين) ---------- */
.quran-view .nav-arrows {
    background: rgba(17, 34, 64, 0.6) !important;
    border-color: #233554 !important;
}
.quran-view .nav-arrows .surah-name {
    color: #e6f1ff !important;
}
.quran-view .nav-arrows .verse-num {
    color: #8892b0 !important;
    background: rgba(100, 255, 218, 0.05) !important;
}
.quran-view .nav-arrows .session-timer {
    color: #64ffda !important;
    background: rgba(100, 255, 218, 0.05) !important;
    border-color: rgba(100, 255, 218, 0.10) !important;
}
.quran-view .nav-arrows .nav-btn {
    color: #e6f1ff !important;
    border-color: #233554 !important;
}
.quran-view .nav-arrows .nav-btn:hover {
    background: rgba(100, 255, 218, 0.06) !important;
    border-color: #64ffda !important;
}

/* ---------- حاوية الآية (النص الأساسي) ---------- */
#ayahContainer {
    background: rgba(17, 34, 64, 0.85) !important;
    border-color: #233554 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* النص الرئيسي وجميع العناصر الداخلية */
#ayahText {
    color: #e6f1ff !important;
}
#ayahText .verse-layer,
#ayahText .highlight,
#ayahText .top-lbl,
#ayahText .bottom-lbl,
#ayahText .heilt,
#ayahText .hidn,
#ayahText .word-layer,
#ayahText .word-highlight {
    /* color: #e6f1ff !important; */
}
/* إزالة الشفافية المزعجة من النص المخفي مؤقتاً */
#ayahText .hidn {
   /*  opacity: 0.5 !important;
    color: #8892b0 !important; */
}

/* مرجع الآية */
#ayahRef {
    color: #8892b0 !important;
    border-top-color: #233554 !important;
    margin-top: 25px;
}

/* ---------- شريط الأدوات (أزرار الاستماع والتسجيل) ---------- */
.quran-view .toolbar {
    background: rgba(17, 34, 64, 0.5) !important;
    border-color: #233554 !important;
}
.quran-view .toolbar .toolbar-btn {
    color: #e6f1ff !important;
    border-color: #233554 !important;
}
.quran-view .toolbar .toolbar-btn:hover {
    background: rgba(100, 255, 218, 0.06) !important;
    border-color: #64ffda !important;
    color: #64ffda !important;
}

/* ---------- الأزرار السفلية (التدريب وإنهاء الجلسة) ---------- */
.quran-view .bottom-actions {
    background: rgba(17, 34, 64, 0.4) !important;
    border-color: #233554 !important;
}
.quran-view .bottom-actions .action-link {
    color: #e6f1ff !important;
}
.quran-view .bottom-actions .action-link:hover {
    color: #64ffda !important;
    border-color: #64ffda !important;
}
.quran-view .bottom-actions .action-link.primary {
    background: linear-gradient(145deg, #64ffda, #00b894) !important;
    color: #0a192f !important;
}
.quran-view .bottom-actions .action-link.primary:hover {
    background: linear-gradient(145deg, #7affed, #64ffda) !important;
}
.quran-view .bottom-actions .action-link.finish-session {
    background: rgba(239, 83, 80, 0.12) !important;
    border-color: #ef5350 !important;
    color: #ef5350 !important;
}

/* ---------- أزرار التحكم العلوية (بحث، علامة، تصفية) ---------- */
.nav-center-actions button {
    color: #e6f1ff !important;
    border-color: #233554 !important;
}
.nav-center-actions button:hover {
    background: rgba(100, 255, 218, 0.06) !important;
    border-color: #64ffda !important;
}
#toggleHintsBtn {
    color: #e6f1ff !important;
}

/* ---------- زر التصفية والقائمة المنسدلة ---------- */
#filterTrigger {
    color: #e6f1ff !important;
}
#filterBadge {
    background: rgba(100, 255, 218, 0.10) !important;
    color: #64ffda !important;
}
#filterDropdown {
    background: rgba(17, 34, 64, 0.98) !important;
    border-color: #233554 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
#filterDropdown .filter-rule-check {
    accent-color: #64ffda !important;
}
#filterDropdown div {
    color: #e6f1ff !important;
}
#filterDropdown div:hover {
    background: rgba(100, 255, 218, 0.04) !important;
}

/* ---------- البحث ---------- */
#searchInput {
    background: rgba(10, 25, 47, 0.85) !important;
    border-color: #233554 !important;
    color: #e6f1ff !important;
}
#searchInput:focus {
    border-color: #64ffda !important;
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.08) !important;
}
#searchInput::placeholder {
    color: #8892b0 !important;
}
#searchResults {
    background: rgba(17, 34, 64, 0.98) !important;
    border-color: #233554 !important;
}
#searchResults .search-result-item {
    color: #e6f1ff !important;
    border-bottom-color: #233554 !important;
}
#searchResults .search-result-item:hover {
    background: rgba(100, 255, 218, 0.04) !important;
}
#searchResults mark {
    background: rgba(243, 198, 143, 0.2) !important;
    color: #f3c68f !important;
}

/* ---------- شريط الحالة السفلي ---------- */
#statusMsg {
    color: #8892b0 !important;
    border-top-color: #233554 !important;
}

/* ---------- تلميحات الأحكام (العلوية والسفلية) ---------- */
.top-lbl {
   /*  background: #64ffda !important;
    color: #0a192f !important;
    border-color: #64ffda !important; */
}
.bottom-lbl {
    background: rgb(33 62 77) !important;
    color: #ffffff !important;
    border-color: rgba(100, 255, 218, 0.10) !important;
}
.verse-layer .highlight:hover {
    filter: brightness(2.15);
}

button {
    color: #fff !important;
}
/* ---------- أزرار الصوت والتسجيل (حالات خاصة) ---------- */
.toolbar-btn.recording {
    background: rgba(239, 83, 80, 0.15) !important;
    border-color: #ef5350 !important;
    color: #ef5350 !important;
}
.toolbar-btn.idle {
    background: rgba(100, 255, 218, 0.04) !important;
    border-color: #233554 !important;
    color: #e6f1ff !important;
}

/* ---------- شريط التقدم (التحكم الصوتي) ---------- */
#progressContainer {
    color: #e6f1ff !important;
}
#progressSlider {
    background: rgba(100, 255, 218, 0.1) !important;
}
#progressSlider::-webkit-slider-thumb {
    background: #64ffda !important;
}
#progressSlider::-moz-range-thumb {
    background: #64ffda !important;
}
#currentTime, #totalTime {
    color: #e6f1ff !important;
}

/* ---------- التحكم في السرعة ---------- */
#speedBtn {
    color: #e6f1ff !important;
    border-color: #233554 !important;
}
#speedDropdown {
    background: rgba(17, 34, 64, 0.98) !important;
    border-color: #233554 !important;
}
#speedDropdown .speed-option {
    color: #e6f1ff !important;
}
#speedDropdown .speed-option:hover {
    background: rgba(100, 255, 218, 0.04) !important;
}
#speedDropdown .speed-option.active {
    background: rgba(100, 255, 218, 0.08) !important;
    color: #64ffda !important;
}

/* ---------- التحكم في التكرار (Loop) ---------- */
#loopToggleBtn {
    color: #e6f1ff !important;
    border-color: #233554 !important;
}
#loopToggleBtn.active {
    background: rgba(100, 255, 218, 0.08) !important;
    color: #64ffda !important;
    border-color: #64ffda !important;
}
#loopStartSlider, #loopEndSlider {
    background: rgba(100, 255, 218, 0.1) !important;
}
#loopStartTime, #loopEndTime {
    color: #e6f1ff !important;
}

/* ================================================================
   المودال (نافذة شرح الحكم)
   ================================================================ */
#ruleModalContent {
    background: rgba(17, 34, 64, 0.98) !important;
    border-color: #233554 !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8) !important;
}
#ruleModalTitle {
    color: #64ffda !important;
    border-bottom-color: #233554 !important;
}
#ruleModalClose {
    color: #e6f1ff !important;
    border-color: #233554 !important;
}
#ruleModalClose:hover {
    background: rgba(100, 255, 218, 0.06) !important;
}
#ruleModalSummary {
    background: rgba(10, 25, 47, 0.5) !important;
    border-right-color: #64ffda !important;
    color: #e6f1ff !important;
}
#ruleModalVoiceBox {
    background: rgba(10, 25, 47, 0.3) !important;
    border-color: #233554 !important;
}
#ruleModalVoiceText {
    color: #f3c68f !important;
}
#ruleModalAccordion div {
    border-bottom-color: #233554 !important;
}
#ruleModalAccordion .accordion-header {
    color: #e6f1ff !important;
}
#ruleModalAccordion .accordion-body {
    color: #e6f1ff !important;
}
#ruleModalAccordion .accordion-body li {
    color: #e6f1ff !important;
}
#ruleModalExample {
    background: rgba(10, 25, 47, 0.4) !important;
    border-color: #233554 !important;
    color: #f3c68f !important;
}
#ruleModalSourceBook,
#ruleModalSourceEdition,
#ruleModalSourcePage {
    color: #8892b0 !important;
}
#ruleModalShareBtn {
    color: #8892b0 !important;
    border-color: #233554 !important;
}
#ruleModalShareBtn:hover {
    background: rgba(100, 255, 218, 0.06) !important;
}

option {
    background: #101d31 !important;
    color: var(--text-light, #f5f0e8) !important;
}

/* ===== Audio Button States ===== */
.audio-btn,
.control-btn {
  transition: all 0.3s ease;
}

/* Recording state – red glow */
.audio-btn.recording,
.control-btn.recording {
  background: rgba(239, 83, 80, 0.2) !important;
  border-color: #ef5350 !important;
  box-shadow: 0 0 12px rgba(239, 83, 80, 0.3);
}
.audio-btn.recording .icon,
.control-btn.recording .icon {
  animation: pulse-record 1.2s infinite;
}
@keyframes pulse-record {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Playing state – gold glow */
.audio-btn.playing,
.control-btn.playing {
  background: rgba(201, 168, 76, 0.2) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.25);
}

/* Playback state – blue glow */
.audio-btn.playback,
.control-btn.playback {
  background: rgba(52, 152, 219, 0.2) !important;
  border-color: #3498db !important;
  box-shadow: 0 0 12px rgba(52, 152, 219, 0.25);
}

/* Comparing state – purple glow */
.audio-btn.comparing,
.control-btn.comparing {
  background: rgba(142, 68, 173, 0.2) !important;
  border-color: #8e44ad !important;
  box-shadow: 0 0 12px rgba(142, 68, 173, 0.25);
}

/* Disabled/locked state */
.audio-btn.disabled,
.control-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }