/* Compact operational proportions inspired by the usability of Admiprint. */
body:has(#commercial:not(.hidden)) #commercial,
body:has(#commercial:not(.hidden)) #commercial button,
body:has(#commercial:not(.hidden)) #commercial input,
body:has(#commercial:not(.hidden)) #commercial select,
body:has(#commercial:not(.hidden)) #commercial textarea,
.sale-product-dialog,
.sale-product-dialog button,
.sale-product-dialog input,
.sale-product-dialog select,
.sale-product-dialog textarea {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
}

#commercial .commercial-tabs button {
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 500;
}

#commercial .commercial-tabs::before {
  font-weight: 600;
}

.sale-titlebar {
  padding-top: 20px;
  padding-bottom: 20px;
}

.sale-titlebar h2 {
  font-size: 26px;
  font-weight: 600;
}

.sale-titlebar .eyebrow,
.sale-totals > .eyebrow {
  font-weight: 500;
}

.sale-titlebar .sale-soft {
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 500;
}

.sale-capture-card > header,
.sale-products-card > header,
.sale-profit > header {
  min-height: 36px;
  padding: 8px 12px;
}

.sale-capture-card > header > span,
.sale-products-card > header > span,
.sale-profit > header > span {
  width: 23px;
  height: 23px;
  font-weight: 600;
}

.sale-capture-card header b,
.sale-products-card header b,
.sale-profit header b {
  font-size: 12px;
  font-weight: 600;
}

.sale-capture-card header small,
.sale-products-card header small,
.sale-profit header small {
  font-size: 9px;
  font-weight: 400;
}

.sale-fields {
  grid-template-columns: minmax(290px,1.8fr) minmax(160px,.8fr) minmax(190px,1fr) minmax(190px,1fr);
  gap: 11px;
  padding: 12px;
}

.sale-fields label,
.sale-actions label {
  gap: 4px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .02em;
}

.sale-fields select,
.sale-fields input,
.sale-actions select {
  height: 34px;
  padding: 6px 9px;
  font-size: 11px;
}

.sale-customer > div {
  grid-template-columns: 1fr 34px;
  gap: 5px;
}

.sale-customer button {
  height: 34px;
  font-size: 17px;
  font-weight: 400;
}

.sale-products-card > header .sale-add {
  padding: 8px 13px;
  font-size: 11px;
  font-weight: 500;
}

.sale-products-card > header .sale-add small {
  font-size: 7px;
  font-weight: 400;
}

.sale-actions {
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
}

.sale-actions .sale-link {
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 500;
}

.sale-table-wrap {
  min-height: 170px;
}

.sale-table-wrap th {
  padding: 9px 10px;
  font-size: 8px;
  font-weight: 500;
}

.sale-table-wrap td {
  padding: 10px;
  font-size: 11px;
  font-weight: 400;
}

.sale-table-wrap td b {
  font-weight: 600;
}

.sale-empty {
  height: 110px;
  font-size: 11px;
}

.sale-profit-stats > div {
  padding: 11px 12px;
}

.sale-profit-stats span {
  font-size: 8px;
  font-weight: 400;
}

.sale-profit-stats b {
  font-size: 14px;
  font-weight: 500;
}

.sale-profit > label {
  gap: 5px;
  padding: 11px 12px;
  font-size: 9px;
  font-weight: 500;
}

.sale-profit textarea {
  min-height: 48px;
  padding: 8px 9px;
  font-size: 11px;
}

.sale-totals {
  padding: 14px 16px;
}

.sale-totals > div {
  padding: 6px 2px;
  font-size: 10px;
}

.sale-totals > div b {
  font-weight: 500;
}

.sale-grand-total strong {
  font-size: 28px;
  font-weight: 500;
}

.sale-totals button {
  padding: 9px 11px;
  font-size: 11px;
  font-weight: 500;
}

.sale-totals button small {
  font-size: 7px;
  font-weight: 400;
}

.sale-product-dialog label {
  font-size: 10px;
  font-weight: 500;
}

.sale-product-dialog input,
.sale-product-dialog select,
.sale-product-dialog textarea {
  padding: 8px 9px;
  font-size: 12px;
}

.sale-product-dialog .dialog-actions button {
  font-weight: 500;
}

@media (max-width:1050px) {
  .sale-fields { grid-template-columns: minmax(260px,1.5fr) 1fr 1fr; }
  .sale-delivery-date-label { grid-column: auto; }
}

@media (max-width:760px) {
  .sale-fields { grid-template-columns: 1fr 1fr; }
  .sale-customer { grid-column: 1/-1; }
}

@media (max-width:520px) {
  .sale-fields { grid-template-columns: 1fr; }
  .sale-customer { grid-column: auto; }
  .sale-titlebar { padding-top: 17px; padding-bottom: 17px; }
  .sale-titlebar h2 { font-size: 22px; }
}