.fi-ta-cell.fi-ta-header-filter-cell {
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    position: relative;
    overflow: visible;
    z-index: 20;
}

tr:has(> .fi-ta-header-filter-cell) {
    position: relative;
    z-index: 20;
}

.fi-ta-header-filter {
    display: inline-block;
    width: 100%;
    min-width: 4rem;
    max-width: 100%;
}

.fi-ta-header-filter-cell:has(.fi-select-input-ctn-clearable) .fi-ta-header-filter {
    width: max-content;
}

.fi-ta-header-filter .fi-select-input .fi-select-input-value-ctn {
    flex-wrap: nowrap;
    text-wrap: nowrap;
    word-break: normal;
}

.fi-ta-header-filter .fi-select-input .fi-select-input-value-label {
    white-space: nowrap;
}

.fi-ta-header-filter .fi-fo-field-wrp {
    margin-block: 0;
}

.fi-ta-header-filter .fi-sc,
.fi-ta-header-filter .fi-grid-col,
.fi-ta-header-filter .fi-sc-component,
.fi-ta-header-filter .fi-fo-field,
.fi-ta-header-filter .fi-fo-field-content-col,
.fi-ta-header-filter .fi-fo-field-content-ctn,
.fi-ta-header-filter .fi-fo-field-content,
.fi-ta-header-filter .fi-input-wrp,
.fi-ta-header-filter .fi-fo-select,
.fi-ta-header-filter .fi-select-input {
    width: 100%;
    max-width: 100%;
}

.fi-ta-header-filter .fi-grid-col {
    min-width: 0;
}

.fi-ta-header-filter .fi-sc.fi-sc-has-gap.fi-sc-dense.fi-grid.lg\:fi-grid-cols {
    min-width: 8rem;
}

.fi-ta-header-filter .fi-sc.fi-sc-has-gap.fi-sc-dense.fi-grid.lg\:fi-grid-cols > .fi-grid-col {
    min-width: 4rem;
}

.fi-ta-header-filter .fi-input-wrp-content-ctn {
    flex: 0 0 auto;
    width: 100%;
}

.fi-ta-header-filter .fi-select-input-btn,
.fi-ta-header-filter select.fi-select-input {
    width: 100%;
    min-width: 4rem;
}

.fi-ta-header-filter .fi-fo-date-time-picker,
.fi-ta-header-filter .fi-fo-date-time-picker-trigger,
.fi-ta-header-filter .fi-fo-date-time-picker-display-text-input {
    width: 100%;
    min-width: 4rem;
}

.fi-ta-header-filter .fi-select-input .fi-dropdown-panel {
    width: max-content;
    min-width: 12rem;
    max-width: min(24rem, calc(100vw - 2rem)) !important;
}

.fi-ta-header-filter .fi-fo-date-time-picker-panel,
.fi-ta-header-filter .fi-dropdown-panel,
.fi-ta-header-filter [x-ref="panel"] {
    z-index: 50 !important;
    isolation: isolate;
}

/*
 * Multi-select header filters.
 *
 * A multi-select renders one `.fi-badge` per selection inside
 * `.fi-select-input-value-badges-ctn`. In a narrow header column those badges
 * wrap character-by-character and blow up the row height. Collapse them to a
 * single line: widen the column, ellipsise the first label, and surface the
 * rest as a "+N" overflow count.
 */

/* Widen the column once a multi-select carries a selection. */
.fi-ta-header-filter-cell:has(.fi-select-input-value-badges-ctn) {
    min-width: 16rem;
}

/* The `.fi-select-input-ctn-clearable` rule above shrinks clearable selects to
   `max-content`; for a multi-select that collapses the trigger (and every
   wrapper down to the badge container) around the badges, leaving no room for
   the first label. Keep the whole chain at full column width instead. */
.fi-ta-header-filter-cell:has(.fi-select-input-value-badges-ctn) .fi-ta-header-filter,
.fi-ta-header-filter-cell:has(.fi-select-input-value-badges-ctn) .fi-select-input-ctn,
.fi-ta-header-filter-cell:has(.fi-select-input-value-badges-ctn) .fi-select-input-btn,
.fi-ta-header-filter-cell:has(.fi-select-input-value-badges-ctn) .fi-select-input-value-ctn {
    width: 100% !important;
    min-width: 0 !important;
}

.fi-ta-header-filter .fi-select-input-value-badges-ctn {
    width: 100%;
    min-width: 0;
    flex-grow: 1;
    flex-wrap: nowrap;
    overflow: hidden;
    counter-reset: header-filter-overflow;
}

/* The first selected badge grows to fill the column and ellipsises its label,
   so it stays readable instead of collapsing to a one-character sliver. */
.fi-ta-header-filter .fi-select-input-value-badges-ctn > .fi-badge:first-child,
.fi-ta-header-filter .fi-select-input-value-badges-ctn > .fi-badge:first-child .fi-badge-label-ctn {
    min-width: 0;
    flex: 1 1 0%;
}

.fi-ta-header-filter .fi-select-input-value-badges-ctn > .fi-badge:first-child .fi-badge-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

/* Keep the overflow badges in the box model so they still increment the counter
   — `display: none` would drop them from the count — but visually collapse them
   out of the row. */
.fi-ta-header-filter .fi-select-input-value-badges-ctn > .fi-badge:nth-child(n + 2) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    counter-increment: header-filter-overflow;
}

/* Surface the hidden badges as a compact "+N". */
.fi-ta-header-filter .fi-select-input-value-badges-ctn:has(> .fi-badge:nth-child(2))::after {
    content: '+' counter(header-filter-overflow);
    align-self: center;
    flex-shrink: 0;
    margin-inline-start: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: rgb(107 114 128); /* gray-500 */
}

.dark .fi-ta-header-filter .fi-select-input-value-badges-ctn:has(> .fi-badge:nth-child(2))::after {
    color: rgb(156 163 175); /* gray-400 */
}