/* Filters Toggle Button */
.filters-toggle {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #1a2851;
  color: white;
  border: none;
  padding: 12px 8px;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
}

.filters-toggle:hover {
  background: #34495e;
  padding-right: 12px;
}

.filters-toggle.active {
  left: 320px;
}

/* Filters Sidebar */
.filters-sidebar {
  position: fixed;
  left: -320px;
  top: 60px; /* Account for header */
  bottom: 0;
  width: 320px;
  background: white;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.filters-sidebar.active {
  left: 0;
}

/* Filters Header */
.filters-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  border-top: 2px solid #1a2851;
}

.filters-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.filters-close-btn {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
  box-shadow: none;
}

.filters-close-btn:hover {
  background: #e0e0e0;
}

/* Filters Content */
.filters-content {
  flex: 1;
  overflow-y: auto;
}

/* Filter Sections */
.filter-section {
  border-bottom: 1px solid #e0e0e0;
}

.filter-section:last-child {
  border-bottom: none;
}

.filter-section-header {
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: background 0.2s;
  margin-bottom: 3px;
}

.filter-section-header span {
  font-size: 12px;
  font-weight: 600;
  color: #1a2851;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.filter-section-header i {
  font-size: 20px;
  color: #999;
  transition: transform 0.3s;
}

.filter-section.collapsed .filter-section-header i {
  transform: rotate(-90deg);
}

.filter-section-content {
  padding: 0 20px 16px;
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.filter-section.collapsed .filter-section-content {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Filter Groups */
.filter-group {
  margin-bottom: 12px;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

.filter-sublabel {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: #666;
}

/* Filter Inputs */
.filter-input,
.filter-select {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  transition: border-color 0.2s;
}

.filter-input:focus,
.filter-select:focus {
  outline: none;
  border-color: #1a2851;
}

.filter-select {
  cursor: pointer;
  background: white;
}

/* Custom Date Range */
.custom-date-range {
  margin-top: 12px;
  padding-top: 12px;
}

.date-input-group {
  margin-bottom: 8px;
}

/* Range Inputs */
.range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-input {
  flex: 1;
}

.range-separator {
  font-size: 12px;
  color: #999;
}

/* Checkboxes */
.filter-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  color: #333;
}

.filter-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  cursor: pointer;
}

.filter-checkbox:hover {
  color: #1a2851;
}

/* Autocomplete Dropdown */
.filter-autocomplete {
  position: relative;
}

.filter-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10002;
  display: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.filter-section:has(.filter-autocomplete-dropdown.active)
  .filter-section-content {
  overflow: visible !important;
}

.filter-autocomplete-dropdown.active {
  display: block;
}

.filter-autocomplete-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.filter-autocomplete-item:hover,
.filter-autocomplete-item.selected {
  background: #f0f0f0;
}

.filter-autocomplete-item strong {
  color: #1a2851;
}

/* Filters Footer */
.filters-footer {
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-apply-filters,
.btn-clear-filters {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-apply-filters {
  background: #1a2851;
  color: white;
}

.btn-apply-filters:hover {
  background: #2a3861;
}

.btn-clear-filters {
  background: white;
  color: #666;
  border: 1px solid #ddd;
}

.btn-clear-filters:hover {
  background: #f0f0f0;
}

/* Dark Overlay */
.filters-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent; /* Changed from rgba(0, 0, 0, 0.5) */
  z-index: 999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* Add this so you can still interact with the page */
}

.filters-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto; /* Keep this active to allow clicking to close */
}

/* Main Container Shift */
.main-container {
  position: relative; /* Add this */
  left: 0; /* Set initial state for transition */
  transition: left 0.3s ease; /* Animate the 'left' property */
}

/* Active Filters Display */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.filter-tag button {
  background: none;
  border: none;
  color: #2e7d32;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  box-shadow: none;
}

.filter-tag button:hover {
  color: #1b5e20;
}

@media (max-width: 480px) {
  .filters-toggle.active {
    display: none; /* Hide completely when filters are open */
  }

  .filters-sidebar {
    width: 100%;
    max-width: none;
  }

  .filters-close-btn {
    display: flex !important; /* Ensure X button is visible */
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .filters-toggle {
    padding: 10px 6px;
    font-size: 12px;
    transition: all 0.3s ease;
  }

  .filters-toggle.active {
    /* Position it at the edge of the sidebar */
    left: 320px; /* Match the sidebar width */
    max-width: 320px; /* Match the sidebar max-width */
    border-radius: 0 8px 8px 0; /* Keep original radius */
    z-index: 1003;
    opacity: 1;
    pointer-events: auto;
  }

  .filters-sidebar {
    width: 85%;
    max-width: 320px;
    left: -100%;
  }

  .filters-sidebar.active {
    left: 0;
  }

  .filters-close-btn {
    display: flex;
  }

  .main-container.shifted {
    margin-left: 0; /* Don't shift on mobile */
  }

  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .active-filters {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .filters-sidebar {
    width: 100%;
    max-width: none;
  }
}

/* Fix overflow shadow issue */
#betsTableContainer {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Remove any box-shadow insets that might be causing the line */
}

#betsTable {
  min-width: 100%;
  /* Prevent shadow bleed */
  transform: translateZ(0);
}

/* If the main container has overflow issues when shifted */
.main-container.shifted {
  overflow-x: hidden;
}

/* Alternative: clip the entire table section */
.table-section {
  overflow: hidden;
}