/* =============================================================================
 * datepicker-firmatour.css
 * Override tema jQuery UI "ui-lightness" (arancione) con i colori di brand
 * Firmatour (blu #039de3). Viene caricato dopo jquery-ui.css in load-css.asp.
 *
 * Gestisce inoltre la responsivita' mobile: sotto 768px viene mostrato solo
 * un mese (il second .ui-datepicker-group viene nascosto) dato che il layout
 * a 2 mesi e' troppo largo su schermi piccoli.
 * ========================================================================== */

/* Brand colors ---------------------------------------------------------- */
:root {
    --ft-blue:      #039de3;
    --ft-blue-dark: #0284bf;
    --ft-blue-soft: #e3f4fb;
    --ft-blue-50:   rgba(3,157,227,0.08);
}

/* Container & shadow --------------------------------------------------- */
.ui-datepicker {
    background: #fff;
    border: 1px solid #d5dce2;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    padding: 0;
    font-family: inherit;
    font-size: .9rem;
}

/* Header (barra blu con mese/anno) ------------------------------------- */
.ui-datepicker .ui-datepicker-header,
.ui-datepicker.ui-widget .ui-widget-header,
.ui-datepicker .ui-widget-header {
    background: var(--ft-blue);
    background-image: none;          /* rimuove gradient arancione del tema */
    border: none;
    color: #fff;
    border-radius: 6px 6px 0 0;
    padding: .55rem 0;
    font-weight: 600;
    position: relative;
}
/* Se 2 mesi affiancati: headers singoli non tondano tutti */
.ui-datepicker-multi .ui-datepicker-group-first .ui-datepicker-header {
    border-radius: 6px 0 0 0;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-radius: 0 6px 0 0;
}

.ui-datepicker .ui-datepicker-title {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .92rem;
}

/* Frecce prev / next --------------------------------------------------- */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: rgba(255,255,255,0.18);
    background-image: none;
    border: none;
    border-radius: 50%;
    top: .45rem;
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: -9999em;         /* nasconde eventuali testi "Prev"/"Next" dentro il tag */
    overflow: hidden;
}
.ui-datepicker .ui-datepicker-prev { left: .5rem; }
.ui-datepicker .ui-datepicker-next { right: .5rem; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: rgba(255,255,255,0.32);
    border: none;
}

/* Nasconde completamente il <span> interno (che contiene sprite arancioni e
   testo tipo "Prev"/"Next" del tema UI, che altrimenti si vede come ":3C;" ecc) */
.ui-datepicker .ui-datepicker-prev > span,
.ui-datepicker .ui-datepicker-next > span {
    display: none !important;
}

/* Frecce disegnate via Font Awesome 6 (gia' caricato in load-css.asp) */
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #fff;
    font-size: .95rem;
    line-height: 1;
    text-indent: 0;               /* annulla l'indent del parent */
    position: static;
}
.ui-datepicker .ui-datepicker-prev::after { content: "\f053"; }   /* fa-chevron-left */
.ui-datepicker .ui-datepicker-next::after { content: "\f054"; }   /* fa-chevron-right */

/* Griglia mesi (se multi-mese) ---------------------------------------- */
.ui-datepicker-multi .ui-datepicker-group {
    padding: 0 .35rem .35rem;
}

/* Intestazione giorni (Lu Ma Me ...) ---------------------------------- */
.ui-datepicker th {
    color: var(--ft-blue);
    font-weight: 700;
    padding: .4rem .2rem .25rem;
    font-size: .8rem;
    text-transform: uppercase;
}

/* Celle giorno --------------------------------------------------------- */
.ui-datepicker td {
    padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a,
.ui-datepicker td .ui-state-default {
    background: transparent;
    background-image: none;
    border: 1px solid transparent;
    color: #333;
    padding: .4rem .2rem;
    text-align: center;
    border-radius: 3px;
    transition: background .12s, color .12s;
}

/* Hover giorni abilitati ---------------------------------------------- */
.ui-datepicker td a:hover,
.ui-datepicker td .ui-state-hover {
    background: var(--ft-blue-soft);
    border-color: var(--ft-blue);
    color: var(--ft-blue-dark);
}

/* Oggi (era giallo nel tema) ------------------------------------------ */
.ui-datepicker td .ui-state-highlight,
.ui-datepicker td.ui-datepicker-today a {
    background: var(--ft-blue-50);
    background-image: none;
    border: 1px solid var(--ft-blue);
    color: var(--ft-blue-dark);
    font-weight: 700;
}

/* Giorno selezionato / active ---------------------------------------- */
.ui-datepicker td .ui-state-active,
.ui-datepicker td a.ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a {
    background: var(--ft-blue);
    background-image: none;
    border-color: var(--ft-blue);
    color: #fff;
    font-weight: 700;
}

/* Giorni disabilitati / fuori mese ------------------------------------ */
.ui-datepicker td.ui-datepicker-other-month span,
.ui-datepicker td.ui-state-disabled span,
.ui-datepicker .ui-state-disabled {
    color: #c7ced4;
    opacity: 1;
    background: transparent;
    cursor: not-allowed;
}

/* Weekend: stesso colore degli altri giorni (sono comunque selezionabili).
   Li differenziamo solo con uno sfondo tenue, mai con colore "spento" che
   potrebbe confonderli con i giorni disabilitati. */
.ui-datepicker td.ui-datepicker-week-end a,
.ui-datepicker td.ui-datepicker-week-end .ui-state-default {
    color: #333;                     /* stesso dei feriali */
    background-color: #fafbfc;       /* sfondo appena piu' chiaro */
}
.ui-datepicker td.ui-datepicker-week-end a:hover,
.ui-datepicker td.ui-datepicker-week-end .ui-state-hover {
    color: var(--ft-blue-dark);
    background-color: var(--ft-blue-soft);
}
/* ma il giorno selezionato/active resta blu pieno anche nel weekend */
.ui-datepicker td.ui-datepicker-week-end a.ui-state-active,
.ui-datepicker td.ui-datepicker-week-end .ui-state-active {
    background-color: var(--ft-blue) !important;
    color: #fff !important;
}
/* e anche l'intestazione SA/DO in blu brand come le altre */
.ui-datepicker th.ui-datepicker-week-end { color: var(--ft-blue); }

/* Responsive: su schermi < 768px il datepicker va a schermo quasi pieno.
   La riduzione a 1 mese viene fatta via JS (home-012026.js) impostando
   l'opzione numberOfMonths:1 -- cosi' entrambe le frecce prev/next sono
   disponibili nell'header dell'unico mese. */
@media (max-width: 767px) {
    .ui-datepicker {
        width: auto !important;
        max-width: 94vw;
        left: 3vw !important;        /* sovrascrive il left inline di jQuery UI */
        right: 3vw;
        box-sizing: border-box;
    }
    .ui-datepicker .ui-datepicker-header {
        padding: .7rem 0;            /* piu' spazio sopra/sotto al titolo */
    }
    .ui-datepicker table { width: 100%; }
    .ui-datepicker th { padding-top: .6rem; padding-bottom: .35rem; }
    .ui-datepicker td a,
    .ui-datepicker td span { padding: .65rem .2rem; }
}