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

/* RTL Support */
[dir="rtl"] {
    direction: rtl;
}

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

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

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

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

/* Margin and Padding RTL adjustments */
[dir="rtl"] .ms-1 { margin-inline-start: 0.25rem; }
[dir="rtl"] .ms-2 { margin-inline-start: 0.5rem; }
[dir="rtl"] .ms-3 { margin-inline-start: 0.75rem; }
[dir="rtl"] .ms-4 { margin-inline-start: 1rem; }
[dir="rtl"] .ms-6 { margin-inline-start: 1.5rem; }
[dir="rtl"] .ms-auto { margin-inline-start: auto; }

[dir="rtl"] .me-1 { margin-inline-end: 0.25rem; }
[dir="rtl"] .me-2 { margin-inline-end: 0.5rem; }
[dir="rtl"] .me-3 { margin-inline-end: 0.75rem; }
[dir="rtl"] .me-4 { margin-inline-end: 1rem; }
[dir="rtl"] .me-auto { margin-inline-end: auto; }

[dir="rtl"] .ps-1 { padding-inline-start: 0.25rem; }
[dir="rtl"] .ps-2 { padding-inline-start: 0.5rem; }
[dir="rtl"] .ps-3 { padding-inline-start: 0.75rem; }
[dir="rtl"] .ps-4 { padding-inline-start: 1rem; }

[dir="rtl"] .pe-1 { padding-inline-end: 0.25rem; }
[dir="rtl"] .pe-2 { padding-inline-end: 0.5rem; }
[dir="rtl"] .pe-3 { padding-inline-end: 0.75rem; }
[dir="rtl"] .pe-4 { padding-inline-end: 1rem; }

/* Border Radius RTL */
[dir="rtl"] .rounded-l { border-radius: 0 0.25rem 0.25rem 0; }
[dir="rtl"] .rounded-r { border-radius: 0.25rem 0 0 0.25rem; }
[dir="rtl"] .rounded-tl { border-top-right-radius: 0.25rem; border-top-left-radius: 0; }
[dir="rtl"] .rounded-tr { border-top-left-radius: 0.25rem; border-top-right-radius: 0; }
[dir="rtl"] .rounded-bl { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0; }
[dir="rtl"] .rounded-br { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0; }

/* Transform RTL */
[dir="rtl"] .transform {
    transform: scaleX(-1);
}

/* Dropdown positioning RTL */
[dir="rtl"] .start-0 { right: 0; left: auto; }
[dir="rtl"] .end-0 { left: 0; right: auto; }

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

[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}