/* ==========================================================================
   MASAR — 8-rtl.css
   Almost everything mirrors on its own, because the layout is written in
   logical properties. This file is only for the three kinds of thing that
   cannot: physical transforms, things that must NOT mirror, and the
   direction of reading inside a mixed-script run.
   ========================================================================== */

/* ---- 1. What must NOT mirror ------------------------------------------
   The map is a picture of the world; north stays up and east stays right.
   Identifiers, plates, coordinates, weights and clock times are LTR runs.
   A progress fill grows in the direction of the quantity, not the script. */
html[dir="rtl"] .leaflet-container,
html[dir="rtl"] .m-map-host{direction:ltr}
html[dir="rtl"] .m-map-hud,
html[dir="rtl"] .m-pop,
html[dir="rtl"] .m-hud{direction:rtl}
html[dir="rtl"] .m-bar,
html[dir="rtl"] .m-hbar__t,
html[dir="rtl"] .m-legend-scale,
html[dir="rtl"] .m-splash__bar,
html[dir="rtl"] .m-spark{direction:ltr}
html[dir="rtl"] .m-meter__t{direction:rtl}

/* ---- 2. Mixed runs take direction from their own first strong character */
html[dir="rtl"] .m-kpi__d span,
html[dir="rtl"] .m-activity__x span,
html[dir="rtl"] .m-ent__x span,
html[dir="rtl"] .m-card__title span,
html[dir="rtl"] .m-pop__id span,
html[dir="rtl"] .m-result__x span,
html[dir="rtl"] .m-empty span,
html[dir="rtl"] .m-timeline__i span,
html[dir="rtl"] .m-field__hint{unicode-bidi:plaintext}

/* ---- 3. Physical transforms -------------------------------------------- */
html[dir="rtl"] .m-tab[aria-selected="true"]::after{inset-inline:6px}
html[dir="rtl"] .m-veh__lbl,
html[dir="rtl"] .m-place__lbl{left:auto;right:50%;transform:translateX(50%)}
html[dir="rtl"] .m-chev{transform:scaleX(-1)}

/* Numbers stay Latin inside Arabic — an operator reading a plate or a
   tonnage must see the same glyphs in both languages. */
html[dir="rtl"] .m-table .num,
html[dir="rtl"] .m-kpi__v,
html[dir="rtl"] .m-hero-metric__v,
html[dir="rtl"] .m-donut__c b,
html[dir="rtl"] .m-ring__c b,
html[dir="rtl"] .m-hbar__v,
html[dir="rtl"] .m-pager__c b{direction:ltr;unicode-bidi:isolate}

/* Arabic needs a touch more line box than Latin at the same size. */
html[dir="rtl"] .m-table tbody td{line-height:1.6}
html[dir="rtl"] .m-nav-item,
html[dir="rtl"] .m-btn,
html[dir="rtl"] .m-chip,
html[dir="rtl"] .m-pill{line-height:1.7}
html[dir="rtl"] .m-label-up,
html[dir="rtl"] .m-nav__group,
html[dir="rtl"] .m-menu__t,
html[dir="rtl"] .m-result__k{letter-spacing:0;text-transform:none}

/* ======================================================================
   THE MAP DOES NOT MIRROR.
   Every other part of the console flips with the language, and should.
   The map is not a layout — it is a photograph of a country. The coast,
   the city and every cluster stay exactly where they are when the page
   turns around, so furniture that flips with the page lands somewhere
   the operator did not put it: the key ended up over Doha and Al Wakrah,
   the densest corner of Qatar and the one the eye goes to first, and the
   control column changed sides on a picture that had not moved. The map's
   own overlays therefore keep their physical corners in Arabic — the same
   choice the consumer map products make. Only their CONTENT is Arabic and
   right-to-left; their positions are not.
   ====================================================================== */
html[dir="rtl"] .m-hud--tl,
html[dir="rtl"] .m-hud--bl{inset-inline-start:auto;inset-inline-end:14px}
html[dir="rtl"] .m-hud--tr{inset-inline-end:auto;inset-inline-start:62px}
html[dir="rtl"] .m-hud--br{inset-inline-end:auto;inset-inline-start:14px}
html[dir="rtl"] .m-legend-strip{inset-inline-start:auto}
html[dir="rtl"] .m-map-ctl{
  inset-inline-end:auto;inset-inline-start:14px;align-items:flex-start;
}
html[dir="rtl"] .m-map-host.is-shortmap .m-map-ctl{inset-inline-end:auto;inset-inline-start:10px}
html[dir="rtl"] .m-map-host.is-tinymap  .m-map-ctl{inset-inline-end:auto;inset-inline-start:8px}
html[dir="rtl"] .m-mapcredit{inset-inline-end:auto;inset-inline-start:58px}
@media (max-width:900px){
  html[dir="rtl"] .m-hud--tr{inset-inline-end:auto;inset-inline-start:14px}
}