/* ═══════════════════════════════════════════════════════════════════════════════ MATCH DEAL PRO — RIGHT-TO-LEFT THIS FILE IS INTENTIONALLY SHORT, AND THAT IS THE POINT. Every other stylesheet in this application is written with CSS logical properties — `inset-inline-start`, `padding-inline`, `border-inline-end`, `margin-block-end`, `text-align: start` — so the entire layout mirrors itself the moment `` is set. There is no parallel Arabic stylesheet to maintain and no risk of one drifting from the other. What remains here is only the handful of things logical properties cannot express: 1. Glyphs and icons that encode a physical direction (a chevron pointing at "the next thing" must physically flip; a chevron pointing "down" must not). 2. Numeric and machine-readable content — money, dates, identifiers, phone numbers, emails — which stays left-to-right even inside Arabic prose, because an account number rendered right-to-left is a wrong account number. 3. `transform: translateX()` values, which are physical by definition. Those that matter are already overridden next to the rule they invert (see the sidenav drawer in layout.css and the switch knob in components.css); this file covers what is left. Anything added to this file that is NOT one of those three categories is a sign that a component used a physical property somewhere and should be fixed there instead. ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ 1 — DIRECTIONAL GLYPHS Opt-in, never blanket. A rule like `[dir='rtl'] svg { transform: scaleX(-1) }` would also mirror the search magnifier, the bell, the shield and every logo. So a component marks the icons that genuinely point somewhere with `data-flip-rtl` and only those flip. ═══════════════════════════════════════════════════════════════════════════════ */ :root[dir='rtl'] [data-flip-rtl] { transform: scaleX(-1); } /* The sort arrow's descending state is a rotation, not a direction — it must survive the flip above so ascending and descending do not swap in Arabic. */ :root[dir='rtl'] .mdp-th-sort[aria-sort='descending'] .mdp-sort-arrow { transform: rotate(180deg); } /* The breadcrumb separator is a chevron and does point forwards. */ :root[dir='rtl'] .mdp-crumb-sep { transform: scaleX(-1); } /* ═══════════════════════════════════════════════════════════════════════════════ 2 — CONTENT THAT STAYS LTR `direction: ltr` with `unicode-bidi: isolate` rather than `embed`: isolate keeps the run out of the surrounding paragraph's bidi resolution entirely, so a mixed Arabic sentence containing a reference number renders both correctly. `text-align` is deliberately NOT forced here. A numeric table cell should still sit at the inline end of its column when the table is mirrored; only the characters inside it read left to right. ═══════════════════════════════════════════════════════════════════════════════ */ :root[dir='rtl'] .mdp-mono, :root[dir='rtl'] .mdp-numeric, :root[dir='rtl'] .mdp-ltr, :root[dir='rtl'] code, :root[dir='rtl'] kbd, :root[dir='rtl'] samp, :root[dir='rtl'] .mdp-score-value, :root[dir='rtl'] .mdp-stat-value, :root[dir='rtl'] .mdp-state-code, :root[dir='rtl'] time, :root[dir='rtl'] input[type='date'], :root[dir='rtl'] input[type='email'], :root[dir='rtl'] input[type='tel'], :root[dir='rtl'] input[type='url'], :root[dir='rtl'] input[type='number'] { direction: ltr; unicode-bidi: isolate; } /* A URL or email typed into a text field is still LTR content, but the field's own placeholder is Arabic prose — so the field is only flipped when a component marks it, not by type inference. */ :root[dir='rtl'] .mdp-input[data-ltr='true'] { direction: ltr; text-align: start; } /* ═══════════════════════════════════════════════════════════════════════════════ 3 — PHYSICAL TRANSFORMS AND SHADOWS ═══════════════════════════════════════════════════════════════════════════════ */ /* Toast and modal entry animations translate on Y only, so they need nothing. The drawer and the mobile nav drawer translate on X and are overridden beside their own keyframes. What is left is the one-pixel active-press nudge, which is also Y. */ /* Shadows carry a physical X offset. At the depths used here (0 or ±1px) the asymmetry is invisible, so they are left alone rather than duplicated — a mirrored shadow set would be four more tokens per theme for no perceptible gain, and Rule 10 favours maintainability. */ /* ═══════════════════════════════════════════════════════════════════════════════ ARABIC TYPOGRAPHY Arabic has no capital letters, so `text-transform: uppercase` is a no-op on Arabic text — but `letter-spacing` on an Arabic string breaks the joins between letters and is genuinely unreadable. Both are neutralised for the small-caps labels that use them. ═══════════════════════════════════════════════════════════════════════════════ */ :root[lang='ar'] .mdp-stat-label, :root[lang='ar'] .mdp-kv-key, :root[lang='ar'] .mdp-nav-section-label, :root[lang='ar'] .mdp-table thead th, :root[lang='ar'] .mdp-menu-group-label, :root[lang='ar'] .mdp-gsearch-group-label, :root[lang='ar'] .mdp-table[data-stack='true'] tbody td::before { letter-spacing: 0; text-transform: none; } /* Arabic sits lower on the line and reads better with slightly more leading at the same size. Applied to the document so every component inherits it, rather than to each component. */ :root[lang='ar'] body { line-height: 1.75; } :root[lang='ar'] h1, :root[lang='ar'] h2, :root[lang='ar'] h3, :root[lang='ar'] h4, :root[lang='ar'] h5, :root[lang='ar'] h6 { letter-spacing: 0; line-height: 1.4; }