/* ============================================================
   Rosa squadra (Serie A)
   ============================================================
   Riusa .lst-table, .fw-band, .fw-tile e .fw-insight. Qui c'e' solo
   quello che questa vista ha di suo: la fascia con i KPI in linea e i
   quattro gruppi per ruolo.
   ============================================================ */

.rosa-wrap {
    display: grid;
    flex: 1;
    gap: var(--sp-4);
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: 0;
}

.rosa-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-height: 0;
    min-width: 0;
}

.rosa-aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}

@media (max-width: 1279px) {
    .rosa-wrap { grid-template-columns: minmax(0, 1fr); }
    .rosa-aside { flex-direction: row; flex-wrap: wrap; }
    .rosa-aside > * { flex: 1 1 300px; }
}

/* ---- Fascia con i KPI in linea ----------------------------------------- */
.rosa-band { border-radius: var(--r-md); }

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

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

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

.rosa-crest { max-height: 62px; max-width: 62px; object-fit: contain; }

.rosa-crest-fallback {
    align-items: center;
    background: rgba(255, 255, 255, .18);
    border-radius: var(--r-sm);
    display: flex;
    font-size: var(--fs-md);
    font-weight: 700;
    height: 56px;
    justify-content: center;
    width: 56px;
}

/* I quattro numeri che dicono com'e' la rosa, separati da filetti sottili. */
.rosa-band-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
}

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

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

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

/* ---- Toolbar ------------------------------------------------------------ */
.rosa-toolbar {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3);
}

.rosa-squadra { max-width: 200px; width: auto; }

.rosa-search {
    flex: 1 1 180px;
    max-width: 260px;
    min-width: 0;
    position: relative;
}

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

/* ---- Riepilogo ---------------------------------------------------------- */
.rosa-kpis {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1439px) {
    .rosa-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Tabella ------------------------------------------------------------
   La card non porta overflow: hidden. Prima lo faceva e tagliava tutto quello
   che sporgeva, comprese le colonne ferme a sinistra. */
.rosa-card { overflow: visible; }
.rosa-card .lst-scroll { border-radius: var(--r-md); }

.rosa-table { min-width: 860px; }

.rosa-c-role { padding: 0; text-align: center; }

/* Le righe assegnate si smorzano con il colore, non con l'opacity: l'opacity
   crea uno stacking context sulla riga e rende traslucide le celle ferme. */
.rosa-table .lst-row-taken td { background: var(--bg-sunken); }

/* ---- I gruppi per ruolo ------------------------------------------------- */
.rosa-group td {
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--line-strong);
    border-top: 1px solid var(--line-strong);
    height: auto;
    padding: 0;
    position: sticky;
    top: 30px;              /* sotto l'intestazione, che e' gia' sticky */
    z-index: 1;
}

.rosa-group-btn {
    align-items: center;
    background: none;
    border: 0;
    color: var(--ink-1);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    width: 100%;
}

.rosa-group-btn:hover { background: var(--bg-raised); }

.rosa-group-ico { color: var(--ink-3); font-size: .8rem; }

.rosa-dot {
    border-radius: 50%;
    flex-shrink: 0;
    height: 8px;
    width: 8px;
}

.rosa-dot-p { background: var(--role-p); }
.rosa-dot-d { background: var(--role-d); }
.rosa-dot-c { background: var(--role-c); }
.rosa-dot-a { background: var(--role-a); }

.rosa-group-lbl { font-weight: 700; }

.rosa-group-n {
    background: var(--bg-raised);
    border-radius: var(--r-full);
    color: var(--ink-2);
    font-size: var(--fs-micro);
    font-weight: 700;
    padding: 1px 8px;
}

/* ---- Sidebar ------------------------------------------------------------ */
.rosa-top-tabs { padding: 0 var(--sp-3) var(--sp-2); }
.rosa-top-tabs .fw-seg { width: 100%; }
.rosa-top-tabs .fw-seg-item { flex: 1; font-size: var(--fs-micro); padding: 4px 6px; }

.rosa-stats { padding: 0 var(--sp-4) var(--sp-3); }
.rosa-stats .fw-panel-row > span:first-child {
    align-items: center;
    color: var(--ink-2);
    display: flex;
    font-size: var(--fs-sm);
    gap: var(--sp-2);
}
.rosa-stats .fw-panel-row > span:last-child {
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ---- Scheletro di caricamento ------------------------------------------ */
.rosa-sk-row {
    align-items: center;
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}

/* ---- Schermo stretto ---------------------------------------------------- */
@media (max-width: 767px) {
    .rosa-band-inner { gap: var(--sp-3); }
    .rosa-band-kpis { gap: var(--sp-3); width: 100%; }
    .rosa-band-kpi + .rosa-band-kpi { border-left: 0; padding-left: 0; }
    .rosa-band-val { font-size: 1.2rem; }
    .rosa-crest-wrap { height: 44px; width: 44px; }
    .rosa-crest { max-height: 44px; max-width: 44px; }
    .rosa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rosa-search { flex-basis: 100%; max-width: none; }
    .rosa-squadra { max-width: none; width: 100%; }
}

/* ============================================================
   La Rosa su telefono
   ============================================================
   Stessa idea della Lista, griglia diversa: qui non c'e' la colonna di
   selezione ma il ruolo ha una cella propria, e la squadra e' sempre la
   stessa — al suo posto vanno le presenze, che nella rosa di un club dicono
   piu' del nome del club.
   ============================================================ */

@media (max-width: 767px) {
    .rosa-table > tbody > tr.lst-row {
        grid-template-areas:
            "role star nome nome nome"
            "role star qt   mf   pg"
            "role star stato stato stato";
        grid-template-columns: 30px 28px auto auto 1fr;
        min-height: 96px;
    }

    .rosa-table .lst-row > .rosa-c-role { grid-area: role; justify-content: center; }
    .rosa-table .lst-row > .lst-col-partite_disputate {
        color: var(--ink-2);
        display: flex;
        font-size: var(--fs-sm);
        gap: 3px;
        grid-area: pg;
    }
    .rosa-table .lst-row > .lst-col-partite_disputate::before {
        color: var(--ink-3);
        content: "PG";
        font-size: var(--fs-micro);
        font-weight: 600;
        margin-right: 4px;
    }
    .rosa-table .lst-row > .lst-col-stato { justify-content: flex-start; }

    /* Le intestazioni di gruppo restano righe intere, non card. */
    .rosa-table > tbody > tr.rosa-group { display: block; position: static; }
    .rosa-table > tbody > tr.rosa-group > td { display: block; }

    .rosa-table { min-width: 0; }
}