/* ═══════════════════════════════════════════════════════════════════
   Drawdown Report — stili specifici del report (portati dal mockup
   mockup-drawdown-report.html). La chrome ws-*/stm-* vive in statistics.css;
   le tabelle ddm-* in drawdown.css. Qui SOLO: spinner, tweaks tabelle del
   report, KPI/insight (ddm-ins-*), card "Comprare sui cali" (dd-fas-*),
   backtest modal (dd-bt-*), filtri annate (ddm-yearly-*).
   Reso adattivo al tema: i fondi card usano i token (var(--card)/var(--panel))
   invece dell'#fff hardcoded del mockup (theme-light.css fa il resto su light).
   Tutto è prefissato .ws-page / #ddrRoot per non sporcare il resto dell'app.
   ═══════════════════════════════════════════════════════════════════ */

/* Il bottone "Apri a schermo intero" del pannello riusa la classe/stile di
   Statistics (.ws-ov-expand-btn, in statistics.css) per piena omogeneità. */

.ws-spinner { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:70vh; color:var(--text-dim); font-family:var(--font-ui); }
.ws-spinner-ring { width:38px; height:38px; border:3px solid var(--border-hi); border-top-color:#a78bfa; border-radius:50%; animation:wsSpin .8s linear infinite; }
@keyframes wsSpin { to { transform: rotate(360deg); } }
.ws-page .ddm-table-wrap { max-height: 460px; }
.ws-page .ddm-scatter-wrap { height: 440px; }
.ws-tool-sample .ws-win-emoji { margin-right: 5px; }

/* ── Blocchi insight (ddm-ins-*): tipografia leggibile del report Statistics ── */
.ws-page .ddm-ins-prose { font-family:var(--font-ui); font-size:.98rem; line-height:1.6; color:var(--text); margin:0 0 11px; }
.ws-page .ddm-ins-prose:last-child { margin-bottom:0; }

/* KPI strip → card pulite, valori neutri */
.ws-page .ddm-ins-metrics { gap:10px; margin:0 0 16px; }
.ws-page .ddm-ins-metric { padding:12px 12px; background:var(--hover-subtle); border:1px solid var(--border); border-radius:var(--radius-md); }
.ws-page .ddm-ins-metric-label { font-family:var(--font-ui); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); margin-bottom:6px; }
.ws-page .ddm-ins-metric-val { font-family:var(--font-ui); font-size:1.3rem; font-weight:700; line-height:1.1; color:var(--text-bright); font-variant-numeric:tabular-nums; }

/* Tabella unificata distribuzione + recupero per profondità (neutra, solo Classe colorata) */
.ws-page .ddm-ins-summary { margin:18px 0; background:var(--hover-subtle); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.ws-page .dd-rec-tbl { width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:.95rem; }
.ws-page .dd-rec-tbl th { text-align:left; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); padding:14px 18px 9px; border-bottom:1px solid var(--border); }
.ws-page .dd-rec-tbl td { padding:11px 18px; border-bottom:1px solid var(--border); color:var(--text); }
.ws-page .dd-rec-tbl tbody tr:last-child td { border-bottom:none; }
.ws-page .dd-rec-tbl tbody tr:hover td { background:var(--hover-subtle); }
.ws-page .dd-rec-tbl td:first-child, .ws-page .dd-rec-tbl th:first-child { font-weight:700; color:var(--text-bright); }
.ws-page .dd-rec-tbl th:nth-child(2), .ws-page .dd-rec-tbl td:nth-child(2),
.ws-page .dd-rec-tbl th:nth-child(3), .ws-page .dd-rec-tbl td:nth-child(3),
.ws-page .dd-rec-tbl th:nth-child(4), .ws-page .dd-rec-tbl td:nth-child(4) { text-align:right; }
.ws-page .dd-rec-tbl td:nth-child(2), .ws-page .dd-rec-tbl td:nth-child(3), .ws-page .dd-rec-tbl td:nth-child(4) { font-variant-numeric:tabular-nums; }
.ws-page .dd-rec-tbl th:last-child, .ws-page .dd-rec-tbl td:last-child { text-align:right; font-weight:600; color:var(--text); }

/* Stessa tabella riusata dal Report AI (report.js §6), fuori da .ws-page:
   il container del report è .st-ai-content. Regole identiche al panel. */
.st-ai-content .ddm-ins-summary { margin:16px 0; background:var(--hover-subtle); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.st-ai-content .dd-rec-tbl { width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:.95rem; }
.st-ai-content .dd-rec-tbl th { text-align:left; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); padding:14px 18px 9px; border-bottom:1px solid var(--border); }
.st-ai-content .dd-rec-tbl td { padding:11px 18px; border-bottom:1px solid var(--border); color:var(--text); }
.st-ai-content .dd-rec-tbl tbody tr:last-child td { border-bottom:none; }
.st-ai-content .dd-rec-tbl tbody tr:hover td { background:var(--hover-subtle); }
.st-ai-content .dd-rec-tbl td:first-child, .st-ai-content .dd-rec-tbl th:first-child { font-weight:700; color:var(--text-bright); }
.st-ai-content .dd-rec-tbl th:nth-child(n+2), .st-ai-content .dd-rec-tbl td:nth-child(n+2) { text-align:right; }
.st-ai-content .dd-rec-tbl td:nth-child(n+2) { font-variant-numeric:tabular-nums; }
.st-ai-content .dd-rec-tbl td:last-child { font-weight:600; }

/* ── Header intro centrato + nome mercato ── */
.ws-page .ws-ov-head-center { text-align:center; }
.ws-page .ws-ov-head-center .ws-ov-titlerow { justify-content:center; }
.ws-page .ws-ov-market { font-family:var(--font-ui); font-size:1.1rem; font-weight:600; color:var(--text-dim); margin-top:10px; letter-spacing:.01em; }
.ws-page .ws-ov-market b { color:var(--text-bright); font-weight:700; }

/* ── Substrip: dropdown centrati nella barra ── */
.ws-page .ws-substrip { justify-content: center; }

/* ── Selettore soglia dentro l'header della card "Comprare sui cali" ── */
.ws-page .dd-fas-depth-row { display:flex; align-items:center; gap:11px; margin-bottom:8px; }
.ws-page .dd-fas-depth-lbl {
  font-size:1.55rem; font-weight:800; line-height:1; letter-spacing:-0.02em; color:var(--text-bright);
}
.ws-page .dd-fas-depth-sel {
  font-size:1.2rem; font-weight:800; height:auto; padding:5px 12px; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  background: color-mix(in srgb, var(--pill-active-bg, #d9b66a) 18%, var(--panel));
  border-color: color-mix(in srgb, var(--pill-active-bg, #d9b66a) 50%, var(--border));
  color: var(--text-bright);
}
.ws-page .dd-fas-depth-sel:hover,
.ws-page .dd-fas-depth-sel:focus { outline:none; border-color: var(--pill-active-bg, #d9b66a); }

/* ── Dropdown substrip: sfondo leggermente dorato per evidenza ── */
.ws-page .ws-substrip .ddm-sc-select {
  background: color-mix(in srgb, var(--pill-active-bg, #d9b66a) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--pill-active-bg, #d9b66a) 45%, var(--border));
  color: var(--text-bright); font-weight: 600;
}
.ws-page .ws-substrip .ddm-sc-select:hover { border-color: var(--pill-active-bg, #d9b66a); }
.ws-page .ws-substrip .ddm-sc-select:focus { outline: none; border-color: var(--pill-active-bg, #d9b66a); }

/* ── Button "Apri backtest" sotto la card soglia ── */
.ws-page .dd-bt-open-row { display:flex; justify-content:center; margin-top:18px; }
.ws-page .dd-bt-open-btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 22px; border-radius:var(--radius-md); cursor:pointer;
  font-family:var(--font-ui); font-size:.96rem; font-weight:600; color:var(--text-bright);
  background: color-mix(in srgb, var(--pill-active-bg, #d9b66a) 16%, var(--panel));
  border:1px solid color-mix(in srgb, var(--pill-active-bg, #d9b66a) 45%, var(--border));
  transition: border-color var(--ease), background var(--ease);
}
.ws-page .dd-bt-open-btn:hover {
  border-color: var(--pill-active-bg, #d9b66a);
  background: color-mix(in srgb, var(--pill-active-bg, #d9b66a) 26%, var(--panel));
}

/* ── Backtest dentro il modale: contenitore unico in colonna ── */
#wsChartModal .dd-bt-modal { display:flex; flex-direction:column; width:100%; min-width:0; }
#wsChartModal .dd-bt-modal-ctrls { display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin-bottom:14px; }
#wsChartModal .dd-bt-modal .dd-eq-stats { margin-bottom:10px; }
#wsChartModal .dd-bt-modal .dd-bt-wrap { flex:0 0 auto; }

/* ── Tabella "tutte le annate" sotto il button (cap. 5) ── */
.ws-page #ddYearlyTableWrap { margin-top:16px; }
.ws-page #ddYearlyTableWrap[hidden] { display:none; }

/* ── Hero card annuali ── */
.ws-page .ddm-yearly-hero-item {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

/* ── Filtri ciclo elettorale: stessi bordi/accenti del resto del report ── */
.ws-page .ddm-yearly-filters { background:transparent; border:none; padding:0; gap:8px; }
.ws-page .ddm-yearly-filters .ddm-th-btn {
  padding:7px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--card); color:var(--text-dim);
  font-family:var(--font-ui); font-size:.9rem; font-weight:600;
  transition:border-color var(--ease), background var(--ease), color var(--ease);
}
.ws-page .ddm-yearly-filters .ddm-th-btn:hover {
  border-color:var(--surface-border-strong); background:var(--card); color:var(--text-bright);
}
.ws-page .ddm-yearly-filters .ddm-th-btn.active {
  background: color-mix(in srgb, var(--pill-active-bg, #d9b66a) 16%, var(--card));
  border-color: color-mix(in srgb, var(--pill-active-bg, #d9b66a) 50%, var(--border));
  color:var(--text-bright); box-shadow:none;
}

/* ── Tutte le card e tabelle del report: superficie card (adattiva al tema) ── */
.ws-page .ws-chart-card,
.ws-page .ddm-ins-metric,
.ws-page .ddm-ins-summary,
.ws-page .dd-fas-card,
.ws-page .ddm-stat-card,
.ws-page .ddm-yearly-hero-item,
.ws-page .ddm-table-wrap,
.ws-page .ddm-table,
.ws-page .ddm-table th { background:var(--card); }

/* ── Tabella appendice (Catalogo episodi): tutti i font +2px ── */
.ws-page #ddCatalogWrap .ddm-table,
.ws-page #ddCatalogWrap .ddm-table th,
.ws-page #ddCatalogWrap .ddm-table td { font-size: calc(0.82rem + 2px); }
.ws-page #ddCatalogWrap .ddm-peak-badge { font-size: calc(0.6rem + 2px); }
/* Lo stile del teaser gated (.rpt-teaser*) è in global.css (riusabile da tutti i report). */