/* RTL overrides for Urdu (and any future RTL language).
 * Loaded only when <html dir="rtl">. Keeps the LTR rules unchanged.
 *
 * Strategy: flip text alignment, then mirror the few layout pieces
 * that the LTR CSS positions with explicit left/right (sidebar,
 * tile-grid scrolling, table headers, topbar nav).
 *
 * Form inputs keep numeric input LTR (SKUs, PINs, barcodes) so digits
 * read in the natural order even on an RTL page.
 */

body.rtl {
  text-align: right;
}

body.rtl input[type="text"],
body.rtl input[type="password"],
body.rtl input[type="number"],
body.rtl input[type="search"],
body.rtl input[type="email"] {
  /* Numbers/SKUs read LTR even inside an RTL page. */
  direction: ltr;
  text-align: right;
}

/* Topbar: flip the order of the actions on the right side. */
body.rtl .topbar {
  flex-direction: row-reverse;
}
body.rtl .topbar__nav,
body.rtl .topbar__logout {
  flex-direction: row-reverse;
}

/* Admin sidebar slides from the right in RTL. */
body.rtl .layout {
  flex-direction: row-reverse;
}
body.rtl .sidebar nav a {
  text-align: right;
}

/* Mobile bottom-nav: same icons, reversed order so "Home" sits on the right. */
body.rtl .bottom-nav {
  flex-direction: row-reverse;
}

/* Tables: headers and cells right-align by default in RTL. The few
 * numeric columns the CSS marks with `.num` keep their numeric look. */
body.rtl table.data th,
body.rtl table.data td {
  text-align: right;
}
body.rtl table.data .num {
  text-align: left;  /* numbers flip back so the digits line up nicely */
  direction: ltr;
}

/* Forms: labels right-align; the input below them already inherits. */
body.rtl .form label,
body.rtl .mform label,
body.rtl .auth__form label {
  text-align: right;
}

/* Buttons row: actions group from the right in RTL. */
body.rtl .form__actions,
body.rtl .mform__actions,
body.rtl .page-header__actions {
  flex-direction: row-reverse;
}

/* Dashboard tiles: keep grid layout, but right-align text. */
body.rtl .dashboard__tile {
  text-align: right;
  align-items: flex-end;
}

/* Flash banners read right-aligned. */
body.rtl .flash {
  text-align: right;
}

/* Candidate chooser (partial SKU match) — list bullets on the right. */
body.rtl .candidates {
  padding-right: 1em;
  padding-left: 0;
}

/* Mobile tile-grid: arrows that say "next" should reverse if any
 * appear. Currently no directional icons in our SVGs, so nothing else
 * needed here. */

/* Codes read left to right in every language: a shelf, a SKU, a barcode.
 * Left to the page's direction, "1-A-1" is laid out as "A-1-1", which is
 * another shelf. */
body.rtl code,
body.rtl .shelf-confirm__code,
body.rtl bdi.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}