/* Shared filter bar (CLAUDE.md §13.2).
   Extracted from components.css (CSS split, CLAUDE.md §12).
   Consumed by frontend/js/components/filter-bar.js's createFilterBar().
   Used by Audit Log, Published Roster, Account Security, Shift
   Distribution, Chat, Swap Requests, Leave Requests
   and the staffing-rules table filter. */
@layer components {

/* ── Shared filter bar (components/filter-bar.js) ────────────────────────────
   Generic replacement for the page-prefixed .audit-filter-* / .pr-filter-* /
   .dist-filter-* / .security-filter-* families — same "compact main row,
   collapsible panel behind a Filters toggle with an active-count badge,
   removable active-filter chips" shape, now shared by every view instead of
   independently hand-rolled per page. */
.filter-bar {
  /* Height of a single-line .input: a checkbox label of this height sits at
     the row's (or panel's) bottom edge on the same line as the inputs. */
  --filter-control-height: calc(2 * var(--space-2) + var(--text-base) * 1.5 + 2px);
  margin-bottom: var(--space-4);
}

.filter-bar-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* A labelled select or date field stacks its label above the control, so a
   row that holds one aligns every control on the input baseline instead of
   centring it: the search box and buttons then line up with the
   select rather than with the middle of its label-plus-control box. */
.filter-bar-main:has(> .filter-field > label[for]) { align-items: flex-end; }
.filter-bar-main:has(> .filter-field > label[for]) > .filter-search-wrap { align-self: auto; }

.filter-search-wrap {
  position: relative;
  align-self: center;
  display: block;
  margin: 0;
  min-width: 0;
  width: min(440px, 100%);
}

.filter-search-icon {
  display: flex;
  align-items: center;
  line-height: 1;
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.1rem;
  pointer-events: none;
}

/* The wrapping <label> sets --text-sm, which the input would inherit; keep
   it at the base size so it is as tall as every other .input in the row. */
.input.filter-search { padding-left: 2.25rem; width: 100%; font-size: var(--text-base); }
.filter-toggle { white-space: nowrap; }

.filter-count {
  margin-left: var(--space-1);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: .7rem;
  line-height: 18px;
}

.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}

.filter-panel[hidden] { display: none; }
.filter-field { min-width: 180px; flex: 1; }
.filter-field label,
.filter-field legend { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 500; }
fieldset.filter-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-field--check { flex: 0 0 auto; align-self: flex-end; }
.filter-field--check label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--filter-control-height); margin-bottom: 0; font-weight: 400; white-space: nowrap; }

.active-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 34px;
  margin-top: var(--space-2);
}
.active-filters[hidden] { display: none; }

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.filter-chip:hover { border-color: var(--primary); color: var(--text); }
.filter-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.filter-chip-static { cursor: default; background: var(--surface-sunk); }
.filter-chip-static:hover { border-color: var(--border); color: var(--muted); }
/* .btn already sets `display`, which otherwise beats the `[hidden]` UA rule's
   specificity — same fix every other hidden-`.btn`-class element in this file
   needs. */
.filter-clear-all[hidden] { display: none; }

/* Preset/date-range widgets are built by each view as a `type: 'custom'`
   field (see e.g. admin-audit.js), but share this chrome so a 7/30/90-day
   picker looks the same wherever it appears. */
.filter-presets {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.filter-preset {
  flex: 1;
  min-height: 34px;
  padding: 0 var(--space-2);
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.filter-preset:last-child { border-right: 0; }
.filter-preset:hover { background: var(--surface); color: var(--text); }
.filter-preset.active { background: var(--primary); color: white; }

.filter-custom-dates { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.filter-custom-dates[hidden] { display: none; }
.filter-custom-dates label { flex: 1; color: var(--muted); font-size: .75rem; }
.filter-custom-dates .input { margin-top: 2px; }

@media (max-width: 700px) {
  .filter-bar-main { align-items: stretch; }
  .filter-search-wrap { flex: 1 0 100%; min-width: 0; }
  .filter-panel { flex-direction: column; align-items: stretch; }
  .filter-presets { overflow-x: auto; }
  .filter-preset { flex: 0 0 auto; }
  .filter-custom-dates { flex-direction: column; }
  .active-filters { align-items: flex-start; }
}

} /* @layer components */