/* ============================================================
   Bidirectional layer — RTL (ar, default) / LTR (en)
   Set dir + lang on <html> server-side from the request culture.
   Components use logical properties, so this file only handles
   what logical properties cannot express.
   ============================================================ */

html[dir="rtl"]{ --rule-direction:to left;  }
html[dir="ltr"]{ --rule-direction:to right; }

/* Script-specific rhythm — Arabic needs more leading than Latin */
html[lang="ar"] body{ line-height:1.7;  font-family:var(--font-sans) }
html[lang="en"] body{ line-height:1.55; font-family:var(--font-sans) }

/* Numbers stay Latin and tabular in BOTH languages — never localise digits */
.num,.tabular,.kpi__value,.stat__value,.stepper__value,.table td{
  font-variant-numeric:tabular-nums;
  -moz-font-feature-settings:"tnum";
  unicode-bidi:plaintext;
}

/* Times, durations and bed/room identifiers embedded in Arabic text
   must not reorder — isolate them. */
.ltr-inline{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* Directional icons are SWAPPED by the icon helper, not mirrored.
   Mirroring with scaleX breaks Lucide's round stroke terminals. */
.icon--directional{transform:none!important}

/* Charts: Chart.js needs explicit RTL hints; set in chart-factory.js
   (options.plugins.legend.rtl = true, textDirection = 'rtl').
   This keeps the canvas container from inheriting a flipped transform. */
.chart-box{direction:ltr}
html[dir="rtl"] .chart-box .chart-caption{direction:rtl;text-align:right}

/* Language switcher */
.lang-switch{display:inline-flex;border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-pill);overflow:hidden}
.lang-switch__btn{padding:4px 12px;font-size:var(--text-2xs);background:transparent;border:0;cursor:pointer;
  color:var(--text-muted);transition:var(--transition-control)}
.lang-switch__btn.is-active{background:var(--navy-700);color:var(--text-on-brand)}

/* Mobile bottom navigation mirrors automatically via flex + logical props;
   only the safe-area inset needs a physical value. */
.bottom-nav{position:fixed;inset-inline:0;inset-block-end:0;display:flex;
  background:var(--surface-card);border-block-start:var(--border-hairline) solid var(--border-subtle);
  padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav__item{flex:1;min-height:44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;font-size:10px;color:var(--text-muted);background:transparent;border:0}
.bottom-nav__item.is-active{color:var(--navy-700)}

/* Print (annual statistics / census reports) */
@media print{
  .bottom-nav,.toast,.btn,.lang-switch{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border-color:var(--neutral-200);break-inside:avoid}
  @page{margin:18mm}
}