/* INVEST dashboard — design tokens + primitives.
   Source of truth: DESIGN.md ("terminal tradera", dark-only, spec Planu 5 par.4.3).
   Consumed by base.html and every extending template (leaderboard/signals/paper/account). */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* DESIGN.md: liczby ZAWSZE tabular-nums — globalnie na body, bo nie zmienia
     renderingu tekstu nienumerycznego, wiec bezpiecznie pokrywa tez markup
     spoza table/.num/.badge (np. equity w .track-card), ktorego Task 8
     swiadomie nie przepisuje (Task 9). */
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-weight: 600; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; color: inherit; }

/* ---------- tokens ---------- */
:root {
  /* colors */
  --bg: #0a0e13;
  --surface: #101720;
  --surface-2: #0d1319;
  --line: #1d2733;
  --ink: #dee7ee;
  --muted: #7e8c9a;
  --accent: #35d07f;
  --accent-dim: #1d5e40;
  --warn: #d9b44a;
  --danger: #e0654c;

  /* fonts */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --font-sans: system-ui, "Segoe UI", Roboto, sans-serif;

  /* spacing scale (4/8/12/16/24/32/48) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* radius */
  --radius: 6px;
  --radius-card: 8px;

  /* layout */
  --breakpoint-mobile: 720px;
  --bottom-nav-h: 56px;
}

/* ---------- layout ---------- */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

main.wrap {
  padding-top: var(--sp-5);
  padding-bottom: calc(var(--sp-7) + var(--bottom-nav-h));
}

/* ---------- section labels (Zasady: mono, uppercase, letter-spacing .1em, muted) ---------- */
.label,
h2, h3 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 500;
  font-size: .8rem;
}
h2 { font-size: .85rem; margin-top: var(--sp-6); }
h2:first-child { margin-top: 0; }
h2 small { text-transform: none; letter-spacing: normal; color: var(--muted); font-weight: 400; }

/* ---------- header / topbar ---------- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
}
.logo {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .3em;
  color: var(--ink);
  font-weight: 600;
}
.logo:hover { text-decoration: none; }
.logo em { color: var(--accent); font-style: normal; }
.phase-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}

/* ---------- nav (desktop top, shared link styling) ---------- */
.nav-top {
  display: flex;
  gap: var(--sp-4);
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nav-top a { color: var(--muted); padding: var(--sp-1) 0; border-bottom: 2px solid transparent; }
.nav-top a:hover { color: var(--ink); text-decoration: none; }
.nav-top a.active { color: var(--accent); border-bottom-color: var(--accent); }

.btn-logout {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  min-height: 32px;
}
.btn-logout:hover { color: var(--danger); border-color: var(--danger); }

/* ---------- bottom nav (mobile) ---------- */
.bottom-nav {
  display: none; /* shown only <=720px, see media query */
}

/* ---------- card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
}

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
/* Task 9: mobilna reprezentacja kartowa (dla stanow konsensusu / pozycji) — domyslnie
   ukryta, widoczna dopiero <=720px (patrz media query nizej), gdzie .desktop-only
   (tabela) jest ukrywana. Poza tym breakpointem tabela w .table-wrap wystarcza. */
.cards-mobile { display: none; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  color: var(--muted);
  font-weight: 400;
  font-size: .72rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--surface);
  font-family: var(--font-mono);
}
tr.row:hover { background: var(--surface); cursor: pointer; }
tr.detail td { background: var(--surface); }

/* ---------- badge (heartbeat) ---------- */
.badge {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 99px;
  font-size: .72rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid transparent;
}
.badge.live { background: rgba(53, 208, 127, .12); color: var(--accent); border-color: var(--accent-dim); }
.badge.stale { background: rgba(217, 180, 74, .12); color: var(--warn); border-color: var(--warn); }
.badge.no-data { background: rgba(126, 140, 154, .12); color: var(--muted); border-color: var(--line); }
.badge.ingest_stale { background: rgba(224, 101, 76, .12); color: var(--danger); border-color: var(--danger); }

/* ---------- tier (leaderboard) — B jest oficjalnie --warn wg DESIGN.md ---------- */
.tier { font-weight: 700; font-family: var(--font-mono); }
.tier-S, .tier-A { color: var(--accent); }
.tier-B { color: var(--warn); }
.tier-C, .tier-D { color: var(--muted); }

/* ---------- consensus states (signals) ----------
   Semantyka (DESIGN.md): entry/long=accent, watch=warn, isolated/brak=muted,
   przeciwna/halt=danger. "building"/"broad" to progi wejscia LONG (states.py) -> accent.
   "crowded" to ostrzezenie o zatloczeniu puli, nie halt -> warn. Kolor nigdy nie jest
   jedynym nosnikiem: ".state" renderuje sie jako etykieta tekstowa (nazwa stanu zawsze
   widoczna), kolor to tylko dodatkowy sygnal na klasie modyfikujacej ".state-*". */
.state {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-size: .72rem;
}
.state-isolated { color: var(--muted); }
.state-watch { color: var(--warn); }
.state-building,
.state-broad { color: var(--accent); }
.state-crowded { color: var(--warn); }

/* ---------- account: pozycja vs sygnal (Task 10) — sama semantyka jak wyzej,
   inny slownik wartosci: zgodna=accent, brak_sygnalu=muted, przeciwna=danger. */
.state-zgodna { color: var(--accent); }
.state-brak_sygnalu { color: var(--muted); }
.state-przeciwna { color: var(--danger); }

/* ---------- flags / muted / misc utility ---------- */
.muted { color: var(--muted); }
.flag {
  color: var(--danger);
  font-size: .72rem;
  margin-right: var(--sp-1);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* ---------- empty states ---------- */
.empty {
  color: var(--muted);
  padding: var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  font-size: .85rem;
}

/* ---------- paper trading track cards ---------- */
.tracks { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.track-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  min-width: 220px;
  flex: 1;
}
.track-card h3 { margin-top: 0; }

/* ---------- banner (no-password mode) ---------- */
.banner-warn {
  background: var(--warn);
  color: #241d08;
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: var(--sp-2) var(--sp-4);
  text-align: center;
}
.banner-warn strong { text-transform: uppercase; letter-spacing: .06em; }

/* ---------- forms (adres konta, Task 10) ---------- */
.field-row { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.field-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}
.field-row input {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  padding: var(--sp-3);
  font-family: var(--font-mono);
  min-height: 44px;
  min-width: 320px;
}
.field-row input:focus { outline: none; border-color: var(--accent); }
.field-row button {
  min-height: 44px;
  padding: 0 var(--sp-4);
  background: var(--accent-dim);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.field-row button:hover { background: var(--accent); color: var(--surface-2); }

/* ---------- uPlot integration ---------- */
.uplot { background: transparent; }
.u-legend { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }

/* ---------- mobile (<=720px) ---------- */
@media (max-width: 720px) {
  .nav-top { display: none; }

  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bottom-nav-h);
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    z-index: 20;
  }
  .bottom-nav a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .bottom-nav a:hover { text-decoration: none; }
  .bottom-nav a.active { color: var(--accent); }

  .wrap { padding: 0 var(--sp-3); }

  /* Task 9: dla stanow konsensusu i pozycji tabela (.desktop-only) jest ukrywana,
     a zamiast niej pokazuje sie .cards-mobile (karty, siatka 1-kolumnowa) — markup
     obu wariantow jest w szablonie rownolegle, tu tylko przelacznik widocznosci.
     Pozostale tabele (leaderboard, sygnaly otwarte/zamkniete, transakcje) NIE maja
     odpowiednika kartowego — .table-wrap { overflow-x:auto } (poza media query)
     wystarcza jako przewijanie w poziomie, bez utraty danych. */
  .desktop-only { display: none; }
  .cards-mobile { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
}