.erp-labelled-field {display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:100%;}
.erp-labelled-field[hidden] {display:none!important;}
.erp-field-label {display:block;font-size:.8rem;line-height:1.25rem;font-weight:500;color:inherit;}
.erp-labelled-field > input,.erp-labelled-field > select,.erp-labelled-field > textarea {max-width:100%;}
.flex:has(> .erp-labelled-field) {align-items:flex-end;}

/* The wrapper is now the layout item; its field fills that item. */
body .erp-labelled-field > :is(input,select,textarea,.form-input) {width:100%;min-width:0;flex:none;}
.px-canvas form.flex:has(> .erp-labelled-field, > div > label + :is(input,select,textarea)) {flex-wrap:wrap;gap:.75rem;align-items:flex-end;}
.flex:not(.flex-col) > .erp-labelled-field:not([class*="w-"]) {flex:1 1 180px;}
.px-canvas form.flex > div:has(> label + :is(input,select,textarea)) {flex:1 1 180px;}
.px-canvas form.flex > div:has(> label + :is(input,select,textarea)) > :is(input,select,textarea) {width:100%;flex:none;}

/* Shared sizing also covers older forms without .form-input. */
:is(.px-canvas,.px-auth-card) :is(select,textarea,input:not([type="checkbox"],[type="radio"],[type="hidden"],[type="submit"],[type="button"],[type="reset"],[type="image"],[type="range"],[type="color"],[type="file"])) {
    box-sizing:border-box;min-width:0;max-width:100%;min-height:46px;
    padding:10px 14px;font-family:inherit;font-size:16px;line-height:24px;
    border:1px solid var(--px-line-strong);border-radius:14px;
    color:var(--text);background-color:var(--px-field);
}
:is(.px-canvas,.px-auth-card) select {
    padding-right:40px;appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7192' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;
}
:is(.px-canvas,.px-auth-card) select[multiple] {appearance:auto;background-image:none;min-height:112px;}
:is(.px-canvas,.px-auth-card) textarea {min-height:112px;resize:vertical;display:block;}
.erp-field-label {overflow-wrap:anywhere;}
.px-main,.px-canvas,.px-auth-card {min-width:0;}
.px-canvas .grid > *,.px-canvas form.flex > * {min-width:0;}
.px-canvas form .grid > :is(.erp-labelled-field,div:has(> label + :is(input,select))) {align-self:end;}
.px-canvas .overflow-x-auto {max-width:100%;-webkit-overflow-scrolling:touch;}
.px-canvas :is(.btn-primary,.px-btn) {max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;}

/* Search icons follow the input rather than the label+input stack. */
.px-search:has(.erp-labelled-field) .px-search-icon {top:auto;bottom:15px;transform:none;}
.px-search:has(.erp-labelled-field) .px-search-submit {top:auto;bottom:6px;transform:none;}
.px-search:has(.erp-labelled-field) .px-search-submit:hover {transform:scale(1.06);}

@media(max-width:639.98px) {
    .px-canvas form.flex:has(> .erp-labelled-field) > .erp-labelled-field {width:100%;max-width:100%;flex:1 1 100%;}
    .px-canvas form.flex > div:has(> label + :is(input,select,textarea)) {width:100%;max-width:100%;flex:1 1 100%;}
    .px-canvas form.flex:has(> .erp-labelled-field) > :is(button,.btn-primary) {min-height:46px;}
    .px-canvas :is(input[type="date"],input[type="datetime-local"],input[type="time"]) {min-width:0;width:100%;}
}