/* Stile condiviso dell'app WASM Club (shell staff + shell famiglia). */
:root {
    --mud-typography-default-family: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---------- Bordi dello schermo (PWA installata) ----------
       Installata sul telefono l'app disegna sotto la tacca, gli angoli tondi e
       la barra dei gesti: senza questi margini l'ora coprirebbe il titolo e la
       riga di sistema le voci in basso. In una finestra normale valgono 0, così
       il layout resta identico a prima. Passano da variabili e non da env()
       diretto perché così si possono simulare in prova. */
    --va-safe-top: env(safe-area-inset-top, 0px);
    --va-safe-bottom: env(safe-area-inset-bottom, 0px);
    --va-safe-left: env(safe-area-inset-left, 0px);
    --va-safe-right: env(safe-area-inset-right, 0px);

    /* Altezza della barra in alto: cresce della tacca, cala in orizzontale. */
    --va-appbar-h: 48px;
    /* Altezza della barra in basso, usata anche per lo spazio di fondo pagina. */
    --va-nav-h: 58px;
}
/* Font leggermente più piccolo su tutta l'app (MudBlazor usa rem → scala globale). */
html { font-size: 15px; }
.club-body-bg { background: var(--club-bg) !important; }

/* App bar piatta: il gradiente rubava attenzione al contenuto e lo stemma era
   ripetuto anche in cima al menu. Una tinta sola, come nell'intranet. */
.club-appbar {
    background: var(--club-appbar-b) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12) !important;
    /* Sotto la tacca e dentro gli angoli tondi (in orizzontale la tacca sta di lato). */
    padding-top: var(--va-safe-top);
    padding-left: calc(12px + var(--va-safe-left));
    padding-right: calc(12px + var(--va-safe-right));
    height: calc(var(--va-appbar-h) + var(--va-safe-top));
    min-height: calc(var(--va-appbar-h) + var(--va-safe-top));
}
/* Il contenuto parte sotto la barra, tacca compresa. */
.mud-main-content { padding-top: calc(var(--va-appbar-h) + var(--va-safe-top)) !important; }
/* Anche il menu laterale scende sotto la tacca. */
.va-drawer .mud-drawer-content, .va-drawer .mud-navmenu { padding-top: var(--va-safe-top); }
/* Nome di chi è connesso, leggibile senza aprire il menu. */
.va-utente {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: rgba(255, 255, 255, .12); padding: 4px 10px; border-radius: 999px;
    font-size: 13.5px; color: inherit; max-width: 190px;
}
.va-utente-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599.98px) { .va-utente-nome { display: none; } .va-utente { padding: 4px 6px; } }
.club-wordmark { font-weight: 800; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.club-sub { opacity: .78; font-weight: 400; }
@media (max-width: 480px) { .club-sub { display: none; } .club-wordmark { font-size: 1rem; } }

/* ---------- Menu laterale in stile intranet ----------
   Ridotto a icone (si apre al passaggio del mouse): lo spazio va al contenuto.
   Etichette, gruppi, blocco sezione e versione spariscono quando è ridotto,
   altrimenti resterebbero tronconi di testo tagliati. */
.va-sezione {
    padding: 8px 16px 10px;
    border-left: 3px solid var(--mud-palette-primary);
    margin-bottom: 4px;
}
.va-sezione-et { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mud-palette-text-disabled); }
.va-sezione-nm { display: flex; align-items: center; gap: 8px; font-weight: 600; line-height: 1.3; }

.va-gruppo {
    font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
    color: var(--mud-palette-text-disabled); font-weight: 700; padding: 6px 16px 2px;
}

.va-versione {
    margin-top: 8px; padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .72rem; color: var(--mud-palette-text-disabled);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Spariscono SOLO quando il menu è ridotto alla striscia di icone: aperto —
   anche solo al passaggio del mouse — MudBlazor toglie --closed e tornano.
   (Legarle a .mud-drawer-mini le nascondeva anche a menu aperto, perché la
   classe mini resta comunque sul drawer.) */
.va-drawer.mud-drawer--closed .va-sezione,
.va-drawer.mud-drawer--closed .va-gruppo,
.va-drawer.mud-drawer--closed .va-versione { display: none; }

/* Drawer / menù a pillole. */
.club-drawer-head { display: flex; align-items: center; padding: 18px 16px 12px; }
.club-drawer .mud-navmenu { padding: 6px 10px; }
.club-drawer .mud-nav-group .mud-nav-link,
.club-drawer .mud-navmenu > .mud-nav-link {
    border-radius: 11px; margin: 2px 0; min-height: 42px;
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.club-drawer .mud-nav-link:hover { background: var(--mud-palette-action-default-hover); }
.club-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { font-weight: 700; color: var(--mud-palette-primary); background: var(--club-active-bg); }
.club-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--mud-palette-primary); }
.club-drawer .mud-nav-group > .mud-nav-link { text-transform: uppercase; letter-spacing: .6px; font-size: 12px; opacity: .8; }

/* Card / paper moderne. */
.mud-card, .club-panel { border-radius: 16px; }
.mud-card { transition: box-shadow .15s ease, transform .15s ease; }
.mud-card:hover { transform: translateY(-2px); }
.mud-table-head th { text-transform: uppercase; letter-spacing: .4px; font-size: 11.5px; }

/* Dashboard: KPI badge, box-data, righe. */
.club-kpi { transition: box-shadow .15s ease, transform .15s ease; }
.club-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 32, 74, .14); }
.club-kpi-badge { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.club-kpi-badge .mud-icon-root { font-size: 26px; }
.club-event { border-radius: 12px; cursor: pointer; transition: background .12s ease; }
.club-event:hover { background: var(--mud-palette-action-default-hover); }
.club-daybox { width: 46px; height: 46px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; }
.club-daybox .d-day { font-size: 18px; font-weight: 800; }
.club-daybox .d-mon { font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.club-todo { border-radius: 10px; cursor: pointer; transition: background .12s ease; }
.club-todo:hover { background: var(--mud-palette-action-default-hover); }

/* Variabili tema (classe pilotata da _dark su MudLayout). */
.club-light {
    --club-bg: #eef1f7; --club-appbar-a: #1f3a86; --club-appbar-b: #28489F; --club-active-bg: rgba(40, 72, 159, .10);
    /* Colori di stato: dicono SOLO presente / in attesa / assente. */
    --club-ok: #137A5C; --club-ok-bg: #E1F3EC;
    --club-att: #8F5A0C; --club-att-bg: #FBEEDA;
    --club-no: #C4242F; --club-no-bg: #FBE9EA;
    --club-card: #ffffff; --club-card-2: #f6f8fc; --club-linea: #DCE2EF;
}
.club-dark {
    --club-bg: #0d1424; --club-appbar-a: #0f1c3a; --club-appbar-b: #17264a; --club-active-bg: rgba(122, 160, 255, .16);
    --club-ok: #5FD3AB; --club-ok-bg: #123328;
    --club-att: #E9AF56; --club-att-bg: #33260F;
    --club-no: #FF8087; --club-no-bg: #3A1D22;
    --club-card: #151e33; --club-card-2: #1b2540; --club-linea: #2A3550;
}

/* ---------- Barra di navigazione fissa in basso (famiglie E staff) ----------
   Su telefono l'hamburger costava due tocchi per ogni spostamento e copriva lo
   schermo: la barra tiene le sezioni più usate a portata di pollice. Nello staff
   l'ultima voce apre il menu laterale, dove resta tutto il resto.
   Sopra i 960px torna il drawer laterale e la barra sparisce. */
.va-nav { display: none; }
@media (max-width: 959.98px) {
    .va-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
        background: var(--club-card); border-top: 1px solid var(--club-linea);
        padding: 6px calc(var(--va-safe-right)) max(8px, var(--va-safe-bottom)) calc(var(--va-safe-left));
    }
    /* Con la chat le caselle sono sei: su un telefono stretto restano ~52px
       l'una, quindi icona e testo scendono di un paio di punti. Le etichette
       che non ci stanno vengono troncate, non mandate a capo. */
    .va-nav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
        text-decoration: none; color: var(--mud-palette-text-secondary);
        font-size: 9.5px; font-weight: 600; padding: 2px 1px; min-width: 0;
    }
    .va-nav a .mud-icon-root { font-size: 20px; }
    .va-nav a.attiva { color: var(--mud-palette-primary); }
    .va-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* La voce "Menu" dello staff è un bottone, non un link: stesso aspetto. */
    .va-nav button.va-nav-btn {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
        background: none; border: 0; cursor: pointer; padding: 2px 1px; min-width: 0;
        color: var(--mud-palette-text-secondary); font-size: 9.5px; font-weight: 600;
        font-family: inherit;
    }
    .va-nav button.va-nav-btn .mud-icon-root { font-size: 20px; }
    /* Spazio in fondo alla pagina: la barra non deve coprire l'ultimo contenuto.
       Cresce con la barra dei gesti del telefono. */
    .va-corpo { padding-bottom: calc(var(--va-nav-h) + 20px + var(--va-safe-bottom)) !important; }
    /* Su telefono il drawer si apre solo dalla voce "Menu": niente hamburger. */
    .va-solo-desktop { display: none !important; }
    /* Il menu a icone qui è nascosto, ma MudBlazor lascia comunque al contenuto
       il margine della striscia (56px): la pagina restava stretta e spostata a
       destra. Su schermo piccolo il contenuto prende tutta la larghezza. */
    .mud-main-content { margin-left: 0 !important; margin-right: 0 !important; }
    /* …e la striscia di icone sparisce: la navigazione è la barra in basso.
       Quando si apre da "Menu" il drawer perde --closed e torna visibile. */
    .va-drawer.mud-drawer--closed { display: none !important; }
    /* In orizzontale la tacca sta di lato: il contenuto le gira intorno. */
    .va-corpo { padding-left: calc(16px + var(--va-safe-left)); padding-right: calc(16px + var(--va-safe-right)); }
}

/* ---------- Telefono in orizzontale ----------
   Restano poche centinaia di pixel di altezza: barre più basse e testo più
   piccolo, così lo spazio va al contenuto invece che alla navigazione. */
@media (max-height: 480px) and (orientation: landscape) {
    :root { --va-appbar-h: 42px; --va-nav-h: 46px; }
    .va-nav { padding-top: 2px; }
    .va-nav a, .va-nav button.va-nav-btn { font-size: 9px; gap: 0; padding: 1px; }
    .va-nav a .mud-icon-root, .va-nav button.va-nav-btn .mud-icon-root { font-size: 17px; }
}

/* Intestazione area famiglie: il nome dell'atleta è la riga principale. */
.fam-atleta {
    font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; cursor: pointer;
    display: inline-flex; align-items: center; gap: 2px; color: inherit;
}

/* ---------- Card del prossimo impegno (area famiglie) ---------- */
.va-card { border: 1px solid var(--club-linea); border-radius: 16px; overflow: hidden; background: var(--club-card); }
.va-card-top { padding: 9px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.va-data { text-align: center; min-width: 52px; flex: none; }
.va-data .g { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; opacity: .6; }
.va-data .d { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.va-data .m { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; opacity: .6; }
.va-riga { display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .85; margin-top: 3px; }
.va-riga .mud-icon-root { font-size: 16px; opacity: .7; }
.va-mini { border-left: 3px solid var(--club-linea); background: var(--club-card-2); padding: 9px 12px; border-radius: 0 10px 10px 0; }
.va-mini + .va-mini { margin-top: 7px; }

/* Calendario eventi (Heron.MudCalendar): il selettore vista del componente è in
   inglese e in WebAssembly non carica le risorse tradotte, quindi lo nascondiamo:
   la scelta Elenco/Mese/Settimana si fa con i controlli in italiano della pagina.
   Restano visibili le frecce di navigazione e l'etichetta del mese. */
.va-cal .mud-cal-toolbar .mud-button-group-root { display: none; }
/* Le voci del calendario devono poter andare a capo senza tagliare il titolo. */
.va-cal .mud-cal-cell-template { white-space: normal; }

/* Certificato medico non in regola: la riga si tinge appena, quel tanto che
   basta a saltare all'occhio scorrendo l'elenco senza dover leggere la colonna.
   Il bordo a sinistra regge anche dove il colore di sfondo si perde (stampa,
   contrasto alto, daltonismo): non ci si affida al solo colore. */
.va-cert-scaduto  { background: rgba(220, 38, 38, .10); box-shadow: inset 3px 0 0 var(--mud-palette-error); }
.va-cert-vicino   { background: rgba(234, 179, 8, .10);  box-shadow: inset 3px 0 0 var(--mud-palette-warning); }
.va-cert-scaduto:hover, .va-cert-vicino:hover { filter: brightness(1.04); }

/* Presenze: una fila di bottoni invece di una tendina per riga. Si segna una
   squadra intera con un tocco a testa, e il colore dice com'e' andata senza
   leggere. Chi non distingue i colori ha comunque icona e sigla, e il bottone
   scelto resta pieno mentre gli altri no: la differenza non e' solo di tinta. */
.va-presenze { display: flex; gap: 4px; flex-wrap: wrap; }
.va-pres {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--club-linea); background: transparent;
    color: var(--mud-palette-text-secondary); font: inherit; font-size: 12px; line-height: 1;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.va-pres:hover:not(:disabled) { background: var(--club-card-2); }
.va-pres:disabled { opacity: .45; cursor: default; }
.va-pres .mud-icon-root { font-size: 16px; }
.va-pres-txt { display: none; }
/* Sopra il telefono c'e' spazio per la sigla: sotto restano le sole icone. */
@media (min-width: 900px) { .va-pres-txt { display: inline; } }
.va-pres.ok.on  { background: var(--club-ok-bg);  color: var(--club-ok);  border-color: var(--club-ok); font-weight: 600; }
.va-pres.att.on { background: var(--club-att-bg); color: var(--club-att); border-color: var(--club-att); font-weight: 600; }
.va-pres.no.on  { background: var(--club-no-bg);  color: var(--club-no);  border-color: var(--club-no); font-weight: 600; }

/* Catalogo compiti: riquadri grandi abbastanza da centrarli col pollice. */
.va-compiti-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.va-compito-voce {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: 12px; cursor: pointer; text-align: center;
    border: 1px solid var(--club-linea); background: transparent;
    color: var(--mud-palette-text-primary); font: inherit; font-size: 13px; line-height: 1.2;
}
.va-compito-voce:hover { background: var(--club-card-2); }
.va-compito-voce .mud-icon-root { font-size: 26px; opacity: .75; }
.va-compito-voce.on {
    border-color: var(--mud-palette-primary); background: var(--club-card-2); font-weight: 600;
}
.va-compito-voce.on .mud-icon-root { opacity: 1; color: var(--mud-palette-primary); }

/* Striscia degli eventi vicini in testa alla scheda: da mercoledi' a domenica
   senza passare dall'elenco. Scorre in orizzontale sul telefono, dove le
   frecce da sole non basterebbero a far capire che ce n'e' anche altri. */
.va-vicini { display: flex; align-items: center; gap: 4px; }
.va-vicini-scroll {
    display: flex; gap: 8px; overflow-x: auto; flex: 1;
    scrollbar-width: thin; padding-bottom: 2px;
}
.va-vicino {
    flex: 0 0 auto; min-width: 128px; max-width: 210px;
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px 12px; border-radius: 10px; text-decoration: none;
    border: 1px solid var(--club-linea); background: var(--club-card);
    color: var(--mud-palette-text-primary);
}
.va-vicino:hover { background: var(--club-card-2); }
.va-vicino.on { border-color: var(--mud-palette-primary); border-width: 2px; padding: 7px 11px; }
.va-vicino-data { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .7; }
.va-vicino-tit { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-vicino-ris { font-size: 12px; font-weight: 700; color: var(--mud-palette-primary); }

/* Tabellone: noi, il punteggio, loro — come si legge a bordo campo. */
.va-tabellone { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.va-squadra { font-weight: 700; font-size: .95rem; opacity: .95; max-width: 190px; }
.va-punteggio { font-size: 2.4rem; font-weight: 800; letter-spacing: 2px; line-height: 1; }

/* Primo passo della creazione: che cosa stai organizzando. Riquadri grandi,
   colore del tipo, icona indovinata dal nome se nessuno ne ha scelta una. */
.va-tipi { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.va-tipo {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 10px; border-radius: 14px; cursor: pointer; text-align: center;
    border: 1px solid var(--club-linea); background: var(--club-card);
    color: var(--mud-palette-text-primary); font: inherit;
}
.va-tipo:hover { background: var(--club-card-2); border-color: var(--mud-palette-primary); }
.va-tipo-icona {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.va-tipo-icona .mud-icon-root { font-size: 24px; }
.va-tipo-nome { font-size: 14px; font-weight: 600; }

/* Indice delle sezioni del form: la scheda e' lunga, e scorrerla per trovare
   "chi convocare" o "quando aprono le risposte" e' il momento in cui ci si
   perde. Sul telefono scorre in orizzontale. */
.va-indice { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.va-indice button {
    flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; text-decoration: none;
    font-size: 13px; border: 1px solid var(--club-linea);
    color: var(--mud-palette-text-secondary); background: transparent;
    font-family: inherit; cursor: pointer;
}
.va-indice button:hover { background: var(--club-card-2); color: var(--mud-palette-text-primary); }

/* Riquadri delle immagini di squadra: mostrano quello che c'e' e, quando non
   c'e' niente, restano un rettangolo tratteggiato invece di un buco. */
.va-img-box {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; border-radius: 14px; overflow: hidden;
    border: 1px dashed var(--club-linea); background: var(--club-card-2);
}
.va-img-box.va-img-larga { aspect-ratio: 16 / 6; }
.va-img-box img { width: 100%; height: 100%; object-fit: cover; }