/* Grafieken en balken: alles server-side SVG, dus alle kleur en tekstmaat staan hier (de CSP staat geen inline stijlen toe).
   Dynamische breedtes zijn SVG-attributen, geen style. */

.legenda { display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-5); font-size: var(--t-mini); color: var(--inkt-2); }
.legenda li { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw-zelf { background: var(--serie-lijst); }
.sw-incasso { background: var(--serie-neutraal); }
.sw-lijn { width: 18px; height: 2px; border-radius: 1px; display: inline-block; }
.sw-lijst { background: var(--serie-lijst); }
.sw-ref { width: 18px; height: 0; border-top: 1px solid var(--serie-neutraal); display: inline-block; }
.sw-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--serie-kost); box-shadow: 0 0 0 2px var(--paneel); }

/* verdeling en aandeel: balkjes als SVG-rechthoek */
.balk-svg { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 0 3px 3px 0; }
.balk-spoor { fill: var(--lijn-zacht); }
.balk-vul { fill: var(--serie-staaf); }
.verdeling { display: grid; gap: 7px; padding: var(--r-4) var(--r-5); border-bottom: 1px solid var(--lijn-zacht); }
.verdeling li { display: grid; grid-template-columns: 18px minmax(0, 1fr) 34px minmax(60px, 34%); align-items: center; gap: var(--r-2); font-size: var(--t-ui); }
.verdeling .ic { width: 14px; height: 14px; stroke-width: 2; }
.verdeling .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.aandeel li { padding: 12px var(--r-5); border-bottom: 1px solid var(--lijn-zacht); }
.aandeel li:last-child { border-bottom: 0; }
.aandeel-rij { display: flex; align-items: baseline; gap: var(--r-3); }
.aandeel-naam { font-weight: 600; text-decoration: none; }
.aandeel-naam:hover { text-decoration: underline; }
.aandeel-bedrag { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.aandeel-meta { display: flex; flex-wrap: wrap; gap: 2px var(--r-3); font-size: var(--t-mini); color: var(--inkt-3); margin-top: 2px; }
.aandeel-meta .pct { margin-left: auto; font-variant-numeric: tabular-nums; }
.aandeel .balk-svg { height: 4px; margin-top: 8px; }

/* betalingenstrook */
.strip { padding: var(--r-4) var(--r-5) var(--r-2); border-bottom: 1px solid var(--lijn-zacht); }
.strip .legenda { margin-bottom: var(--r-2); }
.strip-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--letter); }
.s-as text { font-size: var(--t-label); fill: var(--inkt-3); }
.s-tick, .s-basis { stroke: var(--lijn); stroke-width: 1; }
.s-vandaag { stroke: var(--inkt); stroke-width: 1; }
.s-vandaag-t { font-size: var(--t-label); fill: var(--inkt); font-weight: 600; }
.s-staaf text { font-size: var(--t-label); fill: var(--inkt-2); font-variant-numeric: tabular-nums; font-weight: 550; }
.s-zelf path { fill: var(--serie-lijst); }
.s-incasso path { fill: var(--serie-neutraal); }

/* de balk "Van lijstprijs naar verkoopprijs" */
.opbouw-balk { padding: var(--r-5); border-top: 1px solid var(--lijn-zacht); }
.paneel > .strook + .opbouw-balk { margin-top: 0; }
.ob-kop { display: flex; align-items: baseline; gap: var(--r-3); margin-bottom: var(--r-4); flex-wrap: wrap; }
.ob-kop h2 { font-size: var(--t-kop); font-weight: 680; font-stretch: var(--breed-label); }
.ob-kop p { font-size: var(--t-mini); color: var(--inkt-3); }
.ob-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--letter); }
.ob-mob { display: none; }
.ob-kost { fill: var(--inkt); }
.ob-marge { fill: var(--lijn-sterk); }
.ob-voordeel { fill: var(--groen-vlak); }
.ob-haak { fill: none; stroke: var(--inkt-3); stroke-width: 1; }
.ob-tick { stroke: var(--inkt); stroke-width: 1.5; }
.ob-t { font-size: var(--t-mini); fill: var(--inkt-2); }
.ob-t-sterk { font-size: var(--t-mini); fill: var(--inkt); font-weight: 650; }
.ob-t-wit { font-size: var(--t-mini); fill: var(--op-kleur); font-weight: 600; }
.ob-t-groen { font-size: var(--t-mini); fill: var(--groen); font-weight: 600; }

/* prijshistorie */
.grafiek-blok { padding: var(--r-4) var(--r-5) var(--r-3); }
.grafiek-blok .legenda { margin-bottom: var(--r-3); }
.grafiek-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--letter); }
.grafiek-compact { display: none; }
.g-raster line { stroke: var(--lijn-zacht); stroke-width: 1; }
.g-basis, .g-tick { stroke: var(--lijn-sterk); stroke-width: 1; }
.g-as text { font-size: var(--t-label); fill: var(--inkt-3); font-variant-numeric: tabular-nums; }
.g-ref { stroke: var(--serie-neutraal); stroke-width: 1; }
.g-lijst { fill: none; stroke: var(--serie-lijst); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-kost { fill: none; stroke: var(--serie-kost); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0.55; }
.g-val { stroke: var(--serie-kost); stroke-width: 6; opacity: 0.16; stroke-linecap: round; }
.g-dot-lijst { fill: var(--serie-lijst); stroke: var(--paneel); stroke-width: 2; }
.g-dot-kost { fill: var(--serie-kost); stroke: var(--paneel); stroke-width: 2; }
.g-hit { fill: transparent; }
.g-punt { outline: none; cursor: default; }
.g-tip { opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.g-tip rect { fill: var(--inkt); }
.g-tip text { font-size: var(--t-mini); fill: var(--op-kleur); font-variant-numeric: tabular-nums; }
.g-tip .g-tip-kop { font-weight: 650; fill: var(--op-kleur); }
.g-punt:hover .g-tip, .g-punt:focus .g-tip { opacity: 1; }
.g-punt:focus .g-dot-kost { stroke: var(--focus); stroke-width: 3; }
.g-eind text { font-size: var(--t-mini); fill: var(--inkt-2); font-variant-numeric: tabular-nums; }
.g-eind .g-eind-waarde { font-weight: 650; fill: var(--inkt); }
.g-eind .g-eind-ref, .g-eind .g-eind-noot { fill: var(--inkt-3); font-size: var(--t-mini); }

/* leveranciersvergelijking: stip ten opzichte van de factuurprijs */
.vergelijk td { height: 44px; }
.vergelijk th.stipkolom, .vergelijk td.stipkolom { width: 232px; }
.vergelijk-intro { padding: var(--r-4) var(--r-5); font-size: var(--t-ui); color: var(--inkt-2); border-bottom: 1px solid var(--lijn-zacht); }
.vergelijk-intro b { color: var(--inkt); font-weight: 620; }
.stip-svg { display: block; width: 200px; height: 22px; }
.st-baan { stroke: var(--lijn); stroke-width: 1; }
.st-ref { stroke: var(--inkt); stroke-width: 1.5; }
.st-dot { fill: var(--serie-lijst); stroke: var(--paneel); stroke-width: 2; }
.st-oud { fill: var(--paneel); stroke: var(--serie-neutraal); stroke-width: 1.5; }
.stip-kop { display: block; width: 200px; height: 14px; overflow: visible; }
.stip-kop line { stroke: var(--inkt); stroke-width: 1.5; }
.stip-kop text { font-family: var(--letter); font-size: var(--t-label); fill: var(--inkt-3); font-weight: 500; letter-spacing: 0; text-transform: none; }

@media (max-width: 640px) {
  .strip { display: none; }
  .grafiek-breed { display: none; }
  .grafiek-compact { display: block; }
  .ob-desk { display: none; }
  .ob-mob { display: block; }
  .opbouw-balk { padding: var(--r-4); }
  .strip, .grafiek-blok, .vergelijk-intro, .verdeling, .aandeel li, .signaallijst li { padding-left: var(--r-4); padding-right: var(--r-4); }
  .verdeling li { grid-template-columns: 18px minmax(0, 1fr) 26px 22%; }
  .aandeel-meta { gap: 2px var(--r-3); }
  .ob-kop { flex-direction: column; gap: 2px; }
}
.paneel > .paneel-kop + .vergelijk-intro { margin-top: 0; }
.vergelijk td:first-child { min-width: 11rem; }

/* prijsopbouw met doelprijs: streepje door de balk en een label eronder; een witte rand houdt de tekst leesbaar waar de streep kruist */
.ob-doel { stroke: var(--geel-merk); stroke-width: 2; stroke-dasharray: 4 3; }
.ob-t-doel { font-size: var(--t-mini); fill: var(--geel); }
.ob-t, .ob-t-sterk, .ob-t-doel { paint-order: stroke; stroke: var(--paneel); stroke-width: 3px; stroke-linejoin: round; }
.ob-t-sterk, .ob-t-doel .ob-t-sterk { stroke-width: 3px; }

/* klantprijzen als stippen onder de prijsopbouw: wit is in orde, amber een te lage marge, rood onder de kostprijs */
.ob-kp-as { stroke: var(--lijn); stroke-width: 1; }
.ob-kp { fill: var(--paneel); stroke: var(--inkt); stroke-width: 1.5; }
.ob-kp-amber { fill: var(--geel-merk); stroke: var(--geel); }
.ob-kp-rood { fill: var(--rood); stroke: var(--rood); }
.ob-t-kp { font-size: var(--t-label); }
.ob-kost-lijsten { stroke: var(--paneel); stroke-width: 2; stroke-dasharray: 3 2; }
.ob-legenda::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 1px; vertical-align: 0; }
.ob-legenda-rood::before { background: var(--rood); }
.ob-legenda-amber::before { background: var(--geel-merk); }