/* ═══════════════════════════════════════════════════════════════════════
   Pick Futures Exchange — Stylesheet
   Bloomberg terminal aesthetic matching the IDP Hub
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,700;0,900;1,400&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
	--pf-bg:         #0b0f18;
	--pf-bg2:        #111827;
	--pf-bg3:        #1a2236;
	--pf-border:     rgba(255,255,255,0.06);
	--pf-text:       #d1d8e0;
	--pf-muted:      #636d7e;
	--pf-accent:     #00c076;
	--pf-accent2:    #8b5cf6;
	--pf-bull:       #00c076;
	--pf-bear:       #f6465d;
	--pf-warn:       #f59e0b;
	--pf-mono:       'JetBrains Mono', monospace;
	--pf-sans:       system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
.pf-wrap { font-family: var(--pf-sans); background: var(--pf-bg); color: var(--pf-text); min-height: 100vh; }
.pf-wrap *, .pf-wrap *::before, .pf-wrap *::after { box-sizing: border-box; }

/* ── Top-level Header ─────────────────────────────────────────────────── */
.pf-header {
	background: var(--pf-bg2);
	border-bottom: 1px solid var(--pf-border);
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.pf-header-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.pf-header-title h1 {
	font-family: var(--pf-sans);
	font-size: 1.45rem;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
	line-height: 1;
}
.pf-header-title h1 span { color: var(--pf-accent); }
.pf-header-tag {
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--pf-accent);
	background: rgba(0,192,118,0.1);
	border: 1px solid rgba(0,192,118,0.2);
	padding: 2px 8px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.pf-header-meta {
	display: flex;
	gap: 24px;
	align-items: center;
}
.pf-meta-stat { text-align: right; }
.pf-meta-stat strong { display: block; font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1; }
.pf-meta-stat small { font-size: 0.65rem; color: var(--pf-muted); text-transform: uppercase; letter-spacing: 0.07em; }

/* ── Market Movers Ticker Rows ────────────────────────────────────────── */
.pf-movers-section {
	border-bottom: 1px solid var(--pf-border);
	background: var(--pf-bg2);
}
.pf-movers-row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--pf-border);
	overflow: hidden;
}
.pf-movers-row:last-child { border-bottom: none; }
.pf-movers-label {
	flex-shrink: 0;
	width: 130px;
	padding: 8px 14px;
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	display: flex;
	align-items: center;
	gap: 6px;
	border-right: 1px solid var(--pf-border);
}
.pf-movers-label.buy        { color: var(--pf-bull); background: rgba(0,192,118,0.05); }
.pf-movers-label.overpriced { color: var(--pf-bear); background: rgba(246,70,93,0.05); }
.pf-movers-label.empty      { color: var(--pf-muted); }
.pf-movers-items { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; flex: 1; }
.pf-movers-items::-webkit-scrollbar { display: none; }
.pf-mover-chip {
	flex-shrink: 0;
	padding: 7px 14px;
	border-right: 1px solid var(--pf-border);
	cursor: default;
	transition: background 0.15s;
}
.pf-mover-chip:hover { background: rgba(255,255,255,0.03); }
.pf-mover-chip-name { font-size: 0.78rem; font-weight: 700; color: #fff; line-height: 1.1; }
.pf-mover-chip-sub  { font-size: 0.65rem; color: var(--pf-muted); margin-top: 1px; }
.pf-mover-chip-sub .bull { color: var(--pf-bull); font-weight: 700; }
.pf-mover-chip-sub .bear { color: var(--pf-bear); font-weight: 700; }
.pf-mover-empty { padding: 10px 16px; font-size: 0.75rem; color: var(--pf-muted); font-style: italic; }

/* ── Filter Bar ───────────────────────────────────────────────────────── */
.pf-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 24px;
	background: var(--pf-bg2);
	border-bottom: 1px solid var(--pf-border);
	align-items: center;
}
.pf-filter-bar label { font-size: 0.65rem; color: var(--pf-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.pf-filter-bar select {
	background: var(--pf-bg3);
	border: 1px solid var(--pf-border);
	color: var(--pf-text);
	font-family: var(--pf-sans);
	font-size: 0.8rem;
	padding: 5px 10px;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
	transition: border-color 0.15s;
}
.pf-filter-bar select:focus { border-color: var(--pf-accent); }
.pf-filter-group { display: flex; align-items: center; gap: 6px; }
.pf-filter-divider { width: 1px; height: 24px; background: var(--pf-border); margin: 0 4px; }
.pf-sort-btn {
	background: var(--pf-bg3);
	border: 1px solid var(--pf-border);
	color: var(--pf-muted);
	font-family: var(--pf-sans);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 12px;
	border-radius: 4px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}
.pf-sort-btn:hover, .pf-sort-btn.active { color: #fff; border-color: var(--pf-accent); }
.pf-result-count { margin-left: auto; font-size: 0.7rem; color: var(--pf-muted); }

/* ── Pick Card Grid ───────────────────────────────────────────────────── */
.pf-board { padding: 20px 24px; }
.pf-year-section { margin-bottom: 32px; }
.pf-year-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.pf-year-header h2 {
	font-family: var(--pf-sans);
	font-size: 1.05rem;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
}
.pf-year-header-line { flex: 1; height: 1px; background: var(--pf-border); }
.pf-round-label {
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--pf-muted);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 3px 8px;
	border: 1px solid var(--pf-border);
	border-radius: 3px;
}
.pf-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}

/* ── Individual Pick Card ─────────────────────────────────────────────── */
.pf-card {
	background: var(--pf-bg2);
	border: 1px solid var(--pf-border);
	border-left: 3px solid var(--pf-border);
	border-radius: 6px;
	padding: 10px 12px;
	transition: transform 0.12s, box-shadow 0.12s;
	position: relative;
	overflow: hidden;
}
.pf-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.pf-card.signal-buy        { border-left-color: var(--pf-bull); }
.pf-card.signal-overpriced { border-left-color: var(--pf-bear); }
.pf-card.signal-watch      { border-left-color: var(--pf-warn); }
.pf-card.signal-hold       { border-left-color: #1e2a3a; }
.pf-card.signal-pending    { border-left-color: var(--pf-accent2); }

.pf-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.pf-card-title  { font-size: 0.92rem; font-weight: 800; color: #fff; line-height: 1.25; max-width: 70%; }
.pf-card-title .pick-year { font-size: 0.65rem; color: var(--pf-muted); font-weight: 400; display: block; }
.pf-orig-line {
	display: block;
	margin-top: 2px;
	font-size: 0.62rem;
	font-weight: 400;
	color: #64748b;
	line-height: 1.3;
	letter-spacing: 0.01em;
}
.pf-card-footer-tier {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--pf-border);
	display: flex;
	justify-content: flex-start;
}

/* Signal badge */
.pf-signal-badge {
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 3px;
	flex-shrink: 0;
}
.pf-signal-badge.buy        { background: rgba(0,192,118,0.12); color: var(--pf-bull); }
.pf-signal-badge.overpriced { background: rgba(246,70,93,0.12);  color: var(--pf-bear); }
.pf-signal-badge.watch      { background: rgba(245,158,11,0.12); color: var(--pf-warn); }
.pf-signal-badge.hold       { background: rgba(255,255,255,0.05); color: var(--pf-muted); }
.pf-signal-badge.pending    { background: rgba(139,92,246,0.1); color: var(--pf-accent2); }

/* Holder row */
.pf-card-holder {
	font-size: 0.65rem;
	color: var(--pf-muted);
	margin-bottom: 6px;
}
.pf-card-holder strong {
	color: var(--pf-text);
}

/* Projection value + range (same layout; value is larger) */
.pf-proj-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-bottom: 8px;
}
.pf-proj-row--value {
	margin-bottom: 6px;
}
.pf-proj-range {
	font-family: var(--pf-mono);
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
}
.pf-proj-value {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--pf-accent);
	letter-spacing: -0.02em;
}
.pf-proj-class {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pf-muted);
	background: rgba(255,255,255,0.05);
	padding: 1px 4px;
	border-radius: 2px;
}

/* Trend */
.pf-trend {
	font-size: 0.65rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 3px;
	margin-bottom: 6px;
}
.pf-trend.up   { color: var(--pf-bull); }
.pf-trend.down { color: var(--pf-bear); }
.pf-trend.flat { color: var(--pf-muted); }
.pf-trend-arrow { font-size: 0.8rem; }

/* Risk bar */
.pf-risk-row { margin-bottom: 6px; }
.pf-risk-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.58rem;
	color: var(--pf-muted);
	margin-bottom: 2px;
}
.pf-risk-label strong { color: var(--pf-text); }
.pf-risk-track { background: rgba(255,255,255,0.05); border-radius: 2px; height: 3px; overflow: hidden; }
.pf-risk-fill  { height: 100%; border-radius: 2px; }
.risk-low  .pf-risk-fill { background: var(--pf-bull); }
.risk-mod  .pf-risk-fill { background: var(--pf-warn); }
.risk-high .pf-risk-fill { background: var(--pf-bear); }

/* Factor tags */
.pf-factors { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.pf-factor-tag {
	font-size: 0.58rem;
	color: var(--pf-muted);
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--pf-border);
	border-radius: 2px;
	padding: 1px 4px;
	line-height: 1.2;
}

/* Card footer stats */
.pf-card-footer {
	display: flex;
	gap: 14px;
	padding-top: 8px;
	border-top: 1px solid var(--pf-border);
	font-size: 0.67rem;
	color: var(--pf-muted);
}
.pf-card-footer .val { color: #fff; font-weight: 700; }
.pf-card-footer .val.bull { color: var(--pf-bull); }
.pf-card-footer .val.bear { color: var(--pf-bear); }

/* ── Manager Inventory Table ──────────────────────────────────────────── */
.pf-inventory { padding: 0 24px 32px; }
.pf-inventory-title {
	font-size: 1rem;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 14px;
	padding-top: 4px;
}
.pf-inv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}
.pf-inv-card {
	background: var(--pf-bg2);
	border: 1px solid var(--pf-border);
	border-radius: 8px;
	overflow: hidden;
}
.pf-inv-card-header {
	background: var(--pf-bg3);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px solid var(--pf-border);
}
.pf-inv-header-left {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.pf-inv-name { font-size: 0.85rem; font-weight: 800; color: #fff; }
.pf-inv-total {
	font-size: 0.95rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #bd66ff;
	letter-spacing: 0.01em;
	line-height: 1.15;
}
.pf-inv-balance {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 3px;
	flex-shrink: 0;
	align-self: flex-start;
}
.pf-inv-balance.positive { background: rgba(0,192,118,0.12); color: var(--pf-bull); }
.pf-inv-balance.negative { background: rgba(246,70,93,0.12);  color: var(--pf-bear); }
.pf-inv-balance.neutral  { background: rgba(255,255,255,0.05); color: var(--pf-muted); }
.pf-inv-body { padding: 10px 14px; }
.pf-inv-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	border-bottom: 1px solid rgba(255,255,255,0.03);
	font-size: 0.72rem;
}
.pf-inv-row:last-child { border-bottom: none; }
.pf-inv-pick-meta { min-width: 0; flex: 1 1 auto; }
.pf-inv-pick-name {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--pf-text);
	font-weight: 700;
}
.pf-inv-year {
	display: inline-flex;
	align-items: center;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	padding: 1px 6px;
	border-radius: 3px;
	background: rgba(189, 102, 255, 0.14);
	border: 1px solid rgba(189, 102, 255, 0.35);
	color: #bd66ff;
	font-variant-numeric: tabular-nums;
}
.pf-inv-round { color: var(--pf-text); font-weight: 700; }
.pf-inv-pick-owner { color: var(--pf-muted); font-size: 0.65rem; }
.pf-inv-pick-right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.pf-inv-pick-val {
	font-size: 0.72rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #bd66ff;
	white-space: nowrap;
}
.pf-inv-pick-signal { }
.pf-inv-given-note {
	font-size: 0.65rem;
	color: var(--pf-muted);
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--pf-border);
}
.pf-inv-given-val {
	color: rgba(189, 102, 255, 0.75);
	font-weight: 700;
	margin-left: 2px;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.pf-empty {
	text-align: center;
	padding: 60px 24px;
	color: var(--pf-muted);
}
.pf-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.pf-empty h3 { font-size: 1.1rem; color: #fff; margin-bottom: 8px; }
.pf-empty p { font-size: 0.85rem; max-width: 400px; margin: 0 auto; line-height: 1.6; }

/* ── Guide Banner ─────────────────────────────────────────────────────── */
.pf-guide-container {
	margin: 20px 24px 0;
	background: linear-gradient(135deg, rgba(19, 25, 42, 0.6) 0%, rgba(13, 17, 26, 0.8) 100%);
	border: 1px solid var(--pf-border);
	border-radius: 8px;
	padding: 16px 20px;
}
.pf-guide-header {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	padding-bottom: 10px;
	margin-bottom: 14px;
}
.pf-guide-icon {
	font-size: 1.25rem;
	line-height: 1;
}
.pf-guide-title {
	font-size: 0.9rem;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.pf-guide-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.pf-guide-card {
	background: rgba(255, 255, 255, 0.015);
	border: 1px solid rgba(255, 255, 255, 0.03);
	border-radius: 6px;
	padding: 12px 14px;
	transition: background 0.15s;
}
.pf-guide-card:hover {
	background: rgba(255, 255, 255, 0.025);
}
.pf-guide-card-title {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.pf-guide-card-text {
	font-size: 0.72rem;
	color: var(--pf-muted);
	line-height: 1.45;
	margin: 0;
}
.pf-guide-card-text strong {
	color: var(--pf-text);
}
.pf-guide-card-text .bull {
	color: var(--pf-bull);
}
.pf-guide-card-text .bear {
	color: var(--pf-bear);
}

/* ── Card Customizations ──────────────────────────────────────────────── */
.pf-proj-label {
	font-size: 0.65rem;
	color: var(--pf-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-right: 4px;
}
.pf-proj-class {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 6px;
	border-radius: 3px;
	margin-left: auto;
}
.pf-proj-class.non-playoff {
	background: rgba(0, 192, 118, 0.08);
	color: var(--pf-bull);
	border: 1px solid rgba(0, 192, 118, 0.15);
}
.pf-proj-class.playoff {
	background: rgba(139, 92, 246, 0.08);
	color: var(--pf-accent2);
	border: 1px solid rgba(139, 92, 246, 0.15);
}

.pf-card-evidence {
	margin-bottom: 6px;
	padding-top: 2px;
}
.pf-evidence-badge {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.6rem;
	padding: 3px 6px;
	border-radius: 4px;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--pf-border);
}
.pf-evidence-badge span {
	color: var(--pf-muted);
}
.pf-evidence-badge strong {
	color: #fff;
	text-transform: uppercase;
	font-size: 0.58rem;
}
.pf-evidence-badge.max-pf strong {
	color: var(--pf-accent2);
}
.pf-evidence-badge.standings strong {
	color: var(--pf-warn);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 992px) {
	.pf-guide-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}
@media (max-width: 768px) {
	.pf-header { flex-direction: column; align-items: flex-start; }
	.pf-header-meta { flex-wrap: wrap; gap: 12px; }
	.pf-filter-bar { gap: 6px; }
	.pf-board { padding: 14px; }
	.pf-card-grid { grid-template-columns: 1fr; }
	.pf-movers-label { width: 90px; font-size: 0.58rem; }
	.pf-guide-container { margin: 15px 14px 0; }
}