/* 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-klein); 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 #8f97a3; 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 #fff; }

/* 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: 13px; }
.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: 12px; 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: 11px; 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: 11px; fill: var(--inkt); font-weight: 600; }
.s-staaf text { font-size: 11px; 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-label); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; font-stretch: var(--breed-label); }
.ob-kop p { font-size: var(--t-klein); 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: #d3d8de; }
.ob-voordeel { fill: #cfe9e2; }
.ob-haak { fill: none; stroke: var(--inkt-3); stroke-width: 1; }
.ob-tick { stroke: var(--inkt); stroke-width: 1.5; }
.ob-t { font-size: 12px; fill: var(--inkt-2); }
.ob-t-sterk { font-size: 12.5px; fill: var(--inkt); font-weight: 650; }
.ob-t-wit { font-size: 12.5px; fill: #fff; font-weight: 600; }
.ob-t-groen { font-size: 12px; fill: #0b6e5c; 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: 11.5px; fill: var(--inkt-3); font-variant-numeric: tabular-nums; }
.g-ref { stroke: #8f97a3; 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: #fff; stroke-width: 2; }
.g-dot-kost { fill: var(--serie-kost); stroke: #fff; 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: 12px; fill: #e9ecf0; font-variant-numeric: tabular-nums; }
.g-tip .g-tip-kop { font-weight: 650; fill: #fff; }
.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: 12.5px; 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: 12px; }

/* 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-tabel); 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: #fff; stroke-width: 2; }
.st-oud { fill: #fff; stroke: #8f97a3; 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: 10.5px; 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: 12px; fill: var(--geel); }
.ob-t, .ob-t-sterk, .ob-t-doel { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.ob-t-sterk, .ob-t-doel .ob-t-sterk { stroke-width: 3px; }