/* Borgofit - tema "Notte blu" (solo scuro). Derivato da docs/mockup-notte-blu.html e dal CSS del sito DMARC. */

/* Palette e misure */
:root{
  color-scheme:dark;
  --bg:#0d1226;--panel:#151c36;--panel2:#1b2447;--ink:#e6eaf8;--muted:#9aa5c6;--line:#263056;
  --accent:#7b92ff;--accent-ink:#0d1226;--accent2:#4cc38a;--good:#4cc38a;--warn:#f0a35a;--bad:#ff7b7b;
  --fd:"Plus Jakarta Sans",system-ui,sans-serif;--fb:"Plus Jakarta Sans",system-ui,sans-serif;--fn:"Plus Jakarta Sans",system-ui,sans-serif;
  --r:14px;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{background:var(--bg);min-height:100vh}
h1,h2,h3{font-family:var(--fd);margin:0;text-wrap:balance}
button,select,textarea,input{font:inherit;color:inherit}
a{color:var(--accent)}
/* Focus ben visibile per chi usa la tastiera */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.num{font-family:var(--fn);font-variant-numeric:tabular-nums}

/* Impaginazione: sidebar a sinistra e contenuto */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.side{background:linear-gradient(180deg,#141c3b,#0a0f21);padding:22px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;align-self:start}
.brand{display:flex;gap:12px;align-items:center;padding:4px 10px 20px}
.logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#5b7bff,#2a3fd6);display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;box-shadow:0 6px 14px rgba(61,90,254,.4);font-family:var(--fd)}
.brand strong{display:block;font-size:15px;font-family:var(--fd)}
.brand small{color:var(--muted);font-size:12px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;min-height:44px;border-radius:10px;color:#b4bfdf;font-weight:500;text-decoration:none}
.nav a svg{width:19px;height:19px;fill:currentColor;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a[aria-current="page"]{background:rgba(123,146,255,.2);color:#fff;box-shadow:inset 3px 0 0 #8ea2ff}
.side-foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.side-foot a{color:#fff;text-decoration:none}
.side-foot a:hover{text-decoration:underline}
.side-foot .logout{display:inline;margin:0}
.side-foot .linklike{background:none;border:0;padding:0;font:inherit;color:#fff;cursor:pointer}
.side-foot .linklike:hover{text-decoration:underline}
.content{padding:28px clamp(16px,3vw,40px) 48px;min-width:0}

/* Intestazione pagina e selettore stagione */
.top{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;margin-bottom:22px}
.top h1{font-size:26px;font-weight:700;letter-spacing:-.01em}
.season{display:flex;align-items:center;gap:10px}
.season label{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.sel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;min-height:44px;cursor:pointer}

/* Schede e griglie */
.panel{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;min-width:0}
.panel h2{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--ink)}
.panel h2 small{color:var(--muted);font-weight:500;margin-left:8px;font-size:12.5px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g21{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:18px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.kpi{background:var(--panel);border-radius:var(--r);padding:16px 18px;border-top:3px solid var(--line);box-shadow:var(--shadow)}
.kpi label{display:block;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.kpi b{display:block;font-family:var(--fn);font-size:28px;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted);font-size:12.5px}
.kpi.t1{border-top-color:var(--accent)}.kpi.t2{border-top-color:var(--good)}.kpi.t3{border-top-color:var(--warn)}

/* Ultima partita in evidenza */
.hero{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;text-align:center;background:linear-gradient(135deg,var(--panel2),var(--panel));border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.hero .meta{grid-column:1/-1;color:var(--muted);font-size:13px}
.hero .tm{font-family:var(--fd);font-weight:700;font-size:20px}
.hero .sc{font-family:var(--fn);font-size:46px;font-weight:700;letter-spacing:.02em}
.hero .mvp{grid-column:1/-1;font-size:13.5px;color:var(--muted)}
.hero .mvp b{color:var(--ink)}

/* Tabelle */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
td.r,th.r{text-align:right}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
tr.sel-row td{background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.muted{color:var(--muted)}

/* Pillole V/P/S, medie voto e cartellini */
.pill{display:inline-block;min-width:26px;text-align:center;padding:2px 9px;border-radius:999px;font-weight:700;font-size:12.5px}
.pill.V{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good)}
.pill.P{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.pill.S{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}
.pill.n{background:var(--panel2);color:var(--muted)}
.rate{display:inline-block;min-width:44px;text-align:center;padding:3px 8px;border-radius:8px;font-weight:700;font-family:var(--fn)}
.r-hi{background:color-mix(in srgb,var(--good) 24%,transparent);color:var(--good)}
.r-mid{background:var(--panel2);color:var(--ink)}
.r-lo{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}
.card-y,.card-r{display:inline-block;width:11px;height:15px;border-radius:2px;vertical-align:-2px;margin-right:4px}
.card-y{background:#f2d44b}.card-r{background:#e5483b}

/* Barre di classifica */
.rank{display:flex;flex-direction:column;gap:11px}
.rk{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center}
.rk .n{font-family:var(--fn);color:var(--muted);font-weight:600;text-align:center}
.rk .who{display:flex;flex-direction:column;gap:5px;min-width:0}
.rk .who span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .who i{display:block;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent2)))}
.rk .v{font-family:var(--fn);font-size:20px;font-weight:700}
.rk:first-child .n{color:var(--accent)}

/* Elenco calendario */
.cal{display:flex;flex-direction:column;gap:6px}
.cal a,.cal button{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;text-decoration:none;color:inherit;background:var(--panel2);border:1px solid transparent;border-radius:calc(var(--r) - 3px);padding:11px 14px;cursor:pointer;min-height:56px}
.cal a:hover,.cal button:hover{border-color:var(--line)}
.cal [aria-current="true"],.cal [aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
.cal .g{font-family:var(--fn);color:var(--muted);font-weight:700}
.cal .o{display:flex;flex-direction:column;min-width:0}
.cal .o b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .o small{color:var(--muted);font-size:12.5px}
.cal .res{font-family:var(--fn);font-weight:700;display:flex;gap:10px;align-items:center}
/* Partite future: sfondo e bordo attenuati, mai opacita' sul testo (manterrebbe il contrasto sotto soglia) */
.cal .fut{background:var(--panel);border:1px dashed var(--line)}

/* Grafici (canvas Chart.js e legenda) */
.chartbox{position:relative;width:100%;height:280px}
.legend{display:flex;gap:16px;color:var(--muted);font-size:12.5px;margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:-1px}
.legend i.o{background:transparent;border:2px solid var(--accent)}

/* Scheda giocatore */
.phead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.avatar{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:var(--accent-ink);font-family:var(--fd);font-weight:800;font-size:28px}
.phead h2{font-size:24px;margin:0}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tag{background:var(--panel2);color:var(--muted);border-radius:99px;padding:3px 11px;font-size:12.5px;font-weight:600}
.cm{font-style:italic;color:var(--muted)}

/* Inserimento: fasi, avanzamento, campi, stepper del voto, interruttori */
.steps{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:3px;margin-bottom:18px}
.steps button,.steps a{background:none;border:0;padding:8px 18px;border-radius:calc(var(--r) - 3px);cursor:pointer;color:var(--muted);font-weight:600;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.steps [aria-pressed="true"],.steps [aria-current="step"]{background:var(--accent);color:var(--accent-ink)}
.prog{height:6px;border-radius:99px;background:var(--panel2);overflow:hidden;margin:8px 0 18px}
.prog i{display:block;height:100%;background:var(--accent)}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-size:22px;line-height:1}
.stepper button:hover{border-color:var(--accent)}
.stepper output{font-family:var(--fn);font-size:44px;font-weight:700;min-width:96px;text-align:center;color:var(--accent)}
.small-out{font-size:30px!important;min-width:48px!important}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:22px}
.f-full{grid-column:1/-1}
select.ctl,textarea.ctl,input.ctl{background:var(--panel2);border:1px solid var(--line);border-radius:calc(var(--r) - 3px);padding:10px 12px;min-height:44px;width:100%}
textarea.ctl{min-height:84px;resize:vertical}
.tog{display:inline-flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:calc(var(--r) - 3px);padding:10px 14px;cursor:pointer;min-height:44px;font-weight:600}
.tog[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel2))}
.tog .box{width:18px;height:18px;border-radius:5px;border:2px solid var(--muted);display:grid;place-items:center;font-size:12px;line-height:1}
.tog[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.goals{display:flex;flex-direction:column;gap:8px}
.actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:calc(var(--r) - 3px);padding:11px 22px;min-height:44px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn.ghost{background:var(--panel2);color:var(--ink)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:calc(var(--r) - 3px);overflow:hidden}
.seg button{background:var(--panel2);border:0;padding:8px 14px;cursor:pointer;color:var(--muted);font-weight:600;min-height:44px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.note{color:var(--muted);font-size:13px;margin-top:10px}
.foot{margin-top:30px;color:var(--muted);font-size:12.5px;text-align:center}

/* Schermi stretti: la sidebar diventa una barra in alto con il menu scorrevole */
@media(max-width:900px){
  .g21{grid-template-columns:minmax(0,1fr)}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{min-width:0;position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px}
  .brand{padding:0 8px 0 0}.brand small{display:none}
  .nav{min-width:0;flex-direction:row;overflow-x:auto;flex:1 1 100%;order:3}
  .nav a{white-space:nowrap}.nav a svg{display:none}
  .side-foot{margin:0 0 0 auto;padding:0;border:0}
}
@media(max-width:560px){.hero{grid-template-columns:1fr}.hero .sc{font-size:40px}}

/* Rispetto di chi riduce le animazioni */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Gestione: avvisi di esito, pile di pannelli, righe con piccoli form in linea */
.notice{border-radius:calc(var(--r) - 3px);padding:12px 16px;margin-bottom:16px;font-weight:600}
.notice.ok{background:color-mix(in srgb,var(--good) 18%,var(--panel));color:var(--good)}
.notice.err{background:color-mix(in srgb,var(--bad) 18%,var(--panel));color:var(--bad)}
.notice ul{margin:0;padding-left:18px}
.stack{display:flex;flex-direction:column;gap:16px}
.rowform{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.rowform form{display:flex;gap:10px;align-items:center}
.prow{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
input.ctl.num{width:84px}

/* Inserimento partita: testo solo per lettori di schermo e campi nascosti dal JS (vincono su display:flex) */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.field[hidden],.ruoli[hidden]{display:none}
.notice.warn{background:color-mix(in srgb,var(--warn) 16%,var(--panel));color:var(--warn)}
.notice p{margin:0 0 6px}

/* Fase 1: una riga per giocatore, stati come pulsanti segmentati fatti di radio veri */
.presenze{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.pres{display:grid;grid-template-columns:minmax(140px,1fr) auto;gap:10px 16px;align-items:center;border:1px solid var(--line);border-radius:calc(var(--r) - 3px);padding:12px 14px}
.pres[data-stato="panchina"],.pres[data-stato="assente"]{opacity:.8}
fieldset.seg{margin:0;padding:0;min-width:0}
.seg label{position:relative;display:flex}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:8px 12px;min-height:44px;background:var(--panel2);color:var(--muted);font-weight:600}
.seg input:checked+span{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible+span{outline:3px solid var(--ink);outline-offset:-3px}
.ruoli{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
/* Senza JavaScript il blocco ruoli segue comunque lo stato scelto (:has sui radio) */
.pres:has(input[value="titolare"]:checked) .ruoli,.pres:has(input[value="subentrato"]:checked) .ruoli{display:flex}
.pres:has(input[value="panchina"]:checked) .ruoli,.pres:has(input[value="assente"]:checked) .ruoli{display:none}
.mini-field{display:flex;flex-direction:column;gap:4px;flex:1 1 200px;min-width:0}
.mini-field label{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.mini-field input.ctl.num{width:100%;max-width:120px}
.ruolo2{flex:1 1 200px;min-width:0}
.ruolo2 summary{cursor:pointer;color:var(--accent);font-weight:600;min-height:44px;display:flex;align-items:center;list-style:none}
.ruolo2 summary::-webkit-details-marker{display:none}
.ruolo2[open] summary{min-height:28px}

/* Fase 2: avanzamento, voto grande, caselle con l'aspetto degli interruttori, righe dei gol */
.avanz{font-size:13px}
progress.prog{appearance:none;-webkit-appearance:none;display:block;width:100%;height:6px;border:0;border-radius:99px;background:var(--panel2);overflow:hidden}
progress.prog::-webkit-progress-bar{background:var(--panel2)}
progress.prog::-webkit-progress-value{background:var(--accent)}
progress.prog::-moz-progress-bar{background:var(--accent)}
.stepper input.big{width:120px;min-height:56px;text-align:center;font-family:var(--fn);font-size:40px;font-weight:700;color:var(--accent);padding:4px;-moz-appearance:textfield;appearance:textfield}
.stepper input.big::-webkit-inner-spin-button,.stepper input.big::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input.big.small-out{width:80px}
.stepper.off{opacity:.45}
.stepper button:disabled{cursor:not-allowed}
.togs{display:flex;gap:10px;flex-wrap:wrap}
.tog.chk{position:relative;align-self:flex-start}
.tog.chk input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tog.chk:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel2))}
.tog.chk input:checked+.box{background:var(--accent);border-color:var(--accent)}
.tog.chk input:checked+.box::after{content:"✓";color:var(--accent-ink)}
.tog.chk:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.golrow{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
.golnum{font-weight:700;min-height:44px;display:flex;align-items:center}

/* Riepilogo: una scheda per giocatore */
.riep{display:flex;flex-direction:column;gap:10px}
.riep-g{border:1px solid var(--line);border-radius:calc(var(--r) - 3px);padding:12px 14px}
.riep-h{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.riep-h>div{flex:1 1 180px;min-width:0}
.riep-g p{margin:6px 0 0}
.golist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}

/* Telefono: stati in griglia 2x2, righe e gol in colonna */
@media(max-width:560px){
  .pres{grid-template-columns:minmax(0,1fr)}
  fieldset.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .golrow{grid-template-columns:minmax(0,1fr)}
  .golnum{min-height:0}
}