.extra-declaraties-overzicht { height: 100%; overflow: auto; background: #fff; }
.extra-declaraties-overzicht > header { min-height: 92px; padding: 16px 20px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid #c8c8c8; }
.extra-declaraties-overzicht h1 { margin: 3px 0 4px; font-size: 20px; letter-spacing: 0; }
.extra-declaraties-overzicht header p { margin: 0; color: #505050; }
.extra-declaraties-overzicht > header > div:last-child { display: grid; justify-items: end; align-content: center; gap: 4px; }
.extra-overzicht-filterbalk { position: sticky; top: 0; z-index: 4; padding: 10px 20px; display: grid; grid-template-columns: minmax(240px,1fr) auto auto; gap: 14px; align-items: end; border-bottom: 1px solid #b7b7b7; background: #f7f7f7; }
.extra-overzicht-filterbalk label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; }
.extra-overzicht-filterbalk input { min-height: 34px; padding: 6px 10px; border: 1px solid #8a8886; border-radius: 2px; background: #fff; }
.extra-overzicht-filterbalk input:focus { outline: 2px solid #0f6cbd; outline-offset: -2px; }
.extra-overzicht-statussen { min-height: 34px; display: flex; border: 1px solid #8a8886; background: #fff; }
.extra-filter { min-height: 32px; padding: 4px 9px; display: flex; align-items: center; gap: 6px; border: 0; border-right: 1px solid #d1d1d1; background: #fff; cursor: pointer; }
.extra-filter:last-child { border-right: 0; }
.extra-filter.actief { color: #fff; background: #0f6f45; }
.extra-filter small { color: inherit; }
.extra-overzicht-raster { min-width: 980px; }
.extra-overzicht-kop,.extra-overzicht-rij { display: grid; grid-template-columns: minmax(280px,1fr) 85px 100px 120px 120px 130px 220px; border-bottom: 1px solid #c8c8c8; }
.extra-overzicht-kop { position: sticky; top: 55px; z-index: 3; min-height: 44px; align-items: end; background: #f3f3f3; font-size: 12px; }
.extra-overzicht-kop span,.extra-overzicht-rij > * { min-width: 0; padding: 8px 10px; border-right: 1px solid #c8c8c8; }
.extra-overzicht-rij { min-height: 54px; align-items: center; }
.extra-overzicht-rij:hover { background: #f3f9f6; }
.extra-overzicht-rij > div:first-child { display: grid; gap: 3px; }
.extra-overzicht-rij small { overflow: hidden; color: #616161; text-overflow: ellipsis; white-space: nowrap; }
.extra-overzicht-acties { display: flex; flex-wrap: wrap; gap: 5px; }
.extra-status { width: fit-content; padding: 3px 7px; border: 1px solid #b7b7b7; background: #f5f5f5; font-size: 12px; }
.extra-status.open { border-color: #79b790; background: #e7f4eb; color: #0e5b2f; }
.extra-status.verwerkt { border-color: #79a7c7; background: #e8f2f8; color: #184f72; }
.extra-overzicht-leeg { min-height: 180px; padding: 42px 20px; text-align: center; color: #505050; }
.extra-overzicht-fout { color: #242424; background: #fff7f7; border-left: 3px solid #c50f1f; }
.extra-overzicht-fout h2 { color: #a4262c; }
.extra-overzicht-mobiel { display: none; }
@media (max-width: 900px) {
    .extra-declaraties-overzicht > header { padding: 14px 12px; }
    .extra-overzicht-filterbalk { padding: 10px 12px; grid-template-columns: 1fr; }
    .extra-overzicht-statussen { overflow-x: auto; }
    .extra-filter { min-height: 44px; white-space: nowrap; }
    .extra-overzicht-raster { display: none; }
    .extra-overzicht-mobiel { display: grid; gap: 8px; padding: 10px 12px 24px; }
    .extra-overzicht-kaart { padding: 12px; border: 1px solid #c8c8c8; border-left: 3px solid #0f6f45; background: #fff; }
    .extra-overzicht-kaart header { display: flex; justify-content: space-between; gap: 10px; }
    .extra-overzicht-kaart dl { margin: 12px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
    .extra-overzicht-kaart dt { color: #616161; font-size: 11px; }
    .extra-overzicht-kaart dd { margin: 3px 0 0; overflow-wrap: anywhere; }
    .extra-overzicht-kaart .extra-overzicht-acties > *,
    .extra-declaraties-overzicht fluent-button { min-height: 44px; }
}