/* ============================================================================
   Buy-side intelligence (Finance → Buy-side) — CardCrow design-system skin.
   Restock flagship · dead-stock/reprice · overview stats. Reuses the shared
   analytics tokens (metric grid, dash cards, metaStatsTable) and only adds
   what's specific to these three screens.
   ============================================================================ */

.bsView { min-width: 0; }

.bsHead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.bsHead h2 {
  margin: 2px 0 0; font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: var(--weight-semibold); letter-spacing: -0.015em;
}
.bsHeadMeta { margin: 0; font-family: var(--font-mono); font-size: 11.5px; }

/* ---- tab bar (mirrors analyticsTabs) ---- */
.bsTabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 20px;
  border-bottom: 1px solid var(--border); padding-bottom: 14px;
}
.bsTabBtn {
  height: 34px; padding: 0 16px; border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--weight-medium);
  background: transparent; border: 1px solid transparent; color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.bsTabBtn:hover { background: var(--surface-raised); color: var(--text-primary); }
.bsTabBtn.active {
  background: var(--gold-tint); border-color: var(--gold-700);
  color: var(--gold-300); font-weight: var(--weight-semibold);
}

.bsControls { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; flex-wrap: wrap; }
.bsRankToggle { max-width: 360px; }

/* ---- tables ---- */
.bsTable td:first-child { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bsCardName { font-family: var(--font-sans); font-size: 13.5px; color: var(--text-primary); }
/* Set/expansion name shown next to the card name (harvested from CSV imports). */
.bsSet { margin-left: 7px; font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; }
.bsScore { color: var(--gold-300); font-weight: var(--weight-medium); }
.bsLoss { color: var(--seal-400); }
.bsUnit { color: var(--text-faint); font-size: 10.5px; margin-left: 1px; }

/* small inline badges (finish, condition, coverage, confidence) */
.bsBadge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: 0.04em; border-radius: var(--radius-xs); white-space: nowrap; line-height: 1;
  border: 1px solid var(--border-strong); color: var(--text-muted);
}
.bsFoil { color: var(--gold-300); background: var(--gold-tint); border-color: var(--gold-700); }
.bsCond { color: var(--info-400); border-color: rgba(110,163,216,0.4); background: var(--info-tint); }
.bsCovOut { color: var(--seal-400); border-color: var(--seal-600); background: var(--seal-tint); }
.bsCovNear { color: var(--warning-400); border-color: rgba(194,137,63,0.42); background: var(--warning-tint); }
.bsCovOk { color: var(--success-400); border-color: rgba(106,157,115,0.4); background: var(--success-tint); }
.bsSoft { color: var(--text-muted); }

.bsLinkBtn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.bsLinkBtn:hover { color: var(--gold-400); }
.bsIgnoreBtn:hover { color: var(--seal-400); }

.bsSuppressed { margin-top: 16px; }
.bsSuppressedRow td { opacity: 0.72; }

/* ---- overview ---- */
.bsMetrics { margin-bottom: 20px; }

.bsConcWrap {
  display: grid; grid-template-columns: 1fr minmax(240px, 320px); gap: 18px; align-items: center;
  margin-bottom: 14px;
}
.bsPareto {
  width: 100%; height: 120px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--edge-top);
}
.bsParetoDiag { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; fill: none; vector-effect: non-scaling-stroke; }
.bsParetoArea { fill: var(--gold-tint); }
.bsParetoLine { fill: none; stroke: var(--gold-400); stroke-width: 2; vector-effect: non-scaling-stroke; }

.bsGroups { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.bsGroupCol { flex: 1; min-width: 220px; }
.bsGroupTitle {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 4px 10px;
}
.bsGroups .metaStatsTable td { padding: 7px 10px; }
.bsGroups .metaStatsTable td:last-child { color: var(--text-muted); text-align: right; }

/* cohort realization bars */
.bsCohortTrack {
  height: 12px; background: var(--gold-tint); border: 1px solid var(--gold-700);
  border-radius: 3px; overflow: hidden; min-width: 30px;
}
.bsCohortFill { height: 100%; background: linear-gradient(var(--success-400), var(--success-500)); }

.bsHealth .bsFlagCard {
  text-align: left; cursor: pointer; font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.bsHealth .bsFlagCard:hover { border-color: var(--border-strong); }

/* ---- buy lookup (§1.3) ---- */
.bsLkSearch { position: relative; max-width: 520px; margin-bottom: 8px; }
.bsLkResults {
  margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--edge-top); overflow: hidden;
}
.bsLkResult {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; text-align: left; cursor: pointer;
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  font: inherit; color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out);
}
.bsLkResult:last-child { border-bottom: none; }
.bsLkResult:hover { background: var(--surface-raised); }
.bsLkResultId { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.bsLkNoHit { padding: 9px 12px; margin: 0; }

.bsLkHead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.bsLkTitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bsLkTitle .bsCardName { font-size: var(--text-lg); }

.bsLkPickers, .bsLkControls { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.bsLkPickers .fieldLabel, .bsLkControls .fieldLabel, .bsLkOfferRow .fieldLabel { min-width: 150px; }
.bsLkPickers .selectWrap, .bsLkControls .selectWrap { display: block; }
.bsLkPickers .selectWrap select, .bsLkControls .selectWrap select { width: 100%; }

.bsLkSection { margin-top: 20px; }
.bsLkOfferRow { max-width: 260px; margin-bottom: 4px; }
.bsLkOfferRow .field { max-width: 200px; }
.bsLkWarn { color: var(--warning-400); }

.bsLkVerdict { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.bsLkVerdictBadge { height: 24px; padding: 0 12px; font-size: var(--text-xs); letter-spacing: 0.03em; }

.bsLkBidTable td:first-child, .bsLkFloorTable td:first-child { display: table-cell; }
.bsLkBidTable .bsScore, .bsLkFloorTable .bsScore { font-family: var(--font-mono); }

@media (max-width: 720px) {
  .bsConcWrap { grid-template-columns: 1fr; }
}