/*
 * NT Date-Time Picker - calendar theme (layered on top of Flatpickr's base CSS).
 *
 * Customise with CSS variables. Priority (high -> low):
 *   per-field tag options (inline style)  >  Settings page (--nt-dtp-user-*)  >  theme defaults below.
 */

/* ---- Theme tokens ------------------------------------------------------- */
.flatpickr-calendar.nt-dtp-calendar {
	--nt-dtp-accent: var(--nt-dtp-user-accent, #2271b1);
	--nt-dtp-accent-text: var(--nt-dtp-user-accent-text, #ffffff);
	--nt-dtp-bg: var(--nt-dtp-user-bg, #ffffff);
	--nt-dtp-text: var(--nt-dtp-user-text, #1d2327);
	--nt-dtp-border: var(--nt-dtp-user-border, #dcdcde);
	--nt-dtp-muted: var(--nt-dtp-user-muted, #a7aaad);
	--nt-dtp-radius: var(--nt-dtp-user-radius, 8px);
	--nt-dtp-font-size: var(--nt-dtp-user-font-size, 14px);
	--nt-dtp-hover: rgba(34, 113, 177, 0.12);
}

@supports (color: color-mix(in srgb, red 10%, transparent)) {
	.flatpickr-calendar.nt-dtp-calendar {
		--nt-dtp-hover: color-mix(in srgb, var(--nt-dtp-accent) 14%, transparent);
	}
}

.flatpickr-calendar.nt-dtp-calendar.nt-dtp-theme-dark {
	--nt-dtp-bg: var(--nt-dtp-user-bg, #1e2327);
	--nt-dtp-text: var(--nt-dtp-user-text, #f0f0f1);
	--nt-dtp-border: var(--nt-dtp-user-border, #3c434a);
	--nt-dtp-muted: var(--nt-dtp-user-muted, #7c858d);
}

@media (prefers-color-scheme: dark) {
	.flatpickr-calendar.nt-dtp-calendar.nt-dtp-theme-auto {
		--nt-dtp-bg: var(--nt-dtp-user-bg, #1e2327);
		--nt-dtp-text: var(--nt-dtp-user-text, #f0f0f1);
		--nt-dtp-border: var(--nt-dtp-user-border, #3c434a);
		--nt-dtp-muted: var(--nt-dtp-user-muted, #7c858d);
	}
}

/* ---- Container ---------------------------------------------------------- */
.flatpickr-calendar.nt-dtp-calendar {
	background: var(--nt-dtp-bg);
	color: var(--nt-dtp-text);
	border: 1px solid var(--nt-dtp-border);
	border-radius: var(--nt-dtp-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
	font-size: var(--nt-dtp-font-size);
	z-index: 100000;
}

.flatpickr-calendar.nt-dtp-calendar.arrowTop::before { border-bottom-color: var(--nt-dtp-border); }
.flatpickr-calendar.nt-dtp-calendar.arrowTop::after { border-bottom-color: var(--nt-dtp-bg); }
.flatpickr-calendar.nt-dtp-calendar.arrowBottom::before { border-top-color: var(--nt-dtp-border); }
.flatpickr-calendar.nt-dtp-calendar.arrowBottom::after { border-top-color: var(--nt-dtp-bg); }

/* ---- Header ------------------------------------------------------------- */
.nt-dtp-calendar .flatpickr-months .flatpickr-month,
.nt-dtp-calendar .flatpickr-current-month,
.nt-dtp-calendar .flatpickr-current-month input.cur-year,
.nt-dtp-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
	color: var(--nt-dtp-text);
	fill: var(--nt-dtp-text);
	background: transparent;
}

.nt-dtp-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
	background: var(--nt-dtp-hover);
}

.nt-dtp-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
	background: var(--nt-dtp-bg);
	color: var(--nt-dtp-text);
}

.nt-dtp-calendar .flatpickr-months .flatpickr-prev-month,
.nt-dtp-calendar .flatpickr-months .flatpickr-next-month {
	color: var(--nt-dtp-text);
	fill: var(--nt-dtp-text);
}

.nt-dtp-calendar .flatpickr-months .flatpickr-prev-month svg,
.nt-dtp-calendar .flatpickr-months .flatpickr-next-month svg,
.nt-dtp-calendar .flatpickr-months .flatpickr-prev-month svg path,
.nt-dtp-calendar .flatpickr-months .flatpickr-next-month svg path {
	fill: var(--nt-dtp-text);
}

.nt-dtp-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.nt-dtp-calendar .flatpickr-months .flatpickr-next-month:hover svg,
.nt-dtp-calendar .flatpickr-months .flatpickr-prev-month:hover svg path,
.nt-dtp-calendar .flatpickr-months .flatpickr-next-month:hover svg path {
	fill: var(--nt-dtp-accent);
}

.nt-dtp-calendar .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.nt-dtp-calendar .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
	display: inline;
	opacity: 0.35;
	cursor: not-allowed;
}

.nt-dtp-calendar .numInputWrapper:hover { background: var(--nt-dtp-hover); }
.nt-dtp-calendar .numInputWrapper span { border-color: var(--nt-dtp-border); }
.nt-dtp-calendar .numInputWrapper span.arrowUp::after { border-bottom-color: var(--nt-dtp-text); }
.nt-dtp-calendar .numInputWrapper span.arrowDown::after { border-top-color: var(--nt-dtp-text); }

/* ---- Weekday row & days ------------------------------------------------- */
.nt-dtp-calendar .flatpickr-weekdays { background: transparent; }

.nt-dtp-calendar span.flatpickr-weekday {
	background: transparent;
	color: var(--nt-dtp-muted);
	font-weight: 600;
}

.nt-dtp-calendar .flatpickr-day {
	color: var(--nt-dtp-text);
	border-radius: calc(var(--nt-dtp-radius) * 0.75);
}

.nt-dtp-calendar .flatpickr-day:hover,
.nt-dtp-calendar .flatpickr-day:focus,
.nt-dtp-calendar .flatpickr-day.prevMonthDay:hover,
.nt-dtp-calendar .flatpickr-day.nextMonthDay:hover {
	background: var(--nt-dtp-hover);
	border-color: transparent;
	color: var(--nt-dtp-text);
}

.nt-dtp-calendar .flatpickr-day.prevMonthDay,
.nt-dtp-calendar .flatpickr-day.nextMonthDay {
	color: var(--nt-dtp-muted);
}

.nt-dtp-calendar .flatpickr-day.today {
	border-color: var(--nt-dtp-accent);
}

.nt-dtp-calendar .flatpickr-day.today:hover,
.nt-dtp-calendar .flatpickr-day.today:focus {
	background: var(--nt-dtp-hover);
	border-color: var(--nt-dtp-accent);
	color: var(--nt-dtp-text);
}

.nt-dtp-calendar .flatpickr-day.selected,
.nt-dtp-calendar .flatpickr-day.selected:hover,
.nt-dtp-calendar .flatpickr-day.selected:focus,
.nt-dtp-calendar .flatpickr-day.selected.inRange,
.nt-dtp-calendar .flatpickr-day.selected.prevMonthDay,
.nt-dtp-calendar .flatpickr-day.selected.nextMonthDay {
	background: var(--nt-dtp-accent);
	border-color: var(--nt-dtp-accent);
	color: var(--nt-dtp-accent-text);
}

/* Disabled: weekdays, holidays, blocked ranges and out-of-range dates */
.nt-dtp-calendar .flatpickr-day.flatpickr-disabled,
.nt-dtp-calendar .flatpickr-day.flatpickr-disabled:hover,
.nt-dtp-calendar .flatpickr-day.flatpickr-disabled:focus,
.nt-dtp-calendar .flatpickr-day.notAllowed,
.nt-dtp-calendar .flatpickr-day.notAllowed.prevMonthDay,
.nt-dtp-calendar .flatpickr-day.notAllowed.nextMonthDay {
	background: transparent;
	border-color: transparent;
	color: var(--nt-dtp-muted);
	opacity: 0.6;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* ---- Time picker -------------------------------------------------------- */
.nt-dtp-calendar .flatpickr-time {
	border-top-color: var(--nt-dtp-border);
}

.nt-dtp-calendar .flatpickr-time input,
.nt-dtp-calendar .flatpickr-time .flatpickr-time-separator,
.nt-dtp-calendar .flatpickr-time .flatpickr-am-pm {
	color: var(--nt-dtp-text);
	background: transparent;
}

.nt-dtp-calendar .flatpickr-time input:hover,
.nt-dtp-calendar .flatpickr-time input:focus,
.nt-dtp-calendar .flatpickr-time .flatpickr-am-pm:hover,
.nt-dtp-calendar .flatpickr-time .flatpickr-am-pm:focus {
	background: var(--nt-dtp-hover);
}

.nt-dtp-calendar .flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--nt-dtp-text); }
.nt-dtp-calendar .flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--nt-dtp-text); }

/* ---- Input -------------------------------------------------------------- */
input.nt-dtp-display { cursor: pointer; }