/**
 * Filter Panel — dropdown groups and/or colored toggle buttons that drive
 * filter-grid.js against a target filter grid.
 */

.filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}

/* The panel's flexbox field item is a grid item in .grid-container
   (grid-auto-flow: column, one column per sibling) — without this it
   only gets a single card's worth of width instead of the full row. */
.flex_item:has(> [data-component-id="dougcty_theme:filter-panel"]) {
  grid-column: 1 / -1;
}

.filter-panel__toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.filter-panel__toggle {
  border: 1px solid #bebebe;
  border-radius: 3px;
  background-color: #fff;
  padding: 6px 14px;
  cursor: pointer;
}

.filter-panel__toggle.is-active {
  border-color: #15345e;
  font-weight: bold;
}

.filter-panel__toggle--reset {
  border-color: #bebebe;
}

.filter-panel__toggle--green { background-color: #c0e2cf; }
.filter-panel__toggle--red { background-color: #dec4b0; }
.filter-panel__toggle--yellow { background-color: #e6e9ba; }

.filter-panel__dropdowns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.filter-panel__dropdown-label {
  font-weight: bold;
}

/* Matches the legacy .btn-select / .ehBtnContainer .btn-select rules in
   department.css (EH filter dropdowns): bordered, green-tinted select. */
.filter-panel__dropdown {
  padding: 5px 8px;
  border: 1px solid #bebebe;
  border-radius: 3px;
  background-color: #8da65638;
}