/* ═══════════════════════════════════════════
   QUANT CLI — Retro Hacker Terminal Theme
   ═══════════════════════════════════════════ */

:root {
  --bg: #0a0a0a;
  --green: #00ff41;
  --green-dim: #00cc33;
  --amber: #ffb000;
  --cyan: #00d4ff;
  --red: #ff3333;
  --white: #e0e0e0;
  --glow: 0 0 10px rgba(0, 255, 65, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  font-family: 'Fira Code', monospace;
}

/* CRT Monitor Effect */
#crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Scanlines */
#scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  animation: scanlineFlicker 8s linear infinite;
}

@keyframes scanlineFlicker {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.9; }
  93% { opacity: 0.7; }
  94% { opacity: 0.4; }
  95% { opacity: 0.7; }
}

/* Terminal Container */
#terminal-container {
  width: 100%;
  min-height: 50vh;
  padding: 8px;
  position: relative;
}

#terminal {
  width: 100%;
  height: 100%;
}

/* xterm overrides */
.xterm {
  padding: 10px;
}

.xterm-viewport {
  background: var(--bg) !important;
}

.xterm-viewport::-webkit-scrollbar {
  width: 6px;
}

.xterm-viewport::-webkit-scrollbar-track {
  background: #111;
}

.xterm-viewport::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

.xterm-viewport::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Text glow effect */
.xterm-rows {
  text-shadow: var(--glow);
}

/* Cursor styling */
.xterm-cursor-layer .xterm-cursor-block {
  background-color: var(--green) !important;
  animation: cursorBlink 1s steps(1) infinite;
}

@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Phosphor glow on text */
.xterm-char-measure-element {
  font-family: 'Fira Code', monospace !important;
}

/* Screen flicker (subtle) */
@keyframes screenFlicker {
  0%, 100% { opacity: 1; }
  97% { opacity: 1; }
  97.5% { opacity: 0.95; }
  98% { opacity: 1; }
}

#terminal-container {
  animation: screenFlicker 4s linear infinite;
}

/* Power-on animation */
@keyframes powerOn {
  0% {
    filter: brightness(0) blur(20px);
    transform: scaleY(0.01);
  }
  30% {
    filter: brightness(2) blur(5px);
    transform: scaleY(0.01);
  }
  35% {
    filter: brightness(2) blur(5px);
    transform: scaleY(1.2);
  }
  50% {
    filter: brightness(1.5) blur(2px);
    transform: scaleY(1);
  }
  100% {
    filter: brightness(1) blur(0);
    transform: scaleY(1);
  }
}

body.booting #terminal-container {
  animation: powerOn 1.5s ease-out forwards;
}

/* Glow border around terminal */
#terminal-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 255, 65, 0.1);
  pointer-events: none;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   BACKTEST PROGRESS BAR
   ═══════════════════════════════════════════ */

#backtest-progress {
  width: 100%;
  height: 3px;
  background: rgba(0, 255, 65, 0.05);
  position: relative;
  overflow: hidden;
}

#backtest-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--green));
  box-shadow: 0 0 12px var(--green), 0 0 4px var(--cyan);
  transition: width 0.3s ease;
  animation: progressPulse 1.5s ease-in-out infinite;
}

#backtest-progress.active #backtest-progress-bar {
  animation: progressSweep 2s ease-in-out infinite, progressPulse 1.5s ease-in-out infinite;
}

@keyframes progressSweep {
  0% { width: 0%; margin-left: 0%; }
  50% { width: 40%; margin-left: 30%; }
  100% { width: 0%; margin-left: 100%; }
}

@keyframes progressPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ═══════════════════════════════════════════
   STATS HUD — Performance Dashboard
   ═══════════════════════════════════════════ */

#stats-hud {
  width: 100%;
  padding: 16px 12px;
  position: relative;
  background: linear-gradient(180deg, rgba(0,255,65,0.02) 0%, transparent 100%);
  border-top: 1px solid rgba(0, 255, 65, 0.1);
  border-bottom: 1px solid rgba(0, 255, 65, 0.1);
  overflow: hidden;
}

#stats-hud::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0, 255, 65, 0.008) 3px,
      rgba(0, 255, 65, 0.008) 4px
    );
  pointer-events: none;
  z-index: 0;
}

.stats-hud-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.stats-hud-title {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
  white-space: nowrap;
}

.stats-hud-scan-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
  position: relative;
}

.stats-hud-scan-line::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: scanSlide 3s ease-in-out infinite;
  border-radius: 2px;
}

@keyframes scanSlide {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 40px); opacity: 0; }
}

/* Return Percentage — big number, the first thing your eye catches */
.verdict {
  font-family: 'Fira Code', monospace;
  text-align: center;
  padding: 14px 24px 10px 24px;
  margin-bottom: 14px;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.verdict-pct {
  display: block;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.1;
}

.verdict-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 6px;
  opacity: 0.7;
}

.verdict-strong {
  color: #00ff41;
  background: rgba(0, 255, 65, 0.1);
  border: 2px solid rgba(0, 255, 65, 0.5);
  text-shadow: 0 0 16px rgba(0, 255, 65, 0.7), 0 0 40px rgba(0, 255, 65, 0.3);
  box-shadow: 0 0 24px rgba(0, 255, 65, 0.15), inset 0 0 20px rgba(0, 255, 65, 0.04);
}

.verdict-good {
  color: #00ff41;
  background: rgba(0, 255, 65, 0.07);
  border: 2px solid rgba(0, 255, 65, 0.4);
  text-shadow: 0 0 14px rgba(0, 255, 65, 0.6), 0 0 30px rgba(0, 255, 65, 0.2);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.1);
}

.verdict-neutral {
  color: #ffb000;
  background: rgba(255, 176, 0, 0.07);
  border: 2px solid rgba(255, 176, 0, 0.4);
  text-shadow: 0 0 14px rgba(255, 176, 0, 0.6), 0 0 30px rgba(255, 176, 0, 0.2);
  box-shadow: 0 0 20px rgba(255, 176, 0, 0.1);
}

.verdict-bad {
  color: #ff3333;
  background: rgba(255, 51, 51, 0.07);
  border: 2px solid rgba(255, 51, 51, 0.4);
  text-shadow: 0 0 14px rgba(255, 51, 51, 0.6), 0 0 30px rgba(255, 51, 51, 0.2);
  box-shadow: 0 0 20px rgba(255, 51, 51, 0.1);
}

.verdict-terrible {
  color: #ff3333;
  background: rgba(255, 51, 51, 0.12);
  border: 2px solid rgba(255, 51, 51, 0.6);
  text-shadow: 0 0 18px rgba(255, 51, 51, 0.8), 0 0 40px rgba(255, 51, 51, 0.3);
  box-shadow: 0 0 30px rgba(255, 51, 51, 0.15), inset 0 0 20px rgba(255, 51, 51, 0.04);
  animation: dangerPulse 2s ease-in-out infinite;
}

@keyframes dangerPulse {
  0%, 100% { border-color: rgba(255, 51, 51, 0.6); box-shadow: 0 0 30px rgba(255, 51, 51, 0.15); }
  50% { border-color: rgba(255, 51, 51, 1); box-shadow: 0 0 40px rgba(255, 51, 51, 0.25); }
}

.stats-hud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  position: relative;
  z-index: 1;
}

.stat-box {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 65, 0.12);
  border-radius: 3px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.stat-box:hover {
  border-color: rgba(0, 255, 65, 0.3);
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.08);
}

.stat-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
}

.stat-box-label {
  font-family: 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.stat-box-value {
  font-family: 'Fira Code', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
}

.stat-box-sub {
  font-family: 'Fira Code', monospace;
  font-size: 9px;
  color: #555;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* Stat value colors — HIGH CONTRAST for instant readability */
.stat-green { color: #00ff41; text-shadow: 0 0 12px rgba(0, 255, 65, 0.6), 0 0 4px rgba(0, 255, 65, 0.8); }
.stat-red { color: #ff3333; text-shadow: 0 0 12px rgba(255, 51, 51, 0.6), 0 0 4px rgba(255, 51, 51, 0.8); }
.stat-amber { color: #ffb000; text-shadow: 0 0 12px rgba(255, 176, 0, 0.5), 0 0 4px rgba(255, 176, 0, 0.7); }
.stat-cyan { color: #00d4ff; text-shadow: 0 0 12px rgba(0, 212, 255, 0.5), 0 0 4px rgba(0, 212, 255, 0.7); }
.stat-white { color: var(--white); text-shadow: 0 0 8px rgba(224, 224, 224, 0.4); }

/* (verdict-badge classes removed — using .verdict system above) */

/* Scan animation for loading stats */
.stat-box.scanning::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.06), transparent);
  animation: statScan 1s ease-out forwards;
}

@keyframes statScan {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ═══════════════════════════════════════════
   CHARTS — Backtest Visualization
   ═══════════════════════════════════════════ */

#charts-container {
  width: 100%;
  max-width: 100%;
  padding: 0 12px 24px 12px;
  position: relative;
  margin-top: 0;
  border-top: 2px solid rgba(0, 255, 65, 0.1);
}

.charts-header {
  text-align: center;
  padding: 20px 0 14px 0;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 176, 0, 0.4);
  user-select: none;
}

.charts-header-icon {
  opacity: 0.6;
  margin: 0 8px;
}

.charts-header-text {
  font-weight: 600;
}

.chart-panel {
  margin: 0 0 20px 0;
  border: 1px solid rgba(0, 255, 65, 0.12);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  background: #060606;
  box-shadow:
    0 0 6px rgba(0, 255, 65, 0.05),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  min-height: 300px;
}

.chart-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  border: 1px solid rgba(0, 255, 65, 0.06);
  border-radius: 3px;
  box-shadow: inset 0 0 12px rgba(0, 255, 65, 0.03);
}

/* ── HERO CHART — Price Action (the centerpiece) ── */
.chart-panel-hero {
  min-height: 600px;
  border-color: rgba(0, 255, 65, 0.25);
  box-shadow:
    0 0 20px rgba(0, 255, 65, 0.08),
    0 0 60px rgba(0, 255, 65, 0.03),
    inset 0 0 40px rgba(0, 0, 0, 0.6);
  animation: heroGlow 4s ease-in-out infinite;
  position: relative;
}

.chart-panel-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  /* Subtle digital noise texture via CSS */
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(0, 255, 65, 0.01) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.008) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(255, 176, 0, 0.005) 0%, transparent 50%);
}

@keyframes heroGlow {
  0%, 100% {
    border-color: rgba(0, 255, 65, 0.25);
    box-shadow:
      0 0 20px rgba(0, 255, 65, 0.08),
      0 0 60px rgba(0, 255, 65, 0.03),
      inset 0 0 40px rgba(0, 0, 0, 0.6);
  }
  50% {
    border-color: rgba(0, 255, 65, 0.35);
    box-shadow:
      0 0 30px rgba(0, 255, 65, 0.12),
      0 0 80px rgba(0, 255, 65, 0.05),
      inset 0 0 40px rgba(0, 0, 0, 0.6);
  }
}

/* Frequency chart panel */
.chart-panel-frequency {
  min-height: 150px;
}

.chart-title {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--green-dim);
  padding: 10px 14px 6px 14px;
  background: #060606;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
  user-select: none;
  position: relative;
  z-index: 3;
}

.equity-value {
  font-weight: 400;
  font-size: 11px;
  margin-left: 12px;
  letter-spacing: 1px;
}

#price-chart-canvas,
#equity-chart-canvas,
#frequency-chart-canvas {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Trade region canvas overlay — sits on top of price chart */
#trade-region-overlay {
  image-rendering: auto;
}

/* Override lightweight-charts container to remove any extra bg */
#price-chart-canvas > div,
#equity-chart-canvas > div,
#frequency-chart-canvas > div {
  border-radius: 0 0 3px 3px;
}

.chart-hint {
  text-align: center;
  color: #666;
  font-family: 'Fira Code', monospace;
  font-size: 10px;
  margin: 12px 0 0 0;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════
   TRADE TOOLTIP
   ═══════════════════════════════════════════ */

.trade-tooltip {
  position: fixed;
  z-index: 2000;
  background: rgba(6, 6, 6, 0.95);
  border: 1px solid rgba(0, 255, 65, 0.3);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  color: var(--white);
  pointer-events: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 255, 65, 0.1);
  max-width: 280px;
  line-height: 1.6;
  backdrop-filter: blur(4px);
}

.trade-tooltip .tt-header {
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.trade-tooltip .tt-win { color: var(--green); }
.trade-tooltip .tt-loss { color: var(--red); }
.trade-tooltip .tt-label { color: #888; }
.trade-tooltip .tt-value { color: var(--white); }