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

@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(--bs-primary);
  border-color: var(--bs-primary);
}
.vplus-file-container.is-ai-selected .vplus-ai-toggle,
.vplus-section-thumb.is-ai-selected .vplus-ai-toggle {
  color: #fff;
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}
/* 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. Tinted primary so it reads as the
   thing to press. */
.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(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: none;
  cursor: default;
}
/* A subtle ring on the selected thumbnail reinforces the choice. */
.vplus-file-container.is-ai-selected .image-box,
.vplus-section-thumb.is-ai-selected {
  outline: 2px solid var(--bs-primary);
  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;
}

.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);
}

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

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

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

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

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

/* 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-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;
  --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;
}
body.vplus-dark-mode .vplus-auction-status-tabs .nav-link.active,
body.vplus-dark-mode .vplus-sale-status-tab.active {
  background: #2d323c;
  border-color: #464d59;
  box-shadow: inset 0 -3px 0 0 #6d9bf0; /* accent underline (dark-mode indigo) */
  color: #f4f6fb;
}
body.vplus-dark-mode .vplus-auction-status-tabs .nav-link.active:hover,
body.vplus-dark-mode .vplus-sale-status-tab.active:hover {
  background: #343a46;
  border-color: #464d59;
  color: #f4f6fb;
}
/* The active tab's status DOT keeps its own semantic colour (only the generic
   text goes light); do NOT recolour .fa-circle here. */

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

  /* Action row wrapping for mobile */
  .vplus-action-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .vplus-action-row .btn,
  .vplus-btn-sync-to,
  .vplus-btn-pull-from,
  .btn-new-lot,
  .btn-bulk-import {
    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) */
#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);
  }

  /* --------------------------------------
     A13. Button consistency: solid fills
     -------------------------------------- */
  .vplus-lot-nav .btn-auction-backup {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
  }
  .vplus-lot-nav .btn-auction-backup:hover {
    background-color: var(--bs-secondary);
    color: #fff;
  }

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