/* Espectro Operations Hub — right-to-left layout for the Arabic interface.
   Loaded after app.css only when a user has chosen Arabic. */
:root{
  --sans:"IBM Plex Sans Arabic","Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;
}
body{font-size:14.5px;line-height:1.6}
h1,h2,h3{letter-spacing:0}
/* Arabic letters must not be spaced or capitalised */
.card>h2,th,label,.navgroup,.brand-txt i,.who small,.stat .k,.kpi .k,.s-group,.flow-steps li,.chip{letter-spacing:0!important;text-transform:none!important}
.card>h2{font-size:14px}
th{font-size:12px}

/* numbers, codes and references stay left-to-right inside Arabic text */
.ref,.num,.money,.amt,.mono,kbd,td.dr,td.cr,.v,input[type=number],input[type=email],input.ref,
.sharelink input,.s-tag,[data-f=sku],[name=fx_rate],[name=number]{direction:ltr;unicode-bidi:isolate}
input[type=number],input.ref,[name=number]{text-align:right}
.v{text-align:right}

/* ---------- shell ---------- */
.skip{left:8px;right:auto;top:-999px}
.skip:focus{top:8px}

/* typed text follows its own language: English stays left-to-right, Arabic right-to-left */
input:not([type]),input[type=text],input[type=search],textarea,.pickrow select{unicode-bidi:plaintext;text-align:start}

/* arrows on buttons point the way the page reads */
.flow .arr{display:inline-block;transform:scaleX(-1)}
.searchbtn{text-align:right}
.rail nav a.on{box-shadow:inset -2px 0 0 var(--lime)}
.navgroup{text-align:right}
.navgroup .chev{margin:0 0 3px 4px}
.navgroup.shut .chev{transform:rotate(135deg)}
.langsw{margin:8px 14px 0 0}

/* ---------- tables and figures: amounts sit at the end of the line, which is the left in Arabic ---------- */
th{text-align:right}
.num,.money,td.right,th.right,.acctable td.dr,.acctable td.cr,.acctable th.dr,.acctable th.cr,
.lines .amt,.ms-row .amt{text-align:left}
.lines .amt{padding-right:6px;padding-left:10px}
.pick-list .s{margin-right:0;margin-left:6px}
.legend i{margin-right:0;margin-left:5px}
.stat.alert{border-left:0;border-right:3px solid var(--bad)}
.stat.due{border-left:0;border-right:3px solid var(--warn)}
.vatbox>div{border-right:0;border-left:1px solid var(--rule)}
.vatbox>div:last-child{border-left:0}
.s-item{border-left:0;border-right:3px solid transparent}
.s-item.on{border-right-color:var(--lime)}
.flow{border-left:1px solid var(--rule);border-right:4px solid var(--lime)}
.flow.good{border-right-color:var(--good)}
.flow.bad{border-right-color:var(--bad)}
.tip{margin:0 4px 0 0}
.tip::after{left:auto;right:-8px;text-align:right}
.checkdlg ul.ck{padding:0 18px 0 0}

/* wide-table edge fade points the other way */
.tablewrap.more-right{-webkit-mask-image:none;mask-image:none}
.tablewrap.more-left.more-right,.tablewrap.more-left:not(.more-right){-webkit-mask-image:none;mask-image:none}

/* inline pushes written for left-to-right */
[style*="margin-left:auto"]{margin-left:0!important;margin-right:auto!important}

/* charts and programmes are drawn left to right, like the printed versions */
.gantt,.gantt-wrap,svg{direction:ltr}

/* ---------- phone: the menu slides in from the right ---------- */
@media (max-width:760px){
  .rail{left:auto;right:0;transform:translateX(102%);box-shadow:-12px 0 40px rgba(0,0,0,.35)}
  body.menu-open .rail{transform:none}
}