/* * Right-to-left overrides. Loaded ONLY when the active language is RTL * (see views/header.php), so nothing here can affect the English UI. * * Most of the app already uses Tailwind's logical utilities (me-/ms-/pe-/ps-), * which flip on their own under dir="rtl" — 188 of them versus 31 hard-coded * physical ones at the time of writing. This file exists to patch that * remaining minority plus Arabic typography; it is not a full RTL framework. * * Bootstrap and the Bitrix ui.*.css bundles are LTR builds, so a few of their * components need nudging too. */ /* ---- Typography -------------------------------------------------------- */ /* System Arabic fonts only — no webfont. The app renders inside a Bitrix24 iframe and pulling a font would add a render-blocking request (and a CSP surface) for text that these faces already cover well. */ [dir="rtl"] body, [dir="rtl"] .ui-btn, [dir="rtl"] .ui-ctl-element, [dir="rtl"] .dropdown-item { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Traditional Arabic", Arial, sans-serif; } /* Arabic glyphs sit taller than Latin; a touch more leading keeps dense listing tables legible rather than cramped. */ [dir="rtl"] body { line-height: 1.7; } /* Digits stay LTR inside RTL text. Without this, "1,850,000 AED" and phone numbers render with their parts in the wrong order. */ [dir="rtl"] .ltr-nums, [dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: right; unicode-bidi: embed; } /* ---- Flip hard-coded physical utilities -------------------------------- */ /* These are Tailwind classes that do NOT flip automatically. Listed explicitly rather than with a wildcard so the override stays predictable. */ [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; } [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; } [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; } [dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; } [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .border-l { border-left: 0; border-right-width: 1px; } [dir="rtl"] .border-r { border-right: 0; border-left-width: 1px; } /* text-left/right are used for table column alignment. Under RTL the intent is "start"/"end", not a fixed side. */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* ---- Component fixes ---------------------------------------------------- */ /* Bootstrap aligns this dropdown to the right edge in LTR; under RTL the gear menu should hang from the left edge instead, or it overflows the viewport. */ [dir="rtl"] .dropdown-menu-end { --bs-position: start; right: auto; left: 0; } /* Font Awesome arrows/chevrons that indicate direction, not position. */ [dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-arrow-left, [dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-chevron-left { transform: scaleX(-1); } /* Lists and form controls take their alignment from the document direction. */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.5rem; padding-left: 0; } [dir="rtl"] .ui-ctl-element, [dir="rtl"] textarea { text-align: right; } /* The Arabic listing fields are explicitly lang="ar" and already RTL in the English UI too — leave them alone so they don't get double-flipped. */ [dir="rtl"] [lang="ar"] { direction: rtl; text-align: right; } /* The map picker stays LTR even in an Arabic session. Leaflet positions its zoom buttons, attribution and popup tips with absolute left/right offsets computed in JS against an LTR assumption, so inheriting `direction: rtl` from puts the controls over the wrong corner and drags the attribution off the tile edge. The map is a graphic, not text — there is nothing inside it to read right-to-left. The Arabic labels, search box and status line around it are ordinary markup and flip normally. */ [dir="rtl"] .jfx-map { direction: ltr; } /* The status line under the map is prose again, so it follows the document. */ [dir="rtl"] .jfx-map-status { text-align: right; }