/******************************************
 * Section Layout
 ******************************************/
#comparisonReportSection {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: white;
}

.comp-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  height: calc(100vh - 200px); /* prevents full-page scroll */
}

/******************************************
 * Grid Base
 ******************************************/
#compGrid {
  display: grid;
  grid-auto-rows: minmax(2.2em, auto);
  font-size: 0.95rem;
  width: max-content;
  min-width: 100%;
}

/******************************************
 * Base Cell Style
 ******************************************/
.cell {
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: white;
  border: 0; /* optional: clean look */
}

/******************************************
 * Sticky Columns
 * JS sets LEFT offsets dynamically.
 ******************************************/
.stickyProvider,
.stickyMaterial,
.stickyWidth,
.stickyLength,
.stickyThickness,
.stickyLimit {
  position: sticky;
  z-index: 5;
  background: white !important;
  /* left is applied by JS */
}

/******************************************
 * Sticky Header Rows (0–6)
 ******************************************/
.sticky-row-0,
.sticky-row-1,
.sticky-row-2,
.sticky-row-3,
.sticky-row-4,
.sticky-row-5,
.sticky-row-6 {
  position: sticky;
  top: 0; /* overridden below */
  z-index: 6;
  background: white !important;
}

.sticky-row-1 {
  top: calc(2.2em * 1);
}
.sticky-row-2 {
  top: calc(2.2em * 2);
}
.sticky-row-3 {
  top: calc(2.2em * 3);
}
.sticky-row-4 {
  top: calc(2.2em * 4);
}
.sticky-row-5 {
  top: calc(2.2em * 5);
}
.sticky-row-6 {
  top: calc(2.2em * 6);
}

/******************************************
 * Sticky Intersection (row + column)
 ******************************************/
.sticky-intersection {
  z-index: 10 !important;
  background: white !important;
}

/******************************************
 * Shading for Subtotals & Totals
 ******************************************/
.cell.productsubtot {
  background: rgba(0, 0, 0, 0.04) !important;
  font-weight: bold;
}

.cell.solntotal {
  background: rgba(0, 0, 0, 0.12) !important;
  font-weight: bold;
}

/* Shading also applies correctly to sticky columns */
.cell.productsubtot.stickyProvider,
.cell.productsubtot.stickyMaterial,
.cell.productsubtot.stickyWidth,
.cell.productsubtot.stickyLength,
.cell.productsubtot.stickyThickness,
.cell.productsubtot.stickyLimit {
  background: rgba(0, 0, 0, 0.04) !important;
}

.cell.solntotal.stickyProvider,
.cell.solntotal.stickyMaterial,
.cell.solntotal.stickyWidth,
.cell.solntotal.stickyLength,
.cell.solntotal.stickyThickness,
.cell.solntotal.stickyLimit {
  background: rgba(0, 0, 0, 0.12) !important;
}
/******************************************
 * FIX: Prevent horizontal & vertical bleed-through
 ******************************************/

/* Sticky columns must clip their own background */
.stickyProvider,
.stickyMaterial,
.stickyWidth,
.stickyLength,
.stickyThickness,
.stickyLimit {
  background: white !important;
  background-clip: padding-box;
  z-index: 6;
}

/* Sticky rows must also clip their background */
.sticky-row-0,
.sticky-row-1,
.sticky-row-2,
.sticky-row-3,
.sticky-row-4,
.sticky-row-5,
.sticky-row-6 {
  background: white !important;
  background-clip: padding-box;
  z-index: 7;
}

/* Intersection: highest layer, fully opaque */
.sticky-intersection {
  background: white !important;
  background-clip: padding-box;
  z-index: 10 !important;
}

/******************************************
 * FIX: Sticky shaded subtotal/total cells
 ******************************************/
.cell.productsubtot.stickyProvider,
.cell.productsubtot.stickyMaterial,
.cell.productsubtot.stickyWidth,
.cell.productsubtot.stickyLength,
.cell.productsubtot.stickyThickness,
.cell.productsubtot.stickyLimit {
  background: rgba(0, 0, 0, 0.04) !important;
  background-clip: padding-box;
}

.cell.solntotal.stickyProvider,
.cell.solntotal.stickyMaterial,
.cell.solntotal.stickyWidth,
.cell.solntotal.stickyLength,
.cell.solntotal.stickyThickness,
.cell.solntotal.stickyLimit {
  background: rgba(0, 0, 0, 0.12) !important;
  background-clip: padding-box;
}
/* Right-align Qty column for better triplet grouping */
.colQuantity {
  text-align: right;
  padding-right: 6px; /* subtle separation cue */
}