/* * ArabicRTL Module — RTL Layout Overrides * Applied only when dir="rtl" is set on (injected by ApplyRTL middleware) */ /* ========================================================================== 1. BASE DIRECTION ========================================================================== */ [dir="rtl"] { direction: rtl; text-align: right; } [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; } [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"] { text-align: left; direction: ltr; } /* ========================================================================== 2. SIDEBAR — FLIP FROM LEFT TO RIGHT ========================================================================== */ /* Desktop sidebar: pin to right instead of left */ [dir="rtl"] .lg\:fixed.lg\:inset-y-0 { left: auto; right: 0; } /* Content area: swap padding from left to right */ [dir="rtl"] .lg\:pl-\[15rem\] { padding-left: 0 !important; padding-right: 15rem !important; } [dir="rtl"] .lg\:pl-\[4\.7rem\] { padding-left: 0 !important; padding-right: 4.7rem !important; } /* Sidebar border: swap from right to left */ [dir="rtl"] .border-r { border-right-width: 0; border-left-width: 1px; } [dir="rtl"] .border-l { border-left-width: 0; border-right-width: 1px; } /* Active item border indicators */ [dir="rtl"] .border-l-4 { border-left-width: 0; border-right-width: 4px; } [dir="rtl"] .border-l-2 { border-left-width: 0; border-right-width: 2px; } [dir="rtl"] .border-r-4 { border-right-width: 0; border-left-width: 4px; } /* Sidebar rounded corners */ [dir="rtl"] .rounded-r-md { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } [dir="rtl"] .rounded-l-md { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } [dir="rtl"] .rounded-r-lg { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } [dir="rtl"] .rounded-l-lg { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } /* Mobile sidebar: slide from right instead of left */ [dir="rtl"] .-translate-x-full { --tw-translate-x: 100% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); } [dir="rtl"] .translate-x-0 { --tw-translate-x: 0 !important; } [dir="rtl"] .translate-x-full { --tw-translate-x: -100% !important; } /* Mobile sidebar position */ [dir="rtl"] .left-0 { left: auto; right: 0; } [dir="rtl"] .right-0 { right: auto; left: 0; } /* Collapse button position flip */ [dir="rtl"] [style*="right: -16px"], [dir="rtl"] .right-\[-16px\] { right: auto !important; left: -16px !important; } /* ========================================================================== 3. MARGIN FLIPS ========================================================================== */ [dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; } [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .ml-5 { margin-left: 0; margin-right: 1.25rem; } [dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; } [dir="rtl"] .ml-8 { margin-left: 0; margin-right: 2rem; } [dir="rtl"] .ml-10 { margin-left: 0; margin-right: 2.5rem; } [dir="rtl"] .ml-12 { margin-left: 0; margin-right: 3rem; } [dir="rtl"] .ml-auto { margin-left: unset; margin-right: auto; } [dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; } [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .mr-5 { margin-right: 0; margin-left: 1.25rem; } [dir="rtl"] .mr-6 { margin-right: 0; margin-left: 1.5rem; } [dir="rtl"] .mr-8 { margin-right: 0; margin-left: 2rem; } [dir="rtl"] .mr-10 { margin-right: 0; margin-left: 2.5rem; } [dir="rtl"] .mr-12 { margin-right: 0; margin-left: 3rem; } [dir="rtl"] .mr-auto { margin-right: unset; margin-left: auto; } [dir="rtl"] .-ml-1 { margin-left: 0; margin-right: -0.25rem; } [dir="rtl"] .-ml-2 { margin-left: 0; margin-right: -0.5rem; } [dir="rtl"] .-ml-3 { margin-left: 0; margin-right: -0.75rem; } [dir="rtl"] .-ml-4 { margin-left: 0; margin-right: -1rem; } [dir="rtl"] .-ml-px { margin-left: 0; margin-right: -1px; } [dir="rtl"] .-mr-1 { margin-right: 0; margin-left: -0.25rem; } [dir="rtl"] .-mr-2 { margin-right: 0; margin-left: -0.5rem; } [dir="rtl"] .-mr-3 { margin-right: 0; margin-left: -0.75rem; } [dir="rtl"] .-mr-4 { margin-right: 0; margin-left: -1rem; } [dir="rtl"] .-mr-px { margin-right: 0; margin-left: -1px; } /* ========================================================================== 4. PADDING FLIPS ========================================================================== */ [dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; } [dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; } [dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; } [dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; } [dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; } [dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; } [dir="rtl"] .pl-12 { padding-left: 0; padding-right: 3rem; } [dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; } [dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; } [dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; } [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .pr-5 { padding-right: 0; padding-left: 1.25rem; } [dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; } [dir="rtl"] .pr-8 { padding-right: 0; padding-left: 2rem; } [dir="rtl"] .pr-10 { padding-right: 0; padding-left: 2.5rem; } [dir="rtl"] .pr-12 { padding-right: 0; padding-left: 3rem; } /* ========================================================================== 5. TEXT ALIGNMENT ========================================================================== */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* ========================================================================== 6. FLEXBOX & SPACING ========================================================================== */ [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-5 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-10 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] .space-x-12 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; } /* Divide direction */ [dir="rtl"] .divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; } /* ========================================================================== 7. POSITIONING FLIPS ========================================================================== */ [dir="rtl"] .left-1 { left: auto; right: 0.25rem; } [dir="rtl"] .left-2 { left: auto; right: 0.5rem; } [dir="rtl"] .left-3 { left: auto; right: 0.75rem; } [dir="rtl"] .left-4 { left: auto; right: 1rem; } [dir="rtl"] .left-5 { left: auto; right: 1.25rem; } [dir="rtl"] .left-6 { left: auto; right: 1.5rem; } [dir="rtl"] .left-8 { left: auto; right: 2rem; } [dir="rtl"] .left-full { left: auto; right: 100%; } [dir="rtl"] .right-1 { right: auto; left: 0.25rem; } [dir="rtl"] .right-2 { right: auto; left: 0.5rem; } [dir="rtl"] .right-3 { right: auto; left: 0.75rem; } [dir="rtl"] .right-4 { right: auto; left: 1rem; } [dir="rtl"] .right-5 { right: auto; left: 1.25rem; } [dir="rtl"] .right-6 { right: auto; left: 1.5rem; } [dir="rtl"] .right-8 { right: auto; left: 2rem; } [dir="rtl"] .right-full { right: auto; left: 100%; } /* ========================================================================== 8. ICON & SVG FLIPS ========================================================================== */ /* Flip directional icons (arrows, chevrons) */ [dir="rtl"] .rotate-0[class*="arrow"], [dir="rtl"] svg[class*="chevron-left"], [dir="rtl"] svg[class*="chevron-right"], [dir="rtl"] .heroicon-chevron-left, [dir="rtl"] .heroicon-chevron-right { transform: scaleX(-1); } /* Breadcrumb separators */ [dir="rtl"] .breadcrumb-separator, [dir="rtl"] [class*="breadcrumb"] svg { transform: scaleX(-1); } /* ========================================================================== 9. TABLES ========================================================================== */ [dir="rtl"] table { direction: rtl; text-align: right; } [dir="rtl"] th, [dir="rtl"] td { text-align: right; } [dir="rtl"] th:first-child, [dir="rtl"] td:first-child { text-align: right; } [dir="rtl"] th:last-child, [dir="rtl"] td:last-child { text-align: left; } /* PowerGrid table overrides */ [dir="rtl"] .power-grid-table th, [dir="rtl"] .power-grid-table td { text-align: right; } /* ========================================================================== 10. FORMS ========================================================================== */ [dir="rtl"] label { text-align: right; } /* Checkbox / radio: label on the right */ [dir="rtl"] input[type="checkbox"], [dir="rtl"] input[type="radio"] { margin-left: 0.5rem; margin-right: 0; } /* Select arrow position */ [dir="rtl"] select { background-position: left 0.5rem center; padding-right: 0.75rem; padding-left: 2.5rem; } /* Tom Select */ [dir="rtl"] .ts-control { text-align: right; padding-left: 2rem; padding-right: 0.5rem; } [dir="rtl"] .ts-dropdown { text-align: right; } /* Search input within selects */ [dir="rtl"] .ts-control input { text-align: right; } /* ========================================================================== 11. DROPDOWN & POPOVER POSITIONING ========================================================================== */ [dir="rtl"] [x-anchor], [dir="rtl"] .dropdown-menu { right: 0; left: auto; } /* Alpine.js dropdown positioning */ [dir="rtl"] [x-transition\:enter][class*="origin-top-right"] { transform-origin: top left; } [dir="rtl"] [x-transition\:enter][class*="origin-top-left"] { transform-origin: top right; } /* ========================================================================== 12. CHAT INTERFACE ========================================================================== */ /* Sent messages: keep on the right in RTL */ [dir="rtl"] .chat-message-sent, [dir="rtl"] [class*="justify-end"] .chat-bubble { margin-left: 0; margin-right: auto; } /* Received messages: keep on the left in RTL */ [dir="rtl"] .chat-message-received, [dir="rtl"] [class*="justify-start"] .chat-bubble { margin-right: 0; margin-left: auto; } /* Chat list */ [dir="rtl"] .chat-list-item { text-align: right; } /* ========================================================================== 13. NOTIFICATION & TOAST ========================================================================== */ [dir="rtl"] .notification-container { right: auto; left: 1rem; } /* ========================================================================== 14. FLOAT UTILITIES ========================================================================== */ [dir="rtl"] .float-left { float: right; } [dir="rtl"] .float-right { float: left; } /* ========================================================================== 15. SCROLL & OVERFLOW ========================================================================== */ [dir="rtl"] .overflow-x-auto { direction: rtl; } /* ========================================================================== 16. RESPONSIVE OVERRIDES (must match main breakpoints) ========================================================================== */ @media (min-width: 640px) { [dir="rtl"] .sm\:ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .sm\:ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .sm\:ml-6 { margin-left: 0; margin-right: 1.5rem; } [dir="rtl"] .sm\:mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .sm\:mr-4 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .sm\:mr-6 { margin-right: 0; margin-left: 1.5rem; } [dir="rtl"] .sm\:pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .sm\:pl-6 { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .sm\:pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .sm\:pr-6 { padding-right: 0; padding-left: 1.5rem; } [dir="rtl"] .sm\:text-left { text-align: right; } [dir="rtl"] .sm\:text-right { text-align: left; } } @media (min-width: 768px) { [dir="rtl"] .md\:ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .md\:ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .md\:ml-6 { margin-left: 0; margin-right: 1.5rem; } [dir="rtl"] .md\:mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .md\:mr-4 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .md\:mr-6 { margin-right: 0; margin-left: 1.5rem; } [dir="rtl"] .md\:pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .md\:pl-6 { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .md\:pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .md\:pr-6 { padding-right: 0; padding-left: 1.5rem; } [dir="rtl"] .md\:text-left { text-align: right; } [dir="rtl"] .md\:text-right { text-align: left; } } @media (min-width: 1024px) { [dir="rtl"] .lg\:ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .lg\:ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .lg\:ml-6 { margin-left: 0; margin-right: 1.5rem; } [dir="rtl"] .lg\:ml-8 { margin-left: 0; margin-right: 2rem; } [dir="rtl"] .lg\:mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .lg\:mr-4 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .lg\:mr-6 { margin-right: 0; margin-left: 1.5rem; } [dir="rtl"] .lg\:mr-8 { margin-right: 0; margin-left: 2rem; } [dir="rtl"] .lg\:pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .lg\:pl-6 { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .lg\:pl-8 { padding-left: 0; padding-right: 2rem; } [dir="rtl"] .lg\:pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .lg\:pr-6 { padding-right: 0; padding-left: 1.5rem; } [dir="rtl"] .lg\:pr-8 { padding-right: 0; padding-left: 2rem; } [dir="rtl"] .lg\:text-left { text-align: right; } [dir="rtl"] .lg\:text-right { text-align: left; } [dir="rtl"] .lg\:left-0 { left: auto; right: 0; } [dir="rtl"] .lg\:right-0 { right: auto; left: 0; } } /* ========================================================================== 17. MISC & UTILITY FIXES ========================================================================== */ /* List markers */ [dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.5rem; } /* Inline list items */ [dir="rtl"] .list-disc { padding-left: 0; padding-right: 1.25rem; } /* Badge & Tag spacing */ [dir="rtl"] .gap-x-1 { column-gap: 0.25rem; } [dir="rtl"] .gap-x-2 { column-gap: 0.5rem; } /* Dialog/Modal close button */ [dir="rtl"] .modal-close, [dir="rtl"] [class*="dialog"] button[class*="close"], [dir="rtl"] [class*="modal"] button[class*="absolute"][class*="right"] { right: auto; left: 0.75rem; } /* Quill editor */ [dir="rtl"] .ql-editor { direction: rtl; text-align: right; } [dir="rtl"] .ql-toolbar { direction: rtl; } /* intl-tel-input */ [dir="rtl"] .iti { direction: ltr; } [dir="rtl"] .iti input { direction: ltr; text-align: left; } /* Sortable handles */ [dir="rtl"] .handle, [dir="rtl"] [wire\:sortable\.handle] { cursor: grab; } /* Font override for Arabic readability */ [dir="rtl"] { font-family: 'Noto Sans Arabic', 'Segoe UI', 'Inter', 'Tahoma', sans-serif; } /* ========================================================================== 18. LANDING PAGE / FRONTEND ========================================================================== */ [dir="rtl"] .hero-section { text-align: right; } [dir="rtl"] .feature-card { text-align: right; } [dir="rtl"] footer { text-align: right; } /* Navigation */ [dir="rtl"] nav .space-x-1 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] nav .space-x-2 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] nav .space-x-4 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] nav .space-x-6 > :not([hidden]) ~ :not([hidden]), [dir="rtl"] nav .space-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; } /* ========================================================================== 19. PRINT STYLES ========================================================================== */ @media print { [dir="rtl"] { direction: rtl; text-align: right; } } /* ========================================================================== 20. ANIMATION DIRECTION ========================================================================== */ [dir="rtl"] .animate-slide-in-left { animation-name: rtl-slide-in-right; } [dir="rtl"] .animate-slide-in-right { animation-name: rtl-slide-in-left; } @keyframes rtl-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes rtl-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }