/* ==========================================================================
   Brand Xeno — token ufficiali. Fonte di verità dal 2026-10-01 (D-013): Design System
   "Xeno" su Claude Design (token del codice @xeno/ui, Gateway@c896f8c); dove diverge dal
   vecchio brand/design-tokens.css vince il Design System.
   Direzione: fintech premium-metallico, tema scuro gunmetal di default; il
   bronzo è riservato SOLO ad azioni/stato attivo (regola d'oro del brand).
   Tema Light disponibile via [data-theme="light"] (vedi anche index.html:
   supporta ?theme=light|dark in query string, utile quando la dashboard è
   embeddata in un'altra pagina — vedi architecture/embed.md).
   ========================================================================== */
:root {
  --xeno-bg:        #090B0F;
  --xeno-surface:   #15191B;
  --xeno-surface-2: #0E1116;
  --xeno-line:      #1C2026;
  --xeno-line-strong: #2C3540;
  --xeno-text:       #E7ECF2;
  --xeno-text-strong: #F2F6FB;
  --xeno-text-muted: #8A95A6;
  --xeno-metal:      #9FAAB9;
  --xeno-data:      #C3CAD6;
  --xeno-bronze:       #B9772F;
  --xeno-bronze-hover: #C6823F;
  --xeno-bronze-grad:  linear-gradient(135deg,#A4632B,#7A4A1E 55%,#5E3B17);
  --xeno-bronze-glow:  rgba(198,130,63,.40);
  --xeno-bronze-soft:  rgba(198,130,63,.16);
  --xeno-info:    #9CC0EC;
  --xeno-success: #34D399;
  --xeno-danger:  #F87171;
  --xeno-warning: #F2C94C;
  --xeno-font-sans: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --xeno-radius-control: 12px;
  --xeno-radius-card:    16px;
  --xeno-radius-pill:    999px;
  --xeno-highlight-inset: inset 0 1px 0 rgba(255,255,255,.08);
  --xeno-shadow-card:     0 18px 40px -22px rgba(0,0,0,.8);
  /* superficie elevata delle card (solo scuro; in chiaro resta la superficie piatta) */
  --xeno-surface-elevated: linear-gradient(180deg,#192029,#12161d);
}
:root[data-theme="light"] {
  --xeno-bg:        #FBFBFC;
  --xeno-surface:   #FFFFFF;
  --xeno-surface-2: #F7F7F9;
  --xeno-line:      #ECECEF;
  --xeno-line-strong: #ECECEF;
  --xeno-text:       #15171A;
  --xeno-text-strong: #15171A;
  --xeno-text-muted: #6B7076;
  --xeno-metal:      #9AA0AA;
  --xeno-data:      #2A2D32;
  --xeno-bronze-hover: #A4632B;
  --xeno-bronze-soft:  #F4EAE0;
  --xeno-bronze-glow:  rgba(168,99,43,.2);
  --xeno-info:    #2563EB;
  --xeno-success: #15803D;
  --xeno-danger:  #DC2626;
  --xeno-warning: #B45309;
  --xeno-shadow-card: 0 26px 64px -30px rgba(0,0,0,.25);
  --xeno-highlight-inset: inset 0 1px 0 rgba(255,255,255,.6);
  --xeno-surface-elevated: var(--xeno-surface);
}

/* Alias: nomi storici usati nel resto del foglio -> token Xeno.
   Indirezione via var(): si aggiornano da soli col cambio tema. */
:root {
  --bg: var(--xeno-bg);
  --panel: var(--xeno-surface);
  --panel-2: var(--xeno-surface-2);
  --border: var(--xeno-line);
  --text: var(--xeno-text);
  --muted: var(--xeno-text-muted);
  --green: var(--xeno-success);
  --red: var(--xeno-danger);
  --amber: var(--xeno-warning);
  --accent: var(--xeno-info);
  --font: var(--xeno-font-sans);
}

* { box-sizing: border-box; }
/* Focus sempre visibile (Design System: anello xeno-info 2px), solo da tastiera. */
:focus-visible { outline: 2px solid var(--xeno-info); outline-offset: 2px; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px;
  display: flex; flex-direction: column;
  /* Di norma la dashboard riempie lo schermo senza scroll (desktop/laptop): il budget
     verticale è distribuito tra i pannelli con flex, non con altezze fisse (vedi sotto).
     Su mobile e su finestre molto basse si torna al flusso normale con scroll (regole
     dedicate più in basso) per non forzare i grafici a dimensioni illeggibili. */
  height: 100dvh; overflow: hidden;
}

/* Header */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--border);
  flex-wrap: wrap; flex: 0 0 auto;
}
.topbar h1 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: .3px; }
/* Selettore simbolo: controllo nativo con la pelle dei campi Xeno (surface-2, line, radius-control). */
.sym-select {
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--xeno-text-strong);
  background: var(--panel-2); border: 1px solid var(--xeno-line-strong); border-radius: var(--xeno-radius-control);
  padding: 6px 10px; min-height: 36px; cursor: pointer;
}
.sym-select optgroup, .sym-select option { background: var(--panel-2); color: var(--text); }
.status { display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.err { background: var(--red); box-shadow: 0 0 8px var(--red); }
.topbar .meta { color: var(--muted); font-size: 12px; }
.session-badge { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: var(--xeno-radius-pill);
  border: 1px solid var(--border); color: var(--text); }
.price-big { margin-left: auto; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--xeno-data); }

/* Legenda sessioni */
.legend { display: flex; gap: 14px; align-items: center; margin: 0 0 8px 2px; font-size: 11px;
  color: var(--muted); flex-wrap: wrap; row-gap: 4px; }
.legend .item { display: flex; gap: 5px; align-items: center; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; }

/* Layout */
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 14px; padding: 14px 14px 7px;
  flex: 1.35 1 0; min-height: 0; }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }

.side-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; }

.card {
  background: var(--xeno-surface-elevated); border: 1px solid var(--xeno-line-strong);
  border-radius: var(--xeno-radius-card); padding: 14px;
  box-shadow: var(--xeno-shadow-card), var(--xeno-highlight-inset);
}
.card h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 0 0 10px; font-weight: 600; }

/* Chart */
.chart-card { padding: 10px; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  overflow: hidden; /* clip di sicurezza: il grafico non deve mai sbordare dalla card */ }
.chart-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; row-gap: 6px; }
.chart-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 600; }
.tf-tabs { display: flex; gap: 6px; }
.tf-tabs button {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  padding: 5px 14px; border-radius: var(--xeno-radius-control); cursor: pointer; font-weight: 600; font-size: 13px;
}
/* Stato attivo: unico punto in cui compare il bronzo fuori dalle CTA (regola brand:
   "voce attiva con bronze-grad + inset highlight"), qui applicata alla navigazione TF. */
.tf-tabs button.active {
  color: #fff; border-color: transparent; background: var(--xeno-bronze-grad);
  box-shadow: var(--xeno-highlight-inset);
}
.chart-toggles { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.chart-toggles label { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); cursor: pointer; user-select: none; }
.chart-toggles input { accent-color: var(--accent); cursor: pointer; }
.chartbox { width: 100%; position: relative; min-width: 0; }
/* Il grafico riempie esattamente lo spazio che la card gli concede (nessuna altezza
   fissa che possa sbordare): la dimensione reale arriva dal ResizeObserver in app.js. */
#chart-main { flex: 1 1 auto; min-height: 0; }
.chart-sm { flex: 1 1 auto; min-height: 0; }

/* Riga inferiore: due grafici affiancati */
.layout-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 7px 14px 14px;
  flex: 1 1 0; min-height: 0; }
@media (max-width: 1000px) { .layout-bottom { grid-template-columns: 1fr; } }

/* Finestre molto basse (poco frequenti): rinunciare al "tutto in una schermata" e
   tornare allo scroll normale, invece di forzare i grafici sotto una soglia leggibile.
   Stesso accorgimento della fascia <=1000px: senza un'altezza definita su body, il
   flex-grow coi flex-basis a 0 non ha spazio in cui crescere e va sostituito da un
   dimensionamento naturale (flex: none + min-height: auto), altrimenti collassa a 0. */
@media (max-height: 620px) {
  body { height: auto; overflow: visible; }
  .layout { flex: none; min-height: auto; }
  .layout-bottom { flex: none; min-height: auto; }
  .chart-card { min-height: auto; overflow: visible; }
  .side-col { min-height: auto; overflow-y: visible; }
  #chart-main { min-height: 320px; }
  .chart-sm { min-height: 260px; }
}

/* Confluence */
.confluence { text-align: center; padding: 16px; border-radius: var(--xeno-radius-control); }
.confluence .bias { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.confluence .detail { color: var(--muted); font-size: 12px; margin-top: 6px; }
.confluence .agree { font-size: 11px; text-transform: uppercase; margin-top: 8px; letter-spacing:.5px;}
/* Verde/rosso per la DIREZIONE tecnica: eccezione documentata alla regola del Design System
   ("verde/rosso solo stati di sistema") — D-011/D-013. Sempre affiancati dall'etichetta testuale. */
.bias-LONG, .bias-STRONG_LONG { color: var(--green); }
.bias-SHORT, .bias-STRONG_SHORT { color: var(--red); }
.bias-FLAT { color: var(--amber); }
.scorebar { height: 6px; border-radius: 3px; background: var(--panel-2); margin-top: 10px; overflow: hidden; }
.scorebar > div { height: 100%; }

/* Bias badges */
.tf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.tf-badge { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--xeno-radius-control);
  padding: 10px 8px; text-align: center; }
.tf-badge .tf { font-size: 11px; color: var(--muted); }
.tf-badge .b { font-weight: 700; font-size: 13px; margin: 4px 0; }
.tf-badge .f { font-size: 11px; color: var(--xeno-data); font-variant-numeric: tabular-nums; }

/* Force components */
.bar-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.bar-row .lbl { width: 78px; color: var(--muted); font-size: 12px; }
.bar-track { flex: 1; height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.bar-track > div { height: 100%; background: var(--accent); }
.bar-row .val { width: 28px; text-align: right; font-variant-numeric: tabular-nums; color: var(--xeno-data); }

/* Indicators table */
table.ind { width: 100%; border-collapse: collapse; }
table.ind td { padding: 5px 4px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
table.ind td.k { color: var(--muted); }
table.ind td.v { text-align: right; font-weight: 600; color: var(--xeno-data); }

/* Disconnected overlay */
.offline {
  display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 92%, transparent);
  z-index: 50; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
}
.offline.show { display: flex; }
.offline .big { font-size: 22px; font-weight: 700; color: var(--red); }
.offline .sub { color: var(--muted); }
.offline.loading .big { color: var(--xeno-info); }  /* caricamento simbolo: stato informativo, non errore */

.footer { color: var(--muted); font-size: 11px; text-align: center; padding: 8px; flex: 0 0 auto; }

/* ==========================================================================
   Schermi stretti (tablet in verticale e telefoni, <=1000px — stessa soglia
   del layout a colonna singola sopra): niente "fit to screen", si torna al
   flusso normale con scroll verticale. Su una colonna sola si impilano 3
   grafici + i pannelli info: forzarli tutti in un'unica schermata li rende
   illeggibili (visto su tablet: grafici da ~130-180px). Ogni grafico ha
   un'altezza in vh pensata per restare usabile col dito (pan/zoom nativi
   di lightweight-charts) senza dover ridimensionare il font globale.
   ========================================================================== */
@media (max-width: 1000px) {
  body { height: auto; overflow: visible; }
  /* flex-grow coi flex-basis a 0 (usato nel layout "fit to screen") funziona solo se il
     genitore ha un'altezza definita in cui crescere: con body ad altezza automatica va
     sostituito da un dimensionamento naturale basato sul contenuto (flex: none), altrimenti
     gli escape-hatch "min-height:0" (necessari nel layout senza scroll) collassano tutto a 0. */
  .layout { flex: none; min-height: auto; padding: 10px 10px 6px; gap: 10px; }
  .layout-bottom { flex: none; min-height: auto; padding: 6px 10px 10px; gap: 10px; }
  .chart-card { min-height: auto; overflow: visible; }
  .side-col { min-height: auto; overflow-y: visible; }

  #chart-main { min-height: 48vh; }
  .chart-sm { min-height: 34vh; }

  /* target touch >= 40px (Design System) dove si usa il dito */
  .tf-tabs button, .sym-select { min-height: 40px; }
}

/* Telefoni (<=480px): oltre a quanto sopra, comprimi la topbar che altrimenti
   spezza male su una riga troppo stretta (prezzo, badge sessione, meta...). */
@media (max-width: 480px) {
  body { font-size: 13px; }

  .topbar { padding: 8px 12px; gap: 8px 14px; }
  .topbar h1 { flex: 1 1 auto; }
  .price-big { margin-left: 0; order: 10; flex: 1 0 100%; font-size: 20px; }

  .legend { gap: 8px 10px; }
  .tf-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}