*{box-sizing:border-box}body{font:15px system-ui;margin:0;background:#f4f6f9;color:#263649}header{padding:16px 24px;background:#18334c;color:white;display:flex;justify-content:space-between;gap:16px}header a{color:white;margin-left:14px;text-decoration:none}main{max-width:1080px;margin:24px auto;padding:0 15px}.card{background:white;padding:16px;border:1px solid #dce3eb;border-radius:3px;margin-bottom:16px}h1{font-size:25px}h2{font-size:19px}input,button{font:inherit;padding:9px;border:1px solid #bac7d3;border-radius:3px}label{display:block;margin:12px 0 4px}button{background:#21618e;color:white;border:0;cursor:pointer}table{width:100%;border-collapse:collapse}td,th{padding:10px;border-bottom:1px solid #e4e8ee;text-align:left}th{font-weight:650}.scroll{overflow-x:auto}code{overflow-wrap:anywhere}@media(max-width:650px){header{display:block}header a{display:inline-block;margin:8px 10px 0 0}}

/* Tikio globale componenten: geen pagina-specifieke CSS */
:root{--tk-border:#d9e0e7;--tk-primary:#1c5e90;--tk-bg:#f3f6f9}
main{max-width:1280px} .card{padding:10px;border-radius:3px} .toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0;flex-wrap:wrap}.toolbar input{min-width:260px;flex:1;max-width:450px}table th{font-weight:650}table td,table th{padding:9px 10px}table tr[hidden]{display:none}.scroll{overflow:auto}.muted{color:#6b7785}.error{color:#a32020}
.modal{border:1px solid var(--tk-border);border-radius:3px;padding:18px;width:min(680px,calc(100% - 24px));max-height:90vh;overflow:auto;background:#fff;color:#243449}.modal::backdrop{background:rgba(10,20,32,.55)}.modal-head,.modal-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}.modal-head h2{margin:0}.modal-actions{justify-content:flex-end;margin-top:20px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.form-grid input,.form-grid select{width:100%}.secondary{background:#e9edf2;color:#243449;border:1px solid #cbd5df}button{cursor:pointer}
@media(max-width:650px){.form-grid{grid-template-columns:1fr}.toolbar input{min-width:0;max-width:none}.modal{padding:12px}}

/* Tikio v0.5: gedeelde lijst-, filter- en popupcomponenten */
select,input[type=date],input[type=month],input[type=search]{font:inherit;padding:9px;border:1px solid #bac7d3;border-radius:3px;background:white;color:inherit}
.button{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:3px;text-decoration:none;background:#21618e;color:#fff;border:1px solid transparent}
.button.secondary{background:#e9edf2;color:#243449;border-color:#cbd5df}
.filterbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.filterbar>div{flex:1 1 155px}.filterbar label{margin:0 0 5px}.filterbar input,.filterbar select{width:100%}.filterbar button,.filterbar .button{margin-bottom:0;white-space:nowrap}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px}header nav a{margin:0}.modal input,.modal select{width:100%}
@media(max-width:650px){.filterbar>div{flex:1 1 100%}.filterbar button,.filterbar .button{flex:1}}

/* Tikio v0.5.1 — globale uniforme formuliervelden */
:root{--tk-control-height:38px}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select,
button,
.button {
  box-sizing:border-box;
  min-height:var(--tk-control-height);
  height:var(--tk-control-height);
  padding:7px 10px;
  border-radius:3px;
  font:inherit;
  line-height:22px;
  vertical-align:middle;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select{border:1px solid #bac7d3;max-width:100%;background-color:#fff;color:#263649}
select{padding-right:28px}
textarea{box-sizing:border-box;min-height:90px;padding:9px 10px;border:1px solid #bac7d3;border-radius:3px;font:inherit;width:100%}
input[type="file"]{font:inherit;max-width:100%}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.filterbar{align-items:flex-end}
.filterbar>div{min-width:0}
.filterbar input,.filterbar select{width:100%;margin:0}
.filterbar button,.filterbar .button{flex:0 0 auto}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,.button:focus-visible{outline:2px solid #21618e;outline-offset:2px}
@media(max-width:650px){.filterbar button,.filterbar .button{flex:1}}