/* ═══════════════════════════════════════════════════════════
   AXION TERMINAL — Capital Flow Command Center v2
   File-based pipeline with LIVE/STALE/OFFLINE badges
   ═══════════════════════════════════════════════════════════ */

:root {
  --cf-bg: #0B0B0B; --cf-surface: #111111; --cf-surface-2: #1A1A1A;
  --cf-border: #1E1E1E; --cf-border-2: #2A2A2A;
  --cf-lime: #C6E310; --cf-green: #2ed573; --cf-red: #ff4757;
  --cf-amber: #ffa502; --cf-cyan: #00E5FF;
  --cf-t1: #E8E8E8; --cf-t2: #8A8A8A; --cf-t3: #505050;
  --cf-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --cf-sans: 'Inter', -apple-system, sans-serif;
}

.axion-capflow { width:100%; min-height:100%; background:var(--cf-bg); display:flex; flex-direction:column; font-family:var(--cf-sans); color:var(--cf-t1); overflow-y:auto; overflow-x:hidden; }

.cf-grid-top { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--cf-border); border:1px solid var(--cf-border); }

.cf-panel { background:var(--cf-surface); padding:14px 16px; position:relative; overflow:hidden; min-height:240px; }

.cf-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--cf-border); flex-wrap:wrap; gap:4px; }

.cf-panel-title { font-family:var(--cf-mono); font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--cf-t2); }

/* ── Badges ── */
.cf2-badge { font-family:var(--cf-mono); font-size:7px; padding:2px 8px; letter-spacing:0.5px; border:1px solid; display:inline-block; }
.cf2-badge-live { color:var(--cf-lime); border-color:rgba(198,227,16,0.3); background:rgba(198,227,16,0.06); animation:cf-pulse 2s ease-in-out infinite; }
.cf2-badge-stale { color:var(--cf-amber); border-color:rgba(255,165,2,0.3); background:rgba(255,165,2,0.06); }
.cf2-badge-offline { color:var(--cf-red); border-color:rgba(255,71,87,0.3); background:rgba(255,71,87,0.06); }
@keyframes cf-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.cf2-ts { font-family:var(--cf-mono); font-size:8px; color:var(--cf-t3); margin-left:4px; }
.cf2-body { padding:4px 0; }
.cf2-empty { font-family:var(--cf-mono); font-size:10px; color:var(--cf-t3); text-align:center; padding:40px 0; }

/* ── Bar chart rows ── */
.cf2-bar-row { display:grid; grid-template-columns:90px 1fr 60px; align-items:center; gap:6px; padding:3px 0; }
.cf2-bar-row:hover { background:var(--cf-surface-2); }
.cf2-bar-label { font-family:var(--cf-mono); font-size:9px; color:var(--cf-t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf2-bar-track { display:flex; height:6px; background:var(--cf-surface-2); position:relative; }
.cf2-bar-left { width:50%; display:flex; justify-content:flex-end; }
.cf2-bar-right { width:50%; }
.cf2-bar-center { width:1px; background:#2a2a2a; flex-shrink:0; }
.cf2-bar-fill { height:100%; transition:width 0.4s ease; min-width:1px; }
.cf2-bar-val { font-family:var(--cf-mono); font-size:9px; text-align:right; font-weight:600; }

/* ── Sector Heatmap ── */
.cf2-heatmap { display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); gap:2px; }
.cf2-hm-cell { padding:8px 6px; text-align:center; border:1px solid rgba(255,255,255,0.03); transition:transform 0.15s; }
.cf2-hm-cell:hover { transform:scale(1.03); z-index:1; }
.cf2-hm-sym { font-family:var(--cf-mono); font-size:10px; color:var(--cf-t1); font-weight:600; }
.cf2-hm-name { font-family:var(--cf-mono); font-size:7px; color:var(--cf-t3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf2-hm-val { font-family:var(--cf-mono); font-size:11px; font-weight:700; margin-top:3px; }
.cf2-heatmap-sm { grid-template-columns:repeat(auto-fill, minmax(65px, 1fr)); }
.cf2-hm-sm { padding:5px 4px; }

/* ── Panel footer ── */
.cf-panel-footer { font-family:var(--cf-mono); font-size:8px; color:var(--cf-t3); border-top:1px solid var(--cf-border); margin-top:8px; padding-top:6px; }