@tailwind base;
@tailwind components;
@tailwind utilities;

/* Global animations for smooth interactions */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Smooth scrolling for better UX */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Global focus styles for better accessibility */
*:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
  border-radius: 4px;
}



/* Prevent iOS Safari from auto-zooming on input focus (triggered when font-size < 16px) */
@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: max(16px, 1em);
  }
}

/* Ensure smooth transitions for dynamic content */
* {
  box-sizing: border-box;
}

/* Optimize animations for performance */
.animate-optimized {
  will-change: transform, opacity;
}

.animate-optimized.animation-complete {
  will-change: auto;
}

/* RTL Support */
[dir='rtl'] {
  direction: rtl;
  text-align: right;
}

[dir='rtl'] .rtl-mirror {
  transform: scaleX(-1);
}

/* Handle margins and paddings for RTL */
[dir='rtl'] .ml-auto {
  margin-left: 0;
  margin-right: auto;
}

[dir='rtl'] .mr-auto {
  margin-right: 0;
  margin-left: auto;
}

/* Flip icons and arrows in RTL */
[dir='rtl'] .rtl-flip {
  transform: scaleX(-1);
}

/* Ensure proper text alignment in RTL */
[dir='rtl'] input,
[dir='rtl'] textarea {
  text-align: right;
}

/* Handle border radius for RTL */
[dir='rtl'] .rounded-l-none {
  border-radius: 0 0.375rem 0.375rem 0;
}

[dir='rtl'] .rounded-r-none {
  border-radius: 0.375rem 0 0 0.375rem;
}

/* Fix flex alignment for RTL */
[dir='rtl'] .flex {
  direction: rtl;
}

/* Ensure cards and containers align properly in RTL */
[dir='rtl'] .MuiCard-root,
[dir='rtl'] .MuiBox-root,
[dir='rtl'] .MuiStack-root {
  text-align: right;
}

/* Fix list item alignment in RTL */
[dir='rtl'] .MuiListItem-root,
[dir='rtl'] .MuiListItemButton-root {
  flex-direction: row-reverse;
}

/* Fix gap alignment in RTL */
[dir='rtl'] .gap-1,
[dir='rtl'] .gap-2,
[dir='rtl'] .gap-3,
[dir='rtl'] .gap-4 {
  direction: rtl;
}