
/* Container for the buttons */
.dashboard-toggles-container {
  max-width: 1200px;
  margin: 3rem auto 2rem auto;
  padding: 0 1rem;
  text-align: center;
}

/* Button group layout */
.button-group {
  display: inline-flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

    .button-group button {
      background-color: var(--accent); /* Dark blue background */
      color: white;
      padding: 0.8rem 1.5rem;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 600;
      transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      flex-shrink: 0; /* Prevent buttons from shrinking if space is tight */
    }

    .button-group button:hover:not(.active) { /* Hover effect only for non-active buttons */
      background-color: #004488; /* Slightly darker on hover */
      transform: translateY(-2px); /* Slight lift effect */
    }

    .button-group button.active {
      background-color: #002244; /* Even darker to show active state */
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); /* Inset shadow for "pressed" look */
      cursor: default; /* No hover effect when active */
      transform: none; /* No lift effect when active */
    }

/* Hover effect for non-active buttons */
.button-group button:hover:not(.active) {
  background-color: #5a5a5a; /* darker gray on hover */
}

/* Dashboard container box */
.dashboard-box {
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto;
  min-height: 700px;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background: white;
}

.dashboard-box object {
  width: 100%;
  height: 100%;
  display: block;
}


/* Tableau embed sizing */
.tableauPlaceholder {
  width: 100%;
  height: 400vh;
  overflow: hidden;
}

/* Responsive iframe/object inside Tableau container */
.tableauPlaceholder object,
.tableauPlaceholder iframe {
  width: 100%;
  height: 800px;
  border: none;
  display: block;
}
