/* css/rtl.css — Arabic (RTL) layout overrides. Loaded on every page; rules only apply when (AR active). Kept targeted: Tailwind's flexbox flips automatically under dir=rtl; here we fix the text-align / margin / padding / absolute-position edge cases. */ html[dir="rtl"] body { text-align: right; } /* ---- generic text alignment corrections ---- */ html[dir="rtl"] .text-left { text-align: right; } html[dir="rtl"] .text-right { text-align: left; } html[dir="rtl"] .metric-body, html[dir="rtl"] .metric-body span { text-align: right; } html[dir="rtl"] .kpi-value { text-align: center; } /* ---- dashboard section sidebar (supabase_data injectSectionNav) ---- */ html[dir="rtl"] .section-nav { right: auto; left: 0; } html[dir="rtl"] .section-nav .section-nav-toggle .toggle-chevron { transform: scaleX(-1); } /* ---- metric cards & chevrons (Event_Dashboard) ---- */ html[dir="rtl"] .metric { flex-direction: row-reverse; } html[dir="rtl"] .metric-chevron { transform: scaleX(-1); } html[dir="rtl"] .metric-icon { margin-right: 0; margin-left: 0.75rem; } /* ---- toolbar & search (Event_Dashboard) ---- */ html[dir="rtl"] .toolbar-search-icon { left: auto; right: 0.75rem; } html[dir="rtl"] .toolbar-search-clear { right: auto; left: 0.5rem; } html[dir="rtl"] .calendar-search-clear { right: auto; left: 0.5rem; } html[dir="rtl"] .toolbar input[type="text"] { padding-left: 2rem; padding-right: 2.25rem; } /* ---- filter panel (aside) in RTL lands on the right via flex auto-flip, but ensure inner padding mirrors ---- */ html[dir="rtl"] .filter-panel-header, html[dir="rtl"] .filter-group-title, html[dir="rtl"] .results-header { text-align: right; } /* ---- center dashboards: card headers & formula boxes ---- */ html[dir="rtl"] .formula-btn { text-align: right; } html[dir="rtl"] .formula-box li { text-align: right; } /* ---- portal header nav ---- */ html[dir="rtl"] .portal-nav-tab { direction: rtl; } /* ---- tables ---- */ html[dir="rtl"] table th, html[dir="rtl"] table td { text-align: right; } html[dir="rtl"] table th.text-center, html[dir="rtl"] table td.text-center { text-align: center; } /* ---- modal ---- */ html[dir="rtl"] .modal-dialog, html[dir="rtl"] .dialog { direction: rtl; text-align: right; } /* Details-modal fact cards: keep the icon/text row LTR-safe and stop the right-aligned Arabic label/value from being clipped by the grid cell. */ html[dir="rtl"] .m-fact { text-align: right; } html[dir="rtl"] .m-fact-body { align-items: flex-end; } /* ---- calendar ---- */ html[dir="rtl"] .cal-grid { direction: ltr; } /* calendar day grids stay LTR */ html[dir="rtl"] .cal-head { text-align: right; } html[dir="rtl"] .cal-head .actions { margin-left: 0; margin-right: auto; } html[dir="rtl"] .dialog-head { text-align: right; } /* ---- index page (masjid cards, all-centers overview, search) ---- */ html[dir="rtl"] #masjidSearch { padding-right: 2.5rem; padding-left: 0.75rem; } html[dir="rtl"] #masjidSearchIcon { left: auto; right: 0.75rem; } html[dir="rtl"] #searchClear { right: auto; left: 0.75rem; } html[dir="rtl"] .metric-mini-card .metric-label, html[dir="rtl"] .metric-mini-card .metric-value { text-align: center; } html[dir="rtl"] .masjid-card-links a .fas { margin-right: 0; margin-left: 0.5rem; } html[dir="rtl"] .all-centers-overview .card-header { text-align: right; } /* card header: location line indents from the right to stay under the title text */ html[dir="rtl"] .masjid-card .masjid-card-location { padding-left: 0; padding-right: 3.5rem; } /* metric tooltips: align Arabic text to the right */ html[dir="rtl"] .metric-tooltip { text-align: right; } /* ---- scroll-to-top button ---- */ html[dir="rtl"] #scrollTopBtn { right: auto; left: 2rem; }