/* Custom Flatpickr theme overrides using theme CSS variables */ /* This file overrides default Flatpickr styles to integrate with the theme system */ /* Input field normal state - match other inputs on the page */ .flatpickr-input { border-color: rgb(205, 207, 208) !important; } /* Input field focus state - use brand color with 1px ring */ .flatpickr-input:focus { outline: none !important; border-color: rgb(var(--color-primary-700)) !important; } /* Hover states for regular days */ .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { background: rgb(var(--color-primary-200)) !important; border-color: rgb(var(--color-primary-700)) !important; color: #000 !important; } /* Today's date border */ .flatpickr-day.today { border-color: rgb(var(--color-primary-900)) !important; } /* Today's date hover state */ .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: rgb(var(--color-primary-900)) !important; background: rgb(var(--color-primary-700)) !important; color: #fff !important; } /* Selected date styles */ .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: rgb(var(--color-primary-500)) !important; border-color: rgb(var(--color-primary-500)) !important; color: #fff !important; } /* Range shadows */ .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 rgb(var(--color-primary-500)) !important; } .flatpickr-day.week.selected { box-shadow: -5px 0 0 rgb(var(--color-primary-500)), 5px 0 0 rgb(var(--color-primary-500)) !important; } .flatpickr-day.inRange { box-shadow: -5px 0 0 rgb(var(--color-primary-200)), 5px 0 0 rgb(var(--color-primary-200)) !important; }