.staat-overzichtfilter {
    display: grid;
    min-width: 0;
    flex: 0 0 auto;
    grid-template-columns: minmax(260px, 1fr) auto auto 34px;
    align-items: end;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid #b8b8b8;
    background: #fafafa;
}

.staat-overzichtfilter > label,
.staat-overzichtstatus {
    display: grid;
    min-width: 0;
    gap: 4px;
    color: #525252;
    font-size: 10px;
    font-weight: 650;
}

.staat-overzichtfilter input {
    width: 100%;
    min-height: 32px;
    border: 1px solid #737373;
    border-radius: 2px;
    padding: 5px 9px;
    color: #242424;
    background: #fff;
}

.staat-overzichtfilter input:focus {
    border-color: #0f6cbd;
    box-shadow: inset 0 -2px #0f6cbd;
    outline: 0;
}

.staat-overzichtstatusknoppen {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
}

.staat-overzichtstatusknoppen button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 7px;
    border: 1px solid #8a8a8a;
    border-right: 0;
    padding: 4px 9px;
    color: #242424;
    background: #fff;
    font-size: 11px;
}

.staat-overzichtstatusknoppen button:first-child { border-radius: 3px 0 0 3px; }
.staat-overzichtstatusknoppen button:last-child { border-right: 1px solid #8a8a8a; border-radius: 0 3px 3px 0; }
.staat-overzichtstatusknoppen button:hover { color: #063d26; background: #edf5f0; }
.staat-overzichtstatusknoppen button:focus-visible { position: relative; z-index: 1; outline: 2px solid #0f6cbd; outline-offset: -2px; }
.staat-overzichtstatusknoppen button.actief { color: #fff; border-color: #0f6c42; background: #0f6c42; }
.staat-overzichtstatusknoppen button.actief + button { border-left-color: #0f6c42; }
.staat-overzichtstatusknoppen small { min-width: 18px; color: inherit; font-size: 9px; text-align: right; }

.staat-overzichtresultaat {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 3px;
    color: #525252;
    white-space: nowrap;
    font-size: 11px;
}

.staat-overzichtresultaat strong { color: #242424; }
.staat-overzichtfilter > fluent-button::part(control) { min-width: 32px; min-height: 32px; }

@media (max-width: 1100px) {
    .staat-overzichtfilter { grid-template-columns: minmax(230px, 1fr) minmax(0, 1.3fr) auto 34px; }
    .staat-overzichtstatusknoppen button { padding-inline: 7px; }
}

@media (max-width: 700px) {
    .staat-overzichtfilter { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 7px 10px; }
    .staat-overzichtfilter > label,
    .staat-overzichtstatus { grid-column: 1 / -1; }
    .staat-overzichtstatusknoppen { flex-wrap: wrap; }
    .staat-overzichtstatusknoppen button { flex: 1 1 auto; justify-content: center; }
    .staat-overzichtresultaat { grid-column: 1; }
    .staat-overzichtfilter > fluent-button { grid-column: 2; }
}