/* 
 * Shared CSS for sticky headers in odds tables
 * This file contains only generic sticky header styles that work with any column structure
 */

/* Ensure consistent box-sizing for all table elements */
#oddsTable,
#oddsTable *,
#oddsTable2,
#oddsTable2 * {
  box-sizing: border-box !important;
}

/* Fix for content showing behind rounded corners - use mask image */
#tableContainer .table-wrapper,
#tableContainer2 .table-wrapper {
  /* Use CSS mask to properly clip content to border-radius */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* Sticky table headers and first column */
#tableContainer .table-wrapper,
#tableContainer2 .table-wrapper {
  position: relative;
  max-height: calc(100vh - 120px) !important;
  border: 2px solid #4CAF50 !important;
  border-radius: 12px !important;
  margin: 0 auto !important;
  padding: 0 !important; /* Remove padding - table content should touch the border */
  box-sizing: border-box !important;
  display: inline-block !important;
  width: auto !important;
  /* Remove min-width to allow shrinking to table size */
  max-width: calc(100vw - 40px) !important;
  /* Enable scrolling but with strict controls for iOS */
  overflow: auto !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  /* Use black background to prevent bleed-through */
  background-color: #000000;
  /* iOS-specific fixes */
  -webkit-overflow-scrolling: auto !important; /* Disable momentum */
  overscroll-behavior: none !important; /* Changed from contain to none */
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
  /* Hardware acceleration without will-change */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Hide horizontal scrollbar when overflow is minimal */
#tableContainer .table-wrapper.hide-horizontal-scroll,
#tableContainer2 .table-wrapper.hide-horizontal-scroll {
  overflow-x: hidden !important;
}

/* Style scrollbars */
.table-wrapper::-webkit-scrollbar {
  width: 15px;
  height: 12px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: #4CAF50;
  border-radius: 6px;
}

/* Table container */
#tableContainer,
#tableContainer2 {
  width: 100%;
  position: relative;
  padding-bottom: 35px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  /* Create stacking context */
  z-index: 0;
  /* Ensure pseudo-elements are not clipped */
  overflow: visible;
  /* Prevent container from being draggable on mobile */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Base table styles */
#oddsTable,
#oddsTable2 {
  border-collapse: collapse !important; /* Back to collapse to prevent gaps */
  border-spacing: 0 !important;
  width: auto !important;
  position: relative;
  border: none !important;
  margin: 0 !important; /* Reset margin - overflow issue fixed in styles.css */
  /* Prevent table from being pulled beyond bounds */
  contain: layout;
}

/* Ensure thead has proper stacking context */
#oddsTable thead,
#oddsTable2 thead {
  position: relative;
  z-index: 50; /* Higher than tbody content but below individual sticky headers */
  display: table-header-group; /* Ensure proper table structure */
}

/* Header row styling */
#oddsTable thead th,
#oddsTable2 thead th {
  background-color: #1a1a1a;
  padding: 10px 12px;
  line-height: 1.4;
  min-width: 60px;
  position: relative; /* Needed for pseudo-elements */
}

/* First header row (column headers) - but NOT title headers */
/* Exclude .classic-table so book color styles from styles.css can apply */
#oddsTable:not(.classic-table) thead tr:first-child th:not(.table-title-header),
#oddsTable2:not(.classic-table) thead tr:first-child th:not(.table-title-header) {
  position: -webkit-sticky; /* Safari support */
  position: sticky;
  top: 0; /* Stick to top of scrollable container */
  box-sizing: border-box;
  z-index: 100; /* Much higher z-index to stay above tbody cells */
  background-color: #1a1a1a !important; /* Force opaque background */
  /* Force the element to be treated as sticky */
  display: table-cell;
  vertical-align: middle;
  /* Shadow for visual separation */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

/* Add border using pseudo-element for first row - but NOT title headers or classic tables */
#oddsTable:not(.classic-table) thead tr:first-child th:not(.table-title-header)::after,
#oddsTable2:not(.classic-table) thead tr:first-child th:not(.table-title-header)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #4CAF50 !important;
  z-index: 2;
  display: block !important;
  visibility: visible !important;
}

/* Removed - now using ::after for bottom border */

/* Add gap coverage extending below first row - but NOT for classic tables */
#oddsTable:not(.classic-table) thead tr:first-child::after,
#oddsTable2:not(.classic-table) thead tr:first-child::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: -1px;
  right: -1px;
  height: 6px;
  background-color: #1a1a1a !important;
  z-index: 98; /* Just below second row */
  pointer-events: none;
  display: block;
}

/* Add coverage above first row to hide content behind rounded corners - but NOT for classic tables */
#oddsTable:not(.classic-table) thead tr:first-child th:not(.table-title-header)::before,
#oddsTable2:not(.classic-table) thead tr:first-child th:not(.table-title-header)::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -1px;
  right: -1px;
  height: 8px;
  background-color: #000000 !important; /* Solid black to match table background */
  z-index: 101; /* Above scrolling content */
  pointer-events: none;
  display: block;
}

/* Extra coverage for corner cells to handle rounded borders - but NOT for classic tables */
#oddsTable:not(.classic-table) thead tr:first-child th:first-child:not(.table-title-header)::before,
#oddsTable2:not(.classic-table) thead tr:first-child th:first-child:not(.table-title-header)::before {
  left: -4px; /* Extend beyond cell to cover corner */
  width: calc(100% + 4px);
}

#oddsTable:not(.classic-table) thead tr:first-child th:last-child:not(.table-title-header)::before,
#oddsTable2:not(.classic-table) thead tr:first-child th:last-child:not(.table-title-header)::before {
  right: -4px; /* Extend beyond cell to cover corner */
  width: calc(100% + 4px);
}

/* Override styles.css border rules for first cell - maximum specificity - NOT for classic table */
.table-wrapper #oddsTable:not(.classic-table) thead tr:first-child th:first-child,
.table-wrapper #oddsTable2:not(.classic-table) thead tr:first-child th:first-child {
  border-top: none !important;
  border-left: none !important;
  border-right: 3px solid #4CAF50 !important;
  border-bottom: none !important;
}

/* Additional rule with even higher specificity to remove bottom border - NOT for classic table */
#tableContainer .table-wrapper #oddsTable:not(.classic-table) thead tr:first-child th:first-child,
#tableContainer2 .table-wrapper #oddsTable2:not(.classic-table) thead tr:first-child th:first-child {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  border-bottom: none !important;
  /* Ensure proper box model */
  box-sizing: border-box !important;
  /* Use outline as a fallback to create the bottom border effect */
  outline: none !important;
}

/* Override to ensure first cell gets the full-width bottom border - but NOT for classic tables */
#tableContainer .table-wrapper #oddsTable:not(.classic-table) thead tr:first-child th:first-child::after,
#tableContainer2 .table-wrapper #oddsTable2:not(.classic-table) thead tr:first-child th:first-child::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important; /* Thicker than the default 2px */
  background-color: #4CAF50 !important;
  z-index: 20 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Removed pseudo-element - using actual borders instead */

/* Second header row (filters) */
#oddsTable thead tr:nth-child(2) th,
#oddsTable2 thead tr:nth-child(2) th {
  position: -webkit-sticky; /* Safari support */
  position: sticky;
  top: var(--first-row-height, 44px); /* Dynamic based on actual row 1 height */
  background-color: #1a1a1a !important; /* Force opaque background */
  box-sizing: border-box;
  vertical-align: middle;
  height: 44px;
  line-height: 1;
  padding: 4px 6px 0 6px !important; /* Add top padding to compensate for negative margin */
  text-align: center;
  z-index: 99; /* Just below first row but well above tbody content */
  border-top: none;
  border-bottom: none;
  border-radius: 0 !important; /* Remove any rounded corners */
  /* Force the element to be treated as sticky */
  display: table-cell;
  /* Shadow for visual separation */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

/* Pull row 2 up to overlap with row 1 */
#oddsTable:not(.classic-table) thead tr:nth-child(2),
#oddsTable2:not(.classic-table) thead tr:nth-child(2) {
  margin-top: -4px;
}

/* Add top pseudo-element to cover any gap - but NOT for classic tables */
#oddsTable:not(.classic-table) thead tr:nth-child(2) th::before,
#oddsTable2:not(.classic-table) thead tr:nth-child(2) th::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background-color: #1a1a1a !important;
  z-index: 2;
  pointer-events: none; /* Prevent interaction issues */
}

/* Add border using pseudo-element for second row - but NOT for classic tables */
#oddsTable:not(.classic-table) thead tr:nth-child(2) th::after,
#oddsTable2:not(.classic-table) thead tr:nth-child(2) th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #4CAF50; /* Changed from #333 to green */
  z-index: 1;
}

/* For non-first-column cells in row 2, ensure the horizontal border extends fully - but NOT for classic tables */
#oddsTable:not(.classic-table) thead tr:nth-child(2) th:not(:first-child)::after,
#oddsTable2:not(.classic-table) thead tr:nth-child(2) th:not(:first-child)::after {
  right: 0; /* Extend all the way to the right */
  z-index: 1;
}

/* Enable pseudo-element for row 2 first cell to match other cells - but NOT for classic tables */
#oddsTable:not(.classic-table) thead tr:nth-child(2) th:first-child::after,
#oddsTable2:not(.classic-table) thead tr:nth-child(2) th:first-child::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background-color: #4CAF50 !important;
  z-index: 1 !important;
  display: block !important;
  visibility: visible !important;
}

/* Make first column sticky in BOTH header rows - but NOT for title headers or classic table */
#oddsTable:not(.classic-table) thead tr:first-child th:first-child:not(.table-title-header),
#oddsTable2:not(.classic-table) thead tr:first-child th:first-child:not(.table-title-header) {
  position: -webkit-sticky !important; /* Safari support */
  position: sticky !important;
  left: 0 !important;
  z-index: 101 !important; /* Highest z-index for row 1, column 1 intersection */
  background-color: #1a1a1a !important;
  padding: 8px; /* Same padding as other cells */
  padding-right: 8px !important;
  overflow: visible !important; /* Changed from hidden to allow pseudo-element */
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative !important; /* For pseudo-element positioning */
  /* Ensure cell respects column width */
  width: var(--first-column-width, 200px) !important;
  max-width: var(--first-column-width, 200px) !important;
  box-sizing: border-box;
  /* Force all borders explicitly */
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: 3px solid #4CAF50 !important;
  border-bottom: none !important;
}

/* Override styles.css for row 2 first cell - NOT for classic table */
.table-wrapper #oddsTable:not(.classic-table) thead tr:nth-child(2) th:first-child,
.table-wrapper #oddsTable2:not(.classic-table) thead tr:nth-child(2) th:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 100 !important; /* High z-index for row 2, column 1 intersection */
  background-color: #1a1a1a !important;
  padding: 0 4px !important;
  padding-right: 4px !important;
  vertical-align: middle !important;
  overflow: visible !important;
  box-sizing: border-box;
  /* Position sticky is already set above, don't override it */
  /* Override all borders */
  border-top: none !important;
  border-left: none !important;
  border-right: 3px solid #4CAF50 !important;
  border-bottom: none !important;
  border-radius: 0 !important; /* Remove any rounded corners */
}

/* Override styles.css for tbody first cells - NOT for classic table */
.table-wrapper #oddsTable:not(.classic-table) tbody td:first-child,
.table-wrapper #oddsTable2:not(.classic-table) tbody td:first-child {
  position: sticky !important;
  left: 0 !important;
  background-color: #0a0a0a !important; /* Same as other td cells */
  z-index: 10 !important; /* High z-index to stay above scrolled content */
  /* Override all borders */
  border-top: none !important;
  border-left: none !important;
  border-right: 3px solid #4CAF50 !important;
  border-bottom: 1px solid #4CAF50 !important;
  padding-right: 8px !important;
}

/* Header cells have their own border handling - NOT for classic table */
#oddsTable:not(.classic-table) thead th:first-child,
#oddsTable2:not(.classic-table) thead th:first-child {
  position: sticky !important;
  left: 0 !important;
  background-color: #1a1a1a !important;
  z-index: 100 !important; /* High z-index to stay above tbody content */
  /* Use actual border */
  border-right: 3px solid #4CAF50 !important;
}

/* Force sticky positioning on all first column cells with inline style override - NOT for classic table */
#oddsTable:not(.classic-table) th:first-child[style*="position"],
#oddsTable:not(.classic-table) td:first-child[style*="position"],
#oddsTable2:not(.classic-table) th:first-child[style*="position"],
#oddsTable2:not(.classic-table) td:first-child[style*="position"] {
  position: sticky !important;
  left: 0 !important;
}

/* Hover effect for first column - NOT for classic table or hovered-cell */
#oddsTable:not(.classic-table) th:first-child:hover:not(.hovered-cell),
#oddsTable:not(.classic-table) td:first-child:hover:not(.hovered-cell),
#oddsTable2:not(.classic-table) th:first-child:hover:not(.hovered-cell),
#oddsTable2:not(.classic-table) td:first-child:hover:not(.hovered-cell) {
  background-color: #2a2a2a !important; /* Lighter dark background */
  transition: background-color 0.2s ease;
}

/* Maintain hover effect for header cells - NOT for classic table */
#oddsTable:not(.classic-table) thead th:first-child:hover,
#oddsTable2:not(.classic-table) thead th:first-child:hover {
  background-color: #2a2a2a !important;
}

/* Ensure filters in header cells are visible */
#oddsTable thead th input,
#oddsTable thead th select,
#oddsTable2 thead th input,
#oddsTable2 thead th select {
  position: relative;
  z-index: 1;
  background-color: #2a2a2a;
  border: 1px solid #4CAF50;
  color: #fff;
  padding: 4px 6px;
  margin: 2px;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  line-height: normal;
  height: 28px;
  font-size: 13px;
  width: calc(100% - 24px); /* Account for info icon and margin */
  max-width: 100%;
  min-width: 50px; /* Ensure minimum width for "All" to be visible */
}

/* Ensure filter cells don't wrap content */
#oddsTable thead tr:nth-child(2) th,
#oddsTable2 thead tr:nth-child(2) th {
  white-space: nowrap !important;
  overflow: hidden !important; /* Changed from visible to contain content */
}

/* Ensure all cells in row 2 have no rounded corners */
#oddsTable thead tr:nth-child(2) th:first-child,
#oddsTable thead tr:nth-child(2) th:last-child,
#oddsTable2 thead tr:nth-child(2) th:first-child,
#oddsTable2 thead tr:nth-child(2) th:last-child {
  border-radius: 0 !important;
}

/* Ensure Book column has enough width for filter */
#oddsTable th[data-column="best_book"],
#oddsTable2 th[data-column="best_book"] {
  min-width: 60px; /* Ensure enough space for "Book" title and "All" filter */
  max-width: 60px; /* Constrain column width */
}

/* Special handling for Book column filter to ensure "All" is visible */
#oddsTable th[data-column="best_book"] select,
#oddsTable2 th[data-column="best_book"] select {
  padding-left: 6px; /* Slightly more padding for better visibility */
  min-width: 50px; /* Ensure dropdown itself has minimum width */
}

/* Smaller font for book filter options (except "All") */
#bookFilter option:not(:first-child) {
  font-size: 11px;
}

/* Special handling for first column filter */
#oddsTable thead tr:nth-child(2) th:first-child input,
#oddsTable thead tr:nth-child(2) th:first-child select,
#oddsTable2 thead tr:nth-child(2) th:first-child input,
#oddsTable2 thead tr:nth-child(2) th:first-child select {
  width: calc(100% - 40px) !important; /* More space for info icon */
  max-width: calc(var(--first-column-width, 200px) - 40px) !important;
  font-size: 13px !important;
  margin: 2px 4px !important;
  box-sizing: border-box !important;
  height: 28px !important;
  padding: 4px 6px !important;
}

/* First column should look like other columns */
#oddsTable th:first-child,
#oddsTable2 th:first-child {
  /* No special font weight */
}

/* Smooth scrolling */
.table-wrapper {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .table-wrapper {
    max-height: calc(100vh - 80px);
    width: 100% !important;
    /* iOS-specific scroll fixes */
    position: relative !important;
    -webkit-overflow-scrolling: auto !important;
    overflow: auto !important; /* Changed back to auto to avoid unnecessary scrollbars */
    /* Create new stacking context */
    isolation: isolate;
    contain: layout style paint;
  }
  
  /* Reduce table container padding on mobile */
  #tableContainer,
  #tableContainer2 {
    padding-bottom: 15px; /* Reduced from 35px */
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Adjust table wrapper max width for tighter spacing */
  #tableContainer .table-wrapper,
  #tableContainer2 .table-wrapper {
    max-width: calc(100vw - 20px) !important; /* Reduced from 40px */
  }
  
  /* Reduce table cell padding on mobile */
  #oddsTable th, 
  #oddsTable td,
  #oddsTable2 th,
  #oddsTable2 td {
    padding: 6px 8px;     /* Reduced from 10px 12px */
    font-size: 14px;      /* Slightly smaller text */
  }
  
  /* Adjust header padding specifically */
  #oddsTable thead th,
  #oddsTable2 thead th {
    padding: 6px 8px;     /* Match body cells */
  }
  
  /* Keep filter row compact */
  #oddsTable thead tr:nth-child(2) th,
  #oddsTable2 thead tr:nth-child(2) th {
    padding: 0 4px !important;  /* Even tighter for filter row */
  }
}

/* Additional mobile-friendly styles */
#oddsTable tbody td,
#oddsTable2 tbody td {
  background-color: #0a0a0a;
  padding: 10px 12px;
  line-height: 1.4;
}

/* Override tbody padding on mobile */
@media (max-width: 768px) {
  #oddsTable tbody td,
  #oddsTable2 tbody td {
    padding: 6px 8px;
  }
  
  /* Disable momentum scrolling and prevent elastic bounce on mobile */
  #tableContainer .table-wrapper,
  #tableContainer2 .table-wrapper {
    -webkit-overflow-scrolling: auto !important; /* Disable momentum scrolling */
    /* Additional touch controls for mobile */
    touch-action: pan-x pan-y; /* Allow normal scrolling but prevent pinch/zoom */
    /* Remove any transforms that might cause issues */
    -webkit-transform: none !important;
    transform: none !important;
    /* Additional iOS-specific fixes */
    position: relative !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent overscroll on iOS */
    overflow: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }
  
  /* Ensure table doesn't exceed wrapper bounds */
  #oddsTable,
  #oddsTable2,
  #fbbtOddsTable,
  #fbbtOddsTable2 {
    max-width: 100% !important;
    table-layout: auto !important;
  }
}

/* Style for frozen first column in tbody - NOT for classic table */
#oddsTable:not(.classic-table) tbody td:first-child,
#oddsTable2:not(.classic-table) tbody td:first-child {
  background-color: #0a0a0a; /* Same as other td cells */
  position: relative !important; /* For pseudo-element positioning */
  /* No special font weight */
}

/* Add shadows for better visual separation */
#oddsTable thead th,
#oddsTable2 thead th {
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

#oddsTable:not(.classic-table) td:first-child,
#oddsTable:not(.classic-table) th:first-child,
#oddsTable2:not(.classic-table) td:first-child,
#oddsTable2:not(.classic-table) th:first-child {
  /* Remove horizontal shadow to match other cells */
  box-shadow: none;
}

/* Enhanced shadows when scrolling */
#oddsTable.scrolled-vertical thead th,
#oddsTable2.scrolled-vertical thead th {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
}

#oddsTable:not(.classic-table).scrolled-horizontal td:first-child,
#oddsTable:not(.classic-table).scrolled-horizontal th:first-child,
#oddsTable2:not(.classic-table).scrolled-horizontal td:first-child,
#oddsTable2:not(.classic-table).scrolled-horizontal th:first-child {
  /* Add subtle outer shadow when scrolled - preserve border */
  box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.8) !important;
  border-right: 3px solid #4CAF50 !important;
}

/* Removed pseudo-element approach - using real borders instead */

/* Scroll hint arrow positioned under table */
.scroll-hint {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 14px;
  color: #4CAF50;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  font-weight: 500;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

/* Adjust scroll hint position on mobile to prevent overlap */
@media (max-width: 768px) {
  .scroll-hint {
    position: static;    /* Use static positioning */
    display: block;      /* Block display for full width control */
    text-align: left;    /* Left align the text */
    margin-top: 8px;     /* Space between table and hint */
    font-size: 12px;     /* Smaller text */
    padding: 5px 10px;   /* Add padding around text */
    background-color: rgba(0, 0, 0, 0.9);  /* Semi-transparent background */
    border-radius: 4px;
    width: fit-content;  /* Only as wide as content */
  }
  
  /* Keep the reduced padding */
  #tableContainer,
  #tableContainer2 {
    padding-bottom: 15px; /* Keep the reduced padding */
  }
}

/* Show with animation when horizontal scroll is needed */
#tableContainer.has-horizontal-scroll:not(.has-scrolled) .scroll-hint,
#tableContainer2.has-horizontal-scroll:not(.has-scrolled) .scroll-hint {
  opacity: 1;
  animation: scrollHint 2s ease-in-out infinite;
}

/* Fade out when scrolled */
#tableContainer.has-scrolled .scroll-hint,
#tableContainer2.has-scrolled .scroll-hint {
  opacity: 0;
  animation: none;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0s 0.5s;
}

@keyframes scrollHint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Show hint on mobile when scroll is needed */
@media (max-width: 768px) {
  #tableContainer.has-horizontal-scroll .scroll-hint,
  #tableContainer2.has-horizontal-scroll .scroll-hint {
    display: block !important;
  }
}

/* iOS-specific elastic scroll prevention */
@supports (-webkit-touch-callout: none) {
  /* Target iOS devices specifically */
  #tableContainer .table-wrapper,
  #tableContainer2 .table-wrapper {
    position: relative !important;
    overflow: scroll !important;
    -webkit-overflow-scrolling: auto !important;
    /* Create a new stacking context */
    isolation: isolate;
  }
  
  /* Wrapper inner content control */
  #oddsTable,
  #oddsTable2,
  #fbbtOddsTable,
  #fbbtOddsTable2 {
    position: relative !important;
    /* Prevent content from extending beyond natural size */
    min-width: 0 !important;
    width: max-content !important;
    /* Lock the table in place */
    transform: translate3d(0,0,0);
  }
  
  /* Prevent body scroll when touching table */
  body.table-scrolling {
    position: fixed !important;
    width: 100% !important;
    overflow: hidden !important;
  }
}

/* First column styles - same as other columns - NOT for classic table */
#oddsTable:not(.classic-table) th:first-child,
#oddsTable2:not(.classic-table) th:first-child {
  cursor: pointer; /* Default pointer for sorting */
  /* Standard overflow handling */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Constrain to column width */
  width: var(--first-column-width, 200px) !important;
  min-width: var(--first-column-width, 200px) !important;
  max-width: var(--first-column-width, 200px) !important;
  box-sizing: border-box;
  position: relative !important; /* For pseudo-element positioning */
}

/* Removed - conflicting with border pseudo-element */

/* Override pointer cursor in resize zone - NOT for classic table */
#oddsTable:not(.classic-table) th:first-child:hover,
#oddsTable2:not(.classic-table) th:first-child:hover {
  cursor: pointer;
}

#oddsTable:not(.classic-table) th:first-child.resize-hover,
#oddsTable2:not(.classic-table) th:first-child.resize-hover {
  cursor: col-resize !important;
}

/* Remove resizing styles - NOT for classic table */
#oddsTable:not(.classic-table) th:first-child.resizing,
#oddsTable2:not(.classic-table) th:first-child.resizing {
  /* Removed - no special formatting */
}

/* Remove hover border styling - NOT for classic table */
#oddsTable:not(.classic-table) th:first-child:hover,
#oddsTable2:not(.classic-table) th:first-child:hover {
  /* No special hover styles */
}

/* Remove resize zone styles - NOT for classic table */
#oddsTable:not(.classic-table) th:first-child.resize-hover,
#oddsTable2:not(.classic-table) th:first-child.resize-hover {
  /* Removed - no special formatting */
}

/* Column width CSS variables and styles */
:root {
  --first-column-width: 200px;
  --scrollbar-width: 17px; /* Will be calculated dynamically */
}

/* Hover icon in ALL table headers - increased size */
#oddsTable thead th img[src*="hover.png"],
#oddsTable2 thead th img[src*="hover.png"] {
  width: 28px !important;
  height: 28px !important;
  vertical-align: middle;
  margin-left: 4px;
  display: inline-block;
  position: relative;
  /* Removed top: -1px to prevent cutoff */
}

/* Specific override for first column if needed */
#oddsTable thead tr:first-child th:first-child img[src*="hover.png"],
#oddsTable2 thead tr:first-child th:first-child img[src*="hover.png"] {
  width: 28px !important;
  height: 28px !important;
}

/* Wrapper div in first column header */
#oddsTable thead tr:first-child th:first-child > div,
#oddsTable2 thead tr:first-child th:first-child > div {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-top: 2px !important; /* Add padding to accommodate hover icon */
  padding-bottom: 2px !important;
}

/* Resizable column styles for first column - NOT for classic table */
#oddsTable:not(.classic-table) thead tr th:first-child,
#oddsTable:not(.classic-table) tbody tr td:first-child,
#oddsTable2:not(.classic-table) thead tr th:first-child,
#oddsTable2:not(.classic-table) tbody tr td:first-child {
  width: var(--first-column-width) !important;
  min-width: var(--first-column-width) !important;
  max-width: var(--first-column-width) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  /* Use real border */
  border-right: 3px solid #4CAF50 !important;
  position: sticky !important;
  left: 0 !important;
}

/* CRITICAL: Override inline styles with maximum specificity - NOT for classic table */
/* These rules ensure first column always stays on top when scrolling */
body .page-wrapper .main-content #tableContainer .table-wrapper #oddsTable:not(.classic-table) thead tr:first-child th:first-child,
body .page-wrapper .main-content #tableContainer2 .table-wrapper #oddsTable2:not(.classic-table) thead tr:first-child th:first-child {
  z-index: 101 !important;
}

body .page-wrapper .main-content #tableContainer .table-wrapper #oddsTable:not(.classic-table) thead tr:nth-child(2) th:first-child,
body .page-wrapper .main-content #tableContainer2 .table-wrapper #oddsTable2:not(.classic-table) thead tr:nth-child(2) th:first-child {
  z-index: 100 !important;
}

body .page-wrapper .main-content #tableContainer .table-wrapper #oddsTable:not(.classic-table) tbody td:first-child,
body .page-wrapper .main-content #tableContainer2 .table-wrapper #oddsTable2:not(.classic-table) tbody td:first-child {
  z-index: 10 !important;
}

/* Additional specificity for templates with inline styles - NOT for classic table */
#oddsTable:not(.classic-table) thead tr:first-child th:first-child[style*="z-index"],
#oddsTable2:not(.classic-table) thead tr:first-child th:first-child[style*="z-index"] {
  z-index: 101 !important;
}

#oddsTable:not(.classic-table) thead tr:nth-child(2) th:first-child[style*="z-index"],
#oddsTable2:not(.classic-table) thead tr:nth-child(2) th:first-child[style*="z-index"] {
  z-index: 100 !important;
}

#oddsTable:not(.classic-table) tbody td:first-child[style*="z-index"],
#oddsTable2:not(.classic-table) tbody td:first-child[style*="z-index"] {
  z-index: 10 !important;
}

/* ===== Shared Classes for Table Headers ===== */

/* Header text styling - replaces inline style="display: inline-block; vertical-align: middle;" */
.bet-header-text {
  display: inline-block;
  vertical-align: middle;
}

/* Hover icon styling - replaces inline style="width: 20px; height: 20px; vertical-align: middle; margin-left: 4px; display: inline-block;" */
.table-hover-icon {
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle;
  margin-left: 4px;
  display: inline-block;
}

/* Column resize handle - replaces inline style="float: right; margin-right: 0; cursor: col-resize; font-size: 16px; line-height: 1;" */
.column-resize-handle {
  float: right;
  margin-right: 0;
  cursor: col-resize;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  color: #4CAF50;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.column-resize-handle:hover {
  opacity: 1;
}

/* Header text wrapper for h2h tables - replaces inline style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; box-sizing: border-box;" */
.header-text-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

/* Hidden column utility - replaces inline style="display:none;" */
.hidden-column {
  display: none !important;
}