/* Dashboard-stijl, gebouwd op ontwerp/tokens.css (de kleuren uit Jays ontwerp). */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: none; }

/* ---- topbalk ---- */
.topbar {
  display: flex; align-items: center; gap: 24px;
  background: var(--navy); color: #fff;
  padding: 0 22px; height: 56px;
}
.merk { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.merk .logo {
  width: 28px; height: 28px; border-radius: 7px; background: #fff; color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.hoofdnav { display: flex; gap: 4px; flex: 1; }
.hoofdnav a {
  color: #B7C4D6; padding: 8px 14px; border-radius: 7px; font-size: 14px; font-weight: 500;
}
.hoofdnav a:hover { color: #fff; }
.hoofdnav a.actief { color: #fff; background: rgba(255,255,255,.12); }
.topbar-rechts { display: flex; align-items: center; gap: 12px; }
.nieuwe-opdracht {
  padding: 8px 15px; background: #fff; color: var(--navy); border-radius: 7px;
  font-size: 13px; font-weight: 600;
}
.nieuwe-opdracht:hover { background: #E7F1FF; }
.besl-knop {
  padding: 8px 13px; border-radius: 7px; font-size: 13px; font-weight: 600;
  color: #B7C4D6; border: 1px solid rgba(255,255,255,.18);
}
.besl-knop.heeft-open { color: #fff; background: rgba(140,80,10,.32); border-color: rgba(240,220,180,.4); }
.besl-knop .badge {
  display: inline-block; min-width: 18px; text-align: center; background: var(--amber-vlak);
  color: var(--amber); border-radius: 10px; padding: 0 6px; font-size: 12px; margin-left: 3px;
}
.rol-chip { font-size: 12px; color: #B7C4D6; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #34557F;
  display: flex; align-items: center; justify-content: center;
}
.avatar a { color: #fff; font-size: 12px; font-weight: 600; }

/* ---- inhoud ---- */
.inhoud { max-width: 1080px; margin: 0 auto; padding: 28px 22px 60px; }
h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sub { margin: 5px 0 0; color: var(--tekst-grijs); font-size: 14px; }
.kruimel { color: var(--tekst-grijs); font-size: 13px; margin-bottom: 8px; }

.kaart {
  background: var(--wit); border: 1px solid var(--rand-zacht); border-radius: 14px;
  padding: 20px 22px; margin-bottom: 16px;
}
.kaart h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.kaart .kaart-sub { color: var(--tekst-grijs); font-size: 13px; margin: 0 0 16px; }

.raster { display: grid; gap: 16px; }
.raster.k2 { grid-template-columns: 1fr 1fr; }
.raster.k3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .raster.k2, .raster.k3 { grid-template-columns: 1fr; } }

.knop {
  display: inline-block; padding: 9px 16px; border-radius: 7px; border: none;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--navy); color: #fff;
}
.knop:hover { background: #17324f; }
.knop.licht { background: var(--vlak); color: var(--navy); }
.knop.licht:hover { background: #E7F1FF; }

label.veld { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--tekst-dof); }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--rand); border-radius: 7px;
  font-family: inherit; font-size: 14px; color: var(--tekst); background: #fff;
}
textarea { resize: vertical; line-height: 1.5; }
.hint { font-size: 12px; color: var(--tekst-licht); margin-top: 4px; }

.balk { height: 8px; border-radius: 6px; background: var(--vlak); overflow: hidden; }
.balk > span { display: block; height: 100%; background: var(--blauw); transition: width .4s; }

.rij { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--rand-zacht); }
.rij:last-child { border-bottom: none; }

.tag { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 3px 11px; }
.tag.amber { color: var(--amber); background: var(--amber-vlak); border: 1px solid #F0DCB4; }
.tag.grijs { color: var(--tekst-zacht); background: var(--vlak); border: 1px solid var(--rand); }
.tag.groen { color: var(--groen); background: #E7F3EC; border: 1px solid #CFE6D8; }

.attentie { border-left: 3px solid var(--amber); background: #FFF9EF; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; }
.attentie .t { font-weight: 600; font-size: 14px; }
.attentie .h { color: var(--tekst-grijs); font-size: 13px; margin-top: 2px; }

table.lijst { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lijst th { text-align: left; color: var(--tekst-grijs); font-weight: 600; font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--rand); }
table.lijst td { padding: 11px 10px; border-bottom: 1px solid var(--rand-zacht); }

/* ---- statuslabels (kleuren uit het ontwerp) ---- */
.status { display:inline-block; font-size:12px; font-weight:600; border-radius:20px; padding:3px 11px; white-space:nowrap; }
.s-Nieuw        { color:#475467; background:#F2F4F7; border:1px solid #D2D7DE; }
.s-Gegenereerd  { color:#2E4A72; background:#EAEFF6; border:1px solid #CDD9E8; }
.s-Concept      { color:#1F5FA8; background:#EAF2FB; border:1px solid #CFE0F2; }
.s-Verstuurd    { color:#0070C0; background:#E7F1FF; border:1px solid #CFE3F7; }
.s-Antwoord     { color:#2C6E49; background:#E7F3EC; border:1px solid #CFE6D8; }
.s-Afgehandeld  { color:#1F5132; background:#E3EFE6; border:1px solid #C9DECF; }
.s-Overgeslagen { color:#8C500A; background:#FFF4DE; border:1px solid #F0DCB4; }

/* ---- trechter ---- */
.trechter { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.trechter .stap { text-align:center; padding:16px 22px; border-radius:12px; background:var(--vlak); min-width:120px; }
.trechter .stap .n { font-size:30px; font-weight:700; }
.trechter .stap .l { font-size:12px; color:var(--tekst-grijs); margin-top:2px; }
.trechter .pijl { color:var(--tekst-licht); font-size:20px; }
.trechter .bruikbaar .n { color:var(--groen); }
.trechter .over .n { color:var(--amber); }