/* ========================================================================== Gymify Dashboard — LTR / English overrides -------------------------------------------------------------------------- The dashboard is authored RTL (Arabic). When the language toggle switches to English, is set by js/i18n.js and these rules mirror the app shell and swap the Arabic display font for a Latin one. Content pages remain readable; the shell (global chrome) is fully mirrored here. ========================================================================== */ /* Latin display font in English, Cairo (Arabic) otherwise. The universal `*` is needed because every page ships its own `* { font-family: Cairo }` rule that must be beaten on each element. */ html[lang="en"], html[lang="en"] * { font-family: 'Inter', 'Segoe UI', sans-serif !important; } /* IMPORTANT: the rule above out-specifies Font Awesome's own `.fas { font-family }` declarations, which would turn every into a broken glyph in English. Re-assert the icon fonts with higher specificity so glyphs render. */ html[lang="en"] .fa, html[lang="en"] .fas, html[lang="en"] .fa-solid, html[lang="en"] .far, html[lang="en"] .fa-regular, html[lang="en"] .fal, html[lang="en"] .fa-light, html[lang="en"] .fad, html[lang="en"] .fa-duotone { font-family: 'Font Awesome 6 Free' !important; } html[lang="en"] .fab, html[lang="en"] .fa-brands { font-family: 'Font Awesome 6 Brands' !important; } /* FA weight is what distinguishes solid vs regular in the free set. */ html[lang="en"] .fa, html[lang="en"] .fas, html[lang="en"] .fa-solid { font-weight: 900 !important; } html[lang="en"] .far, html[lang="en"] .fa-regular, html[lang="en"] .fab, html[lang="en"] .fa-brands { font-weight: 400 !important; } /* NOTE: the layout deliberately stays RTL in both languages (js/i18n.js does NOT flip ), so nothing on the page moves when switching language — only the text changes. Hence there are no LTR-mirroring rules here. */ /* Language toggle button (rendered by app-shell.js). */ .shell-lang-btn { background: transparent; color: var(--shell-fg); border: 1px solid rgba(255, 255, 255, 0.18); min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; } .shell-lang-btn:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="light"] .shell-lang-btn { color: #15233A; border-color: rgba(0, 0, 0, 0.15); } [data-theme="light"] .shell-lang-btn:hover { background: rgba(0, 0, 0, 0.06); }