/* CMD P17.1-H3 — shared mobile document viewer, payment scrolling and decision shell. */

body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 {
  width: calc(100vw - 8px);
  max-width: calc(100vw - 8px);
  height: calc(100dvh - 8px);
  max-height: calc(100dvh - 8px);
  margin: 4px auto;
  border-radius: 14px;
}

body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-document-preview-shell-p14h4h1 {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: max(10px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  overflow: hidden;
}

body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .dialog-header,
body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .dialog-actions {
  position: static;
  min-width: 0;
  margin: 0;
  padding: 4px 0;
}

body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .dialog-header h3 {
  font-size: .96rem;
  line-height: 1.25;
}

body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .dialog-header small {
  font-size: .7rem;
  line-height: 1.3;
}

body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .dialog-actions .btn {
  min-height: 44px;
  padding: 8px 10px;
}

.cmd-mobile-document-toolbar-p17h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--cmd-color-border, #d7e0ea);
  border-radius: 11px;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: thin;
}

.cmd-mobile-viewer-button-p17h3 {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 9px;
  color: var(--cmd-color-text, #0f172a);
  font-size: .72rem;
  white-space: nowrap;
}

.cmd-mobile-viewer-button-p17h3.is-selected {
  border-color: var(--cmd-color-primary, #1f63b5);
  color: var(--cmd-color-primary-strong, #0e3e78);
  background: var(--cmd-color-primary-soft, #eaf3ff);
}

.cmd-mobile-viewer-zoom-p17h3 {
  min-width: 36px;
  padding-inline: 8px;
  font-size: 1rem;
}

.cmd-mobile-viewer-status-p17h3 {
  flex: 0 0 auto;
  min-width: 48px;
  margin-left: auto;
  color: var(--cmd-color-muted, #64748b);
  font-size: .7rem;
  font-weight: 800;
  text-align: center;
}

.cmd-mobile-document-viewport-p17h3 {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  border: 1px solid #d7e0ea;
  border-radius: 10px;
  background: #e8edf2;
  overflow: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

.cmd-mobile-document-stage-p17h3 {
  position: relative;
  min-width: 1px;
  min-height: 1px;
}

.cmd-mobile-document-content-p17h3 {
  position: absolute;
  inset: 0 auto auto 0;
  display: block !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform-origin: top left;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}

body.cmd-p17-mobile :is(#paymentsView, #requestDetailView) {
  min-width: 0;
  max-width: 100%;
  overflow: visible !important;
}

body.cmd-p17-mobile #paymentsView > .b24-payment-tabs,
body.cmd-p17-mobile #paymentsView :is(#paymentExistingB24, #paymentReceivableB24),
body.cmd-p17-mobile #paymentsView .panel,
body.cmd-p17-mobile #requestDetailView .panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.cmd-p17-mobile #paymentsView .b24-tab-buttons {
  position: sticky;
  top: var(--cmd-mobile-header-inset, 56px);
  z-index: 7;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

body.cmd-p17-mobile .cmd-mobile-horizontal-scroll-p17h3 {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

body.cmd-p17-mobile .cmd-mobile-horizontal-scroll-p17h3:focus-visible {
  outline: 3px solid rgba(31, 99, 181, .22);
  outline-offset: -3px;
}

body.cmd-p17-mobile .cmd-mobile-horizontal-scroll-p17h3::after {
  content: "Vuốt ngang để xem đủ cột";
  position: sticky;
  left: 8px;
  display: inline-flex;
  margin: 5px 8px 7px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #475569;
  background: #eef3f8;
  font-size: .64rem;
  font-weight: 750;
  pointer-events: none;
}

body.cmd-p17-mobile .cmd-mobile-payment-dialog-p17h3[open] {
  width: calc(100vw - 8px) !important;
  max-width: calc(100vw - 8px) !important;
  height: calc(100dvh - 8px);
  max-height: calc(100dvh - 8px);
  margin: 4px auto;
}

body.cmd-p17-mobile .cmd-mobile-payment-dialog-p17h3 > .dialog-form,
body.cmd-p17-mobile .cmd-mobile-payment-dialog-p17h3 > .dialog-form.wide {
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  max-height: 100%;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.cmd-p17-mobile .cmd-mobile-payment-dialog-p17h3 .sticky-actions,
body.cmd-p17-mobile .cmd-mobile-decision-dialog-p17h3 .dialog-actions {
  bottom: calc(-10px + env(safe-area-inset-bottom));
  margin-inline: -10px;
  padding: 10px 10px max(10px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
}

body.cmd-p17-mobile #requestDetailView > .detail-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.cmd-p17-mobile #requestDetailView > .detail-grid > aside {
  display: contents;
}

body.cmd-p17-mobile #requestDetailView .cmd-mobile-decision-panel-p17h3 {
  order: -2;
  position: static;
  z-index: auto;
  margin: 0;
  border-color: #b8cce4;
  box-shadow: 0 5px 15px rgba(15, 23, 42, .08);
}

/* P17.1-H3H2 — portrait previews must fit the complete page without
   inheriting the legacy 720px horizontal lock. Landscape keeps width mode. */
@media (orientation: portrait) {
  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-document-sheet-p14h4h1 {
    box-sizing: border-box;
    overflow: hidden;
  }

  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-document-table-p14h4h1 th,
  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-document-table-p14h4h1 td {
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-document-table-p14h4h1 .money-cell {
    padding-inline: 5px;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-document-signatures-p14h4h1 > div {
    min-width: 0;
    overflow: hidden;
    padding-inline: 4px;
  }

  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-document-signatures-p14h4h1 :is(strong, small, span) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

body.cmd-p17-mobile #requestDetailView .cmd-mobile-decision-panel-p17h3 .panel-header {
  padding: 8px 10px;
}

body.cmd-p17-mobile #requestDetailView .cmd-mobile-decision-panel-p17h3 .action-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 9px 10px 10px;
}

body.cmd-p17-mobile #requestDetailView .cmd-mobile-decision-panel-p17h3 .action-stack .btn {
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px;
  white-space: normal;
  font-size: .76rem;
  line-height: 1.25;
}

body.cmd-p17-mobile #cmdHybridBanner08A.cmd-mobile-staging-summary-p17h3h1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: auto;
  min-width: 0;
  margin: 8px 10px 0;
  padding: 7px 9px;
  gap: 7px 9px;
}

body.cmd-p17-mobile #cmdHybridBanner08A.cmd-mobile-staging-summary-p17h3h1 > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .76rem;
}

body.cmd-p17-mobile #cmdHybridBanner08A.cmd-mobile-staging-summary-p17h3h1 > .cmd-mobile-staging-toggle-p17h3h1 {
  grid-column: 2;
  grid-row: 1;
  min-width: 58px;
  min-height: 44px;
  padding: 5px 8px;
  font-size: .72rem;
}

body.cmd-p17-mobile #cmdHybridBanner08A.cmd-mobile-staging-summary-p17h3h1[data-cmd-mobile-staging-expanded="false"] > :not(strong):not(.cmd-mobile-staging-toggle-p17h3h1) {
  display: none !important;
}

body.cmd-p17-mobile #cmdHybridBanner08A.cmd-mobile-staging-summary-p17h3h1[data-cmd-mobile-staging-expanded="true"] > :not(strong):not(.cmd-mobile-staging-toggle-p17h3h1) {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}

body.cmd-p17-mobile #requestDetailView .attachment-list,
body.cmd-p17-mobile #requestDetailView .attachment-row,
body.cmd-p17-mobile #requestDetailView .attachment-main,
body.cmd-p17-mobile #requestDetailView .attachment-actions {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.cmd-p17-mobile #requestDetailView .attachment-main strong {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: .78rem;
  line-height: 1.3;
}

body.cmd-p17-mobile #requestDetailView .attachment-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 7px;
}

body.cmd-p17-mobile #requestDetailView .attachment-actions .mini-btn {
  width: 100%;
  min-width: 0;
  padding-inline: 6px;
}

body.cmd-p17-mobile .cmd-mobile-decision-dialog-p17h3[open] {
  width: calc(100vw - 12px);
  max-width: calc(100vw - 12px);
  margin: 6px auto;
}

body.cmd-p17-mobile .cmd-mobile-decision-dialog-p17h3 .dialog-form {
  max-height: calc(100dvh - 12px);
  padding: 12px;
  overflow-y: auto;
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 980px) {
  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 {
    width: calc(100vw - 6px);
    max-width: calc(100vw - 6px);
    height: calc(100dvh - 6px);
    max-height: calc(100dvh - 6px);
    margin: 3px auto;
  }

  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-document-preview-shell-p14h4h1 {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 7px max(9px, env(safe-area-inset-right)) 7px max(9px, env(safe-area-inset-left));
  }

  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .dialog-header {
    grid-column: 1;
  }

  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-mobile-document-toolbar-p17h3 {
    grid-column: 2;
  }

  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .cmd-mobile-document-viewport-p17h3 {
    grid-column: 1 / -1;
  }

  body.cmd-p17-mobile .cmd-mobile-document-dialog-p17h3 .dialog-actions {
    grid-column: 1 / -1;
  }
}

@media (min-width: 981px), (min-width: 761px) and (min-height: 601px) {
  .cmd-mobile-document-toolbar-p17h3 {
    max-width: 794px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-mobile-document-content-p17h3 {
    transition: none !important;
  }
}