.
card--flush removes the card's own padding/margin so the
filter-bar inside provides all its own spacing. Without this
modifier the card renders as a visible blank panel between the
filter bar and the results table (the red-arrow panel).
──────────────────────────────────────────────────────────── */
.card--flush {
padding: 0;
margin-bottom: 0;
border: none;
box-shadow: none;
background: transparent;
}
/* ── 41.2 filter-bar__group (BEM aliases for the filter bar) ──
The blade uses .filter-bar__group but the legacy CSS defines
only .filter-bar-group (single-hyphen). These aliases wire
the BEM names used in the template to the same layout rules.
──────────────────────────────────────────────────────────── */
.filter-bar__group {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 140px;
flex: 1;
}
/* Grow modifier — used on the search field so it takes more space */
.filter-bar__group--grow {
flex: 2;
min-width: 220px;
}
/* Actions group — holds the Filter / Clear buttons, no grow */
.filter-bar__group--actions {
display: flex;
flex-direction: row; /* force buttons side by side */
align-items: center; /* buttons centred within their own row */
gap: 8px; /* gap between Filter and Clear buttons */
flex-shrink: 0;
flex: 0 0 auto;
flex-wrap: nowrap; /* never allow them to wrap onto a second line */
align-self: flex-end; /* anchor to the bottom of the filter-bar row so
buttons line up with the bottom of the inputs/
selects, ignoring the labels above them */
}
/* filter-bar row: align all groups to the bottom of the row so that
items with labels (inputs, selects) and items without labels
(the actions group) share the same bottom edge — i.e. the
bottom of every control lines up regardless of whether a
visible label sits above it. */
.filter-bar {
align-items: flex-end;
gap: 12px; /* consistent 12px gap between ALL groups */
}
/* When no filters are active, show Clear as muted/disabled style */
.filter-bar__clear--inactive {
opacity: 0.45;
pointer-events: none;
cursor: default;
}
/* ── 41.3 input-with-icon (magnifying-glass prefix on search) ─
Wraps the
in a relative container and positions the
Font Awesome icon as an absolute inset element so the icon
appears inside the left edge of the text box.
──────────────────────────────────────────────────────────── */
.input-with-icon {
position: relative;
display: flex;
align-items: center;
}
.input-with-icon .input-with-icon__icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--color-grey-text);
font-size: var(--text-sm);
pointer-events: none; /* click passes through to the input */
z-index: 1;
}
/* Widen the search input and add left padding to clear the icon */
.input-with-icon .form-control {
width: 100%;
padding-left: 32px; /* space for the magnifying-glass */
min-width: 260px; /* wider than the default filter field */
}
/* ── 41.4 form-select (styled