/* =====================================================================
   sop.css — Module 2.8 (deel 1) · S&OP. Integraal planningsbord,
   forecast, capaciteit vs. vraag, afgeleide behoefte en checklist-
   beheer. Uitsluitend tokens; losse gradients per module toegestaan
   (aanvulling 14-07-2026) mits token-kleuren.
===================================================================== */

.sop { max-width: 1280px; margin: 0 auto; padding: 26px 32px 72px; }
.sop-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sop-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.sop-kop__sub { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 56ch; }
.sop-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sop-tab { font: 700 .74rem var(--font-ui); padding: 8px 13px; border-radius: var(--radius-pill); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); cursor: pointer; transition: background var(--overgang), color var(--overgang); }
.sop-tab:hover { background: var(--c-creme); }
.sop-tab.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.sop-regiorij { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.sop-chip { padding: 6px 13px; border-radius: var(--radius-pill); cursor: pointer; font: 600 .74rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); transition: background var(--overgang); }
.sop-chip:hover { background: var(--c-creme); }
.sop-chip.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: #fff; }
.sop-chip--klein { padding: 5px 11px; font-size: .68rem; }
.sop-regelvoet { margin-top: 14px; font-size: .62rem; color: var(--c-ink-3); }
.sop-hint { font-size: .74rem; color: var(--c-ink-3); margin: 12px 0 0; }
.sop-intro { font-size: .8rem; color: var(--c-ink-2); max-width: 68ch; margin: 0 0 14px; line-height: 1.5; }
.sop-sectiekop { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); margin: 24px 0 10px; }
.sop-sectiekop:first-child { margin-top: 0; }

/* signaal-/adviesstrook */
.sop-signaal { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 12px; margin-bottom: 16px; border: var(--lijndikte) solid; font: 600 .78rem var(--font-ui); color: var(--c-ink); }
.sop-signaal > i { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
.sop-signaal > span { flex: 1; }
.sop-signaal__knop { font: 700 .7rem var(--font-ui); color: #fff; border: none; border-radius: 7px; padding: 6px 13px; cursor: pointer; white-space: nowrap; }

/* scenario what-if */
.sop-scenario { padding: 16px 20px; margin-bottom: 18px; }
.sop-scenario__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sop-scenbadge { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 7px; }
.sop-scenario__rek { flex: 1; }
.sop-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.sop-slider label { display: flex; justify-content: space-between; font: 600 .76rem var(--font-ui); color: var(--c-ink); margin-bottom: 6px; }
.sop-slider input[type="range"] { width: 100%; }
.sop-scenario__voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }
.sop-scenario__acties { display: flex; gap: 8px; align-items: center; }
.sop-vastlabel { display: inline-flex; align-items: center; gap: 6px; font: 700 .72rem var(--font-ui); color: var(--c-groen-d); }
.sop-vastlabel i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--c-groen); }

/* integraal bord */
.sop-bord { padding: 6px 6px 10px; overflow-x: auto; }
.sop-bord__scroll { display: flex; gap: 0; min-width: 840px; }
.sop-bord__labels { flex: none; width: 200px; position: sticky; left: 0; z-index: 2; background: #fff; padding: 6px 10px 0; }
.sop-bord__labelkop { height: 62px; }
.sop-bord__laag { display: flex; align-items: center; gap: 7px; font: 600 .74rem var(--font-ui); color: var(--c-ink); height: 56px; }
.sop-bord__laag.is-stil { color: var(--c-ink-3); }
.sop-bord__laag .mono { color: var(--c-ink-3); width: 16px; text-align: center; }
.sop-bord__kolom { flex: 1; min-width: 78px; padding: 6px 4px 0; border-left: var(--lijndikte) solid var(--c-lijn); }
.sop-bord__kolomkop { text-align: center; padding: 9px 6px; border-radius: 9px 9px 0 0; border-bottom: 2px solid; }
.sop-bord__kolomkop i { display: block; width: 7px; height: 7px; border-radius: var(--radius-pill); margin: 0 auto 4px; }
.sop-bord__kolomkop strong { display: block; font-size: .74rem; }
.sop-bord__kolomkop span { display: block; font: 500 .56rem var(--font-ui); color: var(--c-ink-3); }
.sop-bord__status { margin-top: 2px; font-size: .54rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sop-bord__cel { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sop-bord__cel:last-child { border-bottom: none; }
.sop-bord__waarde { min-width: 0; }
.sop-bord__waarde strong { display: block; font-size: .84rem; }
.sop-bord__waarde span { font: 600 .54rem var(--font-ui); white-space: nowrap; }
.sop-bord__cel > i { width: 7px; flex: none; border-radius: var(--radius-pill); align-self: flex-end; margin-bottom: 9px; }

.sop-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); }
.sop-legenda span { display: flex; align-items: center; gap: 6px; }
.sop-legenda i { width: 9px; height: 9px; border-radius: var(--radius-pill); }
.sop-legenda__streep { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed var(--c-groen-d); }
.sop-legenda__lijn { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px solid var(--c-groen); }
.sop-legenda__stil { color: var(--c-ink-3); }

/* tabellen (forecast / rolling / materiaal / checklist) */
.sop-tabel { overflow: hidden; }
.sop-rij { display: grid; gap: 10px; padding: 13px 20px; border-top: var(--lijndikte) solid var(--c-lijn); align-items: center; }
.sop-rij--kop { background: var(--c-paneel); border-top: none; padding: 11px 20px; }
.sop-rij--fc { grid-template-columns: 1.6fr .8fr .8fr 2fr .8fr; }
.sop-rij--roll { grid-template-columns: .8fr .9fr .9fr 2fr .8fr; }
.sop-rij--mat { grid-template-columns: 1.6fr .9fr .8fr .8fr 1.4fr; }
.sop-rij--cl { grid-template-columns: 1fr auto auto; }
.sop-rij__naam { font: 600 .8rem var(--font-ui); }
.sop-rij__sku { display: block; font-size: .6rem; color: var(--c-ink-3); }
.sop-rij__verwacht { text-align: right; font-size: .92rem; color: var(--c-groen-d); }
.sop-rij__stil { color: var(--c-ink-3); }
.sop-rij__actie { text-align: right; }
.sop-fcbalk { display: block; height: 9px; border-radius: var(--radius-pill); background: var(--c-groen-d); }
.sop-fctotaal { display: inline-flex; flex-direction: column; background: var(--c-groen-d); border-radius: 12px; padding: 15px 20px; color: #fff; margin-bottom: 18px; }
.sop-fctotaal strong { font-size: 1.6rem; }
.sop-fctotaal span { font: 600 .7rem var(--font-ui); opacity: .85; }
.sop-rollbalk { position: relative; height: 7px; }
.sop-rollbalk i { position: absolute; top: 0; left: 0; height: 7px; border-radius: var(--radius-pill); display: block; }
.sop-rollbalk__p { width: 100%; background: var(--c-groen-t); }
.sop-rollbalk__w { background: var(--c-groen-d); }

/* capaciteit-grafieken */
.sop-grafieken { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.sop-grafiek { padding: 18px 20px; }
.sop-grafiek strong { font-size: .88rem; }
.sop-grafiek__sub { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); margin: 2px 0 14px; }
.sop-grafiek svg { width: 100%; height: 180px; }
.sop-grafiek__labels { display: flex; justify-content: space-between; font-size: .56rem; color: var(--c-ink-3); margin-top: 4px; }

/* afgeleide behoefte · personeel */
.sop-pers { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sop-pers__cijfers { display: flex; gap: 28px; flex-wrap: wrap; }
.sop-pers__cijfers strong { display: block; font-size: 1.4rem; }
.sop-pers__cijfers span { font: 600 .7rem var(--font-ui); color: var(--c-ink-3); }
.sop-pers__actie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 600 .78rem var(--font-ui); }

/* checklist-beheer */
.sop-versie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.sop-versiechip { font-weight: 700; font-size: .74rem; color: var(--c-groen-d); background: var(--c-groen-t); padding: 4px 11px; border-radius: var(--radius-pill); }
.sop-versie__meta { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }
.sop-cl-nieuw { padding: 16px 18px; margin-bottom: 16px; }
.sop-cl-nieuw > strong { display: block; font-size: .8rem; margin-bottom: 10px; }
.sop-cl-nieuw__scopes { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.sop-cl-nieuw__rij { display: flex; gap: 9px; align-items: flex-end; }
.sop-cl-nieuw__veld { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sop-cl-nieuw__veld input { padding: 11px 13px; border: 1.5px solid var(--c-lijn-2); border-radius: 10px; font: 500 .8rem var(--font-ui); color: var(--c-ink); background: #fff; }
.sop-scopechip { font: 700 .58rem var(--font-ui); padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.sop-verwijder { padding: 6px 11px; border-radius: 8px; border: var(--lijndikte) solid var(--c-rood); background: var(--c-rood-t); color: var(--c-rood); font: 600 .68rem var(--font-ui); cursor: pointer; }

/* Capaciteit-heatmap (C1a) */
.sop-hm { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin-bottom: 14px; }
.sop-hm__rij { display: grid; grid-template-columns: 80px repeat(8, 1fr); gap: 5px; align-items: center; }
.sop-hm__rij--kop { color: var(--c-ink-2); font-size: 10.5px; }
.sop-hm__wk { text-align: center; }
.sop-hm__regio { font-size: 12.5px; font-weight: 600; }
.sop-hm__cel { border: 0; border-radius: 8px; padding: 8px 0; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--c-ink); }
.sop-hm__cel--groen { background: color-mix(in srgb, var(--c-groen) 30%, var(--c-paneel)); }
.sop-hm__cel--amber { background: color-mix(in srgb, var(--c-amber) 38%, var(--c-paneel)); }
.sop-hm__cel--rood { background: color-mix(in srgb, var(--c-rood) 30%, var(--c-paneel)); font-weight: 700; }

/* Live pijplijn-voeding (uitbreiding 7) */
.sop-fcbalk.is-knel { background: var(--c-terra); }
.sop-sub { font: 400 11.5px var(--font-ui); color: var(--c-ink-3); margin: 10px 2px 0; }