select.vplus-ss-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
}

.vplus-ss-trigger {
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The selected-value span must truncate itself rather than rely on the trigger
   clipping an overflowing child (a long timezone label otherwise leaks past the
   trigger if its overflow/layout ever changes). Bound it to the trigger width
   and give it its own ellipsis. block + min-width:0 so it can shrink. */
.vplus-ss-display {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The tall, top-weighted padding is ONLY for floating-label selects (the label
   floats up into the reserved top space). Applying it to every trigger made the
   plain labelled selects (e.g. the Re-link modal + Link Vendor ID dropdown) sit
   too low and look uneven top-to-bottom. Plain triggers keep Bootstrap's default
   .form-select padding (inherited from .form-select on the trigger); only the
   floating variant overrides it. */
.vplus-ss-floating .vplus-ss-trigger {
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.vplus-ss-trigger.vplus-ss-placeholder .vplus-ss-display {
  color: var(--bs-secondary-color);
  font-weight: var(--bs-font-weight-light, 300);
}

.vplus-ss-trigger:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.vplus-ss-trigger.vplus-ss-open {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-floating .vplus-ss-wrapper.vplus-ss-has-value ~ label,
.form-floating
  .vplus-ss-wrapper.vplus-ss-floating
  .vplus-ss-trigger:focus
  ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  opacity: 0.65;
}

.form-floating .vplus-ss-wrapper ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  opacity: 0.65;
}

.vplus-ss-wrapper {
  position: relative;
}

.vplus-ss-dropdown {
  background: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: fixed;
  z-index: 10050 !important;
}

.vplus-ss-search-wrap {
  padding: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.vplus-ss-items {
  max-height: 280px;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.vplus-ss-item {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vplus-ss-item.vplus-ss-grouped {
  padding-left: 1.25rem;
}

.vplus-ss-item:hover,
.vplus-ss-item.vplus-ss-focused {
  background-color: var(--bs-tertiary-bg);
}

.vplus-ss-item.vplus-ss-active {
  background-color: var(--bs-primary);
  color: #fff;
}

.vplus-ss-item.vplus-ss-active:hover,
.vplus-ss-item.vplus-ss-active.vplus-ss-focused {
  background-color: var(--bs-primary);
  opacity: 0.9;
}

.vplus-ss-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vplus-ss-group-label {
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  letter-spacing: 0.03em;
  pointer-events: none;
}

.vplus-ss-empty {
  font-size: 0.85rem;
  text-align: center;
}

.is-invalid ~ .vplus-ss-wrapper .vplus-ss-trigger,
.was-validated select:invalid ~ .vplus-ss-wrapper .vplus-ss-trigger {
  border-color: var(--bs-danger);
}

.is-invalid ~ .vplus-ss-wrapper .vplus-ss-trigger:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.input-group .form-floating .vplus-ss-trigger {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group .form-floating:last-child .vplus-ss-trigger {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

.input-group .input-group-text + .form-floating .vplus-ss-trigger {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.vplus-ss-trigger:not(.vplus-ss-floating .vplus-ss-trigger) {
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
}
/* ── Multi-select mode (opt-in: `{ multi: true }` or a native <select multiple>) ──
   Only .vplus-ss-multi descendants are touched, so single-select rendering is
   unchanged. */

.vplus-ss-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.vplus-ss-action {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bs-link-color, #0d6efd);
  font-size: 0.8125rem;
  line-height: 1.3;
  cursor: pointer;
}

.vplus-ss-action:hover,
.vplus-ss-action:focus-visible {
  text-decoration: underline;
}

.vplus-ss-count {
  margin-left: auto;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.75rem;
}

/* Room for the tick, and the label may wrap: a month/auction name is longer
   than a single-select row and truncating it hides which item is ticked. */
.vplus-ss-dropdown[data-vplus-ss-multi="1"] .vplus-ss-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.vplus-ss-check {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.2rem;
  background: var(--bs-body-bg, #fff);
  position: relative;
}

.vplus-ss-item.vplus-ss-active .vplus-ss-check::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.04rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 🔴 A selected row must NOT reuse the single-select .vplus-ss-active fill
   (--bs-primary + #fff): dark mode redefines --bs-primary to a light blue,
   where white text measured 2.24:1 — the notification-banner defect. A tint
   plus an EXPLICIT foreground instead.
   Not `color: inherit` — the dark dropdown rule sets a background but no
   colour (vendor-plus.css:10444), so inherit resolves to the body's dark text
   on a dark panel (measured 1.93:1). Each theme states its own. */
.vplus-ss-dropdown[data-vplus-ss-multi="1"] .vplus-ss-item.vplus-ss-active {
  background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
  color: var(--bs-body-color, #212529);
}

.vplus-ss-dropdown[data-vplus-ss-multi="1"]
  .vplus-ss-item.vplus-ss-active
  .vplus-ss-check {
  border-color: var(--bs-primary, #0d6efd);
  color: var(--bs-primary, #0d6efd);
}

.vplus-ss-dropdown[data-vplus-ss-multi="1"]
  .vplus-ss-item.vplus-ss-active:hover,
.vplus-ss-dropdown[data-vplus-ss-multi="1"]
  .vplus-ss-item.vplus-ss-active.vplus-ss-focused {
  background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.16);
  opacity: 1;
}

body.vplus-dark-mode .vplus-ss-check {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
}

/* The dropdown is a dark panel in dark mode; give its rows an explicit light
   foreground so neither a selected nor an unselected row depends on what the
   page happens to have set on <body>. */
body.vplus-dark-mode .vplus-ss-dropdown[data-vplus-ss-multi="1"] .vplus-ss-item,
body.vplus-dark-mode
  .vplus-ss-dropdown[data-vplus-ss-multi="1"]
  .vplus-ss-item.vplus-ss-active {
  color: #e4e6eb;
}

/* ---------------------------------------------------------------------------
   Multi-select badges
   ---------------------------------------------------------------------------
   Opt-in via the widget's `badges` option, so existing multi instances keep the
   plain "N selected" count and single-select is untouched.

   The trigger is nowrap + overflow:hidden for the single-value ellipsis, which
   would clip a badge row to one line. Both are relaxed ONLY on a trigger that
   is actually showing badges. The state class is set by the JS that already
   knows it, rather than inferred with :has() — one less selector-support
   dependency on a control used across the suite. The ellipsis behaviour
   survives everywhere else. Height is left to grow: a fixed height would clip
   the second row. */

.vplus-ss-trigger.vplus-ss-trigger--badges {
  white-space: normal;
  overflow: visible;
  height: auto;
  min-height: calc(1.5em + 0.75rem + 2px);
}

.vplus-ss-display--badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  overflow: visible;
  white-space: normal;
  /* Room for the caret .form-select paints on the right. */
  padding-right: 0.5rem;
}

.vplus-ss-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.25rem;
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
  /* Explicit foreground, never inherit: dark mode redefines --bs-primary to a
     light blue, so a token fill with assumed-white text measures 2.24:1. */
  color: var(--bs-body-color, #212529);
  font-size: 0.8125rem;
  line-height: 1.4;
}

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

.vplus-ss-badge__remove {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
}

.vplus-ss-badge__remove:hover,
.vplus-ss-badge__remove:focus-visible {
  opacity: 1;
}

body.vplus-dark-mode .vplus-ss-badge {
  border-color: #3a3f4a;
  background: rgba(109, 179, 242, 0.16);
  color: #e4e6eb;
}