/* ========================================================================== AdminLTE RTL helper (v3) - tailored for your setup - Works with AdminLTE 3.x, Bootstrap 4 - Handles: layout fixed header/footer, sidebar-mini, sidebar-collapse - Body (AR) classes seen: layout-navbar-fixed layout-footer-fixed sidebar-mini sidebar-collapse rtl Load AFTER adminlte.min.css and ONLY when . ========================================================================== */ :root[dir="rtl"]{ --lte-sidebar-width: 250px; /* change if you customized width */ --lte-sidebar-mini-width: 4.6rem; /* AdminLTE mini rail */ } /* 1) Sidebar belongs to the RIGHT in RTL */ [dir="rtl"] .main-sidebar{ right:0; left:auto; } /* 2) Neutralize ALL LTR margins on the main rails (mobile-first) */ [dir="rtl"] .content-wrapper, [dir="rtl"] .main-header, [dir="rtl"] .main-footer{ margin-left:0 !important; padding-left:0 !important; /* default mobile */ margin-right:0; } /* Smooth transitions like AdminLTE */ [dir="rtl"] .main-sidebar, [dir="rtl"] .content-wrapper, [dir="rtl"] .main-header, [dir="rtl"] .main-footer{ transition: margin-right .3s ease-in-out, margin-left .3s ease-in-out; } /* ========= DESKTOP (AdminLTE uses >= 992px for sidebar layout) ========= */ @media (min-width:992px){ /* Default expanded (no sidebar-collapse): push from RIGHT by full width */ body[dir="rtl"]:not(.sidebar-collapse) .content-wrapper, body[dir="rtl"]:not(.sidebar-collapse) .main-header, body[dir="rtl"]:not(.sidebar-collapse) .main-footer{ margin-right:var(--lte-sidebar-width) !important; } /* Collapsed (sidebar-collapse): - If NOT mini: full collapse => no right margin - If mini + collapsed: keep mini rail on RIGHT */ /* collapsed, not mini => no offset */ body.sidebar-collapse[dir="rtl"]:not(.sidebar-mini) .content-wrapper, body.sidebar-collapse[dir="rtl"]:not(.sidebar-mini) .main-header, body.sidebar-collapse[dir="rtl"]:not(.sidebar-mini) .main-footer{ margin-right:0 !important; } /* mini + collapsed => keep mini rail (mirror of LTR 4.6rem) */ body.sidebar-mini.sidebar-collapse[dir="rtl"] .content-wrapper, body.sidebar-mini.sidebar-collapse[dir="rtl"] .main-header, body.sidebar-mini.sidebar-collapse[dir="rtl"] .main-footer{ margin-right:var(--lte-sidebar-mini-width) !important; } /* In desktop, slide the sidebar off-canvas to the RIGHT when collapsed (mirror of LTR) */ body.sidebar-collapse[dir="rtl"] .main-sidebar{ margin-right:calc(-1 * var(--lte-sidebar-width)); margin-left:0; } } /* ========= MOBILE/TABLET (< 992px) ========= */ @media (max-width:991.98px){ /* Content should be full width on small screens */ body[dir="rtl"] .content-wrapper, body[dir="rtl"] .main-header, body[dir="rtl"] .main-footer{ margin-right:0 !important; margin-left:0 !important; } /* Off-canvas: hide sidebar to the RIGHT when collapsed */ body.sidebar-collapse[dir="rtl"] .main-sidebar{ margin-right:calc(-1 * var(--lte-sidebar-width)); margin-left:0; } /* When opened (overlay), bring it back */ body.sidebar-open[dir="rtl"] .main-sidebar{ margin-right:0; margin-left:0; } } /* 3) Control Sidebar should also open from RIGHT in RTL */ [dir="rtl"] .control-sidebar{ right:0; left:auto; } /* 4) Minor utility flips (kept minimal) */ [dir="rtl"] .navbar-nav.ml-auto{ margin-left:0 !important; margin-right:auto !important; } [dir="rtl"] .dropdown-menu{ right:0; left:auto; text-align:right; } [dir="rtl"] .breadcrumb{ direction:rtl; }