/* Bound native fallback controls too, including Safari's intrinsic date width. */
input[type="date"] { display: block; min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
input[type="date"]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
.date-picker { position: relative; display: block; width: 100%; min-width: 0; max-width: 100%; }
.date-picker > input.date-picker-native { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; }
.date-picker > .date-picker-trigger { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 100%; min-width: 0; min-height: var(--field-height, 52px); padding: 12px; border: 1px solid var(--control-border); border-radius: 8px; background: #dbe0d6; color: var(--text-link); font: inherit; font-size: var(--text-body); text-align: left; cursor: pointer; }
.date-picker-trigger img { flex: 0 0 22px; }
.date-picker-value { min-width: 0; overflow-wrap: anywhere; }
.date-picker > .date-picker-trigger:hover:enabled { background: #d1dacb; border-color: #345744; }
.date-picker > .date-picker-trigger[aria-invalid="true"] { border-color: var(--text-danger); box-shadow: inset 0 0 0 1px var(--text-danger); }
.date-picker > .date-picker-trigger:disabled { opacity: .6; cursor: not-allowed; }
.date-picker-is-open { overflow: hidden; }
.date-picker-dialog { width: min(380px, calc(100% - 24px)); max-width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 16px; border: 1px solid var(--control-border); border-radius: 12px; color: var(--text-primary); background: #e7e8e5; overflow: auto; overscroll-behavior: contain; }
.date-picker-dialog::backdrop { background: rgb(21 35 27 / 40%); }
.date-picker-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.date-picker-header h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--text-heading-3); }
/* Today and Clear date are shared secondary buttons. The close button is a quiet icon button. */
.date-picker-dialog .date-picker-close { display: grid; place-items: center; flex: 0 0 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--control-radius); background: transparent; color: var(--text-link); cursor: pointer; }
.date-picker-dialog .date-picker-close:hover { background: var(--button-secondary); }
.date-picker-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #c4cdc4; }
.date-picker-calendar > input { display: none; }
.date-picker-dialog .flatpickr-calendar { width: 100%; background: transparent; border: 0; box-shadow: none; font: inherit; font-size: var(--text-body); }
.date-picker-dialog .flatpickr-calendar.inline { top: 0; }
.date-picker-dialog .flatpickr-rContainer, .date-picker-dialog .flatpickr-days, .date-picker-dialog .dayContainer { width: 100%; min-width: 0; max-width: 100%; }
.date-picker-dialog .flatpickr-innerContainer { overflow: visible; }
.date-picker-dialog .dayContainer { padding: 0; justify-content: flex-start; }
.date-picker-dialog .flatpickr-day { display: flex; align-items: center; justify-content: center; flex: 0 0 calc(100% / 7); max-width: none; height: 44px; line-height: 1; margin: 0; border-radius: 8px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.date-picker-dialog .flatpickr-day:is(.prevMonthDay, .nextMonthDay) { color: var(--text-secondary); }
.date-picker-dialog .flatpickr-day.today { border-color: #345744; }
/* Hover and keyboard focus share the soft green fill and keep the dark text. Flatpickr would give a focused day a grey
   fill, and today a blue-grey fill with white text (2.7:1). Today keeps its dark edge in both states. */
.date-picker-dialog .flatpickr-day:is(:hover, :focus):not(.flatpickr-disabled, .selected) { background: #d1dacb; border-color: #d1dacb; color: var(--text-primary); }
.date-picker-dialog .flatpickr-day.today:is(:hover, :focus):not(.selected) { border-color: #345744; }
.date-picker-dialog .flatpickr-day.selected, .date-picker-dialog .flatpickr-day.selected:hover { background: #345744; border-color: #345744; color: #fff; }
.date-picker-dialog .flatpickr-day.flatpickr-disabled { color: #798477; cursor: not-allowed; }
.date-picker-dialog .flatpickr-weekdays { height: 36px; }
.date-picker-dialog span.flatpickr-weekday { color: var(--text-secondary); font-size: var(--text-caption); font-weight: var(--weight-semibold); }
.date-picker-dialog .flatpickr-months { position: relative; margin-bottom: 4px; }
.date-picker-dialog .flatpickr-months .flatpickr-month { height: 52px; overflow: visible; }
.date-picker-dialog .flatpickr-current-month { display: flex; align-items: center; justify-content: center; gap: 4px; left: 44px; width: calc(100% - 88px); height: 52px; padding: 4px 0; font-size: var(--text-body); }
.date-picker-dialog .flatpickr-current-month .flatpickr-monthDropdown-months { flex: 1 1 auto; min-width: 0; max-width: 100%; height: 44px; min-height: 44px; padding: 8px 20px 8px 4px; margin: 0; background-position: right 2px center; border-radius: 4px; font: inherit; font-weight: var(--weight-semibold); }
.date-picker-dialog .numInputWrapper { flex: 0 0 4.5em; width: 4.5em; }
.date-picker-dialog .flatpickr-current-month input.cur-year { width: 100%; height: 44px; min-height: 44px; padding: 8px 2px; font: inherit; font-weight: var(--weight-semibold); }
.date-picker-dialog .numInputWrapper span { display: none; }
.date-picker-dialog .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month) { display: grid; place-items: center; top: 4px; width: 44px; height: 44px; padding: 12px; border-radius: var(--control-radius); color: var(--text-link); fill: currentColor; }
.date-picker-dialog .flatpickr-months .flatpickr-disabled { display: none; }
.date-picker-dialog .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month):hover { background: var(--button-secondary); }
.date-picker-dialog .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month):hover svg { fill: currentColor; }
.date-picker-dialog :is(.flatpickr-day, .flatpickr-prev-month, .flatpickr-next-month):focus-visible { outline: 3px solid #4f6d56; outline-offset: -3px; }
@media (max-width: 380px) { .date-picker-dialog { padding: 12px 8px; } }
@media (forced-colors: active) { .date-picker-dialog .flatpickr-day.selected { background: Highlight; color: HighlightText; } }