/* Dashboard delle statistiche — stessa palette del sito (prugna e pastelli) */
:root {
  --fondo: #201830; --fondo-2: #1a1328; --superficie: #2a2140; --superficie-2: #302848;
  --barra: #9a7bf5; --barra-attiva: #b39cf8; --lilla: #c4b0f0; --rosa: #d098c8;
  --testo: #ffffff; --testo-2: #d4cce2; --testo-3: #a69cbd; --filo: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--fondo); }
body { margin: 0; background: var(--fondo); color: var(--testo-2); font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2 { margin: 0; color: var(--testo); letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--lilla); outline-offset: 2px; border-radius: 6px; }

.marchio { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--testo); font-size: 18px; font-weight: 800; }
.marchio img { border-radius: 10px; }

.testata { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); background: rgba(32, 24, 48, 0.92); border-bottom: 1px solid var(--filo); backdrop-filter: blur(10px); }
.periodo { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--filo); border-radius: 999px; background: var(--fondo-2); }
.periodo button { padding: 7px 14px; border: 0; border-radius: 999px; background: none; color: var(--testo-2); font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; }
.periodo button[aria-pressed="true"] { background: var(--lilla); color: var(--fondo); }
.esci { color: var(--testo-3); font-weight: 600; text-decoration: none; }
.esci:hover { color: var(--testo); }

main { width: min(100% - 32px, 1160px); margin: 24px auto 40px; }
.stato { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--filo); border-radius: 14px; background: var(--superficie); color: var(--testo); }

.riquadri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.riquadro { padding: 18px; border: 1px solid var(--filo); border-radius: 16px; background: var(--superficie); }
.riquadro__nome { display: block; color: var(--testo-3); font-size: 13px; font-weight: 600; }
.riquadro b { display: block; margin-top: 6px; color: var(--testo); font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.scheda { position: relative; padding: 18px 18px 16px; border: 1px solid var(--filo); border-radius: 18px; background: var(--superficie); }
.scheda--larga { margin-bottom: 14px; }
.scheda h2 { font-size: 17px; }
.sottotitolo { margin: 2px 0 12px; color: var(--testo-3); font-size: 13px; }
.griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .griglia { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.grafico .asse { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.grafico .etichetta { fill: var(--testo-3); font-size: 11px; }
.grafico .bersaglio { fill: transparent; }
.grafico .barra { fill: var(--barra); }
.grafico .colonna { outline: none; cursor: default; }
.grafico .colonna:hover .barra, .grafico .colonna:focus .barra { fill: var(--barra-attiva); }
.grafico .colonna:focus-visible .bersaglio { fill: rgba(196, 176, 240, 0.12); }
.suggerimento { position: absolute; top: 58px; transform: translateX(-50%); padding: 8px 12px; border: 1px solid var(--filo); border-radius: 10px; background: var(--fondo-2); color: var(--testo); font-size: 13px; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }

.barre { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.barre li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.barre__nome { overflow: hidden; color: var(--testo-2); text-overflow: ellipsis; white-space: nowrap; }
.barre__traccia { height: 10px; border-radius: 0 4px 4px 0; background: rgba(255, 255, 255, 0.05); }
.barre__barra { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--barra); }
.barre__valore { min-width: 3ch; color: var(--testo); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.barre .vuoto { display: block; color: var(--testo-3); }

.tabella { margin-top: 12px; }
.tabella summary { color: var(--lilla); font-weight: 600; cursor: pointer; }
.tabella table { width: 100%; margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabella th, .tabella td { padding: 6px 8px; border-bottom: 1px solid var(--filo); text-align: right; }
.tabella th:first-child { text-align: left; font-weight: 500; color: var(--testo-2); }
.tabella thead th { color: var(--testo-3); font-size: 13px; }

.piede { margin: 22px 0 0; color: var(--testo-3); font-size: 13px; }

.pagina-accesso { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.accesso { width: min(100%, 380px); padding: 28px; border: 1px solid var(--filo); border-radius: 22px; background: var(--superficie); }
.accesso h1 { margin: 18px 0 6px; font-size: 24px; }
.accesso .nota { margin: 0 0 20px; color: var(--testo-3); }
.accesso label { display: block; margin-bottom: 6px; color: var(--testo); font-weight: 600; }
.accesso input { width: 100%; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: var(--fondo-2); color: var(--testo); font: inherit; }
.accesso button { width: 100%; margin-top: 16px; padding: 13px; border: 0; border-radius: 999px; background: var(--rosa); color: var(--fondo); font: 700 16px/1 inherit; font-family: inherit; cursor: pointer; }
.errore { margin: 10px 0 0; color: #ffb3c7; font-weight: 600; }

@media (max-width: 860px) { .riquadri { grid-template-columns: repeat(2, minmax(0, 1fr)); } .griglia { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }