/* ══════════════════════════════════════════════════════════════
   UNIVERSAL FLOW INDICATORS  (MARKET PERSPECTIVE)
   ══════════════════════════════════════════════════════════════
   Standardized visuals for tx classification across all pages.
   Driven by `Flow.classify(tx)` in flow-helpers.js — that file is
   the source of truth; this CSS just renders what classify() returns.

   Colour rules:
     🔴 RED    — CEX DEPOSIT  (bearish: inventory moved onto exchange)
     🟢 GREEN  — CEX WITHDRAW (bullish: supply leaving the order book)
     🟠 ORANGE — cold-storage variant of either (parking, not signal)
     🟣 PURPLE — INTERNAL CEX rebalance (no market direction)
     ⚪ GREY   — neutral / unknown

   Legacy `.in` / `.out` modifiers preserved for the non-CEX fallback
   path in classify() (rare in CEX-only cache). Same colour palette.
   ══════════════════════════════════════════════════════════════ */

/* ── Color tokens (shared) ──────────────────────────────────── */
:root {
  --flow-in:        #00d17a;        /* solid green   — received */
  --flow-in-bg:     rgba(0, 209, 122, 0.10);
  --flow-in-bg-strong: rgba(0, 209, 122, 0.20);
  --flow-in-border: rgba(0, 209, 122, 0.35);

  --flow-out:       #ff4d4d;        /* solid red     — sent */
  --flow-out-bg:    rgba(255, 77, 77, 0.10);
  --flow-out-bg-strong: rgba(255, 77, 77, 0.20);
  --flow-out-border:rgba(255, 77, 77, 0.35);

  --flow-neutral:   #8fa8c8;        /* gray — unknown/internal */
  --flow-neutral-bg: rgba(143, 168, 200, 0.10);
}

/* ── Direction badge (compact, inline) ───────────────────────
   Usage:
     <span class="flow-badge in">↗ IN</span>
     <span class="flow-badge out">↘ OUT</span>
   ─────────────────────────────────────────────────────────── */
.flow-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}

.flow-badge.in {
  color:      var(--flow-in);
  background: var(--flow-in-bg);
  border:     1px solid var(--flow-in-border);
}

.flow-badge.out {
  color:      var(--flow-out);
  background: var(--flow-out-bg);
  border:     1px solid var(--flow-out-border);
}

.flow-badge.neutral {
  color:      var(--flow-neutral);
  background: var(--flow-neutral-bg);
  border:     1px solid rgba(143, 168, 200, 0.25);
}

/* ── Direction arrow icon only (no text) ─────────────────────
   Usage:
     <span class="flow-arrow in"></span>   ← shows ↗ in green
     <span class="flow-arrow out"></span>  ← shows ↘ in red
   ─────────────────────────────────────────────────────────── */
.flow-arrow {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  width:          14px;
  height:         14px;
  border-radius:  3px;
  font-size:      11px;
  font-weight:    700;
  line-height:    1;
  vertical-align: middle;
}

.flow-arrow.in {
  color:      var(--flow-in);
  background: var(--flow-in-bg);
}
.flow-arrow.in::before { content: "↗"; }

.flow-arrow.out {
  color:      var(--flow-out);
  background: var(--flow-out-bg);
}
.flow-arrow.out::before { content: "↘"; }

.flow-arrow.neutral {
  color:      var(--flow-neutral);
  background: var(--flow-neutral-bg);
}
.flow-arrow.neutral::before { content: "→"; }

/* ── Direction dot — smallest, for tight rows ───────────────
   Usage:
     <span class="flow-dot in"></span>
     <span class="flow-dot out"></span>
   ─────────────────────────────────────────────────────────── */
.flow-dot {
  display:        inline-block;
  width:          6px;
  height:         6px;
  border-radius:  50%;
  vertical-align: middle;
  margin-right:   4px;
  flex-shrink:    0;
}
.flow-dot.in      { background: var(--flow-in); }
.flow-dot.out     { background: var(--flow-out); }
.flow-dot.neutral { background: var(--flow-neutral); }

/* ── Row left accent strip (heat indicator on tables) ───────
   Usage on <tr>:
     <tr data-flow="in">  ← thin green hint on left edge
     <tr data-flow="out"> ← thin red hint on left edge

   Uses the soft --flow-*-border tokens (35% alpha) instead of the
   solid `--flow-in/out` so a screen full of rows reads as a hint
   not a hard wall — the colour cue is there at a glance, but it
   doesn't pull focus away from the cell content. 2px is enough
   width at this alpha. Hover slightly intensifies (alpha bumps
   to ~55%) so the hovered row gets a clearer affordance.
   ─────────────────────────────────────────────────────────── */
tr[data-flow="in"]  { box-shadow: inset 2px 0 0 0 var(--flow-in-border); }
tr[data-flow="out"] { box-shadow: inset 2px 0 0 0 var(--flow-out-border); }
tr[data-flow="in"]:hover  { box-shadow: inset 2px 0 0 0 rgba(0, 209, 122, 0.55); }
tr[data-flow="out"]:hover { box-shadow: inset 2px 0 0 0 rgba(255, 77, 77, 0.55); }

/* ── Flow card — for sidebar/anomaly panels ──────────────── */
.flow-card {
  border-left: 3px solid var(--flow-neutral);
  background:  transparent;
  transition:  background .15s;
}
.flow-card.in       { border-left-color: var(--flow-in); }
.flow-card.out      { border-left-color: var(--flow-out); }
.flow-card.in:hover  { background: var(--flow-in-bg); }
.flow-card.out:hover { background: var(--flow-out-bg); }

/* ── Flow text (full sentence) ───────────────────────────── */
.flow-text {
  font-family: 'JetBrains Mono', monospace;
  font-size:   11px;
  display:     inline-flex;
  align-items: center;
  gap:         6px;
}
.flow-text .from { color: var(--flow-neutral); }
.flow-text .arr  { color: var(--flow-neutral); margin: 0 2px; }
.flow-text.in  .arr  { color: var(--flow-in); }
.flow-text.out .arr  { color: var(--flow-out); }
.flow-text .to     { color: #e8f0fa; font-weight: 600; }
.flow-text.in  .to { color: var(--flow-in); }
.flow-text.out .to { color: var(--flow-out); }

/* ── Universal chip — Flow.chip(tx) ─────────────────────────
   Colour is set by Flow.classify(tx) via inline `--c` CSS variable
   AND a modifier class (.bearish / .bullish / .cold / .internal / .in
   / .out / .neutral). Market-perspective rule: red=deposit (bearish),
   green=withdraw (bullish), orange=cold, purple=internal. See
   flow-helpers.js for the full rule set.

   Don't add per-kind colour overrides outside this file. If a new
   activity type needs its own colour, extend Flow.classify() AND add
   the matching modifier class below. */
.flow-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  padding:        1px 6px;
  border-radius:  3px;
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.4px;
  font-family:    'JetBrains Mono', monospace;
  color:          var(--c, var(--flow-neutral));
  background:     color-mix(in srgb, var(--c, #8fa8c8) 14%, transparent);
  border:         1px solid color-mix(in srgb, var(--c, #8fa8c8) 35%, transparent);
  line-height:    1.5;
  white-space:    nowrap;
}
.flow-chip.in       { --c: var(--flow-in); }
.flow-chip.out      { --c: var(--flow-out); }
/* Market-perspective modifiers (output of Flow.classify): */
.flow-chip.bearish  { --c: var(--flow-out); }   /* CEX DEPOSIT — red */
.flow-chip.bullish  { --c: var(--flow-in); }    /* CEX WITHDRAW — green */
.flow-chip.cold     { --c: #ff9000; }           /* either-side cold variant */
.flow-chip.internal { --c: #9b72ff; }
.flow-chip.neutral  { --c: var(--flow-neutral); }

/* ── Legacy .cex-action — kept for inline HTML that bypasses
   Flow.chip() (e.g. ws-client toasts, tooltips). Same colour rule:
   colour reflects entity direction, not the deposit/withdraw flag. */
.cex-action {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  padding:        1px 6px;
  border-radius:  3px;
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.4px;
  font-family:    'JetBrains Mono', monospace;
  color:          var(--flow-neutral);
  background:     var(--flow-neutral-bg);
  border:         1px solid rgba(143, 168, 200, 0.25);
}
.cex-action.internal {
  color:      #9b72ff;
  background: rgba(155, 114, 255, 0.15);
  border:     1px solid rgba(155, 114, 255, 0.35);
}