/* The dialog clips the rounded shell; scrolling happens inside an inset viewport. */
dialog{
  --modal-inset:6px;
  --modal-viewport-gap:44px;
  padding:var(--modal-inset);
  overflow:hidden;
  max-height:calc(100vh - var(--modal-viewport-gap));
  max-height:calc(100dvh - var(--modal-viewport-gap));
}
#modal-content{
  min-width:0;
  max-height:calc(100vh - var(--modal-viewport-gap) - var(--modal-inset) * 2 - 2px);
  max-height:calc(100dvh - var(--modal-viewport-gap) - var(--modal-inset) * 2 - 2px);
  overflow:auto;
  overscroll-behavior:contain;
  border-radius:calc(17px - var(--modal-inset));
}
.modal-header>div{min-width:0}
.modal-header h2,.modal-header p{overflow-wrap:anywhere}
.modal-header>.icon-button{flex-shrink:0}
.modal-body .field{min-width:0}

/* Leave room for material descriptions and attachment names in product dialogs. */
dialog.product-modal{width:960px;max-width:calc(100vw - 32px)}
.product-modal .bom-row{grid-template-columns:minmax(0,1fr) calc(152px * var(--font-scale,1)) 110px;gap:10px}
.bom-row-tools{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.bom-row-tools .icon-button{width:34px;height:38px;flex:none}
.bom-row-tools .bom-purchase{display:flex;align-items:center;margin:0}
.bom-row-tools .bom-purchase-link{color:var(--muted)}
.bom-row-tools .bom-purchase-link:hover{color:var(--green-dark);background:var(--theme-hover)}
.bom-row-tools .bom-purchase-link:focus-visible{outline:2px solid var(--theme-focus);outline-offset:2px}
.bom-row-tools .bom-purchase-link:disabled{color:var(--theme-disabled);opacity:.6;cursor:not-allowed;background:none}
.product-modal .bom-row .clearable-input>input.bom-quantity{padding-left:10px}
.bom-row-tools .bom-note-toggle{color:var(--muted)}
.product-modal .bom-note-toggle.has-note{color:var(--green-dark);background:var(--green-light)}
.bom-row-note{grid-column:1/-1;min-width:0;padding:12px 14px;border:1px solid var(--theme-border);border-radius:9px;background:var(--theme-surface)}
.bom-row-note[hidden]{display:none}
.bom-row-note textarea{display:block;width:100%;min-height:80px;padding:10px 12px;border:1px solid var(--theme-input-border);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:calc(12px * var(--font-scale,1));line-height:1.7;resize:vertical}
.bom-row-note textarea:focus{outline:2px solid var(--theme-focus);outline-offset:1px}
.bom-note-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:9px;flex-wrap:wrap}
.bom-note-actions>small{margin-right:auto;color:var(--muted);font-size:calc(11px * var(--font-scale,1))}
.bom-usage-note{display:flex;align-items:flex-start;gap:5px;max-width:340px;margin-top:6px;color:var(--text);font-size:calc(12px * var(--font-scale,1));white-space:pre-wrap;overflow-wrap:anywhere}
.bom-usage-note .icon{width:14px;height:14px;flex:none;margin-top:3px}
.product-modal .detail-hero>div:last-child{min-width:0}
.product-modal .detail-hero h3,.product-modal .detail-hero p,
.product-modal .detail-description{overflow-wrap:anywhere}
.detail-bom.table-scroll{overflow:auto}

/* Insets also protect nested table and search scrollbars at their endpoints. */
@supports selector(::-webkit-scrollbar){
  dialog ::-webkit-scrollbar-track:vertical{margin-top:6px;margin-bottom:6px}
  dialog ::-webkit-scrollbar-track:horizontal{margin-left:6px;margin-right:6px}
}
@media(max-width:600px){
  dialog{--modal-viewport-gap:24px;max-width:calc(100vw - 20px)}
  dialog.product-modal{max-width:calc(100vw - 20px)}
  .product-modal .bom-row{grid-template-columns:minmax(0,1fr) 98px;gap:8px}
  .product-modal .bom-picker{grid-column:1/-1}
  .product-modal .bom-row>.clearable-input{width:calc(152px * var(--font-scale,1));max-width:100%}
  .bom-row-tools{gap:2px}
  .bom-row-tools .icon-button{width:30px}
}