/* * globals-rtl.css — Deep i18n Wave 1 (2026-06-08). * * Layer-1 RTL structural overrides. Scoped entirely under [dir="rtl"], so it * is a NO-OP for LTR pages even if accidentally loaded (zero visual effect * without dir="rtl" on an ancestor). It is, however, imported conditionally * by layout.tsx ONLY when the active chrome locale is RTL, so LTR pages never * download or parse it. * * Scope (Wave 1 surfaces only): admin sidebar + topbar, dropdowns/popovers, * breadcrumbs, signup card, onboarding wizard. The systematic physical→logical * (ml/mr → ms/me) migration across all 367 admin files + 30 themes is Wave 2 — * this file is the minimal-churn bridge that makes the Wave 1 demo path render * correctly in Arabic. * * Many components already use logical Tailwind utilities (ms-*, me-*, text-start) * which flip natively under dir="rtl"; this file only patches the elements that * still rely on PHYSICAL positioning (fixed left/right, translate-x) which CSS * direction does NOT auto-flip. * * Target size: < 3 KB gzipped. */ /* ── Arabic body font — Noto Sans Arabic ahead of Latin fallback ───────────── */ /* The root layout injects --font-arabic via the next/font .variable class on * (or ), but that only DEFINES the CSS variable — it does NOT * override font-family. Here we compose it as the FIRST family in the RTL * body font stack so Arabic glyphs render via Noto Sans Arabic, not the * system default (which can be tofu on Linux/Railway). Latin characters * within an Arabic page fall through to --font-sans (Inter) as before. * Noto Sans Arabic loaded with display:swap so the body text becomes * visible immediately via system Arabic font, swaps when Noto loads. */ [dir="rtl"] body { font-family: var(--font-arabic), var(--font-sans), system-ui, sans-serif; } /* ── Admin sidebar — fixed to the inline-start edge ───────────────────────── */ /* The sidebar is `fixed left-0` and the main content uses `lg:ml-64`. Under * RTL the sidebar must pin to the right and the content margin must flip. */ [dir="rtl"] aside#admin-sidebar-panel { left: auto; right: 0; border-right: none; border-left: 1px solid var(--sidebar-border, var(--border)); } /* Desktop RTL: the sidebar inherits lg:translate-x-0 (correct) but our * mobile-closed class `-translate-x-full` adds translateX(-256px) and the * Tailwind specificity race can win. Force zero transform at desktop so the * sidebar is always visible and flush to the right edge. */ @media (min-width: 1024px) { [dir="rtl"] aside#admin-sidebar-panel { transform: translateX(0) !important; } } /* Off-canvas mobile drawer transform — flip the hidden direction. * In LTR, hidden = translateX(-100%) (slides off-screen to the left). * In RTL, hidden = translateX(+100%) (slides off-screen to the RIGHT). */ [dir="rtl"] aside#admin-sidebar-panel.-translate-x-full, [dir="rtl"] aside#admin-sidebar-panel.\-translate-x-full { transform: translateX(100%); } /* Mobile hamburger button — fixed top-3 left-3 → top-3 right-3 in RTL. */ [dir="rtl"] aside#admin-sidebar-panel ~ button[aria-label="Open admin menu"], [dir="rtl"] button[aria-label="Open admin menu"] { left: auto; right: 0.75rem; } /* ── Admin main content + topbar — flip the sidebar-offset margin ─────────── */ [dir="rtl"] main.lg\:ml-64 { margin-left: 0; } @media (min-width: 1024px) { [dir="rtl"] main.lg\:ml-64 { margin-right: 16rem; /* matches w-64 sidebar */ } } /* Topbar is `fixed left-0 lg:left-64 right-0` — flip the inset. */ [dir="rtl"] header[aria-label="Admin top bar"] { left: 0; right: 0; } @media (min-width: 1024px) { [dir="rtl"] header[aria-label="Admin top bar"] { left: 0; right: 16rem; } } /* Past-due / trial banners share the same fixed-inset pattern as the topbar. */ [dir="rtl"] [role="alert"].lg\:left-64 { left: 0; } @media (min-width: 1024px) { [dir="rtl"] [role="alert"].lg\:left-64 { left: 0; right: 16rem; } } /* Skip-to-content link is fixed to the inline-start corner. */ [dir="rtl"] a[href="#admin-main-content"]:focus { left: auto; right: 0.5rem; } /* ── Dropdowns / popovers / listboxes — anchor to inline edges ────────────── */ /* Absolutely-positioned menus using left-0/right-0 anchoring don't auto-flip. * Swap them so the menu opens from the correct inline edge. */ [dir="rtl"] [role="listbox"].left-0, [dir="rtl"] [role="menu"].left-0 { left: auto; right: 0; } [dir="rtl"] [role="listbox"].right-0, [dir="rtl"] [role="menu"].right-0 { right: auto; left: 0; } /* ms-auto pushes a trailing badge to the inline-end — already logical, but * ensure right-aligned helper text in RTL reads from the right. */ [dir="rtl"] [role="option"], [dir="rtl"] [role="menuitem"] { text-align: right; } /* ── Breadcrumbs — flip chevron separators ────────────────────────────────── */ /* Chevron / slash separators that point right (→) should point left in RTL. * The breadcrumb wraps separators in [aria-hidden] svg/spans. */ [dir="rtl"] nav[aria-label="Breadcrumb"] svg, [dir="rtl"] [data-breadcrumb-separator] { transform: scaleX(-1); } /* ── Login form — password show/hide button position flip ─────────────────── */ /* The Eye toggle is positioned `absolute right-2`. In RTL this should be at * the start edge (visually left) so it doesn't overlap the Arabic password * placeholder that reads right-to-left. */ [dir="rtl"] .login-password-toggle { right: auto; left: 0.5rem; } /* Password + forgot-password row: the `flex justify-between` row reads * label | link in LTR. In RTL flex already places items from the inline-start * (right) edge, so no reversal needed — justify-between keeps them correctly * at the two extremes. However ensure the flex-wrap doesn't collapse the row * unexpectedly in very narrow RTL containers. */ /* ── Signup card + onboarding wizard ──────────────────────────────────────── */ /* The signup background grid and card are symmetric; the only physical concern * is text alignment of helper copy. Force form labels + helper text to the * inline-start edge (which is the right in RTL). */ [dir="rtl"] form label, [dir="rtl"] form .form-helper { text-align: right; } /* Inputs should display their own RTL text correctly; placeholders too. */ [dir="rtl"] input, [dir="rtl"] textarea { text-align: right; } /* Keep email / URL / password inputs LTR (Latin) even inside RTL context — * an email address reads left-to-right regardless of UI direction. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="password"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[inputmode="numeric"] { text-align: left; direction: ltr; } /* Onboarding step indicator: native flex reversal handles the order; ensure * any connector lines drawn with left/right margins use logical spacing. */ [dir="rtl"] [data-onboarding-steps] { flex-direction: row-reverse; } /* ── Signup promo-code disclosure chevron — mirror in RTL ─────────────────── */ /* The

promo-toggle uses a ChevronRight icon (pointing →). * In LTR the chevron points right (→ = "expand"), rotates 90° when open. * In RTL the inline-end direction is LEFT, so the default closed state should * point ← (mirrored). We apply scaleX(-1) on the RTL summary chevron to flip * it; the [[open]_&]:rotate-90 class in the JSX still works on top of the flip. */ [dir="rtl"] details > summary svg { transform: scaleX(-1); } [dir="rtl"] details[open] > summary svg { /* open+RTL: flip AND rotate so the icon points downward (same as LTR open) */ transform: scaleX(-1) rotate(90deg); } /* ── Generic affordances ──────────────────────────────────────────────────── */ /* Arrow glyphs in CTA links ("Upgrade plan →") read inward in RTL. */ [dir="rtl"] [data-rtl-flip-arrow] { display: inline-block; transform: scaleX(-1); }