:root {
	--ip-fp-accent: var(--iplink-primary, #2563eb);
	--ip-fp-accent-deep: var(--iplink-primary-deep, #1d4ed8);
	--ip-fp-ink: #1f2937;
	--ip-fp-muted: #6b7280;
	--ip-fp-line: rgba(17, 24, 39, 0.1);
	--ip-fp-soft: rgba(17, 24, 39, 0.05);
}

/* Old jQuery UI popup and icon are superseded. */
#ui-datepicker-div,
.ui-datepicker-trigger {
	display: none !important;
}

/* The visible field. */
input.ip-date-input {
	cursor: pointer;
	padding-right: 2.4rem !important;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 18px 18px;
}
input.ip-date-input:not(.form-control) {
	min-height: 2.25rem;
	padding: 0.375rem 2.4rem 0.375rem 0.75rem;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
	font: inherit;
	color: var(--ip-fp-ink);
}
input.ip-date-input:focus {
	outline: none;
	border-color: var(--ip-fp-accent);
	box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ip-fp-accent) 20%, transparent);
}
/* flatpickr marks the field readonly to stop typing; it is still editable via the calendar. */
input.ip-date-input[readonly]:not(.ip-date-locked) {
	background-color: #fff;
	opacity: 1;
}
input.ip-date-input[disabled],
input.ip-date-input.ip-date-locked {
	cursor: not-allowed;
	background-color: #e9ecef;
}

/* Calendar popup. */
.flatpickr-calendar {
	width: auto !important;
	padding: 0.5rem 0.5rem 0;
	border: 1px solid var(--ip-fp-line);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
	font-family: inherit;
	color: var(--ip-fp-ink);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
	display: none;
}
.flatpickr-months {
	align-items: center;
	padding-bottom: 0.35rem;
}
.flatpickr-months .flatpickr-month {
	height: 40px;
	color: var(--ip-fp-ink);
	fill: var(--ip-fp-ink);
}
.flatpickr-current-month {
	padding-top: 6px;
	font-size: 1rem;
	font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	font-weight: 600;
	border-radius: 8px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .numInputWrapper:hover {
	background: var(--ip-fp-soft);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	top: 8px;
	height: 34px;
	width: 34px;
	padding: 9px;
	border-radius: 999px;
	color: var(--ip-fp-muted);
	fill: var(--ip-fp-muted);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background: var(--ip-fp-soft);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--ip-fp-accent);
}
span.flatpickr-weekday {
	color: var(--ip-fp-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.flatpickr-day {
	border-radius: 10px;
	font-weight: 500;
	color: var(--ip-fp-ink);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
	background: var(--ip-fp-soft);
	border-color: transparent;
}
.flatpickr-day.today {
	border-color: var(--ip-fp-accent);
	color: var(--ip-fp-accent);
	font-weight: 700;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: var(--ip-fp-soft);
	border-color: var(--ip-fp-accent);
	color: var(--ip-fp-accent);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--ip-fp-accent);
	border-color: var(--ip-fp-accent);
	color: #fff;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: rgba(107, 114, 128, 0.55);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	color: rgba(107, 114, 128, 0.3);
	background: transparent;
}

/* Time row for datetime fields. */
.flatpickr-calendar.hasTime .flatpickr-time {
	border-top: 1px solid var(--ip-fp-line);
	margin-top: 0.35rem;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm,
.flatpickr-time .flatpickr-time-separator {
	color: var(--ip-fp-ink);
	font-weight: 600;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
	background: var(--ip-fp-soft);
}

/* Today / Clear footer. */
.ip-fp-footer {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0.35rem -0.5rem 0;
	padding: 0.55rem 0.75rem;
	border-top: 1px solid var(--ip-fp-line);
}
.ip-fp-footer button {
	padding: 0.3rem 0.8rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ip-fp-accent);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}
.ip-fp-footer button:hover {
	background: var(--ip-fp-soft);
}
.ip-fp-footer .ip-fp-clear {
	color: var(--ip-fp-muted);
}

.modal .flatpickr-calendar.static {
	z-index: 1060;
}