/* Theme shared by every page: the old dashboard's tokens and patterns (dark only), rewritten from its spec. */
@import url('/static/vendor/fonts/fonts.css');

:root {
  color-scheme: dark;
  --canvas: #07090C;
  --panel: #0E1116;
  --panel-hi: #12161D;
  --hairline: #1C2230;
  --amber: #F2A33C;
  --bull: #2EBD85;
  --bear: #F6465D;
  --text: #E6EAF0;
  --text-dim: #8A93A3;
  --danger: #FF2440;
  --danger-fill: #6E0F1F;
  --danger-text: #FFEDEE;
  --stark: #FFFFFF;
  --equity-line: #58a6ff;
  --equity-fill: rgba(88, 166, 255, .15);
  --equity-per-trade: rgba(121, 192, 255, .55);
  --equity-flat: #8A93A3;
  --radius: 5px;
  --radius-sm: 3px;
  --dur: 180ms;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --fs-eroe: 32px;
  --fs-grande: 18px;
  --fs-valore: 14px;
  --fs-corpo: 11px;
  --fs-label: 9px;
}
@media (prefers-contrast: more) {
  :root { --text-dim: #A9B2C2; --hairline: #2A3344; }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(120% 80% at 50% -10%, rgba(242, 163, 60, .05), transparent 60%), var(--canvas);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-corpo);
  font-variant-numeric: tabular-nums;
}
a { color: inherit; }

/* top bar */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 20; background: var(--canvas); min-height: 49px;
}
.topbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.topbar__title { margin: 0; font: 600 13px/1 var(--font-mono); letter-spacing: .18em; color: var(--amber); }
.topbar__navlink {
  display: inline-flex; align-items: center; min-height: 32px; padding: 5px 9px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-dim); text-decoration: none;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  transition: color var(--dur), border-color var(--dur);
}
.topbar__navlink:hover { color: var(--amber); border-color: var(--amber); }
.topbar__navlink[aria-current="page"] { color: var(--text); }
.topbar__navlink--scheda[aria-current="page"] { color: var(--amber); border-color: var(--amber); }
.topbar__navlink--conto { text-transform: uppercase; }
.topbar__navlink--conto[aria-current="page"]::before { content: "● "; }
.topbar__scan, .topbar__status { font: 500 11px/1 var(--font-mono); color: var(--text-dim); }
.topbar__status { font-family: var(--font-sans); }
@media (max-width: 800px) { .topbar { position: static; } }
@media (max-width: 480px) { .topbar__navlink { min-height: 44px; } }

/* card, title, chip, signs */
.card {
  background: var(--panel); border: 1px solid var(--hairline); border-left: 2px solid var(--amber);
  border-radius: var(--radius); padding: 12px 14px;
}
.card__title { margin: 0 0 10px; font: 600 14px/1 var(--font-mono); letter-spacing: .14em; color: var(--amber); }
.chip {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-sm);
  font: 700 9px/1.3 var(--font-mono); letter-spacing: .05em; color: var(--text-dim);
  border: 1px solid var(--hairline); white-space: nowrap;
}
.chip--ok { color: var(--bull); border-color: color-mix(in srgb, var(--bull) 42%, var(--hairline)); }
.chip--warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 42%, var(--hairline));
  background: color-mix(in srgb, var(--amber) 10%, transparent); }
.chip--stale { color: var(--bear); border-color: color-mix(in srgb, var(--bear) 42%, var(--hairline));
  background: color-mix(in srgb, var(--bear) 10%, transparent); }
.chip--idle { color: var(--text); }
.pos, .neg, .zero { font-weight: 700; font-variant-numeric: tabular-nums; }
.pos { color: var(--bull); }
.neg { color: var(--bear); }
.zero { color: var(--text-dim); }
.dim { color: var(--text-dim); }

/* tables */
.tabella-wrap { overflow: auto; max-height: 46vh; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.tabella { width: 100%; border-collapse: collapse; font: 400 11px/1.3 var(--font-mono); }
.tabella th {
  position: sticky; top: 0; background: var(--panel-hi); color: var(--text-dim);
  font: 500 9px/1.3 var(--font-sans); letter-spacing: .05em; text-align: center; padding: 6px; white-space: nowrap;
}
.tabella td { padding: 5px 6px; text-align: center; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.tabella th:nth-child(-n+2), .tabella td:nth-child(-n+2) { text-align: left; }