/* Portale Tornei (07/11/2026). Solo le cose sue: il resto (cornice, barra,
   menu) viene da club-app.css come negli altri portali. I colori passano dalle
   variabili di MudBlazor, cosi' il tema scuro funziona senza un secondo foglio. */

/* ---------- Elenco dei tornei ---------- */
.tor-elenco { display: flex; flex-direction: column; gap: 10px; }
.tor-riga {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px; color: inherit; text-decoration: none;
}
.tor-riga:hover { border-color: var(--mud-palette-primary); }
.tor-riga:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.tor-data {
    flex: none; width: 54px; text-align: center; border-radius: 10px; padding: 4px 0;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
    display: flex; flex-direction: column; line-height: 1.1;
}
.tor-data span { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .9; }
.tor-data b { font-size: 22px; font-variant-numeric: tabular-nums; }
.tor-corpo { flex: 1; min-width: 0; }
.tor-nome { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.tor-det { font-size: 13px; color: var(--mud-palette-text-secondary); }

.tor-stato {
    flex: none; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    padding: 5px 9px; border-radius: 6px; white-space: nowrap;
}
.tor-stato-0 { background: rgba(122, 82, 8, .12); color: #7a5208; }
.tor-stato-1 { background: rgba(29, 107, 58, .12); color: #1d6b3a; }
.tor-stato-2 { background: rgba(91, 100, 120, .14); color: var(--mud-palette-text-secondary); }
.club-dark .tor-stato-0 { color: #f2c46b; background: rgba(242, 196, 107, .14); }
.club-dark .tor-stato-1 { color: #7fd6a0; background: rgba(127, 214, 160, .14); }

/* I quattro passi della creazione. */
.tor-passi { display: flex; gap: 6px; max-width: 760px; }
.tor-passi i { flex: 1; height: 4px; border-radius: 2px; background: var(--mud-palette-lines-default); }
.tor-passi i.on { background: var(--mud-palette-primary); }

/* ---------- Squadre ---------- */
.tor-rose, .tor-squadre { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tor-rosa, .tor-squadra { display: flex; align-items: center; gap: 12px; border-radius: 12px !important; }
.tor-rosa-nome { font-weight: 700; overflow-wrap: anywhere; }
.tor-lettera {
    flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
    font-size: 20px; font-weight: 800; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
}

/* ---------- Campi ---------- */
.tor-campo { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.tor-colore {
    display: inline-block; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    border: 2px solid var(--mud-palette-surface); box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
    padding: 0;
}
.tor-colore:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.tor-tavolozza { display: grid; grid-template-columns: repeat(4, 28px); gap: 8px; padding: 10px; }

.tor-anteprima {
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 10px 12px;
    background: var(--mud-palette-surface);
}
.tor-ok, .tor-avviso { border-radius: 8px; padding: 8px 10px; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.tor-ok { background: rgba(29, 107, 58, .12); color: #1d6b3a; }
.tor-avviso { background: rgba(122, 82, 8, .12); color: #7a5208; }
.club-dark .tor-ok { color: #7fd6a0; background: rgba(127, 214, 160, .12); }
.club-dark .tor-avviso { color: #f2c46b; background: rgba(242, 196, 107, .12); }
.tor-anteprima-riga {
    display: flex; gap: 12px; font-size: 14px; padding: 5px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default); font-variant-numeric: tabular-nums;
}
.tor-anteprima-riga:last-of-type { border-bottom: 0; }
.tor-anteprima-riga span:first-child { color: var(--mud-palette-text-secondary); min-width: 44px; }

/* ---------- La griglia del calendario: righe = turni, colonne = campi ---------- */
.tor-griglia-box {
    overflow-x: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px;
    background: var(--mud-palette-surface);
}
.tor-griglia { border-collapse: collapse; width: 100%; }
.tor-griglia th, .tor-griglia td {
    border-bottom: 1px solid var(--mud-palette-lines-default); padding: 6px; text-align: center; vertical-align: middle;
}
.tor-griglia thead th {
    font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--mud-palette-text-secondary);
    border-top: 5px solid transparent; padding: 8px 6px;
}
.tor-griglia thead th:first-child { text-align: left; }
.tor-griglia tbody tr:last-child th, .tor-griglia tbody tr:last-child td { border-bottom: 0; }
.tor-griglia tbody th { text-align: left; width: 1%; white-space: nowrap; }
.tor-turno, .tor-partita {
    font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 10px;
    cursor: pointer; padding: 6px 8px; width: 100%;
}
.tor-turno { display: flex; flex-direction: column; align-items: flex-start; }
.tor-turno b { font-size: 18px; }
.tor-turno small { font-size: 12px; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.tor-partita { display: flex; flex-direction: column; align-items: center; min-height: 48px; justify-content: center; }
.tor-partita b { font-size: 19px; letter-spacing: .5px; white-space: nowrap; }
.tor-partita small { font-size: 13px; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.tor-turno:hover, .tor-partita:hover { border-color: var(--mud-palette-lines-default); background: var(--mud-palette-background-gray); }
.tor-turno:focus-visible, .tor-partita:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }
.tor-vuoto { color: var(--mud-palette-text-secondary); }
.tor-riposa { color: var(--mud-palette-text-secondary); font-weight: 600; }

.tor-legenda { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tor-legenda b { margin-right: 8px; color: var(--mud-palette-text-secondary); }
.tor-chip {
    display: inline-block; margin: 2px 6px 2px 0; padding: 4px 9px; border-radius: 999px;
    border: 1.5px solid var(--mud-palette-primary); color: var(--mud-palette-primary); font-weight: 600;
}

/* Il risultato nel dialogo: numeri grandi e pulsanti grossi, si usa a bordo campo. */
.tor-punteggio { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 0; }
.tor-pcol { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tor-psq { font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.tor-pn { font-size: 48px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tor-psep { font-size: 32px; font-weight: 800; color: var(--mud-palette-text-secondary); }

/* Sul telefono: schede strette e griglia compatta, tre campi stanno in 375 px.
   Con piu' campi la griglia scorre di lato dentro al suo riquadro. */
.tor-schede .mud-tab { text-transform: none; font-weight: 600; letter-spacing: 0; padding: 6px 12px; }
@media (max-width: 600px) {
    .tor-schede .mud-tab { padding: 6px 8px; font-size: 14px; }
    .tor-griglia th, .tor-griglia td { padding: 4px 2px; }
    .tor-griglia thead th { font-size: 11px; letter-spacing: .3px; }
    .tor-partita { padding: 4px 2px; min-height: 44px; }
    .tor-partita b { font-size: 16px; letter-spacing: 0; }
    .tor-turno { padding: 4px; }
    .tor-turno b { font-size: 16px; }
    .tor-turno small { font-size: 11px; }
}

/* ---------- Squadrette ---------- */
.tor-colonne { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; align-items: start; }
.tor-colonna { border-radius: 12px !important; }
.tor-colonna-liberi { border-style: dashed !important; }
.tor-colonna-testa { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tor-colonna-testa span { color: var(--mud-palette-text-secondary); font-size: 13px; }
.tor-ragazzo { display: flex; align-items: center; gap: 6px; padding: 2px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.tor-ragazzo-nome { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.tor-p {
    flex: none; width: 26px; height: 26px; border-radius: 6px; font: 700 12px/1 inherit; cursor: pointer;
    border: 1.5px solid var(--mud-palette-lines-default); background: transparent; color: var(--mud-palette-text-secondary);
}
.tor-p.on { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.tor-p:disabled { opacity: .4; cursor: default; }
.tor-p:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }