/**
 * TEMP
 *
 * @format
 */

#vplus-lot-list [type="checkbox"] {
  display: none;
}

:root {
  --gray-300: #dee2e6;
  --vplus-surface-canvas: #f6f7f9;
  --vplus-surface-panel: #ffffff;
  --vplus-surface-panel-alt: #f8f9fa;
  --vplus-surface-subtle: #f6f8fb;
  --vplus-border-default: #d9e1ea;
  --vplus-border-strong: #e5eaf0;
  --vplus-text-primary: #1f2933;
  --vplus-text-secondary: #5f6c7b;
  --vplus-text-muted: #4b5563;
  --vplus-heading-accent: #003566;
  --vplus-link-subtle: #53627a;
  --vplus-accent-text: #0f4c81;
  --vplus-accent-soft: #e8f1fb;
  --vplus-ring-color: rgba(13, 110, 253, 0.18);
  --vplus-info-soft: rgba(13, 110, 253, 0.1);
  --vplus-info-border: rgba(13, 110, 253, 0.24);
  --vplus-info-text: #0f4c81;
  --vplus-warning-soft: rgba(255, 193, 7, 0.12);
  --vplus-warning-border: rgba(255, 193, 7, 0.28);
  --vplus-warning-text: #8a6d1f;
  --vplus-success-soft: rgba(40, 167, 69, 0.14);
  --vplus-success-text: #1f7a35;
  --vplus-danger-soft: rgba(220, 53, 69, 0.14);
  --vplus-danger-text: #b42332;
  /* Motion tokens — shared vocabulary for transitions/animations across the suite. */
  --vplus-motion-fast: 120ms;
  --vplus-motion-base: 180ms;
  --vplus-motion-slow: 280ms;
  --vplus-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --vplus-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --vplus-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --vplus-stagger-step: 45ms;
}

b,
strong {
  font-weight: bold;
}

#main {
  padding-top: 1rem;
}

/* BASIC */
small {
  display: inline-block;
}

/* CORE */
@media (max-width: 420px) {
  .hidden-xxs {
    display: none !important;
  }
}

.padding-top-10 {
  padding-top: 10px;
}
.padding-top-20 {
  padding-top: 20px;
}
.padding-bottom-10 {
  padding-bottom: 10px;
}
.padding-bottom-20 {
  padding-bottom: 20px;
}
.hidden {
  display: none;
}
.relative {
  position: relative;
}
.on-top,
.filter-panel.on-top {
  z-index: 999;
}
.disable-link {
  pointer-events: none;
  cursor: default;
}
.grey-text {
  color: #999;
}
.strikethrough {
  text-decoration: line-through;
}
.margin-top-20 {
  margin-top: 20px;
}
.margin-bottom-20 {
  margin-bottom: 20px;
}

.vplus-delete-prompt .btn-block + .btn-block {
  margin-top: 0;
}

/* FORM */
sup.required {
  color: #e84242;
}
input.error {
  color: #e84242;
  background: red;
  border-color: #e84242;
}

#vplus-login {
  width: 100px;
}
/* USER LOGGED IN */
.vplus-login-info {
  text-align: right;
  margin-bottom: 20px;
}
.vplus-login-nav {
  margin-bottom: 20px;
}

/* SEARCH FORM - FILTER PANEL */
.vplus-js-on .vplus-search-form {
  display: none;
}
.filter-panel * {
  font-weight: normal;
}
.filter-panel.on-top {
  background: rgba(255, 255, 255, 0.9);
  opacity: 1;
}
.filter-panel {
  position: absolute;
  background: #fff;
  padding: 20px;
  box-shadow: #ccc 0 3px 5px;
  margin-top: 8px;
  margin-left: -8px;
  width: 100%;
  min-width: 200px;
  z-index: 100;
  opacity: 0.9;
}
th.filter-heading.filter-active {
  background: #fff;
  position: relative;
}
.collapse-all {
  float: right;
}
/* LOT META */
.vplus-status-draft {
  color: #999;
  background: transparent !important;
}
.vplus-status-review {
  color: #f3be1e;
  background: transparent !important;
}
.vplus-status-accepted {
  color: #24b532;
  background: transparent !important;
}
.vplus-status-rejected {
  color: #e84242;
  background: transparent !important;
}
.vplus-status-box {
  line-height: 1;
  display: inline-block;
  padding: 5px 8px;
  border-radius: 3px;
}
.vplus-status-box.vplus-status-draft {
  background-color: #999;
  color: #fff;
}
.vplus-status-box.vplus-status-review {
  background-color: #f3be1e;
  color: #fff;
}
.vplus-status-box.vplus-status-accepted {
  background-color: #24b532;
  color: #fff;
}
.vplus-status-box.vplus-status-rejected {
  background-color: #e84242;
  color: #fff;
}
.vplus-meta-data {
  margin: 40px 0;
}
.vplus-meta-data li {
  line-height: 1.8em;
}
.bid-override {
  color: #c00;
}
/* VP LINKS */
.vplus-link,
.vplus-link:hover,
.vplus-link:focus,
.vplus-link:visited,
.vplus-link:active {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}

.vplus-link,
.vplus-link:active {
  transform: scale(1);
}
.vplus-link:hover {
  transform: scale(1.1);
}

/* LOT CATALOGUE */
#vplus-lot-list .table > thead > tr > th {
  vertical-align: top;
}
#vplus-lot-list .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(200, 200, 200, 0.2);
}
#vplus-lot-list {
  min-height: 200px;
}
/* Actions group — the button row plus the Sync-options caption strip beneath
   it. Kept as a column wrapper so the options can sit UNDER the Sync buttons
   without being a flex sibling of Save Draft (which would stretch it tall). */
.vplus-lot-actions-group {
  display: flex;
  flex-direction: column;
}
#vplus-lot-actions {
  display: flex;
  align-items: stretch;
  flex-direction: row;
}
/* Sync-options caption strip — a flex row that mirrors the button row's column
   widths: a spacer matching the Save Draft button (flex 1), then the options
   panel spanning the two Sync buttons (flex 2), so the panel lands directly
   beneath the Sync actions it applies to. */
.vplus-sync-options-row {
  display: flex;
  gap: 1rem;
}
.vplus-sync-options-row__spacer {
  flex: 1 1 0;
}
/* Inline Sync options (Dashboard Status + Public Visibility). Reads as attached
   to the Sync buttons above: pulled up under them, top corners squared, subtle
   top border removed so it tucks in seamlessly rather than floating as a card. */
/* R5.1 — a COLUMN: the two controls on a centred row, then the hint as a quiet
   centred caption beneath. Previously the long hint sat inline as a 3rd flex child
   and sprawled ~750px wide, unbalancing the panel. */
#vplus-sync-options {
  flex: 2 1 0;
  margin-top: -1px;
  padding: 0.6rem 0.75rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
#vplus-sync-options .vplus-sync-options__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-end;
}
#vplus-sync-options .vplus-sync-options__field {
  display: flex;
  flex-direction: column;
}
#vplus-sync-options .vplus-sync-options__field .form-select {
  min-width: 9rem;
}
/* Match the visibility toggle's height to the status <select> so the two
   controls sit on one baseline (btn-sm and form-select-sm differ by a couple
   of px otherwise, throwing the row off-balance). */
#vplus-sync-options .vplus-sync-option-visibility {
  min-height: calc(1.5em + 0.5rem + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#vplus-sync-options .vplus-sync-options__hint {
  text-align: center;
}
/* R5.2 — "Current Status / Visibility" line beneath each control (synced lots). */
#vplus-sync-options .vplus-sync-options__current {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #667085;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
/* P2 (3.4): below lg, the three action buttons otherwise wrap 2+1 unevenly
   (Save Draft + Sync on row one, Sync & Create orphaned on row two) and the
   sync-options spacer leaves a gap beside the lone button. Stack all three
   actions full-width in one column across the whole tablet+mobile band, drop the
   options spacer, and let the options strip go full-width beneath them. Raised
   from the old 575.98px cut-off so the tablet band (768–991px) gets the clean
   stack instead of the ragged wrap. */
@media (max-width: 991.98px) {
  #vplus-lot-actions {
    flex-direction: column;
  }
  .vplus-sync-options-row__spacer {
    display: none;
  }
  #vplus-sync-options {
    flex: 1 1 100%;
  }
}
.vplus-submission-final-actions {
  display: flex;
  align-items: stretch;
  flex-direction: row;
}
#vplus-submission-splash {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3rem;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 0.5rem;
}
.vplus-blueflag-heading-icon {
  color: #495057;
}
@media (max-width: 767.98px) {
  /* #vplus-lot-actions is stacked across the whole tablet+mobile band by the
     P2 (3.4) rule above (max-width: 991.98px) — no longer needed here. */
  .vplus-submission-final-actions {
    flex-direction: column !important;
  }
  /* CN2 — the submission form's action row (Back + final actions) is a bare
     .d-flex.justify-content-between.flex-wrap inside .vplus-form-actions. On
     mobile justify-content-between + flex-wrap left the two groups side-by-side
     and wrapped them to ~50% each, so the buttons looked clamped. Stack the row
     and stretch every button to full width. */
  .vplus-form-actions > .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }
  .vplus-form-actions > .d-flex > .btn,
  .vplus-submission-final-actions {
    width: 100%;
  }
  .vplus-submission-final-actions > .btn {
    width: 100%;
  }
}

.vplus-gallery-main .swiper-slide {
  position: relative;
}

.vplus-gallery-slide-label {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(17, 24, 39, 0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.table-heading th a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.table-heading th [data-filter] {
  cursor: pointer;
  transform: scale(1);
}
.table-heading th [data-filter]:hover {
  transform: scale(1.1);
  color: #2272b9;
}
.no-results {
  padding: 50px 0;
}
/* LOT TABLE JS LOADING */
.table-loading {
  position: relative;
}
.table-loading tbody {
  opacity: 0.5;
}
.table-loading:before {
  content: "";
  position: absolute;
  border: 3px dotted #2272b9;
  z-index: 1000;
  margin-left: -15px;
  margin-top: -15px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  z-index: 1000;
  animation: dashicons-spin 5s linear infinite;
}

/* MESSAGE BOX (for logs) */
.log-box {
  margin-top: 5px;
}
.log-box.log-box ul {
  margin-top: 10px;
  margin-bottom: 10px;
}
.message-box + .log-box {
  margin-top: 10px;
}
ul.text-status {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
ul.text-error {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}
ul.text-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
ul.text-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
ul.text-status,
ul.text-error,
ul.text-warning,
ul.text-success {
  padding: 15px 0 15px 30px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 0;
  list-style-type: circle;
  list-style-position: outside;
}

/* VP BUTTON NAVIGATION */
.vplus-navigation-bar {
  text-align: center;
  margin-bottom: 40px;
}
.vplus-navigation-bar a {
  width: 120px;
}
/* AJAX STYLES */
.deleting {
  background: pink;
}

/* PAGINATION */
.pagination a {
  cursor: pointer;
}

/* JQUERY UPLOAD DROPZONE */
#dropzone {
  text-align: center;
  font-size: 3rem;
}
@media (min-width: 450px) {
  #dropzone {
    padding: 0;
    background: #eee;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    width: 100%;
    height: 250px;
    line-height: 250px;
    text-align: center;
    font-weight: bold;
    font-size: 4rem;
  }
}
@media (max-width: 449px) {
  #dropzone .fileinput-container {
    transform: scale(0.8);
  }
}
#dropzone .fileinput-container {
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}
#dropzone .fileinput-button {
  vertical-align: top;
  color: #0073aa;
}
#dropzone .fileinput-button.disabled {
  vertical-align: top;
  color: #ccc;
}
#dropzone.hover {
  background: #d9edf3;
}
#dropzone.fade {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 1;
}

/* MEDIA OPTIONS */
.vplus-media-files {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 576px) {
  .vplus-media-files {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .vplus-media-files {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 992px) {
  .vplus-media-files {
    grid-template-columns: repeat(8, 1fr);
  }
}
/*.vplus-media-option,
.vplus-media-option:visited {
padding:5px;
text-decoration: none;
border-radius: 50%;
background:rgba(255,255,255,0.8);
box-shadow: #ccc 0 2px 2px;
}*/
/*.vplus-media-files .vplus-media-option {
position: absolute;
width: auto;
height: auto;
padding: 5px;
border-radius: 50%;
background: #fff;
box-shadow: #ccc 0 2px 2px;
}
.vplus-media-files .image-box .vplus-media-option {
top: -5px;
}
.vplus-media-option:hover,
.vplus-media-option:focus {
text-decoration: none;
cursor: pointer;
transform: scale(1.1);
}

.vplus-media-option:active {
text-decoration: none;
transform: scale(1);
}*/
.vplus-media-option.disabled.disabled {
  color: #ccc;
}
.attachment-container:nth-child(even) .file-item {
  background-color: #eee;
}
.vplus-media-files .image-box {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  overflow: hidden;
}
/* Pending upload tiles start with a 1x1 transparent placeholder (the small
   downscaled preview / server thumbnail swaps in async). Hold a stable square
   so the tile doesn't collapse to a 1px sliver and jump when the image loads. */
.vplus-media-files .vplus-file-container .image-box {
  aspect-ratio: 1 / 1;
  background-color: #f3f4f6;
}
.vplus-media-files .vplus-file-container .image-box .photo,
.vplus-media-files .vplus-file-container .image-box .photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.vplus-media-files .vplus-file-container {
  overflow: visible;
}
.vplus-media-files .file-item {
  padding: 10px;
}
.vplus-media-files .file-radio {
  cursor: pointer;
}
.vplus-media-files .image-box .preview-link {
  left: -5px;
}
/*.delete-link {
color: #e84242;
}
.delete-link:hover {
color: #dc3636;
}*/
/*.vplus-media-files .image-box .delete-link {
right: -5px;
}*/
.vplus-media-files .file-item .file-date {
  position: absolute;
  right: 100px;
  text-align: right;
}
.vplus-media-files .file-item .log-link {
  right: 50px;
  top: 4px;
  padding: 5px;
}
.vplus-media-files .file-item .delete-link {
  top: 4px;
  right: 10px;
}
/*.vplus-media-files .delete-prompt {
width: 100%;
height:100%;
background-color: rgba(0,0,0,0.4);
position: absolute;
z-index: 5;
top: 0;
left: 0;
}*/
/*.vplus-media-files .delete-yes,
.vplus-media-files .delete-no {
border-radius: 50%;
background: #fff;
box-shadow: #666 0 2px 2px;
width: auto;
height:auto;
position: absolute;
}
.vplus-media-files .delete-no:hover,
.vplus-media-files .delete-yes:hover,
.vplus-media-files .delete-no:active,
.vplus-media-files .delete-yes:active {
cursor: pointer;
transform: scale(1.1);
}
.vplus-media-files .delete-yes.dashicons-admin-generic {
padding: 10px 14px;
color: #666;
}
.vplus-media-files .delete-yes {
color: #e84242;
}
.vplus-media-files .image-box .delete-no {
position: absolute;
right: -5px;
top: -5px;
color: #e84242;
padding: 5px;
}
.vplus-media-files .file-item .delete-no {
top: 4px;
right: 10px;
padding: 5px;
}*/
.vplus-media-files .file-item .delete-yes {
  top: 4px;
  right: 50px;
  padding: 5px;
}
.vplus-media-files .image-box .delete-yes {
  top: 50%;
  left: 50%;
  font-size: 4em;
  margin-left: -38px;
  margin-top: -38px;
  padding: 10px;
}
.vplus-media-files .image-box .message-box {
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
  opacity: 0.85;
}
.vplus-media-files .image-box .message-box .text-danger {
  background: #a94442;
  color: #fff;
}
.vplus-media-files .image-box .photo img {
  width: 100%;
  height: auto;
  display: block;
}
.vplus-media-files .file-item .icon {
  margin: 0 0 0 5px;
}
.vplus-media-files .image-box .file-name {
  position: absolute;
  bottom: 0;
  text-align: center;
  font-size: 0.8em;
  line-height: 1;
  width: 100%;
  padding: 15px 5px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.vplus-media-files .image-box .vplus-set-default {
  position: absolute;
  bottom: 5px;
  right: 5px;
  z-index: 99;
}
.progress {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 2px;
  top: auto;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.progress .progress-bar {
  background-color: #22c55e;
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.image-box > .progress,
.relative.image-box > .progress,
.vplus-media-files .image-box > .progress,
.vplus-file-container .image-box > .progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.vplus-image-container {
  border-radius: 0.5rem;
}
.vplus-image-container[data-deleted="true"] .vplus-media-option .delete-state {
  display: none;
}
.vplus-image-container[data-deleted="false"]
  .vplus-media-option
  .un-delete-state {
  display: none;
}
.vplus-image-container[data-deleted="true"] .photo img {
  opacity: 0.5;
  transition: opacity 0.25s ease-in;
}
.vplus-primary-image {
  position: absolute;
  top: 1px;
  margin-left: 1px;
  font-size: 1.4rem;
  padding: 0.5rem 1rem;
  border-radius: 0 0 5px 0;
}

/* BOOTSTRAP - CUSTOM */
.btn-prev {
  position: absolute;
  top: 0;
  left: 0;
}

.popover.popover .row {
  border-bottom: 1px solid #f2f2f2;
}
.popover.popover .row:last-child {
  border-bottom: 0;
}

@media (min-width: 420px) {
  .popover.popover {
    max-width: max-content;
  }
  .popover.popover .row {
    width: 300px;
  }
}
/* TINY MCE - CUSTOM */
#vplus-vendor-lot-form .wp-editor-container {
  border: 1px solid #ddd;
  border-radius: 3px 0 3px 3px;
  overflow: hidden;
}

/* DASHICONS - CUSTOM */
.dashicons-filter-small {
  font-size: 1em;
  line-height: 1.2em;
}
.dashicons-spin {
  -webkit-animation: dashicons-spin 2s infinite linear;
  animation: dashicons-spin 2s infinite linear;
}

/* ANIMATIONS */
@-webkit-keyframes dashicons-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes dashicons-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.vplus-set-default .vplus-check-bg {
  color: #fff;
}
.vplus-set-default .vplus-check-border {
  color: #000;
}
.vplus-set-default .vplus-check {
  color: #ccc;
}
.vplus-set-default.vplus-checked .vplus-check-border {
  color: gold;
}
.vplus-set-default.vplus-checked .vplus-check-bg {
  color: #e08e20;
}
.vplus-set-default.vplus-checked .vplus-check {
  color: gold;
  display: inline-block;
}

.table > tbody > tr.header-row > td {
  vertical-align: bottom;
}
.table > tbody > tr > td > * {
  vertical-align: middle;
}
.table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.chart-legend-box {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: text-top;
  margin-right: 5px;
  opacity: 0;
  border-radius: 3px;
}

.vplus-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.7em;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.015em;
  border-radius: 1rem;
  white-space: nowrap;
  vertical-align: middle;
}
/* --- Semantic colour variants --- */
.vplus-badge-pending {
  background: #fff3cd;
  color: #664d03;
}
.vplus-badge-approved {
  background: #d1e7dd;
  color: #0f5132;
}
.vplus-badge-rejected {
  background: #f8d7da;
  color: #842029;
}
.vplus-badge-assigned {
  background: #cff4fc;
  color: #055160;
}
.vplus-badge-live {
  background: #d1e7dd;
  color: #0f5132;
}
.vplus-badge-sold {
  background: #d1e7dd;
  color: #0f5132;
}
.vplus-badge-unsold {
  background: #e9ecef;
  color: #495057;
}
.vplus-badge-withdrawn {
  background: #e9ecef;
  color: #495057;
}
/* --- Functional variants --- */
.vplus-badge-info {
  background: #cff4fc;
  color: #055160;
}
.vplus-badge-success {
  background: #d1e7dd;
  color: #0f5132;
}
.vplus-badge-warning {
  background: #fff3cd;
  color: #664d03;
}
.vplus-badge-danger {
  background: #f8d7da;
  color: #842029;
}
.vplus-badge-primary {
  background: #cfe2ff;
  color: #084298;
}
.vplus-badge-secondary {
  background: #e9ecef;
  color: #495057;
}
.vplus-badge-dark {
  background: #343a40;
  color: #fff;
}
/* --- Context-specific --- */
.vplus-badge-required {
  background: #f8d7da;
  color: #842029;
  font-size: 0.65em;
}
.vplus-badge-recommended {
  background: #d1e7dd;
  color: #0f5132;
  font-size: 0.65em;
}
.vplus-badge-optional {
  background: #e9ecef;
  color: #495057;
  font-size: 0.65em;
}
/* B2 — a field the operator cannot change (e.g. Opening Bid once the Item has
   received a bid). Amber rather than red: nothing is wrong, the field is just
   closed for editing. */
.vplus-badge-locked {
  background: #fff3cd;
  color: #664d03;
  font-size: 0.65em;
}
.vplus-ob-lock-note {
  font-size: 0.8em;
  color: #6c757d;
}
/* R4.3 — Required/Optional presentation for the pricing cluster: the inline
   label badge is kept for the required-checklist's detection (hasRequiredBadge()
   queries `.vplus-badge-required` inside label[for=id]) but made a visually-hidden
   MARKER, while the visible cue moves to a red asterisk in the label plus a
   centred badge below the field (mirrors .vplus-auto-increment-note). */
.vplus-badge--marker {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.vplus-req-star {
  color: #dc3545;
  font-weight: 700;
  margin-left: 0.15em;
}
/* Below-field badge block — same rhythm as .vplus-auto-increment-note. */
.vplus-field-req-note {
  margin-top: 0.5rem;
  text-align: center;
}
/* R5.4 — Required + Auto-Increments notes on one centred line (Bid Increment). The
   auto note is d-none until active, so the Required badge sits centred alone until
   then; when both show they sit side-by-side. The wrapper owns the top gap, so its
   children drop their own margins. */
.vplus-field-notes-inline {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.vplus-field-notes-inline .vplus-field-req-note,
.vplus-field-notes-inline .vplus-auto-increment-note {
  margin-top: 0;
}
.vplus-badge-timed {
  background: #cfe2ff;
  color: #084298;
}
.vplus-badge-webcast {
  background: #f8d7da;
  color: #842029;
}
.vplus-badge-marketplace {
  background: #343a40;
  color: #fff;
}
/* Holding-pattern state (e.g. "Revision Pending"): a burnt-orange/peach that is
   deliberately deeper + more saturated than the pale-amber "pending" token, so
   the two warm states don't read as the same colour. */
.vplus-badge-revision {
  background: #ffe5d0;
  color: #8a4b1f;
}
/* Live badge context variants. Base "live" stays green (open + active). These two
   split off the ambiguous cases so a vendor can tell them apart:
   - catalogue: publicly visible but NOT yet open for bidding → cool slate (calm,
     "just listed", clearly not the same as active green Live).
   - ring: webcast live-bidding running, item not yet reached → warm amber
     ("imminent / attention"), distinct from both the green Live and the
     yellow "Pending Review". */
.vplus-badge-live-catalogue {
  background: #dde7f0;
  color: #33506b;
}
.vplus-badge-live-ring {
  background: #ffe8c2;
  color: #8a5a12;
}

.badge-lighter {
  background: #e9eef6;
  color: var(--bs-gray-800);
}
.badge-light {
  background: #e9eef6;
  color: var(--bs-gray-800);
}

/* ── Multi-select checkbox dropdown ── */
.vplus-multi-select-dropdown .form-select {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  padding: 1rem 2.25rem 1rem 0.75rem;
  color: var(--bs-body-color);
  cursor: pointer;
}
.vplus-multi-select-dropdown .dropdown-menu {
  max-height: 280px;
  overflow-y: auto;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.vplus-multi-select-dropdown .form-check {
  margin-bottom: 0;
}
.vplus-multi-select-dropdown .form-check-label {
  cursor: pointer;
  font-size: 0.9rem;
}
/* Prevent double caret: .form-select adds bg-image caret, .dropdown-toggle adds ::after caret */
.vplus-multi-select-dropdown .dropdown-toggle::after {
  content: none;
}

.vplus-sale-status {
  font-size: 1.2em;
  padding: 10px 20px;
  margin-bottom: 20px;
  font-weight: 100;
  display: inline-block;
  background: #fff;
  box-shadow: #eee 0px 1px 3px;
}
.vplus-draft {
  border-left: 5px solid lightgrey;
}
.vplus-preview {
  border-left: 5px solid lightblue;
}
.vplus-live {
  border-left: 5px solid darkseagreen;
}
.vplus-reconciliation {
  border-left: 5px solid mediumpurple;
}
.vplus-archived {
  border-left: 5px solid brown;
}
.vplus-badge-floor {
  display: inline-block;
  cursor: help;
  padding: 3px 5px;
  margin-left: 3px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  text-align: center;
  vertical-align: baseline;
  background-color: #337ab7;
  border-radius: 3px;
}
.vplus-badge-commission {
  display: inline-block;
  cursor: help;
  padding: 3px 5px;
  margin-left: 3px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  text-align: center;
  vertical-align: baseline;
  background-color: #ff7565;
}

#vplus-sync-photos-wrapper {
  margin-top: 40px;
}
#vplus-load-icon {
  margin-bottom: 20px;
}

#woaBidHistoryModal .modal-body {
  padding: 0 15px;
}
.vplus-bid-history-items {
  padding: 10px 0;
}
.vplus-bid-history-items:nth-child(odd) {
  background-color: #f1f1f1;
}
.vplus-bid-history-items-info-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.vplus-bid-history-items-username {
  font-size: 0.825rem;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.vplus-bid-history-items-amount {
  text-align: right;
  font-weight: bold;
  font-size: 1.2rem;
  min-width: 150px;
}
.vplus-bid-history-items-time {
  font-size: 0.825rem;
}
@media (min-width: 768px) {
  .vplus-bid-history-items-username {
    margin-bottom: 0;
  }
  .vplus-col-name {
    width: 50%;
  }
}
.vplus-bid-status--unknown .vplus-bid-history-items-amount {
  color: purple;
  opacity: 0.5;
}
.vplus-bid-status--double .vplus-bid-history-items-amount {
  text-decoration: line-through;
  color: darkorange;
  opacity: 0.5;
}
.vplus-bid-status--suspended .vplus-bid-history-items-amount {
  text-decoration: line-through;
  color: darkred;
  opacity: 0.5;
}
.vplus-bid-status--cancelled .vplus-bid-history-items-amount {
  text-decoration: line-through;
  opacity: 0.5;
}

#woa-download-invoice {
  margin-left: 1rem;
}

/* Styles */
.vplus-logo {
  margin: 1rem 0;
}
.header > .container:after {
  border-bottom: 1px solid #d9d9d9;
  content: " ";
  display: block;
}

/* Desktop container width */
@media (min-width: 1200px) {
  .container {
    max-width: 1800px;
  }
}

.btn-collapse-toggle {
  padding: 0 1rem;
  color: #666;
}
.btn-collapse-toggle:not(.collapsed) span[class*="fa-"] {
  transform: rotate(180deg);
}
.btn-collapse-toggle:focus {
  border-color: transparent;
  background: #f5f5f5;
}
.btn-collapse-toggle:focus {
  outline: none;
  border-color: transparent;
}
.card {
  margin-bottom: 1rem;
}
.card h5 {
  color: #6b6b6b;
  font-size: 0.825rem;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
}
.card-body + .card-body.collapse,
.card-body + .card-body.collapsing {
  padding-top: 0;
}
.card-body > .row {
  row-gap: 1rem;
}
/* .input-group .form-control {
  border-right-color: transparent;
}
.input-group .input-group-text + div > .form-control {

} */

.file-upload {
  padding: 1rem 0.75rem;
  font-weight: 300;
  color: #666;
  border-top-left-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}
.file-upload--hidden + .file-upload {
  border-right: 0;
}
.file-upload--hidden + .file-upload + .btn {
  border-left: 0;
}
.file-upload--hidden.d-none + .file-upload,
.file-upload--hidden.d-none + .file-upload + .btn {
  background-color: var(--bs-secondary-bg);
}
.file-upload--hidden.d-none + .file-upload + .btn {
  border-color: var(--bs-border-color);
  color: var(--bs-gray-700);
}

.input-group .file-upload--hidden {
  position: absolute;
  opacity: 0;
  width: 100%;
  z-index: 3;
  height: 100%;
}
.input-group.input-group div ~ button {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-left-color: transparent;
}
.input-group.input-group div ~ button:hover {
  background: transparent;
  color: var(--bs-primary);
}
.input-group:has(.form-floating + button) input {
  border-right-color: transparent;
}

/* R5.3 — round the RIGHT edge of lot-form pricing/BP fields. Bootstrap's
   input-group rounding targets a direct-child .form-control; when the control is
   wrapped in .form-floating (as these fields are) the trailing radius never reaches
   the inner input, leaving the icon (left) edge rounded but the field's right edge
   square. Scoped to the lot form so unrelated input-groups are untouched. Three
   group shapes exist (see R5.3 in the assessment); each rounds its true right-most
   visible element. A stray .invalid-feedback block can be the DOM :last-child, so we
   avoid :last-child and target shapes explicitly. */
/* !important is required to beat the broad dictation-button rule near the end of
   this file (`.input-group > .form-floating > .form-control { border-*-right-radius:
   0 !important }`), which squares EVERY floating input's right edge. The
   `:last-child` guard keeps this correct when a dictation button IS injected as a
   later sibling — then .form-floating isn't :last-child, this rule doesn't fire, and
   the input stays square so the injected button abuts it flush. */
#vplus-lot-form .input-group > .form-floating:last-child > .form-control,
#vplus-lot-form .input-group > .form-floating:last-child > .form-select,
#vplus-express-form .input-group > .form-floating:last-child > .form-control,
#vplus-express-form .input-group > .form-floating:last-child > .form-select {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}
/* Shape 3 — trailing affix before an .invalid-feedback (R3.5 Charges/BP fields):
   the affix is the right-most visible element, round its right corners. */
#vplus-lot-form .input-group > .form-floating + .input-group-text,
#vplus-express-form .input-group > .form-floating + .input-group-text {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}
/* Shape 2 — trailing calculator button (Reserve): round its right corners. */
#vplus-lot-form .input-group > .form-floating + .vp-reserve-calculator,
#vplus-express-form .input-group > .form-floating + .vp-reserve-calculator {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

.vplus-form-status:empty,
.vplus-file-photo-ai-uploaded:empty {
  display: none;
}
.vplus-file-photo-ai-uploaded {
  position: relative;
}
.vplus-file-photo-ai-uploaded img {
  border: 1px solid #f2f2f2;
  max-width: 100%;
  height: auto;
  border-radius: var(--bs-border-radius);
}

/* Minimum Offer Amount field highlight (red border) */
/* Special purchase-option field highlight (Minimum Acceptable Offer, Purchase
   Price / Display Price). R4.2d retoned this from a red `--bs-danger` border —
   which read as "danger/error" for what are notable-but-optional fields — to a
   calmer Bootstrap `--bs-info` treatment with a faint tint. `.vplus-special-field-highlight`
   is the shared class; `.vplus-minimum-offer-highlight` is kept as an alias so
   existing markup keeps working. */
.vplus-special-field-highlight,
.vplus-minimum-offer-highlight {
  border: 2px solid var(--bs-info);
  border-radius: var(--bs-border-radius);
  background-color: rgba(var(--bs-info-rgb), 0.06);
}
.vplus-special-field-highlight .input-group-text,
.vplus-minimum-offer-highlight .input-group-text {
  border: 0;
  background-color: transparent;
}
.vplus-special-field-highlight .form-control,
.vplus-minimum-offer-highlight .form-control {
  border: 0;
  background-color: transparent;
}

.form-check-wrapper,
.form-radio-wrapper {
  min-height: 3.625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* R4.5 — subtle animate-IN when a conditional pricing row is revealed on an
   item-type / purchase-option change. Applied by VP_AnimateRevealedRows() only on
   a real hidden→shown transition (display stays toggled synchronously so
   validation / the required-checklist never desync). Opacity + a small upward
   slide; class self-removes on animationend. */
.vplus-row-reveal {
  animation: vplus-row-reveal 0.28s ease-out;
}
@keyframes vplus-row-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vplus-row-reveal {
    animation: none;
  }
}
/* .form-row:not(:last-child) {
  margin-bottom: 1rem;
} */

.alert p:last-child {
  margin-bottom: 0;
}

.btn-link-toggle {
  padding: 0 0.5rem;
  line-height: 1rem;
}

.btn-link-toggle + .collapsing {
  transition: all 0.3s ease-in;
}
.btn-link-toggle + .collapse {
  margin-top: 0;
}
.btn-link-toggle + .collapse.show,
.btn-link-toggle + .collapsing {
  margin-top: 1rem;
}
.btn-link-toggle:focus,
.btn-link-toggle:active {
  outline: none;
  --bs-btn-active-border-color: transparent;
}
.btn-link-toggle[aria-expanded="false"] .fa-toggle-on,
.btn-link-toggle[aria-expanded="false"] .fa-toggle-large-on {
  display: none;
}
.btn-link-toggle[aria-expanded="true"] .fa-toggle-off,
.btn-link-toggle[aria-expanded="true"] .fa-toggle-large-off {
  display: none;
}

.card-body .tab-content {
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  border-top: 0;
}

.card-body .row {
  row-gap: 1rem;
}

.vplus-upload-status {
  font-weight: bold;
  font-size: 0.75rem;
}

#vplus-video-tabs-content + .vplus-upload-status {
  margin-top: 1rem;
}

/* This code is from v1 of AI photo upload area */
/* .vplus-file-wrapper {
  padding-top: 0%;
  position: relative;
  transition: padding-top 0.5s ease-out;
}
.vplus-file-wrapper.init,
.vplus-file-wrapper:has(img) {
  padding-top: 75%;
}
.vplus-file-loading {
  display: none;
}
.vplus-file-wrapper.init + .vplus-file-loading {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #666;
}
.vplus-file-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

blockquote {
  border-left: calc(1rem / 2) solid #d4edff;
  padding-left: 0.75rem;
  font-weight: 300;
}

p,
ul,
ol,
li {
  font-weight: 400;
}

.vplus-file-wrapper {
  display: none;
  padding: 1rem;
  border: 1px dashed var(--gray-300);
  border-radius: var(--bs-border-radius);
  /* Prevent accidental text selection during drag/scroll gestures */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.vplus-file-wrapper.show {
  display: block !important;
  margin-top: 1rem;
}

.toast-close.toast-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 0.75em;
}

@media (max-width: 575px) {
  .toastify {
    font-size: 0.825rem;
  }
}

.vplus-media-option {
  display: flex;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  bottom: calc(100% - 0.5rem);
  z-index: -1;
  transition:
    bottom 0.3s ease-in,
    opacity 0.3s ease-in;
}
.vplus-media-option.show {
  border: 1px solid #eee;
  opacity: 1;
  pointer-events: auto;
  border-radius: 5px;
  z-index: 100;
  background: #fff;
  bottom: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%);
}
.vplus-media-option:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
}
.vplus-media-option:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* P2 — keep the TILE-ANCHORED options row inside its tile.

   The row is 4 x 44px buttons (~132px) but a tile can be ~100px, and
   .vplus-file-container is `overflow: visible` (load-bearing — the
   delete-confirm popover must be able to escape the tile), so the buttons
   painted ~31px outside the card. Wrapping keeps every button >=24px wide
   instead of squeezing them into an untappable sliver.

   🔴 `:not(.show)` is load-bearing, NOT decoration. Below 576px the rule after
   this one turns .vplus-media-option.show into a FIXED bottom sheet with
   `max-width: none` and 2.75rem targets; clamping that to a ~100px tile would
   destroy the mobile treatment. But the RESTING state (no .show) stays
   `position: absolute` at every width — measured — so it must be clamped at
   every width too. Scoping this by breakpoint instead of by state left the
   overflow in place below 576px. */
.vplus-media-files .vplus-media-option:not(.show) {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.vplus-media-files .vplus-media-option:not(.show) > .btn {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

/* >=576px the popover stays tile-anchored even when open, so clamp .show too. */
@media (min-width: 576px) {
  .vplus-media-files .vplus-media-option.show {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .vplus-media-files .vplus-media-option.show > .btn {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }
}

@media (max-width: 575.98px) {
  .vplus-media-option.show {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    max-width: none;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 12px 12px 10px 10px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
    z-index: 1060;
  }

  .vplus-media-option:before,
  .vplus-media-option:after {
    display: none;
  }

  .vplus-media-option > .btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .vplus-media-option .vplus-delete-prompt.show {
    width: 100%;
    max-width: 22rem;
  }
}

.vplus-file-container:has(> .vplus-delete-prompt.show) > .vplus-media-option,
.vplus-file-item:has(> .vplus-delete-prompt.show) > .vplus-file-delete {
  display: none;
}

.vplus-delete-prompt {
  display: none;
}
.vplus-delete-prompt.show {
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: min(240px, calc(100vw - 2rem));
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem;
  min-height: 0;
  padding: 0.7rem;
}
.vplus-delete-prompt-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
}
.vplus-delete-prompt-label {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  color: #212529;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.vplus-delete-prompt-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #842029;
  font-size: 0.95rem;
}
.vplus-file-container .vplus-delete-prompt.show {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  z-index: 200;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
}

.vplus-upload-status {
  display: none;
  margin-bottom: 1rem;
}

.vplus-file-container {
  position: relative;
}
.vplus-file-container.selected .image-box {
  box-shadow: 0px 0px 0 4px rgba(var(--bs-primary-rgb), 0.25);
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}
.vplus-file-container.selected .image-box .photo {
  opacity: 0.75;
}
.vplus-file-container.already-synced .image-box {
  border-color: var(--bs-teal);
}
.vplus-file-container.to-be-synced .image-box {
  border-color: var(--bs-blue);
}
.vplus-file-container .vplus-cloud-check {
  color: var(--bs-teal);
  border-color: var(--bs-teal);
}
.vplus-file-container .vplus-cloud-upload {
  color: var(--bs-blue);
  border-color: var(--bs-blue);
}
.vplus-file-container .vplus-cloud-check,
.vplus-file-container .vplus-cloud-upload,
.vplus-file-container [class*=" vplus-cloud-"] {
  position: absolute;
  right: -0.5rem;
  bottom: calc(100% - 1rem);
  border: 1px solid;
  border-radius: 50%;
  background: #fff;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
}

.vplus-auctioneer-defaults-badge {
  cursor: pointer;
  transition:
    box-shadow 0.15s ease,
    filter 0.15s ease,
    transform 0.15s ease;
}

.vplus-auctioneer-defaults-badge:hover,
.vplus-auctioneer-defaults-badge:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.2);
}

.vplus-auctioneer-defaults-badge.is-active {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow:
    0 0 0 0.2rem rgba(13, 110, 253, 0.35),
    0 0.25rem 0.65rem rgba(0, 0, 0, 0.16);
}

#vplus-card--auctioneer-defaults .vplus-auctioneer-defaults-tabs {
  gap: 0;
  justify-content: center;
}

#vplus-card--auctioneer-defaults {
  text-align: center;
}

#vplus-card--auctioneer-defaults > .d-flex {
  justify-content: center !important;
}

#vplus-card--auctioneer-defaults .vplus-auctioneer-defaults-button {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  font-weight: 600;
  min-height: 2.25rem;
  transition:
    box-shadow 0.15s ease,
    filter 0.15s ease,
    transform 0.15s ease;
}

#vplus-card--auctioneer-defaults .vplus-auctioneer-defaults-button.bg-warning,
#vplus-card--auctioneer-defaults .vplus-auctioneer-defaults-button.bg-info {
  color: #1f2933;
}

#vplus-card--auctioneer-defaults .vplus-auctioneer-defaults-button:hover,
#vplus-card--auctioneer-defaults
  .vplus-auctioneer-defaults-button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.2);
}

#vplus-card--auctioneer-defaults .vplus-auctioneer-defaults-button.active {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.85),
    0 0 0 0.2rem rgba(13, 110, 253, 0.28);
  filter: saturate(1.12) brightness(1.04);
}
.vplus-file-item .vplus-delete-prompt.show {
  width: max-content;
  right: 0;
  border-radius: var(--bs-border-radius);
  max-width: 100%;
}

.vplus-delete-prompt--file.show {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
}

.vplus-delete-prompt--file .vplus-delete-prompt-icon {
  flex: 0 0 auto;
}

.vplus-delete-prompt--file .vplus-delete-prompt-label {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}

.vplus-delete-prompt--file .vplus-delete-prompt-heading {
  order: 1;
  flex: 1 1 auto;
}

.vplus-delete-prompt--file > .delete-yes {
  order: 3;
  flex: 0 0 auto;
}

.vplus-delete-prompt--file > .delete-no {
  order: 4;
  flex: 0 0 auto;
}

.vplus-delete-prompt .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  text-decoration: none;
  gap: 0.25rem;
}
.vplus-delete-prompt .btn span {
  line-height: 1;
}
.vplus-delete-prompt .delete-no {
  color: #495057;
  background: #e9ecef;
  border-color: #dee2e6;
}
.vplus-delete-prompt .delete-no:hover {
  background: #dee2e6;
}
.vplus-delete-prompt .delete-yes {
  color: #fff;
  background: var(--bs-danger);
  border-color: var(--bs-danger);
}
.vplus-delete-prompt .delete-yes:hover,
.vplus-delete-prompt .delete-yes:focus {
  color: #fff;
  background: #bb2d3b;
  border-color: #b02a37;
}
.vplus-delete-prompt--video .delete-yes {
  background: #6f42c1;
  border-color: #6f42c1;
}
.vplus-delete-prompt--video .delete-yes:hover,
.vplus-delete-prompt--video .delete-yes:focus {
  background: #5a34a0;
  border-color: #5a34a0;
}
.processing {
  display: none;
  gap: 0.25rem;
  padding: 0.5rem;
  min-height: 38px;
  align-items: center;
}
.processing.show {
  display: flex;
}
.vplus-featured-image-icon {
  position: absolute;
  z-index: 50;
  color: #ffa500;
  font-size: 1.5rem;
  bottom: calc(100% - 0.5rem);
  line-height: 1rem;
  left: -0.25rem;
  transform: rotate(-15deg);
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}

.vplus-ai-file-icon {
  display: none;
  position: absolute;
  color: var(--bs-primary);
  z-index: 50;
  font-size: 1.25rem;
  bottom: calc(100% - 1rem);
  line-height: 1rem;
  right: -0.5rem;
  border: 1px solid #eee;
  padding: 0.25rem;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  background: #fff;
}

#vplus-ai-form-panel .vplus-ai-file-icon,
#vplus-ai-form-panel .ai-link {
  display: block;
}

/* Always-visible AI Analysis corner toggle (tap-to-select). One control on
   EVERY submission thumbnail — additional photos (.vplus-file-container) and
   section thumbs (.vplus-section-thumb). Unselected: a subtle pill inviting a
   tap. Selected (.is-ai-selected on the container): solid primary. It sits in
   the top-RIGHT corner of the thumbnail. */
.vplus-file-container,
.vplus-section-thumb {
  position: relative;
}
.vplus-ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.92);
  color: #6c757d;
  border: 1px solid #d7dbe0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  z-index: 60;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.vplus-ai-toggle .fa-regular,
.vplus-ai-toggle .fa-solid {
  font-size: 0.85rem;
}
.vplus-ai-toggle:hover {
  color: var(--vplus-ai-accent);
  border-color: var(--vplus-ai-accent);
}
/* Selected: the badge must read at a glance against a photo, so it uses the
   dedicated AI accent rather than --bs-primary. A tenant's brand primary is
   often a dark navy (default #1c3f85), which sat too close to the unselected
   grey chip to be distinct. Solid fill + glow ring reuses the treatment from
   the lot form's document AI badge. */
.vplus-file-container.is-ai-selected .vplus-ai-toggle,
.vplus-section-thumb.is-ai-selected .vplus-ai-toggle {
  color: #fff;
  background: var(--vplus-ai-accent);
  border-color: var(--vplus-ai-accent);
  box-shadow:
    0 0 0 3px var(--vplus-ai-accent-glow),
    0 1px 3px rgba(0, 0, 0, 0.15);
}
/* Inline copy of the badge, embedded in the instruction sentence via the
   {badge} token. Static (not absolutely positioned) and non-interactive — a
   visual reference to the on-photo control. Carries the AI accent so it matches
   the selected badge it is pointing at. */
.vplus-ai-toggle.vplus-ai-toggle-inline {
  position: static;
  top: auto;
  right: auto;
  vertical-align: middle;
  margin: 0 0.15rem;
  padding: 0.1rem 0.4rem;
  color: #fff;
  background: var(--vplus-ai-accent);
  border-color: var(--vplus-ai-accent);
  box-shadow: none;
  cursor: default;
}
/* A ring on the selected thumbnail reinforces the choice. Matches the badge. */
.vplus-file-container.is-ai-selected .image-box,
.vplus-section-thumb.is-ai-selected {
  outline: 2px solid var(--vplus-ai-accent);
  outline-offset: -2px;
  border-radius: 0.35rem;
}

a.delete-link {
  color: var(--bs-danger);
}
a.ai-link {
  color: purple;
  display: none;
}
a.process-link {
  color: var(--bs-warning);
  display: none;
}
.vplus-img-proc-enabled a.process-link {
  display: block;
}

.vplus-process-prompt {
  display: none;
}
.vplus-process-prompt.show {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 150px;
  padding: 0.5rem;
}
.vplus-process-prompt .btn-proc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  min-height: 36px;
  border-radius: 2rem;
  white-space: nowrap;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  color: #333;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.vplus-process-prompt .btn-proc:hover {
  background: #e9ecef;
  border-color: #ced4da;
  color: #111;
  text-decoration: none;
}
.vplus-process-prompt .btn-proc:active {
  background: #dee2e6;
}
.vplus-process-prompt .process-revert {
  border-color: var(--bs-warning);
  color: #856404;
  background: #fff8e1;
}
.vplus-process-prompt .process-revert:hover {
  background: #fff3cd;
  border-color: #c69500;
  color: #664d03;
}
.vplus-process-prompt .process-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 1rem;
  padding: 0.15rem;
  min-height: 28px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.vplus-process-prompt .process-cancel:hover {
  color: #555;
}
.vplus-process-prompt .processing {
  display: none;
  text-align: center;
  color: #888;
  font-size: 0.8rem;
  padding: 0.25rem 0;
}
.vplus-process-prompt .processing.show {
  display: block;
}
.vplus-media-option:has(.vplus-process-prompt.show) > .btn {
  display: none;
}

.vplus-file-container.vplus-processing .image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
  border-radius: inherit;
}
/* Processing progress overlay (replaces gear spinner) */
.vplus-proc-overlay {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.vplus-proc-overlay .vplus-proc-label {
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.vplus-proc-overlay .vplus-proc-track {
  width: 70%;
  height: 8px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
}
.vplus-proc-overlay .vplus-proc-fill {
  height: 100%;
  width: 0%;
  background: #f97316;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.vplus-processed-badge {
  position: absolute;
  z-index: 50;
  color: var(--bs-warning);
  font-size: 1rem;
  top: -0.35rem;
  right: -0.35rem;
  border: 1px solid #eee;
  padding: 0.15rem;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  background: #fff;
  line-height: 1;
}

/* ================================
   Image Editor Modal (Cropper.js)
   ================================ */
.vplus-editor-modal .modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vplus-editor-canvas {
  flex: 1 1 auto;
  min-height: 300px;
  max-height: 60vh;
  overflow: hidden;
  background: #1a1a2e;
  position: relative;
}
.vplus-editor-canvas.vplus-editor-loading::after {
  content: "\f110";
  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.7);
  animation: fa-spin 1s linear infinite;
}
.vplus-editor-canvas img {
  display: block;
  max-width: 100%;
}
.vplus-editor-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  flex-wrap: wrap;
}
.vplus-editor-tools {
  display: flex;
  gap: 2px;
}
.vplus-editor-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 0.85rem;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.vplus-editor-btn:hover {
  background: #e9ecef;
  border-color: #ced4da;
}
.vplus-editor-btn:active {
  background: #dee2e6;
}
.vplus-editor-ratios {
  display: flex;
  gap: 2px;
}
.vplus-editor-ratio {
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.vplus-editor-ratio:hover {
  background: #e9ecef;
}
.vplus-editor-ratio.active {
  background: var(--bs-primary, #3b82f6);
  border-color: var(--bs-primary, #3b82f6);
  color: #fff;
}
@media (max-width: 575.98px) {
  .vplus-editor-canvas {
    max-height: 50vh;
  }
  .vplus-editor-toolbar {
    justify-content: center;
  }
}

.form-floating > label {
  color: #000000;
  font-weight: var(--vplus-font-weight-light);
  opacity: 1;
}

.input-group.input-group.input-group:has(.invalid-feedback)
  .input-group-text
  + .form-floating
  .form-control {
  border-right: 1px solid var(--bs-border-color);
}
.input-group.input-group.input-group:has(.invalid-feedback)
  .input-group-text
  + .form-floating
  .form-control,
.input-group.input-group.input-group:has(.invalid-feedback)
  .form-floating
  + .btn,
.input-group.input-group.input-group:has(.invalid-feedback)
  .form-floating
  + .input-group-text {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

.card-featured {
  --bs-card-border-color: var(--bs-warning);
  border-color: var(--bs-warning) !important;
  box-shadow:
    0 0 12px 4px rgba(var(--bs-warning-rgb), 0.4),
    0 0 0 2px rgba(var(--bs-warning-rgb), 0.6);
}

.form-field-combine {
  display: flex;
}
.form-field-combine > .form-field-combine-item {
  flex: 1;
}
.form-field-combine > .form-field-combine-item:not(:last-child) input,
.form-field-combine > .form-field-combine-item:not(:last-child) select {
  border-radius: 0;
  border-right: 0;
}
.form-field-combine > .form-field-combine-item:first-child input,
.form-field-combine > .form-field-combine-item:first-child select {
  border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
  border-right: 0;
}
.form-field-combine > .form-field-combine-item:last-child input,
.form-field-combine > .form-field-combine-item:last-child select {
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
  border-left-style: dashed;
}

/* Auction Date & Time combine groups (Bidding Start/End): the date + time
   fields sit side-by-side (flex, 50/50). In the narrow ~360px tablet-portrait
   col-md-6 the time field's floating label clips ("Bidding Start Time" →
   "Bidding Start…"). Below lg, stack the two items so each gets the full column
   width and its label fits, separated by a gap. Scoped to the date/time block
   so other form-field-combine groups are untouched. */
@media (max-width: 991.98px) {
  #vplus-auction-datetime .form-field-combine {
    flex-direction: column;
    gap: 0.5rem;
  }
}

#vplus-sign-in-form .row {
  gap: 1rem;
}

[data-ref].invalid-feedback:empty {
  display: none;
}
[data-ref].invalid-feedback {
  display: block;
}

.row > div > blockquote:last-child {
  margin: 0;
}

.alert:empty {
  display: none;
}

.vplus-table-header {
  font-weight: bold;
}
.ghost-item > div:not(.image-box) {
  display: none;
}
.ghost-item .image-box {
  opacity: 0.5;
  border: 2px dashed #ccc;
}
.ghost-item img {
  opacity: 0;
}

.vplus-file-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Prevent accidental text selection during drag/scroll gestures */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.vplus-file-item {
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-bg: var(--bs-body-bg);
  position: relative;
  display: flex;
  color: var(--bs-body-color);
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  align-items: center;
}

.vplus-file-item .vplus-file-name {
  flex: 1 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  /* Allow text selection on file names for copy purposes */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.vplus-file-item .vplus-file-icon {
  flex: 0 1 auto;
  display: block;
  padding: 1rem;
  color: var(--bs-gray-500);
}
.vplus-file-item .vplus-file-delete {
  flex: 0 1 auto;
  color: var(--bs-gray-800);
}

.vplus-file-item .vplus-file-progress {
  flex: 0 0 100px;
  padding: 0 0.5rem;
  position: relative;
}
.vplus-file-item .vplus-file-progress .progress {
  position: relative;
  width: 100%;
  height: 12px;
  margin: 0;
  top: auto;
  border-radius: 2px;
  background: #e9ecef;
}
.vplus-file-item .vplus-file-cancel {
  flex: 0 1 auto;
  color: var(--bs-gray-500);
  border: none;
  background: transparent;
  padding: 0.5rem 1rem;
}
.vplus-file-item .vplus-file-cancel:hover {
  color: var(--bs-danger);
}

.vplus-file-wrapper.vplus-file-wrapper:not(:has(.vplus-file-container)) {
  display: none;
}

.ql-editor.ql-editor > * {
  margin-bottom: 1rem;
}

.btn.btn.vplus-file-move-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: var(--bs-border-radius) 0 0 0;
  border-bottom: 0;
  border-right: 0;
}

.vplus-sales-list .card {
  overflow: visible;
}
.vplus-submission-card {
  overflow: visible !important;
}
#vplus-sale-filter .card,
.vplus-settings-card {
  overflow: visible !important;
}
.vplus-sales-list .card-body {
  row-gap: 0.25rem;
}
@media (max-width: 575px) {
  .vplus-sales-list .card-body {
    padding-top: 0.5rem;
  }
}
.vplus-sales-list .card-body > div {
  align-self: center;
}
.vplus-sales-list .card-body .dropdown {
  margin-right: -0.5rem;
}
.vplus-sales-list .card-body .dropdown-toggle {
  line-height: 1;
  padding: 0.25rem 0.625rem;
}
.vplus-sales-list .card-body .dropdown-toggle.show {
  background: #e9eef6;
}
.vplus-sales-list .sale-name-link {
  display: inline-block;
}
.vplus-sales-list .col-sale-date {
  min-width: 100px;
  font-size: 80%;
  display: inline-block;
}
.vplus-sales-list .col-sale-id {
  min-width: 60px;
  font-size: 80%;
  display: inline-block;
}
.vplus-status-live,
.vplus-status-live-synced {
  color: #2fa358;
}
.badge.vplus-status-sold {
  background-color: #49b5e4;
  color: #ffffff;
}
.vplus-status-sold-floor {
  color: #0a58ca;
  background-color: rgba(10, 88, 202, 0.15);
}
.vplus-status-draft,
.vplus-status-draft-synced {
  color: #5a7ab8;
  background-color: rgba(90, 122, 184, 0.15);
}
.vplus-status-preview,
.vplus-status-pending {
  color: #c99212;
  background-color: transparent;
}
.vplus-status-pending-floor {
  color: #c96712;
  background-color: rgba(246, 145, 83, 0.15);
}
.vplus-status-reconciled,
.vplus-status-reconciliation,
.vplus-status-withdrawn {
  color: #a03f32;
  background-color: transparent;
}
.vplus-status-withdrawn-ended {
  color: #a03f32;
  background-color: transparent;
}
.vplus-status-archived {
  color: #666;
}
.vplus-status-unsold {
  color: #ce2610;
  background-color: transparent;
}
.vplus-status-suspended {
  color: #c99212;
  background-color: transparent;
}
.vplus-status-sold-bidding {
  color: #4859db;
  background-color: transparent;
}
.vplus-status-sold-make-offer {
  color: #ebd62d;
  background-color: transparent;
}
.vplus-status-sold-buy-now {
  color: #902deb;
  background-color: transparent;
}

.vplus-badge .vplus-status-preview,
.vplus-badge .vplus-status-pending,
.vplus-badge .vplus-status-reconciled,
.vplus-badge .vplus-status-reconciliation,
.vplus-badge .vplus-status-withdrawn,
.vplus-badge .vplus-status-withdrawn-ended,
.vplus-badge .vplus-status-unsold,
.vplus-badge .vplus-status-suspended,
.vplus-badge .vplus-status-sold-bidding,
.vplus-badge .vplus-status-sold-make-offer,
.vplus-badge .vplus-status-sold-buy-now,
.vplus-status-filter-label .vplus-status-preview,
.vplus-status-filter-label .vplus-status-pending,
.vplus-status-filter-label .vplus-status-reconciled,
.vplus-status-filter-label .vplus-status-reconciliation,
.vplus-status-filter-label .vplus-status-withdrawn,
.vplus-status-filter-label .vplus-status-withdrawn-ended,
.vplus-status-filter-label .vplus-status-unsold,
.vplus-status-filter-label .vplus-status-suspended,
.vplus-status-filter-label .vplus-status-sold-bidding,
.vplus-status-filter-label .vplus-status-sold-make-offer,
.vplus-status-filter-label .vplus-status-sold-buy-now {
  background: transparent !important;
  background-color: transparent !important;
}

.vplus-sale-meta {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vplus-sale-meta #print {
  margin-left: auto;
}

.vplus-lot-status-badge[data-status-synced="1"] {
  cursor: pointer;
}

.vplus-lot-status-badge.is-status-menu-open,
.vplus-lot-status-badge.has-pending-status,
.vplus-experimental-visibility-toggle.has-pending-visibility {
  outline: 2px solid rgba(13, 110, 253, 0.3);
  outline-offset: 2px;
}

/* Duplicate Lot Number badge — BidLogix requires unique numbers within an auction,
   so highlight collisions in red the same way we outline queued status edits in blue. */
.vplus-lot-number.is-duplicate-number {
  outline: 2px solid #dc3545;
  outline-offset: 2px;
  cursor: help;
}

/* Highlight the entire row when its Lot Number collides — covers the case where
   the colliding lot is outside the user's current viewport. */
.vplus-list-item.has-duplicate-number {
  position: relative;
  border-left: 4px solid #dc3545;
  background: rgba(220, 53, 69, 0.04);
}

/* Sticky banner above the lot list listing duplicate-number collisions so the
   user can find and fix them. Sits between the filter panel and the list. */
.vplus-duplicate-number-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  margin: 0.75rem 0;
  border: 1px solid #dc3545;
  border-left-width: 4px;
  border-radius: 6px;
  background: #fff4f4;
  color: #842029;
}

.vplus-duplicate-number-banner .vplus-duplicate-number-banner-icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1.4;
  color: #dc3545;
}

.vplus-duplicate-number-banner .vplus-duplicate-number-banner-body {
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.45;
}

.vplus-duplicate-number-banner .vplus-duplicate-number-banner-body strong {
  display: block;
  margin-bottom: 0.15rem;
}

.vplus-duplicate-number-banner .vplus-duplicate-number-group {
  display: block;
  margin-top: 0.35rem;
}

.vplus-duplicate-number-banner .vplus-duplicate-number-group-label {
  font-weight: 600;
  color: #dc3545;
  margin-right: 0.35rem;
}

.vplus-duplicate-number-banner a.vplus-duplicate-jump {
  color: #842029;
  text-decoration: underline;
  cursor: pointer;
}

.vplus-duplicate-number-banner a.vplus-duplicate-jump:hover {
  color: #58151c;
}

/* Missing Lot Number — show the badge with an em-dash placeholder and a softer
   outline so the user knows the badge is clickable to set a number. */
.vplus-lot-number.is-missing-number {
  outline: 1px dashed rgba(108, 117, 125, 0.6);
  outline-offset: 2px;
  opacity: 0.85;
}

.vplus-lot-number.is-missing-number .vplus-lot-meta-badge-value {
  font-style: italic;
  opacity: 0.7;
}

/* Sequencing target — after a Transfer/Duplicate, the badge of the first lot in
   the queue gets this orange pulse to nudge the user to set its number, which
   then cascades sequentially to the rest of the queue. */
@keyframes vplus-lot-number-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.55);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(253, 126, 20, 0);
  }
}

.vplus-lot-number.is-sequencing-target {
  outline: 2px solid #fd7e14;
  outline-offset: 2px;
  animation: vplus-lot-number-pulse 1.5s ease-in-out infinite;
  cursor: pointer;
}

.vplus-dashboard-status-menu,
.vplus-experimental-status-menu {
  display: block;
  min-width: 9rem;
  margin-top: 0.25rem;
  z-index: 1060;
}

.vplus-dashboard-status-sync-btn,
.vplus-experimental-status-sync-btn {
  margin-left: 0.35rem;
  vertical-align: middle;
}

.vplus-experimental-visibility-toggle {
  padding: 0.1rem 0.25rem;
  color: inherit;
  line-height: 1;
  vertical-align: middle;
}

.vplus-experimental-visibility-toggle:hover,
.vplus-experimental-visibility-toggle:focus {
  color: #0d6efd;
}

.vplus-express-mode .form-row-separator {
  display: none;
}

/* Speed Lotting (a narrowed Express) — strip the chrome that only makes sense
   on a full-length form. Done in CSS rather than .hide() so nothing has to be
   restored on the way out: removing .vplus-speed-mode hands both elements back
   to their own logic (the checklist in particular owns a `hidden` attribute
   that a jQuery .show() would override). */
.vplus-speed-mode .vplus-sync-options-row,
.vplus-speed-mode #vplus-required-checklist,
.vplus-speed-mode .form-row-separator,
.vplus-speed-mode .vplus-express-group-caption {
  display: none !important;
}

/* Same principle, applied to the FIELD ROWS. Speed Lotting used to hide these
   with .hide(), which writes an inline display:none — and the Express
   conditional-logic cascades (VP_TypeInteraction's "Lot" branch) unconditionally
   .show() the pricing rows. VP_NextLotEffect re-fires that cascade through its
   select .trigger("change") sweep, so after "Sync & Create Another Item" the
   Purchase Option, Opening Bid, Bid Increment, Reserve and Quantity rows all
   reappeared inside the Speed card. A class-keyed rule outranks the inline
   style, so the cascade can no longer win.
   Double-scoped (.vplus-speed-mode AND the class) so a stale marker left on a
   row can never hide it once the operator is back in Express or Full. */
.vplus-speed-mode .vplus-speed-hidden-row {
  display: none !important;
}

/* ── Speed Lotting card ───────────────────────────────────────────────────
   Speed reuses #vplus-card--express's markup, so it inherits Express's orange
   frame and header. These rules give it its own identity — dark blue, matching
   the toggle button below — without forking the template. Keyed on the form's
   .vplus-speed-mode class so the card reverts the moment the mode changes. */
.vplus-speed-mode #vplus-card--express {
  --bs-card-border-color: rgba(30, 58, 95, 0.55);
  box-shadow:
    0 0 0 2px rgba(30, 58, 95, 0.4),
    0 0 0 4px rgba(30, 58, 95, 0.18);
}

.vplus-speed-mode .vplus-express-card-header {
  background: linear-gradient(135deg, #2c5282, #1a365d);
  color: #fff;
  border-bottom-color: #0f2540;
}

.vplus-speed-mode .vplus-express-card-header i {
  color: #fff;
}

/* One icon per mode. Default state (any mode but Speed) shows the Express bolt;
   the rabbit only appears under .vplus-speed-mode. */
.vplus-speed-mode-icon {
  display: none;
}

.vplus-speed-mode .vplus-speed-mode-icon {
  display: inline-block;
}

.vplus-speed-mode .vplus-express-mode-icon {
  display: none;
}

/* D2 carried into the header: Templates and Customise both act on the Express
   field set, which Speed deliberately narrows to three fields — so neither has
   anything meaningful to operate on here. The "Or" separator between them goes
   too, or it is left stranded. */
.vplus-speed-mode .vplus-express-templates-btn,
.vplus-speed-mode .vplus-express-customise-btn,
.vplus-speed-mode .vplus-express-btn-or {
  display: none !important;
}

/* The header label swaps to name the active mode. Each mode's string lives in
   its own <span> so the ACCESSIBLE NAME changes with the visual one — a
   font-size:0 + ::after swap would leave a screen reader announcing
   "Express Mode" while the header reads "Speed Lotting". */
.vplus-speed-mode-label {
  display: none;
}

.vplus-speed-mode .vplus-speed-mode-label {
  display: inline;
}

.vplus-speed-mode .vplus-express-mode-label {
  display: none;
}

.card {
  transition:
    box-shadow 0.3s ease-in,
    border-color 0.3s ease-in;
}

/* R2-P2: Orange border + glow is the EXPRESS card's identity — scope it to the
   Express card ITSELF (#vplus-card--express), not `.vplus-express-form .card`.
   The old descendant selector also matched the Full-mode section cards (which are
   nested inside .vplus-express-form), bleeding Express's orange onto Full mode. */
#vplus-card--express {
  --bs-card-border-color: rgb(255, 69, 0, 0.5);
  box-shadow:
    0 0 0 2px rgba(255, 165, 0, 0.5),
    0 0 0 4px rgba(255, 165, 0, 0.25);
}

/* Full Mode section cards — bespoke calm identity (neutral translucent border +
   soft drop shadow), distinct from Express's orange. Matches the restrained P1
   header direction; the per-section colour lives on the header accent, not the
   card frame. */
.vplus-full-mode-cards .card {
  --bs-card-border-color: var(
    --bs-border-color-translucent,
    rgba(0, 0, 0, 0.12)
  );
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-check:checked + .btn {
  font-weight: var(--vplus-font-weight-normal);
}

/* Express Mode toggle button - orange styling */
.btn-check:checked + .btn[for="vplus-lot-mode-express"],
.btn-check:checked + .btn[for="vplus-sale-mode-express"] {
  background: linear-gradient(45deg, #ff4500, #ffa500);
  color: #fff;
  border-color: rgba(172, 43, 11, 1);
  text-shadow: 1px 1px 2px rgba(172, 43, 11, 1);
  box-shadow:
    inset 0 0 0 2px rgba(172, 43, 11, 0.25),
    inset 0 0 0 4px rgba(255, 69, 0, 0.25);
}
.btn[for="vplus-lot-mode-express"]:hover,
.btn[for="vplus-sale-mode-express"]:hover {
  background: linear-gradient(45deg, #ff4500, #ffa500);
  color: #fff;
  border-color: rgba(172, 43, 11, 1);
}

/* Speed Lotting toggle button — dark blue with a black border, matching the
   Speed card header. Express and Full both style :checked AND :hover; Speed had
   neither, so it was the only mode with no border and no hover feedback. */
.btn-check:checked + .btn[for="vplus-lot-mode-speed"],
.btn-check:checked + .btn[for="vplus-sale-mode-speed"] {
  background: linear-gradient(135deg, #2c5282, #1a365d);
  color: #fff;
  border-color: #000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 0 0 2px rgba(44, 82, 130, 0.3),
    inset 0 0 0 4px rgba(26, 54, 93, 0.3);
}
/* NB: the unchecked resting border and the hover live AFTER
   `.vplus-form-mode-toggle .btn-group .btn { border-color: revert }` further
   down this file — `revert` rolls the border back to Bootstrap's
   .btn-outline-dark (#212529) and, being later in source order, beats any rule
   placed here regardless of specificity. Verified in-browser. */

/* Full Mode toggle button - dark styling */
.btn-check:checked + .btn[for="vplus-lot-mode-full"],
.btn-check:checked + .btn[for="vplus-sale-mode-full"] {
  background: linear-gradient(135deg, #4a5568, #1a202c);
  color: #fff;
  border-color: #1a202c;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:
    inset 0 0 0 2px rgba(74, 85, 104, 0.25),
    inset 0 0 0 4px rgba(26, 32, 44, 0.25);
}

hr.dashed {
  border-style: dashed;
  margin: 0;
}

.card-body .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.card-body .ql-editor {
  padding: 1rem 0;
}
/* The submission description editor sits inside a .card-body, so the rule above
   strips its horizontal padding and the text runs flush to the field edges.
   Restore left/right breathing room for this editor specifically (matches the
   vertical 1rem above; higher specificity wins without !important). */
.card-body .vplus-submission-description-editor .ql-editor,
.vplus-submission-description-editor .ql-editor {
  padding-left: 1rem;
  padding-right: 1rem;
}
.card-body .ql-container {
  font-family: var(--vplus-font-family-base);
  font-size: 1rem;
}
.card-body .ql-container *:not(strong) {
  font-weight: var(--vplus-font-weight-normal);
}
.card-body .ql-container.ql-snow {
  border: 0;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  z-index: 100;
}

.form-row .btn-group .btn {
  padding: 0.75rem 1rem;
  border-color: #ccc;
}
.form-row .btn-group .btn .vplus-po-sublabel,
.form-row .btn-group .btn .vplus-type-sublabel {
  font-size: 0.7rem;
  line-height: 1.2;
  margin-top: 0.15rem;
  opacity: 0.7;
  color: var(--bs-secondary-color);
}
.form-row .btn-group .btn-check:checked + .btn .vplus-po-sublabel,
.form-row .btn-group .btn-check:checked + .btn .vplus-type-sublabel {
  color: inherit;
  opacity: 0.85;
}

/* P2 (3.3): Item Type / Purchase Option segmented controls cramp in the tablet
   band (768–991px) — four two-line buttons squeezed onto one row make the
   sublabels unreadable. Below lg, drop btn-group's nowrap-overlap model and lay
   the buttons out as a wrapping flex grid (≥2-up). Each button becomes an
   independent rounded control (btn-group's shared-edge radius resets no longer
   apply once wrapped), so restore full radii and normal borders. ≤767px already
   stacks to one column via the mobile rule, and ≥992px keeps the original
   4-across desktop look — this rule only spans the awkward middle. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .vplus-segmented-wrap.btn-group {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .vplus-segmented-wrap.btn-group > .btn {
    /* Two per row: half the container minus half the single gap between them. */
    flex: 1 1 calc(50% - 0.25rem);
    border-radius: var(--bs-btn-border-radius, 0.375rem) !important;
    /* btn-group overlaps borders with a -1px left margin; the gap replaces that,
       so clear it or the first button in each wrapped row is nudged. */
    margin-left: 0;
  }
}
/* Preserve Express/Full mode toggle custom gradients */
.vplus-form-mode-toggle .btn-group .btn {
  padding: 0.5rem 1.5rem;
  border-color: revert;
}

/* Speed Lotting's resting border + hover. MUST come after the `border-color:
   revert` above: revert rolls the border back to Bootstrap's .btn-outline-dark
   and wins on source order otherwise (specificity alone is not enough — a
   3-class selector placed earlier still loses). Matched to the same 3-class
   weight so the two rules are decided by order, not by an arms race. */
.vplus-form-mode-toggle .btn-group .btn[for="vplus-lot-mode-speed"],
.vplus-form-mode-toggle .btn-group .btn[for="vplus-sale-mode-speed"] {
  border-color: #000;
}

.vplus-form-mode-toggle .btn-group .btn[for="vplus-lot-mode-speed"]:hover,
.vplus-form-mode-toggle .btn-group .btn[for="vplus-sale-mode-speed"]:hover {
  background: linear-gradient(135deg, #2c5282, #1a365d);
  color: #fff;
  border-color: #000;
}

/* ── Mode toggle: .btn-toolbar with two real button groups ────────────────
   Three full labels need ~440px on one row at 16px type; a 402px phone offers
   378px. Bootstrap 5.3's .btn-group cannot wrap (it documents one line, or
   .btn-group-vertical — nothing else), and forcing it to with display:grid
   fought its :first-child/:last-child radius and negative-margin rules.

   The documented answer is .btn-toolbar, which exists to "combine sets of
   button groups". The markup is now:
     .btn-toolbar
       .btn-group  [ Speed Lotting | Express Mode ]   <- joined, 0 gap
       .btn-group  [ Full Mode ]                      <- joined, own group
   Each group keeps GENUINE btn-group styling, so there is no gap between its
   members and the outer radius is shared. The toolbar is flex-wrap:wrap, so
   Full Mode simply wraps to its own row when it cannot fit.

   Desktop: the two groups butt together and read as one control.
   Mobile:  Full Mode wraps to a full-width row beneath the pair.

   🔴 BREAKPOINT: must cover every phone. An earlier cut used 399.98px and an
   iPhone 16 Pro (402 CSS px = 1206 device px at DPR 3) missed it by TWO pixels,
   overflowing the row and sidescrolling the page. Phones run 390/402/412/430/
   440, so the cutoff sits at the Bootstrap sm boundary (575.98px). */
.vplus-form-mode-toolbar {
  /* .btn-toolbar is display:flex; justify-content:flex-start. Centre it to match
     the toggle's text-align:center, which the old single group inherited. */
  justify-content: center;
  /* 🔴 NOT the default `stretch`. The collapsed Full Mode group is max-width:0 +
     overflow:hidden, so its button is squeezed to zero width — and with
     white-space:normal the label wraps to ~4 lines, giving that hidden button an
     88px intrinsic height. Under `stretch` that height is imposed on the VISIBLE
     Speed/Express buttons, which is why they rendered ~90px tall in Speed mode.
     flex-start lets each group keep its own height. */
  align-items: flex-start;
}

/* Belt and braces for the same defect: keep the collapsing label on one line at
   every width, so zero available width can never make it wrap. (The mobile
   block sets nowrap too, but only below 576px — this bug was desktop/tablet.) */
.vplus-form-mode-toolbar .vplus-form-mode-group--full > .btn {
  white-space: nowrap;
}

/* Desktop: butt the two groups together so they read as ONE control — cancel
   the second group's leading edge radius and overlap the 1px border, exactly
   what btn-group does between its own members. */
@media (min-width: 576px) {
  .vplus-form-mode-toolbar .vplus-form-mode-group--full {
    margin-left: -1px;
  }

  /* !important on both: Bootstrap's `.btn-group > .btn:first-child` /
     `:last-child` radius rules are more specific than these, so without it the
     Full Mode button keeps its rounded LEFT corners and the two groups read as
     two pills butted together rather than one control. */
  .vplus-form-mode-toolbar .vplus-form-mode-group--primary > .btn:last-of-type {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .vplus-form-mode-toolbar .vplus-form-mode-group--full > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

@media (max-width: 575.98px) {
  /* Wrap Full Mode onto its own row. The primary pair keeps its natural
     btn-group behaviour — no grid, no radius overrides, no gap between Speed
     and Express, because it is still a real single-line button group. */
  .vplus-form-mode-toolbar {
    flex-wrap: wrap;
    /* No row-gap: the wrapped Full Mode row butts directly against the pair
       above, overlapping their shared 1px border exactly as btn-group does
       between its own members. A gap here would leave the group reading as two
       detached controls. */
    row-gap: 0;
  }

  .vplus-form-mode-toolbar .vplus-form-mode-group--primary {
    /* Fill the row so the two members split it evenly. */
    width: 100%;
  }

  .vplus-form-mode-toolbar .vplus-form-mode-group--primary > .btn {
    /* Equal halves regardless of label length. */
    flex: 1 1 0;
  }

  /* Full Mode: its own full-width row beneath the pair. The 14rem collapse cap
     is scoped to ≥576px, so nothing constrains it here. */
  .vplus-form-mode-toolbar .vplus-form-mode-group--full {
    width: 100%;
    /* Overlap the pair's bottom border, the vertical equivalent of btn-group's
       -1px between horizontal members — one shared edge, not two stacked. */
    margin-top: -1px;
  }

  .vplus-form-mode-toolbar .vplus-form-mode-group--full > .btn {
    width: 100%;
    /* The collapse cap belongs to the GROUP, never the button — an inherited or
       stale cap here pins the wrapped row to 14rem inside a full-width toolbar,
       which reads as "Full Mode isn't going full width" plus a gap on the right. */
    max-width: none;
    /* Bottom row of a stacked group: square the TOP corners so it butts against
       the pair above, round only the BOTTOM pair. !important beats Bootstrap's
       :first-child/:last-child radius rules (this button is both). */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
  }

  /* The pair above is the TOP row of a stacked group: square its bottom corners
     so the shared edge with Full Mode is flat.
     ⚠ Only while Full Mode is actually SHOWN — in Speed mode its group is
     collapsed and the pair is the whole control, so it must keep all four
     rounded corners. :has() scopes this to the visible case. */
  .vplus-form-mode-toolbar:has(
      .vplus-form-mode-group--full:not(.vplus-mode-btn-hidden)
    )
    .vplus-form-mode-group--primary
    > .btn:first-of-type {
    border-bottom-left-radius: 0 !important;
  }

  .vplus-form-mode-toolbar:has(
      .vplus-form-mode-group--full:not(.vplus-mode-btn-hidden)
    )
    .vplus-form-mode-group--primary
    > .btn:last-of-type {
    border-bottom-right-radius: 0 !important;
  }

  .vplus-form-mode-toggle .btn-group > .btn {
    /* Roomier than the desktop 0.5rem/1.5rem: vertical padding buys the tap
       target (46px measured), horizontal can be tight because the group's
       width is what sets the button width. */
    padding: 0.625rem 0.5rem;
    font-size: 1rem;
    white-space: nowrap;
    min-width: 0;
  }
}

/* ── Full Mode button: animated show/hide ─────────────────────────────────
   Speed Lotting hides Full Mode (D3). Toggling .d-none made it pop in and out,
   which is jarring mid-form. Animate width/opacity/transform instead so the
   group re-flows smoothly.
   .d-none is Bootstrap's `display:none !important`, so it cannot be
   transitioned — the JS now toggles .vplus-mode-btn-hidden, which keeps the
   button in layout (display intact) and collapses it geometrically.
   max-width rather than width: the button is auto-sized, and a fixed width
   would break as soon as a translation makes the label longer. */
/* The whole GROUP collapses now, not the label — Full Mode is its own
   .btn-group inside the toolbar. Collapsing the group is what removes the
   wrapped row entirely rather than leaving an empty one behind.
   ⚠ The 14rem cap is scoped to ≥576px ON PURPOSE. When it was unscoped, it
   also applied on mobile and pinned the wrapped row to 224px inside a 378px
   toolbar — the "Full Mode isn't going full width" symptom, with the leftover
   space reading as a gap. A max-width:none override in the mobile block could
   not fix it: this rule sits LATER in the file and wins on source order. */
@media (min-width: 576px) {
  .vplus-form-mode-toolbar .vplus-form-mode-group--full {
    max-width: 14rem;
  }
}

.vplus-form-mode-toolbar .vplus-form-mode-group--full {
  overflow: hidden;
  transition:
    max-width 0.28s ease,
    opacity 0.2s ease,
    transform 0.28s ease;
}

.vplus-form-mode-toolbar .vplus-form-mode-group--full.vplus-mode-btn-hidden {
  max-width: 0;
  opacity: 0;
  transform: scaleX(0.85);
  pointer-events: none;
}

/* On phones Full Mode is a wrapped full-width ROW, so it has to collapse
   VERTICALLY — a max-width collapse would leave a full-height empty row. */
@media (max-width: 575.98px) {
  .vplus-form-mode-toolbar .vplus-form-mode-group--full {
    max-height: 5rem;
    transition:
      max-height 0.28s ease,
      opacity 0.2s ease,
      margin 0.28s ease,
      transform 0.28s ease;
  }

  .vplus-form-mode-toolbar .vplus-form-mode-group--full.vplus-mode-btn-hidden {
    max-width: none;
    max-height: 0;
    /* The visible state already sits at margin-top:-1px to overlap the pair's
       border; keep exactly that when collapsed. (The toolbar's row-gap is 0 now,
       so there is no extra gap left to cancel.) */
    margin-top: -1px;
    transform: scaleY(0.85);
  }
}

/* Respect a reduced-motion preference: still hide, just without the movement. */
@media (prefers-reduced-motion: reduce) {
  .vplus-form-mode-toolbar .vplus-form-mode-group--full {
    transition: none;
  }
}

/* Desktop only: when Full Mode's group is collapsed, the primary group is
   visually last, so its trailing corners must be rounded again (they are
   squared above to butt against Full Mode). Scoped to ≥576px because on mobile
   each group already owns full radii on its own row. */
@media (min-width: 576px) {
  .vplus-form-mode-toolbar
    .vplus-form-mode-group--full.vplus-mode-btn-hidden
    ~ .vplus-form-mode-group--primary
    > .btn:last-of-type,
  .vplus-form-mode-toolbar:has(
      .vplus-form-mode-group--full.vplus-mode-btn-hidden
    )
    .vplus-form-mode-group--primary
    > .btn:last-of-type {
    /* !important to match the squaring rule above — without it the pair keeps
       square right corners in Speed mode, where it is the entire control. */
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
  }
}

/* ── Speed Lotting stepped card (P7) ──────────────────────────────────────
   1-2-3 flow modelled on the Photo App's Sale→Lot→Upload selects and the AI
   card's numbered steps. The AI card's own step rules are scoped to
   #vplus-card--ai, so these are parallel definitions rather than a shared
   base — deliberately, so a future #vplus-card--ai pass can move without
   dragging this card with it. */
.vplus-speed-lotting-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.vplus-speed-session-count {
  background: #198754;
  color: #fff;
  white-space: nowrap;
}

.vplus-speed-step {
  position: relative;
  padding: 0 0 22px 46px;
}

/* The step is a scroll/focus anchor (tabindex="-1") — focusing it after a sync
   would otherwise draw the browser's focus ring around the whole step. */
.vplus-speed-step:focus,
.vplus-speed-step:focus-visible {
  outline: none;
}

/* Connector line between steps. */
.vplus-speed-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: -2px;
  width: 2px;
  background: #eceff3;
}

.vplus-speed-step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Speed Lotting's dark blue, matching the mode button and card header —
     the AI card's amber is its own identity and shouldn't leak here. */
  background: #2c5282;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(44, 82, 130, 0.35);
}

/* A completed step reads as done rather than numbered. */
.vplus-speed-step.is-complete .vplus-speed-step-num {
  background: #198754;
  box-shadow: 0 2px 6px rgba(25, 135, 84, 0.35);
}

/* Steps 2 and 3 before an auction is chosen: legible, but visibly not yet
   actionable (the Photo App precedent — its Step 2 select ships disabled). */
.vplus-speed-step.is-pending .vplus-speed-step-num {
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-secondary-color, #6c757d);
  box-shadow: none;
}

.vplus-speed-step.is-pending .vplus-speed-step-title {
  opacity: 0.65;
}

.vplus-speed-step-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #495057;
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.vplus-dark-mode .vplus-speed-step-title {
  color: #adb5bd;
}

body.vplus-dark-mode .vplus-speed-step:not(:last-child)::before {
  background: rgba(255, 255, 255, 0.12);
}

/* The auction select needs room for long auction names; the button and the
   Item List link sit beside it and keep their natural width. */
.vplus-speed-lotting-field {
  flex: 1 1 16rem;
  min-width: 0;
}

/* With JS, choosing an auction navigates on its own — the submit button is
   redundant, so the script stamps .vplus-speed-has-js and it disappears. The
   markup stays for the no-JS case, where the <select> would otherwise be a
   dead end. */
.vplus-speed-lotting-form.vplus-speed-has-js .vplus-speed-lotting-go {
  display: none;
}

/* Auction rows in the searchable-select dropdown: name + Type (+ Auctioneer
   when the list spans more than one). Lets near-identical auction titles be
   told apart at a glance. */
.vplus-ss-auction-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* Name + Type are one group so the Type badge sits directly AGAINST the title.
   The group takes the free space (and truncates); the auctioneer badge is the
   only thing that trails to the right. */
.vplus-ss-auction-lead {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* The name is the only shrinkable part, so a long auction title ellipsises and
   the badges are never what gets clipped. */
.vplus-ss-auction-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badges reuse .vplus-badge/.vplus-badge-secondary wholesale (the auctions
   panel's construction) — only the dropdown-specific sizing is set here, so
   any future restyle of .vplus-badge carries across automatically. */
.vplus-ss-auction-row .vplus-badge {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.6875rem;
}

/* The dropdown row is the only place badges belong: the collapsed trigger
   truncates with an ellipsis, and badges there fight it for space. */
.vplus-ss-trigger .vplus-badge {
  display: none;
}

/* Auction swap in progress (P8.3): dim and lock the form while the replacement
   fragment is fetched, so the operator can't type into markup that is about to
   be replaced. */
.vplus-speed-step.is-loading .vplus-speed-step-form {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.vplus-speed-step.is-loading .vplus-speed-step-title::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vplus-speed-spin 0.7s linear infinite;
  vertical-align: -0.1em;
}

@keyframes vplus-speed-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vplus-speed-step.is-loading .vplus-speed-step-title::after {
    animation: none;
  }
}

/* Mobile & tablet portrait (≤991px): drop the 46px left spine rail and switch to
   full-width steps separated by horizontal dividers, matching #vplus-card--ai.
   The spine costs 46px of every row, which on a phone squeezed the embedded lot
   form — the widest content in the card — into a thin, cramped column. Same DOM
   serves both layouts; only the step chrome changes. */
@media (max-width: 991.98px) {
  /* Lay the step out as a flex-wrap column of full-width rows: the number chip
     sits centred on its own row at the top, straddling the divider that
     separates it from the step above; title and body follow as their own rows.
     No absolute rail, so left/right padding is symmetric and the form gets the
     full card width. */
  .vplus-speed-step {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-top: 1px solid #eceff3;
    padding: 30px 0 16px 0;
    margin-top: 10px;
  }

  /* The connector line belongs to the spine layout only. */
  .vplus-speed-step:not(:last-child)::before {
    display: none;
  }

  /* Keep the chip's circle EXACTLY as it is on desktop (fixed 30px, filled,
     shadowed) — it must not stretch to the flex row. It sits alone on the first
     line because the rows below are flex-basis:100%, and the step's
     justify-content centres the fixed-width circle. The negative top margin
     lifts it by half its height so it straddles the divider above, reading as a
     badge ON the line rather than pushing content down. */
  .vplus-speed-step-num {
    position: static;
    width: 30px;
    height: 30px;
    font-size: 15px;
    flex: 0 0 auto;
    margin: -45px 0 12px;
  }

  /* Title on its own centred full-width row under the chip. */
  .vplus-speed-step-title {
    margin: 0 0 6px;
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }

  /* Every OTHER direct child — crucially .vplus-speed-step-form, which hosts the
     entire lot form — drops to its own full-width row beneath chip + title. */
  .vplus-speed-step > :not(.vplus-speed-step-num):not(.vplus-speed-step-title) {
    flex: 1 1 100%;
  }

  body.vplus-dark-mode .vplus-speed-step {
    border-top-color: rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 575.98px) {
  /* Stack the auction row so the select and both actions get full width. */
  .vplus-speed-lotting-row > .btn,
  .vplus-speed-lotting-field {
    flex: 1 1 100%;
  }
}

/* P3 (3.5): Express-mode group captions. Replaces the bare <hr> dividers that
   used to separate the Pricing and Classification clusters with a labelled
   caption, matching the captioned Buyer's Premium / Videos / Location sections
   already present lower in the form. Keeps the visual break (subtle top rule +
   spacing) while naming what the cluster is. */
.vplus-express-group-caption {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  /* Gap below the caption before its field rows, matching the sibling captioned
     sections' mb-2 (the caption is a standalone row here, so the space can't come
     from an mb-2 on a shared wrapper). */
  margin-bottom: 0.5rem;
}

.form-control.disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}

.floating-buttons:has(#vplus-prev-lot.hidden).floating-buttons:has(
    #vplus-sync-photos.hidden
  ).floating-buttons:has(#vplus-next-lot.hidden) {
  display: none;
}
.floating-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 1rem 0;
}

#vplus-next-lot {
  margin-left: auto;
}
#vplus-sync-photos {
  margin-left: auto;
  margin-right: auto;
}
/* 
#vplus-photo-files:not(:has(.vplus-file-container)):before {
  content: "No photos uploaded";
} */

.table-responsive.card > .table {
  margin-bottom: 0;
}

.nav-tabs:has(+ .card) {
  border-bottom: 0;
}
.nav-tabs:has(+ .card) .nav-link {
  border: 1px solid #ddd;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
}
.nav-tabs:has(+ .card) .nav-link.active {
  border-bottom-color: #fff;
  color: var(--bs-primary);
}
.nav-tabs:has(+ .card) .nav-link:not(.active) {
  background: rgba(255, 255, 255, 0.25);
  color: #a1a1a1;
}

.nav-tabs .nav-link {
  font-weight: bold;
}
.nav-tabs + .card:has(.tab-content) {
  border-bottom: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card-body > .tab-content {
  padding: 0;
  border: 0;
}

.vplus-column--lot-name {
  margin-bottom: 0.5rem;
  flex-basis: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
}
.vplus-column--lot-name strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vplus-column--lot-number {
  font-size: 0.85rem;
  padding-right: 0;
  display: flex;
  flex-basis: 100%;
  align-items: center;
}
.vplus-column--lot-number .fa-hashtag {
  font-size: 0.5rem;
  margin-right: 0.15rem;
}
.vplus-column--lot-info {
  flex-grow: 1;
}
.vplus-column--lot-info > div {
  flex-wrap: wrap;
}
.chlength-1 {
  max-width: 1.5rem;
}
.chlength-2 {
  max-width: 3rem;
}
.chlength-3 {
  max-width: 2.5rem;
}
.chlength-4 {
  max-width: 3rem;
}
.vplus-column--final-bid {
  min-width: 50%;
  text-align: right;
  font-weight: bold;
}
.vplus-column--lot-status {
  flex-basis: 90px;
  font-size: 0.825rem;
  text-align: right;
  margin-left: auto;
}
.vplus-column--lot-status > span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: rgba(0, 0, 0, 0.05);
  font-weight: 500;
  line-height: 1;
}
.vplus-column--lot-status > span .fa-circle {
  margin-right: 0.35rem;
  font-size: 0.6rem;
}
.vplus-column--reserve {
  flex-basis: 120px;
  font-size: 0.825rem;
  text-align: right;
}
.vplus-column--reserve-not-met {
  color: var(--bs-danger);
  font-weight: bold;
}
.vplus-column--reserve-met {
  color: var(--bs-success);
  font-weight: bold;
}
.vplus-column--bids {
  flex-basis: 60px;
  display: flex;
  justify-content: flex-end;
}
.vplus-column--bids > * {
  font-size: 0.825rem;
}
.vplus-bidder-username {
  max-width: 160px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.vplus-btn-badge {
  border-radius: 10rem;
  padding: 0.125rem 0.5rem;
}
@media (min-width: 576px) {
  .vplus-column--lot-status {
    text-align: left;
  }
  .vplus-column--bids {
    min-width: 60px;
  }
  .vplus-column--reserve {
    min-width: 7rem;
  }
  .vplus-column--final-bid {
    min-width: 9rem;
  }
}
@media (min-width: 992px) {
  .vplus-column--lot-name {
    flex-basis: 100%;
  }
  .vplus-column--lot-status {
    margin-left: auto;
  }
}
@media (min-width: 1200px) {
  .vplus-column--lot-name {
    margin-bottom: 0;
    flex-basis: 40%;
    max-width: 40%;
  }
}

.vplus-btn-badge.btn-light {
  color: var(--bs-primary);
}
.vplus-btn-badge.btn-light:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.125);
}

.vplus-report-card .card-header {
  --bs-card-cap-bg: #fafafa;
  --bs-card-cap-color: #000;
  border-bottom: 1px solid var(--bs-border-color);
}
.vplus-report-card .card-header h2 {
  font-size: 1.5rem;
  font-weight: 500;
}

/* Lot Filters */
.vplus-lot-filters .form-label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.vplus-lot-filters .btn-group [data-sort] {
  font-size: 0.875rem;
  transition: all 0.2s ease;
}
.vplus-lot-filters .btn-group [data-sort].active {
  background-color: var(--bs-primary);
  color: white;
  border-color: var(--bs-primary);
}
.vplus-lot-filters .btn-group [data-sort]:not(.active):hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.vplus-lot-filters .btn-group [data-sort].active:hover {
  background-color: var(--bs-primary);
  color: white;
  opacity: 0.85;
}
.vplus-filter-results {
  padding-top: 0.5rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.875rem;
  font-weight: 500;
}

/*----------------- SNAPSHOT REPORT -----------------*/

.vplus-snapshot-header-info {
  align-content: space-between;
  height: 100%;
}
.vplus-snapshot-header-auction-info {
  font-size: 0.75rem;
}
.vplus-client-brand {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

.vplus-client-logo {
  width: 150px;
}
.vplus-powered-by-logo {
  width: 150px;
}
.vplus-snapshot-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vplus-snapshot-body > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 768px) {
  /* .vplus-client-brand {
    flex-direction: column;
  } */
  .vplus-snapshot-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
.vplus-snapshot-body-total {
  width: 100%;
  margin-bottom: 1rem;
}
.vplus-snapshot-body-total .vplus-icon-xl {
  flex-basis: 30%;
}

.font-xs {
  font-size: 0.75rem !important;
  line-height: 1.2;
}
.font-sm {
  font-size: 1.25rem !important;
  line-height: 1;
}
.font-md {
  font-size: 1.75rem !important;
  line-height: 1;
}
.font-lg {
  font-size: 2.5rem !important;
  line-height: 1;
}
.font-xl {
  font-size: 3rem !important;
  line-height: 1;
}
.vplus-icon-xl {
  font-size: 4rem;
}

.vplus-snapshot-label {
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.vplus-snaptshot-blocks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vplus-snaptshot-blocks-item {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  grid-template-columns: 1fr 2fr;
  padding: 0.5rem;
  overflow: hidden;
}
.vplus-snaptshot-blocks-item-content {
  padding: 0.5rem;
  padding-left: 0;
}
@media (min-width: 576px) {
  .vplus-snaptshot-blocks-item-image {
    height: 100%;
    object-fit: cover;
  }
}
.vplus-placeholder-image {
  opacity: 0.25;
  padding: 1rem;
}
.vplus-bidders-by-country .vplus-snaptshot-blocks-item,
.vplus-bidder-by-state .vplus-snaptshot-blocks-item,
.vplus-top-lots-with-most-bids .vplus-snaptshot-blocks-item {
  grid-template-columns: 1fr 5fr;
}
#vplus_bids_per_chart {
  max-width: 100%;
}
#vplus_report_charts .nav-tabs .nav-item button {
  width: 100%;
}
@media (max-width: 420px) {
  #vplus_report_charts .nav-tabs {
    display: flex;
    flex-direction: column;
  }
  #vplus_report_charts .nav-tabs .nav-link {
    border-bottom: 0;
    border-left-color: #eee;
    border-right-color: #eee;
  }
}

#vplus-copy-from-last {
  margin-bottom: 1rem;
  border-style: dashed;
  transition: all 0.2s ease;
}

#vplus-copy-from-last:hover {
  border-style: solid;
  background-color: #f8f9fa;
  color: #212529 !important;
}

#vplus-copy-from-last .fal {
  margin-right: 0.5rem;
}

/* Increment suggestion dropdown */
.vp-increment-suggestions {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s ease-out,
    opacity 0.3s ease-out,
    margin 0.3s ease-out;
  margin-top: 0;
}

.vp-increment-suggestions:not([style*="display: none"]) {
  max-height: 100px;
  opacity: 1;
  margin-top: 0.5rem;
}

.vp-increment-select,
.vp-reserve-select {
  cursor: pointer;
  transition: all 0.2s ease;
}

.vp-increment-select:hover,
.vp-reserve-select:hover {
  border-color: #0dcaf0;
  box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
}

.vp-increment-select:focus,
.vp-reserve-select:focus {
  border-color: #0dcaf0;
  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
}

/* Reserve calculator dropdown */
.vp-reserve-calculator {
  width: 100%;
  margin-top: 0.5rem;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .vp-increment-select,
  .vp-reserve-select {
    font-size: 0.875rem;
  }
}

.vplus-dev-info-tooltip {
  position: relative;
  display: inline-block;
}

.vplus-dev-info-tooltip .vplus-dev-tooltip-text {
  visibility: hidden;
  width: 280px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  margin-left: -140px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  text-transform: none;
}

.vplus-dev-info-tooltip .vplus-dev-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.vplus-dev-info-tooltip:hover .vplus-dev-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.dev-notice-badge {
  background-color: var(--bs-warning-bg);
  color: var(--bs-warning-text);
  border: 1px solid var(--bs-warning-border-subtle);
  font-weight: var(--vplus-font-weight-normal);
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.vplus-info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
}

.vplus-info-tooltip .fal,
.vplus-info-tooltip .fa-regular {
  cursor: help;
  font-size: 0.9rem;
  color: #6c757d;
}

.vplus-info-tooltip .vplus-tooltip-text {
  visibility: hidden;
  width: 280px;
  max-width: 280px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px 12px;
  position: absolute;
  z-index: 9999;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  text-transform: none;
  white-space: normal;
  word-wrap: break-word;
}

.vplus-info-tooltip .vplus-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.vplus-info-tooltip:hover .vplus-tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Input-group tooltip positioning fix */
.input-group .input-group-text .vplus-info-tooltip {
  margin-left: 0;
}
.input-group .input-group-text .vplus-info-tooltip .vplus-tooltip-text {
  left: 0;
  transform: translateX(0);
}
.input-group .input-group-text .vplus-info-tooltip .vplus-tooltip-text::after {
  left: 15px;
  margin-left: 0;
}

/* Auction Description field - appropriate height for desktop/tablet */
/* Using ID selector to override .form-floating>.form-control specificity */
#vplus-sale-description {
  min-height: 200px !important;
  height: 200px !important;
}

.vplus-lot-editor-shell.form-control,
.vplus-submission-editor-shell.form-control {
  height: auto !important;
  min-height: 8rem;
}

.form-floating > .vplus-lot-editor-shell.form-control,
.form-floating > .vplus-submission-editor-shell.form-control {
  height: auto !important;
  min-height: 8rem;
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > .vplus-lot-editor-shell.form-control .ql-container,
.form-floating > .vplus-submission-editor-shell.form-control .ql-container {
  min-height: 5.5rem;
}

@media (max-width: 767.98px) {
  #vplus-sale-description {
    min-height: 150px !important;
    height: 150px !important;
  }

  .vplus-lot-editor-shell.form-control,
  .form-floating > .vplus-lot-editor-shell.form-control,
  .vplus-submission-editor-shell.form-control,
  .form-floating > .vplus-submission-editor-shell.form-control {
    min-height: 10rem;
  }
}

/* Form card with styled header */
.vplus-form-card {
  overflow: hidden;
}
.vplus-card-header {
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.2s ease;
}
.vplus-card-header[data-bs-toggle="collapse"] {
  cursor: pointer;
}
.vplus-card-header i {
  font-size: 1rem;
  opacity: 0.9;
}
.vplus-card-header .vplus-collapse-icon {
  margin-left: auto;
  transition:
    transform 0.3s ease,
    background-color 0.2s ease;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  /* Webfont icon sizing - normalize for consistent rendering vs SVG */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.5rem;
  line-height: 1;
  font-size: 0.875rem; /* Slightly smaller for webfont icons to match SVG visual scale */
}
.vplus-card-header .vplus-collapse-icon:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.vplus-card-header .vplus-collapse-icon:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}
.vplus-card-header.collapsed .vplus-collapse-icon {
  transform: rotate(-90deg);
}

/* Card header color variations - Sale/Auction Form */
.vplus-card-header-1 {
  background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
} /* Navy - Title & Description */
.vplus-card-header-2 {
  background: linear-gradient(135deg, #4a6fa5 0%, #2c4a7c 100%);
} /* Neutral Blue - Type & Dates */
.vplus-card-header-3 {
  background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%);
} /* Green - Bidding Options */
.vplus-card-header-4 {
  background: linear-gradient(135deg, #a83232 0%, #6b1d1d 100%);
} /* Dark Red - Buyers Premium */
.vplus-card-header-5 {
  background: linear-gradient(135deg, #457b9d 0%, #1d3557 100%);
} /* Teal - Location */
.vplus-card-header-6 {
  background: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%);
} /* Charcoal - Inspection */
.vplus-card-header-7 {
  background: linear-gradient(135deg, #4a5568 0%, #1a202c 100%);
} /* Slate - Blank Lots */

/* Card header color variations - Lot Form (Full Mode)
   P1 restyle: neutral header + coloured LEFT ACCENT + tinted icon, replacing the
   six saturated full-fill gradients (which stacked into a ransom-note palette).
   Each section keeps its hue as wayfinding via --vplus-accent; the header itself
   is a quiet light band with dark text. Overrides for text/icon colour (the base
   .vplus-card-header is white-on-dark) live in the #vplus-full-mode-cards block
   below. */
#vplus-full-mode-cards .vplus-card-header {
  --vplus-accent: #4a5568;
  color: #1f2933;
  background: #f8f9fa;
  border-left: 4px solid var(--vplus-accent);
  border-bottom: 1px solid #e9ecef;
}
#vplus-full-mode-cards .vplus-card-header i {
  color: var(--vplus-accent);
  opacity: 1;
}
/* Collapse chevron: base uses white-on-dark rgba; recolour for the light band. */
#vplus-full-mode-cards .vplus-card-header .vplus-collapse-icon {
  color: var(--vplus-accent);
  background-color: rgba(0, 0, 0, 0.04);
}
#vplus-full-mode-cards .vplus-card-header .vplus-collapse-icon:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
#vplus-full-mode-cards .vplus-card-header .vplus-collapse-icon:focus {
  outline: 2px solid var(--vplus-accent);
}
/* Per-section accent. Scoped under #vplus-full-mode-cards so these match the
   specificity of the fallback `--vplus-accent` on `#vplus-full-mode-cards
   .vplus-card-header` above (both are ID+class); a plain `.vplus-card-header-lot-N`
   rule would LOSE to that ID-scoped fallback and every header would render slate.
   NB: the -lot-N number is NOT the card's position — the template assigns these
   classes out of sequence (Card 3 "Tax" uses -lot-4, Card 4 "Photos" uses -lot-3).
   The comment on each line names the section it actually styles; keep them paired
   with the markup in lot-form-body.php, not renumbered. */
#vplus-full-mode-cards .vplus-card-header-lot-1 {
  --vplus-accent: #2c5282;
} /* Blue - Lot Details */
#vplus-full-mode-cards .vplus-card-header-lot-2 {
  --vplus-accent: #2f855a;
} /* Green - Bidding & Pricing */
#vplus-full-mode-cards .vplus-card-header-lot-3 {
  --vplus-accent: #6b46c1;
} /* Purple - Photos */
#vplus-full-mode-cards .vplus-card-header-lot-4 {
  --vplus-accent: #b7791f;
} /* Amber - Tax & Fees */
#vplus-full-mode-cards .vplus-card-header-lot-5 {
  --vplus-accent: #c05621;
} /* Burnt orange - Videos (was red; red now reserved for warnings) */
#vplus-full-mode-cards .vplus-card-header-lot-6 {
  --vplus-accent: #2c7a7b;
} /* Teal - Location & Contact */
#vplus-full-mode-cards .vplus-card-header-lot-7 {
  --vplus-accent: #4a5568;
} /* Slate - More Options */
#vplus-full-mode-cards .vplus-card-header-lot-condition-report {
  --vplus-accent: #5a67d8;
} /* Indigo - Condition Report */
.vplus-card-header-ai {
  background: linear-gradient(135deg, #d69e2e 0%, #975a16 100%);
} /* Amber/Gold - AI */

/* ── AI card: numbered step flow (P3c) ───────────────────────────────────────
   Moved here from the INLINE <style> in
   vendorplus-auction-manager/templates/loop/partials/lot-form-body.php, where it
   was scoped `#vplus-card--ai …` and therefore unreachable from the consignment
   submission form. Re-scoped to `.vplus-ai-card`, a class BOTH cards now carry,
   so the two AI cards share one step treatment (Q1: unified).

   🔴 The AM template keeps its own `#vplus-card--ai` copies of the rules that
   are genuinely lot-form-only (the Lot Title / Web Search panel, .opt-tag, the
   split-view overrides). Only the step rail, the numbered chips, the titles and
   the disclaimer — the parts the submission card also needs — live here. ID
   selectors (1-0-0) still outrank these class rules (0-1-0), so where the AM
   template also styles a step, its version continues to win and the lot form
   renders unchanged. */

/* Compacted danger disclaimer (full text lives in the "Details" tooltip). */
.vplus-ai-card .vplus-ai-disclaimer {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
}
.vplus-ai-card .vplus-ai-disclaimer .vplus-ai-disclaimer-more {
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

/* Submit Consignment CSS */

#vplus-submission-ai-card > .vplus-card-header-ai > .vplus-ai-header-desc {
  display: none;
}

#vplus-submission-required-checklist {
  display: none;
}

.vplus-filter-panel {
  display: none;
}

/* The step panel is a Bootstrap .row, whose negative gutter margins escape the
   .card-body padding and let steps run to the card edge. Zero them so the
   card-body padding is what constrains the content, at every width. */
.vplus-ai-card .vplus-ai-form-panel {
  margin-left: 0;
  margin-right: 0;
  --bs-gutter-x: 0;
}

/* Numbered step rail with a faint connector line down the left. */
.vplus-ai-card .vplus-ai-step {
  position: relative;
  padding: 0 0 22px 46px;
}
/* Steps are scroll/focus anchors (tabindex="-1"): focusing one programmatically
   would otherwise draw a focus ring around the whole step. Not keyboard
   focusable, so suppressing the outline is safe. */
.vplus-ai-card .vplus-ai-step:focus,
.vplus-ai-card .vplus-ai-step:focus-visible {
  outline: none;
}
.vplus-ai-card .vplus-ai-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: -2px;
  width: 2px;
  background: #eceff3;
}
.vplus-ai-card .vplus-ai-step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffc107;
  color: #000;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(255, 193, 7, 0.35);
}
.vplus-ai-card .vplus-ai-step-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #495057;
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.vplus-dark-mode .vplus-ai-card .vplus-ai-step-title {
  color: #cdd2da;
}
body.vplus-dark-mode .vplus-ai-card .vplus-ai-step-title i {
  color: #8fb6ff;
}

/* Mobile & tablet portrait: drop the 46px left rail for full-width steps
   separated by horizontal dividers, with the number chip inline and centred,
   straddling the divider. Same DOM serves both layouts. */
@media (max-width: 991.98px) {
  .vplus-ai-card .vplus-ai-step {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-top: 1px solid #eceff3;
    padding: 30px 0 16px 0;
    margin-top: 10px;
  }
  .vplus-ai-card .vplus-ai-step::before {
    display: none;
  }
  .vplus-ai-card .vplus-ai-step-num {
    position: static;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    margin: -45px 0 12px;
  }
  .vplus-ai-card .vplus-ai-step-title {
    margin: 0 0 6px;
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }
  .vplus-ai-card
    .vplus-ai-step
    > :not(.vplus-ai-step-num):not(.vplus-ai-step-title) {
    flex: 1 1 100%;
  }
  .vplus-ai-card .vplus-ai-step .vplus-file-upload-field,
  .vplus-ai-card .vplus-ai-step .vplus-file-wrapper,
  .vplus-ai-card .vplus-consignment-prompt-grid {
    max-width: none;
  }
}
@media (min-width: 768px) {
  .vplus-ai-card .vplus-ai-step .vplus-file-wrapper {
    max-width: 90%;
  }
}

/* ── Required Fields checklist (OV-C) ─────────────────────────────────────────
   Moved here from the INLINE <style> in the AM lot form template so the
   consignment submission form (which runs the same shared engine,
   vendor-plus-required-checklist.js) gets the styling too. The Split-View
   relocation override stays in the AM template. Tabs preserved verbatim. */
/* ── P8: Required Fields Checklist ───────────────────────────────────────────
   A compact card listing the minimum required fields for the current Item Type +
   Purchase Options, each with a glowing ✗ that flips to a ✓ as it's satisfied.
   Rows are built at runtime to mirror the live [required]:visible:enabled set, so
   the list is always in step with the form's own submit gate. One node, relocated
   by JS between the AI card (Split) and the trailing form card (List/Express/Full). */
.vplus-required-checklist {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
  margin-top: 16px;
  /* Match the top gap so the checklist doesn't sit flush on #vplus-lot-actions
	   below it (List/Express/Full). Split View zeroes margin-top above and the
	   checklist is the AI card's last child there, so a bottom gap is harmless. */
  margin-bottom: 16px;
}
.vplus-required-checklist__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.vplus-required-checklist__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #495057;
}
.vplus-required-checklist__info {
  color: #98a2b3;
  cursor: pointer;
  font-size: 13px;
}
.vplus-required-checklist__count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  font-variant-numeric: tabular-nums;
}
.vplus-required-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
/* Each row is a button (click → scroll to the field, mode-aware). */
.vplus-required-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid #e4e7ec;
  background: #fff;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: #344054;
  transition:
    border-color 0.15s,
    background 0.15s;
  cursor: pointer;
}
.vplus-required-item:hover,
.vplus-required-item:focus-visible {
  border-color: #ffc107;
  background: #fffdf5;
  outline: none;
}
.vplus-required-item__icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}
.vplus-required-item__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Unsatisfied: red glowing ✗ (mirrors the amber photo-glow vocabulary, red hue). */
.vplus-required-item[data-vplus-required-state="todo"]
  .vplus-required-item__icon {
  color: #dc3545;
  border-radius: 50%;
  animation: vplus-required-glow 2s ease-in-out infinite;
}
/* Satisfied: solid green ✓, no glow. */
.vplus-required-item[data-vplus-required-state="done"]
  .vplus-required-item__icon {
  color: #198754;
}
.vplus-required-item[data-vplus-required-state="done"]
  .vplus-required-item__label {
  color: #667085;
}
/* Sync-readiness verdict, merged in from the retired #vplus-lot-status-message.
   Sits below the grid, separated by a hairline so it reads as the card's
   conclusion rather than another row. Same red/green vocabulary as the rows. */
.vplus-required-checklist__status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eceff3;
  font-size: 12.5px;
  line-height: 1.45;
}
.vplus-required-checklist__status-icon {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.45;
}
.vplus-required-checklist__status[data-vplus-status-state="blocked"] {
  color: #b42318;
}
.vplus-required-checklist__status[data-vplus-status-state="blocked"]
  .vplus-required-checklist__status-icon {
  color: #dc3545;
}
.vplus-required-checklist__status[data-vplus-status-state="ready"] {
  color: #23794f;
}
.vplus-required-checklist__status[data-vplus-status-state="ready"]
  .vplus-required-checklist__status-icon {
  color: #198754;
}
@keyframes vplus-required-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.28);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vplus-required-item[data-vplus-required-state="todo"]
    .vplus-required-item__icon {
    animation: none;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
  }
}
/* Transient highlight when the operator clicks a checklist row and we jump to the
   field — a short accent-gold pulse on the field's container so it's obvious which
   field we landed on. The class is added by scrollToField() and removed on
   animationend. Uses the same #ffc107 accent as the checklist hover. */
.vplus-field-flash {
  animation: vplus-field-flash 1.1s ease-out;
  border-radius: 6px;
}
@keyframes vplus-field-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.55);
  }
  30% {
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.45);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vplus-field-flash {
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.45);
  }
}

/* Submission-form checklist placement (OV-C / D-C1): sticky just above the
   viewport bottom so progress stays visible while scrolling the long form;
   single-column rows on phones. The AM lot form keeps its own JS relocation
   instead (Split/Express/Full), so this is scoped to the submission id. */
#vplus-submission-required-checklist {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}
@media (max-width: 575.98px) {
  #vplus-submission-required-checklist .vplus-required-grid {
    grid-template-columns: 1fr;
  }
}

/* AI card header layout */
#vplus-card--ai .vplus-card-header {
  flex-wrap: wrap;
}
#vplus-card--ai .vplus-card-header .form-check {
  padding-left: 0;
  margin-bottom: 0;
  gap: 0.5rem;
}
#vplus-card--ai .vplus-card-header .form-check-input {
  width: 2.75em;
  height: 1.4em;
  margin: 0;
  float: none;
  cursor: pointer;
  background-color: #dc3545;
  border-color: rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
#vplus-card--ai .vplus-card-header .vplus-badge {
  flex: 0 0 auto;
}
#vplus-card--ai .vplus-card-header .form-check-input:checked {
  background-color: #198754;
  border-color: rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
#vplus-card--ai .vplus-card-header .form-check-label {
  color: #fff;
  font-weight: 600;
}
#vplus-card--ai .vplus-card-header .vplus-ai-header-desc {
  flex-basis: 100%;
  font-size: 0.8rem;
  opacity: 0.85;
  font-weight: 400;
  margin-top: 0.25rem;
  color: #fff;
}

/* AI badge - inverted warning with glow */
@keyframes vplus-badge-glow {
  0%,
  100% {
    box-shadow: 0 0 4px rgba(102, 77, 3, 0.4);
  }
  50% {
    box-shadow:
      0 0 12px rgba(102, 77, 3, 0.7),
      0 0 20px rgba(102, 77, 3, 0.3);
  }
}
.vplus-badge-ai {
  background: #664d03;
  color: #fff;
  animation: vplus-badge-glow 2s ease-in-out infinite;
}
.vplus-badge-ai .fa {
  color: #fff;
}

/* Nav "AI" pill (Auction Manager). Reuses .vplus-badge-ai's pulse but in the
   brand red, since the gold-brown reads as a warning against the nav's own
   palette. .nav-link is already flex with an 8px gap, which spaces the pill —
   so no margin here; adding one double-spaced it to 14px. */
/* "AI" is all-caps with NO descenders, so the ~2px of descent space the font
   reserves below the baseline is empty — and .vplus-badge centres the LINE BOX,
   not the ink, which parks the glyphs ~7px high inside the pill. Measured on
   the live site: 0.88px above the caps vs 7.94px below.

   align-items:center does NOT fix this (the descent travels with the line box —
   measured 7.06px → 7.05px, i.e. no change). The fix is to cancel the descent
   with asymmetric vertical padding: the 0.10em difference below is half the
   font descent at this size. Measured result: 0.04px imbalance.

   `display:inline-block` (not flex) because padding only moves the ink when the
   box height comes from line-height rather than a fixed height. */
.vplus-nav-ai-pill {
  display: inline-block;
  min-width: 1.75em;
  padding: 0.3em 0.45em 0.2em;
  line-height: 1.3;
  text-align: center;
  font-size: 0.62em;
  letter-spacing: 0.06em;
  background: #b42318;
  animation-name: vplus-nav-ai-glow;
  vertical-align: middle;
}
@keyframes vplus-nav-ai-glow {
  0%,
  100% {
    box-shadow: 0 0 4px rgba(180, 35, 24, 0.45);
  }
  50% {
    box-shadow:
      0 0 12px rgba(180, 35, 24, 0.75),
      0 0 20px rgba(180, 35, 24, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vplus-nav-ai-pill {
    animation: none;
    box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.35);
  }
}

/* Compact Full Mode Blue Flag to match Express */
#blueflag-lookup-row .card-body {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
#blueflag-lookup-row h6,
#blueflag-lookup-row .fw-medium {
  font-size: 0.875rem;
  margin-bottom: 0;
}
#blueflag-lookup-row p.text-muted {
  display: none;
}

/* Condition Report Section Styling - Dark Wine Background */
/* P3 (3.6): Condition Report block. Was a DARK-RED gradient/border/icon that read
   as a warning or stray element beside the neutral field rows. Retheme to the
   CR's own INDIGO identity (its header icon is text-indigo; the CR template
   header accent is indigo, P1) — still a distinct, labelled grouped block (it's a
   template picker + Enable toggle, not a plain field), just no longer alarming.
   Same rule also skins the submission-form CR row, keeping the two consistent. */
#express-condition-report-row,
#full-condition-report-row,
#submission-condition-report-row {
  background: linear-gradient(
    135deg,
    rgba(90, 103, 216, 0.06) 0%,
    rgba(76, 81, 191, 0.1) 100%
  );
  border: 1px solid rgba(90, 103, 216, 0.18);
  border-radius: 0.5rem;
  padding: 1rem;
}
#express-condition-report-row .fa-clipboard-check,
#full-condition-report-row .fa-clipboard-check,
#submission-condition-report-row .fa-clipboard-check {
  color: #5a67d8 !important;
}
#express-condition-report-row .badge.bg-danger,
#full-condition-report-row .badge.bg-danger,
#submission-condition-report-row .badge.bg-danger {
  background-color: #4c51bf !important;
}
#express-condition-report-row .badge.bg-secondary,
#full-condition-report-row .badge.bg-secondary,
#submission-condition-report-row .badge.bg-secondary {
  background-color: rgba(76, 81, 191, 0.6) !important;
}
/* CR field grid vertical alignment */
#submission-condition-report-row > .row.g-2 {
  align-items: start;
}

/* ── Filter panel disclosure (P5.4 item list / P5.5 auctions list) ──────
   Progressive enhancement over the EXISTING filter forms — their fields,
   names and submit are unchanged; this only re-lays them out so search sits
   on row one and everything else collapses behind a "Filters" toggle.

   Lives in Core (not inline in a template) because BOTH panels use it:
   auction-manager's archive-lot.php and archive-sale-auctions-panel.php.

   `.is-enhanced` / `.is-open` are stamped SERVER-SIDE — adding them from JS
   on ready made the full-height panel paint first and visibly collapse. Each
   template carries a <noscript> that undoes them for the no-JS path. */
.vp-filter .vp-filter__more {
  display: none; /* only meaningful once JS can toggle it */
  white-space: nowrap;
}
.vp-filter.is-enhanced .vp-filter__more {
  display: inline-flex;
  align-items: center;
}
.vp-filter .vp-filter__count {
  min-width: 1.5em;
  justify-content: center;
}
.vp-filter.is-enhanced .vp-filter__adv-item {
  display: none;
}
.vp-filter.is-enhanced.is-open .vp-filter__adv-item {
  display: block;
}

/* Native date inputs need ~140px for dd/mm/yyyy plus the picker icon; at
   col-md-2/3 they clipped to "dd/mm/y" between 768 and 991px. */
.vp-filter input[type="date"] {
  min-width: 140px;
}

/* P1 — the submit lives in the search .input-group, flush against the field
   it applies to. */
.vp-filter .vp-filter__submit {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* P3 — search field: plain control + leading icon, replacing .form-floating.
   .form-floating has a fixed 58px min-height that cannot be made -sm, which is
   why the panel previously carried four different control heights on one row.

   The wrapper is a NON-direct child of .input-group, so Bootstrap's automatic
   radius joining doesn't reach the input. Flatten the inner edge by hand and
   let the wrapper flex like the .form-control it replaces. */
/* 🔴 Bootstrap sets `flex-wrap: wrap` on .input-group. Once the search column
   is tight (measured at 820px: group 95px wide), the Filter submit wrapped onto
   a SECOND line inside the group and landed on top of the Keyword/Lot Number
   switch — the overlapping-buttons bug on tablets.

   nowrap keeps field and submit on one line; the field shrinks instead (it has
   min-width:0 below). Scoped to this panel's group so no other .input-group in
   the suite changes behaviour. */
.vp-filter .vp-filter__search-col > .input-group {
  flex-wrap: nowrap;
}
.vp-filter .vp-filter__search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.vp-filter .vp-filter__search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 4; /* above .form-control, below a focused control's shadow */
}
/* P5.3b — the field is the LAST child of the input group now that the submit
   lives in the actions cluster, so its right corners round normally again.
   Only the LEFT pair is squared, where the scope select joins it. */
.vp-filter .vp-filter__search-input {
  width: 100%;
  padding-left: 1.9rem; /* clears the icon */
}

/* P1 — the disclosure toggle now sits in the ACTIONS row, so the actions row
   must stay visible while collapsed (individual maintenance buttons inside it
   are still hidden by class further down). Keep the toggle first in the
   reading order but visually last, next to Reset. */
.vp-filter.is-enhanced .vp-filter__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.vp-filter.is-enhanced .vp-filter__actions .vp-filter__more {
  order: -1; /* leads the actions cluster */
}
/* P5.3b — Apply leads the cluster, ahead of the Expand toggle.
   🔴 It must NEVER join the collapsed hide-list below (Reset / Refresh):
   hiding the only submit would make the panel unusable while collapsed. */
.vp-filter.is-enhanced .vp-filter__actions .vp-filter__submit {
  order: -2;
}

/* 🔴 The actions cluster must be able to SHRINK. Expanded it holds four
   buttons (Apply, Expand, Reset, Refresh Statuses ~550px) but the bar-row
   rule gives it `flex: 0 0 auto`, so below ~1280px it forced the row wider
   than the panel: measured at 1100px, Refresh Statuses sat 116px past the
   panel edge and the PAGE scrolled sideways.

   `min-width: 0` is the load-bearing half — a flex item will not shrink
   below its content without it, so flex-shrink alone changes nothing. The
   cluster already wraps internally, so the extra buttons drop to a second
   line inside the cluster rather than overflowing. */
.vp-filter.is-enhanced
  > .card-body
  > form
  > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv)
  > .vp-filter__actions {
  flex-shrink: 1;
  min-width: 0;
}

/* ...and the ROW must be able to wrap for that shrink to have anywhere to
   go. nowrap is right while collapsed (the bar is a single line by design),
   but expanded the cluster gains Reset + Refresh Statuses (~550px) and at
   820px that pushed it 319px past the panel edge, scrolling the page
   sideways. This is SAFE now in a way it was not in attempts 1-6: the
   full-width adv-item lives in its own sibling row, so wrapping here can
   only ever move a button, never the status card. */
.vp-filter.is-enhanced.is-open
  > .card-body
  > form
  > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv) {
  flex-wrap: wrap;
}

/* Below 768 the cluster cannot fit on one line even wrapped to its own row
   (measured expanded at 390px: Reset + Refresh Statuses 189px past the panel
   edge). Let it take the full width and wrap internally, so the buttons
   stack instead of overflowing. */
@media (max-width: 767.98px) {
  .vp-filter.is-enhanced.is-open
    > .card-body
    > form
    > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv)
    > .vp-filter__actions {
    flex: 1 1 100%;
  }
}

/* P4 — collapsed = ONE row at every width, matching the My Consignments
   toolbar (a constant 63px).

   Measured before/after in a Bootstrap + production-markup harness:

     width   auctions        item list
     1440    72  ->  72      72  -> 72
      768   162  ->  90     214  -> 90
      390   162  ->  90     214  -> 142

   The mobile cost came from .vp-filter__search-col being col-12, so it
   consumed a whole grid row on its own and pushed the actions row and result
   count onto lines 2 and 3.

   The reference's shape is [ controls ][ elastic spacer ][ trailing item ].
   Here the Bootstrap columns are overridden into flex children of one line:
   search grows, actions and count stay auto-width. Scoped to :not(.is-open) so
   the EXPANDED layout keeps the normal responsive grid untouched. */
.vp-filter.is-enhanced
  > .card-body
  > form
  > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}
.vp-filter.is-enhanced
  > .card-body
  > form
  > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv)
  > .vp-filter__search-col {
  flex: 1 1 auto;
  min-width: 0; /* lets the field shrink instead of overflowing the line */
  width: auto;
  max-width: none;
}
.vp-filter.is-enhanced
  > .card-body
  > form
  > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv)
  > .vp-filter__actions,
.vp-filter.is-enhanced
  > .card-body
  > form
  > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv)
  > .col-md {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
/* The search field must never be squeezed to nothing by its fixed-width
   siblings. min-width:0 alone let it collapse to 24px at 390px while the
   actions cluster (195px) and result count (181px) kept their intrinsic
   widths. A floor keeps the field usable and pushes the count out instead. */
.vp-filter.is-enhanced
  > .card-body
  > form
  > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv)
  > .vp-filter__search-col {
  min-width: 11rem;
}

/* The result count is the first thing worth dropping when space runs out —
   the row must never scroll sideways.
   ⚠ !important is load-bearing: the column carries Bootstrap's .d-flex
   utility, which is a single class like .col-md and wins on source order.

   ⚠ 767.98, NOT 575.98: tablet PORTRAIT had the same deficit. Measured at 600px
   on the item list, search 176 + selects 196 + actions 127 + count 124 = 623px
   into a 590px row. Everything but the search column is flex:0 0 auto, so the
   field was crushed to 48px and the row overflowed — which reads as the search,
   Filter and scope toggle sitting on top of one another. */
@media (max-width: 991.98px) {
  .vp-filter.is-enhanced:not(.is-open)
    > .card-body
    > form
    > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv)
    > .col-md {
    display: none !important;
  }
  /* P5.1 — below 576 there is no budget for the promoted selects beside the
     search field: measured at 390px they crushed it to 57px and overflowed the
     line. Letting them wrap onto their own lines was worse still (panel grew to
     218/270px), so on phones they fold back into the Expand disclosure and the
     bar keeps the compact single line P4 established. */
  .vp-filter.is-enhanced:not(.is-open) .vp-filter__select {
    display: none;
  }
  /* ...and reappear when the operator expands, so the control is never
     unreachable on a phone — only deprioritised. */
  .vp-filter.is-enhanced.is-open .vp-filter__select {
    display: block;
    flex: 1 1 100%;
  }
  .vp-filter.is-enhanced.is-open .vp-filter__select > .form-select {
    width: 100%;
  }
  /* Same for the dates row. */
  .vp-filter.is-enhanced.is-open .vp-filter__row-dates {
    display: flex;
  }

  /* Keep the single line, but hold a usable field width. Letting the search
     column go full-width instead pushed the actions cluster onto its own line
     and grew the panel to 154/206px — worse than the 90/142px this gives.
     Measured at 390px with the maintenance buttons collapsed: field 174px,
     actions cluster 127px, no horizontal overflow on either panel. */
  .vp-filter.is-enhanced:not(.is-open)
    > .card-body
    > form
    > .row:not(.vp-filter__row-dates):not(.vp-filter__row-adv)
    > .vp-filter__search-col {
    /* Full line below 576: with the promoted selects hidden and the actions
       cluster beside it, anything less crushed the item list field to 40-57px
       and overflowed the row. Measured at 390px: 309px field, no overflow. */
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* P5.1 — filters promoted onto row 1 as compact selects.
   These are NOT .vp-filter__adv-item: they stay visible while the panel is
   collapsed, which is the whole point of surfacing them. Fixed-width so they
   never compete with the elastic search column for space. */
.vp-filter .vp-filter__select {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.vp-filter .vp-filter__select > .form-select {
  width: auto;
  min-width: 7rem;
  /* P5.2 — cap so a long option label ("without Photos") cannot take the
     row from the elastic search field. Measured at 992: Photos 141px, Per
     Page 112px, leaving the field 120px — the tightest point before the
     selects fold away below md. */
  max-width: 9.5rem;
}

/* P5.4 — the status multi-select (Tom Select) in the advanced row.
   Tom Select replaces the <select> with its own .ts-wrapper chrome, so the
   sizing has to target that rather than .form-select. Chips WRAP instead of
   scrolling: 13 statuses selected would otherwise scroll horizontally inside
   a control the operator cannot see the ends of. */
.vp-filter .vplus-status-filter-select + .ts-wrapper,
.vp-filter .ts-wrapper.multi {
  width: 100%;
  min-height: var(--vplus-filter-control-h);
}
.vp-filter .ts-wrapper.multi .ts-control {
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-block: 0.2rem;
}
/* The native control is only visible before Tom Select mounts (and if the
   script fails). Keep it usable rather than letting a 13-row list box
   stretch the panel. */
.vp-filter select.vplus-status-filter-select {
  max-height: 9rem;
}

/* 🔴 The open dropdown must clear the sticky actions toolbar beneath it.
   Tom Select ships .ts-dropdown at z-index:10, but .vplus-action-toolbar-wrap
   (inline in archive-lot.php) is `position: sticky; z-index: 1020` — Bootstrap's
   sticky tier — and the status control sits in the LAST row of the panel, so the
   list opens directly onto it. Measured on /sales/10/: of a 201px dropdown the
   toolbar covered the bottom 118px, swallowing roughly half the statuses.

   Scoped to .vp-filter deliberately. Tom Select is used across the suite
   (lot form, sync modal, item nav); raising .ts-dropdown globally would also
   lift those over dialogs that are meant to cover them.

   1030 clears the sticky tier while staying UNDER Bootstrap's modal backdrop
   (1040) and modal (1050), so a dropdown still can't escape an open dialog. */
.vp-filter .ts-dropdown {
  z-index: 1030;
}

/* P5.3a — the advanced (disclosure) row. A SIBLING of the bar row, not a
   child of it: six attempts to keep a full-width adv-item on the bar's flex
   line all failed, because the search column is the only growable child and
   absorbed whatever width the wrap freed (691px -> 1090px), dragging the
   actions cluster onto a second line. With its own row the bar keeps
   identical geometry in both states and the disclosure only adds a row.

   Hidden/shown by the existing .vp-filter__adv-item rules, so the noscript
   fallback still works. */
.vp-filter .vp-filter__row-adv {
  margin-top: 0.5rem;
}

/* P5.1 — ROW 2: the date range. A short, subordinate line under the main bar.
   Every P4 single-line rule is scoped with :not(.vp-filter__row-dates) so this
   row keeps normal grid flow rather than being forced onto row 1. */
.vp-filter .vp-filter__row-dates {
  margin-top: 0.5rem;
  align-items: flex-end;
}

/* ⚠ Phones only: the always-visible date row costs ~150px on a 390px screen
   (measured: panel 298px on the auctions list, 350px on the item list, versus
   90/142px before P5.1). The brief asked for the always-visible treatment on
   DESKTOP AND TABLET in particular, so below 576 the dates fold back into the
   Expand disclosure and the bar stays compact. Keyboard/AT reach is unchanged
   — the fields are still in the form, just behind the disclosure. */
@media (max-width: 991.98px) {
  .vp-filter.is-enhanced:not(.is-open) .vp-filter__row-dates {
    display: none;
  }
}
.vp-filter .vp-filter__row-dates .form-label {
  margin-bottom: 0.15rem;
}
/* Dates sit on their own line, so they can afford a comfortable width rather
   than the 140px minimum the cramped inline layout needed. */
.vp-filter .vp-filter__row-dates input[type="date"] {
  min-width: 9.5rem;
}

/* P5.2 — phones: even with the scope as a select, field + scope + submit on
   one line leaves the field unusable (measured live at 390px: 40px, and the
   submit overlapping). Stack the scope ABOVE the field there; the field then
   shares its line with the submit only. */
@media (max-width: 575.98px) {
  .vp-filter .vp-filter__search-col > .input-group {
    flex-wrap: wrap;
  }
  .vp-filter .vp-filter__scope {
    flex: 1 1 100%;
    max-width: none;
    border-right: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    margin-bottom: 0.35rem;
  }
  .vp-filter
    .vp-filter__scope
    ~ .vp-filter__search-wrap
    .vp-filter__search-input {
    border-top-left-radius: var(--bs-border-radius-sm);
    border-bottom-left-radius: var(--bs-border-radius-sm);
  }
}

/* P5.2 — the Keyword / Lot Number scope is a SELECT inside the input group
   (it was a 197px button group beside the field; measured live at 820px that
   left the input group 12px wide and the submit overlapping the switch).
   Sized to its content so the field keeps the rest of the column. */
.vp-filter .vp-filter__scope {
  flex: 0 0 auto;
  width: auto;
  min-width: 6.5rem;
  max-width: 9rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
/* The field sits between the scope select and the submit, so BOTH of its
   corners are square. */
.vp-filter
  .vp-filter__scope
  ~ .vp-filter__search-wrap
  .vp-filter__search-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* The search column is laid out as a flex row when collapsed so anything
   beside the field (e.g. the item list's Keyword/Lot Number switch) sits
   NEXT to it. Floating only right-aligns such a block, leaving it stranded
   on its own line above the input. */
.vp-filter.is-enhanced .vp-filter__search-col {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.vp-filter.is-enhanced .vp-filter__search-col > .input-group {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* Collapsed, this row keeps only the disclosure toggle, Apply, and Reset —
   since P1 the Filter submit lives in the search group, not here.

   🔴 P5.5 — Reset is NO LONGER hidden. It used to be, and that was safe only
   because ANY active filter force-opened the panel. P5.5 stopped counting the
   keyword (it is visible while collapsed at every width, so counting it opened
   the panel to reveal a field that was never hidden) — which means a
   keyword-only search now legitimately stays COLLAPSED. With Reset hidden
   there would be no way to clear that search without first expanding a panel
   whose controls are all already visible. Reset is small and its cost is one
   button; being stranded with an uncleanable filter is not recoverable.

   The three Refresh actions stay behind the disclosure: they are infrequent
   maintenance, not filtering, and they carried more visual weight than the
   disclosure itself (three buttons wrapping to ~96px). */
.vp-filter.is-enhanced:not(.is-open) #vplus-refresh-lot-statuses,
.vp-filter.is-enhanced:not(.is-open) #vplus-refresh-statuses,
.vp-filter.is-enhanced:not(.is-open) #vplus-refresh-auction-meta {
  display: none;
}
/* The pre-P4 @media (max-width: 767.98px) block that paired the actions row
   with the result count is gone: P4's base rules above already make both
   auto-width flex children of a single nowrap line at EVERY width, so the
   breakpoint override was redundant and fought the new layout. */

/* P3 — ONE control height across the panel, at EVERY width.
   This was previously scoped to max-width:991.98px, so desktop kept the
   mismatch it was written to fix: measured at 1440 the keyword field was 58px
   (.form-floating) on the same baseline as a 38px submit and 38px date/select
   controls. Dropping .form-floating (see above) removes the 58px outlier; this
   pins the rest to a single height so the row aligns at all widths.

   The `--vplus-filter-control-h` indirection keeps the touch-target bump below
   992px expressible as one value rather than a duplicated rule set. */
.vp-filter {
  --vplus-filter-control-h: 38px;
}
.vp-filter .form-control,
.vp-filter .form-select,
.vp-filter .btn {
  min-height: var(--vplus-filter-control-h);
}
@media (max-width: 991.98px) {
  /* 44px is the touch-target minimum; the small controls were under it. */
  .vp-filter {
    --vplus-filter-control-h: 44px;
  }
  .vp-filter .form-control-sm,
  .vp-filter .form-select-sm {
    font-size: 1rem; /* >=16px stops iOS zooming the page on focus */
  }
}

/* Lot form mode toggle styling */
.vplus-form-mode-toggle {
  margin-bottom: 1rem;
}

/* Express/Full Mode Display - controlled by JavaScript inline styles */
.vplus-express-form {
  display: block;
}

/* Card and section heading styles */
.vplus-card-heading,
.vplus-section-heading {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.vplus-card-heading sup,
.vplus-section-heading sup,
label sup {
  font-size: 0.8em;
  color: #dc3545;
}

/* Card navigation buttons */
.vplus-card-nav {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
}
.vplus-card-nav .btn {
  flex: 1 1 0;
}
.vplus-card-nav .vplus-card-next {
  background-color: #17a2b8;
  border-color: #17a2b8;
  color: #fff;
}
.vplus-card-nav .vplus-card-next:hover {
  background-color: #138496;
  border-color: #117a8b;
}

/* Create New Auction button - Auction Manager Green */
.btn-auction-submit {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
}
.btn-auction-submit:hover {
  background-color: #218838;
  border-color: #1e7e34;
  color: #fff;
}

/* Toggle heading row with switch */
.vplus-toggle-heading-row .vplus-toggle-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.vplus-toggle-switch.form-switch {
  margin-bottom: 0;
  padding-left: 2.5em;
}

/* Section spacing for separation between groups */
.vplus-section-spacing {
  margin-top: 1rem;
}

/* Info callout box */
.vplus-info-callout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background-color: #e8f4fd;
  border-left: 3px solid #0d6efd;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: #495057;
}
.vplus-info-callout i {
  color: #0d6efd;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Comment field textarea min-height */
.vplus-comment-field {
  min-height: 100px;
}

:root {
  --vplus-primary: #1c3f85;
  --vplus-accent: #4fabff;
  /* AI affordance accent — deliberately NOT --bs-primary. That token follows the
     tenant's brand colour (default #1c3f85 navy), which left the selected AI
     badge indistinct against a photo thumbnail. Kept brand-independent so the
     "this is AI" signal reads the same on every site. */
  --vplus-ai-accent: #1a7fff;
  --vplus-ai-accent-glow: rgba(26, 127, 255, 0.35);
  --bs-link-color: var(--vplus-primary);
  --bs-link-color-rgb: 28, 63, 133;
  --vplus-font-family-base: Roboto, Arial, sans-serif;
  --vplus-font-weight-normal: 400;
  --vplus-font-weight-light: 300;
  --bs-primary-rgb: 28, 63, 133;
}
body {
  --bs-primary: var(--vplus-primary);
  --bs-body-font-weight: var(--vplus-font-weight-normal);
  background: var(--bs-gray-100);
  font-family: var(--vplus-font-family-base);
}

/* BOOTSTRAP OVERRIDES */
/* NOTE: the legacy block that poisoned --bs-success-rgb / --bs-warning-rgb /
   --bs-danger-rgb here has been removed. Those vars drive BOTH solid fills AND
   Bootstrap's .text-* utilities, so overriding danger to a pale pink
   (248,215,218) etc. made .text-danger / .text-success / .text-warning render
   as a barely-legible tint everywhere. The pale "subtle" look belongs on badge
   backgrounds only — and the .bg-* rules below already set those explicitly
   with hardcoded hex, so they don't depend on the poisoned vars. The active
   theme (vendor-plus-v2-1/css/styles.css) keeps the strong --bs-*-rgb values
   for legible text. */
.btn-link {
  --bs-btn-color: var(--vplus-primary);
  text-decoration: none;
}
.btn {
  --bs-btn-font-weight: 300;
}
.btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--vplus-primary);
  --bs-btn-border-color: var(--vplus-primary);
}
.badge {
  --bs-badge-font-size: 0.875em;
  --bs-badge-border-radius: 1rem;
  --bs-badge-font-weight: 300;
}

/* Status badge colors matching vplus-filter-badge styles */
.bg-success {
  background-color: #2fa358 !important;
  color: #fff !important;
}
.bg-success .fa-circle {
  color: #fff;
}
.bg-warning {
  background-color: #c99212 !important;
  color: #fff !important;
}
.bg-warning .fa-circle {
  color: #fff;
}
.bg-danger {
  background-color: #a03f32 !important;
  color: #fff !important;
}
.bg-danger .fa-circle {
  color: #fff;
}
.bg-info {
  background-color: #17a2b8 !important;
  color: #fff !important;
}
.bg-info .fa-circle {
  color: #fff;
}
.bg-secondary {
  background-color: #666 !important;
  color: #fff !important;
}
.bg-secondary .fa-circle {
  color: #fff;
}

.bg-disclaimer {
  --bs-badge-color: #ffffff;
  background-color: rgb(81, 56, 99);
}

.form-control {
  font-weight: 400;
}

.page-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/* Hide the theme's page title on VendorPlus surfaces (body.vplus-hide-page-title,
   set in front-end.php) so it doesn't double up with the heading each of these
   screens renders inside its own template.

   The active theme prints the page heading as `.entry-header > .page-title`
   (templates/loop/content-page.php) and archive titles as
   `.page-header > .page-title` (archive.php). Both are the page-CHROME heading,
   OUTSIDE `.entry-content`, so the in-content VendorPlus headings (which also use
   .page-title in some templates, but live inside .entry-content) are NOT hit.
   The extra page-builder selectors are harmless no-ops if the theme changes. */
body.vplus-hide-page-title .entry-header > .page-title,
body.vplus-hide-page-title .page-header > .page-title,
body.vplus-hide-page-title .entry-header > .entry-title,
body.vplus-hide-page-title .page-header > .entry-title,
body.vplus-hide-page-title .page-header .wp-block-post-title,
body.vplus-hide-page-title .elementor-page-title {
  display: none !important;
}

/* HEADER */
/* .header {
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .header {
    margin-bottom: 2rem;
  }
} */
.vplus-logo {
  width: 120px;
  height: auto;
}
@media (min-width: 768px) {
  .vplus-logo {
    width: 180px;
  }
}

.dropdown-ellipsis .dropdown-toggle:after {
  content: none;
}

/* MENU */
.auction-nav .dropdown-toggle:not(.nav-link) {
  --bs-btn-color: var(--vplus-accent);
  text-decoration: none;
  font-size: 1.25rem;
}
.auction-nav .dropdown-toggle:not(.nav-link):after {
  content: none;
}
.auction-nav .dropdown-item {
  --bs-dropdown-link-color: var(--vplus-primary);
  /* Brand-consistent active item — Bootstrap's default active bg is raw blue
     (#0d6efd), which clashes with the suite palette. Drive it off the brand
     primary via Bootstrap's own var so .dropdown-item.active / :active follow.
     The matching active TEXT colour must be set too: .dropdown-item.active uses
     color:var(--bs-dropdown-link-active-color), which on this surface resolves
     to a dark value (the theme's BS4 SCSS $dropdown-link-active-color wins over
     the BS5 bundle's #fff default), rendering unreadable dark text on the
     #1c3f85 active bg — worst on the mobile/tablet offcanvas drawer (same
     class). Pin it white here. */
  --bs-dropdown-link-active-bg: var(--vplus-primary);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-item-padding-y: 0.75rem;
  --bs-dropdown-item-padding-x: 1.5rem;
}

/* Header-nav Phase 1 — caret breathing room + top-level item separation.
   Horizontal-nav range only (>=xl, where the desktop nav shows; below xl the
   hamburger offcanvas takes over). The submenu caret previously sat flush
   against the item's right edge, butting into the next item's leading icon —
   the #1 reported complaint AND the source of the "ambiguous grouping" read.
   The .nav-link is display:flex; gap:.5rem, so the caret ::after is a flex
   child already separated from the label by the gap — the fix is right-side
   padding on the toggle (breathing room), plus a small inter-item margin so
   groups read clearly. */
@media (min-width: 1200px) {
  .auction-nav .nav-link.dropdown-toggle {
    padding-right: 0.9rem;
  }
  .auction-nav .nav > .nav-item + .nav-item {
    margin-left: 0.25rem;
  }
}
.auction-nav .nav-link {
  --bs-nav-link-color: var(--vplus-primary);
}

/* Navigation Active/Hover Colored Borders */
.header .row.align-items-center {
  align-items: stretch !important;
}
.header .row > .col-auto {
  display: flex;
  align-items: stretch;
}
.auction-nav {
  display: flex;
  align-items: stretch;
}
.auction-nav .nav {
  align-items: stretch;
}
.auction-nav .nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}
.auction-nav .nav-item .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 6px solid transparent;
  margin-bottom: -1px; /* Align with header bottom border */
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}
.auction-nav .nav-item .nav-link .fa-regular,
.auction-nav .nav-item .nav-link .fa-solid {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  line-height: 1;
  transition: color 0.2s ease;
}

/* Auction Manager - Green */
.auction-nav .nav-item.vplus-nav-auction-manager .nav-link:hover,
.auction-nav .nav-item.vplus-nav-auction-manager.active .nav-link {
  border-bottom-color: #28a745;
  color: #28a745;
}
.auction-nav .nav-item.vplus-nav-auction-manager .nav-link:hover .fa-regular,
.auction-nav .nav-item.vplus-nav-auction-manager.active .nav-link .fa-regular {
  color: #28a745;
}

/* Photo App - Neutral Blue */
.auction-nav .nav-item.vplus-nav-photo-app .nav-link:hover,
.auction-nav .nav-item.vplus-nav-photo-app.active .nav-link {
  border-bottom-color: #5b9bd5;
  color: #5b9bd5;
}
.auction-nav .nav-item.vplus-nav-photo-app .nav-link:hover .fa-regular,
.auction-nav .nav-item.vplus-nav-photo-app.active .nav-link .fa-regular {
  color: #5b9bd5;
}

/* Invoice Generator (legacy) & Invoicing (vp-invoicing) - Xero Blue */
.auction-nav .nav-item.vplus-nav-invoice-generator .nav-link:hover,
.auction-nav .nav-item.vplus-nav-invoice-generator.active .nav-link,
.auction-nav .nav-item.vplus-nav-invoicing .nav-link:hover,
.auction-nav .nav-item.vplus-nav-invoicing.active .nav-link {
  border-bottom-color: #13b5ea;
  color: #13b5ea;
}
.auction-nav .nav-item.vplus-nav-invoice-generator .nav-link:hover .fa-regular,
.auction-nav .nav-item.vplus-nav-invoice-generator.active .nav-link .fa-regular,
.auction-nav .nav-item.vplus-nav-invoicing .nav-link:hover .fa-regular,
.auction-nav .nav-item.vplus-nav-invoicing.active .nav-link .fa-regular {
  color: #13b5ea;
}

/* Reports - Red */
.auction-nav .nav-item.vplus-nav-reports .nav-link:hover,
.auction-nav .nav-item.vplus-nav-reports.active .nav-link {
  border-bottom-color: #dc3545;
  color: #dc3545;
}
.auction-nav .nav-item.vplus-nav-reports .nav-link:hover .fa-regular,
.auction-nav .nav-item.vplus-nav-reports.active .nav-link .fa-regular {
  color: #dc3545;
}

/* Integrations & Settings - Charcoal */
.auction-nav .nav-item.vplus-nav-integrations-settings .nav-link:hover,
.auction-nav .nav-item.vplus-nav-integrations-settings.active .nav-link {
  border-bottom-color: #333333;
  color: #333333;
}
.auction-nav
  .nav-item.vplus-nav-integrations-settings
  .nav-link:hover
  .fa-regular,
.auction-nav
  .nav-item.vplus-nav-integrations-settings.active
  .nav-link
  .fa-regular {
  color: #333333;
}

/* Consignments - Amber/Orange */
.auction-nav .nav-item.vplus-nav-consignments .nav-link:hover,
.auction-nav .nav-item.vplus-nav-consignments.active .nav-link {
  border-bottom-color: #e67e22;
  color: #e67e22;
}
.auction-nav .nav-item.vplus-nav-consignments .nav-link:hover .fa-regular,
.auction-nav .nav-item.vplus-nav-consignments.active .nav-link .fa-regular {
  color: #e67e22;
}

/* Consignment Manager - Royal Blue (differentiates the siloed manager
   surface from the vendor-facing amber Consignments menu) */
.auction-nav .nav-item.vplus-nav-consignment-manager .nav-link:hover,
.auction-nav .nav-item.vplus-nav-consignment-manager.active .nav-link {
  border-bottom-color: #4169e1;
  color: #4169e1;
}
.auction-nav
  .nav-item.vplus-nav-consignment-manager
  .nav-link:hover
  .fa-regular,
.auction-nav
  .nav-item.vplus-nav-consignment-manager.active
  .nav-link
  .fa-regular {
  color: #4169e1;
}

/* My Account - Slate Purple */
.auction-nav .nav-item.vplus-nav-my-account .nav-link:hover,
.auction-nav .nav-item.vplus-nav-my-account.active .nav-link {
  border-bottom-color: #6c5ce7;
  color: #6c5ce7;
}
.auction-nav .nav-item.vplus-nav-my-account .nav-link:hover .fa-regular,
.auction-nav .nav-item.vplus-nav-my-account.active .nav-link .fa-regular {
  color: #6c5ce7;
}

/* Dropdown hover-open and caret for desktop nav */
.auction-nav .nav-item.dropdown .nav-link.dropdown-toggle {
  cursor: pointer;
}
.auction-nav .nav-item.dropdown .nav-link.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.35em;
  vertical-align: 0.15em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.auction-nav .nav-item.dropdown:hover .nav-link.dropdown-toggle::after {
  opacity: 1;
}
.auction-nav .nav-item.dropdown .nav-link.dropdown-toggle {
  padding: inherit;
  font-size: inherit;
  line-height: inherit;
}
@media (min-width: 1200px) {
  /* Open nav dropdowns on hover — but NOT the notification bell. The bell's
     panel relies on Bootstrap/Popper to position it (anchored to the toggle's
     right edge); hover-opening it with raw CSS skips Popper, so the panel
     renders right-aligned at top:100% and bleeds off the screen edge. Excluding
     .vplus-notif-item makes the bell click-only, letting Popper place it.

     Breakpoint is 1200px (xl) to match the horizontal-nav visibility window
     (the nav is d-xl-flex; below xl the hamburger offcanvas owns navigation).

     The menu is kept RENDERED (display:block) but hidden via opacity/visibility
     so the open/close can transition (display itself can't animate). It stays
     position:absolute / top:100% so the always-rendered box never reserves flow
     space; pointer-events:none + visibility:hidden keep the hidden menu from
     intercepting clicks. */
  .auction-nav .nav-item.dropdown:not(.vplus-notif-item) > .dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .auction-nav
    .nav-item.dropdown:not(.vplus-notif-item):hover
    > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Motion flourish — subtle fade + rise, gated by reduced-motion. The rise +
     transition only apply when the user hasn't asked to reduce motion; the
     show/hide above still works regardless. */
  @media (prefers-reduced-motion: no-preference) {
    .auction-nav .nav-item.dropdown:not(.vplus-notif-item) > .dropdown-menu {
      transform: translateY(-6px);
      transition:
        opacity 0.15s ease-out,
        transform 0.15s ease-out,
        visibility 0s linear 0.15s;
    }
    .auction-nav
      .nav-item.dropdown:not(.vplus-notif-item):hover
      > .dropdown-menu {
      transform: translateY(0);
      transition:
        opacity 0.15s ease-out,
        transform 0.15s ease-out;
    }
    /* Caret gentle rotate on hover (NOT [aria-expanded] — that's click-only;
       these dropdowns open on hover). */
    .auction-nav .nav-link.dropdown-toggle::after {
      transition:
        transform 0.15s ease-out,
        opacity 0.2s ease-out;
    }
    .auction-nav
      .nav-item.dropdown:not(.vplus-notif-item):hover
      > .nav-link.dropdown-toggle::after {
      transform: rotate(180deg);
    }
    /* Dropdown item: tiny lead-in nudge on hover (the item-x padding is 1.5rem;
       nudge to ~1.7rem). Decorative only. */
    .auction-nav .dropdown-item {
      transition:
        background-color 0.12s ease,
        color 0.12s ease,
        padding-left 0.12s ease;
    }
    .auction-nav .dropdown-menu .dropdown-item:hover {
      padding-left: 1.7rem;
    }
  }
}

@media (min-width: 768px) {
  li.nav-item.welcome-text {
    display: flex;
    align-items: center;
  }
  li.nav-item.welcome-text:before {
    content: "|";
    margin: 0 1rem;
    opacity: 0.2;
  }
}

/* User-menu dropdown button (in .auction-nav, replaces the old plain
   "Hi {name}" label — now a Bootstrap dropdown toggle bundling Integrations
   & Settings, Webtron Dashboard, and Log Out). */
.auction-nav .nav-item.dropdown:has(.vp-user-menu-btn) {
  display: flex;
  align-items: center;
}
.vp-user-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 2rem;
  font-size: 0.8125rem !important;
  font-weight: 500;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
  max-width: 14rem;
  white-space: nowrap;
}
.vp-user-menu-btn:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.08);
}
.vp-user-menu-btn.show,
.vp-user-menu-btn[aria-expanded="true"] {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.1);
}
.vp-user-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: #6c757d;
  flex-shrink: 0;
}
.vp-user-menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.vp-user-menu-caret {
  font-size: 0.5625rem;
  color: #6c757d;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.vp-user-menu-btn[aria-expanded="true"] .vp-user-menu-caret {
  transform: rotate(180deg);
}
.vp-user-menu-btn + .dropdown-menu {
  padding: 0;
  /* Right-align to the button regardless of Popper. The menu carries
     .dropdown-menu-end, but Bootstrap only applies end-alignment when Popper
     has stamped [data-bs-popper]; in the STATIC (pre-open / no-Popper) render
     state the menu falls back to the base `left: 0` and — being a fixed ~192px
     wide — spills past the viewport's right edge (the user menu sits at the far
     right of the nav), adding ~22px of horizontal scroll on wider desktops.
     Forcing right-alignment here fixes that static state; when Popper IS active
     its inline `inset`/`transform` still win, so the open dropdown is unchanged. */
  right: 0;
  left: auto;
}
.vp-user-menu-btn + .dropdown-menu .dropdown-divider {
  margin: 0;
}
.vp-user-menu-btn + .dropdown-menu .dropdown-item {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #2c3338;
}

/* BREADCRUMBS */
.vplus-breadcrumbs {
  font-size: 0.825rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.vplus-breadcrumbs > * {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% / 3);
  overflow: hidden;
}
.vplus-breadcrumbs a {
  text-decoration: none;
  color: var(--vplus-primary);
}
.vplus-breadcrumbs .fa {
  font-size: 0.5rem;
}

/* LOT NAV */
.vplus-lot-nav {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.5rem;
}
.vplus-lot-nav > * {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% / 2);
  overflow: hidden;
}
.vplus-lot-nav .me-auto {
  text-align: left;
}

.vplus-lot-nav .btn {
  padding: 0.375rem 0.5rem;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  /* These buttons are `icon <space> label`, but inline-flex COLLAPSES that
     literal whitespace, so the icon butts up against the text. A gap on the
     flex container spaces every icon/label pair evenly without restructuring
     the markup or hand-tuning a margin per button. */
  gap: 0.5rem;
}

.vplus-lot-nav .vplus-bulk-actions {
  margin-right: 0;
}

/* AI Speed Lotting — solid fill, reusing the Speed Lotting mode button's exact
   treatment (the dark-blue gradient + black border it wears when active) so the
   feature reads as the same thing in both places. Outline would have made it
   the odd one out in a row of solid buttons.
   Not .btn-primary: Speed Lotting owns this dark blue, distinct from the row's
   primary-blue Create New Auction / Create New Item. */
/* ⚠ `.btn.btn-speed-lotting`, not `.vplus-lot-nav .btn-speed-lotting`: both are
   2 classes, so against Bootstrap's own `.btn.btn-primary` the winner would be
   decided by SOURCE ORDER — and vendor-plus.css registers with EMPTY deps
   (enqueue-scripts.php), so it is not guaranteed to load after Bootstrap.
   Adding .vplus-lot-nav makes it 3 classes, which wins on specificity alone
   regardless of which stylesheet lands first. */
.vplus-lot-nav .btn.btn-speed-lotting {
  background: linear-gradient(135deg, #2c5282, #1a365d);
  border-color: #000;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
}

.vplus-lot-nav .btn.btn-speed-lotting:hover,
.vplus-lot-nav .btn.btn-speed-lotting:focus {
  background: linear-gradient(135deg, #35629b, #1f4270);
  border-color: #000;
  color: #fff;
}

/* ── Desktop/tablet ordering ──────────────────────────────────────────────
   AI Speed Lotting sits BEFORE Create New Auction.

   🔴 This MUST be an explicit rule. It previously relied on DOM order, on the
   (incorrect) assumption that the button was emitted first — it is emitted at
   lot-nav.php:106, AFTER Create New Auction at :90, so it rendered on the wrong
   side. Desktop order is otherwise an undocumented side effect of PHP statement
   order, which silently reorders the row whenever the template is edited.

   ⚠ `.me-auto` (Back link / spacer) is pinned to -1 so a negative order here
   cannot jump it. Both are explicit precisely so neither depends on the other's
   default. */
.vplus-lot-nav .me-auto {
  order: -1;
}

.vplus-lot-nav .btn-speed-lotting {
  order: 1;
}

/* Everything else defaults to order 0 — i.e. AFTER Speed Lotting — so this one
   value is all that is needed to place it. */
.vplus-lot-nav .btn-new-sale,
.vplus-lot-nav .btn-new-lot,
.vplus-lot-nav .btn-new-lot-pick,
.vplus-lot-nav .vplus-bulk-actions {
  order: 2;
}

/* Create New Item is the primary action in this row — give it a little more
   presence than the buttons beside it. */
.vplus-lot-nav .btn-new-lot {
  padding: 0.5rem 0.875rem;
  min-height: 42px;
  font-weight: 500;
}

/* Empty-state glow on Create New Item, matching the Upload Photos affordance on
   the lot form: the same amber ring and 2s cadence, applied while the auction
   has no items yet so the operator has an obvious place to start. Added by
   vendor-plus-lot-list.js only when the list is genuinely empty. */
.vplus-lot-nav .btn-new-lot.is-empty {
  animation: vplus-new-lot-glow 2s ease-in-out infinite;
}
@keyframes vplus-new-lot-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vplus-lot-nav .btn-new-lot.is-empty {
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.45);
  }
}

/* Lot List Action Buttons - Consistent Styling */
.vplus-action-row .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

/* Sync to Dashboard - Green like Sync & Next */
.vplus-btn-sync-to {
  background-color: #1c8575;
  border-color: #1c8575;
  color: #fff;
}
.vplus-btn-sync-to:hover,
.vplus-btn-sync-to:focus {
  background-color: #25b19c;
  border-color: #25b19c;
  color: #fff;
}
.vplus-btn-sync-to:disabled {
  background-color: #1c8575;
  border-color: #1c8575;
  color: #fff;
  opacity: 0.5;
}

/* Pull from Dashboard - Blue */
.vplus-btn-pull-from {
  background-color: #4a90d9;
  border-color: #4a90d9;
  color: #fff;
}
.vplus-btn-pull-from:hover,
.vplus-btn-pull-from:focus {
  background-color: #3a7fc8;
  border-color: #3a7fc8;
  color: #fff;
}

/* Sync Statuses - Green like Sync to Dashboard */
.vplus-btn-sync-statuses {
  background-color: #1c8575;
  border-color: #1c8575;
  color: #fff;
}
.vplus-btn-sync-statuses:hover,
.vplus-btn-sync-statuses:focus {
  background-color: #25b19c;
  border-color: #25b19c;
  color: #fff;
}

/* Bulk AI Analysis - Warning/Orange like AI Description buttons */
.vplus-btn-bulk-ai {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}
.vplus-btn-bulk-ai:hover,
.vplus-btn-bulk-ai:focus {
  background-color: #ffca2c;
  border-color: #ffc720;
  color: #212529;
}
.vplus-btn-bulk-ai:disabled {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
  opacity: 0.5;
}

/* Re-Stagger - Warning/Orange like AI Description buttons */
.vplus-action-restagger {
  background-color: #ffa407;
  border-color: #ffc107;
  color: #212529;
}
.vplus-action-restagger:hover,
.vplus-action-restagger:focus {
  background-color: #ffa42c;
  border-color: #ffc720;
  color: #212529;
}
.vplus-action-restagger:disabled {
  background-color: #fedb6f;
  border-color: #ffc107;
  color: #212529;
  opacity: 0.5;
}

/* Validate - Warning/Orange like AI Description buttons */
.vplus-action-validate {
  background-color: #13df00;
  border-color: #66ff07;
  color: #212529;
}
.vplus-action-validate:hover,
.vplus-action-validate:focus {
  background-color: #0fb400;
  border-color: #474747;
  color: #ffffff;
}
.vplus-action-validate:disabled {
  background-color: #0fb400;
  border-color: #474747;
  color: #ffffff;
  opacity: 0.5;
}

/* Lot List Header */
.vplus-lot-list-header {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.vplus-lot-list-header .row {
  align-items: center;
}

/* Select All Checkbox */
#vplus-select-all {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Lot Item Checkbox */
.vplus-lot-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.vplus-sale-archive #content .btn-primary {
  --vplus-primary: #1c8575;
  --bs-btn-border-color: #1c8575;
  --bs-btn-hover-bg: #25b19c;
  --bs-btn-hover-border-color: #25b19c;
  --bs-btn-active-bg: #25b19c;
  --bs-btn-active-border-color: #25b19c;
}

.vplus-sale-archive #content a:not(.btn) {
  --bs-link-color-rgb: 28, 133, 117;
}
.vplus-sale-archive #content a:not(.btn):hover {
  --bs-link-color-rgb: 37, 177, 156;
}

/* FOOTER */
.footer {
  margin-bottom: 2rem;
}
.powered-by {
  text-align: center;
  margin-top: 2rem;
}
.powered-by-text {
  font-size: 0.7em;
  display: inline-block;
  vertical-align: sub;
}
.powered-by a {
  opacity: 0.4;
  transition: opacity 0.2s ease;
  text-decoration: none;
}
.powered-by a:hover,
.powered-by a:active {
  opacity: 1;
}
.powered-by img {
  width: 120px;
  vertical-align: bottom;
}
.wt-logo a:hover {
  opacity: 1;
}
.wt-logo img {
  width: 150px;
}

@keyframes pulsate {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 10px var(--vplus-accent);
  }
  100% {
    box-shadow: none;
  }
}

.element {
  animation: pulsate 1s infinite;
}

.vplus-link--main {
  text-decoration: none;
  font-weight: bold;
  line-height: 1.25;
  display: block;
}

#vplus-photo-filter label:has(input:checked) {
  background: #e9eef6;
}

.vplus-lot-summary > .row {
  gap: 0.5rem;
}

.vplus-lot-summary .vplus-link--main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vplus-lot-number {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

.vplus-lot-summary-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
  max-width: 100%;
}

.vplus-lot-meta-link {
  text-decoration: none;
}

.vplus-lot-meta-link:hover .vplus-lot-meta-badge {
  border-color: rgba(0, 0, 0, 0.25);
  color: var(--vplus-accent);
}

.vplus-lot-meta-badge-label {
  font-weight: 600;
}

/* The .vplus-lot-summary-badges row already wraps badge-to-badge, so the only
   residual overflow risk is a SINGLE badge whose value is longer than the
   content column. Below lg this caps each lot-meta badge to the container width
   and lets its text wrap, so a long value (e.g. "End Date and Time: 30 July
   2026 6:00 pm" in the narrow tablet-portrait content column, or a long
   Purchase Option on mobile) wraps instead of clipping with a dangling
   separator / pushing the row past the edge. The connected single-line look
   returns at lg+ where the column is wide enough. */
@media (max-width: 991.98px) {
  .vplus-lot-summary-badges .vplus-lot-meta-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.vplus-list-item .vplus-lot-summary > .row {
  --bs-gutter-y: 0.35rem;
  flex-wrap: nowrap;
}

.vplus-list-item .vplus-lot-summary > .row > .col {
  min-width: 0;
}

.vplus-list-item-actions {
  margin-top: 0 !important;
  white-space: nowrap;
}

.vplus-list-item-select,
.vplus-list-item > .row > .vplus-list-item-select,
.vplus-list-item > .row > .vplus-list-item-actions {
  margin-top: 0 !important;
}

.vplus-list-item > .row > .vplus-list-item-select > input[type="checkbox"] {
  display: block;
  margin: 0;
}

.vplus-status-filter-option:hover {
  border-color: #b6c6dc;
  background: #f8fbff;
}

.vplus-status-filter-option:hover .vplus-status-filter-label {
  color: #1f3f66;
}

.vplus-status-filter-input:focus-visible + .vplus-status-filter-label {
  outline: 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 3px;
  border-radius: 6px;
}

.vplus-auction-status-tabs .nav-link:hover,
.vplus-lot-status-tabs .nav-link:hover {
  border-color: #b6c6dc;
  background: #f8fbff;
  color: #1f3f66;
}

.vplus-auction-status-tabs,
.vplus-lot-status-tabs {
  justify-content: center;
}

@media (max-width: 767.98px) {
  .vplus-list-item > .row {
    align-items: flex-start !important;
  }

  .vplus-list-item .vplus-lot-summary > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.5rem;
  }

  .vplus-list-item .vplus-lot-summary > .row > .col {
    grid-column: 1;
    grid-row: 1;
  }

  .vplus-list-item .vplus-lot-summary > .row > .col-12 {
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
  }

  .vplus-list-item .vplus-list-item-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    text-align: right;
  }

  .vplus-list-item .vplus-lot-summary-badges .vplus-badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }
}

/* Lot List Quick Edit Styles */
.vplus-lot-summary {
  transition: background-color 0.2s ease;
}

.vplus-lot-summary:has(.vplus-lot-details-panel:visible) {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: -0.5rem;
  margin-bottom: 0.5rem;
}

.vplus-lot-toggle-details {
  border-radius: var(--bs-border-radius);
  padding: 0.25rem 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-size: 0.8125rem;
  gap: 0.25rem;
  background-color: #5c7cfa;
  border-color: #5c7cfa;
  color: white;
}

.vplus-lot-toggle-details .fa-regular {
  margin-right: 0 !important;
}

.vplus-lot-toggle-details:hover {
  background-color: #4263eb;
  border-color: #4263eb;
  color: white;
}

.vplus-lot-details-panel {
  background: white;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 0.5rem;
}

.vplus-lot-gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vplus-lot-thumb {
  width: 60px;
  height: 60px;
  border-radius: 0.25rem;
  overflow: hidden;
  background: #f0f0f0;
}

.vplus-lot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vplus-lot-thumb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  color: #666;
  font-weight: 600;
  font-size: 0.875rem;
}

.vplus-lot-dropzone {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vplus-lot-dropzone:hover {
  background-color: #e9ecef;
}

/* Lot List Checkbox Styles */
.vplus-sales-list [type="checkbox"] {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: var(--bs-primary);
  margin-top: 0.5rem;
}

/* Syncing Badge Styles */
.vplus-status-syncing {
  color: #0dcaf0;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Revision Pending Pulse Animation */
.vplus-revision-pulse {
  animation: vplus-revision-glow 2s ease-in-out infinite;
}
@keyframes vplus-revision-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
  }
  50% {
    box-shadow: 0 0 8px 3px rgba(255, 193, 7, 0.35);
  }
}

.vplus-lot-quick-edit .vplus-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
}

/* Quick Edit Rich Text Editor Styles */
.vplus-lot-quick-edit .ql-container {
  min-height: 150px;
  font-size: 0.875rem;
}

.vplus-lot-quick-edit .ql-editor {
  min-height: 150px;
}

/* Quick Edit Section Styles */
.vplus-lot-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-secondary);
  margin-bottom: 1rem;
}

.vplus-lot-edit-section {
  background: #fafbfc;
  padding: 1rem;
  border-radius: var(--bs-border-radius);
  margin-bottom: 1rem;
}

.vplus-lot-edit-section:last-child {
  margin-bottom: 0;
}

/* Lot Gallery Area (Photo App style) */
.vplus-lot-gallery-area {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: var(--bs-border-radius);
  height: 100%;
}

.vplus-lot-photo-upload-field .file-upload {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

.vplus-lot-photo-upload-field .file-upload--hidden {
  display: none;
}

.vplus-lot-file-wrapper {
  margin-top: 0.5rem;
}

/* ==========================================================================
   LOT LIST GALLERY AREA - Inherits from .vplus-media-files
   Uses same base styles as content-lot.php photo uploader
   ========================================================================== */

.vplus-lot-gallery-area {
  position: relative;
  z-index: 1;
}

/* Lot list photo files - override grid for panel context */
.vplus-lot-photo-files {
  overflow: visible; /* Allow media options to overflow */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .vplus-lot-photo-files {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
}

@media (min-width: 992px) {
  .vplus-lot-photo-files {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* Ensure file containers allow overflow for badges */
.vplus-lot-photo-files .vplus-file-container {
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}

/* Override image-box for lot list */
.vplus-lot-photo-files .image-box {
  overflow: hidden; /* Keep image contained */
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: var(--bs-border-radius-sm);
}

.vplus-lot-photo-files .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Move handle positioning */
.vplus-lot-photo-files .vplus-file-move-handle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 0.25rem;
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--bs-border-radius-sm);
  cursor: grab;
  line-height: 1;
  z-index: 10;
}

.vplus-lot-photo-files .vplus-file-move-handle:active {
  cursor: grabbing;
}

/* Featured/Lead photo crown indicator */
.vplus-lot-photo-files .vplus-featured-image-icon {
  position: absolute;
  z-index: 200;
  color: #ffa500;
  font-size: 1rem;
  bottom: calc(100% - 0.5rem);
  line-height: 1rem;
  left: -0.125rem;
  transform: rotate(-15deg);
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* AI badge indicator */
.vplus-lot-photo-files .vplus-ai-file-icon {
  display: block; /* Override base display: none */
  position: absolute;
  color: var(--bs-primary);
  z-index: 200;
  font-size: 0.875rem;
  bottom: calc(100% - 0.75rem);
  line-height: 1rem;
  right: -0.25rem;
  border: 1px solid #eee;
  padding: 0.125rem;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  background: #fff;
  pointer-events: none;
}

/* Media options tray - speech bubble popup */
.vplus-lot-photo-files .vplus-media-option {
  display: flex;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  bottom: calc(100% - 0.5rem);
  z-index: -1;
  transition:
    bottom 0.3s ease-in,
    opacity 0.3s ease-in;
  left: 50%;
  transform: translateX(-50%);
}

.vplus-lot-photo-files .vplus-media-option.show {
  border: 1px solid #eee;
  opacity: 1;
  pointer-events: auto;
  border-radius: 5px;
  z-index: 300;
  background: #fff;
  bottom: calc(100% + 0.75rem);
}

.vplus-lot-photo-files .vplus-media-option:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
}

.vplus-lot-photo-files .vplus-media-option:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.vplus-lot-photo-files .vplus-file-container.selected .image-box {
  box-shadow: 0px 0px 0 3px rgba(var(--bs-primary-rgb), 0.25);
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

.vplus-lot-photo-files .vplus-media-option .btn {
  color: #333;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Show AI link in lot list context (hidden by default in base styles) */
.vplus-lot-photo-files .vplus-media-option .ai-link {
  display: block;
}

/* Photo dropzone styling */
.vplus-lot-photo-dropzone {
  margin-top: 0.5rem;
}

.vplus-lot-photo-files .vplus-file-container .vplus-media-option .btn:hover {
  color: var(--bs-primary);
}

.vplus-lot-photo-files
  .vplus-file-container
  .vplus-media-option
  .delete-link:hover {
  color: var(--bs-danger);
}

.vplus-lot-photo-dropzone {
  display: none;
}

.vplus-lot-photo-files:empty + .vplus-lot-photo-dropzone {
  display: block;
}

/* Always show dropzone when there are photos too */
.vplus-lot-photo-files:not(:empty) + .vplus-lot-photo-dropzone {
  display: block;
  margin-top: 0.5rem;
}

/* Photo trigger styling */
.vplus-lot-photo-trigger {
  cursor: pointer;
  background-color: #fff;
}

.vplus-lot-photo-trigger:hover {
  background-color: #f8f9fa;
}

.vplus-lot-photo-input.file-upload--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vplus-lot-photo-dropzone .dropzone-inner {
  border: 2px dashed #dee2e6;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vplus-lot-photo-dropzone .dropzone-inner:hover,
.vplus-lot-photo-dropzone.dragover .dropzone-inner {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.vplus-lot-upload-status {
  background: var(--bs-info);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: var(--bs-border-radius-sm);
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Bulk AI Modal Styles */
.vplus-bulk-ai-log {
  background: #f8f9fa;
  font-family: monospace;
  font-size: 0.8rem;
}

/* Gallery Modal Styles (mirrors vplus-file-upload-field and vplus-media-files) */
#vplus-gallery-modal .vplus-file-upload-field {
  margin-bottom: 1rem;
}

#vplus-gallery-modal .vplus-media-files {
  margin-top: 1rem;
}

#vplus-gallery-modal .vplus-file-container .image-box {
  position: relative;
}

#vplus-gallery-modal .vplus-file-container .image-box .photo img {
  width: 100%;
  height: auto;
  display: block;
}

#vplus-gallery-modal .vplus-file-container .vplus-file-move-handle,
#vplus-gallery-modal .vplus-file-container .vplus-file-delete {
  position: absolute;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

#vplus-gallery-modal .vplus-file-container .vplus-file-move-handle {
  top: 4px;
  left: 4px;
  cursor: grab;
}

#vplus-gallery-modal .vplus-file-container .vplus-file-delete {
  top: 4px;
  right: 4px;
}

#vplus-gallery-modal .vplus-file-container:hover .vplus-file-move-handle,
#vplus-gallery-modal .vplus-file-container:hover .vplus-file-delete {
  opacity: 1;
}

#vplus-gallery-modal .vplus-file-container .vplus-file-delete:hover {
  color: var(--bs-danger);
}

/* CSV Import Styles */
.vplus-csv-preview {
  overflow-x: auto;
}

.vplus-csv-preview .table-responsive {
  overflow-x: auto;
  max-width: 100%;
}

.vplus-csv-preview-table {
  min-width: max-content;
}

.vplus-csv-preview-table th,
.vplus-csv-preview-table td {
  font-size: 0.75rem;
  white-space: nowrap;
  padding: 0.5rem;
  max-width: none;
}

.card {
  --bs-card-border-color: transparent;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.05);
}

.dropdown-menu.dropdown-menu {
  --bs-dropdown-border-color: var(--bs-gray-100);
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
}

.pagination {
  --bs-pagination-active-bg: var(--vplus-primary);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-border-color: var(--vplus-primary);
}

/* Video Upload with Compression */
#vplus-card--videos .nav-tabs {
  border-bottom: 2px solid #dee2e6;
}

#vplus-card--videos .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: #6c757d;
  font-weight: 500;
}

#vplus-card--videos .nav-tabs .nav-link:hover {
  border-color: transparent;
  color: #495057;
}

#vplus-card--videos .nav-tabs .nav-link.active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
  background: transparent;
}

#vplus-video-droparea {
  cursor: pointer;
  transition: all 0.2s ease;
}

/* The upload icon is a d-block span; centre its glyph on the span itself so it
   stays centred even if the parent's .text-center is ever dropped. */
#vplus-video-droparea .fa-cloud-arrow-up {
  display: block;
  text-align: center;
}

#vplus-video-droparea:hover {
  border-color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

#vplus-video-droparea.border-primary {
  border-color: var(--bs-primary) !important;
}

.vplus-file-item--video {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
}

.vplus-file-item--video .vplus-file-icon {
  font-size: 1.25rem;
  color: #6c757d;
}

.vplus-file-item--video .vplus-file-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vplus-file-item--video .vplus-file-link,
.vplus-file-item--video .vplus-file-download,
.vplus-file-item--video .vplus-file-delete {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.vplus-file-item--video .vplus-file-delete {
  color: #dc3545;
}

.vplus-file-item--video .vplus-file-delete:hover {
  color: #fff;
  background-color: #dc3545;
}

/* YouTube field width constraint */
@media (min-width: 768px) {
  #vplus-panel-youtube .vplus-file-upload-field {
    max-width: 500px;
  }
}

/* YouTube preview cards */
.vplus-yt-preview-list {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.vplus-yt-preview-list.show {
  display: flex;
}
.vplus-yt-preview-card {
  position: relative;
  width: 140px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.15s;
}
.vplus-yt-preview-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.vplus-yt-preview-thumb {
  display: block;
  line-height: 0;
  position: relative;
}
.vplus-yt-preview-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.vplus-yt-preview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.vplus-yt-preview-thumb:hover .vplus-yt-preview-play {
  opacity: 1;
}
.vplus-yt-preview-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s;
  z-index: 2;
}
.vplus-yt-preview-card:hover .vplus-yt-preview-delete {
  opacity: 1;
}
.vplus-yt-preview-delete:hover {
  background: #dc3545;
}

#vplus-video-compression-panel .progress {
  background-color: #e9ecef;
  position: relative;
  overflow: hidden;
}

#vplus-video-compression-panel .progress-bar {
  background-color: var(--bs-primary);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

#vplus-video-compression-panel .card-body {
  position: relative;
}

#vplus-video-compression-panel .card-body > .progress {
  margin-top: 0.5rem;
}

/* ================================
   AI Generation Progress Feedback
   ================================ */

/* AI Generate Button Processing Spin Animation */
.vplus-ai-btn-spin {
  display: inline-block;
  animation: vplus-btn-spin 1s linear infinite;
}

@keyframes vplus-btn-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.vplus-btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vplus-btn-spin 0.75s linear infinite;
  vertical-align: -0.125em;
  margin-right: 0.375rem;
}

.vplus-ai-progress-panel {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 12px;
  padding: 1.25rem;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.vplus-ai-progress-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vplus-ai-progress-header .vplus-ai-header-icon {
  font-size: 1.5rem;
  color: #00d4ff;
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));
}

.vplus-ai-progress-header .vplus-ai-progress-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.vplus-ai-progress-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vplus-ai-stage-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  border-left: 3px solid #00d4ff;
}

.vplus-ai-stage-wrapper .vplus-ai-stage-spinner {
  font-size: 1rem;
  color: #00d4ff;
}

.vplus-ai-stage-wrapper .vplus-ai-stage-text {
  font-size: 0.9rem;
  color: #e0e0e0;
}

.vplus-ai-progress-bar-wrapper {
  padding: 0;
}

.vplus-ai-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.vplus-ai-progress-fill {
  height: 100%;
  background: #f97316;
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s ease;
}

.vplus-ai-thinking-text {
  font-size: 0.85rem;
  font-style: italic;
  color: #a0a0b0;
  padding-left: 0.25rem;
}

.vplus-ai-token-counter {
  font-size: 0.75rem;
  color: #7c3aed;
  margin-top: 0.25rem;
  padding-left: 0.25rem;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

.vplus-ai-tokens-generated {
  font-weight: 600;
  color: #f97316;
}

/* Compact AI Progress Panel (submission form variant) */
.vplus-ai-progress-compact {
  padding: 0.85rem 1rem;
}
.vplus-ai-progress-compact .vplus-ai-progress-header {
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
}
.vplus-ai-progress-compact .vplus-ai-header-icon {
  font-size: 1.15rem;
}
.vplus-ai-progress-compact .vplus-ai-progress-title {
  font-size: 0.9rem;
}
.vplus-ai-progress-compact .vplus-ai-stage-text {
  font-size: 0.8rem;
}
.vplus-ai-progress-compact .vplus-ai-thinking-text {
  font-size: 0.78rem;
}

/* Consignment Submission AI Progress Panel */
.vplus-consignment-ai-progress-panel {
  background: linear-gradient(135deg, #111827 0%, #1f2937 52%, #27364d 100%);
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 10px;
  padding: 0.95rem 1rem;
  color: #fff;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.22);
}

.vplus-consignment-ai-progress-panel .vplus-ai-progress-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vplus-consignment-ai-progress-panel .vplus-ai-header-icon {
  font-size: 1.1rem;
  color: #f97316;
  filter: drop-shadow(0 0 7px rgba(249, 115, 22, 0.35));
}

.vplus-consignment-ai-progress-panel .vplus-ai-progress-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.vplus-consignment-ai-progress-panel .vplus-ai-progress-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vplus-consignment-ai-progress-panel .vplus-ai-stage-wrapper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  background: rgba(249, 115, 22, 0.1);
  border-left: 3px solid #f97316;
  border-radius: 7px;
}

.vplus-consignment-ai-progress-panel .vplus-ai-stage-spinner {
  font-size: 0.95rem;
  color: #fb923c;
}

.vplus-consignment-ai-progress-panel .vplus-ai-stage-text {
  font-size: 0.82rem;
  color: #f3f4f6;
}

.vplus-consignment-ai-progress-panel .vplus-ai-progress-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

.vplus-consignment-ai-progress-panel .vplus-ai-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f97316 0%, #facc15 100%);
  border-radius: 999px;
  width: 0%;
  transition: width 0.45s ease;
}

.vplus-consignment-ai-progress-panel .vplus-ai-thinking-text {
  font-size: 0.8rem;
  font-style: normal;
  color: #d1d5db;
  padding-left: 0.1rem;
}

/* Blue Flag Progress Panel */
.vplus-bf-progress-panel .vplus-ai-header-icon {
  color: #3b82f6;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}
.vplus-bf-progress-panel .vplus-ai-stage-wrapper {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #3b82f6;
}
.vplus-bf-progress-panel .vplus-bf-stage-spinner {
  font-size: 1rem;
  color: #3b82f6;
}
.vplus-bf-progress-panel .vplus-bf-stage-text {
  font-size: 0.8rem;
  color: #e0e0e0;
}
.vplus-bf-progress-panel .vplus-bf-progress-fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s ease;
}

/* AI-Filled Field Highlight */
.vplus-ai-filled {
  border-color: #d4a017 !important;
  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.25) !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.vplus-ai-filled-label {
  color: #b8860b;
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 2px;
}

/* ============================================
   AI Debug Panel Styles (Super Admin Only)
   ============================================ */

.vplus-ai-debug-panel {
  background: #1a1a2e;
  border-radius: 8px;
  border: 1px solid #2d2d44;
  overflow: hidden;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.8rem;
}

.vplus-ai-debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #252540;
  border-bottom: 1px solid #2d2d44;
  color: #f97316;
}

.vplus-ai-debug-title {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vplus-ai-debug-controls {
  display: flex;
  gap: 0.5rem;
}

.vplus-ai-debug-controls .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: #a0a0b0;
  border-color: #3d3d54;
  background: transparent;
}

.vplus-ai-debug-controls .btn:hover {
  color: #ffffff;
  border-color: #5d5d74;
  background: #2d2d44;
}

.vplus-ai-debug-content {
  padding: 1rem;
}

.vplus-ai-debug-content.collapsed {
  display: none;
}

.vplus-ai-debug-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #2d2d44;
}

.vplus-ai-debug-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.debug-stat-label {
  font-size: 0.65rem;
  color: #6b6b8a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.debug-stat-value {
  font-size: 0.85rem;
  color: #00d4ff;
  font-weight: 500;
}

.vplus-ai-debug-log {
  max-height: 200px;
  overflow-y: auto;
  background: #12121f;
  border-radius: 4px;
  padding: 0.5rem;
}

.debug-log-entry {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.debug-log-entry:last-child {
  margin-bottom: 0;
}

.debug-timestamp {
  color: #6b6b8a;
  font-size: 0.7rem;
  white-space: nowrap;
}

.debug-message {
  color: #c0c0d0;
  word-break: break-word;
}

.debug-log-info {
  background: rgba(0, 212, 255, 0.05);
}

.debug-log-info .debug-message {
  color: #00d4ff;
}

.debug-log-success {
  background: rgba(34, 197, 94, 0.1);
}

.debug-log-success .debug-message {
  color: #22c55e;
}

.debug-log-warning {
  background: rgba(249, 115, 22, 0.1);
}

.debug-log-warning .debug-message {
  color: #f97316;
}

.debug-log-error {
  background: rgba(239, 68, 68, 0.1);
}

.debug-log-error .debug-message {
  color: #ef4444;
}

.debug-log-request {
  background: rgba(124, 58, 237, 0.1);
}

.debug-log-request .debug-message {
  color: #a78bfa;
}

.debug-log-response {
  background: rgba(34, 197, 94, 0.05);
}

.debug-log-response .debug-message {
  color: #86efac;
}

/* Deprecated classes kept for backwards compatibility */

/* ============================================
   AI Provider/Model Quick Switch Panel
   ============================================ */

.vplus-ai-model-selector {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  width: 100%;
}

.vplus-ai-model-selector .text-muted {
  color: #94a3b8 !important;
}

.vplus-ai-model-selector .form-select {
  background-color: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
  font-size: 0.875rem;
}

.vplus-ai-model-selector .form-select:hover {
  border-color: #64748b;
  background-color: #334155;
}

.vplus-ai-model-selector .form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  background-color: #334155;
}

.vplus-ai-model-selector .form-select option {
  background-color: #1e293b;
  color: #e2e8f0;
}

.vplus-ai-provider-model-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  margin-bottom: 0.75rem;
}

.vplus-ai-provider-model-row label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
  white-space: nowrap;
}

.vplus-ai-provider-model-row select {
  flex: 1;
  min-width: 140px;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e2e8f0;
  background-color: #1e293b;
  border: 1px solid #475569;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vplus-ai-provider-model-row select:hover {
  border-color: #64748b;
  background-color: #334155;
}

.vplus-ai-provider-model-row select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.vplus-ai-provider-model-row select option {
  background-color: #1e293b;
  color: #e2e8f0;
  padding: 0.5rem;
}

/* AI Timer Display Styles */

.vplus-ai-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: #000000;
  background: transparent;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
  letter-spacing: 0.025em;
  animation: none;
}

@keyframes timerPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.vplus-ai-timer-complete {
  color: #000000;
  background: transparent;
  animation: none;
}

.vplus-ai-timer-complete::before {
  content: "✓ ";
  font-size: 0.7rem;
  color: #000000;
}

/* Timer icon */
.vplus-ai-timer i {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* ============================================
   Advanced Prompt Options Section
   ============================================ */

/* Collapse button styling */
.vplus-ai-advanced-options .btn-link {
  text-decoration: none;
  font-size: 0.85rem;
}

.vplus-ai-advanced-options .btn-link:hover {
  text-decoration: none;
  color: var(--bs-primary) !important;
}

/* Chevron icon rotation on collapse toggle */
.vplus-ai-advanced-options .vplus-collapse-icon {
  transition: transform 0.2s ease;
  font-size: 0.7rem;
}

.vplus-ai-advanced-options [aria-expanded="true"] .vplus-collapse-icon {
  transform: rotate(90deg);
}

/* Card styling for collapsed content */
.vplus-ai-advanced-options .card-body {
  padding: 0.75rem;
  font-size: 0.875rem;
}

/* Description Format Buttons */
#vplus-ai-desc-format-buttons .vplus-desc-format-btn {
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
}

#vplus-ai-desc-format-buttons .vplus-desc-format-btn.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* Title Element Tags */
.vplus-title-element-btn {
  transition: all 0.15s ease;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

.vplus-title-element-btn.selected {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.vplus-title-element-btn.selected:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Selected title elements (sortable area) */
#vplus-ai-selected-title-elements {
  min-height: 32px;
  background: #f8f9fa;
  border-radius: 0.25rem;
  padding: 0.25rem;
}

#vplus-ai-selected-title-elements .vplus-title-element-tag {
  background: var(--bs-primary);
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  cursor: grab;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

#vplus-ai-selected-title-elements .vplus-title-element-tag .remove-tag {
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.7rem;
}

#vplus-ai-selected-title-elements .vplus-title-element-tag .remove-tag:hover {
  opacity: 1;
}

#vplus-ai-selected-title-elements .vplus-title-element-tag.sortable-ghost {
  opacity: 0.5;
}

/* Add New Prompt option in select */
#vplus-ai-prompts option[value="__add_new__"] {
  font-weight: 600;
  color: var(--bs-primary);
}

/* Web Source Highlighting - AI Content */
.vplus-web-sourced {
  background-color: rgba(255, 235, 59, 0.25);
  border-bottom: 2px dotted rgba(255, 193, 7, 0.7);
  padding: 0 2px;
  border-radius: 2px;
  cursor: help;
  position: relative;
}

.vplus-web-sourced:hover {
  background-color: rgba(255, 235, 59, 0.4);
  border-bottom-color: rgba(255, 193, 7, 1);
}

/* Quill editor integration for web-sourced content */
.ql-editor .vplus-web-sourced {
  background-color: rgba(255, 235, 59, 0.25);
  border-bottom: 2px dotted rgba(255, 193, 7, 0.7);
}

.ql-editor .vplus-web-sourced:hover {
  background-color: rgba(255, 235, 59, 0.4);
}

/* Print styles - show as subtle underline */
@media print {
  .vplus-web-sourced {
    background-color: transparent;
    border-bottom: 1px solid #ccc;
  }
}

/* Web Citation Superscripts */
.vplus-web-citation {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}

.vplus-web-citation a {
  color: var(--bs-primary);
  text-decoration: none;
  font-weight: 600;
}

.vplus-web-citation a:hover {
  text-decoration: underline;
}

/* Sources list at end of description */
.vplus-web-sources {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bs-gray-300);
  font-size: 0.875rem;
  color: var(--bs-gray-600);
}

.vplus-web-sources sup {
  margin-right: 0.25rem;
}

.vplus-web-sources sup a {
  color: var(--bs-primary);
  text-decoration: none;
}

.vplus-web-sources sup a:hover {
  text-decoration: underline;
}

/* Quill editor integration for citations */
.ql-editor .vplus-web-citation a {
  color: var(--bs-primary);
}

.ql-editor .vplus-web-sources {
  border-top: 1px solid #e0e0e0;
}

/* ==========================================================================
   BULK AI ANALYSIS - Sticky Button
   ========================================================================== */

.vplus-bulk-ai-wrapper {
  position: relative;
}

.vplus-bulk-ai-wrapper.is-sticky {
  position: fixed;
  top: 100px;
  right: 30px;
  z-index: 1000;
}

.vplus-bulk-ai-wrapper.is-sticky #vplus-bulk-ai-btn {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: vplusStickySlideIn 0.3s ease-out;
}

@keyframes vplusStickySlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Only apply sticky on Desktop and Tablet */
@media (max-width: 767.98px) {
  .vplus-bulk-ai-wrapper.is-sticky {
    position: relative;
    top: auto;
    right: auto;
  }

  .vplus-bulk-ai-wrapper.is-sticky #vplus-bulk-ai-btn {
    box-shadow: none;
    animation: none;
  }
}

/* ==========================================================================
   SIDEBAR NAVIGATION - Flex Layout Approach
   ========================================================================== */

:root {
  --vplus-sidebar-width: 260px;
  --vplus-sidebar-collapsed-width: 70px;
  --vplus-sidebar-bg: #1a1d21;
  --vplus-sidebar-text: #a0a6b1;
  --vplus-sidebar-text-hover: #ffffff;
  --vplus-sidebar-active-bg: rgba(255, 255, 255, 0.1);
  --vplus-sidebar-divider: rgba(255, 255, 255, 0.1);
}

/* Hide old header when sidebar is active */
body.vplus-sidebar-nav-active .header {
  display: none;
}

/* Layout Wrapper - Flex container for sidebar + content */
.vplus-layout-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Content Area - Takes remaining space */
.vplus-content-area {
  flex: 1;
  min-width: 0; /* Prevent flex item overflow */
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
}

/* When sidebar is visible (desktop), content gets margin */
@media (min-width: 992px) {
  .vplus-content-area {
    margin-left: var(--vplus-sidebar-width);
  }

  body.sidebar-collapsed .vplus-content-area {
    margin-left: var(--vplus-sidebar-collapsed-width);
  }
}

/* Container adjustments within content area */
.vplus-content-area .container {
  max-width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1400px) {
  .vplus-content-area .container {
    max-width: 1320px;
  }
}

/* Main content padding */
.vplus-content-area #main,
.vplus-content-area main {
  padding-top: 1rem;
  flex: 1;
}

/* Sidebar Toggle Button */
.vplus-sidebar-toggle {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1050;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--vplus-sidebar-bg);
  color: #fff;
  border-radius: var(--bs-border-radius);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.vplus-sidebar-toggle:hover {
  background: #2a2f36;
  color: #fff;
}

/* Main Sidebar Container */
.vplus-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--vplus-sidebar-width);
  height: 100vh;
  background: var(--vplus-sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width 0.3s ease;
}

/* Prevent transition flash on page load */
.vplus-sidebar.no-transition,
body.sidebar-collapsed .vplus-sidebar.no-transition {
  transition: none !important;
}

/* Sidebar Header */
.vplus-sidebar-header {
  padding: 1.25rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--vplus-sidebar-divider);
}

.vplus-sidebar-logo {
  max-width: 160px;
}

.vplus-sidebar-logo img {
  max-width: 100%;
  height: auto;
  max-height: 40px;
  filter: brightness(0) invert(1);
}

.vplus-sidebar-close {
  color: var(--vplus-sidebar-text);
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.vplus-sidebar-close:hover {
  color: var(--vplus-sidebar-text-hover);
}

/* Sidebar Navigation */
.vplus-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

.vplus-sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vplus-sidebar-item {
  margin: 0;
}

.vplus-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: var(--vplus-sidebar-text);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.9375rem;
}

.vplus-sidebar-link:hover {
  background: var(--vplus-sidebar-active-bg);
  color: var(--vplus-sidebar-text-hover);
}

.vplus-sidebar-item.active .vplus-sidebar-link {
  background: var(--vplus-sidebar-active-bg);
  color: var(--vplus-sidebar-text-hover);
  border-left: 3px solid var(--bs-primary);
  padding-left: calc(1.25rem - 3px);
}

.vplus-sidebar-icon {
  width: 20px;
  text-align: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* Collapsed state icon styling - white background for visibility */
.vplus-sidebar.collapsed .vplus-sidebar-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--bs-border-radius);
  color: #fff;
}

.vplus-sidebar.collapsed .vplus-sidebar-link:hover .vplus-sidebar-icon {
  background: rgba(255, 255, 255, 0.25);
}

.vplus-sidebar-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar Divider */
.vplus-sidebar-divider {
  padding: 1rem 1.25rem 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--vplus-sidebar-divider);
}

.vplus-sidebar-divider-text {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

/* Sidebar Footer */
.vplus-sidebar-footer {
  padding: 0.75rem 0;
  border-top: 1px solid var(--vplus-sidebar-divider);
}

.vplus-sidebar-admin {
  padding: 0.75rem 1.25rem;
}

.vplus-sidebar-admin.active {
  background: var(--vplus-sidebar-active-bg);
}

/* User Profile */
.vplus-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--vplus-sidebar-divider);
}

.vplus-sidebar-user-avatar {
  flex-shrink: 0;
}

.vplus-sidebar-user-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.vplus-sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.vplus-sidebar-user-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vplus-sidebar-text-hover);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vplus-sidebar-logout {
  font-size: 0.75rem;
  color: var(--vplus-sidebar-text);
  text-decoration: none;
}

.vplus-sidebar-logout:hover {
  color: var(--bs-danger);
}

/* Sidebar Overlay */
.vplus-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1035;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.vplus-sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* Mobile Responsive - Sidebar becomes off-canvas */
@media (max-width: 991.98px) {
  .vplus-content-area {
    margin-left: 0;
  }

  .vplus-sidebar-toggle {
    display: flex;
  }

  .vplus-sidebar {
    transform: translateX(-100%);
  }

  .vplus-sidebar.show {
    transform: translateX(0);
  }
}

/* Tablet - Start collapsed, can expand */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .vplus-content-area {
    margin-left: var(--vplus-sidebar-collapsed-width);
  }

  body:not(.sidebar-collapsed) .vplus-content-area {
    margin-left: var(--vplus-sidebar-width);
  }

  .vplus-sidebar {
    width: var(--vplus-sidebar-collapsed-width);
  }

  .vplus-sidebar:not(.collapsed) {
    width: var(--vplus-sidebar-width);
  }

  .vplus-sidebar.collapsed .vplus-sidebar-logo,
  .vplus-sidebar.collapsed .vplus-sidebar-text,
  .vplus-sidebar.collapsed .vplus-sidebar-divider-text,
  .vplus-sidebar.collapsed .vplus-sidebar-user-info {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
  }

  .vplus-sidebar.collapsed .vplus-sidebar-header {
    justify-content: center;
  }

  .vplus-sidebar.collapsed .vplus-sidebar-link {
    justify-content: center;
  }

  .vplus-sidebar.collapsed .vplus-sidebar-user {
    justify-content: center;
  }
}

/* Sidebar Collapse Toggle Button (Desktop/Tablet) */
.vplus-sidebar-collapse-toggle {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 32px;
  height: 48px;
  background: #2a46d1;
  border: none;
  border-radius: 0 6px 6px 0;
  color: #fff;
  cursor: pointer;
  z-index: 1045;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.vplus-sidebar-collapse-toggle:hover {
  background: #2a46d1;
  filter: brightness(1.15);
  color: #fff;
}

.vplus-sidebar-collapse-toggle .collapse-icon-collapsed {
  display: none;
}

.vplus-sidebar.collapsed
  .vplus-sidebar-collapse-toggle
  .collapse-icon-expanded {
  display: none;
}

.vplus-sidebar.collapsed
  .vplus-sidebar-collapse-toggle
  .collapse-icon-collapsed {
  display: inline;
}

/* Collapsed sidebar state for desktop */
@media (min-width: 1200px) {
  .vplus-sidebar.collapsed {
    width: var(--vplus-sidebar-collapsed-width);
  }

  body.sidebar-collapsed .vplus-content-area {
    margin-left: var(--vplus-sidebar-collapsed-width);
  }

  .vplus-sidebar.collapsed .vplus-sidebar-logo,
  .vplus-sidebar.collapsed .vplus-sidebar-text,
  .vplus-sidebar.collapsed .vplus-sidebar-divider-text,
  .vplus-sidebar.collapsed .vplus-sidebar-user-info,
  .vplus-sidebar.collapsed .vplus-submenu-chevron {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
  }

  .vplus-sidebar.collapsed .vplus-sidebar-header {
    justify-content: center;
  }

  .vplus-sidebar.collapsed .vplus-sidebar-link {
    justify-content: center;
  }

  .vplus-sidebar.collapsed .vplus-sidebar-user {
    justify-content: center;
  }

  .vplus-sidebar.collapsed .vplus-sidebar-submenu {
    display: none;
  }
}

/* Sub-menu styles */
.vplus-sidebar-item.has-submenu .vplus-sidebar-link {
  cursor: pointer;
}

.vplus-submenu-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.vplus-sidebar-item.has-submenu.open .vplus-submenu-chevron {
  transform: rotate(180deg);
}

.vplus-sidebar-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(0, 0, 0, 0.15);
}

.vplus-sidebar-item.has-submenu.open .vplus-sidebar-submenu {
  max-height: 200px;
}

.vplus-sidebar-subitem {
  margin: 0;
}

.vplus-sidebar-sublink {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.25rem 0.5rem 3rem;
  color: var(--vplus-sidebar-text);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.vplus-sidebar-sublink:hover {
  background: var(--vplus-sidebar-active-bg);
  color: var(--vplus-sidebar-text-hover);
}

.vplus-sidebar-subitem.active .vplus-sidebar-sublink {
  color: var(--vplus-sidebar-text-hover);
  background: var(--vplus-sidebar-active-bg);
}

/* User actions row with dark mode toggle */
.vplus-sidebar-user-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

/* Dark Mode Styles */

/* ── FOUC prevention: applied on <html> before body renders ── */
html.vplus-dark-mode,
html[data-bs-theme="dark"] {
  background-color: #1a1d21;
  color-scheme: dark;
}

/* ── Body & root variables ── */
body.vplus-dark-mode,
body[data-bs-theme="dark"] {
  --vplus-surface-canvas: #1a1d21;
  --vplus-surface-panel: #242830;
  --vplus-surface-panel-alt: #2d323c;
  --vplus-surface-subtle: #293545;
  --vplus-border-default: #3a3f4a;
  --vplus-border-strong: #344255;
  --vplus-text-primary: #f4f6fb;
  --vplus-text-secondary: #a0a6b1;
  --vplus-text-muted: #aeb9c8;
  --vplus-heading-accent: #f4f6fb;
  --vplus-link-subtle: #8fb6ff;
  --vplus-accent-text: #6db3f2;
  --vplus-accent-soft: rgba(13, 110, 253, 0.18);
  --vplus-ring-color: rgba(143, 182, 255, 0.2);
  --vplus-info-soft: rgba(13, 110, 253, 0.14);
  --vplus-info-border: rgba(109, 179, 242, 0.45);
  --vplus-info-text: #d8eaff;
  --vplus-warning-soft: rgba(255, 193, 7, 0.14);
  --vplus-warning-border: rgba(255, 193, 7, 0.35);
  --vplus-warning-text: #f5d97d;
  --vplus-success-soft: rgba(40, 167, 69, 0.18);
  --vplus-success-text: #7bd88f;
  --vplus-danger-soft: rgba(220, 53, 69, 0.18);
  --vplus-danger-text: #ff8a96;
  --bs-body-bg: #1a1d21;
  --bs-body-color: #e4e6eb;
  --bs-body-color-rgb: 228, 230, 235;
  --bs-border-color: #3a3f4a;
  --bs-tertiary-bg: #2d323c;
  --bs-secondary-bg: #242830;
  --bs-emphasis-color: #e4e6eb;
  background-color: var(--vplus-surface-canvas);
  color: var(--vplus-text-primary);
}

/* ── Bootstrap utility class overrides ── */
body.vplus-dark-mode .bg-white {
  background-color: #242830 !important;
}

body.vplus-dark-mode .bg-light {
  background-color: #2d323c !important;
}

body.vplus-dark-mode .text-dark {
  color: #e4e6eb !important;
}

body.vplus-dark-mode .text-body {
  color: #e4e6eb !important;
}

body.vplus-dark-mode .text-muted {
  color: #a0a6b1 !important;
}

body.vplus-dark-mode .text-secondary {
  color: #a0a6b1 !important;
}

body.vplus-dark-mode .border,
body.vplus-dark-mode .border-top,
body.vplus-dark-mode .border-bottom,
body.vplus-dark-mode .border-start,
body.vplus-dark-mode .border-end {
  border-color: #3a3f4a !important;
}

body.vplus-dark-mode hr {
  border-color: #3a3f4a;
  opacity: 0.35;
}

body.vplus-dark-mode
  a:not(.btn):not(.nav-link):not(.dropdown-item):not(.vplus-sidebar-link):not(
    .vplus-sidebar-sublink
  ) {
  color: #6db3f2;
}

body.vplus-dark-mode h1,
body.vplus-dark-mode h2,
body.vplus-dark-mode h3,
body.vplus-dark-mode h4,
body.vplus-dark-mode h5,
body.vplus-dark-mode h6,
body.vplus-dark-mode .page-title,
body.vplus-dark-mode .vplus-section-heading,
body.vplus-dark-mode .vplus-card-header {
  color: #f4f6fb;
}

body.vplus-dark-mode .vplus-logo,
body.vplus-dark-mode img.vplus-logo,
body.vplus-dark-mode .vplus-logo img,
body.vplus-dark-mode .vplus-sidebar-logo img {
  filter: brightness(0) invert(1);
}

/* ── Cards ── */
body.vplus-dark-mode .card {
  --bs-body-bg: #242830;
  background-color: #242830;
  color: #e4e6eb;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .card-header {
  background-color: #2d323c;
  border-bottom-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .card-footer {
  background-color: #2d323c;
  border-top-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-form-card,
body.vplus-dark-mode .vplus-vendor-submission-wrapper,
body.vplus-dark-mode .vplus-vendor-submission-form,
body.vplus-dark-mode #vplus-submission-main-card,
body.vplus-dark-mode #vplus-submission-ai-card {
  background-color: #242830;
  color: #e4e6eb;
}

/* Full-mode lot headers in dark mode: the P1 restyle uses a light band; darken
   it and lighten the text so the accent-left treatment still reads. */
body.vplus-dark-mode #vplus-full-mode-cards .vplus-card-header {
  background: #2b3038;
  color: #e4e6eb;
  border-bottom-color: #3a3f4a;
}
body.vplus-dark-mode
  #vplus-full-mode-cards
  .vplus-card-header
  .vplus-collapse-icon {
  background-color: rgba(255, 255, 255, 0.08);
}

body.vplus-dark-mode #vplus-submission-splash {
  background: rgba(26, 29, 33, 0.97);
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-queue-panel {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

body.vplus-dark-mode .vplus-queue-panel-body,
body.vplus-dark-mode .vplus-queue-panel-footer {
  background-color: #242830;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-queue-item {
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-queue-item-thumb {
  background-color: #2d323c;
  color: #a0a6b1;
}

body.vplus-dark-mode #submission-blueflag-specs-panel .card,
body.vplus-dark-mode #submission-blueflag-checks-panel,
body.vplus-dark-mode #submission-blueflag-ppsr-panel,
body.vplus-dark-mode #submission-blueflag-valuation-panel,
body.vplus-dark-mode #submission-blueflag-matches {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode #submission-blueflag-specs-panel .card-header,
body.vplus-dark-mode #submission-blueflag-matches .card-header {
  background-color: rgba(13, 110, 253, 0.18) !important;
  border-bottom-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-blueflag-status {
  color: #f5d97d;
}

body.vplus-dark-mode .vplus-blueflag-heading-icon {
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-blueflag-loading .form-control,
body.vplus-dark-mode .vplus-blueflag-loading .form-select {
  background-color: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.45);
}

/* ── My Account ── */
body.vplus-dark-mode .vplus-my-account,
body.vplus-dark-mode .vplus-account-grid {
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-account-grid .card {
  background-color: #242830 !important;
  border-color: #3a3f4a !important;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-account-grid .card .card-header {
  background: linear-gradient(135deg, #2d323c 0%, #242830 100%) !important;
  border-bottom-color: #3a3f4a !important;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-account-grid .card .card-header h5,
body.vplus-dark-mode .vplus-account-grid .card .card-header h5 i,
body.vplus-dark-mode .vplus-account-grid label,
body.vplus-dark-mode .vplus-account-grid .form-label {
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-account-address-row .card-header {
  background: #2d323c !important;
  border-color: #3a3f4a !important;
}

body.vplus-dark-mode .vplus-account-address-row .card-body,
body.vplus-dark-mode .vplus-account-addresses-card .card-body {
  background-color: #242830;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-account-security-card.is-2fa-required {
  border-color: #6db3f2 !important;
  box-shadow:
    0 0 0 3px rgba(109, 179, 242, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.35);
}

body.vplus-dark-mode .vplus-addr-toggle {
  color: #e4e6eb !important;
}

/* ── Core, Consignment, and Auction Manager specific panels ── */
body.vplus-dark-mode .icon-preview-box,
body.vplus-dark-mode #setup-logo-preview {
  background: #2d323c !important;
  border-color: #3a3f4a !important;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-vimeo-instructions {
  background: rgba(13, 110, 253, 0.14) !important;
  border-left-color: #6db3f2 !important;
  color: #d8eaff;
}

body.vplus-dark-mode .vplus-submissions-list .vplus-submission-card,
body.vplus-dark-mode .vplus-submission-card,
body.vplus-dark-mode .vplus-submissions-manager .card {
  background-color: #242830;
  border-color: #3a3f4a !important;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-submission-thumb {
  background: #2d323c !important;
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-submissions-tabs .nav-link {
  background: #2d323c;
  border-color: #3a3f4a;
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-submissions-tabs .nav-link:hover {
  background: #343a46;
  border-color: #4b5563;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-submissions-tabs .nav-link.active {
  background: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
}

body.vplus-dark-mode .vplus-submissions-manager .table th,
body.vplus-dark-mode .vplus-submissions-manager .table td {
  color: #e4e6eb;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-submissions-manager .tab-pane .d-flex.flex-column,
body.vplus-dark-mode #bulk-actions-toolbar,
body.vplus-dark-mode #pending-bulk-toolbar {
  background: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode #vplus-photo-files .image-box,
body.vplus-dark-mode #vplus-photo-files-additional .image-box,
body.vplus-dark-mode .vplus-photo-section-slot {
  background: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode #vplus-photo-files .vplus-file-move-handle,
body.vplus-dark-mode #vplus-photo-files .vplus-ai-file-icon {
  background: rgba(36, 40, 48, 0.92);
  border-color: #3a3f4a;
}

body.vplus-dark-mode #vplus-photo-files .vplus-media-option.show {
  background: #2d323c;
  border-color: #3a3f4a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

body.vplus-dark-mode #vplus-photo-files .vplus-media-option:before {
  border-color: #3a3f4a transparent transparent transparent;
}

body.vplus-dark-mode #vplus-photo-files .vplus-media-option:after {
  border-color: #2d323c transparent transparent transparent;
}

body.vplus-dark-mode #vplus-photo-files .vplus-media-option .btn,
body.vplus-dark-mode .vplus-primary-photo-label,
body.vplus-dark-mode .vplus-section-group-label,
body.vplus-dark-mode .vplus-section-slot-label {
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-section-add-photo {
  background: transparent;
  border-color: #3a3f4a;
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-section-add-photo:hover {
  background: rgba(13, 110, 253, 0.14);
  border-color: #6db3f2;
  color: #6db3f2;
}

body.vplus-dark-mode .vplus-photo-section-additional {
  border-top-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-prompt-btn {
  background: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-prompt-btn:hover {
  background: rgba(255, 193, 7, 0.14);
  color: #f5d97d;
}

body.vplus-dark-mode .vplus-prompt-btn.active {
  background: rgba(255, 193, 7, 0.25);
  color: #f5d97d;
}

body.vplus-dark-mode .vplus-prompt-btn-add:hover {
  background: rgba(13, 110, 253, 0.14);
  color: #6db3f2;
}

/* ── VendorPlus content panels ── */
/* .vplus-lot-nav is just a Prev/Next/Switch BUTTON ROW, not a panel — give it
   the page canvas so it doesn't read as an odd raised bar; only the actual
   panels keep the elevated surface. */
body.vplus-dark-mode .vplus-lot-nav {
  background-color: transparent;
  border-color: #3a3f4a;
  color: #e4e6eb;
}
body.vplus-dark-mode .vplus-lot-summary,
body.vplus-dark-mode .vplus-lot-details-panel {
  background-color: #242830;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-lot-filters {
  background-color: #242830;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-lot-item {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-card-heading {
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-card-nav {
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-content-area {
  background-color: #1a1d21;
}

/* ── Forms ── */
body.vplus-dark-mode .form-control,
body.vplus-dark-mode .form-select {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .form-control:focus,
body.vplus-dark-mode .form-select:focus {
  background-color: #343a46;
  border-color: var(--bs-primary);
  color: #e4e6eb;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

body.vplus-dark-mode .form-control::placeholder {
  color: #aeb9c8;
  opacity: 1;
}

body.vplus-dark-mode .vplus-submission-description-field::placeholder,
body[data-bs-theme="dark"] .vplus-submission-description-field::placeholder {
  color: #aeb9c8;
  opacity: 1;
}

body.vplus-dark-mode .form-floating > .form-control::placeholder {
  color: transparent;
}

body.vplus-dark-mode .form-floating > .form-control:focus::placeholder {
  color: #6c757d;
}

body.vplus-dark-mode .form-control:disabled,
body.vplus-dark-mode .form-control[readonly],
body.vplus-dark-mode .form-select:disabled {
  background-color: #242830;
  color: #a0a6b1;
}

body.vplus-dark-mode .input-group-text {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #a0a6b1;
}

body.vplus-dark-mode .form-text {
  color: #6c757d;
}

body.vplus-dark-mode .form-check-input {
  background-color: #2d323c;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

body.vplus-dark-mode .form-floating > label {
  color: #a0a6b1;
}

body.vplus-dark-mode .form-range::-webkit-slider-runnable-track {
  background-color: #3a3f4a;
}

body.vplus-dark-mode .file-upload,
body.vplus-dark-mode .vplus-file-upload-field .file-upload,
body.vplus-dark-mode .vplus-lot-photo-upload-field .file-upload {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .file-upload:hover,
body.vplus-dark-mode .vplus-file-upload-field .file-upload:hover,
body.vplus-dark-mode .vplus-lot-photo-upload-field .file-upload:hover {
  background-color: #343a46;
  border-color: #4b5563;
}

body.vplus-dark-mode [data-vplus-photo-trigger] .fa,
body.vplus-dark-mode [data-vplus-photo-trigger] .fas,
body.vplus-dark-mode [data-vplus-photo-trigger] .far,
body.vplus-dark-mode [data-vplus-photo-trigger] .fal,
body.vplus-dark-mode [data-vplus-photo-trigger] .fa-solid,
body.vplus-dark-mode [data-vplus-photo-trigger] .fa-regular,
body[data-bs-theme="dark"] [data-vplus-photo-trigger] .fa,
body[data-bs-theme="dark"] [data-vplus-photo-trigger] .fas,
body[data-bs-theme="dark"] [data-vplus-photo-trigger] .far,
body[data-bs-theme="dark"] [data-vplus-photo-trigger] .fal,
body[data-bs-theme="dark"] [data-vplus-photo-trigger] .fa-solid,
body[data-bs-theme="dark"] [data-vplus-photo-trigger] .fa-regular {
  color: #f4f6fb;
  filter: brightness(0) invert(1);
}

body.vplus-dark-mode .ql-toolbar.ql-snow,
body.vplus-dark-mode .card-body .ql-toolbar.ql-snow {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .ql-container.ql-snow,
body.vplus-dark-mode .card-body .ql-container.ql-snow,
body.vplus-dark-mode .vplus-lot-quick-edit .ql-container {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .ql-editor,
body.vplus-dark-mode .card-body .ql-editor,
body.vplus-dark-mode .vplus-lot-quick-edit .ql-editor {
  background-color: #242830;
  color: #e4e6eb;
}

body.vplus-dark-mode .ql-snow .ql-stroke {
  stroke: #a0a6b1;
}

body.vplus-dark-mode .ql-snow .ql-fill,
body.vplus-dark-mode .ql-snow .ql-stroke.ql-fill {
  fill: #a0a6b1;
}

body.vplus-dark-mode .ql-snow .ql-picker {
  color: #a0a6b1;
}

body.vplus-dark-mode .ql-snow .ql-picker.ql-expanded .ql-picker-options {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

/* ── Tables ── */
body.vplus-dark-mode .table {
  --bs-table-bg: #242830;
  --bs-table-color: #e4e6eb;
  --bs-table-border-color: #3a3f4a;
  --bs-table-striped-bg: #2d323c;
  --bs-table-striped-color: #e4e6eb;
  --bs-table-hover-bg: #343a46;
  --bs-table-hover-color: #e4e6eb;
  color: #e4e6eb;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .table > thead {
  background-color: #2d323c;
  color: #e4e6eb;
}

body.vplus-dark-mode .table > thead > tr > th {
  background-color: #2d323c;
  color: #e4e6eb;
  border-bottom-color: #3a3f4a;
}

body.vplus-dark-mode .table > tbody > tr > td {
  border-bottom-color: #3a3f4a;
}

body.vplus-dark-mode .table-heading {
  background-color: #2d323c;
  color: #e4e6eb;
}

/* ── Modals ── */
body.vplus-dark-mode .modal-content {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .modal-header {
  background-color: #2d323c;
  border-bottom-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .modal-footer {
  background-color: #2d323c;
  border-top-color: #3a3f4a;
}

body.vplus-dark-mode .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Dropdown Menus ── */
body.vplus-dark-mode .dropdown-menu {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .dropdown-item {
  color: #e4e6eb;
}

body.vplus-dark-mode .dropdown-item:hover,
body.vplus-dark-mode .dropdown-item:focus {
  background-color: #343a46;
  color: #ffffff;
}

body.vplus-dark-mode .dropdown-item.active,
body.vplus-dark-mode .dropdown-item:active {
  background-color: var(--bs-primary);
  color: #fff;
}

body.vplus-dark-mode .dropdown-divider {
  border-color: #3a3f4a;
}

body.vplus-dark-mode .dropdown-header {
  color: #a0a6b1;
}

/* ── Nav Tabs & Pills ── */
body.vplus-dark-mode .nav-tabs {
  border-bottom-color: #3a3f4a;
}

body.vplus-dark-mode .nav-tabs .nav-link {
  color: #a0a6b1;
}

body.vplus-dark-mode .nav-tabs .nav-link:hover {
  border-color: #3a3f4a #3a3f4a transparent;
  color: #e4e6eb;
}

body.vplus-dark-mode .nav-tabs .nav-link.active {
  background-color: #242830;
  border-color: #3a3f4a #3a3f4a #242830;
  color: #e4e6eb;
}

body.vplus-dark-mode .nav-pills .nav-link {
  color: #a0a6b1;
}

body.vplus-dark-mode .nav-pills .nav-link.active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* ── Alerts ── */
body.vplus-dark-mode .alert-primary {
  background-color: rgba(13, 110, 253, 0.15);
  border-color: rgba(13, 110, 253, 0.25);
  color: #6db3f2;
}

body.vplus-dark-mode .alert-secondary {
  background-color: rgba(108, 117, 125, 0.15);
  border-color: rgba(108, 117, 125, 0.25);
  color: #a0a6b1;
}

body.vplus-dark-mode .alert-success {
  background-color: rgba(25, 135, 84, 0.15);
  border-color: rgba(25, 135, 84, 0.25);
  color: #75d5a5;
}

body.vplus-dark-mode .alert-danger {
  background-color: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.25);
  color: #f0a0a8;
}

body.vplus-dark-mode .alert-warning {
  background-color: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.25);
  color: #f5d97d;
}

body.vplus-dark-mode .alert-info {
  background-color: rgba(13, 202, 240, 0.15);
  border-color: rgba(13, 202, 240, 0.25);
  color: #6edff6;
}

body.vplus-dark-mode .alert-light {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .alert-dark {
  background-color: rgba(33, 37, 41, 0.5);
  border-color: #3a3f4a;
  color: #e4e6eb;
}

/* ── List Groups ── */
body.vplus-dark-mode .list-group-item {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

body.vplus-dark-mode .list-group-item-action:hover,
body.vplus-dark-mode .list-group-item-action:focus {
  background-color: #2d323c;
  color: #e4e6eb;
}

/* ── Pagination ── */
body.vplus-dark-mode .page-link {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #6db3f2;
}

body.vplus-dark-mode .page-link:hover {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

body.vplus-dark-mode .page-item.disabled .page-link {
  background-color: #1a1d21;
  border-color: #3a3f4a;
  color: #6c757d;
}

body.vplus-dark-mode .pagination a {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #6db3f2;
}

/* ── Breadcrumbs ── */
body.vplus-dark-mode .breadcrumb {
  background-color: transparent;
}

body.vplus-dark-mode .breadcrumb-item + .breadcrumb-item::before {
  color: #6c757d;
}

body.vplus-dark-mode .breadcrumb-item.active {
  color: #a0a6b1;
}

/* ── Badges ── */
body.vplus-dark-mode .badge.bg-light {
  background-color: #3a3f4a !important;
  color: #e4e6eb !important;
}

body.vplus-dark-mode .badge-lighter {
  background-color: #3a3f4a;
  color: #e4e6eb;
}

/* VendorPlus badge variants — keep hues, reduce intensity for dark backgrounds */
body.vplus-dark-mode .vplus-badge-pending,
body.vplus-dark-mode .vplus-badge-warning {
  background-color: rgba(255, 193, 7, 0.2);
  color: #f5d97d;
}

/* Holding-pattern (Revision Pending) — burnt orange, kept distinct from the
   amber pending token above on dark backgrounds too. */
body.vplus-dark-mode .vplus-badge-revision {
  background-color: rgba(214, 122, 51, 0.22);
  color: #f0b787;
}

/* Live context variants on dark backgrounds. */
body.vplus-dark-mode .vplus-badge-live-catalogue {
  background-color: rgba(90, 140, 190, 0.22);
  color: #9dc2e6;
}
body.vplus-dark-mode .vplus-badge-live-ring {
  background-color: rgba(214, 160, 51, 0.22);
  color: #f0cd87;
}

body.vplus-dark-mode .vplus-badge-approved,
body.vplus-dark-mode .vplus-badge-sold,
body.vplus-dark-mode .vplus-badge-success {
  background-color: rgba(25, 135, 84, 0.2);
  color: #75d5a5;
}

body.vplus-dark-mode .vplus-badge-rejected,
body.vplus-dark-mode .vplus-badge-live,
body.vplus-dark-mode .vplus-badge-danger,
body.vplus-dark-mode .vplus-badge-required,
body.vplus-dark-mode .vplus-badge-webcast {
  background-color: rgba(220, 53, 69, 0.2);
  color: #f0a0a8;
}

body.vplus-dark-mode .vplus-badge-assigned,
body.vplus-dark-mode .vplus-badge-info {
  background-color: rgba(13, 202, 240, 0.2);
  color: #6edff6;
}

body.vplus-dark-mode .vplus-badge-unsold,
body.vplus-dark-mode .vplus-badge-withdrawn,
body.vplus-dark-mode .vplus-badge-optional,
body.vplus-dark-mode .vplus-badge-secondary {
  background-color: #3a3f4a;
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-badge-locked {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffda6a;
}

body.vplus-dark-mode .vplus-ob-lock-note {
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-badge-primary,
body.vplus-dark-mode .vplus-badge-timed {
  background-color: rgba(13, 110, 253, 0.2);
  color: #6db3f2;
}

body.vplus-dark-mode .vplus-badge-dark,
body.vplus-dark-mode .vplus-badge-marketplace {
  background-color: #3a3f4a;
  color: #e4e6eb;
}

/* ── Status Boxes ── */
body.vplus-dark-mode .vplus-status-box.vplus-status-draft {
  background-color: #3a3f4a;
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-status-box.vplus-status-review {
  background-color: rgba(255, 193, 7, 0.2);
  color: #f5d97d;
}

body.vplus-dark-mode .vplus-status-box.vplus-status-accepted {
  background-color: rgba(25, 135, 84, 0.2);
  color: #75d5a5;
}

body.vplus-dark-mode .vplus-status-box.vplus-status-rejected {
  background-color: rgba(220, 53, 69, 0.2);
  color: #f0a0a8;
}

/* ── Buttons ── */
body.vplus-dark-mode .btn-light {
  background-color: #3a3f4a;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .btn-light:hover {
  background-color: #474d59;
  border-color: #474d59;
  color: #fff;
}

body.vplus-dark-mode .btn-outline-secondary {
  border-color: #3a3f4a;
  color: #a0a6b1;
}

body.vplus-dark-mode .btn-outline-secondary:hover {
  background-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .btn-outline-light {
  border-color: #3a3f4a;
  color: #a0a6b1;
}

body.vplus-dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Code & Pre ── */
body.vplus-dark-mode code {
  background-color: #2d323c;
  color: #f0a0a8;
}

body.vplus-dark-mode pre {
  background-color: #2d323c;
  color: #e4e6eb;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-token-display {
  background-color: #2d323c;
  color: #e4e6eb;
}

/* ── Tooltips & Popovers ── */
body.vplus-dark-mode .tooltip-inner {
  background-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .bs-tooltip-top .tooltip-arrow::before,
body.vplus-dark-mode
  .bs-tooltip-auto[data-popper-placement^="top"]
  .tooltip-arrow::before {
  border-top-color: #3a3f4a;
}

body.vplus-dark-mode .bs-tooltip-bottom .tooltip-arrow::before,
body.vplus-dark-mode
  .bs-tooltip-auto[data-popper-placement^="bottom"]
  .tooltip-arrow::before {
  border-bottom-color: #3a3f4a;
}

body.vplus-dark-mode .popover {
  background-color: #2d323c;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .popover-header {
  background-color: #343a46;
  border-bottom-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .popover-body {
  color: #e4e6eb;
}

/* ── Media & Gallery ── */
body.vplus-dark-mode .vplus-media-files {
  background-color: #242830;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-media-option {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-media-option:hover {
  background-color: #343a46;
}

body.vplus-dark-mode .vplus-image-container {
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-primary-image {
  border-color: #3a3f4a;
}

/* ── Multi-select Dropdown ── */
body.vplus-dark-mode .vplus-multi-select-dropdown .dropdown-menu {
  background-color: #2d323c;
  border-color: #3a3f4a;
}

/* ── Accordion ── */
body.vplus-dark-mode .accordion-item {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .accordion-button {
  background-color: #2d323c;
  color: #e4e6eb;
  box-shadow: none;
}

body.vplus-dark-mode .accordion-button:not(.collapsed) {
  background-color: #343a46;
  color: #e4e6eb;
}

body.vplus-dark-mode .accordion-button::after {
  filter: invert(0.8);
}

body.vplus-dark-mode .accordion-body {
  background-color: #242830;
}

/* ── Offcanvas ── */
body.vplus-dark-mode .offcanvas {
  background-color: #242830;
  color: #e4e6eb;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .offcanvas-header {
  border-bottom-color: #3a3f4a;
}

/* ── Progress Bars ── */
body.vplus-dark-mode .progress {
  background-color: #2d323c;
}

/* ── Dark mode switch (below logo) ── */
.vplus-header-brand-col {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* (The old dark-mode on/off switch styles were removed — the D&L modal now uses
   the Light/Dark/Auto segmented button group, styled in vendorplus-shared.css.) */

/* ── Traditional top nav bar ── */
body.vplus-dark-mode .navbar {
  background-color: #242830;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .navbar .nav-link {
  color: #a0a6b1;
}

body.vplus-dark-mode .navbar .nav-link:hover {
  color: #e4e6eb;
}

body.vplus-dark-mode .navbar .nav-link.active {
  color: #e4e6eb;
}

body.vplus-dark-mode .welcome-text {
  color: #a0a6b1;
}

body.vplus-dark-mode .vp-user-menu-btn {
  background: rgba(36, 40, 48, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e4e6eb;
}
body.vplus-dark-mode .vp-user-menu-btn:hover,
body.vplus-dark-mode .vp-user-menu-btn.show,
body.vplus-dark-mode .vp-user-menu-btn[aria-expanded="true"] {
  background: #242830;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.25);
}
body.vplus-dark-mode .vp-user-menu-avatar,
body.vplus-dark-mode .vp-user-menu-caret {
  color: #a0a6b1;
}
body.vplus-dark-mode .vp-user-menu-btn + .dropdown-menu .dropdown-item {
  color: #e4e6eb;
}

/* ── Integrations & Settings tab nav ── */
body.vplus-dark-mode .vplus-tab-nav {
  background-color: #242830;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-tab-nav .nav-link {
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-tab-nav .nav-link:hover {
  color: #e4e6eb;
  background-color: #2d323c;
}

body.vplus-dark-mode .vplus-tab-nav .nav-link.active {
  color: #e4e6eb;
  background-color: #343a46;
}

/* ── Select2 ── */
body.vplus-dark-mode .select2-container--default .select2-selection--single,
body.vplus-dark-mode .select2-container--default .select2-selection--multiple,
body.vplus-dark-mode .select2-container--bootstrap .select2-selection--single,
body.vplus-dark-mode
  .select2-container--bootstrap
  .select2-selection--multiple {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}
/* #3 Photo App uses the --bootstrap Select2 theme (the dark rules previously
   only covered --default), so its dropdowns rendered white. Cover both. */
body.vplus-dark-mode
  .select2-container--bootstrap
  .select2-selection__rendered {
  color: #e4e6eb;
}
body.vplus-dark-mode
  .select2-container--bootstrap
  .select2-selection__placeholder {
  color: #a0a6b1;
}
body.vplus-dark-mode .select2-container--bootstrap .select2-selection__arrow b {
  border-top-color: #c9cdd4;
}
body.vplus-dark-mode .select2-container--bootstrap .select2-results__option {
  color: #e4e6eb;
}
body.vplus-dark-mode
  .select2-container--bootstrap
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary);
  color: #fff;
}

body.vplus-dark-mode
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #e4e6eb;
}

body.vplus-dark-mode
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #6c757d;
}

body.vplus-dark-mode .select2-dropdown {
  background-color: #2d323c;
  border-color: #3a3f4a;
}

body.vplus-dark-mode
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary);
}

body.vplus-dark-mode
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .select2-container--default .select2-results__option {
  color: #e4e6eb;
}

/* ── Shadows ── */
body.vplus-dark-mode .shadow,
body.vplus-dark-mode .shadow-sm,
body.vplus-dark-mode .shadow-lg {
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4) !important;
}

/* ── Misc Components ── */
body.vplus-dark-mode .vplus-icon-btn {
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-icon-btn:hover {
  color: #e4e6eb;
}

body.vplus-dark-mode .grey-text {
  color: #6c757d;
}

body.vplus-dark-mode .strikethrough {
  color: #6c757d;
}

/* ── Scrollbar ── */
body.vplus-dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.vplus-dark-mode ::-webkit-scrollbar-track {
  background: #1a1d21;
}

body.vplus-dark-mode ::-webkit-scrollbar-thumb {
  background: #3a3f4a;
  border-radius: 4px;
}

body.vplus-dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #474d59;
}

/* ── Primary color & link override for dark mode ── */
body.vplus-dark-mode {
  --vplus-primary: #6db3f2;
  /* Lighter fill + softer glow on the dark ground — #1a7fff is too dense to
     read against dark chrome, and the light-mode glow blooms. */
  --vplus-ai-accent: #4d9dff;
  --vplus-ai-accent-glow: rgba(77, 157, 255, 0.28);
  --bs-primary: #6db3f2;
  --bs-primary-rgb: 109, 179, 242;
  --bs-link-color: #6db3f2;
  --bs-link-color-rgb: 109, 179, 242;
  --bs-link-hover-color: #93c9f7;
  --bs-secondary-color: #a0a6b1;
}

/* ── Auction / top nav link colors ── */
body.vplus-dark-mode .auction-nav .nav-link {
  --bs-nav-link-color: #a0a6b1;
  color: #a0a6b1;
}

body.vplus-dark-mode .auction-nav .nav-link:hover {
  color: #e4e6eb;
}

body.vplus-dark-mode .auction-nav .nav-item.active .nav-link {
  color: #e4e6eb;
}

body.vplus-dark-mode .auction-nav .dropdown-item {
  --bs-dropdown-link-color: #e4e6eb;
}

/* ── Dictation buttons ── */
body.vplus-dark-mode .vp-dictation-btn {
  background-color: #2d323c;
  color: #e4e6eb;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vp-dictation-btn:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

body.vplus-dark-mode .vp-dictation-btn.active {
  color: #dc3545;
  background-color: #2d323c;
  border-color: #dc3545;
}

body.vplus-dark-mode .vp-dictation-card-btn {
  background-color: #2d323c;
  color: #e4e6eb;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vp-dictation-card-btn:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

/* ── Button groups (Item Type, Purchase Options) ── */
body.vplus-dark-mode .form-row .btn-group .btn {
  border-color: #3a3f4a;
  color: #a0a6b1;
  background-color: #242830;
}

body.vplus-dark-mode .form-row .btn-group .btn:hover {
  background-color: #2d323c;
  color: #e4e6eb;
}

body.vplus-dark-mode .form-row .btn-group .btn-check:checked + .btn {
  background-color: #343a46;
  border-color: #6db3f2;
  color: #e4e6eb;
}

body.vplus-dark-mode .btn-group .btn-outline-secondary {
  border-color: #3a3f4a;
  color: #a0a6b1;
  background-color: #242830;
}

body.vplus-dark-mode .btn-group .btn-outline-secondary:hover {
  background-color: #2d323c;
  color: #e4e6eb;
}

body.vplus-dark-mode .btn-group .btn-check:checked + .btn-outline-secondary {
  background-color: #343a46;
  border-color: #6db3f2;
  color: #e4e6eb;
}

/* ── Input group icon color inheritance ── */
body.vplus-dark-mode .input-group-text .fa-regular,
body.vplus-dark-mode .input-group-text .fa-solid,
body.vplus-dark-mode .input-group-text .fas,
body.vplus-dark-mode .input-group-text .far,
body.vplus-dark-mode .input-group-text i {
  color: inherit;
}

body.vplus-dark-mode .vplus-info-tooltip {
  color: #a0a6b1;
}

/* ── Searchable select (Category/Vendor) ── */
body.vplus-dark-mode .vplus-ss-trigger {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-ss-trigger:focus,
body.vplus-dark-mode .vplus-ss-trigger.vplus-ss-open {
  border-color: #6db3f2;
  box-shadow: 0 0 0 0.25rem rgba(109, 179, 242, 0.15);
}

body.vplus-dark-mode .vplus-ss-trigger.vplus-ss-placeholder .vplus-ss-display {
  color: #6c757d;
}

body.vplus-dark-mode .vplus-ss-dropdown {
  background: #2d323c;
  border-color: #3a3f4a;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

body.vplus-dark-mode .vplus-ss-search-wrap {
  border-bottom-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-ss-search-wrap input {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-ss-item {
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-ss-item:hover,
body.vplus-dark-mode .vplus-ss-item.vplus-ss-focused {
  background-color: #343a46;
}

body.vplus-dark-mode .vplus-ss-group-label {
  color: #6c757d;
}

body.vplus-dark-mode .form-floating .vplus-ss-wrapper ~ label {
  color: #a0a6b1;
}

/* ── Nav tabs with card borders ── */
body.vplus-dark-mode .nav-tabs:has(+ .card) .nav-link {
  border-color: #3a3f4a;
  box-shadow: none;
}

body.vplus-dark-mode .nav-tabs:has(+ .card) .nav-link.active {
  background-color: #242830;
  border-color: #3a3f4a #3a3f4a #242830;
  border-bottom-color: #242830;
  color: #e4e6eb;
}

body.vplus-dark-mode .nav-tabs:has(+ .card) .nav-link:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  color: #a0a6b1;
}

/* ── Photo trigger ── */
body.vplus-dark-mode .vplus-lot-photo-trigger {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-lot-photo-trigger:hover {
  background-color: #343a46;
}

/* ── Number separator buttons ── */
body.vplus-dark-mode .btn-group > .btn.active {
  background-color: #343a46;
  color: #e4e6eb;
}

/* ════════════════════════════════════════════════════════════════════════
   Dark-mode tuning pass (2026-07-23) — findings from a full Playwright audit.
   Two systemic root causes + a set of component white-bg leaks.

   SYSTEMIC 1 — filled primary controls. Dark mode remaps --vplus-primary to a
   light sky-blue (#6db3f2) so LINK TEXT is legible on the dark canvas. But that
   same token fills .btn-primary / .badge.bg-primary / the active settings tab,
   which keep WHITE text → white-on-#6db3f2 is only ~2.2:1. Fixed by giving
   FILLED primary surfaces their own saturated blue that carries white text at
   AA, while leaving link/text primary on the light token untouched.
   SYSTEMIC 2 — Bootstrap .text-dark badges. The global dark-mode .text-dark
   override lightens intentionally-dark badge text (e.g. amber .bg-warning),
   dropping it to ~2.2:1. Re-pin dark text on the warning/info badge chips.
   ════════════════════════════════════════════════════════════════════════ */
body.vplus-dark-mode {
  /* Saturated fill for filled primary surfaces (white text passes AA on this). */
  --vplus-primary-fill: #2f6fd0;
}

/* SYSTEMIC 1 — filled primary buttons keep white text on the saturated fill. */
body.vplus-dark-mode .btn.btn-primary {
  --bs-btn-bg: var(--vplus-primary-fill);
  --bs-btn-border-color: var(--vplus-primary-fill);
  --bs-btn-hover-bg: #3d7fe0;
  --bs-btn-hover-border-color: #3d7fe0;
  --bs-btn-active-bg: #2a63bd;
  --bs-btn-active-border-color: #2a63bd;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

/* Filled primary badge + the "Default" template pill. */
body.vplus-dark-mode .badge.bg-primary {
  background-color: var(--vplus-primary-fill) !important;
  color: #fff !important;
}

/* Active list-group tab (settings side-nav) — saturated fill, white text. */
body.vplus-dark-mode .list-group-item.active {
  background-color: var(--vplus-primary-fill);
  border-color: var(--vplus-primary-fill);
  color: #fff;
}

/* Active nav-pill (My Account tabs, and any other .nav-pills) — same light-blue
   fill / white text = ~2.2:1. Re-fill with the saturated blue. */
body.vplus-dark-mode .nav-pills {
  --bs-nav-pills-link-active-bg: var(--vplus-primary-fill);
}
body.vplus-dark-mode .nav-pills .nav-link.active {
  background-color: var(--vplus-primary-fill);
  color: #fff;
}

/* ── Hover-state neutralisation (deep pass 2026-07-23) ──
   These interactive elements set a LIGHT :hover background with no dark-mode
   variant, so in dark mode hovering flashes a near-white panel (and drops the
   text to ~1.9:1). Re-point each hover to a dark elevated surface. Grouped by
   the audited selectors — shared tabs/tables/buttons come first. */

/* Status-filter tabs (auction + lot + submission lists) + generic status filter
   option — the most-used shared hover surface. */
body.vplus-dark-mode .vplus-auction-status-tabs .nav-link:hover,
body.vplus-dark-mode .vplus-lot-status-tabs .nav-link:hover,
body.vplus-dark-mode .vplus-submissions-tabs .nav-link:hover,
body.vplus-dark-mode .vplus-status-filter-option:hover {
  background-color: #2d323c !important;
  color: var(--vplus-text-primary) !important;
}

/* List/table row hover (vendor list, meta table) — light row flash → dark. */
body.vplus-dark-mode .vplus-vendor-list tbody tr:hover td,
body.vplus-dark-mode .vplus-meta-table tr:hover,
body.vplus-dark-mode .vplus-meta-table tr:hover td {
  background-color: #2a2f38 !important;
}

/* Editor / process / ratio / copy buttons + user-menu button. */
body.vplus-dark-mode .vplus-editor-btn:hover,
body.vplus-dark-mode .vplus-editor-ratio:hover,
body.vplus-dark-mode .vplus-process-prompt .btn-proc:hover,
body.vplus-dark-mode #vplus-copy-from-last:hover,
body.vplus-dark-mode .vp-user-menu-btn:hover,
body.vplus-dark-mode .vplus-express-customise-btn:hover,
body.vplus-dark-mode .vplus-express-customise-btn:focus {
  background-color: #2d323c !important;
  color: var(--vplus-text-primary) !important;
}

/* Photo/upload affordances (dropzone, photo trigger, add-photo, section-add). */
body.vplus-dark-mode .vplus-lot-dropzone:hover,
body.vplus-dark-mode .vplus-lot-photo-trigger:hover,
body.vplus-dark-mode .vplus-section-add-photo:hover {
  background-color: #2a2f38 !important;
  color: var(--vplus-text-primary) !important;
}

/* .btn-outline-dark idle state (e.g. the inactive "Full Mode" toggle) renders
   near-black text on the dark canvas = ~1.1:1, invisible. Re-point its outline
   colour to a light neutral; the checked/hover fill stays as authored. */
body.vplus-dark-mode .btn-outline-dark {
  --bs-btn-color: #c9cdd4;
  --bs-btn-border-color: #545b66;
  --bs-btn-hover-color: #1a1d21;
  --bs-btn-hover-bg: #c9cdd4;
  --bs-btn-hover-border-color: #c9cdd4;
  --bs-btn-active-color: #1a1d21;
  --bs-btn-active-bg: #c9cdd4;
  --bs-btn-active-border-color: #c9cdd4;
}

/* AI-card / lot-panel floating labels in their EMPTY (placeholder) state use a
   hardcoded #666 (inline <style>) with no dark variant → ~2.6:1. Lighten. */
body.vplus-dark-mode #vplus-card--ai .vplus-lot-panel__field label,
body.vplus-dark-mode .vplus-lot-panel__field label {
  color: #a0a6b1;
}

/* SYSTEMIC 2 — keep dark text on the amber/cyan utility badges. */
body.vplus-dark-mode .badge.bg-warning,
body.vplus-dark-mode .badge.bg-warning.text-dark {
  color: #1a1d21 !important;
}
body.vplus-dark-mode .badge.bg-info,
body.vplus-dark-mode .badge.bg-info.text-dark {
  color: #1a1d21 !important;
}

/* ── Component white-bg leaks (styled via inline <style> in PHP templates, so
   the fixes live here in the always-loaded Core dark block). ── */

/* Lot-list sticky action toolbar (archive-lot.php) — was near-white. */
body.vplus-dark-mode .vplus-action-toolbar,
body.vplus-dark-mode .vplus-lot-list-header {
  background-color: var(--vplus-surface-panel) !important;
  border-color: var(--vplus-border-default) !important;
  color: var(--vplus-text-primary);
}
body.vplus-dark-mode .vplus-action-button {
  background-color: var(--vplus-surface-panel-alt);
  border-color: var(--vplus-border-default);
  color: var(--vplus-text-primary);
}
body.vplus-dark-mode .vplus-action-button:hover {
  background-color: #343a46;
  color: var(
    --vplus-text-primary
  ) !important; /* base :hover darkens the text → unreadable on dark; force light */
  border-color: #545b66;
}
body.vplus-dark-mode .vplus-action-button:hover i,
body.vplus-dark-mode .vplus-action-button:hover .fa-solid,
body.vplus-dark-mode .vplus-action-button:hover .fa-regular {
  color: var(--vplus-text-primary) !important;
}

/* Auctions-panel refresh buttons (archive-sale-auctions-panel.php) — light chips. */
body.vplus-dark-mode .vplus-refresh-btn {
  background-color: var(--vplus-surface-panel-alt);
  border-color: var(--vplus-border-default);
  color: var(--vplus-accent-text);
}
body.vplus-dark-mode .vplus-refresh-btn:hover {
  background-color: #343a46;
}

/* Lot-form side panel + sync bar + checklist (lot-form-body.php). */
body.vplus-dark-mode .vplus-lot-panel,
body.vplus-dark-mode .vplus-sync-options,
body.vplus-dark-mode .vplus-required-checklist,
body.vplus-dark-mode .vplus-web-search-inline {
  background-color: var(--vplus-surface-panel) !important;
  border-color: var(--vplus-border-default) !important;
  color: var(--vplus-text-primary);
}
body.vplus-dark-mode .vplus-required-item {
  background-color: var(--vplus-surface-panel-alt);
  border-color: var(--vplus-border-default);
  color: var(--vplus-text-primary);
}
/* View toggle + Express customise buttons — were plain white. */
body.vplus-dark-mode .vplus-view-btn,
body.vplus-dark-mode .vplus-express-customise-btn {
  background-color: var(--vplus-surface-panel-alt);
  border-color: var(--vplus-border-default);
  color: var(--vplus-text-primary);
}
/* The base rule forces `color:#000 !important` on the button + its icons (to beat
   the orange header's white). In dark mode that black is invisible on the dark
   surface — override with the same !important weight + descendant selectors. */
body.vplus-dark-mode .vplus-express-customise-btn,
body.vplus-dark-mode .vplus-express-customise-btn i,
body.vplus-dark-mode .vplus-express-customise-btn .fa-solid,
body.vplus-dark-mode .vplus-express-customise-btn .fa-regular,
body.vplus-dark-mode .vplus-express-customise-btn svg {
  color: #e4e6eb !important;
}
body.vplus-dark-mode .vplus-express-customise-btn:hover,
body.vplus-dark-mode .vplus-express-customise-btn:focus {
  background: #343a46 !important;
  border-color: var(--vplus-border-default) !important;
}
body.vplus-dark-mode .vplus-view-btn.active {
  background-color: var(--vplus-primary-fill);
  border-color: var(--vplus-primary-fill);
  color: #fff;
}

/* Readonly / disabled fields (#17a): make non-interactable fields visually
   distinct from clickable ones. Interactive inputs get the DARKER surface (the
   "click here" affordance); readonly/disabled get a slightly BRIGHTER surface
   plus a subtle diagonal stripe so it's obvious they're locked. */
body.vplus-dark-mode .form-control,
body.vplus-dark-mode .form-select,
body.vplus-dark-mode .vplus-express-sync {
  background-color: #22262e; /* interactive = darker, reads as "click here" */
}
body.vplus-dark-mode .form-control[readonly],
body.vplus-dark-mode .form-control:disabled,
body.vplus-dark-mode .form-select:disabled,
body.vplus-dark-mode .vplus-express-sync[readonly],
body.vplus-dark-mode .vplus-express-sync:disabled,
body.vplus-dark-mode input.vplus-auto-increment-locked {
  background-color: #30353f !important; /* locked = brighter */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.035) 0,
    rgba(255, 255, 255, 0.035) 6px,
    transparent 6px,
    transparent 12px
  ) !important;
  color: var(--vplus-text-secondary) !important;
  border-color: #454b57 !important;
  cursor: not-allowed;
}

/* ── Lot-page dark-mode refinements (deep pass 3) ── */

/* #18 searchable-select + Tom Select caret/chevron — was dark grey on the dark
   trigger. Lighten it. */
body.vplus-dark-mode .vplus-ss-trigger .vplus-ss-caret,
body.vplus-dark-mode .vplus-ss-trigger::after,
body.vplus-dark-mode .ts-vp-caret,
body.vplus-dark-mode .ts-wrapper .ts-vp-caret {
  color: #c9cdd4 !important;
  border-top-color: #c9cdd4 !important; /* if the caret is a CSS triangle */
  opacity: 1;
}

/* #16 file-delete icon — was gray-800 (~#343a40), invisible on dark. */
body.vplus-dark-mode .vplus-file-item .vplus-file-delete,
body.vplus-dark-mode .vplus-file-container .vplus-file-delete {
  color: #aeb4bf;
}
body.vplus-dark-mode .vplus-file-item .vplus-file-delete:hover,
body.vplus-dark-mode .vplus-file-container .vplus-file-delete:hover {
  color: #ff8a96;
}

/* #16 file-item icon scale + spacing (both modes) — bump the leading icon size
   and even out the gaps between it and the filename/actions. */
.vplus-file-item,
.vplus-file-item--document,
.vplus-file-container .vplus-file-row {
  gap: 0.75rem;
}
.vplus-file-item > .vplus-file-icon,
.vplus-file-item--document > .vplus-file-icon,
.vplus-file-item .vplus-file-type-icon {
  font-size: 1.35rem;
  min-width: 1.6rem;
  text-align: center;
}

/* #17b AI file icon — solid blue chip + white glyph + soft glow PULSE, both
   modes (a deliberate accent, so it's the same in light & dark). */
.vplus-ai-file-icon {
  background: #2f6fd0 !important;
  color: #ffffff !important;
  border-color: #2f6fd0 !important;
  box-shadow: 0 0 0 0 rgba(47, 111, 208, 0.5);
  animation: vplusAiFileGlow 2.2s ease-in-out infinite;
}
@keyframes vplusAiFileGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(47, 111, 208, 0.45);
  }
  50% {
    box-shadow: 0 0 10px 3px rgba(47, 111, 208, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vplus-ai-file-icon {
    animation: none;
  }
}

/* #15 Quill editor content padding — text was hitting the edge; the dark bg made
   it obvious. Add breathing room. */
body.vplus-dark-mode .ql-editor {
  padding: 0.75rem 0.9rem;
}
body.vplus-dark-mode .ql-container {
  background-color: #22262e;
}

/* Consignor submission template picker buttons (vendor-submission-form-body.php). */
body.vplus-dark-mode .vplus-submission-template-btn {
  background-color: var(--vplus-surface-panel-alt);
  border-color: var(--vplus-border-default);
  color: var(--vplus-text-primary);
}
body.vplus-dark-mode .vplus-submission-template-btn.active {
  background-color: var(--vplus-primary-fill);
  border-color: var(--vplus-primary-fill);
  color: #fff;
}

/* "Currently editing" floating badge (cm-item-template-editor.php) — white bg. */
body.vplus-dark-mode .vplus-it-editing-badge {
  background-color: var(--vplus-surface-panel) !important;
  border-color: var(--vplus-border-default) !important;
  color: var(--vplus-text-primary) !important;
}

/* Sale status-filter tabs (archive-sale-auctions-panel.php). The LIGHT design
   deliberately avoids a solid blue fill on the active tab — it uses a soft
   neutral surface + dark text + an accent UNDERLINE so the per-status label and
   coloured dot stay legible. Dark mode must mirror that intent: a soft DARK
   surface + light text + the accent underline, with each status dot keeping its
   own hue. (The previous override forced dark-on-blue, which lost the per-status
   identity and read poorly — this restores it.) */
body.vplus-dark-mode .vplus-auction-status-tabs .nav-link,
body.vplus-dark-mode .vplus-sale-status-tab {
  border-color: #3a3f4a;
  color: #c9cdd4;
}
/* Active tab: dark mode inherits the SOLID SEMANTIC FILL introduced in the
   light theme (archive-sale-auctions-panel.php). Only the neutral fallback and
   the elevation are restated here — the per-status `:has()` fills live with the
   light-mode rules and apply in both themes, so the two can never drift.
   ⚠ Specificity, measured: the per-status `:has()` fills score [0,5,0] (a
   `:has()` counts its argument) and BEAT these rules' [0,4,1], so the semantic
   colours survive dark mode unaided. These rules DO out-specify the neutral
   [0,3,0] fallback though — so they deliberately set only
   `border-color`/`box-shadow`/`color`, never `background`. Adding a background
   here would flatten the "All" tab (and any status without a `:has()` rule)
   back to one colour. */
body.vplus-dark-mode .vplus-auction-status-tabs .nav-link.active,
body.vplus-dark-mode .vplus-sale-status-tab.active {
  border-color: transparent;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
  color: #fff;
}
body.vplus-dark-mode .vplus-auction-status-tabs .nav-link.active:hover,
body.vplus-dark-mode .vplus-sale-status-tab.active:hover {
  border-color: transparent;
  color: #fff;
}
/* On an UNSELECTED tab the status DOT keeps its own semantic colour; do NOT
   recolour .fa-circle here. The ACTIVE tab is the one exception — see the
   scoped override in archive-sale-auctions-panel.php, where the filled pill
   would otherwise render a dark dot on a dark fill. */

/* CR-preset / filled outline-secondary buttons: when "active"/checked the fill
   is Bootstrap grey (#6c757d) but dark mode had lightened the text to muted grey
   → ~1.9:1. Restore white text on the filled state. */
body.vplus-dark-mode .btn-outline-secondary.active,
body.vplus-dark-mode .btn-check:checked + .btn-outline-secondary {
  color: #fff !important;
}

/* Accent-filled action buttons that fill from --bs-primary directly (NOT via
   .btn-primary, so the systemic rule above misses them): the Express-header
   Templates button and the PDF "Analyse" doc link. Dark mode remaps --bs-primary
   to the light link-blue → white text drops to ~2.2:1. Re-fill with the
   saturated blue so their white text/icon passes AA. */
body.vplus-dark-mode .vplus-express-templates-btn {
  background: var(--vplus-primary-fill) !important;
  border-color: var(--vplus-primary-fill) !important;
}
body.vplus-dark-mode .vplus-express-templates-btn:hover,
body.vplus-dark-mode .vplus-express-templates-btn:focus {
  background: #3d7fe0 !important;
  border-color: #3d7fe0 !important;
}
body.vplus-dark-mode .vplus-doc-ai-link {
  background-color: var(--vplus-primary-fill) !important;
  border-color: var(--vplus-primary-fill) !important;
  color: #fff !important;
}

/* Transfer Modal Progress Bar */
#vplus-transfer-modal .vplus-transfer-progress {
  max-width: 100%;
  overflow: hidden;
}

#vplus-transfer-modal .progress {
  width: 100%;
  height: 12px;
  overflow: hidden;
  background-color: #e9ecef;
  border-radius: 2px;
}

#vplus-transfer-modal .progress-bar {
  max-width: 100%;
  height: 100%;
}

/* ==========================================================================
   MOBILE RESPONSIVE FIXES
   ========================================================================== */

/* Prevent all elements from breaking viewport */
.vplus-content-area,
.vplus-lot-nav,
.vplus-action-row,
.vplus-lot-filters,
.vplus-lot-list,
.vplus-lot-item,
.vplus-lot-summary,
.card,
.card-body {
  max-width: 100%;
  box-sizing: border-box;
}

/* Mobile Button Styles - Small Screens */
@media (max-width: 767px) {
  /* Navigation bar wrapping */
  .vplus-lot-nav {
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .vplus-lot-nav > * {
    max-width: 100%;
  }

  /* D8 — mobile only: Create New Item is the far more common action on a
     phone, so it comes before Bulk Import Items. Done with flex `order` rather
     than a markup move because there is ONE DOM order shared with desktop,
     where the established left-to-right order is deliberate. The Back link
     keeps its own order:-1 (set at the 480px breakpoint) and stays first. */
  .vplus-lot-nav .btn-new-lot {
    order: 1;
  }
  .vplus-lot-nav .vplus-bulk-actions {
    order: 2;
  }
  /* AI Speed Lotting drops BELOW Create New Auction on phones — it is the
     specialist route, and the two create buttons are the common actions.
     This REVERSES the desktop rule (Speed is 1 there), so the value must beat
     every other button's: new-lot(1) and bulk-actions(2) above, and
     Create New Auction, which inherits order:2 from the base block. */
  .vplus-lot-nav .btn-speed-lotting {
    order: 3;
  }

  /* Action row wrapping for mobile */
  .vplus-action-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* `.btn-new-lot` was in this group, which shrank it to 0.8125rem while the
     Bulk Import button beside it kept the default size — the two sit directly
     above one another in the stacked lot nav, so the mismatch was obvious.
     (`.btn-bulk-import` never matched anything: no markup uses that class.)
     Lot-nav sizing is owned by the `.vplus-lot-nav .btn-new-lot` rule below. */
  .vplus-action-row .btn,
  .vplus-btn-sync-to,
  .vplus-btn-pull-from {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
  }

  /* Hide button labels on small screens, show icons */
  .vplus-action-row .btn .btn-link-label {
    display: none;
  }

  /* Show all lot-nav labels on mobile (buttons wrap at this width) */
  .vplus-lot-nav .btn .btn-link-label {
    display: inline;
  }

  /* Filter panel on mobile */
  .vplus-lot-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards should not exceed viewport (except those with dropdowns) */
  .card:not(.vplus-sales-list .card):not(.vplus-submission-card):not(
      .vplus-settings-card
    ) {
    overflow: hidden;
  }
  #vplus-sale-filter {
    overflow: visible;
  }
  #vplus-sale-filter .card {
    overflow: visible !important;
  }

  /* Lot item responsive */
  .vplus-lot-item .lot-title {
    font-size: 0.9rem;
    word-break: break-word;
  }

  /* Form rows on mobile */
  .form-row .btn-group {
    flex-wrap: wrap;
  }

  .form-row .btn-group .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Very small screens (under 480px) */
@media (max-width: 480px) {
  /* Stack action buttons vertically */
  .vplus-action-row {
    flex-direction: column;
  }

  .vplus-action-row .btn {
    width: 100%;
    justify-content: center;
  }

  /* Lot nav goes full width */
  .vplus-lot-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .vplus-lot-nav .me-auto {
    order: -1;
    margin-bottom: 0.5rem;
  }

  /* Show button labels on full-width buttons */
  .vplus-action-row .btn .btn-link-label {
    display: inline;
  }

  /* Badge pills wrapping */
  .vplus-lot-item .badges {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .vplus-lot-item .badge {
    font-size: 0.7rem;
  }
}

/* Tablet adjustments (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .vplus-lot-nav .btn .btn-link-label {
    display: inline;
  }

  .vplus-action-row .btn {
    padding: 0.375rem 0.625rem;
  }
}

/* Lot form card responsive */
@media (max-width: 575px) {
  .vplus-lot-card .card-header {
    padding: 0.75rem 1rem;
  }

  .vplus-lot-card .card-body {
    padding: 1rem;
  }

  /* Express mode form rows */
  #express-lot-number-row,
  #express-auto-lot-numbering-row {
    flex: 1 1 100%;
  }
}

/* ==========================================
   DICTATION FEATURE STYLES
   ========================================== */

/* Dictation button styling */
.vp-dictation-btn {
  transition: all 0.2s ease;
  background-color: #fff;
  color: #212529;
  border-color: #dee2e6;
}

.vp-dictation-btn:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

/* Active state - white background with red icon and border (no red fill) */
.vp-dictation-btn.active {
  color: #dc3545; /* Red icon */
  background-color: #fff; /* White background to show progress */
  border-color: #dc3545;
  animation: vp-pulse-btn 1.5s infinite;
}

.vp-dictation-btn.active:hover {
  background-color: #fff;
  border-color: #b02a37;
  color: #b02a37;
}

/* Card-level dictation button */
.vp-dictation-card-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  background-color: #fff;
  color: #212529;
  border-color: #dee2e6;
}

.vp-dictation-card-btn:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.vp-dictation-card-btn .vp-dictation-btn-label {
  margin-left: 0.25rem;
}

@media (max-width: 576px) {
  .vp-dictation-card-btn .vp-dictation-btn-label {
    display: none;
  }
}

/* Field-level dictation button */
.vp-dictation-field-btn {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
  border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
}

/* Ensure form-floating has flex inside input-group */
.input-group > .form-floating {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* Input group with dictation button maintains proper borders */
.input-group > .form-floating > .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Field recording state - pulsing red border */
.vp-dictation-active {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  animation: vp-pulse-border 1.5s infinite;
}

/* Quill editor active state */
.ql-editor.vp-dictation-active {
  outline: 2px solid #dc3545 !important;
  outline-offset: -2px;
  animation: vp-pulse-border 1.5s infinite;
}

.ql-container:has(.ql-editor.vp-dictation-active) {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Field completion state - green border */
.vp-dictation-complete {
  border-color: #198754 !important;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
  animation: vp-border-fade 1.5s forwards;
}

/* Quill editor complete state */
.ql-editor.vp-dictation-complete {
  outline: 2px solid #198754 !important;
  outline-offset: -2px;
}

.ql-container:has(.ql-editor.vp-dictation-complete) {
  border-color: #198754 !important;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

/* Card active state during sequence dictation */
.vp-dictation-sequence-active {
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
  border-radius: 0.375rem;
}

/* Pulsing button animation */
@keyframes vp-pulse-btn {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* Pulsing border animation */
@keyframes vp-pulse-border {
  0% {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  }
  50% {
    border-color: #ff6b7a;
    box-shadow: 0 0 0 0.35rem rgba(220, 53, 69, 0.15);
  }
  100% {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  }
}

/* Border fade animation for completion */
@keyframes vp-border-fade {
  0% {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  }
  80% {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  }
  100% {
    border-color: var(--bs-border-color, #dee2e6);
    box-shadow: none;
  }
}

/* Hide dictation buttons when not supported (JS will handle this) */
.vp-dictation-unsupported .vp-dictation-btn {
  display: none !important;
}

/* Field processing state (waiting for Whisper API) */
.vp-dictation-processing {
  border-color: #6c757d !important;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
  animation: vp-pulse-processing 1s infinite;
}

@keyframes vp-pulse-processing {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Audio Level Bar - visual feedback during dictation */
.vp-audio-level-bar {
  position: relative;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  margin-top: 4px;
  overflow: hidden;
}

.vp-audio-level-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    #28a745,
    #28a745 70%,
    #ffc107 85%,
    #dc3545
  );
  border-radius: 3px;
  transition: width 0.05s ease-out;
}

.vp-audio-level-bar.peaking .vp-audio-level-fill {
  background: linear-gradient(90deg, #28a745, #ffc107 50%, #dc3545);
}

/* Timeout indicator on dictation button - fills from top to bottom */
.vp-dictation-btn {
  position: relative;
  overflow: hidden;
}

.vp-dictation-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(220, 53, 69, 0.8) 0%,
    rgba(220, 53, 69, 0.6) 100%
  );
  transform: scaleY(0);
  transform-origin: top;
  transition: none;
  pointer-events: none;
  z-index: 0;
}

.vp-dictation-btn.active.timeout-active::after {
  animation: vp-timeout-fill-down var(--timeout-duration, 2500ms) linear
    forwards;
}

/* When progress is filling, icon should stay visible (white on red) */
.vp-dictation-btn.active.timeout-active {
  color: #dc3545;
}

.vp-dictation-btn > * {
  position: relative;
  z-index: 1;
}

@keyframes vp-timeout-fill-down {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* Interim (in-progress) transcription display */
.vp-interim-display {
  font-size: 0.8rem;
  color: #6c757d;
  font-style: italic;
  padding: 4px 8px;
  background: #f8f9fa;
  border-radius: 4px;
  margin-top: 4px;
  min-height: 24px;
  border-left: 3px solid #007bff;
  opacity: 0.8;
}

/* Whisper toggle wrapper styling */
.vp-whisper-toggle-wrapper {
  transition: all 0.3s ease;
}

.vp-whisper-toggle-wrapper:has(#vp-whisper-toggle:checked) {
  background: rgba(102, 126, 234, 0.12) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
}

/* Card header adjustments for dictate button */
.vplus-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vplus-card-header[data-bs-toggle="collapse"] {
  cursor: pointer;
}

.vplus-card-header > i:first-child {
  flex-shrink: 0;
}

.vplus-card-header
  > span:not(.vplus-collapse-icon):not(.vp-dictation-btn-label) {
  flex-grow: 1;
}

.vplus-card-header .vplus-collapse-icon {
  flex-shrink: 0;
}

.vplus-card-header-blank-lots {
  background: linear-gradient(135deg, #4a5568 0%, #1a202c 100%);
  color: #fff;
}

/* Express Mode card header */
#vplus-card--express > .vplus-card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Express Mode distinct header styling - matches Express button */
.vplus-express-card-header {
  background: linear-gradient(45deg, #ff4500, #ffa500);
  color: #fff;
  border-color: rgba(172, 43, 11, 1);
  text-shadow: 1px 1px 2px rgba(172, 43, 11, 0.5);
  border-bottom: 1px solid rgba(172, 43, 11, 0.5);
  padding: 0.75rem 1rem;
  border-radius: 0.375rem 0.375rem 0 0;
}

.vplus-express-card-header i {
  color: #fff;
}

.vplus-express-card-header span {
  color: #fff;
}

/* Dictation button label override - prevent white-on-white */
.vplus-express-card-header .vp-dictation-btn-label {
  color: #333 !important;
}

/* Express Mode dictation button - white styling for orange header */
.vp-dictation-express-btn {
  background-color: rgba(255, 255, 255, 0.95);
  color: #ff4500;
  border-color: rgba(255, 255, 255, 0.8);
}

.vp-dictation-express-btn:hover {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

/* ==========================================
   MOBILE & TABLET BUTTON FIXES
   ========================================== */

/* Ensure consistent button sizing on smaller screens */
@media (max-width: 767px) {
  /* Button consistency - prevent crushing */
  .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Input group buttons should not overflow */
  .input-group .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Card header buttons on mobile */
  .card-header .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }

  /* Hide button labels on small screens */
  .card-header .btn .btn-label,
  .card-header .btn .btn-link-label {
    display: none;
  }

  /* Dictation field buttons on mobile */
  .vp-dictation-field-btn {
    padding: 0.375rem 0.5rem;
  }

  /* Action row buttons */
  .vplus-action-row .btn {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Express mode form buttons */
  #vplus-express-form .btn-group .btn {
    flex: 1;
    min-width: 0;
  }
}

/* Tablet specific fixes */
@media (min-width: 768px) and (max-width: 991px) {
  /* Prevent button crushing on tablets */
  .btn {
    min-height: 38px;
  }

  /* Card-level buttons sizing */
  .vp-dictation-card-btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.85rem;
  }

  /* Input groups with multiple buttons */
  .input-group .btn + .btn {
    margin-left: -1px;
  }
}

/* ==========================================
   AUCTIONEERS BADGE VISIBILITY FIX
   ========================================== */

/* Ensure Bootstrap badge colors are visible */
#vplus-auctioneers-card .badge,
.vplus-settings-content .badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

/* Ensure Bootstrap bg-* classes work on badges */
#vplus-auctioneers-card .badge.bg-primary,
.vplus-settings-content .badge.bg-primary {
  background-color: var(--bs-primary, #0d6efd) !important;
  color: #fff !important;
}

#vplus-auctioneers-card .badge.bg-success,
.vplus-settings-content .badge.bg-success {
  background-color: #198754 !important;
  color: #fff !important;
}

#vplus-auctioneers-card .badge.bg-info,
.vplus-settings-content .badge.bg-info {
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

#vplus-auctioneers-card .badge.bg-warning,
.vplus-settings-content .badge.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

#vplus-auctioneers-card .badge.bg-danger,
.vplus-settings-content .badge.bg-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
}

#vplus-auctioneers-card .badge.bg-secondary,
.vplus-settings-content .badge.bg-secondary {
  background-color: #6c757d !important;
  color: #fff !important;
}

/* ==========================================
   MOBILE RESPONSIVE FIXES (≤768px)
   ========================================== */

/* Phase 2a — Touch-device tooltip safety.
   On touch / coarse-pointer devices, hover/focus-triggered Bootstrap tooltips
   commonly fail to auto-dismiss (no mouseleave), so they stick open and overlap
   content (e.g. the Auction Manager status-tab tooltips overlapping the first
   cards). pointer-events:none guarantees a lingering tooltip can never block a
   tap "through" it. Scoped to (hover:none)/(pointer:coarse) so desktop — even in
   a narrow window — keeps fully interactive tooltips. The deliberately rich,
   tap-to-open auto-increment tooltip is excluded so it still works. */
@media (hover: none), (pointer: coarse) {
  .tooltip:not(.vplus-auto-increment-tooltip) {
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  /* Ensure tooltips stay within viewport */
  .tooltip {
    max-width: calc(100vw - 20px) !important;
  }

  .tooltip .tooltip-inner {
    max-width: calc(100vw - 30px);
    text-align: left;
    padding: 8px 12px;
  }

  /* Dictation button tooltip - prevent covering input field */
  .vp-dictation-btn[data-bs-toggle="tooltip"] + .tooltip {
    margin-bottom: 8px;
  }

  /* --------------------------------------
     Archive Lot Card Layout Fixes
     -------------------------------------- */
  .vplus-lot-summary .row {
    flex-wrap: wrap;
  }

  .vplus-lot-summary-main {
    gap: 0.5rem;
  }

  .vplus-lot-summary-main > .col {
    flex: 1 1 100%;
    order: 1;
    margin-bottom: 0.5rem;
  }

  .vplus-lot-summary-main > .col-auto:first-child {
    order: 0;
    flex: 0 0 auto;
  }

  .vplus-lot-summary-main > .col-12.order-3 {
    order: 3;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    gap: 0.25rem !important;
  }

  /* Badge stacking on mobile */
  .vplus-lot-summary .badge {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
  }

  /* Expandable details row on mobile */
  .vplus-lot-summary-details .row {
    flex-direction: column;
  }

  .vplus-lot-summary-details .col-auto {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
  }

  .vplus-lot-summary-details .col-auto:last-child {
    border-bottom: none;
  }

  /* --------------------------------------
     Archive Sale Button Grid Fixes
     -------------------------------------- */
  .vplus-action-row .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .vplus-action-row .col-12.col-md-auto {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  .vplus-action-row .btn .btn-link-label {
    display: none;
  }

  .vplus-action-row .btn .badge {
    margin-left: 0.25rem;
  }

  /* Sync buttons on mobile - stack vertically */
  #vplus-sync-to-dashboard-btn,
  #vplus-pull-from-dashboard-btn,
  #vplus-sync-statuses-btn,
  #vplus-bulk-ai-btn {
    flex: 1 1 45%;
    min-width: 120px;
  }

  /* --------------------------------------
     Pricing Row Fields - Full Width (col-12)
     -------------------------------------- */
  /* R3.1: #reserve-row added to the full-width set. It used to be excluded to
     "preserve conditional logic" for its Quick-set-reserve calculator, but that
     left it rendering half-width beside full-width siblings — a broken mobile
     stack. It stacks full-width now; the calculator wraps below via the
     #reserve-row .input-group { flex-wrap: wrap } rule already present below. */
  #purchase-price-row,
  #display-price-row,
  #opening-bid-row,
  #soft-minimum-offer-row,
  #minimum-offer-row,
  #bid-increment-row,
  #reserve-row,
  #quantity-row {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Ensure input groups don't get cut off */
  #purchase-price-row .input-group,
  #display-price-row .input-group,
  #opening-bid-row .input-group,
  #soft-minimum-offer-row .input-group,
  #minimum-offer-row .input-group,
  #bid-increment-row .input-group,
  #quantity-row .input-group {
    flex-wrap: nowrap;
  }

  /* Reserve row needs wrap to accommodate calculator dropdown */
  #reserve-row .input-group {
    flex-wrap: wrap;
  }

  #reserve-row .vp-reserve-calculator {
    flex: 0 0 100%;
    width: 100%;
  }

  #purchase-price-row .form-floating,
  #display-price-row .form-floating,
  #opening-bid-row .form-floating,
  #soft-minimum-offer-row .form-floating,
  #minimum-offer-row .form-floating,
  #bid-increment-row .form-floating,
  #reserve-row .form-floating,
  #quantity-row .form-floating {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* --------------------------------------
     Lot Nav Mobile Improvements
     -------------------------------------- */
  .vplus-lot-nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .vplus-lot-nav .btn {
    flex: 1 1 auto;
    min-width: 80px;
  }

  /* --------------------------------------
     Filter Card Mobile Improvements
     -------------------------------------- */
  .card-body .row > [class*="col-md-"] {
    margin-bottom: 0.75rem;
  }

  /* Photo filter button group - prevent squishing */
  #vplus-photo-filter {
    flex-wrap: wrap;
  }

  #vplus-photo-filter label.btn {
    flex: 1 1 30%;
    min-width: 70px;
    padding: 0.375rem 0.5rem;
    font-size: 0.8rem;
  }

  /* --------------------------------------
     Form Input Groups - Prevent Overflow
     -------------------------------------- */
  .input-group {
    flex-wrap: nowrap;
  }

  .input-group .form-floating {
    flex: 1 1 auto;
    min-width: 0;
  }

  .input-group .btn {
    flex-shrink: 0;
  }

  /* Reserve calculator dropdown - full width on mobile */
  .vp-reserve-calculator,
  .vp-increment-suggestions {
    margin-top: 0.5rem;
  }

  .vp-reserve-calculator .form-select,
  .vp-increment-suggestions .form-select {
    font-size: 0.85rem;
  }
}

/* ==========================================
   R2-P1: Pricing fields — auto-flowing equal-width (tablet + desktop)
   ==========================================
   The pricing rows (Purchase Price / Opening Bid / Bid Increment / Reserve /
   Minimum Offer / Quantity) are authored as fixed col-6 col-lg-3 (rigid 2-up /
   4-up). But the number of VISIBLE fields swings 1/4/5 with the Item Type +
   Purchase Option combo, so a fixed grid produced: a lone orphan on a new row
   (5-field case), 75%-empty rows (1-field Listing case), and ragged wrapping.

   Fix: above the mobile stack breakpoint, override the col-* sizing so each
   VISIBLE pricing row is an equal-width flex item that grows to fill the row and
   wraps evenly — N fields always share the width, no orphan-at-far-left, no
   quarter-width-lonely field. Applies to BOTH modes (Express #express-*-row and
   Full #*-row). Mobile (<=767/768px) keeps the full-width single-column stack
   from the blocks above — this only spans >=768px where the raggedness occurred.
   Hidden rows (display:none / soft-minimum) are out of flow, so the count adapts
   automatically. IDs unchanged, so the JS show/hide is unaffected.

   Breakpoint: min-width 768.02px (not 768px) so it does NOT dual-match the
   shared `@media (max-width: 768px)` mobile block above at exactly 768px — that
   block carries unrelated rules (tooltips, lot nav) so it's left untouched;
   scoping the reflow just above its edge avoids the 1px source-order overlap.
   min-width:150px on each row sets a shrink floor so 5 visible fields wrap
   rather than compress below usability at the narrow end of the tablet range. */
@media (min-width: 768.02px) {
  #purchase-price-row,
  #opening-bid-row,
  #minimum-offer-row,
  #bid-increment-row,
  #reserve-row,
  #quantity-row,
  #express-purchase-price-row,
  #express-opening-bid-row,
  #express-minimum-offer-row,
  #express-bid-increment-row,
  #express-reserve-row,
  #express-quantity-row {
    flex: 1 1 200px;
    min-width: 150px;
    max-width: 100%;
    width: auto;
    align-self: flex-start;
  }
}

/* ==========================================
   MOBILE TOOLTIP OVERRIDE (JavaScript Hook)
   ========================================== */

/* ==========================================
   LOT TITLE INPUT - EXPANDABLE HEIGHT
   ========================================== */

/* Allow lot title to expand and show full content */
.vplus-lot-title-input {
  min-height: 3.5rem; /* Match form-floating height */
  height: auto;
  resize: none;
  overflow: hidden; /* Hide scrollbar, JS will auto-expand */
  padding-right: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Ensure form-floating works with auto-height textarea */
#lot-title-row .form-floating,
#express-lot-title-row .form-floating {
  height: auto;
}

/* Title variations wrapper styling */
.vplus-title-variations-wrapper {
  width: 100%;
}

/* ==========================================
   PHOTO PREVIEW MODAL
   ========================================== */

.vplus-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vplus-preview-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.vplus-preview-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1;
}

.vplus-preview-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.vplus-preview-close:hover {
  opacity: 1;
}

.vplus-preview-image {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   AI BUTTON STYLES (Mark for AI / AI Badge)
   ========================================== */

.vplus-media-option .ai-badge-link.loading,
.vplus-media-option .ai-link.loading {
  opacity: 0.6;
  pointer-events: none;
}

.vplus-media-option .ai-badge-link,
.vplus-media-option .ai-link {
  color: #6f42c1;
}

.vplus-media-option .ai-badge-link:hover,
.vplus-media-option .ai-link:hover {
  color: #5a2d9e;
  background: rgba(111, 66, 193, 0.1);
}

/* ==========================================
   MANAGE CONSIGNMENTS - SUBMISSIONS TABS
   ========================================== */

.vplus-submissions-manager {
  padding: 1rem 0;
}

/* Tab Navigation */
.vplus-submissions-tabs {
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.vplus-submissions-tabs .nav-link {
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-weight: 500;
  color: #495057;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.vplus-submissions-tabs .nav-link:hover {
  background: #e9ecef;
  border-color: #ced4da;
}

.vplus-submissions-tabs .nav-link.active {
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  border-color: var(--bs-primary, #0d6efd);
}

.vplus-submissions-tabs .nav-link .badge {
  font-size: 0.75rem;
  padding: 0.35em 0.65em;
  font-weight: 600;
}

.vplus-submissions-tabs .nav-link.active .badge {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--bs-primary, #0d6efd) !important;
}

/* Action Buttons */
.vplus-submissions-manager .btn-link {
  padding: 0.375rem 0.5rem;
  opacity: 1;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.vplus-submissions-manager .btn-link:hover {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.4);
  border-radius: 0.25rem;
}

.vplus-submissions-manager .btn-link.text-success:hover {
  color: #198754 !important;
}

.vplus-submissions-manager .btn-link.text-danger:hover {
  color: #dc3545 !important;
}

.vplus-submissions-manager .btn-link.text-muted:hover {
  color: #495057 !important;
}

/* Table Styling */
.vplus-submissions-manager .table {
  margin-bottom: 0;
}

.vplus-submissions-manager .table th {
  font-weight: 600;
  color: #495057;
  border-bottom-width: 2px;
}

.vplus-submissions-manager .table td {
  vertical-align: middle;
}

.vplus-submissions-manager .table td img {
  border-radius: 0.375rem;
}

/* Empty State */
.vplus-submissions-manager .tab-pane .d-flex.flex-column {
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 0.5rem;
}

/* Bulk Actions Toolbar */
#bulk-actions-toolbar,
#pending-bulk-toolbar,
#rejected-bulk-toolbar {
  border: 1px solid #dee2e6;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #f8f9fa;
}

/* Submission Detail Modal — wider on desktop. Scoped to lg+ so it doesn't
   override the .modal-fullscreen-lg-down behaviour below 992px: the ID
   selector (specificity 1-1-0) was beating Bootstrap's fullscreen rule
   (0-1-0), pinning the modal to 80vw on mobile (e.g. 344px @ 430px) with
   margins instead of going edge-to-edge. */
@media (min-width: 992px) {
  #submissionDetailModal .modal-dialog {
    max-width: 80vw;
  }
}

/* Checkbox styling */
.vplus-submissions-manager .form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}

/* ============================================
   Submission Form Photo Uploader
   ============================================ */

/* Container for submission photos - grid layout */
#vplus-photo-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 0.875rem;
  margin-top: 0.5rem;
}

/* Individual photo container */
#vplus-photo-files .vplus-file-container {
  position: relative;
  aspect-ratio: 1;
  overflow: visible;
}

/* Image box wrapper */
#vplus-photo-files .image-box {
  width: 100%;
  height: 100%;
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: #f8f9fa;
}

/* Photo span with background-image */
#vplus-photo-files .image-box .photo {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#vplus-photo-files .image-box .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Move handle */
#vplus-photo-files .vplus-file-move-handle {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  cursor: grab;
  z-index: 10;
  border: none;
}

#vplus-photo-files .vplus-file-move-handle:active {
  cursor: grabbing;
}

/* Selected state */
#vplus-photo-files .vplus-file-container.selected .image-box {
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.4);
  border-color: var(--bs-primary);
}

#vplus-photo-files .vplus-file-container.selected .image-box .photo {
  opacity: 0.85;
}

/* Additional photos (submission form)

   P2 — this gallery renders ONLY when the AI Prompts section is enabled (the
   prompts-off branch renders #vplus-photo-files instead, and the two are
   mutually exclusive). It never received the intrinsic grid rule its sibling
   above has, so it fell through to the base .vplus-media-files
   `repeat(8, 1fr)`. Two consequences, both measured live:

     1. Media queries track the VIEWPORT, but this gallery sits inside the extra
        #vplus-photo-sections / .vplus-photo-section-group nesting, so the
        CONTAINER is much narrower than the viewport implies — 8 fixed tracks in
        a 390px container computed to 30.5px tiles.
     2. At 430px the tracks were 102px while the .vplus-media-option overlay row
        needed 132px (4 x 44px buttons), and .vplus-file-container is
        `overflow: visible` (load-bearing — the delete-confirm popover must
        escape the tile), so the buttons painted ~31px OUTSIDE the card.

   auto-fill/minmax sizes from the container instead, matching the
   #vplus-photo-files rule above and photo-app-shell.css. */
#vplus-photo-files-additional {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.875rem;
}
#vplus-photo-files-additional .vplus-file-container.photo-file {
  position: relative;
  aspect-ratio: 1;
}
#vplus-photo-files-additional .image-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--bs-border-radius-sm);
}
#vplus-photo-files-additional .image-box .photo {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Featured image icon - positioned on vplus-file-container (not image-box) */
#vplus-photo-files .vplus-featured-image-icon,
#vplus-photo-files-additional .vplus-featured-image-icon {
  position: absolute;
  z-index: 100;
  color: #ffa500;
  font-size: 1.25rem;
  bottom: calc(100% - 0.5rem);
  line-height: 1rem;
  left: -0.25rem;
  transform: rotate(-15deg);
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

#vplus-photo-files .vplus-primary-photo-label,
#vplus-photo-files-additional .vplus-primary-photo-label {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.2;
  pointer-events: none;
}

/* AI file marker icon */
#vplus-photo-files .vplus-ai-file-icon {
  display: flex;
  position: absolute;
  color: var(--bs-primary);
  z-index: 100;
  font-size: 0.875rem;
  bottom: calc(100% - 0.75rem);
  line-height: 1rem;
  right: -0.25rem;
  border: 1px solid var(--bs-primary);
  border-radius: 50%;
  background: #fff;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* Processed ("Edited") badge on a lot-form photo tile. The base
   .vplus-processed-badge sits top-right (top/right: -0.35rem) — the SAME corner
   as the AI icon above, so the two overlap. Keep the AI icon exactly where users
   expect it (top-right corner) and tuck the processed badge immediately to its
   LEFT, aligned to the same top edge, so they read as a neat side-by-side row.
   The AI icon is a 1.5rem circle at right:-0.25rem (so its left edge is at
   right:1.25rem); placing this badge at right:1.4rem clears it with a small gap.
   Scoped to #vplus-photo-files (the lot form) so the submission uploader's badge
   layout is untouched. */
#vplus-photo-files .vplus-processed-badge {
  bottom: calc(100% - 0.75rem);
  top: auto;
  right: 1.4rem;
}

/* Progress bar */
#vplus-photo-files .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 0 0 2px 2px;
  background: rgba(0, 0, 0, 0.15);
}

#vplus-photo-files .progress-bar {
  transition: width 0.3s ease;
}

/* Media options panel */
#vplus-photo-files .vplus-media-option {
  left: 50%;
  transform: translateX(-50%);
}

/* Media options panel for submission photo uploader */
#vplus-photo-files .vplus-media-option {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  flex-direction: row;
  bottom: calc(100% - 0.5rem);
}
#vplus-photo-files .vplus-media-option.show {
  display: flex;
  flex-direction: row;
  z-index: 200;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  bottom: calc(100% + 0.5rem);
  padding: 0.125rem;
}
#vplus-photo-files .vplus-media-option:before {
  border-color: #dee2e6 transparent transparent transparent;
}
#vplus-photo-files .vplus-media-option:after {
  border-color: #fff transparent transparent transparent;
}
#vplus-photo-files .vplus-media-option .btn {
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  color: #555;
  line-height: 1;
}
#vplus-photo-files .vplus-media-option .btn:hover {
  color: var(--bs-primary);
}
#vplus-photo-files .vplus-media-option .ai-link:hover {
  color: var(--bs-info);
}
#vplus-photo-files .vplus-media-option .delete-link {
  color: var(--bs-danger);
}
#vplus-photo-files .vplus-media-option .delete-link:hover {
  color: #a71d2a;
}
/* ================================================================
   Consignment Prompt Button Grid
   ================================================================ */
.vplus-consignment-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.vplus-prompt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #495057;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
  text-align: center;
  min-height: 56px;
}
.vplus-prompt-btn i {
  font-size: 1.3rem;
}
.vplus-prompt-btn:hover {
  border-color: var(--bs-warning);
  background: #fff9e6;
  color: #333;
}
.vplus-prompt-btn.active {
  border-color: var(--bs-warning);
  background: var(--bs-warning);
  color: #000;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(255, 193, 7, 0.35);
}
.vplus-prompt-btn-add {
  border-style: dashed;
  color: #6c757d;
}
.vplus-prompt-btn-add:hover {
  border-color: var(--bs-primary);
  background: rgba(13, 110, 253, 0.05);
  color: var(--bs-primary);
}

/* ================================================================
   Express Mode Templates picker ("Just Lot the damn thing")
   Buttons extend the .vplus-prompt-btn vocabulary: icon → label → a
   compact 2-column field list. Gold-accent active/hover to match.
   ================================================================ */
.vplus-express-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.vplus-express-template-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #495057;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  text-align: center;
}
.vplus-express-template-btn:hover {
  border-color: var(--bs-warning);
  background: #fff9e6;
  color: #333;
}
.vplus-express-template-btn.active {
  border-color: var(--bs-warning);
  background: #fffdf5;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
  color: #333;
}
.vplus-express-template-btn__icon {
  font-size: 1.6rem;
  color: #b8860b;
}
.vplus-express-template-btn.active .vplus-express-template-btn__icon {
  color: var(--bs-warning);
}
.vplus-express-template-btn__label {
  font-weight: 600;
  font-size: 0.95rem;
}
.vplus-express-template-btn__note {
  color: #6c757d;
}
.vplus-express-template-btn__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* align-items:start so a cell that wraps to two lines pushes its row down
     instead of overlapping the neighbouring cell; wider row gap gives wrapped
     items breathing room. */
  align-items: start;
  gap: 5px 10px;
  font-size: 0.75rem;
  color: #667085;
  text-align: left;
}
.vplus-express-template-btn__fields li {
  position: relative;
  padding-left: 10px;
  line-height: 1.3;
  /* Keep continuation lines aligned under the label (not under the bullet) so a
     long label like "Auto Lot Numbering" reads cleanly if it does wrap. */
  text-indent: 0;
  hyphens: none;
}
.vplus-express-template-btn__fields li::before {
  content: "\2022"; /* • */
  position: absolute;
  left: 0;
  color: #b8860b;
}
.vplus-express-template-btn__fields-note {
  grid-column: 1 / -1;
  font-style: italic;
  color: #98a2b3;
}
.vplus-express-template-btn__fields-note::before {
  content: none !important;
}
/* Express Mode Template walkthrough video (VendorPlus Learn). The responsive
   swap + chrome suppression live in the Learn plugin's own stylesheet; this
   only frames the wrapper to match the surrounding info box. */
.vplus-express-template-video {
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}

/* ================================================================
   Section-Based Photo Upload Slots (Multi-Photo)
   ================================================================ */
.vplus-photo-section-group {
  margin-bottom: 16px;
}
.vplus-section-group-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.vplus-photo-section-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.vplus-photo-section-slot {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 8px;
  background: #fafbfc;
  transition: border-color 0.15s ease;
}
.vplus-photo-section-slot:hover {
  border-color: #adb5bd;
}
.vplus-section-slot-header {
  margin-bottom: 6px;
}
.vplus-section-slot-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #495057;
}
.vplus-section-slot-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 0;
}
.vplus-section-thumb {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.vplus-section-thumb .photo {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.vplus-section-thumb.uploading {
  opacity: 1;
}
.vplus-section-thumb.uploading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.vplus-section-thumb .vplus-upload-progress {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
}
.vplus-section-thumb .vplus-upload-progress .progress {
  width: 80%;
  height: 12px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  margin-top: 4px;
}
.vplus-section-thumb .vplus-upload-progress .progress-bar {
  background: #fff;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.vplus-section-thumb-remove {
  position: absolute;
  top: 4px;
  /* Top-LEFT so it doesn't collide with the always-visible AI toggle (top-right). */
  left: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0;
  line-height: 1;
}
.vplus-section-thumb:hover .vplus-section-thumb-remove {
  opacity: 1;
}
.vplus-section-thumb .vplus-ai-file-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--bs-warning);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.6rem;
}

.vplus-section-add-photo {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  border: 1px dashed #ced4da;
  border-radius: 4px;
  background: transparent;
  color: #6c757d;
  font-size: 0.7rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  justify-content: center;
}
.vplus-section-add-photo:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  background: #f0f6ff;
}

/* Additional photos section */
.vplus-photo-section-additional {
  border-top: 1px solid #dee2e6;
  padding-top: 12px;
  margin-top: 4px;
}

/* ================================================================
   Condition Report Image Upload
   ================================================================ */
.vplus-cr-fields-grid {
  align-items: stretch;
}
.vplus-cr-field-cell > .form-floating,
.vplus-cr-field-cell > .small,
.vplus-cr-field-cell > .vplus-cr-address-field {
  min-width: 0;
}
.vplus-cr-field-cell .btn-group {
  flex-wrap: wrap;
}
.vplus-cr-field-cell .btn-group > .btn {
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  margin: 0 0.25rem 0.25rem 0;
}
.vplus-cr-image-upload-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.vplus-cr-image-upload,
.vplus-cr-photo-select {
  white-space: nowrap;
}
.vplus-cr-image-upload.btn,
.vplus-cr-image-upload.btn-outline-secondary {
  color: #fff !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}
.vplus-cr-image-upload.btn:hover,
.vplus-cr-image-upload.btn-outline-secondary:hover,
.vplus-cr-image-upload.btn:focus,
.vplus-cr-image-upload.btn-outline-secondary:focus {
  color: #fff !important;
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}
.vplus-cr-image-upload.btn:active,
.vplus-cr-image-upload.btn-outline-secondary:active,
.vplus-cr-image-upload.btn.show,
.vplus-cr-image-upload.btn-outline-secondary.show {
  color: #fff !important;
  background-color: #0a58ca !important;
  border-color: #0a53be !important;
}
.vplus-cr-image-upload:hover,
.vplus-cr-photo-select:hover {
  border-color: var(--bs-primary);
}
.vplus-cr-image-previews {
  width: 100%;
}
.vplus-cr-image-thumb {
  position: relative;
  width: 88px;
  min-height: 112px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  padding: 4px;
  background: var(--bs-body-bg, #fff);
}
.vplus-cr-image-thumb .photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc(var(--bs-border-radius, 0.375rem) - 2px);
  background-position: center;
  background-size: cover;
}
.vplus-cr-image-thumb .vplus-cr-image-remove {
  width: 100%;
  margin-top: 4px;
}
.vplus-cr-image-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vplus-cr-image-remove {
  padding: 0 4px;
  font-size: 0.8rem;
}

/* CR Field Tooltip — info card */
.vplus-cr-tooltip {
  background: var(--bs-info-bg-subtle, #cff4fc);
  border-left: 3px solid var(--bs-info, #0dcaf0);
  border-radius: 0 4px 4px 0;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: #055160;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

/* ================================================================
   Submission Form — Minimum font sizes & colour overrides
   ================================================================ */
.vplus-vendor-submission-form {
  font-size: 16px;
}
.vplus-vendor-submission-form .form-label,
.vplus-vendor-submission-form label {
  font-size: 16px;
}
.vplus-vendor-submission-form .form-control,
.vplus-vendor-submission-form .form-select,
.vplus-vendor-submission-form .form-control-sm {
  font-size: 16px;
}
.vplus-vendor-submission-form .form-text,
.vplus-vendor-submission-form .text-muted {
  font-size: 14px;
  color: #495057 !important;
}
.vplus-vendor-submission-form .badge {
  font-size: 12px;
}
.vplus-vendor-submission-form .small,
.vplus-vendor-submission-form small {
  font-size: 14px;
}
.vplus-vendor-submission-form .btn {
  font-size: 16px;
}
/* Stronger required asterisks */
.vplus-vendor-submission-form .text-danger,
.vplus-vendor-submission-form sup {
  color: #b91c1c !important;
}
/* Darker warning badges */
.vplus-vendor-submission-form .badge.bg-warning {
  background-color: #d4a017 !important;
}
/* text-indigo utility (used on CR icon) */
.vplus-vendor-submission-form .text-indigo {
  color: #6610f2 !important;
}
/* The Analyse Photos button (#vplus-ai-generate) is the explicit trigger for AI
   Analysis on the submission form — it must be VISIBLE. (It was previously hidden
   here because analysis auto-ran on upload; that behaviour is gone — analysis now
   runs only on this button.) The button is enabled/disabled by selection in JS. */
/* Labels set to black for better visibility (placeholders use default grey for floating-label compat) */
.vplus-vendor-submission-form .form-floating > label {
  color: #000000;
}

/* ================================================================
   Submission Queue Panel & FAB
   ================================================================ */
.vplus-queue-panel {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 340px;
  max-height: 480px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vplus-queue-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--vplus-primary, #1c3f85);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.vplus-queue-panel-body {
  flex: 1;
  overflow-y: auto;
  max-height: 320px;
}
.vplus-queue-panel-footer {
  padding: 10px 14px;
  border-top: 1px solid #eee;
}
.vplus-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #f0f0f0;
}
.vplus-queue-item:last-child {
  border-bottom: none;
}
.vplus-queue-item-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vplus-queue-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vplus-queue-item-info {
  flex: 1;
  min-width: 0;
}
.vplus-queue-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vplus-primary, #1c3f85);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 20px;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vplus-queue-fab:hover {
  transform: scale(1.08);
}
.vplus-queue-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--bs-danger, #dc3545);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================================================
   BLUEFLAG – Gold glow animation during AI lookup
   ================================================================ */
@keyframes vplus-glow-pulse {
  0% {
    box-shadow:
      0 0 4px rgba(218, 165, 32, 0.4),
      0 0 8px rgba(218, 165, 32, 0.2);
  }
  50% {
    box-shadow:
      0 0 10px rgba(218, 165, 32, 0.7),
      0 0 20px rgba(218, 165, 32, 0.35);
  }
  100% {
    box-shadow:
      0 0 4px rgba(218, 165, 32, 0.4),
      0 0 8px rgba(218, 165, 32, 0.2);
  }
}
.vplus-blueflag-loading .form-control,
.vplus-blueflag-loading .form-select {
  border-color: goldenrod;
  animation: vplus-glow-pulse 1.6s ease-in-out infinite;
}
.vplus-blueflag-status {
  font-size: 0.82rem;
  color: goldenrod;
  font-weight: 600;
  margin-top: 4px;
}
.vplus-blueflag-status .fa-spinner {
  margin-right: 5px;
}

/* vendor-submission-form */
.vendor-submission-form .btn-group:has([type="radio"]) .btn {
  padding: 0.75rem 2rem;
  background: var(--bs-white);
  color: var(--bs-primary);
}
.vendor-submission-form
  .btn-group:has([type="radio"])
  .btn-check:checked
  + .btn {
  background: var(--bs-primary);
  color: var(--bs-white);
}

/* ==========================================
   MOBILE & TABLET RESPONSIVENESS v2.1
   ========================================== */

@media (max-width: 767px) {
  /* --------------------------------------
     A4. Bulk Import button label visibility
     -------------------------------------- */
  .vplus-lot-nav .vplus-bulk-actions .btn .btn-link-label {
    display: inline !important;
  }

  /* --------------------------------------
     A3. Sale meta sizing & centering
     -------------------------------------- */
  .vplus-sale-meta {
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.95rem;
  }

  /* --------------------------------------
     A5. AI Descriptron toggle scale-up
     -------------------------------------- */
  #vplus-card--ai .vplus-ai-toggle-row {
    gap: 0.75rem;
  }
  #vplus-card--ai .vplus-ai-toggle-row h5 {
    font-size: 1.15rem;
  }
  #vplus-card--ai .vplus-ai-toggle-row .form-check-input {
    width: 3em;
    height: 1.5em;
  }

  /* --------------------------------------
     A6. Express btn-groups: stack vertically
     -------------------------------------- */
  #express-lot-type-row .btn-group,
  #express-purchase-option-row .btn-group,
  #lot-type-row .btn-group,
  #purchase-option-row .btn-group {
    flex-direction: column;
  }
  #express-lot-type-row .btn-group .btn,
  #express-purchase-option-row .btn-group .btn,
  #lot-type-row .btn-group .btn,
  #purchase-option-row .btn-group .btn {
    border-radius: var(--bs-border-radius) !important;
    border: 1px solid var(--bs-border-color) !important;
    margin-top: -1px;
  }
  #express-lot-type-row .btn-group .btn:first-of-type,
  #express-purchase-option-row .btn-group .btn:first-of-type,
  #lot-type-row .btn-group .btn:first-of-type,
  #purchase-option-row .btn-group .btn:first-of-type {
    margin-top: 0;
  }
  #express-lot-type-row .btn-group .btn-check:checked + .btn,
  #express-purchase-option-row .btn-group .btn-check:checked + .btn,
  #lot-type-row .btn-group .btn-check:checked + .btn,
  #purchase-option-row .btn-group .btn-check:checked + .btn {
    z-index: 1;
    border-color: var(--bs-dark) !important;
  }

  /* --------------------------------------
     A7. Express price fields: single column
     -------------------------------------- */
  #express-purchase-price-row,
  #express-opening-bid-row,
  #express-bid-increment-row,
  #express-reserve-row,
  #express-quantity-row,
  #express-auto-reject-offers-row,
  #express-soft-minimum-offer-row,
  #express-minimum-offer-row {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* --------------------------------------
     A8. Show form-row-separators on mobile
     -------------------------------------- */
  .vplus-express-mode .form-row-separator {
    display: block !important;
  }

  /* --------------------------------------
     A9. Format Numbers wrap on mobile
     -------------------------------------- */
  #vp-currency-format-row,
  #express-currency-format-row {
    flex-wrap: wrap;
  }
  #vp-currency-format-row > *,
  #express-currency-format-row > * {
    flex: 0 0 auto;
  }
  #vp-currency-format-row > .vr,
  #express-currency-format-row > .vr {
    display: none;
  }
  #vp-currency-format-row > small,
  #express-currency-format-row > small {
    flex: 0 0 100%;
    margin-top: 0.25rem;
  }

  /* --------------------------------------
     A10. Buyer's Premium fields: single column
     -------------------------------------- */
  #vplus-card--tax-details .row > .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* --------------------------------------
     A12. Consignment tabs: center + wrap
     -------------------------------------- */
  .vplus-submissions-tabs {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .vplus-submissions-tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }

  /* --------------------------------------
     A12b. Auction Manager top tabs: stack
     full-width on mobile so each option has
     a generous tap target instead of squeezing
     three labels into a horizontal btn-group.
     Mirrors the .btn-group.w-100 stack used by
     #express-purchase-option-row on content-lot.
     -------------------------------------- */
  #auctionManagerTabs.btn-group {
    flex-direction: column;
    width: 100%;
  }
  #auctionManagerTabs.btn-group > .btn {
    border-radius: 0;
    border-right-width: 1px;
  }
  #auctionManagerTabs.btn-group > .btn + .btn {
    margin-left: 0;
    margin-top: -1px; /* collapse double borders */
  }
  #auctionManagerTabs.btn-group > .btn:first-child {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
  }
  #auctionManagerTabs.btn-group > .btn:last-child {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
  }

  /* --------------------------------------
     A14. Filter button row spacing
     -------------------------------------- */
  #vplus-sale-filter .col-12.col-md-auto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #vplus-sale-filter .col-12.col-md-auto .btn {
    flex: 1 1 auto;
  }
  #vplus-import-auction-btn {
    flex: 0 0 100%;
  }

  /* Archive-lot filter buttons */
  form[action=""] .col-12.col-md-auto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* --------------------------------------
     A15. Consignment table responsive
     -------------------------------------- */
  .vplus-submissions-tabs ~ .tab-content .table-responsive {
    border: none;
  }
  .vplus-submissions-tabs ~ .tab-content table.table thead {
    display: none;
  }
  .vplus-submissions-tabs ~ .tab-content table.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 tbody td {
    border: none;
    padding: 0.125rem 0;
  }
  /* Checkbox */
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:first-child {
    flex: 0 0 auto;
    order: -2;
  }
  /* Thumbnail */
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(2) {
    flex: 0 0 auto;
    order: -1;
  }
  /* Title/Summary */
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(3) {
    flex: 1 1 60%;
    min-width: 0;
  }
  /* Vendor */
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(4) {
    flex: 0 0 100%;
    font-size: 0.85rem;
  }
  /* Reserve + Submitted */
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(5),
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(6) {
    flex: 0 0 auto;
    font-size: 0.85rem;
  }
  /* Actions */
  .vplus-submissions-tabs ~ .tab-content table.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 tbody td:last-child .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  /* --------------------------------------
     Full Mode PO btn-group stacking
     -------------------------------------- */
  #purchase-option-row .btn-group {
    flex-direction: column;
  }

  /* --------------------------------------
     Btn-group: icon + label inline, sublabel below
     -------------------------------------- */
  #express-lot-type-row .btn-group .btn,
  #express-purchase-option-row .btn-group .btn,
  #lot-type-row .btn-group .btn,
  #purchase-option-row .btn-group .btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #express-lot-type-row .btn-group .btn .vplus-type-sublabel,
  #express-purchase-option-row .btn-group .btn .vplus-po-sublabel,
  #lot-type-row .btn-group .btn .vplus-type-sublabel,
  #purchase-option-row .btn-group .btn .vplus-po-sublabel {
    flex-basis: 100%;
  }

  /* Lot form dividers - consistent spacing */
  .form-row-separator hr.dashed {
    margin: 0.5rem 0 !important;
  }
}

.vplus-express-customise-btn {
  background: #fff;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* The button lives inside .vplus-express-card-header, whose `color:#fff`
   cascades to the FontAwesome <i> and rendered it white-on-white (invisible).
   Force the icon (and any text node) to inherit the button's dark colour;
   the !important + descendant selector beats the header's white. */
.vplus-express-customise-btn,
.vplus-express-customise-btn i,
.vplus-express-customise-btn .fa-solid,
.vplus-express-customise-btn .fa-regular,
.vplus-express-customise-btn svg {
  color: #000 !important;
  text-shadow: none;
}

.vplus-express-customise-btn:hover,
.vplus-express-customise-btn:focus {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.35);
}
.vplus-express-customise-btn:hover,
.vplus-express-customise-btn:focus,
.vplus-express-customise-btn:hover i,
.vplus-express-customise-btn:focus i,
.vplus-express-customise-btn:hover svg,
.vplus-express-customise-btn:focus svg {
  color: #000 !important;
}

/* Templates button — the primary action of the pair, so give it a lively
   filled look (vs the outline Customise button). White text/icon must beat the
   header's cascading color:#fff via !important, same tactic as Customise. */
.vplus-express-templates-btn {
  background: var(--bs-primary, #0d6efd);
  border: 1px solid var(--bs-primary, #0d6efd);
}
.vplus-express-templates-btn,
.vplus-express-templates-btn i,
.vplus-express-templates-btn .fa-solid,
.vplus-express-templates-btn .fa-regular,
.vplus-express-templates-btn svg {
  color: #fff !important;
  text-shadow: none;
}
.vplus-express-templates-btn:hover,
.vplus-express-templates-btn:focus {
  background: var(--bs-primary-text-emphasis, #0a58ca);
  border-color: var(--bs-primary-text-emphasis, #0a58ca);
}
.vplus-express-templates-btn:hover,
.vplus-express-templates-btn:focus,
.vplus-express-templates-btn:hover i,
.vplus-express-templates-btn:focus i,
.vplus-express-templates-btn:hover svg,
.vplus-express-templates-btn:focus svg {
  color: #fff !important;
}

/* "Or" separator between the Templates and Customise buttons — mirrors the
   Quick/Manual Quantity pill on the sale form (.vplus-blank-lots-or-text). */
.vplus-express-btn-or {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
/* .vplus-express-card-header span { color:#fff } (0,1,1) would win over a bare
   .vplus-express-btn-or-text (0,1,0) and render the pill text white-on-light
   (unreadable). Scope under the header + !important so the charcoal always wins,
   same tactic the Customise/Templates buttons already use in this header. */
.vplus-express-card-header .vplus-express-btn-or-text,
.vplus-express-btn-or-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  /* Pin the pill to a fixed light chip in BOTH modes: it sits on the orange
     Express header, so a light pill + charcoal text reads well in light AND
     dark. Depending on --bs-tertiary-bg made it go dark-on-dark (charcoal text
     on a #2d323c pill = ~1.1 contrast, invisible) once dark mode remapped the
     token. Hard-coding keeps the charcoal text legible everywhere. */
  background: #f1f3f5;
  color: #343a40 !important;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- AI Prompt Pre-Selection Glow ---- */
.vplus-prompt-btn.ai-recommended {
  box-shadow:
    0 0 0 2px rgba(13, 110, 253, 0.5),
    0 0 12px rgba(13, 110, 253, 0.3);
  border-color: #0d6efd !important;
  animation: vplus-preselect-pulse 2s ease-in-out 3;
  position: relative;
}

.vplus-prompt-btn.ai-recommended::after {
  content: "\2713";
  font-size: 11px;
  position: absolute;
  top: -6px;
  right: -6px;
  background: #0d6efd;
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body.vplus-dark-mode .card-header h1,
body.vplus-dark-mode .card-header h2,
body.vplus-dark-mode .card-header h3,
body.vplus-dark-mode .card-header h4,
body.vplus-dark-mode .card-header h5,
body.vplus-dark-mode .card-header h6,
body.vplus-dark-mode .card-header .h1,
body.vplus-dark-mode .card-header .h2,
body.vplus-dark-mode .card-header .h3,
body.vplus-dark-mode .card-header .h4,
body.vplus-dark-mode .card-header .h5,
body.vplus-dark-mode .card-header .h6 {
  color: var(--vplus-dark-text, #f4f7fb);
}

body.vplus-dark-mode .vplus-cr-field-row,
body.vplus-dark-mode .vplus-cr-field-card,
body.vplus-dark-mode .vplus-cr-section-row,
body.vplus-dark-mode #cr-fields-container,
body.vplus-dark-mode #vplus-cr-fields-container {
  background: var(--vplus-dark-card, #1f2937) !important;
  border-color: var(--vplus-dark-border, #374151) !important;
  color: var(--vplus-dark-text, #f4f7fb) !important;
}

.vplus-cr-image-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

.vplus-cr-image-thumb {
  width: 132px !important;
  min-height: 158px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.vplus-cr-image-thumb img,
.vplus-cr-image-thumb .photo {
  width: 132px !important;
  height: 132px !important;
  display: block !important;
  object-fit: cover;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 6px !important;
  flex: 0 0 132px;
}

.vplus-cr-image-thumb .progress {
  width: 100%;
  height: 9px;
  background: #d9f2e3;
  border-radius: 999px;
  position: static !important;
  overflow: hidden;
}

.vplus-cr-image-thumb .progress-bar {
  background-color: #198754 !important;
}

.vplus-cr-image-thumb .vplus-cr-image-remove,
.vplus-cr-image-thumb .remove-photo {
  position: static !important;
  width: 100% !important;
  min-height: 30px;
  border-radius: 6px;
  padding: 0.3rem 0.45rem !important;
  font-size: 0.78rem !important;
  line-height: 1.2;
}

@keyframes vplus-preselect-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(13, 110, 253, 0.5),
      0 0 12px rgba(13, 110, 253, 0.3);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(13, 110, 253, 0.4),
      0 0 20px rgba(13, 110, 253, 0.5);
  }
}

/* ============================================
   Swiper Photo Gallery (Submission Detail Modal)
   ============================================ */

.vplus-gallery-main {
  width: 100%;
  max-height: 500px;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #f8f9fa;
}

.vplus-gallery-main .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vplus-gallery-main .swiper-slide img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}

.vplus-gallery-thumbs {
  margin-top: 8px;
  height: 60px;
}

.vplus-gallery-thumbs .swiper-slide {
  width: 60px !important;
  height: 60px;
  opacity: 0.5;
  cursor: pointer;
  border-radius: 0.25rem;
  overflow: hidden;
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease;
  border: 2px solid transparent;
}

.vplus-gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--bs-primary);
}

.vplus-gallery-thumbs .swiper-slide:hover {
  opacity: 0.85;
}

.vplus-gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vplus-gallery-sections .vplus-gallery-section-jump {
  border-color: #000;
  background: #000;
  color: #fff;
}

.vplus-gallery-sections .vplus-gallery-section-jump:hover,
.vplus-gallery-sections .vplus-gallery-section-jump:focus-visible {
  border-color: #212529;
  background: #212529;
  color: #fff;
}

.vplus-gallery-sections .vplus-gallery-section-jump:active,
.vplus-gallery-sections .vplus-gallery-section-jump.is-active {
  border-color: #ffc107;
  background: #ffc107;
  color: #000;
}

/* Swiper navigation arrow overrides for modal context */
.vplus-gallery-main .swiper-button-next,
.vplus-gallery-main .swiper-button-prev {
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.vplus-gallery-main .swiper-button-next::after,
.vplus-gallery-main .swiper-button-prev::after {
  font-size: 14px;
}

/* Zoom toggle button */
.vplus-gallery-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vplus-gallery-zoom-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* CR photo thumbnails — click to jump in gallery */
.vplus-cr-gallery-thumb {
  transition:
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.vplus-cr-gallery-thumb:hover {
  opacity: 0.8;
  box-shadow: 0 0 0 2px var(--bs-primary);
}

/* Google Places PlaceAutocompleteElement — match Bootstrap form-control */
gmp-place-autocomplete,
.vplus-place-autocomplete-element,
.vplus-address-autocomplete {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color, #212529);
  background-color: #fff;
  background-clip: padding-box;
  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  appearance: none;
  /* AM6 — the widget ships `color-scheme: light dark`, so its shadow-DOM
     prediction dropdown follows the VIEWER'S device dark preference: on a
     dark-mode device the dropdown renders dark while our page stays light,
     giving dark text on a black dropdown. Pin light so the widget always
     renders its light dropdown to match the light form. */
  color-scheme: light;
}

gmp-place-autocomplete:focus-within,
.vplus-address-autocomplete:focus-within {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-control-sm + gmp-place-autocomplete,
.small gmp-place-autocomplete {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.vplus-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  margin-top: 1rem;
  justify-content: center;
}

.vplus-invoicing-sync-btn,
#vplus-filter-clear,
.vplus-pg-btn,
.button {
  display: inline-block;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  line-height: 2.15384615;
  min-height: 1.875rem;
  color: #2c3338;
  background: #f6f7f7;
  border: 1px solid #c3c4c7;
  border-radius: 0.1875rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  vertical-align: middle;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  transition:
    background 0.1s,
    border-color 0.1s,
    color 0.1s;
  box-shadow: none;
  outline: none;
}

.button.button-primary.vplus-invoicing-sync-btn,
.button.button-primary.vplus-pg-btn,
.button.button-primary,
a.button.button-primary {
  background: #2271b1;
  border-color: #2271b1;
  color: #fff;
}

.vplus-pagination .button {
  min-width: 2.125rem;
  padding: 0 0.5rem;
  text-align: center;
}

.vplus-search-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.vplus-search-filters input[type="text"],
.vplus-search-filters input[type="date"],
.vplus-search-filters select {
  height: 1.875rem !important;
  min-height: 0 !important;
  line-height: 1.5rem !important;
  font-size: 0.8125rem !important;
  border: 1px solid #c3c4c7 !important;
  border-radius: 0.25rem !important;
  padding: 0 0.5rem !important;
  background: #fff !important;
  box-sizing: border-box !important;
  color: #2c3338 !important;
}

.vplus-search-filters .ts-control {
  min-height: 1.875rem !important;
  height: auto !important;
  padding: 0.125rem 0.375rem !important;
  border: 1px solid #c3c4c7 !important;
  border-radius: 0.25rem !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 0.8125rem !important;
  gap: 0.1875rem !important;
  cursor: pointer !important;
}

.vplus-search-filters .ts-control input {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 0.8125rem !important;
  color: #2c3338 !important;
}

.vplus-search-filters .ts-wrapper {
  flex: 0 0 auto;
  min-width: 10rem;
}

.ts-wrapper.multi {
  height: auto;
  min-height: 1.875rem;
}

/* =============================================================================
   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 ---- */
.vplus-vendor-table-wrap {
  background: #fff;
  border: 1px solid #dcdde0;
  border-radius: 0.375rem;
  overflow: hidden;
  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;
}

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

/* Back button row */
.vplus-vendor-profile-actions {
  margin-bottom: 1rem;
}

/* 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).
   Auction Manager surfaces need the same row-collapse treatment
   the phone breakpoint already applies — the desktop grid is
   still too wide for iPad-portrait viewports, and the inline
   action columns wrap awkwardly. We scope to `orientation: portrait`
   so iPad-landscape (which has plenty of width) keeps the desktop
   layout untouched.
   ============================================================ */
@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. */
  .vplus-submissions-tabs ~ .tab-content .table-responsive {
    border: none;
  }
  .vplus-submissions-tabs ~ .tab-content table.table thead {
    display: none;
  }
  .vplus-submissions-tabs ~ .tab-content table.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 tbody td {
    border: none;
    padding: 0.125rem 0;
  }
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:first-child {
    flex: 0 0 auto;
    order: -2;
  }
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(2) {
    flex: 0 0 auto;
    order: -1;
  }
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(3) {
    flex: 1 1 60%;
    min-width: 0;
  }
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(4) {
    flex: 0 0 100%;
    font-size: 0.85rem;
  }
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(5),
  .vplus-submissions-tabs ~ .tab-content table.table tbody td:nth-child(6) {
    flex: 0 0 auto;
    font-size: 0.85rem;
  }
  .vplus-submissions-tabs ~ .tab-content table.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 tbody td:last-child .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  /* --- Sales list (Item 6) — push the actions
     column (.col-auto.col-md inside .card-body.row)
     to a full-width bottom row. Flip from the mobile
     dropdown back to inline buttons here so the
     three-state cascade (mobile → tablet-portrait →
     desktop) lands buttons on tablet-portrait. */
  .vplus-sales-list .card-wrapper .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;
  }
  /* Show the desktop button row on tablet-portrait, hide
     the dropdown the .d-block.d-md-none mobile-fallback
     uses. The buttons themselves stretch to fill the row. */
  .vplus-sales-list
    .card-wrapper
    .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-wrapper
    .card
    .card-body.row
    > .col-auto.col-md
    .d-none.d-md-block
    .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .vplus-sales-list
    .card-wrapper
    .card
    .card-body.row
    > .col-auto.col-md
    .dropdown.d-block.d-md-none {
    display: none !important;
  }
}

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