/* -------------------------------------------------------------------------- */
/*                                Falcon Button                               */
/* -------------------------------------------------------------------------- */
/* prettier-ignore */
/*# sourceMappingURL=user.css.map */

:root {
  /* core roles */
  --ink: #2c2c2a; /* main text */
  --teal: #0f6e56; /* primary accent — buttons, links, the hum mark */
  --amber: #ba7517; /* secondary accent — badges, highlights */

  /* supporting */
  --ink-muted: #5f5e5a; /* secondary / helper text */
  --surface: #fbfaf7; /* warm off-white panel */
  --teal-tint: #e1f5ee; /* teal backgrounds, "humming" status */
  --amber-tint: #faeeda; /* amber badge backgrounds */

  --teal-bg: #eff7f5; /* subtle teal wash — page / panel backgrounds */
  --amber-bg: #f7f4ef; /* subtle amber wash — page / panel backgrounds */
  --ink-bg: #f3f3f1; /* subtle ink wash — page / panel backgrounds */

  --ink-rgb: 44, 44, 42;
  --teal-rgb: 15, 110, 86;
  --amber-rgb: 186, 117, 23;

  /* supporting */
  --ink-muted-rgb: 95, 94, 90;
  --surface-rgb: 251, 250, 247;
  --teal-tint-rgb: 225, 245, 238;
  --amber-tint-rgb: 250, 238, 218;

  --teal-bg-rgb: 239, 247, 245;
  --amber-bg-rgb: 247, 244, 239;
  --ink-bg-rgb: 243, 243, 241;
}

.text-teal {
  --falcon-text-opacity: 1;
  color: var(--teal) !important;
}

.text-ink {
  --falcon-text-opacity: 1;
  color: var(--ink) !important;
}
.text-amber {
  --falcon-text-opacity: 1;
  color: var(--amber) !important;
}

.bg-amber {
  --falcon-bg-opacity: 1;
  background-color: rgba(
    var(--amber-tint-rgb),
    var(--falcon-bg-opacity)
  ) !important;
}

.bg-teal {
  --falcon-bg-opacity: 1;
  background-color: rgba(
    var(--teal-tint-rgb),
    var(--falcon-bg-opacity)
  ) !important;
}

body {
  color: var(--ink);
  background-color: #f5f1ea;
}

/* -------------------------------------------------------------------------- */
/*                         Pricing Page — Source Badges                        */
/* -------------------------------------------------------------------------- */
/* Targets: .badge-import (IMPORT price lists) and .badge-relative (RELATIVE) */

.badge-import {
  background-color: var(--teal) !important;
  color: #fff !important;
}

.badge-relative {
  /* Darkened from --amber (#ba7517): white text on the brand amber is ~3.71:1,
     below WCAG AA's 4.5:1 for normal-size text. This shade clears AA. */
  background-color: #96600f !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/*                                   Choices                                  */
/* -------------------------------------------------------------------------- */
/* Vendor choices.min.css sets word-break: break-all on the dropdown list, which
   breaks option text mid-word (even letter-by-letter) whenever the widget's
   computed width collapses below the text width. Only break at whitespace. */
.choices .choices__list--dropdown,
.choices .choices__list[aria-expanded] {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Dropdown option colours. Falcon gives options its blue-grey gray-200 and the
   highlighted option white text; choices.min.css loads after it and swaps the
   highlight background to #f2f2f2, leaving white-on-grey that can't be read.
   Selectors carry the extra .choices so they outrank the vendor rule. */
.choices .choices__list--dropdown .choices__item--selectable,
.choices .choices__list[aria-expanded] .choices__item--selectable {
  background-color: #fff;
  color: var(--ink);
}
.choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--teal-tint);
  color: #0a4f3d;
}
.choices .choices__list--dropdown .choices__item--selectable.is-selected,
.choices .choices__list[aria-expanded] .choices__item--selectable.is-selected {
  font-weight: 600;
}

/* Multi-select remove (×) buttons. theme.css draws a dark ×, but
   choices.min.css loads after it and swaps in its white ×, which vanishes on
   the light grey chips. The doubled .choices outranks the vendor rule. */
.choices.choices[data-type*='select-multiple'] .choices__button {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
  border-left-color: rgba(0, 0, 0, 0.15);
  opacity: 0.6;
}
.choices.choices[data-type*='select-multiple'] .choices__button:hover,
.choices.choices[data-type*='select-multiple'] .choices__button:focus {
  opacity: 1;
}

/* Large Choices select. Choices leaves the original <select> (and its
   form-select-lg) inside its own wrapper, so size the widget from that to
   match a form-control-lg beside it — the app is used mostly on tablets and
   phones, so filters are always large. */
.choices:has(select.form-select-lg) {
  margin-bottom: 0;
}
.choices:has(select.form-select-lg) .choices__inner {
  display: flex;
  align-items: center;
  min-height: calc(1.8rem + 0.75rem + 2 * var(--falcon-border-width));
  padding: 0.375rem 2.5rem 0.375rem 1.25rem !important;
  font-size: 1.2rem;
  border-radius: var(--falcon-border-radius-lg);
}
/* Multi-selects: picked items sit as pill chips above a full-width "Add a…"
   box, the same look as the people chips on Account > Permissions. The inner
   wrapper drops its own box so the search input can wear the input styling. */
.choices.choices[data-type*='select-multiple'] .choices__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none;
}
.choices[data-type*='select-multiple'] .choices__list--multiple {
  display: contents;
}
.choices.choices[data-type*='select-multiple'] .choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.5rem 0.5rem 0 !important;
  padding: 0.25rem 0.35rem 0.25rem 1rem !important;
  border: 1px solid var(--falcon-border-color);
  border-radius: 2rem;
  background-color: transparent;
  color: var(--ink);
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.5;
}
/* People pickers: options carry their initials in data-custom-properties
   (personOptionAttr in src/lib/html.ts), which Choices copies onto the chip.
   Drawn as the teal initials circle the role chips use. */
.choices.choices[data-type*='select-multiple'] .choices__list--multiple .choices__item[data-custom-properties] {
  padding-left: 0.25rem !important;
}
.choices[data-type*='select-multiple'] .choices__list--multiple .choices__item[data-custom-properties]::before {
  content: attr(data-custom-properties);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--teal);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}
.choices.choices[data-type*='select-multiple'] .choices__list--multiple .choices__item.is-highlighted {
  border-color: var(--teal);
  background-color: var(--teal-tint);
}
/* Round × button, like the btn-falcon-default circles on the role chips. */
.choices.choices[data-type*='select-multiple'] .choices__list--multiple .choices__button {
  flex-shrink: 0;
  width: 2rem !important;
  height: 2rem;
  margin: 0;
  padding: 0 !important;
  border: 1px solid var(--falcon-border-color) !important;
  border-radius: 50%;
  background-color: #fff !important;
  background-position: center;
  background-size: 8px !important;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.08);
  opacity: 0.75;
}
.choices.choices[data-type*='select-multiple'] .choices__list--multiple .choices__button:hover,
.choices.choices[data-type*='select-multiple'] .choices__list--multiple .choices__button:focus {
  opacity: 1;
  border-color: var(--ink-muted) !important;
}
.choices.choices[data-type*='select-multiple'] .choices__input--cloned {
  flex: 1 0 100%;
  width: 100% !important;
  min-height: calc(1.8rem + 0.75rem + 2 * var(--falcon-border-width));
  margin: 0 !important;
  padding: 0.375rem 1.25rem !important;
  border: 1px solid var(--falcon-gray-300) !important;
  border-radius: var(--falcon-border-radius-lg);
  background-color: #fff !important;
  font-size: 1.2rem;
}
.choices.choices[data-type*='select-multiple'] .choices__input--cloned:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--teal-rgb), 0.2);
  outline: 0;
}
.choices:has(select.form-select-lg) .choices__list--single {
  min-width: 0;
}
.choices:has(select.form-select-lg) .choices__list--single .choices__item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.choices:has(select.form-select-lg) .choices__list--dropdown .choices__item--selectable {
  padding: 0.5rem 1.25rem;
  font-size: 1.1rem !important;
}

/* Report filter sidebars are ~190px wide on desktop, too narrow for large
   dropdown text ("Required delivery date" clips). Keep the large height for
   tablets, drop the text size — the same trade the stacked date range makes.
   Below xl the sidebar is a full-width offcanvas and keeps full-size text. */
@media (min-width: 1200px) {
  .offcanvas-filter-sidebar .form-select-lg {
    min-height: calc(1.8rem + 0.75rem + 2 * var(--falcon-border-width));
    padding-left: 0.75rem;
    font-size: 0.875rem;
  }
}

/* Product thumbnail in list tables (CRM Products). Fixed square so rows stay
   even whether or not a product has an image; the empty state is a quiet icon. */
.hum-product-thumb {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 0.25rem;
  background-color: #fff;
  border: 1px solid var(--falcon-gray-200);
  display: inline-block;
  vertical-align: middle;
}
.hum-product-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ink-bg);
  color: var(--ink-muted);
  font-size: 0.75rem;
}

/* Neutral label for reference codes (e.g. warehouse codes). badge-subtle-secondary
   is brand amber here, which reads as a warning next to stock badges. */
.hum-code-badge {
  background-color: var(--ink-bg);
  color: var(--ink-muted);
  font-weight: 600;
}

/* ------------------------------------------------------------------
   Warning text that actually passes AA.
   Falcon maps --falcon-warning to #f5803e, which is ~2.6:1 on a light
   card — unreadable for the "N short" shortfall note on an invoice.
   theme.css already defines an accessible shade; this exposes it as a
   utility class so it can be used directly.
   ------------------------------------------------------------------ */
.text-warning-emphasis { color: #ac5a2b !important; }

/* -------------------------------------------------------------------------- */
/*              Sales Calendar — Activity Event & Modal Styling              */
/* -------------------------------------------------------------------------- */
/* Targets:
   - .hum-activity-legend-swatch: status legend badge for activity events
   - .hum-activity-event: FullCalendar event styling for non-customer activities
   - Activity modal category chips: btn-check radio toggles for activity type
   - Duration preset buttons: quick-entry duration preset buttons

   Design: Activities use secondary amber (#ba7517) to distinguish them from
   customer visit status colours (primary blue, success green, warning yellow,
   secondary-subtle grey), maintaining visual hierarchy while being immediately
   recognisable as a different event type. Modal category and duration pickers
   use amber on selection to echo the event styling. */

/* Activity legend swatch badge — solid amber background, white text. */
.hum-activity-legend-swatch {
  background-color: var(--amber) !important;
  color: #fff !important;
}

/* Calendar events for activities — amber-tint background with amber border
   for definition. Text colour is set by the event content renderer. */
.hum-activity-event {
  background-color: var(--amber-tint) !important;
  border-color: var(--amber) !important;
}

/* Activity type category chips: selected state (btn-check:checked) uses amber
   background + white text. Unselected state has subtle border & muted text.
   Background is darkened from --amber (#ba7517) for the same reason as
   .badge-relative above: white text on the brand amber is ~3.71:1, below
   WCAG AA's 4.5:1 for normal-size text. This shade clears AA. */
#activityCategoryChips input.btn-check:checked + .btn {
  background-color: #96600f !important;
  border-color: #96600f !important;
  color: #fff !important;
}

#activityCategoryChips .btn-outline-secondary {
  color: var(--ink-muted);
  border-color: #d8e2ef;
}

#activityCategoryChips .btn-outline-secondary:hover {
  background-color: rgba(var(--amber-rgb), 0.08);
  border-color: var(--amber);
  color: var(--amber);
}

/* Duration preset buttons — light outline default (matching category chips),
   amber hover state to signal interactivity. Note: checked/selected state
   tracking is handled by JavaScript setting the activityDuration input value. */
[data-duration-preset] {
  color: var(--ink-muted);
  border-color: #d8e2ef;
}

[data-duration-preset]:hover {
  background-color: rgba(var(--amber-rgb), 0.08);
  border-color: var(--amber);
  color: var(--amber);
}

/* -------------------------------------------------------------------------- */
/*         Campaign Product Discount Overrides — Badges & Edit UI            */
/* -------------------------------------------------------------------------- */
/* Targets: Discount column in campaign products table with two badge states
   (product using own rate vs. campaign rate) + inline click-to-edit pencil +
   discount edit form.

   Design: "Own rate" badge uses secondary amber (#ba7517) + thumbtack icon
   to signal special/attention. "Campaign rate" badge uses neutral grey with
   a small dot badge to distinguish it visually (colour-blind friendly).
   Pencil icon is always visible, not hover-only (required for touch/tablet).
   Discount cell reads as clickable with subtle focus state. */

.discount-cell {
  cursor: pointer;
  position: relative;
  user-select: none;
}

.discount-cell:focus-within {
  background-color: rgba(var(--teal-rgb), 0.04);
  border-radius: 0.25rem;
}

.discount-view:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.discount-view {
  cursor: pointer;
  padding: 0.25rem 0;
  transition: background-color 0.15s ease;
}

.discount-view:hover {
  background-color: rgba(var(--teal-rgb), 0.04);
  border-radius: 0.25rem;
}

/* Badge for product using its own override rate — amber background with
   thumbtack icon already present in markup. Uses the same darkened amber
   as .badge-relative/.badge-import above: white text on the brand amber
   is ~3.71:1, below WCAG AA's 4.5:1 for small text — #96600f clears AA. */
.discount-badge.bg-warning {
  background-color: #96600f !important;
  color: #fff !important;
  font-weight: 500;
}

/* Badge for product using campaign's rate (default) — neutral grey background.
   Includes a small dot/indicator before the text to ensure colour-blind users
   can distinguish it from the overridden state. Dot added via ::before pseudo-element. */
.discount-badge.bg-200 {
  background-color: #e9ecef !important;
  color: #495057 !important;
  font-weight: 400;
  position: relative;
  padding-left: 1.25rem;
}

.discount-badge.bg-200::before {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.35rem;
  height: 0.35rem;
  background-color: currentColor;
  border-radius: 50%;
}

/* Pencil icon — always visible, never hover-only (touch-device friendly).
   Colour indicates interactive state; subtle opacity on the badge itself. */
.discount-pencil {
  opacity: 0.7;
  transition: opacity 0.15s ease;
  margin-left: 0.25rem;
}

.discount-cell:hover .discount-pencil,
.discount-cell:focus-within .discount-pencil {
  opacity: 1;
}

/* Discount edit form — appears inline when cell is clicked. */
.discount-edit {
  padding: 0.5rem 0;
}

.discount-edit.d-none + .discount-view {
  display: flex !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Discount Edit Buttons — small, stacked inline edit interface
   ───────────────────────────────────────────────────────────────────────── */
.discount-confirm-btn,
.discount-cancel-btn {
  font-size: 0.625rem;
  padding: 0.25rem 0.5rem;
  height: auto;
  line-height: 1;
}

.discount-clear-btn {
  font-size: 0.75rem;
  color: var(--ink-muted);
  text-decoration: none;
}

.discount-clear-btn:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/*          Campaign Products — Bulk Selection & Bulk Action Bar            */
/* -------------------------------------------------------------------------- */
/* Targets: Checkbox column, select-all checkbox, and bulk action bar.

   Design: Consistent with Hum's secondary amber for action affordance.
   Bulk action bar uses soft amber background to signal "pending action"
   state without being aggressive. Bulk discount panel uses soft primary
   (teal) to match the "add product" panel pattern elsewhere on the page. */

.row-select-checkbox {
  cursor: pointer;
}

#selectAllCheckbox {
  cursor: pointer;
}

#bulkActionBar {
  background-color: rgba(var(--amber-rgb), 0.08) !important;
  border-color: rgba(var(--amber-rgb), 0.2) !important;
}

#bulkActionBar .fs--1 {
  color: var(--ink);
}

#bulkDiscountPanel {
  background-color: rgba(var(--teal-rgb), 0.06) !important;
  border-color: rgba(var(--teal-rgb), 0.2) !important;
}

/* -------------------------------------------------------------------------- */
/*    Edit Campaign Settings Modal — Override Warning (Informational)       */
/* -------------------------------------------------------------------------- */
/* Targets: .alert.alert-warning inside the Edit Settings modal.

   Design: Swapped from Bootstrap's error-red alert-warning (#f8d7da) to
   a calm, informational tone using teal-tint background. Maintains visual
   hierarchy (it's still a callout) but reads as "helpful info" not "problem".
   Icon and text use teal to reinforce the calm tone. */

#modalEditSettings .alert.alert-warning {
  background-color: var(--teal-tint) !important;
  border-color: rgba(var(--teal-rgb), 0.3) !important;
  color: #1b5e5c !important;
}

#modalEditSettings .alert.alert-warning .fa-exclamation-triangle {
  color: var(--teal) !important;
}

/* -------------------------------------------------------------------------- */
/*     Import Products Preview Table — Per-Row Status Indicators          */
/* -------------------------------------------------------------------------- */
/* Targets: Status badges in the import preview modal (will_add / will_update
   / skipped).

   Design: Uses Bootstrap badge colours with subtle light backgrounds for
   quick scanning. Icons added via ::before pseudo-elements to provide
   shape-based distinction in addition to colour (accessibility). */

#importProductsModalBody .badge {
  font-weight: 500;
  padding: 0.35rem 0.6rem;
  position: relative;
  padding-left: 1.6rem;
}

/* Success (Will add) — teal background with checkmark indicator. */
#importProductsModalBody .badge.bg-success {
  background-color: rgba(var(--teal-rgb), 0.15) !important;
  color: #0a4f3d !important;
}

#importProductsModalBody .badge.bg-success::before {
  content: '+';
  position: absolute;
  left: 0.5rem;
  font-weight: bold;
  font-size: 0.95em;
}

/* Info (Will update) — teal variant (secondary info) with arrow indicator. */
#importProductsModalBody .badge.bg-info {
  background-color: rgba(15, 178, 186, 0.15) !important;
  color: #0a6d7d !important;
}

#importProductsModalBody .badge.bg-info::before {
  content: '↻';
  position: absolute;
  left: 0.45rem;
  font-size: 1em;
}

/* Secondary (Skipped) — neutral grey background with dash indicator.
   #6c757d on #e9ecef is ~4.0:1, below WCAG AA's 4.5:1 for small text —
   #495057 (already used for the "campaign rate" badge above) clears AA. */
#importProductsModalBody .badge.bg-secondary {
  background-color: #e9ecef !important;
  color: #495057 !important;
}

#importProductsModalBody .badge.bg-secondary::before {
  content: '−';
  position: absolute;
  left: 0.5rem;
  font-weight: bold;
}

/* Destructive action in a card footer (e.g. Delete transfer on the pick list).
   Falcon's danger #e63757 is ~4.0:1 on bg-body-tertiary, under AA for small
   text; #b3203a clears it on white and the tertiary grey. The 44px floor keeps
   it a safe target for gloved hands on a tablet. */
.btn-hum-destructive {
  color: #b3203a;
  background-color: #fff;
  border: 1px solid #b3203a;
  min-height: 44px;
}
.btn-hum-destructive:hover,
.btn-hum-destructive:focus-visible {
  color: #fff;
  background-color: #b3203a;
  border-color: #b3203a;
}
.btn-hum-destructive:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(179, 32, 58, 0.35);
}
/* Solid variant for the confirm button inside a destructive modal. */
.btn-hum-destructive.is-solid {
  color: #fff;
  background-color: #b3203a;
}
.btn-hum-destructive.is-solid:hover,
.btn-hum-destructive.is-solid:focus-visible {
  background-color: #8f1a2e;
  border-color: #8f1a2e;
}

/* Virtual Warehouse: the aisle header row opens the aisle's bins, and each bin
   tile opens its stock. Hover tint, teal border and a turning chevron make
   both read as clickable before anyone tries. */
.aisle-card {
  transition: border-color 0.15s ease;
}
.aisle-card:has(.aisle-header:hover),
.aisle-card:has(.aisle-header:focus-visible) {
  border-color: var(--teal) !important;
}
.aisle-header {
  cursor: pointer;
  border-radius: inherit;
  transition: background-color 0.15s ease;
}
.aisle-header:hover,
.aisle-header:focus-visible {
  background-color: rgba(var(--teal-rgb), 0.04);
}
.aisle-header:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.aisle-chevron {
  color: var(--teal);
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}
.aisle-header:not(.collapsed) .aisle-chevron {
  transform: rotate(180deg);
}
.bin-tile {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bin-tile:hover,
.bin-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}
.bin-tile:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Transfer Product — aisle map. Levels as rows (top level first), bays as
   columns, one tile per bin. Scrolls sideways inside the card on a narrow
   screen rather than squashing the tiles. */
.vw-map-scroll {
  overflow-x: auto;
}
.vw-map {
  border-collapse: separate;
  border-spacing: 0.375rem;
  margin: -0.375rem;
}
.vw-map th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  text-align: center;
}
.vw-map tbody th {
  text-align: right;
  padding-right: 0.25rem;
}
.vw-map td {
  vertical-align: top;
  padding: 0.25rem;
  background: var(--ink-bg);
  border-radius: 0.375rem;
}
.vw-cell {
  display: flex;
  gap: 0.25rem;
}
.vw-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  width: 8.5rem;
  min-height: 5.25rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(var(--ink-rgb), 0.15);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.25;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.vw-slot:not(:disabled):hover,
.vw-slot:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.vw-slot:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.vw-slot-code {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  margin-bottom: 0.125rem;
}
.vw-slot-sku {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  font-weight: 700;
}
.vw-slot-qty {
  font-weight: 600;
  color: var(--ink-muted);
}
.vw-slot-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.vw-slot-more {
  margin-top: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--amber);
}
.vw-slot-free {
  margin: auto 0;
  font-weight: 600;
  color: var(--teal);
}
.vw-slot.is-free {
  background: var(--teal-tint);
  border: 1px dashed var(--teal);
}
.vw-slot.is-same {
  background: var(--amber-tint);
  border-color: var(--amber);
}
/* Same danger look as a double-stocked tile on the Virtual Warehouse page. */
.vw-slot.is-source {
  background: var(--falcon-danger);
  border: 2px solid var(--falcon-danger);
  color: #fff;
  cursor: not-allowed;
}
.vw-slot.is-source .vw-slot-code,
.vw-slot.is-source .vw-slot-qty,
.vw-slot.is-source .vw-slot-more {
  color: rgba(255, 255, 255, 0.85);
}
.vw-slot.is-selected {
  border: 2px solid var(--teal);
  box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.25);
}
.vw-key {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  vertical-align: -0.125rem;
  border-radius: 0.1875rem;
  border: 1px solid rgba(var(--ink-rgb), 0.15);
  background: #fff;
}
.vw-key-free {
  background: var(--teal-tint);
  border: 1px dashed var(--teal);
}
.vw-key-same {
  background: var(--amber-tint);
  border-color: var(--amber);
}
.vw-key-source {
  background: var(--falcon-danger);
  border-color: var(--falcon-danger);
}