/* =================================================================== RTL overrides — loaded only when the UI culture is Urdu (the layout adds dir="rtl" on ). Keeps the app readable right-to-left without swapping the entire Bootstrap build for its RTL variant. =================================================================== */ [dir="rtl"] body { text-align: right; } /* Urdu reads better with a slightly taller line and a Naskh-friendly stack. */ [dir="rtl"] { --bs-body-font-family: "Segoe UI", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", Tahoma, sans-serif; line-height: 1.9; } /* ---- Farmer portal: mirror the fixed sidebar to the right ---- */ [dir="rtl"] .fp-sidebar { left: auto; right: 0; } [dir="rtl"] .fp-main-wrapper { margin-left: 0; margin-right: var(--fp-sidebar-width); } [dir="rtl"] .fp-main-wrapper.collapsed { margin-left: 0; margin-right: 70px; } [dir="rtl"] .fp-sidebar-close { right: auto; left: 0.75rem; } @media (max-width: 992px) { [dir="rtl"] .fp-main-wrapper, [dir="rtl"] .fp-main-wrapper.collapsed { margin-right: 0; } /* Off-canvas sidebar slides in from the right on mobile. */ [dir="rtl"] .fp-sidebar { transform: translateX(100%); } [dir="rtl"] .fp-sidebar.show { transform: translateX(0); } } /* ---- Flip the directional spacing helpers used across the views ---- */ [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .text-start { text-align: right !important; } /* Inputs with a leading icon (login/register) keep the icon on the start side. */ [dir="rtl"] .input-icon { left: auto; right: 0.85rem; } [dir="rtl"] .form-input, [dir="rtl"] .form-select { padding: 0.7rem 2.5rem 0.7rem 0.85rem; } [dir="rtl"] .pwd-toggle { right: auto; left: 0.85rem; }