/**
 * price-it-next.css — Scoped styles for new Price It implementation
 *
 * Inherits BDS tokens + primitives. Only contains Price It-specific overrides
 * and composition. Patterns that generalize should graduate into
 * baker-design-system/primitives.css.
 */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bds-bg-0);
  color: var(--bds-text-1);
  font: var(--bds-t-body) var(--bds-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ======================= HEADER ======================= */

.bds-header {
  padding: calc(env(safe-area-inset-top) + 12px) var(--bds-gap) 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.6));
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ======================= CONTENT SCROLL AREA ======================= */

.bds-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 100px;  /* room for tab bar */
}

/* ======================= SECTION HEADS ======================= */

.bds-section {
  padding-top: var(--bds-gap-lg);
}

.bds-section__head {
  padding: 0 var(--bds-gap);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--bds-gap-sm);
}

/* ======================= HERO (Slice 1.5 — equipment-first framing) ======================= */

.bds-hero { padding: var(--bds-gap-lg) var(--bds-gap) var(--bds-gap); }
.bds-hero__label {
  color: var(--bds-accent);
  font: 600 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--bds-gap-sm);
}
.bds-hero__question {
  background: linear-gradient(180deg, #fff 0%, var(--bds-text-3) 180%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bds-hero__sub {
  color: var(--bds-text-3);
  margin-top: var(--bds-gap-sm);
  font: 500 14px/1.5 var(--bds-font);
}

/* ======================= HEADER CHROME (app logo, title, store chip) ======================= */

.bds-app-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bds-accent);
  color: #fff;
  font: 800 18px/32px var(--bds-font);
  text-align: center;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.bds-app-title { color: var(--bds-text-1); flex: 1; }
.bds-app-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--bds-bg-3);
  border: 1px solid var(--bds-border);
  font: 600 12px/1 var(--bds-font);
  color: var(--bds-text-1);
}
.bds-app-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bds-success);
  box-shadow: 0 0 6px rgba(50,215,75,0.6);
}

/* ======================= WALK-UP PRIMARY (Slice 1.5) =======================
   Stock # or Serial is the hero action. Scan Serial + Browse are secondary
   squares beneath. Replaces the old "search box in a void". */

.bds-walkup {
  padding: var(--bds-gap-sm) var(--bds-gap) 0;
  display: flex;
  flex-direction: column;
  gap: var(--bds-gap-sm);
}

.bds-walkup-primary {
  /* box-sizing explicit — Slice 1.5 used a <button> element which gets
     border-box from UA defaults; Session 239 changed the wrapper to a <div>
     so we must force border-box or width:100% + padding overflows the viewport. */
  box-sizing: border-box;
  appearance: none;
  text-align: left;
  position: relative;
  background: linear-gradient(135deg, rgba(200,16,46,0.22) 0%, rgba(200,16,46,0.04) 60%, rgba(0,0,0,0) 100%);
  border: 1px solid var(--bds-border-accent);
  border-radius: var(--bds-r);
  padding: 22px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              box-shadow var(--bds-dur-fast) var(--bds-ease-smooth);
  min-height: 88px;
  color: var(--bds-text-1);
  width: 100%;
  max-width: 100%;
}
.bds-walkup-primary::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(200,16,46,0.35) 0%, rgba(200,16,46,0) 60%);
  pointer-events: none;
}
.bds-walkup-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(200,16,46,0.2);
}
.bds-walkup-primary:active { transform: scale(0.98); }

.bds-walkup-primary.is-loading {
  pointer-events: none;
  animation: bds-loading-shimmer 1.6s var(--bds-ease-smooth) infinite;
}
@keyframes bds-loading-shimmer {
  0%   { border-color: rgba(200,16,46,0.3); }
  50%  { border-color: rgba(200,16,46,0.6); box-shadow: 0 0 24px rgba(200,16,46,0.15); }
  100% { border-color: rgba(200,16,46,0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .bds-walkup-primary.is-loading { animation: none; opacity: 0.6; }
}

.bds-walkup-primary__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bds-accent) 0%, #9a0c24 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(200,16,46,0.45);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.bds-walkup-primary__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.bds-walkup-primary__title {
  font: 700 18px/1.2 var(--bds-font);
  letter-spacing: -0.01em;
  color: var(--bds-text-1);
}
.bds-walkup-primary__sub {
  margin-top: 4px;
  font: 500 12px/1.3 var(--bds-font);
  color: var(--bds-text-3);
}

/* Inline scan-camera button — sits inside the primary card on the right.
   Distinct hit target from the card body. Stops click propagation so a tap
   here opens the scanner instead of firing the typing prompt. */
.bds-walkup-primary__scan {
  appearance: none;
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              background var(--bds-dur-fast) var(--bds-ease-smooth),
              border-color var(--bds-dur-fast) var(--bds-ease-smooth);
  /* On phones, give Apple's tap-highlight a clean look */
  -webkit-tap-highlight-color: transparent;
}
.bds-walkup-primary__scan:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}
.bds-walkup-primary__scan:active {
  transform: scale(0.92);
  background: rgba(200, 16, 46, 0.18);
  border-color: var(--bds-border-accent);
}
.bds-walkup-primary__scan-icon {
  font-size: 22px;
  line-height: 1;
}

/* Browse all inventory — full-width sibling beneath the primary card.
   Different intent (browsing, not targeting) so it deserves its own row. */
.bds-walkup-browse {
  box-sizing: border-box;
  appearance: none;
  text-align: left;
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: 18px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--bds-text-1);
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              background var(--bds-dur-fast) var(--bds-ease-smooth),
              border-color var(--bds-dur-fast) var(--bds-ease-smooth);
  width: 100%;
  max-width: 100%;
  min-height: 68px;
}
.bds-walkup-browse:hover {
  background: var(--bds-bg-3);
  border-color: var(--bds-border-strong);
  transform: translateY(-2px);
}
.bds-walkup-browse:active { transform: scale(0.99); }
.bds-walkup-browse__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--bds-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.bds-walkup-browse__body { flex: 1; min-width: 0; }
.bds-walkup-browse__title {
  font: 700 15px/1.2 var(--bds-font);
  color: var(--bds-text-1);
}
.bds-walkup-browse__sub {
  margin-top: 3px;
  font: 500 12px/1.3 var(--bds-font);
  color: var(--bds-text-3);
}

/* ======================= PROGRAMS CHANGED BANNER (Slice 1.5) =======================
   Proactive intelligence signal — yellow lightning pill with program-change digest.
   Sits between walk-up and customer carousel. */

.bds-programs-banner-wrap { padding: var(--bds-gap-lg) var(--bds-gap) 0; }

.bds-programs-banner {
  background: linear-gradient(135deg, rgba(255,214,10,0.10) 0%, rgba(255,214,10,0.02) 100%);
  border: 1px solid rgba(255,214,10,0.25);
  border-left: 3px solid var(--bds-warning);
  border-radius: var(--bds-r);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              background var(--bds-dur-fast) var(--bds-ease-smooth);
}
.bds-programs-banner:hover {
  background: linear-gradient(135deg, rgba(255,214,10,0.16) 0%, rgba(255,214,10,0.04) 100%);
  transform: translateX(2px);
}
.bds-programs-banner:active { transform: scale(0.99); }

.bds-programs-banner__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,214,10,0.14);
  border: 1px solid rgba(255,214,10,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.bds-programs-banner__body { flex: 1; min-width: 0; }
.bds-programs-banner__title {
  font: 700 13px/1.2 var(--bds-font);
  color: var(--bds-text-1);
}
.bds-programs-banner__sub {
  margin-top: 3px;
  font: 500 11px/1.3 var(--bds-font);
  color: var(--bds-text-2);
}
.bds-programs-banner__chev {
  color: var(--bds-warning);
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ======================= SEARCH INPUT helper for Pipeline tab (reused by Slice 2) ======================= */
/* Keep for Pipeline filter input + Find tab. Stripped the dedicated home search block. */
.bds-search-wrap { position: relative; display: flex; align-items: center; }
.bds-search-icon { position: absolute; left: 16px; font-size: 16px; pointer-events: none; opacity: 0.4; }
.bds-search-input { padding-left: 44px; }

/* Section action (See all) + count badge pill */
.bds-section__action {
  color: var(--bds-text-accent);
  font: 600 12px/1 var(--bds-font);
  text-decoration: none;
}
.bds-count-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bds-bg-4);
  color: var(--bds-text-1);
  font: 700 10px/1 var(--bds-font);
  letter-spacing: 0;
}

/* =================================================================
   UNIT PANEL — Slice 2 unit-loaded state
   ================================================================= */

.bds-unit-panel {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 110px;
  background: var(--bds-bg-0);
  position: relative;
}

.bds-unit-panel.hidden { display: none; }
.bds-content.hidden   { display: none; }

.bds-unit-panel__footer {
  padding: var(--bds-gap-lg) var(--bds-gap);
  display: flex;
  justify-content: flex-start;
}

.bds-card-slot { padding: 0 var(--bds-gap); margin-top: 20px; }
.bds-card-slot:first-of-type { margin-top: 0; }

@supports (animation-timeline: view()) {
  .bds-card-slot {
    animation: bds-card-scroll-hint linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
  @keyframes bds-card-scroll-hint {
    from { scale: 0.97; opacity: 0.7; }
    to   { scale: 1; opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bds-card-slot { animation: none; }
  }
}

/* ----- UNIT HEADER (Task 2.4) — sticky, scroll-linked shrink ----- */

.bds-unit-header {
  position: sticky;
  top: 0;
  z-index: 15;
  padding: calc(env(safe-area-inset-top) + 14px) var(--bds-gap) 14px;
  background: linear-gradient(180deg, rgba(10,10,15,0.98) 0%, rgba(10,10,15,0.7) 80%, transparent 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: padding var(--bds-dur-fast) var(--bds-ease-smooth);
}

/* Scroll-linked shrink — animated via animation-timeline in supporting browsers,
   or falls back to the padding above. */
@supports (animation-timeline: scroll()) {
  .bds-unit-header {
    animation: bds-unit-header-shrink linear both;
    animation-timeline: scroll(nearest);
    animation-range: 0 120px;
  }
  @keyframes bds-unit-header-shrink {
    from { padding-top: calc(env(safe-area-inset-top) + 14px); padding-bottom: 14px; }
    to   { padding-top: calc(env(safe-area-inset-top) + 8px);  padding-bottom: 8px; }
  }
}

.bds-unit-header__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bds-unit-header__back {
  appearance: none;
  background: var(--bds-bg-3);
  border: 1px solid var(--bds-border);
  color: var(--bds-text-1);
  width: 36px; height: 36px;
  border-radius: 10px;
  font: 600 16px/1 var(--bds-font);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--bds-dur-fast) var(--bds-ease-smooth);
}
.bds-unit-header__back:hover { background: var(--bds-bg-4); }
.bds-unit-header__back:active { transform: scale(0.94); }

.bds-unit-header__body { flex: 1; min-width: 0; }

.bds-unit-header__title {
  font: 700 18px/1.15 var(--bds-font);
  letter-spacing: -0.02em;
  color: var(--bds-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bds-unit-header__meta {
  margin-top: 3px;
  display: flex;
  gap: var(--bds-gap-sm);
  flex-wrap: wrap;
  align-items: center;
}
.bds-unit-header__meta-item {
  font: 600 10px/1 var(--bds-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bds-text-3);
}
.bds-unit-header__meta-item strong {
  color: var(--bds-text-1);
  font-weight: 700;
}

.bds-unit-header__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bds-bg-3);
  border: 1px solid var(--bds-border);
  font: 700 9px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bds-text-1);
}
.bds-unit-header__status.new    { background: rgba(50,215,75,0.12); border-color: rgba(50,215,75,0.3); color: var(--bds-success); }
.bds-unit-header__status.used   { background: rgba(255,214,10,0.12); border-color: rgba(255,214,10,0.25); color: var(--bds-warning); }
.bds-unit-header__status.demo   { background: rgba(200,16,46,0.14); border-color: rgba(200,16,46,0.3); color: var(--bds-hot); }

/* =================================================================
   BUYER MATCH BANNER (Task 2.6) — spring-in alert when a loaded unit
   matches a Wanted board entry.
   ================================================================= */

.bds-buyer-match-wrap { padding: 0 var(--bds-gap); }

.bds-buyer-match {
  margin-top: var(--bds-gap);
  background: linear-gradient(135deg, rgba(200,16,46,0.22) 0%, rgba(200,16,46,0.06) 60%, rgba(0,0,0,0) 100%);
  border: 1px solid var(--bds-border-accent);
  border-radius: var(--bds-r);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(200,16,46,0.18);
  animation: bds-buyer-match-spring 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: top center;
}

@keyframes bds-buyer-match-spring {
  0%   { opacity: 0; transform: translateY(-24px) scale(0.94); }
  60%  { opacity: 1; transform: translateY(4px)   scale(1.02); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bds-buyer-match { animation: none; opacity: 1; transform: none; }
}

.bds-buyer-match::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: -40%;
  width: 60%;
  background: radial-gradient(ellipse, rgba(200,16,46,0.25) 0%, transparent 70%);
  pointer-events: none;
}

.bds-buyer-match__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bds-accent), #9a0c24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(200,16,46,0.5);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.bds-buyer-match__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.bds-buyer-match__title {
  font: 700 13px/1.2 var(--bds-font);
  letter-spacing: -0.01em;
  color: var(--bds-text-1);
}
.bds-buyer-match__sub {
  margin-top: 3px;
  font: 500 11px/1.3 var(--bds-font);
  color: var(--bds-text-2);
}

.bds-buyer-match__dismiss {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--bds-text-3);
  font: 600 18px/1 var(--bds-font);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.bds-buyer-match__dismiss:hover { color: var(--bds-text-1); background: rgba(255,255,255,0.06); }

/* =================================================================
   COST BASIS CARD (Task 2.5) — inline Freight editor
   ================================================================= */

.bds-cost-basis-card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: var(--bds-gap-lg);
}

.bds-math-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--bds-gap);
}
.bds-math-head__title {
  font: 700 13px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bds-text-2);
}

.bds-math-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
}

.bds-math-row + .bds-math-row { border-top: 1px dashed rgba(255,255,255,0.04); }

.bds-math-label {
  color: var(--bds-text-2);
  font: 500 15px/1 var(--bds-font);
}

.bds-math-value {
  font: 600 17px/1 var(--bds-font);
  color: var(--bds-text-1);
  letter-spacing: -0.01em;
}

/* Inline editor — no visible input chrome (no border, no background).
   Focus reveals an accent underline only. Matches display typography exactly. */
.bds-math-input {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  outline: none;
  padding: 0 0 2px 0;
  font: 600 17px/1 var(--bds-font);
  color: var(--bds-text-1);
  text-align: right;
  letter-spacing: -0.01em;
  width: 96px;
  transition: border-color var(--bds-dur-fast) var(--bds-ease-smooth);
  caret-color: var(--bds-accent);
}
.bds-math-input::placeholder {
  color: var(--bds-text-3);
  font-weight: 600;
}
.bds-math-input:focus { border-bottom-color: var(--bds-accent); }

/* True cost = big bottom line */
.bds-math-total {
  margin-top: var(--bds-gap);
  padding-top: var(--bds-gap);
  border-top: 1px solid var(--bds-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bds-math-total__label {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-text-3);
}
.bds-math-total__value {
  font: 800 24px/1 var(--bds-font);
  letter-spacing: -0.02em;
  color: var(--bds-text-1);
}

/* =================================================================
   BUILD SHEET CARD (Task 2.7) — Case IH factory options, GOLD accent
   Gold (--bds-gold) is reserved for Case IH factory moments ONLY.
   ================================================================= */

.bds-build-sheet-card {
  background: linear-gradient(135deg, rgba(198,162,76,0.08) 0%, rgba(198,162,76,0.02) 50%, var(--bds-bg-2) 100%);
  border: 1px solid rgba(198,162,76,0.25);
  border-left: 3px solid var(--bds-gold);
  border-radius: var(--bds-r);
  padding: var(--bds-gap-lg);
  position: relative;
  overflow: hidden;
}

.bds-build-sheet-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(198,162,76,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.bds-build-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bds-gap-sm);
  margin-bottom: var(--bds-gap);
  position: relative;
  z-index: 1;
}
.bds-build-sheet-head__title {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-gold);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bds-build-sheet-head__title::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--bds-gold);
  mask: radial-gradient(circle at center, transparent 40%, black 42%);
  -webkit-mask: radial-gradient(circle at center, transparent 40%, black 42%);
  border-radius: 50%;
}
.bds-build-sheet-head__toggle {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(198,162,76,0.25);
  color: var(--bds-gold);
  font: 700 10px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--bds-dur-fast) var(--bds-ease-smooth);
}
.bds-build-sheet-head__toggle:hover { background: rgba(198,162,76,0.1); }

.bds-build-sheet-model {
  font: 700 20px/1.1 var(--bds-font);
  letter-spacing: -0.01em;
  color: var(--bds-text-1);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.bds-build-sheet-serial {
  font: 500 11px/1 var(--bds-font);
  color: var(--bds-text-3);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.bds-build-sheet-options {
  margin-top: var(--bds-gap);
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.bds-build-sheet-options.collapsed { display: none; }

.bds-build-sheet-option {
  display: flex;
  align-items: baseline;
  gap: var(--bds-gap-sm);
  padding: 6px 0;
  border-top: 1px dashed rgba(198,162,76,0.14);
}
.bds-build-sheet-option__code {
  font: 700 10px/1 var(--bds-font);
  color: var(--bds-gold);
  letter-spacing: 0.06em;
  min-width: 48px;
  flex-shrink: 0;
}
.bds-build-sheet-option__desc {
  font: 500 12px/1.3 var(--bds-font);
  color: var(--bds-text-2);
  flex: 1;
}

.bds-build-sheet-empty {
  margin-top: var(--bds-gap-sm);
  font: 500 12px/1.3 var(--bds-font);
  color: var(--bds-text-3);
  position: relative;
  z-index: 1;
}

/* =================================================================
   SERVICE HISTORY CARD (Task 2.8) — HBS RO history, collapsed by default
   ================================================================= */

.bds-service-card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: var(--bds-gap-lg);
}

.bds-service-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--bds-gap-sm);
}
.bds-service-head__title {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-text-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bds-service-head__count {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bds-bg-4);
  color: var(--bds-text-1);
  font: 800 10px/1 var(--bds-font);
}
.bds-service-head__toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--bds-border);
  color: var(--bds-text-2);
  font: 700 10px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.bds-service-head__toggle:hover { background: var(--bds-bg-3); color: var(--bds-text-1); }

.bds-service-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bds-service-list.collapsed { display: none; }

.bds-service-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--bds-gap-sm);
  padding: 10px 0;
  border-top: 1px dashed rgba(255,255,255,0.04);
  align-items: baseline;
}
.bds-service-item:first-child { border-top: none; }

.bds-service-item__date {
  font: 700 10px/1.2 var(--bds-font);
  color: var(--bds-text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bds-service-item__body {
  min-width: 0;
}
.bds-service-item__title {
  font: 600 13px/1.2 var(--bds-font);
  color: var(--bds-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bds-service-item__sub {
  margin-top: 2px;
  font: 500 11px/1 var(--bds-font);
  color: var(--bds-text-3);
}
.bds-service-item__cost {
  font: 700 13px/1 var(--bds-font);
  color: var(--bds-text-1);
  letter-spacing: -0.01em;
  text-align: right;
}
.bds-service-item.warranty .bds-service-item__cost { color: var(--bds-success); }

.bds-service-empty {
  font: 500 12px/1.4 var(--bds-font);
  color: var(--bds-text-3);
  padding: var(--bds-gap-sm) 0;
}
.bds-service-empty.needs-hbs { color: var(--bds-warning); }

/* =================================================================
   PROGRAMS CARD (Task 2.9) — Public / Internal two-tab view
   Internal tab: lock icon + diagonal stripe background (price-protected).
   ================================================================= */

.bds-programs-card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  overflow: hidden;
}

.bds-programs-head {
  padding: var(--bds-gap) var(--bds-gap-lg) 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--bds-gap-sm);
}
.bds-programs-head__title {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-text-2);
}

.bds-programs-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bds-bg-1);
  border-top: 1px solid var(--bds-border);
  border-bottom: 1px solid var(--bds-border);
  position: relative;
}
.bds-programs-tab {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--bds-text-3);
  font: 700 12px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color var(--bds-dur-fast) var(--bds-ease-smooth),
              background var(--bds-dur-fast) var(--bds-ease-smooth);
  position: relative;
}
.bds-programs-tab:hover { color: var(--bds-text-1); }
.bds-programs-tab.active { color: var(--bds-text-1); background: var(--bds-bg-2); }
.bds-programs-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--bds-accent);
}
.bds-programs-tab__lock { font-size: 11px; opacity: 0.7; }

.bds-programs-panel {
  display: none;
  padding: var(--bds-gap) var(--bds-gap-lg) var(--bds-gap-lg);
}
.bds-programs-panel.active { display: block; }

/* Internal panel gets a subtle diagonal stripe to signal "protected" */
.bds-programs-panel.internal {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,214,10,0.02) 0px,
      rgba(255,214,10,0.02) 14px,
      transparent 14px,
      transparent 28px
    );
}

.bds-program-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px dashed rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background var(--bds-dur-fast);
}
.bds-program-row:first-child { border-top: none; }
.bds-program-row:hover { background: rgba(255,255,255,0.02); }
.bds-program-row.selected {
  background: linear-gradient(90deg, rgba(200,16,46,0.06) 0%, transparent 100%);
}
.bds-program-row.selected::before {
  content: '✓';
  color: var(--bds-accent);
  margin-right: 6px;
  font-weight: 800;
}

.bds-program-row__body { flex: 1; min-width: 0; }
.bds-program-row__name {
  font: 600 13px/1.2 var(--bds-font);
  color: var(--bds-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bds-program-row__num {
  font: 500 10px/1 var(--bds-font);
  color: var(--bds-text-3);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.bds-program-row__amount {
  font: 700 14px/1 var(--bds-font);
  color: var(--bds-success);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  text-align: right;
}
.bds-program-row__amount--pct {
  color: var(--bds-text-accent);
  font-size: 12px;
}

.bds-programs-empty {
  font: 500 12px/1.4 var(--bds-font);
  color: var(--bds-text-3);
  padding: var(--bds-gap-sm) 0;
  text-align: center;
}

/* =================================================================
   PRICING CARD (Task 2.10) — Sale Price + Margin
   ================================================================= */

.bds-pricing-card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: var(--bds-gap-lg);
  transition: border-color var(--bds-dur-fast) var(--bds-ease-smooth);
}
.bds-pricing-card.active {
  border-color: var(--bds-border-accent);
  box-shadow: 0 0 0 1px rgba(200,16,46,0.15);
}

.bds-pricing-head {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-text-2);
  margin-bottom: var(--bds-gap);
}

.bds-pricing-input-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bds-gap-sm);
  padding: 8px 0;
  border-bottom: 1px solid var(--bds-border);
  margin-bottom: var(--bds-gap-sm);
}
.bds-pricing-input-row__label {
  color: var(--bds-text-2);
  font: 500 15px/1 var(--bds-font);
}
.bds-pricing-input {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  outline: none;
  padding: 0 0 2px;
  font: 800 22px/1 var(--bds-font);
  letter-spacing: -0.02em;
  color: var(--bds-text-1);
  text-align: right;
  width: 140px;
  caret-color: var(--bds-accent);
  transition: border-color var(--bds-dur-fast);
}
.bds-pricing-input::placeholder { color: var(--bds-text-3); }
.bds-pricing-input:focus { border-bottom-color: var(--bds-accent); }

.bds-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}
.bds-pricing-row__label { color: var(--bds-text-2); font: 500 13px/1 var(--bds-font); }
.bds-pricing-row__value { color: var(--bds-text-1); font: 600 14px/1 var(--bds-font); }

.bds-pricing-margin {
  margin-top: var(--bds-gap);
  padding-top: var(--bds-gap);
  border-top: 1px solid var(--bds-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bds-pricing-margin__label {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-text-3);
}
.bds-pricing-margin__value {
  font: 800 24px/1 var(--bds-font);
  letter-spacing: -0.02em;
  transition: color var(--bds-dur-fast);
}
.bds-pricing-margin__pct {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 800 11px/1 var(--bds-font);
  letter-spacing: 0.04em;
}
.bds-pricing-margin.low   { }
.bds-pricing-margin.low .bds-pricing-margin__value { color: var(--bds-hot); }
.bds-pricing-margin.low .bds-pricing-margin__pct   { background: rgba(255,105,97,0.12); color: var(--bds-hot); border: 1px solid rgba(255,105,97,0.3); }
.bds-pricing-margin.ok    { }
.bds-pricing-margin.ok .bds-pricing-margin__value  { color: var(--bds-warning); }
.bds-pricing-margin.ok .bds-pricing-margin__pct    { background: rgba(255,214,10,0.10); color: var(--bds-warning); border: 1px solid rgba(255,214,10,0.25); }
.bds-pricing-margin.great { }
.bds-pricing-margin.great .bds-pricing-margin__value { color: var(--bds-success); }
.bds-pricing-margin.great .bds-pricing-margin__pct   { background: rgba(50,215,75,0.12); color: var(--bds-success); border: 1px solid rgba(50,215,75,0.3); }

/* =================================================================
   FINANCE CARD (Task 2.11) — monthly payment
   ================================================================= */

.bds-finance-card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: var(--bds-gap-lg);
}
.bds-finance-head {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-text-2);
  margin-bottom: var(--bds-gap);
}
.bds-finance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bds-gap-sm) var(--bds-gap);
}
.bds-finance-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bds-finance-row__label {
  font: 600 9px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bds-text-3);
}
.bds-finance-row__input,
.bds-finance-row__select {
  appearance: none;
  background: var(--bds-bg-3);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r-sm);
  padding: 10px 12px;
  color: var(--bds-text-1);
  font: 600 14px/1 var(--bds-font);
  letter-spacing: -0.01em;
  outline: none;
  transition: border-color var(--bds-dur-fast);
  width: 100%;
  box-sizing: border-box;
}
.bds-finance-row__input:focus,
.bds-finance-row__select:focus { border-color: var(--bds-border-accent); }

.bds-finance-payment {
  margin-top: var(--bds-gap);
  padding-top: var(--bds-gap);
  border-top: 1px solid var(--bds-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bds-finance-payment__label {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-text-3);
}
.bds-finance-payment__value {
  font: 800 28px/1 var(--bds-font);
  letter-spacing: -0.02em;
  color: var(--bds-text-1);
}
.bds-finance-payment__per {
  font: 600 11px/1 var(--bds-font);
  color: var(--bds-text-3);
  margin-left: 4px;
}

/* =================================================================
   TRADE BUTTON (Task 2.12) — "THEY HAVE A TRADE" CTA
   ================================================================= */

.bds-trade-button {
  width: 100%;
  appearance: none;
  background: linear-gradient(135deg, rgba(200,16,46,0.16) 0%, rgba(200,16,46,0.04) 100%);
  border: 1px solid var(--bds-border-accent);
  border-radius: var(--bds-r);
  padding: 16px 20px;
  color: var(--bds-text-1);
  font: 800 14px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              box-shadow var(--bds-dur-fast) var(--bds-ease-smooth);
  min-height: 56px;
}
.bds-trade-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(200,16,46,0.22);
}
.bds-trade-button:active { transform: scale(0.97); }

.bds-trade-button__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--bds-accent), #9a0c24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(200,16,46,0.4);
}

/* =================================================================
   ASIST REVIEW CARD (Task 2.13) — auto-triggered diagnostic
   ================================================================= */

.bds-asist-card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: var(--bds-gap-lg);
  position: relative;
  overflow: hidden;
}

.bds-asist-head {
  display: flex;
  align-items: center;
  gap: var(--bds-gap-sm);
  margin-bottom: var(--bds-gap-sm);
}
.bds-asist-head__icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(200,16,46,0.18) 0%, rgba(200,16,46,0.04) 100%);
  border: 1px solid var(--bds-border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.bds-asist-head__title {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-text-2);
  flex: 1;
}
.bds-asist-head__status {
  font: 600 10px/1 var(--bds-font);
  letter-spacing: 0.06em;
  color: var(--bds-text-3);
}
.bds-asist-head__status.thinking {
  color: var(--bds-warning);
}
.bds-asist-head__status.ready { color: var(--bds-success); }

.bds-asist-head__status.thinking::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bds-warning);
  margin-right: 5px;
  animation: bds-asist-pulse 1s ease-in-out infinite;
}
@keyframes bds-asist-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.bds-asist-body {
  font: 500 13px/1.5 var(--bds-font);
  color: var(--bds-text-2);
  min-height: 44px;
}
.bds-asist-body.placeholder { color: var(--bds-text-3); }

/* =================================================================
   GENERIC CARD CONTAINER (Slice 2 cards inherit)
   ================================================================= */

.bds-feature-card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: var(--bds-gap);
  position: relative;
  overflow: hidden;
}
.bds-feature-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--bds-gap-sm);
}
.bds-feature-card__title {
  font: 700 13px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bds-text-2);
}
.bds-feature-card__action {
  color: var(--bds-text-accent);
  font: 600 11px/1 var(--bds-font);
  cursor: pointer;
  text-decoration: none;
}

/* ======================= TAB BAR ======================= */

.bds-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.95));
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 10px 6px calc(env(safe-area-inset-bottom) + 10px);
  display: flex;
  justify-content: space-around;
  z-index: 20;
  overflow: hidden;
}

.bds-tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 32px;
  background: var(--bds-accent);
  border-radius: 0 0 2px 2px;
  transition: transform var(--bds-dur) var(--bds-ease-spring);
  box-shadow: 0 2px 8px rgba(200,16,46,0.6);
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .bds-tab-indicator { transition: none; }
}

/* ======================= LEADS RAIL ======================= */

.bds-leads-rail {
  padding: 0 var(--bds-gap);
  display: flex;
  flex-direction: column;
  gap: var(--bds-gap-sm);
}

.bds-lead-card {
  background: linear-gradient(135deg, rgba(255,214,10,0.08) 0%, rgba(255,214,10,0.02) 100%);
  border: 1px solid rgba(255,214,10,0.2);
  border-radius: var(--bds-r);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              background var(--bds-dur-fast) var(--bds-ease-smooth);
  min-height: 44px;
}

.bds-lead-card:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255,214,10,0.14) 0%, rgba(255,214,10,0.04) 100%);
}

.bds-lead-card:active { transform: scale(0.98); }

.bds-lead-card.hot {
  background: linear-gradient(135deg, rgba(200,16,46,0.15) 0%, rgba(200,16,46,0.03) 100%);
  border-color: rgba(200,16,46,0.35);
}

.bds-lead-card.hot::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--bds-accent);
  box-shadow: 0 0 10px var(--bds-accent-glow);
}

.bds-lead-source {
  width: 34px; height: 34px;
  border-radius: var(--bds-r-sm);
  background: var(--bds-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.bds-lead-body { flex: 1; min-width: 0; }

.bds-lead-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bds-gap-sm);
}

.bds-lead-name {
  font: 700 15px/1.1 var(--bds-font);
  letter-spacing: -0.01em;
  color: var(--bds-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bds-lead-time {
  font: 600 10px/1 var(--bds-font);
  letter-spacing: 0.04em;
  color: var(--bds-text-3);
  flex-shrink: 0;
}

.bds-lead-card.hot .bds-lead-time { color: var(--bds-hot); }

.bds-lead-want {
  font: 400 12px/1.3 var(--bds-font);
  color: var(--bds-text-2);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ======================= CUSTOMERS CAROUSEL (Slice 1.5 — horizontal) ======================= */

.bds-customer-carousel {
  display: flex;
  gap: var(--bds-gap-sm);
  padding: 0 var(--bds-gap) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bds-customer-carousel::-webkit-scrollbar { display: none; }

.bds-customer-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              background var(--bds-dur-fast) var(--bds-ease-smooth),
              border-color var(--bds-dur-fast) var(--bds-ease-smooth);
  min-height: 126px;
}

.bds-customer-card:hover {
  transform: translateY(-2px);
  background: var(--bds-bg-3);
  border-color: var(--bds-border-strong);
}

.bds-customer-card:active { transform: scale(0.97); }

/* Active-deal variant — customer has an open deal in table 576 */
.bds-customer-card.has-deal {
  background: linear-gradient(135deg, var(--bds-accent-faint) 0%, var(--bds-bg-2) 100%);
  border-color: var(--bds-border-accent);
}

.bds-customer-card.has-deal::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--bds-accent);
}

.bds-customer-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bds-gap-sm);
}

.bds-customer-name {
  font: 700 15px/1.15 var(--bds-font);
  letter-spacing: -0.01em;
  color: var(--bds-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.bds-customer-spend {
  font: 700 13px/1 var(--bds-font);
  color: var(--bds-success);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.bds-customer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bds-gap-sm);
  margin-top: auto;
}

.bds-customer-store {
  font: 600 9px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bds-text-3);
}

.bds-customer-activity {
  font: 600 10px/1 var(--bds-font);
  color: var(--bds-text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bds-customer-card.has-deal .bds-customer-activity { color: var(--bds-accent); }

.bds-customer-tags {
  display: flex;
  gap: var(--bds-gap-xs);
  flex-wrap: wrap;
}

.bds-customer-tag {
  font: 600 9px/1 var(--bds-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bds-bg-3);
  border: 1px solid var(--bds-border);
  color: var(--bds-text-2);
  white-space: nowrap;
}

/* ======================= FOLLOW-UP QUOTES ======================= */

.bds-followup-list {
  padding: 0 var(--bds-gap);
  display: flex;
  flex-direction: column;
  gap: var(--bds-gap-sm);
}

.bds-followup-item {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-left: 3px solid var(--bds-warning);
  border-radius: var(--bds-r-sm);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bds-gap-sm);
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              background var(--bds-dur-fast) var(--bds-ease-smooth);
}

.bds-followup-item:hover {
  transform: translateX(2px);
  background: var(--bds-bg-3);
}

.bds-followup-item:active { transform: scale(0.98); }

.bds-followup-body { flex: 1; min-width: 0; }

.bds-followup-title {
  font: 600 13px/1.2 var(--bds-font);
  color: var(--bds-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bds-followup-sub {
  font: 500 11px/1 var(--bds-font);
  color: var(--bds-text-3);
  margin-top: 3px;
}

.bds-followup-age {
  font: 700 10px/1 var(--bds-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bds-warning);
  flex-shrink: 0;
}

/* ======================= QUICK LOOKUP ======================= */

#bds-quick-lookup {
  opacity: 0.82;
}

.bds-quick-lookup-wrap {
  padding: 0 var(--bds-gap);
}

.bds-quick-lookup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bds-gap-sm);
}

.bds-quick-lookup-btn {
  appearance: none;
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  color: var(--bds-text-1);
  border-radius: var(--bds-r-sm);
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  min-height: 64px;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              background var(--bds-dur-fast) var(--bds-ease-smooth),
              border-color var(--bds-dur-fast) var(--bds-ease-smooth);
}

.bds-quick-lookup-btn:hover {
  background: var(--bds-bg-3);
  border-color: var(--bds-border-strong);
}

.bds-quick-lookup-btn:active { transform: scale(0.96); }

.bds-quick-lookup-icon { font-size: 18px; line-height: 1; }

.bds-quick-lookup-label {
  font: 600 10px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bds-text-2);
}

/* ======================= TAB BAR ITEMS ======================= */

.bds-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--bds-dur-fast) var(--bds-ease-smooth);
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  position: relative;
}

.bds-tab-item.active { opacity: 1; }
.bds-tab-item.active .bds-tab-label { color: var(--bds-accent); }

.bds-tab-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bds-tab-label {
  font: 600 9px/1 var(--bds-font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Pipeline tab attention badge (Slice 1.5) — red pill with count.
   Add .glow to pulse when a hot lead or stale deal needs attention. */
.bds-tab-badge {
  position: absolute;
  top: -4px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--bds-accent);
  color: #fff;
  font: 800 10px/18px var(--bds-font);
  text-align: center;
  padding: 0 5px;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px #000, 0 0 8px rgba(200,16,46,0.7);
}
.bds-tab-badge.glow { animation: bds-badge-pulse 1.8s ease-in-out infinite; }
@keyframes bds-badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px #000,
                0 0 8px rgba(200,16,46,0.7),
                0 0 0 0 rgba(200,16,46,0.5);
  }
  50% {
    box-shadow: 0 0 0 2px #000,
                0 0 14px rgba(200,16,46,0.95),
                0 0 0 6px rgba(200,16,46,0);
  }
}

/* ======================= ONBOARDING OVERLAY ======================= */

.bds-onboarding {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bds-gap-lg);
}

.bds-onboarding__panel {
  background: var(--bds-bg-1);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r-lg);
  padding: var(--bds-gap-xl) var(--bds-gap-lg);
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: var(--bds-shadow-lg);
}

.bds-onboarding__step {
  margin-bottom: var(--bds-gap);
}

.bds-onboarding__step-label {
  color: var(--bds-text-3);
  font: 600 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bds-onboarding__step-title {
  font: 700 20px/1.2 var(--bds-font);
  letter-spacing: -0.01em;
  margin-top: var(--bds-gap-sm);
  color: var(--bds-text-1);
}

.bds-onboarding__step-body {
  color: var(--bds-text-2);
  font: 500 13px/1.5 var(--bds-font);
  margin-top: var(--bds-gap-sm);
}

.bds-onboarding__dots {
  display: flex;
  justify-content: center;
  gap: var(--bds-gap-sm);
  margin: var(--bds-gap-lg) 0;
}

.bds-onboarding__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bds-bg-4);
  transition: background var(--bds-dur-fast);
}

.bds-onboarding__dot.active {
  background: var(--bds-accent);
}

/* ======================= UTILITIES ======================= */

.hidden { display: none !important; }

.bds-bottom-spacer { height: 40px; }

/* =================================================================
   BDLS COMPATIBILITY LAYER — restyles classic class names with BDS tokens.
   Scoped to .bds-tab-panel so they only affect the 4 non-Price-It tabs.
   ================================================================= */

.bds-tab-panel {
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--bds-gap) var(--bds-gap) 120px;
  background: var(--bds-bg-0);
  min-height: 100vh;
  box-sizing: border-box;
  max-width: 100vw;
}

.bds-tab-panel * { box-sizing: border-box; }

.bds-tab-panel .card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: var(--bds-gap-lg);
  margin-bottom: var(--bds-gap);
}
.bds-tab-panel .card-title {
  font: 700 11px/1 var(--bds-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bds-text-2);
  margin: 0 0 var(--bds-gap);
}

.bds-tab-panel .form-group { display: flex; flex-direction: column; gap: 6px; }
.bds-tab-panel .form-group label {
  font: 600 11px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bds-text-3);
}
.bds-tab-panel .form-input,
.bds-tab-panel .input-field,
.bds-tab-panel .search-input,
.bds-tab-panel .filter-select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: var(--bds-bg-1);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r-sm);
  padding: 12px 14px;
  color: var(--bds-text-1);
  font: 400 15px/1.3 var(--bds-font);
  outline: none;
  -webkit-appearance: none;
  transition: border-color var(--bds-dur-fast) var(--bds-ease-smooth);
}
.bds-tab-panel .form-input:focus,
.bds-tab-panel .input-field:focus,
.bds-tab-panel .search-input:focus {
  border-color: var(--bds-accent);
}
.bds-tab-panel .form-input::placeholder,
.bds-tab-panel .input-field::placeholder,
.bds-tab-panel .search-input::placeholder { color: var(--bds-text-3); }

.bds-tab-panel .form-row { display: flex; gap: var(--bds-gap-sm); align-items: center; min-width: 0; }
.bds-tab-panel .finance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bds-gap-sm); min-width: 0; }
.bds-tab-panel .form-group { min-width: 0; }

.bds-tab-panel .btn {
  appearance: none;
  border: none;
  border-radius: var(--bds-r-sm);
  font: 700 13px/1 var(--bds-font);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 12px 18px;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              background var(--bds-dur-fast) var(--bds-ease-smooth);
}
.bds-tab-panel .btn:active { transform: scale(0.96); }
.bds-tab-panel .btn-primary { background: var(--bds-accent); color: #fff; }
.bds-tab-panel .btn-primary:hover { box-shadow: var(--bds-shadow-accent); }
.bds-tab-panel .btn-outline {
  background: transparent;
  border: 1px solid var(--bds-border);
  color: var(--bds-text-2);
}
.bds-tab-panel .btn-outline:hover { border-color: var(--bds-border-strong); color: var(--bds-text-1); }
.bds-tab-panel .btn-block { width: 100%; text-align: center; }
.bds-tab-panel .btn-sm { padding: 8px 14px; font-size: 12px; }
.bds-tab-panel .btn-link {
  background: none;
  border: none;
  color: var(--bds-text-3);
  padding: 10px;
  text-align: center;
}

.bds-tab-panel .spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--bds-border);
  border-top-color: var(--bds-accent);
  border-radius: 50%;
  animation: bds-spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes bds-spin { to { transform: rotate(360deg); } }

.bds-tab-panel .hidden { display: none; }

/* ----- TRADE TAB ----- */

.bds-tab-panel .equip-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.bds-tab-panel .type-btn {
  appearance: none;
  background: var(--bds-bg-3);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r-sm);
  color: var(--bds-text-2);
  font: 600 11px/1 var(--bds-font);
  padding: 10px 4px;
  cursor: pointer;
  text-align: center;
  transition: all var(--bds-dur-fast) var(--bds-ease-spring);
}
.bds-tab-panel .type-btn:active { transform: scale(0.94); }
.bds-tab-panel .type-btn.active {
  background: var(--bds-accent-faint);
  border-color: var(--bds-border-accent);
  color: var(--bds-accent);
}

.bds-tab-panel .condition-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.bds-tab-panel .cond-btn {
  appearance: none;
  background: var(--bds-bg-3);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r-sm);
  padding: 12px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all var(--bds-dur-fast) var(--bds-ease-spring);
}
.bds-tab-panel .cond-btn:active { transform: scale(0.94); }
.bds-tab-panel .cond-btn.active {
  background: var(--bds-accent-faint);
  border-color: var(--bds-border-accent);
}
.bds-tab-panel .cond-label { font: 700 12px/1 var(--bds-font); color: var(--bds-text-1); }
.bds-tab-panel .cond-hint { font: 500 9px/1 var(--bds-font); color: var(--bds-text-3); }

.bds-tab-panel .photo-upload-area {
  border: 2px dashed var(--bds-border);
  border-radius: var(--bds-r);
  padding: var(--bds-gap-lg);
  text-align: center;
  cursor: pointer;
  color: var(--bds-text-2);
  transition: border-color var(--bds-dur-fast) var(--bds-ease-smooth);
}
.bds-tab-panel .photo-upload-area:active { border-color: var(--bds-accent); }
.bds-tab-panel .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.bds-tab-panel .photo-grid img { width: 100%; border-radius: 8px; aspect-ratio: 1; object-fit: cover; }

.bds-tab-panel .math-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.bds-tab-panel .math-label { color: var(--bds-text-2); font: 500 13px/1 var(--bds-font); }
.bds-tab-panel .math-value { color: var(--bds-text-1); font: 600 14px/1 var(--bds-font); }
.bds-tab-panel .math-total .math-label { font-weight: 700; color: var(--bds-text-3); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.bds-tab-panel .math-total .math-value { font: 800 20px/1 var(--bds-font); }
.bds-tab-panel .math-divider { border-top: 1px solid var(--bds-border); margin: 6px 0; }
.bds-tab-panel .math-grid { background: var(--bds-bg-3); border-radius: var(--bds-r-sm); padding: 12px; }

.bds-tab-panel .gold { color: var(--bds-gold); }
.bds-tab-panel .inline-input {
  background: transparent; border: none; border-bottom: 1px solid transparent;
  outline: none; color: var(--bds-text-1); font: 600 17px/1 var(--bds-font);
  text-align: right; width: 120px; padding: 0 0 2px; caret-color: var(--bds-accent);
}
.bds-tab-panel .inline-input:focus { border-bottom-color: var(--bds-accent); }
.bds-tab-panel .inline-input.big { font: 800 22px/1 var(--bds-font); }
.bds-tab-panel .inline-input::placeholder { color: var(--bds-text-3); }

.bds-tab-panel .buyer-match {
  background: linear-gradient(135deg, rgba(50,215,75,0.12) 0%, transparent 100%);
  border: 1px solid rgba(50,215,75,0.25);
  border-radius: var(--bds-r);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--bds-gap);
}
.bds-tab-panel .buyer-match-icon { font-size: 22px; flex-shrink: 0; }
.bds-tab-panel .buyer-match-text { font: 500 12px/1.4 var(--bds-font); color: var(--bds-text-1); }

.bds-tab-panel .dept-flag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bds-tab-panel .dept-flag-btn {
  appearance: none;
  background: var(--bds-bg-3);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r-sm);
  padding: 14px 10px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
  transition: all var(--bds-dur-fast) var(--bds-ease-spring);
}
.bds-tab-panel .dept-flag-btn:active { transform: scale(0.95); }
.bds-tab-panel .dept-flag-btn.flagged { background: var(--bds-accent-faint); border-color: var(--bds-border-accent); }
.bds-tab-panel .dept-flag-label { font: 700 12px/1 var(--bds-font); color: var(--bds-text-1); }
.bds-tab-panel .dept-flag-hint { font: 500 10px/1 var(--bds-font); color: var(--bds-text-3); }

.bds-tab-panel .action-row {
  padding: var(--bds-gap);
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + 70px);
}
.bds-tab-panel .action-row .btn-primary {
  padding: 16px;
  font: 800 15px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--bds-shadow-accent);
}

.bds-tab-panel .badge-gold {
  background: rgba(198,162,76,0.14);
  color: var(--bds-gold);
  padding: 3px 8px;
  border-radius: 999px;
  font: 700 10px/1 var(--bds-font);
  margin-left: 6px;
}

/* --- Trade: Photo grid --- */
.bds-tab-panel .photo-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bds-bg-3);
}
.bds-tab-panel .photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bds-tab-panel .photo-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--bds-dur-fast);
}
.bds-tab-panel .photo-remove:active { background: rgba(200,16,46,0.6); }

/* --- Trade: Build sheet (gold accent) --- */
.bds-tab-panel .build-sheet-group {
  margin-bottom: 12px;
}
.bds-tab-panel .build-sheet-label {
  font: 700 10px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bds-gold);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(198,162,76,0.15);
}
.bds-tab-panel .option-pill {
  display: inline-block;
  padding: 4px 10px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  background: rgba(198,162,76,0.08);
  border: 1px solid rgba(198,162,76,0.18);
  color: var(--bds-text-2);
  font: 500 11px/1.3 var(--bds-font);
}

/* --- Trade: Comp cards (auction + Baker sales) --- */
.bds-tab-panel .comp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  transition: background var(--bds-dur-fast);
}
.bds-tab-panel .comp-item:first-child { border-top: none; }
.bds-tab-panel .comp-item:active { background: rgba(255,255,255,0.03); }
.bds-tab-panel .comp-thumb {
  width: 56px; height: 56px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: var(--bds-bg-3);
  border: 1px solid var(--bds-border);
  flex-shrink: 0;
}
.bds-tab-panel .comp-thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  color: var(--bds-text-3);
}
.bds-tab-panel .comp-title {
  font: 600 13px/1.2 var(--bds-font);
  color: var(--bds-text-1);
}
.bds-tab-panel .comp-meta {
  font: 500 10px/1.3 var(--bds-font);
  color: var(--bds-text-3);
  margin-top: 2px;
}
.bds-tab-panel .comp-price {
  font: 800 15px/1 var(--bds-font);
  letter-spacing: -0.02em;
  color: var(--bds-text-1);
  flex-shrink: 0;
  text-align: right;
}
.bds-tab-panel .comp-item-expanded {
  display: none;
  width: 100%;
  margin-top: 8px;
}
.bds-tab-panel .comp-item.open .comp-item-expanded { display: block; }
.bds-tab-panel .comp-full-image {
  width: 100%;
  border-radius: var(--bds-r-sm);
  border: 1px solid var(--bds-border);
}

/* --- Trade: Recon checklist --- */
.bds-tab-panel .recon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background var(--bds-dur-fast);
}
.bds-tab-panel .recon-item:first-child { border-top: none; }
.bds-tab-panel .recon-item:active { background: rgba(255,255,255,0.03); }
.bds-tab-panel .recon-check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--bds-border-strong);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--bds-dur-fast) var(--bds-ease-spring);
}
.bds-tab-panel .recon-check.checked {
  background: var(--bds-accent);
  border-color: var(--bds-accent);
}
.bds-tab-panel .recon-check.checked::after {
  content: '\2713';
  color: #fff;
  font: 700 12px/1 var(--bds-font);
}
.bds-tab-panel .recon-info { flex: 1; min-width: 0; }
.bds-tab-panel .recon-name { font: 600 13px/1.2 var(--bds-font); color: var(--bds-text-1); }
.bds-tab-panel .recon-pct { font: 500 10px/1 var(--bds-font); color: var(--bds-text-3); margin-top: 2px; }
.bds-tab-panel .recon-cost {
  font: 700 13px/1 var(--bds-font);
  color: var(--bds-text-2);
  flex-shrink: 0;
}

.bds-tab-panel .custom-recon-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dashed rgba(255,255,255,0.04);
}
.bds-tab-panel .remove-custom {
  appearance: none;
  background: rgba(255,69,58,0.12);
  border: 1px solid rgba(255,69,58,0.25);
  color: var(--bds-danger);
  width: 24px; height: 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--bds-dur-fast);
}
.bds-tab-panel .remove-custom:active { transform: scale(0.9); }

/* ----- PIPELINE TAB: Deal cards + Pipeline tracker ----- */

.bds-tab-panel .deal-card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring),
              background var(--bds-dur-fast);
}
.bds-tab-panel .deal-card:active { transform: scale(0.98); }
.bds-tab-panel .deal-card.overdue {
  border-left: 3px solid var(--bds-danger);
}

.bds-tab-panel .deal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.bds-tab-panel .deal-equip {
  font: 700 14px/1.2 var(--bds-font);
  color: var(--bds-text-1);
}
.bds-tab-panel .deal-customer {
  font: 500 11px/1.2 var(--bds-font);
  color: var(--bds-text-3);
  margin-top: 2px;
}
.bds-tab-panel .deal-status {
  font: 700 9px/1 var(--bds-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.bds-tab-panel .status-evaluated { background: var(--bds-bg-3); color: var(--bds-text-2); }
.bds-tab-panel .status-quoted { background: rgba(59,130,246,0.12); color: #3b82f6; }
.bds-tab-panel .status-offered { background: rgba(245,158,11,0.12); color: #f59e0b; }
.bds-tab-panel .status-negotiating { background: rgba(168,85,247,0.12); color: #a855f7; }
.bds-tab-panel .status-accepted { background: rgba(50,215,75,0.12); color: var(--bds-success); }
.bds-tab-panel .status-in_recon { background: rgba(200,16,46,0.12); color: var(--bds-accent); }
.bds-tab-panel .status-listed { background: rgba(59,130,246,0.12); color: #3b82f6; }
.bds-tab-panel .status-sold { background: rgba(50,215,75,0.15); color: var(--bds-success); border: 1px solid rgba(50,215,75,0.25); }
.bds-tab-panel .deal-meta {
  font: 500 11px/1.4 var(--bds-font);
  color: var(--bds-text-3);
}

.bds-tab-panel .pipeline-track {
  display: flex;
  align-items: center;
  padding: 10px 0 2px;
}
.bds-tab-panel .pipeline-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bds-bg-4);
  border: 2px solid var(--bds-border-strong);
  flex-shrink: 0;
  transition: all var(--bds-dur-fast);
}
.bds-tab-panel .pipeline-dot.done {
  background: var(--bds-success);
  border-color: var(--bds-success);
}
.bds-tab-panel .pipeline-dot.active {
  background: var(--bds-accent);
  border-color: var(--bds-accent);
  box-shadow: 0 0 8px rgba(200,16,46,0.5);
}
.bds-tab-panel .pipeline-line {
  flex: 1;
  height: 2px;
  background: var(--bds-bg-4);
}
.bds-tab-panel .pipeline-line.done { background: var(--bds-success); }
.bds-tab-panel .pipeline-labels {
  display: flex;
  justify-content: space-between;
}
.bds-tab-panel .pipeline-label {
  font: 600 8px/1 var(--bds-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bds-text-3);
  text-align: center;
  flex: 1;
}

/* Want cards */
.bds-tab-panel .want-card {
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.bds-tab-panel .want-card:first-child { border-top: none; }
.bds-tab-panel .want-equip { font: 600 13px/1.2 var(--bds-font); color: var(--bds-text-1); }
.bds-tab-panel .want-buyer { font: 500 11px/1.2 var(--bds-font); color: var(--bds-text-3); margin-top: 2px; }
.bds-tab-panel .want-budget { font: 700 12px/1 var(--bds-font); color: var(--bds-success); margin-top: 4px; }

/* ----- PIPELINE TAB (layout) ----- */

.bds-tab-panel .deals-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: var(--bds-gap);
}
.bds-tab-panel .summary-stat {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r-sm);
  padding: 14px 10px;
  text-align: center;
}
.bds-tab-panel .summary-num { font: 800 22px/1 var(--bds-font); color: var(--bds-text-1); }
.bds-tab-panel .summary-label { font: 600 10px/1 var(--bds-font); color: var(--bds-text-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.bds-tab-panel .summary-refresh { display: flex; align-items: center; justify-content: center; }

/* ----- FIND IT TAB ----- */

.bds-tab-panel .search-card {
  background: var(--bds-bg-2);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r);
  padding: var(--bds-gap);
  margin-bottom: var(--bds-gap);
}
.bds-tab-panel .find-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: var(--bds-gap-sm);
}
.bds-tab-panel .find-filters .filter-select {
  font-size: 13px;
  padding: 10px 8px;
  text-overflow: ellipsis;
}
.bds-tab-panel .find-section {
  margin-bottom: var(--bds-gap-lg);
}
.bds-tab-panel .find-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0;
  margin-bottom: var(--bds-gap-sm);
}
.bds-tab-panel .find-section-title {
  font: 700 13px/1 var(--bds-font);
  color: var(--bds-text-1);
}
.bds-tab-panel .find-section-count {
  font: 700 11px/1 var(--bds-font);
  color: var(--bds-text-3);
  letter-spacing: 0.04em;
}

/* ----- INTEL TAB ----- */

.bds-tab-panel .section-header h2 {
  font: 700 20px/1.2 var(--bds-font);
  letter-spacing: -0.01em;
  color: var(--bds-text-1);
}

/* ----- MODALS (global) ----- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal-sheet {
  background: var(--bds-bg-1);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r-lg) var(--bds-r-lg) 0 0;
  padding: var(--bds-gap-lg);
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-handle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--bds-bg-4);
  margin: 0 auto var(--bds-gap-lg);
}
.modal-title {
  font: 700 18px/1.2 var(--bds-font);
  letter-spacing: -0.01em;
  color: var(--bds-text-1);
  text-align: center;
  margin: 0 0 var(--bds-gap);
}
.modal-sheet .form-group { display: flex; flex-direction: column; gap: 6px; }
.modal-sheet .form-group label {
  font: 600 11px/1 var(--bds-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bds-text-3);
}
.modal-sheet .form-input {
  background: var(--bds-bg-1);
  border: 1px solid var(--bds-border);
  border-radius: var(--bds-r-sm);
  padding: 12px 14px;
  color: var(--bds-text-1);
  font: 400 15px/1.3 var(--bds-font);
  outline: none;
  -webkit-appearance: none;
}
.modal-sheet .form-input:focus { border-color: var(--bds-accent); }
.modal-sheet .form-input::placeholder { color: var(--bds-text-3); }
.modal-sheet .finance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bds-gap-sm); }
.modal-sheet .btn {
  appearance: none; border: none; border-radius: var(--bds-r-sm);
  font: 700 13px/1 var(--bds-font); cursor: pointer; padding: 12px 18px;
  transition: transform var(--bds-dur-fast) var(--bds-ease-spring);
}
.modal-sheet .btn:active { transform: scale(0.96); }
.modal-sheet .btn-primary { background: var(--bds-accent); color: #fff; }
.modal-sheet .btn-link { background: none; border: none; color: var(--bds-text-3); padding: 10px; }
.modal-sheet .btn-block { width: 100%; text-align: center; }