/**
 * RTL layout helpers — rtl-hebrew-ui spec (wave 4).
 *
 * This file is imported by packages/ui/src/styles/index.css and included in
 * every consuming app via the shared design-system token import.
 *
 * Rules here are intentionally minimal — all layout RTL mirroring is handled
 * automatically by CSS logical properties.  The only entries needed are:
 *   1. .mirror-rtl  — flip directional icons under [dir="rtl"]
 *   2. .num         — numeric columns/inputs: end-aligned + tabular figures
 *
 * IMPORTANT: Do NOT add [dir="rtl"] layout overrides here. Every layout rule
 * must use logical properties (margin-inline-*, padding-inline-*, inset-inline-*,
 * text-align: start/end) so the browser handles mirroring automatically.
 */

/* ── Directional icon mirroring ─────────────────────────────────────────────
   Apply .mirror-rtl to icons that carry directional meaning:
     arrow-left / arrow-right, chevron-left / chevron-right,
     back-arrow, send, forward.
   Do NOT apply to: hamburger menu, bell, search, calendar, shekel (₪).
   The transform is static (no animation) — no prefers-reduced-motion guard
   is needed for this rule specifically.  Any sidebar collapse transition that
   uses a mirrored icon must be wrapped by the existing reduced-motion guard
   (see @media prefers-reduced-motion in tokens/index.css). */
[dir="rtl"] .mirror-rtl {
  transform: scaleX(-1);
}

/* ── Numeric columns / inputs ───────────────────────────────────────────────
   Applies to: ILS amounts, percentages, hours, invoice numbers, phone numbers,
   tax IDs (ח.פ. / ע.מ.), and any other structured numeric content.
   Per Hebrew typography conventions, numbers always read left-to-right even
   inside an RTL document — end-aligning them is the same visual result in both
   directions (right edge in LTR, left edge in RTL) because `text-align: end`
   is logical, not physical.
   Use alongside `dir="ltr"` on <input> elements (see Input.tsx numeric prop). */
.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}