/* ==========================================================================
   Base Reset & Foundation Styles
   --------------------------------------------------------------------------
   Minimal reset with full viewport support for dashboard layout
   ========================================================================== */

/* Box sizing and text selection prevention for all elements */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    caret-color: transparent;
}

/* Reset margins and paddings */
html, body {
    margin: 0;
    padding: 0;
}

/* Full viewport foundation */
html {
    height: 100%;
    width: 100%;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body, 'Cormorant Garamond', Georgia, serif);
    color: var(--color-text-primary, #e8f0f2);
    line-height: 1.5;
    overflow-x: hidden;
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: inherit;
    font-size: inherit;
}

p {
    margin: 0;
}

/* List resets */
ul, ol {
    margin: 0;
    padding: 0;
}

/* Link resets */
a {
    color: inherit;
    text-decoration: none;
}

/* Button resets */
button {
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

/* Input resets */
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Table resets */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Image resets */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid rgba(0, 214, 137, 0.6);
    outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Allow text selection and cursor in input fields */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    caret-color: auto;
}

/* Hide text selection highlight globally */
::selection {
    background: transparent;
    color: inherit;
}

::-moz-selection {
    background: transparent;
    color: inherit;
}

/* Scrollbar styling for WebKit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 214, 137, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 214, 137, 0.5);
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 214, 137, 0.3) rgba(0, 0, 0, 0.2);
}

/**
 * Light Theme Variables
 * Color palette and design tokens for light mode
 */

[data-theme="light"] {
    /* ===== PRIMARY COLORS ===== */
    --color-primary: #1a472a;
    --color-primary-dark: #0f2919;
    --color-primary-light: #2d5f43;
    --color-accent: #d4af37;
    --color-accent-hover: #c29d2f;

    /* ===== BACKGROUND COLORS ===== */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-tertiary: #e8e8e8;
    --color-bg-elevated: #ffffff;
    --color-bg-overlay: rgba(255, 255, 255, 0.95);

    /* ===== TEXT COLORS ===== */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #6a6a6a;
    --color-text-muted: #8a8a8a;
    --color-text-inverse: #ffffff;

    /* ===== BORDER COLORS ===== */
    --color-border: #d0d0d0;
    --color-border-light: #e0e0e0;
    --color-border-dark: #a0a0a0;

    /* ===== STATUS COLORS ===== */
    --color-win: #22c55e;
    --color-win-bg: #f0fdf4;
    --color-loss: #ef4444;
    --color-loss-bg: #fef2f2;
    --color-push: #f59e0b;
    --color-push-bg: #fffbeb;
    --color-void: #6b7280;
    --color-void-bg: #f9fafb;
    --color-pending: #3b82f6;
    --color-pending-bg: #eff6ff;
    --color-live: #8b5cf6;
    --color-live-bg: #f5f3ff;

    /* ===== INTERACTIVE COLORS ===== */
    --color-hover: #f0f0f0;
    --color-active: #e0e0e0;
    --color-focus: #3b82f6;
    --color-focus-ring: rgba(59, 130, 246, 0.3);

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12);

    /* ===== GLASSMORPHISM (lighter for light mode) ===== */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* ===== LIGHT THEME SPECIFIC ADJUSTMENTS ===== */
[data-theme="light"] {
    /* Navigation */
    --nav-bg: var(--color-bg-elevated);
    --nav-border: var(--color-border);

    /* Cards */
    --card-bg: var(--color-bg-elevated);
    --card-border: var(--color-border-light);

    /* Table */
    --table-header-bg: var(--color-bg-tertiary);
    --table-row-hover: var(--color-hover);
    --table-row-even: var(--color-bg-secondary);

    /* KPI Tiles */
    --kpi-bg: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    --kpi-border: var(--color-border);

    /* Status badges get slightly darker backgrounds in light mode */
    --badge-win-bg: #dcfce7;
    --badge-loss-bg: #fee2e2;
    --badge-push-bg: #fef3c7;
    --badge-void-bg: #f3f4f6;
    --badge-pending-bg: #dbeafe;
    --badge-live-bg: #ede9fe;
}

/* ===== COMPONENT-SPECIFIC LIGHT THEME OVERRIDES ===== */

[data-theme="light"] .status-badge {
    border: 1px solid;
}

[data-theme="light"] .status-badge.win {
    border-color: var(--color-win);
}

[data-theme="light"] .status-badge.loss {
    border-color: var(--color-loss);
}

[data-theme="light"] .status-badge.push {
    border-color: var(--color-push);
}

[data-theme="light"] .kpi-tile {
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .picks-table tbody tr:hover {
    background: var(--color-hover);
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: var(--color-bg-primary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="light"] button:not(.status-badge) {
    border: 1px solid var(--color-border);
}

[data-theme="light"] button:not(.status-badge):hover {
    background: var(--color-hover);
    border-color: var(--color-border-dark);
}

/* Ensure text remains readable */
[data-theme="light"] .brand-line-1,
[data-theme="light"] .brand-line-2 {
    color: var(--color-primary);
}

[data-theme="light"] .kpi-label {
    color: var(--color-text-secondary);
}

[data-theme="light"] .kpi-value {
    color: var(--color-text-primary);
}
:root {
    /* ===== FONT SYSTEM - CONSISTENT CORMORANT GARAMOND ===== */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Cormorant Garamond', Georgia, serif;
    --font-accent: 'Cormorant Garamond', Georgia, serif;
    --font-mono: 'Cormorant Garamond', Georgia, serif;
    --font-ui: 'Cormorant Garamond', Georgia, serif;

    /* ===== SPORTSBOOK DROPDOWN TYPOGRAPHY ===== */
    --sportsbook-heading-font: var(--font-heading, 'Cormorant Garamond', 'Playfair Display', Georgia, serif);
    --sportsbook-body-font: 'Exo 2', 'Inter', sans-serif;
    --sportsbook-mono-font: 'Roboto Mono', 'SF Mono', monospace;
    --sportsbook-title-size: 0.65rem;       /* ~10.4px - sportsbook names */
    --sportsbook-label-size: 0.5625rem;     /* ~9px - labels, inputs, buttons */
    --sportsbook-caption-size: 0.5rem;      /* ~8px - sync time, fetch icons */
    --sportsbook-letter-wide: 0.05em;

    /* ===== LAYOUT TOKENS ===== */
    --layout-gutter: clamp(24px, 4vw, 60px);

    /* ===== TYPOGRAPHY SCALE - 13px Baseline for Better Readability ===== */
    --text-xs: 0.6875rem;   /* 11px - small labels */
    --text-sm: 0.75rem;     /* 12px - secondary text */
    --text-base: 0.8125rem; /* 13px - BASELINE - body text */
    --text-md: 0.875rem;    /* 14px - emphasis */
    --text-lg: 0.9375rem;   /* 15px - large body */
    --text-xl: 1.0625rem;   /* 17px - headings */

    /* ===== FONT WEIGHTS ===== */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ===== LINE HEIGHTS ===== */
    --leading-tight: 1.25;
    --leading-normal: 1.3;
    --leading-relaxed: 1.6;

    /* ===== LETTER SPACING ===== */
    --tracking-tight: 0.02em;
    --tracking-normal: 0.04em;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.2em;

    /* ===== PRIMARY COLOR SYSTEM - METALLIC FOREST & NAVY ===== */
    /* Forest Green Metallic (darker, less neon) - Theme from nav links */
    --color-primary: #008f58;          /* Dark forest green from nav links */
    --color-primary-bright: #00d689;   /* Bright emerald highlight */
    --color-primary-dark: #006b3f;     /* Darker shade */
    --color-primary-rgb: 0, 143, 88;
    --color-primary-bright-rgb: 0, 214, 137;  /* RGB version of --color-primary-bright for rgba() */

    /* Metallic Navy */
    --color-secondary: #1a237e; /* Deep Metallic Navy */
    --color-secondary-bright: #3949ab;
    --color-secondary-rgb: 26, 35, 126;

    /* Accents - Cool Metallic Cyan (Not Gold) */
    --color-accent: #00bcd4;
    --color-accent-bright: #80deea;
    --color-accent-rgb: 0, 188, 212;

    /* Semantics */
    --color-warning: #ff6f00; /* Amber */
    --color-warning-bright: #ffb300;
    --color-warning-rgb: 255, 111, 0;
    --color-loss: #c62828; /* Crimson */
    --color-loss-bright: #ef5350;
    --color-loss-rgb: 198, 40, 40;

    /* Backgrounds - Deep Navy Metallic */
    --color-bg-deep: #030b16; /* Almost black navy */
    --color-bg-base: #081121; /* Deep navy */
    --color-bg-navy: #0d1b33; /* Rich navy */
    --color-bg-navy-light: #162545;
    --color-bg-panel: rgba(8, 17, 33, 0.95);
    --color-bg-panel-light: rgba(22, 37, 69, 0.95);

    /* Text */
    --color-text-primary: #e8f0f2; /* Ice White */
    --color-text-secondary: #90a4ae; /* Metallic Blue-Grey */
    --color-text-muted: #546e7a;
    --color-text-dark: #263238;

    /* Status (canonical) */
    --status-confirmed: var(--color-primary);
    --status-active: var(--color-primary);
    --status-interactive: var(--color-secondary);
    --status-hover: var(--color-secondary);
    --status-warning: var(--color-warning);
    --status-at-risk: var(--color-warning);
    --status-pending: #888C95;
    --status-loss: #FF4F5E;
    --status-error: #FF4F5E;
    --status-win: #00FFAA;
    --status-in-progress: #FF6B35;
    --status-on-track: #00BFFF;

    /* ===== CONSOLIDATED ALIASES =====
       Use the canonical --color-* and --status-* variables above.
       These aliases exist only for backward compatibility with older CSS.
       New code should use: --color-primary, --color-bg-navy, --color-text-primary, etc.
    */

    /* Short aliases (commonly used) */
    --emerald: var(--color-primary);
    --navy: var(--color-bg-navy);
    --text: var(--color-text-primary);
    --muted: var(--color-text-muted);

    /* Glows & Shadows - Metallic Sheen */
    --glow-emerald-strong: 0 0 20px rgba(0, 143, 88, 0.5);
    --glow-emerald-medium: 0 0 12px rgba(0, 143, 88, 0.3);
    --glow-emerald-soft: 0 0 8px rgba(0, 143, 88, 0.2);
    --glow-emerald-subtle: 0 0 4px rgba(0, 143, 88, 0.1);
    
    /* Cool Cyan Glows */
    --glow-cyan-strong: 0 0 20px rgba(0, 188, 212, 0.5);
    --glow-cyan-medium: 0 0 12px rgba(0, 188, 212, 0.3);
    --glow-cyan-soft: 0 0 8px rgba(0, 188, 212, 0.2);
    --glow-cyan-subtle: 0 0 4px rgba(0, 188, 212, 0.1);
    
    --text-glow-emerald: 0 0 10px rgba(0, 214, 137, 0.4);
    --text-glow-cyan: 0 0 10px rgba(0, 229, 255, 0.4);
    --text-glow-amber: 0 0 10px rgba(255, 111, 0, 0.4);
    --text-shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.6);

    /* Dashboard.css compatibility */
    --emerald-glow: var(--glow-emerald-medium);
    --cyan-glow: var(--glow-cyan-medium);
    --inner-glow: inset 0 0 10px rgba(var(--color-primary-rgb), 0.2);

    /* Borders */
    --border-emerald: 1px solid rgba(var(--color-primary-rgb), 0.3);
    --border-cyan: 1px solid rgba(var(--color-accent-rgb), 0.3);
    --border-amber: 1px solid rgba(var(--color-warning-rgb), 0.3);
    --border-subtle: 1px solid rgba(255, 255, 255, 0.08);

    /* ===== VEGAS ELEGANT ZEBRA STRIPES - REFINED ===== */
    /* Enhanced contrast for better readability */
    --zebra-odd: rgba(8, 18, 32, 0.95);           /* Deep navy - higher opacity */
    --zebra-even: rgba(12, 26, 46, 0.98);         /* Lifted navy - better contrast */
    --zebra-border: rgba(0, 214, 137, 0.12);      /* Subtle emerald separator */
    --zebra-hover: rgba(0, 143, 88, 0.18);        /* Enhanced emerald hover */

    /* Parlay-specific zebra (distinct emerald tint) */
    --zebra-parlay-odd: rgba(6, 22, 18, 0.95);    /* Deep forest-navy blend */
    --zebra-parlay-even: rgba(10, 31, 27, 0.98);  /* Lifted forest-navy blend */
    --zebra-parlay-border: rgba(0, 143, 88, 0.25);
    
    /* Row heights - Consistent Fixed Height */
    --row-height: 52px;             /* Compact height matching parlay legs */
    --row-height-parlay-leg: 52px;  /* Compact for nested sub-legs */

    /* ===== Z-INDEX SCALE - REFINEMENT: Predictable stacking system ===== */
    --z-base: 10;
    --z-table: 100;
    --z-sticky-header: 500;
    --z-dropdown: 1000;
    --z-modal: 5000;
    --z-tooltip: 10000;

    /* Gradients */
    --emerald-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary-bright));
    --navy-gradient: linear-gradient(135deg, var(--color-bg-navy), var(--color-bg-navy-light));
    --metallic-reflect: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    --bg-metallic-navy: linear-gradient(140deg, rgba(7, 13, 24, 0.9), rgba(13, 22, 38, 0.88));

    /* ===== SPACING SCALE - 4px BASE ===== */
    /* Base units */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */

    /* Component-specific spacing */
    --gap-cell: var(--space-1);       /* 4px - within cells */
    --gap-component: var(--space-2);  /* 8px - between elements */
    --gap-section: var(--space-4);    /* 16px - between sections */
    --gap-topline: 10px;              /* Shared spacing for brand/KPI/toggles */
    --hero-safe-top: 370px; /* Keeps hero image visible - moved down 120px */

    /* Padding presets */
    --pad-cell: 2px 4px;        /* 2px 4px - table cells (reduced for tighter spacing) */
    --pad-compact: var(--space-2) var(--space-3);     /* 8px 12px - compact buttons */
    --pad-comfortable: var(--space-3) var(--space-4); /* 12px 16px - standard buttons */
    --pad-spacious: var(--space-4) var(--space-6);    /* 16px 24px - large sections */

    /* Legacy spacing (backward compatibility) */
    --spacing-page: 3vw;
    --spacing-page-px: 48px;
    --spacing-section: var(--space-4);
    --spacing-component: var(--space-3);
    --spacing-element: var(--space-3);
    --spacing-tight: var(--space-2);
    --spacing-minimal: var(--space-1);

    /* Component-specific typography tokens */
    /* These provide semantic sizing for specific UI elements */
    --text-kpi-heading: 0.75rem; --weight-kpi-heading: 500;
    --text-kpi-value: 0.875rem; --weight-kpi-value: 500;
    --text-kpi-subtext: 0.625rem; --weight-kpi-subtext: 400;
    --text-table-header: 0.625rem; --weight-table-header: 500;
    --text-table-body: 0.75rem; --weight-table-body: 400;
    --text-numeric: 0.75rem; --weight-numeric: 400;
    --text-filter: 0.6875rem; --weight-filter: 500;
    --text-caption: 0.625rem; --weight-caption: 400;
    --text-hero-title: 2.25rem; --weight-hero-title: 700;
    --text-hero-subtitle: 0.875rem; --weight-hero-subtitle: 400;

    /* ===== FILTER DROPDOWN TYPOGRAPHY - REFINED ELEGANCE ===== */
    /* Font families for premium readability */
    --filter-font-display: var(--font-heading);
    --filter-font-body: var(--font-body);
    --filter-font-ui: var(--font-ui);
    --filter-font-mono: var(--font-mono);

    /* Type scale for filter components */
    --filter-text-xs: 0.625rem;       /* 10px - micro labels */
    --filter-text-sm: 0.75rem;        /* 12px - body text, options */
    --filter-text-base: 0.8125rem;    /* 13px - emphasized text */
    --filter-text-md: 0.875rem;       /* 14px - titles */

    /* Weights for hierarchy */
    --filter-weight-light: 300;
    --filter-weight-regular: 400;
    --filter-weight-medium: 500;
    --filter-weight-semibold: 600;
    --filter-weight-bold: 700;

    /* Line heights for readability */
    --filter-leading-tight: 1.3;
    --filter-leading-normal: 1.5;
    --filter-leading-relaxed: 1.6;

    /* Letter spacing for elegance */
    --filter-tracking-tight: 0.01em;
    --filter-tracking-normal: 0.02em;
    --filter-tracking-wide: 0.05em;
    --filter-tracking-wider: 0.12em;

    /* ===== FILTER COMPONENT STYLES ===== */
    /* Filter panel backgrounds */
    --filter-panel-bg: rgba(8, 17, 33, 0.98);
    --filter-panel-border: rgba(0, 143, 88, 0.22);
    --filter-panel-shadow: 0 16px 48px rgba(0, 0, 0, 0.65),
        0 0 1px rgba(0, 143, 88, 0.3) inset;

    /* Filter card styles */
    --filter-card-bg: rgba(0, 0, 0, 0.35);
    --filter-card-border: rgba(255, 255, 255, 0.08);
    --filter-card-hover-bg: rgba(0, 143, 88, 0.12);

    /* Filter pills */
    --filter-pill-bg: rgba(255, 255, 255, 0.06);
    --filter-pill-border: rgba(255, 255, 255, 0.1);
    --filter-pill-hover-bg: rgba(0, 143, 88, 0.15);
    --filter-pill-active-bg: rgba(0, 143, 88, 0.22);
    --filter-pill-active-border: rgba(0, 214, 137, 0.6);

    /* Filter inputs */
    --filter-input-bg: rgba(0, 0, 0, 0.45);
    --filter-input-border: rgba(255, 255, 255, 0.12);
    --filter-input-focus-border: rgba(0, 214, 137, 0.6);
    --filter-input-focus-shadow: 0 0 0 3px rgba(0, 143, 88, 0.15);

    /* Filter text colors */
    --filter-text-primary: rgba(232, 240, 242, 0.95);
    --filter-text-secondary: rgba(144, 164, 174, 0.9);
    --filter-text-muted: rgba(144, 164, 174, 0.7);
    --filter-text-accent: rgba(0, 214, 137, 1);
    --filter-text-hint: rgba(140, 160, 175, 0.7);

    /* Transitions */
    --transition-smooth: all 0.25s ease-in-out;
    --transition-fast: all 0.2s ease-in-out;
    --transition-fast-duration: 0.2s ease-in-out;
    --transition-micro: all 0.15s ease-in-out;
    --transition-slide: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-metallic: all 0.45s ease-in-out;

    /* Effects */
    --blur-glass: blur(12px);
    --blur-glow: blur(20px);
    --blur-subtle: blur(8px);

    /* Sticky offsets */
    --sticky-offset: 200px;
    --kpi-bar-h: 76px; /* Updated for premium tile height */
    --sticky-total: calc(var(--sticky-offset) + var(--kpi-bar-h));
}

@media (max-width: 1200px) {
    :root {
        --kpi-bar-h: 72px;
        --sticky-total: calc(var(--sticky-offset) + var(--kpi-bar-h));
    }
}

@media (max-width: 992px) {
    :root {
        --hero-safe-top: 320px; /* +120px */
    }
}

@media (max-width: 768px) {
    :root {
        --gap-topline: 6px;
        --hero-safe-top: 260px; /* +120px */
        --kpi-bar-h: 66px;
        --sticky-total: calc(var(--sticky-offset) + var(--kpi-bar-h));
    }
}

@media (max-width: 480px) {
    :root {
        --hero-safe-top: 230px; /* +120px */
    }
}

/**
 * UI Animations & Transitions
 * Smooth animations, loading states, and micro-interactions
 */

/* ===== ROOT ANIMATION VARIABLES ===== */
:root {
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* ===== FADE ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ===== SLIDE ANIMATIONS ===== */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== SCALE ANIMATIONS ===== */
@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ===== LOADING ANIMATIONS ===== */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ===== NOTIFICATION ANIMATIONS ===== */
@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ===== UTILITY CLASSES ===== */
.animate-fade-in {
    animation: fadeIn var(--transition-normal) var(--ease-out);
}

.animate-fade-in-up {
    animation: fadeInUp var(--transition-normal) var(--ease-out);
}

.animate-fade-in-down {
    animation: fadeInDown var(--transition-normal) var(--ease-out);
}

.animate-scale-in {
    animation: scaleIn var(--transition-normal) var(--ease-out);
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-normal) var(--ease-out);
}

.animate-slide-in-left {
    animation: slideInLeft var(--transition-normal) var(--ease-out);
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ===== LOADING STATES ===== */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary) 0%,
        var(--color-bg-secondary) 50%,
        var(--color-bg-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 1em;
    margin: 0.5em 0;
}

.skeleton-heading {
    height: 2em;
    width: 60%;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* ===== ENHANCED TRANSITIONS ===== */
button,
.btn,
.kpi-tile,
.status-badge,
.picks-table tbody tr,
input,
select,
textarea {
    transition: all var(--transition-normal);
}

.kpi-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

button:active,
.btn:active {
    transform: scale(0.95);
}

.status-badge:hover {
    transform: scale(1.05);
}

/* ===== STAGGER ANIMATIONS ===== */
.stagger-animation > * {
    opacity: 0;
    animation: fadeInUp 0.4s var(--ease-out) forwards;
}

.stagger-animation > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-animation > *:nth-child(6) { animation-delay: 0.3s; }

/* ===== FOCUS STATES ===== */
*:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    transition: outline var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* ===== HOVER EFFECTS ===== */
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ===== PAGE TRANSITIONS ===== */
.page-transition-enter {
    animation: fadeInUp 0.5s var(--ease-out);
}

.page-transition-exit {
    animation: fadeOut 0.3s var(--ease-in);
}

/* ===== NOTIFICATION TOAST ===== */
.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    padding: 16px 20px;
    background: var(--color-bg-elevated);
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
    animation: slideInNotification 0.4s var(--ease-out);
}

.notification-toast.exit {
    animation: slideOutNotification 0.3s var(--ease-in);
}

/* ===== REDUCE MOTION FOR ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== THEME TOGGLE ANIMATION ===== */
.theme-toggle {
    position: relative;
    overflow: hidden;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-accent);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.theme-toggle:hover::before {
    width: 100%;
    height: 100%;
}

.theme-toggle .theme-icon {
    position: relative;
    z-index: 1;
    transition: transform 0.3s var(--ease-out);
}

.theme-toggle:hover .theme-icon {
    transform: rotate(180deg);
}

/* ===== RIPPLE EFFECT ===== */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.ripple-effect:active::after {
    animation: ripple 0.6s ease-out;
}
/* ==========================================================================
   Boxscores Component - UNIFIED STYLING (READABLE UPDATE)
   --------------------------------------------------------------------------
   Single source of truth for ALL box score displays across the dashboard.
   Applies to: main boxscore grids, parlay leg snippets, multi-game summaries
   
   UPDATED for improved readability:
   - Boxscore team logos: 18px
   - Score text: 13px
   - Header text: 11px
   - Team abbreviations: 12px
   - Game time status: 11px
   ========================================================================== */

/* ===== BOXSCORE GRID - FULL SCOREBOARD (Sportsbook Card Style) ===== */
.boxscore-grid {
    display: grid;
    /* Default layout for halves (NCAAB): Team | 1H | 2H | T */
    grid-template-columns: minmax(100px, 1fr) 42px 42px 48px;
    width: 100%;
    max-width: 240px;
    background: linear-gradient(
        180deg,
        rgba(8, 18, 32, 0.95) 0%,
        rgba(4, 12, 24, 0.98) 100%
    );
    border: 1px solid rgba(0, 214, 137, 0.18);
    border-radius: 8px;
    gap: 0;
    overflow: hidden;
    font-family: var(--font-body);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Quarters layout (NBA/NFL): Team | Q1 | Q2 | Q3 | Q4 | T */
.boxscore-grid.boxscore-quarters {
    grid-template-columns: minmax(90px, 1fr) 36px 36px 36px 36px 44px;
    max-width: 320px;
}

/* Rows use display: contents so cells participate in parent grid */
.boxscore-row {
    display: contents;
}

.boxscore-row.header {
    background: transparent;
}

/* ===== HEADER CELLS ===== */
.boxscore-cell.header-cell {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: rgba(0, 214, 137, 0.8); /* Emerald accent for headers */
    padding: 6px 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 214, 137, 0.08) 0%, rgba(0, 214, 137, 0.03) 100%);
    border-bottom: 1px solid rgba(0, 214, 137, 0.15);
    line-height: 1.2;
}

.boxscore-cell.header-cell:last-child {
    color: rgba(0, 214, 137, 0.95); /* Brighter emerald for total header */
    background: linear-gradient(180deg, rgba(0, 214, 137, 0.12) 0%, rgba(0, 214, 137, 0.05) 100%);
    font-weight: var(--weight-bold);
}

.boxscore-cell.header-cell.game-time-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 6px 8px;
    text-align: left;
}

/* ===== GAME TIME STATUS - CONSISTENT ACROSS ALL COMPONENTS ===== */
.game-time-status {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: rgba(160, 175, 190, 0.9); /* Subtle grey for pending/default */
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1.2;
}

.game-time-status.final {
    color: rgba(0, 214, 137, 0.95); /* Emerald for final */
    font-weight: var(--weight-bold);
    text-shadow: 0 0 6px rgba(0, 214, 137, 0.3);
}

.game-time-status.countdown {
    color: rgba(100, 180, 255, 0.95); /* Cool blue for pending */
    font-weight: var(--weight-semibold);
}

/* Live game time status */
.live-game .game-time-status,
tr[data-status="on-track"] .game-time-status,
tr[data-status="at-risk"] .game-time-status,
tr[data-status="live"] .game-time-status {
    color: rgba(100, 180, 255, 0.95); /* Light blue for live games */
}

/* ===== LIVE INDICATOR - UNIVERSAL ===== */
.live-indicator {
    font-family: var(--font-body);
    color: #ff5252;
    font-weight: var(--weight-bold);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    background: rgba(255, 82, 82, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(255, 82, 82, 0.3);
    text-shadow: 0 0 6px rgba(255, 82, 82, 0.5);
    white-space: nowrap;
    line-height: 1.1;
}

/* Cable-style blink only for the primary boxscore header cell */
.boxscore-grid .boxscore-cell.header-cell.game-time-cell .live-indicator {
    animation: cable-live-blink 1.6s steps(2, jump-none) infinite;
}

@keyframes cable-live-blink {
    0%,
    60% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(255, 0, 0, 0.9);
    }
    61%,
    100% {
        opacity: 0.25;
        text-shadow: 0 0 2px rgba(255, 0, 0, 0.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .boxscore-grid .boxscore-cell.header-cell.game-time-cell .live-indicator {
        animation: none;
    }
}

/* ===== SCORE CELLS ===== */
.boxscore-cell {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-medium);
    padding: 8px 4px;
    color: rgba(200, 215, 225, 0.95); /* Soft white for scores */
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: background 0.15s ease;
}

.boxscore-cell:last-child {
    border-right: none;
}

.boxscore-cell.total {
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: rgba(255, 255, 255, 0.98); /* Bright white for totals */
    background: linear-gradient(180deg, rgba(0, 214, 137, 0.1) 0%, rgba(0, 214, 137, 0.04) 100%);
    border-left: 1px solid rgba(0, 214, 137, 0.18);
}

/* ===== TEAM CELLS ===== */
.boxscore-cell.team-cell {
    text-align: left;
    padding: 8px 8px;
    border-right: 1px solid rgba(0, 214, 137, 0.1);
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.15);
}

.boxscore-team {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
}

/* ===== TEAM LOGOS - LARGER 20px FOR READABLE BOXSCORES ===== */
.boxscore-team-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    image-rendering: auto;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s ease, filter 0.2s ease;
    flex-shrink: 0;
}

.boxscore-team-logo:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 214, 137, 0.3));
}

/* ===== TEAM ABBREVIATIONS - READABLE SIZING ===== */
.boxscore-team-abbr {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-bold);
    color: rgba(230, 240, 250, 0.98);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ===== TEAM RECORDS - READABLE SIZING ===== */
.boxscore-team-record {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--weight-medium);
    color: rgba(0, 214, 137, 0.6); /* Subtle emerald for records */
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ===== WIN/LOSS ROW STATES ===== */
.boxscore-row.winning .boxscore-cell {
    background: linear-gradient(90deg, rgba(0, 214, 137, 0.08) 0%, rgba(0, 214, 137, 0.03) 100%);
}

.boxscore-row.winning .boxscore-cell.team-cell {
    background: linear-gradient(90deg, rgba(0, 214, 137, 0.12) 0%, rgba(0, 214, 137, 0.05) 100%);
    border-left: 2px solid rgba(0, 214, 137, 0.5);
}

.boxscore-row.winning .boxscore-cell.total {
    color: rgba(0, 214, 137, 0.95); /* Emerald for winning total */
    font-weight: var(--weight-bold);
    background: linear-gradient(180deg, rgba(0, 214, 137, 0.15) 0%, rgba(0, 214, 137, 0.08) 100%);
    text-shadow: 0 0 8px rgba(0, 214, 137, 0.3);
}

.boxscore-row.winning .boxscore-team-abbr {
    color: rgba(0, 214, 137, 0.95);
    font-weight: var(--weight-bold);
}

.boxscore-row.winning .boxscore-team-logo {
    opacity: 1;
    filter: drop-shadow(0 1px 4px rgba(0, 214, 137, 0.35));
}

.boxscore-row.losing .boxscore-cell {
    opacity: 0.65;
    background: rgba(0, 0, 0, 0.1);
}

.boxscore-row.losing .boxscore-cell.team-cell {
    border-left: 2px solid transparent;
}

.boxscore-row.losing .boxscore-cell.total {
    color: rgba(180, 190, 200, 0.7);
}

.boxscore-row.losing .boxscore-team-abbr {
    opacity: 0.7;
    color: rgba(180, 190, 200, 0.8);
}

.boxscore-row.losing .boxscore-team-logo {
    opacity: 0.6;
    filter: grayscale(30%);
}

.boxscore-row:last-child .boxscore-cell {
    border-bottom: none;
}

.boxscore-row.header .boxscore-cell {
    border-bottom: none;
}

/* ===== SMALL TEAM LOGOS - FOR PARLAY SNIPPETS & COMPACT DISPLAYS ===== */
.team-logo-small,
.score-display .team-logo-small,
.multi-game-summary .team-logo-small,
.leg-snippet .team-logo-small {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

/* ===== SCORE DISPLAY - USED IN PARLAY LEG SNIPPETS ===== */
.score-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1.2;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    color: rgba(200, 215, 225, 0.95);
    font-variant-numeric: tabular-nums;
    padding: 1px 0;
}

/* ===== TIME REMAINING - CONSISTENT IN ALL BOXSCORE CONTEXTS ===== */
.time-remaining {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: var(--weight-medium);
    color: rgba(140, 160, 180, 0.8);
    white-space: nowrap;
    line-height: 1.2;
}

/* ===== PARLAY LEG BOXSCORES - CONSISTENT WITH MAIN BOXSCORES ===== */
/* Ensure box scores in parlay legs match the same typography and colors */
.compact-leg-table .boxscore-grid {
    max-width: 280px;
    border-radius: 6px;
}

.compact-leg-table .game-time-status {
    color: rgba(140, 160, 180, 0.8);
}

.compact-leg-table .game-time-status.final {
    color: rgba(0, 214, 137, 0.9);
}

.compact-leg-table .game-time-status.countdown {
    color: rgba(100, 180, 255, 0.85);
}

/* Live game time status in parlay legs */
.compact-leg-table .live-game .game-time-status,
.compact-leg-table tr[data-status="on-track"] .game-time-status,
.compact-leg-table tr[data-status="at-risk"] .game-time-status,
.compact-leg-table tr[data-status="live"] .game-time-status {
    color: rgba(100, 180, 255, 0.95);
}

.compact-leg-table .boxscore-cell {
    color: rgba(200, 215, 225, 0.9);
}

.compact-leg-table .boxscore-cell.total {
    color: rgba(255, 255, 255, 0.95);
}

.compact-leg-table .boxscore-team-abbr {
    color: rgba(200, 215, 225, 0.95);
}

.compact-leg-table .boxscore-team-record {
    color: rgba(0, 214, 137, 0.45);
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 768px) {
    /* Halves layout (NCAAB) - 4 columns */
    .boxscore-grid {
        grid-template-columns: minmax(85px, 1fr) 38px 38px 42px;
        max-width: 100%;
    }
    
    /* Quarters layout (NBA/NFL) - 6 columns */
    .boxscore-grid.boxscore-quarters {
        grid-template-columns: minmax(80px, 1fr) repeat(4, 30px) 38px;
    }

    .boxscore-cell,
    .boxscore-cell.header-cell {
        padding: 1px 2px;
    }

    .boxscore-cell {
        font-size: 9px;
        min-height: 14px;
    }

    .boxscore-cell.total {
        font-size: 9px;
    }

    .boxscore-team-logo {
        width: 12px;
        height: 12px;
    }

    .boxscore-team-abbr {
        font-size: 9px;
    }

    .team-logo-small {
        width: 12px;
        height: 12px;
    }
}
/* ==========================================================================
   Brand Header - Bold Professional Design
   Green Bier Sport Ventures Dashboard
   ========================================================================== */

.brand-header-inline {
    display: flex;
    align-items: flex-end; /* Align to bottom edge to match KPI tiles and date toggles */
    gap: 8px;
    flex: 0 0 auto;
    min-width: 220px;
    position: relative;
    z-index: 200;
    height: var(--dashboard-topline-height, 76px);
    margin-right: 0;
    padding: 0 8px;
}

/* Bear Shield Logo - Sharp edges with subtle glow, matches KPI tile height */
.brand-logo-inline {
    display: block;
    height: var(--dashboard-topline-height, 76px); /* Match KPI tile height exactly */
    width: auto;
    min-width: var(--dashboard-topline-height, 76px);
    object-fit: contain;
    /* Subtle definition without pixelation */
    filter: 
        contrast(1.05) 
        brightness(1.02)
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 8px rgba(0, 143, 88, 0.4))
        drop-shadow(0 0 12px rgba(var(--color-primary-bright-rgb), 0.3));
    flex-shrink: 0;
    /* Subtle static glow pulse (no movement) */
    animation: logo-static-glow 4s ease-in-out infinite;
}

@keyframes logo-static-glow {
    0%, 100% {
        filter: 
            contrast(1.05) 
            brightness(1.02)
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 8px rgba(0, 143, 88, 0.4))
            drop-shadow(0 0 12px rgba(var(--color-primary-bright-rgb), 0.3));
    }
    50% {
        filter: 
            contrast(1.08) 
            brightness(1.04)
            drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85))
            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65))
            drop-shadow(0 0 10px rgba(0, 143, 88, 0.5))
            drop-shadow(0 0 14px rgba(var(--color-primary-bright-rgb), 0.4));
    }
}

/* Brand Content Container - Fill entire height to align with logo and tiles */
.brand-content-inline {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to bottom edge */
    align-items: flex-start;
    height: 100%;
    flex: 1;
    min-height: var(--dashboard-topline-height, 76px); /* Ensure it fills the full height */
}

/* Brand text fills container - sleek elegant stack with tight spacing */
/* GREEN BIER on top, SPORT VENTURES below - aligned to top and bottom edges */
.brand-text-stacked {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push GREEN BIER to top, SPORT VENTURES to bottom */
    gap: 0; /* No gap - space-between handles spacing */
    align-items: flex-start;
    min-width: clamp(200px, 12vw, 320px);
    width: 100%; /* Allow full width so SPORT VENTURES can extend */
    height: 100%; /* Fill full height to align with container */
    padding: 0;
}

/* Primary Brand Name - Blockier Geometric Typography */
/* LINE 1: GREEN BIER - Stacked on top of SPORT VENTURES */
.brand-line-1 {
    font-family: 'Cormorant Garamond', Georgia, serif; /* Maintain Garamond font */
    font-weight: 900; /* Bold for emphasis */
    font-size: calc(var(--dashboard-topline-height, 76px) * 0.62); /* Larger to fill more vertical space */
    letter-spacing: 0.02em; /* Closer letter spacing */
    text-transform: uppercase;
    text-align: left;
    margin: 0;
    padding: 0;
    display: block;
    order: 1; /* Explicitly ensure GREEN BIER is first (on top) */
    width: fit-content; /* Only take up needed width so SPORT VENTURES can extend past */
    max-width: 100%;
    /* Metallic Emerald Gradient with moving shimmer highlight */
    background: 
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 25%,
            rgba(200, 255, 230, 0.5) 35%,
            rgba(240, 255, 250, 0.7) 40%,
            rgba(200, 255, 230, 0.5) 45%,
            transparent 55%,
            transparent 100%
        ),
        linear-gradient(
            135deg, 
            #007a4d 0%, 
            #00b06c 20%,
            #00d689 35%,
            #007a4d 50%, 
            #00b06c 65%,
            #008f58 80%,
            #005a38 100%
        );
    background-size: 400% 100%, 100% 100%;
    background-position: -200% 0, 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Enhanced shadows for better readability - stronger presence */
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85))
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 16px rgba(0, 143, 88, 0.5))
            drop-shadow(0 0 24px rgba(var(--color-primary-bright-rgb), 0.35));
    line-height: 1;
    /* Slow moving metallic shimmer */
    animation: text-metallic-shimmer 18s linear infinite;
}

@keyframes text-metallic-shimmer {
    0% {
        background-position: -200% 0, 0 0;
    }
    100% {
        background-position: 200% 0, 0 0;
    }
}

/* Secondary Brand Text - Refined Subtitle */
/* LINE 2: SPORT VENTURES - Stacked below GREEN BIER, extends past GREEN BIER */
.brand-line-2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500; /* Reduced from 600 to make GREEN BIER more dominant */
    font-size: calc(var(--dashboard-topline-height, 76px) * 0.40); /* Increased to reduce gap with GREEN BIER */
    letter-spacing: 0.35em; /* Increased spacing to extend past GREEN BIER */
    text-transform: uppercase;
    text-align: left;
    order: 2; /* Explicitly ensure SPORT VENTURES is second (below GREEN BIER) */
    width: 100%; /* Take full width to extend past GREEN BIER */
    min-width: 100%; /* Ensure it extends */
    align-self: stretch; /* Stretch to full width of container */
    /* Metallic silver-blue gradient with moving shimmer */
    background: 
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 25%,
            rgba(230, 245, 255, 0.6) 35%,
            rgba(255, 255, 255, 0.8) 40%,
            rgba(230, 245, 255, 0.6) 45%,
            transparent 55%,
            transparent 100%
        ),
        linear-gradient(
            135deg,
            rgba(190, 205, 215, 0.95) 0%,
            rgba(210, 225, 240, 0.95) 30%,
            rgba(220, 235, 250, 1) 50%,
            rgba(210, 225, 240, 0.95) 70%,
            rgba(190, 205, 215, 0.95) 100%
        );
    background-size: 400% 100%, 100% 100%;
    background-position: -200% 0, 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Enhanced text shadows for better readability - stronger presence */
    filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.85))
            drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 16px rgba(0, 188, 212, 0.3))
            drop-shadow(0 0 24px rgba(var(--color-primary-bright-rgb), 0.25));
    line-height: 1;
    display: inline-flex;
    align-items: flex-end;
    column-gap: clamp(0.35em, 0.45em, 0.55em);
    margin: 0; /* No margin needed - parent handles bottom alignment */
    padding: 0;
    white-space: nowrap;
    /* Slow moving metallic shimmer - synchronized with line 1 */
    animation: text-metallic-shimmer 18s linear infinite;
    animation-delay: 0.5s; /* Slight offset for visual interest */
}

.brand-line-2 .brand-word {
    letter-spacing: inherit;
    display: inline-flex;
}

/* Alternative color variants */
.brand-line-2.brand-green {
    background: 
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 25%,
            rgba(180, 255, 220, 0.5) 35%,
            rgba(220, 255, 240, 0.7) 40%,
            rgba(180, 255, 220, 0.5) 45%,
            transparent 55%,
            transparent 100%
        ),
        linear-gradient(
            135deg,
            rgba(0, 143, 88, 0.9) 0%,
            rgba(var(--color-primary-bright-rgb), 0.9) 50%,
            rgba(0, 143, 88, 0.9) 100%
        );
    background-size: 400% 100%, 100% 100%;
    background-position: -200% 0, 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: text-metallic-shimmer 18s linear infinite;
    animation-delay: 0.5s;
}

.brand-line-2.brand-dark {
    background: 
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 25%,
            rgba(200, 210, 220, 0.5) 35%,
            rgba(220, 230, 240, 0.7) 40%,
            rgba(200, 210, 220, 0.5) 45%,
            transparent 55%,
            transparent 100%
        ),
        linear-gradient(
            135deg,
            rgba(200, 210, 220, 0.7) 0%,
            rgba(180, 190, 200, 0.7) 50%,
            rgba(200, 210, 220, 0.7) 100%
        );
    background-size: 400% 100%, 100% 100%;
    background-position: -200% 0, 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: text-metallic-shimmer 18s linear infinite;
    animation-delay: 0.5s;
}

/* ===== Responsive adjustments ===== */
@media (max-width: 1400px) {
    .brand-header-inline {
        min-width: 240px;
    }
}

@media (max-width: 1200px) {
    .brand-header-inline {
        min-width: 220px;
    }
    
    .brand-line-1 {
        font-size: calc(var(--dashboard-topline-height, 76px) * 0.58);
        letter-spacing: 0.02em; /* Maintain blocky spacing */
    }
    
    .brand-line-2 {
        font-size: calc(var(--dashboard-topline-height, 76px) * 0.26);
        letter-spacing: 0.40em; /* Extended spacing to go past GREEN BIER */
        column-gap: 0.40em;
    }
}

@media (max-width: 992px) {
    .brand-header-inline {
        min-width: 200px;
        --brand-line1-scale: 0.35;
        --brand-line2-scale: 0.18;
    }
    
    .brand-line-1 {
        font-size: calc(var(--dashboard-topline-height, 76px) * 0.52);
        letter-spacing: 0.02em; /* Maintain blocky spacing */
    }
    
    .brand-line-2 {
        font-size: calc(var(--dashboard-topline-height, 76px) * 0.22);
        letter-spacing: 0.35em; /* Extended spacing to go past GREEN BIER */
        column-gap: 0.35em;
    }
}

@media (max-width: 768px) {
    .brand-header-inline {
        min-width: 180px;
        --brand-line1-scale: 0.34;
        --brand-line2-scale: 0.16;
    }
    
    .brand-line-1 {
        font-size: calc(var(--dashboard-topline-height, 76px) * 0.50);
        letter-spacing: 0.02em; /* Maintain blocky spacing */
    }
    
    .brand-line-2 {
        font-size: calc(var(--dashboard-topline-height, 76px) * 0.20);
        letter-spacing: 0.30em; /* Extended spacing to go past GREEN BIER */
        column-gap: 0.30em;
    }
}
/* =========================================================
   DATE TOGGLES COMPONENT - ULTRA-MINIMAL FLOATING DESIGN
   Sleek horizontal date range selector with floating effect
   ========================================================= */

/* Date Toggles Container - Row layout with refresh to the right */
.date-toggles-container {
    display: flex;
    flex-direction: row;          /* Horizontal layout: date pills + refresh */
    justify-content: flex-start;
    align-items: flex-end;        /* Align bottom edges with KPI tiles */
    gap: 12px;                    /* Space between date toggles and refresh */
    position: relative;
    z-index: 200;
    height: var(--dashboard-topline-height, 76px);
    margin: 0;
    padding-left: 0;
    padding-bottom: 2px;          /* Fine-tune bottom alignment */
}

/* Actions container - Clear button + Last refreshed stacked vertically */
.date-toggles-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px;
    margin-left: 8px;
    padding-bottom: 1px;
}

/* Last Refresh indicator - Low profile, below clear button */
.date-toggles-refresh {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.55rem;
    opacity: 0.6;
}

.date-toggles-refresh .refresh-label {
    color: rgba(200, 215, 225, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.date-toggles-refresh .refresh-time {
    color: rgba(0, 214, 137, 0.85);
    font-weight: 600;
}

/* Date Range Label - Ultra-minimal elegant */
.date-toggle-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 0.5rem;
    color: rgba(0, 255, 170, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 0;
    margin-left: 4px;
    text-rendering: optimizeLegibility;
    text-shadow: 0 0 6px rgba(0, 214, 137, 0.25), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Date Toggles Group - individual floating chips (no outer pill/bin) */
.date-toggles {
    display: flex;
    flex-direction: row;
    gap: 4px;                     /* Ultra-tight spacing between date toggle buttons */
    background: transparent;      /* No outer bin */
    border: none;
    border-radius: 0;
    padding: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; /* For popup positioning */
    box-shadow: none;             /* Let the chips themselves glow, not a container */
}

/* Clear button for time filters */
.date-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 170, 0.25);
    background: rgba(7, 13, 21, 0.4);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 0.45rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240, 255, 255, 0.8);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
}

.date-clear-btn:hover {
    border-color: rgba(0, 255, 170, 0.6);
    background: rgba(0, 214, 137, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 0 16px rgba(0, 255, 170, 0.2);
}

.date-clear-btn:active {
    transform: translateY(0);
}

.date-clear-btn:focus {
    outline: none;
}

.date-clear-btn:focus-visible {
    outline: 1px solid rgba(0, 214, 137, 0.7);
    outline-offset: 2px;
}

/* No special hover treatment on the whole group – only the individual chips respond */
.date-toggles:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
}

/* Date Toggle Buttons - High contrast readable design */
.date-toggle-btn {
    /* Typography */
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(230, 242, 246, 0.85);
    text-rendering: optimizeLegibility;
    line-height: 1;
    opacity: 1;

    /* Visual styling - high contrast and readable */
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(0, 214, 137, 0.35);
    padding: 5px 10px;
    border-radius: 4px;

    /* Behavior */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-align: center;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
}

.date-toggle-btn:hover {
    color: rgba(0, 255, 170, 1); /* Brighter emerald */
    text-shadow: 0 0 16px rgba(0, 255, 170, 0.6); /* Enhanced glow */
    background: rgba(0, 214, 137, 0.12);
    transform: scale(1.02); /* Subtle scale instead of translateY */
}

.date-toggle-btn:active {
    transform: scale(0.98);
}

.date-toggle-btn.active {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.25) 0%, rgba(0, 180, 120, 0.2) 100%);
    color: #00ffaa; /* Bright emerald */
    font-weight: 700;
    border-color: rgba(0, 255, 170, 0.5);
    box-shadow:
        inset 0 1px 3px rgba(0, 255, 170, 0.2),
        0 0 0 1px rgba(0, 255, 170, 0.3),
        0 2px 8px rgba(0, 214, 137, 0.2);
    text-shadow: 0 0 10px rgba(0, 255, 170, 0.5);
}

/* Focus state for accessibility - minimal */
.date-toggle-btn:focus {
    outline: none;
}

.date-toggle-btn:focus-visible {
    outline: 1px solid rgba(0, 214, 137, 0.5);
    outline-offset: 2px;
}

/* Custom Date Range - Ultra-floating minimal popup */
.custom-date-range {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px; /* Tighter margin */
    /* Metallic Emerald Elite card treatment */
    background: var(--bg-metallic-navy, linear-gradient(140deg, rgba(3, 16, 12, 0.96), rgba(8, 30, 22, 0.94)));
    border-radius: 14px; /* Sleeker radius */
    padding: 10px 10px 9px;
    border: var(--border-emerald, 1px solid rgba(0, 214, 137, 0.25));
    -webkit-backdrop-filter: var(--blur-glass, blur(20px));
    backdrop-filter: var(--blur-glass, blur(20px));
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.7),
        var(--glow-emerald-subtle, 0 0 8px rgba(0, 214, 137, 0.25));
    z-index: 1000;
    min-width: 220px; /* Slightly wider for card feel */
    overflow: hidden;
}

.custom-date-range::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--metallic-reflect, linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.09) 50%, transparent 70%));
    opacity: 0.35;
    mix-blend-mode: screen;
    transform: translateY(-8%);
}

/* Custom date range header / target toggle */
.custom-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(0, 188, 212, 0.12);
}

.date-target-toggle {
    display: inline-flex;
    gap: 1px;
    padding: 1px;
    border-radius: 999px;
    background: rgba(3, 16, 12, 0.9);
    border: 1px solid rgba(0, 188, 212, 0.15);
}

.date-target-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 1px 4px;
    border-radius: 999px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: var(--transition-fast, all 0.2s ease-in-out);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
}

.date-target-btn .date-target-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.38rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    line-height: 1;
    color: rgba(0, 188, 212, 0.7); /* Blue from header-subtext, reduced opacity for inactive */
    display: block;
    font-style: italic;
}

.date-target-btn .date-target-value {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.45rem;
    font-weight: 500;
    line-height: 1.1;
    color: rgba(0, 188, 212, 0.75); /* Blue from header-subtext, reduced opacity for inactive */
    display: block;
    white-space: nowrap;
    font-style: italic;
}

.date-target-btn:not(.active) .date-target-value.is-placeholder {
    opacity: 0.4;
    color: rgba(0, 188, 212, 0.4);
}

.date-target-btn:not(.active) .date-target-value:not(.is-placeholder) {
    color: rgba(0, 188, 212, 0.7);
}

.date-target-btn:hover {
    background: rgba(0, 188, 212, 0.06);
}

.date-target-btn:hover .date-target-label {
    color: rgba(0, 188, 212, 0.9);
}

.date-target-btn:hover .date-target-value {
    color: rgba(0, 188, 212, 0.85);
}

.date-target-btn.active {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.36), rgba(18, 194, 255, 0.18));
    box-shadow: var(--inner-glow, inset 0 0 10px rgba(0, 214, 137, 0.35));
}

.date-target-btn.active .date-target-label {
    color: rgba(5, 12, 10, 1);
    font-weight: 600;
    opacity: 1;
}

.date-target-btn.active .date-target-value {
    color: rgba(5, 12, 10, 1);
    font-weight: 600;
    opacity: 1;
}

.date-target-btn.active .date-target-value.is-placeholder {
    color: rgba(5, 12, 10, 0.5);
    opacity: 0.6;
}

.date-target-btn:focus {
    outline: none;
}

.date-target-btn:focus-visible {
    outline: 1px solid rgba(0, 214, 137, 0.8);
    outline-offset: 2px;
}

/* Metallic Emerald calendar */
.custom-calendar {
    margin-top: 4px;
    padding: 6px 6px 4px;
    border-radius: 10px;
    background: radial-gradient(circle at 0% 0%, rgba(0, 214, 137, 0.3), transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(18, 194, 255, 0.22), transparent 55%),
                rgba(2, 12, 10, 0.94);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 12px rgba(0, 0, 0, 0.65);
}

.custom-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    color: var(--color-text-primary, #E8F0F2);
}

.calendar-month-label {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.9;
}

.calendar-nav {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid rgba(0, 214, 137, 0.4);
    background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.15), transparent 65%),
                rgba(0, 0, 0, 0.6);
    color: rgba(232, 240, 242, 0.9);
    font-size: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-micro, all 0.15s ease-in-out);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
}

.calendar-nav:hover {
    border-color: rgba(0, 214, 137, 0.8);
    box-shadow: 0 0 6px rgba(0, 214, 137, 0.5);
    transform: translateY(-0.5px);
}

.calendar-nav:active {
    transform: translateY(0);
}

.calendar-nav:focus {
    outline: none;
}

.calendar-nav:focus-visible {
    outline: 1px solid rgba(0, 214, 137, 0.9);
    outline-offset: 2px;
}

.custom-calendar-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    font-family: var(--font-body);
    font-size: 0.46rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(184, 197, 208, 0.8);
    opacity: 0.8;
}

.calendar-weekdays span {
    text-align: center;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.calendar-day {
    width: 24px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
                rgba(3, 18, 15, 0.95);
    color: rgba(232, 240, 242, 0.85);
    font-family: var(--font-body);
    font-size: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-micro, all 0.15s ease-in-out);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
}

.calendar-day.empty {
    background: transparent;
    cursor: default;
}

.calendar-day:not(.empty):hover {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.32), rgba(18, 194, 255, 0.24));
    color: rgba(5, 12, 10, 0.98);
    box-shadow: 0 0 8px rgba(0, 214, 137, 0.45);
}

.calendar-day.selected {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.9), rgba(18, 194, 255, 0.7));
    color: rgba(5, 12, 10, 0.98);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.7),
        0 0 10px rgba(0, 214, 137, 0.7);
    font-weight: 600;
}

.calendar-day.in-range {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.18), rgba(18, 194, 255, 0.16));
    color: rgba(232, 240, 242, 0.96);
}

.calendar-day.selected-start::before,
.calendar-day.selected-end::before {
    content: "";
    position: absolute;
}

/* Slightly tighter on very small screens */
@media (max-width: 480px) {
    .custom-date-range {
        min-width: 190px;
    }

    .calendar-day {
        width: 22px;
        height: 20px;
    }
}

.custom-date-range.active {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: slideDownFloat 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDownFloat {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.date-input-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.45rem; /* Ultra-tight: 7.2px */
    color: rgba(0, 214, 137, 0.5); /* Subtler color */
    text-transform: uppercase;
    letter-spacing: 0.18em; /* More elegant spacing */
    font-weight: 600;
    text-rendering: optimizeLegibility;
    line-height: 1.1; /* Tighter line height */
    opacity: 0.7; /* Slight transparency */
}

.date-input {
    background: rgba(15, 30, 45, 0.5);
    border: 1px solid rgba(0, 214, 137, 0.15);
    color: var(--color-text-primary);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.5625rem; /* 9px - tighter */
    font-weight: 500;
    padding: 5px 7px;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.date-input:hover {
    border-color: rgba(0, 214, 137, 0.3);
    background: rgba(15, 30, 45, 0.7);
}

.date-input:focus {
    outline: none;
    border-color: rgba(0, 214, 137, 0.5);
    box-shadow: 0 0 0 2px rgba(0, 214, 137, 0.1);
    background: rgba(15, 30, 45, 0.85);
}

/* Apply Button for Custom Range - ultra-minimal sleek style */
.date-apply-btn {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.08) 0%, rgba(0, 229, 255, 0.06) 100%); /* More subtle gradient */
    border: 1px solid rgba(0, 214, 137, 0.2); /* Subtler border */
    color: rgba(0, 214, 137, 0.9); /* Less intense color */
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 0.5rem; /* Ultra-tight: 8px */
    text-transform: uppercase;
    letter-spacing: 0.18em; /* More elegant spacing */
    text-rendering: optimizeLegibility;
    padding: 4px 8px; /* Tighter padding */
    border-radius: 8px; /* Sleeker radius */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 3px; /* Tighter margin */
    text-shadow: 0 0 4px rgba(0, 214, 137, 0.2); /* Subtler glow */
    opacity: 0.8; /* Slight transparency for minimalism */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
}

.date-apply-btn:hover {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.15) 0%, rgba(0, 229, 255, 0.12) 100%); /* Subtle enhancement */
    border-color: rgba(0, 214, 137, 0.3); /* Less intense border */
    box-shadow: 0 1px 4px rgba(0, 214, 137, 0.15); /* Minimal shadow */
    transform: scale(1.01); /* Minimal scale */
    text-shadow: 0 0 6px rgba(0, 214, 137, 0.3); /* Subtle glow */
    opacity: 1; /* Full opacity on hover */
}

.date-apply-btn:focus {
    outline: none;
}

.date-apply-btn:active {
    transform: scale(0.98);
}

/* More Options Dropdown (for less common filters) */
.date-more-toggle {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.5625rem;
    padding: 4px 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
}

.date-more-toggle:hover {
    background: rgba(0, 214, 137, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.date-more-toggle-icon {
    font-size: 0.5rem;
    transition: transform 0.2s ease;
}

.date-more-toggle.active .date-more-toggle-icon {
    transform: rotate(180deg);
}

.date-more-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: rgba(11, 20, 35, 0.95);
    border: 1px solid rgba(0, 214, 137, 0.3);
    border-radius: 8px;
    padding: 4px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.date-more-options.active {
    display: flex;
    animation: slideDown 0.2s ease-out;
}

/* Responsive Design - Ultra-minimal aesthetics maintained */
@media (max-width: 992px) {
    .date-toggles {
        padding: 0;
    }

    .date-toggle-btn {
        padding: 3px 5px; /* Ultra-tight padding */
        font-size: clamp(0.4rem, 0.38rem + 0.1vw, 0.46rem); /* Smaller, sleeker */
        letter-spacing: 0.16em; /* Maintained elegance */
    }

    .date-toggle-label {
        font-size: 0.5rem; /* Proportionally smaller but readable */
        letter-spacing: 0.1em;
        opacity: 0.8;
    }
}

@media (max-width: 768px) {
    .date-toggles-container {
        width: 100%;
        align-items: flex-start;  /* Left-align label + pill on mobile */
        height: var(--dashboard-topline-height, 76px);         /* Keep baseline aligned with reduced KPI tile height */
    }

    .date-toggle-label {
        text-align: center;
        font-size: 0.52rem;
        opacity: 0.85;
        letter-spacing: 0.1em;
    }

    .date-toggles {
        flex-wrap: wrap;
        justify-content: flex-start;
        max-width: 100%;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .date-toggle-btn {
        flex: 0 1 auto;
        min-width: 50px; /* Narrower for mobile */
        padding: 2.5px 5px; /* Ultra-tight */
        font-size: clamp(0.39rem, 0.37rem + 0.1vw, 0.45rem); /* Smaller, sleeker */
        letter-spacing: 0.15em; /* Maintained elegance */
    }

    .custom-date-range {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        min-width: 150px; /* Slightly narrower */
        padding: 6px; /* Tighter padding */
        background: rgba(11, 20, 35, 0.92); /* More transparent */
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25),
                    0 4px 16px rgba(0, 214, 137, 0.03); /* Subtle floating */
    }

    /* Ensure From/To buttons maintain contrast on tablets */
    .date-target-btn .date-target-label {
        color: rgba(0, 214, 137, 0.85); /* Maintain high contrast */
    }
}

@media (max-width: 480px) {
    .date-toggles {
        padding: 0;
        background: transparent;
    }

    .date-toggle-btn {
        padding: 2px 4px; /* Ultra-minimal padding */
        font-size: clamp(0.37rem, 0.35rem + 0.08vw, 0.42rem); /* Smallest, sleekest */
        letter-spacing: 0.14em; /* Elegant spacing maintained */
        opacity: 0.75; /* More subtle on tiny screens */
    }

    .date-toggle-label {
        font-size: 0.48rem; /* Smallest readable size */
        opacity: 0.8;
        letter-spacing: 0.1em;
    }

    .custom-date-range {
        min-width: 130px; /* Narrowest possible */
        padding: 5px; /* Tightest padding */
        background: rgba(11, 20, 35, 0.9); /* More transparent */
        border-radius: 8px; /* Sleeker on small screens */
    }

    /* Ensure From/To buttons maintain contrast on mobile */
    .date-target-btn .date-target-label {
        color: rgba(0, 214, 137, 0.85); /* Maintain high contrast */
        text-shadow: 0 0 3px rgba(0, 214, 137, 0.4); /* Slightly stronger glow for visibility */
    }
}

    .date-input {
        font-size: 0.48rem; /* Tighter font */
        padding: 3px 5px; /* Minimal padding */
        border-radius: 6px; /* Sleeker radius */
    }

    .date-input-label {
        font-size: 0.42rem; /* Smaller label */
        opacity: 0.6; /* More subtle */
    }

    .date-apply-btn {
        font-size: 0.48rem; /* Tighter button text */
        padding: 3px 6px; /* Minimal button padding */
        margin-top: 2px; /* Tighter margin */
    }
}

/* =========================================================
   ULTRA-MINIMALISTIC CALENDAR PICKER STYLING
   Sleek, floating calendar tiles for date inputs
   ========================================================= */

/* Enhanced calendar picker indicator - ultra-minimal */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(450%) hue-rotate(130deg) brightness(95%) contrast(101%);
    cursor: pointer;
    opacity: 0.6; /* Subtle opacity for minimalism */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.85); /* Smaller, sleeker icon */
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.9; /* Enhanced on hover */
    transform: scale(0.9); /* Subtle scale effect */
    filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(450%) hue-rotate(130deg) brightness(110%) contrast(105%);
}

input[type="date"]::-webkit-calendar-picker-indicator:active {
    transform: scale(0.8); /* Tighter press effect */
}

/* Enhanced date input styling for calendar tiles */
.date-input {
    background: rgba(15, 30, 45, 0.4); /* More transparent for floating effect */
    border: 1px solid rgba(0, 214, 137, 0.08); /* Ultra-subtle border */
    color: var(--color-text-primary, rgba(255, 255, 255, 0.9));
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.55rem; /* Tighter font size */
    font-weight: 500;
    padding: 4px 6px; /* Tighter padding */
    border-radius: 8px; /* Sleeker radius */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px); /* Subtle blur for floating effect */
    backdrop-filter: blur(8px);
}

.date-input:hover {
    border-color: rgba(0, 214, 137, 0.2); /* Subtle emerald tint */
    background: rgba(15, 30, 45, 0.6); /* Slightly more opaque on hover */
    box-shadow: 0 0 8px rgba(0, 214, 137, 0.08); /* Ultra-subtle glow */
}

.date-input:focus {
    outline: none;
    border-color: rgba(0, 214, 137, 0.3); /* Enhanced emerald border */
    box-shadow: 0 0 0 1px rgba(0, 214, 137, 0.1),
                0 0 12px rgba(0, 214, 137, 0.06); /* Subtle focus ring */
    background: rgba(15, 30, 45, 0.7); /* More opaque when focused */
}

/* Force dark theme for calendar popup - ultra-minimal tiles */
input[type="date"] {
    color-scheme: dark;
}

/* Enhanced calendar popup styling for Chromium browsers - sleeker tiles */
input[type="date"]::-webkit-datetime-edit {
    color: var(--color-text-primary, rgba(255, 255, 255, 0.9));
    font-weight: 500;
    letter-spacing: 0.02em; /* Tighter letter spacing */
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    background: transparent;
    padding: 1px 0; /* Minimal padding */
}

/* Calendar tile hover states - ultra-subtle */
input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 0.8;
    transform: scale(0.88);
}

/* Focus state for accessibility - minimal ring */
input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
    transform: scale(0.92);
}

/* Filter Cards Section */
.filter-cards-wrapper {
    width: calc(100% - 1in);
    max-width: 1240px;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.filter-cards-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 0;
    align-items: stretch;
}

.filter-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    box-shadow: 0 18px 30px rgba(2, 10, 18, 0.45);
    backdrop-filter: blur(6px);
}

.filter-card-header {
    background: var(--surface-header);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-card-subtext {
    font-size: 0.65rem;
    text-transform: none;
    letter-spacing: 0.02em;
    color: rgba(247, 247, 255, 0.7);
}

.filter-card-body {
    padding: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
    min-height: 70px;
}

.date-card .date-primary-group,
.date-card .date-secondary-group {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: stretch;
}

.date-card .date-tertiary-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
    color: rgba(226, 238, 255, 0.75);
    font-size: 0.75rem;
}

.date-time-label {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.filter-pill.primary {
    flex: 1;
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.35rem 1rem;
}

.filter-pill.secondary {
    flex: 1;
    border-radius: 999px;
    font-size: 0.75rem;
    padding: 0.25rem;
    color: rgba(233, 241, 255, 0.85);
    border-color: transparent;
    background: rgba(255, 255, 255, 0.06);
}

.filter-pill.secondary.active {
    background: var(--accent-primary);
    color: #101517;
    border-color: var(--accent-primary);
}

/* Filter Pills (Text Buttons) */
.filter-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.filter-pill {
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

.filter-pill:hover {
    background: var(--surface-hover);
    border-color: var(--border-hover);
}

.filter-pill.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

/* Icon Buttons (Leagues) */
.filter-icon-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 0.25rem;
}

.filter-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.25rem;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.filter-icon-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.filter-icon-btn:hover {
    background: var(--surface-hover);
    opacity: 1;
}

.filter-icon-btn.active {
    background: var(--surface-selected);
    border-color: var(--accent-primary);
    opacity: 1;
}

/* Search Input */
.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-input-wrapper input {
    width: 100%;
    padding: 0.575rem 2rem 0.575rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    background: var(--surface-input);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.search-input-wrapper .search-icon {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .filter-cards-wrapper {
        width: 100%;
        padding: 0 0.75rem;
    }

    .filter-cards-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .search-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .filter-cards-wrapper {
        padding: 0 0.5rem;
    }

    .filter-cards-section {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   KPI Tiles Component - Clean & Modern Edition
   ========================================================================== */

/* KPI Tiles Container */
.kpi-tiles {
    display: flex;
    gap: 8px;
    align-items: stretch;
    height: var(--dashboard-topline-height, 76px);
    margin: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

/* KPI Tile - Clean Card Style */
.kpi-tile {
    width: 100px;
    height: 76px;
    box-sizing: border-box;
    /* Clean, deep background without noise */
    background: linear-gradient(145deg,
        rgba(15, 30, 56, 0.7) 0%,
        rgba(10, 21, 40, 0.7) 100%);
    border: 1px solid rgba(0, 214, 137, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    user-select: none;
}

.kpi-tile:hover {
    background: linear-gradient(145deg, 
        rgba(20, 38, 72, 0.8) 0%, 
        rgba(15, 26, 48, 0.8) 100%);
    border-color: var(--emerald-400);
    box-shadow: 0 4px 12px rgba(0, 214, 137, 0.15);
    transform: translateY(-1px);
}

.kpi-tile-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.kpi-tile-layer {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0;
}

.kpi-tile-layer.active {
    display: flex;
}

/* Typography - Clean, readable hierarchy */
.kpi-label {
    font-family: var(--font-body, 'Cormorant Garamond', Georgia, serif);
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(214, 232, 236, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
}

.kpi-value {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #f0f8fa;
    line-height: 1;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    text-align: center;
    white-space: nowrap;
}

.kpi-subtext {
    font-family: var(--font-body, 'Cormorant Garamond', Georgia, serif);
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--emerald-400);
    opacity: 0.9;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
    line-height: 1.15;
}

/* Status Colors */
.kpi-value.positive { color: var(--emerald-400); }
.kpi-value.negative { color: #ff5a6e; }

/* Responsive - maintain fixed tile size */
@media (max-width: 1200px) {
    .kpi-tile { width: 100px; height: 76px; }
    .kpi-value { font-size: 1.2rem; }
    .kpi-label { font-size: 0.6rem; }
}

@media (max-width: 768px) {
    .kpi-tiles { gap: 6px; }
    .kpi-tile { width: 100px; height: 76px; }
    .kpi-value { font-size: 1.15rem; }
}
/**
 * Mobile Responsiveness Enhancements
 * Optimizes layout and interactions for mobile devices
 */

/* ===== MOBILE BREAKPOINTS ===== */
/* Small phones: < 480px */
/* Phones: 480px - 767px */
/* Tablets: 768px - 1024px */
/* Desktop: > 1024px */

/* ===== NAVIGATION MOBILE ===== */

@media (max-width: 767px) {
    .brand-nav {
        padding: 12px;
    }
    
    .nav-links {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .nav-link {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .nav-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .last-refresh {
        font-size: 11px;
    }
    
    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* ===== KPI TILES MOBILE ===== */

@media (max-width: 1024px) {
    .kpi-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .kpi-tiles {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .kpi-tile {
        padding: 16px;
    }
    
    .kpi-label {
        font-size: 12px;
    }
    
    .kpi-value {
        font-size: 24px;
    }
    
    .kpi-subtext {
        font-size: 11px;
    }
}

/* ===== TABLE MOBILE ===== */

@media (max-width: 1024px) {
    .picks-table {
        font-size: 13px;
    }
    
    .picks-table th,
    .picks-table td {
        padding: 10px 8px;
    }
    
    /* Hide less critical columns on tablets */
    .picks-table th:nth-child(7), /* Result */
    .picks-table td:nth-child(7) {
        display: none;
    }
}

@media (max-width: 767px) {
    /* Stack table layout for mobile */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .picks-table {
        min-width: 600px; /* Allow horizontal scroll */
        font-size: 12px;
    }
    
    .picks-table th,
    .picks-table td {
        padding: 8px 6px;
    }
    
    /* Hide more columns on mobile */
    .picks-table th:nth-child(6), /* Boxscore */
    .picks-table td:nth-child(6),
    .picks-table th:nth-child(7), /* Result */
    .picks-table td:nth-child(7) {
        display: none;
    }
    
    /* Compact status badges */
    .status-badge {
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .picks-table {
        font-size: 11px;
    }
    
    /* Ultra compact for small phones */
    .picks-table th,
    .picks-table td {
        padding: 6px 4px;
    }
    
    /* Hide segment column too */
    .picks-table th:nth-child(5), /* Segment */
    .picks-table td:nth-child(5) {
        display: none;
    }
}

/* ===== ALTERNATIVE CARD VIEW FOR MOBILE ===== */

@media (max-width: 640px) {
    .picks-table.card-view {
        min-width: 0;
    }
    
    .picks-table.card-view thead {
        display: none;
    }
    
    .picks-table.card-view tbody {
        display: grid;
        gap: 12px;
    }
    
    .picks-table.card-view tr {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
        background: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: 8px;
    }
    
    .picks-table.card-view td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none;
    }
    
    .picks-table.card-view td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

/* ===== FILTERS MOBILE ===== */

@media (max-width: 767px) {
    .unified-filter {
        padding: 12px;
    }
    
    .filter-header {
        padding: 12px;
    }
    
    .filter-body {
        padding: 12px;
    }
    
    .filter-options {
        grid-template-columns: 1fr;
    }
    
    .filter-checkbox-label {
        font-size: 13px;
        padding: 10px;
    }
}

/* ===== SPORTSBOOK CARDS MOBILE ===== */

@media (max-width: 767px) {
    .sportsbook-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .sportsbook-card {
        padding: 12px;
    }
    
    .sportsbook-name {
        font-size: 14px;
    }
    
    .sportsbook-meta-compact {
        font-size: 11px;
    }
    
    .credential-input-compact {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* ===== BUTTONS & CONTROLS MOBILE ===== */

@media (max-width: 640px) {
    button,
    .btn {
        min-height: 44px; /* iOS touch target recommendation */
        font-size: 14px;
    }
    
    .btn-sm {
        min-height: 36px;
        font-size: 12px;
    }
}

/* ===== MODAL & OVERLAY MOBILE ===== */

@media (max-width: 767px) {
    .modal,
    .overlay {
        padding: 0;
    }
    
    .modal-content {
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px;
    }
}

/* ===== TOOLBAR MOBILE ===== */

@media (max-width: 767px) {
    .filters-toolbar,
    .dashboard-toolbar,
    .main-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }
    
    .toolbar-section {
        justify-content: space-between;
    }
    
    .export-import-controls {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== DASHBOARD HEADER MOBILE ===== */

@media (max-width: 767px) {
    .dashboard-topline {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    
    .brand-header-inline {
        justify-content: center;
    }
    
    .brand-logo-small {
        width: 40px;
        height: 40px;
    }
    
    .brand-line-1 {
        font-size: 20px;
    }
    
    .brand-line-2 {
        font-size: 14px;
    }
}

/* ===== DATE TOGGLES MOBILE ===== */

@media (max-width: 640px) {
    .date-toggle-group {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .date-toggle-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ===== PARLAY LEGS MOBILE ===== */

@media (max-width: 767px) {
    .parlay-legs-container {
        padding: 8px;
    }
    
    .compact-leg-table {
        font-size: 11px;
    }
    
    .compact-leg-table th,
    .compact-leg-table td {
        padding: 4px 6px;
    }
}

/* ===== BOXSCORE MOBILE ===== */

@media (max-width: 640px) {
    .boxscore-teams {
        font-size: 11px;
    }
    
    .boxscore-logo {
        width: 20px;
        height: 20px;
    }
    
    .boxscore-team-name {
        display: none; /* Hide team names, show only logos and scores */
    }
    
    .boxscore-team-record {
        font-size: 9px;
    }
}

/* ===== TOUCH IMPROVEMENTS ===== */

@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    button,
    .btn,
    a,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover states on touch devices */
    .kpi-tile:hover {
        transform: none;
    }
    
    /* Improve scrolling */
    .table-container {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== LANDSCAPE ORIENTATION ===== */

@media (max-width: 767px) and (orientation: landscape) {
    .dashboard-topline {
        flex-direction: row;
        padding: 12px;
    }
    
    .kpi-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== SAFE AREA INSETS (iOS notch support) ===== */

@supports (padding: env(safe-area-inset-top)) {
    .brand-nav {
        padding-top: env(safe-area-inset-top);
    }
    
    .notification-container {
        top: calc(20px + env(safe-area-inset-top));
        right: calc(20px + env(safe-area-inset-right));
    }
    
    .main-container {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}
/* ==========================================================================
   Navigation CSS - Premium Sports Analytics Dashboard
   ========================================================================== */

/* Navigation uses design tokens from variables.css */

/* Navigation Container - Static positioning, does NOT scroll with page */
.brand-nav {
    position: relative;
    /* Stretch across viewport, then constrain inner content to the same width
       as .main-dashboard-layout (min(100%, 1900px)) so right edges align */
    left: 0;
    right: 0;
    padding: 12px var(--layout-gutter); /* Match main-container horizontal gutter */
    z-index: 100; /* Above content but not extreme */
    display: flex;
    align-items: center;
    pointer-events: none;
    margin: 0 !important;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

.brand-nav * {
    pointer-events: auto;
}

/* Ensure nav is always visible */
body.page-active-picks .brand-nav {
    z-index: 9999 !important;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

/* Navigation Links */
.nav-links {
    display: flex;
    list-style: none;
    gap: 4px; /* Tighter, more compact spacing */
    align-items: center;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: flex-end; /* Right-aligned nav links */
    padding-right: 16px; /* Space before nav-actions */
}

.nav-links li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Navigation Link Styles - Premium Serif Typography */
.nav-link {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-weight: 700; /* Increased weight for better readability */
    font-size: 0.8rem; /* More compact size */
    text-transform: uppercase;
    letter-spacing: 0.12em; /* Tighter, more elegant spacing */
    color: #ffffff; /* Pure white for max contrast */
    text-decoration: none;
    padding: 4px 6px; /* More compact padding */
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.2s ease;
    position: relative;
    background: transparent !important;
    border: none;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.35), 0 0 2px rgba(255, 255, 255, 0.2), 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 0.8); /* Subtle glow + enhanced contrast shadow for better readability */
    opacity: 1; /* Full opacity */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
    /* Sharper text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Disabled / placeholder nav links */
.nav-link[aria-disabled="true"] {
    pointer-events: none; /* Prevent clicks, but look normal */
    /* No opacity or cursor changes - looks like regular link for design */
    color: #e8f0f2; /* Slightly softer white but still readable */
    opacity: 0.85; /* Increased opacity for better readability */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.25), 0 0 1px rgba(255, 255, 255, 0.15), 0 2px 10px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.7); /* Subtle glow + enhanced contrast shadow */
}

.nav-link[aria-disabled="true"]::before {
    opacity: 0 !important;
    transform: scaleX(0) !important;
    box-shadow: none !important;
}

.nav-link:hover {
    color: #ffffff; /* Even brighter on hover */
    background: transparent !important;
    text-shadow: 0 0 16px rgba(var(--color-primary-bright-rgb), 0.7), 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 0.8); /* Enhanced glow with stronger contrast */
    opacity: 1;
    transform: translateY(-1px); /* Subtle lift effect */
}

.nav-link:focus,
.nav-link:focus-visible {
    outline: none;
    background: transparent !important;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(var(--color-primary-bright-rgb), 0.9), 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 0.8);
}

.nav-link.active,
.nav-link[aria-current="page"] {
    color: #00ffaa; /* Brighter, higher contrast active color */
    font-weight: 700; /* Increased weight to match other links */
    background: transparent !important;
    text-shadow:
        0 0 20px rgba(0, 255, 170, 0.8),
        0 0 12px rgba(var(--color-primary-bright-rgb), 0.6),
        0 2px 10px rgba(0, 0, 0, 0.95),
        0 1px 4px rgba(0, 0, 0, 1),
        0 0 2px rgba(0, 0, 0, 0.8); /* Enhanced glow with stronger contrast */
    opacity: 1;
}

/* Elegant underline animation */
.nav-link::after {
    content: none !important;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    right: 0;
    height: 1.5px; /* Thinner, more elegant */
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 170, 0.8),
        transparent
    );
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
}

/* Hover underline for non-active links */
.nav-link:not(.active):not([aria-current="page"]):hover::before {
    opacity: 1;
    transform: scaleX(1);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 170, 0.9),
        transparent
    );
    box-shadow: 0 0 16px rgba(0, 255, 170, 0.6);
}

/* Active underline with glow */
.nav-link.active::before,
.nav-link[aria-current="page"]::before {
    opacity: 1;
    transform: scaleX(1);
    background: linear-gradient(
        90deg,
        rgba(0, 143, 88, 0.3),
        rgba(0, 255, 170, 1),
        rgba(0, 143, 88, 0.3)
    );
    box-shadow:
        0 0 20px rgba(0, 255, 170, 0.9),
        0 0 12px rgba(var(--color-primary-bright-rgb), 0.6);
}

/* ===== Dropdown Container ===== */
.nav-dropdown {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Dropdown Trigger */
.brand-nav .nav-dropdown-trigger {
    padding: 4px 6px; /* Match nav-link compact padding */
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    gap: 3px; /* Tighter gap */
}

.brand-nav .nav-dropdown-trigger::after {
    content: '▼' !important;
    font-size: 0.6em; /* Slightly smaller for elegance */
    opacity: 1;
    color: #00ffaa; /* Higher contrast bright green */
    display: inline-block;
    transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
    margin-left: 2px;
    line-height: 1;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(0, 255, 170, 0.7), 0 2px 4px rgba(0, 0, 0, 0.8);
    vertical-align: baseline;
    transform: translateY(0.1em);
}

.brand-nav .nav-dropdown-trigger:hover {
    background: transparent !important;
}

.brand-nav .nav-dropdown-trigger:hover::after {
    color: var(--color-primary-bright, #00d689) !important;
    opacity: 1 !important;
    transform: translateY(0.1em);
}

.brand-nav .nav-dropdown.open .nav-dropdown-trigger::after {
    content: '▼' !important;
    transform: translateY(0.1em) rotate(180deg);
    color: var(--color-primary-bright, #00d689) !important;
    opacity: 1 !important;
}

/* Dropdown Menu - When open */
.nav-dropdown.open .nav-dropdown-menu:not([hidden]) {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), 
                visibility 0s linear 0s;
}

/* Dropdown Menu - Premium Dark Theme */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    max-height: 85vh;
    background: rgba(13, 27, 51, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 143, 88, 0.35);
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 143, 88, 0.12) inset;
    border-radius: 8px;
    padding: 10px 12px 12px;
    z-index: 10001; /* Above nav */
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--sportsbook-body-font);
    font-size: var(--sportsbook-label-size);
    line-height: 1.35;
    letter-spacing: 0.02em;
    
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                visibility 0s linear 0.2s;
    pointer-events: none;
}

/* ===== Sleek Fetch Button at Sportsbook Level ===== */
.sportsbook-actions-row {
    display: flex !important;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: 3px;
}

.sportsbook-credentials-group {
    display: flex;
    gap: 3px;
    flex: 1;
}

/* ===== Sportsbook Cards ===== */
.sportsbook-card {
    padding: 8px 10px;
    margin-bottom: 4px;
    background: linear-gradient(140deg, rgba(8, 17, 33, 0.88), rgba(6, 22, 26, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-left: 2px solid rgba(0, 143, 88, 0.4);
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
    font-family: var(--sportsbook-body-font);
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.sportsbook-card:hover {
    background: linear-gradient(140deg, rgba(10, 21, 40, 0.90), rgba(7, 24, 29, 0.95));
    border-color: rgba(var(--color-primary-bright-rgb), 0.15);
    border-left-color: #00b06c;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Success state after fetch for sleek button */
.sportsbook-card.fetch-success {
    border-left-color: #00ffaa;
    animation: successFlash 0.6s ease-out;
}

@keyframes successFlash {
    0% { 
        background: linear-gradient(140deg, rgba(0, 255, 170, 0.3), rgba(var(--color-primary-bright-rgb), 0.2));
        box-shadow: 0 0 30px rgba(0, 255, 170, 0.5);
    }
    100% { 
        background: linear-gradient(140deg, rgba(8, 17, 33, 0.85), rgba(6, 22, 26, 0.90));
        box-shadow: none;
    }
}

.sportsbook-card.fetch-success .sportsbook-fetch-compact {
    color: #00ffaa;
    background: rgba(0, 255, 170, 0.15);
}

/* Error state */
.sportsbook-card.fetch-error {
    border-left-color: #ff5570;
}

.sportsbook-card.fetch-error .sportsbook-fetch-compact {
    color: #ff5570;
    background: rgba(255, 71, 87, 0.15);
}

.sportsbook-card:focus-within {
    border-color: rgba(var(--color-primary-bright-rgb), 0.25);
    box-shadow: 0 0 0 1px rgba(var(--color-primary-bright-rgb), 0.15);
}

.sportsbook-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.sportsbook-meta-compact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.sportsbook-name-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0; /* Allow shrinking */
}

.sportsbook-name {
    font-family: var(--sportsbook-heading-font);
    font-weight: 700;
    font-size: var(--sportsbook-title-size);
    color: #e8f0f2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Connection Status Indicator */
.connection-status {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}

.connection-status.connected {
    background: #00ffaa;
    box-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.connection-status.disconnected {
    background: #ff5570;
    box-shadow: 0 0 6px rgba(255, 71, 87, 0.4);
}

.connection-status.syncing {
    background: #80deea;
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.8);
    animation: statusBlink 1s ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.2); }
}

.sportsbook-last-sync {
    font-family: var(--sportsbook-heading-font);
    font-size: var(--sportsbook-caption-size);
    color: #90a4ae;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sync-time {
    color: #b0bec5;
    font-family: var(--sportsbook-heading-font);
    font-weight: 600;
}

.sportsbook-fetch-compact {
    background: transparent;
    border: none;
    padding: 2px 4px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sportsbook-heading-font);
    font-size: var(--sportsbook-caption-size);
    font-weight: 600;
    color: #00d689;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    border-radius: 3px;
    flex-shrink: 0;
}

.sportsbook-fetch-compact .fetch-icon {
    font-size: 0.65rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.sportsbook-fetch-compact:hover,
.sportsbook-fetch-compact:focus-visible {
    color: #00ffaa;
    background: rgba(var(--color-primary-bright-rgb), 0.12);
    outline: none;
}

.sportsbook-fetch-compact:hover .fetch-icon,
.sportsbook-fetch-compact:focus-visible .fetch-icon {
    transform: rotate(360deg);
}

/* Credentials row */
.sportsbook-credentials-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.credential-input-compact {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #cfd8dc;
    font-family: var(--sportsbook-heading-font);
    font-size: var(--sportsbook-label-size);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 6px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.credential-input-compact:focus {
    outline: none;
    border-color: rgba(var(--color-primary-bright-rgb), 0.4);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 1px rgba(var(--color-primary-bright-rgb), 0.2);
}

.credential-input-compact::placeholder {
    color: #78909c;
    font-family: var(--sportsbook-heading-font);
    font-size: var(--sportsbook-label-size);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Syncing State */
.sportsbook-card.syncing {
    border-left-color: #00ffaa;
    background: linear-gradient(140deg, rgba(0, 143, 88, 0.15), rgba(6, 22, 26, 0.90));
    animation: cardPulse 2s ease-in-out infinite;
}

@keyframes cardPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 255, 170, 0); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 170, 0.3); }
}

.sportsbook-card.syncing .sportsbook-fetch-compact {
    background: rgba(0, 255, 170, 0.15);
    cursor: wait;
    pointer-events: none;
}

.sportsbook-card.syncing .sportsbook-fetch-compact .fetch-icon {
    animation: spin 1s linear infinite;
    color: #00ffaa;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Action Buttons (Footer) ===== */
.sportsbook-actions-compact {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.action-btn-compact {
    flex: 1;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: #b0bec5;
    font-family: var(--sportsbook-heading-font);
    font-size: var(--sportsbook-label-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.action-btn-compact:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.add-book-btn-compact {
    color: #cfd8dc;
    border-color: rgba(0, 143, 88, 0.4);
}

.add-book-btn-compact:hover {
    background: rgba(0, 143, 88, 0.18);
    border-color: #00b06c;
    color: #00d689;
}

/* ===== Import Options Styling ===== */
.import-options-popup {
    background: rgba(13, 27, 51, 0.98) !important;
    border: 1px solid rgba(0, 143, 88, 0.35) !important;
    border-radius: 8px !important;
    padding: 14px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

.import-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 8px;
}

.import-title {
    font-family: var(--sportsbook-heading-font);
    font-size: var(--sportsbook-label-size);
    font-weight: 700;
    color: #00D689 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.import-back-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.import-back-btn:hover {
    color: #ffffff;
}

.import-option-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.import-option-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(var(--color-primary-bright-rgb), 0.4) !important;
}

.import-option-label {
    font-family: var(--sportsbook-heading-font);
    font-size: var(--sportsbook-label-size);
    font-weight: 600;
    color: #e8f0f2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.import-option-desc {
    font-family: var(--sportsbook-heading-font);
    font-size: var(--sportsbook-caption-size);
    font-weight: 500;
    color: #90a4ae;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.file-input-hidden {
    display: none;
}

.import-paste-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.import-paste-label {
    font-family: var(--sportsbook-heading-font);
    font-size: var(--sportsbook-label-size);
    font-weight: 600;
    color: #90a4ae;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.import-paste-textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e8f0f2 !important;
    border-radius: 4px !important;
    font-family: var(--sportsbook-heading-font) !important;
    font-size: var(--sportsbook-label-size);
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 10px;
    resize: vertical;
    min-height: 60px;
}

.import-paste-textarea:focus {
    outline: none;
    border-color: #00d689 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(var(--color-primary-bright-rgb), 0.2) !important;
}

.import-paste-textarea::placeholder {
    color: #78909c;
    font-family: var(--sportsbook-heading-font);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.import-paste-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.paste-action-btn {
    flex: 1;
    padding: 6px 10px !important;
    border-radius: 3px !important;
    font-family: var(--sportsbook-heading-font) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: var(--sportsbook-label-size) !important;
    letter-spacing: 0.08em !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.paste-process-btn {
    background: rgba(0, 143, 88, 0.2) !important;
    border: 1px solid rgba(0, 143, 88, 0.4) !important;
    color: #00d689 !important;
}

.paste-process-btn:hover {
    background: rgba(0, 143, 88, 0.4) !important;
    color: #ffffff !important;
}

.paste-clear-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #b0bec5 !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
}

.paste-clear-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ===== Back to Top Button - Sleek Minimalist Design ===== */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(13, 27, 51, 0.6);
    border: 0.5px solid rgba(var(--color-primary-bright-rgb), 0.25);
    color: rgba(0, 255, 170, 0.7);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 1px 4px rgba(0, 0, 0, 0.4),
        0 0 0 0.5px rgba(0, 0, 0, 0.15) inset;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: 
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: rgba(0, 143, 88, 0.12);
    border-color: rgba(0, 255, 170, 0.5);
    color: rgba(0, 255, 170, 0.95);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 0 0.5px rgba(0, 0, 0, 0.15) inset,
        0 0 12px rgba(0, 255, 170, 0.15);
    transform: translateY(-1px);
}

.back-to-top:active {
    transform: translateY(0);
    background: rgba(0, 143, 88, 0.18);
}

/* ==========================================================================
   UNIFIED NAV STYLING - Bear Background Pages
   Consistent nav transitions across dashboard, weekly-lineup, odds-market
   ========================================================================== */

/* Unified nav positioning for all bear-background pages */
body.page-weekly-lineup .brand-nav,
body.page-odds-market .brand-nav,
body.page-active-picks .brand-nav {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0.124in !important; /* 0.124in from top of viewport */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.75in !important;
    padding-right: 0.75in !important;
    z-index: 1000 !important;
}

body.page-weekly-lineup .nav-links,
body.page-odds-market .nav-links,
body.page-active-picks .nav-links {
    margin-top: 0;
}

body.page-weekly-lineup .nav-link,
body.page-odds-market .nav-link,
body.page-active-picks .nav-link {
    color: #e6f2f6 !important; /* Soft emerald-tinted white for readability */
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important; /* Consistent font size */
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-shadow: 
        0 1px 2px rgba(0, 31, 63, 0.9),
        0 0 4px rgba(0, 214, 137, 0.3) !important;
    opacity: 1 !important;
    padding: 4px 8px !important;
    -webkit-font-smoothing: antialiased;
    transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
}

body.page-weekly-lineup .nav-link:hover,
body.page-odds-market .nav-link:hover,
body.page-active-picks .nav-link:hover {
    color: #00e6a3; /* Brighter emerald on hover */
    text-shadow: 
        0 0 8px rgba(0, 214, 137, 0.5),
        0 1px 2px rgba(0, 31, 63, 0.9);
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.1), rgba(0, 31, 63, 0.1));
    transform: translateY(-1px);
}

body.page-weekly-lineup .nav-link.active,
body.page-weekly-lineup .nav-link[aria-current="page"],
body.page-odds-market .nav-link.active,
body.page-odds-market .nav-link[aria-current="page"],
body.page-active-picks .nav-link.active,
body.page-active-picks .nav-link[aria-current="page"] {
    color: #00e6a3; /* Emerald for active */
    text-shadow: 
        0 0 6px rgba(0, 214, 137, 0.4),
        0 1px 2px rgba(0, 31, 63, 0.9);
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.15), rgba(0, 31, 63, 0.15));
}


/* ===== Responsive Adjustments ===== */
@media (max-width: 1200px) {
    .nav-links {
        gap: 3px; /* Maintain compact spacing */
    }
    
    .nav-link {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        padding: 4px 5px;
    }
}

@media (max-width: 768px) {
    .brand-nav {
        left: 0;
        right: 0;
        padding-inline: 16px;
    }
    
    .nav-links {
        gap: 2px; /* Very compact on mobile */
    }
    
    .nav-link {
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        padding: 3px 4px;
    }
    
    .nav-dropdown-menu {
        width: 260px;
        right: -10px;
    }
    
    .back-to-top {
        bottom: 24px;
        right: 24px;
        width: 32px;
        height: 32px;
    }
    
}
/**
 * Notification System Styles
 */

.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 400px;
}

.notification {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-elevated);
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
    border-left: 4px solid;
    pointer-events: all;
    transform: translateX(calc(100% + 40px));
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification.exit {
    transform: translateX(calc(100% + 40px));
    opacity: 0;
}

.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-message {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
    word-wrap: break-word;
}

.notification-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.notification-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* ===== TYPE VARIANTS ===== */

.notification-success {
    border-left-color: var(--color-win);
}

.notification-success .notification-icon {
    background: var(--color-win-bg);
    color: var(--color-win);
}

.notification-error {
    border-left-color: var(--color-loss);
}

.notification-error .notification-icon {
    background: var(--color-loss-bg);
    color: var(--color-loss);
}

.notification-warning {
    border-left-color: var(--color-push);
}

.notification-warning .notification-icon {
    background: var(--color-push-bg);
    color: var(--color-push);
}

.notification-info {
    border-left-color: var(--color-pending);
}

.notification-info .notification-icon {
    background: var(--color-pending-bg);
    color: var(--color-pending);
}

/* ===== MOBILE RESPONSIVENESS ===== */

@media (max-width: 640px) {
    .notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .notification {
        padding: 12px;
        font-size: 13px;
    }
}

/* ===== STACKING ANIMATION ===== */

.notification:nth-child(n+4) {
    opacity: 0.7;
    transform: scale(0.95) translateY(-8px);
}

.notification:nth-child(n+5) {
    display: none;
}
/* ==========================================================================
   Parlays Component (v3) - UNIFIED WITH BOXSCORES
   --------------------------------------------------------------------------
   Layout and visual rules for parlay summary chips shown in parent rows.
   Keeps multi-leg summaries in a single, readable horizontal flow.
   
   NOTE: Core boxscore styling (logos, scores, time) is defined in boxscores.css
   This file adds parlay-specific layout and status coloring only.
   
   DROPDOWN FUNCTIONALITY:
   - All parlay rows (.parlay-row) are clickable and expandable
   - Toggle icon (▶) appears on left side of datetime cell
   - Icon rotates 90° when expanded to show open state (▼)
   - Parlay legs (.parlay-legs) are hidden by default and slide in when expanded
   - Hover effects on parlay rows provide visual feedback
   ========================================================================== */

/* ===== MULTI-GAME SUMMARY CONTAINER ===== */
.multi-game-summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    row-gap: 8px;
    max-width: 100%;
    font-family: var(--font-body);
}

/* ===== LEG SNIPPET - MINI BOXSCORE CHIP ===== */
/* Metallic Forest Green & Navy theme */
.leg-snippet {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 4px;
    background: rgba(13, 27, 51, 0.85);
    border: 1px solid rgba(0, 143, 88, 0.2);
    box-shadow: none;
    text-align: center;
    font-family: var(--font-body);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.leg-snippet:hover {
    background: rgba(0, 143, 88, 0.12);
    border-color: rgba(0, 143, 88, 0.35);
}

.leg-snippet .leg-num {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0, 178, 114, 0.85);
    white-space: nowrap;
}

/* NOTE: .score-display and .team-logo-small are defined in boxscores.css */
/* NOTE: .time-remaining is defined in boxscores.css */

/* ═══════════════════════════════════════════════════════════════════════════
   LEG STATUS COLORING - Forest Green & Navy Theme
   Consistent with brand colors, status indicated by border/text accents
   ═══════════════════════════════════════════════════════════════════════════ */

/* Win/Final - Emerald accent */
.leg-snippet[data-status="win"],
.leg-snippet[data-status="final"] {
    background: rgba(0, 143, 88, 0.12);
    border-color: rgba(0, 178, 114, 0.4);
}

.leg-snippet[data-status="win"] .leg-num,
.leg-snippet[data-status="final"] .leg-num {
    color: rgba(0, 214, 137, 0.95);
}

/* Live/On-Track - Cyan accent (secondary brand color) */
.leg-snippet[data-status="live"],
.leg-snippet[data-status="on-track"] {
    background: rgba(0, 188, 212, 0.08);
    border-color: rgba(0, 188, 212, 0.35);
}

.leg-snippet[data-status="live"] .leg-num,
.leg-snippet[data-status="on-track"] .leg-num {
    color: rgba(0, 229, 255, 0.9);
}

/* Pending - Muted navy */
.leg-snippet[data-status="pending"] {
    background: rgba(13, 27, 51, 0.75);
    border-color: rgba(144, 164, 174, 0.2);
}

.leg-snippet[data-status="pending"] .leg-num {
    color: rgba(144, 164, 174, 0.75);
}

/* At-Risk - Amber (warning color from brand) */
.leg-snippet[data-status="at-risk"] {
    background: rgba(255, 111, 0, 0.1);
    border-color: rgba(255, 179, 0, 0.35);
}

.leg-snippet[data-status="at-risk"] .leg-num {
    color: rgba(255, 179, 0, 0.9);
}

/* Loss - Loss color from brand */
.leg-snippet[data-status="loss"] {
    background: rgba(198, 40, 40, 0.1);
    border-color: rgba(239, 83, 80, 0.3);
}

.leg-snippet[data-status="loss"] .leg-num {
    color: rgba(239, 83, 80, 0.85);
}

/* Time remaining color by status - using brand colors */
.leg-snippet .time-remaining {
    font-weight: var(--weight-medium) !important;
    color: rgba(144, 164, 174, 0.85) !important;
}

.leg-snippet[data-status="live"] .time-remaining,
.leg-snippet[data-status="on-track"] .time-remaining {
    color: rgba(0, 229, 255, 0.9) !important;
    font-weight: var(--weight-semibold) !important;
}

.leg-snippet[data-status="win"] .time-remaining,
.leg-snippet[data-status="final"] .time-remaining {
    color: rgba(0, 214, 137, 0.9) !important;
    font-weight: var(--weight-semibold) !important;
}

.leg-snippet[data-status="at-risk"] .time-remaining {
    color: rgba(255, 179, 0, 0.9) !important;
    font-weight: var(--weight-semibold) !important;
}

.leg-snippet[data-status="loss"] .time-remaining {
    color: rgba(144, 164, 174, 0.6) !important;
}

/* Toggle Arrow Styles - Enhanced for Clarity */
.parlay-row {
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.parlay-row:hover {
    background-color: rgba(0, 143, 88, 0.08) !important;
}

.parlay-row.expanded {
    background: linear-gradient(to right, rgba(0, 143, 88, 0.1), transparent) !important;
    border-left-color: var(--color-primary, #008f58) !important;
    position: relative;
    z-index: 2;
}

/* Continuous vertical line connecting parent to legs */
.parlay-row.expanded::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 4px;
    height: 100%;
    background: var(--color-primary, #008f58);
    z-index: 3;
}

.parlay-toggle-icon {
    color: var(--color-primary, #008f58);
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.2s ease;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    -webkit-user-select: none;
    margin-right: 8px;
}

.parlay-row.expanded .parlay-toggle-icon {
    transform: rotate(90deg);
    color: var(--color-primary-bright, #00d689);
}

.parlay-toggle-icon:hover {
    color: var(--color-primary-bright, #00d689);
}

.parlay-leg-summary {
    display: block;
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(144, 164, 174, 0.85);
    margin-top: 2px;
}


/* Parlay Leg Container Connector */
.parlay-legs {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.parlay-legs.show {
    display: table-row;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.parlay-legs-container {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid var(--zebra-border);
    border-left: 3px solid var(--color-primary, #008f58);
    position: relative;
    margin: 0 8px;
}

/* Visual connector between parent and legs */
.parlay-legs-container::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -4px;
    width: 4px;
    height: 100%;
    background: var(--color-primary, #008f58);
    border-radius: 0 0 2px 2px;
}

/* ===== IMPROVED PARLAY LEGS TABLE LAYOUT ===== */

/* Header for parlay legs section */
.parlay-legs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 214, 137, 0.2);
}

.parlay-legs-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.parlay-legs-heading {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary, #e8f0f2);
}

.parlay-legs-subtitle {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary, rgba(144, 164, 174, 0.9));
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.parlay-legs-hint {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(144, 164, 174, 0.8);
}

/* Improved parlay legs table */
.parlay-legs-table,
.compact-leg-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    margin: 0;
    table-layout: fixed;
}

.parlay-legs-table-header,
.compact-leg-table thead {
    background: rgba(0, 214, 137, 0.05);
    border-bottom: 1px solid rgba(0, 214, 137, 0.2);
}

.parlay-legs-table-header th,
.compact-leg-table thead th {
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-normal);
    color: var(--color-text-secondary, rgba(144, 164, 174, 0.9));
    text-align: center;
    border: none;
    border-bottom: 1px solid rgba(0, 214, 137, 0.2);
}

.parlay-legs-table-header th:nth-child(1) { width: 120px; } /* Date */
.parlay-legs-table-header th:nth-child(2) { width: 25%; } /* Matchup */
.parlay-legs-table-header th:nth-child(3) { width: 30%; } /* Pick */
.parlay-legs-table-header th:nth-child(4) { width: 15%; } /* Segment */
.parlay-legs-table-header th:nth-child(5) { width: 15%; } /* Status */

.leg-number-header {
    width: 80px;
    text-align: center;
}

/* Leg number badge in table */
/* Improved leg row styling */
.parlay-leg-row {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(0, 214, 137, 0.1);
    transition: background-color 0.2s ease;
}

.parlay-leg-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.parlay-leg-row.live-game {
    background: rgba(0, 188, 212, 0.05);
    animation: pulse-live 2s infinite;
}

.parlay-leg-row.live-game:hover {
    background: rgba(0, 188, 212, 0.08);
}

/* pulse-live animation defined in page-layout.css */

.parlay-leg-row td {
    padding: 12px 15px;
    border: none;
    vertical-align: middle;
}

/* Improved matchup cell for legs */
.matchup-cell-parlay-leg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 200px;
}

.matchup-cell-parlay-leg .team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.matchup-cell-parlay-leg .team-name {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary, #e8f0f2);
    white-space: nowrap;
}

.matchup-cell-parlay-leg .vs-divider {
    font-size: var(--text-xs);
    color: rgba(144, 164, 174, 0.6);
    font-weight: var(--weight-medium);
    margin: 0 4px;
}

/* Improved pick cell for legs */
.pick-cell-leg {
    text-align: center;
    min-width: 150px;
}

.pick-cell-leg .pick-type {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    color: var(--color-accent, #00bcd4);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.pick-cell-leg .pick-details {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary, #e8f0f2);
    margin-bottom: 2px;
}

.pick-cell-leg .pick-odds {
    font-family: var(--font-mono, 'Roboto Mono', monospace);
    font-size: var(--text-xs);
    color: var(--color-text-muted, rgba(84, 110, 122, 0.9));
}

/* Game segment styling */
.game-segment {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    color: var(--color-text-secondary, rgba(144, 164, 174, 0.9));
    letter-spacing: 0.05em;
}

.compact-leg-table tr {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0, 143, 88, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.compact-leg-table tr:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 214, 137, 0.3);
    box-shadow: 0 2px 6px rgba(0, 214, 137, 0.15);
}

.compact-leg-table td {
    padding: 8px 12px;
    border: none;
    vertical-align: middle;
}

.compact-leg-table td:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    padding-left: 12px;
}

.compact-leg-table td:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Leg Number Column */
.leg-num-cell,
.leg-number-cell {
    width: 70px;
    text-align: center;
    vertical-align: middle;
    padding: 8px 6px !important;
}

.leg-number-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.leg-label {
    display: block;
    font-size: 0.5rem;
    font-weight: 800;
    color: rgba(144, 164, 174, 0.8);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
}

.leg-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, 'Roboto Mono', monospace);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--color-primary-bright, #00d689);
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.2), rgba(0, 178, 114, 0.15));
    border: 2px solid rgba(0, 214, 137, 0.5);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 1;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 214, 137, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Matchup Column */
.matchup-cell-parlay-leg {
    min-width: 250px;
}

.matchup-cell-parlay-leg .team-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
}

.matchup-cell-parlay-leg .team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.matchup-cell-parlay-leg .team-name {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary, #e8f0f2);
}

.matchup-cell-parlay-leg .team-record {
    font-family: var(--font-mono, 'Roboto Mono', monospace);
    font-size: 0.7rem;
    color: var(--color-text-muted, rgba(84, 110, 122, 0.9));
}

.vs-divider-inline {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.15);
    margin: 2px 0 2px 34px; /* Align with team names */
    display: block;
    line-height: 1;
}

/* Pick Details Column */
.pick-cell-parlay-leg {
    flex: 1;
}

.pick-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pick-market {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent, #00bcd4);
    letter-spacing: 0.05em;
}

.pick-selection {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-primary, #e8f0f2);
}

.pick-odds {
    font-family: var(--font-mono, 'Roboto Mono', monospace);
    font-size: 0.8rem;
    color: var(--color-text-secondary, rgba(144, 164, 174, 0.9));
}

/* Status Column */
.status-cell-parlay-leg {
    width: 100px;
    text-align: right;
}

.status-cell-parlay-leg .status-badge {
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    min-width: 70px;
    text-align: center;
    border: 1px solid transparent;
}

.status-cell-parlay-leg .status-badge.status-win {
    background: rgba(0, 214, 137, 0.15);
    color: #00d689;
    border-color: rgba(0, 214, 137, 0.3);
}

.status-cell-parlay-leg .status-badge.status-loss {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
    border-color: rgba(239, 83, 80, 0.3);
}

.status-cell-parlay-leg .status-badge.status-live {
    background: rgba(0, 188, 212, 0.15);
    color: #00bcd4;
    border-color: rgba(0, 188, 212, 0.3);
}

.status-cell-parlay-leg .status-badge.status-pending {
    background: rgba(144, 164, 174, 0.1);
    color: #90a4ae;
    border-color: rgba(144, 164, 174, 0.2);
}

/* Ensure parlay parent row shows feedback */
.parlay-row {
    transition: background-color 0.2s ease, border-left-color 0.2s ease;
}

.parlay-row:hover {
    background-color: rgba(0, 143, 88, 0.08) !important;
}

.parlay-row[aria-expanded="true"] {
    background-color: rgba(0, 143, 88, 0.04) !important;
}

.parlay-toggle {
    background: transparent;
    border: none;
    color: var(--color-primary, #008f58);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 8px;
    margin-right: 4px;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ===== OVERRIDE GREEN COLORS IN PARLAY LEGS ===== */
/* Remove distracting green font colors from picks and segments in expanded parlay sub legs */
/* Use muted, readable colors that match the nested leg aesthetic */

/* Override green "Full Game" segment color - use muted blue-gray instead */
.compact-leg-table .game-segment,
.compact-leg-table [data-segment*="full-game"] .game-segment {
    color: rgba(170, 188, 204, 0.95) !important;
}

/* Slightly mute other segment colors for consistency (but keep their distinction) */
.compact-leg-table [data-segment*="1st-half"] .game-segment,
.compact-leg-table [data-segment*="1h"] .game-segment {
    color: rgba(100, 200, 220, 0.85) !important; /* Muted cyan */
}

.compact-leg-table [data-segment*="2nd-half"] .game-segment,
.compact-leg-table [data-segment*="2h"] .game-segment {
    color: rgba(120, 180, 240, 0.85) !important; /* Muted blue */
}

.compact-leg-table [data-segment*="1q"] .game-segment,
.compact-leg-table [data-segment*="2q"] .game-segment,
.compact-leg-table [data-segment*="3q"] .game-segment,
.compact-leg-table [data-segment*="4q"] .game-segment {
    color: rgba(144, 164, 174, 0.85) !important; /* Muted slate */
}

/* Pick line - use soft, readable blue-gray */
.compact-leg-table .pick-line {
    color: rgba(200, 215, 230, 0.98) !important;
}

/* Also override pick type and other pick elements for consistency */
.compact-leg-table .pick-type {
    color: rgba(144, 164, 174, 0.88) !important;
}

.compact-leg-table .pick-team-abbr {
    color: rgba(200, 215, 230, 0.95) !important;
}

/* ===== PARLAY LEG ROWS - LocalPicksManager format ===== */
/* Individual parlay leg rows (created by LocalPicksManager) */
tr.parlay-leg {
    background: rgba(0, 143, 88, 0.03);
    border-left: 3px solid var(--color-primary, #008f58);
    transition: background-color 0.2s ease, opacity 0.25s ease;
}

tr.parlay-leg:hover {
    background: rgba(0, 143, 88, 0.08);
}

/* Hidden state for collapsed parlay legs */
tr.parlay-leg-hidden {
    display: none !important;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Expanded parlay leg visibility */
.parlay-row.expanded + tr.parlay-leg,
tr.parlay-leg:not(.parlay-leg-hidden) {
    display: table-row;
    opacity: 1;
}

/* Style parlay leg cells to be slightly indented */
tr.parlay-leg td:first-child {
    padding-left: 28px;
}

/* parlay-expand-arrow removed */

/* ==========================================================================
   COMPACT PARLAY LEGS - Smaller, tighter styling for expanded leg rows
   ========================================================================== */

/* Make the container more compact - remove all dead space */
.parlay-legs-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid var(--color-primary, #008f58) !important;
    display: block !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Hide the "Parlay Details" header - takes up unnecessary space */
.parlay-legs-header {
    display: none !important;
}

/* Remove connector pseudo-element */
.parlay-legs-container::before {
    display: none !important;
}

/* ULTRA-COMPACT leg table styling */
.compact-leg-table {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    padding: 0 !important;
    table-layout: fixed !important;
    border: none !important;
    white-space: normal !important;
}

/* Compact thead - minimal padding */
.compact-leg-table thead {
    background: rgba(0, 214, 137, 0.03) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.compact-leg-table thead th {
    padding: 3px 4px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.03em !important;
    margin: 0 !important;
    border: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.compact-leg-table tbody {
    margin: 0 !important;
    padding: 0 !important;
}

.compact-leg-table tr {
    background: rgba(255, 255, 255, 0.025) !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.compact-leg-table tr:hover {
    background: rgba(0, 214, 137, 0.08) !important;
}

.compact-leg-table td {
    padding: 3px 4px !important;
    border: none !important;
    vertical-align: middle !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 0 !important;
}

.compact-leg-table td:first-child {
    padding-left: 6px !important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}

.compact-leg-table td:last-child {
    padding-right: 6px !important;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

/* TINY leg number badge */
.compact-leg-table .leg-number-badge {
    gap: 1px !important;
}

.compact-leg-table .leg-label {
    font-size: 0.35rem !important;
    letter-spacing: 0.1em !important;
}

.compact-leg-table .leg-value {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.7rem !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

/* Compact matchup cell */
.compact-leg-table .matchup-cell-parlay-leg {
    min-width: 120px !important;
    gap: 2px !important;
}

.compact-leg-table .matchup-cell-parlay-leg .team-name-full {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
}

/* Compact pick details */
.compact-leg-table .pick-details {
    gap: 0 !important;
}

.compact-leg-table .pick-market {
    font-size: 0.55rem !important;
    line-height: 1.1 !important;
}

.compact-leg-table .pick-selection {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
}

.compact-leg-table .pick-odds {
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
}

/* Compact segment */
.compact-leg-table .game-segment {
    font-size: 0.55rem !important;
}

/* Status badges in parlay legs - COMPACT SIZE with VISIBLE COLOR CODING */
.compact-leg-table .status-badge {
    font-family: var(--font-body) !important;
    font-size: 0.6rem !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    min-width: 48px !important;
}

/* STATUS COLOR CODING for compact leg table badges - HIGH VISIBILITY backgrounds (40% opacity) */
.compact-leg-table .status-badge[data-status="pending"] {
    border-color: rgba(136, 140, 149, 0.6) !important;
    color: #d0d4db !important;
    background: rgba(136, 140, 149, 0.4) !important;
}

.compact-leg-table .status-badge[data-status="live"] {
    border-color: rgba(74, 182, 255, 0.7) !important;
    color: #5fc1ff !important;
    background: rgba(74, 182, 255, 0.4) !important;
}

.compact-leg-table .status-badge[data-status="on-track"] {
    border-color: rgba(0, 191, 255, 0.7) !important;
    color: #33cfff !important;
    background: rgba(0, 191, 255, 0.4) !important;
}

.compact-leg-table .status-badge[data-status="at-risk"] {
    border-color: rgba(251, 140, 0, 0.7) !important;
    color: #ffa033 !important;
    background: rgba(251, 140, 0, 0.4) !important;
}

.compact-leg-table .status-badge[data-status="win"],
.compact-leg-table .status-badge[data-status="hit"],
.compact-leg-table .status-badge[data-status="final"] {
    border-color: rgba(0, 255, 170, 0.7) !important;
    color: #33ffbb !important;
    background: rgba(0, 255, 170, 0.4) !important;
}

.compact-leg-table .status-badge[data-status="loss"],
.compact-leg-table .status-badge[data-status="miss"] {
    border-color: rgba(229, 57, 53, 0.7) !important;
    color: #ff7a7f !important;
    background: rgba(229, 57, 53, 0.4) !important;
}

.compact-leg-table .status-badge[data-status="push"] {
    border-color: rgba(184, 197, 208, 0.6) !important;
    color: #c8d3dc !important;
    background: rgba(184, 197, 208, 0.4) !important;
}

/* Parlay matchup cell styling */
.parlay-matchup {
    display: flex;
    align-items: center;
    gap: 6px;
}

.parlay-leg-count {
    font-size: 0.75rem;
    color: rgba(144, 164, 174, 0.8);
    font-weight: 500;
}

/* Boxscore placeholder for parlay parent rows */
.boxscore-placeholder {
    color: rgba(144, 164, 174, 0.5);
    font-size: 1.2rem;
}

/* HOVER STATES for compact leg table status badges */
.compact-leg-table .status-badge[data-status="on-track"]:hover {
    border-color: var(--status-on-track-color, #00bfff) !important;
    box-shadow: 0 0 0 1px rgba(0, 191, 255, 0.3), 0 0 10px rgba(0, 191, 255, 0.25) !important;
}

.compact-leg-table .status-badge[data-status="at-risk"]:hover {
    border-color: var(--status-at-risk-color, #fb8c00) !important;
    box-shadow: 0 0 0 1px rgba(251, 140, 0, 0.3), 0 0 10px rgba(251, 140, 0, 0.25) !important;
}

.compact-leg-table .status-badge[data-status="win"]:hover,
.compact-leg-table .status-badge[data-status="hit"]:hover,
.compact-leg-table .status-badge[data-status="final"]:hover {
    border-color: var(--status-hit-color, #00ffaa) !important;
    box-shadow: 0 0 0 1px rgba(0, 255, 170, 0.3), 0 0 10px rgba(0, 255, 170, 0.25) !important;
}

.compact-leg-table .status-badge[data-status="loss"]:hover,
.compact-leg-table .status-badge[data-status="miss"]:hover {
    border-color: var(--status-miss-color, #ff5f6d) !important;
    box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.3), 0 0 10px rgba(229, 57, 53, 0.25) !important;
}

.compact-leg-table .status-badge[data-status="push"]:hover {
    border-color: var(--status-push-color, rgba(184, 197, 208, 0.95)) !important;
    box-shadow: 0 0 0 1px rgba(184, 197, 208, 0.3), 0 0 8px rgba(184, 197, 208, 0.2) !important;
}

/* ==========================================================================
   PARLAY PARENT ROW STATUS BADGES - Visible color coding
   --------------------------------------------------------------------------
   The parent parlay row's status badge is NOT inside .compact-leg-table,
   so it needs separate styling rules with higher visibility backgrounds.
   ========================================================================== */

.parlay-row .status-badge[data-status="pending"] {
    border-color: rgba(136, 140, 149, 0.6) !important;
    color: #d0d4db !important;
    background: rgba(136, 140, 149, 0.4) !important;
}

.parlay-row .status-badge[data-status="live"] {
    border-color: rgba(74, 182, 255, 0.7) !important;
    color: #5fc1ff !important;
    background: rgba(74, 182, 255, 0.4) !important;
}

.parlay-row .status-badge[data-status="on-track"] {
    border-color: rgba(0, 191, 255, 0.7) !important;
    color: #33cfff !important;
    background: rgba(0, 191, 255, 0.4) !important;
}

.parlay-row .status-badge[data-status="at-risk"] {
    border-color: rgba(251, 140, 0, 0.7) !important;
    color: #ffa033 !important;
    background: rgba(251, 140, 0, 0.4) !important;
}

.parlay-row .status-badge[data-status="win"],
.parlay-row .status-badge[data-status="hit"],
.parlay-row .status-badge[data-status="final"] {
    border-color: rgba(0, 255, 170, 0.7) !important;
    color: #33ffbb !important;
    background: rgba(0, 255, 170, 0.4) !important;
}

.parlay-row .status-badge[data-status="loss"],
.parlay-row .status-badge[data-status="miss"] {
    border-color: rgba(229, 57, 53, 0.7) !important;
    color: #ff7a7f !important;
    background: rgba(229, 57, 53, 0.4) !important;
}

.parlay-row .status-badge[data-status="push"] {
    border-color: rgba(184, 197, 208, 0.6) !important;
    color: #c8d3dc !important;
    background: rgba(184, 197, 208, 0.4) !important;
}
/* ==========================================================================
   PICKS TABLE COMPONENT - TABLE OF CONTENTS
   ==========================================================================
   This file handles all picks table styling. Navigate to sections by searching
   for the section headers listed below.

   SECTIONS:
   Line ~15   - TEAM LOGOS - Unified sizing for logos
   Line ~60   - TABLE CONTAINER - Main wrapper with glass effect
   Line ~90   - SCROLLBARS - Custom Vegas-style scrollbars
   Line ~165  - PICKS TABLE BASE - Core table element styling
   Line ~195  - TABLE HEADER - Header row design
   Line ~305  - HEADER SHELL - Clean container for header content
   Line ~320  - SORT BUTTONS - Clickable sort headers
   Line ~445  - FILTER DROPDOWN - Filter button triggers
   Line ~450  - BOXSCORE TOGGLE - Collapse/expand toggle
   Line ~520  - TABLE BODY - Body and row base styles
   Line ~595  - STATUS ACCENTS - Status-based row styling
   Line ~680  - TABLE CELLS - Cell padding and alignment
   Line ~730  - CELL TYPES - Datetime, matchup, pick, currency cells
   Line ~1050 - COLLAPSED MODE - Compact row view styling
   Line ~1420 - RESPONSIVE - Mobile breakpoints

   TABLE ROW HTML STRUCTURE (rendered by picks-table-renderer.js):
   --------------------------------------------------------------------------
   <tr data-league="nfl" data-epoch="..." data-book="..." data-status="...">
     <td>
       <div class="datetime-cell">
         <span class="date-value">MM/DD/YYYY</span>
         <span class="time-value">H:MM am/pm</span>
         <span class="sportsbook-value">Sportsbook Name</span>
       </div>
     </td>
     <td>
       <div class="matchup-cell">
         <div class="team-line">
           <img class="team-logo" src="..." alt="...">
           <div class="team-name-wrapper">
             <span class="team-name-full">Team Name</span>
             <span class="team-record">(W-L)</span>
           </div>
         </div>
         <div class="vs-divider">vs</div>
         <div class="team-line">...</div>
       </div>
     </td>
     <td>
       <div class="pick-cell">
         <div class="pick-team-info">
           <img class="pick-team-logo" src="..." alt="...">
           <span class="pick-team-abbr">ABBR</span>
         </div>
         <div class="pick-details">
           <span class="pick-line">-X.X</span>
           <span class="pick-odds">(-110)</span>
         </div>
       </div>
     </td>
     <td class="center"><span class="game-segment">Full Game</span></td>
     <td class="center">
       <span class="currency-combined">
         <span class="currency-line">
           <span class="risk-label">$ At Risk</span>
           <span class="risk-amount">$XXX.XX</span>
         </span>
         <span class="currency-line">
           <span class="win-label">To Win</span>
           <span class="win-amount">$XXX.XX</span>
         </span>
       </span>
     </td>
     <td class="center"><div class="compact-boxscore">...</div></td>
     <td class="center">
       <span class="status-badge" data-status="pending|win|loss|...">Status</span>
     </td>
   </tr>

   PARLAY ROW STRUCTURE:
   <tr class="parlay-row" data-action="toggle-parlay" ...>...</tr>
   <tr class="parlay-legs" data-parent-id="...">
     <td colspan="7"><div class="parlay-legs-container">...</div></td>
   </tr>
   ========================================================================== */

/* ==========================================================================
   TEAM LOGOS - UNIFIED SIZING
   --------------------------------------------------------------------------
   Standard logo sizes across all table components:
   - Main matchup logos: 22px
   - Pick cell logos: 20px
   - Boxscore logos: 20px (defined in boxscores.css)
   - Parlay snippet logos: 18px (defined in boxscores.css)
   ========================================================================== */

.team-logo,
.pick-team-logo {
    aspect-ratio: 1;
    object-fit: contain;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    image-rendering: auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    -webkit-font-smoothing: antialiased;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Main matchup logos - 22px standard */
.team-logo {
    width: 22px;
    height: 22px;
}

/* Pick cell logos - 20px standard */
.pick-team-logo {
    width: 20px;
    height: 20px;
}

.team-logo:hover,
.pick-team-logo:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .team-logo {
        width: 20px;
        height: 20px;
    }

    .pick-team-logo {
        width: 18px;
        height: 18px;
    }
}

/* ==========================================================================
   Picks Table Component
   --------------------------------------------------------------------------
   Main data table styling including headers, cells, rows, and sorting
   ==========================================================================*/

/* ===== TABLE CONTAINER ===== */
.table-container {
    background: transparent;
    border-radius: 8px;
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.08);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(var(--color-primary-bright-rgb), 0.04);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden; /* No horizontal scroll - table uses fixed layout */
    overflow-y: visible;
    position: relative;
    z-index: var(--z-table); /* REFINEMENT: Using z-index scale */
    display: flex;
    flex-direction: column;
    min-height: auto; /* Allow table to shrink when empty, grow when picks are added */
    /* CRITICAL FIX: Ensure container doesn't block clicks */
    pointer-events: auto;
}

/* Apply backdrop-filter blur only when table has picks (controlled by JS) */
.table-container.has-picks {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* ===== COLUMN FILTER OUTPUT CHIPS ===== */
/* Styles defined in filters.css */

/* ===== CUSTOM VEGAS-STYLE SCROLLBARS ===== */

/* Table Container Scrollbar */
.table-container::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.table-container::-webkit-scrollbar-track {
    background: linear-gradient(
        180deg,
        rgba(8, 16, 28, 0.6) 0%,
        rgba(2, 6, 23, 0.8) 50%,
        rgba(8, 16, 28, 0.6) 100%
    );
    border-radius: 10px;
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.08);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* REFINEMENT: Scrollbar track hover state */
.table-container::-webkit-scrollbar-track:hover {
    background: linear-gradient(
        180deg,
        rgba(8, 16, 28, 0.7) 0%,
        rgba(2, 6, 23, 0.9) 50%,
        rgba(8, 16, 28, 0.7) 100%
    );
}

.table-container::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(var(--color-primary-bright-rgb), 0.5) 0%,
        rgba(0, 178, 114, 0.6) 50%,
        rgba(var(--color-primary-bright-rgb), 0.5) 100%
    );
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 170, 0.3);
    box-shadow: 
        0 0 10px rgba(var(--color-primary-bright-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(var(--color-primary-bright-rgb), 0.7) 0%,
        rgba(0, 255, 170, 0.8) 50%,
        rgba(var(--color-primary-bright-rgb), 0.7) 100%
    );
    border-color: rgba(0, 255, 170, 0.5);
    box-shadow: 
        0 0 15px rgba(var(--color-primary-bright-rgb), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.table-container::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
        180deg,
        rgba(0, 255, 170, 0.8) 0%,
        rgba(var(--color-primary-bright-rgb), 0.9) 50%,
        rgba(0, 255, 170, 0.8) 100%
    );
    box-shadow: 
        0 0 20px rgba(var(--color-primary-bright-rgb), 0.6),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Scrollbar corner */
.table-container::-webkit-scrollbar-corner {
    background: rgba(8, 16, 28, 0.8);
    border-radius: 10px;
}

/* Firefox Scrollbar Support */
@supports (scrollbar-width: thin) {
    .table-container {
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--color-primary-bright-rgb), 0.5) rgba(8, 16, 28, 0.6);
    }
}

/* ===== PICKS TABLE BASE ===== */
.picks-table {
    --table-font: 'Inter', 'Exo 2', sans-serif;
    --table-heading-size: var(--text-md);
    --table-heading-weight: var(--weight-semibold);
    --table-heading-letter: 0.05em;
    --table-heading-line: 1.25;
    --table-cell-size: var(--text-base);
    --table-cell-weight: var(--weight-medium);
    --table-cell-letter: 0.01em;
    --table-cell-line: 1.35;
    --table-strong: #f5f7fa;
    --table-muted: rgba(210, 222, 230, 0.82);

    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* Let browser calculate column widths based on content */
    position: relative;
    flex: 1;
    min-height: inherit;
    border-radius: 8px;
    overflow: visible; /* Allow filter dropdowns to render outside the header */
    pointer-events: auto; /* CRITICAL FIX: Ensure table accepts clicks */
}

/* First row top corners */
.picks-table tbody tr:first-child td:first-child {
    border-top-left-radius: 0;
}

.picks-table tbody tr:first-child td:last-child {
    border-top-right-radius: 0;
}

/* Last row bottom corners */
.picks-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.picks-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

/* ===== TABLE HEADER - Clean Minimal Design ===== */
.picks-table thead {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-header); /* REFINEMENT: Using z-index scale */
    background: transparent;
    pointer-events: auto; /* CRITICAL FIX: Ensure header accepts clicks */
}

.picks-table thead th {
    padding: 14px 18px;
    text-align: center;
    font-family: var(--table-font);
    font-weight: var(--table-heading-weight);
    font-size: var(--table-heading-size);
    text-transform: uppercase;
    letter-spacing: var(--table-heading-letter);
    color: var(--table-strong);
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.25);
    white-space: nowrap;
    position: relative;
    background: linear-gradient(180deg, rgba(0, 30, 45, 0.7) 0%, rgba(0, 20, 35, 0.8) 100%);
    transition: all 0.25s ease;
    line-height: var(--table-heading-line);
    vertical-align: middle;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.picks-table thead th:first-child {
    border-top-left-radius: 8px;
}

.picks-table thead th:last-child {
    border-top-right-radius: 8px;
}

/* Center aligned headers - all headers are now centered by default */
.picks-table th.center,
.picks-table td.center {
    text-align: center;
}

.picks-table th.center .th-header-shell {
    justify-content: center;
}

.picks-table th.center .th-sort-btn {
    align-items: center;
    text-align: center;
}

.picks-table th.center .header-main-text {
    justify-content: center;
}

.picks-table th.center .header-subtext {
    text-align: center;
}

/* ==========================================================================
   COLUMN WIDTHS - 8 Column Layout (using min-width for auto table-layout)
   1: Date/Time  2: League  3: Matchup  4: Pick  5: Segment  6: Risk/Win  7: Boxscore  8: Status
   ========================================================================== */

/* Column 1: Date/Time/Book */
.picks-table thead th:nth-child(1),
.picks-table tbody td:nth-child(1) {
    min-width: 95px;
    text-align: center;
}

/* Column 2: League */
.picks-table thead th:nth-child(2),
.picks-table tbody td:nth-child(2) {
    min-width: 60px;
    text-align: center;
}

/* Column 3: Matchup */
.picks-table thead th:nth-child(3),
.picks-table tbody td:nth-child(3) {
    min-width: 150px;
    text-align: left;
}

/* Column 4: Pick */
.picks-table thead th:nth-child(4),
.picks-table tbody td:nth-child(4) {
    min-width: 130px;
    text-align: center;
}

/* Column 5: Segment */
.picks-table thead th:nth-child(5),
.picks-table tbody td:nth-child(5) {
    min-width: 70px;
    text-align: center;
}

/* Column 6: Risk/Win */
.picks-table thead th:nth-child(6),
.picks-table tbody td:nth-child(6) {
    min-width: 100px;
    text-align: center;
}

/* Column 7: Boxscore */
.picks-table thead th:nth-child(7),
.picks-table tbody td:nth-child(7) {
    min-width: 150px;
    text-align: center;
}

/* Column 8: Status */
.picks-table thead th:nth-child(8),
.picks-table tbody td:nth-child(8) {
    min-width: 80px;
    text-align: center;
}

/* ===== TABLE HEADER SHELL - Compact Flexbox Container ===== */
.th-header-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2px;
    text-align: center;
    padding: 0 2px;
}

/* Toggle variant - centered content */
.th-header-shell--toggle {
    justify-content: center;
}

/* ===== SORT BUTTONS - Compact Clickable Headers ===== */
.th-sort-btn {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 2px 4px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
    text-transform: inherit;
    letter-spacing: inherit;
    min-height: 34px;
    transition: color 0.12s ease;
    flex: 1 1 auto;
    min-width: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    caret-color: transparent;
}

.th-sort-btn:hover {
    color: rgba(0, 235, 156, 0.95);
}

.th-sort-btn:focus,
.th-sort-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.th-sort-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Header main text wrapper */
.header-main-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: var(--table-font);
    font-size: var(--table-heading-size);
    font-weight: var(--table-heading-weight);
    letter-spacing: var(--table-heading-letter);
    text-transform: uppercase;
    color: var(--table-strong);
    line-height: var(--table-heading-line);
    white-space: nowrap;
    text-align: center;
}

/* Stacked header text variant (e.g., "$ AT RISK /" over "TO WIN $") */
.header-main-text--stacked {
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.05;
}

.header-main-text--stacked .header-line {
    display: block;
    font-size: var(--text-base);
    letter-spacing: 0.08em;
}

/* Slight tonal accents for Risk/Win header */
.risk-win-header .header-line--risk {
    color: rgba(200, 140, 150, 0.95);
}

.risk-win-header .header-line--win {
    color: rgba(140, 235, 190, 0.98);
}

/* Sort icon - green triangle indicator */
.sort-icon {
    display: inline-block;
    font-size: 8px;
    color: #22c55e;
    opacity: 0.6;
    margin-left: 4px;
    vertical-align: middle;
    transition: opacity 0.2s, color 0.2s, transform 0.2s;
}

.th-sort-btn:hover .sort-icon {
    opacity: 1;
    color: #4ade80;
}

/* Active sort states */
.picks-table th.sorted-asc .sort-icon,
.picks-table th.sorted-desc .sort-icon,
th[data-sort].sorted .sort-icon,
th[data-sort].sort-asc .sort-icon,
th[data-sort].sort-desc .sort-icon {
    color: #22c55e;
    opacity: 1;
}

th[data-sort].sorted-desc .sort-icon,
th[data-sort].sort-desc .sort-icon {
    transform: rotate(180deg);
}

/* Header subtexts */
.header-subtext {
    display: block;
    font-family: var(--table-font);
    font-size: var(--table-cell-size);
    font-weight: var(--table-cell-weight);
    font-style: normal;
    color: var(--table-muted);
    letter-spacing: var(--table-cell-letter);
    margin-top: 2px;
    line-height: var(--table-cell-line);
    text-transform: none;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* ===== FILTER DROPDOWN TRIGGER ===== */
/* Styles defined in filters.css */

/* ===== BOXSCORE TOGGLE BUTTON ===== */
.th-boxscore-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(var(--color-primary-bright-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.25);
    border-radius: 6px;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 36px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    caret-color: transparent;
}

.th-boxscore-toggle:hover {
    background: rgba(var(--color-primary-bright-rgb), 0.12);
    border-color: rgba(var(--color-primary-bright-rgb), 0.4);
    color: var(--color-primary-bright);
}

.th-boxscore-toggle:focus {
    outline: none;
}

.th-boxscore-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.th-boxscore-toggle[aria-pressed="true"] {
    background: rgba(var(--color-primary-bright-rgb), 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    color: var(--color-primary);
}

/* Boxscore label text */
.th-boxscore-toggle .boxscore-label,
.th-boxscore-toggle .header-main-text {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Boxscore toggle icon */
.boxscore-toggle-icon {
    font-size: var(--text-base);
    transition: transform 0.2s ease;
    opacity: 0.8;
}

.th-boxscore-toggle[aria-pressed="true"] .boxscore-toggle-icon {
    transform: rotate(180deg);
}

/* Header hover effects */
.picks-table th.sorted {
    color: var(--color-primary);
}

/* ===== TABLE BODY ===== */
.picks-table tbody {
    position: relative;
    z-index: 10;
    background: rgba(8, 12, 22, 0.75);
    pointer-events: auto; /* CRITICAL FIX: Ensure tbody accepts clicks */
}

/* Apply backdrop-filter blur only when table has picks (controlled by JS) */
.table-container.has-picks .picks-table tbody {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.picks-table tbody tr {
    background: transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    position: relative;
    /* REFINEMENT: Removed fixed height - prevents content clipping */
    min-height: var(--row-height);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VEGAS ELEGANT ZEBRA STRIPING
   NOTE: CSS :nth-child cannot properly alternate when parlay-legs rows exist
   (it counts ALL siblings, so excluding some breaks the pattern)
   Base background provides fallback; JS applies proper .zebra-odd/.zebra-even
   ═══════════════════════════════════════════════════════════════════════════ */

/* CSS Fallback - base background for all rows before JS runs */
.picks-table tbody tr:not(.parlay-legs) {
    background: var(--zebra-odd);
}

/* JS-applied zebra classes (proper alternating pattern) */
.picks-table tbody tr.zebra-row {
    border-bottom: 1px solid var(--zebra-border);
    /* Height inherited from .picks-table tbody tr */
}

.picks-table tbody tr.zebra-odd {
    background: var(--zebra-odd);
}

.picks-table tbody tr.zebra-even {
    background: var(--zebra-even);
}

/* Vegas Sportsbook Hover - Subtle emerald lift */
.picks-table tbody tr:hover {
    background: var(--zebra-hover) !important;
}

.picks-table tbody tr:hover td {
    color: rgba(255, 255, 255, 0.98);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIVE GAME STYLING - Subtle blue accent, not overwhelming
   ═══════════════════════════════════════════════════════════════════════════ */
.picks-table tbody tr.live-game {
    border-left: 4px solid rgba(74, 182, 255, 0.75); /* REFINEMENT: More prominent */
    box-shadow: inset 4px 0 12px rgba(74, 182, 255, 0.15); /* REFINEMENT: Inner glow */
    /* Height inherited from .picks-table tbody tr */
}

/* Remove inconsistent background overrides - rely on standard zebra + border */
.picks-table tbody tr.live-game.zebra-odd {
    background: var(--zebra-odd) !important;
}

.picks-table tbody tr.live-game.zebra-even {
    background: var(--zebra-even) !important;
}

.picks-table tbody tr.live-game:hover {
    background: var(--zebra-hover) !important;
}

/* ===== STATUS ACCENTS ===== */
tr[data-status="pending"] .game-time-status,
tr[data-status="pending"] .time-remaining,
.parlay-row[data-status="pending"] .time-remaining,
.boxscore-simple-time[data-status="pending"] {
    color: #d0d5e0;
}

tr[data-status="on-track"] .game-time-status,
tr[data-status="on-track"] .time-remaining,
.parlay-row[data-status="on-track"] .time-remaining,
.boxscore-simple-time[data-status="on-track"] {
    color: #4ab6ff;
}

tr[data-status="at-risk"] .game-time-status,
tr[data-status="at-risk"] .time-remaining,
.parlay-row[data-status="at-risk"] .time-remaining,
.boxscore-simple-time[data-status="at-risk"] {
    color: #ff8a3c;
}

tr[data-status="loss"] .game-time-status,
tr[data-status="loss"] .time-remaining,
tr[data-status="lost"] .game-time-status,
tr[data-status="lost"] .time-remaining,
.parlay-row[data-status="loss"] .time-remaining,
.parlay-row[data-status="lost"] .time-remaining,
.boxscore-simple-time[data-status="loss"],
.boxscore-simple-time[data-status="lost"] {
    color: #ff5f6d;
}

tr[data-status="win"] .game-time-status,
tr[data-status="win"] .time-remaining,
tr[data-status="final"] .game-time-status,
tr[data-status="final"] .time-remaining,
.parlay-row[data-status="win"] .time-remaining,
.parlay-row[data-status="final"] .time-remaining,
.boxscore-simple-time[data-status="win"],
.boxscore-simple-time[data-status="final"] {
    color: #4cffa8;
}

tr[data-status="live"] .game-time-status,
tr[data-status="live"] .time-remaining,
tr[data-status="in-progress"] .game-time-status,
tr[data-status="in-progress"] .time-remaining {
    color: #4ab6ff;
}

/* Group visual separation */
.picks-table tbody tr.group-start {
    border-top: 1px solid rgba(var(--color-primary-bright-rgb), 0.2);
}

.picks-table tbody tr:last-child {
    border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARLAY ROWS - Emerald accent on navy base (on-brand)
   Forest green left border distinguishes multi-leg bets
   ═══════════════════════════════════════════════════════════════════════════ */
.picks-table tbody tr.parlay-row {
    /* Height inherited from .picks-table tbody tr */
}

.picks-table tbody tr.parlay-row.zebra-odd {
    background: var(--zebra-parlay-odd);
    border-bottom: 1px solid var(--zebra-parlay-border);
    border-left: 3px solid rgba(0, 143, 88, 0.5);
}

.picks-table tbody tr.parlay-row.zebra-even {
    background: var(--zebra-parlay-even);
    border-bottom: 1px solid var(--zebra-parlay-border);
    border-left: 3px solid rgba(0, 143, 88, 0.5);
}

.picks-table tbody tr.parlay-row:hover {
    background: rgba(0, 143, 88, 0.15) !important;
}

/* ===== TABLE CELLS ===== */
/* REFINEMENT: Cells now flex to content - no clipping */
.picks-table td {
    padding: 10px 12px;
    vertical-align: middle;
    text-align: center;
    font-family: var(--table-font);
    font-size: var(--table-cell-size);
    font-weight: var(--table-cell-weight);
    color: var(--table-strong);
    letter-spacing: var(--table-cell-letter);
    line-height: var(--table-cell-line);
    height: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.picks-table td:last-child {
    border-right: none;
}

/* Matchup column - allow stacked layout */
.picks-table td:nth-child(3) {
    white-space: normal;
}

/* Pick column - single line, no wrapping */
.picks-table td:nth-child(4) {
    white-space: nowrap;
}

/* REFINEMENT: Allow parlay row clicks to bubble up from cells to row */
.picks-table tbody tr.parlay-row {
    cursor: pointer;
}

.picks-table tbody tr.parlay-row td {
    pointer-events: none; /* Let clicks pass through to row */
}

.picks-table tbody tr.parlay-row td * {
    pointer-events: auto; /* But keep content interactive/selectable */
}

/* Ensure all child elements are centered */
.picks-table td * {
    text-align: center;
}

.picks-table td:first-child {
    padding-left: 8px;
}

.picks-table td:last-child {
    padding-right: 8px;
}

.picks-table .status-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
}

/* Center-align Status column header and cells */
.picks-table thead th.status-header {
	text-align: center;
}
.picks-table thead th.status-header .th-header-shell {
	justify-content: center;
}
/* Status column alignment - handled in column widths above */

/* ===== SPECIFIC CELL TYPES ===== */

/* Date/Time Cell */
.datetime-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    text-align: center;
    padding: 6px 4px;
}

.cell-date {
    font-family: var(--table-font);
    font-weight: var(--weight-semibold);
    color: var(--table-strong);
    font-size: var(--text-lg);
    line-height: 1.2;
    white-space: nowrap;
}

.cell-time {
    font-family: var(--table-font);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: rgba(220, 235, 250, 0.8);
    line-height: 1.2;
    white-space: nowrap;
}

.sportsbook-value {
    font-family: var(--table-font);
    font-size: var(--text-sm);
    color: #00d4eb;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin-top: 4px;
    display: block;
    white-space: nowrap; /* Prevent wrapping for names like Prime Time Action */
    max-width: none;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 212, 235, 0.2);
}

/* Parlay rows get special left border accent */
tr[data-is-parlay="true"] {
    border-left: 3px solid rgba(212, 175, 55, 0.6) !important;
}

/* League Cell - Clean logo + text */
.league-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
}

.league-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.league-text {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: #ffffff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* League Header */
.league-header {
    width: 75px;
    min-width: 70px;
}

.league-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
}

.league-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.league-chip.active {
    background: rgba(0,212,137,0.2);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.league-chip input {
    display: none;
}

/* Parlay parent rows */
.parlay-row {
    background: linear-gradient(135deg, rgba(0, 212, 137, 0.08), rgba(0, 83, 255, 0.03));
    border-left: 3px solid rgba(0, 212, 137, 0.6);
    cursor: pointer;
}

.parlay-row:hover {
    background: linear-gradient(135deg, rgba(0, 212, 137, 0.14), rgba(0, 83, 255, 0.06));
}

.parlay-row.expanded {
    background: linear-gradient(135deg, rgba(0, 212, 137, 0.16), rgba(0, 83, 255, 0.10));
    border-left-color: rgba(0, 255, 170, 0.9);
}

/* Parlay matchup cell with expand arrow */
.parlay-matchup {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding-left: 8px;
}

/* parlay-expand-arrow removed */

.parlay-row.expanded .parlay-toggle-icon {
    transform: rotate(90deg);
    color: var(--color-primary-bright, #00d689);
}

.parlay-leg-count {
    font-size: var(--text-sm);
    color: rgba(180, 200, 220, 0.85);
    font-weight: var(--weight-medium);
}

/* Parlay child leg rows */
.parlay-leg {
    background: rgba(0, 20, 35, 0.5);
    border-left: 3px solid rgba(0, 212, 137, 0.3);
}

.parlay-leg-hidden {
    display: none !important;
}

.parlay-leg td:first-child {
    padding-left: 24px;
}

/* Matchup Cell - Stacked layout (away, vs, home) */
.matchup-cell {
    display: grid;
    grid-template-rows: repeat(3, auto);
    row-gap: 1px;
    align-items: center;
    justify-items: center;
    justify-content: center;
    min-width: 180px;
    text-align: center;
    line-height: 1.2;
    padding: 2px 0;
    overflow: hidden;
    margin: 0 auto;
}

.matchup-cell .team-line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 4px;
    font-size: var(--text-lg);
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Matchup cell logos inherit from main .team-logo (22px) */
.matchup-cell .team-logo {
    display: inline-block;
}

.team-name-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.matchup-cell .team-name-wrapper {
    width: auto;
    justify-content: center;
    text-align: center;
}

.team-name-full {
    font-family: var(--table-font);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    letter-spacing: var(--table-cell-letter);
    text-transform: none;
    color: #ffffff;
    line-height: 1.35;
    white-space: nowrap;
}

.team-record {
    font-family: var(--table-font);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(170, 190, 210, 0.9);
    white-space: nowrap;
    line-height: 1.35;
    letter-spacing: 0.02em;
    margin-left: 4px;
    display: inline-block !important;
    visibility: visible !important;
}

.team-ranking {
    font-family: var(--table-font);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: #F5D76E; /* Vegas-style metallic gold */
    margin-right: 4px;
    white-space: nowrap;
    letter-spacing: 0.1em; /* Wide, elegant spacing */
    text-transform: uppercase;
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(245, 215, 110, 0.3); /* Subtle gold glow */
    opacity: 0.95;
}

.vs-divider {
    font-family: var(--table-font);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: 0.05em;
    text-transform: lowercase;
    color: rgba(160, 180, 200, 0.9);
    text-align: center;
    margin: 0;
    width: 100%;
    line-height: var(--leading-normal);
    white-space: nowrap;
}

/* Pick Cell - Stacked Layout for Elegance */
.pick-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
    font-family: var(--table-font);
    font-size: var(--table-cell-size);
    line-height: var(--table-cell-line);
}

.pick-team-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.pick-team-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.pick-team-abbr {
    font-family: var(--table-font);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    letter-spacing: var(--table-heading-letter);
    color: #ffffff;
    white-space: nowrap;
}

.pick-details {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.pick-type {
    font-family: var(--table-font);
    font-size: var(--text-lg);
    text-transform: capitalize;
    color: rgba(144, 164, 174, 0.88);
    font-weight: var(--weight-medium);
}

.pick-line {
    font-family: var(--table-font);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    color: #ffffff;
    letter-spacing: var(--table-cell-letter);
    white-space: nowrap;
}

.pick-odds {
    font-family: var(--table-font);
    font-size: var(--text-md);
    color: rgba(180, 195, 210, 0.8);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.risk-win-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

/* One-line layout for totals without logo (e.g., "Total Over 51 (-110)") */
.pick-details-only {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Segment Cell */
.game-segment {
    font-family: var(--table-font);
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    color: #ffffff;
    padding: 4px 0;
    border-radius: 0;
    background: transparent;
    border: none;
    display: inline-block;
    line-height: 1.5;
    white-space: nowrap;
    color: rgba(220, 230, 240, 0.95);
}

/* Risk/Win Cell - Stacked like header with separator */
.currency-combined {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--table-font);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    padding: 4px 6px;
    text-align: center;
}

.currency-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    line-height: 1.4;
}

/* Show labels */
.risk-label,
.win-label {
    font-family: var(--table-font);
    font-size: var(--text-base);
    font-weight: 500;
    color: rgba(200, 210, 220, 0.85);
    text-transform: none;
}

.risk-amount {
    font-family: var(--table-font);
    font-weight: 600;
    font-size: var(--text-lg);
    color: #ff9999;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.win-amount {
    font-family: var(--table-font);
    font-weight: 600;
    font-size: var(--text-lg);
    color: #66ffbb;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Compact boxscore alignment */
.compact-boxscore {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
}

.compact-boxscore .boxscore-grid {
    width: auto !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

.boxscore-container {
    position: relative;
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boxscore-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease;
}

.boxscore-container[data-live-ready="false"]::after {
    opacity: 0.3;
}

.boxscore-container[data-live-ready="false"] .boxscore-grid {
    opacity: 0.8;
    filter: grayscale(0.2);
}

.boxscore-container .compact-boxscore {
    width: 100%;
}

/* ===== COLLAPSED TABLE MODE ===== */
body.boxscores-collapsed .picks-table {
    border-spacing: 0 1px;
}

/* Collapsed view container helpers */
.picks-table td .expanded-view {
    display: block;
    width: 100%;
}

.picks-table td .collapsed-view {
    display: none;
    width: 100%;
}

.picks-table tbody tr.row-collapsed .expanded-view {
    display: none !important;
}

.picks-table tbody tr.row-collapsed .collapsed-view {
    display: block;
}

body.boxscores-collapsed .picks-table thead th {
    padding: 10px 14px;
}

body.boxscores-collapsed .picks-table tbody tr.row-collapsed {
    min-height: 36px;
    height: 36px; /* Compact collapsed row height */
    line-height: 1.2;
    border-bottom: 1px solid rgba(var(--color-primary-bright-rgb), 0.1);
    border-left: 2px solid transparent;
    transition: border-left-color 0.15s ease, background-color 0.15s ease;
}

body.boxscores-collapsed .picks-table tbody tr.row-collapsed td {
    padding: 5px 10px;
    font-size: var(--text-md);
    line-height: 1.25;
    white-space: nowrap;
    vertical-align: middle;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

body.boxscores-collapsed .picks-table tbody tr.row-collapsed td:last-child {
    border-right: none;
}

/* Force matchup cell to not use grid in collapsed mode */
body.boxscores-collapsed .picks-table tbody tr.row-collapsed .matchup-cell {
    display: inline-flex !important;
    grid-template-rows: unset !important;
    flex-direction: row !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
}

body.boxscores-collapsed .picks-table tbody tr.row-collapsed td:not(.center) {
    text-align: left;
}

/* DateTime Column - Collapsed */
body.boxscores-collapsed .datetime-cell--collapsed {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
    min-width: 130px;
}

body.boxscores-collapsed .datetime-cell--collapsed .date-value {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: rgba(0, 229, 255, 0.95);
    letter-spacing: 0.02em;
}

body.boxscores-collapsed .datetime-cell--collapsed .time-value {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: rgba(180, 195, 210, 0.9);
    letter-spacing: 0.02em;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

body.boxscores-collapsed .datetime-cell--collapsed .parlay-toggle-icon {
    position: absolute;
    left: 0;
}

/* Matchup Column - Collapsed */
body.boxscores-collapsed .matchup-cell--collapsed {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    grid-template-rows: none;
}

body.boxscores-collapsed .matchup-cell--collapsed .team-line {
    display: inline-flex;
    width: auto;
    justify-content: flex-start;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}

body.boxscores-collapsed .matchup-cell--collapsed .team-logo {
    width: 16px;
    height: 16px;
}

body.boxscores-collapsed .matchup-cell--collapsed .team-name-wrapper {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    justify-content: flex-start;
    text-align: left;
}

body.boxscores-collapsed .matchup-cell--collapsed .team-name-full {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: rgba(232, 240, 242, 0.98);
}

body.boxscores-collapsed .matchup-cell--collapsed .team-record {
    font-size: var(--text-sm);
    color: rgba(170, 188, 204, 0.75);
    margin-left: 3px;
}

body.boxscores-collapsed .matchup-cell--collapsed .team-ranking {
    font-size: var(--text-sm);
    color: #D4AF37;
}

body.boxscores-collapsed .matchup-cell--collapsed .vs-divider {
    display: inline;
    width: auto;
    margin: 0 6px;
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(144, 164, 174, 0.5);
    text-transform: uppercase;
}


/* Pick Column - Collapsed */
body.boxscores-collapsed .pick-cell--collapsed {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 5px;
}

body.boxscores-collapsed .pick-cell--collapsed .pick-team-logo {
    width: 14px;
    height: 14px;
}

body.boxscores-collapsed .pick-cell--collapsed .pick-team-abbr {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: rgba(232, 240, 242, 0.98);
}

body.boxscores-collapsed .pick-cell--collapsed .pick-line {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: rgba(232, 240, 242, 0.98);
}

body.boxscores-collapsed .pick-cell--collapsed .pick-odds {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: rgba(180, 195, 210, 0.85);
}

/* Currency/Risk Column - Collapsed */
body.boxscores-collapsed .currency-combined {
    display: inline-flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
}

body.boxscores-collapsed .currency-line {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

body.boxscores-collapsed .currency-line:first-child::after {
    content: '→';
    font-size: var(--text-sm);
    color: rgba(160, 180, 195, 0.5);
    margin: 0 5px;
}

body.boxscores-collapsed .currency-line:first-child .risk-amount::after {
    content: none;
}

body.boxscores-collapsed .risk-amount {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: rgba(255, 140, 140, 0.95);
}

body.boxscores-collapsed .win-amount {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: rgba(76, 255, 168, 0.98);
}

/* Boxscore Info Column - Collapsed */
.boxscore-info-collapsed {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.boxscore-simple-time {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: 8px;
}

.boxscore-simple-score {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: rgba(226, 235, 245, 0.98);
    letter-spacing: 0.02em;
}

/* Time status colors in collapsed mode */
.boxscore-simple-time[data-status="pending"] {
    color: rgba(180, 195, 210, 0.88);
}

.boxscore-simple-time[data-status="on-track"],
.boxscore-simple-time[data-status="live"] {
    color: #4ab6ff;
}

.boxscore-simple-time[data-status="at-risk"] {
    color: #ff8a3c;
}

.boxscore-simple-time[data-status="win"],
.boxscore-simple-time[data-status="final"] {
    color: #4cffa8;
}

.boxscore-simple-time[data-status="loss"],
.boxscore-simple-time[data-status="lost"] {
    color: #ff5f6d;
}

/* Segment Column - Collapsed */
body.boxscores-collapsed .game-segment--collapsed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(200, 210, 220, 0.9);
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

/* Status Badge - Collapsed (ensure prominence) */
body.boxscores-collapsed .status-badge {
    font-size: var(--text-md); /* Increased from 0.75rem for better readability */
    padding: 5px 12px;
    font-weight: var(--weight-bold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLAPSED MODE ZEBRA STRIPES - Same elegant system
   ═══════════════════════════════════════════════════════════════════════════ */
body.boxscores-collapsed .picks-table tbody tr.row-collapsed.zebra-odd,
body.boxscores-collapsed .picks-table tbody tr.row-collapsed.zebra-odd.live-game {
    background: var(--zebra-odd) !important;
}

body.boxscores-collapsed .picks-table tbody tr.row-collapsed.zebra-even,
body.boxscores-collapsed .picks-table tbody tr.row-collapsed.zebra-even.live-game {
    background: var(--zebra-even) !important;
}

body.boxscores-collapsed .picks-table tbody tr.row-collapsed:hover {
    background: var(--zebra-hover) !important;
    border-left-color: rgba(80, 100, 130, 0.6);
}

/* Parlay rows in collapsed mode - emerald accent on left */
body.boxscores-collapsed .picks-table tbody tr.row-collapsed.parlay-row {
    border-left: 3px solid rgba(0, 143, 88, 0.5) !important;
}

body.boxscores-collapsed .picks-table tbody tr.row-collapsed.parlay-row.zebra-odd {
    background: var(--zebra-parlay-odd) !important;
}

body.boxscores-collapsed .picks-table tbody tr.row-collapsed.parlay-row.zebra-even {
    background: var(--zebra-parlay-even) !important;
}

body.boxscores-collapsed .picks-table tbody tr.row-collapsed.parlay-row:hover {
    background: rgba(0, 143, 88, 0.15) !important;
}

/* Collapsed content styles (legacy support) */
.collapsed-datetime {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.collapsed-teams {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.collapsed-pick {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}

.collapsed-money {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
}

/* ===== RESPONSIVE TABLE ===== */
@media (max-width: 1200px) {
    .picks-table th,
    .picks-table td {
        padding: 10px 8px;
        font-size: var(--text-lg);
    }

    .picks-table thead th {
        font-size: var(--text-md);
        letter-spacing: var(--tracking-normal);
        padding: 12px 20px;
    }
    
    .th-sort-btn {
        min-height: 44px;
    }
    
    .header-main-text {
        font-size: var(--text-md);
        letter-spacing: 0.08em;
    }
    
    .header-subtext {
        font-size: var(--text-sm);
        letter-spacing: 0.03em;
    }
    
    .sort-icon {
        font-size: var(--text-sm);
    }
    
    .th-boxscore-toggle {
        padding: 6px 12px;
        font-size: var(--text-base);
        min-height: 32px;
    }
    
    .th-boxscore-toggle .header-main-text,
    .th-boxscore-toggle .boxscore-label {
        font-size: var(--text-base);
    }
    
    .boxscore-toggle-icon {
        font-size: var(--text-sm);
    }
    
    .team-logo {
        width: 20px;
        height: 20px;
    }
    
    .pick-team-logo {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 768px) {
    .table-container {
        border-radius: 8px;
        margin: 0 12px;
    }

    .picks-table thead th {
        padding: 10px 16px;
        font-size: var(--text-base);
        letter-spacing: var(--tracking-normal);
    }
    
    .th-sort-btn {
        min-height: 40px;
        padding: 4px 10px;
        gap: 1px;
    }
    
    .header-main-text {
        font-size: var(--text-base);
        letter-spacing: 0.06em;
    }
    
    .header-subtext {
        font-size: var(--text-xs);
        margin-top: 1px;
        letter-spacing: 0.02em;
    }
    
    .sort-icon {
        font-size: var(--text-xs);
        margin-left: 4px;
    }
    
    .th-boxscore-toggle {
        padding: 5px 10px;
        font-size: var(--text-sm);
        min-height: 28px;
        gap: 4px;
        border-radius: 5px;
    }
    
    .th-boxscore-toggle .header-main-text,
    .th-boxscore-toggle .boxscore-label {
        font-size: var(--text-sm);
    }
    
    .boxscore-toggle-icon {
        font-size: var(--text-xs);
    }
    
    .picks-table td {
        padding: 10px 8px;
        font-size: var(--text-base);
        line-height: 1.4;
    }
    
    .team-name-full {
        font-size: var(--text-lg);
        line-height: 1.4;
    }
    
    .team-record,
    .team-ranking {
        /* Removed display: none; to always show records */
    }
    
    .matchup-cell {
        min-width: 150px;
        row-gap: 3px;
    }
    
    .datetime-cell {
        min-width: 80px;
        gap: 3px;
    }
    
    .date-value {
        font-size: var(--text-lg);
    }
    
    .time-value {
        font-size: var(--text-base);
    }
    
    .game-segment {
        font-size: var(--text-sm);
        padding: 0;
    }
    
    .pick-line {
        font-size: var(--text-lg);
    }
    
    .risk-amount,
    .win-amount {
        font-size: var(--text-lg);
    }
    
    .sportsbook-value {
        font-size: var(--text-xs);
    }
}

@media (max-width: 640px) {
    /* Ensure table has minimum width for horizontal scroll */
    .picks-table {
        min-width: 600px;
    }
    
    .table-container {
        margin: 0 8px;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    }
    
    .picks-table thead th {
        padding: 8px 10px;
        font-size: var(--text-sm);
    }
    
    .picks-table td {
        padding: 8px 6px;
        font-size: var(--text-sm);
    }
    
    /* Compact matchup cell */
    .matchup-cell {
        min-width: 120px;
    }
    
    .team-name-full {
        font-size: var(--text-base);
    }
    
    /* Hide team records on smaller screens */
    .team-record,
    .team-ranking {
        /* Removed display: none; to always show records */
    }
}

@media (max-width: 480px) {
    .table-container {
        margin: 0 4px;
        min-height: 300px;
        border-radius: 6px;
    }
    
    /* Tighter table for very small screens */
    .picks-table {
        min-width: 520px;
    }

    .picks-table thead th {
        padding: 6px 8px;
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-normal);
    }
    
    .th-sort-btn {
        min-height: 32px;
        padding: 4px 6px;
        gap: 1px;
    }
    
    .header-main-text {
        font-size: var(--text-xs);
        letter-spacing: 0.04em;
    }
    
    .header-subtext {
        font-size: 0.5625rem;
        letter-spacing: 0.02em;
    }
    
    .sort-icon {
        font-size: 0.5625rem;
        margin-left: 2px;
    }
    
    .th-boxscore-toggle {
        padding: 3px 6px;
        font-size: 0.5625rem;
        min-height: 22px;
        gap: 2px;
    }
    
    .th-boxscore-toggle .header-main-text,
    .th-boxscore-toggle .boxscore-label {
        font-size: 0.5625rem;
    }
    
    .boxscore-toggle-icon {
        font-size: 0.5625rem;
    }
    
    .picks-table td {
        padding: 6px 4px;
        font-size: var(--text-xs);
        line-height: 1.35;
    }
    
    .team-name-full {
        font-size: var(--text-sm);
    }
    
    .date-value {
        font-size: var(--text-sm);
    }
    
    .time-value {
        font-size: var(--text-xs);
    }
    
    .pick-line {
        font-size: var(--text-sm);
    }
    
    .risk-amount,
    .win-amount {
        font-size: var(--text-sm);
    }
    
    /* Hide less important columns on mobile */
    .segment-header,
    .game-segment,
    .boxscore-header,
    .compact-boxscore {
        display: none;
    }
}

/* ===== WEEKLY LINEUP SPECIFIC STYLES ===== */

/* Weekly Lineup Table - Enhanced Layout for League Logos and Team Records */
.weekly-lineup-table tbody td:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.weekly-lineup-table tbody td:nth-child(3) {
    text-align: center;
}

.weekly-lineup-table .matchup-cell {
    display: flex;
    flex-direction: column;
    row-gap: 1px;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    text-align: center;
    line-height: 1.2;
    padding: 2px 0;
    overflow: hidden;
    margin: 0 auto;
}

.weekly-lineup-table .team-record,
.weekly-lineup-table .team-ranking {
    display: inline !important;
}
/**
 * Segment Color Coding - Refined Vegas Edition
 * Elegant, muted tones that complement the metallic navy/forest brand
 * Professional sportsbook aesthetic with subtle differentiation
 */

/* Base segment styling - Refined typography */
.game-segment {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: capitalize !important; /* Force Title Case */
    letter-spacing: 0.05em; /* Reduced spacing for elegance */
    white-space: nowrap;
    display: inline-block;
    line-height: 1.3;
    background: transparent;
    border: none;
    padding: 0;
    transition: opacity 0.2s ease;
}

/* ═══════════════════════════════════════════════════════
   FULL GAME - Muted Silver/Platinum
   Clean, neutral tone - the default professional look
   ═══════════════════════════════════════════════════════ */
.game-segment,
[data-segment*="full-game"] .game-segment,
.segment-full-game {
    color: #a8b4bc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════
   1ST HALF - Cool Steel Blue
   Subtle blue-grey, slightly cooler than full game
   ═══════════════════════════════════════════════════════ */
[data-segment*="1st-half"] .game-segment,
[data-segment*="1h"] .game-segment,
.segment-1st-half {
    color: #8fa4b8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════
   2ND HALF - Warm Steel
   Slightly warmer undertone to distinguish from 1H
   ═══════════════════════════════════════════════════════ */
[data-segment*="2nd-half"] .game-segment,
[data-segment*="2h"] .game-segment,
.segment-2nd-half {
    color: #9ca8a8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════
   QUARTERS - Progressive Slate Tones
   Subtle variations that don't compete for attention
   ═══════════════════════════════════════════════════════ */
[data-segment*="1q"] .game-segment,
.segment-1st-quarter {
    color: #889098;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-segment*="2q"] .game-segment,
.segment-2nd-quarter {
    color: #8c949c;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-segment*="3q"] .game-segment,
.segment-3rd-quarter {
    color: #9098a0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-segment*="4q"] .game-segment,
.segment-4th-quarter {
    color: #949ca4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════
   MULTI / PARLAY - Brand Emerald (muted)
   Uses the brand's forest green to distinguish parlays
   Professional accent that ties to the brand identity
   ═══════════════════════════════════════════════════════ */
.picks-table [data-segment*="multi"] .game-segment,
.picks-table .segment-multi,
.picks-table .parlay-row .game-segment,
.picks-table tr[data-pick-type="parlay"] .game-segment,
[data-segment*="multi"] .game-segment,
.segment-multi,
.parlay-row .game-segment,
tr[data-pick-type="parlay"] .game-segment {
    color: #5a9e7c;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════
   HOVER STATE - Subtle brightness lift
   ═══════════════════════════════════════════════════════ */
.game-segment:hover {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES - For external use
   ═══════════════════════════════════════════════════════ */
:root {
    --segment-full-game: #a8b4bc;
    --segment-1st-half: #8fa4b8;
    --segment-2nd-half: #9ca8a8;
    --segment-1q: #889098;
    --segment-2q: #8c949c;
    --segment-3q: #9098a0;
    --segment-4q: #949ca4;
    --segment-multi: #5a9e7c;
}
/* ==========================================================================
   Status Badges Component
   --------------------------------------------------------------------------
   Pill badges for row status. Color-coded via data-status attributes.
   Tooltips show additional info (data-blurb + data-status-info) on hover.
   ========================================================================== */

:root {
  --status-pending-border: rgba(136, 140, 149, 0.35);
  --status-pending-color: #c7ccd6;
  --status-pending-bg: rgba(136, 140, 149, 0.12);
  --status-pending-tooltip-border: rgba(184, 197, 208, 0.38);
  --status-pending-tooltip-text: #d4d9e0;
  --status-pending-tooltip-highlight: #e1e5eb;

  --status-live-border: rgba(74, 182, 255, 0.5);
  --status-live-color: #4ab6ff;
  --status-live-bg: rgba(74, 182, 255, 0.12);
  --status-live-tooltip-border: rgba(74, 182, 255, 0.45);
  --status-live-tooltip-text: #6bc5ff;
  --status-live-tooltip-highlight: #8dd4ff;

  --status-on-track-border: rgba(0, 191, 255, 0.5);
  --status-on-track-color: #00bfff;
  --status-on-track-bg: rgba(0, 191, 255, 0.12);
  --status-on-track-tooltip-border: rgba(0, 191, 255, 0.45);
  --status-on-track-tooltip-text: #1ad1ff;
  --status-on-track-tooltip-highlight: #4ddbff;

  --status-at-risk-border: rgba(251, 140, 0, 0.5);
  --status-at-risk-color: #fb8c00;
  --status-at-risk-bg: rgba(251, 140, 0, 0.12);
  --status-at-risk-tooltip-border: rgba(251, 140, 0, 0.45);
  --status-at-risk-tooltip-text: #ffa64d;
  --status-at-risk-tooltip-highlight: #ffb866;

  --status-hit-border: rgba(0, 255, 170, 0.5);
  --status-hit-color: #00ffaa;
  --status-hit-bg: rgba(0, 255, 170, 0.12);
  --status-hit-tooltip-border: rgba(0, 255, 170, 0.45);
  --status-hit-tooltip-text: #1affbb;
  --status-hit-tooltip-highlight: #4dffcc;

  --status-miss-border: rgba(229, 57, 53, 0.5);
  --status-miss-color: #ff5f6d;
  --status-miss-bg: rgba(229, 57, 53, 0.12);
  --status-miss-tooltip-border: rgba(229, 57, 53, 0.45);
  --status-miss-tooltip-text: #ff6b7a;
  --status-miss-tooltip-highlight: #ff8a95;

  --status-push-border: rgba(184, 197, 208, 0.4);
  --status-push-color: rgba(184, 197, 208, 0.95);
  --status-push-bg: rgba(184, 197, 208, 0.12);
  --status-push-tooltip-border: rgba(184, 197, 208, 0.38);
  --status-push-tooltip-text: #d4d9e0;
  --status-push-tooltip-highlight: #e1e5eb;
}

.status-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 14px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(11, 20, 35, 0.78);
    color: var(--color-text-primary);
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.status-badge,
.status-badge--mini {
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: box-shadow 0.1s ease-out, border-color 0.1s ease-out;
}

/* Hover/focus states */
.status-badge:hover,
.status-badge:focus-visible,
.status-badge--mini:hover,
.status-badge--mini:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 0 0 1px rgba(var(--color-primary-bright-rgb), 0.15),
        0 0 6px rgba(var(--color-primary-bright-rgb), 0.12);
}

/* Tooltip positioning */
.status-badge {
    position: relative;
    overflow: visible;
}

.picks-table td,
.picks-table th,
.picks-table td.center {
    overflow: visible;
}

.picks-table td.center {
    position: relative;
}

/* Tooltip element */
.status-tooltip {
    position: fixed;
    background: rgba(10, 18, 30, 0.95);
    color: rgba(240, 245, 248, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 10px 14px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-md);
    text-transform: none;
    letter-spacing: var(--tracking-tight);
    min-width: 140px;
    max-width: 300px;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.45),
        0 0 10px rgba(7, 24, 42, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10000;
    transition: opacity 0.08s ease-out;
    line-height: 1.45;
    display: none;
    --tooltip-text-color: rgba(240, 245, 248, 0.98);
    --tooltip-highlight-color: rgba(255, 255, 255, 0.98);
}

/* Tooltip content */
.status-tooltip .tooltip-content {
    display: block;
    line-height: 1.5;
    color: var(--tooltip-text-color, rgba(240, 245, 248, 0.98));
}

.status-tooltip .tooltip-highlight {
    font-weight: var(--weight-semibold);
    color: var(--tooltip-highlight-color);
    opacity: 1;
}

/* Tooltip arrow */
.status-tooltip::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}

/* Arrow positioning */
.status-tooltip[data-placement="top"]::before {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(10, 18, 30, 0.95);
    border-bottom: none;
}

.status-tooltip[data-placement="bottom"]::before {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(10, 18, 30, 0.95);
    border-top: none;
}

.status-tooltip[data-placement="left"]::before {
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: rgba(10, 18, 30, 0.95);
    border-right: none;
}

.status-tooltip[data-placement="right"]::before {
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: rgba(10, 18, 30, 0.95);
    border-left: none;
}

/* Status-specific tooltip colors */
.status-tooltip.tooltip-live {
    border-color: var(--status-live-tooltip-border);
    --tooltip-text-color: var(--status-live-tooltip-text);
    --tooltip-highlight-color: var(--status-live-tooltip-highlight);
}

.status-tooltip.tooltip-on-track {
    border-color: var(--status-on-track-tooltip-border);
    --tooltip-text-color: var(--status-on-track-tooltip-text);
    --tooltip-highlight-color: var(--status-on-track-tooltip-highlight);
}

.status-tooltip.tooltip-at-risk {
    border-color: var(--status-at-risk-tooltip-border);
    --tooltip-text-color: var(--status-at-risk-tooltip-text);
    --tooltip-highlight-color: var(--status-at-risk-tooltip-highlight);
}

.status-tooltip.tooltip-hit,
.status-tooltip.tooltip-win {
    border-color: var(--status-hit-tooltip-border);
    --tooltip-text-color: var(--status-hit-tooltip-text);
    --tooltip-highlight-color: var(--status-hit-tooltip-highlight);
}

.status-tooltip.tooltip-miss,
.status-tooltip.tooltip-loss {
    border-color: var(--status-miss-tooltip-border);
    --tooltip-text-color: var(--status-miss-tooltip-text);
    --tooltip-highlight-color: var(--status-miss-tooltip-highlight);
}

.status-tooltip.tooltip-pending,
.status-tooltip.tooltip-push {
    border-color: var(--status-pending-tooltip-border);
    --tooltip-text-color: var(--status-pending-tooltip-text);
    --tooltip-highlight-color: var(--status-pending-tooltip-highlight);
}

/* Status colors - Main badges */
.status-badge[data-status="pending"] {
    border-color: var(--status-pending-border);
    color: var(--status-pending-color);
    background: var(--status-pending-bg);
}

.status-badge[data-status="live"] {
    border-color: var(--status-live-border);
    color: var(--status-live-color);
    background: var(--status-live-bg);
}

.status-badge[data-status="on-track"] {
    border-color: var(--status-on-track-border);
    color: var(--status-on-track-color);
    background: var(--status-on-track-bg);
}

.status-badge[data-status="at-risk"] {
    border-color: var(--status-at-risk-border);
    color: var(--status-at-risk-color);
    background: var(--status-at-risk-bg);
}

.status-badge[data-status="hit"],
.status-badge[data-status="final"],
.status-badge[data-status="win"] {
    border-color: var(--status-hit-border);
    color: var(--status-hit-color);
    background: var(--status-hit-bg);
}

.status-badge[data-status="miss"],
.status-badge[data-status="loss"] {
    border-color: var(--status-miss-border);
    color: var(--status-miss-color);
    background: var(--status-miss-bg);
}

.status-badge[data-status="push"],
.status-badge[data-status="void"] {
    border-color: var(--status-push-border);
    color: var(--status-push-color);
    background: var(--status-push-bg);
}

/* Live indicator dot */
.status-badge[data-status="live"]::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff3333;
}

/* ==========================================================================
   Mini Status Badge
   --------------------------------------------------------------------------
   Compact badge for parlay leg snippets. Uses same color system.
   ========================================================================== */

.status-badge--mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(11, 20, 35, 0.75);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base); /* Consistent with main status badge */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    line-height: 1.3;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Mini badge status colors - using same vars */
.status-badge--mini[data-status="pending"] {
    border-color: var(--status-pending-border);
    color: var(--status-pending-color);
    background: var(--status-pending-bg);
}

.status-badge--mini[data-status="live"] {
    border-color: var(--status-live-border);
    color: var(--status-live-color);
    background: var(--status-live-bg);
}

.status-badge--mini[data-status="on-track"] {
    border-color: var(--status-on-track-border);
    color: var(--status-on-track-color);
    background: var(--status-on-track-bg);
}

.status-badge--mini[data-status="at-risk"] {
    border-color: var(--status-at-risk-border);
    color: var(--status-at-risk-color);
    background: var(--status-at-risk-bg);
}

.status-badge--mini[data-status="hit"],
.status-badge--mini[data-status="final"],
.status-badge--mini[data-status="win"] {
    border-color: var(--status-hit-border);
    color: var(--status-hit-color);
    background: var(--status-hit-bg);
}

.status-badge--mini[data-status="miss"],
.status-badge--mini[data-status="loss"] {
    border-color: var(--status-miss-border);
    color: var(--status-miss-color);
    background: var(--status-miss-bg);
}

.status-badge--mini[data-status="push"],
.status-badge--mini[data-status="void"] {
    border-color: var(--status-push-border);
    color: var(--status-push-color);
    background: var(--status-push-bg);
}

/* Mini live indicator dot */
.status-badge--mini[data-status="live"]::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff3333;
}

/* ==========================================================================
   Live Count Indicator
   --------------------------------------------------------------------------
   Badge showing how many legs are live in a parlay.
   Used in parlay row headers.
   ========================================================================== */

.live-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4ab6ff;
    background: rgba(74, 182, 255, 0.15);
    border: 1px solid rgba(74, 182, 255, 0.4);
    white-space: nowrap;
    line-height: 1.3;
}

/* Live indicator dot before text */
.live-count::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff4444;
    animation: pulsatingGlow 1s ease-in-out infinite;
}

/* Pulsating live count */
.live-count.pulsating {
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 transparent;
    }
    50% {
        opacity: 0.92;
        box-shadow: 0 0 3px 1px currentColor;
    }
}

@keyframes pulsatingGlow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}
/**
 * Theme Toggle Styles
 * Styling for the theme switcher button
 */

.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition-normal);
    overflow: hidden;
}

.theme-toggle:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.theme-toggle:active {
    transform: scale(0.98);
}

.theme-toggle .theme-icon {
    font-size: 18px;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.theme-toggle:hover .theme-icon {
    transform: rotate(180deg);
}

.theme-toggle .theme-label {
    display: none;
}

@media (min-width: 768px) {
    .theme-toggle .theme-label {
        display: inline;
        font-weight: 500;
        color: var(--color-text-secondary);
    }
}

/**
 * Export/Import Controls
 */

.export-import-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.export-import-controls button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.export-import-controls button:hover {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.export-import-controls button:active {
    transform: scale(0.95);
}

.export-import-controls .icon {
    font-size: 16px;
}

.export-import-controls .label {
    display: none;
}

@media (min-width: 768px) {
    .export-import-controls .label {
        display: inline;
    }
}

@media (max-width: 480px) {
    .export-import-controls {
        gap: 4px;
        padding: 4px;
    }
    
    .export-import-controls button {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* Toolbar integration */
.filters-toolbar,
.dashboard-toolbar,
.main-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Integration with nav-actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-actions .theme-toggle {
    margin-right: 8px;
}
/* ==========================================================================
   Page Layout - Active Picks Dashboard
   --------------------------------------------------------------------------
   Handles page-level layout, backgrounds, and main container styling
   ========================================================================== */

:root {
    --layout-gutter: clamp(24px, 4vw, 60px);
    --hero-band-height: clamp(220px, 32vh, 320px);
    --hero-bear-image: url("../../JB_Bearish_Market_FULL_page.png");
}

/* ===== PAGE GLOW EFFECT ===== */
body.page-glow {
    /* Subtle ambient glow emanating from edges */
}

body.page-glow::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -3;
    background:
        /* Top edge glow - enhanced forest green */
        radial-gradient(ellipse 120% 30% at 50% 0%, rgba(var(--color-primary-bright-rgb), 0.12) 0%, rgba(0, 143, 88, 0.05) 40%, transparent 70%),
        /* Bottom edge glow - deeper forest green */
        radial-gradient(ellipse 120% 25% at 50% 100%, rgba(0, 143, 88, 0.10) 0%, rgba(34, 100, 70, 0.04) 35%, transparent 70%),
        /* Left edge glow - metallic green-cyan blend */
        radial-gradient(ellipse 25% 80% at 0% 50%, rgba(0, 188, 212, 0.08) 0%, rgba(0, 143, 88, 0.04) 40%, transparent 70%),
        /* Right edge glow - bright emerald */
        radial-gradient(ellipse 25% 80% at 100% 50%, rgba(var(--color-primary-bright-rgb), 0.09) 0%, rgba(60, 255, 181, 0.03) 40%, transparent 70%);
    opacity: 1;
    animation: pageGlowPulse 8s ease-in-out infinite, glowShimmer 12s ease-in-out infinite;
    /* REFINEMENT: GPU acceleration for better performance */
    will-change: opacity;
    transform: translateZ(0);
}

/* ===== GLOW SHIMMER ANIMATION ===== */
@keyframes glowShimmer {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }
    33% {
        filter: brightness(1.15) saturate(1.2);
    }
    66% {
        filter: brightness(0.95) saturate(0.9);
    }
}

@keyframes pageGlowPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ===== METALLIC SHIMMER ANIMATION ===== */
@keyframes metallicShimmer {
    0%, 100% {
        filter: brightness(1) saturate(1);
        opacity: 0.92;
    }
    33% {
        filter: brightness(1.12) saturate(1.15);
        opacity: 0.96;
    }
    66% {
        filter: brightness(0.95) saturate(0.9);
        opacity: 0.88;
    }
}

/* ===== RIPPLE EFFECT ANIMATION ===== */
@keyframes rippleEffect {
    0%, 100% {
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    25% {
        transform: scale(1.015);
        filter: blur(1px) brightness(1.05);
    }
    50% {
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    75% {
        transform: scale(1.015);
        filter: blur(1px) brightness(1.05);
    }
}

/* ===== FULL-PAGE BACKGROUND ===== */
body.page-active-picks {
    background-color: var(--color-bg-deep, #030b16);
    background-image: var(--hero-bear-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.page-active-picks::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    /* Metallic Forest Green Overlay with In-Place Shimmer */
    background-image:
        /* Metallic forest green accent spots - these will pulse in place */
        radial-gradient(ellipse at 28% 12%, rgba(0, 143, 88, 0.18) 0%, transparent 52%),
        radial-gradient(ellipse at 76% 32%, rgba(var(--color-primary-bright-rgb), 0.14) 4%, transparent 60%),
        radial-gradient(ellipse at 15% 10%, rgba(34, 100, 70, 0.16) 0%, transparent 52%),
        radial-gradient(ellipse at 85% 20%, rgba(0, 120, 80, 0.12) 0%, transparent 48%),
        radial-gradient(ellipse at 50% 50%, rgba(60, 255, 181, 0.08) 0%, transparent 65%),
        /* Base metallic overlay */
        linear-gradient(185deg, rgba(6, 12, 20, 0.30) 0%, rgba(5, 15, 18, 0.45) 36%, rgba(3, 8, 14, 0.60) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: transparent;
    background-blend-mode: screen, screen, screen, screen, screen, normal;
    z-index: -1;
    pointer-events: none;
    opacity: 0.92;
    animation: metallicShimmer 8s ease-in-out infinite, rippleEffect 6s ease-in-out infinite;
    /* REFINEMENT: GPU acceleration for better performance */
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* ===== PAGE-SPECIFIC STACKING CONTEXTS ===== */

body.page-active-picks .brand-nav {
    top: 12px;
    margin-top: 0;
    padding-top: 0;
}

/* REFINEMENT: Ensure background layers don't block interactions */
body.page-glow::after,
body.page-active-picks::before,
.main-container::before {
    pointer-events: none !important;
}

/* Ensure sticky table headers sit above background & content bands */
/* Using z-index scale from variables.css but allow dropdowns to escape */
body.page-active-picks .picks-table thead {
    z-index: var(--z-sticky-header);
}

body.page-active-picks .picks-table thead th {
    /* No z-index here - prevents creating stacking context that traps dropdowns */
    position: relative; /* Needed for dropdown absolute positioning fallback */
}

/* ===== MAIN CONTAINER ===== */
.main-container {
    width: 100%;
    margin: 0;
    padding: var(--hero-safe-top) var(--layout-gutter) 20px; /* Lift content off hero art */
    position: relative;
    z-index: 10;
    /* Allow page to scroll with full dashboard height */
    overflow: visible;
    min-height: calc(100vh - 40px); /* Account for top/bottom padding */
    pointer-events: auto; /* CRITICAL FIX: Ensure main content accepts clicks */
}

/* ===== METALLIC FOREST GREEN ACCENT LAYER WITH RIPPLE ===== */
.main-container::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    /* Rippling metallic forest green gradient overlay */
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 143, 88, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(var(--color-primary-bright-rgb), 0.06) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(34, 100, 70, 0.05) 0%, transparent 50%);
    opacity: 0.6;
    animation: metallicPulse 10s ease-in-out infinite, rippleWave 4s ease-in-out infinite;
}

/* ===== RIPPLE WAVE ANIMATION ===== */
@keyframes rippleWave {
    0%, 100% {
        transform: scale(1) translateZ(0);
        filter: blur(0px);
    }
    50% {
        transform: scale(1.02) translateZ(0);
        filter: blur(2px);
    }
}

/* ===== METALLIC PULSE ANIMATION ===== */
@keyframes metallicPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Background overlay consolidated into body::before for seamless full-viewport coverage */

/* ===== LAYOUT CONTAINERS ===== */
.main-dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: clamp(9px, 1.5vw, 16px);
    margin: 0 auto;
    width: min(100%, 1900px); /* Full width within gutter for precise centering */
    position: relative;
    z-index: 10;
}

.dashboard-topline {
    --dashboard-topline-height: 76px;
    display: flex;
    flex-direction: row;
    align-items: center; /* REFINEMENT: Changed from flex-end - better vertical balance */
    justify-content: flex-start; /* Pack elements to the left */
    gap: 12px; /* REFINEMENT: Increased from 8px - better breathing room */
    width: 100%;
    margin-bottom: 20px; /* Increased spacing before table */
    position: relative;
    z-index: 200;
}

/* Ensure brand header is visible and properly sized */
.dashboard-topline .brand-header-inline {
    flex: 0 0 auto; /* Don't grow, don't shrink, use natural size */
}

.dashboard-topline .kpi-tiles {
    flex: 0 0 auto; /* Don't grow, don't shrink, use natural size */
}

.dashboard-topline .date-toggles-container {
    flex: 0 0 auto; /* Don't grow, don't shrink, use natural size */
}

.brand-stack {
    display: flex;
    align-items: flex-start;
    gap: clamp(18px, 3vw, 32px);
    flex: 1 1 340px;
    min-width: 300px;
}

.brand-logo {
    width: clamp(100px, 12vw, 140px);
    height: auto;
    filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.brand-logo:hover {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 16px 36px rgba(var(--color-primary-bright-rgb), 0.35));
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.brand-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.625rem, 2.8vw, 2.45rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(236, 248, 255, 0.92);
    text-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}

.brand-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(0.72rem, 1.2vw, 0.9rem);
    letter-spacing: 0.46em;
    text-transform: uppercase;
    color: rgba(214, 236, 242, 0.62);
}

.brand-updated {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(0.7rem, 1vw, 0.82rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(214, 236, 242, 0.54);
}

#last-updated-timestamp {
    color: rgba(224, 255, 246, 0.9);
}

/* KPI tiles are now directly in dashboard-topline, no separate container needed */
.kpi-and-filters {
    display: none; /* Hide old container */
}

.topline-utilities {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 28px);
    flex: 1;
    position: relative;
    z-index: 190;
}

/* Note: .date-toggles-container base styling is in date-toggles.css
   Grid positioning is handled by .dashboard-topline .date-toggles-container above */

/* Ensure stacking context for other shared elements */
header,
main,
.main-dashboard-layout,
.table-container,
nav {
    position: relative;
    z-index: 10;
}

/* ===== RESPONSIVE LAYOUT ===== */
@media (max-width: 1400px) {
    .main-dashboard-layout {
        width: 100%;
    }

    .kpi-and-filters {
        min-width: 0;
    }
}

@media (max-width: 1200px) {
    .main-container {
        padding: var(--hero-safe-top) var(--layout-gutter) 15px; /* Preserve hero offset */
    }

    .dashboard-topline {
        --dashboard-topline-height: 72px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
    
    .main-dashboard-layout {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .main-dashboard-layout {
        gap: clamp(12px, 3vw, 20px);
    }

    .dashboard-topline {
        flex-wrap: wrap;
    }

    .brand-stack {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .main-dashboard-layout {
        gap: clamp(11px, 3vw, 16px);
    }

    .main-container {
        padding: var(--hero-safe-top) var(--layout-gutter) 15px;
    }

    .dashboard-topline {
        --dashboard-topline-height: 66px;
        margin-bottom: 6px; /* Tight spacing above the table */
    }

    .topline-utilities {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .dashboard-topline .date-toggles-container {
        align-self: stretch;
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .main-dashboard-layout {
        gap: 12px;
    }

    .main-container {
        padding: var(--hero-safe-top) var(--layout-gutter) 12px;
    }

    .dashboard-topline {
        margin-bottom: 6px; /* Tight spacing above the table */
    }
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(var(--color-primary-bright-rgb), 0.85) 0%,
        rgba(var(--color-accent-rgb), 0.9) 50%,
        rgba(0, 255, 170, 0.98) 100%
    );
    z-index: 9999998;
    box-shadow: 0 0 10px rgba(var(--color-primary-bright-rgb), 0.6), 0 0 20px rgba(var(--color-primary-bright-rgb), 0.3);
    transition: width 0.1s ease-out;
}

/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: rgba(8, 12, 22, 0.85);
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, border-color 0.2s ease;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.back-to-top::before {
    content: '↑';
    font-size: 16px;
    font-weight: 600;
    color: rgba(var(--color-primary-bright-rgb), 0.8);
    line-height: 1;
    font-family: 'Cormorant Garamond', Georgia, serif;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: rgba(8, 12, 22, 0.95);
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    box-shadow: 0 4px 12px rgba(var(--color-primary-bright-rgb), 0.2);
}

.back-to-top:hover::before {
    color: rgba(var(--color-primary-bright-rgb), 1);
}

.back-to-top:active {
    transform: translateY(1px);
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 36px;
        height: 36px;
    }

    .back-to-top::before {
        font-size: 14px;
    }
}


/* ==========================================================================
   UNIFIED FILTER SYSTEM v2.1 - Integrated Design System
   --------------------------------------------------------------------------
   Uses tokens from variables.css for consistency across dashboard
   ========================================================================== */

/* ===== FILTER-SPECIFIC TOKENS (extend variables.css) ===== */
:root {
    /* Panel - uses bg tokens from variables.css */
    --filter-panel-bg: var(--color-bg-panel, rgba(8, 17, 33, 0.98));
    --filter-panel-border: rgba(var(--color-primary-rgb), 0.22);
    --filter-panel-shadow:
        0 16px 48px rgba(0, 0, 0, 0.65),
        0 0 1px rgba(var(--color-primary-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* Cards */
    --filter-card-bg: rgba(0, 0, 0, 0.35);
    --filter-card-border: var(--border-subtle, 1px solid rgba(255, 255, 255, 0.08));
    --filter-card-hover-bg: rgba(var(--color-primary-rgb), 0.12);

    /* Pills */
    --filter-pill-bg: rgba(255, 255, 255, 0.06);
    --filter-pill-border: rgba(255, 255, 255, 0.1);
    --filter-pill-hover-bg: rgba(var(--color-primary-rgb), 0.15);
    --filter-pill-active-bg: rgba(var(--color-primary-rgb), 0.22);
    --filter-pill-active-border: rgba(var(--color-primary-rgb), 0.6);

    /* Inputs */
    --filter-input-bg: rgba(0, 0, 0, 0.45);
    --filter-input-border: rgba(255, 255, 255, 0.12);
    --filter-input-focus-border: rgba(var(--color-primary-rgb), 0.6);
    --filter-input-focus-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);

    /* Typography - inherit from variables.css */
    --filter-text-primary: var(--color-text-primary);
    --filter-text-secondary: var(--color-text-secondary);
    --filter-text-muted: var(--color-text-muted);
    --filter-text-accent: var(--color-primary-bright);
    --filter-text-hint: rgba(140, 160, 175, 0.7);
}

/* ==========================================================================
   FILTER TRIGGER BUTTON - Compact Sleek Design
   ========================================================================== */

.th-header-shell .th-filter-btn {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: rgba(var(--color-primary-bright-rgb), 0.45);
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s ease;
    padding: 0;
    outline: none;
    font-size: 0;
}

/* Compact 3-dot icon */
.th-header-shell .th-filter-btn::before {
    content: "";
    width: 3px;
    height: 11px;
    background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.2px);
    background-size: 3px 4px;
    background-repeat: repeat-y;
    background-position: center;
    transition: transform 0.12s ease, color 0.12s ease;
}

.th-header-shell:hover .th-filter-btn {
    opacity: 1;
    color: rgba(var(--color-primary-bright-rgb), 0.75);
}

.th-header-shell .th-filter-btn:hover {
    opacity: 1;
    color: #00ffaa;
    background: rgba(var(--color-primary-bright-rgb), 0.1);
}

.th-header-shell .th-filter-btn[aria-expanded="true"] {
    opacity: 1;
    color: #00ffaa;
    background: rgba(var(--color-primary-bright-rgb), 0.15);
}

.th-header-shell .th-filter-btn[aria-expanded="true"]::before {
    content: "×";
    width: auto;
    height: auto;
    background-image: none;
    font-family: var(--filter-font-ui);
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
}

/* Active filter indicator - subtle dot badge */
.picks-table thead th.has-active-filter .th-filter-btn {
    opacity: 1;
    color: #00ffaa;
}

.picks-table thead th.has-active-filter .th-filter-btn::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: #00ffaa;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 255, 170, 0.8);
    animation: filterActivePulse 2s ease-in-out infinite;
}

@keyframes filterActivePulse {
    0%, 100% { box-shadow: 0 0 4px rgba(0, 255, 170, 0.6); transform: scale(1); }
    50% { box-shadow: 0 0 8px rgba(0, 255, 170, 0.9); transform: scale(1.1); }
}


/* ==========================================================================
   UNIFIED FILTER PANEL BASE - Clean Card Design
   ========================================================================== */

/* Ensure parent containers allow northward overflow */
.picks-table {
    position: relative;
}

.picks-table thead {
    overflow: visible !important;
    position: relative;
}

.picks-table thead th {
    overflow: visible !important;
    position: relative;
}

.th-header-shell {
    position: relative;
    overflow: visible !important;
}

.th-filter-dropdown,
.th-filter-dropdown.nav-panel-dropdown {
    /* Positioning - above header (northward) */
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: var(--z-dropdown);
    transform-origin: bottom center;

    /* Default sizing */
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    max-height: 380px;

    /* Vegas sportsbook dark panel using design variables */
    background: var(--color-bg-panel);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);

    /* Typography using design system variables */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    font-weight: var(--filter-weight-regular);
    line-height: var(--filter-leading-tight);
    letter-spacing: var(--filter-tracking-normal);
    color: var(--filter-text-primary);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    /* Compact layout */
    display: none;
    flex-direction: column;
    overflow: hidden;
    padding: 0;

    transform-origin: top right;
    pointer-events: auto;
}

.th-filter-dropdown[hidden] {
    display: none !important;
}

.th-filter-dropdown.open {
    display: flex !important;
    animation: filterReveal 0.15s ease-out;
}

/* Centered dropdowns need different animation to preserve translateX */
.picks-table thead th:nth-child(3) .th-filter-dropdown.open,
.picks-table thead th:nth-child(4) .th-filter-dropdown.open,
.picks-table thead th:nth-child(5) .th-filter-dropdown.open {
    animation: filterReveal 0.15s ease-out;
}

@keyframes filterReveal {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes filterRevealCenter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Top accent line - subtle */
.th-filter-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--color-primary-bright-rgb), 0.2) 30%,
        rgba(var(--color-primary-bright-rgb), 0.3) 50%,
        rgba(var(--color-primary-bright-rgb), 0.2) 70%,
        transparent 100%
    );
    border-radius: 6px 6px 0 0;
}


/* ==========================================================================
   FILTER HEADER TOOLBAR - Elegant Minimal Design
   ========================================================================== */

.filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.15);
}

.filter-toolbar-title {
    font-family: var(--filter-font-display);
    font-size: var(--filter-text-xs);
    font-weight: var(--filter-weight-semibold);
    letter-spacing: var(--filter-tracking-wider);
    text-transform: uppercase;
    color: var(--filter-text-accent);
    line-height: 1;
}

.filter-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ==========================================================================
   FILTER CONTENT BODY - Refined Scrollable Area
   ========================================================================== */

.filter-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-primary-bright-rgb), 0.3) transparent;
    background: transparent;
}

.filter-body::-webkit-scrollbar {
    width: 4px;
}

.filter-body::-webkit-scrollbar-track {
    background: transparent;
}

.filter-body::-webkit-scrollbar-thumb {
    background: rgba(var(--color-primary-bright-rgb), 0.35);
    border-radius: 2px;
}

.filter-body::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-primary-bright-rgb), 0.5);
}

.filter-body--compact {
    padding-top: 10px;
    padding-bottom: 10px;
}

.filter-body--with-divider {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   FILTER SECTION - Minimal Inline Style
   ========================================================================== */

.filter-section {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: none;
    position: relative;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section--flush {
    margin-bottom: 0;
}

.filter-section + .filter-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.filter-section-label {
    display: none; /* Hide labels - options are self-explanatory */
}


/* ==========================================================================
   FILTER PILLS - Enhanced Visibility
   ========================================================================== */

.filter-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.filter-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    min-height: 32px;

    /* Typography using design variables */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    font-weight: var(--filter-weight-medium);
    line-height: var(--filter-leading-tight);
    letter-spacing: var(--filter-tracking-normal);
    text-transform: none;
    color: var(--filter-text-secondary);

    /* Clean button styling */
    background: var(--filter-pill-bg);
    border: 1px solid var(--filter-pill-border);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-micro);
}

.filter-pill input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.filter-pill:hover {
    color: var(--filter-text-primary);
    background: var(--filter-pill-hover-bg);
    border-color: rgba(var(--color-primary-rgb), 0.3);
}

.filter-pill:has(input:checked) {
    color: var(--filter-text-accent);
    background: var(--filter-pill-active-bg);
    border-color: var(--filter-pill-active-border);
    box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.2);
    font-weight: var(--filter-weight-semibold);
}


/* ==========================================================================
   FILTER OPTIONS LIST - Enhanced Readability
   ========================================================================== */

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-primary-bright-rgb), 0.3) transparent;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    min-height: 34px;

    /* Typography using design variables */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    font-weight: var(--filter-weight-regular);
    line-height: var(--filter-leading-normal);
    letter-spacing: var(--filter-tracking-tight);
    color: var(--filter-text-secondary);

    /* Clean row styling */
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: var(--transition-micro);
}

.filter-option:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    color: rgba(232, 240, 242, 0.95);
}

.filter-option:has(input:checked) {
    color: rgba(var(--color-primary-bright-rgb), 1);
    background: rgba(0, 143, 88, 0.16);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    box-shadow: 0 0 6px rgba(var(--color-primary-bright-rgb), 0.12);
    font-weight: var(--filter-weight-medium);
}

.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
    width: 15px;
    height: 15px;
    accent-color: #00d689;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.filter-option span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}


/* ==========================================================================
   FILTER SELECT DROPDOWN - Clean Compact
   ========================================================================== */

.filter-select,
.compact-select {
    width: 100%;
    padding: 6px 26px 6px 10px;
    min-height: 30px;

    /* Typography - Sleek sportsbook style */
    font-family: var(--filter-font-body);
    font-size: var(--sportsbook-label-size);
    font-weight: var(--filter-weight-regular);
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--filter-text-primary);

    /* Styling */
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%2300d689' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    appearance: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-select--auto {
    width: auto;
    min-width: 100px;
}

.filter-select:hover,
.compact-select:hover {
    border-color: rgba(var(--color-primary-bright-rgb), 0.25);
    background-color: rgba(0, 0, 0, 0.45);
}

.filter-select:focus,
.compact-select:focus {
    outline: none;
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    box-shadow: 0 0 0 2px rgba(0, 143, 88, 0.12);
}


/* ==========================================================================
   FILTER SEARCH INPUT - Minimal Style
   ========================================================================== */

.filter-search {
    width: 100%;
    padding: 6px 10px;
    min-height: 30px;

    /* Typography - Sleek sportsbook style */
    font-family: var(--filter-font-body);
    font-size: var(--sportsbook-label-size);
    font-weight: var(--filter-weight-regular);
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--filter-text-primary);

    /* Styling */
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: all 0.15s ease;
}

.filter-search::placeholder {
    color: rgba(140, 160, 175, 0.65);
    font-style: normal;
}

.filter-search:hover {
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    background: rgba(0, 0, 0, 0.45);
}

.filter-search:focus {
    outline: none;
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 0 2px rgba(0, 143, 88, 0.12);
}


/* ==========================================================================
   FILTER ACTION BUTTONS - Minimal (Auto-apply, no Apply button needed)
   ========================================================================== */

.filter-actions {
    display: none; /* Hide footer - filters auto-apply on click */
}

/* Clear/Reset button - compact style */
.filter-btn-reset,
.th-filter-reset {
    padding: 3px 6px;
    min-height: 20px;

    /* Compact typography */
    font-family: var(--filter-font-body);
    font-size: 9px;
    font-weight: var(--filter-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(144, 164, 174, 0.8);

    /* Sleek styling */
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.filter-btn-reset:hover,
.th-filter-reset:hover {
    color: rgba(232, 240, 242, 0.95);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Apply button - HIDDEN (filters auto-apply) */
.filter-btn-apply,
.th-filter-apply {
    display: none !important;
}

/* Inline toolbar actions */
.filter-toolbar-actions .th-filter-reset {
    padding: 4px 8px;
    font-size: var(--sportsbook-caption-size);
    min-height: 24px;
}


/* ==========================================================================
   SELECT ALL TOGGLE - Minimal
   ========================================================================== */

.filter-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;

    /* Typography - Cormorant Garamond for consistency */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-xs);
    font-weight: var(--filter-weight-semibold);
    letter-spacing: var(--filter-tracking-wide);
    text-transform: uppercase;
    color: var(--filter-text-muted);

    /* Styling */
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--filter-card-border);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.filter-select-all:hover {
    background: var(--filter-card-hover-bg);
    color: var(--filter-text-primary);
}

.filter-select-all input[type="checkbox"] {
    width: 10px;
    height: 10px;
    accent-color: #00d689;
    margin: 0;
    cursor: pointer;
}


/* ==========================================================================
   FILTER GRID - Clean Multi-column
   ========================================================================== */

.filter-grid {
    display: grid;
    gap: 10px;
}

.filter-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.filter-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.filter-grid-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--filter-card-bg);
    border: 1px solid var(--filter-card-border);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.filter-grid-column:hover {
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    background: rgba(0, 0, 0, 0.4);
}

.filter-grid-column-title {
    font-family: var(--filter-font-display);
    font-size: var(--filter-text-xs);
    font-weight: var(--filter-weight-bold);
    letter-spacing: var(--filter-tracking-wider);
    text-transform: uppercase;
    color: var(--filter-text-accent);
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(var(--color-primary-bright-rgb), 0.15);
}

.filter-grid-options {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-primary-bright-rgb), 0.3) transparent;
}

/* Compact option for grid columns */
.filter-grid-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;

    /* Typography - Cormorant Garamond for consistency */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    font-weight: var(--filter-weight-medium);
    letter-spacing: var(--filter-tracking-tight);
    color: var(--filter-text-secondary);

    /* Styling */
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.filter-grid-option:hover {
    background: var(--filter-pill-hover-bg);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    color: var(--filter-text-primary);
}

.filter-grid-option:has(input:checked) {
    background: var(--filter-pill-active-bg);
    border-color: rgba(var(--color-primary-bright-rgb), 0.4);
    color: var(--filter-text-accent);
}

.filter-grid-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #00d689;
    margin: 0;
    cursor: pointer;
}


/* ==========================================================================
   EMPTY STATE - Clean Minimal
   ========================================================================== */

.filter-empty {
    padding: 12px;
    text-align: center;

    /* Typography - Cormorant Garamond for consistency */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    font-weight: var(--filter-weight-medium);
    color: var(--filter-text-hint);

    /* Styling */
    background: rgba(0, 0, 0, 0.1);
    border: 1px dashed rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}


/* ==========================================================================
   DATE FILTER - Compact 3-Column Design
   ========================================================================== */

#filter-date {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    max-height: none; /* No scrolling needed */
}

/* Integrated header with inline controls - NO SEPARATE ALL/CLEAR ROW */
.filter-header-integrated {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.15);
}

.filter-header-integrated .filter-title {
    font-family: var(--filter-font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--color-primary-bright-rgb), 0.9);
}

.filter-quick-actions {
    display: flex;
    gap: 6px;
}

.filter-action-btn {
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    color: rgba(144, 164, 174, 0.8);
    cursor: pointer;
    transition: var(--transition-micro);
}

.filter-action-btn:hover {
    background: rgba(0, 143, 88, 0.15);
    border-color: rgba(var(--color-primary-bright-rgb), 0.3);
    color: rgba(232, 240, 242, 0.95);
}

.date-filter-select-all-compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;

    /* Typography - Cormorant Garamond for consistency */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    font-weight: var(--filter-weight-semibold);
    letter-spacing: var(--filter-tracking-wide);
    text-transform: uppercase;
    color: var(--filter-text-muted);

    /* Styling */
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--filter-card-border);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.date-filter-select-all-compact:hover {
    background: var(--filter-card-hover-bg);
    border-color: rgba(var(--color-primary-bright-rgb), 0.25);
    color: var(--filter-text-primary);
}

.date-filter-select-all-compact input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #00d689;
    margin: 0;
}

.date-filter-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.date-filter-toolbar-actions .th-filter-reset,
.date-filter-toolbar-actions .th-filter-apply {
    padding: 3px 8px;
    font-size: var(--filter-text-xxs);
}


.date-filter-categories {
    padding: 10px;
    overflow: hidden; /* NO SCROLLING */
    max-height: none;
    background: transparent;
}

/* Efficient tab-based date selection */
.date-filter-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Quick date range selector */
.date-range-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.date-range-btn {
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: var(--filter-text-secondary);
    cursor: pointer;
    transition: var(--transition-micro);
}

.date-range-btn:hover {
    background: rgba(0, 143, 88, 0.12);
    border-color: rgba(var(--color-primary-bright-rgb), 0.25);
    color: var(--filter-text-primary);
}

.date-range-btn.active {
    background: rgba(0, 143, 88, 0.2);
    border-color: rgba(var(--color-primary-bright-rgb), 0.4);
    color: var(--filter-text-accent);
}

/* Compact time slots */
.time-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.time-slot {
    padding: 5px;
    font-size: 9px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    color: var(--filter-text-secondary);
    cursor: pointer;
    transition: var(--transition-micro);
}

.time-slot:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
}

.time-slot.active {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    color: var(--filter-text-accent);
}

.date-filter-grid--sleek .date-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--filter-card-bg);
    border: 1px solid var(--filter-card-border);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.date-filter-grid--sleek .date-filter-group:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
}

.date-filter-grid--sleek .date-filter-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--filter-font-display);
    font-size: var(--filter-text-xs);
    font-weight: var(--filter-weight-bold);
    letter-spacing: var(--filter-tracking-wider);
    text-transform: uppercase;
    color: var(--filter-text-accent);
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(var(--color-primary-bright-rgb), 0.15);
}

.date-filter-count-badge {
    font-size: var(--filter-text-xxs);
    font-weight: var(--filter-weight-medium);
    color: var(--filter-text-hint);
    margin-left: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 10px;
}

.date-filter-grid--sleek .date-filter-options {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: none;
    overflow-y: visible;
}

.date-filter-grid--sleek .date-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;

    /* Typography - Cormorant Garamond for consistency */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    font-weight: var(--filter-weight-medium);
    letter-spacing: var(--filter-tracking-tight);
    color: var(--filter-text-secondary);
    line-height: 1.3;

    /* Styling */
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.date-filter-grid--sleek .date-filter-option:hover {
    background: var(--filter-pill-hover-bg);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    color: var(--filter-text-primary);
}

.date-filter-grid--sleek .date-filter-option:has(input:checked) {
    background: var(--filter-pill-active-bg);
    border-color: rgba(var(--color-primary-bright-rgb), 0.4);
    color: var(--filter-text-accent);
}

.date-filter-grid--sleek .date-filter-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #00d689;
    margin: 0;
    flex-shrink: 0;
}

.date-filter-grid--sleek .date-filter-option span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-filter-empty {
    padding: 10px;
    text-align: center;
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    color: var(--filter-text-hint);
    background: rgba(0, 0, 0, 0.1);
    border: 1px dashed rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}


/* ==========================================================================
   MATCHUP FILTER - Compact Design
   ========================================================================== */

#filter-matchup {
    min-width: 260px;
    max-width: 340px;
}

/* Teams section */
.filter-card--teams {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 10px;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
}

.filter-card--teams[data-visible="true"] {
    max-height: 240px;
    opacity: 1;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.26) 100%);
    border: 1px solid var(--filter-card-border);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    margin: 0;
}

.teams-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.teams-league-badge {
    padding: 3px 8px;

    /* Typography - Cormorant Garamond for consistency */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-xs);
    font-weight: var(--filter-weight-bold);
    letter-spacing: var(--filter-tracking-wide);
    text-transform: uppercase;
    color: var(--filter-text-accent);

    /* Styling */
    background: rgba(var(--color-primary-bright-rgb), 0.12);
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.25);
    border-radius: 10px;
}

.matchup-teams-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-primary-bright-rgb), 0.25) transparent;
}

.team-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;

    /* Typography - Cormorant Garamond for consistency */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    font-weight: var(--filter-weight-medium);
    letter-spacing: var(--filter-tracking-tight);
    color: var(--filter-text-secondary);

    /* Styling */
    background: rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.team-filter-option:hover {
    background: var(--filter-pill-hover-bg);
    color: var(--filter-text-primary);
}

.team-filter-option:has(input:checked) {
    background: var(--filter-pill-active-bg);
    color: var(--filter-text-primary);
}

.team-filter-option input[type="checkbox"] {
    width: 10px;
    height: 10px;
    accent-color: #00d689;
    margin: 0;
}


/* ==========================================================================
   PICK FILTER - Compact
   ========================================================================== */

#filter-pick {
    min-width: 220px;
    max-width: 280px;
}


/* ==========================================================================
   SEGMENT FILTER - Compact
   ========================================================================== */

#filter-segment {
    min-width: 200px;
    max-width: 260px;
}


/* ==========================================================================
   RISK/WIN FILTER - Compact 2-Column
   ========================================================================== */

#filter-risk {
    min-width: 280px;
    max-width: 360px;
}


/* ==========================================================================
   STATUS FILTER - Compact 2-Column
   ========================================================================== */

#filter-status {
    min-width: 240px;
    max-width: 300px;
}


/* ==========================================================================
   FILTER CHIPS - Compact Active Filters Display
   ========================================================================== */

.table-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 0 8px;

    /* Styling */
    background: rgba(var(--color-primary-bright-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.2);
    border-radius: 8px;
}

.table-filter-chips[data-has-chips="false"] {
    display: none;
}

.filter-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;

    /* Typography - Cormorant Garamond for consistency */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-base);
    font-weight: var(--filter-weight-semibold);
    letter-spacing: var(--filter-tracking-tight);
    color: var(--filter-text-primary);

    /* Styling */
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.45);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip-btn::after {
    content: '×';
    font-size: 14px;
    font-weight: 400;
    opacity: 0.6;
    color: var(--filter-text-accent);
    margin-left: 2px;
}

.filter-chip-btn:hover {
    background: rgba(var(--color-primary-bright-rgb), 0.15);
    border-color: rgba(var(--color-primary-bright-rgb), 0.6);
    box-shadow: 0 0 10px rgba(var(--color-primary-bright-rgb), 0.2);
}

.filter-chip-btn:hover::after {
    opacity: 1;
}


/* ==========================================================================
   LEGACY CLASS SUPPORT
   ========================================================================== */

/* Ticket type pills */
.ticket-type-copy {
    margin-bottom: 10px;
}

.ticket-type-eyebrow {
    display: block;
    font-family: var(--filter-font-display);
    font-size: var(--filter-text-xs);
    font-weight: var(--filter-weight-bold);
    letter-spacing: var(--filter-tracking-wider);
    text-transform: uppercase;
    color: var(--filter-text-accent);
    margin-bottom: 4px;
}

.ticket-type-hint {
    display: block;
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-xs);
    font-weight: var(--filter-weight-normal);
    letter-spacing: var(--filter-tracking-normal);
    color: var(--filter-text-muted);
}

.ticket-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ticket-type-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;

    /* Typography - Cormorant Garamond for consistency */
    font-family: var(--filter-font-body);
    font-size: var(--filter-text-sm);
    font-weight: var(--filter-weight-semibold);
    letter-spacing: var(--filter-tracking-wide);
    text-transform: uppercase;
    color: var(--filter-text-secondary);

    /* Styling */
    background: var(--filter-pill-bg);
    border: 1px solid var(--filter-pill-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ticket-type-pill input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.ticket-type-pill:hover {
    color: var(--filter-text-primary);
    background: rgba(0, 143, 88, 0.15);
    border-color: rgba(0, 143, 88, 0.4);
}

.ticket-type-pill:has(input:checked) {
    color: var(--filter-text-primary);
    background: var(--filter-pill-active-bg);
    border-color: var(--filter-pill-active-border);
}

.ticket-type-pill--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
}

/* Filter card legacy styles */
.filter-card {
    padding: 12px 14px;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.filter-card:last-of-type,
.filter-card--actions {
    border-bottom: none;
}

.filter-card--actions {
    padding: 10px 14px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.filter-card--actions .th-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    margin: 0;
    border: none;
}

/* Hide old meta strips */
.filter-meta-strip {
    display: none !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
    .th-header-shell .th-filter-btn {
        right: 5px;
        padding: 2px;
    }
    
    .th-header-shell .th-filter-btn::before {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .th-header-shell .th-filter-btn {
        right: 4px;
        padding: 1px;
        opacity: 0.8;
        width: 26px;
        height: 26px;
    }
    
    .th-header-shell .th-filter-btn::before {
        font-size: 15px;
    }
    
    .th-filter-dropdown {
        min-width: 240px;
        max-width: 320px;
    }
    
    #filter-date {
        min-width: 340px;
        max-width: 400px;
    }
    
    .date-filter-grid--sleek {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .th-filter-dropdown,
    .th-filter-dropdown.nav-panel-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        min-width: 100% !important;
        max-width: 100% !important;
        max-height: 65vh;
        border-radius: 16px 16px 0 0 !important;
        transform: none;
    }
    
    .th-filter-dropdown::before {
        display: none;
    }
    
    .th-filter-dropdown.open {
        animation: filterSlideUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    @keyframes filterSlideUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Mobile drag handle */
    .th-filter-dropdown::after {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 4px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }
    
    .date-filter-grid--sleek {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .filter-grid--2col {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Larger touch targets on mobile */
    .filter-pill {
        padding: 10px 14px;
        font-size: var(--filter-text-sm);
        min-height: 40px;
    }
    
    .filter-option {
        padding: 10px 12px;
        min-height: 44px;
    }
    
    .filter-option input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
    
    .filter-body {
        padding: 12px 16px;
        max-height: calc(65vh - 120px);
    }
    
    .filter-toolbar {
        padding: 12px 16px;
    }
    
    .filter-toolbar-title {
        font-size: var(--filter-text-sm);
    }
    
    .filter-actions,
    .filter-card--actions .th-filter-actions {
        padding: 12px 16px;
    }
    
    .th-filter-apply,
    .th-filter-reset {
        padding: 12px 20px;
        font-size: var(--filter-text-sm);
        min-height: 44px;
    }
    
    /* Date filter mobile adjustments */
    .date-filter-toolbar {
        padding: 12px 16px;
    }
    
    .date-filter-select-all-compact {
        padding: 8px 12px;
        font-size: var(--filter-text-sm);
    }
    
    .date-filter-categories {
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .th-header-shell .th-filter-btn {
        right: 2px;
        padding: 1px;
    }
    
    .th-header-shell .th-filter-btn::before {
        font-size: 14px;
    }
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .th-filter-dropdown,
    .th-filter-dropdown.open,
    .th-header-shell .th-filter-btn,
    .filter-chip-btn,
    .filter-pill,
    .filter-option {
        transition: none;
        animation: none;
    }
}

@media (prefers-contrast: high) {
    .th-filter-dropdown {
        border-width: 2px;
        border-color: rgba(var(--color-primary-bright-rgb), 0.6);
    }
    
    .filter-pill:has(input:checked),
    .filter-option:has(input:checked) {
        border-width: 2px;
    }
}


/* ==========================================================================
   HIDE LEGACY ELEMENTS
   ========================================================================== */

.filters-section {
    display: none;
}

/* ==========================================================================
   INTEGRATED DATE FILTER - ENHANCED READABILITY
   ========================================================================== */

/* Remove all scrolling from date filter */
.date-filter-integrated {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    overflow: hidden !important;
    max-height: none !important;
    background: linear-gradient(180deg,
        rgba(8, 17, 33, 0.98) 0%,
        rgba(8, 17, 33, 0.95) 100%);
}

.date-filter-integrated > * {
    overflow: visible !important;
}

/* Integrated header with inline controls */
.filter-header-integrated {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(90deg,
        rgba(0, 143, 88, 0.08) 0%,
        rgba(0, 0, 0, 0.2) 100%);
    border-bottom: 1px solid rgba(var(--color-primary-bright-rgb), 0.2);
}

.filter-title {
    font-family: var(--filter-font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(var(--color-primary-bright-rgb), 1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.filter-quick-actions {
    display: flex;
    gap: 8px;
}

.filter-action-btn {
    padding: 5px 10px;
    font-family: var(--filter-font-body);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-action-btn:hover {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.4);
    color: rgba(232, 240, 242, 1);
    transform: translateY(-1px);
}

/* Date Range Selector - Enhanced Grid */
.date-range-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 2px solid rgba(var(--color-primary-bright-rgb), 0.08);
    position: relative;
}

/* Add section label for dates */
.date-range-selector::before {
    content: 'DATE RANGE';
    position: absolute;
    top: -8px;
    left: 14px;
    font-family: var(--filter-font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(var(--color-primary-bright-rgb), 0.6);
    background: rgba(8, 17, 33, 1);
    padding: 0 6px;
}

.date-range-btn {
    padding: 8px 6px;
    font-family: var(--filter-font-body);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: capitalize;
}

.date-range-btn:hover {
    background: rgba(0, 143, 88, 0.12);
    border-color: rgba(var(--color-primary-bright-rgb), 0.25);
    color: rgba(232, 240, 242, 1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.date-range-btn.active {
    background: linear-gradient(135deg,
        rgba(0, 143, 88, 0.25) 0%,
        rgba(0, 143, 88, 0.18) 100%);
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    color: rgba(var(--color-primary-bright-rgb), 1);
    font-weight: 700;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Compact Filter Sections with better spacing */
.filter-section-compact {
    padding: 12px 14px 10px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
}

.filter-section-compact:last-child {
    border-bottom: none;
    padding-bottom: 12px;
}

/* Section label with better hierarchy */
.section-label {
    font-family: var(--filter-font-body);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(var(--color-primary-bright-rgb), 0.5);
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(var(--color-primary-bright-rgb), 0.1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-label::before {
    content: '▸';
    color: rgba(var(--color-primary-bright-rgb), 0.3);
    font-size: 10px;
}

/* Time Slots Grid - Enhanced Layout */
.time-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Group time slots in pairs for better readability */
.time-slot {
    padding: 10px 8px;
    font-family: var(--filter-font-body);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: rgba(188, 208, 218, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.2;
}

/* Style for time ranges */
.time-slot small {
    font-size: 8px !important;
    opacity: 0.6;
    font-weight: 400;
    color: rgba(144, 164, 174, 0.8);
}

/* Remove icons for cleaner look with time ranges */
.time-slot::before {
    display: none;
}

.time-slot:hover {
    background: linear-gradient(135deg,
        rgba(0, 143, 88, 0.15) 0%,
        rgba(0, 143, 88, 0.1) 100%);
    border-color: rgba(var(--color-primary-bright-rgb), 0.3);
    color: rgba(232, 240, 242, 1);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.time-slot.active {
    background: linear-gradient(135deg,
        rgba(0, 143, 88, 0.22) 0%,
        rgba(0, 143, 88, 0.16) 100%);
    border-color: rgba(var(--color-primary-bright-rgb), 0.45);
    color: rgba(var(--color-primary-bright-rgb), 1);
    font-weight: 700;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.time-slot.active::before {
    opacity: 1;
}

.time-slot.live-indicator {
    background: linear-gradient(135deg,
        rgba(255, 0, 0, 0.2) 0%,
        rgba(255, 0, 0, 0.1) 100%);
    border-color: rgba(255, 0, 0, 0.4);
    color: #ff5555;
    font-weight: 700;
    animation: pulse-live 2s infinite;
    grid-column: span 2;
    font-size: 12px;
}

.time-slot.live-indicator small {
    display: none;
}

@keyframes pulse-live {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px rgba(255, 0, 0, 0);
    }
}

/* Sportsbook Chips - Enhanced Design with full names */
.sportsbook-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.book-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    font-family: var(--filter-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: rgba(188, 208, 218, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: capitalize;
}

.book-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.book-chip:hover {
    background: linear-gradient(135deg,
        rgba(0, 143, 88, 0.15) 0%,
        rgba(0, 143, 88, 0.1) 100%);
    border-color: rgba(var(--color-primary-bright-rgb), 0.3);
    color: rgba(232, 240, 242, 1);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.book-chip.active {
    background: linear-gradient(135deg,
        rgba(0, 143, 88, 0.22) 0%,
        rgba(0, 143, 88, 0.16) 100%);
    border-color: rgba(var(--color-primary-bright-rgb), 0.45);
    color: rgba(var(--color-primary-bright-rgb), 1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Add subtle glow to active chips */
.book-chip.active::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 5px;
    background: linear-gradient(135deg,
        rgba(var(--color-primary-bright-rgb), 0.2) 0%,
        transparent 100%);
    pointer-events: none;
    opacity: 0.5;
}

/* ==========================================================================
   INTEGRATED FILTER STYLES FOR ALL DROPDOWNS
   ========================================================================== */

/* Apply integrated styles to all filter dropdowns */
.filter-integrated {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    overflow: hidden !important;
    max-height: none !important;
    background: linear-gradient(180deg,
        rgba(8, 17, 33, 0.98) 0%,
        rgba(8, 17, 33, 0.95) 100%);
}

/* League Pills */
.league-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.league-pill {
    padding: 8px 4px;
    font-family: var(--filter-font-body);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.league-pill:hover {
    background: rgba(0, 143, 88, 0.12);
    border-color: rgba(var(--color-primary-bright-rgb), 0.25);
    color: rgba(232, 240, 242, 1);
    transform: translateY(-1px);
}

.league-pill.active {
    background: linear-gradient(135deg,
        rgba(0, 143, 88, 0.25) 0%,
        rgba(0, 143, 88, 0.18) 100%);
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    color: rgba(var(--color-primary-bright-rgb), 1);
    font-weight: 700;
}

/* Ticket Pills */
.ticket-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ticket-pill {
    padding: 8px 4px;
    font-family: var(--filter-font-body);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ticket-pill:hover {
    background: rgba(0, 143, 88, 0.12);
    border-color: rgba(var(--color-primary-bright-rgb), 0.25);
    color: rgba(232, 240, 242, 1);
    transform: translateY(-1px);
}

.ticket-pill.active {
    background: linear-gradient(135deg,
        rgba(0, 143, 88, 0.25) 0%,
        rgba(0, 143, 88, 0.18) 100%);
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    color: rgba(var(--color-primary-bright-rgb), 1);
}

/* Teams Search Box */
.teams-search-box {
    margin-bottom: 8px;
}

.team-search {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--filter-font-body);
    font-size: 11px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(232, 240, 242, 0.95);
    transition: all 0.15s ease;
}

.team-search::placeholder {
    color: rgba(144, 164, 174, 0.6);
}

.team-search:focus {
    outline: none;
    border-color: rgba(var(--color-primary-bright-rgb), 0.4);
    background: rgba(0, 0, 0, 0.5);
}

/* Teams Grid */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Custom scrollbar for teams grid */
.teams-grid::-webkit-scrollbar {
    width: 6px;
}

.teams-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.teams-grid::-webkit-scrollbar-thumb {
    background: rgba(var(--color-primary-bright-rgb), 0.3);
    border-radius: 3px;
}

.teams-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-primary-bright-rgb), 0.5);
}

.team-chip {
    padding: 6px 8px;
    font-family: var(--filter-font-body);
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.12s ease;
}

.team-chip:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    color: rgba(232, 240, 242, 1);
}

.team-chip.active {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    color: rgba(var(--color-primary-bright-rgb), 1);
}

/* Market Pills */
.market-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.market-pill {
    padding: 8px 6px;
    font-family: var(--filter-font-body);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
}

.market-pill:hover {
    background: rgba(0, 143, 88, 0.12);
    border-color: rgba(var(--color-primary-bright-rgb), 0.25);
    color: rgba(232, 240, 242, 1);
    transform: translateY(-1px);
}

.market-pill.active {
    background: linear-gradient(135deg,
        rgba(0, 143, 88, 0.25) 0%,
        rgba(0, 143, 88, 0.18) 100%);
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    color: rgba(var(--color-primary-bright-rgb), 1);
}

/* Segment Pills */
.segment-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.segment-pill {
    padding: 8px 4px;
    font-family: var(--filter-font-body);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
}

.segment-pill:hover {
    background: rgba(0, 143, 88, 0.12);
    border-color: rgba(var(--color-primary-bright-rgb), 0.25);
    color: rgba(232, 240, 242, 1);
    transform: translateY(-1px);
}

.segment-pill.active {
    background: linear-gradient(135deg,
        rgba(0, 143, 88, 0.25) 0%,
        rgba(0, 143, 88, 0.18) 100%);
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    color: rgba(var(--color-primary-bright-rgb), 1);
}

/* ==========================================================================
   COMPACT COLLAPSIBLE FILTERS
   ========================================================================== */

/* Compact date filter with collapsible sections */
.filter-compact {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
}

/* Compact date range buttons */
.date-range-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.date-btn {
    padding: 6px 4px;
    font-family: var(--filter-font-body);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.12s ease;
}

.date-btn:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    color: rgba(232, 240, 242, 1);
}

.date-btn.active {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    color: rgba(var(--color-primary-bright-rgb), 1);
}

/* Collapsible sections */
.filter-collapsible {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.collapse-toggle {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    color: rgba(188, 208, 218, 0.9);
    font-family: var(--filter-font-body);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.03);
}

.collapse-icon {
    font-size: 8px;
    transition: transform 0.2s ease;
}

.filter-collapsible:not(.collapsed) .collapse-icon {
    transform: rotate(90deg);
}

.selection-badge {
    margin-left: auto;
    padding: 2px 6px;
    background: rgba(0, 143, 88, 0.15);
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.2);
    border-radius: 3px;
    font-size: 8px;
    color: rgba(var(--color-primary-bright-rgb), 0.8);
}

.collapse-content {
    padding: 8px 10px;
    display: none;
}

.filter-collapsible:not(.collapsed) .collapse-content {
    display: block;
}

/* Extended dates and compact time */
.extended-dates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.time-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.time-btn {
    padding: 6px 4px;
    font-family: var(--filter-font-body);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.12s ease;
}

.time-btn:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    color: rgba(232, 240, 242, 1);
}

.time-btn.active {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    color: rgba(var(--color-primary-bright-rgb), 1);
}

.time-btn.live-pulse {
    background: rgba(255, 0, 0, 0.15);
    border-color: rgba(255, 0, 0, 0.3);
    color: #ff4444;
    animation: pulse-compact 2s infinite;
}

@keyframes pulse-compact {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Compact sportsbooks */
.books-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.book-check {
    padding: 6px 8px;
    font-family: var(--filter-font-body);
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.12s ease;
    position: relative;
}

.book-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.book-check:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
}

.book-check.active {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    color: rgba(var(--color-primary-bright-rgb), 1);
}

/* Risk and Win pills */
.risk-pills,
.win-pills,
.status-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 4px;
}

.risk-pill,
.win-pill,
.status-pill {
    padding: 6px 4px;
    font-family: var(--filter-font-body);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(168, 188, 198, 0.9);
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}

.risk-pill:hover,
.win-pill:hover,
.status-pill:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    color: rgba(232, 240, 242, 1);
}

.risk-pill.active,
.win-pill.active,
.status-pill.active {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    color: rgba(var(--color-primary-bright-rgb), 1);
}

/* ==========================================================================
   REDESIGNED DATE FILTER STYLES
   ========================================================================== */

/* Integrated header with inline controls */
.filter-header-integrated {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(var(--color-primary-bright-rgb), 0.15);
}

.filter-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--color-primary-bright-rgb), 0.9);
}

.filter-quick-actions {
    display: flex;
    gap: 6px;
}

.filter-action-btn {
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    color: rgba(144, 164, 174, 0.8);
    cursor: pointer;
    transition: all 0.12s ease;
}

.filter-action-btn:hover {
    background: rgba(0, 143, 88, 0.15);
    border-color: rgba(var(--color-primary-bright-rgb), 0.3);
    color: rgba(232, 240, 242, 0.95);
}

/* Compact section layout */
.filter-section-compact {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.section-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(144, 164, 174, 0.7);
    margin-bottom: 6px;
}

/* Sportsbook chips - ultra compact */
.sportsbook-chips {
    display: flex;
    gap: 6px;
}

.book-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    min-width: 45px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(144, 164, 174, 0.8);
    cursor: pointer;
    transition: all 0.12s ease;
}

.book-chip input {
    position: absolute;
    opacity: 0;
}

.book-chip:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
}

.book-chip.active {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    color: rgba(var(--color-primary-bright-rgb), 1);
}

/* Remove all scrolling */
.date-filter-compact {
    overflow: hidden !important;
    max-height: none !important;
}

.date-filter-compact > * {
    overflow: visible !important;
}

/* Date Range Selector */
.date-range-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.date-range-btn {
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(144, 164, 174, 0.8);
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
}

.date-range-btn:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    color: rgba(232, 240, 242, 0.95);
}

.date-range-btn.active {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    color: rgba(var(--color-primary-bright-rgb), 1);
    font-weight: 600;
}

/* Time Slots Grid */
.time-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.time-slot {
    padding: 6px 8px;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(144, 164, 174, 0.8);
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
}

.time-slot:hover {
    background: rgba(0, 143, 88, 0.1);
    border-color: rgba(var(--color-primary-bright-rgb), 0.2);
    color: rgba(232, 240, 242, 0.95);
}

.time-slot.active {
    background: rgba(0, 143, 88, 0.18);
    border-color: rgba(var(--color-primary-bright-rgb), 0.35);
    color: rgba(var(--color-primary-bright-rgb), 1);
    font-weight: 600;
}
/* ==========================================================================
   DAILY SLATE PAGE - VEGAS GLASS STYLE
   ==========================================================================
   - Nav/Header: EXACT match to Weekly Lineup for smooth transition
   - Layout: High-density "Vegas" sportsbook feel
   - Style: Glassmorphism, gradients, premium dark aesthetic
   ========================================================================== */

/* ===== PAGE BACKGROUND & VARIABLES ===== */
body.page-daily-slate {
    --daily-accent: #00d689; /* Emerald 500 */
    --daily-accent-dim: rgba(0, 214, 137, 0.15);
    --daily-gold: #ffb700;
    --daily-text: #e6f2f6;
    --daily-text-muted: #94a3b8;
    --daily-surface: rgba(8, 16, 28, 0.65);
    --daily-border: rgba(80, 100, 130, 0.25);

    /* Matching Weekly Lineup Background */
    background-color: rgba(3, 11, 22, 0.18);
    background-image: url('/assets/JB_Bearish_Market_FULL_page.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    isolation: isolate;
}

/* Overlays matching Weekly Lineup */
body.page-daily-slate::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(4, 10, 20, 0.12) 0%,
        rgba(4, 10, 20, 0.10) 15%,
        rgba(4, 10, 20, 0.08) 30%,
        rgba(4, 10, 20, 0.14) 50%,
        rgba(4, 10, 20, 0.18) 75%,
        rgba(4, 10, 20, 0.25) 100%);
    pointer-events: none;
    opacity: 0.2;
}

body.page-daily-slate::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: rgba(3, 11, 22, 0.75);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ==========================================================================
   NAV & HEADER - EXACT MATCH TO WEEKLY LINEUP
   ========================================================================== */
body.page-daily-slate .brand-nav {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    padding-left: 0.5in;
    padding-right: 0.5in;
}

body.page-daily-slate .nav-link {
    color: rgba(222, 235, 240, 0.86);
    font-family: var(--font-body); /* Ensure font match */
    padding: 1rem 1.25rem; /* Standard nav padding */
}

body.page-daily-slate .nav-link:hover,
body.page-daily-slate .nav-link:focus-visible {
    color: #fefefe;
    text-shadow: 0 2px 10px rgba(0, 214, 137, 0.35);
    background: transparent;
}

body.page-daily-slate .nav-link.active {
    color: #fdfdfd;
    border-bottom: 2px solid var(--daily-accent);
    background: transparent;
    box-shadow: none;
}

/* Layout Shell - Matching Weekly Lineup Spacing */
body.page-daily-slate .main-container {
    padding: 0 0 20px;
    margin-top: 12px;
    background: transparent;
    max-width: 100%; /* Reset max-width to full fluid */
}

body.page-daily-slate .main-dashboard-layout {
    gap: 8px;
    display: grid; /* Restore grid layout if originally grid */
}

/* Dashboard Topline - Matching Weekly Lineup */
body.page-daily-slate .dashboard-topline {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 6px 0.5in 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
}

/* Brand Header - Matching Weekly Lineup */
body.page-daily-slate .brand-header-inline {
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 12px;
}

body.page-daily-slate .brand-line-1 {
    color: var(--daily-text-muted);
    font-family: var(--font-body);
    letter-spacing: 0.12em;
}

body.page-daily-slate .brand-line-2 {
    color: var(--daily-text);
    font-family: var(--font-display); /* Oswald */
    letter-spacing: 0.02em;
}

/* ==========================================================================
   KPI TILES - GLASS STYLE
   ========================================================================== */
body.page-daily-slate .kpi-tiles {
    gap: 10px;
    padding: 0 4px;
}

body.page-daily-slate .kpi-tile {
    background: linear-gradient(160deg, rgba(10, 18, 32, 0.82) 0%, rgba(8, 16, 28, 0.78) 100%);
    border: 1px solid rgba(80, 100, 130, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    min-width: 100px;
    padding: 12px 16px;
}

body.page-daily-slate .kpi-tile:hover {
    border-color: rgba(100, 120, 150, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

body.page-daily-slate .kpi-value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--daily-text);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ==========================================================================
   LEAGUE TABS - GLASS STYLE
   ========================================================================== */
.page-daily-slate .slate-league-tabs {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    padding: 4px;
    border-radius: 8px;
}

.page-daily-slate .slate-league-tab {
    color: rgba(222, 235, 240, 0.7);
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
}

.page-daily-slate .slate-league-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.page-daily-slate .slate-league-tab.active {
    background: linear-gradient(135deg, var(--daily-accent) 0%, #00b47d 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 214, 137, 0.3);
}

/* ==========================================================================
   TABLE CONTAINER - GLASS & GLOW
   ========================================================================== */
body.page-daily-slate .table-container {
    margin: 0 0.5in; /* Match header padding */
    width: calc(100% - 1in);
    background: rgba(5, 12, 22, 0.65); /* Semi-transparent */
    border: 1px solid rgba(80, 100, 130, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

/* ==========================================================================
   TABLE HEADER - DARK GLASS
   ========================================================================== */
.page-daily-slate .slate-table thead th {
    background: rgba(8, 12, 22, 0.95) !important;
    border-bottom: 1px solid rgba(0, 214, 137, 0.3);
    color: var(--daily-text);
    font-family: var(--font-display); /* Oswald */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 16px;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Header Gradient Overlay */
.page-daily-slate .slate-table thead th::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 214, 137, 0.1) 0%, transparent 100%);
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================================
   TABLE ROWS - VEGAS STRIPING
   ========================================================================== */
.page-daily-slate .slate-table tbody tr {
    border-bottom: 1px solid rgba(80, 100, 130, 0.1);
    background: transparent;
}

.page-daily-slate .slate-table tbody tr:nth-child(even) {
    background: rgba(30, 55, 85, 0.15); /* Subtle blue tint */
}

.page-daily-slate .slate-table tbody tr:hover {
    background: rgba(0, 214, 137, 0.08); /* Hover glow */
}

/* ==========================================================================
   TYPOGRAPHY & CELLS
   ========================================================================== */
.page-daily-slate .slate-table tbody td {
    padding: 12px 16px;
    color: var(--daily-text);
    font-family: var(--font-body);
}

/* Team Names - Strong & Clear */
.page-daily-slate .team-name {
    font-family: var(--font-display); /* Oswald */
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.page-daily-slate .team-record {
    font-family: 'Roboto Mono', monospace;
    color: var(--daily-text-muted);
    font-size: 0.75rem;
}

/* Date & Time */
.page-daily-slate .game-time {
    font-family: 'Roboto Mono', monospace;
    color: var(--daily-accent); /* Green time for urgency */
    font-weight: 500;
}

/* ==========================================================================
   ODDS BUTTONS - PREMIUM FEEL
   ========================================================================== */
.page-daily-slate .odds-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    min-width: 80px;
    padding: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

.page-daily-slate .odds-btn:hover {
    background: rgba(0, 214, 137, 0.1);
    border-color: rgba(0, 214, 137, 0.4);
    box-shadow: 0 0 12px rgba(0, 214, 137, 0.15);
    transform: translateY(-1px);
}

.page-daily-slate .odds-btn.selected {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.25) 0%, rgba(0, 180, 120, 0.2) 100%);
    border-color: var(--daily-accent);
    box-shadow: 0 0 16px rgba(0, 214, 137, 0.25), inset 0 0 0 1px rgba(0,255,170,0.2);
}

.page-daily-slate .odds-line {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: #fff;
}

.page-daily-slate .odds-juice {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    opacity: 0.9;
}

.page-daily-slate .odds-juice.plus { color: var(--daily-accent); }
.page-daily-slate .odds-juice.minus { color: var(--daily-gold); }

/* ==========================================================================
   FILTER CHIPS - FLOATING GLASS
   ========================================================================== */
.page-daily-slate .table-filter-chips {
    background: rgba(8, 16, 28, 0.8);
    border: 1px solid rgba(0, 214, 137, 0.3);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.page-daily-slate .filter-chip {
    background: rgba(0, 214, 137, 0.15);
    border: 1px solid rgba(0, 214, 137, 0.4);
    color: var(--daily-accent);
    box-shadow: 0 2px 8px rgba(0, 214, 137, 0.1);
}

/* ==========================================================================
   BETSLIP - DARK GLASS
   ========================================================================== */
.page-daily-slate .betslip-panel {
    background: rgba(8, 12, 22, 0.95);
    border-left: 1px solid rgba(0, 214, 137, 0.3);
    backdrop-filter: blur(16px);
    box-shadow: -8px 0 32px rgba(0,0,0,0.6);
}

.page-daily-slate .betslip-header {
    background: linear-gradient(180deg, rgba(0, 214, 137, 0.15) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.page-daily-slate .place-bets-btn {
    background: linear-gradient(135deg, var(--daily-accent) 0%, #00b47d 100%);
    box-shadow: 0 4px 12px rgba(0, 214, 137, 0.3);
    color: #000; /* Dark text on bright button */
    font-weight: 800;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
    body.page-daily-slate .dashboard-topline {
        padding: 6px 20px 8px; /* Adjusted to match mobile nav padding */
    }
    
    body.page-daily-slate .brand-nav {
        padding: 0 20px;
    }

    body.page-daily-slate .table-container {
        margin: 0 20px;
        width: calc(100% - 40px);
    }
}
/* ==========================================================================
   DASHBOARD PAGE STYLES (v5.0)
   --------------------------------------------------------------------------
   Scoped under .page-active-picks to avoid affecting other pages.
   Follows modular architecture pattern from weekly-lineup.css
   ========================================================================== */

/* Dashboard-level accent tokens */
body.page-active-picks {
    --dashboard-accent-primary: var(--color-primary-bright, #00d689);
    --dashboard-accent-secondary: var(--color-accent-bright, #80deea);
    --dashboard-surface: rgba(6, 14, 24, 0.9);
    --dashboard-border: rgba(0, 214, 137, 0.25);
    --dashboard-text: #e6f2f6;
    /* Use Garamond-based fonts from variables.css - don't override */

    /* Lighter background to show bear image - match weekly-lineup */
    background-color: rgba(3, 11, 22, 0.18);
}

/* Override main-container padding for consistent 0.75in left/right margins */
body.page-active-picks .main-container {
    padding-left: 0.75in;
    padding-right: 0.75in;
}

/* Override the heavy dark overlay from page-layout.css - MATCHING ODDS MARKET */
body.page-active-picks::before {
    background: linear-gradient(180deg,
        rgba(4, 10, 20, 0.12) 0%,
        rgba(4, 10, 20, 0.10) 15%,
        rgba(4, 10, 20, 0.08) 30%,
        rgba(4, 10, 20, 0.14) 50%,
        rgba(4, 10, 20, 0.18) 75%,
        rgba(4, 10, 20, 0.25) 100%);
    opacity: 0.2;
    animation: none;
}

/* Wash to balance bear image visibility - MATCHING ODDS MARKET */
body.page-active-picks::after {
    background: rgba(3, 11, 22, 0.75);
    mix-blend-mode: multiply;
}

/* ==========================================================================
   NAV ACTIONS (Dashboard only)
   ========================================================================== */
body.page-active-picks .nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

body.page-active-picks .last-refresh {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-normal);
    color: rgba(214, 232, 236, 0.75);
    white-space: nowrap;
}

body.page-active-picks .refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(0, 214, 137, 0.25);
    background: rgba(8, 18, 32, 0.55);
    color: rgba(232, 240, 242, 0.95);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

body.page-active-picks .refresh-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 214, 137, 0.45);
    background: rgba(0, 214, 137, 0.10);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 18px rgba(0, 214, 137, 0.12);
}

body.page-active-picks .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: rgba(232, 240, 242, 0.95);
    background: rgba(0, 214, 137, 0.10);
    border: 1px solid rgba(0, 214, 137, 0.25);
}

/* ==========================================================================
   KPI TILES (Dashboard refinements)
   ========================================================================== */
body.page-active-picks .kpi-tiles {
    gap: 10px;
    padding: 0 4px;
}

body.page-active-picks .kpi-tile {
    width: 100px;
    height: 76px;
    background: linear-gradient(160deg,
        rgba(12, 28, 48, 0.95) 0%,
        rgba(8, 20, 36, 0.95) 50%,
        rgba(0, 214, 137, 0.15) 100%);
    border: 1px solid rgba(0, 214, 137, 0.5);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 214, 137, 0.2) inset,
        0 0 20px rgba(0, 214, 137, 0.1);
    border-radius: 8px;
    cursor: pointer;
    padding: 6px 8px;
    box-sizing: border-box;
}

body.page-active-picks .kpi-tile:hover {
    border-color: rgba(0, 214, 137, 0.55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 214, 137, 0.16) inset;
    transform: translateY(-2px);
}

body.page-active-picks .kpi-tile-layer {
    display: none;
}

body.page-active-picks .kpi-tile-layer.active {
    display: flex;
}

body.page-active-picks .kpi-label {
    color: rgba(214, 232, 236, 0.8);
    letter-spacing: 0.08em;
    font-size: var(--text-xs);
    text-transform: uppercase;
}

body.page-active-picks .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.page-active-picks .kpi-value.positive {
    color: var(--dashboard-accent-primary);
}

body.page-active-picks .kpi-subtext {
    color: var(--dashboard-accent-secondary);
    opacity: 0.95;
    font-size: var(--text-xs);
}

@keyframes dashboardTileFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   TABLE STYLES (Dashboard) - Cloned from Weekly Lineup
   ========================================================================== */

/* ===== TABLE CONTAINER - SEMI-TRANSPARENT (matches weekly lineup) ===== */
body.page-active-picks .table-container,
body.page-active-picks .table-container.has-picks {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    /* CRITICAL FIX: Override flex to block - flex interferes with table column sizing */
    display: block !important;
    /* No horizontal scroll - table uses fixed layout */
    overflow-x: hidden;
    overflow-y: visible;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0;
    contain: none !important;
    /* Override backdrop blur from picks-table.css */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.page-active-picks .picks-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    /* Table itself doesn't need overflow - container handles scrolling */
    overflow: visible;
    /* Ensure all nested table components (team names, pick lines, etc.) inherit Garamond */
    --table-font: var(--font-body);
    /* CRITICAL: Ensure proper table display */
    display: table !important;
}

/* Table cell base styling - proper overflow handling */
body.page-active-picks .picks-table td {
    /* Default: clip overflowing content with ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: nowrap;
    /* Padding handled by TABLE CELL ALIGNMENT FIX section */
    box-sizing: border-box !important;
}

/* Allow Matchup cell to wrap for stacked team names */
body.page-active-picks .picks-table td:nth-child(3),
body.page-active-picks .picks-table td[data-label="Matchup"] {
    white-space: normal !important;
    overflow: visible !important;
    max-width: none !important;
}

/* Allow Pick cell to wrap for stacked pick info */
body.page-active-picks .picks-table td:nth-child(5),
body.page-active-picks .picks-table td[data-label="Pick"] {
    white-space: normal !important;
    overflow: visible !important;
    max-width: none !important;
}

/* Column widths for dashboard - 10 columns (total: 100%)
   Explicit width + min-width + max-width ensures header/body alignment */
body.page-active-picks .picks-table thead th:nth-child(1),
body.page-active-picks .picks-table tbody td:nth-child(1) {
    width: 10% !important; min-width: 100px !important; max-width: 10% !important;
}  /* Date/Time */
body.page-active-picks .picks-table thead th:nth-child(2),
body.page-active-picks .picks-table tbody td:nth-child(2) {
    width: 6% !important; min-width: 60px !important; max-width: 6% !important;
}   /* League */
body.page-active-picks .picks-table thead th:nth-child(3),
body.page-active-picks .picks-table tbody td:nth-child(3) {
    width: 16% !important; min-width: 160px !important; max-width: 16% !important;
}  /* Matchup */
body.page-active-picks .picks-table thead th:nth-child(4),
body.page-active-picks .picks-table tbody td:nth-child(4) {
    width: 7% !important; min-width: 70px !important; max-width: 7% !important;
}   /* Segment */
body.page-active-picks .picks-table thead th:nth-child(5),
body.page-active-picks .picks-table tbody td:nth-child(5) {
    width: 13% !important; min-width: 120px !important; max-width: 13% !important;
}  /* Pick */
body.page-active-picks .picks-table thead th:nth-child(6),
body.page-active-picks .picks-table tbody td:nth-child(6) {
    width: 10% !important; min-width: 100px !important; max-width: 10% !important;
}  /* Risk/Win */
body.page-active-picks .picks-table thead th:nth-child(7),
body.page-active-picks .picks-table tbody td:nth-child(7) {
    width: 18% !important; min-width: 180px !important; max-width: 18% !important;
}  /* Box Score */
body.page-active-picks .picks-table thead th:nth-child(8),
body.page-active-picks .picks-table tbody td:nth-child(8) {
    width: 8% !important; min-width: 80px !important; max-width: 8% !important;
}   /* Status */
body.page-active-picks .picks-table thead th:nth-child(9),
body.page-active-picks .picks-table tbody td:nth-child(9) {
    width: 6% !important; min-width: 65px !important; max-width: 6% !important;
}   /* Hit/Miss */
body.page-active-picks .picks-table thead th:nth-child(10),
body.page-active-picks .picks-table tbody td:nth-child(10) {
    width: 6% !important; min-width: 70px !important; max-width: 6% !important;
}  /* $ Won/Lost */

/* Hit/Miss + Profit columns - allow badges to display fully */
body.page-active-picks .picks-table thead th:nth-child(9),
body.page-active-picks .picks-table tbody td:nth-child(9),
body.page-active-picks .picks-table thead th:nth-child(10),
body.page-active-picks .picks-table tbody td:nth-child(10) {
    white-space: nowrap !important;
    overflow: visible !important;
}

body.page-active-picks .hitmiss-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(11, 20, 35, 0.65);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(232, 240, 242, 0.92);
    white-space: nowrap;
}

body.page-active-picks .profit-amount {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    white-space: nowrap;
    padding: 2px 4px;
}

body.page-active-picks .hitmiss-badge.hitmiss-hit {
    border-color: rgba(var(--color-primary-bright-rgb), 0.45);
    color: rgba(0, 255, 170, 0.95);
}

body.page-active-picks .hitmiss-badge.hitmiss-miss {
    border-color: rgba(255, 95, 109, 0.45);
    color: rgba(255, 95, 109, 0.95);
}

body.page-active-picks .hitmiss-badge.hitmiss-push {
    border-color: rgba(184, 197, 208, 0.35);
    color: rgba(184, 197, 208, 0.95);
}

body.page-active-picks .hitmiss-badge.hitmiss-na {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(184, 197, 208, 0.9);
}

body.page-active-picks .profit-amount {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

body.page-active-picks .profit-amount.profit-positive { color: rgba(0, 255, 170, 0.95); }
body.page-active-picks .profit-amount.profit-negative { color: rgba(255, 95, 109, 0.95); }
body.page-active-picks .profit-amount.profit-neutral { color: rgba(184, 197, 208, 0.92); }

/* ===== TABLE HEADERS - VERY TRANSPARENT GREEN GRADIENT (matches weekly lineup) ===== */
body.page-active-picks .picks-table thead th {
    /* CRITICAL: Override base picks-table.css opaque background with transparent green */
    background: linear-gradient(180deg,
        rgba(0, 214, 137, 0.06) 0%,
        rgba(0, 214, 137, 0.03) 45%,
        rgba(8, 12, 22, 0.18) 100%) !important;
    background-color: rgba(8, 12, 22, 0.15) !important;
    border-bottom: 1px solid rgba(0, 214, 137, 0.20) !important;
    border-right: 1px solid rgba(0, 214, 137, 0.08) !important;
    padding: 6px 4px;
    text-align: center;
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f4fbff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    line-height: 1.1;
    position: relative;
    /* Text containment - prevent wrapping and overflow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0; /* Works with table-layout: fixed for ellipsis */
}

body.page-active-picks .picks-table thead th:first-child {
    border-top-left-radius: 8px;
}

body.page-active-picks .picks-table thead th:last-child {
    border-top-right-radius: 8px;
    border-right: none;
}

/* Sticky header (matches weekly lineup) */
body.page-active-picks .picks-table thead {
    display: table-header-group !important; /* CRITICAL: Maintain table structure */
    position: sticky !important;
    top: 0;
    z-index: 110;
    background: transparent !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.page-active-picks .picks-table thead th {
    position: relative;
    text-align: center;
    padding: 6px 4px !important;
    background-clip: padding-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    vertical-align: middle;
    /* Ensure text containment */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Center header labels (matches weekly lineup) */
body.page-active-picks .th-header-shell {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0;
}

body.page-active-picks .th-sort-btn {
    flex: 1 1 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 20px 4px 4px !important;
    gap: 0;
    min-height: unset;
    position: relative;
}

/* Header main text styling (matches weekly lineup) */
body.page-active-picks .header-main-text {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header subtext (matches weekly lineup) */
body.page-active-picks .header-subtext {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(200, 215, 225, 0.7);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-top: 2px;
    line-height: 1;
}

/* Sort icon (matches weekly lineup) */
body.page-active-picks .sort-icon {
    position: absolute !important;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    margin: 0;
    opacity: 0.7;
    font-weight: bold;
}

body.page-active-picks .picks-table th:hover .sort-icon,
body.page-active-picks .picks-table th.sorted-asc .sort-icon,
body.page-active-picks .picks-table th.sorted-desc .sort-icon,
body.page-active-picks .picks-table th[data-sort].sort-asc .sort-icon,
body.page-active-picks .picks-table th[data-sort].sort-desc .sort-icon {
    opacity: 1;
}

/* Filter button positioning (matches weekly lineup) */
body.page-active-picks .picks-table thead th .th-filter-btn {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 102 !important;
    pointer-events: auto !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ===== TABLE BODY - ZEBRA STRIPES (matches weekly lineup) ===== */
body.page-active-picks .picks-table tbody {
    display: table-row-group !important; /* CRITICAL: Maintain table structure */
    position: relative;
    z-index: 10;
    background: rgba(8, 12, 22, 0.52);
}

body.page-active-picks .picks-table tbody tr {
    border-bottom: 1px solid rgba(80, 100, 130, 0.12);
    transition: background-color 0.2s ease;
    background: transparent;
}

body.page-active-picks .picks-table tbody tr:nth-child(odd) {
    background: rgba(4, 12, 24, 0.42);
}

body.page-active-picks .picks-table tbody tr:nth-child(even) {
    background: rgba(30, 55, 85, 0.28);
}

body.page-active-picks .picks-table tbody tr:hover {
    background: rgba(40, 60, 90, 0.48);
}

body.page-active-picks .picks-table tbody td {
    /* padding handled by earlier rule with !important */
    color: rgba(232, 240, 242, 0.95);
    vertical-align: middle;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 0.825rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    /* white-space handled by earlier rule with !important */
}

/* ===== TIME CELL (matches weekly lineup) ===== */
body.page-active-picks .cell-time {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--neutral-300);
    letter-spacing: 0.02em;
}

body.page-active-picks .cell-date {
    font-weight: 600;
    color: var(--neutral-100);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* Matchup/Pick cell layout & typography are handled by the shared table component
   (`assets/css/components/picks-table.css`). Avoid overriding here so the stacked
   layout (Away / vs / Home) and the pick stacking stay consistent. */

/* ===== SEGMENT CELL (matches weekly lineup) ===== */
body.page-active-picks .game-segment {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--neutral-200);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ===== RISK/WIN CELL (matches weekly lineup) ===== */
body.page-active-picks .currency-combined {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

body.page-active-picks .currency-line {
    display: flex;
    align-items: center;
    gap: 4px;
}

body.page-active-picks .risk-label,
body.page-active-picks .win-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body.page-active-picks .risk-amount,
body.page-active-picks .win-amount {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--neutral-100);
}

/* ==========================================================================
   STATUS BADGES (Dashboard) - Keep Intact
   ========================================================================== */
body.page-active-picks .status-badge {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

body.page-active-picks .status-badge.status-win,
body.page-active-picks .status-badge[data-status="win"] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(16, 185, 129, 0.28));
    color: #d2fbe5;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

body.page-active-picks .status-badge.status-loss,
body.page-active-picks .status-badge[data-status="loss"] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.16));
    color: #ffe1e1;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

body.page-active-picks .status-badge.status-live,
body.page-active-picks .status-badge[data-status="live"] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(59, 130, 246, 0.16));
    color: #d9ecff;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

body.page-active-picks .status-badge.status-pending,
body.page-active-picks .status-badge[data-status="pending"] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.16));
    color: #fff3d6;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

body.page-active-picks .status-badge.status-push,
body.page-active-picks .status-badge[data-status="push"] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.18), rgba(148, 163, 184, 0.16));
    color: #e2e8f0;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

/* ==========================================================================
   BACK TO TOP BUTTON - Subtle dark glass style matching page-layout.css
   ========================================================================== */
body.page-active-picks .back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: rgba(8, 12, 22, 0.85);
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, border-color 0.2s ease;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

body.page-active-picks .back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.page-active-picks .back-to-top:hover {
    background: rgba(8, 12, 22, 0.95);
    border-color: rgba(var(--color-primary-bright-rgb), 0.5);
    box-shadow: 0 4px 12px rgba(var(--color-primary-bright-rgb), 0.2);
}

body.page-active-picks .back-to-top::before {
    content: '↑';
    font-size: 16px;
    font-weight: 600;
    color: rgba(var(--color-primary-bright-rgb), 0.8);
    line-height: 1;
    font-family: 'Cormorant Garamond', Georgia, serif;
}

body.page-active-picks .back-to-top:hover::before {
    color: rgba(var(--color-primary-bright-rgb), 1);
}

/* ==========================================================================
   FILTER BUTTON - Clean Emerald Theme
   ========================================================================== */
body.page-active-picks .th-filter-btn:hover {
    opacity: 1;
    background: rgba(0, 214, 137, 0.1) !important;
    border-radius: 4px !important;
}

body.page-active-picks .th-filter-btn:active {
    opacity: 0.8;
}

body.page-active-picks .th-filter-btn[aria-expanded="true"] {
    opacity: 1;
}

/* Filter icon styling */
body.page-active-picks .th-filter-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(230, 242, 246, 0.75);
    opacity: 1;
    letter-spacing: 0.12em;
    pointer-events: none;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

body.page-active-picks .th-filter-btn:hover .th-filter-icon {
    color: #fff;
    transform: scale(1.1);
    text-shadow: 0 0 8px rgba(0, 214, 137, 0.4);
}

body.page-active-picks .th-filter-btn[aria-expanded="true"] .th-filter-icon {
    color: var(--dashboard-accent-primary);
    text-shadow: 0 0 12px rgba(0, 214, 137, 0.5);
}

/* Hide filter button pseudo-element icons */
body.page-active-picks .th-filter-btn::before {
    content: none !important;
    display: none !important;
}

/* Active filter indicator dot */
body.page-active-picks .th-filter-btn.has-filter::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--dashboard-accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 214, 137, 0.6);
    pointer-events: none;
}

/* Sort icon descending state */
body.page-active-picks th.sorted-desc .sort-icon,
body.page-active-picks th[data-sort].sort-desc .sort-icon {
    transform: rotate(180deg);
}

/* ==========================================================================
   TABLE CELL ALIGNMENT FIX
   --------------------------------------------------------------------------
   The base picks-table.css defines an 8-column layout with different column
   order. Dashboard uses 10 columns. These overrides ensure all cells are
   properly centered regardless of the base styles.

   CRITICAL: With table-layout: fixed, column widths are determined by:
   1. <colgroup>/<col> elements (preferred)
   2. First row cell widths
   Both thead th and tbody td MUST have identical box-sizing and padding.
   ========================================================================== */

/* Force proper table structure on all rows */
body.page-active-picks .picks-table thead tr,
body.page-active-picks .picks-table tbody tr {
    display: table-row !important;
}

/* Force all cells to be proper table-cells with centered content */
body.page-active-picks .picks-table thead th,
body.page-active-picks .picks-table tbody td {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    /* CRITICAL: Identical padding for alignment */
    padding: 8px 6px !important;
}

/* Override any nth-child text-align rules from picks-table.css */
body.page-active-picks .picks-table thead th:nth-child(n),
body.page-active-picks .picks-table tbody td:nth-child(n) {
    text-align: center !important;
}

/* Header shell - simple flex centering */
body.page-active-picks .picks-table thead th .th-header-shell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
}

/* Sort button - inline layout */
body.page-active-picks .picks-table thead th .th-sort-btn {
    padding: 4px 20px 4px 4px;
    margin: 0;
    background: none;
    border: none;
}

/* Sort icon - positioned inline */
body.page-active-picks .picks-table thead th .sort-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px;
    font-size: 10px;
}

/* Filter dropdown - absolute positioning to not affect column width */
body.page-active-picks .picks-table thead th .th-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

/* League cell - centered column layout */
body.page-active-picks .picks-table tbody td .league-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* DateTime cell - centered column layout */
body.page-active-picks .picks-table tbody td .datetime-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* League logo sizing */
body.page-active-picks .picks-table tbody td .league-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Matchup cell - stacked centered layout */
body.page-active-picks .picks-table tbody td .matchup-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
}

/* Pick cell - centered layout */
body.page-active-picks .picks-table tbody td .pick-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

/* Currency combined - centered stacked layout */
body.page-active-picks .picks-table tbody td .currency-combined {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Boxscore cell - centered */
body.page-active-picks .picks-table tbody td .compact-boxscore,
body.page-active-picks .picks-table tbody td .boxscore-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Status badge - centered */
body.page-active-picks .picks-table tbody td .status-badge {
    display: inline-block;
    text-align: center;
}

/* Segment cell - centered */
body.page-active-picks .picks-table tbody td .game-segment {
    display: inline-block;
    text-align: center;
}
/* ==========================================================================
   ODDS MARKET PAGE - Vegas Elite Odds Comparison v3.1
   ==========================================================================
   Standardized styling matching weekly-lineup patterns
   Data Sources:
   - NFL, NCAAF: SportsDataIO API
   - NBA, NCAAB, NHL: The Odds API

   Typography Rules:
   - ALL text: var(--font-body) = Cormorant Garamond
   - ONLY numbers/odds: var(--font-mono) = Roboto Mono
   - Use larger sizes (Garamond needs room to breathe)
   ========================================================================== */


/* ==========================================================================
   1. PAGE LAYOUT - MATCHING WEEKLY LINEUP PATTERNS
   ========================================================================== */

body.page-odds-market {
    --market-accent-primary: var(--emerald-500);
    --market-accent-secondary: var(--gold-400);
    --market-surface: rgba(8, 16, 28, 0.75);
    --market-border: rgba(80, 100, 130, 0.25);
    --market-text: #e6f2f6;
    --dashboard-topline-height: 91px;

    /* Zebra Stripe - Matching Weekly Lineup */
    --zebra-odd: rgba(4, 12, 24, 0.32);
    --zebra-even: rgba(30, 55, 85, 0.20);
    --zebra-hover: rgba(40, 60, 90, 0.35);

    position: relative;
    min-height: 100vh;
    background-color: var(--color-bg-deep);
    background-image: url('/assets/JB_Bearish_Market_FULL_page.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    isolation: isolate;

    /* Garamond base */
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* Overlay effects - matching weekly lineup */
body.page-odds-market::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(4, 10, 20, 0.12) 0%,
        rgba(4, 10, 20, 0.10) 15%,
        rgba(4, 10, 20, 0.08) 30%,
        rgba(4, 10, 20, 0.14) 50%,
        rgba(4, 10, 20, 0.18) 75%,
        rgba(4, 10, 20, 0.25) 100%);
    pointer-events: none;
    opacity: 0.2;
}

body.page-odds-market::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: rgba(3, 11, 22, 0.75);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ==========================================================================
   NAV & HEADER (odds market - matching weekly lineup floating style)
   ========================================================================== */
body.page-odds-market .brand-nav {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    padding-left: 0.75in;
    padding-right: 0.75in;
    margin-top: 0.25in;
}

body.page-odds-market .nav-link {
    color: #e6f2f6 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 4px 8px !important;
}

body.page-odds-market .nav-link:hover,
body.page-odds-market .nav-link:focus-visible {
    color: #00e6a3 !important;
    text-shadow: 
        0 0 8px rgba(0, 214, 137, 0.5),
        0 1px 2px rgba(0, 31, 63, 0.9) !important;
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.1), rgba(0, 31, 63, 0.1)) !important;
}

body.page-odds-market .nav-link.active {
    color: #00e6a3 !important;
    text-shadow: 
        0 0 6px rgba(0, 214, 137, 0.4),
        0 1px 2px rgba(0, 31, 63, 0.9) !important;
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.15), rgba(0, 31, 63, 0.15)) !important;
    border-bottom: none !important;
}

/* Scoped sportsbook dropdown (odds market) */
.page-odds-market .nav-dropdown {
    position: relative;
}

.page-odds-market .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    background: rgba(5, 12, 22, 0.96);
    border: 1px solid rgba(var(--color-primary-bright-rgb), 0.25);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    z-index: 2000;
}

.page-odds-market .nav-dropdown-menu[hidden] {
    display: none;
}

.page-odds-market .nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.page-odds-market .nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* ==========================================================================
   LAYOUT SHELL (odds market - matching weekly lineup)
   ========================================================================== */
body.page-odds-market .main-container {
    padding: 0 0 20px;
    padding-right: 60px;
    margin-top: 12px;
    transition: padding-right 0.3s ease;
}

body.page-odds-market.slip-open .main-container {
    padding-right: 340px;
}

body.page-odds-market .main-dashboard-layout {
    gap: 8px;
}

/* ===== DASHBOARD TOPLINE - FLOATING/TRANSPARENT ===== */
body.page-odds-market .dashboard-topline {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 6px 0.5in 8px;
}

/* ===== BRAND HEADER STYLING ===== */
body.page-odds-market .brand-header-inline,
body.page-odds-market .brand-header {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

body.page-odds-market .brand-line-1,
body.page-odds-market .brand-line-2 {
    color: var(--market-text);
}

/* ==========================================================================
   KPI TILES (odds market - matching weekly lineup)
   ========================================================================== */
body.page-odds-market .kpi-tiles {
    gap: 10px;
    padding: 0 4px;
}

body.page-odds-market .kpi-tile {
    background: linear-gradient(160deg, rgba(10, 18, 32, 0.82) 0%, rgba(8, 16, 28, 0.78) 100%);
    border: 1px solid rgba(80, 100, 130, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
}

body.page-odds-market .kpi-tile:hover {
    border-color: rgba(100, 120, 150, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

body.page-odds-market .kpi-tile-layer.active {
    animation: marketTileFade 280ms ease;
}

body.page-odds-market .kpi-label {
    color: rgba(214, 232, 236, 0.8);
    letter-spacing: 0.08em;
}

body.page-odds-market .kpi-value {
    font-size: 1.32rem;
    letter-spacing: 0.01em;
}

body.page-odds-market .kpi-subtext {
    color: var(--market-accent-secondary);
    opacity: 0.95;
}

@keyframes marketTileFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   2. ODDS BOARD CONTAINER - MATCHING WEEKLY LINEUP TABLE CONTAINER
   ========================================================================== */

.odds-board {
    margin-top: 0;
    margin-left: 0.5in;
    margin-right: 0.5in;
    width: calc(100% - 1in);
    box-sizing: border-box;
    background: rgba(5, 12, 22, 0.40);
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 0;
    position: relative;
    overflow: hidden;
    contain: layout;
}


/* ==========================================================================
   3. MARKET SELECTOR BAR
   ========================================================================== */

.market-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(180deg, rgba(0, 30, 45, 0.85) 0%, rgba(0, 20, 35, 0.95) 100%);
    border-bottom: 1px solid rgba(0, 214, 137, 0.18);
}

.market-btn {
    padding: 10px 22px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    
    /* Garamond - larger for readability */
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.65);
    
    cursor: pointer;
    transition: all 0.2s ease;
}

.market-btn:hover {
    background: rgba(0, 214, 137, 0.1);
    border-color: rgba(0, 214, 137, 0.25);
    color: rgba(255, 255, 255, 0.9);
}

.market-btn.active {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.22) 0%, rgba(0, 143, 88, 0.18) 100%);
    border-color: rgba(0, 214, 137, 0.5);
    color: var(--color-primary-bright);
    box-shadow: 0 0 14px rgba(0, 214, 137, 0.2);
}

.market-selector-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}


/* --- Live Filter Toggle --- */

.live-filter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-checkbox { display: none; }

.live-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.6);
    
    cursor: pointer;
    transition: all 0.2s ease;
}

.live-label:hover {
    border-color: rgba(74, 182, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

.live-checkbox:checked + .live-label {
    background: rgba(74, 182, 255, 0.12);
    border-color: rgba(74, 182, 255, 0.45);
    color: #4ab6ff;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: all 0.2s ease;
}

.live-checkbox:checked + .live-label .live-dot {
    background: #4ab6ff;
    box-shadow: 0 0 8px rgba(74, 182, 255, 0.6);
    animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}


/* --- Refresh Button --- */

.refresh-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(0, 214, 137, 0.08);
    border: 1px solid rgba(0, 214, 137, 0.25);
    border-radius: 5px;
    
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-primary-bright);
    
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-btn:hover {
    background: rgba(0, 214, 137, 0.15);
    box-shadow: 0 0 12px rgba(0, 214, 137, 0.2);
}

.refresh-btn .refresh-icon {
    font-size: 1.1rem;
    transition: transform 0.4s ease;
}

.refresh-btn:hover .refresh-icon {
    transform: rotate(180deg);
}

.refresh-time {
    /* Times are numbers - use Mono */
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    opacity: 0.7;
}


/* ==========================================================================
   4. SPORTSBOOK HEADERS
   ========================================================================== */

.books-header {
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(0, 214, 137, 0.22);
}

.books-header-game {
    flex: 0 0 300px;
    padding: 14px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    
    /* Garamond - headers */
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.9);
}

.books-header-books {
    flex: 1;
    display: flex;
}

.book-header-col {
    flex: 1;
    min-width: 110px;
    padding: 12px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

.book-header-col:last-child {
    border-right: none;
}

.book-short-name {
    /* Garamond - book abbreviations */
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-bright);
}

.book-full-name {
    /* Garamond - full name */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   5. GAMES LIST & ROWS
   ========================================================================== */

.games-list {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 214, 137, 0.3) transparent;
}

.games-list::-webkit-scrollbar { width: 6px; }
.games-list::-webkit-scrollbar-track { background: transparent; }
.games-list::-webkit-scrollbar-thumb {
    background: rgba(0, 214, 137, 0.3);
    border-radius: 3px;
}


/* --- Game Row --- */

.game-row {
    display: flex;
    border-bottom: 1px solid rgba(0, 214, 137, 0.06);
    transition: background 0.15s ease;
}

.game-row:nth-child(odd) { background: var(--zebra-odd); }
.game-row:nth-child(even) { background: var(--zebra-even); }

.game-row:hover {
    background: var(--zebra-hover);
}

.game-row.is-live {
    border-left: 3px solid #4ab6ff;
    box-shadow: inset 4px 0 16px rgba(74, 182, 255, 0.1);
}


/* --- Game Info Cell --- */

.game-info {
    flex: 0 0 300px;
    padding: 14px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-league {
    /* Garamond - league label */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-primary-bright);
}

.game-time {
    /* Times are numbers - Mono */
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: rgba(255, 255, 255, 0.5);
}

.game-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(74, 182, 255, 0.12);
    border: 1px solid rgba(74, 182, 255, 0.35);
    border-radius: 4px;
    
    /* Garamond for label, but period/clock are numbers */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: #4ab6ff;
}

.game-live-badge .live-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ab6ff;
    animation: pulse-live 1.5s infinite;
}


/* --- Teams Display --- */

.game-teams {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.team-name {
    /* Garamond - team names */
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: rgba(245, 250, 255, 0.95);
    letter-spacing: 0.02em;
}

.team-record {
    /* Records are numbers - Mono */
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: rgba(160, 180, 200, 0.6);
    margin-left: 4px;
}

.team-score {
    margin-left: auto;
    /* Scores are numbers - Mono */
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: #ffffff;
}

.vs-divider {
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-style: italic;
    text-transform: lowercase;
    color: rgba(120, 140, 160, 0.5);
    margin-left: 34px;
}


/* --- Books Odds Grid --- */

.game-books {
    flex: 1;
    display: flex;
}

.book-odds-col {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.03);
}

.book-odds-col:last-child { border-right: none; }


/* ==========================================================================
   6. ODDS CELLS
   ========================================================================== */

.odds-cell {
    flex: 1;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    position: relative;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    
    cursor: pointer;
    transition: all 0.15s ease;
}

.odds-cell:last-child { border-bottom: none; }

.odds-cell:hover {
    background: rgba(0, 214, 137, 0.1);
}

.odds-cell.selected {
    background: rgba(0, 214, 137, 0.18);
    box-shadow: inset 0 0 0 2px rgba(0, 214, 137, 0.5);
}

.odds-cell.unavailable {
    opacity: 0.35;
    cursor: not-allowed;
}


/* --- Best Odds Highlight --- */

.odds-cell.best-odds {
    background: rgba(0, 214, 137, 0.1);
}

.odds-cell.best-odds::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(0, 214, 137, 0.45);
    border-radius: 4px;
    pointer-events: none;
}


/* --- Line & Price Display --- */

.odds-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    
    /* NUMBERS - Mono font */
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: #ffffff;
    letter-spacing: -0.02em;
}

.odds-cell.best-odds .odds-line {
    color: var(--color-primary-bright);
}

.odds-price {
    /* NUMBERS - Mono font */
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(180, 200, 220, 0.7);
}

.odds-cell.best-odds .odds-price {
    color: rgba(0, 214, 137, 0.85);
}

/* N/A styling */
.odds-na {
    /* Garamond for text label */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-style: italic;
    color: rgba(255, 255, 255, 0.3);
}


/* --- Line Movement Indicators --- */

.line-movement {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    margin-left: 4px;
}

.line-movement.up { color: var(--color-primary-bright); }
.line-movement.down { color: #ff6464; }


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.odds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 24px;
    text-align: center;
}

.odds-empty[hidden] { display: none; }

.odds-empty .empty-icon {
    font-size: 3rem;
    opacity: 0.35;
}

.odds-empty .empty-text {
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.4);
}


/* ==========================================================================
   7. BET SLIP PANEL
   ========================================================================== */

.bet-slip {
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    width: 340px;
    z-index: 100;
    
    background: linear-gradient(180deg, rgba(8, 16, 30, 0.98) 0%, rgba(4, 10, 20, 0.99) 100%);
    border-left: 1px solid rgba(0, 214, 137, 0.2);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    
    display: flex;
    flex-direction: column;
    transform: translateX(280px);
    transition: transform 0.3s ease;
}

body.page-odds-market.slip-open .bet-slip {
    transform: translateX(0);
}


/* --- Bet Slip Header --- */

.bet-slip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    background: rgba(0, 214, 137, 0.08);
    border-bottom: 1px solid rgba(0, 214, 137, 0.15);
}

.bet-slip-title {
    margin: 0;
    /* Garamond - title */
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: #ffffff;
}

.bet-slip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: rgba(0, 214, 137, 0.2);
    border-radius: 13px;
    
    /* NUMBERS - Mono */
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-primary-bright);
}

.bet-slip-toggle {
    margin-left: auto;
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bet-slip-toggle:hover {
    background: rgba(0, 214, 137, 0.12);
    border-color: rgba(0, 214, 137, 0.3);
    color: var(--color-primary-bright);
}

.bet-slip-toggle .toggle-icon {
    transition: transform 0.3s ease;
}

body.page-odds-market.slip-open .bet-slip-toggle .toggle-icon {
    transform: rotate(180deg);
}


/* --- Bet Slip Body --- */

.bet-slip-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}

.bet-slip-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 20px;
    text-align: center;
}

.slip-empty-icon {
    font-size: 2.5rem;
    opacity: 0.35;
}

.slip-empty-text {
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.45);
}


/* --- Bet Slip Picks --- */

.bet-slip-picks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.slip-pick {
    position: relative;
    padding: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.slip-pick-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.slip-pick-game {
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.55);
}

.slip-pick-remove {
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: color 0.15s ease;
}

.slip-pick-remove:hover { color: #ff6464; }

.slip-pick-selection {
    margin-bottom: 6px;
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: #ffffff;
}

.slip-pick-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.slip-pick-book {
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 214, 137, 0.8);
}

.slip-pick-odds {
    /* NUMBERS - Mono */
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-primary-bright);
}


/* --- Bet Slip Input --- */

.slip-pick-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slip-input-label {
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.slip-input {
    flex: 1;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    
    /* NUMBERS - Mono */
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    text-align: right;
    color: #ffffff;
}

.slip-input:focus {
    outline: none;
    border-color: rgba(0, 214, 137, 0.5);
}


/* --- Payout Display --- */

.slip-pick-payout {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.slip-payout-label {
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.5);
}

.slip-payout-value {
    /* NUMBERS - Mono */
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: #66ffbb;
}


/* --- Bet Slip Footer --- */

.bet-slip-footer {
    padding: 18px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 214, 137, 0.15);
}

.bet-slip-footer[hidden] { display: none; }

.slip-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.slip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slip-label {
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.7);
}

.slip-value {
    /* NUMBERS - Mono */
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: #ffffff;
}

.slip-value.slip-win { color: #66ffbb; }

.slip-clear-btn {
    width: 100%;
    padding: 14px;
    background: rgba(255, 100, 100, 0.08);
    border: 1px solid rgba(255, 100, 100, 0.25);
    border-radius: 6px;
    
    /* Garamond */
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ff6464;
    
    cursor: pointer;
    transition: all 0.2s ease;
}

.slip-clear-btn:hover {
    background: rgba(255, 100, 100, 0.15);
    border-color: rgba(255, 100, 100, 0.4);
}


/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1400px) {
    .books-header-game,
    .game-info {
        flex: 0 0 260px;
    }
    
    .book-odds-col,
    .book-header-col {
        min-width: 95px;
    }
}

@media (max-width: 1200px) {
    body.page-odds-market .main-container,
    body.page-odds-market.slip-open .main-container {
        padding-right: 20px;
    }
    
    .bet-slip {
        width: 100%;
        max-width: 400px;
        transform: translateX(100%);
    }
    
    .books-header-game,
    .game-info {
        flex: 0 0 220px;
    }
    
    .book-full-name { display: none; }
}

@media (max-width: 992px) {
    .market-selector {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .market-selector-right {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
    
    .books-header-game,
    .game-info {
        flex: 0 0 200px;
    }
    
    .book-odds-col,
    .book-header-col {
        min-width: 85px;
    }
}

@media (max-width: 768px) {
    .books-header { display: none; }
    
    .game-row { flex-direction: column; }
    
    .game-info {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    
    .game-books { flex-wrap: wrap; }
    
    .book-odds-col {
        flex: 1 1 50%;
        min-width: 50%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    
    .book-odds-col::before {
        content: attr(data-book);
        display: block;
        padding: 8px 10px;
        background: rgba(0, 0, 0, 0.3);
        /* Garamond */
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
        color: rgba(255, 255, 255, 0.6);
    }
    
    .market-btn {
        flex: 1;
        padding: 10px 14px;
    }
}

@media (max-width: 480px) {
    .book-odds-col {
        flex: 1 1 100%;
        min-width: 100%;
    }
    
    .odds-cell {
        flex-direction: row;
        justify-content: space-between;
        padding: 12px 14px;
    }
}
.page--picks {
  background: linear-gradient(135deg, #0f172a 0%, #111827 40%, #0b1323 100%);
  color: #e5e7eb;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.toolbar {
  background: rgba(17, 24, 39, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.toolbar__title {
  font-size: 1.2rem;
  font-weight: 700;
}

.toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  background: #10b981;
  color: #0b1323;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
}

.status-pill {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 0.85rem;
}

.page__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.filter-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-card label {
  font-size: 0.9rem;
  color: #9ca3af;
}

.filter-card select {
  background: #0f172a;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px;
}

.summary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  font-weight: 600;
}

.table-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  overflow: auto;
}

.picks-table {
  width: 100%;
  border-collapse: collapse;
  color: #e5e7eb;
}

.picks-table th,
.picks-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  font-size: 0.95rem;
}

.picks-table thead {
  background: rgba(255, 255, 255, 0.06);
}

.picks-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.badge-win {
  color: #22c55e;
  font-weight: 700;
}

.badge-loss {
  color: #ef4444;
  font-weight: 700;
}

.badge-unknown {
  color: #fbbf24;
  font-weight: 700;
}

@media (max-width: 768px) {
  .picks-table th:nth-child(3),
  .picks-table td:nth-child(3),
  .picks-table th:nth-child(4),
  .picks-table td:nth-child(4) {
    display: none;
  }
}
/* ==========================================================================
   WEEKLY LINEUP PAGE - CUSTOM STYLES
   ==========================================================================
   Specific styles for the weekly lineup table extending the base table styles
   Now matches the dashboard layout and styling
   ========================================================================== */

/* ===== PAGE SPECIFIC - WITH HERO BANNER ===== */
body.page-weekly-lineup {
    --weekly-accent-primary: var(--emerald-500);
    --weekly-accent-secondary: var(--gold-400);
    --weekly-surface: rgba(8, 16, 28, 0.75);
    --weekly-border: rgba(80, 100, 130, 0.25);
    --weekly-text: #e6f2f6;
    --dashboard-topline-height: 91px; /* 20% bump from 76px for logo/text */
    
    /* Force Garamond typography for table */
    --table-font: var(--font-body);

    /* Zebra Stripe Overrides - High Contrast with More Transparency */
    --zebra-odd: rgba(4, 12, 24, 0.15);
    --zebra-even: rgba(30, 55, 85, 0.08);

    background-color: rgba(3, 11, 22, 0.18);
    background-image: url('/assets/JB_Bearish_Market_FULL_page.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    isolation: isolate;
}

/* ===== OVERLAY EFFECTS - MATCHING ODDS MARKET ===== */
body.page-weekly-lineup::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(4, 10, 20, 0.12) 0%,
        rgba(4, 10, 20, 0.10) 15%,
        rgba(4, 10, 20, 0.08) 30%,
        rgba(4, 10, 20, 0.14) 50%,
        rgba(4, 10, 20, 0.18) 75%,
        rgba(4, 10, 20, 0.25) 100%);
    pointer-events: none;
    opacity: 0.2;
}

/* Additional wash to fade the bear image - MATCHING ODDS MARKET */
body.page-weekly-lineup::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: rgba(3, 11, 22, 0.75);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ==========================================================================
   NAV & HEADER (weekly lineup - floating/transparent)
   ========================================================================== */
body.page-weekly-lineup .brand-nav {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

body.page-weekly-lineup .nav-links {
    margin-top: 0;
}

body.page-weekly-lineup .nav-link {
    color: #e6f2f6 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 4px 8px !important;
}

body.page-weekly-lineup .nav-link:hover,
body.page-weekly-lineup .nav-link:focus-visible {
    color: #00e6a3 !important;
    text-shadow: 
        0 0 8px rgba(0, 214, 137, 0.5),
        0 1px 2px rgba(0, 31, 63, 0.9) !important;
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.1), rgba(0, 31, 63, 0.1)) !important;
}

body.page-weekly-lineup .nav-link.active {
    color: #00e6a3 !important;
    text-shadow: 
        0 0 6px rgba(0, 214, 137, 0.4),
        0 1px 2px rgba(0, 31, 63, 0.9) !important;
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.15), rgba(0, 31, 63, 0.15)) !important;
    border-bottom: none !important;
}

/* ==========================================================================
   LAYOUT SHELL (weekly lineup - matching dashboard)
   ========================================================================== */
body.page-weekly-lineup .main-container {
    padding: 0 0 20px;
    margin-top: 156px; /* moved down ~1 inch (96px) to show more of the bear background */
}

body.page-weekly-lineup .main-dashboard-layout {
    gap: 8px;
}

/* ===== DASHBOARD TOPLINE - FLOATING/TRANSPARENT ===== */
body.page-weekly-lineup .dashboard-topline {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 6px 0.5in 0; /* minimal bottom padding to bring title closer to table */
    margin-bottom: 8px; /* small gap between title section and table */
}

/* ===== BRAND HEADER STYLING ===== */
body.page-weekly-lineup .brand-header-inline,
body.page-weekly-lineup .brand-header {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

body.page-weekly-lineup .brand-line-1,
body.page-weekly-lineup .brand-line-2 {
    color: var(--weekly-text);
}

/* ==========================================================================
   KPI TILES (weekly lineup - matching dashboard)
   ========================================================================== */
body.page-weekly-lineup .kpi-tiles {
    gap: 10px;
    padding: 0 4px;
}

body.page-weekly-lineup .kpi-tile {
    background: linear-gradient(160deg, rgba(10, 18, 32, 0.82) 0%, rgba(8, 16, 28, 0.78) 100%);
    border: 1px solid rgba(80, 100, 130, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
}

body.page-weekly-lineup .kpi-tile:hover {
    border-color: rgba(100, 120, 150, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

body.page-weekly-lineup .kpi-tile-layer.active {
    animation: weeklyTileFade 280ms ease;
}

body.page-weekly-lineup .kpi-label {
    color: rgba(214, 232, 236, 0.8);
    letter-spacing: 0.08em;
}

body.page-weekly-lineup .kpi-value {
    font-size: 1.32rem;
    letter-spacing: 0.01em;
}

body.page-weekly-lineup .kpi-subtext {
    color: var(--weekly-accent-secondary);
    opacity: 0.95;
}

@keyframes weeklyTileFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== INTRO SECTION (legacy, hidden) ===== */
.page-weekly-lineup .weekly-lineup-intro {
    display: none;
}

/* ===== SEGMENT KEY ===== */
.page-weekly-lineup .segment-key {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.page-weekly-lineup .segment-key .segment-chip {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   TABLE CONTAINER (weekly lineup - semi-transparent)
   ========================================================================== */
body.page-weekly-lineup .table-container,
.page-weekly-lineup .weekly-lineup-table-wrapper {
    margin-top: 0;
    margin-left: 0.5in;
    margin-right: 0.5in;
    width: calc(100% - 1in);
    box-sizing: border-box;
    /* Don't create a stacking context that traps dropdowns */
    position: relative;
    z-index: 1;
    overflow: visible !important; /* Allow dropdowns to overflow */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0;
    position: relative;
    overflow: visible; /* allow page scroll so sticky header anchors to viewport */
    contain: none !important; /* CRITICAL: don't trap dropdown cards in a containment context */
}

.page-weekly-lineup .weekly-lineup-table {
    /* Override picks-table.css --table-font: 'Inter' with Garamond for weekly lineup */
    --table-font: var(--font-body) !important;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    /* CRITICAL: header filter dropdown cards live inside table markup; don't clip them */
    overflow: visible !important;
}

/* Ensure nothing in the header row clips dropdown cards */
.page-weekly-lineup .weekly-lineup-table thead,
.page-weekly-lineup .weekly-lineup-table thead tr,
.page-weekly-lineup .weekly-lineup-table thead th {
    overflow: visible !important;
}

/* Prevent table cell overflow - add ellipsis for long content */
.weekly-lineup-table td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    white-space: nowrap !important;
    max-width: 0 !important; /* Required for ellipsis with table-layout: fixed */
    padding: 0.5rem 0.75rem !important;
    box-sizing: border-box;
}

/* Ensure compact columns fit content */
.weekly-lineup-table td:nth-child(2),
.weekly-lineup-table td:nth-child(4),
.weekly-lineup-table td:nth-child(6),
.weekly-lineup-table td:nth-child(8) {
    padding: 0.4rem 0.5rem !important;
    white-space: nowrap !important;
}

/* Allow specific cells to wrap when needed (Matchup, Pick) */
.weekly-lineup-table td:nth-child(3),
.weekly-lineup-table td[data-label="Matchup"] {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    max-width: 0 !important;
}

.weekly-lineup-table td:nth-child(5),
.weekly-lineup-table td[data-label="Pick"] {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    max-width: 0 !important;
}

/* Column widths for weekly lineup - 8 columns (total: 100%)
   1: Date/Time  2: League  3: Matchup  4: Segment  5: Pick  6: Edge  7: Fire  8: Track
   Override base component min-widths and apply fixed widths to both th and td */
.weekly-lineup-table thead th:nth-child(1),
.weekly-lineup-table tbody td:nth-child(1) { 
    width: 12% !important; 
    min-width: 120px !important; 
    max-width: 12% !important;
}   /* Date & Time (CST) */
.weekly-lineup-table thead th:nth-child(2),
.weekly-lineup-table tbody td:nth-child(2) { 
    width: 6% !important; 
    min-width: 65px !important; 
    max-width: 6% !important;
}   /* League */
.weekly-lineup-table thead th:nth-child(3),
.weekly-lineup-table tbody td:nth-child(3) { 
    width: 25% !important; 
    min-width: 220px !important; 
    max-width: 25% !important;
}  /* Matchup */
.weekly-lineup-table thead th:nth-child(4),
.weekly-lineup-table tbody td:nth-child(4) { 
    width: 8% !important; 
    min-width: 80px !important; 
    max-width: 8% !important;
}   /* Segment */
.weekly-lineup-table thead th:nth-child(5),
.weekly-lineup-table tbody td:nth-child(5) { 
    width: 18% !important; 
    min-width: 160px !important; 
    max-width: 18% !important;
}  /* Pick */
.weekly-lineup-table thead th:nth-child(6),
.weekly-lineup-table tbody td:nth-child(6) { 
    width: 8% !important; 
    min-width: 75px !important; 
    max-width: 8% !important;
}  /* Edge */
.weekly-lineup-table thead th:nth-child(7),
.weekly-lineup-table tbody td:nth-child(7) { 
    width: 15% !important; 
    min-width: 130px !important; 
    max-width: 15% !important;
}  /* Fire */
.weekly-lineup-table thead th:nth-child(8),
.weekly-lineup-table tbody td:nth-child(8) { 
    width: 8% !important; 
    min-width: 70px !important; 
    max-width: 8% !important;
}   /* Track */

/* Tracker column header - prevent overflow */
.weekly-lineup-table thead th:last-child .header-main-text {
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ===== TABLE HEADERS - VERY TRANSPARENT GREEN GRADIENT ===== */
body.page-weekly-lineup .picks-table thead th,
.weekly-lineup-table thead th {
    background: linear-gradient(180deg,
        rgba(0, 214, 137, 0.06) 0%,
        rgba(0, 214, 137, 0.03) 45%,
        rgba(8, 12, 22, 0.18) 100%);
    background-color: rgba(8, 12, 22, 0.15);
    border-bottom: 1px solid rgba(0, 214, 137, 0.20);
    border-right: 1px solid rgba(0, 214, 137, 0.08); /* faint separators between headers */
    padding: 0.75rem 0.75rem;
    text-align: center;
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f4fbff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    line-height: 1.2;
    position: relative;
}

.weekly-lineup-table thead th:first-child {
    border-top-left-radius: 8px;
}

.weekly-lineup-table thead th:last-child {
    border-top-right-radius: 8px;
    border-right: none;
}

/* Sticky header: lock th to top with its own stacking context - VERY TRANSPARENT */
.page-weekly-lineup .weekly-lineup-table thead,
.page-weekly-lineup .picks-table thead {
    position: sticky !important;
    top: 0;
    z-index: 110;
    background: transparent !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.page-weekly-lineup .weekly-lineup-table thead th,
.page-weekly-lineup .picks-table thead th {
    position: relative; /* Contain absolutely positioned filter button */
    text-align: center;
    padding: 8px 6px !important; /* Compact padding for consistent heights */
    background-clip: padding-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    vertical-align: middle;
}

/* Center header labels without filter buttons offsetting alignment */
.page-weekly-lineup .weekly-lineup-table .th-header-shell {
    position: static; /* Let filter button position relative to th, not shell */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0; /* Remove gap so filter button doesn't affect centering */
}

.page-weekly-lineup .weekly-lineup-table .th-sort-btn {
    /* Sort button - relative positioning for sort icon */
    flex: 1 1 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 20px 4px 4px !important;
    gap: 0;
    min-height: unset;
    position: relative;
}

/* Header main text styling */
.page-weekly-lineup .weekly-lineup-table .header-main-text {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Header subtext (CST, Away vs Home) - positioned below main text */
.page-weekly-lineup .weekly-lineup-table .header-subtext {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(200, 215, 225, 0.7);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-top: 2px;
    line-height: 1;
}

/* Sort icon positioned at end of sort button - LARGER SIZE */
.page-weekly-lineup .weekly-lineup-table .sort-icon {
    position: absolute !important;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    margin: 0;
    opacity: 0.7;
    font-weight: bold;
}

.page-weekly-lineup .weekly-lineup-table th:hover .sort-icon,
.page-weekly-lineup .weekly-lineup-table th.sorted-asc .sort-icon,
.page-weekly-lineup .weekly-lineup-table th.sorted-desc .sort-icon,
.page-weekly-lineup .weekly-lineup-table th[data-sort].sort-asc .sort-icon,
.page-weekly-lineup .weekly-lineup-table th[data-sort].sort-desc .sort-icon {
    opacity: 1;
}

/* Filter button - absolutely positioned relative to th cell (not shell) */
body.page-weekly-lineup .weekly-lineup-table thead th .th-filter-btn,
.page-weekly-lineup .weekly-lineup-table thead th .th-filter-btn,
body.page-weekly-lineup .picks-table.weekly-lineup-table thead th .th-filter-btn,
.page-weekly-lineup .picks-table.weekly-lineup-table thead th .th-filter-btn {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 102 !important;
    pointer-events: auto !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Sticky header fix: ensure tbody starts below header when sticky - MORE VISIBLE */
.page-weekly-lineup .picks-table tbody {
    position: relative;
    z-index: 10;
    background: rgba(8, 12, 22, 0.52);
}

/* ===== TABLE BODY - HIGHLY VISIBLE ZEBRA STRIPES (+45% total opacity) ===== */
body.page-weekly-lineup .picks-table tbody tr,
.weekly-lineup-table tbody tr {
    border-bottom: 1px solid rgba(80, 100, 130, 0.12);
    transition: background-color 0.2s ease;
    background: transparent;
}

body.page-weekly-lineup .picks-table tbody tr:nth-child(odd),
.weekly-lineup-table tbody tr:nth-child(odd) {
    background: rgba(4, 12, 24, 0.42);
}

body.page-weekly-lineup .picks-table tbody tr:nth-child(even),
.weekly-lineup-table tbody tr:nth-child(even) {
    background: rgba(30, 55, 85, 0.28);
}

body.page-weekly-lineup .picks-table tbody tr:hover,
.weekly-lineup-table tbody tr:hover {
    background: rgba(40, 60, 90, 0.48);
}

.weekly-lineup-table tbody td {
    padding: 0.4rem 0.4rem;
    color: rgba(232, 240, 242, 0.95);
    vertical-align: middle;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 0.825rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Center the Recommended Pick column (3rd column) */
.weekly-lineup-table tbody td:nth-child(3) {
    text-align: center;
}

/* ===== TIME CELL ===== */
.weekly-lineup-table .cell-time {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--neutral-300);
    letter-spacing: 0.02em;
}

/* ===== MATCHUP CELL - INLINE COMPACT ===== */
.weekly-lineup-table .matchup-inline {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.weekly-lineup-table .matchup-inline .team-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}

.weekly-lineup-table .matchup-inline .team-abbr {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 0.825rem;
    color: var(--neutral-100);
    letter-spacing: 0.02em;
}

.weekly-lineup-table .matchup-inline .vs-at {
    color: var(--neutral-500);
    font-size: 0.65rem;
    font-weight: 400;
    margin: 0 0.1rem;
}

/* ===== PICK CELL - INLINE COMPACT ===== */
.weekly-lineup-table .pick-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.weekly-lineup-table .pick-inline .pick-team-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}

.weekly-lineup-table .pick-inline .pick-team {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.825rem;
    color: var(--emerald-400);
    letter-spacing: 0.02em;
}

.weekly-lineup-table .pick-inline .pick-direction {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.825rem;
    color: var(--emerald-400);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.weekly-lineup-table .pick-inline .pick-line {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 0.825rem;
    color: var(--neutral-100);
}

.weekly-lineup-table .pick-inline .pick-odds {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--neutral-400);
}

/* ===== PICK CELL - UNIFIED STYLING ===== */
/* Team name in pick cell */
.weekly-lineup-table .pick-team-name {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--emerald-400);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Line value (spread number or ML) */
.weekly-lineup-table .pick-line-value {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--neutral-100);
    letter-spacing: 0.01em;
}

/* Odds display - matches team-record color */
.weekly-lineup-table .pick-odds {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--neutral-400);
    letter-spacing: 0.01em;
}

/* Legacy - keep for backwards compat */
.weekly-lineup-table .pick-team-abbr {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--emerald-400);
    letter-spacing: 0.02em;
}

.weekly-lineup-table .pick-odds-line {
    font-family: var(--font-display, 'Oswald', sans-serif) !important;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--neutral-400);
    letter-spacing: 0.01em;
}

/* ===== MODEL CELL ===== */
.weekly-lineup-table .cell-model {
    font-family: var(--font-display, 'Oswald', sans-serif) !important;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--neutral-200);
}

/* ===== MARKET CELL ===== */
.weekly-lineup-table .cell-market .market-odds {
    font-family: var(--font-display, 'Oswald', sans-serif) !important;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--gold-400);
    padding: 0.15rem 0.35rem;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 4px;
    display: inline-block;
}

/* ===== EDGE + FIRE CELL ===== */
.weekly-lineup-table .edge-fire-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.weekly-lineup-table .edge-value {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    display: inline-block;
    min-width: 42px;
    text-align: center;
}

.weekly-lineup-table .edge-value.edge-hot {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.15);
    border: 1px solid rgba(255, 68, 68, 0.3);
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
}

.weekly-lineup-table .edge-value.edge-good {
    color: var(--emerald-400);
    background: rgba(0, 214, 137, 0.12);
    border: 1px solid rgba(0, 214, 137, 0.3);
}

.weekly-lineup-table .edge-value.edge-ok {
    color: var(--gold-400);
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.weekly-lineup-table .edge-value.edge-low {
    color: var(--neutral-400);
    background: rgba(100, 116, 139, 0.12);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

/* Fire indicators - integrated compact style */
.weekly-lineup-table .fire-max {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.6rem;
    color: #fff;
    background: linear-gradient(135deg, #ff4444 0%, #ff6600 100%);
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    animation: fireGlow 1.5s ease-in-out infinite alternate;
}

@keyframes fireGlow {
    from { box-shadow: 0 0 4px rgba(255, 68, 68, 0.4); }
    to { box-shadow: 0 0 10px rgba(255, 102, 0, 0.6); }
}

/* Fire MAX badge - red on fire type effect */
.weekly-lineup-table .fire-max-badge {
    display: inline-block;
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.65rem;
    color: #fff;
    background: linear-gradient(135deg, #ff2222 0%, #ff6600 50%, #ffaa00 100%);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    animation: fireBadgeGlow 1s ease-in-out infinite alternate;
    vertical-align: middle;
    margin-left: 0.25rem;
}

@keyframes fireBadgeGlow {
    from {
        box-shadow: 0 0 4px rgba(255, 34, 34, 0.6), 0 0 8px rgba(255, 102, 0, 0.4);
        filter: brightness(1);
    }
    to {
        box-shadow: 0 0 8px rgba(255, 102, 0, 0.8), 0 0 16px rgba(255, 170, 0, 0.5);
        filter: brightness(1.1);
    }
}

.weekly-lineup-table .fire-high {
    color: #ff6600;
    font-size: 0.6rem;
    letter-spacing: -1px;
}

.weekly-lineup-table .fire-med {
    color: var(--gold-400);
    font-size: 0.6rem;
    letter-spacing: -1px;
}

.weekly-lineup-table .fire-low {
    color: var(--neutral-400);
    font-size: 0.6rem;
    letter-spacing: -1px;
}

.weekly-lineup-table .fire-min {
    color: var(--neutral-600);
    font-size: 0.6rem;
}

/* ===== TRACKER BUTTON - COMPACT ===== */
.weekly-lineup-table .tracker-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-500) 100%);
    color: white;
    border: 1px solid var(--emerald-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.weekly-lineup-table .tracker-btn:hover {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-400) 100%);
    box-shadow: 0 0 12px var(--emerald-400);
    transform: scale(1.05);
}

.weekly-lineup-table .tracker-btn.added {
    background: transparent;
    color: var(--emerald-400);
    border-color: var(--emerald-400);
}

.weekly-lineup-table .tracker-btn.added::before {
    content: '✓';
}

.weekly-lineup-table .matchup-stack .versus {
    color: var(--neutral-400);
    font-size: 0.875rem;
}

/* ===== DATE/TIME CELLS ===== */
.weekly-lineup-table .cell-date {
    font-weight: 600;
    color: var(--neutral-100);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.weekly-lineup-table .cell-time {
    font-size: 0.85rem;
    color: var(--neutral-400);
}

/* ===== CONFIDENCE METER ===== */
.page-weekly-lineup .confidence-meter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-weekly-lineup .confidence-meter .confidence-score {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--neutral-100);
    min-width: 2.5rem;
}

.page-weekly-lineup .confidence-meter .confidence-bars {
    display: flex;
    gap: 2px;
}

.page-weekly-lineup .confidence-meter .bar {
    width: 12px;
    height: 8px;
    background: rgba(0, 214, 137, 0.15);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.page-weekly-lineup .confidence-meter .bar.filled {
    background: linear-gradient(90deg,
        var(--emerald-500) 0%,
        var(--emerald-400) 100%);
    box-shadow: 0 0 4px var(--emerald-500);
}

.page-weekly-lineup .confidence-meter .bar.half {
    background: linear-gradient(90deg,
        var(--emerald-500) 0%,
        var(--emerald-500) 50%,
        rgba(0, 214, 137, 0.15) 50%,
        rgba(0, 214, 137, 0.15) 100%);
}

/* ===== RATIONALE COLUMN ===== */
.weekly-lineup-table td[data-label="Rationale"] {
    font-size: 0.875rem;
    color: var(--neutral-300);
    line-height: 1.4;
}

/* ===== ANIMATIONS ===== */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ===== FILTER DROPDOWNS ===== */
/* NOTE: `.th-header-shell` is already fully defined earlier for weekly lineup headers.
   Keeping a second, generic definition here causes header centering + filter button
   positioning to fight each other. */

/* ==========================================================================
   FILTER DROPDOWNS - Card Style (drops DOWN below header)
   Works both inside page context AND when moved to body
   ========================================================================== */

/* ==========================================================================
   FILTER DROPDOWN CARDS - High Contrast Readable Design
   ========================================================================== */

/* Global dropdown container (legacy) */
.th-filter-dropdown.open:not(.weekly-lineup-filter-dropdown) {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    min-width: 200px !important;
    max-width: 260px !important;
    background: #0d1117 !important;
    border: 1px solid rgba(48, 54, 61, 0.8) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.3) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

/* Dropdown header */
.th-filter-dropdown .filter-header-integrated {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 12px !important;
    background: rgba(22, 27, 34, 0.95) !important;
    border-bottom: 1px solid rgba(48, 54, 61, 0.6) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

.th-filter-dropdown .filter-title {
    font-family: var(--font-display, 'Oswald', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #e6edf3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Filter sections */
.th-filter-dropdown .filter-section-compact,
.th-filter-dropdown .date-range-selector {
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(48, 54, 61, 0.4) !important;
}

.th-filter-dropdown .filter-section-compact:last-child {
    border-bottom: none !important;
    padding-bottom: 12px !important;
}

.th-filter-dropdown .section-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #8b949e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
}

/* ==========================================================================
   UNIFIED FILTER OPTION - High contrast buttons
   ========================================================================== */
.th-filter-dropdown .league-filter-chip,
.th-filter-dropdown .segment-chip,
.th-filter-dropdown .segment-pill,
.th-filter-dropdown .edge-filter-chip,
.th-filter-dropdown .fire-filter-chip,
.th-filter-dropdown .bet-type-chip,
.th-filter-dropdown .range-filter-chip,
.th-filter-dropdown .date-range-btn,
.th-filter-dropdown .time-slot,
.th-filter-dropdown .book-chip,
.th-filter-dropdown .league-pill,
.th-filter-dropdown .ticket-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 10px !important;
    background: rgba(33, 38, 45, 0.8) !important;
    border: 1px solid rgba(48, 54, 61, 0.8) !important;
    border-radius: 4px !important;
    color: #c9d1d9 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    white-space: nowrap !important;
}

/* Hover state - clear visual feedback */
.th-filter-dropdown .league-filter-chip:hover,
.th-filter-dropdown .segment-chip:hover,
.th-filter-dropdown .segment-pill:hover,
.th-filter-dropdown .edge-filter-chip:hover,
.th-filter-dropdown .fire-filter-chip:hover,
.th-filter-dropdown .bet-type-chip:hover,
.th-filter-dropdown .range-filter-chip:hover,
.th-filter-dropdown .date-range-btn:hover,
.th-filter-dropdown .time-slot:hover,
.th-filter-dropdown .book-chip:hover,
.th-filter-dropdown .league-pill:hover,
.th-filter-dropdown .ticket-pill:hover {
    background: rgba(48, 54, 61, 0.9) !important;
    border-color: rgba(139, 148, 158, 0.4) !important;
    color: #f0f6fc !important;
}

/* Active state - clear green accent */
.th-filter-dropdown .league-filter-chip.active,
.th-filter-dropdown .segment-chip.active,
.th-filter-dropdown .segment-pill.active,
.th-filter-dropdown .edge-filter-chip.active,
.th-filter-dropdown .fire-filter-chip.active,
.th-filter-dropdown .bet-type-chip.active,
.th-filter-dropdown .range-filter-chip.active,
.th-filter-dropdown .date-range-btn.active,
.th-filter-dropdown .time-slot.active,
.th-filter-dropdown .book-chip.active,
.th-filter-dropdown .league-pill.active,
.th-filter-dropdown .ticket-pill.active {
    background: rgba(46, 160, 67, 0.15) !important;
    border-color: rgba(46, 160, 67, 0.5) !important;
    color: #3fb950 !important;
    font-weight: 600 !important;
}

/* Quick action buttons - clear and clickable */
.th-filter-dropdown .filter-action-btn {
    padding: 4px 8px !important;
    background: rgba(33, 38, 45, 0.6) !important;
    border: 1px solid rgba(48, 54, 61, 0.6) !important;
    border-radius: 4px !important;
    color: #8b949e !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
}

.th-filter-dropdown .filter-action-btn:hover {
    background: rgba(48, 54, 61, 0.8) !important;
    border-color: rgba(139, 148, 158, 0.4) !important;
    color: #c9d1d9 !important;
}

/* All grid/flex containers - readable spacing */
.th-filter-dropdown .league-filter-grid,
.th-filter-dropdown .fire-filter-grid,
.th-filter-dropdown .edge-filter-grid,
.th-filter-dropdown .bet-type-grid,
.th-filter-dropdown .range-filter-grid,
.th-filter-dropdown .segment-pills,
.th-filter-dropdown .time-slots,
.th-filter-dropdown .sportsbook-chips,
.th-filter-dropdown .league-pills,
.th-filter-dropdown .ticket-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.th-filter-dropdown .filter-quick-actions {
    display: flex !important;
    gap: 6px !important;
}

/* Chip logo/icon sizing */
.th-filter-dropdown .chip-logo {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    opacity: 0.9 !important;
}

.th-filter-dropdown .chip-indicator {
    font-size: 6px !important;
    color: #3fb950 !important;
}

.th-filter-dropdown .chip-text,
.th-filter-dropdown .bet-label,
.th-filter-dropdown .edge-chip-label,
.th-filter-dropdown .fire-chip-label {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Edge tier indicators - clear color coding */
.th-filter-dropdown .edge-tier {
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
}
.th-filter-dropdown .edge-tier.tier-hot { background: #f85149 !important; }
.th-filter-dropdown .edge-tier.tier-good { background: #3fb950 !important; }
.th-filter-dropdown .edge-tier.tier-ok { background: #d29922 !important; }
.th-filter-dropdown .edge-tier.tier-low { background: #6e7681 !important; }

/* Fire bars - signal strength style */
.th-filter-dropdown .fire-bars {
    display: flex !important;
    align-items: flex-end !important;
    gap: 2px !important;
    height: 12px !important;
}
.th-filter-dropdown .fire-bars i {
    display: block !important;
    width: 3px !important;
    background: #484f58 !important;
    border-radius: 1px !important;
}
.th-filter-dropdown .fire-bars i:nth-child(1) { height: 4px !important; }
.th-filter-dropdown .fire-bars i:nth-child(2) { height: 6px !important; }
.th-filter-dropdown .fire-bars i:nth-child(3) { height: 8px !important; }
.th-filter-dropdown .fire-bars i:nth-child(4) { height: 10px !important; }
.th-filter-dropdown .fire-bars i:nth-child(5) { height: 12px !important; }

/* Active fire - orange glow */
.th-filter-dropdown .fire-filter-chip.active .fire-bars i {
    background: #d29922 !important;
}
.th-filter-dropdown .fire-filter-chip.fire-max.active .fire-bars i {
    background: #f85149 !important;
}

/* Book chip checkbox hidden */
.th-filter-dropdown .book-chip input[type="checkbox"] {
    display: none !important;
}

/* Filter dropdowns - High contrast compact style (legacy fallback) */
body.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown),
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) {
    position: fixed !important;
    min-width: 180px !important;
    max-width: 240px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* High contrast dark background */
    background: rgba(8, 12, 20, 0.98) !important;

    /* Green accent border for visibility */
    border: 1px solid rgba(0, 214, 137, 0.35) !important;
    border-radius: 8px !important;
    padding: 0 !important;

    /* Clean shadow */
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

    z-index: 2147483647 !important;
    pointer-events: auto !important;

    display: none;
    flex-direction: column !important;

    isolation: isolate !important;
}

/* Hidden state */
body.page-weekly-lineup .th-filter-dropdown[hidden],
.page-weekly-lineup .th-filter-dropdown[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Open state with animation (legacy) */
body.page-weekly-lineup .th-filter-dropdown.open:not(.weekly-lineup-filter-dropdown),
.page-weekly-lineup .th-filter-dropdown.open:not(.weekly-lineup-filter-dropdown) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: filterCardDrop 120ms ease-out !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
}

@keyframes filterCardDrop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown header bar */
body.page-weekly-lineup .filter-header-integrated,
.page-weekly-lineup .filter-header-integrated {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.25rem !important;
    background: linear-gradient(
        180deg,
        rgba(0, 214, 137, 0.08) 0%,
        transparent 100%
    ) !important;
    border-bottom: 1px solid rgba(0, 214, 137, 0.15) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

body.page-weekly-lineup .filter-title,
.page-weekly-lineup .filter-title {
    font-family: var(--font-display, 'Oswald', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--emerald-400) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Quick action buttons in dropdown header */
.page-weekly-lineup .filter-quick-actions {
    display: flex;
    gap: 0.5rem;
}

.page-weekly-lineup .filter-action-btn {
    padding: 0.35rem 0.65rem;
    background: rgba(0, 214, 137, 0.08);
    border: 1px solid rgba(0, 214, 137, 0.25);
    border-radius: 4px;
    color: var(--neutral-200);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.page-weekly-lineup .filter-action-btn:hover {
    background: rgba(0, 214, 137, 0.18);
    border-color: var(--emerald-400);
    color: var(--emerald-300);
    transform: translateY(-1px);
}

/* Filter content sections */
.page-weekly-lineup .filter-section-compact {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(80, 100, 130, 0.12);
}

.page-weekly-lineup .filter-section-compact:last-child {
    border-bottom: none;
}

.page-weekly-lineup .section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

/* League filter chips - grid of logo buttons */
.page-weekly-lineup .league-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.page-weekly-lineup .league-filter-chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.page-weekly-lineup .league-filter-chip:hover {
    background: rgba(180, 160, 120, 0.08);
    border-color: rgba(180, 160, 120, 0.25);
}

.page-weekly-lineup .league-filter-chip.active {
    background: rgba(180, 160, 120, 0.12);
    border-color: rgba(200, 180, 140, 0.4);
}

.page-weekly-lineup .league-filter-chip .chip-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.85;
}

.page-weekly-lineup .league-filter-chip.active .chip-logo {
    opacity: 1;
}

/* Chip indicator dot for "All" option */
.page-weekly-lineup .league-filter-chip .chip-indicator {
    font-size: 0.5rem;
    color: rgba(180, 160, 120, 0.6);
}

.page-weekly-lineup .league-filter-chip.active .chip-indicator {
    color: rgba(220, 200, 160, 1);
}

.page-weekly-lineup .league-filter-chip .chip-text {
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(200, 210, 220, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-weekly-lineup .league-filter-chip.active .chip-text {
    color: rgba(220, 200, 160, 1);
}

/* Segment/bet type pills - compact premium style */
.page-weekly-lineup .segment-pills,
.page-weekly-lineup .bet-type-chips,
.page-weekly-lineup .bet-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.page-weekly-lineup .segment-pill,
.page-weekly-lineup .bet-type-chip {
    padding: 0.3rem 0.55rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(200, 210, 220, 0.8);
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}

.page-weekly-lineup .segment-pill:hover,
.page-weekly-lineup .bet-type-chip:hover {
    background: rgba(180, 160, 120, 0.08);
    border-color: rgba(180, 160, 120, 0.25);
}

.page-weekly-lineup .segment-pill.active,
.page-weekly-lineup .bet-type-chip.active {
    background: rgba(180, 160, 120, 0.12);
    border-color: rgba(200, 180, 140, 0.4);
    color: rgba(220, 200, 160, 1);
}

/* Date range buttons */
.page-weekly-lineup .date-range-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Date range buttons - premium compact */
.page-weekly-lineup .date-range-btn {
    padding: 0.3rem 0.55rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(200, 210, 220, 0.8);
    cursor: pointer;
    transition: all 0.12s ease;
}

.page-weekly-lineup .date-range-btn:hover {
    background: rgba(180, 160, 120, 0.08);
    border-color: rgba(180, 160, 120, 0.25);
}

.page-weekly-lineup .date-range-btn.active {
    background: rgba(180, 160, 120, 0.12);
    border-color: rgba(200, 180, 140, 0.4);
    color: rgba(220, 200, 160, 1);
}

/* Time slots grid - compact */
.page-weekly-lineup .time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.page-weekly-lineup .time-slot {
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 500;
    color: rgba(180, 190, 200, 0.75);
    cursor: pointer;
    transition: all 0.12s ease;
}

.page-weekly-lineup .time-slot:hover {
    background: rgba(180, 160, 120, 0.06);
    border-color: rgba(180, 160, 120, 0.2);
}

.page-weekly-lineup .time-slot.active {
    background: rgba(180, 160, 120, 0.1);
    border-color: rgba(200, 180, 140, 0.35);
    color: rgba(220, 200, 160, 0.95);
}

/* Edge/Fire filter chips */
.page-weekly-lineup .edge-filter-chips,
.page-weekly-lineup .fire-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.page-weekly-lineup .edge-filter-chip,
.page-weekly-lineup .fire-filter-chip {
    padding: 0.5rem 0.75rem;
    background: rgba(30, 45, 70, 0.35);
    border: 1px solid rgba(80, 100, 130, 0.25);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-200);
    cursor: pointer;
    transition: all 0.15s ease;
}

.page-weekly-lineup .edge-filter-chip:hover,
.page-weekly-lineup .fire-filter-chip:hover {
    background: rgba(0, 214, 137, 0.1);
    border-color: rgba(0, 214, 137, 0.4);
}

.page-weekly-lineup .edge-filter-chip.active,
.page-weekly-lineup .fire-filter-chip.active {
    background: rgba(0, 214, 137, 0.2);
    border-color: var(--emerald-400);
    color: var(--emerald-300);
}

/* Sportsbook chips */
.page-weekly-lineup .sportsbook-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.page-weekly-lineup .book-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    background: rgba(30, 45, 70, 0.35);
    border: 1px solid rgba(80, 100, 130, 0.25);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--neutral-300);
    cursor: pointer;
    transition: all 0.15s ease;
}

.page-weekly-lineup .book-chip input[type="checkbox"] {
    display: none;
}

.page-weekly-lineup .book-chip:hover {
    background: rgba(0, 214, 137, 0.1);
    border-color: rgba(0, 214, 137, 0.4);
}

.page-weekly-lineup .book-chip.active {
    background: rgba(0, 214, 137, 0.15);
    border-color: var(--emerald-400);
    color: var(--emerald-300);
}

/* Team search box */
.page-weekly-lineup .teams-search-box {
    margin-bottom: 0.75rem;
}

.page-weekly-lineup .team-search {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(10, 20, 35, 0.6);
    border: 1px solid rgba(80, 100, 130, 0.3);
    border-radius: 6px;
    color: var(--neutral-100);
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.page-weekly-lineup .team-search:focus {
    outline: none;
    border-color: var(--emerald-400);
    box-shadow: 0 0 0 3px rgba(0, 214, 137, 0.15);
}

.page-weekly-lineup .team-search::placeholder {
    color: var(--neutral-500);
}

/* Filter section list (checkbox style) */
.page-weekly-lineup .filter-section-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.page-weekly-lineup .checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    background: rgba(30, 45, 70, 0.25);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.page-weekly-lineup .checkbox-row:hover {
    background: rgba(0, 214, 137, 0.08);
}

.page-weekly-lineup .checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--emerald-500);
    cursor: pointer;
}

/* Filter footer with apply button */
.page-weekly-lineup .filter-footer {
    padding: 1rem 1.25rem;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 214, 137, 0.05) 100%
    );
    border-top: 1px solid rgba(0, 214, 137, 0.1);
}

.page-weekly-lineup .filter-apply-btn {
    width: 100%;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-500) 100%);
    border: 1px solid var(--emerald-400);
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 214, 137, 0.25);
}

.page-weekly-lineup .filter-apply-btn:hover {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-400) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 214, 137, 0.35);
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-weekly-lineup .filter-apply-btn:hover {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-400) 100%);
    box-shadow: 0 0 12px var(--emerald-400);
}

/* ===== FILTER CHIPS WRAPPER ===== */
.page-weekly-lineup .table-filter-chips-wrapper {
    position: relative;
    margin-bottom: 12px;
    margin-left: 24px;
    margin-right: 24px;
    z-index: 101; /* Above table z-index (100) */
    min-height: 0;
    transition: min-height 0.3s ease;
}

.page-weekly-lineup .table-filter-chips-wrapper:has([data-has-chips="true"]) {
    min-height: 60px;
}

/* ===== FILTER CHIPS ===== */
.page-weekly-lineup .table-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    min-height: 62px;
    background: rgba(6, 12, 28, 0.92);
    border: 1px solid rgba(0, 214, 137, 0.25);
    border-radius: 14px;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: filterChipsPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top center;
    position: relative;
}

.page-weekly-lineup .table-filter-chips[data-has-chips="false"] {
    display: none !important;
}

@keyframes filterChipsPopIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.page-weekly-lineup .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg,
        rgba(0, 214, 137, 0.2) 0%,
        rgba(0, 180, 120, 0.15) 100%);
    border: 1px solid rgba(0, 214, 137, 0.5);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--emerald-300);
    font-weight: 500;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2),
        0 0 12px rgba(0, 214, 137, 0.15);
    transition: all 0.2s ease;
    animation: chipSlideIn 0.25s ease-out;
}

@keyframes chipSlideIn {
    from {
        opacity: 0;
        transform: translateX(-8px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.page-weekly-lineup .filter-chip:hover {
    background: linear-gradient(135deg,
        rgba(0, 214, 137, 0.25) 0%,
        rgba(0, 180, 120, 0.2) 100%);
    border-color: rgba(0, 214, 137, 0.7);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 16px rgba(0, 214, 137, 0.25);
    transform: translateY(-1px);
}

.page-weekly-lineup .filter-chip .chip-label {
    font-weight: 500;
    letter-spacing: 0.02em;
}

.page-weekly-lineup .filter-chip .chip-remove {
    background: rgba(0, 0, 0, 0.2);
    border: none;
    color: var(--emerald-300);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.page-weekly-lineup .filter-chip .chip-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    transform: scale(1.1);
}

/* ===== DATE FILTER SPECIFIC ===== */
.page-weekly-lineup .date-filter-compact {
    min-width: 320px;
}

.page-weekly-lineup .date-range-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.page-weekly-lineup .date-range-btn {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(0, 214, 137, 0.2);
    border-radius: 4px;
    color: var(--neutral-300);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-weekly-lineup .date-range-btn.active,
.page-weekly-lineup .date-range-btn:hover {
    background: rgba(0, 214, 137, 0.1);
    border-color: var(--emerald-400);
    color: var(--emerald-400);
}

.page-weekly-lineup .time-slots {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===== TIME SLOT BUTTONS ===== */
.page-weekly-lineup .time-slot {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--neutral-600);
    border-radius: 4px;
    color: var(--neutral-300);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-weekly-lineup .time-slot.active,
.page-weekly-lineup .time-slot:hover {
    background: linear-gradient(135deg,
        var(--emerald-600) 0%,
        var(--emerald-500) 100%);
    border-color: var(--emerald-400);
    color: white;
}

/* ===== LEAGUE SELECTOR ===== */
.page-weekly-lineup .league-selector {
    display: flex;
    gap: 0.5rem;
}

.page-weekly-lineup .league-btn {
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: 1px solid var(--neutral-600);
    border-radius: 4px;
    color: var(--neutral-300);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-weekly-lineup .league-btn.active,
.page-weekly-lineup .league-btn:hover {
    background: var(--emerald-500);
    border-color: var(--emerald-400);
    color: white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .weekly-lineup-table {
        table-layout: auto;
    }

    .weekly-lineup-table thead th {
        width: auto !important;
        min-width: 80px;
    }
}

@media (max-width: 768px) {
    .weekly-lineup-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .segment-key {
        width: 100%;
        justify-content: flex-start;
    }

    .weekly-lineup-table td,
    .weekly-lineup-table th {
        padding: 0.75rem 0.5rem;
    }

    .confidence-meter .bar {
        width: 10px;
        height: 6px;
    }
}

/* ==========================================================================
   IMPORT BUTTON (Metallic Transparent Glow Style)
   ========================================================================== */

.page-weekly-lineup .import-tile {
    position: relative;
    display: flex;
    align-items: flex-end; /* Align to bottom edge */
    height: var(--dashboard-topline-height, 76px); /* Match KPI tile container height */
    margin-left: auto; /* Push to far right */
    z-index: 1001;
}

.page-weekly-lineup .import-tile-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 18px;
    min-width: 110px;

    /* Metallic Transparent Look */
    background: linear-gradient(145deg,
        rgba(25, 40, 65, 0.6) 0%,
        rgba(15, 28, 50, 0.7) 100%);
    border: 1px solid rgba(100, 140, 200, 0.25);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.25s ease;

    /* Metallic glow effect */
    box-shadow:
        0 0 12px rgba(80, 120, 180, 0.12),
        0 0 20px rgba(60, 100, 160, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.page-weekly-lineup .import-tile-btn:hover {
    background: linear-gradient(145deg,
        rgba(30, 50, 80, 0.7) 0%,
        rgba(20, 35, 60, 0.8) 100%);
    border-color: rgba(120, 160, 220, 0.35);
    box-shadow:
        0 0 18px rgba(80, 130, 200, 0.2),
        0 0 30px rgba(60, 100, 160, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.page-weekly-lineup .import-tile-btn[aria-expanded="true"] {
    background: linear-gradient(145deg,
        rgba(20, 35, 55, 0.75) 0%,
        rgba(12, 25, 42, 0.85) 100%);
    border-color: var(--color-primary, var(--emerald-400));
    box-shadow:
        0 0 16px rgba(0, 214, 137, 0.15),
        0 0 24px rgba(0, 180, 120, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.page-weekly-lineup .import-tile-icon {
    font-size: 0.55rem;
    font-weight: 400;
    color: var(--color-primary, var(--emerald-400)); /* Same green as sort icons */
    transition: transform 0.3s ease, color 0.2s ease;
    margin-top: 1px;
}

.page-weekly-lineup .import-tile-btn:hover .import-tile-icon {
    color: var(--color-primary, var(--emerald-400));
}

.page-weekly-lineup .import-tile-btn[aria-expanded="true"] .import-tile-icon {
    transform: rotate(180deg);
    color: var(--color-primary, var(--emerald-400));
}

.page-weekly-lineup .import-tile-label {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(180, 200, 230, 0.85); /* Light silver-blue text */
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-weekly-lineup .import-tile-btn:hover .import-tile-label,
.page-weekly-lineup .import-tile-btn[aria-expanded="true"] .import-tile-label {
    color: #fff;
}

/* Hide the sublabel */
.page-weekly-lineup .import-tile-sublabel {
    display: none;
}

/* Dropdown Panel Positioning - Anchor Right */
.page-weekly-lineup .import-tile .import-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    width: 320px;
    background: rgba(10, 20, 30, 0.98); /* Deep dark blue-grey, not pitch black */
    border: 1px solid rgba(0, 214, 137, 0.25);
    border-radius: 6px;
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.75), 
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10000; /* Extremely high z-index to avoid overlap issues */
    overflow: hidden;
    transform-origin: top right;
    animation: dropdownFadeIn 0.2s ease-out;
}

.page-weekly-lineup .import-dropdown-panel:not([hidden]) {
    display: block !important;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   DROPDOWN PANEL CONTENT
   ========================================================================== */

.page-weekly-lineup .import-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(0, 214, 137, 0.05) 0%, rgba(6, 13, 25, 0) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-weekly-lineup .import-dropdown-title {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--emerald-400);
    text-transform: uppercase;
}

.page-weekly-lineup .import-dropdown-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--neutral-400);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.page-weekly-lineup .import-dropdown-close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.page-weekly-lineup .import-dropdown-body {
    padding: 16px;
}

/* Paste Section - Cleaned Up */
.page-weekly-lineup .import-section-label {
    display: block;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.page-weekly-lineup .import-paste-textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--neutral-100);
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.8rem;
    line-height: 1.4;
    resize: none;
    transition: border-color 0.2s ease;
}

.page-weekly-lineup .import-paste-textarea:focus {
    outline: none;
    border-color: var(--emerald-400);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 1px rgba(0, 214, 137, 0.2);
}

.page-weekly-lineup .import-paste-textarea::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.page-weekly-lineup .import-paste-actions {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.page-weekly-lineup .import-btn {
    padding: 8px 12px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-weekly-lineup .import-btn.primary {
    background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-500) 100%);
    border: 1px solid var(--emerald-400);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.page-weekly-lineup .import-btn.primary:hover {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-400) 100%);
    box-shadow: 0 0 12px rgba(0, 214, 137, 0.4);
    transform: translateY(-1px);
}

.page-weekly-lineup .import-btn.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--neutral-400);
}

.page-weekly-lineup .import-btn.secondary:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--neutral-200);
    background: rgba(255, 255, 255, 0.05);
}

/* File Upload Section - Minimal */
.page-weekly-lineup .import-file-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.page-weekly-lineup .import-file-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-weekly-lineup .import-file-zone:hover {
    border-color: var(--emerald-400);
    background: rgba(0, 214, 137, 0.05);
}

.page-weekly-lineup .import-file-icon {
    font-size: 1.1rem;
    filter: grayscale(1);
    opacity: 0.7;
}

.page-weekly-lineup .import-file-text {
    font-size: 0.75rem;
    color: var(--neutral-400);
}

.page-weekly-lineup #file-list {
    margin: 0.5rem 0;
    display: none;
}

.page-weekly-lineup #upload-files-btn {
    width: 100%;
    margin-bottom: 1rem;
    display: none;
}

.page-weekly-lineup #upload-status {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 6px;
    display: none;
}

/* ==========================================================================
   PARSED PICKS PREVIEW - VEGAS SPORTSBOOK STYLE
   ========================================================================== */

.page-weekly-lineup .parsed-picks-container {
    background: linear-gradient(180deg, 
        rgba(8, 16, 32, 0.95) 0%, 
        rgba(4, 10, 22, 0.98) 100%);
    border: 1px solid rgba(0, 214, 137, 0.15);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.page-weekly-lineup .parsed-picks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, 
        rgba(0, 214, 137, 0.12) 0%, 
        rgba(0, 180, 120, 0.05) 50%,
        transparent 100%);
    border-bottom: 1px solid rgba(0, 214, 137, 0.2);
}

.page-weekly-lineup .parsed-picks-title {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--emerald-400);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.page-weekly-lineup .parsed-count {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    font-size: 0.85rem;
}

.page-weekly-lineup .parsed-picks-actions {
    display: flex;
    gap: 0.5rem;
}

.page-weekly-lineup .select-all-btn,
.page-weekly-lineup .clear-selection-btn {
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: var(--neutral-400);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-weekly-lineup .select-all-btn:hover,
.page-weekly-lineup .clear-selection-btn:hover {
    background: rgba(0, 214, 137, 0.15);
    border-color: var(--emerald-400);
    color: var(--emerald-400);
}

/* Vegas-style grid layout */
.page-weekly-lineup .parsed-picks-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    padding: 12px;
    max-height: 420px;
    overflow-y: auto;
}

/* Betting card style */
.page-weekly-lineup .parsed-pick-item {
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, 
        rgba(20, 35, 60, 0.8) 0%, 
        rgba(12, 24, 45, 0.9) 100%);
    border: 1px solid rgba(80, 120, 180, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
}

.page-weekly-lineup .parsed-pick-item:hover {
    border-color: rgba(0, 214, 137, 0.4);
    box-shadow: 0 4px 16px rgba(0, 214, 137, 0.1);
    transform: translateY(-2px);
}

.page-weekly-lineup .parsed-pick-item.selected {
    background: linear-gradient(145deg, 
        rgba(0, 60, 40, 0.6) 0%, 
        rgba(0, 40, 30, 0.8) 100%);
    border-color: var(--emerald-500);
    box-shadow: 
        0 0 20px rgba(0, 214, 137, 0.2),
        inset 0 0 30px rgba(0, 214, 137, 0.05);
}

.page-weekly-lineup .parsed-pick-item.selected::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--emerald-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: white;
    font-weight: bold;
}

/* Hide default checkbox */
.page-weekly-lineup .parsed-pick-checkbox {
    display: none;
}

/* Card header - Team & Matchup */
.page-weekly-lineup .parsed-pick-info {
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-weekly-lineup .parsed-pick-team {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 500;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}

.page-weekly-lineup .parsed-pick-details {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Card body - Odds display */
.page-weekly-lineup .parsed-pick-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 10px;
}

.page-weekly-lineup .parsed-pick-segment {
    flex: 1;
}

.page-weekly-lineup .parsed-pick-segment .segment-chip {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 3px;
}

.page-weekly-lineup .parsed-pick-odds {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--emerald-400);
    padding: 4px 10px;
    background: rgba(0, 214, 137, 0.1);
    border: 1px solid rgba(0, 214, 137, 0.3);
    border-radius: 4px;
    min-width: auto;
    text-align: center;
}

.page-weekly-lineup .parsed-pick-risk {
    font-weight: 600;
    color: var(--gold-400);
    font-size: 0.85rem;
    margin-left: 8px;
}

/* Footer with actions */
.page-weekly-lineup .parsed-picks-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 214, 137, 0.15);
}

.page-weekly-lineup .selected-summary {
    color: var(--neutral-400);
    font-size: 0.85rem;
}

.page-weekly-lineup .selected-summary #selected-count {
    color: var(--emerald-400);
    font-weight: 700;
    font-size: 1rem;
}

.page-weekly-lineup .add-bets-btn {
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-500) 100%);
    border: 1px solid var(--emerald-400);
    border-radius: 5px;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-weekly-lineup .add-bets-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-400) 100%);
    box-shadow: 0 0 16px var(--emerald-400);
}

.page-weekly-lineup .add-bets-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   BET MODAL STYLES
   ========================================================================== */

.page-weekly-lineup .bet-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 2rem;
}

.page-weekly-lineup .bet-modal-overlay[hidden] {
    display: none;
}

.page-weekly-lineup .bet-modal {
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    background: linear-gradient(180deg, 
        rgba(10, 20, 35, 0.98) 0%, 
        rgba(5, 12, 25, 0.98) 100%);
    border: 1px solid rgba(0, 214, 137, 0.3);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 214, 137, 0.1);
    display: flex;
    flex-direction: column;
}

.page-weekly-lineup .bet-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg,
        rgba(0, 214, 137, 0.1) 0%,
        rgba(0, 214, 137, 0.03) 100%);
    border-bottom: 1px solid rgba(0, 214, 137, 0.2);
}

.page-weekly-lineup .bet-modal-header h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gold-400);
    margin: 0;
}

.page-weekly-lineup .bet-modal-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--neutral-400);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-weekly-lineup .bet-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.page-weekly-lineup .bet-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.page-weekly-lineup .bet-unit-config {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.page-weekly-lineup .bet-unit-config label {
    color: var(--neutral-300);
    font-weight: 500;
}

.page-weekly-lineup .bet-unit-config input {
    width: 100px;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 214, 137, 0.3);
    border-radius: 6px;
    color: var(--neutral-100);
    font-weight: 600;
    text-align: right;
}

.page-weekly-lineup .bet-unit-config input:focus {
    outline: none;
    border-color: var(--emerald-400);
}

.page-weekly-lineup .unit-hint {
    color: var(--neutral-500);
    font-size: 0.8rem;
}

.page-weekly-lineup .bet-input-mode {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
}

.page-weekly-lineup .mode-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--neutral-300);
}

.page-weekly-lineup .mode-option input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--neutral-500);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.page-weekly-lineup .mode-option input[type="radio"]:checked {
    border-color: var(--emerald-400);
    background: var(--emerald-500);
}

.page-weekly-lineup .mode-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

.page-weekly-lineup .selected-picks-bet-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page-weekly-lineup .bet-pick-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 214, 137, 0.15);
    border-radius: 8px;
    gap: 1rem;
}

.page-weekly-lineup .bet-pick-info {
    flex: 1;
}

.page-weekly-lineup .bet-pick-team {
    font-weight: 600;
    color: var(--neutral-100);
    display: block;
}

.page-weekly-lineup .bet-pick-line {
    font-size: 0.875rem;
    color: var(--emerald-400);
    display: block;
    margin-top: 0.25rem;
}

.page-weekly-lineup .bet-pick-segment {
    font-size: 0.8rem;
    color: var(--neutral-500);
}

.page-weekly-lineup .bet-pick-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-weekly-lineup .input-prefix {
    color: var(--neutral-400);
    font-weight: 600;
}

.page-weekly-lineup .bet-amount-input {
    width: 80px;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 214, 137, 0.3);
    border-radius: 6px;
    color: var(--neutral-100);
    font-weight: 600;
    text-align: right;
}

.page-weekly-lineup .bet-amount-input:focus {
    outline: none;
    border-color: var(--emerald-400);
    box-shadow: 0 0 0 2px rgba(0, 214, 137, 0.15);
}

.page-weekly-lineup .calculated-amount {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
}

.page-weekly-lineup .calc-label {
    color: var(--neutral-500);
    font-size: 0.8rem;
}

.page-weekly-lineup .calc-value {
    color: var(--gold-400);
    font-weight: 600;
    font-size: 0.9rem;
}

.page-weekly-lineup .bet-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(0, 214, 137, 0.1);
}

.page-weekly-lineup .bet-modal-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-weekly-lineup .bet-modal-btn.cancel {
    background: transparent;
    border: 1px solid var(--neutral-600);
    color: var(--neutral-300);
}

.page-weekly-lineup .bet-modal-btn.cancel:hover {
    border-color: var(--neutral-400);
    color: var(--neutral-200);
}

.page-weekly-lineup .bet-modal-btn.confirm {
    background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-500) 100%);
    border: 1px solid var(--emerald-400);
    color: white;
}

.page-weekly-lineup .bet-modal-btn.confirm:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-400) 100%);
    box-shadow: 0 0 16px var(--emerald-400);
}

.page-weekly-lineup .bet-modal-btn.confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Notification Animation */
.page-weekly-lineup .weekly-notification {
    font-family: var(--font-body);
}

/* Responsive for KPI Row and Import */
@media (max-width: 1200px) {
    .page-weekly-lineup .kpi-tiles-row {
        flex-wrap: wrap;
    }
    
    .page-weekly-lineup .kpi-tiles-row .kpi-tiles {
        flex: 1 1 100%;
        justify-content: center;
    }
    
    .import-tile {
        flex: 1 1 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .import-tile-btn {
        width: 100%;
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.875rem 1.5rem;
    }
    
    .import-tile-sublabel {
        display: none;
    }
}

@media (max-width: 768px) {
    .page-weekly-lineup .kpi-tiles-row .kpi-tiles {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .page-weekly-lineup .import-tile .import-dropdown-panel {
        width: calc(100vw - 2rem);
        right: -1rem;
    }

    .page-weekly-lineup .parsed-picks-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .page-weekly-lineup .parsed-picks-footer {
        flex-direction: column;
        gap: 1rem;
    }

    .page-weekly-lineup .add-bets-btn {
        width: 100%;
    }

    .page-weekly-lineup .bet-modal {
        max-width: 100%;
        margin: 1rem;
    }

    .page-weekly-lineup .bet-pick-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-weekly-lineup .bet-pick-input {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   FIRE RATING STYLES
   ========================================================================== */

/* Fire Rating Styling - allow MAX badge to show */
.weekly-lineup-table .fire-rating {
    font-size: 0.8rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    overflow: visible;
}

/* Pick Display */
.weekly-lineup-table .pick-display {
    font-weight: 600;
    color: var(--neutral-100);
    font-size: 0.95rem;
}

/* Center alignment for specific columns */
.weekly-lineup-table td.center,
.weekly-lineup-table th.center {
    text-align: center;
}

/* Matchup cell with @ separator */
.weekly-lineup-table .matchup-cell.matchup-full-names {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.weekly-lineup-table .matchup-cell .vs-divider {
    color: var(--neutral-500);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0 0.25rem;
}

.weekly-lineup-table .matchup-cell .team-line {
    display: flex;
    align-items: center;
}

.weekly-lineup-table .matchup-cell .team-name-full {
    font-weight: 600;
    color: var(--neutral-100);
    font-size: 0.9rem;
}

.weekly-lineup-table .matchup-cell .team-record {
    font-family: var(--font-body), 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: rgba(170, 190, 210, 0.9);
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.25rem;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

/* DateTime cell */
.weekly-lineup-table .datetime-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.weekly-lineup-table .datetime-cell .date-value {
    font-weight: 600;
    color: var(--neutral-100);
    font-size: 0.9rem;
}

.weekly-lineup-table .datetime-cell .time-value {
    font-size: 0.8rem;
    color: var(--neutral-400);
}

/* ==========================================================================
   TEAM LOGO STYLES (Matching Dashboard)
   ========================================================================== */

/* Team logos in matchup cell */
.weekly-lineup-table .team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Team line layout with logo */
.weekly-lineup-table .team-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Matchup cell layout */
.weekly-lineup-table .matchup-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.weekly-lineup-table .vs-divider {
    color: var(--neutral-500);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    padding-left: 2rem;
    line-height: 1;
}

/* Segment column styling */
.weekly-lineup-table .segment-value {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Pick cell - centered stacked format: Logo | School / Mascot (odds) */
.weekly-lineup-table .pick-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    white-space: nowrap;
    padding: 0.25rem 0;
}

.weekly-lineup-table .pick-team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}

.weekly-lineup-table .pick-details {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    text-align: left;
}

/* School name (top line) - consistent typography */
.weekly-lineup-table .pick-school {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--emerald-400);
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Mascot (bottom line) - consistent typography with school */
.weekly-lineup-table .pick-mascot {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--neutral-300);
    white-space: nowrap;
    line-height: 1.2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    letter-spacing: 0.01em;
}

/* Legacy - keep for backwards compat */
.weekly-lineup-table .pick-team-full {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--emerald-400);
    font-family: var(--font-display, 'Oswald', sans-serif);
    line-height: 1.2;
    white-space: nowrap;
}

.weekly-lineup-table .pick-type-line {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.75rem;
    color: var(--neutral-400);
    font-weight: 500;
    white-space: nowrap;
}

.weekly-lineup-table .pick-direction-full {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--emerald-400);
    font-family: var(--font-display, 'Oswald', sans-serif);
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

/* Legacy classes (keeping for backwards compatibility) */
.weekly-lineup-table .pick-team-abbr {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--emerald-400);
    font-family: var(--font-display, 'Oswald', sans-serif);
}

.weekly-lineup-table .pick-line {
    font-weight: 600;
    color: var(--neutral-100);
    font-size: 0.9rem;
    font-family: var(--font-display, 'Oswald', sans-serif);
}

.weekly-lineup-table .pick-odds {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    color: var(--neutral-400);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Total pick styling (Over/Under) - single line layout */
.weekly-lineup-table .pick-cell-total {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.weekly-lineup-table .pick-direction {
    font-weight: 700;
    color: var(--emerald-400);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-family: var(--font-display, 'Oswald', sans-serif);
    letter-spacing: 0.02em;
}

/* ===== PREDICTION CELLS (Model & Market) ===== */
.weekly-lineup-table .prediction-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.weekly-lineup-table .prediction-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}

.weekly-lineup-table .prediction-text {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--neutral-200);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Prediction odds - muted color in parentheses */
.weekly-lineup-table .prediction-odds {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.75rem;
    color: var(--neutral-400);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-left: 0.25rem;
}

/* League cell - centered with logo stacked above text */
.weekly-lineup-table .league-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.weekly-lineup-table .league-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.weekly-lineup-table .league-abbr {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--neutral-400);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Zebra striping */
.weekly-lineup-table tbody tr.even {
    background: rgba(0, 0, 0, 0.15);
}

.weekly-lineup-table tbody tr.odd {
    background: rgba(0, 0, 0, 0.08);
}

.weekly-lineup-table tbody tr:hover {
    background: rgba(0, 214, 137, 0.08);
}

/* ==========================================================================
   ENHANCED FILTER SYSTEM - VISUAL FILTER CARDS
   ========================================================================== */

/* ===== LEAGUE FILTER GRID ===== */
.page-weekly-lineup .league-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.page-weekly-lineup .league-filter-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-weekly-lineup .league-filter-chip:hover {
    background: rgba(0, 214, 137, 0.1);
    border-color: rgba(0, 214, 137, 0.3);
}

.page-weekly-lineup .league-filter-chip.active {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.2) 0%, rgba(0, 180, 120, 0.15) 100%);
    border-color: var(--emerald-400);
    box-shadow: 0 0 12px rgba(0, 214, 137, 0.2);
}

.page-weekly-lineup .league-filter-chip .chip-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.page-weekly-lineup .league-filter-chip .chip-icon {
    font-size: 1.25rem;
}

.page-weekly-lineup .league-filter-chip .chip-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-300);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.page-weekly-lineup .league-filter-chip.active .chip-text {
    color: var(--emerald-300);
}

/* ===== BET TYPE / PICK FILTER GRID ===== */
.page-weekly-lineup .pick-filter-wide {
    min-width: 340px;
}

.page-weekly-lineup .bet-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.page-weekly-lineup .bet-type-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

.page-weekly-lineup .bet-type-chip:hover {
    background: rgba(0, 214, 137, 0.1);
    border-color: rgba(0, 214, 137, 0.3);
    transform: translateY(-2px);
}

.page-weekly-lineup .bet-type-chip.active {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.25) 0%, rgba(0, 180, 120, 0.2) 100%);
    border-color: var(--emerald-400);
    box-shadow: 0 4px 16px rgba(0, 214, 137, 0.25);
}

.page-weekly-lineup .bet-type-chip .bet-icon {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.page-weekly-lineup .bet-type-chip .bet-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--neutral-200);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-weekly-lineup .bet-type-chip .bet-desc {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--neutral-500);
}

.page-weekly-lineup .bet-type-chip.active .bet-label {
    color: var(--emerald-300);
}

.page-weekly-lineup .bet-type-chip.active .bet-desc {
    color: var(--emerald-400);
}

/* First chip (All Picks) spans full width */
.page-weekly-lineup .bet-type-chip[data-market="all"] {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
}

/* ===== RANGE FILTER GRID (Model, Market) ===== */
.page-weekly-lineup .range-filter-grid {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.page-weekly-lineup .range-filter-chip {
    display: block;
    width: 100%;
    padding: 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    text-align: left;
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(200, 210, 220, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-weekly-lineup .range-filter-chip:hover {
    background: rgba(180, 160, 120, 0.08);
    border-color: rgba(180, 160, 120, 0.25);
}

.page-weekly-lineup .range-filter-chip.active {
    background: rgba(180, 160, 120, 0.12);
    border-color: rgba(200, 180, 140, 0.4);
    color: rgba(220, 200, 160, 1);
}

/* ===== EDGE FILTER GRID ===== */
.page-weekly-lineup .edge-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Edge filter chips - premium compact style */
.page-weekly-lineup .edge-filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.page-weekly-lineup .edge-filter-chip:hover {
    background: rgba(180, 160, 120, 0.08);
    border-color: rgba(180, 160, 120, 0.25);
}

.page-weekly-lineup .edge-filter-chip.active {
    background: rgba(180, 160, 120, 0.12);
    border-color: rgba(200, 180, 140, 0.4);
}

/* Edge tier indicator bars */
.page-weekly-lineup .edge-tier {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.page-weekly-lineup .edge-tier.tier-hot { background: #e53935; }
.page-weekly-lineup .edge-tier.tier-good { background: #43a047; }
.page-weekly-lineup .edge-tier.tier-ok { background: #c9a227; }
.page-weekly-lineup .edge-tier.tier-low { background: #607080; }

.page-weekly-lineup .edge-filter-chip .edge-chip-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(200, 210, 220, 0.85);
    letter-spacing: 0.02em;
}

.page-weekly-lineup .edge-filter-chip.active .edge-chip-label {
    color: rgba(220, 200, 160, 1);
}

/* Edge tier color accents on active */
.page-weekly-lineup .edge-filter-chip.edge-hot.active {
    border-color: rgba(229, 57, 53, 0.5);
}
.page-weekly-lineup .edge-filter-chip.edge-good.active {
    border-color: rgba(67, 160, 71, 0.5);
}
.page-weekly-lineup .edge-filter-chip.edge-ok.active {
    border-color: rgba(201, 162, 39, 0.5);
}
.page-weekly-lineup .edge-filter-chip.edge-low.active {
    border-color: rgba(96, 112, 128, 0.5);
}

/* ===== FIRE FILTER GRID - Premium Compact ===== */
.page-weekly-lineup .fire-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.page-weekly-lineup .fire-filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.page-weekly-lineup .fire-filter-chip:hover {
    background: rgba(180, 160, 120, 0.08);
    border-color: rgba(180, 160, 120, 0.25);
}

.page-weekly-lineup .fire-filter-chip.active {
    background: rgba(180, 160, 120, 0.12);
    border-color: rgba(200, 180, 140, 0.4);
}

/* Fire bars - elegant signal strength indicator */
.page-weekly-lineup .fire-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.page-weekly-lineup .fire-bars i {
    display: block;
    width: 3px;
    background: rgba(200, 180, 140, 0.6);
    border-radius: 1px;
}

/* Bar heights - ascending signal */
.page-weekly-lineup .fire-bars i:nth-child(1) { height: 4px; }
.page-weekly-lineup .fire-bars i:nth-child(2) { height: 6px; }
.page-weekly-lineup .fire-bars i:nth-child(3) { height: 8px; }
.page-weekly-lineup .fire-bars i:nth-child(4) { height: 10px; }
.page-weekly-lineup .fire-bars i:nth-child(5) { height: 12px; }

/* Active fire bars - warm amber glow */
.page-weekly-lineup .fire-filter-chip.active .fire-bars i {
    background: rgba(220, 160, 80, 0.9);
}

/* MAX fire special styling */
.page-weekly-lineup .fire-filter-chip.fire-max.active {
    border-color: rgba(220, 160, 80, 0.6);
}
.page-weekly-lineup .fire-filter-chip.fire-max.active .fire-bars i {
    background: linear-gradient(180deg, #f0a030 0%, #e07020 100%);
}

.page-weekly-lineup .fire-filter-chip .fire-chip-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(200, 210, 220, 0.85);
    letter-spacing: 0.02em;
}

.page-weekly-lineup .fire-filter-chip.active .fire-chip-label {
    color: rgba(220, 200, 160, 1);
}

/* ===== ENHANCED FILTER CARDS (Above Table) ===== */
.page-weekly-lineup .table-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    min-height: 52px;

    /* Enhanced styling - Vegas sportsbook card feel */
    background: linear-gradient(145deg,
        rgba(0, 30, 45, 0.85) 0%,
        rgba(0, 20, 35, 0.9) 100%);
    border: 1px solid rgba(0, 214, 137, 0.4);
    border-radius: 12px;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 214, 137, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    animation: filterChipsPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top center;
}

.page-weekly-lineup .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg,
        rgba(0, 214, 137, 0.25) 0%,
        rgba(0, 180, 120, 0.18) 100%);
    border: 1px solid rgba(0, 214, 137, 0.5);
    border-radius: 24px;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.3),
        0 0 16px rgba(0, 214, 137, 0.2);
    transition: all 0.25s ease;
    animation: chipSlideIn 0.3s ease-out;
}

.page-weekly-lineup .filter-chip:hover {
    background: linear-gradient(135deg,
        rgba(0, 214, 137, 0.35) 0%,
        rgba(0, 180, 120, 0.25) 100%);
    border-color: rgba(0, 214, 137, 0.7);
    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(0, 214, 137, 0.3);
    transform: translateY(-2px);
}

.page-weekly-lineup .filter-chip .chip-icon {
    font-size: 1rem;
}

.page-weekly-lineup .filter-chip .chip-label {
    font-weight: 600;
    letter-spacing: 0.03em;
}

.page-weekly-lineup .filter-chip .chip-remove {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.page-weekly-lineup .filter-chip .chip-remove:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fff;
    transform: scale(1.1);
}

/* Clear All Filters button */
.page-weekly-lineup .table-filter-chips .clear-all-filters {
    margin-left: auto;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: rgba(239, 68, 68, 0.9);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-weekly-lineup .table-filter-chips .clear-all-filters:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

/* Active Filters Label */
.page-weekly-lineup .table-filter-chips::before {
    content: 'Active Filters:';
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--emerald-400);
    margin-right: 8px;
}

/* ==========================================================================
   FILTER BUTTON - Invisible box, prominent icon
   Position is set in thead th context above - this is for styling only
   ========================================================================== */
body.page-weekly-lineup .th-filter-btn,
.page-weekly-lineup .th-filter-btn {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    z-index: 102 !important;
    pointer-events: auto !important;
    /* Position is absolute - set in thead th context above */
}

/* Hover state - subtle background + glow */
body.page-weekly-lineup .th-filter-btn:hover,
.page-weekly-lineup .th-filter-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

/* Active/pressed state */
body.page-weekly-lineup .th-filter-btn:active,
.page-weekly-lineup .th-filter-btn:active {
    opacity: 0.8;
}

/* Expanded state (dropdown open) */
body.page-weekly-lineup .th-filter-btn[aria-expanded="true"],
.page-weekly-lineup .th-filter-btn[aria-expanded="true"] {
    opacity: 1;
}

/* Filter icon styling - Clean Gold/White Theme */
body.page-weekly-lineup .th-filter-icon,
.page-weekly-lineup .th-filter-icon {
    font-size: 1.2rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
    letter-spacing: 0.12em;
    pointer-events: none;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

body.page-weekly-lineup .th-filter-btn:hover .th-filter-icon,
.page-weekly-lineup .th-filter-btn:hover .th-filter-icon {
    color: #fff;
    transform: scale(1.1);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

body.page-weekly-lineup .th-filter-btn[aria-expanded="true"] .th-filter-icon,
.page-weekly-lineup .th-filter-btn[aria-expanded="true"] .th-filter-icon {
    color: #d4af37; /* Vegas Gold */
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

/* Hide the ::before pseudo-element (icon is in markup) */
body.page-weekly-lineup .th-filter-btn::before,
.page-weekly-lineup .th-filter-btn::before {
    content: none !important;
}

/* Active filter indicator dot - Gold */
body.page-weekly-lineup .th-filter-btn.has-filter::after,
.page-weekly-lineup .th-filter-btn.has-filter::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: #d4af37;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.6);
    pointer-events: none;
}

/* ==========================================================================
   COMPACT FILTER DROPDOWNS - Premium Vegas Sportsbook Design (Refined)
   ========================================================================== */

/* Compact dropdown container (legacy) */
.page-weekly-lineup .th-filter-dropdown.open:not(.weekly-lineup-filter-dropdown) {
    min-width: 140px !important;
    max-width: 200px !important;
    padding: 8px !important;
    background: #0a0a0a !important; /* Pure matte black */
    border: 1px solid #333 !important; /* Subtle dark grey border */
    border-radius: 6px !important;
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Compact section (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-section-compact {
    padding: 0 !important;
    border-bottom: none !important;
}

/* Filter grid - compact 3 column (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
}

/* League grid - 2 column for more space (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .league-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
}

/* Fire grid - single row (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .fire-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Base filter option button (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt,
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .league-chip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 4px !important;
    background: transparent !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 4px !important;
    color: #888 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

/* Hover state (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt:hover,
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .league-chip:hover {
    background: #1a1a1a !important;
    border-color: #444 !important;
    color: #ccc !important;
    transform: translateY(-1px);
}

/* Active state - Gold Theme (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.active,
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .league-chip.active {
    background: linear-gradient(135deg, #1c1c1c 0%, #111 100%) !important;
    border: 1px solid #d4af37 !important; /* Gold border */
    color: #d4af37 !important; /* Gold text */
    box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.1) !important;
    font-weight: 600 !important;
}

/* Edge tier colors (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.edge-hot { border-left: 3px solid #ff6b35 !important; }
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.edge-good { border-left: 3px solid #00d68f !important; }
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.edge-ok { border-left: 3px solid #ffb800 !important; }
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.edge-low { border-left: 3px solid #666 !important; }

/* Fire tier colors (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.fire-max,
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.fire-5 { border-left: 3px solid #ff4444 !important; }
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.fire-4 { border-left: 3px solid #ff6b35 !important; }
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.fire-3 { border-left: 3px solid #ffb800 !important; }
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.fire-2 { border-left: 3px solid #666 !important; }
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .filter-opt.fire-1 { border-left: 3px solid #444 !important; }

/* Team search input (legacy) */
.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .team-search-input {
    width: 100% !important;
    padding: 8px 10px !important;
    background: #111 !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    color: #eee !important;
    font-size: 11px !important;
    outline: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .team-search-input::placeholder {
    color: #555 !important;
}

.page-weekly-lineup .th-filter-dropdown:not(.weekly-lineup-filter-dropdown) .team-search-input:focus {
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.2) !important;
}

/* ==========================================================================
   WEEKLY LINEUP (ONLY): FILTER DROPDOWN CARDS (when moved to <body>)
   --------------------------------------------------------------------------
   weekly-lineup.js appends dropdown panels to document.body on open to escape
   table stacking contexts. That breaks `.page-weekly-lineup …` scoped styling.
   These selectors use an explicit class added by JS so styling remains intact.
   ========================================================================== */

/* ==========================================================================
   COMPACT FILTER DROPDOWN - High Contrast, Efficient Layout
   ========================================================================== */

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown {
    /* Base hidden state */
    display: none;
    position: fixed;
    z-index: 2147483647;

    /* Compact card - tighter sizing */
    min-width: 180px !important;
    max-width: 240px !important;

    /* High contrast dark background */
    background: rgba(8, 12, 20, 0.98) !important;
    border: 1px solid rgba(0, 214, 137, 0.35) !important;
    border-radius: 8px !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    overflow: hidden !important;
    isolation: isolate;
}

/* Top accent line - clean green bar */
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(0, 214, 137, 0.6) 0%,
        rgba(0, 214, 137, 0.9) 50%,
        rgba(0, 214, 137, 0.6) 100%);
    z-index: 3;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown.open {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: auto !important;
    right: auto !important;
    animation: wlFilterDropIn 120ms ease-out forwards !important;
}

@keyframes wlFilterDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Compact header */
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .wl-filter-header {
    display: block;
    padding: 0;
    background: transparent;
    border-bottom: none;
    min-height: 0;
    position: relative;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .wl-filter-title {
    display: none;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .wl-filter-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #c8d7e6;
    font-size: 12px;
    cursor: pointer;
    transition: all 100ms ease;
    position: absolute;
    top: 6px;
    right: 6px;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .wl-filter-close:hover {
    background: rgba(255, 100, 100, 0.2);
    border-color: rgba(255, 100, 100, 0.4);
    color: #ff8888;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .wl-filter-close:active {
    transform: scale(0.95);
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .wl-filter-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 214, 137, 0.3);
}

/* Compact sections */
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-section-compact {
    padding: 8px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-section-compact:last-child {
    border-bottom: none !important;
}

/* Tighter grids */
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .league-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-grid.fire-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

body.page-weekly-lineup #filter-date.th-filter-dropdown.weekly-lineup-filter-dropdown .filter-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
}

/* Full-width "All" buttons */
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt[data-segment="all"],
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt[data-market="all"],
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt[data-model="all"],
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt[data-odds="all"],
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt[data-edge="all"],
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt[data-fire="all"] {
    grid-column: 1 / -1;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .league-chip[data-league="all"] {
    grid-column: 1 / -1;
}

/* Compact, high-contrast buttons */
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt,
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .league-chip {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(30, 35, 45, 0.95) !important;
    color: #c8d7e6 !important;
    border-radius: 5px !important;
    padding: 6px 8px !important;
    min-height: 28px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.80rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    user-select: none;
}

/* Market odds: make ranges readable (single-column list + normal casing) */
body.page-weekly-lineup #filter-market.th-filter-dropdown.weekly-lineup-filter-dropdown .filter-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

body.page-weekly-lineup #filter-market.th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt {
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-family: var(--font-ui, var(--font-body, 'Inter', sans-serif));
    font-weight: 650 !important;
}

body.page-weekly-lineup #filter-market.th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt[data-odds="fav"],
body.page-weekly-lineup #filter-market.th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt[data-odds="even"],
body.page-weekly-lineup #filter-market.th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt[data-odds="dog"] {
    font-variant-numeric: tabular-nums;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt:hover,
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .league-chip:hover {
    background: rgba(0, 214, 137, 0.18) !important;
    border-color: #00d689 !important;
    color: #fff !important;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt:active,
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .league-chip:active {
    transform: scale(0.98);
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.active,
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .league-chip.active {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.3) 0%, rgba(0, 180, 120, 0.35) 100%) !important;
    border-color: #00d689 !important;
    color: #00ff9d !important;
    box-shadow: 0 0 8px rgba(0, 214, 137, 0.3);
}

/* Preserve existing edge/fire tier hints (left accent) */
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.edge-hot { border-left: 3px solid rgba(255, 68, 68, 0.85) !important; }
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.edge-good { border-left: 3px solid rgba(0, 214, 137, 0.85) !important; }
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.edge-ok { border-left: 3px solid rgba(255, 184, 0, 0.85) !important; }
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.edge-low { border-left: 3px solid rgba(110, 118, 129, 0.9) !important; }

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.fire-max,
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.fire-5 { border-left: 3px solid rgba(255, 68, 68, 0.85) !important; }
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.fire-4 { border-left: 3px solid rgba(255, 107, 53, 0.85) !important; }
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.fire-3 { border-left: 3px solid rgba(255, 184, 0, 0.85) !important; }
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.fire-2 { border-left: 3px solid rgba(110, 118, 129, 0.9) !important; }
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .filter-opt.fire-1 { border-left: 3px solid rgba(75, 85, 99, 0.9) !important; }

/* Search input (Matchup filter) - compact */
body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .team-search-input {
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 5px !important;
    background: rgba(15, 20, 28, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    outline: none !important;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .team-search-input::placeholder {
    color: rgba(180, 195, 210, 0.6) !important;
}

body.page-weekly-lineup .th-filter-dropdown.weekly-lineup-filter-dropdown .team-search-input:focus {
    border-color: #00d689 !important;
    box-shadow: 0 0 0 2px rgba(0, 214, 137, 0.2) !important;
}

/* ==========================================================================
   ULTRA-COMPACT MICRO FILTER STYLES
   ========================================================================== */

/* ==========================================================================
   MICRO FILTER SYSTEM - High Contrast Compact Design
   Optimized for readability and efficient space usage
   ========================================================================== */

/* Micro filter container - tight, centered */
.micro-filter {
    padding: 8px !important;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
}

/* Micro row - tight horizontal layout */
.micro-row {
    display: flex;
    gap: 3px;
    justify-content: center;
    flex-wrap: nowrap;
}

.micro-row.micro-sub {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Micro button - high contrast, compact */
.micro-btn {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(30, 35, 45, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    color: #c8d7e6;
    cursor: pointer;
    transition: all 0.1s ease;
    white-space: nowrap;
}

.micro-btn:hover {
    background: rgba(0, 214, 137, 0.25);
    border-color: #00d689;
    color: #fff;
}

.micro-btn.active {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.35) 0%, rgba(0, 180, 120, 0.4) 100%);
    border-color: #00d689;
    color: #00ff9d;
    box-shadow: 0 0 8px rgba(0, 214, 137, 0.3);
}

.micro-btn.xs {
    padding: 4px 7px;
    font-size: 10px;
}

/* Micro 2x2 grid - tight compact layout */
.micro-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

/* League row - horizontal logo buttons */
.league-row {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: nowrap;
}

.league-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 5px;
    background: rgba(30, 35, 45, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.1s ease;
    font-size: 9px;
    font-weight: 800;
    color: #b0c4d8;
}

.league-btn:hover {
    background: rgba(0, 214, 137, 0.2);
    border-color: #00d689;
    transform: scale(1.05);
}

.league-btn.active {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.3) 0%, rgba(0, 180, 120, 0.35) 100%);
    border-color: #00d689;
    color: #00ff9d;
    box-shadow: 0 0 10px rgba(0, 214, 137, 0.35);
}

.league-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(1) saturate(0.9);
    transition: all 0.1s ease;
}

.league-btn:hover img,
.league-btn.active img {
    filter: brightness(1.2) saturate(1.1);
}

/* Micro search - high contrast input */
.micro-search {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(15, 20, 28, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: #fff;
    outline: none;
}

.micro-search::placeholder {
    color: rgba(180, 195, 210, 0.6);
}

.micro-search:focus {
    border-color: #00d689;
    box-shadow: 0 0 0 2px rgba(0, 214, 137, 0.2);
}

/* Edge row - compact with colored indicators */
.edge-row {
    display: flex;
    gap: 3px;
    justify-content: center;
    flex-wrap: nowrap;
}

.edge-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(30, 35, 45, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #c8d7e6;
    cursor: pointer;
    transition: all 0.1s ease;
}

.edge-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.edge-btn.active {
    background: linear-gradient(135deg, rgba(0, 214, 137, 0.3) 0%, rgba(0, 180, 120, 0.35) 100%);
    border-color: #00d689;
    color: #00ff9d;
    box-shadow: 0 0 8px rgba(0, 214, 137, 0.25);
}

.edge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.edge-dot.all { background: linear-gradient(135deg, #00d689, #ff6b35, #888); }
.edge-dot.hot { background: #ff4444; box-shadow: 0 0 6px rgba(255, 68, 68, 0.7); }
.edge-dot.good { background: #00d689; box-shadow: 0 0 4px rgba(0, 214, 137, 0.5); }
.edge-dot.ok { background: #ffb800; box-shadow: 0 0 4px rgba(255, 184, 0, 0.4); }
.edge-dot.low { background: #777; }

/* Fire row - compact with visual hierarchy */
.fire-row {
    display: flex;
    gap: 3px;
    justify-content: center;
    flex-wrap: nowrap;
}

.fire-btn {
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 800;
    background: rgba(30, 35, 45, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #c8d7e6;
    cursor: pointer;
    transition: all 0.1s ease;
}

.fire-btn:hover {
    background: rgba(255, 107, 53, 0.25);
    border-color: #ff6b35;
    color: #ffb090;
}

.fire-btn.active {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.35) 0%, rgba(255, 80, 40, 0.4) 100%);
    border-color: #ff6b35;
    color: #ffa366;
    box-shadow: 0 0 8px rgba(255, 107, 53, 0.35);
}

.fire-btn.max {
    background: rgba(255, 50, 50, 0.25);
    border-color: rgba(255, 68, 68, 0.4);
    color: #ff6666;
}

.fire-btn.max:hover,
.fire-btn.max.active {
    background: linear-gradient(135deg, rgba(255, 50, 50, 0.4) 0%, rgba(220, 30, 30, 0.45) 100%);
    border-color: #ff4444;
    color: #ff7777;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
}

/* ==========================================================================
   SECURITY & ACCESSIBILITY ELEMENTS
   ========================================================================== */

/* Credential hint text */
.credential-hint {
    display: block;
    font-size: 0.65rem;
    color: rgba(180, 195, 210, 0.7);
    margin-top: 4px;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Noscript warning */
.noscript-warning {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(185, 28, 28, 0.12) 100%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 24px;
    color: #fca5a5;
    text-align: center;
    font-size: 0.9rem;
}

.noscript-warning strong {
    color: #f87171;
    display: block;
    margin-bottom: 4px;
}

/* Loading state for table */
.loading-row {
    background: transparent !important;
}

.loading-cell {
    text-align: center;
    padding: 48px 24px !important;
    color: rgba(180, 200, 220, 0.8);
    font-size: 0.95rem;
}

.loading-spinner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.loading-spinner::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 214, 137, 0.3);
    border-top-color: rgba(0, 214, 137, 0.9);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   FILTER TOOLBAR (ft-* namespace)
   Left-aligned filters, right-aligned actions
   ========================================================================== */
.filter-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0 0;
    margin: 0 0 -4px 0;
    /* Above sticky table header (which sits around z-index ~110) */
    position: relative;
    z-index: 10050;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
}

.ft-left, .ft-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pills - Metallic Navy with subtle glow */
.ft-pill {
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    color: rgba(200, 215, 230, 0.95);
    background: linear-gradient(135deg, rgba(20, 35, 60, 0.92) 0%, rgba(15, 28, 50, 0.96) 100%);
    border: 1px solid rgba(100, 130, 170, 0.35);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 6px rgba(80, 120, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ft-pill:hover {
    color: #fff;
    border-color: rgba(0, 214, 137, 0.5);
    background: linear-gradient(135deg, rgba(25, 45, 75, 0.95) 0%, rgba(20, 38, 60, 0.98) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 214, 137, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ft-pill.active {
    color: #00e08a;
    border-color: rgba(0, 214, 137, 0.6);
    background: linear-gradient(135deg, rgba(0, 50, 45, 0.92) 0%, rgba(0, 42, 38, 0.96) 100%);
    text-shadow: 0 0 8px rgba(0, 214, 137, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 214, 137, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Dropdown */
.ft-dropdown {
    position: relative;
    z-index: 10060;
}

.ft-dropdown-btn {
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 500;
    font-family: inherit;
    color: rgba(180, 195, 210, 0.85);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.ft-dropdown-btn:hover,
.ft-dropdown-btn.open {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.ft-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 140px;
    background: #0c1a2e; /* Solid dark background */
    border: 1px solid rgba(0, 214, 137, 0.2); /* Subtle green border */
    border-radius: 8px;
    padding: 4px;
    /* Must sit above sticky header and table content */
    z-index: 10070;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.ft-dropdown-menu.open {
    display: block;
}

.ft-dropdown-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    color: rgba(215, 225, 230, 0.92);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.14s ease, transform 0.14s ease;
    letter-spacing: 0.02em;
}

.ft-dropdown-item:hover {
    background: rgba(0, 214, 137, 0.1);
    transform: translateX(2px);
}

.ft-dropdown-item.active {
    color: #00e08a;
    background: rgba(0, 214, 137, 0.14);
}

/* Divider between filter groups - completely hidden */
.ft-divider {
    display: none !important;
}

/* Clear button */
.ft-clear {
    padding: 5px 10px;
    font-size: 0.68rem;
    font-weight: 500;
    font-family: inherit;
    color: rgba(180, 180, 180, 0.6);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.ft-clear:hover {
    color: #ef5050;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}

/* Menu divider */
.ft-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

/* ==========================================================================
   FETCH PICKS BUTTON - METALLIC NAVY WITH SUBTLE GLOW
   ========================================================================== */
.ft-fetch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(200, 215, 230, 0.95) !important;
    background: linear-gradient(135deg, rgba(20, 35, 60, 0.92) 0%, rgba(15, 28, 50, 0.96) 100%) !important;
    border: 1px solid rgba(100, 130, 170, 0.35) !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 6px rgba(80, 120, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ft-fetch-btn:hover,
.ft-fetch-btn.open {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(25, 45, 75, 0.95) 0%, rgba(20, 38, 60, 0.98) 100%) !important;
    border-color: rgba(0, 214, 137, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 214, 137, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.fetch-svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.ft-fetch-menu {
    right: 0;
    left: auto;
    min-width: 200px;
}

/* League logo in dropdown */
.league-logo-sm {
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-width: 22px;
    min-height: 22px;
    max-height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(0, 214, 137, 0.2));
    flex-shrink: 0;
}

/* League logo in filter pills */
.pill-logo {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    min-width: 12px !important;
    object-fit: contain;
    margin-right: 4px;
    flex-shrink: 0;
    vertical-align: middle;
}

.ft-pill.ft-league {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px !important;
}

.league-fetch-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fetch-all-item {
    color: #00e08a;
    font-weight: 600;
    border: 1px solid rgba(0, 214, 137, 0.28);
    margin-bottom: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0, 214, 137, 0.08);
    text-align: center;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   EDGE DROPDOWN - CLEAN CHART ICON
   ========================================================================== */
.ft-edge-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(180, 195, 210, 0.9) !important;
}

.ft-edge-btn:hover,
.ft-edge-btn.open {
    color: #fff !important;
}

.edge-svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0.7;
}

.ft-edge-btn:hover .edge-svg {
    opacity: 1;
}

.edge-item {
    position: relative;
    padding-left: 16px;
}

.edge-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.edge-high::before {
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.edge-medium::before {
    background: #fbbf24;
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
}

.edge-low::before {
    background: #ef4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

.fire-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fire-dots {
    display: inline-flex;
    gap: 3px;
}

.fire-dots::before {
    content: "";
    display: flex;
    gap: 3px;
}

.fire-dots[data-level="5"]::before { content: "●●●●●"; color: #ff4500; text-shadow: 0 0 4px rgba(255, 69, 0, 0.5); }
.fire-dots[data-level="4"]::before { content: "●●●●○"; color: #ff6b35; }
.fire-dots[data-level="3"]::before { content: "●●●○○"; color: #f7931e; }
.fire-dots[data-level="2"]::before { content: "●●○○○"; color: #fbbf24; }
.fire-dots[data-level="1"]::before { content: "●○○○○"; color: #9ca3af; }

.ft-fetch-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

@media (max-width: 768px) {
    .filter-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 12px;
    }
    .ft-left, .ft-right {
        gap: 6px;
    }
}