/**
 * 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;
}

/* ── 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 */
}
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;
}
/* 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;
}
@media (max-width: 575.98px) {
  .vplus-overview__tile {
    padding: 0.45rem 0.55rem;
    column-gap: 0.4rem;
  }
  .vplus-overview__icon {
    width: 1.7rem;
    height: 1.7rem;
  }
  .vplus-overview__count {
    font-size: 1.1rem;
  }
}

/* ---- Mine / Network scope tabs ----
   Warm-palette pills matching the page's own tokens rather than Bootstrap's
   blue default, so they read as part of this page's chrome. */
.vplus-scope-tabs {
  gap: 0.375rem;
}
.vplus-scope-tabs .nav-link {
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 999px;
  color: var(--vplus-warm-muted, var(--bs-secondary-color));
  background: transparent;
  border: 1px solid var(--vplus-warm-border, rgba(0, 0, 0, 0.1));
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.vplus-scope-tabs .nav-link:hover {
  color: var(--vplus-warm-accent-hover, var(--bs-emphasis-color));
  border-color: var(--vplus-warm-accent, rgba(196, 98, 45, 0.45));
}
.vplus-scope-tabs .nav-link.active {
  background-color: var(--vplus-warm-accent, #c4622d) !important;
  border-color: var(--vplus-warm-accent, #c4622d) !important;
  color: #fff !important;
}

/* ---- 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(--vplus-warm-accent) !important;
  border-color: var(--vplus-warm-accent) !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(--vplus-warm-accent-hover) !important;
  border-color: var(--vplus-warm-accent-hover) !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). */
.vplus-submission-card {
  --thumb: 80px;
  --pad: var(--vplus-space-4, 1rem);
  --bar: var(--vplus-accent-bar, 4px);
  position: relative;
  overflow: hidden !important;
  border-radius: var(--vplus-card-radius, 10px) !important;
}
.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 {
  padding-left: calc(var(--pad) + var(--bar)) !important;
}
.vplus-submission-grid {
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr);
  grid-template-areas:
    "media header"
    "media facts"
    "footer footer";
  column-gap: var(--vplus-space-4, 1rem);
  row-gap: var(--vplus-space-2, 0.5rem);
  align-items: start;
}
/* 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-columns: var(--thumb) minmax(0, 1fr) auto;
  grid-template-areas:
    "media header menu"
    "media facts  menu"
    "footer footer footer";
}
.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;
}
.vplus-sc__facts {
  grid-area: facts;
  min-width: 0;
  margin: 0;
}
.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 {
  font-size: var(--vplus-fs-title, 1.08rem) !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;
}
.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;
}
/* 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;
}
.vplus-sc__fact .vplus-auction-datespan {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
/* The range breaks BEFORE the dash, never between a date and its own parts. */
.vplus-sc__range {
  padding: 0 0.25em;
}
.vplus-sc__fact time {
  white-space: nowrap;
  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. */
.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);
}

/* Actions: a wrapping row whose buttons size to their own content.
   History, because both failure modes are easy to reintroduce:
     - `flex: 1 1 auto` let a lone button on the last wrapped line stretch to
       the full card width (measured 705px beside 124-215px siblings);
     - a uniform `repeat(auto-fill, minmax(150px, 1fr))` grid then gave EVERY
       button the same track, so short labels wasted space and long ones
       ("Request Pricing Changes" needs 190px) overflowed their border.
   `flex: 0 1 auto` is the fix: the natural content width is the basis, grow is
   off so nothing stretches, and shrink only engages below the min-width. */
.vplus-sc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vplus-space-2, 0.5rem);
  width: 100%;
}
.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;
  /* Content-sized: never narrower than its own label + icon + padding. */
  flex: 0 1 auto;
  min-width: fit-content;
  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;
}
.vplus-act-btn:hover {
  background: #f2f4f7;
  border-color: #98a2b3;
}
.vplus-act-btn.is-primary {
  background: var(--vplus-warm-accent, #c4622d);
  border-color: var(--vplus-warm-accent, #c4622d);
  color: #fff;
}
.vplus-act-btn.is-primary:hover {
  background: var(--vplus-warm-accent-hover, #a9501f);
  border-color: var(--vplus-warm-accent-hover, #a9501f);
}
.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;
  }
}
/* 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) ---- */
@media (max-width: 1199.98px) {
  /* Cards are narrow enough here that one line cut real titles
       ("2021 TESLA MODEL 3 STANDARD RANGE PLUS"). Two lines, still clamped.
       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;
  }
}
@media (max-width: 575.98px) {
  .vplus-submission-card {
    --thumb: 64px;
  }
  /* The dropdown source keeps a row of its own only where it is still
       visible; on a has-actions-row card it is display:none and must not
       reserve a track. */
  .vplus-submission-card:not(.vplus-has-actions-row) .vplus-submission-grid {
    grid-template-columns: var(--thumb) minmax(0, 1fr);
    grid-template-areas:
      "media header"
      "media facts"
      "menu  menu"
      "footer footer";
  }
  /* Two columns of touch-sized buttons, primary full width. Expressed in flex:
     the row is display:flex (see the base rule), so the grid-template-columns
     and grid-column these rules used to carry never applied. */
  .vplus-act-btn {
    flex: 1 1 140px;
    min-width: 0;
    min-height: var(--vplus-control-h-touch, 44px);
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
  }
  .vplus-act-btn.is-primary {
    flex-basis: 100%;
  }
  /* Facts stack label above value at this width. */
  .vplus-sc__fact {
    row-gap: 0;
  }
  .vplus-sc__title {
    font-size: 1rem !important;
  }
  /* The floating chat/AI buttons overlap the last card's action row. */
  .vplus-submissions-list {
    padding-bottom: 96px;
  }
}

/* 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 {
    --thumb: 56px;
  }
  .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;
}
.vplus-sc__fact .vplus-auction-type {
  color: #98a2b3;
}

/* 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%;
  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;
  }
}

/* ---- v6 #9b: Grid layout (2-up ≥992px) + responsive list fallback ---- */
@media (min-width: 992px) {
  .vplus-submissions-list.vplus-view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }
  .vplus-submissions-list.vplus-view-grid .vplus-month-separator {
    grid-column: 1 / -1;
  }
  /* In grid view the month group spans both columns and grids its own cards,
       so 2-up layout is preserved inside each collapsible month. */
  .vplus-submissions-list.vplus-view-grid .vplus-month-group {
    grid-column: 1 / -1;
  }
  .vplus-submissions-list.vplus-view-grid .vplus-month-group.show,
  .vplus-submissions-list.vplus-view-grid .vplus-month-group.collapsing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }
  .vplus-submissions-list.vplus-view-grid .vplus-submission-card {
    margin-bottom: 0 !important;
    height: 100%;
  }
}
@media (max-width: 991.98px) {
  .vplus-submissions-list.vplus-view-grid {
    display: block;
  }
  .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;
  }
}