/* ===========================================================================
   Sales Manager -- styles scoped to #viewSalesManager.
   Reuses Watch Desk's existing design tokens (--color-*, --space-*, --radius-*,
   --text-*, --shadow-*) from base.css/style.css, matching Stock Manager's
   approach. All classes are prefixed `sales-` to avoid clashing.
=========================================================================== */

#viewSalesManager .sales-search-box {
  max-width: 520px;
}

/* Active Listings segmented control -- In Stock / Merch / Archive
   (Sam, 2026-09-22). Sits above the filters bar; hidden entirely on the
   Watchlist sub-tab via JS (goSalesTab). */
.sales-listings-subview-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.sales-subview-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sales-subview-tab:hover {
  background: var(--color-surface-alt, var(--color-surface));
}
.sales-subview-tab.active {
  background: var(--color-primary-ink);
  color: var(--color-primary);
  border-color: var(--color-primary-ink);
}

/* Merch card (Sam, 2026-09-22) -- reuses .sales-listing-card, dims when
   the WooCommerce product is out of stock so staff don't try to add an
   unavailable case/roll to the order. */
.sales-merch-out-of-stock {
  opacity: 0.55;
}
.sales-merch-out-of-stock .sales-order-btn {
  cursor: not-allowed;
}

/* Archive card (Sam, 2026-09-22) -- the linked-order quick-open link
   under the meta rows. */
.sales-archive-open-order {
  color: var(--color-primary-ink);
  font-weight: 600;
  text-decoration: none;
}
.sales-archive-open-order:hover {
  text-decoration: underline;
}

.sales-filters-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-2);
}
.sales-filters-bar .sales-search-box {
  flex: 1 1 260px;
  margin-bottom: 0;
}
.sales-filter-select {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  min-width: 160px;
  flex: 0 1 auto;
}

.sales-listings-count {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.sales-listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--space-6);
}

.sales-listing-card {
  background: var(--color-surface-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
@media (hover: hover) and (pointer: fine) {
  .sales-listing-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
  }
}

.sales-listing-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sales-listing-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sales-listing-photo-fallback {
  color: var(--color-text-faint);
  width: 48px;
  height: 48px;
}
.sales-listing-photo-fallback svg {
  width: 100%;
  height: 100%;
}
.sales-listing-photo .badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
}
.sales-watchlist-photo-btn {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(20, 18, 11, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-interactive), transform var(--transition-interactive);
}
.sales-watchlist-photo-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sales-watchlist-photo-btn:hover {
  background: rgba(20, 18, 11, 0.75);
  transform: scale(1.07);
}
.sales-watchlist-photo-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

.sales-listing-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.sales-listing-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sales-listing-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sales-listing-price {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-primary);
}
.sales-listing-price-was {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  text-decoration: line-through;
}
.sales-listing-year {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-left: auto;
}
.sales-listing-condition {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-primary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.sales-listing-brand {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.sales-listing-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sales-listing-meta-item b {
  color: var(--color-text);
  font-weight: 700;
  margin-right: 4px;
}
.sales-listing-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.sales-listing-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.sales-listing-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.sales-listing-actions-grid .sales-order-btn {
  grid-column: 1 / -1;
}
.sales-listing-actions-grid .btn {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  font-size: var(--text-sm);
  min-height: 36px;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

/* ---------- Watchlist: compact 2-up tiles ----------
   The Watchlist sub-tab swaps the full detail card for a smaller tile
   (see watchlistCardHtml() in sales-manager.js) so a shortlist built
   while walking a client around the showroom can be scanned at a glance
   -- two per row even on a phone -- then tapped through to Quick View
   for the full detail/actions. */
.sales-listings-grid-watchlist {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.sales-watchlist-tile {
  cursor: pointer;
}
.sales-watchlist-tile:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.sales-watchlist-remove-btn {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.55);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.sales-watchlist-remove-btn svg {
  width: 16px;
  height: 16px;
}
.sales-watchlist-remove-btn:hover {
  background: rgba(10, 10, 12, 0.75);
  transform: scale(1.08);
}
.sales-watchlist-body {
  padding: var(--space-3);
  gap: 4px;
}
.sales-watchlist-tile .sales-listing-name {
  font-size: var(--text-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sales-watchlist-tile .sales-listing-price {
  font-size: var(--text-base);
}
.sales-watchlist-view-hint {
  margin-top: auto;
  padding-top: 2px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------- Check Status pill ---------- */
.sales-listing-status:empty {
  display: none;
}
.sales-status-pill {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sales-status-work {
  display: block;
  margin-top: var(--space-2);
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text);
  overflow-wrap: break-word;
}
.sales-status-work-note {
  font-weight: 400;
  color: var(--color-text-muted);
}
.sales-status-ready {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.sales-status-watchmaker {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.sales-status-unknown {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ---------- Stock status badge (card photo overlay + Quick View table) ---------- */
.sales-stock-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.sales-stock-in {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.sales-stock-out {
  background: var(--color-danger-highlight, var(--color-surface));
  color: var(--color-danger, var(--color-text-muted));
}
.sales-stock-back {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
/* Item 8 (Sam, 2026-09-20): "Reduced" badge on Active Listings tiles for a
   watch with an approved commission-sale price adjustment in the last 7
   days -- black/gold, same treatment as .order-badge-gold, positioned at
   the opposite corner from the stock-status pill (which already claims
   top-right via .sales-listing-photo .badge) so both can show together. */
.sales-reduced-badge {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  top: auto;
  right: auto;
  background: var(--color-primary-ink);
  color: var(--color-primary);
  font-weight: 800;
  z-index: 1;
}
.sales-stock-unknown {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ---------- Quick View modal (#smModal.sm-wide, reused across tabs) ---------- */
.sales-qv-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 720px) {
  .sales-qv-body {
    grid-template-columns: 1fr;
  }
}
.sales-qv-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.sales-qv-photo {
  /* No fixed aspect-ratio -- real listing photos are almost always
     landscape (macro/lifestyle shots, roughly 3:2 to 16:9), so a forced
     portrait box + object-fit:contain used to leave big empty bands
     above/below the photo. The container now just hugs whatever the
     image's natural size renders to at full width, capped so a rare
     tall/portrait shot can't blow out the layout. */
  position: relative;
  width: 100%;
  max-height: 60vh;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sales-qv-photo img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}
.sales-qv-photo-empty {
  aspect-ratio: 4 / 3;
}
.sales-qv-photo-fallback {
  color: var(--color-text-faint);
  width: 64px;
  height: 64px;
}
.sales-qv-photo-fallback svg {
  width: 100%;
  height: 100%;
}
.sales-qv-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sales-qv-thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  cursor: pointer;
}
.sales-qv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sales-qv-thumb.active {
  border-color: var(--color-primary);
}
.sales-qv-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
table.sales-qv-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
}
table.sales-qv-table tr {
  border-bottom: 1px solid var(--color-divider);
}
table.sales-qv-table tr:last-child {
  border-bottom: none;
}
table.sales-qv-table th,
table.sales-qv-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  text-align: left;
  vertical-align: middle;
}
table.sales-qv-table th {
  width: 38%;
  color: var(--color-text-muted);
  font-weight: 600;
  background: var(--color-surface);
}
table.sales-qv-table td {
  color: var(--color-text);
  font-weight: 700;
  overflow-wrap: break-word;
  word-break: break-word;
}
table.sales-qv-table tr:nth-child(odd) td {
  background: var(--color-surface-2);
}
.sales-qv-desc h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.sales-qv-desc p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
  word-break: break-word;
}
.sales-qv-link {
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.sales-qv-link:hover {
  text-decoration: underline;
}

.sales-qv-readmore {
  margin-top: var(--space-2);
  padding: 0;
  border: none;
  background: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
}
.sales-qv-readmore:hover {
  text-decoration: underline;
}
.sales-qv-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sales-qv-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- History modal ---------- */
.sales-history-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sales-history-summary b {
  color: var(--color-text);
  font-size: var(--text-base);
}
.sales-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sales-history-list li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.sales-history-list li:last-child {
  border-bottom: none;
}
.sales-history-date {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-text-muted);
  min-width: 96px;
}
.sales-history-label {
  color: var(--color-text);
}
.sales-history-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---------- Order builder cart (POS / Online order) ----------
   The cart trigger itself now lives in the shared black header bar (see
   .header-cart-btn in style.css, next to the account icon) instead of a
   floating action button here -- only the modal/body styles below remain
   scoped to Sales Manager. */

/* ---------- Sticky slimline search bar (shows on scroll) ----------
   Sits fixed just below the black mission bar (desktop) or the fixed
   mobile top bar (<=880px), matching their same sidebar-bg/black
   styling for a seamless "second header" feel. Hidden by default and
   faded/slid in via .sales-sticky-search-visible once the main filters
   bar scrolls out of view (see wireStickySearch() in sales-manager.js). */
.sales-sticky-search {
  /* Sits flush against the mission bar/mobile top bar -- no visible gap. */
  position: fixed;
  top: var(--mission-bar-h);
  left: 232px;
  right: 0;
  z-index: 25;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-line);
  padding: var(--space-2) var(--space-6);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.sales-sticky-search-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sales-sticky-search .sales-search-box-dark {
  max-width: 420px;
  margin-bottom: 0;
}
.sales-sticky-search .sales-search-box-dark svg {
  color: #9A9488;
}
.sales-sticky-search .sales-search-box-dark input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #F5F3EE;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-12);
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
}
.sales-sticky-search .sales-search-box-dark input::placeholder {
  color: #9A9488;
}
.sales-sticky-search .sales-search-box-dark input:focus {
  border-color: var(--color-primary);
  outline: none;
}
@media (max-width: 880px) {
  .sales-sticky-search {
    /* --header-height is kept in sync with the real mobile top bar's
       measured height (see syncHeaderHeight() in app.js) so this stays
       flush against the header even if the bar's height changes -- a
       hardcoded guess previously caused the sticky bar to sit partly
       hidden under the header instead of right against it. */
    top: var(--header-height, 56px);
    left: 0;
    padding: var(--space-2) var(--space-4);
  }
  .sales-sticky-search .sales-search-box-dark {
    max-width: none;
  }
}

.sales-cart-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sales-cart-type-toggle {
  display: flex;
  gap: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-1);
}
.sales-cart-type-btn {
  flex: 1 1 0;
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius-md) - 2px);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sales-cart-type-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.sales-cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 40vh;
  overflow-y: auto;
  padding-right: var(--space-1);
}
.sales-cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.sales-cart-item-photo,
.sales-cart-item-photo-fallback {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sales-cart-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sales-cart-item-photo-fallback svg {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}
.sales-cart-item-info {
  min-width: 0;
}
.sales-cart-item-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sales-cart-item-sku {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.sales-cart-item-price {
  text-align: right;
  flex-shrink: 0;
}
.sales-cart-item-was {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-bottom: 2px;
}
.sales-cart-price-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}
.sales-cart-price-input {
  width: 110px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-align: right;
  background: var(--color-surface);
  color: var(--color-text);
}
.sales-cart-remove {
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.sales-cart-remove:hover {
  color: var(--color-error);
}

.sales-cart-empty {
  padding: var(--space-6) var(--space-4);
}

.sales-cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.sales-cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sales-cart-summary-discount {
  color: var(--color-success);
}
.order-discount-row-right { display: flex; align-items: center; gap: var(--space-3); }
.order-discount-row-right .order-discount-remove-btn { white-space: nowrap; }
.sales-cart-summary-total {
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-base);
  color: var(--color-text);
}
.sales-cart-summary-total b {
  font-size: var(--text-lg);
}
.sales-cart-summary-extras {
  color: var(--color-text-muted);
  font-style: italic;
}

.sales-cart-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  margin-bottom: var(--space-3);
}
.sales-cart-checkbox input {
  width: 16px;
  height: 16px;
}

.sales-cart-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
}
.sales-cart-footer-actions .btn-primary {
  min-width: 220px;
}

@media (max-width: 640px) {
  .sales-cart-item {
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "photo info"
      "price price"
      "remove remove";
    row-gap: var(--space-2);
  }
  .sales-cart-item-photo,
  .sales-cart-item-photo-fallback {
    grid-area: photo;
    width: 44px;
    height: 44px;
  }
  .sales-cart-item-info {
    grid-area: info;
  }
  .sales-cart-item-price {
    grid-area: price;
    text-align: left;
  }
  .sales-cart-remove {
    grid-area: remove;
    justify-self: end;
  }
  .sales-cart-footer-actions {
    flex-direction: column-reverse;
  }
  .sales-cart-footer-actions .btn-primary {
    min-width: 0;
    width: 100%;
  }
}

/* ---------- Part-exchange: repeatable trade-in rows ---------- */
.sales-cart-partex-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-3);
}
.sales-cart-partex-row .sales-partex-remove {
  /* .field carries its own 24px (--space-6) bottom margin, which the grid's
     `align-items: end` treats as part of the row's own height -- so a
     button with only a couple of px of its own margin lands ~22px lower
     than the field it sits beside instead of flush with its input. Give
     the button the SAME margin so both end up flush with each other. */
  margin-bottom: var(--space-6);
}
.sales-cart-partex-row + #cartPartExAddBtn,
#cartPartExAddBtn {
  margin-top: var(--space-1);
}
/* Optional Brand/Model/Ref/Year/Serial detail sub-row -- spans the full
   width of the trade-in row (below desc/value/remove) so the resulting
   Stock Manager incoming-stock record can be fully populated at the point
   of sale, without crowding the primary desc+value+remove line. */
.sales-cart-partex-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin-top: calc(-1 * var(--space-1));
}
.sales-cart-partex-details .field-label {
  font-size: 0.7rem;
}
@media (max-width: 640px) {
  .sales-cart-partex-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "desc desc"
      "value remove"
      "details details";
  }
  .sales-cart-partex-row > .field:nth-child(1) {
    grid-area: desc;
  }
  .sales-cart-partex-row > .field:nth-child(2) {
    grid-area: value;
  }
  .sales-cart-partex-row > .sales-partex-remove {
    grid-area: remove;
    justify-self: end;
  }
  .sales-cart-partex-row > .sales-cart-partex-details {
    grid-area: details;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Payment: repeatable split rows ---------- */
.sales-cart-payment-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-3);
}
.sales-cart-payment-row .sales-payment-remove {
  /* See .sales-cart-partex-row .sales-partex-remove above -- same fix. */
  margin-bottom: var(--space-6);
}
.sales-cart-payment-row .sales-payment-remove-spacer {
  display: inline-block;
  width: 32px;
}
.sales-cart-payment-row + #cartPaymentAddBtn,
#cartPaymentAddBtn {
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}
.sales-cart-payment-remaining {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-danger, #d92d20);
  margin-top: var(--space-1);
}
.sales-cart-payment-remaining.sales-cart-payment-remaining-ok {
  color: var(--color-success, #12805c);
}
@media (max-width: 640px) {
  .sales-cart-payment-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "method method"
      "amount remove";
  }
  .sales-cart-payment-row .field:nth-child(1) {
    grid-area: method;
  }
  .sales-cart-payment-row .field:nth-child(2) {
    grid-area: amount;
  }
  .sales-cart-payment-row .sales-payment-remove,
  .sales-cart-payment-row .sales-payment-remove-spacer {
    grid-area: remove;
    justify-self: end;
  }
}

/* ---------- "Add to Watchlist" listing action ---------- */
.sales-watchlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.sales-watchlist-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.sales-watchlist-btn.active {
  background: var(--color-primary-tint, var(--color-surface-2));
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- "My Watchlist" sub-tab count badge ---------- */
#salesSubtabs [data-sales-tab="watchlist"] {
  position: relative;
}
.sales-watchlist-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: var(--space-2);
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Order Manager: status/payment/dispatch badges ---------- */
.order-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.order-badge-good {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.order-badge-warn {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.order-badge-bad {
  background: var(--color-danger-highlight, #fdecea);
  color: var(--color-danger, #c0392b);
}
.order-badge-info {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.order-badge-neutral {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.order-wd-pill {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Bold black/gold treatment for signals that should stand out from the
   ordinary neutral/info badges (part-exchange, finance, fully-paid) --
   mirrors .order-wd-pill's black-on-gold pairing rather than the faint
   bordered-neutral look, which was hard to read on mobile. */
.order-badge-gold {
  background: var(--color-primary-ink);
  color: var(--color-primary);
  font-weight: 800;
}

/* ---------- Order Manager: signal filter chips ---------- */
.orders-signal-chips {
  margin-bottom: var(--space-3);
  /* Slightly smaller + tighter than the base .chip-group so all nine
     signal chips fit on one line below the search bar on a normal
     desktop width instead of wrapping onto a second row (Sam,
     2026-09-17). */
  gap: var(--space-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.orders-signal-chips .chip {
  font-size: 11px;
  padding: 5px var(--space-2);
  min-height: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  /* Below this width nine chips genuinely can't fit on one line even at
     the smaller size -- fall back to wrapping instead of clipping them
     off-screen, and drop the forced no-wrap/scroll behaviour. */
  .orders-signal-chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* ---------- Order Manager: table ---------- */
.orders-table-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.orders-table-row:hover,
.orders-table-row:focus-visible {
  background: var(--color-primary-highlight);
  outline: none;
}
.orders-table-signals-row td {
  padding-top: 0;
  padding-bottom: var(--space-3);
  border-top: none;
}
.orders-table-signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.order-danger-section {
  border: 1px solid rgba(190, 60, 45, 0.28);
  background: rgba(190, 60, 45, 0.04);
  border-radius: var(--radius-md);
}

/* Order Manager list on mobile -- the .sm-table's 720px min-width made
   every row a horizontally-scrolling sliver that didn't fit the screen.
   Below 640px, drop the table chrome and turn each row into a stacked
   card instead: cells become label/value lines using the data-label
   attribute (set per <td> in orderRowHtml) as the row's own generated
   heading, so no JS/markup duplication is needed for the two layouts. */
@media (max-width: 1180px) {
  #ordersTableWrap .sm-table {
    min-width: 0;
    width: 100%;
  }
  #ordersTableWrap .sm-table thead {
    display: none;
  }
  #ordersTableWrap .sm-table,
  #ordersTableWrap .sm-table tbody {
    display: block;
  }
  #ordersTableWrap .sm-table tr.orders-table-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e4dccb);
    border-radius: var(--radius-lg, 12px);
  }
  #ordersTableWrap .sm-table tr.orders-table-signals-row {
    display: block;
    margin-top: calc(var(--space-3) * -1);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-3) var(--space-3);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e4dccb);
    border-top: none;
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
  }
  #ordersTableWrap .sm-table tr.orders-table-signals-row td {
    display: block;
    padding: 0;
    border: none;
  }
  #ordersTableWrap .sm-table td {
    display: block;
    padding: 0;
    border: none;
    white-space: normal;
    word-break: break-word;
  }
  /* Order number spans full width as the card's header; everything else
     stacks label-above-value in the two-column grid so short values
     (status, payment, dispatch) sit tidily beside each other. */
  #ordersTableWrap .sm-table td[data-label="Order"] {
    grid-column: 1 / -1;
    font-size: var(--text-base);
    font-weight: 600;
  }
  #ordersTableWrap .sm-table td[data-label="Total"] {
    grid-column: 2;
    text-align: right;
    align-self: end;
  }
  #ordersTableWrap .sm-table td:not([data-label="Order"]):not([data-label="Total"])::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }
  #ordersTableWrap .sm-table td[data-label="Total"]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 2px;
    text-align: right;
  }
  #ordersTableWrap .sm-table-wrap {
    overflow-x: visible;
  }
}
/* iPad / small laptop (641-1180px): same stacked cards, but spread over
   four columns so each card reads as a compact grid instead of a tall strip. */
@media (min-width: 641px) and (max-width: 1180px) {
  #ordersTableWrap .sm-table tr.orders-table-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
  }
  #ordersTableWrap .sm-table td[data-label="Order"] { grid-column: 1 / 4; grid-row: 1; }
  #ordersTableWrap .sm-table td[data-label="Total"] { grid-column: 4; grid-row: 1; }
  #ordersTableWrap .sm-table td[data-label="Customer"] { grid-column: 1 / -1; }
  #ordersTableWrap .sm-table td[data-label="Payment"] { grid-column: span 2; }
  #ordersTableWrap .sm-table td[data-label="Dispatch"] { grid-column: span 2; }
}
@media (max-width: 720px) {
  .orders-signal-chips {
    gap: var(--space-2);
  }
}

.orders-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.orders-pagination-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Order Manager: detail modal ---------- */
.order-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.order-detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.order-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.order-detail-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}
.order-fraud-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.order-fraud-banner-note {
  font-weight: 500;
  opacity: 0.95;
}
.order-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  cursor: pointer;
}
.order-toggle-label input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.order-detail-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
@media (max-width: 560px) {
  .order-detail-top-actions {
    width: 100%;
  }
  .order-detail-top-actions .btn {
    flex: 1 1 auto;
  }
}
.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.order-detail-grid h4,
.order-detail-subsection h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.order-address-block {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}
@media (max-width: 720px) {
  .order-detail-grid {
    grid-template-columns: 1fr;
  }
}

.order-detail-items {
  margin-top: 0;
}
.order-detail-subsection {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.order-detail-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.order-detail-total b {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.order-partex-list,
.order-payment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.order-partex-list li,
.order-payment-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.order-partex-list li b,
.order-payment-list li b {
  color: var(--color-text);
}
.order-partex-total {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary-active, var(--color-brass));
  margin-left: var(--space-2);
}

/* Order detail pinned quick-access bar (#5): Requested delivery, Wrist
   size, Collection request, Fraud check, Watchmaker request, and Return
   tracker each collapse into a small pill here instead of always taking
   up space as full form-sections further down the modal. */
.order-quickbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.order-quickbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted, var(--color-text));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.order-quickbar-btn:hover {
  border-color: var(--color-primary, var(--color-brass));
  color: var(--color-primary-ink, var(--color-text));
}
.order-quickbar-btn.is-open {
  background: var(--color-surface-offset, var(--color-surface-2));
  border-color: var(--color-primary, var(--color-brass));
  color: var(--color-primary-ink, var(--color-text));
}
.order-quickbar-btn.has-data {
  border-color: var(--color-primary, var(--color-brass));
}
.order-quickbar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary, var(--color-brass));
  display: inline-block;
}
.order-detail-collapsible {
  animation: order-detail-collapsible-in 0.15s ease;
}
@keyframes order-detail-collapsible-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.order-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.order-activity-list li {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
}
.order-activity-list li:last-child {
  border-bottom: none;
}
.order-activity-date {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.order-activity-detail {
  color: var(--color-text);
}
.order-activity-by {
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 560px) {
  .order-activity-list li {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .order-activity-by {
    text-align: left;
  }
}

/* ---------- Order Manager: unified payments ledger panel ---------- */
.order-payments-panel .form-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.order-fully-paid-badge {
  font-size: 11px;
}
.order-payments-summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.order-payments-summary-line b {
  color: var(--color-text);
}
.order-balance-due {
  color: var(--color-danger, #b23b2e);
}
.order-payment-ledger {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.order-payment-ledger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.order-payment-ledger-row b {
  color: var(--color-text);
}
.order-payment-ledger-row .icon-btn {
  margin-left: auto;
}
.order-payment-delete-btn {
  color: var(--color-danger, #b23b2e);
}

/* Part-exchange adjustments (Sam's 19-point Order Manager / Part-
   Exchange / Invoice spec, 2026-09-25) -- mirrors .order-payment-ledger's
   row styling so adjustments read as a consistent audit ledger under
   each trade-in item. */
.order-px-adjustment-list {
  list-style: none;
  margin: 0 0 var(--space-1);
  padding: 0 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.order-px-adjustment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.order-px-adjustment-row b { color: var(--color-text); }
.order-px-adjustment-pos { color: var(--color-danger, #b23b2e); }
.order-px-adjustment-neg { color: var(--color-success, #2e7d32); }
.order-px-adjustment-row .icon-btn { margin-left: auto; }
.order-px-adjustment-row .order-px-adjustment-void-btn { color: var(--color-danger, #b23b2e); }
.order-px-adjustment-add-row {
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.order-px-adjustment-form {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted, rgba(0,0,0,0.02));
}
.order-px-adjustment-form-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Invoice version history panel -- toggled inline in the order detail
   modal (see openInvoiceHistory()). */
.order-invoice-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.order-invoice-history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.order-invoice-history-row b { color: var(--color-text); }

/* ---------- Order Manager: dispatch photo capture ---------- */
.order-dispatch-photos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.order-dispatch-photo-thumb {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt, #f4f2ee);
  cursor: pointer;
}
.order-dispatch-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Order Manager: customer ID photo ---------- */
.order-id-photo-thumb {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt, #f4f2ee);
  cursor: pointer;
}
.order-id-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Order Manager: quick-access tile buttons ---------- */
.order-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.order-quick-actions .btn {
  font-size: var(--text-xs);
  padding: 2px 8px;
}

/* Brief highlight applied to a form field when a quick-access button
   scrolls the order detail modal to it, so it's obvious where to type. */
.order-quick-focus-highlight {
  outline: 2px solid var(--color-primary, #BA9545) !important;
  outline-offset: 2px;
  transition: outline-color 0.2s ease;
}

/* ---------- Order Manager: payment-links editor ---------- */
.order-payment-link-row {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.order-payment-link-row .field-row-pair {
  align-items: end;
}
.order-link-watches {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.order-link-watch-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
}
.order-link-watch-checkbox input {
  margin: 0;
}
.order-payment-links-save {
  margin-top: var(--space-3);
}

/* ---------- Dispatch tab (Order Manager) ---------- */
.dispatch-tiles {
  margin-bottom: var(--space-5);
}
/* Dashboard tiles are rendered as <button> elements so they can act as a
   click-to-filter control for the three sections below (Sam's request,
   2026-09-16). Reset default button chrome and restore the hover affordance
   that .dashboard-tile-static otherwise disables. */
.dispatch-tile-clickable {
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.dispatch-tile-clickable:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .dispatch-tile-clickable:hover {
    border-color: var(--color-brass);
    transform: translateY(-2px);
  }
}
.dashboard-tile-active {
  border-color: var(--color-brass) !important;
  background: var(--color-primary-highlight);
}
.dispatch-filter-active-hint {
  margin-top: calc(-1 * var(--space-3));
  margin-bottom: var(--space-4);
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-brass);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover {
  color: var(--color-text);
}
.dispatch-section {
  margin-bottom: var(--space-6);
}
.dispatch-section-title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-md);
}
.dispatch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-surface-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .dispatch-row:hover {
    border-color: var(--color-brass);
  }
}
.dispatch-row-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.roi-row-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface-1);
}
.roi-pinned-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface-2);
  border: 2px solid var(--color-brass);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
}
.roi-pinned-card img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.roi-pinned-card-info {
  flex: 1;
  min-width: 0;
}
.roi-pinned-card-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roi-pinned-card-meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.roi-requested-by-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}
.roi-requested-by-tag svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.dispatch-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dispatch-select-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.dispatch-select-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-brass);
}
.dispatch-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.dispatch-select-all-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.dispatch-select-all-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-brass);
}
.dispatch-bulk-toolbar .btn svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}
@media (max-width: 640px) {
  .dispatch-bulk-toolbar {
    flex-wrap: wrap;
  }
}
.dispatch-row-name {
  font-weight: 700;
  color: var(--color-text);
}
.dispatch-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dispatch-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
.dispatch-row-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.dispatch-row-items {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.dispatch-row-serial {
  color: var(--color-text);
  font-size: var(--text-xs);
}
.dispatch-payment-summary-total {
  margin: var(--space-2) 0 0;
  font-size: var(--text-md, var(--text-sm));
  color: var(--color-text-muted);
}
.dispatch-payment-summary-total b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary-ink);
  margin-left: var(--space-1);
}
.dispatch-payment-breakdown {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dispatch-payment-breakdown li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.dispatch-payment-breakdown li b {
  color: var(--color-text);
}
.dispatch-payment-breakdown-meta {
  white-space: nowrap;
  color: var(--color-text-muted);
}
.dispatch-row-pdf-links {
  display: flex;
  gap: var(--space-2);
}
.dispatch-row-pdf-links .icon-btn {
  width: 32px;
  height: 32px;
}
.dispatch-row-mark-form {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  cursor: default;
}
.dispatch-mark-fields {
  margin-bottom: 0;
  gap: var(--space-3);
}
.dispatch-mark-fields .field {
  margin-bottom: 0;
  min-width: 180px;
}
.dispatch-detected-tracking {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-primary-highlight);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.dispatch-detected-tracking svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.dispatch-collection-hint {
  margin-top: var(--space-2);
  margin-bottom: 0;
}
.dispatch-ring-stage-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  cursor: default;
}
.dispatch-ring-stage-row .field-label {
  margin-bottom: 0;
  white-space: nowrap;
}
.dispatch-ring-stage-select {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 180px;
}
.dispatch-ring-stage-select:focus {
  outline: none;
  border-color: var(--color-primary);
}
.dispatch-ring-row {
  border-left: 3px solid var(--color-primary);
}
@media (max-width: 640px) {
  .dispatch-ring-stage-row {
    flex-wrap: wrap;
  }
  .dispatch-ring-stage-select {
    flex: 1 1 100%;
    min-width: 0;
  }
}
.dispatch-row-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.dispatch-row-actions .btn {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .dispatch-row {
    flex-direction: column;
    align-items: stretch;
  }
  .dispatch-row-side {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .dispatch-mark-fields {
    flex-direction: column;
  }
  .dispatch-mark-fields .field {
    min-width: 0;
    width: 100%;
  }
  .dispatch-row-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .dispatch-row-actions .btn {
    flex: 1 1 auto;
  }
}

/* ---------- Dispatch Manager: requested-delivery callout (#5) ---------- */
/* Prominent "REQUESTED DELIVERY / FRIDAY 2 OCTOBER" block replacing the
   old small "Requested 2 Oct — due" text, plus an optional gold "Dispatch
   today" chip or a red "Dispatch overdue" chip computed from the working-
   day dispatch-by date (#4). */
.dispatch-date-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.dispatch-date-callout-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dispatch-date-callout-value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.dispatch-date-callout-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.dispatch-today-badge {
  margin-top: 2px;
}

/* ---------- Dispatch Manager: "Due for Collection" rows (#3) ---------- */
/* Distinct from the courier due/upcoming rows -- no courier form, and the
   collection date is the headline rather than a small side label. Three
   states: needs booking (no date yet), collecting today, and a normal
   future collection date; overdue covers a booked date that has slipped. */
.dispatch-collection-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
}
.dispatch-collection-callout-label {
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.dispatch-collection-callout-value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.dispatch-collection-callout-today {
  background: var(--color-primary-ink);
}
.dispatch-collection-callout-today .dispatch-collection-callout-label,
.dispatch-collection-callout-today .dispatch-collection-callout-value {
  color: var(--color-primary);
}
.dispatch-collection-callout-warn {
  background: var(--color-warning-highlight);
}
.dispatch-collection-callout-warn .dispatch-collection-callout-label,
.dispatch-collection-callout-warn .dispatch-collection-callout-value {
  color: var(--color-warning);
}
.dispatch-collection-callout-overdue {
  background: var(--color-danger-highlight, #fdecea);
}
.dispatch-collection-callout-overdue .dispatch-collection-callout-label,
.dispatch-collection-callout-overdue .dispatch-collection-callout-value {
  color: var(--color-danger, #c0392b);
}

/* ---------- Dispatch Manager: manager-review row second action (#2) ---------- */
.dispatch-review-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.dispatch-review-actions .btn {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .dispatch-date-callout,
  .dispatch-collection-callout {
    align-items: flex-start;
    text-align: left;
  }
  .dispatch-review-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .dispatch-review-actions .btn {
    flex: 1 1 auto;
  }
}

/* ===========================================================================
   Sales Manager Dashboard tab (Welcome header, search, dispatch/newest-
   arrivals tiles, today's Acuity appointments with staff assignment).
=========================================================================== */

/* Hero panel wrapping the quick search + New Appointment button, matching
   the black premium hero on the main Dashboard tab. Purely cosmetic --
   the search input/button/results div keep their original ids and JS
   wiring (matchesSearch, dashboardSearchResultsHtml, click handlers) is
   untouched; only the surrounding markup/skin changed here. */
.sales-hero {
  margin-bottom: var(--space-6);
}
.sales-hero .sales-dashboard-search {
  margin-bottom: 0;
}
.sales-hero .search-box.sales-search-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(237, 231, 218, 0.22);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sales-hero .search-box.sales-search-box svg {
  color: rgba(237, 231, 218, 0.45);
}
.sales-hero .search-box.sales-search-box input {
  background: transparent;
  border: none;
  color: #FAF7EF;
  border-radius: 999px;
}
.sales-hero .search-box.sales-search-box input::placeholder {
  color: rgba(237, 231, 218, 0.4);
}
.sales-hero .search-box.sales-search-box:focus-within {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.09);
}
.sales-hero .sales-dashboard-new-appt-btn {
  border-radius: 999px;
  border-color: transparent;
}
/* Book Appointment / Create Order used to live in this dark hero row and
   needed a translucent-on-black treatment (.btn-secondary's default
   light-surface look is illegible against #0b0b0c). They now live in the
   page header's top-right actions slot instead (a light surface), so they
   just take the plain .btn-secondary look -- no override needed here
   anymore. Kept .sales-dashboard-hero-btn as the shared sizing class (see
   the min-height/padding/font-size rule further down) since both buttons
   still want the same compact pill sizing wherever they sit. */
@media (max-width: 900px) {
  .sales-hero.dd-hero {
    min-height: 0;
  }
}
/* Sales Manager gets its own hero photo, distinct from the main Dashboard's
   -- both reused the same shared asset/class before this, which would have
   changed the Dashboard hero too. Photo is a Tiffany-dial Daytona; position
   keeps the turquoise dial centred in the crop at any hero width. */
.sales-hero .dd-hero-photo {
  background-image: url('../assets/hero-sales-manager.webp');
  background-position: 52% 50%;
}

.sales-dashboard-search {
  position: relative;
  margin-bottom: var(--space-6);
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}
.sales-dashboard-search .sales-search-box {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
  /* The shared .search-box base class carries its own margin-bottom for
     standalone use elsewhere -- inside this flex row it inflates the
     item's outer (margin-box) height beyond the New Appointment button's,
     so align-items: stretch on the row ends up stretching the button to
     match that inflated height instead of the two staying level. The row
     itself already carries the same margin-bottom for spacing below. */
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .sales-dashboard-search {
    flex-wrap: wrap;
  }
  .sales-dashboard-search .sales-search-box {
    max-width: none;
    flex-basis: 100%;
  }
  .sales-dashboard-new-appt-btn,
  .sales-dashboard-hero-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.sales-dashboard-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 40;
}
/* The main dashboard search sits inside .dd-hero, which needs its own
   overflow: hidden for the hero photo's border-radius/crop elsewhere --
   that ancestor otherwise clips this dropdown whenever it needs to extend
   below the hero's own bottom edge. Instead of touching .dd-hero, this
   modifier (applied/positioned from JS via getBoundingClientRect()) lifts
   the dropdown out of that clipping context onto the viewport, while
   keeping the same visual size/scroll behaviour. Position/size are set
   inline by JS since they depend on the search box's live location. */
.sales-dashboard-search-results.sales-dd-search-results-fixed {
  position: fixed;
  right: auto;
  z-index: 9999;
  /* The search box itself can be quite narrow (it shares the hero row
     with the New Appointment button), too narrow to fit a photo, name,
     and the Check Status button comfortably. Let the floating dropdown
     be wider than the input it's anchored to -- it's an overlay, not an
     inline element, so this doesn't disturb any other layout. */
  min-width: 300px;
  max-width: min(400px, calc(100vw - 24px));
}
.sales-dashboard-search-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}
.sales-dashboard-search-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sales-dashboard-search-row-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.sales-dashboard-search-row-status-line:empty {
  display: none;
}
.sales-dashboard-search-row-status-btn {
  flex-shrink: 0;
}
.sales-dashboard-search-row:last-child {
  border-bottom: none;
}
.sales-dashboard-search-row:hover {
  background: var(--color-surface-2);
}
.sales-dashboard-search-row img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--color-surface-2);
}
.sales-dashboard-search-row-info {
  min-width: 0;
  flex: 1;
}
.sales-dashboard-search-row-name {
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sales-dashboard-search-row-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sales-dashboard-search-empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sales-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 860px) {
  .sales-dashboard-grid {
    grid-template-columns: 1fr;
  }
}
.sales-dashboard-tile {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.sales-dashboard-tile h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.sales-dashboard-tile h3 a.sales-dashboard-view-more {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.sales-dashboard-tile h3 a.sales-dashboard-view-more:hover {
  text-decoration: underline;
}
/* Today's-appointments tile header wraps its own h3 + Today/Tomorrow
   toggle, since .sales-dashboard-tile h3 above already stretches to
   space-between for the (unrelated) "view more" link pattern used by
   other tiles -- this keeps that generic rule untouched. */
.sales-dashboard-appt-tile-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.sales-dashboard-appt-tile-heading h3 {
  margin: 0;
}
.sales-dashboard-appt-day-toggle {
  display: flex;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}
.sales-appt-day-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.sales-appt-day-btn + .sales-appt-day-btn {
  border-left: 2px solid var(--color-border);
}
.sales-appt-day-btn:hover {
  color: var(--color-text);
}
.sales-appt-day-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
@media (max-width: 480px) {
  .sales-dashboard-appt-tile-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .sales-dashboard-appt-day-toggle {
    align-self: stretch;
  }
  .sales-appt-day-btn {
    flex: 1 1 0;
    text-align: center;
  }
}
.sales-dashboard-dispatch-counts {
  display: flex;
  gap: var(--space-4);
}
.sales-dashboard-count {
  flex: 1;
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.sales-dashboard-count-link {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font: inherit;
  color: inherit;
  width: 100%;
  display: block;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.sales-dashboard-count-link:hover,
.sales-dashboard-count-link:focus-visible {
  background: var(--color-surface-3, var(--color-surface-2));
  transform: translateY(-1px);
}
.sales-dashboard-count-link:active {
  transform: translateY(0);
}
.dispatch-section-flash {
  animation: dispatchSectionFlash 1.6s ease;
}
@keyframes dispatchSectionFlash {
  0% { background: color-mix(in srgb, var(--color-primary) 12%, transparent); border-radius: var(--radius-md); }
  100% { background: transparent; }
}
.sales-dashboard-count-num {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}
.sales-dashboard-count-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.sales-dashboard-arrivals-section {
  margin-bottom: var(--space-5);
}
.sales-dashboard-arrivals-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sales-dashboard-arrivals-heading h3 {
  margin: 0;
  font-size: var(--text-md);
  font-family: var(--font-display);
  font-weight: 600;
}
.sales-dashboard-arrivals-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sales-carousel-arrow {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.sales-carousel-arrow svg {
  width: 16px;
  height: 16px;
}
.sales-carousel-arrow:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
}
.sales-dashboard-arrivals-heading a.sales-dashboard-view-more {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  margin-left: var(--space-1);
}
.sales-dashboard-arrivals-heading a.sales-dashboard-view-more:hover {
  text-decoration: underline;
}
.sales-dashboard-arrivals-list {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}
.sales-dashboard-arrivals-list::-webkit-scrollbar {
  height: 6px;
}
.sales-dashboard-arrivals-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
.sales-dashboard-arrival-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  cursor: pointer;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sales-dashboard-arrival-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.sales-dashboard-arrival-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-2);
  overflow: hidden;
}
.sales-dashboard-arrival-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sales-dashboard-arrival-name {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--space-3) var(--space-3) 0;
}
.sales-dashboard-arrival-meta {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: 600;
  padding: 2px var(--space-3) var(--space-3);
}
.sales-dashboard-appt-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}
.sales-dashboard-appt-row--hosted {
  padding-top: calc(var(--space-3) + 22px);
}
.sales-dashboard-appt-hosted {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: #fbf6ea;
  border: 1px solid #ecdcac;
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  white-space: nowrap;
  z-index: 1;
}
/* Same visual pill as .sales-dashboard-appt-hosted (gold-on-cream "Hosted
   by" tag) but laid out inline instead of pinned absolutely to a
   corner -- for use inside modal fields and running text where there is
   no reserved tile corner to pin to. */
.hosted-by-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: #fbf6ea;
  border: 1px solid #ecdcac;
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  white-space: nowrap;
}
.sales-dashboard-appt-row:hover {
  background-color: var(--color-surface-2);
}
.sales-dashboard-appt-row:last-child {
  border-bottom: none;
}
.sales-dashboard-appt-row .sales-dashboard-appt-assign {
  cursor: auto;
}
.sales-dashboard-appt-time {
  font-weight: 700;
  min-width: 92px;
  color: var(--color-primary);
}
.sales-dashboard-appt-info {
  flex: 1 1 200px;
  min-width: 0;
}
.sales-dashboard-appt-name {
  font-weight: 600;
  font-size: var(--text-sm);
}
.sales-dashboard-appt-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sales-dashboard-appt-note {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.sales-dashboard-appt-assign {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  font-weight: 600;
  min-width: 150px;
}
.sales-dashboard-appt-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}
.sales-dashboard-appt-category {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  font-weight: 600;
  min-width: 150px;
  cursor: auto;
}
.sales-dashboard-appt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.appt-cat-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.appt-cat-comm-sale {
  background: #e8f3ec;
  color: #1f7a45;
  border-color: #bfe2cc;
}
.appt-cat-buying {
  background: #eaf1fb;
  color: #1d5fad;
  border-color: #c6dbf5;
}
.appt-cat-private-sale {
  background: #f4ecf9;
  color: #7c3fa8;
  border-color: #e0c9ef;
}
.appt-cat-bespoke-ring {
  background: #fbeff1;
  color: #b23a5c;
  border-color: #f2ccd6;
}
.appt-cat-servicing {
  background: #fdf3e3;
  color: #a4720f;
  border-color: #f2ddad;
}
.appt-cat-other {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.appt-cat-badge-auto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-style: dashed;
}
.appt-cat-auto-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}
/* Today's Appointments tile on mobile: the category/assign dropdowns wrap
   onto their own line under the name/time (there's no room beside them),
   but as plain flex children they stayed at their natural select width
   (150px) and left a lopsided empty gap on the right instead of filling
   the row width -- and the time label was vertically centered against
   the whole (much taller, multi-line) info block, so it floated in the
   middle instead of sitting level with the client name. Stretch the
   wrapped controls to the full row width and top-align everything so the
   tile reads as an even, symmetrical block instead of lopsided. */
@media (max-width: 640px) {
  .sales-dashboard-appt-row {
    align-items: flex-start;
  }
  .sales-dashboard-appt-time {
    padding-top: 2px;
  }
  .sales-dashboard-appt-controls {
    flex: 1 1 100%;
    width: 100%;
  }
  .sales-dashboard-appt-category,
  .sales-dashboard-appt-assign {
    width: 100%;
    min-width: 0;
  }
}

/* Appointment detail modal -- grouped sections with light dividers so
   the time/type/contact/assignment/notes/watch-tagger blocks read as
   distinct parts of the booking rather than one long list of fields. */
.appt-modal-body {
  gap: 0;
}
.appt-modal-section {
  padding: var(--space-2) 0;
}
.appt-modal-section .field {
  margin-bottom: var(--space-4);
}
.appt-modal-section .field:last-child {
  margin-bottom: 0;
}
.appt-modal-section-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.appt-modal-divider {
  border-top: 1px solid var(--color-divider);
  margin: var(--space-1) 0;
}
.appt-modal-auto-hint {
  font-style: italic;
}
.sales-appt-prep-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.appt-prep-watch-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.appt-prep-watch-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-2) 0;
}
.appt-prep-watch-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.appt-prep-watch-photo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.appt-prep-watch-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.appt-prep-watch-photo svg {
  width: 22px;
  height: 22px;
  color: var(--color-text-muted);
}
.appt-prep-watch-info {
  flex: 1 1 auto;
  min-width: 0;
}
.appt-prep-watch-name {
  font-weight: 600;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appt-prep-watch-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.appt-prep-watch-remove {
  flex-shrink: 0;
}
.appt-prep-watch-search {
  position: relative;
}
.roi-search-wrap {
  position: relative;
}
/* Unlike the dashboard hero search (space-constrained, needs an absolute
   overlay), the ROI modal scrolls freely, so let the results panel push
   the manual-reference field below it down instead of covering it. */
.roi-search-wrap .sales-dashboard-search-results {
  position: static;
  margin-top: var(--space-2);
}
.sales-dashboard-new-appt-btn,
.sales-dashboard-hero-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  padding: 0 var(--space-5);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  /* .btn's min-height: 56px floor no longer matters now that the search
     box's margin-bottom is zeroed inside this row (see .sales-search-box
     override above) -- .sales-dashboard-search's align-items: stretch
     sizes both items to match, but dropping the floor keeps this button
     from ever re-inflating past the search box's own height. */
  min-height: 0;
}
.sales-dashboard-new-appt-btn svg,
.sales-dashboard-hero-btn svg {
  width: 16px;
  height: 16px;
}
.sales-dashboard-loading {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}
.sales-appt-exit-error {
  color: var(--color-error);
}

/* ===========================================================================
   Appointment Mode -- client-facing lockdown. body.appointment-mode-active
   hides every department nav element so a browsing client can only ever
   see Active Listings / Watchlist / the order builder for their own
   appointment; the persistent top bar (#appointmentModeBar) is the only
   way out and requires the staff member's own password to leave.
=========================================================================== */
.appointment-mode-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  min-height: 68px;
  /* A subtle top-to-bottom gradient rather than flat black -- reads as a
     considered, tactile surface (like a watch case back) instead of a
     plain dark rectangle. */
  background: linear-gradient(180deg, #0d0d0b 0%, #000000 100%);
  color: #fff;
  border-bottom: 1px solid rgba(186, 149, 69, 0.55);
  /* Below the Create Order modal overlay (z-index: 500 in style.css) --
     it previously sat above it (550), so opening Create Order during an
     appointment had this fixed header render on top of and clip the
     top of the popup. Still above ordinary page content (sticky search
     bar 25, dashboard search dropdown 40) so it stays visible while
     scrolling. */
  z-index: 100;
  box-shadow: var(--shadow-md);
}

/* -- Identity: brand mark + eyebrow + client name ----------------------
   The mark is the same asset as the sidebar/mobile-topbar brand mark
   (see .side-brand .brand-mark / .mobile-topbar-mark in style.css) so a
   client glancing at this screen recognizes the same symbol used
   throughout the rest of the branded experience, not a one-off. Sized to
   sit comfortably against the eyebrow+name text at every breakpoint --
   see the width/height overrides in the 900px/640px media queries below. */
.appointment-mode-bar-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
}
.appointment-mode-bar-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.appointment-mode-bar-identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.appointment-mode-bar-eyebrow {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brass);
  line-height: 1;
}
.appointment-mode-bar-label {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.appointment-mode-bar-label strong {
  color: var(--color-primary);
  font-weight: 600;
}

/* -- Navigation: a single segmented control, not two loose pills ------ */
.appointment-mode-bar-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Matches the app's standard button/card corner radius (--radius-md,
     used by .btn, .icon-btn and .sales-listing-card) rather than a fully
     rounded pill, so this bar reads as part of the same design system as
     the Active Listings buttons directly beneath it. */
  border-radius: var(--radius-md);
  padding: 3px;
  min-width: 0;
}
.appointment-mode-bar-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  height: 36px;
  padding: 0 var(--space-4);
  /* Nested radius one step tighter than the container's, the same pattern
     used for inset controls elsewhere in this file (see the calc()
     nested-radius rule above the sales-listing filter chips). */
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  /* The Watchlist tab's label is "<client name>'s Watchlist" -- a long
     typed-in name (or, on mobile, just a narrow screen) can make this
     wider than the bar has room for. Without a shrink allowance + max-width
     the button ran off the edge of the screen entirely instead of
     truncating, another part of the "out of position" mobile glitch. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
  .appointment-mode-bar-tab:hover:not(.active) {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
}
.appointment-mode-bar-tab.active {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

/* -- Actions: cart + exit ---------------------------------------------- */
.appointment-mode-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}
.appointment-mode-exit-btn,
.appointment-mode-order-btn {
  flex-shrink: 0;
  height: 38px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Override the generic light-theme .btn-secondary surface/border/text so
     this button speaks the same dark-bar language as the segmented tabs
     and the cart icon beside it, instead of appearing as a mismatched pale
     box on black. */
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.28);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .appointment-mode-exit-btn:hover {
    background: rgba(193, 84, 84, 0.12);
    border-color: #c15454;
    color: #fff;
  }
  .appointment-mode-order-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
  }
}
/* Small unread-style dot shown on the View Order button when a NEW order
   has just been created (or edited elsewhere) since staff last opened it
   during this appointment -- see updateAppointmentOrderButton(). */
.appointment-mode-order-btn {
  position: relative;
}
.appointment-mode-order-btn[data-order-count]:not([data-order-count="0"])::after {
  content: attr(data-order-count);
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.appointment-mode-order-btn[data-order-count="1"]::after {
  display: none;
}
/* The shared .header-cart-btn class starts at display:none and is only
   flipped on by switchTab() in app.js for the Sales Manager tab (see
   app.js's "Order/cart header icon" comment) -- already true throughout
   Appointment Mode since it's entered from within Sales Manager and never
   leaves it, so no extra visibility wiring is needed here beyond spacing. */
.appointment-mode-cart-btn.icon-btn.icon-btn-header,
.appointment-mode-roi-btn.icon-btn.icon-btn-header,
.appointment-mode-attach-order-btn.icon-btn.icon-btn-header {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #fff;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .appointment-mode-cart-btn.icon-btn.icon-btn-header:hover,
  .appointment-mode-roi-btn.icon-btn.icon-btn-header:hover,
  .appointment-mode-attach-order-btn.icon-btn.icon-btn-header:hover {
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.08);
  }
}
body.appointment-mode-active {
  /* Kept in sync with the bar's real (possibly multi-row) height by
     syncAppointmentModeBarHeight() in sales-manager.js -- see that
     function's comment. 68px is only the pre-JS/no-JS fallback, matching
     the bar's single-row desktop height. */
  padding-top: var(--appointment-mode-bar-height, 68px);
}
body.appointment-mode-active .appointment-mode-bar {
  display: flex;
}
body.appointment-mode-active #appSidebar,
body.appointment-mode-active .app-mission-bar,
body.appointment-mode-active .mobile-topbar,
body.appointment-mode-active .sidebar-scrim,
body.appointment-mode-active #salesSubtabs,
body.appointment-mode-active #viewSalesManager > .dd-page-header {
  /* NOTE: this used to target ".section-heading"/".section-sub", which
     matches the smaller in-page sub-headings elsewhere in the app but not
     Sales Manager's own page header ("Sales Manager" title + subtitle),
     which is a ".dd-page-header" like every other tab's -- so the branded
     title/subtitle never actually hid during Appointment Mode and sat
     awkwardly right underneath the black bar on a client-facing screen.
     Fixed to the selector that actually matches it. */
  display: none !important;
}
@media (max-width: 900px) {
  .appointment-mode-bar {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  .appointment-mode-bar-label {
    font-size: var(--text-sm);
  }
  .appointment-mode-bar-logo {
    width: 28px;
    height: 28px;
  }
}
/* ---------------------------------------------------------------------
   Below 640px there's no room for identity + segmented control + actions
   side by side, so the bar becomes a deliberate two-row stack instead of
   letting flex-wrap fragment it unpredictably:
     Row 1 -- identity (eyebrow + client name), full width.
     Row 2 -- the segmented Active Listings/Watchlist control (left) and
              the cart + End Appointment actions (right), sharing one row.
   This is what actually fixes the "header and buttons out of position"
   mobile bug: previously .appointment-mode-bar-tabs and
   .appointment-mode-bar-actions both had auto flex-basis and wrapped
   unpredictably (2 rows, then 3) depending on client-name/tab-label
   length, with the page's padding-top only ever guessing at whatever
   height resulted. Now the structure is always exactly two rows, and the
   real height (whatever it turns out to be) is measured live by
   syncAppointmentModeBarHeight() in sales-manager.js and applied as
   --appointment-mode-bar-height above, so the padding can never drift out
   of sync with it again.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .appointment-mode-bar {
    flex-wrap: wrap;
    align-items: center;
    min-height: unset;
    row-gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  /* Row 1: identity, full width. */
  .appointment-mode-bar-identity {
    flex: 1 1 100%;
    order: -1;
  }
  .appointment-mode-bar-logo {
    width: 24px;
    height: 24px;
  }
  .appointment-mode-bar-label {
    white-space: normal;
  }
  /* Row 2: the segmented Active Listings/Watchlist control spans the full
     width with two equal segments, like a boutique POS menu, instead of
     two independently-sized pills that may not both fit on one line. */
  .appointment-mode-bar-tabs {
    flex: 1 1 100%;
    min-width: 0;
  }
  .appointment-mode-bar-tabs .appointment-mode-bar-tab {
    flex: 1 1 0;
  }
  /* Row 3: a clear footer strip -- cart on the left, End Appointment on
     the right -- rather than a left-aligned cluster with a dangling gap
     beside it. */
  .appointment-mode-bar-actions {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  /* With the new View Order button present, three actions no longer fit
     comfortably on this narrow a row spaced apart -- tighten the gap and
     let the exit/order buttons shrink their padding rather than overflow
     or wrap unpredictably. */
  .appointment-mode-bar-actions {
    gap: var(--space-2);
  }
  .appointment-mode-order-btn,
  .appointment-mode-exit-btn {
    padding: 0 var(--space-3);
    font-size: 0.7rem;
  }
  .appointment-mode-roi-btn.icon-btn.icon-btn-header,
  .appointment-mode-cart-btn.icon-btn.icon-btn-header,
  .appointment-mode-attach-order-btn.icon-btn.icon-btn-header {
    width: 32px;
    height: 32px;
  }
}

/* Pick list shown when an appointment has completed more than one order --
   see openAppointmentOrder() in sales-manager.js. Scoped to just that
   appointment's own orders, never the full Order Manager grid. */
.appointment-order-pick-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.appointment-order-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.appointment-order-pick-row:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-hover, var(--color-surface));
}
.appointment-order-pick-arrow {
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

/* Attach Existing Order modal (Sam, 2026-09-22) -- search results list.
   Reuses the same row look as the appointment-order-pick-list above. */
.appointment-attach-order-hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}
.appointment-attach-order-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  max-height: 360px;
  overflow-y: auto;
}
.appointment-attach-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* Without an explicit basis, the meta column's own content width (a
   status badge plus a price) squeezes -main down to whatever's left in
   the row, which is narrow enough on mobile/iPad-portrait widths that
   "Order #1234" itself wraps onto two lines. -main takes the flexible
   share and -meta keeps its natural, unshrinking width instead. */
.appointment-attach-order-row-main {
  flex: 1 1 auto;
  min-width: 0;
}
.appointment-attach-order-row-meta {
  flex-shrink: 0;
}
.appointment-attach-order-row:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-hover, var(--color-surface));
}
.appointment-attach-order-row:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.appointment-attach-order-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.appointment-attach-order-number {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appointment-attach-order-customer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appointment-attach-order-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.appointment-attach-order-total {
  font-weight: 600;
}
.appointment-attach-order-linked-tag {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
/* Narrowest phones (iPhone SE and similar, ~320-375px) -- even with the
   flex-basis fix above, a long customer name plus a 3-4 digit total can
   still get tight side-by-side. Stack number/customer above status/total
   instead of letting either column compress, since the modal itself
   already scrolls (see .modal max-height) so extra row height is free. */
@media (max-width: 380px) {
  .appointment-attach-order-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .appointment-attach-order-row-meta {
    width: 100%;
    justify-content: space-between;
  }
}

/* -------------------------------------------------------------------
   Live Appointment negotiation -- floating offers panel shown to the
   exec while in Appointment Mode, plus a couple of small helpers used
   by the back-office Live Appointments tab / detail modal.
   ------------------------------------------------------------------- */
.appointment-offers-panel {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  /* Must outrank the Create Order modal overlay (z-index: 500 in
     style.css) -- otherwise the modal's dark backdrop paints over this
     panel and its Accept/Dismiss buttons become visually greyed out and
     unclickable while the popup is open. A trade-in/discount offer must
     stay 100% visible and actionable even mid Create-Order. */
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
  width: calc(100% - var(--space-8));
}
.appointment-offer-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e2e2);
  border-left: 4px solid var(--color-primary, #1a1a1a);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  animation: appointmentOfferIn 0.2s ease-out;
}
@keyframes appointmentOfferIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.appointment-offer-text {
  font-size: 0.92rem;
  line-height: 1.4;
}
.appointment-offer-actions {
  display: flex;
  gap: var(--space-2);
}
@media (max-width: 640px) {
  .appointment-offers-panel {
    right: var(--space-3);
    left: var(--space-3);
    bottom: var(--space-3);
    width: auto;
    max-width: none;
  }
}
.live-appointment-items {
  margin: var(--space-2) 0 0;
  padding-left: 1.1em;
}
.live-appointment-items li {
  margin-bottom: var(--space-1);
}
.live-appointment-partex-detail {
  font-size: 0.82rem;
  color: var(--color-text-secondary, #666);
  margin-top: 2px;
}
.live-appointment-offer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border, #eee);
  font-size: 0.9rem;
}
.live-appointment-offer-row:last-child {
  border-bottom: none;
}

/* ===========================================================================
   Sales Manager -- deepened Ivory / Onyx / Champagne treatment.
   The page header (.dd-page-header) already carries the new identity; this
   section extends the same language into the tab's internal components --
   listing cards, filters, tables, dispatch queue, dashboard tiles, and live
   appointment cards -- so the whole tab reads as one considered surface
   rather than an old admin layout with a new banner glued on top.
   Everything here is scoped under #viewSalesManager (or targets classes that
   are unique to this tab) so Stock Manager/Servicing, which share several
   base component classes, are left untouched.
=========================================================================== */

/* ---------- Filters: search + selects as one quiet instrument bar ---------- */
#viewSalesManager .sales-filters-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
#viewSalesManager .sales-filter-select {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: border-color var(--transition-interactive);
}
#viewSalesManager .sales-filter-select:hover,
#viewSalesManager .sales-filter-select:focus {
  border-color: var(--color-primary);
  outline: none;
}
#viewSalesManager .sales-listings-count {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Listing cards: editorial ticket rather than admin tile ---------- */
#viewSalesManager .sales-listing-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}
#viewSalesManager .sales-listing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-interactive);
}
@media (hover: hover) and (pointer: fine) {
  #viewSalesManager .sales-listing-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  #viewSalesManager .sales-listing-card:hover::before {
    transform: scaleX(1);
  }
}
#viewSalesManager .sales-listing-card {
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
#viewSalesManager .sales-listing-photo {
  background: linear-gradient(160deg, var(--color-surface-2) 0%, #EFEBE0 100%);
  border-bottom: 1px solid var(--color-border);
}
#viewSalesManager .sales-listing-photo-fallback {
  color: var(--color-brass);
  opacity: 0.45;
}
#viewSalesManager .sales-listing-body {
  padding: var(--space-5) var(--space-4) var(--space-4);
}
#viewSalesManager .sales-listing-brand {
  color: var(--color-brass);
  letter-spacing: 0.14em;
}
#viewSalesManager .sales-listing-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.005em;
}
#viewSalesManager .sales-listing-price-row {
  padding-top: var(--space-2);
  margin-top: 2px;
  border-top: 1px solid var(--color-border);
}
#viewSalesManager .sales-listing-price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
}
#viewSalesManager .sales-listing-condition {
  background: transparent;
  border: 1px solid var(--color-brass);
  color: var(--color-brass);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 800;
}
#viewSalesManager .sales-listing-actions .btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
#viewSalesManager .sales-listing-actions-grid .btn:not(.btn-primary),
#viewSalesManager .sales-listing-actions .btn:not(.btn-primary) {
  background: var(--color-surface);
  border-color: var(--color-border);
}
#viewSalesManager .sales-listing-actions-grid .btn:not(.btn-primary):hover,
#viewSalesManager .sales-listing-actions .btn:not(.btn-primary):hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Watchlist tiles + empty state ---------- */
#viewSalesManager .sales-watchlist-tile .sales-listing-body {
  padding: var(--space-3);
}
#viewSalesManager .empty-state {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5);
}
#viewSalesManager .empty-state svg {
  color: var(--color-brass);
  opacity: 0.6;
}
#viewSalesManager .empty-state h3 {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---------- Order Manager: table as a quiet ledger ---------- */
#viewSalesManager .sm-table th {
  background: transparent;
  border-bottom: 2px solid var(--color-primary-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-muted);
  padding-top: var(--space-2);
  padding-bottom: var(--space-3);
}
/* Stronger, persistent order-to-order separation (not hover-only): each
   order occupies a 2-row group (main row + its signals row) -- stripe by
   PAIR of table rows, not by class, so the signals row underneath always
   matches its own order's shade instead of reverting to white and making
   adjacent orders blur together. Uses --color-surface-offset (a warmer
   cream, not the barely-there --color-surface-2) for real contrast, plus
   a visible divider under each order group. */
#viewSalesManager .sm-table tbody tr:nth-child(4n + 3),
#viewSalesManager .sm-table tbody tr:nth-child(4n + 4) {
  background: var(--color-surface-offset);
}
#viewSalesManager .sm-table tbody tr.orders-table-row {
  border-left: 3px solid transparent;
}
/* A clear, unmistakable divider between one order and the next -- the
   previous 1px var(--color-border) line was too faint against the plain
   white rows (only really visible against the cream-striped ones), so
   staff reported orders blurring together. Thicker and darker than the
   ordinary hairline, but still tonally quiet (ink at low opacity, not a
   hard black rule) so it reads as a deliberate section break rather than
   a jarring line. */
#viewSalesManager .sm-table tbody tr.orders-table-signals-row {
  border-bottom: 2px solid rgba(20, 18, 11, 0.16);
}
#viewSalesManager .sm-table tbody tr.orders-table-row:hover,
#viewSalesManager .sm-table tbody tr.orders-table-row:focus-visible {
  background: var(--color-primary-highlight) !important;
  border-left-color: var(--color-primary);
}
#viewSalesManager .sm-table tbody tr.orders-table-row:hover + tr.orders-table-signals-row {
  background: var(--color-primary-highlight);
}
#viewSalesManager .sm-table td {
  font-size: var(--text-sm);
}
#viewSalesManager .sm-table td:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-primary-ink);
}

/* ---------- Order/dispatch badges: bordered pill with dot, not solid fill ---------- */
#viewSalesManager .order-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px 3px 7px;
}
#viewSalesManager .order-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
#viewSalesManager .order-badge-good { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-highlight); }
#viewSalesManager .order-badge-warn { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-highlight); }
#viewSalesManager .order-badge-bad { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-highlight); }
#viewSalesManager .order-badge-info { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-highlight); }
#viewSalesManager .order-badge-neutral { color: var(--color-text-muted); }
a.order-badge {
  text-decoration: none;
  cursor: pointer;
}
a.order-badge:hover {
  text-decoration: underline;
}
#viewSalesManager .order-wd-pill {
  background: var(--color-primary-ink);
  color: var(--color-primary);
  border-radius: 3px;
  font-family: var(--font-display);
}
#viewSalesManager .order-badge-gold {
  background: var(--color-primary-ink);
  color: var(--color-primary);
  border-color: var(--color-primary-ink);
  font-family: var(--font-display);
  font-weight: 800;
}
#viewSalesManager .order-badge-gold::before {
  background: var(--color-primary);
}

/* ---------- Dashboard + Dispatch stat tiles: brass-topped numeral cards ---------- */
#viewSalesManager .sales-dashboard-tile,
#viewSalesManager .dashboard-tile.dashboard-tile-static {
  position: relative;
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
#viewSalesManager .sales-dashboard-tile::before,
#viewSalesManager .dashboard-tile.dashboard-tile-static::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
}
#viewSalesManager .sales-dashboard-tile h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--color-text-muted);
}
#viewSalesManager .sales-dashboard-count-num,
#viewSalesManager .dashboard-tile.dashboard-tile-static .dashboard-tile-number {
  font-family: var(--font-display);
  font-weight: 700;
}
#viewSalesManager .sales-dashboard-arrivals-heading h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}
#viewSalesManager .sales-dashboard-arrival-card .sales-listing-name,
#viewSalesManager .sales-dashboard-arrival-name {
  font-family: var(--font-display);
}
#viewSalesManager .sales-dashboard-new-appt-btn {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

/* ---------- Dispatch/Live Appointments rows: section-coded accent + card lift ---------- */
#viewSalesManager .dispatch-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: var(--color-text);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
#viewSalesManager .dispatch-row {
  background: var(--color-surface);
  border-left: 4px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
/* Alternate a warmer tint every other order within each dispatch section
   so consecutive orders read as clearly separate at a glance, matching
   the same --color-surface-offset stripe already used for Order Manager
   rows (Sam, 2026-09-17). */
#viewSalesManager .dispatch-row.dispatch-row-alt {
  background: var(--color-surface-offset);
}
#viewSalesManager .dispatch-row[data-section="review"] {
  border-left-color: var(--color-warning);
}
#viewSalesManager .dispatch-row[data-section="due"] {
  border-left-color: var(--color-primary);
}
#viewSalesManager .dispatch-row[data-section="upcoming"] {
  border-left-color: var(--color-border);
}
#viewSalesManager .dispatch-row[data-section="live"] {
  border-left-color: var(--color-brass);
}
@media (hover: hover) and (pointer: fine) {
  #viewSalesManager .dispatch-row:hover {
    box-shadow: var(--shadow-md);
    border-left-color: var(--color-brass);
  }
}
#viewSalesManager .dispatch-row-name {
  font-family: var(--font-display);
  font-weight: 600;
}
#viewSalesManager .live-appointment-row .dispatch-row-date {
  font-family: var(--font-display);
  color: var(--color-brass);
  font-weight: 600;
}

/* ---------- Live Appointments nav badge (sidebar sub-tab) ---------- */
#salesSubtabs [data-sales-tab="live_appointments"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.sm-subnav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-error, #b3261e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------- Live Appointments: expired/ended history rows ---------- */
.live-appointment-row-expired {
  opacity: 0.72;
}
.live-appointment-row-expired .dispatch-row-date {
  color: var(--color-text-secondary, #666);
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Live Appointments: watches currently being viewed ------- */
/* The most important thing on the row -- what the client is actually
   looking at right now -- so it sits above the client name, not buried
   in the meta badges. */
.live-appointment-watching {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-primary-ink, #14120B);
  order: -1;
}
.live-appointment-watching svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-brass);
}
.live-appointment-watching-empty {
  color: var(--color-text-secondary, #666);
  font-family: inherit;
  font-weight: 500;
  font-style: italic;
}
.live-appointment-detail-watchlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.live-appointment-watch-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-2) 4px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}
.live-appointment-watch-chip img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-border);
}
.live-appointment-watch-chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.live-appointment-watch-chip-price {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
}
.live-appointment-watch-chip-serial {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------- Live Appointments: admin delete ------------------------- */
.live-appointment-delete-btn {
  margin-top: var(--space-3);
}

/* ---------- Order-complete confirmation (Live Appointment / POS checkout) ---------- */
.sales-order-complete-body {
  text-align: center;
  padding: var(--space-6) var(--space-5) var(--space-5);
  align-items: center;
}
.sales-order-complete-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-success-highlight);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  margin: 0 auto var(--space-4);
}
.sales-order-complete-heading {
  margin: 0 0 var(--space-2);
}
.sales-order-complete-hint {
  margin: 0 0 var(--space-6);
  max-width: 320px;
}
.sales-order-complete-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 320px;
}

/* ---------- Book Appointment modal: luxury black / ivory / gold dress ----------
   This is the client-facing booking form (feeds straight into Acuity), so it
   gets its own boutique-style dark theme -- distinct from the light, utility
   modals used for internal ops (Create Order, Flag, etc.) that share the same
   #smModal container. Entirely scoped under .book-appt-modal so no other
   modal on the page is touched. */
.modal.book-appt-modal {
  background: #0b0b0c;
  border-color: #2a2620;
}
.modal.book-appt-modal .modal-header h2 {
  color: #FAF7EF;
  letter-spacing: 0.02em;
}
.modal.book-appt-modal .field-hint {
  color: #ADA695;
}
.modal.book-appt-modal .field-label {
  color: #FAF7EF;
}
.modal.book-appt-modal .required-mark {
  /* Softer coral -- keeps the required-field cue legible without the
     light-theme error red clashing against black. */
  color: #E2A0A0;
}
.modal.book-appt-modal .icon-btn {
  background: transparent;
  border-color: #3A362E;
  color: #FAF7EF;
}
@media (hover: hover) and (pointer: fine) {
  .modal.book-appt-modal .icon-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}
.modal.book-appt-modal .field input,
.modal.book-appt-modal .field select,
.modal.book-appt-modal .field textarea {
  background: #17140f;
  border-color: #3A362E;
  color: #FAF7EF;
}
.modal.book-appt-modal .field input::placeholder,
.modal.book-appt-modal .field textarea::placeholder {
  color: #6E695C;
}
.modal.book-appt-modal .field input:focus,
.modal.book-appt-modal .field select:focus,
.modal.book-appt-modal .field textarea:focus {
  border-color: var(--color-primary);
  background: #1c1812;
}
.modal.book-appt-modal .field select:disabled,
.modal.book-appt-modal .field input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* The native date-picker glyph renders near-black by default -- invisible
   against this dark field. Recolour it to the gold accent so it stays
   legible and on-brand. */
.modal.book-appt-modal .field input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(24%) saturate(586%) hue-rotate(1deg) brightness(93%) contrast(89%);
  cursor: pointer;
}
/* The native <select> chevron has the same problem, so it's replaced with a
   custom gold chevron rather than relying on the browser's default arrow. */
.modal.book-appt-modal .field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23BA9545' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 14px;
  padding-right: var(--space-8);
}
.modal.book-appt-modal .modal-footer {
  border-top-color: #2a2620;
}
.modal.book-appt-modal .btn-secondary {
  background: transparent;
  border-color: #4A453A;
  color: #FAF7EF;
}
@media (hover: hover) and (pointer: fine) {
  .modal.book-appt-modal .btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}
.modal.book-appt-modal .btn-primary {
  background: var(--color-primary);
  color: #14120B;
}
@media (hover: hover) and (pointer: fine) {
  .modal.book-appt-modal .btn-primary:hover {
    background: var(--color-primary-hover);
  }
}
.modal.book-appt-modal .sm-book-context { display: grid; gap: 3px; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid #3A362E; border-left: 3px solid #BA9545; border-radius: 8px; background: #11100d; color: #FAF7EF; }
.modal.book-appt-modal .sm-book-context span { color: #D8D1BF; font-size: var(--text-sm); }
.modal.book-appt-modal .sm-book-context small { color: #ADA695; }
.modal.book-appt-modal .sm-book-review { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid #BA9545; border-radius: 8px; background: #16120a; color: #FAF7EF; line-height: 1.5; }
/* Single-checkbox intake questions (e.g. Watch Showroom Appointment's
   "You are able to bring ID to your appointment.") -- rare compared to
   the text question, but needs the same ivory-on-black legibility. */
.modal.book-appt-modal .checkbox-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #FAF7EF;
  font-size: var(--text-sm);
  cursor: pointer;
}
.modal.book-appt-modal .checkbox-inline input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

/* ===================================================================
   Order Manager redesign: Pipeline board / Client history
   =================================================================== */
.orders-view-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.orders-view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--color-surface-2, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
}
.orders-view-toggle-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.orders-view-toggle-btn.active {
  background: var(--color-primary);
  color: #14120B;
}
@media (hover: hover) and (pointer: fine) {
  .orders-view-toggle-btn:not(.active):hover {
    color: var(--color-text);
  }
}

/* ---------- Pipeline board ---------- */
.pipeline-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.pipeline-column {
  background: var(--color-surface-2, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 320px);
  min-height: 220px;
}
.pipeline-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-surface-2, var(--color-surface));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 1;
}
.pipeline-column-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.pipeline-column-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  min-width: 20px;
  text-align: center;
}
.pipeline-column-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}
.pipeline-column-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-4) 0;
}
.pipeline-column-more {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--space-2) 0 0;
}
.pipeline-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pipeline-card:hover,
.pipeline-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  outline: none;
}
.pipeline-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.pipeline-card-total {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-sm);
}
.pipeline-card-customer {
  font-weight: 600;
  color: var(--color-text);
  margin-top: 2px;
  word-break: break-word;
}
.pipeline-card-date,
.pipeline-card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.pipeline-card-watch,
.order-row-watch {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  word-break: break-word;
}
.pipeline-card-watch .sm-mono,
.order-row-watch .sm-mono {
  color: var(--color-text);
}
.order-row-watch-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: var(--space-2);
}
.order-row-watch-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  flex: 0 0 auto;
  background: var(--color-surface-2);
}
.order-row-paid-detail {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
  white-space: nowrap;
}
.order-row-paid-detail-good {
  color: var(--color-success);
}
.order-row-paid-detail-warn {
  color: var(--color-warning, #a15c00);
}
.pipeline-card-badges {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.pipeline-card-signals {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.pipeline-card-action {
  margin-top: var(--space-3);
}
.pipeline-card-action .btn {
  width: 100%;
}
.pipeline-closed-note,
.pipeline-stale-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 1100px) {
  .pipeline-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .pipeline-board {
    grid-template-columns: 1fr;
  }
  .pipeline-column {
    max-height: none;
  }
  .pipeline-column-body {
    overflow-y: visible;
  }
}

/* ---------- Client history ---------- */
.client-history-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.client-history-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.client-history-result-row:hover,
.client-history-result-row:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}
.client-history-result-name {
  font-weight: 600;
  color: var(--color-text);
}
.client-history-result-contact {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.client-history-back {
  margin-bottom: var(--space-4);
}
.client-history-header {
  margin-bottom: var(--space-5);
}
.client-history-header h3 {
  margin: 0 0 2px;
}
.client-history-contact {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.client-history-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.client-history-stats b {
  color: var(--color-text);
}
.client-history-section {
  margin-bottom: var(--space-5);
}
.client-history-section h4 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.client-history-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.client-history-activity-date {
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}

@media (max-width: 640px) {
  .orders-view-toggle-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .orders-view-toggle {
    justify-content: center;
  }
}

/* Delivery address change + DHL dispatch label (Sam's spec, 2026-10-02) */
.order-delivery-address-lines {
  font-size: var(--text-sm);
  line-height: 1.5;
  background: var(--color-surface-subtle, rgba(0, 0, 0, 0.03));
  border-radius: 6px;
  padding: var(--space-2) var(--space-3);
}
.order-delivery-address-original summary {
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.order-delivery-address-original .order-delivery-address-lines {
  margin-top: var(--space-2);
}
.order-delivery-address-warn {
  color: #c0392b;
  font-weight: 600;
}
.dispatch-label-btn[data-label-state="booked"] {
  background: var(--color-success, #1e8e3e);
  border-color: var(--color-success, #1e8e3e);
  color: #fff;
}

/* =====================================================================
   Order Manager: payments & credits ledger (2026-10-04 redesign)
   Every block uses min-width:0 + overflow-wrap so long method names,
   references and notes wrap instead of spilling at any screen width.
   ===================================================================== */
.order-payments-panel { min-width: 0; }
.order-payments-panel .form-section-title { flex-wrap: wrap; }
.order-payments-panel .pl-export-btn { margin-left: auto; }
.pl-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.pl-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  min-width: 0;
}
.pl-tile b { font-size: var(--text-base); color: var(--color-text); overflow-wrap: anywhere; }
.pl-tile-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.pl-tile-sub { font-size: 11px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.pl-tile-due b { color: var(--color-error); }
.pl-tile-good { background: var(--color-success-highlight); border-color: var(--color-success); }
.pl-tile-good b { color: var(--color-success); }
.pl-progress { height: 4px; border-radius: 999px; background: var(--color-divider); overflow: hidden; margin-bottom: var(--space-3); }
.pl-progress span { display: block; height: 100%; background: var(--color-primary); transition: width 0.3s ease; }
.pl-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.pl-chip {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  max-width: 100%;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.pl-chip b { color: var(--color-text); }
.pl-subhead {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-brass);
}
.pl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  min-width: 0;
}
.pl-row-part_exchange { border-left-color: var(--color-brass); }
.pl-row-linked_order { border-left-color: var(--color-sold); }
.pl-row-muted { border-left-color: var(--color-border); background: var(--color-surface-2); opacity: 0.85; }
.pl-row-voided { border-left-color: var(--color-error); background: var(--color-surface-2); }
.pl-row-voided .pl-amt b { text-decoration: line-through; color: var(--color-text-muted); }
.pl-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.pl-method { font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.pl-type {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-brass); background: var(--color-brass-highlight);
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.pl-type-void { color: var(--color-error); background: var(--color-error-highlight); }
.pl-meta, .pl-audit { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.pl-audit { color: var(--color-text-faint); }
.pl-amt { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.pl-amt b { font-size: var(--text-base); color: var(--color-text); white-space: nowrap; }
.pl-run { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.pl-void { align-self: center; }
.pl-voided { margin-top: var(--space-3); }
.pl-voided summary { cursor: pointer; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); padding: var(--space-1) 0; }
.pl-voided .pl-list { margin-top: var(--space-2); }
.pl-split-hint { margin: 0 0 var(--space-3); }
.pl-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.pl-form .field { min-width: 0; }
.pl-form select, .pl-form input { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.pl-field-note { grid-column: span 2; }
.pl-amount-wrap { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pl-amount-wrap input { flex: 1 1 110px; }
.pl-fill-btn {
  flex: 0 0 auto; max-width: 100%;
  border: 1px solid var(--color-border); background: var(--color-surface-offset);
  color: var(--color-primary-active); border-radius: 999px;
  padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.pl-fill-btn:hover { border-color: var(--color-primary); }
.pl-after { min-height: 1.4em; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.pl-after-good { color: var(--color-success); font-weight: 700; }
.pl-after-warn { color: var(--color-warning); font-weight: 700; }
.pl-actions { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pl-block {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.pl-block .field-hint { margin: 0; flex: 1 1 220px; min-width: 0; }
.pl-nonref-badge { white-space: normal; max-width: 100%; }
.order-collect-showroom-row.pl-block { flex-direction: row; }

@media (max-width: 720px) {
  .pl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-tiles .pl-tile:last-child { grid-column: span 2; }
  .pl-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-field-method, .pl-field-amount, .pl-field-note { grid-column: 1 / -1; }
  .pl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-void { grid-column: 2; grid-row: 1; }
  .pl-amt { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-3); text-align: left; }
  .pl-actions .btn, .pl-block .btn { flex: 1 1 100%; }
  .order-payments-panel .pl-export-btn { margin-left: 0; }
}
@media (max-width: 420px) {
  .pl-form { grid-template-columns: minmax(0, 1fr); }
  .pl-tiles { grid-template-columns: minmax(0, 1fr); }
  .pl-tiles .pl-tile:last-child { grid-column: auto; }
}

/* Small "reason" dialog (void payment etc.) */
.sm-dialog-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); background: rgba(20, 18, 14, 0.6);
}
.sm-dialog {
  width: 100%; max-width: 420px; background: var(--color-surface);
  border: 2px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.sm-dialog h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.sm-dialog p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.sm-dialog input { width: 100%; }
.sm-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }

/* ---------- Order detail: loading skeleton ---------- */
.order-skel { display: flex; flex-direction: column; gap: var(--space-3); }
.order-skel-preview { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.order-skel-items { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1 1 260px; }
.order-skel-total { font-size: var(--text-sm); color: var(--color-text-muted); }
.order-skel-bar, .order-skel-block {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-divider) 25%, var(--color-surface-2) 50%, var(--color-divider) 75%);
  background-size: 200% 100%;
  animation: order-skel-shimmer 1.2s linear infinite;
}
.order-skel-bar { height: 14px; }
.order-skel-block { height: 84px; }
.order-skel-bar.w60 { width: 60%; } .order-skel-bar.w75 { width: 75%; } .order-skel-bar.w90 { width: 90%; }
@keyframes order-skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .order-skel-bar, .order-skel-block { animation: none; } }

/* ---------- Order detail: line items with photo + listing link ---------- */
.order-li-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.order-li-thumb {
  flex: 0 0 auto; width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border); cursor: pointer; background: var(--color-surface-2);
}
.order-li-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.order-li-name { overflow-wrap: anywhere; }
.order-li-view {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: var(--text-xs); font-weight: 700; color: var(--color-primary-active); text-decoration: underline; text-underline-offset: 2px;
}
.order-li-view:hover { color: var(--color-primary); }

/* ---------- Wrist size: registered card ---------- */
.wrist-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  border: 1px solid var(--color-primary); border-radius: var(--radius-sm);
  background: var(--color-brass-highlight);
}
.wrist-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); }
.wrist-card-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brass); flex-basis: 100%; }
.wrist-card-val { font-family: var(--font-display); font-size: var(--text-xl, 1.5rem); color: var(--color-primary-ink); overflow-wrap: anywhere; }
.wrist-card-alt { font-size: var(--text-sm); color: var(--color-text-muted); }
.wrist-ruler { width: 100%; max-width: 340px; height: auto; color: var(--color-primary-ink); }
.wrist-card-raw, .wrist-card-by { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.wrist-card-warn { font-size: var(--text-xs); font-weight: 700; color: var(--color-warning); }
.wrist-live { min-height: 1.3em; font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-1) 0 var(--space-2); }

/* ---------- Watch listing viewer ---------- */
.lv-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(20, 18, 14, 0.7); }
.lv-modal {
  width: 100%; max-width: 980px; max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lv-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5) var(--space-2); }
.lv-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.lv-tabs { display: flex; gap: var(--space-2); padding: 0 var(--space-5); overflow-x: auto; }
.lv-tabs:empty { display: none; }
.lv-tab { flex: 0 0 auto; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 5px 12px; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.lv-tab.is-active { background: var(--color-primary-ink); color: var(--color-primary); border-color: var(--color-primary-ink); }
.lv-content { overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-5); -webkit-overflow-scrolling: touch; }
.lv-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-5); }
.lv-gallery { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lv-main { position: relative; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lv-main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.lv-main.is-zoomed { position: fixed; inset: 0; z-index: 10; aspect-ratio: auto; border-radius: 0; border: 0; background: #000; }
.lv-main.is-zoomed img { cursor: zoom-out; }
.lv-count { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(20, 18, 14, 0.7); color: #fff; font-size: 11px; }
.lv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(20, 18, 14, 0.6); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.lv-prev { left: 8px; } .lv-next { right: 8px; }
.lv-thumbs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; }
.lv-thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-2); cursor: pointer; }
.lv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-thumb.is-active { border-color: var(--color-primary); }
.lv-noimg { padding: var(--space-8, 40px) var(--space-4); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); }
.lv-info { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lv-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); overflow-wrap: anywhere; }
.lv-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lv-badges:empty { display: none; }
.lv-badge { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--color-border); }
.lv-badge-good { background: var(--color-success-highlight); color: var(--color-success); border-color: var(--color-success); }
.lv-badge-muted { background: var(--color-sold-highlight); color: var(--color-sold); }
.lv-badge-gold { background: var(--color-primary-ink); color: var(--color-primary); border-color: var(--color-primary-ink); }
.lv-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); }
.lv-price-row span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.lv-price-row b { font-size: var(--text-lg); }
.lv-price-row s { color: var(--color-text-muted); }
.lv-price-sold b { font-size: var(--text-base); }
.lv-sku { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.lv-attrs { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.lv-attr { display: grid; grid-template-columns: minmax(90px, 0.4fr) minmax(0, 1fr); gap: var(--space-3); padding: 6px var(--space-3); font-size: var(--text-sm); }
.lv-attr:nth-child(even) { background: var(--color-surface-2); }
.lv-attr span { color: var(--color-text-muted); }
.lv-attr b { font-weight: 600; overflow-wrap: anywhere; }
.lv-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lv-cats span { font-size: 11px; color: var(--color-text-muted); background: var(--color-surface-2); padding: 2px 8px; border-radius: 999px; }
.lv-desc { white-space: pre-wrap; font-size: var(--text-sm); color: var(--color-text); overflow-wrap: anywhere; line-height: 1.55; }
.lv-desc-wrap summary { cursor: pointer; font-size: var(--text-xs); font-weight: 700; color: var(--color-brass); margin-bottom: var(--space-2); }
.lv-link { align-self: flex-start; }
@media (max-width: 760px) {
  .lv-overlay { padding: 0; align-items: stretch; }
  .lv-modal { max-height: none; height: 100%; border-radius: 0; border-width: 0; }
  .lv-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .lv-head, .lv-content, .lv-tabs { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* Time input + dialog input follow the standard .field control look. */
.field input[type='time'], .sm-dialog input[type='text'] {
  width: 100%; padding: var(--space-4); font-size: var(--text-base); font-family: inherit; color: var(--color-text);
  border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); min-height: 56px;
  max-width: 100%; min-width: 0; box-sizing: border-box;
}
.field input[type='time']:focus, .sm-dialog input[type='text']:focus { outline: none; border-color: var(--color-primary); }

/* Buttons inside payment blocks may wrap their label and never exceed the panel. */
.pl-block .btn, .pl-actions .btn, .pl-head .btn { max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center; height: auto; min-height: 44px; }
.pl-head { flex-wrap: wrap; }
.pl-head .btn { flex: 0 0 auto; }

.pl-field-ref { grid-column: span 2; }
.pl-field-note { grid-column: 1 / -1; }
@media (max-width: 720px) { .pl-field-ref { grid-column: 1 / -1; } }

/* Order flags: ledger conflict + changes made directly in WooCommerce */
.pl-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; border: 1px solid; }
.pl-alert-warn { background: rgba(176, 125, 20, 0.12); border-color: rgba(176, 125, 20, 0.45); color: inherit; }
.pl-alert-bad { background: rgba(170, 52, 52, 0.12); border-color: rgba(170, 52, 52, 0.5); color: inherit; }
.order-flag-badge { background: rgba(170, 52, 52, 0.16); color: #8c2a2a; border: 1px solid rgba(170, 52, 52, 0.4); }

/* Part-exchange state in the payment ledger */
.pl-px-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.pl-px-due { background: rgba(170, 52, 52, 0.14); color: #a02e2e; border: 1px solid rgba(170, 52, 52, 0.4); }
.pl-px-in { background: rgba(47, 133, 90, 0.14); color: #2a7a52; border: 1px solid rgba(47, 133, 90, 0.4); }
.pl-px-due-amt { color: #a02e2e; }
.pl-row-muted .pl-px-due-amt { opacity: 1; }
.pl-row-part_exchange.pl-row-muted { border-left-color: #a02e2e; opacity: 1; background: rgba(170, 52, 52, 0.06); }
.pl-row-part_exchange:not(.pl-row-muted) { border-left-color: #2a7a52; }

/* =====================================================================
   Order Manager polish (2026-10-04): compact payment graphic, one-line
   signals + quick buttons, tidy "Log a payment" form.
   ===================================================================== */

/* ---- signals + quick buttons share one compact line ---- */
#viewSalesManager .orders-signals-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
#viewSalesManager .orders-signals-line .orders-table-signals { display: contents; }
#viewSalesManager .orders-signals-line .order-quick-actions {
  display: contents; margin: 0;
}
#viewSalesManager .order-quick-actions .btn {
  min-height: 0; height: 28px; padding: 0 10px; gap: 6px;
  font-size: 12px; font-weight: 600; line-height: 1; border-radius: 999px;
  display: inline-flex; align-items: center; white-space: nowrap;
}
#viewSalesManager .order-quick-actions .btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
#viewSalesManager .order-quick-actions .btn.is-set {
  background: var(--color-primary-highlight); border-color: var(--color-primary);
  color: var(--color-primary-ink, var(--color-text));
}
#viewSalesManager .order-quick-actions .btn.is-set svg { color: var(--color-success); }
/* push the first quick button to the right edge on wide screens */
@media (min-width: 900px) {
  #viewSalesManager .orders-signals-line .order-quick-delivery-btn { margin-left: auto; }
}

/* ---- payments & credits graphic in the order table / cards ---- */
#viewSalesManager .orders-payment-cell { min-width: 190px; }
.opg { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.opg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.opg-sum { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.opg-sum b { color: var(--color-text); font-weight: 700; }
.opg-bar {
  display: flex; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--color-divider);
}
.opg-seg { display: block; height: 100%; min-width: 3px; }
.opg-card { background: var(--color-primary); }
.opg-bank { background: #4f6d8f; }
.opg-cash { background: #6c8f5b; }
.opg-fin { background: #8a6aa3; }
.opg-other { background: #9a9486; }
.opg-px-in { background: var(--color-success); }
.opg-px-due {
  background: repeating-linear-gradient(135deg, var(--color-error) 0 4px, rgba(190, 60, 45, 0.35) 4px 8px);
}
.opg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.opg-chip {
  display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%;
  padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 1.5;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); white-space: nowrap;
}
.opg-chip b { color: var(--color-text); font-weight: 700; }
.opg-chip-card { border-left: 3px solid var(--color-primary); }
.opg-chip-bank { border-left: 3px solid #4f6d8f; }
.opg-chip-cash { border-left: 3px solid #6c8f5b; }
.opg-chip-fin { border-left: 3px solid #8a6aa3; }
.opg-chip-pxin { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-highlight); }
.opg-chip-pxin b { color: var(--color-success); }
.opg-chip-pxdue { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-highlight); }
.opg-chip-pxdue b { color: var(--color-error); }
.opg-chip-due { border-color: var(--color-warning); color: var(--color-warning); }
.opg-chip-due b { color: var(--color-warning); }
.opg-chip-fin-state { border-color: var(--color-warning); color: var(--color-warning); }
.opg-chip-fin-state.is-ok { border-color: var(--color-success); color: var(--color-success); }

@media (max-width: 640px) {
  #ordersTableWrap .sm-table td.orders-payment-cell { grid-column: 1 / -1; min-width: 0; }
  #ordersTableWrap .sm-table td.orders-payment-cell::before { display: none; }
  #viewSalesManager .order-quick-actions .btn { height: 32px; }
  #viewSalesManager .orders-signals-line .order-quick-delivery-btn,
  #viewSalesManager .orders-signals-line .order-quick-wrist-btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
}

/* ---- Log a payment form: equal fields, one rhythm ---- */
.pl-form {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.pl-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.pl-form .field-label {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.pl-optional { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-text-faint); }
.pl-form select, .pl-form input {
  box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
  height: 44px; padding: 0 12px; font-size: 15px; line-height: 1.2;
}
.pl-form input[type='date'] { -webkit-appearance: none; appearance: none; text-align: left; }
.pl-form .pl-field-note { grid-column: 1 / -1; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-3); align-items: center; }
.pl-actions .btn { flex: 0 0 auto; height: 44px; min-height: 44px; padding: 0 20px; }
@media (max-width: 720px) {
  .pl-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-form .pl-field-method { grid-column: 1 / -1; }
  .pl-actions .btn { flex: 1 1 calc(50% - 5px); }
}
@media (max-width: 360px) {
  .pl-form { grid-template-columns: minmax(0, 1fr); }
  .pl-actions .btn { flex: 1 1 100%; }
}

/* ---- Dispatch: Needs action list ---- */
.dispatch-tile-attention .dashboard-tile-number { color: var(--color-error); }
.dispatch-attention-list { display: flex; flex-direction: column; gap: var(--space-2); }
.dispatch-attn-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3); cursor: pointer;
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-error);
  border-radius: var(--radius-sm); background: var(--color-surface);
}
.dispatch-attn-row:hover, .dispatch-attn-row:focus-visible { background: var(--color-primary-highlight); outline: none; }
.dispatch-attn-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dispatch-attn-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dispatch-attn-name { font-weight: 600; overflow-wrap: anywhere; }
.dispatch-attn-watch { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.dispatch-attn-reasons { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
.dispatch-attn-total { font-weight: 700; white-space: nowrap; }

/* Order table column balance: give Customer (long watch names) and Payment
   the room, let the sparse Dispatch / Requested delivery columns shrink. */
@media (min-width: 641px) {
  #ordersTableWrap .orders-table th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
  #ordersTableWrap .orders-table th:nth-child(6), #ordersTableWrap .orders-table td[data-label="Dispatch"] { width: 96px; }
  #ordersTableWrap .orders-table th:nth-child(7), #ordersTableWrap .orders-table td[data-label="Requested delivery"] { width: 92px; }
  #ordersTableWrap .orders-table td[data-label="Date"] { white-space: nowrap; }
  #ordersTableWrap .orders-table td.orders-payment-cell { min-width: 230px; width: 250px; }
}
.opg-bar { height: 8px; }

/* ---- Order cards on phones: compact, two equal columns, labels dropped where the badge says it ---- */
@media (max-width: 640px) {
  #ordersTableWrap .sm-table tr.orders-table-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 12px;
    margin-bottom: 0;
    padding-bottom: var(--space-2);
    border-bottom: none;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  }
  #ordersTableWrap .sm-table td::before { display: none !important; }
  #ordersTableWrap .sm-table td[data-label="Order"] { grid-column: 1; grid-row: 1; align-self: center; }
  #ordersTableWrap .sm-table td[data-label="Total"] { grid-column: 2; grid-row: 1; align-self: center; text-align: right; font-weight: 700; }
  #ordersTableWrap .sm-table td[data-label="Customer"] { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  #ordersTableWrap .sm-table td[data-label="Status"] { grid-column: 1; grid-row: 3; min-width: 0; }
  #ordersTableWrap .sm-table td[data-label="Dispatch"] { grid-column: 2; grid-row: 3; text-align: right; min-width: 0; }
  #ordersTableWrap .sm-table td.orders-payment-cell { grid-column: 1 / -1; grid-row: 4; }
  #ordersTableWrap .sm-table td[data-label="Date"] { grid-column: 1; grid-row: 5; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
  #ordersTableWrap .sm-table td[data-label="Date"]::before { display: inline !important; margin: 0 !important; padding: 0 !important; content: "Ordered " !important; }
  #ordersTableWrap .sm-table td[data-label="Requested delivery"] { grid-column: 2; grid-row: 5; text-align: right; font-size: var(--text-xs); color: var(--color-text-muted); }
  #ordersTableWrap .sm-table td[data-label="Requested delivery"]::before { display: inline !important; content: "Deliver by " !important; }
  #ordersTableWrap .sm-table td.is-empty { visibility: hidden; }
  #ordersTableWrap .sm-table td .order-badge { white-space: normal; text-align: left; }
  #ordersTableWrap .sm-table tr.orders-table-signals-row {
    margin-top: 0; margin-bottom: var(--space-3);
    padding: 0 var(--space-3) var(--space-3);
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
  }
  #ordersTableWrap .sm-table td[data-label="Customer"] .order-row-watch { font-size: var(--text-xs); }
}

/* Log a payment: phone layout, Method | Amount, then Date | Note */
@media (max-width: 720px) {
  .pl-form .pl-field-method { grid-column: 1; }
  .pl-form .pl-field-amount { grid-column: 2; }
  .pl-form .pl-field-date { grid-column: 1; }
  .pl-form .pl-field-note { grid-column: 2; }
  .pl-form .field-label { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-form input[type='date'] { font-size: 14px; padding: 0 8px; }
  .pl-form input[type='date']::-webkit-calendar-picker-indicator { margin-left: 2px; padding: 0; }
}
@media (max-width: 360px) {
  .pl-form .pl-field-method, .pl-form .pl-field-amount, .pl-form .pl-field-date, .pl-form .pl-field-note { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  #orderPaymentsPanel .pl-form .field-label, .pl-form label.field-label { font-size: 11px !important; line-height: 1.2 !important; letter-spacing: 0.04em !important; white-space: nowrap; }
  .pl-form .pl-optional { display: none; }
  .pl-form input[type='date'] { font-size: 13px !important; padding: 0 6px !important; }
  .pl-form input[type='date']::-webkit-calendar-picker-indicator { display: none; }
  .pl-form select { font-size: 14px !important; padding: 0 6px !important; }
}

/* Abandoned-order toggle + row treatment (Order Manager) */
.orders-abandoned-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 40px; font-size: 13px; font-weight: 600; color: var(--color-text-muted, #6b6156); cursor: pointer; white-space: nowrap; user-select: none; }
.orders-abandoned-toggle input { width: 16px; height: 16px; accent-color: #96721f; cursor: pointer; }
.orders-abandoned-count { font-variant-numeric: tabular-nums; opacity: 0.8; }
.orders-table-row.is-abandoned { opacity: 0.62; }
.order-row-abandoned-reason { margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: var(--color-text-muted, #6b6156); }

/* Possible duplicate orders (merge panel) */
.order-dup-panel { border: 1.5px solid var(--bad, #b3261e); background: rgba(179, 38, 30, 0.04); border-radius: 12px; }
.order-dup-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.order-dup-card { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px; padding: 10px 12px; background: #fff; }
.order-dup-card.is-suggested { border-color: #1f6b3a; box-shadow: 0 0 0 1px #1f6b3a inset; }
.order-dup-card-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.order-dup-card-line { font-size: 13px; line-height: 1.45; }
.order-dup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .order-dup-compare { grid-template-columns: 1fr; } }

/* ---------- Phone / iPad polish for the Order Manager detail (2026-10-04) ---------- */
@media (max-width: 1100px) {
  .order-detail-top-actions { flex-shrink: 1; min-width: 0; max-width: 100%; }
}
@media (max-width: 1024px) {
  /* Part-exchange / payment rows wrap instead of pushing buttons off-screen */
  .order-partex-list li, .order-payment-list li { flex-wrap: wrap; gap: 6px 10px; }
  .order-partex-list li > span:first-child { flex: 1 1 160px; min-width: 0; }
  .order-px-adjustment-add-row { padding-left: 0; flex-basis: 100%; width: 100%; }
  .order-px-adjustment-list { flex-basis: 100%; width: 100%; }
}
@media (max-width: 900px) {
  /* Line-items table fits the modal instead of scrolling sideways */
  .order-detail-items .sm-table { min-width: 0; width: 100%; }
  .order-detail-items .sm-table th, .order-detail-items .sm-table td { padding: 8px 6px; white-space: normal; overflow-wrap: anywhere; font-size: var(--text-sm); }
  .order-detail-items .sm-table th:nth-child(3), .order-detail-items .sm-table td:nth-child(3),
  .order-detail-items .sm-table th:nth-child(4), .order-detail-items .sm-table td:nth-child(4) { white-space: nowrap; overflow-wrap: normal; text-align: right; }
}
@media (max-width: 640px) {
  .order-detail-items .sm-table th:nth-child(2), .order-detail-items .sm-table td:nth-child(2) { display: none; }
}

@media (max-width: 1180px) {
  #ordersTableWrap .sm-table td[data-label="Status"] { min-width: 0; }
  #ordersTableWrap .sm-table td[data-label="Status"] .order-badge { white-space: normal; max-width: 100%; }
}

/* =========================================================================
   Order Returns (Order Manager > Returns). See order-returns.js.
   Reuses the Watch Desk tokens; gold primary with dark ink.
   ========================================================================= */
.orders-view-badge {
  display: inline-block; min-width: 20px; margin-left: var(--space-2); padding: 0 6px;
  border-radius: var(--radius-full); background: var(--color-primary-ink); color: var(--color-primary);
  font-size: var(--text-xs); font-weight: 800; line-height: 20px; text-align: center; vertical-align: middle;
}
.orders-view-toggle-btn.active .orders-view-badge { background: var(--color-primary-ink); color: var(--color-primary); }

.rt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.rt-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.rt-stat-n { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; color: var(--color-text); }
.rt-stat-l { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.02em; }
.rt-stat-accent { background: var(--color-primary-ink); border-color: var(--color-primary-ink); }
.rt-stat-accent .rt-stat-n { color: var(--color-primary); }
.rt-stat-accent .rt-stat-l { color: var(--color-text-inverse); }
.rt-stat-warn .rt-stat-n { color: var(--color-warning); }

.rt-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.rt-toolbar .sales-search-box { flex: 1 1 280px; min-width: 0; }
.rt-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.rt-chip { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); min-height: 36px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.rt-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-ink); }
.rt-chip-needs { border-color: var(--color-primary); }
.rt-chip-n { font-size: var(--text-xs); font-weight: 800; min-width: 20px; text-align: center; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-text-muted); line-height: 20px; }
.rt-chip.active .rt-chip-n { background: var(--color-primary-ink); color: var(--color-primary); }
.rt-chip-sep { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 var(--space-1); }
.rt-chip-clear { border: none; background: none; color: var(--color-text-muted); text-decoration: underline; cursor: pointer; font-size: var(--text-sm); }

.rt-list { display: flex; flex-direction: column; gap: var(--space-3); }
.rt-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(190px, 270px); gap: var(--space-4); align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.rt-card:hover, .rt-card:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-sm, 0 2px 10px rgba(20,18,11,0.08)); outline: none; }
.rt-card-stale { border-left: 4px solid var(--color-warning); }
.rt-card-img { width: 76px; height: 76px; border-radius: var(--radius-sm); background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--color-text-faint); }
.rt-card-img img { width: 100%; height: 100%; object-fit: contain; }
.rt-card-img svg { width: 28px; height: 28px; }
.rt-card-top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.rt-card-order { font-family: var(--font-mono); font-weight: 700; color: var(--color-primary-active, var(--color-primary)); }
.rt-card-client { font-weight: 700; font-size: var(--text-base); }
.rt-card-watch { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-card-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.rt-card-badges:empty { display: none; }
.rt-card-side { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; min-width: 0; }
.rt-card-next { font-size: var(--text-sm); font-weight: 600; }
.rt-card-next.rt-owner-us { color: var(--color-text); }
.rt-card-next.rt-owner-client, .rt-card-next.rt-owner-dhl { color: var(--color-text-muted); font-weight: 500; }
.rt-card-meta { font-size: var(--text-xs); color: var(--color-text-muted); }

.rt-stage { display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.02em;
  background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); white-space: nowrap; vertical-align: middle; }
.rt-stage-review, .rt-stage-awaiting_form { background: var(--color-primary-highlight); color: var(--color-brass); border-color: transparent; }
.rt-stage-awaiting_fee, .rt-stage-book_collection { background: var(--color-warning-highlight); color: var(--color-warning); border-color: transparent; }
.rt-stage-awaiting_return, .rt-stage-inspection { background: var(--color-primary-ink); color: var(--color-primary); border-color: transparent; }
.rt-stage-refund_due, .rt-stage-completed { background: var(--color-success-highlight); color: var(--color-success); border-color: transparent; }
.rt-stage-declined, .rt-stage-cancelled { background: var(--color-error-highlight); color: var(--color-error); border-color: transparent; }

/* Drawer */
.rt-drawer-overlay { position: fixed; inset: 0; z-index: 520; background: rgba(20, 18, 14, 0.55); display: flex; justify-content: flex-end; opacity: 0; transition: opacity 0.18s ease; }
.rt-drawer-overlay.open { opacity: 1; }
.rt-drawer { width: min(940px, 100%); height: 100%; background: var(--color-bg); display: flex; flex-direction: column; transform: translateX(24px); transition: transform 0.2s ease; box-shadow: -12px 0 40px rgba(0,0,0,0.25); }
.rt-drawer-overlay.open .rt-drawer { transform: none; }
.rt-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-primary-ink); color: var(--color-text-inverse); }
.rt-drawer-title { font-family: var(--font-display); font-size: var(--text-lg); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rt-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5); -webkit-overflow-scrolling: touch; }
.rt-x { border: none; background: transparent; color: inherit; cursor: pointer; width: 40px; height: 40px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
.rt-x svg { width: 20px; height: 20px; }
.rt-x:hover { background: rgba(127,127,127,0.18); }

.rt-head { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.rt-head-img { width: 96px; height: 96px; border-radius: var(--radius-sm); background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rt-head-img img { width: 100%; height: 100%; object-fit: contain; }
.rt-head-client { font-family: var(--font-display); font-size: var(--text-lg); }
.rt-head-contact, .rt-head-meta { font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.rt-head-contact a { color: inherit; }
.rt-head-watch { font-weight: 600; margin-top: var(--space-1); }
.rt-head-side { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; min-width: 150px; }
.rt-assign input { width: 100%; }

.rt-steps { list-style: none; display: flex; gap: 0; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; }
.rt-steps li { flex: 1 1 0; min-width: 78px; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); position: relative; text-align: center; }
.rt-steps li::before { content: ''; position: absolute; top: 14px; left: -50%; right: 50%; height: 2px; background: var(--color-border); z-index: 0; }
.rt-steps li:first-child::before { display: none; }
.rt-steps li.done::before, .rt-steps li.current::before { background: var(--color-primary); }
.rt-step-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-2); border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 800; color: var(--color-text-muted); }
.rt-steps li.done .rt-step-dot { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-ink); }
.rt-steps li.current .rt-step-dot { background: var(--color-primary-ink); border-color: var(--color-primary); color: var(--color-primary); }
.rt-step-l { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.rt-steps li.current .rt-step-l { color: var(--color-text); font-weight: 800; }
.rt-cancelled { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-error-highlight); color: var(--color-error); margin-bottom: var(--space-4); font-weight: 600; }

.rt-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: var(--text-sm); line-height: 1.45; border: 1px solid transparent; }
.rt-alert-bad { background: var(--color-error-highlight); color: var(--color-error); border-color: var(--color-error); }
.rt-alert-warn { background: var(--color-warning-highlight); color: var(--color-warning); }
.rt-alert-info { background: var(--color-primary-highlight); color: var(--color-text); border-color: var(--color-primary); }

.rt-next { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-4);
  background: var(--color-primary-ink); color: var(--color-text-inverse); border-left: 5px solid var(--color-primary); }
.rt-next.rt-owner-client, .rt-next.rt-owner-dhl { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-left: 5px solid var(--color-border); }
.rt-next-l { font-weight: 600; font-size: var(--text-base); flex: 1 1 260px; }
.rt-next-k { display: block; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); font-weight: 800; margin-bottom: 2px; }
.rt-next.rt-owner-client .rt-next-k, .rt-next.rt-owner-dhl .rt-next-k { color: var(--color-text-muted); }
.rt-next-a { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.rt-next .btn-secondary { background: transparent; color: var(--color-text-inverse); border-color: rgba(237,231,218,0.4); }
.rt-next.rt-owner-client .btn-secondary, .rt-next.rt-owner-dhl .btn-secondary { color: var(--color-text); border-color: var(--color-border); background: var(--color-surface); }
.rt-inline-select { min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: 0 var(--space-3); font-size: var(--text-sm); }

.rt-sec { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.rt-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-weight: 700; font-size: var(--text-base); }
.rt-sec > summary::-webkit-details-marker { display: none; }
.rt-sec > summary::after { content: '+'; margin-left: auto; color: var(--color-text-muted); font-weight: 400; font-size: var(--text-lg); }
.rt-sec[open] > summary::after { content: '\2212'; }
.rt-sec > summary > span:first-child { flex: 0 1 auto; }
.rt-sec-body { padding: 0 var(--space-4) var(--space-4); }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.rt-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-kv span { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.rt-kv strong { font-weight: 600; font-size: var(--text-sm); overflow-wrap: anywhere; }
.rt-actions-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
.rt-linkbox { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.rt-linkbox span { font-family: var(--font-mono); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rt-insp { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); }
.rt-insp-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) auto minmax(120px, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); }
.rt-insp-row:last-child { border-bottom: none; }
.rt-insp-row:nth-child(even) { background: var(--color-surface-2); }
.rt-insp-l { font-weight: 600; font-size: var(--text-sm); }
.rt-insp-hint { margin-left: var(--space-2); font-size: var(--text-xs); font-weight: 800; }
.rt-insp-hint.ok { color: var(--color-success); }
.rt-insp-hint.bad { color: var(--color-error); }
.rt-insp-opts { display: inline-flex; gap: 4px; }
.rt-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 800; cursor: pointer; background: var(--color-surface); color: var(--color-text-muted); }
.rt-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rt-opt-ok.on { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.rt-opt-issue.on { background: var(--color-error); border-color: var(--color-error); color: #fff; }
.rt-opt-na.on { background: var(--color-text-muted); border-color: var(--color-text-muted); color: #fff; }
.rt-insp-note { min-height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); width: 100%; }
.rt-asold { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-3); background: var(--color-surface-2); border-radius: var(--radius-md); }
.rt-asold img { width: 80px; height: 80px; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-surface); }
.rt-asold-l { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brass); }

.rt-photos { margin-top: var(--space-3); }
.rt-photos-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.rt-photo-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rt-photo { position: relative; width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.rt-photo img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.rt-photo-x { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(20,18,11,0.75); color: #fff; cursor: pointer; line-height: 1; }
.rt-upload { cursor: pointer; }

.rt-msgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-2); }
.rt-msg { text-align: left; border: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-3); cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--color-text); }
.rt-msg:hover { border-color: var(--color-primary); }
.rt-msg span { font-size: var(--text-xs); color: var(--color-text-muted); }
.rt-note-add { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.rt-note-add input { flex: 1; min-height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); background: var(--color-surface); color: var(--color-text); }
.rt-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rt-ev { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); }
.rt-ev-t, .rt-ev-a { color: var(--color-text-muted); font-size: var(--text-xs); }
.rt-ev-d { overflow-wrap: anywhere; }
.rt-foot { padding: var(--space-4) 0 var(--space-8); display: flex; justify-content: flex-end; }

/* Dialogs */
.rt-dialog-overlay { position: fixed; inset: 0; z-index: 540; background: rgba(20,18,14,0.6); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.rt-dialog { width: min(560px, 100%); max-height: calc(100vh - 2 * var(--space-4)); display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.35); overflow: hidden; }
.rt-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider); }
.rt-dialog-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); }
.rt-dialog-body { padding: var(--space-4) var(--space-5); overflow-y: auto; }
.rt-dialog-body .field { margin-bottom: var(--space-3); }
.rt-dialog-body textarea, .rt-dialog-body input[type=text], .rt-dialog-body input[type=email], .rt-dialog-body input[type=tel], .rt-dialog-body input[type=number], .rt-dialog-body input[type=date], .rt-dialog-body select { width: 100%; }
.rt-dialog-err { margin: 0 var(--space-5) var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-error-highlight); color: var(--color-error); font-size: var(--text-sm); font-weight: 600; }
.rt-dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--color-divider); }
.rt-check { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.rt-pick-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 220px; overflow-y: auto; margin-bottom: var(--space-3); }
.rt-pick { text-align: left; border: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; color: var(--color-text); display: flex; flex-direction: column; }
.rt-pick span { font-size: var(--text-xs); color: var(--color-text-muted); }
.rt-pick:hover, .rt-pick.on { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.rt-picked { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-highlight); margin-bottom: var(--space-3); font-size: var(--text-sm); }
.rt-link { border: none; background: none; color: var(--color-primary-active, var(--color-primary)); text-decoration: underline; cursor: pointer; padding: 0 var(--space-1); font-size: inherit; }
.rt-to { font-weight: 600; }

/* Order detail return panel */
.rt-mini { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-2); }
.rt-mini-m { color: var(--color-text-muted); font-size: var(--text-sm); }
.rt-mini-next { font-weight: 600; }
.rt-mini-past { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--space-2); }

@media (max-width: 760px) {
  .rt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-card { grid-template-columns: 56px minmax(0, 1fr); }
  .rt-card-img { width: 56px; height: 56px; }
  .rt-card-side { grid-column: 1 / -1; }
  .rt-head { grid-template-columns: 72px minmax(0, 1fr); }
  .rt-head-img { width: 72px; height: 72px; }
  .rt-head-side { grid-column: 1 / -1; flex-direction: row; align-items: end; }
  .rt-drawer-body { padding: var(--space-3); }
  .rt-insp-row { grid-template-columns: 1fr auto; }
  .rt-insp-note { grid-column: 1 / -1; }
  .rt-ev { grid-template-columns: 1fr; gap: 2px; }
  .rt-next { padding: var(--space-3); }
  .rt-dialog-overlay { align-items: flex-end; padding: 0; }
  .rt-dialog { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; }
}
.rt-toolbar .sales-search-box { width: auto; max-width: none; margin: 0; }
.rt-head { grid-template-columns: 96px minmax(0, 1fr) minmax(150px, 200px); }
.rt-head-side input, .rt-head-side .btn { width: 100%; box-sizing: border-box; }
.rt-drawer input:not([type=radio]):not([type=checkbox]), .rt-drawer textarea, .rt-dialog input:not([type=radio]):not([type=checkbox]), .rt-dialog textarea, .rt-dialog select { box-sizing: border-box; max-width: 100%; }
.rt-sec-body textarea { width: 100%; }
.orders-view-toggle-btn { white-space: nowrap; }
@media (max-width: 760px) {
  .rt-toolbar .sales-search-box { flex: 1 1 100%; width: 100%; }
  .rt-head { grid-template-columns: 72px minmax(0, 1fr); }
  .rt-head-side { grid-column: 1 / -1; flex-direction: row; align-items: end; min-width: 0; }
  .rt-head-side .field { flex: 1; }
  .rt-head-side .btn { width: auto; }
  .rt-view-toggle { width: 100%; }
  .rt-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); }
  .rt-chip { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .rt-toolbar .sales-search-box { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .rt-toolbar .sales-search-box input { min-width: 0; width: 100%; }
  .rt-insp-row { grid-template-columns: 1fr; }
  .rt-opt { flex: 1; }
  .rt-insp-opts { display: flex; width: 100%; }
}
.rt-toolbar .search-box { position: relative; overflow: hidden; }
.rt-toolbar .search-box input { box-sizing: border-box; width: 100%; }
@media (max-width: 480px) {
  .orders-view-toggle-btn { padding: var(--space-2) var(--space-3); }
}

/* ---- Returns: deadline, relist, commission flag, modes, settings editor ---- */
.rt-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 760px) { .rt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rt-card-due { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.rt-card-due.rt-due-overdue { color: var(--color-error); }
.rt-card-due.rt-due-due_today { color: var(--color-warning); }
.rt-alert-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.rt-alert a { color: inherit; text-decoration: underline; }
.rt-commission-none { margin: 0 0 var(--space-3); }
.rt-mode { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.rt-mode-opt { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-3); cursor: pointer; }
.rt-mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rt-mode-opt span { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }
.rt-mode-opt.on { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.rt-copyrow { display: flex; gap: var(--space-2); align-items: center; }
.rt-copyrow input { flex: 1; min-width: 0; }
.rt-copyrow .btn { white-space: nowrap; }
.rt-pick:disabled { opacity: 0.5; cursor: not-allowed; }
.rt-pick-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.rt-tag { font-style: normal; font-size: var(--text-xs); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text-muted); background: var(--color-surface); }
.rt-tag-good { color: var(--color-success, #2e7d32); border-color: currentColor; }
.rt-tag-warn { color: var(--color-warning); border-color: currentColor; }
@media (max-width: 480px) { .rt-mode { grid-template-columns: 1fr; } .rt-copyrow { flex-wrap: wrap; } }

.rt-set-h { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.rt-set-h:first-child { margin-top: 0; }
.rt-set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.rt-set input[type=number], .rt-set input[type=text], .rt-set textarea { width: 100%; box-sizing: border-box; }
.rt-set-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.rt-tokens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-3); }
.rt-token { font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.rt-token:hover { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.rt-tpl-list { display: flex; flex-direction: column; gap: var(--space-2); }
.rt-tpl { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.rt-tpl > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 600; list-style: none; }
.rt-tpl > summary::-webkit-details-marker { display: none; }
.rt-tpl-body { padding: 0 var(--space-4) var(--space-4); }
.rt-tpl-preview { border: 1px dashed var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--color-surface-2); }
.rt-tpl-preview-l { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-1); }
.rt-tpl-preview-s { font-weight: 600; margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.rt-tpl-preview-b { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--text-sm); line-height: 1.5; }
.rt-copyrow input { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.rt-copyrow input:focus { outline: none; border-color: var(--color-primary); }

/* =========================================================================
   Returns tabs (Order Returns and Watch Returns): phone and iPad fit.
   Touch targets of at least 44px, 16px form text (stops iOS zooming in),
   steps and stat tiles that fit, sheets that respect the iPhone home bar.
   ========================================================================= */
.rt-drawer a:not(.btn) { color: var(--color-primary-active, var(--color-brass)); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.rt-drawer a.btn, .rt-dialog a.btn { box-sizing: border-box; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.rt-drawer :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]), select, textarea),
.rt-dialog :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]), select, textarea) {
  font-family: inherit; font-size: var(--text-base); color: var(--color-text); background: var(--color-surface-2);
  border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: 0 var(--space-3); min-height: 44px; box-sizing: border-box; max-width: 100%;
}
.rt-drawer textarea, .rt-dialog textarea { padding: var(--space-2) var(--space-3); }
.rt-drawer :where(input, select, textarea):focus, .rt-dialog :where(input, select, textarea):focus { border-color: var(--color-primary); outline: none; background: var(--color-surface); }
.rt-drawer input:disabled, .rt-dialog input:disabled { opacity: 0.6; }
.rt-note-add { display: flex; gap: var(--space-2); align-items: stretch; }
.rt-note-add input { flex: 1 1 auto; min-width: 0; }
.rt-sec > summary { min-height: 48px; }
.rt-x { flex: 0 0 auto; }
.rt-steps li { min-width: 0; }
.rt-dialog { max-height: calc(100dvh - 2 * var(--space-4)); }

@media (max-width: 760px) {
  .rt-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rt-chips { flex-wrap: wrap; overflow: visible; }
  .rt-toolbar > .btn { flex: 1 1 auto; }
  .rt-steps { padding: var(--space-3) var(--space-2); }
  .rt-steps li { padding: 0 1px; }
  .rt-step-l { font-size: 11px; letter-spacing: -0.01em; white-space: nowrap; }
  .rt-dialog-body { padding: var(--space-4); }
  .rt-dialog-head { padding: var(--space-3) var(--space-4); }
  .rt-dialog-foot { padding: var(--space-3) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .rt-dialog-foot .btn { flex: 1 1 140px; }
  .rt-dialog { max-height: 92dvh; }
  .rt-drawer-head { padding: var(--space-3) var(--space-4); }
  .rt-drawer-body { padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
  .rt-actions-row .btn, .rt-alert-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 400px) {
  .rt-steps li::before { left: -55%; right: 55%; }
}
@media (pointer: coarse), (max-width: 1024px) {
  .rt-drawer .btn, .rt-dialog .btn, .rt-toolbar .btn, .rt-view-toggle .btn, .orders-view-toggle-btn, .rt-link { min-height: 44px; }
  .rt-link { display: inline-flex; align-items: center; padding: 0 var(--space-2); }
  .rt-x { width: 44px; height: 44px; }
  .rt-chip { min-height: 44px; }
  .rt-drawer :where(input:not([type=checkbox]):not([type=radio]), select, textarea), .rt-dialog :where(input:not([type=checkbox]):not([type=radio]), select, textarea), .rt-toolbar input { font-size: 16px; }
  .rt-drawer input[type=checkbox], .rt-drawer input[type=radio], .rt-dialog input[type=checkbox], .rt-dialog input[type=radio] { width: 22px; height: 22px; flex: 0 0 auto; }
  .rt-check, .rt-opt { min-height: 44px; }
  .rt-drawer a:not(.btn) { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
  .rt-tpl > summary { min-height: 48px; }
}
.rt-assign .field-label, .rt-head-side .field-label { text-align: left; display: block; margin-bottom: var(--space-1); }
@media (max-width: 760px) {
  .rt-head-side { gap: var(--space-3); }
  .rt-head-side .field { margin: 0; }
}
@media (max-width: 520px) {
  .rt-head-side { flex-direction: column-reverse; align-items: stretch; }
  .rt-head-side .btn { width: 100%; }
}

/* Client emails from the Order Manager */
.rt-mini-btns { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rt-attach { display: flex; gap: 8px; align-items: center; margin: var(--space-2) 0; font-size: var(--text-sm); cursor: pointer; }
.sm-mail-banner { background: var(--color-warning-highlight, #fff4d6); border: 1px solid var(--color-warning, #e0c36a); border-radius: var(--radius-md, 6px); padding: 8px 12px; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.sm-mail-to { padding: 8px 10px; background: var(--color-surface-2); border-radius: var(--radius-md, 6px); font-size: var(--text-sm); }


/* Order detail: collapsible sections and back-to-top (2026-10-09) */
.sm-fold > .form-section-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}
.sm-fold > .form-section-title::after {
  content: '+';
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 1.25em;
  line-height: 1;
  color: var(--color-text-muted);
}
.sm-fold.sm-fold-open > .form-section-title::after { content: '\2212'; }
.sm-fold > .form-section-title:focus-visible { outline: 2px solid var(--color-primary, #b8963e); outline-offset: 3px; border-radius: 4px; }
.sm-fold:not(.sm-fold-open) > :not(.form-section-title) { display: none !important; }
.sm-fold:not(.sm-fold-open) > .form-section-title { margin-bottom: 0; }
.sm-btt-wrap {
  position: sticky;
  bottom: 16px;
  height: 0;
  z-index: 20;
  pointer-events: none;
  text-align: right;
  padding-right: 16px;
}
.sm-btt {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-60px);
  transition: opacity 0.15s ease;
}
.sm-btt.is-hidden { opacity: 0; pointer-events: none; }

.rt-alert-ok { background: var(--color-success-highlight); color: var(--color-success); border-color: var(--color-success); }

/* =========================================================================
   ID checks: order list label, banner at the top of an order, the order
   section and the Order Manager "ID checks" tab (id-checks.js).
   ========================================================================= */
.idv-badge svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }
.idv-test-pill { display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-full); background: var(--color-primary-ink); color: var(--color-primary);
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; margin-left: var(--space-2); vertical-align: middle; }

.idv-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  border-radius: var(--radius-md); border: 1px solid var(--color-border); border-left: 5px solid var(--color-border); background: var(--color-surface); }
.idv-banner-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-2); }
.idv-banner-icon svg { width: 16px; height: 16px; }
.idv-banner-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.idv-banner-text strong { font-size: var(--text-base); }
.idv-banner-text .idv-test-pill { align-self: flex-start; margin: 2px 0; }
.idv-banner-sub { color: var(--color-text-muted); line-height: 1.4; overflow-wrap: anywhere; }
.idv-banner-btn { flex: 0 0 auto; min-height: 36px; }
.idv-tone-good { border-left-color: var(--color-success); }
.idv-tone-good .idv-banner-icon { background: var(--color-success-highlight); color: var(--color-success); }
.idv-tone-warn { border-left-color: var(--color-warning); background: var(--color-warning-highlight); }
.idv-tone-warn .idv-banner-icon { background: var(--color-surface); color: var(--color-warning); }
.idv-tone-bad { border-left-color: var(--color-error); background: var(--color-error-highlight); }
.idv-tone-bad .idv-banner-icon { background: var(--color-surface); color: var(--color-error); }
.idv-tone-bad .idv-banner-text strong { color: var(--color-error); }
.idv-tone-info { border-left-color: var(--color-primary); }
.idv-tone-info .idv-banner-icon { background: var(--color-primary-highlight); color: var(--color-primary); }

.idv-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.idv-activity { margin-top: var(--space-3); font-size: var(--text-sm); }
.idv-activity summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.idv-activity ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.idv-activity li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-3); }
.idv-act-when { color: var(--color-text-muted); font-size: var(--text-xs); padding-top: 2px; }
.idv-act-what { overflow-wrap: anywhere; }
.idv-act-by { color: var(--color-text-muted); font-style: normal; font-size: var(--text-xs); margin-left: var(--space-1); }

/* ID checks tab */
.idc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.idc-title-t { font-family: var(--font-display); font-size: var(--text-lg); }
.idc-list { display: flex; flex-direction: column; gap: var(--space-3); }
.idc-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.idc-item.open { border-color: var(--color-primary); }
.idc-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(150px, 0.8fr) minmax(220px, 1fr) 20px; gap: var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-4); cursor: pointer; border-left: 4px solid transparent; min-height: 64px; }
.idc-card:hover, .idc-card:focus-visible { background: var(--color-surface-2); outline: none; }
.idc-tone-warn { border-left-color: var(--color-warning); }
.idc-tone-bad { border-left-color: var(--color-error); }
.idc-tone-good { border-left-color: var(--color-success); }
.idc-tone-info { border-left-color: var(--color-primary); }
.idc-top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.idc-client { font-weight: 700; font-size: var(--text-base); overflow-wrap: anywhere; }
.idc-order { font-family: var(--font-mono); font-weight: 700; color: var(--color-primary-active, var(--color-primary)); }
.idc-meta { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; overflow-wrap: anywhere; }
.idc-warnline { margin-top: var(--space-1); color: var(--color-error); font-weight: 700; font-size: var(--text-sm); }
.idc-state { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; min-width: 0; }
.idc-when { font-size: var(--text-xs); color: var(--color-text-muted); }
.idc-chev { width: 10px; height: 10px; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(45deg); transition: transform 0.15s ease; justify-self: center; }
.idc-item.open .idc-chev { transform: rotate(-135deg); }

.idc-steps { list-style: none; display: flex; margin: 0; padding: 0; }
.idc-steps li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center; }
.idc-steps li::before { content: ''; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: var(--color-border); }
.idc-steps li:first-child::before { display: none; }
.idc-steps li.done::before, .idc-steps li.current::before, .idc-steps li.bad::before { background: var(--color-primary); }
.idc-dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface-2); border: 2px solid var(--color-border); }
.idc-steps li.done .idc-dot { background: var(--color-primary); border-color: var(--color-primary); }
.idc-steps li.current .idc-dot { background: var(--color-primary-ink); border-color: var(--color-primary); }
.idc-steps li.bad .idc-dot { background: var(--color-error); border-color: var(--color-error); }
.idc-step-l { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; line-height: 1.2; }
.idc-steps li.current .idc-step-l, .idc-steps li.done .idc-step-l { color: var(--color-text); }

.idc-detail { border-top: 1px solid var(--color-border); padding: var(--space-4); background: var(--color-bg); }
.idc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2) var(--space-5); margin-bottom: var(--space-3); }
.idc-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: var(--space-1) 0; }
.idc-fact-k { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.02em; }
.idc-fact-v { font-size: var(--text-sm); overflow-wrap: anywhere; }
.idc-flag { color: var(--color-error); font-weight: 800; margin-left: var(--space-1); }
.idc-ok { color: var(--color-success); font-weight: 800; margin-left: var(--space-1); }
.idc-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.idc-log-h { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.idc-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.idc-log li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-3); font-size: var(--text-sm); }
.idc-log-when { color: var(--color-text-muted); font-size: var(--text-xs); padding-top: 2px; }
.idc-log-what { overflow-wrap: anywhere; }
.idc-log-what em { font-style: normal; color: var(--color-text-muted); font-size: var(--text-xs); margin-left: var(--space-1); }
.idc-muted { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.idc-empty { text-align: center; padding: var(--space-8, 48px) var(--space-4); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.idc-empty-t { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-1); }
.idc-skel { height: 76px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface), var(--color-surface-2)); background-size: 200% 100%; animation: idcSkel 1.2s ease infinite; margin-bottom: var(--space-3); }
@keyframes idcSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (max-width: 1100px) {
  .idc-card { grid-template-columns: minmax(0, 1fr) minmax(140px, auto) 20px; }
  .idc-prog { grid-column: 1 / -1; grid-row: 2; }
  .idc-chev { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  .idc-card { grid-template-columns: minmax(0, 1fr) 20px; gap: var(--space-2) var(--space-3); padding: var(--space-3); }
  .idc-state { grid-column: 1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
  .idc-prog { grid-column: 1 / -1; }
  .idc-chev { grid-column: 2; grid-row: 1; align-self: start; margin-top: var(--space-2); }
  .idc-detail { padding: var(--space-3); }
  .idc-facts { grid-template-columns: 1fr; }
  .idc-actions .btn { flex: 1 1 calc(50% - var(--space-2)); min-height: 44px; }
  .idc-log li, .idv-activity li { grid-template-columns: 1fr; gap: 0; }
  .idv-banner { flex-wrap: wrap; padding: var(--space-3); }
  .idv-banner-btn { flex: 1 1 100%; min-height: 44px; }
  .idv-actions .btn { flex: 1 1 calc(50% - var(--space-2)); min-height: 44px; }
}


/* ---- ID check label under the order number (orders list) ---- */
.order-row-idv { margin-top: 4px; font-family: var(--font-body, inherit); font-weight: 500; line-height: 1.2; }
.order-row-idv .order-badge { white-space: nowrap; }

/* ---- ID check log (order detail) ---- */
.idv-log { margin-top: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 var(--space-3); background: var(--color-surface); }
.idv-log > summary { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); min-height: 44px; cursor: pointer; font-weight: 700; }
.idv-log > summary::-webkit-details-marker { display: none; }
.idv-log > summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; flex: 0 0 auto; margin-right: 2px; }
.idv-log[open] > summary::before { transform: rotate(45deg); }
.idv-log-count { background: var(--color-primary-highlight, rgba(186,149,69,.15)); color: var(--color-text); border-radius: 999px; padding: 1px 9px; font-size: var(--text-xs); font-weight: 700; }
.idv-log-last { color: var(--color-text-muted); font-weight: 500; font-size: var(--text-xs); }
.idv-log ul { margin: 0 0 var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.idv-log li { grid-template-columns: 150px minmax(0, 1fr); }
.idv-log-kind { font-weight: 700; margin-right: 4px; }
.idv-log-row.is-email .idv-log-kind { color: var(--color-brass, #BA9545); }
@media (max-width: 640px) { .idv-log li { grid-template-columns: 1fr; } }

/* ---- Dispatch manager: collapsible sections ---- */
.dispatch-toolbar { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
#salesDispatchView .dispatch-section { margin-bottom: var(--space-3); }
.dispatch-section-head { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s ease, background-color .15s ease; }
.dispatch-section.has-items > .dispatch-section-head { border-left-color: var(--color-brass, #BA9545); }
.dispatch-section-head:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .dispatch-section-head:hover { border-color: var(--color-brass); } }
.dispatch-section-head .dispatch-section-title { margin: 0; padding: 0; border: 0; flex: 1 1 auto; }
.dispatch-chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; flex: 0 0 auto; margin: -3px 2px 0 0; }
.dispatch-section.is-collapsed > .dispatch-section-head { margin-bottom: 0; }
.dispatch-section.is-collapsed .dispatch-chev { transform: rotate(-45deg); margin: 0 2px 0 -2px; }
.dispatch-section.is-collapsed > .dispatch-section-body { display: none; }
.dispatch-section-body > .field-hint:first-child { margin-top: 0; }
.dispatch-idv-hint { font-size: var(--text-xs); color: var(--color-text-muted); text-align: right; max-width: 220px; }
@media (max-width: 640px) { .dispatch-idv-hint { text-align: left; max-width: none; } .dispatch-section-head { padding: var(--space-2) var(--space-3); } }

/* ---- ID photo shown in place inside the ID check log ---- */
.idv-photo-slot { display: block; }
.idv-photo-img { display: block; max-width: min(100%, 360px); max-height: 320px; margin-top: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-border); object-fit: contain; background: var(--color-surface-2); }
.idv-log-row .idv-photo-btn, .idc-log .idv-photo-btn { margin-left: var(--space-1); font-size: var(--text-xs); min-height: 28px; }

/* ---- Order Manager view tabs: never run off the page on a phone ---- */
@media (max-width: 640px) {
  .orders-view-toggle { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; }
  .orders-view-toggle-btn { flex: 1 1 auto; min-width: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); white-space: nowrap; }
  .orders-view-toggle-btn .orders-view-badge { margin-left: var(--space-1); }
}
.idc-clear-btn { white-space: nowrap; }

/* ---- Order Manager view tabs on phones: one tidy segmented row with the refresh icon beside it ---- */
.ovt-short { display: none; }
@media (max-width: 640px) {
  .orders-view-toggle-bar { flex-direction: row; align-items: center; gap: var(--space-2); flex-wrap: nowrap; margin-bottom: var(--space-3); }
  .orders-view-toggle { flex: 1 1 auto; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; width: auto; padding: 3px; }
  .orders-view-toggle-btn { position: relative; min-width: 0; min-height: 40px; padding: 0 var(--space-1); font-size: 13px; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
  .ovt-full { display: none; }
  .ovt-short { display: inline; }
  .orders-view-toggle-btn .orders-view-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; margin: 0; padding: 0 4px; font-size: 10px; line-height: 16px; }
  #pipelineRefreshBtn { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); }
  #pipelineRefreshBtn .ovt-refresh-l { display: none; }
}

/* ---- Client delivery receipt (iPad signature) ---- */
.client-signature-overlay { position: fixed; inset: 0; z-index: 100001; overflow-y: auto; background: var(--color-bg, #f6f2e9); color: var(--color-text, #14120b); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.client-signature-shell { box-sizing: border-box; width: min(100%, 980px); min-height: 100%; margin: 0 auto; padding: max(var(--space-6, 24px), env(safe-area-inset-top)) var(--space-6, 24px) max(var(--space-6, 24px), env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.client-signature-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4, 16px); }
.client-signature-eyebrow { display: block; font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 700; color: var(--color-primary, #ba9545); margin-bottom: var(--space-2, 8px); }
.client-signature-heading h2 { margin: 0; font-family: var(--font-display, inherit); font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.12; font-weight: 600; }
.signature-back { min-height: 44px; padding: 0 var(--space-4, 16px); border: 1px solid var(--color-border, #ddd3bf); border-radius: var(--radius-md, 8px); background: transparent; color: var(--color-text-muted, #6f6a5f); font: inherit; font-size: 0.85rem; }
.client-signature-context { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px) var(--space-4, 16px); align-items: baseline; padding: var(--space-4, 16px) 0; border-top: 1px solid var(--color-border, #ddd3bf); border-bottom: 1px solid var(--color-border, #ddd3bf); }
.client-signature-context strong { font-size: 1.1rem; }
.client-signature-context span { color: var(--color-text-muted, #6f6a5f); }
.client-signature-watch { flex-basis: 100%; color: var(--color-text, #14120b) !important; font-weight: 600; }
.client-signature-wording { margin: 0; font-size: clamp(1rem, 2.3vw, 1.2rem); line-height: 1.45; }
.client-signature-pad { position: relative; width: min(100%, 100vh); align-self: center; aspect-ratio: 5 / 2; min-height: 150px; background: #fff; border: 1.5px solid var(--color-primary, #ba9545); border-radius: var(--radius-lg, 12px); box-shadow: 0 10px 28px rgba(20, 18, 11, 0.08); overflow: hidden; touch-action: none; }
.client-signature-pad::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 24%; border-bottom: 1px solid rgba(20, 18, 11, 0.25); pointer-events: none; }
.client-signature-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 1; -webkit-user-select: none; user-select: none; }
.client-signature-guide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(20, 18, 11, 0.34); font-size: clamp(1rem, 2.5vw, 1.4rem); letter-spacing: 0.04em; pointer-events: none; z-index: 0; }
.client-signature-afterpad { width: min(100%, 100vh); align-self: center; box-sizing: border-box; display: flex; justify-content: space-between; gap: var(--space-4, 16px); align-items: center; color: var(--color-text-muted, #6f6a5f); font-size: 0.85rem; }
.client-signature-afterpad .link-btn { min-height: 44px; }
.client-signature-error { min-height: 1.2em; color: var(--color-danger, #b3402f); font-size: 0.92rem; }
.client-signature-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4, 16px); flex-wrap: wrap; padding-top: var(--space-4, 16px); }
.client-signature-footer .btn { min-height: 52px; min-width: 200px; font-size: 1rem; }
.client-signature-confirm { display: flex; gap: var(--space-3, 12px); align-items: center; font-size: 0.95rem; max-width: 520px; line-height: 1.35; }
.client-signature-confirm input { width: 26px; height: 26px; flex: 0 0 auto; accent-color: var(--color-primary, #ba9545); }
.client-signature-saved-image { min-height: 150px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--color-border, #ddd3bf); border-radius: var(--radius-lg, 12px); padding: var(--space-4, 16px); }
.client-signature-saved-image img { max-width: 100%; max-height: 220px; object-fit: contain; }
.signature-receipt-image { max-width: 340px; padding: var(--space-3, 12px); background: #fff; border: 1px solid var(--color-border, #ddd3bf); border-radius: var(--radius-md, 8px); margin: var(--space-3, 12px) 0; }
.signature-receipt-image img { max-width: 100%; display: block; }
.signature-receipt-actions { display: flex; gap: var(--space-3, 12px); flex-wrap: wrap; margin-top: var(--space-3, 12px); }
.signature-comparison-action { display: flex; gap: var(--space-3, 12px); align-items: center; flex-wrap: wrap; margin: var(--space-3, 12px) 0; }
.signature-compare-photo { max-height: 62vh; overflow: auto; border: 1px solid var(--color-border, #ddd3bf); border-radius: var(--radius-md, 8px); background: #14120b; }
.signature-compare-photo canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.signature-compare-result { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.signature-compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3, 12px); }
.signature-compare-pair figure { margin: 0; padding: var(--space-3, 12px); background: #fff; border: 1px solid var(--color-border, #ddd3bf); border-radius: var(--radius-md, 8px); text-align: center; }
.signature-compare-pair img { max-width: 100%; max-height: 90px; }
.signature-compare-pair figcaption, .signature-compare-disclaimer { font-size: 0.8rem; color: var(--color-text-muted, #6f6a5f); }
@media (max-width: 640px) {
  .client-signature-shell { padding-left: var(--space-4, 16px); padding-right: var(--space-4, 16px); }
  .client-signature-footer { flex-direction: column; align-items: stretch; }
  .client-signature-footer .btn { width: 100%; }
  .client-signature-afterpad { flex-direction: column; align-items: flex-start; gap: 0; }
  .signature-compare-pair { grid-template-columns: 1fr; }
}

/* ---- Mobile: Book Appointment / Create Order header buttons (black label, gold text, full touch height) ---- */
@media (max-width: 640px) {
  #salesPageHeaderActions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3, 12px); }
  #salesPageHeaderActions .sales-dashboard-hero-btn,
  #salesPageHeaderActions .sales-dashboard-hero-btn:hover,
  #salesPageHeaderActions .sales-dashboard-hero-btn:active,
  #salesPageHeaderActions .sales-dashboard-hero-btn:focus-visible {
    min-height: 52px;
    padding: 0 var(--space-3, 12px);
    background: #0b0b0c;
    color: var(--color-primary, #ba9545);
    border: 1px solid var(--color-primary, #ba9545);
    border-radius: var(--radius-md, 10px);
    font-weight: 700;
    letter-spacing: 0.02em;
    justify-content: center;
    gap: var(--space-2, 8px);
  }
  #salesPageHeaderActions .sales-dashboard-hero-btn:active { background: #1a1812; }
  #salesPageHeaderActions .sales-dashboard-hero-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .sales-dashboard-new-appt-btn { min-height: 48px; }
}

/* ID check log: the ID photo / signature links are proper buttons */
.idc-log .idv-photo-btn, .idc-log .idv-signature-btn,
.idv-log .idv-photo-btn, .idv-log .idv-signature-btn {
  min-height: 36px; margin: var(--space-2) var(--space-2) 0 0; padding: 0 var(--space-4, 16px);
}

.convert-plan { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--text-sm, 0.9rem); line-height: 1.45; }
.order-convert-panel .signature-receipt-actions .btn { min-height: 44px; }

/* Order suggestion / start-of-appointment conversion rows */
.appt-order-suggest { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.appt-order-suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 10px; background: rgba(184,148,70,.08); font-size: 0.9rem; }
.appt-order-suggest-row > span { flex: 1 1 220px; }

/* ---------- Order detail: action bar, tighter rhythm, folded sections (2026-10-11) ---------- */
.order-detail { gap: var(--space-4); }
.order-detail > .form-section { margin-bottom: 0; padding: var(--space-5); }
.order-detail > .order-quickbar { margin: 0; }
.order-detail-top { gap: var(--space-3); }

.order-actionbar { display: flex; flex-direction: column; gap: 8px; }
.oab-main { display: flex; gap: 8px; align-items: stretch; }
.oab-primary { flex: 2 1 0; min-width: 0; }
.oab-quick { flex: 4 1 0; min-width: 0; }
.oab-group { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.oab-btn {
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  border-width: 1px;
  border-radius: 10px;
  gap: 8px;
  white-space: nowrap;
  text-align: center;
}
.oab-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.oab-btn span { overflow: hidden; text-overflow: ellipsis; }
.oab-btn-gold {
  background: #ecdca9;
  border-color: #cdb165;
  color: #111;
}
.oab-btn-gold svg { color: #111; }
@media (hover: hover) and (pointer: fine) {
  .oab-btn-gold:hover { background: #e3cd8e; border-color: #b8963e; color: #000; }
}
.oab-btn-gold:active { background: #dcc47e; }
.oab-quick-btn { background: var(--color-surface); }
.oab-quick-btn svg { color: var(--color-primary); }

@media (max-width: 719px) {
  .oab-main { flex-direction: column; }
  .oab-primary, .oab-quick { flex: 0 0 auto; }
}
@media (max-width: 559px) {
  .oab-docs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  .oab-btn { padding: 0 10px; }
}
@media (max-width: 479px) {
  .oab-quick { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
}

/* Folded sections: compact when closed, status chip */
.order-detail .sm-fold:not(.sm-fold-open) { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.order-detail .sm-fold:not(.sm-fold-open) > .form-section-title { margin-bottom: 0; }
.order-detail .sm-fold.sm-fold-open > .form-section-title { margin-bottom: var(--space-4); }
.sm-fold-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--color-surface-offset, #f1ede4); color: var(--color-text-muted, #555);
  border: 1px solid var(--color-border);
}
.sm-fold-chip.is-good { background: #e3f1e6; color: #1f6b3a; border-color: #b9dcc2; }
.sm-fold-chip.is-info { background: #e6eef8; color: #254f84; border-color: #bcd0ea; }
.sm-fold-chip.is-warn { background: #fbf0d4; color: #7a5a0b; border-color: #e6cf8f; }
@media (max-width: 560px) {
  .order-detail > .form-section { padding: var(--space-4); }
}

.sm-dialog textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); background: var(--color-surface); color: var(--color-text); resize: vertical; }
.sm-dialog textarea:focus { outline: none; border-color: var(--color-primary); }

.pl-alert-good { background: rgba(46, 125, 80, 0.10); border-color: rgba(46, 125, 80, 0.4); color: inherit; }
.pl-alert-info { background: rgba(60, 90, 140, 0.08); border-color: rgba(60, 90, 140, 0.3); color: inherit; }
.pl-finance-deposit { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; }
.pl-finance-deposit .btn { flex: 0 0 auto; }

/* Change items panel (2026-10-11, restyled) */
.oi-rows, .oi-pv-list { list-style: none; margin: 0 0 var(--space-3, 12px); padding: 0; display: grid; gap: 8px; }
.oi-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); transition: background .15s, border-color .15s; }
.oi-row-main { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.oi-row-name { font-weight: 600; overflow-wrap: anywhere; }
.oi-row-tag { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; min-height: 0; }
.oi-row-tag:empty { display: none; }
.oi-row-price { font-weight: 600; flex: 0 0 auto; }
.oi-row .btn { flex: 0 0 auto; min-width: 84px; }
.oi-row.is-removed { background: rgba(176, 42, 42, 0.08); border-color: rgba(176, 42, 42, 0.55); }
.oi-row.is-removed .oi-row-name, .oi-row.is-removed .oi-row-price { color: #9b2c2c; text-decoration: line-through; text-decoration-thickness: 2px; }
.oi-row.is-removed .oi-row-tag { color: #9b2c2c; }
.oi-row.is-added { background: rgba(46, 125, 80, 0.08); border-color: rgba(46, 125, 80, 0.5); }
.oi-row.is-added .oi-row-tag { color: #1f6b43; }
.oi-adds-empty { margin: 0 0 var(--space-3, 12px); }
.oi-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.oi-mini input { width: 92px; }
.oi-open-search { min-height: 46px; border-style: dashed; border-color: #b8963e; color: inherit; font-weight: 700; gap: 8px; width: 100%; justify-content: center; }
.oi-open-search:hover { background: rgba(184, 148, 70, 0.1); }
.oi-open-search[hidden] { display: none; }
.oi-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #ecdca9; color: #111; font-size: 18px; line-height: 1; }
.oi-search { border: 1px solid var(--color-border); border-radius: 14px; padding: 12px; background: var(--color-surface-offset, rgba(0,0,0,.02)); }
.oi-search[hidden] { display: none; }
.oi-searchbox { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 48px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.oi-searchbox:focus-within { border-color: #b8963e; box-shadow: 0 0 0 3px rgba(184, 148, 70, 0.2); }
.oi-searchbox svg { width: 18px; height: 18px; flex: 0 0 18px; color: #8a7236; }
.oi-searchbox input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 12px 0; }
.oi-results { display: grid; gap: 8px; max-height: 340px; overflow: auto; margin-top: 10px; padding-right: 2px; }
.oi-msg { margin: 8px 4px; }
.oi-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.oi-result.is-out { opacity: .6; }
.oi-result img, .oi-noimg { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 52px; background: var(--color-surface-offset, #eee); }
.oi-result-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.oi-result-text b { overflow-wrap: anywhere; font-weight: 600; }
.oi-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.oi-sku { font-family: var(--font-mono, monospace); color: var(--color-text-muted, #666); }
.oi-chip { padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.06); font-weight: 600; }
.oi-chip-ok { background: rgba(46, 125, 80, 0.14); color: #1f6b43; }
.oi-chip-out { background: rgba(176, 42, 42, 0.12); color: #9b2c2c; }
.oi-result-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.oi-result-price { font-weight: 700; }
.oi-add-btn { min-width: 76px; }
.oi-add-btn.is-picked { background: rgba(46, 125, 80, 0.15); border-color: rgba(46, 125, 80, 0.5); color: #1f6b43; opacity: 1; }
.oi-search-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.oi-reason { margin-top: var(--space-4, 16px); }
.oi-preview { margin-top: var(--space-4, 16px); padding: var(--space-4, 16px); border: 1px solid #cdb165; border-radius: 12px; background: rgba(236,220,169,.18); }
.oi-pv-rm { color: #9b2c2c; }
.oi-pv-add { color: #1f6b43; }
.oi-pv-total { margin: 0 0 var(--space-3, 12px); }
.oi-pv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 479px) {
  .oi-result { flex-wrap: wrap; }
  .oi-result-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .oi-row .btn { width: 100%; }
}
.oi-mini input { min-height: 38px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: inherit; font: inherit; }
.oi-mini input:focus { outline: none; border-color: #b8963e; box-shadow: 0 0 0 3px rgba(184, 148, 70, 0.2); }

.oi-pv-finance { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-md, 10px); background: var(--color-primary-highlight); border: 1px solid var(--color-primary); font-size: var(--text-sm); line-height: 1.5; }

/* Dispatch Manager: completed ID check */
.idv-badge-done { font-weight: 600; }

/* ==========================================================================
   Sales Manager > Part Exchanges (Sam, 2026-10-13)
   Black / ivory / gold, matching the Appointments banner and the Order Manager.
   ========================================================================== */
#viewSalesManager.sm-px-page > .dd-page-header,
#viewSalesManager.sm-px-page > .dd-page-hero { display: none !important; }

.px-page { display: block; }
.px-hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px);
  min-height: 176px; margin-bottom: var(--space-4, 16px); padding: 26px 32px; border-radius: var(--radius-lg, 16px);
  overflow: hidden; isolation: isolate; background: #0b0b0c;
}
.px-hero::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 70%; z-index: -2;
  background: url('../assets/hero-part-exchanges.webp?v=20261013') 62% 50% / cover no-repeat;
}
.px-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.97) 0%, rgba(11, 11, 12, 0.9) 34%, rgba(11, 11, 12, 0.4) 62%, rgba(11, 11, 12, 0.04) 100%);
}
.px-hero-copy { min-width: 0; max-width: 540px; }
.px-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #d4af6a; }
.px-title { margin: 0; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.12; font-weight: 700; color: #faf7ef; letter-spacing: -0.01em; }
.px-sub { margin: 8px 0 0; font-size: var(--text-sm, 14px); line-height: 1.5; color: rgba(250, 247, 239, 0.8); }
.px-hero-actions { display: flex; align-items: center; gap: 12px; align-self: flex-start; flex: 0 0 auto; }
.px-updated { font-size: 12px; color: rgba(250, 247, 239, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); white-space: nowrap; }
.px-refresh {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(11, 11, 12, 0.72); color: #e8c785; border: 1px solid #d4af6a; backdrop-filter: blur(4px);
}
.px-refresh svg { width: 18px; height: 18px; }
.px-refresh.is-spinning svg { animation: px-spin 0.9s linear infinite; }
@keyframes px-spin { to { transform: rotate(360deg); } }
.px-hero-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px;
  background: #d4af6a; color: #14110d; border: 1px solid #d4af6a;
}
.px-hero-btn svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .px-refresh:hover { background: #d4af6a; color: #14110d; }
  .px-hero-btn:hover { background: #e8c785; }
}
.px-refresh:focus-visible, .px-hero-btn:focus-visible { outline: 2px solid #e8c785; outline-offset: 2px; }

/* ---- step bar ---- */
.px-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--space-4, 16px); }
.px-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n count" "main main"; align-items: center; row-gap: 8px;
  min-height: 88px; padding: 12px 14px; text-align: left; font: inherit; color: var(--color-text); cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 18, 11, 0.04);
  -webkit-tap-highlight-color: transparent; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.px-step-n { grid-area: n; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--color-surface-offset); color: var(--color-text-muted); }
.px-step-count { grid-area: count; justify-self: end; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.px-step-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.px-step-label { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.px-step-hint { font-size: 11.5px; line-height: 1.25; color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) { .px-step:hover { border-color: #d4af6a; transform: translateY(-1px); } }
.px-step:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; }
.px-step.active { background: #14110d; border-color: #d4af6a; box-shadow: 0 0 0 1px #d4af6a, 0 6px 16px rgba(20, 17, 13, 0.22); color: #faf7ef; }
.px-step.active .px-step-n { background: #d4af6a; color: #14110d; }
.px-step.active .px-step-hint { color: rgba(250, 247, 239, 0.72); }
.px-step.active .px-step-count { color: #e8c785; }

/* ---- toolbar ---- */
.px-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.px-search {
  position: relative; flex: 1 1 320px; min-width: 220px; display: flex; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0 12px; min-height: 44px;
}
.px-search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-text-muted); margin-right: 8px; }
.px-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--color-text); padding: 10px 0; }
.px-search:focus-within { border-color: #b8923f; box-shadow: 0 0 0 3px rgba(186, 149, 69, 0.18); }
.px-search-inline { flex: none; width: 100%; margin: 4px 0 12px; }
.px-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--color-surface-offset); border-radius: 12px; }
.px-seg button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-text-muted); padding: 8px 14px; border-radius: 9px; cursor: pointer; min-height: 38px; }
.px-seg button.active { background: #14110d; color: #faf7ef; }
.px-sort { min-height: 44px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); font: inherit; font-size: 13.5px; padding: 0 12px; color: var(--color-text); }
.px-count { font-size: 12.5px; color: var(--color-text-muted); margin: 4px 2px 10px; min-height: 18px; }

/* ---- cards ---- */
.px-list { display: grid; gap: 14px; }
.px-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(20, 18, 11, 0.05);
  padding: 16px 18px 14px; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease;
  content-visibility: auto; contain-intrinsic-size: auto 260px;
}
@media (hover: hover) and (pointer: fine) { .px-card:hover { border-color: #d4af6a; box-shadow: 0 6px 18px rgba(20, 18, 11, 0.08); } }
.px-state-ordered, .px-state-accepted { border-left: 4px solid #2f7d4f; }
.px-state-declined { opacity: 0.82; border-left: 4px solid #b04a4a; }
.px-state-toSend { border-left: 4px solid #d4af6a; }
.px-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.px-client-name { margin: 0; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.px-client-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12px; color: var(--color-text-muted); }
.px-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.px-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; border: 1px solid transparent; font-family: inherit; }
.px-chip svg { width: 12px; height: 12px; }
.px-chip-good { background: #e6f3ea; color: #1f6a3f; border-color: #bfe0cb; }
.px-chip-warn { background: #fbf1d9; color: #7a5a12; border-color: #ecd49a; }
.px-chip-info { background: #e8eef7; color: #2c4f80; border-color: #c6d5ea; }
.px-chip-bad { background: #f8e4e4; color: #8d2f2f; border-color: #e8bcbc; }
.px-chip-muted { background: var(--color-surface-offset); color: var(--color-text-muted); border-color: var(--color-border); }
.px-chip-link { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .px-chip-link:hover { background: #d3ecdc; } }
.px-card-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(190px, 0.8fr); gap: 18px; align-items: start; }
.px-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.px-buy { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.px-buy-empty { font-size: 13px; color: var(--color-text-muted); padding: 10px 0; }
.px-buyimg { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: #f3f0e8; border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; }
.px-buyimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-buyimg-sm { width: 56px; height: 56px; border-radius: 10px; }
.px-buyimg-lg { width: 150px; height: 150px; border-radius: 14px; }
.px-buy-main { min-width: 0; }
.px-buy-name { font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.px-buy-name-lg { font-size: 1.1rem; font-family: var(--font-display); }
.px-buy-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.px-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.px-pill-good { background: #e6f3ea; color: #1f6a3f; }
.px-pill-bad { background: #f8e4e4; color: #8d2f2f; }
.px-pill-muted { background: var(--color-surface-offset); color: var(--color-text-muted); }
.px-trades { min-width: 0; display: grid; gap: 8px; align-content: start; }
.px-trades .px-label { margin-bottom: 0; }
.px-trade { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.px-trade-main { flex: 1; min-width: 0; }
.px-trade-name { font-weight: 700; font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.px-trade-name small { font-weight: 500; color: var(--color-text-muted); }
.px-trade-sub { font-size: 12px; color: var(--color-text-muted); }
.px-trade-val { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-photo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: #f3f0e8; border: 1px solid var(--color-border); border-radius: 10px; }
.px-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-photo-sm { width: 52px; height: 52px; }
.px-photo-md { width: 96px; height: 96px; border-radius: 12px; }
.px-photo-gal { width: 100%; height: 100%; border: 0; border-radius: 0; }
.px-noimg { font-size: 10.5px; color: var(--color-text-muted); text-align: center; padding: 4px; line-height: 1.2; }
.px-noimg.px-loading { width: 100%; height: 100%; min-height: 28px; background: linear-gradient(100deg, #f1ede2 30%, #faf7ef 50%, #f1ede2 70%); background-size: 200% 100%; animation: px-shimmer 1.2s linear infinite; }
.px-noimg.light { color: #faf7ef; }
.px-noimg.px-loading.light { width: 200px; height: 200px; background: rgba(255, 255, 255, 0.08); }
@keyframes px-shimmer { to { background-position: -200% 0; } }
.px-money { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #14110d; color: #faf7ef; align-self: stretch; align-content: center; }
.px-money-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(250, 247, 239, 0.8); }
.px-money-row b { color: #faf7ef; font-variant-numeric: tabular-nums; }
.px-money-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 8px; margin-top: 2px; border-top: 1px solid rgba(212, 175, 106, 0.4); font-size: 13px; }
.px-money-total b { font-family: var(--font-display); font-size: 1.4rem; color: #e8c785; font-variant-numeric: tabular-nums; }
.px-note { margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: #fbf6e8; border: 1px solid #efe1b8; font-size: 13px; color: #5a4713; overflow-wrap: anywhere; }
.px-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); }

/* ---- buttons ---- */
.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border);
  -webkit-tap-highlight-color: transparent; transition: background 0.12s ease, border-color 0.12s ease;
}
.px-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.px-btn:disabled { opacity: 0.55; cursor: default; }
.px-btn-sm { min-height: 34px; padding: 0 12px; }
.px-btn-primary { background: #14110d; color: #faf7ef; border-color: #14110d; }
.px-btn-primary svg { color: #e8c785; }
.px-btn-good { background: #e6f3ea; color: #1f6a3f; border-color: #bfe0cb; }
.px-btn-danger { background: #8d2f2f; color: #fff; border-color: #8d2f2f; }
.px-btn-danger-ghost { color: #8d2f2f; }
.px-btn-ghost { background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .px-btn:hover:not(:disabled) { border-color: #d4af6a; }
  .px-btn-primary:hover:not(:disabled) { background: #2a2418; }
  .px-btn-good:hover:not(:disabled) { background: #d3ecdc; }
}
.px-btn:focus-visible, .px-step:focus-visible, .px-seg button:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; }
.px-more { display: flex; justify-content: center; margin: 16px 0 8px; }

/* ---- empty / loading ---- */
.px-empty { text-align: center; padding: 48px 20px; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 16px; color: var(--color-text-muted); }
.px-empty b { display: block; font-size: 1.05rem; color: var(--color-text); margin-bottom: 4px; }
.px-skel { display: grid; grid-template-columns: 1fr 1.4fr 0.8fr; gap: 18px; min-height: 160px; cursor: default; }
.px-skel i { display: block; border-radius: 12px; background: linear-gradient(100deg, #f1ede2 30%, #faf7ef 50%, #f1ede2 70%); background-size: 200% 100%; animation: px-shimmer 1.2s linear infinite; }

/* ---- layers: drawer, modals, photo viewer ---- */
body.px-layer-open { overflow: hidden; }
.px-layer { position: fixed; inset: 0; z-index: 450; background: rgba(12, 10, 6, 0.55); display: flex; }
.px-layer-drawer { justify-content: flex-end; }
.px-layer-modal { align-items: center; justify-content: center; padding: 16px; z-index: 460; }
.px-layer-zoom { z-index: 470; background: rgba(8, 7, 5, 0.92); align-items: center; justify-content: center; }
.px-drawer { width: min(720px, 100%); height: 100%; background: var(--color-bg); display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.3); animation: px-slide 0.18s ease-out; }
@keyframes px-slide { from { transform: translateX(32px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .px-drawer { animation: none; } .px-noimg.px-loading, .px-skel i { animation: none; } }
.px-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; background: #14110d; color: #faf7ef; }
.px-drawer-head h3 { margin: 2px 0 8px; font-family: var(--font-display); font-size: 1.35rem; color: #faf7ef; overflow-wrap: anywhere; }
.px-eyebrow-sm { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #d4af6a; }
.px-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.px-drawer-head .px-x { background: rgba(255, 255, 255, 0.08); color: #faf7ef; border-color: rgba(250, 247, 239, 0.3); }
.px-x svg { width: 18px; height: 18px; }
.px-x-light { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.px-drawer-scroll { flex: 1; overflow-y: auto; padding: 16px 22px 24px; display: grid; gap: 14px; align-content: start; -webkit-overflow-scrolling: touch; }
.px-sec { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 14px 16px; }
.px-sec h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.px-sec-buy { display: flex; gap: 16px; align-items: flex-start; }
.px-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #8a6a22; }
.px-table { display: grid; gap: 2px; }
.px-trow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-surface-offset); font-size: 13.5px; }
.px-trow:last-child { border-bottom: 0; }
.px-trow b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-trow-minus b { color: #8d2f2f; }
.px-trow-sum { font-weight: 700; }
.px-trow-grand { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: #14110d; color: #faf7ef; border: 0; }
.px-trow-grand b { font-family: var(--font-display); font-size: 1.3rem; color: #e8c785; }
.px-detail-trade { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--color-surface-offset); }
.px-detail-trade:last-child { border-bottom: 0; }
.px-detail-trade-main { min-width: 0; flex: 1; }
.px-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin-top: 6px; font-size: 13px; align-items: baseline; }
.px-kv span { color: var(--color-text-muted); }
.px-kv b { font-weight: 600; overflow-wrap: anywhere; }
.px-kv a, .px-fine a { color: #8a6a22; }
.px-req { padding: 10px 0; border-bottom: 1px solid var(--color-surface-offset); }
.px-req:last-of-type { border-bottom: 0; }
.px-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 10px; }
.px-gal { padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 1; border-radius: 10px; overflow: hidden; display: block; }
.px-gal .px-photo { width: 100%; height: 100%; }
.px-points { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--color-text-muted); }
.px-fine { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; margin: 6px 0 0; overflow-wrap: anywhere; }
.px-note-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.px-drawer-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--color-surface); border-top: 1px solid var(--color-border); }
.px-drawer textarea, .px-modal textarea, .px-modal input[type="text"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); resize: vertical;
}
.px-modal input[readonly] { background: var(--color-surface-2); }
.px-modal { width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--color-surface); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); overflow: hidden; }
.px-modal-wide { width: min(760px, 100%); }
.px-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.px-modal-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; overflow-wrap: anywhere; }
.px-modal-body { padding: 16px 20px; overflow-y: auto; display: grid; gap: 8px; align-content: start; grid-auto-rows: min-content; -webkit-overflow-scrolling: touch; }
.px-modal textarea { min-height: 64px; }
.px-drawer textarea { min-height: 72px; }
.px-modal-body p { margin: 0; font-size: 14px; line-height: 1.5; }
.px-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.px-field-label { display: block; font-size: 12px; font-weight: 700; color: var(--color-text-muted); margin: 6px 0 4px; }
.px-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.px-frame { width: 100%; height: 440px; min-height: 300px; border: 1px solid var(--color-border); border-radius: 10px; background: #f4f1ea; }
.px-callout { padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; background: var(--color-surface-offset); border: 1px solid var(--color-border); overflow-wrap: anywhere; }
.px-callout-warn { background: #fff7e0; border-color: #e0c36a; }
.px-callout-bad { background: #f8e4e4; border-color: #e8bcbc; color: #8d2f2f; }
.px-pick-list { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; }
.px-pick { display: flex; align-items: center; gap: 12px; padding: 8px 10px; text-align: left; font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; }
.px-pick-main { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13.5px; }
.px-pick-main small { color: var(--color-text-muted); }
.px-pick-price { font-weight: 700; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .px-pick:hover { border-color: #d4af6a; } }
.px-zoom { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.px-zoom-stage { max-width: 94vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.px-zoom-stage img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.px-zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; }
.px-zoom-prev { left: 14px; }
.px-zoom-next { right: 14px; }
.px-zoom-count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 13px; }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .px-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-card-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .px-money { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px; }
  .px-money-row, .px-money-total { flex-direction: column; align-items: flex-start; gap: 2px; }
  .px-money-total { border-top: 0; padding-top: 0; margin: 0; border-left: 1px solid rgba(212, 175, 106, 0.4); padding-left: 14px; }
}
@media (max-width: 760px) {
  .px-hero { flex-direction: column; align-items: flex-start; padding: 20px 18px; min-height: 0; gap: 14px; }
  .px-hero::before { width: 100%; opacity: 0.55; }
  .px-hero::after { background: linear-gradient(180deg, rgba(11, 11, 12, 0.9) 0%, rgba(11, 11, 12, 0.7) 100%); }
  .px-title { font-size: 1.45rem; }
  .px-hero-actions { flex-wrap: wrap; align-self: stretch; }
  .px-updated { display: none; }
  .px-hero-btn { flex: 1; justify-content: center; }
  .px-card-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .px-card { padding: 14px; }
  .px-money { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; }
  .px-money-row, .px-money-total { flex-direction: row; align-items: baseline; gap: 10px; }
  .px-money-total { border-left: 0; padding-left: 0; border-top: 1px solid rgba(212, 175, 106, 0.4); padding-top: 8px; margin-top: 2px; }
  .px-card-actions .px-btn { flex: 1 1 calc(50% - 8px); }
  .px-card-actions .px-btn-primary { flex-basis: 100%; }
  .px-buyimg { width: 80px; height: 80px; }
  .px-toolbar { gap: 8px; }
  .px-seg { width: 100%; }
  .px-seg button { flex: 1; padding: 8px 6px; font-size: 12.5px; }
  .px-sort { flex: 1; }
  .px-sec-buy { flex-direction: column; }
  .px-buyimg-lg { width: 100%; height: 190px; }
  .px-grid2 { grid-template-columns: 1fr; }
  .px-drawer-head, .px-drawer-scroll, .px-drawer-foot { padding-left: 14px; padding-right: 14px; }
  .px-drawer-foot .px-btn { flex: 1 1 calc(50% - 8px); }
  .px-skel { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .px-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .px-step { padding: 9px 10px; min-height: 76px; row-gap: 6px; }
  .px-step-hint { display: none; }
  .px-photo-md { width: 76px; height: 76px; }
}

/* Order Manager banner: the 96px strip is too thin for a five-watch line-up, so this one is a little taller. */
#salesPageHero.dd-page-hero { height: 150px; object-position: center 46%; }
@media (max-width: 720px) { #salesPageHero.dd-page-hero { height: 96px; } }

/* ==========================================================================
   Sales Manager > Watch Offers (Sam, 2026-10-14). Shares the px- base styles above; wo- adds the page-specific parts.
   ========================================================================== */
.wo-page { display: block; }
.wo-hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px);
  min-height: 176px; margin-bottom: var(--space-4, 16px); padding: 26px 32px; border-radius: var(--radius-lg, 16px);
  overflow: hidden; isolation: isolate; background: #0b0b0c;
}
.wo-hero::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 72%; z-index: -2;
  background: url('../assets/hero-watch-offers.webp?v=20261014') 58% 50% / cover no-repeat;
}
.wo-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.97) 0%, rgba(11, 11, 12, 0.9) 32%, rgba(11, 11, 12, 0.5) 60%, rgba(11, 11, 12, 0.12) 100%);
}
.wo-hero-copy { min-width: 0; max-width: 540px; }

/* what needs doing */
.wo-focus { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.wo-tile {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 14px; text-align: left; font: inherit; color: var(--color-text); cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 18, 11, 0.04);
  -webkit-tap-highlight-color: transparent; transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.wo-tile-n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-width: 1.4ch; color: var(--color-text-muted); }
.wo-tile.has .wo-tile-n { color: var(--color-text); }
.wo-tile-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wo-tile-label { font-size: 13px; font-weight: 700; line-height: 1.2; }
.wo-tile-hint { font-size: 11.5px; line-height: 1.25; color: var(--color-text-muted); }
.wo-tile-new.has { border-left-color: #d4af6a; }
.wo-tile-replied.has { border-left-color: #b04a4a; }
.wo-tile-owner.has { border-left-color: #3b6ea5; }
.wo-tile-chase.has { border-left-color: #c58a2b; }
.wo-tile-order.has { border-left-color: #2f7d4f; }
.wo-tile-gone.has { border-left-color: #8d2f2f; }
@media (hover: hover) and (pointer: fine) { .wo-tile:hover { border-color: #d4af6a; } }
.wo-tile:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; }
.wo-tile.active { background: #14110d; border-color: #d4af6a; color: #faf7ef; box-shadow: 0 0 0 1px #d4af6a, 0 6px 16px rgba(20, 17, 13, 0.22); }
.wo-tile.active .wo-tile-n { color: #e8c785; }
.wo-tile.active .wo-tile-hint { color: rgba(250, 247, 239, 0.72); }
.wo-steps { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 8px; }
.wo-steps .px-step { min-height: 74px; padding: 9px 10px; row-gap: 6px; }
.wo-steps .px-step-count { font-size: 1.2rem; }
.wo-steps .px-step-label { font-size: 12px; }
.wo-steps .px-step-n { width: 20px; height: 20px; font-size: 11px; }
@media (max-width: 1280px) { .wo-steps { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } }

/* cards */
.wo-card.wo-state-new { border-left: 4px solid #d4af6a; }
.wo-card.wo-state-replied { border-left: 4px solid #b04a4a; }
.wo-card.wo-state-order { border-left: 4px solid #2f7d4f; }
.wo-card.wo-state-owner { border-left: 4px solid #3b6ea5; }
.wo-card.wo-state-chase, .wo-card.wo-state-stale { border-left: 4px solid #c58a2b; }
.wo-card.wo-state-gone { border-left: 4px solid #8d2f2f; }
.wo-card.wo-closed { opacity: 0.88; }
.wo-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.wo-watch { flex: 1 1 320px; min-width: 0; }
.wo-money { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.wo-price { display: flex; flex-direction: column; }
.wo-price .px-label { margin-bottom: 2px; }
.wo-price b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wo-pct { min-width: 54px; text-align: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--color-surface-offset); color: var(--color-text-muted); }
.wo-pct:empty { display: none; }
.wo-pct-good { background: #e6f3ea; color: #1f6a3f; }
.wo-pct-info { background: #e8f0f9; color: #2d5a8c; }
.wo-pct-warn { background: #fff4d6; color: #7a5a10; }
.wo-pct-bad { background: #f8e4e4; color: #8d2f2f; }
b.wo-pct-good, b.wo-pct-info, b.wo-pct-warn, b.wo-pct-bad { background: none; }
b.wo-pct-good { color: #1f6a3f; } b.wo-pct-info { color: #2d5a8c; } b.wo-pct-warn { color: #7a5a10; } b.wo-pct-bad { color: #8d2f2f; }
.wo-foot { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 10px; }
.wo-sub { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; }
.wo-sub b { color: var(--color-text); font-weight: 600; }

/* drawer */
.wo-next { display: grid; gap: 4px; padding: 11px 14px; border-radius: 12px; background: #fbf6e8; border: 1px solid #efe1b8; color: #5a4713; font-size: 13.5px; line-height: 1.45; }
.wo-next b { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a6a22; }
.wo-next .px-btn { justify-self: start; margin-top: 6px; }
.wo-next-good { background: #e6f3ea; border-color: #bfe0cb; color: #1f4f33; }
.wo-next-good b { color: #1f6a3f; }
.wo-bigmoney { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wo-bigmoney div { display: flex; flex-direction: column; }
.wo-bigmoney .px-label { margin-bottom: 2px; }
.wo-bigmoney b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wo-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.wo-tplgrid .px-btn { justify-content: flex-start; }
.wo-ownbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wo-ownstate { margin-top: 8px; font-size: 13px; font-weight: 700; color: #2d5a8c; }
.wo-answers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.wo-answers .px-label { margin: 0 4px 0 0; }
.wo-follow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--color-surface-offset); font-size: 13px; }
.wo-stagerow, .wo-noterow { display: flex; gap: 8px; align-items: center; }
.wo-stagerow .wo-select { flex: 1; min-width: 0; }
.wo-noterow input { flex: 1; min-width: 0; }
.wo-select, .wo-compose input[type="number"], .wo-compose input[type="email"], .wo-compose input[type="text"], .wo-layer-drawer input[type="text"], .wo-compose textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text);
}
.wo-compose textarea { min-height: 200px; resize: vertical; line-height: 1.5; }
.wo-compose input[readonly], .wo-compose textarea[readonly] { background: var(--color-surface-2); }
.wo-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--color-surface-offset); font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.wo-check input { margin-top: 3px; }
.wo-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: #8a6a22; cursor: pointer; text-decoration: underline; }
.wo-timeline { display: grid; gap: 8px; }
.wo-tl { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 13px; }
.wo-tl-mail.in { border-left: 3px solid #b04a4a; }
.wo-tl-mail.out { border-left: 3px solid #3b6ea5; }
.wo-tl-ev { background: var(--color-surface-offset); }
.wo-tl-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--color-text-muted); }
.wo-tl-dir { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.wo-tl-subj { margin-top: 3px; font-weight: 600; overflow-wrap: anywhere; }
.wo-tl-snip { margin-top: 2px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.wo-tl-body { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--color-surface-offset); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; max-height: 320px; overflow-y: auto; }
.wo-tl-body[hidden] { display: none; }
@media (max-width: 1180px) { .wo-focus { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .wo-hero { padding: 20px 18px; min-height: 150px; }
  .wo-hero { align-items: flex-start; }
  .wo-hero-copy { max-width: calc(100% - 52px); }
  .wo-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wo-tile { padding: 8px 10px; gap: 8px; min-height: 60px; }
  .wo-tile-hint { display: none; }
  .wo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wo-money { width: 100%; justify-content: space-between; }
  .wo-bigmoney b { font-size: 1.2rem; }
}

/* Watch Offers v2: owner return panel, private link status, reply, % off */
.wo-tile-ownerreply.has { border-left-color: #1f6a3f; }
.wo-paybox { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--color-border, #e4dfd2); border-radius: 10px; background: var(--color-surface-offset, #faf8f2); }
.wo-paybox-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.wo-bd { display: grid; gap: 2px; margin: 4px 0 6px; font-size: 13px; }
.wo-bd-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dotted var(--color-border, #e4dfd2); }
.wo-bd-row span { color: var(--color-text-muted, #6b6558); }
.wo-bd-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wo-bd-total { border-bottom: 0; border-top: 1px solid #b8975a; margin-top: 4px; padding-top: 6px; font-size: 14px; }
.wo-bd-total b { color: #1f6a3f; font-size: 15px; }
.wo-bd-drawer { margin: 10px 0; }
.wo-portal { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid #d7c79d; border-radius: 10px; background: #fdfaf1; }
.wo-portal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.wo-bad { color: #8d2f2f; }
.wo-quoted { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid #b8975a; background: var(--color-surface-offset, #faf8f2); border-radius: 0 8px 8px 0; font-size: 13px; }
.wo-quoted p { margin: 4px 0 0; color: var(--color-text-muted, #6b6558); }
.wo-pinbox { text-align: center; padding: 14px; border: 1px dashed #b8975a; border-radius: 10px; margin: 8px 0; }
.wo-pinbox b { display: block; font-size: 30px; letter-spacing: 6px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.wo-skel { margin-bottom: 10px; }
.wo-reply { font-weight: 700; }
.wo-card.wo-state-ownerreply { border-left: 4px solid #1f6a3f; }
.wo-pct { min-width: 78px; white-space: nowrap; }

/* Owed to client: trade-in credit worth more than the watch (reuses the pl-* ledger styling) */
.co-card { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--color-border); border-left: 3px solid var(--color-brass); border-radius: var(--radius-sm); background: var(--color-surface); }
.co-card.co-paid { border-left-color: var(--color-success); }
.co-card .pl-subhead { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: 0; }
.co-list { margin: var(--space-2) 0; }
.co-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.co-row small { color: var(--color-text-muted); }
.co-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sales-cart-summary-owed { color: var(--color-brass); font-weight: 600; }
.sales-cart-owed-hint { margin-top: var(--space-1); }
@media (max-width: 640px) { .co-form { grid-template-columns: 1fr; } .co-row { grid-template-columns: minmax(0, 1fr) auto; } .co-row .btn { grid-column: 1 / -1; } }
.order-tradein-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.order-tradein-row .field-hint { flex: 1 1 240px; margin: 0; }

/* ==========================================================================
   Sales Manager > Dispatch Manager (Sam, 2026-10-14). Hero banner, hold flags, undo, virtual products.
   ========================================================================== */
.dsp-hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px);
  min-height: 176px; margin-bottom: var(--space-4, 16px); padding: 26px 32px; border-radius: var(--radius-lg, 16px);
  overflow: hidden; isolation: isolate; background: #0b0b0c;
}
.dsp-hero::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 72%; z-index: -2;
  background: url('../assets/hero-dispatch.webp?v=20261014') 50% 42% / cover no-repeat;
}
.dsp-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.97) 0%, rgba(11, 11, 12, 0.9) 32%, rgba(11, 11, 12, 0.5) 60%, rgba(11, 11, 12, 0.1) 100%);
}
.dsp-hero-copy { min-width: 0; max-width: 540px; }
@media (max-width: 720px) {
  .dsp-hero { padding: 20px 18px; min-height: 150px; align-items: flex-start; }
  .dsp-hero-copy { max-width: calc(100% - 52px); }
  .dsp-hero .px-hero-actions { flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
  .dsp-hero::before { width: 100%; opacity: 0.6; }
}
.dsp-hold-badge { white-space: normal; text-align: left; }
.dsp-hold-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.dsp-hold-meta { margin-top: 6px; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; }
.dispatch-attn-row.dsp-attn-held { border-left: 4px solid #b04a4a; }
.dsp-warn { margin: 0 0 var(--space-3, 12px); padding: 10px 12px; border-radius: 10px; background: #fff4d6; border: 1px solid #efd9a0; color: #5f4710; font-size: 13.5px; line-height: 1.45; }
.dsp-detail-hold { padding: 8px 10px; border-radius: 8px; background: #f8e4e4; color: #6b2323; }
.dsp-detail-hold svg { width: 14px; height: 14px; vertical-align: -2px; }
.dsp-virtual-row, .dsp-recent-row { cursor: pointer; }

/* ==========================================================================
   Sales Manager > Live Appointments overhaul (Sam, 2026-10-14): hero, today tiles, management metrics.
   ========================================================================== */
.apt-hero::before { background-image: url('../assets/hero-appointments.webp?v=20261014'); background-position: 50% 40%; }
.apt-live-dot {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; background: #e5f2ea; color: #1f6b3f;
}
.apt-live-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2e9d5b; animation: apt-pulse 1.6s ease-in-out infinite; }
@keyframes apt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
.apt-tile-live .dashboard-tile-number { color: #1f6b3f; }
.apt-perf { margin-top: var(--space-6, 24px); }
.apt-perf.is-loading { opacity: 0.6; transition: opacity 0.2s; }
.apt-perf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; margin-bottom: var(--space-3, 12px); }
.apt-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; background: var(--color-surface-2); }
.apt-seg-btn { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: transparent; color: var(--color-text-muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.apt-seg-btn.is-active { background: #0b0b0c; color: #e9d9a8; }
.apt-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3, 12px); margin-bottom: var(--space-4, 16px); }
.apt-kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--color-brass, #b8923f); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.apt-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--color-text-muted); }
.apt-kpi-value { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); font-weight: 800; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.apt-kpi-sub { font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
.apt-sub2 { display: block; }
.apt-delta { display: block; }
.apt-delta-good { color: #1f6b3f; font-weight: 600; }
.apt-delta-bad { color: #a23b3b; font-weight: 600; }
.apt-delta-na { color: var(--color-text-faint); }
.apt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3, 12px); }
.apt-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.apt-wide { grid-column: 1 / -1; }
.apt-card-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.apt-legend { font-size: 11.5px; font-weight: 500; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.apt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-left: 8px; }
.apt-dot-a { background: #d9cfb8; } .apt-dot-b { background: #b8923f; }
.apt-bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; }
.apt-bars-tall { height: 150px; }
.apt-bar-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; height: 100%; }
.apt-bar-stack { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.apt-bar { position: absolute; bottom: 0; left: 12%; right: 12%; border-radius: 4px 4px 0 0; }
.apt-bar-a { background: #d9cfb8; }
.apt-bar-b { background: #b8923f; left: 28%; right: 28%; }
.apt-bar-label { font-size: 10.5px; color: var(--color-text-muted); text-align: center; height: 14px; margin-top: 4px; white-space: nowrap; overflow: visible; }
.apt-table-wrap { overflow-x: auto; }
.apt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.apt-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding: 6px 8px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.apt-table td { padding: 9px 8px; border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.apt-table tr:last-child td { border-bottom: 0; }
.apt-r { text-align: right !important; }
.apt-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.apt-top li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; min-width: 0; }
.apt-rank { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: #0b0b0c; color: #e9d9a8; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.apt-top-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.apt-top-n { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) {
  .apt-grid, .apt-top { grid-template-columns: 1fr; }
  .apt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apt-perf-head .apt-seg { width: 100%; justify-content: space-between; }
  .apt-bars-tall { height: 120px; }
  .apt-top-n { white-space: normal; }
}

/* ---- Part exchanges: client replied, follow-ups and the handover plan (2026-10-14) ---- */
.px-card.px-replied { border-color: #d4af6a; box-shadow: 0 0 0 1px #d4af6a inset, 0 6px 18px rgba(212, 175, 106, 0.18); background: linear-gradient(180deg, #fffaf0, var(--color-surface, #fff) 90px); }
.px-chip-reply { background: #14120b; color: #f1d9a0; border-color: #14120b; font-weight: 600; }
.px-step.px-step-alert { border-color: #d4af6a; background: #fffaf0; }
.px-step.px-step-alert .px-step-count { background: #14120b; color: #f1d9a0; border-radius: 999px; padding: 0 8px; }
.px-lede { font-size: 15px; line-height: 1.5; margin: 0 0 14px; color: var(--color-text, #14120b); }
.px-choices { display: grid; gap: 10px; margin-bottom: 12px; }
.px-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; width: 100%; padding: 14px 16px; background: #fff; border: 1px solid var(--color-border, #e5dfd2); border-radius: 12px; cursor: pointer; font: inherit; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
.px-choice b { font-size: 15px; font-weight: 600; }
.px-choice span { font-size: 13px; color: #6b6554; line-height: 1.4; }
.px-choice:hover:not(:disabled), .px-choice:focus-visible { border-color: #d4af6a; box-shadow: 0 4px 14px rgba(20, 18, 11, 0.08); outline: none; }
.px-choice:disabled { opacity: 0.55; cursor: default; }
.px-plan-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.px-btn.px-btn-on { background: #14120b; color: #f1d9a0; border-color: #14120b; }
.px-btn-ghost { background: transparent; border-color: transparent; color: #6b6554; text-decoration: underline; }

/* Order Manager: how the part exchange watch reaches us */
.order-px-handover { margin-top: var(--space-3); }
.pxh { border: 1px solid var(--color-border, #e5dfd2); border-left: 4px solid #d4af6a; border-radius: 12px; padding: 14px 16px; background: #fffdf8; }
.pxh-undecided, .pxh-to_book { border-left-color: #c9962e; }
.pxh-received { border-left-color: #2f7d4f; }
.pxh-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pxh-title { font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
.pxh-line { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }
.pxh-by { margin: 0; }
.pxh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.order-px-more { flex-basis: 100%; margin-top: 6px; }
.order-px-more > summary { cursor: pointer; font-size: 12px; color: #6b6554; list-style: none; display: inline-block; padding: 2px 0; }
.order-px-more > summary::-webkit-details-marker { display: none; }
.order-px-more > summary::before { content: "+ "; }
.order-px-more[open] > summary::before { content: "\2212  "; }
.order-px-more-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0 2px; }
@media (max-width: 640px) { .pxh-actions .btn { flex: 1 1 100%; } }
.px-modal select#pxEmailType { width: 100%; padding: 10px 12px; margin-bottom: 14px; font: inherit; font-size: 14px; background: var(--color-surface-2, #f7f4ec); border: 1px solid var(--color-border, #e5dfd2); border-radius: 10px; color: inherit; }

/* Part exchanges: email log */
#pxEmailLog { display: grid; gap: 8px; }
.px-log { border: 1px solid var(--color-border, #e5dfd2); border-left: 3px solid #d4af6a; border-radius: 10px; padding: 9px 12px; background: #fffdf8; }
.px-log-in { border-left-color: #14120b; background: #fffaf0; }
.px-log-event { border-left-color: #b9b29f; background: #f8f6f0; }
.px-log-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.px-log-top b { font-weight: 600; }
.px-log-top time { margin-left: auto; font-size: 12px; color: #6b6554; }
.px-log-who { font-size: 12px; color: #6b6554; margin-top: 2px; }
.px-log-note { font-size: 12px; color: #3f3a2f; margin-top: 4px; line-height: 1.4; }


/* ---------------------------------------------------------------
   Register of Interest overhaul (2026-10-15). Same ivory / gold /
   near-black language as the rest of Sales Manager.
   --------------------------------------------------------------- */
.roi-page { display: flex; flex-direction: column; gap: var(--space-5); }
.roi-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.roi-eyebrow { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brass); font-weight: 700; }
.roi-title { font-family: var(--font-display); font-size: var(--text-xl); margin: 2px 0 var(--space-1); color: var(--color-text); font-weight: 400; }
.roi-sub { margin: 0; max-width: 62ch; color: var(--color-text-muted); font-size: var(--text-sm); }
.roi-head-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.roi-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.roi-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 2px; }
.roi-stat-num { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; color: var(--color-text); }
.roi-stat-label { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; }
.roi-stat-hot { background: var(--sidebar-bg); border-color: var(--sidebar-bg); }
.roi-stat-hot .roi-stat-num { color: var(--color-primary); }
.roi-stat-hot .roi-stat-label { color: var(--sidebar-text); }
.roi-stat-warn .roi-stat-num { color: var(--color-warning); }
.roi-toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.roi-search { flex: 1 1 260px; min-width: 0; max-width: 460px; }
.roi-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.roi-filter { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); border-radius: var(--radius-full); padding: 6px 14px; font-size: var(--text-xs); font-weight: 600; cursor: pointer; min-height: 36px; }
.roi-filter.selected { background: var(--sidebar-bg); color: var(--color-primary); border-color: var(--sidebar-bg); }
.roi-section-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.roi-section-title span { font-family: var(--font-body); font-size: var(--text-xs); background: var(--color-surface-offset); color: var(--color-brass); border-radius: var(--radius-full); padding: 2px 10px; font-weight: 700; }
.roi-section-matched span { background: var(--color-success-highlight); color: var(--color-success); }
.roi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.roi-card { display: flex; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); min-width: 0; }
.roi-card-matched { border-left-color: var(--color-success); background: linear-gradient(90deg, var(--color-success-highlight), var(--color-surface) 38%); }
.roi-card-thumb { width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; background: var(--color-surface-2); }
.roi-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.roi-card-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.roi-card-name { font-weight: 700; font-size: var(--text-base); overflow-wrap: anywhere; }
.roi-age { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.roi-age-old { color: var(--color-warning); }
.roi-card-title { color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.roi-card-refline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.roi-ref { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; background: var(--color-primary-highlight); color: var(--color-primary-active); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: 2px 10px; letter-spacing: 0.02em; }
.roi-chip { font-size: var(--text-xs); background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-full); padding: 3px 10px; }
.roi-card-note { font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.roi-match-line { font-size: var(--text-sm); color: var(--color-success); font-weight: 600; }
.roi-card-foot { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: 2px; font-size: var(--text-xs); }
.roi-contact { color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.roi-card-foot .roi-requested-by-tag { margin-left: auto; }
.roi-card-actions { display: flex; flex-direction: column; gap: var(--space-2); justify-content: flex-start; align-items: stretch; flex-shrink: 0; }
.roi-empty { padding: var(--space-8); text-align: center; color: var(--color-text-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }
.roi-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.roi-optional { color: var(--color-text-faint); font-weight: 400; font-size: var(--text-xs); margin-left: 6px; }
.roi-draft-banner { background: var(--color-primary-highlight); border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.roi-link-btn { background: none; border: 0; color: var(--color-primary-active); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 4px; font-size: inherit; }
.roi-stock-warn { margin-top: var(--space-2); background: var(--color-warning-highlight); border: 1px solid var(--color-warning); color: var(--color-text); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.roi-stock-stage { font-size: var(--text-xs); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 1px 8px; margin-left: 4px; white-space: nowrap; }
.roi-recheck-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); flex-wrap: wrap; }
.roi-recheck-watch { color: var(--color-text-muted); max-width: 52%; }
.roi-recheck-spec { color: var(--color-text-muted); }
@media (max-width: 1100px) {
  .roi-grid { grid-template-columns: minmax(0, 1fr); }
  .roi-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .roi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roi-card { flex-wrap: wrap; }
  .roi-card-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .roi-two { grid-template-columns: 1fr; }
  .roi-recheck-watch { max-width: 100%; }
}

input.roi-search { font: inherit; font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface, #fff); border: 1px solid var(--color-border, #ddd6c6); border-radius: 12px; padding: 11px 14px; height: 44px; box-sizing: border-box; }
input.roi-search:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 1px; }