/**
 * POS Form Responsive (pos-form-*)
 * Reusable mobile-friendly form layout for ERP modules (Products, Contacts, etc.).
 *
 * Opt-in: wrap a form (or page content) with .pos-form-page.
 * Desktop (≥768px): intentionally minimal — preserve existing Bootstrap/AdminLTE density.
 * Mobile (≤767px): compact single-column, balanced flex pairs, sticky page actions.
 *
 * Do NOT use .pos-form-actions here — that class is reserved for POS checkout chrome.
 * Page footers: .pos-form-page-actions / .pos-form-page-actions--sticky
 */

.pos-form-page {
  --pos-form-accent: #047857;
  --pos-form-accent-soft: #ecfdf5;
  --pos-form-border: #e2e8f0;
  --pos-form-text: #0f172a;
  --pos-form-muted: #64748b;
  --pos-form-bg: #ffffff;
  --pos-form-radius: 8px;
  --pos-form-gap: 8px;
  --pos-form-gap-sm: 4px;
  --pos-form-pad: 8px;
  /* Mobile control height (≤767px). Desktop leaves AdminLTE/Bootstrap defaults. */
  --pos-form-input-h: 32px;
  --pos-form-btn-h: 32px;
  --pos-form-font: 16px;
  --pos-form-label: 12px;
  --pos-form-sticky-h: 84px;
  max-width: 100%;
  min-width: 0;
}

/* ---------- Sections (visual grouping only; keep field DOM order) ---------- */
.pos-form-page .pos-form-section {
  margin: 0;
}

.pos-form-page .pos-form-section__header {
  display: none;
}

.pos-form-page .pos-form-section__body {
  min-width: 0;
}

/*
 * Collapsible sections (More info, etc.) — collapsed by default to save screen space.
 * Toggle is always visible; body uses Bootstrap .collapse.
 */
.pos-form-page .pos-form-section--collapsible > .pos-form-section__header,
.pos-form-page .pos-form-section--collapsible > .pos-form-section__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--pos-form-border);
  border-radius: var(--pos-form-radius);
  background: #f8fafc;
  color: var(--pos-form-text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  line-height: 1.3;
}

.pos-form-page .pos-form-section--collapsible > .pos-form-section__toggle:hover,
.pos-form-page .pos-form-section--collapsible > .pos-form-section__toggle:focus {
  background: #f1f5f9;
  outline: none;
  border-color: #cbd5e1;
}

.pos-form-page .pos-form-section__chevron {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--pos-form-muted);
  transition: transform 0.15s ease;
}

.pos-form-page .pos-form-section__toggle[aria-expanded="true"] .pos-form-section__chevron {
  transform: rotate(180deg);
}

.pos-form-page .pos-form-section--collapsible > .pos-form-section__body.collapse:not(.in):not(.show) {
  display: none;
}

.pos-form-page .pos-form-section--collapsible > .pos-form-section__body.collapse.in,
.pos-form-page .pos-form-section--collapsible > .pos-form-section__body.collapse.show,
.pos-form-page .pos-form-section--collapsible > .pos-form-section__body.collapsing {
  margin-top: 6px;
}

/* History block — collapsed by default; keep tight against form / sticky footer */
.pos-form-page .pos-form-history,
.pos-form-page #product_activity_history {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.pos-form-page #product_activity_history > .box-header {
  padding: 8px 10px;
}

.pos-form-page #product_activity_history > .box-body {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ---------- Grid / field helpers ---------- */
.pos-form-page .pos-form-grid {
  display: block;
}

.pos-form-page .pos-form-field {
  min-width: 0;
}

.pos-form-page .pos-form-field--full {
  width: 100%;
}

.pos-form-page .pos-form-field--half {
  width: 100%;
}

/* Select + Add button */
.pos-form-page .pos-form-select-action.input-group,
.pos-form-page .input-group.pos-form-select-action {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
}

.pos-form-page .pos-form-select-action > .form-control,
.pos-form-page .pos-form-select-action > .select2-container {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
}

.pos-form-page .pos-form-select-action > .input-group-btn {
  flex: 0 0 auto;
  width: auto;
}

.pos-form-page .pos-file-upload,
.pos-form-page .pos-rich-editor,
.pos-form-page .pos-form-pricing {
  max-width: 100%;
  min-width: 0;
}

.pos-form-page .pos-file-upload .file-input,
.pos-form-page .pos-file-upload .kv-upload-progress,
.pos-form-page .pos-file-upload .file-preview {
  max-width: 100%;
}

.pos-form-page .pos-rich-editor {
  overflow: hidden;
}

.pos-form-page .pos-rich-editor .tox-tinymce {
  max-width: 100%;
}

/* Page action footer (NOT POS checkout .pos-form-actions) */
.pos-form-page .pos-form-page-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding: 4px 0;
  background: transparent;
}

.pos-form-page .pos-form-page-actions .erp-form-actions,
.pos-form-page .pos-form-page-actions .btn-group.erp-form-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: auto;
  max-width: 100%;
}

/* ==========================================================================
   Small phones ≤374px — densest spacing
   ========================================================================== */
@media (max-width: 374px) {
  .pos-form-page {
    --pos-form-gap: 6px;
    --pos-form-pad: 6px;
    --pos-form-input-h: 32px;
    --pos-form-btn-h: 32px;
    --pos-form-sticky-h: 84px;
  }
}

/* ==========================================================================
   Mobile ≤767px — primary responsive layer
   ========================================================================== */
@media (max-width: 767px) {
  .pos-form-page {
    overflow-x: hidden;
    padding-bottom: calc(var(--pos-form-sticky-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  .pos-form-page.sell-form {
    --pos-form-sticky-h: 52px;
  }

  /* Tighten widget cards that wrap form sections */
  .pos-form-page .tw-mb-4 {
    margin-bottom: 8px !important;
  }

  .pos-form-page .tw-p-2 {
    padding: 6px !important;
  }

  .pos-form-page .sm\:tw-p-3 {
    padding: 6px !important;
  }

  .pos-form-page .tw-py-2 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .pos-form-page .sm\:tw-px-5 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .pos-form-page .pos-form-section__header {
    display: block;
    margin: 0 0 6px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--pos-form-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--pos-form-text);
    letter-spacing: 0.01em;
  }

  .pos-form-page .pos-form-section + .pos-form-section {
    margin-top: 0;
  }

  /* Symmetric column stack — equal gutters, no float leftovers */
  .pos-form-page .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -4px;
    margin-right: -4px;
  }

  .pos-form-page .row > [class*="col-"] {
    float: none;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
  }

  .pos-form-page .clearfix {
    display: none;
  }

  .pos-form-page .form-group {
    margin-bottom: var(--pos-form-gap);
  }

  .pos-form-page .form-group > br {
    display: none;
  }

  /* Label + tooltip on one line; control on next */
  .pos-form-page .form-group > label,
  .pos-form-page .form-group label:not(.product-option-label):not(.form-check-label) {
    display: inline;
    font-size: var(--pos-form-label);
    font-weight: 600;
    color: var(--pos-form-text);
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    margin: 0 4px 0 0;
  }

  .pos-form-page .form-group > .hover-q,
  .pos-form-page .form-group > .fa-info-circle {
    display: inline;
    margin: 0 2px 0 0;
    vertical-align: middle;
  }

  .pos-form-page .form-group > .form-control,
  .pos-form-page .form-group > .file-input {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
  }

  /* Keep select+Add on one row — do NOT force display:block on .input-group */
  .pos-form-page .form-group > .input-group {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
  }

  /* multi-input stays flex (never display:block — that stacked pay term) */
  .pos-form-page .form-group > .multi-input {
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
  }

  /* Select2 alone (no Add button) */
  .pos-form-page .form-group > select.select2 + .select2-container,
  .pos-form-page .form-group > .select2-container:only-of-type {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin-top: 4px;
  }

  .pos-form-page .help-block {
    font-size: 11px;
    line-height: 1.35;
    margin-top: 3px;
    margin-bottom: 0;
  }

  /* Compact controls — 32px on mobile only; 16px font avoids iOS zoom */
  .pos-form-page .form-control,
  .pos-form-page input.form-control,
  .pos-form-page select.form-control,
  .pos-form-page textarea.form-control {
    min-height: var(--pos-form-input-h) !important;
    height: var(--pos-form-input-h) !important;
    font-size: var(--pos-form-font);
    line-height: 1.25;
    padding: 4px 8px !important;
    border-radius: var(--pos-form-radius);
    max-width: 100%;
    box-sizing: border-box;
  }

  .pos-form-page textarea.form-control {
    min-height: 72px !important;
    height: auto !important;
  }

  .pos-form-page .form-control.input-sm {
    min-height: var(--pos-form-input-h) !important;
    height: var(--pos-form-input-h) !important;
    font-size: var(--pos-form-font);
    padding: 4px 8px !important;
  }

  /* Select2 — full width only when NOT beside an Add (+) button */
  .pos-form-page .select2-container {
    max-width: 100%;
  }

  .pos-form-page .form-group > .select2-container,
  .pos-form-page .form-group > select.select2 ~ .select2-container:last-child {
    width: 100% !important;
  }

  .pos-form-page .select2-container .select2-selection--single {
    min-height: var(--pos-form-input-h) !important;
    height: var(--pos-form-input-h) !important;
    border-radius: var(--pos-form-radius);
    display: flex;
    align-items: center;
  }

  .pos-form-page .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: var(--pos-form-font);
    line-height: 1.3;
    padding-left: 10px;
    padding-right: 26px;
  }

  .pos-form-page .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
  }

  .pos-form-page .select2-container .select2-selection--multiple {
    min-height: var(--pos-form-input-h);
    border-radius: var(--pos-form-radius);
    padding: 2px 4px;
  }

  .pos-form-page .select2-container .select2-selection--multiple .select2-selection__choice {
    font-size: 12px;
    margin-top: 2px;
  }

  /*
   * Input-group: select + Add (+) must stay on ONE row.
   * Select2 injects .select2-container as a sibling — never force it to width:100% here.
   */
  .pos-form-page .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }

  .pos-form-page .input-group > select.form-control,
  .pos-form-page .input-group > .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none;
  }

  .pos-form-page .input-group > .select2-container,
  .pos-form-page .input-group > span.select2 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .pos-form-page .input-group > .select2-container .select2-selection--single {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .pos-form-page .input-group-btn {
    flex: 0 0 32px !important;
    width: 32px !important;
    max-width: 32px;
    font-size: inherit;
    display: flex !important;
    align-items: stretch;
    position: relative;
    white-space: nowrap;
  }

  .pos-form-page .input-group-btn > .btn {
    flex: 1 1 auto;
    min-height: var(--pos-form-btn-h) !important;
    height: var(--pos-form-btn-h) !important;
    min-width: 32px;
    width: 100%;
    padding: 0;
    border-radius: 0 var(--pos-form-radius) var(--pos-form-radius) 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
  }

  .pos-form-page .input-group .form-control:first-child,
  .pos-form-page .input-group .select2-container:first-child .select2-selection,
  .pos-form-page .input-group > .select2-container .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* Multi-input: label on its own row; controls side-by-side */
  .pos-form-page .multi-input {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: stretch;
    margin-top: 0;
  }

  .pos-form-page .multi-input > label,
  .pos-form-page .multi-input > .hover-q,
  .pos-form-page .multi-input > .fa-info-circle {
    flex: 0 0 auto;
  }

  .pos-form-page .multi-input > label {
    flex: 1 1 auto;
    margin: 0 4px 0 0;
  }

  .pos-form-page .multi-input > br {
    display: none;
  }

  /* Force a new row for the control pair after label/tooltip */
  .pos-form-page .multi-input > .form-control,
  .pos-form-page .multi-input > .select2-container,
  .pos-form-page .multi-input > select.form-control {
    float: none !important;
    flex: 1 1 calc(50% - 3px);
    width: auto !important;
    min-width: 0;
    max-width: none;
  }

  .pos-form-page .multi-input > .form-control.width-40,
  .pos-form-page .multi-input > .width-40 {
    flex: 1 1 40%;
  }

  .pos-form-page .multi-input > .form-control.width-60,
  .pos-form-page .multi-input > .width-60,
  .pos-form-page .multi-input > select.width-60 {
    flex: 1 1 55%;
  }

  /* Option checkboxes — compact */
  .pos-form-page .product-option-label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    padding: 2px 0;
    margin: 0;
  }

  .pos-form-page .product-option-label span {
    white-space: normal;
    word-break: break-word;
  }

  /* File upload */
  .pos-form-page .pos-file-upload,
  .pos-form-page .file-input,
  .pos-form-page .kv-main-upload,
  .pos-form-page .file-preview {
    max-width: 100%;
    overflow: hidden;
  }

  .pos-form-page .file-preview .file-preview-frame {
    float: none;
    display: block;
    margin: 0 auto 6px;
    max-width: 100%;
  }

  .pos-form-page .btn-file,
  .pos-form-page .file-input .btn {
    min-height: var(--pos-form-btn-h);
    height: var(--pos-form-btn-h);
  }

  .pos-form-page input[type="file"] {
    max-width: 100%;
    font-size: 14px;
  }

  /* TinyMCE */
  .pos-form-page .pos-rich-editor,
  .pos-form-page .tox-tinymce {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .pos-form-page .tox .tox-toolbar,
  .pos-form-page .tox .tox-toolbar__primary,
  .pos-form-page .tox .tox-toolbar__overflow {
    flex-wrap: wrap !important;
  }

  .pos-form-page .tox .tox-editor-header {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .pos-form-page .tox .tox-edit-area__iframe {
    max-width: 100%;
  }

  .pos-form-page .tox-tinymce {
    margin-top: 4px !important;
  }

  /* Generic pricing stack */
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack .table-responsive {
    border: 0;
    margin: 0;
    overflow: visible;
  }

  .pos-form-page .pos-form-pricing.pos-form-pricing--stack > .table-responsive > table.add-product-price-table,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack table.pos-form-pricing-table {
    display: block;
    width: 100%;
    border: 0;
    margin: 0;
  }

  .pos-form-page .pos-form-pricing.pos-form-pricing--stack > .table-responsive > table.add-product-price-table > tbody,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack > .table-responsive > table.add-product-price-table > thead,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack table.pos-form-pricing-table > tbody,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack table.pos-form-pricing-table > thead {
    display: block;
    width: 100%;
  }

  .pos-form-page .pos-form-pricing.pos-form-pricing--stack > .table-responsive > table.add-product-price-table > thead,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack table.pos-form-pricing-table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .pos-form-page .pos-form-pricing.pos-form-pricing--stack > .table-responsive > table.add-product-price-table > tbody > tr,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack table.pos-form-pricing-table > tbody > tr {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: var(--pos-form-pad);
    border: 1px solid var(--pos-form-border);
    border-radius: var(--pos-form-radius);
    background: var(--pos-form-bg);
  }

  .pos-form-page .pos-form-pricing.pos-form-pricing--stack > .table-responsive > table.add-product-price-table > tbody > tr > td,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack > .table-responsive > table.add-product-price-table > tbody > tr > th,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack table.pos-form-pricing-table > tbody > tr > td,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack table.pos-form-pricing-table > tbody > tr > th {
    display: block;
    width: 100% !important;
    max-width: 100%;
    border: 0 !important;
    padding: 4px 0 !important;
  }

  .pos-form-page .pos-form-pricing.pos-form-pricing--stack > .table-responsive > table.add-product-price-table > tbody > tr > td[data-label]:not([data-label=""])::before,
  .pos-form-page .pos-form-pricing.pos-form-pricing--stack table.pos-form-pricing-table > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--pos-form-muted);
    margin-bottom: 3px;
  }

  /* Opening stock rows keep their table DOM for row insertion and total calculations. */
  .opening-stock-content {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .opening-stock-form .opening-stock-table-wrap {
    overflow: visible !important;
    border: 0;
    margin: 0;
  }

  .opening-stock-form .opening-stock-box > .box-header {
    padding: 8px 6px;
  }

  .opening-stock-form .opening-stock-box > .box-header .box-title {
    font-size: 14px;
  }

  .opening-stock-form .opening-stock-box > .box-body {
    padding: 6px;
  }

  .opening-stock-form .add_opening_stock_table,
  .opening-stock-form .add_opening_stock_table > tbody,
  .opening-stock-form .add_opening_stock_table > tfoot {
    display: block;
    width: 100%;
    border: 0;
  }

  .opening-stock-form .add_opening_stock_table > thead {
    display: none;
  }

  .opening-stock-form .add_opening_stock_table > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    width: 100%;
    margin: 0 0 8px;
    border-radius: var(--pos-form-radius, 8px);
    background: #fff;
  }

  .opening-stock-form .add_opening_stock_table > tbody > tr > td {
    display: block;
    width: 100% !important;
    min-width: 0;
    border: 0 !important;
    padding: 4px 0 !important;
    text-align: left !important;
  }

  .opening-stock-form .add_opening_stock_table > tbody > tr > .opening-stock-product,
  .opening-stock-form .add_opening_stock_table > tbody > tr > .opening-stock-extra,
  .opening-stock-form .add_opening_stock_table > tbody > tr > .opening-stock-subtotal,
  .opening-stock-form .add_opening_stock_table > tbody > tr > .opening-stock-date,
  .opening-stock-form .add_opening_stock_table > tbody > tr > .opening-stock-note,
  .opening-stock-form .add_opening_stock_table > tbody > tr > .opening-stock-add-row {
    grid-column: 1 / -1;
  }

  .opening-stock-form .add_opening_stock_table > tbody > tr > .opening-stock-product {
    padding: 0 0 6px !important;
    border-bottom: 1px solid var(--pos-form-border, #e2e8f0) !important;
    color: var(--pos-form-text, #0f172a);
    font-size: 13px;
    font-weight: 700;
  }

  .opening-stock-form .opening-stock-product::before {
    display: none !important;
  }

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

  .opening-stock-form .add_opening_stock_table > tbody > tr > .opening-stock-subtotal {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 2px !important;
    border-top: 1px solid var(--pos-form-border, #e2e8f0) !important;
    font-weight: 600;
  }

  .opening-stock-form .opening-stock-subtotal::before {
    display: inline-block !important;
    margin: 0;
  }

  .opening-stock-form .opening-stock-subtotal .row_subtotal_before_tax {
    margin-left: auto;
    text-align: right;
  }

  .opening-stock-form .add_opening_stock_table > tbody > tr > .opening-stock-add-row {
    display: flex !important;
    justify-content: flex-end;
    padding: 0 !important;
  }

  .opening-stock-form .opening-stock-add-row:not(:has(.add_stock_row)) {
    display: none !important;
  }

  .opening-stock-form .add_opening_stock_table .input-group-addon {
    flex: 0 0 auto;
    width: auto !important;
    min-width: max-content;
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 6px;
  }

  .opening-stock-form .add_opening_stock_table .input-group > .purchase_quantity {
    flex: 1 1 0%;
    width: 0 !important;
    min-width: 0;
  }

  .opening-stock-form .add_opening_stock_table > tfoot > tr {
    display: block;
    text-align: right;
  }

  .opening-stock-form .add_opening_stock_table > tfoot > tr > td:first-child {
    display: none;
  }

  .opening-stock-form .add_opening_stock_table > tfoot > tr > td:last-child {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-align: right;
  }

  .opening-stock-form .pos-form-page-actions .erp-form-actions,
  .opening-stock-form .pos-form-page-actions .btn-big {
    width: 100%;
  }

  /*
   * Sticky page actions — reuses existing submit buttons.
   * Compact flex: primary full-width, secondaries equal halves.
   */
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    margin: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--pos-form-border);
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
    justify-content: stretch;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Keep last form row flush — low gap above sticky footer */
  .pos-form-page > .row:has(.pos-form-page-actions--sticky),
  .pos-form-page .row:has(.pos-form-page-actions--sticky) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky.erp-form-actions-wrap,
  .pos-form-page .erp-form-actions-wrap.pos-form-page-actions--sticky {
    padding-top: 0;
  }

  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions,
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .btn-group.erp-form-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
  }

  /*
   * Compact flex footer:
   * - Primary (Update/Save) full width on top
   * - Secondary actions share one row (equal flex) — no stacked height waste
   * - nowrap + smaller type keeps long labels on one line
   */
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > .tw-dw-btn,
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > .btn,
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > button,
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > .tw-dw-btn-lg,
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > .tw-dw-btn-primary,
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > .tw-dw-btn-outline {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    min-height: var(--pos-form-btn-h) !important;
    height: var(--pos-form-btn-h) !important;
    max-height: var(--pos-form-btn-h) !important;
    margin: 0;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-align: center;
    line-height: 1 !important;
    font-size: 12px;
    font-weight: 600;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > button[value="submit"],
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > button.tw-dw-btn-primary.tw-dw-btn-lg {
    flex: 1 1 100% !important;
    order: -1;
    min-height: var(--pos-form-btn-h) !important;
    height: var(--pos-form-btn-h) !important;
    max-height: var(--pos-form-btn-h) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    background-color: var(--pos-form-accent);
    border-color: var(--pos-form-accent);
    color: #fff;
  }

  /* Sell create: Save + Save & Print side-by-side (only two actions) */
  .pos-form-page.sell-form .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > button[value="submit"],
  .pos-form-page.sell-form .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > button.tw-dw-btn-primary.tw-dw-btn-lg,
  .pos-form-page.sell-form .pos-form-page-actions.pos-form-page-actions--sticky .erp-form-actions > #save-and-print {
    flex: 1 1 calc(50% - 3px) !important;
    order: 0;
  }

  /*
   * Sell create (/sells/create): denser mobile layout.
   * Widget slot cols are NOT .row > col, so tighten all nested Bootstrap cols.
   */
  .content:has(.pos-form-page.sell-form),
  .content.pos-form-sell-shell {
    padding: 8px 8px 0 !important;
  }

  .content-header:has(+ .content .pos-form-page.sell-form),
  .content-header.pos-form-sell-shell-header {
    padding: 8px 8px 0 !important;
  }

  .content-header:has(+ .content .pos-form-page.sell-form) h1,
  .content-header.pos-form-sell-shell-header h1 {
    font-size: 1.125rem !important;
    line-height: 1.25;
    margin: 0;
  }

  /* Location picker above the form */
  .content:has(.pos-form-page.sell-form) > .row:first-of-type,
  .content.pos-form-sell-shell > .row:first-of-type {
    margin-left: -4px;
    margin-right: -4px;
    margin-bottom: 4px;
  }

  .content:has(.pos-form-page.sell-form) > .row:first-of-type > [class*="col-"],
  .content.pos-form-sell-shell > .row:first-of-type > [class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
  }

  .content:has(.pos-form-page.sell-form) > .row:first-of-type .form-group,
  .content.pos-form-sell-shell > .row:first-of-type .form-group {
    margin-bottom: 4px;
  }

  .pos-form-page.sell-form {
    padding-bottom: calc(var(--pos-form-sticky-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  .pos-form-page.sell-form .box-solid,
  .pos-form-page.sell-form [class*="tw-rounded"] {
    margin-bottom: 8px !important;
    padding: 0px 10px !important;
  }

  .pos-form-page.sell-form .tw-p-2,
  .pos-form-page.sell-form .sm\:tw-p-3 {
    padding: 6px !important;
  }

  .pos-form-page.sell-form .tw-py-2 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .pos-form-page.sell-form .sm\:tw-px-5 {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Widget slot: flex-wrap so half-pairs can sit side-by-side */
  .pos-form-page.sell-form .tw-align-middle {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -4px;
    margin-right: -4px;
  }

  /* Nested cols inside widget (not direct .row children) */
  .pos-form-page.sell-form [class*="col-md-"],
  .pos-form-page.sell-form [class*="col-sm-"],
  .pos-form-page.sell-form [class*="col-xs-"],
  .pos-form-page.sell-form [class*="col-lg-"] {
    float: none !important;
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .pos-form-page.sell-form .pull-left,
  .pos-form-page.sell-form .pull-right {
    float: none !important;
  }

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

  /* Customer billing / shipping addresses — compact stack */
  .pos-form-page.sell-form .sell-form-customer-addresses {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--pos-form-muted);
  }

  .pos-form-page.sell-form .sell-form-customer-addresses > br {
    display: none;
  }

  .pos-form-page.sell-form .sell-form-customer-addresses strong {
    display: block;
    color: var(--pos-form-text);
    font-size: 11px;
  }

  .pos-form-page.sell-form .sell-form-customer-addresses #billing_address_div,
  .pos-form-page.sell-form .sell-form-customer-addresses #shipping_address_div {
    margin: 0;
  }

  .pos-form-page.sell-form .input-group-addon {
    padding: 4px 8px !important;
    min-width: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .pos-form-page.sell-form .box-header {
    padding: 4px 6px !important;
  }

  .pos-form-page.sell-form .box-header .box-title {
    font-size: 13px;
    line-height: 1.3;
  }

  /* Side-by-side pairs (discount type / amount) */
  .pos-form-page.sell-form .sell-form-half {
    flex: 1 1 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    display: inline-block;
    vertical-align: top;
  }

  .pos-form-page.sell-form .help-block {
    font-size: 10px;
    line-height: 1.3;
    margin-top: 2px;
  }

  .pos-form-page.sell-form .file-input .btn,
  .pos-form-page.sell-form .btn-file {
    min-height: 32px !important;
    height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 32px !important;
  }

  .pos-form-page.sell-form .well {
    padding: 8px !important;
    margin-bottom: 8px;
  }

  /* Product table card layout lives in sale-form.css */
}

/* Larger phones: roomier spacing only — keep 32px control height */
@media (min-width: 375px) and (max-width: 767px) {
  .pos-form-page {
    --pos-form-gap: 8px;
    --pos-form-pad: 8px;
    --pos-form-input-h: 32px;
    --pos-form-btn-h: 32px;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .pos-form-page {
    --pos-form-gap: 10px;
    --pos-form-pad: 10px;
    --pos-form-input-h: 32px;
    --pos-form-btn-h: 32px;
    --pos-form-sticky-h: 84px;
  }

  /* Symmetric two-column fields where marked */
  .pos-form-page .pos-form-field--half {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 4px);
  }

  /* On mid-width phones, allow row cols to share space in pairs when short */
  .pos-form-page .row > .col-sm-6 {
    flex: 1 1 calc(50% - 8px);
    width: calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
}

/* Desktop: restore static footer; leave density alone */
@media (min-width: 768px) {
  .pos-form-page .pos-form-page-actions.pos-form-page-actions--sticky {
    position: static;
    box-shadow: none;
    border-top: 0;
    background: transparent;
    margin: 0;
    padding: 4px 0 8px;
  }

  .pos-form-page .pos-form-field--half {
    width: 50%;
  }
}