/* ===== تحسينات أداء التمرير (Scroll Performance) ===== */

/* 
 * هذه التحسينات تحل مشكلة التمرير المتقطع على الأجهزة المحمولة
 * والأجهزة ذات الأداء المنخفض
 */

/* ===== 1. تحسين عام للتمرير ===== */
* {
  /* تفعيل التمرير السلس على iOS */
  -webkit-overflow-scrolling: touch;
  
  /* منع تأخير التمرير */
  scroll-behavior: smooth;
}

/* ===== 2. تحسين المودالات والنوافذ المنبثقة ===== */
.modal-content,
[role="dialog"],
.fixed.inset-0 > div {
  /* تحسين الأداء باستخدام GPU acceleration */
  will-change: transform;
  transform: translateZ(0);
  
  /* عزل التخطيط والرسم */
  contain: layout style paint;
  
  /* تحسين الرسم */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ===== 3. تحسين القوائم القابلة للتمرير ===== */
.overflow-y-auto,
.overflow-auto,
.scrollable-list,
[class*="overflow-y-scroll"] {
  /* تفعيل التمرير السلس */
  -webkit-overflow-scrolling: touch;
  
  /* تحسين الأداء */
  will-change: scroll-position;
  
  /* منع layout thrashing */
  contain: layout style;
}

/* ===== 4. تحسين الجداول ===== */
table,
.table-container,
.overflow-x-auto {
  /* تحسين التمرير الأفقي */
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  
  /* عزل التخطيط */
  contain: layout;
}

/* ===== 5. تحسين البطاقات والعناصر المتكررة ===== */
.card,
[class*="bg-white"],
[class*="rounded"],
.border {
  /* تحسين الرسم */
  will-change: auto;
  
  /* منع re-paint غير ضروري */
  contain: layout style;
}

/* ===== 6. تحسين الأنيميشن والانتقالات ===== */
.transition,
.transition-all,
.transition-colors,
.transition-transform,
[class*="transition-"] {
  /* استخدام GPU للأنيميشن */
  will-change: transform, opacity;
  transform: translateZ(0);
  
  /* تحسين الأداء */
  backface-visibility: hidden;
}

/* ===== 7. تحسين الصور ===== */
img {
  /* منع layout shift */
  contain: layout;
  
  /* تحسين الرسم */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ===== 8. تحسين OrderDetailsModal خصوصاً ===== */
/* هذا المودال يعاني من مشاكل أداء عند التنقل بين المراحل */
.order-details-modal {
  will-change: contents;
  contain: layout style paint;
}

.order-details-modal .stage-content {
  /* عزل محتوى المرحلة */
  contain: layout style paint;
  will-change: contents;
}

.order-details-modal .timeline {
  /* تحسين timeline المراحل */
  contain: layout style;
  will-change: auto;
}

/* ===== 9. تحسين الأزرار ===== */
button,
[role="button"],
.btn {
  /* منع re-paint عند hover */
  contain: layout style;
  
  /* تحسين الاستجابة */
  will-change: background-color, transform;
}

/* ===== 10. تحسين القوائم الطويلة ===== */
/* للقوائم التي تحتوي على أكثر من 50 عنصر */
.long-list,
.orders-list,
.tasks-list {
  /* استخدام virtual scrolling optimization */
  contain: strict;
  content-visibility: auto;
}

.long-list > *,
.orders-list > *,
.tasks-list > * {
  /* عزل كل عنصر */
  contain: layout style paint;
  content-visibility: auto;
}

/* ===== 11. تحسين الفورمات والإدخالات ===== */
input,
textarea,
select {
  /* منع re-layout عند الكتابة */
  contain: layout style;
}

/* ===== 12. تحسين الـ Sticky Elements ===== */
.sticky,
[class*="sticky"] {
  /* تحسين الأداء للعناصر الثابتة */
  will-change: transform;
  transform: translateZ(0);
  contain: layout style;
}

/* ===== 13. تحسين الـ Fixed Elements ===== */
.fixed,
[class*="fixed"] {
  /* تحسين الأداء للعناصر المثبتة */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== 14. تحسين الـ Grid و Flexbox ===== */
.grid,
.flex,
[class*="grid-"],
[class*="flex-"] {
  /* تحسين التخطيط */
  contain: layout;
}

/* ===== 15. تحسين خاص للهواتف المحمولة ===== */
@media (max-width: 768px) {
  /* تقليل will-change على الهواتف لتوفير الذاكرة */
  * {
    will-change: auto !important;
  }
  
  /* تفعيل فقط للعناصر النشطة */
  *:active,
  *:focus,
  .scrolling {
    will-change: transform;
  }
  
  /* تحسين القوائم على الهواتف */
  .overflow-y-auto,
  .overflow-auto {
    /* استخدام momentum scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ===== 16. تحسين الـ Backdrop ===== */
.backdrop,
.overlay,
[class*="bg-black"],
[class*="bg-gray-900"] {
  /* تحسين الخلفية الشفافة */
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== 17. منع Layout Thrashing ===== */
/* تطبيق contain على العناصر الكبيرة */
.container,
.wrapper,
main,
section {
  contain: layout style;
}

/* ===== 18. تحسين الـ Hover Effects ===== */
@media (hover: hover) {
  /* تحسين hover فقط على الأجهزة التي تدعمه */
  button:hover,
  a:hover,
  [role="button"]:hover {
    will-change: background-color, transform;
  }
}

/* ===== 19. تحسين الـ Focus States ===== */
*:focus,
*:focus-visible {
  /* تحسين الأداء عند التركيز */
  will-change: outline, box-shadow;
}

/* ===== 20. تحسين الـ Loading States ===== */
.loading,
.spinner,
[class*="animate-spin"] {
  /* تحسين الأنيميشن */
  will-change: transform;
  transform: translateZ(0);
  animation-timing-function: linear;
}

/* ===== ملاحظات مهمة ===== */
/*
 * 1. will-change يجب استخدامه بحذر - لا تستخدمه على كل شيء
 * 2. contain يساعد في عزل التخطيط والرسم
 * 3. transform: translateZ(0) يفعّل GPU acceleration
 * 4. -webkit-overflow-scrolling: touch ضروري لـ iOS
 * 5. content-visibility: auto ممتاز للقوائم الطويلة
 */

/* ===== تحسينات إضافية للأداء ===== */

/* منع text selection أثناء التمرير */
.scrolling * {
  user-select: none;
  -webkit-user-select: none;
}

/* تحسين الـ Pointer Events */
.overlay,
.backdrop {
  pointer-events: auto;
}

.overlay > *:not(.modal-content),
.backdrop > *:not(.modal-content) {
  pointer-events: none;
}