/* IntelOdds Styles - Version 2026-01-21-2345 */
/*---------------------------------------------------------------------------------------------*/
/* CSS Root Variables for Table Column Layout */
/*---------------------------------------------------------------------------------------------*/
:root
    {
    --time-col-width: 90px;
    --rot-col-width: 60px;      /* Set to 0px when ROT column is hidden */
    --rot2-col-width: 60px;     /* Set to 0px when ROT2 column is hidden */
    --rot-col-display: table-cell;  /* Set to 'none' when ROT column is hidden */
    --rot2-col-display: table-cell; /* Set to 'none' when ROT2 column is hidden */
    --matchup-col-width: 200px;
    --abbr-col-width: 60px;
    --scores-col-width: 100px;
    --score-ext-col-width: 100px;
    --sportsbook-col-width: 100px;
    --sportsbook-col-scale: 1;
    --header-height: 120px; /* Approximate height of header content */
    --footer-height: 60px;  /* Approximate height of footer content */
    --zoom-factor: 1;

    /* Calculated positions for sticky columns based on visible rotation columns */
    --rot-left: var(--time-col-width);                                    /* Always 90px */
    --rot2-left: calc(var(--time-col-width) + var(--rot-col-width));     /* 90px or 150px */
    --matchup-left: calc(var(--time-col-width) + var(--rot-col-width) + var(--rot2-col-width)); /* 90px, 150px, or 210px */
    --scores-left: calc(var(--time-col-width) + var(--rot-col-width) + var(--rot2-col-width) + var(--matchup-col-width)); /* 290px, 350px, or 410px */
    --score-ext-left: calc(var(--time-col-width) + var(--rot-col-width) + var(--rot2-col-width) + var(--matchup-col-width) + var(--scores-col-width));

    /* Light mode colors (default) */
    --bg-primary: #f3f4f6;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f9fafb;
    --bg-quaternary: #e5e7eb;
    --text-primary: #1f2937;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --border-primary: #d1d5db;
    --border-secondary: #e5e7eb;
    --accent-primary: #3b82f6;
    --accent-secondary: #2563eb;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #0c4a6e;
    --info-bg: #e0f2fe;
    --error-bg: #fee2e2;
    --neutral-icon-color: #000000;
    --neutral-icon-hover-color: #374151;
    }

/* Dark mode colors */
[data-theme="dark"]
    {
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --bg-tertiary: #2d3748;
    --bg-quaternary: #4a5568;
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e0;
    --border-primary: #4a5568;
    --border-secondary: #374151;
    --accent-primary: #60a5fa;
    --accent-secondary: #3b82f6;
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --error-color: #f87171;
    --info-color: #7dd3fc;
    --info-bg: #0c4a6e;
    --error-bg: #7f1d1d;
    --neutral-icon-color: #ffffff;
    --neutral-icon-hover-color: #e2e8f0;
    }

/*---------------------------------------------------------------------------------------------*/
/* Weather Row Styles */
/*---------------------------------------------------------------------------------------------*/
.weather-row
    {
    background-color: #e3f2fd;
    }

/* Injury Row Styles */
/*---------------------------------------------------------------------------------------------*/
.injury-row
    {
    background-color: #fff3e0;
    }

/* TV Row Styles */
/*---------------------------------------------------------------------------------------------*/
.tv-row
    {
    background-color: #e8f5e8;
    }

/* Location Row Styles */
/*---------------------------------------------------------------------------------------------*/
.location-row
    {
    background-color: #f3e5f5;
    }

/* Note Row Styles */
/*---------------------------------------------------------------------------------------------*/
.note-row
    {
    background-color: #fffde7 !important;
    }

/* Status Row Styles (event delay/status info) */
/*---------------------------------------------------------------------------------------------*/
.status-row
    {
    background-color: #fff3e0;
    }

/* Info row borders - use box-shadow for border-collapse:separate compatibility */
/*---------------------------------------------------------------------------------------------*/
.status-row td,
.weather-row td,
.injury-row td,
.tv-row td,
.location-row td,
.note-row td,
.lineup-row td,
.officials-row td
    {
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 2px;
    box-shadow: inset 0 2px 0 0 var(--custom-header-bg-color, #7dd3fc),
                inset 0 -2px 0 0 var(--custom-header-bg-color, #7dd3fc);
    }

.weather-row .weather-cell
    {
    padding: 2px 20px 0;
    border-bottom: none;
    position: sticky;
    left: 0;
    z-index: 5;
    }

.injury-row .injury-cell
    {
    padding: 2px 20px 0;
    border-bottom: none;
    position: sticky;
    left: 0;
    z-index: 5;
    }

.tv-row .tv-cell
    {
    padding: 2px 20px 0;
    border-bottom: none;
    position: sticky;
    left: 0;
    z-index: 5;
    }

.location-row .location-cell
    {
    padding: 2px 20px 0;
    border-bottom: none;
    position: sticky;
    left: 0;
    z-index: 5;
    }

.note-row .note-cell
    {
    padding: 2px 20px 0;
    border-bottom: none;
    color: #1f2937;
    background-color: #fffde7 !important;
    position: sticky;
    left: 0;
    z-index: 5;
    }

html[data-theme="dark"] tbody > tr.note-row td.note-cell,
html[data-theme="dark"] tbody > tr.note-row td.note-cell *
    {
    color: #1f2937 !important;
    }

.status-row .status-cell
    {
    padding: 2px 20px 0;
    border-bottom: none;
    color: #1f2937;
    background-color: #fff3e0 !important;
    position: sticky;
    left: 0;
    z-index: 5;
    }

html[data-theme="dark"] tbody > tr.status-row td.status-cell,
html[data-theme="dark"] tbody > tr.status-row td.status-cell *
    {
    color: #1f2937 !important;
    }

.status-content
    {
    display: grid;
    grid-template-columns: calc( 40px * var(--zoom-factor)) 1fr;
    align-items: center;
    gap: 10px;
    }

.weather-content
    {
    display: grid;
    grid-template-columns: calc( 40px * var(--zoom-factor))
                           calc(170px * var(--zoom-factor))
                           calc( 30px * var(--zoom-factor))
                           calc(190px * var(--zoom-factor))
                           calc( 30px * var(--zoom-factor))
                           calc(360px * var(--zoom-factor))
                           calc( 30px * var(--zoom-factor))
                           calc(150px * var(--zoom-factor));
    align-items: center;
    }

.injury-content
    {
    display: grid;
    grid-template-columns: calc( 40px * var(--zoom-factor)) 1fr;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 60px);
    }

.tv-content
    {
    display: grid;
    grid-template-columns: calc( 40px * var(--zoom-factor)) 1fr;
    align-items: center;
    gap: 10px;
    }

.location-content
    {
    display: grid;
    grid-template-columns: calc( 40px * var(--zoom-factor)) 1fr;
    align-items: center;
    gap: 10px;
    }

.note-content
    {
    display: grid;
    grid-template-columns: calc( 40px * var(--zoom-factor)) 1fr;
    align-items: center;
    gap: 10px;
    }

.lineup-row .lineup-cell
    {
    padding: 2px 20px 0;
    border-bottom: none;
    position: sticky;
    left: 0;
    z-index: 5;
    max-width: 100vw;
    }

.lineup-content
    {
    display: grid;
    grid-template-columns: calc( 40px * var(--zoom-factor)) 1fr;
    align-items: center;
    gap: 10px;
    }

.lineup-element
    {
    font-size: 0.95em;
    color: var(--text-secondary);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    }

.lineup-team-name
    {
    font-weight: 600;
    }

.officials-row .officials-cell
    {
    padding: 2px 20px 0;
    border-bottom: none;
    position: sticky;
    left: 0;
    z-index: 5;
    max-width: 100vw;
    }

.officials-content
    {
    display: grid;
    grid-template-columns: calc( 40px * var(--zoom-factor)) 1fr;
    align-items: center;
    gap: 10px;
    }

.officials-element
    {
    font-size: 0.95em;
    color: var(--text-secondary);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    }

.officials-position
    {
    font-weight: 600;
    }

.lineup-alerts-table
    {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    }

.lineup-alerts-table th.lineup-alerts-team-header
    {
    font-weight: 700;
    font-size: 1.05em;
    padding: 0 4px 3px 4px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    }

.lineup-alerts-table td
    {
    padding: 1px 4px;
    vertical-align: top;
    white-space: nowrap;
    }

.lineup-alerts-table td.lineup-alerts-pos
    {
    width: 1%;
    padding-right: 2px;
    color: #999;
    }

.lineup-alerts-table td.lineup-alerts-name
    {
    padding-right: 16px;
    }

.lineup-alerts-featured
    {
    font-weight: 700;
    font-size: 1.1em;
    }

.status-icon-container
    {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    }

.weather-icon-container
    {
    display: flex;
    justify-content: center;
    }

.injury-icon-container
    {
    display: flex;
    justify-content: center;
    align-items: center;
    }

.tv-icon-container
    {
    display: flex;
    justify-content: center;
    align-items: center;
    }

.location-icon-container
    {
    display: flex;
    justify-content: center;
    align-items: center;
    }

.note-icon-container
    {
    display: flex;
    justify-content: center;
    align-items: center;
    }

.weather-element
    {
    font-size: 0.95em;
    color: var(--text-secondary);
    font-weight: bold;
    }

.injury-element
    {
    font-size: 0.95em;
    color: var(--text-secondary);
    white-space: normal;
    word-break: break-word;
    min-width: 0;
    }

.injury-team-row
    {
    display: flex;
    align-items: baseline;
    }

.injury-team-label
    {
    white-space: nowrap;
    flex-shrink: 0;
    }

.tv-element
    {
    font-size: 0.95em;
    color: var(--text-secondary);
    }

.location-element
    {
    font-size: 0.95em;
    color: var(--text-secondary);
    }

.note-element
    {
    font-size: 0.95em;
    color: inherit;
    }

.weather-separator
    {
    color: var(--text-secondary);
    font-weight: bold;
    text-align: center;
    }

.weather-icon
    {
    cursor: pointer;
    }

/* Error weather row styling */
.error-weather-row
    {
    background-color: var(--error-bg);
    border: 1px solid var(--error-color);
    }

/* Error injury row styling */
.error-injury-row
    {
    background-color: var(--error-bg);
    border: 1px solid var(--error-color);
    }

/* Error TV row styling */
.error-tv-row
    {
    background-color: var(--error-bg);
    border: 1px solid var(--error-color);
    }

/* Error location row styling */
.error-location-row
    {
    background-color: var(--error-bg);
    border: 1px solid var(--error-color);
    }

.error-weather-row .error-weather-cell
    {
    padding: 0 20px;
    }

.error-injury-row .error-injury-cell
    {
    padding: 0 20px;
    }

.error-tv-row .tv-cell
    {
    padding: 0 20px;
    }

.error-location-row .location-cell
    {
    padding: 0 20px;
    }

.error-weather-row .weather-content
    {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    }

.error-injury-row .injury-content
    {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    }

.error-tv-row .tv-content
    {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    }

.error-location-row .location-content
    {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    }

.error-weather-row .error-message
    {
    font-size: 0.95em;
    color: var(--error-color);
    font-weight: bold;
    }

.error-tv-row .error-message
    {
    font-size: 0.95em;
    color: var(--error-color);
    font-weight: bold;
    }

.error-location-row .error-message
    {
    font-size: 0.95em;
    color: var(--error-color);
    font-weight: bold;
    }

.weather-icon:hover
    {
    background-color: #f3f4f6;
    transform: scale(1.1);
    }

.weather-icon:active
    {
    transform: scale(0.95);
    }

.weather-text
    {
    font-size: 0.95em;
    color: var(--text-secondary);
    }

/* Dark mode overrides for info rows */
[data-theme="dark"] .status-row,
[data-theme="dark"] .weather-row,
[data-theme="dark"] .injury-row,
[data-theme="dark"] .tv-row,
[data-theme="dark"] .location-row,
[data-theme="dark"] .neutral-location-row
    {
    background-color: inherit !important;
    }

[data-theme="dark"] .weather-text
    {
    color: var(--text-secondary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Cursor Rules for All Projects */
/*---------------------------------------------------------------------------------------------*/
/*
# Cursor Rules for All Projects

## Windows Environment Rules
- This is a Windows 11 environment - DO NOT use Linux commands
- DO NOT use "&&" to chain commands - use separate commands or PowerShell syntax
- Use Windows-compatible commands and paths
- Use PowerShell syntax when appropriate

## Code Style
- Always use Whitesmiths brace placement style:
  ```java
  if (condition)
      {
      // code
      }
  ```
  NOT:
  ```java
  if (condition) {
      // code
  }
  ```

## Java Conventions
- Use camelCase for variables and methods
- Use PascalCase for classes
- Use UPPER_SNAKE_CASE for constants
- Always use semicolons at the end of statements
- Use 4 spaces for indentation (not tabs)
- Always add a space before left parentheses in:
  - Control structures: `if (condition)`, `for (int i = 0)`, `while (condition)`
  - Method calls: `test (param)`, `System.out.println (message)`
  - Constructor calls: `new Date ()`
- Do NOT add space before left parentheses in:
  - Method declarations: `public void test() {}`
  - Lambda expressions: `param -> {}`
- Use Whitesmiths brace placement style for all blocks (if, for, while, function, etc.)

## Project-Specific Rules
- Follow the existing code structure and patterns in each project
- Maintain the existing data parsing patterns
- Preserve the existing file processing patterns
- Keep the existing API communication patterns
- Maintain the existing package naming conventions

## File Organization
- Keep related functionality together
- Use descriptive method and variable names
- Add comments for complex logic
- Maintain the existing file structure

## Error Handling
- Always include try-catch blocks for error-prone operations
- Log errors to console with descriptive messages
- Provide user-friendly error messages when appropriate
*/
/*---------------------------------------------------------------------------------------------*/
/* Zoom Controls Styles */
/*---------------------------------------------------------------------------------------------*/
.zoom-controls
    {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    }

.zoom-button
    {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    }

.zoom-button:hover
    {
    background-color: var(--bg-tertiary);
    }

.zoom-button:disabled
    {
    opacity: 0.5;
    cursor: not-allowed;
    }

#zoom-percentage
    {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: center;
    }
/*---------------------------------------------------------------------------------------------*/
/* Sportsbook Column Resize Slider Styles */
/*---------------------------------------------------------------------------------------------*/
/* The sportsbook column resize slider is now rendered inline inside the
   hamburger menu (#hamburger-column-resize-item), so the wrapper just
   needs flex layout for its label/slider/value children.  The outer
   popup container that previously held this slider in the page-header
   has been retired. */
.resize-slider-wrapper
    {
    display: flex;
    align-items: center;
    gap: 8px;
    }

.resize-label
    {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 28px;
    text-align: center;
    }
[data-theme="dark"] .resize-label
    {
    color: var(--text-primary);
    }

.resize-slider
    {
    flex: 1;
    min-width: 80px;
    height: 8px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-quaternary, #d1d5db);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    outline: none;
    }
[data-theme="dark"] .resize-slider
    {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
    }

.resize-slider::-webkit-slider-thumb
    {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary, #3b82f6);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

.resize-slider::-moz-range-thumb
    {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary, #3b82f6);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

.resize-value
    {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 36px;
    text-align: center;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
    }

.resize-value:hover
    {
    background-color: var(--bg-quaternary);
    }

/*---------------------------------------------------------------------------------------------*/
body
    {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    /* Paint into the iPhone notch / home-indicator zones so the page fills the
       entire screen in landscape (viewport-fit=cover).  box-sizing:border-box so
       the safe-area-inset padding is subtracted from the 100vh height rather than
       added on top of it - otherwise the page is taller than the screen and the
       inset-top padding shifts the content down past the bottom edge, hiding the
       last event until the user pinch-zooms. */
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    height: 100vh;
    overflow: hidden;
    font-size: calc(14px * var(--zoom-factor));
    }

/*---------------------------------------------------------------------------------------------*/
/* Landscape: no top pill to avoid, so let the odds table fill the screen top-to-bottom and
   edge-to-edge.  Recolor the <html> canvas dark so the rounded-corner / overscroll slivers
   don't show as white borders, and zero the body safe-area padding so the table reaches
   every physical edge. */
@media (orientation: landscape)
    {
    html
        {
        background-color: var(--bg-primary);
        }

    body
        {
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        }
    }
/*---------------------------------------------------------------------------------------------*/
.odds-container
    {
    position: relative;
    width: 100%;
    /* Fill the body's inset-reduced content box (height:100%) instead of
       re-claiming the full viewport (height:100vh), which would ignore the
       safe-area insets and overflow the screen.  border-box keeps the 4px
       padding inside that height. */
    box-sizing: border-box;
    height: 100%;
    padding: 4px !important;
    background-color: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    }

#login-section
    {
    width: calc(300px * var(--zoom-factor));
    min-width: calc(300px * var(--zoom-factor));
    max-width: calc(300px * var(--zoom-factor));
    }

.flex-row-header
    {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
    }

/*---------------------------------------------------------------------------------------------*/
/* Fixed header section */
.odds-container > h1,
.odds-container > #login-section,
.odds-container > #status-area
    {
    flex-shrink: 0;
    background-color: var(--bg-primary);
    z-index: 30;
    }
/*---------------------------------------------------------------------------------------------*/
/* Scrollable content section */
#data-section
    {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for Firefox */
    overflow-x: auto;
    margin-top: 4px !important;
    }
/*---------------------------------------------------------------------------------------------*/
/* Scrollable table container */
#odds-table-target
    {
    flex: 1;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    margin-top: 0 !important;
    padding-top: 0 !important;
    scroll-behavior: instant;
    }
/*---------------------------------------------------------------------------------------------*/
/* Styles for login form */
/*---------------------------------------------------------------------------------------------*/
.login-form input
    {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    border: 1px solid var(--border-primary);
    border-radius: 0.375rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    }
/*---------------------------------------------------------------------------------------------*/
.login-form button
    {
    padding: 0.6rem 1.2rem;
    background-color: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
    }
/*---------------------------------------------------------------------------------------------*/
.login-form button:hover
    {
    background-color: var(--accent-secondary);
    }
/*---------------------------------------------------------------------------------------------*/
.login-form button:disabled
    {
    background-color: #9ca3af;
    cursor: not-allowed;
    }
/*---------------------------------------------------------------------------------------------*/
.table-container
    {
    width: 100%;
    min-width: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 1;
    }

.table-container:has(.time-header:hover)
    {
    z-index: 100; /* Lift entire group above next group's header when hovering on time-header */
    }
/*---------------------------------------------------------------------------------------------*/
/* Main Odds Table Styles - Only applies to tables with .odds-table class */
/*---------------------------------------------------------------------------------------------*/
.odds-table
    {
    width: auto;
    border-collapse: separate !important;
    border-spacing: 0;
    table-layout: fixed !important;
    }
/*---------------------------------------------------------------------------------------------*/
.odds-table th
    {
    padding: 0 calc(0.25rem * var(--zoom-factor));
    text-align: left;
    border-bottom: 1px solid var(--border-secondary);
    vertical-align: middle;
    }

.odds-table td
    {
    padding: 0 calc(0.25rem * var(--zoom-factor));
    text-align: left;
    border-bottom: 1px solid var(--border-secondary);
    vertical-align: top;
    }

/* Grid lines between columns - shown by default, hidden when body has .hide-grid-lines class */
.odds-table th,
.odds-table td
    {
    border-right: 1px solid var(--border-secondary);
    }

/* Hide grid lines when the setting is disabled */
body.hide-grid-lines .odds-table th,
body.hide-grid-lines .odds-table td
    {
    border-right: none;
    }
/*---------------------------------------------------------------------------------------------*/
/* General sticky header behavior */
.odds-table th
    {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    position: sticky;
    top: 0;
    text-align: center;
    z-index: 10; /* z-index for headers that only scroll top */
    color: var(--text-primary);
    }

/* Remove padding from header cells to make them shorter */
.odds-table thead th,
.sticky-header th
    {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    }

/* Rotation columns use width: 0px when hidden (controlled by CSS variables) */
/* Hide overflow when rotation columns are collapsed to 0px width */
.rotation-column
    {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    }

/* Allow overflow for rotation column headers to show dropdowns */
th.rotation-column.rot-header,
th.rotation-column.rot2-header
    {
    overflow: visible;
    }

/* ===== Column Group Styles ===== */

/* Column group parent header */
.column-group-parent
    {
    position: relative;
    user-select: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    }

.column-group-parent:hover
    {
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.05));
    }

/* Dark mode support for column groups */
.dark .column-group-parent
    {
    color: #d1d5db;
    }

.dark .column-group-parent:hover
    {
    background-color: rgba(255, 255, 255, 0.1);
    }

/* ========================================
   COLUMN GROUP BORDERS - HEADER ROW
   ======================================== */

/* Left-edge header cell (parent column) - always has left border */
th.column-group-left-edge.column-group-parent
    {
    border-left: 3px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* Parent header when COLLAPSED - left + top + right border */
th.column-group-left-edge.column-group-parent:not(.column-group-expanded)
    {
    border-left: 3px solid var(--column-group-border-color, #3b82f6) !important;
    border-top: 3px solid var(--column-group-border-color, #3b82f6) !important;
    border-right: 3px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* Parent header when EXPANDED - left + top + right border */
th.column-group-left-edge.column-group-expanded
    {
    border-left: 3px solid var(--column-group-border-color, #3b82f6) !important;
    border-top: 3px solid var(--column-group-border-color, #3b82f6) !important;
    border-right: 3px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* Middle header cells (child columns) - top border only */
th.column-group-middle[data-parent-expanded="true"]
    {
    border-top: 3px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* Right-edge header cell (last child column) - top + right border */
th.column-group-right-edge[data-parent-expanded="true"]
    {
    border-top: 3px solid var(--column-group-border-color, #3b82f6) !important;
    border-right: 3px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* ========================================
   COLUMN GROUP BORDERS - DATA ROWS
   ======================================== */

/* Left-edge data cell (parent cell) - always has left + right border */
td.column-group-left-edge.column-group-parent-cell
    {
    border-left: 3px solid var(--column-group-border-color, #3b82f6) !important;
    border-right: 3px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* Middle data cells (child columns when expanded) - no borders */
td.column-group-middle.column-group-child-cell
    {
    /* No border - just part of the group */
    }

/* Right-edge data cell (last child cell when expanded) - right border only */
td.column-group-right-edge.column-group-child-cell
    {
    border-right: 3px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* ========================================
   COLUMN GROUP BORDERS - BOTTOM ROW
   ======================================== */

/* Bottom border for last event in each league section - COLLAPSED groups */
.event-tbody.last-event-in-group td.column-group-left-edge.column-group-parent-cell[data-group-expanded="false"]
    {
    border-bottom: 3px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* Bottom border for last event in each league section - EXPANDED groups */
.event-tbody.last-event-in-group td.column-group-left-edge.column-group-parent-cell[data-group-expanded="true"],
.event-tbody.last-event-in-group td.column-group-middle.column-group-child-cell,
.event-tbody.last-event-in-group td.column-group-right-edge.column-group-child-cell
    {
    border-bottom: 3px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* ========================================
   DARK MODE
   ======================================== */

/* Dark mode - use a lighter blue for better visibility */
.dark th.column-group-left-edge.column-group-parent,
.dark th.column-group-left-edge.column-group-parent:not(.column-group-expanded),
.dark th.column-group-left-edge.column-group-expanded,
.dark th.column-group-middle[data-parent-expanded="true"],
.dark th.column-group-right-edge[data-parent-expanded="true"],
.dark td.column-group-left-edge.column-group-parent-cell,
.dark td.column-group-left-edge.column-group-parent-cell[data-group-expanded="false"],
.dark td.column-group-middle.column-group-child-cell,
.dark td.column-group-right-edge.column-group-child-cell,
.dark .event-tbody.last-event-in-group td.column-group-left-edge.column-group-parent-cell[data-group-expanded="false"],
.dark .event-tbody.last-event-in-group td.column-group-left-edge.column-group-parent-cell[data-group-expanded="true"],
.dark .event-tbody.last-event-in-group td.column-group-middle.column-group-child-cell,
.dark .event-tbody.last-event-in-group td.column-group-right-edge.column-group-child-cell
    {
    border-color: #60a5fa !important;
    }

/* Group parent header content reserves right-side space for the arrow */
.column-group-parent .group-header-content
    {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px;
    width: 100%;
    }

/* Group name - truncates if too long */
.column-group-parent .group-name
    {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

.column-group-parent .group-name-clickable
    {
    cursor: pointer;
    }

/* Group arrow - always visible on the right */
.column-group-parent .group-arrow
    {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    transition: transform 0.2s ease;
    align-self: start;
    flex-shrink: 0;
    }

/* Expansion triangle styling */
.column-group-parent::before
    {
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.2s ease;
    }

/* Child column headers */
.column-group-child
    {
    border-left: 2px solid var(--group-border-color, #cbd5e0);
    background-color: var(--child-bg, rgba(0, 0, 0, 0.02));
    color: inherit;
    }

/* Child column cells */
.column-group-child-cell
    {
    border-left: 1px solid var(--group-border-color, #e2e8f0);
    background-color: var(--child-bg, rgba(0, 0, 0, 0.01));
    color: inherit;
    }

/* Collapsed child columns - hidden with width: 0 and display: none */
.column-group-collapsed + .column-group-child,
.column-group-child[data-parent-group]:not([data-parent-expanded])
    {
    width: 0px !important;
    min-width: 0px !important;
    max-width: 0px !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
    display: none;
    }

.column-group-collapsed + .column-group-child-cell,
.column-group-child-cell[data-parent-group]:not([data-parent-expanded])
    {
    width: 0px !important;
    min-width: 0px !important;
    max-width: 0px !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
    display: none;
    }

/* Expanded child columns - visible with transitions */
.column-group-expanded ~ .column-group-child,
.column-group-child[data-parent-expanded]
    {
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
    }

.column-group-expanded ~ .column-group-child-cell,
.column-group-child-cell[data-parent-expanded]
    {
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
    }

/* Dark mode adjustments for column groups */
[data-theme="dark"] .column-group-parent:hover
    {
    background-color: rgba(255, 255, 255, 0.1);
    }

[data-theme="dark"] .column-group-child
    {
    border-left-color: #4a5568;
    background-color: rgba(255, 255, 255, 0.03);
    color: #d1d5db;
    }

[data-theme="dark"] .column-group-child-cell
    {
    border-left-color: #2d3748;
    background-color: rgba(255, 255, 255, 0.02);
    color: #d1d5db;
    }

/* When rotation columns are hidden (width: 0), remove all spacing */
/* Only remove borders when grid lines are disabled OR when columns are actually hidden */
body.hide-grid-lines .odds-table td.rotation-column.rotation-universal,
body.hide-grid-lines .odds-table th.rotation-column.rotation-universal
    {
    border-left-width: 0;
    border-right-width: 0;
    }

body.hide-grid-lines .odds-table td.rotation-column.rotation-international,
body.hide-grid-lines .odds-table th.rotation-column.rotation-international
    {
    border-left-width: 0;
    border-right-width: 0;
    }

.odds-table td.rotation-column.rotation-universal[style*="display: none"],
.odds-table th.rotation-column.rotation-universal[style*="display: none"]
    {
    border-left-width: 0;
    border-right-width: 0;
    }

.odds-table td.rotation-column.rotation-international[style*="display: none"],
.odds-table th.rotation-column.rotation-international[style*="display: none"]
    {
    border-left-width: 0;
    border-right-width: 0;
    }

/* Semantic column widths and visibility */
.odds-table th.time-column,
.odds-table td.time-column
    {
    width: calc(var(--time-col-width) * var(--zoom-factor)) !important;
    min-width: calc(var(--time-col-width) * var(--zoom-factor)) !important;
    max-width: calc(var(--time-col-width) * var(--zoom-factor)) !important;
    }

.odds-table th.rotation-column.rotation-universal,
.odds-table td.rotation-column.rotation-universal
    {
    display: var(--rot-col-display);
    width: calc(var(--rot-col-width) * var(--zoom-factor)) !important;
    min-width: calc(var(--rot-col-width) * var(--zoom-factor)) !important;
    max-width: calc(var(--rot-col-width) * var(--zoom-factor)) !important;
    padding-left: calc(var(--rot-col-width) * 0.016667);
    padding-right: calc(var(--rot-col-width) * 0.016667);
    }

.odds-table th.rotation-column.rotation-international,
.odds-table td.rotation-column.rotation-international
    {
    display: var(--rot2-col-display);
    width: calc(var(--rot2-col-width) * var(--zoom-factor)) !important;
    min-width: calc(var(--rot2-col-width) * var(--zoom-factor)) !important;
    max-width: calc(var(--rot2-col-width) * var(--zoom-factor)) !important;
    padding-left: calc(var(--rot2-col-width) * 0.016667);
    padding-right: calc(var(--rot2-col-width) * 0.016667);
    }

.odds-table th.matchup-cell,
.odds-table td.matchup-cell
    {
    width: calc(var(--matchup-col-width) * var(--zoom-factor)) !important;
    min-width: calc(var(--matchup-col-width) * var(--zoom-factor)) !important;
    max-width: calc(var(--matchup-col-width) * var(--zoom-factor)) !important;
    }

.odds-table th.abbr-cell,
.odds-table td.abbr-cell
    {
    width: calc(var(--abbr-col-width) * var(--zoom-factor)) !important;
    min-width: calc(var(--abbr-col-width) * var(--zoom-factor)) !important;
    max-width: calc(var(--abbr-col-width) * var(--zoom-factor)) !important;
    text-align: left;
    }
.abbr-cell div
    {
    line-height: 1.3;
    }
.abbr-cell .team-name
    {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    line-height: 1.3;
    font-size: calc(14px * var(--zoom-factor));
    }
.abbr-cell .team-name.winner
    {
    font-weight: bold;
    }

.odds-table th.score-cell,
.odds-table td.score-cell
    {
    width: calc(var(--scores-col-width) * var(--zoom-factor)) !important;
    min-width: calc(var(--scores-col-width) * var(--zoom-factor)) !important;
    max-width: calc(var(--scores-col-width) * var(--zoom-factor)) !important;
    }

.odds-table th.score-ext-cell,
.odds-table td.score-ext-cell
    {
    width: calc(var(--score-ext-col-width) * var(--zoom-factor)) !important;
    min-width: calc(var(--score-ext-col-width) * var(--zoom-factor)) !important;
    max-width: calc(var(--score-ext-col-width) * var(--zoom-factor)) !important;
    }

.odds-table th.odds-cell,
.odds-table td.odds-cell
    {
    width: calc(var(--sportsbook-col-width) * var(--sportsbook-col-scale) * var(--zoom-factor)) !important;
    min-width: calc(var(--sportsbook-col-width) * var(--sportsbook-col-scale) * var(--zoom-factor)) !important;
    max-width: calc(var(--sportsbook-col-width) * var(--sportsbook-col-scale) * var(--zoom-factor)) !important;
    }
/*---------------------------------------------------------------------------------------------*/
.odds-table th
    {
    background-color: #f9fafb;
    font-weight: 600;
    position: sticky;
    top: 0;
    text-align: center;
    font-size: calc(12px * var(--zoom-factor)) !important; /* 85% of 14px */
    white-space: nowrap !important;
    /* overflow: hidden !important; */
    text-overflow: ellipsis !important;
    height: calc(20px * var(--zoom-factor)) !important;
    line-height: calc(20px * var(--zoom-factor)) !important;
    padding-top: calc(2px * var(--zoom-factor)) !important;
    padding-bottom: calc(2px * var(--zoom-factor)) !important;
    padding-left: calc(2px * var(--zoom-factor)) !important;
    padding-right: calc(2px * var(--zoom-factor)) !important;
    }
/*---------------------------------------------------------------------------------------------*/
.odds-table td
    {
    font-size: calc(14px * var(--zoom-factor));
    line-height: 1.4;
    white-space: nowrap;
    }
/*---------------------------------------------------------------------------------------------*/
.matchup-cell div
    {
    line-height: 1.3;
    }
/*---------------------------------------------------------------------------------------------*/
.matchup-cell .team-name
    {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    line-height: 1.3;
    font-size: calc(14px * var(--zoom-factor));
    }

.matchup-cell .team-name.winner
    {
    font-weight: bold;
    }

/* Placeholder team matchups (e.g. "SIN / DJO" or "FRA / MOR") in tournament brackets */
.bracket-placeholder,
.matchup-cell .team-name.bracket-placeholder,
.abbr-cell .team-name.bracket-placeholder,
.team-abbr.bracket-placeholder
    {
    color: var(--text-tertiary) !important;
    font-style: italic !important;
    font-size: calc(12px * var(--zoom-factor)) !important;
    }

/* Double-header badge ("DH", "#1", "#2") - right-justified in matchup cell */
.dh-badge
    {
    background-color: #2563eb;
    color: #ffffff;
    font-size: calc(10px * var(--zoom-factor));
    font-weight: 600;
    line-height: 1.2;
    padding: 1px 4px;
    border-radius: 3px;
    justify-self: end;
    }

/* No-pitcher double-header container - full team name with right-justified badge */
.team-name-dh-container
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: calc(4px * var(--zoom-factor));
    }

/* Apply the same style to date, time, and rotation numbers for alignment */
.date-time .date,
.date-time .time,
.time-row,
.rotation-numbers span
    {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    line-height: 1.3;
    font-size: calc(14px * var(--zoom-factor));
    }
/*---------------------------------------------------------------------------------------------*/
.odds-cell div
    {
    line-height: 1.3;
    }
/*---------------------------------------------------------------------------------------------*/
.odds-cell .odds-value
    {
    text-align: right;
    display: block;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    line-height: 1.3;
    font-size: calc(14px * var(--zoom-factor));
    }
/*---------------------------------------------------------------------------------------------*/
.status-message, .error-message
    {
    text-align: center;
    font-size: calc(16px * var(--zoom-factor));
    border-radius: calc(0.375rem * var(--zoom-factor));
    }
/*---------------------------------------------------------------------------------------------*/
.status-message
    {
    background-color: var(--info-bg);
    color: var(--info-color);
    }
/*---------------------------------------------------------------------------------------------*/
.error-message
    {
    background-color: var(--error-bg);
    color: var(--error-color);
    }
/*---------------------------------------------------------------------------------------------*/
.hidden
    {
    display: none;
    }
/*---------------------------------------------------------------------------------------------*/
.date-time
    {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    }
/*---------------------------------------------------------------------------------------------*/
.date-time .date
    {
    font-size: calc(14px * var(--zoom-factor));
    }
/*---------------------------------------------------------------------------------------------*/
.date-time .time
    {
    font-size: calc(14px * var(--zoom-factor));
    }

/*---------------------------------------------------------------------------------------------*/
/* Time Column Styles */
/*---------------------------------------------------------------------------------------------*/
.odds-table td.time-column
    {
    min-width: var(--time-col-width);
    width: var(--time-col-width);
    vertical-align: top;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    }

.rotation-column
    {
    padding-top: calc(2px * var(--zoom-factor)) !important;
    padding-bottom: calc(2px * var(--zoom-factor)) !important;
    }

.odds-table td.rotation-column
    {
    vertical-align: top;
    }



.time-display
    {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 2px;
    }

.time-row
    {
    font-size: calc(14px * var(--zoom-factor));
    font-weight: 500;
    color: #374151;
    line-height: 1.3;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    }

.time-icons-wrapper
    {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    }

.time-icons
    {
    display: flex;
    gap: 1px;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    }

.time-icons-more
    {
    position: relative;
    flex: 0 0 auto;
    font-size: calc(12px * var(--zoom-factor));
    line-height: 1;
    padding: 1px 2px;
    cursor: default;
    color: var(--text-secondary);
    -webkit-user-select: none;
    user-select: none;
    }

.time-icons-overflow-popover
    {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    background-color: var(--row-bg-color, var(--bg-color, #ffffff));
    border: 1px solid var(--column-group-border-color, #3b82f6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    align-items: center;
    gap: 1px;
    padding: 0 2px;
    border-radius: 2px;
    }

.time-icons-more:hover .time-icons-overflow-popover,
.time-icons-overflow-popover:hover
    {
    display: inline-flex;
    }

/* JS-fallback path: when the shim adds .hovering-overflow on the wrapper, un-clip
   the wrapper so the popover can render outside it, and fade the ellipsis glyph
   so the opaque popover visually replaces it. */
.time-icons-wrapper.hovering-overflow
    {
    overflow: visible;
    }
.time-icons-wrapper.hovering-overflow .time-icons-more
    {
    color: transparent;
    }
/* JS-fallback path: lift the time-column td above sibling sticky columns so the
   overflow popover paints over them instead of being covered by their opaque
   backgrounds. The popover's own z-index is trapped inside this td's stacking
   context, so the lift must happen on the td itself. */
.odds-table td.time-column.sticky-column.hovering-overflow
    {
    z-index: 25;
    }

/* Modern-CSS path: browsers that support :has() do the same thing without JS. */
@supports selector(:has(*))
    {
    .time-icons-wrapper:has(.time-icons-more:hover),
    .time-icons-wrapper:has(.time-icons-overflow-popover:hover)
        {
        overflow: visible;
        }
    .time-icons-wrapper:has(.time-icons-more:hover) .time-icons-more,
    .time-icons-wrapper:has(.time-icons-overflow-popover:hover) .time-icons-more
        {
        color: transparent;
        }
    .odds-table td.time-column.sticky-column:has(.time-icons-more:hover),
    .odds-table td.time-column.sticky-column:has(.time-icons-overflow-popover:hover)
        {
        z-index: 25;
        }
    }

.time-icon
    {
    font-size: calc(12px * var(--zoom-factor));
    cursor: pointer;
    padding: 1px;
    border-radius: 2px;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    }

.time-icon:hover
    {
    background-color: #f3f4f6;
    transform: scale(1.1);
    }

.time-icon:active
    {
    transform: scale(0.95);
    }

.injury-icon
    {
    color: #dc2626;
    }

.red-cross
    {
    position: relative;
    width: calc(14px * var(--zoom-factor));
    height: calc(14px * var(--zoom-factor));
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    }

.red-cross::before,
.red-cross::after
    {
    content: '';
    position: absolute;
    background-color: #dc2626;
    }

.red-cross::before
    {
    width: 21%;
    height: 71%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

.red-cross::after
    {
    width: 71%;
    height: 21%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

.weather-icon
    {
    color: #f59e0b;
    }

.tv-icon
    {
    color: #3b82f6;
    }

.location-icon
    {
    color: #10b981;
    }

.note-icon
    {
    color: #fbc02d;
    }

.officials-icon
    {
    color: #6b7280;
    }

/* Letter icon mode styling */
.letter-icon
    {
    font-weight: bold;
    font-size: calc(11px * var(--zoom-factor));
    min-width: calc(14px * var(--zoom-factor));
    min-height: calc(14px * var(--zoom-factor));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    }

/* Icon highlight: hollow red ring (preserves the icon's own color) */
.icon-highlight
    {
    border-radius: 50%;
    border: 2px solid #dc2626;
    padding: 1px;
    }

/* Info Settings Modal: per-icon table */
.icon-settings-table
    {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    }

.info-settings-content .icon-settings-th
    {
    text-align: left;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: bold;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    }

.preview-header
    {
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    padding: 2px 4px;
    }

.preview-subheader
    {
    text-align: center;
    font-size: 10px;
    color: #6b7280;
    padding-bottom: 4px;
    }

.icon-settings-label
    {
    padding: 4px 6px 4px 0;
    white-space: nowrap;
    font-size: 12px;
    }

.icon-settings-radios
    {
    padding: 2px 8px;
    white-space: nowrap;
    }

.icon-radio-label
    {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    margin-right: 8px;
    font-size: 11px;
    }

.preview-cell
    {
    text-align: center;
    padding: 3px 4px;
    }

.preview-icon
    {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    }

/* Make location icon white on final/active game backgrounds for better visibility */
.score-final .location-icon,
.score-active .location-icon
    {
    color: white !important;
    }
/*---------------------------------------------------------------------------------------------*/
.score-cell
    {
    vertical-align: top !important;
    padding-top: calc(2px * var(--zoom-factor)) !important;
    padding-bottom: calc(2px * var(--zoom-factor)) !important;
    }
/*---------------------------------------------------------------------------------------------*/
.score-container
    {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: calc(0.5rem * var(--zoom-factor)) !important;
    width: 100% !important;
    min-height: calc(2.6rem * var(--zoom-factor)) !important;
    position: relative !important;
    }
/*---------------------------------------------------------------------------------------------*/
.scores-column
    {
    text-align: right !important;
    }
/*---------------------------------------------------------------------------------------------*/
.status-column
    {
    text-align: left !important;
    }
/*---------------------------------------------------------------------------------------------*/
.score-value
    {
    font-size: calc(14px * var(--zoom-factor));
    line-height: 1.3;
    color: #374151;
    display: block;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 4px;
    }
/*---------------------------------------------------------------------------------------------*/
:root tbody > tr.score-final td.sticky-column,
[data-theme="dark"] :root tbody > tr.score-final td.sticky-column
    {
    background-color: #dc2626 !important; /* red */
    color: white !important;
    }
/*---------------------------------------------------------------------------------------------*/
/* Generic fallback for ACTIVE games (green) on sticky columns. */
:root tbody > tr.score-active td.sticky-column,
[data-theme="dark"] :root tbody > tr.score-active td.sticky-column
    {
    background-color: #166534 !important; /* dark green */
    color: white !important;
    }
/*---------------------------------------------------------------------------------------------*/
/* Style elements within sticky columns */
tr.score-active td.sticky-column *,
tr.score-final td.sticky-column *
    {
    color: white !important;
    }

/* Ensure text is white for active/final games in both modes */
tr.score-active td.sticky-column,
tr.score-final td.sticky-column
    {
    color: white !important;
    }
/*---------------------------------------------------------------------------------------------*/
.rotation-numbers
    {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    line-height: 1.3;
    text-align: center;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    font-size: calc(14px * var(--zoom-factor));
    }

.team-info-container
    {
    display: grid;
    grid-template-columns: calc(40px * var(--zoom-factor)) 1fr;
    width: 100%;
    gap: calc(2px * var(--zoom-factor));
    align-items: center;
    }

.team-info-container.dh
    {
    grid-template-columns: calc(40px * var(--zoom-factor)) 1fr auto;
    }

/* When a team logo is rendered inside .team-abbr, the first grid column has
   to hold the logo (~1.1em + 0.3em margin) plus a 3-char abbreviation, so
   widen it to 60px to prevent the abbreviation from being ellipsis-truncated. */
.team-info-container.has-logo
    {
    grid-template-columns: calc(60px * var(--zoom-factor)) 1fr;
    }

.team-info-container.dh.has-logo
    {
    grid-template-columns: calc(60px * var(--zoom-factor)) 1fr auto;
    }

.team-abbr
    {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

.pitcher-name
    {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    }

.pitcher-unconfirmed-badge
    {
    display: inline-block;
    color: #ffff00;
    font-size: calc(11px * var(--zoom-factor));
    line-height: 1;
    margin-right: calc(3px * var(--zoom-factor));
    vertical-align: middle;
    flex-shrink: 0;
    }

html:not([data-theme="dark"]) .pitcher-unconfirmed-badge
    {
    background-color: #000000;
    color: #ffff00 !important;
    padding: 0 calc(2px * var(--zoom-factor));
    border-radius: calc(2px * var(--zoom-factor));
    }





.tennis-sets-container
    {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
    width: 100%;
    row-gap: 0;
    column-gap: calc(2px * var(--zoom-factor));
    position: relative;
    }

.tennis-set
    {
    text-align: left;
    overflow: visible;
    white-space: nowrap;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    }

.tennis-set.away-set
    {
    grid-row: 1;
    }

.tennis-set.home-set
    {
    grid-row: 2;
    }

.tennis-set.set-col-1 { grid-column: 1; }
.tennis-set.set-col-2 { grid-column: 2; }
.tennis-set.set-col-3 { grid-column: 3; }
.tennis-set.set-col-4 { grid-column: 4; }
.tennis-set.set-col-5 { grid-column: 5; }

.tennis-set.set-span-1 { grid-column: 1 / -1; }
.tennis-set.set-span-2 { grid-column: 2 / -1; }
.tennis-set.set-span-3 { grid-column: 3 / -1; }
.tennis-set.set-span-4 { grid-column: 4 / -1; }
.tennis-set.set-span-5 { grid-column: 5 / -1; }

.tennis-set sup
    {
    font-size: calc(0.7em * var(--zoom-factor));
    position: relative;
    top: -0.5em;
    margin-left: calc(1px * var(--zoom-factor));
    }

/* Tennis cells containing letters (like "Winner", "Retired") */
.tennis-set[class*="set-span"],
.tennis-set[style*="grid-column"]
    {
    text-align: center;
    color: #059669; /* Default green color for winner/status text */
    text-overflow: clip; /* Disable ellipsis for text cells */
    overflow: visible; /* Allow text to be fully visible */
    white-space: normal; /* Allow text to wrap if needed */
    }

/* Tennis winner styling - green and bolded */
.tennis-set.tennis-winner,
.tennis-set[class*="set-span"].tennis-winner,
.tennis-winner
    {
    font-weight: bold;
    color: #059669;
    }

/* Tennis retired styling - high-contrast red on dark/black background */
.tennis-set.tennis-retired,
.tennis-set[class*="set-span"].tennis-retired,
.tennis-retired
    {
    font-weight: normal;
    color: #f87171;
    }

.sportsbook-container
    {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(2.6rem * var(--zoom-factor));
    }

/* Time-based odds background colors */
.odds-value
    {
    /* transition: background-color 0.3s ease, color 0.3s ease; */
    font-size: calc(14px * var(--zoom-factor));
    line-height: 1.3;
    padding-top: calc(1px * var(--zoom-factor));
    padding-bottom: calc(1px * var(--zoom-factor));
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 4px;
    }

/* Full-span highlight mode - removes horizontal padding and fills the entire span */
body.odds-highlight-full-span .odds-value
    {
    padding-top: calc(1px * var(--zoom-factor)) !important;
    padding-bottom: calc(1px * var(--zoom-factor)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 4px !important;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    }

.odds-recent,
.odds-medium,
.odds-old
    {
    transition: background-color 0.3s ease, color 0.3s ease;
    }

.odds-recent
    {
    background-color: #dc2626 !important; /* Red background */
    color: white !important;
    }

.odds-medium
    {
    background-color: #fcd34d !important; /* Yellow background */
    color: black !important;
    }

.odds-old
    {
    background-color: #86efac !important; /* Green background */
    color: black !important;
    }
/* --- REPLACE the 'General Overrides' block with this --- */
/* General Overrides (Maximum Specificity using :not()) */
html:not([data-theme="dark"]) tbody tr td.odds-row-highlight span.odds-recent.odds-recent,
html:not([data-theme="dark"]) tbody tr td.odds-column-highlight span.odds-recent.odds-recent {
    color: white !important;
}
html:not([data-theme="dark"]) tbody tr td.odds-row-highlight span.odds-medium.odds-medium,
html:not([data-theme="dark"]) tbody tr td.odds-column-highlight span.odds-medium.odds-medium,
html:not([data-theme="dark"]) tbody tr td.odds-row-highlight span.odds-old.odds-old,
html:not([data-theme="dark"]) tbody tr td.odds-column-highlight span.odds-old.odds-old {
    color: black !important;
}

/* Dark Mode Overrides (Maximum Specificity + Class Repetition) */
html[data-theme="dark"] tbody tr td.odds-row-highlight span.odds-recent.odds-recent,
html[data-theme="dark"] tbody tr td.odds-column-highlight span.odds-recent.odds-recent {
    color: white !important;
}
html[data-theme="dark"] tbody tr td.odds-row-highlight span.odds-medium.odds-medium,
html[data-theme="dark"] tbody tr td.odds-column-highlight span.odds-medium.odds-medium,
html[data-theme="dark"] tbody tr td.odds-row-highlight span.odds-old.odds-old,
html[data-theme="dark"] tbody tr td.odds-column-highlight span.odds-old.odds-old {
    color: black !important;
}
/* --- REPLACE the 'INTERSECTION OVERRIDE: General/Light Mode' block with this --- */
/* INTERSECTION OVERRIDE: General/Light Mode (Maximum Specificity using :not()) */
html:not([data-theme="dark"]) tbody tr td.odds-row-highlight.odds-column-highlight span.odds-recent.odds-recent {
    color: white !important;
}
html:not([data-theme="dark"]) tbody tr td.odds-row-highlight.odds-column-highlight span.odds-medium.odds-medium,
html:not([data-theme="dark"]) tbody tr td.odds-row-highlight.odds-column-highlight span.odds-old.odds-old {
    color: black !important;
}

/* INTERSECTION OVERRIDE: Dark Mode - Targeting TD with BOTH highlight classes */
html[data-theme="dark"] tbody tr td.odds-row-highlight.odds-column-highlight span.odds-recent.odds-recent {
    color: white !important;
}
html[data-theme="dark"] tbody tr td.odds-row-highlight.odds-column-highlight span.odds-medium.odds-medium,
html[data-theme="dark"] tbody tr td.odds-row-highlight.odds-column-highlight span.odds-old.odds-old {
    color: black !important;
}
.score-value.winner-text
    {
    color: #059669;
    font-weight: bold;
    text-align: center;
    width: auto;
    grid-column: 1 / -1;
    }

/* When .score-container contains a .winner-text element, adjust the grid layout */
.score-container:has(.winner-text)
    {
    grid-template-columns: 1fr !important;
    justify-items: center;
    }

.score-container:has(.winner-text) .scores-column
    {
    width: 100% !important;
    }

/*
 * FIX: Set backgrounds for sticky columns, prioritizing active/final states.
 */

.top-bar
    {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    }

#disconnect-button
    {
    position: static;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: calc(0.6rem * var(--zoom-factor)) calc(2.5rem * var(--zoom-factor)); /* Match the connect button's padding */
    border-radius: calc(0.375rem * var(--zoom-factor)); /* Ensure radius is also consistent */
    background-color: #ef4444;
    color: white;
    font-size: calc(16px * var(--zoom-factor));
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    }

#disconnect-button:hover
    {
    background-color: #dc2626;
    }

#status-area
    {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    }

#connection-status
    {
    flex: 0 1 auto;
    margin-left: auto;
    margin-right: calc(8px * var(--zoom-factor));
    text-align: right !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    }

#odds-table-target h1
    {
    position: sticky;
    left: 0;
    background: white;
    z-index: 25;
    }

#connect-button
    {
    position: static;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: calc(0.6rem * var(--zoom-factor)) calc(2.5rem * var(--zoom-factor));
    border-radius: calc(0.375rem * var(--zoom-factor));
    background-color: #3b82f6; /* Blue to match bg-blue-500 */
    color: white;
    font-size: calc(16px * var(--zoom-factor));
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    }

#connect-button:hover
    {
    background-color: #2563eb; /* Blue to match hover:bg-blue-600 */
    }
/* Styles for the new header layout */
.page-header
    {
    display: flex;
    align-items: center;
    gap: calc(2px * var(--zoom-factor)) !important;
    padding-bottom: calc(2px * var(--zoom-factor)) !important;
    border-bottom: 1px solid var(--border-secondary);
    }

/* This new class pushes the controls to the right edge */
.spacer
    {
    flex-grow: 1;
    }

/* Style for the login inputs container */
.login-form
    {
    display: flex;
    flex-direction: column; /* Stacks the inputs vertically */
    gap: calc(0.5rem * var(--zoom-factor));
    width: calc(300px * var(--zoom-factor)); /* Or adjust as needed */
    }

/* General styling for controls in the header */
.controls-group
    {
    display: flex;
    align-items: center;
    gap: calc(0.5rem * var(--zoom-factor));
    color: var(--text-tertiary);
    font-size: calc(14px * var(--zoom-factor));
    }
/* New style for the sticky header */
.sticky-header
    {
    position: sticky;
    top: 0px !important;
    z-index: 30; /* Ensures the header stays on top of other content */
    }

/* Give the sticky header's cells a solid background to prevent
   content from showing through as it scrolls underneath. */
.sticky-header th
    {
    background-color: var(--bg-tertiary); /* A light gray background */
    }

/* Drag and Drop Styles */
th[data-drag-type]
    {
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s;
    }

th[data-drag-type]:hover
    {
    background-color: var(--bg-quaternary);
    }

th[data-drag-type].dragging
    {
    opacity: 0.5;
    background-color: var(--bg-quaternary);
    }

th[data-drag-type].drag-over
    {
    background-color: var(--accent-primary) !important; /* Light blue background */
    border: 2px solid var(--accent-secondary) !important; /* Light blue border - more performant than box-shadow */
    }

/* Ensure the cursor-move class is applied */
.cursor-move
    {
    cursor: move !important;
    }

/* Group Header Drag and Drop Styles */
h1[data-group-id]
    {
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s, transform 0.2s;
    padding: calc(0.5rem * var(--zoom-factor));
    border-radius: calc(0.25rem * var(--zoom-factor));
    margin: 0;
    border-bottom: 1px solid var(--border-secondary);
    font-size: calc(18px * var(--zoom-factor)) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    }

h1[data-group-id]:hover
    {
    background-color: #e5e7eb;
    }

h1[data-group-id].dragging
    {
    opacity: 0.5;
    background-color: #d1d5db;
    transform: scale(1.02);
    }

h1[data-group-id].drag-over
    {
    background-color: #dbeafe !important; /* Light blue background */
    box-shadow: 0 0 0 2px #93c5fd; /* Light blue border */
    }

/* Event Row Drag and Drop Styles */
tr[data-rotation]
    {
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s;
    }

tr[data-rotation].dragging
    {
    opacity: 0.5;
    background-color: #d1d5db !important;
    }

tr[data-rotation].drag-over
    {
    background-color: #dbeafe !important;
    border: 2px dashed #3b82f6;
    }

/*---------------------------------------------------------------------------------------------*/
/* Sports Menu Styles */
/*---------------------------------------------------------------------------------------------*/
.selected-league-right
    {
    margin-left: auto;
    background-color: #3b82f6;
    color: white;
    border-radius: calc(0.375rem * var(--zoom-factor));
    padding: calc(2px * var(--zoom-factor)) calc(12px * var(--zoom-factor));
    font-size: calc(15px * var(--zoom-factor));
    font-weight: 500;
    align-self: center;
    display: flex;
    align-items: center;
    height: calc(28px * var(--zoom-factor));
    min-width: calc(40px * var(--zoom-factor));
    max-width: calc(200px * var(--zoom-factor));
    white-space: nowrap;
    box-shadow: none;
    }

#sports-menu
    {
    display: flex;
    flex-wrap: wrap;
    gap: calc(2px * var(--zoom-factor)) !important;
    position: relative;
    margin-top: 0 !important;
    margin-bottom: calc(8px * var(--zoom-factor)) !important;
    padding: calc(4px * var(--zoom-factor)) !important;
    align-items: center;
    }

/* Wrapper around #sports-menu and #data-section.  Default layout stacks the
   buttons strip above the table; when body has .display-buttons-vertical the
   wrapper switches to a row layout so the strip sits to the left of the table. */
#main-content-row
    {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    position: relative;  /* Anchor for #sports-menu-collapse-toggle when collapsed */
    }

body.display-buttons-vertical #main-content-row
    {
    flex-direction: row;
    }

/* Collapse/expand chevron for the buttons panel.  Three placements driven by
   SettingsManager._relocateCollapseToggle: inline next to the h2 in .page-header
   (horizontal expanded), absolutely positioned at top-left of .sports-menu-header
   (vertical expanded), absolutely positioned at top-left of #main-content-row
   (collapsed in either orientation). */
.sports-menu-collapse-toggle
    {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:  calc(22px * var(--zoom-factor));
    height: calc(22px * var(--zoom-factor));
    padding: 0;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: calc(12px * var(--zoom-factor));
    line-height: 1;
    flex: 0 0 auto;
    }
.sports-menu-collapse-toggle:hover
    {
    background-color: var(--bg-tertiary);
    }
.sports-menu-collapse-toggle .collapse-arrow
    {
    pointer-events: none;
    }

/* Vertical-expanded: chevron occupies its own row above the title, left-aligned.
   order:-1 places it before the h2 (which has order:0) and align-self:flex-start
   keeps it at the left edge while .sports-menu-header is align-items:stretch. */
body.display-buttons-vertical:not(.sports-menu-collapsed) .sports-menu-header > .sports-menu-collapse-toggle
    {
    order: -1;
    align-self: flex-start;
    }

/* Collapsed (any orientation): hide the title bar and the buttons strip so the
   odds table claims the full window; float the chevron over the table top-left.
   #main-content-row is position:relative above. */
body.sports-menu-collapsed .page-header,
body.sports-menu-collapsed #sports-menu
    {
    display: none !important;
    }
body.sports-menu-collapsed #main-content-row > .sports-menu-collapse-toggle
    {
    position: absolute;
    top:  calc(4px * var(--zoom-factor));
    left: calc(4px * var(--zoom-factor));
    z-index: 1500;
    }

body.display-buttons-vertical #sports-menu
    {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    margin-bottom: 0 !important;
    margin-right: calc(8px * var(--zoom-factor)) !important;
    align-self: stretch;
    overflow-y: auto;
    }

body.display-buttons-vertical .sports-menu-header
    {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: calc(4px * var(--zoom-factor));
    width: auto;
    }

body.display-buttons-vertical .sports-menu-content
    {
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    }

/* Reorder header children when vertical.  Full row stack from top to bottom:
   h2 title (0), #vertical-top-row [hamburger + chip] (1), period(3), market(4),
   odds-format(5), +(6), Jump to(7), sport buttons(8), Soccer rows(9), Days(10),
   Clear(13).  The Zoom/Theme/Layout quick-access shortcuts that used to live in
   the strip were retired once the hamburger menu started carrying the same
   three items in both orientations. */
/* Top row of the vertical strip: hamburger menu on the left, selected-display
   chip on the right.  The two elements live in a #vertical-top-row wrapper
   (built by SettingsManager._relocateHeaderControls) so they render side by
   side; the wrapper itself takes order:1 within the column.  align-self:stretch
   lets the row use the full column width, justify-content:flex-start pins the
   hamburger to the left, and flex-wrap:wrap allows a long chip to drop to the
   next line instead of overflowing the strip. */
body.display-buttons-vertical .sports-menu-header > #vertical-top-row
    {
    order: 1;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: calc(8px * var(--zoom-factor));
    }
body.display-buttons-vertical .sports-menu-header > #period-dropdown
    {
    order: 3;
    align-self: stretch;
    margin: 0 !important;
    }
body.display-buttons-vertical .sports-menu-header > #display-type-dropdown
    {
    order: 4;
    align-self: stretch;
    margin: 0 !important;
    }
body.display-buttons-vertical .sports-menu-header > #odds-format-dropdown
    {
    order: 5;
    align-self: stretch;
    margin: 0 !important;
    }
body.display-buttons-vertical .sports-menu-header > #add-custom-display-button
    {
    order: 6;
    align-self: center;
    }
body.display-buttons-vertical .sports-menu-header > #jump-to-container
    {
    order: 7;
    align-self: stretch;
    }
body.display-buttons-vertical .sports-menu-header > .sports-menu-content
    {
    order: 8;
    }
body.display-buttons-vertical .sports-menu-header > .soccer-row-toggle-wrapper
    {
    order: 9;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin: 0 !important;
    }
body.display-buttons-vertical .sports-menu-header > #days-menu-dropdown
    {
    order: 10;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin: 0 !important;
    }
body.display-buttons-vertical .sports-menu-header > #clear-highlights-container
    {
    order: 13;
    align-self: stretch;
    }

/* App title (INTEL Odds vX.Y.Zw + version-indicator dot) at the very top of
   the vertical strip.  Order 0 puts it above #vertical-top-row (order 1).
   The font matches the 20px page-header size so the title reads the same in
   both orientations; flex-wrap on the h2 lets the version-text wrap to a
   second line if the column is very narrow. */
body.display-buttons-vertical .sports-menu-header > h2
    {
    order: 0;
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(4px * var(--zoom-factor));
    margin: 0 0 calc(2px * var(--zoom-factor)) 0;
    font-size: calc(20px * var(--zoom-factor));
    text-align: center;
    }
body.display-buttons-vertical .sports-menu-header > h2 .version-text
    {
    margin-left: 0;
    }

/* Vertical mode collapses the now-empty .page-header so the odds table can
   claim the full viewport height.  The hamburger, dropdowns, chip, title, and
   status-area have all been relocated by SettingsManager._relocateHeaderControls;
   the sportsbook-column resize slider lives inline inside the hamburger menu
   itself so the header has nothing left to show in vertical mode. */
body.display-buttons-vertical .page-header
    {
    display: none;
    }

/* Status / error messages float as a bottom-right toast over the odds table whenever the
   status has no dedicated home in the header — i.e. when the buttons layout is vertical OR
   the sports-menu is collapsed (horizontal but hidden).  SettingsManager toggles the single
   body.status-floating class for both cases; when horizontal AND the sports-menu is visible
   the status keeps its place in #status-area and this rule does not apply.  position:fixed
   pulls the toast out of the layout flow so the table can use the full viewport height;
   pointer-events:none on the container with pointer-events:auto on the visible message lets
   clicks fall through to the table everywhere except the message itself (which can be clicked
   to dismiss).  Bottom-right keeps it clear of the chevron expand button in the top-left and
   respects the device safe-area insets for PWA / notched displays. */
body.status-floating #status-area
    {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + calc(8px * var(--zoom-factor)));
    right:  calc(env(safe-area-inset-right,  0px) + calc(8px * var(--zoom-factor)));
    left:   auto;
    z-index: 2500;
    display: block;
    flex: none;
    width: auto;
    min-width: 0;
    max-width: 60vw;
    pointer-events: none;
    background: transparent;
    text-align: right;
    }
body.status-floating #status-area > #connection-status,
body.status-floating #status-area > #general-error
    {
    pointer-events: auto;
    margin: 0;
    padding: calc(6px * var(--zoom-factor)) calc(12px * var(--zoom-factor));
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    text-align: right !important;
    max-width: none;
    cursor: pointer;
    }

/* Stretch the Jump to and Clear buttons to fill the vertical column width. */
body.display-buttons-vertical #jump-to-container .jump-to-button
    {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    }
body.display-buttons-vertical #clear-highlights-container .clear-highlights-button
    {
    display: block;
    width: 100%;
    box-sizing: border-box;
    }

/* Days dropdown: full width and sized to match the other buttons in the strip. */
body.display-buttons-vertical #days-menu-dropdown .days-combobox
    {
    flex: 1;
    }
body.display-buttons-vertical #days-menu-dropdown .days-combobox-button
    {
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 6px;
    box-sizing: border-box;
    min-width: 0;
    }
/* Keep the column width stable across all Days values: reserve enough space
   in the value span to render "All available" even when the current value is
   just "1" (locked TODAY/NEXT/LIVE/FINAL state) or a small custom number.
   6em at the row's 14px font-size fits the 13-character label tightly, and
   the min-width propagates up through the button -> row -> sidebar so the
   whole vertical strip no longer changes width when the Days value shrinks. */
body.display-buttons-vertical #days-menu-dropdown .days-combobox-value
    {
    min-width: 6em;
    }

body.display-buttons-vertical #data-section
    {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0 !important;
    }

/* Section dividers in the vertical strip.  Implemented as border-top on the
   *next* element so the line spans the full column width regardless of the
   previous element's shape (e.g., the centered "+" button). */

/* Divider below the "+" button → top of the Jump to container. */
body.display-buttons-vertical .sports-menu-header > #jump-to-container
    {
    border-top: 1px solid #d1d5db;
    padding-top: calc(6px * var(--zoom-factor));
    margin-top: calc(4px * var(--zoom-factor));
    }

/* Divider below FINAL → top of the first sport-item after FINAL. */
body.display-buttons-vertical .sports-menu-content > .custom-display-item[data-sport-id="FINAL"] + .sport-item
    {
    border-top: 1px solid #d1d5db;
    padding-top: calc(6px * var(--zoom-factor));
    margin-top: calc(4px * var(--zoom-factor));
    }

/* Divider below the last regular sport button → top of the first non-SPORT
   item that immediately follows a SPORT item. */
body.display-buttons-vertical .sports-menu-content > [data-item-type="SPORT"] + .sport-item:not([data-item-type="SPORT"])
    {
    border-top: 1px solid #d1d5db;
    padding-top: calc(6px * var(--zoom-factor));
    margin-top: calc(4px * var(--zoom-factor));
    }

/* Divider below the custom display buttons → bottom of the sports-menu-content
   block (which sits between the buttons and the Days/Clear controls). */
body.display-buttons-vertical .sports-menu-header > .sports-menu-content
    {
    border-bottom: 1px solid #d1d5db;
    padding-bottom: calc(6px * var(--zoom-factor));
    margin-bottom: calc(4px * var(--zoom-factor));
    }

[data-theme="dark"] body.display-buttons-vertical .sports-menu-header > #jump-to-container,
[data-theme="dark"] body.display-buttons-vertical .sports-menu-content > .custom-display-item[data-sport-id="FINAL"] + .sport-item,
[data-theme="dark"] body.display-buttons-vertical .sports-menu-content > [data-item-type="SPORT"] + .sport-item:not([data-item-type="SPORT"])
    {
    border-top-color: #4a5568;
    }
[data-theme="dark"] body.display-buttons-vertical .sports-menu-header > .sports-menu-content
    {
    border-bottom-color: #4a5568;
    }

/* Center TODAY/NEXT/LIVE/FINAL labels within their full-width column buttons.
   Other buttons (sports, leagues, custom displays) stay left-aligned so the
   sport/league logos line up vertically along the left edge. */
body.display-buttons-vertical .sports-menu-content > .today-nav-trio
    {
    display: flex;
    align-items: center;
    width: 100%;
    }
body.display-buttons-vertical .sports-menu-content > .today-nav-trio .today-label-wrapper
    {
    flex: 1;
    }
body.display-buttons-vertical .sports-menu-content > .today-nav-trio .today-label-wrapper > .sport-link,
body.display-buttons-vertical .sports-menu-content > .up-next-item > .sport-link,
body.display-buttons-vertical .sports-menu-content > .custom-display-item[data-sport-id="LIVE"] > .sport-link,
body.display-buttons-vertical .sports-menu-content > .custom-display-item[data-sport-id="FINAL"] > .sport-link
    {
    text-align: center;
    }

.sports-menu-header
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    }

.sports-menu-content
    {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: calc(2px * var(--zoom-factor)) !important;
    align-items: center;
    }

.menu-flex-spacer
    {
    flex: 1;
    }

.add-custom-display-button
    {
    width: 32px;
    height: 32px;
    border: 2px solid #3b82f6;
    background: white;
    color: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    }

.add-custom-display-button:hover
    {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
    }

.add-custom-display-button:active
    {
    transform: scale(0.95);
    }

/* Jump to Dropdown */
.jump-to-container
    {
    position: relative;
    flex-shrink: 0;
    }

.jump-to-button
    {
    padding: 6px 12px;
    border: 2px solid #6b7280;
    background: white;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
    }

.jump-to-button:hover
    {
    border-color: #4b5563;
    background-color: #f9fafb;
    }

.jump-to-dropdown
    {
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    }

/* Show dropdown on click (controlled by JS adding/removing .show class) */
.jump-to-dropdown.show
    {
    display: block;
    }

.jump-to-dropdown-content
    {
    /* Container for dropdown items */
    }

.jump-to-dropdown-item
    {
    padding: calc(0.25rem * var(--zoom-factor)) calc(0.75rem * var(--zoom-factor));
    cursor: pointer;
    font-size: calc(14px * var(--zoom-factor));
    color: #374151;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(12px * var(--zoom-factor));
    }

.jump-to-dropdown-item:hover
    {
    background-color: #e5e7eb;
    }

.jump-to-dropdown-item-special
    {
    font-style: italic;
    font-weight: 700;
    }

.jump-to-dropdown-item-text
    {
    flex: 1;
    text-align: left;
    }

.jump-to-dropdown-item-count
    {
    flex-shrink: 0;
    font-weight: 500;
    text-align: right;
    margin-left: calc(8px * var(--zoom-factor));
    }

/* Clear Highlights Button and Dropdown */
.clear-highlights-container
    {
    position: relative;
    flex-shrink: 0;
    }

.clear-highlights-button
    {
    padding: 6px 16px;
    border: 2px solid #6b7280;
    background: white;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    }

.clear-highlights-button:hover
    {
    background: #6b7280;
    color: white;
    }

.clear-highlights-button:active
    {
    transform: scale(0.95);
    }

.clear-highlights-dropdown
    {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 1000;
    overflow: hidden;
    }

.clear-highlights-dropdown.hidden
    {
    display: none;
    }

.clear-dropdown-item
    {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color 0.15s;
    }

.clear-dropdown-item:last-child
    {
    border-bottom: none;
    }

.clear-dropdown-item:hover
    {
    background-color: var(--bg-tertiary);
    }

.custom-display-item
    {
    position: relative;
    background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
    border: 1px solid #81d4fa;
    border-radius: 8px;
    }

.custom-display-item .sport-link::before
    {
    content: "⭐ ";
    margin-right: 4px;
    }

/* Remove star for TODAY, TOMORROW, LIVE, and FINAL since they are special */
.custom-display-item .sport-link[data-sport-id="TODAY"]::before,
.custom-display-item .sport-link[data-sport-id="TOMORROW"]::before,
.custom-display-item .sport-link[data-sport-id="NEXT"]::before,
.custom-display-item .sport-link[data-sport-id="LIVE"]::before,
.custom-display-item .sport-link[data-sport-id="FINAL"]::before
    {
    content: "";
    margin-right: 0;
    }

.delete-custom-display-button
    {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid #ef4444;
    background: white;
    color: #ef4444;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
    }

.custom-display-item:hover .delete-custom-display-button
    {
    opacity: 1;
    }

.delete-custom-display-button:hover
    {
    background: #ef4444;
    color: white;
    }

.custom-display-name-input
    {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    background-color: #ffffff;
    color: #374151;
    }

.custom-display-name-input:focus
    {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.custom-display-name-input.error
    {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

.custom-display-input-container
    {
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    }

.custom-display-label
    {
    white-space: nowrap;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
    }

.filter-checkbox-row
    {
    display: flex;
    align-items: center;
    gap: 16px;
    }

.days-display-container
    {
    display: flex;
    align-items: center;
    gap: 10px;
    }

.days-display-error
    {
    color: #dc2626;
    font-size: 12px;
    white-space: nowrap;
    }

[data-theme="dark"] .days-display-error
    {
    color: #f87171;
    }

.days-display-label
    {
    white-space: nowrap;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
    }

.days-display-input
    {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    background-color: #ffffff;
    }

.days-display-input:focus
    {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }


[data-theme="dark"] .days-display-label
    {
    color: var(--text-primary);
    }

[data-theme="dark"] .days-display-input
    {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .days-display-input:focus
    {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

/* Days-to-display combobox + cascading menus */
.days-combobox
    {
    position: relative;
    display: inline-block;
    }

.days-combobox-button
    {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #ffffff;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    justify-content: space-between;
    }

.days-combobox-button:hover
    {
    border-color: #9ca3af;
    }

.days-combobox-button:focus
    {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

/* Locked Days dropdown (vertical strip on TODAY/NEXT/LIVE/FINAL): non-interactive
   row that displays "1" and cannot be opened. */
.days-menu-dropdown-locked .days-combobox-button,
.days-menu-dropdown-locked .days-combobox-button:hover,
.days-menu-dropdown-locked .days-combobox-button:focus
    {
    cursor: not-allowed;
    opacity: 0.65;
    border-color: #d1d5db;
    box-shadow: none;
    background-color: #f3f4f6;
    }
.days-menu-dropdown-locked .days-combobox-arrow
    {
    opacity: 0.4;
    }
[data-theme="dark"] .days-menu-dropdown-locked .days-combobox-button,
[data-theme="dark"] .days-menu-dropdown-locked .days-combobox-button:hover,
[data-theme="dark"] .days-menu-dropdown-locked .days-combobox-button:focus
    {
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
    }

.days-combobox-value
    {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.days-combobox-arrow
    {
    font-size: 10px;
    color: #6b7280;
    pointer-events: none;
    }

.days-combobox-menu
    {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    min-width: 140px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: 4px 0;
    }

.days-menu-item
    {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }

.days-menu-item:hover,
.days-menu-item.open
    {
    background-color: #f3f4f6;
    }

/* Invisible bridge on each item, extending leftward into the gap toward its submenu.
   Because the pseudo-element is a descendant of the item, hovering it preserves the
   item's :hover state, keeping the submenu visible while the cursor traverses the gap. */
.days-menu-item::before
    {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: 6px;
    height: 100%;
    }

.days-menu-arrow
    {
    font-size: 10px;
    color: #6b7280;
    }

.days-submenu
    {
    position: absolute;
    top: -5px;
    right: 100%;
    margin-right: 2px;
    min-width: 80px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    display: none;
    }

/* Invisible bridge that closes the 2px gap so :hover doesn't drop when moving from parent to submenu */
.days-submenu::after
    {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 2px;
    height: 100%;
    }

.days-menu-item:hover > .days-submenu,
.days-menu-item.open > .days-submenu
    {
    display: block;
    }

[data-theme="dark"] .days-combobox-button
    {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .days-combobox-button:focus
    {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

[data-theme="dark"] .days-combobox-arrow,
[data-theme="dark"] .days-menu-arrow
    {
    color: var(--text-tertiary);
    }

[data-theme="dark"] .days-combobox-menu,
[data-theme="dark"] .days-submenu
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

[data-theme="dark"] .days-menu-item
    {
    color: var(--text-primary);
    }

[data-theme="dark"] .days-menu-item:hover,
[data-theme="dark"] .days-menu-item.open
    {
    background-color: var(--bg-tertiary);
    }

/* Custom: <input> row inside the days combobox menu */
.days-menu-input-row
    {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-top: 1px solid #e5e7eb;
    }

.days-menu-input-label
    {
    color: #374151;
    font-size: 13px;
    }

.days-menu-input
    {
    width: 70px;
    padding: 3px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    background-color: #ffffff;
    color: #111827;
    }

.days-menu-input:focus
    {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

@keyframes days-input-shake
    {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
    }

.days-input-shake
    {
    animation: days-input-shake 0.4s ease-in-out;
    border-color: #dc2626 !important;
    }

[data-theme="dark"] .days-menu-input-row
    {
    border-top-color: var(--border-primary);
    }

[data-theme="dark"] .days-menu-input-label
    {
    color: var(--text-primary);
    }

[data-theme="dark"] .days-menu-input
    {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .days-menu-input:focus
    {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    }

[data-theme="dark"] .days-input-shake
    {
    border-color: #f87171 !important;
    }

/* Dark theme styles for custom display elements */
[data-theme="dark"] .custom-display-name-input
    {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .custom-display-name-input:focus
    {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

[data-theme="dark"] .custom-display-name-input::placeholder
    {
    color: var(--text-tertiary);
    }

[data-theme="dark"] .custom-display-input-container
    {
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .custom-display-label
    {
    color: var(--text-primary);
    }

.sport-item
    {
    position: relative;
    display: inline-block;
    margin-right: 0 !important;
    margin-left: 0 !important;
    }

.sport-link
    {
    display: block;
    padding: calc(0.25rem * var(--zoom-factor)) calc(0.75rem * var(--zoom-factor)); /* smaller vertical padding */
    background-color: #f3f4f6;
    color: #374151;
    text-decoration: none;
    border-radius: calc(0.375rem * var(--zoom-factor));
    font-weight: 700; /* bold */
    transition: all 0.2s ease;
    white-space: nowrap;
    font-size: calc(16px * var(--zoom-factor));
    line-height: 1.1;
    }

.sport-link:hover
    {
    background-color: #e5e7eb;
    color: #1f2937;
    }

.sport-link.selected
    {
    background-color: #dbeafe;
    color: #1e40af;
    }

.sport-link
    {
    transition: background-color 0.2s ease, color 0.2s ease;
    }

.leagues-submenu
    {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 2px solid var(--custom-header-bg-color, #7dd3fc);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 200px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    }

.sport-item:hover .leagues-submenu
    {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    }

/* UP NEXT dropdown styles */
.up-next-item
    {
    display: inline-block !important;
    position: relative;
    }

.up-next-item .up-next-link
    {
    border-radius: calc(0.375rem * var(--zoom-factor));
    }

.up-next-dropdown
    {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 120px;
    z-index: 1000;
    margin-top: 2px;
    }

/* Show dropdown on hover */
.up-next-item:hover .up-next-dropdown
    {
    display: block;
    }

.up-next-option
    {
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    cursor: pointer;
    font-size: calc(14px * var(--zoom-factor));
    color: #374151;
    transition: background-color 0.2s ease;
    }

.up-next-option:hover
    {
    background-color: #e5e7eb;
    }

.up-next-option:first-child
    {
    border-radius: 0.375rem 0.375rem 0 0;
    }

.up-next-option:last-child
    {
    border-radius: 0 0 0.375rem 0.375rem;
    }

/* Group Navigation dropdown styles */
.group-nav-item
    {
    display: inline-block !important;
    position: relative;
    }

.group-nav-dropdown
    {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid var(--custom-header-bg-color, #7dd3fc);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 200px;
    z-index: 1000;
    margin-top: 0;
    }

/* Show dropdown on hover */
.group-nav-item:hover > .group-nav-dropdown
    {
    display: block;
    }

/* Force hide dropdown (used after clicking an item) */
.group-nav-dropdown.force-hidden
    {
    display: none !important;
    }

/* League items within sport dropdown.  display:block must beat the
   .group-nav-item { display: inline-block !important } base rule, otherwise
   the rows flow side-by-side and max-content/auto widths sum every row onto
   one line (ballooning the panel in vertical mode where it is position:fixed
   against the viewport).  As block rows they stack and the panel shrink-wraps
   to the widest single row in both layouts. */
.group-nav-dropdown .league-item
    {
    position: relative;
    padding: 0;
    cursor: pointer;
    display: block !important;
    width: 100%;
    }

.group-nav-dropdown .league-link
    {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: calc(0.25rem * var(--zoom-factor)) calc(0.75rem * var(--zoom-factor));
    box-sizing: border-box;
    gap: calc(8px * var(--zoom-factor));
    white-space: nowrap;
    }

.league-item:hover > .league-link .group-nav-arrow
    {
    opacity: 1;
    }

.group-nav-dropdown .league-item:hover
    {
    background-color: #f3f4f6;
    }

/* Nested league groups dropdown */
.league-groups-dropdown
    {
    display: none;
    position: fixed;
    background-color: white;
    border: 1px solid var(--custom-header-bg-color, #7dd3fc);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 250px;
    width: max-content;
    z-index: 1001;
    padding: 4px 0;
    }

.league-item:hover > .league-groups-dropdown
    {
    display: block;
    }

.group-nav-separator
    {
    height: 1px;
    background-color: #d1d5db;
    margin: 4px 0;
    }

/* Divider between important leagues and the rest in sport-button dropdowns */
.league-divider
    {
    height: 1px;
    background-color: #d1d5db;
    margin: 4px 8px;
    pointer-events: none;
    }

.group-nav-headers-container
    {
    /* Container for group headers */
    }

.group-nav-header-item,
.group-nav-date-label
    {
    padding: calc(0.25rem * var(--zoom-factor)) calc(0.75rem * var(--zoom-factor));
    cursor: pointer;
    font-size: calc(14px * var(--zoom-factor));
    color: #374151;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(8px * var(--zoom-factor));
    box-sizing: border-box;
    width: 100%;
    }

.group-nav-header-item:hover,
.group-nav-date-item:hover > .group-nav-date-label
    {
    background-color: #e5e7eb;
    }

.group-nav-text
    {
    flex: 1;
    text-align: left;
    }

.group-nav-count
    {
    margin-left: auto;
    text-align: right;
    min-width: calc(2.2rem * var(--zoom-factor));
    font-variant-numeric: tabular-nums;
    color: inherit;
    font-size: calc(14px * var(--zoom-factor));
    }

.group-nav-arrow
    {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: calc(1rem * var(--zoom-factor));
    min-width: calc(1rem * var(--zoom-factor));
    font-size: calc(11px * var(--zoom-factor));
    color: inherit;
    opacity: 0.75;
    flex-shrink: 0;
    }

.group-nav-date-item:hover > .group-nav-date-label .group-nav-arrow
    {
    opacity: 1;
    }

.group-nav-header-item:first-child
    {
    border-radius: 0.375rem 0.375rem 0 0;
    }

.group-nav-header-item:last-child
    {
    border-radius: 0 0 0.375rem 0.375rem;
    }

.group-nav-no-groups
    {
    color: #9ca3af;
    font-style: italic;
    cursor: default;
    }

.group-nav-no-groups:hover
    {
    background-color: transparent;
    }

.group-nav-date-header
    {
    padding: calc(0.2rem * var(--zoom-factor)) calc(0.75rem * var(--zoom-factor));
    font-size: calc(11px * var(--zoom-factor));
    font-weight: 600;
    color: #6b7280;
    background-color: #f3f4f6;
    border-top: 1px solid #e5e7eb;
    cursor: default;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    }

.group-nav-date-header:first-child
    {
    border-top: none;
    border-radius: 0.375rem 0.375rem 0 0;
    }

/* Date fly-out submenu item (third level: Sport > League > Date > Groups) */
.group-nav-date-item
    {
    position: relative;
    }

.date-groups-dropdown
    {
    display: none;
    position: fixed;
    background-color: white;
    border: 1px solid var(--custom-header-bg-color, #7dd3fc);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 250px;
    width: max-content;
    z-index: 1002;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px 0;
    }

.group-nav-date-item:hover > .date-groups-dropdown
    {
    display: block;
    }

.league-item
    {
    position: relative;
    }

.league-link
    {
    display: block;
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    color: #374151;
    text-decoration: none;
    font-size: calc(14px * var(--zoom-factor));
    transition: background-color 0.2s ease;
    white-space: nowrap;
    }

.league-link:hover
    {
    background-color: #f3f4f6;
    color: #1f2937;
    }

.league-link
    {
    transition: background-color 0.2s ease, color 0.2s ease;
    }

.sub-leagues-submenu
    {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: white;
    border: 2px solid var(--custom-header-bg-color, #7dd3fc);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 200px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.2s ease;
    }

.league-item:hover .sub-leagues-submenu
    {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    }

.sub-league-link
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    color: #374151;
    text-decoration: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    font-size: calc(14px * var(--zoom-factor));
    }

.sub-league-link:hover
    {
    background-color: #f3f4f6;
    color: #1f2937;
    }

.date-text
    {
    flex: 1;
    text-align: left;
    }

.date-count
    {
    margin-left: calc(1rem * var(--zoom-factor));
    font-size: calc(12px * var(--zoom-factor));
    }

/* TODAY Nav Trio — ‹ TODAY › wrapper */
.today-nav-trio
    {
    display: inline-flex;
    align-items: center;
    gap: 0;
    }

/* ‹ and › nav buttons */
.nav-btn
    {
    background: none;
    border: 1px solid transparent;
    border-radius: calc(0.375rem * var(--zoom-factor));
    cursor: pointer;
    color: #6b7280;
    font-size: calc(16px * var(--zoom-factor));
    line-height: 1;
    padding: calc(2px * var(--zoom-factor)) calc(6px * var(--zoom-factor));
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    position: relative;
    flex-shrink: 0;
    }

.nav-btn:hover
    {
    background-color: #e5e7eb;
    color: #1f2937;
    border-color: #d1d5db;
    }

/* Nav button click-triggered dropdown */
.nav-btn-dropdown
    {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 2001;
    min-width: 145px;
    z-index: 1010;
    margin-top: 2px;
    }

.nav-btn-dropdown.hidden
    {
    display: none;
    }

.nav-dropdown-item
    {
    padding: 8px 14px;
    cursor: pointer;
    font-size: calc(14px * var(--zoom-factor));
    color: #374151;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
    }

.nav-dropdown-item:first-child
    {
    border-radius: 0.375rem 0.375rem 0 0;
    }

.nav-dropdown-item:last-child
    {
    border-radius: 0 0 0.375rem 0.375rem;
    }

.nav-dropdown-item:hover
    {
    background-color: #f3f4f6;
    color: #1f2937;
    }

/* Calendar Dropdown (archive / future date picker) */
.cal-dropdown
    {
    position: fixed;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    padding: 8px;
    user-select: none;
    min-width: 230px;
    }

.cal-dropdown.hidden
    {
    display: none;
    }

/* Calendar header row: ‹  Month Year  › */
.cal-header
    {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    }

.cal-nav-btn
    {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    color: #6b7280;
    font-size: 15px;
    padding: 2px 8px;
    line-height: 1;
    transition: background-color 0.15s, color 0.15s;
    }

.cal-nav-btn:hover
    {
    background-color: #e5e7eb;
    color: #1f2937;
    }

.cal-month-label
    {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    }

/* Day-of-week header row */
.cal-dow-row
    {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
    }

.cal-dow-cell
    {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    padding: 2px 0;
    }

/* Day number grid */
.cal-grid
    {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    }

.cal-day
    {
    text-align: center;
    border-radius: 0.25rem;
    padding: 4px 2px;
    font-size: 13px;
    line-height: 1.3;
    min-width: 0;
    }

.cal-day-empty
    {
    /* placeholder for days before the 1st of the month */
    }

.cal-day-disabled
    {
    color: #d1d5db;
    cursor: default;
    }

.cal-day-selectable
    {
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    }

.cal-day-selectable:hover
    {
    background-color: #dbeafe;
    color: #1e40af;
    }

/* Consistent vertical spacing for alignment across all cells */
.matchup-cell,
.odds-cell
    {
    padding-top: calc(2px * var(--zoom-factor)) !important;
    padding-bottom: calc(2px * var(--zoom-factor)) !important;
    }
.odds-cell .odds-value
    {
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    line-height: 1.3;
    }

/* CSS-only hover effects removed - now handled by JavaScript */

/* Column highlighting on odds-cell hover - will be handled by JavaScript */
.odds-table:not(.highlighting-disabled) .odds-cell:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for the hovered cell */
    color: var(--hover-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Ensure individual cell hover works with higher specificity */
.odds-table:not(.highlighting-disabled) tbody > tr td.odds-cell:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for the hovered cell */
    color: var(--hover-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Sticky odds cell hover - even higher specificity to override sticky column background */
.odds-table:not(.highlighting-disabled) tbody > tr td.odds-cell.sticky-odds:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for the hovered cell */
    color: var(--hover-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Sticky odds cell hover - all child elements */
.odds-table:not(.highlighting-disabled) tbody > tr td.odds-cell.sticky-odds:hover *
    {
    color: #1f2937 !important; /* Dark text for all child elements */
    }

/* Column highlighting class for JavaScript to apply */
.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire column */
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Row highlighting class for JavaScript to apply */
td.odds-row-highlight
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire row */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Ensure white text for highlighted odds-recent cells in light mode */
.odds-cell.odds-recent.odds-column-highlight,
.odds-cell.odds-recent.odds-row-highlight
    {
    color: #ffffff !important; /* White text for highlighted odds-recent cells */
    }

td.odds-row-highlight *
    {
    color: #000000 !important; /* Black text for readability */
    }

/* Override: Keep score values visible on row highlight */
td.odds-row-highlight .odds-cell .odds-score-display .score-value
    {
    color: #000000 !important; /* Black text for score values on light blue background */
    }

/* Ensure column highlighting works on all table cells */
td.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire column */
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

td.odds-column-highlight *
    {
    color: #1f2937 !important; /* Dark text for readability */
    }

/* Light mode: Individual cell hover for odds cells */
:root .odds-table:not(.highlighting-disabled) .odds-cell:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue for light theme */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Individual cell hover with higher specificity */
:root .odds-table:not(.highlighting-disabled) tbody > tr td.odds-cell:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue for light theme */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Sticky odds cell hover - even higher specificity to override sticky column background */
:root .odds-table:not(.highlighting-disabled) tbody > tr td.odds-cell.sticky-odds:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for the hovered cell */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Sticky odds cell hover for EVEN rows - higher specificity to override even row background */
:root .odds-table:not(.highlighting-disabled) tbody.row-even > tr td.odds-cell.sticky-odds:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for the hovered cell */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Sticky odds cell hover - all child elements */
:root .odds-table:not(.highlighting-disabled) tbody > tr td.odds-cell.sticky-odds:hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Light mode: Sticky odds cell hover for EVEN rows - all child elements */
:root .odds-table:not(.highlighting-disabled) tbody.row-even > tr td.odds-cell.sticky-odds:hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Light mode: Sticky odds cell hover - ULTRA HIGH SPECIFICITY to override sportsbook-highlighted */
html:root .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover,
html:root .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover,
html:root .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for the hovered cell */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Sticky odds cell hover - ULTRA HIGH SPECIFICITY - all child elements */
html:root .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover *,
html:root .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover *,
html:root .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Dark mode column highlighting */
[data-theme="dark"] .odds-table:not(.highlighting-disabled) .odds-cell:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue for dark theme */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode individual cell hover with higher specificity */
[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr td.odds-cell:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue for dark theme */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Sticky odds cell hover - even higher specificity to override sticky column background */
[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr td.odds-cell.sticky-odds:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for the hovered cell */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Sticky odds cell hover for EVEN rows - higher specificity to override even row background */
[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr td.odds-cell.sticky-odds:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for the hovered cell */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Sticky odds cell hover - all child elements */
[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr td.odds-cell.sticky-odds:hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Dark mode: Sticky odds cell hover for EVEN rows - all child elements */
[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr td.odds-cell.sticky-odds:hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Dark mode: Sticky odds cell hover - ULTRA HIGH SPECIFICITY to override sportsbook-highlighted */
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover,
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover,
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for the hovered cell */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Sticky odds cell hover - ULTRA HIGH SPECIFICITY - all child elements */
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover *,
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover *,
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.odds-cell.sticky-odds:hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Light mode: Row hover highlighting - ONLY in "all" mode */
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Row hover highlighting - ONLY in "all" mode */
body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Bright yellow highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }
/*
[data-theme="dark"] tbody > tr:hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability * /
    }
*/
[data-theme="dark"] .odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for dark theme */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Row highlighting class for JavaScript to apply */
[data-theme="dark"] td.odds-row-highlight
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire row */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Ensure white text for highlighted odds-recent cells in dark mode */
[data-theme="dark"] .odds-cell.odds-recent.odds-column-highlight,
[data-theme="dark"] .odds-cell.odds-recent.odds-row-highlight
    {
    color: #ffffff !important; /* White text for highlighted odds-recent cells */
    }

[data-theme="dark"] td.odds-row-highlight *
    {
    color: #000000 !important; /* Black text for readability */
    }

/* Dark mode: Override: Keep score values visible on row highlight */
[data-theme="dark"] td.odds-row-highlight .odds-cell .odds-score-display .score-value,
[data-theme="dark"] tr:hover td.odds-row-highlight .odds-cell .odds-score-display .score-value
    {
    color: #000000 !important; /* Black text for score values on light blue background */
    }

/* Dark mode: Ensure column highlighting works on all table cells */
[data-theme="dark"] td.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for dark theme */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

[data-theme="dark"] td.odds-column-highlight *
    {
    color: #000000 !important; /* Black text for readability */
    }

/*
 * FIX: Add specific hover rules for active and final game rows
 * to override their default static backgrounds.
 */

/* On hover, apply a slightly lighter green for active games - ONLY in "all" mode */
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr.score-active:hover td.sticky-column,
body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr.score-active:hover td.sticky-column
    {
    background-color: #15803d !important; /* A slightly lighter green */
    }

/* On hover, apply a slightly lighter red for final games - ONLY in "all" mode */
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr.score-final:hover td.sticky-column,
body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr.score-final:hover td.sticky-column
    {
    background-color: #e11d48 !important; /* A slightly lighter red */
    }

/* Ensure non-sticky columns also get a hover effect on active/final rows - ONLY in "all" mode */
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr.score-active:hover td.odds-cell:not(.sticky-column),
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr.score-final:hover td.odds-cell:not(.sticky-column)
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override text color for all child elements in active/final hover state */
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr.score-active:hover td.odds-cell:not(.sticky-column) *,
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr.score-final:hover td.odds-cell:not(.sticky-column) *
    {
    color: #000000 !important; /* Black text for readability */
    }

/* Dark mode CSS-only hover effects removed - now handled by JavaScript */

/* Dark mode: Override text color for active/final game hover states - ONLY in "all" mode */
body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr.score-active:hover td.odds-cell:not(.sticky-column),
body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr.score-final:hover td.odds-cell:not(.sticky-column)
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr.score-active:hover td.odds-cell:not(.sticky-column) *,
body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr.score-final:hover td.odds-cell:not(.sticky-column) *
    {
    color: #1f2937 !important; /* Dark text for readability */
    }

/* Ensure odds-value matches score-value styling for alignment */
.odds-cell .odds-value
    {
    padding-top: calc(1px * var(--zoom-factor));
    padding-bottom: calc(1px * var(--zoom-factor));
    line-height: 1.3;
    }

/* Score display in odds cells (from scores_column table) */
.odds-cell .odds-score-display
    {
    min-height: calc(2.6rem * var(--zoom-factor)) !important;
    row-gap: 0 !important; /* Remove vertical gap to align with regular odds cells */
    }

/* Align scores_column content to the top of the cell (like .score-cell) so the
   away/home rows line up with the away/home team rows instead of being centered. */
.odds-cell:has(.odds-score-display)
    {
    vertical-align: top !important;
    }

/* Tennis set scores in sportsbook odds cells (e.g. FS scores_column).
   Full-width wrapper so the 5-column grid spans the whole cell;
   each set is centered in its 1/5 column. */
.odds-tennis-sets-wrapper
    {
    width: 100%;
    }

.odds-tennis-sets-wrapper .tennis-set
    {
    text-align: center;
    }

.odds-cell .odds-score-display .scores-column
    {
    text-align: right !important;
    padding-right: calc(2px * var(--zoom-factor));
    }

.odds-cell .odds-score-display .status-column
    {
    text-align: left !important;
    padding-left: calc(2px * var(--zoom-factor));
    }

.odds-cell .odds-score-display .score-value
    {
    font-size: calc(14px * var(--zoom-factor));
    line-height: 1.3;
    color: #374151; /* Default gray color for normal rows */
    border-radius: 4px; /* Rounded corners for individual highlighting, matching regular odds */
    }

/* Override color for score values in odds cells on active/final game rows */
/* NOTE: Non-sticky columns (n+5) on active/final rows inherit background (white in light mode, dark in dark mode)
   so we need dark text for light mode, light text for dark mode */
tr.score-active td.odds-cell:not(.sticky-column) .odds-cell .odds-score-display .score-value,
tr.score-final td.odds-cell:not(.sticky-column) .odds-cell .odds-score-display .score-value
    {
    color: #374151 !important; /* Dark gray text for light mode - background is white/light */
    }

/*---------------------------------------------------------------------------------------------*/
/* NEW: odds-score-value class for scores_column values in sportsbook odds cells             */
/* This class is separate from score-value to avoid conflicts with main scores column CSS    */
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Base styling for odds-score-value */
.odds-cell .odds-score-display .odds-score-value
    {
    font-size: calc(14px * var(--zoom-factor));
    line-height: 1.3;
    color: #374151; /* Dark gray text for light mode */
    border-radius: 4px;
    padding-top: calc(1px * var(--zoom-factor));
    padding-bottom: calc(1px * var(--zoom-factor));
    }

/* Light mode: odds-score-value inherits text color properly on hover */
.odds-cell:hover .odds-score-display .odds-score-value,
td:hover .odds-cell .odds-score-display .odds-score-value,
tr:hover .odds-cell .odds-score-display .odds-score-value
    {
    color: inherit; /* Inherit from parent which has proper hover color */
    }

.tennis-ball
    {
    display: inline-block;
    width: calc(12px * var(--zoom-factor));
    height: calc(12px * var(--zoom-factor));
    background-color: #ccff00;
    border-radius: 50%;
    position: relative;
    margin: 0 calc(2px * var(--zoom-factor));
    vertical-align: middle;
    transform: translateY(-1px);
    box-shadow: inset calc(-2px * var(--zoom-factor)) calc(-2px * var(--zoom-factor)) calc(3px * var(--zoom-factor)) rgba(0,0,0,0.2);
    }

.score-cell.cancelled-or-postponed
    {
    vertical-align: middle;
    height: calc(48px * var(--zoom-factor));
    min-height: calc(48px * var(--zoom-factor));
    padding: 0;
    }
.score-cell.cancelled-or-postponed > div
    {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-weight: bold;
    }

.date-time,
.time-display,
.rotation-numbers,
.matchup-cell div
    {
    line-height: 1.3;
    margin: 0;
    border: none;
    }

/* Ensure black text on yellow or green backgrounds for scores */
.score-value[style*="background: yellow"],
.score-value[style*="background-color: yellow"],
.score-value[style*="background: #fcd34d"],
.score-value[style*="background-color: #fcd34d"],
.score-value[style*="background: #86efac"],
.score-value[style*="background-color: #86efac"],
.score-cell[style*="background: yellow"],
.score-cell[style*="background-color: yellow"],
.score-cell[style*="background: #fcd34d"],
.score-cell[style*="background-color: #fcd34d"],
.score-cell[style*="background: #86efac"],
.score-cell[style*="background-color: #86efac"]
    {
    color: #000 !important;
    }

/* Hide leagues/sub-leagues pull-down when force-hide is applied */
.leagues-submenu.force-hide,
.sub-leagues-submenu.force-hide
    {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
    }

/* Remove the selected-view-label styles since we're now highlighting menu items instead */
/*
th:first-child, td:first-child,
th:nth-child(2), td:nth-child(2),
th:nth-child(3), td:nth-child(3),
th:nth-child(4), td:nth-child(4) {
    background-color: #fff !important;
    z-index: 20;
}
*/
/*---------------------------------------------------------------------------------------------*/
/* ROW HOVER (when mouse hovers over a row) - uses HOVER color                                */
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Row hover for non-sticky columns with MAXIMUM specificity for ODD/EVEN rows */
:root .odds-table tbody.row-odd > tr td.odds-cell:not(.sticky-column).odds-row-hover.odds-row-hover,
:root .odds-table tbody.row-even > tr td.odds-cell:not(.sticky-column).odds-row-hover.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for all child elements in non-sticky columns with MAXIMUM specificity */
:root .odds-table tbody.row-odd > tr td.odds-cell:not(.sticky-column).odds-row-hover.odds-row-hover *,
:root .odds-table tbody.row-even > tr td.odds-cell:not(.sticky-column).odds-row-hover.odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }



/* Light mode: Row hover for non-sticky columns on highlighted rows - ULTRA MAXIMUM specificity */
:root .odds-table tbody.row-odd > tr.highlighted td.odds-cell:not(.sticky-column).odds-row-hover.odds-row-hover.odds-row-hover,
:root .odds-table tbody.row-even > tr.highlighted td.odds-cell:not(.sticky-column).odds-row-hover.odds-row-hover.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color overrides highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for all child elements in non-sticky columns on highlighted rows */
:root .odds-table tbody.row-odd > tr.highlighted td.odds-cell:not(.sticky-column).odds-row-hover.odds-row-hover.odds-row-hover *,
:root .odds-table tbody.row-even > tr.highlighted td.odds-cell:not(.sticky-column).odds-row-hover.odds-row-hover.odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for non-sticky columns */
:root tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column).odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Override for odds row hover on score-active/score-final rows (non-sticky columns) */
:root tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-row-hover,
:root tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue hover */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for all child elements in score-active/score-final rows with odds-row-hover */
:root tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-row-hover *,
:root tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/*---------------------------------------------------------------------------------------------*/
/* COLUMN HOVER (when mouse hovers over a column) - uses HOVER color                          */
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Column hover for all cells */
:root td.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover with higher specificity */
:root tbody > tr:not(.score-active):not(.score-final) td.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for non-sticky columns with higher specificity */
:root tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column).odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for non-sticky columns ODD/EVEN rows with MAXIMUM specificity */
:root tbody > tr:nth-child(odd) td.odds-cell:not(.sticky-column).odds-column-hover,
:root tbody > tr:nth-child(even) td.odds-cell:not(.sticky-column).odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for non-sticky columns with .odds-table wrapper and MAXIMUM specificity */
:root .odds-table tbody > tr:nth-child(odd) td.odds-cell:not(.sticky-column).odds-column-hover.odds-column-hover,
:root .odds-table tbody > tr:nth-child(even) td.odds-cell:not(.sticky-column).odds-column-hover.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for all child elements */
:root tbody > tr:nth-child(odd) td.odds-cell:not(.sticky-column).odds-column-hover *,
:root tbody > tr:nth-child(even) td.odds-cell:not(.sticky-column).odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for all child elements with .odds-table wrapper */
:root .odds-table tbody > tr:nth-child(odd) td.odds-cell:not(.sticky-column).odds-column-hover.odds-column-hover *,
:root .odds-table tbody > tr:nth-child(even) td.odds-cell:not(.sticky-column).odds-column-hover.odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Override for odds COLUMN hover on score-active/score-final rows (non-sticky columns) */
:root tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-column-hover,
:root tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue hover */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for all child elements in score-active/score-final rows with odds-column-hover */
:root tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-column-hover *,
:root tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Column hover for header elements (th) */
:root th.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for header */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/*---------------------------------------------------------------------------------------------*/
/* ROW HIGHLIGHT (when row is clicked to highlight) - uses ROW HIGHLIGHT color                */
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Ensure non-sticky columns inherit row background */
:root tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column)
    {
    background-color: inherit !important;
    }

/* Light mode: Restore direct cell hover after inherit reset for normal non-sticky odds cells */
html:root .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover,
html:root .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover,
html:root .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important;
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* Light mode: Keep nested hover content readable after inherit reset */
html:root .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover *,
html:root .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover *,
html:root .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* Override inherit rule for column highlighting with higher specificity */
:root tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column).odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for column highlighting */
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Override inherit rule for row highlighting with higher specificity */
:root tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column).odds-row-highlight
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Bright yellow highlight for row highlighting */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Override inherit rule for sportsbook highlighting with higher specificity */
:root tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column).sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Column highlight color for sportsbook highlighting */
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Text for readability */
    }

/* Light mode: Override for odds row highlighting on score-active/score-final rows (non-sticky columns) */
:root tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-row-highlight,
:root tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-row-highlight
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for all child elements in score-active/score-final rows with odds-row-highlight */
:root tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-row-highlight *,
:root tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-row-highlight *
    {
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for odds COLUMN highlighting on score-active/score-final rows (non-sticky columns) */
:root tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-column-highlight,
:root tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for all child elements in score-active/score-final rows with odds-column-highlight */
:root tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-column-highlight *,
:root tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-column-highlight *
    {
    color: #000000 !important; /* Black text for readability */
    }

/* Light mode: Specific override for score values in odds cells on score-active/score-final with column highlight */
:root tbody > tr.score-active td.odds-column-highlight .odds-cell .odds-score-display .score-value,
:root tbody > tr.score-final td.odds-column-highlight .odds-cell .odds-score-display .score-value
    {
    color: #000000 !important; /* Black text for score values on light blue highlight background */
    }

/* Yellow border around halftime table */
.table-container.halftime-table-container table
    {
    border: 3px solid #FFD700 !important; /* Same yellow as header background */
    border-radius: 4px !important; /* Optional: rounded corners */
    }

/*---------------------------------------------------------------------------------------------*/
/* Halftime Border Highlighting - For games at halftime when not moved to separate group */
/*---------------------------------------------------------------------------------------------*/
/* Apply yellow borders to first and last rows in halftime tbody */
tbody.halftime-in-place > tr:first-child td
    {
    border-top: 3px solid #FFD700 !important; /* Same yellow as halftime group border */
    }

tbody.halftime-in-place > tr:last-child td
    {
    border-bottom: 3px solid #FFD700 !important; /* Same yellow as halftime group border */
    }

/* Hide top border when previous event is also at halftime (prevents double borders) */
tbody.halftime-in-place.halftime-no-top-border > tr:first-child td
    {
    border-top: none !important;
    }

/* Hide bottom border when next event is also at halftime (prevents double borders) */
tbody.halftime-in-place.halftime-no-bottom-border > tr:last-child td
    {
    border-bottom: none !important;
    }

/* Light mode: Add subtle background tint for halftime games in place */
:root tbody.halftime-in-place
    {
    background-color: #FEF3C7 !important; /* Very light amber tint */
    }

/* Light mode: Ensure all cells in halftime tbody get the tinted background */
:root tbody.halftime-in-place td
    {
    background-color: #FEF3C7 !important; /* Very light amber tint */
    }

/* Light mode: Override for sticky columns in halftime tbody */
:root tbody.halftime-in-place td.sticky-column
    {
    background-color: #FEF3C7 !important; /* Very light amber tint */
    }

/* Light mode: Override for score-active rows in halftime tbody */
:root tbody.halftime-in-place.row-odd > tr.score-active td.sticky-column
    {
    background-color: #15803d !important; /* Slightly lighter green to show through tint */
    }

:root tbody.halftime-in-place.row-even > tr.score-active td.sticky-column
    {
    background-color: #16a34a !important; /* Slightly lighter green to show through tint */
    }

/* Light mode: Override for score-final rows in halftime tbody */
:root tbody.halftime-in-place.row-odd > tr.score-final td.sticky-column
    {
    background-color: #dc2626 !important; /* Keep red visible */
    }

:root tbody.halftime-in-place.row-even > tr.score-final td.sticky-column
    {
    background-color: #e53e3e !important; /* Keep red visible */
    }

/* Light mode: Override inherit rule for highlighted rows */
:root tbody > tr.highlighted td.odds-cell:not(.sticky-column),
:root tbody > tr:nth-child(even).highlighted td.odds-cell:not(.sticky-column),
:root tbody > tr:nth-child(odd).highlighted td.odds-cell:not(.sticky-column)
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/* Light mode: Override inherit rule for odds row highlighting non-sticky columns */
:root td.odds-cell:not(.sticky-column).odds-row-highlight
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Bright yellow highlight for entire row */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode alternating row backgrounds - less stark */
/* Target tbody elements since each event has its own tbody */
:root .odds-table tbody.row-odd
    {
    background-color: #ffffff !important;
    }

:root .odds-table tbody.row-even
    {
    background-color: #f8fafc !important;
    }

:root .odds-table tbody.row-even td,
:root .odds-table tbody.row-even th
    {
    background-color: #f8fafc !important;
    }

/* Light mode header backgrounds */
:root thead tr,
:root thead th,
:root .sticky-header th
    {
    background-color: var(--bg-quaternary) !important;
    color: var(--text-primary) !important;
    }

/* Light mode: Black column headers with white text */
:root thead tr,
:root thead th,
:root .sticky-header th
    {
    background-color: #000000 !important;
    color: #ffffff !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Soccer Compact (2-row) Mode                                                                 */
/*---------------------------------------------------------------------------------------------*/

/* Hidden data-reception spans — server populates these by ID; visible composite spans show the combined values */
.soccer-data-span
    {
    display: none !important;
    }

/* Visible composite display spans — styled like regular odds-value */
.soccer-compact-display
    {
    display: block;
    text-align: right;
    }

/* Slash separator between combined ML values */
.soccer-compact-display .sc-slash
    {
    opacity: 0.45;
    margin: 0 1px;
    }

/*---------------------------------------------------------------------------------------------*/
/* Soccer 2/4 Row Toggle                                                                       */
/*---------------------------------------------------------------------------------------------*/

.soccer-row-toggle
    {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0 6px;
    padding: 2px 6px;
    border: 1px solid #b0b0b0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
    background: #f0f0f0;
    transition: background 0.15s;
    vertical-align: middle;
    align-self: center;
    }

.soccer-row-toggle:hover
    {
    background: #e0e0e0;
    border-color: #888;
    }

.srt-option
    {
    padding: 1px 3px;
    border-radius: 6px;
    color: #888;
    transition: color 0.15s, background 0.15s;
    }

.srt-option.srt-active
    {
    color: #fff;
    background: #3b82f6;
    }

.srt-divider
    {
    color: #aaa;
    margin: 0 1px;
    font-weight: 400;
    }

/* Dark mode soccer toggle */
[data-theme="dark"] .soccer-row-toggle
    {
    background: #374151;
    border-color: #555;
    }

[data-theme="dark"] .soccer-row-toggle:hover
    {
    background: #4b5563;
    border-color: #777;
    }

[data-theme="dark"] .srt-option
    {
    color: #888;
    }

[data-theme="dark"] .srt-option.srt-active
    {
    color: #fff;
    background: #3b82f6;
    }

/* Vertical-mode wrapper: "Soccer rows:" label pinned to the left, the 3|4
   toggle pushed to the right via margin-left:auto so the row mirrors the
   Days row layout.  The wrapper only exists in vertical mode (built in
   MenuView._updateSoccerToggle); horizontal mode renders the bare toggle. */
.soccer-row-toggle-label
    {
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    }
[data-theme="dark"] .soccer-row-toggle-label
    {
    color: var(--text-primary);
    }
.soccer-row-toggle-wrapper .soccer-row-toggle
    {
    margin-left: auto;
    }

/* Menu-bar Days dropdown wrapper - sized to match the soccer 2|4 toggle */
.days-menu-dropdown
    {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
    }

.days-menu-dropdown-label
    {
    color: #374151;
    }

.days-menu-dropdown .days-combobox-button
    {
    min-width: 70px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    background: #f0f0f0;
    border-color: #b0b0b0;
    }

.days-menu-dropdown .days-combobox-button:hover
    {
    background: #e0e0e0;
    border-color: #888;
    }

[data-theme="dark"] .days-menu-dropdown-label
    {
    color: var(--text-primary);
    }

[data-theme="dark"] .days-menu-dropdown .days-combobox-button
    {
    background: #374151;
    border-color: #555;
    color: var(--text-primary);
    }

[data-theme="dark"] .days-menu-dropdown .days-combobox-button:hover
    {
    background: #4b5563;
    border-color: #777;
    }

[data-theme="dark"] .srt-divider
    {
    color: #666;
    }

/* Dark mode: Improved styling */
[data-theme="dark"]
    {
    /* Fix dropdown styling - ensure proper contrast */
    select
        {
        background-color: #2d3748 !important;
        color: #f7fafc !important;
        border-color: #4a5568 !important;
        }

    /* Dark mode: Black group headers with white text */
    h1[data-group-id]
        {
        background-color: #000000 !important;
        color: #ffffff !important;
        }



    /* Dark mode: All table cells have white text for better readability */
    tbody > tr td
        {
        color: #ffffff !important;
        }

    /* Dark mode: Keep note rows readable on their light background */
    tbody > tr.note-row td.note-cell,
    tbody > tr.note-row td.note-cell *
        {
        color: #1f2937 !important;
        }

    /* Dark mode: Keep note row light yellow background */
    .odds-table tbody.row-odd > tr.note-row,
    .odds-table tbody.row-even > tr.note-row
        {
        background-color: #fffde7 !important;
        }

    .odds-table tbody.row-odd > tr.note-row td.note-cell,
    .odds-table tbody.row-even > tr.note-row td.note-cell
        {
        background-color: #fffde7 !important;
        }

    /* Dark mode: Keep status row light orange background */
    .odds-table tbody.row-odd > tr.status-row,
    .odds-table tbody.row-even > tr.status-row
        {
        background-color: #fff3e0 !important;
        }

    .odds-table tbody.row-odd > tr.status-row td.status-cell,
    .odds-table tbody.row-even > tr.status-row td.status-cell
        {
        background-color: #fff3e0 !important;
        }

    /* Dark mode: Ensure scrollable odds columns maintain proper styling for all game states */
    tbody > tr td.odds-cell:not(.sticky-column)
        {
        color: #ffffff !important; /* White text for readability on inherited row backgrounds */
        background-color: inherit !important; /* Always inherit row background */
        }

    /* Dark mode: Override inherit rule for column highlighting with higher specificity */
    tbody > tr td.odds-cell:not(.sticky-column).odds-column-highlight
        {
        background-color: #1e40af !important; /* Darker blue for column highlighting */
        color: #ffffff !important; /* White text for readability */
        }

    tbody > tr td.odds-cell:not(.sticky-column).odds-column-highlight *
        {
        color: #ffffff !important; /* White text for readability */
        }

    /* Dark mode: Even rows - softer background */
    /* Target tbody elements since each event has its own tbody */
    tbody.row-even
        {
        background-color: #2d3748 !important;
        }

    /* Dark mode: Odd rows - softer background */
    /* Target tbody elements since each event has its own tbody */
    .odds-table tbody.row-odd
        {
        background-color: #1a202c !important;
        }

    /* Dark mode: Even rows - lighter background for alternating effect */
    .odds-table tbody.row-even
        {
        background-color: #2d3748 !important;
        }

    .odds-table tbody.row-even td,
    .odds-table tbody.row-even th
        {
        background-color: #2d3748 !important;
        }

    /*---------------------------------------------------------------------------------------------*/
    /* DARK MODE: ROW HOVER (when mouse hovers over a row) - uses HOVER color                     */
    /*---------------------------------------------------------------------------------------------*/

    /* Dark mode: Row hover for non-sticky columns */
    tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column).odds-row-hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
        color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
        }

    /* Dark mode: Override for odds row hover on score-active/score-final rows (non-sticky columns) */
    tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-row-hover,
    tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-row-hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue hover */
        color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
        }

    /* Dark mode: Override for all child elements in score-active/score-final rows with odds-row-hover */
    tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-row-hover *,
    tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-row-hover *
        {
        color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
        }

    /*---------------------------------------------------------------------------------------------*/
    /* DARK MODE: COLUMN HOVER (when mouse hovers over a column) - uses HOVER color               */
    /*---------------------------------------------------------------------------------------------*/

    /* Dark mode: Column hover for all cells */
    td.odds-column-hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
        color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
        }

    /* Dark mode: Column hover with higher specificity */
    tbody > tr:not(.score-active):not(.score-final) td.odds-column-hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
        color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
        }

    /* Dark mode: Column hover for non-sticky columns with higher specificity */
    tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column).odds-column-hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
        color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
        }

    /* Dark mode: Column hover for non-sticky columns ODD/EVEN rows with MAXIMUM specificity */
    [data-theme="dark"] tbody > tr:nth-child(odd) td.odds-cell:not(.sticky-column).odds-column-hover,
    [data-theme="dark"] tbody > tr:nth-child(even) td.odds-cell:not(.sticky-column).odds-column-hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
        color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
        }

    /* Dark mode: Column hover for all child elements */
    [data-theme="dark"] tbody > tr:nth-child(odd) td.odds-cell:not(.sticky-column).odds-column-hover *,
    [data-theme="dark"] tbody > tr:nth-child(even) td.odds-cell:not(.sticky-column).odds-column-hover *
        {
        color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
        }

    /* Dark mode: Override for odds COLUMN hover on score-active/score-final rows (non-sticky columns) */
    tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-column-hover,
    tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-column-hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue hover */
        color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
        }

    /* Dark mode: Override for all child elements in score-active/score-final rows with odds-column-hover */
    tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-column-hover *,
    tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-column-hover *
        {
        color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
        }

    /* Dark mode: Column hover for header elements (th) */
    [data-theme="dark"] th.odds-column-hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for header */
        color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
        }

    /* Dark mode: Column hover for header elements that are also highlighted - MAXIMUM specificity */
    [data-theme="dark"] th.sportsbook-header-highlighted.odds-column-hover,
    [data-theme="dark"] .odds-table thead > tr th.sportsbook-header-highlighted.odds-column-hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color overrides highlight */
        color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
        }

    /*---------------------------------------------------------------------------------------------*/
    /* DARK MODE: ROW HIGHLIGHT (when row is clicked to highlight) - uses ROW HIGHLIGHT color     */
    /*---------------------------------------------------------------------------------------------*/

    /* Dark mode: Ensure non-sticky columns inherit row background */
    tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column)
        {
        background-color: inherit !important;
        }

    /* Dark mode: Restore direct cell hover after inherit reset for normal non-sticky odds cells */
    html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover,
    html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover,
    html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover
        {
        background-color: var(--hover-highlight-bg-color, #dbeafe) !important;
        color: var(--hover-highlight-fg-color, #000000) !important;
        }

    /* Dark mode: Keep nested hover content readable after inherit reset */
    html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover *,
    html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover *,
    html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column):not(.odds-column-hover):not(.odds-row-hover):not(.odds-column-highlight):not(.odds-row-highlight):not(.sportsbook-highlighted):hover *
        {
        color: var(--hover-highlight-fg-color, #000000) !important;
        }

    /* Dark mode: Override inherit rule for highlighted rows */
    tbody > tr.highlighted td.odds-cell:not(.sticky-column),
    tbody > tr:nth-child(even).highlighted td.odds-cell:not(.sticky-column),
    tbody > tr:nth-child(odd).highlighted td.odds-cell:not(.sticky-column)
        {
        background-color: var(--row-highlight-bg-color, #FFF77E) !important;
        color: var(--row-highlight-fg-color, #000000) !important;
        }

    /* Dark mode: Override inherit rule for odds row highlighting non-sticky columns */
    td.odds-cell:not(.sticky-column).odds-row-highlight
        {
        background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Bright yellow highlight for entire row */
        color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
        }

    /* Dark mode: Override inherit rule for odds row highlighting non-sticky columns with higher specificity */
    tbody > tr:not(.score-active):not(.score-final) td.odds-cell:not(.sticky-column).odds-row-highlight
        {
        background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Bright yellow highlight for entire row */
        color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
        }

    /* Dark mode: Override for odds row highlighting on score-active/score-final rows (non-sticky columns) */
    tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-row-highlight,
    tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-row-highlight
        {
        background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
        color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
        }

    /* Dark mode: Override for all child elements in score-active/score-final rows with odds-row-highlight */
    tbody > tr.score-active td.odds-cell:not(.sticky-column).odds-row-highlight *,
    tbody > tr.score-final td.odds-cell:not(.sticky-column).odds-row-highlight *
        {
        color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
        }

    /*---------------------------------------------------------------------------------------------*/
    /* Dark mode: Halftime Border Highlighting - For games at halftime when not moved to separate group */
    /*---------------------------------------------------------------------------------------------*/
    /* Dark mode: Apply yellow borders to first and last rows in halftime tbody */
    tbody.halftime-in-place > tr:first-child td
        {
        border-top: 3px solid #FFD700 !important; /* Same yellow as halftime group border */
        }

    tbody.halftime-in-place > tr:last-child td
        {
        border-bottom: 3px solid #FFD700 !important; /* Same yellow as halftime group border */
        }

    /* Dark mode: Hide top border when previous event is also at halftime (prevents double borders) */
    tbody.halftime-in-place.halftime-no-top-border > tr:first-child td
        {
        border-top: none !important;
        }

    /* Dark mode: Hide bottom border when next event is also at halftime (prevents double borders) */
    tbody.halftime-in-place.halftime-no-bottom-border > tr:last-child td
        {
        border-bottom: none !important;
        }

    /* Dark mode: Add subtle background tint for halftime games in place */
    tbody.halftime-in-place
        {
        background-color: #422006 !important; /* Dark amber tint */
        }

    /* Dark mode: Ensure all cells in halftime tbody get the tinted background */
    tbody.halftime-in-place td
        {
        background-color: #422006 !important; /* Dark amber tint */
        }

    /* Dark mode: Override for sticky columns in halftime tbody */
    tbody.halftime-in-place td.sticky-column
        {
        background-color: #422006 !important; /* Dark amber tint */
        }

    /* Dark mode: Override for score-active rows in halftime tbody */
    tbody.halftime-in-place.row-odd > tr.score-active td.sticky-column
        {
        background-color: #15803d !important; /* Slightly lighter green to show through tint */
        }

    tbody.halftime-in-place.row-even > tr.score-active td.sticky-column
        {
        background-color: #16a34a !important; /* Slightly lighter green to show through tint */
        }

    /* Dark mode: Override for score-final rows in halftime tbody */
    tbody.halftime-in-place.row-odd > tr.score-final td.sticky-column
        {
        background-color: #dc2626 !important; /* Keep red visible */
        }

    tbody.halftime-in-place.row-even > tr.score-final td.sticky-column
        {
        background-color: #e53e3e !important; /* Keep red visible */
        }

    /* Dark mode: Time row text color */
    .time-row
        {
        color: #ffffff !important;
        }



    /* Dark mode: Sports menu background */
    #sports-menu
        {
        background-color: #1a202c !important;
        border: 1px solid #4a5568 !important;
        border-radius: 6px !important;
        }

    /* Dark mode: Sports menu styling */
    .sport-link
        {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
        border: 1px solid #4a5568 !important;
        }

    .sport-link:hover
        {
        background-color: #4a5568 !important;
        color: #f7fafc !important;
        }

    .sport-link.selected
        {
        background-color: #3b82f6 !important;
        color: #ffffff !important;
        }

    /* Dark mode: Leagues submenu */
    .leagues-submenu,
    .sub-leagues-submenu
        {
        background-color: #2d3748 !important;
        border-color: var(--custom-header-bg-color, #7dd3fc) !important;
        }

    .league-link,
    .sub-league-link
        {
        color: #e2e8f0 !important;
        }

    .league-link:hover,
    .sub-league-link:hover
        {
        background-color: #4a5568 !important;
        color: #f7fafc !important;
        }

    .group-nav-dropdown .league-item:hover
        {
        background-color: #4a5568 !important;
        }

    .league-groups-dropdown
        {
        background-color: #2d3748 !important;
        border-color: var(--custom-header-bg-color, #7dd3fc) !important;
        }

    /* Dark mode: UP NEXT dropdown */
    .up-next-dropdown
        {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        }

    .up-next-option
        {
        color: #e2e8f0 !important;
        }

    .up-next-option:hover
        {
        background-color: #4a5568 !important;
        color: #f7fafc !important;
        }

    /* Dark mode: Group Navigation dropdown */
    .group-nav-dropdown
        {
        background-color: #2d3748 !important;
        border-color: var(--custom-header-bg-color, #7dd3fc) !important;
        }

    .group-nav-separator
        {
        background-color: #4a5568 !important;
        }

    .league-divider
        {
        background-color: #4a5568 !important;
        }

    .group-nav-header-item,
    .group-nav-date-label
        {
        color: #e2e8f0 !important;
        }

    .group-nav-header-item:hover,
    .group-nav-date-item:hover > .group-nav-date-label
        {
        background-color: #4a5568 !important;
        color: #f7fafc !important;
        }

    .group-nav-no-groups
        {
        color: #718096 !important;
        }

    .group-nav-date-header
        {
        color: #9ca3af !important;
        background-color: #252f3f !important;
        border-top-color: #4a5568 !important;
        }

    .group-nav-arrow
        {
        color: #94a3b8;
        }

    .group-nav-date-item:hover > .group-nav-date-label .group-nav-arrow,
    .league-item:hover > .league-link .group-nav-arrow
        {
        color: #f7fafc;
        opacity: 1;
        }

    .date-groups-dropdown
        {
        background-color: #2d3748 !important;
        border-color: var(--custom-header-bg-color, #7dd3fc) !important;
        }

    /* Dark mode: TODAY nav buttons ( ‹ / › ) */
    .nav-btn
        {
        color: #9ca3af !important;
        }

    .nav-btn:hover
        {
        background-color: #374151 !important;
        color: #f3f4f6 !important;
        border-color: #4a5568 !important;
        }

    /* Dark mode: Nav button dropdown */
    .nav-btn-dropdown
        {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        }

    .nav-dropdown-item
        {
        color: #e2e8f0 !important;
        }

    .nav-dropdown-item:hover
        {
        background-color: #4a5568 !important;
        color: #f7fafc !important;
        }

    /* Dark mode: Calendar Dropdown */
    .cal-dropdown
        {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        }

    .cal-month-label
        {
        color: #e2e8f0 !important;
        }

    .cal-nav-btn
        {
        color: #9ca3af !important;
        }

    .cal-nav-btn:hover
        {
        background-color: #374151 !important;
        color: #f3f4f6 !important;
        }

    .cal-dow-cell
        {
        color: #718096 !important;
        }

    .cal-day-disabled
        {
        color: #4a5568 !important;
        }

    .cal-day-selectable
        {
        color: #e2e8f0 !important;
        }

    .cal-day-selectable:hover
        {
        background-color: #3b4f6b !important;
        color: #93c5fd !important;
        }

    /* Dark mode: Jump to dropdown */
    .jump-to-button
        {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
        }

    .jump-to-button:hover
        {
        background-color: #374151 !important;
        border-color: #6b7280 !important;
        }

    .jump-to-dropdown
        {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        }

    .jump-to-dropdown-item
        {
        color: #e2e8f0 !important;
        }

    .jump-to-dropdown-item:hover
        {
        background-color: #4a5568 !important;
        color: #f7fafc !important;
        }

    /* Dark mode: Hamburger menu */
    .hamburger-dropdown
        {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        }

    .hamburger-button-item
        {
        color: #e2e8f0 !important;
        }

    .hamburger-button-item:hover
        {
        background-color: #4a5568 !important;
        color: #f7fafc !important;
        }

    /* Dark mode: Modal styling */
    .modal-content
        {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        }

    .modal-header
        {
        border-bottom-color: #4a5568 !important;
        }

    .modal-header h3
        {
        color: #f7fafc !important;
        }

    .close-button
        {
        color: #cbd5e0 !important;
        }

    .close-button:hover
        {
        background-color: #4a5568 !important;
        color: #f7fafc !important;
        }

    /* Dark mode: Context menu */
    .sportsbook-context-menu
        {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        }

    .sportsbook-context-menu-item
        {
        color: #e2e8f0 !important;
        border-bottom-color: #4a5568 !important;
        }

    .sportsbook-context-menu-item:hover
        {
        background-color: #4a5568 !important;
        color: #f7fafc !important;
        }

    /* Dark mode: Status and error messages */
    .status-message
        {
        background-color: #0c4a6e !important;
        color: #7dd3fc !important;
        }

    .error-message
        {
        background-color: #7f1d1d !important;
        color: #f87171 !important;
        }

    /* Dark mode: Login form styling */
    .login-form input
        {
        background-color: #2d3748 !important;
        color: #f7fafc !important;
        border-color: #4a5568 !important;
        }

    .login-form input::placeholder
        {
        color: #cbd5e0 !important;
        }

    /* Dark mode: Ensure login/signup modal labels are readable */
    #login-modal .modal-body label,
    #login-modal .modal-body label.text-gray-700,
    #login-modal .modal-body .text-gray-700,
    #login-modal #login-form label,
    #login-modal #signup-form label
        {
        color: #e2e8f0 !important;
        }

    /* Dark mode: Signup form helper text */
    #login-modal .modal-body span.text-gray-500,
    #login-modal #signup-form span.text-gray-500
        {
        color: #9ca3af !important;
        }

    #login-modal input[type="checkbox"]
        {
        border-color: #a0aec0 !important;
        background-color: #1f2937 !important;
        }

    /* Force login checkbox label to white */
    #login-modal .login-checkbox-label
        {
        color: #ffffff !important;
        }



    .login-form button
        {
        background-color: #3b82f6 !important;
        color: white !important;
        }

    .login-form button:hover
        {
        background-color: #2563eb !important;
        }

    .login-form button:disabled
        {
        background-color: #6b7280 !important;
        color: #9ca3af !important;
        }

    /* Dark mode: Make table row borders more subtle */
    tbody > tr td
        {
        border-bottom-color: #2d3748 !important;
        }

    /* Dark mode: Make group header bottom border more subtle */
    h1[data-group-id]
        {
        border-bottom-color: #2d3748 !important;
        }

    /* Dark mode: Filter controls */
    .filter-controls
        {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        }

    .filter-checkbox
        {
        color: #e2e8f0 !important;
        }

    .enable-button
        {
        background-color: #4a5568 !important;
        color: #e2e8f0 !important;
        border-color: #718096 !important;
        }

    .enable-button:hover
        {
        background-color: #718096 !important;
        border-color: #a0aec0 !important;
        }

    .enable-button:active
        {
        background-color: #2d3748 !important;
        }

    /* Dark mode: Sportsbook modal specific styles */
    .sportsbook-name
        {
        color: #e2e8f0 !important;
        }

    /* Dark mode: Fix winner scores - override general white text rule */
    .score-value.winner-text
        {
        color: white !important; /* White color for winner */
        font-weight: bold !important;
        }

    /* Dark mode: Fix scores on yellow backgrounds - ensure black text for contrast */
    .score-value[style*="background: yellow"],
    .score-value[style*="background-color: yellow"],
    .score-value[style*="background: #fcd34d"],
    .score-value[style*="background-color: #fcd34d"],
    .score-cell[style*="background: yellow"],
    .score-cell[style*="background-color: yellow"],
    .score-cell[style*="background: #fcd34d"],
    .score-cell[style*="background-color: #fcd34d"]
        {
        color: #000 !important; /* Black text on yellow background */
        }

    /* Dark mode: Fix bold winner scores on yellow backgrounds */
    .score-value.odds-old.winner-text,
    .score-value.odds-medium.winner-text
        {
        color: #000 !important; /* Black text for bold winner scores on yellow */
        }

    /* Dark mode: Fix strong elements within scores on colored backgrounds */
    .score-value.odds-old strong,
    .score-value.odds-medium strong,
    .tennis-set.odds-old strong,
    .tennis-set.odds-medium strong
        {
        color: #000 !important; /* Force black text for bold scores on colored backgrounds */
        }

    /* Dark mode: Override color for score values in odds cells */
    .odds-cell .odds-score-display .score-value
        {
        color: #e5e7eb ; /* Light gray for dark mode normal rows */
        }

    /* Dark mode: Override color for score values in odds cells on active/final game rows - STICKY columns only */
    /* Non-sticky columns (n+5) inherit dark background, so they need light text, not white */
    tr.score-active td.sticky-column .odds-cell .odds-score-display .score-value,
    tr.score-final td.sticky-column .odds-cell .odds-score-display .score-value
        {
        color: white !important; /* White text on green/red backgrounds (sticky columns) */
        }

    /* Dark mode: Non-sticky columns on score-active/score-final get light gray text (inherited dark background) */
    tr.score-active td.odds-cell:not(.sticky-column) .odds-cell .odds-score-display .score-value,
    tr.score-final td.odds-cell:not(.sticky-column) .odds-cell .odds-score-display .score-value
        {
        color: #e5e7eb !important; /* Light gray for dark mode - background is inherited dark */
        }

    /* Dark mode: Override color for score values when row is highlighted */
    tr:hover td.odds-row-highlight .odds-cell .odds-score-display .score-value
        {
        color: #000000 !important; /* Black text for score values on light blue highlight background */
        }

    /* Dark mode: Override for score-active/score-final rows with odds-row-highlight */
    tr.score-active td.odds-row-highlight .odds-cell .odds-score-display .score-value,
    tr.score-final td.odds-row-highlight .odds-cell .odds-score-display .score-value
        {
        color: #000000 !important; /* Black text for score values on light blue highlight background */
        }

    /* Dark mode: Override for score-active/score-final rows with odds-column-highlight */
    tr.score-active td.odds-column-highlight .odds-cell .odds-score-display .score-value,
    tr.score-final td.odds-column-highlight .odds-cell .odds-score-display .score-value
        {
        color: #000000 !important; /* Black text for score values on light blue highlight background */
        }

    /*---------------------------------------------------------------------------------------------*/
    /* Dark mode: odds-score-value class for scores_column values in sportsbook odds cells        */
    /*---------------------------------------------------------------------------------------------*/

    /* Dark mode: Base styling for odds-score-value - light gray text on dark background */
    .odds-cell .odds-score-display .odds-score-value
        {
        color: #e5e7eb; /* Light gray for dark mode */
        }

    /* Dark mode: odds-score-value inherits text color properly on hover */
    .odds-cell:hover .odds-score-display .odds-score-value,
    td:hover .odds-cell .odds-score-display .odds-score-value,
    tr:hover .odds-cell .odds-score-display .odds-score-value
        {
        color: inherit; /* Inherit from parent which has proper hover color */
        }
    }

/*---------------------------------------------------------------------------------------------*/
/* Hide elements when login section is visible */
/*---------------------------------------------------------------------------------------------*/
#login-section:not(.hidden) ~ #sports-menu,
#login-section:not(.hidden) ~ .page-header select,
#login-section:not(.hidden) ~ .page-header .selected-view-chip
    {
    display: none !important;
    }

/* Hide sports menu when login section is visible (regardless of DOM position) */
#login-section:not(.hidden) ~ #sports-menu,
body:has(#login-section:not(.hidden)) #sports-menu
    {
    display: none !important;
    }

/* Hide specific dropdowns and selected-view-chip when login section is visible */
body:has(#login-section:not(.hidden)) #period-dropdown,
body:has(#login-section:not(.hidden)) #display-type-dropdown,
body:has(#login-section:not(.hidden)) #odds-format-dropdown,
body:has(#login-section:not(.hidden)) .selected-view-chip,
body:has(#login-section:not(.hidden)) .hamburger-menu
    {
    display: none !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Row Highlighting - Uses CSS variables for user-customizable colors */
/*---------------------------------------------------------------------------------------------*/
tr.highlighted
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

tr.highlighted td,
tr.highlighted th
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/* Ensure highlighted rows maintain their state even with alternating row colors */
tbody > tr:nth-child(even).highlighted,
tbody > tr:nth-child(odd).highlighted
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/* Override alternating row colors for highlighted rows */
tbody > tr:nth-child(even).highlighted td,
tbody > tr:nth-child(even).highlighted th,
tbody > tr:nth-child(odd).highlighted td,
tbody > tr:nth-child(odd).highlighted th
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/* Ensure all child elements within highlighted rows use the foreground color */
tr.highlighted *,
tbody > tr:nth-child(odd).highlighted *,
tbody > tr:nth-child(even).highlighted *
    {
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/* Override any inherit rules for highlighted rows with maximum specificity */
:root tbody > tr.highlighted,
:root tbody > tr:nth-child(even).highlighted,
:root tbody > tr:nth-child(odd).highlighted
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

:root tbody > tr.highlighted td,
:root tbody > tr:nth-child(even).highlighted td,
:root tbody > tr:nth-child(odd).highlighted td,
:root tbody > tr.highlighted th,
:root tbody > tr:nth-child(even).highlighted th,
:root tbody > tr:nth-child(odd).highlighted th
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

:root tbody > tr.highlighted *,
:root tbody > tr:nth-child(odd).highlighted *,
:root tbody > tr:nth-child(even).highlighted *
    {
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Override any inherit rules for highlighted rows with maximum specificity */
[data-theme="dark"] tbody > tr.highlighted,
[data-theme="dark"] tbody > tr:nth-child(even).highlighted,
[data-theme="dark"] tbody > tr:nth-child(odd).highlighted
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

[data-theme="dark"] tbody > tr.highlighted td,
[data-theme="dark"] tbody > tr:nth-child(even).highlighted td,
[data-theme="dark"] tbody > tr:nth-child(odd).highlighted td,
[data-theme="dark"] tbody > tr.highlighted th,
[data-theme="dark"] tbody > tr:nth-child(even).highlighted th,
[data-theme="dark"] tbody > tr:nth-child(odd).highlighted th
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

[data-theme="dark"] tbody > tr.highlighted *,
[data-theme="dark"] tbody > tr:nth-child(odd).highlighted *,
[data-theme="dark"] tbody > tr:nth-child(even).highlighted *
    {
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/* Clickable matchup cell styling */
.matchup-cell[onclick]
    {
    cursor: pointer;
    }

/* Sportsbook Context Menu */
.sportsbook-context-menu
    {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    min-width: 220px;
    display: none;
    }

.sportsbook-context-menu.show
    {
    display: block;
    }

.sportsbook-context-menu-item
    {
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    cursor: pointer;
    font-size: calc(14px * var(--zoom-factor));
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color 0.2s;
    }

.sportsbook-context-menu-item:last-child
    {
    border-bottom: none;
    }

.sportsbook-context-menu-item:hover
    {
    background-color: #f3f4f6;
    color: #1f2937;
    }

.sportsbook-context-menu-item.disabled
    {
    color: #9ca3af;
    cursor: not-allowed;
    }

.sportsbook-context-menu-item.disabled:hover
    {
    background-color: transparent;
    }

.sportsbook-context-menu-divider
    {
    height: 1px;
    background-color: var(--border-secondary);
    }

.sportsbook-context-menu-color-section
    {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(0.75rem * var(--zoom-factor));
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    }

.sportsbook-context-menu-color-label
    {
    font-size: calc(13px * var(--zoom-factor));
    color: var(--text-secondary);
    }

.sportsbook-context-menu-color-input
    {
    width: calc(36px * var(--zoom-factor));
    height: calc(24px * var(--zoom-factor));
    padding: 0;
    border: 1px solid var(--border-secondary);
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    }

/* Sportsbook column highlighting (persistent, click-based) - HIGH SPECIFICITY */
.odds-table tbody > tr td.sportsbook-highlighted,
.odds-table tbody > tr td.sportsbook-highlighted.odds-cell,
.odds-table tbody > tr td.sportsbook-highlighted.sticky-column,
.odds-table tbody > tr td.sportsbook-highlighted.sticky-odds,
tbody > tr td.sportsbook-highlighted,
td.sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Sportsbook header highlighting - HIGH SPECIFICITY */
.odds-table thead > tr th.sportsbook-header-highlighted,
th.sportsbook-header-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Light mode: Sportsbook header HOVER overrides highlighting - ULTRA HIGH SPECIFICITY */
:root .odds-table thead > tr th.sportsbook-header-highlighted.odds-column-hover,
:root th.sportsbook-header-highlighted.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important;
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* Light mode: Sportsbook cell HOVER overrides highlighting - ULTRA HIGH SPECIFICITY */
:root .odds-table tbody > tr td.sportsbook-highlighted.odds-column-hover,
:root tbody > tr td.sportsbook-highlighted.odds-column-hover,
:root td.sportsbook-highlighted.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important;
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* Light mode: Sportsbook cell HOVER overrides highlighting - child elements */
:root .odds-table tbody > tr td.sportsbook-highlighted.odds-column-hover *,
:root tbody > tr td.sportsbook-highlighted.odds-column-hover *,
:root td.sportsbook-highlighted.odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* Light mode: Individual cell :hover on sportsbook-highlighted cells - ULTRA HIGH SPECIFICITY */
html:root .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover,
html:root .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover,
html:root .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important;
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* Light mode: Individual cell :hover on sportsbook-highlighted cells - child elements */
html:root .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover *,
html:root .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover *,
html:root .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* All child elements within sportsbook-highlighted cells */
.odds-table tbody > tr td.sportsbook-highlighted *,
.odds-table thead > tr th.sportsbook-header-highlighted *,
td.sportsbook-highlighted *,
th.sportsbook-header-highlighted *
    {
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Override alternating row colors for sportsbook highlights */
.odds-table tbody > tr:nth-child(odd) td.sportsbook-highlighted,
.odds-table tbody > tr:nth-child(even) td.sportsbook-highlighted,
.odds-table tbody.row-odd > tr td.sportsbook-highlighted,
.odds-table tbody.row-even > tr td.sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Sportsbook highlight wins over row highlight at intersections */
.odds-table tbody > tr.highlighted td.sportsbook-highlighted,
.odds-table tbody.row-odd > tr.highlighted td.sportsbook-highlighted,
.odds-table tbody.row-even > tr.highlighted td.sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Sportsbook highlight wins over row highlight - all child elements */
.odds-table tbody > tr.highlighted td.sportsbook-highlighted *,
.odds-table tbody.row-odd > tr.highlighted td.sportsbook-highlighted *,
.odds-table tbody.row-even > tr.highlighted td.sportsbook-highlighted *
    {
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Handle sportsbook highlights in active/final games */
.odds-table tbody > tr.score-active td.sportsbook-highlighted,
tr.score-active td.sportsbook-highlighted
    {
    background-color: #9CAF88 !important; /* washed out green */
    color: #000 !important; /* black text for readability */
    }

.odds-table tbody > tr.score-final td.sportsbook-highlighted,
tr.score-final td.sportsbook-highlighted
    {
    background-color: #F4A4A4 !important; /* washed out red */
    color: #000 !important; /* black text for readability */
    }

/* Sportsbook highlight on active/final games - all child elements */
.odds-table tbody > tr.score-active td.sportsbook-highlighted *,
.odds-table tbody > tr.score-final td.sportsbook-highlighted *
    {
    color: #000 !important; /* black text for readability */
    }

/* Dark mode: Sportsbook column highlighting - HIGH SPECIFICITY */
[data-theme="dark"] .odds-table tbody > tr td.sportsbook-highlighted,
[data-theme="dark"] .odds-table tbody > tr td.sportsbook-highlighted.odds-cell,
[data-theme="dark"] .odds-table tbody > tr td.sportsbook-highlighted.sticky-column,
[data-theme="dark"] .odds-table tbody > tr td.sportsbook-highlighted.sticky-odds,
[data-theme="dark"] tbody > tr td.sportsbook-highlighted,
[data-theme="dark"] td.sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Sportsbook header highlighting - HIGH SPECIFICITY */
[data-theme="dark"] .odds-table thead > tr th.sportsbook-header-highlighted,
[data-theme="dark"] th.sportsbook-header-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Sportsbook header HOVER overrides highlighting - ULTRA HIGH SPECIFICITY */
[data-theme="dark"] .odds-table thead > tr th.sportsbook-header-highlighted.odds-column-hover,
[data-theme="dark"] th.sportsbook-header-highlighted.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important;
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Individual cell :hover on sportsbook-highlighted cells - ULTRA HIGH SPECIFICITY */
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover,
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover,
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important;
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Individual cell :hover on sportsbook-highlighted cells - child elements */
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover *,
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-odd > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover *,
html[data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final) td.sportsbook-highlighted.odds-cell:hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important;
    }

/* Dark mode: All child elements within sportsbook-highlighted cells */
[data-theme="dark"] .odds-table tbody > tr td.sportsbook-highlighted *,
[data-theme="dark"] .odds-table thead > tr th.sportsbook-header-highlighted *,
[data-theme="dark"] td.sportsbook-highlighted *,
[data-theme="dark"] th.sportsbook-header-highlighted *
    {
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Sportsbook highlight wins over row highlight at intersections */
[data-theme="dark"] .odds-table tbody > tr.highlighted td.sportsbook-highlighted,
[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted td.sportsbook-highlighted,
[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted td.sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Sportsbook highlight wins over row highlight - all child elements */
[data-theme="dark"] .odds-table tbody > tr.highlighted td.sportsbook-highlighted *,
[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted td.sportsbook-highlighted *,
[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted td.sportsbook-highlighted *
    {
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Bold team abbreviation only when game is final and team has won */
tr.score-final .team-abbr.winner,
tr.score-final .team-name.winner
    {
    font-weight: bold;
    }

/*---------------------------------------------------------------------------------------------*/
/* Winner text styling in scores column */
.scores-column .score-value:contains("Winner")
    {
    text-align: center;
    font-weight: bold;
    color: #059669; /* Green color for winner */
    }

/* Alternative approach for winner styling */
.score-value[data-winner="true"]
    {
    text-align: center;
    font-weight: bold;
    color: #059669; /* Green color for winner */
    }

/* Make scores-column take full width when there's a winner (no status column) */
.score-container:not(:has(.status-column)) .scores-column
    {
    width: 100% !important;
    }
/*---------------------------------------------------------------------------------------------*/
/* Ensure black text on yellow or green backgrounds for scores */
/*
  Final Fix: This rule targets BOTH regular scores (.score-value)
  and tennis set scores (.tennis-set) to override the text color
  when they have a timed background update in an active game.
*/
tr.score-active .score-cell .score-value.odds-medium,
tr.score-active .score-cell .score-value.odds-old,
tr.score-active .score-cell .tennis-set.odds-medium,
tr.score-active .score-cell .tennis-set.odds-old,
tr.score-final  .score-cell .score-value.odds-medium,
tr.score-final  .score-cell .score-value.odds-old,
tr.score-final  .score-cell .tennis-set.odds-medium,
tr.score-final  .score-cell .tennis-set.odds-old,
tr.score-active .score-cell .score-value.odds-medium sup,
tr.score-active .score-cell .score-value.odds-old sup,
tr.score-active .score-cell .tennis-set.odds-medium sup,
tr.score-active .score-cell .tennis-set.odds-old sup,
tr.score-final  .score-cell .score-value.odds-medium sup,
tr.score-final  .score-cell .score-value.odds-old sup,
tr.score-final  .score-cell .tennis-set.odds-medium sup,
tr.score-final  .score-cell .tennis-set.odds-old sup
    {
    color: #000 !important; /* Force black text */
    }

/* Additional fix: Ensure strong elements within odds-old scores have proper contrast */
.score-value.odds-old strong,
.tennis-set.odds-old strong
    {
    color: #000 !important; /* Force black text for bold winner scores */
    }

/* Ensure winner-text elements have proper contrast in timed contexts */
.score-value.odds-old.winner-text /*,.score-value.odds-medium.winner-text*/
    {
    color: #000 !important; /* Force black text for winner text on colored backgrounds */
    }

.tennis-ball-left
    {
    position: absolute;
    left: 0;
    top: 0%;
    transform: translate(-170%);
    width: 12px; /* Match the .tennis-ball width for the transform */
    height: 12px; /* Match the .tennis-ball height for centering */
    pointer-events: none;
    }

.away-set .tennis-ball-left
    {
    top: 0%;
    }

.home-set .tennis-ball-left
    {
    top: 50%;
    }

/* Left hand image for left-handed pitchers */
.left-hand-image
    {
    display: inline-block;
    width: calc(16px * var(--zoom-factor));
    height: calc(16px * var(--zoom-factor));
    background-image: url('images/left-hand.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: calc(2px * var(--zoom-factor));
    }

/*---------------------------------------------------------------------------------------------*/
/* Sticky Group Headers */
/*---------------------------------------------------------------------------------------------*/

/* Original rule */
#odds-table-target h1.group-header
    {
    position: sticky;
    top: 0;
    z-index: 25;
    background: white;
    }

#odds-table-target.sticky-columns-on-top h1.group-header
    {
    /* Sticky-header th height = 20px*zoom (content) + 1px (border-bottom) + 1px sticky-spacer */
    top: calc(20px * var(--zoom-factor) + 2px) !important;
    }

/* Modify these lines */
h1.group-header
    {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    line-height: 1.2;
    margin: 0;
    padding: 2px 0.5rem;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e7eb;
    font-size: calc(18px * var(--zoom-factor)) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

/* Group subheader (e.g., "National League", "American League") */
h2.group-subheader
    {
    margin: 0;
    padding: 1px 0.5rem 1px 1.5rem;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--subheader-bg-color, #7DD3FC);
    color: var(--subheader-fg-color, #000000);
    font-size: calc(15px * var(--zoom-factor));
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    left: 0;
    top: calc(18px * var(--zoom-factor) * 1.2 + 5px);
    z-index: 24;
    cursor: pointer;
    user-select: none;
    }

h2.group-subheader .collapse-arrow
    {
    display: inline-block;
    cursor: pointer;
    margin-right: 4px;
    }


/* Suppressed duplicate group header — hidden until it becomes the active sticky header */
h1.group-header.suppressed-header
    {
    display: none !important;
    }

/* Invisible sentinel placed before suppressed headers for IntersectionObserver detection */
.header-sentinel
    {
    height: 1px;
    margin-bottom: -1px;
    visibility: hidden;
    pointer-events: none;
    }

/* When no per-group column headers (sticky-columns-on-top), h2 must clear the
   global sticky-header (20px*zoom + 1px border + 1px sticky-spacer = 20px*zoom + 2px)
   AND the h1 group-header (18px*zoom*1.2 line-height + 4px padding + 1px border = 21.6px*zoom + 5px) */
#odds-table-target.sticky-columns-on-top h2.group-subheader
    {
    top: calc(20px * var(--zoom-factor) + 18px * var(--zoom-factor) * 1.2 + 7px) !important;
    }

[data-theme="dark"] h2.group-subheader
    {
    background-color: var(--subheader-bg-color, #aaaaaa);
    color: var(--subheader-fg-color, #000000);
    border-bottom-color: #e0e0e0;
    }

/* When the sticky column header is present, shift group header down */
#odds-table-target .sticky-header + h1[data-group-id],
#odds-table-target .sticky-header + .table-container + h1[data-group-id]
    {
    top: 0px !important;
    }

/* Sticky group header for each table container (when column headers are not on top) */
.table-container h1[data-group-id]
    {
    min-height: 40px;
    height: 40px;
    line-height: 40px;
    position: sticky;
    top: 0;
    z-index: 25;
    background: white;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

/* Sticky thead below the group header */
.table-container thead
    {
    position: sticky;
    top: calc(27px * var(--zoom-factor)) !important;
    z-index: 20;
    background: #f9fafb;
    }

/* When a group has a subheader, the thead must clear both the h1 group-header
   (21.6px*zoom + 5px) AND the h2 subheader (15px*zoom*1.2 + 1px+1px pad + 1px border = 18px*zoom + 3px),
   total ≈ 39.6px*zoom + 8px */
h2.group-subheader + .table-container thead
    {
    top: calc(18px * var(--zoom-factor) * 1.2 + 5px + 15px * var(--zoom-factor) * 1.2 + 3px) !important;
    }

/* In the global sticky header, remove the thead's stacking context so that
   sort dropdowns (z-index: 10001) can escape and render above group headers.
   position: sticky is kept intact — only z-index is neutralised. */
.sticky-header thead
    {
    z-index: auto !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Hamburger Menu Styles */
/*---------------------------------------------------------------------------------------------*/
.hamburger-menu
    {
    position: relative;
    display: inline-block;
    }

.hamburger-button
    {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: calc(30px * var(--zoom-factor));
    height: calc(30px * var(--zoom-factor));
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
    }

.hamburger-button span
    {
    width: calc(25px * var(--zoom-factor));
    height: calc(3px * var(--zoom-factor));
    background: var(--text-secondary);
    border-radius: calc(10px * var(--zoom-factor));
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
    }

.hamburger-button:hover span
    {
    background: var(--text-primary);
    }

/* Hamburger menu style: SVG icons live inside the button alongside the three <span>
   lines and are toggled by a body class.  Default is "classic" (CSS lines, no cheese).
   Pseudo-elements on the middle span draw the cheese slices for cheese-lines mode. */
.hamburger-svg
    {
    display: none;
    width:  calc(30px * var(--zoom-factor));
    height: calc(30px * var(--zoom-factor));
    }

body.menu-style-cheese-lines .hamburger-button span:nth-child(2)::before,
body.menu-style-cheese-lines .hamburger-button span:nth-child(2)::after
    {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: calc(2px * var(--zoom-factor));
    background: #f5c518;
    border-radius: calc(10px * var(--zoom-factor));
    }
body.menu-style-cheese-lines .hamburger-button span:nth-child(2)::before
    { top:    calc(-4px * var(--zoom-factor)); }
body.menu-style-cheese-lines .hamburger-button span:nth-child(2)::after
    { bottom: calc(-4px * var(--zoom-factor)); }

body.menu-style-svg-hamburger   .hamburger-button span,
body.menu-style-svg-cheeseburger .hamburger-button span
    { display: none; }

body.menu-style-svg-hamburger    .hamburger-svg-burger
    { display: block; }
body.menu-style-svg-cheeseburger .hamburger-svg-cheese
    { display: block; }

.hamburger-dropdown
    {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 240px;
    z-index: 1999; /* Above injury alert modals (which stack from 1000+n), below app modals (2000) */
    margin-top: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    }

.hamburger-item
    {
    padding: calc(2px * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    border-bottom: 1px solid var(--border-secondary);
    }

/* Remove padding for items that contain a button so the button can fill the width */
.hamburger-item:has(.hamburger-button-item)
    {
    padding: 0;
    }

.hamburger-button-item
    {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    font-size: calc(14px * var(--zoom-factor));
    transition: color 0.2s;
    margin: 0;
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    box-sizing: border-box;
    }

.hamburger-button-item:hover
    {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    }

/* Disconnect button in hamburger menu */
#disconnect-button.hamburger-button-item
    {
    background-color: #ef4444;
    color: white;
    border: 1px solid #dc2626;
    width: 100%;
    text-align: left;
    font-size: calc(14px * var(--zoom-factor));
    box-sizing: border-box;
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    margin: 0;
    border-radius: 0; /* Remove rounding to match other items */
    }

#disconnect-button.hamburger-button-item:hover
    {
    background-color: #dc2626 !important;
    color: white !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Login/profile badge in the hamburger menu, rendered just above the Logout button.            */
/* Format: "Login: USERNAME - PROFILE" (or "Login: USERNAME" when active profile is DEFAULT),   */
/* bold so it stands out from regular menu rows.  The .hamburger-item already provides the      */
/* divider beneath it, but we draw a second divider above to visually separate the badge from   */
/* the surrounding menu controls.                                                                */
/*---------------------------------------------------------------------------------------------*/
.hamburger-login-badge-item
    {
    border-top: 1px solid var(--border-secondary);
    }

.hamburger-login-badge
    {
    width: 100%;
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    font-size: calc(14px * var(--zoom-factor));
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

/* Logged-out state: grayed-out (not hidden) so the last-known username/profile stays
   visible as a reminder of what will be reconnected/loaded on the next login. */
.hamburger-login-badge.logged-out
    {
    color: var(--text-secondary);
    opacity: 0.55;
    font-weight: 600;
    }

/* Hide the entire badge row (including the top divider) when there is no logged-in
   user, otherwise we would leave an empty row with stray dividers in the menu. */
.hamburger-login-badge-item.hidden
    {
    display: none;
    }

/*---------------------------------------------------------------------------------------------*/
/* Quick-access shortcuts: zoom (− nn% +) and sun/moon theme toggle.                          */
/* Two parallel placements share the same look-and-feel:                                       */
/*   - hamburger-*  rows live inside #hamburger-dropdown (horizontal mode)                     */
/*   - strip-*      controls live inside .sports-menu-header (vertical mode)                   */
/* Visibility is driven by body.display-buttons-vertical further down.                          */
/*---------------------------------------------------------------------------------------------*/
.hamburger-zoom-item,
.hamburger-orientation-item,
.hamburger-column-resize-item
    {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--zoom-factor));
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    }

.hamburger-theme-item
    {
    display: flex;
    padding: 0 !important;
    }

.theme-quick-section,
.fullscreen-quick-section
    {
    display: flex;
    align-items: center;
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    gap: calc(8px * var(--zoom-factor));
    box-sizing: border-box;
    }

.theme-quick-section
    {
    flex: 0 0 auto;
    border-right: 1px solid var(--border-secondary);
    }

.fullscreen-quick-section
    {
    flex: 1;
    }

/* The column-resize row stretches its wrapper across the available width so
   the slider can use as much room as the menu provides; the wrapper's own
   flex layout aligns the labels, slider and percentage value. */
.hamburger-column-resize-item .resize-slider-wrapper
    {
    flex: 1;
    }

.hamburger-quick-label
    {
    color: var(--text-secondary);
    font-size: calc(14px * var(--zoom-factor));
    flex: 1;
    white-space: nowrap;
    }

.hamburger-zoom-percentage
    {
    color: var(--text-secondary);
    font-size: calc(14px * var(--zoom-factor));
    font-weight: 500;
    min-width: calc(40px * var(--zoom-factor));
    text-align: center;
    }

.hamburger-zoom-button
    {
    width:  calc(24px * var(--zoom-factor));
    height: calc(24px * var(--zoom-factor));
    font-size: calc(14px * var(--zoom-factor));
    }

/* Sun/moon toggle (used by the hamburger theme button).  Light icon shows
   in light mode; dark icon shows in dark mode; the swap is purely CSS so a
   single click handler (App.toggleTheme) suffices. */
.theme-toggle-button,
.fullscreen-toggle-button
    {
    width:  calc(28px * var(--zoom-factor));
    height: calc(28px * var(--zoom-factor));
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 0;
    transition: all 0.2s ease;
    }
.theme-toggle-button:hover,
.fullscreen-toggle-button:hover
    {
    background-color: var(--bg-tertiary);
    border-color: var(--border-secondary);
    transform: scale(1.05);
    }
.theme-toggle-button:active,
.fullscreen-toggle-button:active
    {
    transform: scale(0.95);
    }

.theme-icon,
.fullscreen-icon
    {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    font-size: calc(14px * var(--zoom-factor));
    line-height: 1;
    }
.theme-icon.light-icon
    {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    }
.theme-icon.dark-icon
    {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    }
[data-theme="dark"] .theme-icon.light-icon
    {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
    }
[data-theme="dark"] .theme-icon.dark-icon
    {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    }

.fullscreen-icon.enter-icon
    {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    }
.fullscreen-icon.exit-icon
    {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    }
body.fullscreen-active .fullscreen-icon.enter-icon
    {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
    }
body.fullscreen-active .fullscreen-icon.exit-icon
    {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    }

/* "Layout: ⇄ Vertical/Horizontal" pill button used inside the hamburger menu.
   Toggles displayButtonsOrientation between horizontal and vertical; the
   label is rewritten dynamically by SettingsManager._relocateHeaderControls
   to point at the opposite mode. */
.orientation-toggle-button
    {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    height: 22px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #ffffff;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    }
.orientation-toggle-button:hover
    {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    }
[data-theme="dark"] .orientation-toggle-button
    {
    background-color: var(--bg-secondary);
    border-color:     var(--border-primary);
    color:            var(--text-primary);
    }
[data-theme="dark"] .orientation-toggle-button:hover
    {
    border-color: var(--border-secondary);
    }
#hamburger-orientation-item .orientation-toggle-button
    {
    margin-left: auto;
    }

/*---------------------------------------------------------------------------------------------*/
/* CustomDropdown (period / market / odds-format header controls). */
/* Horizontal mode: button drops the menu down (position:absolute).               */
/* Vertical mode: button flies the menu out to the right (position:fixed via JS). */
/*---------------------------------------------------------------------------------------------*/
.custom-dropdown
    {
    position: relative;
    display: inline-block;
    margin-right: calc(8px * var(--zoom-factor));
    }

.custom-dropdown-button
    {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: calc(8px * var(--zoom-factor)) calc(14px * var(--zoom-factor));
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #ffffff;
    color: #374151;
    font-size: calc(14px * var(--zoom-factor));
    /* line-height:1 collapses the line box to exactly the glyph height so the
       value text is genuinely vertically centered by align-items:center.  With
       the default "normal" line-height the descender padding creates dead
       space below the glyph, which made the text look pushed toward the top
       of the button. */
    line-height: 1;
    cursor: pointer;
    text-align: left;
    justify-content: space-between;
    min-width: calc(120px * var(--zoom-factor));
    }
.custom-dropdown-button:hover
    {
    border-color: #9ca3af;
    }
.custom-dropdown-button:focus
    {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.custom-dropdown-value
    {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.custom-dropdown-arrow
    {
    font-size: 10px;
    color: #6b7280;
    pointer-events: none;
    }

.custom-dropdown-menu
    {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    min-width: 100%;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: 4px 0;
    }

.custom-dropdown-item
    {
    padding: 6px 12px;
    font-size: calc(14px * var(--zoom-factor));
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
.custom-dropdown-item:hover
    {
    background-color: #f3f4f6;
    }
.custom-dropdown-item.selected
    {
    background-color: #e0e7ff;
    color: #1e40af;
    }

[data-theme="dark"] .custom-dropdown-button
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
    }
[data-theme="dark"] .custom-dropdown-button:hover
    {
    border-color: var(--border-secondary);
    }
[data-theme="dark"] .custom-dropdown-menu
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
[data-theme="dark"] .custom-dropdown-item
    {
    color: var(--text-primary);
    }
[data-theme="dark"] .custom-dropdown-item:hover
    {
    background-color: var(--bg-tertiary);
    }
[data-theme="dark"] .custom-dropdown-item.selected
    {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    }

/* Vertical-mode strip: stretch the dropdown button across the column width and
   bump the menu z-index so fly-right (position:fixed left/top in JS) renders
   above the rest of the sidebar. */
body.display-buttons-vertical .sports-menu-header > .custom-dropdown
    {
    display: flex;
    width: 100%;
    margin: 0 !important;
    }
body.display-buttons-vertical .sports-menu-header > .custom-dropdown .custom-dropdown-button
    {
    width: 100%;
    min-width: 0;
    }
body.display-buttons-vertical .custom-dropdown-menu
    {
    z-index: 2000;
    }

/* Vertical-mode: every hamburger sub-flyout opens to the right of its parent
   row instead of to the left, because the hamburger dropdown itself is now
   anchored to the left edge of the screen (sidebar) rather than the right
   edge of the page header.  The default rules use right:100% which would
   push these submenus off-screen to the left. */
body.display-buttons-vertical .settings-submenu,
body.display-buttons-vertical .settings-general-submenu,
body.display-buttons-vertical .weather-submenu,
body.display-buttons-vertical .injury-submenu,
body.display-buttons-vertical .alerts-submenu,
body.display-buttons-vertical .alerts-panel-submenu,
body.display-buttons-vertical .odds-submenu
    {
    right: auto;
    left: 100%;
    margin-right: 0;
    margin-left: 0;
    }
/* The General row's caret normally sits on the left (pointing at the
   left-opening submenu).  In vertical mode the submenu opens to the right,
   so the caret moves to the right side and flips direction (scaleX(-1)
   composed with the existing translateY(-50%) keeps the vertical centering). */
body.display-buttons-vertical .settings-submenu-caret
    {
    left: auto;
    right: 3px;
    transform: translateY(-50%) scaleX(-1);
    }

/*---------------------------------------------------------------------------------------------*/
/* Modal Styles */
/*---------------------------------------------------------------------------------------------*/
.modal
    {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    }

/* Draggable Modal Styles */
.modal.draggable
    {
    position: fixed;
    }

.modal.draggable .modal-content
    {
    position: relative;
    margin: 0;
    }

.modal.draggable .modal-header
    {
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    }

.modal.draggable .modal-header:hover
    {
    background-color: rgba(0, 0, 0, 0.05);
    }

/* Resizeable Modal Styles */
.modal-content.resizeable
    {
    resize: both;
    overflow: auto;
    }

/* Custom Resize Handles */
.resize-handle
    {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.8);
    z-index: 1001;
    border: none;
    outline: none;
    }

.resize-handle:hover
    {
    background-color: rgba(0, 123, 255, 0.8);
    }

/* Corner handles */
.resize-handle-nw,
.resize-handle-ne,
.resize-handle-sw,
.resize-handle-se
    {
    width: 16px;
    height: 16px;
    }

/* Border handles */
.resize-handle-n,
.resize-handle-s
    {
    width: 16px;
    height: 16px;
    }

.resize-handle-e,
.resize-handle-w
    {
    width: 16px;
    height: 16px;
    }

/* Resize handle styling */
.modal-content.resizeable::after
    {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #6b7280 transparent;
    cursor: se-resize;
    transition: border-color 0.2s;
    z-index: 1001;
    }

.modal-content.resizeable:hover::after
    {
    border-color: transparent transparent #374151 transparent;
    }

.modal-content
    {
    background-color: var(--bg-secondary);
    margin: 0;
    padding: 0;
    border-radius: 0.5rem;
    width: 600px;
    max-width: 900px;
    min-width: 600px;
    max-height: 85vh;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    resize: both;
    overflow: auto;
    position: relative;
    border: 2px solid var(--border-secondary);
    }

.modal-content::after
    {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 25px;
    border-color: transparent transparent #6b7280 transparent;
    cursor: se-resize;
    transition: border-color 0.2s;
    z-index: 1001;
    }

.modal-content:hover::after
    {
    border-color: transparent transparent #374151 transparent;
    }

.modal-header
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 2px 2px 10px;
    border-bottom: 1px solid #e5e7eb;
    }

.modal-header h3
    {
    margin: 0;
    font-size: calc(18px * var(--zoom-factor));
    font-weight: 600;
    color: #1f2937;
    }

.close-button
    {
    background: transparent;
    border: none;
    font-size: calc(24px * var(--zoom-factor));
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: calc(30px * var(--zoom-factor));
    height: calc(30px * var(--zoom-factor));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(0.25rem * var(--zoom-factor));
    transition: background-color 0.2s;
    }

.close-button:hover
    {
    background-color: #f3f4f6;
    color: #374151;
    }

.modal-body
    {
    flex: 1;
    padding: 2px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    }

.filter-controls
    {
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    }

.filter-checkboxes
    {
    display: flex;
    flex-direction: column;
    gap: 8px;
    }

.enable-controls
    {
    display: flex;
    gap: 8px;
    }

.enable-button
    {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s;
    }

.enable-button:hover
    {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    }

.enable-button:active
    {
    background-color: #e5e7eb;
    }

.filter-checkbox
    {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    }

.filter-checkbox input[type="checkbox"]
    {
    width: 16px;
    height: 16px;
    cursor: pointer;
    }

.filter-checkbox input[type="checkbox"]:disabled
    {
    cursor: not-allowed;
    opacity: 0.5;
    }

.filter-checkbox:has(input[type="checkbox"]:disabled)
    {
    opacity: 0.6;
    cursor: not-allowed;
    }

.modal-footer
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
    border-top: 1px solid #e5e7eb;
    }

.modal-footer-left
    {
    display: flex;
    gap: 0.75rem;
    margin-right: 2rem;
    }

.modal-footer-right
    {
    display: flex;
    gap: 0.75rem;
    }

.save-button, .cancel-button
    {
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    border-radius: calc(0.375rem * var(--zoom-factor));
    font-size: calc(14px * var(--zoom-factor));
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
    }

.save-button
    {
    background-color: #3b82f6;
    color: white;
    }

.save-button:hover
    {
    background-color: #2563eb;
    }

.cancel-button
    {
    background-color: #6b7280;
    color: white;
    }

.cancel-button:hover
    {
    background-color: #4b5563;
    }

.cancel-button:disabled
    {
    opacity: 0.5;
    cursor: not-allowed;
    }

/*---------------------------------------------------------------------------------------------*/
/* League Order Table Styles */
/*---------------------------------------------------------------------------------------------*/
.league-list-container
    {
    flex: 1;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    min-height: 80px;
    position: relative;
    }

.league-order-table
    {
    width: 100%;
    border-collapse: collapse;
    background: white;
    table-layout: auto;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    position: relative;
    }

/* Column widths for league order table */
.league-order-table th:nth-child(1),
.league-order-table td:nth-child(1)
    {
    min-width: 80px; /* Enabled column */
    width: 10%;
    text-align: center;
    }

.league-order-table th:nth-child(2),
.league-order-table td:nth-child(2)
    {
    min-width: 120px; /* Sport column */
    width: 25%;
    }

.league-order-table th:nth-child(3),
.league-order-table td:nth-child(3)
    {
    min-width: 150px; /* League column */
    width: 35%;
    }

.league-order-table th:nth-child(4),
.league-order-table td:nth-child(4)
    {
    min-width: 150px; /* Subleague column */
    width: 30%;
    }

.league-order-table thead
    {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #f9fafb;
    }

.league-order-table th
    {
    position: sticky;
    top: 0;
    background: #f9fafb;
    padding: calc(1px * var(--zoom-factor)) calc(2px * var(--zoom-factor));
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    z-index: 100;
    font-size: calc(14px * var(--zoom-factor));
    border-right: 1px solid #e5e7eb;
    }

.league-order-table th::after
    {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    cursor: col-resize;
    transition: background-color 0.2s;
    }

.league-order-table th:hover::after
    {
    background: #3b82f6;
    }

.league-order-table th.resizing::after
    {
    background: #1d4ed8;
    }

.league-order-table td
    {
    padding: calc(1px * var(--zoom-factor)) calc(2px * var(--zoom-factor));
    border-bottom: 1px solid #f3f4f6;
    border-right: 1px solid #f3f4f6;
    vertical-align: middle;
    font-size: calc(14px * var(--zoom-factor));
    }

.league-order-table tr:hover
    {
    background-color: #f9fafb;
    }

.league-order-table tr.dragging
    {
    opacity: 0.5;
    background-color: #e5e7eb;
    }

.league-order-table tr.drag-over
    {
    background-color: #dbeafe;
    border: 2px dashed #3b82f6;
    }

.league-order-table tr
    {
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s;
    }

.sport-name
    {
    font-weight: 500;
    color: #1f2937;
    }

[data-theme="dark"] .sport-name
    {
    color: var(--text-primary);
    }

.league-name
    {
    color: #374151;
    }

[data-theme="dark"] .league-name
    {
    color: var(--text-primary);
    }

.subleague-name
    {
    color: #6b7280;
    font-style: italic;
    }

/* Drag handle for reordering */
.drag-handle
    {
    cursor: move;
    color: #9ca3af;
    margin-right: calc(0.5rem * var(--zoom-factor));
    font-size: calc(19px * var(--zoom-factor));
    }

.drag-handle:hover
    {
    color: #6b7280;
    }

.right-justify-header
    {
    text-align: center;
    }

/* Toggle switch for league enabled/disabled */
.toggle-switch
    {
    position: relative;
    display: inline-block;
    width: calc(40px * var(--zoom-factor));
    height: calc(20px * var(--zoom-factor));
    }

.toggle-switch input
    {
    opacity: 0;
    width: 0;
    height: 0;
    }

.toggle-slider
    {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: calc(20px * var(--zoom-factor));
    }

.toggle-slider:before
    {
    position: absolute;
    content: "";
    height: calc(16px * var(--zoom-factor));
    width: calc(16px * var(--zoom-factor));
    left: calc(2px * var(--zoom-factor));
    bottom: calc(2px * var(--zoom-factor));
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    }

input:checked + .toggle-slider
    {
    background-color: #3b82f6;
    }

input:checked + .toggle-slider:before
    {
    transform: translateX(calc(20px * var(--zoom-factor)));
    }

.toggle-switch:disabled .toggle-slider
    {
    background-color: #e5e7eb;
    cursor: not-allowed;
    }

.toggle-switch:disabled .toggle-slider:before
    {
    background-color: #f3f4f6;
    }

/* Highlighted label for selected league below sport button */
.selected-league-label
    {
    background-color: #3b82f6;
    color: white;
    border-radius: calc(0.375rem * var(--zoom-factor));
    margin-top: calc(2px * var(--zoom-factor));
    margin-bottom: calc(2px * var(--zoom-factor));
    padding: calc(1px * var(--zoom-factor)) calc(8px * var(--zoom-factor));
    font-size: calc(14px * var(--zoom-factor));
    font-weight: 400;
    text-align: center;
    box-shadow: none;
    display: block;
    width: fit-content;
    min-width: calc(40px * var(--zoom-factor));
    max-width: 100%;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0;
    transition: background-color 0.2s, color 0.2s;
    }

/* Highlighted banner for selected league above the table */
.selected-league-banner
    {
    background-color: #3b82f6;
    color: white;
    border-radius: 999px;
    margin: calc(0.5rem * var(--zoom-factor)) auto calc(1rem * var(--zoom-factor)) auto;
    padding: calc(0.5rem * var(--zoom-factor)) calc(2.5rem * var(--zoom-factor));
    font-size: calc(18px * var(--zoom-factor));
    font-weight: 600;
    text-align: center;
    box-shadow: 0 calc(2px * var(--zoom-factor)) calc(8px * var(--zoom-factor)) rgba(59,130,246,0.08);
    display: block;
    width: fit-content;
    min-width: calc(100px * var(--zoom-factor));
    max-width: 90vw;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: background-color 0.2s, color 0.2s;
    }

.selected-display-chip
    {
    background-color: #3b82f6;
    color: white;
    border-radius: 999px;
    padding: calc(2px * var(--zoom-factor)) calc(14px * var(--zoom-factor));
    font-size: calc(16px * var(--zoom-factor));
    font-weight: 600;
    margin-left: calc(8px * var(--zoom-factor));
    display: inline-flex;
    align-items: center;
    height: calc(28px * var(--zoom-factor));
    min-width: calc(40px * var(--zoom-factor));
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none;
    }

/* Secondary-window chip: red background with white text to distinguish archive/future dates. */
.selected-display-chip.secondary-window-chip
    {
    background-color: #dc2626;
    color: white;
    }

/* Secondary-window date pill: replaces the TODAY button in the second row. */
/* The base .sport-link class handles shape/padding; this overrides just the colors. */
.sport-link.secondary-date-pill
    {
    background-color: #dc2626;
    color: white;
    }

.sport-link.secondary-date-pill:hover
    {
    background-color: #b91c1c;
    color: white;
    }

#period-dropdown,
#display-type-dropdown,
#odds-format-dropdown
    {
    padding-top: calc(2px * var(--zoom-factor)) !important;
    padding-bottom: calc(2px * var(--zoom-factor)) !important;
    padding-left: calc(0.5rem * var(--zoom-factor));
    padding-right: calc(0.5rem * var(--zoom-factor));
    font-size: calc(15px * var(--zoom-factor));
    height: calc(28px * var(--zoom-factor)) !important;
    min-height: calc(28px * var(--zoom-factor)) !important;
    line-height: 1.1;
    }
#period-dropdown
    {
    margin-right: calc(2px * var(--zoom-factor)) !important;
    }
#period-dropdown + #display-type-dropdown
    {
    margin-left: 0 !important;
    }

.page-header h2
    {
    margin-right: calc(0.75rem * var(--zoom-factor));
    font-size: calc(20px * var(--zoom-factor));
    }

/* Light mode version text */
.version-text
    {
    font-size: calc(14px * var(--zoom-factor));
    color: #1f2937;
    font-weight: 500;
    margin-left: calc(0.5rem * var(--zoom-factor));
    }

/* Dark mode version text */
[data-theme="dark"] .version-text
    {
    color: #e5e7eb;
    }

/* Version indicator dot */
.version-indicator
    {
    display: inline-block;
    width: calc(0.6em * var(--zoom-factor));
    height: calc(0.6em * var(--zoom-factor));
    border-radius: 50%;
    margin-left: calc(0.3rem * var(--zoom-factor));
    vertical-align: middle;
    cursor: help;
    position: relative;
    background-color: #9ca3af; /* Gray when not yet checked */
    }

.version-indicator.version-current
    {
    background-color: #22c55e; /* Green when current */
    }

.version-indicator.version-outdated
    {
    background-color: #ef4444; /* Red when outdated */
    box-shadow: 0 0 0 calc(0.2em * var(--zoom-factor)) white,
                0 0 0 calc(0.25em * var(--zoom-factor)) #6b7280; /* White circle with border */
    animation: blink-red 1s ease-in-out infinite;
    }

@keyframes blink-red
    {
    0%, 100%
        {
        background-color: #ef4444;
        }
    50%
        {
        background-color: white;
        }
    }

/* Version indicator tooltip */
.version-indicator-tooltip
    {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #1f2937;
    color: #f9fafb;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: 2px solid #22c55e; /* Green when current */
    }

.version-outdated .version-indicator-tooltip
    {
    border-color: #ef4444; /* Red when outdated */
    }

.version-indicator-tooltip::before
    {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1f2937;
    }

/* Dark mode tooltip */
[data-theme="dark"] .version-indicator-tooltip
    {
    background-color: #374151;
    }

[data-theme="dark"] .version-indicator-tooltip::before
    {
    border-bottom-color: #374151;
    }

/* Version changelog window */
.version-changelog-window
    {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    max-height: 400px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    overflow: hidden;
    font-size: 14px;
    }

.version-changelog-header
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 2px 2px 10px;
    background-color: #ef4444;
    color: white;
    font-weight: 600;
    }

.version-changelog-close
    {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    }

.version-changelog-close:hover
    {
    opacity: 1;
    }

.version-changelog-content
    {
    padding: 2px 2px 2px 10px;
    max-height: 300px;
    overflow-y: auto;
    color: #374151;
    }

.version-changelog-content ul
    {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
    }

.version-changelog-content li
    {
    margin-bottom: 8px;
    }

.version-changelog-nav
    {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    }

.version-changelog-nav-link
    {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    }

.version-changelog-nav-link:hover
    {
    text-decoration: underline;
    }

[data-theme="dark"] .version-changelog-nav
    {
    border-top-color: #4b5563;
    }

[data-theme="dark"] .version-changelog-nav-link
    {
    color: #60a5fa;
    }

/* Dark mode changelog window */
[data-theme="dark"] .version-changelog-window
    {
    background-color: #1f2937;
    border-color: #374151;
    }

[data-theme="dark"] .version-changelog-content
    {
    color: #e5e7eb;
    }

.sticky-spacer
    {
    height: 1px;
    width: 100%;
    background: transparent;
    pointer-events: none;
    }

/*---------------------------------------------------------------------------------------------*/
/* Sport Drag and Drop Styles */
/*---------------------------------------------------------------------------------------------*/

.sport-item.dragging
    {
    opacity: 0.7;
    transform: rotate(2deg) scale(1.05);
    z-index: 102;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

.sport-item.drag-over
    {
    border: 2px dashed #3b82f6;
    background: #dbeafe;
    border-radius: 4px;
    margin: -2px;
    }

/* Tennis set inner elements inherit color from the .tennis-set parent so the
   highlight timer's inline color (or the universal sticky-column white-text rule
   when no highlight is active) reaches <strong>/<sup> nodes regenerated by
   innerHTML updates that did not re-run setupHighlightTimer. */
tr.score-active .score-cell .tennis-set strong,
tr.score-active .score-cell .tennis-set sup,
tr.score-final .score-cell .tennis-set strong,
tr.score-final .score-cell .tennis-set sup
    {
    color: inherit !important;
    }

/* Sports Buttons Modal sizing */
#sports-buttons-modal .modal-content
    {
    width: 500px;
    min-width: 350px;
    max-width: 900px;
    min-height: 0;
    height: 620px;
    }

#sports-buttons-modal .modal-body
    {
    background-color: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    }

.sports-buttons-explanation
    {
    margin: 0 0 8px 0;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    line-height: 1.4;
    flex-shrink: 0;
    }

.sports-panels-wrapper
    {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    gap: 8px;
    }

.sports-panel
    {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    }

.sports-panel-top
    {
    flex: 3; /* 75% */
    }

.sports-panel-bottom
    {
    flex: 1; /* 25% */
    }

.sports-panel-label
    {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    flex-shrink: 0;
    }

/* Sports Buttons table column widths */
.sports-buttons-table
    {
    table-layout: fixed;
    width: 100%;
    }

.sports-buttons-table th:nth-child(1),
.sports-buttons-table td:nth-child(1)
    {
    width: 58px;
    text-align: center;
    }

.sports-buttons-table th:nth-child(2),
.sports-buttons-table td:nth-child(2),
.sports-buttons-table th:nth-child(3),
.sports-buttons-table td:nth-child(3),
.sports-buttons-table th:nth-child(4),
.sports-buttons-table td:nth-child(4)
    {
    width: auto;
    }

/* Sports Buttons Modal Styles */
.sports-list-container
    {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border-secondary);
    border-radius: 0.375rem;
    background-color: var(--bg-secondary);
    }

.sports-button-row
    {
    cursor: move;
    transition: background-color 0.2s ease;
    }

.sports-button-row:hover
    {
    background-color: var(--bg-tertiary);
    }

.sports-button-row.dragging
    {
    opacity: 0.5;
    background-color: #e5e7eb;
    }

.sports-button-row.drag-over
    {
    background-color: #dbeafe;
    border-top: 2px solid #3b82f6;
    }

.panel-drop-target
    {
    background-color: #dbeafe;
    outline: 2px dashed #3b82f6;
    outline-offset: -2px;
    }

.enabled-header
    {
    background-color: #000;
    color: white;
    text-align: center;
    font-weight: 600;
    }

.delete-button
    {
    background-color: #dc2626;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.2s;
    }

.delete-button:hover
    {
    background-color: #b91c1c;
    }

.delete-button:active
    {
    background-color: #991b1b;
    }

.add-events-button
    {
    background-color: #2563eb;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.2s;
    }

.add-events-button:hover
    {
    background-color: #1d4ed8;
    }

.add-events-button:active
    {
    background-color: #1e40af;
    }

/*---------------------------------------------------------------------------------------------*/
/* Add Events Modal Overlay Styles */
/*---------------------------------------------------------------------------------------------*/
.modal-overlay
    {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001; /* Above the league-order-modal */
    }

.modal-overlay.hidden
    {
    display: none;
    }

.modal-overlay-content
    {
    background: var(--modal-bg, #fff);
    color: var(--modal-text, #333);
    border-radius: 8px;
    width: 500px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

.modal-overlay-content .modal-header
    {
    padding: 12px 16px;
    border-bottom: 1px solid var(--modal-border, #ddd);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    }

.modal-overlay-content .modal-body
    {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
    }

.modal-overlay-content .modal-footer
    {
    padding: 12px 16px;
    border-top: 1px solid var(--modal-border, #ddd);
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    }

.add-events-step
    {
    width: 100%;
    }

.add-events-list
    {
    display: flex;
    flex-direction: column;
    gap: 4px;
    }

.add-events-list-item
    {
    padding: 8px 12px;
    border: 1px solid var(--modal-border, #ddd);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
    }

.add-events-list-item:hover
    {
    background-color: var(--row-hover-bg, #f0f0f0);
    }

.add-events-date-controls
    {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    }

.add-events-date-controls label
    {
    display: flex;
    align-items: center;
    gap: 6px;
    }

.add-events-date-controls input[type="date"]
    {
    padding: 4px 8px;
    border: 1px solid var(--modal-border, #ddd);
    border-radius: 4px;
    background: var(--input-bg, #fff);
    color: var(--input-text, #333);
    }

.add-events-select-controls
    {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    }

.add-events-events-list
    {
    max-height: 400px;
    overflow-y: auto;
    }

.add-events-group-header
    {
    font-weight: bold;
    padding: 6px 8px;
    background: var(--header-bg, #e5e7eb);
    color: var(--header-text, #333);
    border-radius: 4px;
    margin-top: 8px;
    margin-bottom: 4px;
    }

.add-events-group-header:first-child
    {
    margin-top: 0;
    }

.add-events-event-row
    {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 16px;
    cursor: pointer;
    border-radius: 4px;
    }

.add-events-event-row:hover
    {
    background-color: var(--row-hover-bg, #f0f0f0);
    }

.add-events-event-row input[type="checkbox"]
    {
    flex-shrink: 0;
    }

.add-events-event-name
    {
    flex: 1;
    }

.add-events-event-number
    {
    color: var(--text-muted, #999);
    font-size: 0.85em;
    flex-shrink: 0;
    }

/*---------------------------------------------------------------------------------------------*/
/* Print Modal Styles */
/*---------------------------------------------------------------------------------------------*/
.print-columns-container
    {
    max-height: 400px;
    overflow-y: auto;
    }

/* Print Modal Table Styles - Light Mode */
#print-columns-table
    {
    width: 100%;
    border-collapse: collapse;
    background: white;
    table-layout: auto;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    border: 2px solid #9ca3af;
    }

#print-columns-table th
    {
    background: #f9fafb;
    padding: calc(1px * var(--zoom-factor)) calc(2px * var(--zoom-factor));
    text-align: left;
    font-weight: 600;
    color: #374151;
    border: 1px solid #9ca3af;
    font-size: calc(14px * var(--zoom-factor));
    }

#print-columns-table td
    {
    padding: calc(1px * var(--zoom-factor)) calc(2px * var(--zoom-factor));
    border: 1px solid #9ca3af;
    vertical-align: middle;
    font-size: calc(14px * var(--zoom-factor));
    }

/* Column widths for print columns table */
#print-columns-table th:nth-child(1),
#print-columns-table td:nth-child(1)
    {
    min-width: 80px;
    width: 10%;
    text-align: center;
    }

#print-columns-table th:nth-child(2),
#print-columns-table td:nth-child(2)
    {
    min-width: 120px;
    width: 25%;
    }

.print-column-row
    {
    transition: background-color 0.2s;
    }

.print-column-row:hover
    {
    background-color: #f3f4f6;
    }

.print-column-row.dragging
    {
    opacity: 0.5;
    background-color: #e5e7eb;
    }

.print-column-row.drag-over
    {
    background-color: #dbeafe;
    border-top: 2px solid #3b82f6;
    }

.column-name
    {
    font-weight: 500;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    }

.column-name .drag-handle
    {
    cursor: grab;
    color: #6b7280;
    font-size: 14px;
    -webkit-user-select: none;
    user-select: none;
    }

.column-name .drag-handle:hover
    {
    color: #374151;
    }

.column-name .drag-handle:active
    {
    cursor: grabbing;
    }

/* Print Modal Radio Button Options - Light Mode */
.print-options-cell
    {
    display: flex;
    flex-direction: column;
    gap: 2px;
    }

.print-radio-label
    {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    color: #6b7280;
    }

.print-radio-label input[type="radio"]
    {
    margin: 0;
    cursor: pointer;
    width: 12px;
    height: 12px;
    }

.print-radio-label input[type="radio"]:checked + span
    {
    font-weight: 600;
    color: var(--accent-primary, #3b82f6);
    }

/* Print Modal Table Styles - Dark Mode */
[data-theme="dark"] #print-columns-table
    {
    background: #1f2937;
    border: 2px solid #6b7280;
    }

[data-theme="dark"] #print-columns-table th
    {
    background: #374151;
    color: #e5e7eb;
    border: 1px solid #6b7280;
    }

[data-theme="dark"] #print-columns-table td
    {
    border: 1px solid #6b7280;
    color: #e5e7eb;
    }

[data-theme="dark"] .print-column-row:hover
    {
    background-color: #374151;
    }

[data-theme="dark"] .print-radio-label
    {
    color: #9ca3af;
    }

/* Bold team abbreviation and name when they are the winner */
.team-abbr.winner,
.team-name.winner
    {
    font-weight: bold;
    }

/* Ensure winner text color is not overridden by row styles in final games */
tr.score-final .team-name.winner,
tr.score-final .team-abbr.winner
    {
    color: white !important; /* Or black if you prefer on the red background */
    }

/* Custom name input for Add League Buttons modal */
.custom-name-input
    {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #1f2937;
    background-color: #fff;
    }

.custom-name-input:focus
    {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

/* Dark mode: keep custom name input black on white for legibility */
[data-theme="dark"] .custom-name-input
    {
    color: #1f2937 !important;
    background-color: #fff !important;
    border-color: #ccc !important;
    }

[data-theme="dark"] .custom-name-input::placeholder
    {
    color: #6b7280 !important;
    }

/* Add League Button */
.add-league-button
    {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    }

.add-league-button:hover
    {
    background-color: #218838;
    }

/* Remove Button */
.remove-button
    {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    }

.remove-button:hover
    {
    background-color: #c82333;
    }

/* League item styling */
.league-item .sport-link
    {
    color: #495057;
    }

.league-item .sport-link:hover
    {
    color: #007bff;
    }

/*---------------------------------------------------------------------------------------------*/
/* Sportsbook Modal Styles */
/*---------------------------------------------------------------------------------------------*/

.sportsbook-name
    {
    font-weight: 500;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    }

.sportsbook-name .drag-handle
    {
    cursor: grab;
    color: #9ca3af;
    font-size: 14px;
    -webkit-user-select: none;
    user-select: none;
    padding: 2px 4px;
    margin-right: 8px;
    }

.sportsbook-name .drag-handle:hover
    {
    color: #6b7280;
    background-color: rgba(107, 114, 128, 0.1);
    border-radius: 3px;
    }

.sportsbook-name .drag-handle:active
    {
    cursor: grabbing;
    }

/* Sportsbook Order Modal sizing */
#sportsbook-order-modal .modal-content
    {
    width: 960px;
    height: 800px;
    }

#sportsbook-order-modal .modal-footer
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

/* Sportsbook Hierarchy Tree Panel */
.sportsbook-tree-panel
    {
    --sb-tree-node-color: #5f6368;
    --sb-tree-toggle-color: #7b8086;
    --sb-tree-footer-text-color: #666;
    --sb-tree-footer-value-color: #444;
    --sb-tree-divider-color: var(--border-color, #444);
    width: 263px;
    min-width: 263px;
    max-width: 263px;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    border-right: 1px solid var(--border-color, #444);
    flex-shrink: 0;
    }

[data-theme="dark"] .sportsbook-tree-panel
    {
    --sb-tree-node-color: var(--text-color, #ccc);
    --sb-tree-toggle-color: var(--text-muted, #aaa);
    --sb-tree-footer-text-color: var(--text-muted, #aaa);
    --sb-tree-footer-value-color: var(--text-color, #ccc);
    --sb-tree-divider-color: rgba(255, 255, 255, 0.9);
    }

.sb-tree-scroll
    {
    flex: 1;
    overflow-y: auto;
    padding: 6px 4px;
    }

.sb-tree-node
    {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--sb-tree-node-color, var(--text-color, #ccc));
    user-select: none;
    }

.sb-tree-node:hover
    {
    background: var(--button-hover-bg, #3a3a3a);
    }

.sb-tree-node.is-selected
    {
    box-shadow: inset 3px 0 0 var(--accent-color, #6ab0f5);
    background: rgba(106, 176, 245, 0.12);
    color: var(--accent-color, #6ab0f5);
    }

.sb-tree-current-marker
    {
    font-size: 0.7em;
    color: var(--accent-color, #6ab0f5);
    opacity: 0.7;
    flex-shrink: 0;
    }

.sb-tree-toggle
    {
    width: 14px;
    min-width: 14px;
    text-align: center;
    font-size: 0.9em;
    color: var(--sb-tree-toggle-color, var(--text-muted, #aaa));
    flex-shrink: 0;
    }

.sb-tree-label
    {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    }

.sb-tree-label.has-own-config
    {
    font-weight: 700;
    }

.sb-tree-indicators
    {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    }

.sb-tree-label-text
    {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

.sb-tree-sport
    {
    padding-left: 18px;
    }

.sb-tree-league
    {
    padding-left: 42px;
    }

.sb-tree-footer
    {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    font-size: 0.75em;
    font-family: inherit;
    font-weight: normal;
    color: var(--sb-tree-footer-text-color, var(--text-muted, #aaa));
    border: 1px solid var(--sb-tree-divider-color, var(--border-color, #444));
    border-radius: 4px;
    overflow: hidden;
    }

.sb-tree-footer-table
    {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    font-family: inherit;
    font-size: inherit;
    font-weight: normal;
    line-height: inherit;
    color: inherit;
    }

.sb-tree-footer-col-left
    {
    width: auto;
    }

.sb-tree-footer-col-right
    {
    width: auto;
    }

.sb-tree-footer-editing-cell
    {
    padding: 6px 8px 5px 8px;
    font-family: inherit;
    font-size: inherit;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    }

.sb-tree-footer-table tr + tr td
    {
    border-top: 1px solid var(--sb-tree-divider-color, var(--border-color, #444));
    }

.sb-tree-footer-table td + td
    {
    border-left: 1px solid var(--sb-tree-divider-color, var(--border-color, #444));
    }

.sb-tree-footer-editing-value
    {
    font-weight: normal;
    color: var(--sb-tree-footer-value-color, var(--text-color, #ccc));
    }

.sb-tree-footer-editing-cell .sb-tree-footer-editing-value + .sb-tree-footer-editing-value
    {
    margin-left: 6px;
    }

.sb-tree-star
    {
    color: #f0c040;
    line-height: 1;
    flex-shrink: 0;
    }

.sb-tree-star.is-hollow,
.sb-tree-dot.is-hollow
    {
    opacity: 0.95;
    }

.sb-tree-dot
    {
    color: #80d0ff;
    font-size: 1.4em;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    }

.sb-tree-footer-cell
    {
    padding: 3px 2px;
    font-family: inherit;
    font-size: inherit;
    font-weight: normal;
    color: inherit;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
    }

.sb-tree-footer-cell.is-right
    {
    text-align: right;
    }

.sb-tree-footer-legend-item
    {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: inherit;
    font-weight: normal;
    width: 100%;
    min-width: 0;
    }

.sb-tree-footer-cell.is-right .sb-tree-footer-legend-item
    {
    justify-content: flex-end;
    }

.sb-tree-footer .sb-tree-dot
    {
    font-size: 1.867em;
    }

.level-revert-button
    {
    margin-left: 4px;
    padding: 2px 8px;
    font-size: 0.75em;
    border-radius: 10px;
    border: 1px solid var(--danger-color, #c0392b);
    background: transparent;
    color: var(--danger-color, #c0392b);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    }

.level-revert-button:hover
    {
    background: var(--danger-color, #c0392b);
    color: #fff;
    }

/* ===== Edit Columns Scope Bar (Breadcrumbs & Scope Banner) ===== */
.sportsbook-scope-bar
    {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 14px;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    flex-wrap: wrap;
    flex-shrink: 0;
    }

[data-theme="dark"] .sportsbook-scope-bar
    {
    background-color: #1a2332;
    border-bottom-color: #334155;
    }

.sportsbook-breadcrumbs-container
    {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    }

.sportsbook-scope-label
    {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }

.sportsbook-breadcrumbs
    {
    display: flex;
    align-items: center;
    gap: 4px;
    }

.sportsbook-crumb
    {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    }

.sportsbook-crumb:hover
    {
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    }

.sportsbook-crumb.active
    {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    font-weight: 700;
    cursor: default;
    }

[data-theme="dark"] .sportsbook-crumb
    {
    background-color: #242f44;
    border-color: #3b4a6b;
    color: #cbd5e1;
    }

[data-theme="dark"] .sportsbook-crumb:hover
    {
    background-color: #1e3a8a;
    border-color: #60a5fa;
    color: #ffffff;
    }

[data-theme="dark"] .sportsbook-crumb.active
    {
    background-color: #2563eb;
    border-color: #3b82f6;
    color: #ffffff;
    }

.sportsbook-crumb-separator
    {
    color: var(--text-muted, #94a3b8);
    font-size: 11px;
    user-select: none;
    }

.sportsbook-scope-banner
    {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    flex-shrink: 0;
    }

.sportsbook-scope-banner.global
    {
    background-color: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, 0.25);
    }

[data-theme="dark"] .sportsbook-scope-banner.global
    {
    background-color: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
    }

.sportsbook-scope-banner.override
    {
    background-color: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
    }

[data-theme="dark"] .sportsbook-scope-banner.override
    {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.35);
    }

.sportsbook-scope-switch-btn
    {
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid currentColor;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s;
    }

.sportsbook-scope-switch-btn:hover
    {
    background: rgba(0, 0, 0, 0.18);
    }

[data-theme="dark"] .sportsbook-scope-switch-btn
    {
    background: rgba(255, 255, 255, 0.12);
    }

[data-theme="dark"] .sportsbook-scope-switch-btn:hover
    {
    background: rgba(255, 255, 255, 0.22);
    }

/* ===== Transfer Column (< and > Buttons) ===== */
.sportsbook-transfer-column
    {
    width: 44px;
    flex: 0 0 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 0 4px;
    user-select: none;
    }

.sportsbook-transfer-btn
    {
    width: 36px;
    height: 36px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
    }

.sportsbook-transfer-btn:hover
    {
    background-color: #1d4ed8;
    transform: scale(1.06);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
    }

.sportsbook-transfer-btn:active
    {
    transform: scale(0.96);
    }

.sportsbook-transfer-btn:disabled
    {
    background-color: #94a3b8;
    color: #e2e8f0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.5;
    }

[data-theme="dark"] .sportsbook-transfer-btn:disabled
    {
    background-color: #475569;
    color: #64748b;
    }

/* ===== Search Box for Available Sportsbooks ===== */
.sportsbook-search-row
    {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    }

.sportsbook-search-input
    {
    width: 100%;
    padding: 4px 24px 4px 8px;
    font-size: calc(11px * var(--zoom-factor));
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #ffffff;
    color: var(--text-primary);
    box-sizing: border-box;
    }

.sportsbook-search-input:focus
    {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
    }

[data-theme="dark"] .sportsbook-search-input
    {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
    }

.sportsbook-search-clear
    {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    }

.sportsbook-search-clear:hover
    {
    color: #4b5563;
    }

[data-theme="dark"] .sportsbook-search-clear:hover
    {
    color: #e5e7eb;
    }

.sportsbook-available-empty
    {
    padding: 12px 8px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    font-style: italic;
    }

/* ===== Save Target Confirmation Modal ===== */
.save-target-modal-content
    {
    max-width: 480px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    }

.save-target-prompt
    {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    }

.save-target-options
    {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
    }

.save-target-option
    {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
    }

.save-target-option:hover
    {
    background-color: rgba(59, 130, 246, 0.08);
    border-color: #3b82f6;
    }

.save-target-option input[type="radio"]
    {
    margin-top: 3px;
    cursor: pointer;
    }

.save-target-text
    {
    display: flex;
    flex-direction: column;
    gap: 3px;
    }

.save-target-text strong
    {
    font-size: 13px;
    color: var(--text-primary);
    }

.save-target-text span
    {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.4;
    }

[data-theme="dark"] .save-target-option
    {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: #374151;
    }

[data-theme="dark"] .save-target-option:hover
    {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    }

[data-theme="dark"] .save-target-text span
    {
    color: #94a3b8;
    }

/* Sportsbook Modal Body - Side by Side Layout */
.sportsbook-modal-body
    {
    display: flex;
    flex-direction: row;
    gap: 0;
    height: 100%;
    }

/* Column 3: Available Columns Panel */
.sportsbook-available-panel
    {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 8px;
    }

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

.sportsbook-available-panel h4
    {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    }

.sportsbook-available-list
    {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    min-height: 100px;
    }

/* Base columns list container */
.base-columns-list
    {
    flex: 0 0 auto;
    height: 160px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    }

/* Divider between base columns and available sportsbooks */
.available-panel-divider
    {
    margin: 4px 0;
    }

[data-theme="dark"] .base-columns-list
    {
    border-color: #4b5563;
    }

.base-columns-header
    {
    margin-top: 0;
    }

.sportsbook-available-row
    {
    padding: 4px 8px;
    cursor: pointer;
    font-size: calc(13px * var(--zoom-factor));
    -webkit-user-select: none;
    user-select: none;
    border-bottom: 1px solid #e5e7eb;
    }

.sportsbook-available-row:hover
    {
    background-color: #f3f4f6;
    }

.sportsbook-available-row.selected
    {
    background-color: #dbeafe !important;
    border-left: 3px solid #3b82f6;
    }

.sportsbook-available-row.configured
    {
    color: #9ca3af;
    font-style: italic;
    cursor: default;
    pointer-events: none;
    }

[data-theme="dark"] .sportsbook-available-row.configured
    {
    color: #6b7280;
    }

[data-theme="dark"] .sportsbook-available-row:hover
    {
    background-color: #374151;
    }

[data-theme="dark"] .sportsbook-available-row.selected
    {
    background-color: #1e40af !important;
    color: #ffffff;
    }

/* Add config row (Opener, Period, Display Type) */
.sportsbook-add-config
    {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    }

.sportsbook-add-config-row
    {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-wrap: nowrap;
    }

.add-config-field
    {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    }

.add-config-field label
    {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    line-height: 16px;
    }

.add-config-field select
    {
    padding: 3px 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: calc(11px * var(--zoom-factor));
    background-color: white;
    }

.add-config-field input[type="checkbox"]
    {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-top: 3px;
    }

[data-theme="dark"] .add-config-field select
    {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
    }

.add-button
    {
    padding: 4px 10px;
    background-color: #3b82f6;
    border: none;
    border-radius: calc(0.375rem * var(--zoom-factor));
    cursor: pointer;
    font-size: calc(13px * var(--zoom-factor));
    font-weight: 500;
    color: white;
    transition: background-color 0.2s;
    }

.add-button:hover
    {
    background-color: #2563eb;
    }

.sportsbook-add-button-row
    {
    display: flex;
    gap: 6px;
    align-items: center;
    }

.default-button
    {
    padding: 2px 8px;
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    cursor: pointer;
    font-size: calc(10px * var(--zoom-factor));
    color: #6b7280;
    transition: all 0.2s;
    }

.default-button:hover
    {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
    }

[data-theme="dark"] .default-button
    {
    border-color: #4b5563;
    color: #9ca3af;
    }

[data-theme="dark"] .default-button:hover
    {
    background-color: #374151;
    color: #f9fafb;
    }

/* Column 2: Configured Columns Panel */
.sportsbook-configured-panel
    {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--border-color, #444);
    padding: 8px;
    }

.sportsbook-add-hint
    {
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
    margin-left: 8px;
    }

.sportsbook-fixed-panel h4 label,
.sportsbook-scrollable-panel h4 label
    {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    }

/* Fixed panel — resizable via drag divider; scrollable takes remaining space */
.sportsbook-fixed-panel
    {
    flex: 0 0 auto;
    height: 50%;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    }

.sportsbook-scrollable-panel
    {
    flex: 1;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    }

/* Drag divider between Fixed and Scrollable panels */
.sportsbook-panel-divider
    {
    height: 6px;
    flex-shrink: 0;
    background-color: var(--border-color, #ccc);
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin: 2px 0;
    transition: background-color 0.15s ease;
    }

.sportsbook-panel-divider::after
    {
    content: '· · ·';
    font-size: 10px;
    color: var(--text-muted, #999);
    letter-spacing: 3px;
    pointer-events: none;
    }

.sportsbook-panel-divider:hover
    {
    background-color: #3b82f6;
    }

[data-theme="dark"] .sportsbook-panel-divider
    {
    background-color: var(--border-color, #555);
    }

[data-theme="dark"] .sportsbook-panel-divider:hover
    {
    background-color: #3b82f6;
    }

.sportsbook-fixed-panel h4,
.sportsbook-scrollable-panel h4
    {
    margin: 4px 0 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    }

.sportsbook-fixed-list,
.sportsbook-scrollable-list
    {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    min-height: 60px;
    }

/* Configured column rows */
.sportsbook-configured-row
    {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    cursor: pointer;
    font-size: calc(13px * var(--zoom-factor));
    -webkit-user-select: none;
    user-select: none;
    border-bottom: 1px solid #e5e7eb;
    }

.sportsbook-configured-row:hover
    {
    background-color: #f3f4f6;
    }

.sportsbook-configured-row.selected
    {
    background-color: #dbeafe !important;
    border-left: 3px solid #3b82f6;
    }

.sportsbook-configured-row .drag-handle
    {
    cursor: grab;
    color: #9ca3af;
    font-size: 12px;
    -webkit-user-select: none;
    user-select: none;
    padding: 2px 4px;
    flex-shrink: 0;
    }

.sportsbook-configured-row .drag-handle:hover
    {
    color: #6b7280;
    background-color: rgba(107, 114, 128, 0.1);
    border-radius: 3px;
    }

.sportsbook-configured-row .drag-handle:active
    {
    cursor: grabbing;
    }

.sportsbook-configured-row .sportsbook-name
    {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: #374151;
    }

.sportsbook-configured-row .custom-name-input
    {
    width: 110px;
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: calc(11px * var(--zoom-factor));
    box-sizing: border-box;
    flex-shrink: 0;
    }

[data-theme="dark"] .sportsbook-configured-row .sportsbook-name
    {
    color: var(--text-color, #ccc);
    }

[data-theme="dark"] .sportsbook-configured-row:hover
    {
    background-color: #374151;
    }

[data-theme="dark"] .sportsbook-configured-row.selected
    {
    background-color: #1e40af !important;
    color: #ffffff;
    }

[data-theme="dark"] .sportsbook-configured-row.selected .sportsbook-name
    {
    color: #ffffff !important;
    }

[data-theme="dark"] .sportsbook-configured-row .custom-name-input
    {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
    }

[data-theme="dark"] .sportsbook-configured-row .custom-name-input::placeholder
    {
    color: #9ca3af;
    }

/* Bottom sentinel row */
.sportsbook-bottom-sentinel
    {
    padding: 4px 8px;
    border-top: 1px solid #9ca3af;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    }

.sportsbook-bottom-sentinel em
    {
    font-size: calc(12px * var(--zoom-factor));
    color: #9ca3af;
    }

.sportsbook-bottom-sentinel.selected
    {
    background-color: #dbeafe !important;
    border-left: 3px solid #3b82f6;
    }

[data-theme="dark"] .sportsbook-bottom-sentinel.selected
    {
    background-color: #1e40af !important;
    }

/* Sportsbook name cell with delete button */
.sportsbook-name-cell
    {
    display: flex;
    align-items: center;
    gap: 4px;
    }

.sportsbook-name-cell .sportsbook-name
    {
    flex: 1;
    }

/* ===== Column Group Modal Styles ===== */

#column-group-modal .modal-body
    {
    overflow: hidden;
    }

.column-group-modal-body
    {
    display: flex;
    flex-direction: row;
    gap: 0;
    height: 100%;
    min-height: 400px;
    }

/* The tree panel sits flush on the left; the rest of the body uses the existing gap */
.column-group-modal-body > .sportsbook-tree-panel
    {
    border-right: 1px solid var(--border-color, #444);
    }

.column-group-modal-body > .sportsbook-tree-panel ~ .column-group-left-panel,
.column-group-modal-body > .sportsbook-tree-panel ~ .column-group-right-panel
    {
    margin-left: 0;
    }

/* Inner content area (everything after tree) uses the original gap */
.column-group-content-area
    {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex: 1;
    min-width: 0;
    padding: 0 0 0 16px;
    }

.column-group-left-panel
    {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    }

.column-group-right-panel
    {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    }

.column-group-left-panel h4,
.column-group-right-panel h4
    {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    }

.column-group-list-container
    {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background-color: white;
    }

/* Override league-order-table column widths for column group table */
#column-group-table th:nth-child(1),
#column-group-table td:nth-child(1)
    {
    min-width: 25px !important;
    width: 25px !important;
    }

#column-group-table th:nth-child(2),
#column-group-table td:nth-child(2)
    {
    min-width: auto !important;
    width: auto !important;
    }

#column-group-table th:nth-child(3),
#column-group-table td:nth-child(3)
    {
    min-width: 65px !important;
    width: 65px !important;
    }

#column-group-table th:nth-child(4),
#column-group-table td:nth-child(4)
    {
    min-width: 60px !important;
    width: 60px !important;
    }

.column-group-config-container
    {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background-color: white;
    }

.config-message
    {
    text-align: center;
    color: #9ca3af;
    padding: 40px 20px;
    font-size: 14px;
    }

.form-group
    {
    margin-bottom: 16px;
    }

.form-group label
    {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    }

.form-group input[type="text"]
    {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    }

.columns-list
    {
    min-height: 150px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 8px;
    background-color: #f9fafb;
    }

.columns-list.drag-over
    {
    background-color: #dbeafe;
    border-color: #3b82f6;
    }

.column-item
    {
    padding: 6px 10px;
    margin-bottom: 4px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: grab;
    font-size: 12px;
    user-select: none;
    transition: background-color 0.2s;
    }

.column-item:hover
    {
    background-color: #f3f4f6;
    }

.column-item.dragging
    {
    opacity: 0.5;
    cursor: grabbing;
    }

.column-item .delete-button
    {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    }

.column-item .delete-button:hover
    {
    transform: scale(1.2);
    }

#column-group-table tr.selected
    {
    background-color: #dbeafe !important;
    border-left: 4px solid #3b82f6 !important;
    color: #1f2937 !important;
    }

#column-group-table tr.selected td
    {
    background-color: #dbeafe !important;
    color: #1f2937 !important;
    }

/* Dark mode support for column group modal */
[data-theme="dark"] #column-group-table tr.selected
    {
    background-color: #1e40af !important;
    border-left: 4px solid #60a5fa !important;
    color: #f3f4f6 !important;
    }

[data-theme="dark"] #column-group-table tr.selected td
    {
    background-color: #1e40af !important;
    color: #f3f4f6 !important;
    }
[data-theme="dark"] .column-group-list-container,
[data-theme="dark"] .column-group-config-container
    {
    background-color: #1f2937;
    border-color: #374151;
    }

[data-theme="dark"] .form-group input[type="text"]
    {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
    }

[data-theme="dark"] .columns-list
    {
    background-color: #111827;
    border-color: #4b5563;
    }

[data-theme="dark"] .column-item
    {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
    }

[data-theme="dark"] .column-item:hover
    {
    background-color: #4b5563;
    }



/* Delete button (trash icon) */
.sportsbook-delete-btn
    {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 14px;
    padding: 2px 4px;
    transition: color 0.2s;
    }

.sportsbook-delete-btn:hover
    {
    color: #ef4444;
    }

/* Duplicate highlight animation */
@keyframes highlight-duplicate
    {
    0% { background-color: #fecaca; }
    50% { background-color: #fee2e2; }
    100% { background-color: #fecaca; }
    }

.sportsbook-configured-row.duplicate-highlight
    {
    animation: highlight-duplicate 0.5s ease-in-out 3;
    }

/* Column Group Controls */
.sportsbook-group-controls
    {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-bottom: 1px solid #e5e7eb;
    }

.create-group-button
    {
    padding: 2px 8px;
    font-size: 11px;
    background-color: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    }

.create-group-button:hover
    {
    background-color: #2563eb;
    }

.create-group-button:disabled
    {
    background-color: #93c5fd;
    cursor: default;
    }

.cancel-group-button
    {
    padding: 2px 8px;
    font-size: 11px;
    background-color: #ef4444;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    }

.cancel-group-button:hover
    {
    background-color: #dc2626;
    }

.group-creation-status
    {
    font-size: 11px;
    color: #3b82f6;
    font-style: italic;
    flex: 1;
    }

/* Group creation mode: cursor change on rows */
.group-creation-mode .sportsbook-configured-row:not(.sentinel)
    {
    cursor: crosshair;
    }

/* Group main column styling */
.sportsbook-configured-row.group-main-column
    {
    background-color: #dbeafe;
    border-left: 3px solid #3b82f6;
    }

.sportsbook-configured-row.group-main-column:hover
    {
    background-color: #bfdbfe;
    }

/* Group child column styling */
.sportsbook-configured-row.group-child-column
    {
    padding-left: 22px;
    border-left: 3px solid #93c5fd;
    background-color: #eff6ff;
    }

.sportsbook-configured-row.group-child-column:hover
    {
    background-color: #dbeafe;
    }

/* Highlight main column during group creation "selectLast" step */
.sportsbook-configured-row.group-select-main
    {
    background-color: #fef3c7 !important;
    border-left: 3px solid #f59e0b;
    }

/* Group chevron icon */
.group-chevron
    {
    font-size: 10px;
    color: #3b82f6;
    margin-right: 2px;
    cursor: default;
    }

/* Ungroup button */
.group-ungroup-btn
    {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    line-height: 1;
    }

.group-ungroup-btn:hover
    {
    color: #ef4444;
    }

/* Dark theme overrides for column groups */
[data-theme="dark"] .sportsbook-group-controls
    {
    border-bottom-color: #4b5563;
    }

[data-theme="dark"] .group-creation-status
    {
    color: #93c5fd;
    }

[data-theme="dark"] .sportsbook-configured-row.group-main-column
    {
    background-color: #1e3a5f;
    border-left-color: #3b82f6;
    }

[data-theme="dark"] .sportsbook-configured-row.group-main-column:hover
    {
    background-color: #1e40af;
    }

[data-theme="dark"] .sportsbook-configured-row.group-child-column
    {
    background-color: #1a2744;
    border-left-color: #60a5fa;
    }

[data-theme="dark"] .sportsbook-configured-row.group-child-column:hover
    {
    background-color: #1e3a5f;
    }

[data-theme="dark"] .sportsbook-configured-row.group-select-main
    {
    background-color: #78350f !important;
    border-left-color: #f59e0b;
    }

[data-theme="dark"] .group-chevron
    {
    color: #60a5fa;
    }

[data-theme="dark"] .group-ungroup-btn
    {
    color: #6b7280;
    }

[data-theme="dark"] .group-ungroup-btn:hover
    {
    color: #ef4444;
    }

/* League table row selection (keep for league modal) */
.league-order-table tr.selected
    {
    background-color: #dbeafe !important;
    border-left: 4px solid #3b82f6 !important;
    }

.league-order-table tr.selected td
    {
    background-color: #dbeafe !important;
    }

/* Sportsbook reorder controls */
.sportsbook-reorder-controls
    {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    }

.sportsbook-reorder-controls button
    {
    padding: calc(0.5rem * var(--zoom-factor)) calc(1rem * var(--zoom-factor));
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: calc(0.375rem * var(--zoom-factor));
    cursor: pointer;
    font-size: calc(14px * var(--zoom-factor));
    color: #374151;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    }

.sportsbook-reorder-controls button:hover:not(:disabled)
    {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    }

.sportsbook-reorder-controls button:disabled
    {
    opacity: 0.5;
    cursor: not-allowed;
    }

/*---------------------------------------------------------------------------------------------*/
/* Sort-column label and menu-icon (Time / Uni# / Int# headers)                              */
/*---------------------------------------------------------------------------------------------*/
.sort-col-label
    {
    cursor: default;
    }

.sort-menu-icon
    {
    cursor: pointer;
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    margin: 0 2px;
    font-size: 0.85em;
    line-height: 1;
    text-align: center;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.10);
    color: inherit;
    opacity: 0.9;
    user-select: none;
    vertical-align: middle;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    }

.sort-menu-icon:hover
    {
    background-color: rgba(0, 0, 0, 0.22);
    opacity: 1;
    }

[data-theme="dark"] .sort-menu-icon
    {
    background-color: rgba(255, 255, 255, 0.18);
    }

[data-theme="dark"] .sort-menu-icon:hover
    {
    background-color: rgba(255, 255, 255, 0.32);
    }

/* Highlighted state for the <th> itself when the user has clicked the label */
th.sort-col-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important;
    color: var(--column-highlight-fg-color, #1f2937) !important;
    }

[data-theme="dark"] th.sort-col-highlighted
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Time Sort Dropdown Styles */
/*---------------------------------------------------------------------------------------------*/
.time-header
    {
    position: relative;
    }

.time-sort-dropdown
    {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 2px solid var(--custom-header-bg-color, #7dd3fc);
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 10001;
    min-width: 200px;
    display: none;
    white-space: nowrap;
    overflow: visible;
    }

th.time-header.open .time-sort-dropdown,
thead th.time-header.open .time-sort-dropdown
    {
    display: block !important;
    }

.dropdown-item
    {
    padding: 4px 12px;
    cursor: pointer;
    font-size: 12px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    text-transform: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-align: left;
    }

.dropdown-item:last-child
    {
    border-bottom: none;
    }

.dropdown-item:hover
    {
    background-color: #f3f4f6;
    }

.dropdown-item:active
    {
    background-color: #e5e7eb;
    }

/* Dropdown submenu styles for secondary sort */
.dropdown-submenu
    {
    position: relative;
    }

.dropdown-submenu-trigger
    {
    padding: 2px 12px 2px 20px !important;
    font-style: italic;
    color: #6b7280;
    font-size: 11px;
    text-align: center !important;
    }

.dropdown-submenu-content
    {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: white;
    border: 2px solid var(--custom-header-bg-color, #7dd3fc);
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    z-index: 10002;
    }

.dropdown-submenu:hover .dropdown-submenu-content
    {
    display: block;
    }

.dropdown-submenu-content .dropdown-item
    {
    padding: 6px 10px;
    font-size: 11px;
    }

.time-header .time-sort-dropdown
    {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10001;
    }

.time-header.open .time-sort-dropdown
    {
    display: block;
    }

/* Ensure time sort dropdown appears above all group headers */
.time-sort-dropdown,
.time-header .time-sort-dropdown
    {
    z-index: 10001 !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* ROT Sort Dropdown Styles */
/*---------------------------------------------------------------------------------------------*/
.rot-header,
.rot2-header
    {
    position: relative;
    }

.rot-sort-dropdown,
.rot2-sort-dropdown
    {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 2px solid var(--custom-header-bg-color, #7dd3fc);
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 10001;
    min-width: 200px;
    display: none;
    white-space: nowrap;
    overflow: visible;
    }

th.rot-header.open .rot-sort-dropdown,
thead th.rot-header.open .rot-sort-dropdown,
th.rot2-header.open .rot2-sort-dropdown,
thead th.rot2-header.open .rot2-sort-dropdown
    {
    display: block !important;
    }

.rot-header .rot-sort-dropdown,
.rot2-header .rot2-sort-dropdown
    {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10001;
    }

.rot-header.open .rot-sort-dropdown,
.rot2-header.open .rot2-sort-dropdown
    {
    display: block;
    }

/* Ensure ROT sort dropdowns appear above all group headers */
.rot-sort-dropdown,
.rot-header .rot-sort-dropdown,
.rot2-sort-dropdown,
.rot2-header .rot2-sort-dropdown
    {
    z-index: 10001 !important;
    }

/* Lift table container when a ROT header dropdown is open */
.table-container:has(.rot-header.open),
.table-container:has(.rot2-header.open)
    {
    z-index: 100;
    }

/* Weather Report Custom League Dropdown Styles */
.weather-report-fallback-window .weather-league-selected
    {
    transition: all 0.2s ease;
    cursor: pointer;
    }

.weather-report-fallback-window .weather-league-selected:hover
    {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    transform: scale(1.02);
    }

.weather-report-fallback-window .weather-league-option:hover
    {
    background-color: #f0f0f0 !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Hierarchical League Order Modal Styles */
/*---------------------------------------------------------------------------------------------*/

/* Level-based indentation and styling */
.league-order-table tr.level-0
    {
    background-color: var(--bg-secondary);
    border-left: 3px solid var(--accent-primary);
    }

.league-order-table tr.level-1
    {
    background-color: var(--bg-tertiary);
    border-left: 3px solid var(--accent-secondary);
    }

.league-order-table tr.level-2
    {
    background-color: var(--bg-quaternary);
    border-left: 3px solid var(--info-color);
    }

.league-order-table tr.level-3
    {
    background-color: var(--bg-primary);
    border-left: 3px solid var(--warning-color);
    }

/* Parent nodes with children */
.league-order-table tr.has-children
    {
    font-weight: 600;
    }

.league-order-table tr.has-children .drag-handle
    {
    color: var(--accent-primary);
    }

/* Child nodes */
.league-order-table tr.is-child
    {
    font-style: italic;
    }

/* Descendant highlighting during drag */
.league-order-table tr.descendant-highlight
    {
    background-color: var(--info-bg) !important;
    border: 2px dashed var(--info-color);
    }

/* Drag and drop visual feedback */
.league-order-table tr.dragging
    {
    opacity: 0.5;
    background-color: var(--accent-primary) !important;
    color: white;
    }

.league-order-table tr.drag-over
    {
    border-top: 3px solid var(--accent-primary);
    }

/* Dark mode adjustments */
[data-theme="dark"] .league-order-table tr.level-0
    {
    background-color: var(--bg-secondary);
    }

[data-theme="dark"] .league-order-table tr.level-1
    {
    background-color: var(--bg-tertiary);
    }

[data-theme="dark"] .league-order-table tr.level-2
    {
    background-color: var(--bg-quaternary);
    }

[data-theme="dark"] .league-order-table tr.level-3
    {
    background-color: var(--bg-primary);
    }

[data-theme="dark"] .league-order-table tr.descendant-highlight
    {
    background-color: var(--info-bg) !important;
    }

/* Dark mode: Fix white background on league-order-table (used by sportsbook modals) */
[data-theme="dark"] .league-order-table
    {
    background: var(--bg-primary) !important; /* Dark background instead of white */
    }

[data-theme="dark"] .league-order-table thead
    {
    background: var(--bg-secondary) !important;
    }

[data-theme="dark"] .league-order-table th
    {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-secondary) !important;
    border-right: 1px solid var(--border-secondary) !important;
    }

[data-theme="dark"] .league-order-table tr
    {
    background-color: var(--bg-primary) !important;
    }

[data-theme="dark"] .league-order-table td
    {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-secondary) !important;
    border-right: 1px solid var(--border-secondary) !important;
    }

[data-theme="dark"] .league-order-table tr:hover
    {
    background-color: var(--bg-tertiary) !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Filter Mode Selection (Include/Exclude) */
/*---------------------------------------------------------------------------------------------*/

.filter-mode-container
    {
    display: flex;
    gap: 20px;
    padding: 15px;
    background-color: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    }

.filter-mode-column
    {
    flex: 1;
    }

.filter-mode-radio
    {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 8px;
    }

.filter-mode-radio input[type="radio"]
    {
    width: 18px;
    height: 18px;
    cursor: pointer;
    }

.filter-mode-title
    {
    font-weight: 600;
    font-size: 16px;
    color: #1f2937;
    }

.filter-mode-description
    {
    margin: 0;
    padding-left: 26px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    }

[data-theme="dark"] .filter-mode-container
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-secondary);
    }

[data-theme="dark"] .filter-mode-title
    {
    color: var(--text-primary);
    }

[data-theme="dark"] .filter-mode-description
    {
    color: var(--text-secondary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Dual Column League Lists */
/*---------------------------------------------------------------------------------------------*/

.dual-league-container
    {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    }

.league-column
    {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

.league-column.inactive
    {
    opacity: 0.4;
    pointer-events: none;
    }

.league-column.inactive .league-list-container
    {
    background-color: #f3f4f6;
    }

.league-column.inactive .league-order-table
    {
    background-color: #f3f4f6;
    }

.league-column.inactive input[type="checkbox"]
    {
    cursor: not-allowed;
    }

[data-theme="dark"] .league-column.inactive .league-list-container
    {
    background-color: var(--bg-quaternary);
    }

[data-theme="dark"] .league-column.inactive .league-order-table
    {
    background-color: var(--bg-quaternary) !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* League Order Modal — flex layout so panels grow with modal height */
/*---------------------------------------------------------------------------------------------*/

#league-order-modal .modal-body
    {
    overflow: hidden;
    }

.filter-right-controls
    {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    }

#league-order-modal #leagues-section,
#league-order-modal #events-section
    {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    }

#league-order-modal #leagues-section:not(.hidden),
#league-order-modal #events-section:not(.hidden)
    {
    display: flex;
    flex-direction: column;
    }

/*---------------------------------------------------------------------------------------------*/
/* Section Toggle Headers (Leagues / Events collapsible sections) */
/*---------------------------------------------------------------------------------------------*/

.section-toggle-headers
    {
    display: flex;
    gap: 0;
    }

.section-toggle-header
    {
    flex: 1;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #374151;
    background-color: #1f2937;
    color: #9ca3af;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
    }

.section-toggle-header:first-child
    {
    border-radius: 6px 0 0 6px;
    }

.section-toggle-header:last-child
    {
    border-radius: 0 6px 6px 0;
    }

.section-toggle-header:hover
    {
    background-color: #374151;
    color: #d1d5db;
    }

.section-toggle-header.active
    {
    background-color: #1e40af;
    color: #ffffff;
    border-color: #1e40af;
    }

.section-toggle-arrow
    {
    margin-right: 6px;
    font-size: 11px;
    }

.section-toggle-count
    {
    font-weight: normal;
    font-size: 12px;
    color: #93c5fd;
    margin-left: 4px;
    }

.section-toggle-header.active .section-toggle-count
    {
    color: #bfdbfe;
    }

/* Events section table container */
.events-list-container
    {
    height: 500px;
    }

/* Event group header rows */
.event-group-header-row td
    {
    font-weight: bold;
    padding: 6px 10px !important;
    background-color: #f3f4f6;
    text-align: left;
    }

[data-theme="dark"] .event-group-header-row td
    {
    background-color: var(--bg-tertiary);
    }

/* Event rows */
.event-row td
    {
    padding: 4px 10px !important;
    text-align: left;
    }

.event-row .event-name
    {
    flex: 1;
    }

.event-row .remove-event-button
    {
    background: #dc2626;
    color: white;
    border: none;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    margin-right: 10px;
    }

.event-row .remove-event-button:hover
    {
    background: #b91c1c;
    }

.event-group-header-row .remove-all-events-button
    {
    background: #dc2626;
    color: white;
    border: none;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    float: left;
    margin-right: 8px;
    }

.event-group-header-row .remove-all-events-button:hover
    {
    background: #b91c1c;
    }

.no-events-message
    {
    color: #6b7280;
    font-style: italic;
    padding: 20px;
    text-align: center;
    }

/*---------------------------------------------------------------------------------------------*/
/* Flat Two-Column Styles for League Order Modal */
/*---------------------------------------------------------------------------------------------*/

/* League rows - flat two-column layout (Sport | League) */
.league-row
    {
    transition: background-color 0.15s ease;
    }

.league-row:hover
    {
    background-color: #f3f4f6;
    }

[data-theme="dark"] .league-row:hover
    {
    background-color: var(--bg-tertiary);
    }

.league-row td
    {
    padding: 2px 4px !important;
    text-align: left !important;
    vertical-align: middle !important;
    }

.league-row td.sport-cell
    {
    width: 35%;
    white-space: nowrap;
    }

.league-row td.league-cell
    {
    width: 65%;
    }

.league-row .sport-name
    {
    font-weight: bold;
    }

/* Fixed-width slot in the sport cell holding the Show All / Hide All button.  Empty on
   non-first-of-sport rows; rendering it on every row keeps the sport-name aligned vertically. */
.league-row .all-btn-slot
    {
    display: inline-flex;
    align-items: center;
    width: 70px;
    flex-shrink: 0;
    }

/* Drag handle styling */
.drag-handle
    {
    cursor: move;
    color: #9ca3af;
    font-size: 16px;
    padding: 0 4px;
    display: inline-block;
    user-select: none;
    }

.drag-handle:hover
    {
    color: #6b7280;
    }

/* Add/Remove button styling */
.league-action-btn
    {
    padding: 2px 8px;
    font-size: 11px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background-color: white;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    }

.league-action-btn.add-btn
    {
    color: #059669;
    border-color: #059669;
    }

.league-action-btn.add-btn:hover
    {
    background-color: #059669;
    color: white;
    }

.league-action-btn.remove-btn
    {
    color: #dc2626;
    border-color: #dc2626;
    }

.league-action-btn.remove-btn:hover
    {
    background-color: #dc2626;
    color: white;
    }

[data-theme="dark"] .league-action-btn
    {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    }

/* Row content wrapper */
.league-row-content
    {
    display: flex;
    align-items: center;
    gap: 8px;
    }

.sport-row-content
    {
    display: flex;
    align-items: center;
    gap: 8px;
    }

/* Dragging state - applies to every row in the moving group (sport block or single league) */
.league-row.dragging
    {
    opacity: 0.5;
    background-color: #e0e7ff;
    }

[data-theme="dark"] .league-row.dragging
    {
    background-color: #3730a3;
    }

/* Disabled "Order by date" checkbox / label styling */
.filter-checkbox.disabled,
label.filter-checkbox.disabled
    {
    opacity: 0.5;
    cursor: not-allowed;
    }

.filter-checkbox.disabled input,
.filter-checkbox.disabled span
    {
    cursor: not-allowed;
    }

/*---------------------------------------------------------------------------------------------*/
/* League Ordering Options Radio Buttons */
/*---------------------------------------------------------------------------------------------*/

.ordering-options
    {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    }

.ordering-options label
    {
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    }

.ordering-options input[type="radio"]
    {
    margin: 0;
    cursor: pointer;
    }

.ordering-options input[type="radio"]:checked + span
    {
    font-weight: 600;
    color: var(--accent-primary);
    }

/* Dark mode adjustments for ordering options */
[data-theme="dark"] .ordering-options label
    {
    color: var(--text-primary);
    }

[data-theme="dark"] .ordering-options input[type="radio"]:checked + span
    {
    color: var(--accent-primary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Auto-Connect Checkbox Styles */
/*---------------------------------------------------------------------------------------------*/
#auto-connect-checkbox
    {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-right: 8px;
    flex-shrink: 0;
    margin-top: 2px;
    }

tr.score-final td.sticky-column .score-value.odds-old strong
    {
    color: #000 !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Weather Report Fallback Window Styles */
/*---------------------------------------------------------------------------------------------*/

.weather-report-fallback-window
    {
    position: fixed;
    z-index: 1000;
    background-color: var(--modal-bg, #fefefe);
    border: 1px solid var(--modal-border, #888);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-width: 400px;
    min-height: 300px;
    resize: both;
    overflow: auto;
    }

.weather-report-fallback-window.hidden
    {
    display: none;
    }

.weather-report-fallback-window .weather-report-header
    {
    background-color: var(--modal-header-bg, #f8f9fa);
    padding: 15px 20px;
    border-bottom: 1px solid var(--modal-border-color, #dee2e6);
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    }

.weather-report-fallback-window .weather-report-header h3
    {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
    }

.weather-report-fallback-window .weather-report-close
    {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    transition: color 0.2s ease;
    }

.weather-report-fallback-window .weather-report-close:hover
    {
    color: var(--text-primary);
    }

.weather-report-fallback-window .weather-report-body
    {
    padding: 20px;
    flex: 1;
    overflow: auto;
    background-color: var(--modal-body-bg, white);
    }

.weather-report-fallback-window .weather-report-loading,
.weather-report-fallback-window .weather-report-error
    {
    text-align: center;
    color: var(--text-secondary);
    }

.weather-report-fallback-window .weather-report-error
    {
    color: var(--error-color, #dc3545);
    }

.weather-report-fallback-window .weather-report-content
    {
    background-color: var(--modal-body-bg, white);
    }

.weather-report-fallback-window .weather-report-text
    {
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    }

/* Dark mode adjustments for weather report window */
[data-theme="dark"] .weather-report-fallback-window
    {
    background-color: var(--modal-bg, #2d3748);
    border-color: var(--modal-border, #4a5568);
    }

[data-theme="dark"] .weather-report-fallback-window .weather-report-header
    {
    background-color: var(--modal-header-bg, #4a5568);
    border-bottom-color: var(--modal-border-color, #718096);
    }

[data-theme="dark"] .weather-report-fallback-window .weather-report-body
    {
    background-color: var(--modal-body-bg, #2d3748);
    }

/*---------------------------------------------------------------------------------------------*/
/* Settings Modal Styles */
/*---------------------------------------------------------------------------------------------*/

.settings-modal .modal-content
    {
    background-color: var(--modal-bg, #fefefe);
    margin: 0 !important;
    padding: 0;
    border: 1px solid var(--modal-border, #888);
    width: 500px;
    min-width: 400px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

.settings-modal .modal-header
    {
    background-color: var(--modal-header-bg, #f8f9fa);
    padding: 2px 2px 2px 10px;
    border-bottom: 1px solid var(--modal-border-color, #dee2e6);
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

.settings-modal .modal-header h3
    {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
    }

.settings-modal .modal-body
    {
    padding: 20px;
    background-color: var(--modal-body-bg, white);
    overflow-y: auto;
    flex: 0 1 auto;
    }

.settings-modal .settings-section
    {
    margin-bottom: 0;
    border-top: 1px solid var(--border-color, #dee2e6);
    padding-top: 15px;
    }

.settings-modal .settings-section:first-child
    {
    border-top: none;
    padding-top: 0;
    }

.settings-modal .settings-section:not(:last-child)
    {
    margin-bottom: 20px;
    }

.settings-modal .settings-section h4
    {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--text-primary);
    }

/* Indent the option rows that sit below a section header so they read as
   children of the header rather than as siblings of it. */
.appearance-modal .settings-section h4 ~ .setting-item
    {
    padding-left: 20px;
    }

.settings-modal .setting-item
    {
    margin-bottom: 15px;
    }

.settings-modal .setting-item:last-child
    {
    margin-bottom: 0;
    }

.settings-modal .setting-label
    {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    }

.table-layout-modal .soccer-radio-row
    {
    padding-left: 20px;
    }

.settings-modal .setting-checkbox
    {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    }

.settings-modal .setting-checkbox input[type="checkbox"]
    {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    }

.settings-modal .setting-checkbox span
    {
    line-height: 1.4;
    }

.settings-modal .setting-radio
    {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 6px;
    }

.settings-modal .setting-radio input[type="radio"]
    {
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0;
    }

.settings-modal .setting-radio span
    {
    line-height: 1.4;
    }

.settings-modal .highlighting-mode-options
    {
    display: flex;
    flex-direction: column;
    }

.settings-modal .modal-footer
    {
    background-color: var(--modal-footer-bg, #f8f9fa);
    padding: 2px;
    border-top: 1px solid var(--modal-border-color, #dee2e6);
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    }

/* Dark mode adjustments for settings modal */
[data-theme="dark"] .settings-modal .modal-content
    {
    background-color: var(--modal-bg, #2d3748);
    border-color: var(--modal-border, #4a5568);
    }

[data-theme="dark"] .settings-modal .modal-header
    {
    background-color: var(--modal-header-bg, #4a5568);
    border-bottom-color: var(--modal-border-color, #718096);
    }

[data-theme="dark"] .settings-modal .modal-body
    {
    background-color: var(--modal-body-bg, #2d3748);
    }

[data-theme="dark"] .settings-modal .modal-footer
    {
    background-color: var(--modal-footer-bg, #4a5568);
    border-top-color: var(--modal-border-color, #718096);
    }

/* ================================================================================================
   Highlighting Modal Styles
   ================================================================================================ */

.highlighting-modal-content
    {
    min-height: 470px;
    }

.highlighting-modal h4
    {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    }

.highlighting-modal .highlighting-section
    {
    border: 1px solid var(--border-color, #4a5568);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border 0.2s ease, background-color 0.2s ease;
    }

.highlighting-modal .highlighting-section:last-child
    {
    margin-bottom: 0;
    }

.highlighting-modal .setting-item
    {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    }

.highlighting-modal .setting-label
    {
    min-width: 140px;
    font-size: 14px;
    }

.highlighting-modal .custom-color-row
    {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    }

.highlighting-modal .custom-color-label
    {
    min-width: 140px;
    font-size: 14px;
    }

.neutral-label
    {
    font-weight: 600;
    color: var(--text-secondary);
    }

/* Neutral Location Row Styles */
.neutral-location-row
    {
    background-color: #f8f9fa;
    }

.neutral-location-row td
    {
    box-shadow: inset 0 2px 0 0 var(--custom-header-bg-color, #7dd3fc),
                inset 0 -2px 0 0 var(--custom-header-bg-color, #7dd3fc);
    }

.neutral-location-cell
    {
    padding: 2px 20px 0;
    border-bottom: none;
    text-align: left;
    vertical-align: middle;
    position: sticky;
    left: 0;
    z-index: 5;
    }

.neutral-location-display
    {
    display: grid;
    grid-template-columns: calc( 40px * var(--zoom-factor))
                           calc(360px * var(--zoom-factor));
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: bold;
    }

.neutral-icon
    {
    font-size: calc(14px * var(--zoom-factor));
    justify-self: center;
    color: var(--neutral-icon-color);
    }

/* Neutral Icon in Time Column */
.time-icon.neutral-icon
    {
    color: var(--neutral-icon-color);
    cursor: pointer;
    transition: color 0.2s ease;
    font-weight: bold;
    }

.time-icon.neutral-icon:hover
    {
    color: var(--neutral-icon-hover-color);
    }

.neutral-text
    {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    }

/* Weather Submenu Styles */
.weather-menu-item
    {
    position: relative;
    }

.weather-submenu
    {
    position: absolute;
    top: 0;
    right: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 120px;
    }

.weather-submenu.hidden
    {
    display: none;
    }

.weather-submenu-item
    {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color 0.2s ease;
    }

.weather-submenu-item:last-child
    {
    border-bottom: none;
    }

.weather-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/* Dark mode overrides for weather submenu */
[data-theme="dark"] .weather-submenu
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .weather-submenu-item
    {
    color: var(--text-primary);
    border-bottom-color: var(--border-secondary);
    }

[data-theme="dark"] .weather-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Odds Submenu Styles */
/*---------------------------------------------------------------------------------------------*/
.odds-menu-item
    {
    position: relative;
    }

.odds-submenu
    {
    position: absolute;
    top: 0;
    right: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 140px;
    }

.odds-submenu.hidden
    {
    display: none;
    }

.odds-submenu-item
    {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color 0.2s ease;
    white-space: nowrap;
    }

.odds-submenu-item:last-child
    {
    border-bottom: none;
    }

.odds-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/* Dark mode overrides for odds submenu */
[data-theme="dark"] .odds-submenu
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .odds-submenu-item
    {
    color: var(--text-primary);
    border-bottom-color: var(--border-secondary);
    }

[data-theme="dark"] .odds-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Injury Submenu Styles */
/*---------------------------------------------------------------------------------------------*/
.injury-menu-item
    {
    position: relative;
    }

.injury-submenu
    {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 120px;
    max-height: 400px;
    overflow-y: auto;
    }

.injury-submenu.hidden
    {
    display: none;
    }

.injury-submenu-item
    {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color 0.2s ease;
    white-space: nowrap;
    }

.injury-submenu-item:last-child
    {
    border-bottom: none;
    }

.injury-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Injury Report Table Styles */
/*---------------------------------------------------------------------------------------------*/
.injury-report-text
    {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    }

.injury-report-text h1
    {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0 10px 0;
    color: #333;
    }

.injury-report-text h1:first-child
    {
    margin-top: 0;
    }

.injury-report-text table
    {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-family: inherit;
    }

.injury-report-text th,
.injury-report-text td
    {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 14px;
    }

.injury-report-text th
    {
    background-color: #f2f2f2;
    font-weight: bold;
    }

/* Dark mode overrides for injury submenu */
[data-theme="dark"] .injury-submenu
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .injury-submenu-item
    {
    color: var(--text-primary);
    border-bottom-color: var(--border-secondary);
    }

[data-theme="dark"] .injury-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Alerts Submenu Styles */
/*---------------------------------------------------------------------------------------------*/
.alerts-menu-item
    {
    position: relative;
    }

.alerts-submenu
    {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    }

.alerts-submenu.hidden
    {
    display: none;
    }

.alerts-submenu-item
    {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color 0.2s ease;
    white-space: nowrap;
    }

.alerts-submenu-item:last-child
    {
    border-bottom: none;
    }

.alerts-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/* Dark mode overrides for alerts submenu */
[data-theme="dark"] .alerts-submenu
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .alerts-submenu-item
    {
    color: var(--text-primary);
    border-bottom-color: var(--border-secondary);
    }

[data-theme="dark"] .alerts-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Settings Submenu Styles */
/*---------------------------------------------------------------------------------------------*/
.settings-menu-item
    {
    position: relative;
    }

.settings-submenu
    {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 200px;
    }

.settings-submenu.hidden
    {
    display: none;
    }

.settings-submenu-item
    {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color 0.2s ease;
    white-space: nowrap;
    }

.settings-submenu-item:last-child
    {
    border-bottom: none;
    }

.settings-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/* Dark mode overrides for settings submenu */
[data-theme="dark"] .settings-submenu
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .settings-submenu-item
    {
    color: var(--text-primary);
    border-bottom-color: var(--border-secondary);
    }

[data-theme="dark"] .settings-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/* General flyout: the parent row is itself the hover host for a nested submenu.
   The caret sits on the left because the nested submenu opens to the left. */
.settings-general-flyout-item
    {
    position: relative;
    }

.settings-submenu-caret
    {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1;
    }

.settings-general-submenu
    {
    top: 0;
    right: 100%;
    margin-right: 0;
    }

/*---------------------------------------------------------------------------------------------*/
/* Injury Alerts Modal Styles — Single Scrollable Container */
/*---------------------------------------------------------------------------------------------*/
.injury-alerts-modal
    {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #ffffff;
    border: 2px solid #dc3545;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 450px;
    min-width: 400px;
    max-width: 600px;
    max-height: 80vh;
    display: none;
    flex-direction: column;
    font-family: Arial, sans-serif;
    overflow: hidden;
    }

.injury-alerts-modal.hidden
    {
    display: none !important;
    }

.injury-alerts-header
    {
    background-color: #dc3545;
    color: white;
    padding: 2px 12px;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    }

.injury-alerts-header h3
    {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    }

.injury-alerts-count-badge
    {
    font-size: 14px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.85);
    }

.injury-alerts-close
    {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    }

.injury-alerts-close:hover
    {
    background-color: rgba(255, 255, 255, 0.2);
    }

.injury-alerts-close-all
    {
    font-size: calc(11px * var(--zoom-factor));
    font-weight: bold;
    cursor: pointer;
    color: white;
    line-height: 1;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    }

.injury-alerts-close-all:hover
    {
    background-color: rgba(255, 255, 255, 0.2);
    }

/* Scrollable list of alert cards */
.injury-alerts-list
    {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    }

/* Individual alert card within the list */
.injury-alert-card
    {
    border: 2px solid #dc3545;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    }

.injury-alert-card-header
    {
    background-color: #dc3545;
    color: #ffffff;
    padding: 3px 8px;
    font-size: calc(12px * var(--zoom-factor));
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

.injury-alert-card-close-all
    {
    font-size: calc(11px * var(--zoom-factor));
    font-weight: bold;
    cursor: pointer;
    color: white;
    line-height: 1;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 3px;
    white-space: nowrap;
    }

.injury-alert-card-close-all:hover
    {
    background-color: rgba(255, 255, 255, 0.2);
    }

.injury-alert-card-close
    {
    font-size: calc(16px * var(--zoom-factor));
    font-weight: bold;
    cursor: pointer;
    color: #ffffff;
    line-height: 1;
    padding: 0 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    }

.injury-alert-card-close:hover
    {
    background-color: rgba(0, 0, 0, 0.1);
    }

.injury-alert-card-body
    {
    padding: 4px 6px;
    }

/* MyNote alert card — reuses .message-card chrome from the AdminTool note card and
   only overrides the header bar colour to green so MyNote alerts read at a glance
   as organisation-scoped (vs. the default blue of regular notes). */
.mynote-alert-card .message-card-header
    {
    background-color: #28a745;
    }

/* Existing player / summary styles (kept) */
.injury-alerts-players-container
    {
    display: flex;
    flex-direction: column;
    gap: 2px;
    }

.injury-alerts-player-item
    {
    padding: 2px 6px;
    margin-bottom: 2px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    }

.injury-alerts-first-line
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1px;
    }

.injury-alerts-league-team
    {
    font-weight: bold;
    color: #495057;
    font-size: calc(14px * var(--zoom-factor));
    }

.injury-alerts-player-name
    {
    font-weight: bold;
    color: #212529;
    font-size: calc(14px * var(--zoom-factor));
    }

.injury-alerts-context-menu
    {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: none;
    min-width: 180px;
    white-space: nowrap;
    }

.context-menu-item
    {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
    color: #333;
    background-color: #ffffff;
    }

.context-menu-item:hover
    {
    background-color: #f8f9fa;
    }

.context-menu-item:last-child
    {
    border-bottom: none;
    }

.injury-alerts-summary-link
    {
    color: #dc3545;
    font-size: calc(12px * var(--zoom-factor));
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
    }

.injury-alerts-summary-link:hover
    {
    color: #b02a37;
    }

.injury-alerts-no-data
    {
    text-align: center;
    padding: 20px;
    color: #6c757d;
    font-style: italic;
    }

/* Dark mode styles for injury alerts */
[data-theme="dark"] .injury-alerts-modal
    {
    background-color: var(--bg-secondary);
    border-color: #dc3545;
    }

[data-theme="dark"] .injury-alerts-list
    {
    background-color: var(--bg-secondary);
    }

[data-theme="dark"] .injury-alert-card
    {
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .injury-alert-card-header
    {
    background-color: #dc3545;
    color: #ffffff;
    }

[data-theme="dark"] .injury-alert-card-close
    {
    color: #f8d7da;
    }

[data-theme="dark"] .injury-alert-card-body
    {
    background-color: var(--bg-tertiary);
    }

[data-theme="dark"] .mynote-alert-card .message-card-header
    {
    background-color: #28a745;
    color: #ffffff;
    }

[data-theme="dark"] .injury-alerts-player-item
    {
    border-color: var(--border-primary);
    }

[data-theme="dark"] .injury-alerts-league-team
    {
    color: var(--text-primary);
    }

[data-theme="dark"] .injury-alerts-player-name
    {
    color: var(--text-primary);
    }

[data-theme="dark"] .injury-alerts-summary-link
    {
    color: #dc3545;
    }

[data-theme="dark"] .injury-alerts-summary-link:hover
    {
    color: #b02a37;
    }

[data-theme="dark"] .injury-alerts-no-data
    {
    color: var(--text-tertiary);
    }

[data-theme="dark"] .injury-alerts-context-menu
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .context-menu-item
    {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
    }

[data-theme="dark"] .context-menu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Halftime Alert Windows */
/*---------------------------------------------------------------------------------------------*/
#halftime-alerts-container
    {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse; /* Newest on top */
    gap: 10px;
    max-width: 400px;
    }

.halftime-alert
    {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    animation: slideIn 0.3s ease-out;
    }

.halftime-alert-content
    {
    flex: 1;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    }

.halftime-alert-close
    {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    line-height: 1;
    transition: color 0.2s;
    }

.halftime-alert-close:hover
    {
    color: var(--text-primary);
    }

@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;
        }
    }

/*---------------------------------------------------------------------------------------------*/
/* Halftime Table Headers */
/*---------------------------------------------------------------------------------------------*/
.halftime-header
    {
    cursor: pointer !important;
    -webkit-user-select: none;
    user-select: none;
    }

.halftime-section
    {
    margin-top: 0 !important;
    padding-top: 0 !important;
    }

.halftime-hidden
    {
    display: none !important;
    }

/* Main "HALFTIME GAMES" header - Yellow background, black text */
h1.group-header.halftime-main-header
    {
    background-color: #FFD700 !important; /* Yellow */
    color: #000000 !important; /* Black */
    }

/* Blue group headers - Black on soft blue background */
h1.group-header.blue-header
    {
	background-color: var(--custom-header-bg-color, #0870F7) !important;
	color: var(--custom-header-fg-color, #ffffff) !important;
    }

/* Inverse group headers - Light mode: White text on Black background */
html h1.group-header.inverse-header
    {
    background-color: #000000 !important; /* Black background */
    color: #ffffff !important; /* White text */
    }

/* Dark mode: Inverse group headers - Black text on White background */
html[data-theme="dark"] h1.group-header.inverse-header
    {
    background-color: #ffffff !important; /* White background */
    color: #000000 !important; /* Black text */
    }

/* ========================================
   COLUMN GROUP BORDER COLORS
   Match border color to group header background
   ======================================== */

/* Blue/Custom header style - use custom header background color for borders */
.odds-table:not(.inverse-table)
    {
    --column-group-border-color: var(--custom-header-bg-color, #7dd3fc);
    }

/* Inverse header style - Light mode: Black borders to match black header */
html .inverse-table
    {
    --column-group-border-color: #000000;
    }

/* Inverse header style - Dark mode: White borders to match white header */
html[data-theme="dark"] .inverse-table
    {
    --column-group-border-color: #ffffff;
    }

/* Inverse table column headers - Light mode: White background with Black text */
.inverse-table thead tr,
.inverse-table thead th,
.inverse-table .sticky-header th
    {
    background-color: #ffffff !important; /* White background */
    color: #000000 !important; /* Black text */
    }

/* Inverse table column headers - Dark mode: Black background with White text */
html[data-theme="dark"] .inverse-table thead tr,
html[data-theme="dark"] .inverse-table thead th,
html[data-theme="dark"] .inverse-table .sticky-header th
    {
    background-color: #000000 !important; /* Black background */
    color: #ffffff !important; /* White text */
    }

/* Halftime subgroup blocks now render as group-like header + table sections */
.halftime-subgroups
    {
    display: block;
    }



.halftime-subgroup-table-container
    {
    margin-top: 0 !important;
    }

.collapse-arrow
    {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.7em;
    cursor: pointer;
    padding: 0 4px;
    }

/* ============================================================================
   LINE HISTORY MODAL SPECIFIC STYLES
   These styles override all global table styles for the line history modal
   ============================================================================ */

/* Line History Modal - Force override all tbody backgrounds */
.line-history-content tbody,
.line-history-content tbody.row-odd,
.line-history-content tbody.row-even
    {
    background-color: transparent !important;
    }

/* Line History Modal - Force override all tr backgrounds */
.line-history-content tr,
.line-history-content tbody > tr,
.line-history-content tbody.row-odd > tr,
.line-history-content tbody.row-even > tr
    {
    background-color: transparent !important;
    }

/* Line History Modal - Light mode td styling */
:root .line-history-content td
    {
    background-color: transparent !important;
    color: #1f2937 !important;
    }

/* Line History Modal - Dark mode td styling */
[data-theme="dark"] .line-history-content td
    {
    background-color: transparent !important;
    color: #e5e7eb !important;
    }

/* Line History Modal - Dark mode table headers */
[data-theme="dark"] .line-history-content th
    {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
    }

/* Line History Modal - Dark mode table borders */
[data-theme="dark"] .line-history-content table,
[data-theme="dark"] .line-history-content td,
[data-theme="dark"] .line-history-content th
    {
    border-color: #4b5563 !important;
    }

/* Line History Modal - Hover styles for light mode */
:root .line-history-content tr:hover
    {
    background-color: #e2e8f0 !important;
    }

:root .line-history-content tr:hover td
    {
    background-color: #e2e8f0 !important;
    color: #1f2937 !important;
    }

/* Line History Modal - Hover styles for dark mode */
[data-theme="dark"] .line-history-content tr:hover
    {
    background-color: #475569 !important; /* Medium slate gray */
    }

[data-theme="dark"] .line-history-content tr:hover td
    {
    background-color: #475569 !important; /* Medium slate gray */
    color: #f1f5f9 !important; /* Light gray text */
    }


/* Line History Modal - Dark mode container and header styling */
[data-theme="dark"] .line-history-modal
    {
    background-color: #020617 !important; /* Very dark slate */
    border-color: #3b82f6 !important;
    color: #e5e7eb !important;
    }

/* Line History Modal - Dark mode body area */
[data-theme="dark"] .line-history-modal .line-history-body
    {
    background-color: #020617 !important;
    color: #e5e7eb !important;
    }

/* Line History Modal - Dark mode header bar */
[data-theme="dark"] .line-history-modal .line-history-header
    {
    background-color: #0f172a !important;
    color: #f9fafb !important;
    border-bottom: 1px solid #4b5563 !important;
    }

/* Line History Modal - Dark mode header bar */
[data-theme="dark"] .line-history-modal .line-history-header .blue_header
    {
    background-color: #3b82f6 !important;
    color: white !important;
    border-bottom: 1px solid #4b5563 !important;
    }

/* Line History Modal - Dark mode header text and close button */
[data-theme="dark"] .line-history-modal .line-history-header h3,
[data-theme="dark"] .line-history-modal .line-history-close
    {
    color: #f9fafb !important;
    }

/* Line History Modal - Dark mode context menu */
[data-theme="dark"] .line-history-modal .line-history-context-menu
    {
    background-color: #020617 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
    }

/* Line History Modal - Dark mode container and section titles */
[data-theme="dark"] .line-history-content .line-history-container,
[data-theme="dark"] .line-history-content .line-history-title,
[data-theme="dark"] .line-history-content .line-history-league,
[data-theme="dark"] .line-history-content .line-history-section-title
    {
    color: #e5e7eb !important;
    }

/* Line History Modal - Dark mode game info table */
[data-theme="dark"] .line-history-content .line-history-game-info-table
    {
    background-color: #1f2937 !important;
    }

[data-theme="dark"] .line-history-content .line-history-game-info-table td
    {
    color: #e5e7eb !important;
    }

[data-theme="dark"] .line-history-content .line-history-game-info-table tr:hover
    {
    background-color: #374151 !important;
    }

[data-theme="dark"] .line-history-content .line-history-game-info-table tr:hover td
    {
    color: #f9fafb !important;
    }
/* Line & Score History Modal - Sticky inner header (league name + game info table) */
.line-history-content .line-history-header,
.score-history-content .score-history-header
    {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
    }

[data-theme="dark"] .line-history-content .line-history-header,
[data-theme="dark"] .score-history-content .score-history-header
    {
    background-color: #020617 !important;
    }

/* Line History Modal - Opener reset row highlight (yellow background, black text) */
.line-history-content tr.line-history-opener-row td,
.line-history-content tr.line-history-opener-reset td
    {
    background-color: #fbbf24 !important;
    color: #000000 !important;
    }

.line-history-content tr.line-history-opener-row:hover td,
.line-history-content tr.line-history-opener-reset:hover td
    {
    background-color: #f59e0b !important;
    color: #000000 !important;
    }

/* Dark mode - opener rows stay yellow for maximum visibility */
[data-theme="dark"] .line-history-content tr.line-history-opener-row td,
[data-theme="dark"] .line-history-content tr.line-history-opener-reset td
    {
    background-color: #fbbf24 !important;
    color: #000000 !important;
    }

[data-theme="dark"] .line-history-content tr.line-history-opener-row:hover td,
[data-theme="dark"] .line-history-content tr.line-history-opener-reset:hover td
    {
    background-color: #f59e0b !important;
    color: #000000 !important;
    }

/* ==========================================================================
   FIX: Sportsbook Modal Row Highlighting
   ========================================================================== */



/*---------------------------------------------------------------------------------------------*/
/* Event Visibility for NEXT/LIVE/FINAL Displays */
/*---------------------------------------------------------------------------------------------*/
/* Hide events that don't match the current display filter */
.event-tbody.event-hidden
    {
    display: none;
    }

/* Hide group headers when all events in the group are hidden */
.group-header.group-all-hidden
    {
    display: none;
    }

.table-container.group-all-hidden
    {
    display: none;
    }

h2.group-subheader.group-all-hidden
    {
    display: none !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Odds Settings Modal Styles */
/*---------------------------------------------------------------------------------------------*/

/* Light mode panel backgrounds */
.odds-settings-modal .settings-panel
    {
    --panel-bg: #f9f9f9;
    --border-color: #ddd;
    --text-color: inherit;
    --text-muted: #666;
    --stage-row-bg: #e8e8e8;
    --input-bg: white;
    }

/* Dark mode panel backgrounds */
[data-theme="dark"] .odds-settings-modal .settings-panel
    {
    --panel-bg: #374151;
    --border-color: #4b5563;
    --text-color: #f3f4f6;
    --text-muted: #9ca3af;
    --stage-row-bg: #4b5563;
    --input-bg: #1f2937;
    }

/* Odds stage row styles for dark mode */
[data-theme="dark"] .odds-settings-modal .odds-stage-row
    {
    background-color: #4b5563;
    color: #f3f4f6;
    }

[data-theme="dark"] .odds-settings-modal .odds-stage-row input[type="number"]
    {
    background-color: #1f2937;
    color: #f3f4f6;
    border-color: #6b7280;
    }

[data-theme="dark"] .odds-settings-modal .odds-stage-row .remove-stage-button
    {
    background-color: #6b7280;
    color: #f3f4f6;
    border: none;
    }

[data-theme="dark"] .odds-settings-modal .odds-stage-row .remove-stage-button:hover:not(:disabled)
    {
    background-color: #ef4444;
    }

/*---------------------------------------------------------------------------------------------*/
/* DYNAMIC STICKY COLUMNS SUPPORT
 * These rules support dynamically adding sportsbook columns to the sticky section.
 * They use class-based selectors and data attributes instead of hardcoded nth-child selectors.
 */
/*---------------------------------------------------------------------------------------------*/

/* Sticky column positioning - applies to any column marked with sticky-column class */
.odds-table td.sticky-column,
.odds-table th.sticky-column
    {
    position: sticky;
    z-index: 15;
    }

/* Default left positions for the base sticky columns so they stay sticky during
   streaming render before StickyColumnManager.calculateAndApplyPositions() measures
   actual widths and writes inline left/width overrides. Once the JS pass runs, the
   inline `left: Npx !important` written by applyStickyLayoutToCell takes precedence
   over these defaults. The values mirror the --rot-left/--rot2-left/--matchup-left/
   --scores-left calculations from :root but multiplied by --zoom-factor to match
   the *-col-width definitions above. */
.odds-table td.time-column.sticky-column,
.odds-table th.time-column.sticky-column
    {
    left: 0;
    }
.odds-table td.rotation-column.rotation-universal.sticky-column,
.odds-table th.rotation-column.rotation-universal.sticky-column
    {
    left: calc(var(--time-col-width) * var(--zoom-factor));
    }
.odds-table td.rotation-column.rotation-international.sticky-column,
.odds-table th.rotation-column.rotation-international.sticky-column
    {
    left: calc((var(--time-col-width) + var(--rot-col-width)) * var(--zoom-factor));
    }
.odds-table td.matchup-cell.sticky-column,
.odds-table th.matchup-cell.sticky-column
    {
    left: calc((var(--time-col-width) + var(--rot-col-width) + var(--rot2-col-width)) * var(--zoom-factor));
    }
.odds-table td.score-cell.sticky-column,
.odds-table th.score-cell.sticky-column
    {
    left: calc((var(--time-col-width) + var(--rot-col-width) + var(--rot2-col-width) + var(--matchup-col-width)) * var(--zoom-factor));
    }
.odds-table td.score-ext-cell.sticky-column,
.odds-table th.score-ext-cell.sticky-column
    {
    left: calc((var(--time-col-width) + var(--rot-col-width) + var(--rot2-col-width) + var(--matchup-col-width) + var(--scores-col-width)) * var(--zoom-factor));
    }

/* Header cells get higher z-index to stay on top */
.odds-table th.sticky-column
    {
    z-index: 20;
    }

/* Show right border on sticky column groups when child columns are scrolled off */
.odds-table td.sticky-column.show-right-border,
.odds-table th.sticky-column.show-right-border
    {
    border-right: 2px solid var(--column-group-border-color, #3b82f6) !important;
    }

/* Background colors for sticky columns - class-based approach */
/* Default backgrounds for sticky columns in normal rows */
tr.bg-white:not(.score-active):not(.score-final) td.sticky-column
    {
    background-color: #ffffff !important;
    }

tr.bg-gray-50:not(.score-active):not(.score-final) td.sticky-column
    {
    background-color: #f3f4f6 !important;
    }

/* Backgrounds for sticky columns in active or final rows */
/* Odd tbody rows - darker shades */
:root tbody.row-odd > tr.score-active td.sticky-column
    {
    background-color: #166534 !important; /* dark green */
    }

:root tbody.row-odd > tr.score-final td.sticky-column
    {
    background-color: #dc2626 !important; /* red */
    }

/* Even tbody rows - slightly lighter shades for alternating effect */
:root tbody.row-even > tr.score-active td.sticky-column
    {
    background-color: #1a7a3f !important; /* slightly lighter green */
    }

:root tbody.row-even > tr.score-final td.sticky-column
    {
    background-color: #e53e3e !important; /* slightly lighter red */
    }

/* Dark mode: Active and final game states */
/* Dark mode: Odd tbody rows - darker shades */
[data-theme="dark"] :root tbody.row-odd > tr.score-active td.sticky-column
    {
    background-color: #166534 !important; /* dark green - same as light mode */
    }

[data-theme="dark"] :root tbody.row-odd > tr.score-final td.sticky-column
    {
    background-color: #dc2626 !important; /* red - same as light mode */
    }

/* Dark mode: Even tbody rows - slightly lighter shades for alternating effect */
[data-theme="dark"] :root tbody.row-even > tr.score-active td.sticky-column
    {
    background-color: #1a7a3f !important; /* slightly lighter green */
    }

[data-theme="dark"] :root tbody.row-even > tr.score-final td.sticky-column
    {
    background-color: #e53e3e !important; /* slightly lighter red */
    }

/* Highlighted rows with active/final game states */
:root tbody > tr.score-active.highlighted td.sticky-column
    {
    background-color: #9CAF88 !important; /* washed out green */
    color: #000 !important; /* black text for readability */
    }

:root tbody > tr.score-final.highlighted td.sticky-column
    {
    background-color: #F4A4A4 !important; /* washed out red */
    color: #000 !important; /* black text for readability */
    }

/* Style elements within sticky columns on active/final rows */
tr.score-active td.sticky-column *,
tr.score-final td.sticky-column *
    {
    color: white !important;
    }

/* Ensure text is white for active/final games in sticky columns */
tr.score-active td.sticky-column,
tr.score-final td.sticky-column
    {
    color: white !important;
    }

/* Light mode: Make sticky columns match non-sticky columns in normal state */
:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column
    {
    background-color: #ffffff !important; /* Opaque white background */
    }

/* Light mode: Even rows sticky columns get light gray background */
:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column
    {
    background-color: #f8fafc !important; /* Opaque light gray background */
    }

/* Light mode: Override inherit rule for highlighted rows sticky columns - MAXIMUM SPECIFICITY */
/* Must include :not(.score-active):not(.score-final) to match specificity of competing rules */
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/* Light mode: Override for all child elements in highlighted rows sticky columns */
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column *,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column *,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column *
    {
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* STICKY COLUMNS: ROW HOVER (when mouse hovers over a row) - uses HOVER color                */
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Row hover for sticky columns */
:root td.odds-row-hover.sticky-column
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for sticky columns with higher specificity */
:root tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for sticky columns with MAXIMUM specificity for ODD/EVEN rows */
:root .odds-table tbody.row-odd > tr td.sticky-column.odds-row-hover.odds-row-hover,
:root .odds-table tbody.row-even > tr td.sticky-column.odds-row-hover.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for all child elements in sticky columns with MAXIMUM specificity */
:root .odds-table tbody.row-odd > tr td.sticky-column.odds-row-hover.odds-row-hover *,
:root .odds-table tbody.row-even > tr td.sticky-column.odds-row-hover.odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for sticky columns on highlighted rows - ULTRA MAXIMUM specificity */
:root .odds-table tbody.row-odd > tr.highlighted td.sticky-column.odds-row-hover.odds-row-hover.odds-row-hover,
:root .odds-table tbody.row-even > tr.highlighted td.sticky-column.odds-row-hover.odds-row-hover.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color overrides highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for all child elements in sticky columns on highlighted rows */
:root .odds-table tbody.row-odd > tr.highlighted td.sticky-column.odds-row-hover.odds-row-hover.odds-row-hover *,
:root .odds-table tbody.row-even > tr.highlighted td.sticky-column.odds-row-hover.odds-row-hover.odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for sticky ODDS cells with sportsbook-highlighted - ULTRA MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Row hover overrides column highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for all child elements in sticky ODDS cells with sportsbook-highlighted */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for sticky ODDS cells with sportsbook-highlighted on HIGHLIGHTED ROWS - ULTRA ULTRA MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Row hover overrides both row and column highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for all child elements in sticky ODDS cells with sportsbook-highlighted on HIGHLIGHTED ROWS */
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Row hover for sticky columns with MAXIMUM specificity */
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/*---------------------------------------------------------------------------------------------*/
/* STICKY COLUMNS: COLUMN HOVER (when mouse hovers over a column) - uses HOVER color          */
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Column hover for sticky columns */
:root td.odds-column-hover.sticky-column
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for sticky columns with higher specificity */
:root tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for sticky columns with MAXIMUM specificity */
:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for sticky columns ODD rows with MAXIMUM specificity */
:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for sticky columns EVEN rows with MAXIMUM specificity */
:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for all child elements in sticky columns */
:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for sticky ODDS cells - ULTRA HIGH SPECIFICITY */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for all child elements in sticky ODDS cells */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover *,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover *,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for sticky ODDS cells that are sportsbook-highlighted - ULTRA MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-column-hover,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-column-hover,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color overrides column highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for all child elements in sticky ODDS cells that are sportsbook-highlighted */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-column-hover *,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-column-hover *,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for sticky columns on highlighted rows - ULTRA MAXIMUM specificity */
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color overrides highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Light mode: Column hover for all child elements in sticky columns on highlighted rows */
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover *,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover *,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/*---------------------------------------------------------------------------------------------*/
/* STICKY COLUMNS: ROW HIGHLIGHT (when row is clicked to highlight) - uses ROW HIGHLIGHT color*/
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Override inherit rule for odds row highlighting sticky columns */
:root td.odds-row-highlight.sticky-column
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire row */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override inherit rule for odds row highlighting sticky columns with higher specificity */
:root tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-row-highlight
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire row */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override EVEN row background for odds row highlighting sticky columns */
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.odds-row-highlight
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire row */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for odds row highlighting on score-active rows (sticky columns) */
:root tbody > tr.score-active td.sticky-column.odds-row-highlight,
:root tbody > tr.score-active td.sticky-column.odds-row-highlight *
    {
    background-color: #c6f6d5 !important; /* Light green for active games */
    color: #000000 !important; /* Black text for readability */
    }

/* Light mode: Override for odds row highlighting on score-final rows (sticky columns) */
:root tbody > tr.score-final td.sticky-column.odds-row-highlight,
:root tbody > tr.score-final td.sticky-column.odds-row-highlight *
    {
    background-color: #fecaca !important; /* Light red for final games */
    color: #000000 !important; /* Black text for readability */
    }

/*---------------------------------------------------------------------------------------------*/
/* Light mode: Column highlighting for STICKY columns - MAXIMUM SPECIFICITY                   */
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Override for sticky columns with column highlighting - MAXIMUM SPECIFICITY */
:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Light mode: Override for all child elements in sticky columns with column highlighting - MAXIMUM SPECIFICITY */
:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Light mode: Override ODD row background for sticky columns with column highlighting - MAXIMUM SPECIFICITY */
:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Light mode: Override ODD row background for all child elements in sticky columns with column highlighting - MAXIMUM SPECIFICITY */
:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Light mode: Override EVEN row background for sticky columns with column highlighting - MAXIMUM SPECIFICITY */
:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Light mode: Override EVEN row background for all child elements in sticky columns with column highlighting - MAXIMUM SPECIFICITY */
:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #1f2937) !important; /* Dark text for readability */
    }

/* Light mode: Override for sticky columns with column highlighting on score-active rows - ODD tbody - MAXIMUM SPECIFICITY */
:root tbody.row-odd > tr.score-active td.sticky-column.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for all child elements in sticky columns with column highlighting on score-active rows - ODD tbody - MAXIMUM SPECIFICITY */
:root tbody.row-odd > tr.score-active td.sticky-column.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for sticky columns with column highlighting on score-active rows - EVEN tbody - MAXIMUM SPECIFICITY */
:root tbody.row-even > tr.score-active td.sticky-column.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for all child elements in sticky columns with column highlighting on score-active rows - EVEN tbody - MAXIMUM SPECIFICITY */
:root tbody.row-even > tr.score-active td.sticky-column.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for sticky columns with column highlighting on score-final rows - ODD tbody - MAXIMUM SPECIFICITY */
:root tbody.row-odd > tr.score-final td.sticky-column.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for all child elements in sticky columns with column highlighting on score-final rows - ODD tbody - MAXIMUM SPECIFICITY */
:root tbody.row-odd > tr.score-final td.sticky-column.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for sticky columns with column highlighting on score-final rows - EVEN tbody - MAXIMUM SPECIFICITY */
:root tbody.row-even > tr.score-final td.sticky-column.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Light mode: Override for all child elements in sticky columns with column highlighting on score-final rows - EVEN tbody - MAXIMUM SPECIFICITY */
:root tbody.row-even > tr.score-final td.sticky-column.odds-column-highlight *
    {
    color: #000000 !important; /* Black text for readability */
    }

/* Light mode: Override for score values in sticky columns with column highlighting - MAXIMUM SPECIFICITY */
:root .odds-table tbody > tr td.sticky-column.odds-column-highlight .odds-cell .odds-score-display .score-value
    {
    color: #000000 !important; /* Black text for score values on light blue highlight background */
    }

/* Light mode: Override for score values in sticky columns with column highlighting on score-active rows - MAXIMUM SPECIFICITY */
:root tbody.row-odd > tr.score-active td.sticky-column.odds-column-highlight .odds-cell .odds-score-display .score-value,
:root tbody.row-even > tr.score-active td.sticky-column.odds-column-highlight .odds-cell .odds-score-display .score-value
    {
    color: #000000 !important; /* Black text for score values on light blue highlight background */
    }

/* Light mode: Override for score values in sticky columns with column highlighting on score-final rows - MAXIMUM SPECIFICITY */
:root tbody.row-odd > tr.score-final td.sticky-column.odds-column-highlight .odds-cell .odds-score-display .score-value,
:root tbody.row-even > tr.score-final td.sticky-column.odds-column-highlight .odds-cell .odds-score-display .score-value
    {
    color: #000000 !important; /* Black text for score values on light blue highlight background */
    }

/* On hover, apply light blue highlight for normal games - ONLY in "all" mode */
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final):hover td.sticky-column
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* On hover, apply light blue highlight for normal games in EVEN rows - ONLY in "all" mode - HIGHER SPECIFICITY */
html body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final):hover td.sticky-column
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* On hover, apply light blue highlight for sticky ODDS cells in normal games - ONLY in "all" mode - MAXIMUM SPECIFICITY */
html body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final):hover td.sticky-column.sticky-odds
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* On hover, apply light blue highlight for sticky ODDS cells in EVEN rows - ONLY in "all" mode - MAXIMUM SPECIFICITY */
html body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final):hover td.sticky-column.sticky-odds
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: On hover, apply light blue highlight for normal games - ONLY in "all" mode */
body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final):hover td.sticky-column
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: On hover, apply light blue highlight for normal games in EVEN rows - ONLY in "all" mode - HIGHER SPECIFICITY */
html body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final):hover td.sticky-column
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: On hover, apply light blue highlight for sticky ODDS cells in normal games - ONLY in "all" mode - MAXIMUM SPECIFICITY */
html body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr:not(.score-active):not(.score-final):hover td.sticky-column.sticky-odds
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: On hover, apply light blue highlight for sticky ODDS cells in EVEN rows - ONLY in "all" mode - MAXIMUM SPECIFICITY */
html body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody.row-even > tr:not(.score-active):not(.score-final):hover td.sticky-column.sticky-odds
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Light blue highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* On hover, apply a slightly lighter green for active games - ONLY in "all" mode */
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr.score-active:hover td.sticky-column,
body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr.score-active:hover td.sticky-column
    {
    background-color: #15803d !important; /* A slightly lighter green */
    }

/* On hover, apply a slightly lighter red for final games - ONLY in "all" mode */
body.highlighting-mode-all .odds-table:not(.highlighting-disabled) tbody > tr.score-final:hover td.sticky-column,
body.highlighting-mode-all [data-theme="dark"] .odds-table:not(.highlighting-disabled) tbody > tr.score-final:hover td.sticky-column
    {
    background-color: #e11d48 !important; /* A slightly lighter red */
    }

/* Dark mode: Make sticky columns match non-sticky columns in normal state */
[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column
    {
    background-color: #1a202c !important; /* Opaque dark background for odd rows */
    }

/* Dark mode: Even rows sticky columns get softer dark background */
[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column
    {
    background-color: #2d3748 !important; /* Opaque softer dark background for even rows */
    }

/* Dark mode: Override inherit rule for highlighted rows sticky columns - MAXIMUM SPECIFICITY */
/* Must include :not(.score-active):not(.score-final) to match specificity of competing rules */
html[data-theme="dark"] .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column
    {
    background-color: var(--row-highlight-bg-color, #FFF77E) !important;
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Override for all child elements in highlighted rows sticky columns */
html[data-theme="dark"] .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column *,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column *,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column *
    {
    color: var(--row-highlight-fg-color, #000000) !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* DARK MODE STICKY COLUMNS: ROW HOVER (when mouse hovers over a row) - uses HOVER color      */
/*---------------------------------------------------------------------------------------------*/

/* Dark mode: Row hover for sticky columns */
[data-theme="dark"] td.odds-row-hover.sticky-column
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Row hover for sticky columns with higher specificity */
[data-theme="dark"] tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Row hover for sticky columns with MAXIMUM specificity */
html[data-theme="dark"] .odds-table tbody.row-odd > tr td.sticky-column.odds-row-hover.odds-row-hover,
html[data-theme="dark"] .odds-table tbody.row-even > tr td.sticky-column.odds-row-hover.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire row */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Row hover for sticky columns on highlighted rows - ULTRA MAXIMUM specificity */
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted td.sticky-column.odds-row-hover.odds-row-hover.odds-row-hover,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted td.sticky-column.odds-row-hover.odds-row-hover.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color overrides highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Row hover for all child elements in sticky columns on highlighted rows */
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted td.sticky-column.odds-row-hover.odds-row-hover.odds-row-hover *,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted td.sticky-column.odds-row-hover.odds-row-hover.odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Row hover for sticky ODDS cells with sportsbook-highlighted - ULTRA MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover,
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover,
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Row hover overrides column highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Row hover for all child elements in sticky ODDS cells with sportsbook-highlighted */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *,
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *,
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Row hover for sticky ODDS cells with sportsbook-highlighted on HIGHLIGHTED ROWS - ULTRA ULTRA MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Row hover overrides both row and column highlight */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Row hover for all child elements in sticky ODDS cells with sportsbook-highlighted on HIGHLIGHTED ROWS */
html[data-theme="dark"] .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted.odds-row-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/*---------------------------------------------------------------------------------------------*/
/* DARK MODE STICKY COLUMNS: COLUMN HOVER (when mouse hovers over a column) - uses HOVER color*/
/*---------------------------------------------------------------------------------------------*/

/* Dark mode: Column hover for sticky columns */
[data-theme="dark"] td.odds-column-hover.sticky-column
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Column hover for sticky columns with higher specificity */
[data-theme="dark"] tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Column hover for sticky columns with MAXIMUM specificity */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Column hover for sticky columns ODD rows with MAXIMUM specificity */
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Column hover for sticky columns EVEN rows with MAXIMUM specificity */
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Column hover for all child elements in sticky columns with MAXIMUM specificity */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-hover.odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Column hover for sticky ODDS cells - ULTRA HIGH SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover,
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover,
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover
    {
    background-color: var(--hover-highlight-bg-color, #dbeafe) !important; /* Hover color for entire column */
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/* Dark mode: Column hover for all child elements in sticky ODDS cells */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover *,
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover *,
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-hover *
    {
    color: var(--hover-highlight-fg-color, #000000) !important; /* Text for readability */
    }

/*---------------------------------------------------------------------------------------------*/
/* DARK MODE STICKY COLUMNS: ROW HIGHLIGHT (when row is clicked) - uses ROW HIGHLIGHT color   */
/*---------------------------------------------------------------------------------------------*/

/* Dark mode: Override inherit rule for odds row highlighting sticky columns */
[data-theme="dark"] td.odds-row-highlight.sticky-column
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire row */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override inherit rule for odds row highlighting sticky columns with higher specificity */
[data-theme="dark"] tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-row-highlight
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire row */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override row background for odds row highlighting sticky columns - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody.row-odd > tr td.sticky-column.odds-row-highlight.odds-row-highlight,
html[data-theme="dark"] .odds-table tbody.row-even > tr td.sticky-column.odds-row-highlight.odds-row-highlight
    {
    background-color: var(--row-highlight-bg-color, #dbeafe) !important; /* Light blue highlight for entire row */
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for all child elements in sticky columns with row highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody.row-odd > tr td.sticky-column.odds-row-highlight.odds-row-highlight *,
html[data-theme="dark"] .odds-table tbody.row-even > tr td.sticky-column.odds-row-highlight.odds-row-highlight *
    {
    color: var(--row-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for odds row highlighting on score-active rows (sticky columns) */
[data-theme="dark"] tbody > tr.score-active td.sticky-column.odds-row-highlight,
[data-theme="dark"] tbody > tr.score-active td.sticky-column.odds-row-highlight *
    {
    background-color: #c6f6d5 !important; /* Light green for active games */
    color: #000000 !important; /* Black text for readability */
    }

/* Dark mode: Override for odds row highlighting on score-final rows (sticky columns) */
[data-theme="dark"] tbody > tr.score-final td.sticky-column.odds-row-highlight,
[data-theme="dark"] tbody > tr.score-final td.sticky-column.odds-row-highlight *
    {
    background-color: #fecaca !important; /* Light red for final games */
    color: #000000 !important; /* Black text for readability */
    }

/* Dark mode: Override color for score values in odds cells on active/final game rows - STICKY columns only */
[data-theme="dark"] tr.score-active td.sticky-column .odds-cell .odds-score-display .score-value,
[data-theme="dark"] tr.score-final td.sticky-column .odds-cell .odds-score-display .score-value
    {
    color: white !important; /* White text on green/red backgrounds (sticky columns) */
    }

/*---------------------------------------------------------------------------------------------*/
/* Dark mode: Column highlighting for STICKY columns - MAXIMUM SPECIFICITY                    */
/*---------------------------------------------------------------------------------------------*/

/* Dark mode: Override for sticky columns with column highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for all child elements in sticky columns with column highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override ODD row background for sticky columns with column highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override ODD row background for all child elements in sticky columns with column highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override EVEN row background for sticky columns with column highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override EVEN row background for all child elements in sticky columns with column highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.odds-column-highlight.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for sticky columns with column highlighting on score-active rows - ODD tbody - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-active td.sticky-column.odds-column-highlight.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for all child elements in sticky columns with column highlighting on score-active rows - ODD tbody - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-active td.sticky-column.odds-column-highlight.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for sticky columns with column highlighting on score-active rows - EVEN tbody - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-even > tr.score-active td.sticky-column.odds-column-highlight.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for all child elements in sticky columns with column highlighting on score-active rows - EVEN tbody - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-even > tr.score-active td.sticky-column.odds-column-highlight.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for sticky columns with column highlighting on score-final rows - ODD tbody - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-final td.sticky-column.odds-column-highlight.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for all child elements in sticky columns with column highlighting on score-final rows - ODD tbody - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-final td.sticky-column.odds-column-highlight.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for sticky columns with column highlighting on score-final rows - EVEN tbody - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-even > tr.score-final td.sticky-column.odds-column-highlight.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue for column highlighting */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for all child elements in sticky columns with column highlighting on score-final rows - EVEN tbody - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-even > tr.score-final td.sticky-column.odds-column-highlight.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for readability */
    }

/* Dark mode: Override for score values in sticky columns with column highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr td.sticky-column.odds-column-highlight.odds-column-highlight .odds-cell .odds-score-display .score-value
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for score values on light blue highlight background */
    }

/* Dark mode: Override for score values in sticky columns with column highlighting on score-active rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-active td.sticky-column.odds-column-highlight.odds-column-highlight .odds-cell .odds-score-display .score-value,
html[data-theme="dark"] :root tbody.row-even > tr.score-active td.sticky-column.odds-column-highlight.odds-column-highlight .odds-cell .odds-score-display .score-value
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for score values on light blue highlight background */
    }

/* Dark mode: Override for score values in sticky columns with column highlighting on score-final rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-final td.sticky-column.odds-column-highlight.odds-column-highlight .odds-cell .odds-score-display .score-value,
html[data-theme="dark"] :root tbody.row-even > tr.score-final td.sticky-column.odds-column-highlight.odds-column-highlight .odds-cell .odds-score-display .score-value
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for score values on light blue highlight background */
    }

/* Dark mode: CRITICAL - Direct targeting of odds-value spans in sticky columns with column highlighting */
html[data-theme="dark"] .odds-table tbody > tr td.sticky-column.odds-column-highlight.odds-column-highlight .odds-value,
html[data-theme="dark"] .odds-table tbody > tr td.sticky-column.odds-column-highlight.odds-column-highlight span.odds-value
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for odds values */
    }

/* Dark mode: CRITICAL - Direct targeting of odds-score-value divs in sticky columns with column highlighting */
html[data-theme="dark"] .odds-table tbody > tr td.sticky-column.odds-column-highlight.odds-column-highlight .odds-score-value,
html[data-theme="dark"] .odds-table tbody > tr td.sticky-column.odds-column-highlight.odds-column-highlight div.odds-score-value
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for score values */
    }

/* Dark mode: CRITICAL - Direct targeting of sportsbook-container in sticky columns with column highlighting */
html[data-theme="dark"] .odds-table tbody > tr td.sticky-column.odds-column-highlight.odds-column-highlight .sportsbook-container,
html[data-theme="dark"] .odds-table tbody > tr td.sticky-column.odds-column-highlight.odds-column-highlight .sportsbook-container *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for all sportsbook container content */
    }

/*---------------------------------------------------------------------------------------------*/
/* Sticky odds column highlighting - MAXIMUM SPECIFICITY                                      */
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Sticky odds TD with column highlighting - MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue background */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text */
    }

/* Light mode: All content inside sticky odds TD with column highlighting - MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Light mode: Sticky odds TD with column highlighting on EVEN rows - MAXIMUM SPECIFICITY */
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue background */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text */
    }

/* Light mode: All content inside sticky odds TD with column highlighting on EVEN rows - MAXIMUM SPECIFICITY */
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Dark mode: Sticky odds TD with column highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue background */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text */
    }

/* Dark mode: All content inside sticky odds TD with column highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Dark mode: Sticky odds TD with column highlighting on EVEN rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue background */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text */
    }

/* Dark mode: All content inside sticky odds TD with column highlighting on EVEN rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Dark mode: Sticky odds TD with column highlighting on score-active rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-active td.sticky-odds.odds-column-highlight,
html[data-theme="dark"] :root tbody.row-even > tr.score-active td.sticky-odds.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue background */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text */
    }

/* Dark mode: All content inside sticky odds TD with column highlighting on score-active rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-active td.sticky-odds.odds-column-highlight *,
html[data-theme="dark"] :root tbody.row-even > tr.score-active td.sticky-odds.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/* Dark mode: Sticky odds TD with column highlighting on score-final rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-final td.sticky-odds.odds-column-highlight,
html[data-theme="dark"] :root tbody.row-even > tr.score-final td.sticky-odds.odds-column-highlight
    {
    background-color: var(--column-highlight-bg-color, #dbeafe) !important; /* Light blue background */
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text */
    }

/* Dark mode: All content inside sticky odds TD with column highlighting on score-final rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] :root tbody.row-odd > tr.score-final td.sticky-odds.odds-column-highlight *,
html[data-theme="dark"] :root tbody.row-even > tr.score-final td.sticky-odds.odds-column-highlight *
    {
    color: var(--column-highlight-fg-color, #000000) !important; /* Black text for all child elements */
    }

/*---------------------------------------------------------------------------------------------*/
/* Sportsbook column highlighting for sticky columns - MAXIMUM SPECIFICITY                    */
/* Must include :not(.score-active):not(.score-final) to match specificity of competing rules */
/*---------------------------------------------------------------------------------------------*/

/* Light mode: Sticky column with sportsbook highlighting - MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #FFF77E) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Light mode: All content inside sticky column with sportsbook highlighting - MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html:root .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html:root .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *,
html:root .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *
    {
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Light mode: Sportsbook highlighting wins over row highlighting on sticky columns - MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #FFF77E) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Light mode: All content inside sticky column with sportsbook highlighting on highlighted rows - MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html:root .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html:root .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *,
html:root .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *
    {
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Light mode: Sportsbook highlighting on score-active rows - MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr.score-active td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody > tr.score-active td.sticky-odds.sportsbook-highlighted,
html:root .odds-table tbody.row-odd > tr.score-active td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody.row-even > tr.score-active td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody.row-odd > tr.score-active td.sticky-odds.sportsbook-highlighted,
html:root .odds-table tbody.row-even > tr.score-active td.sticky-odds.sportsbook-highlighted
    {
    background-color: #9CAF88 !important; /* washed out green for active games */
    color: #000000 !important;
    }

/* Light mode: Sportsbook highlighting on score-final rows - MAXIMUM SPECIFICITY */
html:root .odds-table tbody > tr.score-final td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody > tr.score-final td.sticky-odds.sportsbook-highlighted,
html:root .odds-table tbody.row-odd > tr.score-final td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody.row-even > tr.score-final td.sticky-column.sportsbook-highlighted,
html:root .odds-table tbody.row-odd > tr.score-final td.sticky-odds.sportsbook-highlighted,
html:root .odds-table tbody.row-even > tr.score-final td.sticky-odds.sportsbook-highlighted
    {
    background-color: #F4A4A4 !important; /* washed out red for final games */
    color: #000000 !important;
    }

/* Dark mode: Sticky column with sportsbook highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #FFF77E) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Dark mode: All content inside sticky column with sportsbook highlighting - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody.row-odd > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody.row-even > tr:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *
    {
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Sportsbook highlighting wins over row highlighting on sticky columns - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted
    {
    background-color: var(--column-highlight-bg-color, #FFF77E) !important;
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Dark mode: All content inside sticky column with sportsbook highlighting on highlighted rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-column.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *,
html[data-theme="dark"] .odds-table tbody.row-even > tr.highlighted:not(.score-active):not(.score-final) td.sticky-odds.sportsbook-highlighted *
    {
    color: var(--column-highlight-fg-color, #000000) !important;
    }

/* Dark mode: Sportsbook highlighting on score-active rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr.score-active td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody > tr.score-active td.sticky-odds.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.score-active td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-even > tr.score-active td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.score-active td.sticky-odds.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-even > tr.score-active td.sticky-odds.sportsbook-highlighted
    {
    background-color: #9CAF88 !important; /* washed out green for active games */
    color: #000000 !important;
    }

/* Dark mode: Sportsbook highlighting on score-final rows - MAXIMUM SPECIFICITY */
html[data-theme="dark"] .odds-table tbody > tr.score-final td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody > tr.score-final td.sticky-odds.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.score-final td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-even > tr.score-final td.sticky-column.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-odd > tr.score-final td.sticky-odds.sportsbook-highlighted,
html[data-theme="dark"] .odds-table tbody.row-even > tr.score-final td.sticky-odds.sportsbook-highlighted
    {
    background-color: #F4A4A4 !important; /* washed out red for final games */
    color: #000000 !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Alerts Panel — Unified container for message and injury alert cards                        */
/*---------------------------------------------------------------------------------------------*/
.alerts-panel
    {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 450px;
    min-width: 450px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    pointer-events: auto;
    border: 2px solid #6c757d;
    border-radius: 6px;
    background-color: #f0f0f0;
    box-sizing: border-box;
    }

.alerts-panel-header
    {
    background-color: #495057;
    color: #ffffff;
    padding: 4px 10px;
    font-size: calc(13px * var(--zoom-factor));
    font-weight: bold;
    display: flex;
    align-items: center;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 4px 4px 0 0;
    flex-shrink: 0;
    justify-content: space-between;
    gap: 12px;
    }

.alerts-panel-title
    {
    flex: 1;
    min-width: 0;
    }

.alerts-panel-header-actions
    {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    }

.alerts-panel-control,
.alerts-panel-expand-button
    {
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: calc(14px * var(--zoom-factor));
    font-weight: bold;
    line-height: 1;
    min-width: 24px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    }

.alerts-panel-control:hover,
.alerts-panel-expand-button:hover
    {
    background-color: rgba(255, 255, 255, 0.16);
    }

.alerts-panel-minimized-bar
    {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 340px;
    max-width: calc(100vw - 40px);
    padding: 6px 10px;
    border: 2px solid #6c757d;
    border-radius: 6px;
    background-color: #495057;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    }

.alerts-panel-minimized-bar.hidden
    {
    display: none !important;
    }

.alerts-panel-minimized-title
    {
    font-size: calc(13px * var(--zoom-factor));
    font-weight: bold;
    white-space: nowrap;
    }

.alerts-panel-minimized-summary
    {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    font-size: calc(12px * var(--zoom-factor));
    color: rgba(255, 255, 255, 0.85);
    }

.alerts-panel-minimized-count
    {
    color: #ffffff;
    font-weight: bold;
    white-space: nowrap;
    }

.alerts-panel-minimized-time
    {
    white-space: nowrap;
    }

.alerts-panel-unread-indicator
    {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    flex-shrink: 0;
    }

.alerts-panel-unread-indicator.hidden
    {
    display: none;
    }

.alerts-panel.hidden
    {
    display: none !important;
    }

/* Top-right: cards flow downward, newest at bottom */
.alerts-panel-top-right
    {
    flex-direction: column;
    }

/* Bottom-right: header stays on top; card ordering handled in JS */
.alerts-panel-bottom-right
    {
    flex-direction: column;
    }

/* Middle: same layout as top-right, panel is centred on screen */
.alerts-panel-middle
    {
    flex-direction: column;
    }

.alerts-panel-cards
    {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    }

.alerts-panel-cards > *
    {
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    }

/*---------------------------------------------------------------------------------------------*/
/* Message card styles (inside AlertsPanel)                                                    */
/*---------------------------------------------------------------------------------------------*/
.message-card
    {
    border: 2px solid #007bff;
    border-radius: 6px;
    overflow: hidden;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    }

.message-card-header
    {
    background-color: #007bff;
    color: white;
    padding: 3px 8px;
    font-size: calc(12px * var(--zoom-factor));
    font-weight: bold;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

.message-card-timestamp
    {
    font-size: calc(12px * var(--zoom-factor));
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    }

.message-card-close-all
    {
    font-size: calc(11px * var(--zoom-factor));
    font-weight: bold;
    cursor: pointer;
    color: white;
    line-height: 1;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 3px;
    white-space: nowrap;
    }

.message-card-close-all:hover
    {
    background-color: rgba(255, 255, 255, 0.2);
    }

.message-card-close
    {
    font-size: calc(16px * var(--zoom-factor));
    font-weight: bold;
    cursor: pointer;
    color: white;
    line-height: 1;
    padding: 0 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    }

.message-card-close:hover
    {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    }

.message-card-body
    {
    padding: 4px 6px;
    }

.message-card-content
    {
    font-size: calc(14px * var(--zoom-factor));
    line-height: 1.4;
    color: #333;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    }

/*---------------------------------------------------------------------------------------------*/
/* Alerts Panel Submenu (hamburger menu)                                                       */
/*---------------------------------------------------------------------------------------------*/
.alerts-panel-menu-item
    {
    position: relative;
    }

.alerts-panel-submenu
    {
    position: absolute;
    top: 0;
    right: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 140px;
    }

.alerts-panel-submenu.hidden
    {
    display: none;
    }

.alerts-panel-submenu-item
    {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: calc(14px * var(--zoom-factor));
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color 0.2s ease;
    white-space: nowrap;
    position: relative;
    }

.alerts-panel-submenu-item:last-child
    {
    border-bottom: none;
    }

.alerts-panel-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/*---------------------------------------------------------------------------------------------*/
/* Dark mode overrides for Alerts Panel and Message cards                                      */
/*---------------------------------------------------------------------------------------------*/
[data-theme="dark"] .alerts-panel
    {
    background-color: #1e1e1e;
    border-color: #555;
    }

[data-theme="dark"] .alerts-panel-header
    {
    background-color: #333;
    color: #ddd;
    }

[data-theme="dark"] .alerts-panel-minimized-bar
    {
    background-color: #333;
    border-color: #555;
    color: #ddd;
    }

[data-theme="dark"] .alerts-panel-control,
[data-theme="dark"] .alerts-panel-expand-button
    {
    border-color: rgba(221, 221, 221, 0.45);
    color: #ddd;
    }

[data-theme="dark"] .alerts-panel-control:hover,
[data-theme="dark"] .alerts-panel-expand-button:hover
    {
    background-color: rgba(255, 255, 255, 0.1);
    }

[data-theme="dark"] .message-card
    {
    background-color: var(--bg-secondary);
    border-color: #0d6efd;
    }

[data-theme="dark"] .message-card-body
    {
    background-color: var(--bg-tertiary);
    }

[data-theme="dark"] .message-card-content
    {
    color: var(--text-primary);
    }

[data-theme="dark"] .alerts-panel-submenu
    {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    }

[data-theme="dark"] .alerts-panel-submenu-item
    {
    color: var(--text-primary);
    border-bottom-color: var(--border-secondary);
    }

[data-theme="dark"] .alerts-panel-submenu-item:hover
    {
    background-color: var(--bg-tertiary);
    }

/* ============================================================================
 * MyNote feature
 * The under-event MyNote block is a single <tr class="mynote-row"> with one
 * <td class="mynote-cell"> containing an absolutely-positioned 📌 gutter icon
 * and up to two stacked color bands (.mynote-row-band-private and
 * .mynote-row-band-org).  Each band reads its background and foreground colors
 * from per-band CSS custom properties set inline by renderMyNoteRows():
 *   --mynote-band-bg
 *   --mynote-band-fg
 * The 📌 icon uses a fixed red color so users can spot it at a glance regardless
 * of theme; clicking it toggles the under-event block.
 * ============================================================================ */

.mynote-icon
    {
    color: #dc2626;
    cursor: pointer;
    }

/* 📌 rendered inside the under-event MyNote cell by renderMyNoteRows().  Absolutely
 * positioned in a fixed-width left gutter that mirrors .note-content's first column
 * so the icon sits vertically centered across whichever band(s) are rendered.  Left-
 * click collapses the block and returns the icon to .time-icons; right-click opens
 * the MyNote modal. */
.mynote-row-icon-container
    {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(40px * var(--zoom-factor));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    }

/* Event right-click context menu (.team-name / .pitcher-name) */
.event-context-menu
    {
    position: absolute;
    z-index: 2000;
    display: none;
    min-width: calc(160px * var(--zoom-factor));
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: calc(4px * var(--zoom-factor)) 0;
    font-size: calc(13px * var(--zoom-factor));
    }

.event-context-menu-item
    {
    display: block;
    width: 100%;
    text-align: left;
    padding: calc(6px * var(--zoom-factor)) calc(14px * var(--zoom-factor));
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background-color 0.2s;
    }

.event-context-menu-item:hover
    {
    background-color: #f3f4f6;
    color: #1f2937;
    }

[data-theme="dark"] .event-context-menu
    {
    background-color: #2d3748;
    border-color: #4a5568;
    }

[data-theme="dark"] .event-context-menu-item
    {
    color: #e2e8f0;
    }

[data-theme="dark"] .event-context-menu-item:hover
    {
    background-color: #4a5568;
    color: #f7fafc;
    }

/* Modal layout */
.mynote-modal-content
    {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 0.5rem;
    overflow: hidden;
    }

.mynote-section
    {
    padding: calc(8px * var(--zoom-factor)) calc(10px * var(--zoom-factor));
    margin-bottom: calc(10px * var(--zoom-factor));
    background: var(--bg-primary);
    border-radius: 0.25rem;
    }

.mynote-section-header
    {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--zoom-factor));
    margin-bottom: calc(6px * var(--zoom-factor));
    flex-wrap: wrap;
    }

.mynote-section-title
    {
    font-weight: 600;
    font-size: calc(13px * var(--zoom-factor));
    color: var(--text-primary);
    }

.mynote-section-hint
    {
    font-size: calc(11px * var(--zoom-factor));
    color: var(--text-secondary);
    flex: 1 1 auto;
    }

.mynote-color-controls
    {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--zoom-factor));
    margin-left: auto;
    }

.mynote-preview
    {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(28px * var(--zoom-factor));
    height: calc(20px * var(--zoom-factor));
    padding: 0 calc(6px * var(--zoom-factor));
    font-size: calc(11px * var(--zoom-factor));
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    }

.mynote-color-label
    {
    display: inline-flex;
    align-items: center;
    gap: calc(3px * var(--zoom-factor));
    font-size: calc(10px * var(--zoom-factor));
    color: var(--text-secondary);
    }

.mynote-color-label input[type="color"]
    {
    width: calc(22px * var(--zoom-factor));
    height: calc(18px * var(--zoom-factor));
    border: 1px solid var(--border-secondary);
    border-radius: 2px;
    background: transparent;
    padding: 0;
    cursor: pointer;
    }

.mynote-reset
    {
    font-size: calc(10px * var(--zoom-factor));
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-secondary);
    border-radius: 2px;
    padding: calc(2px * var(--zoom-factor)) calc(6px * var(--zoom-factor));
    cursor: pointer;
    }

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

.mynote-textarea
    {
    width: 100%;
    box-sizing: border-box;
    padding: calc(6px * var(--zoom-factor)) calc(8px * var(--zoom-factor));
    font-family: inherit;
    font-size: calc(13px * var(--zoom-factor));
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 0.25rem;
    resize: vertical;
    }

.mynote-textarea:focus
    {
    outline: none;
    border-color: #3b82f6;
    }

/* Under-event block rendered by TableView.renderMyNoteRows().  The <td.mynote-cell>
 * is a positioning context for the absolute-positioned 📌 gutter icon; the cell
 * itself is transparent and unpadded so the inner .mynote-row-band divs control
 * background color and padding.  Top/bottom edges use box-shadow insets to mirror
 * the visual "border above/below" effect already used by .note-row. */
:root .odds-table tbody > tr.mynote-row > td.mynote-cell
    {
    position: relative;
    padding: 0;
    background-color: transparent !important;
    border-top:    none !important;
    border-bottom: none !important;
    box-shadow: inset 0 2px 0 0 var(--custom-header-bg-color, #7dd3fc),
                inset 0 -2px 0 0 var(--custom-header-bg-color, #7dd3fc);
    }

/* Each band's background and foreground come from inline --mynote-band-bg/-fg
 * CSS variables set by renderMyNoteRows() from SettingsManager picks
 * (myNoteRowPrivate / myNoteRowOrg).  Left padding clears the 40px icon gutter so
 * text never sits under the 📌.  The selector is scoped to .odds-table tbody so it
 * outweighs the row-odd / row-even !important overrides earlier in this file. */
:root .odds-table tbody > tr.mynote-row > td.mynote-cell > .mynote-row-band
    {
    background-color: var(--mynote-band-bg) !important;
    color:            var(--mynote-band-fg) !important;
    padding: calc(4px * var(--zoom-factor)) calc(8px * var(--zoom-factor)) calc(4px * var(--zoom-factor)) calc(40px * var(--zoom-factor));
    font-size: calc(12px * var(--zoom-factor));
    white-space: pre-wrap;
    word-wrap: break-word;
    }

/* Dark-theme override: the global `tbody > tr td { color:#fff !important }` rule (line
 * ~4723) forces white text on every cell.  Restore the user's chosen foreground for the
 * MyNote bands and propagate it to inner spans so .mynote-row-who/-when/-text inherit. */
html[data-theme="dark"] :root .odds-table tbody > tr.mynote-row > td.mynote-cell > .mynote-row-band,
html[data-theme="dark"] :root .odds-table tbody > tr.mynote-row > td.mynote-cell > .mynote-row-band *
    {
    color: var(--mynote-band-fg) !important;
    }

/* The org band is a 3-column grid (who / when / text) so the message column
 * lines up vertically across every line regardless of username or timestamp
 * width.  Each .mynote-row-line uses `display: contents` so its three spans
 * become direct grid children of the band and share the same column tracks. */
:root .odds-table tbody > tr.mynote-row > td.mynote-cell > .mynote-row-band-org
    {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: calc(6px * var(--zoom-factor));
    align-items: baseline;
    }

.mynote-row-line
    {
    display: contents;
    line-height: 1.4;
    }

.mynote-row-who
    {
    font-weight: 600;
    }

.mynote-row-when
    {
    font-size: calc(10px * var(--zoom-factor));
    opacity: 0.85;
    }

.mynote-row-band-org .mynote-row-text
    {
    min-width: 0;
    }

/* ---- Event header card (mirrors the main table matchup row) ---- */
.mynote-event-card
    {
    margin-bottom: calc(10px * var(--zoom-factor));
    border: 1px solid var(--border-secondary);
    border-radius: 0.25rem;
    overflow: hidden;
    background: var(--bg-primary);
    }

.mynote-event-league
    {
    background: var(--bg-tertiary, #1f2937);
    color: var(--text-primary, #ffffff);
    font-weight: 600;
    font-size: calc(12px * var(--zoom-factor));
    padding: calc(4px * var(--zoom-factor)) calc(8px * var(--zoom-factor));
    }

[data-theme="dark"] .mynote-event-league
    {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    }

.mynote-event-row
    {
    display: grid;
    grid-template-columns: calc(60px * var(--zoom-factor)) calc(60px * var(--zoom-factor)) 1fr;
    column-gap: calc(8px * var(--zoom-factor));
    align-items: center;
    padding: calc(3px * var(--zoom-factor)) calc(8px * var(--zoom-factor));
    font-size: calc(13px * var(--zoom-factor));
    color: var(--text-primary);
    }

.mynote-event-row + .mynote-event-row
    {
    border-top: 1px solid var(--border-secondary);
    }

.mynote-event-date,
.mynote-event-time
    {
    color: var(--text-secondary);
    font-size: calc(12px * var(--zoom-factor));
    }

.mynote-event-rot
    {
    color: var(--text-secondary);
    font-size: calc(12px * var(--zoom-factor));
    text-align: right;
    }

.mynote-event-name
    {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.mynote-event-fallback
    {
    padding: calc(6px * var(--zoom-factor)) calc(8px * var(--zoom-factor));
    color: var(--text-secondary);
    font-size: calc(12px * var(--zoom-factor));
    }

/*---------------------------------------------------------------------------------------------*/
/* Logo containers and images (sport / league / team).                                         */
/* Sized in em so they scale with surrounding font-size, which is already zoom-aware.          */
/*---------------------------------------------------------------------------------------------*/
.logo-slot
    {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.35em;
    flex-shrink: 0;
    }

.logo-slot .logo
    {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    }

/* Team logo inside the matchup cell: tighter sizing to match team-name row height */
.matchup-cell .logo-slot
    {
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.3em;
    }

/* Team logo inside the matchup cell: render on a white circular background */
.matchup-cell .logo-slot .logo
    {
    background-color: #ffffff;
    border-radius: 50%;
    padding: 0.08em;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

/* Dark mode: single-color, dark-on-transparent league logos (ATP, WTA) are invisible
   on the dark page. Re-color them to white via filter (brightness(0) -> black,
   invert(1) -> white). League logos are rendered via <img>, so we cannot recolor SVG
   internals with CSS; the filter approach works for any single-color SVG. */
[data-theme="dark"] img.logo[src$="/ATP.svg"],
[data-theme="dark"] img.logo[src$="/WTA.svg"]
    {
    filter: brightness(0) invert(1);
    }


/* Enlarged-logo hover tooltip (shared singleton element, see LogoTooltip.js).
   Positioned via fixed coords so it escapes any overflow:hidden ancestor. */
.logo-tooltip
    {
    position: fixed;
    z-index: 100000;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    }

.logo-tooltip.hidden
    {
    display: none;
    }

.logo-tooltip img
    {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
    }

[data-theme="dark"] .logo-tooltip
    {
    background: var(--bg-secondary, #2d3748);
    border-color: var(--border-primary, #4a5568);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

/* ===================================================================================================
   Mobile / small-screen modal responsiveness.

   On phones the desktop modal sizing (fixed widths such as 500-960px, min-width: 600px and
   min-height: 500px, plus inline left/top/transform centering on a couple of modals) overflows the
   viewport.  At <= 640px wide every modal collapses into a full-screen sheet: it fills the screen,
   drops its rounded corners and resize handle, neutralises any drag / absolute-centering offset, and
   lets its own .modal-body do the scrolling.  Using !important lets this single block override all
   the per-modal id/class size rules (e.g. #sportsbook-order-modal, .settings-modal) and the inline
   styles on .highlighting-modal-content at once, regardless of their higher specificity.  dvh is used
   with a vh fallback so the sheet tracks the dynamic mobile viewport (collapsing URL bar).
   =================================================================================================== */
@media (max-width: 640px)
    {
    /* Pin draggable modals back to the top-left so a prior drag offset can't push the
       full-screen sheet partially off-screen. */
    .modal.draggable
        {
        top:       0 !important;
        left:      0 !important;
        transform: none !important;
        }

    .modal-content,
    .modal-overlay-content
        {
        box-sizing: border-box !important;
        position:   relative !important;
        left:       auto !important;
        top:        auto !important;
        transform:  none !important;
        width:      100% !important;
        min-width:  0 !important;
        max-width:  100% !important;
        height:     100vh !important;
        height:     100dvh !important;
        min-height: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin:     0 !important;
        border-radius: 0 !important;
        resize:     none !important;
        overflow:   hidden !important;
        }

    /* The desktop resize handle is meaningless on a full-screen sheet. */
    .modal-content::after,
    .modal-content.resizeable::after
        {
        display: none !important;
        }
    }

/* Short viewports (e.g. phones in landscape) where the desktop min-height: 500px would exceed the
   screen height.  Collapse the minimum and cap the height so the .modal-body simply scrolls. */
@media (max-height: 600px)
    {
    .modal-content,
    .modal-overlay-content
        {
        min-height: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        }
    }

/*---------------------------------------------------------------------------------------------*/
/* MLB ScorExt Column Styles */
/*---------------------------------------------------------------------------------------------*/
.score-ext-cell
    {
    vertical-align: middle !important;
    text-align: center !important;
    padding: calc(2px * var(--zoom-factor)) !important;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-secondary);
    }

.score-ext-container
    {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(2px * var(--zoom-factor));
    height: 100%;
    width: 100%;
    color: var(--text-primary);
    }

.baseball-bases
    {
    color: var(--text-tertiary);
    transition: color 0.2s ease;
    margin: 0 auto;
    }

.baseball-bases polygon
    {
    transition: fill 0.2s ease;
    }

.baseball-bases polygon[fill="currentColor"]
    {
    color: var(--accent-primary);
    }

.baseball-count
    {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: monospace, monospace;
    font-size: calc(11px * var(--zoom-factor));
    font-weight: bold;
    color: var(--text-secondary);
    line-height: 1;
    background: var(--bg-primary);
    padding: calc(1px * var(--zoom-factor)) calc(4px * var(--zoom-factor));
    border-radius: calc(3px * var(--zoom-factor));
    margin: 0 auto;
    }

.count-separator
    {
    margin: 0 calc(1px * var(--zoom-factor));
    color: var(--text-tertiary);
    }

.baseball-outs
    {
    display: flex;
    gap: calc(3px * var(--zoom-factor));
    align-items: center;
    justify-content: center;
    height: calc(8px * var(--zoom-factor));
    margin: 0 auto;
    }

.out-dot
    {
    width: calc(6px * var(--zoom-factor));
    height: calc(6px * var(--zoom-factor));
    border-radius: 50%;
    border: 1px solid var(--text-tertiary);
    background-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    }

.out-dot.filled
    {
    background-color: var(--error-color);
    border-color: var(--error-color);
    }

/* Dark theme tweaks for baseball bases */
[data-theme="dark"] .baseball-bases polygon[fill="currentColor"]
    {
    color: #f59e0b; /* Golden base fill in dark mode for premium contrast */
    }

.score-ext-container
    {
    position: relative; /* Absolute positioning context */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(2px * var(--zoom-factor));
    height: 100%;
    width: 100%;
    color: var(--text-primary);
    }

/* Combined stats column positioned absolutely */
.baseball-stats-col
    {
    position: absolute;
    top: calc(2px * var(--zoom-factor));
    bottom: calc(2px * var(--zoom-factor));
    width: calc(50% - 26px * var(--zoom-factor));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Stack from the top to prevent overlaps */
    }

.baseball-stats-left
    {
    left: calc(2px * var(--zoom-factor));
    }

.baseball-stats-right
    {
    right: calc(2px * var(--zoom-factor));
    }

/* Header styled with small font and divider line */
.baseball-stats-col .stats-header
    {
    font-family: monospace, monospace;
    font-size: calc(9px * var(--zoom-factor));
    font-weight: bold;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--text-tertiary);
    width: 100%;
    text-align: center;
    padding-bottom: 1px;
    margin-bottom: calc(3px * var(--zoom-factor));
    line-height: 1;
    }

/* Values stack naturally below the header, aligned with rows */
.baseball-stats-col .stats-val
    {
    font-family: monospace, monospace;
    font-size: calc(11px * var(--zoom-factor));
    font-weight: bold;
    color: var(--text-secondary);
    height: calc(13px * var(--zoom-factor)); /* Tighter height to fit nicely */
    display: flex;
    align-items: center;
    justify-content: center;
    }

/* MLB ScorExt Sequential Mode overrides */
.score-ext-container.sequential
    {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 0;
    }

.score-ext-container.sequential .baseball-stats-hits
    {
    left: calc(2px * var(--zoom-factor));
    width: calc(24px * var(--zoom-factor));
    }

.score-ext-container.sequential .baseball-stats-errors
    {
    left: calc(26px * var(--zoom-factor));
    width: calc(24px * var(--zoom-factor));
    }

.score-ext-container.sequential .baseball-graphics-col
    {
    /* In-flow element to prevent cell height collapse */
    width: calc(50px * var(--zoom-factor));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(2px * var(--zoom-factor));
    }

/*---------------------------------------------------------------------------------------------*/
/* NFL ScorExt Column Styles */
/*---------------------------------------------------------------------------------------------*/
.odds-table td.football-ext-cell
    {
    vertical-align: top !important;
    padding-top: calc(2px * var(--zoom-factor)) !important;
    padding-bottom: calc(2px * var(--zoom-factor)) !important;
    padding-left: calc(4px * var(--zoom-factor)) !important;
    padding-right: calc(4px * var(--zoom-factor)) !important;
    text-align: left !important;
    }

.football-ext-compact
    {
    display: flex;
    flex-direction: column;
    width: 100%;
    }

.football-ext-row
    {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    }

.football-poss-slot
    {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(18px * var(--zoom-factor));
    min-width: calc(18px * var(--zoom-factor));
    height: calc(14px * var(--zoom-factor));
    font-size: calc(12px * var(--zoom-factor));
    line-height: 1;
    margin-right: calc(4px * var(--zoom-factor));
    }

.football-details-line
    {
    font-family: inherit;
    font-size: calc(14px * var(--zoom-factor));
    font-weight: normal;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.3;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    display: inline-block;
    }

.football-details-line.red-zone
    {
    color: #ef4444 !important; /* Vivid red for red zone warning */
    text-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
    }

tr.score-active .football-ext-cell .football-details-line,
tr.score-final .football-ext-cell .football-details-line
    {
    color: white !important;
    }

.tennis-ext-compact
    {
    display: flex;
    flex-direction: column;
    width: 100%;
    }

.tennis-ext-row
    {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    }

.tennis-poss-slot
    {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(18px * var(--zoom-factor));
    min-width: calc(18px * var(--zoom-factor));
    height: calc(14px * var(--zoom-factor));
    margin-right: calc(4px * var(--zoom-factor));
    }

.tennis-game-score
    {
    font-family: inherit;
    font-size: calc(14px * var(--zoom-factor));
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.3;
    padding-top: calc(2px * var(--zoom-factor));
    padding-bottom: calc(2px * var(--zoom-factor));
    display: inline-block;
    }

tr.score-active .tennis-ext-cell .tennis-game-score,
tr.score-final .tennis-ext-cell .tennis-game-score
    {
    color: white !important;
    }

/* Tennis Matchup Column Status Badges ([W], [Ret], [WO], [Def]) */
.tennis-match-status-badge
    {
    float: right;
    margin-right: calc(4px * var(--zoom-factor));
    margin-top: calc(1px * var(--zoom-factor));
    font-size: calc(10px * var(--zoom-factor));
    line-height: 1.2;
    padding: calc(1px * var(--zoom-factor)) calc(5px * var(--zoom-factor));
    border-radius: calc(3px * var(--zoom-factor));
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    pointer-events: none;
    }

.tennis-match-status-badge.winner
    {
    background-color: #16a34a;
    color: #ffffff;
    border: 1px solid #15803d;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }

tr.score-final .tennis-match-status-badge.winner
    {
    background-color: #16a34a;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

.tennis-match-status-badge.retired
    {
    background-color: rgba(248, 113, 113, 0.25);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.5);
    font-weight: 600;
    }

tr.score-final .tennis-match-status-badge.retired
    {
    background-color: rgba(0, 0, 0, 0.4);
    color: #fca5a5;
    border: 1px solid rgba(254, 202, 202, 0.4);
    }

.tennis-match-status-badge.walkover
    {
    background-color: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.5);
    font-weight: 600;
    }

tr.score-final .tennis-match-status-badge.walkover
    {
    background-color: rgba(0, 0, 0, 0.4);
    color: #fde68a;
    border: 1px solid rgba(253, 230, 138, 0.4);
    }

/* Tennis ScoreExt special outcome text styling */
.tennis-ext-cell .tennis-winner
    {
    font-weight: 700;
    color: #059669;
    }

.tennis-ext-cell .tennis-retired
    {
    font-weight: 400;
    color: #f87171;
    }

.tennis-ext-cell .tennis-walkover
    {
    font-weight: 400;
    color: var(--text-primary);
    }

tr.score-final .tennis-ext-cell .tennis-winner
    {
    color: #ffffff !important;
    font-weight: 700;
    }

tr.score-final .tennis-ext-cell .tennis-retired
    {
    color: #fca5a5 !important;
    font-weight: 400;
    }

tr.score-final .tennis-ext-cell .tennis-walkover
    {
    color: #fde68a !important;
    font-weight: 400;
    }

/*---------------------------------------------------------------------------------------------*/
/* Series Price ScorExt Column Styles (Game-by-Game Badges / Pips) */
/*---------------------------------------------------------------------------------------------*/
.odds-table td.series-ext-cell
    {
    vertical-align: middle !important;
    padding-top: calc(2px * var(--zoom-factor)) !important;
    padding-bottom: calc(2px * var(--zoom-factor)) !important;
    padding-left: calc(3px * var(--zoom-factor)) !important;
    padding-right: calc(3px * var(--zoom-factor)) !important;
    }

.series-ext-compact
    {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    gap: calc(2px * var(--zoom-factor));
    }

.series-pip-row
    {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: calc(2px * var(--zoom-factor));
    }

.series-pip
    {
    flex: 1 1 0;
    min-width: 0;
    height: calc(14px * var(--zoom-factor));
    font-size: calc(10px * var(--zoom-factor));
    font-weight: 700;
    line-height: calc(14px * var(--zoom-factor));
    text-align: center;
    border-radius: calc(2px * var(--zoom-factor));
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    }

.series-pip.pip-win
    {
    background-color: #16a34a;
    color: #ffffff !important;
    }

.series-pip.pip-loss
    {
    background-color: #dc2626;
    color: #ffffff !important;
    }

.series-pip.pip-unplayed
    {
    background-color: rgba(128, 128, 128, 0.15);
    border: 1px dashed rgba(128, 128, 128, 0.35);
    }

/*---------------------------------------------------------------------------------------------*/
/* Series Price Events - Suppress Alert Icons & Letters */
/*---------------------------------------------------------------------------------------------*/
.event-tbody.series-price-event .time-icons,
.event-tbody.series-price-event .time-icons-wrapper,
tr.series-price-event .time-icons,
tr.series-price-event .time-icons-wrapper
    {
    display: none !important;
    }

/*---------------------------------------------------------------------------------------------*/
/* Compare Odds Modal Styles */
/*---------------------------------------------------------------------------------------------*/
.compare-odds-modal
    {
    position: fixed;
    z-index: 2500;
    background-color: var(--bg-secondary);
    border: 2px solid var(--accent-primary);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    width: 820px;
    height: 620px;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    overflow: hidden;
    }

.compare-odds-modal.hidden
    {
    display: none !important;
    }

.compare-odds-modal.compare-odds-standalone
    {
    position: relative;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 10;
    }

body.mode-compare-odds
    {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    }

#compare-odds-root
    {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    }

.compare-odds-modal.compare-odds-standalone .compare-odds-header
    {
    cursor: default;
    border-radius: 0;
    }

.compare-odds-modal.compare-odds-standalone .compare-odds-table-container
    {
    min-height: 0 !important;
    }

.compare-odds-header
    {
    background-color: #3b82f6;
    color: #ffffff;
    padding: calc(6px * var(--zoom-factor)) calc(10px * var(--zoom-factor));
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
    }

.compare-odds-title
    {
    margin: 0;
    font-size: calc(15px * var(--zoom-factor));
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    }

.compare-odds-header-actions
    {
    display: flex;
    align-items: center;
    gap: 8px;
    }

.compare-odds-setup-btn
    {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: calc(3px * var(--zoom-factor)) calc(8px * var(--zoom-factor));
    font-size: calc(12px * var(--zoom-factor));
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
    }

.compare-odds-setup-btn:hover
    {
    background-color: rgba(255, 255, 255, 0.35);
    border-color: #ffffff;
    }

.compare-odds-menu-btn
    {
    background: transparent;
    color: #ffffff;
    border: none;
    font-size: calc(16px * var(--zoom-factor));
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    }

.compare-odds-close
    {
    color: #ffffff;
    font-size: calc(20px * var(--zoom-factor));
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }

.compare-odds-body
    {
    padding: calc(10px * var(--zoom-factor));
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    }

/* Setup Drawer / Popover */
.compare-odds-setup-drawer
    {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--accent-primary);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    padding: 12px;
    z-index: 1050;
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

.compare-odds-setup-drawer.hidden
    {
    display: none !important;
    }

.compare-odds-setup-header
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 6px;
    }

.compare-odds-setup-title
    {
    font-weight: bold;
    font-size: 14px;
    color: var(--text-primary);
    }

.compare-odds-setup-quick-actions
    {
    display: flex;
    gap: 6px;
    }

.compare-odds-btn-small
    {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    }

.compare-odds-btn-small:hover
    {
    background-color: var(--bg-quaternary);
    color: var(--text-primary);
    }

.compare-odds-sportsbooks-grid
    {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    background: var(--bg-primary);
    }

.compare-odds-sb-item
    {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    }

.compare-odds-sb-item:hover
    {
    border-color: var(--accent-primary);
    }

.compare-odds-setup-footer
    {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border-primary);
    padding-top: 8px;
    }

/* Event Selection Section */
.compare-odds-section
    {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    }

.compare-odds-row
    {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    }

.compare-odds-label
    {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-secondary);
    min-width: 75px;
    }

.compare-odds-input,
.compare-odds-select
    {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    outline: none;
    transition: border-color 0.15s;
    }

.compare-odds-input:focus,
.compare-odds-select:focus
    {
    border-color: var(--accent-primary);
    }

.compare-odds-btn-action
    {
    background-color: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    }

.compare-odds-btn-action:hover
    {
    background-color: #2563eb;
    }

.compare-odds-btn-secondary
    {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    }

.compare-odds-btn-secondary:hover
    {
    background-color: var(--bg-quaternary);
    }

/* Event Banner */
.compare-odds-event-banner
    {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

.compare-odds-event-matchup
    {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary);
    }

.compare-odds-event-meta
    {
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    gap: 12px;
    align-items: center;
    }

.compare-odds-event-badge
    {
    background-color: #3b82f6;
    color: #ffffff;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: bold;
    }

/* Comparison Table */
.compare-odds-table-container
    {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    min-height: 200px;
    }

.compare-odds-table
    {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
    }

.compare-odds-table.is-stale,
.compare-odds-table-container.is-stale .compare-odds-table
    {
    opacity: 0.35;
    filter: grayscale(80%);
    pointer-events: none;
    user-select: none;
    transition: opacity 0.2s ease, filter 0.2s ease;
    }

.compare-odds-table-container.is-stale .compare-odds-legend-container
    {
    opacity: 0.35;
    filter: grayscale(80%);
    transition: opacity 0.2s ease, filter 0.2s ease;
    }

.compare-odds-table thead th
    {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 700;
    padding: 6px 8px;
    border-bottom: 2px solid var(--border-primary);
    border-right: 1px solid var(--border-secondary);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    }

.compare-odds-table thead th:last-child
    {
    border-right: none;
    }

.compare-odds-table tbody td
    {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-secondary);
    border-right: 1px solid var(--border-secondary);
    color: var(--text-primary);
    white-space: nowrap;
    }

.compare-odds-table tbody td:last-child
    {
    border-right: none;
    }

.compare-odds-table tbody tr:hover
    {
    background-color: rgba(59, 130, 246, 0.08);
    }

.compare-odds-sb-name
    {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    }

.compare-odds-sb-badge
    {
    background-color: var(--bg-quaternary);
    color: var(--text-secondary);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 10px;
    font-weight: 600;
    }

.compare-odds-value-main
    {
    font-weight: bold;
    }

.compare-odds-value-sub
    {
    font-size: 11px;
    color: var(--text-tertiary);
    }

.compare-odds-age-tag
    {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    }

.compare-odds-empty
    {
    text-align: center;
    padding: 30px;
    color: var(--text-tertiary);
    font-style: italic;
    }

.compare-odds-loading
    {
    text-align: center;
    padding: 30px;
    color: var(--accent-primary);
    font-weight: bold;
    }

/* Dark mode adjustments */
[data-theme="dark"] .compare-odds-modal
    {
    background-color: var(--bg-secondary);
    border-color: #3b82f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    }

[data-theme="dark"] .compare-odds-event-banner
    {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.15));
    border-color: rgba(59, 130, 246, 0.4);
    }

.compare-odds-orientation-toggle
    {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    overflow: hidden;
    }

.compare-odds-toggle-btn
    {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    padding: calc(3px * var(--zoom-factor)) calc(8px * var(--zoom-factor));
    font-size: calc(11px * var(--zoom-factor));
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    user-select: none;
    }

.compare-odds-toggle-btn:hover
    {
    background-color: rgba(255, 255, 255, 0.28);
    }

.compare-odds-toggle-btn.active
    {
    background-color: #ffffff;
    color: #1e3a8a;
    font-weight: bold;
    }

.compare-odds-cell-ts
    {
    display: block;
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 3px;
    white-space: nowrap;
    }

.compare-odds-market-title
    {
    font-weight: bold;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    }

.compare-odds-table.vertical-layout thead th
    {
    min-width: 140px;
    text-align: center;
    }

.compare-odds-table.vertical-layout thead th:first-child
    {
    min-width: 140px;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 15;
    background-color: var(--bg-tertiary);
    }

.compare-odds-table.vertical-layout tbody td:first-child
    {
    font-weight: bold;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: var(--bg-secondary);
    border-right: 2px solid var(--border-primary);
    }

/* Compare Odds Custom Event Dropdown */
.compare-odds-dropdown
    {
    position: relative;
    flex: 1;
    min-width: 180px;
    display: inline-block;
    }

.compare-odds-dropdown-trigger
    {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: calc(4px * var(--zoom-factor)) calc(8px * var(--zoom-factor));
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    font-size: calc(12px * var(--zoom-factor));
    cursor: pointer;
    text-align: left;
    min-height: calc(28px * var(--zoom-factor));
    user-select: none;
    box-sizing: border-box;
    }

.compare-odds-dropdown-trigger:hover:not(:disabled)
    {
    border-color: var(--accent-primary);
    }

.compare-odds-dropdown-trigger:disabled
    {
    opacity: 0.5;
    cursor: not-allowed;
    }

.compare-odds-dropdown-trigger .dropdown-trigger-content
    {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

.compare-odds-dropdown-trigger .dropdown-caret
    {
    font-size: 10px;
    opacity: 0.7;
    margin-left: auto;
    flex-shrink: 0;
    }

.compare-odds-dropdown-menu
    {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: calc(320px * var(--zoom-factor));
    overflow-y: auto;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    z-index: 1200;
    margin: 0;
    padding: 2px 0;
    }

.compare-odds-dropdown-item
    {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(6px * var(--zoom-factor)) calc(10px * var(--zoom-factor));
    font-size: calc(12px * var(--zoom-factor));
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.12s ease;
    }

.compare-odds-dropdown-item:last-child
    {
    border-bottom: none;
    }

.compare-odds-dropdown-item:hover
    {
    background-color: rgba(56, 189, 248, 0.15);
    }

.compare-odds-dropdown-item.selected
    {
    background-color: rgba(56, 189, 248, 0.25);
    font-weight: 600;
    }

.compare-odds-dropdown .rot-pill
    {
    font-family: inherit;
    font-size: calc(12px * var(--zoom-factor));
    flex-shrink: 0;
    }

.compare-odds-dropdown .rot-pill.rot-int
    {
    color: var(--text-primary);
    font-weight: 700;
    }

.compare-odds-dropdown .rot-pill.rot-uni
    {
    color: #64748b;
    font-weight: 400;
    }

.compare-odds-dropdown .matchup-text
    {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

.compare-odds-dropdown .time-text
    {
    color: var(--text-secondary);
    font-size: calc(11px * var(--zoom-factor));
    flex-shrink: 0;
    }

/* Reset Opener indicator */
.compare-odds-value-main.compare-odds-reset-val
    {
    color: #eab308; /* vibrant yellow */
    }

[data-theme="dark"] .compare-odds-value-main.compare-odds-reset-val
    {
    color: #facc15; /* bright yellow for dark theme */
    }

.compare-odds-reset-badge
    {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    vertical-align: middle;
    cursor: help;
    user-select: none;
    }

.compare-odds-legend-container
    {
    width: 100%;
    margin-top: 4px;
    }

.compare-odds-legend
    {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: 4px;
    font-size: 11px;
    color: #fef08a;
    line-height: 1.4;
    }

.compare-odds-legend .legend-reset-icon
    {
    font-size: 13px;
    flex-shrink: 0;
    }

[data-theme="light"] .compare-odds-legend
    {
    background-color: #fef9c3;
    border-color: #fde047;
    color: #854d0e;
    }