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

html,
body {
  @apply bg-white dark:bg-gray-950;

  @media (prefers-color-scheme: dark) {
    color-scheme: dark;
  }
}

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

[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* Arabic Text Rendering */
.arabic-text {
  font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* RTL-specific utilities */
@layer utilities {
  .rtl-flip {
    transform: scaleX(-1);
  }
  
  .rtl-space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }
  
  .rtl-divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 1;
  }
}

/* Responsive breakpoints for RTL */
@layer components {
  .container-rtl {
    @apply container mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .grid-rtl {
    @apply grid gap-4 sm:gap-6 lg:gap-8;
  }
  
  .flex-rtl {
    @apply flex items-center;
  }
  
  .flex-rtl-reverse {
    @apply flex items-center flex-row-reverse;
  }
}

/* Form elements RTL support */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  direction: rtl;
  text-align: right;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  @apply ring-2 ring-blue-500 ring-opacity-50;
}

/* Button and interactive elements */
button,
.btn {
  @apply transition-all duration-200 ease-in-out;
}

/* Navigation and layout components */
.sidebar-transition {
  @apply transition-all duration-300 ease-in-out;
}

/* Sidebar hover effects */
.sidebar-item {
  @apply transition-colors duration-150 ease-in-out;
}

.sidebar-item:hover {
  @apply bg-gray-50 text-gray-900;
}

.sidebar-item.active {
  @apply bg-blue-100 text-blue-900 border-r-2 border-blue-600;
}

/* Mobile menu overlay */
.mobile-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300;
}

/* Smooth transitions for layout changes */
.layout-transition {
  @apply transition-all duration-300 ease-in-out;
}

/* Focus styles for accessibility */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Custom scrollbar for sidebar */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

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

.sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.7);
}

/* RTL Layout fixes */
[dir="rtl"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

/* Ensure proper RTL text alignment */
[dir="rtl"] {
  text-align: right;
}

/* Fix specific margin issues for RTL */
[dir="rtl"] .ml-1 {
  margin-right: 0.25rem;
  margin-left: 0;
}

[dir="rtl"] .ml-3 {
  margin-right: 0.75rem;
  margin-left: 0;
}