/* /Components/Crowdfunding/SankeyOverzicht.razor.rz.scp.css */
.sankey-wrapper[b-50e61wmhlt] {
    position: relative;
}

.sankey-svg[b-50e61wmhlt] {
    width: 100%;
    height: auto;
    display: block;
}

.sankey-stroom[b-50e61wmhlt] {
    cursor: pointer;
    opacity: 0.35;
    clip-path: inset(0 100% 0 -4px);
    animation: sankey-stroom-in-b-50e61wmhlt 0.55s ease-out both;
    animation-play-state: paused;
    transition: opacity 0.15s ease;
}

.sankey-knoop[b-50e61wmhlt] {
    transform-box: fill-box;
    opacity: 0;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
    animation-fill-mode: both;
    animation-play-state: paused;
}

.sankey-knoop-links[b-50e61wmhlt] {
    transform: translateX(-70px);
    animation-name: sankey-knoop-van-links-b-50e61wmhlt;
}

.sankey-knoop-rechts[b-50e61wmhlt] {
    transform: translateX(70px);
    animation-name: sankey-knoop-van-rechts-b-50e61wmhlt;
}

.scroll-animeer.in-beeld .sankey-stroom[b-50e61wmhlt],
.scroll-animeer.in-beeld .sankey-knoop[b-50e61wmhlt] {
    animation-play-state: running;
}

@keyframes sankey-stroom-in-b-50e61wmhlt {
    to { clip-path: inset(0 0% 0 -4px); }
}

@keyframes sankey-knoop-van-links-b-50e61wmhlt {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes sankey-knoop-van-rechts-b-50e61wmhlt {
    to { opacity: 1; transform: translateX(0); }
}

.sankey-stroom:hover[b-50e61wmhlt] {
    opacity: 0.6;
}

.hover-paneel[b-50e61wmhlt] {
    position: absolute;
    /* Zie wwwroot/js/grafiek-hover.js: de muispositie komt uit CSS-variabelen die
       client-side gezet worden, niet uit een @onmousemove-serverbericht. De
       translateX schuift het paneel naar links als het niet in de ruimte rechts van
       de muis past - zie de uitgebreidere toelichting in StapelGrafiek.razor.css. */
    left: var(--muis-x, 0px);
    top: var(--muis-y, 0px);
    transform: translateX(min(0px, calc(var(--ruimte-rechts, 100vw) - 100% - 8px)));
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-primary);
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
}

/* Op een aanraakscherm is er geen muis om te volgen: grafiek-hover.js krijgt geen
   mousemove, dus het paneel verschijnt linksboven in de grafiek in plaats van bij
   je vinger. Zonder wikkelen steekt het daar (nowrap) buiten de kaart uit. */
@media (hover: none) {
    .hover-paneel[b-50e61wmhlt] {
        max-width: 100%;
        white-space: normal;
    }
}

/* Zie de toelichting bij .animaties-klaar in StapelGrafiek.razor.css. */
.animaties-klaar .sankey-stroom[b-50e61wmhlt] {
    animation: none;
    clip-path: inset(0 0% 0 -4px);
}

.animaties-klaar .sankey-knoop[b-50e61wmhlt] {
    animation: none;
    opacity: 1;
    transform: none;
}
/* /Components/Hoofdtabblad/AllocatieChart.razor.rz.scp.css */
.allocatie-wrapper[b-hisnc12gmq] {
    width: 100%;
}

.allocatie-grid[b-hisnc12gmq] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: center;
}

@media (max-width: 720px) {
    .allocatie-grid[b-hisnc12gmq] {
        grid-template-columns: 1fr;
    }
}

.bar-lijst[b-hisnc12gmq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bar-rij[b-hisnc12gmq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.bar-lijst.heeft-hover .bar-rij:not(.gemarkeerd)[b-hisnc12gmq] {
    opacity: 0.4;
}

.bar-rij.gemarkeerd[b-hisnc12gmq] {
    background: var(--dash-hover-bg);
}

/* De labelkolom past zich aan het langste label in DEZE grafiek aan: projectnamen
   krijgen ruimte, maar een risicoklasse is nooit meer dan een cijfer met een letter
   en hoeft geen 190px op te eisen. De breedte komt uit de component (--label-breedte),
   met een onder- en bovengrens zodat het nooit ontspoort. */
.bar-label[b-hisnc12gmq] {
    width: clamp(2.5rem, var(--label-breedte, 190px), 14rem);
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track[b-hisnc12gmq] {
    flex: 1;
    height: 10px;
    background: var(--dash-hover-bg);
    border-radius: 6px;
    overflow: hidden;
}

.bar-vulling[b-hisnc12gmq] {
    height: 100%;
    border-radius: 6px;
    width: 0;
    animation: bar-groei-b-hisnc12gmq 1s ease-out both;
}

@keyframes bar-groei-b-hisnc12gmq {
    from { width: 0 !important; }
}

.bar-waarden[b-hisnc12gmq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    width: 100px;
    flex-shrink: 0;
}

.bar-percentage[b-hisnc12gmq] {
    font-size: 13.5px;
    color: var(--dash-text-primary);
    font-weight: 600;
}

.bar-bedrag[b-hisnc12gmq] {
    font-size: 12px;
    color: var(--dash-text-secondary);
}

.taart-svg[b-hisnc12gmq] {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    margin: 0 auto;
    animation: taart-sweep-b-hisnc12gmq 1s ease-out 0.2s both;
}

@keyframes taart-sweep-b-hisnc12gmq {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* Lichte kanteling: de taart iets als ellips tonen i.p.v. een perfecte cirkel,
   alsof je 'm van een hoekje bekijkt - samen met het kleurverloop en de schaduw
   maakt dit het bolle 3D-effect af. Labels zitten in hun eigen identiek gekantelde
   groep, zodat ze precies op hun segment blijven staan. */
.pie-tilt[b-hisnc12gmq] {
    transform: scaleY(0.82);
    transform-origin: 140px 140px;
}

.pie-segment[b-hisnc12gmq] {
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform-origin: 140px 140px;
}

.taart-svg.heeft-hover .pie-segment:not(.gemarkeerd)[b-hisnc12gmq] {
    opacity: 0.35;
}

.pie-segment.gemarkeerd[b-hisnc12gmq] {
    transform: scale(1.03);
}

.pie-label[b-hisnc12gmq] {
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.pie-label.gemarkeerd[b-hisnc12gmq] {
    font-size: 13px;
}

/* ---- Telefoon: label, balk en bedragen onder elkaar in plaats van naast elkaar.
   Op één regel eist het label (tot 14rem) samen met de bedragkolom (100px) de hele
   breedte op, en houdt de balk zelf nul pixels over - dan zie je alleen nog cijfers
   en is de grafiek geen grafiek meer. ---- */
@media (max-width: 560px) {
    .bar-rij[b-hisnc12gmq] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label waarden"
            "track track";
        gap: 6px 12px;
        align-items: center;
    }

    .bar-label[b-hisnc12gmq] {
        grid-area: label;
        width: auto;
    }

    .bar-track[b-hisnc12gmq] {
        grid-area: track;
    }

    .bar-waarden[b-hisnc12gmq] {
        grid-area: waarden;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        width: auto;
    }
}

/* ---- Nog niet gestart: het geld staat wel bij het platform, maar is nog niet aan
   een ondernemer uitgekeerd. Het telt dus mee in de verdeling, maar levert nog
   niets op - vandaar gedempt in plaats van weggelaten. ---- */
.bar-rij.nog-niet-gestart[b-hisnc12gmq] {
    opacity: 0.5;
}

/* Aanwijzen zet de demping tijdelijk opzij, anders kun je het bedrag amper lezen. */
.bar-rij.nog-niet-gestart.gemarkeerd[b-hisnc12gmq] {
    opacity: 1;
}

.pie-segment.nog-niet-gestart[b-hisnc12gmq] {
    opacity: 0.45;
}

.taart-svg.heeft-hover .pie-segment.nog-niet-gestart.gemarkeerd[b-hisnc12gmq] {
    opacity: 1;
}

/* Zie de toelichting bij .animaties-klaar in StapelGrafiek.razor.css. De balk houdt
   zijn breedte uit de inline stijl, dus die hoeft hier niet herhaald te worden. */
.animaties-klaar .bar-vulling[b-hisnc12gmq] {
    animation: none;
}

.animaties-klaar .taart-svg[b-hisnc12gmq] {
    animation: none;
    opacity: 1;
    transform: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-iz37u9fvzb] {
    display: flex;
    min-height: 100vh;
    background: var(--dash-bg);
    color: var(--dash-text-primary);
}

@media (max-width: 640px) {
    .app-shell[b-iz37u9fvzb] {
        flex-direction: column;
    }
}

.main-area[b-iz37u9fvzb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.main-content[b-iz37u9fvzb] {
    flex: 1;
    padding: 24px 32px;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .main-content[b-iz37u9fvzb] {
        padding: 16px 16px 84px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.sidebar[b-svmhuqj526] {
    width: 220px;
    background: var(--dash-sidebar-bg);
    color: var(--dash-text-primary);
    border-right: 1px solid var(--dash-card-border);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
}

.sidebar.collapsed[b-svmhuqj526] {
    width: 60px;
    align-items: center;
}

.sidebar-header[b-svmhuqj526] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 6px;
}

.sidebar.collapsed .sidebar-header[b-svmhuqj526] {
    flex-direction: column;
    gap: 10px;
}

/* Rij en geen kolom: hier staat sinds het beeldmerk erbij kwam het logo náást de
   titel. Ingeklapt blijft alleen het logo over. */
.sidebar-header-tekst[b-svmhuqj526] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sidebar-header-tekst[b-svmhuqj526]  .logo-merk {
    flex-shrink: 0;
}

/* Het versienummer onderaan: aanwezig als je het zoekt, stil als je het niet zoekt. */
.sidebar-versie[b-svmhuqj526] {
    font-size: 10.5px;
    color: var(--dash-text-secondary);
    opacity: 0.65;
    padding: 8px 14px 0;
    letter-spacing: 0.02em;
}

.sidebar-titel[b-svmhuqj526] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dash-text-primary);
}

.inklap-knop[b-svmhuqj526] {
    background: none;
    border: none;
    color: var(--dash-text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
    pointer-events: auto;
    flex-shrink: 0;
}

.inklap-knop svg[b-svmhuqj526] {
    width: 16px;
    height: 16px;
}

.sidebar-nav[b-svmhuqj526] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-svmhuqj526] .nav-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--dash-text-secondary);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}

[b-svmhuqj526] .nav-item:hover {
    background: var(--dash-hover-bg);
    color: var(--dash-text-primary);
}

[b-svmhuqj526] .nav-item.active {
    background: rgba(217, 164, 65, 0.12);
    color: var(--dash-amber);
}

.nav-icon[b-svmhuqj526] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg[b-svmhuqj526] {
    width: 16px;
    height: 16px;
}

.sidebar.collapsed .sidebar-nav > div[b-svmhuqj526] {
    display: flex;
    justify-content: center;
}

.sidebar.collapsed[b-svmhuqj526]  .nav-item {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
}

.sidebar-footer[b-svmhuqj526] {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-account-email[b-svmhuqj526] {
    font-size: 11.5px;
    color: var(--dash-text-secondary);
    padding: 0 14px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-footer[b-svmhuqj526] {
    align-items: center;
}

/* ---- Mobiele topbalk: alleen zichtbaar op smalle schermen, toont de titel die
   anders in de (nu verborgen) zijbalk-header stond. ---- */
.mobiel-topbalk[b-svmhuqj526] {
    display: none;
}

/* ---- Mobiel: de zijbalk wordt een vaste, écht icoon-alleen balk onderaan,
   zoals bij de meeste mobiele apps - dat kost geen kostbare schermbreedte
   zoals een verticale kolom dat zou doen, en is met de duim te bedienen.
   Geldt voor elk scherm smaller dan ~640px, ongeacht of de zijbalk op dat
   moment handmatig in- of uitgeklapt stond (vandaar steeds de dubbele
   .sidebar / .sidebar.collapsed-selectors). ---- */
@media (max-width: 640px) {
    .mobiel-topbalk[b-svmhuqj526] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 15;
        background: var(--dash-sidebar-bg);
        border-bottom: 1px solid var(--dash-card-border);
        padding: 12px 16px;
        gap: 12px;
    }

    .mobiel-topbalk-titel[b-svmhuqj526] {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--dash-text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar[b-svmhuqj526],
    .sidebar.collapsed[b-svmhuqj526] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-around;
        padding: 4px 2px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        border-right: none;
        border-top: 1px solid var(--dash-card-border);
        overflow-x: auto;
        overflow-y: visible;
        z-index: 20;
    }

    .sidebar-header[b-svmhuqj526] {
        display: none;
    }

    .sidebar-nav[b-svmhuqj526] {
        flex-direction: row;
        flex: 1;
        justify-content: space-around;
        gap: 0;
    }

    .sidebar.collapsed .sidebar-nav > div[b-svmhuqj526],
    .sidebar-nav > div[b-svmhuqj526] {
        display: flex;
    }

    /* Icoon-alleen: de tekstlabels naast de iconen verdwijnen volledig, de
       iconen zelf worden groter zodat ze prettig met de duim te raken zijn
       (richtlijn: minimaal ~44px aanraakvlak). */
    .nav-label[b-svmhuqj526] {
        display: none;
    }

    [b-svmhuqj526] .nav-item,
    .sidebar.collapsed[b-svmhuqj526]  .nav-item {
        flex-direction: column;
        gap: 0;
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
    }

    .nav-icon[b-svmhuqj526],
    .sidebar.collapsed .nav-icon[b-svmhuqj526] {
        width: 24px;
        height: 24px;
    }

    .nav-icon svg[b-svmhuqj526],
    .sidebar.collapsed .nav-icon svg[b-svmhuqj526] {
        width: 21px;
        height: 21px;
    }

    .sidebar-footer[b-svmhuqj526],
    .sidebar.collapsed .sidebar-footer[b-svmhuqj526] {
        flex-direction: row;
        align-items: stretch;
        margin-top: 0;
        padding-top: 0;
        gap: 0;
    }

    .sidebar-account-email[b-svmhuqj526] {
        display: none;
    }

    /* Drie even brede knoppen. Twee zitten in de nav en één in de voet, dus die
       krijgen 2 en 1 deel. Het beheerdashboard staat bewust op het accountscherm
       en niet hier, juist zodat deze verhouding altijd opgaat.
       space-around laat rondom elke knop nog wat lucht over en maakt de laatste
       daardoor smaller; hier moet alles gewoon uitgerekt worden. */
    .sidebar[b-svmhuqj526],
    .sidebar.collapsed[b-svmhuqj526],
    .sidebar-nav[b-svmhuqj526] {
        justify-content: stretch;
    }

    .sidebar-nav[b-svmhuqj526] {
        flex: 2;
    }

    .sidebar-footer[b-svmhuqj526],
    .sidebar.collapsed .sidebar-footer[b-svmhuqj526] {
        flex: 1;
    }

    .sidebar-nav > div[b-svmhuqj526] {
        flex: 1;
        display: flex;
    }

    /* Niet ".sidebar-footer > *": dat raakt ook het e-mailadres ernaast en zet de
       display:none daarvan weer aan. */
    .sidebar-footer[b-svmhuqj526] >  .nav-item {
        flex: 1;
    }

    [b-svmhuqj526] .nav-item,
    .sidebar.collapsed[b-svmhuqj526]  .nav-item {
        width: 100%;
    }
}
/* /Components/Pages/Crowdfunding.razor.rz.scp.css */
.beheer-links[b-31jqed1f6k] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* ---- Schakelaar voor de groepering van de twee overzichtsgrafieken ---- */
.groepering-rij[b-31jqed1f6k] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.groepering-label[b-31jqed1f6k] {
    font-size: 12.5px;
    color: var(--dash-text-secondary);
}

/* ---- Kop en filterbalk boven de projectenlijst ---- */
.lijst-kop[b-31jqed1f6k] {
    margin-bottom: 12px;
}

.lijst-kop h2[b-31jqed1f6k] {
    margin-bottom: 10px;
}

.filter-balk[b-31jqed1f6k] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-zoek[b-31jqed1f6k] {
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 360px;
}

/* De keuzelijst schaalt zichzelf op "Alle risicoklassen", maar rekent de ruimte
   voor het pijltje niet mee - dan valt de tekst er net onderdoor. */
.filter-risico[b-31jqed1f6k] {
    min-width: 200px;
}

.filter-telling[b-31jqed1f6k] {
    font-size: 12.5px;
    color: var(--dash-text-secondary);
    white-space: nowrap;
}

/* ---- Eén project: altijd een klikbare kopregel, inhoud alleen indien uitgeklapt.
   Bij een grote portefeuille scheelt dat honderden grafieken in de pagina. ---- */
.project-blok[b-31jqed1f6k] {
    border-bottom: 1px solid var(--dash-card-border);
}

/* ---- Slepen om de volgorde te bepalen ---- */
.project-blok.wordt-gesleept[b-31jqed1f6k] {
    opacity: 0.4;
}

.project-blok.sleepdoel[b-31jqed1f6k] {
    border-top: 2px solid var(--dash-amber);
}

.project-kop-greep[b-31jqed1f6k] {
    color: var(--dash-text-secondary);
    opacity: 0;
    cursor: grab;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

/* Alleen tonen als je erbij in de buurt bent - anders staat er op elke regel een
   handvat dat de aandacht van de cijfers afleidt. */
.project-kop:hover .project-kop-greep[b-31jqed1f6k],
.project-blok.wordt-gesleept .project-kop-greep[b-31jqed1f6k] {
    opacity: 1;
}

.project-kop[b-31jqed1f6k] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 4px;
    background: none;
    border: none;
    color: var(--dash-text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.project-kop:hover[b-31jqed1f6k] {
    background: var(--dash-card-bg);
}

.project-kop-pijl[b-31jqed1f6k] {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--dash-text-secondary);
    transition: transform 0.2s ease;
}

.project-kop.open .project-kop-pijl[b-31jqed1f6k] {
    transform: rotate(90deg);
}

.project-kop-pijl svg[b-31jqed1f6k] {
    width: 100%;
    height: 100%;
}

.project-kop-kleur[b-31jqed1f6k] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.project-kop-naam[b-31jqed1f6k] {
    flex: 1 1 auto;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Vaste kolommen aan de rechterkant, zodat elke regel uitlijnt ongeacht wat
   erin staat: een badge die ontbreekt of een percentage van één teken langer mag
   de rest niet laten verspringen. ---- */
.project-kop-status[b-31jqed1f6k] {
    width: 108px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.project-kop-risico[b-31jqed1f6k] {
    width: 44px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.project-kop-rente[b-31jqed1f6k] {
    width: 52px;
    text-align: right;
    font-size: 12.5px;
    color: var(--dash-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.project-kop-bedrag[b-31jqed1f6k] {
    font-weight: 600;
    white-space: nowrap;
    min-width: 90px;
    text-align: right;
}

.project-inhoud[b-31jqed1f6k] {
    padding: 4px 4px 20px;
}

/* Nog niet gestart: geld staat bij het platform, maar er is nog geen betaalschema. */
.nog-niet-gestart[b-31jqed1f6k] {
    border-style: dashed;
    color: var(--dash-text-secondary);
}

.niet-gestart-uitleg[b-31jqed1f6k] {
    margin: 4px 0 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--dash-card-border);
    background: var(--dash-hover-bg);
    border-radius: 0 6px 6px 0;
}

@media (max-width: 640px) {
    .project-kop-rente[b-31jqed1f6k] {
        display: none;
    }

    /* Op een smal scherm is vaste breedte verspilde ruimte; daar mogen ze krimpen. */
    .project-kop-status[b-31jqed1f6k],
    .project-kop-risico[b-31jqed1f6k] {
        width: auto;
    }

    .filter-zoek[b-31jqed1f6k] {
        max-width: none;
    }
}

/* Bij welke grafiek je kijkt naar exacte cijfers en bij welke naar een benadering. */
.schema-herkomst[b-31jqed1f6k] {
    margin-top: 8px;
    font-size: 12px;
}

/* ---- Achterstand: het enige signaal in deze lijst dat om actie vraagt, dus als
   enige in de foutkleur. ---- */
.achterstand[b-31jqed1f6k] {
    border-color: var(--dash-red);
    color: var(--dash-red);
}

.achterstand-melding[b-31jqed1f6k] {
    margin: 4px 0 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--dash-red);
    background: var(--dash-hover-bg);
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    color: var(--dash-text-secondary);
}

.achterstand-melding strong[b-31jqed1f6k] {
    color: var(--dash-red);
    margin-right: 4px;
}

/* ---- Telefoon: kopregel over twee regels ------------------------------------
   Op één regel vechten de projectnaam, twee badges en het bedrag om ~340px. De
   naam verliest dat gevecht altijd ("Overname Eetcafé Blue..."), terwijl dat nu
   juist is waar je op zoekt. Daarom staan naam en bedrag boven, en zakken de
   badges naar een tweede regel onder de naam.
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .project-kop[b-31jqed1f6k] {
        display: grid;
        /* De naam beslaat kolom 3+4 en krijgt zo de volle breedte; kolom 3 is verder
           net zo breed als de statusbadge, zodat de risicobadge er direct naast staat. */
        grid-template-columns: 14px 10px auto minmax(0, 1fr) auto;
        grid-template-areas:
            "pijl kleur naam   naam   bedrag"
            ".    .     status risico .";
        column-gap: 8px;
        row-gap: 4px;
        align-items: center;
    }

    .project-kop-pijl[b-31jqed1f6k] { grid-area: pijl; }
    .project-kop-kleur[b-31jqed1f6k] { grid-area: kleur; }
    .project-kop-bedrag[b-31jqed1f6k] { grid-area: bedrag; }

    .project-kop-naam[b-31jqed1f6k] {
        grid-area: naam;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* Zonder badges blijft de tweede regel leeg; die mag dan geen hoogte kosten. */
    .project-kop-status:empty[b-31jqed1f6k],
    .project-kop-risico:empty[b-31jqed1f6k] {
        display: none;
    }

    .project-kop-status[b-31jqed1f6k] {
        grid-area: status;
        justify-content: flex-start;
    }

    .project-kop-risico[b-31jqed1f6k] {
        grid-area: risico;
        justify-content: flex-start;
    }

    /* Slepen om te herordenen werkt alleen met een muis; op touch is het handvat
       alleen maar breedte die de naam niet krijgt. */
    .project-kop-greep[b-31jqed1f6k] {
        display: none;
    }
}
/* /Components/Pages/CrowdfundingToevoegen.razor.rz.scp.css */
/* ---- Stap-indicator boven "Project toevoegen" - toont waar je in het proces zit,
   past zich aan tussen 2 stappen (bestaand project) en 3 stappen (nieuw project). ---- */
.stapper[b-3jgolnx3v1] {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 0 4px;
}

.stapper-item[b-3jgolnx3v1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.stapper-cirkel[b-3jgolnx3v1] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--dash-card-border);
    color: var(--dash-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    flex-shrink: 0;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.stapper-item.voltooid .stapper-cirkel[b-3jgolnx3v1] {
    border-color: var(--dash-amber);
    color: var(--dash-amber);
    background: rgba(217, 164, 65, 0.12);
}

.stapper-label[b-3jgolnx3v1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-secondary);
    white-space: nowrap;
}

.stapper-item.voltooid .stapper-label[b-3jgolnx3v1] {
    color: var(--dash-text-primary);
}

.stapper-lijn[b-3jgolnx3v1] {
    height: 1.5px;
    background: var(--dash-card-border);
    flex: 1;
    margin: 0 14px;
    min-width: 24px;
    transition: background 0.2s ease;
}

.stapper-lijn.voltooid[b-3jgolnx3v1] {
    background: var(--dash-amber);
}

@media (max-width: 640px) {
    .stapper-label[b-3jgolnx3v1] {
        display: none;
    }

    .stapper-lijn[b-3jgolnx3v1] {
        margin: 0 8px;
    }
}

/* ---- Terugkoppeling na opslaan/bijwerken/verwijderen. Staat los van de
   opslaan-knop, want die verdwijnt zodra het ingelezen betaalschema is
   opgeruimd - de melding moet juist dán blijven staan. ---- */
.melding-balk[b-3jgolnx3v1] {
    display: block;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--dash-card-border);
    background: var(--dash-card-bg);
    font-size: 13px;
}

.melding-balk a[b-3jgolnx3v1] {
    color: inherit;
    text-decoration: underline;
}

/* De projectkeuze schaalt zichzelf naar de langste projectnaam, maar rekent de
   ruimte voor het pijltje (padding-right) niet mee - lange namen liepen daardoor
   onder de chevron door. Vandaar een ruime ondergrens, met max-width zodat hij
   binnen de kaart blijft. */
.project-keuze[b-3jgolnx3v1] {
    min-width: 420px;
    max-width: 100%;
}

@media (max-width: 640px) {
    .project-keuze[b-3jgolnx3v1] {
        min-width: 0;
        width: 100%;
    }
}

/* De platformkeuze past zich anders precies om "GeldVoorElkaar" heen, waardoor het
   een propvol knopje wordt in plaats van een keuzeveld. Vaste ruimte dus, ook zodat
   hij niet van breedte springt zodra er een platform met een langere naam bijkomt. */
.platform-keuze[b-3jgolnx3v1] {
    min-width: 260px;
}

@media (max-width: 640px) {
    .platform-keuze[b-3jgolnx3v1] {
        min-width: 0;
        width: 100%;
    }
}

/* Wat ruimte tussen opslaan en verwijderen, zodat ze niet als één rij knoppen lezen. */
.verwijder-rij[b-3jgolnx3v1] {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--dash-card-border);
}

.opslaan-toelichting[b-3jgolnx3v1] {
    margin-left: 10px;
    font-size: 12.5px;
    color: var(--dash-text-secondary);
}
/* /Components/Pages/PortefeuilleImporteren.razor.rz.scp.css */
.platform-keuze[b-e7o39u88ow] {
    min-width: 260px;
    max-width: 100%;
}

.bestand-kiezer[b-e7o39u88ow] {
    margin-top: 12px;
    padding: 14px;
    border: 1px dashed var(--dash-card-border);
    border-radius: 8px;
    background: var(--dash-hover-bg);
}

.plak-alternatief[b-e7o39u88ow] {
    margin-top: 14px;
}

.plak-alternatief summary[b-e7o39u88ow] {
    font-size: 12.5px;
    color: var(--dash-text-secondary);
    cursor: pointer;
    margin-bottom: 10px;
}

/* ---- Wat er met een project gaat gebeuren ---- */
.actie-badge[b-e7o39u88ow] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--dash-card-border);
    font-size: 11.5px;
    white-space: nowrap;
}

.actie-nieuw[b-e7o39u88ow] {
    border-color: var(--dash-green);
    color: var(--dash-green);
}

.actie-schematoegevoegd[b-e7o39u88ow] {
    border-color: var(--dash-amber);
    color: var(--dash-amber);
}

/* Toelichting en afwijkingen horen visueel bij de regel erboven, dus geen eigen
   scheidingslijn en wat ingesprongen. */
.regel-toelichting[b-e7o39u88ow] {
    padding-top: 0;
    padding-left: 24px;
    font-size: 12px;
    color: var(--dash-text-secondary);
}
/* /Components/Shared/StapelGrafiek.razor.rz.scp.css */
.grafiek-wrapper[b-fdlsmek0sc] {
    position: relative;
}

.grafiek-svg[b-fdlsmek0sc] {
    width: 100%;
    height: auto;
    display: block;
}

.balk-groep[b-fdlsmek0sc] {
    transform-origin: bottom;
    animation: groei-b-fdlsmek0sc 0.5s ease-out both;
    animation-play-state: paused;
}

.scroll-animeer.in-beeld .balk-groep[b-fdlsmek0sc] {
    animation-play-state: running;
}

.balk-groep.toekomstig[b-fdlsmek0sc] {
    opacity: 0.45;
}

.balk-groep:hover[b-fdlsmek0sc] {
    opacity: 0.85;
    cursor: pointer;
}

.balk-groep.toekomstig:hover[b-fdlsmek0sc] {
    opacity: 0.65;
}

@keyframes groei-b-fdlsmek0sc {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.cumulatief-lijn[b-fdlsmek0sc] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: teken-b-fdlsmek0sc 1s ease-out 0.2s forwards;
    animation-play-state: paused;
}

.scroll-animeer.in-beeld .cumulatief-lijn[b-fdlsmek0sc] {
    animation-play-state: running;
}

.cumulatief-vlak[b-fdlsmek0sc] {
    opacity: 0;
    animation: vlak-fade-b-fdlsmek0sc 1s ease-out 0.2s forwards;
    animation-play-state: paused;
}

.scroll-animeer.in-beeld .cumulatief-vlak[b-fdlsmek0sc] {
    animation-play-state: running;
}

@keyframes vlak-fade-b-fdlsmek0sc {
    to { opacity: 0.15; }
}

@keyframes teken-b-fdlsmek0sc {
    to { stroke-dashoffset: 0; }
}

.hover-paneel[b-fdlsmek0sc] {
    position: absolute;
    /* Muispositie komt uit wwwroot/js/grafiek-hover.js - bewust niet vanuit een
       @onmousemove op de component zelf, want dat is in Blazor Server een
       serverbericht per muisbeweging. De translateX houdt het paneel binnen de
       kaart: past het niet in de ruimte rechts van de muis, dan schuift het precies
       dat tekort naar links. Dat rekent de browser zelf uit, dus het klopt ook op
       het moment dat het paneel voor het eerst verschijnt. */
    left: var(--muis-x, 0px);
    top: var(--muis-y, 0px);
    transform: translateX(min(0px, calc(var(--ruimte-rechts, 100vw) - 100% - 8px)));
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
}

.hover-regel[b-fdlsmek0sc] {
    font-weight: 600;
}

.hover-status[b-fdlsmek0sc] {
    color: var(--dash-text-secondary);
    font-size: 11px;
}

.legenda[b-fdlsmek0sc] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.legenda-item[b-fdlsmek0sc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--dash-text-secondary);
}

.legenda-bolletje[b-fdlsmek0sc] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.legenda-bolletje-leeg[b-fdlsmek0sc] {
    background: var(--dash-text-secondary);
    opacity: 0.45;
}

/* Een legenda van tien projecten die op een telefoon over vier regels afbreekt
   leest als een lap tekst; onder elkaar is het gewoon een lijstje. */
@media (max-width: 640px) {
    .legenda[b-fdlsmek0sc] {
        flex-direction: column;
        gap: 7px;
    }
}

/* Op een aanraakscherm is er geen muis om te volgen: grafiek-hover.js krijgt geen
   mousemove, dus het paneel verschijnt linksboven in de grafiek in plaats van bij
   je vinger. Zonder wikkelen steekt het daar (nowrap) buiten de kaart uit. */
@media (hover: none) {
    .hover-paneel[b-fdlsmek0sc] {
        max-width: 100%;
        white-space: normal;
    }
}

/* ---- Na afloop van de animaties ------------------------------------------
   Een afgelopen animatie met fill-mode "both"/"forwards" blijft bestaan en houdt
   het element op een eigen compositielaag; die laag is één keer op de verkeerde
   schaal getekend en dat zie je als een wazige grafiek, tot je erover hovert.
   scroll-animatie.js zet de klasse hieronder zodra alles klaar is; dit is dan het
   eindplaatje, zonder animatie.
   -------------------------------------------------------------------------- */
.animaties-klaar .balk-groep[b-fdlsmek0sc] {
    animation: none;
    transform: none;
}

.animaties-klaar .cumulatief-lijn[b-fdlsmek0sc] {
    animation: none;
    stroke-dashoffset: 0;
}

.animaties-klaar .cumulatief-vlak[b-fdlsmek0sc] {
    animation: none;
    opacity: 0.15;
}
/* /Components/Shared/VerloopGrafiek.razor.rz.scp.css */
.verloop-wrapper[b-e1ohr2h6hi] {
    position: relative;
}

.verloop-svg[b-e1ohr2h6hi] {
    width: 100%;
    height: auto;
    display: block;
}

/* De lijn tekent zichzelf zodra de kaart in beeld scrolt - zelfde mechaniek als de
   staven in StapelGrafiek (zie wwwroot/js/scroll-animatie.js). */
.verloop-lijn[b-e1ohr2h6hi] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: verloop-teken-b-e1ohr2h6hi 1s ease-out 0.2s forwards;
    animation-play-state: paused;
}

.scroll-animeer.in-beeld .verloop-lijn[b-e1ohr2h6hi] {
    animation-play-state: running;
}

@keyframes verloop-teken-b-e1ohr2h6hi {
    to { stroke-dashoffset: 0; }
}

/* Lichte invulling onder de lijn, in dezelfde kleur - geeft de grafiek gewicht
   zonder de lijn zelf te overstemmen. */
.verloop-vlak[b-e1ohr2h6hi] {
    opacity: 0;
    animation: verloop-vlak-in-b-e1ohr2h6hi 1s ease-out 0.2s forwards;
    animation-play-state: paused;
}

.scroll-animeer.in-beeld .verloop-vlak[b-e1ohr2h6hi] {
    animation-play-state: running;
}

@keyframes verloop-vlak-in-b-e1ohr2h6hi {
    to { opacity: 0.15; }
}

/* Zelfde hover-paneel als bij de staafgrafieken: de positie komt uit de
   CSS-variabelen die wwwroot/js/grafiek-hover.js client-side zet, en de translateX
   houdt het paneel binnen de kaart als het rechts niet meer past. */
.hover-paneel[b-e1ohr2h6hi] {
    position: absolute;
    left: var(--muis-x, 0px);
    top: var(--muis-y, 0px);
    transform: translateX(min(0px, calc(var(--ruimte-rechts, 100vw) - 100% - 8px)));
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
}

.hover-regel[b-e1ohr2h6hi] {
    font-weight: 600;
}


/* Op een aanraakscherm is er geen muis om te volgen: grafiek-hover.js krijgt geen
   mousemove, dus het paneel verschijnt linksboven in de grafiek in plaats van bij
   je vinger. Zonder wikkelen steekt het daar (nowrap) buiten de kaart uit. */
@media (hover: none) {
    .hover-paneel[b-e1ohr2h6hi] {
        max-width: 100%;
        white-space: normal;
    }
}

/* Zie de toelichting bij .animaties-klaar in StapelGrafiek.razor.css. */
.animaties-klaar .verloop-lijn[b-e1ohr2h6hi] {
    animation: none;
    stroke-dashoffset: 0;
}

.animaties-klaar .verloop-vlak[b-e1ohr2h6hi] {
    animation: none;
    opacity: 0.15;
}

/* De tweede reeks is context bij de hoofdlijn: gestippeld, iets dunner, en hij
   verschijnt in plaats van zichzelf te tekenen - twee lijnen die tegelijk beginnen
   te lopen leidt alleen maar af van de hoofdlijn. */
.verloop-lijn-tweede[b-e1ohr2h6hi] {
    stroke-dasharray: 6 5;
    opacity: 0;
    animation: verloop-tweede-in-b-e1ohr2h6hi 0.8s ease-out 0.6s forwards;
    animation-play-state: paused;
}

.scroll-animeer.in-beeld .verloop-lijn-tweede[b-e1ohr2h6hi] {
    animation-play-state: running;
}

@keyframes verloop-tweede-in-b-e1ohr2h6hi {
    to { opacity: 1; }
}

.animaties-klaar .verloop-lijn-tweede[b-e1ohr2h6hi] {
    animation: none;
    opacity: 1;
}
/* /Components/Shared/VoortgangBlok.razor.rz.scp.css */
.voortgang-blok[b-yfwd8aoi75] {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 12px;
    padding: 16px 18px;
}

/* De kleur zegt waar je naar kijkt en is dezelfde als in de grafieken eronder. */
.voortgang-blok.aflossing[b-yfwd8aoi75] {
    --voortgang-kleur: var(--dash-green);
}

.voortgang-blok.rente[b-yfwd8aoi75] {
    --voortgang-kleur: var(--dash-blauw);
}

.voortgang-blok.fee[b-yfwd8aoi75] {
    --voortgang-kleur: var(--dash-red);
}

.voortgang-bedrag[b-yfwd8aoi75] {
    font-size: 22px;
    font-weight: 700;
    color: var(--voortgang-kleur);
    margin-top: 2px;
}

/* Bewust de randkleur en niet --dash-hover-bg: die is in het donkere thema gelijk
   aan de kaartachtergrond, waardoor de lege helft van de balk zou verdwijnen. */
.voortgang-balk[b-yfwd8aoi75] {
    height: 5px;
    background: var(--dash-card-border);
    border-radius: 3px;
    overflow: hidden;
    margin: 12px 0 7px;
}

.voortgang-vulling[b-yfwd8aoi75] {
    height: 100%;
    border-radius: 3px;
    background: var(--voortgang-kleur);
    animation: voortgang-groei-b-yfwd8aoi75 0.9s ease-out both;
}

@keyframes voortgang-groei-b-yfwd8aoi75 {
    from { width: 0 !important; }
}

.voortgang-rest[b-yfwd8aoi75] {
    font-size: 12px;
    color: var(--dash-text-secondary);
}