/* The vendor stylesheet pins the picker to 16.075rem with !important under .light-style / .dark-style, which cut the
   weekday row and the Sat column off. `html[class]` outranks those selectors, so these sizes win. */
html[class] .flatpickr-calendar { width: min(408px, calc(100vw - 16px)) !important; }
html[class] .flatpickr-calendar .flatpickr-days { width: 100% !important; background: transparent; }
html[class] .flatpickr-calendar.open { font-weight: 500; }

/* flatpickr, restyled to match the back-office (loaded after the vendor flatpickr.css; see date-format.js). */
.flatpickr-calendar {
    box-sizing: border-box; width: min(408px, calc(100vw - 16px)); padding: 14px 16px 14px; border: 1px solid #dfe3f7; border-radius: 18px;
    box-shadow: 0 24px 48px -18px rgba(30, 36, 110, .45), 0 2px 6px rgba(30, 36, 110, .08); font-family: var(--bs-font-sans-serif, 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); background: #fff;
}
.flatpickr-calendar *, .flatpickr-calendar select, .flatpickr-calendar input { font-family: inherit !important; }
.flatpickr-calendar.open { z-index: 2100 !important; }  /* above Bootstrap modals (1055) and their backdrop */
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }

/* header: [<]  October ▾  2026  [>] on one row */
.flatpickr-months { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; height: 48px; padding: 0 0 8px; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    position: static !important; flex: none; width: 40px; height: 40px; padding: 0 !important; display: flex !important; align-items: center; justify-content: center;
    border: 0 !important; border-radius: 12px !important; background: #eef0ff; color: #4f46e5; transition: background .12s;
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: #dfe3ff; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; border: 0 !important; border-radius: 0 !important; padding: 0; fill: #4f46e5 !important; }
.flatpickr-months .flatpickr-month { flex: 1; min-width: 0; height: 40px; overflow: visible; color: #1b1f4a; fill: #1b1f4a; }
.flatpickr-current-month { position: static !important; left: auto !important; width: 100% !important; height: 40px; padding: 0 !important; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 1.1rem; font-weight: 800; line-height: 1; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
    height: 36px; width: auto; margin: 0; padding: 0 8px; border: 0; border-radius: 10px; background-color: transparent; color: #1b1f4a; font-weight: 800; font-size: 1.1rem; cursor: pointer; font-family: inherit !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background-color: #eef0ff; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: #1b1f4a; font-weight: 600; background: #fff; }
.flatpickr-current-month .numInputWrapper { width: 74px; height: 36px; border-radius: 10px; }
.flatpickr-current-month .numInputWrapper:hover { background: #eef0ff; }
.flatpickr-current-month input.cur-year { height: 36px; padding: 0 0 0 8px; color: #1b1f4a; font-weight: 800; font-size: 1.1rem; }
.flatpickr-current-month .numInputWrapper span { display: none; }

/* weekday row + day grid fill the card exactly (the vendor fixed widths would overflow it) */
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer, .flatpickr-weekdays, .flatpickr-weekdaycontainer { width: 100% !important; min-width: 0 !important; max-width: none !important; }
.flatpickr-innerContainer { display: block; padding: 0; }
.flatpickr-weekdays { height: 36px; margin-top: 4px; }
.flatpickr-weekdaycontainer { display: flex; }
span.flatpickr-weekday { flex: 1; color: #5b6390; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dayContainer { padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.flatpickr-day {
    flex: 0 0 14.2857%; width: 14.2857%; max-width: 14.2857%; height: 40px; line-height: 40px; margin: 1px 0; border: 0; border-radius: 14px;
    color: #1b1f4a; font-weight: 700; font-size: 1.05rem; background: none;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: #e6e9ff; border: 0; color: #1b1f4a; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #a3aad0; font-weight: 600; }
.flatpickr-day.today { background: #eef0ff; box-shadow: inset 0 0 0 2px #4f46e5; color: #4f46e5; border: 0; }
.flatpickr-day.today:hover { background: #dfe3ff; color: #4f46e5; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
    background: linear-gradient(145deg, #7c83ff, #4f46e5) !important; color: #fff; border: 0; box-shadow: 0 10px 18px -8px rgba(79, 70, 229, .85);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #c9cde6; background: none; cursor: not-allowed; }
/* the visible field next to a flatpickr-managed date input */
input.flatpickr-input[readonly] { cursor: pointer; background-color: inherit; }

/* Dark theme (html.dark-style): same layout, dark surface and light ink */
html.dark-style .flatpickr-calendar { background: #1f2547; border-color: rgba(255, 255, 255, .14); box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .7); }
html.dark-style .flatpickr-months .flatpickr-prev-month, html.dark-style .flatpickr-months .flatpickr-next-month { background: rgba(255, 255, 255, .1); }
html.dark-style .flatpickr-months .flatpickr-prev-month:hover, html.dark-style .flatpickr-months .flatpickr-next-month:hover { background: rgba(255, 255, 255, .2); }
html.dark-style .flatpickr-months .flatpickr-prev-month svg, html.dark-style .flatpickr-months .flatpickr-next-month svg { fill: #b9c2ff !important; }
html.dark-style .flatpickr-months .flatpickr-month, html.dark-style .flatpickr-current-month .flatpickr-monthDropdown-months,
html.dark-style .flatpickr-current-month input.cur-year { color: #f1f3ff; }
html.dark-style .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #1f2547; color: #f1f3ff; }
html.dark-style .flatpickr-current-month .flatpickr-monthDropdown-months:hover, html.dark-style .flatpickr-current-month .numInputWrapper:hover { background-color: rgba(255, 255, 255, .1); }
html.dark-style span.flatpickr-weekday { color: #b9c2ff; }
html.dark-style .flatpickr-day { color: #f1f3ff; }
html.dark-style .flatpickr-day:hover, html.dark-style .flatpickr-day:focus { background: rgba(255, 255, 255, .14); color: #fff; }
html.dark-style .flatpickr-day.prevMonthDay, html.dark-style .flatpickr-day.nextMonthDay { color: rgba(185, 194, 255, .5); }
html.dark-style .flatpickr-day.today { background: rgba(124, 131, 255, .2); color: #c9ceff; box-shadow: inset 0 0 0 2px #8b97ff; }
html.dark-style .flatpickr-day.selected, html.dark-style .flatpickr-day.selected:hover { color: #fff; }