/* GENERATED FILE — DO NOT EDIT DIRECTLY.
 * Canonical source: frontend/src/styles/css/04-semantic-classes/filter-surface.css
 * Edit the canonical React stylesheet source, then regenerate mirrors with:
 *   node scripts/sync-public-stylesheets.cjs
 */
/* ============================================================
 * Filter Surface (Canonical BEM Block)
 * ============================================================ */

.filter-surface {
  display: grid;
  grid-template-columns: var(--grid-template-cols-12);
  gap: var(--space-9px);
  container-type: inline-size;
  container-name: filter-surface;
  align-items: start;
  align-self: stretch;
  justify-content: flex-start;
  width: var(--size-100pct);
  min-width: 0;
  margin-bottom: 0;
}

/* Narrow hosts (side panels/drawers and mid-width panels) should stack instead
   of compressing multiple semantic-width controls into unreadable slivers. */
@container filter-surface (width < 720px) {
  .filter-surface > * {
    grid-column: var(--grid-span-full-start) / var(--grid-span-full-end);
  }

  .filter-surface > [class*="data--"] {
    width: var(--size-100pct);
    min-width: 0;
    max-width: none;
  }
}

.filter-surface__logic-label {
  font-size: var(--font-size-12);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-1px);
  user-select: none;
  flex-shrink: 0;
}

.filter-surface > * {
  min-width: 0;
  grid-column: span var(--filter-surface-column-span);
}

/* Data-width classes (e.g. .data--id) set a hardcoded pixel width/max-width
   sized for a plain-text table cell — too narrow for an interactive filter
   control, which needs room for a chevron icon and padding on top of the
   text. Reused as a filter control's dataClassName, that undersized cap
   crushed the trigger down to an unreadable sliver (T-2249 follow-up).
   FIX: raise the floor to a size that fits an icon-bearing trigger, but keep
   it as a real max — do NOT remove the cap outright. Removing it entirely
   let some fields (e.g. .data--date, a 12ch-wide class) balloon to fill
   their full grid-column span: .form__row-field (a same-specificity,
   unrelated class also present on these elements, owned by the vertical
   form layout, not filter surfaces) defaults its OWN max-width to `none`
   and grid-column to `span 12`, and an unbounded max-width here left that
   default free to stretch the box across the whole row. max() only ever
   raises a too-small value; it never removes a real one, so a class whose
   own width already exceeds the floor (or whose grid-column genuinely spans
   wide on purpose) is unaffected. Also re-assert the intended grid-column
   span here (this selector's specificity beats .form__row-field's) so a
   correctly-narrow field doesn't sit inside an oversized grid cell either. */
.filter-surface > [class*="data--"] {
  /* ch, not rem: every other width token in this system (--width-Nch) is
     character-based so a human can eyeball "how wide is this" by the number
     alone. 16ch covers icon + padding + a short value/placeholder for any
     select-style trigger; --width-8ch measured ~53px for 8ch, so 16ch lands
     comfortably over the ~90-110px an icon-bearing trigger needs. */
  --filter-surface-trigger-min-width: var(--width-16ch);
  width: max(var(--width, 0px), var(--filter-surface-trigger-min-width));
  min-width: max(var(--width, 0px), var(--filter-surface-trigger-min-width));
  max-width: max(var(--width, 0px), var(--filter-surface-trigger-min-width));
  grid-column: span var(--filter-surface-column-span, 3);
}

.filter-surface__actions-cell {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.filter-surface__state-filter-cluster {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-3px);
  grid-column: span 4;
}

.filter-surface__state-operator-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-3px);
}

.filter-surface__operator-text {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-12);
}

#state-filter-operator-label {
  display: block;
}

.filter-surface__operator-switch {
  display: block;
  align-self: center;
  --switch-track-width: var(--size-44px);
  --switch-track-height: var(--size-24px);
  --switch-thumb-size: var(--size-18px);
  --switch-thumb-offset: var(--space-3px);
  --switch-thumb-offset-checked: calc(var(--size-44px) - var(--size-24px) + var(--space-3px));
}

@media (max-width: 767px) {
  .filter-surface {
    grid-template-columns: var(--grid-template-cols-1);
  }

  .filter-surface > * {
    grid-column: var(--grid-span-full-start) / var(--grid-span-full-end);
  }

  .filter-surface > [class*="data--"] {
    width: var(--size-100pct);
    min-width: 0;
    max-width: none;
  }

}