.quoteCommercialStatus {
  min-width: 0;
}

.quoteCommercialStatus[hidden] {
  display: none !important;
}

.quoteCommercialStatusLabel,
.quoteCommercialStatusSelect {
  min-width: 0;
}

.quoteCommercialStatusSelect {
  box-sizing: border-box;
  max-width: 100%;
  font: inherit;
  color: inherit;
}

/* Match the existing Offer header grid without altering control state. */
@media screen {
 #invoice.tradeQuoteLayout #quoteCommercialStatusSlot,
 #invoice.tradeQuoteLayout #quoteCommercialStatusSlot .quoteCommercialStatus{display:contents}
 #invoice.tradeQuoteLayout #quoteCommercialStatusSlot .quoteCommercialStatusLabel{grid-column:5;grid-row:2;align-self:center;margin:0;font-size:12px}
 #invoice.tradeQuoteLayout #quoteCommercialStatusSlot .quoteCommercialStatusSelect{grid-column:6;grid-row:2;width:100%;height:29px;min-width:0;padding:3px 6px;border:1px solid #bfc4ca;background:#fff;font-size:12px}
 #documentSearchScreen #quoteCommercialSearchSlot .quoteCommercialStatus{display:flex;align-items:center;gap:8px}
 #documentSearchScreen #quoteCommercialSearchSlot .quoteCommercialStatusSelect{flex:1;width:0;min-width:0}
}
@media screen and (max-width:760px){
 #invoice.tradeQuoteLayout #quoteMetadataFields>#quoteCommercialStatusSlot{display:block;grid-column:1/-1!important}
 #invoice.tradeQuoteLayout #quoteCommercialStatusSlot .quoteCommercialStatus{display:grid;grid-template-columns:100px minmax(0,1fr);gap:7px}
 #invoice.tradeQuoteLayout #quoteCommercialStatusSlot .quoteCommercialStatusLabel,
 #invoice.tradeQuoteLayout #quoteCommercialStatusSlot .quoteCommercialStatusSelect{grid-column:auto;grid-row:auto}
}