/* ============================================================= RTL (Right-to-Left) Layout Overrides – Haroon Digital Platform Applied when (Arabic mode) ============================================================= */ /* ── 1. Base text direction is set via html[dir="rtl"]. The browser applies direction:rtl to all elements. Flexbox rows naturally start from the RIGHT in RTL — so we do NOT reverse flex-direction globally (that would double-reverse and break everything). ── */ /* ── 2. Tailwind space-x-* utilities rely on the custom property --tw-space-x-reverse. Set it to 1 so that spacing is applied on the correct (start) side. ── */ [dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; } /* ── 3. Swap directional margins so icon↔label gaps flip ── */ [dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; } [dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; } [dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } /* ── 4. Swap directional paddings ── */ [dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 0.75rem !important; } [dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 1.25rem !important; } [dir="rtl"] .pl-6 { padding-left: 0 !important; padding-right: 1.5rem !important; } [dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 0.75rem !important; } [dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; } [dir="rtl"] .pr-6 { padding-right: 0 !important; padding-left: 1.5rem !important; } /* ── 5. Swap border sides (accent bars, focus rings, etc.) ── */ [dir="rtl"] .border-l-4 { border-left-width: 0 !important; border-right-width: 4px !important; border-right-style: solid !important; } [dir="rtl"] .border-l-2 { border-left-width: 0 !important; border-right-width: 2px !important; border-right-style: solid !important; } [dir="rtl"] .border-r-4 { border-right-width: 0 !important; border-left-width: 4px !important; border-left-style: solid !important; } /* ── 6. Swap rounded corners for directional pill shapes ── */ [dir="rtl"] .rounded-l { border-radius: 0 0.25rem 0.25rem 0 !important; } [dir="rtl"] .rounded-r { border-radius: 0.25rem 0 0 0.25rem !important; } [dir="rtl"] .rounded-l-lg { border-radius: 0 0.5rem 0.5rem 0 !important; } [dir="rtl"] .rounded-r-lg { border-radius: 0.5rem 0 0 0.5rem !important; } [dir="rtl"] .rounded-l-md { border-radius: 0 0.375rem 0.375rem 0 !important; } [dir="rtl"] .rounded-r-md { border-radius: 0.375rem 0 0 0.375rem !important; } /* ── 7. Form inputs / textareas / selects without explicit dir attribute default to RTL in Arabic mode. ── */ [dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([dir]), [dir="rtl"] textarea:not([dir]), [dir="rtl"] select:not([dir]) { direction: rtl; text-align: right; } [dir="rtl"] input::placeholder, [dir="rtl"] textarea::placeholder { text-align: right; } /* ── 8. Table: align headers and cells to the start (right) ── */ [dir="rtl"] th { text-align: right; } [dir="rtl"] td { text-align: right; } [dir="rtl"] th.text-center, [dir="rtl"] td.text-center { text-align: center; } [dir="rtl"] th.text-left, [dir="rtl"] td.text-left { text-align: right; } /* ── 9. Admin sidebar: in RTL the sidebar is the first flex child and must appear on the RIGHT. With direction:rtl the browser already places first flex children on the right — so we reset any order override. ── */ [dir="rtl"] .admin-sidebar { order: 0; border-right: 0; border-left: 1px solid rgba(255,255,255,0.05); } /* ── 10. Flash messages: swap the accent border side ── */ [dir="rtl"] .flash-success, [dir="rtl"] .flash-error { border-left: none !important; border-right: 4px solid; } /* ── 11. Nav: text-left overrides inside menus ── */ [dir="rtl"] nav a { text-align: right; } /* ── 12. Sticky/fixed positioned panels that use left-0 only ── */ [dir="rtl"] .sidebar-user-panel { left: 0; right: 0; } /* ── 13. Chevron icons used as directional arrows ── */ [dir="rtl"] .fa-chevron-right::before { content: "\f053"; /* fa-chevron-left */ } [dir="rtl"] .fa-chevron-left::before { content: "\f054"; /* fa-chevron-right */ } [dir="rtl"] .fa-arrow-right::before { content: "\f060"; /* fa-arrow-left */ } [dir="rtl"] .fa-arrow-left::before { content: "\f061"; /* fa-arrow-right */ } [dir="rtl"] .fa-external-link-alt { transform: scaleX(-1); display: inline-block; } /* ── 14. Dropdown menus: anchor to inline-start ── */ [dir="rtl"] .dropdown-rtl { left: 0; right: auto; } [dir="rtl"] .dropdown-ltr { right: 0; left: auto; } /* ── 15. Text-align: the global right for RTL ── */ [dir="rtl"] { text-align: right; } [dir="rtl"] .text-left { text-align: right !important; } /* keep .text-center and .text-right as-is */ /* ── 16. Animations / transforms that use X-axis ── */ [dir="rtl"] .translate-x-full { --tw-translate-x: -100%; } [dir="rtl"] .-translate-x-full { --tw-translate-x: 100%; } /* ── 17. Number-only content stays LTR (views, dates…) ── */ [dir="rtl"] .ltr-num { direction: ltr; unicode-bidi: embed; }