/* ============================================================ * Admin Panel RTL Overrides * Loaded only when app()->getLocale() is in ['ar','ckb']. * Bootstrap RTL handles ~80% of layout flips already; this * file covers project-specific selectors and the Arabic font. * ============================================================ */ /* ------------------------------------------------------------ * Critical: admin.css forces direction:ltr on several wrappers * (.content, .navbar-nav, footer.footer, .sidebar). Without these * overrides, RTL pages render their inner content in LTR order * even when . The result is text aligned right * but layout/flex order still LTR — broken hybrid look. * ------------------------------------------------------------ */ [dir="rtl"] .content, [dir="rtl"] .navbar-nav, [dir="rtl"] footer.footer { direction: rtl; } /* Apply Noto Sans Arabic to the admin chrome when RTL is active */ [dir="rtl"] body, [dir="rtl"] .navbar, [dir="rtl"] .sidebar, [dir="rtl"] .dropdown-menu, [dir="rtl"] .modal, [dir="rtl"] .btn, [dir="rtl"] .form-control, [dir="rtl"] .form-select, [dir="rtl"] .table { font-family: 'Noto Sans Arabic', 'Inter', sans-serif; } /* The base .sidebar rule in admin.css forces direction:ltr — undo it for RTL */ [dir="rtl"] .sidebar { direction: rtl; border-right: none; border-left: 1px solid var(--sidebar-border); } /* Sidebar nav padding flip */ [dir="rtl"] .sidebar-nav { padding-left: 0; padding-right: 0; } /* Sidebar link icon spacing flip */ [dir="rtl"] .sidebar-link i, [dir="rtl"] .sidebar-link svg, [dir="rtl"] a.sidebar-link i, [dir="rtl"] a.sidebar-link svg { margin-right: 0; margin-left: 0.75rem; } /* Sidebar link active border flip */ [dir="rtl"] .sidebar-link, [dir="rtl"] a.sidebar-link { border-left-style: none; border-left-width: 0; border-right-style: solid; border-right-width: 3px; border-right-color: transparent; } [dir="rtl"] .sidebar-link:hover { border-left-color: transparent; border-right-color: var(--sidebar-border); } [dir="rtl"] .sidebar-item.active > .sidebar-link, [dir="rtl"] .sidebar-item.active > div > .sidebar-link, [dir="rtl"] .sidebar-item.active .sidebar-link:hover { border-left-color: transparent; border-right-color: var(--sidebar-active-border); } /* Flip the ::before accent bar to the right side in RTL */ [dir="rtl"] .sidebar-item.active::before { left: auto; right: 0; border-radius: 3px 0 0 3px; } /* admin-v2.css forces border-left-color:transparent !important on hover/active — in RTL we need to neutralise that and keep the right border visible */ [dir="rtl"] .sidebar-link:hover, [dir="rtl"] .sidebar-link[aria-expanded="true"] { border-left-color: transparent !important; border-right-color: var(--sidebar-border) !important; } [dir="rtl"] .sidebar-item.active > .sidebar-link, [dir="rtl"] .sidebar-item.active > div > .sidebar-link, [dir="rtl"] .sidebar-item.active .sidebar-link:hover { border-left-color: transparent !important; border-right-color: transparent !important; } /* Sidebar collapsed: flip the negative margin direction */ [dir="rtl"] .sidebar.collapsed { margin-left: 0; margin-right: calc(var(--sidebar-width) * -1); } @media (min-width: 1px) and (max-width: 991.98px) { [dir="rtl"] .sidebar { margin-left: 0; margin-right: calc(var(--sidebar-width) * -1); } [dir="rtl"] .sidebar.collapsed { margin-right: 0; } } /* Sidebar badge: position on the opposite side */ [dir="rtl"] .sidebar-badge { right: auto; left: 15px; } /* Hamburger toggle margin flip */ [dir="rtl"] .sidebar-toggle { margin-right: 0; margin-left: 1rem; } /* Navbar item alignment. * admin.css line 868: `.navbar-align { margin-left: auto }` (physical) — pushes * the user/avatar group to the RIGHT side regardless of direction. In RTL * the entire group should mirror to the LEFT corner. We flip both the * .navbar-align custom class and Bootstrap's .ms-auto / .me-auto utilities. */ [dir="rtl"] .navbar .navbar-align, [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; } /* Stand-alone .navbar-align too (no .navbar parent), kept for safety */ [dir="rtl"] .navbar-align { margin-left: 0 !important; margin-right: auto !important; } /* Dropdown menu alignment — Bootstrap RTL handles .dropdown-menu-end already, but legacy custom CSS sometimes forces left:0 */ [dir="rtl"] .dropdown-menu-end { right: auto; left: 0; } /* Form inputs: text alignment */ [dir="rtl"] .form-control, [dir="rtl"] .form-select { text-align: right; } /* Numeric inputs should stay LTR even in RTL pages */ [dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input.ltr-input { direction: ltr; text-align: right; } /* Tables: align headers and cells to start (which is right in RTL) */ [dir="rtl"] .table > :not(caption) > * > * { text-align: right; } /* Card body text-align */ [dir="rtl"] .card-body, [dir="rtl"] .card-header, [dir="rtl"] .card-footer { text-align: right; } /* Buttons with leading/trailing icons: flip the spacing */ [dir="rtl"] .btn .fa, [dir="rtl"] .btn .fas, [dir="rtl"] .btn .far, [dir="rtl"] .btn i.me-1, [dir="rtl"] .btn i.me-2 { margin-right: 0; margin-left: 0.25rem; } /* Modal close button — Bootstrap RTL flips this, but ensure */ [dir="rtl"] .modal-header .btn-close { margin: -0.5rem auto -0.5rem -0.5rem; } /* Pagination — Bootstrap RTL flips arrows, but make sure list is RTL */ [dir="rtl"] .pagination { direction: rtl; } /* Hamburger right helper used by .hamburger-right */ [dir="rtl"] .hamburger-right, [dir="rtl"] .hamburger-right:before, [dir="rtl"] .hamburger-right:after { right: auto; left: 0; } /* Generic margin-left / margin-right helpers used in custom code */ [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }