/* ============================================================
   WL-1, Steps 6–7 — RTL override stylesheet for the app shell
   + sign-in (public-app/index.html).

   Loaded ONLY by the locale loader (services/i18n.js) when the
   resolved UI locale is fa or ar, and served by index.js only
   when WL_ENABLED is on. The monolith's own CSS is never
   edited: every rule here is keyed on [dir="rtl"] and flips the
   physical declarations the scoped surfaces rely on (sidebar
   edge, nav alignment, auto margins, fixed drawer, auth art).
   Layout containers (.dash grid, .auth-split grid, flex rows)
   mirror on their own because CSS grid/flex follow the
   document direction.
   ============================================================ */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

[dir="rtl"] body {
  font-family: 'Vazirmatn', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* Joined scripts (Persian/Arabic) must not be letter-spaced —
   spacing breaks the letter joins. */
[dir="rtl"] .nav-sec,
[dir="rtl"] .side .nav-sec {
  letter-spacing: 0;
}

/* ---- app shell: sidebar ---- */
[dir="rtl"] .side {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .08);
}
[dir="rtl"] .nitem {
  text-align: right;
}
[dir="rtl"] .nitem .tag {
  margin-left: 0;
  margin-right: auto;
}
[dir="rtl"] .nitem.feat-locked::after {
  margin-left: 0;
  margin-right: auto;
}

/* ---- app shell: topbar ---- */
[dir="rtl"] .top-actions {
  margin-left: 0;
  margin-right: auto;
}
[dir="rtl"] .socst {
  right: auto;
  left: 10px;
}

/* ---- forms ---- */
[dir="rtl"] .inp,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: start;
}
/* Addresses and credentials are typed left-to-right even in an
   RTL UI. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: left;
}

/* ---- sign-in / auth ---- */
[dir="rtl"] .auth-brand::before {
  right: auto;
  left: -160px;
}
[dir="rtl"] .auth-brand::after {
  left: auto;
  right: -120px;
}

/* ---- phone-gate banner ---- */
[dir="rtl"] #phoneGateBanner432 {
  text-align: start;
}

/* ---- language switcher (injected by the locale loader) ---- */
[dir="rtl"] #wlLangSwitch {
  left: auto;
  right: 14px;
  direction: ltr;
}

/* ---- mobile drawer (the monolith pins it left, off-canvas) ---- */
@media (max-width: 960px) {
  [dir="rtl"] .side {
    left: auto;
    right: 0;
    transform: translateX(105%);
    border-radius: 18px 0 0 18px;
    box-shadow: -24px 0 60px rgba(2, 8, 23, .35);
  }
  [dir="rtl"] body.mnav-open .side {
    transform: none;
  }
}
/* ---- floating theme (night) toggle ----
   The monolith pins #themeToggle to the viewport's bottom-right
   (bottom:96px; right:22px; z-index:300). In LTR the sidebar is
   the left column, so that corner is content space. In RTL the
   sidebar mirrors to the right (the .dash grid's 250px first
   column), so the toggle lands on top of the menu and covers
   nav items. Dock it at the content area's bottom-right corner
   instead: sidebar width (250px) + the original 22px inset. */
[dir="rtl"] #themeToggle {
  right: 272px;
}

/* ---- mobile (<=960px, the monolith's own breakpoint): the
   sidebar is an off-canvas drawer and the content spans the
   full width, so the viewport corner IS the content corner —
   restore the original inset. (With the drawer open, the
   drawer + scrim paint above the toggle, so no menu item is
   covered then either.) ---- */
@media (max-width: 960px) {
  [dir="rtl"] #themeToggle {
    right: 22px;
  }
}