/* ========================================================= RTL LAYOUT OVERRIDES Applied when ========================================================= */ /* Arabic font — applied by language, not direction */ [lang^="ar"] { --bs-font-sans-serif: 'Droid Arabic Kufi', sans-serif; --bs-body-font-family: 'Droid Arabic Kufi', sans-serif; } [lang^="ar"] body, [lang^="ar"] body * { font-family: 'Droid Arabic Kufi', sans-serif; } /* Restore Font Awesome icon fonts */ [lang^="ar"] .fa-solid, [lang^="ar"] .fa-regular, [lang^="ar"] .fa-light, [lang^="ar"] .fa-brands, [lang^="ar"] .fas, [lang^="ar"] .far, [lang^="ar"] .fal, [lang^="ar"] .fab { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important; } /* ========================================================= SIDEBAR ========================================================= */ /* Sidebar pinned to right */ [dir="rtl"] .admin-sidebar { inset: 0 0 0 auto; box-shadow: -18px 0 42px rgba(15, 23, 42, 0.18); } /* Main content offset from right */ [dir="rtl"] .admin-main { margin-left: 0; margin-right: var(--sidebar-width); transition: margin-right 0.2s ease; } /* Desktop mini sidebar */ @media (min-width: 992px) { [dir="rtl"] body.sidebar-mini .admin-main { margin-right: var(--sidebar-mini-width); margin-left: 0; } /* Hover animation direction */ [dir="rtl"] body.sidebar-mini .admin-sidebar:hover .sidebar-nav .nav-link:hover, [dir="rtl"] body.sidebar-mini .admin-sidebar:hover .sidebar-nav .nav-link:focus { transform: translateX(-4px); } } /* Mobile sidebar animation */ @media (max-width: 991.98px) { [dir="rtl"] .admin-sidebar { transform: translateX(100%); } [dir="rtl"] .admin-main { margin-right: 0; } [dir="rtl"] body.sidebar-open .admin-sidebar { transform: translateX(0); } } /* Sidebar nav hover */ [dir="rtl"] .sidebar-nav .nav-link:hover, [dir="rtl"] .sidebar-nav .nav-link:focus { transform: translateX(-2px); } /* ========================================================= NAVBAR RTL LAYOUT ========================================================= */ /* RIGHT SIDE: Toggle Button + Edara Portal LEFT SIDE: Icons + Notifications + Dropdowns */ [dir="rtl"] .admin-navbar .container-fluid { display: flex !important; flex-direction: row !important; align-items: center; } /* Toggle button */ [dir="rtl"] .admin-navbar .sidebar-toggle { order: 1; margin-left: 0.75rem !important; margin-right: 0 !important; } /* Portal title */ [dir="rtl"] .admin-navbar .navbar-site-title { order: 2; margin: 0 !important; font-weight: 600; white-space: nowrap; } /* Module icons */ [dir="rtl"] .admin-navbar .navbar-modules { order: 3; margin-left: 0 !important; margin-right: 0.75rem !important; } /* Left-side actions */ [dir="rtl"] .admin-navbar .navbar-actions { order: 4; margin-right: auto !important; margin-left: 0 !important; display: flex; align-items: center; gap: 0.5rem; } /* Dropdown alignment */ [dir="rtl"] .dropdown-menu { text-align: right; } /* ========================================================= METRIC CARDS ========================================================= */ /* Accent border flipped */ [dir="rtl"] .metric-card::before { inset: 0 0 0 auto; } /* Legend alignment */ [dir="rtl"] .legend-list strong { margin-left: 0; margin-right: auto; } /* Info card values */ [dir="rtl"] .info-list strong, [dir="rtl"] .mini-card strong { text-align: left; } /* ========================================================= NOTIFICATION ========================================================= */ /* Notification dot */ [dir="rtl"] .notification-dot { right: auto; left: 8px; } /* Anchor the notification dropdown to its bell icon's left edge in RTL, extending rightward into open space instead of leftward off-screen. Bootstrap's .dropdown-menu-end isn't RTL-aware in this build, and the bell sits near the left edge of the screen in RTL, so anchoring from the right (as in LTR) pushes most of the box past the left edge. */ [dir="rtl"] .notification-menu { --bs-position: start; left: 0 !important; right: auto !important; } /* ========================================================= AUTH PAGES ========================================================= */ /* Theme toggle */ [dir="rtl"] .auth-theme-toggle { right: auto; left: 4.25rem; } /* RTL toggle */ [dir="rtl"] .auth-rtl-toggle { right: auto; left: 1rem; } /* Default RTL toggle position */ .auth-rtl-toggle { position: fixed; top: 1rem; right: 4.25rem; z-index: 10; }