:root {
  --blauw: #1f3a5f;
  --accent: #2f6fde;
  --achtergrond: #f4f6f9;
  --rand: #e1e5eb;
  --tekst: #1d2330;
  --grijs: #6b7280;
  --rood: #c0392b;
  --groen: #1e7d4f;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tekst); background: var(--achtergrond); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; }
code { background: #eef1f5; padding: .1em .35em; border-radius: 4px; font-size: .9em; word-break: break-all; }

.topbalk { display: flex; align-items: center; gap: 1.5rem; background: var(--blauw); color: #fff; padding: 0 1.5rem; height: 56px; flex-wrap: wrap; }
.topbalk .merk { font-weight: 700; letter-spacing: .02em; }
.topbalk nav { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.topbalk a, .topbalk .link { color: #d6e0ee; padding: .45rem .7rem; border-radius: 6px; }
.topbalk a:hover, .topbalk .link:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.topbalk a.actief { background: rgba(255,255,255,.16); color: #fff; }
.topbalk .account { display: flex; align-items: center; gap: .3rem; margin-left: auto; }

main { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.kaart { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.kaart.smal { max-width: 480px; }
main > .kaart.smal:first-child, main > .melding + .kaart.smal { margin: 3rem auto; }
.twee-kolommen { display: grid; grid-template-columns: 1fr 380px; gap: 1.25rem; align-items: start; }
.twee-kolommen.gelijk { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .twee-kolommen, .twee-kolommen.gelijk { grid-template-columns: 1fr; } }

.paginakop { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.paginakop h1 { margin: 0; }
.weeknav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

label { display: block; font-size: .85rem; font-weight: 600; color: #374151; margin-bottom: .8rem; }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; font: inherit; font-weight: 400; border: 1px solid #cdd3dc; border-radius: 6px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(47,111,222,.35); border-color: var(--accent); }
label.vink { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
label.vink input { width: auto; margin: 0; }
label.inline { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
label.inline input { margin: 0; }
input.code { font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
.rij { display: grid; grid-template-columns: 1fr 2fr; gap: .8rem; }

.urenform { display: grid; grid-template-columns: 150px 1fr 1fr 1fr 90px; gap: 0 .8rem; align-items: end; }
.urenform .breed { grid-column: 1 / -2; }
.urenform .acties { grid-column: -2 / -1; margin-bottom: .8rem; display: flex; gap: .4rem; }
@media (max-width: 900px) { .urenform { grid-template-columns: 1fr 1fr; } .urenform .breed, .urenform .acties { grid-column: 1 / -1; } }

.knop { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.knop:hover { background: #255bb8; text-decoration: none; }
.knop.licht { background: #eef2f8; color: var(--blauw); }
.knop.licht:hover { background: #e0e7f1; }
.knop.klein { padding: .3rem .7rem; font-size: .85rem; }
.knop.gevaar { color: var(--rood); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.link.gevaar { color: var(--rood); margin-left: .6rem; }
form.inline { display: inline; }
form.los { margin-top: 1rem; }
.acties { display: flex; gap: .5rem; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--grijs); font-weight: 600; }
th, td { padding: .5rem .55rem; border-bottom: 1px solid var(--rand); vertical-align: middle; }
tfoot th { color: var(--tekst); font-size: .9rem; text-transform: none; letter-spacing: 0; border-bottom: 0; border-top: 2px solid var(--rand); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
td.smal { width: 60px; }
.tabelwrap { overflow-x: auto; }
table.week th.vandaag { color: var(--accent); }
table.week td:nth-child(n+3) { min-width: 56px; }
tr.inactief td { color: var(--grijs); }
.leeg { color: var(--grijs); font-style: italic; }
.grijs { color: var(--grijs); font-weight: 400; }
.klein { font-size: .85rem; color: var(--grijs); }
.label { display: inline-block; font-size: .72rem; background: #eef1f5; color: var(--grijs); border-radius: 4px; padding: .05em .45em; font-weight: 600; }

.melding { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; background: #e6f4ec; color: var(--groen); border: 1px solid #c4e5d2; }
.melding.fout { background: #fdecea; color: var(--rood); border-color: #f5c6c0; }
.qr { text-align: center; }
.qr img { border: 1px solid var(--rand); border-radius: 8px; }