/* ============================================================
   MASAR SCADA — rtl.css
   Arabic layout.

   The shell is a CSS grid, and grid areas follow the inline axis, so
   `dir="rtl"` moves the sidebar to the right on its own. What does NOT
   mirror is anything positioned with a physical `left` or `right`:
   the map HUD panels, the inspector, the drawers, the toasts. Those
   are flipped explicitly below.

   Three things deliberately do NOT flip:

   · THE MAP. Geography has no reading direction. Leaflet's panes,
     the tiles and the vehicle marks stay exactly as they are; only
     the panels floating над them move.
   · IDENTIFIERS AND NUMBERS. MSR-101, WB-090049, 25.3 °C, 08:30.
     Bidi reordering would put a minus sign or a colon on the wrong
     end of a reading, so every monospace run is isolated as LTR.
   · PROGRESS AND GAUGE FILLS. A bar that grows left-to-right is
     reporting a measurement, not text.
   ============================================================ */

:root{
  /* IBM Plex Sans Arabic carries Latin too, so one stack serves both
     scripts and the page does not change metrics when it switches.
     Tahoma is the Windows fallback when the webfont cannot load. */
  --f-ar:'IBM Plex Sans Arabic','Segoe UI',Tahoma,'Noto Sans Arabic',
         'Geeza Pro','Arial',sans-serif;
}

html[dir="rtl"] body{font-family:var(--f-ar);letter-spacing:0}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] .side-name b{letter-spacing:0}

/* ---- identifiers stay left-to-right inside Arabic text ---- */
html[dir="rtl"] .mono,html[dir="rtl"] .id,html[dir="rtl"] .tag,
html[dir="rtl"] .al-sev,html[dir="rtl"] .al-time,html[dir="rtl"] .al-src,
html[dir="rtl"] .tq-sla,html[dir="rtl"] .tq-id,html[dir="rtl"] .tq-veh,
html[dir="rtl"] .k-v,html[dir="rtl"] .s-n,html[dir="rtl"] .wv-r,
html[dir="rtl"] .wi-r,html[dir="rtl"] .docket .dw b,html[dir="rtl"] .cd-n,
html[dir="rtl"] .wm-c b,html[dir="rtl"] .wq-sla,html[dir="rtl"] .wq-prog em,
html[dir="rtl"] .sp-clk,html[dir="rtl"] .ins-tel,html[dir="rtl"] .sf-net,
html[dir="rtl"] .veh .lbl,html[dir="rtl"] .ig,html[dir="rtl"] .spd{
  direction:ltr;unicode-bidi:isolate}
/* a whole table cell of figures reads as a column, so isolate and
   keep it on the side the column header sits on */
html[dir="rtl"] td.r,html[dir="rtl"] th.r{text-align:left}

/* MIXED RUNS.
   Short metadata lines are the hard case: "3 zones", "9,227 h run ·
   23 h to go", "Bay 2 · A. Haddad". Left to the paragraph direction
   the bidi algorithm moves the number to the far end and the line
   reads back to front. `plaintext` makes each element take its
   direction from its own first strong character, so an English or
   numeric run stays English and an Arabic one stays Arabic — without
   having to know in advance which it will be. */
html[dir="rtl"] .cb,
html[dir="rtl"] .sd-r span,html[dir="rtl"] .sd-r b,
html[dir="rtl"] .pl-free span,html[dir="rtl"] .pl-free b,
html[dir="rtl"] .ins-vrow span,html[dir="rtl"] .ins-tk span,
html[dir="rtl"] .wo-x span,html[dir="rtl"] .wq-r,
html[dir="rtl"] .wl-cert,html[dir="rtl"] .wl-x span,html[dir="rtl"] .wl-x b,
html[dir="rtl"] .al-x i,html[dir="rtl"] .al-src,
html[dir="rtl"] .tq-x i,html[dir="rtl"] .vr-2,html[dir="rtl"] .k-d,
html[dir="rtl"] .feed-i .f-x,html[dir="rtl"] .tl-i,
html[dir="rtl"] .sub,html[dir="rtl"] .tiny,
html[dir="rtl"] .kpi .k-v,html[dir="rtl"] .s-l,
html[dir="rtl"] .lg-foot,html[dir="rtl"] .ins-log{unicode-bidi:plaintext}

/* ---- the map keeps its own orientation ---- */
html[dir="rtl"] .leaflet-container,
html[dir="rtl"] .maproot{direction:ltr}
html[dir="rtl"] .mhover,html[dir="rtl"] .mpin,
html[dir="rtl"] .map-banner{direction:rtl}

/* ---- map HUD: mirror the floating panels ---- */
html[dir="rtl"] .hud-left{left:auto;right:14px}
html[dir="rtl"] .hud-right{right:auto;left:14px}
html[dir="rtl"] .hud-tools{right:auto;left:346px}
html[dir="rtl"] .hud-tools.wide{left:14px}
html[dir="rtl"] body.has-inspector .hud-tools{right:auto;left:396px}
html[dir="rtl"] #foldLeft{right:auto;left:-26px}
html[dir="rtl"] #foldRight{left:auto;right:-26px}
html[dir="rtl"] .hud-left.folded{transform:translateX(calc(100% + 18px))}
html[dir="rtl"] .hud-right.folded{transform:translateX(calc(-100% - 18px))}
html[dir="rtl"] .hud-left.folded #foldLeft{right:auto;left:calc(-100% - 44px)}
html[dir="rtl"] .hud-right.folded #foldRight{left:auto;right:calc(-100% - 44px)}
html[dir="rtl"] .leaflet-bottom.leaflet-left{left:auto;right:312px}
@media(max-width:1100px){ html[dir="rtl"] .leaflet-bottom.leaflet-left{right:14px} }

/* ---- panels and overlays ---- */
html[dir="rtl"] .inspector{right:auto;left:12px}
/* the drawer parks off the LEFT edge in Arabic — mirroring `left:0`
   without mirroring the transform slid it into view instead of out */
html[dir="rtl"] .drawer{right:auto;left:0;transform:translateX(-102%)}
html[dir="rtl"] .drawer.on{transform:none}
/* on a phone the sidebar is itself a drawer, and it parks off the
   right edge in Arabic. Desktop must not be caught by this, or the
   whole sidebar slides off the screen. */
@media(max-width:1024px){
  html[dir="rtl"] .side{left:auto;right:0;transform:translateX(102%)}
  html[dir="rtl"] body.mopen .side{transform:none}
}
html[dir="rtl"] .chatfab{right:auto;left:22px}
html[dir="rtl"] .chatdock{right:auto;left:22px}
html[dir="rtl"] .toasts{right:auto;left:22px;align-items:flex-start}
html[dir="rtl"] body.has-inspector .chatfab{left:404px;right:auto}
html[dir="rtl"] body.has-inspector .chatdock{left:404px;right:auto}
html[dir="rtl"] body.has-inspector .toasts{left:404px;right:auto}
html[dir="rtl"] .side{border-right:0;border-left:1px solid var(--line)}

html[dir="rtl"] .ts-ic{left:auto;right:11px}
html[dir="rtl"] .top-search input{padding-left:14px;padding-right:34px}

/* ---- rails and edge accents ---- */
html[dir="rtl"] .al-row::before,html[dir="rtl"] .tq-row::before,
html[dir="rtl"] .pl-row::before,html[dir="rtl"] .maptools button.on::before,
html[dir="rtl"] .veh-ic::before{left:auto;right:0;border-radius:3px 0 0 3px}
html[dir="rtl"] .note{border-left:0;border-right:3px solid var(--line-2)}
html[dir="rtl"] .note.warn{border-right-color:var(--warn)}
html[dir="rtl"] .note.bad{border-right-color:var(--bad)}
html[dir="rtl"] .veh .badge{right:auto;left:0}

/* ---- measurements do not mirror ---- */
html[dir="rtl"] .bar,html[dir="rtl"] .pl-bar,html[dir="rtl"] .meter,
html[dir="rtl"] .vr-bar,html[dir="rtl"] .ins-bars,
html[dir="rtl"] .hbar,html[dir="rtl"] .k-spark{direction:ltr}
html[dir="rtl"] .meter .m-t{direction:rtl}

/* ---- chevrons point the other way ---- */
html[dir="rtl"] .side-collapse svg,
html[dir="rtl"] .hud-fold,
html[dir="rtl"] #schPrev svg,html[dir="rtl"] #schNext svg{transform:scaleX(-1)}

/* ---- the language button ---- */
.lang-btn{font-weight:700;font-size:12.5px;letter-spacing:.3px}
html[dir="rtl"] .lang-btn{font-family:var(--f)}

/* ---- the calendar keeps Sunday first in both directions; only the
        cell contents flow right-to-left ---- */
html[dir="rtl"] .cal-h,html[dir="rtl"] .cal-g{direction:rtl}
html[dir="rtl"] .cd:nth-child(7n){border-right:1px solid var(--line)}
html[dir="rtl"] .cd:nth-child(7n+1){border-right:0}

/* ---- login artwork ---- */
html[dir="rtl"] #login{direction:rtl}
html[dir="rtl"] .lg-art{order:2}
html[dir="rtl"] .lg-form{order:1}

/* ---- v4: filter panel mirrors to the right edge ---- */
html[dir="rtl"] .fp-wrap{left:auto;right:12px;flex-direction:row-reverse}
html[dir="rtl"] .fp-tab-n{right:auto;left:-5px}
html[dir="rtl"] .fltbar{left:360px;right:62px}
html[dir="rtl"] .fbchip{padding:0 9px 0 5px}
html[dir="rtl"] .fp-range label>b{text-align:left}
html[dir="rtl"] .mr-b{right:auto;left:-3px}
html[dir="rtl"] .fp-wrap{left:auto;right:318px}
html[dir="rtl"] .maproot.lfold .fp-wrap{left:auto;right:56px}
@media (max-width:1024px){ html[dir="rtl"] .fp-wrap{right:14px;left:auto} }
html[dir="rtl"] .conmenu{left:auto;right:0}
html[dir="rtl"] .cm-row{text-align:right}
html[dir="rtl"] .sb-of{margin-right:0;margin-left:2px}
html[dir="rtl"] .mms-c{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .mms-c:last-child{border-left:0}
html[dir="rtl"] .svr.on{box-shadow:inset -3px 0 0 var(--b600)}
html[dir="rtl"] .svd-sla .right{text-align:left}
html[dir="rtl"] .sv-c-act{text-align:left}
html[dir="rtl"] .asg-d,html[dir="rtl"] .cw-t{text-align:left}
html[dir="rtl"] .cd-hero i{margin-left:0;margin-right:auto}
html[dir="rtl"] .cd-hero{border-left:0;border-right:4px solid var(--g)}
html[dir="rtl"] .svd-stars b{margin-left:0;margin-right:6px}
html[dir="rtl"] .cm-le-o{text-align:left}
html[dir="rtl"] .mrow input:checked + .sw::after{transform:translateX(-14px)}
html[dir="rtl"] .lcard.on .lc-sw .sw::after{transform:translateX(-14px)}
html[dir="rtl"] .mapkey-btn,html[dir="rtl"] .mapkey{left:auto;right:12px}
html[dir="rtl"] .maproot .leaflet-bottom.leaflet-left{right:auto;left:12px}
html[dir="rtl"] .mapkey-btn,html[dir="rtl"] .mapkey{left:auto;right:358px}
html[dir="rtl"] .maproot.lfold .mapkey-btn,html[dir="rtl"] .maproot.lfold .mapkey{right:96px}
html[dir="rtl"] .maproot .leaflet-bottom.leaflet-left{left:auto;right:310px}
html[dir="rtl"] .maproot.lfold .leaflet-bottom.leaflet-left{right:48px}
/* ---- v4.1: service gallery and workspace ---- */
html[dir="rtl"] .gcard::before{inset:0 0 0 auto}
html[dir="rtl"] .gcard::after{right:auto;left:-40px}
html[dir="rtl"] .gc-go{right:auto;left:13px;transform:translateX(4px) scaleX(-1)}
html[dir="rtl"] .gcard:hover .gc-go{transform:translateX(0) scaleX(-1)}
html[dir="rtl"] .wshead{border-left:1px solid var(--line);border-right:4px solid var(--c)}
html[dir="rtl"] .ws-back svg{transform:scaleX(-1)}
html[dir="rtl"] .ws-nums>span{text-align:left}
html[dir="rtl"] .ops-r.on{box-shadow:inset -3px 0 0 var(--b600)}
html[dir="rtl"] .dz-n{text-align:left}
html[dir="rtl"] .or-x b em,html[dir="rtl"] .dvu-x b em{margin-left:0;margin-right:5px}
html[dir="rtl"] .svsel{text-align:right}
html[dir="rtl"] .svs-n{text-align:left}