/**
 * Fantacalcinaccio - classifica del fantacalcio
 *
 * La tabella e i filtri usano le classi della classifica di Calcinaccio
 * (calcinaccio-table, calcinaccio-ranking-filters...): l'aspetto viene da
 * Pool. Qui solo cio' che e' del fantacalcio, con le variabili di Pool.
 */

.fanta-classifica h3 { margin: 6px 0 4px; }

/* La giornata puo' essere "7 (formazioni)": nei 140px della classifica di
   Pool veniva tagliata. Qui la casella si allarga quanto il testo. */
.fanta-classifica .calcinaccio-filter-matchtype .calcinaccio-select { max-width: none !important; }
.fanta-cl-nota { margin: 4px 0 10px; font-size: 14px; opacity: .85; }

.fanta-cl-tabella .fanta-cl-num { text-align: center !important; font-variant-numeric: tabular-nums; }

/* ---- Movimento in classifica ---- */
.fanta-cl-tabella .fanta-cl-mov-col { width: 3em; padding-left: 2px !important; padding-right: 2px !important; }
.fanta-cl-mov { font-size: 13px; font-weight: 700; white-space: nowrap; }
.fanta-cl-mov.is-su    { color: var(--calcinaccio-color-success, #28a745) !important; }
.fanta-cl-mov.is-giu   { color: var(--calcinaccio-color-error, #dc3545) !important; }
.fanta-cl-mov.is-fermo { color: #8a8f98 !important; }
.fanta-cl-mov.is-nuovo { font-size: 11px; font-weight: 600; color: #8a8f98 !important; }

/* ---- Riga che apre la formazione ---- */
.fanta-cl-riga { cursor: pointer; }
.fanta-cl-tabella .fanta-cl-apri-col { width: 1%; white-space: nowrap; padding-left: 4px !important; padding-right: 6px !important; }
/* Pulsante della formazione: "Formazione" quando e' chiusa, "Chiudi" quando e' aperta. */
.fanta-cl-apri {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
    opacity: .75;
    cursor: pointer;
}
.fanta-cl-riga:hover .fanta-cl-apri { opacity: 1; }
.fanta-cl-apri-no { display: none; }
.fanta-cl-riga.is-aperta .fanta-cl-apri-si { display: none; }
.fanta-cl-riga.is-aperta .fanta-cl-apri-no { display: inline; }

.fanta-cl-dettaglio > td { padding: 6px 8px 12px !important; text-align: left !important; }

/* ---- Formazione sotto la riga ---- */
.fanta-cl-formazione {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
}
.fanta-cl-formazione th,
.fanta-cl-formazione td {
    padding: 5px 6px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    text-align: left !important;
    background: transparent !important;
    color: inherit !important;
}
.fanta-cl-formazione th { font-size: 12px; font-weight: 600; opacity: .7; }
.fanta-cl-formazione .fanta-cl-num { text-align: right !important; }
.fanta-cl-formazione .fanta-cl-ruolo { display: block; font-size: 12px; opacity: .8; line-height: 1.35; }
.fanta-cl-formazione .fanta-cl-ruolo-nome.is-in-ruolo { font-weight: 600; color: var(--calcinaccio-color-success, #28a745) !important; }

/* ---- La riga di chi guarda: colorata solo la prima colonna ---- */
.fanta-cl-riga.is-io > td:first-child { background: var(--calcinaccio-color-current-user, rgba(0, 128, 128, .15)) !important; }

/* ---- Formazione: intestazione in evidenza, righe tinte secondo il ruolo ---- */
.fanta-cl-formazione thead th {
    background: var(--calcinaccio-color-table-header-bg, #008080) !important;
    color: var(--calcinaccio-color-table-header-text, #fff) !important;
    opacity: 1;
    font-size: 13px;
}
.fanta-cl-formazione tr.is-in-ruolo > td {
    background: rgba(40, 167, 69, .10) !important;
    background: color-mix(in srgb, var(--calcinaccio-color-success, #28a745) 12%, transparent) !important;
}
/* Fuori ruolo, dal piu' vicino al piu' lontano: giallo (stesso reparto),
   arancione (altro reparto), rosso (fra porta e campo). Grigio senza ruolo. */
.fanta-cl-formazione tr.is-stesso-reparto > td {
    background: rgba(255, 193, 7, .14) !important;
    background: color-mix(in srgb, var(--calcinaccio-color-warning, #ffc107) 16%, transparent) !important;
}
.fanta-cl-formazione tr.is-altro-reparto > td {
    background: rgba(253, 126, 20, .14) !important;
    background: color-mix(in srgb, color-mix(in srgb, var(--calcinaccio-color-warning, #ffc107) 50%, var(--calcinaccio-color-error, #dc3545)) 16%, transparent) !important;
}
.fanta-cl-formazione tr.is-porta-campo > td {
    background: rgba(220, 53, 69, .12) !important;
    background: color-mix(in srgb, var(--calcinaccio-color-error, #dc3545) 14%, transparent) !important;
}
.fanta-cl-formazione tr.is-senza-ruolo > td {
    background: rgba(0, 0, 0, .05) !important;
}

/* ---- Formazione come in campo: da tablet in su ----
   Quattro linee (portiere, difesa, centrocampo, attacco) su cinque colonne
   di uguale larghezza; le linee corte stanno al centro. Sul telefono resta
   la tabella. */
.fanta-cl-campo { display: none; }

@media (min-width: 768px) {
    .fanta-cl-dettaglio .fanta-cl-formazione { display: none; }

    .fanta-cl-campo {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .fanta-cl-linea {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .fanta-cl-casella {
        display: flex;
        flex: 0 0 calc((100% - 4 * 8px) / 5);
        min-width: 0;
        overflow-wrap: anywhere;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 6px;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, .08);
        text-align: center;
    }

    .fanta-cl-casella.is-in-ruolo {
        background: rgba(40, 167, 69, .10);
        background: color-mix(in srgb, var(--calcinaccio-color-success, #28a745) 12%, transparent);
    }
    .fanta-cl-casella.is-stesso-reparto {
        background: rgba(255, 193, 7, .14);
        background: color-mix(in srgb, var(--calcinaccio-color-warning, #ffc107) 16%, transparent);
    }
    .fanta-cl-casella.is-altro-reparto {
        background: rgba(253, 126, 20, .14);
        background: color-mix(in srgb, color-mix(in srgb, var(--calcinaccio-color-warning, #ffc107) 50%, var(--calcinaccio-color-error, #dc3545)) 16%, transparent);
    }
    .fanta-cl-casella.is-porta-campo {
        background: rgba(220, 53, 69, .12);
        background: color-mix(in srgb, var(--calcinaccio-color-error, #dc3545) 14%, transparent);
    }
    .fanta-cl-casella.is-senza-ruolo {
        background: rgba(0, 0, 0, .05);
    }

    .fanta-cl-casella-posto { font-size: 12px; opacity: .7; }
    .fanta-cl-casella-nome  { font-weight: 600; }
    .fanta-cl-casella-punti { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .fanta-cl-casella .fanta-cl-ruolo { font-size: 11px; opacity: .8; line-height: 1.35; }
    .fanta-cl-casella .fanta-cl-ruolo-nome.is-in-ruolo { font-weight: 600; color: var(--calcinaccio-color-success, #28a745) !important; }
}

/* Giornata in corso: il totale in classifica, colonna stretta in fondo. */
.fanta-cl-tabella .fanta-cl-finora { width: 5.5em; white-space: nowrap; }

/* Modulo, Rating e Resa: colonne da computer, riga piccola sotto il nome
   sul telefono. */
.fanta-cl-tabella .fanta-cl-desk { white-space: nowrap; }
.fanta-cl-breve { display: none; }
@media (max-width: 640px) {
    .fanta-cl-tabella .fanta-cl-desk { display: none; }
    .fanta-cl-breve {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.3;
        opacity: .7;
        white-space: normal;
    }
}
.fanta-cl-imprevisto { color: var(--calcinaccio-color-error, #dc3545) !important; font-weight: 600; }