/* =========================================================
   Zeal Portal — Filter bar

   Tier 3 list-screen toolbar: search (left) · filter pills ·
   sort + view selectors (right). One row, dense, uses tokens.
   The chip register inside the pills cluster is intentionally
   left to the consuming surface — User Admin scopes a tighter
   rectangular pill via `.ua-layout` overrides; other surfaces
   may keep the system pill default or define their own.

   Markup:
     <div class="filter-bar">
       <label class="input--with-icon filter-bar__search">
         <input class="input" type="search" />
       </label>
       <div class="filter-bar__pills">
         <button class="chip">all</button>
         <button class="chip is-active">active</button>
         …
       </div>
       <div class="filter-bar__right">
         <span class="filter-bar__group">
           sort <select class="select">…</select>
         </span>
         <span class="filter-bar__group">
           view <select class="select">…</select>
         </span>
       </div>
     </div>
   ========================================================= */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 0;
  font-family: var(--font-std);
  font-size: 12px;
}
.filter-bar__search { flex: 0 1 320px; min-width: 220px; }
.filter-bar__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-bar__right {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.filter-bar__right .select {
  font-family: var(--font-std);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  padding: 5px 26px 5px 10px;
}
.filter-bar__group { display: inline-flex; align-items: center; gap: 6px; }