:root {
  color-scheme: light dark;
  --blu: #1F3A5F;
  --blu-chiaro: #E7EDF5;
  --fondo: #F4F6FA;
  --carta: #FFFFFF;
  --testo: #1B2430;
  --tenue: #5F6B7A;
  --bordo: #D3D9E2;
  --ambra: #FBEFCB;
  --ambra-testo: #6B4E00;
  --rosso: #FBE3E1;
  --rosso-testo: #8A1F14;
  --verde: #2E7D4F;
  --accento: #2F6DB5;
  --ombra: 0 1px 2px rgba(20, 30, 50, .06), 0 2px 8px rgba(20, 30, 50, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blu: #8FB4E6;
    --blu-chiaro: #1E2A3A;
    --fondo: #10151C;
    --carta: #18202A;
    --testo: #E6EBF2;
    --tenue: #9AA6B5;
    --bordo: #2C3846;
    --ambra: #3A3016;
    --ambra-testo: #F2D58A;
    --rosso: #3D1E1B;
    --rosso-testo: #F3B2AA;
    --verde: #6CC593;
    --accento: #79A9E8;
    --ombra: none;
  }
}
:root[data-theme="dark"] {
  --blu: #8FB4E6; --blu-chiaro: #1E2A3A; --fondo: #10151C; --carta: #18202A; --testo: #E6EBF2;
  --tenue: #9AA6B5; --bordo: #2C3846; --ambra: #3A3016; --ambra-testo: #F2D58A; --rosso: #3D1E1B;
  --rosso-testo: #F3B2AA; --verde: #6CC593; --accento: #79A9E8; --ombra: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--testo);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accento); }
h1 { font-size: 1.35rem; margin: 0 0 .3rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h3 { font-size: .95rem; margin: .8rem 0 .4rem; }
small, .nota { color: var(--tenue); }
.nota { font-size: .85rem; margin: .4rem 0; }

.testa {
  position: sticky; top: 0; z-index: 10; background: var(--carta); border-bottom: 1px solid var(--bordo);
  padding: calc(env(safe-area-inset-top) + 8px) 16px 0;
}
.riga-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.marchio { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marchio div { display: flex; flex-direction: column; min-width: 0; }
.marchio small { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo {
  width: 32px; height: 32px; border-radius: 8px; background: #1F3A5F; color: #fff; display: grid;
  place-items: center; font-weight: 700; flex: none;
}
.azioni-testa { display: flex; gap: 6px; flex: none; }

.bottone {
  appearance: none; border: 0; border-radius: 8px; background: #1F3A5F; color: #fff; font: inherit;
  font-weight: 600; padding: 10px 16px; cursor: pointer; min-height: 40px;
}
.bottone:disabled { opacity: .5; cursor: default; }
.bottone.leggero { background: var(--blu-chiaro); color: var(--blu); padding: 6px 12px; min-height: 34px; font-size: .85rem; }

.filtri { display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 6px; flex-wrap: wrap; }
.filtri label { display: flex; flex-direction: column; font-size: .72rem; color: var(--tenue); gap: 2px; flex: 1 1 140px; min-width: 0; }
.filtri select, .filtri input, .cerca {
  font: inherit; font-size: 16px; color: var(--testo); background: var(--fondo); border: 1px solid var(--bordo);
  border-radius: 8px; padding: 7px 10px; width: 100%; min-height: 38px;
}
.menu { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 12px; }
.menu::-webkit-scrollbar { display: none; }
.menu a {
  flex: none; padding: 9px 10px; text-decoration: none; color: var(--tenue); font-size: .88rem;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.menu a.attiva { color: var(--blu); border-bottom-color: var(--blu); font-weight: 600; }

main { max-width: 1180px; margin: 0 auto; padding: 14px 16px calc(env(safe-area-inset-bottom) + 32px); }
.ingresso { max-width: 420px; margin: 12vh auto 0; text-align: center; }
.ingresso p { color: var(--tenue); }

.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 14px; margin-bottom: 14px; box-shadow: var(--ombra); }
.griglia { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-bottom: 14px; }
.kpi { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px; box-shadow: var(--ombra); }
.kpi small { display: block; font-size: .78rem; }
.kpi strong { display: block; font-size: 1.35rem; margin-top: 2px; letter-spacing: -.01em; }
.kpi span { font-size: .75rem; color: var(--tenue); }
.due { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .due { grid-template-columns: 1fr 1fr; } }

.avviso { border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: .9rem; background: var(--ambra); color: var(--ambra-testo); }
.avviso.grave { background: var(--rosso); color: var(--rosso-testo); }
.avviso.buono { background: var(--blu-chiaro); color: var(--blu); }

.tabella { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .87rem; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--bordo); text-align: left; white-space: nowrap; vertical-align: top; }
th { font-size: .75rem; color: var(--tenue); font-weight: 600; background: var(--carta); position: sticky; top: 0; }
td.n, th.n { text-align: right; }
th.ordinabile { cursor: pointer; user-select: none; -webkit-user-select: none; }
th.ordinabile:hover { color: var(--testo); }
th[aria-sort="ascending"]::after { content: " ▲"; font-size: .65rem; }
th[aria-sort="descending"]::after { content: " ▼"; font-size: .65rem; }
td:first-child, th:first-child { position: sticky; left: 0; background: var(--carta); z-index: 1; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
td.lungo { white-space: normal; min-width: 220px; }
tr.cliccabile { cursor: pointer; }
tr.cliccabile:hover td { background: var(--blu-chiaro); }
.pillola { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; background: var(--blu-chiaro); color: var(--blu); }
.pillola.ambra { background: var(--ambra); color: var(--ambra-testo); }
.pillola.rossa { background: var(--rosso); color: var(--rosso-testo); }
.barra { height: 6px; background: var(--blu-chiaro); border-radius: 3px; min-width: 60px; }
.barra i { display: block; height: 100%; background: var(--accento); border-radius: 3px; }
.grafico { position: relative; height: 260px; }
.vuoto { color: var(--tenue); font-style: italic; }
.piu { margin-top: 8px; }
dl.dati { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: .9rem; }
dl.dati dt { color: var(--tenue); }
dl.dati dd { margin: 0; }
.attesa { text-align: center; color: var(--tenue); padding: 40px 0; }