/* =========================================================
   SIBYL — Design Tokens
   Dark mode only. Sci-fi terminal aesthetic.
   ========================================================= */

:root {
  /* ---- Surfaces -------------------------------------- */
  --bg-void:        #05070b;   /* page background, deepest */
  --bg-base:        #0a0e15;   /* default surface          */
  --bg-panel:       #0e131c;   /* panel fill               */
  --bg-panel-hi:    #131a25;   /* raised / hover           */
  --bg-row-alt:     #0c1119;
  --bg-row-hover:   #15202f;

  /* ---- Lines / borders ------------------------------- */
  --line-dim:       #1a2330;
  --line:           #25303f;
  --line-bright:    #3a4658;

  /* ---- Text ------------------------------------------ */
  --text-hi:        #e8eef5;
  --text:           #b9c4d2;
  --text-lo:        #6f7d8e;
  --text-dim:       #4a5564;

  /* ---- Brand / signals ------------------------------- */
  --acid:           #f5ee0a;   /* signature acid yellow    */
  --acid-soft:      #c9c308;
  --acid-glow:      rgba(245, 238, 10, 0.55);

  --cyan:           #2ee6ff;
  --cyan-soft:      #1ca8bd;
  --cyan-glow:      rgba(46, 230, 255, 0.45);

  --magenta:        #ff2db8;
  --magenta-soft:   #c41f8c;
  --magenta-glow:   rgba(255, 45, 184, 0.45);

  --gain:           #2ddc8e;
  --gain-soft:      #1f9d65;
  --gain-glow:      rgba(45, 220, 142, 0.4);

  --loss:           #ff4d6d;
  --loss-soft:      #c43050;
  --loss-glow:      rgba(255, 77, 109, 0.4);

  --warn:           #ffae3d;

  /* ---- Typography ------------------------------------ */
  --font-ui:        "Chakra Petch", "Eurostile", "Bahnschrift", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-display:   "Chakra Petch", "Eurostile", system-ui, sans-serif;

  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-base:  13px;
  --fs-md:    14px;
  --fs-lg:    16px;
  --fs-xl:    20px;
  --fs-2xl:   28px;
  --fs-3xl:   40px;
  --fs-num:   34px;   /* probability hero numbers */

  --lh-tight: 1.1;
  --lh:       1.4;

  /* ---- Spacing / radius (sharp UI, minimal radius) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --notch: 10px;   /* corner cut on angular panels */

  /* ---- Motion ---------------------------------------- */
  --t-fast: 90ms;
  --t-base: 160ms;
  --ease:   cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   Reset / base
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg-void);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* faint grid texture */
  background-image:
    linear-gradient(rgba(46, 230, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 230, 255, 0.025) 1px, transparent 1px),
    radial-gradient(ellipse at 20% 0%, rgba(245, 238, 10, 0.04), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 45, 184, 0.03), transparent 50%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

button, input, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }

/* =========================================================
   Scrollbars
   ========================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 2px solid var(--bg-void);
}
::-webkit-scrollbar-thumb:hover { background: var(--line-bright); }

/* =========================================================
   Utility / shared atoms
   ========================================================= */

/* Monospace numeric */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-xs);
  color: var(--text-lo);
}

.gain { color: var(--gain); }
.loss { color: var(--loss); }
.acid { color: var(--acid); }
.cyan { color: var(--cyan); }
.magenta { color: var(--magenta); }
.muted { color: var(--text-lo); }
.dim { color: var(--text-dim); }

/* =========================================================
   Angular panel — the core chrome wrapper
   Uses clip-path for cut corners + double-border via outline
   ========================================================= */
.panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  clip-path: polygon(
    0 var(--notch),
    var(--notch) 0,
    100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%
  );
}

.panel--hi { background: var(--bg-panel-hi); }

.panel--bright {
  border-color: var(--line-bright);
  box-shadow:
    inset 0 0 0 1px rgba(245, 238, 10, 0.06),
    0 0 24px rgba(245, 238, 10, 0.04);
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-dim);
  background:
    linear-gradient(180deg, rgba(245, 238, 10, 0.02), transparent),
    var(--bg-panel-hi);
}

.panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.panel__title::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--acid);
  box-shadow: 0 0 8px var(--acid-glow);
}

.panel__body { padding: var(--s-4); }

/* corner tick marks for extra "tech frame" feel */
.panel--ticked::before,
.panel--ticked::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--acid);
  opacity: 0.55;
  pointer-events: none;
}
.panel--ticked::before { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.panel--ticked::after  { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  --c: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  height: 36px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c);
  background: var(--bg-panel-hi);
  border: 1px solid var(--line-bright);
  clip-path: polygon(
    0 6px, 6px 0,
    100% 0, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 0 100%
  );
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  cursor: pointer;
  user-select: none;
}

.btn:hover { background: #1a2230; }

.btn--primary {
  --c: #0a0a05;
  color: var(--c);
  background: var(--acid);
  border-color: var(--acid);
  box-shadow: 0 0 0 0 var(--acid-glow), 0 0 16px var(--acid-glow);
}
.btn--primary:hover {
  background: #fffb3a;
  box-shadow: 0 0 0 1px var(--acid), 0 0 24px var(--acid-glow);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--line-bright); color: var(--text-hi); }

.btn--sm { height: 28px; font-size: var(--fs-xs); padding: 0 var(--s-3); }
.btn--icon { width: 36px; padding: 0; }

/* =========================================================
   Inputs
   ========================================================= */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-lo);
  font-weight: 600;
}

.input {
  height: 42px;
  padding: 0 var(--s-3);
  background: var(--bg-void);
  border: 1px solid var(--line);
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  clip-path: polygon(
    0 6px, 6px 0,
    100% 0, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 0 100%
  );
}
.input::placeholder { color: var(--text-dim); }
.input:focus {
  border-color: var(--acid);
  box-shadow: 0 0 0 1px var(--acid), 0 0 16px var(--acid-glow);
}
.input--error {
  border-color: var(--loss);
  box-shadow: 0 0 0 1px var(--loss), 0 0 12px var(--loss-glow);
}

.select {
  height: 32px;
  padding: 0 28px 0 var(--s-3);
  background:
    linear-gradient(45deg, transparent 50%, var(--text-lo) 50%) calc(100% - 12px) center / 6px 6px no-repeat,
    var(--bg-void);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  appearance: none;
  outline: none;
}
.select:hover { border-color: var(--line-bright); }
.select:focus { border-color: var(--acid); }

/* =========================================================
   Badges / pills (status)
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  color: var(--text-lo);
  background: rgba(255, 255, 255, 0.02);
  clip-path: polygon(0 3px, 3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 5px; height: 5px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.badge--open      { color: var(--cyan);    background: rgba(46,230,255,0.06); }
.badge--cyan {
  background: rgba(46, 230, 255, 0.1);
  color: var(--cyan);
  border-color: rgba(46, 230, 255, 0.3);
}
.badge--settled   { color: var(--text-lo); background: rgba(255,255,255,0.02); }
.badge--won       { color: var(--gain);    background: rgba(45,220,142,0.06); }
.badge--lost      { color: var(--loss);    background: rgba(255,77,109,0.06); }
.badge--watching  { color: var(--text-lo); }
.badge--signal    { color: var(--acid);    background: rgba(245,238,10,0.08); }
.badge--traded    { color: var(--magenta); background: rgba(255,45,184,0.06); }
.badge--resolved  { color: var(--text-dim); }

/* =========================================================
   Data table
   ========================================================= */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl thead th {
  position: sticky;
  top: 0;
  background: var(--bg-panel-hi);
  color: var(--text-lo);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.tbl thead th:hover { color: var(--text-hi); }
.tbl thead th.sorted { color: var(--acid); }
.tbl thead th .sort-ind { color: var(--text-dim); margin-left: 6px; }
.tbl thead th.sorted .sort-ind { color: var(--acid); }

.tbl tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-dim);
  vertical-align: middle;
  white-space: nowrap;
}

.tbl tbody tr { background: transparent; transition: background var(--t-fast); }
.tbl tbody tr:hover { background: var(--bg-row-hover); }

/* Row state: open rows brighter, settled rows calmer */
.tbl tbody tr.row--settled td { color: var(--text-lo); }
.tbl tbody tr.row--open td    { color: var(--text-hi); }
.tbl tbody tr.row--open       { background: rgba(46, 230, 255, 0.025); }

/* num cell alignment */
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Truncate overlong cell text (e.g. market names) so the row fits the screen;
   the full text stays available on hover via the cell's title attribute. */
.cell-ellipsis {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* strategy color tag */
.strat-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-hi);
}
.strat-tag__swatch {
  width: 10px; height: 10px;
  background: var(--c, var(--cyan));
  box-shadow: 0 0 6px var(--c, var(--cyan));
  flex-shrink: 0;
}

/* =========================================================
   Delta (signed P&L)
   ========================================================= */
.delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.delta--pos { color: var(--gain); }
.delta--neg { color: var(--loss); }
.delta--zero { color: var(--text-lo); }

/* =========================================================
   Stat card / KPI tile
   ========================================================= */
.stat {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-panel);
  border: 1px solid var(--line-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
  clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.stat__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-lo);
  font-weight: 600;
}
.stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
  color: var(--text-hi);
  letter-spacing: 0;
}
.stat__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-lo);
}

/* =========================================================
   Glitch effect (for logo + key headings)
   ========================================================= */
.glitch {
  position: relative;
  display: inline-block;
  color: var(--acid);
  text-shadow: 0 0 12px var(--acid-glow);
  letter-spacing: 0.06em;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.glitch::before {
  color: var(--cyan);
  transform: translate(-2px, 0);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitch-a 4s steps(1) infinite;
}
.glitch::after {
  color: var(--magenta);
  transform: translate(2px, 0);
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitch-b 3.6s steps(1) infinite;
}
@keyframes glitch-a {
  0%, 92%, 100% { transform: translate(-2px, 0); }
  93% { transform: translate(-5px, 1px); clip-path: polygon(0 12%, 100% 12%, 100% 38%, 0 38%); }
  95% { transform: translate(0, -1px); }
}
@keyframes glitch-b {
  0%, 88%, 100% { transform: translate(2px, 0); }
  89% { transform: translate(4px, -2px); clip-path: polygon(0 62%, 100% 62%, 100% 78%, 0 78%); }
  91% { transform: translate(-1px, 1px); }
}

/* subtle scanline overlay reusable */
.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.012) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

/* pulse on data update */
@keyframes pulse-acid {
  0%   { background: rgba(245, 238, 10, 0.18); }
  100% { background: transparent; }
}
.pulse { animation: pulse-acid 600ms var(--ease); }

/* dot indicator */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--text-lo);
  box-shadow: 0 0 6px currentColor;
}
.dot--on  { background: var(--gain); color: var(--gain); }
.dot--off { background: var(--text-dim); color: var(--text-dim); box-shadow: none; }
.dot--warn{ background: var(--warn); color: var(--warn); }

/* generic divider */
.div-x { height: 1px; background: var(--line-dim); }
.div-y { width: 1px; background: var(--line-dim); align-self: stretch; }