/* =============================================================================
   SubbieHub — flatpickr brand theme
   Overrides the default flatpickr (v4.6.13) look to match app.css's design
   tokens. Load this AFTER flatpickr.min.css and the monthSelect plugin's
   style.css so these rules win.
============================================================================= */

/* --------------------------------------------------------------------------
   Calendar shell
-------------------------------------------------------------------------- */
.flatpickr-calendar {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--sh-input-radius, 8px);
	box-shadow: 0 8px 28px rgba(6, 4, 67, 0.12);
	font-family: 'DM Sans', sans-serif;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
	border-bottom-color: var(--border);
}

/* --------------------------------------------------------------------------
   Header — month/year nav
-------------------------------------------------------------------------- */
.flatpickr-months {
	background: var(--navy);
	border-radius: var(--sh-input-radius, 8px) var(--sh-input-radius, 8px) 0 0;
	padding: 8px 0;
}

.flatpickr-months .flatpickr-month {
	color: var(--white);
	fill: var(--white);
}

.flatpickr-current-month {
	font-family: 'Sora', sans-serif;
	font-size: 120%;
	font-weight: 700;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
	color: var(--white);
	font-family: 'Sora', sans-serif;
	font-weight: 700;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
	background: transparent;
	color: var(--white);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
	background: var(--navy);
	color: var(--white);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	color: var(--yellow);
	fill: var(--yellow);
	top: 6px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	color: var(--white);
	fill: var(--white);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
	opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Weekday row
-------------------------------------------------------------------------- */
.flatpickr-weekdays {
	background: var(--off-white);
}

span.flatpickr-weekday {
	background: var(--off-white);
	color: var(--text-muted);
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
}

/* Week-number gutter column (shown alongside weekSelect) */
.flatpickr-weekwrapper .flatpickr-weeks {
	box-shadow: 1px 0 0 var(--border);
}

.flatpickr-weekwrapper .flatpickr-weekday {
	background: var(--off-white);
	color: var(--text-muted);
}

span.flatpickr-day.flatpickr-week-number,
.flatpickr-weekwrapper .flatpickr-day {
	color: var(--text-muted);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Days
-------------------------------------------------------------------------- */
.flatpickr-day {
	color: var(--text-mid);
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus {
	background: var(--off-white);
	border-color: var(--off-white);
}

.flatpickr-day.today {
	border-color: var(--navy);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed {
	color: rgba(6, 4, 67, 0.25);
}

/* Single-day selection (used when weekSelect isn't in play) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

/* Whole-week highlight bar — weekSelect plugin adds .week.selected to every
   day in the chosen row instead of a single pill, so this needs its own rule
   rather than inheriting the pill-shaped .selected style above. */
.flatpickr-day.week.selected {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--navy);
	font-weight: 700;
	border-radius: 0;
	box-shadow: -5px 0 0 var(--yellow), 5px 0 0 var(--yellow);
}

/* --------------------------------------------------------------------------
   monthSelect plugin grid
-------------------------------------------------------------------------- */
.flatpickr-monthSelect-month {
	color: var(--text-mid);
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
}

.flatpickr-monthSelect-month.today {
	border-color: var(--navy);
}

.flatpickr-monthSelect-month.inRange,
.flatpickr-monthSelect-month.inRange.today,
.flatpickr-monthSelect-month:hover,
.flatpickr-monthSelect-month:focus {
	background: var(--off-white);
	border-color: var(--off-white);
}

.flatpickr-monthSelect-month.today:hover,
.flatpickr-monthSelect-month.today:focus {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.startRange,
.flatpickr-monthSelect-month.endRange {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--navy);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   The visible input itself — reuses the same look as every other
   sh-dashboard-panel / sh-filter-bar input, since it's now a plain
   type="text" field under the hood.
-------------------------------------------------------------------------- */
input.sh-flatpickr-input {
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23060443' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 12px center;
	background-size: 16px;
	cursor: pointer;
}