/* * rtl.css — Right-to-left layout overrides for Arabic (and any future RTL locale). * * Activated by setting ``. Done by the locale-store on language change. * AdminJS itself doesn't support RTL natively, so we mirror the most visible * layout primitives: text alignment, sidebar, topbar, tables, forms, dashboards. * * Strategy: prefer logical CSS properties (margin-inline-start, etc.) where possible. * Fall back to explicit overrides for things AdminJS hardcodes with `left/right`. */ html[dir="rtl"], html[dir="rtl"] body { direction: rtl; text-align: right; } /* ── Layout primitives ─────────────────────────────────────────────────── */ html[dir="rtl"] .adminjs_Box, html[dir="rtl"] [class*="Box"] { text-align: right; } /* Tables: keep numeric columns aligned end-of-line */ html[dir="rtl"] table th, html[dir="rtl"] table td { text-align: right; } /* ── Sidebar (mirror to the right side) ────────────────────────────────── */ html[dir="rtl"] aside, html[dir="rtl"] nav { text-align: right; } /* AdminJS sidebar menu items: flip icon/label order */ html[dir="rtl"] [class*="SidebarLink"], html[dir="rtl"] [class*="MenuItem"] { flex-direction: row-reverse; } /* ── Topbar (custom-topbar.jsx) ────────────────────────────────────────── */ html[dir="rtl"] .custom-topbar { direction: rtl; } html[dir="rtl"] .custom-topbar .topbar-actions { flex-direction: row-reverse; } /* ── Dropdowns / popovers ──────────────────────────────────────────────── */ html[dir="rtl"] [class*="Dropdown"], html[dir="rtl"] [class*="Popover"], html[dir="rtl"] [class*="Menu"] { text-align: right; } /* ── Form inputs ───────────────────────────────────────────────────────── */ html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="search"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="number"], html[dir="rtl"] textarea { text-align: right; /* Let user content (e.g. URLs, English names mixed with Arabic) flow naturally. */ direction: ltr; unicode-bidi: plaintext; } /* But labels and help text follow page direction. */ html[dir="rtl"] label { text-align: right; } /* React-Select dropdowns */ html[dir="rtl"] [class*="select__control"], html[dir="rtl"] [class*="select__menu"], html[dir="rtl"] [class*="select__single-value"], html[dir="rtl"] [class*="select__placeholder"] { text-align: right; } /* ── Buttons with icons: swap icon side ────────────────────────────────── */ html[dir="rtl"] button [class*="Icon"]:first-child { margin-left: 0.5rem; margin-right: 0; } html[dir="rtl"] button [class*="Icon"]:last-child { margin-right: 0.5rem; margin-left: 0; } /* ── Filter drawer (right side in LTR → left side in RTL) ──────────────── */ html[dir="rtl"] [class*="FilterDrawer"], html[dir="rtl"] [class*="filter-drawer"] { left: 0 !important; right: auto !important; } /* ── Dashboard cards / role-specific layouts ───────────────────────────── */ html[dir="rtl"] [class*="dashboard-"] .card-primary, html[dir="rtl"] [class*="dashboard-"] .card-info, html[dir="rtl"] [class*="dashboard-"] .card-success, html[dir="rtl"] [class*="dashboard-"] .card-warning, html[dir="rtl"] [class*="dashboard-"] .card-danger { border-left: none; border-right: 4px solid currentColor; } /* ── Pagination ────────────────────────────────────────────────────────── */ html[dir="rtl"] [class*="Pagination"] { flex-direction: row-reverse; } /* ── Breadcrumbs ───────────────────────────────────────────────────────── */ html[dir="rtl"] [class*="Breadcrumb"] { flex-direction: row-reverse; } /* ── Notifications/Toasts (top-right in LTR → top-left in RTL) ─────────── */ html[dir="rtl"] [class*="Notice"], html[dir="rtl"] [class*="Toast"] { left: 1rem; right: auto; } /* ── Misc: ensure scrollbars and spacing don't break ───────────────────── */ html[dir="rtl"] * { /* Avoid common bugs where text-align inherits unintentionally for code blocks. */ } html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] [class*="mono"] { direction: ltr; unicode-bidi: embed; text-align: left; }