/* ===================================================================== form-select.css — app-wide native renders acceptably in Chrome but WebKit/Safari paints its own chrome (rounded native bezel + native caret), so selects look inconsistent across browsers. FIX: a single, cross-browser rule that 1. strips the native appearance in all engines, and 2. paints ONE house caret (inline-SVG data URI) over the element's OWN background colour. It deliberately leaves border / border-radius / background-COLOUR to the element's own classes (Tailwind utilities, component CSS) and only owns appearance + the caret + caret-side clearance. That keeps it surgical: selects that already have a background-image caret are simply overridden (one consistent caret); everything else gains a caret it was missing. Caret = house chevron: stroked "m6 9 6 6 6-6" in brand ink #372A58 (matches the existing carets in newHome.css / styles-*.css). Loaded LAST in each layout so it wins the cascade for appearance + caret. ===================================================================== */ /* Scope under .clients / body so we out-specify Tailwind's single-class `.appearance-none` (which only resets appearance, never paints a caret). No !important needed — two-class / body-scope specificity is enough. */ body select:not([multiple]):not([size]), .clients select:not([multiple]):not([size]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* House caret only — background-COLOUR is left to the element's classes (e.g. bg-gray-50) so the chevron composes over whatever fill it has. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23372A58' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1em; } /* Direction-aware caret placement + clearance. padding-inline-end is logical, so it always pads the caret side. */ body[dir="ltr"] select:not([multiple]):not([size]), .clients[dir="ltr"] select:not([multiple]):not([size]), [dir="ltr"] body select:not([multiple]):not([size]) { background-position: right 1rem center; padding-inline-end: 2.5rem; } body[dir="rtl"] select:not([multiple]):not([size]), .clients[dir="rtl"] select:not([multiple]):not([size]), [dir="rtl"] body select:not([multiple]):not([size]) { background-position: left 1rem center; padding-inline-end: 2.5rem; } /* Fallback when dir lives on rather than /.clients. */ html[dir="ltr"] select:not([multiple]):not([size]) { background-position: right 1rem center; padding-inline-end: 2.5rem; } html[dir="rtl"] select:not([multiple]):not([size]) { background-position: left 1rem center; padding-inline-end: 2.5rem; } /* --------------------------------------------------------------------- EXCLUSION — Admin "Share Unit" forms (AddShareUnit / EditShareUnit / ForAddShereUnit). Those selects already get their caret from a SIBLING positioned over the field, so painting our background caret too would show TWO carets. Opt them out entirely and restore native sizing so the existing overlay image keeps working. --------------------------------------------------------------------- */ .content[data-model-id="3506:86146"] .field select { background-image: none; padding-inline-end: revert; }