body {
font-family: sans-serif;
margin: 0;
display: flex;
flex-direction: column;
}
nav {
/* width: 200px; */
background: #f0f0f0;
/* padding: 1rem; */
/* min-height: 100vh; */
display: flex;
}
nav a {
display: block;
padding: .4rem 0;
color: #333;
text-decoration: none;
flex: 1;
text-align: center;
}
nav a.actief {
font-weight: bold;
color: #06c;
}
nav .submenu a {
padding-left: 1rem;
font-size: .9rem;
}
main {
flex: 1;
padding: 1.5rem;
}
h2 {
	margin: 0px;
	display: inline;
}
ul {
	padding-left: 20px;
}

.toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%) translateY(1rem);
	background: var(--ink);
	color: #fff;
	padding: .7rem 1.1rem;
	border-radius: 8px;
	box-shadow: 0 6px 20px -6px rgba(0,0,0,.4);
	opacity: 0;
	transition: opacity .2s, transform .2s;
	pointer-events: none;   /* never intercepts clicks */
	z-index: 1000;
	text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

:root {
  --bg:        #ffffff;
  --card:      #ffffff;
  --ink:       #1a1a1a;
  --muted:     #6b6b6b;
  --line:      #e0e0e0;
  --accent:    #9c4221;
  --accent-soft: #f5ede8;
}

button,
a.knop {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

button:hover,
a.knop:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

button:hover,
a.knop:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* primary action */
button.primair,
a.knop.primair {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.primair:hover,
a.knop.primair:hover {
  background: #80371a;
  border-color: #80371a;
}

/* destructive */
button.gevaar,
a.knop.gevaar {
  color: #c0392b;
  border-color: #c0392b;
}
button.gevaar:hover,
a.knop.gevaar:hover {
  background: #fdf0ef;
}

/* small — for inline row actions like × and ✎ */
button.klein,
a.knop.klein {
  padding: .2rem .5rem;
  font-size: .8rem;
}

/* ghost — no border, just text, for things like ← Terug */
button.ghost,
a.knop.ghost {
  border-color: transparent;
  background: transparent;
}
button.ghost:hover,
a.knop.ghost:hover {
  border-color: transparent;
  background: transparent;
  color: var(--accent);
}