/* ═══════════════════════════════════════════════════════════ ElaPartners — RTL Overrides (Arabic) Loaded only when ═══════════════════════════════════════════════════════════ */ html[dir="rtl"] { font-family: 'Noto Sans Arabic', 'Nunito Sans', sans-serif; } /* ── Layout: flip sidebar to the right ── */ html[dir="rtl"] body { direction: rtl; } html[dir="rtl"] .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(26, 26, 26, 0.08); } html[dir="rtl"].dark .sidebar, html[dir="rtl"] .dark .sidebar { border-left-color: rgba(255, 255, 255, 0.08); } html[dir="rtl"] .main-content, html[dir="rtl"] main { margin-left: 0; margin-right: 260px; } @media (max-width: 1024px) { html[dir="rtl"] .main-content, html[dir="rtl"] main { margin-right: 0; } html[dir="rtl"] .sidebar { transform: translateX(100%); } html[dir="rtl"] .sidebar.active { transform: translateX(0); } } /* ── Nav items flip icon side ── */ html[dir="rtl"] .nav-item { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .nav-item svg { margin-left: 0; margin-right: auto; } /* ── Flex utilities — reverse where meaningful ── */ html[dir="rtl"] .flex-row-reverse { flex-direction: row !important; } /* ── Text alignment ── */ html[dir="rtl"] { text-align: right; } html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* ── Margin/padding flips for common Tailwind utilities ── */ /* ml → mr */ html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } html[dir="rtl"] .ml-1\.5 { margin-left: 0 !important; margin-right: 0.375rem !important; } html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; } html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; } html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; } html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; } /* pl/pr flips */ html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 0.75rem !important; } html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; } html[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 1.25rem !important; } html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 0.75rem !important; } html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; } /* ── Border flips ── */ html[dir="rtl"] .border-l { border-left: 0 !important; border-right-width: 1px !important; } html[dir="rtl"] .border-r { border-right: 0 !important; border-left-width: 1px !important; } /* ── Data table RTL ── */ html[dir="rtl"] .datatable-top, html[dir="rtl"] .datatable-bottom { flex-direction: row-reverse; } html[dir="rtl"] .data-table th, html[dir="rtl"] .data-table td { text-align: right; } html[dir="rtl"] .datatable-input { padding: 6px 32px 6px 12px; background-position: right 10px center; } html[dir="rtl"] .datatable-selector { padding: 6px 10px 6px 26px; background-position: left 8px center; } html[dir="rtl"] .datatable-sorter { padding-right: 0; padding-left: 18px; } html[dir="rtl"] .datatable-sorter::after { right: auto; left: 0; } html[dir="rtl"] .datatable-pagination li:first-child :is(a,button) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); } html[dir="rtl"] .datatable-pagination li:last-child :is(a,button) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); } /* ── Mobile: hamburger + notification positions swap ── */ html[dir="rtl"] .mobile-header { direction: rtl; } /* ── Modals: close button to the left ── */ html[dir="rtl"] .modal-panel { direction: rtl; } /* ── Form groups — floating labels ── */ html[dir="rtl"] .form-group label { right: 12px; left: auto; } /* ── Status badge: reverse dot position ── */ html[dir="rtl"] .status-badge { flex-direction: row-reverse; } /* ── Tab navigation ── */ html[dir="rtl"] .tab-nav { flex-direction: row-reverse; } /* ── Keep mono/number cells LTR for readability ── */ html[dir="rtl"] .font-mono, html[dir="rtl"] [class*="font-mono"] { direction: ltr; text-align: right; unicode-bidi: embed; }