/* Arabic Performance Optimizations */
/* Specific optimizations for Arabic text rendering and RTL layout performance */

/* Font optimization for Arabic text */
@font-face {
  font-family: 'Arabic-Optimized';
  src: local('Tahoma'), local('Arial Unicode MS'), local('Segoe UI');
  font-display: swap;
  /* Improve loading performance */
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
  /* Arabic Unicode ranges */
}

/* Performance optimizations for Arabic content */
html.rtl,
html[lang="ar"] {
  /* Optimize text rendering */
  text-rendering: optimizeSpeed;
  font-feature-settings: normal;
  font-variant-ligatures: normal;
  /* IMPORTANT: Removed contain/layout + transform to prevent breaking position:fixed elements */
  will-change: auto;
}

/* Ensure body in RTL has no transforms that would create a containing block for fixed children */
body.rtl {
  transform: none !important;
}

/* Optimize Arabic text elements */
.rtl *,
[lang="ar"] * {
  /* Fast text rendering for Arabic */
  text-rendering: optimizeSpeed;
  font-feature-settings: normal;

  /* Reduce font complexity for better performance */
  font-variant-ligatures: none;
  font-variant-numeric: normal;

  /* Optimize Arabic shaping */
  font-kerning: normal;
  text-orientation: mixed;
}

/* Specific optimizations for input fields in Arabic */
.rtl input,
.rtl textarea,
[lang="ar"] input,
[lang="ar"] textarea {
  /* Optimize text input performance */
  text-rendering: optimizeSpeed;
  font-feature-settings: normal;

  /* Improve Arabic text input responsiveness */
  ime-mode: auto;
  writing-mode: horizontal-tb;

  /* GPU acceleration for smooth typing */
  transform: translateZ(0);
  will-change: contents;
}

/* Optimize containers that frequently change content */
.rtl .nav-item,
.rtl .kpi-card,
.rtl .widget-card {
  /* Keep containment for performance */
  contain: layout style;
  transform: translateZ(0);
}

/* IMPORTANT: avoid transforms on fixed bars to keep them glued to viewport */
.rtl .topbar,
.rtl .sidebar {
  contain: layout style;
  transform: none !important;
  /* previously translateZ(0) caused scrolling issue */
}

/* Optimize scrollable content in RTL */
.rtl .scrollable,
.rtl .overflow-auto,
.rtl .overflow-scroll {
  /* Smooth scrolling optimization */
  scroll-behavior: auto;
  /* Disable smooth scroll for better performance */
  will-change: scroll-position;

  /* Optimize scrollbar rendering */
  scrollbar-width: thin;
}

/* Reduce repaints for dynamic content */
.rtl [data-i18n],
.rtl [data-i18n-placeholder],
.rtl [data-i18n-title] {
  /* Contain layout changes during translation */
  contain: layout;
}

/* Performance optimization for tables in RTL */
.rtl table {
  /* Fixed layout for better performance */
  table-layout: fixed;
  contain: layout style;

  /* Optimize rendering */
  border-collapse: separate;
  border-spacing: 0;
}

/* Optimize modal and overlay rendering */
.rtl .modal,
.rtl .overlay,
.rtl .dropdown-menu {
  /* GPU acceleration for smooth animations */
  transform: translateZ(0);
  will-change: transform, opacity;
  contain: layout style;
}

/* Optimize frequently updated elements */
.rtl .notification,
.rtl .alert,
.rtl .toast {
  /* GPU layer for smooth animations */
  transform: translateZ(0);
  will-change: transform, opacity;
  contain: layout style;
}

/* Critical performance fix for Arabic direction changes */
.rtl-transition {
  /* Optimize direction transitions */
  transition: margin 0.2s ease, padding 0.2s ease;
  will-change: margin, padding;
}

/* Optimize chart containers in RTL (keep LTR for data) */
.rtl .chart-container,
.rtl .chart-wrapper {
  /* Keep charts LTR but optimize container */
  direction: ltr;
  contain: layout style;
  transform: translateZ(0);
}

/* Font loading optimization for Arabic */
@media (prefers-reduced-motion: no-preference) {
  .rtl * {
    /* Smooth transitions only when motion is preferred */
    transition: none;
    /* Disable transitions for better Arabic performance */
  }
}

/* Optimize Arabic text measurement and layout */
.rtl .text-measure,
.rtl .text-truncate {
  /* Optimize text measurement in RTL */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  contain: layout;
}

/* Performance optimization for dynamic content */
.rtl [data-dynamic],
.rtl .dynamic-content {
  /* Contain layout changes */
  contain: layout style;
  transform: translateZ(0);
}

/* Reduce complexity for better Arabic rendering performance */
.rtl .complex-layout {
  /* Simplify layout calculations */
  contain: layout;
  transform: translateZ(0);
}

/* Critical: Optimize the main content area for Arabic */
.rtl .main-content {
  /* Optimize main content rendering */
  contain: layout;
  transform: translateZ(0);
  will-change: margin;
}

/* Optimize sidebar for RTL switching */
.rtl .sidebar {
  /* Optimize sidebar transitions without breaking fixed positioning */
  will-change: auto;
  contain: layout style;
}

/* ============================================= */
/* MOBILE RTL PERFORMANCE OPTIMIZATIONS        */
/* ============================================= */

/* Mobile-specific RTL performance fixes */
@media (max-width: 768px) {

  /* Reduce animation complexity on mobile for better performance */
  .rtl * {
    /* Reduce transition complexity on mobile */
    transition: none !important;
    animation-duration: 0.1s !important;
    animation-fill-mode: none !important;
  }

  /* Keep essential transitions only */
  .rtl .sidebar,
  .rtl .modal-overlay,
  .rtl .dropdown,
  .rtl .warehouse-side-panel {
    transition: transform 0.2s ease !important;
  }

  /* Mobile RTL layout performance optimizations */
  .rtl .main-content {
    /* Remove heavy containment on mobile */
    contain: none !important;
    transform: none !important;
    will-change: auto !important;
    overflow-x: hidden !important;
  }

  .rtl #inventory-content {
    /* Optimize inventory content on mobile */
    contain: layout !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .rtl .inventory-widget-grid {
    /* Simplify grid calculations */
    contain: layout !important;
    display: block !important;
  }

  .rtl .widget-card,
  .rtl .stock-overview-widget,
  .rtl .low-stock-widget,
  .rtl .movements-widget,
  .rtl .warehouse-card {
    /* Optimize widget rendering on mobile */
    contain: layout style !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Critical: Prevent horizontal overflow in RTL mobile */
  .rtl body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .rtl .dashboard-container {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Optimize Arabic text input on mobile */
  .rtl input,
  .rtl textarea,
  .rtl .search-input {
    /* Optimize mobile text input */
    font-size: 16px !important;
    /* Prevent zoom on iOS */
    text-rendering: optimizeSpeed !important;
    font-feature-settings: normal !important;
    -webkit-text-size-adjust: none !important;
  }

  /* Mobile RTL inventory search optimization */
  .rtl .inventory-search {
    width: 100% !important;
    max-width: 100% !important;
    contain: layout !important;
  }

  .rtl .search-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}