/* PianificaSquadra - badge ruolo Mantra compatti (coerenti con il font dei nomi giocatore, ~10px) */
.badgeRuoloMantraCompact .marker_P,
.badgeRuoloMantraCompact .marker_D,
.badgeRuoloMantraCompact .marker_A,
.badgeRuoloMantraCompact .markerDefault {
    width: 14px;
    height: 14px;
    font-size: 8px;
}

.badgeRuoloMantraCompact .markerMantra {
    font-size: 8px;
}

    .badgeRuoloMantraCompact .markerMantra .marker_LineaPor,
    .badgeRuoloMantraCompact .markerMantra .marker_LineaDif,
    .badgeRuoloMantraCompact .markerMantra .marker_LineaCen,
    .badgeRuoloMantraCompact .markerMantra .marker_LineaTrq,
    .badgeRuoloMantraCompact .markerMantra .marker_LineaAtt {
        width: 14px;
        height: 14px;
        font-size: 8px;
        margin: 0 1px;
    }

/* PianificaSquadra - contatori paletti: font sempre nero, anche in negativo */
.counterBlack {
    color: black !important;
}

/* Il contatore U21 (sfondo nero) si confonde con lo sfondo scuro della card
   e sembra piu' piccolo dei pallini colorati P/D/A: aggiungo un bordo per
   renderlo visivamente della stessa dimensione/peso degli altri tre. */
.sfondoCounters .markerDefault {
    border: 1px solid wheat;
}

/* PianificaSquadra - box riepilogo squadra: icone vettoriali al posto dei raster */
.iconVector60{
    font-size:48px!important;
    line-height:1;
}

.iconVector20{
    font-size:16px!important;
    line-height:1;
    vertical-align:middle;
}

.iconGrid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(2, 1fr);
    gap:14px 8px;
    text-align:center;
}

.iconGridItem{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.iconGridItem .iconVector60{
    margin-bottom:8px;
}

.iconButtonsRow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

/* PianificaSquadra - box statistiche squadra: meno tondeggiante, sfondo piatto (no gradiente), icone più leggere */
.overview-item--flat {
    border-radius: var(--el-radius-sm);
    background: var(--el-gradient-stage);
}
.overview-item--flat .iconVector60 {
    font-size: 40px;
    opacity: .85;
}

/* PianificaSquadra / GestioneAsta / ListeAsta - box economico "stile EuroLeague TV":
   griglia di celle label + valore, niente icone. Allineato al pannello della DirettaAsta.
   Vive sullo sfondo scuro "stage", quindi testo chiaro. */
.eco-box {
    background: var(--el-gradient-stage);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--el-radius-lg);
    padding: 12px;
    text-align: left;
}

.eco-box-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.eco-box-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--el-ink-on-dark);
}

.eco-box-fascia {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(255, 255, 255, .12);
    color: var(--el-ink-on-dark);
    padding: .12rem .55rem;
    border-radius: var(--el-radius-pill);
    opacity: .85;
}

.eco-box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: .5rem;
}

/* Variante compatta: sempre 3 colonne su una riga sola (pannello giocatore selezionato,
   card stretta), celle e label più piccole per starci senza andare a capo. */
.eco-box-grid--3col {
    grid-template-columns: repeat(3, 1fr);
    gap: .3rem;
}

    .eco-box-grid--3col .eco-box-item {
        padding: .35rem .25rem;
        text-align: center;
    }

    .eco-box-grid--3col .eco-box-lbl {
        font-size: .58rem;
        white-space: nowrap;
    }

    .eco-box-grid--3col .eco-box-val {
        font-size: .85rem;
    }

.eco-box-item {
    background: rgba(255, 255, 255, .05);
    border-radius: 6px;
    padding: .45rem .55rem;
}

.eco-box-lbl {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--el-ink-on-dark);
    opacity: .55;
    margin-bottom: .15rem;
}

.eco-box-val {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--el-ink-on-dark);
}

    .eco-box-val.pos {
        color: #7ee787;
    }

    .eco-box-val.neg {
        color: #ff7b72;
    }

/* PianificaSquadra / GestioneAsta / ListeAsta - riepilogo slot rimasti in versione testuale
   (sostituisce i pallini colorati marker_P/D/A), stile analogo a .tv-asta-slots della
   DirettaAsta ma in chiave chiara: box chiaro, pillole "P 2/4" ecc. */
.slot-box {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.slot-box-item {
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: var(--el-radius-pill);
    background: var(--el-surface-2);
    border: 1px solid var(--el-line-soft);
    color: var(--el-muted);
    white-space: nowrap;
}

    .slot-box-item.open {
        background: var(--el-green-soft);
        border-color: rgba(30, 122, 52, .25);
        color: var(--el-green-strong);
    }

    /* Slot oltre il limite consentito per il ruolo: evidenzia in rosso tenue */
    .slot-box-item.over {
        background: rgba(217, 54, 79, .1);
        border-color: rgba(217, 54, 79, .3);
        color: var(--el-live);
    }

/* PianificaSquadra - dropdown autocomplete ricerca giocatore: staccata dal box sottostante */
.ui-autocomplete {
    margin-top: 6px;
    border-radius: var(--el-radius-sm);
    border: 1px solid var(--el-line);
    box-shadow: var(--el-shadow-md);
    background: var(--el-surface);
    padding: 4px 0;
}
.ui-autocomplete .ui-menu-item {
    padding: 4px 12px;
    font-size: .9rem;
}
.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-state-active {
    background: var(--el-green-soft) !important;
    border: none !important;
    color: var(--el-green-strong) !important;
}

/* ============================================================================
   Tema chiaro pagine asta — agganciato a body.asta-light
   (PianificaSquadra, GestioneAsta, ListeAsta, ListaSvincolati).
   Converte in chiaro gli elementi altrimenti scuri di queste pagine
   (box economico, card giocatore selezionato, righe segnaposto "acquista"),
   senza toccare le stesse classi altrove (DirettaAsta usa .tv-eco; le
   formazioni usano .au-card--stage su pagine senza questa classe body).
   ============================================================================ */

/* --- Box economico (squadra): stessa estetica del timer "Prossimo turno"
   (.matchday-card) e della card del giocatore selezionato — fondo scuro "stage"
   con glow oro + bordo oro in tema scuro; in tema chiaro si ribalta su superfici
   chiare con lo stesso alone oro della card timer (blocco in fondo a questa
   sezione). Usato in PianificaSquadra (box sopra la ricerca), GestioneAsta
   (box economici delle squadre) e ListeAsta (_listone).
   Le stesse regole .eco-box-item/-lbl/-val valgono anche per la griglia
   Cart./Stip./Anno dentro la card giocatore (che non è dentro un .eco-box). --- */
.asta-light .eco-box {
    background: var(--el-gradient-stage);
    border: 1px solid var(--el-gold-border);
    box-shadow: var(--el-shadow-md);
}

.asta-light .eco-box-name {
    color: var(--el-ink-on-dark);
}

.asta-light .eco-box-fascia {
    background: rgba(255, 255, 255, .12);
    color: var(--el-ink-on-dark);
    opacity: .85;
}

.asta-light .eco-box-item {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
}

.asta-light .eco-box-lbl {
    color: var(--el-muted-on-dark);
    opacity: 1;
}

.asta-light .eco-box-val {
    color: var(--el-ink-on-dark);
}

    .asta-light .eco-box-val.pos {
        color: #7ee787;
    }

    .asta-light .eco-box-val.neg {
        color: #ff7b72;
    }

/* --- Tema chiaro: il box economico si ribalta come la card timer (.matchday-card
   in public-header.css) — fondo chiaro con alone oro in alto + bordo oro, e i token
   *-on-dark rimappati sui token normali cosi' name/val/lbl restano leggibili senza
   toccarli uno per uno. Regole scoped sotto .eco-box; la griglia Cart./Stip./Anno
   della card giocatore (au-card--stage) ha il suo blocco chiaro dedicato piu' in
   basso. In AstaLive vincono comunque le regole #al-root di asta-live.css
   (specificita' maggiore). --- */
[data-bs-theme="light"] .eco-box,
[data-bs-theme="light"] .asta-light .eco-box {
    background: radial-gradient(560px 320px at 50% 6%, rgba(197, 138, 31, .12) 0%, transparent 62%),
                linear-gradient(180deg, var(--el-surface) 0%, var(--el-surface-2) 100%);
    border: 1px solid var(--el-gold-border);
    --el-ink-on-dark: var(--el-ink);
    --el-muted-on-dark: var(--el-muted);
}

[data-bs-theme="light"] .eco-box .eco-box-item {
    background: var(--el-surface);
    border: 1px solid var(--el-gold-border);
}

[data-bs-theme="light"] .eco-box .eco-box-fascia {
    background: var(--el-surface-3);
    color: var(--el-ink-2);
    opacity: 1;
}

[data-bs-theme="light"] .eco-box .eco-box-lbl {
    color: var(--el-muted);
    opacity: 1;
}

[data-bs-theme="light"] .eco-box .eco-box-val.pos {
    color: var(--el-green);
}

[data-bs-theme="light"] .eco-box .eco-box-val.neg {
    color: var(--el-live);
}

/* --- Card giocatore selezionato (au-card--stage): stessa estetica del timer
   "Prossimo turno" (.matchday-card) — fondo scuro "stage" con glow oro + bordo
   oro in tema scuro; in tema chiaro si ribalta su superfici chiare con l'alone
   oro (blocco dedicato sotto). Il testo usa i token *-on-dark, rimappati dal
   blocco chiaro. --- */
.asta-light .au-card--stage {
    background: var(--el-gradient-stage);
    border: 1px solid var(--el-gold-border);
    color: var(--el-ink-on-dark);
    box-shadow: var(--el-shadow-md);
}

    .asta-light .au-card--stage .text-light,
    .asta-light .au-card--stage p,
    .asta-light .au-card--stage h3 {
        color: var(--el-ink-on-dark) !important;
    }

    .asta-light .au-card--stage .asta-gioc-squadra {
        color: var(--el-muted-on-dark) !important;
    }

    .asta-light .au-card--stage hr {
        border-color: rgba(255, 255, 255, .15);
        opacity: 1;
    }

/* --- Tema chiaro: la card giocatore si ribalta come il box economico qui sopra —
   superfici chiare con alone oro, token *-on-dark rimappati (le regole figlie con
   !important leggono var() e si sistemano da sole). La griglia Cart./Stip./Anno
   (eco-box-item fuori da .eco-box) prende le stesse celle chiare. Usata in
   PianificaSquadra e GestioneAsta (_boxGiocatore + card squadre). --- */
[data-bs-theme="light"] .asta-light .au-card--stage {
    background: radial-gradient(560px 320px at 50% 6%, rgba(197, 138, 31, .12) 0%, transparent 62%),
                linear-gradient(180deg, var(--el-surface) 0%, var(--el-surface-2) 100%);
    color: var(--el-ink);
    --el-ink-on-dark: var(--el-ink);
    --el-muted-on-dark: var(--el-muted);
}

    [data-bs-theme="light"] .asta-light .au-card--stage hr {
        border-color: rgba(0, 0, 0, .12);
    }

    [data-bs-theme="light"] .asta-light .au-card--stage .eco-box-item {
        background: var(--el-surface);
        border: 1px solid var(--el-gold-border);
    }

    [data-bs-theme="light"] .asta-light .au-card--stage .eco-box-lbl {
        color: var(--el-muted);
        opacity: 1;
    }

/* --- Righe segnaposto "acquista"/"opzione acquisto": highlight grigio. Grigio e
   non verde perche' da quando le righe sono tinte per posizione (.fg-pos-* in
   components.css) un verde chiaro si confonderebbe con la fascia dei difensivi.
   Bootstrap dipinge lo sfondo su OGNI <td> tramite la custom property --bs-table-bg
   (.table > :not(caption) > * > * { background-color: var(--bs-table-bg) }), quindi un
   semplice "background" sul <tr> resta coperto dalle celle. Si deve invece sovrascrivere
   la custom property sulla riga: essendo ereditata, le celle figlie la raccolgono da qui
   invece che dalla <table> (che la fissa a --el-surface, bianco). */
.asta-light .backColorDarkBlue {
    --bs-table-bg: rgba(128, 128, 128, .16);
}

    .asta-light .backColorDarkBlue td {
        color: var(--el-ink) !important;
    }

/* ============================================================================
   Rifiniture Tool Scambi (issue #108) — bottoni azione, badge, affordance liste
   ============================================================================ */

/* Bottoni icona+testo nella riga azioni: l'icona eredita il colore del bottone
   (aggira la regola legacy globale "i { color:#fff }"). */
.iconButtonsRow .btn i {
    color: inherit;
}

/* Box giocatore selezionato: badge posizione/ruolo più grandi e leggibili. */
.asta-light .au-card--stage .badgeRuoloMantraCompact .marker_P,
.asta-light .au-card--stage .badgeRuoloMantraCompact .marker_D,
.asta-light .au-card--stage .badgeRuoloMantraCompact .marker_C,
.asta-light .au-card--stage .badgeRuoloMantraCompact .marker_A,
.asta-light .au-card--stage .badgeRuoloMantraCompact .markerDefault {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.asta-light .au-card--stage .badgeRuoloMantraCompact .markerMantra {
    font-size: 13px;
}

    .asta-light .au-card--stage .badgeRuoloMantraCompact .markerMantra .marker_LineaPor,
    .asta-light .au-card--stage .badgeRuoloMantraCompact .markerMantra .marker_LineaDif,
    .asta-light .au-card--stage .badgeRuoloMantraCompact .markerMantra .marker_LineaCen,
    .asta-light .au-card--stage .badgeRuoloMantraCompact .markerMantra .marker_LineaTrq,
    .asta-light .au-card--stage .badgeRuoloMantraCompact .markerMantra .marker_LineaAtt {
        width: 26px;
        height: 26px;
        font-size: 13px;
        margin: 0 2px;
    }

/* Nomi giocatore cliccabili nelle liste (roster + box operazioni/acquisti/scarti/
   preferiti): niente sottolineatura, hover dorato e riga evidenziata al passaggio.
   Le celle dipingono --bs-table-bg, quindi l'highlight di riga va fatto
   sovrascrivendo quella custom property (come .backColorDarkBlue). */
a[href*="RichiamaGiocatore"] {
    text-decoration: none;
    cursor: pointer;
}

    a[href*="RichiamaGiocatore"]:hover,
    a[href*="RichiamaGiocatore"]:focus {
        color: var(--el-gold-2) !important;
    }

tr:has(a[href*="RichiamaGiocatore"]):hover {
    --bs-table-bg: rgba(128, 128, 128, .14);
    cursor: pointer;
}

/* ============================================================================
   Modifiche varie simulatore (issue #134)
   ============================================================================ */

/* --- Finestra giocatore selezionato: nome proporzionato alla card (il vecchio
   fSize100 non esisteva in nessun foglio e il nome usciva a dimensione h3 piena) --- */
.asta-light .asta-gioc-nome {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .15rem;
    overflow-wrap: break-word;
}

/* Foto giocatore nel box selezionato di GestioneAsta: cerchio su fondo
   scuro, come nella pagina Giocatore. public-header.css non e' caricato qui. */
.pl-photo-hero {
    display: inline-block;
    position: relative;
    line-height: 0;
    margin-bottom: 8px;
}

.pl-photo-hero img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    background: rgba(0, 0, 0, .7);
    border: 3px solid rgba(255, 255, 255, .9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

.asta-light .asta-gioc-squadra {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .75;
    margin-bottom: .4rem;
}

/* Tasti azione della card: riga flessibile centrata, spaziatura uniforme
   (prima erano inline con soli margini verticali e andavano a capo male). */
.asta-gioc-azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.asta-gioc-cambioserie {
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
}

/* --- Proporzionamento colonne dei box (rosa, scarti, acquisti, operazioni,
   preferiti): le colonne badge e quelle numeriche si stringono al contenuto,
   il nome del giocatore assorbe lo spazio restante. Senza questi vincoli il
   browser distribuiva le larghezze in modo diverso da box a box. --- */
.asta-light .table-top-countries th.text-center,
.asta-light .table-top-countries td.ruoloSel,
.asta-light .table-top-countries td.u21Sel,
.asta-light .table-top-countries th.text-end,
.asta-light .table-top-countries td.text-end {
    width: 1%;
    white-space: nowrap;
}

/* --- Promosso automaticamente dalla primavera (fuori età): riga marcata con un
   filo oro a sinistra e freccia oro nella colonna U21. Serve a far vedere al
   presidente, in mezzo alla rosa, chi è entrato in prima squadra senza che lui
   abbia fatto nulla — la decisione (tenere o scartare) resta sua. Il filo è un
   inset shadow e non un border-left: il border sposterebbe le celle, e la tinta
   di reparto (tr.fg-pos-*) resta visibile sotto. Vale in ListeAsta, GestioneAsta
   e PianificaSquadra; --el-gold è già theme-aware (chiaro/scuro e skin). --- */
.table-top-countries tr.promosso-auto > td:first-child {
    box-shadow: inset 3px 0 0 var(--el-gold);
}

.table-top-countries tr.promosso-auto td.u21Sel {
    color: var(--el-gold);
}

/* Badge ruolo classico e Mantra sulla stessa linea (il wrapper .markerMantra
   aggiunge un livello inline che, senza questo, spingeva il classico più in basso). */
.asta-light .table-top-countries .badgeRuoloMantraCompact,
.asta-light .table-top-countries .badgeRuoloMantraCompact .markerMantra {
    vertical-align: middle;
}

/* Le colonne numeriche (VAL/STIP/A) con width:1% si stringevano al contenuto e
   finivano appiccicate tra loro e al bordo destro: l'aria si mette solo a
   SINISTRA di ogni colonna numerica (un solo spazio tra colonna e colonna, non
   due sommati), così i box stretti non sforano. Il padding inline di 3px sulle
   celle impone l'!important. */
.asta-light .table-top-countries th.text-end,
.asta-light .table-top-countries td.text-end {
    padding-left: 9px !important;
    padding-right: 3px !important;
}

/* Le colonne elastiche (nome giocatore, squadra) sono le uniche senza width:1%:
   assorbono lo spazio residuo. Le parole molto lunghe (nomi/squadre) devono
   spezzarsi, altrimenti allargano la tabella oltre il bordo del box — si vedeva
   nelle card più larghe (La mia Squadra, Preferiti) che sforavano a destra. */
.asta-light .table-top-countries td:not(.ruoloSel):not(.u21Sel):not(.text-center):not(.text-end),
.asta-light .table-top-countries th:not(.text-center):not(.text-end) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Aria sui bordi esterni della tabella: sinistra sulla prima colonna, destra
   sull'ultima, così i badge e l'ultimo dato non toccano il filo del box. */
.asta-light .table-top-countries > thead > tr > th:first-child,
.asta-light .table-top-countries > tbody > tr > td:first-child {
    padding-left: 10px !important;
}

.asta-light .table-top-countries > thead > tr > th:last-child,
.asta-light .table-top-countries > tbody > tr > td:last-child {
    padding-right: 10px !important;
}

/* --- ListeAsta: le card stanno in col-xl-3 (fino a 4 per riga), piu' strette
   dei box di PianificaSquadra. A differenza di PianificaSquadra — dove il nome sta
   nel <td> e scorre a font 10px — qui il nome e' dentro <p class="truncate">, che
   (da style.css) lo blocca in un box FISSO da 95px con ellissi: quel box rubava
   lo spazio a STIP/A spingendole nello scroll orizzontale. Nel SOLO contesto
   ListeAsta (l'unico che avvolge .table-top-countries in .table-responsive)
   neutralizziamo il box fisso: il nome scorre e va a capo come in PianificaSquadra,
   liberando spazio per STIP e A. Font uniformato a 10px, identico a PianificaSquadra. --- */
.asta-light .table-responsive .table-top-countries .truncate {
    width: auto !important;
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 10px;
    line-height: 1.2;
}

/* --- Preferiti: click sulla riga apre la scheda del giocatore --- */
.preferito-row {
    cursor: pointer;
    user-select: none;
}

/* Stessa evidenziazione di riga in hover degli altri box. Le righe dei
   preferiti non hanno il link RichiamaGiocatore, quindi la regola generica
   tr:has(a[href*="RichiamaGiocatore"]):hover non le copre: la replichiamo qui. */
.asta-light .table-top-countries tbody tr.preferito-row:hover {
    --bs-table-bg: rgba(128, 128, 128, .14);
}

/* --- Colonna P/R (badge ruolo): il contenuto non risultava centrato
   verticalmente rispetto alle altre colonne. Le celle badge, prive di
   font-size, ereditavano il font della tabella (~16px) e il loro strut, piu'
   alto del badge (14px), spostava il pallino rispetto al testo 10px delle
   altre celle. Uniformando font-size/line-height delle celle badge a quelli
   delle altre, con align-middle sulla tabella il badge torna centrato. --- */
.asta-light .table-top-countries td.ruoloSel {
    font-size: 10px;
    line-height: 0;
}

/* --- Badge ruolo Mantra dentro le modali: piu' grandi e leggibili dei 14px
   compatti usati nelle tabelle (l'ID batte per specificita' l'override a 14px).
   La misura di riferimento e' quella di "Salva nei preferiti" (#ModalPreferiti);
   #astaModal di GestioneAsta usa la stessa misura. --- */
#ModalPreferiti .badgeRuoloMantraCompact .marker_P,
#ModalPreferiti .badgeRuoloMantraCompact .marker_D,
#ModalPreferiti .badgeRuoloMantraCompact .marker_C,
#ModalPreferiti .badgeRuoloMantraCompact .marker_A,
#ModalPreferiti .badgeRuoloMantraCompact .markerDefault,
#astaModal .badgeRuoloMantraCompact .marker_P,
#astaModal .badgeRuoloMantraCompact .marker_D,
#astaModal .badgeRuoloMantraCompact .marker_C,
#astaModal .badgeRuoloMantraCompact .marker_A,
#astaModal .badgeRuoloMantraCompact .markerDefault {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

#ModalPreferiti .badgeRuoloMantraCompact .markerMantra,
#astaModal .badgeRuoloMantraCompact .markerMantra {
    font-size: 13px;
}

    #ModalPreferiti .badgeRuoloMantraCompact .markerMantra .marker_LineaPor,
    #ModalPreferiti .badgeRuoloMantraCompact .markerMantra .marker_LineaDif,
    #ModalPreferiti .badgeRuoloMantraCompact .markerMantra .marker_LineaCen,
    #ModalPreferiti .badgeRuoloMantraCompact .markerMantra .marker_LineaTrq,
    #ModalPreferiti .badgeRuoloMantraCompact .markerMantra .marker_LineaAtt,
    #astaModal .badgeRuoloMantraCompact .markerMantra .marker_LineaPor,
    #astaModal .badgeRuoloMantraCompact .markerMantra .marker_LineaDif,
    #astaModal .badgeRuoloMantraCompact .markerMantra .marker_LineaCen,
    #astaModal .badgeRuoloMantraCompact .markerMantra .marker_LineaTrq,
    #astaModal .badgeRuoloMantraCompact .markerMantra .marker_LineaAtt {
        width: 26px;
        height: 26px;
        font-size: 13px;
        margin: 0 2px;
    }

/* U21 e anno di nascita in sola lettura nell'acquisto (#134): lo switch resta
   nel POST (non e' disabled) ma non risponde ai click; l'input readonly si
   distingue visivamente dai campi editabili. */
.switch-readonly {
    opacity: .55;
    pointer-events: none;
}

/* Selettore stelline valutazione (modale "Salva nei preferiti").
   Regole recuperate da admin/css/theme.css, rimossa nel commit 56ce52b. */
.wrapperRating {
    position: relative;
    display: inline-block;
    border: none;
    font-size: 14px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
}

    .wrapperRating input {
        border: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
        position: absolute !important;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        opacity: 0;
    }

    .wrapperRating label {
        position: relative;
        float: right;
        color: #C8C8C8;
        border: 0;
    }

        .wrapperRating label:before {
            margin: 5px;
            content: "\f005";
            font-family: FontAwesome;
            display: inline-block;
            font-size: 1.5em;
            color: #ccc;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

    .wrapperRating input:checked ~ label:before {
        color: #FFC107;
    }

    .wrapperRating label:hover ~ label:before {
        color: #ffdb70;
    }

    .wrapperRating label:hover:before {
        color: #FFC107;
    }

/* --- Card collassabili dell'area asta (PianificaSquadra, GestioneAsta, ListeAsta,
   ListaSvincolati): testate allineate a quelle del backoffice. Le regole di app.css
   non ci arrivano perche' qui la testata sta dentro .au-card-inner e non e' figlia
   diretta di .card. Scope .asta-cards: e' una body class, la stampano solo le quattro
   view sopra. Questo CSS lo caricano anche AstaLive, Rilasci e Home, che senza quella
   classe restano com'erano. --- */
.asta-cards .au-card-inner > .card-header {
    background: var(--el-surface-2);
    font-family: var(--el-font-display);
    font-size: var(--el-text-lg);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Icona della testata in pastiglia verde. Tinta con color-mix e non --el-green-soft:
   nel tema chiaro quest'ultimo sparirebbe dentro la fascia (--el-surface-2). */
.asta-cards .au-card-inner > .card-header i.fas,
.asta-cards .au-card-inner > .card-header i.far {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    border-radius: var(--el-radius);
    background: color-mix(in srgb, var(--el-green-strong) 14%, transparent);
    color: var(--el-green-strong);
    font-size: 13px;
}

/* Angoli bassi: a card chiusa la testata e' l'unico elemento visibile e i suoi angoli
   inferiori restano quadrati sopra la card arrotondata (si vede sotto le quattro card
   che partono collassate, e in hover). .au-card-inner eredita il raggio della card e
   ritaglia i figli: vale sia da chiusa che da aperta, senza dipendere dallo stato del
   collapse. Il menu dell'autocomplete non ne risente: jQuery UI lo appende al body. */
.asta-cards .card > .au-card-inner {
    border-radius: inherit;
    overflow: hidden;
}

/* --- Tabelle leggibili: sostituisce i font-size 10px che stavano inline su ogni
   cella di rosa/scarti/acquisti/operazioni/preferiti. --- */
.asta-tab-table td {
    font-size: var(--el-text-sm);
    padding: 5px 8px;
    font-variant-numeric: tabular-nums;
}

/* Testata di reparto dentro la tabella rosa (Portieri/Difensivi/Offensivi/Under 21):
   fa anche da toggle del collapse di gruppo (un tbody per reparto). */
.asta-reparto td {
    font-family: var(--el-font-display);
    font-size: var(--el-text-sm);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--el-muted);
    padding: 10px 8px 3px;
    cursor: pointer;
    user-select: none;
}

.asta-reparto td::after {
    content: "▾";
    float: right;
    color: var(--el-muted);
}

.asta-gruppo-chiuso .asta-reparto td::after {
    content: "▸";
}

.asta-gruppo-chiuso tr:not(.asta-reparto) {
    display: none;
}

.asta-reparto-cnt {
    font-family: var(--el-font-body);
    font-size: 11px;
    letter-spacing: 0;
    color: var(--el-muted);
}

/* --- ListaSvincolati: la colonna squadra sta su una riga sola (.text-nowrap nel
   markup), quindi l'unica colonna elastica deve essere il nome del giocatore.
   Senza questo eredita da td.text-end width:1% + nowrap: nei box difensivi, con
   2-3 badge ruolo, la tabella sforava il bordo della card e mangiava il binocolo.
   Stessa specificita' della regola su td.text-end, vince per ordine: tenere in
   coda al file. --- */
.asta-light .table-top-countries td.colGiocatore {
    width: auto;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .asta-light .table-top-countries td.colSquadraScartato {
        max-width: 7.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}