/**
 * SPCRM flatpickr theme — modern, professional, brand-aligned.
 * Scoped to .flatpickr-calendar so it never leaks into other UI.
 */

/* The alt (visible) input inherits the app's input styling. */
input.flatpickr-input.form-control,
.spcrm-input ~ .flatpickr-input,
input.flatpickr-alt,
.flatpickr-input.spcrm-input {
	cursor: pointer;
}

.flatpickr-calendar {
	--spcrm-fp-brand: var(--spcrm-brand-primary, #6366f1);
	border-radius: 16px;
	border: 1px solid rgba(99, 102, 241, 0.14);
	box-shadow: 0 18px 48px -12px rgba(30, 41, 59, 0.28), 0 6px 16px -8px rgba(30, 41, 59, 0.16);
	background: #ffffff;
	padding: 6px;
	font-family: inherit;
	overflow: visible;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: #ffffff; }
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { border-top-color: #ffffff; }

/* Header (month/year) */
.flatpickr-months {
	background: linear-gradient(135deg, var(--spcrm-fp-brand), #8b5cf6);
	border-radius: 12px;
	padding: 8px 4px;
	margin-bottom: 6px;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { color: #ffffff; fill: #ffffff; }
.flatpickr-current-month .flatpickr-monthDropdown-months { color: #ffffff; font-weight: 700; }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { color: #1e293b; }
.flatpickr-current-month input.cur-year { font-weight: 700; }
.numInputWrapper span.arrowUp:after { border-bottom-color: rgba(255,255,255,0.7); }
.numInputWrapper span.arrowDown:after { border-top-color: rgba(255,255,255,0.7); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #e0e7ff; }

/* Weekday row */
span.flatpickr-weekday { color: #94a3b8; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }

/* Days */
.flatpickr-day {
	border-radius: 9px;
	color: #334155;
	font-weight: 500;
	transition: background .12s ease, color .12s ease, transform .06s ease;
}
.flatpickr-day:hover { background: rgba(99, 102, 241, 0.10); color: var(--spcrm-fp-brand); }
.flatpickr-day.today { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--spcrm-fp-brand); color: var(--spcrm-fp-brand); font-weight: 700; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: linear-gradient(135deg, var(--spcrm-fp-brand), #8b5cf6);
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 4px 12px -4px rgba(99, 102, 241, 0.6);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #cbd5e1; }

/* Time picker — compact, clear */
.flatpickr-time { border-top: 1px solid rgba(99,102,241,0.10); margin-top: 4px; height: auto; max-height: none; }
.flatpickr-calendar.hasTime .flatpickr-time { height: 42px; line-height: 42px; }
.flatpickr-time .numInputWrapper { height: 42px; }
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
	color: #334155; font-weight: 700; font-size: 16px; height: 42px; line-height: 42px;
}
.flatpickr-time .flatpickr-am-pm { font-size: 13px; letter-spacing: .5px; }
.flatpickr-time .flatpickr-time-separator { font-size: 16px; font-weight: 800; color: var(--spcrm-brand-primary, #6366f1); }
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: rgba(99, 102, 241, 0.10); border-radius: 8px; }
/* Always-visible up/down steppers on hour & minute */
.flatpickr-time .numInputWrapper span { opacity: 1; border: none; }
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--spcrm-brand-primary, #6366f1); }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--spcrm-brand-primary, #6366f1); }
.flatpickr-time .numInputWrapper:hover { background: rgba(99,102,241,0.06); border-radius: 8px; }

/* ---- Dark mode ---- */
.spcrm-dark .flatpickr-calendar,
[data-theme="dark"] .flatpickr-calendar,
html.dark .flatpickr-calendar {
	background: #1e293b;
	border-color: rgba(148, 163, 184, 0.18);
	box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.6);
}
.spcrm-dark .flatpickr-calendar.arrowTop:before,
.spcrm-dark .flatpickr-calendar.arrowTop:after,
[data-theme="dark"] .flatpickr-calendar.arrowTop:before,
[data-theme="dark"] .flatpickr-calendar.arrowTop:after,
html.dark .flatpickr-calendar.arrowTop:before,
html.dark .flatpickr-calendar.arrowTop:after { border-bottom-color: #1e293b; }
.spcrm-dark .flatpickr-day,
[data-theme="dark"] .flatpickr-day,
html.dark .flatpickr-day { color: #cbd5e1; }
.spcrm-dark .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:hover,
html.dark .flatpickr-day:hover { background: rgba(99, 102, 241, 0.22); color: #ffffff; }
.spcrm-dark .flatpickr-time input,
.spcrm-dark .flatpickr-time .flatpickr-am-pm,
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm,
html.dark .flatpickr-time input,
html.dark .flatpickr-time .flatpickr-am-pm { color: #e2e8f0; }

/* Ensure the picker floats above modals, fancy-select panels and viewers. */
.flatpickr-calendar { z-index: 100060 !important; }