.administratie-navregel.calculatie { padding-left: 22px; }
.administratie-navregel.calculatie .blad-icoon { width: 20px; height: 23px; }
.blad-icoon.calculatie { color: #0f5b8d; border-color: #67869a; }

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

.calculatie-overzicht > header,
.calculatie-werkblad > header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--lijn);
}

.calculatie-overzicht > header small,
.calculatie-werkblad > header small { color: var(--primair); font-size: 11px; font-weight: 700; }
.calculatie-overzicht > header h1,
.calculatie-werkblad > header h1 { margin: 2px 0 1px; }
.calculatie-overzicht > header p,
.calculatie-werkblad > header p { margin: 0; color: var(--subtiel); }

.calculatie-status {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 7px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 650;
}
.calculatie-status.concept { color: #704b00; border-color: #e8cc83; background: #fff4ce; }
.calculatie-status.ingediend { color: #075985; border-color: #a6d5ed; background: #e6f4fb; }
.calculatie-status.gekozen { color: #0b5a28; border-color: #a7d8b9; background: #dff6dd; }
.calculatie-status.vervallen { color: #5f5f5f; border-color: #d1d1d1; background: #f3f3f3; }

.calculatie-lijstkop,
.calculatie-lijstrij {
    display: grid;
    min-width: 760px;
    grid-template-columns: minmax(240px, 1fr) 150px 90px 130px 150px;
    align-items: center;
    column-gap: 12px;
}
.calculatie-lijstkop { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-bottom: 1px solid #a8a8a8; color: var(--subtiel); background: #f3f3f3; font-size: 11px; font-weight: 600; }
.calculatie-lijst { min-width: 0; min-height: 0; flex: 1 1 auto; overflow: auto; }
.calculatie-lijstrij { width: 100%; min-height: 58px; border: 0; border-bottom: 1px solid var(--lijn); padding: 7px 14px; color: inherit; background: #fff; text-align: left; }
.calculatie-lijstrij:hover { background: #edf5f0; box-shadow: inset 3px 0 var(--primair); }
.calculatie-lijstrij > div { min-width: 0; }
.calculatie-lijstrij > div strong,
.calculatie-lijstrij > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calculatie-lijstrij > div small,
.calculatie-lijstrij > span,
.calculatie-lijstrij > time { color: var(--subtiel); font-size: 11px; }
.calculatie-lijstrij > strong { text-align: right; font-variant-numeric: tabular-nums; }
.calculatie-leeg { display: grid; min-height: 180px; place-content: center; margin: 0; color: var(--subtiel); text-align: center; }
.calculatie-leeg strong { color: var(--inkt); }

.calculatie-samenvatting { display: grid; flex: 0 0 auto; grid-template-columns: repeat(5, minmax(100px, 1fr)); border-bottom: 1px solid #b8b8b8; background: #f7f7f7; }
.calculatie-samenvatting > div { min-width: 0; padding: 8px 12px; border-right: 1px solid var(--lijn); }
.calculatie-samenvatting span,
.calculatie-samenvatting strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calculatie-samenvatting span { color: var(--subtiel); font-size: 10px; }

.calculatie-bewerkbalk { display: grid; flex: 0 0 auto; grid-template-columns: minmax(180px, 1fr) minmax(220px, 380px) auto; align-items: end; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--lijn); background: #fafafa; }
.calculatie-bewerkbalk label { display: grid; min-width: 0; gap: 3px; color: var(--subtiel); font-size: 10px; font-weight: 600; }
.calculatie-bewerkbalk input { width: 100%; min-height: 30px; border: 1px solid #8a8a8a; border-radius: 2px; padding: 4px 7px; background: #fff; }
.calculatie-bewerkbalk input:disabled { color: var(--subtiel); background: #f3f3f3; }
.calculatie-invoerfout { margin: 0 0 6px; color: var(--fout); font-size: 11px; font-weight: 600; }

.calculatie-desktop-raster { min-width: 0; min-height: 0; flex: 1 1 auto; overflow: auto; scrollbar-gutter: stable; font-variant-numeric: tabular-nums; }
.calculatie-raster-inhoud { min-width: 930px; min-height: 100%; }
.calculatie-raster-kop,
.calculatie-raster-rij { display: grid; grid-template-columns: 42px 92px minmax(310px, 1fr) 72px 132px 132px 142px; }
.calculatie-raster-kop { position: sticky; z-index: 3; top: 0; height: 40px; border-bottom: 1px solid #737373; color: var(--subtiel); background: #f3f3f3; font-size: 11px; font-weight: 600; }
.calculatie-raster-kop > div,
.calculatie-cel { display: flex; min-width: 0; align-items: center; border-right: 1px solid #a9a9a9; padding: 5px 7px; }
.calculatie-raster-kop .getal { justify-content: flex-end; text-align: right; }
.calculatie-raster-rij { height: 44px; border-bottom: 1px solid #d4d4d4; background: #fff; }
.calculatie-raster-rij:hover { background: #f1f7f4; }
.calculatie-raster-rij.actief { background: #e5f2eb; box-shadow: inset 3px 0 var(--primair), inset 0 1px #80b99b, inset 0 -1px #80b99b; }
.calculatie-rubriek-rij { background: #e8f0eb; box-shadow: inset 3px 0 #47705a; }
.calculatie-rubriek-rij:hover { background: #e2ece6; }
.calculatie-rubriek-inhoud { display: flex; min-width: 0; grid-column: 1 / -1; align-items: center; gap: 12px; padding: 5px 12px; }
.calculatie-rubriek-inhoud span { color: #315642; font-family: "Cascadia Mono", Consolas, monospace; font-weight: 700; }
.calculatie-rubriek-inhoud strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calculatie-rubriek-rij.rubriek-niveau-2 .calculatie-rubriek-inhoud { padding-left: 28px; }
.calculatie-rubriek-rij.rubriek-niveau-3 .calculatie-rubriek-inhoud { padding-left: 44px; }
.calculatie-rubriek-rij.rubriek-niveau-4 .calculatie-rubriek-inhoud { padding-left: 60px; }
.calculatie-cel.rijhoofd { justify-content: flex-end; color: var(--subtiel); background: #fafafa; }
.calculatie-cel.postnummer { color: #0b5a28; font-family: "Cascadia Mono", Consolas, monospace; font-weight: 650; }
.calculatie-cel.omschrijving { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calculatie-cel.getal { justify-content: flex-end; text-align: right; white-space: nowrap; }
.calculatie-cel.totaal { font-weight: 650; }
.calculatie-cel.fout { color: var(--fout); background: #fff1f2; }
.calculatie-cel.invoer { padding: 3px 5px; }
.calculatie-getal { width: 100%; min-height: 30px; border: 1px solid transparent; border-radius: 2px; padding: 4px 7px; text-align: right; background: #fff; font-variant-numeric: tabular-nums; }
.calculatie-getal:hover:not(:disabled) { border-color: #8a8a8a; }
.calculatie-getal:focus { border-color: #0f6cbd; box-shadow: inset 0 -2px #0f6cbd; outline: 0; }
.calculatie-getal:disabled { color: #454545; background: transparent; }
.calculatie-getal.ongeldig { border-color: var(--fout); color: #8a1c12; background: #fff1f2; }
.calculatie-raster-leeg { display: grid; min-height: 160px; place-items: center; color: var(--subtiel); }
.calculatie-raster-totaal { position: sticky; z-index: 2; bottom: 0; display: grid; min-height: 42px; grid-template-columns: 1fr 142px; align-items: center; border-top: 2px solid var(--primair); background: #f3f8f5; }
.calculatie-raster-totaal > div { padding: 7px 12px; text-align: right; }
.calculatie-raster-totaal > strong { height: 100%; padding: 11px 8px; border-left: 1px solid #a9a9a9; text-align: right; }

.calculatie-mobiele-lijst { display: none; min-width: 0; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.calculatie-mobiele-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.calculatie-mobiele-rij { display: grid; height: 142px; grid-template-rows: 22px 38px 58px; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--lijn); background: #fff; }
.calculatie-mobiele-rij.actief { background: #e5f2eb; box-shadow: inset 3px 0 var(--primair); }
.calculatie-mobiele-rij header { display: grid; min-width: 0; grid-template-columns: 82px 1fr auto; align-items: center; gap: 8px; }
.calculatie-mobiele-rij header strong { color: #0b5a28; font-family: "Cascadia Mono", Consolas, monospace; }
.calculatie-mobiele-rij header span,
.calculatie-mobiele-rij header small { color: var(--subtiel); }
.calculatie-mobiele-rij header small { text-align: right; }
.calculatie-mobiele-rij > p { display: -webkit-box; margin: 0; overflow: hidden; line-height: 18px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.calculatie-mobiele-rij > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calculatie-mobiele-rij label,
.calculatie-mobiele-rij > div > div { display: grid; min-width: 0; grid-template-rows: 16px 32px; color: var(--subtiel); font-size: 10px; }
.calculatie-mobiele-rij > div > div { text-align: right; }
.calculatie-mobiele-rij > div strong { color: var(--inkt); font-size: 13px; }
.calculatie-mobiele-lijst > footer { display: flex; min-height: 48px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 7px 12px; border-top: 2px solid var(--primair); background: #f3f8f5; }
.calculatie-dialoog-veld { margin-top: 18px; }

@media (max-width: 900px) {
    .calculatie-lijstkop,
    .calculatie-lijstrij { min-width: 650px; grid-template-columns: minmax(220px, 1fr) 135px 85px 120px 130px; }
    .calculatie-samenvatting { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calculatie-samenvatting > div:nth-child(3) { border-right: 0; }
    .calculatie-samenvatting > div:nth-child(-n+3) { border-bottom: 1px solid var(--lijn); }
}

@media (max-width: 599px) {
    .calculatie-overzicht > header,
    .calculatie-werkblad > header { align-items: flex-start; padding: 10px 12px; }
    .calculatie-overzicht > header { flex-wrap: wrap; }
    .calculatie-overzicht > header p,
    .calculatie-werkblad > header p { display: none; }
    .calculatie-overzicht > header h1,
    .calculatie-werkblad > header h1 { max-width: calc(100vw - 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .calculatie-lijstkop { display: none; }
    .calculatie-lijstrij { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
    .calculatie-lijstrij > span:not(.calculatie-status),
    .calculatie-lijstrij > time { display: none; }
    .calculatie-lijstrij > strong { grid-column: 2; }
    .calculatie-samenvatting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calculatie-samenvatting > div { padding: 6px 9px; }
    .calculatie-samenvatting > div:nth-child(3) { border-right: 1px solid var(--lijn); }
    .calculatie-samenvatting > div:nth-child(even) { border-right: 0; }
    .calculatie-bewerkbalk { grid-template-columns: 1fr; gap: 6px; padding: 6px 9px; }
    .calculatie-bewerkbalk label:first-child { display: none; }
    .calculatie-invoerfout { margin: 0; }
    .calculatie-desktop-raster { display: none; }
    .calculatie-mobiele-lijst { display: flex; }
}