/* FILE: viewer/viewer.css - minimalist 2D pixel-art mining theme */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --bg: #100c08;
  --bg-panel: #1a140d;
  --bg-panel-2: #221a10;
  --border: #4a3c2c;
  --border-light: #6b5842;
  --text: #e9dcc4;
  --text-dim: #a8977a;
  --gold: #f4c430;
  --green: #6fbf6f;
  --red: #d9705a;
  --blue: #6f9bd9;
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --font-body: 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
  image-rendering: pixelated;
}

/* body is the "stage" - it centers the fixed-size widget within
   whatever container/iframe/window it's given (letterboxing on
   whichever axis has spare room), so the widget itself never has to
   reflow its own internal proportions to different embed sizes - see
   #nex4r-root below and fitStage() in viewer.js. */
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fixed reference canvas (default 1000x640, landscape - see
   window.NEX4R_CONFIG's stageWidth/stageHeight in CONFIG.md to change
   it). Landscape, not portrait: the cave's own scene is natively very
   wide (1600:480 - see .nex4r-cave-mount below), so a narrow portrait
   stage starves it of the width it needs and it renders tiny even with
   spare height to give. Every panel below
   is laid out against THIS fixed size, always - never against the
   actual window/iframe size - so the chart, the cave, and every table
   keep the exact same proportions to each other at every embed size.
   viewer.js's fitStage() applies a single uniform `transform: scale()`
   to this element to fit it into the real container, recomputed on
   resize; it never touches width/height, so nothing inside ever
   reflows or gets individually squeezed the way flexbox-per-viewport
   sizing would. */
#nex4r-root {
  display: flex;
  flex-direction: column;
  width: 1000px;
  height: 640px;
  flex-shrink: 0;
  transform-origin: center center;
  border: 3px solid var(--border-light);
  background: var(--bg);
}

/* ---------------------------------------------------------------- */
/* Header */
/* ---------------------------------------------------------------- */

.nex4r-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-bottom: 3px solid var(--border);
  font-family: var(--font-pixel);
  font-size: 10px;
  flex-shrink: 0;
}

.nex4r-title {
  color: var(--gold);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nex4r-status {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.nex4r-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 0 2px var(--bg-panel-2);
}

.nex4r-status-dot.live { background: var(--green); box-shadow: 0 0 6px var(--green); }
.nex4r-status-dot.updating { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.nex4r-status-dot.offline { background: var(--red); box-shadow: 0 0 6px var(--red); }

.nex4r-status-label { font-size: 8px; }

/* ---------------------------------------------------------------- */
/* Body / screens */
/* ---------------------------------------------------------------- */

/* No scrolling anywhere in the app shell - .nex4r-body and every screen
   are flex containers that DIVIDE whatever height they're given among
   their panels (flex-grow on the panel that should absorb extra/short
   space), rather than growing past it and relying on a scrollbar. The
   one deliberate exception is the trade-history LIST itself
   (.nex4r-table-scroll below), which gets its own small contained
   scroll region within its fixed panel - the app shell still never
   scrolls, only that one internal list can, exactly like a native app's
   list view. */
.nex4r-body {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
  min-height: 0;
}

.nex4r-screen { display: none; }
.nex4r-screen.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}

.nex4r-symbol-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--text);
  flex-shrink: 0;
}

.nex4r-symbol-price { color: var(--gold); }

.nex4r-panel {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  padding: 8px;
  flex-shrink: 0;
  min-height: 0;
}

.nex4r-panel-title {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* Chart panel - takes whatever height is left AFTER the cave panel
   below claims its own height (that panel sizes itself off the cave's
   true aspect ratio, not a flex share - see .nex4r-cave-panel). */
.nex4r-chart-panel { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
.nex4r-chart-wrap { position: relative; width: 100%; flex: 1 1 0; min-height: 0; }
#nex4r-chart-canvas { width: 100%; height: 100%; display: block; background: #0b0805; }

.nex4r-position-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  margin-top: 6px;
  flex-shrink: 0;
}

.nex4r-position-strip.inactive { color: var(--text-dim); }

.nex4r-tag {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-pixel);
  font-size: 8px;
  border: 1px solid currentColor;
}

.nex4r-tag.buy { color: var(--green); }
.nex4r-tag.sell { color: var(--red); }

.nex4r-profit.positive { color: var(--green); }
.nex4r-profit.negative { color: var(--red); }
.nex4r-live-pnl-group { display: flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }
.nex4r-live-pnl-label { font-family: var(--font-pixel); font-size: 8px; color: var(--text-dim); }

/* Cave (rendered by assets/pixel/cave_bundle.js - the live app's own
   component). Sized by its OWN true aspect ratio (1600:480, same as the
   live app's own .cave-dashboard-wrap rule in the copied cave.css) at
   full stage width, rather than being squeezed into a leftover flex
   share - that was the actual reason the cave was "hard to see" in the
   old portrait layout: at a narrow stage width, a width-matched cave
   renders tiny even with plenty of spare height. Landscape stage
   dimensions (see #nex4r-root) give this far more width to work with,
   so the cave now renders close to full native clarity. The chart panel
   above (flex: 1 1 0) simply absorbs whatever height this leaves. */
.nex4r-cave-panel { flex: 0 0 auto; display: flex; flex-direction: column; padding: 8px 8px 6px; }
.nex4r-cave-mount {
  width: 100%;
  aspect-ratio: 1600 / 480;
  background: #0e0905;
  overflow: hidden;
}

/* Account */
.nex4r-kv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nex4r-kv-table td { padding: 6px 4px; border-bottom: 1px dashed var(--border); }
.nex4r-kv-table td:first-child { color: var(--text-dim); }
.nex4r-kv-table td:last-child { text-align: right; color: var(--gold); font-family: var(--font-pixel); font-size: 10px; }
.nex4r-kv-table td.pos { color: var(--green) !important; }
.nex4r-kv-table td.neg { color: var(--red) !important; }

/* Trade history - the ONE contained internal scroll region in the whole
   app (see the .nex4r-body comment above): this panel gets whatever
   space is left after the compact account/performance panels above it,
   and .nex4r-table-scroll scrolls WITHIN that fixed space so an
   unbounded list of trades can never grow the page/app shell itself. */
.nex4r-history-panel { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }

.nex4r-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; flex-shrink: 0; }
.nex4r-history-head .nex4r-panel-title { margin-bottom: 0; }

.nex4r-select {
  background: var(--bg-panel-2);
  color: var(--text);
  border: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 11px;
  padding: 4px 6px;
}

.nex4r-table-scroll { width: 100%; flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: auto; }

.nex4r-history-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 360px; }
.nex4r-history-table thead { position: sticky; top: 0; background: var(--bg-panel); }
.nex4r-history-table th {
  font-family: var(--font-pixel);
  font-size: 8px;
  text-align: left;
  color: var(--text-dim);
  padding: 6px 4px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.nex4r-history-table td { padding: 5px 4px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.nex4r-history-table .profit { color: var(--green); }
.nex4r-history-table .loss { color: var(--red); }

/* Credits */
.nex4r-credits-panel { text-align: center; padding: 28px 10px; margin: auto; }
.nex4r-credits-name { font-family: var(--font-pixel); font-size: 13px; color: var(--gold); letter-spacing: 1px; margin-bottom: 14px; }
.nex4r-credits-contact { font-size: 12px; color: var(--text); margin-bottom: 18px; }

.nex4r-credits-team {
  list-style: none;
  margin: 0 auto 18px;
  padding: 0;
  max-width: 320px;
  border-top: 1px dashed var(--border);
}
.nex4r-credits-team li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 2px;
  border-bottom: 1px dashed var(--border);
  font-size: 11px;
}
.nex4r-credits-role { color: var(--text-dim); font-family: var(--font-pixel); font-size: 8px; align-self: center; }
.nex4r-credits-person { color: var(--text); }

.nex4r-credits-copyright { font-size: 10px; color: var(--text-dim); }

/* Footer */
.nex4r-footer {
  flex-shrink: 0;
  text-align: center;
  font-size: 8px;
  color: var(--text-dim);
  padding: 4px 6px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- */
/* Footer nav */
/* ---------------------------------------------------------------- */

.nex4r-nav {
  display: flex;
  border-top: 3px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
}

.nex4r-nav-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-pixel);
  font-size: 9px;
  padding: 10px 4px;
  cursor: pointer;
  border-right: 1px solid var(--border);
}

.nex4r-nav-btn:last-child { border-right: none; }
.nex4r-nav-btn:hover { color: var(--text); background: var(--bg-panel-2); }
.nex4r-nav-btn.active { color: var(--gold); background: var(--bg-panel-2); }

.nex4r-empty {
  color: var(--text-dim);
  font-size: 11px;
  text-align: center;
  padding: 20px 0;
}

.nex4r-offline-banner {
  display: none;
  background: #3a1a14;
  color: var(--red);
  border: 2px solid var(--red);
  padding: 6px 8px;
  font-size: 10px;
  margin-bottom: 8px;
  text-align: center;
}

.nex4r-offline-banner.show { display: block; }

.nex4r-last-update {
  font-size: 9px;
  color: var(--text-dim);
  text-align: right;
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------- */
/* Responsiveness - handled entirely by fitStage() in viewer.js scaling
   the fixed #nex4r-root canvas as one unit (see the comment on
   #nex4r-root above). There is deliberately no width/height media
   query here: the layout is always computed at the same fixed 480x800
   reference regardless of the real window/iframe size, so the chart,
   the cave, and every table keep exactly the same proportions to each
   other at every size - the whole widget just gets visually larger or
   smaller, never reflowed or unevenly squeezed. */
/* ---------------------------------------------------------------- */