/**
 * RTL-only patches.
 *
 * app.css uses logical properties (margin-inline-*, inset-inline-*,
 * border-inline-*, text-align: start, etc.) everywhere it can, so most
 * of the layout already mirrors correctly under [dir="rtl"] with zero
 * extra CSS. This file only holds the handful of things logical
 * properties cannot express: mirroring directional glyphs/icons and a
 * couple of transform-based effects.
 */

/* Directional chevrons (next/prev, accordions, breadcrumbs) point the
   opposite way in RTL. */
[dir="rtl"] .icon-chevron,
[dir="rtl"] .care-journey__connector-icon,
[dir="rtl"] .site-header__toggle svg {
    transform: scaleX(-1);
}

/* Bootstrap's own directional icons (carousel arrows, dropdown carets
   drawn via background-image) already ship an .rtl.min.css variant,
   which we load instead of bootstrap.min.css when dir=rtl — nothing
   extra needed here for those.
   Sparkline/mini-chart SVGs are direction-agnostic data, so they are
   intentionally NOT flipped. */

/* Care-journey connectors are positioned with inset-inline-start, so
   they already draw from the correct edge under RTL without extra
   rules; only the arrowed variant (if used) needs mirroring here. */
[dir="rtl"] .care-journey__stage svg.is-directional {
    transform: scaleX(-1);
}

/* Slide-over (Clinical Command Center Pass 2: Patient Summary): the
   panel is positioned with inset-inline-end (already correct under
   RTL — it sits at the visual LEFT edge), but its closed/open
   transform is a physical translateX(), which logical properties
   cannot express. Mirror it here so it slides in from the same edge
   it's docked to instead of flying in from the wrong side. */
[dir="rtl"] .slideover__panel {
    transform: translateX(-100%);
}
[dir="rtl"] .slideover.is-open .slideover__panel {
    transform: translateX(0);
}