/*
 * TokenPilot semantic status and badge components.
 *
 * This component layer is intentionally not loaded globally yet.
 * It depends on static/css/tokens.css from the token foundation PR and
 * will be enabled later through a controlled single-page cascade pilot.
 *
 * The larger PR #1 status layer is split into smaller follow-up PRs.
 * This first foundation covers generic status bars, chips, badges,
 * score indicators, priority pills, ampel states, decision cards and
 * comment bubbles.
 */

.statusbar{
  --stat-surface:var(--surface-card-muted);
  --stat-border:var(--border-subtle);
  --stat-menu-surface:linear-gradient(90deg, transparent, var(--surface-card-muted) 24%, var(--surface-card));
}

.stat{
  background:var(--stat-surface);
  border-color:var(--stat-border);
}

.stat.stat-menu{
  background:var(--stat-menu-surface);
}

.stat .k{
  color:var(--text-secondary);
}

.stat .v{
  color:var(--text-primary);
}

.chip,
.trade-chip,
.connector-pill,
.score-health-badge,
.rate-chip,
.effect-pill,
.suggestion-pill,
.investment-pill,
.investment-signal-pill,
.hedge-chip,
.hedge-state-pill,
.user-state,
.status-badge,
.monitoring-state,
.change,
.pos,
.neg,
.flat,
.asset-category-chip,
.hidden-rank-chip{
  color:var(--text-secondary);
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
  box-shadow:var(--shadow-inset-soft, 0 0 0 1px var(--border-subtle) inset);
}

:is(.chip,.trade-chip,.connector-pill,.score-health-badge,.rate-chip,.effect-pill,.suggestion-pill,.investment-pill,.investment-signal-pill,.hedge-chip,.hedge-state-pill,.user-state,.status-badge,.monitoring-state).good,
:is(.chip,.trade-chip,.connector-pill,.score-health-badge,.rate-chip,.effect-pill,.suggestion-pill,.investment-pill,.investment-signal-pill,.hedge-chip,.hedge-state-pill,.user-state,.status-badge,.monitoring-state).ok,
:is(.chip,.trade-chip,.connector-pill,.score-health-badge,.rate-chip,.effect-pill,.suggestion-pill,.investment-pill,.investment-signal-pill,.hedge-chip,.hedge-state-pill,.user-state,.status-badge,.monitoring-state).server,
.pos,
.chip.bias-bullish,
.chip.signal-buy,
.chip.struct-confirmed,
.chip.ai-confirmed{
  color:var(--state-success-text);
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
  box-shadow:var(--shadow-status-success-ring, 0 0 0 1px var(--state-success-ring) inset);
}

:is(.chip,.trade-chip,.connector-pill,.score-health-badge,.rate-chip,.effect-pill,.suggestion-pill,.investment-pill,.investment-signal-pill,.hedge-chip,.hedge-state-pill,.user-state,.status-badge,.monitoring-state).warn,
:is(.chip,.trade-chip,.connector-pill,.score-health-badge,.rate-chip,.effect-pill,.suggestion-pill,.investment-pill,.investment-signal-pill,.hedge-chip,.hedge-state-pill,.user-state,.status-badge,.monitoring-state).local,
.hidden-rank-chip,
.chip.struct-candidate{
  color:var(--state-warning);
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
  box-shadow:var(--shadow-status-warning-ring, 0 0 0 1px var(--state-warning-ring) inset);
}

:is(.chip,.trade-chip,.connector-pill,.score-health-badge,.rate-chip,.effect-pill,.suggestion-pill,.investment-pill,.hedge-chip,.hedge-state-pill,.user-state,.status-badge,.monitoring-state).bad,
:is(.chip,.trade-chip,.connector-pill,.score-health-badge,.rate-chip,.effect-pill,.suggestion-pill,.investment-pill,.hedge-chip,.hedge-state-pill,.user-state,.status-badge,.monitoring-state).danger,
.neg,
.chip.bias-bearish,
.chip.signal-sell{
  color:var(--state-danger);
  border-color:var(--state-danger-ring);
  background:var(--state-danger-soft);
  box-shadow:var(--shadow-status-danger-ring, 0 0 0 1px var(--state-danger-ring) inset);
}

.flat,
.chip.bias-neutral,
.chip.signal-hold,
.chip.struct-none{
  color:var(--text-secondary);
  border-color:var(--border-muted);
  background:var(--surface-card-muted);
  box-shadow:var(--shadow-status-muted-ring, 0 0 0 1px var(--border-muted) inset);
}

.asset-category-chip,
.chip.market-phase,
.chip.ai-rule{
  color:var(--accent-info);
  border-color:var(--accent-info-ring, var(--accent-primary-ring));
  background:var(--accent-info-soft);
  box-shadow:var(--shadow-status-info-ring, 0 0 0 1px var(--accent-info-ring, var(--accent-primary-ring)) inset);
}

.chip.ai-external{
  color:var(--accent-info);
  border-color:var(--accent-info-ring, var(--accent-primary-ring));
  background:var(--accent-info-soft);
  box-shadow:var(--shadow-status-info-control-ring, 0 0 0 1px var(--accent-info-ring, var(--accent-primary-ring)) inset, var(--shadow-control, none));
}

/* AI and risk chip decorative token layer. */

.chip.ai-mixed,
.chip.risk-warn{
  color:var(--state-warning);
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
  box-shadow:var(--shadow-status-warning-ring, 0 0 0 1px var(--state-warning-ring) inset);
}

.chip.ai-conflict,
.chip.risk-high{
  color:var(--state-danger);
  border-color:var(--state-danger-ring);
  background:var(--state-danger-soft);
  box-shadow:var(--shadow-status-danger-ring, 0 0 0 1px var(--state-danger-ring) inset);
}

.chip.ai-unknown{
  color:var(--text-secondary);
  border-color:var(--border-muted);
  background:color-mix(in srgb, var(--surface-card-muted) 82%, transparent);
  box-shadow:var(--shadow-status-muted-ring, 0 0 0 1px var(--border-muted) inset);
}

.chip.risk-ok{
  color:var(--state-success-text);
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
  box-shadow:var(--shadow-status-success-ring, 0 0 0 1px var(--state-success-ring) inset);
}

/* Rank and score indicator token layer. */

.rank-badge{
  color:var(--accent-primary);
  border-color:var(--accent-primary-ring);
  background:var(--accent-primary-soft);
}

.scoretext strong{
  color:var(--text-primary);
}

.scorebar{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.scorefill{
  background:linear-gradient(90deg, var(--state-danger) 0%, var(--state-warning) 48%, var(--state-success) 100%);
}

/* Watchlist priority pill token layer. */

.priority-pill{
  color:var(--text-secondary);
  border-color:var(--border-muted);
  background:color-mix(in srgb, var(--surface-card-muted) 82%, transparent);
}

.priority-kritisch{
  color:var(--state-danger-text, var(--state-danger));
  border-color:var(--state-danger-ring);
  background:var(--state-danger-soft);
}

.priority-hoch{
  color:var(--state-warning-text, var(--state-warning));
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
}

.priority-mittel{
  color:var(--accent-primary);
  border-color:var(--accent-primary-ring);
  background:var(--accent-primary-soft);
}

.priority-niedrig{
  color:var(--state-success-text);
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
}

.priority-laden{
  color:var(--text-secondary);
  border-color:var(--border-muted);
  background:color-mix(in srgb, var(--surface-card-muted) 82%, transparent);
}

/* Hero ampel status token layer. */

.hero-ampel{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.ampel-light.green{
  background:var(--state-success);
}

.ampel-light.yellow{
  background:var(--state-warning);
}

.ampel-light.red{
  background:var(--state-danger);
}

.hero-ampel.ampel-strong .ampel-light.green,
.hero-ampel.ampel-neutral .ampel-light.yellow,
.hero-ampel.ampel-risk .ampel-light.red{
  box-shadow:var(--shadow-ampel-base, 0 0 0 4px color-mix(in srgb, var(--surface-card) 18%, transparent));
}

.hero-ampel.ampel-strong .ampel-light.green{
  box-shadow:var(--shadow-ampel-success, 0 0 0 4px color-mix(in srgb, var(--surface-card) 18%, transparent), 0 0 14px color-mix(in srgb, var(--state-success) 42%, transparent));
}

.hero-ampel.ampel-neutral .ampel-light.yellow{
  box-shadow:var(--shadow-ampel-warning, 0 0 0 4px color-mix(in srgb, var(--surface-card) 18%, transparent), 0 0 14px color-mix(in srgb, var(--state-warning) 42%, transparent));
}

.hero-ampel.ampel-risk .ampel-light.red{
  box-shadow:var(--shadow-ampel-danger, 0 0 0 4px color-mix(in srgb, var(--surface-card) 18%, transparent), 0 0 14px color-mix(in srgb, var(--state-danger) 42%, transparent));
}

.hero-ampel.ampel-strong{
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
}

.hero-ampel.ampel-neutral{
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
}

.hero-ampel.ampel-risk{
  border-color:var(--state-danger-ring);
  background:var(--state-danger-soft);
}

.hero-ampel-title,
.hero-ampel-tag{
  color:var(--text-primary);
}

.hero-ampel-sub{
  color:var(--text-secondary);
}

.hero-ampel-tag{
  border-color:var(--border-subtle);
}

.hero-ampel.ampel-strong .hero-ampel-tag{
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
}

.hero-ampel.ampel-neutral .hero-ampel-tag{
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
}

.hero-ampel.ampel-risk .hero-ampel-tag{
  border-color:var(--state-danger-ring);
  background:var(--state-danger-soft);
}

/* Choice card status token layer. */

.decision-card{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.decision-title,
.decision-summary strong{
  color:var(--text-primary);
}

.decision-sub,
.decision-summary span{
  color:var(--text-secondary);
}

.decision-card.active.entry{
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
  box-shadow:var(--shadow-status-success-ring, 0 0 0 1px var(--state-success-ring) inset);
}

.decision-card.active.watch{
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
  box-shadow:var(--shadow-status-warning-ring, 0 0 0 1px var(--state-warning-ring) inset);
}

.decision-card.active.avoid{
  border-color:var(--state-danger-ring);
  background:var(--state-danger-soft);
  box-shadow:var(--shadow-status-danger-ring, 0 0 0 1px var(--state-danger-ring) inset);
}

.decision-summary{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

/* Comment bubble token layer. */

.ai-comment-bubble{
  border-color:var(--accent-primary-ring);
  background:linear-gradient(135deg, var(--accent-primary-soft), var(--accent-violet-soft, var(--accent-primary-soft)) 52%, var(--state-warning-soft)), var(--surface-card-muted);
  box-shadow:var(--shadow-panel);
}

.ai-comment-bubble::before{
  background:linear-gradient(110deg, color-mix(in srgb, var(--text-primary) 11%, transparent), transparent 32%);
}

.ai-comment-bubble p{
  color:var(--text-primary);
}

.ai-comment-pulse{
  background:var(--accent-violet, var(--accent-primary));
  box-shadow:var(--shadow-ai-comment-pulse, 0 0 0 5px color-mix(in srgb, var(--accent-violet, var(--accent-primary)) 14%, transparent), 0 0 18px color-mix(in srgb, var(--accent-violet, var(--accent-primary)) 55%, transparent));
}

.ai-comment-entry .ai-comment-pulse{
  background:var(--state-success);
  box-shadow:var(--shadow-ai-comment-entry-pulse, 0 0 0 5px color-mix(in srgb, var(--state-success) 14%, transparent), 0 0 18px color-mix(in srgb, var(--state-success) 48%, transparent));
}

.ai-comment-watch .ai-comment-pulse{
  background:var(--state-warning);
  box-shadow:var(--shadow-ai-comment-watch-pulse, 0 0 0 5px color-mix(in srgb, var(--state-warning) 14%, transparent), 0 0 18px color-mix(in srgb, var(--state-warning) 46%, transparent));
}

.ai-comment-avoid .ai-comment-pulse{
  background:var(--state-danger);
  box-shadow:var(--shadow-ai-comment-avoid-pulse, 0 0 0 5px color-mix(in srgb, var(--state-danger) 14%, transparent), 0 0 18px color-mix(in srgb, var(--state-danger) 44%, transparent));
}

/* Directional status token layer. */

.directional-battle-head strong,
.directional-side-head strong{
  color:var(--text-primary);
}

.directional-battle-edge{
  color:var(--text-primary);
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.directional-side-bar{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.directional-side-long .directional-side-bar span{
  background:linear-gradient(90deg, var(--state-success), var(--accent-primary));
}

.directional-side-short .directional-side-bar span{
  background:linear-gradient(90deg, var(--state-danger), var(--state-warning));
}

/* Highlight state token layer. */

.highlight-confirmed,
.invalid{
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
}

.highlight-candidate,
.elliott-warning-box{
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
}

.highlight-none{
  border-color:var(--border-muted);
  background:color-mix(in srgb, var(--surface-card-muted) 82%, transparent);
}

.elliott-warning-box{
  color:var(--state-warning);
}

.ok{
  color:var(--state-success-text);
}

.no{
  color:var(--state-danger);
}

/* Flow status token layer. */

.heat-row,
.heat-bar,
.table-wrap,
.flow-alert{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.heat-price strong,
.flow-alert strong{
  color:var(--text-primary);
}

.heat-meta,
.flow-alert span{
  color:var(--text-secondary);
}

.heat-bar span{
  background:linear-gradient(90deg, var(--accent-info) 0%, var(--accent-primary) 40%, var(--state-warning) 75%, var(--state-danger) 100%);
}

.flow-table th,
.flow-table td{
  border-bottom-color:var(--border-muted);
}

.flow-table th{
  color:var(--text-secondary);
  background:var(--surface-card-muted);
}

.flow-table tbody tr:hover{
  background:var(--accent-primary-soft);
}

.delta-pos{
  color:var(--state-success-text);
}

.delta-neg{
  color:var(--state-danger);
}

.delta-flat{
  color:var(--text-secondary);
}

.imbalance-yes{
  color:var(--state-warning);
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
}

.imbalance-no{
  color:var(--text-secondary);
  border-color:var(--border-muted);
  background:color-mix(in srgb, var(--surface-card-muted) 82%, transparent);
}

/* Profile status token layer. */

.profile-row,
.profile-bar{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.profile-price strong{
  color:var(--text-primary);
}

.profile-bar span{
  background:linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-info) 100%);
}

.profile-poc{
  color:var(--state-warning);
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
}

.profile-vah{
  color:var(--state-success-text);
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
}

.profile-val{
  color:var(--state-danger);
  border-color:var(--state-danger-ring);
  background:var(--state-danger-soft);
}

.profile-neutral{
  color:var(--text-secondary);
  border-color:var(--border-muted);
  background:color-mix(in srgb, var(--surface-card-muted) 82%, transparent);
}