/* RTL (Right-to-Left) Support for Arabic and other RTL languages */

/* Apply RTL-specific styles when html has dir="rtl" */
html[dir="rtl"] {
  direction: rtl;
}

/* Body and base text alignment */
html[dir="rtl"] body {
  text-align: right;
}

/* Reverse flex direction for navigation and layout */
html[dir="rtl"] .flex-row-reverse {
  flex-direction: row-reverse;
}

/* Fix navigation layout in RTL */
html[dir="rtl"] .flex {
  direction: rtl;
}

html[dir="rtl"] .flex.justify-between {
  direction: rtl;
}

html[dir="rtl"] .flex.items-center {
  direction: rtl;
}

/* Adjust spacing for RTL */
html[dir="rtl"] .space-x-2 > * + *,
html[dir="rtl"] .space-x-3 > * + *,
html[dir="rtl"] .space-x-4 > * + *,
html[dir="rtl"] .space-x-6 > * + * {
  margin-left: 0;
}

html[dir="rtl"] .space-x-2 > * + * {
  margin-right: 0.5rem;
}

html[dir="rtl"] .space-x-3 > * + * {
  margin-right: 0.75rem;
}

html[dir="rtl"] .space-x-4 > * + * {
  margin-right: 1rem;
}

html[dir="rtl"] .space-x-6 > * + * {
  margin-right: 1.5rem;
}

/* Reverse padding */
html[dir="rtl"] .pl-2 {
  padding-left: 0;
  padding-right: 0.5rem;
}

html[dir="rtl"] .pr-2 {
  padding-right: 0;
  padding-left: 0.5rem;
}

html[dir="rtl"] .pl-4 {
  padding-left: 0;
  padding-right: 1rem;
}

html[dir="rtl"] .pr-4 {
  padding-right: 0;
  padding-left: 1rem;
}

/* Reverse margin */
html[dir="rtl"] .ml-2 {
  margin-left: 0;
  margin-right: 0.5rem;
}

html[dir="rtl"] .mr-2 {
  margin-right: 0;
  margin-left: 0.5rem;
}

html[dir="rtl"] .ml-4 {
  margin-left: 0;
  margin-right: 1rem;
}

html[dir="rtl"] .mr-4 {
  margin-right: 0;
  margin-left: 1rem;
}

/* Text alignment */
html[dir="rtl"] .text-left {
  text-align: right;
}

html[dir="rtl"] .text-right {
  text-align: left;
}

/* Border radius for RTL */
html[dir="rtl"] .rounded-l {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

html[dir="rtl"] .rounded-r {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

/* Float adjustments */
html[dir="rtl"] .float-left {
  float: right;
}

html[dir="rtl"] .float-right {
  float: left;
}

/* Icons and arrows - flip horizontally */
html[dir="rtl"] .icon-arrow-right::before {
  content: "←";
}

html[dir="rtl"] .icon-arrow-left::before {
  content: "→";
}

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

/* Form labels */
html[dir="rtl"] label {
  text-align: right;
}

/* Form groups and containers */
html[dir="rtl"] .form-group,
html[dir="rtl"] .mb-6,
html[dir="rtl"] .mb-4 {
  text-align: right;
}

/* Button alignment in forms */
html[dir="rtl"] .flex.justify-between {
  flex-direction: row-reverse;
}

html[dir="rtl"] .flex.space-x-3 > * + * {
  margin-left: 0.75rem;
  margin-right: 0;
}

html[dir="rtl"] .flex.space-x-2 > * + * {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Form validation messages */
html[dir="rtl"] .text-red-600,
html[dir="rtl"] .text-green-600,
html[dir="rtl"] .text-blue-600 {
  text-align: right;
}

/* Help text */
html[dir="rtl"] .text-gray-500 {
  text-align: right;
}

/* Dropdown menus */
html[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
}

/* Tooltips */
html[dir="rtl"] .tooltip {
  direction: rtl;
}

/* Modal dialogs */
html[dir="rtl"] .modal-content {
  direction: rtl;
  text-align: right;
}

/* Modal positioning and layout */
html[dir="rtl"] .modal {
  direction: rtl;
}

html[dir="rtl"] .modal-header {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .modal-body {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .modal-footer {
  direction: rtl;
  justify-content: flex-start;
}

html[dir="rtl"] .modal-footer .btn + .btn {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Close button positioning */
html[dir="rtl"] .modal-header .close {
  margin-left: auto;
  margin-right: 0;
}

/* Navigation items */
html[dir="rtl"] nav ul {
  padding-right: 0;
  padding-left: 0;
}

html[dir="rtl"] nav li {
  margin-right: 0;
  margin-left: 1rem;
}

/* Navigation bar layout fixes */
html[dir="rtl"] .flex.justify-between {
  direction: rtl;
}

html[dir="rtl"] .flex.items-center.space-x-6 > * + * {
  margin-left: 1.5rem;
  margin-right: 0;
}

html[dir="rtl"] .flex.items-center.space-x-4 > * + * {
  margin-left: 1rem;
  margin-right: 0;
}

html[dir="rtl"] .flex.items-center.space-x-3 > * + * {
  margin-left: 0.75rem;
  margin-right: 0;
}

html[dir="rtl"] .flex.items-center.space-x-2 > * + * {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Mobile menu */
html[dir="rtl"] .md\\:hidden {
  direction: rtl;
}

/* User menu and language switcher */
html[dir="rtl"] .language-switcher {
  text-align: right;
  direction: rtl;
}

/* Badges and labels */
html[dir="rtl"] .badge {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Card components */
html[dir="rtl"] .card {
  direction: rtl;
}

/* Table adjustments */
html[dir="rtl"] table {
  direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: right;
}

html[dir="rtl"] th:first-child,
html[dir="rtl"] td:first-child {
  text-align: right;
}

/* Grid layouts */
html[dir="rtl"] .grid {
  direction: rtl;
}

html[dir="rtl"] .grid-cols-1,
html[dir="rtl"] .grid-cols-2,
html[dir="rtl"] .grid-cols-3,
html[dir="rtl"] .grid-cols-4 {
  direction: rtl;
}

/* Card layouts */
html[dir="rtl"] .bg-white.rounded-lg {
  direction: rtl;
  text-align: right;
}

/* Data display improvements */
html[dir="rtl"] .flex.justify-between.items-start {
  direction: rtl;
}

html[dir="rtl"] .flex.justify-between.items-center {
  direction: rtl;
}

/* Stats and metrics */
html[dir="rtl"] .text-xs,
html[dir="rtl"] .text-sm {
  text-align: right;
}

/* Breadcrumbs */
html[dir="rtl"] .breadcrumb {
  direction: rtl;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "\\";
  transform: scaleX(-1);
}

/* Checkbox and radio alignment */
html[dir="rtl"] input[type="checkbox"],
html[dir="rtl"] input[type="radio"] {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Progress bars */
html[dir="rtl"] .progress-bar {
  right: 0;
  left: auto;
}

/* Scrollbar (Webkit browsers) */
html[dir="rtl"] ::-webkit-scrollbar {
  left: 0;
  right: auto;
}

/* List items */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 1.5rem;
  padding-left: 0;
}

/* Animations - reverse slide directions */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

html[dir="rtl"] .slide-in-right {
  animation: slideInLeft 0.3s ease-out;
}

html[dir="rtl"] .slide-in-left {
  animation: slideInRight 0.3s ease-out;
}

/* Language switcher specific styles */
.language-switcher {
  min-width: 120px;
}

html[dir="rtl"] .language-switcher {
  text-align: right;
}

/* Font adjustments for Arabic */
html[dir="rtl"] {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Ensure proper Arabic text rendering */
html[dir="rtl"] body {
  font-size: 1rem;
  line-height: 1.6;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  font-weight: 600;
}

/* Improve readability for Arabic text */
html[dir="rtl"] p {
  text-align: justify;
  text-justify: inter-word;
}

/* Fix for mixed LTR content in RTL context (like email addresses, URLs) */
html[dir="rtl"] .ltr-content {
  direction: ltr;
  display: inline-block;
  text-align: left;
}

/* Utility class to force RTL even in LTR context */
.force-rtl {
  direction: rtl !important;
  text-align: right !important;
}

/* Utility class to force LTR even in RTL context */
.force-ltr {
  direction: ltr !important;
  text-align: left !important;
}

/* Kanban Board RTL Support */
html[dir="rtl"] .kanban-column {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .task-card {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .task-card-title {
  text-align: right;
}

html[dir="rtl"] .task-card-meta {
  direction: rtl;
  justify-content: space-between;
}

html[dir="rtl"] .story-points-badge {
  margin-left: 0;
  margin-right: 0.5rem;
}

html[dir="rtl"] .workload-indicator {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Alert and Message RTL Support */
html[dir="rtl"] .alert {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .alert .flex.items-center {
  direction: rtl;
}

html[dir="rtl"] .alert svg {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Pagination RTL Support */
html[dir="rtl"] .pagination {
  direction: rtl;
}

html[dir="rtl"] .pagination .flex {
  direction: rtl;
}

html[dir="rtl"] .pagination .space-x-2 > * + * {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Search and Filter RTL Support */
html[dir="rtl"] .search-container {
  direction: rtl;
}

html[dir="rtl"] .search-input {
  text-align: right;
  direction: rtl;
}

/* Dashboard Cards RTL Support */
html[dir="rtl"] .dashboard-card {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .dashboard-card .flex.justify-between {
  direction: rtl;
}

html[dir="rtl"] .dashboard-card .text-right {
  text-align: right;
}

/* Progress Bars RTL Support */
html[dir="rtl"] .progress-container {
  direction: rtl;
}

html[dir="rtl"] .progress-bar {
  direction: ltr; /* Keep progress direction LTR for visual consistency */
}

/* Sidebar and Navigation RTL Support */
html[dir="rtl"] .sidebar {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .sidebar-nav {
  direction: rtl;
}

html[dir="rtl"] .sidebar-nav li {
  text-align: right;
}

/* Dropdown and Select RTL Support */
html[dir="rtl"] .dropdown {
  direction: rtl;
}

html[dir="rtl"] .dropdown-toggle {
  text-align: right;
}

html[dir="rtl"] .dropdown-menu {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .dropdown-item {
  text-align: right;
}

/* Tab Navigation RTL Support */
html[dir="rtl"] .nav-tabs {
  direction: rtl;
}

html[dir="rtl"] .nav-tabs .nav-item {
  margin-left: 0.25rem;
  margin-right: 0;
}

html[dir="rtl"] .nav-tabs .nav-link {
  text-align: right;
}

/* Responsive RTL Adjustments */
@media (max-width: 768px) {
  html[dir="rtl"] .mobile-menu {
    direction: rtl;
    text-align: right;
  }

  html[dir="rtl"] .mobile-menu-item {
    text-align: right;
  }

  html[dir="rtl"] .flex-col.sm\\:flex-row {
    direction: rtl;
  }
}

/* Icon and Button RTL Support */
html[dir="rtl"] .btn-with-icon {
  direction: rtl;
}

html[dir="rtl"] .btn-with-icon svg {
  margin-left: 0.5rem;
  margin-right: 0;
}

html[dir="rtl"] .icon-left {
  margin-left: 0.5rem;
  margin-right: 0;
}

html[dir="rtl"] .icon-right {
  margin-left: 0;
  margin-right: 0.5rem;
}

/* Form Layout RTL Improvements */
html[dir="rtl"] .form-row {
  direction: rtl;
}

html[dir="rtl"] .form-col {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .form-actions {
  direction: rtl;
  justify-content: flex-start;
}

html[dir="rtl"] .form-actions .btn + .btn {
  margin-left: 0.75rem;
  margin-right: 0;
}

/* Loading and Spinner RTL Support */
html[dir="rtl"] .loading-overlay {
  direction: rtl;
}

html[dir="rtl"] .spinner {
  direction: ltr; /* Keep spinner direction consistent */
}

/* Toast Notifications RTL Support */
html[dir="rtl"] .toast {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .toast-header {
  direction: rtl;
}

html[dir="rtl"] .toast-body {
  text-align: right;
}

/* Utility Classes for RTL */
.rtl-text-right {
  text-align: right !important;
}

.rtl-text-left {
  text-align: left !important;
}

.rtl-dir-rtl {
  direction: rtl !important;
}

.rtl-dir-ltr {
  direction: ltr !important;
}

/* Fix for mixed content (emails, URLs, etc.) */
html[dir="rtl"] .mixed-content {
  direction: ltr;
  display: inline-block;
  text-align: left;
}

/* Ensure proper Arabic font rendering */
html[dir="rtl"] {
  font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
}

/* Fix for action buttons in cards */
html[dir="rtl"] .card-actions {
  direction: rtl;
}

html[dir="rtl"] .card-actions .flex {
  direction: rtl;
}

html[dir="rtl"] .card-actions .space-x-2 > * + *,
html[dir="rtl"] .card-actions .space-x-3 > * + * {
  margin-left: 0.5rem;
  margin-right: 0;
}