/* SimulazioneAsta - 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;
    }

/* SimulazioneAsta - 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;
}

/* SimulazioneAsta - 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;
}

/* SimulazioneAsta - 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;
}

/* SimulazioneAsta / 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;
    }

/* SimulazioneAsta / 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);
    }

/* SimulazioneAsta - 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
   (SimulazioneAsta, 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 in chiave bianca --- */
.asta-light .eco-box {
    background: var(--el-surface);
    border: 1px solid var(--el-line);
    box-shadow: var(--el-shadow-sm);
}

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

.asta-light .eco-box-fascia {
    background: var(--el-line-soft);
    color: var(--el-ink-2);
    opacity: 1;
}

.asta-light .eco-box-item {
    background: var(--el-surface-2);
    border: 1px solid var(--el-line-soft);
}

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

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

    .asta-light .eco-box-val.pos {
        color: var(--el-green-strong);
    }

    .asta-light .eco-box-val.neg {
        color: var(--el-live);
    }

/* --- Card giocatore selezionato (au-card--stage) in chiave bianca --- */
.asta-light .au-card--stage {
    background: var(--el-surface-2);
    border: 1px solid var(--el-line);
    color: var(--el-ink);
    box-shadow: var(--el-shadow-sm);
}

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

    .asta-light .au-card--stage hr {
        border-color: var(--el-line);
        opacity: 1;
    }

/* --- Righe segnaposto "acquista"/"opzione acquisto": highlight verde chiaro.
   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(30, 122, 52, .12);
}

    .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 .sim-gioc-nome {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .15rem;
    overflow-wrap: break-word;
}

.asta-light .sim-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). */
.sim-gioc-azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.sim-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;
}

/* 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;
}

/* 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;
}

/* --- 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);
   #ModalSimulazione (Acquista/Inserisci/Prestito/Scambio su SimulazioneAsta) e
   #astaModal (le stesse azioni su GestioneAsta) ci si allineano. --- */
#ModalPreferiti .badgeRuoloMantraCompact .marker_P,
#ModalPreferiti .badgeRuoloMantraCompact .marker_D,
#ModalPreferiti .badgeRuoloMantraCompact .marker_C,
#ModalPreferiti .badgeRuoloMantraCompact .marker_A,
#ModalPreferiti .badgeRuoloMantraCompact .markerDefault,
#ModalSimulazione .badgeRuoloMantraCompact .marker_P,
#ModalSimulazione .badgeRuoloMantraCompact .marker_D,
#ModalSimulazione .badgeRuoloMantraCompact .marker_C,
#ModalSimulazione .badgeRuoloMantraCompact .marker_A,
#ModalSimulazione .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,
#ModalSimulazione .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,
    #ModalSimulazione .badgeRuoloMantraCompact .markerMantra .marker_LineaPor,
    #ModalSimulazione .badgeRuoloMantraCompact .markerMantra .marker_LineaDif,
    #ModalSimulazione .badgeRuoloMantraCompact .markerMantra .marker_LineaCen,
    #ModalSimulazione .badgeRuoloMantraCompact .markerMantra .marker_LineaTrq,
    #ModalSimulazione .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;
    }

/* --- Finestra "Acquista giocatore" (e azioni affini): label sopra i campi,
   griglia a due colonne, elementi statici (badge ruolo, switch U21) allineati
   all'altezza dei campi di input. --- */
#ModalSimulazione .sim-modal-testata {
    text-align: center;
    margin-bottom: .75rem;
}

/* Nessun font-size: il nome e' un h1, come in _modalPreferiti/_modalAsta, e ne
   eredita la scala tipografica di Bootstrap. L'override a 1.35rem che c'era qui
   era l'unico motivo per cui questo nome risultava piu' piccolo degli altri. */
#ModalSimulazione .sim-modal-nome {
    font-weight: 700;
    margin-bottom: .1rem;
    overflow-wrap: break-word;
}

#ModalSimulazione .sim-modal-stato {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--el-muted);
    margin-bottom: 0;
}

#ModalSimulazione .sim-modal-lbl {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--el-muted);
    margin-bottom: .25rem;
}

#ModalSimulazione .sim-modal-static {
    display: flex;
    align-items: center;
    min-height: 38px;
}

/* 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;
}

#ModalSimulazione input[readonly] {
    background-color: var(--el-surface-2);
    color: var(--el-ink-2);
}
/* 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;
    }