/* Organisatiekompas – beheer. Zelfde groene kleurenwereld als de scan. */
:root {
  --bg: #F4F7F3; --surface: #FFFFFF; --ink: #1D2A23; --muted: #5E6E64; --line: #D9E3DB;
  --accent: #2E7A55; --accent-soft: #E2F0E7; --warm: #C98A12; --warm-soft: #FBF0D9;
  --danger: #B3402A; --danger-soft: #FBE7E2;
  --f1: #F6D9CF; --f2: #FBEBC8; --f3: #E6EFE0; --f4: #CFE8D8; --f5: #A9D8B9;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font) }
a { color: var(--accent) }
h1, h2, h3 { line-height: 1.2; margin: 0 0 8px; text-wrap: balance }
h1 { font-size: 1.6rem } h2 { font-size: 1.2rem } h3 { font-size: 1rem; margin-top: 14px }
p { margin: 0 0 10px }
code { background: var(--accent-soft); padding: 1px 6px; border-radius: 6px }

.top { background: var(--ink); color: #fff }
.top-in { max-width: 1180px; margin: 0 auto; padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between }
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem }
.brand span { color: #9FD3B5; font-weight: 400 }
.top nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center }
.top nav a, .linkbtn { color: #DCE8E0; text-decoration: none; padding: 6px 12px; border-radius: 999px; font: inherit; background: none; border: 0; cursor: pointer }
.top nav a.on, .top nav a:hover, .linkbtn:hover { background: rgba(255,255,255,.12); color: #fff }
.inline { display: inline }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 18px; padding-block: 24px 60px; display: grid; gap: 18px }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; min-width: 0 }
.card.narrow { max-width: 460px; width: 100%; margin: 24px auto }
.card.danger { border-color: var(--danger-soft) }
.hl-green { background: var(--accent-soft); border-color: transparent }
.hl-warm { background: var(--warm-soft); border-color: transparent }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px }
.head-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 10px }
.muted, .sub { color: var(--muted) } .sub { font-size: .85rem }
.empty { color: var(--muted); padding: 18px; text-align: center; background: var(--bg); border-radius: 10px; margin: 0 }
.flash { background: var(--accent-soft); border: 1px solid var(--accent); padding: 10px 14px; border-radius: 10px; margin: 0 }
.error { background: var(--danger-soft); color: var(--danger); padding: 10px 14px; border-radius: 10px }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 4px; align-content: start }
.tile b { font-size: 1.7rem; font-variant-numeric: tabular-nums }
.tile span { color: var(--muted); font-size: .9rem }
.tile.accent { background: var(--accent); color: #fff; border-color: var(--accent) } .tile.accent span { color: #DDF0E5 }

.btn { display: inline-block; font: inherit; font-weight: 600; border-radius: 999px; padding: 9px 18px; border: 1.5px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap }
.btn.ghost { background: transparent; color: var(--accent) }
.btn.danger { background: var(--danger); border-color: var(--danger) }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px }

.form { display: grid; gap: 12px; margin-top: 10px }
.form label, .filters label, .linkbox { display: grid; gap: 4px; font-weight: 600; font-size: .9rem }
input, select, textarea { font: inherit; font-weight: 400; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); width: 100% }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px }
.filters label { min-width: 150px } .filters .grow { flex: 1 1 220px }
.check { display: flex !important; gap: 8px; align-items: center; font-weight: 400 !important }
.check input { width: auto }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.linkbox input { font-family: ui-monospace, Consolas, monospace; background: var(--accent-soft) }
.danger-zone { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px }

.tablewrap { overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 2px solid var(--line); padding: 8px 10px; white-space: nowrap }
td { border-bottom: 1px solid var(--line); padding: 10px; vertical-align: top }
tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--warm) }
table.compact td { padding: 6px 8px; font-size: .92rem }
.nowrap { white-space: nowrap } .num { white-space: nowrap; text-align: right }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 }
.dl dt { color: var(--muted) } .dl dd { margin: 0 }
.msg { background: var(--bg); padding: 12px; border-radius: 10px }
details { margin-top: 14px } summary { cursor: pointer; font-weight: 600; color: var(--accent) }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; color: var(--ink) }
.badge.f1 { background: var(--f1) } .badge.f2 { background: var(--f2) } .badge.f3 { background: var(--f3) } .badge.f4 { background: var(--f4) } .badge.f5 { background: var(--f5) }
.big .badge { font-size: 1rem; padding: 4px 14px }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; background: var(--bg); border: 1px solid var(--line) }
.s-nieuw { background: var(--warm-soft); border-color: var(--warm) } .s-contact { background: var(--accent-soft); border-color: var(--accent) }
.s-afgerond { background: #EEF1F4; } .s-geen { background: #F1F1F1; color: var(--muted) }
.bar { display: inline-block; width: 110px; height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; vertical-align: middle; margin-right: 8px }
.bar i { display: block; height: 100%; background: var(--accent) }
.flag { background: var(--warm-soft); color: #8A5A00; font-weight: 700; padding: 1px 8px; border-radius: 6px }

@media (max-width: 560px) { .dl { grid-template-columns: 1fr } .bar { width: 70px } }