/* =========================================================================
   RTL · Bidirectional support
   Prefer logical properties; this file handles non-logical cases.
   ========================================================================= */

/* ── Typography ─────────────────────────────────────────────────────────── */
[dir="rtl"] body { font-family: var(--font-ar); }
[dir="ltr"] body { font-family: var(--font-en); }

/* Arabic body needs slightly more line height for comfort */
[dir="rtl"] p, [dir="rtl"] .text-secondary, [dir="rtl"] .text-muted {
  line-height: var(--lh-arabic);
}

/* ── Icons that point directionally ─────────────────────────────────────── */
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
[dir="rtl"] .app-shell__sidebar {
  border-inline-start: 0;
  border-inline-end: 1px solid var(--sidebar-border);
}
[dir="ltr"] .app-shell__sidebar { border-inline-end: 1px solid var(--sidebar-border); }
[dir="rtl"] .sidebar__indicator { left: auto; right: 0; }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
[dir="rtl"] .breadcrumb__separator { transform: scaleX(-1); }

/* ── Drawers slide from trailing edge ───────────────────────────────────── */
[dir="ltr"] .drawer { right: 0; left: auto; transform: translateX(100%); }
[dir="rtl"] .drawer { left: 0; right: auto; transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0); }

/* ── Input prefix/suffix swap ───────────────────────────────────────────── */
[dir="rtl"] .field__prefix { order: 2; }
[dir="rtl"] .field__suffix { order: 0; }

/* ── Tables — align headers and numbers ─────────────────────────────────── */
/* Text columns: align to the start (right in RTL) */
[dir="rtl"] table th,
[dir="rtl"] table td { text-align: right; }

/* Numeric / mono columns always LTR regardless of direction */
[dir="rtl"] .text-mono,
[dir="rtl"] td.text-mono,
[dir="rtl"] th.text-mono { direction: ltr; text-align: left; unicode-bidi: embed; }

/* Table action column: pin to end */
[dir="rtl"] .table-actions { text-align: left; }
[dir="ltr"] .table-actions { text-align: right; }

/* ── KPI / Stat cards — number alignment ────────────────────────────────── */
/* Values (large numbers) stay LTR for readability */
[dir="rtl"] .kpi-card__value,
[dir="rtl"] .stat-value,
[dir="rtl"] .wb-kpi__value { direction: ltr; display: inline-block; }

/* KPI labels align to the start */
[dir="rtl"] .kpi-card__label,
[dir="rtl"] .stat-label,
[dir="rtl"] .wb-kpi__label { text-align: right; }

/* ── Badges — position adjustments ─────────────────────────────────────── */
/* Notification badge on icon: flip side */
[dir="rtl"] .icon-badge { left: auto; right: -4px; }
[dir="ltr"] .icon-badge { right: auto; left: -4px; }

/* ── Control panel / search ─────────────────────────────────────────────── */
[dir="rtl"] .search-box .icon--search {
  left: auto;
  right: var(--space-3);
}
[dir="rtl"] .search-box input {
  padding-inline-end: var(--space-9);
  padding-inline-start: var(--space-3);
}

/* ── Dropdown menus ──────────────────────────────────────────────────────── */
[dir="rtl"] .dropdown__menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir="ltr"] .dropdown__menu { right: auto; left: 0; }

/* ── Toast / notification position ─────────────────────────────────────── */
[dir="rtl"] .toast-stack { left: var(--space-5); right: auto; }
[dir="ltr"] .toast-stack { right: var(--space-5); left: auto; }

/* ── Modal close button ─────────────────────────────────────────────────── */
[dir="rtl"] .modal__close { left: var(--space-4); right: auto; }
[dir="ltr"] .modal__close { right: var(--space-4); left: auto; }

/* ── Phone/extension numbers always LTR ─────────────────────────────────── */
[dir="rtl"] .phone-number,
[dir="rtl"] [class*="extension"],
[dir="rtl"] [data-phone] { direction: ltr; unicode-bidi: embed; }

/* ── Live call timers always LTR ─────────────────────────────────────────── */
[dir="rtl"] .live-timer { direction: ltr; display: inline-block; }

/* ── Cluster / flex row layout ───────────────────────────────────────────── */
/* Clusters with start-aligned content should respect dir */
[dir="rtl"] .cluster { flex-direction: row-reverse; }
/* Except when explicitly marked as ltr-only */
[dir="rtl"] .cluster--ltr { flex-direction: row; }

/* ── Supervisor / action buttons row ────────────────────────────────────── */
[dir="rtl"] .supervisor-controls { flex-direction: row-reverse; }

/* ── Scrollbar (cosmetic, Chromium only) ───────────────────────────────── */
[dir="rtl"] ::-webkit-scrollbar { width: 6px; }
[dir="rtl"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; }

/* ── Chart labels / axis numbers always LTR ─────────────────────────────── */
[dir="rtl"] .chart-container canvas { direction: ltr; }
[dir="rtl"] .chart-label, [dir="rtl"] .chart-tick { direction: ltr; }