/*
 * Right-to-left overrides. Loaded ONLY when the active locale is written right-to-left,
 * after app.css, so every rule here is an override and nothing in app.css had to change.
 *
 * Scope, stated honestly: this covers the shared primitives — page flow, typography
 * alignment, tables, forms, cards, buttons, badges, list toolbar and pager, modals — and
 * the subscriber-facing pages built for it. Individual views in the staff consoles still
 * carry hard-coded inline styles (margin-left, text-align:left) that RTL cannot reach from
 * a stylesheet; those are fixed per view as each console is translated.
 */

html[dir="rtl"] body,
body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Flip the writing direction for the structural containers, but never for content that
   is inherently left-to-right: a URL, an email address, a reference number or a money
   amount reads wrong when mirrored. */
[dir="rtl"] .mono,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] .ltr {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* ----- Typography and spacing ------------------------------------------------ */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] p, [dir="rtl"] label, [dir="rtl"] .muted {
  text-align: inherit;
}
[dir="rtl"] ul, [dir="rtl"] ol {
  padding-right: 18px;
  padding-left: 0;
}

/* ----- Tables ---------------------------------------------------------------- */
[dir="rtl"] table.data th,
[dir="rtl"] table.data td {
  text-align: right;
}
/* A cell the view pushed to the right is a "trailing" cell — in RTL that is the left.
   The two .table[style*="text-align:right"] hooks that used to be here are gone: the
   invoice was the last class="table" on the platform and it now uses table.data with
   class="num", which these selectors already cover properly. */
[dir="rtl"] table.data th.num,
[dir="rtl"] table.data td.num,
[dir="rtl"] table.data th.rowact,
[dir="rtl"] table.data td.rowact {
  text-align: left !important;
}

/* ----- Forms ----------------------------------------------------------------- */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}
[dir="rtl"] .checkbox-row {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
[dir="rtl"] .field-hint {
  text-align: right;
}

/* ----- Layout primitives ------------------------------------------------------ */
[dir="rtl"] .page-head,
[dir="rtl"] .row,
[dir="rtl"] .list-toolbar,
[dir="rtl"] .modal-head {
  flex-direction: row-reverse;
}
/* .row is used for form columns as well as toolbars; reversing it keeps the reading
   order correct because the columns are laid out in source order. */

[dir="rtl"] .pub-header .container {
  flex-direction: row-reverse;
}
/* .app-shell used to be listed here and matched nothing — the shell container is
   .shell, and it is a GRID, which mirrors from `direction: rtl` on its own. */

/* ----- Badges, buttons, pager -------------------------------------------------- */
[dir="rtl"] .badge {
  margin-right: 6px;
  margin-left: 0;
}
/* .pager, not .list-pager — the latter matched nothing, so the pager never
   mirrored in RTL despite a rule that looked like it did. */
[dir="rtl"] .pager {
  flex-direction: row-reverse;
}

/* ----- Arrows written into the copy -------------------------------------------- */
/* "← Back" and "Next →" point the wrong way once the page is mirrored. */
[dir="rtl"] .flip-arrow {
  display: inline-block;
  transform: scaleX(-1);
}

/* ----- The language switcher --------------------------------------------------- */
/* NOTHING HERE ON PURPOSE, AND THE REASON MATTERS.
   This file used to restyle `.lang-switch` with bare, unscoped selectors — the only rules in
   it not qualified by [dir="rtl"] — because they were written when app.css had no rules for
   the component at all. app.css has since grown the real thing, and because rtl.css loads
   after it, those leftovers won in Arabic: the pill turned into a 6px-radius square, the
   active language lost its --ui-soft accent for a flat --c-bg, and its weight dropped from
   800 to 600. The control that exists to switch INTO Arabic was the one control that looked
   wrong in Arabic.
   app.css places the mark with `margin-inline`, which already flips, so RTL needs no override
   here. If this component ever does need one, scope it to [dir="rtl"] like every other rule
   in this file. */