/* RTL CSS Overrides for Tailwind Utility Classes */

/* Margins */
html[dir="rtl"] .ml-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .mr-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .ml-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-3 { margin-right: 0.75rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-4 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .mr-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-3 { margin-left: 0.75rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-4 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .-ml-1 { margin-right: -0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .-ml-2 { margin-right: -0.5rem !important; margin-left: 0 !important; }

/* Paddings */
html[dir="rtl"] .pl-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-3 { padding-right: 0.75rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-4 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-6 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-8 { padding-right: 2rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-10 { padding-right: 2.5rem !important; padding-left: 0 !important; }

html[dir="rtl"] .pr-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-3 { padding-left: 0.75rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-4 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-6 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-8 { padding-left: 2rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-10 { padding-left: 2.5rem !important; padding-right: 0 !important; }

/* Positions */
html[dir="rtl"] .left-0 { right: 0 !important; left: auto !important; }
html[dir="rtl"] .right-0 { left: 0 !important; right: auto !important; }
html[dir="rtl"] .left-4 { right: 1rem !important; left: auto !important; }
html[dir="rtl"] .right-4 { left: 1rem !important; right: auto !important; }

/* Mirroring specific icons or elements */
html[dir="rtl"] .mirror-rtl,
html[dir="rtl"] svg.dir-aware {
    transform: scaleX(-1);
}

/* Ensure text-align respects the direction natively, but override specifically if tailwind used text-left */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }

/* Borders */
html[dir="rtl"] .border-l { border-right-width: 1px !important; border-left-width: 0 !important; }
html[dir="rtl"] .border-r { border-left-width: 1px !important; border-right-width: 0 !important; }
html[dir="rtl"] .rounded-l-lg { border-radius: 0 0.5rem 0.5rem 0 !important; }
html[dir="rtl"] .rounded-r-lg { border-radius: 0.5rem 0 0 0.5rem !important; }