/* Shared phone layout: inherited by the Android secure Web workspace. */
.component-edit-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.component-edit-fields label{display:grid;gap:6px;min-width:0}
.component-edit-fields :is(input,select,textarea){box-sizing:border-box;width:100%;min-width:0;min-height:44px}
.component-edit-note{grid-column:1/-1;margin:0;overflow-wrap:anywhere}
.component-remaining-balance{align-self:end;display:flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid #a6d2c1;border-radius:6px;background:#eaf7f0;color:#12533d;font-weight:700;box-sizing:border-box;overflow-wrap:anywhere}
.component-remaining-balance.insufficient{border-color:#d8938e;background:#fff1ef;color:#9d2d27}
.component-edit-dialog{width:min(700px,calc(100vw - 12px));max-height:calc(100dvh - 12px);padding:0}
.component-edit-dialog .production-dialog-window{max-height:calc(100dvh - 16px);width:100%}
.component-edit-dialog form{display:flex;flex-direction:column;min-height:0;overflow:auto}
.component-edit-dialog :is(header,footer){flex-shrink:0}
.component-edit-dialog .component-edit-fields{flex-shrink:0}
@media (max-width:760px) {
  .component-edit-fields{grid-template-columns:minmax(0,1fr)}
  /* A scrolling flex form must scroll its sections, never compress their boxes
     while the controls/tables inside them retain their intrinsic heights. */
  form > :is(section,header,footer),
  .purchase-entry-form > *,
  .purchase-dialog-window > header,
  .purchase-dialog-window > footer {
    flex-shrink:0;
  }
  .purchase-entry-form {min-height:0;overflow:auto;overscroll-behavior-y:contain}
  .purchase-entry-form .purchase-form-section {flex:0 0 auto;min-width:0}
  .purchase-entry-form .purchase-form-section.grow {min-height:auto}
  .purchase-dialog-titlebar {flex:0 0 auto;padding:10px;gap:8px}
  .purchase-dialog-titlebar > div {min-width:0}
  .purchase-dialog-titlebar strong {white-space:normal;overflow-wrap:anywhere}
  .purchase-dialog-titlebar button {flex:none;min-width:44px;min-height:44px}
  .purchase-dialog-window {max-height:calc(100dvh - 12px)}
  .purchase-modal,.purchase-modal.wide {max-height:calc(100dvh - 8px);margin:auto;padding:0}
  .purchase-dialog-footer {flex:0 0 auto;flex-wrap:wrap;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .purchase-dialog-footer button {min-height:44px}
  :is(form,fieldset,[class*="field-grid"],[class*="entry-grid"],[class*="form-section"]) {min-width:0;box-sizing:border-box}
  :is([class*="field-grid"],[class*="entry-grid"]) > * {min-width:0;max-width:100%;box-sizing:border-box}
  :is([class*="table-wrap"],[class*="table-shell"],[class*="table-container"]) {
    min-width:0;max-width:100%;box-sizing:border-box;
    overflow:auto!important;isolation:isolate;
  }
  /* Wide item grids retain columns and scroll horizontally inside their shell.
     Do not squeeze independent inputs into overlapping phone-width columns. */
  table:has(tbody input,tbody select,tbody textarea) {table-layout:auto!important}
  table:has(tbody input,tbody select,tbody textarea) :is(th,td) {box-sizing:border-box}
  table:has(tbody input,tbody select,tbody textarea) td:has(input:not([type=hidden]):not([type=checkbox]):not([type=radio])) {min-width:144px}
  table:has(tbody input,tbody select,tbody textarea) td:has(select) {min-width:220px}
  table:has(tbody input,tbody select,tbody textarea) td :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
    width:100%!important;max-width:100%;box-sizing:border-box;min-height:44px;font-size:16px;
  }
  .purchase-field-grid :is(input,select,textarea) {min-height:44px;font-size:16px}
  .va-live-select-control {min-width:0!important;max-width:100%;grid-template-columns:minmax(0,1fr)}
  .va-live-select-control .va-live-select-input {min-width:0!important;width:100%!important;box-sizing:border-box;padding-right:44px!important}
  .va-live-select-toggle {width:42px;min-height:42px}
  .purchase-filterbar {flex-wrap:wrap}
  .purchase-filterbar > * {min-width:0;max-width:100%}
}