/* EGO eSIM Admin — custom overrides beyond Tailwind CDN */ [x-cloak] { display: none !important; } /* Number inputs — hide the spinner on Chrome/Safari for cleaner look */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } /* Sticky save bar — subtle backdrop */ .sticky { backdrop-filter: blur(4px); } /* Table row hover polish */ table tbody tr:hover { background-color: rgb(248 250 252); } /* Focus ring for accessibility on the pink brand */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgb(236 72 153); outline-offset: 2px; } /* =================================================================== Hebrew / RTL support (added for the Hebrew localization pass). The compiled vendor/tailwind.css only contains the utility classes that existed in index.html at the last `npm run build:admin` run, and this environment cannot run that build step. So instead of adding new Tailwind utility classes (which would silently do nothing until the next real build), every RTL adjustment below is hand-written plain CSS that targets the exact Tailwind class names already compiled and already used in index.html, scoped under [dir="rtl"] on . Flexbox `justify-end`/`justify-start` and icon+label ordering inside `flex` rows are direction-aware by default in every browser and need no override here — only classes backed by *physical* CSS properties (text-align, margin-left/right, right/left positioning) do. =================================================================== */ html { font-family: "Segoe UI", "Assistant", "Arial Hebrew", "Noto Sans Hebrew", ui-sans-serif, system-ui, -apple-system, sans-serif; } /* Physical text alignment utilities → flip under RTL */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* `ml-auto` is used throughout to push a badge/chevron/value to the trailing edge of a flex row. In RTL the trailing edge is the LEFT side, so the auto margin needs to move there instead. */ [dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } /* Small leading-icon/text gaps expressed as ml-1 / ml-2 in the LTR markup — mirror them to margin-right so the spacing lands on the correct (leading) side in RTL. */ [dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } /* Ticket detail modal — message bubbles are indented ml-8 (support replies) / mr-8 (customer messages) to separate the two sides of the thread. Mirror both under RTL so the indent still reads as "inset from the trailing edge" instead of silently keeping its LTR side. */ [dir="rtl"] .ml-8 { margin-left: 0; margin-right: 2rem; } [dir="rtl"] .mr-8 { margin-right: 0; margin-left: 2rem; } /* Toast stack — pinned to the top-right in LTR; mirror to top-left so it reads as "the corner near where new content enters" in RTL too. */ [dir="rtl"] .right-4 { right: auto; left: 1rem; } /* Technical identifiers (ICCID, Mongo/WP ids, JSON payloads, the API base URL, order/transaction numbers) must stay left-to-right even inside an RTL page — the .ltr-field helper is added next to font-mono in the markup wherever raw IDs/codes are shown or typed. */ [dir="rtl"] .ltr-field { direction: ltr; text-align: left; unicode-bidi: isolate; } [dir="rtl"] input.ltr-field, [dir="rtl"] textarea.ltr-field { text-align: left; }