/* Sleutelspelers Recruitment: huisstijl afgeleid van sleutelspelers.com
   Onest, navy #303b73, roze #ea2f92 (spaarzaam, alleen voor de primaire actie en accenten),
   geel #f5df54 als markeerkleur, pilvormige knoppen en ronde kaarten (20px). */
:root {
  --navy: #303b73;
  --navy-diep: #0d0f1c;
  --navy-licht: #3e4784;
  --navy-tint: #eaebf1;
  --roze: #ea2f92;
  --roze-donker: #a50459;
  --roze-tint: #fdeaf3;
  --geel: #f5df54;
  --geel-tint: #fdf8dc;
  --inkt: #0d0f1c;
  --tekst: #565760;
  --tekst-zacht: #8a8c99;
  --lijn: #e3e4ec;
  --vlak: #ffffff;
  --grond: #f5f5f8;
  --goed: #1f9d6a;
  --goed-tint: #e4f5ed;
  --let-op: #d99a00;
  --let-op-tint: #fdf3d6;
  --kritiek: #d64545;
  --kritiek-tint: #fbe6e6;
  --whatsapp: #25d366;
  --linkedin: #0a66c2;
  --r: 20px;
  --r-s: 12px;
  --schaduw: 0 10px 30px -18px rgba(48, 59, 115, .35);
  --schaduw-zwaar: 0 30px 60px -30px rgba(13, 15, 28, .45);
  --font: 'Onest', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: var(--font);
  color: var(--tekst);
  background: var(--grond);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  min-height: 100vh;
}
h1, h2, h3, h4 { color: var(--inkt); font-weight: 700; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 1.75rem; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-zacht); font-weight: 700; }
a { color: var(--navy); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; color: var(--inkt); }
strong { color: var(--inkt); font-weight: 700; }
small { color: var(--tekst-zacht); }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid rgba(48, 59, 115, .35); outline-offset: 2px; border-radius: 6px; }

/* ---------- Knoppen (pilvorm zoals op de website) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
  border: 2px solid transparent; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primair { background: var(--roze); color: #fff; box-shadow: 0 8px 20px -10px rgba(234, 47, 146, .7); }
.btn-primair:hover { background: #d8247f; }
.btn-secundair { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-secundair:hover { background: var(--navy-tint); }
.btn-tekst { color: var(--navy); background: transparent; padding-inline: .6rem; }
.btn-tekst:hover { background: var(--navy-tint); }
.btn-klein { padding: .35rem .9rem; font-size: .8rem; }
.btn-breed { width: 100%; }
.btn .pijl { transition: transform .2s; }
.btn:hover .pijl { transform: translateX(3px); }
.icoonknop { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); position: relative; background: #fff; border: 1px solid var(--lijn); }
.icoonknop:hover { background: var(--navy-tint); }
.icoonknop .stip { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--roze); border: 2px solid #fff; }
.menu-knop { display: none; flex: none; }

/* ---------- Iconen (mask, kleur volgt currentColor) ---------- */
.ic { display: inline-block; width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-home    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.ic-vac     { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18'/%3E%3C/svg%3E"); }
.ic-kand    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21v-1a6 6 0 0 1 6-6h2a6 6 0 0 1 6 6v1M16 4a4 4 0 0 1 0 8M22 21v-1a6 6 0 0 0-4-5.6'/%3E%3C/svg%3E"); }
.ic-og      { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16M15 9h4a2 2 0 0 1 2 2v10M3 21h18M7 7h2M7 11h2M7 15h2M11 7h2M11 11h2M11 15h2'/%3E%3C/svg%3E"); }
.ic-inbox   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-9l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.ic-agenda  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ic-rap     { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.ic-avg     { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ic-portaal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.ic-inst    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.ic-info    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); }
.ic-zoek    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5'/%3E%3C/svg%3E"); }
.ic-bel     { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.ic-mail    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.ic-wa      { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.7-4.5A9 9 0 1 1 8 19.6z'/%3E%3Cpath d='M9 10a4 4 0 0 0 5 5l1-1-2-1-1 1a2 2 0 0 1-2-2l1-1-1-2z'/%3E%3C/svg%3E"); }
.ic-li      { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M8 10v7M8 7h.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v1'/%3E%3C/svg%3E"); }
.ic-tel     { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.ic-notitie { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12l-4 4H4z'/%3E%3Cpath d='M16 20v-4h4M8 9h8M8 13h5'/%3E%3C/svg%3E"); }
.ic-fase    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h12M12 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-systeem { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.ic-check   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.ic-pin     { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6 7-12a7 7 0 1 0-14 0c0 6 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ic-sluit   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ic-doc     { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h8l5 5v15H6z'/%3E%3Cpath d='M14 2v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.ic-ster    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l3 7 7 .6-5.3 4.7L18.5 22 12 18l-6.5 4 1.8-7.7L2 9.6 9 9z'/%3E%3C/svg%3E"); }
.ic-klok    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ic-sparkle { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2zM19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1zM5 15l.8 2.2L8 18l-2.2.8L5 21l-.8-2.2L2 18l2.2-.8z'/%3E%3C/svg%3E"); }
.ic-menu    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); }
.ic-vlag    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v18'/%3E%3Cpath d='M5 4h11l-2.5 4L16 12H5'/%3E%3C/svg%3E"); }

/* ---------- Inlogscherm ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.login-visual {
  background: var(--navy-diep) url('assets/brand/team.jpg') center / cover no-repeat;
  color: #fff; padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; position: relative; isolation: isolate;
}
.login-visual::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(13, 15, 28, .92) 20%, rgba(48, 59, 115, .78) 100%); z-index: -1; }
.login-logo { width: 220px; }
.login-visual h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; }
.login-visual p { color: rgba(255, 255, 255, .8); max-width: 48ch; font-size: 1.05rem; }
.login-punten { list-style: none; display: grid; gap: .6rem; color: #fff; font-weight: 500; }
.login-punten li { display: flex; align-items: center; gap: .7rem; }
.login-punten .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--geel); flex: none; }
.login-klein { font-size: .8rem !important; color: rgba(255, 255, 255, .55) !important; margin-top: auto; }
.login-kaart { display: flex; flex-direction: column; gap: .9rem; padding: clamp(2rem, 5vw, 5rem); justify-content: center; max-width: 520px; width: 100%; margin: 0 auto; background: #fff; }
.login-logo-klein { width: 180px; margin-bottom: 1rem; }
.veld { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--inkt); }
.veld input, .veld select, .veld textarea { padding: .7rem .9rem; border: 1.5px solid var(--lijn); border-radius: var(--r-s); background: #fff; font-weight: 400; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--navy); outline: none; }
.veld-fout { color: var(--kritiek); font-size: .85rem; }
.scheiding { display: flex; align-items: center; gap: 1rem; color: var(--tekst-zacht); font-size: .8rem; }
.scheiding::before, .scheiding::after { content: ''; flex: 1; height: 1px; background: var(--lijn); }

/* ---------- App-raamwerk ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.zijbalk { background: var(--navy-diep); color: #b9bccf; display: flex; flex-direction: column; padding: 1.4rem 1rem; position: sticky; top: 0; height: 100vh; }
.zijbalk-achtergrond { position: fixed; inset: 0; background: rgba(13, 15, 28, .45); z-index: 45; backdrop-filter: blur(2px); }
.zijbalk-logo img { width: 170px; display: block; margin: .2rem .6rem 1.8rem; }
.nav { display: flex; flex-direction: column; gap: .15rem; }
.nav a { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: 12px; color: #b9bccf; font-weight: 500; font-size: .92rem; transition: background .15s; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.actief { background: var(--navy); color: #fff; font-weight: 700; }
.nav a.actief .ic { color: var(--geel); }
.nav-kop { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: #6b6f85; padding: 1.1rem .8rem .35rem; font-weight: 700; }
.nav-tel { margin-left: auto; background: rgba(255, 255, 255, .12); color: #fff; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.nav-tel-roze { background: var(--roze); }
.nav-tel:empty { display: none; }
.zijbalk-voet { margin-top: auto; display: grid; gap: .8rem; }
.zijbalk-info { display: flex; align-items: center; gap: .6rem; color: #b9bccf; font-size: .85rem; padding: .5rem .8rem; border-radius: 10px; text-align: left; }
.zijbalk-info:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.gebruiker { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; background: rgba(255, 255, 255, .05); border-radius: 14px; }
.gebruiker strong { color: #fff; display: block; font-size: .9rem; }
.gebruiker small { color: #8a8da3; font-size: .75rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; background: var(--k, var(--navy)); flex: none; letter-spacing: .02em; }
.avatar.groot { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar.klein { width: 26px; height: 26px; font-size: .6rem; }
.avatar.xl { width: 84px; height: 84px; font-size: 1.6rem; }

.hoofd { min-width: 0; display: flex; flex-direction: column; }
.topbalk { display: flex; align-items: center; gap: 1rem; padding: 1rem 2rem; background: #fff; border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 20; }
.zoek { flex: 1; min-width: 0; max-width: 560px; display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; border-radius: 999px; background: var(--grond); border: 1px solid var(--lijn); color: var(--tekst-zacht); text-align: left; font-size: .9rem; }
.zoek:hover { border-color: var(--navy-licht); }
.zoek span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoek kbd { font-family: inherit; font-size: .7rem; padding: .15rem .45rem; border-radius: 6px; background: #fff; border: 1px solid var(--lijn); color: var(--tekst-zacht); }
.topbalk-acties { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.bron-badge { font-size: .72rem; font-weight: 600; color: var(--tekst-zacht); padding: .25rem .7rem; border-radius: 999px; background: var(--grond); border: 1px solid var(--lijn); }
.bron-badge.live { color: var(--goed); background: var(--goed-tint); border-color: transparent; }
.inhoud { padding: 1.8rem 2rem 3rem; display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }

/* ---------- Paginakop ---------- */
.paginakop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.paginakop p { color: var(--tekst); margin-top: .2rem; }
.kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--roze); font-weight: 800; display: block; margin-bottom: .3rem; }
.acties { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.kruimel { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--tekst-zacht); }
.kruimel a { color: var(--tekst-zacht); }
.kruimel a:hover { color: var(--navy); }

/* ---------- Kaarten en rasters ---------- */
.kaart { background: var(--vlak); border-radius: var(--r); padding: 1.3rem 1.4rem; box-shadow: var(--schaduw); border: 1px solid rgba(48, 59, 115, .06); min-width: 0; }
.kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.kaart-kop h2, .kaart-kop h3 { display: flex; align-items: center; gap: .5rem; }
.kaart-kop .link { font-size: .85rem; font-weight: 600; }
.raster { display: grid; gap: 1.2rem; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster-hoofd { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.raster-detail { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.stapel { display: grid; gap: 1.2rem; align-content: start; }

/* KPI-tegels */
.kpi { background: var(--vlak); border-radius: var(--r); padding: 1.1rem 1.3rem; box-shadow: var(--schaduw); border: 1px solid rgba(48, 59, 115, .06); display: grid; gap: .3rem; }
.kpi-label { font-size: .78rem; font-weight: 600; color: var(--tekst-zacht); text-transform: uppercase; letter-spacing: .08em; }
.kpi-waarde { font-size: 2rem; font-weight: 900; color: var(--inkt); letter-spacing: -.03em; line-height: 1.1; }
.kpi-sub { font-size: .8rem; color: var(--tekst); display: flex; align-items: center; gap: .4rem; }
.kpi-sub.op { color: var(--goed); font-weight: 600; }
.kpi-sub.af { color: var(--kritiek); font-weight: 600; }
.kpi.accent { background: var(--navy); border-color: transparent; }
.kpi.accent .kpi-label { color: rgba(255, 255, 255, .6); }
.kpi.accent .kpi-waarde { color: #fff; }
.kpi.accent .kpi-sub { color: var(--geel); }
.kpi.geel { background: var(--geel); }
.kpi.geel .kpi-label { color: rgba(13, 15, 28, .6); }
.kpi .sparkline { width: 100%; height: 34px; margin-top: .3rem; }

/* Chips en badges */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--navy-tint); color: var(--navy); white-space: nowrap; }
.chip.roze { background: var(--roze-tint); color: var(--roze-donker); }
.chip.geel { background: var(--geel-tint); color: #7a6300; }
.chip.goed { background: var(--goed-tint); color: var(--goed); }
.chip.letop { background: var(--let-op-tint); color: #8a6200; }
.chip.kritiek { background: var(--kritiek-tint); color: var(--kritiek); }
.chip.grijs { background: var(--grond); color: var(--tekst); }
.chip.wa { background: #e6f9ed; color: #12833c; }
.chip.li { background: #e5eff9; color: var(--linkedin); }
.chip.mail { background: var(--navy-tint); color: var(--navy); }
.chip.zacht { background: transparent; border: 1px solid var(--lijn); color: var(--tekst); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.skill { display: inline-block; padding: .2rem .6rem; border-radius: 8px; font-size: .74rem; background: var(--grond); color: var(--tekst); border: 1px solid var(--lijn); font-weight: 500; }
.skill.match { background: var(--geel-tint); border-color: #eedc8a; color: #5f4d00; font-weight: 600; }

/* Match-score ring */
.score { --p: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--inkt); flex: none;
  background: conic-gradient(var(--kleur, var(--navy)) calc(var(--p) * 1%), var(--lijn) 0); position: relative; }
.score::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.score span { position: relative; }
.score.klein { width: 36px; height: 36px; font-size: .68rem; }
.score.groot { width: 72px; height: 72px; font-size: 1.15rem; }
.score.groot::before { inset: 6px; }

/* Tabellen */
.tabel-wrap { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-zacht); font-weight: 700; padding: .5rem .8rem; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.tabel td { padding: .75rem .8rem; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: none; }
.tabel tbody tr { cursor: pointer; transition: background .12s; }
.tabel tbody tr:hover { background: var(--grond); }
.tabel .num { text-align: right; }
.persoon { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.persoon strong { display: block; color: var(--inkt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persoon small { display: block; font-size: .78rem; }

/* Filters en tabs */
.filterbalk { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.filterbalk input[type=search] { padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--lijn); background: #fff; min-width: 260px; }
.filterbalk select { padding: .5rem 2rem .5rem .9rem; border-radius: 999px; border: 1px solid var(--lijn); background: #fff; font-size: .85rem; font-weight: 600; color: var(--navy); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23303b73' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px; }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--lijn); }
.tabs button { padding: .7rem 1rem; font-weight: 600; color: var(--tekst-zacht); border-bottom: 3px solid transparent; margin-bottom: -1px; font-size: .9rem; display: flex; gap: .4rem; align-items: center; }
.tabs button:hover { color: var(--navy); }
.tabs button.actief { color: var(--navy); border-color: var(--roze); }
.tabs .tel { background: var(--navy-tint); color: var(--navy); border-radius: 999px; padding: 0 .5rem; font-size: .72rem; }
.segment { display: inline-flex; background: var(--navy-tint); border-radius: 999px; padding: 3px; }
.segment button { padding: .4rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--navy); }
.segment button.actief { background: #fff; box-shadow: 0 2px 8px rgba(48, 59, 115, .15); }
.telling { margin-left: auto; font-size: .85rem; color: var(--tekst-zacht); }

/* Vacaturekaarten */
.vac-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; }
.vac-kaart { background: #fff; border-radius: var(--r); padding: 1.2rem 1.3rem; box-shadow: var(--schaduw); border: 1px solid rgba(48, 59, 115, .06); display: grid; gap: .9rem; cursor: pointer; transition: transform .15s, box-shadow .15s; position: relative; }
.vac-kaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw-zwaar); }
.vac-kaart.hoog::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: var(--roze); }
.vac-kaart h3 { font-size: 1.05rem; }
.vac-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .82rem; color: var(--tekst); }
.vac-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.vac-fases { display: flex; gap: 3px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--grond); }
.vac-fases span { background: var(--navy); opacity: .9; }
.vac-fases span:nth-child(2) { opacity: .75; } .vac-fases span:nth-child(3) { opacity: .6; } .vac-fases span:nth-child(4) { opacity: .45; } .vac-fases span:nth-child(5) { background: var(--roze); opacity: 1; } .vac-fases span:nth-child(6) { background: var(--goed); opacity: 1; }
.vac-voet { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .8rem; }
.vac-voet .avatars { display: flex; }
.vac-voet .avatars .avatar { margin-left: -8px; border: 2px solid #fff; }
.vac-voet .avatars .avatar:first-child { margin-left: 0; }

/* Kanban (pipeline en funnel) */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.kolom { background: var(--navy-tint); border-radius: var(--r-s); padding: .6rem; min-height: 200px; display: flex; flex-direction: column; gap: .5rem; transition: background .15s; }
.kolom.sleep-over { background: var(--geel-tint); outline: 2px dashed var(--geel); }
.kolom.geplaatst { background: var(--goed-tint); }
.kolom.afgewezen { background: #f1f1f4; }
.kolom-kop { display: flex; align-items: center; justify-content: space-between; padding: .2rem .4rem .4rem; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.kolom-kop .tel { background: #fff; padding: 0 .5rem; border-radius: 999px; font-size: .72rem; }
.kolom-kop small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--tekst-zacht); margin-left: .4rem; }
.kaartje { background: #fff; border-radius: 12px; padding: .8rem .85rem; display: grid; gap: .55rem; cursor: grab; box-shadow: 0 2px 8px -4px rgba(13, 15, 28, .2); border: 1px solid transparent; transition: border-color .15s, box-shadow .15s; position: relative; }
.kaartje:hover { border-color: var(--navy-licht); box-shadow: 0 8px 20px -10px rgba(48, 59, 115, .5); }
.kaartje.sleept { opacity: .5; }
.kaartje-kop { display: flex; align-items: center; gap: .6rem; }
.kaartje-kop .persoon { flex: 1; min-width: 0; }
.kaartje-kop strong { font-size: .9rem; }
.kaartje-voet { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .74rem; color: var(--tekst-zacht); }
.kaartje-voet .chip { font-size: .68rem; padding: .1rem .5rem; }
.dagen { display: inline-flex; align-items: center; gap: .25rem; }
.dagen.laat { color: var(--kritiek); font-weight: 700; }
.kaartje .waarschuwing { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--kritiek); color: #fff; font-size: .7rem; font-weight: 900; display: grid; place-items: center; border: 2px solid #fff; }
.portaal-stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.portaal-stip.gedeeld { background: var(--let-op); } .portaal-stip.akkoord { background: var(--goed); } .portaal-stip.afgewezen { background: var(--kritiek); }

/* Tijdlijn */
.tijdlijn { display: grid; gap: 0; position: relative; }
.tijdlijn::before { content: ''; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--lijn); }
.tl-item { display: grid; grid-template-columns: 32px 1fr; gap: .8rem; padding: .55rem 0; position: relative; }
.tl-icoon { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--lijn); display: grid; place-items: center; color: var(--navy); z-index: 1; }
.tl-icoon .ic { width: 15px; height: 15px; }
.tl-item.whatsapp .tl-icoon { border-color: var(--whatsapp); color: #12833c; }
.tl-item.email .tl-icoon { border-color: var(--navy-licht); }
.tl-item.fase .tl-icoon { background: var(--navy); border-color: var(--navy); color: #fff; }
.tl-item.systeem .tl-icoon { border-color: var(--geel); color: #7a6300; background: var(--geel-tint); }
.tl-item.afspraak .tl-icoon { border-color: var(--roze); color: var(--roze); }
.tl-item.linkedin .tl-icoon { border-color: var(--linkedin); color: var(--linkedin); }
.tl-tekst { display: grid; gap: .15rem; font-size: .88rem; }
.tl-tekst strong { font-size: .9rem; }
.tl-tekst p { color: var(--tekst); white-space: pre-line; }
.tl-tekst small { font-size: .75rem; }

/* Lijstjes (taken, meldingen, afspraken) */
.lijst { display: grid; gap: .3rem; }
.lijst-item { display: flex; align-items: center; gap: .8rem; padding: .65rem .7rem; border-radius: 12px; transition: background .12s; cursor: pointer; }
.lijst-item:hover { background: var(--grond); }
.lijst-item .tekst { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.lijst-item .tekst strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lijst-item .tekst small { font-size: .78rem; }
.lijst-item.gereed .tekst strong { text-decoration: line-through; color: var(--tekst-zacht); }
.vink { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--navy-licht); display: grid; place-items: center; flex: none; color: #fff; background: #fff; }
.vink.aan { background: var(--goed); border-color: var(--goed); }
.vink .ic { width: 12px; height: 12px; }
.prio { width: 4px; align-self: stretch; border-radius: 2px; background: var(--lijn); flex: none; }
.prio.hoog { background: var(--roze); } .prio.normaal { background: var(--navy-licht); } .prio.laag { background: var(--lijn); }
.tijd { font-size: .8rem; font-weight: 700; color: var(--navy); min-width: 44px; font-variant-numeric: tabular-nums; }
.aandacht { display: grid; gap: .5rem; }
.aandacht-item { display: flex; gap: .8rem; align-items: center; padding: .7rem .8rem; border-radius: 12px; background: var(--let-op-tint); cursor: pointer; }
.aandacht-item.kritiek { background: var(--kritiek-tint); }
.aandacht-item .tekst { flex: 1; font-size: .88rem; }
.aandacht-item .tekst strong { display: block; font-size: .9rem; }

/* Definitielijst */
.dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .88rem; }
.dl dt { color: var(--tekst-zacht); font-weight: 500; }
.dl dd { color: var(--inkt); font-weight: 500; }

/* Detailkop (kandidaat, opdrachtgever, vacature) */
.detailkop { display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap; }
.detailkop .tekst { flex: 1; min-width: 240px; }
.detailkop h1 { font-size: 1.6rem; }
.detailkop .sub { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: var(--tekst); font-size: .9rem; margin-top: .3rem; align-items: center; }
.werk-met-zin { background: linear-gradient(135deg, var(--geel-tint), #fff); border: 1px solid #f0e4a0; border-radius: var(--r); padding: 1.1rem 1.3rem; display: grid; gap: .4rem; }
.werk-met-zin h4 { color: #7a6300; }
.werk-met-zin p { font-size: 1rem; color: var(--inkt); font-weight: 500; font-style: italic; }

/* Kanalen (multiposting) */
.kanalen { display: grid; gap: .5rem; }
.kanaal { display: grid; grid-template-columns: 1fr auto auto auto; gap: 1rem; align-items: center; padding: .6rem .8rem; border-radius: 10px; background: var(--grond); font-size: .85rem; }
.kanaal strong { font-size: .88rem; }
.kanaal .num { color: var(--inkt); font-weight: 600; }
.status-stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: .4rem; background: var(--goed); }
.status-stip.gepauzeerd { background: var(--let-op); } .status-stip.gesloten, .status-stip.concept { background: var(--lijn); }

/* Inbox */
.inbox { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1.2rem; align-items: start; min-height: 60vh; }
.inbox-lijst { display: grid; gap: .3rem; }
.gesprek-rij { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; padding: .75rem .8rem; border-radius: 14px; cursor: pointer; align-items: center; }
.gesprek-rij:hover, .gesprek-rij.actief { background: var(--navy-tint); }
.gesprek-rij .tekst { min-width: 0; display: grid; gap: .1rem; }
.gesprek-rij .tekst strong { font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.gesprek-rij .tekst p { font-size: .82rem; color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gesprek-rij.ongelezen .tekst p { color: var(--inkt); font-weight: 600; }
.gesprek-rij.ongelezen::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--roze); grid-column: 3; }
.gesprek-rij small { font-size: .74rem; }
.kanaal-icoon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.kanaal-icoon .ic { width: 12px; height: 12px; }
.kanaal-icoon.whatsapp { background: var(--whatsapp); } .kanaal-icoon.email { background: var(--navy); } .kanaal-icoon.linkedin { background: var(--linkedin); }
.avatar-wrap { position: relative; }
.avatar-wrap .kanaal-icoon { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border: 2px solid #fff; }
.chat { display: flex; flex-direction: column; min-height: 60vh; }
.chat-kop { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--lijn); }
.chat-berichten { flex: 1; display: grid; gap: .6rem; padding: 1.2rem 0; align-content: start; }
.bubbel { max-width: 70%; padding: .7rem 1rem; border-radius: 16px; font-size: .9rem; white-space: pre-line; position: relative; }
.bubbel.in { background: var(--grond); border-bottom-left-radius: 4px; justify-self: start; color: var(--inkt); }
.bubbel.uit { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; justify-self: end; }
.bubbel small { display: block; margin-top: .3rem; font-size: .7rem; opacity: .7; color: inherit; }
.bubbel .onderwerp { display: block; font-weight: 700; margin-bottom: .2rem; }
.chat-invoer { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--lijn); }
.chat-invoer input { padding: .7rem 1rem; border-radius: 999px; border: 1px solid var(--lijn); }
.chat-snel { display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .6rem; }
.chat-snel button { font-size: .75rem; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--lijn); color: var(--navy); font-weight: 600; }
.chat-snel button:hover { background: var(--navy-tint); }

/* Agenda */
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.dag { background: var(--grond); border-radius: var(--r-s); padding: .7rem; min-height: 260px; display: grid; gap: .5rem; align-content: start; }
.dag.vandaag { background: var(--geel-tint); outline: 2px solid var(--geel); }
.dag-kop { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); display: flex; justify-content: space-between; }
.afspraak { background: #fff; border-radius: 10px; padding: .55rem .7rem; font-size: .8rem; display: grid; gap: .15rem; border-left: 4px solid var(--navy); cursor: pointer; }
.afspraak strong { font-size: .82rem; line-height: 1.25; }
.afspraak.intro { border-color: var(--roze); } .afspraak.gesprek { border-color: var(--goed); } .afspraak.bezoek { border-color: var(--let-op); } .afspraak.belafspraak { border-color: var(--navy-licht); } .afspraak.intern { border-color: var(--lijn); }

/* Rapportages: grafieken in SVG */
.grafiek { width: 100%; height: auto; display: block; overflow: visible; }
.grafiek text { font-family: var(--font); font-size: 11px; fill: var(--tekst-zacht); }
.grafiek .as { stroke: var(--lijn); }
.grafiek .balk { fill: var(--navy); }
.grafiek .balk.roze { fill: var(--roze); }
.grafiek .balk.geel { fill: var(--geel); }
.grafiek .balk.zacht { fill: var(--navy-tint); }
.grafiek .waarde { fill: var(--inkt); font-weight: 700; font-size: 11px; }
.grafiek .lijn { fill: none; stroke: var(--roze); stroke-width: 2.5; stroke-linejoin: round; }
.grafiek .vlak-lijn { fill: rgba(234, 47, 146, .1); }
.legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--tekst); }
.legenda span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--k); margin-right: .4rem; vertical-align: -1px; }
.funnel { display: grid; gap: .45rem; }
.funnel-rij { display: grid; grid-template-columns: 150px 1fr 60px; gap: .8rem; align-items: center; font-size: .85rem; }
.funnel-rij .balk { height: 26px; border-radius: 6px; background: var(--navy); display: flex; align-items: center; padding-left: .6rem; color: #fff; font-weight: 700; font-size: .78rem; min-width: 2.2rem; }
.funnel-rij .conv { color: var(--tekst-zacht); font-size: .78rem; text-align: right; }
.staafjes { display: grid; grid-auto-flow: column; align-items: end; gap: .5rem; height: 160px; padding-top: 1.2rem; }
.staaf { display: grid; grid-template-rows: 1fr auto; gap: .3rem; height: 100%; text-align: center; font-size: .72rem; color: var(--tekst-zacht); }
.staaf .vulling { align-self: end; border-radius: 6px 6px 0 0; background: var(--navy); position: relative; }
.staaf .vulling.roze { background: var(--roze); }
.staaf .vulling::after { content: attr(data-w); position: absolute; top: -1.2rem; left: 0; right: 0; font-weight: 700; color: var(--inkt); }
.balken-h { display: grid; gap: .5rem; }
.balk-h { display: grid; grid-template-columns: 130px 1fr 44px; gap: .7rem; align-items: center; font-size: .85rem; }
.balk-h .spoor { height: 12px; background: var(--grond); border-radius: 6px; overflow: hidden; }
.balk-h .spoor span { display: block; height: 100%; border-radius: 6px; background: var(--navy); }
.balk-h .num { text-align: right; font-weight: 700; color: var(--inkt); }

/* Portaal (opdrachtgever) */
.portaal-frame { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw-zwaar); border: 1px solid var(--lijn); }
.portaal-kop { background: var(--navy-diep); color: #fff; padding: 1.2rem 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.portaal-kop img { height: 32px; }
.portaal-kop .voor { font-size: .85rem; color: #b9bccf; }
.portaal-kop .voor strong { color: #fff; }
.portaal-body { padding: 1.8rem; display: grid; gap: 1.4rem; }
.portaal-kaart { border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.2rem 1.3rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; }
.portaal-kaart .anoniem { font-size: 1.05rem; }
.portaal-kaart .acties { flex-direction: column; align-items: stretch; }
.portaal-kaart.akkoord { background: var(--goed-tint); border-color: transparent; }
.portaal-kaart.afgewezen { opacity: .55; }
.browser-balk { background: var(--grond); padding: .55rem 1rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--lijn); font-size: .78rem; color: var(--tekst-zacht); }
.browser-balk .url { flex: 1; background: #fff; border-radius: 999px; padding: .3rem 1rem; border: 1px solid var(--lijn); }
.browser-balk i { width: 10px; height: 10px; border-radius: 50%; background: var(--lijn); display: inline-block; }

/* Instellingen */
.inst-raster { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.inst-menu { display: grid; gap: .2rem; }
.inst-inhoud { display: grid; gap: 1.2rem; min-width: 0; }
.inst-menu button { text-align: left; padding: .6rem .9rem; border-radius: 10px; font-weight: 600; color: var(--tekst); }
.inst-menu button:hover { background: var(--navy-tint); }
.inst-menu button.actief { background: var(--navy); color: #fff; }
.pipeline-preview { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.pipeline-preview .stap { padding: .3rem .7rem; border-radius: 999px; background: var(--navy-tint); color: var(--navy); font-size: .78rem; font-weight: 700; }
.pipeline-preview .stap.eind { background: var(--goed-tint); color: var(--goed); }
.pipeline-preview .ic { width: 12px; height: 12px; color: var(--tekst-zacht); }
.schakel { width: 40px; height: 22px; border-radius: 999px; background: var(--lijn); position: relative; flex: none; transition: background .2s; }
.schakel::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.schakel.aan { background: var(--goed); }
.schakel.aan::after { transform: translateX(18px); }
.auto-item { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--lijn); }
.auto-item:last-child { border-bottom: none; }
.auto-item ol { padding-left: 1.2rem; font-size: .82rem; color: var(--tekst); margin-top: .5rem; display: grid; gap: .15rem; }
.integratie { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px solid var(--lijn); border-radius: 14px; }
.integratie .logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; color: #fff; font-size: .8rem; flex: none; }
.integratie .tekst { flex: 1; }
.integratie .tekst strong { display: block; }
.integratie .tekst small { font-size: .78rem; }
.team-rij { display: flex; align-items: center; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--lijn); }
.team-rij:last-child { border-bottom: none; }
.team-rij .tekst { flex: 1; }

/* Zijpaneel */
.paneel-achtergrond { position: fixed; inset: 0; background: rgba(13, 15, 28, .35); z-index: 40; backdrop-filter: blur(2px); }
.paneel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: #fff; z-index: 41; overflow-y: auto; padding: 1.6rem 1.8rem 2rem; display: flex; flex-direction: column; gap: 1.2rem; box-shadow: -20px 0 60px -30px rgba(13, 15, 28, .5); animation: schuif .25s ease; }
@keyframes schuif { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.paneel-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.paneel-sluit { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--tekst); background: var(--grond); flex: none; }
.paneel-sluit:hover { background: var(--navy-tint); color: var(--navy); }
.paneel h2 { font-size: 1.3rem; }
.paneel .sectie { display: grid; gap: .6rem; }
.paneel .sectie h4 { margin-bottom: .1rem; }
.uitleg { display: grid; gap: .35rem; }
.uitleg li { list-style: none; display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; color: var(--inkt); }
.uitleg li .ic { width: 15px; height: 15px; color: var(--goed); margin-top: 3px; }
.uitleg li.minpunt .ic { color: var(--let-op); }
.fase-kiezer { display: flex; gap: .3rem; flex-wrap: wrap; }
.fase-kiezer button { padding: .35rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--grond); color: var(--tekst); border: 1px solid var(--lijn); }
.fase-kiezer button.actief { background: var(--navy); color: #fff; border-color: var(--navy); }
.fase-kiezer button:hover:not(.actief) { border-color: var(--navy-licht); color: var(--navy); }
.matches { display: grid; gap: .5rem; }
.match-rij { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .6rem .7rem; border-radius: 12px; border: 1px solid var(--lijn); cursor: pointer; }
.match-rij:hover { background: var(--grond); }
.match-rij strong { font-size: .88rem; display: block; }
.match-rij small { font-size: .76rem; }
.sterren { color: var(--geel); display: inline-flex; gap: 1px; }
.sterren .ic { width: 13px; height: 13px; }
.sterren .ic.leeg { color: var(--lijn); }

/* Modals, zoeken, toast */
.modal-achtergrond { position: fixed; inset: 0; background: rgba(13, 15, 28, .45); z-index: 50; display: grid; place-items: start center; padding-top: 10vh; backdrop-filter: blur(3px); }
.zoek-modal { width: min(680px, 92vw); background: #fff; border-radius: var(--r); box-shadow: var(--schaduw-zwaar); overflow: hidden; }
.zoek-modal input { width: 100%; padding: 1.1rem 1.4rem; border: none; border-bottom: 1px solid var(--lijn); font-size: 1.05rem; outline: none; }
.zoek-resultaten { max-height: 55vh; overflow-y: auto; padding: .6rem; }
.zoek-groep { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tekst-zacht); font-weight: 700; padding: .6rem .8rem .3rem; }
.zoek-item { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: 12px; cursor: pointer; }
.zoek-item:hover, .zoek-item.actief { background: var(--navy-tint); }
.zoek-item .tekst { flex: 1; min-width: 0; }
.zoek-item strong { display: block; font-size: .9rem; }
.zoek-item small { font-size: .78rem; }
.zoek-leeg { padding: 2rem; text-align: center; color: var(--tekst-zacht); }
.modal { width: min(760px, 92vw); background: #fff; border-radius: var(--r); box-shadow: var(--schaduw-zwaar); padding: 1.8rem 2rem; display: grid; gap: 1.2rem; max-height: 85vh; overflow-y: auto; }
.modal-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.modal h2 { font-size: 1.4rem; }
.modal .formulier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.modal .formulier .breed { grid-column: 1 / -1; }
.modal-voet { display: flex; justify-content: flex-end; gap: .6rem; }
.nieuw-keuze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.nieuw-keuze button { display: grid; gap: .4rem; padding: 1.1rem; border-radius: 14px; border: 1px solid var(--lijn); text-align: left; }
.nieuw-keuze button:hover { border-color: var(--navy); background: var(--navy-tint); }
.nieuw-keuze strong { font-size: .95rem; }
.nieuw-keuze small { font-size: .78rem; }
.nieuw-keuze .ic { color: var(--roze); width: 22px; height: 22px; }
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 20px); background: var(--navy-diep); color: #fff; padding: .8rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: .9rem; opacity: 0; pointer-events: none; transition: all .25s; z-index: 60; box-shadow: var(--schaduw-zwaar); max-width: 90vw; }
.toast.zichtbaar { opacity: 1; transform: translate(-50%, 0); }
.toast.fout { background: var(--kritiek); }

/* Vergelijking Forceflow (Over deze mockup) */
.vergelijk { display: grid; gap: .6rem; }
.vergelijk-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--grond); font-size: .88rem; }
.vergelijk-rij .was { color: var(--tekst-zacht); }
.vergelijk-rij .wordt { color: var(--inkt); font-weight: 500; }
.vergelijk-kop { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--tekst-zacht); }

.laden { display: flex; align-items: center; gap: .8rem; color: var(--tekst-zacht); padding: 3rem; justify-content: center; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--lijn); border-top-color: var(--roze); animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.leeg { padding: 2rem; text-align: center; color: var(--tekst-zacht); font-size: .9rem; }
.leeg strong { display: block; color: var(--inkt); margin-bottom: .3rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Responsief ---------- */
@media (max-width: 1200px) {
  .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-hoofd, .raster-detail { grid-template-columns: 1fr; }
  .inbox { grid-template-columns: 1fr; }
  .inst-raster { grid-template-columns: 1fr; }
  .inst-menu { grid-auto-flow: column; overflow-x: auto; }
}
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login-visual { min-height: 34vh; padding: 1.6rem; gap: 1rem; }
  .login-visual h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .login-visual p { font-size: .95rem; }
  .login-punten { display: none; }
  .login-klein { margin-top: .6rem; }
  .login-kaart { padding: 1.8rem 1.4rem; }
  .app { grid-template-columns: 1fr; }
  .menu-knop { display: grid; place-items: center; }
  .zijbalk {
    position: fixed; top: 0; left: 0; z-index: 46; width: min(280px, 84vw); height: 100vh;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--schaduw-zwaar);
  }
  .zijbalk.open { transform: translateX(0); }
  .topbalk { padding-inline: 1rem; gap: .7rem; }
  .inhoud { padding: 1.2rem 1rem 2.5rem; }
  .raster, .raster-2, .raster-3, .raster-4 { grid-template-columns: 1fr; }
  .week { grid-template-columns: 1fr; }
  .dag { min-height: 0; }
  .modal { padding: 1.4rem 1.2rem; }
  .modal .formulier, .nieuw-keuze { grid-template-columns: 1fr; }
  .zoek kbd { display: none; }
  .vergelijk-rij, .vergelijk-kop { grid-template-columns: 1fr; }
  .funnel-rij { grid-template-columns: 96px 1fr 42px; }
  .portaal-kaart { grid-template-columns: 1fr; }
  .vac-lijst { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tabs button { white-space: nowrap; }
  .kaart, .kpi { padding: 1rem 1.1rem; }
  .detailkop h1 { font-size: 1.3rem; }
  .paginakop { align-items: flex-start; }
  .paneel { padding: 1.2rem 1.3rem 1.8rem; }
  .inbox, .chat { min-height: 50vh; }
  .kanban { grid-auto-columns: minmax(200px, 82vw); }
  .modal-voet { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .bron-badge { display: none; }
  .topbalk { gap: .5rem; }
  .detailkop { gap: .8rem; }
  .avatar.xl { width: 56px; height: 56px; font-size: 1.05rem; }
  .kpi-waarde { font-size: 1.6rem; }
  .funnel-rij { grid-template-columns: 1fr; gap: .2rem; }
  .funnel-rij .conv { text-align: left; }
  .paginakop { gap: .6rem; }
  .modal, .zoek-modal { border-radius: var(--r-s); }
  .modal-achtergrond { padding-top: 4vh; }
}

/* ---------- Echte data (proefmigratie): wat er nog niet is, is zichtbaar maar grijs ---------- */
.btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(1); }
.btn:disabled:hover { transform: none; box-shadow: none; }
.binnenkort { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: var(--grond); color: var(--tekst-zacht); font-size: .66rem; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.btn-primair .binnenkort { background: rgba(255, 255, 255, .25); color: #fff; }
.segment button.uit, .segment button:disabled { color: var(--tekst-zacht); opacity: .6; cursor: not-allowed; }
.lint { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1.1rem; border-radius: var(--r-s); background: var(--navy-tint); color: var(--inkt); font-size: .88rem; margin-bottom: 1rem; max-width: 100%; }
.lint .ic { flex: none; width: 18px; height: 18px; color: var(--navy); margin-top: .1rem; }
.kaart .lint { margin: 1rem 0 0; }
.lint.voorbeeld { background: var(--geel-tint); border: 1px solid var(--geel); }
.lint.voorbeeld .ic { color: #7a6300; }
.tekstblok { white-space: pre-line; font-size: .92rem; color: var(--inkt); max-width: 72ch; overflow-wrap: anywhere; }
.werk-met-zin .tekstblok { font-style: normal; }
.criteria { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.criteria li { font-size: .74rem; padding: .12rem .55rem; border-radius: 999px; background: var(--grond); color: var(--tekst); }
.criteria li.ok { background: var(--goed-tint); color: var(--goed); }
.criteria li.nee { background: var(--kritiek-tint); color: var(--kritiek); }
.criteria li.ok::before { content: '✓ '; } .criteria li.nee::before { content: '✕ '; } .criteria li.onbekend::before { content: '? '; }
.match-rij { align-items: flex-start; }
.match-rij small { display: block; }
.fase-telling { display: flex; gap: 3px; flex-wrap: wrap; margin: .6rem 0; }
.fase-telling span { display: flex; align-items: baseline; gap: .25rem; padding: .1rem .45rem; border-radius: 6px; background: var(--grond); color: var(--tekst-zacht); font-size: .68rem; white-space: nowrap; }
.fase-telling span.aan { background: var(--navy-tint); color: var(--navy); }
.fase-telling b { font-size: .78rem; color: inherit; }
td .fase-telling { margin: 0; }
.weeklijst { border: 1px solid var(--lijn); border-radius: var(--r-s); padding: .8rem; min-height: 90px; }
.weeklijst h4 { display: flex; justify-content: space-between; margin-bottom: .5rem; }
.avatars { display: inline-flex; }
.avatars .avatar { margin-left: -6px; border: 2px solid #fff; }
.avatars .avatar:first-child { margin-left: 0; }
.kanaal-kaart { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); }
.kanaal-kaart .kanaal-icoon { width: 36px; height: 36px; flex: none; }
.kanaal-kaart .kanaal-icoon .ic { width: 18px; height: 18px; }
.kanaal-kaart p { font-size: .85rem; margin-top: .35rem; }
.kanaal-kaart.uit { background: var(--grond); border-style: dashed; }
.kanaal-kaart.uit .kanaal-icoon { background: var(--tekst-zacht); }
.kanaal-kaart.uit strong { color: var(--tekst); }
.nav-voorbeeld { margin-left: auto; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--geel); border: 1px solid rgba(245, 223, 84, .5); padding: .05rem .4rem; border-radius: 999px; }
.voorbeeld-frame { position: relative; }
.voorbeeld-frame::after { content: 'Voorbeeld'; position: absolute; top: 58px; right: 18px; padding: .3rem .8rem; border-radius: 999px; background: var(--geel); color: var(--inkt); font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.voorbeeld-frame .portaal-body { filter: saturate(.6); }
.portaal-kaart.skelet { grid-template-columns: 1fr auto; border-style: dashed; background: var(--grond); }
.skelet-regel { display: block; height: 10px; border-radius: 6px; background: var(--lijn); margin-bottom: .5rem; }
@media (max-width: 900px) {
  .portaal-kaart.skelet { grid-template-columns: 1fr; }
}

/* ---------- Gebruikersbeheer ---------- */
.wachtwoord-tonen { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; background: var(--grond); border: 1px dashed var(--lijn); border-radius: var(--r-s); margin: 1rem 0; }
.wachtwoord-tonen code { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 1rem; letter-spacing: .02em; flex: 1; overflow-wrap: anywhere; color: var(--inkt); }
.rol-select { border: 1px solid var(--lijn); border-radius: 8px; padding: .3rem .5rem; font-size: .82rem; font-weight: 600; color: var(--navy); background: #fff; }

/* ---------- Bewerken en aanmaken ---------- */
.kaartje-verwijder { position: absolute; top: .4rem; right: .4rem; width: 20px; height: 20px; border-radius: 50%; background: var(--grond); color: var(--tekst-zacht); font-size: .9rem; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.kaartje:hover .kaartje-verwijder { opacity: 1; }
.kaartje-verwijder:hover { background: var(--kritiek-tint); color: var(--kritiek); }
.proc-reden { display: block; color: var(--tekst-zacht); font-style: italic; }

/* ---------- Jaarplanning en backlog: alleen-lezen spiegel van And Repeat ---------- */
.jaarplanning-jaarkeuze { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.jaarplanning-jaarkeuze label { font-weight: 700; color: var(--navy); font-size: .85rem; }
.jaarplanning-kwartalen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem .8rem; }
.jaarplanning-kwartaal-kop { grid-column: 1 / -1; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--navy); margin: .5rem 0 0; }
.jaarplanning-kwartaal-kop:first-child { margin-top: 0; }
.jaarplanning-kwartaal-kop span { color: var(--tekst-zacht); font-weight: 500; text-transform: none; letter-spacing: normal; }
.jaarplanning-maand-kaart { min-width: 0; border: 1px solid var(--lijn); border-radius: var(--r-s); padding: .7rem .8rem; background: var(--grond); min-height: 4.5rem; }
.jaarplanning-maand-naam { font-weight: 700; color: var(--inkt); font-size: .84rem; text-transform: capitalize; margin-bottom: .5rem; }
.jaarplanning-maand-leeg { color: var(--tekst-zacht); font-size: .78rem; margin: 0; }
.jaarplanning-item { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r-s); padding: .45rem .6rem; margin-bottom: .4rem; overflow-wrap: break-word; }
.jaarplanning-item:last-child { margin-bottom: 0; }
.jaarplanning-item b { display: block; font-weight: 600; color: var(--inkt); font-size: .82rem; margin-bottom: .3rem; }
.jaarplanning-item-omschrijving { margin: 0 0 .4rem; color: var(--tekst); font-size: .76rem; line-height: 1.35; }
.jaarplanning-onvolledig { margin-top: 1.2rem; border: 1px dashed var(--lijn); border-radius: var(--r-s); padding: .8rem 1rem; }
.jaarplanning-onvolledig b { color: var(--inkt); font-size: .85rem; display: block; margin-bottom: .5rem; }
.jaarplanning-onvolledig-items { display: flex; flex-wrap: wrap; gap: .5rem; }
.jaarplanning-chip-klein { display: inline-block; background: var(--navy-tint); color: var(--navy); border-radius: var(--r-s); padding: .3rem .6rem; font-size: .8rem; }
.jaarplanning-backlog-kaart { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--lijn); }
.jaarplanning-backlog-kaart:last-child { border-bottom: none; }
.jaarplanning-backlog-kaart .chips { justify-content: flex-end; flex: none; }
@media (max-width: 900px) {
  .jaarplanning-kwartalen { grid-template-columns: 1fr; }
  .jaarplanning-kwartaal-kop { grid-column: 1; }
  .jaarplanning-backlog-kaart { flex-direction: column; }
}

/* ---------- Automatiseringen en werkprocessen (Instellingen) ---------- */
.automatisering-categorie { margin-top: 1.3rem; }
.automatisering-categorie:first-child { margin-top: 0; }
.automatisering-categorie-kop { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-zacht); font-weight: 800; margin-bottom: .6rem; }
.automatisering-kaart { border: 1px solid var(--lijn); border-radius: var(--r-s); padding: .9rem 1rem; margin-bottom: .7rem; }
.automatisering-kaart:last-child { margin-bottom: 0; }
.automatisering-kop { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.automatisering-titel { font-size: .95rem; }
.automatisering-kort { font-size: .85rem; margin-top: .3rem; }
.automatisering-detail { font-size: .82rem; color: var(--tekst); margin-top: .4rem; }
.automatisering-stappen { margin: .5rem 0 0 1.1rem; font-size: .82rem; color: var(--tekst); display: grid; gap: .15rem; }
.automatisering-opmerkingen { margin-top: .4rem; font-size: .8rem; color: var(--tekst-zacht); font-style: italic; }
.automatisering-techniek { font-size: .78rem; color: var(--tekst-zacht); margin-top: .5rem; }
.werkproces-kaart { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--lijn); border-radius: var(--r-s); }
.werkproces-info strong { display: block; font-size: .92rem; }
.werkproces-info small { display: block; margin-top: .2rem; }