/* ============================================================
 * RTL-specific overrides.
 *
 * Most of the layout flips automatically because tokens.css and
 * components.css use logical properties (margin-inline-*, inset-*,
 * border-inline-*). This file only contains the cases where
 * logical properties don't cover the visual: directional glyphs,
 * arrow rotations, etc.
 * ============================================================ */

/* The self-hosted IBM Plex Sans Arabic (tokens.css @font-face) — not a
   system fallback stack. UXB-04: this line previously pinned Noto/Geeza,
   overriding the design-system face across the whole Arabic UI. */
[dir="rtl"] {
  font-family: var(--font-arabic);
}

/* Directional chevrons / arrows used in breadcrumbs, pagination */
[dir="rtl"] .breadcrumbs__sep,
[dir="rtl"] .chevron-end,
[dir="rtl"] .icon--directional {
  transform: scaleX(-1);
}

/* Numeric tabular cells: keep numbers Western for invoices / IDs */
[dir="rtl"] .num--western {
  direction: ltr;
  unicode-bidi: embed;
}

/* Money/number cells render in their natural LTR order in the RTL UI
   (UX P0 baseline: "11,250.00 SAR 15%" was reordering to
   "SAR 15% 11,250.00"). direction:ltr + text-align:start keeps the value
   left-aligned — the same visual edge `.num`'s logical text-align:end
   resolves to under RTL, so header/data alignment stays consistent. */
[dir="rtl"] .table .num,
[dir="rtl"] .tabular {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] .table .num { text-align: start; }

/* Letter-spacing scales differently for Arabic text */
[dir="rtl"] .kpi__label,
[dir="rtl"] .page-header__eyebrow,
[dir="rtl"] .table thead th,
[dir="rtl"] .auth-card__foot {
  letter-spacing: 0;
}

/* The mono-caps label voice (.abrq-label and the content labels that adopt
   it) can't render Arabic: IBM Plex Mono has no Arabic glyphs, Arabic has
   no uppercase, and tracking detaches joining strokes. The label ROLE
   carries — Plex Sans Arabic semibold, no caps, no tracking (mirrors the
   [dir="rtl"] .abrq-label fallback in tokens.css / abrq-ui G2). */
[dir="rtl"] .kpi__label,
[dir="rtl"] .page-header__eyebrow,
[dir="rtl"] .table thead th,
[dir="rtl"] .dl dt,
[dir="rtl"] .field__label,
[dir="rtl"] .badge {
  font-family: var(--font-arabic);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}