/* css/rtl.css — Arabic / right-to-left overrides (Phase 1) * ============================================================================ * EVERY rule in this file is scoped under [dir="rtl"] (set on only for * locale 'ar'). On the default LTR document NOTHING here matches, so English is * byte-identical and this stylesheet is inert. * * WHAT NEEDS FLIPPING: only PHYSICAL directional properties — left/right, * border-left/right, padding/margin-left/right, text-align:left/right — because * CSS does NOT auto-mirror those. Flexbox/grid flow, flex-start/flex-end, and * logical properties (inline-start/end, margin-inline, scroll-padding-inline) * ALREADY mirror under dir=rtl, so they are intentionally left alone here. * * Many project rules use id-selectors + !important (see project memory: style.css * `#sidebar > div` beats dashboard-v2). The overrides below add the [dir="rtl"] * attribute selector on top of the original selector chain, which raises * specificity, and re-use !important where the base rule did — so they win. * ========================================================================== */ /* ── 1. Direction basics ──────────────────────────────────────────────────── */ [dir="rtl"] body { text-align: right; } /* Text inputs read right-to-left, but keep identifiers that are inherently LTR (email, password, one-time codes) in their natural direction so they stay readable/typable. */ [dir="rtl"] textarea, [dir="rtl"] input[type="text"]:not(.mfa-code-input), [dir="rtl"] input[type="search"] { text-align: right; } [dir="rtl"] input[type="email"], [dir="rtl"] input[type="password"] { direction: ltr; text-align: left; } /* Directional glyphs (chevrons, arrows) baked into icon fonts/SVG. Add class .flip-x to any icon that must point the other way in RTL. */ [dir="rtl"] .flip-x { transform: scaleX(-1); } /* ── 2. Sidebar / dashboard-v2 left rail ──────────────────────────────────── */ /* The grid columns auto-mirror under dir=rtl (the rail moves to the right edge), so only the rail's inner divider — a physical border-right — must move to the left, i.e. the edge now facing the main column. */ [dir="rtl"] body.dashboard-v2-enabled #sidebar.dashboard-v2-left-rail { border-right-width: 0 !important; border-left-width: 1px !important; } [dir="rtl"] body.dashboard-v2-enabled.dashboard-v2-left-collapsed #sidebar.dashboard-v2-left-rail { border-left-width: 0 !important; } /* Sidebar content aligns to the right in RTL. */ [dir="rtl"] #sidebar, [dir="rtl"] #on-leave-sidebar { text-align: right; } /* Asymmetric dock gutters on the main column — swap left/right. */ [dir="rtl"] .dashboard-v2-main-column { padding-left: var(--dashboard-v2-right-dock-gutter); padding-right: var(--dashboard-v2-left-dock-gutter); } /* Fixed quick-create (compose) bar is offset by the left rail width in LTR; in RTL the rail is on the right, so offset from the right instead. */ [dir="rtl"] #tickets-footer.dashboard-v2-quick-create { left: auto !important; right: var(--dashboard-v2-quick-create-left, var(--dashboard-v2-left-width)) !important; } /* ── 3. Top header row + profile menu ─────────────────────────────────────── */ /* The account/profile dropdown is anchored to the right edge of its trigger in LTR (right:0, opens leftward). In RTL the trigger sits on the left, so anchor to the left edge and open rightward. */ [dir="rtl"] .header-account-menu-panel { right: auto; left: 0; } [dir="rtl"] .header-account-menu-item { text-align: right; } /* dashboard-v2 header "more" overflow menu — mirror its right-anchored dropdown. */ [dir="rtl"] .dashboard-v2-header-more-menu { right: auto; left: 0; } /* Ticket range / count pushed to the far end via margin-left:auto in LTR. */ [dir="rtl"] #dashboard-v2-ticket-range-wrap { margin-left: 0; margin-right: auto; } /* Header search input: icon + clear/search buttons are physically placed. Move the padding reservation and the leading magnifier to the other side. */ [dir="rtl"] #search-input { padding-right: 12px !important; padding-left: 84px !important; } /* Filter-bar search magnifier is a Tailwind `.left-3` absolute SVG — Tailwind physical utilities do not auto-flip, so mirror it explicitly. */ [dir="rtl"] #tickets-filter-bar .relative > svg.left-3 { left: auto; right: 0.75rem; } [dir="rtl"] #tickets-filter-bar #search-input.pl-10 { padding-left: 0.75rem; padding-right: 2.5rem; } /* ── 4. Mobile bottom nav ──────────────────────────────────────────────────── */ /* #mobile-bottom-nav is left:0/right:0 and its tabs are a direction-neutral flex row (flex:1 columns), so the bar itself mirrors for free. Only ensure the row lays out in the RTL reading order. */ [dir="rtl"] #mobile-bottom-nav { direction: rtl; } [dir="rtl"] .mobile-more-item, [dir="rtl"] .mobile-more-section-title, [dir="rtl"] .mobile-field-label { text-align: right; } /* ── 5. Ticket-card summary row ────────────────────────────────────────────── */ /* The priority/status accent is a 3px LEFT border with a per-variant border-left-color. Move the thick stripe to the right (leading) edge and mirror each accent colour onto border-right-color, resetting the left back to the normal 1px border. The badge/pill row itself carries no physical margins (flex gap), so it mirrors automatically. */ [dir="rtl"] body.dashboard-v2-enabled .dashboard-v2-ticket-card { border-left-width: 1px !important; border-right-width: 3px !important; } [dir="rtl"] body.dashboard-v2-enabled .dashboard-v2-ticket-card.dashboard-v2-ticket-email { border-left-color: var(--dashboard-v2-border) !important; border-right-color: rgba(34, 211, 238, 0.66) !important; } [dir="rtl"] body.dashboard-v2-enabled .dashboard-v2-ticket-card[data-dashboard-v2-priority="high"], [dir="rtl"] body.dashboard-v2-enabled .dashboard-v2-ticket-card[data-dashboard-v2-priority="urgent"], [dir="rtl"] body.dashboard-v2-enabled .dashboard-v2-ticket-card[data-dashboard-v2-priority="critical"] { border-left-color: var(--dashboard-v2-border) !important; border-right-color: rgba(248, 113, 113, 0.78) !important; } [dir="rtl"] body.dashboard-v2-enabled .ticket-super-urgent-card { border-left-color: rgba(248, 113, 113, 0.58) !important; border-right-color: rgba(248, 113, 113, 0.95) !important; } [dir="rtl"] html[data-theme="light"] body.dashboard-v2-enabled .ticket-super-urgent-card { border-left-color: rgba(220, 38, 38, 0.38) !important; border-right-color: rgba(220, 38, 38, 0.92) !important; } /* Mobile-only status accents use the `border-left` shorthand (re-setting the left width to 3px), so they must be flipped inside the same media query. */ @media (max-width: 767px) { [dir="rtl"] body.dashboard-v2-enabled .dashboard-v2-ticket-card[data-dashboard-v2-status*="progress"] { border-left: 1px solid var(--dashboard-v2-border) !important; border-right: 3px solid var(--dashboard-v2-accent) !important; } [dir="rtl"] body.dashboard-v2-enabled .dashboard-v2-ticket-card[data-dashboard-v2-status*="done"] { border-left: 1px solid var(--dashboard-v2-border) !important; border-right: 3px solid rgba(34, 197, 94, 0.85) !important; } [dir="rtl"] body.dashboard-v2-enabled .dashboard-v2-ticket-card:has(.reopen-flag) { border-left: 1px solid var(--dashboard-v2-border) !important; border-right: 3px solid rgba(249, 115, 22, 0.9) !important; } [dir="rtl"] body.dashboard-v2-enabled .dashboard-v2-ticket-card[data-super-urgent="true"] { border-left: 1px solid var(--dashboard-v2-border) !important; border-right: 3px solid rgba(239, 68, 68, 0.95) !important; } } /* Base (non-v2) .ticket-card left-edge accent stripes are pseudo-elements pinned to the left with left-rounded corners — flip them to the right. */ [dir="rtl"] .ticket-card.email-pending-claim-card::before, [dir="rtl"] .ticket-card.email-has-new-reply-card::after, [dir="rtl"] .ticket-card.email-new-reply-flag-card::after { inset: 0 0 0 auto; border-radius: 0 var(--ops-card-radius) var(--ops-card-radius) 0; } /* ── 6. Settings page ──────────────────────────────────────────────────────── */ [dir="rtl"] .settings-card, [dir="rtl"] .settings-card h2, [dir="rtl"] .settings-toggle-row { text-align: right; } /* ── 7. Admin panel shell (Phase 2b) ─────────────────────────────────────────── Unlike the main app's grid rail, the admin sidebar is position:fixed with a physical `left` + `border-right` (Tailwind + admin-shell.css), and the main column is offset with a physical margin-left. None of those auto-mirror, so re-anchor them to the right for RTL. Nav-link rows and headings already flow from the start edge (flex + default text-align), so they mirror for free. Every selector is scoped to body[data-page="admin"] so the main app is never touched. */ /* Fixed sidebar moves to the right edge; its divider border flips to the left. */ [dir="rtl"] body[data-page="admin"] #sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--admin-border); } /* Desktop: the main column is offset by the sidebar from the right instead. */ @media (min-width: 1024px) { [dir="rtl"] body[data-page="admin"] main.flex-1 { margin-left: 0 !important; margin-right: var(--admin-sidebar-width) !important; } } /* Mobile drawer slides in from the right edge (base admin-mobile.css pins it to the left with translateX(-100%); the .show state stays translateX(0)). */ @media (max-width: 1023px) { [dir="rtl"] body[data-page="admin"] #sidebar { left: auto !important; right: 0 !important; transform: translateX(100%); } }