/* Shared list-page FilterBar (components/ui/FilterBar.jsx).
   Row 1: search + actions. Row 2: filter controls grid. Row 3: active chips.
   The collapse shell (.kk-filterbar / .kk-filterbar-toggle / .kk-filterbar-body)
   keeps its mobile behavior from mobile.css; everything new uses .kk-fb-*.
   Loaded after mobile.css so equal-specificity overrides win by source order. */

/* ------------------------------------------------- Row 1: search + actions */
.kk-fb-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.kk-fb-search {
  flex: 1 1 240px;
  min-width: 200px;
}
.kk-fb-search .input-group-text {
  background: #ffffff;
}
.kk-fb-search .form-control {
  border-left: 0;
  height: 38px;
}
.kk-fb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.kk-fb-actions .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ------------------------------------------------ Row 2: filter controls */
.kk-fb-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
/* Bars without a search input: fields share the top row with the actions */
.kk-fb-fields-inline {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
/* Pin react-select to the theme's .form-control metrics (38px / 5px / #e8e8f7)
   so selects, text inputs and date pickers all share one height. */
.kk-fb-fields .react-select__control {
  min-height: 38px;
  border-radius: 5px;
  border-color: #e8e8f7;
  font-size: 0.875rem;
}
.kk-fb-fields .react-select__value-container {
  padding: 0 8px;
}
/* react-datepicker's wrapper is inline-block and ignores the grid track width */
.kk-fb-fields .react-datepicker-wrapper,
.kk-fb-fields .react-datepicker__input-container {
  display: block;
  width: 100%;
}
.kk-fb-fields .form-control {
  height: 38px;
}

/* --------------------------------------------------- Row 3: active chips */
.kk-fb-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eef0f7;
}
.kk-fb-active-label {
  font-size: 12px;
  font-weight: 600;
  color: #6e7687;
}
/* Rides .tag.tag-pill; the theme's .tag forces white text (broken on a light
   tint) so re-color with the brand vars — dark.css re-points both vars, which
   gives the dark theme for free. */
.kk-fb-chip {
  color: var(--primary-bg-color) !important;
  background-color: var(--primary-transparentcolor);
  align-items: center;
  gap: 4px;
  line-height: 2.1em;
}
.kk-fb-chip-x {
  border: 0;
  padding: 0 0 0 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.kk-fb-chip-x .fe {
  font-size: 12px;
}
.kk-fb-chip-x:focus-visible {
  outline: 2px solid var(--primary-bg-color);
  outline-offset: 1px;
  border-radius: 50%;
}
.kk-fb-clear {
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-bg-color);
  text-decoration: underline;
  cursor: pointer;
}
.kk-fb-count {
  margin-left: auto;
  font-size: 12px;
  color: #6e7687;
  white-space: nowrap;
}

/* -------------------------------------------------------------- dark mode */
body.dark-theme .kk-fb-search .input-group-text {
  background: transparent;
}
body.dark-theme .kk-fb-active {
  border-top-color: rgba(255, 255, 255, 0.08);
}
body.dark-theme .kk-fb-active-label,
body.dark-theme .kk-fb-count {
  color: #8a8a99;
}

/* ------------------------------------------------------------- mobile tier */
@media (max-width: 991.98px) {
  /* Buttons already stack full-width via mobile.css .kk-filterbar-body .btn */
  .kk-fb-actions {
    margin-left: 0;
    width: 100%;
  }
  .kk-fb-count {
    margin-left: 0;
    width: 100%;
  }
}