/* ═══════════════════════════════════════════════════════════════════ COREVA QUEUE — RTL Layout Overrides Selector: [dir="rtl"] on element (set by LocalizationService via topbar.php JavaScript — runs before first paint). The Coreva Queue shell already uses CSS Logical Properties: inset-inline-start, margin-inline-start, border-inline-start, etc. These flip automatically when dir="rtl" is on the root element. This file handles cases where logical properties are not yet used, adds the Arabic typeface, and adjusts icon/dropdown orientations. ═══════════════════════════════════════════════════════════════════ */ /* ── Arabic typeface ──────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap'); [dir="rtl"] body, [dir="rtl"] .cq-shell { font-family: 'Cairo', 'Inter', sans-serif; direction: rtl; text-align: right; } /* ── Base direction ─────────────────────────────────────────────── */ [dir="rtl"] { direction: rtl; text-align: right; } /* ── Sidebar nav ────────────────────────────────────────────────── */ /* Sidebar active indicator bar: flip from inline-start to inline-end */ [dir="rtl"] .cq-sidebar__item.is-active, [dir="rtl"] .cq-sidebar__item[aria-current="page"] { border-inline-start: none; border-inline-end: 3px solid var(--cq-accent); } /* Icon spacing inside sidebar items — flip margin */ [dir="rtl"] .cq-sidebar__item-icon, [dir="rtl"] .cq-sidebar__icon { margin-inline-end: 0.6rem; margin-inline-start: 0; } /* External link icon in sidebar — flip position */ [dir="rtl"] .cq-sidebar__item-external-icon { margin-inline-start: auto; margin-inline-end: 0; } /* Brand wordmark spacing */ [dir="rtl"] .cq-sidebar__wordmark { margin-inline-start: 0.6rem; margin-inline-end: 0; } /* ── Topbar ─────────────────────────────────────────────────────── */ /* Breadcrumb chevrons: flip direction of SVG arrows */ [dir="rtl"] .cq-topbar__sep { transform: scaleX(-1); } /* Tenant icon spacing */ [dir="rtl"] .cq-topbar__tenant-icon { margin-inline-end: 0.35rem; margin-inline-start: 0; } /* ── Dropdown menus ─────────────────────────────────────────────── */ /* Bootstrap's dropdown-menu-end anchors to the right edge — flip to left */ [dir="rtl"] .dropdown-menu.dropdown-menu-end, [dir="rtl"] .cq-dropdown { left: 0; right: auto; text-align: right; } [dir="rtl"] .cq-dropdown__item { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .cq-dropdown__item svg, [dir="rtl"] .cq-dropdown__item i { margin-inline-start: 0.5rem; margin-inline-end: 0; } /* ── Bootstrap spacing utilities — RTL overrides ───────────────── */ /* These override Bootstrap's physical margin utilities with RTL equivalents */ [dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; } [dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; } [dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } [dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } [dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; } [dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; } /* Text alignment utilities */ [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } /* Float utilities */ [dir="rtl"] .float-end { float: left !important; } [dir="rtl"] .float-start { float: right !important; } /* ── Tables ─────────────────────────────────────────────────────── */ [dir="rtl"] th, [dir="rtl"] td { text-align: right; } [dir="rtl"] .cq-table th, [dir="rtl"] .cq-table td { text-align: right; } /* ── Forms ──────────────────────────────────────────────────────── */ [dir="rtl"] .form-check { padding-right: 1.5em; padding-left: 0; } [dir="rtl"] .form-check .form-check-input { float: right; margin-right: -1.5em; margin-left: 0; } [dir="rtl"] .input-group > .form-control:not(:last-child), [dir="rtl"] .input-group > .form-select:not(:last-child) { border-radius: 0 var(--cq-radius) var(--cq-radius) 0; } [dir="rtl"] .input-group > .input-group-text:first-child { border-radius: 0 var(--cq-radius) var(--cq-radius) 0; } [dir="rtl"] .input-group > .input-group-text:last-child { border-radius: var(--cq-radius) 0 0 var(--cq-radius); } /* ── Modal ──────────────────────────────────────────────────────── */ [dir="rtl"] .modal-header .btn-close { margin: -0.5rem auto -0.5rem -0.5rem; } /* ── Navbar ─────────────────────────────────────────────────────── */ [dir="rtl"] .navbar-nav { padding-right: 0; } /* ── KPI cards ──────────────────────────────────────────────────── */ /* The KPI border uses border-inline-start which already flips. Only override if a component hardcodes physical properties. */ [dir="rtl"] .cq-kpi__label, [dir="rtl"] .cq-kpi__value { text-align: right; } /* ── Page header badge ──────────────────────────────────────────── */ [dir="rtl"] .cq-page-header__badge { margin-left: 0; margin-right: 8px; } /* ── Language switcher ──────────────────────────────────────────── */ [dir="rtl"] .cq-lang-switcher { direction: ltr; /* Keep EN|AR always LTR for legibility */ }