/* ==========================================================================
   GoldenBearing Design System — RTL cross-cutting utilities (GB-UI-01)
   ==========================================================================
   Almost all directionality in this design system comes for free from the
   logical properties already used throughout components.css (margin-inline,
   inset-inline-start, border-inline-start, text-align: start, ...) — those
   need nothing extra here.

   This file only holds the handful of things CSS logical properties
   genuinely cannot express, so it stays intentionally short:
     1. Mirroring directional icons (an arrow/chevron SVG is drawn pointing
        a physical direction; logical properties can't flip pixels).
     2. Keeping embedded Latin content (emails, IDs, SKUs, phone numbers)
        left-to-right even while sitting inside Persian/RTL text, which is
        the correct behavior per the Unicode Bidirectional Algorithm and
        matches how <bdi> works natively.
     3. A numeric-column alignment helper for tables (ERP tables read more
        scannable with amounts/counts end-aligned regardless of direction).
   ========================================================================== */

/* ---- 1. Icon mirroring --------------------------------------------------
   Apply to any directional icon (breadcrumb chevrons, carousel/pagination
   arrows, "back" affordances, the date-picker's prev/next nav buttons). */

.gb-icon-mirror-rtl {
    display: inline-flex;
}

.gb-app[dir="rtl"] .gb-icon-mirror-rtl,
.rtl-page .gb-icon-mirror-rtl {
    transform: scaleX(-1);
}

/* The date-picker's built-in prev/next nav buttons opt in automatically. */
.gb-app[dir="rtl"] .gb-date-picker__nav svg,
.rtl-page .gb-date-picker__nav svg {
    transform: scaleX(-1);
}

/* ---- 2. Bidi isolation for embedded Latin tokens ------------------------
   Wrap emails / usernames / IDs / phone numbers that appear inside Persian
   copy, e.g.: <span class="gb-ltr-embed">alice@example.com</span> */

.gb-ltr-embed {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
}

/* `display: inline-block` above exists to make the isolation reliable for an
   inline run of Latin text. Applied to a <td>/<th> it is destructive: it
   replaces `display: table-cell`, so the cell drops out of the table grid and
   its column stops aligning with its header. Found during live verification —
   the Candidates table rendered "کد ملی" and "موبایل" as one run of digits
   because both cells had left the grid. Bidi isolation still applies; only
   the display override is undone, which is exactly what a table cell needs. */
td.gb-ltr-embed,
th.gb-ltr-embed {
    display: table-cell;
}

/* ---- 3. Numeric table columns -------------------------------------------
   Opt a <td>/<th> into end-aligned, tabular-figure numerals — reads best
   for amounts/counts/dates in both directions. Usage:
   <td class="gb-numeric">۱۲۳</td> */

.gb-numeric {
    text-align: end;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}