/**
 * VendorPlus core styles — part 9 of 10: My Consignments screen
 *
 * 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 15723-17285 of the original file.
 */

/* =====================================================================
   MY CONSIGNMENTS  (/vendor-submissions/, [vplus_vendor_submissions])
   ---------------------------------------------------------------------
   Relocated here from an inline <style> block in
   vendorplus-consignments/templates/vendor-submissions-list.php
   (2026-09-13 design audit, §7). It lived inline while the page was being
   reworked; ~960 lines of layout in the document defeated caching and had
   accumulated several "override the override" sequences.

   Load order matters and is why this is safe here: on that page
   vendor-plus.css loads at position 30 of 42, AFTER Bootstrap (16) and the
   theme's styles.css (19) — so these rules still beat both — and everything
   between 30 and the old inline block at 40 (print, swiper, item-detail,
   abn-lookup, quill, cropper, fileupload) targets nothing on this page.

   Vocabulary: .vplus-sc__* for the card's own regions, .vplus-overview__*
   for the status tiles. The older .vplus-submission-* and .vplus-actions-*
   names are retained IN THE MARKUP as aliases so existing JS hooks
   (.vplus-view-submission-detail, .vplus-act-btn, .vplus-consignment-id-badge)
   and the Learn specimen selectors keep working.
   ===================================================================== */

/* ---- Design tokens (audit §4) ----
   Every value here already existed somewhere on this page; naming them stops
   the drift the audit measured: three radii, two shadow families (one warm,
   one blue-grey), two accent-bar widths and eighteen distinct spacing steps.
   Status tones drive the tile bar, the icon chip and the card rail so one
   status reads the same colour wherever it appears. */
.vplus-vendor-submissions-wrapper {
  --vplus-card-radius: 10px;
  --vplus-control-radius: 8px;
  --vplus-pill-radius: 999px;
  --vplus-accent-bar: 4px;
  --vplus-shadow-1: 0 2px 5px rgba(120, 90, 60, 0.08);
  --vplus-shadow-2: 0 0.5rem 1rem rgba(120, 90, 60, 0.12);
  --vplus-space-1: 0.25rem;
  --vplus-space-2: 0.5rem;
  --vplus-space-3: 0.75rem;
  --vplus-space-4: 1rem;
  --vplus-space-5: 1.5rem;
  --vplus-fs-label: 0.6875rem;
  --vplus-fs-meta: 0.75rem;
  --vplus-fs-body-sm: 0.8125rem;
  --vplus-fs-title: 1.08rem;
  --vplus-fs-count: 1.25rem;
  --vplus-control-h: 36px;
  --vplus-control-h-touch: 44px;
  --tone-draft: #8a7f73;
  --tone-pending: #b8860b;
  --tone-approved: #1f7a35;
  --tone-rejected: #b42332;
  --tone-auction: #6f42c1;
  --tone-closed: #b8860b;
  --tone-sold: #1f7a35;
  --tone-unsold: #6c757d;
  --tone-live: #1f7a35;
  /* Responsive uplift (2026-09-23 plan, Part C). The primary action colour is
     darker than --vplus-warm-accent: #c4622d with white text is 4.1:1 and
     fails WCAG AA; #b3541f is 5.0:1. */
  --sc-action: #b3541f;
  --sc-action-hover: #9c4719;
  --sc-radius: 12px;
  --sc-inset: #f7f3ee;
  --sc-muted: #5f6670;
  --sc-danger: #b42318;
}

/* ── Bidding & Buying Option button group (Request Pricing Changes modal) ──
   Shared with the submission form's group so both read identically. Sharpens
   selectable / selected / locked states; keeps pointer-events on locked labels
   so the "why is this locked" tooltip fires (Bootstrap disables them by
   default, which silently killed the disabled-option tooltips testers reported). */
.vplus-mode-btn-group .btn {
  border-width: 1.5px;
  font-weight: 500;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease;
}
.vplus-mode-btn-group .btn-check:not(:checked):not(:disabled) + .btn:hover {
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
  box-shadow: 0 1px 4px rgba(13, 110, 253, 0.25);
}
.vplus-mode-btn-group .btn-check:checked + .btn {
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.vplus-mode-btn-group .btn-check:disabled + .btn,
.vplus-mode-btn-group .btn-check[disabled] + .btn {
  pointer-events: auto;
  cursor: not-allowed;
  opacity: 1;
  color: #9aa0a6;
  background-color: #f4f5f7;
  border-style: dashed;
  border-color: #ced4da;
  box-shadow: none;
}
.vplus-mode-btn-group .btn-check:disabled + .btn .fa-regular,
.vplus-mode-btn-group .btn-check:disabled + .btn .fa-solid {
  opacity: 0.55;
}
.vplus-vendor-submissions-wrapper ~ .page-title,
.vplus-my-consignments-page .entry-header,
.vplus-my-consignments-page .page-header,
.vplus-my-consignments-page .entry-title,
.vplus-my-consignments-page .page-title,
.vplus-my-consignments-page h1.entry-title,
.vplus-my-consignments-page h1.page-title,
.vplus-vendor-submissions-wrapper ~ h1 {
  display: none;
}
.vplus-submission-card {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.vplus-submission-thumb {
  width: 80px;
  height: 80px;
  background: var(--vplus-surface-panel-alt, #f8f9fa);
  border-radius: 8px;
  overflow: hidden;
}
.vplus-submission-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Shadow only, no lift: the card is full of 35-44px buttons and moving the
   whole surface under the pointer made them harder to hit (and on touch the
   lift sticks after a tap). */
.vplus-submission-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(120, 90, 60, 0.12) !important;
  position: relative;
  z-index: 2;
}
/* ============================================================
   1.0.4 overhaul — Status Overview filter cards, search toolbar,
   rebalanced submission cards, solid Actions button. Page bg is
   scoped to the wrapper (not global body) so the theme + dark mode
   stay intact. color-mix tints fall back gracefully on old browsers.
   ============================================================ */
/* ---- Warm palette (v3 brief) ----
   Scoped to the My Consignments page ONLY (body.vplus-my-consignments-page, a
   class this template adds to <body>) — it does NOT affect any other page or
   plugin. The whole-page fill paints the theme's body/layout containers warm so
   the page is uniform edge-to-edge (no white margins around a warm section). */
body.vplus-my-consignments-page {
  --vplus-page-bg: var(--vplus-geo-canvas, #f7f3ee);
  --vplus-warm-bg: var(--vplus-geo-canvas, #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;
  background-color: var(--vplus-warm-bg) !important;
}
/* Paint the common theme layout containers too, so the warm fill reaches the
   page edges regardless of the theme's own wrappers (only on this page). */
body.vplus-my-consignments-page .site,
body.vplus-my-consignments-page .site-content,
body.vplus-my-consignments-page .content-area,
body.vplus-my-consignments-page main,
body.vplus-my-consignments-page #main,
body.vplus-my-consignments-page #primary,
body.vplus-my-consignments-page .site-main,
body.vplus-my-consignments-page article,
body.vplus-my-consignments-page .entry-content,
body.vplus-my-consignments-page .page-content {
  background-color: var(--vplus-warm-bg) !important;
}
/* The wrapper inherits the same tokens (still needed for the AJAX-reloaded
   inner HTML, which is re-rendered inside the wrapper). */
.vplus-vendor-submissions-wrapper {
  --vplus-page-bg: var(--vplus-geo-canvas, #f7f3ee);
  --vplus-warm-bg: var(--vplus-geo-canvas, #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;
  background-color: var(--vplus-warm-bg);
  color: var(--vplus-warm-ink);
}
/* Warm surfaces for the cards + overview tiles + panels in this page only. */
.vplus-vendor-submissions-wrapper .vplus-submission-card,
.vplus-vendor-submissions-wrapper .vplus-overview__tile,
.vplus-vendor-submissions-wrapper .card.mb-4 {
  background-color: var(--vplus-warm-surface) !important;
  border-color: var(--vplus-warm-border) !important;
}
.vplus-vendor-submissions-wrapper .shadow-sm {
  box-shadow: 0 2px 5px rgba(120, 90, 60, 0.08) !important;
}
.vplus-vendor-submissions-wrapper .text-body-secondary {
  color: var(--vplus-warm-muted) !important;
}
/* Bootstrap's .table sets its own --bs-table-bg on the <table> itself, which
   paints over the parent card's warm surface — match it explicitly so the
   rollup tables don't show a plain white strip inside the warm card. */
.vplus-vendor-submissions-wrapper .vplus-rollup-table {
  --bs-table-bg: var(--vplus-warm-surface);
  background-color: var(--vplus-warm-surface);
}

/* ---- Dark Mode: remap the warm palette to dark equivalents ----
   The whole page is driven by the --vplus-warm-* tokens above; remapping them
   here (rather than overriding each card) flips the entire page cohesively.
   Scoped to this page's body class + the wrapper so nothing else is touched.
   Values mirror the suite's dark surface tokens (panel #242830 / alt #2d323c). */
body.vplus-my-consignments-page.vplus-dark-mode,
body.vplus-dark-mode .vplus-vendor-submissions-wrapper {
  --vplus-page-bg: var(--vplus-geo-canvas, #1a1d21);
  --vplus-warm-bg: var(--vplus-geo-canvas, #1a1d21);
  --vplus-warm-surface: #242830;
  --vplus-warm-border: #3a3f4a;
  --vplus-warm-ink: #e4e6eb;
  --vplus-warm-muted: #a0a6b1;
  /* keep the terracotta accent — it reads well on dark too */
  --sc-inset: #2d323c;
  --sc-muted: #a0a6b1;
  --sc-danger: #f97066;
}
body.vplus-my-consignments-page.vplus-dark-mode .site,
body.vplus-my-consignments-page.vplus-dark-mode .site-content,
body.vplus-my-consignments-page.vplus-dark-mode .content-area,
body.vplus-my-consignments-page.vplus-dark-mode main,
body.vplus-my-consignments-page.vplus-dark-mode #main,
body.vplus-my-consignments-page.vplus-dark-mode #primary,
body.vplus-my-consignments-page.vplus-dark-mode .site-main,
body.vplus-my-consignments-page.vplus-dark-mode article,
body.vplus-my-consignments-page.vplus-dark-mode .entry-content,
body.vplus-my-consignments-page.vplus-dark-mode .page-content {
  background-color: var(--vplus-warm-bg) !important;
}
/* Card/tile/panel surfaces + inner elements that read the warm surface token. */
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-submission-card,
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-overview__tile,
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .card,
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .card.mb-4 {
  background-color: var(--vplus-warm-surface) !important;
  border-color: var(--vplus-warm-border) !important;
  color: var(--vplus-warm-ink);
}
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .shadow-sm {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Form controls (sort/search/view-toggle) inside the wrapper. */
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .form-control,
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .form-select,
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-view-toggle,
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-keyword-search,
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-sort-select {
  background-color: #2d323c !important;
  border-color: var(--vplus-warm-border) !important;
  color: var(--vplus-warm-ink) !important;
}
/* Card action buttons (View/Edit/Delete row) — were plain white. */
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-act-btn {
  background-color: #2d323c !important;
  border-color: var(--vplus-warm-border) !important;
  color: var(--vplus-warm-ink) !important;
}
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-act-btn:hover {
  background-color: #343a46 !important;
}
/* The rule above greyed the primary action too, so dark mode lost the one
   button the card is built around. */
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-act-btn.is-primary {
  background-color: var(--sc-action, #b3541f) !important;
  border-color: var(--sc-action, #b3541f) !important;
  color: #fff !important;
}
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-act-btn.is-primary:hover {
  background-color: var(--sc-action-hover, #9c4719) !important;
}
body.vplus-dark-mode .vplus-vendor-submissions-wrapper .vplus-act-btn.is-danger {
  color: var(--sc-danger, #f97066) !important;
}
/* Pre-bid status badges — soft light chips → dark-tinted equivalents. */
body.vplus-dark-mode .vplus-prebid-badge.vplus-prebid-on {
  background: rgba(40, 167, 69, 0.18);
  color: #7bd88f;
  border-color: rgba(40, 167, 69, 0.4);
}
body.vplus-dark-mode .vplus-prebid-badge.vplus-prebid-off {
  background: rgba(160, 166, 177, 0.16);
  color: #a0a6b1;
  border-color: var(--vplus-warm-border);
}

/* ---- Status Overview filter tiles (audit §3.1) ----
   One auto-fit grid at every width, so the column count follows the available
   space and every tile is the same size. Earlier builds used a fixed 4/8-column
   grid, a flex-wrap chip row above 992px, and a two-in-one "pair" cell for
   Approved+Rejected; that made a tile's width depend on its position, truncated
   the paired labels between 768 and 991px, and left a hole on phones.

   IMPORTANT: the 170px floor is measured, not chosen. A stacked tile gives its
   label the tile width minus 64px (icon + gaps), and the longest label,
   "Closed - Pending", needs 104px. Below 170px the labels ellipsis away again. */
.vplus-overview {
  display: grid;
  gap: var(--vplus-space-2, 0.5rem);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: stretch;
}
.vplus-overview__tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon count" "icon label";
  align-items: center;
  column-gap: var(--vplus-space-2, 0.5rem);
  row-gap: 0;
  min-height: var(--vplus-control-h-touch, 44px);
  padding: 0.5rem 0.65rem;
  background: var(--vplus-warm-surface, #fffdfa);
  border: 1px solid var(--vplus-warm-border, #ece3d8);
  /* The bar carries the STATUS tone the icon chip already shows, instead of
       a single generic accent (the only non-warm colour left on the page). */
  border-left: var(--vplus-accent-bar, 4px) solid
    var(--tile-tone, var(--vplus-warm-border, #ece3d8));
  border-radius: var(--vplus-card-radius, 10px);
  box-shadow: var(--vplus-shadow-1, 0 2px 5px rgba(120, 90, 60, 0.08));
  text-decoration: none;
  /* Tiles are grid items, not Bootstrap .card: vendor-plus.css sets
       .card { margin-bottom: 1rem }, which leaked in as uneven tile heights. */
  margin: 0;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
/* The single-row icon-count-label form needs ~180px per tile to show the
   longest label; nine of those only fit past ~1650px. */
@media (min-width: 1650px) {
  .vplus-overview__tile {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "icon count label";
    padding: 0.4rem 0.75rem;
  }
}
.vplus-overview__icon {
  grid-area: icon;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  background: color-mix(
    in srgb,
    var(--tile-tone, var(--vplus-warm-muted)) 14%,
    transparent
  );
  color: var(--tile-tone, var(--vplus-warm-muted));
}
.vplus-overview__icon i {
  font-size: 0.85rem;
}
.vplus-overview__count {
  grid-area: count;
  font-size: var(--vplus-fs-count, 1.25rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--bs-emphasis-color);
  /* Counts move as the queue moves; tabular figures stop a tile reflowing
       when 39 becomes 40. */
  font-variant-numeric: tabular-nums;
}
.vplus-overview__label {
  grid-area: label;
  font-size: var(--vplus-fs-label, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--vplus-warm-muted, var(--bs-secondary-color));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.vplus-overview__tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--vplus-shadow-2, 0 0.5rem 1rem rgba(120, 90, 60, 0.12));
}
@media (prefers-reduced-motion: reduce) {
  .vplus-overview__tile {
    transition: none;
  }
  .vplus-overview__tile:hover {
    transform: none;
  }
}
/* Active tile: warm terracotta. The ring is a box-shadow, never an added
   border — a 1px border on all four sides made the active tile 2px taller
   than its siblings. */
.vplus-overview__tile.is-active {
  background-color: var(--vplus-warm-surface) !important;
  border-left-color: var(--vplus-warm-accent) !important;
  box-shadow:
    0 0 0 1px rgba(196, 98, 45, 0.45),
    0 4px 14px rgba(196, 98, 45, 0.18) !important;
}
.vplus-overview__tile.is-active .vplus-overview__icon {
  background-color: #f6e3d3 !important;
  background-image: none !important;
  color: var(--vplus-warm-accent) !important;
}
.vplus-overview__tile.is-active .vplus-overview__icon i {
  color: var(--vplus-warm-accent) !important;
}
.vplus-overview__tile.is-active .vplus-overview__count {
  color: var(--vplus-warm-ink) !important;
}
.vplus-overview__tile.is-active .vplus-overview__label {
  color: var(--vplus-warm-accent-hover) !important;
  font-weight: 600 !important;
}
/* Tablet (576-991): smaller tiles, five across at 768 instead of four plus an
   orphan. The icon chip is dropped in this range and the status tone stays on
   the left bar: a 128px tile with the chip leaves its label ~64px, and the
   longest label, "Closed - Pending", needs ~104px. Without it the label gets
   the tile width minus padding (~104px at the 128px floor). */
@media (min-width: 576px) and (max-width: 991.98px) {
  .vplus-overview {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }
  .vplus-overview__tile {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "count" "label";
    min-height: 60px;
    padding: 0.45rem 0.6rem;
  }
  .vplus-overview__icon {
    display: none;
  }
  .vplus-overview__label {
    letter-spacing: 0;
  }
}
/* Phone: one horizontally scrolling row of chips instead of a 2-column grid
   that took ~290px before the first card. Chips size to their label, so
   nothing is truncated; the right-edge fade says the row scrolls. */
@media (max-width: 575.98px) {
  .vplus-overview {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px 2px 4px;
    margin-bottom: 1rem !important;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .vplus-overview::-webkit-scrollbar {
    display: none;
  }
  .vplus-overview .vplus-overview__tile {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-left-width: 1px;
    border-radius: var(--vplus-pill-radius, 999px);
    box-shadow: none;
    scroll-snap-align: start;
  }
  .vplus-overview .vplus-overview__tile::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tile-tone, var(--vplus-warm-muted));
  }
  .vplus-overview .vplus-overview__tile:hover {
    transform: none;
  }
  .vplus-overview .vplus-overview__icon {
    display: none;
  }
  .vplus-overview .vplus-overview__label {
    order: 1;
    overflow: visible;
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vplus-warm-ink);
  }
  .vplus-overview .vplus-overview__count {
    order: 2;
    font-size: 0.75rem;
    line-height: 20px;
    padding: 0 6px;
    border-radius: var(--vplus-pill-radius, 999px);
    background: color-mix(in srgb, var(--vplus-warm-muted) 16%, transparent);
  }
  .vplus-overview .vplus-overview__tile.is-active {
    background-color: var(--sc-action, #b3541f) !important;
    border-color: var(--sc-action, #b3541f) !important;
    box-shadow: none !important;
  }
  .vplus-overview .vplus-overview__tile.is-active::before {
    background: #fff;
  }
  .vplus-overview .vplus-overview__tile.is-active .vplus-overview__label,
  .vplus-overview .vplus-overview__tile.is-active .vplus-overview__count {
    color: #fff !important;
  }
  .vplus-overview .vplus-overview__tile.is-active .vplus-overview__count {
    background: rgba(255, 255, 255, 0.22);
  }
}

/* ---- Mine / Network scope tabs ----
   A segmented control on the warm palette. Restyle only: they are still plain
   full-reload links, so the delegated handlers never read this markup. */
.vplus-scope-tabs {
  gap: 2px;
  flex-wrap: nowrap;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--vplus-warm-border, #ece3d8) 70%, transparent);
}
.vplus-scope-tabs .nav-item {
  flex: 1 1 auto;
}
.vplus-scope-tabs .nav-link {
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  border-radius: 8px;
  color: var(--vplus-warm-muted, var(--bs-secondary-color));
  background: transparent;
  border: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.vplus-scope-tabs .nav-link:hover {
  color: var(--vplus-warm-ink, var(--bs-emphasis-color));
}
.vplus-scope-tabs .nav-link.active {
  background-color: var(--vplus-warm-surface, #fffdfa) !important;
  color: var(--vplus-warm-ink, #2e2a26) !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(120, 90, 60, 0.18);
}

/* ---- Filters & Sorting toolbar (search) ---- */
.vplus-sort-select {
  min-width: 9.5rem;
}
.vplus-sort-inline-label {
  white-space: nowrap;
}
.vplus-search-wrap {
  position: relative;
  margin: 0;
}
.vplus-search-wrap .vplus-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  pointer-events: none;
}
.vplus-keyword-search {
  border-radius: 999px;
  padding-left: 1.9rem;
  width: 13rem;
  max-width: 100%;
  transition:
    width 0.18s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.vplus-keyword-search:focus {
  width: 16rem;
}
@media (max-width: 575.98px) {
  .vplus-keyword-search,
  .vplus-keyword-search:focus {
    width: 100%;
  }
  .vplus-sort-group {
    width: 100%;
  }
  .vplus-sort-select {
    flex: 1;
  }
}

/* ---- Warm Search / Sort controls (v3 brief #5) ---- */
.vplus-vendor-submissions-wrapper .vplus-keyword-search,
.vplus-vendor-submissions-wrapper .vplus-sort-select {
  background-color: #fbf6ef !important;
  border: 1px solid #e3d4c0 !important;
  border-radius: 8px !important;
  color: var(--vplus-warm-ink) !important;
  box-shadow: inset 0 1px 2px rgba(120, 90, 60, 0.06);
}
.vplus-vendor-submissions-wrapper .vplus-keyword-search {
  border-radius: 999px !important;
}
.vplus-vendor-submissions-wrapper .vplus-keyword-search:focus,
.vplus-vendor-submissions-wrapper .vplus-sort-select:focus {
  border-color: var(--vplus-warm-accent) !important;
  box-shadow: 0 0 0 0.18rem rgba(196, 98, 45, 0.18) !important;
  background-color: #fffdfa !important;
}
.vplus-vendor-submissions-wrapper .vplus-keyword-search::placeholder {
  color: #b3a596;
}
.vplus-vendor-submissions-wrapper .vplus-sort-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9501f' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  background-size: 14px !important;
}
.vplus-vendor-submissions-wrapper .vplus-search-wrap .vplus-search-icon {
  color: var(--vplus-warm-accent);
}

/* ---- "New Submission" primary button prominence (v3 brief #2) ---- */
.vplus-vendor-submissions-wrapper .btn-primary {
  background-color: var(--sc-action, #b3541f) !important;
  border-color: var(--sc-action, #b3541f) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(196, 98, 45, 0.35) !important;
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    background-color 0.12s;
}
.vplus-vendor-submissions-wrapper .btn-primary:hover,
.vplus-vendor-submissions-wrapper .btn-primary:focus {
  background-color: var(--sc-action-hover, #9c4719) !important;
  border-color: var(--sc-action-hover, #9c4719) !important;
  box-shadow: 0 6px 20px rgba(196, 98, 45, 0.45) !important;
  transform: translateY(-1px);
}

/* ---- Submission card (audit §3.2) ----
   One CSS grid with named areas. The card interior used to be a Bootstrap
   .row/.col grid neutralised with !important and re-laid-out as a CSS grid;
   the two systems fought and Bootstrap won the declaration that mattered
   (.align-items-center is !important), so the thumbnail floated vertically
   centred instead of aligning with the title. There are no Bootstrap grid
   utilities inside the card now, so there is nothing to fight.

   Variants are driven by the area map, never by display:none on a child that
   still occupies a track — a hidden element in its own row still collected the
   row gap on both sides (~21px of dead space on phones).

   The card is a size container: its inner layout follows the CARD's width
   (narrow < 560, wide >= 560, extra-wide >= 820), not the viewport, so a
   half-width grid column at 1024 and a full-width phone card get the layout
   that fits them. A container cannot query itself, so --thumb lives on the
   grid, not the card. */
.vplus-submission-card {
  --pad: 14px;
  --bar: var(--vplus-accent-bar, 4px);
  container: sc / inline-size;
  position: relative;
  overflow: hidden !important;
  border-radius: var(--sc-radius, 12px) !important;
  /* Spacing comes from the list grid's gap, and the card fills its grid
     cell so every card in a row is the same height. */
  margin: 0 !important;
  height: 100%;
}
.vplus-submission-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar);
  background: var(--vplus-card-accent, #c8a98a);
  border-top-left-radius: var(--vplus-card-radius, 10px);
  border-bottom-left-radius: var(--vplus-card-radius, 10px);
}
/* The body is padded clear of the bar so the left inset matches the right
   (the bar overlapped the padding, reading as 11px left vs 16px right).
   !important overrides Bootstrap's .p-3 utility on the body element. */
.vplus-submission-card > .card-body {
  display: flex;
  flex-direction: column;
  padding-top: var(--pad) !important;
  padding-right: var(--pad) !important;
  padding-bottom: var(--pad) !important;
  padding-left: calc(var(--pad) + var(--bar)) !important;
}
/* Narrow card (the base): facts run full width under the header. The last
   row is 1fr so the footer absorbs a stretched card's slack and the action
   rows of neighbouring cards line up. */
.vplus-submission-grid {
  --thumb: 72px;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr);
  grid-template-areas:
    "media header"
    "facts facts"
    "footer footer";
  grid-template-rows: auto auto 1fr;
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;
}
/* The rejection reason / review-time note. Named, because an auto-placed item
   lands in an implicit row after the footer, one thumbnail-column wide. Only
   cards that carry a note get the extra row, so no other card pays its gap. */
.vplus-sc__note {
  grid-area: note;
  min-width: 0;
}
.vplus-submission-grid:has(.vplus-sc__note) {
  grid-template-areas:
    "media header"
    "facts facts"
    "note note"
    "footer footer";
  grid-template-rows: auto auto auto 1fr;
}
/* Dropdown (non actions-row) variant — kept as a fallback area map for the
   keyboard/no-JS path, where the source dropdown is still the only control. */
.vplus-submission-card:not(.vplus-has-actions-row) .vplus-submission-grid {
  grid-template-areas:
    "media header"
    "facts facts"
    "menu menu"
    "footer footer";
  grid-template-rows: auto auto auto 1fr;
}
/* Wide card (list view on a tablet, any wide column). */
@container sc (min-width: 560px) {
  .vplus-submission-grid {
    --thumb: 96px;
    grid-template-areas:
      "media header"
      "media facts"
      "footer footer";
  }
  .vplus-submission-grid:has(.vplus-sc__note) {
    grid-template-areas:
      "media header"
      "media facts"
      "media note"
      "footer footer";
  }
  .vplus-submission-card:not(.vplus-has-actions-row) .vplus-submission-grid {
    grid-template-columns: var(--thumb) minmax(0, 1fr) auto;
    grid-template-areas:
      "media header menu"
      "media facts  menu"
      "footer footer footer";
    grid-template-rows: auto auto 1fr;
  }
}
/* Wide card (>= 560px: list view from 576px, grid view at desktop): every
   action in a right-hand column, the meta row across the foot. The column is
   a clamp of the CARD width, never its content, so a long button label cannot
   move the detail/actions split and every card's column is the same width. */
@container sc (min-width: 560px) {
  .vplus-submission-card.vplus-has-actions-row .vplus-submission-grid {
    grid-template-columns: var(--thumb) minmax(0, 1fr) clamp(160px, 30cqi, 220px);
    grid-template-areas:
      "media header actions"
      "media facts  actions"
      "meta  meta   meta";
    grid-template-rows: auto 1fr auto;
  }
  .vplus-submission-card.vplus-has-actions-row .vplus-submission-grid:has(.vplus-sc__note) {
    grid-template-areas:
      "media header actions"
      "media facts  actions"
      "media note   actions"
      "meta  meta   meta";
    grid-template-rows: auto auto 1fr auto;
  }
  .vplus-submission-card.vplus-has-actions-row .vplus-sc__footer {
    display: contents;
  }
  .vplus-submission-card.vplus-has-actions-row .vplus-sc__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: stretch;
    border-left: 1px solid var(--vplus-warm-border, #e6e0d6);
    padding-left: 12px;
  }
  .vplus-submission-card.vplus-has-actions-row .vplus-act-more-wrap {
    display: none;
  }
  .vplus-submission-card.vplus-has-actions-row .vplus-act-btn {
    justify-content: flex-start;
    white-space: normal;
    text-align: left;
  }
  .vplus-submission-card.vplus-has-actions-row .vplus-act-btn.is-extra {
    display: inline-flex;
  }
  .vplus-submission-card.vplus-has-actions-row .vplus-act-divider {
    display: block;
    height: 0;
    margin: 2px 0;
    border-top: 1px solid var(--vplus-warm-border, #e6e0d6);
  }
  body.vplus-dark-mode .vplus-submission-card.vplus-has-actions-row .vplus-sc__actions,
  body.vplus-dark-mode .vplus-submission-card.vplus-has-actions-row .vplus-act-divider {
    border-color: var(--vplus-warm-border, #3a3f4a);
  }
  .vplus-submission-card.vplus-has-actions-row .vplus-sc__meta {
    grid-area: meta;
    padding-top: 0.6rem;
    border-top: 1px solid var(--vplus-warm-border, #e6e0d6);
  }
}
.vplus-sc__media {
  grid-area: media;
}
/* The detail column is a pass-through: its children (header, facts) are the
   real grid items, so it must NOT take a track of its own. */
.vplus-sc__body {
  display: contents;
}
.vplus-sc__header {
  grid-area: header;
  min-width: 0;
}
/* Hugs its content (the auction title pill sets its width) rather than
   filling the column. */
.vplus-sc__facts {
  grid-area: facts;
  min-width: 0;
  margin: 0;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}
.vplus-sc__footer {
  grid-area: footer;
  margin-top: auto;
}
.vplus-submission-actions-col {
  grid-area: menu;
  align-self: start;
}
.vplus-submission-card.vplus-has-actions-row .vplus-submission-actions-col {
  display: none;
}

.vplus-sc__thumb {
  width: var(--thumb);
  height: var(--thumb);
}

.vplus-sc__title-wrap {
  min-width: 0;
  max-width: 100%;
}
.vplus-sc__title {
  /* 15px on a narrow card, the full title size once the card is wide. */
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 var(--vplus-space-1, 0.25rem) !important;
  text-transform: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The link is the actual text node — it must be block-level, width-bound and
   ellipsis-clipping too, or the inline <a> re-expands the title. */
.vplus-sc__title a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-emphasis-color) !important;
}
@container sc (min-width: 560px) {
  .vplus-sc__title {
    font-size: var(--vplus-fs-title, 1.08rem) !important;
  }
}
/* Two lines at every width, still clamped: one line cut real titles
   ("2021 TESLA MODEL 3 STANDARD RANGE PLUS").
   IMPORTANT: the clamp belongs on the <a> as well as the heading — the link is
   the text node and carries its own nowrap/ellipsis, so clamping the heading
   alone leaves the title clipped at one line. Declared after the
   .vplus-sc__title a rules above, which otherwise win on source order at
   equal specificity. */
.vplus-sc__title,
.vplus-sc__title a {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: clip;
}
.vplus-sc__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0 !important;
}
.vplus-sc__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

/* Facts (was .vplus-auction-note): a <dl> of label/value pairs, always its own
   row under the header. It used to be a flex sibling of the badges inside
   .vplus-sc__status, where its grid-area never applied and wrapping decided
   the position — a narrow block sat beside the badges and a wide one dropped
   below, so the same information moved from card to card. */
.vplus-sc__facts {
  display: grid;
  gap: 0.15rem;
  font-size: var(--vplus-fs-body-sm, 0.8125rem);
  color: #6c757d;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--sc-inset, #f7f3ee);
}
/* The <dl> is always rendered; with no fact rows (drafts, pending) it must
   not paint an empty inset panel. */
.vplus-sc__facts:not(:has(.vplus-sc__fact)) {
  display: none;
}
/* The label column is shared by every row, so values line up down the card.
   The <dl> owns the track pair and each row inherits it with `subgrid`; a
   per-row `grid-template-columns: auto 1fr` sizes each label independently and
   leaves the values ragged (measured 243px vs 248px on adjacent rows).
   Fallback for no-subgrid engines: the rows stay two-column, just not aligned
   to each other — the information is unaffected. */
.vplus-sc__facts {
  grid-template-columns: auto minmax(0, 1fr);
}
.vplus-sc__fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.4rem;
  align-items: baseline;
}
@supports (grid-template-columns: subgrid) {
  .vplus-sc__fact {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}
.vplus-sc__fact > dt {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  font-weight: 600;
  color: #475467;
  white-space: nowrap;
  min-width: 0;
}
.vplus-sc__fact > dd {
  margin: 0;
  min-width: 0;
}
.vplus-sc__fact > dt > i {
  font-size: 0.8em;
  width: 14px;
  text-align: center;
  color: #9aa1a8;
  flex: 0 0 auto;
}
.vplus-sc__fact--sold > dd {
  font-weight: 600;
  color: #2f6d4f;
}
/* Keep the label with its first value: "Auction Date(s):" landing alone on a
   line read as a heading for an empty field. */
.vplus-sc__fact .vplus-auction-label {
  white-space: nowrap;
}
/* Each date has its own row, so it may wrap inside that row: nowrap overflowed
   the facts panel on a 560-600px card, where the side column leaves the
   detail column ~240px. */
.vplus-sc__fact time {
  font-variant-numeric: tabular-nums;
}

/* Footer band: divider, pinned to the bottom of a card stretched to match its
   grid-row neighbour, so the slack falls above the divider rather than below.
   The meta (ID, people, dates) reads first and the actions sit last: meta runs
   to one or two lines, so with the actions last they line up across a row. */
.vplus-sc__footer {
  display: grid;
  gap: var(--vplus-space-2, 0.5rem);
  padding-top: 0.6rem;
  border-top: 1px solid var(--vplus-warm-border, #e6e0d6);
}
.vplus-sc__footer > .vplus-sc__meta {
  order: -1;
}

/* Actions on a narrow card: exactly three slots — View details, one
   status-specific secondary, and a 44px "more" button holding everything else
   (the row is built by this page's script; wide cards use a side column). Three fixed tracks supersede the 2026-09-13 wrapping flex
   row: nothing wraps, so no lone button can stretch across a wrapped line,
   and a long label ellipsises inside its track instead of breaking out. */
.vplus-sc__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  gap: var(--vplus-space-2, 0.5rem);
  width: 100%;
}
.vplus-act-more-wrap {
  grid-column: 3;
  min-width: 0;
}
.vplus-act-btn.vplus-act-more {
  width: 100%;
  height: 100%;
  padding: 0;
}
/* The "more" items repeated as buttons, and their divider, exist for the wide
   card's side column only; here the "more" menu carries them. */
.vplus-act-btn.is-extra,
.vplus-act-divider {
  display: none;
}
.vplus-sc__actions:empty {
  display: none;
}

/* Meta: two lines at most — badges, then dates. */
.vplus-sc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  font-size: var(--vplus-fs-meta, 0.75rem);
  color: #667085;
  width: 100%;
}
.vplus-sc__meta-badges,
.vplus-sc__meta-dates {
  /* flex, not inline-flex: an inline-flex box is sized by its content, so the
     children's max-width:100% resolved against their own width and never
     constrained them. WebKit is stricter about this than Blink. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  min-width: 0;
}
/* The separator belongs INSIDE the dates group only, and trails the item it
   follows — as a leading ::before with a negative margin it was pulled into
   the card padding and appeared as an orphan bullet starting a wrapped line. */
.vplus-sc__meta-dates > * + *::before {
  content: "\00b7";
  margin-right: 0.5rem;
  color: #c7ced5;
}
.vplus-sc__meta strong {
  font-weight: 600;
  color: #475467;
}
.vplus-sc__meta i {
  color: #9aa1a8;
}

/* Action buttons. Red is reserved for genuinely destructive actions; a warning
   that is merely consequential ("Submit Revisions" withdraws the item from its
   auction) takes the warm attention treatment instead of competing with the
   primary button. */
.vplus-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  /* Sized by its grid track; the label ellipsises rather than overflowing. */
  flex: initial;
  min-width: 0;
  overflow: hidden;
  min-height: var(--vplus-control-h, 36px);
  white-space: nowrap;
  font-size: var(--vplus-fs-body-sm, 0.8125rem);
  font-weight: 500;
  line-height: 1.1;
  padding: 0.4rem 0.7rem;
  border: 1px solid #d0d5dd;
  border-radius: var(--vplus-control-radius, 8px);
  background: #fff;
  color: #344054;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.vplus-act-btn > i {
  margin: 0;
  width: 1em;
  text-align: center;
  flex: 0 0 auto;
}
.vplus-act-btn-label,
.vplus-act-btn-label--short {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A shorter label on narrow cards ("Re-nominate" for "Re-nominate for
   Auction"); the full text stays in the button's accessible name. */
.vplus-act-btn-label--short {
  display: none;
}
@container sc (max-width: 559.98px) {
  .vplus-act-btn.has-short .vplus-act-btn-label,
  .vplus-act-btn.has-short > i {
    display: none;
  }
  .vplus-act-btn.has-short .vplus-act-btn-label--short {
    display: inline;
  }
}
.vplus-act-btn:hover {
  background: #f2f4f7;
  border-color: #98a2b3;
}
.vplus-act-btn.is-primary {
  background: var(--sc-action, #b3541f);
  border-color: var(--sc-action, #b3541f);
  color: #fff;
}
.vplus-act-btn.is-primary:hover {
  background: var(--sc-action-hover, #9c4719);
  border-color: var(--sc-action-hover, #9c4719);
}
.vplus-act-btn.is-danger {
  color: #b42318;
  border-color: #f4c7c3;
  background: #fff;
}
.vplus-act-btn.is-danger:hover {
  background: #fef3f2;
  border-color: #d92d20;
}
.vplus-act-btn.is-attention {
  color: #8a4b1f;
  border-color: #f0d3bf;
  background: #fdf0e7;
}
.vplus-act-btn.is-attention:hover {
  background: #fbe5d5;
  border-color: #dda97f;
}
.vplus-act-btn.is-disabled,
.vplus-act-btn:disabled {
  color: #98a2b3;
  border-color: #eaecf0;
  background: #f9fafb;
  cursor: not-allowed;
}
.vplus-sc__actions.vplus-vendor-setup-actions-glow {
  border-radius: var(--vplus-control-radius, 8px);
  padding: 0.35rem;
  box-shadow: none;
  outline: 2px solid rgba(71, 184, 103, 0.5);
  outline-offset: 2px;
}

/* ---- Filters toolbar (audit §3.3) ----
   Two explicit rows instead of one wrapping flex line: the search was pushed
   right with an auto margin and, once the bar wrapped, sat alone on a second
   line under a large gap. */
.vplus-toolbar {
  display: grid;
  gap: var(--vplus-space-2, 0.5rem) var(--vplus-space-3, 0.75rem);
}
.vplus-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vplus-space-2, 0.5rem) var(--vplus-space-3, 0.75rem);
  min-width: 0;
}
.vplus-toolbar__cell {
  min-width: 0;
}
/* One row: scope tabs | network toggle | search | sort. The search grows into
   whatever space is left between the toggle and the sort group, and the sort
   group's auto margin is what pins it right — the search must NOT also carry
   one, or it would be pushed flush against the sort instead of filling. */
.vplus-toolbar__row > .vplus-sort-group {
  margin-left: auto;
}
.vplus-toolbar__search {
  flex: 1 1 16rem;
  min-width: 0;
  /* Stops the field becoming absurd at 1920 while still filling 1024-1440. */
  max-width: 32rem;
}
.vplus-toolbar__search .vplus-search-wrap {
  width: 100%;
}
/* The input is fixed at 13rem (16rem on focus) elsewhere; inside the toolbar
   it must follow its cell instead, or the cell grows and the field does not. */
.vplus-toolbar__search .vplus-keyword-search {
  width: 100%;
  max-width: none;
}
@media (max-width: 767.98px) {
  /* Stacked: every control full width, search last.
       IMPORTANT: reset the search's flex-basis here. `flex: 1 1 16rem` is a
       MINIMUM WIDTH in the row direction, but this container is column, where
       flex-basis resolves against the cross axis — leaving a 256px-tall empty
       box around a 31px input. */
  .vplus-toolbar__row {
    flex-direction: column;
    align-items: stretch;
  }
  .vplus-toolbar__row > .vplus-sort-group {
    margin-left: 0;
  }
  .vplus-toolbar__search {
    flex: 0 0 auto;
    margin-left: 0;
    max-width: none;
    /* Stacked, search sits directly under the scope tabs rather than last:
       it is the control most reached for on a phone, and the sort/view group
       is the one that can wait. (Was `order: 1` = last, when search lived in
       its own second row.) */
    order: 0;
  }
}
/* Sort / archived / view: inline on a tablet or desktop, a bottom sheet on a
   phone (Bootstrap .offcanvas-sm on the same element, so the ids the delegated
   change handlers read never move). Above 576 the offcanvas chrome is inert and
   its body is the old flex row. */
.vplus-sort-group > .offcanvas-body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vplus-sc-filter-trigger .btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #e3d4c0;
  background: #fbf6ef;
  color: var(--vplus-warm-accent-hover, #a9501f);
}
@media (max-width: 575.98px) {
  /* Sticky filter bar. Sticky always opens a stacking context, which would
     trap the fixed-position sheet inside it beneath the body-level backdrop,
     so the bar drops back to static while one of this page's sheets is open.
     No backdrop-filter: it would make the bar the sheet's containing block. */
  .vplus-vendor-submissions-wrapper #vplus-submissions-filters {
    position: sticky;
    top: var(--vplus-header-h, 0px);
    z-index: 20;
    /* The page canvas, near-opaque; follows the dark remap of the token. */
    background-color: color-mix(in srgb, var(--vplus-warm-bg, #f7f3ee) 96%, transparent) !important;
    border-bottom: 1px solid var(--vplus-warm-border, #ece3d8) !important;
  }
  body.vplus-sc-sheet-open .vplus-vendor-submissions-wrapper #vplus-submissions-filters {
    position: static;
  }
  #vplus-submissions-filters > .card-body {
    padding: 0.6rem 0.75rem !important;
  }
  /* Row 1 search + filter button, row 2 the segmented scope, row 3 the
     network toggle. Placement by grid, not DOM order, so the CNS-2 order
     (network toggle, search, sort group) holds in the markup. */
  .vplus-toolbar__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .vplus-toolbar__row > .vplus-toolbar__search {
    grid-column: 1;
    grid-row: 1;
  }
  .vplus-toolbar__row > .vplus-sc-filter-trigger {
    grid-column: 2;
    grid-row: 1;
  }
  .vplus-toolbar__row > .vplus-scope-group,
  .vplus-toolbar__row > .vplus-network-toggle-group {
    grid-column: 1 / -1;
  }
  .vplus-toolbar__row > .vplus-network-toggle-group > .btn {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }
  .vplus-scope-tabs .nav-link {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vplus-toolbar__search .vplus-keyword-search {
    height: 44px;
    font-size: 16px;
    border-radius: 10px !important;
  }
  /* A long network roster must not turn the sticky bar into a wall. */
  .vplus-toolbar > .collapse.show {
    max-height: 50vh;
    overflow-y: auto;
  }
  #vplus-sc-filter-sheet {
    height: auto;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    background-color: var(--vplus-warm-surface, #fffdfa);
  }
  #vplus-sc-filter-sheet > .offcanvas-body {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem 1.25rem 1.5rem;
  }
  /* flex: none — the inline rule's flex: 1 would make the basis 0 in this
     column and override the height. */
  #vplus-sc-filter-sheet .vplus-sort-select {
    flex: none;
    height: 44px;
    font-size: 16px;
  }
  #vplus-sc-filter-sheet .vplus-show-archived-toggle {
    min-height: 44px;
    margin-left: 0;
  }
}
/* This page's sheets sit above the fab rail (z-index 10001), and their
   backdrop with them; scoped to a body class set only while one is open, so
   the site's own offcanvas navs keep Bootstrap's stacking. */
body.vplus-sc-sheet-open .offcanvas-backdrop {
  z-index: 10002;
}
#vplus-sc-filter-sheet.offcanvas-sm,
#vplus-sc-action-sheet {
  z-index: 10003;
}
@media (min-width: 576px) {
  #vplus-sc-filter-sheet.offcanvas-sm {
    z-index: auto;
  }
}

/* ---- "More actions" menu and phone action sheet ---- */
.vplus-act-menu {
  min-width: 230px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--vplus-warm-border, #ece3d8);
  box-shadow: 0 8px 24px rgba(120, 90, 60, 0.18);
}
.vplus-act-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 38px;
  border-radius: 8px;
  font-size: 0.875rem;
  white-space: normal;
}
.vplus-act-menu .dropdown-item > i {
  width: 1.1em;
  text-align: center;
  flex: 0 0 auto;
  color: var(--vplus-warm-muted, #8a7f73);
}
.vplus-act-menu .dropdown-item.is-danger,
.vplus-act-menu .dropdown-item.is-danger > i,
.vplus-sheet-item.is-danger,
.vplus-sheet-item.is-danger > i {
  color: var(--sc-danger, #b42318);
}
.vplus-act-menu .dropdown-item.is-attention > i,
.vplus-sheet-item.is-attention > i {
  color: #8a4b1f;
}
.vplus-act-menu .dropdown-item:disabled,
.vplus-sheet-item:disabled {
  color: #98a2b3;
  cursor: not-allowed;
}
#vplus-sc-action-sheet {
  --vplus-sheet-bg: #fffdfa;
  --vplus-sheet-ink: #2e2a26;
  --vplus-sheet-muted: #5f6670;
  --vplus-sheet-line: #ece3d8;
  height: auto;
  max-height: 85vh;
  border-radius: 16px 16px 0 0;
  background: var(--vplus-sheet-bg);
  color: var(--vplus-sheet-ink);
}
body.vplus-dark-mode #vplus-sc-action-sheet {
  --vplus-sheet-bg: #242830;
  --vplus-sheet-ink: #e4e6eb;
  --vplus-sheet-muted: #a0a6b1;
  --vplus-sheet-line: #3a3f4a;
}
#vplus-sc-action-sheet .offcanvas-header {
  display: block;
  padding: 1rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--vplus-sheet-line);
}
.vplus-sheet-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.vplus-sheet-sub {
  font-size: 0.8125rem;
  color: var(--vplus-sheet-muted);
}
#vplus-sc-action-sheet .offcanvas-body {
  padding: 0.25rem 0 1rem;
}
.vplus-sheet-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 52px;
  padding: 0 1.25rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1rem;
  text-align: left;
}
.vplus-sheet-item > i {
  width: 1.2em;
  text-align: center;
  color: var(--vplus-sheet-muted);
}
.vplus-sheet-item:hover,
.vplus-sheet-item:focus-visible {
  background: color-mix(in srgb, var(--vplus-sheet-line) 60%, transparent);
}
.vplus-sheet-divider {
  height: 1px;
  margin: 0.25rem 1.25rem;
  background: var(--vplus-sheet-line);
}
.vplus-sheet-cancel {
  justify-content: center;
  font-weight: 600;
}
body.vplus-dark-mode .vplus-act-menu {
  background-color: #242830;
  border-color: #3a3f4a;
}
body.vplus-dark-mode .vplus-act-menu .dropdown-item {
  color: #e4e6eb;
}
body.vplus-dark-mode .vplus-act-menu .dropdown-item:hover,
body.vplus-dark-mode .vplus-act-menu .dropdown-item:focus {
  background-color: #2d323c;
}
body.vplus-dark-mode .vplus-act-menu .dropdown-item.is-danger,
body.vplus-dark-mode .vplus-act-menu .dropdown-item.is-danger > i {
  color: #f97066;
}
body.vplus-dark-mode .vplus-sc-filter-trigger .btn {
  background-color: #2d323c;
  border-color: var(--vplus-warm-border);
  color: var(--vplus-warm-ink);
}
body.vplus-dark-mode .vplus-scope-tabs {
  background: #2d323c;
}
body.vplus-dark-mode .vplus-scope-tabs .nav-link.active {
  background-color: #3a3f4a !important;
  color: #e4e6eb !important;
}

/* ---- Page header ----
   Phone: the title, then a full-width "New Submission" on its own row. The
   locked state wraps its disabled button in a tooltip span. */
@media (max-width: 575.98px) {
  .vplus-mc-head {
    flex-wrap: wrap;
    margin-bottom: 1rem !important;
  }
  .vplus-mc-head h3 {
    font-size: 1.3125rem;
  }
  .vplus-mc-head__actions {
    flex: 1 0 100%;
  }
  .vplus-mc-head__actions > .btn,
  .vplus-mc-head__actions > span,
  .vplus-mc-head__actions > span > .btn {
    width: 100%;
    display: block;
  }
  .vplus-mc-head .btn-primary {
    min-height: 44px;
    white-space: nowrap;
  }
}

/* The network drawer spans the whole toolbar, under the row. */
.vplus-toolbar > .collapse,
.vplus-toolbar > .collapsing {
  grid-column: 1 / -1;
}

/* Subject badges — "whose is this", as pills, distinct from the bare-text
   "when" items beside them. They live in .vplus-sc__meta-badges, which carries
   no separator at all, so the old rules suppressing a bullet on either side of
   a pill are no longer needed: the grouping does that job structurally. */
.vplus-sc__meta .vplus-subject-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 1px 8px;
  border-radius: var(--vplus-pill-radius, 999px);
  font-weight: 600;
  max-width: 100%;
  min-width: 0;
}
/* The badge is three children (icon, label, name). Only the name may shrink:
   ellipsising "Agent:" would be unreadable, so the label holds its width. */
.vplus-sc__meta .vplus-subject-badge > i,
.vplus-sc__meta .vplus-subject-badge__label {
  flex: 0 0 auto;
}
.vplus-sc__meta .vplus-subject-badge__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vplus-sc__meta .vplus-subject-badge--profile {
  background: #ede4ff;
  color: #4c2d8a;
}
.vplus-sc__meta .vplus-subject-badge--profile i {
  color: #6f42c1;
}
.vplus-sc__meta .vplus-subject-badge--consignor {
  background: #e3f0ff;
  color: #1c4e80;
}
.vplus-sc__meta .vplus-subject-badge--consignor i {
  color: #2b7cd3;
}
/* Agent and Supplier — the other two variants the shared builder emits. */
.vplus-sc__meta .vplus-subject-badge--agent {
  background: #e7f3ee;
  color: #1c5c44;
}
.vplus-sc__meta .vplus-subject-badge--agent i {
  color: #2f8f6b;
}
.vplus-sc__meta .vplus-subject-badge--supplier {
  background: #fff1e6;
  color: #8a4620;
}
.vplus-sc__meta .vplus-subject-badge--supplier i {
  color: #c4622d;
}
/* "Filed on behalf of" — a warm neutral, distinct from the Vendor Profile
   (purple) and Consignor (blue) pills it can sit beside. */
.vplus-sc__meta .vplus-subject-badge--onbehalf {
  background: #fdeee1;
  color: #8a4620;
}
.vplus-sc__meta .vplus-subject-badge--onbehalf i {
  color: #c4622d;
}

/* ---- Card responsive spec (audit §5) ----
   Card geometry (thumb size, area map, title size) follows the card through
   the @container rules above; only touch sizing stays on the viewport. */
@media (max-width: 575.98px) {
  .vplus-act-btn {
    min-height: var(--vplus-control-h-touch, 44px);
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
  }
  /* Facts stack label above value at this width. */
  .vplus-sc__fact {
    row-gap: 0;
  }
  /* The floating buttons (walkthrough, chat, checklist, queue) stack in
     .vplus-fab-rail at the bottom-right; the list must end clear of the whole
     stack, or the last card's actions sit under it. --vplus-fab-stack is the
     rail's measured height (set by this page's script); 96px is the floor. */
  .vplus-submissions-list {
    padding-bottom: 96px;
    padding-bottom: max(96px, calc(var(--vplus-fab-stack, 0px) + 36px));
  }
}

/* Below 430px there was no breakpoint at all: a 390px iPhone got the 575px
   rules, where a long auction name still overran the card. */
@media (max-width: 430px) {
  .vplus-submission-card .vplus-badge,
  .vplus-submission-card .vplus-subject-badge {
    font-size: 0.6875rem;
  }
}

/* ---- Badge structure: single source of spacing (flex gap), solid icons ----
   inline-flex, not flex: a badge inside a flex parent (card footer, tag row)
   is unaffected either way, but inside a plain block context — like the
   rollup table's <td> — display:flex stretches it to the full column width.

   IMPORTANT: sizing must match .vplus-pill (BADGES section, ~line 918). This
   block is 15k lines later and used !important, so it silently beat the pill
   base wherever both applied: tab-count badges measured 22.4px and intake
   badges 24.4px against the shared 21.2px. Keep the two in step, or don't set
   size here at all. */
.vplus-badge {
  font-size: 0.75rem !important;
  padding: 0.3em 0.65em !important;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  line-height: 1;
  min-height: 20px;
}
/* 1em, not 0.85em: FontAwesome draws into a 1em em-box, so a 0.85em box let
   round solid glyphs (clock, hourglass) overflow into the flex gap and read as
   the label touching the icon. The gap above was never the problem — it
   measured an identical 0.3em on every badge, crowded or not. */
.vplus-badge .svg-inline--fa,
.vplus-badge i {
  margin-right: 0 !important;
  margin-left: 0 !important;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  text-align: center;
}

/* ---- Actions dropdown: lift the open card above siblings + un-clip menu ----
   The card uses overflow:hidden (accent rail) which clips the menu, and only
   elevates on :hover so it drops behind the next card once hover is lost. */
.vplus-submission-card:has(.dropdown-menu.show),
.vplus-submission-card.vplus-menu-open {
  position: relative;
  z-index: 1050 !important;
  overflow: visible !important;
}
.vplus-submission-card .dropdown-menu {
  z-index: 1055 !important;
}

/* ---- Actions dropdown: solid charcoal (warm UI) ---- */
.vplus-submission-actions-toggle.btn-outline-secondary {
  background: #34373b !important;
  border-color: #34373b !important;
  color: #fff !important;
  font-weight: 600;
}
.vplus-submission-actions-toggle.btn-outline-secondary:hover,
.vplus-submission-actions-toggle.btn-outline-secondary:focus,
.vplus-submission-actions-toggle.btn-outline-secondary:active,
.vplus-submission-actions-toggle.btn-outline-secondary.show {
  background: #232629 !important;
  border-color: #232629 !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.18rem rgba(52, 55, 59, 0.25) !important;
}
.vplus-search-empty {
  padding: 2rem 0;
}
@media (max-width: 575.98px) {
  .vplus-sc__badges {
    gap: 0.2rem 0.6rem;
  }
}
.vplus-delete-submission,
.vplus-request-removal,
.vplus-request-withdrawal {
  color: #dc3545 !important;
}
.vplus-delete-submission:hover,
.vplus-delete-submission:focus,
.vplus-request-removal:hover,
.vplus-request-removal:focus,
.vplus-request-withdrawal:hover,
.vplus-request-withdrawal:focus {
  color: #b02a37 !important;
  background-color: rgba(220, 53, 69, 0.08);
}
.vplus-vendor-setup-actions-glow {
  border-color: #47b867 !important;
  box-shadow:
    0 0 0 0.2rem rgba(71, 184, 103, 0.22),
    0 0 0.85rem rgba(71, 184, 103, 0.35);
}

/* 3B — subject filter. Matches the sort select's height so the toolbar row
   stays on one baseline. */
/* .vplus-subject-toggle* removed with the dropdown (CNS-2): the filter now
   lives in the network drawer. .vplus-subject-count stays — it moved onto the
   drawer's own trigger so an applied filter is visible while collapsed. */
.vplus-subject-count {
  display: inline-block;
  min-width: 18px;
  margin-left: 0.35rem;
  padding: 0 5px;
  border-radius: 999px;
  background: #6f42c1;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.vplus-subject-menu {
  min-width: 260px;
  max-height: 340px;
  overflow-y: auto;
}
.vplus-subject-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: normal;
  border-radius: 6px;
  cursor: pointer;
}
.vplus-subject-option input {
  flex: none;
}
.vplus-subject-option:active {
  color: inherit;
  background: #f1f3f5;
}

/* ---- Auction details block (Live/Assigned): unified secondary-meta look ---- */
.vplus-sc__fact .vplus-auction-title {
  color: #344054;
}
/* The auction title as a badge. It wraps rather than ellipsising (a clipped
   title hid which auction the item is in). Inline with cloned decoration so
   each wrapped line is its own pill: an inline-block drew one rounded blob and
   took its baseline from its LAST line, dropping the label to the bottom. */
.vplus-sc__fact .vplus-sc__auction-pill {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 1px 8px;
  border-radius: var(--vplus-pill-radius, 999px);
  font-weight: 600;
  line-height: 1.65;
  white-space: normal;
  overflow-wrap: anywhere;
  background: #ede4ff;
  color: #4c2d8a;
}
body.vplus-dark-mode .vplus-sc__fact .vplus-sc__auction-pill {
  background: rgba(111, 66, 193, 0.24);
  color: #d3c2f5;
}

/* Webcast pre-bidding availability badge (after the start time). */
.vplus-prebid-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 10px;
  white-space: nowrap;
}
.vplus-prebid-badge > i {
  width: 0.8em;
}
.vplus-prebid-badge.vplus-prebid-on {
  background: #e3efe8;
  color: #2f6d4f;
  border: 1px solid #bcd8c8;
}
.vplus-prebid-badge.vplus-prebid-off {
  background: #f2f4f7;
  color: #667085;
  border: 1px solid #e4e7ec;
}

/* Multi-badge row: fixed gap + wrap so pills never merge into the note. */

.vplus-vendor-submissions-wrapper.vplus-submissions-loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* paginate_links( type=list ) renders <ul class="page-numbers"><li>…</li></ul>
   with each entry an <a|span class="page-numbers …"> — style that markup. The
   nav + ul are forced transparent so the theme's panel/card styling on bare
   <nav>/<ul> elements doesn't paint a full-width white bar behind the pills. */
.vplus-submissions-pagination,
.vplus-submissions-pagination ul.page-numbers {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* When a page link reloads to #vplus-submissions-list, land a little below the
   top so a sticky header doesn't cover the first card. */
#vplus-submissions-list {
  scroll-margin-top: 90px;
}
.vplus-submissions-pagination ul.page-numbers {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
}
.vplus-submissions-pagination ul.page-numbers li {
  margin: 0;
  list-style: none;
}
.vplus-submissions-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--vplus-text-secondary, #6c757d);
  background: var(--vplus-surface-panel, #fff);
  border: 1px solid var(--vplus-border-default, #dee2e6);
}
.vplus-submissions-pagination a.page-numbers:hover {
  background: var(--vplus-surface-panel-alt, #e9ecef);
  color: var(--vplus-text-primary, #495057);
}
.vplus-submissions-pagination .page-numbers.current {
  background: var(--vplus-accent-text, var(--bs-primary, #0d6efd));
  color: #fff;
  border-color: var(--vplus-accent-text, var(--bs-primary, #0d6efd));
}
/* The "…" gap marker shouldn't look like a clickable pill. */
.vplus-submissions-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ---- v6 #8: Rejected "Reason" message (warm) ---- */
.vplus-submission-card .alert.alert-danger {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  background-color: #fbeae3 !important;
  color: #8a3b22 !important;
  border: 1px solid #f0cdbe !important;
  border-left: 3px solid var(--vplus-warm-accent, #c4622d) !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.35;
  margin-top: 0.5rem !important;
}
.vplus-submission-card .alert.alert-danger .svg-inline--fa,
.vplus-submission-card .alert.alert-danger i {
  margin: 0 !important;
  margin-top: 0.12em !important;
  color: var(--vplus-warm-accent, #c4622d);
  width: 0.9em;
  height: 0.9em;
  flex: 0 0 auto;
}
.vplus-submission-card .alert.alert-danger strong {
  font-weight: 600 !important;
  color: #6f2d18 !important;
  margin-right: 0.15rem;
}

/* ---- v6 #10 / v7: Submitted date+time meta ----
   Calendar icon dropped from the orange accent to the shared muted grey so
   it defers to the status badge instead of competing with it (doc 1 §4). */
.vplus-submitted-meta .fa-calendar {
  color: #9aa1a8;
}
.vplus-submitted-label,
.vplus-created-label {
  font-weight: 600;
  color: #475467;
}

/* ---- v6 #9a: List/Grid view toggle ---- */
.vplus-view-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible;
  width: auto;
  margin-left: 0.25rem;
  border: 1px solid #e3d4c0;
  border-radius: 8px;
  background: #fbf6ef;
}
.vplus-view-toggle .vplus-view-btn {
  flex: 0 0 auto;
  width: 2.25rem;
  box-sizing: border-box;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #8a7f73;
  padding: 0.3rem 0;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  transition:
    background 0.12s,
    color 0.12s;
}
.vplus-view-toggle .vplus-view-btn + .vplus-view-btn {
  border-left: 1px solid #e3d4c0;
}
.vplus-view-toggle .vplus-view-btn:first-child {
  border-radius: 7px 0 0 7px;
}
.vplus-view-toggle .vplus-view-btn:last-child {
  border-radius: 0 7px 7px 0;
}
.vplus-view-toggle .vplus-view-btn:hover {
  color: var(--vplus-warm-accent, #c4622d);
}
.vplus-view-toggle .vplus-view-btn.active {
  background: var(--vplus-warm-accent, #c4622d);
  color: #fff;
}

/* ---- Show Archived toggle ---- */
/* Bootstrap's .form-check.form-switch renders as a block with a native
   striped switch and its own left-padding model — foreign next to the warm
   view-toggle/sort-select. Reset it to an inline-flex control on the warm
   palette so it sits cleanly on the same line. */
.vplus-show-archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  min-height: 0;
  margin-left: 0.35rem;
}
.vplus-show-archived-toggle .form-check-input {
  float: none;
  margin: 0;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 1.15rem;
  cursor: pointer;
  background-color: #fbf6ef;
  border-color: #e3d4c0;
  box-shadow: none;
}
.vplus-show-archived-toggle .form-check-input:checked {
  background-color: var(--vplus-warm-accent, #c4622d);
  border-color: var(--vplus-warm-accent, #c4622d);
}
.vplus-show-archived-toggle .form-check-input:focus {
  border-color: #e3d4c0;
  box-shadow: 0 0 0 0.2rem rgba(196, 98, 45, 0.15);
}
.vplus-show-archived-toggle .form-check-label {
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.15;
  color: #475467;
}
.vplus-sort-group {
  flex-wrap: nowrap;
}

/* ---- v6 #9c: Month separators ---- */
.vplus-month-separator {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.25rem 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--vplus-warm-accent-hover, #a9501f);
}
.vplus-month-separator::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, #e3d4c0, transparent);
}
.vplus-month-separator .fa-solid {
  color: var(--vplus-warm-accent, #c4622d);
}

/* 4b: collapsible month groups. The separator is now a full-width toggle
   button; reset native button chrome so it reads like the old label. */
button.vplus-month-toggle {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.vplus-month-toggle .vplus-month-label {
  flex: 0 0 auto;
}
/* The ::after divider already pushes count + chevron to the right; keep them
   after the divider so they sit at the row's end. */
.vplus-month-toggle::after {
  order: 1;
}
.vplus-month-count {
  order: 2;
  flex: 0 0 auto;
  background: var(--vplus-warm-accent, #c4622d);
  color: #fff;
  border-radius: 999px;
  padding: 0 0.5rem;
  min-width: 1.4rem;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.4rem;
}
.vplus-month-chevron {
  order: 3;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
  font-size: 0.7rem;
}
.vplus-month-toggle.collapsed .vplus-month-chevron {
  transform: rotate(-90deg);
}
.vplus-month-group {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .vplus-month-chevron {
    transition: none;
  }
}

/* ---- List grid ----
   The grid sits on .vplus-month-grid, an inner wrapper, rather than on the
   .vplus-month-group itself: that element is a Bootstrap .collapse and its
   height animation fights a grid. Both branches (month groups, and the
   ungrouped title sorts) render the wrapper, so they share one column rule.

   Column count follows the list's width, capped at TWO (plan D-12): the
   track minimum is the larger of 340px and half the row, so a third column
   can never fit. 1 column below ~692px, 2 above. */
.vplus-month-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(min(100%, 340px), calc((100% - 12px) / 2)), 1fr)
  );
  gap: 12px;
  align-items: stretch;
  margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
  .vplus-month-grid {
    grid-template-columns: repeat(
      auto-fill,
      minmax(max(min(100%, 340px), calc((100% - 16px) / 2)), 1fr)
    );
    gap: 16px;
  }
}
.vplus-submissions-list.vplus-view-list .vplus-month-grid {
  grid-template-columns: minmax(0, 1fr);
}
/* Both views are one column on a phone, so the switch has nothing to do. */
@media (max-width: 575.98px) {
  .vplus-view-toggle {
    display: none !important;
  }
}

/* Status clickpoints — badge + rejected-reason alert open the detail modal and
   focus the status panel. */
.vplus-badge-clickable,
.vplus-status-alert-clickable {
  cursor: pointer;
}
.vplus-status-alert-clickable:hover {
  filter: brightness(0.98);
}
.vplus-badge-clickable:focus-visible,
.vplus-status-alert-clickable:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
}

/* Deep-link focus pulse — a bell/email notification scrolls to its submission
   and flashes the card. Uses the card's own accent custom property. */
.vplus-submission-card.vplus-card-flash {
  animation: vplus-card-flash 2.4s ease-out 1;
}
@keyframes vplus-card-flash {
  0% {
    box-shadow: 0 0 0 0 var(--vplus-card-accent, #0d6efd);
  }
  15% {
    box-shadow: 0 0 0 4px var(--vplus-card-accent, #0d6efd);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vplus-submission-card.vplus-card-flash {
    animation: none;
  }
}