/* Shared focus and floating-utility geometry. Keep identical in Web and App. */
:root {
    --utility-size: 52px;
    --utility-gap: 14px;
    --utility-right: max(22px, env(safe-area-inset-right));
    --utility-bottom: max(22px, env(safe-area-inset-bottom));
}
@media (max-width: 640px) {
    :root {
        --utility-size: 48px;
        --utility-gap: 12px;
        --utility-right: max(16px, env(safe-area-inset-right));
        --utility-bottom: max(18px, env(safe-area-inset-bottom));
    }
}
/* The enclosing search surface owns the focus ring, never its inner input.
   Explicit scope defeats legacy global input:not(...):focus !important rules.
   Ordinary fields, validation, checkboxes, selects and login keep their own focus. */
#app :is(.nav-search, .store-search-box, .erp-search, .users-search):focus-within {
    border-color: #2171B3;
    box-shadow: 0 0 0 2px rgb(33 113 179 / 18%);
}
#app :is(.nav-search, .store-search-box, .erp-search, .users-search)
    :is(input, input:hover, input:focus, input:focus-visible) {
    appearance: none;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}