/* Form changes are limited to small screens; desktop and printed layouts retain their existing rules. */
@media screen and (max-width: 760px) {
  .form-page,
  .form-page form,
  .form-page .field,
  .form-page .form-grid,
  .form-page .transaction-line,
  .form-page .line-grid,
  .form-page .line-serials {
    min-width: 0;
    max-width: 100%;
  }

  .form-page .form-body {
    padding: 20px 16px;
  }

  .form-page .form-grid,
  .form-page .transaction-meta,
  .form-page .transaction-meta:has(#field-payment_type),
  .form-page .line-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-page .form-grid {
    gap: 0;
  }

  .form-page .line-grid {
    gap: 18px;
  }

  .form-page .span-two,
  .form-page .line-grid > .field:first-child {
    grid-column: auto;
  }

  .form-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .form-page select:not(.select2-hidden-accessible),
  .form-page textarea {
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    font-size: 16px;
    line-height: 1.4;
    padding: 12px;
  }

  .form-page textarea {
    min-height: 120px;
  }

  .form-page .field label,
  .form-page .field-label,
  .form-page .line-grid label {
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .form-page .field-label-row,
  .form-page .form-section-heading {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 16px;
  }

  .form-page .field-label-row .text-button {
    margin-left: auto;
  }

  .form-page .form-section-heading .price-note {
    text-align: left;
  }

  .form-page .button,
  .form-page .text-button,
  .form-page .text-link,
  .form-page .purchase-cost-retry {
    min-height: 44px;
    max-width: 100%;
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .form-page .button > svg {
    flex-shrink: 0;
  }

  .form-page .text-link,
  .form-page .purchase-cost-retry {
    display: inline-flex;
    align-items: center;
  }

  .form-page .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }

  .form-page .input-action,
  .form-page .sale-scanner .input-action,
  .form-page .inline-entry .input-action {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
  }

  .form-page .input-action input,
  .form-page .sale-scanner .input-action input,
  .form-page .inline-entry .input-action input {
    width: 100%;
    flex-basis: auto;
  }

  .form-page .input-action > .button {
    align-self: stretch;
    width: 100%;
    padding: 11px 12px;
    font-size: 14px;
    white-space: normal;
  }

  .form-page .sale-scanner {
    padding: 14px 12px;
  }

  .form-page .sale-scanner .input-action svg {
    display: block;
  }

  .form-page .scan-match {
    min-height: 52px;
    overflow-wrap: anywhere;
  }

  .form-page .check-field {
    min-height: 48px;
    padding: 8px 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .form-page input[type="checkbox"],
  .form-page input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: 20px;
    flex: 0 0 20px;
  }

  .form-page .permissions-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .form-page .permission-card {
    min-width: 0;
    min-height: 58px;
    padding: 14px;
    line-height: 1.5;
  }

  .form-page .permission-card span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .form-page .permission-card > svg {
    flex-shrink: 0;
  }

  .form-page .transaction-line {
    margin: 14px 0;
    padding: 14px 12px;
  }

  .form-page .line-top {
    align-items: flex-start;
    gap: 10px;
  }

  .form-page .line-number {
    min-width: 0;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  .form-page .serial-search-input {
    width: 100%;
    max-width: none;
  }

  .form-page .serial-choices {
    grid-template-columns: minmax(0, 1fr);
    max-height: 280px;
    max-height: min(280px, 45dvh);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    margin: 9px -4px 0;
  }

  .form-page .serial-choice {
    min-height: 48px;
    padding: 10px 12px;
    gap: 10px;
  }

  .form-page .serial-choice span {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    font-size: 14px;
    line-height: 1.5;
  }

  .form-page .selected-serials {
    gap: 8px;
  }

  .form-page .selected-serial {
    min-width: 0;
    min-height: 48px;
    padding: 2px 2px 2px 10px;
    font-size: 14px;
    line-height: 1.5;
  }

  .form-page .selected-serial .icon-button {
    padding: 12px;
  }

  .form-page .sale-purchase-cost {
    min-width: 0;
    padding: 12px;
    margin-top: 4px;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .form-page .sale-purchase-cost > strong {
    font-size: 20px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
  }

  .form-page .field .sale-purchase-cost small {
    font-size: 12px;
    line-height: 1.6;
  }

  .form-page .line-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 8px;
    align-items: baseline;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .form-page .line-total strong {
    min-width: 0;
    margin-left: 0;
    font-size: 16px;
  }

  .form-page .transaction-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .form-page .transaction-bottom > div,
  .form-page .transaction-summary {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .form-page .transaction-bottom [data-action="add-line"] {
    width: 100%;
  }

  .form-page .transaction-summary {
    padding: 16px 12px;
  }

  .form-page .summary-row {
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    font-size: 13px;
  }

  .form-page .summary-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .form-page .summary-row > :last-child {
    margin-left: auto;
    text-align: right;
  }

  .form-page .form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
  }

  .form-page .form-footer .button {
    width: 100%;
    flex: 0 0 auto;
  }

  .form-page .form-error,
  .form-page .field-help,
  .form-page small,
  .form-page .muted,
  .form-page .edit-rule,
  .form-page .fifo-line-note,
  .form-page .detail-note,
  .form-page .detail-meta strong,
  .form-page .transaction-help {
    overflow-wrap: anywhere;
  }

  .form-page .detail-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .form-page .product-cost-summary {
    padding: 14px 12px;
  }

  .form-page .product-cost-summary dl {
    flex-direction: column;
    gap: 18px;
  }

  .form-page .product-cost-summary dl > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .form-page .barcode-page > div {
    min-width: 0;
    max-width: 100%;
  }

  .form-page .barcode-page h2,
  .form-page .barcode-label strong {
    overflow-wrap: anywhere;
  }

  .form-page .barcode-label {
    min-width: 0;
    width: 100%;
    padding: 18px 12px;
  }

  .form-page .barcode-label img {
    max-width: 100%;
    height: auto;
  }

  .select2-container--default .sales-product-selection.select2-selection--single {
    min-height: 48px;
    padding: 2px 36px 2px 12px;
  }

  .select2-container--default .sales-product-selection .select2-selection__rendered {
    min-width: 0;
    padding: 9px 0;
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .select2-container--default .sales-product-selection .select2-selection__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    margin: 0 6px 0 -6px;
    padding: 0;
  }

  .select2-container--default .sales-product-selection .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
  }

  .sales-product-dropdown {
    max-width: calc(100vw - 24px);
    font-size: 16px;
  }

  .select2-container--default .sales-product-dropdown .select2-search__field {
    min-height: 48px;
    font-size: 16px;
    line-height: 1.4;
  }

  .sales-product-dropdown .select2-results__option {
    min-height: 48px;
    padding: 12px;
    line-height: 1.5;
  }

  .select2-container--default .sales-product-dropdown .select2-results > .select2-results__options {
    max-height: 260px;
    max-height: min(260px, 45dvh);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (max-width: 380px) {
  .form-page .form-body,
  .form-page .form-footer {
    padding: 16px 12px;
  }

  .form-page .transaction-line {
    padding: 12px 10px;
  }

  .form-page .field-label-row {
    align-items: flex-start;
  }

  .form-page .field-label-row .text-button {
    margin-left: 0;
    text-align: left;
  }
}