/* Dialog bounds are independent of page tables and their horizontal scroll positions. */
html.modal-open,body.modal-open { overflow:hidden; }
#modal.modal {
  --modal-gutter:15px;
  position:fixed; inset:auto; margin:0;
  left:var(--modal-viewport-left,0px); top:var(--modal-viewport-top,0px);
  width:var(--modal-viewport-width,100vw);
  height:100vh; height:var(--modal-viewport-height,100dvh);
  min-width:0; min-height:0; max-width:none;
  display:flex; align-items:center; justify-content:center;
  padding:var(--modal-gutter); box-sizing:border-box;
}
#modal.modal.hidden { display:none; }
#modal>.modal-card {
  --modal-max-width:620px;
  flex:0 1 auto; margin:0; min-width:0; min-height:0; box-sizing:border-box;
  width:min(var(--modal-max-width),calc(var(--modal-viewport-width,100vw) - 2 * var(--modal-gutter)));
  max-width:calc(var(--modal-viewport-width,100vw) - 2 * var(--modal-gutter));
  max-height:calc(var(--modal-viewport-height,100vh) - 2 * var(--modal-gutter));
  overflow:auto; overscroll-behavior:contain;
}
#modal>.modal-card:has(.sale-form) { --modal-max-width:720px; }
#modal>.modal-card:has(.purchase-editor) { --modal-max-width:780px; }
#modal>.modal-card:has(.receivables-feature-preview) { --modal-max-width:760px; }
#modalBody { width:100%; min-width:0; max-width:100%; overflow-wrap:anywhere; }
#modalBody :where(form,section,div,fieldset,label,dl,dt,dd,p,h2,h3,input,select,textarea,button) {
  box-sizing:border-box; min-width:0; max-width:100%;
}
#modalBody fieldset { min-inline-size:0; }
#modalBody :is(.input,.select,textarea) { width:100%; min-width:0; max-width:100%; }
#modalBody :is(p,label,h2,h3,small,strong,b,dt,dd,.list-item,.business-receipt) { overflow-wrap:anywhere; }
#modalBody .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#modalBody :is(.purchase-total,.sale-final-total,.purchase-cart-header,.customer-head,.list-item) { flex-wrap:wrap; gap:12px; }
#modalBody .btn { white-space:normal; overflow-wrap:anywhere; }
#modalBody :is(img,video,canvas,iframe) { max-width:100%; }
#modal.modal-narrow { --modal-gutter:12px; }
#modal.modal-narrow>.modal-card { padding:20px 16px; }
#modal.modal-narrow #modalBody :is(.form-grid,.sale-header-grid,.sale-credit-grid,.customer-summary) { grid-template-columns:minmax(0,1fr); }
#modal.modal-narrow #modalBody .sale-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#modal.modal-narrow #modalBody .sale-editor-grid>.field:first-child { grid-column:1/-1; }
#modal.modal-narrow #modalBody :is(input,select,textarea) { font-size:16px; }
#modal.modal-narrow #modalBody :is(.purchase-total,.purchase-cart-header,.customer-head) { align-items:flex-start; }
@media(max-width:640px) {
  #modal.modal { --modal-gutter:12px; }
  #modal>.modal-card { padding:20px 16px; }
  #modalBody :is(.form-grid,.sale-header-grid,.sale-credit-grid,.customer-summary) { grid-template-columns:minmax(0,1fr); }
  #modalBody .sale-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #modalBody .sale-editor-grid>.field:first-child { grid-column:1/-1; }
  #modalBody :is(input,select,textarea) { font-size:16px; }
}