/* ===== Flatpickr — OND Design System Override ===== */

.flatpickr-calendar {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 32px rgba(var(--color-ink-rgb), 0.12), 0 2px 8px rgba(var(--color-ink-rgb), 0.06) !important;
    border: 1px solid rgba(var(--color-ink-rgb), 0.06) !important;
    font-family: inherit !important;
    padding: 4px !important;
    width: 280px !important;
}

.flatpickr-calendar.open {
    z-index: 10000 !important;
}

/* Months navigation */
.flatpickr-months {
    padding: 4px 4px 0 !important;
}

.flatpickr-months .flatpickr-month {
    height: 36px !important;
}

.flatpickr-current-month {
    font-size: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--color-ink) !important;
    padding-top: 8px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600 !important;
    font-size: var(--font-body) !important;
    color: var(--color-ink) !important;
    background: transparent !important;
    border: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding: 0 4px !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    font-size: var(--font-body) !important;
    color: var(--color-ink) !important;
}

/* Prev/Next arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    width: 32px !important;
    height: 32px !important;
    padding: 8px !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s !important;
    top: 6px !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: var(--color-subtle) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: var(--color-text-secondary) !important;
    width: 12px !important;
    height: 12px !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-ink) !important;
}

/* Weekday headers */
.flatpickr-weekdays {
    padding: 0 4px !important;
}

span.flatpickr-weekday {
    font-size: var(--font-caption) !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

/* Day cells */
.flatpickr-days {
    padding: 0 4px 4px !important;
}

.dayContainer {
    min-width: 260px !important;
    max-width: 260px !important;
}

.flatpickr-day {
    width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: var(--font-small) !important;
    font-weight: 500 !important;
    color: var(--color-ink) !important;
    border-radius: var(--radius-sm) !important;
    border: none !important;
    transition: background 0.12s, color 0.12s !important;
    margin: 1px !important;
}

.flatpickr-day:hover {
    background: var(--color-subtle) !important;
    border: none !important;
}

/* Today */
.flatpickr-day.today {
    background: var(--color-subtle) !important;
    color: var(--color-accent) !important;
    font-weight: 600 !important;
    border: none !important;
}

.flatpickr-day.today:hover {
    background: var(--color-border) !important;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-ink) 100%) !important;
    color: var(--color-surface) !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3) !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-hero) 100%) !important;
}

/* In range */
.flatpickr-day.inRange {
    background: var(--color-subtle) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--color-accent) !important;
}

/* Previous/next month days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--color-border) !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: var(--color-field) !important;
    color: var(--color-text-secondary) !important;
}

/* Disabled */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--color-border) !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

/* Alt input styling (the visible input) */
.flatpickr-input[readonly] {
    cursor: pointer !important;
}

input.flatpickr-input + input.form-control[readonly] {
    cursor: pointer !important;
}

/* Make the alt input match docs-search-input */
.docs-search-input.flatpickr-input ~ .form-control,
input[type="text"].flatpickr-alt-input {
    cursor: pointer;
}