/* Match Backpack's field styling */
.air-datepicker {
    --adp-font-family: inherit;
    --adp-font-size: 0.875rem;
    --adp-border-radius: var(--tblr-border-radius, 4px);
    --adp-cell-border-radius: var(--tblr-border-radius, 4px);
    --adp-accent-color: var(--tblr-primary, #4eb5e6);
    --adp-background-color: var(--tblr-body-bg, #fff);
    --adp-background-color-hover: var(--tblr-light, #f0f0f0);
    --adp-background-color-active: var(--tblr-gray-200, #eaeaea);
    --adp-color: var(--tblr-body-color, #4a4a4a);
    --adp-color-secondary: var(--tblr-secondary, #9c9c9c);
    --adp-border-color: var(--tblr-border-color, #dbdbdb);
    --adp-border-color-inner: var(--tblr-border-color, #efefef);
    --adp-day-name-color: var(--tblr-primary, #ff9a19);
    --adp-cell-background-color-selected: var(--tblr-primary, #5cc4ef);
    --adp-cell-background-color-selected-hover: color-mix(in srgb, var(--tblr-primary, #5cc4ef) 85%, #000);
    --adp-cell-background-color-in-range: color-mix(in srgb, var(--tblr-primary, #5cc4ef) 10%, transparent);
    --adp-cell-background-color-in-range-hover: color-mix(in srgb, var(--tblr-primary, #5cc4ef) 20%, transparent);
    --adp-btn-color: var(--tblr-primary, var(--adp-accent-color));
    --adp-btn-color-hover: var(--tblr-body-color, var(--adp-color));
    --adp-btn-background-color-hover: var(--tblr-light, var(--adp-background-color-hover));
    --adp-time-track-color: var(--tblr-border-color, #dedede);
    --adp-time-track-color-hover: var(--tblr-secondary, #b1b1b1);
    --adp-color-current-date: var(--tblr-primary, var(--adp-accent-color));
    --adp-background-color-in-range-focused: color-mix(in srgb, var(--tblr-primary, #5cc4ef) 20%, transparent);
    --adp-color-other-month: var(--tblr-gray-300, #dedede);
    --adp-color-disabled: var(--tblr-gray-400, #aeaeae);
    --adp-color-other-month-hover: var(--tblr-gray-400, #c5c5c5);
}

/* Pointer arrow — must match calendar background and border for the "arrow" illusion.
   The pointer is a rotated square, half-hidden behind the calendar body. */
.air-datepicker--pointer {
    --adp-pointer-background: var(--tblr-body-bg, #fff);
}
.air-datepicker--pointer::after {
    background: var(--tblr-body-bg, #fff) !important;
    border-color: var(--tblr-border-color, #dbdbdb) !important;
}

/* Inline mode border */
.air-datepicker.-inline- {
    border-color: var(--tblr-border-color, #dbdbdb);
}