/*
 * Calendari (flatpickr) nei colori del marchio, come in ZeroCarta ma senza rombi: il giorno o il mese scelto
 * sta in un cerchio pieno verde acqua, oggi in un cerchio vuoto.
 */

.flatpickr-calendar {
    font-family: inherit;
    background: var(--dc-superficie);
    border: 1px solid var(--dc-bordo);
    border-radius: .85rem;
    box-shadow: 0 14px 36px rgba(6, 43, 41, .18);
}

.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--dc-bordo); }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--dc-superficie); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--dc-bordo); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--dc-superficie); }

/* la testata con mese e anno su una striscia verde acqua, come il menu */
.flatpickr-months {
    padding: .35rem .25rem;
    border-radius: .85rem .85rem 0 0;
    background: var(--dc-acqua-pieno);
}

.flatpickr-months .flatpickr-month {
    height: 40px;
    color: #fff;
    fill: #fff;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: .35rem;
    color: #fff;
    fill: #fff;
    border-radius: 50%;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255, 255, 255, .14);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #fff;
}

.flatpickr-current-month {
    font-size: 1rem;
    font-weight: 600;
    padding-top: 6px;
    color: #fff;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 600;
    color: #fff;
    border-radius: .4rem;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
    color: var(--dc-testo);
    background: var(--dc-superficie);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .numInputWrapper:hover {
    background: rgba(255, 255, 255, .14);
}

.flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: #fff; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: #fff; }

.flatpickr-weekdays {
    margin-top: .35rem;
}

span.flatpickr-weekday {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dc-testo-tenue);
    background: transparent;
}

.flatpickr-day {
    position: relative;
    z-index: 0;
    color: var(--dc-testo);
    border-radius: 50%;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--dc-acqua-100);
    border-color: transparent;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--dc-testo-tenue);
    opacity: .55;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--dc-testo-tenue);
    opacity: .35;
    background: transparent;
}

.flatpickr-day.today,
.flatpickr-monthSelect-month.today {
    border: 1.5px solid var(--dc-acqua);
    color: var(--dc-acqua);
    font-weight: 600;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    color: var(--dc-acqua);
    background: var(--dc-acqua-100);
    border-color: var(--dc-acqua);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.selected:hover,
.flatpickr-monthSelect-month.selected:focus {
    color: #fff;
    font-weight: 600;
    background: var(--dc-acqua-pieno);
    border-color: var(--dc-acqua-pieno);
}

/* scelta del mese: griglia di tre colonne per quattro righe. Il contenitore di flatpickr è largo quanto la griglia dei
   giorni, nascosta qui: senza portarlo a tutta larghezza la terza colonna lascia spazio vuoto a destra */
.flatpickr-monthSelect-theme-light .flatpickr-rContainer {
    width: 100%;
}

/* scelta del mese: griglia di tre colonne per quattro righe */
.flatpickr-monthSelect-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
    margin: .6rem .6rem .55rem;
}

.flatpickr-monthSelect-month {
    width: auto;
    margin: 0;
    padding: .5rem .15rem;
    border-radius: 999px;
    color: var(--dc-testo);
    font-size: .88rem;
    text-transform: capitalize;
}

.flatpickr-monthSelect-month:hover,
.flatpickr-monthSelect-month:focus {
    background: var(--dc-acqua-100);
}

.flatpickr-monthSelect-month.flatpickr-disabled {
    color: var(--dc-testo-tenue);
    opacity: .4;
}

/* campo con l'icona del calendario: il testo mostrato è leggibile ("Ottobre 2026", "05/11/2026") */
.dc-calendario .input-group-text {
    color: var(--dc-acqua);
    background: var(--dc-superficie);
}

.dc-calendario .form-control[readonly] {
    background: var(--dc-superficie);
    cursor: pointer;
}

.dc-calendario {
    min-width: 11.5rem;
}

.dc-calendario-sm {
    min-width: 9.5rem;
}