/* The input stays in the form; the calendar floats independently of its width. */
.date-control { display: block; width: 100%; min-width: 0; position: relative; }
.date-control > input.date-display { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding-right: 44px; font-size: 16px; }
.date-picker-toggle { position: absolute; top: 4px; right: 4px; width: 38px; height: 38px; border: 0; border-radius: 9px; background: #f3f2ff; color: #3028ce; cursor: pointer; font-size: 24px; }
.date-picker-toggle:focus-visible { outline: 3px solid #879ff1; }
.date-picker-toggle:disabled { display: none; }
.flatpickr-calendar.date-calendar { position: fixed; z-index: 10000; width: 308px; max-width: calc(100vw - 16px); margin: 0; overflow: auto; overscroll-behavior: contain; box-shadow: 0 8px 30px #17203433; }
.date-calendar::before, .date-calendar::after { display: none; }
.date-calendar .flatpickr-innerContainer, .date-calendar .flatpickr-rContainer, .date-calendar .flatpickr-days, .date-calendar .dayContainer { width: 100%; min-width: 0; max-width: 100%; }
.date-calendar .flatpickr-months select { padding: 0 3px; width: auto; min-height: 0; height: auto; border: 0; box-shadow: none; background: transparent; font-size: 16px; }
.date-calendar .flatpickr-current-month { display: flex; align-items: center; justify-content: center; gap: 2px; left: 26px; width: calc(100% - 52px); height: 34px; padding: 0; }
.date-calendar .flatpickr-current-month select { flex: 1 1 auto; min-width: 0; max-width: 120px; }
.date-calendar .flatpickr-current-month .numInputWrapper { flex: 0 0 60px; width: 60px; }
.date-calendar .numInput { padding: 0 0 0 6px; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 16px; }
.date-calendar .flatpickr-time input { width: 100%; }
.date-calendar .flatpickr-day { font-weight: 500; }
.date-calendar .flatpickr-day.selected { background: #3028ce; border-color: #3028ce; }