/* ========== BASE: font e spaziatura fluida ========== */
:root {
    --fm-space-1: clamp(.25rem, 0.2rem + 0.3vw, .5rem);
    --fm-space-2: clamp(.5rem, 0.4rem + 0.5vw, .75rem);
    --fm-space-3: clamp(.75rem, 0.6rem + 0.8vw, 1rem);
}

.py-6 {
    padding-block: clamp(2rem, 1.2rem + 3vw, 4rem);
}

.hero-landing h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.7vw, 3rem);
    line-height: 1.15;
}

.hero-landing .lead {
    font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
}

/* ========== HERO (sfondi) ========== */
.hero {
    background: radial-gradient(60% 80% at 20% 10%, rgba(13,110,253,.08), transparent 60%), radial-gradient(40% 60% at 100% 0%, rgba(25,135,84,.08), transparent 60%);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .hero h1 {
        font-weight: 800;
    }

    .hero p.lead {
        color: #495057;
    }

.hero-landing {
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}

    .hero-landing .bg-gradient {
        background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    }

/* ========== Effetto scheletro (no CLS) ========== */
.skeleton {
    background: linear-gradient(90deg,#f2f4f7 25%,#e9edf2 37%,#f2f4f7 63%);
    background-size: 400% 100%;
    animation: skeleton 1.2s ease-in-out infinite;
}

@keyframes skeleton {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}

/* ========== Feature card hover ========== */
.feature-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.75rem 2rem rgba(0,0,0,.08);
    }

/* ========== Moduli consentiti ========== */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
    gap: .75rem;
}

.module-check {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* Card modulo */
/* ===== Card modulo (responsive + a11y + touch) ===== */
.module-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    user-select: none;
    transition: box-shadow .15s ease, transform .05s ease, border-color .15s ease;
}

    .module-card:hover {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
    }

    .module-card:active {
        transform: translateY(1px);
    }

    /* focus chiaro su tastiera */
    .module-card:focus {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

    .module-card:focus-visible {
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb,.2), .25);
    }

/* “Campo” — dimensioni in var per facile tuning */
:root {
    --pitch-w: 64px;
    --pitch-h: 92px;
    --dot: 6px;
}

.pitch {
    width: var(--pitch-w);
    height: var(--pitch-h);
    border-radius: 10px;
    padding: 6px 6px 8px 6px;
    background: #f8efe7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(0,0,0,.06);
}

.module-card .line {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-around;
}

.module-card .gk {
    justify-content: center;
}

.module-card .dot {
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: #555;
    box-shadow: 0 0 0 2px rgba(255,255,255,.6);
}

.mod-name {
    font-weight: 600;
    color: #212529;
}

/* Icona check */
.check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    fill: var(--bs-primary, #0d6efd);
    opacity: 0;
    transform: scale(.95);
    transition: opacity .15s ease, transform .15s ease;
}

/* Stato checked */
.module-check:checked + .module-card {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb,13,110,253), .12);
}

    .module-check:checked + .module-card .pitch {
        /* usa la palette bootstrap (success) ma resta leggibile */
        background: rgba(var(--bs-success-rgb,25,135,84), .85);
        border-color: rgba(0,0,0,.05);
    }

    .module-check:checked + .module-card .dot {
        background: #fff;
        box-shadow: none;
    }

    .module-check:checked + .module-card .check {
        opacity: 1;
        transform: scale(1);
    }

/* Stato disabled */
.module-check:disabled + .module-card {
    opacity: .6;
    cursor: not-allowed;
}

    .module-check:disabled + .module-card .pitch {
        background: #ffd7cc;
    }

/* ===== Responsive tweaks ===== */
@media (max-width: 576px) {
    /* evita zoom iOS */
    .form-control, .btn {
        font-size: 16px;
    }
    /* un filo più compatto su schermi stretti */
    :root {
        --pitch-w: 58px;
        --pitch-h: 84px;
        --dot: 6px;
    }
}

/* modalità super-stretta: passa a “pill mode” (niente campo, solo testo) */
@media (max-width: 360px) {
    .module-card {
        padding: .6rem .7rem;
        gap: .4rem;
    }

        .module-card .pitch {
            display: none;
        }

    .mod-name {
        font-size: .95rem;
        padding: .25rem .5rem;
        border-radius: 999px;
        background: var(--bs-light, #f8f9fa);
        border: 1px solid var(--bs-border-color);
    }
}

/* dark mode di base (se usi preferenze di sistema) */
@media (prefers-color-scheme: dark) {
    .pitch {
        background: #2b2b2b;
        border-color: rgba(255,255,255,.08);
    }

    .module-card .dot {
        background: #bbb;
        box-shadow: 0 0 0 2px rgba(0,0,0,.35);
    }

    .mod-name {
        color: #e9ecef;
    }
}

/* riduci animazioni se l’utente preferisce */
@media (prefers-reduced-motion: reduce) {
    .module-card {
        transition: none;
    }

    .check {
        transition: none;
    }
}

.mobile-cta {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* ========== Dashboard ========== */
.card-squadra {
    transition: box-shadow .15s ease, transform .05s ease;
    cursor: pointer;
}

    .card-squadra:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12);
    }

    .card-squadra:focus-within {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

a.text-reset:hover .card-squadra {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
    transform: translateY(-1px);
}

/* Titolo: due righe max con ellissi */
.card-squadra h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pill {
    display: inline-block;
    font-size: .8rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.08);
}

.pill-muted {
    background: var(--bs-light);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

/* Riduci il testo “Apri dettaglio” su mobile */
@media (max-width:576px) {
    #team-create-btn {
        width:100%;
    }

    .card-squadra .open-hint {
        font-size: .85rem;
    }
}

/* Preferenze utente: riduci animazioni */
@media (prefers-reduced-motion:reduce) {
    .card-squadra {
        transition: none;
    }
}

.badge-default {
    background: #0d6efd;
}

.role-badge {
    border-radius: 999px;
    padding: .35rem .55rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Empty state compatta su mobile */
.empty-state {
    padding: 1rem 1.25rem;
    text-align: center;
}

@media (min-width:576px) {
    .empty-state {
        padding: 1.5rem 2rem;
    }
}

    .empty-state h3 {
        color: #212529;
    }

/* Tabella responsive (migliora su mobile) */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table td .btn {
    white-space: nowrap;
}

/* Card mobile per calciatori */
.calciatore-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    background: #fff;
}

    .calciatore-card .title {
        font-weight: 600;
        line-height: 1.2;
    }

    .calciatore-card .club {
        color: #6c757d;
        font-size: .9rem;
    }

    .calciatore-card .metrics {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .calciatore-card .metric {
        background: #f8f9fa;
        border: 1px solid #eef1f4;
        border-radius: 10px;
        padding: 6px 8px;
        text-align: center;
    }

        .calciatore-card .metric small {
            display: block;
            color: #6c757d;
        }

    .calciatore-card .actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 4px;
    }

/* ========== Voti (switch) ========== */
#votoForm .form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
}

#votoForm .form-check-input {
    background-color: rgb(25, 135, 84);
}

    #votoForm .form-check-input:checked {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
        background-color: rgb(220, 53, 69);
        background-image: var(--bs-form-switch-bg);
        border-color: transparent;
    }

    #votoForm .form-check-input:focus {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
        background-image: var(--bs-form-switch-bg);
        border-color: transparent;
        box-shadow: 0 0 0 0;
    }

#homeAwayToggle span {
    transition: color .15s ease, font-weight .15s ease;
}

@media (max-width: 576px) {
    #votoModal .form-control {
        font-size: 16px;
    }
    /* evita zoom iOS */
    #tblVoti td, #tblVoti th {
        white-space: nowrap;
    }

    /* Nasconde l'header visivamente ma resta accessibile agli screen-reader */
    #tblVoti thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    #tblVoti,
    #tblVoti tbody,
    #tblVoti tr,
    #tblVoti td {
        display: block;
        width: 100%;
    }

        #tblVoti tr {
            background: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color);
            border-radius: 0.75rem;
            padding: .75rem .75rem .5rem;
            margin-bottom: .75rem;
            box-shadow: 0 1px 2px rgba(0,0,0,.04);
        }

        #tblVoti td {
            /* ogni riga diventa "etichetta : valore" */
            display: grid;
            grid-template-columns: 9.5rem 1fr; /* etichetta | contenuto */
            align-items: center;
            gap: .5rem;
            border: 0 !important;
            padding: .25rem 0 !important;
            white-space: normal; /* consenti a capo */
            text-align: left;
        }

            #tblVoti td::before {
                font-weight: 600;
                color: var(--bs-secondary-color);
            }

            /* Etichette per colonna via nth-child (ordine fisso della tua tabella) */
            #tblVoti td:nth-child(1)::before {
                content: "Giornata";
            }

            #tblVoti td:nth-child(2)::before {
                content: "Casa/Trasferta";
            }

            #tblVoti td:nth-child(3)::before {
                content: "Voto";
            }

            #tblVoti td:nth-child(4)::before {
                content: "Fantavoto";
            }

            #tblVoti td:nth-child(5)::before {
                content: "Azioni";
            }

            /* Azioni: mettile su una riga e fai wrapping */
            #tblVoti td:nth-child(5) {
                grid-template-columns: 100%;
            }

                #tblVoti td:nth-child(5) > * {
                    display: inline-flex;
                    margin: 0 .25rem .25rem 0;
                }

        /* Bottoni più facili da cliccare */
        #tblVoti .btn {
            padding: .375rem .5rem;
        }

        #tblVoti td:nth-child(5) > * {
            display: block;
            width: 100%;
        }
}

/* Barra fissa in basso su mobile */
.mobile-jump-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050; /* sopra il contenuto, sotto i modal (z=1055) */
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
    backdrop-filter: saturate(140%) blur(6px);
}

/* Evita che la barra copra la tabella: aggiungiamo padding-bottom al main */
@media (max-width: 576px) {
    .with-mobile-jump {
        padding-bottom: 84px; /* altezza barra (approssimata) */
    }
}

/* quando scrolli al giocatore, lascia spazio sotto la navbar */
.player-anchor {
    scroll-margin-top: .5rem;
}

/* ========== Formazione Ideale ========== */
.exclude-toggle {
    cursor: pointer;
    border-radius: 100% !important;
    border: 2px outset red;
}

    .exclude-toggle:checked {
        background: red;
        border: red;
    }

/* lascia spazio sopra il target quando arrivi con scrollIntoView */
#result, #result-empty {
    scroll-margin-top: 80px;
}

/* ---------- TABLE: card per calciatore (mobile) ---------- */
@media (max-width: 576px) {
    .table-responsive {
        overflow: visible;
    }
    /* niente scroll orizzontale */

    /* nascondi thead, mantieni accessibilità */
    .table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    #players-body tr {
        display: grid;
        grid-template-columns: auto 1fr auto; /* col1: ruolo | col2: nome | col3: squadra o pulsante */
        align-items: center;
        gap: .5rem .75rem; /* row-gap | col-gap */
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: .75rem;
        padding: .75rem .75rem .5rem;
        margin-bottom: .75rem;
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }

    #players-body td {
        border: 0 !important;
        padding: 0 !important;
        white-space: normal;
    }

        /* --- RIGA 1: [Ruolo] [Nome] [Squadra] --- */
        #players-body td:nth-child(1) {
            grid-column: 1;
            align-self: center;
        }

        #players-body td:nth-child(2) {
            grid-column: 2;
            font-weight: 600;
            color: var(--bs-secondary-color);
            text-align: center;
        }

        #players-body td:nth-child(3) {
            grid-column: 3;
            font-weight: 600;
            text-align:center;
        }

            /* Label sopra Nome & Squadra */
            #players-body td:nth-child(2)::before,
            #players-body td:nth-child(3)::before {
                display: block;
                font-size: .8rem;
                line-height: 1.1;
                color: var(--bs-secondary-color);
                margin-bottom: .15rem;
                font-weight: 500;
                content: "";
            }

        #players-body td:nth-child(2)::before {
            content: "Nome";
        }

        #players-body td:nth-child(3)::before {
            content: "Squadra";
        }

        /* --- RIGA 2: [FM Casa] [FM Trasferta] [FM Totale] --- */
        #players-body td:nth-child(4) {
            grid-column: 1;
        }

        #players-body td:nth-child(5) {
            grid-column: 2;
        }

        #players-body td:nth-child(6) {
            grid-column: 3;
        }

            /* Label sopra i tre pulsanti FM */
            #players-body td:nth-child(4)::before,
            #players-body td:nth-child(5)::before,
            #players-body td:nth-child(6)::before {
                display: block;
                font-size: .8rem;
                line-height: 1.1;
                color: var(--bs-secondary-color);
                margin-bottom: .15rem;
                font-weight: 500;
            }

        #players-body td:nth-child(4)::before {
            content: "Casa";
        }

        #players-body td:nth-child(5)::before {
            content: "Trasferta";
        }

        #players-body td:nth-child(6)::before {
            content: "Totale";
        }

    /* Bottoni FM comodi da toccare */
    #players-body .choose-btn {
        display: inline-flex;
        justify-content: center;
        min-width: 4.2rem;
        padding: .375rem .5rem;
    }

    /* --- RIGA 3: Escludi (label accanto allo switch) --- */
    #players-body td:nth-child(7) {
        grid-column: 1 / -1; /* tutta la riga */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        margin-top: .25rem;
    }
        /* Label "Escludi" a sinistra dell'input */
        #players-body td:nth-child(7)::before {
            content: "Escludi";
            font-size: .9rem;
            color: var(--bs-secondary-color);
            font-weight: 500;
        }

        #players-body td:nth-child(7) .form-check-input {
            transform: scale(1.1);
        }
}

/* ---------- Toolbar sticky mobile ---------- */
.mobile-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: .75rem;
}

/* ========== MOBILE TWEAKS ========== */
@media (max-width: 575.98px) {
    .btn-lg {
        padding: .6rem 1rem;
        font-size: 1rem;
    }

    input.player-rename,
    input.player-club-edit {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Evita tagli nella hero: niente ratio fissa sotto XS */
    .hero-landing .ss-grid-wrap {
        display: none;
    }

    .hero-landing .ss-carousel-wrap {
        display: block;
    }
}
/* Desktop/Tablet: mostra griglia, nascondi carousel */
@media (min-width: 576px) {
    .hero-landing .ss-grid-wrap {
        display: block;
    }

    .hero-landing .ss-carousel-wrap {
        display: none;
    }
}

/* View Profilo */
/* Evita zoom iOS sui form nei modali */
@media (max-width: 576px) {
    .modal .form-control {
        font-size: 16px;
    }
}

/* Allinea meglio i contenuti delle list-group su mobile */
.list-group-item .btn {
    line-height: 1.2;
}

@media (max-width: 576px) {
    /* Evita zoom automatico su iOS quando tocchi gli input */
    .modal .form-control,
    .modal .btn {
        font-size: 16px;
    }
    /* Footer: bottoni a tutta larghezza se vuoi ancora più comodità */
    #confirmModal .modal-footer .btn {
        flex: 1 1 auto;
    }
}

.modal-fullscreen-sm-down {
    width: unset;
    height: unset;
}