/* ============================================================
   Vandelay Companies — Filter bar
   Active only inside .vc-design-context.

   The search + selects + Apply row that sits above a list
   table. Extracted from tickets/ticket_list.html so every
   list page renders the same control strip.
   ============================================================ */

.vc-design-context .vc-filter-bar {
  background: var(--vc-paper-2);
  border: 1px solid var(--vc-rule);
  border-radius: var(--vc-r-md);
  padding: var(--vc-space-3);
  margin-bottom: var(--vc-space-3);
}
.vc-design-context .vc-filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-2);
  align-items: stretch;
}
.vc-design-context .vc-filter-bar__row .vc-select { flex: 1 1 140px; max-width: 220px; }
.vc-design-context .vc-filter-bar__search {
  position: relative;
  flex: 2 1 240px;
  min-width: 200px;
}
.vc-design-context .vc-filter-bar__search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vc-ink-3);
  font-size: 14px;
  pointer-events: none;
}
.vc-design-context .vc-filter-bar__search input {
  /* Don't lean on Bootstrap's global border-box reset — the 34px left
     padding for the search icon would otherwise push the input past its
     flex track and over the next control. */
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px 8px 34px;
  font-family: var(--vc-sans);
  font-size: 13.5px;
  color: var(--vc-ink);
  background: var(--vc-surface);
  border: 1px solid var(--vc-rule-strong);
  border-radius: var(--vc-r-md);
}
.vc-design-context .vc-filter-bar__search input:focus {
  outline: none;
  border-color: var(--vc-navy);
  box-shadow: 0 0 0 3px var(--vc-navy-tint);
}
@media (max-width: 599.98px) {
  .vc-design-context .vc-filter-bar__row { flex-direction: column; }
  .vc-design-context .vc-filter-bar__row .vc-select { max-width: none; }
}