/* Dealerkaart > Performance (dealer-performance.js). Alles onder .dpf; kleuren alleen via de huisstijlvariabelen uit
   crm.css (navy, teal, neutraal, negatief), Poppins via de body. Zelfde bouwstenen als de fulfillment-analyse. */
.dpf { display: flex; flex-direction: column; gap: 1rem; padding-top: .4rem; }
.dpf-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.dpf-stand { font-size: .8rem; color: var(--grey); }

.dpf-hero {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 1.5rem 1.7rem; color: #fff;
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-700) 100%);
}
.dpf-hero::after {
  content: ''; position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; background: var(--teal);
  border-radius: var(--blob); transform: rotate(-14deg); pointer-events: none;
}
.dpf-hero > * { position: relative; z-index: 1; max-width: 62ch; }
.dpf-partners { font-size: .85rem; font-weight: 600; color: #dbe4ef; }
.dpf-partners span { color: var(--teal-300); margin: 0 .3rem; }
.dpf-kicker { margin-top: .7rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-300); }
.dpf-groot { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--teal-300); margin: .25rem 0 .6rem; font-variant-numeric: tabular-nums; }
.dpf-hero p { color: #fff; font-size: .95rem; line-height: 1.55; margin: 0; }

.dpf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; }
.dpf-kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); padding: .8rem .95rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: var(--shadow-kaart); }
.dpf-kpi span { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--grey); }
.dpf-kpi b { font-size: 1.55rem; font-weight: 600; color: var(--navy); line-height: 1.15; font-variant-numeric: tabular-nums; }
.dpf-kpi small { font-size: .76rem; color: var(--grey); }
.dpf-kpi small.dpf-op { color: var(--teal-ink); font-weight: 600; }
.dpf-kpi small.dpf-neer { color: var(--negatief); font-weight: 600; }

.dpf-sectie { display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.dpf-kop { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-dark); }
.dpf-sectie h3 { font-size: 1.25rem; line-height: 1.25; margin: 0; color: var(--navy); }
.dpf-toel { margin: 0; color: var(--grey); font-size: .9rem; line-height: 1.55; max-width: 75ch; }
.dpf-klein { margin: .4rem 0 0; color: var(--grey); font-size: .78rem; line-height: 1.5; }
.dpf-paneel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 1rem 1.1rem; min-width: 0; }
.dpf-paneel h4 { margin: 0 0 .6rem; font-size: .98rem; color: var(--navy); }
.dpf-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.dpf-jij { background: var(--teal-tint); border-color: transparent; }
@media (max-width: 900px) { .dpf-twee, .dpf-portaal, .dpf-calc { grid-template-columns: minmax(0, 1fr) !important; } }

.dpf-legenda { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--grey); margin-bottom: .4rem; }
.dpf-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.dpf-i-lopend { background: var(--teal-tint); outline: 1px dashed var(--teal-dark); outline-offset: -1px; }
.dpf-i-vlak { background: var(--neutraal-donker); height: 3px !important; vertical-align: 3px !important; }
.dpf-svg { width: 100%; height: auto; display: block; }
.dpf-svg text { fill: var(--grey); font-size: 12px; font-family: var(--font-body); }
.dpf-svg .dpf-waarde { fill: var(--navy); font-weight: 600; }
.dpf-svg .dpf-raster { stroke: var(--line); }
.dpf-svg .dpf-as { stroke: var(--neutraal); }
.dpf-svg .dpf-vlak { stroke: var(--neutraal-donker); stroke-width: 3; stroke-linecap: round; }

.dpf-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; color: var(--grey); }
.dpf-knoppen select { font: inherit; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--navy); background: #fff; }
.dpf-tabel-wrap { overflow-x: auto; margin-top: .8rem; }
.dpf-tabel { font-size: .85rem; }
.dpf-tabel .dpf-getal, .dpf-tabel th.dpf-getal { text-align: right; font-variant-numeric: tabular-nums; }
.dpf-tabel .dpf-totaal td { font-weight: 600; color: var(--navy); }

.dpf-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; line-height: 1.5; color: var(--navy); }
.dpf-lijst li { display: flex; gap: .6rem; align-items: flex-start; }
.dpf-lijst li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: .5rem; background: var(--teal-dark); }
.dpf-wij .dpf-lijst li::before { background: var(--navy); }
.dpf-lijst.dpf-grijs li::before { background: var(--neutraal-donker); }

.dpf-rij { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) 40px; gap: .7rem; align-items: center; font-size: .88rem; margin-top: .5rem; color: var(--navy); }
.dpf-rij b { text-align: right; font-variant-numeric: tabular-nums; }
.dpf-spoor { height: 14px; }
.dpf-balk-vul { height: 14px; background: var(--teal-dark); }
.dpf-spoor > div > .dpf-balk-vul:last-child, .dpf-spoor > .dpf-balk-vul { border-radius: 0 4px 4px 0; }
.dpf-balk-vul.dpf-wacht { background: var(--teal-300); }
.dpf-balk-vul.dpf-zacht { background: var(--teal-300); }
.dpf-balk-vul.dpf-nul { background: var(--negatief); }

.dpf-portaal { display: grid; grid-template-columns: 1.1fr 1fr; gap: .9rem; align-items: stretch; }
.dpf-genummerd { margin: 0; padding: 0; list-style: none; counter-reset: dpf; display: flex; flex-direction: column; gap: .7rem; }
.dpf-genummerd li { counter-increment: dpf; display: grid; grid-template-columns: 24px 1fr; gap: .2rem .6rem; font-size: .88rem; }
.dpf-genummerd li::before { content: counter(dpf); grid-row: span 2; width: 22px; height: 22px; border-radius: 6px; background: var(--teal-tint); color: var(--teal-ink); display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.dpf-genummerd li b { color: var(--navy); }
.dpf-genummerd li span { color: var(--grey); font-size: .84rem; }
.dpf-cta { background: var(--navy); color: #fff; border-radius: var(--radius-s); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.dpf-cta h4 { color: #fff; margin: 0; font-size: 1.05rem; }
.dpf-cta p { margin: 0; color: #dbe4ef; font-size: .86rem; line-height: 1.5; }
.dpf-cta-knop { display: inline-flex; background: var(--teal); color: var(--navy); font-weight: 600; text-decoration: none; border-radius: var(--pill); padding: .55rem 1.1rem; font-size: .88rem; }
.dpf-cta-knop:hover { background: var(--teal-300); }

.dpf-calc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; align-items: center; }
.dpf-calc label { font-size: .9rem; color: var(--navy); font-weight: 500; }
.dpf-calc input[type=range] { width: 100%; accent-color: var(--teal-dark); margin-top: .5rem; }
.dpf-extra { font-size: 2.4rem; font-weight: 700; color: var(--teal-dark); line-height: 1.1; font-variant-numeric: tabular-nums; }
.dpf-voet { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .75rem; line-height: 1.55; color: var(--grey); }