/* Root colors unchanged */
:root {
    --item-color1: #7BD1E3; /* Cyan */
    --item-color2: #F0AA7B; /* Light orange */
    --item-color3: #58a944; /* Medium green */
    --item-color4: #155866; /* Dark teal */
    --item-color5: #98D08A; /* Olive green */
    --item-color6: #7974ff; /* Lighter purple */
    --item-color7: #E7E6E6; /* Light grey */
    --item-color8: #44BDFF; /* Brighter blue */
    --item-color9: #BF8F00; /* Light blue */
    --item-color10: #65499d; /* Medium purple */
    --item-color11: #99FF66; /* Light green */
    --item-color12: #E85375; /* Pinkish red */
    --item-color13: #cf0d3a; /* Dark red */
    --item-color14: #30368B; /* Dark blue */
    --item-color15: #AC2FF2; /* Bright purple */
    --item-color16: #F5C7A7; /* Light peach */
    --item-color17: #692dc3; /* Dark purple */
    --item-color18: #E67425; /* Dark orange */
    --item-color19: #F8C5D0; /* Soft pink */
    --item-color20: #417e3c; /* Dark green */
    --item-color21: #78380E; /* Lighter purple (duplicate) */
    --item-color22: #E7BC59; /* Mustard yellow */
    --item-color23: #FFD966; /* Light yellow */
    --item-color24: #BFE9FF; /* Light cyan */
    --item-color25: #44546A; /* Dark grey-blue */
    --item-color26: #7361df; /* Light purple */
    --item-color27: #a21636; /* Dark red */
    --item-color28: #FFE699; /* Pale yellow */
    --item-color29: #F8C5D0; /* Soft pink */
    --item-color30: #FFC000; /* Bright yellow */
  }
  
  /* Root colors unchanged */
  :root {
    --item-color1: #7BD1E3;
    --item-color2: #F0AA7B;
    /* Other color variables remain the same */
  }/* Ensure that the body takes the full height of the screen */
  body {
    margin: 0;
    padding: 0;
    height: 700px;
    overflow: hidden; /* Prevents body scrollbars */
  }
  
  #main-container {
    width: 1000px; /* Fixed width */
    height: 700px; /* Fixed height */
    margin: 1em auto; /* Centers the container horizontally with top/bottom margin */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden; /* Prevents scrollbars within the container */
  }
  
  /* Container for chart and legend */
  #chart-legend-container {
    display: flex;
    flex-direction: row; /* Ensures the legend stays on the right */
    width: 100%;
    height: 100%; /* Makes sure container takes full height */
    overflow: hidden;
    box-sizing: border-box;
  }
  
  /* Chart container */
  #chart-container {
    flex: 5;
    height: 100%; /* Matches container height */
    overflow: hidden;
  }
  

  /* Note container at the bottom - no scrolling */
  .note-container {
    padding: 10px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    overflow: hidden; /* Prevents scrolling */
    flex-shrink: 0;
    height: 20vh; /* Fixed height for notes */
    box-sizing: border-box;
  }
  
  /* Legend item styles */
  .legend-item {
    cursor: pointer;
    margin-bottom: 5px;
    padding: 5px;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #000;
    background-color: #ffffff;
    border: 1px solid #E8E8E8;
    border-radius: 5px;
    display: block;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
  }
  
  .legend-item.hidden {
    text-decoration: line-through;
    color: #E8E8E8;
  }
  
  /* Hover effect for legend items, matching toggle-button */
  .legend-item:hover {
  transform: scale(1); /* Ensures no scaling effect */
  overflow: hidden; /* Prevents unintended overflow */
  box-shadow: 0 1px 1px 1px #E8E8E8; /* Matches the shadow of toggle buttons */
  transition: box-shadow 0.3s ease; /* Smooth transition */
  }
  
  
  /* Container for the Show All / Hide All buttons */
  #legend-actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
  }
  
  .toggle-button {
    cursor: pointer;
    padding: 5px 10px;
    font-size: 12px;
    font-family: 'Aptos', sans-serif;
    font-weight: 400;
    color: #000;
    background-color: #ffffff;
    border: 1px solid #E8E8E8;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
  }
  
  .toggle-button:hover {
   transform: scale(1) !important;
    overflow: hidden !important;
    box-shadow: 0 1px 1px 1px #E8E8E8 !important;
  }
  
  /***BARS****/
  
  
  /* Bubble value filters */
  #bubble-value-filters {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 10px; /* Add spacing between buttons */
  align-items: stretch; /* Make buttons stretch to the container width if needed */
  margin: 10px 0; /* Add some margin for spacing */
  }
  
  .bubble-value-button {
  cursor: pointer;
  padding: 5px 10px;
  font-size: 12px;
  font-family: 'Aptos', sans-serif;
  font-weight: 400;
  color: #000;
  background-color: #ffffff;
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  transition: all 0.3s ease; /* Smooth transition for hover and active states */
  }
  
  .bubble-value-button:hover {
  border: 1px solid #ccc; /* Light blue border on hover */
  }
  
  .bubble-value-button.selected {
  border: 1px solid #ccc; /* Only border color for selected button */
  }
  
  .bubble-value-button.disabled {
  color: #E8E8E8; /* Greyed-out text for disabled toggle */
  text-decoration: line-through; /* Strikethrough effect for unselected button */
  cursor: not-allowed; /* Change cursor to indicate it's not clickable */
  background-color: #f9f9f9; /* Subtle grey background for disabled button */
  }
  
  
  /* Dropdown styles */
  #trade-select {
  cursor: pointer;
  padding: 5px 10px;
  font-size: 12px;
  font-family: 'Aptos', sans-serif;
  font-weight: 400;
  color: #000;
  background-color: #ffffff;
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  transition: all 0.3s ease;
  }
  
  
  #trade-select:hover {
  background-color: #f0f0f0;
  }

  /* New parent container for legend-header and legend-container */
#legend-container-parent {
    display: flex;
    flex-direction: column; /* Stack the header and legend vertically */
    flex: 0 0 20%; /* Matches the width of the legend-container */
    max-width: 250px;
    height: 100%; /* Matches the height of the chart-legend-container */
    box-sizing: border-box;
    padding: 0;
    overflow: hidden; /* Prevents scrollbars */
  }
  
  /* New container above the legend */
  #legend-header-container {
    padding: 10px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    text-align: center; /* Center-align text in the header */
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Truncates text with ellipsis if it's too long */
  }
  
  /* Ensure #legend-container adjusts */
  #legend-container {
    flex: 1; /* Fills the remaining space in the parent */
    padding: 10px;
    overflow-y: auto;
    max-height: 100%; /* Matches the available space */
    box-sizing: border-box;
  }
  

  .highcharts-legend {
    pointer-events: none; /* Disable clicking on the legend */
}