/* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Force light color scheme on the entire page and all form elements so OS dark mode never auto-darkens inputs or selects */ html { color-scheme: light; } input, select, textarea, button { color-scheme: light; } :root { --bg-primary: #f0ede8; --bg-secondary: #e8e4de; --bg-card: #ffffff; --bg-card-hover: #f8f6f3; --bg-input: #f4f1ed; --border: #d4cfc8; --border-light: #c4bfb8; --text-primary: #1a1a2e; --text-secondary: #4a5066; --text-muted: #8892a4; --accent: #3b82f6; --accent-hover: #2563eb; --accent-light: rgba(59, 130, 246, 0.12); --green: #059669; --green-light: rgba(5, 150, 105, 0.12); --red: #dc2626; --red-light: rgba(220, 38, 38, 0.12); --yellow: #d97706; --yellow-light: rgba(217, 119, 6, 0.12); --purple: #7c3aed; --purple-light: rgba(124, 58, 237, 0.12); --sidebar-w: 240px; --topbar-h: 76px; --radius: 12px; --radius-sm: 8px; --shadow: 0 4px 24px rgba(0,0,0,0.12); --transition: 200ms ease; } /* ===== ETR THEME OVERRIDE ===== */ /* Applied when — all other CSS stays unchanged */ [data-theme="etr"] { --accent: #22a648; --accent-hover: #1a8a3a; --accent-light: rgba(34, 166, 72, 0.12); } [data-theme="etr"] .sidebar { background: #0d0d0d; border-bottom: 1px solid #22a648; } [data-theme="etr"] .sidebar-header { border-bottom-color: #1f1f1f; } [data-theme="etr"] .logo-text { color: #fff; -webkit-text-fill-color: #fff; } [data-theme="etr"] .logo-year { color: #22a648; -webkit-text-fill-color: #22a648; } [data-theme="etr"] .nav-item:hover { background: rgba(34,166,72,0.08); } [data-theme="etr"] .nav-item.active { color: #22a648; background: rgba(34,166,72,0.12); } [data-theme="etr"] .nav-item.active::before { background: #22a648; } [data-theme="etr"] .team-search:focus { border-color: #22a648; } [data-theme="etr"] .team-nav-item:hover { background: rgba(34,166,72,0.08); } [data-theme="etr"] .team-nav-item.active { color: #22a648; } [data-theme="etr"] .topbar { background: #111; border-bottom-color: #1f1f1f; } [data-theme="etr"] .topbar-toggle { color: #6b7280; } [data-theme="etr"] .topbar-toggle:hover { color: #fff; background: #1f1f1f; } [data-theme="etr"] .page-title { color: #fff; } [data-theme="etr"] .page-subtitle { color: #4b5563; } [data-theme="etr"] .scoring-badge { background: rgba(34,166,72,0.15); color: #22a648; border-color: rgba(34,166,72,0.35); } [data-theme="etr"] .last-updated { color: #4b5563; } [data-theme="etr"] .export-btn { background: rgba(34,166,72,0.15); border-color: rgba(34,166,72,0.4); color: #22a648; } [data-theme="etr"] .export-btn:hover { background: rgba(34,166,72,0.25); border-color: rgba(34,166,72,0.7); color: #4ade80; } [data-theme="etr"] .trend-btn.active { background: rgba(34,166,72,0.18); color: #22a648; } /* ===== PROCESS WINS THEME ===== */ /* Content area is light/white; sidebar + topbar stay explicitly dark */ [data-theme="pw"] { --bg-primary: #ffffff; --bg-secondary: #F0EFEA; --bg-card: #ffffff; --bg-card-hover: #F7F6F2; --bg-input: #F8F7F4; --border: #DDD9D0; --border-light: #EAE7E0; --text-primary: #1B2B22; --text-secondary:#4A5A50; --text-muted: #8B9186; --accent: #C9B88C; --accent-hover: #D9C7A0; --accent-light: rgba(201, 184, 140, 0.16); --green: #16A34A; --green-light: rgba(22, 163, 74, 0.10); --red: #DC2626; --red-light: rgba(220, 38, 38, 0.10); --yellow: #D97706; --yellow-light: rgba(217, 119, 6, 0.10); --shadow: 0 2px 12px rgba(27,43,34,0.12); } /* Sidebar — stays dark */ [data-theme="pw"] .sidebar { background: #042318; border-bottom: 1px solid #C9B88C; } [data-theme="pw"] .sidebar-header { border-bottom-color: rgba(201,184,140,0.2); } [data-theme="pw"] .logo-text { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; } [data-theme="pw"] .logo-year { color: #C9B88C; -webkit-text-fill-color: #C9B88C; } [data-theme="pw"] .nav-label { color: #FFFFFF; } [data-theme="pw"] .nav-item { color: #FFFFFF; } [data-theme="pw"] .nav-item:hover { color: #FFFFFF; background: rgba(201,184,140,0.08); } [data-theme="pw"] .nav-item.active { color: #C9B88C; background: rgba(201,184,140,0.14); } [data-theme="pw"] .nav-item.active::before { background: #C9B88C; } [data-theme="pw"] .nav-section { border-bottom-color: rgba(201,184,140,0.1); } [data-theme="pw"] .nav-section .nav-items-wrap { background: #042318; border-color: rgba(201,184,140,0.25); } [data-theme="pw"] #navLinksScroll { background: #042318; } [data-theme="pw"] .team-search { background: #111111; border-color: rgba(201,184,140,0.2); color: #FFFFFF; } [data-theme="pw"] .team-search::placeholder { color: rgba(255,255,255,0.35); } [data-theme="pw"] .team-search:focus { border-color: #C9B88C; } [data-theme="pw"] .team-nav-item { color: #FFFFFF; } [data-theme="pw"] .team-nav-item:hover { color: #FFFFFF; background: rgba(201,184,140,0.08); } [data-theme="pw"] .team-nav-item.active { color: #C9B88C; } /* Topbar — stays dark */ [data-theme="pw"] .topbar { background: #042318; border-bottom-color: rgba(201,184,140,0.15); } [data-theme="pw"] .topbar-toggle { color: rgba(255,255,255,0.6); } [data-theme="pw"] .topbar-toggle:hover { color: #FFFFFF; background: rgba(201,184,140,0.1); } [data-theme="pw"] .page-title { color: #FFFFFF; } [data-theme="pw"] .page-subtitle { color: rgba(255,255,255,0.5); } [data-theme="pw"] .scoring-badge { background: rgba(201,184,140,0.15); color: #C9B88C; border-color: rgba(201,184,140,0.35); } [data-theme="pw"] .last-updated { color: rgba(255,255,255,0.4); } /* Export/Import buttons — stay dark in sidebar */ [data-theme="pw"] .export-btn { background: rgba(201,184,140,0.15); border-color: rgba(201,184,140,0.4); color: #C9B88C; } [data-theme="pw"] .export-btn:hover { background: rgba(201,184,140,0.25); border-color: rgba(201,184,140,0.7); color: #D9C7A0; } [data-theme="pw"] .import-btn { background: rgba(201,184,140,0.08); border-color: rgba(201,184,140,0.25); color: rgba(255,255,255,0.6); } [data-theme="pw"] .import-btn:hover { background: rgba(201,184,140,0.15); color: #C9B88C; } /* Trend button active */ [data-theme="pw"] .trend-btn.active { background: rgba(201,184,140,0.12); color: #C9B88C; } /* Buttons */ [data-theme="pw"] .btn-primary { background: #C9B88C; color: #042318; } [data-theme="pw"] .btn-primary:hover { background: #D9C7A0; } /* Inputs. The content area of this theme is light, so form controls default to the theme's own light tokens. This used to hardcode #111111/#FFFFFF left over from the dark theme, which rendered every input that didn't override it as a black box on a white page -- and silently beat any class that set only a background (specificity 0,1,1 vs 0,1,0), which is how white-on-pale bugs kept appearing. Controls on the dark nav declare their own colors. */ [data-theme="pw"] input, [data-theme="pw"] select, [data-theme="pw"] textarea { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); } [data-theme="pw"] input:focus, [data-theme="pw"] select:focus { border-color: #C9B88C; outline: none; } /* Diff colors — keep green/red semantic meaning */ [data-theme="pw"] .audit-diff-up { color: #67D84F; } [data-theme="pw"] .audit-diff-down { color: #C92A2A; } [data-theme="pw"] .audit-status-signedoff { background: rgba(103,216,79,0.12); color: #67D84F; } /* PREVIEW ONLY -- scoped to #page-home so the rest of the app is untouched. Overrides the shared CSS variables within this subtree only; --bg-card stays white so pricing tiers/content cards still read as elevated surfaces on top of the green, same pattern as the hero card already uses. */ #page-home { --bg-primary: #042318; --bg-secondary: #06301f; --text-primary: #F7F5EE; --text-secondary: rgba(247,245,238,0.75); --text-muted: rgba(247,245,238,0.5); --border: rgba(201,184,140,0.25); --border-light: rgba(201,184,140,0.15); --bg-card-hover: #0a3f2b; padding-bottom: 56px; } /* Painted on .main (the actual scroll container) rather than on #page-home itself -- a background on the content div only ever covers its own content height, leaving a hard white edge on any viewport taller than the page. .main always fills the full visible area regardless of content length, so this can't leave a gap or need height math. */ .main:has(#page-home.active) { background: #042318; } /* These white "elevated surface" cards float directly on the page background rather than adapting to it (same look the pricing tiers and hero already use elsewhere) -- so they need the original light-theme text tokens re-asserted locally, or their text inherits the page-level override above and goes invisible on their own white background. */ #page-home .hv5-band-white, #page-home .hv5-content-card { --text-primary: #1B2B22; --text-secondary: #4A5A50; --text-muted: #8B9186; --border: #DDD9D0; --border-light: #EAE7E0; } /* The pricing section's own outer band blends into the page (green, no border/shadow), and the tier cards inside it are now green too (not white) -- so they need the light-on-green tokens back, undoing the dark-on-white reset above (still correct for the Content Creator Program box's white "Apply" button, just not for these cards anymore). */ #page-home #home-pricing { background: var(--bg-primary); border: none; box-shadow: none; } #page-home #home-pricing .home-tier-card { --text-primary: #F7F5EE; --text-secondary: rgba(247,245,238,0.75); --text-muted: rgba(247,245,238,0.5); --border: rgba(201,184,140,0.35); } /* The CTA button's own background is always solid gold regardless of theme, so its text must stay dark even though the card around it just flipped to light-on-green -- otherwise it inherits the light text color onto its own gold background. */ #page-home #home-pricing .home-tier-btn-cta { color: #042318; } /* The creator-promo box has no background of its own -- it's a dashed outline sitting directly on #home-pricing's green surface, not a white card -- so it needs the light-on-green tokens back, undoing the dark-on-white reset above (which is correct for its white sibling cards but wrong here). */ #page-home #home-pricing .home-creator-promo { --text-primary: #F7F5EE; --text-secondary: rgba(247,245,238,0.75); --text-muted: rgba(247,245,238,0.5); --border: rgba(201,184,140,0.6); --accent: #C9B88C; } /* Individual Team editor page (Projection Builder) -- every surface (page + .hist-section + .input-section-card + .team-hero, all of which set their own background from --bg-card/--bg-secondary) goes dark green uniformly. A split white/green look was tried first and looked like too much contrast; full dark green reads better. */ #page-team { --bg-primary: #042318; --bg-secondary: #06301f; --bg-card: #042318; --bg-card-hover: #0a3f2b; --bg-input: rgba(255,255,255,0.06); --text-primary: #F7F5EE; --text-secondary: rgba(247,245,238,0.8); --text-muted: rgba(247,245,238,0.68); --border: rgba(201,184,140,0.25); --border-light: rgba(201,184,140,0.15); } .main:has(#page-team.active) { background: #042318; } /* Stat input boxes (Pass/G, Run/G, and every QB/RB/WR/TE input cell) were tuned yellow/orange for a white page -- gold reads much better here and matches the rest of the page's palette. */ #page-team .input-cell { background: rgba(201,184,140,0.12); border-color: #C9B88C; color: #F7F5EE; } #page-team .input-cell:focus { border-color: #C9B88C; background: rgba(201,184,140,0.2); box-shadow: 0 0 0 2px rgba(201,184,140,0.3); } /* Team Projections (all-teams table): unlike the other pages, ONLY the page background, the frozen Team column, and the individual stat column headers should go green here -- all three happen to read from var(--bg-card), so overriding just that variable (plus --bg-primary for the page itself) hits exactly those three things and nothing else. The category-colored group header row (Inputs/Passing/Rushing/etc.) is already hardcoded per-category and untouched either way. The Bar Chart/Scatter canvases must stay white per explicit request -- they have no background of their own (only ever "white" because the page was), so without an explicit override they'd inherit the new green too. */ #page-team-summary { --bg-primary: #042318; --bg-card: #042318; --bg-input: rgba(255,255,255,0.06); --text-primary: #F7F5EE; --border: rgba(201,184,140,0.25); } .main:has(#page-team-summary.active) { background: #042318; } /* .section-card has no styling of its own anywhere in the app (it only ever looked like a card because the page behind it was the same color as its content) -- now that the page is green and the table/chart bodies are explicitly white again, give these a visible border so they read as distinct cards instead of blending into the green page. */ #page-team-summary .section-card { border: 1px solid rgba(201,184,140,0.3); border-radius: 8px; } #page-team-summary .ts-chart-body { background: #fff; } /* Projection Based Rankings: same full-dark-green treatment as Team Projections/Team page. */ #page-rankings { --bg-primary: #042318; --bg-secondary: #06301f; --bg-card: #042318; --bg-card-hover: #0a3f2b; --bg-input: rgba(255,255,255,0.06); --text-primary: #F7F5EE; --text-secondary: rgba(247,245,238,0.8); --text-muted: rgba(247,245,238,0.68); --border: rgba(201,184,140,0.25); --border-light: rgba(201,184,140,0.15); } .main:has(#page-rankings.active) { background: #042318; } /* Position badges (QB/RB/WR/TE tags) use dark saturated text on a near-black translucent tint, tuned for a white page -- brightened text + a lighter tint so they're still color-coded but actually legible here. */ #page-rankings .filter-btn.active { background: linear-gradient(135deg, #F2E9D3 0%, #DECBA0 45%, #C9B88C 100%); border-color: #DECBA0; color: #042318; } #page-rankings .pos-QB { background: rgba(37,99,235,0.22); color: #93C5FD; } #page-rankings .pos-RB { background: rgba(5,150,105,0.22); color: #6EE7B7; } #page-rankings .pos-WR { background: rgba(180,83,9,0.22); color: #FDBA74; } #page-rankings .pos-TE { background: rgba(109,40,217,0.22); color: #C4B5FD; } html { font-size: 14px; height: 100%; overflow: hidden; } body { font-family: 'IBM Plex Sans', system-ui, sans-serif; background: var(--bg-primary); color: var(--text-primary); display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* ===== SIDEBAR ===== */ .sidebar { width: 100%; background: #111827; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: row; align-items: center; position: sticky; top: 0; left: 0; z-index: 250; overflow: visible; } .sidebar-header { display: flex; align-items: center; gap: 12px; padding: 20px 16px; min-height: var(--topbar-h); flex-shrink: 0; } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { font-size: 20px; } .logo-icon-wrap { flex-shrink: 0; display: flex; align-items: center; } .logo-text-wrap { display: flex; align-items: center; min-width: 0; } .logo-text { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: #e2e8f0; -webkit-text-fill-color: #e2e8f0; line-height: 1.2; white-space: nowrap; } .logo-year { color: #94a3b8; -webkit-text-fill-color: #94a3b8; } .logo-sub { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #4b5563; white-space: nowrap; } .topbar-toggle { display: none; /* mobile-only; shown in the max-width:1200px block */ background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 6px 8px; border-radius: 6px; flex-shrink: 0; line-height: 1; transition: color var(--transition), background var(--transition); } .topbar-toggle:hover { color: var(--text-primary); background: var(--bg-input); } .nav-links-scroll { display: flex; flex-direction: row; flex: 1; align-items: stretch; overflow: visible; } .nav-section { position: relative; padding: 0; border-bottom: none; display: flex; align-items: stretch; } .nav-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #9ca3af; padding: 0 14px; text-transform: uppercase; display: flex; align-items: center; gap: 5px; height: 100%; cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--transition), background var(--transition); } .nav-label:hover { color: #fff; background: rgba(255,255,255,0.06); } .nav-label::after { content: '▾'; font-size: 10px; opacity: 0.5; transition: transform 0.2s ease; } .nav-section.collapsed .nav-label::after { transform: rotate(-90deg); } .nav-links-scroll > .nav-section > .nav-item { height: 100%; } .nav-section .nav-items-wrap { position: absolute; top: 100%; left: 0; min-width: 220px; background: #111827; border: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 8px 8px; box-shadow: 0 12px 24px rgba(0,0,0,0.35); display: flex; flex-direction: column; padding: 6px 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 150; max-height: 70vh; overflow-y: auto; } .nav-section:not(.collapsed) .nav-items-wrap { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-user-section .nav-items-wrap { left: auto; right: 0; } .nav-section[data-section="teams"] .nav-items-wrap { display: block; left: auto; right: 0; width: 240px; max-width: calc(100vw - 32px); } .team-nav-columns { display: block; } /* Two explicit columns (not CSS multi-column auto-flow, which balanced column heights unpredictably and split divisions mid-list) once there's actually room for 480px next to the 32px viewport margin -- otherwise min-width and max-width would conflict (min-width always wins), forcing the panel to overflow again. */ @media (min-width: 545px) { .nav-section[data-section="teams"] .nav-items-wrap { width: 480px; } .team-nav-columns { display: flex; gap: 12px; } .team-nav-col { flex: 1; min-width: 0; } } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: #9ca3af; text-decoration: none; border-radius: 0; transition: color var(--transition), background var(--transition); cursor: pointer; position: relative; } .nav-item:hover { color: #fff; background: rgba(255,255,255,0.06); } .nav-item.active { color: #60a5fa; background: rgba(59,130,246,0.12); } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #3b82f6; border-radius: 0 2px 2px 0; } .nav-icon { font-size: 15px; width: 20px; text-align: center; } .nav-text { font-size: 13px; font-weight: 500; } /* Home sits at the top level next to the dropdown triggers (bold, uppercase, 12px, letter-spaced labels) -- match that styling exactly so it doesn't look like a different font/size by comparison. */ .nav-item[data-page="home"] .nav-text { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Home is redundant with the logo (which already links home) on the wide desktop bar, but still needed as a real menu entry in the mobile drawer. (Home's wrapping .nav-section has no .nav-label, so the collapsible-nav JS leaves it alone -- it isn't a direct child of .nav-links-scroll.) It carries no padding/height override of its own: it is hidden above 1201px, so the `padding: 0 14px; height: 100%` written for the desktop bar only ever applied inside the drawer, where it collapsed the row to ~15px and jammed it against the top edge. Inheriting .nav-item's 9px 16px lines it up with CONTENT/TOOLS/etc. */ @media (min-width: 1201px) { .nav-links-scroll .nav-item[data-page="home"] { display: none; } } /* Marketplace: same bold/uppercase/letter-spaced treatment as the CONTENT/ TOOLS/etc dropdown triggers (font had drifted since it's a plain .nav-item, not a .nav-label), plus a pill treatment on top since this is meant to be the one link that pulls the eye first. Centered as its own fixed-height pill rather than stretching to the bar's full height like ordinary nav items do, which is what threw the vertical alignment off. */ .nav-section-marketplace { display: flex; align-items: center; padding: 0 6px; } .nav-item[data-page="marketplace"] { height: auto; padding: 7px 18px; border-radius: 20px; } .nav-item[data-page="marketplace"]::before { display: none; } /* the active-tab left bar reads oddly on a pill */ .nav-item[data-page="marketplace"] .nav-text { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } [data-theme="pw"] .nav-item[data-page="marketplace"] { background: linear-gradient(135deg, #F2E9D3 0%, #DECBA0 45%, #C9B88C 100%); color: #042318; } [data-theme="pw"] .nav-item[data-page="marketplace"]:hover, [data-theme="pw"] .nav-item[data-page="marketplace"].active { background: linear-gradient(135deg, #F7F0DE 0%, #E8D6AC 45%, #D9C7A0 100%); color: #042318; } /* Quick links above the team columns, styled like ordinary dropdown entries rather than tiles: left-aligned, no card chrome, with a single divider separating them from the team list below. Stacked by default so they read as normal full-width rows in the narrow mobile drawer. */ .team-nav-links { display: block; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(201,184,140,0.2); } /* Only the padding needs overriding: .team-nav-item's tighter 6px row spacing would otherwise win over .nav-item's. Everything else is inherited so these match an ordinary dropdown entry exactly. */ .team-nav-item.team-nav-quicklink { padding: 9px 16px; } /* The desktop dropdown panel is as wide as two team columns, so the links sit side by side there instead of eating three full rows above the teams. */ @media (min-width: 1201px) { .team-nav-links { display: grid; grid-template-columns: repeat(3, 1fr); } } .team-nav-list { padding: 0 0 8px; } .team-nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 16px; cursor: pointer; color: #9ca3af; font-size: 12px; font-weight: 500; transition: all var(--transition); } .team-nav-item:hover { color: #fff; background: rgba(255,255,255,0.06); } .team-nav-item.active { color: #60a5fa; } .team-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; outline: 1px solid rgba(255,255,255,0.15); outline-offset: 1px; } .team-nav-logo { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; object-fit: contain; flex-shrink: 0; display: inline-block; filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)); } .team-nav-item[data-abbr="NYJ"] .team-nav-logo { filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)) brightness(2.5); } /* ===== MAIN ===== */ .main { margin-left: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } .nav-right-group { display: flex; align-items: center; gap: 14px; margin-left: auto; padding: 0 16px; flex-shrink: 0; } .page-title { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); } .page-subtitle { font-size: 12px; color: var(--text-muted); } .scoring-badge { background: rgba(59,130,246,0.1); color: #3b82f6; border: 1px solid rgba(59,130,246,0.3); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .scoring-badge:hover { opacity: 0.75; } .scoring-badge-inline { display: inline-block; background: var(--accent-light); color: var(--accent); border: 1px solid rgba(201,184,140,0.4); padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer; vertical-align: middle; transition: opacity 0.15s; } .scoring-badge-inline:hover { opacity: 0.7; } .last-updated { font-size: 11px; color: var(--text-muted); } /* ===== PAGES ===== */ .page { display: none; padding: 16px 20px; } .page.active { display: block; } /* ===== GRID LAYOUTS ===== */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; } .grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; } /* ===== CARDS ===== */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color var(--transition); } .card:hover { border-color: var(--border-light); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .card-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); } .card-badge { font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: 600; } /* ===== STAT CARDS ===== */ .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .stat-card.blue::after { background: var(--accent); } .stat-card.green::after { background: var(--green); } .stat-card.yellow::after { background: var(--yellow); } .stat-card.purple::after { background: var(--purple); } .stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; } .stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; } .stat-sub { font-size: 11px; color: var(--text-secondary); } .stat-icon { position: absolute; right: 16px; top: 16px; font-size: 24px; opacity: 0.3; } /* ===== TABLES ===== */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { padding: 8px 8px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; transition: color var(--transition); } thead th:hover { color: var(--text-primary); } thead th.sort-asc::after { content: ' ↑'; color: var(--accent); } thead th.sort-desc::after { content: ' ↓'; color: var(--accent); } thead th.num { text-align: right; } #rankTable thead th { background: #042318; color: #fff; border-bottom: none; position: sticky; top: 0; z-index: 1; } #rankTable thead th:hover { color: #C9B88C; } #rankTable thead th.sort-asc::after, #rankTable thead th.sort-desc::after { color: #C9B88C; } #teamSummaryTable thead th { border-bottom: none; } #teamSummaryTable thead th:hover { color: #C9B88C; } tbody tr { border-bottom: 1px solid var(--border); transition: background var(--transition); } tbody tr:hover { background: rgba(37, 99, 235, 0.05); } tbody tr:last-child { border-bottom: none; } tbody td { padding: 8px 8px; color: var(--text-primary); white-space: nowrap; } tbody td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; } tbody td.muted { color: var(--text-secondary); } tbody td.bold { font-weight: 700; } .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: 11px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; } .rank-1 { background: rgba(245,158,11,0.2); color: #f59e0b; } .rank-2 { background: rgba(148,163,184,0.2); color: #94a3b8; } .rank-3 { background: rgba(180,120,60,0.2); color: #b47c3c; } .rank-other { background: var(--bg-input); color: var(--text-muted); } .team-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .pos-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; } .pos-QB { background: rgba(37,99,235,0.12); color: #1d4ed8; } .pos-RB { background: rgba(5,150,105,0.12); color: #047857; } .pos-WR { background: rgba(180,83,9,0.12); color: #b45309; } .pos-TE { background: rgba(109,40,217,0.12); color: #6d28d9; } .pos-K { background: rgba(100,116,139,0.12); color: #475569; } .pos-DEF { background: rgba(14,116,144,0.12); color: #0e7490; } /* ===== PROGRESS BARS ===== */ .bar-wrap { display: flex; align-items: center; gap: 8px; } .bar-track { flex: 1; height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; } .bar-label { font-size: 11px; color: var(--text-muted); min-width: 32px; text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; } /* ===== CHARTS ===== */ .chart-wrap { position: relative; } .chart-wrap canvas { max-height: 300px; } .chart-wrap.tall canvas { max-height: 400px; } /* ===== TEAM PAGE ===== */ .team-hero { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 6px; position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); } .team-hero-content { position: relative; z-index: 1; } .team-hero-name { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; } .team-hero-abbr { font-size: 14px; opacity: 0.7; font-weight: 600; } .team-hero-stats { display: flex; gap: 32px; margin-top: 20px; } .team-hero-stat label { font-size: 11px; opacity: 0.6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 2px; } .team-hero-stat .val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ===== SECTION HEADERS ===== */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .section-title { font-size: 15px; font-weight: 700; color: var(--text-primary); } .section-line { flex: 1; height: 1px; background: var(--border); margin-left: 12px; } /* ===== FILTERS ===== */ .filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; } .filter-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--transition); font-family: 'IBM Plex Sans', system-ui, sans-serif; } .filter-btn:hover { border-color: var(--accent); color: var(--text-primary); } .filter-btn.active { background: var(--accent); border-color: var(--accent); color: white; } .toggle-group { display:flex; gap:4px; } .toggle-btn { padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:11px; font-weight:600; cursor:pointer; font-family:'IBM Plex Sans', system-ui, sans-serif; transition:all 0.15s; } .toggle-btn:hover { border-color:var(--accent); color:var(--text-primary); } .toggle-btn.active { background:var(--accent); border-color:var(--accent); color:white; } .filter-select { appearance: none; -webkit-appearance: none; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--accent) !important; background: var(--accent) !important; color: #fff !important; font-size: 11px; font-weight: 600; font-family: 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; transition: opacity 0.15s; outline: none; } .filter-select:hover { opacity: 0.88; } .filter-select:focus { opacity: 0.88; outline: none; } .filter-select::placeholder { color: rgba(255,255,255,0.55); } .filter-select[type="number"]::-webkit-inner-spin-button, .filter-select[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .filter-select[type="number"] { -moz-appearance: textfield; } .search-input { padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: 12px; outline: none; transition: border-color var(--transition); font-family: 'IBM Plex Sans', system-ui, sans-serif; min-width: 180px; } .search-input:focus { border-color: var(--accent); } .search-input::placeholder { color: var(--text-muted); } /* ===== SCATTER LABELS ===== */ .chart-quadrant-label { position: absolute; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.3; pointer-events: none; } /* ===== SPARKLINE ===== */ .sparkline { display: inline-block; } /* ===== LEADERBOARD ===== */ .leader-list { display: flex; flex-direction: column; gap: 8px; } .leader-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-input); border-radius: var(--radius-sm); border: 1px solid transparent; transition: all var(--transition); cursor: pointer; } .leader-item:hover { border-color: var(--border-light); background: var(--bg-card-hover); } .leader-rank { font-size: 13px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; min-width: 24px; color: var(--text-muted); } .leader-rank.gold { color: #f59e0b; } .leader-rank.silver { color: #94a3b8; } .leader-rank.bronze { color: #b47c3c; } .leader-info { flex: 1; min-width: 0; } .leader-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .leader-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; } .leader-value { font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; font-family: 'IBM Plex Mono', ui-monospace, monospace; } .leader-ppg { font-size: 11px; color: var(--text-muted); text-align: right; } /* ===== TOOLTIPS ===== */ .tooltip { position: relative; cursor: help; } .tooltip:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--bg-card); color: var(--text-primary); font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 100; border: 1px solid var(--border); } /* ===== RESPONSIVE ===== */ @media (max-width: 1280px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; } } /* ===== UTILITIES ===== */ .mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 8px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; } .mt-16 { margin-top: 16px; } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .text-right { text-align: right; } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .text-muted { color: var(--text-secondary); } .font-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; } .font-bold { font-weight: 700; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Selected text inside a field. Without this the browser uses its own native highlight -- on Windows/Chrome a solid black block with white text, which ignores the palette and looks broken next to the orange input boxes. Keeps the standard text color and tints the background to match .modified. */ ::selection { background: rgba(217, 119, 6, 0.30); color: var(--text-primary); } ::-moz-selection { background: rgba(217, 119, 6, 0.30); color: var(--text-primary); } /* ===== INPUT CELLS ===== */ /* Every input cell carries the orange treatment by default, whether or not it has been adjusted off its base value. The .modified class below is now visually identical on purpose -- edited rows are still flagged by the yellow left border on .player-input-row / .player-wide-row. */ .input-cell { background: rgba(217,119,6,0.07); border: 1px solid var(--yellow); border-radius: 5px; color: var(--text-primary); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; padding: 4px 7px; width: 72px; text-align: right; outline: none; transition: border-color 150ms, background 150ms, box-shadow 150ms; -moz-appearance: textfield; } .input-cell::-webkit-outer-spin-button, .input-cell::-webkit-inner-spin-button { -webkit-appearance: none; } /* Focus stays in the same orange family rather than switching to blue, so the only thing that changes on focus is the ring -- not the box's identity. */ .input-cell:focus { border-color: var(--yellow); background: rgba(217,119,6,0.14); box-shadow: 0 0 0 2px rgba(245,158,11,0.2); } .input-cell.modified { border-color: var(--yellow); color: var(--text-primary); background: rgba(217,119,6,0.07); } .input-cell.modified:focus { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(245,158,11,0.2); } /* The theme's generic [data-theme="pw"] input rule (black background, white text -- meant for the dark sidebar/topbar) outranks a single .input-cell class, so unmodified cells rendered black-on-white while .input-cell.modified won on two classes and stayed orange. That mismatch is the whole reason one box looked black among the orange ones. Same specificity clash that 877b14d fixed for .team-notes-input. */ [data-theme="pw"] .input-cell { background: rgba(217,119,6,0.07); border-color: var(--yellow); color: var(--text-primary); } [data-theme="pw"] .input-cell:focus { background: rgba(217,119,6,0.14); border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(245,158,11,0.2); } .input-cell.wide { width: 90px; } .input-cell.sm { width: 56px; } /* ===== COMPUTED OUTPUT CELLS ===== */ .computed-cell { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-primary); font-weight: 500; } .computed-cell.highlight { color: var(--accent); font-weight: 700; } .computed-cell.green-val { color: var(--green); } /* play split slider */ .split-row { margin-top: 8px; margin-bottom: 4px; } .split-track { height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-input); display: flex; margin: 8px 0; cursor: pointer; } .split-pass { background: rgba(59,130,246,0.7); transition: width 100ms; border-radius: 4px 0 0 4px; } .split-run { background: rgba(16,185,129,0.7); transition: width 100ms; border-radius: 0 4px 4px 0; } .split-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); font-weight: 600; } .split-pct { font-size: 11px; font-weight: 700; color: var(--text-secondary); min-width: 36px; text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; } .split-pct.blue { color: #1d4ed8; } .split-pct.green { color: #047857; } /* ===== PLAYER INPUT TABLE ===== */ .input-section { margin-bottom: 28px; } .input-table-wrap { overflow-x: auto; } .input-table { width: 100%; border-collapse: collapse; font-size: 12px; } .input-table thead th { padding: 8px 10px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-secondary); position: sticky; top: 0; z-index: 2; } .input-table thead th.input-col { color: var(--yellow); background: rgba(245,158,11,0.05); } .input-table thead th.output-col { color: var(--accent); background: rgba(59,130,246,0.05); } .input-table thead .col-group { text-align: center; border-bottom: 2px solid var(--border); padding-bottom: 4px; } .input-table thead .col-group.inputs-group { color: var(--yellow); } .input-table thead .col-group.outputs-group { color: var(--accent); } .input-table tbody tr { border-bottom: 1px solid var(--border); } .input-table tbody tr:hover { background: rgba(37,99,235,0.04); } .input-table tbody td { padding: 8px 10px; vertical-align: middle; white-space: nowrap; } .input-table .divider-col { width: 1px; background: var(--border); padding: 0; } .section-group-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 0 4px; } .section-group-label.inputs { color: var(--yellow); } .section-group-label.outputs { color: var(--accent); } /* ===== RESET BUTTONS ===== */ .btn-reset { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 5px; padding: 3px 8px; font-size: 10px; cursor: pointer; transition: all var(--transition); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .btn-reset:hover { border-color: var(--red); color: var(--red); background: var(--red-light); } .btn-primary { background: var(--accent); border: none; color: white; border-radius: var(--radius-sm); padding: 8px 16px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'IBM Plex Sans', system-ui, sans-serif; transition: background var(--transition); } .btn-primary:hover { background: var(--accent-hover); } /* ===== DELTA INDICATORS ===== */ .delta { font-size: 10px; font-weight: 600; font-family: 'IBM Plex Mono', ui-monospace, monospace; padding: 1px 4px; border-radius: 3px; } .delta.pos { color: var(--green); background: var(--green-light); } .delta.neg { color: var(--red); background: var(--red-light); } .delta.neu { color: var(--text-muted); } /* ===== TOAST ===== */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg-card); border: 1px solid var(--border-light); color: var(--text-primary); padding: 10px 18px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; z-index: 9999; opacity: 0; transform: translateY(8px); transition: opacity 200ms, transform 200ms; pointer-events: none; box-shadow: var(--shadow); } .toast.show { opacity: 1; transform: translateY(0); } .toast.success { border-left: 3px solid var(--green); } .toast.info { border-left: 3px solid var(--accent); } .toast.error { border-left: 3px solid var(--red); color: #fca5a5; } @keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* ===== DIVIDER ===== */ .col-divider { width: 2px; background: var(--border); padding: 0 !important; } /* ===== TEAM PAGE TWO-COLUMN LAYOUT ===== */ .team-page-body { display: flex; gap: 20px; align-items: flex-start; } .team-input-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .team-output-col { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--topbar-h) + 24px); } /* ===== HERO INPUTS ===== */ .hero-top-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .hero-abbr-badge { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; } .hero-stats-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 6px; } .hero-divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; } .hero-split-wrap { min-width: 120px; flex: 1 1 120px; max-width: 200px; } .hero-input-group { display: flex; flex-direction: column; gap: 2px; } .hero-input-group label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .hero-input-group input[type=number] { width: 56px; background: rgba(217,119,6,0.07); border: 1px solid var(--yellow); border-radius: 6px; color: var(--text-primary); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; padding: 4px 6px; text-align: center; outline: none; } .hero-input-group input[type=number]:focus { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(245,158,11,0.2); } .hero-stat-group { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; } .hero-stat-group label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .hero-stat-val { font-size: 15px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-primary); line-height: 1; } .btn-sm-green { font-size: 11px; padding: 5px 12px; border-radius: 6px; border: none; background: #10b981; color: #fff; font-weight: 600; cursor: pointer; transition: opacity var(--transition); } .btn-sm-amber { font-size: 11px; padding: 5px 12px; border-radius: 6px; border: none; background: #f59e0b; color: #000; font-weight: 600; cursor: pointer; transition: opacity var(--transition); } .btn-sm-green:hover, .btn-sm-amber:hover { opacity: 0.85; } /* Sign-off button */ .btn-signoff { font-size: 11px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .btn-signoff:hover { border-color: #34d399; color: #34d399; background: rgba(52,211,153,0.1); } .btn-signoff.btn-signoff-done { border-color: #34d399; background: rgba(52,211,153,0.15); color: #34d399; } .btn-signoff.btn-signoff-done:hover { background: rgba(239,68,68,0.12); border-color: #f87171; color: #f87171; } .signoff-badge { font-size: 10px; color: #34d399; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.3); border-radius: 4px; padding: 2px 8px; white-space: nowrap; } /* Sidebar sign-off dot */ .nav-signoff-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34d399; margin-left: auto; flex-shrink: 0; box-shadow: 0 0 5px #34d39966; } .nav-signoff-dot--red { background: #f87171; box-shadow: 0 0 5px #f8717166; } .stat-warn { color: var(--red) !important; } /* ===== POSITION INPUT SECTIONS ===== */ .isec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .isec-header h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); } .isec-hint { font-size: 10px; color: var(--text-muted); margin-bottom: 10px; } /* ===== PLAYER INPUT ROWS ===== */ .player-input-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; } .player-input-row.modified { border-left: 3px solid var(--yellow); } .player-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .player-row-header .player-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .player-row-header .player-meta { font-size: 11px; color: var(--text-muted); } .input-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .input-group-block { display: flex; flex-direction: column; gap: 6px; } .input-group-block h4 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 2px; } .ig-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ig-label { font-size: 11px; color: var(--text-secondary); flex: 1; } .ig-hint { font-size: 10px; color: var(--text-muted); margin-left: 2px; } /* ===== PLAYER OUTPUT STATS ===== */ .output-stat-grid { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .ostat { display: flex; flex-direction: column; align-items: center; min-width: 48px; } .ostat .ostat-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .ostat .ostat-val { font-size: 13px; font-weight: 600; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--accent); } .fpts-big { font-size: 22px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--accent); } .fpts-ppg { font-size: 12px; color: var(--text-secondary); margin-left: 4px; } /* ===== TD POOL BAR ===== */ .td-pool-wrap { margin-top: 4px; padding: 5px 10px; background: var(--bg-input); border-radius: 6px; border: 1px solid var(--border); } .td-pool-wrap .td-pool-label { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; display: flex; justify-content: space-between; } .td-pool-bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .td-pool-bar-fill { height: 100%; border-radius: 3px; transition: width 200ms, background 200ms; } /* ===== SHARE BUDGET BARS ===== */ .share-budget { margin-top: 6px; } .share-budget-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-bottom: 3px; } .share-budget-track { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 2px; } .share-budget-fill { height: 100%; border-radius: 3px; transition: width 200ms, background 200ms; } /* ===== WARNING BAR ===== */ .warning-bar { background: var(--red-light); border: 1px solid var(--red); border-radius: 5px; padding: 6px 10px; font-size: 11px; color: var(--red); margin-top: 6px; } /* ===== OVERRIDE BANNER ===== */ .override-banner { background: var(--yellow-light); border: 1px solid var(--yellow); border-radius: 5px; padding: 6px 10px; font-size: 11px; color: var(--yellow); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } /* ===== RESET BUTTON (XS) ===== */ .btn-reset-xs { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); font-size: 10px; padding: 2px 6px; cursor: pointer; font-family: 'IBM Plex Sans', system-ui, sans-serif; transition: border-color var(--transition), color var(--transition); } .btn-reset-xs:hover { border-color: var(--red); color: var(--red); } /* ===== OUTPUT PANEL (right column) ===== */ .output-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .output-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); } .output-panel-section { padding: 12px 16px; border-bottom: 1px solid var(--border); } .output-panel-section:last-child { border-bottom: none; } .output-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .output-kpi { display: flex; flex-direction: column; } .okpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .okpi-val { font-size: 20px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-primary); } .op-player-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .op-player-row:last-child { border-bottom: none; } .op-player-row .op-name { color: var(--text-primary); font-weight: 500; } .op-player-row .op-pos { color: var(--text-muted); font-size: 10px; margin-left: 4px; } .op-player-row .op-fpts { color: var(--accent); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; } /* ===== RESPONSIVE: stack columns on narrow screens ===== */ @media (max-width: 900px) { .team-page-body { flex-direction: column; } .team-output-col { width: 100%; position: static; } } /* ===== SECTION CARD — single horizontal scroll container ===== */ .input-section-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; overflow-x: auto; /* ONE scroll bar per section */ overflow-y: visible; } .skill-combined-card { overflow: hidden; border-radius: var(--radius, 12px); } .skill-sub-section + .skill-sub-section { border-top: 2px solid var(--border); } .skill-sub-hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 6px 12px 5px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; position: sticky; left: 0; background: var(--bg-secondary); } .skill-sub-hd > span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; } .isec-header-wrap { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); position: sticky; left: 0; } /* ===== WIDE PLAYER ROW (spreadsheet style) ===== */ .player-wide-row { display: flex; align-items: stretch; gap: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); min-width: fit-content; /* Rows stretch to content, NOT to viewport */ } .player-wide-row:last-of-type { border-bottom: none; } .player-wide-row.modified { border-left: 3px solid var(--yellow); } .player-wide-row:hover { background: var(--bg-card); } /* Name cell — fixed sticky left */ .pwr-name-cell { display: flex; flex-direction: column; justify-content: center; width: 140px; min-width: 140px; max-width: 140px; padding: 6px 7px; border-right: 1px solid var(--border); background: var(--bg-secondary); flex-shrink: 0; position: sticky; left: 0; z-index: 2; } .pwr-name { font-size: 11px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwr-fpts { font-size: 13px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; margin-top: 2px; line-height: 1; } .pwr-ppg { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-left: 4px; } .pwr-ts { font-size: 8px; color: var(--text-muted); margin-top: 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; opacity: 0.7; } .pwr-name-actions { display: flex; align-items: center; gap: 4px; margin-top: 3px; } .pwr-reset { align-self: auto; } .rookie-tag-btn { width: 22px; height: 22px; border-radius: 4px; padding: 0; border: 1px solid rgba(245,158,11,0.35); color: rgba(245,158,11,0.5); font-size: 10px; font-weight: 600; background: transparent; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; } .rookie-tag-btn:hover { border-color: #f59e0b; color: #f59e0b; } .rookie-tag-btn.active { background: #f59e0b; color: #fff; border-color: #f59e0b; } .btn-rename-player { background: none; border: 1px solid rgba(96,165,250,0.3); border-radius: 4px; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 5px; line-height: 1; transition: background var(--transition), color var(--transition), border-color var(--transition); } .btn-rename-player:hover { background: rgba(37,99,235,0.12); color: #1d4ed8; border-color: #1d4ed8; } .btn-remove-player { background: none; border: 1px solid rgba(239,68,68,0.3); border-radius: 4px; color: rgba(239,68,68,0.55); font-size: 9px; width: 18px; height: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: background var(--transition), color var(--transition), border-color var(--transition); } .btn-remove-player:hover { background: rgba(239,68,68,0.15); color: #ef4444; border-color: #ef4444; } /* Group containers */ .pwr-group { display: flex; flex-direction: column; border-right: 1px solid var(--border); flex-shrink: 0; } .pwr-group:last-child { border-right: none; } .pwr-group-hd { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 4px; border-bottom: 1px solid var(--border); } .pwr-group-gms .pwr-group-hd { color: var(--text-secondary); background: rgba(0,0,0,0.04); } .pwr-group-input .pwr-group-hd { color: #c2410c; background: rgba(194,65,12,0.08); } .pwr-group-rush .pwr-group-hd { color: #047857; background: rgba(4,120,87,0.08); } .pwr-group-input2 .pwr-group-hd { color: #6d28d9; background: rgba(109,40,217,0.08); } .pwr-group-pg .pwr-group-hd { color: var(--accent); background: rgba(37,99,235,0.07); } .pwr-group-season .pwr-group-hd { color: var(--accent); background: rgba(37,99,235,0.07); } /* Team page: the category colors above were tuned dark/saturated for a white page and go muddy on the new dark-green background -- brighter pastel versions of the same hues (still orange/green/purple, just legible) plus a light-tinted background instead of a near-invisible black one. */ #page-team .pwr-group-gms .pwr-group-hd { background: rgba(255,255,255,0.05); } #page-team .pwr-group-input .pwr-group-hd { color: #FDBA74; background: rgba(253,186,116,0.14); } #page-team .pwr-group-rush .pwr-group-hd { color: #6EE7B7; background: rgba(110,231,183,0.14); } #page-team .pwr-group-input2 .pwr-group-hd { color: #C4B5FD; background: rgba(196,181,253,0.14); } #page-team .pwr-group-pg .pwr-group-hd, #page-team .pwr-group-season .pwr-group-hd { background: rgba(201,184,140,0.12); } /* Most .pwr-col-hd labels carry their own inline color (per stat-category hue) that this class rule can't override -- those are fixed directly in the markup instead. This only catches the few without an inline color. */ #page-team .pwr-col-hd { color: rgba(247,245,238,0.7); } #page-team .pwr-out { color: rgba(247,245,238,0.85); } /* Let the 3 stat-family boxes grow to fill whatever width the row has, in proportion to how many columns each one holds (Passing 5 : Rushing 3 : Receiving 7) -- the Games/label box stays a fixed width. Since every one of the 3 stacked rows uses the same group/column-count sequence, growing them by the same ratio on every row keeps the families aligned; it just spreads the extra space out instead of leaving it blank on the right. */ .pwr-group-input { flex: 5 1 0; } .pwr-group-rush { flex: 3 1 0; } .pwr-group-input2 { flex: 7 1 0; } /* Stack of 3 rows (Inputs / Per Game / Season Totals) per player, sitting beside the fixed name cell. Each .pwr-row reproduces what the whole .player-wide-row used to do on its own (a flex line of .pwr-group's) -- now scoped to one of the 3 lines, so families stay 16 columns wide and line up at the same x-position on all 3 rows. */ .pwr-rows { display: flex; flex-direction: column; flex: 1; } .pwr-row { display: flex; align-items: stretch; } /* Lighter separator between a player's own 3 rows than the border between two different players (.player-wide-row's own border-bottom). */ .pwr-row:not(:last-child) { border-bottom: 1px solid rgba(212,207,200,0.5); } /* The leftmost box on every row (Inputs / Per Game / Season Totals label) is locked to one fixed width so the longer "Season Totals" label can't push its row wider than the other two -- it wraps instead. */ .pwr-group-gms { width: 80px; min-width: 80px; max-width: 80px; } .pwr-group-gms .pwr-group-hd { white-space: nowrap; text-align: center; justify-content: center; } .pwr-group-gms .pwr-cols { justify-content: center; } /* Every group-hd bar in a row shares one minimum height and is vertically centered, so a blank (\ ) header on an output row's family box still lines up with the label text next to it. */ .pwr-group-hd { min-height: 20px; display: flex; align-items: center; } /* Column grid inside a group */ .pwr-cols { display: flex; align-items: center; flex: 1; padding: 0 2px; /* Columns no longer need to squeeze into one wide scrolling row, so give them breathing room instead of sitting flush against each other. */ gap: 8px; } .pwr-col { display: flex; flex-direction: column; align-items: center; padding: 3px 2px; flex: 1 1 0; min-width: 58px; } .pwr-col-hd { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; white-space: nowrap; } /* Input inside wide row */ /* IBM Plex Mono advances 0.6em, so at 11px a character is ~6.6px wide, and these are border-box. The wrapped percent variant below was 30px -- 24px of content, about 3.6 characters -- which sliced the last glyph off any value like 68.5. Sized to fit four characters and no more: the inputs sit in fixed table cells alongside a "%" suffix, so going wider pushes that suffix into the next column instead of giving the number more room. */ .pwr-inp { width: 100% !important; padding: 2px 2px !important; font-size: 11px !important; text-align: center !important; } /* % suffix wrapper */ .pwr-inp-wrap { display: flex; align-items: center; gap: 1px; width: 100%; } /* Grows to fill whatever room is left next to the "%" sitting beside it, instead of a fixed width, so it scales with the column like everything else here. */ .pwr-inp-wrap .pwr-inp { width: auto !important; flex: 1 1 0; min-width: 0; } .pct-sfx { font-size: 10px; font-weight: 600; color: var(--text-muted); line-height: 1; flex-shrink: 0; } .hist-derived-badge { display: inline-block; font-size: 8px; font-weight: 600; background: rgba(37,99,235,0.12); color: #1d4ed8; border-radius: 3px; padding: 0 3px; margin-left: 2px; cursor: help; vertical-align: middle; line-height: 13px; } /* Output value inside wide row */ .pwr-out { font-size: 11px; font-weight: 600; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-secondary); white-space: nowrap; } .pwr-out.accent { color: var(--accent); } .pwr-out.green { color: var(--green); } .pwr-out.red { color: var(--red); } /* TD pool bar inside wide row */ .pwr-td-pool { display: flex; align-items: center; padding: 0 8px; min-width: 140px; max-width: 180px; border-left: 1px solid var(--border); flex-shrink: 0; } /* isec-header — stays inside the card padding area */ .isec-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 6px 12px 5px; border-bottom: 1px solid var(--border); position: sticky; left: 0; } .isec-header > span, .isec-header h3 { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; } /* Header label colours matching groups */ .pwr-group-input > span { color: var(--yellow); background: rgba(245,158,11,0.04); } .pwr-group-input2 > span { color: #6d28d9; background: rgba(109,40,217,0.04); } .pwr-group-pg > span { color: var(--accent); background: rgba(59,130,246,0.04); } .pwr-group-season > span { color: var(--accent); background: rgba(59,130,246,0.04); } /* isec-header flex for share budget inline */ .isec-header h3, .isec-header > * { display: flex; align-items: center; gap: 6px; } /* Compact inline share budget */ .share-budget { display: flex; align-items: center; gap: 6px; } .share-budget-label-text { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .share-budget-pct { font-size: 11px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; min-width: 40px; } .share-budget .bar-track { width: 60px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; } /* ===== UNALLOCATED SECTION ===== */ .unalloc-row { display: flex; align-items: center; min-width: fit-content; border-bottom: 1px solid var(--border); background: var(--bg-card); } .unalloc-row:last-child { border-bottom: none; } .unalloc-totals-row { background: rgba(37,99,235,0.06); } .unalloc-label { width: 100px; min-width: 100px; padding: 7px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-right: 1px solid var(--border); position: sticky; left: 0; background: inherit; z-index: 1; } .unalloc-group { display: flex; align-items: center; gap: 0; padding: 0 4px; } .unalloc-stat { display: flex; flex-direction: column; align-items: center; padding: 5px 8px; min-width: 60px; } .unalloc-sh { font-size: 8px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; white-space: nowrap; } .unalloc-val { font-size: 12px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-primary); } .unalloc-divider { width: 1px; height: 28px; background: var(--border); margin: 0 4px; flex-shrink: 0; } /* ===== UNALLOCATED PRODUCTION ROWS ===== */ .ua-grid { overflow-x: auto; } .ua-row { display: flex; align-items: center; min-width: fit-content; border-bottom: 1px solid var(--border); background: var(--bg-card); } .ua-row:last-child { border-bottom: none; } .ua-row.ua-dim { opacity: 0.45; } .ua-totals-row { background: rgba(37,99,235,0.06); } .ua-pos-badge { width: 36px; min-width: 36px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; padding: 10px 0; border-right: 1px solid var(--border); position: sticky; left: 0; z-index: 2; } .ua-label { width: 130px; min-width: 130px; padding: 7px 10px; font-size: 10px; font-weight: 700; color: var(--text-secondary); border-right: 1px solid var(--border); position: sticky; left: 36px; background: var(--bg-card); z-index: 1; line-height: 1.3; } .ua-totals-row .ua-label { background: rgba(37,99,235,0.06); } .ua-sublabel { font-size: 8px; font-weight: 400; color: var(--text-muted); font-style: italic; margin-top: 2px; } .ua-stats { display: flex; align-items: center; gap: 0; padding: 0 4px; } .ua-stat { display: flex; flex-direction: column; align-items: center; padding: 5px 8px; min-width: 58px; } .ua-stat-share { min-width: 52px; padding: 5px 6px; } .ua-sh { font-size: 8px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; white-space: nowrap; } .ua-val { font-size: 12px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-secondary); } /* ===== RENAME MODAL ===== */ .rename-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 28px 32px; min-width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .rename-modal-hd { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .rename-modal-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; } .rename-modal-sub strong { color: var(--text-secondary); } .rename-modal-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; } .rename-field-group { display: flex; flex-direction: column; gap: 5px; } .rename-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .rename-modal-inp { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 14px; font-weight: 600; padding: 8px 12px; width: 100%; box-sizing: border-box; transition: border-color var(--transition); } .rename-modal-inp:focus { outline: none; border-color: var(--accent); } .rename-modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .btn-secondary { padding: 8px 18px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition); } .btn-secondary:hover { border-color: var(--text-muted); color: var(--text-primary); } /* ===== PLAYER MODAL ===== */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; padding: 24px; } .modal-overlay.open { display: flex; } .modal-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 780px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.25); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-card); z-index: 1; } .modal-close { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); font-size: 14px; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color var(--transition), border-color var(--transition); } .modal-close:hover { color: var(--red); border-color: var(--red); } .modal-proj-strip { display: flex; flex-wrap: wrap; gap: 0; padding: 14px 22px; border-bottom: 1px solid var(--border); background: var(--bg-input); } .modal-stat { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; border-right: 1px solid var(--border); min-width: 64px; } .modal-stat:last-child { border-right: none; } .modal-stat-hi { background: rgba(59,130,246,0.05); } .modal-stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 3px; } .modal-stat-val { font-size: 15px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-primary); } .modal-section { padding: 16px 22px; border-bottom: 1px solid var(--border); } .modal-section:last-child { border-bottom: none; } .modal-section-hd { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px; } /* Historical table inside modal */ .hist-table { width: 100%; border-collapse: collapse; font-size: 12px; } .hist-table th { text-align: right; padding: 5px 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); } .hist-table th:first-child { text-align: left; } /* Group bar above the column headers. Per Game and Season Totals use the same column names, so this row is what distinguishes them. */ .hist-table .pihl-grp-hdr { color: #fff; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.18); white-space: nowrap; position: sticky; top: 0; z-index: 2; } .hist-table .pihl-grp-row th:last-child { border-right: none; } .hist-table td { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--border); font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-secondary); } .hist-table td:first-child { text-align: left; } .hist-table tbody tr:hover { background: rgba(37,99,235,0.04); } .hist-table tbody tr:last-child td { border-bottom: none; } /* ===== TEAM HIST CHART SECTION ===== */ .hist-trio-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .hist-trio-row .hist-section { min-width: 0; } .hist-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; overflow: hidden; } .hist-section-hd { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: #042318; padding: 7px 14px; margin-bottom: 0; } /* Clickable player name */ .pwr-name-link { cursor: pointer; transition: color var(--transition); } .pwr-name-link:hover { color: var(--accent); text-decoration: underline; } .pwr-name-link.expanded { color: var(--accent); text-decoration: underline; } .pwr-name-link.expanded::after { content: ' ▲'; font-size: 9px; opacity: 0.7; } .pwr-name-link:not(.expanded)::after { content: ' ▼'; font-size: 9px; opacity: 0.4; } /* ===== EXPAND ALL BUTTON ===== */ .btn-expand-all { font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .btn-expand-all:hover { background: rgba(37,99,235,0.1); color: #2563eb; border-color: rgba(37,99,235,0.3); } /* ===== RATE PCT HINT ===== */ .rate-pct-hint { display: block; font-size: 9px; color: var(--text-muted); text-align: center; margin-top: 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.02em; } /* ===== INLINE PLAYER HISTORY PANEL ===== */ .player-hist-inline { width: 100%; max-width: 100%; overflow: hidden; background: var(--bg-primary); border-left: 3px solid rgba(37,99,235,0.4); border-bottom: 1px solid var(--border); animation: slideDown 0.15s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .pihl-inner { padding: 14px 20px 16px; } .pihl-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; } .pihl-proj-strip { display: flex; flex-wrap: wrap; gap: 0; background: var(--bg-input); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; } .pihl-stat { display: flex; flex-direction: column; align-items: center; padding: 7px 12px; border-right: 1px solid var(--border); min-width: 60px; } .pihl-stat:last-child { border-right: none; } .pihl-sl { font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 3px; } .pihl-sv { font-size: 13px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-primary); } .pihl-chart-wrap { height: 150px; position: relative; margin-bottom: 4px; } .pihl-table-wrap { overflow-x: auto; } .pihl-hist-tbl { width: 100%; border-collapse: collapse; font-size: 11px; } .pihl-hist-tbl th { text-align: right; padding: 4px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); } .pihl-hist-tbl th:first-child { text-align: left; } .pihl-hist-tbl td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--border); font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-secondary); font-size: 11px; } .pihl-hist-tbl td:first-child { text-align: left; } .pihl-hist-tbl tbody tr:hover { background: rgba(37,99,235,0.04); } .pihl-hist-tbl tbody tr:last-child td { border-bottom: none; } .pihl-no-hist { font-size: 11px; color: var(--text-muted); padding: 10px 0; } /* Avg rows in pihl table */ .pihl-avg-row td, .pihl-avg-vals td { padding: 4px 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; border-bottom: none; border-top: none; } .avg-3yr { background: rgba(37,99,235,0.06); } .avg-5yr { background: rgba(5,150,105,0.06); } .avg-wtd { font-style: italic; } .pihl-avg-row .pihl-avg-label { color: var(--text-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; border-top: 1px solid var(--border); padding-top: 6px; } .pihl-hist-tbl tfoot tr:first-child td { border-top: 2px solid rgba(37,99,235,0.2); } /* Clickable year rows */ .pihl-yr-row { cursor: pointer; } .pihl-yr-row:hover { background: rgba(37,99,235,0.05) !important; } .yr-expand-arrow { font-size: 8px; color: var(--text-muted); display: inline-block; margin-right: 3px; } /* Weekly game log expansion */ .pihl-wk-expand-row td { padding: 0 !important; border-bottom: 2px solid var(--border) !important; } .pihl-wk-expand-row .wkly-wrap { border-left: 3px solid var(--border); margin-left: 12px; overflow-x: auto; } .wkly-tbl { width: auto; border-collapse: collapse; font-size: 11px; } .wkly-tbl th { text-align: right; padding: 4px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .wkly-tbl th:first-child, .wkly-tbl th:nth-child(2) { text-align: left; } /* Group bar above the weekly column headers. Needs thead in the selector to outrank the :nth-child(2) left-align rule above, which would otherwise left-align the "Passing" cell. */ .wkly-tbl thead .wkly-grp-row th { color: #fff; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.18); padding: 3px 8px; } .wkly-tbl thead .wkly-grp-row th:last-child { border-right: none; } .wkly-tbl td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--border); font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-secondary); font-size: 11px; white-space: nowrap; } .wkly-tbl td:first-child, .wkly-tbl td:nth-child(2) { text-align: left; color: var(--text-muted); font-weight: 600; } .wkly-tbl tbody tr:hover { background: rgba(37,99,235,0.04); } .wkly-tbl tbody tr:last-child td { border-bottom: none; } .wkly-wk-lbl { text-align: left; color: var(--text-muted); font-weight: 600; } .wkly-bye-row td { background: var(--bg-secondary); } .wkly-bye-lbl { text-align: left; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); opacity: 0.7; } .wkly-missed-row td { background: rgba(220,38,38,0.03); } .wkly-missed-lbl { text-align: left; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red); opacity: 0.6; } .wkly-empty { color: var(--text-muted) !important; opacity: 0.4; } .wkly-no-data { padding: 10px 16px; font-size: 11px; color: var(--text-muted); font-style: italic; } /* ===== TEAM HIST SPLIT TABLE ===== */ .hist-split-layout { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; } .hist-split-table-wrap { overflow-x: auto; min-width: 0; } .hist-split-chart-wrap { width: 100%; min-width: 0; height: 160px; position: relative; } .hist-split-wrap { overflow-x: auto; } .hst-avg-row td { border-top: 1px solid var(--border) !important; font-size: 11px !important; } .hist-split-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .hist-split-tbl th { text-align: center; padding: 5px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); } .hist-split-tbl th:first-child { text-align: left; } .hst-yr { text-align: left !important; font-weight: 600; color: var(--text-muted); width: 70px; } .hst-num { text-align: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; } .hst-rank { font-size: 9px; color: var(--text-muted); font-weight: 500; margin-left: 2px; } .hist-split-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--border); font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-secondary); font-size: 12px; } .hist-split-tbl tbody tr:hover { background: rgba(37,99,235,0.04); } .hist-split-tbl tbody tr:last-child td { border-bottom: none; } .hst-yr-row { cursor: pointer; } .hst-yr-row:hover { background: rgba(37,99,235,0.06) !important; } .hst-wk-row td { background: var(--bg-input); font-size: 10.5px; padding: 3px 8px; border-bottom: 1px solid var(--border-light); text-align: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-secondary); } .hst-wk-row td:first-child { text-align: left; color: var(--text-muted); font-weight: 600; padding-left: 20px; } .hst-wk-row:last-of-type td { border-bottom: 2px solid var(--border); } .hst-wk-bye td { background: var(--bg-secondary); } .hst-wk-bye td:nth-child(2) { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); opacity: 0.7; } .hst-proj-row td { background: rgba(37,99,235,0.07) !important; border-top: 1px solid rgba(37,99,235,0.25); } /* ===== ROOKIES SIDEBAR + BADGE ===== */ .team-nav-rookies { border-bottom: none; } .team-nav-divider { height: 1px; background: var(--border); margin: 4px 8px; } .team-nav-conf { padding: 8px 16px 3px; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 4px; } .team-nav-conf:first-of-type { margin-top: 2px; } .team-nav-div { padding: 4px 16px 2px 22px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); opacity: 0.8; } .pwr-rookie-badge { display: flex; align-items: center; gap: 4px; margin: 1px 0 2px; } .rookie-college { font-size: 9px; color: var(--text-muted); font-style: italic; } .rookie-round { font-size: 8px; font-weight: 700; color: #f59e0b; background: rgba(245,158,11,0.12); border-radius: 3px; padding: 0 4px; line-height: 14px; } .btn-move-team { background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.4); color: #f59e0b; border-radius: 3px; padding: 0 5px; font-size: 11px; cursor: pointer; line-height: 18px; transition: background var(--transition); } .btn-move-team:hover { background: rgba(245,158,11,0.3); } /* ===== LEAGUE SUMMARY TABLE ===== */ .ls-table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; } .ls-table th, .ls-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); } .ls-group-hdr { text-align: center; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 6px 8px 4px; border-bottom: 2px solid; } .ls-group-hdr.ls-gold { color: #fff; border-color: #C6A653; background: #C6A653; } .ls-group-hdr.ls-blue { color: #fff; border-color: #1d4ed8; background: #1d4ed8; } .ls-group-hdr.ls-green { color: #fff; border-color: #047857; background: #047857; } .ls-group-hdr.ls-orange { color: #fff; border-color: #c2410c; background: #c2410c; } .ls-group-hdr.ls-red { color: #fff; border-color: #b91c1c; background: #b91c1c; } /* League Trends -- team trend mini-cards, grouped by conf/division to match the table above. Colored text only, no background fill -- matches the table's own conf/division rows. */ .lt-cards-conf-hdr { padding: 8px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(0,0,0,0.03); } .lt-cards-div-hdr { padding: 4px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: rgba(0,0,0,0.015); } .lt-team-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 8px 8px 14px; } .lt-team-card { border: 1px solid var(--border); border-radius: 8px; padding: 8px; cursor: pointer; background: var(--bg-card); } .lt-team-card:hover { border-color: var(--border-light); background: var(--bg-card-hover); } .lt-team-card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 12px; } .lt-team-card-vals { display: flex; gap: 6px; font-size: 11.5px; font-weight: 700; } /* Chart.js's responsive:true sizes the canvas to its CSS parent -- without this fixed height the sparkline has no bound and stretches to fill whatever space the grid cell happens to give it. */ .lt-team-card-chart-wrap { position: relative; height: 60px; } .ls-yr-row th { text-align: center; font-size: 9px; font-weight: 600; color: var(--text-muted); padding: 3px 8px 5px; } .ls-yr { text-align: center; } .ls-yr.ls-proj { color: #1d4ed8; font-style: italic; } .ls-team { font-size: 11px; font-weight: 700; color: var(--text-primary); padding: 4px 12px 4px 8px; white-space: nowrap; min-width: 60px; } .ls-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .ls-num { text-align: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-secondary); min-width: 42px; } .ls-num.ls-zero { color: var(--text-muted); opacity: 0.4; } .ls-num.ls-avg { color: var(--text-muted); font-style: italic; font-size: 10px; } .ls-num.ls-proj { font-style: italic; } .ls-num.ls-avg.ls-proj { color: #1d4ed8; opacity: 0.7; } .ls-sep { width: 4px; padding: 0; background: #ffffff; } .ls-sep.ls-wide { width: 10px; background: #ffffff; } .ls-yr.ls-stat { color: #6d28d9; font-style: italic; } .ls-league-avg td { border-bottom: 2px solid var(--border-light); background: rgba(37,99,235,0.04); } .ls-team-row:hover { background: rgba(37,99,235,0.05) !important; cursor: pointer; } .ls-conf-hdr td, .ls-div-hdr td { pointer-events: none; } .ls-conf-hdr:hover, .ls-div-hdr:hover { background: transparent !important; } /* ===== TEAM NOTES ===== */ .team-notes-wrap { margin-bottom: 16px; } .team-notes-input { width: 100%; min-height: 64px; border-width: 1px; border-style: solid; border-left-width: 3px; border-radius: var(--radius-sm); color: var(--text-primary); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; line-height: 1.5; padding: 10px 14px; resize: vertical; outline: none; transition: border-color var(--transition), background var(--transition); } .team-notes-input::placeholder { color: var(--text-muted); } .team-notes-input:focus { filter: brightness(1.15); } /* Higher specificity than the theme's generic [data-theme="pw"] textarea rule (white text for dark input backgrounds) -- this box's background is a pale team-color tint, so it needs dark text, not white. */ [data-theme="pw"] .team-notes-input { color: var(--text-primary); } /* ===== EXPORT BUTTON ===== */ .export-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.4); border-radius: var(--radius-sm); color: #60a5fa; font-size: 12px; font-weight: 700; font-family: 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: 0.04em; cursor: pointer; transition: all var(--transition); } .export-btn:hover { background: rgba(59,130,246,0.25); border-color: rgba(59,130,246,0.7); color: #93c5fd; } .export-btn:active { transform: scale(0.97); } .export-btn.loading { opacity: 0.6; cursor: wait; } .import-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radius-sm); color: #fff; font-size: 12px; font-weight: 700; font-family: 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: 0.04em; cursor: pointer; transition: all var(--transition); box-sizing: border-box; } .import-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.6); color: #fff; } /* ===== SCENARIO ANALYSIS ===== */ .scenario-slider-wrap { display: flex; flex-direction: column; gap: 6px; } .scenario-slider-header { display: flex; justify-content: space-between; align-items: center; } .scenario-slider-val { font-weight: 600; font-size: 13px; color: var(--text-primary); } .scenario-delta { font-size: 10px; font-weight: 600; margin-left: 5px; } .scenario-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; background: var(--border-light); outline: none; cursor: pointer; accent-color: var(--accent); } .scenario-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg-card); box-shadow: 0 0 0 1px var(--accent); } .scenario-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg-card); } .scenario-preset-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: 11px; font-weight: 600; cursor: pointer; font-family: 'IBM Plex Sans', system-ui, sans-serif; transition: all 0.15s; } .scenario-preset-btn:hover { background: var(--accent); color: white; } .scenario-preset-reset { border-color: var(--text-muted); color: var(--text-muted); } .scenario-preset-reset:hover { background: var(--text-muted); color: var(--bg-primary); } /* ===== SCENARIO: EXTENDED CLASSES ===== */ .sc-fan-table td { padding: 4px 8px; } .sc-fan-row--current { background: var(--accent-light); } .sc-fan-label--floor { color: var(--red, #ef4444); font-weight: 700; } .sc-fan-label--ceiling { color: var(--green, #10b981); font-weight: 700; } .sc-fan-metric-select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; padding: 4px 8px; cursor: pointer; font-family: 'IBM Plex Sans', system-ui, sans-serif; } .sc-fan-metric-select:focus { outline: none; border-color: var(--accent); } .sc-matrix-wrap { overflow-x: auto; padding: 0 16px 4px; } .sc-matrix-grid { display: grid; gap: 3px; } .sc-matrix-cell { height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; cursor: default; transition: transform 0.1s; min-width: 48px; } .sc-matrix-cell:hover { transform: scale(1.08); z-index: 2; position: relative; } .sc-matrix-cell--current { outline: 2px solid #fff; outline-offset: -2px; } .sc-matrix-y-label { font-size: 10px; color: var(--text-muted); text-align: right; padding-right: 8px; display: flex; align-items: center; justify-content: flex-end; } .sc-matrix-x-label { font-size: 10px; color: var(--text-muted); text-align: center; padding: 2px 0 4px; } .sc-team-impact-table .sc-delta-cell.pos { color: #10b981; font-weight: 700; } .sc-team-impact-table .sc-delta-cell.neg { color: #ef4444; font-weight: 700; } .sc-rank-chg--up { color: #10b981; font-size: 10px; } .sc-rank-chg--dn { color: #ef4444; font-size: 10px; } /* ===== REPLACEMENT RANK CONTROL ===== */ .repl-control { display: flex; align-items: center; gap: 5px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; } .repl-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .repl-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1; padding: 1px 7px; transition: background 0.12s; } .repl-btn:hover { background: var(--border); color: var(--text-primary); } .repl-val { min-width: 22px; text-align: center; font-size: 12px; font-weight: 700; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: #f59e0b; } /* ===== TREND MODE TOGGLE ===== */ .trend-toggle { display: flex; gap: 2px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 2px; } .trend-btn { background: transparent; border: none; border-radius: 4px; color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 500; padding: 3px 10px; transition: background 0.15s, color 0.15s; } .trend-btn:hover { color: var(--text-primary); background: var(--border); } .trend-btn.active { background: rgba(59,130,246,0.15); color: #3b82f6; } /* ===== ADD PLAYER PANEL ===== */ .add-player-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .app-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; } .app-controls { display: flex; gap: 8px; margin-bottom: 12px; } .app-controls .search-input { flex: 1; font-size: 12px; padding: 7px 10px; } .app-results { max-height: 260px; overflow-y: auto; } .app-result-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px; cursor: default; transition: background var(--transition); } .app-result-row:hover { background: rgba(37,99,235,0.06); } .app-result-hint { font-size: 11px; color: var(--text-muted); padding: 6px 0; } /* ===== ROOKIE STUDY PAGE ===== */ .rk-stats-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rk-stats-table th { padding: 6px 10px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); } .rk-stats-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-light); } .rk-highlight-row td { font-size: 14px; font-weight: 700; } .rk-comp-table { width: 100%; border-collapse: collapse; font-size: 12px; } .rk-comp-table th { padding: 5px 8px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); } .rk-comp-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-light); } .rk-top-comp { background: rgba(37,99,235,0.05); } .rk-hist-tagged { background: rgba(245,158,11,0.08); font-weight: 600; } .delta-pos { color: #059669; font-weight: 700; } .delta-neg { color: #dc2626; font-weight: 700; } .rk-tab-nav { display: flex; gap: 4px; border-bottom: 2px solid var(--border); padding-bottom: 0; } .rk-tab-btn { padding: 8px 20px; font-size: 13px; font-weight: 600; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .rk-tab-btn:hover { color: var(--text-primary); } .rk-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } /* Analytics suite */ .anl-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-bottom: 20px; } .anl-rank { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; font-size: 10px; font-weight: 700; margin-right: 4px; flex-shrink: 0; } .anl-rank-gold { background: #d97706; color: #fff; } .anl-rank-silver { background: #64748b; color: #fff; } .anl-rank-bronze { background: #92400e; color: #fff; } .anl-rank-other { background: var(--bg-secondary); color: var(--text-secondary); } .rk-pos-section { margin-bottom: 8px; } .rk-pos-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 20px 0 12px; } .rk-row-2026 { background: rgba(30,58,138,0.10); } .rk-pick-input { width: 52px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-input); color: var(--text-primary); font-size: 12px; font-weight: 700; text-align: center; } .rk-pick-input:focus { outline: none; border-color: var(--accent); } .pos-chip { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.4; } /* ===== POSITION TABLE GROUP HEADERS + STICKY ===== */ .pos-table .pos-group-header-row th, .pos-table .pos-group-hdr { padding: 5px 8px 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; border-bottom: none; color: #fff; position: sticky; top: 0; z-index: 3; /* opaque so rows don't bleed through on vertical scroll */ background-clip: padding-box; } .pos-table thead tr:nth-child(2) th { position: sticky; top: 27px; z-index: 2; background: var(--bg-card); } /* ===== ADP COMPARE TABLE ===== */ .adp-compare-table .adp-group-header-row th { padding: 5px 8px 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: none; color: #fff; position: sticky; top: 0; z-index: 3; } .adp-compare-table thead tr:nth-child(2) th { position: sticky; top: 27px; z-index: 2; background: var(--bg-card); } .adp-group-hdr { text-align: center !important; } .player-hdr { background: #475569; } .ud-hdr { background: #1d4ed8; } .my-hdr { background: #b45309; } .cmp-hdr { background: #6d28d9; } .blend-hdr { background: #0e7490; } .adp-group-col { border-left: 1px solid #3b82f630; } .my-group-col { border-left: 1px solid #f59e0b30; } .cmp-group-col { border-left: 1px solid #8b5cf630; } .blend-group-col { border-left: 1px solid #06b6d430; } .adp-compare-table thead tr:nth-child(2) th:nth-child(4) { border-left: 1px solid #3b82f640; } .adp-compare-table thead tr:nth-child(2) th:nth-child(7) { border-left: 1px solid #f59e0b40; } .adp-compare-table thead tr:nth-child(2) th:nth-child(10) { border-left: 1px solid #8b5cf640; } .adp-compare-table thead tr:nth-child(2) th:nth-child(13) { border-left: 1px solid #06b6d440; } .adp-compare-wrap { overflow-y: auto; max-height: calc(100vh - 180px); } /* ===== DRAFT LEADERBOARD ===== */ .draft-lb-wrap { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 220px); } #draftTable { background: var(--bg-card); } #draftTable .group-header-row th { position: sticky; top: 0; z-index: 4; } #draftTable thead tr:nth-child(2) th { position: sticky; top: 29px; z-index: 3; background: var(--bg-card); border-bottom: 2px solid var(--border); } #draftTable tbody tr { background: var(--bg-card); } #draftTable tbody tr:hover { background: var(--bg-card-hover); } .sec-roster { border-left: 2px solid rgba(0,0,0,0.13) !important; } .sec-roster-cnt { border-left: 1px solid rgba(0,0,0,0.10) !important; } .sec-strategy { border-left: 2px solid rgba(0,0,0,0.13) !important; } .sec-sim { border-left: 2px solid rgba(0,0,0,0.13) !important; } .sec-sim-scoring { border-left: 2px solid rgba(0,0,0,0.18) !important; } /* ===== DRAFT BOARD ===== */ #db-grid { display: flex; flex-direction: column; gap: 4px; } .db-row { display: flex; align-items: stretch; gap: 4px; } .db-round-label { width: 28px; min-width: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 11px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } .db-cells { display: flex; gap: 4px; flex: 1; } .db-cell { flex: 1; min-width: 0; border-radius: 6px; padding: 6px 7px; display: flex; flex-direction: column; gap: 3px; cursor: default; transition: opacity 0.15s; } .db-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .db-pos-tag { font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.04em; flex-shrink: 0; } .db-adp-num { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.03em; flex-shrink: 0; } .db-name { font-size: 11px; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .db-diff { font-size: 11px; font-weight: 700; margin-top: auto; } .db-legend-swatch { display: inline-block; padding: 2px 7px; border-radius: 4px; border: 1px solid; font-size: 10px; font-weight: 600; color: #e2e8f0; } /* ===== DRAFT ANALYSIS ===== */ .draft-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin: 0 2px; white-space: nowrap; letter-spacing: 0.02em; } .draft-tag.stacked { background: #1e40af; color: #fff; } .draft-tag.stacked-x2 { background: #1d4ed8; color: #fff; } .draft-tag.stacked-x3 { background: #2563eb; color: #fff; } .draft-tag.dbl-stack { background: #3730a3; color: #fff; } .draft-tag.dbl-stack-x2 { background: #4338ca; color: #fff; } .draft-tag.dbl-stack-x3 { background: #6d28d9; color: #fff; } .draft-tag.zero-rb { background: #065f46; color: #fff; } .draft-tag.hero-rb { background: #ea580c; color: #fff; } .draft-tag.robust-rb { background: #991b1b; color: #fff; } .draft-tag.hyper-fragile-rb { background: #7f1d1d; color: #fff; } .draft-tag.early-qb { background: #854d0e; color: #fff; } .draft-tag.heavy-qb { background: #92400e; color: #fff; } .draft-tag.lean-qb { background: #374151; color: #fff; } .draft-tag.late-qb { background: #4c1d95; color: #fff; } .draft-tag.te-prem { background: #92400e; color: #fff; } .draft-tag.heavy-te { background: #78350f; color: #fff; } .draft-tag.late-te { background: #451a03; color: #fff; } .draft-tag.wr-heavy { background: #0f766e; color: #fff; } .draft-tag.hero-wr { background: #155e75; color: #fff; } .draft-team-row:hover td { background: var(--bg-card-hover); } .draft-roster-expand td { background: var(--bg-input); } .draft-roster-expand tr:hover td { background: var(--bg-card-hover); } /* ===== HOME PAGE ===== */ .home-hero { display: flex; align-items: flex-start; gap: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 40px; margin-bottom: 32px; box-shadow: var(--shadow); } .home-logo-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; background: linear-gradient(135deg, #1e3a5f, #0a1628); border-radius: 20px; border: 1px solid rgba(59,130,246,0.4); box-shadow: 0 4px 16px rgba(0,0,0,0.20); } .home-hero-text { flex: 1; } .home-title { font-family: 'IBM Plex Serif', Georgia, serif; letter-spacing: -0.01em; font-size: 28px; font-weight: 600; color: var(--text-primary); line-height: 1.15; margin-bottom: 2px; } .home-title-year { color: var(--accent); } .home-byline { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; } .home-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.65; max-width: 640px; margin-bottom: 16px; } .home-pill-row { display: flex; flex-wrap: wrap; gap: 8px; } .home-pill { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-light); border: 1px solid rgba(37,99,235,0.25); border-radius: 20px; padding: 3px 12px; letter-spacing: 0.04em; } .home-section-label { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; } .home-nav-section { margin-bottom: 28px; } .home-nav-label { font-size: 10px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; padding-left: 2px; } .home-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .home-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 20px 18px; cursor: pointer; position: relative; transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s; outline: none; } .home-card:hover { border-color: var(--accent); box-shadow: 0 4px 18px rgba(37,99,235,0.12); transform: translateY(-2px); } .home-card-wip { opacity: 0.45; cursor: default; pointer-events: none; } .proj-result-badge { display:inline-block; padding:1px 7px; border-radius:4px; font-size:11px; font-weight:700; color:#fff; letter-spacing:0.04em; } .proj-win-spread { background:rgba(239,68,68,0.18); color:#dc2626; } .proj-loss-spread { background:rgba(59,130,246,0.18); color:#2563eb; } .proj-tie-spread { background:rgba(148,163,184,0.12); color:var(--text-secondary); } .home-card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .home-card-icon { font-size: 24px; margin-bottom: 10px; line-height: 1; } .home-card-label { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; } .home-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; } /* ===== ETR HERO BRANDING ===== */ .etr-hero { background: #0d0d0d; border-color: #22a648; border-width: 2px; flex-direction: row; align-items: center; gap: 0; padding: 0; overflow: hidden; } .etr-hero-left { display: flex; align-items: stretch; flex-shrink: 0; overflow: hidden; align-self: stretch; } .etr-logo-img { width: 260px; height: 100%; object-fit: cover; object-position: center; display: block; } .etr-hero-divider { width: 2px; align-self: stretch; background: #22a648; opacity: 0.5; flex-shrink: 0; } .etr-hero-text { padding: 36px 40px; flex: 1; } .etr-built-for { font-size: 10px; font-weight: 700; color: #22a648; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; } .etr-title { color: #fff; font-size: 26px; margin-bottom: 2px; } .etr-green { color: #22a648; } .etr-byline { color: #6b7280; margin-bottom: 12px; } .etr-desc { color: #9ca3af; margin-bottom: 16px; } .etr-pill { background: rgba(34,166,72,0.15) !important; border-color: rgba(34,166,72,0.4) !important; color: #22a648 !important; } /* ===== PROCESS WINS HERO ===== */ .pw-hero { background: #042318; border: none; box-shadow: 0 0 32px rgba(201,184,140,0.18), 0 4px 24px rgba(0,0,0,0.5); flex-direction: row; align-items: center; gap: 0; padding: 0; overflow: hidden; } .pw-hero-left { display: flex; flex-shrink: 0; align-self: stretch; /* The old asset was wide and bled to the column edges. The mark is square and contained, so it has to be centred in the column instead. */ align-items: center; justify-content: center; overflow: hidden; width: 260px; } .pw-logo-img { width: 200px; max-height: 200px; height: auto; object-fit: contain; display: block; } .pw-hero-divider { width: 4px; align-self: stretch; background: linear-gradient(to bottom, transparent, #C9B88C, #D9C7A0, #C9B88C, transparent); opacity: 0.6; flex-shrink: 0; } .pw-hero-text { padding: 36px 40px; flex: 1; } .pw-built-for { font-size: 12px; font-weight: 700; color: #C9B88C; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; } .pw-title { color: #FFFFFF; font-size: 32px; margin-bottom: 2px; } .pw-accent { color: #FFFFFF; } .pw-desc { color: #A8B0A5; font-size: 16px; margin-bottom: 16px; max-width: 900px; } .pw-pill { background: rgba(201,184,140,0.14) !important; border-color: rgba(201,184,140,0.4) !important; color: #C9B88C !important; font-size: 13px; padding: 5px 16px; } /* ---- Home hero v2: funnel diagram + value strip ---- */ .pw-hero-v2 { background: #042318; border-radius: var(--radius); margin-bottom: 32px; } .hv2-main { display: flex; align-items: center; gap: 40px; padding: 40px 44px 28px; } .hv2-left { flex: 0 1 380px; min-width: 280px; } .hv2-title { font-family: 'IBM Plex Serif', Georgia, serif; color: #FFFFFF; font-size: 34px; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 12px; } .hv2-desc { color: #A8B0A5; font-size: 15px; line-height: 1.6; max-width: 360px; margin-bottom: 22px; } .hv2-cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .hv2-cta-row .hv2-btn { width: fit-content; } .hv2-btn { border-radius: 999px; padding: 11px 22px; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform 0.15s, box-shadow 0.15s; } .hv2-btn:hover { transform: translateY(-1px); } .hv2-btn-solid { background: linear-gradient(135deg, #F2E9D3 0%, #DECBA0 45%, #C9B88C 100%); color: #042318; border: none; box-shadow: 0 4px 16px rgba(0,0,0,0.25); } .hv2-btn-outline { background: transparent; color: #C9B88C; border: 1px solid rgba(201,184,140,0.5); } .hv2-funnel-wrap { flex: 0 1 420px; min-width: 300px; } .hv2-hero-shot { flex: 1 1 320px; min-width: 240px; align-self: stretch; border-radius: 12px; overflow: hidden; border: 2px solid #C9B88C; box-shadow: 0 8px 28px rgba(0,0,0,0.4); } .hv2-hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } @media (max-width: 900px) { .hv2-hero-shot { display: none; } } .hv2-funnel-label { color: #C9B88C; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 22px; } /* Workflow timeline: a gradient line (green -> gold) running behind a column of stage nodes, each connected to its title/description. Plain block flow -- rows can never overlap regardless of text length or width, unlike the funnel attempts this replaced. */ .hv2-flow { position: relative; } .hv2-flow-line { position: absolute; left: 31px; top: 32px; bottom: 32px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, rgba(150,190,150,0.5), rgba(210,190,110,0.55), #E8C97A); opacity: 0.7; } .hv2-flow-step { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 26px; } .hv2-flow-step:last-child { margin-bottom: 0; } .hv2-flow-node { position: relative; z-index: 1; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(201,184,140,0.4); /* Fully opaque (no alpha) -- a translucent glass fill let the connector line behind each node show through as a faint bright streak across it. */ background: radial-gradient(circle at 32% 26%, #1F5C43 0%, #0C3524 48%, #042318 100%); color: #E8C97A; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Glass highlight -- a soft bright patch near the upper-left, screen-blended so it lightens rather than flattens the base gradient underneath it. */ .hv2-flow-node::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 30% 22%, rgba(255,255,255,0.4), transparent 55%); mix-blend-mode: screen; pointer-events: none; } /* Sphere shading -- lit at the top edge, shadowed at the bottom, so the circle reads as a lit glass ball rather than a flat disc. */ .hv2-flow-node::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 3px 6px rgba(255,255,255,0.12), inset 0 -10px 16px rgba(0,0,0,0.55); pointer-events: none; } .hv2-flow-node svg, .hv2-flow-node img { position: relative; z-index: 1; width: 26px; height: 26px; filter: drop-shadow(0 0 4px rgba(232,201,122,0.7)); } .hv2-flow-text { min-width: 0; } .hv2-flow-title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: #FFFFFF; margin-bottom: 4px; } .hv2-flow-num { color: #C9B88C; margin-right: 6px; } .hv2-flow-desc { font-size: 12px; color: #A8B0A5; line-height: 1.45; max-width: 360px; } .hv2-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(201,184,140,0.25); } .hv2-strip-item { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-left: 1px solid rgba(201,184,140,0.18); } .hv2-strip-item:first-child { border-left: none; } .hv2-strip-icon { flex-shrink: 0; width: 34px; height: 34px; border: 1px solid rgba(201,184,140,0.4); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #C9B88C; } .hv2-strip-title { font-size: 13px; font-weight: 700; color: #FFFFFF; margin-bottom: 2px; } .hv2-strip-desc { font-size: 12px; color: #A8B0A5; line-height: 1.35; } @media (max-width: 900px) { .hv2-main { flex-direction: column; align-items: stretch; padding: 32px 24px 24px; } .hv2-left { flex: none; max-width: none; } .hv2-desc { max-width: none; } .hv2-strip { grid-template-columns: repeat(2, 1fr); } .hv2-strip-item:nth-child(3) { border-left: none; } } @media (max-width: 520px) { .hv2-strip { grid-template-columns: 1fr; } .hv2-strip-item { border-left: none !important; border-top: 1px solid rgba(201,184,140,0.18); } .hv2-strip-item:first-child { border-top: none; } } .home-conf-group { margin-bottom: 20px; } .home-conf-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-left: 3px solid; padding-left: 8px; margin-bottom: 12px; } .home-div-group { margin-bottom: 14px; } .home-div-label { font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 7px; padding-left: 2px; } .home-team-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .home-team-card { padding: 14px 14px 12px; text-align: center; } .home-team-chip { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; border-radius: 6px; padding: 3px 10px; letter-spacing: 0.04em; } .home-team-card .home-card-label { font-size: 13px; color: var(--text-secondary); } .home-team-logo { width: 52px; height: 52px; object-fit: contain; margin-top: 8px; display: block; margin-left: auto; margin-right: auto; } /* ===== CLOUD: CHECKOUT BANNER ===== */ .checkout-banner { display: flex; align-items: center; gap: 12px; padding: 10px 20px; font-size: 13px; font-weight: 500; border-radius: 10px; margin: 12px 20px 0; } .checkout-available { background: rgba(34,166,72,0.08); color: #22a648; border: 1px solid rgba(34,166,72,0.25); } .checkout-mine { background: rgba(34,166,72,0.14); color: #22a648; border: 1px solid rgba(34,166,72,0.4); } .checkout-locked { background: rgba(239,68,68,0.08); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); } .checkout-btn { margin-left: auto; background: rgba(255,255,255,0.08); border: 1px solid currentColor; border-radius: 6px; padding: 4px 14px; font-size: 12px; font-weight: 700; color: inherit; cursor: pointer; white-space: nowrap; } .checkout-btn-primary { background: #22a648; color: #fff; border-color: #22a648; } .checkout-btn:hover { opacity: 0.8; } /* ===== SCHEDULE ===== */ .schedule-grid th, .schedule-grid td { font-size: 11px; padding: 3px 5px; text-align: center; white-space: nowrap; } .schedule-section-row th { padding: 5px 0; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .schedule-section.reg-season { background: #1d4ed8; color: #fff; } .schedule-section.playoffs { background: #b45309; color: #fff; } .schedule-section.rs-stats { background: #475569; color: #fff; } .schedule-section.po-stats { background: #6d28d9; color: #fff; } .schedule-section.wk18 { background: rgba(148,163,184,0.1); color: var(--text-muted); } .sched-divider { border-left: 2px solid rgba(100,116,139,0.5) !important; } .sched-stat { font-weight: 600; font-size: 11px; text-align: center; } .sched-stat-hd { font-size: 10px; color: var(--text-muted); text-align: center; } .sched-bye { color: var(--text-secondary); font-size: 11px; } .sched-bye-col { color: var(--text-muted); font-size: 11px; text-align: center; } .schedule-team-name { text-align: left !important; padding-left: 4px !important; } .sched-team-badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .schedule-cell { border-radius: 3px; } .dome-mark { position: absolute; top: 1px; right: 2px; line-height: 1; opacity: 0.7; pointer-events: none; } .sched-home-dome { margin-left: 3px; opacity: 0.85; } .schedule-team-row { cursor: pointer; } .schedule-team-row:hover td { background: var(--bg-hover) !important; } .bye-cell { color: var(--text-muted); font-style: italic; } .bye-row td { color: var(--text-muted); font-style: italic; } .implied-high { background: rgba(239,68,68,0.18); color: #dc2626; } .implied-mid { background: rgba(148,163,184,0.12); color: var(--text-secondary); } .implied-low { background: rgba(59,130,246,0.18); color: #2563eb; } .bet-fav { background: rgba(220,38,38,0.15); color: #dc2626; } .bet-close { background: rgba(100,116,139,0.07); color: var(--text-secondary); } .bet-dog { background: rgba(37,99,235,0.15); color: #2563eb; } .bet-fav-stat { background: rgba(220,38,38,0.10); color: #dc2626; font-weight: 700; } .bet-close-stat { background: rgba(100,116,139,0.06); color: var(--text-muted); font-weight: 700; } .bet-dog-stat { background: rgba(37,99,235,0.10); color: #2563eb; font-weight: 700; } .bet-sched-hdr { background: #1d4ed8; color: #fff !important; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 8px; } .bet-sum-hdr { background: #6d28d9; color: #fff !important; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 8px; } .bet-sum-subhd { background: rgba(109,40,217,0.12); color: #7c3aed; font-weight: 700; } .sched-footnote { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: 6px; } .sched-conf-row th { padding: 6px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); background: rgba(99,102,241,0.08); border-top: 1px solid var(--border); } .sched-div-row th { padding: 3px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: transparent; } /* ===== AUDIT LOG ===== */ .audit-status-badge { display:inline-block; padding:2px 9px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:0.03em; } .audit-status-signedoff { background:rgba(52,211,153,0.15); color:#34d399; } .audit-status-edited { background:rgba(148,163,184,0.10); color:#94a3b8; } .audit-status-inprogress { background:rgba(251,191,36,0.15); color:#fbbf24; } .audit-overview-table tbody tr.audit-overview-row:hover td { background: var(--bg-hover); } .audit-group-header-row th { padding: 0; } .audit-group-hdr { padding: 5px 12px !important; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff !important; text-align: left; } .audit-ghdr-team { background: #374151; } .audit-ghdr-signoff { background: #1a6b3a; } .audit-ghdr-edit { background: #1e3a5f; } .audit-session-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:16px; overflow:hidden; } .audit-session-header { padding:12px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.02); } .audit-session-who { font-weight:700; font-size:13px; } .audit-session-time { font-size:12px; color:var(--text-muted); } .audit-diff-table { width:100%; border-collapse:collapse; } .audit-diff-table thead th { padding:7px 12px; font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); text-align:left; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.015); } .audit-diff-table tbody td { padding:7px 12px; font-size:12px; border-bottom:1px solid rgba(255,255,255,0.04); } .audit-diff-table tbody td:first-child { font-weight:600; } .audit-diff-table tbody tr:last-child td { border-bottom:none; } .audit-diff-up { color:#34d399; font-weight:700; } .audit-diff-down { color:#f87171; font-weight:700; } .audit-back-btn { background:transparent; border:1px solid var(--border); color:var(--text-secondary); border-radius:6px; padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.15s; } .audit-back-btn:hover { border-color:var(--accent); color:var(--accent); } /* ===== AUDIT — BIGGEST MOVERS ===== */ /* Change Log scope banner — makes the active projection set unmissable, since every number on the page is computed against that set and only that set. */ .audit-scope-banner { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; background:var(--bg-secondary); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; padding:12px 16px; margin-bottom:20px; } .audit-scope-label { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); } .audit-scope-name { font-size:15px; font-weight:700; color:var(--text-primary); } /* Shared style for a raw projection-set uuid shown in the UI — mono and muted so a 36-char id reads as a reference value and not as a heading. */ .set-id-mono { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; font-weight:500; color:var(--text-muted); word-break:break-all; } /* The "ID " line under the set-name input in Manage Your Set */ .set-id-line { margin-top:6px; font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); } .set-id-line .set-id-mono { font-size:11px; letter-spacing:0; text-transform:none; } .audit-scope-note { font-size:11px; color:var(--text-muted); flex:1 1 100%; } .audit-movers-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } /* Team filter sits with the day tabs. Styled to match .trend-btn rather than the browser default select, which looks alien next to them. */ .audit-team-filter { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 11px; font-weight: 600; padding: 4px 8px; margin-right: 8px; cursor: pointer; } .audit-team-filter:focus { outline: none; border-color: var(--yellow); } /* League Trends season-range dropdowns */ .ls-year-select { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 11px; font-weight: 600; padding: 4px 6px; cursor: pointer; } .ls-year-select:focus { outline: none; border-color: var(--accent); } .audit-movers-title { font-size:13px; font-weight:700; color:var(--text-primary); letter-spacing:0.01em; } .audit-movers-tabs { display:flex; gap:6px; } .audit-movers-panel { overflow-x:auto; } .audit-movers-table tbody td { font-size:12px; } .audit-movers-table thead th { font-size:11px; } /* Rankings change-log table (_buildRankingAuditPanel) only -- other .audit-movers-table users (Biggest Movers, Team Volume Changes) already have their own multi-color group-header row above this one and must not be double-colored. */ .rank-audit-table thead th { background:#042318; color:#fff; font-weight:700; font-size: 11px; letter-spacing:0.06em; text-transform:uppercase; text-align:left; padding:8px 12px; line-height: 1.3; vertical-align: middle; white-space: nowrap; } .audit-mover-row:hover td { background: var(--bg-hover); } .mover-expand-inner { padding:16px 20px; background:var(--bg-secondary); border-top:1px solid var(--border); } .mover-expand-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media(max-width:900px) { .mover-expand-grid { grid-template-columns:1fr; } } .mover-expand-table-wrap { overflow-x:auto; } .mover-expand-chart-wrap { min-width:0; } .wf-chart { display:flex; flex-direction:column; gap:6px; padding:4px 0; } .wf-row { display:flex; align-items:center; gap:10px; } .wf-label { flex:0 0 160px; font-size:11px; color:var(--text-muted); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wf-stat-change { font-weight:400; opacity:0.7; } .wf-track { flex:1; position:relative; height:18px; display:flex; align-items:center; } .wf-bar { height:14px; border-radius:2px; min-width:2px; transition:width 0.2s; } .wf-neutral { background:var(--text-muted); opacity:0.5; } .wf-pos { background:#34d399; } .wf-neg { background:#f87171; } .wf-after { background:var(--accent); opacity:0.75; } .wf-val { margin-left:6px; font-size:11px; font-weight:600; white-space:nowrap; } /* ===== MOBILE ===== */ @media (max-width: 600px) { html { font-size: 13px; } .topbar-title { font-size: 14px; } .topbar-sub { font-size: 10px; } .nav-label { font-size: 11px; } .page-content { padding: 12px 10px; } .rankings-table th, .rankings-table td { font-size: 11px; padding: 5px 6px; } .player-name { font-size: 12px; } .team-badge { font-size: 10px; padding: 2px 5px; } .stat-label { font-size: 10px; } .stat-value { font-size: 13px; } .section-title { font-size: 12px; } .hist-table th, .hist-table td { font-size: 11px; } } /* ===== GUILLOTINE LEAGUE ===== */ /* Draft board 2-column layout */ .g-draft-layout { display: grid; grid-template-columns: 290px 1fr; gap: 16px; height: calc(100vh - 80px); padding: 16px 16px 0; align-items: stretch; } .g-draft-panel { background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 112px); } .g-draft-pool { overflow: hidden; } .g-draft-center { overflow: hidden; } /* Teams grid below draft board */ .g-teams-below { padding: 16px; } .g-all-teams-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; } @media (max-width: 1200px) { .g-all-teams-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 700px) { .g-all-teams-grid { grid-template-columns: repeat(2, 1fr); } } .g-panel-header { background: #1e3a5f; color: #fff; font-size: 13px; font-weight: 700; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } /* On the clock banner */ .g-onclock-banner { background: #1E6BFF; color: #fff; font-size: 13px; padding: 10px 14px; flex-shrink: 0; } /* Position filter tabs */ .g-pos-tabs { display: flex; gap: 4px; } .g-pos-tab { background: rgba(255,255,255,0.15); color: #fff; border: none; border-radius: 4px; padding: 3px 7px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .g-pos-tab.active, .g-pos-tab:hover { background: rgba(255,255,255,0.4); } /* Player search + list */ .g-draft-pool input[type="text"] { margin: 8px; width: calc(100% - 16px); } .g-player-list { overflow-y: auto; flex: 1; padding: 0 8px 8px; } .g-pool-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-bottom: 1px solid #f3f4f6; font-size: 12px; } .g-pool-adp { font-size: 10px; color: #6b7280; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; } .g-pool-name { flex: 1; font-weight: 500; } .g-pool-team { font-size: 10px; color: #6b7280; min-width: 30px; } .g-pick-btn { background: #1E6BFF; color: #fff; border: none; border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; } .g-pick-btn:hover { background: #1a5ce0; } .g-pick-btn-disabled { width: 36px; text-align: center; color: #d1d5db; font-size: 13px; } /* Draft center panel */ .g-draft-center { padding: 0; overflow: hidden; } .g-board-scroll { overflow: auto; flex: 1; } /* Snake draft board grid */ .g-board-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 11px; } .g-board-table thead tr { background: #f3f4f6; position: sticky; top: 0; z-index: 2; } .g-board-th { padding: 4px 6px; text-align: center; font-size: 9px; font-weight: 700; color: #374151; white-space: nowrap; border: 1px solid #e5e7eb; min-width: 90px; max-width: 120px; } .g-board-round-hdr { padding: 6px 4px; width: 36px; border: 1px solid #e5e7eb; } .g-board-round { background: #1e3a5f; color: #fff; font-size: 10px; font-weight: 700; text-align: center; padding: 2px 2px; border: 1px solid #16305a; white-space: nowrap; position: sticky; left: 0; z-index: 1; min-width: 30px; } .g-board-arrow { display: block; font-size: 8px; color: #93c5fd; margin-top: 0; } .g-board-cell { border: 1px solid #e5e7eb; padding: 2px 4px; vertical-align: top; min-height: 26px; } .g-board-filled { background: #fff; } .g-board-empty { background: #fafafa; } .g-board-current { background: #eff6ff; outline: 2px solid #1E6BFF; outline-offset: -2px; } .g-board-player { display: block; font-weight: 600; color: #111; font-size: 10px; line-height: 1.2; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; } .g-board-pick-num { display: block; font-size: 8px; color: #9ca3af; margin-top: 0; } .g-board-cell-top { display: flex; align-items: center; gap: 3px; margin-bottom: 1px; } .g-board-team-badge { font-size: 9px; font-weight: 700; color: #fff; padding: 1px 4px; border-radius: 3px; white-space: nowrap; letter-spacing: 0.02em; } .g-board-th-owner { font-size: 9px; color: #9ca3af; font-weight: 400; margin-top: 1px; } /* Roster cards */ .g-roster-card { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; margin-bottom: 16px; } .g-roster-header { background: #1e3a5f; color: #fff; padding: 8px 12px; } .g-roster-header-main { display: flex; justify-content: space-between; align-items: flex-start; } .g-roster-owner { font-size: 11px; color: rgba(255,255,255,0.75); font-weight: 500; margin-top: 2px; } .g-roster-team-name { font-size: 13px; font-weight: 700; color: #fff; } .g-roster-slot-num { font-size: 11px; color: rgba(255,255,255,0.65); white-space: nowrap; margin-top: 1px; } .g-roster-rows { background: #fff; } .g-roster-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid #f9fafb; font-size: 12px; } .g-roster-empty { background: #fafafa; } .g-roster-slot-label { font-size: 10px; font-weight: 700; color: #9ca3af; min-width: 36px; text-transform: uppercase; } .g-roster-player { flex: 1; color: #111; } /* Stat cards (setup page) */ .g-stat-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; text-align: center; } .g-stat-num { font-size: 28px; font-weight: 700; color: #1E6BFF; } .g-stat-label { font-size: 12px; color: #6b7280; margin-top: 4px; text-transform: uppercase; font-weight: 600; } .g-setup-input { border: 1px solid #e5e7eb; border-radius: 5px; padding: 5px 8px; font-size: 13px; color: #111827; background: #fff; transition: border-color 0.15s; } .g-setup-input:focus { outline: none; border-color: #1E6BFF; } /* Teams page */ .g-teams-layout { max-width: 1100px; } .g-owner-group { margin-bottom: 32px; } .g-owner-group-header { background: #1e3a5f; color: #fff; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 8px 8px 0 0; text-transform: uppercase; letter-spacing: 0.05em; } .g-owner-group-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; background: #f9fafb; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 8px 8px; } @media (max-width: 900px) { .g-draft-layout { grid-template-columns: 1fr; height: auto; } .g-draft-panel { max-height: none; } .g-owner-group-teams { grid-template-columns: 1fr; } } /* ===== WORLD CUP 2026 ===== */ .wc-root { max-width: 1200px; } /* Tabs */ .wc-tab-bar { display: flex; gap: 0; border-bottom: 2px solid #1f2937; margin-bottom: 16px; } .wc-tab { background: none; border: none; color: #6b7280; font-size: 13px; font-weight: 600; padding: 10px 22px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; } .wc-tab:hover { color: #d1d5db; } .wc-tab.active { color: #34d399; border-bottom-color: #34d399; } .wc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .wc-search { background: #1f2937; border: 1px solid #374151; color: #f9fafb; font-size: 13px; padding: 6px 12px; border-radius: 6px; width: 200px; } .wc-search:focus { outline: none; border-color: #34d399; } .wc-pos-filters { display: flex; gap: 4px; } .wc-filter-btn { background: #1f2937; border: 1px solid #374151; color: #9ca3af; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s; } .wc-filter-btn:hover { border-color: #4b5563; color: #d1d5db; } .wc-filter-btn.active { background: #065f46; border-color: #34d399; color: #34d399; } .wc-select { background: #1f2937; border: 1px solid #374151; color: #d1d5db; font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer; } .wc-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9ca3af; cursor: pointer; user-select: none; } .wc-table { width: 100%; border-collapse: collapse; font-size: 13px; } .wc-group-hdr { background: #1e3a5f; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; } .wc-group-hdr th { padding: 8px 12px; border-bottom: 2px solid rgba(255,255,255,0.12); } .wc-col-hdr th { background: #111827; } .wc-th { background: #111827; color: #f9fafb; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 7px 10px; text-align: center; border-bottom: 1px solid #1f2937; white-space: nowrap; cursor: pointer; user-select: none; } .wc-th-left { text-align: left; } .wc-th:hover { color: #d1d5db; } .wc-th-on { color: #34d399; } .wc-row td { padding: 6px 10px; border-bottom: 1px solid #0d1117; vertical-align: middle; background: #0d1117; color: #f9fafb; } .wc-row:hover td { background: #111827; } .wc-rank { color: #f9fafb; width: 36px; text-align: center; } .wc-td-num { text-align: center; white-space: nowrap; } .wc-td-center { text-align: center; } .wc-td-player { max-width: 200px; } .wc-td-team { font-size: 12px; font-weight: 600; color: #f9fafb; white-space: nowrap; text-align: center; } .wc-td-club { font-size: 11px; color: #d1d5db; white-space: nowrap; padding: 6px 8px; } .wc-stat-g { color: #86efac; } .wc-stat-a { color: #93c5fd; } .wc-odds-team { font-weight: 700; padding: 6px 10px; color: #f9fafb; white-space: nowrap; } .wc-odds-row { cursor: pointer; } .wc-odds-expanded td { background: #0d1c2e !important; } .wc-dim { color: #374151; } .wc-pname { font-size: 13px; color: #f9fafb; font-weight: 500; } .wc-status { font-size: 10px; font-weight: 700; color: #f87171; margin-left: 6px; vertical-align: middle; } .wc-pos { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em; white-space: nowrap; } .wc-yes { display: inline-block; background: rgba(34,197,94,.15); color: #22c55e; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.04em; } .wc-no { color: #374151; font-size: 12px; } .wc-empty { padding: 32px; text-align: center; color: #4b5563; font-size: 13px; } .wc-footnote { font-size: 11px; color: #4b5563; margin-top: 10px; padding: 0 4px; } /* Odds tab */ .wc-odds-source { background: #111827; border: 1px solid #1f2937; border-radius: 8px; padding: 12px 16px; font-size: 12px; color: #9ca3af; margin-bottom: 16px; line-height: 1.6; } .wc-odds-source code { color: #34d399; } /* Starting 11 tab */ .wc-s11-wrap { display: flex; flex-direction: column; gap: 16px; } .wc-s11-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wc-s11-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .wc-s11-group { background: #0d1117; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; } .wc-s11-pos-hdr { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 12px; background: #111827; border-bottom: 1px solid #1f2937; } .wc-s11-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #0a0e14; cursor: pointer; transition: background 0.12s; font-size: 13px; } .wc-s11-row:hover { background: #111827; } .wc-s11-on { background: rgba(34,197,94,.07); } .wc-s11-on:hover { background: rgba(34,197,94,.12); } .wc-s11-name { flex: 1; color: #f9fafb; font-weight: 500; } .wc-s11-adp { font-size: 11px; color: #4b5563; min-width: 34px; text-align: right; } /* Pitch formation view */ .wc-pitch { background: linear-gradient(180deg, #155a2a 0%, #1a6b3a 50%, #155a2a 100%); border: 2px solid #2d7d47; border-radius: 10px; padding: 14px 12px 10px; margin-bottom: 16px; position: relative; overflow: hidden; } .wc-pitch::before { content: ''; position: absolute; left: 5%; right: 5%; top: 50%; height: 1px; background: rgba(255,255,255,0.1); } .wc-pitch-formation { text-align: center; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.55); margin-bottom: 10px; letter-spacing: 0.12em; } .wc-pitch-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .wc-pitch-player { background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.22); border-radius: 6px; padding: 4px 8px; cursor: pointer; text-align: center; min-width: 64px; transition: background 0.12s, border-color 0.12s; } .wc-pitch-player:hover { background: rgba(0,0,0,0.65); border-color: rgba(255,255,255,0.45); } .wc-pitch-name { font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; } .wc-pitch-pos { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 1px; } @media (max-width: 700px) { .wc-search { width: 140px; } .wc-td-player { max-width: 130px; } .wc-s11-grid { grid-template-columns: 1fr; } .wc-analytics-grid { grid-template-columns: 1fr; } } /* ── Analytics tab ──────────────────────────────────────────────────────────── */ .wc-analytics-wrap { padding: 16px; } .wc-analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .wc-chart-card { background: #0d1117; border: 1px solid #1f2937; border-radius: 8px; padding: 16px; } .wc-chart-title { color: #f9fafb; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } .wc-chart-canvas { position: relative; height: 300px; } /* ── Calcutta tab ───────────────────────────────────────────────────────────── */ .wc-calcutta-wrap { padding: 16px; } .wc-calcutta-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; background: #0d1117; border: 1px solid #1f2937; border-radius: 8px; padding: 14px 16px; } .wc-calcutta-pool-row { display: flex; align-items: center; gap: 10px; } .wc-calcutta-label { color: #9ca3af; font-size: 12px; font-weight: 600; white-space: nowrap; } .wc-calcutta-pool-input { background: #111827; border: 1px solid #374151; border-radius: 6px; color: #f9fafb; font-size: 14px; font-weight: 600; padding: 6px 10px; width: 120px; outline: none; } .wc-calcutta-pool-input:focus { border-color: #34d399; } .wc-calcutta-payout { display: flex; flex-wrap: wrap; gap: 6px; } .wc-cp-badge { background: #1f2937; border: 1px solid #374151; border-radius: 4px; color: #9ca3af; font-size: 10px; font-weight: 600; padding: 4px 8px 5px; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 2px; } .wc-cp-badge-val { color: #f9fafb; font-size: 11px; font-weight: 700; } .wc-bid-input { background: transparent; border: none; border-bottom: 1px solid #374151; color: #f9fafb; font-size: 12px; font-weight: 600; padding: 2px 4px; text-align: right; width: 72px; outline: none; } .wc-bid-input:focus { border-bottom-color: #34d399; } .wc-bid-input::placeholder { color: #4b5563; } .wc-bid-row { background: rgba(34,197,94,0.04) !important; } .wc-bid-row:hover { background: rgba(34,197,94,0.08) !important; } /* Sold (bid entered, not won by me) — dimmed */ .wc-row-sold { opacity: 0.55; } .wc-row-sold:hover { opacity: 0.75; } .wc-row-sold .wc-td-team { font-style: italic; } /* Won by me — gold highlight */ .wc-row-won { background: rgba(245,158,11,0.06) !important; } .wc-row-won:hover { background: rgba(245,158,11,0.11) !important; } .wc-row-won td:first-child { border-left: 3px solid #f59e0b; } /* "Mine?" toggle button */ .wc-won-btn { background: transparent; border: 1px solid #374151; border-radius: 4px; color: #4b5563; cursor: pointer; font-size: 10px; font-weight: 700; padding: 2px 7px; white-space: nowrap; transition: background 120ms, color 120ms, border-color 120ms; } .wc-won-btn:hover { border-color: #f59e0b; color: #f59e0b; } .wc-won-btn.active { background: rgba(245,158,11,0.15); border-color: #f59e0b; color: #f59e0b; } .wc-edge-pos { color: #22c55e !important; font-weight: 700; } .wc-edge-neg { color: #f87171 !important; font-weight: 700; } /* ── Portfolio Builder ──────────────────────────────────────────────────────── */ .wc-portfolio-section { padding: 0 0 16px; border-top: 1px solid #1f2937; margin-top: 4px; background: #0d1117; } .wc-portfolio-header { display: flex; align-items: center; gap: 20px; padding: 10px 16px; background: #111827; border-bottom: 1px solid #1f2937; margin-bottom: 14px; } .wc-portfolio-title { color: #f9fafb; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .wc-portfolio-budget-row { display: flex; align-items: center; gap: 8px; } .wc-pb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .wc-pb-card { background: #0d1117; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .wc-pb-card-hdr { padding: 11px 14px; background: #111827; display: flex; flex-direction: column; gap: 3px; } .wc-pb-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .wc-pb-desc { font-size: 10px; color: #6b7280; } .wc-pb-teams { padding: 10px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; max-height: 290px; overflow-y: auto; } .wc-pb-team-row { display: flex; align-items: center; gap: 6px; font-size: 12px; } .wc-pb-code { font-weight: 700; color: #f9fafb; width: 80px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; } .wc-pb-tag { font-size: 8px; font-weight: 700; text-transform: uppercase; padding: 1px 4px; border-radius: 3px; flex-shrink: 0; } .wc-pb-tag-elite { background: rgba(239,68,68,.2); color: #f87171; } .wc-pb-tag-anchor { background: rgba(245,158,11,.2); color: #fcd34d; } .wc-pb-tag-secondary { background: rgba(59,130,246,.2); color: #93c5fd; } .wc-pb-tag-flyer { background: rgba(34,197,94,.2); color: #86efac; } .wc-pb-tag-shark { background: rgba(139,92,246,.2); color: #c4b5fd; } .wc-pb-tag-locked { background: rgba(245,158,11,.2); color: #fbbf24; } .wc-pb-tag-target { background: rgba(139,92,246,.2); color: #c4b5fd; } .wc-pb-tag-value { background: rgba(59,130,246,.2); color: #93c5fd; } .wc-pb-tag-mid { background: rgba(245,158,11,.2); color: #fbbf24; } .wc-pb-tag-dark { background: rgba(167,139,250,.2); color: #c4b5fd; } .wc-pb-tag-lotto { background: rgba(107,114,128,.2); color: #9ca3af; } .wc-pb-note { font-size: 9px; color: #4b5563; font-style: italic; padding: 4px 14px 6px; border-top: 1px solid #1f2937; } .wc-pb-rec-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #34d399; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25); padding: 1px 5px; border-radius: 3px; } /* Budget note shown inside strategy card headers when committed spend > 0 */ .wc-pb-budget-note { font-size: 9px; color: #6b7280; font-weight: 500; margin-left: auto; } /* Budget bar inside My Portfolio card */ .wc-pb-budget-bar { display: flex; gap: 16px; font-size: 10px; color: #6b7280; padding: 6px 14px 4px; border-bottom: 1px solid #1f2937; } .wc-pb-budget-committed { color: #f59e0b; } .wc-pb-budget-remaining { color: #22c55e; } .wc-pb-budget-bar strong { font-weight: 700; } /* My Portfolio card — gold accent border, sits in header above strategy grid */ .wc-my-portfolio { border: 1px solid rgba(245,158,11,0.3) !important; margin: 0 16px 0; } .wc-pb-col { flex: 1; text-align: right; font-size: 11px; color: #f9fafb; } .wc-pb-col-hdr .wc-pb-col { color: #6b7280; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .wc-pb-totals { border-top: 1px solid #374151; margin-top: 4px; padding-top: 6px; } .wc-pb-totals .wc-pb-code { color: #6b7280; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .wc-pb-totals .wc-pb-col { font-weight: 700; } .wc-pb-rounds { display: flex; gap: 6px; padding: 8px 14px 6px; border-top: 1px solid #1f2937; flex-wrap: wrap; } .wc-pb-rnd-stat { display: flex; align-items: center; gap: 4px; font-size: 10px; background: #111827; border: 1px solid #1f2937; border-radius: 4px; padding: 3px 7px; } .wc-pb-rnd-label { color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; } .wc-pb-rnd-stat strong { color: #f9fafb; } .wc-pb-footer { padding: 10px 14px; background: #111827; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #1f2937; } .wc-pb-stat { display: flex; flex-direction: column; gap: 1px; } .wc-pb-stat-label { font-size: 9px; color: #4b5563; text-transform: uppercase; letter-spacing: 0.05em; } .wc-pb-stat-val { font-size: 13px; font-weight: 700; color: #f9fafb; } @media (max-width: 900px) { .wc-pb-grid { grid-template-columns: 1fr; } } /* ── My Entries (Exposure Analytics) ─────────────────────────────────────── */ .wc-exp-wrap { padding: 16px 0; } .wc-exp-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .wc-exp-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #1e3a5f; color: #93c5fd; border: 1px solid #2d5a8e; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase; transition: background 0.15s; } .wc-exp-upload-btn:hover { background: #2d5a8e; } .wc-exp-hint { font-size: 12px; color: #6b7280; } .wc-exp-empty { padding: 48px 0; text-align: center; color: #4b5563; font-size: 13px; } .wc-exp-summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .wc-exp-stat { background: #0d1117; border: 1px solid #1f2937; border-radius: 8px; padding: 10px 16px; min-width: 100px; } .wc-exp-stat-val { font-size: 20px; font-weight: 700; color: #f9fafb; line-height: 1.1; } .wc-exp-stat-label { font-size: 9px; color: #4b5563; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } .wc-exp-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; } .wc-exp-stack-badge { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.2); padding: 1px 5px; border-radius: 3px; } @media (max-width: 900px) { .wc-exp-grid { grid-template-columns: 1fr; } } /* ── Projection Set Selector ── */ /* Rendered in two different places: inline in a page's own (light) filter bar, and in the topbar's .nav-right-group on pages with no toolbar of their own. Base styling below targets the light filter-bar context; the override further down re-tunes it for the dark sidebar band. */ .set-selector-wrap { display: flex; align-items: center; gap: 8px; } .set-selector-label { font-size: 10.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .set-selector { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 400; padding: 6px 8px; cursor: pointer; outline: none; max-width: 200px; } .set-selector:hover { border-color: var(--accent); } .set-selector:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); } /* Dark sidebar variant -- .nav-right-group sits on the sidebar's dark green band, where the content-area tokens above read as a near-invisible pale box. */ .nav-right-group .set-selector-label { color: rgba(255,255,255,0.55); } .nav-right-group .set-selector { background: rgba(255,255,255,0.07); border: 1px solid rgba(201,184,140,0.35); color: #fff; } .nav-right-group .set-selector:hover { border-color: rgba(201,184,140,0.6); } .nav-right-group .set-selector:focus { border-color: #C9B88C; box-shadow: 0 0 0 2px rgba(201,184,140,0.25); } .set-selector option { color: #1B2B22; background: #fff; } /* Native