/* ═══════════════════════════════════════════════════════════════════════════
   Glasses HUD — Design System
   File: public/app/styles.css
   Target: Meta Ray-Ban Display, 600×600 px, additive waveguide
   CONSTRAINT: Shadow, blur, and filter effects are prohibited on this display
               (ROADMAP Phase 3 key risks — additive waveguide).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── SECTION 1: CSS Custom Properties ──────────────────────────────────── */

:root {
  /* — Lifted from Snake example (facebookincubator/meta-wearables-webapp) — */
  --bg-primary:    #0a0a0f;   /* UI surfaces: header, footer, rows, banners */
  --bg-secondary:  #14141f;   /* chip backgrounds, row border, alternating rows */
  --text-primary:  #ffffff;   /* symbol, LTP values */
  --text-secondary:#a0a0b0;   /* chip labels, inactive page dots */
  --accent-warm:   #ff9f43;   /* stale indicator glyph and STALE chip */
  --radius-sm:     8px;       /* chip border-radius */

  /* — Project-specific additions (REQUIREMENTS.md DISP-03 + UI-SPEC §Color) — */
  --change-up:     #00E676;   /* positive % change text + flash background base */
  --change-down:   #FF5252;   /* negative % change text + flash background base */
  --change-zero:   #E0E0E0;   /* zero change, closed-market change text */
  --token-warn:    #FFD600;   /* TOKEN EXPIRED / TOKEN MISSING banner title */
}

/* ─── SECTION 2: Reset + Body ────────────────────────────────────────────── */

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

/* DISP-01: body background is #000000 — renders transparent on additive waveguide */
/* DO NOT change to var(--bg-primary) — black == transparent on this display */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #000000;
  width: 600px;
  height: 600px;
  overflow: hidden;
  color: var(--text-primary);
}

/* ─── SECTION 3: .header ─────────────────────────────────────────────────── */

.header {
  height: 40px;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

/* ─── SECTION 4: .chip ───────────────────────────────────────────────────── */
/* Used for: market-status chip (OPEN/CLOSED/PRE) + network-status chip       */

.chip {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.0;
  background: var(--bg-secondary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

/* Network-status chip modifier: STALE global state */
.chip.stale {
  color: var(--accent-warm);
}

/* Network-status chip modifier: OFFLINE state */
.chip.offline {
  color: var(--change-zero);
}

/* ─── SECTION 5: .row — base, flash, closed-market modifiers ────────────── */

.row {
  height: 88px;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--bg-secondary);
  /* governs flash fade-back to --bg-primary (CONTEXT.md D-03, RESEARCH.md Pattern 3) */
  transition: background 50ms ease-out;
}

/* Flash classes — applied by JS for 200ms then removed (DISP-05, Pattern 3) */
.row.flash-up {
  background: rgba(0, 230, 118, 0.25);
}

.row.flash-down {
  background: rgba(255, 82, 82, 0.25);
}

/* D-04: closed-market row — entire row dimmed at 60% opacity */
.row.market-closed {
  opacity: 0.6;
}

/* Pitfall 6 override: change color forced to grey when market closed,
   regardless of sign (separate specificity from .change.up / .change.down) */
.row.market-closed .change {
  color: var(--change-zero);
}

/* ─── SECTION 6: Row internal columns ───────────────────────────────────── */

/* Left column: symbol + stale indicator glyph stacked */
.row-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.symbol {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

/* Stale indicator: `!` glyph — hidden by default, shown via .row.row-stale */
.stale-indicator {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-warm);
  display: none;
}

/* Show stale indicator when JS adds .row-stale to the row element (DISP-07) */
.row.row-stale .stale-indicator {
  display: inline;
}

/* Right column: LTP + change percentage stacked, right-aligned */
.row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.ltp {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

.change {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}

/* Signed % change text colors (DISP-03) */
.change.up {
  color: var(--change-up);
}

.change.down {
  color: var(--change-down);
}

.change.zero {
  color: var(--change-zero);
}

/* ─── SECTION 7: .footer + .page-dot ────────────────────────────────────── */

.footer {
  height: 32px;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* D-07: hide footer entirely when totalPages <= 1 (JS applies this class) */
.footer.hidden {
  display: none;
}

/* Page indicator dots (DISP-10) */
.page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);  /* inactive state */
}

/* Current page dot */
.page-dot.active {
  background: var(--text-primary);
}

/* ─── SECTION 8: .banner ─────────────────────────────────────────────────── */
/* Full-screen overlay for TOKEN EXPIRED and TOKEN MISSING states (DISP-08)   */

.banner {
  width: 600px;
  height: 600px;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Banner title: TOKEN EXPIRED / TOKEN MISSING — yellow warning text */
.banner-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--token-warn);
}

/* Banner body: Re-login on server / Add ?token= to URL */
.banner-body {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
}