/* Funzo — RTL support (Fix Team D, 2026-10-26).
   Loaded on every page via views/partials/header.ejs, but every rule is
   scoped under [dir="rtl"], so LTR pages are completely unaffected.
   This COMPLEMENTS the RTL rules already in public/style.css (header
   text-align, table th/td, balance/card text-align) — it does not
   replace them. Flex and grid rows already flip with direction; the
   rules below cover the pieces that do NOT flip automatically:
   form fields, standalone banners/notes, stacked-table labels, and
   balance amounts (kept LTR so "PKR 300.00" never renders backwards).
   RTL on a real phone is still unverified (text/code review only) and
   Urdu translation review is still pending — see src/i18n/ur.js. */
[dir="rtl"] .banner,
[dir="rtl"] .muted,
[dir="rtl"] .field-note,
[dir="rtl"] .note-sm { text-align: right; }
[dir="rtl"] .listrow,
[dir="rtl"] .topnav,
[dir="rtl"] .tabs { direction: rtl; }
/* Form fields: Urdu text enters right-to-left. Email, password and
   phone fields stay LTR, because addresses and numbers are LTR data. */
[dir="rtl"] input:not([type="email"]):not([type="password"]):not([type="tel"]),
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: right; direction: rtl; }
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"] { direction: ltr; text-align: left; }
/* Stacked (mobile) tables: the ::before label was hard-coded left in
   style.css; in RTL it belongs on the right, with the value. */
[dir="rtl"] table.stacked td::before { text-align: right; }
/* Balance amounts: currency + number stay LTR inside an RTL card. */
[dir="rtl"] .balance .amt { direction: ltr; unicode-bidi: isolate; text-align: left; }
/* POLISH Team M — mirroring fixes (found by audit, all scoped [dir="rtl"]):
   - avatar-sm used margin-right (avatar sits on the wrong side in RTL)
   - bell badge sat at top-right; in RTL the outer corner is top-left
   - skip link hid/focused from the left; in RTL it must come from the right
   - desktop left rail used border-right; in RTL the rail divider is on the left
   - stacked-table last cell used flex-end, which is the left edge in RTL;
     action cells must sit at the row's trailing edge, i.e. flex-start in RTL */
[dir="rtl"] .avatar-sm { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .bell-badge { right: auto; left: -4px; }
[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 8px; }
[dir="rtl"] table.stacked td:last-child { justify-content: flex-start; }
@media (min-width:1100px) {
  [dir="rtl"] .bottomnav { border-right: 0; border-left: 1px solid #dde5df; }
}