/**
 * VendorPlus core styles — part 8 of 10: Vendor list, vendor profile and motion utilities
 *
 * 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 14325-15722 of the original file.
 */

/* =============================================================================
   Vendor List & Profile
   Ported from vp-core/assets/css/vendorplus.css for the bridged Vendors page
   (front-end /vendors/ + linked Vendor Profiles). The bare `.column-id`,
   `.column-rules`, and `.column-actions` selectors from vp-core have been
   scoped under `.vplus-vendor-list` to avoid colliding with other tables in
   vendorplus-core that use those generic class names.
   ============================================================================= */

/* ---- Filter bar ---- */
.vplus-vendor-filter-wrap {
  background: #fff;
  border: 1px solid #e2e4e7;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
}
.vplus-vendor-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.vplus-vendor-search-input {
  height: 1.875rem;
  line-height: 1.75rem;
  font-size: 0.8125rem;
  border: 1px solid #c3c4c7;
  border-radius: 0.25rem;
  padding: 0 0.5rem;
  min-width: 13.75rem;
  flex: 1;
  box-sizing: border-box;
}
.vplus-vendor-search-input:focus {
  border-color: #2271b1;
  box-shadow: 0 0 0 1px #2271b1;
  outline: none;
}
.vplus-vendor-per-page {
  height: 1.875rem;
  line-height: 1.75rem;
  font-size: 0.8125rem;
  border: 1px solid #c3c4c7;
  border-radius: 0.25rem;
  padding: 0 0.375rem;
  width: 5.625rem;
  box-sizing: border-box;
}

/* ---- Vendor table ----
   overflow-x is AUTO at every width, not a mobile-only case: the table's
   nowrap headers and fixed column widths exceed most sub-desktop viewports,
   and a hidden overflow silently clipped the Actions column out of reach.
   Auto still clips the rounded corners at the padding box exactly as hidden
   did, so the framing is unchanged. */
.vplus-vendor-table-wrap {
  background: #fff;
  border: 1px solid #dcdde0;
  border-radius: 0.375rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}
.vplus-vendor-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin: 0;
}
.vplus-vendor-list thead th {
  background: #f6f7f7;
  border-bottom: 1px solid #dcdde0;
  padding: 0.625rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #50575e;
  white-space: nowrap;
}
.vplus-vendor-list tbody tr {
  border-bottom: 1px solid #f0f0f1;
}
.vplus-vendor-list tbody tr:last-child {
  border-bottom: none;
}
.vplus-vendor-list tbody tr.vplus-row-odd td {
  background: #f9f9f9;
}
.vplus-vendor-list tbody tr:hover td {
  background: #f0f6ff;
}
.vplus-vendor-list td {
  padding: 0.625rem 0.875rem;
  vertical-align: middle;
  color: #2c3338;
}
.vplus-vendor-id {
  font-size: 0.75rem;
  color: #8c8f94;
  font-family: monospace;
}
.vplus-vendor-list .column-id {
  width: 3.75rem;
}
.vplus-vendor-list .column-rules {
  width: 5rem;
  text-align: center;
}
.vplus-vendor-list .column-actions {
  width: 5rem;
  text-align: right;
}
.vplus-vendor-empty {
  padding: 1.25rem 0.875rem;
  color: #8c8f94;
  font-style: italic;
}

/* Rules badge */
.vplus-rules-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.vplus-rules-badge--set {
  background: #d7f0c3;
  color: #1d6a27;
}
.vplus-rules-badge--none {
  background: #f0f0f1;
  color: #8c8f94;
}

/* ---- /vendors/ responsive uplift (2026-09-23 plan, Part F) ----
   Page tab strip: one scrolling underline row at every width (it wrapped into
   three rows on a phone), sticky while scrolling a sub-desktop page. The
   <i> icons stay — a user constraint for this page. */
.vplus-vendors-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.vplus-vendors-tabs::-webkit-scrollbar {
  display: none;
}
.vplus-vendors-tabs .nav-item {
  flex: 0 0 auto;
}
.vplus-vendors-tabs .nav-link {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  white-space: nowrap;
}
.vplus-vendors-tabs .nav-link.active {
  border-bottom-color: var(--bs-primary, #0d6efd);
  color: var(--bs-primary, #0d6efd);
  background: transparent;
  font-weight: 600;
}
body.vplus-dark-mode .vplus-vendors-tabs .nav-link,
body.vplus-dark-mode .vplus-vendors-tabs .nav-link:hover {
  background: transparent;
  border-color: transparent;
}
body.vplus-dark-mode .vplus-vendors-tabs .nav-link.active {
  background: transparent;
  border-color: transparent;
  border-bottom-color: #8fb4ea;
  color: #8fb4ea;
}
.vplus-vendors-tabs + .vplus-vendors-tab-content {
  margin-top: 14px !important;
}
@media (max-width: 1199.98px) {
  .vplus-vendors-tabs {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 4;
    background: var(--bs-body-bg, #fff);
  }
  body.vplus-dark-mode .vplus-vendors-tabs {
    background: #1a1d21;
  }
}

/* Vendor Profiles tab: Contact stacks email over phone; the ID rides on the
   name; the Details badge carries a readiness bar. */
.vplus-vendor-list .vplus-idchip {
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #f0f0f1;
  font-size: 0.6875rem;
}
body.vplus-dark-mode .vplus-vendor-list .vplus-idchip {
  background: #2d323c;
  color: #a0a6b1;
}
.vplus-vendor-contact__email,
.vplus-vendor-contact__phone {
  display: block;
  overflow-wrap: anywhere;
}
.vplus-vendor-contact__phone {
  color: #8c8f94;
  font-size: 0.75rem;
}
.vplus-readiness-bar {
  display: block;
  width: 100%;
  max-width: 8rem;
  height: 5px;
  margin-top: 0.3rem;
  border-radius: 999px;
  background: #e9ebee;
  overflow: hidden;
}
.vplus-readiness-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.vplus-readiness-bar--ok > span { background: #1f8f4d; }
.vplus-readiness-bar--warn > span { background: #d98a00; }
.vplus-readiness-bar--low > span { background: #c0392b; }
body.vplus-dark-mode .vplus-readiness-bar {
  background: #3a3f4a;
}
.vplus-vendor-list .column-actions {
  white-space: nowrap;
}

/* Below 1200 each profile is a card: two per row from 768, one below. Rows
   keep their <tr>/<td> (vp-vendors.js filters and paginates the <tr>s and
   shows them with jQuery .show(), which only clears an inline display).
   Scoped to the Vendors page: vp-invoicing renders .vplus-vendor-list too. */
@media (max-width: 1199.98px) {
  .vplus-vendors-tab-content .vplus-vendor-table-wrap:has(> .vplus-vendor-list) {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body.vplus-dark-mode .vplus-vendors-tab-content .vplus-vendor-table-wrap:has(> .vplus-vendor-list) {
    background: transparent;
  }
  .vplus-vendors-tab-content .vplus-vendor-list,
  .vplus-vendors-tab-content .vplus-vendor-list > tbody,
  .vplus-vendors-tab-content .vplus-vendor-list > tbody > tr,
  .vplus-vendors-tab-content .vplus-vendor-list > tbody > tr > td {
    display: block;
  }
  .vplus-vendors-tab-content .vplus-vendor-list > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .vplus-vendors-tab-content .vplus-vendor-list > tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .vplus-vendors-tab-content .vplus-vendor-list > tbody > tr {
    padding: 12px;
    border: 1px solid #dcdde0 !important;
    border-radius: 14px;
    background: #fff;
    min-width: 0;
  }
  body.vplus-dark-mode .vplus-vendors-tab-content .vplus-vendor-list > tbody > tr {
    background: #242830;
    border-color: #3a3f4a !important;
  }
  .vplus-vendors-tab-content .vplus-vendor-list > tbody > tr > td,
  .vplus-vendors-tab-content .vplus-vendor-list tbody tr.vplus-row-odd td,
  .vplus-vendors-tab-content .vplus-vendor-list tbody tr:hover td {
    width: auto;
    padding: 0.3rem 0;
    background: transparent;
    text-align: left;
  }
  body.vplus-dark-mode .vplus-vendors-tab-content .vplus-vendor-list tbody tr:hover td {
    background-color: transparent !important;
  }
  .vplus-vendors-tab-content .vplus-vendor-list > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
  }
  .vplus-vendors-tab-content .vplus-vendor-list > tbody > tr > td.column-actions::before {
    display: none;
  }
  .vplus-vendors-tab-content .vplus-vendor-list .column-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 0.6rem;
  }
  .vplus-vendors-tab-content .vplus-vendor-list .column-actions > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
  }
  .vplus-vendors-tab-content .vplus-vendor-list #vplus-vendor-no-results {
    grid-column: 1 / -1;
  }
  .vplus-vendors-tab-content .vplus-vendor-filters .vplus-vendor-search-input,
  .vplus-vendors-tab-content .vplus-vendor-filters .vplus-vendor-per-page {
    height: 44px;
    font-size: 15px;
    border-radius: 10px;
  }
}
@media (max-width: 767.98px) {
  .vplus-vendors-tab-content .vplus-vendor-list > tbody {
    grid-template-columns: minmax(0, 1fr);
  }
  .vplus-vendors-tab-content .vplus-vendor-filters .vplus-vendor-search-input {
    min-width: 0;
  }
}

/* =============================================================================
   Vendor Profile
   ============================================================================= */

/* Back button row */
.vplus-vendor-profile-actions {
  margin-bottom: 1rem;
  /* The Back link sits left, the tab strip centres in the remaining space. The
     strip wraps beneath on narrow screens rather than squeezing the link. */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.vplus-vendor-profile-tabs {
  margin-inline: auto;
  flex-wrap: wrap;
}

@media (max-width: 575.98px) {
  .vplus-vendor-profile-tabs {
    /* A btn-group is a single row by definition; below this width four labels
       cannot fit one, so the buttons stack and the group stops being a group. */
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .vplus-vendor-profile-tabs > .btn {
    border-radius: 0.25rem !important;
  }
}

/* Vendor Profile audit card (distinct from the USER trail on /consignor-profile/) */
.vplus-vendor-audit-entry {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.vplus-vendor-audit-entry:last-child {
  border-bottom: 0;
}
.vplus-vendor-audit-entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

body.vplus-dark-mode .vplus-vendor-audit-entry {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Vendor identity card */
.vplus-vendor-info-card {
  background: #fff;
  border: 1px solid #dcdde0;
  border-radius: 0.375rem;
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.vplus-vendor-info-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: #f6f7f7;
  border-bottom: 1px solid #dcdde0;
}
.vplus-vendor-info-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1d2327;
  flex: 1;
  min-width: 0;
}
.vplus-vendor-id-chip {
  font-size: 0.75rem;
  font-weight: 400;
  color: #8c8f94;
  font-family: monospace;
  background: #f0f0f1;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  flex-shrink: 0;
}
.vplus-vendor-info-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.vplus-vendor-info-field {
  padding: 0.75rem 1.25rem;
  border-right: 1px solid #f0f0f1;
  border-bottom: 1px solid #f0f0f1;
}
.vplus-vendor-info-field:last-child {
  border-right: none;
  border-bottom: none;
}
.vplus-vendor-info-field--address {
  grid-column: 1 / -1;
  border-right: none;
}
.vplus-vendor-info-field-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8c8f94;
  margin-bottom: 0.25rem;
}
.vplus-vendor-info-field-value {
  display: block;
  font-size: 0.875rem;
  color: #1d2327;
  line-height: 1.4;
}
.vplus-vendor-info-empty {
  color: #b0b3b8;
}

/* Form sections (commission rules, xero settings) */
.per-sale-set-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-bottom: none;
}
.per-sale-set-header label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.per-sale-rules-table,
.default-rules-table {
  margin-bottom: 0;
}
.per-sale-rules-table .col-min,
.per-sale-rules-table .col-max,
.default-rules-table .col-min,
.default-rules-table .col-max {
  width: 7.5rem;
}
.per-sale-rules-table .col-value,
.default-rules-table .col-value {
  width: 7.5rem;
}
.per-sale-rules-table .col-type,
.default-rules-table .col-type {
  width: 5rem;
}
.per-sale-rules-table .col-actions,
.default-rules-table .col-actions {
  width: 2.5rem;
  text-align: right;
}
.per-sale-rules-table .col-condition,
.default-rules-table .col-condition {
  width: 1.25rem;
  vertical-align: middle;
  padding: 0;
  text-align: center;
}
.per-sale-rules-table td input,
.default-rules-table td input {
  width: 100%;
}
.btn .fas,
.btn .fal {
  pointer-events: none;
}
.default-rules-footer,
.per-sale-set-footer {
  display: flex;
  justify-content: flex-start;
}
.per-sale-set {
  margin-bottom: 1rem;
  background: #fff;
}
.vplus-invalid {
  border-color: #c00 !important;
  background: #fff0f0 !important;
  box-shadow: 0 0 0 0.125rem rgba(204, 0, 0, 0.06) !important;
}
.vplus-sale-input-wrap {
  width: 100%;
}
#vplus-save-notice {
  position: fixed;
  top: 3rem;
  right: 2rem;
  z-index: 100;
  width: 18.75rem;
  box-shadow: 0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.1);
}

/* Form save footer */
.vplus-vendor-form-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0 0.5rem;
  margin-top: 0.25rem;
}

/* Responsive: collapse info grid to single column on narrow screens */
@media (max-width: 600px) {
  .vplus-vendor-info-fields {
    grid-template-columns: 1fr;
  }
  .vplus-vendor-info-field {
    border-right: none;
  }
  .vplus-vendor-info-field--address {
    grid-column: auto;
  }
}

/* ============================================================
   TABLET PORTRAIT BREAKPOINT (768px–991.98px, portrait only).
   Pending-submissions table row-collapse — the desktop grid is
   still too wide for iPad-portrait viewports. Scoped to
   `orientation: portrait` so iPad-landscape (which has plenty
   of width) keeps the desktop table. The sales-list rules that
   used to live here moved to their own orientation-free block
   below (they were dead here — see that block's header).
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
  /* --- A15-tablet. Pending submissions table —
     mirrors the (max-width: 767px) submissions
     pattern at vendor-plus.css ~9352. Actions move
     to a full-width row at the bottom of each <tr>
     so the table no longer overflows the viewport.
     Scoped off the Consignment Manager's .vplus-cm-table, whose layouts
     consignments-manager.css owns (2026-09-23 plan, D1). */
  .vplus-submissions-tabs ~ .tab-content .table-responsive {
    border: none;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) thead {
    display: none;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    align-items: center;
    background: #fff;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td {
    border: none;
    padding: 0.125rem 0;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:first-child {
    flex: 0 0 auto;
    order: -2;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(2) {
    flex: 0 0 auto;
    order: -1;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(3) {
    flex: 1 1 60%;
    min-width: 0;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(4) {
    flex: 0 0 100%;
    font-size: 0.85rem;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(5),
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(6) {
    flex: 0 0 auto;
    font-size: 0.85rem;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:last-child {
    flex: 0 0 100%;
    text-align: left !important;
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    padding-top: 0.375rem;
    border-top: 1px solid var(--bs-border-color-translucent);
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:last-child .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
}

/* ============================================================
   SALES LIST — actions column as a bottom row, 768–1199.98px.
   Six inline btn-link actions need ~670px on one line; in this
   band the .col-auto.col-md side column can offer 130–274px, so
   they stacked 3–5 deep and cards grew to 259px of mostly dead
   space. Push the column to a full-width bordered bottom row and
   flex-wrap the buttons across it.
   ⚠ Previously written as `.vplus-sales-list .card-wrapper .card`
   inside the tablet-portrait block above — DEAD, because
   .vplus-sales-list and .card-wrapper are the SAME element, and
   the orientation:portrait gate excluded landscape/desktop
   windows. Own block, fixed selectors, no orientation gate.
   (Reports archive shares .vplus-sales-list but has no
   .col-auto.col-md column — unaffected.)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .vplus-sales-list .card .card-body.row > .col-auto.col-md {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    order: 99;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    text-align: left !important;
  }
  .vplus-sales-list .card .card-body.row > .col-auto.col-md .d-none.d-md-block {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .vplus-sales-list
    .card
    .card-body.row
    > .col-auto.col-md
    .d-none.d-md-block
    .btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
  }
  .vplus-sales-list
    .card
    .card-body.row
    > .col-auto.col-md
    .dropdown.d-block.d-md-none {
    display: none !important;
  }
}

/* F6 polish, 1200–1899.98px: the side action column holds the
   inline buttons but only fits them on one line from ~1900 up.
   Keep whole buttons wrapping as units (BS5 .btn has no
   white-space default, so labels broke mid-word) and tighten
   the padding so the two-line band is as short as it can be. */
@media (min-width: 1200px) and (max-width: 1899.98px) {
  .vplus-sales-list .card .card-body.row > .col-auto.col-md .btn {
    white-space: nowrap;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}

/* =========================================================================
   VendorPlus motion utilities (Phase 0)
   Shared, dependency-free enter/exit/stagger primitives driven by class
   toggles. Used by vendor-plus-motion.js. Animate transform/opacity only.
   ========================================================================= */

/* Enter: fade in. Apply .vplus-fade-in, then .is-in on the next frame. */
.vplus-fade-in {
  opacity: 0;
  transition: opacity var(--vplus-motion-base) var(--vplus-ease-out);
}
.vplus-fade-in.is-in {
  opacity: 1;
}

/* Enter: fade + rise. */
.vplus-fade-up {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--vplus-motion-base) var(--vplus-ease-out),
    transform var(--vplus-motion-base) var(--vplus-ease-out);
}
.vplus-fade-up.is-in {
  opacity: 1;
  transform: none;
}

/* Exit: fade (+ slight sink). Apply .is-out to animate away before removal. */
.vplus-fade-out {
  transition:
    opacity var(--vplus-motion-base) var(--vplus-ease-in),
    transform var(--vplus-motion-base) var(--vplus-ease-in);
}
.vplus-fade-out.is-out {
  opacity: 0;
  transform: translateY(6px);
}

/* Directional slide swaps (lot-to-lot, tab content). */
.vplus-slide-left.is-out {
  opacity: 0;
  transform: translateX(-18px);
}
.vplus-slide-right.is-out {
  opacity: 0;
  transform: translateX(18px);
}
.vplus-slide-left,
.vplus-slide-right {
  transition:
    opacity var(--vplus-motion-base) var(--vplus-ease-soft),
    transform var(--vplus-motion-base) var(--vplus-ease-soft);
}

/* Stagger: children of a .vplus-stagger fade-up with incremental delay.
   The motion helper sets --vplus-i per child; the CSS reads it.

   The hidden "from" state is gated on .vplus-motion-armed (set on <html> by an
   inline head script before first paint). Without it — no-JS, crawler, or a page
   that never armed — the children stay visible, so nothing is ever hidden that
   JS won't reveal. This gate also removes the flash on [data-vplus-stagger-on-load]
   containers: the hidden state is present from the first paint rather than being
   applied by the footer script after the cards have already shown. */
.vplus-motion-armed .vplus-stagger > * {
  opacity: 0;
  transform: translateY(10px);
}
/* Reveal is scoped under .vplus-motion-armed too so it matches the "from" rule's
   specificity and wins the opacity/transform props once .is-in lands (both
   classes coexist as the resting end state). */
.vplus-motion-armed .vplus-stagger.is-in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--vplus-motion-base) var(--vplus-ease-out),
    transform var(--vplus-motion-base) var(--vplus-ease-out);
  transition-delay: calc(var(--vplus-i, 0) * var(--vplus-stagger-step));
}

/* Table rows can't safely take a transform (they become containing blocks and
   can mis-render). When the stagger container is a tbody, fade rows only. */
tbody.vplus-stagger > tr {
  transform: none;
}
.vplus-motion-armed tbody.vplus-stagger.is-in > tr {
  transition: opacity var(--vplus-motion-base) var(--vplus-ease-out);
  transform: none;
}

/* Loading skeleton shimmer for AJAX in-flight windows. */
.vplus-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--vplus-surface-panel-alt, #f1f3f5);
  border-radius: 6px;
}
.vplus-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: vplusSkeletonShimmer 1.25s ease-in-out infinite;
}
@keyframes vplusSkeletonShimmer {
  to {
    transform: translateX(100%);
  }
}

/* Modal entrance polish — a subtle scale + rise on top of Bootstrap's fade,
   applied to every .modal.fade in the suite (VPlusModal + template modals).
   Scoped to the dialog so it never fights Bootstrap's backdrop fade. */
.modal.fade .modal-dialog {
  transform: translateY(12px) scale(0.98);
  transition:
    transform var(--vplus-motion-slow) var(--vplus-ease-out),
    opacity var(--vplus-motion-slow) var(--vplus-ease-out);
  opacity: 0;
}
.modal.show .modal-dialog {
  transform: none;
  opacity: 1;
}

/* VP22 — vertically centre every modal on desktop, so the suite is consistent
   instead of a mix of top-anchored and centred dialogs. Mirrors Bootstrap's
   own .modal-dialog-centered. The :not() guards leave modals that already opt
   into centred untouched, and leave .modal-dialog-scrollable alone (Bootstrap
   positions those itself, and forcing align-items:center fights its layout).
   Desktop-only (>=576px) so small screens keep the natural top-flow that
   scrolls better on a phone. */
@media (min-width: 576px) {
  .modal-dialog:not(.modal-dialog-centered):not(.modal-dialog-scrollable) {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
  }
}

/* Accessibility: honour reduced-motion globally. Neutralises the motion
   utilities above and dampens any transform/animation the suite applies. */
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog,
  .modal.show .modal-dialog {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
  .vplus-fade-in,
  .vplus-fade-up,
  .vplus-fade-out,
  .vplus-slide-left,
  .vplus-slide-right,
  .vplus-stagger > *,
  .vplus-stagger.is-in > * {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }
  .vplus-skeleton::after {
    animation: none !important;
  }
}

/* --- Invalid Workflow guard modal (harsher warning treatment) --- */
.vplus-invalid-workflow .modal-content {
  border: 2px solid #842029;
  box-shadow:
    0 0 0 0.25rem rgba(132, 32, 41, 0.15),
    0 1rem 3rem rgba(0, 0, 0, 0.3);
}
.vplus-invalid-workflow .modal-header {
  background: #842029;
  border-bottom: 0;
}
.vplus-invalid-workflow .modal-title {
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.vplus-invalid-workflow .modal-title::before {
  font-family:
    "Font Awesome 7 Pro", "Font Awesome 7 Free", "Font Awesome 6 Free",
    "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f071"; /* fa-triangle-exclamation */
  margin-right: 0.6rem;
}
.vplus-invalid-workflow .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.vplus-invalid-workflow .modal-body {
  color: #58151c;
}

/* ══════════════════════════════════════════════════════════════════════════
   Footer "Powered by" mark (#6). Swap the theme's PNG for the vendored SVG
   (crisp at any size), even out the spacing, and add a gentle ambient pulse.
   The theme footer file is outside this plugin, so we do it all from here:
   hide the <img>, paint the SVG as a background on the <a>. Full brand colour
   is kept in BOTH modes; dark mode lifts the near-black ink so the wordmark
   stays legible on the dark canvas.
   ══════════════════════════════════════════════════════════════════════════ */
.powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 0 1.75rem;
}
.powered-by a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.powered-by .powered-by-text {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vplus-text-secondary, #6c757d);
  opacity: 0.85;
}
/* Replace the raster logo with the vendored SVG. */
.powered-by a img {
  width: 132px;
  height: 22px;
  object-fit: contain;
  content: url("../images/woa-powered-by.svg");
  /* gentle ambient pulse — a slow opacity breathe that draws a little attention
     at rest without being distracting. */
  animation: vplusPoweredPulse 3.2s ease-in-out infinite;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}
.powered-by a:hover img {
  transform: translateY(-1px);
}
@keyframes vplusPoweredPulse {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .powered-by a img {
    animation: none;
    opacity: 1;
  }
}
/* Dark mode: keep the blue/orange brand colour, but lift the near-black ink
   (the "webtron" wordmark) so it doesn't vanish. A light drop-shadow halo +
   a mild brightness nudge lifts the dark strokes while leaving the saturated
   blue/orange essentially untouched. */
body.vplus-dark-mode .powered-by a img {
  /* A light halo (two tight white drop-shadows) traces the dark-ink wordmark so
     it separates from the dark canvas, while the brightness nudge lifts the ink
     itself — the saturated blue/orange stay recognisably on-brand. */
  filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.85)) brightness(1.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   Invoicing menus (#7). The vp-invoicing plugin renders .vplus-invoicing-*
   markup directly into the page (no iframe), but ships no dark styles — so its
   cards, table heads, buttons, TomSelect + flatpickr inputs stay light on the
   dark canvas. Its plugin file is outside this repo, so the dark overrides live
   here in Core (loaded site-wide) — the same approach used for other bridged UI.
   ══════════════════════════════════════════════════════════════════════════ */
body.vplus-dark-mode .vplus-invoicing-auction-card {
  background-color: #242830 !important;
  border-color: #3a3f4a !important;
  color: #e4e6eb;
}
body.vplus-dark-mode .vplus-invoicing-table-head {
  background-color: #2d323c !important;
  border-color: #3a3f4a !important;
  color: #c9cdd4;
}
body.vplus-dark-mode .vplus-invoicing-table-row,
body.vplus-dark-mode .vplus-invoicing-item-row {
  border-color: #333944 !important;
}
body.vplus-dark-mode .vplus-invoicing-table-row:hover {
  background-color: #262b33 !important;
}
/* Generic .button used across the invoicing UI (pagination, toggles, sync). */
body.vplus-dark-mode .vplus-invoicing-auction-card .button,
body.vplus-dark-mode .vplus-pg-btn,
body.vplus-dark-mode .vplus-invoicing-xero-status-toggle,
body.vplus-dark-mode .vplus-invoicing-item-list-toggle {
  background-color: #2d323c !important;
  border-color: #3a3f4a !important;
  color: #e4e6eb !important;
}
body.vplus-dark-mode .vplus-invoicing-auction-card .button:hover,
body.vplus-dark-mode .vplus-pg-btn:hover,
body.vplus-dark-mode .vplus-invoicing-xero-status-toggle:hover,
body.vplus-dark-mode .vplus-invoicing-item-list-toggle:hover {
  background-color: #343a46 !important;
}
body.vplus-dark-mode .vplus-invoicing-sync-btn {
  background-color: #2f6fd0 !important;
  border-color: #2f6fd0 !important;
  color: #fff !important;
}
/* TomSelect control + dropdown (single AND multi) — used in the invoicing
   filters and elsewhere in the suite. */
body.vplus-dark-mode .ts-wrapper .ts-control,
body.vplus-dark-mode .ts-control {
  background-color: #2d323c !important;
  border-color: #3a3f4a !important;
  color: #e4e6eb !important;
}
body.vplus-dark-mode .ts-control input,
body.vplus-dark-mode .ts-control input::placeholder {
  color: #a0a6b1 !important;
}
/* Multi-select item chips. */
body.vplus-dark-mode .ts-wrapper.multi .ts-control > .item {
  background-color: #343a46 !important;
  border-color: #454b57 !important;
  color: #e4e6eb !important;
}
body.vplus-dark-mode .ts-dropdown {
  background-color: #2d323c !important;
  border-color: #3a3f4a !important;
  color: #e4e6eb !important;
}
body.vplus-dark-mode .ts-dropdown .option.active,
body.vplus-dark-mode .ts-dropdown .active {
  background-color: #2f6fd0 !important;
  color: #fff !important;
}
/* flatpickr date inputs on the invoicing page (and anywhere else). */
body.vplus-dark-mode .flatpickr-input,
body.vplus-dark-mode input.flatpickr-input {
  background-color: #2d323c !important;
  border-color: #3a3f4a !important;
  color: #e4e6eb !important;
}
body.vplus-dark-mode .flatpickr-calendar {
  background-color: #242830 !important;
  border-color: #3a3f4a !important;
  color: #e4e6eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
body.vplus-dark-mode .flatpickr-day {
  color: #e4e6eb !important;
}
body.vplus-dark-mode .flatpickr-day:hover {
  background-color: #343a46 !important;
}
body.vplus-dark-mode .flatpickr-day.selected {
  background-color: #2f6fd0 !important;
  border-color: #2f6fd0 !important;
}
body.vplus-dark-mode .flatpickr-months,
body.vplus-dark-mode .flatpickr-weekdays,
body.vplus-dark-mode span.flatpickr-weekday {
  background-color: #242830 !important;
  color: #a0a6b1 !important;
}

/* ==========================================================================
   Drag-and-drop affordance for file fields.

   JS toggles `.vplus-drop-active` on the `.vplus-file-upload-field` wrapper and
   supplies the caption via `data-vplus-drop-label`, so the message stays
   translatable from PHP.

   `position: relative` is applied only while dragging — setting it permanently
   could change stacking against dropdowns/tooltips inside these fields.
   ========================================================================== */
.vplus-file-upload-field.vplus-drop-active {
  position: relative;
  outline: 2px dashed var(--vplus-accent, #0d6efd);
  outline-offset: 3px;
  border-radius: 8px;
  background-color: rgba(13, 110, 253, 0.04);
}

.vplus-file-upload-field.vplus-drop-active::after {
  content: attr(data-vplus-drop-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none; /* never swallow the drop itself */
  background-color: rgba(255, 255, 255, 0.86);
  color: var(--vplus-accent, #0d6efd);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  border-radius: 8px;
}

/* No label supplied → tint only, never an empty white panel. */
.vplus-file-upload-field.vplus-drop-active:not([data-vplus-drop-label])::after {
  content: none;
}

body.vplus-dark-mode .vplus-file-upload-field.vplus-drop-active {
  background-color: rgba(143, 182, 255, 0.08);
  outline-color: #8fb6ff;
}

body.vplus-dark-mode .vplus-file-upload-field.vplus-drop-active::after {
  background-color: rgba(36, 40, 48, 0.9);
  color: #8fb6ff;
}

@media (prefers-reduced-motion: reduce) {
  .vplus-file-upload-field.vplus-drop-active {
    transition: none;
  }
}

/* R2b — Photos as a three-state icon button group inside the disclosure.
   Icons carry "with" / "without" in the width the select needed for its widest
   option label; "All" keeps its word because a glyph for "no constraint" reads
   as decoration. Tooltips + .visually-hidden text carry the meaning for screen
   readers and for anyone who does not recognise the icons. */
.vp-filter .vp-filter__photos-group {
  display: inline-flex;
  flex-wrap: nowrap;
}
.vp-filter .vp-filter__photos-group .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: var(--vplus-filter-control-h, 38px);
}
/* fa-camera-slash is Pro-only in some kits; fall back to a struck-through
   camera so the "without" state is never a blank button. */
.vp-filter .vp-filter__photos-group .fa-camera-slash:before {
  content: "\f083";
}
.vp-filter .vp-filter__photos-group .fa-camera-slash {
  position: relative;
}
.vp-filter .vp-filter__photos-group .fa-camera-slash:after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 50%;
  border-top: 2px solid currentColor;
  transform: rotate(-20deg);
}

/* ============================================================
   CONSIGNMENT ID BADGE (A2)
   ============================================================
   The consignment's 6-digit public reference. Appears on My
   Consignments, every Manage Consignments tab, the Submission
   Details modal and the Item List, so the colours are declared
   here rather than in a page template — --vplus-warm-accent is
   scoped to two pages only and is unset on the others.
   ============================================================ */
/* Sizing (display/gap/padding/font/line-height/radius) comes from .vplus-pill
   so every badge family shares one size grid; this keeps only the colours. */
.vplus-consignment-id-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.65em;
  min-height: 20px;
  border: 1px solid #f0d3bf;
  border-radius: 999px;
  background: #fdf0e7;
  color: var(--vplus-warm-accent, #c4622d);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  /* The number is the point of the badge: keep the digits from
       reflowing between rows in a column of them. */
  font-variant-numeric: tabular-nums;
}

.vplus-consignment-id-badge .fa-hashtag {
  font-size: 0.6875rem;
  opacity: 0.75;
}

/* Table cells stack the badge under the title, so it needs to clear the line
   above without inflating row height. */
td .vplus-consignment-id-badge {
  margin-top: 4px;
}

/* Item List: sit on the same metrics as the .vplus-badge siblings it lines up
   with there, which are em-based rather than fixed.

   The vertical padding is deliberately 1px short of the sibling's 0.3em: this
   badge carries a 1px border that .vplus-lot-meta-badge only takes on hover, so
   matching the padding exactly would leave ours 2px taller than everything
   beside it. Measured, not guessed — the content boxes are identical. */
.vplus-lot-summary-badges .vplus-consignment-id-badge {
  gap: 0.3em;
  padding: calc(0.3em - 1px) calc(0.7em - 1px);
  font-size: 0.72em;
  line-height: 1.3;
  letter-spacing: 0.015em;
}

/* Click to copy. The badge is a real control (role=button, tabindex=0), so it
   needs a pointer, a hover state and a visible focus ring. */
.vplus-consignment-id-badge {
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}
.vplus-consignment-id-badge:hover {
  background: #fbe4d4;
  border-color: #e6bfa4;
}
.vplus-consignment-id-badge:focus-visible {
  outline: 2px solid var(--vplus-warm-accent, #c4622d);
  outline-offset: 2px;
}

/* Copy feedback. The hint span is empty in the markup and filled here, so the
   confirmation text is never in the DOM for a screen reader to announce out of
   context, and never lands in a copied text selection. */
.vplus-consignment-id-badge__hint::after {
  content: "";
}
.vplus-consignment-id-badge.is-copied {
  background: #e9f7ed;
  border-color: #c4e8d0;
  color: #1f7a44;
}
.vplus-consignment-id-badge.is-copied .vplus-consignment-id-badge__hint::after {
  /* Text comes from the PHP renderer so it stays translatable — CSS content
       cannot be run through the text domain. */
  content: attr(data-copied-label);
  margin-left: 4px;
  font-weight: 700;
}

/* ============================================================
   STOCK NUMBER BADGE (Loading Bay)
   ============================================================
   Inherits the consignment-id badge's shape, metrics and
   copy-to-clipboard behaviour by carrying that class too; only
   the palette differs. Blue, so it never reads as a consignment
   reference — the two can appear on the same item.
   ============================================================ */
.vplus-stock-number-badge {
  border-color: #bfd3f0;
  background: #e7f0fd;
  color: #1d4ed8;
}
.vplus-stock-number-badge:hover {
  background: #d8e6fb;
  border-color: #a6c2e9;
}
.vplus-stock-number-badge:focus-visible {
  outline-color: #1d4ed8;
}
body.vplus-dark-mode .vplus-stock-number-badge {
  border-color: rgba(29, 78, 216, 0.45);
  background: rgba(29, 78, 216, 0.18);
  color: #bfdbfe;
}

/* ============================================================
   LOADING BAY COUNTDOWN BADGE
   ============================================================
   How long an item may stay in the Bay. Neutral until the last
   week, then warning-coloured — the item is deleted at zero, so
   the change of state has to be visible before it happens.
   ============================================================ */
.vplus-badge-ttl {
  border: 1px solid #d9dee5;
  background: #f4f6f8;
  color: #55606e;
}
.vplus-badge-ttl.vplus-badge-ttl--warning {
  border-color: #f0d3bf;
  background: #fdf0e7;
  color: #b4531f;
}
body.vplus-dark-mode .vplus-badge-ttl {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #c3cbd6;
}
body.vplus-dark-mode .vplus-badge-ttl.vplus-badge-ttl--warning {
  border-color: rgba(196, 98, 45, 0.45);
  background: rgba(196, 98, 45, 0.2);
  color: #f3c3a3;
}
.vplus-consignment-id-badge.is-copy-failed {
  background: #fdecea;
  border-color: #f5c6c2;
  color: #a3271f;
}
.vplus-consignment-id-badge.is-copy-failed
  .vplus-consignment-id-badge__hint::after {
  content: attr(data-failed-label);
  margin-left: 4px;
  font-weight: 700;
}

/* Dark mode: the light fill glares on the dark page. Low-alpha wash of the same
   hue with lighter ink, matching the bidding-options badge treatment. */
body.vplus-dark-mode .vplus-consignment-id-badge {
  background: rgba(196, 98, 45, 0.18);
  border-color: rgba(196, 98, 45, 0.38);
  color: #f0a878;
}
body.vplus-dark-mode .vplus-consignment-id-badge:hover {
  background: rgba(196, 98, 45, 0.28);
  border-color: rgba(196, 98, 45, 0.5);
}
body.vplus-dark-mode .vplus-consignment-id-badge.is-copied {
  background: rgba(45, 190, 110, 0.18);
  border-color: rgba(45, 190, 110, 0.38);
  color: #7bd8a0;
}
body.vplus-dark-mode .vplus-consignment-id-badge.is-copy-failed {
  background: rgba(220, 80, 70, 0.18);
  border-color: rgba(220, 80, 70, 0.38);
  color: #f0a09a;
}

/* Respect a reduced-motion preference: drop the colour transition, keep the
   state change (which is the actual feedback). */
@media (prefers-reduced-motion: reduce) {
  .vplus-consignment-id-badge {
    transition: none;
  }
}

/* ============================================================
   INCOMPLETE VENDOR PROFILE BADGE (Phase 8)
   ============================================================
   Rendered as a real <button> so it is keyboard-reachable — it opens the
   reminder modal. Bootstrap's .badge does not reset button chrome, so the
   UA's background, border and padding have to be cleared explicitly or the
   badge renders as a grey box in a row of pill badges. */

/* Sizing comes from .vplus-pill; this keeps only what a <button> needs and the
   border-width the pill base sets to transparent. */
.vplus-profile-gap-badge {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  /* Beats the UA button appearance without !important. */
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.vplus-profile-gap-badge:hover:not(:disabled) {
  background-color: #ffe8b3;
  border-color: #ffd782;
}

.vplus-profile-gap-badge:focus-visible {
  outline: 2px solid #b26a00;
  outline-offset: 2px;
}

/* Disabled only while its AJAX round-trip is in flight. */
.vplus-profile-gap-badge:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Sits under the title beside the Consignment ID badge; keep them off the
   line above without inflating row height. */
td .vplus-profile-gap-badge {
  margin-top: 4px;
}

/* ── Submitter subject pills (Agent / Consignor) ───────────────────────────
   Moved here from submission-detail.php's inline sheet when the same badge
   started rendering in the Manage Consignments tables (P4). Deliberately
   UNSCOPED so one rule serves the modal and every table.

   IMPORTANT: My Consignments keeps its own two-class copy under
   .vplus-actions-meta — it also suppresses the bullet separators around the
   pill, and being two-class it still outranks these. Do not "consolidate"
   the two without moving that bullet handling. */
/* Sizing matches .vplus-pill (see the BADGES section) so the submitter pill
   sits on the same grid as the ID and status badges beside it. */
.vplus-subject-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.65em;
  min-height: 20px;
  line-height: 1;
  /* Transparent 1px border matches the pill's box; without it this family
     renders ~1.2px shorter than the bordered badges beside it. */
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  max-width: 100%;
  min-width: 0;
}
.vplus-subject-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "Agent:" / "Vendor:" — never shrinks, so a long name truncates and the word
   saying what it is does not. Opacity, not a colour, so it follows each
   variant's own text colour in both modes. */
.vplus-subject-badge > .vplus-subject-badge__label {
  flex: 0 0 auto;
  font-weight: 500;
  opacity: 0.8;
}
/* Retired as a rendered variant (the filer is now --agent and the party filed
   for is --profile or --supplier). Kept one release for cached markup. */
.vplus-subject-badge--onbehalf {
  background: #fdeee1;
  color: #8a4620;
}
.vplus-subject-badge--onbehalf i {
  color: #c4622d;
}
.vplus-subject-badge--profile {
  background: #ede4ff;
  color: #4c2d8a;
}
.vplus-subject-badge--profile i {
  color: #6f42c1;
}
.vplus-subject-badge--consignor {
  background: #e3f0ff;
  color: #1c4e80;
}
.vplus-subject-badge--consignor i {
  color: #2b7cd3;
}
/* Supplier/Client Profile subject. Distinct from --profile (Vendor Profile):
   the two can appear in the same column and must not read as one thing. */
.vplus-subject-badge--supplier {
  background: #e2f5f1;
  color: #1c5f54;
}
.vplus-subject-badge--supplier i {
  color: #16897a;
}
/* Agent subject. A fourth colour is needed because the My Sales subject picker
   lists Vendor Profiles, Agents and Supplier Profiles together, and an Agent is
   a person rather than a profile — reusing --profile would read as one kind. */
.vplus-subject-badge--agent {
  background: #fff1e6;
  color: #8a4b12;
}
.vplus-subject-badge--agent i {
  color: #c4711f;
}

/* A subject row in the My Sales picker: the badge, then who it belongs to
   (the profiles an Agent represents, or a Supplier's Agent). */
.vplus-ss-subject {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.vplus-ss-subject-owner {
  color: #6c757d;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* In a table cell the pill sits under the name, not beside it. */
td .vplus-subject-badge {
  margin-top: 4px;
}

/* The pill backgrounds are light tints, so the dark theme's inherited light
   text would drop to near-invisible on them. Restate the pairing. */
body.vplus-dark-mode .vplus-subject-badge--onbehalf {
  background: #4a2c17;
  color: #f6d5bd;
}
/* Checkbox badges — the subject filter inside the network drawer. The badge
   IS the control, so the whole pill is the hit target. */
.vplus-subject-badge--check {
  cursor: pointer;
  gap: 0.35rem;
  user-select: none;
}
.vplus-subject-badge--check .form-check-input {
  width: 0.9em;
  height: 0.9em;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
/* Checked emphasis. :has() is progressive — the checkbox's own tick is the
   baseline state indicator, so nothing depends on this rule landing. */
.vplus-subject-badge--check:has(input:checked) {
  border-color: currentColor;
  font-weight: 600;
}
.vplus-subject-badge--check:focus-within {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 1px;
}
/* The one-click "only this subject" link beside each badge. */
.vplus-subject-only {
  opacity: 0.55;
  font-size: 0.75rem;
}
.vplus-subject-only:hover,
.vplus-subject-only:focus {
  opacity: 1;
}

/* Pre-existing gap: --agent had no dark-mode rule while the other four did,
   so an agent badge kept its light background in dark mode. */
body.vplus-dark-mode .vplus-subject-badge--agent {
  background: #3a2b16;
  color: #f0dcbe;
}
body.vplus-dark-mode .vplus-subject-badge--agent i {
  color: #d9a35a;
}

body.vplus-dark-mode .vplus-subject-badge--onbehalf i {
  color: #e08c52;
}
body.vplus-dark-mode .vplus-subject-badge--profile {
  background: #322247;
  color: #dcccf7;
}
body.vplus-dark-mode .vplus-subject-badge--profile i {
  color: #a98ae0;
}
body.vplus-dark-mode .vplus-subject-badge--consignor {
  background: #1b3454;
  color: #cfe2fb;
}
body.vplus-dark-mode .vplus-subject-badge--consignor i {
  color: #6ea8e8;
}
body.vplus-dark-mode .vplus-subject-badge--supplier {
  background: #14332e;
  color: #b9e8de;
}
body.vplus-dark-mode .vplus-subject-badge--supplier i {
  color: #52bfab;
}

/* View on Portal badges. These are real ANCHORS in rows of <span> badges, so
   the theme's link styling has to be reset — measured live, it underlines them
   and forces its own colour.
   The background comes from the shared action-badge rule above
   (.vplus-auction-details-btn, .vplus-item-detail-btn), which this class joins
   so the three action badges can never drift apart. The colour must be
   restated: `inherit` resolves against the PARENT, not that rule, and measured
   live it produced #212529 text on the #4d4d4d ground — unreadable.
   Two classes out-specify the theme's `a` rules without !important. Dark mode
   is handled by the body.vplus-dark-mode block, which this class also joins. */
.vplus-badge.vplus-portal-link-badge,
.vplus-badge.vplus-portal-link-badge:hover,
.vplus-badge.vplus-portal-link-badge:focus,
.vplus-badge.vplus-portal-link-badge:visited {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

body.vplus-dark-mode .vplus-badge.vplus-portal-link-badge,
body.vplus-dark-mode .vplus-badge.vplus-portal-link-badge:hover,
body.vplus-dark-mode .vplus-badge.vplus-portal-link-badge:focus,
body.vplus-dark-mode .vplus-badge.vplus-portal-link-badge:visited {
  color: #e4e6eb;
}

.vplus-badge.vplus-portal-link-badge:hover,
.vplus-badge.vplus-portal-link-badge:focus-visible {
  filter: brightness(1.25);
}

/* UP — one label/value idiom for every profile card.
   Replaces the three that had grown up independently (a borderless <table>, a
   <dl class="row">, and bare span pairs), which is why two pages showing the
   same facts looked unrelated. Grid rather than a table so a long value wraps
   under its own column instead of stretching the label. */
.vplus-up-field {
  display: grid;
  grid-template-columns: minmax(90px, 40%) 1fr;
  gap: 4px 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bs-border-color-translucent, #eef0f3);
  font-size: 13px;
}
.vplus-up-field:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.vplus-up-field__label {
  color: var(--bs-secondary-color, #6b7280);
  font-weight: 500;
}
.vplus-up-field__value {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.vplus-dark-mode .vplus-up-field {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Below 576px the two columns leave the value nowhere to go. */
@media (max-width: 575.98px) {
  .vplus-up-field {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}