/*
 * HobbyIQ Design System — Component Library
 * Master Rules Document: docs/UI-MODERNIZATION-MASTER-RULES.md
 *
 * Requires: design-tokens.css loaded first
 *
 * Component Index:
 *   1.  AppShell
 *   2.  SectionHeader
 *   3.  MetricCard
 *   4.  BestMoveCard
 *   5.  ListingCard
 *   6.  PortfolioRow
 *   7.  DealScoreBadge
 *   8.  PlatformBadge
 *   9.  TrendBadge
 *   10. CTAButton
 *   11. ExpandableDetails
 *   12. SkeletonBlock
 *   13. EmptyState
 *   14. ErrorState
 *   15. InputField
 *   16. SelectField
 *   17. FilterBar
 */

/* ══════════════════════════════════════════════
   1. AppShell
   Outer wrapper for every page.
   Contains: sticky nav, max-width container,
   horizontal padding.
   ══════════════════════════════════════════════ */

.app-shell {
  min-height: 100vh;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family);
}

/* Sticky nav bar */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(15, 17, 23, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.app-nav-inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding: 0 var(--padding-page-mobile);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .app-nav-inner {
    padding: 0 var(--padding-page-desktop);
  }
}

.app-nav-brand {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.app-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-nav-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-1) 0;
  transition: color 0.15s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.app-nav-link:hover,
.app-nav-link:active,
.app-nav-link.active {
  color: var(--color-text-primary);
}

/* Page container */
.app-container {
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding-left: var(--padding-page-mobile);
  padding-right: var(--padding-page-mobile);
}

@media (min-width: 768px) {
  .app-container {
    padding-left: var(--padding-page-desktop);
    padding-right: var(--padding-page-desktop);
  }
}

/* Content-width container (articles, explanations) */
.app-content {
  max-width: var(--max-width-content);
  margin: 0 auto;
}


/* ══════════════════════════════════════════════
   2. SectionHeader
   Used for every named section on every page.
   ══════════════════════════════════════════════ */

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.section-header__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.section-header__action {
  font-size: var(--font-size-xs);
  color: var(--color-info);
  text-decoration: none;
  white-space: nowrap;
}

.section-header__action:hover,
.section-header__action:active {
  text-decoration: underline;
}


/* ══════════════════════════════════════════════
   3. MetricCard
   Single key metric display.
   Usage: portfolio summary, pricing stats,
   digest performance.
   ══════════════════════════════════════════════ */

.metric-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.metric-card__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.metric-card__subtext {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* Positive / negative variants */
.metric-card--positive .metric-card__value {
  color: var(--color-success);
}
.metric-card--negative .metric-card__value {
  color: var(--color-danger);
}
.metric-card--warning .metric-card__value {
  color: var(--color-warning);
}


/* ══════════════════════════════════════════════
   4. BestMoveCard
   The recommendation component.
   MCP green ONLY when MCP ranked #1.
   ══════════════════════════════════════════════ */

.best-move-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Winner badge row */
.best-move-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.best-move-card__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Net payout — most visually dominant element */
.best-move-card__payout {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}

.best-move-card__platform {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Consequence line (shown when delta >= $10) */
.best-move-card__consequence {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Confidence strip */
.best-move-card__confidence {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.best-move-card__confidence--low {
  color: var(--color-warning);
}

/* CTA area */
.best-move-card__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* MCP green variant — ONLY when MCP is ranked #1 */
.best-move-card--mcp-first {
  border-color: rgba(34, 197, 94, 0.3);
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.06) 0%,
    var(--color-bg-card) 40%
  );
}

.best-move-card--mcp-first .best-move-card__payout {
  color: var(--color-success);
}

/* Low confidence variant */
.best-move-card--low-confidence {
  opacity: 0.7;
}

.best-move-card--low-confidence .best-move-card__payout {
  color: var(--color-warning);
}

/* Error variant */
.best-move-card--error {
  border-color: rgba(239, 68, 68, 0.3);
  background: var(--color-bg-card);
}

/* Loading variant */
.best-move-card--loading {
  pointer-events: none;
}


/* ══════════════════════════════════════════════
   5. ListingCard
   Each search result in The Hunt.
   ══════════════════════════════════════════════ */

.listing-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: border-color 0.15s ease;
}

.listing-card:hover,
.listing-card:focus-within {
  border-color: var(--color-border-subtle);
  background: var(--color-bg-elevated);
}

.listing-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
}

.listing-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.listing-card__price {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.listing-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.listing-card__true-cost {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.listing-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 4px;
}

.listing-card__link {
  font-size: var(--font-size-xs);
  color: var(--color-info);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-1);
}

.listing-card__link:hover,
.listing-card__link:active {
  text-decoration: underline;
}


/* ══════════════════════════════════════════════
   6. PortfolioRow
   Each card entry in the portfolio tracker.
   ══════════════════════════════════════════════ */

.portfolio-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.portfolio-row:last-child {
  border-bottom: none;
}

.portfolio-row__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.portfolio-row__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-row__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.portfolio-row__values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.portfolio-row__current-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.portfolio-row__gain {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.portfolio-row__gain--positive {
  color: var(--color-success);
}
.portfolio-row__gain--negative {
  color: var(--color-danger);
}
.portfolio-row__gain--neutral {
  color: var(--color-muted);
}


/* ══════════════════════════════════════════════
   7. DealScoreBadge
   Circular numbered badge, color-coded by
   score range.
   80+  = success green
   60-79 = info blue
   40-59 = warning amber
   <40  = danger red
   0    = muted gray (no data)
   ══════════════════════════════════════════════ */

.deal-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  flex-shrink: 0;
  border: 2px solid transparent;
}

.deal-score-badge--great {            /* 80+ */
  background: var(--color-success-alpha);
  color: var(--color-success);
  border-color: rgba(34, 197, 94, 0.3);
}

.deal-score-badge--good {             /* 60-79 */
  background: var(--color-info-alpha);
  color: var(--color-info);
  border-color: rgba(59, 130, 246, 0.3);
}

.deal-score-badge--fair {             /* 40-59 */
  background: var(--color-warning-alpha);
  color: var(--color-warning);
  border-color: rgba(245, 158, 11, 0.3);
}

.deal-score-badge--poor {             /* <40 */
  background: var(--color-danger-alpha);
  color: var(--color-danger);
  border-color: rgba(239, 68, 68, 0.3);
}

.deal-score-badge--none {             /* no data */
  background: rgba(107, 114, 128, 0.12);
  color: var(--color-muted);
  border-color: rgba(107, 114, 128, 0.2);
}

/* Smaller variant for inline use */
.deal-score-badge--sm {
  width: 28px;
  height: 28px;
  font-size: 10px;
}


/* ══════════════════════════════════════════════
   8. PlatformBadge
   Colored pill identifying platform.
   ══════════════════════════════════════════════ */

.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* eBay — blue */
.platform-badge--ebay {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

/* My Card Post (MCP) — green (decorative only — NOT the MCP green rule) */
.platform-badge--mcp {
  background: rgba(34, 197, 94, 0.12);
  color: #4ADE80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

/* COMC — amber */
.platform-badge--comc {
  background: rgba(245, 158, 11, 0.12);
  color: #FCD34D;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Generic / unknown */
.platform-badge--default {
  background: rgba(107, 114, 128, 0.12);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}


/* ══════════════════════════════════════════════
   9. TrendBadge
   Directional indicator.
   Up    = success green
   Down  = danger red
   Flat  = muted gray
   ══════════════════════════════════════════════ */

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.trend-badge--up {
  color: var(--color-success);
}
.trend-badge__icon--up::before  { content: '↑'; }

.trend-badge--down {
  color: var(--color-danger);
}
.trend-badge__icon--down::before { content: '↓'; }

.trend-badge--flat {
  color: var(--color-muted);
}
.trend-badge__icon--flat::before { content: '→'; }


/* ══════════════════════════════════════════════
   10. CTAButton
   Three variants only. No other variants.
   ══════════════════════════════════════════════ */

/* Base */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px var(--space-2);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  min-height: 44px;           /* 44px tap target */
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.cta-btn:disabled,
.cta-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Variant: Primary — filled, success green */
.cta-btn--primary {
  background: var(--color-success);
  color: #0F1117;             /* dark text on green for contrast */
}

.cta-btn--primary:hover:not(:disabled),
.cta-btn--primary:active:not(:disabled) {
  opacity: 0.88;
}

/* Variant: Secondary — outlined */
.cta-btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.cta-btn--secondary:hover:not(:disabled),
.cta-btn--secondary:active:not(:disabled) {
  background: var(--color-bg-elevated);
  border-color: var(--color-text-secondary);
}

/* Variant: Tertiary — text only */
.cta-btn--tertiary {
  background: transparent;
  color: var(--color-info);
  padding-left: 0;
  padding-right: 0;
}

.cta-btn--tertiary:hover:not(:disabled),
.cta-btn--tertiary:active:not(:disabled) {
  text-decoration: underline;
}

/* Full-width helper */
.cta-btn--full {
  width: 100%;
}


/* ══════════════════════════════════════════════
   11. ExpandableDetails
   Collapsible section (details/summary native).
   ══════════════════════════════════════════════ */

.expandable-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.expandable-details summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  min-height: 44px;
  user-select: none;
  -webkit-user-select: none;
}

.expandable-details summary::-webkit-details-marker {
  display: none;
}

.expandable-details summary::after {
  content: '›';
  font-size: var(--font-size-base);
  color: var(--color-muted);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  display: inline-block;
}

.expandable-details[open] summary::after {
  transform: rotate(270deg);
}

.expandable-details__body {
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}


/* ══════════════════════════════════════════════
   12. SkeletonBlock
   Loading placeholder.
   Matches shape of content it replaces.
   Use instead of spinners everywhere.
   ══════════════════════════════════════════════ */

@keyframes skeleton-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

.skeleton {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.8s ease-in-out infinite;
}

/* Preset sizes */
.skeleton--text-xs   { height: 12px; }
.skeleton--text-sm   { height: 14px; }
.skeleton--text-base { height: 16px; }
.skeleton--text-lg   { height: 24px; }
.skeleton--text-xl   { height: 32px; }

/* Semantic aliases (title, text, avatar) */
.skeleton--title  { height: 28px; border-radius: var(--radius-sm); }
.skeleton--text   { height: 16px; border-radius: var(--radius-sm); }
.skeleton--avatar { height: 40px; width: 40px; border-radius: var(--radius-full); }

.skeleton--badge     { height: 20px; width: 60px; border-radius: var(--radius-sm); }
.skeleton--circle    { border-radius: var(--radius-full); }

/* Skeleton wrapper — holds multiple skeleton blocks for a whole section */
.skeleton-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  width: 100%;
}

/* Card-shaped skeleton */
.skeleton-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.skeleton-card .skeleton {
  width: 100%;
}


/* ══════════════════════════════════════════════
   13. EmptyState
   Used when a section has no data.
   Always include: message + suggested action.
   ══════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6) var(--space-3);
  gap: var(--space-2);
}

.empty-state__icon {
  font-size: 40px;
  line-height: 1;
  opacity: 0.5;
}

.empty-state__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.empty-state__message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 280px;
  line-height: 1.5;
  margin: 0;
}

/* Compact variant for inline use */
.empty-state--compact {
  padding: var(--space-3) var(--space-2);
  gap: var(--space-1);
}

.empty-state--compact .empty-state__icon {
  font-size: 28px;
}

.empty-state--compact .empty-state__title {
  font-size: var(--font-size-sm);
}

.empty-state--compact .empty-state__message {
  font-size: var(--font-size-xs);
}


/* ══════════════════════════════════════════════
   14. ErrorState
   Used when a data fetch fails.
   Plain language. Retry where applicable.
   No raw error codes shown to users.
   ══════════════════════════════════════════════ */

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  gap: var(--space-2);
  background: var(--color-danger-alpha);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
}

.error-state__icon {
  font-size: 28px;
  line-height: 1;
}

.error-state__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.error-state__message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 300px;
  line-height: 1.5;
  margin: 0;
}

/* Compact inline variant */
.error-state--inline {
  flex-direction: row;
  text-align: left;
  padding: var(--space-1) var(--space-2);
  gap: var(--space-1);
}

.error-state--inline .error-state__title {
  font-size: var(--font-size-sm);
}


/* ══════════════════════════════════════════════
   15. InputField
   Standardized text input.
   ══════════════════════════════════════════════ */

.input-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-field__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.input-field__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-field__prefix,
.input-field__suffix {
  position: absolute;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.input-field__prefix { left: var(--space-1); }
.input-field__suffix { right: var(--space-1); }

.input-field__input {
  width: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px var(--space-1);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  min-height: 44px;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.input-field__input::placeholder {
  color: var(--color-muted);
}

.input-field__input:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* With prefix/suffix padding adjustments */
.input-field__input--has-prefix  { padding-left: var(--space-3); }
.input-field__input--has-suffix  { padding-right: var(--space-3); }

/* Error state */
.input-field--error .input-field__input {
  border-color: var(--color-danger);
}
.input-field--error .input-field__input:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.input-field__error-msg {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

.input-field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}


/* ══════════════════════════════════════════════
   16. SelectField
   Standardized dropdown.
   ══════════════════════════════════════════════ */

.select-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.select-field__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.select-field__wrap {
  position: relative;
}

.select-field__wrap::after {
  content: '▾';
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  pointer-events: none;
}

.select-field__select {
  width: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px var(--space-3) 10px var(--space-1);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  min-height: 44px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}

.select-field__select:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.select-field__select option {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}


/* ══════════════════════════════════════════════
   17. FilterBar
   Horizontal row of filter controls.
   Used in: The Hunt, Portfolio.
   ══════════════════════════════════════════════ */

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;          /* prevents clipping on scroll */
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.filter-bar__chip:hover,
.filter-bar__chip:active {
  background: var(--color-bg-elevated);
  border-color: var(--color-text-secondary);
  color: var(--color-text-primary);
}

.filter-bar__chip--active {
  background: var(--color-bg-elevated);
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

/* Separator for filter groups */
.filter-bar__sep {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════
   Utility Classes
   Minimal set — only what components need.
   ══════════════════════════════════════════════ */

/* Text colors */
.text-success { color: var(--color-success) !important; }
.text-danger  { color: var(--color-danger)  !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info    { color: var(--color-info)    !important; }
.text-muted   { color: var(--color-muted)   !important; }
.text-primary { color: var(--color-text-primary)   !important; }
.text-secondary { color: var(--color-text-secondary) !important; }

/* Visually hidden (screen reader only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ══════════════════════════════════════════════
   Phase 2 — Fee Calculator Bar Chart
   Horizontal bar visualization replacing the
   ranked text list.
   ══════════════════════════════════════════════ */

/* Bar chart container */
.fee-bar-chart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Single platform row */
.fee-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 90px;
  align-items: center;
  gap: var(--space-1);
  padding: 10px var(--space-2);
  border-radius: var(--radius-md);
  transition: background 0.15s;
}

/* Winner row — elevated background */
.fee-bar-row--winner {
  background: var(--color-bg-elevated);
}

/* Platform name cell */
.fee-bar-row__name {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fee-bar-row--winner .fee-bar-row__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* Bar + sub-labels cell */
.fee-bar-row__bar-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* The bar track */
.fee-bar-track {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

/* The bar fill — width set via inline style */
.fee-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, 0.30); /* --color-success @ 30% */
  transition: width 0.4s ease;
}
.fee-bar-row--winner .fee-bar-fill {
  background: var(--color-success); /* full opacity for winner */
}

/* Skeleton bar fill (loading state) */
.fee-bar-fill--skeleton {
  background: var(--color-bg-elevated);
}

/* Sub-labels below bar (fee amount + delta) */
.fee-bar-row__sublabels {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.fee-bar-row__fee {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.fee-bar-row__delta {
  font-size: var(--font-size-xs);
  color: rgba(239, 68, 68, 0.7);
}

/* Net payout cell */
.fee-bar-row__net {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-align: right;
  white-space: nowrap;
}
.fee-bar-row--winner .fee-bar-row__net {
  color: var(--color-success);
}

/* Loading skeletons matching bar chart shape */
.fee-bar-skeleton {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fee-bar-skeleton__row {
  display: grid;
  grid-template-columns: 120px 1fr 90px;
  align-items: center;
  gap: var(--space-1);
  padding: 10px var(--space-2);
}

/* Empty state prompt inside fee calculator */
.fee-bar-empty {
  padding: var(--space-3) var(--space-2);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* Mobile: collapse name column, stack sublabels */
@media (max-width: 540px) {
  .fee-bar-row {
    grid-template-columns: 90px 1fr 72px;
    gap: 8px;
    padding: 10px var(--space-1);
  }
  .fee-bar-row__name {
    font-size: var(--font-size-xs);
  }
  .fee-bar-row__net {
    font-size: var(--font-size-base);
  }
}


/* ══════════════════════════════════════════════
   Phase 2 — Hunt ListingCard Redesign
   New component classes for The Hunt result
   cards, Best Available panel, and Missed Deals.
   ══════════════════════════════════════════════ */

/* ── ListingCard v2 ─────────────────────────── */

.listing-card-v2 {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.listing-card-v2:hover,
.listing-card-v2:focus-within {
  border-color: var(--color-muted);
  background: var(--color-bg-elevated);
}

/* Card header: PlatformBadge left, DealScore+age right */
.listing-card-v2__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
}

.listing-card-v2__header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.listing-card-v2__age {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* Card body */
.listing-card-v2__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin: 0;
}

/* True cost block */
.listing-card-v2__cost-label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.listing-card-v2__cost {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.listing-card-v2__cost--deal {
  color: var(--color-success); /* score 80+ */
}

.listing-card-v2__breakdown {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: 2px;
}

/* One-liner deal summary (score ≥70 only) */
.listing-card-v2__deal-line {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-success);
}

/* Urgency pill badge */
.listing-card-v2__urgency {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  width: fit-content;
}

/* Card footer */
.listing-card-v2__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Comp data expandable (Pro) */
.listing-card-v2__comp-toggle {
  width: 100%;
  margin-top: 4px;
}


/* ── Best Available Panel v2 ────────────────── */

.best-available-v2 {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}

.best-available-v2__header {
  margin-bottom: var(--space-2);
}

.best-available-v2__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}

@media (max-width: 640px) {
  .best-available-v2__cards {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* Each MetricCard inside Best Available */
.best-available-v2 .metric-card {
  gap: 6px;
}

/* ── Missed Deals v2 ────────────────────────── */

/* Hide entirely when empty — section only rendered when array non-empty */
.missed-deals-v2 {
  margin-bottom: var(--space-2);
}

.missed-deals-v2__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1) 0;
}

.missed-deals-v2__item {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.5;
}
.missed-deals-v2__item:last-child {
  border-bottom: none;
}

.missed-deals-v2__platform {
  flex-shrink: 0;
}
.missed-deals-v2__name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.missed-deals-v2__price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.missed-deals-v2__savings {
  color: var(--color-success);
  white-space: nowrap;
}
.missed-deals-v2__time {
  color: var(--color-muted);
  white-space: nowrap;
}

/* ── Hunt loading skeletons ─────────────────── */

.hunt-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Matching ListingCard v2 skeleton shape */
.hunt-skeleton__card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Results grid for Hunt ──────────────────── */

.hunt-results-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}


/* ══════════════════════════════════════════════
   Phase 3 — Portfolio Dashboard Uplift
   Summary panel + PortfolioRow redesign.
   Master Rules: docs/UI-MODERNIZATION-MASTER-RULES.md
   ══════════════════════════════════════════════ */

/* ── Portfolio Summary Grid ─────────────────── */
/* 4 MetricCards in a 2×2 grid (mobile), 4-col (desktop) */

.portfolio-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

@media (min-width: 640px) {
  .portfolio-summary-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card 1: Portfolio value — xl bold */
.portfolio-summary-grid .metric-card--portfolio-value .metric-card__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

/* Card 2: Total gain/loss — xl bold (color set via --positive/--negative variants) */
.portfolio-summary-grid .metric-card--gain-loss .metric-card__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
.portfolio-summary-grid .metric-card--gain-loss .metric-card__subtext {
  font-size: var(--font-size-sm);
}

/* Card 3: Cost basis — lg semibold */
.portfolio-summary-grid .metric-card--cost-basis .metric-card__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* Card 4: Net if sold today — lg semibold success */
.portfolio-summary-grid .metric-card--net-sold .metric-card__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
}


/* ── PortfolioRow v3 ────────────────────────── */
/* Mobile: 3-col (name | value | score)
   Desktop 640+: expanded with additional detail columns */

.portfolio-row-v3 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.portfolio-row-v3:last-child {
  border-bottom: none;
}

/* Desktop: expand to show grade + cost columns */
@media (min-width: 640px) {
  .portfolio-row-v3 {
    grid-template-columns: 1fr 90px 90px 80px auto;
  }
}

/* Left: player name + card title */
.portfolio-row-v3__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.portfolio-row-v3__name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.portfolio-row-v3__player {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-row-v3__card-title {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sell opportunity pulsing dot */
@keyframes sell-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

.portfolio-row-v3__sell-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  animation: sell-pulse 2s ease-in-out infinite;
  cursor: pointer;
  position: relative;
}

/* Tooltip on hover/tap */
.portfolio-row-v3__sell-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  max-width: 240px;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

.portfolio-row-v3__sell-dot:hover::after,
.portfolio-row-v3__sell-dot:focus::after {
  opacity: 1;
}

/* Center: current value + gain/loss */
.portfolio-row-v3__value-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.portfolio-row-v3__current-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.portfolio-row-v3__gain {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.portfolio-row-v3__gain--positive { color: var(--color-success); }
.portfolio-row-v3__gain--negative { color: var(--color-danger); }
.portfolio-row-v3__gain--neutral  { color: var(--color-muted); }

/* Right: DealScoreBadge + platform advantage tag */
.portfolio-row-v3__score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.portfolio-row-v3__platform-advantage {
  font-size: var(--font-size-xs);
  color: var(--color-success);
  white-space: nowrap;
  text-align: center;
}

/* Desktop-only columns (grade + cost) — hidden on mobile */
.portfolio-row-v3__grade-col,
.portfolio-row-v3__cost-col {
  display: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.portfolio-row-v3__actions-col {
  display: none;
}

@media (min-width: 640px) {
  .portfolio-row-v3__grade-col,
  .portfolio-row-v3__cost-col,
  .portfolio-row-v3__actions-col {
    display: flex;
    align-items: center;
  }
}


/* ── Portfolio item list container ──────────── */

.portfolio-item-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-1);
}


/* ── "If sold everything today" section ─────── */

.portfolio-sold-today {
  margin-top: var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.portfolio-sold-today__header {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.portfolio-sold-today__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--space-2);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-1);
}

.portfolio-sold-today__row:last-of-type {
  border-bottom: none;
}

.portfolio-sold-today__platform {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.portfolio-sold-today__amount {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.portfolio-sold-today__delta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
  white-space: nowrap;
}

.portfolio-sold-today__delta-label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-align: right;
  padding: var(--space-1) var(--space-2) var(--space-2);
  display: block;
}


/* ── Portfolio valuation footer ─────────────── */

.portfolio-valuation-footer {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-align: right;
  margin-top: var(--space-2);
  padding-bottom: var(--space-1);
}


/* ── Portfolio skeleton matching PortfolioRow v3 ── */

.portfolio-skeleton-v3 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.portfolio-skeleton-v3__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.portfolio-skeleton-v3__row:last-child {
  border-bottom: none;
}

@media (min-width: 640px) {
  .portfolio-skeleton-v3__row {
    grid-template-columns: 1fr 90px 90px 80px auto;
  }
}

.portfolio-skeleton-v3__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portfolio-skeleton-v3__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ── PortfolioRow v3 sub-elements (Phase 3 complete set) ── */

/* Identity column (replaces __info) */
.portfolio-row-v3__identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Quantity badge next to player name */
.portfolio-row-v3__qty {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-weight: var(--font-weight-normal);
  margin-left: 3px;
}

/* Value span (in value-col) */
.portfolio-row-v3__value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.portfolio-row-v3__value--muted {
  color: var(--color-muted);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
}

/* Platform advantage tag (MCP > eBay) */
.portfolio-row-v3__platform-tag {
  font-size: var(--font-size-xs);
  color: var(--color-success);
  white-space: nowrap;
}

/* Grade label (compact) */
.portfolio-row-v3__grade {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

/* Action buttons group */
.portfolio-row-v3__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.portfolio-row-v3__view-link {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  text-decoration: none;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

.portfolio-row-v3__view-link:hover {
  background: var(--color-bg-elevated);
}

.portfolio-row-v3__delete {
  background: transparent;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--font-size-base);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.1s, background 0.1s;
}

.portfolio-row-v3__delete:hover {
  color: var(--color-danger);
  background: var(--color-bg-elevated);
}


/* ── Metric card subtext color variants (Phase 3) ── */

.metric-card__subtext--positive {
  color: var(--color-success);
}

.metric-card__subtext--negative {
  color: var(--color-danger);
}


/* ── "If sold today" section sub-elements ── */

.portfolio-sold-today__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.portfolio-sold-today__attr {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-left: auto;
}

.portfolio-sold-today__rows {
  /* rows container */
}

.portfolio-sold-today__amount--primary {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
}


/* ── List header (Phase 3: section title + filter bar row) ── */

.list-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

@media (min-width: 640px) {
  .list-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}


/* ── Skeleton card (summary skeleton card shape) ── */

.skeleton-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ── Portfolio summary card skeletons ────────── */

.portfolio-summary-skeleton {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

@media (min-width: 640px) {
  .portfolio-summary-skeleton {
    grid-template-columns: repeat(4, 1fr);
  }
}