/* RTL overrides. Most spacing/positioning already uses logical CSS properties (margin-inline-*, inset-inline-*, text-align: start) in the other stylesheets, so they flip automatically when . This file only covers the cases that need an explicit correction: fonts, directional icons, numerals. Loaded only when the active language is Arabic (see core/i18n.js). */ [dir="rtl"] body { font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', var(--font-sans); } [dir="rtl"] h1, [dir="rtl"] h2 { font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', var(--font-sans); font-weight: 700; } /* Icons that visually imply LTR direction (chevrons, arrows used for "next/back") */ [dir="rtl"] .flip-rtl { transform: scaleX(-1); } /* Keep money/numbers left-to-right even inside RTL text (BHD with 3 decimals) */ .mono, .amount, .num { direction: ltr; unicode-bidi: isolate; } /* Uppercase tracking reads poorly in Arabic script */ [dir="rtl"] .nav-group-label, [dir="rtl"] .data-table th, [dir="rtl"] .kpi-label { text-transform: none; letter-spacing: 0; } /* Sidebar sits on the opposite side; content margin follows automatically via margin-inline-start already used in layout.css — nothing else required. */ [dir="rtl"] .sidebar { inset-inline-start: 0; } /* Toast stack anchors to the reading-start corner in RTL too (already logical), but bottom offset stays the same; explicit for clarity only. */ [dir="rtl"] .toast-stack { inset-inline-end: var(--sp-5); }