/* Responsive Design */
@media (max-width: 768px) {
  .filter-section,
  .filter-league_stat {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Stack charts vertically on smaller screens */
  .chart-pair {
    flex-direction: column;
  }
}

/* Main container for side-by-side layout */
.content-container {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap; /* Allow wrapping if needed */
}

/* One block for Team, one for League, side by side */
.team-stats-block,
.league-stats-block {
  width: 100%; /* Default to full width */
  box-sizing: border-box;
  min-width: 300px; /* Prevent blocks from becoming too small */
}

/* Use media query for side-by-side layout on larger screens */
@media (min-width: 992px) { /* Adjust breakpoint as needed */
    .team-stats-block,
    .league-stats-block {
        width: calc(50% - 10px); /* Adjust width considering the gap */
    }
}


/* Headings for each block */
.team-stats-block h2,
.league-stats-block h2 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

/* Container for each table */
.table-container {
  width: 100%;
  overflow-x: auto;
  margin-top: 0.5rem;
}

/* .table-splits styling — kept in table.css (single source of truth).
   This file only carries the page-level layout (containers, blocks). */

/* Stat filter (the small clickable boxes) */
.filter-list_stats ul {
  display: flex;
  flex-wrap: wrap; /* Allow filters to wrap */
  list-style-type: none;
  padding: 0;
  gap: 10px;
  margin-bottom: 10px; /* Add space below filters */
}
.filter-list_stats li {
  padding: 8px 15px; /* Slightly smaller padding */
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
  font-size: 0.85rem; /* Adjust font size */
}
.filter-list_stats li:hover {
  background-color: #007BFF;
  color: white;
}
.filter-list_stats li.active {
  background-color: #007BFF;
  color: white;
}

/* Regular/Playoff toggle buttons */
.filter-type_stat {
   margin-top: 10px; /* Space above buttons if filters wrap */
}
.filter-type_stat button {
  padding: 8px 15px; /* Match filter padding */
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #f0f0f0;
  transition: background-color 0.3s, color 0.3s;
   font-size: 0.85rem; /* Match filter font size */
}
.filter-type_stat button.active {
  background-color: #007BFF;
  color: white;
}
.filter-type_stat button:hover {
  background-color: #007BFF;
  color: white;
}

/* === CHART STYLES === */

.charts-container {
  display: flex;
  flex-direction: column; /* Stack chart pairs vertically */
  gap: 30px; /* Reduced gap between chart pairs */
  margin-top: 30px; /* Reduced margin above charts */
  padding: 0 10px; /* Add some padding on the sides */
}

.chart-pair {
  display: flex;
  gap: 20px; /* Space between scatter and histogram */
  width: 100%;
  /* padding: 0 20px; -- Removed padding here, added to charts-container */
  flex-wrap: wrap; /* Allow charts to wrap on smaller screens */
}

/* --- Styles to fix squeezed charts --- */
.chart-wrapper, /* Apply height to all chart wrappers */
.chart-pair .chart-wrapper { /* Ensure selector specificity */
  flex: 1 1 45%;    /* Allow grow/shrink, aim for half width */
  min-width: 280px; /* Slightly smaller min-width */
  position: relative; /* REQUIRED for Chart.js responsiveness */
  height: 300px;    /* <<<< SET CHART HEIGHT HERE (Adjust 300px as needed) */
  box-sizing: border-box; /* Include padding/border in element's total width/height */
}

/* Ensure canvas element behaves correctly within the wrapper */
canvas {
    max-width: 100%;
    max-height: 100%;
    display: block; /* Prevents extra space below canvas */
}
/* --- End styles to fix squeezed charts --- */


/* Optional: Add some padding/background to chart wrappers for visual separation */

.chart-wrapper {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
}
.charts-container {
  position: relative;
}

@media (max-width: 768px) {
  .content-container {
    padding: 14px;
  }

  .team-stats-block,
  .league-stats-block {
    width: 100%;
    min-width: 0;
  }
}