*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--kleur-primair: #1a3f6f;--kleur-primair-licht: #2a5fa0;--kleur-accent: #e8891a;--kleur-succes: #16a34a;--kleur-waarschuwing: #d97706;--kleur-fout: #dc2626;--kleur-info: #0284c7;--kleur-achtergrond: #f1f5f9;--kleur-kaart: #ffffff;--kleur-rand: #e2e8f0;--kleur-tekst: #1e293b;--kleur-tekst-licht: #64748b;--kleur-tekst-dimmer: #94a3b8;--nav-breedte: 220px;--schaduw: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--schaduw-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--schaduw-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius: 6px;--radius-lg: 10px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--kleur-tekst);background:var(--kleur-achtergrond);min-height:100vh}#app{display:flex;min-height:100vh}#nav{width:var(--nav-breedte);background:var(--kleur-primair);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto}.nav-brand{display:flex;align-items:center;gap:10px;padding:20px 16px;border-bottom:1px solid rgba(255,255,255,.15);background:#0003}.nav-logo{font-size:20px}.nav-title{font-weight:700;font-size:15px;letter-spacing:.3px}.nav-menu{list-style:none;padding:12px 0;flex:1}.nav-menu li{margin:2px 8px}.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;color:#fffc;text-decoration:none;border-radius:var(--radius);font-size:13.5px;transition:all .15s;font-weight:500}.nav-icoon{flex-shrink:0;opacity:.85}.nav-link:hover{background:#ffffff1f;color:#fff}.nav-link.actief{background:#fff3;color:#fff}#main-content{margin-left:var(--nav-breedte);flex:1;padding:0;min-height:100vh;position:relative;transition:margin-left .15s}#app.login-modus #main-content{margin-left:0}#page-content{padding:24px}.pagina-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px}.pagina-titel{font-size:22px;font-weight:700;color:var(--kleur-tekst)}.pagina-subtitel{font-size:13px;color:var(--kleur-tekst-licht);margin-top:2px}.kaart{background:var(--kleur-kaart);border-radius:var(--radius-lg);box-shadow:var(--schaduw);margin-bottom:16px}.kaart-header{padding:16px 20px;border-bottom:1px solid var(--kleur-rand);display:flex;justify-content:space-between;align-items:center}.kaart-titel{font-size:15px;font-weight:600}.kaart-inhoud{padding:20px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat-kaart{background:var(--kleur-kaart);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--schaduw);display:flex;flex-direction:column;gap:6px}.stat-kaart-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kleur-tekst-licht)}.stat-kaart-waarde{font-size:26px;font-weight:700;color:var(--kleur-tekst)}.stat-kaart-sub{font-size:12px;color:var(--kleur-tekst-licht)}.stat-kaart.rood .stat-kaart-waarde{color:var(--kleur-fout)}.stat-kaart.groen .stat-kaart-waarde{color:var(--kleur-succes)}.stat-kaart.oranje .stat-kaart-waarde{color:var(--kleur-waarschuwing)}.stat-kaart.blauw .stat-kaart-waarde{color:var(--kleur-primair)}.knop{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--radius);font-size:13.5px;font-weight:500;cursor:pointer;transition:all .15s;text-decoration:none;white-space:nowrap}.knop:hover{filter:brightness(.92)}.knop:active{transform:scale(.98)}.knop:disabled{opacity:.5;cursor:not-allowed}.knop-primair{background:var(--kleur-primair);color:#fff}.knop-accent{background:var(--kleur-accent);color:#fff}.knop-succes{background:var(--kleur-succes);color:#fff}.knop-gevaar{background:var(--kleur-fout);color:#fff}.knop-licht{background:var(--kleur-rand);color:var(--kleur-tekst)}.knop-ghost{background:transparent;color:var(--kleur-primair);border:1px solid var(--kleur-primair)}.knop-sm{padding:5px 10px;font-size:12px}.knop-xs{padding:3px 8px;font-size:11px}.knop-lg{padding:10px 22px;font-size:15px}.formulier-rij{margin-bottom:16px}.formulier-rij-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.formulier-rij-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}.label{display:block;font-size:12.5px;font-weight:600;color:var(--kleur-tekst);margin-bottom:5px}.label .verplicht{color:var(--kleur-fout);margin-left:2px}.invoer,.selecteer,.textarea{width:100%;padding:8px 12px;border:1px solid var(--kleur-rand);border-radius:var(--radius);font-size:13.5px;color:var(--kleur-tekst);background:#fff;transition:border-color .15s;font-family:inherit}.invoer:focus,.selecteer:focus,.textarea:focus{outline:none;border-color:var(--kleur-primair);box-shadow:0 0 0 3px #1a3f6f1a}.invoer.fout,.selecteer.fout,.textarea.fout{border-color:var(--kleur-fout)}.invoer.readonly{background:var(--kleur-achtergrond);cursor:default}.textarea{resize:vertical;min-height:80px}.formulier-fout{color:var(--kleur-fout);font-size:12px;margin-top:4px}.formulier-hulp{color:var(--kleur-tekst-licht);font-size:12px;margin-top:4px}.tabel-container{overflow-x:auto}table.tabel{width:100%;border-collapse:collapse}table.tabel thead tr{background:var(--kleur-achtergrond);border-bottom:2px solid var(--kleur-rand)}table.tabel thead th{padding:10px 14px;text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--kleur-tekst-licht);cursor:default;-webkit-user-select:none;user-select:none;white-space:nowrap}table.tabel thead th.sorteerbaar{cursor:pointer}table.tabel thead th.sorteerbaar:hover{color:var(--kleur-tekst)}table.tabel thead th.kolom-acties{cursor:default}table.tabel thead th.sorteer-asc,table.tabel thead th.sorteer-desc{color:var(--kleur-primair)}table.tabel thead th.sorteer-asc:after{content:" ↑"}table.tabel thead th.sorteer-desc:after{content:" ↓"}table.tabel thead tr.filter-rij{background:var(--kleur-achtergrond);border-bottom:1px solid var(--kleur-rand)}table.tabel thead th.filter-cel{padding:4px 6px}.filter-invoer{width:100%;padding:3px 6px;font-size:12px;border:1px solid var(--kleur-rand);border-radius:4px;background:#fff;color:var(--kleur-tekst);box-sizing:border-box;outline:none;transition:border-color .15s;font-weight:400;text-transform:none;letter-spacing:0}.filter-invoer:focus{border-color:var(--kleur-primair)}.filter-invoer.kolom-bedrag{text-align:right}table.tabel tbody tr{border-bottom:1px solid var(--kleur-rand)}table.tabel tbody tr:hover{background:#f8fafc}table.tabel td{padding:11px 14px;font-size:13.5px;color:var(--kleur-tekst)}table.tabel .kolom-acties{text-align:right;white-space:nowrap}table.tabel .kolom-bedrag{text-align:right;font-variant-numeric:tabular-nums}table.tabel .kolom-datum{white-space:nowrap}.tabel-leeg{text-align:center;padding:40px 20px;color:var(--kleur-tekst-licht);font-style:italic}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}.badge-concept{background:#f1f5f9;color:#475569}.badge-verzonden{background:#dbeafe;color:#1d4ed8}.badge-betaald{background:#dcfce7;color:#15803d}.badge-vervallen{background:#fee2e2;color:#b91c1c}.badge-actief{background:#dcfce7;color:#15803d}.badge-inactief{background:#f1f5f9;color:#64748b}.badge-niet_gefactureerd{background:#fef3c7;color:#92400e}.badge-gefactureerd{background:#dcfce7;color:#15803d}.badge-contract{background:#ede9fe;color:#6d28d9}.badge-abonnement{background:#dbeafe;color:#1d4ed8}.badge-licentie{background:#e0f2fe;color:#0369a1}.zoekbalk-container{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.zoekbalk{padding:8px 12px;border:1px solid var(--kleur-rand);border-radius:var(--radius);font-size:13.5px;min-width:200px}.zoekbalk:focus{outline:none;border-color:var(--kleur-primair)}.pagina-tab{padding:12px 20px;border:none;background:transparent;border-bottom:2px solid transparent;font-size:14px;font-weight:500;cursor:pointer;color:var(--kleur-tekst-licht);transition:all .15s;margin-bottom:-1px}.pagina-tab.actief{color:var(--kleur-primair);border-bottom-color:var(--kleur-primair)}.pagina-tab:hover:not(.actief){color:var(--kleur-tekst)}.filter-tabs{display:flex;gap:4px;background:var(--kleur-achtergrond);padding:4px;border-radius:var(--radius);margin-bottom:16px}.filter-tab{padding:6px 14px;border:none;background:transparent;border-radius:4px;font-size:13px;cursor:pointer;color:var(--kleur-tekst-licht);transition:all .15s}.filter-tab.actief{background:#fff;color:var(--kleur-primair);font-weight:600;box-shadow:var(--schaduw)}.filter-tab:hover:not(.actief){color:var(--kleur-tekst)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}.modal-overlay.hidden{display:none}.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--schaduw-lg);width:100%;max-width:600px;animation:modalIn .2s ease}.modal-lg{max-width:900px}.modal-sm{max-width:440px}@keyframes modalIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--kleur-rand)}.modal-titel{font-size:16px;font-weight:700}.modal-sluiten{background:none;border:none;font-size:20px;cursor:pointer;color:var(--kleur-tekst-licht);padding:4px;line-height:1}.modal-sluiten:hover{color:var(--kleur-tekst)}.modal-inhoud{padding:24px}.modal-voettekst{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--kleur-rand);background:var(--kleur-achtergrond);border-radius:0 0 var(--radius-lg) var(--radius-lg)}#notification-container{position:fixed;top:20px;right:20px;z-index:500;display:flex;flex-direction:column;gap:8px;max-width:380px}.notificatie{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius);box-shadow:var(--schaduw-md);animation:notificatieIn .25s ease;background:#fff;border-left:4px solid}@keyframes notificatieIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.notificatie-succes{border-color:var(--kleur-succes)}.notificatie-fout{border-color:var(--kleur-fout)}.notificatie-waarschuwing{border-color:var(--kleur-waarschuwing)}.notificatie-info{border-color:var(--kleur-info)}.notificatie-icoon{font-size:16px;flex-shrink:0;margin-top:1px}.notificatie-tekst{font-size:13.5px;color:var(--kleur-tekst);flex:1}.notificatie-sluiten{background:none;border:none;cursor:pointer;font-size:16px;color:var(--kleur-tekst-licht);padding:0;line-height:1}.spinner-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000040;z-index:400;display:flex;align-items:center;justify-content:center}.spinner-overlay.hidden{display:none}.spinner{width:44px;height:44px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:draaien .8s linear infinite}@keyframes draaien{to{transform:rotate(360deg)}}.tabbladen{display:flex;border-bottom:2px solid var(--kleur-rand);margin-bottom:20px;gap:2px}.tabblad{padding:10px 18px;border:none;background:none;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--kleur-tekst-licht);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}.tabblad:hover{color:var(--kleur-tekst)}.tabblad.actief{color:var(--kleur-primair);border-bottom-color:var(--kleur-primair)}.factuur-regels-container{border:1px solid var(--kleur-rand);border-radius:var(--radius);overflow:hidden}.factuur-regel-rij{display:grid;grid-template-columns:120px 1fr 90px 90px 100px 40px;gap:8px;padding:8px 12px;align-items:center;border-bottom:1px solid var(--kleur-rand)}.factuur-regel-rij:last-child{border-bottom:none}.factuur-regel-rij.header{background:var(--kleur-achtergrond);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--kleur-tekst-licht)}.totalen-samenvatting{background:var(--kleur-achtergrond);border-radius:var(--radius);padding:16px 20px;margin-top:16px}.totalen-rij{display:flex;justify-content:space-between;padding:4px 0;font-size:13.5px}.totalen-rij.subtotaal{color:var(--kleur-tekst-licht)}.totalen-rij.totaal{font-weight:700;font-size:15px;border-top:2px solid var(--kleur-rand);margin-top:6px;padding-top:8px}.leeg-staat{text-align:center;padding:60px 20px;color:var(--kleur-tekst-licht)}.leeg-staat-icoon{font-size:40px;margin-bottom:12px}.leeg-staat-tekst{font-size:15px;margin-bottom:6px;color:var(--kleur-tekst)}.leeg-staat-subtekst{font-size:13px}.detail-sectie{margin-bottom:24px}.detail-sectie-titel{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--kleur-tekst-licht);margin-bottom:10px}.detail-rij{display:flex;padding:6px 0;border-bottom:1px solid var(--kleur-rand);font-size:13.5px}.detail-rij:last-child{border-bottom:none}.detail-label{width:160px;flex-shrink:0;color:var(--kleur-tekst-licht);font-weight:500}.detail-waarde{flex:1;color:var(--kleur-tekst)}.uitklapbaar-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;cursor:pointer;border-bottom:1px solid var(--kleur-rand);-webkit-user-select:none;user-select:none}.uitklapbaar-header:hover{background:var(--kleur-achtergrond)}.uitklapbaar-pijl{transition:transform .2s}.uitklapbaar-header.open .uitklapbaar-pijl{transform:rotate(180deg)}.uitklapbaar-inhoud{display:none;padding:16px 20px}.uitklapbaar-inhoud.zichtbaar{display:block}.stappen{display:flex;align-items:center;margin-bottom:24px}.stap{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--kleur-tekst-licht)}.stap.actief{color:var(--kleur-primair);font-weight:600}.stap.klaar{color:var(--kleur-succes)}.stap-cirkel{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--kleur-rand);color:var(--kleur-tekst-licht)}.stap.actief .stap-cirkel{background:var(--kleur-primair);color:#fff}.stap.klaar .stap-cirkel{background:var(--kleur-succes);color:#fff}.stap-lijn{flex:1;height:2px;background:var(--kleur-rand);margin:0 8px}.stap-lijn.klaar{background:var(--kleur-succes)}.actiebalk{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--kleur-rand);padding:12px 24px;display:flex;justify-content:flex-end;gap:8px;z-index:50;box-shadow:0 -2px 8px #0000000f}.klant-kaart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.klant-kaart{background:#fff;border:1px solid var(--kleur-rand);border-radius:var(--radius-lg);padding:16px;cursor:pointer;transition:all .15s}.klant-kaart:hover{border-color:var(--kleur-primair);box-shadow:var(--schaduw-md)}.klant-kaart-naam{font-weight:700;font-size:14px;margin-bottom:4px}.klant-kaart-nummer{font-size:11.5px;color:var(--kleur-tekst-licht)}.klant-kaart-info{margin-top:8px;font-size:12.5px;color:var(--kleur-tekst-licht);line-height:1.6}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.tekst-rechts{text-align:right}.tekst-midden{text-align:center}.vet{font-weight:700}.subtekst{font-size:12px;color:var(--kleur-tekst-licht)}.flex{display:flex}.flex-items-center{align-items:center}.flex-gap-8{gap:8px}.flex-gap-12{gap:12px}.flex-1{flex:1}.cursor-pointer{cursor:pointer}.hidden{display:none!important}.bedrag{font-variant-numeric:tabular-nums;font-weight:600}.bedrag-klein{font-size:12px;color:var(--kleur-tekst-licht)}.afsluiting-klant-kaart{border:1px solid var(--kleur-rand);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px;background:#fff}.afsluiting-klant-header{display:flex;align-items:center;padding:14px 16px;gap:12px;background:#fff}.afsluiting-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--kleur-primair)}.afsluiting-klant-info{flex:1}.afsluiting-klant-naam{font-weight:700;font-size:14px}.afsluiting-klant-sub{font-size:12px;color:var(--kleur-tekst-licht)}.afsluiting-bedrag{font-weight:700;font-size:15px}.afsluiting-toggle{font-size:18px;cursor:pointer;color:var(--kleur-tekst-licht);padding:4px;transition:transform .2s}.afsluiting-toggle.open{transform:rotate(180deg)}.afsluiting-detail{padding:0 16px 16px;border-top:1px solid var(--kleur-rand);display:none}.afsluiting-detail.zichtbaar{display:block}.afsluiting-sectie-titel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--kleur-tekst-licht);padding:12px 0 6px}.instelling-sectie{margin-bottom:32px}.instelling-sectie-titel{font-size:16px;font-weight:700;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--kleur-rand)}.scrollbaar{overflow-y:auto}.login-wrapper{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:-24px;background:var(--kleur-achtergrond)}.login-card{background:var(--kleur-kaart);border-radius:var(--radius-lg);box-shadow:var(--schaduw-lg);padding:40px 36px;width:100%;max-width:380px}.login-header{text-align:center;margin-bottom:32px}.login-logo{font-size:40px;display:block;margin-bottom:12px}.login-titel{font-size:22px;font-weight:700;color:var(--kleur-primair);margin-bottom:4px}.login-subtitel{font-size:14px;color:var(--kleur-tekst-licht)}.login-form .form-groep{margin-bottom:16px}.login-form .form-label{display:block;font-size:13px;font-weight:600;color:var(--kleur-tekst);margin-bottom:6px}.login-form .form-invoer{width:100%;padding:10px 12px;border:1px solid var(--kleur-rand);border-radius:var(--radius);font-size:14px;color:var(--kleur-tekst);background:#fff;transition:border-color .15s}.login-form .form-invoer:focus{outline:none;border-color:var(--kleur-primair-licht);box-shadow:0 0 0 3px #2a5fa01f}.login-fout{background:#fef2f2;color:var(--kleur-fout);border:1px solid #fecaca;border-radius:var(--radius);padding:10px 12px;font-size:13px;margin-bottom:16px}.knop-breed{width:100%;justify-content:center;padding:11px;font-size:14px}.verborgen{display:none!important}.nav-voet{padding:12px 8px;border-top:1px solid rgba(255,255,255,.15);margin-top:auto}.nav-uitloggen{display:block;width:100%;padding:9px 12px;background:#ffffff14;color:#ffffffb3;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:all .15s}.nav-uitloggen:hover{background:#ffffff26;color:#fff}.nav-help-knop{display:block;width:100%;padding:9px 12px;background:#ffffff0d;color:#ffffff8c;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:all .15s;margin-bottom:6px}.nav-help-knop:hover{background:#ffffff1f;color:#ffffffd9}.help-inhoud{display:flex;flex-direction:column;gap:0}.help-intro{margin:0 0 20px;font-size:14px;color:var(--kleur-tekst);line-height:1.6;padding-bottom:16px;border-bottom:1px solid var(--kleur-rand)}.help-sectie{padding:14px 0;border-bottom:1px solid var(--kleur-rand)}.help-sectie:last-child{border-bottom:none;padding-bottom:0}.help-sectie-titel{font-size:13px;font-weight:700;color:var(--kleur-tekst);margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}.help-lijst{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}.help-lijst li{font-size:13px;color:var(--kleur-tekst);line-height:1.5}.help-lijst code{background:var(--kleur-achtergrond);border:1px solid var(--kleur-rand);border-radius:3px;padding:0 4px;font-size:12px}.taal-kiezer{display:flex;gap:4px;margin-bottom:8px}.taal-knop{flex:1;padding:5px 8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);color:#ffffffb3;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;letter-spacing:.5px}.taal-knop:hover{background:#fff3;color:#fff}.taal-knop.actief{background:#ffffff40;border-color:#fff6;color:#fff}.klant-zoeker{position:relative}.klant-zoeker-lijst{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--kleur-rand);border-radius:var(--radius);box-shadow:var(--schaduw-md);max-height:220px;overflow-y:auto;z-index:1000;margin-top:2px}.klant-zoeker-optie{padding:8px 12px;cursor:pointer;font-size:14px;color:var(--kleur-tekst);border-bottom:1px solid var(--kleur-rand)}.klant-zoeker-optie:last-child{border-bottom:none}.klant-zoeker-optie:hover,.klant-zoeker-optie.actief{background:var(--kleur-achtergrond)}.klant-zoeker-leeg{padding:10px 12px;font-size:14px;color:var(--kleur-tekst-licht)}