/**
 * Add Sale / Edit Sale — sale-specific responsive rules.
 * Requires parent .pos-form-page.sell-form (see pos-form-responsive.css).
 *
 * Desktop (≥768px): no layout changes — keep Bootstrap table.
 * Mobile (≤767px): product search full-width; #pos_table rows → cards.
 * Preserves <table>/<tr>/<td> for pos.js (closest('tr'), etc.).
 */

/* ---------- Customer details ---------- */
.pos-form-page.sell-form .sell-form-customer {
  min-width: 0;
}

.pos-form-page.sell-form .sell-form-customer .input-group {
  width: 100%;
}

.pos-form-page.sell-form .sell-form-customer__due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #fff1f2;
  font-size: 11px;
  line-height: 1.4;
}

.pos-form-page.sell-form .sell-form-customer__addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.pos-form-page.sell-form .sell-form-customer__address {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--pos-form-border, #e2e8f0);
  border-radius: 5px;
  background: #f8fafc;
}

.pos-form-page.sell-form .sell-form-customer__address-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--pos-form-text, #0f172a);
  font-size: 11px;
}

.pos-form-page.sell-form .sell-form-customer__address-title .fa {
  color: var(--pos-form-accent, #047857);
}

.pos-form-page.sell-form .sell-form-customer__address-content {
  overflow-wrap: anywhere;
  color: var(--pos-form-muted, #64748b);
  font-size: 11px;
  line-height: 1.45;
}

/* ---------- Totals (all breakpoints; compact on mobile) ---------- */
.pos-form-page.sell-form .sell-form-totals {
  margin-top: 4px;
  margin-bottom: 4px;
}

.pos-form-page.sell-form .sell-form-totals__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 20px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--pos-form-border, #e2e8f0);
  border-radius: var(--pos-form-radius, 8px);
  font-size: 13px;
}

.pos-form-page.sell-form .sell-form-totals__row .price_total {
  font-weight: 700;
  color: var(--pos-form-accent, #047857);
}

/* ==========================================================================
   Mobile ≤767px
   ========================================================================== */
@media (max-width: 767px) {
  .pos-form-page.sell-form .sell-form-customer__addresses {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Search: full width, outside table scroll, prominent */
  .pos-form-page.sell-form .sell-form-product-search {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 6px;
    position: relative;
    z-index: 5;
  }

  .pos-form-page.sell-form .sell-form-product-search .form-group {
    margin-bottom: 6px;
  }

  .pos-form-page.sell-form .sell-form-product-search .input-group {
    display: flex !important;
    width: 100%;
  }

  .pos-form-page.sell-form .sell-form-product-search #search_product {
    min-height: var(--pos-form-input-h, 32px) !important;
    height: var(--pos-form-input-h, 32px) !important;
    font-size: 16px !important;
  }

  /* jQuery UI autocomplete — fit viewport (barcode / keyboard search) */
  .ui-autocomplete {
    max-width: min(100vw - 16px, 420px) !important;
    max-height: 45vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1060 !important;
    box-sizing: border-box;
  }

  body:has(.pos-form-page.sell-form) .ui-autocomplete .ui-menu-item,
  .pos-form-page.sell-form ~ .ui-autocomplete .ui-menu-item {
    font-size: 13px;
  }

  /* Table wrap: no horizontal scroll — cards stack */
  .pos-form-page.sell-form .sell-form-product-table-wrap,
  .pos-form-page.sell-form .sell-form-product-table-wrap.table-responsive {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
    border: 0;
    margin: 0;
  }

  .pos-form-page.sell-form #pos_table,
  .pos-form-page.sell-form #pos_table.table-responsive {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    margin-bottom: 0;
  }

  .pos-form-page.sell-form #pos_table > thead {
    display: none !important;
  }

  .pos-form-page.sell-form #pos_table > tbody {
    display: block;
    width: 100%;
  }

  /* Product card (still a <tr>) */
  .pos-form-page.sell-form #pos_table > tbody > tr.product_row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "discounttype discounttype action"
      "product product product"
      "qty qty qty"
      "price discount discount"
      "tax priceinc priceinc"
      "staff staff staff"
      "warranty warranty warranty"
      "subtotal subtotal subtotal";
    gap: 6px 8px;
    align-items: start;
    width: 100%;
    margin: 0 0 8px;
    padding: 8px;
    border: 1px solid var(--pos-form-border, #e2e8f0) !important;
    border-radius: var(--pos-form-radius, 8px);
    background: #fff;
    box-sizing: border-box;
  }

  .pos-form-page.sell-form #pos_table > tbody > tr.product_row > td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: top;
    overflow: visible !important;
    text-align: left !important;
  }

  .pos-form-page.sell-form #pos_table > tbody > tr.product_row > td.hide,
  .pos-form-page.sell-form #pos_table > tbody > tr.product_row > td.sell-form-serial-col {
    display: none !important;
  }

  .pos-form-page.sell-form #pos_table > tbody > tr.product_row > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--pos-form-muted, #64748b);
    margin-bottom: 3px;
    line-height: 1.2;
  }

  .pos-form-page.sell-form #pos_table .product_row > .pos-cart-product-col {
    grid-area: product;
  }

  .pos-form-page.sell-form #pos_table .product_row > .pos-cart-product-col[data-label]::before {
    display: none;
  }

  .pos-form-page.sell-form #pos_table .product_row > .pos-cart-action-col {
    grid-area: action;
    justify-self: end;
    align-self: start;
  }

  .pos-form-page.sell-form #pos_table .product_row > .pos-cart-qty-col {
    grid-area: qty;
  }

  .pos-form-page.sell-form #pos_table .product_row > .sell-form-unit-price-col {
    grid-area: price;
  }

  .pos-form-page.sell-form #pos_table .product_row > .sell-form-discount-col {
    grid-area: discount;
  }

  .pos-form-page.sell-form #pos_table .product_row > .sell-form-tax-col {
    grid-area: tax;
  }

  .pos-form-page.sell-form #pos_table .product_row > .sell-form-price-inc-tax-col {
    grid-area: priceinc;
  }

  .pos-form-page.sell-form #pos_table .product_row > .sell-form-staff-col {
    grid-area: staff;
  }

  .pos-form-page.sell-form #pos_table .product_row > .sell-form-warranty-col {
    grid-area: warranty;
  }

  .pos-form-page.sell-form #pos_table .product_row > .pos-cart-subtotal-col {
    grid-area: subtotal;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding-top: 4px !important;
    border-top: 1px solid var(--pos-form-border, #e2e8f0) !important;
    margin-top: 2px;
  }

  .pos-form-page.sell-form #pos_table .product_row > .pos-cart-subtotal-col[data-label]::before {
    margin-bottom: 0;
  }

  /* Product meta */
  .pos-form-page.sell-form #pos_table .pos-cart-product-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pos-form-text, #0f172a);
  }

  .pos-form-page.sell-form #pos_table .pos-cart-product-name {
    display: block;
  }

  .pos-form-page.sell-form #pos_table .pos-cart-sku {
    display: inline;
    font-size: 11px;
    font-weight: 500;
    color: var(--pos-form-muted, #64748b);
  }

  .pos-form-page.sell-form #pos_table .sell-form-product-thumb,
  .pos-form-page.sell-form #pos_table img[alt="product-img"] {
    width: 36px !important;
    height: 36px !important;
    margin: 4px 0 0 !important;
    border-radius: 6px !important;
  }

  .pos-form-page.sell-form #pos_table .product_row > .pos-cart-product-col > br {
    display: none;
  }

  .pos-form-page.sell-form #pos_table .product_row textarea.form-control {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 13px;
    margin-top: 4px;
    resize: vertical;
  }

  .pos-form-page.sell-form #pos_table .product_row .help-block {
    display: none;
  }

  .pos-form-page.sell-form #pos_table .product_row > .pos-cart-product-col .text-muted {
    font-size: 10px;
    display: block;
    margin-top: 2px;
  }

  /* Compact controls inside cards */
  .pos-form-page.sell-form #pos_table .product_row .form-control,
  .pos-form-page.sell-form #pos_table .product_row select.form-control,
  .pos-form-page.sell-form #pos_table .product_row input.form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--pos-form-input-h, 32px) !important;
    height: var(--pos-form-input-h, 32px) !important;
    font-size: 16px !important;
    padding: 4px 8px !important;
    box-sizing: border-box;
  }

  .pos-form-page.sell-form #pos_table .product_row .input-group.input-number {
    display: flex !important;
    width: 100%;
    max-width: 180px;
  }

  .pos-form-page.sell-form #pos_table .product_row .input-group.input-number > .form-control.pos_quantity {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 48px;
    text-align: center;
  }

  .pos-form-page.sell-form #pos_table .product_row .input-group.input-number > .input-group-btn {
    flex: 0 0 32px;
    width: 32px;
  }

  .pos-form-page.sell-form #pos_table .product_row .quantity-down,
  .pos-form-page.sell-form #pos_table .product_row .quantity-up {
    width: 32px !important;
    min-width: 32px !important;
    height: var(--pos-form-btn-h, 32px) !important;
    padding: 0 !important;
  }

  .pos-form-page.sell-form #pos_table .product_row .sub_unit {
    margin-top: 4px;
    max-width: 180px;
  }

  .pos-form-page.sell-form #pos_table .product_row .row_discount_amount {
    margin-bottom: 4px;
  }

  .pos-form-page.sell-form #pos_table .product_row .row_discount_type {
    margin-top: 0;
  }

  .pos-form-page.sell-form #pos_table .product_row .pos_unit_price_inc_tax,
  .pos-form-page.sell-form #pos_table .product_row .pos_line_total {
    width: 100% !important;
  }

  .pos-form-page.sell-form #pos_table .product_row .pos_line_total_text {
    font-size: 15px;
    font-weight: 700;
    color: var(--pos-form-accent, #047857);
    white-space: nowrap;
  }

  .pos-form-page.sell-form #pos_table .product_row .pos_remove_row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    border-radius: 6px;
    background: #fef2f2;
  }

  /* Totals bar */
  .pos-form-page.sell-form .sell-form-totals {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pos-form-page.sell-form .sell-form-totals__row {
    justify-content: space-between;
    font-size: 14px;
    padding: 8px;
    position: sticky;
    bottom: calc(var(--pos-form-sticky-h, 52px) + 4px);
    z-index: 4;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
  }

  /* When tax columns hidden, keep grid tidy */
  .pos-form-page.sell-form #pos_table .product_row > .sell-form-tax-col.hide,
  .pos-form-page.sell-form #pos_table .product_row > .sell-form-price-inc-tax-col.hide {
    display: none !important;
  }
}

/* Desktop: keep search full-ish width like before (centered offset removed) */
@media (min-width: 768px) {
  .pos-form-page.sell-form .sell-form-product-search {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }

  .pos-form-page.sell-form .sell-form-shipping > .pos-form-section__toggle {
    display: none;
  }

  .pos-form-page.sell-form .sell-form-shipping > .pos-form-section__body.collapse:not(.in):not(.show) {
    display: block;
  }
}

@media (max-width: 1199px) {
  .pos-form-page.sell-form #pos_table > thead .sell-form-note-col,
  .pos-form-page.sell-form #pos_table > tbody > tr.product_row > td.sell-form-note-col {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .pos-form-page.sell-form .sell-form-product-table-wrap {
    overflow-x: auto;
  }

  .pos-form-page.sell-form #pos_table {
    width: 100%;
    min-width: 1280px;
    table-layout: auto;
  }

  .pos-form-page.sell-form #pos_table > thead > tr > th,
  .pos-form-page.sell-form #pos_table > tbody > tr.product_row > td {
    white-space: nowrap;
    vertical-align: middle;
  }

  .pos-form-page.sell-form #pos_table .sell-form-serial-col { width: 38px; }
  .pos-form-page.sell-form #pos_table .pos-cart-product-col { width: 260px; }
  .pos-form-page.sell-form #pos_table .pos-cart-qty-col { width: 180px; }
  .pos-form-page.sell-form #pos_table .sell-form-staff-col { width: 145px; }
  .pos-form-page.sell-form #pos_table .sell-form-unit-price-col { width: 125px; }
  .pos-form-page.sell-form #pos_table .sell-form-discount-col { width: 195px; }
  .pos-form-page.sell-form #pos_table .sell-form-tax-col { width: 115px; }
  .pos-form-page.sell-form #pos_table .sell-form-price-inc-tax-col { width: 135px; }
  .pos-form-page.sell-form #pos_table .sell-form-warranty-col { width: 145px; }
  .pos-form-page.sell-form #pos_table .sell-form-note-col { width: 220px; }
  .pos-form-page.sell-form #pos_table .pos-cart-subtotal-col { width: 125px; }
  .pos-form-page.sell-form #pos_table .pos-cart-action-col { width: 40px; }

  .pos-form-page.sell-form #pos_table .sell-form-product-main {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pos-form-page.sell-form #pos_table .pos-cart-product-info {
    min-width: 0;
  }

  .pos-form-page.sell-form #pos_table .pos-cart-product-title,
  .pos-form-page.sell-form #pos_table .pos-cart-product-name {
    white-space: nowrap;
  }

  .pos-form-page.sell-form #pos_table .pos-cart-product-name {
    display: inline;
  }

  .pos-form-page.sell-form #pos_table .sell-form-product-thumb {
    order: -1;
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  .pos-form-page.sell-form #pos_table .sell-form-product-stock-break {
    display: none;
  }

  .pos-form-page.sell-form #pos_table .sell-form-product-main ~ .text-muted {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
  }

  .pos-form-page.sell-form #pos_table .sell-form-qty-controls,
  .pos-form-page.sell-form #pos_table .sell-form-discount-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  .pos-form-page.sell-form #pos_table .sell-form-qty-controls > br,
  .pos-form-page.sell-form #pos_table .sell-form-discount-controls > br {
    display: none;
  }

  .pos-form-page.sell-form #pos_table .sell-form-qty-controls .input-group.input-number {
    flex: 0 0 140px;
    width: 140px;
  }

  .pos-form-page.sell-form #pos_table .sell-form-qty-controls .sub_unit {
    flex: 0 0 95px;
    width: 95px;
    margin: 0;
  }

  .pos-form-page.sell-form #pos_table .sell-form-discount-controls .row_discount_amount {
    flex: 0 0 82px;
    width: 82px;
    margin: 0;
  }

  .pos-form-page.sell-form #pos_table .sell-form-discount-controls .row_discount_type {
    flex: 0 0 105px;
    width: 105px;
  }

  .pos-form-page.sell-form #pos_table .sell-form-note-control {
    width: 100%;
    min-width: 190px;
    height: 32px;
    padding: 4px 8px;
  }

  .pos-form-page.sell-form #pos_table .sell-form-note-help-text {
    display: none;
  }

  .pos-form-page.sell-form #pos_table .sell-form-note-help {
    margin-left: 4px;
    color: #64748b;
    cursor: help;
    font-size: 12px;
  }

  .pos-form-page.sell-form .sell-form-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 8px 16px;
    margin: 0;
  }

  .pos-form-page.sell-form .sell-form-pricing-grid > .col-md-4,
  .pos-form-page.sell-form .sell-form-pricing-grid > .col-md-12 {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .pos-form-page.sell-form .sell-form-pricing-grid .form-group {
    margin-bottom: 8px;
  }

  .pos-form-page.sell-form .sell-form-pricing-clear,
  .pos-form-page.sell-form .sell-form-desktop-break {
    display: none;
  }

  .pos-form-page.sell-form .sell-form-discount-total,
  .pos-form-page.sell-form .sell-form-tax-total {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-top: 24px;
    white-space: nowrap;
  }

  .pos-form-page.sell-form .sell-form-tax-total {
    grid-column: 2;
    margin: 0;
  }

  .pos-form-page.sell-form .sell-form-sale-note textarea {
    height: 34px;
    min-height: 34px;
    resize: vertical;
    transition: height 0.15s ease;
  }

  .pos-form-page.sell-form .sell-form-sale-note textarea:focus {
    height: 80px;
  }

  .pos-form-page.sell-form .sell-form-shipping-container {
    float: none;
    width: 100%;
    padding: 0;
  }

  .pos-form-page.sell-form .sell-form-shipping > .pos-form-section__toggle {
    display: flex;
  }

  .pos-form-page.sell-form .sell-form-shipping > .pos-form-section__body.collapse:not(.in):not(.show) {
    display: none !important;
  }

  .pos-form-page.sell-form .sell-form-shipping-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 4px 14px;
  }

  .pos-form-page.sell-form .sell-form-shipping-grid > .col-md-4 {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .pos-form-page.sell-form .sell-form-shipping-clear {
    display: none;
  }

  .pos-form-page.sell-form .sell-form-shipping-status {
    grid-column: 1;
    grid-row: 1;
  }

  .pos-form-page.sell-form .sell-form-shipping-charges {
    grid-column: 2;
    grid-row: 1;
  }

  .pos-form-page.sell-form .sell-form-shipping-person {
    grid-column: 3;
    grid-row: 1;
  }

  .pos-form-page.sell-form .sell-form-shipping-delivered {
    grid-column: 1;
    grid-row: 2;
  }

  .pos-form-page.sell-form .sell-form-shipping-address {
    grid-column: 2;
    grid-row: 2;
  }

  .pos-form-page.sell-form .sell-form-shipping-details {
    grid-column: 3;
    grid-row: 2;
  }

  .pos-form-page.sell-form .sell-form-shipping-custom {
    grid-column: span 1;
  }

  .pos-form-page.sell-form .sell-form-shipping-documents {
    grid-column: 1 / -1;
  }

  .pos-form-page.sell-form .sell-form-shipping-grid textarea.form-control {
    height: 48px;
    min-height: 48px;
    resize: vertical;
  }

  .pos-form-page.sell-form .sell-form-shipping-grid .form-group {
    margin-bottom: 8px;
  }

  .pos-form-page.sell-form .sell-form-additional-expenses__header {
    float: none;
    width: 100%;
    padding: 0 0 4px;
    text-align: left;
    border-bottom: 1px solid var(--pos-form-border, #e2e8f0);
  }

  .pos-form-page.sell-form .sell-form-additional-expenses__body {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 8px;
  }

  .pos-form-page.sell-form .sell-form-additional-expenses__header button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
  }

  .pos-form-page.sell-form .sell-form-additional-expenses__table {
    width: 100%;
    margin-bottom: 0;
    table-layout: fixed;
  }

  .pos-form-page.sell-form .sell-form-additional-expenses__table th,
  .pos-form-page.sell-form .sell-form-additional-expenses__table td {
    padding: 5px 8px;
    vertical-align: middle;
  }

  .pos-form-page.sell-form .sell-form-additional-expenses__table th:first-child,
  .pos-form-page.sell-form .sell-form-additional-expenses__table td:first-child {
    width: 70%;
  }

  .pos-form-page.sell-form .sell-form-additional-expenses__table th:last-child,
  .pos-form-page.sell-form .sell-form-additional-expenses__table td:last-child {
    width: 30%;
  }

  .pos-form-page.sell-form .sell-form-additional-expenses__table .form-control {
    height: 32px;
    min-height: 32px;
  }

  .pos-form-page.sell-form .sell-form-payable-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    float: none;
    width: 100%;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--pos-form-border, #e2e8f0);
  }

  .pos-form-page.sell-form .sell-form-payable-summary > br,
  .pos-form-page.sell-form .sell-form-payable-summary #round_off br {
    display: none;
  }

  .pos-form-page.sell-form .sell-form-payable-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 16px;
  }

  .pos-form-page.sell-form .sell-form-payable-row #total_payable {
    font-weight: 700;
  }
}


/* Mobile product card layout improvements only */
@media (max-width: 767px) {

  /* Product card */
  .pos-form-page.sell-form #pos_table > tbody > tr.product_row {
    gap: 10px 12px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  }

  /* Product information */
  .pos-form-page.sell-form #pos_table .pos-cart-product-col {
    padding-bottom: 3px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  /* Product name */
  .pos-form-page.sell-form #pos_table .pos-cart-product-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }

  /* SKU */
  .pos-form-page.sell-form #pos_table .pos-cart-sku {
    font-size: 11px;
    color: #64748b;
  }

  /* Field labels */
  .pos-form-page.sell-form #pos_table
  .product_row > td[data-label]::before {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 2px;
  }

  /* Quantity controls */
  .pos-form-page.sell-form #pos_table
  .product_row .input-group.input-number {
    max-width: 100%;
  }

  /* Subtotal footer */
  .pos-form-page.sell-form #pos_table
  .product_row > .pos-cart-subtotal-col {
    margin-top: 6px;
    padding-top: 10px !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  .pos-form-page.sell-form #pos_table
  .product_row .pos_line_total_text {
    font-size: 16px;
    font-weight: 700;
    color: var(--pos-form-accent, #047857);
  }

  /* Remove button */
  .pos-form-page.sell-form #pos_table
  .product_row .pos_remove_row {
    border-radius: 8px;
  }
}


/* Compact sale product cards - Mobile only */
@media (max-width: 767px) {

  .pos-form-page.sell-form #pos_table > tbody > tr.product_row {
    gap: 4px 8px;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
  }

  /* Product image and details */
  .pos-form-page.sell-form #pos_table .sell-form-product-main {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .pos-form-page.sell-form #pos_table .sell-form-product-thumb {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
    margin: 0 !important;
    object-fit: cover;
  }

  /* Product details 60% / notes 40% on mobile */
  .pos-form-page.sell-form #pos_table .product_row > .pos-cart-product-col {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 3px 8px;
    align-items: start;
  }

  .pos-form-page.sell-form #pos_table .pos-cart-product-col > .sell-form-product-main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .pos-form-page.sell-form #pos_table .pos-cart-product-col > small.text-muted {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .pos-form-page.sell-form #pos_table .pos-cart-product-col > .sell-form-note-field {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
  }

  .pos-form-page.sell-form #pos_table .pos-cart-product-col .sell-form-note-control {
    min-height: 52px !important;
    height: 52px !important;
    margin-top: 0;
  }

  /* Quantity and unit side by side */
  .pos-form-page.sell-form #pos_table .sell-form-qty-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  .pos-form-page.sell-form #pos_table .sell-form-qty-controls > br {
    display: none;
  }

  .pos-form-page.sell-form #pos_table
  .sell-form-qty-controls .input-group.input-number {
    width: 100% !important;
    min-width: 0;
    max-width: none;
  }

  .pos-form-page.sell-form #pos_table
  .sell-form-qty-controls .sub_unit {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  /* Compact discount inputs */
  .pos-form-page.sell-form #pos_table .sell-form-discount-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .pos-form-page.sell-form #pos_table .row_discount_amount {
    margin-bottom: 0;
  }

  /* Keep discount selector aligned with its amount field */
  .pos-form-page.sell-form #pos_table .sell-form-discount-controls .row_discount_type {
    width: 100% !important;
    max-width: none;
    margin: 0;
  }

  /* Reduce product note height without hiding saved notes */
  .pos-form-page.sell-form #pos_table .product_row textarea.form-control {
    min-height: 32px !important;
    height: 32px !important;
    margin-top: 2px;
  }

  /* Discount type and remove icon share the first grid row */
  .pos-form-page.sell-form #pos_table > tbody > tr.product_row > td.sell-form-discount-col:not(.hide),
  .pos-form-page.sell-form #pos_table .sell-form-discount-col:not(.hide) .sell-form-discount-controls {
    display: contents !important;
  }

  .pos-form-page.sell-form #pos_table .product_row > .sell-form-discount-col::before,
  .pos-form-page.sell-form #pos_table .sell-form-discount-controls > br {
    display: none !important;
  }

  .pos-form-page.sell-form #pos_table .sell-form-discount-header {
    grid-area: discounttype;
    justify-self: end;
    width: 105px !important;
    max-width: 105px !important;
    position: static;
    margin: 0;
  }

  .pos-form-page.sell-form #pos_table .sell-form-discount-amount {
    grid-area: discount;
    min-width: 0;
  }

  .pos-form-page.sell-form #pos_table .sell-form-discount-amount::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 2px;
  }

  /* Subtotal */
  .pos-form-page.sell-form #pos_table
  .product_row > .pos-cart-subtotal-col {
    padding-top: 7px !important;
    margin-top: 3px;
  }
}