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

/* RTL Support - apply to document and all descendants */
html[dir="rtl"],
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

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


/* RTL Navigation Items */
[dir="rtl"] .flex-row-reverse {
  flex-direction: row-reverse;
}

/* Icon + text spacing - gap works correctly in both LTR and RTL */
.icon-text-gap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-text-gap-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Ensure flex containers with icons use gap for proper RTL spacing */
[dir="rtl"] .flex > * + * {
  margin-inline-start: 0.5rem;
  margin-inline-end: 0;
}

/* Mobile sidebar overlay */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    z-index: 40;
  }

  [dir="rtl"] .menu-button {
    left: auto;
    right: 1rem;
  }
}

/* Improve icon spacing in RTL - space-x-reverse fallback */
[dir="rtl"] .space-x-reverse > * + * {
  margin-inline-start: 0.5rem;
  margin-inline-end: 0;
}

/* Ensure icons don't shrink */
.flex-shrink-0 {
  flex-shrink: 0;
}

/* Dropdown positioning for RTL - use logical properties */
[dir="rtl"] .dropdown-end {
  left: 0;
  right: auto;
}

[dir="ltr"] .dropdown-end {
  right: 0;
  left: auto;
}

/* Session card - force RTL direction and layout */
.session-card[dir="rtl"] {
  direction: rtl !important;
  text-align: right;
}

/* Modal RTL - ensure proper direction for modals with dir=rtl */
[dir="rtl"].relative {
  direction: rtl;
  text-align: right;
}

/* Hide scrollbar in sidebar (keep scroll functionality) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}