*{box-sizing:border-box}body{margin:0;background:#f4f6f8;color:#20242b;font:15px system-ui,-apple-system,Segoe UI,sans-serif}header{background:#20242b;color:#fff;padding:16px 3%;display:flex;gap:30px;align-items:center;flex-wrap:wrap}.brand{font-size:23px;font-weight:800}.brand small{font-size:12px;color:#b9c1ca;font-weight:500;margin-left:8px}nav{display:flex;gap:5px;flex-wrap:wrap}nav a{color:#e9edf1;text-decoration:none;padding:8px;border-radius:7px}nav a:hover{background:#343b45}main{max-width:1500px;margin:25px auto;padding:0 20px}h1{margin:0 0 20px}h2{margin-top:0}.card{background:#fff;border:1px solid #dde2e7;border-radius:10px;padding:20px;box-shadow:0 2px 8px #00000008;margin-bottom:20px}.grid2{display:grid;grid-template-columns:minmax(320px,480px) 1fr;gap:20px}.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px}.kpis .card{display:flex;flex-direction:column;gap:8px}.kpis strong{font-size:24px}label{display:block;font-weight:600;margin:10px 0}input,select,textarea{width:100%;padding:10px;border:1px solid #c9d0d7;border-radius:6px;margin-top:5px;background:#fff}textarea{min-height:80px}button,.button{border:0;background:#1677c8;color:#fff;padding:10px 14px;border-radius:6px;text-decoration:none;display:inline-block;cursor:pointer;font-weight:600}.secondary{background:#59636f}.danger{background:#b83a3a}.small{padding:6px 8px;font-size:12px}.big{margin-top:15px;padding:13px 18px}.inline{display:inline}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:10px;border-bottom:1px solid #e5e8eb;vertical-align:top}th{background:#f7f8fa}.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 15px}.wide{grid-column:1/-1}.titlebar{display:flex;justify-content:space-between;align-items:center;gap:10px}.filters{display:flex;gap:10px;margin-bottom:20px}.filters select{width:auto;margin:0}.alert{padding:12px 15px;border-radius:7px;margin-bottom:15px;background:#dbeafe}.alert.danger{background:#fee2e2;color:#8b1d1d}.alert.success{background:#dcfce7;color:#166534}.badge{background:#e8edf2;border-radius:20px;padding:4px 8px;font-size:12px}.login{max-width:420px;margin:8vh auto}.muted{color:#6c7680}hr{border:0;border-top:1px solid #e5e8eb;margin:20px 0}@media(max-width:850px){.grid2{grid-template-columns:1fr}header{align-items:flex-start}nav{width:100%}main{padding:0 10px}.card{padding:14px}}
/* Artikelen en Klanten: formulier en overzicht onder elkaar */
.vertical-stack{display:grid!important;grid-template-columns:1fr!important;gap:24px!important}.vertical-stack>.card{width:100%;box-sizing:border-box}

/* Compacte invoerindeling Artikelen en Klanten */
.form-row{display:grid;gap:18px;align-items:end}
.form-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-row label{margin:0}
@media(max-width:900px){.form-row.cols-3,.form-row.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.form-row.cols-2,.form-row.cols-3,.form-row.cols-4{grid-template-columns:1fr}}

/* Nieuwe inkoop: vaste veldindeling */
.purchase-form{display:grid;gap:14px;margin-bottom:10px}
.purchase-row{display:grid;gap:15px;align-items:end}
.purchase-row label{margin:0}
.purchase-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.purchase-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.purchase-row-1{grid-template-columns:1fr}
@media(max-width:750px){.purchase-row-3,.purchase-row-2{grid-template-columns:1fr}}