/*
 * Sportslytics UI — Custom styles, print sheet, animated badge states
 * Supplements Tailwind CDN Play.
 * All rules scoped to .spl-scope to prevent Divi theme bleed.
 */

/* ── Divi isolation wrapper — outermost container for all 4 shortcodes ──── */
/* Strips Divi's aggressive margin/padding/box-model overrides so that        */
/* the inner canvas namespaces compile their Tailwind correctly.              */

.sportslytics-divi-wrapper {
	all: initial;
	display: block;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #111827;
	box-sizing: border-box;
}

.sportslytics-divi-wrapper *,
.sportslytics-divi-wrapper *::before,
.sportslytics-divi-wrapper *::after {
	box-sizing: border-box;
}

/* Re-anchor Divi's et_pb_module margin reset so our inner grid isn't squashed */
.sportslytics-divi-wrapper .et_pb_module,
.sportslytics-divi-wrapper .et_pb_row,
.sportslytics-divi-wrapper .et_pb_column {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

/* ── Global form-element border enforcement ──────────────────────────────── */
/* Tailwind's border-gray-200 (#e5e7eb) fails WCAG contrast on white.        */
/* Override every input/select/textarea inside any sportslytics canvas to     */
/* use gray-300 (#d1d5db) which clears the 3:1 non-text contrast threshold.  */

.sportslytics-divi-wrapper input,
.sportslytics-divi-wrapper select,
.sportslytics-divi-wrapper textarea {
	border-color: #d1d5db !important; /* gray-300 */
}

.sportslytics-divi-wrapper input:focus,
.sportslytics-divi-wrapper select:focus,
.sportslytics-divi-wrapper textarea:focus {
	border-color: #0d9488 !important; /* teal-600 */
	box-shadow: 0 0 0 1px #0d9488 !important;
	outline: none !important;
}

/* Currency input flex-group wrapper: border lives on the outer div, not the input */
.sportslytics-divi-wrapper .spl-currency-group {
	border-color: #d1d5db !important;
}

.sportslytics-divi-wrapper .spl-currency-group:focus-within {
	border-color: #0d9488 !important;
	box-shadow: 0 0 0 1px #0d9488 !important;
}

/* ── sportslytics-board-canvas — Recruiting Board namespace ─────────────── */

.sportslytics-board-canvas {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #111827;
	max-width: 1400px;
	margin: 0 auto;
}

.sportslytics-board-canvas *,
.sportslytics-board-canvas *::before,
.sportslytics-board-canvas *::after {
	box-sizing: border-box;
}

.sportslytics-board-canvas input,
.sportslytics-board-canvas select,
.sportslytics-board-canvas button {
	font-family: inherit;
	font-size: inherit;
}

/* Teal focus ring override */
.sportslytics-board-canvas select:focus,
.sportslytics-board-canvas input:focus,
.sportslytics-board-canvas button:focus-visible {
	outline: none;
	border-color: #0d9488 !important;
	box-shadow: 0 0 0 1px #0d9488 !important;
}

/* Kanban column min-height so empty columns don't collapse */
.sportslytics-board-canvas .spl-phase-column {
	min-height: 220px;
}

/* Board card — fade-in on mount / DOM move */
.sportslytics-board-canvas .spl-board-card {
	animation: spl-fade-in .18s ease;
	transition: box-shadow .12s, border-color .12s;
}

.sportslytics-board-canvas .spl-board-card:hover {
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ── Micro-tag pill tokens ────────────────────────────────────────────────── */

.spl-tag-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	font-size: .875rem;
	cursor: pointer;
	transition: background .12s, border-color .12s, transform .08s;
	border: 1px solid transparent;
}

.spl-tag-pill:active {
	transform: scale(.9);
}

/* Off state — muted gray */
.spl-tag-off {
	background: #f3f4f6;   /* gray-100 */
	border-color: #e5e7eb; /* gray-200 */
	opacity: .55;
}

.spl-tag-off:hover {
	background: #e5e7eb;
	opacity: .85;
}

/* On state — cobalt tint */
.spl-tag-on {
	background: #dbeafe;   /* blue-100 */
	border-color: #93c5fd; /* blue-300 */
	opacity: 1;
}

.spl-tag-on:hover {
	background: #bfdbfe;   /* blue-200 */
}

/* ── Phase column left-border accent classes (used by JS card move) ──────── */
/* Must match PHASE_CONFIG 'ring' values in the PHP file.                      */

.border-l-gray-300  { border-left-color: #d1d5db !important; }
.border-l-blue-400  { border-left-color: #60a5fa !important; }
.border-l-amber-400 { border-left-color: #fbbf24 !important; }
.border-l-green-400 { border-left-color: #4ade80 !important; }
.border-l-teal-500  { border-left-color: #14b8a6 !important; }

/* ── Print styles for the board ─────────────────────────────────────────── */

@media print {
	.sportslytics-board-canvas .spl-no-print,
	.sportslytics-board-canvas select,
	.sportslytics-board-canvas .spl-tag-pill {
		display: none !important;
	}

	.sportslytics-board-canvas .spl-board-card {
		page-break-inside: avoid;
		border: 1px solid #d1d5db !important;
		border-left-width: 3px !important;
		box-shadow: none !important;
		animation: none !important;
		margin-bottom: 6pt;
	}

	.sportslytics-board-canvas .spl-phase-column {
		page-break-inside: avoid;
	}

	/* Single-column print layout regardless of grid */
	.sportslytics-board-canvas #[id$="-kanban"] {
		display: block !important;
	}

	.sportslytics-board-canvas .spl-phase-column {
		margin-bottom: 16pt;
		break-before: auto;
	}
}

/* ── sportslytics-discovery-canvas — Discovery Engine namespace ─────────── */

.sportslytics-discovery-canvas {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #111827;
	max-width: 1200px;
	margin: 0 auto;
}

.sportslytics-discovery-canvas *,
.sportslytics-discovery-canvas *::before,
.sportslytics-discovery-canvas *::after {
	box-sizing: border-box;
}

.sportslytics-discovery-canvas input,
.sportslytics-discovery-canvas select,
.sportslytics-discovery-canvas textarea,
.sportslytics-discovery-canvas button {
	font-family: inherit;
	font-size: inherit;
}

/* Teal focus ring — override Divi's input focus */
.sportslytics-discovery-canvas input:focus,
.sportslytics-discovery-canvas select:focus,
.sportslytics-discovery-canvas textarea:focus {
	outline: none;
	border-color: #0d9488 !important;
	box-shadow: 0 0 0 1px #0d9488 !important;
}

/* Custom slider track + thumb for Block A·2 weight sliders */
.sportslytics-discovery-canvas .spl-disc-slider {
	-webkit-appearance: none;
	appearance: none;
	height: 20px;         /* hit-target height */
	background: transparent;
	cursor: pointer;
}

.sportslytics-discovery-canvas .spl-disc-slider::-webkit-slider-runnable-track {
	height: 6px;
	background: #e5e7eb;  /* gray-200 */
	border-radius: 999px;
}

.sportslytics-discovery-canvas .spl-disc-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -6px;     /* center on track */
	border-radius: 50%;
	background: #1d4ed8;  /* cobalt blue-700 */
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #1d4ed8, 0 2px 4px rgba(0,0,0,.15);
	transition: transform .1s;
}

.sportslytics-discovery-canvas .spl-disc-slider::-webkit-slider-thumb:active {
	transform: scale(1.2);
}

.sportslytics-discovery-canvas .spl-disc-slider::-moz-range-track {
	height: 6px;
	background: #e5e7eb;
	border-radius: 999px;
}

.sportslytics-discovery-canvas .spl-disc-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #1d4ed8;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #1d4ed8;
	cursor: pointer;
}

/* Sticky banner entrance animation */
.sportslytics-discovery-canvas #[id$="-sticky-banner"]:not(.hidden) {
	animation: spl-banner-in .2s ease;
}

@keyframes spl-banner-in {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);   opacity: 1; }
}

/* Result row fade-in on AJAX inject */
.sportslytics-discovery-canvas .spl-result-row {
	animation: spl-fade-in .22s ease;
}

/* Position room multi-select — consistent height */
.sportslytics-discovery-canvas select[multiple] {
	overflow-y: auto;
}

/* ── sportslytics-form-canvas — Onboarding Hub namespace ────────────────── */
/* Isolates all Tailwind utility classes from Divi / parent theme styles.     */

.sportslytics-form-canvas {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #111827;
	max-width: 1100px;
	margin: 0 auto;
}

.sportslytics-form-canvas *,
.sportslytics-form-canvas *::before,
.sportslytics-form-canvas *::after {
	box-sizing: border-box;
}

/* Override Divi's aggressive input resets inside the canvas */
.sportslytics-form-canvas input,
.sportslytics-form-canvas select,
.sportslytics-form-canvas textarea,
.sportslytics-form-canvas button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Guarantee teal-600 focus ring renders above Divi's native focus styles */
.sportslytics-form-canvas input:focus,
.sportslytics-form-canvas select:focus,
.sportslytics-form-canvas textarea:focus {
	outline: none;
	border-color: #0d9488 !important;
	box-shadow: 0 0 0 1px #0d9488 !important;
}

/* border-l-4 border-l-teal-600 — explicit override for Divi border reset */
.sportslytics-form-canvas .border-l-4.border-l-teal-600 {
	border-left: 4px solid #0d9488 !important;
}

/* ── sportslytics-profile-canvas — Recruit Profile namespace ────────────── */

.sportslytics-profile-canvas {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #111827;
	max-width: 1100px;
	margin: 0 auto;
}

.sportslytics-profile-canvas *,
.sportslytics-profile-canvas *::before,
.sportslytics-profile-canvas *::after {
	box-sizing: border-box;
}

.sportslytics-profile-canvas input,
.sportslytics-profile-canvas select,
.sportslytics-profile-canvas textarea,
.sportslytics-profile-canvas button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Teal focus ring — overrides Divi's default focus styles */
.sportslytics-profile-canvas input:focus,
.sportslytics-profile-canvas select:focus,
.sportslytics-profile-canvas textarea:focus,
.sportslytics-profile-canvas button:focus-visible {
	outline: none;
	border-color: #0d9488 !important;
	box-shadow: 0 0 0 1px #0d9488 !important;
}

/* Weight slider — cobalt blue track + thumb (matches Discovery Engine) */
.sportslytics-profile-canvas .spl-profile-slider {
	-webkit-appearance: none;
	appearance: none;
	height: 20px;
	background: transparent;
	cursor: pointer;
}

.sportslytics-profile-canvas .spl-profile-slider::-webkit-slider-runnable-track {
	height: 6px;
	background: #e5e7eb;  /* gray-200 */
	border-radius: 999px;
}

.sportslytics-profile-canvas .spl-profile-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -6px;
	border-radius: 50%;
	background: #1d4ed8;  /* cobalt blue-700 */
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #1d4ed8, 0 2px 4px rgba(0,0,0,.15);
	transition: transform .1s;
}

.sportslytics-profile-canvas .spl-profile-slider::-webkit-slider-thumb:active {
	transform: scale(1.2);
}

.sportslytics-profile-canvas .spl-profile-slider::-moz-range-track {
	height: 6px;
	background: #e5e7eb;
	border-radius: 999px;
}

.sportslytics-profile-canvas .spl-profile-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #1d4ed8;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #1d4ed8;
	cursor: pointer;
}

/* Score bar fill transition */
.sportslytics-profile-canvas .spl-score-fill {
	transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* Timeline connector line adjustment on mobile */
@media (max-width: 640px) {
	.sportslytics-profile-canvas .relative.pl-6 > .absolute {
		left: .4rem;
	}
}

/* ── Print styles for the profile ───────────────────────────────────────── */

@media print {
	.sportslytics-profile-canvas .spl-no-print,
	.sportslytics-profile-canvas button,
	.sportslytics-profile-canvas input[type="range"] {
		display: none !important;
	}

	.sportslytics-profile-canvas {
		max-width: 100%;
	}

	/* Flatten two-column grid to single column */
	.sportslytics-profile-canvas .lg\:grid-cols-3 {
		grid-template-columns: 1fr !important;
	}

	.sportslytics-profile-canvas .lg\:col-span-2,
	.sportslytics-profile-canvas .lg\:col-span-1 {
		grid-column: span 1 !important;
	}

	.sportslytics-profile-canvas .bg-white {
		border: 1px solid #d1d5db !important;
		box-shadow: none !important;
	}

	@page {
		margin: 0.75in;
		size: letter portrait;
	}
}

/* ── Reset within scope ─────────────────────────────────────────────────── */

.spl-scope *,
.spl-scope *::before,
.spl-scope *::after {
	box-sizing: border-box;
}

.spl-scope {
	/* Isolate font and line-height from Divi / theme */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #1e293b;
}

.spl-scope input,
.spl-scope select,
.spl-scope textarea,
.spl-scope button {
	font-family: inherit;
}

/* ── Score bar animation ────────────────────────────────────────────────── */

.spl-score-row > div > div:last-child {
	transition: width 0.5s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* ── Compliance badges ──────────────────────────────────────────────────── */

/* Active — solid teal */
.spl-badge-active {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .18rem .6rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: #0d9488;
	color: #fff;
	border: 1.5px solid #0d9488;
}

/* Watchlist — amber dashed border, animated dash offset */
.spl-badge-watchlist {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .18rem .6rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: #fff;
	color: #b45309;
	border: 2px dashed #f59e0b;
	animation: spl-dash-spin 8s linear infinite;
}

@keyframes spl-dash-spin {
	from { border-dash-offset: 0; }
	to   { border-dash-offset: 40px; }
}

/* DIII unrestricted — blue */
.spl-badge-unrestricted {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .18rem .6rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: #dbeafe;
	color: #1d4ed8;
	border: 1.5px solid #93c5fd;
}

/* ── Verification badges ────────────────────────────────────────────────── */

/* Verified — solid teal */
.spl-verify-ok {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .18rem .55rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	background: #ccfbf1;
	color: #0f766e;
	border: 1.5px solid #5eead4;
}

/* Unverified — amber dashed, pulsing */
.spl-verify-proxy {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .18rem .55rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	background: #fffbeb;
	color: #92400e;
	border: 2px dashed #fcd34d;
	animation: spl-proxy-pulse 2.5s ease-in-out infinite;
}

@keyframes spl-proxy-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .6; }
}

/* Transition from proxy → verified (JS can swap classes) */
.spl-verify-proxy.spl-verifying {
	animation: none;
	opacity: .5;
}

/* ── Weight sliders ─────────────────────────────────────────────────────── */

.spl-scope input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: #e2e8f0;
	border-radius: 999px;
	outline: none;
	cursor: pointer;
}

.spl-scope input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: currentColor;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px currentColor, 0 2px 6px rgba(0,0,0,.15);
	cursor: pointer;
	transition: transform .1s;
}

.spl-scope input[type="range"]::-webkit-slider-thumb:active {
	transform: scale(1.2);
}

.spl-scope input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	cursor: pointer;
}

/* ── Board cards ────────────────────────────────────────────────────────── */

.spl-board-card {
	transition: box-shadow .15s, opacity .3s;
}

.spl-board-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.07);
}

/* ── Tag buttons ────────────────────────────────────────────────────────── */

.spl-tag-btn {
	transition: background .15s, color .15s, border-color .15s, transform .1s;
}

.spl-tag-btn:active {
	transform: scale( .96 );
}

/* ── Phase filter tabs ──────────────────────────────────────────────────── */

.spl-phase-btn {
	transition: background .15s, color .15s, border-color .15s;
}

/* ── Prospect card fade-in ──────────────────────────────────────────────── */

.spl-prospect-card {
	animation: spl-fade-in .25s ease;
}

@keyframes spl-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal overlay ──────────────────────────────────────────────────────── */

.spl-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15,23,42,.55);
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.spl-modal-box {
	background: #fff;
	border-radius: 14px;
	padding: 2rem;
	width: 100%;
	max-width: 680px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0,0,0,.2);
	animation: spl-modal-in .22s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

@keyframes spl-modal-in {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: scale(1); }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media ( max-width: 768px ) {
	.spl-scope [style*="grid-template-columns:1fr 340px"] {
		grid-template-columns: 1fr !important;
	}

	.spl-scope [style*="grid-template-columns:repeat(auto-fit,minmax(320px"] {
		grid-template-columns: 1fr !important;
	}
}

/* ── Print styles ───────────────────────────────────────────────────────── */

@media print {

	/* Hide interactive chrome */
	.spl-no-print,
	.spl-modal-overlay,
	button,
	select,
	input[type="range"],
	input[type="checkbox"] {
		display: none !important;
	}

	/* Show print-only elements */
	.spl-print-only {
		display: block !important;
	}

	/* Remove decorative shadows and transitions */
	.spl-board-card,
	.spl-scope [style] {
		box-shadow: none !important;
		animation: none !important;
		transition: none !important;
	}

	/* Force white backgrounds */
	.spl-scope,
	.spl-board-card,
	.spl-scope > div {
		background: #fff !important;
		color: #000 !important;
	}

	/* Board header */
	.spl-scope h2,
	.spl-scope h3 {
		page-break-after: avoid;
	}

	/* Don't break cards across pages */
	.spl-board-card {
		page-break-inside: avoid;
		border: 1px solid #ccc !important;
		border-left-width: 4px !important;
		margin-bottom: 6pt !important;
		padding: 8pt 10pt !important;
	}

	/* Score bars — print as text only */
	.spl-score-row > div > div:last-child {
		display: none;
	}

	/* Print compact layout */
	body {
		font-size: 10pt;
	}

	@page {
		margin: 0.75in;
		size: letter portrait;
	}
}