/* ============================================================ WWE GM Tool — Booking Screen Refinement booking_design.css v1.0 · 2026-04-27 Drop after app_design.css in . SCOPE: #view-draft and any shared component it uses. Follows the CSS-only handoff contract — no JS changes. All selectors are scoped to body.wwegm-app-v2. ============================================================ */ /* ─── REFINED TOKEN OVERRIDES (Booking-specific) ───────────── */ body.wwegm-app-v2 { --bk-face: #3d9e71; /* desaturated face green */ --bk-heel: #b83a3a; /* desaturated heel red */ --bk-face-s: rgba(61,158,113,0.07); --bk-heel-s: rgba(184,58,58,0.07); --bk-line-row: rgba(34,35,43,0.9); --bk-row-bg: #111114; } /* ============================================================ 1. BOOKING PAGE HEADER (#view-draft top section) ============================================================ */ /* Page title row */ body.wwegm-app-v2 #view-draft > .card-row h2 { font-size: 26px !important; letter-spacing: 0.05em !important; margin-bottom: 2px !important; } body.wwegm-app-v2 #view-draft > .card-row > div > div { font-size: 11px !important; color: var(--a-ink-4) !important; } /* Sync status pill — less visual weight */ body.wwegm-app-v2 #sync-status { font-family: var(--a-font-mono) !important; font-size: 10px !important; letter-spacing: 0.06em !important; padding: 3px 8px !important; border-radius: 2px !important; vertical-align: middle; } /* ─── Era / Story Card banner ─── */ body.wwegm-app-v2 #strat-locked-banner { padding: 10px 16px !important; border-radius: 2px !important; gap: 12px !important; margin-bottom: 16px !important; } /* Section header above banner — pull back visual weight */ body.wwegm-app-v2 #view-draft > div[style*="Story Card"] { margin-bottom: 0 !important; } body.wwegm-app-v2 #view-draft > div[style*="Story Card"] > div[style*="font-size:11px"] { font-size: 9px !important; letter-spacing: 0.2em !important; color: var(--a-ink-4) !important; margin-bottom: 6px !important; } body.wwegm-app-v2 #strat-locked-name { font-size: 13px !important; letter-spacing: 0.06em !important; } body.wwegm-app-v2 #strat-locked-tagline { font-size: 11px !important; margin-top: 1px !important; } /* ============================================================ 2. DRAFT DASHBOARD CARD The .card wrapping the stat grid in #view-draft ============================================================ */ body.wwegm-app-v2 #view-draft .card:first-of-type { padding: 16px 20px 14px !important; margin-bottom: 20px !important; } /* Stat label rows — reduce all-caps noise */ body.wwegm-app-v2 #view-draft .card div[style*="text-transform:uppercase"][style*="font-size:11px"] { font-size: 9px !important; letter-spacing: 0.2em !important; color: var(--a-ink-4) !important; margin-bottom: 3px !important; } /* Pick number — primary KPI: larger, gold */ body.wwegm-app-v2 #draft-pick-num { font-family: var(--a-font-display) !important; font-size: 28px !important; font-weight: 700 !important; color: var(--a-gold) !important; letter-spacing: 0 !important; } body.wwegm-app-v2 #view-draft .card div[style*="font-size:22px"][style*="accent2"] { font-size: 28px !important; } /* Remaining — primary KPI: larger */ body.wwegm-app-v2 #draft-remaining { font-family: var(--a-font-display) !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: 0 !important; } /* Picked count */ body.wwegm-app-v2 #draft-picked-count { font-family: var(--a-font-display) !important; font-size: 20px !important; font-weight: 600 !important; } body.wwegm-app-v2 #draft-picked-label { font-size: 11px !important; font-family: var(--a-font-mono) !important; letter-spacing: 0.04em !important; color: var(--a-ink-4) !important; } /* Spent — secondary */ body.wwegm-app-v2 #draft-spent { font-family: var(--a-font-display) !important; font-size: 18px !important; font-weight: 600 !important; color: var(--a-ink-2) !important; letter-spacing: 0 !important; } /* Avg/pick — tertiary */ body.wwegm-app-v2 #draft-avg { font-family: var(--a-font-display) !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0 !important; } /* Reserve input — cleaned up */ body.wwegm-app-v2 #draft-reserve-input { font-size: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; width: 100px !important; padding: 3px 4px !important; border: none !important; border-bottom: 1px solid transparent !important; background: transparent !important; color: var(--a-gold) !important; border-radius: 0 !important; transition: border-color 0.15s !important; } body.wwegm-app-v2 #draft-reserve-input:hover, body.wwegm-app-v2 #draft-reserve-input:focus { border-bottom-color: var(--a-gold) !important; background: transparent !important; box-shadow: none !important; outline: none !important; } body.wwegm-app-v2 #draft-reserve-hint { font-size: 9px !important; color: var(--a-ink-4) !important; letter-spacing: 0.04em !important; font-family: var(--a-font-mono) !important; margin-top: 2px !important; } /* ============================================================ 3. GROUP HEADINGS (ARC sections in #roster-list) JS renders:
============================================================ */ body.wwegm-app-v2 #roster-list div[style*="letter-spacing:1px;font-weight:700"] { /* Module-style header */ display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 14px !important; background: var(--a-panel-2) !important; border: 1px solid var(--a-line) !important; border-radius: 2px 2px 0 0 !important; margin-bottom: 0 !important; margin-top: 12px !important; font-family: var(--a-font-display) !important; font-size: 11px !important; letter-spacing: 0.26em !important; font-weight: 600 !important; color: var(--a-ink-2) !important; text-transform: uppercase !important; } /* Remove the existing bottom border + crimson rule — replaced by container border */ body.wwegm-app-v2 #roster-list div[style*="letter-spacing:1px;font-weight:700"]::before { display: none !important; } /* Rotate button inside group header */ body.wwegm-app-v2 #roster-list div[style*="letter-spacing:1px;font-weight:700"] button { margin-left: auto !important; font-family: var(--a-font-display) !important; font-size: 9px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; padding: 4px 10px !important; border: 1px solid var(--a-line-2) !important; border-radius: 2px !important; background: transparent !important; color: var(--a-ink-4) !important; cursor: pointer !important; transition: all 0.15s !important; } body.wwegm-app-v2 #roster-list div[style*="letter-spacing:1px;font-weight:700"] button:hover { color: var(--a-ink-2) !important; border-color: var(--a-ink-4) !important; } /* Progress pill / count text inside group header (e.g. "3 rivalries · 2 complete") */ body.wwegm-app-v2 #roster-list div[style*="letter-spacing:1px;font-weight:700"] span[style*="color:#8b95a7"], body.wwegm-app-v2 #roster-list div[style*="letter-spacing:1px;font-weight:700"] span[style*="color:var(--dim)"] { font-family: var(--a-font-mono) !important; font-size: 10px !important; letter-spacing: 0.05em !important; color: var(--a-ink-4) !important; font-weight: 400 !important; text-transform: none !important; margin-left: 4px !important; border: 1px solid var(--a-line) !important; padding: 2px 7px !important; border-radius: 2px !important; } /* ============================================================ 4. RIVALRY ROWS JS renders with border-left:3px solid + background colors. Make matchup the visual anchor; reduce metadata noise. ============================================================ */ /* All rivalry rows — unified base */ body.wwegm-app-v2 #roster-list div[style*="border-left:3px solid"] { padding: 11px 16px 9px !important; margin-bottom: 0 !important; border-top: none !important; border-right: 1px solid var(--a-line) !important; border-bottom: 1px solid var(--a-line) !important; border-radius: 0 !important; transition: background 0.12s !important; } body.wwegm-app-v2 #roster-list div[style*="border-left:3px solid"]:last-child { border-bottom: 1px solid var(--a-line) !important; border-radius: 0 0 2px 2px !important; } body.wwegm-app-v2 #roster-list div[style*="border-left:3px solid"]:hover { background: var(--a-panel-3) !important; } /* Complete rows (green tinted bg) */ body.wwegm-app-v2 #roster-list div[style*="background:#0f2b1a"], body.wwegm-app-v2 #roster-list div[style*="background: #0f2b1a"] { background: linear-gradient(90deg, var(--bk-face-s), transparent 50%) !important; border-left-color: rgba(61,158,113,0.4) !important; } body.wwegm-app-v2 #roster-list div[style*="background:#0f2b1a"]:hover, body.wwegm-app-v2 #roster-list div[style*="background: #0f2b1a"]:hover { background: linear-gradient(90deg, rgba(61,158,113,0.1), rgba(61,158,113,0.03) 50%) !important; } /* ─── TYPE LABEL LINE (top of each rivalry row) ───────────── "MEN I · $680K · 2/2 DRAFTED L1" Demote: smaller, more muted ─────────────────────────────────────────────────────────── */ body.wwegm-app-v2 #roster-list div[style*="letter-spacing:0.8px"] { font-size: 9px !important; letter-spacing: 0.16em !important; color: var(--a-ink-4) !important; font-weight: 400 !important; margin-bottom: 5px !important; font-family: var(--a-font-mono) !important; text-transform: uppercase !important; } /* Inline budget input within type label — match mono style */ body.wwegm-app-v2 #roster-list div[style*="letter-spacing:0.8px"] input { font-size: 9px !important; color: var(--a-ok) !important; letter-spacing: 0.04em !important; } /* ─── VS LINE — wrestler names (dominant element) ─────────── "JOHN CENA vs ROMAN REIGNS" ─────────────────────────────────────────────────────────── */ body.wwegm-app-v2 #roster-list div[style*="color:#e6e9f0;font-weight:700"] { font-family: var(--a-font-display) !important; font-size: 19px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; line-height: 1.15 !important; margin-bottom: 5px !important; } /* Face name — desaturated green */ body.wwegm-app-v2 #roster-list span[style*="color:#2ea043"] { color: var(--bk-face) !important; } /* Heel name — desaturated red */ body.wwegm-app-v2 #roster-list span[style*="color:#e11d48"]:not([style*="background"]):not([style*="border"]) { color: var(--bk-heel) !important; } /* "vs" separator between names */ body.wwegm-app-v2 #roster-list span[style*="color:#5a6270;font-weight:500"] { font-family: var(--a-font-display) !important; font-size: 10px !important; letter-spacing: 0.3em !important; color: var(--a-ink-4) !important; padding: 0 6px !important; text-transform: uppercase !important; font-weight: 500 !important; } /* ─── METADATA CHIPS (salary, slot ID, draft/lock counts) ───── Keep them, but firmly secondary: smaller, dimmer, no borders. ─────────────────────────────────────────────────────────── */ /* Salary chips "~$320K" */ body.wwegm-app-v2 #roster-list span[style*="~$"], body.wwegm-app-v2 #roster-list span[style*="~$320"], body.wwegm-app-v2 #roster-list span[style*="~$360"], body.wwegm-app-v2 #roster-list span[style*="~$280"], body.wwegm-app-v2 #roster-list span[style*="~$240"], body.wwegm-app-v2 #roster-list span[style*="~$210"], body.wwegm-app-v2 #roster-list span[style*="~$200"] { font-family: var(--a-font-mono) !important; font-size: 10px !important; color: var(--a-ink-3) !important; } /* Slot ID badge "L1" */ body.wwegm-app-v2 #roster-list span[style*="border:1px solid"][style*="padding:1px 5px"] { font-size: 9px !important; letter-spacing: 0.06em !important; padding: 1px 5px !important; color: var(--a-ink-4) !important; border-color: var(--a-line) !important; background: transparent !important; } /* ─── "OPEN →" BUTTON ─────────────────────────────────────── Clear but doesn't overpower wrestler names. ─────────────────────────────────────────────────────────── */ body.wwegm-app-v2 #roster-list button[onclick*="openRivalryModal"], body.wwegm-app-v2 #roster-list button[onclick*="openExtraPair"], body.wwegm-app-v2 #roster-list button[onclick*="openBackup"] { font-size: 10px !important; letter-spacing: 0.18em !important; padding: 7px 13px !important; border-color: rgba(200,16,46,0.35) !important; color: var(--a-crimson) !important; background: transparent !important; } body.wwegm-app-v2 #roster-list button[onclick*="openRivalryModal"]:hover, body.wwegm-app-v2 #roster-list button[onclick*="openExtraPair"]:hover, body.wwegm-app-v2 #roster-list button[onclick*="openBackup"]:hover { background: var(--a-crimson) !important; border-color: var(--a-crimson) !important; color: #fff !important; } /* ============================================================ 5. PLACEHOLDER / EMPTY RIVALRY ROWS Incomplete generated rows — clearly distinct from complete ============================================================ */ /* Unfilled slot cards with dashed or placeholder styling */ body.wwegm-app-v2 #roster-list .wwegm-placeholder, body.wwegm-app-v2 #roster-list div[style*="border:1px dashed"] { opacity: 0.65 !important; background: transparent !important; border: 1px solid var(--a-line) !important; border-left: 2px dashed var(--a-line-2) !important; border-radius: 0 !important; padding: 10px 16px !important; margin-bottom: 0 !important; transition: opacity 0.15s !important; } body.wwegm-app-v2 #roster-list .wwegm-placeholder:hover, body.wwegm-app-v2 #roster-list div[style*="border:1px dashed"]:hover { opacity: 1 !important; background: var(--a-panel-2) !important; } /* Placeholder slot label text */ body.wwegm-app-v2 #roster-list .wwegm-placeholder > div[style*="color:#8b95a7"], body.wwegm-app-v2 #roster-list .wwegm-placeholder > div[style*="color:var(--dim)"] { font-family: var(--a-font-mono) !important; font-size: 11px !important; letter-spacing: 0.04em !important; color: var(--a-ink-4) !important; } /* Fill CTA button inside placeholder */ body.wwegm-app-v2 #roster-list .wwegm-placeholder button[onclick*="openInlineFill"], body.wwegm-app-v2 #roster-list div[style*="border:1px dashed"] button[onclick*="openInlineFill"] { background: transparent !important; border: 1px dashed rgba(200,16,46,0.35) !important; color: var(--a-ink-4) !important; border-radius: 2px !important; font-family: var(--a-font-display) !important; font-size: 10px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; padding: 6px 12px !important; transition: all 0.15s !important; } body.wwegm-app-v2 #roster-list .wwegm-placeholder button[onclick*="openInlineFill"]:hover, body.wwegm-app-v2 #roster-list div[style*="border:1px dashed"] button[onclick*="openInlineFill"]:hover { border-style: solid !important; border-color: var(--a-crimson) !important; color: var(--a-crimson) !important; background: var(--a-crimson-soft) !important; } /* ============================================================ 6. LOCKED AREAS Disabled/upcoming arc sections ============================================================ */ body.wwegm-app-v2 #roster-list div[style*="opacity:0.4"], body.wwegm-app-v2 #roster-list div[style*="opacity: 0.4"], body.wwegm-app-v2 #roster-list div[style*="pointer-events:none"] { opacity: 0.38 !important; filter: none !important; } /* Locked label chip */ body.wwegm-app-v2 #roster-list span[style*="Locked"], body.wwegm-app-v2 #roster-list span[style*="locked"] { font-family: var(--a-font-mono) !important; font-size: 9px !important; letter-spacing: 0.1em !important; color: var(--a-purple) !important; border-color: rgba(167,139,250,0.3) !important; background: rgba(167,139,250,0.06) !important; border-radius: 2px !important; } /* ============================================================ 7. SPACING & BREATHING ROOM Add vertical rhythm between major sections ============================================================ */ /* Space between arc group (header + rows) and next section */ body.wwegm-app-v2 #roster-list > div[style*="margin-bottom:14px"], body.wwegm-app-v2 #roster-list > div[style*="margin-bottom:16px"] { margin-bottom: 12px !important; } /* Season control panel — less intrusive */ body.wwegm-app-v2 #roster-list div[style*="background:#0f1117"][style*="margin-bottom:14px"] { padding: 10px 14px !important; margin-bottom: 16px !important; border-left-width: 2px !important; } /* ─── Breakdown strip (class/role pills above roster) ─── */ body.wwegm-app-v2 #roster-breakdown-strip { margin-bottom: 8px !important; } body.wwegm-app-v2 #roster-breakdown-strip > span, body.wwegm-app-v2 #roster-breakdown-strip > div { font-size: 10px !important; letter-spacing: 0.08em !important; padding: 2px 7px !important; border-radius: 2px !important; } /* Roster Plan card heading */ body.wwegm-app-v2 #view-draft .card h3 { font-size: 11px !important; letter-spacing: 0.24em !important; color: var(--a-ink-3) !important; margin-bottom: 6px !important; } body.wwegm-app-v2 #roster-plan-counts { font-family: var(--a-font-mono) !important; font-size: 10px !important; color: var(--a-ink-4) !important; letter-spacing: 0.04em !important; } /* ============================================================ 8. DOWNSTREAM IMPACT PANEL (crimson warning) ============================================================ */ body.wwegm-app-v2 #roster-list div[style*="#2a1a1a"][style*="#e11d4855"][style*="border-left:3px solid #e11d48"] { margin-top: 24px !important; padding: 14px 18px !important; } body.wwegm-app-v2 #roster-list div[style*="#e11d4855"] > div[style*="color:#e11d48"][style*="text-transform:uppercase"]:first-child { font-size: 10px !important; letter-spacing: 0.24em !important; margin-bottom: 8px !important; } body.wwegm-app-v2 #roster-list div[style*="#e11d4855"] > div[style*="color:#c9d1d9"][style*="margin-bottom:8px"] { font-size: 11px !important; line-height: 1.5 !important; margin-bottom: 10px !important; padding-bottom: 10px !important; } /* ============================================================ 9. REORDER BUTTONS — compact, not distracting ============================================================ */ body.wwegm-app-v2 #roster-list button[title="Bump up"], body.wwegm-app-v2 #roster-list button[title="Bump down"] { width: 24px !important; height: 22px !important; font-size: 11px !important; padding: 0 !important; } /* ============================================================ 10. SLOT-RESERVE BADGE (purple, injected by JS) ============================================================ */ body.wwegm-app-v2 #draft-slot-reserve-wrap { margin-left: 10px !important; } body.wwegm-app-v2 #draft-slot-reserve-wrap span[style*="Reserve"], body.wwegm-app-v2 #draft-slot-reserve-wrap > span:first-child { font-size: 9px !important; letter-spacing: 0.18em !important; color: var(--a-purple) !important; } body.wwegm-app-v2 #draft-slot-reserve { font-family: var(--a-font-display) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #a78bfa !important; } /* ============================================================ END booking_design.css ============================================================ */