.termijn-keuze,
.termijn-overzicht,
.termijn-werkblad {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

.termijn-keuze > header,
.termijn-overzicht > header,
.termijn-werkblad > header {
    display: flex;
    min-height: 68px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    border-bottom: 1px solid #b8b8b8;
}

.termijn-keuze > header small,
.termijn-overzicht > header small,
.termijn-werkblad > header small { color: var(--primair); font-size: 10px; font-weight: 750; }
.termijn-keuze > header h1,
.termijn-overzicht > header h1,
.termijn-werkblad > header h1 { margin: 1px 0; font-size: 20px; }
.termijn-keuze > header p,
.termijn-overzicht > header p,
.termijn-werkblad > header p { margin: 0; color: var(--subtiel); }

.uitvoering-status.akkoord { border-color: #6a9d7e; color: #0b5a28; background: #e3f3e9; }
.uitvoering-status.ingediend { border-color: #5c87a8; color: #174d72; background: #e7f1f8; }
.uitvoering-status.afgewezen { border-color: #c87872; color: #8a1c13; background: #fff1f1; }
.uitvoering-status.vervallen { color: #5b5b5b; background: #ededed; }
.blad-icoon.termijn { color: #174d72; border-color: #5c87a8; }
.blad-icoon.termijnstaat { width: 26px; height: 26px; color: #0b5a28; border-color: #57916c; font-size: 9px; }
.administratie-navregel.termijn-opdracht { min-height: 48px; background: #f7faf8; }
.administratie-navregel.termijnstaat { min-height: 44px; padding-left: 28px; }

.termijn-keuzelijst { min-height: 0; overflow-y: auto; padding: 12px 16px 28px; }
.termijn-keuzeregel {
    display: grid;
    width: min(840px, 100%);
    min-height: 62px;
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    border: 1px solid #b8b8b8;
    border-radius: 4px;
    padding: 8px 11px;
    color: inherit;
    background: #fff;
    text-align: left;
    cursor: pointer;
}
.termijn-keuzeregel + .termijn-keuzeregel { margin-top: 8px; }
.termijn-keuzeregel:hover { border-color: #5b7f68; background: #f1f7f3; box-shadow: 0 2px 7px #0001; }
.termijn-keuzeregel strong, .termijn-keuzeregel small { display: block; }
.termijn-keuzeregel small { margin-top: 3px; color: var(--subtiel); }
.termijn-keuzepijl { color: var(--primair); font-size: 18px; }
.termijn-leeg { padding: 28px 20px; color: var(--subtiel); text-align: center; }
.termijn-leeg h2, .termijn-leeg h3 { color: #242424; }

.termijn-overzicht-samenvatting,
.termijn-samenvatting { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(120px, 1fr)); border-bottom: 1px solid #b8b8b8; background: #f7f7f7; }
.termijn-overzicht-samenvatting > div,
.termijn-samenvatting > div { min-width: 0; padding: 8px 11px; border-right: 1px solid #c8c8c8; }
.termijn-overzicht-samenvatting > div:last-child,
.termijn-samenvatting > div:last-child { border-right: 0; }
.termijn-overzicht-samenvatting span, .termijn-overzicht-samenvatting strong,
.termijn-samenvatting span, .termijn-samenvatting strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termijn-overzicht-samenvatting span, .termijn-samenvatting span { color: var(--subtiel); font-size: 10px; }
.termijn-overzicht-samenvatting strong, .termijn-samenvatting strong { margin-top: 2px; font-variant-numeric: tabular-nums; }

.termijn-overzicht-inhoud { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: minmax(390px, 1.35fr) minmax(310px, .65fr); overflow: hidden; }
.termijn-overzicht-lijst, .termijn-bronnen-overzicht { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.termijn-bronnen-overzicht { border-left: 1px solid #b8b8b8; background: #fafafa; }
.termijn-overzicht-lijst > header, .termijn-bronnen-overzicht > header { display: flex; position: sticky; z-index: 2; top: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-bottom: 1px solid #b8b8b8; background: #f3f3f3; }
.termijn-overzicht-lijst h2, .termijn-bronnen-overzicht h2 { margin: 0; font-size: 14px; }
.termijn-overzicht-lijst header small, .termijn-bronnen-overzicht header small { color: var(--subtiel); }
.termijn-overzicht-regel { display: grid; width: 100%; min-height: 58px; grid-template-columns: minmax(0, 1fr) auto 130px; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid #d2d2d2; border-left: 3px solid transparent; padding: 8px 11px; color: inherit; background: #fff; text-align: left; cursor: pointer; }
.termijn-overzicht-regel:hover { border-left-color: var(--primair); background: #edf5f0; }
.termijn-overzicht-regel strong, .termijn-overzicht-regel small { display: block; }
.termijn-overzicht-regel small { margin-top: 2px; color: var(--subtiel); }
.termijn-overzicht-bedrag { text-align: right; font-variant-numeric: tabular-nums; }
.termijn-declaratieregel { display: grid; min-height: 72px; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 9px 11px; border-bottom: 1px solid #d2d2d2; background: #fff; }
.termijn-declaratieregel > div { min-width: 0; }
.termijn-declaratieregel strong, .termijn-declaratieregel small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termijn-declaratieregel small { color: var(--subtiel); }
.termijn-kleine-actie { grid-column: 2; border: 0; padding: 2px 0; color: #0f6cbd; background: transparent; text-align: right; cursor: pointer; }
.termijn-bronnen-leeg { padding: 18px 12px; color: var(--subtiel); }

.termijn-uitsplitsing { display: grid; min-height: 42px; flex: 0 0 auto; grid-template-columns: repeat(5, minmax(110px, 1fr)); border-bottom: 1px solid #b8b8b8; background: #fbfbfb; }
.termijn-uitsplitsing > div { min-width: 0; padding: 6px 10px; border-right: 1px solid #d2d2d2; }
.termijn-uitsplitsing > div:last-child { border-right: 0; }
.termijn-uitsplitsing span, .termijn-uitsplitsing strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termijn-uitsplitsing span { color: var(--subtiel); font-size: 9px; }
.termijn-afwijsmelding { flex: 0 0 auto; border-bottom: 1px solid #d8a29e; border-left: 4px solid #c42b1c; padding: 8px 12px; color: #74211b; background: #fff1f1; }
.termijn-afwijsmelding p { margin: 2px 0 0; }
.termijn-structuur-werkgebied, .termijn-staat { min-width: 0; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.termijn-staat { display: flex; flex-direction: column; }

.termijn-desktop-raster { min-width: 0; min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; font-variant-numeric: tabular-nums; }
.termijn-raster-inhoud { min-width: 1210px; min-height: 100%; }
.termijn-raster-kop, .termijn-raster-rij { display: grid; grid-template-columns: 42px 82px 88px minmax(280px, 1fr) 64px 94px 94px 98px 104px 112px 116px; }
.termijn-raster-kop { position: sticky; z-index: 4; top: 0; height: 40px; border-bottom: 1px solid #747c77; color: #454545; background: #f1f1f1; font-size: 10px; font-weight: 650; }
.termijn-raster-kop > div { display: flex; min-width: 0; align-items: center; border-right: 1px solid #9da5a0; padding: 5px 7px; }
.termijn-raster-kop .getal { justify-content: flex-end; text-align: right; }
.termijn-raster-rij { height: 44px; border-bottom: 1px solid #c8ceca; background: #fff; }
.termijn-raster-rij:hover { background: #f1f7f3; }
.termijn-raster-rij.actief { background: #dcefe4; box-shadow: inset 4px 0 #0f6cbd; }
.termijn-raster-rij .cumulatief { background: #f7faf8; }
.termijn-raster-rij.actief .cumulatief { background: #d6e9dd; }
.termijn-raster-totaal { display: flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 22px; padding: 7px 15px; border-top: 2px solid var(--primair); background: #eef6f1; font-variant-numeric: tabular-nums; }
.termijn-raster-totaal strong { min-width: 112px; text-align: right; }
.termijn-mobiele-lijst { display: none; }

.termijn-detailbron { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 7px 0; border-bottom: 1px solid #e1e1e1; }
.termijn-detailbron small { display: block; color: var(--subtiel); }
.termijn-detailbron > p { grid-column: 1 / -1; margin: 2px 0 0; color: #525252; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.termijn-historieregel { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; padding: 6px 0; }
.termijn-historiepunt { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #0f6cbd; }
.termijn-historieregel small { display: block; color: var(--subtiel); }
.termijn-historieregel p { margin: 3px 0 0; }

.termijn-bronselectie { display: grid; gap: 12px; margin-top: 16px; }
.termijn-bronselectie > section { max-height: 220px; overflow-y: auto; border: 1px solid #c8c8c8; }
.termijn-bronselectie > section > header { display: flex; position: sticky; z-index: 1; top: 0; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #d2d2d2; background: #f5f5f5; }
.termijn-bronselectie h3 { margin: 0; font-size: 13px; }
.termijn-bronkeuze { display: grid; min-height: 48px; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #e1e1e1; cursor: pointer; }
.termijn-bronkeuze:hover, .termijn-bronkeuze.gekozen { background: #edf5f0; }
.termijn-bronkeuze small { display: block; color: var(--subtiel); }
.termijn-bronselectie > footer { display: flex; justify-content: space-between; padding: 9px 11px; border-top: 2px solid var(--primair); background: #eef6f1; }
.termijn-afwijsvelden, .extra-declaratie-velden { display: grid; gap: 12px; margin-top: 16px; }
.termijn-afwijsvelden label, .extra-declaratie-velden label { display: grid; gap: 5px; font-weight: 650; }
.termijn-afwijsvelden select, .termijn-afwijsvelden textarea,
.extra-declaratie-velden input, .extra-declaratie-velden textarea { width: 100%; min-width: 0; border: 1px solid #8a8a8a; border-radius: 2px; padding: 7px 8px; background: #fff; font: inherit; }
.termijn-afwijsvelden textarea, .extra-declaratie-velden textarea { min-height: 84px; resize: vertical; }
.extra-declaratie-velden > div { display: grid; grid-template-columns: minmax(90px, .7fr) repeat(2, minmax(120px, 1fr)); gap: 10px; }
.extra-declaratie-totaal { display: flex; justify-content: space-between; margin-top: 16px; border-top: 2px solid var(--primair); padding: 10px 12px; background: #eef6f1; }
.dialoog-melding.fout { border-left-color: #c42b1c !important; color: #8a1c13 !important; background: #fff1f1 !important; }

@media (max-width: 900px) {
    .termijn-overzicht-inhoud { grid-template-columns: 1fr; overflow-y: auto; }
    .termijn-overzicht-lijst, .termijn-bronnen-overzicht { min-height: auto; overflow: visible; }
    .termijn-bronnen-overzicht { border-top: 1px solid #b8b8b8; border-left: 0; }
}

@media (max-width: 700px) {
    .termijn-keuze > header, .termijn-overzicht > header, .termijn-werkblad > header { align-items: flex-start; padding: 9px 11px; }
    .termijn-keuze > header h1, .termijn-overzicht > header h1, .termijn-werkblad > header h1 { max-width: calc(100vw - 108px); overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
    .termijn-overzicht-samenvatting, .termijn-samenvatting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .termijn-overzicht-samenvatting > div:nth-child(2), .termijn-samenvatting > div:nth-child(2) { border-right: 0; }
    .termijn-overzicht-samenvatting > div:nth-child(-n+2), .termijn-samenvatting > div:nth-child(-n+2) { border-bottom: 1px solid #c8c8c8; }
    .termijn-overzicht-regel { grid-template-columns: minmax(0, 1fr) auto; }
    .termijn-overzicht-bedrag { grid-column: 2; }
    .termijn-overzicht-regel .uitvoering-status { grid-row: 1 / 3; grid-column: 2; align-self: start; }
    .termijn-uitsplitsing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .termijn-uitsplitsing > div { border-bottom: 1px solid #d2d2d2; }
    .termijn-uitsplitsing > div:nth-child(3) { border-right: 0; }
    .termijn-desktop-raster { display: none; }
    .termijn-mobiele-lijst { display: block; min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    .termijn-mobiele-rij { display: grid; box-sizing: border-box; height: 176px; grid-template-rows: 22px 36px 44px 26px; gap: 5px; padding: 8px 11px; border-bottom: 1px solid #b8b8b8; background: #fff; }
    .termijn-mobiele-rij.actief { background: #e2f1e8; box-shadow: inset 3px 0 #0f6cbd; }
    .termijn-mobiele-rij header, .termijn-mobiele-rij footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .termijn-mobiele-rij header strong { color: #0b5a28; font-family: "Cascadia Mono", Consolas, monospace; }
    .termijn-mobiele-rij header small { color: var(--subtiel); }
    .termijn-mobiele-rij p { display: -webkit-box; margin: 0; overflow: hidden; line-height: 17px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .termijn-mobiele-rij dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
    .termijn-mobiele-rij dl div { text-align: right; }
    .termijn-mobiele-rij dt { color: var(--subtiel); font-size: 9px; }
    .termijn-mobiele-rij dd { margin: 2px 0 0; font-weight: 700; }
    .termijn-raster-totaal { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding-inline: 11px; }
    .termijn-raster-totaal strong { min-width: 0; }
    .extra-declaratie-velden > div { grid-template-columns: 1fr; }
}