/* v3-ltr.css — English UI (feature 10): the language toggle, and the LTR mirror of every
   physical-direction rule in portal.css / the JS templates that breaks when <html dir="ltr">.
   Everything is scoped under html[dir="ltr"] (set by v3-i18n.js), so the Arabic base is untouched. */

/* ── language toggle «EN | ع» ─────────────────────────────────────────── */
.v3-lang{display:inline-flex;align-items:center;flex:none;height:34px;padding:3px;gap:2px;border-radius:10px;
  background:#fff;border:1.5px solid var(--line,#E6EAF0);direction:ltr}
.v3-lang button{min-width:32px;height:26px;padding:0 7px;border:none;border-radius:7px;background:none;cursor:pointer;
  font-family:'Cairo',sans-serif;font-weight:800;font-size:12.5px;line-height:1;color:var(--muted,#6b7689)}
.v3-lang button[data-lang="ar"]{font-size:14px}
.v3-lang button:hover{color:var(--navy,#012a73)}
html:not(.v3-en) .v3-lang button[data-lang="ar"],
html.v3-en .v3-lang button[data-lang="en"]{background:var(--navy,#012a73);color:#fff}
.v3-lang button:focus-visible{outline:2px solid var(--blue,#2B6CB0);outline-offset:1px}
.home-top .home-actions .v3-lang{align-self:center}
/* in the navy app topbar: translucent like the wallet / bell buttons, pushes them to the far side */
.topbar .v3-lang{background:rgba(255,255,255,.13);border-color:transparent;margin-right:auto}
html[dir="ltr"] .topbar .v3-lang{margin-right:0;margin-left:auto}
.topbar .v3-lang button{color:#cfe0ff}
html:not(.v3-en) .topbar .v3-lang button[data-lang="ar"],
html.v3-en .topbar .v3-lang button[data-lang="en"]{background:#fff;color:var(--navy,#012a73)}
.topbar .v3-lang + .wallet{margin-left:0;margin-right:0}
@media (max-width:767px){
  /* phone: the action row is full width, so the toggle sits in the empty corner next to the logo */
  .home-top .home-actions .v3-lang{position:absolute;top:12px;left:12px;height:34px}
  html[dir="ltr"] .home-top .home-actions .v3-lang{left:auto;right:12px}
  .topbar .v3-lang{height:32px}
  .topbar .v3-lang button{min-width:28px;padding:0 5px}
}
@media print{.v3-lang{display:none!important}}
/* first paint with a saved English choice: hidden until v3-i18n.js has translated the page */
html.v3-i18n-pending body{visibility:hidden}

/* ── LTR mirror ───────────────────────────────────────────────────────── */
html[dir="ltr"] body{direction:ltr}

/* sidebar: left in LTR (the base puts it on the right in RTL) */
html[dir="ltr"] .layout{flex-direction:row}
html[dir="ltr"] .sidebar{border-left:none;border-right:1px solid var(--line)}
html[dir="ltr"] .nav-item{text-align:left}
@media (max-width:767px){
  html[dir="ltr"] .layout .sidebar{right:auto;left:0;box-shadow:8px 0 30px rgba(0,0,0,.2)}
}

/* topbar: wallet + bell go to the far (right) side */
html[dir="ltr"] .bell,
html[dir="ltr"] .wallet{margin-right:0;margin-left:auto}
html[dir="ltr"] .topbar .bell{margin-left:0}
html[dir="ltr"] .topbar .v3-lang + .wallet{margin-left:0}
html[dir="ltr"] .bell-dot,
html[dir="ltr"] .wallet-dot{left:auto;right:-4px}
/* wallet / notification panels hang under their buttons (right side in LTR) */
html[dir="ltr"] .wal-panel,
html[dir="ltr"] .notif-panel{left:auto;right:14px}
@media (max-width:767px){html[dir="ltr"] .notif-panel{left:8px;right:8px}}
html[dir="ltr"] .notif-item.ni-alert{border-right:none;border-left:3px solid #dc2626}

/* search boxes: icon on the left, text after it */
html[dir="ltr"] .search svg{right:auto;left:14px}
html[dir="ltr"] .search .input{padding-right:14px;padding-left:42px}
html[dir="ltr"] .py-search svg{right:auto;left:12px}
html[dir="ltr"] .py-search input{padding:11px 12px 11px 38px}
html[dir="ltr"] select.input{background-position:right 14px center}

/* back arrows / chevrons drawn for RTL */
html[dir="ltr"] .dhero .back svg,
html[dir="ltr"] .py-arrow,
html[dir="ltr"] .lb .nav svg{display:inline-block;transform:scaleX(-1)}
html[dir="ltr"] .lb .prev{right:auto;left:14px}
html[dir="ltr"] .lb .next{left:auto;right:14px}
html[dir="ltr"] .lb .x{left:auto;right:16px}
html[dir="ltr"] .home-modal-close{left:auto;right:14px}
html[dir="ltr"] .srd-close{left:auto;right:12px}
html[dir="ltr"] .srd-nav.prev{right:auto;left:12px}
html[dir="ltr"] .srd-nav.next{left:auto;right:12px}
html[dir="ltr"] .srd-nav svg{transform:scaleX(-1)}

/* chips, counters, small badges */
html[dir="ltr"] .chip-n{margin-left:0;margin-right:3px}
html[dir="ltr"] .st-cat .ct{margin-right:0;margin-left:3px}
html[dir="ltr"] .pic-ico .n{left:auto;right:-5px}
html[dir="ltr"] .wal-dir{margin-right:0;margin-left:5px}

/* text alignment: labels start on the left, amounts end on the right */
html[dir="ltr"] .home-search,
html[dir="ltr"] .hs-field label{text-align:left}
html[dir="ltr"] .track-sec-t{text-align:left}
html[dir="ltr"] .trow .k{text-align:right}
html[dir="ltr"] .trow .v{text-align:left}
html[dir="ltr"] .trow .v.ltr{text-align:right}
html[dir="ltr"] .trow{flex-direction:row}
html[dir="ltr"] .info .row .v{text-align:right}
html[dir="ltr"] .lg-sum-r,
html[dir="ltr"] .lg-row-r,
html[dir="ltr"] .acar-meta,
html[dir="ltr"] .srd-row b{text-align:right}
html[dir="ltr"] .st-tbl th,
html[dir="ltr"] .st-tbl td,
html[dir="ltr"] .st-tbl .st-money{text-align:left}
html[dir="ltr"] .st-veh-info .vin,
html[dir="ltr"] .st-card-head .vin,
html[dir="ltr"] .ac-sub,
html[dir="ltr"] .ag-cust-phone,
html[dir="ltr"] .ag-note-carbox .nc-vin,
html[dir="ltr"] .car .mid .sub,
html[dir="ltr"] .dhero .dvin,
html[dir="ltr"] input[type="date"].input{text-align:left}
html[dir="ltr"] .ag-note-tbl td:first-child{text-align:left}
html[dir="ltr"] .phone-row .input{text-align:left}
@media (min-width:768px){
  html[dir="ltr"] .cars-table thead th{text-align:left}
  html[dir="ltr"] .cars-table .ltr{text-align:left}
}
/* inline styles in legacy templates */
html[dir="ltr"] #contList [style*="text-align:right"],
html[dir="ltr"] #tabContainers [style*="text-align:right"]{text-align:left!important}

/* status stripes on the start edge */
html[dir="ltr"] .pap-group{border-right:1px solid var(--line);border-left:4px solid #d1d5db}
html[dir="ltr"] .pap-group.waiting{border-left-color:#eab308}
html[dir="ltr"] .pap-group.ready{border-left-color:#65a30d}
html[dir="ltr"] .pap-group.delivered{border-left-color:#16a34a}
html[dir="ltr"] .dash-soon-row{border-right:none;border-left:3px solid var(--blue)}

/* shipment timeline: steps run left → right, the connector goes to the next step on the right */
html[dir="ltr"] .tl .st::before{right:auto;left:50%}

/* showroom card corners */
html[dir="ltr"] .sr-sold,
html[dir="ltr"] .sr-badge{right:auto;left:11px}
html[dir="ltr"] .sr-count{left:auto;right:11px}
html[dir="ltr"] .sr-views{right:auto;left:11px}
@media (max-width:640px){
  html[dir="ltr"] .sr-badge{left:8px;right:auto}
  html[dir="ltr"] .sr-count{right:8px;left:auto}
  html[dir="ltr"] .sr-views{left:8px;right:auto}
}
html[dir="ltr"] .srd-main .sr-badge{right:auto;left:14px}
html[dir="ltr"] .srd-counter{left:auto;right:12px}
html[dir="ltr"] .srd-main .wm-logo{right:auto;left:12px}

/* print sheets (spHead/spFoot build inline RTL markup) */
html[dir="ltr"] #payPrintWrap > div{direction:ltr!important}
html[dir="ltr"] #payPrintWrap [style*="text-align:left"]{text-align:right!important}
html[dir="ltr"] #payPrintWrap [style*="direction:rtl"]{direction:ltr!important}
html[dir="ltr"] #payPrintWrap td,html[dir="ltr"] #payPrintWrap th{text-align:left}

/* English copy is longer than the Arabic in a few fixed-width spots */
html.v3-en .nav-item .lbl{white-space:nowrap}
html.v3-en .topbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:767px){html.v3-en .home-top .home-actions .home-btn{font-size:12px;padding:0 4px;gap:4px}}

/* support panel (admin/index.html, dark theme) */
.v3-lang-support{float:left;margin-top:-2px;background:var(--card,#1a2129);border-color:var(--line,#2a3441)}
.v3-lang-support button{color:var(--muted,#8b949e)}
html[dir="ltr"] .v3-lang-support{float:right}
html:not(.v3-en) .v3-lang-support button[data-lang="ar"],
html.v3-en .v3-lang-support button[data-lang="en"]{background:var(--accent,#1f6feb);color:#fff}
/* v3: round 2 — direction:ltr fields in the v3 modules keep their visual side in English */
html[dir="ltr"] #v3sDate,html[dir="ltr"] #v3sAmt,html[dir="ltr"] .v3s-vin{text-align:left}