/* ============================================================
   RTL  — right-to-left mirroring for Arabic (and any future RTL
   language). Everything keys off the [dir="rtl"] set on <html>
   by js/i18n.js applyLanguage(). In the default LTR layout the
   fixed sidebar sits on the RIGHT; RTL moves it to the LEFT and
   swaps the content padding to match. Text direction itself is
   handled natively by the dir attribute — these rules only fix
   the pieces positioned with physical left/right.
   ============================================================ */

/* Arabic reads better with a UI font that has proper Arabic glyphs;
   fall back to the app's default stack for Latin runs. */
[dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", var(--font-body, sans-serif); }

/* The PlansMap wordmark + tagline are Latin brand identity — keep them LTR so
   bidi doesn't reorder the "!" or the italic mark inside an RTL header. */
[dir="rtl"] .brand__mark,
[dir="rtl"] .brand__sub { direction: ltr; unicode-bidi: isolate; }

/* ---- Fixed sidebar: right → left ---- */
[dir="rtl"] .sidebar {
  right: auto; left: 0;
  border-left: none; border-right: 1px solid var(--bg-line);
}

/* ---- Plan meta band: swap the sidebar-width padding to the left ---- */
[dir="rtl"] .plan-meta {
  padding-right: 16px;
  padding-left: calc(var(--sidebar-w) + 16px);
}
/* Align the tasks-view scorecard band with the tasks grid below it. The grid
   lives inside .canvas, which in RTL reserves the fixed sidebar
   (--sidebar-w + 16px) on the leading (left) edge and 16px on the other. The
   scorecard band must reserve exactly the same, or it centres in a wider box and
   lands offset from the grid (~42px on wide screens, ~84px on narrow ones). The
   same calc keeps them aligned at every width — --sidebar-w collapses to 0 on
   small screens, matching the canvas — so no per-breakpoint override is needed. */
[dir="rtl"] .plan-meta.is-tasks-view { padding-left: calc(var(--sidebar-w) + 16px); padding-right: 16px; }

/* Board actions live top-corner opposite the sidebar → flip to the left. */
[dir="rtl"] .plan-meta__actions {
  right: auto; left: calc(var(--sidebar-w) + 16px);
}
[dir="rtl"] body.is-immersive .plan-meta__actions { left: 16px; right: auto; }
[dir="rtl"] .plan-meta__stats b { margin-right: 0; margin-left: 2px; }

/* ---- Canvas: same padding swap as the meta band ---- */
[dir="rtl"] .canvas {
  padding-right: 16px;
  padding-left: calc(var(--sidebar-w) + 16px);
}
[dir="rtl"] body.is-immersive .plan-meta,
[dir="rtl"] body.is-immersive .canvas { padding-left: 16px; padding-right: 16px; }
[dir="rtl"] body.is-immersive .plan-meta.is-tasks-view { padding-left: 0; padding-right: 0; }

/* ---- Header account dropdowns: anchored opposite the sidebar ---- */
[dir="rtl"] .user-dropdown,
[dir="rtl"] .notif-dropdown {
  right: auto; left: calc(var(--sidebar-w) + 8px);
}
[dir="rtl"] .notif-badge { right: auto; left: -3px; }
[dir="rtl"] .user-dropdown__item i { text-align: center; }

/* ---- Overflow project menu opens under its button on the start edge ---- */
[dir="rtl"] .plan-more__menu { right: auto; left: 0; }
[dir="rtl"] .plan-more__item { text-align: right; }

/* ---- Map zoom controls (physically pinned to a corner) ---- */
[dir="rtl"] .map-zoom-controls { right: auto; left: calc(var(--sidebar-w) + 16px); }

/* On narrow screens the account group is pulled to the start edge with an
   auto margin; in RTL that margin must sit on the right instead. */
@media (max-width: 900px) {
  [dir="rtl"] .header__row > .header__account { margin-left: 0; margin-right: auto; }
}

/* ---- Performance scorecard (Tasks-view header + full Performance page) ----
   The flex columns/rows already reverse under dir=rtl; these fix the pieces
   pinned with physical left/right — text alignment, the collapse toggle, the
   window-meta gap, the inter-gauge spacing and the critical accent bar. */
[dir="rtl"] .perf-tasks-header,
[dir="rtl"] .perf-finding,
[dir="rtl"] .perf-finding--static { text-align: right; }

/* Collapse toggle lives at the start (right) edge in RTL. */
[dir="rtl"] .pth-toggle-row { justify-content: flex-start; }

/* "N tasks · M completed" meta sits after the title on the other side now. */
[dir="rtl"] .perf-window { margin-left: 0; margin-right: 10px; }

/* Extra room between Overall and the component gauges → left side in RTL. */
[dir="rtl"] .pth-gauges .perf-gauge:first-child { margin-right: 0; margin-left: 48px; }
@media (max-width: 760px) {
  [dir="rtl"] .pth-gauges .perf-gauge:first-child { margin-right: 0; margin-left: 18px; }
}

/* Critical-finding accent bar moves to the leading (right) edge. */
[dir="rtl"] .perf-finding.is-critical { border-left: 0; border-right: 3px solid var(--critical); }
[dir="rtl"] .perf-actions:not(.perf-actions--compact) .perf-finding.is-critical {
  box-shadow: inset -3px 0 0 var(--critical);
}