/* ===================================================================== Medicore Direction (LTR/RTL) overlay v1 --------------------------------------------------------------------- Phase 1 foundation for bilingual layout. Arabic pages (dir="rtl") keep the current appearance unchanged. English pages (dir="ltr") need the directional properties to flip. Scope: - Scrollbar track direction (Arabic dashboards visually originate on the right; English should originate on the left). - Inline-logical spacing hints for shell elements that were written with margin-right / padding-right hardcoded to fit RTL. - Icon orientation hints for arrow / chevron / caret utilities that imply a direction (forward = toward the end of the line in both languages). - Font-family hint: Arabic primary body font (Tajawal) keeps rendering on Arabic pages; English pages get the secondary Latin stack so numerals and punctuation look native. Intentionally narrow: this file is LTR-only overrides. We do NOT mirror the whole stylesheet — Tailwind utilities + logical properties already flip automatically when flips. This file patches the leftovers. ===================================================================== */ /* --- 1. Baseline: give direction-aware defaults a stable source of truth --- */ html[dir="ltr"] { /* Force a left-to-right text flow everywhere below the html node. Individual inputs (phone numbers, emails) can still opt back to their own explicit dir via the `dir="ltr"` attribute. */ direction: ltr; text-align: start; } html[dir="rtl"] { direction: rtl; text-align: start; } /* --- 2. Icon / caret mirroring hints --- Any element tagged `.ml-dir-flip` is mirrored when we're in LTR. Arabic flow typically renders chevrons and "back" arrows pointing RIGHT (toward the end of the RTL line). In LTR they need to point LEFT to stay semantically "back". Apply the class on icons that imply direction; plain icons (home, user, gear) stay unflipped. */ html[dir="rtl"] .ml-dir-flip { transform: none; } html[dir="ltr"] .ml-dir-flip { transform: scaleX(-1); } /* FontAwesome chevron-left / chevron-right used as "back / forward" semantic indicators should also flip automatically. We target the common Arabic-first patterns seen in the shell (sidebar nav arrows, breadcrumb separators, accordion chevrons). These are additive — they do NOT remove the old classes, so Phase 2 audits can refine. */ html[dir="ltr"] .fa-chevron-left.auto-flip, html[dir="ltr"] .fa-chevron-right.auto-flip, html[dir="ltr"] .fa-angle-left.auto-flip, html[dir="ltr"] .fa-angle-right.auto-flip, html[dir="ltr"] .fa-arrow-left.auto-flip, html[dir="ltr"] .fa-arrow-right.auto-flip { transform: scaleX(-1); } /* --- 3. Scrollbar origin hint (cosmetic) --- */ html[dir="ltr"] * { scrollbar-gutter: auto; } /* --- 4. Auth shell overrides --- auth-security.css was authored Arabic-first and contains a handful of hardcoded directional properties. Map them to their LTR counterparts without touching the source so Arabic pages are unaffected. */ /* Mirror the RTL-specific progress-bar slide we defined for the loader. */ html[dir="ltr"] .ml-bar__fill--indeterminate { animation-name: ml-bar-slide; /* already LTR-oriented in medicore-loader.css */ } /* The auth form icon positioning uses `inset-inline-end/start` which already flips via logical properties. If any page still uses `right:` / `left:` for focus rings or toggle icons, scope the override here. */ html[dir="ltr"] .auth-field-icon { inset-inline-end: 0.9rem; inset-inline-start: auto; } html[dir="ltr"] .auth-field-toggle { inset-inline-start: 0.75rem; inset-inline-end: auto; } /* --- 5. Dashboard shell direction-aware tweaks --- base_dashboard.html uses Tailwind utilities (mr-*, ml-*, pr-*, pl-*) interspersed with logical equivalents. Tailwind CDN already provides `rtl:` / `ltr:` variants — but some inline styles hardcode the wrong side. These overrides reach them without editing thousands of pages. */ /* Sidebar padding: Tailwind's me-*/ms-* / mr-*/ml-* utilities handle most cases. The one exception is the fixed sidebar offset computed in JS. For LTR the sidebar sits on the LEFT of the main area; the main area shifts its padding accordingly. */ html[dir="ltr"] .fixed-sidebar-offset { padding-inline-start: var(--sidebar-width, 17rem); padding-inline-end: 0; } html[dir="rtl"] .fixed-sidebar-offset { padding-inline-end: var(--sidebar-width, 17rem); padding-inline-start: 0; } /* --- 6. Font stack --- Arabic content uses Tajawal (primary) + Alexandria (headings). In LTR mode we keep Tajawal as it ships a decent Latin glyphset, but we tweak the system font fallback to prefer Latin-first stacks for improved numeric / punctuation rendering. */ html[dir="ltr"] body { font-family: inherit, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; } /* --- 7. Utility: -less fallback for mixed content --- Inline English tokens embedded in Arabic pages are usually wrapped in for phone numbers, IDs, amounts. Make sure these remain LTR even inside an LTR document (no-op) and RTL document (explicit override already in the HTML). */ [dir="ltr"] { unicode-bidi: isolate; } /* --- 8. Print: always use the document's text direction as-is --- */ @media print { html[dir="ltr"] *, html[dir="rtl"] * { direction: inherit; } } /* --- 9. Phase 6 LTR catch-all fixes for common shell patterns ------ */ /* Tailwind's `space-x-*` utilities use `margin-left` regardless of direction. In RTL this looks fine because content visually reverses, but in LTR mixed-content tables it stays correct. No-op intentionally; left here as a doc anchor for Phase 7 audit. */ /* Common breadcrumb / sort-arrow icon patterns: any chevron used as a "show more / show next" affordance should carry .auto-flip; lock that visually in LTR. */ html[dir="ltr"] .fa-chevron-down.auto-flip, html[dir="ltr"] .fa-caret-down.auto-flip { /* down/up icons are direction-neutral — explicitly do nothing so the global .auto-flip rule for left/right doesn't accidentally hit them */ transform: none; } /* Fix for sidebar-style RTL-anchored shadows: in LTR the offset shadow should emanate to the right of the sidebar (toward the content area). `linear-gradient(180deg ...)` is direction-neutral so nothing to do for the dashboard sidebar gradient itself. */ html[dir="ltr"] aside[data-sidebar="true"] { box-shadow: -18px 0 48px -38px rgba(2, 6, 23, 0.88); } html[dir="rtl"] aside[data-sidebar="true"] { box-shadow: 18px 0 48px -38px rgba(2, 6, 23, 0.88); } /* Inline-block tokens (phone, IDs) inside Arabic pages should preserve their own LTR even when the document is LTR — that's the `unicode-bidi: isolate` from rule 7 above. Confirm here for Tailwind's dir-aware `` users. */ [dir="ltr"] bdi[dir="auto"], [dir="rtl"] bdi[dir="auto"] { unicode-bidi: isolate; } /* Phase 6: standalone pages that were just converted to dynamic lang/dir inherit the dashboard shell tokens but were authored Arabic-first. Apply a single LTR rule that ensures their primary content area uses logical inset, not physical, when on LTR. */ html[dir="ltr"] .standalone-page, html[dir="ltr"] [data-standalone-page] { direction: ltr; text-align: start; } /* === Phase 7 LTR retrofit ========================================== Tailwind's `mr-*` / `ml-*` / `pr-*` / `pl-*` utilities use PHYSICAL left/right offsets that don't flip with `dir`. Tailwind 3 ships `me-*` / `ms-*` / `pe-*` / `ps-*` LOGICAL alternatives but our 200+ templates were authored before that habit took hold. This block patches the most-frequent physical utilities in LTR mode by mirroring the opposite side. RTL is unaffected (default Arabic flow). Mechanism: in LTR we use `:where(...)` for low-specificity OVERRIDE so explicit Tailwind utility classes still win when they appear. ================================================================== */ html[dir="ltr"] .ml-1 { margin-inline-start: 0.25rem; margin-inline-end: 0; margin-left: 0; margin-right: 0.25rem; } html[dir="ltr"] .ml-2 { margin-inline-start: 0.5rem; margin-inline-end: 0; margin-left: 0; margin-right: 0.5rem; } html[dir="ltr"] .ml-3 { margin-inline-start: 0.75rem; margin-inline-end: 0; margin-left: 0; margin-right: 0.75rem; } html[dir="ltr"] .ml-4 { margin-inline-start: 1rem; margin-inline-end: 0; margin-left: 0; margin-right: 1rem; } html[dir="ltr"] .ml-5 { margin-inline-start: 1.25rem; margin-inline-end: 0; margin-left: 0; margin-right: 1.25rem; } html[dir="ltr"] .ml-6 { margin-inline-start: 1.5rem; margin-inline-end: 0; margin-left: 0; margin-right: 1.5rem; } html[dir="ltr"] .ml-8 { margin-inline-start: 2rem; margin-inline-end: 0; margin-left: 0; margin-right: 2rem; } html[dir="ltr"] .ml-auto { margin-inline-start: auto; margin-inline-end: 0; margin-left: 0; margin-right: auto; } html[dir="ltr"] .mr-1 { margin-inline-end: 0.25rem; margin-inline-start: 0; margin-right: 0; margin-left: 0.25rem; } html[dir="ltr"] .mr-2 { margin-inline-end: 0.5rem; margin-inline-start: 0; margin-right: 0; margin-left: 0.5rem; } html[dir="ltr"] .mr-3 { margin-inline-end: 0.75rem; margin-inline-start: 0; margin-right: 0; margin-left: 0.75rem; } html[dir="ltr"] .mr-4 { margin-inline-end: 1rem; margin-inline-start: 0; margin-right: 0; margin-left: 1rem; } html[dir="ltr"] .mr-5 { margin-inline-end: 1.25rem; margin-inline-start: 0; margin-right: 0; margin-left: 1.25rem; } html[dir="ltr"] .mr-6 { margin-inline-end: 1.5rem; margin-inline-start: 0; margin-right: 0; margin-left: 1.5rem; } html[dir="ltr"] .mr-8 { margin-inline-end: 2rem; margin-inline-start: 0; margin-right: 0; margin-left: 2rem; } html[dir="ltr"] .mr-auto { margin-inline-end: auto; margin-inline-start: 0; margin-right: 0; margin-left: auto; } html[dir="ltr"] .pl-1 { padding-inline-start: 0.25rem; padding-inline-end: 0; padding-left: 0; padding-right: 0.25rem; } html[dir="ltr"] .pl-2 { padding-inline-start: 0.5rem; padding-inline-end: 0; padding-left: 0; padding-right: 0.5rem; } html[dir="ltr"] .pl-3 { padding-inline-start: 0.75rem; padding-inline-end: 0; padding-left: 0; padding-right: 0.75rem; } html[dir="ltr"] .pl-4 { padding-inline-start: 1rem; padding-inline-end: 0; padding-left: 0; padding-right: 1rem; } html[dir="ltr"] .pl-5 { padding-inline-start: 1.25rem; padding-inline-end: 0; padding-left: 0; padding-right: 1.25rem; } html[dir="ltr"] .pl-6 { padding-inline-start: 1.5rem; padding-inline-end: 0; padding-left: 0; padding-right: 1.5rem; } html[dir="ltr"] .pl-8 { padding-inline-start: 2rem; padding-inline-end: 0; padding-left: 0; padding-right: 2rem; } html[dir="ltr"] .pl-10 { padding-inline-start: 2.5rem; padding-inline-end: 0; padding-left: 0; padding-right: 2.5rem; } html[dir="ltr"] .pl-11 { padding-inline-start: 2.75rem; padding-inline-end: 0; padding-left: 0; padding-right: 2.75rem; } html[dir="ltr"] .pr-1 { padding-inline-end: 0.25rem; padding-inline-start: 0; padding-right: 0; padding-left: 0.25rem; } html[dir="ltr"] .pr-2 { padding-inline-end: 0.5rem; padding-inline-start: 0; padding-right: 0; padding-left: 0.5rem; } html[dir="ltr"] .pr-3 { padding-inline-end: 0.75rem; padding-inline-start: 0; padding-right: 0; padding-left: 0.75rem; } html[dir="ltr"] .pr-4 { padding-inline-end: 1rem; padding-inline-start: 0; padding-right: 0; padding-left: 1rem; } html[dir="ltr"] .pr-5 { padding-inline-end: 1.25rem; padding-inline-start: 0; padding-right: 0; padding-left: 1.25rem; } html[dir="ltr"] .pr-6 { padding-inline-end: 1.5rem; padding-inline-start: 0; padding-right: 0; padding-left: 1.5rem; } html[dir="ltr"] .pr-8 { padding-inline-end: 2rem; padding-inline-start: 0; padding-right: 0; padding-left: 2rem; } html[dir="ltr"] .pr-10 { padding-inline-end: 2.5rem; padding-inline-start: 0; padding-right: 0; padding-left: 2.5rem; } html[dir="ltr"] .pr-11 { padding-inline-end: 2.75rem; padding-inline-start: 0; padding-right: 0; padding-left: 2.75rem; } /* Border physical → logical */ html[dir="ltr"] .border-l { border-inline-start-width: 1px; border-left-width: 0; border-right-width: 1px; } html[dir="ltr"] .border-l-2 { border-inline-start-width: 2px; border-left-width: 0; border-right-width: 2px; } html[dir="ltr"] .border-l-4 { border-inline-start-width: 4px; border-left-width: 0; border-right-width: 4px; } html[dir="ltr"] .border-r { border-inline-end-width: 1px; border-right-width: 0; border-left-width: 1px; } html[dir="ltr"] .border-r-2 { border-inline-end-width: 2px; border-right-width: 0; border-left-width: 2px; } html[dir="ltr"] .border-r-4 { border-inline-end-width: 4px; border-right-width: 0; border-left-width: 4px; } /* Round corners — Tailwind's `rounded-l-*` / `rounded-r-*` need flipping */ html[dir="ltr"] .rounded-l-lg { border-start-start-radius: 0.5rem; border-end-start-radius: 0.5rem; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } html[dir="ltr"] .rounded-r-lg { border-start-end-radius: 0.5rem; border-end-end-radius: 0.5rem; border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } /* Position: left-N and right-N → logical insets */ html[dir="ltr"] .left-0 { inset-inline-start: 0; left: 0; right: auto; } html[dir="ltr"] .left-2 { inset-inline-start: 0.5rem; left: 0.5rem; right: auto; } html[dir="ltr"] .left-3 { inset-inline-start: 0.75rem; left: 0.75rem; right: auto; } html[dir="ltr"] .left-4 { inset-inline-start: 1rem; left: 1rem; right: auto; } html[dir="ltr"] .right-0 { inset-inline-end: 0; right: 0; left: auto; } html[dir="ltr"] .right-2 { inset-inline-end: 0.5rem; right: 0.5rem; left: auto; } html[dir="ltr"] .right-3 { inset-inline-end: 0.75rem; right: 0.75rem; left: auto; } html[dir="ltr"] .right-4 { inset-inline-end: 1rem; right: 1rem; left: auto; } /* Text alignment — Tailwind's `text-right`/`text-left` should mirror */ html[dir="ltr"] .text-right { text-align: end; } html[dir="ltr"] .text-left { text-align: start; } /* Float — physical floats should also mirror */ html[dir="ltr"] .float-right { float: right; } html[dir="ltr"] .float-left { float: left; } /* `space-x-N` defaults work fine in both directions; no override needed. But `space-x-reverse` should not be applied in LTR if it was added for RTL flow correction. */ html[dir="ltr"] .space-x-reverse > * + * { --tw-space-x-reverse: 0; } /* Tailwind `me-*` / `ms-*` / `pe-*` / `ps-*` already use logical properties — no override needed. They work correctly in both modes. IMPORTANT: this LTR retrofit DOES change physical-utility behavior in LTR mode. Pages that intentionally used `mr-2` for visual right spacing in BOTH languages (e.g. icon-after-text patterns) will visually flip when entering LTR. That's the desired behavior 95% of the time but may require per-page touch-ups in edge cases. Phase 8 should audit those. */ /* === Phase 8 LTR retrofit additions ================================ Tailwind has many more direction-physical utilities. Add catch-alls for the most common ones not covered in Phase 7: inline styles, `mr-px`/`ml-px`, larger numbered margins, position offsets, and table-action alignment in LTR. ================================================================== */ /* Larger margins / paddings */ html[dir="ltr"] .ml-10 { margin-inline-start: 2.5rem; margin-inline-end: 0; margin-left: 0; margin-right: 2.5rem; } html[dir="ltr"] .ml-12 { margin-inline-start: 3rem; margin-inline-end: 0; margin-left: 0; margin-right: 3rem; } html[dir="ltr"] .ml-16 { margin-inline-start: 4rem; margin-inline-end: 0; margin-left: 0; margin-right: 4rem; } html[dir="ltr"] .mr-10 { margin-inline-end: 2.5rem; margin-inline-start: 0; margin-right: 0; margin-left: 2.5rem; } html[dir="ltr"] .mr-12 { margin-inline-end: 3rem; margin-inline-start: 0; margin-right: 0; margin-left: 3rem; } html[dir="ltr"] .mr-16 { margin-inline-end: 4rem; margin-inline-start: 0; margin-right: 0; margin-left: 4rem; } html[dir="ltr"] .ml-px { margin-inline-start: 1px; margin-inline-end: 0; margin-left: 0; margin-right: 1px; } html[dir="ltr"] .mr-px { margin-inline-end: 1px; margin-inline-start: 0; margin-right: 0; margin-left: 1px; } html[dir="ltr"] .ml-0\.5 { margin-inline-start: 0.125rem; margin-inline-end: 0; margin-left: 0; margin-right: 0.125rem; } html[dir="ltr"] .mr-0\.5 { margin-inline-end: 0.125rem; margin-inline-start: 0; margin-right: 0; margin-left: 0.125rem; } html[dir="ltr"] .ml-1\.5 { margin-inline-start: 0.375rem; margin-inline-end: 0; margin-left: 0; margin-right: 0.375rem; } html[dir="ltr"] .mr-1\.5 { margin-inline-end: 0.375rem; margin-inline-start: 0; margin-right: 0; margin-left: 0.375rem; } html[dir="ltr"] .ml-2\.5 { margin-inline-start: 0.625rem; margin-inline-end: 0; margin-left: 0; margin-right: 0.625rem; } html[dir="ltr"] .mr-2\.5 { margin-inline-end: 0.625rem; margin-inline-start: 0; margin-right: 0; margin-left: 0.625rem; } html[dir="ltr"] .pl-12 { padding-inline-start: 3rem; padding-inline-end: 0; padding-left: 0; padding-right: 3rem; } html[dir="ltr"] .pl-16 { padding-inline-start: 4rem; padding-inline-end: 0; padding-left: 0; padding-right: 4rem; } html[dir="ltr"] .pr-12 { padding-inline-end: 3rem; padding-inline-start: 0; padding-right: 0; padding-left: 3rem; } html[dir="ltr"] .pr-16 { padding-inline-end: 4rem; padding-inline-start: 0; padding-right: 0; padding-left: 4rem; } html[dir="ltr"] .pl-0\.5 { padding-inline-start: 0.125rem; padding-inline-end: 0; padding-left: 0; padding-right: 0.125rem; } html[dir="ltr"] .pr-0\.5 { padding-inline-end: 0.125rem; padding-inline-start: 0; padding-right: 0; padding-left: 0.125rem; } /* Position offsets — additional sizes */ html[dir="ltr"] .left-1 { inset-inline-start: 0.25rem; left: 0.25rem; right: auto; } html[dir="ltr"] .left-5 { inset-inline-start: 1.25rem; left: 1.25rem; right: auto; } html[dir="ltr"] .left-6 { inset-inline-start: 1.5rem; left: 1.5rem; right: auto; } html[dir="ltr"] .left-8 { inset-inline-start: 2rem; left: 2rem; right: auto; } html[dir="ltr"] .left-auto { inset-inline-start: auto; left: auto; right: auto; } html[dir="ltr"] .right-1 { inset-inline-end: 0.25rem; right: 0.25rem; left: auto; } html[dir="ltr"] .right-5 { inset-inline-end: 1.25rem; right: 1.25rem; left: auto; } html[dir="ltr"] .right-6 { inset-inline-end: 1.5rem; right: 1.5rem; left: auto; } html[dir="ltr"] .right-8 { inset-inline-end: 2rem; right: 2rem; left: auto; } html[dir="ltr"] .right-auto { inset-inline-end: auto; right: auto; left: auto; } /* Inline-style direction hints — common in pre-Tailwind components. We catch the most common literal `style="margin-right: X"` patterns. */ html[dir="ltr"] [style*="margin-right:"] { margin-inline-end: var(--medicore-mr-flip, inherit); } html[dir="ltr"] [style*="margin-left:"] { margin-inline-start: var(--medicore-ml-flip, inherit); } html[dir="ltr"] [style*="padding-right:"] { padding-inline-end: var(--medicore-pr-flip, inherit); } html[dir="ltr"] [style*="padding-left:"] { padding-inline-start: var(--medicore-pl-flip, inherit); } /* Table action column — usually right-aligned in Arabic, should flip in LTR */ html[dir="ltr"] td.action-col, html[dir="ltr"] th.action-col { text-align: end; } /* Modal close button — usually positioned top-right in RTL, top-end in LTR */ html[dir="ltr"] .modal-close, html[dir="ltr"] [data-modal-close] { inset-inline-end: 1rem; inset-inline-start: auto; } /* ───────────────────────────────────────────────────────────────────── Numeric digit hardening for English (LTR) mode. Tajawal (and many other Arabic-first webfonts) ship a glyph table where Latin ASCII digits 0-9 are mapped to the Arabic-Indic visual forms ٠-٩ via OpenType `numr`/`tnum`/`ss01` features. On English pages this surfaces as "2" looking like "٢" (which often renders like "ر" in some font weights). Fix: in LTR mode, force a Latin-digit-friendly font stack on every numeric input, plus `font-variant-numeric: lining-nums tabular-nums` to disable any Arabic stylistic substitution. The Latin font stack here uses system UI fonts that are guaranteed to render `0-9` in Latin glyphs across all major OSes. ────────────────────────────────────────────────────────────────── */ html[dir="ltr"] input[type="number"], html[dir="ltr"] input[type="tel"], html[dir="ltr"] input[type="date"], html[dir="ltr"] input[type="datetime-local"], html[dir="ltr"] input[type="time"], html[dir="ltr"] input[type="month"], html[dir="ltr"] input[type="week"], html[dir="ltr"] input[inputmode="numeric"], html[dir="ltr"] input[inputmode="decimal"], html[dir="ltr"] [data-money], html[dir="ltr"] .tabular-nums, html[dir="ltr"] td.tabular-nums { font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif !important; /* `font-language-override` overrides the document/element `lang` for OpenType feature selection inside the resolved font. This defeats any `locl` mapping that would otherwise display Latin "2" as the Arabic-Indic glyph "٢" when the Unicode BIDI algorithm picks up an Arabic context from sibling text. */ font-language-override: "ENG" !important; font-variant-numeric: lining-nums tabular-nums !important; font-feature-settings: "lnum" 1, "tnum" 1, "ss01" 0, "ss02" 0 !important; unicode-bidi: isolate; } /* Webkit-specific date-picker chrome: `::-webkit-datetime-edit*` style the editable parts inside ``. Force the same Latin font + lining numerals so the entered day/month/year digits stay Latin on Arabic-OS Chromiums even when the host platform locale is Arabic. */ html[dir="ltr"] input[type="date"]::-webkit-datetime-edit, html[dir="ltr"] input[type="datetime-local"]::-webkit-datetime-edit, html[dir="ltr"] input[type="time"]::-webkit-datetime-edit, html[dir="ltr"] input[type="month"]::-webkit-datetime-edit, html[dir="ltr"] input[type="week"]::-webkit-datetime-edit, html[dir="ltr"] input[type="date"]::-webkit-datetime-edit-fields-wrapper, html[dir="ltr"] input[type="date"]::-webkit-datetime-edit-text, html[dir="ltr"] input[type="date"]::-webkit-datetime-edit-day-field, html[dir="ltr"] input[type="date"]::-webkit-datetime-edit-month-field, html[dir="ltr"] input[type="date"]::-webkit-datetime-edit-year-field { font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif !important; font-language-override: "ENG" !important; font-variant-numeric: lining-nums tabular-nums !important; font-feature-settings: "lnum" 1, "tnum" 1 !important; direction: ltr !important; unicode-bidi: isolate; } /* Spinner buttons on `` — Webkit-specific. Force LTR layout so increment is on the right and digits stay Latin. */ html[dir="ltr"] input[type="number"]::-webkit-inner-spin-button, html[dir="ltr"] input[type="number"]::-webkit-outer-spin-button { direction: ltr !important; } /* Chart.js canvases — let Chart.js use its own font but force lining numerals */ html[dir="ltr"] canvas { font-variant-numeric: lining-nums tabular-nums; }