/* CMD P17.1-H6 — Mobile operations for Công nợ, Thực hiện thanh toán and Trả hàng NCC. */

body.cmd-p17-mobile :is(#paymentsView, #debtsView, #supplierReturnsView).cmd-mobile-operation-surface-p17h6,
body.cmd-p17-mobile :is(#paymentsView, #debtsView, #supplierReturnsView).cmd-mobile-operation-surface-p17h6 > *,
body.cmd-p17-mobile #paymentsView .b24-payment-tabs,
body.cmd-p17-mobile #paymentsView :is(#paymentExistingB24, #paymentReceivableB24) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.cmd-p17-mobile #paymentsView .b24-payment-tabs {
  display: grid;
  gap: 10px;
}

body.cmd-p17-mobile #paymentsView .b24-tab-buttons.cmd-mobile-operation-tabs-p17h6 {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: visible;
  touch-action: pan-y;
}

body.cmd-p17-mobile #paymentsView .b24-tab-buttons.cmd-mobile-operation-tabs-p17h6 > .b24-module-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  white-space: normal;
}

body.cmd-p17-mobile #debtsView .cmd-mobile-operation-tabs-p17h6 {
  position: static;
  display: flex;
  max-width: 100%;
  gap: 6px;
  margin-block: 0 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

body.cmd-p17-mobile #debtsView .cmd-mobile-operation-tabs-p17h6 > button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 7px 10px;
  white-space: nowrap;
}

body.cmd-p17-mobile #paymentsView :is(#paymentExistingB24, #paymentReceivableB24) {
  position: relative;
  z-index: 0;
  padding-top: 2px;
}

body.cmd-p17-mobile :is(#paymentsView, #supplierReturnsView) .panel {
  min-width: 0;
  margin-top: 10px;
  border-radius: 13px;
}

body.cmd-p17-mobile :is(#paymentsView, #supplierReturnsView) .panel-header {
  min-width: 0;
  gap: 9px;
  padding: 11px 12px;
}

body.cmd-p17-mobile :is(#paymentsView, #supplierReturnsView) .panel-header h3 {
  margin: 0;
  font-size: .9rem;
  line-height: 1.3;
}

body.cmd-p17-mobile :is(#paymentsView, #supplierReturnsView) .panel-header :is(small, .muted) {
  font-size: var(--cmd-mobile-caption-font, .7rem);
  line-height: 1.35;
}

body.cmd-p17-mobile :is(#paymentsView, #supplierReturnsView) .cmd-mobile-operation-filter-p17h6 > .panel-header,
body.cmd-p17-mobile #paymentsView .panel-header:has(.qscm-h6-list-actions) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

body.cmd-p17-mobile #paymentsView .qscm-h6-list-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  gap: 7px;
}

body.cmd-p17-mobile #paymentsView .qscm-h6-list-actions > :is(label, .btn) {
  width: 100%;
  min-width: 0;
  margin: 0;
}

body.cmd-p17-mobile #paymentsView .qscm-h6-list-actions select,
body.cmd-p17-mobile :is(#paymentsView, #supplierReturnsView) .cmd-mobile-operation-filter-grid-p17h6 :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
}

body.cmd-p17-mobile :is(#paymentsView, #supplierReturnsView) .cmd-mobile-operation-filter-grid-p17h6 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

body.cmd-p17-mobile :is(#paymentsView, #supplierReturnsView) .cmd-mobile-operation-filter-grid-p17h6 > label {
  min-width: 0;
  margin: 0;
  font-size: .7rem;
  font-weight: 800;
}

body.cmd-p17-mobile #outputsView > .cmd-project-return-p17h6 {
  justify-content: flex-start;
  margin: 0 0 8px;
}

body.cmd-p17-mobile #outputsView > .cmd-project-return-p17h6 .btn {
  width: auto;
  min-height: 42px;
}

@media (max-width: 760px) {
  body.cmd-p17-mobile .cmd-mobile-operation-wrap-p17h6,
  body.cmd-p17-mobile .cmd-mobile-horizontal-scroll-p17h3.cmd-mobile-operation-wrap-p17h6 {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
    overscroll-behavior: auto;
    touch-action: pan-y;
    scrollbar-gutter: auto;
  }

  body.cmd-p17-mobile .cmd-mobile-operation-wrap-p17h6::after,
  body.cmd-p17-mobile .cmd-mobile-horizontal-scroll-p17h3.cmd-mobile-operation-wrap-p17h6::after {
    display: none;
  }

  body.cmd-p17-mobile table.cmd-mobile-operation-table-p17h6,
  body.cmd-p17-mobile table.cmd-mobile-operation-table-p17h6 > tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  body.cmd-p17-mobile table.cmd-mobile-operation-table-p17h6 > thead {
    display: none;
  }

  body.cmd-p17-mobile table.cmd-mobile-operation-table-p17h6 > tbody {
    padding: 8px;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
    margin-bottom: 8px;
    padding: 9px 10px;
    border: 1px solid var(--cmd-color-border, #d7e0ea);
    border-radius: 12px;
    background: var(--cmd-color-surface, #fff);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .04);
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6:last-child {
    margin-bottom: 0;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 > :is(td, th) {
    display: block;
    min-width: 0 !important;
    max-width: 100%;
    padding: 6px 0;
    border: 0;
    font-size: .78rem;
    line-height: 1.32;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: left;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 > :is(td, th)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--cmd-color-muted, #64748b);
    font-size: .65rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .035em;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 > :is(.cmd-mobile-operation-key-p17h6, .cmd-mobile-operation-action-p17h6, .cmd-mobile-operation-select-p17h6) {
    grid-column: 1 / -1;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 > .cmd-mobile-operation-money-p17h6 {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 > .cmd-mobile-operation-money-p17h6::before {
    text-align: right;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 > .cmd-mobile-operation-select-p17h6 {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 > .cmd-mobile-operation-select-p17h6::before {
    margin: 0;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 > .cmd-mobile-operation-action-p17h6 :is(.toolbar, .attachment-actions) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }

  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6 > .cmd-mobile-operation-action-p17h6 :is(.btn, .mini-btn) {
    min-width: 0;
    min-height: 40px;
    white-space: normal;
  }

  body.cmd-p17-mobile table[data-cmd-mobile-operation="returnLines"] :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
  }

  body.cmd-p17-mobile table[data-cmd-mobile-operation="returnLines"] .cmd-mobile-operation-action-p17h6,
  body.cmd-p17-mobile table[data-cmd-mobile-operation="returnLines"] .cmd-mobile-operation-select-p17h6 {
    grid-column: auto;
  }

  body.cmd-p17-mobile .b24-return-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.cmd-p17-mobile .b24-return-totals > span {
    min-width: 0;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 980px) {
  body.cmd-p17-mobile .cmd-mobile-operation-wrap-p17h6 {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body.cmd-p17-mobile table.cmd-mobile-operation-table-p17h6 {
    min-width: 1040px;
  }

  body.cmd-p17-mobile table[data-cmd-mobile-operation="returnLines"] {
    min-width: 1420px;
  }

  body.cmd-p17-mobile table.cmd-mobile-operation-table-p17h6 thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
  }
}

@media (max-width: 374px) {
  body.cmd-p17-mobile :is(#paymentsView, #supplierReturnsView) .cmd-mobile-operation-filter-grid-p17h6,
  body.cmd-p17-mobile #paymentsView .qscm-h6-list-actions,
  body.cmd-p17-mobile tr.cmd-mobile-operation-row-p17h6,
  body.cmd-p17-mobile .b24-return-totals {
    grid-template-columns: minmax(0, 1fr);
  }
}