/* 
  تصميم متجاوب محسّن لتطبيق بنك أسئلة اللغة الإنجليزية
  إصدار ٤.٠ - ٢٠٢٥/٠٣/٢٨ - مدرسة رقية بنت الرسول، الأردن
  يعتمد على variables.css و components.css
*/

/* ==================== إعدادات وثوابت أساسية ==================== */
:root {
  /* تعريف متغيرات إضافية للأجهزة الخاصة */
  --breakpoint-fold: 280px; /* لأجهزة الطي المطوية */
  --breakpoint-ultra: 1920px; /* للشاشات العريضة جداً */
  
  /* إعدادات الحجم النسبي لواجهة المستخدم */
  --touch-target-size: 44px; /* الحجم الأدنى للعناصر القابلة للمس وفقاً لإرشادات Apple وGoogle */
}

/* ==================== أساسيات التصميم المتجاوب ==================== */
html {
  font-size: 100%; /* استخدام النسبة المئوية يسمح بتغيير حجم الخط من إعدادات المتصفح */
  -webkit-text-size-adjust: 100%; /* منع تغيير حجم النص تلقائياً في iOS */
}

/* ضمان عدم تجاوز الصور والوسائط لحاوياتها */
img, video, canvas, svg, iframe, picture {
  max-width: 100%;
  height: auto;
  display: block; /* منع المسافات الفارغة تحت العناصر */
}

/* تحسين قراءة النصوص باستخدام ميزة CSS الحديثة مع دعم المتصفحات القديمة */
p, li, blockquote {
  max-width: 75ch; /* يحدد عرض النص لتحسين القراءة (character units) */
  overflow-wrap: break-word;
  word-wrap: break-word; /* دعم المتصفحات القديمة */
  hyphens: auto; /* التجزئة التلقائية للكلمات الطويلة - تحتاج لتعريف lang في HTML */
}

/* ==================== تحسينات اللمس وإدخال المستخدم ==================== */
/* تحسينات للأجهزة اللمسية - استخدام media query أكثر دقة */
@media (pointer: coarse) {
  /* تكبير العناصر القابلة للمس على الأجهزة اللمسية */
  button,
  .btn,
  input[type="submit"],
  input[type="button"],
  input[type="checkbox"],
  input[type="radio"],
  select,
  .nav-item,
  .sidebar-menu li,
  .icon-btn,
  [role="button"],
  a.card,
  .interactive-element {
    min-height: var(--touch-target-size);
    min-width: var(--touch-target-size);
    padding: var(--space-md) var(--space-lg);
    touch-action: manipulation; /* تحسين الأداء عند النقر */
  }
  
  /* زيادة المسافة بين العناصر القابلة للمس */
  .touch-spacing > * {
    margin-bottom: var(--space-md);
  }
  
  /* تحسين تجربة النقر */
  [role="button"],
  a:link,
  button,
  .btn {
    cursor: pointer; /* تغيير شكل المؤشر */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); /* تأثير نقر دقيق */
  }
  
  /* التدرج البصري عند النقر */
  .btn:active,
  button:active,
  [role="button"]:active,
  a.card:active {
    transform: scale(0.98);
  }
}

/* تحسين المؤثرات البصرية للأجهزة التي تدعم التحويم فقط */
@media (hover: hover) {
  .btn:hover,
  button:hover,
  a:hover,
  [role="button"]:hover {
    transition: all 0.2s ease;
  }
  
  .hover-effects .card:hover,
  .hover-effects .question-display:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
}

/* تحسينات التنقل باستخدام لوحة المفاتيح */
:focus-visible {
  outline: 3px solid var(--focus-color, var(--primary-color));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==================== نظام القوالب المتجاوب ==================== */
/* Container مركزي ومتجاوب */
.container {
  width: 100%;
  padding-right: var(--space-md);
  padding-left: var(--space-md);
  margin-right: auto;
  margin-left: auto;
}

/* ==================== استعلامات الوسائط الرئيسية - نهج متناسق ==================== */

/* ===================== 1. الأجهزة الصغيرة جداً (حتى --breakpoint-fold) ===================== */
@media (max-width: var(--breakpoint-fold)) {
  :root {
    /* تصغير حجم الخط والمسافات للأجهزة الصغيرة جداً مثل Galaxy Fold */
    --fs-base: 0.8125rem;
    --space-unit: 0.25rem; /* تصغير وحدة المسافة الأساسية */
  }
  
  /* تعديلات للشاشات الصغيرة جداً */
  .navbar-logo {
    width: 120px;
  }
  
  .sidebar {
    width: 90%;
  }
  
  /* تبسيط واجهة المستخدم للشاشات الصغيرة جداً */
  .fold-hide {
    display: none !important;
  }
  
  .question-header,
  .card-header,
  .form-group {
    padding: var(--space-xs);
  }
}

/* ===================== 2. الهواتف الصغيرة (حتى --breakpoint-sm) ===================== */
@media (max-width: var(--breakpoint-sm)) {
  :root {
    /* تصغير حجم الخط الأساسي للشاشات الصغيرة */
    --fs-base: 0.875rem;
  }

  /* ===== تعديلات هيكلية ===== */
  .container {
    padding: var(--space-sm);
  }
  
  .content-area {
    padding: var(--space-sm);
  }
  
  /* ===== شريط التنقل ===== */
  .navbar {
    flex-direction: column;
    height: auto;
    padding: var(--space-sm);
  }
  
  .navbar-logo {
    margin-bottom: var(--space-sm);
    width: 100%;
  }
  
  .navbar-controls {
    width: 100%;
    justify-content: space-between;
  }
  
  .school-banner {
    display: none;
  }
  
  .logo-text h1 {
    font-size: var(--fs-lg);
  }
  
  .logo-text h2 {
    font-size: var(--fs-xs);
  }
  
  /* ===== الشريط الجانبي ===== */
  .sidebar {
    position: fixed;
    width: 85%;
    transform: translateX(100%);
    z-index: var(--z-fixed);
    top: 0;
    bottom: 0;
    transition: transform var(--transition-base);
  }
  
  .sidebar.active {
    transform: translateX(0);
  }
  
  /* ===== عرض السؤال ===== */
  .question-display {
    padding: var(--space-md);
    min-height: 300px;
  }
  
  .question-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .question-meta {
    margin-bottom: var(--space-sm);
    width: 100%;
  }
  
  .question-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: var(--space-sm);
  }
  
  /* ===== خيارات الإجابة ===== */
  .option {
    padding: var(--space-sm);
  }
  
  .true-false-options {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  /* ===== نماذج وأزرار ===== */
  .controls-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .answer-actions {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  /* ===== الرسائل والنوافذ ===== */
  .modal-content {
    width: 95%;
    padding: var(--space-sm);
  }
  
  /* ===== الإشعارات ===== */
  .notification-area {
    right: var(--space-sm);
    left: var(--space-sm);
    max-width: none;
  }
  
  .notification {
    width: 100%;
  }
  
  /* ===== إحصائيات ولوحات معلومات ===== */
  .stats-grid,
  .badges-grid, 
  .rewards-items {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* ===================== 3. الأجهزة اللوحية الصغيرة (--breakpoint-sm - --breakpoint-md) ===================== */
@media (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 0.02px)) {
  :root {
    --fs-base: 0.9375rem;
  }
  
  /* ===== تعديلات هيكلية ===== */
  .container {
    padding: var(--space-md);
    max-width: var(--container-max-width-sm, 540px);
  }
  
  /* ===== الشريط الجانبي ===== */
  .sidebar {
    position: fixed;
    width: 300px;
    transform: translateX(100%);
    z-index: var(--z-fixed);
    transition: transform var(--transition-base);
  }
  
  .sidebar.active {
    transform: translateX(0);
  }
  
  /* ===== شبكات عناصر ===== */
  .stats-grid,
  .grid-container,
  .rewards-items,
  .badges-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  
  /* ===== عناصر التفاعل ===== */
  .controls-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  
  /* ===== النوافذ والرسائل ===== */
  .modal-content {
    width: 90%;
    max-width: 500px;
  }
}

/* ===================== 4. الأجهزة اللوحية (--breakpoint-md - --breakpoint-lg) ===================== */
@media (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 0.02px)) {
  /* ===== تعديلات هيكلية ===== */
  .container {
    padding: var(--space-lg);
    max-width: var(--container-max-width-md, 720px);
  }
  
  /* ===== الشريط الجانبي ===== */
  .sidebar {
    width: 240px;
  }
  
  /* ===== شبكات عناصر ===== */
  .stats-grid,
  .badges-grid,
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
  
  /* ===== مكونات المكافأة ===== */
  .rewards-items {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  
  /* ===== التنبيهات والنوافذ ===== */
  .notification {
    max-width: 320px;
  }
  
  .modal-content {
    max-width: 650px;
  }
}

/* ===================== 5. الحواسيب المحمولة (--breakpoint-lg - --breakpoint-xl) ===================== */
@media (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 0.02px)) {
  /* ===== تعديلات هيكلية ===== */
  .container {
    max-width: var(--container-max-width-lg, 960px);
  }
  
  /* ===== شبكات عناصر ===== */
  .stats-grid,
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
  
  /* ===== مكونات التقدم ===== */
  .progress-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
  
  /* ===== مكونات المكافأة ===== */
  .badges-grid,
  .rewards-items {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

/* ===================== 6. الشاشات الكبيرة (--breakpoint-xl - --breakpoint-xxl) ===================== */
@media (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-xxl) - 0.02px)) {
  /* ===== تعديلات هيكلية ===== */
  .container {
    max-width: var(--container-max-width-xl, 1140px);
  }
  
  /* ===== شبكات عناصر ===== */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .grid-container {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .badges-grid,
  .rewards-items {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* ===== لوحة المعلومات ===== */
  .dashboard-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
  }
}

/* ===================== 7. الشاشات الكبيرة جداً (--breakpoint-xxl وما فوق) ===================== */
@media (min-width: var(--breakpoint-xxl)) {
  /* ===== تعديلات هيكلية ===== */
  .container {
    max-width: var(--container-max-width-xxl, 1320px);
  }
}

/* ===================== 8. الشاشات العريضة جداً (--breakpoint-ultra وما فوق) ===================== */
@media (min-width: var(--breakpoint-ultra)) {
  /* تحسينات لشاشات 4K والشاشات العريضة */
  :root {
    --fs-base: 1.05rem; /* زيادة حجم الخط قليلاً للشاشات الكبيرة جداً */
  }
  
  /* ===== تعديلات هيكلية ===== */
  .container {
    max-width: var(--container-max-width-ultra, 1560px);
  }
  
  /* تحسين تخطيط عرض المحتوى في الشاشات العريضة */
  .ultrawide-layout {
    display: grid;
    grid-template-columns: 1fr min(var(--container-max-width-xxl, 1320px), 100%) 1fr;
  }
  
  .ultrawide-layout > * {
    grid-column: 2;
  }
  
  /* تصميم أكثر تقدماً للوحة المعلومات */
  .ultrawide-dashboard {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: var(--space-xl);
  }
  
  /* تحسين عرض الأسئلة والمحتوى في الشاشات العريضة */
  .question-section {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-xl);
  }
}

/* ==================== دعم أجهزة الطي الحديثة ==================== */
/* دعم للأجهزة القابلة للطي في وضع التجزئة */
@media (horizontal-viewport-segments: 2) {
  .fold-layout {
    display: grid;
    grid-template-columns: calc(env(viewport-segment-width 0 0) - var(--space-md)) calc(env(viewport-segment-width 1 0) - var(--space-md));
    grid-template-rows: auto;
    grid-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }
  
  .fold-primary {
    grid-column: 1;
  }
  
  .fold-secondary {
    grid-column: 2;
  }
}

/* دعم للأجهزة القابلة للطي في وضع التجزئة الرأسي */
@media (vertical-viewport-segments: 2) {
  .fold-layout-vertical {
    display: grid;
    grid-template-rows: calc(env(viewport-segment-height 0 0) - var(--space-md)) calc(env(viewport-segment-height 0 1) - var(--space-md));
    grid-template-columns: auto;
    grid-gap: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
  }
  
  .fold-primary-vertical {
    grid-row: 1;
  }
  
  .fold-secondary-vertical {
    grid-row: 2;
  }
}

/* ==================== تعديلات حسب اتجاه الشاشة ==================== */
/* وضع الشاشة الأفقي في الأجهزة اللوحية والهواتف */
@media (orientation: landscape) and (max-width: var(--breakpoint-lg)) {
  .content-area {
    padding: var(--space-sm);
  }
  
  .sidebar {
    width: 30%;
  }
  
  /* تحسين قراءة النصوص في الوضع الأفقي */
  .reading-passage {
    max-width: 700px;
    margin: 0 auto;
  }
  
  /* تخطيط خاص بالوضع الأفقي */
  .landscape-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
  
  /* تحسينات خاصة للمحتوى في الوضع الأفقي */
  .question-section.landscape {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
  
  /* شريط تنقل جانبي في الوضع الأفقي */
  .mobile-side-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    background-color: var(--bg-secondary);
    z-index: var(--z-fixed);
  }
}

/* ==================== تحسينات خاصة بالأطفال ==================== */
/* زيادة حجم العناصر التفاعلية لسهولة الاستخدام للأطفال */
.kid-friendly button,
.kid-friendly .btn,
.kid-friendly .icon-btn {
  border-radius: calc(var(--radius-md) * 1.5);
  font-size: calc(var(--fs-md) * 1.1);
  padding: var(--space-md) var(--space-lg);
}

/* تحسين قراءة النصوص للأطفال */
.kid-friendly p,
.kid-friendly .question-text,
.kid-friendly .option-text {
  line-height: 1.8;
  font-size: calc(var(--fs-md) * 1.05);
  letter-spacing: 0.01em;
}

/* تكبير رموز الأيقونات للأطفال */
.kid-friendly i,
.kid-friendly .icon {
  font-size: 1.25em;
}

/* تحسينات إضافية للواجهة المخصصة للأطفال */
@media (max-width: var(--breakpoint-md)) {
  .kid-friendly .option {
    padding: var(--space-md);
    margin-bottom: var(--space-md);
  }
  
  .kid-friendly .btn {
    width: 100%;
    text-align: center;
    margin-bottom: var(--space-sm);
  }
}

/* ==================== تحسينات الجداول المتجاوبة ==================== */
.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* تحسين التمرير على iOS */
  scrollbar-width: thin; /* تحسين عرض شريط التمرير في Firefox */
}

.responsive-table table {
  min-width: 600px;
  width: 100%;
  border-collapse: collapse;
}

/* استخدام CSS Grid الحديث للجداول المتجاوبة - بديل متقدم */
.grid-table {
  display: grid;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.grid-table-header {
  display: grid;
  background-color: var(--bg-secondary);
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1;
}

.grid-table-row {
  display: grid;
  border-bottom: 1px solid var(--border-color);
}

/* توليد أعمدة متساوية ديناميكياً باستخدام CSS الحديث */
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* جداول متجاوبة للشاشات الصغيرة جداً */
@media (max-width: 480px) {
  .stack-table thead {
    display: none;
  }
  
  .stack-table td {
    display: block;
    width: 100%;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  
  .stack-table td::before {
    content: attr(data-label);
    position: absolute;
    right: var(--space-md);
    width: 45%;
    font-weight: bold;
  }
  
  /* تبديل الجدول إلى بطاقات في الشاشات الصغيرة */
  .card-table .tr {
    display: block;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    box-shadow: var(--shadow-sm);
    background-color: var(--bg-card);
  }
  
  .card-table .td {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-xs) 0;
  }
  
  .card-table .td:last-child {
    border-bottom: none;
  }
}

/* ==================== تحسينات النماذج المتجاوبة ==================== */
.responsive-form {
  width: 100%;
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: var(--breakpoint-md)) {
  .form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: var(--breakpoint-md)) {
  .responsive-form .form-group {
    margin-bottom: var(--space-md);
  }
  
  .responsive-form label {
    display: block;
    margin-bottom: var(--space-xs);
  }
  
  .responsive-form input,
  .responsive-form select,
  .responsive-form textarea {
    width: 100%;
    font-size: 16px; /* منع التكبير التلقائي في iOS */
  }
  
  .responsive-form .form-inline {
    flex-direction: column;
  }
  
  /* ===== وضع التنقل السفلي ===== */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: var(--z-fixed);
  }
  
  .dark-mode .mobile-bottom-nav {
    background-color: var(--bg-secondary);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  }
  
  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  
  .mobile-nav-item i {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-xxs);
  }
  
  .mobile-nav-item span {
    font-size: var(--fs-xs);
  }
  
  .mobile-nav-item.active {
    color: var(--primary-color);
  }
  
  /* تعديل تباعد المحتوى عند وجود شريط التنقل السفلي */
  .has-bottom-nav .content-area {
    padding-bottom: calc(var(--space-lg) + 60px);
  }
}

/* ==================== المنطقة الآمنة لهواتف آيفون الحديثة وغيرها ==================== */
/* تحسين دعم المنطقة الآمنة بطريقة متقدمة لدعم أجهزة iPhone الحديثة وغيرها */
.safe-area-inset {
  /* استخدام تقنية CSS الحديثة للدعم المتوافق */
  padding: max(var(--space-md), env(safe-area-inset-top)) 
           max(var(--space-md), env(safe-area-inset-right)) 
           max(var(--space-md), env(safe-area-inset-bottom)) 
           max(var(--space-md), env(safe-area-inset-left));
}

.safe-area-top {
  padding-top: max(var(--space-md), env(safe-area-inset-top));
}

.safe-area-bottom {
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}

.safe-area-left {
  padding-left: max(var(--space-md), env(safe-area-inset-left));
}

.safe-area-right {
  padding-right: max(var(--space-md), env(safe-area-inset-right));
}

/* تطبيق المنطقة الآمنة تلقائياً على عناصر التنقل */
.navbar,
.mobile-bottom-nav,
.mobile-side-nav {
  padding-top: max(0px, env(safe-area-inset-top));
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* تعديل ارتفاع العناصر الثابتة لتناسب المنطقة الآمنة */
.fixed-top {
  top: env(safe-area-inset-top, 0);
}

.fixed-bottom {
  bottom: env(safe-area-inset-bottom, 0);
}

/* ==================== فئات المساعدة المتجاوبة ==================== */
/* عرض/إخفاء عناصر حسب حجم الشاشة - باستخدام المتغيرات */
.hide-xs { display: none; }

@media (min-width: var(--breakpoint-sm)) {
  .hide-xs { display: initial; }
  .show-xs-only { display: none; }
}

@media (max-width: calc(var(--breakpoint-md) - 0.02px)) {
  .hide-sm-down { display: none; }
}

@media (min-width: var(--breakpoint-md)) {
  .show-sm-down { display: none; }
}

@media (max-width: calc(var(--breakpoint-lg) - 0.02px)) {
  .hide-md-down { display: none; }
}

@media (min-width: var(--breakpoint-lg)) {
  .show-md-down { display: none; }
}

@media (max-width: calc(var(--breakpoint-xl) - 0.02px)) {
  .hide-lg-down { display: none; }
}

@media (min-width: var(--breakpoint-xl)) {
  .show-lg-down { display: none; }
}

/* صفوف وأعمدة متجاوبة باستخدام Grid و Flexbox الحديثة */
.responsive-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.responsive-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--space-md) * -0.5);
}

.responsive-col {
  flex: 1 0 100%;
  padding: 0 calc(var(--space-md) * 0.5);
  margin-bottom: var(--space-md);
}

/* استخدام مزايا CSS الحديثة لتحقيق نظام شبكة متقدم */
@media (min-width: var(--breakpoint-sm)) {
  .responsive-col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: var(--breakpoint-md)) {
  .responsive-col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  .responsive-col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: var(--breakpoint-lg)) {
  .responsive-col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* ==================== تحسين التحميل المتأخر للصور ==================== */
/* تحسين أداء الصور باستخدام التحميل المتأخر */
.lazy-load {
  opacity: 0;
  transition: opacity var(--transition-base);
}

.lazy-load.loaded {
  opacity: 1;
}

/* دعم التحميل المتأخر الأصلي في HTML5 مع الحفاظ على التوافق الخلفي */
img.native-lazy {
  loading: lazy; /* ميزة HTML5 الحديثة */
}

/* استراتيجية Blur-up للصور - عرض صورة ضبابية صغيرة أولاً ثم تحميل الصورة الأصلية */
.blur-up {
  filter: blur(5px);
  transition: filter var(--transition-base);
}

.blur-up.loaded {
  filter: blur(0);
}

/* ==================== تحسينات أداء CSS ==================== */
/* استخدام معقول للعناصر ذات will-change */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* تحسين الأداء للمتحركات باستخدام transform بدلاً من خصائص أخرى */
.optimize-animation {
  transform: translateZ(0); /* تفعيل تسريع GPU */
  backface-visibility: hidden; /* منع المشكلات البصرية في بعض المتصفحات */
}

/* تحسين تقديم النصوص - منع التأخير في عرض النصوص */
.optimize-text {
  text-rendering: optimizeSpeed;
}

/* تحسين عرض الصور المتدرجة والرسومات المعقدة */
svg.optimize,
canvas.optimize {
  shape-rendering: optimizeSpeed;
}

/* ==================== تحسينات إمكانية الوصول المتجاوبة ==================== */
/* تكبير عناصر إضافية للقراءة السهلة في وضع النص الكبير */
.large-text-mode {
  --fs-base-multiplier: 1.1;
  --space-multiplier: 1.2;
}

.large-text-mode .question-text,
.large-text-mode .reading-passage,
.large-text-mode p,
.large-text-mode li {
  font-size: calc(var(--fs-base) * var(--fs-base-multiplier, 1.1));
  line-height: 1.7;
  margin-bottom: calc(var(--space-md) * var(--space-multiplier, 1.2));
}

.large-text-mode .option,
.large-text-mode .form-control,
.large-text-mode button,
.large-text-mode input {
  padding: calc(var(--space-sm) * var(--space-multiplier, 1.2));
}

/* توفير تباين أفضل للقراءة في الوضع عالي التباين */
.high-contrast-mode {
  --contrast-text-multiplier: 1.2;
  --contrast-border-width: 2px;
}

.high-contrast-mode .question-text,
.high-contrast-mode h1,
.high-contrast-mode h2,
.high-contrast-mode h3,
.high-contrast-mode h4,
.high-contrast-mode label,
.high-contrast-mode button {
  font-weight: 700;
}

.high-contrast-mode .badge,
.high-contrast-mode .tag,
.high-contrast-mode .label,
.high-contrast-mode button,
.high-contrast-mode input,
.high-contrast-mode select,
.high-contrast-mode .card {
  border: var(--contrast-border-width, 2px) solid currentColor;
}

.high-contrast-mode .btn {
  text-shadow: none;
}

/* دعم القراءة بالشاشة والتكنولوجيا المساعدة */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==================== التكيف مع تفضيلات النظام ==================== */
/* دعم وضع الحركة المخفضة للمستخدمين الذين يفضلون ذلك */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .prefers-reduced-motion,
  .prefers-reduced-motion * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  
  /* إيقاف تأثيرات التحويم التي تتضمن حركة */
  .hover-effects .card:hover,
  .hover-effects .question-display:hover {
    transform: none !important;
  }
}

/* دعم وضع التباين العالي للمستخدمين الذين يفضلون ذلك */
@media (prefers-contrast: more) {
  :root {
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
  
  .prefers-high-contrast,
  button,
  .btn,
  .card,
  .option,
  .form-control {
    border: 1px solid currentColor;
  }
  
  /* زيادة التباين للنصوص */
  body {
    color: #000;
    background-color: #fff;
  }
  
  .dark-mode body {
    color: #fff;
    background-color: #000;
  }
}

/* دعم وضع اللون الداكن للمستخدمين الذين يفضلون ذلك */
@media (prefers-color-scheme: dark) {
  :root.auto-dark-mode {
    /* تطبيق متغيرات الوضع الداكن تلقائياً */
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-card: var(--dark-bg-card);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --border-color: var(--dark-border-color);
  }
}

/* ==================== دعم الطباعة ==================== */
@media print {
  /* إعدادات أساسية للطباعة */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* إخفاء العناصر غير الضرورية للطباعة */
  .print-hidden,
  nav,
  .navbar,
  .sidebar,
  .mobile-bottom-nav,
  .btn-primary,
  .icon-btn,
  footer,
  .notification-area,
  .settings-panel {
    display: none !important;
  }
  
  /* إظهار العناصر المخصصة للطباعة */
  .print-visible {
    display: block !important;
  }
  
  /* التحكم في فواصل الصفحات */
  .print-break-before {
    page-break-before: always;
    break-before: page;
  }
  
  .print-break-after {
    page-break-after: always;
    break-after: page;
  }
  
  .print-break-inside-avoid {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* تعديلات على الحاويات للطباعة */
  .print-container,
  .container {
    padding: 0.5cm;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* تحسينات طباعة خاصة بالتطبيق */
  .question-display,
  .reading-passage,
  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  
  /* تحسينات طباعة للنصوص */
  h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
    break-inside: avoid;
    font-weight: bold;
  }
  
  p, li {
    orphans: 3; /* الحد الأدنى لعدد السطور في نهاية الصفحة */
    widows: 3; /* الحد الأدنى لعدد السطور في بداية الصفحة */
  }
  
  img {
    max-height: 200mm;
    break-inside: avoid;
  }
  
  /* تضمين روابط URL في الطباعة */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
  
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  
  /* استثناء بعض الروابط من عرض URL */
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a.print-hide-href::after {
    content: "";
  }
  
  /* إعدادات صفحة الطباعة */
  @page {
    margin: 1.5cm;
    size: A4;
  }
  
  /* تحسين عرض الجداول في الطباعة */
  table {
    border-collapse: collapse !important;
  }
  
  th, td {
    border: 1px solid #ddd !important;
    padding: 0.25cm !important;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* عرض الروابط القابلة للنقر في الطباعة */
  .print-links-intact a::after {
    content: none !important;
  }
}