/*
 * Cloud portrait layout V1
 *
 * The cloud shell owns the vertical scroll. Transaction tables keep their
 * natural column width inside a local horizontal scroller, so a wide table
 * never makes the whole application wider than the viewport.
 */

:root {
  --cloud-layout-height: 100vh;
  --cloud-layout-inline-gap: max(8px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  /* The legacy responsive runtime writes the visual viewport here whenever
     the software keyboard opens. Keep the layout viewport stable instead. */
  --erp-visual-height: var(--cloud-layout-height) !important;
  --erp-visual-width: 100% !important;
}

@supports (height: 100svh) {
  :root { --cloud-layout-height: 100svh; }
}

html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

body :where(
  #appScreen,
  #launcherScreen,
  #launcherGroupScreen,
  #posScreen,
  .screen,
  .main,
  .page,
  .page > *,
  .modal-overlay,
  .modal-box
) {
  min-width: 0;
  max-width: 100%;
}

body #appScreen > .main,
body #appScreen .page {
  width: 100%;
  overflow-x: hidden;
}

body :where(img, video, canvas) {
  max-width: 100%;
  height: auto;
}

body :where(input, select, textarea) {
  max-width: 100%;
  touch-action: manipulation;
}

/* List-page commands wrap into readable rows instead of widening the page. */
body.ui-v19 .page-head {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

body.ui-v19 .page-head .v19-page-actions {
  flex-wrap: wrap !important;
  overflow: visible !important;
  max-width: 100%;
}

body.ui-v19 .page-head .v19-page-actions > button {
  flex: 1 1 170px !important;
  min-width: min(170px, 100%) !important;
  max-width: 100%;
  white-space: normal;
}

/* Transaction dialogs are vertical documents. Their header and footer remain
   in normal flow; the overlay scrolls when the document is taller than the
   screen. This also avoids a second, competing vertical scroll region. */
body :where(
  #salesInvoiceModal,
  #purchaseInvoiceModal,
  #salesReturnModal,
  #manualSalesReturnModal,
  #purchaseReturnModal,
  #quotationModal,
  #salesOrderModal,
  #purchaseOrderModal
) {
  width: auto !important;
  height: var(--cloud-layout-height) !important;
  min-height: var(--cloud-layout-height) !important;
  max-height: var(--cloud-layout-height) !important;
  max-width: 100vw !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

body :where(
  #salesInvoiceModal,
  #purchaseInvoiceModal,
  #salesReturnModal,
  #manualSalesReturnModal,
  #purchaseReturnModal,
  #quotationModal,
  #salesOrderModal,
  #purchaseOrderModal
) > .modal-box {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: min(100%, 1480px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

body #salesInvoiceModal > .si-workspace,
body #purchaseInvoiceModal > .fullscreen-modal {
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
}

body :where(
  #salesInvoiceModal,
  #purchaseInvoiceModal,
  #salesReturnModal,
  #manualSalesReturnModal,
  #purchaseReturnModal,
  #quotationModal,
  #salesOrderModal,
  #purchaseOrderModal
) :where(.fs-sticky-header, .si-workspace-header, .fs-sticky-footer, .si-summary-dock, .modal-actions) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: none !important;
}

body :where(#salesInvoiceModal, #purchaseInvoiceModal) :where(.fs-scroll-body, .si-workspace-body) {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body #salesInvoiceModal :where(.si-lines-shell, .si-lines-table-scroll) {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Every wide transaction table is clipped by its own reachable scroller. */
body .cloud-transaction-table-scroll,
body #purchaseInvoiceModal .tw-pi-expenses,
body #manualSalesReturnModal .msr-items-scroll {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

body .cloud-transaction-table-scroll > table,
body #purchaseInvoiceModal .tw-pi-expenses > table,
body #manualSalesReturnModal .msr-items-scroll > table {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

body #salesInvoiceModal .cloud-transaction-table-scroll > table { min-width: 680px !important; }
body :where(#salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal) .cloud-transaction-table-scroll > table { min-width: 720px !important; }
body :where(#quotationModal, #salesOrderModal, #purchaseOrderModal) .cloud-transaction-table-scroll > table { min-width: 760px !important; }
body #purchaseInvoiceModal .cloud-transaction-table-scroll > table { min-width: 1180px !important; }

/*
 * The deployed cloud bundle also loads erp-responsive-v20.css. Some of its
 * historical rules intentionally carry two ID selectors plus !important.
 * The never-matching ID guards below only raise selector specificity, giving
 * this final compatibility layer deterministic precedence without DOM changes.
 */
html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2) {
  width: auto !important;
  height: var(--cloud-layout-height) !important;
  min-height: var(--cloud-layout-height) !important;
  max-height: var(--cloud-layout-height) !important;
  max-width: 100vw !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2) > .modal-box {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  width: min(100%, 1480px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
:is(.fs-sticky-header, .si-workspace-header, .fs-sticky-footer, .si-summary-dock, .modal-actions) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
}

html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
:is(.fs-scroll-body, .si-workspace-body, .document-lines-scroll) {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
:is(.cloud-transaction-table-scroll, .msr-items-scroll) {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
:is(.cloud-transaction-table-scroll, .msr-items-scroll) > table {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

html body.ui-v19.erp-responsive-v20
#salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .cloud-transaction-table-scroll > table { min-width: 680px !important; }
html body.ui-v19.erp-responsive-v20
:is(#salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
:is(.cloud-transaction-table-scroll, .msr-items-scroll) > table { min-width: 720px !important; }
html body.ui-v19.erp-responsive-v20
:is(#quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
.cloud-transaction-table-scroll > table { min-width: 760px !important; }
html body.ui-v19.erp-responsive-v20
#purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal .cloud-transaction-table-scroll > table { min-width: 1180px !important; }

/* Invoice options use as many ordered rows as the available width needs. */
body #salesInvoiceModal :where(.si-titlebar, .si-title-block, .si-title-actions),
body #purchaseInvoiceModal .fs-sticky-header > div:first-child,
body #purchaseInvoiceModal .fs-sticky-header > div:first-child > div,
body #purchaseInvoiceModal .tw-pi-tabs,
body :where(#salesReturnModal, #manualSalesReturnModal) :where(.sr-primary-row, .sr-secondary-row, .msr-summary-row) {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap !important;
}

body #salesInvoiceModal .si-meta-grid,
body #purchaseInvoiceModal .si-compact-fields,
body :where(#quotationModal, #salesOrderModal, #purchaseOrderModal) > .modal-box > .field:first-of-type,
body #purchaseReturnModal > .modal-box > .field:first-of-type {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  align-items: end;
}

body #salesInvoiceModal .si-customer-field { grid-column: auto !important; }

body #salesInvoiceModal .si-footer-main {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  grid-template-areas: none !important;
}

body #salesInvoiceModal :where(.si-footer-left, .si-footer-right, #siDiscountInputBox, .si-action-buttons, .si-shortcuts),
body #purchaseInvoiceModal :where(.invoice-totals, .modal-actions) {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap !important;
}

body #salesInvoiceModal .si-footer-left > .invoice-totals,
body #purchaseInvoiceModal .fs-sticky-footer > .invoice-totals {
  display: grid !important;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  align-items: stretch !important;
}

body #salesInvoiceModal .si-action-buttons,
body :where(
  #purchaseInvoiceModal,
  #salesReturnModal,
  #manualSalesReturnModal,
  #purchaseReturnModal,
  #quotationModal,
  #salesOrderModal,
  #purchaseOrderModal
) .modal-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body #salesInvoiceModal .si-action-buttons > *,
body :where(
  #purchaseInvoiceModal,
  #salesReturnModal,
  #manualSalesReturnModal,
  #purchaseReturnModal,
  #quotationModal,
  #salesOrderModal,
  #purchaseOrderModal
) .modal-actions > * {
  flex: 1 1 170px !important;
  min-width: min(170px, 100%) !important;
  max-width: 100%;
}

/* Keep transaction headings, filters, totals and actions in source order even
   when older responsive rules assign fixed tracks or named grid areas. */
html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
:is(.si-titlebar, .si-title-block, .si-title-actions, .tw-pi-tabs, .sr-primary-row, .sr-secondary-row, .msr-summary-row) {
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
}

html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
:is(.si-meta-grid, .si-compact-fields),
html body.ui-v19.erp-responsive-v20
:is(#salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2) > .modal-box > .field:first-of-type {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  align-items: end !important;
  overflow-x: visible !important;
}

html body.ui-v19.erp-responsive-v20
#salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-field {
  min-width: 0 !important;
  grid-column: auto !important;
}

html body.ui-v19.erp-responsive-v20
#salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-footer-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  grid-template-areas: none !important;
  overflow: visible !important;
}

html body.ui-v19.erp-responsive-v20
#salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-footer-main > :is(
  .si-footer-left,
  .si-footer-right,
  .si-footer-tools,
  .si-footer-totals,
  .si-footer-actions,
  .si-action-buttons
) {
  grid-area: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
:is(.modal-actions, .si-action-buttons) {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

html body.ui-v19.erp-responsive-v20
:is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
:is(.modal-actions, .si-action-buttons) > * {
  flex: 1 1 170px !important;
  min-width: min(170px, 100%) !important;
  max-width: 100% !important;
}

@media (max-width: 1024px) {
  body.ui-v19 #appScreen > .main {
    height: var(--cloud-layout-height) !important;
    max-height: var(--cloud-layout-height) !important;
  }

  /* 16px prevents mobile Safari/Chromium from zooming the page when an
     editable field receives focus. The user's chosen larger size still wins. */
  body :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea
  ) {
    font-size: max(16px, calc(1.142857 * var(--app-font-size, 14px))) !important;
  }

  /* The never-matching ID guards only raise specificity so legacy per-screen
     typography cannot re-enable focus zoom on compact viewports. */
  html body.ui-v19.erp-responsive-v20 :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea
  ):not(#cloud-portrait-font-guard):not(#cloud-portrait-font-guard-2) {
    font-size: max(16px, calc(1.142857 * var(--app-font-size, 14px))) !important;
  }

  body.ui-v19 .page-head {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.ui-v19 .page-head .v19-page-actions {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  body #salesInvoiceModal .si-meta-grid,
  body #purchaseInvoiceModal .si-compact-fields,
  body :where(#quotationModal, #salesOrderModal, #purchaseOrderModal) > .modal-box > .field:first-of-type,
  body #purchaseReturnModal > .modal-box > .field:first-of-type,
  body :where(#salesReturnModal, #manualSalesReturnModal) :where(.sr-primary-row, .sr-secondary-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #salesInvoiceModal .si-customer-field,
  body :where(#salesReturnModal, #manualSalesReturnModal) :where(.sr-right, .sr-left) {
    grid-column: 1 / -1 !important;
  }

  body #salesInvoiceModal .si-footer-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body :where(
    #salesInvoiceModal,
    #purchaseInvoiceModal,
    #salesReturnModal,
    #manualSalesReturnModal,
    #purchaseReturnModal,
    #quotationModal,
    #salesOrderModal,
    #purchaseOrderModal
  ) > .modal-box {
    padding-inline: clamp(10px, 2.4vw, 18px) !important;
    border-radius: 0 !important;
  }

  body :where(#salesInvoiceModal, #purchaseInvoiceModal) > .fullscreen-modal {
    padding-inline: 0 !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2) > .modal-box {
    padding-inline: clamp(10px, 2.4vw, 18px) !important;
    border-radius: 0 !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
  :is(.si-meta-grid, .si-compact-fields, .sr-primary-row, .sr-secondary-row),
  html body.ui-v19.erp-responsive-v20
  :is(#salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2) > .modal-box > .field:first-of-type {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-field,
  html body.ui-v19.erp-responsive-v20
  :is(#salesReturnModal, #manualSalesReturnModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2) :is(.sr-right, .sr-left) {
    grid-column: 1 / -1 !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-footer-main {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }
}

@media (max-width: 600px) {
  body.ui-v19 .page-head,
  body.ui-v19 .page-head .v19-page-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ui-v19 .page-head .v19-page-actions > *,
  body.ui-v19 .page-head > :where(button, .btn-primary, .btn-ghost, .btn-danger) {
    width: 100% !important;
    min-width: 0 !important;
  }

  body #salesInvoiceModal .si-meta-grid,
  body #purchaseInvoiceModal .si-compact-fields,
  body :where(#quotationModal, #salesOrderModal, #purchaseOrderModal) > .modal-box > .field:first-of-type,
  body #purchaseReturnModal > .modal-box > .field:first-of-type,
  body :where(#salesReturnModal, #manualSalesReturnModal) :where(.sr-primary-row, .sr-secondary-row) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #salesInvoiceModal .si-footer-left > .invoice-totals,
  body #purchaseInvoiceModal .fs-sticky-footer > .invoice-totals,
  body #salesInvoiceModal :where(#siDiscountInputBox, .si-action-buttons) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #salesInvoiceModal :where(.si-titlebar, .si-title-block),
  body #purchaseInvoiceModal .fs-sticky-header > div:first-child {
    align-items: flex-start !important;
  }

  body #salesInvoiceModal .si-title-actions,
  body #purchaseInvoiceModal .fs-sticky-header > div:first-child > div:last-child,
  body #purchaseInvoiceModal .tw-pi-tabs {
    width: 100%;
  }

  body #purchaseInvoiceModal .tw-pi-tab { flex: 1 1 150px; }

  body :where(
    #salesInvoiceModal,
    #purchaseInvoiceModal,
    #salesReturnModal,
    #manualSalesReturnModal,
    #purchaseReturnModal,
    #quotationModal,
    #salesOrderModal,
    #purchaseOrderModal
  ) {
    padding: 0 !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2) {
    padding: 0 !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal, #salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2)
  :is(.si-meta-grid, .si-compact-fields, .sr-primary-row, .sr-secondary-row),
  html body.ui-v19.erp-responsive-v20
  :is(#salesReturnModal, #manualSalesReturnModal, #purchaseReturnModal, #quotationModal, #salesOrderModal, #purchaseOrderModal):not(#cloud-portrait-surface-guard):not(#cloud-portrait-surface-guard-2) > .modal-box > .field:first-of-type {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal :is(
    .si-footer-left > .invoice-totals,
    #siDiscountInputBox,
    .si-action-buttons
  ),
  html body.ui-v19.erp-responsive-v20
  #purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal .fs-sticky-footer > .invoice-totals {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Sales invoice customer picker: the legacy <=760px rule collapsed the
   "New customer" action to a clipped icon. Keep the action readable while
   allowing the searchable customer field to consume the remaining width. */
@media (max-width: 760px) {
  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto) !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-control > :is(
    select,
    .searchable-select-wrap
  ) {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-add-customer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 96px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-inline: 10px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-add-customer span {
    display: inline !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal #invoicePartyStatus-sales {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 3px !important;
    overflow-wrap: anywhere;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-quick-add-control,
  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal #siQuickSearch {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Purchase invoice density and contrast contract. Theme-wide button rules used
   to override one side of the tab colors; both foreground and background are
   therefore declared together at the final compatibility layer. */
html body.ui-v19 #purchaseInvoiceModal#purchaseInvoiceModal .tw-pi-tab {
  min-height: 36px !important;
  padding: 6px 14px !important;
  color: var(--v19-text, #182627) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--v19-surface, #fff) !important;
  border-color: var(--v19-line, #d4dfdf) !important;
  box-shadow: none !important;
}
html body.ui-v19 #purchaseInvoiceModal#purchaseInvoiceModal .tw-pi-tab:not(.is-active):hover {
  color: var(--v19-text, #182627) !important;
  background: var(--v19-light, #dbe7e7) !important;
  border-color: var(--v19-mid, #6f9295) !important;
}
html body.ui-v19 #purchaseInvoiceModal#purchaseInvoiceModal .tw-pi-tab.is-active {
  color: var(--v19-on-dark, #fff) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--v19-dark, #284b4f) !important;
  border-color: var(--v19-dark, #284b4f) !important;
  box-shadow: inset 0 -3px 0 var(--v19-base, #456f73) !important;
}
html[data-v19-preset="human-ai"] body.ui-v19 #purchaseInvoiceModal#purchaseInvoiceModal .tw-pi-tab.is-active {
  color: var(--human-on-action, #000) !important;
  background: var(--human-action, #d3ff4f) !important;
  border-color: var(--human-focus, #147d83) !important;
  box-shadow: inset 0 -3px 0 var(--human-focus, #147d83) !important;
}
body #purchaseInvoiceModal .fs-sticky-header { padding: clamp(7px, .75vw, 11px) clamp(9px, 1vw, 14px) !important; }
body #purchaseInvoiceModal .fs-sticky-header > div:first-child { gap: 6px !important; }
body #purchaseInvoiceModal .fs-sticky-header h2 { line-height: 1.25 !important; }
body #purchaseInvoiceModal .si-compact-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important; align-items: start !important; gap: 9px !important; margin-top: 6px !important; }
body #purchaseInvoiceModal .si-compact-fields > div { min-width: 0 !important; }
body #purchaseInvoiceModal .si-compact-fields label { margin-bottom: 3px !important; font-size: clamp(11px, .72vw, 12px) !important; line-height: 1.3 !important; }
body #purchaseInvoiceModal .si-compact-fields :where(input, select) { min-height: 35px !important; height: 35px !important; padding-block: 4px !important; }
body #purchaseInvoiceModal .si-compact-fields small { font-size: 10px !important; line-height: 1.35 !important; }
body #purchaseInvoiceModal .tw-pi-tabs { gap: 5px !important; padding: 5px 10px 0 !important; }
body #purchaseInvoiceModal .fs-scroll-body { padding: 7px 10px !important; }
body #purchaseInvoiceModal #twPiItemsPanel { min-height: clamp(360px, 52dvh, 680px) !important; }
body #purchaseInvoiceModal #twPiItemsPanel .cloud-transaction-table-scroll { min-height: clamp(300px, 45dvh, 610px) !important; }
body #purchaseInvoiceModal .purchase-invoice-lines :where(th, td) { padding-block: 5px !important; padding-inline: 5px !important; }
body #purchaseInvoiceModal .purchase-invoice-lines :where(input, select, textarea) { min-height: 34px !important; padding: 4px 6px !important; }
body #purchaseInvoiceModal .fs-sticky-footer { gap: 5px !important; padding: 6px 10px !important; }
body #purchaseInvoiceModal .fs-sticky-footer > .invoice-totals { gap: 5px 8px !important; }
body #purchaseInvoiceModal .fs-sticky-footer > .invoice-totals > div { min-height: 34px !important; padding: 5px 7px !important; }
body #purchaseInvoiceModal .fs-sticky-footer .modal-actions { gap: 6px !important; padding-block: 2px !important; }
body #purchaseInvoiceModal .tw-pi-expenses { padding: 9px 10px !important; }
body #purchaseInvoiceModal .tw-pi-expense-table-scroll { width: 100%; max-width: 100%; overflow-x: auto !important; }

@media (max-width: 600px) {
  body #purchaseInvoiceModal .si-compact-fields :where(input, select) { min-height: 42px !important; height: 42px !important; font-size: 16px !important; }
  body #purchaseInvoiceModal #twPiItemsPanel { min-height: clamp(330px, 48dvh, 520px) !important; }
  body #purchaseInvoiceModal #twPiItemsPanel .cloud-transaction-table-scroll { min-height: clamp(270px, 41dvh, 450px) !important; }
}

/* Purchase header, lines, totals and actions share the document scroll owner.
   Totals follow the final line instead of reserving a fixed bottom panel. */
html body.ui-v19.erp-responsive-v20
#purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal {
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none;
}

html body.ui-v19.erp-responsive-v20
#purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal > .fullscreen-modal {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

html body.ui-v19.erp-responsive-v20
#purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal .purchase-invoice-scroll-region {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block-end: 18px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

html body.ui-v19.erp-responsive-v20
#purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal .purchase-invoice-scroll-region > :is(.fs-sticky-header, .tw-pi-tabs, .fs-scroll-body) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

html body.ui-v19.erp-responsive-v20
#purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal .purchase-invoice-scroll-region > .fs-scroll-body {
  overflow: visible !important;
  padding-block-end: 18px !important;
}

html body.ui-v19.erp-responsive-v20
#purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal > .fs-sticky-footer {
  position: relative !important;
  inset: auto !important;
  z-index: 6;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: min(44svh, 360px) !important;
  margin: 0 !important;
  padding-block-end: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-top: 1px solid var(--v19-line, var(--line, #d4dfdf)) !important;
  box-shadow: 0 -8px 24px -18px rgba(8, 45, 53, .55) !important;
}

/* HUMAIN's apple/lime action surface is intentionally light. Keep the text and
   every nested icon/label black even when a module ships a later white rule. */
html[data-v19-preset="human-ai"] body.ui-v19 :is(
  .btn-primary,
  button.primary,
  .fs-toggle-btn,
  #launcherFloatingHome,
  #posScreen .pos-checkout-btn,
  #settingsTabs .settings-tab.active,
  .settings-tab.active,
  .role-btn.active,
  .pm-tab.active,
  .report-tab.active,
  .mod-report-tab.active,
  .dash-period-btn.active,
  .scope-toggle button.active,
  .pos-cat-tab.active,
  .v192-screen-tab.active,
  .workspace-top-group.active,
  #purchaseInvoiceModal .tw-pi-tab.is-active
) {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}

/* Generic active-tab rules in older modules have more class specificity than
   the theme's :where() rule. Reassert both halves of the HUMAIN contract. */
html[data-v19-preset="human-ai"] body.ui-v19 :is(
  #settingsTabs .settings-tab.active,
  .settings-tab.active,
  .role-btn.active,
  .pm-tab.active,
  .report-tab.active,
  .mod-report-tab.active,
  .dash-period-btn.active,
  .scope-toggle button.active,
  .pos-cat-tab.active,
  .v192-screen-tab.active,
  .workspace-top-group.active,
  #purchaseInvoiceModal .tw-pi-tab.is-active
) {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: var(--human-action, #d3ff4f) !important;
  background-image: none !important;
  border-color: var(--human-focus, #147d83) !important;
}

html[data-v19-preset="human-ai"] body.ui-v19 :is(
  .btn-primary,
  button.primary,
  .fs-toggle-btn,
  #launcherFloatingHome,
  #posScreen .pos-checkout-btn,
  #settingsTabs .settings-tab.active,
  .settings-tab.active,
  .role-btn.active,
  .pm-tab.active,
  .report-tab.active,
  .mod-report-tab.active,
  .dash-period-btn.active,
  .scope-toggle button.active,
  .pos-cat-tab.active,
  .v192-screen-tab.active,
  .workspace-top-group.active,
  #purchaseInvoiceModal .tw-pi-tab.is-active
) :where(i, span, strong, small) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-shadow: none !important;
}

@media (max-width: 600px) {
  html body.ui-v19.erp-responsive-v20
  #purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal > .fs-sticky-footer {
    max-height: min(46svh, 330px) !important;
    padding-inline: 8px !important;
  }

  html body.ui-v19.erp-responsive-v20
  #purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal > .fs-sticky-footer > .invoice-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #purchaseInvoiceModal .fs-sticky-footer > .invoice-totals > div {
    min-width: 0 !important;
    white-space: nowrap;
  }

  body #purchaseInvoiceModal .fs-sticky-footer #fPiInvoiceDiscount {
    flex: 1 1 58px;
    width: auto !important;
    min-width: 58px;
    max-width: 78px;
  }

  body #purchaseInvoiceModal .fs-sticky-footer .grand { grid-column: 1 / -1; }
  body #purchaseInvoiceModal .fs-sticky-footer .modal-actions { flex-wrap: nowrap !important; }
  body #purchaseInvoiceModal .fs-sticky-footer .modal-actions > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

@media (max-width: 350px) {
  html body.ui-v19.erp-responsive-v20
  #purchaseInvoiceModal#purchaseInvoiceModal#purchaseInvoiceModal > .fs-sticky-footer > .invoice-totals {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #purchaseInvoiceModal .fs-sticky-footer .grand { grid-column: auto; }
}

@media print {
  /* Screen containment must never constrain printed documents. */
  html,
  body { overflow: visible !important; }

  body .cloud-transaction-table-scroll,
  body #purchaseInvoiceModal .tw-pi-expenses,
  body #manualSalesReturnModal .msr-items-scroll {
    overflow: visible !important;
    max-width: none !important;
    scrollbar-gutter: auto;
  }
}

/* Give the visible customer selector enough width for real customer names on
   desktop. The fifth header field wraps instead of squeezing the selector. */
@media (min-width:901px) {
  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-field {
    grid-column:span 2!important;
  }
}

/* A long customer name and the add action each get a full, readable line on
   a phone. The picker remains above its load status and all five options. */
@media (max-width:760px) {
  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-control {
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-control > #fSiCustomer {
    grid-column:1!important;
    width:100%!important;
  }
  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-add-customer {
    grid-column:1!important;
    justify-self:start!important;
    width:auto!important;
    min-width:144px!important;
    color:var(--ink)!important;
    background:var(--brand-tint)!important;
    border:1px solid var(--brand)!important;
    font-size:calc(13/14*var(--app-font-size))!important;
    font-weight:800!important;
  }
  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-add-customer span {
    display:inline!important;
    color:inherit!important;
  }
  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-field > label {
    color:var(--ink)!important;
    font-size:calc(11/14*var(--app-font-size))!important;
  }
}

/* Invoice header: reserve real height for the customer name and add action.
   The ready notification remains available to assistive technology, not in
   the already crowded first viewport. Errors and retry controls stay visible. */
html body.ui-v19.erp-responsive-v20 #salesInvoiceModal .si-workspace-header{
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-payment-field.is-hidden{
  display:none!important;
}
html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-field{
  min-width:0!important;
  overflow:visible!important;
}
html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-field>label{
  font-size:calc(11/14*var(--app-font-size))!important;
  line-height:1.4!important;
}
html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-control{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  gap:8px!important;
  overflow:visible!important;
}
html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-control>#fSiCustomer{
  min-width:0!important;
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  padding-block:7px!important;
  line-height:1.4!important;
  font-size:calc(13/14*var(--app-font-size))!important;
  text-overflow:ellipsis;
}
html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-add-customer{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:115px!important;
  height:42px!important;
  min-height:42px!important;
  padding:7px 12px!important;
  color:var(--ink)!important;
  background:var(--brand-tint)!important;
  overflow:visible!important;
  white-space:nowrap!important;
  font-size:calc(12/14*var(--app-font-size))!important;
}
html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-add-customer span{
  display:inline!important;
  color:inherit!important;
}
#invoicePartyStatus-sales.invoice-party-ready{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
@media(min-width:1201px){
  html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-meta-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-meta-grid:has(.si-payment-field.is-hidden){
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-field{
    grid-column:span 2!important;
  }
}
@media(min-width:761px) and (max-width:1200px){
  html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-meta-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-field{
    grid-column:span 2!important;
  }
}
@media(max-width:760px){
  html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-customer-control{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body.ui-v19.erp-responsive-v20 #salesInvoiceModal#salesInvoiceModal#salesInvoiceModal .si-add-customer{
    grid-column:1!important;
    justify-self:start!important;
    min-width:140px!important;
  }
}

/* Keep the current tab's save control on the settings title row. */
html body.ui-v19 #page-settings>.settings-page-head{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
html body.ui-v19 #page-settings>.settings-page-head #settingsStickySaveBar{
  position:static!important;
  border:0!important;
  background:transparent!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
}
html body.ui-v19 #page-settings>.settings-page-head #settingsStickySaveBtn{
  min-height:38px!important;
  white-space:normal!important;
}
html body.ui-v19 #appScreen #mainSidebar,
html body.ui-v19 #appScreen #mainSidebar :is(.company,.nav-item,.nav-group-label,.sidebar-footer,button,input),
html body.ui-v19 #appScreen #workspaceTopNavigation :is(button,span){
  font-family:var(--app-font)!important;
}

/* Mobile dialogs share a single vertical document, including the purchase
   wrapper introduced after the original portrait rules. Keep these overrides
   screen-only so desktop workspaces and printed invoices are unchanged.
   The ID guards match the specificity of the historical compatibility layers;
   they do not depend on runtime-generated classes or alter hidden panels. */
@media screen and (max-width: 980px) {
  html body.ui-v19.erp-responsive-v20
  .modal-overlay:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3) {
    inset: 0 !important;
    width: 100% !important;
    height: var(--cloud-layout-height) !important;
    min-height: 0 !important;
    max-height: var(--cloud-layout-height) !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) var(--cloud-layout-inline-gap) max(8px, env(safe-area-inset-bottom, 0px)) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scroll-padding-block: 12px;
  }

  html body.ui-v19.erp-responsive-v20
  .modal-overlay:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3) > .modal-box {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal):not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.purchase-invoice-scroll-region, .fs-scroll-body, .si-workspace-body, .fs-sticky-header, .si-workspace-header, .fs-sticky-footer, .si-summary-dock) {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal):not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.fs-sticky-header, .si-workspace-header, .fs-scroll-body, .si-workspace-body, .fs-sticky-footer, .si-summary-dock) {
    padding: 10px 0 !important;
  }

  html body.ui-v19.erp-responsive-v20
  .modal-overlay:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.field, .si-meta-field, .si-compact-fields > div, .searchable-select-wrap, .pm-panel, .pm-row2) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* An 18px preferred font must not inherit a 29/35px desktop field height. */
  html body.ui-v19.erp-responsive-v20
  .modal-overlay:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):not(#cloud-mobile-control-guard) {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px 10px !important;
    font-size: max(16px, var(--app-font-size, 14px)) !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal):not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.si-meta-grid, .si-compact-fields) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal):not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.si-meta-field, .si-compact-fields > div) {
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal):not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.si-meta-field > label, .si-compact-fields > div > label, .si-quick-add-field > label, .si-notes-field > label) {
    height: auto !important;
    margin-bottom: 5px !important;
    font-size: max(13px, calc(.875 * var(--app-font-size, 14px))) !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }

  html body.ui-v19.erp-responsive-v20
  .modal-overlay:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.modal-actions, .si-action-buttons, .si-line-actions, .pm-tabs) {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin-inline: 0 !important;
    overflow: visible !important;
  }

  html body.ui-v19.erp-responsive-v20
  .modal-overlay:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.modal-actions, .si-action-buttons, .si-line-actions, .pm-tabs) > button {
    flex: 1 1 140px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 9px 12px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3) .si-quick-add-control {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 44px !important;
    overflow: visible !important;
    padding: 6px !important;
    gap: 6px !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3) .si-quick-add-control > input {
    flex: 1 1 220px !important;
    width: auto !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3) .si-quick-add-control > button {
    width: auto !important;
    min-width: 120px !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    white-space: normal !important;
  }

  html body.ui-v19.erp-responsive-v20
  #salesInvoiceModal:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3) .si-quick-add-control > button > span {
    display: inline !important;
  }
}

@media screen and (max-width: 600px) {
  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal):not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.si-meta-grid, .si-compact-fields, .invoice-totals, #siDiscountInputBox) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.ui-v19.erp-responsive-v20
  :is(#salesInvoiceModal, #purchaseInvoiceModal):not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  .invoice-totals > div {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html body.ui-v19.erp-responsive-v20
  .modal-overlay:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3)
  :is(.modal-box, .pm-panel, .si-installment-panel) > [style*="grid-template-columns"],
  html body.ui-v19.erp-responsive-v20
  .modal-overlay:not(#cloud-mobile-dialog-guard):not(#cloud-mobile-dialog-guard-2):not(#cloud-mobile-dialog-guard-3) .pm-row2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* The compact tailoring module keeps five measurement columns even on a
   phone. Women use the labelled field grid; men's illustrated layout keeps
   its separate measurement cards and coordinate system. */
@media screen and (max-width: 980px) {
  html body.ui-v19.erp-responsive-v20
  #tailoringOrderModal:not(.v197-tailoring-men-fullscreen):not(#cloud-mobile-tailoring-guard) #toMeasurementsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.ui-v19.erp-responsive-v20
  #tailoringOrderModal:not(.v197-tailoring-men-fullscreen):not(#cloud-mobile-tailoring-guard) #toMeasurementsGrid label {
    height: auto !important;
    max-height: none !important;
    font-size: max(13px, calc(.875 * var(--app-font-size, 14px))) !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* The illustration is 2:3, but its mobile canvas is only 300px high.
     Derive its width from that available height, not viewport-relative cqh,
     so the garment and its positioned measurement points remain together. */
  html body.ui-v19.erp-responsive-v20
  #tailoringOrderModal:not(#cloud-mobile-tailoring-guard) .to-diagram-canvas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.ui-v19.erp-responsive-v20
  #tailoringOrderModal:not(#cloud-mobile-tailoring-guard) .to-diagram-figure {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 2 / 3 !important;
    margin: auto !important;
  }
}

@media screen and (max-width: 360px) {
  html body.ui-v19.erp-responsive-v20
  #tailoringOrderModal:not(.v197-tailoring-men-fullscreen):not(#cloud-mobile-tailoring-guard) #toMeasurementsGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}