/**
 * VendorPlus core styles — part 10 of 10: Selection float, description tabs, reports and solid buttons
 *
 * Split from the single 18,135-line vendor-plus.css. The parts are chained as
 * style dependencies and MUST load in numeric order: rules here are overridden
 * by later parts, and 173 selector pairs in this sheet set the same property
 * twice. Reordering the parts changes computed styles.
 *
 * Do not reorder rules between parts. To verify the split is still faithful:
 *     php vendorplus-core/tests/stylesheet-split-guard-test.php
 *
 * Lines 17286-18136 of the original file.
 */

/* ============================================================
   SELECTION FLOAT — shared bulk-action pill
   ============================================================
   A fixed pill that rises when rows are selected, carrying the count and the
   bulk actions for whatever scope is bound to it. Ported from Auction
   Manager's lot-list pill (archive-lot.php) and extended with an actions slot;
   AM keeps its own copy until a later pass adopts this one.

   z-index 1040 sits below Bootstrap's modal (1055) so a confirm dialog opened
   FROM the pill covers it, and above the sticky page furniture. */

.vplus-action-selection-float {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: #1f2937;
  border-radius: 999px;
  box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.25);
  opacity: 0;
  transform: translateX(-50%) translateY(0.5rem);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
}
.vplus-action-selection-float.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.vplus-action-selection-float__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
/* An empty slot must not add its own gap — a scope with no actions should
   render as a plain count pill, not a pill with a hole in it. */
.vplus-action-selection-float__actions:empty {
  display: none;
}

.vplus-action-selection-count-text {
  border-radius: 0.35rem;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}

/* Clear: an inherited link colour is near-invisible on the dark pill. */
.vplus-action-selection-clear {
  color: #fcd34d !important;
  font-weight: 700;
  border-radius: 0.4rem;
  padding: 0.1rem 0.5rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.vplus-action-selection-clear:hover,
.vplus-action-selection-clear:focus-visible {
  color: #fff !important;
  background: rgba(252, 211, 77, 0.22);
  outline: none;
}

/* The moved buttons keep their own Bootstrap variants; only the link-style
   ones need rescuing from the dark background. */
.vplus-action-selection-float .btn-link {
  color: #e5e7eb;
}
.vplus-action-selection-float .btn-link:hover {
  color: #fff;
}
/* A select dropped into the pill (the Approved tab's auction picker) keeps a
   readable light field rather than inheriting the pill's white-on-dark. */
.vplus-action-selection-float .form-select {
  min-width: 12rem;
  max-width: 18rem;
  color: #1f2937;
}

/* Phones: the pill is wider than the viewport once it carries actions, and AM
   had no rule for this. Span the width and let it wrap instead of centring a
   fixed-width pill that overflows both edges. */
@media (max-width: 575.98px) {
  .vplus-action-selection-float {
    left: 0.75rem;
    right: 0.75rem;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 0.9rem;
  }
  .vplus-action-selection-float.is-visible {
    transform: none;
  }
  .vplus-action-selection-float .form-select {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
}

/* ============================================================
   DESCRIPTION TABS (submission form)
   ============================================================
   Moved out of vendor-submission-form-body.php's inline <style> so the
   submission form and Core ship one source of truth. Consignments and Core
   must deploy together.

   The header is a solid brand fill rather than a tint: the section cards
   above it are identified by a coloured border-left, so a tinted header
   read as part of that system instead of as a tab boundary. Everything
   inside the header therefore needs an explicit light treatment — it holds
   a label, a text input and buttons that all default to dark-on-light. */

.vplus-desc-tab > .card-header {
  background: var(--vplus-primary, #1c3f85);
  color: #fff;
  border-bottom: 0;
}

.vplus-desc-tab > .card-header .text-muted,
.vplus-desc-tab > .card-header .small {
  color: rgba(255, 255, 255, 0.85) !important;
}

.vplus-desc-tab > .card-header .vplus-desc-tab-heading {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.vplus-desc-tab > .card-header .vplus-desc-tab-heading::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.vplus-desc-tab > .card-header .vplus-desc-tab-heading:focus {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2);
}

.vplus-desc-tab > .card-header .btn {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.5);
  --bs-btn-hover-color: var(--vplus-primary, #1c3f85);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}

/* Managed tabs (R1): built from the controls they host, never typed into.
   Darker fill marks them as locked. Unlike a disabled tab these DO publish,
   so the dimmed treatment would say the opposite of what is true. */
.vplus-desc-tab--managed > .card-header {
  background: color-mix(in srgb, var(--vplus-primary, #1c3f85) 85%, #000);
}

.vplus-desc-tab--managed .form-check-input {
  cursor: pointer;
}

.vplus-desc-tab .vplus-desc-tab-heading-label {
  white-space: nowrap;
}

/* Own class, not .ms-auto: the Bootstrap utility is !important and could not
   be released for the stacked mobile layout below. */
.vplus-desc-tab .vplus-desc-tab-controls {
  margin-left: auto;
}

.vplus-desc-tab .vplus-desc-tab-chevron {
  transition: transform 0.2s ease;
}

.vplus-desc-tab
  .vplus-desc-tab-toggle[aria-expanded="true"]
  .vplus-desc-tab-chevron {
  transform: rotate(180deg);
}

.vplus-desc-tab .vplus-desc-tab-editor {
  min-height: 8rem;
}

.vplus-desc-tab .ql-container {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* Disabled: kept with its content, excluded from the composed description.
   Muted, not hidden, so it stays obvious it can be brought back. */
.vplus-desc-tab.vplus-desc-tab--disabled {
  opacity: 0.62;
}

.vplus-desc-tab.vplus-desc-tab--disabled .vplus-desc-tab-heading {
  text-decoration: line-through;
}

.vplus-desc-tab .vplus-desc-tab-disabled-note {
  display: none;
}

.vplus-desc-tab.vplus-desc-tab--disabled .vplus-desc-tab-disabled-note {
  display: block;
}

.vplus-desc-tab .vplus-desc-tab-delete {
  display: none;
}

.vplus-desc-tab.vplus-desc-tab--disabled .vplus-desc-tab-delete {
  display: inline-block;
}

@media (max-width: 991.98px) {
  .vplus-desc-tab > .card-header {
    flex-wrap: wrap;
    justify-content: center;
  }
  .vplus-desc-tab .vplus-desc-tab-heading {
    flex: 0 1 320px;
  }
  .vplus-desc-tab .vplus-desc-tab-controls {
    margin-left: 0;
    flex: 0 0 100%;
    justify-content: center;
  }
}

/* ============================================================
   BUSINESS REGISTRATION (MA2/MA3)
   ============================================================
   The registration block is disabled, not hidden, when "I'm an
   individual" is on — a hidden input still posts, and the saver
   would then overwrite stored business details with empties.
   Disabled inputs already grey themselves; this dims the labels
   and headings with them so the block reads as one unit.
   ============================================================ */
.vplus-is-disabled {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.vplus-is-disabled .form-label,
.vplus-is-disabled h6 {
  cursor: not-allowed;
}

/* ============================================================
   E6 — Warm look for the Reports hub (My Sales / Vendor Reports)
   ============================================================
   Reuses the --vplus-warm-* tokens defined for My Consignments rather than a
   second palette, so the two vendor-facing surfaces cannot drift apart.

   🔴 Scoped to .vplus-my-sales-wrap, NOT to <body>. My Consignments paints the
   whole page warm via a body class; the plan asks for the wrapper only here, so
   the page background is deliberately left alone.

   The moved slide-out / collapsible rules that used to live inline in
   content-my-sales.php now sit below this block. */
.vplus-my-sales-wrap {
  --vplus-warm-bg: #f7f3ee;
  --vplus-warm-surface: #fffdfa;
  --vplus-warm-border: #ece3d8;
  --vplus-warm-ink: #2e2a26;
  --vplus-warm-muted: #8a7f73;
  --vplus-warm-accent: #c4622d;
  --vplus-warm-accent-hover: #a9501f;
  --vplus-card-radius: 10px;
}

/* Cards: the reconciled/auction cards and the E5 status panel share one look. */
.vplus-my-sales-wrap .card,
.vplus-my-sales-wrap .vplus-cm-stat-card {
  background-color: var(--vplus-warm-surface);
  border-color: var(--vplus-warm-border);
  border-radius: var(--vplus-card-radius);
}
.vplus-my-sales-wrap .shadow-sm {
  box-shadow: 0 2px 5px rgba(120, 90, 60, 0.08) !important;
}
.vplus-my-sales-wrap .text-body-secondary,
.vplus-my-sales-wrap .text-muted {
  color: var(--vplus-warm-muted) !important;
}

/* 🔴 Bootstrap's .table sets --bs-table-bg on the <table> itself, which paints
   over the parent card's warm surface — match it explicitly or every items
   table shows a white strip inside a warm card. Same trap as the rollup tables
   on My Consignments. */
.vplus-my-sales-wrap .table {
  --bs-table-bg: var(--vplus-warm-surface);
  background-color: var(--vplus-warm-surface);
}

/* Accent: the active tab pill and the auction card's left edge. */
/* `body` qualifier is load-bearing: two dark-mode rules later in this sheet
 * (`body.vplus-dark-mode .nav-pills .nav-link.active`) tie on specificity at
 * three classes and win on order, repainting the pill Bootstrap blue. Matching
 * their `body` reaches four and wins outright, in both modes. */
body .vplus-my-sales-wrap .nav-pills .nav-link.active {
  background-color: var(--vplus-warm-accent);
  border-color: var(--vplus-warm-accent);
  color: #fff;
}
.vplus-my-sales-wrap .nav-pills .nav-link:not(.active):hover {
  color: var(--vplus-warm-accent-hover);
}
/* The reconciled card carries its accent on its HEADER's left edge (below);
   this covers the plain collapsible cards on the Items tab. */
.vplus-my-sales-wrap
  .vplus-collapsible-card:not(.vplus-my-sales-reconciled-card) {
  border-left: 3px solid var(--vplus-warm-accent);
}

/* Dark mode: remap the tokens rather than overriding each rule, mirroring what
   .vplus-overview__tile does on My Consignments. */
body.vplus-dark-mode .vplus-my-sales-wrap {
  --vplus-warm-bg: #1a1d21;
  --vplus-warm-surface: #242830;
  --vplus-warm-border: #3a3f4a;
  --vplus-warm-ink: #e4e6eb;
  --vplus-warm-muted: #a0a6b1;
  /* terracotta accent reads well on dark too — deliberately unchanged */
}

/* ---- Moved from content-my-sales.php's inline <style> (E6) ---------------
   Slide-out animation + collapsible-card chrome. Identical rules; they are
   here so the hub ships no inline CSS. */
.vplus-my-sales-report-slideout {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
/* The JS clears the inline max-height once the open transition has finished, so
 * the panel can still grow if its content reflows. Without this the rule above
 * reasserted the moment that happened and the panel collapsed to nothing while
 * still reading as open. The class is the open state; `hidden` is not. */
.vplus-my-sales-report-slideout.is-open {
  max-height: none;
  overflow: visible;
}
.vplus-my-sales-report-slideout[hidden] {
  display: none;
}
.vplus-my-sales-report-slideout-inner {
  padding: 1rem;
}
.vplus-my-sales-report-chevron {
  transition: transform 0.25s ease;
}
.vplus-my-sales-wrap .vplus-collapsible-header {
  cursor: pointer;
}
.vplus-my-sales-wrap
  .vplus-collapsible-header:hover
  .vplus-collapsible-chevron {
  color: var(--vplus-warm-accent);
}
.vplus-my-sales-wrap .vplus-collapsible-chevron {
  transition: transform 0.25s ease;
}
.vplus-my-sales-wrap
  .vplus-collapsible-card[data-vplus-collapsed="1"]
  .vplus-collapsible-chevron {
  transform: rotate(-90deg);
}
.vplus-my-sales-wrap
  .vplus-collapsible-card[data-vplus-collapsed="1"]
  > .table-responsive,
.vplus-my-sales-wrap
  .vplus-collapsible-card[data-vplus-collapsed="1"]
  > .vplus-my-sales-report-slideout {
  display: none;
}

/* Reconciled auction-card chrome. Ported from the inline block and re-tinted:
   it was blue-grey (#eef2f7 header, --bs-primary left rule), which fought the
   warm palette. Same structure, warm tokens. */
.vplus-my-sales-wrap .vplus-my-sales-reconciled-card {
  border: 1px solid var(--vplus-warm-border);
  border-radius: var(--vplus-card-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(120, 90, 60, 0.06);
}
.vplus-my-sales-wrap .vplus-my-sales-reconciled-card .vplus-collapsible-header {
  background-color: var(--vplus-warm-bg);
  border-bottom: 1px solid var(--vplus-warm-border);
  border-left: 4px solid var(--vplus-warm-accent);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  transition: background-color 0.15s ease-in-out;
}
.vplus-my-sales-wrap
  .vplus-my-sales-reconciled-card
  .vplus-collapsible-header:hover {
  background-color: #f1ebe3;
}
.vplus-my-sales-wrap
  .vplus-my-sales-reconciled-card
  .vplus-collapsible-header
  strong {
  font-size: 1.02rem;
  color: var(--vplus-warm-ink);
}
.vplus-my-sales-wrap
  .vplus-my-sales-reconciled-card
  .vplus-collapsible-header
  .small.text-muted,
.vplus-my-sales-wrap
  .vplus-my-sales-reconciled-card
  .vplus-collapsible-header
  .vplus-collapsible-chevron,
.vplus-my-sales-wrap
  .vplus-my-sales-reconciled-card
  .vplus-collapsible-header
  > .fa-gavel {
  color: var(--vplus-warm-muted) !important;
}
.vplus-my-sales-wrap
  .vplus-my-sales-reconciled-card[data-vplus-collapsed="1"]
  .vplus-collapsible-header {
  border-bottom-color: transparent;
}
body.vplus-dark-mode
  .vplus-my-sales-wrap
  .vplus-my-sales-reconciled-card
  .vplus-collapsible-header:hover {
  background-color: #2d323c;
}

/* ---- MS3 — lot-first results rows ---------------------------------------
   Lot number, title and status lead; submitter, hammer and updated are
   secondary. The card is the size container so the row reflows on the space
   the card actually has (the page sidebar varies), not the viewport.
   NOTE: container-type makes the card the containing block for any
   position:fixed descendant (MISTAKES 2026-09-23) — nothing inside is fixed. */
.vplus-my-sales-wrap .vplus-my-sales-reconciled-card {
  container: vplus-ms-card / inline-size;
}
.vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--lot {
  white-space: nowrap;
  font-weight: 700;
  color: var(--vplus-warm-ink);
}
.vplus-my-sales-wrap .vplus-ms-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.vplus-my-sales-wrap .vplus-ms-title-wrap > :first-child:not(.vplus-ms-title) {
  flex: 0 0 auto;
}
.vplus-my-sales-wrap .vplus-ms-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-weight: 600;
  color: var(--vplus-warm-ink);
}
/* Status wraps as a group and a badge is never ellipsised here: the status is
   the point of the row. */
.vplus-my-sales-wrap .vplus-ms-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.vplus-my-sales-wrap .vplus-ms-badges .vplus-badge {
  max-width: none;
  white-space: normal;
  line-height: 1.2;
}
.vplus-my-sales-wrap .vplus-ms-badges .vplus-badge > span {
  overflow: visible;
  text-overflow: clip;
}
.vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--by,
.vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--hammer {
  font-size: 0.875rem;
}
.vplus-my-sales-wrap .vplus-ms-row--readonly .vplus-ms-cell--lot {
  font-weight: 600;
}

@container vplus-ms-card (max-width: 1199.98px) {
  .vplus-my-sales-wrap .vplus-ms-results thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .vplus-my-sales-wrap .vplus-ms-results,
  .vplus-my-sales-wrap .vplus-ms-results tbody {
    display: block;
    width: 100%;
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.4rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--vplus-warm-border);
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-row:last-child {
    border-bottom: 0;
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-row > td {
    display: block;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--lot {
    flex: 0 0 auto;
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--title {
    flex: 1 1 0;
    min-width: 0;
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--status,
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--actions {
    flex: 0 0 100%;
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--actions {
    text-align: start !important;
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--actions > .d-inline-flex {
    justify-content: flex-start !important;
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--by,
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--hammer,
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--updated {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
  }
  .vplus-my-sales-wrap .vplus-ms-results [data-label]::before {
    content: attr(data-label) ": ";
    color: var(--vplus-warm-muted);
  }
  /* The submitter cell stacks name + pills; inline it so the secondary
     line stays one line where it fits. */
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--by > * {
    display: inline;
  }
  .vplus-my-sales-wrap .vplus-ms-results .vplus-ms-cell--by .vplus-badge-row {
    display: inline-flex;
    margin-left: 0.25rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MSU-4 / MS6 — Reports status panel (/my-sales/), styled to the Manage
   Consignments status panel's structure on the REPORTS hue family. Only the
   vplus-rsp__* classes are styled: consignments-manager.css owns the
   .vplus-cm-stat-* names and is not loaded here.
   Lives in this part because every /my-sales/ viewer loads it; it used to sit
   in vplus-vendor-report.css, which only the staff report modal enqueues, so
   Agents and Consignors never saw it (measured 2026-09-23).
   Chip text #b3263b on #fbe9ec = 5.9:1; dark #f2a3ae on #3b2226 = 7.4:1.
   ───────────────────────────────────────────────────────────────────────────── */
.vplus-reports-status-panel .vplus-rsp__card {
  border: 1px solid #efd6da !important;
  border-radius: 10px !important;
  background-color: #fffafb !important;
  box-shadow: 0 2px 5px rgba(120, 40, 55, 0.07) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.vplus-reports-status-panel .vplus-rsp__card:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(120, 40, 55, 0.12) !important;
}
.vplus-reports-status-panel .vplus-rsp__card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
}
.vplus-reports-status-panel .vplus-rsp__header {
  margin: 0 !important;
  padding: 0.6rem 1rem !important;
  gap: 0.6rem !important;
  background-color: #fbe9ec;
  border-bottom: 1px solid #efd6da;
}
.vplus-reports-status-panel .vplus-rsp__icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #fff;
  color: #b3263b;
  font-size: 0.9rem;
}
.vplus-reports-status-panel .vplus-rsp__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: #6b3a44;
  line-height: 1.2;
}
.vplus-reports-status-panel .vplus-rsp__card .card-body > *:not(.vplus-rsp__header) {
  padding-left: 1rem;
  padding-right: 1rem;
}
.vplus-reports-status-panel .vplus-rsp__card .card-body > *:nth-child(2) {
  padding-top: 0.75rem;
}
.vplus-reports-status-panel .vplus-rsp__card .card-body > *:last-child {
  padding-bottom: 0.85rem;
}
.vplus-reports-status-panel .vplus-rsp__value,
.vplus-reports-status-panel .vplus-rsp__title,
.vplus-reports-status-panel .vplus-rsp__empty,
.vplus-reports-status-panel .vplus-rsp__media {
  margin-top: auto;
  min-height: 1.9rem;
  display: flex;
  align-items: center;
  color: #2b2326;
}
.vplus-reports-status-panel .vplus-rsp__value {
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: clamp(1.5rem, 1.15rem + 1vw, 1.95rem);
  font-weight: 700;
  line-height: 1.1;
}
.vplus-reports-status-panel .vplus-rsp__title {
  font-size: 1rem;
  font-weight: 600;
}
.vplus-reports-status-panel .vplus-rsp__media .vplus-rsp__title {
  min-height: 0;
}
.vplus-reports-status-panel .vplus-rsp__empty {
  font-size: 0.9rem;
  font-weight: 500;
  color: #7a6a6e;
}
.vplus-reports-status-panel .vplus-rsp__sub {
  font-size: 0.8125rem;
  color: #7a6a6e !important;
  margin-top: 0.15rem;
  line-height: 1.2;
}
.vplus-reports-status-panel .vplus-rsp__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  flex: 0 0 auto;
}
.vplus-reports-status-panel .vplus-rsp__thumb--empty {
  background: #f6ebe4;
}

/* MS6 — compact strip. The panel is its own size container; the Bootstrap
   row-cols grid is replaced by CSS grid so all eight cards can share ONE row
   on a wide panel (figures first, then the two highlights, then the minor
   counts), measured at <= 140px tall at 1440. Narrower, it falls back to 4
   then 2 columns of the same compact card. Markup order is unchanged, so
   screen readers still meet the cards in source order. */
.vplus-reports-status-panel {
  container: vplus-rsp / inline-size;
}
.vplus-reports-status-panel > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}
.vplus-reports-status-panel > .row > .vplus-rsp__col {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}
/* The media row's text column carries `.min-w-0`, a utility only
   consignments-manager.css defines — and that sheet is not loaded here. Without
   it a long title pushed the page 6px sideways at 1440 (measured live). */
.vplus-reports-status-panel .vplus-rsp__media > .min-w-0 {
  min-width: 0;
  flex: 1 1 auto;
}
.vplus-reports-status-panel .vplus-rsp__header {
  padding: 0.35rem 0.6rem !important;
  gap: 0.4rem !important;
}
.vplus-reports-status-panel .vplus-rsp__icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
}
.vplus-reports-status-panel .vplus-rsp__label {
  font-size: 0.6875rem;
}
.vplus-reports-status-panel .vplus-rsp__card .card-body > *:not(.vplus-rsp__header) {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.vplus-reports-status-panel .vplus-rsp__card .card-body > *:nth-child(2) {
  padding-top: 0.4rem;
}
.vplus-reports-status-panel .vplus-rsp__card .card-body > *:last-child {
  padding-bottom: 0.5rem;
}
.vplus-reports-status-panel .vplus-rsp__value {
  font-size: 1.25rem;
  min-height: 0;
}
.vplus-reports-status-panel .vplus-rsp__title {
  font-size: 0.875rem;
}
.vplus-reports-status-panel .vplus-rsp__sub {
  font-size: 0.75rem;
}
.vplus-reports-status-panel .vplus-rsp__thumb {
  width: 32px;
  height: 32px;
}
@container vplus-rsp (min-width: 600px) {
  .vplus-reports-status-panel > .row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container vplus-rsp (min-width: 1100px) {
  .vplus-reports-status-panel > .row {
    grid-template-columns:
      repeat(4, minmax(0, 0.85fr))
      repeat(2, minmax(0, 1.35fr))
      repeat(2, minmax(0, 0.85fr));
  }
  .vplus-reports-status-panel .vplus-rsp__col--figure {
    order: 1;
  }
  .vplus-reports-status-panel .vplus-rsp__col--highlight {
    order: 2;
  }
  .vplus-reports-status-panel .vplus-rsp__col--minor {
    order: 3;
  }
}

body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__card {
  background-color: #221a1c !important;
  border-color: #3a2a2e !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__header {
  background-color: #2c2024;
  border-bottom-color: #3a2a2e;
}
body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__icon {
  background-color: #3b2226;
  color: #f2a3ae;
}
body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__label {
  color: #d9c3c8;
}
body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__value,
body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__title,
body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__media {
  color: #ece4e6;
}
body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__sub,
body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__empty {
  color: #b3a3a8 !important;
}
body.vplus-dark-mode .vplus-reports-status-panel .vplus-rsp__thumb--empty {
  background: #3a2a2e;
}

/* ---- MS2 / MS6 — Your/All control, results search, export ---------------- */
.vplus-my-sales-wrap .vplus-my-sales-attr .btn.active {
  background-color: var(--vplus-warm-accent);
  border-color: var(--vplus-warm-accent);
  color: #fff;
}
.vplus-my-sales-wrap .vplus-my-sales-search {
  flex: 1 1 14rem;
  max-width: 22rem;
}
.vplus-my-sales-wrap .vplus-export-results-scope {
  color: var(--vplus-warm-accent-hover);
  font-weight: 600;
}
/* Wide: the three wizard steps sit side by side instead of a tall stack. */
@media (min-width: 1200px) {
  .vplus-my-sales-wrap .vplus-export-results .vplus-steps {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 1fr);
    gap: 1.5rem;
  }
  .vplus-my-sales-wrap .vplus-export-results .vplus-steps .vplus-step {
    padding-bottom: 0;
  }
  .vplus-my-sales-wrap
    .vplus-export-results
    .vplus-steps
    .vplus-step:not(:last-child)::before {
    display: none;
  }
}

/* ===========================================================
   Vendor report card — item pager (E7.3)
   ===========================================================
   Lives here, not in single-vendor-report.php: the same card is
   injected into the My Sales slide-out, which never loads that
   template. Scoping these to that page left the pager applying a
   class that styled nothing there — measured live, 49 blocks
   carried .vplus-item-block-hidden and all 53 stayed visible. */
.vplus-vendor-report-card .vplus-vendor-item-block.vplus-item-block-hidden {
  display: none;
}
.vplus-vendor-report-card .vplus-vendor-item-block.vplus-item-block-highlight {
  outline: 2px solid var(--vplus-warm-accent, #c4622d);
  outline-offset: 2px;
}
.vplus-vendor-item-pager .vplus-ss-wrapper,
.vplus-vendor-item-pager .form-select {
  min-width: 0;
}

@media print {
  /* Paper gets every item, not just the page on screen. Also needed when
     printing from the slide-out, which the page template cannot reach. */
  .vplus-vendor-report-card .vplus-vendor-item-block.vplus-item-block-hidden {
    display: flex !important;
  }
  .vplus-vendor-item-pager {
    display: none !important;
  }
}

/* ===========================================================
   Numbered steps — shared (F3)
   ===========================================================
   Same visual grammar as the lot form's AI card (.vplus-ai-card
   .vplus-ai-step, ~line 4725): numbered chip, faint connector rail,
   and a stacked variant under 992px.

   Deliberately a SEPARATE block rather than widening that selector
   list. Those rules are entangled with lot-form specifics
   (.vplus-file-wrapper, .vplus-consignment-prompt-grid) that have no
   meaning in a wizard, and the plan's "re-point the lot form in the
   same commit" would mean editing a live 4,300-line form for a
   cosmetic win. The values below are copied from the measured
   originals; if they ever need to change, change both. */
.vplus-steps .vplus-step {
  position: relative;
  padding: 0 0 22px 46px;
}
.vplus-steps .vplus-step:focus,
.vplus-steps .vplus-step:focus-visible {
  outline: none;
}
.vplus-steps .vplus-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: -2px;
  width: 2px;
  background: #eceff3;
}
.vplus-steps .vplus-step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vplus-warm-accent, #c4622d);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.vplus-steps .vplus-step-title {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #131313;
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.vplus-dark-mode .vplus-steps .vplus-step-title {
  color: #cdd2da;
}
body.vplus-dark-mode .vplus-steps .vplus-step:not(:last-child)::before {
  background: #3a4048;
}

/* Under 992px drop the left rail: full-width steps with the number chip
   inline, same DOM. Mirrors the AI card's own breakpoint. */
@media (max-width: 991.98px) {
  .vplus-steps .vplus-step {
    padding: 0 0 18px 0;
  }
  .vplus-steps .vplus-step:not(:last-child)::before {
    display: none;
  }
  .vplus-steps .vplus-step-num {
    position: static;
    margin-bottom: 8px;
  }
}

/* ==========================================================================
   CORE-1 — Solid buttons suite-wide
   ==========================================================================
   Outline buttons read poorly on the light panels this suite uses: a 1px
   border and coloured text against #fff or #f8f9fa is low-contrast at small
   sizes, and there are ~550 `btn-outline-*` sites across the plugins. Editing
   the templates is the wrong tool, so the look is remapped here through
   Bootstrap's own button variables — the precedent is
   vp-invoicing-pages.css:665-679.

   Placed at the END of the file deliberately. Dark mode sets LITERAL colours
   for several outline variants earlier in source order (:9921, :10336, :10548,
   :10819); a variable remap placed above them loses on source order at equal
   specificity. Anything after this point must assume it wins.

   🔴 Toggle groups are excluded. `.btn-check + .btn` (the lot-form mode
   toggle, the number-separator radios, filter pills) and #auctionManagerTabs
   (vendor-plus-sale-page.js:436-437 swaps btn-primary <-> btn-outline-primary)
   use the outline/solid contrast AS their selected-state indicator. Filling
   both states makes selection invisible. The restore block below re-asserts
   the outline variables for those, rather than relying on a level-4 relative
   selector inside :not(), which would silently invalidate the whole rule on a
   browser that does not support it.
   ========================================================================== */

.btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary, #0d6efd);
  --bs-btn-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary, #0d6efd);
  --bs-btn-disabled-border-color: var(--bs-primary, #0d6efd);
}

.btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-outline-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

.btn-outline-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}

/* Warning fills light, so its text stays dark — white on #ffc107 is ~1.6:1 and
   fails AA outright. */
.btn-outline-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffca2c;
  --bs-btn-hover-border-color: #ffc720;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffcd39;
  --bs-btn-active-border-color: #ffc720;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

/* Charcoal, not aqua: the bright cyan read as a status colour rather than an
   action. Only the BUTTON moves — --bs-info is untouched, so alerts, badges and
   .text-info stay aqua. The focus ring is overridden too, or Bootstrap's own
   aqua ring flashes on keyboard focus against a charcoal fill. */
.btn-outline-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1d1d1d;
  --bs-btn-border-color: #1d1d1d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #333333;
  --bs-btn-hover-border-color: #333333;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3d3d3d;
  --bs-btn-active-border-color: #3d3d3d;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1d1d1d;
  --bs-btn-disabled-border-color: #1d1d1d;
  --bs-btn-focus-shadow-rgb: 29, 29, 29;
}

.btn-outline-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #424649;
  --bs-btn-hover-border-color: #373b3e;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d5154;
  --bs-btn-active-border-color: #373b3e;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

.btn-outline-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d3d4d5;
  --bs-btn-hover-border-color: #c6c7c8;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #babbbc;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}

/* ---- Toggle groups keep the outline for their UNSELECTED state ----------
   Re-asserting the variables here (rather than excluding the groups above with
   :not()) keeps the remap valid on every browser: a selector list is dropped
   wholesale if any part of it fails to parse, and `:not(.btn-check + .btn)`
   is Selectors level 4. The checked state falls through to Bootstrap's own
   `.btn-check:checked + .btn`, which fills from the same variables. */
.btn-check + .btn-outline-primary,
#auctionManagerTabs .btn-outline-primary,
/* Groups that swap btn-primary <-> btn-outline-primary in PHP/JS rather than
   through a .btn-check radio, so the outline IS their unselected state.
   Child-scoped deliberately: vendor-profile-tabs.php:113 reuses the class
   `vplus-vendor-profile-tabs` on a .card whose tabs are nav-tabs <a>s, which
   must keep their own styling. */
.vplus-vendor-profile-tabs > .btn-outline-primary,
.vplus-ur-tabs > .btn-outline-primary {
  --bs-btn-color: var(--bs-primary, #0d6efd);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary, #0d6efd);
  --bs-btn-hover-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary, #0d6efd);
  --bs-btn-active-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-disabled-color: var(--bs-primary, #0d6efd);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary, #0d6efd);
}

.btn-check + .btn-outline-secondary,
/* The item-detail modal's view switcher toggles btn-primary <-> this. */
.vplus-item-view-toggle > .btn-outline-secondary {
  --bs-btn-color: #6c757d;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-check + .btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
}

.btn-check + .btn-outline-success {
  --bs-btn-color: #198754;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
}

.btn-check + .btn-outline-danger {
  --bs-btn-color: #dc3545;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc3545;
}

/* Dark mode: the filled variants keep white text on a saturated fill. Light
   and warning stay dark-on-light in both themes, so they are not repeated. */
body.vplus-dark-mode .btn-outline-primary,
body.vplus-dark-mode .btn-outline-secondary,
body.vplus-dark-mode .btn-outline-danger,
body.vplus-dark-mode .btn-outline-success,
body.vplus-dark-mode .btn-outline-dark,
body.vplus-dark-mode .btn-outline-info {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}

/* #1d1d1d is invisible on the dark canvas (~1.03:1), so info takes the same
   lifted grey dark already uses. */
body.vplus-dark-mode .btn-outline-dark,
body.vplus-dark-mode .btn-outline-info {
  --bs-btn-bg: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #5c636a;
  --bs-btn-active-bg: #5c636a;
  --bs-btn-disabled-bg: #495057;
  --bs-btn-disabled-border-color: #495057;
}

/* Its own rule: putting this in the block above would also change
   .btn-outline-dark's focus ring, which is not in scope. */
body.vplus-dark-mode .btn-outline-info {
  --bs-btn-focus-shadow-rgb: 201, 205, 212;
}

/* Dark-mode toggle groups: restore the unselected outline look there too.
   The dark rule above forces white text on EVERY outline variant, which on a
   transparent background is invisible — so each group restored in light mode
   needs its dark counterpart here or its unselected tabs vanish. */
body.vplus-dark-mode .vplus-vendor-profile-tabs > .btn-outline-primary,
body.vplus-dark-mode .vplus-ur-tabs > .btn-outline-primary {
  --bs-btn-color: #8bb9fe;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #4c7fd1;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary, #0d6efd);
  --bs-btn-hover-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary, #0d6efd);
  --bs-btn-active-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-disabled-color: #8bb9fe;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #4c7fd1;
}

body.vplus-dark-mode .btn-check + .btn-outline-secondary,
body.vplus-dark-mode .btn-check + .btn-outline-dark,
body.vplus-dark-mode .vplus-item-view-toggle > .btn-outline-secondary {
  --bs-btn-color: #cbd2dc;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #5c636a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #5c636a;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HUE — per-area canvas tints.

   Each app area gets its own faint canvas so moving between them reads as
   moving somewhere, not as the same page reloading. The class is emitted
   server-side by Core's body_class filter (core/front-end.php), so the tint is
   in the FIRST paint -- a JS-added class cannot tint before scripts run, and
   under cross-document View Transitions the browser snapshots that untinted
   frame and cross-fades from it.

   ONE painting rule reads --vplus-geo-canvas; the classes only set the value.
   That is what keeps dark mode to a variable remap instead of a second copy of
   the selector list.

   ⚠ The wrapper list is the theme's own layout containers and was found by
   trial (see vendor-plus-09). The hue must reach the page edges, or the tint
   shows as a band with white margins around it.
   ───────────────────────────────────────────────────────────────────────────── */
body.vplus-geo-auctions        { --vplus-geo-canvas: #f1f6f2; }
body.vplus-geo-consignments    { --vplus-geo-canvas: #f0f4f9; }
body.vplus-geo-my-consignments { --vplus-geo-canvas: #f7f3ee; }
body.vplus-geo-reports         { --vplus-geo-canvas: #f9f1f2; }
body.vplus-geo-vendors         { --vplus-geo-canvas: #faf6ea; }
body.vplus-geo-invoicing       { --vplus-geo-canvas: #eef8fc; }

body[class*="vplus-geo-"],
body[class*="vplus-geo-"] .site,
body[class*="vplus-geo-"] .site-content,
body[class*="vplus-geo-"] .content-area,
body[class*="vplus-geo-"] main,
body[class*="vplus-geo-"] #main,
body[class*="vplus-geo-"] #primary,
body[class*="vplus-geo-"] .site-main,
body[class*="vplus-geo-"] article,
body[class*="vplus-geo-"] .entry-content,
body[class*="vplus-geo-"] .page-content {
  background-color: var(--vplus-geo-canvas, var(--bs-gray-100, #f6f7f9));
}

/* Dark mode: remap the VARIABLE, never repeat the painting rule. A literal
   colour in a dark-scoped rule out-ranks a variable remap, and the pre-paint
   critical CSS in global/header.php already paints html+body #1a1d21 with
   !important -- so the hue must arrive as a value that rule can consume, not as
   a competing declaration. Hue-tinted near-blacks, never the light value. */
body.vplus-dark-mode.vplus-geo-auctions        { --vplus-geo-canvas: #171c19; }
body.vplus-dark-mode.vplus-geo-consignments    { --vplus-geo-canvas: #171a1f; }
body.vplus-dark-mode.vplus-geo-my-consignments { --vplus-geo-canvas: #1c1917; }
body.vplus-dark-mode.vplus-geo-reports         { --vplus-geo-canvas: #1d1819; }
body.vplus-dark-mode.vplus-geo-vendors         { --vplus-geo-canvas: #1c1a14; }
body.vplus-dark-mode.vplus-geo-invoicing       { --vplus-geo-canvas: #131c20; }