/* RTL layer. Entirely inert until i18n.js stamps <html dir="rtl">, so linking
 * it unconditionally from index.html costs the English app nothing.
 *
 * Two jobs: flip the layout, and pin the things that must NOT flip. Group
 * addresses (0/1/4), device ids (mc-a750), invitation codes, hex payloads and
 * log lines are Latin/digit tokens; rendered inside an RTL paragraph the bidi
 * algorithm reorders their punctuation ("0/1/4 · 1.001" comes out mangled).
 * Everything of that shape gets direction:ltr + unicode-bidi:isolate here, by
 * the ids and classes the app already has — no HTML edits needed for them.
 *
 * For Arabic strings that app.js *composes* around a Latin token (a device
 * name like "Gateway a750", a user name), the recipe is a <bdi> element or
 * unicode-bidi:plaintext on the container — see docs/i18n.md §mixed text.
 */

/* -- type ------------------------------------------------------------------ */
/* Arabic renders best with the system UI faces that actually ship Arabic
 * glyphs: Segoe UI (Windows), SF/system-ui (iOS/macOS), Roboto/Noto (Android),
 * Tahoma as the old reliable fallback. No webfonts: this file is also served
 * from gateway flash, offline. Arabic script sits lower and denser than Latin
 * at the same size, so give it a touch more line height. */
[dir="rtl"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  line-height: 1.7;
}
/* Letter-spacing breaks Arabic joining; kill the places index.html sets it.
 * (The code inputs it was set on stay LTR anyway, but headings inherit.) */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .hint, [dir="rtl"] button, [dir="rtl"] label {
  letter-spacing: 0;
}

/* -- header and the user menu ---------------------------------------------- */
/* The menu hangs under the user's name; in RTL the name sits at the far left,
 * so the panel opens leftward from it. */
[dir="rtl"] #usermenu-items { right: auto; left: 0; }
[dir="rtl"] #usermenu-items button,
[dir="rtl"] #usermenu-items a { text-align: right; }

/* The tabs are a flex row and flip on their own with direction; what needs
 * help is their *labels*: "Gateway a750" or an Arabic name, either way the
 * label renders in its own direction without dragging the row around. */
[dir="rtl"] .tabs button { unicode-bidi: plaintext; }

/* -- tables ---------------------------------------------------------------- */
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
/* …except columns that are addresses/ids by construction. */
[dir="rtl"] td.mono, [dir="rtl"] th.mono {
  direction: ltr; unicode-bidi: isolate; text-align: left;
}

/* -- forms ----------------------------------------------------------------- */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="password"],
[dir="rtl"] select { text-align: right; }

/* Inputs whose values are codes, addresses, hosts, times or day lists —
 * LTR content whatever the UI language. Keep them LTR so the caret and the
 * hyphens behave while typing. */
[dir="rtl"] #claim-code,
[dir="rtl"] #join-code,
[dir="rtl"] #join-user,
[dir="rtl"] #rule-address,
[dir="rtl"] #rule-equals,
[dir="rtl"] #rule-at,
[dir="rtl"] #rule-days,
[dir="rtl"] #rule-offset,
[dir="rtl"] #rule-then-address,
[dir="rtl"] #rule-then-data,
[dir="rtl"] #rule-then-delay,
[dir="rtl"] input[name="gatewayHost"],
[dir="rtl"] input[name="deviceId"],
[dir="rtl"] input[name="brokerHost"],
[dir="rtl"] input[name="appUser"] {
  direction: ltr; text-align: left;
}

/* -- tiles ----------------------------------------------------------------- */
/* The meta line under a tile is "0/1/4 · no status · 1.001": pure LTR data.
 * Keep its internal order LTR but leave it on the tile's reading edge. */
[dir="rtl"] .tile .meta {
  direction: ltr; unicode-bidi: isolate; text-align: right;
}
/* A state line may be Arabic ("مطفأ") or a value ("21.5 °C"); let each render
 * in its own direction without reordering. */
[dir="rtl"] .tile .state { unicode-bidi: plaintext; }

/* -- code, log, one-off LTR islands ---------------------------------------- */
[dir="rtl"] code,
[dir="rtl"] #invite-code,
[dir="rtl"] #log {
  direction: ltr; unicode-bidi: isolate; text-align: left;
}

/* Generic escape hatch for anything found later: class="ltr" or dir="ltr" on
 * a span keeps a token (id, address, hex) intact inside Arabic text. */
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }