/* ============================================================
   Serie A — squadre e classifiche giocatori
   ============================================================
   Costruita sulle primitive: .fw-band per la fascia, .fw-panel per i due
   blocchi, .fw-table per la classifica, .fw-seg per i selettori.
   Qui c'e' solo quello che questa vista ha di suo.
   ============================================================ */

.sa-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* ---- Fascia ------------------------------------------------------------- */
.sa-band { border-radius: var(--r-md); }

.sa-band-inner {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
}

.sa-band-id {
    align-items: center;
    display: flex;
    gap: var(--sp-4);
    min-width: 0;
}

.sa-band-crest {
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--r-sm);
    display: flex;
    flex-shrink: 0;
    font-size: 1.5rem;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.sa-band-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
}

.sa-band-kpi {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sa-band-kpi + .sa-band-kpi {
    border-left: 1px solid rgba(255, 255, 255, .22);
    padding-left: var(--sp-5);
}

.sa-band-kpi .fw-micro { color: inherit; opacity: .72; }

.sa-band-val {
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.1;
}

.sa-band-sub {
    font-size: var(--fs-micro);
    opacity: .72;
}

/* ---- I due pannelli ----------------------------------------------------- */
.sa-panel { padding: 0; }

.sa-panel-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: space-between;
    padding: var(--sp-4);
}

.sa-panel-title {
    align-items: center;
    color: var(--ink-1);
    display: flex;
    font-size: var(--fs-lg);
    font-weight: 700;
    gap: var(--sp-2);
    margin: 0;
}

.sa-panel-n {
    background: var(--bg-raised);
    border-radius: var(--r-full);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 1px 9px;
}

.sa-panel-sub {
    color: var(--ink-3);
    font-size: var(--fs-sm);
    margin: 2px 0 0;
}

.sa-panel-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.sa-search {
    flex: 0 1 240px;
    min-width: 0;
    position: relative;
}

.sa-search .form-control { padding-left: 34px; }

.sa-search-ico {
    color: var(--ink-3);
    font-size: .9rem;
    left: 12px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.sa-panel-tools .form-select { width: auto; }

.sa-vista .fw-seg-item { padding: 6px 10px; }

.sa-squadre { padding: var(--sp-4); }

/* ---- Le squadre, a griglia ---------------------------------------------
   Dieci per riga a schermo largo, come nel mockup, e via via meno stringendo.
   auto-fill invece di un numero fisso: con diciotto squadre l'ultima riga non
   resta mezza vuota di celle fantasma. */
.sa-grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
}

/* Una card e' un bottone, non un div con onclick: cosi' ci si arriva col Tab
   e si apre con Invio, senza scrivere una riga di codice in piu'. */
.sa-team-card {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    border-top: 3px solid var(--sa-team, var(--ink-3));
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
    text-align: center;
    transition: box-shadow var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.sa-team-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.sa-crest-wrap {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.sa-crest-wrap-sm { height: 30px; width: 30px; }

.sa-crest { max-height: 100%; max-width: 100%; object-fit: contain; }

.sa-crest-fallback {
    align-items: center;
    border-radius: var(--r-sm);
    color: #fff;
    display: flex;
    font-size: var(--fs-micro);
    font-weight: 700;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.sa-team-name {
    color: var(--ink-1);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.sa-team-count {
    color: var(--ink-3);
    font-size: var(--fs-micro);
}

.sa-team-roles {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.sa-role-dot {
    border-radius: var(--r-xs);
    color: #fff;
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    padding: 2px 5px;
}

.sa-role-P { background: var(--role-p); }
.sa-role-D { background: var(--role-d); }
.sa-role-C { background: var(--role-c); }
.sa-role-A { background: var(--role-a); }

/* ---- Le squadre, a elenco ----------------------------------------------
   Stesso dato, piu' contesto: qui ci sta anche la posizione in classifica,
   che nella card non entrerebbe senza affollarla. */
.sa-list {
    display: flex;
    flex-direction: column;
}

.sa-team-row {
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--sa-team, var(--ink-3));
    cursor: pointer;
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 30px minmax(0, 1fr) 110px 110px auto 16px;
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    width: 100%;
}

.sa-team-row:last-child { border-bottom: 0; }
.sa-team-row:hover { background: var(--bg-sunken); }

.sa-team-row .sa-team-name { text-align: left; }

.sa-team-pos {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.sa-team-row .sa-team-roles { justify-content: flex-start; }
.sa-team-go { color: var(--ink-3); font-size: .8rem; }

/* ---- Classifiche giocatori ---------------------------------------------- */
.sa-panel-titolo-wrap { min-width: 0; }

.sa-stat-pick {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Il menu "Altre" sta nella stessa riga del segmentato e si comporta come un
   sesto segmento: quando la statistica scelta e' una delle sue, si accende
   come si accenderebbe un segmento. */
.sa-altre { width: auto; }

.sa-altre[data-attiva="1"] {
    background-color: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.sa-cl-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
}

.sa-cl-toolbar .form-select { width: auto; }
.sa-ricalcola { margin-left: auto; }

.sa-cl-kpis {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--sp-3) var(--sp-4) 0;
}

.sa-cl-kpis:empty { display: none; }

.sa-cl-kpi {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sa-cl-kpi-val {
    color: var(--ink-1);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.15;
}

.sa-cl-kpi-sub {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.sa-cl-body { padding: var(--sp-3) var(--sp-4); }

.sa-cl-scroll { overflow-x: auto; }

.sa-cl-table {
    min-width: 620px;
    table-layout: fixed;
    width: 100%;
}

.sa-cl-table tbody tr { cursor: pointer; }

/* La riga si apre anche col Tab, e allora il fuoco deve vedersi: senza,
   il bordo di sistema finisce sotto le celle. */
.sa-cl-table tbody tr:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.sa-cl-rank {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.sa-cl-name {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    min-width: 0;
}

.sa-cl-name > span {
    color: var(--ink-1);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-cl-team {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    min-width: 0;
}

.sa-cl-team > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-cl-crest-wrap {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.sa-cl-crest { max-height: 100%; max-width: 100%; object-fit: contain; }

.sa-cl-crest-fallback {
    align-items: center;
    border-radius: 3px;
    color: #fff;
    display: flex;
    font-size: 8px;
    font-weight: 700;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.sa-cl-val {
    color: var(--ink-1);
    font-weight: 700;
}

/* ---- Piede: quanti per pagina e le pagine ------------------------------- */
.sa-cl-foot {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
}

.sa-cl-foot:empty { display: none; }

.sa-cl-foot-left {
    align-items: center;
    color: var(--ink-3);
    display: flex;
    font-size: var(--fs-sm);
    gap: var(--sp-2);
}

.sa-cl-foot-left .form-select { width: auto; }
.sa-cl-conteggio { font-variant-numeric: tabular-nums; }

.sa-pg {
    align-items: center;
    display: flex;
    gap: 4px;
}

/* 36px: sopra il minimo tattile una volta contato il gap fra un numero e il
   successivo, che qui e' parte del bersaglio perche' non c'e' nulla sotto. */
.sa-pg-num,
.sa-pg-freccia {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    cursor: pointer;
    display: flex;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    height: 36px;
    justify-content: center;
    min-width: 36px;
    padding: 0 6px;
}

.sa-pg-num:hover:not([aria-current="page"]),
.sa-pg-freccia:hover:not(:disabled) { background: var(--bg-raised); }

.sa-pg-num[aria-current="page"] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.sa-pg-freccia:disabled { cursor: not-allowed; opacity: .45; }

.sa-pg-gap { color: var(--ink-3); padding: 0 2px; }

/* ---- Schermo stretto ---------------------------------------------------- */
@media (max-width: 1279px) {
    .sa-cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .sa-band-inner { gap: var(--sp-3); }
    .sa-band-kpis { gap: var(--sp-3); width: 100%; }
    .sa-band-kpi + .sa-band-kpi { border-left: 0; padding-left: 0; }
    .sa-band-val { font-size: 1.2rem; }
    .sa-band-crest { height: 44px; width: 44px; }

    .sa-panel-head { flex-direction: column; }
    .sa-panel-tools { width: 100%; }
    .sa-search { flex: 1 1 100%; }
    .sa-panel-tools .form-select { flex: 1; }

    .sa-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

    /* Nell'elenco su telefono la posizione e il conteggio starebbero su due
       colonne larghe 110px che non ci sono: passano sotto il nome. */
    .sa-team-row {
        grid-template-areas:
            "crest nome nome go"
            "crest pos  conta go"
            "crest ruoli ruoli go";
        grid-template-columns: 30px auto 1fr 16px;
        row-gap: 2px;
    }
    .sa-team-row > .sa-crest-wrap { grid-area: crest; }
    .sa-team-row > .sa-team-name  { grid-area: nome; }
    .sa-team-row > .sa-team-pos   { grid-area: pos; }
    .sa-team-row > .sa-team-count { grid-area: conta; font-size: var(--fs-micro); }
    .sa-team-row > .sa-team-roles { grid-area: ruoli; }
    .sa-team-row > .sa-team-go    { grid-area: go; align-self: center; }

    /* Cinque statistiche piu' il menu non stanno in 390px: il segmentato
       manda a capo invece di sporgere. Un contenitore che scorre di lato
       nasconderebbe le ultime due dietro un gesto da indovinare. */
    .sa-stat-pick { width: 100%; }
    .sa-stat-pick .fw-seg { flex-wrap: wrap; width: 100%; }
    .sa-stat-pick .fw-seg-item { flex: 1 1 auto; padding: 4px 10px; }
    .sa-altre { width: 100%; }

    .sa-cl-toolbar > .fw-seg { flex: 1 1 auto; }
    .sa-cl-toolbar .form-select { flex: 1 1 auto; }

    .sa-cl-kpis { grid-template-columns: minmax(0, 1fr); }
    .sa-cl-foot { justify-content: center; }
    .sa-ricalcola { margin-left: 0; }
}

/* ============================================================
   La classifica su telefono
   ============================================================
   Cinque colonne in 390px vogliono dire scorrere di lato, e la prima cosa
   che finisce fuori vista e' il valore - cioe' il motivo per cui si guarda
   una classifica. Diventa una riga a due piani: sopra chi e' e quanto fa,
   sotto ruolo e squadra.
   ============================================================ */

@media (max-width: 767px) {
    .sa-cl-scroll { overflow-x: visible; }

    .sa-cl-table,
    .sa-cl-table > tbody,
    .sa-cl-table > tbody > tr,
    .sa-cl-table > tbody > tr > td {
        display: block;
    }

    .sa-cl-table { min-width: 0; table-layout: auto; }
    .sa-cl-table > thead,
    .sa-cl-table > colgroup { display: none; }

    .sa-cl-table > tbody > tr {
        align-items: center;
        border-bottom: 1px solid var(--line);
        column-gap: var(--sp-2);
        display: grid;
        grid-template-areas:
            "rank nome nome val"
            "rank role team val";
        grid-template-columns: 26px auto minmax(0, 1fr) 58px;
        padding: var(--sp-2) 0;
        row-gap: 2px;
    }

    .sa-cl-table > tbody > tr > td {
        border: 0;
        height: auto;
        min-width: 0;
        padding: 0;
    }

    .sa-cl-table .sa-cl-rank { align-self: center; grid-area: rank; }
    .sa-cl-table .sa-cl-name { grid-area: nome; }
    .sa-cl-table .sa-cl-role { grid-area: role; }
    .sa-cl-table .sa-cl-team { grid-area: team; }

    .sa-cl-table .sa-cl-val {
        align-self: center;
        font-size: var(--fs-md);
        grid-area: val;
        text-align: right;
    }

    .sa-cl-table .sa-cl-team {
        color: var(--ink-3);
        font-size: var(--fs-micro);
    }
}