/* Direction toggle (no design/layout changes). */

/* 1) Base: respect the document direction */
html[dir="rtl"] { direction: rtl; }
html[dir="ltr"] { direction: ltr; }

/* 2) Typography alignment follows the logical start/end, not hard left/right */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  text-align: start;
}
html[dir="ltr"] body,
html[dir="ltr"] body * {
  text-align: start;
}

/* 3) Inputs and controls inherit direction for caret and selection behavior */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  direction: inherit;
  unicode-bidi: plaintext;
}
html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select,
html[dir="ltr"] button {
  direction: inherit;
  unicode-bidi: plaintext;
}

/* 4) Tables: keep numbers aligned logically; avoid forced left/right */
html[dir="rtl"] table, html[dir="rtl"] th, html[dir="rtl"] td,
html[dir="ltr"] table, html[dir="ltr"] th, html[dir="ltr"] td {
  text-align: start;
}

/* 5) Prevent third-party components from forcing LTR/RTL incorrectly */
[dir="rtl"] .force-ltr { direction: ltr !important; }
[dir="ltr"] .force-rtl { direction: rtl !important; }

/* 6) If your UI had absolute left/right paddings/margins, prefer logical props in future.
   We do NOT change any spacing here to preserve design 100%. */