:root{--green:#14532d;--green2:#166534;--light:#f5f7f5;--line:#dfe5df;--text:#17201a;--muted:#68736b;--white:#fff}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--light);line-height:1.5}.wrap{width:min(960px,calc(100% - 32px));margin:auto}header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.nav{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-weight:800;color:var(--green);text-decoration:none;font-size:20px}.brand small{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}nav{display:flex;gap:18px}nav a,.section-head a{color:var(--green2);text-decoration:none;font-weight:700;font-size:14px}main{padding:34px 0 70px}.hero{padding:46px 0 32px;max-width:700px}.hero h1,.page-head h1{font-size:clamp(34px,7vw,58px);line-height:1.02;margin:8px 0 14px}.hero p,.page-head p{color:var(--muted);font-size:18px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--green2)}h2{margin-top:30px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin:14px 0;box-shadow:0 4px 18px rgba(0,0,0,.025)}.card>span,.card small{display:block;color:var(--muted)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:10px;padding:13px 18px;background:var(--green2);color:#fff;text-decoration:none;font:inherit;font-weight:800;cursor:pointer}.btn.secondary{background:#fff;color:var(--green2);border:1px solid var(--line)}.section-head,.row-card,.collecte-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.row-card{background:#fff;border:1px solid var(--line);padding:15px 18px;margin:8px 0;border-radius:12px;text-decoration:none;color:var(--text)}.row-card small{display:block;color:var(--muted)}.row-card b,.row-card>a{color:var(--green2);text-decoration:none}.page-head{margin-bottom:24px}.page-head h1{font-size:40px}.stack{display:grid;gap:14px}.collecte{margin:0}.collecte-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}.collecte-head>span{font-weight:800;color:var(--green2)}input,textarea{width:100%;margin-top:6px;padding:13px;border:1px solid #ccd5cd;border-radius:9px;background:#fff;font:inherit;font-size:16px}label{display:block;font-weight:700;margin:12px 0}label small{font-weight:400}.goal{font-size:18px;font-weight:800;max-width:500px}.grid2,.money-grid,.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.money-grid{grid-template-columns:repeat(4,1fr)}.subtotal{display:flex;justify-content:space-between;align-items:center;background:#edf7f0;border-radius:10px;padding:14px 16px;margin-top:18px}.subtotal strong{font-size:22px;color:var(--green)}.sticky-submit{position:sticky;bottom:12px}.sticky-submit .btn{width:100%;box-shadow:0 8px 30px rgba(20,83,45,.2)}dl{margin:0}dl div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}dl .sum{font-weight:800;font-size:18px;border:0}.grand{background:var(--green);color:#fff;border-radius:16px;padding:24px;display:flex;flex-direction:column;margin:16px 0}.grand strong{font-size:38px}.grand small{opacity:.8}.goal-form{display:grid;grid-template-columns:1fr 2fr 2fr auto;gap:12px;align-items:end}.goal-form label{margin:0}footer{padding:30px 0;color:var(--muted);font-size:13px}@media(max-width:700px){nav a:nth-child(1),nav a:nth-child(3){display:none}.wrap{width:min(100% - 22px,960px)}main{padding-top:22px}.hero{padding-top:25px}.grid2,.summary-grid{grid-template-columns:1fr 1fr}.money-grid{grid-template-columns:repeat(2,1fr)}.money-grid label:last-child{grid-column:span 2}.collecte-head{align-items:flex-start;flex-direction:column}.goal{max-width:none}.goal-form{grid-template-columns:1fr}.card{padding:17px}.grand strong{font-size:32px}}
.collecte-extra{border-style:dashed;background:#fbfdfb}.collecte-extra .collecte-head>div>span{display:block;font-weight:800;color:var(--green2)}.collecte-extra .collecte-head small{display:block;margin-top:3px;color:var(--muted)}.live-total{background:#fff;border:2px solid var(--green2);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column}.live-total span{font-weight:800}.live-total strong{font-size:34px;color:var(--green);line-height:1.2}.live-total small{color:var(--muted);margin-top:4px}.extra-summary{grid-column:1/-1}.muted{color:var(--muted)}
@media(max-width:700px){.live-total strong{font-size:30px}}

.notice{padding:14px 16px;border-radius:10px;margin:12px 0;font-weight:700}.notice.success{background:#e8f5ec;color:#14532d}.notice.error{background:#fff0f0;color:#8a1c1c}.import-card h2{margin-top:0}.import-card p{color:var(--muted)}.import-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.import-form input[type=file]{width:auto;flex:1;min-width:240px;margin:0}
@media(max-width:700px){.import-form{display:grid}.import-form input[type=file]{width:100%;min-width:0}}


/* Login en navigatie */
.logout-form{margin:0}.nav-logout{border:0;background:transparent;padding:0;color:var(--muted);font:inherit;font-weight:700;font-size:14px;cursor:pointer}.nav-secondary{color:var(--muted)!important}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--light)}.login-shell{width:min(920px,100%);display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}.login-intro h1{font-size:clamp(46px,8vw,72px);line-height:1;margin:8px 0 18px;color:var(--green)}.login-intro p{font-size:19px;color:var(--muted);max-width:560px}.login-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 12px 40px rgba(0,0,0,.06)}.login-card h2{margin:0 0 6px}.login-help{color:var(--muted);margin-top:0}.login-form .btn{width:100%;margin-top:8px}
@media(max-width:700px){.main-nav{gap:14px}.main-nav .nav-secondary{display:none}.main-nav a{display:inline!important}.nav-logout{font-size:13px}.brand{font-size:18px}.login-shell{grid-template-columns:1fr;gap:22px}.login-intro h1{font-size:46px}.login-intro p{font-size:17px}.login-card{padding:20px}.money-grid{grid-template-columns:repeat(2,1fr)}.money-grid label:last-child{grid-column:auto}}
/* ==========================================================
   COLLECTEDOELEN BEHEER
========================================================== */

.doelen-beheer {
    margin-top: 34px;
}

.doelen-beheer > h2 {
    margin-bottom: 14px;
}

.doelen-form {
    display: block;
    padding: 0;
    overflow: hidden;
}


/* DATUM */

.doelen-datum {
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfb;
}

.doelen-datum label {
    width: 220px;
    margin: 0;
}


/* COLLECTERIJ */

.doel-rij {
    display: grid;
    grid-template-columns: 170px 160px minmax(260px, 1fr);
    gap: 20px;
    align-items: end;

    padding: 22px 24px;

    border-bottom: 1px solid var(--line);
}

.doel-rij:last-of-type {
    border-bottom: 0;
}


/* KOP LINKS */

.doel-rij-kop {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: center;
}

.doel-nummer {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf7f0;
    color: var(--green);

    font-weight: 800;
}

.doel-rij-kop strong {
    display: block;
    font-size: 16px;
}

.doel-rij-kop small {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 500;
}


/* VELDEN */

.doel-rij label {
    margin: 0;
}

.doel-code input,
.doel-omschrijving input {
    margin-top: 6px;
}

.doel-code input {
    font-weight: 700;
}


/* OPTIONELE DERDE COLLECTE */

.doel-rij-optioneel {
    background: #fbfdfb;
}


/* OPSLAAN */

.doelen-form-actions {
    display: flex;
    justify-content: flex-end;

    padding: 18px 24px 22px;

    border-top: 1px solid var(--line);
    background: #fbfcfb;
}

.doelen-form-actions .btn {
    min-width: 150px;
}


/* ==========================================================
   MOBIEL
========================================================== */

@media (max-width: 700px) {

    .doelen-datum {
        padding: 18px;
    }

    .doelen-datum label {
        width: 100%;
    }

    .doel-rij {
        grid-template-columns: 1fr;
        gap: 14px;

        padding: 20px 18px;
    }

    .doel-rij-kop {
        margin-bottom: 2px;
    }

    .doel-code,
    .doel-omschrijving {
        width: 100%;
    }

    .doelen-form-actions {
        padding: 18px;
    }

    .doelen-form-actions .btn {
        width: 100%;
    }

}