:root {
	--brand-navy: #0b2545;
	--brand-navy-2: #13315c;
	--brand-red: #c8102e;
	--brand-red-dark: #a50d26;
	--brand-sky: #8da9c4;
	--surface: #f4f6fa;
	--bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-primary: var(--brand-navy-2);
	--bs-primary-rgb: 19, 49, 92;
	--bs-link-color: #1d4e89;
	--bs-link-color-rgb: 29, 78, 137;
	--bs-link-hover-color: var(--brand-red);
	--bs-border-radius: .6rem;
}

html, body { height: 100%; }
body {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	color: #1c2533;
}

.font-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- Navbar / footer ---- */
.app-navbar {
	background: var(--brand-navy);
	box-shadow: 0 2px 12px rgba(11, 37, 69, .25);
}
.app-navbar .navbar-brand { font-weight: 800; letter-spacing: -.02em; }
.app-navbar .nav-link { font-weight: 500; border-radius: .5rem; padding-inline: .75rem !important; }
.app-navbar .nav-link.active { background: rgba(255, 255, 255, .12); }
.brand-accent { color: #ff6b81; }

.app-footer { background: #fff; border-top: 1px solid #e3e8ef; color: #5b6778; }

/* ---- Buttons ---- */
.btn-primary {
	--bs-btn-bg: var(--brand-navy-2);
	--bs-btn-border-color: var(--brand-navy-2);
	--bs-btn-hover-bg: var(--brand-navy);
	--bs-btn-hover-border-color: var(--brand-navy);
	--bs-btn-active-bg: var(--brand-navy);
	--bs-btn-disabled-bg: var(--brand-navy-2);
}
.btn-outline-primary {
	--bs-btn-color: var(--brand-navy-2);
	--bs-btn-border-color: var(--brand-navy-2);
	--bs-btn-hover-bg: var(--brand-navy-2);
	--bs-btn-hover-border-color: var(--brand-navy-2);
	--bs-btn-active-bg: var(--brand-navy);
}
.btn-accent {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--brand-red);
	--bs-btn-border-color: var(--brand-red);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--brand-red-dark);
	--bs-btn-hover-border-color: var(--brand-red-dark);
	--bs-btn-active-bg: var(--brand-red-dark);
	--bs-btn-active-color: #fff;
	font-weight: 600;
}
.pagination { --bs-pagination-active-bg: var(--brand-navy-2); --bs-pagination-active-border-color: var(--brand-navy-2); --bs-pagination-color: var(--brand-navy-2); }

/* ---- Hero ---- */
.hero {
	background:
		radial-gradient(1200px 400px at 85% -10%, rgba(200, 16, 46, .35), transparent 60%),
		radial-gradient(900px 500px at -10% 120%, rgba(141, 169, 196, .35), transparent 60%),
		linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
	color: #fff;
}
.hero-lead { color: rgba(255, 255, 255, .8); }
.eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .75rem;
	font-weight: 700;
	color: #ff8fa0;
}
.lookup-card { border-radius: 1rem; }

/* ---- Cards ---- */
.card { border-color: #e3e8ef; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: #fff; border-bottom-color: #eef1f5; padding-block: .85rem; }
.card-header h2 { font-weight: 700; }

.stat-tile {
	background: #fff;
	border: 1px solid #e3e8ef;
	border-radius: var(--bs-border-radius);
	padding: 1rem 1.25rem;
	height: 100%;
}
.stat-value { font-size: 1.75rem; font-weight: 800; color: var(--brand-navy); line-height: 1.1; }
.stat-label { color: #5b6778; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.player-card { transition: transform .15s ease, box-shadow .15s ease; }
.player-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 24, 40, .08); }

/* ---- OPR displays ---- */
.opr-pill {
	display: inline-block;
	min-width: 4.5rem;
	text-align: center;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-weight: 700;
	font-size: .9rem;
	padding: .2rem .6rem;
	border-radius: 999px;
}
.opr-pill.pos { background: #e7f6ee; color: #11683c; }
.opr-pill.neg { background: #fdecee; color: #9d1028; }

.result-hero {
	background: linear-gradient(145deg, var(--brand-navy) 0%, var(--brand-navy-2) 70%, #1d4e89 100%);
	color: #fff;
	border-radius: 1rem;
}
.opr-big { text-align: center; }
.opr-big-label { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.opr-big-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: clamp(3rem, 8vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	margin-top: .35rem;
}
.mini-stat { background: rgba(255, 255, 255, .08); border-radius: .6rem; padding: .6rem .25rem; }
.mini-stat.total { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mini-value { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 1.05rem; }
.mini-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .65); }
.text-success-light { color: #7ee2a8; }
.text-danger-light { color: #ff9aa9; }

.breakdown-table td, .breakdown-table th { padding-inline: 1rem; }
.breakdown-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6778; font-weight: 600; }
.breakdown-table details summary { cursor: pointer; width: fit-content; }
.component-grid {
	display: grid;
	grid-template-columns: auto auto;
	gap: .1rem 1.5rem;
	width: fit-content;
	margin: .35rem 0 .25rem .75rem;
	font-size: .75rem;
}

.season-chip {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	border: 1px solid #dbe2ea;
	border-radius: 999px;
	padding: .3rem .8rem;
	text-decoration: none;
	color: inherit;
	background: #fff;
	font-size: .875rem;
}
.season-chip strong { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--brand-navy-2); }
.season-chip:hover { border-color: var(--brand-navy-2); background: #f0f4fa; }

.callout {
	border-left: 4px solid var(--brand-red);
	background: #fff;
	padding: 1rem 1.25rem;
	border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.chart-box { position: relative; height: 280px; }

.table > thead th { white-space: nowrap; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--brand-red); }

/* ---- Loading overlay ---- */
.loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(11, 37, 69, .55);
	backdrop-filter: blur(3px);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.loading-overlay.d-none { display: none !important; }
.loading-card { background: #fff; border-radius: 1rem; padding: 2rem 2.25rem; max-width: 380px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.baseball-spinner {
	width: 56px;
	height: 56px;
	margin-inline: auto;
	background: url("../favicon.svg") center / contain no-repeat;
	animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .baseball-spinner { animation-duration: 4s; } }

.breadcrumb { font-size: .875rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---- Lookup options ---- */
.save-filters { border: 1px dashed #d4dbe5; border-radius: var(--bs-border-radius); padding: .6rem .85rem .5rem; }
.save-filters legend { float: none; width: auto; font-size: .9rem; }
.opr-threshold { width: 5.5rem; }
.form-check-input:checked { background-color: var(--brand-navy-2); border-color: var(--brand-navy-2); }

/* ---- Leaders ---- */
.leaders-table th.sorted { color: var(--brand-navy-2); text-decoration: underline; text-underline-offset: .3em; }
.leaders-table td.rank-top { color: var(--brand-red); }

/* ---- Team logos ---- */
.team-logos { display: inline-flex; gap: .2rem; vertical-align: middle; margin-right: .4rem; }
.team-logo { object-fit: contain; }
.result-logos { background: #fff; border-radius: .75rem; padding: .35rem; line-height: 0; }
.result-logos .team-logos { margin-right: 0; }

/* ---- Best seasons ---- */
.best-icon { color: #c9a227; }
.best-badge { background: #fff4d6; color: #8a6d0b; border: 1px solid #f0d78c; font-weight: 600; }
.table > tbody > tr.best-row > td { background-color: #fffbf0; }

/* ---- Live (server-pushed) updates ---- */
.live-indicator {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
	color: #5b6778; background: #fff; border: 1px solid #e3e8ef; border-radius: 999px; padding: .2rem .65rem;
}
.live-indicator::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #adb5bd; }
.live-indicator[data-state="live"] { color: #11683c; }
.live-indicator[data-state="live"]::before { background: #22a55b; box-shadow: 0 0 0 0 rgba(34, 165, 91, .5); animation: live-pulse 2s infinite; }
.live-indicator[data-state="reconnecting"]::before { background: #e0a800; }
.live-indicator[data-state="offline"] { color: #9d1028; }
.live-indicator[data-state="offline"]::before { background: #c8102e; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 .4rem rgba(34, 165, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 165, 91, 0); } }
@media (prefers-reduced-motion: reduce) { .live-indicator[data-state="live"]::before { animation: none; } }

/* ---- Season stats (row hover / tap) ---- */
tr.has-stats { cursor: pointer; }
tr.has-stats:focus-visible { outline: 2px solid var(--brand-navy-2); outline-offset: -2px; }
tr.has-stats.expanded > td { background-color: #f0f4fa; }
.stats-hint .hint-hover { display: none; }
.can-hover .stats-hint .hint-hover { display: inline; }
.can-hover .stats-hint .hint-tap { display: none; }

.stats-popover {
	position: fixed; z-index: 1080; width: 34rem; max-width: calc(100vw - 16px);
	background: #fff; border: 1px solid #dbe2ea; border-radius: .75rem;
	box-shadow: 0 12px 32px rgba(16, 24, 40, .16); padding: .75rem .9rem;
	opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s, transform .12s, visibility .12s;
	pointer-events: none;
}
.stats-popover.show { opacity: 1; visibility: visible; transform: none; }
.stats-detail-row > td { background: #f7f9fc; padding: .6rem .75rem !important; }

.stats-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; min-width: 0; }
.stats-card-head .team-logos { margin-right: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .25rem; }
.stats-grid .stat { display: flex; flex-direction: column; align-items: center; background: #f4f6fa; border-radius: .4rem; padding: .3rem .1rem; }
.stats-detail-row .stats-grid .stat { background: #fff; }
.stat-label { font-size: .65rem; font-weight: 700; letter-spacing: .04em; color: #5b6778; text-transform: uppercase; }
.stat-value { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: .9rem; color: #1c2533; }
@media (max-width: 575.98px) { .stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Keep the expanded card within the visible width when the table itself scrolls sideways (phones). */
.stats-detail-row .stats-card { position: sticky; left: .75rem; width: min(100%, calc(100vw - 4rem)); }
.stats-detail-row .stats-card-head { flex-wrap: wrap; }
.stats-detail-row .stats-card-head .ms-auto { margin-left: 0 !important; width: 100%; }