/* ============================================================================ Chamanke Workspace — Right-to-left (Arabic) layout ---------------------------------------------------------------------------- lang.js sets dir="rtl" on for Arabic. Native RTL handles most things (text direction, table column order, list markers). This sheet covers what the layout hard-codes to one side — chiefly the fixed sidebar + its margin — plus the Arabic font. It's a first pass and will be refined as each module is translated. ============================================================================ */ /* ---- Arabic font ---------------------------------------------------------- */ html[dir="rtl"] body, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea { font-family: 'Cairo', var(--font-sans, 'Inter'), system-ui, sans-serif; } /* ---- Layout: the sidebar is position:fixed; left:0 with a left margin on the main content — neither flips automatically, so mirror them here. ---------- */ html[dir="rtl"] .sidebar { left: auto; right: 0; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); } html[dir="rtl"] .main-content { margin-left: 0; margin-right: var(--sidebar-width); } /* ---- Mobile off-canvas drawer (RTL) ---------------------------------------- On phones (<=768px) the sidebar is a slide-in drawer. The base mobile rules (styles2.css) hide it with translateX(-100%) and clear only margin-LEFT — both correct for LTR only. In RTL the sidebar is anchored right:0, so the CLOSED drawer must hide to the RIGHT (+100%) and the content must drop its right margin; otherwise the drawer sits on top of the content (logo clipped off the left edge) and the page is unusable. The OPEN rule carries an extra class so it outranks the closed-state rule above it in specificity. NOTE: these must stay inside the media query — desktop RTL keeps the sidebar fixed and visible with no transform. */ @media (max-width: 768px) { html[dir="rtl"] .sidebar { transform: translateX(100%); } html[dir="rtl"] .sidebar.open { transform: translateX(0); } html[dir="rtl"] .main-content { margin-right: 0; } } /* ---- Text alignment ------------------------------------------------------- */ html[dir="rtl"] .input-field, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea { text-align: right; } /* Keep ids / codes / monospace and numeric runs left-to-right for legibility. */ html[dir="rtl"] .text-mono, html[dir="rtl"] .auth-mono, html[dir="rtl"] code, html[dir="rtl"] .mono { direction: ltr; unicode-bidi: plaintext; text-align: right; } /* The user menu chip is pinned bottom-left; mirror it to bottom-right. */ html[dir="rtl"] .auth-chip { left: auto; right: 14px; }