/**
 * VendorPlus core styles — part 5 of 10: Sidebar navigation, dark mode and dictation
 *
 * Split from the single 18,135-line vendor-plus.css. The parts are chained as
 * style dependencies and MUST load in numeric order: rules here are overridden
 * by later parts, and 173 selector pairs in this sheet set the same property
 * twice. Reordering the parts changes computed styles.
 *
 * Do not reorder rules between parts. To verify the split is still faithful:
 *     php vendorplus-core/tests/stylesheet-split-guard-test.php
 *
 * Lines 8504-11023 of the original file.
 */

/* ==========================================================================
   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-divider-solid: #4b5563;
  --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;

  /* V7 — 🔴 Bootstrap's THEME PAIRS were never redefined for dark mode.
   *
   * The block above swapped body/border/surface tokens, but left every
   * `*-text-emphasis` and `*-bg-subtle` at its LIGHT value. Anything styled
   * through them — the seat pill, filter counts, status badges, the orphans
   * panel — rendered dark-navy-on-dark or light-on-light. Measured on the live
   * card in dark mode: the "5 / 50 seats" pill scored 1.01:1, i.e. invisible.
   *
   * 🔴 Both halves of each pair must move together. Redefining only the text
   * colours fixed the pills but exposed light-on-light badges
   * (.vplus-vstatus--linked fell to 1.33); redefining only the backgrounds
   * would do the reverse. Values are Bootstrap 5.3's own dark-theme palette,
   * so components keep their intended semantics.
   *
   * Measured effect on the Vendors card: 9 contrast failures → 0. */
  --bs-primary-text-emphasis: #9ec5fe;
  --bs-secondary-text-emphasis: #c4c8cb;
  --bs-success-text-emphasis: #a3cfbb;
  --bs-info-text-emphasis: #9eeaf9;
  --bs-warning-text-emphasis: #ffe69c;
  --bs-danger-text-emphasis: #f1aeb5;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #212529;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #495057;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;

  background-color: var(--vplus-surface-canvas);
  color: var(--vplus-text-primary);
}

/* V7 — the Vendors table wrapper.
 *
 * 🔴 `.vplus-vendor-table-wrap { background: #fff }` (line ~13181) had NO dark
 * counterpart, so the table body stayed pure white in dark mode and 50 text
 * nodes sat on it — row names rendered #f4f6fb on #fff (1.08:1, invisible).
 *
 * ⚠ The only dark override that existed was scoped to `.vplus-vendor-orphans`,
 * so an earlier pass tuned the nested orphans table and missed the main one.
 * Defined here rather than in the card template so BOTH the Vendors card and
 * the Your Team card pick it up. */
body.vplus-dark-mode .vplus-vendor-table-wrap {
  background: #242830;
  border-color: rgba(255, 255, 255, 0.12);
}

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

/* .vplus-portal-link-badge is excluded because it is an anchor styled as a
   badge: the blue link colour rendered #6db3f2 on the badge's #031633 ground.
   Excluding here is correct rather than out-specifying — each :not() counts as
   a class, so this selector already carries 6 and an override would have to
   keep pace with any future addition to the list. */
body.vplus-dark-mode
  a:not(.btn):not(.nav-link):not(.dropdown-item):not(.vplus-sidebar-link):not(
    .vplus-sidebar-sublink
  ):not(.vplus-portal-link-badge) {
  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;
}

/* The report card header carries the brand colour in dark mode too, so it
   matches light mode and print. The blanket `.card-header` rule above sets
   background-color LITERALLY, which beats --bs-card-cap-bg however specific
   the variable's rule is (the variable only feeds Bootstrap's own declaration),
   so this has to restate the property rather than the variable. Every other
   card header keeps the dark grey. */
body.vplus-dark-mode .vplus-report-card .card-header,
body.vplus-dark-mode .vplus-vendor-report-card .card-header {
  background-color: var(--vplus-brand-color, #0d6efd);
  color: var(--vplus-brand-contrast, #ffffff);
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

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

/* Sectioned-form headers in dark mode: the light band darkens and the text
   lightens so the accent-left treatment still reads. */
body.vplus-dark-mode .vplus-section-cards .vplus-card-header {
  background: #2b3038;
  color: #e4e6eb;
  border-bottom-color: #3a3f4a;
}
body.vplus-dark-mode
  .vplus-section-cards
  .vplus-card-header
  .vplus-collapse-icon {
  background-color: rgba(255, 255, 255, 0.08);
}

body.vplus-dark-mode .vplus-cm-section-head {
  background: #2b3038;
  border-bottom-color: #3a3f4a;
}
body.vplus-dark-mode .vplus-cm-section-head h4 {
  color: #e4e6eb;
}
body.vplus-dark-mode .vplus-cm-group-head {
  color: #b8bcc4;
  border-bottom-color: #3a3f4a;
}
body.vplus-dark-mode .vplus-cm-savebar {
  background: #242830;
  border-color: #3a3f4a;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.45);
}
body.vplus-dark-mode .vplus-cm-nav a {
  background: #242830;
  border-color: #3a3f4a;
  color: #b8bcc4;
}

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--blocked {
  border-left-color: #e4606d;
  background-color: #3a2a2d;
}

body.vplus-dark-mode .vplus-queue-req-list {
  background-color: #2d323c;
}

body.vplus-dark-mode .vplus-queue-req {
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-queue-req[data-vplus-req-state="done"] {
  color: #a0a6b1;
}

body.vplus-dark-mode
  .vplus-queue-req[data-vplus-req-state="done"]
  .vplus-queue-req__label {
  color: #a0a6b1;
}

body.vplus-dark-mode
  .vplus-queue-req[data-vplus-req-state="done"]
  .vplus-queue-req__icon {
  color: #4ade80;
}

body.vplus-dark-mode
  .vplus-queue-req[data-vplus-req-state="todo"]
  .vplus-queue-req__icon {
  color: #e4606d;
}

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 {
  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: var(--vplus-primary, #6db3f2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

body.vplus-dark-mode #vplus-photo-files .vplus-media-option:before {
  border-color: var(--vplus-primary, #6db3f2) 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-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: #d0d0d0;
  border-color: #b4b4b4;
}

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-closed,
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;
}

/* AMC-2 — Item Count badge in an auction card header. The generic secondary
   badge (#e9ecef) sits within a few points of both header fills, so the count
   was effectively invisible. Scoped to the collapsible header rather than
   recolouring .vplus-badge-secondary, which is used on tabs elsewhere. */
.vplus-collapsible-header .vplus-badge-secondary {
  background-color: #495057;
  color: #fff;
  border-color: #495057;
}

body.vplus-dark-mode .vplus-collapsible-header .vplus-badge-secondary {
  background-color: #cbd2dc;
  color: #1f2937;
  border-color: #cbd2dc;
}

body.vplus-dark-mode .vplus-badge-locked {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffda6a;
}

body.vplus-dark-mode .vplus-ob-lock-note {
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-badge-primary,
body.vplus-dark-mode .vplus-badge-timed {
  background-color: rgba(13, 110, 253, 0.2);
  color: #6db3f2;
}

body.vplus-dark-mode .vplus-badge-dark,
body.vplus-dark-mode .vplus-badge-marketplace {
  background-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-auction-details-btn,
body.vplus-dark-mode .vplus-item-detail-btn,
body.vplus-dark-mode .vplus-portal-link-badge {
  background-color: #031633;
  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;
}

/* CORE-1: the dark-mode outline-secondary restyle was deleted here. It set
   LITERAL color/border-color, which beats the variable remap at the end of this
   file regardless of source order, and it only ever existed to make an outline
   button legible on the dark canvas. Filled buttons do not need it; toggle
   groups get their own dark treatment with the remap. */

body.vplus-dark-mode .btn-outline-light {
  border-color: #3a3f4a;
  color: #a0a6b1;
}

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

/* ── Code & Pre ── */
body.vplus-dark-mode code {
  background-color: #2d323c;
  color: #f0a0a8;
}

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

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

/* ── Tooltips & Popovers ── */
body.vplus-dark-mode .tooltip-inner {
  background-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .bs-tooltip-top .tooltip-arrow::before,
body.vplus-dark-mode
  .bs-tooltip-auto[data-popper-placement^="top"]
  .tooltip-arrow::before {
  border-top-color: #3a3f4a;
}

body.vplus-dark-mode .bs-tooltip-bottom .tooltip-arrow::before,
body.vplus-dark-mode
  .bs-tooltip-auto[data-popper-placement^="bottom"]
  .tooltip-arrow::before {
  border-bottom-color: #3a3f4a;
}

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

body.vplus-dark-mode .popover-header {
  background-color: #343a46;
  border-bottom-color: #3a3f4a;
  color: #e4e6eb;
}

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

/* ── Media & Gallery ── */
body.vplus-dark-mode .vplus-media-files {
  background-color: #242830;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-media-option {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .vplus-media-option:hover {
  background-color: #343a46;
}

body.vplus-dark-mode .vplus-image-container {
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-primary-image {
  border-color: #3a3f4a;
}

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

/* ── Accordion ── */
body.vplus-dark-mode .accordion-item {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .accordion-button {
  background-color: #2d323c;
  color: #e4e6eb;
  box-shadow: none;
}

body.vplus-dark-mode .accordion-button:not(.collapsed) {
  background-color: #343a46;
  color: #e4e6eb;
}

body.vplus-dark-mode .accordion-button::after {
  filter: invert(0.8);
}

body.vplus-dark-mode .accordion-body {
  background-color: #242830;
}

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

body.vplus-dark-mode .offcanvas-header {
  border-bottom-color: #3a3f4a;
}

/* ── Progress Bars ── */
body.vplus-dark-mode .progress {
  background-color: #2d323c;
}

/* ── Dark mode switch (below logo) ── */
.vplus-header-brand-col {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* (The old dark-mode on/off switch styles were removed — the D&L modal now uses
   the Light/Dark/Auto segmented button group, styled in vendorplus-shared.css.) */

/* ── Traditional top nav bar ── */
body.vplus-dark-mode .navbar {
  background-color: #242830;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .navbar .nav-link {
  color: #a0a6b1;
}

body.vplus-dark-mode .navbar .nav-link:hover {
  color: #e4e6eb;
}

body.vplus-dark-mode .navbar .nav-link.active {
  color: #e4e6eb;
}

body.vplus-dark-mode .welcome-text {
  color: #a0a6b1;
}

body.vplus-dark-mode .vp-user-menu-btn {
  background: rgba(36, 40, 48, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e4e6eb;
}
body.vplus-dark-mode .vp-user-menu-btn:hover,
body.vplus-dark-mode .vp-user-menu-btn.show,
body.vplus-dark-mode .vp-user-menu-btn[aria-expanded="true"] {
  background: #242830;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.25);
}
body.vplus-dark-mode .vp-user-menu-avatar,
body.vplus-dark-mode .vp-user-menu-caret {
  color: #a0a6b1;
}
body.vplus-dark-mode .vp-user-menu-btn + .dropdown-menu .dropdown-item {
  color: #e4e6eb;
}

/* ── Integrations & Settings tab nav ── */
body.vplus-dark-mode .vplus-tab-nav {
  background-color: #242830;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vplus-tab-nav .nav-link {
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-tab-nav .nav-link:hover {
  color: #e4e6eb;
  background-color: #2d323c;
}

body.vplus-dark-mode .vplus-tab-nav .nav-link.active {
  color: #e4e6eb;
  background-color: #343a46;
}

/* ── Select2 ── */
body.vplus-dark-mode .select2-container--default .select2-selection--single,
body.vplus-dark-mode .select2-container--default .select2-selection--multiple,
body.vplus-dark-mode .select2-container--bootstrap .select2-selection--single,
body.vplus-dark-mode
  .select2-container--bootstrap
  .select2-selection--multiple {
  background-color: #2d323c;
  border-color: #3a3f4a;
  color: #e4e6eb;
}
/* #3 Photo App uses the --bootstrap Select2 theme (the dark rules previously
   only covered --default), so its dropdowns rendered white. Cover both. */
body.vplus-dark-mode
  .select2-container--bootstrap
  .select2-selection__rendered {
  color: #e4e6eb;
}
body.vplus-dark-mode
  .select2-container--bootstrap
  .select2-selection__placeholder {
  color: #a0a6b1;
}
body.vplus-dark-mode .select2-container--bootstrap .select2-selection__arrow b {
  border-top-color: #c9cdd4;
}
body.vplus-dark-mode .select2-container--bootstrap .select2-results__option {
  color: #e4e6eb;
}
body.vplus-dark-mode
  .select2-container--bootstrap
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary);
  color: #fff;
}

body.vplus-dark-mode
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #e4e6eb;
}

body.vplus-dark-mode
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #6c757d;
}

body.vplus-dark-mode .select2-dropdown {
  background-color: #2d323c;
  border-color: #3a3f4a;
}

body.vplus-dark-mode
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary);
}

body.vplus-dark-mode
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field {
  background-color: #242830;
  border-color: #3a3f4a;
  color: #e4e6eb;
}

body.vplus-dark-mode .select2-container--default .select2-results__option {
  color: #e4e6eb;
}

/* ── Shadows ── */
body.vplus-dark-mode .shadow,
body.vplus-dark-mode .shadow-sm,
body.vplus-dark-mode .shadow-lg {
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4) !important;
}

/* ── Misc Components ── */
body.vplus-dark-mode .vplus-icon-btn {
  color: #a0a6b1;
}

body.vplus-dark-mode .vplus-icon-btn:hover {
  color: #e4e6eb;
}

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

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

/* ── Scrollbar ── */
body.vplus-dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.vplus-dark-mode ::-webkit-scrollbar-track {
  background: #1a1d21;
}

body.vplus-dark-mode ::-webkit-scrollbar-thumb {
  background: #3a3f4a;
  border-radius: 4px;
}

body.vplus-dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #474d59;
}

/* ── Primary color & link override for dark mode ── */
body.vplus-dark-mode {
  --vplus-primary: #6db3f2;
  /* Lighter fill + softer glow on the dark ground — #1a7fff is too dense to
     read against dark chrome, and the light-mode glow blooms. */
  --vplus-ai-accent: #4d9dff;
  --vplus-ai-accent-glow: rgba(77, 157, 255, 0.28);
  --bs-primary: #6db3f2;
  --bs-primary-rgb: 109, 179, 242;
  --bs-link-color: #6db3f2;
  --bs-link-color-rgb: 109, 179, 242;
  --bs-link-hover-color: #93c9f7;
  --bs-secondary-color: #a0a6b1;
}

/* ── Auction / top nav link colors ── */
body.vplus-dark-mode .auction-nav .nav-link {
  --bs-nav-link-color: #a0a6b1;
  color: #a0a6b1;
}

body.vplus-dark-mode .auction-nav .nav-link:hover {
  color: #e4e6eb;
}

body.vplus-dark-mode .auction-nav .nav-item.active .nav-link {
  color: #e4e6eb;
}

body.vplus-dark-mode .auction-nav .dropdown-item {
  --bs-dropdown-link-color: #e4e6eb;
}

/* ── Dictation buttons ── */
body.vplus-dark-mode .vp-dictation-btn {
  background-color: #2d323c;
  color: #e4e6eb;
  border-color: #3a3f4a;
}

body.vplus-dark-mode .vp-dictation-btn:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

body.vplus-dark-mode .vp-dictation-btn.active {
  color: #dc3545;
  background-color: #2d323c;
  border-color: #dc3545;
}

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

body.vplus-dark-mode .vp-dictation-card-btn:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

/* ── Button groups (Item Type, Purchase Options) ── */
body.vplus-dark-mode .form-row .btn-group .btn {
  border-color: #3a3f4a;
  color: #a0a6b1;
  background-color: #242830;
}

body.vplus-dark-mode .form-row .btn-group .btn:hover {
  background-color: #2d323c;
  color: #e4e6eb;
}

body.vplus-dark-mode .form-row .btn-group .btn-check:checked + .btn {
  background-color: #343a46;
  border-color: #6db3f2;
  color: #e4e6eb;
}

/* CORE-1: the dark-mode .btn-group outline-secondary restyle was deleted for
   the same reason as the block above — literal colours out-rank the remap.
   The checked-state rule below is KEPT: it is the selected indicator. */

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

/* Refresh buttons — the auctions panel AND (since AMT-1) the item list.
   The light theme gives Statuses a blue accent and Details a deeper indigo;
   keep that apart here too, or both collapse to the same panel grey.
   NOTE: this is the ONLY dark rule for these — do not add a second beside the
   light ones, it would be outranked by this one on source order. */
body.vplus-dark-mode .vplus-refresh-btn {
  background-color: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.42);
  color: #9dc0fb;
}
body.vplus-dark-mode .vplus-refresh-btn:hover,
body.vplus-dark-mode .vplus-refresh-btn:focus,
body.vplus-dark-mode .vplus-refresh-btn:focus-visible {
  background-color: rgba(59, 130, 246, 0.26);
  border-color: rgba(59, 130, 246, 0.6);
  color: #c3d9fd;
}
body.vplus-dark-mode .vplus-refresh-btn--details {
  background-color: rgba(124, 99, 233, 0.18);
  border-color: rgba(124, 99, 233, 0.45);
  color: #b7a8fb;
}
body.vplus-dark-mode .vplus-refresh-btn--details:hover,
body.vplus-dark-mode .vplus-refresh-btn--details:focus,
body.vplus-dark-mode .vplus-refresh-btn--details:focus-visible {
  background-color: rgba(124, 99, 233, 0.28);
  border-color: rgba(124, 99, 233, 0.62);
  color: #d3c9fd;
}

/* Lot-form side panel + sync bar + checklist (lot-form-body.php). */
body.vplus-dark-mode .vplus-lot-panel,
body.vplus-dark-mode .vplus-sync-options,
body.vplus-dark-mode .vplus-required-checklist,
body.vplus-dark-mode .vplus-web-search-inline {
  background-color: var(--vplus-surface-panel) !important;
  border-color: var(--vplus-border-default) !important;
  color: var(--vplus-text-primary);
}
body.vplus-dark-mode .vplus-required-item {
  background-color: var(--vplus-surface-panel-alt);
  border-color: var(--vplus-border-default);
  color: var(--vplus-text-primary);
}
/* View toggle + Express customise buttons — were plain white. */
body.vplus-dark-mode .vplus-view-btn,
body.vplus-dark-mode .vplus-express-customise-btn {
  background-color: var(--vplus-surface-panel-alt);
  border-color: var(--vplus-border-default);
  color: var(--vplus-text-primary);
}
/* The base rule forces `color:#000 !important` on the button + its icons (to beat
   the orange header's white). In dark mode that black is invisible on the dark
   surface — override with the same !important weight + descendant selectors. */
body.vplus-dark-mode .vplus-express-customise-btn,
body.vplus-dark-mode .vplus-express-customise-btn i,
body.vplus-dark-mode .vplus-express-customise-btn .fa-solid,
body.vplus-dark-mode .vplus-express-customise-btn .fa-regular,
body.vplus-dark-mode .vplus-express-customise-btn svg {
  color: #e4e6eb !important;
}
body.vplus-dark-mode .vplus-express-customise-btn:hover,
body.vplus-dark-mode .vplus-express-customise-btn:focus {
  background: #343a46 !important;
  border-color: var(--vplus-border-default) !important;
}
body.vplus-dark-mode .vplus-view-btn.active {
  background-color: var(--vplus-primary-fill);
  border-color: var(--vplus-primary-fill);
  color: #fff;
}

/* Readonly / disabled fields (#17a): make non-interactable fields visually
   distinct from clickable ones. Interactive inputs get the DARKER surface (the
   "click here" affordance); readonly/disabled get a slightly BRIGHTER surface
   plus a subtle diagonal stripe so it's obvious they're locked. */
body.vplus-dark-mode .form-control,
body.vplus-dark-mode .form-select,
body.vplus-dark-mode .vplus-express-sync {
  background-color: #22262e; /* interactive = darker, reads as "click here" */
}
body.vplus-dark-mode .form-control[readonly],
body.vplus-dark-mode .form-control:disabled,
body.vplus-dark-mode .form-select:disabled,
body.vplus-dark-mode .vplus-express-sync[readonly],
body.vplus-dark-mode .vplus-express-sync:disabled,
body.vplus-dark-mode input.vplus-auto-increment-locked {
  background-color: #30353f !important; /* locked = brighter */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.035) 0,
    rgba(255, 255, 255, 0.035) 6px,
    transparent 6px,
    transparent 12px
  ) !important;
  color: var(--vplus-text-secondary) !important;
  border-color: #454b57 !important;
  cursor: not-allowed;
}

/* ── Lot-page dark-mode refinements (deep pass 3) ── */

/* #18 searchable-select + Tom Select caret/chevron — was dark grey on the dark
   trigger. Lighten it. */
body.vplus-dark-mode .vplus-ss-trigger .vplus-ss-caret,
body.vplus-dark-mode .vplus-ss-trigger::after,
body.vplus-dark-mode .ts-vp-caret,
body.vplus-dark-mode .ts-wrapper .ts-vp-caret {
  color: #c9cdd4 !important;
  border-top-color: #c9cdd4 !important; /* if the caret is a CSS triangle */
  opacity: 1;
}

/* #16 file-delete icon — was gray-800 (~#343a40), invisible on dark. */
body.vplus-dark-mode .vplus-file-item .vplus-file-delete,
body.vplus-dark-mode .vplus-file-container .vplus-file-delete {
  color: #aeb4bf;
}
body.vplus-dark-mode .vplus-file-item .vplus-file-delete:hover,
body.vplus-dark-mode .vplus-file-container .vplus-file-delete:hover {
  color: #ff8a96;
}

/* #16 file-item icon scale + spacing (both modes) — bump the leading icon size
   and even out the gaps between it and the filename/actions. */
.vplus-file-item,
.vplus-file-item--document,
.vplus-file-container .vplus-file-row {
  gap: 0.75rem;
}
.vplus-file-item > .vplus-file-icon,
.vplus-file-item--document > .vplus-file-icon,
.vplus-file-item .vplus-file-type-icon {
  font-size: 1.35rem;
  min-width: 1.6rem;
  text-align: center;
}

/* #17b AI file icon — solid blue chip + white glyph + soft glow PULSE, both
   modes (a deliberate accent, so it's the same in light & dark). */
.vplus-ai-file-icon {
  background: #2f6fd0 !important;
  color: #ffffff !important;
  border-color: #2f6fd0 !important;
  box-shadow: 0 0 0 0 rgba(47, 111, 208, 0.5);
  animation: vplusAiFileGlow 2.2s ease-in-out infinite;
}
@keyframes vplusAiFileGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(47, 111, 208, 0.45);
  }
  50% {
    box-shadow: 0 0 10px 3px rgba(47, 111, 208, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vplus-ai-file-icon {
    animation: none;
  }
}

/* #15 Quill editor content padding — text was hitting the edge; the dark bg made
   it obvious. Add breathing room. */
body.vplus-dark-mode .ql-editor {
  padding: 0.75rem 0.9rem;
}
body.vplus-dark-mode .ql-container {
  background-color: #22262e;
}

/* Consignor submission template picker buttons (vendor-submission-form-body.php). */
body.vplus-dark-mode .vplus-submission-template-btn {
  background-color: var(--vplus-surface-panel-alt);
  border-color: var(--vplus-border-default);
  color: var(--vplus-text-primary);
}
body.vplus-dark-mode .vplus-submission-template-btn.active {
  background-color: var(--vplus-primary-fill);
  border-color: var(--vplus-primary-fill);
  color: #fff;
}

/* "Currently editing" floating badge (cm-item-template-editor.php) — white bg. */
body.vplus-dark-mode .vplus-it-editing-badge {
  background-color: var(--vplus-surface-panel) !important;
  border-color: var(--vplus-border-default) !important;
  color: var(--vplus-text-primary) !important;
}

/* Sale status-filter tabs (archive-sale-auctions-panel.php). The LIGHT design
   deliberately avoids a solid blue fill on the active tab — it uses a soft
   neutral surface + dark text + an accent UNDERLINE so the per-status label and
   coloured dot stay legible. Dark mode must mirror that intent: a soft DARK
   surface + light text + the accent underline, with each status dot keeping its
   own hue. (The previous override forced dark-on-blue, which lost the per-status
   identity and read poorly — this restores it.) */
body.vplus-dark-mode .vplus-auction-status-tabs .nav-link,
body.vplus-dark-mode .vplus-sale-status-tab {
  border-color: #3a3f4a;
  color: #c9cdd4;
}
/* Active tab: dark mode inherits the SOLID SEMANTIC FILL introduced in the
   light theme (archive-sale-auctions-panel.php). Only the neutral fallback and
   the elevation are restated here — the per-status `:has()` fills live with the
   light-mode rules and apply in both themes, so the two can never drift.
   ⚠ Specificity, measured: the per-status `:has()` fills score [0,5,0] (a
   `:has()` counts its argument) and BEAT these rules' [0,4,1], so the semantic
   colours survive dark mode unaided. These rules DO out-specify the neutral
   [0,3,0] fallback though — so they deliberately set only
   `border-color`/`box-shadow`/`color`, never `background`. Adding a background
   here would flatten the "All" tab (and any status without a `:has()` rule)
   back to one colour. */
body.vplus-dark-mode .vplus-auction-status-tabs .nav-link.active,
body.vplus-dark-mode .vplus-sale-status-tab.active {
  border-color: transparent;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
  color: #fff;
}
body.vplus-dark-mode .vplus-auction-status-tabs .nav-link.active:hover,
body.vplus-dark-mode .vplus-sale-status-tab.active:hover {
  border-color: transparent;
  color: #fff;
}
/* On an UNSELECTED tab the status DOT keeps its own semantic colour; do NOT
   recolour .fa-circle here. The ACTIVE tab is the one exception — see the
   scoped override in archive-sale-auctions-panel.php, where the filled pill
   would otherwise render a dark dot on a dark fill. */

/* CR-preset / filled outline-secondary buttons: when "active"/checked the fill
   is Bootstrap grey (#6c757d) but dark mode had lightened the text to muted grey
   → ~1.9:1. Restore white text on the filled state. */
body.vplus-dark-mode .btn-outline-secondary.active,
body.vplus-dark-mode .btn-check:checked + .btn-outline-secondary {
  color: #fff !important;
}

/* Accent-filled action buttons that fill from --bs-primary directly (NOT via
   .btn-primary, so the systemic rule above misses them): the Express-header
   Templates button and the PDF "Analyse" doc link. Dark mode remaps --bs-primary
   to the light link-blue → white text drops to ~2.2:1. Re-fill with the
   saturated blue so their white text/icon passes AA. */
body.vplus-dark-mode .vplus-express-templates-btn {
  background: var(--vplus-primary-fill) !important;
  border-color: var(--vplus-primary-fill) !important;
}
body.vplus-dark-mode .vplus-express-templates-btn:hover,
body.vplus-dark-mode .vplus-express-templates-btn:focus {
  background: #3d7fe0 !important;
  border-color: #3d7fe0 !important;
}
body.vplus-dark-mode .vplus-doc-ai-link {
  background-color: var(--vplus-primary-fill) !important;
  border-color: var(--vplus-primary-fill) !important;
  color: #fff !important;
}

/* Transfer Modal Progress Bar */
#vplus-transfer-modal .vplus-transfer-progress {
  max-width: 100%;
  overflow: hidden;
}

#vplus-transfer-modal .progress {
  width: 100%;
  height: 12px;
  overflow: hidden;
  background-color: #e9ecef;
  border-radius: 2px;
}

#vplus-transfer-modal .progress-bar {
  max-width: 100%;
  height: 100%;
}