/* Themed Flatpickr — maps the base flatpickr.min.css onto FWH tokens
   (cream/mustard/ink, Inter font, mustard focus ring). Loaded only on the
   Rechnungs-Generator. */

.flatpickr-calendar {
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	font-family: var(--font-body);
	color: var(--color-ink);
	padding: var(--space-2);
}
/* The popover must always be wide enough to show all 7 weekday columns
   regardless of the underlying input's width. Without this override the
   popover inherits the input's ~308 px and clips the Sunday column. */
.flatpickr-calendar.open {
	width: auto !important;
	min-width: 320px;
	max-width: calc(100vw - 24px); /* mobile safety: never exceed the viewport */
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowBottom::before { border-bottom-color: var(--color-border); border-top-color: var(--color-border); }
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::after  { border-bottom-color: var(--color-white);  border-top-color: var(--color-white); }

/* Header (month/year row) */
.flatpickr-months .flatpickr-month {
	background: transparent;
	color: var(--color-ink);
	height: 40px;
	border-radius: var(--radius-sm);
}
.flatpickr-current-month {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--font-size-base);
	padding-top: 6px;
	color: var(--color-ink);
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--font-size-base);
	color: var(--color-ink);
	background: transparent;
	border-radius: var(--radius-sm);
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover {
	background: var(--color-cream-soft);
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month input.cur-year:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-mustard-soft);
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
	background: var(--color-white);
	color: var(--color-ink);
}

/* Prev/next month arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	color: var(--color-ink);
	fill: var(--color-ink);
	padding: 8px;
	border-radius: var(--radius-sm);
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background: var(--color-cream-soft);
	color: var(--color-ink);
	fill: var(--color-ink);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: currentColor; }

/* Weekday row (Mo, Di, Mi, …) */
.flatpickr-weekdaycontainer .flatpickr-weekday {
	color: var(--color-ink-soft);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: 500;
	background: transparent;
}

/* Day cells */
.flatpickr-day {
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	color: var(--color-ink);
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
	            color var(--motion-duration-fast) var(--motion-ease-standard);
	max-width: 40px;
	height: 38px;
	line-height: 36px;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
	background: var(--color-mustard-soft);
	color: var(--color-ink);
	border-color: transparent;
	outline: none;
}
.flatpickr-day:focus-visible {
	box-shadow: 0 0 0 3px var(--color-mustard-soft);
}
.flatpickr-day.today {
	border: 1px solid var(--color-mustard);
	color: var(--color-ink);
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: var(--color-mustard-soft);
	border-color: var(--color-mustard);
	color: var(--color-ink);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
	background: var(--color-mustard);
	color: var(--color-ink);
	border-color: var(--color-mustard);
	font-weight: 600;
}
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
	background: var(--color-mustard-soft);
	color: var(--color-ink);
	border-color: transparent;
	box-shadow: -5px 0 0 var(--color-mustard-soft), 5px 0 0 var(--color-mustard-soft);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: var(--color-ink-soft);
	opacity: 0.4;
	background: transparent;
	border-color: transparent;
}

/* Year up/down arrows */
.numInputWrapper:hover { background: var(--color-cream-soft); }
.numInputWrapper span { border-color: var(--color-border); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--color-ink); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--color-ink); }

/* The visible alt-input that Flatpickr renders alongside the hidden original */
.flatpickr-input.form-control.input,
input.flatpickr-alt-input { /* leave existing .input styling intact */ }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.flatpickr-calendar,
	.flatpickr-day,
	.flatpickr-monthDropdown-months,
	input.cur-year,
	.flatpickr-prev-month,
	.flatpickr-next-month {
		animation: none !important;
		transition: none !important;
	}
}