:root {
    --dash-bg: #121714;
    --dash-card-bg: #1c2321;
    --dash-card-border: #2f3a36;
    --dash-text-primary: #e8ece9;
    --dash-text-secondary: #7d8a85;
    --dash-blauw: #5b8dd9;
    --dash-amber: #d9a441;
    --dash-red: #b5524a;
    --dash-green: #5aa878;
    --dash-oranje: #d67d2e;
    --dash-chart-tekst: #7d8a85;
    --dash-sidebar-bg: #161b18;
    --dash-hover-bg: #1c2321;
}

/* ---- Licht thema: dezelfde variabelen, omgedraaid. Alle onderdelen die deze
   variabelen gebruiken (kaarten, tekst, randen, knoppen, formulieren, zijbalk)
   passen zich automatisch aan zodra deze class op de buitenste wrapper staat -
   grafieken met eigen kleuren (Sankey-projectpalet, risico-badges) blijven bewust
   hun eigen, herkenbare kleur behouden, die staat los van het thema. ---- */
.thema-licht {
    --dash-bg: #f4f5f3;
    --dash-card-bg: #ffffff;
    --dash-card-border: #dde2de;
    --dash-text-primary: #1c2321;
    --dash-text-secondary: #5c6863;
    --dash-blauw: #5b8dd9;
    --dash-amber: #b3791f;
    --dash-red: #a03f38;
    --dash-green: #3f7a56;
    --dash-oranje: #c26a1c;
    --dash-chart-tekst: #5c6863;
    --dash-sidebar-bg: #ffffff;
    --dash-hover-bg: #eef0ee;
}

body {
    background: var(--dash-bg);
    color: var(--dash-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    scrollbar-color: var(--dash-card-border) var(--dash-bg);
    scrollbar-width: thin;
    margin: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

* {
    scrollbar-color: var(--dash-card-border) var(--dash-bg);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--dash-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--dash-card-border);
    border-radius: 8px;
    border: 2px solid var(--dash-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dash-amber);
}

h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
}

h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
}

a {
    color: var(--dash-amber);
}

.project-kaart {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 20px;
}

.project-scheiding {
    height: 1px;
    background: var(--dash-card-border);
    margin: 32px 0 24px;
}

.hyp-subtitel {
    color: var(--dash-text-secondary);
    font-size: 12.5px;
    margin-bottom: 10px;
}

.beheer-link {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 13px;
}

/* ---- Knoppen ---- */
/* Randloze stijl, aansluitend bij de navigatie-items: alleen kleur + een
   subtiele achtergrond bij hover/actief, geen omlijnd "kastje". */
.toevoeg-knop,
.knop-amber,
.toggle-knop,
.verwijder-knop-outline {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: transparent;
}

.toevoeg-knop,
.knop-amber,
.toggle-knop {
    color: var(--dash-amber);
}

.toevoeg-knop:hover,
.knop-amber:hover,
.toggle-knop:hover {
    background: rgba(217, 164, 65, 0.12);
}

.knop-amber.actief,
.toggle-knop.actief {
    background: rgba(217, 164, 65, 0.18);
}

/* ---- Formulieren / invoer ---- */
.type-invoer,
.tekst-invoer {
    background: var(--dash-hover-bg);
    border: 1px solid var(--dash-card-border);
    color: var(--dash-text-primary);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    /* Zonder border-box telt width:100% de padding en rand er nog eens bovenop:
       het plakvak voor het betaalschema stak daardoor ruim 20px verder uit dan de
       velden erboven. */
    box-sizing: border-box;
}

.invoer-rij {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.formulier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.formulier-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--dash-text-secondary);
}

/* ---- Tabellen ---- */
.data-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-tabel th {
    text-align: left;
    color: var(--dash-text-secondary);
    font-weight: 500;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--dash-card-border);
}

.data-tabel td {
    padding: 7px 8px;
    border-bottom: 1px solid rgba(47, 58, 54, 0.5);
}

.tabel-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- Statistiek-rij (kleine kaartjes bovenaan een module) ---- */
.stat-rij {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.stat-label {
    font-size: 11.5px;
    color: var(--dash-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.stat-bedrag {
    font-size: 20px;
    font-weight: 700;
}

/* ---- Cijfers in paren: boven wat er al is, eronder wat er nog komt. Een raster
   in plaats van een rij, zodat de onderste regel over alle kolommen uitlijnt -
   ook als één cel een extra regel tekst heeft. ---- */
.stat-paren {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    gap: 16px 28px;
    justify-content: start;
}

/* ---- Beheerdashboard ---- */
.admin-grafiek-svg {
    width: 100%;
    height: auto;
    display: block;
}

.risico-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.risico-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--dash-card-border);
    color: var(--dash-text-secondary);
    white-space: nowrap;
}

.risico-badge-onbekend {
    color: var(--dash-text-secondary);
    border-style: dashed;
}

/* ---- Mobiel: brede vaste-koloms-rasters op één kolom laten vallen ---- */
@media (max-width: 640px) {
    .formulier-grid {
        grid-template-columns: 1fr;
    }

    /* Vier kolommen naast elkaar past niet; twee kolommen houdt elk paar wel bij
       elkaar, want de cellen staan al paarsgewijs in de opmaak. */
    .stat-paren {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
    }

    .stat-rij {
        gap: 16px;
    }

    .stat-bedrag {
        font-size: 18px;
    }

    h1 {
        font-size: 20px;
    }

    .project-kaart {
        padding: 14px 16px;
    }
}

/* ---- Vaste, betekenisvolle kleuren voor bedragen - vervangt losse inline
   style="color:..." op elke pagina door dezelfde herbruikbare classes. ---- */
.stat-blauw { color: var(--dash-blauw); }
.stat-amber { color: var(--dash-amber); }
.stat-rood { color: var(--dash-red); }
.stat-grijs { color: var(--dash-text-secondary); }

/* ---- Lege-toestand: uitnodigende kaart i.p.v. kale cursieve tekst ---- */
.leeg-toestand {
    background: var(--dash-card-bg);
    border: 1px dashed var(--dash-card-border);
    border-radius: 12px;
    padding: 40px 32px;
    text-align: center;
}

.leeg-toestand-icoon {
    width: 40px;
    height: 40px;
    margin: 0 auto 14px;
    color: var(--dash-text-secondary);
}

.leeg-toestand-tekst {
    color: var(--dash-text-secondary);
    font-size: 13.5px;
    margin: 0 0 18px;
}

/* ---- Laad-toestand: zachte pulse i.p.v. kale "Laden..."-tekst ---- */
.laden-toestand {
    color: var(--dash-text-secondary);
    font-size: 13.5px;
    animation: laden-pulse 1.4s ease-in-out infinite;
}

@keyframes laden-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* ---- Verwijder-bevestiging: nette waarschuwingskaart i.p.v. losse inline stijlen ---- */
.verwijder-waarschuwing {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(181, 82, 74, 0.08);
    border: 1px solid var(--dash-red);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 10px;
}

.verwijder-waarschuwing-tekst {
    color: var(--dash-red);
    font-size: 13px;
    flex: 1;
    min-width: 200px;
}

.verwijder-knop-outline {
    color: var(--dash-red);
}

.verwijder-knop-outline:hover {
    background: rgba(181, 82, 74, 0.12);
}

/* ---- Selects iets meer als bewust ontworpen element i.p.v. kale browser-default.
   Het pijltje zit in een data-URI en kan dus geen CSS-variabele gebruiken - vandaar
   een losse override met een donkere pijl-kleur voor het lichte thema. ---- */
select.type-invoer {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237d8a85' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}

.thema-licht select.type-invoer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c6863' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.foutmelding-tekst {
    color: var(--dash-red);
    font-size: 12.5px;
}

.succes-tekst {
    color: var(--dash-green);
    font-size: 12.5px;
}

.waarschuwing-lijst {
    color: var(--dash-red);
    font-size: 13px;
    margin-bottom: 8px;
}

/* ---- Grafieken op een telefoon ---------------------------------------------
   De grafieken zijn SVG met een vaste viewBox en preserveAspectRatio="none": de
   hele tekening schaalt mee met de breedte van de kaart. Op een scherm van 375px
   betekent dat een grafiek van ~310px breed en ~100px hoog, met aslabels van drie
   pixels - je ziet de vorm nog wel, maar je kunt niets meer lezen.

   Daarom houdt de grafiek op een smal scherm zijn eigen minimumbreedte en schuift
   hij horizontaal binnen de kaart. De labels krijgen tegelijk een grotere maat in
   viewBox-eenheden, zodat ze na het verkleinen alsnog op ~9px uitkomen. Niet te
   groot: de y-labels moeten links van de as blijven passen.
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .grafiek-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        /* Ruimte voor de schuifbalk, zodat die niet over de x-as-labels valt. */
        padding-bottom: 4px;

        /* Een y-label als "€105.000" is bij deze lettergrootte breder dan de ruimte
           links van de as en zou tegen de rand van de viewBox worden afgekapt. Deze
           marge geeft het die ruimte; de negatieve marge houdt de grafiek zelf op
           dezelfde lijn als de rest van de kaart. */
        padding-left: 10px;
        margin-left: -10px;
    }

    /* Tekst die buiten de viewBox valt mag in de marge hierboven staan. */
    .grafiek-scroll svg {
        overflow: visible;
    }

    .grafiek-scroll .grafiek-svg {
        min-width: 640px;
    }

    .grafiek-scroll .verloop-svg {
        min-width: 620px;
    }

    /* De Sankey heeft drie kolommen met tekst naast elkaar en heeft dus het
       meeste ruimte nodig van de drie. */
    .grafiek-scroll .sankey-svg {
        min-width: 780px;
    }

    .grafiek-scroll .grafiek-svg text,
    .grafiek-scroll .verloop-svg text {
        font-size: 14px;
    }

    /* De Sankey zet zijn labels rechts van de knopen; te groot en ze lopen tegen
       de rand van de viewBox aan en worden afgekapt. */
    .grafiek-scroll .sankey-svg text {
        font-size: 12.5px;
    }
}

/* ---- Kop van een hoofdscherm ------------------------------------------------
   Eén groot getal links (waar kijk je naar), één tweede getal rechts (hoe staat
   het ervoor), en onder allebei een regel context. Acht even zware getallen naast
   elkaar dwongen je alles te lezen voordat je wist hoe je ervoor stond.

   Wordt gebruikt door Overzicht en Projecten, dus dit staat hier en niet in de
   scoped CSS van één pagina.
   ---------------------------------------------------------------------------- */
.kop-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.kop-hero-hoofdgetal {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

.kop-hero-neven {
    text-align: right;
}

.kop-hero-nevengetal {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dash-green);
}

.kop-hero-regel {
    font-size: 12.5px;
    color: var(--dash-text-secondary);
    margin-top: 6px;
}

@media (max-width: 640px) {
    .kop-hero {
        gap: 14px;
    }

    /* Onder elkaar rechts uitlijnen leest als een losse kolom; links houdt het één blok. */
    .kop-hero-neven {
        text-align: left;
    }

    .kop-hero-hoofdgetal {
        font-size: 28px;
    }
}

/* ---- Bedrag dat tegelijk de verberg-schakelaar is (zie PrivacyBedragKnop) ---- */
.privacy-bedrag-knop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.privacy-oog {
    display: inline-flex;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--dash-text-secondary);
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.privacy-oog svg {
    width: 100%;
    height: 100%;
}

/* Staat het verbergen aan, dan is het oogje geen aanbod meer maar een melding. */
.privacy-oog.actief,
.privacy-bedrag-knop:hover .privacy-oog {
    opacity: 1;
}

/* De voortgangsblokken onder een kop: op Overzicht voor de hele portefeuille,
   in de projectenlijst voor één project. */
.kop-blokken {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .kop-blokken {
        grid-template-columns: 1fr;
    }
}

/* ---- De koppelsleutel voor de browserextensie: één keer te zien, dus hij mag
   opvallen en moet in zijn geheel te selecteren zijn. ---- */
.sleutel-doos {
    background: var(--dash-hover-bg);
    border: 1px solid var(--dash-amber);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0;
}

.sleutel-waarde {
    display: block;
    margin-top: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--dash-text-primary);
    word-break: break-all;
    user-select: all;
}