/*
 * sota-bundle.css — SOTA UI System bundle entry-point
 * Trading Hub v2 — additive-only aggregator
 * Colors: --bg:#06090F --gold:#D4A853 --accent:#4CC2FF --text:#E8EDF5
 * All classes prefixed .thv2- or .sota- for isolation.
 * Include this single <link> instead of five separate stylesheet links.
 *
 * @import order (canonical 5-file spec):
 *   1. sota-glass-v2      — design tokens, glass surfaces, base layer
 *   2. sota-data-display  — tables, stat cards, metric rows
 *   3. sota-charts        — chart wrappers, axes, legends
 *   4. sota-layout        — grid system, page scaffolding, sections
 *   5. sota-interactive   — buttons, inputs, dropdowns, modals, animations
 */

/* ── 1. Design tokens (shared token root) ─────────────────────── */
/* Tokens are already defined in nexus-design-v2.css / app.min.css.
   We declare only the SOTA-specific tokens that may be absent:
   --ease-spring, --ease-snap, --ease-decelerate,
   --glass-bg, --glass-blur, --glass-border. */
:root {
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-decelerate:  cubic-bezier(0.00, 0.00, 0.20, 1.00);
  --glass-bg:         rgba(255, 255, 255, 0.04);
  --glass-blur:       blur(20px);
  --glass-border:     rgba(255, 255, 255, 0.08);
}

@import "./sota-glass-v2.css";
@import "./sota-data-display.css";
@import "./sota-charts.css";
@import "./sota-layout.css";
@import "./sota-interactive.css";

/* ── 2. Tier badge supplemental classes ──────────────────────────
   Additive companions to the existing .tier-* classes.
   Use on the <span> wrapping the tier label in screener rows.
   Pattern: <span class="tier-badge sota-tier-strong-buy">Strong Buy</span>
   ──────────────────────────────────────────────────────────────── */

.sota-tier-strong-buy {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.35);
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.15);
}

.sota-tier-buy {
  background: rgba(34, 197, 94, 0.10);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
}

.sota-tier-hold {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.30);
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
}

.sota-tier-sell {
  background: rgba(251, 146, 60, 0.12);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.30);
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
}

.sota-tier-strong-sell {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.35);
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.15);
}

/* ── 3. Scroll-reveal base state (engine applies via JS) ─────────
   Pre-hides elements before the JS IntersectionObserver kicks in.
   JS clears these inline styles once the element is in view.
   ──────────────────────────────────────────────────────────────── */

[data-reveal] {
  /* Will be overridden inline by THV2ScrollReveal — this is just a safe-start */
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ── 4. Canvas heatmap container ─────────────────────────────────
   Used by factor-heatmap.html + THV2CanvasChart.renderHeatmap.
   ──────────────────────────────────────────────────────────────── */

.sota-canvas-heatmap-wrap {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fh-panel, #0d1117);
}

.sota-canvas-heatmap-wrap canvas {
  display: block;
  width: 100%;
}

/* ── 5. Live-pulse dot companions ────────────────────────────────
   Supplement sota-live-pulse engine injected CSS.
   ──────────────────────────────────────────────────────────────── */

.sota-screener-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  margin-right: 6px;
  vertical-align: middle;
  animation: sota-live-dot-pulse 2s ease infinite;
}

@keyframes sota-live-dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sota-screener-live-dot {
    animation: none;
  }
  @keyframes sota-live-dot-pulse {
    0%, 100% { opacity: 1; }
  }
}

/* ── 6. Screener row reveal ──────────────────────────────────────
   Applied to each <tr data-reveal="fade-up"> in screener rows.
   tbody tr transitions are lightweight — only the tr's child
   content animates; border/background come from existing styles.
   ──────────────────────────────────────────────────────────────── */

.thv2-screener-row {
  /* override tbody tr transition — compose with SOTA reveal */
  transition: background 0.1s var(--ease-snap, ease-out);
}

/* ── 7. Number animator data attributes ──────────────────────────
   Elements with [data-thv2-num] will be picked up by sota-init.js
   and animated via THV2NumberAnimator on page load.
   ──────────────────────────────────────────────────────────────── */

[data-thv2-num] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}