/* ---------- Brand colors (tweak as needed) ---------- */
:root {
    --sb-purple: #5C2D91; /* main purple */
    --sb-purple-hover: #7A45C0; /* lighter hover */
    --sb-text-dark: #333333;
}

/* ---------- Calendar header bar ---------- */
.flatpickr-months .flatpickr-month {
    background-color: var(--sb-purple) !important;
    color: #fff !important;
    border-top-left-radius: 10px; /* optional: match your card rounding */
    border-top-right-radius: 10px; /* optional */
}

/* Month name + year input (text inside header) */
.flatpickr-current-month .cur-month,
.flatpickr-current-month .numInputWrapper .numInput {
    color: #fff !important;
}

/* Header arrows → white on purple */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #fff !important; /* some UAs read color */
}

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        fill: #fff !important; /* others read svg fill */
    }

/* ---------- Month dropdown (better contrast) ---------- */
/* The <select> itself in the header */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    color: #fff; /* visible against purple header */
    border: none;
}

/* Options in the dropdown list (varies by browser support) */
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    color: var(--sb-text-dark);
    background: #fff;
}

    .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month.selected,
    .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:checked {
        background: var(--sb-purple);
        color: #fff;
    }

    .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:disabled {
        color: #bdbdbd;
    }

/* ---------- Days grid ---------- */
/* Selected day (and range endpoints) in purple */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
    background-color: var(--sb-purple) !important;
    border-color: var(--sb-purple) !important;
    color: #fff !important;
}

/* Hovered day gets lighter purple */
.flatpickr-day:hover,
.flatpickr-day:focus {
    background-color: var(--sb-purple-hover) !important;
    color: #fff !important;
}

/* Today ring in purple (when not selected) */
.flatpickr-day.today:not(.selected) {
    border-color: var(--sb-purple) !important;
    color: var(--sb-purple) !important;
}

/* In-range background (for range mode) */
.flatpickr-day.inRange {
    background: rgba(92, 45, 145, 0.12) !important; /* subtle purple tint */
    border-color: transparent !important;
}

/* Weekday header text (Su, Mo, …) for contrast */
.flatpickr-weekday {
    color: var(--sb-text-dark) !important;
    font-weight: 600;
}

/* ---------- Popup container (subtle card styling, optional) ---------- */
.flatpickr-calendar {
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 10px;
}

/* Ensure the body panel stays white behind days & dropdown */
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
    background: #fff;
}

/* ---------- Input group button (if you use a calendar button) ---------- */
.input-group #dobPicker .btn,
#dobPicker .btn {
    border-color: var(--sb-purple);
}

#dobPicker .btn:hover {
    background: var(--sb-purple);
    color: #fff;
}

/* If you use Bootstrap Icons inside the button */
#dobPicker .btn .bi {
    color: var(--sb-purple);
}

#dobPicker .btn:hover .bi {
    color: #fff;
}

/* Year selector up/down arrows → white */
.flatpickr-current-month .numInputWrapper span.arrowUp svg,
.flatpickr-current-month .numInputWrapper span.arrowDown svg {
    fill: #fff !important;
}

/* Optional: change hover color for arrows */
.flatpickr-current-month .numInputWrapper span.arrowUp:hover svg,
.flatpickr-current-month .numInputWrapper span.arrowDown:hover svg {
    fill: #ddd !important;
}

/* Force year up/down arrows in header to be white */
.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-bottom-color: #fff !important; /* for arrowUp */
    border-top-color: #fff !important; /* for arrowDown */
}

/* Specifically set each */
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: #fff !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: #fff !important;
}