/* ═══════════════════════════════════════════════════════════════════════════
   AVERO — components.css
   Reusable component classes lifted from the production console (style.css).
   Requires colors_and_type.css to be loaded first.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GLASS PANELS — 3 depth tiers ─────────────────────────────────────────── */
.glass-panel {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-card) saturate(1.08);
  -webkit-backdrop-filter: var(--blur-card) saturate(1.08);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  transition: box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
.glass-panel:hover { box-shadow: var(--shadow-glass-hover); border-color: var(--glass-border-glow); }
.glass-panel-glow {
  background: var(--glass-bg-glow);
  backdrop-filter: var(--blur-card) saturate(1.1);
  -webkit-backdrop-filter: var(--blur-card) saturate(1.1);
  border: 1px solid var(--glass-border-glow);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass-glow);
}

/* ── CARD — the beating heart of the UI ───────────────────────────────────── */
.card {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-card) saturate(1.15);
  -webkit-backdrop-filter: var(--blur-card) saturate(1.15);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-glass);
  position: relative; z-index: 1;
  transition: border-color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-fast);
}
.card:hover { transform: translateY(-1px); box-shadow: var(--shadow-glass-hover); border-color: rgba(0,245,255,0.15); }
/* gradient top hairline */
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(0,245,255,0.25) 50%, transparent 95%);
  border-radius: var(--r-lg) var(--r-lg) 0 0; pointer-events: none; z-index: 2;
}
.card.glow   { background: var(--glass-bg-glow); border-color: var(--glass-border-glow); box-shadow: var(--shadow-glass-glow); }
.card.deep {
  backdrop-filter: var(--blur-deep) saturate(1.2);
  box-shadow: 0 16px 48px rgba(0,0,0,0.60), 0 0 0 0.5px rgba(0,245,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.30);
}
.card.bracketed { border-left: 2px solid var(--accent); border-radius: 0 var(--r-lg) var(--r-lg) 0; }

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border); gap: var(--sp-4);
}
.card-title {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint);
}
.card-title .index { color: var(--accent); font-size: 9px; letter-spacing: 0.8px; }

/* ── METRIC CARD — premium stat tile ──────────────────────────────────────── */
.metric-card {
  background: var(--glass-bg-metric);
  backdrop-filter: var(--blur-sm) saturate(1.1);
  -webkit-backdrop-filter: var(--blur-sm) saturate(1.1);
  border: 1px solid var(--glass-border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-glass-metric);
  transition: border-color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-fast);
}
.metric-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--mc-accent, var(--accent)); opacity: 0.55; border-radius: 2px 2px 0 0; z-index: 2;
}
.metric-card:hover { border-color: rgba(0,245,255,0.16); transform: translateY(-1px); }
.metric-card .mc-label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); }
.metric-card .mc-value { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.metric-card .mc-value.lg { font-size: var(--fs-3xl); }
.metric-card .mc-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.stat-accent-green  { --mc-accent: var(--green); }
.stat-accent-red    { --mc-accent: var(--red); }
.stat-accent-amber  { --mc-accent: var(--amber); }
.stat-accent-cyan   { --mc-accent: var(--cyan); }
.stat-accent-violet { --mc-accent: var(--violet); }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-7); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  transition: background var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast);
  cursor: pointer; border: 1px solid var(--border); background: rgba(0,245,255,0.05); color: var(--text-faint);
}
.btn:hover, .btn[data-active="true"] { background: rgba(0,245,255,0.12); color: var(--accent); border-color: var(--border2); }
.btn:active { transform: scale(0.97); }
.btn-cyan { background: rgba(0,245,255,0.12); color: var(--cyan); border: 1px solid var(--border2); }
.btn-cyan:hover { background: rgba(0,245,255,0.20); box-shadow: 0 0 16px rgba(0,245,255,0.15); }
.btn-danger { background: rgba(255,51,102,0.12); color: var(--red); border: 1px solid rgba(255,51,102,0.22); }
.btn-danger:hover { background: rgba(255,51,102,0.22); box-shadow: 0 0 16px var(--red-glow); }
.btn-start { background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.4); color: var(--green); padding: 5px 14px; border-radius: 6px; }
.btn-start:hover { background: rgba(0,255,136,0.2); }
.btn-stop { background: rgba(255,51,102,0.08); border: 1px solid rgba(255,51,102,0.4); color: var(--red); padding: 5px 14px; border-radius: 6px; }
.btn-stop:hover { background: rgba(255,51,102,0.2); }
.btn-estop {
  padding: 7px 18px; border-radius: 8px; background: rgba(239,68,68,0.14);
  border: 1.5px solid rgba(239,68,68,0.7); color: var(--red);
  font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; min-width: 90px;
}
.btn-estop:hover { background: rgba(239,68,68,0.3); }
.btn-primary { background: var(--cyan); border: none; color: #020408; padding: 12px 28px; border-radius: 8px;
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.5px; cursor: pointer; }
.btn-primary:hover { background: #33f7ff; }

/* ── INPUTS ───────────────────────────────────────────────────────────────── */
.glass-input {
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  border-radius: var(--r-sm); color: var(--text);
  font-family: var(--font-mono); font-size: var(--fs-sm); padding: 6px 10px; outline: none;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.glass-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,245,255,0.1); }
.glass-input::placeholder { color: var(--text-faint); }
.glass-select {
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  border-radius: var(--r-sm); color: var(--text-dim);
  font-family: var(--font-mono); font-size: var(--fs-sm); padding: 4px 8px; outline: none; cursor: pointer;
}
.range-slider { width: 100%; height: 4px; appearance: none; -webkit-appearance: none; background: var(--border); border-radius: 2px; outline: none; cursor: pointer; }
.range-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 6px var(--accent-glow); cursor: pointer; }

/* ── LED ──────────────────────────────────────────────────────────────────── */
.led {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow);
  animation: pulse-glow 2s ease-in-out infinite; flex-shrink: 0; vertical-align: middle;
}
.led.green  { background: var(--green);  box-shadow: 0 0 6px var(--green-glow); }
.led.red    { background: var(--red);    box-shadow: 0 0 6px var(--red-glow); }
.led.amber  { background: var(--amber);  box-shadow: 0 0 6px var(--amber-glow); }
.led.violet { background: var(--violet); box-shadow: 0 0 6px var(--violet-glow); }
.led.off    { background: var(--text-faint); box-shadow: none; animation: none; opacity: 0.4; }

/* ── BADGE / PILL ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: 2px 6px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-bold);
  letter-spacing: 0.6px; text-transform: uppercase;
}
.badge-buy   { background: rgba(0,255,136,0.12); color: var(--green); border: 1px solid rgba(0,255,136,0.2); }
.badge-sell  { background: rgba(255,51,102,0.12); color: var(--red); border: 1px solid rgba(255,51,102,0.2); }
.badge-hold  { background: rgba(0,245,255,0.08); color: var(--accent-secondary); border: 1px solid var(--border); }
.badge-long  { background: rgba(0,255,136,0.10); color: var(--green); }
.badge-short { background: rgba(255,51,102,0.10); color: var(--red); }

/* ── CHIP / TAG ───────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-bold);
  letter-spacing: 0.6px; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--text-faint); background: var(--bg-glass);
}
.chip.cyan   { color: var(--cyan);   border-color: rgba(0,245,255,0.3);  background: rgba(0,245,255,0.07); }
.chip.green  { color: var(--green);  border-color: rgba(0,255,136,0.3);  background: rgba(0,255,136,0.07); }
.chip.red    { color: var(--red);    border-color: rgba(255,51,102,0.3); background: rgba(255,51,102,0.07); }
.chip.amber  { color: var(--amber);  border-color: rgba(255,170,0,0.3);  background: rgba(255,170,0,0.07); }
.chip.violet { color: var(--violet); border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.07); }

/* ── BOT STATUS PILL ──────────────────────────────────────────────────────── */
.bot-status-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.bot-status-pill.live  { background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.3); color: var(--green); }
.bot-status-pill.idle  { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text-faint); }
.bot-status-pill.error { background: rgba(255,51,102,0.1); border: 1px solid rgba(255,51,102,0.3); color: var(--red); }

/* ── PROGRESS BAR ─────────────────────────────────────────────────────────── */
.bar { height: 4px; border-radius: var(--r-pill); background: rgba(0,245,255,0.08); overflow: hidden; position: relative; }
.bar .fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--accent-glow)); box-shadow: 0 0 6px var(--accent-glow); transition: width 600ms var(--ease-out); }

/* ── POSITION TABLE ───────────────────────────────────────────────────────── */
.pos-table { width: 100%; border-collapse: collapse; }
.pos-table th { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); }
.pos-table td { font-family: var(--font-mono); font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid rgba(0,245,255,0.04); color: var(--text); font-variant-numeric: tabular-nums; }
.pos-table tr:hover td { background: rgba(0,245,255,0.03); }

/* ── ACTIVITY LOG ─────────────────────────────────────────────────────────── */
.log-line { display: grid; grid-template-columns: 60px 40px 1fr; gap: var(--sp-3); padding: 3px 0; font-family: var(--font-mono); font-size: var(--fs-xs); border-bottom: 1px solid rgba(0,245,255,0.04); line-height: 1.4; }
.log-ts { color: var(--text-faint); }
.log-ok { color: var(--green); } .log-warn { color: var(--amber); } .log-info { color: var(--accent-secondary); } .log-err { color: var(--red); }

/* ── TABS ─────────────────────────────────────────────────────────────────── */
.tab {
  background: none; border: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-size: 11px; font-weight: 700; padding: 10px 14px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  border-bottom: 2px solid transparent; position: relative;
  transition: color .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.tab:hover { background: rgba(0,245,255,0.04); color: var(--text); }
.tab[data-active="true"] { color: var(--cyan); border-bottom-color: var(--cyan); text-shadow: 0 0 20px rgba(0,245,255,0.15); }

/* ── MARKET PILL ──────────────────────────────────────────────────────────── */
.market-pill { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); color: var(--state); text-transform: uppercase; }

/* ── TOASTS ───────────────────────────────────────────────────────────────── */
.toast { padding: 8px 16px; border-radius: 6px; font-size: 11px; font-family: var(--font-mono); font-weight: 500; backdrop-filter: blur(8px); max-width: 380px; line-height: 1.4; }
.toast-success { background: rgba(0,255,136,0.12); border: 1px solid rgba(0,255,136,0.3); color: var(--green); }
.toast-error   { background: rgba(255,51,102,0.12); border: 1px solid rgba(255,51,102,0.3); color: var(--red); }
.toast-info    { background: rgba(0,245,255,0.10); border: 1px solid rgba(0,245,255,0.2); color: var(--cyan); }

/* ── KEYFRAMES ────────────────────────────────────────────────────────────── */
@keyframes pulse-glow { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── SIGNAL ACCENT UTILITIES — vibrant live-indicator palette ─────────────── */
.text-signal-blue   { color: var(--signal-blue); }
.text-signal-cyan   { color: var(--signal-cyan); }
.text-signal-green  { color: var(--signal-green); }
.text-signal-pink   { color: var(--signal-pink); }
.text-signal-orange { color: var(--signal-orange); }
.text-signal-purple { color: var(--signal-purple); }
.glow-signal-blue   { text-shadow: 0 0 12px var(--signal-blue-glow); }
.glow-signal-cyan   { text-shadow: 0 0 12px var(--signal-cyan-glow); }
.glow-signal-green  { text-shadow: 0 0 12px var(--signal-green-glow); }
.glow-signal-pink   { text-shadow: 0 0 12px var(--signal-pink-glow); }
.glow-signal-orange { text-shadow: 0 0 12px var(--signal-orange-glow); }
.glow-signal-purple { text-shadow: 0 0 12px var(--signal-purple-glow); }
/* signal status dot — drop a class on a 7px round span */
.dot-signal { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; }
.dot-signal.blue   { background: var(--signal-blue);   box-shadow: 0 0 6px var(--signal-blue-glow); }
.dot-signal.cyan   { background: var(--signal-cyan);   box-shadow: 0 0 6px var(--signal-cyan-glow); }
.dot-signal.green  { background: var(--signal-green);  box-shadow: 0 0 6px var(--signal-green-glow); }
.dot-signal.pink   { background: var(--signal-pink);   box-shadow: 0 0 6px var(--signal-pink-glow); }
.dot-signal.orange { background: var(--signal-orange); box-shadow: 0 0 6px var(--signal-orange-glow); }
.dot-signal.purple { background: var(--signal-purple); box-shadow: 0 0 6px var(--signal-purple-glow); }