/* * RTL / Arabic adjustments. Loaded on every page; only takes effect when * is set by i18n.js. Flexbox/grid mirror automatically — * these rules fix the things that are pinned to a physical side. */ /* Shared language-switch button (used in every page header) */ .lang-toggle { padding: 0.5rem 0.75rem; border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 0.5rem); background: var(--card, #fff); color: var(--card-foreground, #0a0a0a); cursor: pointer; font-size: 0.8rem; font-weight: 600; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .lang-toggle:hover { background: var(--muted, #f9fafb); } @media (max-width: 768px) { .header-actions .lang-toggle, .header-right .lang-toggle { width: 100%; justify-content: flex-start; height: auto; padding: 0.7rem 0.9rem; } } /* Arabic-friendly font stack */ [dir="rtl"] body { font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Noto Sans Arabic', Arial, sans-serif; } /* Numbers stay Western/latin so dB values line up with the charts */ [dir="rtl"] .metric-value, [dir="rtl"] .kpi-value, [dir="rtl"] .summary-item strong, [dir="rtl"] .threshold-value, [dir="rtl"] .ts { direction: ltr; unicode-bidi: isolate; } /* Charts always read left→right (time flows forward), even in RTL */ [dir="rtl"] .chart-container, [dir="rtl"] .chart-box, [dir="rtl"] canvas { direction: ltr; } /* Badges / dots pinned to a side */ [dir="rtl"] .notif-badge { right: auto; left: -7px; } [dir="rtl"] .menu-toggle .menu-dot { right: auto; left: 6px; } /* Accent bars on cards */ [dir="rtl"] .device-card.over-threshold { box-shadow: inset -3px 0 0 0 var(--destructive); } [dir="rtl"] .metric-card.over { box-shadow: inset -3px 0 0 0 var(--destructive); } /* Auto margins that push things to one side */ [dir="rtl"] .toolbar-info { margin-left: 0; margin-right: auto; text-align: left; } [dir="rtl"] .menu-toggle { margin-left: 0; margin-right: auto; } [dir="rtl"] .save-hint { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .summary-item strong { margin-right: 0; margin-left: 0.35rem; } [dir="rtl"] .rank-meta { justify-content: flex-start; } /* Insight bullets (analytics + reports) */ [dir="rtl"] .insight { border-left: none; border-right: 3px solid var(--info, #3b82f6); } [dir="rtl"] .insights li { padding-left: 0; padding-right: 16px; } [dir="rtl"] .insights li::before { left: auto; right: 0; } /* Tables */ [dir="rtl"] th, [dir="rtl"] td { text-align: right; } /* Print reports keep their sheet layout in RTL */ [dir="rtl"] .rhead .meta { text-align: left; }