/* DTSC evolution - palette e font presi da Documenti/scheda_prototipo.html,
   applicati alle pagine reali del sito (scheda + pannello palazzo). */

:root {
  --teal: #1D7A8C; --ink: #12333B; --paper: #F6FAF9; --card: #FFFFFF;
  --line: #D8E6E4; --alt: #EDF5F4; --gold: #C9A227; --goldbg: #FBF3DC;
  --amber: #B45309; --amberbg: #FDF0E3; --ok: #1E7A46; --okbg: #E7F3EC;
  --muted: #5B7378;
  /* Testo dei badge/flash "a tinta" (es. .badge-ok, .flash-ok): in chiaro
     e' semplicemente la tinta forte (--ok/--amber), scelta apposta scura
     per leggersi su uno sfondo chiarissimo (--okbg ecc). Variabile separata
     (non --ok/--amber direttamente) perche' in tema scuro serve un colore
     DIVERSO, non lo stesso: vedi il blocco html[data-theme="dark"] sotto. */
  --ok-badge: var(--ok); --amber-badge: var(--amber); --gold-badge: #7a5c14;
  color-scheme: light;
}

/* Tema scuro (richiesta utente 28/08/2026: "per tutti i giocatori
   servirebbe poter mettere lo sfondo scuro") - attivato aggiungendo
   data-theme="dark" su <html> (vedi lo script inline in base.html e
   static/js/tema_scuro.js per il bottone che lo cambia). Selettore su
   html[data-theme="dark"] (piu' specifico di :root da solo) cosi' vince
   sempre, anche sul colore primario personalizzato dal palazzo iniettato
   in un secondo <style>:root{...} in base.html - che infatti qui non viene
   toccato: --teal/--gold/--amber/--ok restano quelli scelti/di default in
   ogni tema, cambiano solo gli sfondi/i bordi/i testi neutri. */
html[data-theme="dark"] {
  --ink: #E7F3F1; --paper: #0F2027; --card: #16323A;
  --line: #24454C; --alt: #1C3940;
  --goldbg: #3A331A; --amberbg: #3A2415; --okbg: #163826;
  --muted: #93ADB1;
  /* Testo dei badge/flash "a tinta" (segnalato dall'utente 02/09/2026: "le
     spunte delle conferme con il tema scuro non si vedono"): --ok-badge/
     --amber-badge/--gold-badge NON restano ancorate a --ok/--amber (quelle
     restano invariate apposta, sono le tinte "di brand" - vedi sopra),
     diventano varianti chiare apposta per il nuovo sfondo scuro di
     --okbg/--amberbg/--goldbg. Senza, il testo scuro pensato per uno
     sfondo chiarissimo finiva su uno sfondo scuro quasi dello stesso
     colore (es. verde scuro su verde scuro) - illeggibile. */
  --ok-badge: #6FE0A0; --amber-badge: #F2A65A; --gold-badge: #E8C766;
  /* dice al browser di disegnare scrollbar/controlli nativi (checkbox,
     select, ecc.) in stile scuro invece che chiaro-su-scuro */
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  margin: 0;
}

/* Base per i controlli di form nativi (input/select/textarea): il browser
   li disegna comunque bianchi di default a prescindere dal tema della
   pagina, se non lo diciamo esplicitamente - senza questa regola resterebbero
   riquadri bianchi accecanti sul tema scuro. Regole piu' specifiche altrove
   nel file (bordi, padding, radius...) restano valide, qui si copre solo
   sfondo/colore/bordo cosi' che ogni campo segua il tema attivo di default. */
input, select, textarea {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

h1, h2, h3, .brand-name {
  font-family: "Barlow Condensed", "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: .3px;
}

.topbar {
  background: var(--teal);
  color: #fff;
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 16px 16px;
}
/* Voci di menu del topbar (richiesta utente 27/08/2026: "non si vedono
   tutti i menu" su mobile - senza questo, i link non avevano spazio per
   andare a capo e costringevano l'intera pagina a rimpicciolirsi per
   restare tutti sulla stessa riga). */
.topbar-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 8px; }
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
}
.brand-logo {
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  padding: 2px;
}
.brand-name {
  font-size: 1.3rem;
}
.topbar .admin-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255,255,255,.16);
  border: none;
  padding: 0.35rem 0.9rem;
  border-radius: 99px;
}
.topbar .admin-link:hover { background: rgba(255,255,255,.28); }
/* Il bottone del tema scuro riusa lo stile di .admin-link (stessa pillola
   degli altri link del topbar) ma e' un <button>, non un <a>: resetta i
   default del browser che .admin-link da solo non copre. */
.topbar button.admin-link { font: inherit; cursor: pointer; }

.container {
  max-width: 960px;
  margin: 1.5rem auto;
  background: var(--card);
  padding: 1.5rem 2rem 3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
}
/* Pagine con tabelle/card larghe (es. riepilogo di giornata: risultati
   pronosticati su una riga sola, richiesta utente 27/08/2026) possono
   allargarsi oltre i 960px standard via {% block main_class %} in base.html,
   senza toccare la larghezza di default di tutte le altre pagine. */
.container-wide { max-width: 1300px; }

h1 { font-size: 1.6rem; color: var(--ink); margin-bottom: 0.3rem; }
h2 {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 2rem;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0.3rem;
}
h3 { font-size: 1rem; margin-top: 1rem; margin-bottom: 0.3rem; color: var(--ink); }

.nota { color: var(--muted); font-size: 0.85rem; font-family: "Inter", sans-serif; font-weight: 400; }

.flash { padding: 0.6rem 1rem; margin-bottom: 0.75rem; border-radius: 8px; font-size: 0.9rem; }
.flash-error { background: var(--amberbg); color: var(--amber-badge); border: 1px solid #f0d3ae; }
.flash-ok    { background: var(--okbg); color: var(--ok-badge); border: 1px solid #b9dcc4; }

.giornata-box { margin-bottom: 1.5rem; }
.fantateam-list { columns: 2; }
.fantateam-list a { color: var(--teal); font-weight: 600; }

/* ---- tabelle: stile "scheda in stile Excel", ripulito ---- */
.scheda-sezione {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem 1.1rem 1.1rem;
  margin: 1.2rem 0;
}
.scheda-sezione h2 { margin-top: 0; }

/* Nav "salta a una sezione" nella scheda (richiesta utente 04/09/2026:
   "è possibile inserire dei pulsanti che... facciano saltare da una sezione
   all'altra?") - qui nel foglio globale perché la usa anche coppa_scheda.html
   (niente <style> locale come scheda.html) - scorrevole in orizzontale su
   mobile, stesso principio delle tabelle larghe. */
.scheda-nav { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0 14px; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; }
.scheda-nav a { flex: 0 0 auto; background: var(--card); border: 1.5px solid var(--teal);
  border-radius: 20px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--teal);
  text-decoration: none; white-space: nowrap; }
.scheda-nav a:hover, .scheda-nav a:focus { background: var(--teal); color: #fff; }

/* Contenitore scorrevole attorno a ogni .excel-table (inserito a runtime da
   static/js/table_scroll.js - richiesta utente 27/08/2026: senza questo,
   una tabella troppo larga per lo schermo costringeva l'INTERA pagina a
   rimpicciolirsi sui dispositivi mobili invece di restare a dimensione
   normale con solo la tabella scorrevole lateralmente). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.excel-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  border-radius: 10px;
  overflow: hidden;
}
.excel-table th, .excel-table td {
  border: 1px solid var(--line);
  padding: 0.4rem 0.6rem;
  text-align: left;
}
.excel-table thead th {
  background: var(--alt);
  color: var(--teal);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: .4px;
}
.excel-table tfoot td {
  background: var(--alt);
  font-weight: 700;
}
/* Intestazioni ordinabili (richiesta utente 28/08/2026, vedi
   static/js/tabella_ordinabile.js): un accenno visivo che la colonna e'
   cliccabile, oltre al cursore a mano gia' impostato da JS. */
.tabella-ordinabile thead th[data-ordina]:hover {
  background: var(--line);
}
/* Il tentativo di "tabella a schede" per la pagina Utenze (04/09/2026,
   classe tabella-cards-mobile) e' stato ripristinato lo stesso giorno su
   richiesta esplicita dell'utente dopo due correzioni non soddisfacenti
   ("cosi' non va bene deve essere tutto in verticale tutte le colonne
   affiancate, se non si puo' ripristina come era prima") - Utenze e'
   tornata alla normale .excel-table con solo lo scroll laterale di
   .table-scroll, come tutte le altre tabelle del progetto. Vedi DIARIO.md
   per la cronologia completa del tentativo. */

.excel-table select, .excel-table input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.3rem 0.4rem;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
}
.meta-prima  td { background: var(--card); }
.meta-seconda td { background: var(--alt); }

.btn-salva {
  display: inline-block;
  margin-top: 2rem;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(29,122,140,.3);
  text-decoration: none;
}
.btn-salva:hover { background: #175f6d; }

form.readonly .btn-salva { display: none; }

fieldset { border: none; padding: 0; margin: 0; }
fieldset:disabled { opacity: 0.6; }

/* ---- pannello palazzo ---- */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.6rem 0 1.2rem;
}
/* convalida.html: una riga per partita invece di una sezione ripetuta -
   il bordo tra le righe sostituisce la separazione che dava .scheda-sezione */
.riga-risultato-convalida {
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.riga-risultato-convalida:last-child { border-bottom: none; }
.form-inline input, .form-inline select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-family: inherit;
}

.btn-piccolo {
  display: inline-block;
  background: var(--alt);
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: 99px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  text-decoration: none;
}
.btn-piccolo:hover { background: #d9ebe9; }

/* goleadOro: evidenza oro come nel prototipo */
input[name^="goleadoro_meta"] { accent-color: var(--gold); }

/* Checkbox "Espulsioni" (convalida, item 158) - segnalato dall'utente
   06/09/2026: "la spunta nella giornata salvata non si vede". Una volta
   pubblicata/ufficiale la giornata l'input diventa disabled (sola lettura,
   niente piu' modifiche) e il browser applica di default un forte
   sbiadimento al controllo nativo - qui su sfondo scuro il segno di spunta
   risultava quasi invisibile. accent-color lo rende oro/ben visibile anche
   da spuntato; opacity forzata a 1 toglie lo sbiadimento automatico del
   solo stato disabled (il :disabled resta comunque non modificabile, cambia
   solo quanto si vede bene). */
input[type="checkbox"].valore-marcatore,
input[type="checkbox"].chk-riga {
  accent-color: var(--gold);
}
input[type="checkbox"].valore-marcatore:disabled,
input[type="checkbox"].chk-riga:disabled {
  opacity: 1;
}

/* ---- assegnazione valori con drag&drop (regola somma 9) ---- */
/* La barra colonne+pulsante resta agganciata in cima mentre si scorre il
   pool (che puo' essere lungo, con piu' campionati importati insieme):
   evita un drag&drop dalla cima alla fine della pagina. */
.dnd-columns-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  padding: 0.6rem 0;
  margin: 0 0 1rem;
  box-shadow: 0 8px 10px -8px rgba(18, 51, 59, 0.28);
}
.dnd-salva-riga {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.dnd-pool {
  padding: 0.8rem;
  margin: 0 0 1rem;
  background: var(--alt);
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  min-height: 3rem;
}
.dnd-lega { margin-bottom: 1rem; }
.dnd-lega:last-child { margin-bottom: 0; }
.dnd-lega h4 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dnd-lega-partite {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* pool marcatori: sotto-gruppo per squadra dentro al campionato */
.dnd-squadra { margin: 0 0 0.6rem 0.2rem; }
.dnd-squadra:last-child { margin-bottom: 0; }
.dnd-squadra h5 {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: var(--muted);
}
.dnd-columns {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
/* variante marcatori: 4 colonne (valore 1-4) invece di 10 (valore 0-9) */
.dnd-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}
.dnd-column {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}
.dnd-column-label {
  background: var(--teal);
  color: #fff;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 0.2rem 0;
}
.dnd-column-body {
  min-height: 4rem;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dnd-chip {
  background: var(--card);
  border: 1.5px solid var(--teal);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  cursor: grab;
  font-size: 0.78rem;
  line-height: 1.2;
  user-select: none;
}
.dnd-chip strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
}
.dnd-chip small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
}
.dnd-chip:active { cursor: grabbing; }
/* etichetta squalificato/infortunato (richiesta utente 23/07/2026): solo
   segnalazione, il giocatore resta scelto normalmente - vedi DIARIO.md */
.dnd-chip .dnd-stato { margin-top: 2px; font-size: 10px; padding: 1px 7px; }
/* chi gioca in casa: nome in maiuscolo. Trasferta: nome normale. Serve a
   capire subito, guardando la colonna/il pool, chi e' in casa senza dover
   leggere il "vs" in piccolo. */
.dnd-chip[data-side="home"] strong { text-transform: uppercase; }

/* ---- sorteggio animato del calendario di campionato ---- */
.calendario-stato {
  background: var(--goldbg);
  border: 1px solid #ecd48f;
  color: var(--gold-badge);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
/* Fascia "AMBIENTE DI TEST" (08/09/2026): in cima a ogni pagina della sola
   istanza test.dtsc.it. Deliberatamente vistosa e a tutta larghezza - il suo
   unico scopo e' impedire di lavorare mezz'ora sull'istanza sbagliata, quindi
   qui la discrezione sarebbe un difetto. Colori fissi e non da branding: il
   test ha lo stesso branding della produzione (il DB e' una sua copia), e se
   il palazzo cambia il colore primario questa fascia deve restare riconoscibile. */
.banner-ambiente {
  background: #7a1f1f;
  color: #fff;
  padding: 0.5rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.banner-ambiente a { color: #ffd9d9; text-decoration: underline; }

/* Timbro di versione (DIARIO item 174): informativo per chi lo cerca (il
   palazzo, per capire quale ambiente e' allineato), non un messaggio da
   notare - a differenza di .banner-ambiente, qui la discrezione e' voluta:
   deve sparire visivamente, non distrarre i giocatori. Assente in sviluppo
   (versione_deploy e' None senza versione.txt). */
.versione-deploy {
  margin-top: 2rem;
  text-align: center;
  color: #bbb;
  font-size: 0.7rem;
}

/* Errori di convalida (richiesta del palazzo 07/09/2026: gol assegnati oltre
   il risultato): stesso riquadro di .calendario-stato ma in rosso, perche'
   qui non e' un promemoria ma un dato sbagliato che blocca la pubblicazione. */
.errori-convalida {
  background: #fdecea;
  border-color: #f3b7ae;
  color: #8a2214;
}
@keyframes sorteggio-reveal {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.riga-sorteggiata {
  animation: sorteggio-reveal .5s ease-out both;
}

/* ---- badge / pillole di stato ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.5;
}
.badge-open  { background: var(--goldbg); color: var(--gold-badge); }
.badge-ok    { background: var(--okbg);   color: var(--ok-badge); }
.badge-warn  { background: var(--amberbg); color: var(--amber-badge); }
.badge-muted { background: var(--alt);    color: var(--muted); }

/* Partite designate (Risultati/SommaGol) in giornata.html: tinta leggera
   sulla riga, oltre al badge, cosi' saltano all'occhio anche scorrendo
   veloce l'elenco (prima si notavano solo aprendo la tendina). */
.riga-risultati { background: var(--okbg); }
.riga-sommagol  { background: var(--amberbg); }

/* ---- azioni a icona (tabelle del palazzo) ---- */
.azioni {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.azioni a, .azioni button.link-icona {
  color: var(--teal);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
}
.azioni a:hover, .azioni button.link-icona:hover { background: var(--alt); }
.azioni a.pericolo, .azioni button.link-icona.pericolo { color: var(--amber); }

/* ---- hero (homepage) ---- */
.hero {
  background: var(--paper);
  text-align: center;
  padding: 28px 20px 32px;
  border-radius: 14px;
  margin: -0.5rem 0 1.5rem;
}
.hero .eyebrow {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 6px;
}
.hero h1 { font-size: 24px; margin: 0 0 8px; }
.hero p.lead { font-size: 13.5px; color: var(--muted); max-width: 440px; margin: 0 auto 20px; }
.hero .cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero .cta a { text-decoration: none; margin-top: 0; }

.btn-secondario {
  display: inline-block;
  background: var(--card);
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 10px;
  padding: 0.65rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondario:hover { background: var(--alt); }

/* ---- card giornata (vista cantina) ---- */
.giornata-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--alt);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
}
.giornata-card.chiusa { background: var(--card); border: 1px solid var(--line); }
.giornata-card .numero {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 17px;
  margin: 0;
}
.giornata-card .numero .squadra {
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 12.5px; color: var(--muted);
}
.giornata-card .cutoff { font-size: 12px; color: var(--amber); font-weight: 600; margin: 4px 0 0; }
.giornata-card .vai {
  background: var(--teal); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; white-space: nowrap; flex-shrink: 0;
}
.giornata-card.chiusa .vai { background: var(--alt); color: var(--muted); }

/* ---- classifica generale: righe con podio ---- */
.classifica-riga {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
}
.classifica-riga .pos {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--alt); color: var(--muted);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.classifica-riga.oro     { background: var(--goldbg); }
.classifica-riga.oro .pos     { background: var(--gold); color: #fff; }
.classifica-riga .nome { flex: 1; font-weight: 600; font-size: 13.5px; }
.classifica-riga .dettaglio { font-size: 12px; color: var(--muted); }
.classifica-riga .punti { font-weight: 800; font-size: 14px; font-family: "Barlow Condensed", sans-serif; }

/* ---- topbar: link con icona ---- */
.topbar .admin-link i, .topbar a.brand + a i { margin-right: 4px; }

/* ---- card di accesso/registrazione/onboarding ---- */
.auth-card {
  max-width: 380px;
  margin: 0.5rem auto 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 26px 28px;
}
.auth-card h1 { text-align: center; font-size: 1.4rem; }
.auth-card > p.nota { text-align: center; }
.auth-card form.form-inline {
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  margin: 1rem 0 0;
}
.auth-card form.form-inline p { margin: 0; }
.auth-card form.form-inline label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.auth-card form.form-inline input { width: 100%; height: 38px; }
.auth-card .btn-salva { width: 100%; text-align: center; margin-top: 0.6rem; }

/* Bottone "mostra/nascondi password" (static/js/toggle_password.js aggiunge
   questo wrapper attorno a OGNI input[type=password] del sito, login incluso) */
.campo-password { position: relative; display: block; width: 100%; }
.campo-password input { padding-right: 2.2rem !important; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--teal); }

/* ---- riepilogo: menu a piastrelle + varianti ---- */
.riepilogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 1rem 0;
}
.riepilogo-tile {
  display: block;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
}
.riepilogo-tile:hover { border-color: var(--teal); background: var(--alt); }
.riepilogo-tile i { font-size: 22px; color: var(--teal); }
.riepilogo-tile h3 { margin: 0.5rem 0 0.2rem; font-size: 1.05rem; color: var(--ink); }
.riepilogo-tile p { margin: 0; font-size: 0.82rem; color: var(--muted); }
/* Riusata anche nel pannello palazzo (dashboard.html): tile che richiedono
   super_admin (Utenze, Branding) mostrano questo angolino, coerente con la
   stessa restrizione gia' applicata lato route. */
.riepilogo-tile .tile-badge { position: absolute; top: 0.7rem; right: 0.7rem; }

.giornata-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.8rem 0 1.2rem; }
.giornata-picker a, .giornata-picker span {
  display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--line); color: var(--muted);
}
.giornata-picker a.attiva { background: var(--teal); color: #fff; border-color: var(--teal); }
.giornata-picker a:hover { border-color: var(--teal); color: var(--teal); }
.giornata-picker span.bloccata { color: var(--line); }

.speciali-turno {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.8rem;
}
.speciali-turno h3 { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--teal); }
.speciali-cat { display: flex; align-items: baseline; gap: 6px; font-size: 0.86rem; margin: 0.25rem 0; }
.speciali-cat .lab { color: var(--muted); min-width: 9rem; display: inline-block; }
.speciali-cat .val { font-weight: 800; font-family: "Barlow Condensed", sans-serif; color: var(--gold); }

.calendario-turno { margin-bottom: 1.2rem; }
.calendario-turno h3 { font-size: 0.95rem; color: var(--teal); margin: 0 0 0.4rem; }
.calendario-match {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-bottom: 1px solid var(--alt); font-size: 0.88rem;
}
.calendario-match:last-child { border-bottom: none; }
.calendario-match .esito { font-weight: 700; font-family: "Barlow Condensed", sans-serif; }

/* Checklist requisiti password: si spunta dal vivo mentre si scrive */
.password-policy {
  list-style: none; margin: 0.2rem 0 0.8rem; padding: 0;
  font-size: 0.82rem; color: var(--muted);
}
.password-policy li { position: relative; padding-left: 20px; line-height: 1.7; }
.password-policy li::before {
  content: "\25CB"; position: absolute; left: 0; color: var(--muted); font-size: 0.8rem;
}
.password-policy li.ok { color: var(--ok); }
.password-policy li.ok::before { content: "\2713"; color: var(--ok); font-weight: 700; }

/* La mia squadra: coppia di grafici affiancati (impilati su schermi stretti) */
.grafico-coppia {
  display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 1rem 0 1.4rem;
}
.grafico-box {
  flex: 1 1 320px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.9rem 1rem;
}
.grafico-box h3 { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--teal); }
