.ui-sales-form { container: sale-form / inline-size; }
.sales-header-fields { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
.sales-header-fields > * { min-width: 0; grid-column: auto; }
.sales-sheet-heading { flex-wrap: wrap; align-items: center; justify-content: space-between; }
.sales-sheet-heading > :first-child { flex: 1 1 20rem; min-width: 0; }
.sales-sheet-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 0 1 auto; }
.sales-sheet-totals > * { min-width: 5.5rem; padding: .625rem .75rem; }
@container sale-form (min-width: 28rem) {
  .sales-header-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sales-header-fields > * { grid-column: span 2; }
}
/* Size short fields by their content, instead of reserving empty grid tracks. */
@container sale-form (min-width: 42rem) {
  .sales-header-fields { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .sales-header-fields > * { flex: 0 0 6rem; }
  .sales-header-fields > [class~="xl:col-span-2"] { flex: 1 1 10rem; }
  .sales-header-fields > [class~="xl:col-span-3"] { flex: 1 1 18rem; }
  .sales-header-fields > .sales-document-number { flex: 0 0 7rem; }
  .sales-header-fields > .sales-document-date { flex: 0 0 10rem; }
  .sales-header-fields > .sales-payment-condition { flex: 0 0 9rem; }
  .sales-header-fields > .sales-seller-field { flex: 0 1 16rem; max-width: 100%; }
}
/* Short workspaces save space around content, rather than scaling the page. */
@media (max-height: 850px), (max-width: 1500px) {
  .sales-editor-page { padding-block: .75rem; }
  .sales-editor-page > div:has(.ui-sales-form) { padding: .875rem; border-radius: 1.25rem; }
  .sales-editor-page > div > div:has(> .ui-sales-form) { margin-top: .75rem; }
  .sales-editor-page h1 { font-size: 1.5rem; line-height: 1.25; }
  .sales-editor-page h1 + p { margin-top: .375rem; }
  .sales-sheet-heading h2 { font-size: 1.125rem; margin-top: 0; }
  .sales-editor-description, .sales-sheet-heading > :first-child > p { display: none; }
  .sales-sheet-totals > * { padding: .375rem .625rem; }
  .sales-sheet-totals [class~="text-xl"] { font-size: 1rem; margin-top: .125rem; }
  .sales-sheet { border-radius: 1rem; box-shadow: 0 8px 24px -16px #0f172a40; }
  .sales-header-fields { row-gap: .5rem; }
  .sales-sheet > div { padding-block: .75rem; }
  .sales-header-fields :is(label, .date-picker-label) { font-size: .75rem; }
}

@media (pointer: coarse) {
  .sales-header-fields :is(.search-select-trigger, .date-picker-trigger, input:not([type="hidden"])) { min-height: 44px; }
}
/* One typography scale for native fields, custom selectors and generated lines. */
.ui-sales-form {
  --sale-label-size: var(--ui-field-label-size, .8125rem);
  --sale-value-size: var(--ui-field-value-size, .875rem);
}
.ui-sales-form label,
.ui-sales-form .sales-header-fields label {
  font-family: inherit;
  font-size: var(--sale-label-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
.ui-sales-form :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .search-select-trigger, .date-picker-trigger),
.ui-sales-form .sales-header-fields [class~="min-h-[46px]"] {
  font-family: inherit;
  font-size: var(--sale-value-size);
  font-weight: 400;
  line-height: 1.4;
}
.sales-header-fields :is(.search-select-trigger, .date-picker-trigger, input:not([type="hidden"]), [class~="min-h-[46px]"]) {
  min-height: 44px;
  padding-block: .5rem;
}
.ui-sales-form .sales-pos-header { font-size: .6875rem; letter-spacing: .08em; }

.ui-sales-form .sales-pos-header > div { white-space: nowrap; }

.sales-header-fields .sales-payment-condition .search-select-trigger { padding-inline: .5rem; gap: .25rem; }
.sales-header-fields .sales-document-type .search-select-trigger { padding-inline: .5rem; gap: .25rem; }

/* The control fills its compact wrapper without leaving an empty grid slot. */
.sales-header-fields .sales-document-number :is(input:not([type="hidden"]), [class~="min-h-[46px]"]) {
  width: 100%;
}

/* Payment rows respond to their own panel, not the full browser width. */
.ui-sales-form [data-sale-lines-target="paymentStep"] { container: sale-payment / inline-size; }
.ui-sales-form [data-sale-lines-target="paymentRow"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-sales-form [data-sale-lines-target="paymentRow"] > div { min-width: 0; }
@container sale-payment (min-width: 42rem) {
  .ui-sales-form [data-sale-lines-target="paymentRow"] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 9rem 5rem; }
}
@container sale-payment (max-width: 23rem) {
  .ui-sales-form [data-sale-lines-target="paymentRow"] { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .ui-sales-form [data-sale-lines-target="paymentRow"] :is(input:not([type="hidden"]), button) { min-height: 44px; }
}