/* تأثيرات Blur محسنة للهاتف المحمول */

/* تأثيرات الخلفية المطمسة */
.mobile-blur-overlay {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.12) 0%,
    rgba(255, 255, 255, 0.25) 30%,
    rgba(168, 85, 247, 0.08) 60%,
    rgba(236, 72, 153, 0.06) 100%
  );
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: backdrop-filter, opacity;
}

/* تأثير الظهور التدريجي */
.mobile-fade-in {
  animation: mobileBlurFadeIn 0.3s ease-out forwards;
}

@keyframes mobileBlurFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* تأثير الاختفاء التدريجي */
.mobile-fade-out {
  animation: mobileBlurFadeOut 0.2s ease-in forwards;
}

@keyframes mobileBlurFadeOut {
  from {
    opacity: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}

/* تحسين القائمة الجانبية */
.mobile-sidebar {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  background: rgba(255, 255, 255, 0.98) !important;
  border-right: 1px solid rgba(229, 231, 235, 0.6);
  box-shadow:
    0 32px 64px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  will-change: transform;
  /* تحسين التمرير */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* تحسين القائمة المنبثقة */
.mobile-modal-content {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  /* تحسين التمرير */
  overflow: hidden;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
}

/* تأثيرات الانتقال المحسنة */
.mobile-smooth-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* تحسين للأجهزة التي لا تدعم backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .mobile-blur-overlay {
    background: rgba(255, 255, 255, 0.9);
  }
  
  .mobile-sidebar {
    background: rgba(255, 255, 255, 0.98);
  }
  
  .mobile-modal-content {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* تحسين للوضع المظلم - معطل مؤقتاً */
/* @media (prefers-color-scheme: dark) {
  .mobile-blur-overlay {
    background: linear-gradient(135deg,
      rgba(30, 41, 59, 0.8) 0%,
      rgba(51, 65, 85, 0.6) 50%,
      rgba(30, 41, 59, 0.8) 100%
    );
  }

  .mobile-sidebar {
    background: rgba(30, 41, 59, 0.95);
    border-right: 1px solid rgba(71, 85, 105, 0.5);
  }

  .mobile-modal-content {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(71, 85, 105, 0.5);
  }
} */

/* تحسين الأداء للأجهزة الضعيفة */
@media (max-width: 480px) and (max-height: 800px) {
  .mobile-blur-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .mobile-sidebar,
  .mobile-modal-content {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* تحسين التمرير للهاتف */
@media (max-width: 768px) {
  .mobile-sidebar {
    /* ضمان عمل التمرير على الهاتف */
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    /* السماح بظهور المحتوى الداخلي والتمرير داخل العناصر الفرعية */
    overflow: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* تحسين التمرير للقسم الداخلي */
  .mobile-sidebar nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  /* تحسين شريط التمرير على الهاتف */
  .mobile-sidebar nav::-webkit-scrollbar {
    width: 4px;
  }

  .mobile-sidebar nav::-webkit-scrollbar-track {
    background: transparent;
  }

  .mobile-sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  }

  .mobile-sidebar nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }

  /* إضافة تحسينات إضافية للتمرير */
  .mobile-sidebar nav {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    position: relative !important;
    padding-bottom: 20px !important;
  }

  /* ضمان أن الهيدر والفوتر لا يأخذان مساحة من التمرير */
  .mobile-sidebar .flex-shrink-0 {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* إصلاح إضافي للتمرير على الأجهزة المختلفة */
  .mobile-sidebar nav * {
    pointer-events: auto !important;
  }

  /* منع تداخل الأحداث */
  .mobile-sidebar nav::-webkit-scrollbar {
    width: 6px !important;
    background: transparent !important;
  }

  .mobile-sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 3px !important;
  }

  /* إصلاح للأجهزة القديمة */
  .mobile-sidebar nav {
    transform: translateZ(0) !important;
    will-change: scroll-position !important;
  }

  /* تحسين التمرير للقائمة المنبثقة */
  .mobile-modal-content {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* تحسين شريط التمرير للقائمة المنبثقة */
  .mobile-modal-content .flex-1 {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .mobile-modal-content .flex-1::-webkit-scrollbar {
    width: 4px;
  }

  .mobile-modal-content .flex-1::-webkit-scrollbar-track {
    background: transparent;
  }

  .mobile-modal-content .flex-1::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 2px;
  }

  .mobile-modal-content .flex-1::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
  }

  /* تحسين إضافي للتمرير على iOS */
  .mobile-modal-content .flex-1 {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    position: relative !important;
  }

  /* إصلاح مشكلة التمرير على الأجهزة القديمة */
  .mobile-modal-content .flex-1 nav {
    padding-bottom: 20px !important;
  }
}

/* إصلاح خاص للتمرير على الهاتف - يطبق على جميع الأحجام */
.mobile-sidebar nav {
  /* ضمان عمل التمرير */
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  /* منع المشاكل الشائعة */
  overscroll-behavior-y: contain !important;
  scroll-behavior: smooth !important;

  /* تحسين الأداء */
  contain: layout style paint !important;
  isolation: isolate !important;
}

/* إصلاح خاص لـ iOS Safari */
@supports (-webkit-touch-callout: none) {
  .mobile-sidebar nav {
    -webkit-overflow-scrolling: touch !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

/* إصلاح التمرير للـ Modals */
.fixed.inset-0 {
  /* ضمان أن الـ modals تأخذ الارتفاع الكامل */
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
}

/* تحسين التمرير في OrderDetailsModal */
.fixed.inset-0 .flex-1.min-h-0.overflow-y-auto {
  /* ضمان عمل التمرير */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
}

/* تحسين التمرير في OrderFormModal */
.fixed.inset-0 .flex-1.min-h-0.overflow-y-auto {
  /* تحسين الأداء */
  contain: layout style paint !important;
  isolation: isolate !important;
}

/* شريط تمرير محسن للـ modals */
.fixed.inset-0 .overflow-y-auto::-webkit-scrollbar {
  width: 8px !important;
}

.fixed.inset-0 .overflow-y-auto::-webkit-scrollbar-track {
  background: rgba(243, 244, 246, 0.5) !important;
  border-radius: 4px !important;
}

.fixed.inset-0 .overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.7) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(243, 244, 246, 0.8) !important;
}

.fixed.inset-0 .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.8) !important;
}

/* إصلاح خاص للأزرار الثابتة في الأسفل */
.sticky.bottom-0 {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* ضمان أن الأزرار تظهر فوق المحتوى */
.fixed.inset-0 .sticky.bottom-0 {
  background: white !important;
  border-top: 1px solid #e5e7eb !important;
}

/* تحسين إضافي للتمرير مع الأزرار الثابتة */
.fixed.inset-0 .overflow-y-auto {
  padding-bottom: 0 !important;
  scroll-padding-bottom: 80px !important;
}

/* إصلاح التمرير في MaterialSyncModal */
.fixed.inset-0 .flex-1.min-h-0.overflow-y-auto {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
  position: relative !important;
  height: 100% !important;
}

/* ضمان عمل التمرير على الموبايل */
@media (max-width: 768px) {
  .fixed.inset-0 .flex-1.min-h-0.overflow-y-auto {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  /* تحسين شريط التمرير على الموبايل */
  .fixed.inset-0 .flex-1.min-h-0.overflow-y-auto::-webkit-scrollbar {
    width: 4px !important;
  }

  .fixed.inset-0 .flex-1.min-h-0.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.4) !important;
    border-radius: 2px !important;
  }
}

/* تحسين للشاشات عالية الكثافة */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .mobile-blur-overlay {
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
  }
}

/* تأثيرات تفاعلية للعناصر */
.mobile-nav-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.mobile-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(147, 51, 234, 0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: -1;
}

.mobile-nav-item:hover::before,
.mobile-nav-item:active::before {
  opacity: 1;
}

.mobile-nav-item:active {
  transform: scale(0.98);
}

/* تأثير الضغط للأزرار */
.mobile-button-press {
  transition: all 0.1s ease;
  position: relative;
  overflow: hidden;
}

.mobile-button-press:active {
  transform: scale(0.95);
  filter: brightness(0.95);
}

/* تأثير Ripple للضغط */
.mobile-button-press::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}

.mobile-button-press:active::after {
  width: 200px;
  height: 200px;
}

/* تحسين الرسوم المتحركة للأجهزة الضعيفة */
@media (prefers-reduced-motion: reduce) {
  .mobile-blur-overlay,
  .mobile-sidebar,
  .mobile-modal-content,
  .mobile-nav-item,
  .mobile-button-press {
    transition: none;
    animation: none;
  }

  .mobile-blur-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.9);
  }
}

/* تحسينات الأداء */
.mobile-performance-optimized {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* تأثيرات متقدمة للشاشات الحديثة */
@supports (backdrop-filter: blur(1px)) {
  .mobile-glass-effect {
    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.05) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

/* تأثير الضوء المتحرك */
.mobile-shimmer {
  position: relative;
  overflow: hidden;
}

.mobile-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}