/* ================================
   Flatpickr Custom Overlay Styling
   ================================ */

/* Variablen zur einfachen Anpassung */
:root {
    --fp-bg: #ffffff;
    /* Hintergrundfarbe des Kalenders */
    --fp-border: #000000;
    /* Rahmenfarbe */
    --fp-border-radius: 0.125em;
    /* Eckenradius */
    --fp-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Schatten */
    --fp-text-color: #000000;
    /* Standard Textfarbe */
    --fp-accent: #000000;
    /* Akzentfarbe (heutiger Tag, Hover, etc.) */
    --fp-hover-bg: #FFFFFF;
    /* Hover Hintergrundfarbe */
    --fp-weekday-color: #6b7280;
    /* Wochentagsfarbe */
    --fp-disabled-color: #a1a1aa;
    /* Deaktivierte Tage */
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    display: inline-block;
}


/******************************************************************************
* Basic Overrides
*******************************************************************************/
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange, 
.flatpickr-day.selected.inRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.endRange.inRange, 
.flatpickr-day.selected:focus, 
.flatpickr-day.startRange:focus, 
.flatpickr-day.endRange:focus, 
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover, 
.flatpickr-day.selected.prevMonthDay, 
.flatpickr-day.startRange.prevMonthDay, 
.flatpickr-day.endRange.prevMonthDay, 
.flatpickr-day.selected.nextMonthDay, 
.flatpickr-day.startRange.nextMonthDay, 
.flatpickr-day.endRange.nextMonthDay {
    background: var(--fp-accent);
    border-color: var(--fp-border);
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--fp-border);
}


/******************************************************************************
* Inline - Date Range Calendar
*******************************************************************************/
/* Layout für die Anzeige-Boxen */
.selected-dates-display {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid currentColor;
    padding: var(--typo-gap);
    margin-bottom: var(--typo-gap);
}
.date-box {
    text-align: center;
}
.date-box .label {
    display: block;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.date-box .date-value {
    font-size: 1.125em;
}
.date-divider {
    font-size: 1.5em;
}
/* Kalender-Zentrierung */
#inline-calendar-container {
    display: flex;
    justify-content: center;
}
/* Flatpickr Styling Optimierung */
.flatpickr-calendar.inline {
    border: none;
    box-shadow: none;
}

#date_range_input {
      height: 0; opacity: 0; visibility: hidden;
      padding: 0; margin: 0; border: none;
}


.flatpickr-calendar.inline,
.flatpickr-calendar.inline .flatpickr-days,
.flatpickr-calendar.inline .dayContainer {
      width: 100%;
      max-width: none;
}
.flatpickr-calendar.inline .flatpickr-day {
      max-width: none;
}

.remove-date-btn {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Standardmäßig unsichtbar */
    pointer-events: none;
}

.remove-date-btn svg {
    display: block;
}



/******************************************************************************
* Highlight
*******************************************************************************/
.typo-event-day {
    background-color: var(--typo-color-grey-light);
}
/*.flatpickr-day.typo-event-day::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    margin: 1px auto 0;
}
*/