/*
 * SRA custom date + time pickers — popup chrome + composite-field triggers.
 *
 * Two widgets share the same DOM mechanics (body-appended popup,
 * trigger button, hidden inputs for form submission) and identical
 * chrome on the popup container. The widgets:
 *
 *   .sra-time-select  -- three trigger buttons (hour / minute / AM-PM)
 *                        inside one composite-field shell. Each opens
 *                        a list popup (1-12, 00/15/30/45, AM/PM).
 *
 *   .sra-date-select  -- single trigger button showing the formatted
 *                        date or placeholder. Opens a calendar popup
 *                        with month-grid + year picker.
 *
 * Both popups: white bg, 1px --sage border, 4px radius, 0 8px 24px
 * green-tinted shadow, body-appended, position: absolute. Hover state
 * on options/dates: --sage tint. Selected: --moss with white text.
 *
 * Error state (set by JS when a required picker submits empty):
 * .sra-picker--error gets --error border and a soft fill tint.
 */

/* ── Composite-field shell (closed state) ─────────────────────────────── */

.sra-picker {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--fog, #c8d5c4);
	border-radius: 4px;
	background: var(--white, #fff);
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	box-sizing: border-box;
	font-family: 'Jost', sans-serif;
	font-size: 0.95rem;
	color: var(--forest-deep, #2c3e29);
}

.sra-picker:focus-within {
	border-color: var(--moss, #4a6b4a);
	box-shadow: 0 0 0 2px rgba(80, 130, 80, 0.15);
}

.sra-picker--error {
	border-color: var(--error, #a8483d);
	background: rgba(168, 72, 61, 0.06);
}

.sra-picker--error:focus-within {
	border-color: var(--error, #a8483d);
	box-shadow: 0 0 0 2px rgba(168, 72, 61, 0.2);
}

/* Shared trigger button look */
.sra-picker-trigger {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0.4rem 0.6rem;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.sra-picker-trigger:focus {
	outline: none;
	background: rgba(80, 130, 80, 0.08);
	border-radius: 2px;
}

.sra-picker-trigger__value--placeholder {
	color: var(--warm-stone, #a89888);
}

.sra-picker-trigger__icon {
	width: 16px;
	height: 16px;
	margin-left: auto;
	color: var(--warm-stone, #a89888);
	flex-shrink: 0;
}

/* ── Time-select composite field ──────────────────────────────────────── */

.sra-time-select {
	padding: 0;
	gap: 0;
}

.sra-time-select__sep {
	color: var(--warm-stone, #a89888);
	user-select: none;
	pointer-events: none;
	padding: 0 0.15rem;
}

/* Clock icon affordance at the right edge of the composite field.
   A real <button> so it's keyboard-focusable; its click delegates
   to the hour trigger so there's still one canonical popup anchor. */
.sra-time-select__icon {
	margin-left: auto;
	padding: 0.4rem 0.5rem;
	color: var(--warm-stone, #a89888);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sra-time-select__icon:hover,
.sra-time-select__icon:focus {
	color: var(--moss, #4a6b4a);
}

/* ── Date-select trigger ──────────────────────────────────────────────── */

.sra-date-select {
	width: 100%;
	max-width: 220px;
}

.sra-date-select .sra-picker-trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ── Shared popup chrome (both pickers) ───────────────────────────────── */

.sra-picker-popup {
	position: absolute;
	z-index: 99999;
	background: var(--white, #fff);
	border: 1px solid var(--sage, #7a9a7a);
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(30, 45, 30, 0.18);
	padding: 0.5rem;
	font-family: 'Jost', sans-serif;
	font-size: 0.95rem;
	color: var(--forest-deep, #2c3e29);
	box-sizing: border-box;
}

/* ── Time picker popup (three-column unified picker) ──────────────────── */

.sra-picker-popup--time {
	min-width: 240px;
}

.sra-time-columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.25rem;
}

.sra-time-column {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
	border-right: 1px solid var(--mist, #e8ede6);
}

.sra-time-column:last-child {
	border-right: none;
}

/* The <li>s in each time column use .sra-picker-option for hover /
   focus / --selected styling (rules defined below). */

/* ── Time list popup (legacy single-column -- kept for any future
       single-listbox usage; the time picker now uses --time above) ──── */

.sra-picker-popup--list {
	min-width: 72px;
	max-height: 280px;
	overflow-y: auto;
}

.sra-picker-options {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sra-picker-option {
	padding: 0.4rem 0.75rem;
	border-radius: 3px;
	cursor: pointer;
	text-align: center;
	user-select: none;
}

.sra-picker-option:hover {
	background: var(--sage, #7a9a7a);
	color: var(--white, #fff);
}

.sra-picker-option:focus {
	outline: none;
	background: var(--sage, #7a9a7a);
	color: var(--white, #fff);
}

.sra-picker-option--selected {
	background: var(--moss, #4a6b4a);
	color: var(--white, #fff);
}

.sra-picker-option--selected:focus,
.sra-picker-option--selected:hover {
	background: var(--moss, #4a6b4a);
}

/* ── Calendar popup ───────────────────────────────────────────────────── */

.sra-picker-popup--calendar {
	min-width: 280px;
}

.sra-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	padding: 0 0.25rem;
}

.sra-cal-nav,
.sra-cal-month-year {
	background: transparent;
	border: 0;
	padding: 0.3rem 0.5rem;
	cursor: pointer;
	font: inherit;
	color: var(--forest-deep, #2c3e29);
	border-radius: 3px;
}

.sra-cal-nav {
	font-size: 1.2rem;
	line-height: 1;
}

.sra-cal-nav:hover,
.sra-cal-month-year:hover {
	background: rgba(80, 130, 80, 0.08);
}

.sra-cal-nav:focus,
.sra-cal-month-year:focus {
	outline: none;
	background: rgba(80, 130, 80, 0.12);
}

.sra-cal-month-year {
	font-weight: 500;
}

.sra-cal-grid {
	font-size: 0.85rem;
}

.sra-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	color: var(--warm-stone, #a89888);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0;
}

.sra-cal-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.sra-cal-day {
	background: transparent;
	border: 0;
	padding: 0.35rem 0;
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	color: var(--forest-deep, #2c3e29);
	border-radius: 3px;
	text-align: center;
	position: relative;
}

.sra-cal-day:hover {
	background: var(--sage, #7a9a7a);
	color: var(--white, #fff);
}

.sra-cal-day:focus {
	outline: none;
	background: var(--sage, #7a9a7a);
	color: var(--white, #fff);
}

.sra-cal-day--other {
	color: var(--warm-stone, #a89888);
	opacity: 0.55;
}

.sra-cal-day--today::after {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 50%;
	width: 3px;
	height: 3px;
	margin-left: -1.5px;
	border-radius: 50%;
	background: var(--moss, #4a6b4a);
}

.sra-cal-day--selected {
	background: var(--moss, #4a6b4a);
	color: var(--white, #fff);
}

.sra-cal-day--selected:hover,
.sra-cal-day--selected:focus {
	background: var(--moss, #4a6b4a);
}

.sra-cal-day--selected.sra-cal-day--today::after {
	background: var(--white, #fff);
}

/* ── Year picker (when month-year header is clicked) ──────────────────── */

.sra-cal-years {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	max-height: 240px;
	overflow-y: auto;
}

.sra-cal-year {
	background: transparent;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
	font: inherit;
	color: var(--forest-deep, #2c3e29);
	border-radius: 3px;
}

.sra-cal-year:hover,
.sra-cal-year:focus {
	outline: none;
	background: var(--sage, #7a9a7a);
	color: var(--white, #fff);
}

.sra-cal-year--selected {
	background: var(--moss, #4a6b4a);
	color: var(--white, #fff);
}

/* ── Mobile responsive ────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.sra-picker-popup--calendar,
	.sra-picker-popup--time {
		min-width: calc(100vw - 32px);
		max-width: 320px;
	}
	.sra-picker-popup--list {
		min-width: 80px;
	}
}