/* Custom Flatpickr Theme - Pure Black with Green Accents */

/* Calendar container - override dark theme grey background */
.flatpickr-calendar {
    background: #000000 !important;
    border: 1px solid rgba(0, 255, 153, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
}

.flatpickr-calendar.open,
.flatpickr-calendar.inline {
    background: #000000 !important;
}

/* Override arrow backgrounds */
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #000000 !important;
}

.flatpickr-calendar.arrowBottom:after {
    border-top-color: #000000 !important;
}

/* Month navigation */
.flatpickr-months {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 255, 153, 0.2) !important;
    padding: 8px 0 !important;
}

.flatpickr-month {
    background: transparent !important;
    color: #FFFFFF !important;
}

.flatpickr-current-month {
    color: #FFFFFF !important;
}

/* Remove borders from month dropdown */
.flatpickr-monthDropdown-months {
    background: transparent !important;
    color: #FFFFFF !important;
    border: none !important;
    outline: none !important;
}

.flatpickr-monthDropdown-months option {
    background: #000000 !important;
    color: #FFFFFF !important;
}

/* Year input wrapper - remove border and fix cutoff */
.numInputWrapper {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
}

.numInputWrapper input {
    background: transparent !important;
    color: #FFFFFF !important;
    border: none !important;
}

.numInputWrapper:hover {
    background: transparent !important;
}

.numInputWrapper span {
    border: none !important;
    background: transparent !important;
}

.numInputWrapper span:after {
    border: none !important;
}

/* Navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #00ff99 !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    fill: #FFFFFF !important;
}

/* Weekday labels */
.flatpickr-weekdays {
    background: transparent !important;
}

span.flatpickr-weekday {
    color: #00ff99 !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Days container */
.flatpickr-days {
    background: transparent !important;
}

.dayContainer {
    background: transparent !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    background: transparent !important;
}

/* Individual day cells */
.flatpickr-day {
    color: #FFFFFF !important;
    border: none !important;
    background: transparent !important;
}

.flatpickr-day:hover {
    background: rgba(0, 255, 153, 0.2) !important;
    border-color: rgba(0, 255, 153, 0.4) !important;
    color: #FFFFFF !important;
}

/* Current day (today) */
.flatpickr-day.today {
    background: rgba(0, 255, 153, 0.15) !important;
    border: 1px solid rgba(0, 255, 153, 0.5) !important;
    color: #00ff99 !important;
}

.flatpickr-day.today:hover {
    background: rgba(0, 255, 153, 0.3) !important;
    border-color: #00ff99 !important;
    color: #FFFFFF !important;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.endRange {
    background: #00ff99 !important;
    border-color: #00ff99 !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Days in other months */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #64748b !important;
    background: transparent !important;
}

/* Disabled days */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #475569 !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

/* Time picker (if used) */
.flatpickr-time {
    background: transparent !important;
    border-top: 1px solid rgba(0, 255, 153, 0.2) !important;
}

.flatpickr-time input {
    background: transparent !important;
    color: #FFFFFF !important;
}

.flatpickr-time .numInputWrapper {
    background: transparent !important;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: #00ff99 !important;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: #00ff99 !important;
}

/* Clear and Today buttons */
.flatpickr-calendar .flatpickr-innerContainer + .flatpickr-footer {
    background: transparent !important;
    border-top: 1px solid rgba(0, 255, 153, 0.2) !important;
}

/* Custom buttons styling */
.flatpickr-calendar .flatpickr-button {
    background: rgba(0, 255, 153, 0.1) !important;
    color: #00ff99 !important;
    border: 1px solid rgba(0, 255, 153, 0.3) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    margin: 8px 4px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.flatpickr-calendar .flatpickr-button:hover {
    background: #00ff99 !important;
    color: #000000 !important;
    border-color: #00ff99 !important;
}

/* Input field when flatpickr is active */
.flatpickr-input:focus {
    border-color: #00ff99 !important;
    box-shadow: 0 0 0 2px rgba(0, 255, 153, 0.2) !important;
}

/* Fix inner container to prevent clipping */
.flatpickr-innerContainer {
    overflow: visible !important;
    background: transparent !important;
}

/* Ensure proper spacing and no clipping */
.flatpickr-rContainer {
    overflow: visible !important;
    background: transparent !important;
}

/* Override any remaining grey backgrounds */
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    background: transparent !important;
}