/* ============================================================
   GesTask — Calendario dei campi data
   Tema Prime per flatpickr.
   ============================================================

   Le schede di modulo e i gruppi di campi che stavano qui sono passati a
   prime/form.css e al ponte verso Bootstrap. Resta il calendario, che è
   l'unico pezzo di interfaccia disegnato da una libreria esterna: flatpickr
   inserisce il proprio foglio da JavaScript e porta una palette sua, quindi
   va rivestito voce per voce o resta l'unico riquadro bianco dell'
   applicazione in tema scuro. */

.flatpickr-calendar {
    background: var(--p-overlay-background);
    border: 1px solid var(--p-overlay-border-color);
    border-radius: var(--p-overlay-border-radius);
    box-shadow: var(--p-shadow-lg);
    color: var(--p-text-color);
    font-family: var(--p-font-family);
    padding-bottom: .375rem;
}

/* La punta del calendario è disegnata con due bordi sovrapposti: entrambi
   vanno riportati al colore della superficie, o resta un triangolo chiaro
   sopra un pannello scuro. */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--p-overlay-background); }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--p-overlay-background); }

.flatpickr-months { padding-top: .375rem; }

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.numInputWrapper span {
    color: var(--p-text-color);
    fill: var(--p-text-color);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    font-weight: 600;
}

/* Le voci di un `<select>` nativo sono disegnate dal sistema operativo e
   non ereditano il fondo del calendario: vanno dichiarate a parte. */
.flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: var(--p-overlay-background);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    border-radius: var(--p-border-radius-md);
    color: var(--p-text-color);
    fill: var(--p-text-color);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--p-primary-color); }

.flatpickr-weekdays { background: transparent; }

span.flatpickr-weekday {
    background: transparent;
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.flatpickr-day {
    border-color: transparent;
    border-radius: var(--p-border-radius-md);
    color: var(--p-text-color);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--p-content-hover-background);
    border-color: transparent;
}

/* Oggi si riconosce dalla cornice, il giorno scelto dal riempimento: due
   segnali diversi, così restano distinguibili anche quando coincidono. */
.flatpickr-day.today {
    border-color: var(--p-primary-color);
    font-weight: 700;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color);
}

.flatpickr-day.inRange {
    background: var(--p-primary-subtle-color);
    border-color: transparent;
    box-shadow: none;
    color: var(--p-primary-emphasis-color);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled {
    color: var(--p-text-muted-color);
    opacity: .5;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--p-text-color); }

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover { background: var(--p-content-hover-background); }

.flatpickr-calendar .flatpickr-time { border-top: 1px solid var(--p-content-border-color); }

/* Su schermo tattile le celle diventano abbastanza grandi da centrare col
   dito, e il calendario occupa la larghezza piena invece di una colonna
   fissa calcolata per il mouse. */
@media (max-width: 575.98px) {
    .flatpickr-calendar,
    .flatpickr-days,
    .flatpickr-rContainer,
    .dayContainer {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .flatpickr-day {
        height: 2.6rem;
        line-height: 2.6rem;
        max-width: none;
    }

    .flatpickr-calendar.static { width: 100%; }
}