:root {
  color-scheme: light;
  --surface-page:   #f9f9f7;
  --surface-card:   #fcfcfb;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11, 11, 11, 0.10);
  --delta-up:       #006300;
  --delta-down:     #d03b3b;
  --status-good:    #0ca30c;
  --status-warning: #fab219;
  --status-critical:#d03b3b;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-page:   #0d0d0d;
    --surface-card:   #1a1a19;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255, 255, 255, 0.10);
    --delta-up:       #0ca30c;
    --delta-down:     #e66767;
    --status-good:    #0ca30c;
    --status-warning: #fab219;
    --status-critical:#d03b3b;
  }
}

* { box-sizing: border-box; }

html, body {
  /* Il contenuto largo (tabelle) scorre dentro il proprio contenitore
     (.table-scroll): la pagina intera non deve mai scorrere in orizzontale,
     ne' su mobile ne' su desktop. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

header.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 6px;
}

header.top h1 {
  font-size: 20px;
  margin: 0;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-muted);
}
.status-dot.ok { background: var(--status-good); }
.status-dot.initializing { background: var(--status-warning); }
.status-dot.error { background: var(--status-critical); }

/* Semaforo di assestamento dell'EMA nella colonna "Stabile da": stesso
   principio del .status-dot, colori riservati di stato (mai gli stessi
   usati per identità/serie), sempre affiancati dal testo della durata. */
.stability-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.stability-dot.bad { background: var(--status-critical); }
.stability-dot.warn { background: var(--status-warning); }
.stability-dot.good { background: var(--status-good); }
.stability-dot.none { background: var(--text-muted); }

.disclaimer {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  margin: 16px 0 28px;
}
.disclaimer strong { color: var(--text-primary); }
.disclaimer a { color: inherit; }

.panels {
  display: grid;
  /* Sempre una singola colonna: LONG sopra, SHORT sotto, mai affiancati. */
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.panel h2 {
  font-size: 15px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gridline);
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
}
.side-badge.long { background: var(--delta-up); }
.side-badge.short { background: var(--delta-down); }

.table-scroll {
  /* Le tabelle hanno colonne a nowrap: su schermi stretti scorrono
     orizzontalmente DENTRO il pannello, invece di far scorrere l'intera
     pagina o tagliare le colonne finali (leva/TP/SL) fuori vista. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.ranking {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
}

table.ranking th, table.ranking td {
  text-align: right;
  padding: 8px 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
table.ranking th:first-child, table.ranking td:first-child,
table.ranking th:nth-child(2), table.ranking td:nth-child(2) {
  text-align: left;
}
table.ranking th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
table.ranking tbody tr { cursor: pointer; }
table.ranking tbody tr:hover { background: var(--surface-page); }
table.ranking tbody tr:last-child td { border-bottom: none; }

.symbol { font-weight: 600; }

.delta.up { color: var(--delta-up); }
.delta.down { color: var(--delta-down); }

.detail-row td {
  background: var(--surface-page);
  text-align: left;
  white-space: normal;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.detail-row.hidden { display: none; }

.muted-inline {
  color: var(--text-muted);
  font-size: 12px;
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 16px;
  margin-top: 6px;
}
.component-grid div span { color: var(--text-muted); }

.empty-state {
  padding: 24px 16px;
  color: var(--text-muted);
  text-align: center;
}

.alerts-panel ul {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
}
.alerts-panel li {
  padding: 10px 16px;
  border-bottom: 1px solid var(--gridline);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}
.alerts-panel li:last-child { border-bottom: none; }
.alerts-panel time { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

footer.method-link {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
footer.method-link a { color: inherit; }

@media (max-width: 720px) {
  .page { padding: 16px 12px 48px; }
  table.ranking th, table.ranking td { padding: 6px 8px; }
  header.top { gap: 6px 12px; }
}

@media (max-width: 480px) {
  body { font-size: 13px; }
  header.top h1 { font-size: 17px; }
  table.ranking { min-width: 500px; }
  table.ranking th, table.ranking td { font-size: 12px; padding: 6px; }
  .disclaimer { font-size: 12px; padding: 10px 12px; }
}