/* Calendar container: rounded with soft shadow */
.flatpickr-calendar {
    border-radius: 12px;
    border: 1px solid var(--primary);
    font-size: 13px;
}

/* Header spacing a bit tighter */
.flatpickr-months .flatpickr-month {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

/* Hover effect */
.flatpickr-day:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: transparent;
}

/* Today */
.flatpickr-day.today:not(.selected) {
    border-color: var(--primary);
    color: #111827;
}

/* Input focus */
.form-control.date-picker-input:focus {
    border-color: var(--primary);
}

/* Remove Flatpickr arrow completely */
.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none !important;
}


/* ================================================
   DARK MODE — Flatpickr Overrides
   ================================================ */
html[data-color^="dark-"] .flatpickr-calendar {
    background: var(--foreground, #1d1d1d);
    border: 1px solid rgba(var(--separator-light-rgb, 46, 46, 46), 1);
    color: var(--light-text, #f0f0f0);
}

/* Month header */
html[data-color^="dark-"] .flatpickr-months .flatpickr-month {
    color: var(--light-text, #f0f0f0);
}

/* Month navigation arrows */
html[data-color^="dark-"] .flatpickr-months .flatpickr-prev-month svg,
html[data-color^="dark-"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--light-text, #f0f0f0);
}

/* Weekday labels */
html[data-color^="dark-"] .flatpickr-weekdays span {
    color: var(--muted, #727272);
}

/* Days */
html[data-color^="dark-"] .flatpickr-day {
    color: var(--light-text, #f0f0f0);
    background: var(--foreground, #1d1d1d);
    border-color: transparent;
}

/* Hovered day */
html[data-color^="dark-"] .flatpickr-day:hover {
    background: var(--background-light, #292929);
    color: var(--primary);
}

/* Selected day */
html[data-color^="dark-"] .flatpickr-day.selected,
html[data-color^="dark-"] .flatpickr-day.startRange,
html[data-color^="dark-"] .flatpickr-day.endRange,
html[data-color^="dark-"] .flatpickr-day.selected.inRange,
html[data-color^="dark-"] .flatpickr-day.selected:focus,
html[data-color^="dark-"] .flatpickr-day.selected:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

/* Today (not selected) */
html[data-color^="dark-"] .flatpickr-day.today:not(.selected) {
    border-color: var(--primary);
    color: var(--light-text, #f0f0f0);
}

/* Input for dark mode: consistent with your input colors */
html[data-color^="dark-"] .form-control.date-picker-input {
    background: var(--foreground, #1d1d1d);
    color: var(--light-text, #f0f0f0);
    border-color: rgba(var(--separator-light-rgb, 46, 46, 46), 1);
}

html[data-color^="dark-"] .form-control.date-picker-input:focus {
    border-color: var(--primary);
}