/* ============================================================
   Base e primitive
   ============================================================
   Va dopo tokens.css e prima di style.css. Contiene tre cose:

     1. le impostazioni di base (reset, tipografia, focus, movimento)
     2. gli override dei componenti Bootstrap
     3. le primitive .fw-*, il vocabolario visivo del sito

   Le primitive sono classi nuove: non collidono con nulla di esistente.
   Quando una vista passa a css/views/ deve smettere di rifarsi lo stile
   addosso e usare queste.
   ============================================================ */

/* Il sito e' stato costruito su un reset universale: toglierlo ora farebbe
   riemergere i margini di default del browser su liste, form e titoli in ogni
   vista. Resta com'era. */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg-app);
    color: var(--ink-1);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

/* Il serif porta i nomi e i titoli. I numeri restano sans: nei mockup i valori
   grandi (5.50, 33%, 7.14) sono Outfit, non serif. */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    /* Niente colore: i titoli ereditano. Fissarlo qui spegnerebbe il testo di
       ogni contenitore colorato, a partire dalla fascia squadra del modale. */
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4, h5, h6 { font-size: var(--fs-base); }

p { margin: 0; }

/* Nelle colonne di voti e prezzi le cifre proporzionali fanno ballare
   l'incolonnamento a ogni aggiornamento live. */
table,
input[type="number"],
.fw-num,
.fw-table td,
.fw-tile-value {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--navy-tint);
    color: var(--ink-1);
}

/* Un anello visibile ovunque, ma solo per chi naviga da tastiera. */
:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Override dei componenti Bootstrap
   ============================================================ */

.btn {
    --bs-btn-border-radius: var(--r-xs);
    border-radius: var(--r-xs);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 8px 16px;
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.btn:active {
    transform: none;   /* niente scale: sposta il layout intorno */
}

.btn-primary {
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--navy-hover);
    --bs-btn-hover-border-color: var(--navy-hover);
    --bs-btn-active-bg: var(--navy-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.btn-success {
    --bs-btn-bg: var(--positive);
    --bs-btn-border-color: var(--positive);
    --bs-btn-hover-bg: var(--positive-hover);
    --bs-btn-hover-border-color: var(--positive-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.btn-danger {
    --bs-btn-bg: var(--negative);
    --bs-btn-border-color: var(--negative);
    --bs-btn-hover-bg: var(--negative-hover);
    --bs-btn-hover-border-color: var(--negative-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-2);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--bg-raised);
    --bs-btn-hover-border-color: var(--ink-3);
    --bs-btn-hover-color: var(--ink-1);
}

.btn-link {
    --bs-btn-color: var(--navy);
    --bs-btn-hover-color: var(--navy-hover);
    font-weight: 600;
}

.card {
    --bs-card-bg: var(--bg-surface);
    --bs-card-border-color: var(--line-strong);
    --bs-card-border-radius: var(--r-md);
    --bs-card-inner-border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
}

.card-title {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
}

/* La tab attiva si riconosce dal filetto, non da un riquadro. */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--line);
    --bs-nav-tabs-border-width: 1px;
    border-bottom: 1px solid var(--line);
}

/* I titoli di gruppo del menu vivono nella stessa lista delle voci (il resto
   del codice cerca "#tabs .nav-link[data-tab]" e non sopporterebbe una lista
   dentro la lista). Finche' la barra sta in alto, prima che lo scaffale la
   sposti di lato, non si vedono: li' non c'e' spazio per intestare niente. */
#tabs .nav-group { display: none; }

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ink-2);
    font-weight: 600;
    padding: 10px 14px;
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--line-strong);
    color: var(--ink-1);
}

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--navy);
    color: var(--navy);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--r-xs);
    --bs-nav-pills-link-active-bg: var(--navy);
    --bs-nav-pills-link-active-color: #fff;
}

.form-control,
.form-select {
    background-color: var(--bg-surface);
    border-color: var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-1);
    font-size: var(--fs-base);
    padding: 8px 12px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px var(--navy-tint);
}

.form-control::placeholder {
    color: var(--ink-3);
}

.form-label {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
}

.form-check-input:checked {
    background-color: var(--navy);
    border-color: var(--navy);
}

.form-check-input:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px var(--navy-tint);
}

/* Su mobile un input sotto i 16px fa scattare lo zoom automatico di iOS. */
@media (max-width: 767px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="number"],
    input[type="search"],
    textarea {
        font-size: 16px;
    }
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: var(--bg-sunken);
    --bs-table-hover-bg: var(--bg-raised);
    color: var(--ink-1);
}

.table > thead {
    --bs-table-bg: var(--bg-sunken);
}

.table > thead th {
    border-bottom-color: var(--line-strong);
    color: var(--ink-3);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
}

.badge {
    border-radius: var(--r-full);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
}

.modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--line);
}

/* Testata colorata di squadra. showModal() passa --band-1 (colore del club) e
   --band-ink (l'inchiostro sopra); il resto e' disegnato qui. Unico punto in
   cui il colore squadra fa da sfondo pieno: altrove resta accento controllato. */
.modal-header-band {
    background-color: var(--band-1, var(--navy));
    background-image: linear-gradient(
        115deg,
        var(--band-1, var(--navy)) 0%,
        color-mix(in srgb, var(--band-1, var(--navy)) 74%, #000) 100%
    );
    border-bottom-color: transparent;
    color: var(--band-ink, #fff);
    position: relative;
}

/* Il filetto oro che chiude la fascia in basso. */
.modal-header-band::after {
    background: linear-gradient(90deg, var(--gold), transparent 70%);
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
}

.modal-title {
    font-family: var(--font-display);
}

/* Il fondale copre davvero: con lo 0.55 di prima, sotto la scheda di una
   partita si continuavano a leggere le card delle altre giornate, e l'occhio
   ci finiva dentro. Chiaro e non scuro perche' il modale e' chiaro: un velo
   nero sotto una scheda bianca la fa galleggiare, uno chiaro la posa.

   Opaco, non 0.94: quel 6% sembrava niente, ma quello che c'e' sotto e'
   inchiostro quasi nero su fondo quasi bianco, e il 6% di un contrasto da
   15:1 si legge ancora. Dietro al modale restavano in trasparenza i titoli
   di sezione e le righe delle tabelle. A tenere la scheda staccata dal
   fondale bastano il suo bordo e la sua ombra, che ci sono gia'. */
.modal-backdrop.show {
    background: var(--bg-app);
    opacity: 1;
}

/* ============================================================
   Primitive
   ============================================================ */

/* ---- Microetichetta: la riga maiuscola sopra ogni valore ---- */
.fw-micro {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-micro);
    line-height: 1.3;
    text-transform: uppercase;
}

/* ---- Icona di statistica ----
   STAT_META da la classe Bootstrap e il tono; il tono sceglie l'inchiostro.
   Sono glifi, non emoji: si colorano e seguono i token. */
.ui-ico {
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.115em;
}

/* Un glifo disegnato non ha una dimensione naturale come un carattere:
   gliela si da'. Resta allineato ai glifi Bootstrap che gli stanno accanto
   nella stessa riga. */
.ui-svg {
    display: inline-block;
    height: 1.05em;
    vertical-align: -0.16em;
    width: 1.05em;
}

/* ---- I dieci eventi ------------------------------------------------------
   Illustrazioni a colori, servite come sfondo e non come <img>: cosi' il
   foglio di stile puo' scegliere la variante giusta a seconda del fondo.
   `contain` invece di `cover` perche' i disegni non sono tutti quadrati -
   la scarpa e la porta sono larghe - e devono restare interi. */
.ev-ico {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 1.15em;
    vertical-align: -0.22em;
    width: 1.15em;
}

.ev-gol { background-image: url("/img/eventi/gol.png"); }
.ev-rs { background-image: url("/img/eventi/rs.png"); }
.ev-ass { background-image: url("/img/eventi/ass.png"); }
.ev-rf { background-image: url("/img/eventi/rf.png"); }
.ev-rp { background-image: url("/img/eventi/rp.png"); }
.ev-gs { background-image: url("/img/eventi/gs.png"); }
.ev-imb { background-image: url("/img/eventi/imb.png"); }
.ev-aut { background-image: url("/img/eventi/aut.png"); }
.ev-amm { background-image: url("/img/eventi/amm.png"); }
.ev-esp { background-image: url("/img/eventi/esp.png"); }

/* Su fondo scuro l'inchiostro navy dei disegni sparirebbe: la scarpa e il
   guanto sono quasi interamente navy e diventerebbero invisibili. Stessa
   illustrazione, inchiostro schiarito. */
.tv-overlay .ev-gol { background-image: url("/img/eventi/gol-chiaro.png"); }
.tv-overlay .ev-rs { background-image: url("/img/eventi/rs-chiaro.png"); }
.tv-overlay .ev-ass { background-image: url("/img/eventi/ass-chiaro.png"); }
.tv-overlay .ev-rf { background-image: url("/img/eventi/rf-chiaro.png"); }
.tv-overlay .ev-rp { background-image: url("/img/eventi/rp-chiaro.png"); }
.tv-overlay .ev-gs { background-image: url("/img/eventi/gs-chiaro.png"); }
.tv-overlay .ev-imb { background-image: url("/img/eventi/imb-chiaro.png"); }
.tv-overlay .ev-aut { background-image: url("/img/eventi/aut-chiaro.png"); }
.tv-overlay .ev-amm { background-image: url("/img/eventi/amm-chiaro.png"); }
.tv-overlay .ev-esp { background-image: url("/img/eventi/esp-chiaro.png"); }

.ui-ico-gold     { color: var(--gold-ink); }
.ui-ico-navy     { color: var(--navy-ink); }
.ui-ico-positive { color: var(--positive-ink); }
.ui-ico-caution  { color: var(--caution-ink); }
.ui-ico-negative { color: var(--negative-ink); }

/* ---- Badge icona circolare tinto ----
   Generalizza .pc-ico-circle, che faceva la stessa cosa in una sola misura.
   Il colore e' sempre una coppia tinta/inchiostro dei token: mai inventarne. */
.fw-ico {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--fw-ico-size, 34px);
    justify-content: center;
    width: var(--fw-ico-size, 34px);
    font-size: calc(var(--fw-ico-size, 34px) * 0.46);
    line-height: 1;
}

.fw-ico-xs { --fw-ico-size: 18px; }
.fw-ico-sm { --fw-ico-size: 24px; }
.fw-ico-lg { --fw-ico-size: 44px; }

.fw-ico-gold     { background: var(--gold-tint);     color: var(--gold-ink); }
.fw-ico-navy     { background: var(--navy-tint);     color: var(--navy-ink); }
.fw-ico-positive { background: var(--positive-tint); color: var(--positive-ink); }
.fw-ico-caution  { background: var(--caution-tint);  color: var(--caution-ink); }
.fw-ico-negative { background: var(--negative-tint); color: var(--negative-ink); }
.fw-ico-neutral  { background: var(--bg-raised);     color: var(--ink-2); }
.fw-ico-brand    { background: var(--brand-tint);    color: var(--brand-ink); }

/* Il monogramma: la sigla al posto del glifo, dentro lo stesso cerchio
   tinto. Il corpo e' piu' piccolo di quello di un'icona perche' due o tre
   lettere occupano piu' spazio di un disegno. */
.fw-mono {
    font-size: calc(var(--fw-ico-size, 34px) * 0.32);
    font-weight: 700;
    letter-spacing: var(--tracking-micro);
}

/* ---- Tile statistica: badge, microetichetta, numero ---- */
.fw-tile {
    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;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
}

.fw-tile-body {
    min-width: 0;
}

.fw-tile-value {
    color: var(--ink-1);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.1;
}

.fw-tile-note {
    color: var(--ink-3);
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* ---- Pannello dati: icona, titolo, righe separate da hairline ---- */
.fw-panel {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.fw-panel-head {
    align-items: center;
    color: var(--ink-1);
    display: flex;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
}

.fw-panel-body {
    padding: 0 var(--sp-4) var(--sp-2);
}

.fw-panel-row {
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--sp-3);
    justify-content: space-between;
    padding: var(--sp-2) 0;
}

.fw-panel-row:last-child {
    border-bottom: 0;
}

.fw-panel-row > :last-child {
    color: var(--ink-1);
    font-weight: 700;
    text-align: right;
}

/* ---- Pill semantica ----
   Tinta pallida con inchiostro scuro. Mai bianco su tinta piena: bianco su
   ambra da' 3.80 e su oro 3.13, sotto soglia. */
.fw-pill {
    align-items: center;
    border-radius: var(--r-full);
    display: inline-flex;
    font-size: var(--fs-micro);
    font-weight: 700;
    gap: 4px;
    letter-spacing: var(--tracking-micro);
    line-height: 1.4;
    padding: 3px 10px;
    text-transform: uppercase;
    white-space: nowrap;
}

.fw-pill-gold     { background: var(--gold-tint);     color: var(--gold-ink); }
.fw-pill-navy     { background: var(--navy-tint);     color: var(--navy-ink); }
.fw-pill-positive { background: var(--positive-tint); color: var(--positive-ink); }
.fw-pill-caution  { background: var(--caution-tint);  color: var(--caution-ink); }
.fw-pill-negative { background: var(--negative-tint); color: var(--negative-ink); }
.fw-pill-neutral  { background: var(--bg-raised);     color: var(--ink-2); }

/* ---- Chip filtro: bianco con bordo, pieno quando attivo ---- */
.fw-chip {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: 6px;
    min-height: 36px;
    padding: 7px 14px;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.fw-chip:hover {
    background: var(--bg-raised);
    border-color: var(--ink-3);
    color: var(--ink-1);
}

.fw-chip.active,
.fw-chip[aria-pressed="true"],
.fw-chip[aria-selected="true"] {
    background: var(--ink-1);
    border-color: var(--ink-1);
    color: var(--ink-inverse);
}

.fw-chip:disabled {
    cursor: default;
    opacity: 0.45;
}

/* ---- Tabella dati ---- */
.fw-table {
    border-collapse: collapse;
    font-size: var(--fs-sm);
    width: 100%;
}

.fw-table thead th {
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--line-strong);
    color: var(--ink-3);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-micro);
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.fw-table td {
    border-bottom: 1px solid var(--line);
    color: var(--ink-1);
    padding: var(--sp-2) var(--sp-3);
}

.fw-table tbody tr:last-child td {
    border-bottom: 0;
}

.fw-table tbody tr:hover td {
    background: var(--bg-raised);
}

/* I numeri stanno a destra, incolonnati. */
.fw-table .fw-num,
.fw-table th.fw-num,
.fw-table td.fw-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- Fascia di testata ----
   Il colore squadra e' l'unico punto in cui fa da sfondo pieno. Chi la usa
   passa --band-1 (primario), --band-2 (secondario) e --band-ink dai dati.
   Lo stemma sta in filigrana, il motto in maiuscoletto spaziato, il filetto
   oro chiude a destra: sono i tre segni che rendono la fascia riconoscibile. */
.fw-band {
    background-color: var(--band-1, var(--navy));   /* tinta piena di riserva */
    background-image: linear-gradient(
        115deg,
        var(--band-1, var(--navy)) 0%,
        color-mix(in srgb, var(--band-1, var(--navy)) 74%, #000) 100%
    );
    color: var(--band-ink, #fff);
    overflow: hidden;
    padding: var(--sp-4) var(--sp-5);
    position: relative;
}

/* Lo stemma del club, grande e appena percettibile. aria-hidden: e' texture. */
.fw-band-crest {
    height: 230%;
    max-height: none;
    /* Deve restare texture: appena sopra vuol dire che compete col motto che
       le sta davanti. */
    opacity: 0.055;
    pointer-events: none;
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
}

.fw-band-inner {
    align-items: center;
    display: flex;
    gap: var(--sp-4);
    position: relative;   /* sopra la filigrana */
}

.fw-band-title {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    color: inherit;
}

.fw-band-sub {
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-top: 2px;
    opacity: 0.82;
}

.fw-band-motto {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.6;
    opacity: 0.7;
    text-align: right;
    text-transform: uppercase;
}

.fw-band-rule {
    background: var(--gold);
    border-radius: 2px;
    display: block;
    height: 3px;
    margin-top: 6px;
    margin-left: auto;
    width: 44px;
}

@media (max-width: 767px) {
    .fw-band {
        padding: var(--sp-3) var(--sp-4);
    }

    .fw-band-title {
        font-size: 1.5rem;
    }

    .fw-band-motto {
        display: none;   /* il motto e' rifinitura: sul telefono ruba spazio */
    }
}

/* ============================================================
   Primitive: seconda tornata
   ============================================================
   Le sette classi che servono alla Lista giocatori e alla Rosa squadra.
   Stesso patto delle precedenti: si scrivono qui una volta, le viste le usano
   e smettono di rifarsi lo stile addosso.
   ============================================================ */

/* ---- Segmented control -------------------------------------------------
   Tutti/P/D/C/A e le tab dei widget di sidebar. La specifica lo chiede al
   posto di una select: le cinque opzioni si vedono tutte e si raggiungono con
   un tocco solo. */
.fw-seg {
    background: var(--bg-sunken);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    display: inline-flex;
    gap: 2px;
    padding: 2px;
}

.fw-seg-item {
    background: transparent;
    border: 0;
    border-radius: calc(var(--r-xs) - 2px);
    color: var(--ink-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    min-height: 30px;
    padding: 4px 14px;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
    white-space: nowrap;
}

.fw-seg-item:hover {
    background: var(--bg-raised);
    color: var(--ink-1);
}

.fw-seg-item[aria-pressed="true"],
.fw-seg-item[aria-selected="true"],
.fw-seg-item.active {
    background: var(--navy);
    color: #fff;
}

/* I ruoli si riconoscono dal colore anche quando sono attivi. */
.fw-seg-item.fw-seg-p[aria-pressed="true"] { background: var(--role-p); }
.fw-seg-item.fw-seg-d[aria-pressed="true"] { background: var(--role-d); }
.fw-seg-item.fw-seg-c[aria-pressed="true"] { background: var(--role-c); }
.fw-seg-item.fw-seg-a[aria-pressed="true"] { background: var(--role-a); }

/* Dove si tocca col dito il minimo accessibile resta 44px. Vale per ogni
   schermo touch, anche i tablet che tengono il layout da scrivania. */
@media (pointer: coarse) {
    .fw-seg-item,
    .btn,
    .nav-link,
    .fw-tab,
    .fw-chip,
    .header-icon-btn,
    .form-control,
    .form-select { min-height: 44px; }

    /* Niente attesa dei 300ms sul tap e niente alone grigio del browser: il
       feedback lo diamo noi, subito, con una leggera pressione. */
    body { -webkit-tap-highlight-color: transparent; }
    button, [role="button"], .btn, a, input, select, label { touch-action: manipulation; }
    .btn:active,
    #mobile-nav button:active,
    .fw-tab:active,
    .fw-chip:active,
    .lst-row:active,
    .fm-rosa-row:active,
    .fr-row:active {
        transform: scale(.97);
        transition: transform var(--t-fast) var(--ease);
    }
}

/* ---- Pill di stato ------------------------------------------------------
   Disponibile, assegnato, in scadenza. E' una pill con un pallino davanti:
   il colore da solo non basta a dire lo stato. */
.fw-status {
    align-items: center;
    border-radius: var(--r-full);
    display: inline-flex;
    font-size: var(--fs-micro);
    font-weight: 600;
    gap: 6px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    padding: 3px 10px;
    white-space: nowrap;
}

.fw-status::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    flex-shrink: 0;
    height: 6px;
    width: 6px;
}

.fw-status-ok     { background: var(--positive-tint); color: var(--positive-ink); }
.fw-status-warn   { background: var(--caution-tint);  color: var(--caution-ink); }
.fw-status-danger { background: var(--negative-tint); color: var(--negative-ink); }
.fw-status-taken  { background: var(--bg-raised);     color: var(--ink-2); }
.fw-status-brand  { background: var(--brand-tint);    color: var(--brand-ink); }

/* ---- Intestazione ordinabile -------------------------------------------
   La freccia deve essere evidente: e' il comando piu' usato di una tabella di
   scouting. Lo stato va anche in aria-sort, non solo nel glifo. */
.fw-sort {
    align-items: center;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 4px;
    /* Il foglio del browser azzera text-transform sui controlli di modulo, e
       `font: inherit` non lo riporta indietro: senza queste due righe una
       colonna ordinabile finisce in minuscolo accanto a una fissa in
       maiuscoletto, nella stessa intestazione. */
    letter-spacing: inherit;
    padding: 0;
    text-transform: inherit;
    white-space: nowrap;
}

.fw-sort:hover { color: var(--ink-1); }

.fw-sort-ico {
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}

.fw-sort:hover .fw-sort-ico { opacity: .45; }

[aria-sort="ascending"] .fw-sort,
[aria-sort="descending"] .fw-sort {
    color: var(--navy);
    font-weight: 700;
}

[aria-sort="ascending"] .fw-sort-ico,
[aria-sort="descending"] .fw-sort-ico {
    opacity: 1;
}

/* ---- Card di insight (sidebar) ------------------------------------------ */
.fw-insight {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.fw-insight-head {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
}

.fw-insight-title {
    align-items: center;
    color: var(--ink-1);
    display: flex;
    font-size: var(--fs-md);
    font-weight: 700;
    gap: var(--sp-2);
    min-width: 0;
}

.fw-insight-sub {
    color: var(--ink-3);
    font-size: var(--fs-sm);
    padding: 0 var(--sp-4) var(--sp-2);
}

.fw-insight-action {
    background: none;
    border: 0;
    color: var(--navy);
    cursor: pointer;
    flex-shrink: 0;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 2px 0;
}

.fw-insight-body { padding: 0 var(--sp-2) var(--sp-2); }

.fw-insight-row {
    align-items: center;
    background: none;
    border: 0;              /* spesso e' un <button>: niente bordo di sistema */
    border-radius: var(--r-xs);
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2);
}

.fw-insight-row:hover { background: var(--bg-raised); }

.fw-insight-main {
    flex: 1;
    min-width: 0;
}

.fw-insight-name {
    color: var(--ink-1);
    font-size: var(--fs-base);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-insight-meta {
    color: var(--ink-3);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-insight-value {
    color: var(--ink-1);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.fw-insight-rank {
    color: var(--ink-3);
    flex-shrink: 0;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 16px;
    text-align: right;
}

/* ---- Barra di azione sticky --------------------------------------------
   Compare quando c'e' una selezione. Si impila SOPRA la barra offerta, che e'
   fixed in fondo e pubblica la propria altezza in --user-bid-bar-h; se la
   barra offerta non c'e', la variabile vale 0 e questa scende in fondo. */
.fw-actionbar {
    align-items: center;
    background: var(--ink-1);
    border-radius: var(--r-md);
    bottom: calc(var(--user-bid-bar-h, 0px) + var(--sp-3));
    box-shadow: var(--shadow-lg);
    color: var(--ink-inverse);
    display: flex;
    gap: var(--sp-3);
    left: 50%;
    max-width: calc(100vw - var(--sp-5));
    padding: var(--sp-3) var(--sp-4);
    position: fixed;
    transform: translateX(-50%);
    width: max-content;
    z-index: var(--z-bidbar);
}

.fw-actionbar-main {
    display: flex;
    flex-direction: column;
    margin-right: auto;
    min-width: 0;
}

.fw-actionbar-title {
    font-size: var(--fs-base);
    font-weight: 600;
}

.fw-actionbar-sub {
    color: rgba(255, 255, 255, .68);
    font-size: var(--fs-sm);
}

/* Le facce dei selezionati, appena sovrapposte. */
.fw-actionbar-faces {
    display: flex;
    flex-shrink: 0;
}

.fw-actionbar-faces > * {
    border: 2px solid var(--ink-1);
    border-radius: 50%;
    height: 32px;
    margin-left: -10px;
    object-fit: cover;
    width: 32px;
}

.fw-actionbar-faces > :first-child { margin-left: 0; }

@media (max-width: 767px) {
    .fw-actionbar {
        border-radius: var(--r-sm);
        bottom: calc(var(--user-bid-bar-h, 0px) + var(--sp-2));
        flex-wrap: wrap;
        left: var(--sp-2);
        max-width: none;
        right: var(--sp-2);
        transform: none;
        width: auto;
    }
}

/* ---- Stato vuoto --------------------------------------------------------
   Oggi gli stati vuoti sono un paragrafo con due classi diverse usate a caso.
   Qui c'e' un'icona, una frase che dice perche' e' vuoto, e il modo di
   uscirne. */
.fw-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
}

.fw-empty-ico {
    color: var(--ink-3);
    font-size: 2rem;
    line-height: 1;
    opacity: .55;
}

.fw-empty-title {
    color: var(--ink-1);
    font-size: var(--fs-md);
    font-weight: 600;
}

.fw-empty-text {
    color: var(--ink-3);
    font-size: var(--fs-base);
    max-width: 46ch;
}

/* Il bottone dello stato vuoto e' la via d'uscita: e' l'unica cosa da toccare
   in tutta l'area, e btn-sm lo lasciava a 29px, sotto il minimo tattile. */
.fw-empty .btn {
    margin-top: var(--sp-2);
    min-height: 44px;
    padding-inline: var(--sp-5);
}

/* ---- Skeleton -----------------------------------------------------------
   Al posto della scritta "Caricamento...". Il blocco prefers-reduced-motion in
   cima al file spegne gia' l'animazione per chi l'ha chiesta: resta il
   rettangolo fermo, che e' comunque meglio di niente. */
.fw-skeleton {
    animation: fw-skeleton-pulse 1.4s var(--ease) infinite;
    background: var(--bg-raised);
    border-radius: var(--r-xs);
    display: block;
    height: 1em;
}

.fw-skeleton-text {
    height: .8em;
    margin: .2em 0;
}

.fw-skeleton-circle { border-radius: 50%; }

@keyframes fw-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* ---- Lista fantasma ----
   La forma di quello che sta arrivando, invece di una scritta. */
.fw-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
}

.fw-skeleton-row {
    align-items: center;
    display: flex;
    gap: var(--sp-3);
}

.fw-skeleton-row > .fw-skeleton { height: 14px; }

/* ---- Difficolta' dell'avversario ---------------------------------------
   Un segno solo per due fatti: dove si gioca (casa o trasferta, il glifo) e
   quanto e' forte l'avversario (il colore, dal verde al rosso).

   Prima erano due segni affiancati - una pill "Casa"/"Trasf." piu' un pallino
   della fascia - e il pallino era pure invertito: colorava di verde le squadre
   in testa alla classifica, cioe' le partite piu' difficili.

   Il colore non porta mai il significato da solo: ogni variante ha title e
   aria-label che dicono la sede e la difficolta' a parole, e la legenda le
   elenca tutte e cinque. */

.fw-diff {
    align-items: center;
    border-radius: var(--r-full);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--fs-micro);
    font-weight: 600;
    gap: 5px;
    line-height: 1;
    white-space: nowrap;
}

/* Variante 1 - chip pieno con l'etichetta. Dove c'e' spazio: la scheda
   partita, la legenda, le celle larghe. */
.fw-diff-chip { padding: 5px 10px 5px 8px; }

/* Variante 2 - solo il glifo. Nelle tabelle dense, dove una parola per riga
   moltiplicata per trentotto giornate diventa rumore. Resta un bersaglio
   quadrato di 24px, non un'icona nuda. */
.fw-diff-token {
    height: 24px;
    justify-content: center;
    width: 24px;
}

.fw-diff i { font-size: .8rem; }

/* La rampa. Quattro tinte su cinque sono quelle che il resto del sito usa
   gia' per positivo, attenzione, marchio e negativo: stessa famiglia di
   colore in tutta l'app, un token in meno da tenere allineato. */
.fw-diff.fw-diff-1 { background: var(--diff-1-tint); color: var(--diff-1-ink); }
.fw-diff.fw-diff-2 { background: var(--diff-2-tint); color: var(--diff-2-ink); }
.fw-diff.fw-diff-3 { background: var(--diff-3-tint); color: var(--diff-3-ink); }
.fw-diff.fw-diff-4 { background: var(--diff-4-tint); color: var(--diff-4-ink); }
.fw-diff.fw-diff-5 { background: var(--diff-5-tint); color: var(--diff-5-ink); }

/* Senza fascia nota resta la sede, in neutro: meglio nessun colore che un
   colore inventato. */
.fw-diff.fw-diff-0 { background: var(--bg-raised); color: var(--ink-2); }

/* ---- Legenda ------------------------------------------------------------
   Serve perche' il colore da solo non basta: qui le cinque fasce sono scritte
   una volta per tutte, e la riga puo' restare muta. */
.fw-diff-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
}

.fw-diff-legend-item {
    align-items: center;
    color: var(--ink-3);
    display: inline-flex;
    font-size: var(--fs-micro);
    gap: 5px;
}

.fw-diff-legend-dot {
    border-radius: 50%;
    height: 9px;
    width: 9px;
}

.fw-diff-legend-1 { background: var(--diff-1-ink); }
.fw-diff-legend-2 { background: var(--diff-2-ink); }
.fw-diff-legend-3 { background: var(--diff-3-ink); }
.fw-diff-legend-4 { background: var(--diff-4-ink); }
.fw-diff-legend-5 { background: var(--diff-5-ink); }