/* Section: Top 100 Retail Holder Net Flow
   24h + 7d bullish / net / bearish boxes. Owned by
   shared/dashboard/sections/retail_net_flow/. */

.section--retail-net-flow {
  margin-top: 2rem;
}

.section--retail-net-flow .section-title {
  margin-bottom: 1rem;
}

.flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

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

.flow-box {
  border: 2px solid;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
}

.flow-box--bull { border-color: rgba(34,197,94,0.5); background: linear-gradient(135deg, rgba(34,197,94,0.06), transparent); }
.flow-box--bear { border-color: rgba(239,68,68,0.5); background: linear-gradient(135deg, rgba(239,68,68,0.06), transparent); }
.flow-box--net  { border-color: rgba(212,175,55,0.5); background: linear-gradient(135deg, rgba(212,175,55,0.06), transparent); }

.flow-box .flow-icon { display:inline-block; margin-right: 0.35rem; font-weight: bold; }
.flow-box--bull .flow-icon { color: #22c55e; }
.flow-box--bear .flow-icon { color: #ef4444; }

.flow-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.flow-box-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

.flow-box .flow-tokens {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.flow-box .flow-usd {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.flow-box--bull .flow-tokens { color: #4ade80; }
.flow-box--bear .flow-tokens { color: #f87171; }
.flow-box--net  .flow-tokens.positive { color: #4ade80; }
.flow-box--net  .flow-tokens.negative { color: #f87171; }
.flow-box--net  .flow-tokens.neutral  { color: var(--text-muted); }