/* ==========================================================================
   BUCHUNGSKALENDER 2026 - COMPACT INPUT, PERFECT ROUNDING & HEADER FIX
   ========================================================================== */

:root {
  /* Farbpalette: Forest & Amber Glow aus root.css */
  --bg-color: #121417;
  --surface-color: #1E2126;
  --text-main: #E2E8F0;
  --text-muted: #94A3B8;
  --accent-green: #769371;
  --accent-orange: #D97706;
  --accent-orange-hover: #b46205;
  --danger: #934a4a;
  
  /* Stil-Variablen */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --transition: all 0.2s ease-in-out;
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.4);

  /* Kalender-Statusfarben (Originale Pastelltöne aus kalender2026_alt.css) */
  --color-green: #d4edda;
  --color-yellow: #fff3cd;
  --color-blue: #e0d1be; 
  --color-red: #f8d7da;
  --text-red: #721c24;

  /* Auswahl-Farben (Kräftiges, deckendes Amber/Orange) */
  --color-selection: var(--accent-orange);
  --color-selection-dark: var(--accent-orange-hover); 
  --color-orange: var(--accent-orange);
}

/* ==========================================
   1. CONTAINER & FRAMEWORK-STYLING
   ========================================== */

.container {
  max-width: 900px;
  margin: auto;
  padding: 30px;
  background: var(--surface-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dropdown-Kalender (Dunkel) */
.flatpickr-calendar {
  background: var(--surface-color) !important; 
  border: none !important;
  outline: none !important;
  box-shadow: var(--shadow) !important;
  color: var(--text-main) !important;
}


/* ==========================================
   2. REIN WEISSE DATUMSBOX (ORIGINALMAẞE)
   ========================================== */

input#booking-calendar {
  width: 221px !important;             /* Kompakte Breite aus kalender2026_alt.css */
  padding: 7px !important;              /* Schlankes Padding aus kalender2026_alt.css */
  margin-bottom: 20px;
  margin-right: 10px;
  font-size: 14px !important;           /* Originalgröße aus kalender2026_alt.css */
  background: #ffffff !important;       /* Weißer Hintergrund */
  color: #333333 !important;           /* Dunkler Text */
  border: 1px solid #ddd !important;   /* Feiner Rahmen */
  border-radius: 3px !important;        /* Kleiner Eckenradius */
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--transition);
}

input#booking-calendar:focus {
  border-color: var(--accent-orange) !important;
  outline: none;
}

#booking-calendar::placeholder { color: #666666; opacity: 1; }


/* ==========================================
   3. STRUKTUR & BASIS-STATUSFARBEN
   ========================================== */

.flatpickr-day {
  position: relative !important;
  height: 44px !important;    
  line-height: 44px !important;
  flex-basis: 14.2857% !important; 
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important; 
  box-sizing: border-box !important; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
}

/* Unsichtbare Puffertage am Monatsanfang/-ende */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  display: flex !important;
  visibility: hidden;      
}

/* Zuweisung der Basis-Statusfarben */
.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; }

/* Standard-Textfarbe auf den Pastelltönen (Schwarz für optimale Lesbarkeit) */
.flatpickr-day { color: #000000 !important; }

/* Monat/Wochentag-Header im Picker (Hell) */
.flatpickr-month, .flatpickr-current-month, .flatpickr-weekday { 
  color: var(--text-main) !important; 
  fill: var(--text-main) !important; 
}
span.flatpickr-weekday { max-width: 44px; margin: 0; padding: 0; }
.flatpickr-weekday { background: transparent !important; margin: 0 !important; }


/* ==========================================
   4. SELECTION-FIX: STATUSFARBE UNTER RUNDUNG SICHBAR
   ========================================== */

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  border-color: transparent !important;
  color: #ffffff !important; /* Weißer Text auf der Auswahl */
  z-index: 5;
  isolation: isolate; /* Erzeugt einen Stacking-Context für das ::before Layering */
}

/* Die orangefarbene Decke schichtet sich über die Statusfarbe, lässt aber gerundete Kanten frei */
.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; /* Deckendes Dunkelorange */
  z-index: -1; 
}

/* Eckenrundung der Auswahl-Ebene */
.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; }

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


/* ==========================================
   5. WECHSELTAGE (SPLIT-EFFEKT)
   ========================================== */

.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: -2 !important; 
  pointer-events: none;
  transform: scale(1.005); 
  backface-visibility: hidden;
}

/* Wenn der Wechseltag inRange ist, überdecken wir den Split komplett */
.flatpickr-day.inRange::after {
  display: none !important;
}


/* ==========================================
   6. INAKTIVE TAGE & SPERRLOGIK
   ========================================== */

/* Abgelaufene/leere Tage leicht im Hintergrund verblassen lassen */
.flatpickr-day.flatpickr-disabled:not(.status-0):not(.status-1):not(.status-2):not(.status-neg1):not(.status-split),
.not-allowed:not(.status-0):not(.status-1):not(.status-2):not(.status-neg1):not(.status-split) {
  color: rgba(255, 255, 255, 0.15) !important; 
}

/* Gebuchte inaktive Tage dezent abdunkeln */
.status-0.flatpickr-disabled, .status-0.not-allowed,
.status-1.flatpickr-disabled, .status-1.not-allowed,
.status-2.flatpickr-disabled, .status-2.not-allowed,
.status-neg1.flatpickr-disabled, .status-neg1.not-allowed,
.status-split.flatpickr-disabled, .status-split.not-allowed {
  color: rgba(0, 0, 0, 0.3) !important; 
}

.flatpickr-day.flatpickr-disabled, .not-allowed { cursor: not-allowed !important; pointer-events: all !important; }

/* Sperr-X Hover-Indikator */
.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: #ffffff !important;
  background-color: var(--danger) !important; z-index: 10 !important;
}
.not-allowed:hover, .flatpickr-disabled:hover { color: transparent !important; }

/* Normaler Hover-Effekt auf freien Tagen */
.flatpickr-day:hover:not(.not-allowed):not(.flatpickr-disabled) {
  background: var(--color-orange) !important;
  color: #ffffff !important;
}
.status-split:hover:not(.not-allowed):not(.flatpickr-disabled)::after {
  background-color: var(--color-orange) !important; clip-path: none;
}


/* ==========================================
   7. PFEILE & KALENDER-POSITIONIERUNG (FIXED)
   ========================================== */

.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
  color: var(--text-main) !important;
  fill: var(--text-main) !important;
  transition: var(--transition) !important;
}
.flatpickr-months .flatpickr-prev-month:hover, 
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--accent-orange) !important;
  fill: var(--accent-orange) !important;
}

.flatpickr-months { display: flex !important; justify-content: space-around; gap: 40px; }

/* --- FIX FÜR ABGESCHNITTENE MONATS-BUCHSTABEN --- */
.flatpickr-month { 
  flex: 1; 
  text-align: center; 
  overflow: visible !important; /* Erlaubt geschwungenen Buchstaben den Ausbruch */
}

.flatpickr-current-month { 
  overflow: visible !important; 
  width: 100% !important;
  left: 0 !important;
  padding: 0 !important;
}

.flatpickr-monthName-wrapper {
  overflow: visible !important;
  display: inline-block !important;
}
/* ------------------------------------------------ */

.flatpickr-calendar.multiMonth .flatpickr-days { display: flex !important; flex-direction: row; justify-content: center; gap: 40px; width: auto !important; }
.flatpickr-days > div:not(:first-child) { border-left: none !important; }

.dayContainer {
  display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important;
  width: 308px !important; min-width: 308px !important; max-width: 308px !important;
  padding: 0 !important; gap: 0 !important; border: none !important; box-shadow: none !important;
}
.flatpickr-calendar.multiMonth { width: 710px !important; }


/* ==========================================
   8. REIN WEISSE LEGENDE (EXAKT WIE DAVOR)
   ========================================== */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 25px;
  padding: 15px;
  font-size: 13px;
  background: #ffffff !important;      /* Rein weißer Hintergrund */
  color: #333333 !important;          /* Dunkler Text */
  border-radius: var(--radius-sm);
  border: 1px solid #eee !important;  /* Rahmen aus kalender2026_alt.css */
}

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


/* ==========================================
   9. MEDIA QUERIES & MOBILE FIXES
   ========================================== */

@media (min-width: 768px) {
  .flatpickr-rContainer { margin-left: calc((100% - 660px) / 2); }
  .flatpickr-weekdaycontainer:first-child { margin-right: 44px; }
}

@media screen and (max-width: 360px) {
    .flatpickr-months { gap: 0 !important; }
    .dayContainer { width: 280px !important; min-width: 280px !important; max-width: 280px !important; }
    .flatpickr-day { height: 40px !important; line-height: 40px !important; flex-basis: 14.2857% !important; }
    .flatpickr-calendar { width: 280px !important; }
    .flatpickr-prev-month, .flatpickr-next-month { display: flex !important; padding: 10px !important; }
}