/* =================================================== Twenty CRM - RTL Overrides Applied automatically when [dir="rtl"] on =================================================== */ /* ---- Base RTL ---- */ [dir="rtl"] body { font-family: 'Cairo', Inter, sans-serif !important; direction: rtl; } [dir="rtl"] #root { direction: rtl; } /* ---- Mirror margins using CSS logical properties approach ---- */ [dir="rtl"] [style*="margin-left"] { margin-left: unset !important; margin-right: auto !important; } [dir="rtl"] [style*="margin-right: auto"], [dir="rtl"] [style*="marginRight: auto"] { margin-right: unset !important; margin-left: auto !important; } [dir="rtl"] [style*="left:"] { right: attr(style left) !important; left: unset !important; } [dir="rtl"] [style*="right:"] { left: attr(style right) !important; right: unset !important; } /* ---- All flex containers that need row-reverse ---- */ [dir="rtl"] div[style*="display: flex"][style*="flex-direction: row"], [dir="rtl"] div[style*="display:flex"][style*="flex-direction:row"] { flex-direction: row-reverse !important; } [dir="rtl"] div[style*="display: -webkit-box"][style*="display: -webkit-flex"] { flex-direction: row-reverse !important; } /* ---- Text alignment ---- */ [dir="rtl"] * { text-align: start !important; } [dir="rtl"] th, [dir="rtl"] td { text-align: right !important; } [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right !important; direction: rtl !important; } /* ---- Input icon positions ---- */ [dir="rtl"] [style*="padding-left:"] { padding-left: unset !important; padding-right: var(--padding-left) !important; } /* ---- Search inputs ---- */ [dir="rtl"] input[type="search"], [dir="rtl"] input[placeholder*="بحث"], [dir="rtl"] input[placeholder*="ابحث"], [dir="rtl"] input[placeholder*="Search"] { background-position: right center !important; padding-left: 12px !important; padding-right: 36px !important; } /* ---- All icons and chevrons ---- */ [dir="rtl"] svg { transform: scaleX(-1); } /* But don't flip logos and avatars */ [dir="rtl"] img, [dir="rtl"] [role="img"] img, [dir="rtl"] [class*="avatar"] svg, [dir="rtl"] [class*="Avatar"] svg { transform: none !important; } /* ---- Tables ---- */ [dir="rtl"] table, [dir="rtl"] [role="table"], [dir="rtl"] [role="grid"] { direction: rtl; } [dir="rtl"] [role="columnheader"] { text-align: right !important; } /* ---- Sidebar (first column) ---- */ [dir="rtl"] [style*="flex-shrink: 0"] { order: 1 !important; } /* ---- Button groups / Dialog actions ---- */ [dir="rtl"] [style*="justify-content: flex-end"], [dir="rtl"] [style*="justifyContent: flex-end"] { justify-content: flex-start !important; } [dir="rtl"] [style*="justify-content: flex-start"], [dir="rtl"] [style*="justifyContent: flex-start"] { justify-content: flex-end !important; } /* ---- Border radius mirroring ---- */ [dir="rtl"] [style*="border-radius"] { border-radius: inherit; } /* ---- Position absolute/relative elements ---- */ [dir="rtl"] [style*="position: absolute"][style*="right:"] { right: auto !important; left: var(--right) !important; } [dir="rtl"] [style*="position: absolute"][style*="left:"] { left: auto !important; right: var(--left) !important; } /* ---- Dropdowns / Modals positioning ---- */ [dir="rtl"] [role="dialog"], [dir="rtl"] [role="menu"] { direction: rtl; } /* ---- Snackbar / Toast ---- */ [dir="rtl"] [role="alert"] { right: auto !important; left: 16px !important; } /* ---- Fix scrollbar positions ---- */ [dir="rtl"] .scroll-wrapper-x-enabled { direction: rtl; } [dir="rtl"] ::-webkit-scrollbar { /* Don't flip scrollbars */ }