/**
 * Pixleas page density — universal list/report chrome.
 * Build once; call with classes on each page. Does NOT change Option B column engine.
 *
 * Shape:
 *   .pix-page-header          → title / range / actions bar
 *   section.pix-page-density  → page body
 *     .pix-filter-panel       → filters (existing)
 *     .pix-page-mid           → optional KPI / closing stock / tabs (kept readable)
 *     .pix-page-table         → table host (flex-fills)
 *
 * Legacy All Sales aliases (.pix-sells-*) stay valid until pages are migrated.
 * Marker: pix_page_density_v1
 */

/* ---------- Page header ---------- */
body:not(.lockscreen) .content-header.pix-page-header,
body:not(.lockscreen) .content-header.pix-sells-page-header {
  margin: 8px 8px 4px !important;
  padding: 4px 10px !important;
  background: rgba(18, 24, 32, 0.55) !important;
  border: 1px solid rgba(42, 52, 68, 0.85) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html:not(.ui-mode-classic_dark):not(.ui-mode-dark_motion):not(.ui-mode-dark_oled) body:not(.lockscreen) .content-header.pix-page-header,
html:not(.ui-mode-classic_dark):not(.ui-mode-dark_motion):not(.ui-mode-dark_oled) body:not(.lockscreen) .content-header.pix-sells-page-header {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(226, 232, 240, 0.95) !important;
}
.pix-page-title-row,
.pix-sells-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.pix-page-title-left,
.pix-sells-title-left {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pix-page-actions,
.pix-sells-page-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
body:not(.lockscreen) .content-header.pix-page-header h1,
body:not(.lockscreen) .content-header.pix-sells-page-header h1 {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pix-page-range,
.pix-sells-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #9ec9ff !important;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
}
html:not(.ui-mode-classic_dark):not(.ui-mode-dark_motion):not(.ui-mode-dark_oled) .pix-page-range,
html:not(.ui-mode-classic_dark):not(.ui-mode-dark_motion):not(.ui-mode-dark_oled) .pix-sells-range {
  color: #0369a1 !important;
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.28);
}
.pix-page-title-row .tw-dw-btn,
.pix-sells-title-row .tw-dw-btn {
  margin: 0 !important;
}
.pix-page-actions .tw-dw-btn,
.pix-sells-page-actions .tw-dw-btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  line-height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}
.pix-page-title-row .tw-dw-btn .icon-tabler,
.pix-sells-title-row .tw-dw-btn .icon-tabler {
  width: 16px;
  height: 16px;
}

/* Reports using module_header inside density pages — tighten only, keep Tools chrome */
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-module-header.reports-tools-header,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .reports-tools-header {
  margin: 0 0 4px !important;
}

/* ---------- Page body ---------- */
:is(#scrollable-container, main, .content-wrapper) section.content.pix-page-density,
:is(#scrollable-container, main, .content-wrapper) section.content.pix-sells-list-page {
  padding: 0 8px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 0;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-filter-panel,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .pix-filter-panel {
  margin: 0 0 4px !important;
  padding: 8px 12px !important;
  min-height: 40px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-filter-panel .pix-filter-head,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-filter-panel .pf-toggle,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .pix-filter-panel .pix-filter-head,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .pix-filter-panel .pf-toggle {
  min-height: 28px;
  align-items: center;
}

/* Optional mid strip (closing stock KPIs, tabs, secondary nav) — keep readable */
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid {
  flex: 0 0 auto;
  margin: 0 0 6px !important;
  min-width: 0;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid > .tw-mb-4,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid .tw-mb-4 {
  margin-bottom: 0 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid > .tw-mb-4 > .tw-p-2,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid > .tw-mb-4 > .sm\:tw-p-3,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid .tw-p-2,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid .sm\:tw-p-3 {
  padding: 8px 10px !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid h3 {
  margin: 0 !important;
  font-size: 1.15rem !important;
  line-height: 1.3 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-mid .table.no-border > tbody > tr > td {
  padding: 4px 8px !important;
  vertical-align: middle !important;
}

/* Table zone */
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-table > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-table > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
}

/* Direct children when no pix-page-table wrapper (All Sales legacy) — table host only */
:is(#scrollable-container, main, .content-wrapper) .pix-page-density > .box-primary,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density > .tw-mb-4,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-table > .tw-mb-4,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-table .tw-mb-4,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page > .box-primary,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page > .tw-mb-4 {
  margin-bottom: 0 !important;
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density > .tw-mb-4 > .tw-p-2,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density > .tw-mb-4 > .sm\:tw-p-3,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-table .tw-p-2,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pix-page-table .sm\:tw-p-3,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page > .tw-mb-4 > .tw-p-2,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page > .tw-mb-4 > .sm\:tw-p-3 {
  padding: 4px 8px !important;
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .tw-flow-root,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .tw-flow-root > div,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .tw-align-middle,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .tw-flow-root,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .tw-flow-root > div,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .tw-align-middle {
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .tw-py-2,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .tw-py-2 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .sm\:tw-px-5,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .sm\:tw-px-5 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .pixleas-dt-host,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .pixleas-dt-host,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- DT toolbar (any table inside density page) ---------- */
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper > .row.margin-bottom-20 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  width: 100%;
  margin: 0 0 6px !important;
  text-align: left !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20::before,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20::after,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper > .row.margin-bottom-20::before,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper > .row.margin-bottom-20::after {
  display: none !important;
  content: none !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"],
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: static !important;
  margin: 0 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-1,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-1.pix-page-dt-left,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-1.pix-sells-dt-left,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-1,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-1.pix-sells-dt-left {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-8,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-8 {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  text-align: center !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-3,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-3 {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  text-align: right !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper > .row.margin-bottom-20 > .dataTables_processing,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper > .row.margin-bottom-20 > .dataTables_processing {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  z-index: 5;
  pointer-events: none;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dataTables_length,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dt-buttons,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dataTables_filter,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dataTables_length,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dt-buttons,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dataTables_filter {
  float: none !important;
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dataTables_length label,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dataTables_filter label,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dataTables_length label,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  white-space: nowrap;
  font-size: 12px !important;
  font-weight: 600 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dataTables_length select,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dataTables_length select {
  height: 30px !important;
  min-height: 30px !important;
  width: auto !important;
  min-width: 4.5rem;
  padding: 0 8px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  display: inline-block !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dataTables_filter input,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dataTables_filter input {
  height: 30px !important;
  min-height: 30px !important;
  min-width: 160px;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dt-buttons.btn-group,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dt-buttons.btn-group {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dt-buttons .dt-button,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dt-buttons .btn,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dt-buttons .buttons-html5,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dt-buttons .buttons-print,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dt-buttons .buttons-collection,
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .dataTables_wrapper .dt-buttons .buttons-colvis,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dt-buttons .dt-button,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dt-buttons .btn,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dt-buttons .buttons-html5,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dt-buttons .buttons-print,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dt-buttons .buttons-collection,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .dataTables_wrapper .dt-buttons .buttons-colvis {
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  float: none !important;
}

/* Multi-Pay toolbar slot (All Sales) */
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .tools-bulk-multi-pay-toolbar,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .tools-bulk-multi-pay-toolbar {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#scrollable-container, main, .content-wrapper) .pix-page-density .tools-bulk-multi-pay-toolbar .tw-dw-btn,
:is(#scrollable-container, main, .content-wrapper) .pix-sells-list-page .tools-bulk-multi-pay-toolbar .tw-dw-btn {
  margin: 0 !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Reports: same density chrome as .pix-page-density (filter / toolbar). Mid KPI rows stay auto-height. */
:is(#scrollable-container, main, .content-wrapper) section.content.reports-pl-page {
  padding: 0 8px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 0;
}
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page > .row {
  flex: 0 0 auto;
  min-width: 0;
}
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .pix-filter-panel {
  margin: 0 0 4px !important;
  padding: 8px 12px !important;
  min-height: 40px;
  flex-shrink: 0;
}
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper > .row.margin-bottom-20 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  width: 100%;
  margin: 0 0 6px !important;
  text-align: left !important;
}
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper > .row.margin-bottom-20::before,
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper > .row.margin-bottom-20::after {
  display: none !important;
  content: none !important;
}
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: static !important;
  margin: 0 !important;
}
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-1 {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-8 {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  text-align: center !important;
}
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-3 {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  text-align: right !important;
}
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper .dt-buttons .dt-button,
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper .dt-buttons .btn,
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper .dt-buttons .buttons-html5,
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper .dt-buttons .buttons-print,
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper .dt-buttons .buttons-collection,
:is(#scrollable-container, main, .content-wrapper) .reports-pl-page .dataTables_wrapper .dt-buttons .buttons-colvis {
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  float: none !important;
}

body:not(.lockscreen) .content-header.pix-page-header h1 .fa,
body:not(.lockscreen) .content-header.pix-page-header h1 .fas,
body:not(.lockscreen) .content-header.pix-sells-page-header h1 .fa,
body:not(.lockscreen) .content-header.pix-sells-page-header h1 .fas {
  margin-right: 8px;
  font-size: 0.92em;
  opacity: 0.9;
}

/* Low-stock / status rows: Bootstrap .bg-* is light pink — keep dark skins readable.
   Beat .table-striped odd rules with equal/higher specificity. */
html.ui-mode-classic_dark :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-danger,
  .table-striped > tbody > tr.bg-danger:nth-of-type(odd),
  .table-striped > tbody > tr.bg-danger:nth-of-type(even),
  tbody tr.bg-danger.odd,
  tbody tr.bg-danger.even
),
html.ui-mode-dark_oled :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-danger,
  .table-striped > tbody > tr.bg-danger:nth-of-type(odd),
  .table-striped > tbody > tr.bg-danger:nth-of-type(even),
  tbody tr.bg-danger.odd,
  tbody tr.bg-danger.even
),
html.ui-mode-dark_motion :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-danger,
  .table-striped > tbody > tr.bg-danger:nth-of-type(odd),
  .table-striped > tbody > tr.bg-danger:nth-of-type(even),
  tbody tr.bg-danger.odd,
  tbody tr.bg-danger.even
) {
  background-color: rgba(239, 68, 68, 0.22) !important;
}
html.ui-mode-classic_dark :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-warning,
  .table-striped > tbody > tr.bg-warning:nth-of-type(odd),
  .table-striped > tbody > tr.bg-warning:nth-of-type(even)
),
html.ui-mode-dark_oled :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-warning,
  .table-striped > tbody > tr.bg-warning:nth-of-type(odd),
  .table-striped > tbody > tr.bg-warning:nth-of-type(even)
),
html.ui-mode-dark_motion :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-warning,
  .table-striped > tbody > tr.bg-warning:nth-of-type(odd),
  .table-striped > tbody > tr.bg-warning:nth-of-type(even)
) {
  background-color: rgba(245, 158, 11, 0.2) !important;
}
html.ui-mode-classic_dark :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-success,
  .table-striped > tbody > tr.bg-success:nth-of-type(odd),
  .table-striped > tbody > tr.bg-success:nth-of-type(even)
),
html.ui-mode-dark_oled :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-success,
  .table-striped > tbody > tr.bg-success:nth-of-type(odd),
  .table-striped > tbody > tr.bg-success:nth-of-type(even)
),
html.ui-mode-dark_motion :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-success,
  .table-striped > tbody > tr.bg-success:nth-of-type(odd),
  .table-striped > tbody > tr.bg-success:nth-of-type(even)
) {
  background-color: rgba(16, 185, 129, 0.18) !important;
}
html.ui-mode-classic_dark :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-info,
  .table-striped > tbody > tr.bg-info:nth-of-type(odd),
  .table-striped > tbody > tr.bg-info:nth-of-type(even)
),
html.ui-mode-dark_oled :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-info,
  .table-striped > tbody > tr.bg-info:nth-of-type(odd),
  .table-striped > tbody > tr.bg-info:nth-of-type(even)
),
html.ui-mode-dark_motion :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) :is(
  tbody tr.bg-info,
  .table-striped > tbody > tr.bg-info:nth-of-type(odd),
  .table-striped > tbody > tr.bg-info:nth-of-type(even)
) {
  background-color: rgba(56, 189, 248, 0.16) !important;
}
html.ui-mode-classic_dark :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-danger > td,
html.ui-mode-classic_dark :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-warning > td,
html.ui-mode-classic_dark :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-success > td,
html.ui-mode-classic_dark :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-info > td,
html.ui-mode-dark_oled :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-danger > td,
html.ui-mode-dark_oled :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-warning > td,
html.ui-mode-dark_oled :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-success > td,
html.ui-mode-dark_oled :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-info > td,
html.ui-mode-dark_motion :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-danger > td,
html.ui-mode-dark_motion :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-warning > td,
html.ui-mode-dark_motion :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-success > td,
html.ui-mode-dark_motion :is(.psr-option-b-viewport, .dataTables_wrapper, .reports-pl-page, .pix-page-density) tbody tr.bg-info > td {
  background-color: transparent !important;
  color: var(--pix-dark-text, #e8eef7) !important;
}

@media (max-width: 767px) {
  body:not(.lockscreen) .content-header.pix-page-header,
  body:not(.lockscreen) .content-header.pix-sells-page-header {
    margin-inline: 8px !important;
  }
}