/* --- ملف CSS المشترك للوضع الداكن (إصلاح القائمة والبريد) --- */

/* متغيرات الوضع الداكن الموحدة */
body.dark-mode {
    --bg-color: #0f172a;      /* اللون الكحلي الداكن جداً الموحد */
    --card-bg: #1e293b;       /* لون الكروت الغامقة */
    --text-primary: #f9fafb;  /* أبيض مائل للرمادي الفاتح */
    --text-secondary: #cbd5e0;
    --border-color: #334155;
}

/* تطبيق اللون الموحد على خلفية الموقع بالكامل */
body.dark-mode {
    background-color: var(--bg-color) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
}

/* توحيد لون جميع الأقسام والحاويات */
body.dark-mode main,
body.dark-mode section,
body.dark-mode #courses,
body.dark-mode #loggedInContent,
body.dark-mode #about,
body.dark-mode #contact {
    background-color: var(--bg-color) !important;
}

/* --- إصلاح قائمة الجوال (Mobile Menu) --- */
body.dark-mode .mobile-menu {
    background-color: #0f172a !important;
    border-top-color: var(--border-color) !important;
}

body.dark-mode .mobile-menu a,
body.dark-mode .mobile-menu button,
body.dark-mode .mobile-menu span {
    color: var(--text-primary) !important;
}

body.dark-mode .mobile-menu a:hover,
body.dark-mode .mobile-menu button:hover {
    background-color: #1e293b !important;
}

/* --- إصلاح أيقونة الثلاث شرطات (Mobile Menu Button) --- */
body.dark-mode .mobile-menu-button {
    color: white !important;
}

body.dark-mode .mobile-menu-button svg {
    stroke: white !important;
}

/* --- إصلاح خلفية البريد الإلكتروني (User Email Display) --- */
body.dark-mode #userEmailDisplay,
body.dark-mode #mobileUserEmailDisplay {
    background-color: #1e293b !important;
    color: #818cf8 !important; /* لون أزرق فاتح مريح */
    border: 1px solid var(--border-color) !important;
}

/* --- تعديل رقم الهاتف والبريد في قسم التواصل في الوضع الداكن --- */
body.dark-mode .contact-item .user-email {
    background-color: transparent !important;
    color: white !important;
    border: none !important;
    padding: 0 !important;
}

/* --- إصلاح نصوص النماذج --- */
body.dark-mode .modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

body.dark-mode label,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 {
    color: var(--text-primary) !important;
}

body.dark-mode .form-input {
    background-color: #0f172a !important;
    border-color: var(--border-color) !important;
    color: white !important;
}

/* --- إصلاح زر "ابدأ الآن" --- */
body.dark-mode #ctaRegisterBtn,
body.dark-mode .hero-section .btn.bg-white {
    background-color: white !important;
    color: #4338ca !important;
    border: none !important;
}

/* --- الحفاظ على الأقسام الملونة الأصلية --- */
body.dark-mode .hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body.dark-mode .course-main-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

/* --- تنسيق الكروت العامة --- */
body.dark-mode .card, 
body.dark-mode .course-card-fixed,
body.dark-mode .test-card,
body.dark-mode .subject-card,
body.dark-mode .cart-sidebar {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* --- تنسيق النابار والفوتر --- */
body.dark-mode .navbar,
body.dark-mode footer {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .navbar.scrolled {
    background-color: rgba(15, 23, 42, 0.98) !important;
}

body.dark-mode .nav-link {
    color: var(--text-secondary) !important;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
    color: white !important;
}

/* إصلاحات إضافية */
body.dark-mode .modal-close {
    background-color: #334155 !important;
    color: white !important;
}

body.dark-mode .alert {
    background-color: #1e293b !important;
    border-color: var(--border-color) !important;
}

/* --- إصلاح لون نص الشعار في الهيدر --- */
body.dark-mode .navbar h1,
body.dark-mode .navbar .flex-col h1 {
    color: white !important;
}

body.dark-mode .navbar p,
body.dark-mode .navbar .flex-col p {
    color: var(--text-secondary) !important;
}

/* --- إصلاح ألوان الإجابات في الوضع الداكن للاختبارات --- */
body.dark-mode .option.correct {
    background-color: #065f46 !important; /* أخضر داكن */
    border-color: #10b981 !important;
    color: #ecfdf5 !important;
}

body.dark-mode .option.incorrect {
    background-color: #991b1b !important; /* أحمر داكن */
    border-color: #ef4444 !important;
    color: #fef2f2 !important;
}

/* التأكد من ظهور الأيقونات والبادئات بشكل جيد في الوضع الداكن */
body.dark-mode .option.correct .option-prefix,
body.dark-mode .option.incorrect .option-prefix {
    color: white !important;
}


/* --- تنسيقات الكسور في الوضع الداكن --- */
body.dark-mode .numerator,
body.dark-mode .denominator {
    color: #f9fafb !important;
}

body.dark-mode .numerator {
    border-bottom-color: #f9fafb !important;
}

/* --- تنسيقات SVG العامة في الوضع الداكن --- */
body.dark-mode svg {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode svg rect {
    stroke: #cbd5e0 !important;
}

body.dark-mode svg line {
    stroke: #475569 !important;
}

body.dark-mode svg text {
    fill: #f9fafb !important;
    color: #f9fafb !important;
}

body.dark-mode svg path {
    stroke: #cbd5e0 !important;
}

/* --- تحسين ألوان الرسوم البيانية والأشكال في الوضع الداكن --- */
body.dark-mode svg rect[fill="#ffffff"] {
    fill: #334155 !important;
}

body.dark-mode svg rect[fill="#4e73df"] {
    fill: #667eea !important;
}

body.dark-mode svg rect[fill="#777777"] {
    fill: #64748b !important;
}

body.dark-mode svg text[fill="#ffffff"] {
    fill: #f9fafb !important;
}

body.dark-mode svg text[fill="#333333"] {
    fill: #f9fafb !important;
}

body.dark-mode svg text[fill="#000000"] {
    fill: #f9fafb !important;
}

/* --- تحسين الخطوط في الرسوم البيانية --- */
body.dark-mode svg line[stroke="#333"] {
    stroke: #cbd5e0 !important;
}

body.dark-mode svg line[stroke="#eee"] {
    stroke: #334155 !important;
}

body.dark-mode svg line[stroke="#333333"] {
    stroke: #cbd5e0 !important;
}