:root {
  --sfondo: #f5f5f5;
  --superficie: #ffffff;
  --testo: #242424;
  --testo-2: #616161;
  --bordo: #e0e0e0;
  --primario: #5b5fc7;
  --primario-testo: #ffffff;
  --ok: #107c10;
  --ok-sfondo: #dff6dd;
  --avviso: #8a5300;
  --avviso-sfondo: #fff4ce;
  --critico: #b10e1c;
  --critico-sfondo: #fde7e9;
  --neutro-sfondo: #f0f0f0;
  --raggio: 8px;
  color-scheme: light;
}
:root[data-tema="dark"] {
  --sfondo: #1f1f1f;
  --superficie: #292929;
  --testo: #ffffff;
  --testo-2: #c7c7c7;
  --bordo: #3d3d3d;
  --primario: #7f85f5;
  --primario-testo: #111111;
  --ok: #54b054;
  --ok-sfondo: #0e2d0e;
  --avviso: #f2c661;
  --avviso-sfondo: #3d2f00;
  --critico: #f1707b;
  --critico-sfondo: #3f1011;
  --neutro-sfondo: #333333;
  color-scheme: dark;
}
:root[data-tema="contrast"] {
  --sfondo: #000000;
  --superficie: #000000;
  --testo: #ffffff;
  --testo-2: #ffffff;
  --bordo: #ffffff;
  --primario: #ffff01;
  --primario-testo: #000000;
  --ok: #3ff23f;
  --ok-sfondo: #000000;
  --avviso: #ffff01;
  --avviso-sfondo: #000000;
  --critico: #ff8080;
  --critico-sfondo: #000000;
  --neutro-sfondo: #000000;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sfondo); color: var(--testo); }
body { font: 14px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
h1 { font-size: 18px; margin: 0; font-weight: 600; }
h2 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }

.testata { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pillola { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--neutro-sfondo); color: var(--testo-2); }
.pillola.aperto { background: var(--ok-sfondo); color: var(--ok); }

.avviso { margin: 0; padding: 8px 12px; border-radius: var(--raggio); background: var(--avviso-sfondo); color: var(--avviso); border: 1px solid currentColor; }

.copertura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.riquadro { background: var(--superficie); border: 1px solid var(--bordo); border-left: 4px solid var(--ok); border-radius: var(--raggio); padding: 10px 12px; min-width: 0; }
.riquadro h2 { font-size: 12px; color: var(--testo-2); margin-bottom: 2px; }
.riquadro .valore { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.riquadro .dettaglio { margin: 2px 0 0; font-size: 12px; color: var(--testo-2); overflow-wrap: anywhere; }
.riquadro.scoperto { border-left-color: var(--avviso); background: var(--avviso-sfondo); }
.riquadro.scoperto .valore { color: var(--avviso); }
.riquadro.critico { border-left-color: var(--critico); background: var(--critico-sfondo); }
.riquadro.critico .valore { color: var(--critico); }
.riquadro.spento { border-left-color: var(--bordo); }

.blocco { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px; }

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

.stati { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; margin-bottom: 12px; }
.stati button { background: var(--superficie); border: 0; border-right: 1px solid var(--bordo); padding: 8px 4px; font-weight: 600; }
.stati button:last-child { border-right: 0; }
.stati button[aria-checked="true"] { background: var(--primario); color: var(--primario-testo); }

.presidi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.presidio { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: var(--raggio); border: 1px solid var(--bordo); background: var(--superficie); min-width: 0; }
.presidio .nome { font-weight: 600; }
.presidio .sotto { font-size: 12px; color: var(--testo-2); overflow-wrap: anywhere; }
.presidio[aria-pressed="true"] { background: var(--primario); color: var(--primario-testo); border-color: var(--primario); }
.presidio[aria-pressed="true"] .sotto { color: inherit; }

.motivo { margin: 8px 0 0; font-size: 12px; color: var(--testo-2); }

.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--bordo); }
.team li:last-child { border-bottom: 0; }
.team .chi { font-weight: 600; flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.etichetta { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--neutro-sfondo); color: var(--testo-2); white-space: nowrap; }
.etichetta.disponibile { background: var(--ok-sfondo); color: var(--ok); }
.etichetta.pausa { background: var(--avviso-sfondo); color: var(--avviso); }
.etichetta.presidio { background: transparent; border: 1px solid var(--bordo); color: var(--testo); }
.etichetta.teams { background: var(--critico-sfondo); color: var(--critico); }

.nota { margin: 0; font-size: 12px; color: var(--testo-2); }

.messaggio { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 8px 14px; border-radius: var(--raggio); background: var(--testo); color: var(--sfondo); font-size: 13px; }

.vuoto { padding: 40px 16px; text-align: center; color: var(--testo-2); }

@media (max-width: 520px) {
  .copertura, .presidi { grid-template-columns: 1fr; }
}