/* --- Stili per la vista Incontro --- */

/* Contenitore per l'intestazione del punteggio */
.incontro-header {
    /* 1. Abilita Flexbox */
    display: flex;

    /* 2. Impedisce agli elementi di andare a capo */
    flex-wrap: nowrap;

    /* 3. Distribuisce lo spazio tra i tre elementi principali */
    /* (Squadra 1, Punteggio, Squadra 2) */
    justify-content: space-around;
    /* Assicura che ci sia spazio ai lati del punteggio */

    /* 4. Allinea tutto verticalmente al centro */
    align-items: center;

    /* Opzionale: Stili per il layout generale */
    width: 100%;
    /* Occupa tutta la larghezza del genitore */
    padding: 10px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    /* Rende la gestione delle dimensioni più prevedibile */
    box-shadow: 0 4px 8px #f4efef;
}

/* Stile per i contenitori delle squadre */
.incontro-squadra {
    display: block;
    flex: 1;
}


/* Stile per il punteggio, deve rimanere al centro e non restringersi */
.incontro-punteggio {
    /* Assicura che l'elemento punteggio non si restringa */
    flex-shrink: 0;
    /* Larghezza fissa o minima per il testo del punteggio */
    min-width: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 4em;
    padding: 0 10px;
}

/* Stile per il nome della squadra, gestisce il testo lungo */
.nome-squadra {
    font-size: 18px;
    text-align: center;
    ;
}

/* Stile specifico per la tabella dei singoli incontri */
.incontro-details-table th,
.incontro-details-table td {
    text-align: center;
    /* Centra il testo per i punteggi */
    min-width: 40px;
    /* Larghezza minima per le colonne dei set */
    text-wrap: nowrap;
}

.immagine-squadra {
    text-align: center;
}

.immagine-squadra img {
    width: 50%;
    height: 50%;
    border-radius: 15px;
    box-shadow: 0 4px 8px #f4efef;
}

/* Evidenzia le ultime due colonne della tabella dei dettagli incontro */
.incontro-details-table th:nth-last-child(-n+2),
.incontro-details-table td:nth-last-child(-n+2) {
    font-weight: bold;
    border-left: 2px solid #ddd;
}

.incontro-details-table th:nth-last-child,
.incontro-details-table td:nth-last-child {
    font-weight: bold;
    border-right: 2px solid #ddd;
}

.risultati-fitet-table,
.classifica_fitet {
    border: 1px solid rgba(0, 0, 0, .08);
    white-space: nowrap;
    border-collapse: collapse;
}

.risultati-fitet-table th {
    background-color: #f9f9f9;
}

.classifica_fitet td:first-child{
    text-align: left;
}


/* Stili calendario*/
.container-card {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.risultati-fitet-container h4 {
    padding: 12px 22px;
    background: #e8e8e8;
}

.date-header {
    font-size: 18px;
    font-weight: bold;
    padding: 15px 15px 5px 15px;
    color: #333;
    border-bottom: 1px solid #eee;
    margin: 0;
}

.match-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 5px 15px;
    padding: 15px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.match-card:last-child {
    border-bottom: none;
}

.match-info {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.match-date-type {
    color: #888;
}

.match-week {
    color: #888;
}

.team-score {
    grid-column: 1 / 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    padding: 2px 0;
}

.team {
    display: flex;
    align-items: center;
}

.team-logo {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    object-fit: contain;
}

.team-name {
    font-weight: normal;
}

.score {
    font-weight: bold;
    min-width: 20px;
    /* Assicura che i punteggi siano allineati */
    text-align: right;
}

.bold-name {
    font-weight: bold;
    color: #333;
    /* Rendi il nome della squadra vincitrice più scuro */
}

.bold-score {
    font-weight: bold;
    color: #333;
    /* Rendi il punteggio della squadra vincitrice più scuro */
}

.video-preview {
    /* 1. Estendi l'altezza per coprire tutte le righe (dal bordo del padding) */
    /* Inizia sulla prima riga di griglia e finisce dopo l'ultima riga definita */
    grid-row: 2 / span 2;
    /* o grid-row: 1 / 4; */
    grid-column: 2 / 3;
    /* Posizionalo nella seconda colonna */

    /* 2. Allineamento verticale e orizzontale al centro con Flexbox */
    display: flex;
    justify-content: center;
    /* Centra orizzontalmente */
    align-items: center;
    /* Centra verticalmente */
}



/*pulsante dettaglio */
.dett-btn {
    /* Impostazioni di base e forma rotonda */
    display: inline-flex;
    /* Usa flexbox per centrare il contenuto */
    justify-content: center;
    /* Centra orizzontalmente */
    align-items: center;
    /* Centra verticalmente */
    width: 32px;
    /* Larghezza del pulsante */
    height: 32px;
    /* Altezza del pulsante */
    border-radius: 50%;
    /* Rende il pulsante perfettamente rotondo */
    background-color: #ccc;
    /* Fondo grigio (puoi usare qualsiasi tonalità di grigio) */
    color: transparent;
    /* Nasconde il testo "Dettaglio" del link */
    text-decoration: none;
    /* Rimuove la sottolineatura del link */
    position: relative;
    /* Necessario per posizionare il segno più */
    overflow: hidden;
    /* Nasconde il testo "Dettaglio" in modo pulito */
}

/* Stile per l'icona del Più (+) */
.dett-btn::before,
.dett-btn::after {
    content: "";
    /* Essenziale per gli pseudo-elementi */
    position: absolute;
    /* Permette di posizionare le barre all'interno */
    background-color: white;
    /* Colore bianco per il segno più */
}

/* Barra orizzontale */
.dett-btn::before {
    width: 60%;
    /* Lunghezza della barra */
    height: 2px;
    /* Spessore della barra */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centramento perfetto */
}

/* Barra verticale */
.dett-btn::after {
    width: 2px;
    /* Spessore della barra */
    height: 60%;
    /* Lunghezza della barra */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centramento perfetto */
}

/* Opzionale: Rimuovi lo span interno, non serve */
.dett-btn span {
    display: none;
}

.incontro-orario {
    font-size: 18px;
}

.risultati-fitet-table-wrapper {
    margin-top: 100px;
    margin-bottom: 100px;
}

/* Regolazioni per il layout mobile se necessario */
@media (max-width: 480px) {
    .match-card {
        padding: 10px;
        gap: 5px 10px;
    }

    .video-preview {
        width: 80px;
        height: 50px;
    }

    .date-header {
        font-size: 16px;
        padding: 10px 10px 5px 10px;
    }

    .team-logo {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }

    .team-name,
    .score {
        font-size: 14px;
    }

    .match-info {
        font-size: 12px;
    }

    .incontro-punteggio {
        font-size: 1.5em;
        padding: 0 10px;
        white-space: nowrap;
    }

    .nome-squadra {
        font-size: 12px;
    }

    .incontro-details-table th {
        background-color: #f9f9f9;
    }

    .incontro-details-table th,
    .incontro-details-table td {
        padding: 4px;
        font-size: 12px;
    }

    .risultati-fitet-table-wrapper {
        margin-top: 50px;
        margin-bottom: 100px;
    }

    /* Rende la tabella dei dettagli incontro scorrevole orizzontalmente */
    .fitet-table-wrapper-scroll-h {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Migliora lo scrolling su iOS */
    }

    /* Blocca le ultime due colonne (SP e SV) a destra durante lo scroll orizzontale */
    .incontro-details-table th:nth-last-child(-n+2),
    .incontro-details-table td:nth-last-child(-n+2) {
        position: -webkit-sticky;
        /* Per Safari */
        position: sticky;
        background-color: #f9f9f9 !important;
        /* Sfondo per non far trasparire il contenuto sottostante */
        z-index: 1;
    }

    /* Applica lo sticky e il bordo alla penultima colonna (SP) */
    .incontro-details-table th:nth-last-child(2),
    .incontro-details-table td:nth-last-child(2) {
        right: 40px;
        /* Larghezza stimata dell'ultima colonna (da aggiustare se necessario) */
    }

    /* Crea una linea verticale fissa come bordo, che non scompare durante lo scroll */
    .incontro-details-table th:nth-last-child(1)::before,
    .incontro-details-table td:nth-last-child(1)::before {
        content: "";
        position: absolute;
        top: 0;
        left: -2px;
        bottom: 0;
        width: 2px;
        background-color: #ddd;
    }

    /* Applica lo sticky all'ultima colonna (SV) */
    .incontro-details-table th:nth-last-child(1),
    .incontro-details-table td:nth-last-child(1) {
        right: 0;
    }
}