/* =========================================================
   VR — Flatpickr theme + fixes
   (spostato da header)
   ========================================================= */

/* INCOLLA QUI IL TUO CSS .flatpickr-* CHE AVEVI IN HEADER */

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<style>
/* ===== Flatpickr — Tema chiaro Vallis Regia ===== */
.flatpickr-calendar{
  border-radius:14px;
  border:1px solid rgba(40,56,48,.18);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  overflow:hidden;

  background:#fff !important;
  color:#283830 !important;
}

/* header mese/anno */
.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month{
  background:#fff !important;
  color:#283830 !important;
}

.flatpickr-current-month{
  font-size:16px !important;
  font-weight:800 !important;
}

/* frecce */
.flatpickr-prev-month svg,
.flatpickr-next-month svg{
  width:14px !important;
  height:14px !important;
  stroke:#283830 !important;
}

/* contenitore interno: padding L/R per evitare “Dom” appiccicato */
.flatpickr-innerContainer{
  padding:12px 18px 18px !important;
  background:#fff !important;
}

/* riga giorni settimana */
.flatpickr-weekdays{
  background:#fff !important;
  padding:8px 2px 10px !important;
  border-bottom:1px solid rgba(40,56,48,.12);
}

.flatpickr-weekday{
  background:transparent !important;
  color:rgba(40,56,48,.85) !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
}

/* griglia giorni */
.flatpickr-days{
  padding:10px 2px 2px !important;
  background:#fff !important;
}

.flatpickr-day{
  height:38px !important;
  line-height:38px !important;
  border-radius:12px !important;

  color:#283830 !important;
  font-weight:600 !important;
}

.flatpickr-day:hover{
  background:rgba(40,56,48,.08) !important;
}

/* selected */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:#283830 !important;
  border-color:#283830 !important;
  color:#fff !important;
}

/* today */
.flatpickr-day.today{
  border-color:#FFCA6C !important;
}

/* disabled */
.flatpickr-day.disabled,
.flatpickr-day.prevMonthDay.disabled,
.flatpickr-day.nextMonthDay.disabled{
  color:rgba(40,56,48,.22) !important;
}

/* ===== NORMALIZZAZIONE (Safari vs Chrome) ===== */
.flatpickr-calendar,
.flatpickr-calendar *{
  box-sizing:border-box !important;
  font-family: inherit !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.flatpickr-calendar{
  font-size:14px !important;
  line-height:1.2 !important;
}

/* Safari: evita aspetto "select" nativo su mese/anno */
.flatpickr-current-month select,
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month input.cur-year{
  -webkit-appearance:none !important;
  appearance:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Rimuove le freccette native in Safari/IE */
.flatpickr-current-month select::-ms-expand{ display:none; }
.flatpickr-current-month select{ padding-right:18px !important; }

/* Uniforma il caret del mese */
.flatpickr-current-month .flatpickr-monthDropdown-months{
  font-weight:800 !important;
}

/* (opzionale) nasconde eventuali spinner del campo anno */
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
}

/* Fix colonna Domenica appiccicata: padding sui container reali della griglia */
.flatpickr-weekdays{
  padding-left:14px !important;
  padding-right:14px !important;
}

.flatpickr-days{
  padding-left:14px !important;
  padding-right:14px !important;
}

/* il vero contenitore delle celle */
.flatpickr-calendar .dayContainer{
  padding-left:14px !important;
  padding-right:14px !important;
  box-sizing:border-box !important;
}

/* extra: evita “overflow” visivo verso destra */
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer{
  overflow:hidden !important;
}
/* ===== FIX overflow colonna Domenica (dayContainer width fissa) ===== */

/* assicurati che il contenitore giorni non abbia larghezza fissa */
.flatpickr-calendar .flatpickr-days{
  width: 100% !important;
  max-width: 100% !important;
}

/* dayContainer è quello che spesso ha width in px: annulliamo */
.flatpickr-calendar .dayContainer{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* riga weekday: stessa larghezza */
.flatpickr-calendar .flatpickr-weekdays{
  width: 100% !important;
  max-width: 100% !important;
}

/* evita che il box “tagli” ma soprattutto elimina sbordo */
.flatpickr-calendar .flatpickr-innerContainer{
  overflow: hidden !important;
}

/* padding L/R sul contenuto reale (senza farlo sbordare) */
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-days{
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
}

/* centra bene i giorni della settimana e le celle */
.flatpickr-weekday,
.flatpickr-day{
  text-align: center !important;
}
.flatpickr-weekday{
  color: rgba(40,56,48,.92) !important;
}
.flatpickr-day.today{
  background: rgba(255,202,108,.18) !important;
}
/* ===== Fix leggibilità giorno selezionato + raggi più piccoli ===== */

/* giorni meno “pillolosi” */
.flatpickr-day{
  border-radius:8px !important;
}

/* hover meno arrotondato e coerente */
.flatpickr-day:hover{
  border-radius:8px !important;
}

/* oggi: stesso raggio, bordo ben visibile */
.flatpickr-day.today{
  border-radius:8px !important;
  border-color:#FFCA6C !important;
}

/* SELEZIONATO: garantisci sempre contrasto (non bianco su bianco) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:#283830 !important;
  border-color:#283830 !important;
  color:#fff !important;
}

/* Caso particolare: oggi + selezionato (quando riapri) */
.flatpickr-day.today.selected{
  background:#283830 !important;
  border-color:#FFCA6C !important; /* mantiene accento “oggi” */
  color:#fff !important;
}

/* Se per qualche motivo il selected perde lo sfondo, forziamo */
.flatpickr-day.selected:not(.flatpickr-disabled){
  background:#283830 !important;
  color:#fff !important;
}

/* più spazio sopra header mese/anno */
.flatpickr-months{
  padding-top:16px !important;   /* aumenta aria sopra */
  padding-bottom:10px !important;
}

.flatpickr-current-month{
  padding-top:2px !important;    /* micro respiro interno */
  line-height:1.15 !important;
}

/* ===== FIX definitivo allineamento colonne (weekday vs days) ===== */

/* 1) niente padding “a cascata” che sfasa le larghezze */
.flatpickr-innerContainer{ padding:0 !important; }

/* 2) il padding deve stare SOLO qui (vale per weekdays + days) */
.flatpickr-calendar .flatpickr-rContainer{
  padding:0px 14px 14px !important; /* regola qui il “respiro” laterale */
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
}

/* 3) azzera padding sugli elementi interni */
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer{
  padding:0 !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* 4) centrare sempre testo */
.flatpickr-weekday,
.flatpickr-day{ text-align:center !important; }

/* 5) evita “tagli” strani */
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer{
  overflow:visible !important;
}
/* ===== Differenzia giorni: passato / fuori mese ===== */

/* 1) giorni PRIMA di oggi (disabilitati da minDate) -> grigio chiaro */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay.flatpickr-disabled,
.flatpickr-day.nextMonthDay.flatpickr-disabled{
  color: rgba(40,56,48,.22) !important;
  opacity: 1 !important;            /* alcuni temi abbassano opacity */
  background: transparent !important;
}

/* 2) fuori mese, MA NON se selected */
.flatpickr-day.prevMonthDay:not(.selected),
.flatpickr-day.nextMonthDay:not(.selected){
  color: rgba(40,56,48,.55) !important;
}


/* 3) evidenzia mese corrente (ma NON il selected/range) */
.flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange):not(.inRange){
  color:#283830 !important;
  font-weight:700 !important;
}

/* 4) hover sui fuori mese più “soft” */
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover{
  background: rgba(40,56,48,.05) !important;
}

/* ===== FIX: selected deve vincere su "fuori mese" e "disabled" ===== */

/* selected sempre leggibile */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:#283830 !important;
  border-color:#283830 !important;
  color:#fff !important;
  opacity:1 !important;
}

/* selected anche se è prevMonthDay/nextMonthDay */
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.endRange.nextMonthDay{
  color:#fff !important;
  opacity:1 !important;
}

/* caso oggi + selected */
.flatpickr-day.today.selected{
  color:#fff !important;
  background:#283830 !important;
  border-color:#FFCA6C !important;
}

/* ULTRA COMPACT header → calendario */
.flatpickr-months{
  padding-top: 16px !important;
  padding-bottom: 0px !important;
}

.flatpickr-current-month{
  margin-bottom: 0px !important;
}

.flatpickr-weekdays{
  padding-top: 0px !important;
  padding-bottom: 4px !important;
}

.flatpickr-days{
  padding-top: 4px !important;
}
/* Mobile: testo calendario un po’ più grande */
@media (max-width: 768px){
  .flatpickr-calendar{
    font-size:16px !important; /* base */
  }

  .flatpickr-current-month{
    font-size:18px !important; /* mese/anno */
  }

  .flatpickr-weekday{
    font-size:13px !important; /* Lun Mar... */
  }

  .flatpickr-day{
    font-size:16px !important; /* numeri */
  }
}
/* Header mese/anno + frecce più “compatto” e allineato */
.flatpickr-months{
  position: relative !important;
  align-items: center !important;
  padding: 10px 12px 6px !important; /* meno aria sopra/sotto */
}

.flatpickr-months .flatpickr-month{
  position: relative !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flatpickr-current-month{
  position: static !important;        /* evita offset strani */
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 10px !important;               /* distanza mese-anno */
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* frecce: dentro l’header, più vicine */
.flatpickr-prev-month,
.flatpickr-next-month{
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 6px !important;
}

.flatpickr-prev-month{ left: 8px !important; }
.flatpickr-next-month{ right: 8px !important; }

/* =========================================================
   VR — Flatpickr mobile FIXED + grid iOS safe
   ========================================================= */
@media (max-width: 768px){

  .flatpickr-calendar{
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    max-height: calc(100vh - 24px) !important;

    overflow-x: hidden !important; /* 👈 NON auto */
    overflow-y: auto !important;

    z-index: 999999 !important;
  }

  /* forza sempre 7 colonne, evita giorni orfani (iOS) */
  .flatpickr-days,
  .flatpickr-weekdays{
    width: 100%;
  }

  .flatpickr-day{
    flex: 0 0 calc(100% / 7);
    max-width: calc(100% / 7);
  }
}

</style>