/* ============================================================
   Filter grammar — shared across Kế hoạch · Phòng ban · Dự báo
   giá trị · Người dùng · Lịch sử. Chip/popover styling is inherited
   from .slicerchip / .slicerpop in bi-primitives.css — nothing is
   redefined here, only laid out. No new colour, radius or type step.

   Sizing is CONTAINER-relative, not viewport-relative: the espresso
   drawer narrows the canvas by ~264px, so a viewport breakpoint
   would fire at the wrong moment.
   ============================================================ */
.fbar { container-type: inline-size; width: 100%; }
.fbar__in {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) 0;
}
.fbar__lead {
  flex-shrink: 0; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-tertiary);
}
.fbar__chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.fbar__trigger { display: none; gap: var(--space-2); }
.fbar__badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px;
  background: var(--accent-primary); color: var(--surface-raised);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.fbar__search {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 1 1 200px; min-width: 150px; max-width: 340px;
  min-height: 32px; padding: 0 var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--line-default); border-radius: 999px;
  color: var(--ink-tertiary);
  transition: border-color var(--dur-state) var(--ease-enter);
}
.fbar__search:focus-within { border-color: var(--accent-primary); }
.fbar__input {
  flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: 13px; color: var(--ink-primary);
}
.fbar__input::placeholder { color: var(--ink-tertiary); }
.fbar__input::-webkit-search-cancel-button { cursor: pointer; }

.fbar__tail { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex-shrink: 0; }
.fbar__count {
  margin: 0; font-size: 13px; color: var(--ink-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fbar__count b { color: var(--ink-primary); font-weight: 600; }
.fbar__count-of { color: var(--ink-tertiary); }

/* ---- mobile sheet body (rendered inside the Modal primitive) ---- */
.fbar-sheet { display: flex; flex-direction: column; gap: var(--space-4); }
.fbar-sheet__group { border: none; margin: 0; padding: 0; }
.fbar-sheet__legend {
  padding: 0 0 var(--space-2); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-tertiary);
}
.fbar-sheet__opts { display: flex; flex-direction: column; gap: 2px; }
.fbar-sheet__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; color: var(--ink-secondary); text-align: left; cursor: pointer;
  transition: background var(--dur-state) var(--ease-enter), color var(--dur-state) var(--ease-enter);
}
.fbar-sheet__opt:hover { background: var(--surface-sunk); color: var(--ink-primary); }
.fbar-sheet__opt.is-on { color: var(--accent-primary); font-weight: 600; background: var(--accent-primary-soft); }
.fbar-sheet__clear {
  align-self: flex-start; min-height: 44px; padding: var(--space-2) var(--space-4);
  background: none; border: 1px dashed var(--line-default); border-radius: 999px;
  font: inherit; font-size: 13px; color: var(--ink-tertiary); cursor: pointer;
}
.fbar-sheet__clear:hover { color: var(--ink-secondary); border-color: var(--ink-tertiary); }

/* ---- the two empty states ---- */
.fempty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-7) var(--space-5); text-align: center;
}
.fempty__mark {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px;
  background: var(--surface-sunk); color: var(--ink-tertiary);
}
.fempty--nomatch .fempty__mark { color: var(--accent-primary); background: var(--accent-primary-soft); }
.fempty__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-primary); }
.fempty__body { margin: 0; max-width: 46ch; font-size: 13px; color: var(--ink-tertiary); text-wrap: pretty; }

/* ---- container steps ---- */
@container (max-width: 900px) {
  .fbar__lead { display: none; }
  .fbar__tail { margin-left: 0; }
  .fbar__search { max-width: none; }
}
@container (max-width: 620px) {
  .fbar__chips { display: none; }
  .fbar__trigger { display: inline-flex; }
  .fbar__in { gap: var(--space-2); }
  .fbar__search { flex: 1 1 100%; order: 3; max-width: none; }
  .fbar__tail { order: 4; width: 100%; justify-content: space-between; }
}