/* ===================================================================== PMS Direction Layer — pms-rtl.css --------------------------------------------------------------------- Single source of truth for language-aware layout direction in PMS. Goal: when is set, the sidebar MUST sit on the right and the content area MUST flow from right to left, without distorting cards, tables, dashboards or forms. Loaded LAST in includes/header.php so this layer wins the cascade. ===================================================================== */ /* --------------------------------------------------------------------- 1. Layout containers — flip sidebar/content order via flex-direction. --------------------------------------------------------------------- Both PMS chrome variants are covered: - .layout (legacy chrome — includes/header.php) - .app-shell (backend chrome — php-backend/.../_layout.php) - .pms-layout (modern chrome alias) `display: flex` is enforced here so it cannot be downgraded to grid by stale legacy rules (assets/app.css still ships a .layout {display:grid} declaration which can win if cache-busting fails for it). --------------------------------------------------------------------- */ html[dir="ltr"] .layout, html[dir="ltr"] .app-shell, html[dir="ltr"] .pms-layout, body.is-ltr .layout, body.is-ltr .app-shell, body.is-ltr .pms-layout { display: flex !important; flex-direction: row !important; } html[dir="rtl"] .layout, html[dir="rtl"] .app-shell, html[dir="rtl"] .pms-layout, body.is-rtl .layout, body.is-rtl .app-shell, body.is-rtl .pms-layout { display: flex !important; flex-direction: row-reverse !important; } /* --------------------------------------------------------------------- 2. Sidebar — flip the divider border to the correct edge. --------------------------------------------------------------------- Using logical (-inline-) properties so the same rule works in both directions. The base layer in pms-design-system.css uses physical `border-right`; we neutralise that here. --------------------------------------------------------------------- */ .pms-sidebar, .sidebar { border-inline-end: 1px solid var(--color-sidebar-divider, rgba(255,255,255,0.08)); } html[dir="rtl"] .pms-sidebar, html[dir="rtl"] .sidebar, body.is-rtl .pms-sidebar, body.is-rtl .sidebar { border-right: 0 !important; border-left: 1px solid var(--color-sidebar-divider, rgba(255,255,255,0.08)) !important; } /* --------------------------------------------------------------------- 3. Sidebar inner alignment in RTL. --------------------------------------------------------------------- */ html[dir="rtl"] .pms-sb-nav, html[dir="rtl"] .pms-sidebar__group, html[dir="rtl"] .pms-sidebar__item, html[dir="rtl"] .pms-sb-item, body.is-rtl .pms-sb-nav, body.is-rtl .pms-sidebar__group, body.is-rtl .pms-sidebar__item, body.is-rtl .pms-sb-item { direction: rtl; text-align: right; } html[dir="rtl"] .pms-sb-brand-row, body.is-rtl .pms-sb-brand-row { flex-direction: row-reverse; } /* --------------------------------------------------------------------- 4. Topbar — keep brand+breadcrumb on the start edge, actions on end. --------------------------------------------------------------------- */ html[dir="rtl"] .pms-topbar, html[dir="rtl"] .pms-topbar-strip, html[dir="rtl"] .pms-topbar-actions, html[dir="rtl"] .pms-topbar-bc, body.is-rtl .pms-topbar, body.is-rtl .pms-topbar-strip, body.is-rtl .pms-topbar-actions, body.is-rtl .pms-topbar-bc { flex-direction: row-reverse; } /* --------------------------------------------------------------------- 5. Tables — labels right-aligned, numeric columns stay LTR for clarity. --------------------------------------------------------------------- */ html[dir="rtl"] .pms-table th, html[dir="rtl"] .pms-table td, html[dir="rtl"] table th, html[dir="rtl"] table td, body.is-rtl .pms-table th, body.is-rtl .pms-table td, body.is-rtl table th, body.is-rtl table td { text-align: right; } html[dir="rtl"] .pms-table .num, html[dir="rtl"] table .num, body.is-rtl .pms-table .num, body.is-rtl table .num { text-align: left; direction: ltr; } /* --------------------------------------------------------------------- 6. Page-level chrome (cards, alerts, breadcrumbs) — mirror flex rows only; never alter padding/margin so card layouts are not distorted. --------------------------------------------------------------------- */ html[dir="rtl"] .pms-card, body.is-rtl .pms-card { direction: rtl; } html[dir="rtl"] .pms-page-header, html[dir="rtl"] .pms-page-actions, html[dir="rtl"] .pms-breadcrumb, html[dir="rtl"] .pms-alert, body.is-rtl .pms-page-header, body.is-rtl .pms-page-actions, body.is-rtl .pms-breadcrumb, body.is-rtl .pms-alert { flex-direction: row-reverse; text-align: right; } /* --------------------------------------------------------------------- 7. Form inputs — numeric/date/email fields stay LTR for readability. --------------------------------------------------------------------- */ html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, body.is-rtl input, body.is-rtl select, body.is-rtl textarea { text-align: right; direction: rtl; } html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="datetime-local"], html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], body.is-rtl input[type="date"], body.is-rtl input[type="datetime-local"], body.is-rtl input[type="number"], body.is-rtl input[type="email"], body.is-rtl input[type="tel"] { direction: ltr; text-align: right; } /* --------------------------------------------------------------------- 8. Carets / chevrons — flip so they point to the start edge in RTL. --------------------------------------------------------------------- */ html[dir="rtl"] .pms-caret, html[dir="rtl"] .pms-sidebar__group-caret, html[dir="rtl"] .pms-sb-group-caret, body.is-rtl .pms-caret, body.is-rtl .pms-sidebar__group-caret, body.is-rtl .pms-sb-group-caret { transform: scaleX(-1); } /* --------------------------------------------------------------------- 9. Arabic typography — load Cairo/Tajawal anywhere we render RTL. --------------------------------------------------------------------- */ html[dir="rtl"] body, html[dir="rtl"] .pms-sidebar, html[dir="rtl"] .pms-topbar, html[dir="rtl"] .content, body.is-rtl, body.is-rtl .pms-sidebar, body.is-rtl .pms-topbar, body.is-rtl .content { font-family: 'Cairo','Tajawal','Segoe UI',sans-serif; }