/* RTL Responsive Styles for Page Content */

/* Main page container RTL support */
html[dir="rtl"] .mt-12.mb-8 {
  direction: rtl;
}

/* Card container RTL support */
html[dir="rtl"] .border.border-blue-gray-100 {
  direction: rtl;
}

/* Top section RTL support - Search and Add button area */
html[dir="rtl"] .p-6 {
  direction: rtl;
}

html[dir="rtl"] .flex.flex-wrap.items-center.justify-between.gap-4.mb-4 {
  flex-direction: row-reverse;
}

html[dir="rtl"] .flex.flex-wrap.items-end.gap-4 {
  flex-direction: row-reverse;
}

/* Specific top section layout fixes */
html[dir="rtl"] .flex.flex-wrap.items-center.justify-between.gap-4.mb-4.responsive-search {
  flex-direction: row-reverse;
}

html[dir="rtl"] .flex.flex-wrap.items-center.justify-between.gap-4.mb-4.responsive-pagination {
  flex-direction: row-reverse;
}

/* Search input container RTL support */
html[dir="rtl"] .w-full.sm\:w-72 {
  direction: rtl;
}

/* Search input field RTL support */
html[dir="rtl"] .w-full.sm\:w-72 input {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .w-full.sm\:w-72 .MuiInputBase-input {
  text-align: right !important;
  direction: rtl;
}

/* Table cell flex containers RTL support for responsive layouts */
html[dir="rtl"] table td .flex.items-center.gap-4 {
  flex-direction: row-reverse;
}

html[dir="rtl"] table td .text-right {
  text-align: right !important;
}

html[dir="rtl"] table td .flex.items-center.gap-4 .text-right {
  text-align: right !important;
}

/* Table header RTL support */
html[dir="rtl"] table thead th {
  text-align: right;
}

/* Table body RTL support */
html[dir="rtl"] table tbody td {
  text-align: right;
}

/* Pagination section RTL */
html[dir="rtl"] .flex.flex-wrap.items-center.justify-between.border-t {
  flex-direction: row-reverse;
}

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

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

/* Responsive RTL adjustments */
@media (max-width: 768px) {
  html[dir="rtl"] .flex.flex-wrap.items-center.justify-between {
    flex-direction: column;
  }
  
  html[dir="rtl"] .flex.flex-wrap.items-end {
    flex-direction: column;
  }
  
  html[dir="rtl"] .flex.flex-wrap.items-center.justify-between.border-t {
    flex-direction: column;
  }
}