/* ─────────────────────────────────────────────────────────────────────────
   Edara CRM — RTL overrides

   Loaded after app.css when the active language is Arabic (or any RTL).
   Strategy per plan: hybrid. We do NOT refactor all 46 physical properties
   in app.css to logical — we override only the ~20 hotspots where left/
   right placement carries meaning. New rules added after 2026-04 should
   prefer logical properties so this file stops growing.

   Contract: every selector here is prefixed with [dir="rtl"] so LTR is
   untouched when the file is loaded.
   ───────────────────────────────────────────────────────────────────────── */

/* Cairo for Arabic. --font-body/--font-display alias --md-sys-typescale-font
   (see tokens.css), so a single override here cascades to both. */
[dir="rtl"] {
  --md-sys-typescale-font: 'Cairo', 'Inter', system-ui, sans-serif;
}

/* Force LTR on controls that must remain LTR regardless of UI direction */
/* The person-card name sits by the avatar, which is on the right here. */
[dir="rtl"] .dd-contact__name { text-align: right; }

[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .mono,
[dir="rtl"] code,
[dir="rtl"] kbd {
  direction: ltr;
  text-align: start;
}


/* ── Area-chart annotation — stays on far edge, but swap ─────────────── */

/* ── Org picker arrow: Material "arrow_forward" points right; mirror ─── */
[dir="rtl"] .org-card__arrow,
[dir="rtl"] .search-result__arrow,
[dir="rtl"] .data-table th .col-sort__arrow,
[dir="rtl"] .icon-mirrorable {
  transform: scaleX(-1);
}

/* ── Mobile sidebar drawer — slide from the right in RTL ─────────────── */
@media (max-width: 767px) {
  [dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
    box-shadow: 0 0 16px rgba(0,0,0,.24);
  }
  [dir="rtl"] .sidebar.sidebar--open {
    transform: translateX(0);
  }
}

/* ── Misc utilities where physical left/right leaks ──────────────────── */

/* app.css sets inset 2px (left edge) for this shadow; RTL needs the right edge. */
[dir="rtl"] .data-table th.col-drop-target {
  box-shadow: inset -2px 0 0 var(--color-primary);
}

/* Numeric columns stay LTR-aligned so digits line up as Arabic users expect.
   Numeric th/td get explicit text-align:right inline, which is correct for
   both LTR and RTL (numbers read left-to-right in Arabic too). */
[dir="rtl"] td.num,
[dir="rtl"] th.num {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

/* Kanban: horizontal flex stays direction-agnostic so stages auto-reverse
   in RTL. Nothing to override unless hardcoded order: was used — none
   found in the first-phase audit. */

/* Top-bar search pill kbd hint stays LTR so "⌘K" reads correctly */
[dir="rtl"] .search-pill__kbd {
  direction: ltr;
}

/* Login title separator bar stays visually centered */
[dir="rtl"] .login-title__sep {
  margin-inline-start: 8px;
  margin-inline-end: 8px;
}

/* ── Deal stage chevron bar — mirror chevrons to point inline-end (left) ─
   app.css uses physical clip-path polygons that always point right. Flex
   auto-reverses stage order in RTL, but the arrows still point right —
   backwards relative to the reading direction. Mirror each polygon and
   swap the asymmetric padding so text doesn't collide with the notch. */
[dir="rtl"] .dd-stage {
  clip-path: polygon(100% 0, 12px 0, 0 50%, 12px 100%, 100% 100%, calc(100% - 12px) 50%);
  padding: 0 18px 0 8px;
}
[dir="rtl"] .dd-stage:first-child {
  clip-path: polygon(100% 0, 12px 0, 0 50%, 12px 100%, 100% 100%);
  padding: 0 14px 0 8px;
}
[dir="rtl"] .dd-stage:last-child {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%, calc(100% - 12px) 50%);
  padding: 0 18px 0 8px;
}
[dir="rtl"] .dd-stage[data-move-stage]:hover {
  transform: translateX(-1px);
}

/* ── MD3 utilities (snackbar / confirm) ─────────────────────────────────── */

/* Snackbar action ordering — already centered, but flip the close button
   side to keep visual hierarchy (icon → message → close) reading R→L. */
[dir="rtl"] .snackbar {
  flex-direction: row-reverse;
}

/* Confirm dialog buttons — keep "Confirm" on the leading edge (right in RTL) */
[dir="rtl"] .dialog-overlay .dialog-actions {
  justify-content: flex-end;
  /* dir handles the natural reading order; no need to swap items manually */
}

/* Report-chart axis ticks — the tick is anchored by its inline-start edge
   (inset-inline-start, i.e. `right` here), so the centering nudge has to run
   the other way or every tick drifts off the left edge of the chart. */
[dir="rtl"] .rb-hbar__tick {
  transform: translateX(50%);
}