/* ============================================================
   Inkoop per project en inkoopoverzicht (ikn-)
   Tabellen met resultaat, zijpaneel per regel, keuzelijsten en
   invoer van orderregels. Alleen tokens, dus licht en donker.
   ============================================================ */

.ikn-knoppen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ikn-tabn { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--bg-2); color: var(--text-2); font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.psub__tab.is-on .ikn-tabn { background: rgba(255, 255, 255, .22); color: #fff; }
.ikn-klein { font-size: 12px; color: var(--text-3); margin: 6px 0; line-height: 1.45; }
.ikn-knop { padding: 4px 10px; font-size: 12px; min-height: 28px; gap: 5px; }
.ikn-link { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ikn-link:disabled { color: inherit; cursor: default; text-decoration: none; }
.ikn-ikoon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; color: var(--text-3); cursor: pointer; }
.ikn-ikoon:hover:not(:disabled) { color: var(--neg); border-color: var(--neg); }
.ikn-ikoon:disabled { opacity: .35; cursor: default; }
.ikn-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; background: var(--bg-2); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.ikn-code { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

/* meldingen boven het scherm en in het paneel */
.ikn-melding { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ikn-melding > svg { flex: none; margin-top: 2px; color: var(--text-3); }
/* h128 (Q58b): op 375 breed loopt de tekst en de knop in de melding door naar een volgende regel */
.ikn-melding > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ikn-melding .btn { white-space: normal; max-width: 100%; text-align: left; }
.ikn-melding--wacht { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 9%, var(--surface)); }
.ikn-melding--wacht > svg { color: var(--amber); }
.ikn-melding--fout { border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); background: color-mix(in srgb, var(--neg) 7%, var(--surface)); }
.ikn-melding--fout > svg { color: var(--neg); }

/* kerncijfers */
.ikn-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.ikn-cijfer { background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ikn-cijfer > span { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.ikn-cijfer > b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ikn-cijfer > i { font-style: normal; font-size: 11.5px; color: var(--text-3); }

.ikn-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ikn-sec > span:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.ikn-scope { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); }
.ikn-scope > span { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.ikn-scope > p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

/* balk met filters en zoeken */
.ikn-balk { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ikn-chips { display: flex; gap: 6px; }
.ikn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ikn-chip > span { font-size: 11px; color: var(--text-3); font-weight: 600; }
.ikn-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ikn-chip.is-on > span { color: rgba(255, 255, 255, .8); }
.ikn-zoek { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-3); min-width: 260px; }
.ikn-zoek input { border: 0; background: none; outline: none; font: inherit; font-size: 13px; color: var(--text); padding: 7px 0; flex: 1; min-width: 0; }
.ikn-zoek:focus-within { border-color: var(--brand); }

/* tabellen */
.ikn-tabel { --kol: 2fr 1.3fr 1fr 1fr 1fr 150px; font-size: 13px; }
.ikn-tabel--res { --kol: minmax(0, 2.2fr) minmax(0, 1.4fr) 110px 110px 130px 160px; }
.ikn-tabel--aanvragen { --kol: minmax(0, 2.4fr) 110px 130px 100px 140px 150px; }
.ikn-tabel--contract { --kol: minmax(0, 2.2fr) minmax(0, 1.4fr) 115px 130px 80px 160px; }
.ikn-tabel--orders { --kol: minmax(0, 2.2fr) minmax(0, 1.4fr) 105px 125px 115px 150px; }
.ikn-tabel--vergelijk { --kol: minmax(0, 1.5fr) 115px 120px 120px minmax(0, 2fr) 190px; }
.ikn-tabel--wacht { --kol: minmax(0, 1.6fr) minmax(0, 1.4fr) 170px auto; }
.ikn-tabel--dekking { --kol: 110px minmax(0, 1fr) 160px 150px; }
.ikn-tabel--dekking-kies { --kol: 22px 110px minmax(0, 1fr) 160px 150px; }
.ikn-tabel--voorstel { --kol: minmax(0, 1fr) 130px 130px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ikn-tabel--voorstel .ikn-tabel__rij:last-child { border-bottom: 0; }
.ikn-tabel__rij--zacht, .ikn-tabel__rij--zacht:hover { background: var(--bg-2); }
.ikn-tabel--overzicht-a { --kol: 130px minmax(0, 2fr) 110px 130px 100px 130px 150px; }
.ikn-tabel--overzicht-c { --kol: 130px minmax(0, 2fr) minmax(0, 1.3fr) 115px 125px 80px 160px; }
.ikn-tabel--overzicht-o { --kol: 130px minmax(0, 2fr) minmax(0, 1.3fr) 105px 105px 115px 140px; }
.ikn-tabel--overzicht-w { --kol: 130px minmax(0, 2fr) minmax(0, 1.2fr) 90px 130px 170px; }
.ikn-tabel--scores { --kol: minmax(0, 2fr) 90px 110px 110px 110px; }
.ikn-tabel__kop, .ikn-tabel__rij { display: grid; grid-template-columns: var(--kol); gap: 14px; align-items: center; padding: 10px 20px; }
.ikn-tabel__kop { padding-top: 9px; padding-bottom: 9px; background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ikn-tabel__kop > span:nth-child(n+3) { text-align: right; }
.ikn-tabel__kop > span:last-child { text-align: left; }
.ikn-tabel--dekking .ikn-tabel__kop > span, .ikn-tabel--wacht .ikn-tabel__kop > span { text-align: left; }
.ikn-tabel--aanvragen .ikn-tabel__kop > span:nth-child(2), .ikn-tabel--vergelijk .ikn-tabel__kop > span:nth-child(2) { text-align: right; }
.ikn-tabel--vergelijk .ikn-tabel__kop > span:nth-child(5) { text-align: left; }
.ikn-tabel--overzicht-a .ikn-tabel__kop > span:nth-child(3), .ikn-tabel--overzicht-c .ikn-tabel__kop > span:nth-child(3), .ikn-tabel--overzicht-o .ikn-tabel__kop > span:nth-child(3) { text-align: left; }
.ikn-tabel__rij { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.ikn-tabel__rij:hover { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.ikn-tabel__rij:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ikn-tabel__rij--stil { cursor: default; }
.ikn-tabel__rij--stil:hover { background: var(--surface); }
.ikn-tabel__rij--totaal { background: var(--bg-2); font-weight: 700; border-bottom: 0; }
.ikn-tabel__rij--totaal:hover { background: var(--bg-2); }
.ikn-tabel__rij:last-child { border-bottom: 0; }

.ikn-groep { display: flex; align-items: center; gap: 12px; padding: 8px 20px; background: color-mix(in srgb, var(--brand) 6%, var(--bg-2)); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.ikn-groep > i { flex: 1; }
.ikn-groep > em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); font-size: 12px; }

.ikn-naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ikn-naam > b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ikn-naam > b > em { margin-left: 8px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pos-tekst); }
.ikn-naam > i { font-style: normal; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ikn-partijnaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ikn-partijnaam > em, .ikn-datum > em, .ikn-teller > em { font-style: normal; color: var(--text-3); font-size: 12px; }
.ikn-num { text-align: right; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.ikn-num > i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ikn-num--leeg { color: var(--text-3); font-size: 11.5px; }
.ikn-num--zacht { color: var(--text-2); }
.ikn-res { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.ikn-res > i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.ikn-datum { text-align: right; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ikn-datum.is-verlopen { color: var(--signal); font-weight: 600; }
.ikn-datum > i { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.ikn-teller { text-align: right; font-variant-numeric: tabular-nums; display: flex; justify-content: flex-end; align-items: baseline; gap: 2px; }
.ikn-teller > b { font-weight: 700; }
.ikn-teller > i { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 4px; }
/* h135 (vraag 497): stand en het label Na gunning aangevraagd lopen door naar een tweede regel in plaats van buiten de kolom. */
.ikn-stand { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ikn-acties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ikn-opbouw { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.ikn-opbouw > span { display: flex; justify-content: space-between; gap: 10px; }
.ikn-opbouw > span > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ikn-opbouw > span > span:last-child { font-variant-numeric: tabular-nums; }
.ikn-opbouw > i { font-style: normal; color: var(--text-3); font-size: 11px; }

/* zijpaneel */
/* Meldpunt Max 28-09: aanvraag, contract en inkooporder openen als centraal scherm in plaats van
   een zijbalk (overal in Inkoop, dezelfde Paneel-component). Op de telefoon blijft het schermvullend
   (werkbank.css). */
.ikn-paneel__overlay { position: fixed; inset: 0; z-index: 150; background: rgba(15, 25, 35, .38); display: flex; align-items: center; justify-content: center; padding: 4vh 24px; animation: ikn-in .15s ease-out; }
.ikn-paneel { width: min(1280px, 92vw); max-height: 92vh; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .24); display: flex; flex-direction: column; animation: ikn-schuif .18s ease-out; }
.ikn-paneel__head { position: relative; padding: 20px 56px 14px 24px; border-bottom: 1px solid var(--line); }
.ikn-paneel__head h2 { margin: 4px 0 0; font-size: 20px; font-weight: 650; line-height: 1.25; }
.ikn-paneel__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ikn-paneel__x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.ikn-paneel__x:hover { background: var(--bg-2); }
.ikn-paneel__body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }
.ikn-paneel__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--bg-2); }
@keyframes ikn-in { from { opacity: 0; } }
@keyframes ikn-schuif { from { transform: translateY(12px) scale(.985); opacity: .4; } }
@media (max-width: 640px) { .ikn-paneel__overlay { padding: 0; } .ikn-paneel { border: 0; border-radius: 0; } }

/* partijen in het paneel */
.ikn-partijen { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ikn-partij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ikn-partij:last-child { border-bottom: 0; }
.ikn-partij.is-winnaar { background: color-mix(in srgb, var(--pos) 8%, var(--surface)); }
.ikn-partij.is-af { opacity: .55; }
.ikn-partij__nm { display: flex; flex-direction: column; min-width: 0; }
.ikn-partij__nm > b { font-weight: 600; font-size: 13px; }
.ikn-partij__nm > b > em { margin-left: 8px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pos-tekst); }
.ikn-partij__nm > span { font-size: 11.5px; color: var(--text-3); }
.ikn-partij__fig { text-align: right; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.ikn-partij__fig > b { font-weight: 650; }
.ikn-partij__fig > span { font-size: 11.5px; }
.ikn-partij__knop { display: flex; gap: 6px; }

/* stappen na gunning */
.ikn-stappen { display: flex; flex-direction: column; gap: 0; }
.ikn-stap { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ikn-stap__bol { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; }
.ikn-stap.is-klaar .ikn-stap__bol { background: var(--pos); border-color: var(--pos); }
.ikn-stap__tekst { display: flex; flex-direction: column; min-width: 0; }
.ikn-stap__tekst > b { font-size: 13px; font-weight: 600; }
.ikn-stap__tekst > span { font-size: 12px; color: var(--text-3); }
.ikn-garantie { display: flex; align-items: center; gap: 10px; padding: 12px 0 0; }
.ikn-garantie label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ikn-garantie label > span { font-weight: 600; }
.ikn-garantie input { width: 70px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; text-align: right; }
.ikn-garantie label > em { font-style: normal; color: var(--text-3); font-size: 12px; }

/* orderpaneel */
.ikn-mini { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 12.5px; }
.ikn-mini__kop, .ikn-mini__rij { display: grid; grid-template-columns: minmax(0, 1fr) 100px 100px 100px; gap: 10px; padding: 8px 12px; }
.ikn-mini__kop { background: var(--bg-2); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ikn-mini__kop > span:not(:first-child), .ikn-mini__rij > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ikn-mini__rij { border-top: 1px solid var(--line); }
.ikn-mini__rij > span:first-child { display: flex; flex-direction: column; }
.ikn-mini__rij > span:first-child > i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ikn-ontvangst { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ikn-ontvangst > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.ikn-ontvangst > div:first-child > span { color: var(--text-3); font-size: 12px; }
.ikn-ontvangst__knop { display: flex; gap: 6px; align-items: center; }
.ikn-ontvregel { display: grid; grid-template-columns: minmax(0, 1fr) 120px 130px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ikn-ontvregel > span:first-child { display: flex; flex-direction: column; }
.ikn-ontvregel > span:first-child > i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ikn-ontvregel input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; text-align: right; }
/* h66 Q4: zonder Inkoopbedragen zien de hele regel met een vinkje; uitleg boven de orderlijst */
.ikn-ontvregel__heel { display: flex; gap: 6px; align-items: center; justify-content: flex-end; font-size: 12px; }
.ikn-ontvregel .ikn-ontvregel__heel input { padding: 0; width: auto; }
.ikn-zonder { margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--line); }
/* h69 slice 20: afkeur bij ontvangst; een extra rij onder de orderregel en het blok met reden en toelichting */
.ikn-afkeur { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; align-items: center; padding: 4px 0 8px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.ikn-afkeur > span:first-child { display: flex; flex-direction: column; }
.ikn-afkeur > span:first-child > i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ikn-afkeur input[inputmode] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; text-align: right; }
.ikn-afkeur .ikn-ontvregel__heel input { padding: 0; width: auto; }
.ikn-afkeur__aan { display: flex; gap: 8px; align-items: center; margin: 12px 0 4px; font-size: 13px; }
.ikn-afkeur__blok { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 6px 0 4px; }
.ikn-afkeur__blok select { width: 100%; }
@media (max-width: 640px) {
  .ikn-ontvregel { grid-template-columns: minmax(0, 1fr) 96px; }
  .ikn-ontvregel > span:first-child { grid-column: 1 / -1; }
  .ikn-afkeur { grid-template-columns: minmax(0, 1fr) 96px; padding-left: 8px; }
  .ikn-ontvangst { flex-direction: column; gap: 6px; }
  .ikn-ontvangst__knop { flex-wrap: wrap; }
}
/* orderregels op een telefoon: de regel over de volle breedte, daaronder besteld, ontvangen en open */
@media (max-width: 640px) {
  .ikn-mini--order:not(.ikn-mini--concept) .ikn-mini__kop, .ikn-mini--order:not(.ikn-mini--concept) .ikn-mini__rij { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2px; }
  .ikn-mini--order:not(.ikn-mini--concept) .ikn-mini__kop > span:first-child { display: none; }
  .ikn-mini--order:not(.ikn-mini--concept) .ikn-mini__rij > span:first-child { grid-column: 1 / -1; }
}

/* keuzelijsten */
.ikn-keuzelijst { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
.ikn-keuzelijst--kort { max-height: 196px; }
.ikn-keuzelijst__rij { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.ikn-keuzelijst__rij:last-child { border-bottom: 0; }
.ikn-keuzelijst__rij:hover { background: var(--bg-2); }
.ikn-keuzelijst__rij.is-on { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.ikn-keuzelijst .ikn-klein { margin: 0; }

/* calculatieregels kiezen */
.ikn-kiezer { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ikn-kiezer__zoek { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.ikn-kiezer__zoek input { flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: 13px; color: var(--text); padding: 9px 0; }
.ikn-kiezer__lijst { max-height: 280px; overflow-y: auto; }
.ikn-kiezer__kop { display: grid; grid-template-columns: 18px minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 7px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.ikn-kiezer__kop > button { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; text-align: left; padding: 0; min-width: 0; }
.ikn-kiezer__kop > button > span { color: var(--text-3); font-size: 11.5px; }
.ikn-kiezer__regel { display: grid; grid-template-columns: 18px 86px minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 6px 12px 6px 32px; border-bottom: 1px solid var(--line); font-size: 12.5px; cursor: pointer; }
.ikn-kiezer__regel:hover { background: var(--bg-2); }
.ikn-kiezer__oms { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ikn-kiezer__oms > .ikn-delen { margin-top: 2px; }
.ikn-kiezer__som { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--bg-2); font-size: 12.5px; color: var(--text-2); }
.ikn-kiezer__som > b { color: var(--text); font-variant-numeric: tabular-nums; }

/* orderregels invullen */
.ikn-regels { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ikn-regels__kop, .ikn-regels__rij { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px 130px 28px; gap: 8px; align-items: center; padding: 6px 10px; }
.ikn-regels__kop { background: var(--bg-2); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ikn-regels__rij { border-top: 1px solid var(--line); }
.ikn-regels__rij input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; min-width: 0; }
.ikn-regels__rij input:focus { border-color: var(--brand); outline: none; }
.ikn-regels__voet { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 12.5px; color: var(--text-2); }
.ikn-regels__voet b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: 6px; }

/* keuze bij nieuwe inkoopopdracht */
.ikn-keuze { display: flex; flex-direction: column; gap: 10px; }
.ikn-keuze__optie { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ikn-keuze__optie > svg { grid-row: 1 / 3; align-self: center; color: var(--brand); }
.ikn-keuze__optie > span { font-size: 12.5px; color: var(--text-3); }
.ikn-keuze__optie:hover, .ikn-keuze__rij:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.ikn-keuze__rij { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 12px; align-items: center; width: 100%; padding: 10px 14px; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ikn-keuze__rij > span:first-child { display: flex; flex-direction: column; }
.ikn-keuze__rij > span:first-child > i { font-style: normal; font-size: 12px; color: var(--text-3); }

/* inkoopoverzicht over alle projecten */
.ikn-project { display: flex; flex-direction: column; min-width: 0; }
.ikn-project > b { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; font-weight: 600; color: var(--brand); }
.ikn-project > i { font-style: normal; font-size: 11px; line-height: 1.35; color: var(--text-3); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .ikn-tabel__kop { display: none; }
  .ikn-tabel__rij { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .ikn-tabel__rij > :nth-child(n+3) { justify-self: start; text-align: left; align-items: flex-start; }
  .ikn-tabel__rij > .ikn-stand { grid-column: 2; grid-row: 1; justify-self: end; }
  /* h135 (vraag 497): smal staan stand en label onder elkaar, zodat de naam zijn breedte houdt. */
  .ikn-tabel__rij > .ikn-stand { flex-direction: column; align-items: flex-end; }
  .ikn-zoek { min-width: 0; flex: 1; }
  /* h50: zonder kolommen lopen namen, partij en toelichting terug in plaats van af te kappen */
  .ikn-naam > b, .ikn-naam > i, .ikn-partijnaam { white-space: normal; overflow-wrap: anywhere; }
  /* h96 (Q24-restpunt): in de vergelijking krijgen prijsopbouw en knoppen elk een eigen volle rij;
     naast elkaar liep de knop Offerte over de prijsopbouw heen. */
  .ikn-tabel--vergelijk .ikn-tabel__rij > .ikn-opbouw { grid-column: 1 / -1; justify-self: stretch; }
  .ikn-tabel--vergelijk .ikn-tabel__rij > .ikn-acties { grid-column: 1 / -1; justify-content: flex-start; }
  .ikn-tabel--vergelijk .ikn-tabel__rij > .ikn-acties:empty, .ikn-tabel--vergelijk .ikn-tabel__rij > .ikn-opbouw:empty { display: none; }
}
@media (max-width: 640px) {
  .ikn-paneel__body, .ikn-paneel__head { padding-left: 16px; padding-right: 16px; }
  .ikn-regels__kop { display: none; }
  /* h37: aantal, eenheid en bedrag naast elkaar met de wisknop erachter; het bedrag viel eerder
     in de kolom van 28 px van de wisknop */
  .ikn-regels__rij { grid-template-columns: repeat(3, minmax(0, 1fr)) 32px; }
  .ikn-regels__rij .ikn-ikoon { width: 32px; height: 32px; }
  .ikn-regels__rij > input:first-child { grid-column: 1 / -1; }
}
.ikn-select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; max-width: 240px; }

/* ---- kostensoorten kiezen (26-09) ---- */
.ikn-ks__rij { display: flex; flex-wrap: wrap; gap: 8px; }
.ikn-ks__chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .12s, background .12s; }
.ikn-ks__chip:hover { border-color: var(--brand); }
.ikn-ks__chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ikn-ks__chip > b { font-weight: 600; }
.ikn-ks__chip > i { font-style: normal; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ikn-ks__vink { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--surface); color: #fff; }
.ikn-ks__chip.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.ikn-ks__chip.is-on .ikn-ks__vink { border-color: var(--brand); background: var(--brand); }
.ikn-ks__chip.is-leeg:not(.is-on) { color: var(--text-3); border-style: dashed; }
.ikn-ks__snel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.ikn-ks__open { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 12.5px; }
.ikn-ks__open > span > i { font-style: normal; color: var(--text-3); margin-right: 6px; }
.ikn-ks__open > span > b { font-variant-numeric: tabular-nums; }
.ikn-ks__open > .ikn-klein { margin: 0; }
.ikn-delen { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--text-3); white-space: normal; }
.ikn-delen > i { font-style: normal; font-variant-numeric: tabular-nums; }
.ikn-delen > i.is-on { color: var(--text); font-weight: 600; }
.ikn-tag--lev { background: color-mix(in srgb, var(--steel, var(--brand)) 14%, var(--surface)); color: var(--text); }
.ikn-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 10px 0 2px; }
.ikn-keuzes > label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--surface); }
.ikn-keuzes > label.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.ikn-keuzes > label > input { margin-top: 2px; accent-color: var(--brand); }
.ikn-keuzes > label > span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.ikn-keuzes > label > span > i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
@media (max-width: 640px) {
  .ikn-tabel--voorstel .ikn-tabel__rij { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---- h58: detail offerteaanvraag (regels, versies, tijdlijn) ---- */
.ikn-mini--regels .ikn-mini__kop, .ikn-mini--regels .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 120px 110px; }
.ikn-mini--regels .ikn-mini__rij > span:nth-child(2) { font-size: 11.5px; color: var(--text-2); }
.ikn-mini__code { font-weight: 600; font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* h99 (INK-2.F5): betrouwbaarheidslabel boven de regels van een offerteaanvraag */
.ikn-bron { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ikn-bron__kop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.ikn-mini__som { background: var(--bg-2); font-weight: 650; }
.ikn-versies { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ikn-versies > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11.5px; color: var(--text-3); }
.ikn-versies > li > b { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ikn-tijdlijn { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.ikn-tijdlijn > li { display: flex; flex-direction: column; gap: 1px; padding: 6px 0 8px 12px; font-size: 12.5px; }
.ikn-tijdlijn > li > span { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ikn-tijdlijn > li > b { font-weight: 600; }
.ikn-tijdlijn > li > i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
@media (max-width: 640px) {
  .ikn-mini--regels .ikn-mini__kop { display: none; }
  .ikn-mini--regels .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .ikn-mini--regels .ikn-mini__rij > span:first-child { grid-column: 1 / -1; }
  .ikn-mini--regels .ikn-mini__rij > span:nth-child(2) { text-align: left; }
  .ikn-partij { grid-template-columns: minmax(0, 1fr) auto; }
  .ikn-partij__knop { grid-column: 1 / -1; flex-wrap: wrap; }
}

/* ---- h58 slice 4: uitvraagsjablonen (keuze bij versturen, beheer in Instellingen) ---- */
.ikn-sjabloonkeuze { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.ikn-sjabloonkeuze > .bib-field { flex: 1; min-width: 0; margin: 0; }
.ikn-sjabloonkeuze > .btn { flex-shrink: 0; margin-bottom: 2px; }
.ikn-sjabloonvb > p { margin: 2px 0 8px; font-size: 13px; }
.ikn-sjabloonvb > pre { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ikn-sjpalet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; }
.ikn-sjpalet > .tpl-var { border: none; cursor: pointer; }
.ikn-sjpalet > .tpl-var:disabled { cursor: default; opacity: .8; }
@media (max-width: 640px) {
  .ikn-sjabloonkeuze { flex-direction: column; align-items: stretch; }
  .ikn-sjlijst .tpl-row--h { display: none; }
  .plat .ikn-sjlijst > .tpl-row { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .ikn-sjlijst > .tpl-row > .tpl-meta { display: none; }
}

/* h58 slice 6: dekking als actielijst */
.ikn-dk-pct { display: flex; align-items: baseline; gap: 6px; }
.ikn-dk-pct > b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--brand); }
.ikn-dk-pct > span { font-size: 12px; color: var(--text-3); }
.ikn-dk-voortgang { padding: 0 20px 14px; }
.ikn-dk-balk { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--signal) 22%, var(--surface)); overflow: hidden; }
.ikn-dk-balk > i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.ikn-dk-som { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.ikn-dk-som b { color: var(--text); font-variant-numeric: tabular-nums; }
.ikn-dk-ks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.ikn-dk-ks:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; overflow: hidden; }
.ikn-dk-ks__blok { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; background: var(--bg-2); min-width: 0; }
.ikn-dk-ks__blok > span { font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.ikn-dk-ks__blok > b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ikn-dk-ks__blok > i { font-style: normal; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ikn-dk-ks__blok > em { font-style: normal; font-size: 11px; color: var(--text-3); overflow-wrap: anywhere; }
.ikn-dk-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.ikn-dk-filters { justify-content: flex-start; }
.ikn-dk-keuze { margin: 12px 16px 4px; padding: 12px 14px; border: 1px solid var(--brand); border-radius: 10px; background: color-mix(in srgb, var(--brand) 5%, var(--surface)); display: flex; flex-direction: column; gap: 8px; }
.ikn-dk-keuze__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 13px; }
.ikn-dk-keuze__kop > span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ikn-dk-keuze__rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ikn-dk-keuze__rij > .ikn-klein { margin: 0; min-width: 90px; }
.ikn-dk-chips { flex-wrap: wrap; }
.ikn-dk-keuze__knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.ikn-dk-keuze > .ikn-klein { margin: 0; }
.ikn-dk-uitslag { margin: 10px 16px 0; font-size: 12.5px; }
.ikn-dk-uitslag ul { margin: 6px 0; padding-left: 18px; line-height: 1.5; }
.ikn-dk-oms { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ikn-dk-oms > b { font-weight: 600; overflow-wrap: anywhere; }
.ikn-dk-delen { display: flex; flex-wrap: wrap; gap: 4px; }
.ikn-dk-deel { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--line); border-left: 3px solid var(--line); background: var(--surface); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ikn-dk-deel--toegewezen { border-left-color: var(--brand); }
.ikn-dk-deel--directielevering { border-left-color: var(--steel); }
.ikn-dk-deel--stelpost { border-left-color: var(--amber); }
.ikn-dk-deel--eigen_werk { border-left-color: var(--navy); }
.ikn-dk-deel--nog_te_beleggen { border-left-color: var(--signal); color: var(--text); font-weight: 600; }
.ikn-dk-eig { font-size: 12.5px; overflow-wrap: anywhere; }
.ikn-dk-eig.is-leeg { color: var(--text-3); }
.ikn-tabel--dekking .ikn-tabel__rij.is-gekozen, .ikn-tabel--dekking .ikn-tabel__rij.is-gekozen:hover { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.ikn-dk-kies { display: flex; align-items: center; }
.ikn-dk-kies > input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
@media (max-width: 1180px) {
  .ikn-tabel--dekking .ikn-tabel__rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code num" "oms oms" "eig eig"; }
  .ikn-tabel--dekking-kies .ikn-tabel__rij { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "kies code num" ". oms oms" ". eig eig"; }
  .ikn-tabel--dekking .ikn-tabel__rij > .ikn-dk-kies { grid-area: kies; }
  /* aanraakdoel minstens 24 bij 24 op tablet en telefoon (h109, Q35) */
  .ikn-dk-kies > input { width: 24px; height: 24px; }
  .ikn-tabel--dekking .ikn-tabel__rij > .ikn-code { grid-area: code; }
  .ikn-tabel--dekking .ikn-tabel__rij > .ikn-dk-oms { grid-area: oms; }
  .ikn-tabel--dekking .ikn-tabel__rij > .ikn-dk-eig { grid-area: eig; }
  .ikn-tabel--dekking .ikn-tabel__rij > .ikn-num { grid-area: num; justify-self: end; align-items: flex-end; text-align: right; }
  .ikn-dk-eig:not(.is-leeg)::before { content: 'Eigenaar: '; color: var(--text-3); }
}
@media (max-width: 640px) {
  .ikn-dk-voortgang, .ikn-dk-ks__blok { padding-left: 16px; padding-right: 16px; }
  .ikn-dk-filters .ikn-select { max-width: none; flex: 1 1 140px; min-width: 0; }
  .ikn-dk-filters .ikn-zoek { flex: 1 1 100%; }
  .ikn-dk-keuze { margin-left: 12px; margin-right: 12px; }
  .ikn-dk-keuze__knoppen > .btn { flex: 1 1 auto; }
  .ikn-dk-deel { white-space: normal; }
}

/* ---- h61 slice 10: documentset, bron gewijzigd en rectificatie ---- */
.ikn-mini--set .ikn-mini__kop, .ikn-mini--set .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 120px 110px 96px; align-items: center; }
.ikn-mini--set .ikn-mini__rij > span:nth-child(2) { font-size: 11.5px; color: var(--text-2); }
.ikn-mini--set .ikn-mini__rij > span:nth-child(3) { display: flex; flex-direction: column; align-items: flex-end; }
.ikn-set-nieuw { font-style: normal; font-size: 11px; color: var(--signal); }
/* h88 slice a: de actuele waarde onder de stand bij vrijgave */
.ikn-mini--regels .ikn-mini__rij > span > .ikn-set-nieuw { display: block; }
.ikn-rij-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 10px; }
.ikn-keuzelijst--set { max-height: 360px; }
.ikn-keuzelijst__groep { position: sticky; top: 0; z-index: 1; padding: 6px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ikn-keuzelijst--set .ikn-keuzelijst__rij select { max-width: 160px; }
@media (max-width: 640px) {
  .ikn-mini--set .ikn-mini__kop { display: none; }
  .ikn-mini--set .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 4px; }
  .ikn-mini--set .ikn-mini__rij > span:first-child { grid-column: 1 / -1; }
  .ikn-mini--set .ikn-mini__rij > span:nth-child(2) { text-align: left; }
  .ikn-keuzelijst--set .ikn-keuzelijst__rij { flex-wrap: wrap; }
  .ikn-keuzelijst--set .ikn-keuzelijst__rij select { max-width: none; flex: 1 1 100%; margin-left: 26px; }
}

/* ---- h61 slice 12: uitslag aan de partijen ---- */
.ikn-mini--uitslag .ikn-mini__kop, .ikn-mini--uitslag .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 120px 210px 96px; }
.ikn-mini--uitslag .ikn-mini__rij > span:nth-child(3) > i { font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 2px; }
@media (max-width: 640px) {
  .ikn-mini--uitslag .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) auto auto; }
}

/* h61 slice 14: leveling per regel in de vergelijking */
.ikn-level { border-top: 1px solid var(--line); }
.ikn-level__kop { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 10px; }
.ikn-level__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ikn-level__scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ikn-tabel--level .ikn-tabel__kop { align-items: end; }
.ikn-tabel--level .ikn-tabel__kop > span { text-align: right; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.ikn-tabel--level .ikn-tabel__kop > span:first-child { text-align: left; }
.ikn-tabel--level .ikn-tabel__kop > span:first-child, .ikn-tabel--level .ikn-tabel__rij > span:first-child { position: sticky; left: 0; z-index: 1; background: inherit; margin-left: -20px; padding-left: 20px; }
.ikn-tabel--level .ikn-naam > b { font-weight: 500; }
.ikn-tabel--level .ikn-num > i { white-space: normal; text-align: right; overflow-wrap: anywhere; }
.ikn-level__niet { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ikn-level__laag { font-weight: 700; }
.ikn-level__laagste { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pos-tekst); }
/* de leveling blijft ook smal een tabel naast elkaar; hij schuift binnen de kaart, de pagina niet */
@media (max-width: 1180px) {
  .ikn-tabel--level .ikn-tabel__kop { display: grid; }
  .ikn-tabel--level .ikn-tabel__rij { grid-template-columns: var(--kol); }
  .ikn-tabel--level .ikn-tabel__rij > .ikn-num { justify-self: stretch; align-items: flex-end; text-align: right; }
}
@media (max-width: 640px) {
  .ikn-level__kop { padding: 14px 16px 8px; }
  .ikn-tabel--level { --ikn-level-eerste: 160px; }
}

/* h66 slice 15: contract met termijnschema */
.ikn-contract { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.ikn-contract__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ikn-contract__kop > div { display: flex; flex-direction: column; min-width: 0; }
.ikn-contract__kop b { font-size: 13px; font-weight: 600; }
.ikn-contract__kop span { font-size: 12px; color: var(--text-3); }
.ikn-contract__knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.ikn-mini--termijn .ikn-mini__kop, .ikn-mini--termijn .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 90px 120px; }
.ikn-mini--delta { margin-top: 10px; }
.ikn-mini--delta .ikn-mini__kop, .ikn-mini--delta .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 120px 110px; }
/* h66 slice 18: aanvullingen en ontbinding */
.ikn-mini--aanv { margin-top: 10px; }
.ikn-mini--aanv .ikn-mini__kop, .ikn-mini--aanv .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 120px 150px; }
.ikn-mini--aanv .ikn-mini__rij > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ikn-ontb { margin-top: 10px; }
.ikn-ontb .ikn-contract__knoppen { display: flex; }
.ikn-signalen { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.ikn-termijnen { display: flex; flex-direction: column; gap: 6px; }
.ikn-termijnen__kop, .ikn-termijnen__rij { display: grid; grid-template-columns: minmax(0, 1fr) 118px 90px 150px 120px 34px; gap: 8px; align-items: center; }
.ikn-termijnen__kop { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ikn-termijnen__kop > span:nth-child(5) { text-align: right; }
.ikn-termijnen__rij input, .ikn-termijnen__rij select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; min-width: 0; }
.ikn-termijnen__rij input[inputmode="decimal"] { text-align: right; }
.ikn-termijnen__rij > .ikn-num { text-align: right; font-variant-numeric: tabular-nums; }
.ikn-bestand { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; margin: 10px 0; }
.ikn-bestand > span { color: var(--text-3); }
@media (max-width: 640px) {
  .ikn-termijnen__kop { display: none; }
  .ikn-termijnen__rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .ikn-termijnen__rij > input:first-child { grid-column: 1 / -1; }
  .ikn-termijnen__rij > button { justify-self: end; }
  .ikn-mini--termijn .ikn-mini__kop, .ikn-mini--termijn .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 60px 100px; }
  .ikn-mini--delta .ikn-mini__kop, .ikn-mini--delta .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 90px 80px; }
  .ikn-mini--aanv .ikn-mini__kop, .ikn-mini--aanv .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 96px; }
  .ikn-mini--aanv .ikn-mini__kop > span:nth-child(3) { display: none; }
  .ikn-mini--aanv .ikn-mini__rij > span:nth-child(3) { grid-column: 1 / -1; text-align: left; color: var(--text-3); font-size: 12px; }
}

/* ---- h66 slice 19: orderregels met prijs per eenheid en leverdatum, conceptorder en contractsignaal ---- */
.ikn-regels--prijs .ikn-regels__kop, .ikn-regels--prijs .ikn-regels__rij { grid-template-columns: minmax(0, 1fr) 76px 64px 104px 118px 132px 28px; }
.ikn-regels__rij input.is-berekend { background: var(--bg-2); color: var(--text-2); border-style: dashed; }
.ikn-regels__fout { padding: 0 10px 8px; font-size: 12px; color: var(--signal); }
.ikn-regels__artikel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 10px 8px; font-size: 12px; color: var(--text-3); }
.ikn-regels__artikeltekst { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.ikn-regels__artikelknoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.ikn-regels__artikelzoek { flex: 1 1 100%; display: grid; gap: 6px; }
.ikn-regels__artikelzoek input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; min-width: 0; }
.ikn-regels__artikelzoek input:focus { border-color: var(--brand); outline: none; }
.ikn-regels__artikellijst { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ikn-regels__artikellijst li + li { border-top: 1px solid var(--line); }
.ikn-regels__artikellijst button { display: flex; gap: 8px; align-items: baseline; width: 100%; padding: 7px 10px; background: var(--surface); border: 0; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.ikn-regels__artikellijst button:hover, .ikn-regels__artikellijst button:focus-visible { background: var(--bg-2); }
.ikn-regels__artikellijst i { margin-left: auto; font-style: normal; color: var(--text-3); }
/* h99 (vraag 378): hoofdstuk en soort onder een artikel met een gelijke omschrijving */
.ikn-regels__artikelnaam { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ikn-regels__artikelnaam small { font-size: 11.5px; color: var(--text-3); }
.ikn-regelmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 11px; color: var(--text-3); }
/* h96 (INK-6.F3): ordersoort, matchniveau en matchwijze in het orderpaneel */
[data-ik="matchinstelling"] .set-kv { gap: 12px; }
[data-ik="matchinstelling"] .set-kv b { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ikn-match__uitleg { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; font-style: normal; color: var(--text-3); }
[data-ik="matchinstelling"] .ikn-link { margin-top: 4px; }
.ikn-match__form { display: grid; gap: 10px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.ikn-match__knoppen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ikn-signaal { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; display: grid; gap: 4px; background: var(--surface); }
.ikn-signaal__rij { display: flex; justify-content: space-between; gap: 12px; }
.ikn-signaal__rij > span { color: var(--text-2); }
.ikn-signaal__rij > b { font-variant-numeric: tabular-nums; }
.ikn-signaal__som { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.ikn-signaal__uitleg { font-size: 12px; color: var(--text-3); }
.ikn-signaal.is-boven { border-color: var(--signal); }
.ikn-signaal.is-boven .ikn-signaal__som > b, .ikn-signaal.is-boven .ikn-signaal__uitleg { color: var(--signal); }
.ikn-orderlijst { display: grid; gap: 4px; margin: -2px 0 10px 30px; }
.ikn-orderlijst__rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.ikn-orderlijst__rij:hover { border-color: var(--brand); }
.ikn-orderlijst__rij > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ikn-orderlijst__rij > span:first-child > i { font-style: normal; font-size: 11px; color: var(--text-3); }
@media (max-width: 900px) {
  .ikn-regels--prijs .ikn-regels__kop { display: none; }
  .ikn-regels--prijs .ikn-regels__rij { grid-template-columns: repeat(3, minmax(0, 1fr)) 32px; }
  .ikn-regels--prijs .ikn-regels__rij > input:first-child { grid-column: 1 / 4; grid-row: 1; }
  .ikn-regels--prijs .ikn-regels__rij > .ikn-ikoon { grid-column: 4; grid-row: 1; width: 32px; height: 32px; }
  .ikn-regels--prijs .ikn-regels__rij > input:nth-child(5) { grid-column: 1 / 3; }
  .ikn-regels--prijs .ikn-regels__rij > input:nth-child(6) { grid-column: 3 / 5; }
  .ikn-orderlijst { margin-left: 0; }
}
.ikn-mini--concept .ikn-mini__kop, .ikn-mini--concept .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 120px; }

/* ---- h69 slice 21: raamcontracten, afroep en besteladvies ---- */
.ikn-stap__knoppen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ikn-veldfout { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--signal); }
.ikn-tabel--overzicht-r { --kol: minmax(0, 2fr) minmax(0, 1.3fr) 110px 120px 130px 130px 130px; }
.ikn-tabel--overzicht-r .ikn-tabel__kop > span:nth-child(2), .ikn-tabel--overzicht-r .ikn-tabel__kop > span:nth-child(3) { text-align: left; }
.ikn-tabel--overzicht-r .ikn-num--zacht { text-align: left; align-items: flex-start; white-space: normal; }
.ikn-tabel__rij.is-open { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.ikn-rcdetail { padding: 14px 20px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ikn-rcdetail__blokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ikn-mini--rc { background: var(--surface); }
.ikn-mini--rc .ikn-mini__kop, .ikn-mini--rc .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) auto; }
.ikn-mini--rc .ikn-mini__rij > span:first-child { display: block; overflow-wrap: anywhere; }
.ikn-mini--rc .ikn-mini__rij > b { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ikn-mini__rij--som { background: var(--bg-2); font-weight: 650; }
.ikn-rcregels, .ikn-afroep, .ikn-advies { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 8px 0 12px; }
.ikn-rcregels__kop, .ikn-rcregels__rij { display: grid; grid-template-columns: 110px minmax(0, 1fr) 80px 120px 40px; gap: 8px; align-items: center; padding: 6px 10px; }
.ikn-rcregels > .ikn-knop { margin: 8px 10px; }
.ikn-afroep__kop, .ikn-afroep__rij { display: grid; grid-template-columns: minmax(0, 1fr) 150px 130px 110px; gap: 10px; align-items: center; padding: 7px 10px; }
.ikn-advies__kop, .ikn-advies__rij { display: grid; grid-template-columns: 22px minmax(0, 1.6fr) minmax(0, 1.4fr) 100px 86px 96px 110px; gap: 8px; align-items: center; padding: 7px 10px; }
.ikn-rcregels__kop, .ikn-afroep__kop, .ikn-advies__kop { background: var(--bg-2); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ikn-rcregels__rij, .ikn-afroep__rij, .ikn-advies__rij { border-top: 1px solid var(--line); font-size: 13px; }
.ikn-rcregels__rij input, .ikn-afroep__rij input, .ikn-advies__rij input:not([type="checkbox"]) { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.ikn-rcregels__rij input:focus, .ikn-afroep__rij input:focus, .ikn-advies__rij input:focus { border-color: var(--brand); outline: none; }
.ikn-advies__rij input:disabled { background: var(--bg-2); color: var(--text-3); }
.ikn-advies__rij input.is-berekend { background: var(--bg-2); color: var(--text-2); border-style: dashed; }
.ikn-advies__rij > input[type="checkbox"] { accent-color: var(--brand); width: 16px; height: 16px; }
.ikn-advies__rij.is-aan { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.ikn-afroep__rij > span:first-child, .ikn-advies__naam, .ikn-advies__calc { display: flex; flex-direction: column; min-width: 0; }
.ikn-afroep__rij > span:first-child > i, .ikn-advies__naam > i, .ikn-advies__calc > i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ikn-advies__naam > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ikn-advies__calc > b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ikn-advies__al { font-size: 12px; color: var(--text-2); }
.ikn-afroep__aantal { display: flex; align-items: center; gap: 6px; }
.ikn-afroep__aantal > i { font-style: normal; font-size: 12px; color: var(--text-3); }
.ikn-afroep__kop > span:nth-child(2), .ikn-afroep__kop > span:nth-child(4), .ikn-afroep__rij > span:nth-child(4) { text-align: right; }
@media (max-width: 900px) {
  .ikn-rcregels__kop, .ikn-afroep__kop, .ikn-advies__kop { display: none; }
  .ikn-rcregels__rij { grid-template-columns: repeat(3, minmax(0, 1fr)) 40px; }
  .ikn-rcregels__rij > input:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .ikn-afroep__rij { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .ikn-afroep__rij > span:first-child { grid-column: 1 / -1; }
  .ikn-afroep__rij > span:nth-child(2) { text-align: left; }
  .ikn-advies__rij { grid-template-columns: 22px repeat(3, minmax(0, 1fr)); row-gap: 6px; }
  .ikn-advies__rij > .ikn-advies__naam { grid-column: 2 / -1; }
  .ikn-advies__rij > .ikn-advies__calc, .ikn-advies__rij > .ikn-advies__al { grid-column: 2 / -1; }
  .ikn-advies__rij > input:nth-child(5) { grid-column: 2; }
}

/* h100 (meldpunt Max 29-09): venster Nieuwe offerteaanvraag vult 75 procent van het scherm, midden
   in beeld; de romp scrolt en de voet blijft staan. Alleen dit venster (Modal groot in
   inkoop-server.jsx), niet de andere bibmodals. Onder 600 px geldt de telefoonopmaak uit werkbank.css. */
.bibmodal.ikn-modal--groot { width: 75vw; height: 75vh; max-width: 75vw; max-height: 75vh; }
.bibmodal.ikn-modal--groot > .bibmodal__body { flex: 1 1 auto; min-height: 0; }
@media (max-width: 900px) and (min-width: 601px) { .bibmodal.ikn-modal--groot { width: 94vw; max-width: 94vw; } }
.ikn-modal--groot .ikn-kiezer__lijst { max-height: max(280px, 40vh); }

/* ---------------- Review 18-10: Opdrachten en de opdracht als stappen (ontwerp Mockup_Inkoop-Herontwerp) ---------------- */
.ikn-ol__kpis { margin-bottom: 14px; }
.ikn-ol__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.ikn-ol { container-type: inline-size; }
@media (max-width: 1180px) { .ikn-ol__grid { grid-template-columns: 1fr; } }
@container (max-width: 1100px) {
  .ikn-ol__grid { grid-template-columns: 1fr; }
  .ikn-ol__grid > :last-child { order: -1; }
  .ikn-ol__taken { max-height: 220px; }
}
.ikn-tabel--opdrachten { --kol: minmax(0, 2.2fr) 112px 96px minmax(0, 1.2fr) 104px 104px 104px 170px; }
/* Herontwerp 26-10-16: routechip en overgeslagen stappen. */
.ikn-route { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); color: var(--text-2); background: var(--bg-2); }
.ikn-route--direct { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.ikn-route--regie { color: var(--amber-tekst); border-color: var(--amber); background: var(--surface); }
.ikn-route--adhoc { color: var(--text); border-style: dashed; }
.ikn-chip__n { margin-left: 6px; font-size: 11px; color: var(--text-3); }
.ikr-zacht { color: var(--text-3); font-style: normal; }
.ikn-tabel--opdrachten .ikn-tabel__kop > span:nth-child(2), .ikn-tabel--opdrachten .ikn-tabel__kop > span:nth-child(3), .ikn-tabel--opdrachten .ikn-tabel__kop > span:nth-child(4) { text-align: left; }
.ikn-ol__wie { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ikn-ol__wie em, .ikn-tabel--opdrachten .ikn-num em { font-style: normal; color: var(--text-3); }
.ikn-stapjes { display: inline-flex; gap: 3px; align-items: center; }
.ikn-stapjes i { width: 15px; height: 5px; border-radius: 3px; background: var(--line); display: block; }
.ikn-stapjes i.is-af { background: var(--brand); }
.ikn-stapjes i.is-nu { background: linear-gradient(90deg, var(--brand) 50%, var(--line) 50%); }
.ikn-stapjes i.is-wacht { background: var(--amber); }
.ikn-stapjes i.is-mis { background: transparent; border: 1px dashed var(--line); }
.ikn-ol__railkop { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.ikn-ol__railkop b { font-weight: 500; font-size: 14px; }
.ikn-ol__railkop span { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--bg-2); border-radius: 10px; padding: 2px 8px; }
.ikn-ol__taken { max-height: 62vh; overflow-y: auto; }
.ikn-taak { display: grid; grid-template-columns: 8px 1fr; gap: 10px; align-items: start; width: 100%; text-align: left; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--text); cursor: pointer; }
.ikn-taak:hover { background: var(--bg-2); }
.ikn-taak > i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--brand); }
.ikn-taak > i.is-wacht { background: var(--amber); }
.ikn-taak > i.is-fout { background: var(--signal); }
.ikn-taak b { display: block; font-weight: 500; font-size: 13px; }
.ikn-taak span span { font-size: 11.5px; color: var(--text-3); }
.ikn-ol__uitleg { padding: 12px 16px 14px; font-size: 11.5px; color: var(--text-3); line-height: 1.45; }

.ikn-od__kop { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 18px 0; margin-bottom: 14px; }
.ikn-od__r1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ikn-od__r1 .kick { color: var(--text-3); }
.ikn-od__r2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ikn-od__titel { margin: 0; font-size: 20px; font-weight: 400; }
.ikn-od__naam { font: inherit; font-size: 20px; font-weight: 400; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 1px 6px; margin-left: -7px; min-width: 240px; width: min(640px, 100%); }
.ikn-od__naam:hover { border-color: var(--line); }
.ikn-od__naam:focus { outline: none; border-color: var(--brand); background: var(--bg-2); }
.ikn-od__stappen { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; }
.ikn-od__stap { flex: 1; min-width: 92px; border: 0; background: none; text-align: left; padding: 9px 10px 8px; position: relative; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; border-radius: 0 0 10px 10px; }
.ikn-od__stap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 3px; background: var(--line); }
.ikn-od__stap small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ikn-od__stap.is-af { color: var(--text-2); }
.ikn-od__stap.is-af::before { background: var(--brand); }
.ikn-od__stap.is-nu { color: var(--brand); font-weight: 600; }
.ikn-od__stap.is-nu::before { background: linear-gradient(90deg, var(--brand) 50%, var(--line) 50%); }
.ikn-od__stap.is-wacht::before { background: var(--amber); }
.ikn-od__stap.is-mis { opacity: .45; }
.ikn-od__stap.is-open { background: var(--brand-soft); box-shadow: inset 0 -2px 0 var(--brand); }
.ikn-od__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .ikn-od__grid { grid-template-columns: 1fr; } }
.ikn-od__inh { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; min-width: 0; }
.ikn-od__uitleg { font-size: 12.5px; color: var(--text-3); margin-bottom: 12px; }
.ikn-od__uitleg b { color: var(--text); font-weight: 500; font-size: 15px; margin-right: 8px; }
.ikn-od__dekking { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); margin: 10px 0; font-size: 12.5px; }
.ikn-od__dekking b { font-weight: 500; white-space: nowrap; }
.ikn-od__dekking span { flex: 1 1 260px; color: var(--text-2); }
.ikn-od__voet { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px -18px -16px; padding: 12px 18px; background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.ikn-od__rail { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 0 8px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.ikn-od__railkop { padding: 12px 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ikn-od__rail .ikn-cijfers { grid-template-columns: 1fr 1fr; padding: 0 16px; }
.ikn-od__vk { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 8px 16px 4px; margin: 0; font-size: 12.5px; }
.ikn-od__vk dt { color: var(--text-3); }
.ikn-od__vk dd { margin: 0; text-align: right; }
.ikn-od__rail .ikn-tijdlijn, .ikn-od__rail ol, .ikn-od__rail ul { padding-left: 16px; padding-right: 16px; }
@media (max-width: 600px) { .ikn-od__kop, .ikn-od__inh { padding-left: 14px; padding-right: 14px; } .ikn-od__voet { margin-left: -14px; margin-right: -14px; } }

/* Uitvraag: stap 1 partijen, stap 2 alle regels of een deel */
.ikn-uv-stap { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-weight: 500; }
.ikn-uv-stap b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; }
.ikn-omvang { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.ikn-omvang label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.ikn-omvang label.is-on { border-color: var(--brand); background: var(--brand-soft); }
.ikn-omvang b { display: block; font-weight: 500; }
.ikn-omvang i { font-style: normal; font-size: 11.5px; color: var(--text-3); }

/* Vastleggen: standaardartikelen ingeklapt, bijzondere bepalingen bewerkbaar */
.ikn-artikelen { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.ikn-artikel + .ikn-artikel { border-top: 1px solid var(--line); }
.ikn-artikel > button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.ikn-artikel > button:hover { background: var(--bg-2); }
.ikn-artikel > button b { font-weight: 500; color: var(--text-3); font-size: 12px; min-width: 64px; }
.ikn-artikel > p { margin: 0; padding: 0 12px 10px 40px; font-size: 12.5px; color: var(--text-2); }
.ikn-bepaling { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; margin-bottom: 8px; }
.ikn-bepaling textarea { width: 100%; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); resize: vertical; }
@media (max-width: 600px) {
  .ikn-tabel--opdrachten .ikn-tabel__rij { grid-template-columns: minmax(0, 1fr) auto; }
  .ikn-tabel--opdrachten .ikn-tabel__rij > .ikn-stand { grid-column: 1 / -1; grid-row: auto; justify-self: start; align-items: flex-start; }
}

/* Review 18-10: partijen per calculatieregel (phase-calc.jsx modus Partijen, CalcPartijBalk). */
.calc-partijvink { width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: -2px; accent-color: var(--brand); cursor: pointer; flex: none; }
.calc-chapter .calc-partijvink { margin-right: 8px; }
.calc-row.is-partijkeuze { background: var(--brand-soft); }
.calc-fxchip.calc-partijchip { border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand); background: var(--brand-soft); }
.calc-partijbalk { position: sticky; bottom: 0; z-index: 21; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); }
.calc-partijbalk .btn { padding: 8px 13px; font-size: 12.5px; }
.calc-partijbalk__tel { font-size: 13px; color: var(--ink-2, inherit); }
.calc-partijbalk__let { margin: 6px 4px 0; font-size: 12px; color: var(--amber); }
.ikn-voorstel { display: flex; flex-direction: column; gap: 6px; }
.ikn-voorstel__groep { display: flex; justify-content: space-between; gap: 10px; text-align: left; font: inherit; font-size: 12.5px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.ikn-voorstel__groep i { font-style: normal; color: var(--ink-3, #888); white-space: nowrap; }
.ikn-voorstel__groep.is-on { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 600px) { .calc-partijbalk > span[style] { display: none; } .calc-partijbalk .btn { flex: 1 1 auto; } }

/* ---------------- Herontwerp 26-10-16: routes Ad hoc en Regie (inkoop-routes.jsx) ---------------- */
.ikr { display: flex; flex-direction: column; gap: 14px; }
.ikr-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ikr-kop > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 280px; }
.ikr-kop > div:first-child > b { font-size: 15px; font-weight: 500; color: var(--text); }
.ikr-kop > div:first-child > span { font-size: 12.5px; color: var(--text-2); }
.ikr-blokkop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px 10px; }
.ikr-blokkop > b { font-size: 14px; font-weight: 500; color: var(--text); }
.ikr-blokkop > span { font-size: 12px; color: var(--text-2); }
.ikr-stapjes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ikr-stapjes > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--text-2); background: var(--surface); }
.ikr-stapjes > span > i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-2); font-style: normal; font-size: 11px; font-weight: 500; }
.ikr-stapjes > span.is-nu { border-color: var(--brand); color: var(--text); }
.ikr-stapjes > span.is-nu > i, .ikr-stapjes > span.is-klaar > i { background: var(--brand); color: #fff; }
.ikr-samenvatting { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); font-size: 13px; }
.ikr-samenvatting > span { color: var(--text-2); }
.ikr-samenvatting > b { font-weight: 500; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ikr-vink { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.ikr-staatkop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px 6px; }
.ikr-staatkop > div:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.ikr-staatkop > div:first-child > b { font-size: 14px; font-weight: 500; color: var(--text); }
.ikr-staatkop > div:first-child > span { font-size: 12px; color: var(--text-2); }
.ikr-periode { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.ikr-periode .bib-field { margin: 0; }
.ikr-sectie .ikn-sec { padding: 10px 18px 6px; display: flex; justify-content: space-between; }
.ikr-sectie .ikn-sec > b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.ikr-staatvoet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.ikr-staatvoet b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.ikr .tbl input:not([type="checkbox"]), .ikr .tbl select { min-width: 0; }
@media (max-width: 640px) { .ikr-samenvatting { grid-template-columns: 1fr; } .ikr-periode { width: 100%; } }
.ikr .ikr-kpi3 { --kpi-n: 3; margin-bottom: 0; }
/* Herontwerp 26-10-16: contractbouwer. */
.ikn-clausules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 4px 0 6px; }
.ikn-clausule { align-items: flex-start; }
.ikn-clausule span { display: flex; flex-direction: column; gap: 2px; }
.ikn-clausule em { font-style: normal; font-size: 11px; color: var(--text-3); }
.ikn-clausule i { font-style: normal; font-size: 12px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ikn-av-mis { color: var(--signal); font-weight: 600; border: 1px dashed var(--signal); border-radius: 4px; padding: 0 4px; }
@media (max-width: 720px) { .ikn-clausules { grid-template-columns: 1fr; } }

/* A tot Z 19-10: exact bedrag; de decimalen na de cent klein, uitleg bij hover (formaat.js bedragExact). */
.ik-exact { cursor: help; white-space: nowrap; }
.ik-exact__rest { font-size: 0.78em; color: var(--text-3); margin-left: 1px; }

/* ---------------- W2 (M1 23-10): de uitvraag in vijf stappen ---------------- */
.ikn-w2 .ikn-w2-stappen { display: flex; gap: 6px; padding: 0 22px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ikn-w2-stap { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 5px 12px 5px 5px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ikn-w2-stap b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); color: var(--text-2); font-size: 11.5px; }
.ikn-w2-stap.is-goed b { background: color-mix(in srgb, var(--pos) 18%, transparent); color: var(--pos-tekst); }
.ikn-w2-stap.is-wacht b { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber-tekst); }
.ikn-w2-stap.is-on { border-color: var(--brand); color: var(--text); box-shadow: inset 0 0 0 1px var(--brand); }
.ikn-w2-stap.is-on b { background: var(--brand); color: #fff; }
.bibmodal.ikn-w2 > .ikn-w2-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.ikn-w2-hoofd { min-width: 0; }
.ikn-w2-zij { position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.ikn-w2-zij__rij { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 7px 8px; font: inherit; color: var(--text); cursor: pointer; }
.ikn-w2-zij__rij:hover, .ikn-w2-zij__rij.is-on { background: var(--surface); }
.ikn-w2-zij__rij > span { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.ikn-w2-zij__rij > span i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.ikn-w2-zij__rij > span i.is-goed { background: var(--pos); }
.ikn-w2-zij__rij > span i.is-wacht { background: var(--amber); }
.ikn-w2-zij__rij > b { font-weight: 500; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.ikn-w2-zij__geld { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding: 8px 8px 0; font-size: 12.5px; color: var(--text-2); }
.ikn-w2-zij__geld b { color: var(--text); font-variant-numeric: tabular-nums; }
.ikn-w2-rij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0; }
.ikn-w2-rij input[type=date] { height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); padding: 0 8px; font: inherit; }
.ikn-w2-lijst { max-height: 320px; overflow: auto; }
.ikn-w2-reden { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); }
.ikn-w2-vragen { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.ikn-w2-vragen__kop, .ikn-w2-vragen__rij { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(120px, 1fr) 110px minmax(100px, 1fr) 70px; gap: 8px; align-items: center; }
.ikn-w2-vragen__kop { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ikn-w2-vragen__rij input:not([type=checkbox]), .ikn-w2-vragen__rij select { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); padding: 0 8px; font: inherit; font-size: 13px; min-width: 0; }
.ikn-w2-vinkjes { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-2); }
.ikn-w2-vinkjes label { display: inline-flex; align-items: center; gap: 5px; }
.ikn-w2-knopjes { display: flex; gap: 4px; }
.ikn-w2-controles { list-style: none; margin: 6px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ikn-w2-controles li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-2); }
.ikn-w2-controles li > :first-child { flex: 0 0 auto; }
.ikn-targets { display: flex; flex-direction: column; gap: 14px; }
.ikn-targets__kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.ikn-targets__kop b { display: block; font-size: 14.5px; }
.ikn-targets__kop i { font-style: normal; font-size: 12px; color: var(--text-3); }
.ikn-targets__cijfers { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-2); }
.ikn-targets__tabel .ikn-mini__kop, .ikn-targets__tabel .ikn-mini__rij { grid-template-columns: minmax(0, 1fr) 140px 90px; }
@media (max-width: 900px) {
  .bibmodal.ikn-w2 > .ikn-w2-body { grid-template-columns: minmax(0, 1fr); }
  .ikn-w2-zij { position: static; order: -1; }
  .ikn-w2-vragen__kop { display: none; }
  .ikn-w2-vragen__rij { grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .ikn-w2-vragen__rij > input:first-child { grid-column: 1 / -1; }
}