/* 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;
  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;
  /* 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); border: 1px solid #f0d3ae; }
.flash-ok    { background: var(--okbg); color: var(--ok); 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; }

/* 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);
}
.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); }

/* ---- 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: #7a5c14;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
@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: #7a5c14; }
.badge-ok    { background: var(--okbg);   color: var(--ok); }
.badge-warn  { background: var(--amberbg); color: var(--amber); }
.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); }
