/* Il calendario disegnato del gestionale e del sito.
   Lo usano CalendarioPeriodo.razor (Aggiungi prenotazione, home, dettaglio tipologia) e il riquadro "Vai a data"
   del calendario prenotazioni (bookingCalendar.js, _apriVaiAData). Sta qui e non nel componente perche' quel
   riquadro non e' un componente Blazor: con lo stile dentro CalendarioPeriodo si caricava solo a modulo aperto.
   Non dipende dalle variabili --sty-* che ogni pagina definisce per conto suo. */

.sty-dates,
.sty-cal {
    --cal-ink: #111418;
    --cal-muted: #767676;
    --cal-hair: #EBEBEB;
    --cal-ground: #F8F8F8;
}

.sty-dates { position: relative; }

.sty-dates.is-active label { color: var(--color-primary) !important; }

.sty-dates.is-active .sty-datefield {
    border-color: var(--color-primary) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .20);
}

.sty-datefield {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 18px;
    text-align: left;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid var(--cal-hair);
    background: #fff;
    color: var(--cal-ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.sty-datefield .is-empty { color: var(--cal-muted); font-weight: 500; }

/* In assoluto: nel flusso allungherebbe il contenitore lasciando un vuoto accanto */
.sty-cal {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 60;
    width: 320px;
    max-width: calc(100vw - 44px);
    padding: 18px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 40px -14px rgba(17, 20, 24, .24);
}

/* Sotto la partenza si allinea al bordo destro del campo e cresce verso sinistra, sopra
   la colonna dell'arrivo: allineato a sinistra usciva dallo schermo dove i due campi
   stanno affiancati anche sul telefono (moduli del gestionale). */
.sty-cal.is-partenza,
.sty-cal.is-destra { left: auto; right: 0; }

.sty-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sty-cal-title { font-size: 15px; font-weight: 700; text-transform: capitalize; color: var(--cal-ink); }

.sty-cal-nav {
    width: 36px; height: 36px; flex: none;
    border: 0; border-radius: 50%;
    background: var(--cal-ground); color: var(--cal-ink);
    font-size: 20px; line-height: 1; cursor: pointer;
    transition: background .2s;
}

.sty-cal-nav:hover:not(:disabled) { background: var(--cal-hair); }
.sty-cal-nav:disabled { opacity: .3; cursor: default; }

.sty-cal-step {
    margin: 0 0 12px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-primary);
}

.sty-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.sty-cal-dow {
    text-align: center; padding-bottom: 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cal-muted);
}

.sty-cal-empty { height: 40px; }

.sty-cal-day {
    height: 40px; border: 0; padding: 0; cursor: pointer;
    background: transparent; color: var(--cal-ink);
    font: inherit; font-size: 13.5px; font-weight: 600;
    border-radius: 999px;
    transition: background .15s;
}

/* L'hover non deve ridipingere un giorno gia' scelto. Senza le esclusioni
   questa regola pesa (0,3,0) e batte .sty-cal-day.is-start (0,2,0): dopo il
   tocco l'hover resta attaccato al giorno e ci mette sopra il grigio chiaro,
   con il testo bianco della selezione che ci spariva dentro. */
.sty-cal-day:hover:not(:disabled):not(.is-start):not(.is-end):not(.is-mid) {
    background: var(--cal-ground);
}
.sty-cal-day:disabled { color: #D6D6D6; cursor: default; }
.sty-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--cal-hair); }

/* Estremi pieni e stondati verso l'esterno, giorni in mezzo come nastro continuo */
.sty-cal-day.is-mid { background: rgba(var(--color-primary-rgb), .12); border-radius: 0; color: var(--color-primary); }
.sty-cal-day.is-start, .sty-cal-day.is-end { background: var(--color-primary); color: #fff; }
.sty-cal-day.is-start { border-radius: 999px 0 0 999px; }
.sty-cal-day.is-end { border-radius: 0 999px 999px 0; }
.sty-cal-day.is-solo { border-radius: 999px; }

.sty-cal-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--cal-hair);
    font-size: 12.5px; font-weight: 600; color: var(--cal-muted);
}

.sty-cal-done {
    flex: none; border: 0; border-radius: 999px;
    background: var(--color-primary); color: #fff;
    font: inherit; font-size: 13px; font-weight: 700;
    padding: 9px 20px; cursor: pointer;
    transition: filter .2s;
}

.sty-cal-done:hover { filter: brightness(1.08); }