/* * rtl.css — Right-to-left (Hebrew) layout overrides for the SiteChat dashboard. * * Loaded AFTER styles.css so these rules win when the document is in RTL mode * (). Everything here is scoped under [dir="rtl"] so the default * LTR/English experience is completely untouched. * * Phase 1a: this file establishes the mechanism plus baseline document/typography * flipping. Per-screen layout overrides (margins, paddings, flex-direction, icon * positions, text-align) are added incrementally in Phase 1b as each screen is * converted and visually verified. */ /* Baseline: mirror the whole document and default text alignment. */ [dir="rtl"] body { direction: rtl; text-align: right; } /* The language switcher itself reads naturally in either direction; no mirroring needed, but keep option order stable regardless of document direction. */ [dir="rtl"] .lang-switcher { direction: ltr; /* keep עברית | English in a fixed visual order */ } /* ------------------------------------------------------------------------- * Phase 1b per-screen RTL overrides, grouped by screen. * ---------------------------------------------------------------------- */ /* --- Sidebar / nav (Screen 1) --- * The sidebar is position:fixed on the left, so it does not auto-mirror with * direction:rtl — move it to the right and flip its border side. The main * content margin (which clears the fixed sidebar) is mirrored per breakpoint. */ [dir="rtl"] .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--gray-200); } /* Directional chevrons (sidebar collapse, mobile back) point the other way. */ [dir="rtl"] .sidebar-toggle svg, [dir="rtl"] .mobile-back-btn svg { transform: scaleX(-1); } /* User name/role are DATA (could be Latin or Hebrew). unicode-bidi:plaintext makes each resolve its own direction from its first strong character, so a Latin name ("Administrator") reads LTR and truncates with the ellipsis at the END ("Administ…") instead of clipping the start ("…strator") in the RTL sidebar. */ [dir="rtl"] .user-name, [dir="rtl"] .user-role { unicode-bidi: plaintext; text-align: right; } /* Desktop: content sits to the LEFT of the right-hand sidebar. */ @media (min-width: 769px) { [dir="rtl"] .main { margin-left: 0; margin-right: 220px; } [dir="rtl"] body.sidebar-collapsed .main { margin-left: 0; margin-right: 72px; } } /* Mobile: off-canvas sidebar slides in from the right instead of the left. */ @media (max-width: 768px) { [dir="rtl"] .sidebar { transform: translateX(100%); } [dir="rtl"] body.sidebar-mobile-open .sidebar { transform: translateX(0); } [dir="rtl"] .main { margin-right: 0; } } /* --- Conversations + Analytics (Batch A) --- * The master/detail and card grids mirror automatically via direction:rtl. * Only directional chevron glyphs need flipping. */ [dir="rtl"] .conversations-pagination .pagination-btn svg, [dir="rtl"] .conv-item-arrow { transform: scaleX(-1); } /* --- Appearance / Embed tabs (Batch B) --- * Embed code and SRI hash are code — keep them LTR/left-aligned even in RTL. */ [dir="rtl"] .embed-code-preview, [dir="rtl"] #detail-embed-code, [dir="rtl"] .code-block pre, [dir="rtl"] #security-sri-hash { direction: ltr; text-align: left; } /* --- Site-detail settings nav (RTL): center group labels + tab items, and * move the active-tab indicator bar to the right edge (it is inset-left in LTR). */ [dir="rtl"] .detail-nav-group-label { text-align: center; } [dir="rtl"] .detail-settings-nav .detail-nav-item.detail-tab { text-align: center; justify-content: center; } [dir="rtl"] .detail-settings-nav .detail-nav-item.detail-tab.active { box-shadow: inset -3px 0 0 var(--primary); } /* --- Sites overview + site detail (Screen 2) --- * The master/detail flex row and stat/header flex rows mirror automatically via * direction:rtl. Only the breadcrumb separator glyph (›) needs flipping so the * trail reads right-to-left. */ [dir="rtl"] .detail-breadcrumb-sep { display: inline-block; transform: scaleX(-1); }