/**
 * Pixleas report table Option B (mockup mode-proposed).
 * Sticky head/foot + content min-widths + 2-line wrap + compact H-scroll.
 * Marker: pixleas_report_table_option_b_v1
 */
.psr-option-b-host {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.psr-option-b-viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* One vertical scrollbar for head+body+foot (no gap under sticky head / above foot). */
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  min-height: 280px;
  border: 1px solid var(--pix-dark-border, #2a3444);
  background: var(--pix-dark-panel, #171d25);
  scrollbar-gutter: stable;
}
.modal .psr-option-b-viewport,
.psr-option-b-viewport.psr-option-b-in-modal {
  max-height: min(62vh, 520px);
  min-height: 180px;
}
.psr-option-b-viewport .psr-sticky-head,
.psr-option-b-viewport .psr-sticky-foot {
  flex: 0 0 auto;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  box-sizing: border-box;
}
.psr-option-b-viewport .psr-sticky-head::-webkit-scrollbar,
.psr-option-b-viewport .psr-sticky-foot::-webkit-scrollbar {
  display: none;
}
.psr-option-b-viewport .psr-sticky-head {
  position: sticky;
  top: 0;
  background: #121820;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.65);
  border-bottom: 1px solid #2f3b4d;
}
.psr-option-b-viewport .psr-sticky-foot {
  position: sticky;
  bottom: 0;
  background: #10161e;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.65);
  border-top: 2px solid #3a4a5e;
}
.psr-option-b-viewport .psr-body-scroll {
  /* Grow with rows; do not host the V-scrollbar (viewport does). */
  flex: 1 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* critical: stop max-content children blowing the card open */
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}
.psr-option-b-viewport .psr-sticky-head table,
.psr-option-b-viewport .psr-sticky-foot table,
.psr-option-b-viewport .psr-body-scroll table.psr-option-b {
  width: 100%;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.psr-option-b-viewport .psr-sticky-head table {
  background: #121820;
}
.psr-option-b-viewport .psr-sticky-foot table {
  background: #10161e;
}

/*
 * Ghost body thead: keep for column sizing, hide labels.
 * Must beat pixleas-ui-mode / ui-base (#scrollable-container + font-size/height/color !important).
 */
html.ui-mode-classic_dark .psr-option-b-viewport .psr-body-scroll table.psr-option-b.dataTable > thead > tr > th,
html.ui-mode-dark_oled .psr-option-b-viewport .psr-body-scroll table.psr-option-b.dataTable > thead > tr > th,
html.ui-mode-dark_motion .psr-option-b-viewport .psr-body-scroll table.psr-option-b.dataTable > thead > tr > th,
#scrollable-container .psr-option-b-viewport .psr-body-scroll table.psr-option-b.dataTable > thead > tr > th,
main .psr-option-b-viewport .psr-body-scroll table.psr-option-b.dataTable > thead > tr > th,
.content-wrapper .psr-option-b-viewport .psr-body-scroll table.psr-option-b.dataTable > thead > tr > th,
.psr-option-b-viewport .psr-body-scroll table.psr-option-b thead th {
  position: static !important;
  display: table-cell !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-width: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  visibility: hidden !important;
  pointer-events: none !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}
.psr-option-b-viewport .psr-body-scroll table.psr-option-b tfoot {
  display: none;
}

/* Option B cell rules (mockup mode-proposed) */
table.psr-option-b th,
table.psr-option-b td {
  white-space: nowrap;
  vertical-align: top;
  overflow: hidden;
}
/* Only wrap2 spans clip. Plain SKU/date spans must stay visible so columns size to text. */
/* wrap2 = cells only (never thead). Mockup: -webkit-line-clamp: 2 */
html.ui-mode-classic_dark .psr-option-b-viewport table.psr-option-b td > span.wrap2,
html.ui-mode-dark_oled .psr-option-b-viewport table.psr-option-b td > span.wrap2,
html.ui-mode-dark_motion .psr-option-b-viewport table.psr-option-b td > span.wrap2,
#scrollable-container .psr-option-b-viewport table.psr-option-b td > span.wrap2,
.content-wrapper .psr-option-b-viewport table.psr-option-b td > span.wrap2,
table.psr-option-b td > span.wrap2,
table.psr-option-b td.psr-product-col > span.wrap2,
table.psr-option-b td .psr-product-name.wrap2 {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  max-height: 2.6em !important;
  text-overflow: unset !important;
}
/* Parent cell must allow the 2-line wrap (beat native-align nowrap/ellipsis). */
html.ui-mode-classic_dark .psr-option-b-viewport table.psr-option-b td:has(> span.wrap2),
html.ui-mode-dark_oled .psr-option-b-viewport table.psr-option-b td:has(> span.wrap2),
html.ui-mode-dark_motion .psr-option-b-viewport table.psr-option-b td:has(> span.wrap2),
#scrollable-container .psr-option-b-viewport table.psr-option-b td:has(> span.wrap2),
.content-wrapper .psr-option-b-viewport table.psr-option-b td:has(> span.wrap2),
table.psr-option-b td:has(> span.wrap2),
table.psr-option-b td.psr-product-col,
table.psr-option-b td.pix-col-name,
table.psr-option-b td.pix-col-note,
table.psr-option-b td.psr-col-date,
table.psr-option-b td.psr-col-tax,
table.psr-option-b td.psr-col-pay {
  white-space: normal !important;
  text-overflow: unset !important;
  height: auto !important;
  vertical-align: top !important;
}
table.psr-option-b th.wrap2,
.psr-option-b-viewport .psr-sticky-head th.wrap2 {
  display: table-cell;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
  max-height: none;
  overflow: hidden;
  -webkit-line-clamp: unset;
  background-color: #121820;
}
.psr-option-b-viewport .psr-sticky-head th {
  background-color: #121820 !important;
  color: var(--pix-dark-muted, #93a0b4);
  font-weight: 600;
  text-align: left;
  vertical-align: middle;
  padding: 6px 8px;
  border: 1px solid var(--pix-dark-border, #2a3444);
  white-space: normal !important;
  line-height: 1.25;
  overflow: hidden;
}
.psr-option-b-viewport .psr-sticky-foot tr {
  height: auto !important;
}
.psr-option-b-viewport .psr-sticky-foot td {
  background: #10161e;
  font-weight: 650;
  text-align: center;
  vertical-align: middle;
  height: auto !important;
  max-height: none !important;
  padding: 6px 8px !important;
  border: 1px solid var(--pix-dark-border, #2a3444);
  border-top: 2px solid #3a4a5e;
  line-height: 1.35 !important;
  font-size: inherit !important;
  overflow: hidden !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
/* Undo DataTables scrollX/Y measurement wrappers inside sticky foot clone */
.psr-option-b-viewport .psr-sticky-foot .dataTables_sizing {
  height: auto !important;
  overflow: visible !important;
}

/* Product name only (mockup .col-product). Do NOT apply to Brand/Category pix-col-name. */
#scrollable-container table.psr-option-b .psr-product-col,
.content-wrapper table.psr-option-b .psr-product-col,
table.psr-option-b .psr-product-col {
  min-width: 160px !important;
  max-width: 240px !important;
  width: 22%;
}
#scrollable-container table.psr-option-b .pix-col-note,
.content-wrapper table.psr-option-b .pix-col-note,
table.psr-option-b .pix-col-note {
  min-width: 72px;
  max-width: 200px;
}
table.psr-option-b .pix-col-image {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
}
table.psr-option-b .psr-col-sku { min-width: 108px; }
table.psr-option-b .psr-col-store { min-width: 48px; }
table.psr-option-b .psr-col-invoice { min-width: 88px; }
table.psr-option-b .psr-col-date { min-width: 92px; max-width: 110px; }
table.psr-option-b .psr-col-qty { min-width: 72px; }
table.psr-option-b .psr-col-money { min-width: 78px; }
table.psr-option-b .psr-col-header-long { min-width: 96px; max-width: 118px; }
table.psr-option-b .psr-col-tax { min-width: 88px; max-width: 120px; }
table.psr-option-b .psr-col-pay { min-width: 84px; max-width: 120px; }

/* Compact: keep mins, H-scroll — no letter-stack / no span-as-table-cell */
.psr-option-b-viewport.psr-option-b-compact .psr-sticky-head,
.psr-option-b-viewport.psr-option-b-compact .psr-sticky-foot,
.psr-option-b-viewport.psr-option-b-compact .psr-body-scroll {
  overflow-x: auto;
}
.psr-option-b-viewport.psr-option-b-compact .psr-body-scroll {
  overflow-y: hidden;
}
.psr-option-b-viewport.psr-option-b-compact .psr-sticky-head,
.psr-option-b-viewport.psr-option-b-compact .psr-sticky-foot {
  scrollbar-width: none;
}
.psr-option-b-viewport.psr-option-b-compact .psr-sticky-head::-webkit-scrollbar,
.psr-option-b-viewport.psr-option-b-compact .psr-sticky-foot::-webkit-scrollbar {
  display: none;
}
.psr-option-b-viewport.psr-option-b-compact table.psr-option-b th,
.psr-option-b-viewport.psr-option-b-compact table.psr-option-b td {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* Sticky Total bar: keep multi-word labels readable (do not force nowrap from compact). */
.psr-option-b-viewport.psr-option-b-compact .psr-sticky-foot td {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  text-overflow: unset !important;
}
/* Compact = H-scroll only. Product / long text stays 2-line wrap (mockup Option B). */
.psr-option-b-viewport.psr-option-b-compact table.psr-option-b th.wrap2 {
  display: table-cell !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
}
.psr-option-b-viewport.psr-option-b-compact table.psr-option-b td > span.wrap2,
.psr-option-b-viewport.psr-option-b-compact table.psr-option-b td .wrap2 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  overflow: hidden !important;
  text-overflow: unset !important;
  max-width: 100% !important;
  max-height: 2.6em !important;
  line-height: 1.25 !important;
}

/* Kill Option A 120px ellipsis; keep Option B product 160–240 + wrap2 */
table.psr-option-b .psr-product-name {
  max-width: 100%;
}