/* ==========================================================================
   RTL — Arabic
   Most mirroring is handled by CSS logical properties (inset-inline-*,
   padding-inline-*, margin-inline-*, text-align: start/end). This file only
   covers what logical properties cannot express.
   ========================================================================== */

html[dir="rtl"] body { letter-spacing: 0; }

/* Arabic needs a touch more line height at small sizes */
html[dir="rtl"] { --lh-body: 1.6; }
html[dir="rtl"] .kpi-label,
html[dir="rtl"] .meta-k,
html[dir="rtl"] .field-label,
html[dir="rtl"] .dt thead th,
html[dir="rtl"] .menu-head {
  letter-spacing: 0; /* tracking on Arabic caps looks broken */
  text-transform: none;
}

/* Numbers, codes and currency read left-to-right even inside Arabic text.
   Leaf elements get direction:ltr directly. */
html[dir="rtl"] .num,
html[dir="rtl"] .mc-value,
html[dir="rtl"] .mc-v,
html[dir="rtl"] .dt .num,
html[dir="rtl"] .ltr {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .dt .num,
html[dir="rtl"] th.num { text-align: left; }

/* .kpi-value is a full-width flex CONTAINER. Giving the container direction:ltr
   would push the figure to the card's left edge while its label sits on the
   right. The container therefore stays RTL — so the figure starts at the right
   edge like everything else — and only the numeric text inside is isolated. */
html[dir="rtl"] .kpi-value {
  direction: rtl;
  justify-content: flex-start;
}
html[dir="rtl"] .kpi-value > span {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Icon glyphs that encode direction must flip */
html[dir="rtl"] .flip-x { transform: scaleX(-1); }

/* Trend arrows are vertical — they must NOT flip */
html[dir="rtl"] .trend svg { transform: none; }

/* Breadcrumb separator */
html[dir="rtl"] .topbar-crumbs .sep { transform: scaleX(-1); display: inline-block; }

/* Sort indicator / expander carets */
html[dir="rtl"] .dt-expand { transform: scaleX(-1); }

/* Tables keep their column order (first column = first in reading order) —
   the browser handles this; we only ensure horizontal scroll starts correctly. */
html[dir="rtl"] .table-wrap { direction: rtl; }
html[dir="rtl"] .table-wrap .dt { direction: rtl; }

/* Meter fills from the start edge in both directions */
html[dir="rtl"] .meter { transform: scaleX(-1); }
html[dir="rtl"] .meter-fill { transform: scaleX(1); }

/* Select caret position handled in components.css via [dir] selector */

/* Toast / menus anchor correctly via logical props; nothing extra needed. */