/* Scoped styles for the Monthly Financials card */

.monthly-financials-card .chart-container {
  position: relative;
  height: 400px;
  width: 100%;
}

.monthly-financials-card .btn-group-sm .btn {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem; /* slightly tighter */
  line-height: 1; /* exact baseline alignment */
  height: 28px; /* force identical height */
  border-width: 1px; /* normalize border thickness */
  white-space: nowrap; /* prevent wrapping to two lines */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Keep icons compact so toggle buttons don't look taller */
.monthly-financials-card .btn-group-sm .btn i {
  font-size: 0.8em; /* slightly smaller to avoid stretching height */
  line-height: 1;
}

.monthly-financials-card .btn-outline-primary.active,
.monthly-financials-card .btn-outline-secondary.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.monthly-financials-card .btn-outline-secondary.active {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

/* Ensure right-hand border is visible on the last button in each group */
.monthly-financials-card .btn-group.btn-group-sm > .btn:last-child,
.monthly-financials-card .btn-group-sm .btn-group > .btn:last-child {
  border-right-width: 1px !important;
  border-right-style: solid !important;
}

/* Make toggle controls appear as discrete buttons, not a merged card */
.monthly-financials-card .btn-group.btn-group-sm[aria-label="Display Options"] {
  background: transparent; /* no group background */
  box-shadow: none; /* remove any shadow */
}

.monthly-financials-card .btn-group.btn-group-sm[aria-label="Display Options"] > .btn {
  margin-left: 0 !important; /* cancel Bootstrap's border-collapsing negative margin */
}

@media (max-width: 768px) {
  .monthly-financials-card .chart-container { height: 300px; }
  .monthly-financials-card .btn-group { flex-wrap: wrap; }
  .monthly-financials-card .btn-group .btn { flex: 1 0 auto; }
}