/* Custom DatePicker Styles */
.react-datepicker {
    @apply border-0 shadow-2xl rounded-xl overflow-hidden;
    font-family: inherit;
}

.react-datepicker__header {
    @apply bg-gradient-to-r from-blue-600 to-blue-700 text-white border-0 rounded-t-xl;
}

.react-datepicker__current-month {
    @apply text-white font-semibold text-lg;
}

.react-datepicker__navigation {
    @apply top-3;
}

.react-datepicker__navigation--previous {
    @apply left-3 border-r-8 border-r-white;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
}

.react-datepicker__navigation--next {
    @apply right-3 border-l-8 border-l-white;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
}

.react-datepicker__month-container {
    @apply bg-white;
}

.react-datepicker__week {
    @apply flex;
}

.react-datepicker__day-names {
    @apply flex bg-gray-50 text-gray-600 font-medium text-sm;
}

.react-datepicker__day-name {
    @apply flex-1 text-center py-2;
}

.react-datepicker__day {
    @apply flex-1 text-center py-2 m-0 text-gray-700 hover:bg-blue-100 hover:text-blue-600 cursor-pointer rounded-lg mx-1 my-0.5 transition-colors;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
}

.react-datepicker__day--selected {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.react-datepicker__day--keyboard-selected {
    @apply bg-blue-100 text-blue-700;
}

.react-datepicker__day--today {
    @apply bg-blue-50 text-blue-600 font-semibold;
}

.react-datepicker__day--disabled {
    @apply text-red-400 bg-red-50 cursor-not-allowed line-through hover:bg-red-50 hover:text-red-400;
}

.react-datepicker__day--excluded {
    @apply text-red-400 bg-red-50 cursor-not-allowed line-through hover:bg-red-50 hover:text-red-400;
}

.react-datepicker__day--outside-month {
    @apply text-gray-300;
}

.react-datepicker__day--in-range {
    @apply bg-blue-200 text-blue-800;
}

.react-datepicker__day--range-start,
.react-datepicker__day--range-end {
    @apply bg-blue-600 text-white;
}

.react-datepicker__input-container input {
    @apply w-full;
}

.react-datepicker__triangle {
    display: none;
}

.react-datepicker-popper {
    @apply z-50;
}

.react-datepicker-wrapper {
    @apply w-full block;
}

.react-datepicker__input-container {
    @apply w-full block;
}

.react-datepicker__input-container input {
    @apply w-full block;
}