/* --- Buchungskalender 2026 - Vollständiges & Kommentiertes CSS --- */

:root {
  /* Farbvariablen für einfache globale Änderungen */
  --color-green: #d4edda;
  --color-yellow: #fff3cd;
  --color-blue: #e0d1be; /*Braunton - alter Blauton: #cfe2ff */
  --color-red: #f8d7da;
  --text-blue: #333;
  --text-red: #721c24;
  /* Auswahlfarbe (Orange) */
  --color-selection: #fd7e14;
  --color-selection-dark: #e67300; /* Etwas dunkler für die Ankerpunkte */
  --color-orange: #fd7e14;
  --radius-lg: 12px;
  --radius-sm: 8px;
}


/* Styling des Eingabefeldes */
input#booking-calendar {
  width: 221px;
  padding: 7px;
  margin-bottom: 20px;
  margin-right: 10px;
  font-size: 14px;
  border: 1px solid var(--weiss);
  border-radius:3px;
  cursor: pointer;
  box-sizing: border-box;
  color:var(--green1);
}

#booking-calendar::placeholder {
    color: var(--green1);
    opacity: 1;
}

/* Unterstützung für ältere Browser (optional) */
#booking-calendar::-webkit-input-placeholder { color: var(--green1); } /* Chrome/Safari/Edge */
#booking-calendar::-moz-placeholder { color: var(--green1); }          /* Firefox */
#booking-calendar:-ms-input-placeholder { color: var(--green1); }      /* IE 10-11 */


/* Grundstyling der einzelnen Kalendertage */
.flatpickr-day {
  position: relative !important;
  height: 44px !important;    /* Höhe leicht reduziert für bessere Proportion */
  line-height: 44px !important;
  flex-basis: 14.2857% !important; /* Exakt 1/7 der Breite erzwingen */
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important; /* Verhindert, dass Border das Layout verbreitert */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Hintergrundfarben basierend auf dem Status --- */
.status-2 { background-color: var(--color-green) !important; }
.status-1 { background-color: var(--color-yellow) !important; }
.status-neg1 { background-color: var(--color-blue) !important;  }
.status-0 { background-color: var(--color-red) !important; }

/* --- KORREKTUR: Markierung für den ausgewählten Zeitraum (Rundung ohne Weiß) --- */

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  /* Der Tag selbst wird hintergrund-transparent, damit die Statusfarbe (Grün/Gelb/Blau)
     in den Ecken der Rundung sichtbar bleibt statt Weiß */
  background-color: transparent !important;
  border-color: transparent !important;
  color: white !important;
  z-index: 5;
}

/* Wir nutzen ::before, um die Auswahlfarbe ALS EBENE über die Statusfarbe zu legen */
.flatpickr-day.selected::before,
.flatpickr-day.startRange::before,
.flatpickr-day.endRange::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-selection-dark) !important;
  z-index: -1; /* Liegt über der Statusfarbe, aber hinter dem Datumstext */
}

/* Rundungen nur für das Pseudo-Element */
.flatpickr-day.startRange::before { border-radius: 50px 0 0 50px !important; }
.flatpickr-day.endRange::before { border-radius: 0 50px 50px 0 !important; }
.flatpickr-day.selected.startRange.endRange::before { border-radius: 50px !important; }

/* In-Range (Tage dazwischen): Kräftiges Orange mit Balken-Effekt */
.flatpickr-day.inRange {
  background: var(--color-selection) !important;
  border-color: var(--color-selection) !important;
  color: white !important;
  box-shadow: -5px 0 0 var(--color-selection), 5px 0 0 var(--color-selection) !important;
}

/* --- Wechseltage (Diagonal geteilte Farben) --- */
.status-split {
  position: relative;
  overflow: hidden;
  background-color: var(--color-curr) !important;
  z-index: 1;
}

.status-split::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--color-prev);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: -1;
  pointer-events: none;
}

/* Hover-Effekt für Wechseltage */
.status-split:hover:not(.not-allowed):not(.flatpickr-disabled)::after {
  background-color: var(--color-orange) !important;
  clip-path: none;
}

/* Versteckt den Split-Effekt, wenn der Tag ausgewählt ist */
.flatpickr-day.selected::after,
.flatpickr-day.startRange::after,
.flatpickr-day.endRange::after,
.flatpickr-day.inRange::after {
  display: none !important;
}

/* --- Sperr-Logik & X-Symbol --- */
.flatpickr-day.flatpickr-disabled,
.not-allowed {
  cursor: not-allowed !important;
  pointer-events: all !important;
}

.not-allowed:hover::before,
.flatpickr-disabled:hover::before {
  content: "✕" !important;
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: var(--text-red) !important;
  background-color: #e9ecef !important;
  z-index: 10 !important;
}

.not-allowed:hover,
.flatpickr-disabled:hover { color: transparent !important; }

.flatpickr-day:hover:not(.not-allowed):not(.flatpickr-disabled) {
  background: var(--color-orange) !important;
  color: white !important;
}


/* --- ABSTAND ZWISCHEN DEN Wochentagen --- */
span.flatpickr-weekday {
  max-width: 44px;
  margin: 0;
  padding: 0;
}

.flatpickr-weekday {
  background: transparent !important;
  margin: 0 !important;
}


/* --- ABSTAND ZWISCHEN DEN MONATEN --- */
.flatpickr-months {
  display: flex !important;
  justify-content: space-around;
  gap: 40px;
}

.flatpickr-month {
  flex: 1;
  text-align: center;
}

.flatpickr-calendar.multiMonth .flatpickr-days {
  display: flex !important;
  flex-direction: row;
  justify-content: center;
  gap: 40px;
  width: auto !important;
}

.dayContainer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  width: 308px !important; /* Standardbreite für 7 Tage à 44px */
  min-width: 308px !important;
  max-width: 308px !important;
  padding: 0 !important;
}

.flatpickr-calendar.multiMonth {
  width: 710px !important;
}

/* Erweitere dein Grundstyling für die Tage */
.flatpickr-day {
  /* ... deine bestehenden Regeln ... */
  display: flex;
  align-items: center;
  justify-content: center;

  /* WICHTIG: Erlaube dem Element nicht zu schrumpfen */
  flex-shrink: 0 !important;
}

/* Stelle sicher, dass "leere" Tage am Monatsanfang mitgezählt werden */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  display: flex !important; /* Falls sie durch ein anderes Script auf display: none gesetzt wurden */
  visibility: hidden;      /* Sie sollen Platz einnehmen, aber unsichtbar sein */
}

/* Korrektur für den Day-Container */
.dayContainer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  width: 308px !important;
  min-width: 308px !important;
  max-width: 308px !important;
  /* Entferne eventuelle Gaps, da wir 14.2857% (1/7) nutzen */
  gap: 0 !important;
}


/* --- Legende --- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 25px;
  padding: 15px;
  font-size: 13px;
  background: #fafafa;
  border-radius: var(--radius-sm);
  border: 1px solid #eee;
  color: #000;
}

.legend-item { display: flex; align-items: center; gap: 8px; line-height: 17px; }
.box { width: 18px; height: 18px; border: 1px solid; border-radius: 3px; }

@media (min-width: 768px) {
  .flatpickr-rContainer {
    margin-left: calc((100% - 660px)/2)
  }

  .flatpickr-weekdaycontainer:first-child{
    margin-right: 44px;
  }

}