/* =====================================================================
   Il calendario del periodo

   Sta in un file a parte perche' lo usano tre posti che non condividono un
   foglio di stile: il modulo preventivo del sito (site.css), la scheda dati in
   admin e la stessa scheda nell'area cliente (admin.css). Duplicarlo vorrebbe
   dire sistemarlo in uno e lasciarlo rotto negli altri.

   Le variabili di colore (--verde-*, --bordo, --grigio, --bianco) sono definite
   con gli stessi nomi e gli stessi valori sia in site.css sia in admin.css:
   questo file le usa e non le dichiara.

   Si carica solo dove serve, con @section Head / @section Stili.
   ===================================================================== */
/* --- il calendario del soggiorno ------------------------------------------ */
/* Due mesi affiancati, il periodo si sceglie con due clic. Sostituisce alla vista i due campi
   data, che pero' restano nel documento: senza JavaScript sono loro che si vedono. */
.periodo { position: relative; display: grid; gap: 6px; }
/* Il pulsante che apre: sta al posto dei due campi e ne ha l'aspetto, perche' li' chi guarda
   si aspetta un campo da compilare, non un tasto. */
.periodo__campo {
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--grigio);
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
}
.periodo__campo:hover { border-color: var(--verde-link); }
.periodo__campo:focus-visible { outline: 2px solid var(--verde-link); outline-offset: 2px; }
/* Con le date scelte il testo smette di essere un invito e diventa un dato. */
.periodo__campo--pieno { color: var(--verde-scuro); font-weight: 600; }
.periodo__pannello {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: 0 12px 32px rgba(34, 26, 18, .13);
    padding: 14px;
}
.periodo__pannello[hidden] { display: none; }
.periodo__testa { display: flex; justify-content: space-between; margin-bottom: 6px; }
.periodo__freccia {
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--verde-scuro);
    background: none;
    border: 1px solid var(--bordo);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.periodo__freccia:hover:not(:disabled) { border-color: var(--verde-link); color: var(--verde-link); }
.periodo__freccia:disabled { opacity: .3; cursor: default; }
/* Due mesi su una riga; su schermo stretto uno solo, incolonnati. */
.periodo__mesi { display: flex; gap: 22px; }
.periodo__mese { flex: 0 0 auto; }
.periodo__titolo {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: capitalize;
    margin: 0 0 8px;
}
.periodo__griglia {
    display: grid;
    grid-template-columns: repeat(7, 34px);
    gap: 2px;
}
.periodo__giorno {
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--grigio);
    padding-bottom: 4px;
}
.periodo__vuota { visibility: hidden; }
.periodo__data {
    font: inherit;
    font-size: 0.8438rem;
    height: 34px;
    color: var(--verde-scuro);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
/* Il pulsante del calendario quando il server ha segnalato un errore sulle date. */
.periodo__campo[aria-invalid="true"] { border-color: var(--verde-scuro); }
.periodo__data:hover:not(:disabled) { background: var(--verde-chiaro); }
.periodo__data:focus-visible { outline: 2px solid var(--verde-link); outline-offset: -2px; }
.periodo__data--passata { color: var(--bordo); cursor: default; }
/* I due estremi pieni, i giorni in mezzo appena tinti: si legge come una fascia sola. */
.periodo__data--dentro { background: var(--verde-chiaro); border-radius: 0; }
.periodo__data--inizio,
.periodo__data--fine {
    background: var(--verde-link);
    color: #FFFFFF;
    font-weight: 700;
}
.periodo__data--inizio { border-radius: 8px 0 0 8px; }
.periodo__data--fine { border-radius: 0 8px 8px 0; }
/* Un giorno solo scelto e' un riquadro intero, non mezza fascia. */
.periodo__data--inizio.periodo__data--fine { border-radius: 8px; }
/* Il focus su una data gia scelta: il bordo normale ha il colore dello sfondo e sparirebbe.
   Qui e bianco, dentro, con un anello scuro fuori: si vede su qualunque accento. */
.periodo__data--inizio:focus-visible,
.periodo__data--fine:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: -4px;
    box-shadow: 0 0 0 2px var(--verde-scuro);
}
.periodo__piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bordo);
}
.periodo__azzera {
    font: inherit;
    font-size: 0.8438rem;
    color: var(--grigio);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}
.periodo__azzera:hover { color: var(--verde-link); }

@media (max-width: 640px) {
    /* Il pannello a tutta larghezza e un mese per volta: due non ci stanno, e affiancarli
       stretti li renderebbe illeggibili invece che compatti. */
    .periodo__pannello { left: 0; right: 0; padding: 12px; }
    .periodo__mesi { flex-direction: column; gap: 16px; }
    .periodo__griglia { grid-template-columns: repeat(7, 1fr); }
}
/* Il "Fatto" del piede: prima prendeva l'aspetto da .pulsante di site.css, che nel gestionale
   non c'e'. Se lo fa da solo, cosi' il calendario e' uguale in tutti i tre posti. */
.periodo__fatto {
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--verde-scuro);
    color: var(--bianco);
    cursor: pointer;
}
.periodo__fatto:hover { filter: brightness(1.15); }