/* css/mobile-forms.css
   Correzioni di elementi di form che su schermi larghi hanno una
   larghezza minima fissa pensata per il desktop, ma che sotto i 600px
   causano overflow orizzontale (a volte esteso a tutta la pagina, non
   solo al singolo componente). Stesso breakpoint già usato per il menu
   hamburger (vedi css/header-mobile-menu.css), riusato per coerenza.
*/

@media (max-width: 719px) {
    /* Soglia diversa (719px, non 599px come il menu hamburger): qui il
       problema è indipendente dall'header ed è preesistente al nostro
       lavoro — il min-width:350px dei tre select genera overflow
       orizzontale su tutta la pagina già a partire da 600px, fino a
       719px compresi (misurato con Playwright: 720px è il primo valore
       privo di overflow). Non è quindi lo stesso breakpoint "smartphone"
       usato altrove in questa rifinitura mobile, ma la soglia naturale
       di QUESTO specifico bug. */

    /* I tre menu a tendina "Seleziona giocatore" (torneo individuale,
       aggiunta giocatori durante il torneo, e l'equivalente nel percorso
       a squadre) hanno tutti lo stesso style inline min-width:350px,
       pensato per il desktop: su schermi stretti supera la larghezza
       della viewport e del contenitore .form-group che li ospita,
       causando overflow orizzontale su tutta la pagina. Qui recuperano
       la stessa larghezza flessibile già prevista da .form-inline
       .form-group (vedi css/utilities.css), senza toccare il valore
       desktop. */
    #select-giocatore-classifica,
    #select-giocatore-classifica-torneo,
    #team-select-classifica {
        min-width: 0 !important;
        width: 100%;
    }

    /* Pannello "Modalità Proiettore" (individuale e a squadre): i due
       riquadri "Sequenza Personalizzabile" e "Schermata Fissa" sono in
       una griglia CSS a 2 colonne fisse scritta inline nel markup
       (nessuna classe originaria, aggiunta qui appositamente per poterla
       selezionare). Sotto i 720px le due colonne diventano troppo strette
       per il contenuto (elenco checkbox, campo numerico con etichetta),
       causando overflow orizzontale su tutta la pagina già a partire da
       412px. Qui si impilano in colonna singola, stessa soglia del fix
       dei menu a tendina qui sopra, e stesso approccio già scelto per le
       card "Torneo Individuale/a Squadre" nella scelta modalità. */
    /* Stesso trattamento per la "Classifica per Genere" (individuale e a
       squadre): Classifica Maschile/Femminile in griglia a 2 colonne
       fisse, qui addirittura senza contenitore con scroll interno —
       overflow misurato fino a 361px a 360px di larghezza (la tabella
       femminile finiva completamente fuori schermo). */
    .proj-mode-grid,
    .gender-rankings-grid {
        grid-template-columns: 1fr !important;
    }

    /* Le due colonne (Maschile/Femminile), essendo elementi di una CSS
       Grid, di default non si restringono sotto la larghezza "naturale"
       del proprio contenuto (min-width:auto implicito) — la tabella,
       leggermente più larga della colonna assegnata, sforava comunque la
       pagina anche a colonna singola. min-width:0 permette alla colonna
       di rispettare la larghezza della traccia; overflow-x:auto dà alla
       tabella lo stesso scroll interno e contenuto già usato altrove
       nell'app (vedi .classifica-container in base.css), nel raro caso
       in cui resti comunque più larga della colonna. */
    .gender-rankings-grid > div {
        min-width: 0;
        overflow-x: auto;
    }

    /* Dashboard (individuale e a squadre): la griglia delle statistiche
       (Squadre/Giocatori, Torneo in corso, Turni totali, ecc.) usa
       auto-fit con una soglia minima di 140px per colonna. Nel
       percorso a squadre, #team-dashboard-content ha un padding
       proprio (pensato per il riquadro scuro) che si somma a quello
       della sezione contenitore — a differenza del percorso
       individuale, dove il pannello scuro È la sezione stessa, con un
       solo livello di padding. Questo doppio padding lasciava alla
       griglia pochi pixel in meno di quelli necessari per 2 colonne,
       facendola collassare a 1 colonna sola (tutte le card impilate in
       una lunga striscia verticale). Padding e soglia minima ridotti
       qui per recuperare le 2 colonne; innocuo per il percorso
       individuale, già a 2 colonne prima di questa modifica. */
    #team-dashboard-content {
        padding: 0.9rem !important;
    }

    .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
        gap: 0.7rem !important;
    }

    /* Riga "scacchiera" nel tab Turno (percorso a squadre): affiancare
       due nomi giocatore + un menu a tendina da 110px in un'unica riga
       lasciava a ciascun nome solo ~60px — un cognome lungo, senza
       possibilità di andare a capo a metà parola, finiva per
       traboccare visivamente. I due nomi restano affiancati sopra (più
       spazio per ciascuno, senza la concorrenza del menu a tendina), e
       il menu a tendina scende su una riga propria a piena larghezza
       sotto — anche più comodo da toccare col dito. */
    .scacchiera-row {
        grid-template-columns: 24px 1fr 1fr !important;
        grid-template-areas:
            "num white black"
            "select select select" !important;
        row-gap: 0.35rem !important;
        column-gap: 0.4rem !important;
    }

    .scacchiera-num {
        grid-area: num !important;
    }

    .scacchiera-giocatore:not(.scacchiera-giocatore-nero) {
        grid-area: white !important;
    }

    .scacchiera-giocatore-nero {
        grid-area: black !important;
    }

    .scacchiera-risultato-select {
        grid-area: select !important;
        width: 100% !important;
        justify-self: stretch !important;
    }

    .scacchiera-giocatore {
        font-size: 0.82rem !important;
        overflow-wrap: break-word !important;
    }

    /* Classifica per Scacchiera (percorso a squadre): il nome giocatore,
       quando lungo, andava a capo su due righe — ma le colonne
       Pos/Titolo/Pt/PG a larghezza fissa (pensate per il desktop)
       lasciavano al nome uno spazio così stretto che anche una singola
       parola del cognome (es. "Elisabetta") poteva superare la propria
       colonna, invadendo visivamente quella accanto. Colonne fisse
       ristrette per liberare spazio alla colonna nome, più
       overflow-wrap come rete di sicurezza per i casi estremi. */
    .board-rankings-table th:nth-child(1),
    .board-rankings-table td:nth-child(1) {
        width: 28px !important;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }

    .board-rankings-table th:nth-child(2),
    .board-rankings-table td:nth-child(2) {
        width: 42px !important;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }

    .board-rankings-table th:nth-child(4),
    .board-rankings-table td:nth-child(4) {
        width: 32px !important;
        padding-left: 0.4rem !important;
        padding-right: 0.3rem !important;
    }

    .board-rankings-table th:nth-child(5),
    .board-rankings-table td:nth-child(5) {
        width: 36px !important;
        padding-left: 0.4rem !important;
        padding-right: 0.3rem !important;
    }

    .board-rankings-table th:nth-child(3),
    .board-rankings-table td:nth-child(3) {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Riga di intestazione "Bianco / Risultato / Nero" sopra le righe
       scacchiera: stessa griglia a 4 colonne fisse di .scacchiera-row,
       ma senza la sua classe (corretta sopra), quindi non ancora
       toccata. Qui non c'è un menu a tendina da spostare (solo testo),
       basta restringere la colonna centrale per dare più spazio ai
       nomi delle squadre. */
    .scacchiera-header-labels {
        grid-template-columns: 24px 1fr 46px 1fr !important;
        font-size: 0.72rem !important;
    }

    /* Modal "Fix Omonimi": ogni riga giocatore affiancava informazioni
       (nome, ELO, classe) + campo nickname da 200px + bottone "Auto" da
       80px in un'unica riga a 3 colonne fisse. Dentro il modal
       (max-width:500px, con più livelli di padding annidati) restavano
       a disposizione solo ~275px, mentre le due colonne fisse da sole
       (200+80+margini) ne richiedevano già 296 — un overflow reale
       misurato con Playwright, non solo un sospetto. Info sopra a
       piena larghezza, campo nickname + bottone Auto affiancati sotto
       (il campo si allarga per riempire lo spazio, il bottone resta
       compatto). */
    .homonym-player-row {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "info info"
            "nickname autobtn" !important;
        row-gap: 0.5rem !important;
    }

    .homonym-info {
        grid-area: info !important;
    }

    .homonym-nickname-input {
        grid-area: nickname !important;
        width: 100% !important;
    }

    .homonym-auto-btn {
        grid-area: autobtn !important;
    }
}