/**
 * Flatpickr Custom Styles
 * Matches the application's design system
 */

/* Base overrides for consistency */
.flatpickr-calendar {
	background: var(--card-bg, #fff);
	border: 1px solid var(--border, #e5e7eb);
	border-radius: var(--radius, 8px);
	box-shadow: var(--shadow-1, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
	font-family: inherit;
}

.flatpickr-months {
	background: var(--card-bg, #fff);
	border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}

.flatpickr-months .flatpickr-month {
	color: var(--text, #1f2937);
	fill: var(--text, #1f2937);
	height: 34px;
}

.flatpickr-current-month {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 4px 0;
	width: auto;
	height: 34px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .cur-year,
.flatpickr-current-month select.cur-year {
	margin: 0;
	padding: 2px 4px;
	font-size: var(--fs-14, 14px);
	line-height: 1.2;
	color: var(--text, #1f2937);
	font-weight: 600;
}

.flatpickr-weekdays {
	background: var(--card-bg, #fff);
}

.flatpickr-weekday {
	color: var(--text-muted, #6b7280);
	font-weight: 500;
}

.flatpickr-day {
	color: var(--text, #1f2937);
	border-radius: var(--radius-sm, 4px);
}

.flatpickr-day:hover {
	background: var(--surface-hover, #f3f4f6);
	border-color: var(--surface-hover, #f3f4f6);
}

.flatpickr-day.today {
	border-color: var(--primary, #3b82f6);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
	background: var(--primary, #3b82f6);
	border-color: var(--primary, #3b82f6);
	color: #fff;
}

.flatpickr-day.flatpickr-disabled {
	color: var(--text-muted, #9ca3af);
}

/* Time picker styles */
.flatpickr-time {
	border-top: 1px solid var(--border, #e5e7eb);
}

.flatpickr-time input {
	color: var(--text, #1f2937);
}

.flatpickr-time .flatpickr-am-pm {
	color: var(--text, #1f2937);
}

/* Month picker styles */
.flatpickr-monthSelect-months {
	background: var(--card-bg, #fff);
}

.flatpickr-monthSelect-month {
	color: var(--text, #1f2937);
	border-radius: var(--radius-sm, 4px);
}

.flatpickr-monthSelect-month:hover {
	background: var(--surface-hover, #f3f4f6);
}

.flatpickr-monthSelect-month.selected {
	background: var(--primary, #3b82f6);
	color: #fff;
}

/* Dark mode support */
.theme-dark .flatpickr-calendar,
.theme-dark.flatpickr-calendar {
	background: var(--card-bg);
	border-color: var(--border);
	box-shadow: var(--shadow-1);
}

.theme-dark .flatpickr-months,
.theme-dark.flatpickr-months {
	background: var(--card-bg);
}

.theme-dark .flatpickr-months .flatpickr-month,
.theme-dark .flatpickr-current-month .flatpickr-monthDropdown-months,
.theme-dark .flatpickr-current-month .cur-year,
.theme-dark .flatpickr-current-month select.cur-year {
	color: var(--text);
	background: var(--surface, #111827);
	border-color: var(--border, #1f2937);
}

.theme-dark .flatpickr-weekdays,
.theme-dark.flatpickr-weekdays {
	background: var(--card-bg);
}

.theme-dark .flatpickr-weekday {
	color: var(--text-muted);
}

.theme-dark .flatpickr-day {
	color: var(--text);
}

.theme-dark .flatpickr-day:hover {
	background: var(--surface-hover);
	border-color: var(--surface-hover);
}

.theme-dark .flatpickr-day.flatpickr-disabled {
	color: var(--text-muted);
}

.theme-dark .flatpickr-time input,
.theme-dark .flatpickr-time .flatpickr-am-pm {
	color: var(--text);
	background: transparent;
}

.theme-dark .flatpickr-time input:hover,
.theme-dark .flatpickr-time .flatpickr-am-pm:hover {
	background: var(--surface-hover);
	color: var(--text);
}

.theme-dark .flatpickr-time input:focus,
.theme-dark .flatpickr-time .flatpickr-am-pm:focus {
	background: var(--surface-hover);
	color: var(--text);
	outline: none;
}

.theme-dark .flatpickr-monthSelect-months {
	background: var(--card-bg);
}

.theme-dark .flatpickr-monthSelect-month {
	color: var(--text);
}

.theme-dark .flatpickr-monthSelect-month:hover {
	background: var(--surface-hover);
}

/* Navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
	fill: var(--text, #1f2937);
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
	fill: var(--primary, #3b82f6);
}

.theme-dark .flatpickr-prev-month,
.theme-dark .flatpickr-next-month {
	fill: var(--text);
}

.theme-dark .flatpickr-prev-month:hover,
.theme-dark .flatpickr-next-month:hover {
	fill: var(--primary);
}

/* Input styling for consistency */
input[data-flatpickr] {
	cursor: pointer;
}

/* Hide year navigation arrows */
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
	display: none !important;
}