/* ============================================================
   Right-to-left support (Urdu, Arabic). Loaded only when the active
   locale's direction is rtl (see layouts/app.php and layouts/auth.php).

   Most of the layout already mirrors correctly on its own: the shell
   is flexbox/grid throughout, and components.css uses CSS logical
   properties (inset-inline-*, margin-inline-*, text-align: start)
   instead of physical left/right, so the browser flips them for free
   under dir="rtl". What's left here is everything logical properties
   genuinely cannot express: script-appropriate fonts, mirroring
   directional glyphs (arrows/chevrons that encode reading direction),
   and animation/transform directions.
   ============================================================ */

/* ---------------------------------------------------- Script fonts */
/* Urdu is conventionally set in Nastaliq; Arabic in Naskh. Falling
   back to the Latin UI font for either would render the script in a
   low-quality system fallback with broken shaping/ligatures. */
:root[lang="ur"] body { font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', var(--font-sans); }
:root[lang="ar"] body { font-family: 'Noto Naskh Arabic', var(--font-sans); }

/* Numbers (KPI values, IMEI/quantity/amount inputs) stay LTR-typeset
   even on an RTL page so digit order and thousand separators never
   scramble - a well-established RTL convention (Hindu-Arabic digits
   are read left-to-right even in Arabic/Urdu script). They keep
   visually hugging the same edge they did before via text-align. */
[dir="rtl"] .kpi-value,
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"] {
  direction: ltr;
  text-align: right;
}

/* -------------------------------------------------- Directional icons */
/* fa-chevron-left/right and fa-angle-left/right are used throughout
   the app as breadcrumb separators, pagination prev/next, and
   back/forward affordances - all of which encode reading direction,
   so they must mirror. Icons that are fixed pictograms regardless of
   direction (sort, undo/rotate, external-link, door/exit) are
   deliberately left alone. */
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right {
  transform: scaleX(-1);
}

/* -------------------------------------------------------- Animations */
/* Toasts live at inset-inline-end (mirrors to the left under RTL via
   components.css), so they must slide in from that same side - a
   `transform: translateX()` can't be expressed as a logical property,
   so the direction is flipped explicitly here. */
[dir="rtl"] .toast { transform: translateX(-120%); }
[dir="rtl"] .toast.show { transform: translateX(0); }

/* The command palette and dropdowns use translateY only, which is
   direction-agnostic - nothing to flip there. */