.staat-nummerfilter {
    display: grid;
    min-width: 0;
    min-height: 58px;
    flex: 0 0 auto;
    grid-template-columns: minmax(260px, 1.4fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 10px;
    padding: 7px 12px 8px;
    border-bottom: 1px solid #b8b8b8;
    background: #f8f8f8;
}

.staat-nummerfilter label { display: grid; min-width: 0; gap: 3px; }
.staat-nummerfilter label > span { color: #4f4f4f; font-size: 11px; font-weight: 650; }
.staat-nummerzoeker input,
.staat-rubriekkeuze select {
    width: 100%;
    min-width: 0;
    height: 32px;
    border: 1px solid #8a8a8a;
    border-radius: 0;
    padding: 4px 8px;
    background: #fff;
}

.staat-nummerzoeker input:focus,
.staat-rubriekkeuze select:focus { border-color: var(--primair); outline: 2px solid color-mix(in srgb, var(--primair) 22%, transparent); outline-offset: -2px; }
.staat-filterstand { display: flex; min-width: 132px; height: 32px; align-items: center; justify-content: flex-end; gap: 4px; }
.staat-filterstand output { color: #4f4f4f; font-size: 11px; white-space: nowrap; }
.staat-filterstand output strong { color: #242424; font-size: 12px; }
.staat-filterstand fluent-button.icoon-knop { width: 32px; min-width: 32px; height: 32px; }
.staat-filterstand fluent-button.icoon-knop::part(control) { min-width: 32px; min-height: 32px; padding: 0; }
.calculatie-bewerkbalk.alleen-naam { grid-template-columns: minmax(220px, 1fr) auto; }
.deelopdracht-bewerkbalk.alleen-melding,
.uitvoering-bewerkbalk.alleen-melding { display: block; min-height: 36px; }
.deelopdracht-bewerkbalk.alleen-melding p,
.uitvoering-bewerkbalk.alleen-melding p { width: 100%; }

.staat-structuur-werkgebied {
    display: grid;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: auto minmax(0, 1fr);
    overflow: hidden;
    background: #fff;
}
.staat-structuur-inhoud { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
.staat-structuur-slot { display: flex; width: 238px; min-width: 0; min-height: 0; flex-direction: column; transition: width 140ms ease-out; }
.staat-structuur-slot.ingeklapt { width: 42px; }
.staat-structuur-mobiele-balk,
.staat-structuur-mobielactie { display: none; }
.staat-structuur-rail { display: flex; min-width: 0; min-height: 0; flex: 1 1 auto; flex-direction: column; border-right: 1px solid #9ca39f; background: #f7f8f7; }
.staat-structuur-rail > header { display: flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px 5px 10px; border-bottom: 1px solid #b8b8b8; background: #f1f2f1; }
.staat-structuur-rail > header > div:first-child { min-width: 0; }
.staat-structuur-rail > header strong,
.staat-structuur-rail > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staat-structuur-rail > header strong { font-size: 12px; }
.staat-structuur-rail > header small { color: #616161; font-size: 10px; }
.staat-structuur-kopacties { display: flex; flex: 0 0 auto; align-items: center; }
.staat-structuur-slot.ingeklapt .staat-structuur-rail > header { justify-content: center; padding-inline: 4px; }
.staat-structuur-slot.ingeklapt .staat-structuur-rail > header > div:first-child { display: none; }
.staat-structuur-boom { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 14px; scrollbar-gutter: stable; }
.staat-boom-tak { min-width: 0; }
.staat-boom-regel { display: grid; min-width: 0; min-height: 36px; grid-template-columns: 28px minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid #dedede; }
.staat-boom-kinderen { border-left: 1px solid #c6ccc8; margin-left: 12px; }
.staat-boom-inspringing { width: 28px; }
.staat-boom-regel fluent-button.icoon-knop { width: 28px; min-width: 28px; height: 36px; }
.staat-boom-regel fluent-button.icoon-knop::part(control) { min-width: 28px; min-height: 36px; padding: 0; border-radius: 0; }
.staat-boom-knoop { width: 100%; min-width: 0; height: 36px; }
.staat-boom-knoop::part(control) { width: 100%; min-width: 0; min-height: 36px; justify-content: flex-start; border-radius: 0; padding: 3px 6px 3px 4px; }
.staat-boom-knoop:hover::part(control) { background: #e8f2ec; }
.staat-boom-knoop.actief::part(control) { box-shadow: inset 3px 0 var(--primair); background: #dceee3; }
.staat-boom-knoop.niet-zichtbaar { opacity: .58; }
.staat-boom-knoopinhoud { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 5px; text-align: left; }
.staat-boom-knoopinhoud small { overflow: hidden; color: #0b5a28; font: 650 10px "Cascadia Mono", Consolas, monospace; text-overflow: ellipsis; }
.staat-boom-knoopinhoud strong { overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.staat-boom-knoopinhoud > span { min-width: 20px; color: #616161; font-size: 9px; text-align: right; }
.staat-structuur-leeg { margin: 0; padding: 18px 12px; color: #616161; font-size: 11px; }
.staat-structuur-achtergrond { display: none; }
.staat-navigatie-doel { animation: staat-doelmarkering 1.25s ease-out; }
@keyframes staat-doelmarkering {
    0%, 28% { box-shadow: inset 4px 0 #0f6cbd, inset 0 0 0 2px #0f6cbd; background-color: #e8f3fb; }
    100% { box-shadow: none; }
}

@media (min-width: 1600px) {
    .staat-structuur-slot { width: 286px; }
}

@media (max-width: 700px) {
    .staat-structuur-werkgebied { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .staat-structuur-slot,
    .staat-structuur-slot.ingeklapt { width: 100%; min-height: 38px; }
    .staat-structuur-mobiele-balk { display: flex; min-height: 38px; align-items: center; border-bottom: 1px solid #b8b8b8; padding: 3px 8px; background: #f5f6f5; }
    .staat-structuur-mobiele-balk fluent-button { min-height: 30px; }
    .staat-structuur-rail { position: fixed; z-index: 92; inset: 0 auto 0 0; width: min(340px, calc(100vw - 42px)); transform: translateX(-104%); visibility: hidden; box-shadow: 8px 0 30px #0004; transition: transform 170ms ease-out, visibility 170ms; }
    .staat-structuur-slot.mobiel-open .staat-structuur-rail { transform: translateX(0); visibility: visible; }
    .staat-structuur-rail > header { min-height: 52px; padding-left: 14px; }
    .staat-structuur-desktopactie { display: none; }
    .staat-structuur-mobielactie { display: inline-flex; }
    .staat-structuur-achtergrond { position: fixed; z-index: 91; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #0006; }
    .staat-nummerfilter {
        min-height: 122px;
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 7px 8px;
        padding: 7px 10px;
    }
    .staat-nummerzoeker { grid-column: 1 / -1; }
    .staat-filterstand { min-width: 0; }
}

@media (max-width: 420px) {
    .staat-nummerfilter { grid-template-columns: minmax(0, 1fr) 94px; }
    .staat-nummerzoeker input,
    .staat-rubriekkeuze select { font-size: 16px; }
    .staat-filterstand output span { display: none; }
}

@media (max-width: 599px) {
    .calculatie-bewerkbalk.alleen-naam label:first-child { display: grid; }
}