/* ============================================================
   RTL Mirror
   The app is written with physical Tailwind utilities
   (ml-*, mr-*, pl-*, pr-*, space-x-*, text-left, text-right,
   left-*, right-*, border-l, translate-x) which DO NOT flip when
   the html dir becomes "rtl". Instead of editing every component,
   these overrides mirror the common physical utilities whenever
   dir="rtl" so Arabic layout renders correctly everywhere.

   Scope: only active under html[dir="rtl"], so English (LTR)
   rendering is completely untouched.
   ============================================================ */

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

/* ---- Margins ---- */
html[dir="rtl"] .ml-0 { margin-left: 0; margin-right: 0; }
html[dir="rtl"] .ml-0\.5 { margin-left: 0; margin-right: 0.125rem; }
html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
html[dir="rtl"] .ml-1\.5 { margin-left: 0; margin-right: 0.375rem; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
html[dir="rtl"] .ml-2\.5 { margin-left: 0; margin-right: 0.625rem; }
html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
html[dir="rtl"] .ml-3\.5 { margin-left: 0; margin-right: 0.875rem; }
html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
html[dir="rtl"] .ml-5 { margin-left: 0; margin-right: 1.25rem; }
html[dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; }
html[dir="rtl"] .ml-7 { margin-left: 0; margin-right: 1.75rem; }
html[dir="rtl"] .ml-8 { margin-left: 0; margin-right: 2rem; }
html[dir="rtl"] .ml-9 { margin-left: 0; margin-right: 2.25rem; }
html[dir="rtl"] .ml-10 { margin-left: 0; margin-right: 2.5rem; }
html[dir="rtl"] .ml-11 { margin-left: 0; margin-right: 2.75rem; }
html[dir="rtl"] .ml-12 { margin-left: 0; margin-right: 3rem; }
html[dir="rtl"] .ml-14 { margin-left: 0; margin-right: 3.5rem; }
html[dir="rtl"] .ml-16 { margin-left: 0; margin-right: 4rem; }
html[dir="rtl"] .ml-20 { margin-left: 0; margin-right: 5rem; }
html[dir="rtl"] .ml-24 { margin-left: 0; margin-right: 6rem; }
html[dir="rtl"] .ml-28 { margin-left: 0; margin-right: 7rem; }
html[dir="rtl"] .ml-32 { margin-left: 0; margin-right: 8rem; }
html[dir="rtl"] .ml-36 { margin-left: 0; margin-right: 9rem; }
html[dir="rtl"] .ml-40 { margin-left: 0; margin-right: 10rem; }
html[dir="rtl"] .ml-44 { margin-left: 0; margin-right: 11rem; }
html[dir="rtl"] .ml-48 { margin-left: 0; margin-right: 12rem; }
html[dir="rtl"] .ml-52 { margin-left: 0; margin-right: 13rem; }
html[dir="rtl"] .ml-56 { margin-left: 0; margin-right: 14rem; }
html[dir="rtl"] .ml-60 { margin-left: 0; margin-right: 15rem; }
html[dir="rtl"] .ml-64 { margin-left: 0; margin-right: 16rem; }
html[dir="rtl"] .ml-72 { margin-left: 0; margin-right: 18rem; }
html[dir="rtl"] .ml-80 { margin-left: 0; margin-right: 20rem; }
html[dir="rtl"] .ml-96 { margin-left: 0; margin-right: 24rem; }
html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .ml-px { margin-left: 0; margin-right: 1px; }

html[dir="rtl"] .mr-0 { margin-left: 0; margin-right: 0; }
html[dir="rtl"] .mr-0\.5 { margin-right: 0; margin-left: 0.125rem; }
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
html[dir="rtl"] .mr-1\.5 { margin-right: 0; margin-left: 0.375rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[dir="rtl"] .mr-2\.5 { margin-right: 0; margin-left: 0.625rem; }
html[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
html[dir="rtl"] .mr-3\.5 { margin-right: 0; margin-left: 0.875rem; }
html[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
html[dir="rtl"] .mr-5 { margin-right: 0; margin-left: 1.25rem; }
html[dir="rtl"] .mr-6 { margin-right: 0; margin-left: 1.5rem; }
html[dir="rtl"] .mr-7 { margin-right: 0; margin-left: 1.75rem; }
html[dir="rtl"] .mr-8 { margin-right: 0; margin-left: 2rem; }
html[dir="rtl"] .mr-9 { margin-right: 0; margin-left: 2.25rem; }
html[dir="rtl"] .mr-10 { margin-right: 0; margin-left: 2.5rem; }
html[dir="rtl"] .mr-11 { margin-right: 0; margin-left: 2.75rem; }
html[dir="rtl"] .mr-12 { margin-right: 0; margin-left: 3rem; }
html[dir="rtl"] .mr-14 { margin-right: 0; margin-left: 3.5rem; }
html[dir="rtl"] .mr-16 { margin-right: 0; margin-left: 4rem; }
html[dir="rtl"] .mr-20 { margin-right: 0; margin-left: 5rem; }
html[dir="rtl"] .mr-24 { margin-right: 0; margin-left: 6rem; }
html[dir="rtl"] .mr-28 { margin-right: 0; margin-left: 7rem; }
html[dir="rtl"] .mr-32 { margin-right: 0; margin-left: 8rem; }
html[dir="rtl"] .mr-36 { margin-right: 0; margin-left: 9rem; }
html[dir="rtl"] .mr-40 { margin-right: 0; margin-left: 10rem; }
html[dir="rtl"] .mr-44 { margin-right: 0; margin-left: 11rem; }
html[dir="rtl"] .mr-48 { margin-right: 0; margin-left: 12rem; }
html[dir="rtl"] .mr-52 { margin-right: 0; margin-left: 13rem; }
html[dir="rtl"] .mr-56 { margin-right: 0; margin-left: 14rem; }
html[dir="rtl"] .mr-60 { margin-right: 0; margin-left: 15rem; }
html[dir="rtl"] .mr-64 { margin-right: 0; margin-left: 16rem; }
html[dir="rtl"] .mr-72 { margin-right: 0; margin-left: 18rem; }
html[dir="rtl"] .mr-80 { margin-right: 0; margin-left: 20rem; }
html[dir="rtl"] .mr-96 { margin-right: 0; margin-left: 24rem; }
html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .mr-px { margin-right: 0; margin-left: 1px; }

/* ---- Padding ---- */
html[dir="rtl"] .pl-0 { padding-left: 0; padding-right: 0; }
html[dir="rtl"] .pl-0\.5 { padding-left: 0; padding-right: 0.125rem; }
html[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
html[dir="rtl"] .pl-1\.5 { padding-left: 0; padding-right: 0.375rem; }
html[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
html[dir="rtl"] .pl-2\.5 { padding-left: 0; padding-right: 0.625rem; }
html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
html[dir="rtl"] .pl-3\.5 { padding-left: 0; padding-right: 0.875rem; }
html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; }
html[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
html[dir="rtl"] .pl-7 { padding-left: 0; padding-right: 1.75rem; }
html[dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; }
html[dir="rtl"] .pl-9 { padding-left: 0; padding-right: 2.25rem; }
html[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; }
html[dir="rtl"] .pl-11 { padding-left: 0; padding-right: 2.75rem; }
html[dir="rtl"] .pl-12 { padding-left: 0; padding-right: 3rem; }
html[dir="rtl"] .pl-14 { padding-left: 0; padding-right: 3.5rem; }
html[dir="rtl"] .pl-16 { padding-left: 0; padding-right: 4rem; }
html[dir="rtl"] .pl-20 { padding-left: 0; padding-right: 5rem; }
html[dir="rtl"] .pl-24 { padding-left: 0; padding-right: 6rem; }
html[dir="rtl"] .pl-28 { padding-left: 0; padding-right: 7rem; }
html[dir="rtl"] .pl-32 { padding-left: 0; padding-right: 8rem; }
html[dir="rtl"] .pl-36 { padding-left: 0; padding-right: 9rem; }
html[dir="rtl"] .pl-40 { padding-left: 0; padding-right: 10rem; }
html[dir="rtl"] .pl-44 { padding-left: 0; padding-right: 11rem; }
html[dir="rtl"] .pl-48 { padding-left: 0; padding-right: 12rem; }
html[dir="rtl"] .pl-52 { padding-left: 0; padding-right: 13rem; }
html[dir="rtl"] .pl-56 { padding-left: 0; padding-right: 14rem; }
html[dir="rtl"] .pl-60 { padding-left: 0; padding-right: 15rem; }
html[dir="rtl"] .pl-64 { padding-left: 0; padding-right: 16rem; }
html[dir="rtl"] .pl-72 { padding-left: 0; padding-right: 18rem; }
html[dir="rtl"] .pl-80 { padding-left: 0; padding-right: 20rem; }
html[dir="rtl"] .pl-96 { padding-left: 0; padding-right: 24rem; }
html[dir="rtl"] .pl-auto { padding-left: 0; padding-right: auto; }
html[dir="rtl"] .pl-px { padding-left: 0; padding-right: 1px; }

html[dir="rtl"] .pr-0 { padding-right: 0; padding-left: 0; }
html[dir="rtl"] .pr-0\.5 { padding-right: 0; padding-left: 0.125rem; }
html[dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; }
html[dir="rtl"] .pr-1\.5 { padding-right: 0; padding-left: 0.375rem; }
html[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
html[dir="rtl"] .pr-2\.5 { padding-right: 0; padding-left: 0.625rem; }
html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
html[dir="rtl"] .pr-3\.5 { padding-right: 0; padding-left: 0.875rem; }
html[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
html[dir="rtl"] .pr-5 { padding-right: 0; padding-left: 1.25rem; }
html[dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; }
html[dir="rtl"] .pr-7 { padding-right: 0; padding-left: 1.75rem; }
html[dir="rtl"] .pr-8 { padding-right: 0; padding-left: 2rem; }
html[dir="rtl"] .pr-9 { padding-right: 0; padding-left: 2.25rem; }
html[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 2.5rem; }
html[dir="rtl"] .pr-11 { padding-right: 0; padding-left: 2.75rem; }
html[dir="rtl"] .pr-12 { padding-right: 0; padding-left: 3rem; }
html[dir="rtl"] .pr-14 { padding-right: 0; padding-left: 3.5rem; }
html[dir="rtl"] .pr-16 { padding-right: 0; padding-left: 4rem; }
html[dir="rtl"] .pr-20 { padding-right: 0; padding-left: 5rem; }
html[dir="rtl"] .pr-24 { padding-right: 0; padding-left: 6rem; }
html[dir="rtl"] .pr-28 { padding-right: 0; padding-left: 7rem; }
html[dir="rtl"] .pr-32 { padding-right: 0; padding-left: 8rem; }
html[dir="rtl"] .pr-36 { padding-right: 0; padding-left: 9rem; }
html[dir="rtl"] .pr-40 { padding-right: 0; padding-left: 10rem; }
html[dir="rtl"] .pr-44 { padding-right: 0; padding-left: 11rem; }
html[dir="rtl"] .pr-48 { padding-right: 0; padding-left: 12rem; }
html[dir="rtl"] .pr-52 { padding-right: 0; padding-left: 13rem; }
html[dir="rtl"] .pr-56 { padding-right: 0; padding-left: 14rem; }
html[dir="rtl"] .pr-60 { padding-right: 0; padding-left: 15rem; }
html[dir="rtl"] .pr-64 { padding-right: 0; padding-left: 16rem; }
html[dir="rtl"] .pr-72 { padding-right: 0; padding-left: 18rem; }
html[dir="rtl"] .pr-80 { padding-right: 0; padding-left: 20rem; }
html[dir="rtl"] .pr-96 { padding-right: 0; padding-left: 24rem; }
html[dir="rtl"] .pr-auto { padding-right: 0; padding-left: auto; }
html[dir="rtl"] .pr-px { padding-right: 0; padding-left: 1px; }

/* ---- space-x (children get margin-left; mirror to margin-right) ---- */
html[dir="rtl"] .space-x-0 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0; }
html[dir="rtl"] .space-x-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.125rem; }
html[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.25rem; }
html[dir="rtl"] .space-x-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.375rem; }
html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.5rem; }
html[dir="rtl"] .space-x-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.625rem; }
html[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.75rem; }
html[dir="rtl"] .space-x-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.875rem; }
html[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1rem; }
html[dir="rtl"] .space-x-5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1.25rem; }
html[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1.5rem; }
html[dir="rtl"] .space-x-7 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1.75rem; }
html[dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 2rem; }
html[dir="rtl"] .space-x-9 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 2.25rem; }
html[dir="rtl"] .space-x-10 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 2.5rem; }
html[dir="rtl"] .space-x-11 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 2.75rem; }
html[dir="rtl"] .space-x-12 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 3rem; }
html[dir="rtl"] .space-x-14 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 3.5rem; }
html[dir="rtl"] .space-x-16 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 4rem; }
html[dir="rtl"] .space-x-20 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 5rem; }
html[dir="rtl"] .space-x-24 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 6rem; }
html[dir="rtl"] .space-x-28 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 7rem; }
html[dir="rtl"] .space-x-32 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 8rem; }
html[dir="rtl"] .space-x-36 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 9rem; }
html[dir="rtl"] .space-x-40 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 10rem; }
html[dir="rtl"] .space-x-44 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 11rem; }
html[dir="rtl"] .space-x-48 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 12rem; }
html[dir="rtl"] .space-x-52 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 13rem; }
html[dir="rtl"] .space-x-56 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 14rem; }
html[dir="rtl"] .space-x-60 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 15rem; }
html[dir="rtl"] .space-x-64 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 16rem; }
html[dir="rtl"] .space-x-72 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 18rem; }
html[dir="rtl"] .space-x-80 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 20rem; }
html[dir="rtl"] .space-x-96 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 24rem; }
html[dir="rtl"] .space-x-px > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1px; }

/* ---- Absolute positioning ---- */
html[dir="rtl"] .left-0 { left: auto; right: 0; }
html[dir="rtl"] .left-1 { left: auto; right: 0.25rem; }
html[dir="rtl"] .left-2 { left: auto; right: 0.5rem; }
html[dir="rtl"] .left-3 { left: auto; right: 0.75rem; }
html[dir="rtl"] .left-4 { left: auto; right: 1rem; }
html[dir="rtl"] .left-6 { left: auto; right: 1.5rem; }
html[dir="rtl"] .left-8 { left: auto; right: 2rem; }
html[dir="rtl"] .left-10 { left: auto; right: 2.5rem; }
html[dir="rtl"] .left-12 { left: auto; right: 3rem; }
html[dir="rtl"] .left-16 { left: auto; right: 4rem; }
html[dir="rtl"] .left-20 { left: auto; right: 5rem; }
html[dir="rtl"] .left-auto { left: auto; right: auto; }
html[dir="rtl"] .-left-1 { left: auto; right: -0.25rem; }
html[dir="rtl"] .-left-2 { left: auto; right: -0.5rem; }
html[dir="rtl"] .-left-4 { left: auto; right: -1rem; }

html[dir="rtl"] .right-0 { right: auto; left: 0; }
html[dir="rtl"] .right-1 { right: auto; left: 0.25rem; }
html[dir="rtl"] .right-2 { right: auto; left: 0.5rem; }
html[dir="rtl"] .right-3 { right: auto; left: 0.75rem; }
html[dir="rtl"] .right-4 { right: auto; left: 1rem; }
html[dir="rtl"] .right-6 { right: auto; left: 1.5rem; }
html[dir="rtl"] .right-8 { right: auto; left: 2rem; }
html[dir="rtl"] .right-10 { right: auto; left: 2.5rem; }
html[dir="rtl"] .right-12 { right: auto; left: 3rem; }
html[dir="rtl"] .right-16 { right: auto; left: 4rem; }
html[dir="rtl"] .right-20 { right: auto; left: 5rem; }
html[dir="rtl"] .right-auto { right: auto; left: auto; }
html[dir="rtl"] .-right-1 { right: auto; left: -0.25rem; }
html[dir="rtl"] .-right-2 { right: auto; left: -0.5rem; }
html[dir="rtl"] .-right-4 { right: auto; left: -1rem; }

/* ---- Borders ---- */
html[dir="rtl"] .border-l { border-left-width: 0; border-right-width: 1px; }
html[dir="rtl"] .border-r { border-right-width: 0; border-left-width: 1px; }
html[dir="rtl"] .border-l-2 { border-left-width: 0; border-right-width: 2px; }
html[dir="rtl"] .border-r-2 { border-right-width: 0; border-left-width: 2px; }
html[dir="rtl"] .border-l-4 { border-left-width: 0; border-right-width: 4px; }
html[dir="rtl"] .border-r-4 { border-right-width: 0; border-left-width: 4px; }
html[dir="rtl"] .border-l-8 { border-left-width: 0; border-right-width: 8px; }
html[dir="rtl"] .border-r-8 { border-right-width: 0; border-left-width: 8px; }
/* color/shade variants exist on the same element; only width flips, color stays */
html[dir="rtl"] .border-l-border { border-left-width: 0; border-right-width: 1px; }
html[dir="rtl"] .border-r-border { border-right-width: 0; border-left-width: 1px; }

/* ---- translate-x (drawers / menus) ---- */
html[dir="rtl"] .translate-x-0 { transform: translateX(0); }
html[dir="rtl"] .-translate-x-0 { transform: translateX(0); }
html[dir="rtl"] .-translate-x-1 { transform: translateX(0.25rem); }
html[dir="rtl"] .translate-x-1 { transform: translateX(-0.25rem); }
html[dir="rtl"] .-translate-x-2 { transform: translateX(0.5rem); }
html[dir="rtl"] .translate-x-2 { transform: translateX(-0.5rem); }
html[dir="rtl"] .-translate-x-3 { transform: translateX(0.75rem); }
html[dir="rtl"] .translate-x-3 { transform: translateX(-0.75rem); }
html[dir="rtl"] .-translate-x-4 { transform: translateX(1rem); }
html[dir="rtl"] .translate-x-4 { transform: translateX(-1rem); }
html[dir="rtl"] .-translate-x-6 { transform: translateX(1.5rem); }
html[dir="rtl"] .translate-x-6 { transform: translateX(-1.5rem); }
html[dir="rtl"] .-translate-x-8 { transform: translateX(2rem); }
html[dir="rtl"] .translate-x-8 { transform: translateX(-2rem); }
html[dir="rtl"] .-translate-x-10 { transform: translateX(2.5rem); }
html[dir="rtl"] .translate-x-10 { transform: translateX(-2.5rem); }
html[dir="rtl"] .-translate-x-12 { transform: translateX(3rem); }
html[dir="rtl"] .translate-x-12 { transform: translateX(-3rem); }
html[dir="rtl"] .-translate-x-16 { transform: translateX(4rem); }
html[dir="rtl"] .translate-x-16 { transform: translateX(-4rem); }
html[dir="rtl"] .-translate-x-20 { transform: translateX(5rem); }
html[dir="rtl"] .translate-x-20 { transform: translateX(-5rem); }
html[dir="rtl"] .-translate-x-24 { transform: translateX(6rem); }
html[dir="rtl"] .translate-x-24 { transform: translateX(-6rem); }
html[dir="rtl"] .-translate-x-32 { transform: translateX(8rem); }
html[dir="rtl"] .translate-x-32 { transform: translateX(-8rem); }
html[dir="rtl"] .-translate-x-40 { transform: translateX(10rem); }
html[dir="rtl"] .translate-x-40 { transform: translateX(-10rem); }
html[dir="rtl"] .-translate-x-48 { transform: translateX(12rem); }
html[dir="rtl"] .translate-x-48 { transform: translateX(-12rem); }
html[dir="rtl"] .-translate-x-56 { transform: translateX(14rem); }
html[dir="rtl"] .translate-x-56 { transform: translateX(-14rem); }
html[dir="rtl"] .-translate-x-64 { transform: translateX(16rem); }
html[dir="rtl"] .translate-x-64 { transform: translateX(-16rem); }
html[dir="rtl"] .-translate-x-72 { transform: translateX(18rem); }
html[dir="rtl"] .translate-x-72 { transform: translateX(-18rem); }
html[dir="rtl"] .-translate-x-80 { transform: translateX(20rem); }
html[dir="rtl"] .translate-x-80 { transform: translateX(-20rem); }
html[dir="rtl"] .translate-x-full { transform: translateX(-100%); }
html[dir="rtl"] .-translate-x-full { transform: translateX(100%); }
html[dir="rtl"] .translate-x-1\/2 { transform: translateX(-50%); }
html[dir="rtl"] .-translate-x-1\/2 { transform: translateX(50%); }
html[dir="rtl"] .translate-x-1\/3 { transform: translateX(-33.333333%); }
html[dir="rtl"] .-translate-x-1\/3 { transform: translateX(33.333333%); }
html[dir="rtl"] .translate-x-2\/3 { transform: translateX(-66.666667%); }
html[dir="rtl"] .-translate-x-2\/3 { transform: translateX(66.666667%); }

/* ---- Responsive overrides ----
   Tailwind's responsive translate utilities (which use CSS variables and a higher
   cascade slot inside a media query) must win over the mirrored base classes when
   both apply. Without these, `lg:translate-x-0` on desktop is beaten by the mirrored
   `-translate-x-full`/`translate-x-full` rules above, pushing sidebars off-screen. */
@media (min-width: 1024px) {
  html[dir="rtl"] .lg\:translate-x-0 { transform: translateX(0); }
  html[dir="rtl"] .lg\:-translate-x-0 { transform: translateX(0); }
  html[dir="rtl"] .lg\:translate-x-full { transform: translateX(-100%); }
  html[dir="rtl"] .lg\:-translate-x-full { transform: translateX(100%); }
}