/*
 * Dropdowns, site-wide.
 *
 * Closed: every single-choice <select> drops the browser's arrow for a slate
 * chevron that turns indigo while its list is open, with room kept for it on
 * the right. Open (js/fancy-select.js, mouse on a desktop): a white rounded
 * panel of options under the select, the picked one tinted with a check.
 * Phones keep their own picker, and keyboard opening keeps the native list.
 * Plain CSS, outside the frozen Tailwind build; enqueued early, so a page's
 * own select rules (padding, colours) still win where they set them.
 */

select:not([multiple]):not([size]),
select[size='1']:not([multiple]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.85rem center;
	background-repeat: no-repeat;
	background-size: 1.1rem;
	cursor: pointer;
	text-overflow: ellipsis;
}

/* Matches the rule above's two :not()s, plus the class, so it outranks it. */
select.tia-select-open:not([multiple]):not([size]),
select.tia-select-open[size='1']:not([multiple]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}

/* ----- The open panel ----- */

.tia-select-panel {
	position: absolute;
	z-index: 10000;
	max-width: calc(100vw - 1rem);
	max-height: 18rem;
	overflow-y: auto;
	padding: 0.375rem;
	border: 1px solid #E2E8F0;
	border-radius: 0.875rem;
	background: #FFFFFF;
	box-shadow: 0 24px 48px -16px rgb(15 23 42 / 0.28), 0 6px 14px -8px rgb(15 23 42 / 0.12);
	font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	transform-origin: top center;
	animation: tia-select-in 0.14s ease-out;
	scrollbar-width: thin;
	scrollbar-color: #CBD5E1 transparent;
}

.tia-select-panel.is-up {
	transform-origin: bottom center;
}

@keyframes tia-select-in {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.tia-select-panel__group {
	padding: 0.6rem 0.75rem 0.3rem;
	color: #94A3B8;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tia-select-panel__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	border-radius: 0.6rem;
	color: #334155;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	user-select: none;
}

.tia-select-panel__option.is-active {
	background: #F1F5F9;
	color: #0F172A;
}

.tia-select-panel__option.is-selected {
	background: #EEF2FF;
	color: #4338CA;
}

.tia-select-panel__option.is-selected.is-active {
	background: #E0E7FF;
}

/* "— Select a course —" style first options read as a hint, not a choice. */
.tia-select-panel__option.is-placeholder {
	color: #94A3B8;
	font-weight: 500;
}

.tia-select-panel__option.is-disabled {
	color: #CBD5E1;
	cursor: not-allowed;
}

.tia-select-panel__label {
	min-width: 0;
}

.tia-select-panel__check {
	flex-shrink: 0;
	color: #4F46E5;
	font-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
	.tia-select-panel {
		animation: none;
	}
}