/* Root colors */
:root {
  --item-color1: #7bd1e3; /* Cyan */
  --item-color2: #f0aa7b; /* Light orange */
  --item-color3: #58a944; /* Medium green */
  --item-color26: #7361df; /* Light purple */
  --item-color16: #f5c7a7; /* Light peach */
  --item-color23: #ffd966; /* Light yellow */
  --item-color30: #ffc000; /* Bright yellow */
}

/* Body styles */
body {
  margin: 0;
  padding: 0;
  height: 700px;
  overflow: hidden; /* Prevents body scrollbars */
}

/* Main container */
#main-container {
  width: 100vw;
  height: 100vh;
  margin: 1em auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

/* Chart and legend container */
#chart-legend-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Chart container */
#container {
  flex: 3;
  height: 100%;
  overflow: hidden;
}

/* Legend container with vertical scroll */
#legend-container {
  flex: 0 0 20%; /* Fixed width on the right side */
  padding: 10px;
  overflow-y: auto; /* Allows vertical scrolling in legend */
  max-height: 100%; /* Matches container height */
  max-width: 250px;
  box-sizing: border-box;
}

/* Note container */
.note-container {
  padding: 10px;
  font-size: 14px;
  font-family: 'Aptos', sans-serif;
  font-weight: 400;
  background-color: #ffffff;
  border-top: 1px solid #ddd;
  overflow: hidden;
  flex-shrink: 0;
  height: 20vh;
  box-sizing: border-box;
}

/* 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 */
#country-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;
}

#country-select:hover {
  background-color: #f0f0f0;
}

/* Legend items */
.legend-item-with-color {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px;
  font-size: 12px;
  font-family: 'Aptos', sans-serif;
  font-weight: 400;
  color: #000;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.legend-item-with-color .color-box {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid #ccc;
}

.legend-item-with-color:hover {
  background-color: #f0f0f0;
}

.legend-item-with-color.hidden {
  text-decoration: line-through;
  color: #e8e8e8;
}

.legend-item-with-color .color-box.hidden {
  opacity: 0.3;
}

/* Tech filters */
#tech-filters {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.tech-button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.tech-button:hover {
  background-color: #e6e6e6;
}

.tech-button.active {
  background-color: #d4d4d4;
  border-color: #aaa;
}

/* Status buttons */
.status-button {
  margin: 5px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.status-button.announced {
  background-color: var(--item-color26);
  color: #000;
}

.status-button.operational {
  background-color: var(--item-color16);
  color: #000;
}

.status-button.under-construction {
  background-color: var(--item-color23);
  color: #000;
}
.color-box {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid #ccc; /* Optional border for visibility */
}