:root{
  --bg:#f4f7fb;
  --surface:#ffffff;

  --text:#0f172a;
  --muted:#64748b;

  --line:#e5e7eb;

  --blue:#2563eb;
  --blue-hover:#1d4ed8;

  --btn-h:44px;
}

/* =========================
   BASE
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{max-width:1150px;margin:0 auto;padding:22px}

/* =========================
   GLOBAL LINK RESET (NO UNDERLINES EVER)
   ========================= */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus{
  color:inherit;
  text-decoration:none !important;
  border-bottom:none !important;
  box-shadow:none !important;
}
a *, a:hover *, a:focus *{
  text-decoration:none !important;
  border-bottom:none !important;
}
a:focus-visible{outline:none !important}

/* =========================
   HEADER / NAV
   ========================= */
.header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.2px;
}
.badge{
  font-size:12px;
  color:var(--muted);
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:0;
  background:#fff;
}
.navlinks{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.navlinks a{
  padding:8px 14px;
  color:var(--muted);
  border:1px solid transparent;
  border-radius:0;
}
.navlinks a.active{
  color:var(--text);
  font-weight:800;
  background:#eef2ff;
  border-color:#dbeafe;
}
.navright{display:flex;align-items:center;gap:10px}

/* =========================
   CARDS / TYPO
   ========================= */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:22px;
  margin-bottom:18px;
}
.card h1,.card h2,.card h3{margin:0 0 12px}
.card h1{font-size:24px;font-weight:900}
.card h2{font-size:18px;font-weight:900}
.card h3{font-size:14px;font-weight:900;color:var(--muted)}
.muted{color:var(--muted)}
.smallnote{font-size:12px;color:var(--muted)}
.hr{height:1px;background:var(--line);margin:16px 0}

/* =========================
   FORMS
   ========================= */
label{
  display:block;
  margin:0 0 8px;
  font-size:13px;
  color:var(--muted);
  font-weight:800;
}
input,select,textarea{
  width:100%;
  padding:12px;
  border:1px solid var(--line);
  border-radius:0;
  background:#fff;
  color:var(--text);
  outline:none;
}
input::placeholder, textarea::placeholder{color:#94a3b8}
textarea{min-height:120px;resize:vertical}
.form{display:grid;gap:14px}
.row2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.row3{display:grid;gap:14px;grid-template-columns:1fr 1fr 1fr}
@media (max-width: 860px){ .row3{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .row2,.row3{grid-template-columns:1fr} }

/* =========================
   DASHBOARD TOPBAR + FILTERS
   ========================= */
.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.searchbar{flex:1;min-width:280px}

.filters{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
  background:#fff;
}
.filters summary{
  padding:14px 16px;
  cursor:pointer;
  user-select:none;
  font-weight:900;
  color:var(--text);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.filters summary::-webkit-details-marker{display:none}
.filters summary:after{
  content:"▾";
  color:var(--muted);
  font-weight:900;
}
.filters[open] summary:after{content:"▴"}
.filters .inner{
  padding:16px;
  border-top:1px solid var(--line);
  background:#f8fafc;
}

/* =========================
   GRID / TILES
   ========================= */
.grid{
  margin-top:18px;
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width: 900px){ .grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 600px){ .grid{grid-template-columns:1fr;} }

.tile{
  background:#fff;
  border:1px solid var(--line);
  border-radius:0;
  padding:22px;

  min-height:300px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  gap:10px;
  text-align:center;
}
.tile .title{
  font-weight:900;
  font-size:22px;
  margin-top:4px;
}
.tile .desc{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  max-width:340px;
  margin:0 auto;
  flex-grow:1;
}
.tile .actions{
  margin-top:auto;
  display:flex;
  justify-content:center;
}

/* =========================
   TABLES
   ========================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
  background:#fff;
}
.table th,.table td{
  padding:14px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  vertical-align:top;
}
.table th{
  background:#f8fafc;
  color:var(--muted);
  font-weight:900;
  text-align:left;
}
.table tr:last-child td{border-bottom:none}

/* =========================
   FLASH
   ========================= */
.flash{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:0;
  background:#fff;
  margin:16px 0;
}
.flash.ok{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}
.flash.err{
  border-color:#fecaca;
  background:#fef2f2;
  color:#7f1d1d;
}

/* =========================
   KV BLOCKS (metadata)
   ========================= */
.kv{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width: 900px){ .kv{grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 600px){ .kv{grid-template-columns:1fr;} }
.kv .item{
  border:1px solid var(--line);
  border-radius:0;
  padding:14px;
  background:#fff;
}
.kv .item .k{
  font-size:12px;
  color:var(--muted);
  font-weight:900;
  margin-bottom:6px;
}
.kv .item .v{
  font-size:14px;
  font-weight:900;
}

/* =========================
   UNIVERSAL BUTTON SYSTEM (HARD OVERRIDE)
   - alles blauw
   - geen ronde hoeken
   - allemaal even hoog
   ========================= */
button,
.btn,
a.btn,
input[type=submit],
input[type=button]{
  height:var(--btn-h) !important;
  min-height:var(--btn-h) !important;
  line-height:var(--btn-h) !important;

  padding:0 22px !important;

  background:var(--blue) !important;
  color:#fff !important;

  border:none !important;
  border-radius:0 !important;

  font-weight:900 !important;
  font-size:14px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;
  box-shadow:none !important;

  text-decoration:none !important;
}

button:hover,
.btn:hover,
a.btn:hover,
input[type=submit]:hover,
input[type=button]:hover{
  background:var(--blue-hover) !important;
}

/* kill ALL variants (green/warn/danger/small etc) */
.btn.green,
.btn.warn,
.btn.danger,
.btn.small{
  height:var(--btn-h) !important;
  min-height:var(--btn-h) !important;
  line-height:var(--btn-h) !important;

  padding:0 22px !important;

  background:var(--blue) !important;
  color:#fff !important;

  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* =========================
   PAGINATION (LIGHT STYLE)
   Gebruik in HTML: class="pager" i.p.v. class="btn"
   ========================= */
.pager{
  height:auto !important;
  min-height:auto !important;
  line-height:normal !important;

  padding:6px 12px !important;

  background:#fff !important;
  color:var(--text) !important;

  border:1px solid var(--line) !important;
  border-radius:0 !important;

  font-weight:700 !important;
  font-size:13px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;
  box-shadow:none !important;

  text-decoration:none !important;
}

.pager:hover{
  background:#f1f5f9 !important;
}

/* =========================
   FOOTER
   ========================= */
.footer{
  border-top:1px solid var(--line);
  margin-top:30px;
  padding:20px 0;
  color:var(--muted);
  font-size:13px;
  background:rgba(255,255,255,.65);
}