/** * AdminLTE 3 â€” Arabic RTL * Framework: Laravel + AdminLTE 3 (Bootstrap 4) * * IMPORTANT: dir="rtl" is on ; sidebar-mini / sidebar-collapse / rtl are on . * Always use: html[dir="rtl"] body.sidebar-... OR body.rtl.sidebar-... * NEVER: html[dir="rtl"].sidebar-mini (those classes are not on ) */ html[dir="rtl"] { direction: rtl; } body.rtl { direction: rtl; text-align: right; font-family: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif; overflow-x: hidden; } /* ========================================================= 1) Sidebar position â€” RIGHT side ========================================================= */ html[dir="rtl"] .main-sidebar, html[dir="rtl"] .main-sidebar::before, body.rtl .main-sidebar, body.rtl .main-sidebar::before { left: auto !important; right: 0 !important; margin-left: 0 !important; } html[dir="rtl"] body.layout-fixed .main-sidebar, body.rtl.layout-fixed .main-sidebar { left: auto !important; right: 0 !important; } /* ========================================================= 2) Content margins â€” push from the RIGHT ========================================================= */ html[dir="rtl"] .content-wrapper, html[dir="rtl"] .main-footer, html[dir="rtl"] .main-header, body.rtl .content-wrapper, body.rtl .main-footer, body.rtl .main-header { margin-left: 0 !important; margin-right: 250px !important; } /* ========================================================= 3) Desktop mini-collapse (sidebar-mini + sidebar-collapse) ========================================================= */ @media (min-width: 992px) { html[dir="rtl"] body.sidebar-collapse .main-sidebar, html[dir="rtl"] body.sidebar-collapse .main-sidebar::before, body.rtl.sidebar-collapse .main-sidebar, body.rtl.sidebar-collapse .main-sidebar::before { margin-left: 0 !important; margin-right: 0 !important; transform: none !important; } /* Collapsed rail width (~70px) â€” enough room for centered icons */ html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar::before, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar::before { width: 4.4rem !important; right: 0 !important; left: auto !important; margin-left: 0 !important; margin-right: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; transform: none !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .content-wrapper, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-footer, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-header, body.rtl.sidebar-mini.sidebar-collapse .content-wrapper, body.rtl.sidebar-mini.sidebar-collapse .main-footer, body.rtl.sidebar-mini.sidebar-collapse .main-header { margin-left: 0 !important; margin-right: 4.4rem !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .brand-link, body.rtl.sidebar-mini.sidebar-collapse .brand-link { width: 4.4rem !important; text-align: center !important; padding: .8rem 0 !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .brand-link .brand-image, body.rtl.sidebar-mini.sidebar-collapse .brand-link .brand-image { float: none !important; margin: 0 auto !important; display: inline-block !important; } /* Hide labels / tree / chevrons in mini rail */ html[dir="rtl"] body.sidebar-mini.sidebar-collapse .brand-text, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .user-panel > .info, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link > .right, body.rtl.sidebar-mini.sidebar-collapse .brand-text, body.rtl.sidebar-mini.sidebar-collapse .user-panel > .info, body.rtl.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p, body.rtl.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview, body.rtl.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link > .right { display: none !important; width: 0 !important; opacity: 0 !important; visibility: hidden !important; margin: 0 !important; gap: 0 !important; } /* Zero sidebar padding so icons are not pushed off the right edge */ html[dir="rtl"] body.sidebar-mini.sidebar-collapse .sidebar, body.rtl.sidebar-mini.sidebar-collapse .sidebar { padding: 0 !important; overflow: visible !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar, body.rtl.sidebar-mini.sidebar-collapse .nav-sidebar { padding: 0 !important; margin: 0 !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar > .nav-item, body.rtl.sidebar-mini.sidebar-collapse .nav-sidebar > .nav-item { width: 100% !important; margin: 0 !important; overflow: visible !important; } /* * Collapsed link: kill ALL horizontal padding/margin (esp. padding-right * from expanded RTL) and center the icon with flex. */ html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link, body.rtl.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; min-height: 2.75rem !important; padding: .6rem 0 !important; padding-right: 0 !important; padding-left: 0 !important; margin: 0 !important; text-align: center !important; overflow: visible !important; box-sizing: border-box !important; border-radius: .25rem !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link > .nav-icon, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link > i.nav-icon, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link > i:first-child, body.rtl.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link > .nav-icon, body.rtl.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link > i.nav-icon, body.rtl.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link > i:first-child { float: none !important; position: static !important; margin: 0 !important; margin-right: 0 !important; margin-left: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.5rem !important; min-width: 1.5rem !important; font-size: 1.15rem !important; line-height: 1 !important; text-align: center !important; visibility: visible !important; opacity: 1 !important; flex-shrink: 0 !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .user-panel, body.rtl.sidebar-mini.sidebar-collapse .user-panel { text-align: center !important; padding: .5rem 0 !important; margin: 0 !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .user-panel .image, body.rtl.sidebar-mini.sidebar-collapse .user-panel .image { float: none !important; padding: 0 !important; margin: 0 !important; display: block !important; text-align: center !important; } /* Hover expand â€” restore flex row layout */ html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused { width: 250px !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-link, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-link { width: 250px !important; text-align: right !important; padding: .8rem .5rem .8rem 1rem !important; padding-right: .2rem !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-text, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-text, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p { display: block !important; width: auto !important; opacity: 1 !important; visibility: visible !important; margin: 0 !important; flex: 1 1 auto !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .sidebar, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .sidebar { padding-right: .2rem !important; padding-left: .5rem !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link { display: flex !important; justify-content: flex-start !important; gap: .75rem !important; width: auto !important; max-width: 100% !important; padding: .55rem .9rem .55rem .9rem !important; padding-right: .2rem !important; text-align: right !important; overflow: hidden !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > .right, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link > .right, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > .right, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link > .right { display: inline-flex !important; width: auto !important; opacity: 1 !important; visibility: visible !important; margin-right: auto !important; margin-left: 0 !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .menu-open > .nav-treeview, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .menu-open > .nav-treeview, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .menu-open > .nav-treeview, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .menu-open > .nav-treeview { display: block !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .brand-image, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .brand-image { float: right !important; margin: 0 0 0 .5rem !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .image, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .image { float: right !important; padding: 0 0 0 .8rem !important; display: inline-block !important; } html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > .nav-icon, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > i.nav-icon, html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > i:first-child, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > .nav-icon, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > i.nav-icon, body.rtl.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > i:first-child { float: none !important; margin: 0 !important; } } /* ========================================================= 4) Mobile / fully hidden off-canvas â€” slide to the RIGHT ========================================================= */ @media (max-width: 991.98px) { html[dir="rtl"] .content-wrapper, html[dir="rtl"] .main-footer, html[dir="rtl"] .main-header, body.rtl .content-wrapper, body.rtl .main-footer, body.rtl .main-header { margin-right: 0 !important; margin-left: 0 !important; } html[dir="rtl"] .main-sidebar, html[dir="rtl"] .main-sidebar::before, body.rtl .main-sidebar, body.rtl .main-sidebar::before { margin-left: 0 !important; margin-right: -250px !important; right: 0 !important; left: auto !important; width: 250px !important; transform: none !important; box-shadow: none !important; } html[dir="rtl"] body.sidebar-open .main-sidebar, html[dir="rtl"] body.sidebar-open .main-sidebar::before, body.rtl.sidebar-open .main-sidebar, body.rtl.sidebar-open .main-sidebar::before { margin-right: 0 !important; margin-left: 0 !important; transform: none !important; } html[dir="rtl"] body.sidebar-collapse:not(.sidebar-open) .main-sidebar, html[dir="rtl"] body.sidebar-collapse:not(.sidebar-open) .main-sidebar::before, body.rtl.sidebar-collapse:not(.sidebar-open) .main-sidebar, body.rtl.sidebar-collapse:not(.sidebar-open) .main-sidebar::before { margin-right: -250px !important; margin-left: 0 !important; } } /* ========================================================= 5) Expanded sidebar internals â€” Flexbox RTL (no float / absolute) ========================================================= */ html[dir="rtl"] .main-sidebar, body.rtl .main-sidebar { direction: rtl; overflow-x: hidden; } html[dir="rtl"] .brand-link, body.rtl .brand-link { text-align: right; padding-right: .2rem !important; } html[dir="rtl"] .brand-link .brand-image, body.rtl .brand-link .brand-image { float: right; margin: 0 0 0 .5rem; } html[dir="rtl"] .user-panel, body.rtl .user-panel { padding-right: .2rem !important; } html[dir="rtl"] .user-panel .image, body.rtl .user-panel .image { float: right; padding: 0 0 0 .8rem; } html[dir="rtl"] .user-panel .info, body.rtl .user-panel .info { text-align: right; margin-left: 0; } html[dir="rtl"] .nav-sidebar, body.rtl .nav-sidebar { direction: rtl; } /* Flex row: icon â†’ text â†’ chevron (dir:rtl puts icon on the right) */ html[dir="rtl"] .nav-sidebar .nav-link, body.rtl .nav-sidebar .nav-link { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: .75rem; position: relative !important; text-align: right; padding-top: .55rem !important; padding-bottom: .55rem !important; padding-right: .2rem !important; padding-left: .9rem !important; } html[dir="rtl"] .nav-sidebar .nav-link > .nav-icon, html[dir="rtl"] .nav-sidebar .nav-link > i.nav-icon, html[dir="rtl"] .nav-sidebar .nav-link > i:first-child, body.rtl .nav-sidebar .nav-link > .nav-icon, body.rtl .nav-sidebar .nav-link > i.nav-icon, body.rtl .nav-sidebar .nav-link > i:first-child { float: none !important; position: static !important; margin: 0 !important; width: 1.5rem; min-width: 1.5rem; flex-shrink: 0; text-align: center; display: inline-flex; align-items: center; justify-content: center; } html[dir="rtl"] .nav-sidebar .nav-link p, body.rtl .nav-sidebar .nav-link p { display: block; margin: 0; position: static !important; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Chevron via flex (margin-right:auto â†’ far left in RTL flex), not absolute */ html[dir="rtl"] .nav-sidebar .nav-link > .right, body.rtl .nav-sidebar .nav-link > .right { position: static !important; top: auto !important; right: auto !important; left: auto !important; margin: 0 !important; margin-right: auto !important; /* push to the left edge */ margin-top: 0 !important; flex-shrink: 0; transform: scaleX(-1); } html[dir="rtl"] .nav-sidebar .menu-open > .nav-link > i.right, body.rtl .nav-sidebar .menu-open > .nav-link > i.right { transform: scaleX(-1) rotate(-90deg); } html[dir="rtl"] .nav-sidebar .nav-treeview, body.rtl .nav-sidebar .nav-treeview { padding-left: 0 !important; padding-right: .2rem; } html[dir="rtl"] .nav-sidebar .nav-treeview .nav-link, body.rtl .nav-sidebar .nav-treeview .nav-link { padding-right: .2rem !important; padding-left: .9rem !important; } html[dir="rtl"] .sidebar, body.rtl .sidebar { padding-right: .2rem; padding-left: .5rem; overflow-x: hidden; } /* ========================================================= 6) General UI RTL helpers ========================================================= */ html[dir="rtl"] .ml-auto, body.rtl .ml-auto { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .float-right, body.rtl .float-right { float: left !important; } html[dir="rtl"] .float-left, body.rtl .float-left { float: right !important; } html[dir="rtl"] .text-left, body.rtl .text-left { text-align: right !important; } html[dir="rtl"] .text-right, body.rtl .text-right { text-align: left !important; } html[dir="rtl"] .dropdown-menu-right, body.rtl .dropdown-menu-right { right: auto !important; left: 0 !important; } html[dir="rtl"] .card-header .card-title, body.rtl .card-header .card-title { float: right !important; } html[dir="rtl"] .card-header > .card-tools, body.rtl .card-header > .card-tools { float: left !important; } html[dir="rtl"] .custom-file-label::after, body.rtl .custom-file-label::after { left: 0; right: auto; border-left: 0; border-right: 1px solid #ced4da; border-radius: .25rem 0 0 .25rem; content: "Ø§Ø³ØªØ¹Ø±Ø§Ø¶"; } html[dir="rtl"] .small-box .icon, body.rtl .small-box .icon { left: 10px; right: auto; } html[dir="rtl"] .small-box > .small-box-footer .fa, html[dir="rtl"] .small-box > .small-box-footer .fas, body.rtl .small-box > .small-box-footer .fa, body.rtl .small-box > .small-box-footer .fas { display: inline-block; transform: scaleX(-1); } html[dir="rtl"] div.dataTables_wrapper div.dataTables_filter, body.rtl div.dataTables_wrapper div.dataTables_filter { text-align: left; } html[dir="rtl"] div.dataTables_wrapper div.dataTables_info, body.rtl div.dataTables_wrapper div.dataTables_info { text-align: right; } html[dir="rtl"] div.dataTables_wrapper div.dataTables_paginate, body.rtl div.dataTables_wrapper div.dataTables_paginate { text-align: left; } html[dir="rtl"] div.dt-buttons, body.rtl div.dt-buttons { float: right; margin-left: 1rem; } html[dir="rtl"] .main-footer .float-right, body.rtl .main-footer .float-right { float: left !important; } /* ========================================================= 7) Header / navbar â€” keep language + user on one horizontal row ========================================================= */ html[dir="rtl"] .main-header.navbar, body.rtl .main-header.navbar, .main-header.navbar { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; min-height: 3.5rem; height: auto; padding-top: .35rem; padding-bottom: .35rem; } html[dir="rtl"] .main-header .navbar-nav, body.rtl .main-header .navbar-nav, .main-header .navbar-nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; margin-bottom: 0 !important; } /* Right cluster (language + user) â€” horizontal with gap */ html[dir="rtl"] .main-header .navbar-nav.ml-auto, body.rtl .main-header .navbar-nav.ml-auto, .main-header .navbar-nav.ml-auto { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: .35rem; flex-shrink: 0; margin-left: 0 !important; margin-right: 0 !important; /* space-between on navbar handles placement */ } html[dir="rtl"] .main-header .navbar-nav .nav-item, body.rtl .main-header .navbar-nav .nav-item, .main-header .navbar-nav .nav-item { display: flex !important; align-items: center !important; flex-shrink: 0; } html[dir="rtl"] .main-header .navbar-nav .nav-link, body.rtl .main-header .navbar-nav .nav-link, .main-header .navbar-nav .nav-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; line-height: 1 !important; white-space: nowrap; } .language-switcher .nav-link { padding-left: .55rem !important; padding-right: .55rem !important; white-space: nowrap; } .language-switcher .dropdown-menu { min-width: 8rem; } /* Keep dropdowns absolute even below navbar-expand breakpoint */ .main-header .navbar-nav .dropdown-menu { position: absolute !important; } @media (max-width: 767.98px) { .main-header.navbar { flex-wrap: nowrap !important; align-items: center !important; } .main-header .navbar-nav, .main-header .navbar-nav.ml-auto { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } .main-header .language-switcher .lang-label { display: none !important; } .main-header .language-switcher .nav-link, .main-header .user-menu .nav-link, .main-header .navbar-nav .nav-link { display: inline-flex !important; align-items: center !important; padding-top: .4rem !important; padding-bottom: .4rem !important; padding-left: .4rem !important; padding-right: .4rem !important; } .main-header .user-menu .nav-link span { display: none !important; } .main-header .user-menu .user-image { margin: 0 !important; } .main-header .navbar-nav.ml-auto { gap: .15rem; } }