/* ===================================================================== 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 !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; } /* --------------------------------------------------------------------- 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; } /* --------------------------------------------------------------------- 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; 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; } /* --------------------------------------------------------------------- 10. No unwanted page-level horizontal scrollbar in RTL. --------------------------------------------------------------------- Symptom (welcome/dashboard in Arabic): the page grew a bottom horizontal scrollbar with empty space on the start edge. Cause: an inner widget on the content column was a touch wider than the available width, pushing the whole document past the viewport. Fix at the right layer: the shell content COLUMN contains its own horizontal overflow. Genuinely wide widgets (data tables) keep their own inner `overflow-x:auto` scrollers, so nothing becomes unreachable. `overflow-x: clip` (not `hidden`) is deliberate: `hidden` forces the cross-axis to compute to `auto`, which would turn the column into a vertical scroll container and break the sticky topbar. `clip` contains the overflow without establishing a scroll container. --------------------------------------------------------------------- */ /* Keep the shell column + content shrinkable so flex/grid/table children can never blow out the layout width. min-width:0 is the key — without it a wide grid/table forces the whole document past the viewport. */ .pms-shell-main { min-width: 0; } html[dir="rtl"] .pms-shell-main > .content, html[dir="rtl"] .pms-shell-main > main.content, body.is-rtl .pms-shell-main > .content, body.is-rtl .pms-shell-main > main.content { min-width: 0; max-width: 100%; } /* --------------------------------------------------------------------- 10b. Hard width contract for the desktop shell in RTL. --------------------------------------------------------------------- Root cause of the lingering horizontal scrollbar: the content column was claiming more than (100% − sidebar) so the fixed 280px sidebar was pushed past the start (right) edge, producing a page scrollbar. We pin the three pieces explicitly so the math can never overflow: layout = exactly the viewport, stray overflow clipped sidebar = a non-growing, non-shrinking 280px track content = at most (100% − 280px) Desktop only (≥769px); the ≤768px rules in pms-chrome.css turn the sidebar into a fixed off-canvas drawer where these constraints must not apply. */ @media (min-width: 769px) { /* Final guarantee: no page-level horizontal scrollbar in RTL desktop. The real layout fits in 100% (constraints below), so clipping at the root only removes stray sub-pixel / 100vw / box-shadow overflow — never real content. `clip` keeps vertical scrolling and sticky intact. */ html[dir="rtl"], body.is-rtl { overflow-x: clip; max-width: 100%; } html[dir="rtl"] body .layout, body.is-rtl .layout { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100%; max-width: 100%; overflow-x: clip; /* clip (not hidden) keeps vertical flow + sticky intact */ } html[dir="rtl"] body .layout > .pms-sidebar, html[dir="rtl"] body .layout > .sidebar, body.is-rtl .layout > .pms-sidebar, body.is-rtl .layout > .sidebar { flex: 0 0 280px !important; width: 280px !important; max-width: 280px !important; } html[dir="rtl"] body .layout > .pms-shell-main, body.is-rtl .layout > .pms-shell-main { flex: 1 1 0 !important; min-width: 0 !important; max-width: calc(100% - 280px) !important; } } /* Wide tables scroll INSIDE their card — never the whole page, and no column is ever hidden. A .pms-card that directly holds a table becomes the horizontal scroll container. Applies in both directions because it is universally correct. */ .pms-card:has(> table), .pms-card:has(> .pms-table), .pms-card:has(> .pms-table-wrap), .pms-card:has(> .table-responsive) { overflow-x: auto; } /* Welcome KPI grid: size columns to the CONTAINER (not the viewport) so it can never overflow a narrow content column and trigger a page scrollbar. */ .welcome-redesign-v1 .pms-stat-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; } /* i18n cache-bust 4937657 — force refetch of RTL flip rules */