/* Portfoliopagina in de huisstijl van de landingspagina: violet voor selectie en lijnen, mint en groen voor groei, koraal voor daling,
   lavendel panelen in kaarten met ruime radius. De tokens hebben een vaste terugval, zodat de pagina ook zonder andere stylesheet klopt. */
:root {
  --brand-violet: #5B3FD6; --brand-diep: #6B2FA3; --brand-mint: #A9DDCB; --brand-groen: #1E9E6E; --brand-koraal: #E05A6A; --brand-lavendel: #E9E1F5;
  --pf-serie-1: #5B3FD6; --pf-serie-2: #1E9E6E; --pf-serie-3: #A9DDCB; --pf-serie-4: #6B2FA3; --pf-serie-5: #E05A6A; --pf-serie-6: #B7A6F0;
  --pf-paneel: linear-gradient(135deg, rgba(233,225,245,0.9), rgba(255,255,255,0.55));
  --pf-rand: rgba(91,63,214,0.14);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-violet: #8B74F0; --brand-groen: #3DC495; --brand-koraal: #FF7A88; --pf-serie-1: #8B74F0; --pf-serie-2: #3DC495; --pf-paneel: linear-gradient(135deg, rgba(139,116,240,0.16), rgba(255,255,255,0.02)); --pf-rand: rgba(167,148,255,0.18); } }
:root[data-theme="dark"] { --brand-violet: #8B74F0; --brand-groen: #3DC495; --brand-koraal: #FF7A88; --pf-serie-1: #8B74F0; --pf-serie-2: #3DC495; --pf-paneel: linear-gradient(135deg, rgba(139,116,240,0.16), rgba(255,255,255,0.02)); --pf-rand: rgba(167,148,255,0.18); }

.pf-pagina .card, .pf-kaart { border-radius: 20px; border: 1px solid var(--pf-rand); }
.pf-paneel { background: var(--pf-paneel); border: 1px solid var(--pf-rand); border-radius: 16px; padding: 14px 16px; }
.pf-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
.pf-pagina .up, .pf-verandering.up { color: var(--brand-groen); }
.pf-pagina .down, .pf-verandering.down { color: var(--brand-koraal); }

/* Hero: waarde groot, verandering met pijl, rustige koersstatus-chip, sparkline in een paneel, resultaat als tegels. */
.pf-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 18px 24px; align-items: center; }
.pf-hero .pf-totaal { font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: 4px 0 6px; }
.pf-hero-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pf-verandering { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); background: var(--pf-paneel); border: 1px solid var(--pf-rand); border-radius: 999px; padding: 4px 10px; max-width: 100%; }
.pf-hero-spark { min-height: 96px; display: flex; align-items: center; }
.pf-hero-spark:empty { background: var(--pf-paneel); }
.pf-hero-resultaat { grid-column: 1 / -1; }
.pf-spark { width: 100%; height: auto; display: block; }
.pf-spark.gestippeld path:last-of-type { stroke-dasharray: 5 5; }
@media (max-width: 760px) { .pf-hero { grid-template-columns: 1fr; } }

.pf-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.pf-tegel { background: var(--pf-paneel); border: 1px solid var(--pf-rand); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-tegel span { font-size: 12px; color: var(--text-dim); }
.pf-tegel b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pf-tegel small { font-size: 12px; color: var(--text-faint); }
.pf-tegel.groot b { font-size: 26px; }
.pf-tegel.positief b { color: var(--brand-groen); }
.pf-tegel.negatief b { color: var(--brand-koraal); }
.pf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 560px) { .pf-duo { grid-template-columns: 1fr; } }

/* Periodes en maat: violette selectie. */
.pf-periodes .btn.active, .pf-grafiek .tracker-stijl .btn.active, .pf-cats .btn.active { background: var(--brand-violet); border-color: var(--brand-violet); color: #fff; }
.pf-periodes select.compact.active { border-color: var(--brand-violet); color: var(--brand-violet); }

/* Posities: logo in een ring, dagbalk mint/koraal onder de waarde. */
.pf-ring { display: inline-grid; place-items: center; padding: 2px; border-radius: 50%; background: conic-gradient(var(--brand-violet), var(--brand-mint), var(--brand-violet)); flex: none; }
.pf-ring > .avatar { border: 2px solid var(--surface-1, #fff); }
.pf-ring.groot > .avatar { width: 56px; height: 56px; font-size: 16px; }
.pf-ring.klein > .avatar { width: 28px; height: 28px; font-size: 10px; }
.pf-rij { border-radius: 14px; }
.pf-rij:hover { background: var(--pf-paneel); }
.pf-dagbalk { position: relative; display: block; width: 72px; height: 4px; margin: 4px 0 0 auto; border-radius: 2px; background: var(--border-faint); overflow: hidden; }
.pf-dagbalk::after { content: ''; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: var(--text-faint); opacity: .5; }
.pf-dagbalk i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.pf-dagbalk i.op { left: 50%; background: var(--brand-groen); }
.pf-dagbalk i.neer { right: 50%; background: var(--brand-koraal); }
.pf-dagbalk.leeg { opacity: .4; }
.pf-sectiekop { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 4px 8px; border-bottom: 1px solid var(--pf-rand); }
.pf-sectiekop h3 { font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0; }
.pf-sectiekop span { font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-sectiekop small { margin-left: 8px; color: var(--text-faint); font-weight: 500; }

/* Tijdlijn: verticale lijn met stippen, koop groen en verkoop koraal. */
.pf-tijdlijn { position: relative; }
.pf-tl-maand h3 { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: none; letter-spacing: 0; margin: 14px 0 4px 26px; }
.pf-tl-rij { position: relative; padding-left: 26px; }
.pf-tl-rij::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--pf-rand); }
.pf-tl-stip { position: absolute; left: 2px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 2px solid var(--surface-1, #fff); background: var(--brand-groen); box-shadow: 0 0 0 3px rgba(30,158,110,0.15); }
.pf-tl-rij.verkoop .pf-tl-stip { background: var(--brand-koraal); box-shadow: 0 0 0 3px rgba(224,90,106,0.15); }
.pf-tl-rij .tx-badge.koop { color: var(--brand-groen); }
.pf-tl-rij .tx-badge.verkoop { color: var(--brand-koraal); }

/* Analyse: legenda als tegels, bijdrage als staafjes. */
.pf-legenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.pf-legenda-tegel { display: grid; grid-template-columns: 10px 1fr auto; gap: 2px 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--pf-paneel); border: 1px solid var(--pf-rand); min-width: 0; }
.pf-legenda-tegel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pf-legenda-tegel b { font-variant-numeric: tabular-nums; }
.pf-legenda-tegel small { grid-column: 2 / -1; color: var(--text-faint); font-size: 12px; }
.pf-legenda-tegel .stip { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pf-staaf i { display: block; height: 10px; border-radius: 5px; }
.pf-staaf i.up { background: var(--brand-groen); }
.pf-staaf i.down { background: var(--brand-koraal); margin-left: auto; }

/* Plan: vooruitblik als stippellijn met label. */
.pf-vooruit { position: relative; color: var(--brand-groen); margin-bottom: 12px; }
.pf-vooruit-label { position: absolute; right: 16px; top: 10px; font-size: 12px; color: var(--text-dim); }
.pf-vooruit-label b { display: block; font-size: 18px; color: var(--brand-groen); text-align: right; }
.pf-pagina .pf-mini .box { border-radius: 16px; background: var(--pf-paneel); border: 1px solid var(--pf-rand); }
.pf-pagina .pf-mini .box b { font-size: 20px; }
.pf-pagina .inleg-chip { border-radius: 999px; border-color: var(--pf-rand); background: var(--pf-paneel); }

/* Donut-SVG (gedeelde bouwsteen). */
.pf-donut { width: 140px; height: 140px; }
.pf-donut-midden { font-size: 13px; font-weight: 700; fill: var(--text); }
.pf-donut-sub { font-size: 9px; fill: var(--text-faint); }

.pf-pagina .pf-selected .txt h1 { letter-spacing: -0.02em; }
.pf-pagina .pf-detail-kop .price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pf-pagina .pf-detail-kop .price b { font-size: 26px; }
@media (max-width: 560px) { .pf-pagina .pf-detail-kop .price { align-items: flex-start; } }
@media (hover: none) { .pf-rij, .pf-tl-rij { min-height: 52px; } }
.pf-resultaat .pf-tegels { flex-basis: 100%; width: 100%; }