/* Share the available row width instead of reserving a fixed grid column
   for each filter. The Clear action keeps its natural, readable width. */
.filter-slide-panel[data-filter-panel] {
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:flex-end;
    gap:clamp(4px,.7vw,10px);
}
.filter-slide-panel[data-filter-panel] > .records-filter-menu {
    flex:1 1 0;
    width:0 !important;
    min-width:0 !important;
}
.filter-slide-panel[data-filter-panel] > .records-filter-menu:has(summary[data-label="Department"]),
.filter-slide-panel[data-filter-panel] > .records-filter-menu:has(summary[data-label="Position"]) {
    flex-grow:1.35;
}
.filter-slide-panel[data-filter-panel] > .btn {
    flex:0 0 auto;
    width:auto;
    min-height:38px;
    margin:0;
    white-space:nowrap;
    align-self:flex-end;
}
.filter-slide-panel[data-filter-panel] > .records-filter-menu > summary {
    display:block;
    width:100%;
    min-width:0;
    height:38px;
    min-height:38px;
    box-sizing:border-box;
    padding:9px 25px 9px 10px;
    white-space:nowrap;
    overflow:visible;
}
.filter-slide-panel[data-filter-panel] .filter-selected-value {
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.filter-slide-panel[data-filter-panel] > .records-filter-menu > summary::after {
    top:50%;
    right:10px;
    margin-top:-5px;
    transform:rotate(45deg);
}
.filter-slide-panel[data-filter-panel] > .records-filter-menu[open] > summary::after {
    margin-top:-2px;
    transform:rotate(225deg);
}
@media(max-width:640px) {
    .filter-slide-panel[data-filter-panel] { gap:4px; padding-left:6px; padding-right:6px; }
    .filter-slide-panel[data-filter-panel] > .btn { padding-left:7px; padding-right:7px; font-size:.72rem; }
    .filter-slide-panel[data-filter-panel] > .records-filter-menu > summary { padding-left:5px; padding-right:16px; font-size:.72rem; }
    .filter-slide-panel[data-filter-panel] > .records-filter-menu > summary::after { right:5px; }
}