.flatpickr-confirm {
	height: 40px;
	max-height: 0px;
	visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background: rgba(0,0,0,0.06)
}

.flatpickr-confirm svg path {
	fill: inherit;
}

.flatpickr-confirm.darkTheme {
	color: white;
	fill: white;
}

.flatpickr-confirm.visible {
	max-height: 40px;
	visibility: visible
}

/* -------------------------------------------------------------------------
 * #604 polish — Arena skin for the flatpickr defer-commit pickers (MR 1)
 *
 * FIX 2 (UI Designer): the Confirm button is the SOLE commit trigger but
 * rendered as plain grey text. Restyle it to match Arena's primary button
 * (the orange used by `.modalActions .button.primary` and the `+ Add Contract`
 * / submit buttons — token #ff712b, hover #d35413). Scanned style.css first;
 * this mirrors that existing pattern rather than inventing a new one.
 *
 * FIX 3 (UI Designer): the selected day + active time field render in flatpickr
 * default blue (#569ff7 / grey #eee). Re-skin to Arena orange (#ff712b) so the
 * widget reads as part of Arena, not a default library.
 *
 * NOTE: the task brief named the orange token "#f47b20", but that token does
 * not exist anywhere in assets/css/ — Arena's actual primary orange is #ff712b
 * (32 uses, e.g. `input[type=submit]` and `.modalActions .button.primary`).
 * Per "scan existing styling patterns before writing new CSS", this uses the
 * real codebase token. Flagged in the MR description for Adam's visual sign-off.
 * ------------------------------------------------------------------------- */

/* FIX 2 — Confirm button reads as Arena's primary button.
 * Applies to confirmDate's injected button (date / datetime pickers) AND the
 * wrapper's hand-injected button for time-only pickers (initArenaPicker onReady).
 * Override the base `background: rgba(0,0,0,0.06)` above. */
.flatpickr-confirm {
	background: #ff712b;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	border-radius: 0 0 4px 4px;
	transition: background 0.15s ease-in-out;
}

.flatpickr-confirm:hover {
	background: #d35413;
}

/* FIX 3 — selected day in Arena orange (override flatpickr's #569ff7). Cover the
 * range/focus/hover/adjacent-month variants flatpickr groups with .selected. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
	background: #ff712b;
	border-color: #ff712b;
	color: #fff;
}

/* FIX 3 — active/focused time-spinner field in Arena orange tint (override the
 * default grey #eee hover/focus). Keeps the editable field obviously "active". */
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
	background: #ffe9dc;
}

/* Today marker: nudge from blue toward orange so it harmonises with selection. */
.flatpickr-day.today {
	border-color: #ff712b;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: #ff712b;
	border-color: #ff712b;
	color: #fff;
}