/* * RTL overrides for Arabic. Loaded LAST and only when . * * The flexbox sidebar/content structure and Bootstrap's logical margin utilities (ms-*/me-*) mirror * automatically under dir="rtl". These rules fix everything that uses *physical* left/right — the * app's custom CSS, Bootstrap's physical float/text utilities, form controls, dropdowns, and * DataTables chrome. */ [dir="rtl"] body { text-align: right; font-family: 'Tajawal', 'Cairo', 'Roboto', sans-serif; } /* ---- Bootstrap physical utilities that do NOT flip on their own ---- */ [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .float-end { float: left !important; } [dir="rtl"] .float-start { float: right !important; } /* Form select arrow + check/radio sit on the correct side. */ [dir="rtl"] .form-select { background-position: left 0.75rem center; padding-right: 0.75rem; padding-left: 2.25rem; text-align: right; } [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; } [dir="rtl"] .form-check .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; } [dir="rtl"] .form-control, [dir="rtl"] .form-label, [dir="rtl"] label, [dir="rtl"] .control-label { text-align: right; } /* Dropdowns / modal close button. */ [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .modal-header .btn-close { margin: -0.5rem auto -0.5rem -0.5rem; } [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* ---- App custom layout (layout-new.css + inline _Layout styles) ---- */ /* The sidebar is `position: fixed; left: 0` and `.main` uses physical `margin-left` (both from the CDN site.css) — neither mirrors under dir="rtl". Pin the sidebar to the right edge and push the main content to the left. */ [dir="rtl"] .sideBar { left: auto !important; right: 0 !important; border-right: none !important; border-left: 1px solid #F0F1F3 !important; } [dir="rtl"] .main { margin-left: 0 !important; margin-right: auto !important; } /* Responsive: below 820px the CDN reserves space for the left fixed sidebar with physical margin-left (67px collapsed / 252px open) — mirror those to the right. */ @media (max-width: 820px) { [dir="rtl"] .sideMenuClosed .main, [dir="rtl"] .main { margin-left: 0 !important; margin-right: 67px !important; } [dir="rtl"] .main { margin-right: 252px !important; } } /* Sidebar menu RTL fixes — the CDN/UA use physical left/right that do not mirror: 0. The menu