/* ══════════════════════════════════════════════════════════════════════════ AminDMS · rtl.css — generated, do not hand-edit (see gen_rtl.py) Applied whenever , i.e. when the language is Arabic. Mirrors the physical-side styling the app was written with so the layout reads right-to-left properly rather than just the text. ══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] { text-align: right; } [dir="rtl"] body { direction: rtl; } /* Horizontal-direction multiplier. A transform is the one piece of styling that never follows `dir`, and the app sets several of them from JS or from an inline style attribute, where no rule in this file can reach them. Those sites multiply their offset by this instead of hardcoding a sign, so the toggle knob slides toward the same edge the text runs to. The `1` fallback at each call site means LTR still behaves correctly if this file is absent. */ :root { --amin-dir: 1; } [dir="rtl"] { --amin-dir: -1; } /* Arabic has no small-caps/letter-spacing tradition and the uppercase micro labels the app uses everywhere become unreadable, so they are normalised. */ [dir="rtl"] .uppercase, [dir="rtl"] [class*="tracking-"] { text-transform: none; letter-spacing: normal; } /* Latin-only faces have poor Arabic-script coverage — fall through to a system face while keeping Inter for any Latin runs (codes, amounts). Arabic and Persian share the script but NOT the preferred typeface: in an Arabic-first font the Persian ی / ک / گ / پ take their Arabic shapes, which a native reader immediately clocks as wrong. i18n.js puts .amin-lang- on , so each language gets its own stack. */ [dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button { font-family: "Inter", "Noto Naskh Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; } .amin-lang-fa body, .amin-lang-fa input, .amin-lang-fa textarea, .amin-lang-fa select, .amin-lang-fa button { font-family: "Inter", "Vazirmatn", "Sahel", "IRANSans", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; } /* Persian sets slightly looser than Arabic at the same size — the descenders in گ / ژ / چ collide with the next line at the app's default 1.2-1.25. */ .amin-lang-fa body { line-height: 1.7; } .amin-lang-fa h1, .amin-lang-fa h2, .amin-lang-fa h3 { line-height: 1.45; } /* Numbers, currency codes, SKUs and phone numbers stay left-to-right inside an RTL paragraph. Inline runs are ISOLATED: direction:ltr plus unicode-bidi:isolate keeps "INV-00042" from being reordered by the Arabic around it, and isolate stops it from reordering that Arabic in turn. Fields are a different problem and must NOT use direction:ltr. A logical property resolves against the ELEMENT'S OWN direction, so forcing ltr on an silently turns its padding-inline-start back into padding-LEFT — the gutter reserved for the currency prefix jumps to the wrong side and the number prints on top of the prefix. unicode-bidi:plaintext gets the same result the direction override was after (a leading minus stays on the left, "+968 …" is not scrambled) by picking the run direction from the content, while leaving the element's own direction rtl so its box still mirrors. */ [dir="rtl"] .amin-ltr, [dir="rtl"] [data-ltr] { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { unicode-bidi: plaintext; text-align: right; } /* Direction-aware gap for space-x-* / divide-x-*, which Tailwind implements with margin-left on the following sibling. */ [dir="rtl"] [class*="space-x-"] > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: calc(var(--tw-space-x-reverse, 0) * 0px + 0.25rem); } /* Chevrons and arrows point the other way. Anything that should NOT flip (a logo, a check mark) can opt out with .amin-no-flip. */ [dir="rtl"] svg[data-flip], [dir="rtl"] .amin-flip { transform: scaleX(-1); } [dir="rtl"] .amin-no-flip { transform: none !important; } /* ────────── physical Tailwind utilities → mirrored ────────── */ /* Emitted in two passes on purpose. The first vacates the physical side; the second re-applies the value on the mirrored side one class-level heavier. An element carrying a PAIR of opposite utilities — `pl-12 pr-4`, which is every field with a currency prefix or a leading icon — then keeps both halves, instead of one rule's reset cancelling the other's value. */ [dir="rtl"] .-right-1{right:auto} [dir="rtl"] .-right-1\.5{right:auto} [dir="rtl"] .border-l{border-left-width:0} [dir="rtl"] .border-l-2{border-left-width:0} [dir="rtl"] .border-r{border-right-width:0} [dir="rtl"] .left-0{left:auto} [dir="rtl"] .left-0\.5{left:auto} [dir="rtl"] .left-1{left:auto} [dir="rtl"] .left-2\.5{left:auto} [dir="rtl"] .left-3{left:auto} [dir="rtl"] .left-3\.5{left:auto} [dir="rtl"] .ml-1{margin-left:0} [dir="rtl"] .ml-1\.5{margin-left:0} [dir="rtl"] .ml-2{margin-left:0} [dir="rtl"] .ml-3{margin-left:0} [dir="rtl"] .ml-\[42px\]{margin-left:0} [dir="rtl"] .ml-auto{margin-left:0} [dir="rtl"] .mr-0\.5{margin-right:0} [dir="rtl"] .mr-1{margin-right:0} [dir="rtl"] .mr-1\.5{margin-right:0} [dir="rtl"] .mr-2{margin-right:0} [dir="rtl"] .pl-1{padding-left:0} [dir="rtl"] .pl-10{padding-left:0} [dir="rtl"] .pl-12{padding-left:0} [dir="rtl"] .pl-2{padding-left:0} [dir="rtl"] .pl-2\.5{padding-left:0} [dir="rtl"] .pl-4{padding-left:0} [dir="rtl"] .pl-7{padding-left:0} [dir="rtl"] .pl-8{padding-left:0} [dir="rtl"] .pl-9{padding-left:0} [dir="rtl"] .pr-1{padding-right:0} [dir="rtl"] .pr-10{padding-right:0} [dir="rtl"] .pr-11{padding-right:0} [dir="rtl"] .pr-2{padding-right:0} [dir="rtl"] .pr-20{padding-right:0} [dir="rtl"] .pr-24{padding-right:0} [dir="rtl"] .pr-3{padding-right:0} [dir="rtl"] .pr-4{padding-right:0} [dir="rtl"] .pr-8{padding-right:0} [dir="rtl"] .right-0{right:auto} [dir="rtl"] .right-1\.5{right:auto} [dir="rtl"] .right-2\.5{right:auto} [dir="rtl"] .right-3{right:auto} [dir="rtl"] .right-3\.5{right:auto} [dir="rtl"] .right-4{right:auto} [dir="rtl"] .right-5{right:auto} [dir="rtl"] .right-6{right:auto} [dir="rtl"] .sm\:right-5{right:auto} /* … and the mirrored values, one class-level heavier. */ [dir="rtl"] .-right-1.-right-1{left:-0.25rem} [dir="rtl"] .-right-1\.5.-right-1\.5{left:-0.375rem} [dir="rtl"] .-translate-x-1.-translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))} [dir="rtl"] .-translate-x-full.-translate-x-full{--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))} [dir="rtl"] .border-l.border-l{border-right-width:1px} [dir="rtl"] .border-l-2.border-l-2{border-right-width:2px} [dir="rtl"] .border-r.border-r{border-left-width:1px} [dir="rtl"] .left-0.left-0{right:0px} [dir="rtl"] .left-0\.5.left-0\.5{right:0.125rem} [dir="rtl"] .left-1.left-1{right:0.25rem} [dir="rtl"] .left-2\.5.left-2\.5{right:0.625rem} [dir="rtl"] .left-3.left-3{right:0.75rem} [dir="rtl"] .left-3\.5.left-3\.5{right:0.875rem} [dir="rtl"] .lg\:translate-x-0.lg\:translate-x-0{--tw-translate-x:-0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))} [dir="rtl"] .md\:text-right.md\:text-right{text-align:left} [dir="rtl"] .ml-1.ml-1{margin-right:0.25rem} [dir="rtl"] .ml-1\.5.ml-1\.5{margin-right:0.375rem} [dir="rtl"] .ml-2.ml-2{margin-right:0.5rem} [dir="rtl"] .ml-3.ml-3{margin-right:0.75rem} [dir="rtl"] .ml-\[42px\].ml-\[42px\]{margin-right:42px} [dir="rtl"] .ml-auto.ml-auto{margin-right:auto} [dir="rtl"] .mr-0\.5.mr-0\.5{margin-left:0.125rem} [dir="rtl"] .mr-1.mr-1{margin-left:0.25rem} [dir="rtl"] .mr-1\.5.mr-1\.5{margin-left:0.375rem} [dir="rtl"] .mr-2.mr-2{margin-left:0.5rem} [dir="rtl"] .pl-1.pl-1{padding-right:0.25rem} [dir="rtl"] .pl-10.pl-10{padding-right:2.5rem} [dir="rtl"] .pl-12.pl-12{padding-right:3rem} [dir="rtl"] .pl-2.pl-2{padding-right:0.5rem} [dir="rtl"] .pl-2\.5.pl-2\.5{padding-right:0.625rem} [dir="rtl"] .pl-4.pl-4{padding-right:1rem} [dir="rtl"] .pl-7.pl-7{padding-right:1.75rem} [dir="rtl"] .pl-8.pl-8{padding-right:2rem} [dir="rtl"] .pl-9.pl-9{padding-right:2.25rem} [dir="rtl"] .pr-1.pr-1{padding-left:0.25rem} [dir="rtl"] .pr-10.pr-10{padding-left:2.5rem} [dir="rtl"] .pr-11.pr-11{padding-left:2.75rem} [dir="rtl"] .pr-2.pr-2{padding-left:0.5rem} [dir="rtl"] .pr-20.pr-20{padding-left:5rem} [dir="rtl"] .pr-24.pr-24{padding-left:6rem} [dir="rtl"] .pr-3.pr-3{padding-left:0.75rem} [dir="rtl"] .pr-4.pr-4{padding-left:1rem} [dir="rtl"] .pr-8.pr-8{padding-left:2rem} [dir="rtl"] .right-0.right-0{left:0px} [dir="rtl"] .right-1\.5.right-1\.5{left:0.375rem} [dir="rtl"] .right-2\.5.right-2\.5{left:0.625rem} [dir="rtl"] .right-3.right-3{left:0.75rem} [dir="rtl"] .right-3\.5.right-3\.5{left:0.875rem} [dir="rtl"] .right-4.right-4{left:1rem} [dir="rtl"] .right-5.right-5{left:1.25rem} [dir="rtl"] .right-6.right-6{left:1.5rem} [dir="rtl"] .sm\:right-5.sm\:right-5{left:1.25rem} [dir="rtl"] .text-left.text-left{text-align:right} [dir="rtl"] .text-right.text-right{text-align:left} /* ────────── per-view stylesheet rules → mirrored ────────── */ /* index.html */ [dir="rtl"] .rst-check.rst-checked{border-color:rgba(239, 0.2) 68, 68,} /* sp/index.html */ [dir="rtl"] .sp-drawer{transform:translateX(100%)} [dir="rtl"] .sp-drawer.open{transform:translateX(-0)} /* security/index.html */ [dir="rtl"] .remember input:checked + .rtrack .rthumb{transform:translateX(-16px)} [dir="rtl"] #toast-wrap{transform:translateX(50%)} /* views/areaRegions.html */ [dir="rtl"] #ar-draw-bar{transform:translateX(50%) translateY(14px) scale(.97)} [dir="rtl"] #ar-draw-bar.ar-open{transform:translateX(50%) translateY(0) scale(1)} [dir="rtl"] .ar-tip::after{transform:translateX(50%)} [dir="rtl"] #ar-toast-container{transform:translateX(50%)} /* views/catalogue.html */ [dir="rtl"] .cat-size-panel{border-radius:0 16px 16px 0;transform:translate(-100%, -50%)} [dir="rtl"] .cat-size-panel.open{transform:translate(-0, -50%)} [dir="rtl"] .cat-pdf-opt input:checked ~ .cat-pdf-opt-check::after{border-left:2px solid #fff;transform:rotate(45deg) translate(1px,-1px);border-right:0} /* views/customers.html */ [dir="rtl"] .cu-gps-pin{transform:translate(50%, -100%)} /* views/fieldVisits.html */ [dir="rtl"] .fv-sheet{transform:translate(50%, 100%)} [dir="rtl"] .fv-sheet.fv-sheet-open{transform:translate(50%, 0)} [dir="rtl"] .fv-toast-host{transform:translateX(50%)} /* views/login.html */ [dir="rtl"] .remember-toggle input:checked + .remember-track .remember-thumb{transform:translateX(-16px)} /* views/map.html */ [dir="rtl"] .map-pin{border-radius:50% 50% 0 50%} /* views/orders.html */ [dir="rtl"] .or-cart-sidebar{transform:translateX(-100%)} [dir="rtl"] .or-cart-sidebar.cart-open{transform:translateX(-0)} [dir="rtl"] .or-s2-act-btn{transform:translateX(-8px)} [dir="rtl"] .or-s2-act-btn.is-visible{transform:translateX(-0)} [dir="rtl"] .or-size-panel{border-radius:0 16px 16px 0;transform:translate(-100%, -50%)} [dir="rtl"] .or-size-panel.open{transform:translate(-0, -50%)} [dir="rtl"] .or-show-card.slide-out-l{transform:translateX(40px)} [dir="rtl"] .or-show-card.slide-out-r{transform:translateX(-40px)} /* views/products.html */ [dir="rtl"] .pr-size-panel{border-radius:0 16px 16px 0;transform:translate(-100%, -50%)} [dir="rtl"] .pr-size-panel.open{transform:translate(-0, -50%)} /* views/tasks.html */ [dir="rtl"] .tasks-search-act-go:hover{transform:translateX(1px)} /* views/visitsTracking.html */ [dir="rtl"] .vt2-sheet{transform:translate(50%,100%)} [dir="rtl"] .vt2-sheet.vt2-open{transform:translate(50%,0)} [dir="rtl"] .vt2-sheet-handle{transform:translateX(50%)} [dir="rtl"] .vt2-confirm-card{transform:translate(50%,-50%) scale(.95)} [dir="rtl"] .vt2-confirm-card.vt2-open{transform:translate(50%,-50%) scale(1)} /* sp/views/catalogue.html */ [dir="rtl"] .cat-size-panel{border-radius:0 16px 16px 0;transform:translate(-100%, -50%)} [dir="rtl"] .cat-size-panel.open{transform:translate(-0, -50%)} [dir="rtl"] .cat-pdf-opt input:checked ~ .cat-pdf-opt-check::after{border-left:2px solid #fff;transform:rotate(45deg) translate(1px,-1px);border-right:0} /* sp/views/customers.html */ [dir="rtl"] .cu-gps-pin{transform:translate(50%, -100%)} /* sp/views/map.html */ [dir="rtl"] .map-pin{border-radius:50% 50% 0 50%} /* sp/views/orders.html */ [dir="rtl"] .or-cart-sidebar{transform:translateX(-100%)} [dir="rtl"] .or-cart-sidebar.cart-open{transform:translateX(-0)} [dir="rtl"] .or-s2-act-btn{transform:translateX(-8px)} [dir="rtl"] .or-s2-act-btn.is-visible{transform:translateX(-0)} [dir="rtl"] .or-size-panel{border-radius:0 16px 16px 0;transform:translate(-100%, -50%)} [dir="rtl"] .or-size-panel.open{transform:translate(-0, -50%)} [dir="rtl"] .or-show-card.slide-out-l{transform:translateX(40px)} [dir="rtl"] .or-show-card.slide-out-r{transform:translateX(-40px)} /* sp/views/tasks.html */ [dir="rtl"] .tasks-search-act-go:hover{transform:translateX(1px)} /* sp/views/visitsTracking.html */ [dir="rtl"] .vt2-sheet{transform:translate(50%,100%)} [dir="rtl"] .vt2-sheet.vt2-open{transform:translate(50%,0)} [dir="rtl"] .vt2-sheet-handle{transform:translateX(50%)}