/* 
  نظام ألوان مظلم مُحسّن وفق معايير WCAG 2.1 
  إصدار ٤.١ - ٢٠٢٥/٠٣/٢٨ - مدرسة رقية بنت الرسول، الأردن
  يعتمد على variables.css & components.css
*/

/* =============== متغيرات أساسية للوضع المظلم =============== */
:root {
  /* متغيرات الوضع المظلم العامة - متاحة دائمًا للاستخدام في التطبيق */
  --dark-bg-primary: #121620;
  --dark-bg-secondary: #1a1f2c;
  --dark-bg-tertiary: #252a37;
  
  --dark-text-primary: #f8fafc; /* تحسين التباين مع الخلفية */
  --dark-text-secondary: #e2e8f0;
  --dark-text-tertiary: #cbd5e1;
  
  --dark-primary-color: #4287f5; /* تحسين قابلية القراءة والتباين */
  --dark-primary-light: #64a1ff;
  --dark-primary-dark: #2b6fd9;
  
  --dark-secondary-color: #2ecca0; /* تحسين قابلية القراءة والتباين */
  --dark-secondary-light: #4edfb5;
  --dark-secondary-dark: #27b88c;
  
  --dark-gray-100: #2d3436;
  --dark-gray-200: #343a40;
  --dark-gray-300: #495057;
  --dark-gray-400: #6c757d;
  --dark-gray-500: #adb5bd;
  --dark-gray-600: #ced4da;
  --dark-gray-700: #e9ecef;
  --dark-gray-800: #f8f9fa;
  
  /* تنسيقات الظلال المحسنة للوضع المظلم */
  --dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.8);
  --dark-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --dark-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  
  /* ظلال ملونة للتأكيد البصري */
  --dark-shadow-primary: 0 4px 14px rgba(66, 135, 245, 0.3);
  --dark-shadow-secondary: 0 4px 14px rgba(46, 204, 160, 0.3);
  
  /* تدرجات ألوان محسنة للخلفيات */
  --dark-bg-gradient: linear-gradient(to bottom, hsl(220, 25%, 15%), hsl(220, 25%, 10%));
  --dark-navbar-gradient: linear-gradient(to left, hsla(220, 70%, 32%, 0.95), hsla(220, 70%, 26%, 0.95));
  --dark-sidebar-gradient: linear-gradient(to bottom, hsla(220, 30%, 15%, 0.97), hsla(220, 30%, 10%, 0.97));
  --dark-card-gradient: radial-gradient(circle at top right, rgba(66, 135, 245, 0.12), transparent 75%);
  
  /* متغيرات انتقالات الوضع المظلم */
  --dark-mode-transition-time: 300ms;
  --dark-mode-transition-props: background-color, color, border-color, box-shadow;
  --dark-mode-transition: var(--dark-mode-transition-props) var(--dark-mode-transition-time) ease-in-out;
  
  /* متغيرات إضافية لتحسين تجربة الوضع المظلم */
  --dark-success-color: #2ecc71; /* لون النجاح */
  --dark-error-color: #e74c3c; /* لون الخطأ */
  --dark-warning-color: #f39c12; /* لون التحذير */
  --dark-info-color: #3498db; /* لون المعلومات */
  --dark-focus-ring-size: 3px; /* حجم حلقة التركيز */
}

/* =============== دعم الوضع التلقائي المحسن =============== */
@media (prefers-color-scheme: dark) {
  /* تطبيق الوضع المظلم تلقائيًا إذا لم يختر المستخدم الوضع الفاتح بشكل صريح */
  :root:not(.light-mode) {
    color-scheme: dark; /* إشعار نظام التشغيل بتفضيل الألوان الداكنة نطاقيًا */
    
    /* تطبيق متغيرات الوضع المظلم */
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: var(--dark-text-tertiary);
    
    --primary-color: var(--dark-primary-color);
    --primary-light: var(--dark-primary-light);
    --primary-dark: var(--dark-primary-dark);
    
    --secondary-color: var(--dark-secondary-color);
    --secondary-light: var(--dark-secondary-light);
    --secondary-dark: var(--dark-secondary-dark);
    
    --gray-100: var(--dark-gray-100);
    --gray-200: var(--dark-gray-200);
    --gray-300: var(--dark-gray-300);
    --gray-400: var(--dark-gray-400);
    --gray-500: var(--dark-gray-500);
    --gray-600: var(--dark-gray-600);
    --gray-700: var(--dark-gray-700);
    --gray-800: var(--dark-gray-800);
    
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
    --shadow-lg: var(--dark-shadow-lg);
    --shadow-xl: var(--dark-shadow-xl);
    
    --bg-gradient: var(--dark-bg-gradient);
    --navbar-gradient: var(--dark-navbar-gradient);
    --sidebar-gradient: var(--dark-sidebar-gradient);
    --card-gradient: var(--dark-card-gradient);
    
    /* متغيرات إضافية خاصة بالوضع المظلم */
    --focus-ring-color: rgba(66, 135, 245, 0.5);
    --scrollbar-thumb: var(--dark-gray-400);
    --scrollbar-track: var(--dark-gray-100);
    
    /* ألوان الحالات */
    --success-color: var(--dark-success-color);
    --error-color: var(--dark-error-color);
    --warning-color: var(--dark-warning-color);
    --info-color: var(--dark-info-color);
  }
}

/* =============== التطبيق الصريح للوضع المظلم =============== */
.dark-mode {
  color-scheme: dark; /* إشعار نظام التشغيل بتفضيل الألوان الداكنة نطاقيًا */
  
  /* متغيرات الألوان الأساسية */
  --bg-primary: var(--dark-bg-primary);
  --bg-secondary: var(--dark-bg-secondary);
  --bg-tertiary: var(--dark-bg-tertiary);
  
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-tertiary: var(--dark-text-tertiary);
  
  --primary-color: var(--dark-primary-color);
  --primary-light: var(--dark-primary-light);
  --primary-dark: var(--dark-primary-dark);
  
  --secondary-color: var(--dark-secondary-color);
  --secondary-light: var(--dark-secondary-light);
  --secondary-dark: var(--dark-secondary-dark);
  
  /* إعادة تعريف الألوان المحايدة */
  --gray-100: var(--dark-gray-100);
  --gray-200: var(--dark-gray-200);
  --gray-300: var(--dark-gray-300);
  --gray-400: var(--dark-gray-400);
  --gray-500: var(--dark-gray-500);
  --gray-600: var(--dark-gray-600);
  --gray-700: var(--dark-gray-700);
  --gray-800: var(--dark-gray-800);
  
  /* تعديلات الظلال للوضع المظلم */
  --shadow-sm: var(--dark-shadow-sm);
  --shadow-md: var(--dark-shadow-md);
  --shadow-lg: var(--dark-shadow-lg);
  --shadow-xl: var(--dark-shadow-xl);
  --shadow-primary: var(--dark-shadow-primary);
  --shadow-secondary: var(--dark-shadow-secondary);
  
  /* التدرجات الخاصة بالوضع المظلم */
  --bg-gradient: var(--dark-bg-gradient);
  --navbar-gradient: var(--dark-navbar-gradient);
  --sidebar-gradient: var(--dark-sidebar-gradient);
  --card-gradient: var(--dark-card-gradient);
  
  /* متغيرات إضافية خاصة بالوضع المظلم */
  --focus-ring-color: rgba(66, 135, 245, 0.5);
  --scrollbar-thumb: var(--dark-gray-400);
  --scrollbar-track: var(--dark-gray-100);
  
  /* ألوان الحالات */
  --success-color: var(--dark-success-color);
  --error-color: var(--dark-error-color);
  --warning-color: var(--dark-warning-color);
  --info-color: var(--dark-info-color);
}

/* =============== خصائص التحول المحسنة =============== */
/* تطبيق انتقالات سلسة للتبديل بين الأوضاع */
body,
.navbar,
.sidebar,
.content-area,
.card,
.modal-content,
.question-display,
.reading-passage,
.option,
input,
textarea,
button,
.icon-btn,
.btn {
  transition: 
    background-color var(--dark-mode-transition-time) ease-in-out,
    color var(--dark-mode-transition-time) ease-in-out,
    border-color var(--dark-mode-transition-time) ease-in-out,
    box-shadow var(--dark-mode-transition-time) ease-in-out;
}

/* تحسين أداء العناصر المهمة عند التبديل */
.dark-mode .navbar,
.dark-mode .sidebar,
.dark-mode .question-display,
.dark-mode .card {
  will-change: background-color, color, box-shadow;
  contain: content;
}

/* =============== تحسين تجربة التمرير في الوضع المظلم =============== */
.dark-mode ::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
}

.dark-mode ::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  border-radius: 0.5rem;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 0.5rem;
  border: 0.1875rem solid var(--scrollbar-track);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-500);
}

/* دعم تخصيص شريط التمرير لـ Firefox */
.dark-mode * {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

/* =============== تخصيصات العناصر الأساسية =============== */
.dark-mode body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-display: swap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-image: url('../img/backgrounds/dark-background.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.dark-mode .content-area {
  background-color: var(--bg-primary);
}

.dark-mode .section-header {
  border-bottom-color: var(--gray-300); /* تحسين التباين */
}

/* =============== تخصيصات شريط التنقل =============== */
.dark-mode .navbar {
  background: var(--navbar-gradient);
  box-shadow: var(--shadow-md);
}

.dark-mode .navbar::after {
  background: linear-gradient(
    to left, 
    var(--primary-color), 
    var(--secondary-color), 
    var(--accent-color, var(--primary-light)), /* إضافة قيمة افتراضية */
    var(--primary-color)
  );
  opacity: 0.8; /* تخفيف شدة الألوان قليلاً */
}

.dark-mode .navbar-logo {
  background-color: rgba(26, 31, 44, 0.7);
}

.dark-mode .logo-text h1,
.dark-mode .logo-text h2 {
  color: var(--text-primary);
}

.dark-mode .subtitle {
  color: var(--primary-light);
}

.dark-mode .score-display {
  background-color: rgba(0, 0, 0, 0.25); /* زيادة التباين قليلاً */
}

.dark-mode .school-banner {
  background-color: rgba(0, 0, 0, 0.25); /* زيادة التباين قليلاً */
}

/* =============== تخصيصات الشريط الجانبي =============== */
.dark-mode .sidebar {
  background: var(--sidebar-gradient);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  background-image: url('../img/backgrounds/dark-background.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  backdrop-filter: blur(2px); /* إضافة تأثير ضبابي للخلفية */
  -webkit-backdrop-filter: blur(2px);
}

.dark-mode .sidebar-header {
  background-color: rgba(26, 31, 44, 0.8); /* زيادة التعتيم قليلاً */
  border-bottom-color: var(--gray-300); /* تحسين التباين */
}

.dark-mode .sidebar-header h3 {
  color: var(--text-primary);
}

.dark-mode .sidebar-menu li {
  color: var(--text-secondary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dark-mode .sidebar-menu li:hover {
  background-color: rgba(66, 135, 245, 0.15); /* تحسين لون التحويم */
  color: var(--text-primary);
}

.dark-mode .sidebar-menu li.active {
  background-color: var(--primary-color);
  color: white; /* ضمان قراءة النص */
  font-weight: 600; /* تحسين الوضوح */
}

.dark-mode .sidebar-menu li.active::before {
  background-color: var(--primary-light);
}

.dark-mode .sidebar-menu li i {
  color: var(--primary-light);
}

.dark-mode .sidebar-menu li.active i {
  color: white; /* ضمان قراءة الأيقونة مع الخلفية النشطة */
}

.dark-mode .sidebar-footer {
  background-image: linear-gradient(to bottom, var(--bg-secondary), var(--bg-tertiary));
  border-top-color: var(--gray-300); /* تحسين التباين */
}

/* =============== تخصيصات بانر الترحيب =============== */
.dark-mode .welcome-banner {
  background: linear-gradient(135deg, #1a2a36, #2a3c4d);
  box-shadow: var(--shadow-lg);
}

.dark-mode .welcome-banner::before {
  opacity: 0.15; /* زيادة وضوح النقش */
  background-image: url('../img/pattern-svg.svg');
}

/* =============== تخصيصات لوحة التحكم =============== */
.dark-mode .controls-panel {
  background-color: var(--bg-secondary);
  border-top-color: var(--primary-color);
  box-shadow: var(--shadow-lg);
}

.dark-mode .panel-header {
  border-bottom-color: var(--gray-300); /* تحسين التباين */
}

.dark-mode .panel-header h2 {
  color: var(--primary-light);
}

.dark-mode .panel-header p {
  color: var(--text-secondary);
}

/* =============== تخصيصات مؤقت الدراسة =============== */
.dark-mode .study-timer {
  background-color: var(--bg-tertiary);
  background-image: linear-gradient(to right, var(--bg-tertiary), var(--bg-secondary));
  box-shadow: var(--shadow-sm);
}

/* =============== تخصيصات عرض السؤال =============== */
.dark-mode .question-display {
  background-color: var(--bg-secondary);
  border-right-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.dark-mode .question-header {
  border-bottom-color: var(--gray-300); /* تحسين التباين */
}

.dark-mode .question-text {
  color: var(--text-primary);
  border-right-color: var(--primary-light);
}

.dark-mode .question-display.loading-question::after {
  background-color: rgba(18, 22, 32, 0.85);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* =============== تخصيصات نص القراءة =============== */
.dark-mode .reading-passage {
  background-color: var(--bg-tertiary);
  border-right-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.dark-mode .passage-title {
  color: var(--primary-light);
}

.dark-mode .passage-content {
  color: var(--text-primary);
  line-height: 1.6; /* تحسين قابلية القراءة */
}

/* تحسين قراءة الفقرات في نصوص القراءة */
.dark-mode .reading-passage p {
  margin-bottom: 1.2em;
}

/* =============== تخصيصات خيارات الإجابة =============== */
.dark-mode .option {
  background-color: var(--bg-tertiary);
  border-color: var(--gray-300); /* تحسين التباين */
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dark-mode .option:hover {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary-light), var(--shadow-sm);
  transform: translateY(-2px);
}

.dark-mode .option.selected {
  border-color: var(--primary-color);
  background-color: rgba(66, 135, 245, 0.15);
  box-shadow: 0 0 0 2px var(--primary-color), var(--shadow-sm);
}

.dark-mode .option.correct {
  border-color: var(--success-color);
  background-color: rgba(46, 204, 113, 0.15);
  box-shadow: 0 0 0 2px var(--success-color), var(--shadow-sm);
}

.dark-mode .option.incorrect {
  border-color: var(--error-color);
  background-color: rgba(231, 76, 60, 0.15);
  box-shadow: 0 0 0 2px var(--error-color), var(--shadow-sm);
}

.dark-mode .option-letter {
  background-color: var(--gray-600);
  color: var(--bg-primary);
  font-weight: 600; /* تحسين الوضوح */
}

.dark-mode .option.selected .option-letter {
  background-color: var(--primary-color);
  color: white;
}

.dark-mode .option.correct .option-letter {
  background-color: var(--success-color);
  color: white;
}

.dark-mode .option.incorrect .option-letter {
  background-color: var(--error-color);
  color: white;
}

/* =============== تخصيصات نوافذ منبثقة =============== */
.dark-mode .modal-content {
  background-color: var(--bg-secondary);
  background-image: var(--card-gradient);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--gray-300); /* إضافة حدود خفيفة */
}

.dark-mode .modal-header {
  border-bottom-color: var(--gray-300); /* تحسين التباين */
}

.dark-mode .modal-footer {
  border-top-color: var(--gray-300); /* تحسين التباين */
}

.dark-mode .modal-header h3 {
  color: var(--text-primary);
}

.dark-mode .modal-header h3 i {
  color: var(--primary-light);
}

.dark-mode .close-btn {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.dark-mode .close-btn:hover {
  background-color: rgba(231, 76, 60, 0.2);
  color: var(--error-color);
  transform: scale(1.05);
}

/* =============== تخصيصات المؤثرات البصرية =============== */
.dark-mode .gradient-overlay {
  background: linear-gradient(45deg, var(--primary-color), hsla(145, 63%, 49%, 0.7));
  mix-blend-mode: soft-light;
  opacity: 0.15; /* زيادة الوضوح قليلاً */
  border-radius: inherit; /* احترام حواف العنصر الأصلي */
}

.dark-mode .contrast-boost {
  filter: contrast(1.05) brightness(1.05);
}

/* =============== تخصيصات رسائل التغذية الراجعة =============== */
.dark-mode .feedback-box {
  border-radius: var(--radius-md, 8px);
  padding: 16px;
  margin: 16px 0;
  border-right: 4px solid transparent;
}

.dark-mode .feedback-box.success {
  background-color: rgba(46, 204, 113, 0.15);
  border-right-color: var(--success-color);
}

.dark-mode .feedback-box.error {
  background-color: rgba(231, 76, 60, 0.15);
  border-right-color: var(--error-color);
}

.dark-mode .feedback-box.info {
  background-color: rgba(52, 152, 219, 0.15);
  border-right-color: var(--info-color);
}

.dark-mode .feedback-box.warning {
  background-color: rgba(241, 196, 15, 0.15);
  border-right-color: var(--warning-color);
}

/* =============== تخصيصات العناصر التفاعلية =============== */
.dark-mode input:not([type="checkbox"]):not([type="radio"]),
.dark-mode textarea,
.dark-mode select {
  background-color: var(--bg-tertiary);
  border-color: var(--gray-300); /* تحسين التباين */
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 var(--dark-focus-ring-size) var(--focus-ring-color);
  outline: none;
}

/* تحسين ظهور عناصر التحديد */
.dark-mode input[type="checkbox"],
.dark-mode input[type="radio"] {
  accent-color: var(--primary-color);
}

/* تحسين تصميم الأزرار */
.dark-mode .btn {
  position: relative;
  overflow: hidden;
}

.dark-mode .btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dark-mode .btn:hover::after {
  opacity: 1;
}

.dark-mode .btn-primary {
  background-color: var(--primary-color);
  color: white;
  border: none;
  box-shadow: var(--shadow-sm), 0 0 0 transparent;
  transition: all 0.2s ease;
}

.dark-mode .btn-primary:hover {
  background-color: var(--primary-light);
  box-shadow: var(--dark-shadow-primary), var(--shadow-md);
  transform: translateY(-2px);
}

.dark-mode .btn-secondary {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  box-shadow: var(--shadow-sm), 0 0 0 transparent;
  transition: all 0.2s ease;
}

.dark-mode .btn-secondary:hover {
  background-color: var(--secondary-light);
  box-shadow: var(--dark-shadow-secondary), var(--shadow-md);
  transform: translateY(-2px);
}

.dark-mode .btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.dark-mode .btn-outline:hover {
  background-color: rgba(66, 135, 245, 0.1);
}

/* =============== تخصيصات الإشعارات والتغذية الراجعة =============== */
.dark-mode .notification {
  background-color: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
  border-right: 4px solid var(--primary-color);
}

.dark-mode .notification.success {
  border-right-color: var(--success-color);
}

.dark-mode .notification.error {
  border-right-color: var(--error-color);
}

.dark-mode .notification.warning {
  border-right-color: var(--warning-color);
}

.dark-mode .answer-feedback.correct {
  background-color: rgba(46, 204, 113, 0.15);
  border: 1px solid var(--success-color);
}

.dark-mode .answer-feedback.incorrect {
  background-color: rgba(231, 76, 60, 0.15);
  border: 1px solid var(--error-color);
}

.dark-mode .answer-explanation {
  background-color: var(--bg-tertiary);
  border-right: 4px solid var(--primary-color);
  padding: 16px;
  margin-top: 16px;
  border-radius: var(--radius-md, 8px);
}

/* =============== تخصيصات تدريبات ملء الفراغات =============== */
.dark-mode .fill-blank-text {
 background-color: var(--bg-tertiary);
 padding: 16px;
 border-radius: var(--radius-md, 8px);
 box-shadow: var(--shadow-sm);
}

.dark-mode .fill-blank {
 border-bottom: 2px dashed var(--primary-light);
 padding: 0 4px;
 color: var(--primary-light);
 font-weight: 600;
}

.dark-mode .emoji-suggest {
 background-color: var(--bg-tertiary);
 border-color: var(--gray-300); /* تحسين التباين */
 border-radius: var(--radius-sm, 4px);
 transition: all 0.2s ease;
}

.dark-mode .emoji-suggest:hover {
 background-color: var(--bg-secondary);
 border-color: var(--primary-light);
 transform: translateY(-2px);
}

/* =============== تخصيصات الأسئلة المفتوحة =============== */
.dark-mode .guidance-container {
 background-color: var(--bg-tertiary);
 border-radius: var(--radius-md, 8px);
 padding: 16px;
 box-shadow: var(--shadow-sm);
}

.dark-mode .help-btn {
 background-color: var(--bg-tertiary);
 border-color: var(--gray-300); /* تحسين التباين */
 color: var(--text-secondary);
 transition: all 0.2s ease;
}

.dark-mode .help-btn:hover {
 background-color: var(--primary-dark);
 color: white;
 transform: translateY(-2px);
}

.dark-mode .suggested-word {
 background-color: rgba(66, 135, 245, 0.15);
 color: var(--primary-light);
 padding: 4px 8px;
 border-radius: var(--radius-sm, 4px);
 margin: 0 4px;
 display: inline-block;
 transition: all 0.2s ease;
}

.dark-mode .suggested-word:hover {
 background-color: var(--primary-color);
 color: white;
 transform: scale(1.05);
}

/* =============== تخصيصات الجداول =============== */
.dark-mode table {
 border-collapse: separate;
 border-spacing: 0;
 width: 100%;
 border-radius: var(--radius-md, 8px);
 overflow: hidden;
}

.dark-mode table th {
 background-color: var(--primary-color);
 color: white;
 font-weight: 600;
 text-align: right;
 padding: 12px 16px;
}

.dark-mode table td {
 background-color: var(--bg-tertiary);
 border-bottom-color: var(--gray-300); /* تحسين التباين */
 padding: 12px 16px;
}

.dark-mode table tr:last-child td {
 border-bottom: none;
}

.dark-mode table tr:hover td {
 background-color: rgba(66, 135, 245, 0.05);
}

/* =============== تخصيصات نموذج الامتحان =============== */
.dark-mode .final-exam-container {
 background-color: var(--bg-secondary);
 box-shadow: var(--shadow-lg);
 border-radius: var(--radius-lg, 12px);
 overflow: hidden;
}

.dark-mode .exam-reading-passage {
 background-color: var(--bg-tertiary);
 padding: 24px;
 margin-bottom: 24px;
 border-radius: var(--radius-md, 8px);
}

.dark-mode .exam-header,
.dark-mode .exam-footer {
 border-color: var(--gray-300); /* تحسين التباين */
 padding: 16px 24px;
}

/* =============== تخصيصات المكونات المكررة في الواجهة =============== */
.dark-mode .card {
 background-color: var(--bg-secondary);
 border-radius: var(--radius-md, 8px);
 box-shadow: var(--shadow-md);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 overflow: hidden;
}

.dark-mode .card:hover {
 box-shadow: var(--shadow-lg);
 transform: translateY(-4px);
}

.dark-mode .card-header,
.dark-mode .card-footer {
 border-color: var(--gray-300); /* تحسين التباين */
 padding: 16px;
}

.dark-mode .card-header h3,
.dark-mode .card-header h4 {
 color: var(--text-primary);
 margin: 0;
}

.dark-mode .card-body {
 padding: 16px;
}

.dark-mode .tab,
.dark-mode .tab-btn {
 background-color: var(--bg-tertiary);
 color: var(--text-secondary);
 border-radius: var(--radius-sm, 4px);
 padding: 8px 16px;
 transition: all 0.2s ease;
}

.dark-mode .tab:hover,
.dark-mode .tab-btn:hover {
 background-color: rgba(66, 135, 245, 0.15);
 color: var(--text-primary);
}

.dark-mode .tab.active,
.dark-mode .tab-btn.active {
 background-color: var(--primary-color);
 color: white;
 font-weight: 600;
}

.dark-mode .stat-card {
 background-color: var(--bg-secondary);
 border-radius: var(--radius-md, 8px);
 box-shadow: var(--shadow-sm);
 padding: 16px;
 display: flex;
 align-items: center;
 gap: 16px;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark-mode .stat-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-md);
}

.dark-mode .stat-icon {
 background-color: rgba(66, 135, 245, 0.15);
 background-image: url('../img/icons/stats.svg');
 background-position: center;
 background-repeat: no-repeat;
 background-size: 60%;
 border-radius: 50%;
 width: 48px;
 height: 48px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.dark-mode .stat-info h4 {
 color: var(--text-primary);
 margin: 0 0 4px 0;
}

.dark-mode .stat-info p {
 color: var(--text-secondary);
 margin: 0;
}

.dark-mode .stat-value {
 color: var(--primary-color);
 font-size: 1.5rem;
 font-weight: 700;
}

/* =============== تحسينات للعناصر الثانوية =============== */
.dark-mode .badge {
 background-color: var(--primary-color);
 color: white;
 padding: 4px 8px;
 border-radius: var(--radius-sm, 4px);
 font-size: 0.85em;
 font-weight: 600;
}

.dark-mode .badge.success {
 background-color: var(--success-color);
}

.dark-mode .badge.warning {
 background-color: var(--warning-color);
 color: var(--bg-primary);
}

.dark-mode .badge.error {
 background-color: var(--error-color);
}

.dark-mode .badge.info {
 background-color: var(--info-color);
}

.dark-mode .divider {
 border-bottom: 1px solid var(--gray-300);
 margin: 16px 0;
}

.dark-mode .tooltip {
 background-color: var(--bg-secondary);
 color: var(--text-primary);
 box-shadow: var(--shadow-lg);
 border-radius: var(--radius-sm, 4px);
 padding: 8px 12px;
 font-size: 0.9em;
 max-width: 300px;
 z-index: var(--z-tooltip, 1000);
}

/* =============== تخصيصات الوضع المتوافق والحالات الخاصة =============== */
/* تحسين التباين العالي للمستخدمين الذين يحتاجون إليه */
@media (prefers-contrast: high) {
 .dark-mode {
   --primary-color: #4e95f4; /* تحسين التباين مع الخلفية */
   --primary-light: #72aef6;
   --primary-dark: #2d7fe8;
   
   --secondary-color: #44e086; /* تحسين التباين مع الخلفية */
   --secondary-light: #6eeba3;
   --secondary-dark: #28c869;
   
   --text-primary: #ffffff; /* أقصى تباين */
   --text-secondary: #f0f0f0;
   --bg-primary: #000000; /* خلفية أكثر قتامة للتباين الأعلى */
   --bg-secondary: #141414;
   --bg-tertiary: #1c1c1c;
   
   /* إزالة الظلال لتجنب الارتباك البصري */
   --shadow-sm: none;
   --shadow-md: none;
   --shadow-lg: none;
   --shadow-xl: none;
   
   /* تعزيز حدود العناصر التفاعلية */
   --border-width: 2px;
 }
 
 /* تحسين رؤية جميع العناصر التفاعلية */
 .dark-mode button,
 .dark-mode .btn,
 .dark-mode .card,
 .dark-mode .option,
 .dark-mode input,
 .dark-mode select,
 .dark-mode textarea {
   border: var(--border-width) solid currentColor !important;
 }
 
 /* إزالة التدرجات والخلفيات المعقدة */
 .dark-mode .navbar,
 .dark-mode .sidebar,
 .dark-mode .welcome-banner,
 .dark-mode .card {
   background-image: none !important;
 }
 
 /* تعديل حجم الخط لسهولة القراءة */
 .dark-mode body {
   font-size: 110%;
   line-height: 1.5;
 }
}

/* تخصيصات لوضع تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
 .dark-mode * {
   transition-duration: 0.001s !important;
   animation-duration: 0.001s !important;
 }
 
 .dark-mode .btn:hover,
 .dark-mode .card:hover,
 .dark-mode .option:hover {
   transform: none !important;
 }
}

/* وضع خاص للتباين العالي يمكن تطبيقه يدويًا */
.dark-mode.high-contrast {
 --primary-color: #4e95f4;
 --primary-light: #72aef6;
 --primary-dark: #2d7fe8;
 
 --secondary-color: #44e086;
 --secondary-light: #6eeba3;
 --secondary-dark: #28c869;
 
 --text-primary: #ffffff;
 --text-secondary: #f0f0f0;
 --text-tertiary: #e0e0e0;
 
 --bg-primary: #000000;
 --bg-secondary: #141414;
 --bg-tertiary: #1c1c1c;
 
 /* إزالة التدرجات والظلال */
 --shadow-sm: none;
 --shadow-md: none;
 --shadow-lg: none;
 --shadow-xl: none;
 
 --bg-gradient: none;
 --navbar-gradient: none;
 --sidebar-gradient: none;
 --card-gradient: none;
 
 /* زيادة سماكة الحدود */
 --border-width-high-contrast: 2px;
}

/* تحسينات الرؤية والتباين */
.dark-mode.high-contrast button,
.dark-mode.high-contrast .btn,
.dark-mode.high-contrast .card,
.dark-mode.high-contrast .question-display,
.dark-mode.high-contrast .option,
.dark-mode.high-contrast input,
.dark-mode.high-contrast select,
.dark-mode.high-contrast .sidebar-menu li {
 border: var(--border-width-high-contrast) solid currentColor;
 outline: none;
}

.dark-mode.high-contrast .navbar,
.dark-mode.high-contrast .sidebar,
.dark-mode.high-contrast .welcome-banner,
.dark-mode.high-contrast .panel-header,
.dark-mode.high-contrast .card {
 background-image: none;
}

/* زيادة وضوح النص */
.dark-mode.high-contrast body {
 font-weight: 500;
 line-height: 1.6;
}

.dark-mode.high-contrast h1,
.dark-mode.high-contrast h2,
.dark-mode.high-contrast h3,
.dark-mode.high-contrast h4,
.dark-mode.high-contrast h5,
.dark-mode.high-contrast h6,
.dark-mode.high-contrast .btn,
.dark-mode.high-contrast label {
 font-weight: 700;
}

/* تعزيز العناصر الفعالة والتفاعلية */
.dark-mode.high-contrast .sidebar-menu li.active,
.dark-mode.high-contrast .tab.active,
.dark-mode.high-contrast .option.selected {
 outline: 2px solid #ffffff;
 outline-offset: 2px;
}

/* تعزيز قابلية القراءة للنصوص على الخلفيات */
.dark-mode.high-contrast .card-header,
.dark-mode.high-contrast .modal-header,
.dark-mode.high-contrast .question-header {
 background-color: #000000;
 border-bottom: 2px solid #ffffff;
}

/* زيادة حجم الخط والتباعد */
.dark-mode.high-contrast p,
.dark-mode.high-contrast li,
.dark-mode.high-contrast label,
.dark-mode.high-contrast input,
.dark-mode.high-contrast .question-text,
.dark-mode.high-contrast .passage-content {
 font-size: 110%;
 line-height: 1.7;
 letter-spacing: 0.01em;
}

/* =============== وضع الطباعة =============== */
@media print {
 .dark-mode {
   /* تحويل الألوان لتناسب الطباعة */
   --text-primary: #000000;
   --text-secondary: #333333;
   --text-tertiary: #666666;
   
   --bg-primary: #ffffff;
   --bg-secondary: #ffffff;
   --bg-tertiary: #f9f9f9;
   
   /* إزالة الظلال والتأثيرات */
   --shadow-sm: none;
   --shadow-md: none;
   --shadow-lg: none;
   --shadow-xl: none;
   
   --bg-gradient: none;
   --navbar-gradient: none;
   --sidebar-gradient: none;
   --card-gradient: none;
 }
 
 /* إعادة تعيين جميع الألوان والخلفيات للطباعة */
 .dark-mode * {
   color: #000000 !important;
   background-color: #ffffff !important;
   background-image: none !important;
   border-color: #cccccc !important;
   box-shadow: none !important;
 }
 
 /* تحسين ظهور العناصر المهمة */
 .dark-mode .question-display,
 .dark-mode .reading-passage,
 .dark-mode .option {
   border: 1px solid #000000 !important;
   margin-bottom: 10px !important;
 }
 
 /* تمييز العناصر المنتقاة والصحيحة */
 .dark-mode .option.selected,
 .dark-mode .option.correct {
   border-width: 2px !important;
 }
 
 /* إضافة رموز للخيارات في الطباعة */
 .dark-mode .option.correct::after {
   content: " ✓" !important;
   font-weight: bold !important;
 }
 
 .dark-mode .option.incorrect::after {
   content: " ✕" !important;
   font-weight: bold !important;
 }
 
 /* تحسين عرض النص في الطباعة */
 .dark-mode .question-text,
 .dark-mode .passage-content {
   font-size: 12pt !important;
   line-height: 1.5 !important;
 }
 
 .dark-mode h1, 
 .dark-mode h2, 
 .dark-mode h3 {
   page-break-after: avoid !important;
 }
 
 .dark-mode p, 
 .dark-mode li {
   orphans: 3 !important;
   widows: 3 !important;
 }
}

/* =============== توافق المتصفحات =============== */
/* دعم Firefox للتحولات والظلال */
@-moz-document url-prefix() {
 .dark-mode .card,
 .dark-mode .question-display,
 .dark-mode .option,
 .dark-mode .btn {
   transition: all 0.2s ease;
 }
}

/* دعم Safari للخلفيات والظلال */
@media not all and (min-resolution: 0.001dpcm) {
 @supports (-webkit-appearance: none) {
   .dark-mode .card,
   .dark-mode .question-display,
   .dark-mode .modal-content {
     -webkit-backdrop-filter: blur(5px);
   }
 }
}

/* دعم للمتصفحات الحديثة فقط */
@supports (backdrop-filter: blur(5px)) {
 .dark-mode .modal-content,
 .dark-mode .notification,
 .dark-mode .sidebar {
   backdrop-filter: blur(5px);
   background-color: rgba(26, 31, 44, 0.85);
 }
}

/* =============== وضع قراءة النص =============== */
.dark-mode.reader-mode {
 /* تحسين القراءة عبر تبسيط الواجهة */
 --bg-primary: #10141e;
 --bg-secondary: #161b27;
 --bg-tertiary: #1c2333;
 
 --text-primary: #e6ebf1;
 --text-secondary: #d1d8e1;
 
 /* خط مريح للقراءة */
 font-family: var(--font-reading, serif);
}

.dark-mode.reader-mode .content-area {
 max-width: 800px;
 margin: 0 auto;
 padding: 0 20px;
}

.dark-mode.reader-mode .reading-passage,
.dark-mode.reader-mode .question-text {
 font-size: 1.1rem;
 padding: 2rem;
 line-height: 1.8;
}

.dark-mode.reader-mode p {
 margin-bottom: 1.6em;
}

/* تحسينات إضافية لوضع القراءة */
.dark-mode.reader-mode {
 /* تحسين القراءة عبر تبسيط الواجهة */
 --letter-spacing: 0.01em;
 --line-height-relaxed: 1.8;
 --paragraph-spacing: 1.6em;
}

.dark-mode.reader-mode .passage-title {
 font-size: 1.5rem;
 margin-bottom: 1.5rem;
 font-weight: 600;
}

.dark-mode.reader-mode .reading-passage {
 max-width: 70ch; /* ضبط عرض مثالي للقراءة */
 margin-left: auto;
 margin-right: auto;
}

/* تحسينات الخطوط وضبط المسافات */
.dark-mode.reader-mode {
 letter-spacing: var(--letter-spacing);
}

.dark-mode.reader-mode h1, 
.dark-mode.reader-mode h2, 
.dark-mode.reader-mode h3, 
.dark-mode.reader-mode h4 {
 margin-top: 2em;
 margin-bottom: 1em;
}

.dark-mode.reader-mode ul,
.dark-mode.reader-mode ol {
 padding-left: 2em;
 margin-bottom: var(--paragraph-spacing);
}

.dark-mode.reader-mode li {
 margin-bottom: 0.7em;
}

/* تحسين التفاعل مع الفقرات */
.dark-mode.reader-mode p:focus,
.dark-mode.reader-mode p:hover {
 background-color: rgba(255, 255, 255, 0.03);
 border-radius: 4px;
}

/* إضافة تأثير القارئ */
.dark-mode.reader-mode .highlight-current-line {
 background-color: rgba(66, 135, 245, 0.1);
 border-radius: 4px;
 padding: 0.2em 0;
}

/* =============== تخصيصات وسائط طبقيّة للجوال =============== */
@media screen and (max-width: 768px) {
 .dark-mode .card,
 .dark-mode .question-display,
 .dark-mode .option,
 .dark-mode .notification,
 .dark-mode .feedback-box {
   border-radius: var(--radius-sm, 4px);
   padding: 12px;
 }
 
 .dark-mode .option:hover {
   transform: translateY(-1px);
 }
 
 .dark-mode .modal-content {
   width: 95%;
   max-height: 90vh;
 }
}

/* تحسينات لشاشات صغيرة جداً */
@media screen and (max-width: 480px) {
 .dark-mode body {
   font-size: 14px;
 }
 
 .dark-mode .btn {
   padding: 8px 12px;
 }
 
 .dark-mode .tab,
 .dark-mode .tab-btn {
   padding: 6px 10px;
 }
 
 .dark-mode .close-btn {
   width: 28px;
   height: 28px;
 }
}

/* =============== تحسينات أداء للمتصفحات الحديثة =============== */
@supports (content-visibility: auto) {
 .dark-mode .offscreen-content {
   content-visibility: auto;
   contain-intrinsic-size: 0 500px;
 }
}

/* =============== دعم تحسين الأداء لشاشات ذات كثافة بكسل عالية =============== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .dark-mode .icon-btn,
 .dark-mode .badge-icon,
 .dark-mode .stat-icon {
   transform: translateZ(0); /* تحسين دقة العرض */
 }
}

/* =============== انتهاء الملف =============== */