/* Shared Flatpickr theme. Link this after header.jsp so it follows flatpickr.min.css.
   Site-wide input/select rules (border, margin, line-height) apply inside the popup. */

.flatpickr-calendar {
	direction: rtl;
	overflow: visible;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	border: 1px solid var(--ic-border);
	background: white;
	font-size: 14px;
	line-height: 1.2;
}

.flatpickr-calendar .flatpickr-months {
	background: white;
	color: var(--ic-text);
	border-radius: 12px 12px 0 0;
	align-items: center;
	overflow: visible;
}

.flatpickr-calendar .flatpickr-month {
	overflow: visible;
	background: white;
	color: var(--ic-text);
	height: 40px;
}

.flatpickr-calendar .flatpickr-current-month {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	height: 40px;
	padding: 0;
	color: var(--ic-text);
	font-size: 14px;
	font-weight: var(--ic-font-weight-semibold);
	line-height: 1;
	overflow: visible;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.flatpickr-calendar .flatpickr-time .numInputWrapper {
	display: inline-flex;
	align-items: center;
	height: 28px;
	margin: 0;
	vertical-align: middle;
	overflow: visible;
	background: transparent;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0;
	color: var(--ic-text);
	fill: var(--ic-text);
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Beat input, select { border; margin; color !important } from common.css */
.flatpickr-calendar input,
.flatpickr-calendar select {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 2px;
	outline: none;
	box-shadow: none !important;
	background: transparent !important;
	color: var(--ic-text) !important;
	font-size: 14px !important;
	font-weight: var(--ic-font-weight-semibold);
	line-height: 28px !important;
	height: 28px;
	vertical-align: middle;
	box-sizing: border-box;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
	appearance: none;
	-webkit-appearance: none;
	height: 28px;
	line-height: 28px !important;
	padding: 0 2px;
	font-weight: var(--ic-font-weight-semibold);
	background: transparent !important;
	cursor: pointer;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year {
	height: 28px;
	line-height: 28px !important;
	padding: 0;
}

.flatpickr-calendar .flatpickr-weekdays {
	background: white;
	overflow: visible;
}

.flatpickr-calendar .flatpickr-weekday {
	background: white;
	color: var(--ic-muted);
	font-weight: var(--ic-font-weight-semibold);
	line-height: 28px;
}

.flatpickr-calendar .flatpickr-day {
	border-radius: 6px;
	margin: 0;
	line-height: 39px;
	text-align: center;
	font-size: 14px;
	font-weight: var(--ic-font-weight-medium);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.flatpickr-calendar .flatpickr-day:hover {
	background-color: var(--ic-cream);
	color: var(--ic-text);
}

.flatpickr-calendar .flatpickr-day.selected {
	background-color: var(--ic-teal);
	border-color: var(--ic-teal);
	color: white;
}

.flatpickr-calendar .flatpickr-time {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	max-height: 40px;
	line-height: 40px;
	overflow: visible;
	text-align: center;
	background: white;
	border-top: 1px solid var(--ic-border);
	border-radius: 0;
}

.flatpickr-calendar .flatpickr-time .numInputWrapper {
	float: none;
	flex: 0 0 4.5rem;
	width: 4.5rem;
	height: 40px;
}

.flatpickr-calendar .flatpickr-time input {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 40px !important;
	padding: 0 !important;
	text-align: center;
	background: transparent !important;
}

.flatpickr-calendar .flatpickr-time input:hover,
.flatpickr-calendar .flatpickr-time input:focus,
.flatpickr-calendar .flatpickr-time .numInputWrapper:hover {
	background: transparent !important;
}

.flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: auto;
	height: 40px;
	line-height: 1;
	padding: 0;
	color: var(--ic-text);
	font-weight: var(--ic-font-weight-semibold);
}

.flatpickr-calendar .ic-flatpickr-actions {
	display: flex;
	align-items: center;
	justify-content: stretch;
	gap: var(--ic-space-xs);
	margin: 0;
	padding: var(--ic-space-xs);
	overflow: visible;
	background: white;
	border-top: 1px solid var(--ic-border);
	border-radius: 0 0 12px 12px;
}

.flatpickr-calendar .ic-flatpickr-actions button {
	flex: 1 1 0;
	height: 32px;
	margin: 0;
	padding: 0 8px;
	border-radius: 8px;
	font-family: var(--ic-font-family);
	font-size: 13px;
	font-weight: var(--ic-font-weight-semibold);
	line-height: 32px;
	text-align: center;
	cursor: pointer;
}

.flatpickr-calendar .ic-flatpickr-confirm {
	background: var(--ic-teal);
	border: 1px solid var(--ic-teal-dark);
	color: var(--ic-on-accent);
}

.flatpickr-calendar .ic-flatpickr-confirm:hover,
.flatpickr-calendar .ic-flatpickr-confirm:focus {
	background: var(--ic-teal-dark);
	border-color: var(--ic-teal-dark);
	color: var(--ic-on-accent);
}

.flatpickr-calendar .ic-flatpickr-cancel {
	background: white;
	border: 1px solid var(--ic-border);
	color: var(--ic-text);
}

.flatpickr-calendar .ic-flatpickr-cancel:hover,
.flatpickr-calendar .ic-flatpickr-cancel:focus {
	background: var(--ic-cream);
	color: var(--ic-text);
}