/* ═══════════════════════════════════════
   OVERZICHT PAGINA
═══════════════════════════════════════ */
.cc-overzicht-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* ═══════════════════════════════════════
   AUTH PAGINA'S
═══════════════════════════════════════ */
body:has(.cc-auth-wrap) {
    background: linear-gradient(135deg, #1a4731 0%, #2d6a4f 50%, #3d8b68 100%);
    min-height: 100vh;
}

.cc-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.cc-auth-kaart {
    background: var(--cc-wit);
    border-radius: 20px;
    padding: 40px 44px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
}
@media (max-width: 480px) { .cc-auth-kaart { padding: 28px 20px; } }

.cc-auth-logo { font-size: 2.5rem; text-align: center; margin-bottom: 14px; line-height: 1; }

.cc-auth-titel {
    font-family: var(--cc-font-body);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cc-groen) !important;
    text-align: center;
    margin: 0 0 5px;
}

.cc-auth-subtitel { text-align: center; color: var(--cc-grijs); font-size: .88rem; margin: 0 0 24px; }

.cc-auth-form { display: flex; flex-direction: column; gap: 14px; }

.cc-auth-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .cc-auth-rij { grid-template-columns: 1fr; } }

.cc-auth-veld { display: flex; flex-direction: column; gap: 4px; }

.cc-auth-veld label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cc-tekst-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cc-auth-vergeten { font-weight: 400; color: var(--cc-grijs); font-size: .77rem; text-decoration: none; }
.cc-auth-vergeten:hover { color: var(--cc-groen); }

.cc-auth-veld input {
    padding: 10px 12px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    font-family: var(--cc-font-body);
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
    background: var(--cc-bg);
    color: var(--cc-tekst);
    width: 100%;
    box-sizing: border-box;
}
.cc-auth-veld input:focus { border-color: var(--cc-groen-licht); outline: none; box-shadow: 0 0 0 3px rgba(82,183,136,.12); background: var(--cc-wit); }

.cc-ww-wrap { position: relative; }
.cc-ww-wrap input { padding-right: 42px; }
.cc-ww-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: .95rem; padding: 4px; opacity: .5; transition: opacity .15s; }
.cc-ww-toggle:hover { opacity: 1; }

.cc-ww-meter { height: 3px; background: var(--cc-border); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.cc-ww-meter__balk { height: 100%; border-radius: 2px; width: 0%; transition: width .3s, background .3s; }

.cc-ww-eisen { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; }
.cc-ww-eisen li { font-size: .73rem; color: var(--cc-grijs); padding-left: 16px; position: relative; }
.cc-ww-eisen li::before { content: '✗'; position: absolute; left: 0; color: #fca5a5; font-size: .68rem; }
.cc-ww-eisen li.cc-eis-ok { color: #059669; }
.cc-ww-eisen li.cc-eis-ok::before { content: '✓'; color: #059669; }

.cc-auth-onthoud { display: flex; align-items: center; gap: 7px; font-size: .83rem; color: var(--cc-grijs); cursor: pointer; }

.cc-auth-btn { width: 100%; padding: 11px; background: var(--cc-groen); color: #fff; border: none; border-radius: var(--cc-radius-sm); font-family: var(--cc-font-body); font-size: .95rem; font-weight: 700; cursor: pointer; transition: background .15s, transform .12s; margin-top: 4px; }
.cc-auth-btn:hover { background: #1f5438; transform: translateY(-1px); }

.cc-auth-fout   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; border-radius: var(--cc-radius-sm); padding: 10px 14px; font-size: .86rem; font-weight: 500; margin-bottom: 14px; }
.cc-auth-succes { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; border-radius: var(--cc-radius-sm); padding: 10px 14px; font-size: .86rem; font-weight: 500; margin-bottom: 14px; }

.cc-auth-wissel { text-align: center; margin: 18px 0 0; font-size: .85rem; color: var(--cc-grijs); }
.cc-auth-wissel a { color: var(--cc-groen); font-weight: 600; text-decoration: none; }
.cc-auth-wissel a:hover { text-decoration: underline; }

.cc-auth-info{background:#eef8f2;border:1px solid #cfe8d6;color:#24543d;border-radius:var(--cc-radius-sm);padding:10px 14px;font-size:.86rem;font-weight:500;margin-bottom:14px}
.cc-auth-info small{display:block;margin-top:4px;color:#4b6b58;font-weight:400}
.cc-auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.cc-auth-btn--secondary{background:#fff;color:var(--cc-groen);border:1px solid var(--cc-border);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.cc-auth-btn--secondary:hover{background:#f7fbf8}


/* ═══════════════════════════════════════
   STATISTIEKEN
═══════════════════════════════════════ */
.cc-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.cc-stat-kaart {
    background: var(--cc-wit);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--cc-schaduw);
}
.cc-stat-kaart .getal { font-family: var(--cc-font-hoofd); font-size: 2.2rem; color: var(--cc-groen); line-height: 1; margin-bottom: 5px; }
.cc-stat-kaart .label { font-size: .72rem; color: var(--cc-grijs); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }