/* ============================================================
   Right-to-left
   Arabic mirrors the whole interface, not just the text. Everything
   below flips a physical property that the base sheet sets.
   ============================================================ */

[dir="rtl"] body { font-feature-settings: 'liga' 1; }

/* ---- shell ---- */
[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--glass-line);
}
[dir="rtl"] .nav-item.active::before {
  left: auto;
  right: -12px;
  border-radius: var(--r-full) 0 0 var(--r-full);
}
[dir="rtl"] .nav-badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] .topbar-end { margin-left: 0; margin-right: auto; }
[dir="rtl"] .rail { padding: var(--s-5) 0 var(--s-5) var(--s-5); }

/* ---- stacked avatars ---- */
[dir="rtl"] .avatars .av { margin-left: 0; margin-right: -8px; }
[dir="rtl"] .avatars .av:first-child { margin-right: 0; }

/* ---- controls ---- */
[dir="rtl"] .select {
  background-position: left 11px center;
  padding-right: 13px;
  padding-left: 34px;
}
[dir="rtl"] .switch::after { left: auto; right: 2px; }
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-16px); }

/* ---- tables ---- */
[dir="rtl"] .table th { text-align: right; }
[dir="rtl"] .table th.num, [dir="rtl"] .table td.num { text-align: left; }

/* ---- data marks grow from the correct edge ---- */
[dir="rtl"] .rank-fill { transform-origin: right; }
[dir="rtl"] .plan-card .quota-fill { margin-left: auto; }

/* ---- floating layers ---- */
[dir="rtl"] .toasts { right: auto; left: var(--s-6); }
[dir="rtl"] .scaley-fab { right: auto; left: var(--s-6); padding: 0 8px 0 18px; }

/* ---- chat ---- */
[dir="rtl"] .sk-composer .input { padding-left: 13px; padding-right: 15px; }
[dir="rtl"] .sk-suggest:hover { transform: translateX(-2px); }
[dir="rtl"] .sk-suggest .chev { margin-left: 0; margin-right: auto; transform: scaleX(-1); }

/* ---- directional icons need mirroring; symmetrical ones must not ---- */
[dir="rtl"] .btn svg[data-flip],
[dir="rtl"] .nav-item svg[data-flip] { transform: scaleX(-1); }

/* ---- insight and hook accents sit on the other edge ---- */
[dir="rtl"] .vid .hookline {
  border-left: none;
  border-right: 3px solid var(--accent);
  border-radius: 9px 0 0 9px;
}

/* ---- auth split ---- */
[dir="rtl"] .auth-art-side { border-left: none; border-right: 1px solid var(--line); }

/* Charts stay left-to-right on purpose: time reads forward in both
   languages on a Meta report, and mirroring the axis makes it harder to
   compare against Ads Manager side by side. */
[dir="rtl"] .chart { direction: ltr; }
[dir="rtl"] .chart-legend { direction: rtl; }