/* Pagine di prenotazione dei tornei (Prenota coppie, Prenota squadre): tutto lo stile in comune.
   Nelle due pagine restano solo le differenze (elenco a coppie o a squadre, finestra della squadra). */

#app.pc-pagina {
    --pc-testo: #1f2d3a;
    --pc-tenue: #6b7a89;
    --pc-bordo: #e3e8ee;
    --pc-fondo: #f8fafc;
    --pc-testata: #2f4b63;
    --pc-evidenza: #fff3c4;
    --pc-aperte: #1e7a46;
    --pc-aperte-fondo: #e3f4ea;
    --pc-chiuse: #a3312c;
    --pc-chiuse-fondo: #fbe6e4;
    --pc-avviso: #8a5a00;
    --pc-avviso-fondo: #fff6dc;
    --pc-avviso-bordo: #f0c95a;
    max-width: 600px;
    margin: 1.5rem auto 3rem auto;
    border: 1px solid var(--pc-bordo);
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(31, 45, 58, 0.08);
    color: var(--pc-testo);
    overflow: hidden;
}

/* Barra superiore */
.pc-barra {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    background-color: var(--pc-fondo);
    border-bottom: 1px solid var(--pc-bordo);
}

/* ... pagina senza testata del sito: logo e nome dell'associazione piccoli nella barra di Chiudi,
               niente sponsor */
body .logo-main {
    display: none !important;
}

.pc-club {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
    color: var(--pc-testata);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.pc-club img {
    height: 40px;
    width: auto;
}

/* ... telefono con i comandi admin: solo il logo, il nome non ci sta */
@media (max-width: 600px) {
    .pc-barra:has(.pc-admin) .pc-club-nome {
        display: none;
    }
}

.pc-admin {
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--pc-chiuse-fondo);
    color: var(--pc-chiuse);
    font-size: 12px;
    font-weight: 600;
}

.pc-admin .breve {
    display: none;
}

.pc-realbridge {
    display: block;
    margin: 14px 16px 0 16px;
    font-weight: 600;
}

/* Intestazione del torneo */
.pc-torneo {
    padding: 10px 16px 12px 16px;
}

/* ... foglietto di calendario a sinistra (blu-ardesia, il colore della testata), titolo ed etichette a destra */
.pc-torneo-b {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pc-calendario {
    flex: 0 0 64px;
    overflow: hidden;
    border: 1.5px solid var(--pc-testata);
    border-radius: 8px;
    background-color: white;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pc-cal-mese {
    padding: 2px 0;
    background-color: var(--pc-testata);
    color: white;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pc-cal-giorno {
    color: #1f2d3a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.pc-cal-sett {
    padding-bottom: 3px;
    color: var(--pc-tenue);
    font-size: 11px;
}

.pc-torneo-testo {
    flex: 1 1 auto;
    min-width: 0;
}

.pc-titolo-b {
    color: #800000;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.pc-torneo-testo .pc-dettagli {
    margin-top: 6px;
}

.pc-data {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.25;
}

.pc-data::first-letter {
    text-transform: uppercase;
}

.pc-dettagli {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.pc-chip {
    padding: 2px 10px;
    border: 1px solid var(--pc-bordo);
    border-radius: 999px;
    font-size: 12px;
    color: var(--pc-tenue);
}

.pc-chip.ora {
    border-color: var(--pc-testata);
    background-color: var(--pc-testata);
    color: white;
    font-weight: 600;
}

/* ... stato delle iscrizioni in fondo a destra, staccato dalle caratteristiche del torneo */
.pc-chip.stato {
    margin-left: auto;
    font-weight: 700;
}

.pc-chip.stato.aperte {
    border-color: var(--pc-aperte-fondo);
    background-color: var(--pc-aperte-fondo);
    color: var(--pc-aperte);
}

.pc-chip.stato.chiuse {
    border-color: var(--pc-chiuse-fondo);
    background-color: var(--pc-chiuse-fondo);
    color: var(--pc-chiuse);
}

.pc-descrizione {
    margin: 0 16px 12px 16px;
    padding: 10px 14px;
    /* ... riquadrata come il modulo di selezione, con la banda a sinistra di prima */ border: 1px solid #333;
    border-left: 4px solid var(--pc-testata);
    border-radius: 8px;
    background-color: #eaf1f7;
    color: var(--pc-testata);
    font-size: 1.5rem;
    font-weight: 600;
}

.pc-vincoli {
    margin: 0 16px 12px 16px;
    padding: 8px 14px;
    border-radius: 6px;
    background-color: var(--pc-chiuse-fondo);
    color: var(--pc-chiuse);
    font-weight: 600;
}

.pc-nota {
    margin: 0 16px 12px 16px;
    color: var(--pc-tenue);
    font-size: 13px;
}

/* Modulo di prenotazione */
.pc-modulo {
    margin: 0 16px 16px 16px;
    padding: 14px;
    border: 1px solid #333;
    border-radius: 8px;
    background-color: var(--pc-fondo);
}

.pc-modulo.in-modifica {
    border: 2px solid var(--pc-avviso-bordo);
    background-color: white;
}

.pc-modulo-titolo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 700;
}

.pc-modulo-titolo a {
    font-size: 12px;
    font-weight: normal;
}

.pc-giocatore {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.pc-giocatore .dropdown {
    flex: 1;
    min-width: 0;
}

.pc-giocatore .dropdown-menu {
    width: 100%;
}

/* Giallo pallido: è il colore che i giocatori associano ai campi della prenotazione */
.pc-giocatore .form-control {
    background-color: lightgoldenrodyellow;
}

/* Il codice non si scrive: grigio, per distinguerlo dai campi da compilare */
.pc-giocatore .form-control.codice, .pc-giocatore .form-control.codice[disabled] {
    flex: 0 0 6.5rem;
    width: 6.5rem;
    background-color: #eef1f4;
    color: var(--pc-tenue);
    text-align: center;
}

input.maiuscolo {
    text-transform: uppercase;
}

.autocomplete {
    font-size: 1em !important;
}

.pc-pulsanti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.pc-pulsanti .pieno {
    margin-right: auto;
    color: var(--pc-chiuse);
    font-weight: 600;
}

.pc-pulsanti .btn-primary {
    min-width: 8rem;
    font-weight: 600;
}

/* Elenco coppie */
.pc-elenco {
    padding: 0 16px 16px 16px;
}

.pc-elenco-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 6px 0;
}

.pc-elenco-titolo {
    font-size: 1.6rem;
    font-weight: 700;
}

.pc-conteggio {
    color: var(--pc-tenue);
    font-size: 13px;
}

.pc-conteggio b {
    color: var(--pc-testo);
}

.pc-capienza {
    height: 6px;
    margin-bottom: 6px;
    border-radius: 999px;
    background-color: var(--pc-bordo);
    overflow: hidden;
}

.pc-capienza div {
    height: 100%;
    background-color: var(--pc-aperte);
}

.pc-capienza.piena div {
    background-color: var(--pc-chiuse);
}

ol.pc-coppie {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pc-bordo);
}

ol.pc-coppie li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px;
    border-bottom: 1px solid var(--pc-bordo);
}

ol.pc-coppie li:hover {
    background-color: var(--pc-fondo);
}

ol.pc-coppie li.selected {
    background-color: var(--pc-evidenza);
    box-shadow: inset 3px 0 0 var(--pc-avviso-bordo);
}

ol.pc-coppie .numero {
    flex: 0 0 2.4rem;
    color: var(--pc-tenue);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

ol.pc-coppie .nomi {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    min-width: 0;
}

ol.pc-coppie .nomi.eliminato {
    color: var(--pc-tenue);
    text-decoration: line-through;
}

ol.pc-coppie .azioni {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
}

ol.pc-coppie .azioni a, ol.pc-coppie .azioni span.glyphicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--pc-tenue);
    text-decoration: none;
}

ol.pc-coppie .azioni a:hover {
    background-color: var(--pc-bordo);
    color: var(--pc-testata);
}

ol.pc-coppie .azioni a.elimina:hover {
    background-color: var(--pc-chiuse-fondo);
    color: var(--pc-chiuse);
}

.pc-vuoto {
    padding: 2rem 0;
    color: var(--pc-tenue);
    text-align: center;
}

.pc-legenda {
    margin-top: 8px;
    color: var(--pc-tenue);
    font-size: 12px;
    font-style: italic;
}

div.istruzioni p {
    line-height: 1.7em;
    font-size: 1.1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    text-align: justify;
    text-justify: inter-word;
}

@media (max-width: 767px) {
    #app.pc-pagina {
        margin: 0.5rem 8px 2rem 8px;
    }

    .pc-data {
        font-size: 1.6rem;
    }

    .pc-dettagli {
        gap: 4px;
    }

    .pc-admin .esteso {
        display: none;
    }

    .pc-admin .breve {
        display: inline;
    }

    .pc-chip {
        padding: 2px 7px;
    }

    .pc-giocatore .codice {
        flex-basis: 5.5rem;
        width: 5.5rem;
    }
}