:root {
  --sfondo: #12141a;
  --superficie: #1c1f28;
  --bordo: #2c3140;
  --testo: #e8eaf0;
  --tenue: #9aa3b8;
  --accento: #3ddc84;
  --allarme: #ff6b6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--sfondo);
  color: var(--testo);
}

a { color: var(--accento); }

.barra {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  padding: .75rem 1rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}
.marchio { font-weight: 700; text-decoration: none; }
.barra nav { display: flex; gap: 1rem; flex: 1; }
.utente { color: var(--tenue); font-size: .875rem; }

main { padding: 1rem; max-width: 70rem; margin: 0 auto; }

h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }

.riquadro {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.modulo { display: grid; gap: 1rem; max-width: 24rem; }
.modulo label { display: grid; gap: .25rem; }
.modulo small { color: var(--tenue); }

input, select, button {
  font: inherit;
  padding: .6rem .7rem;
  border-radius: .375rem;
  border: 1px solid var(--bordo);
  background: var(--sfondo);
  color: var(--testo);
}

button {
  background: var(--accento);
  color: #0d1117;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  /* Bersaglio comodo da toccare col pollice durante l'asta. */
  min-height: 2.75rem;
}

.avviso { padding: .75rem 1rem; border-radius: .375rem; }
.avviso-errore { background: #3a1d1d; color: #ffc9c9; }
.avviso-ok { background: #16301f; color: #b2f2bb; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: .5rem; text-align: left; border-bottom: 1px solid var(--bordo); }
th { color: var(--tenue); font-weight: 600; font-size: .8125rem; }

@media (min-width: 48rem) {
  main { padding: 1.5rem; }
  h1 { font-size: 2rem; }
}

.tenue { color: var(--tenue); font-weight: 400; }

.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.filtri input[type="search"] { flex: 1 1 12rem; }
.inline { display: flex; align-items: center; gap: .375rem; }

.stato {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 1rem;
  font-size: .75rem;
  background: var(--bordo);
}
.stato-lungo_degente { background: #4a1616; color: #ffc9c9; }
.stato-infortunato   { background: #4a3416; color: #ffe0a3; }
.stato-in_dubbio     { background: #3a3a16; color: #f0f0a3; }
.stato-squalificato  { background: #3a1642; color: #e5c9ff; }

/* Su schermo stretto la tabella scorre invece di rompere il layout. */
table { display: block; overflow-x: auto; white-space: nowrap; }
@media (min-width: 48rem) {
  table { display: table; white-space: normal; }
}

.griglia-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 48rem) { .griglia-4 { grid-template-columns: repeat(4, 1fr); } }

.preset-elenco { display: grid; gap: .5rem; }
@media (min-width: 48rem) { .preset-elenco { grid-template-columns: repeat(2, 1fr); } }
.preset {
  display: grid; gap: .25rem; text-align: left;
  background: var(--sfondo); color: var(--testo);
  border: 1px solid var(--bordo);
}
.preset small { color: var(--tenue); font-weight: 400; }

fieldset { border: 1px solid var(--bordo); border-radius: .375rem; margin: 0 0 1rem; }
legend { color: var(--tenue); font-size: .8125rem; padding: 0 .375rem; }
.slot-riga { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot { display: grid; gap: .125rem; width: 4.5rem; }
.slot span { color: var(--tenue); font-size: .75rem; }
.slot input { width: 100%; }

.totale { float: right; font-size: .875rem; font-weight: 400; color: var(--tenue); }
.totale.sforato { color: var(--allarme); font-weight: 700; }

.slot-rosa { border-bottom: 1px solid var(--bordo); padding: .5rem 0; }
.slot-rosa summary {
  display: flex; align-items: baseline; gap: .5rem;
  cursor: pointer; list-style: none;
}
.slot-rosa summary::-webkit-details-marker { display: none; }
.posizione { color: var(--tenue); width: 2rem; font-size: .8125rem; }
.prezzo {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--accento);
}
.alternative { margin: .5rem 0 .25rem 2rem; padding: 0; color: var(--tenue); }
.alternative li { display: flex; gap: .5rem; padding: .125rem 0; }

/* Il cruscotto resta visibile mentre si scorre: durante l'asta i crediti
   servono sempre, non solo in cima alla pagina. */
.cruscotto {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: baseline;
  padding: .75rem 1rem;
  margin: -1rem -1rem 1rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}
.metrica { display: grid; }
.metrica .etichetta { color: var(--tenue); font-size: .6875rem; text-transform: uppercase; }
.metrica strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.metrica.evidenza strong { color: var(--accento); font-size: 2rem; }

.reparti { display: flex; gap: .375rem; width: 100%; }
.reparto {
  font-size: .75rem; padding: .125rem .5rem;
  border-radius: 1rem; background: var(--sfondo); color: var(--tenue);
}
.reparto.completo { background: #16301f; color: #b2f2bb; }

#cerca { width: 100%; font-size: 1.125rem; }

/* "Portiere 1" ecc. non ci sta nella larghezza fissa pensata per "P1":
   qui l'etichetta è per esteso (Task 13, punto 8), quindi si adatta al
   contenuto invece di andare a capo su due righe. */
#obiettivi-rosa .posizione { width: auto; white-space: nowrap; }

.risultati, .obiettivi { list-style: none; margin: .75rem 0 0; padding: 0; }
.risultati li, .obiettivi li {
  display: grid; gap: .5rem;
  padding: .625rem 0; border-bottom: 1px solid var(--bordo);
}
.voce-testa { display: flex; flex-wrap: wrap; gap: .375rem; align-items: baseline; }

.preso { opacity: .5; }
.preso > strong, .preso .voce-testa strong { text-decoration: line-through; }
.mio { opacity: 1; }
.mio > strong { text-decoration: none; color: var(--accento); }

.acquisto { display: flex; flex-wrap: wrap; gap: .5rem; }
.acquisto input { width: 6rem; }
button.secondario { background: var(--bordo); color: var(--testo); }

.ripieghi { list-style: none; margin: .25rem 0 0 1.5rem; padding: 0; font-size: .875rem; }
.ripieghi li { display: flex; gap: .5rem; padding: .125rem 0; border: 0; color: var(--tenue); }

/* admin.php: riga dell'amministratore evidenziata nell'elenco utenti. */
.riga-admin { background: rgba(61, 220, 132, .08); }
.badge-admin {
  display: inline-block;
  margin-left: .375rem;
  padding: .0625rem .5rem;
  border-radius: 1rem;
  background: var(--accento);
  color: #0b3d24;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}