/* SpaceBitz UI (richting Atlas): tokens en componenten, gedeeld door dashboard en OS. Bron: ontwerp/demos/03-atlas.html. */
:root{
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#f1f3f6; --line:#e4e7ec; --line-strong:#cfd4dc;
  --navy:#1b2a4a; --navy-700:#243659; --navy-soft:#e8ecf5;
  --text:#1f2a3d; --text-2:#3b4a66; --muted:#5b6578; --muted-2:#667085;
  --orange:#e8500a; --orange-deep:#c84207; --orange-deeper:#a93705; --orange-text:#b8400a; --orange-soft:#fff1ea;
  --blue:#2f6fed; --blue-text:#2a62d6; --blue-soft:#e6eefc;
  --green:#15803d; --green-soft:#dcfce7; --green-text:#166534;
  --red:#dc2626; --red-soft:#fee2e2; --red-text:#b91c1c;
  --purple:#6d28d9; --purple-soft:#ede9fe;
  --amber-soft:#fef3c7; --amber-text:#b45309;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r:8px; --r-sm:6px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06); --shadow-md:0 4px 12px rgba(16,24,40,.08); --shadow-lg:0 16px 40px rgba(16,24,40,.16);
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px; --t-18:18px; --t-22:22px; --t-26:26px; --t-32:32px;
  --sidebar:256px; --topbar:56px; --demobar:0px;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Rollen van navy: --heading is de tekstkleur (koppen, namen, cijfers), --navy de vulling (actieve nav, navy-knop, nummercirkels), --navy-line de rand of lijn van een gekozen staat */
  --heading:var(--navy); --navy-line:var(--navy); --navy-fill:var(--navy); --on-navy:#fff;
  /* Vlakken: --card (kaart, knop, lade), --field (invoerveld), --inset (tegel of band binnen een kaart), --col (bordkolom) */
  --card:var(--surface); --field:#ffffff; --inset:var(--bg); --col:var(--surface-2); --mark:#141412; --merk:url(merk.svg);
  --orange-rand:#fdd3bd; --blue-deep:#1d4ed8; --blue-rand:#bfdbfe; --green-rand:#bbf7d0; --red-rand:#fecaca; --red-rand-strong:#fca5a5;
  --purple-text:#6d28d9; --purple-rand:#ddd6fe; --amber-rand:#fde68a; --teal-soft:#ccfbf1; --teal-text:#0f766e; --teal-rand:#99f6e4;
  --plan-bg:#f5f9ff; --plan-rand:#bfdbfe; --plan-dash:#93c5fd; --today:#fffaf6; --hover-row:#fafbfc; --skel-hi:#e9ecf1;
  --ring:rgba(47,111,237,.15); --scrim:rgba(27,42,74,.38);
  --cal-blue-b:#93c5fd; --cal-blue-bg:#dbeafe; --cal-blue-c:#1e40af; --cal-green-b:#86efac; --cal-green-bg:#dcfce7; --cal-green-c:#166534;
  --cal-orange-b:#fdba74; --cal-orange-bg:#ffedd5; --cal-orange-c:#9a3412; --cal-red-b:#fca5a5; --cal-red-bg:#fee2e2; --cal-red-c:#991b1b;
  --cal-purple-b:#c4b5fd; --cal-purple-bg:#ede9fe; --cal-purple-c:#5b21b6;
}
/* Donkere variant: één set tokens, zelfde structuur (systeemvoorkeur tenzij data-theme="light", of data-theme="dark" expliciet).
   Navy-grijs canvas, kaarten een trede lichter, lichte koppen, zachte statusvullingen (16 tot 18 procent) met lichte tekst, zodat ook gedempte labels op een tegel 4,5:1 halen. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121214; --surface:#19191c; --surface-2:#202024; --line:#2a2a2f; --line-strong:#3a3a41;
    --navy:#2c2c33; --navy-700:#3a3a43; --navy-soft:#26262c; --heading:#f4f4f5; --navy-line:#8c8c99;
    --text:#e8e8ea; --text-2:#c9c9ce; --muted:#9a9aa4; --muted-2:#8e8e98;
    --card:#19191c; --field:#141416; --inset:#1f1f23; --col:#141416; --mark:#f4f5f7; --merk:url(merk-paper.svg);
    --orange-text:#ff7a3d; --orange-soft:rgba(232,80,10,.16); --orange-rand:rgba(255,122,61,.45);
    --blue-text:#8ab4ff; --blue-deep:#9dbdff; --blue-soft:rgba(59,130,246,.18); --blue-rand:rgba(96,165,250,.45);
    --green:#1f9d55; --green-text:#7ee2a1; --green-soft:rgba(34,197,94,.16); --green-rand:rgba(74,222,128,.4);
    --red:#ef5350; --red-text:#ff9b9b; --red-soft:rgba(239,68,68,.16); --red-rand:rgba(252,165,165,.4); --red-rand-strong:rgba(252,165,165,.6);
    --purple:#a78bfa; --purple-text:#c4b5fd; --purple-soft:rgba(139,92,246,.18); --purple-rand:rgba(196,181,253,.4);
    --amber-text:#fbbf24; --amber-soft:rgba(245,158,11,.16); --amber-rand:rgba(251,191,36,.4);
    --teal-text:#5eead4; --teal-soft:rgba(20,184,166,.16); --teal-rand:rgba(94,234,212,.4);
    --plan-bg:rgba(59,130,246,.12); --plan-rand:rgba(96,165,250,.4); --plan-dash:rgba(96,165,250,.55);
    --today:#232326; --hover-row:#1f1f23; --skel-hi:#2a2a2f; --ring:rgba(255,255,255,.14); --scrim:rgba(0,0,0,.65);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.55);
    --cal-blue-b:rgba(147,197,253,.55); --cal-blue-bg:rgba(59,130,246,.22); --cal-blue-c:#c7dbff; --cal-green-b:rgba(134,239,172,.5); --cal-green-bg:rgba(34,197,94,.2); --cal-green-c:#b5f0c8;
    --cal-orange-b:rgba(253,186,116,.55); --cal-orange-bg:rgba(249,115,22,.22); --cal-orange-c:#ffd2b0; --cal-red-b:rgba(252,165,165,.55); --cal-red-bg:rgba(239,68,68,.22); --cal-red-c:#ffc2c2;
    --cal-purple-b:rgba(196,181,253,.55); --cal-purple-bg:rgba(139,92,246,.24); --cal-purple-c:#dcd3ff;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121214; --surface:#19191c; --surface-2:#202024; --line:#2a2a2f; --line-strong:#3a3a41;
  --navy:#2c2c33; --navy-700:#3a3a43; --navy-soft:#26262c; --heading:#f4f4f5; --navy-line:#8c8c99;
  --text:#e8e8ea; --text-2:#c9c9ce; --muted:#9a9aa4; --muted-2:#8e8e98;
  --card:#19191c; --field:#141416; --inset:#1f1f23; --col:#141416; --mark:#f4f5f7; --merk:url(merk-paper.svg);
  --orange-text:#ff7a3d; --orange-soft:rgba(232,80,10,.16); --orange-rand:rgba(255,122,61,.45);
  --blue-text:#8ab4ff; --blue-deep:#9dbdff; --blue-soft:rgba(59,130,246,.18); --blue-rand:rgba(96,165,250,.45);
  --green:#1f9d55; --green-text:#7ee2a1; --green-soft:rgba(34,197,94,.16); --green-rand:rgba(74,222,128,.4);
  --red:#ef5350; --red-text:#ff9b9b; --red-soft:rgba(239,68,68,.16); --red-rand:rgba(252,165,165,.4); --red-rand-strong:rgba(252,165,165,.6);
  --purple:#a78bfa; --purple-text:#c4b5fd; --purple-soft:rgba(139,92,246,.18); --purple-rand:rgba(196,181,253,.4);
  --amber-text:#fbbf24; --amber-soft:rgba(245,158,11,.16); --amber-rand:rgba(251,191,36,.4);
  --teal-text:#5eead4; --teal-soft:rgba(20,184,166,.16); --teal-rand:rgba(94,234,212,.4);
  --plan-bg:rgba(59,130,246,.12); --plan-rand:rgba(96,165,250,.4); --plan-dash:rgba(96,165,250,.55);
  --today:#232326; --hover-row:#1f1f23; --skel-hi:#2a2a2f; --ring:rgba(255,255,255,.14); --scrim:rgba(0,0,0,.65);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  --cal-blue-b:rgba(147,197,253,.55); --cal-blue-bg:rgba(59,130,246,.22); --cal-blue-c:#c7dbff; --cal-green-b:rgba(134,239,172,.5); --cal-green-bg:rgba(34,197,94,.2); --cal-green-c:#b5f0c8;
  --cal-orange-b:rgba(253,186,116,.55); --cal-orange-bg:rgba(249,115,22,.22); --cal-orange-c:#ffd2b0; --cal-red-b:rgba(252,165,165,.55); --cal-red-bg:rgba(239,68,68,.22); --cal-red-c:#ffc2c2;
  --cal-purple-b:rgba(196,181,253,.55); --cal-purple-bg:rgba(139,92,246,.24); --cal-purple-c:#dcd3ff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--t-14);line-height:1.5;font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--blue-text)}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--heading);font-weight:700;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
blockquote{margin:0}
dl{margin:0}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.sm{width:16px;height:16px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--heading);text-decoration:none}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:24px;color:var(--mark);flex:none}
.logo .word{font-weight:800;font-size:var(--t-16);letter-spacing:-.02em;color:var(--heading);white-space:nowrap}
.logo .word b{color:var(--orange);font-weight:800}
.logo .word .os{color:var(--text);font-weight:700}
.on-dark .mark{color:#f4f5f7}

/* Shell */
.shell{display:flex;min-height:calc(100vh - var(--demobar))}
.side{width:var(--sidebar);flex:none;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:var(--demobar);height:calc(100vh - var(--demobar));overflow:auto}
.side[hidden]{display:none}
.side .head{height:var(--topbar);flex:none;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line)}
.side .back{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--t-13);font-weight:600;padding:12px 20px 4px;text-decoration:none}
.side .back:hover{color:var(--heading)}
.nav{padding:8px 12px;flex:1}
.nav .grp{font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 12px 6px}
.nav a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:var(--r-sm);color:var(--text-2);font-weight:600;font-size:var(--t-14);text-decoration:none}
.nav a:hover{background:var(--surface-2);color:var(--heading);text-decoration:none}
.nav a[aria-current="page"]{background:var(--navy);color:#fff}
.nav a .cnt{margin-left:auto;font-size:var(--t-12);font-weight:700;background:var(--surface-2);color:var(--text-2);border-radius:var(--r-pill);padding:1px 8px;min-width:24px;text-align:center}
.nav a[aria-current="page"] .cnt{background:rgba(255,255,255,.18);color:#fff}
.nav .steps{margin:2px 0 6px 22px;padding-left:12px;border-left:1px solid var(--line)}
.nav .steps li{font-size:var(--t-12);color:var(--muted);line-height:1.35;padding:4px 0 4px 10px;position:relative}
.nav .steps li::before{content:"";position:absolute;left:-15px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--line-strong)}
.nav .steps li.done::before{background:var(--orange)}
.side .foot{border-top:1px solid var(--line);padding:12px 12px 16px}
.user{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm)}
.user .n{font-weight:700;color:var(--heading);line-height:1.2}
.user .r{font-size:var(--t-12);color:var(--muted)}
.side .foot .btn{width:100%;margin-top:8px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:var(--t-13);display:inline-flex;align-items:center;justify-content:center;flex:none}
.avatar.sm{width:24px;height:24px;font-size:var(--t-11)}
.avatar.lg{width:40px;height:40px;font-size:var(--t-14)}
.avatar.m{background:#2f6fed}.avatar.l{background:#0f766e}.avatar.v{background:#b8400a}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:var(--demobar);z-index:20}
.topbar .brand-m{display:none}
.search{position:relative;flex:1;max-width:520px}
.search input{width:100%;height:36px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);padding:0 36px 0 36px;font-size:var(--t-14)}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{background:var(--field);border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--ring)}
.search .i{position:absolute;left:10px;top:8px;color:var(--muted)}
.search kbd{position:absolute;right:8px;top:8px;height:20px;padding:0 6px;border:1px solid var(--line);border-radius:4px;background:var(--card);font:600 var(--t-11)/18px var(--font);color:var(--muted)}
.topbar .sp{flex:1}
.topbar .acc{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 4px;border:0;background:transparent;border-radius:var(--r-sm);font-weight:600;color:var(--text-2)}
.topbar .acc:hover{background:var(--surface-2)}
.ibtn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:var(--r-sm);color:var(--text-2);position:relative;flex:none;padding:0}
.ibtn:hover{background:var(--surface-2);color:var(--heading)}
.ibtn .dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--orange);border:2px solid var(--surface)}
.ibtn.ghost{width:32px;height:32px;color:var(--muted)}
.ibtn.ghost:hover{color:var(--heading)}
.ibtn.bordered{border:1px solid var(--line-strong);background:var(--card)}
[hidden]{display:none!important}

.content{padding:24px;flex:1}

/* Paginakop */
.ph{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ph .txt{flex:1;min-width:260px}
.eyebrow{font-size:var(--t-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ph h1{font-size:var(--t-26);line-height:1.2;margin-top:2px}
.ph .intro{color:var(--muted);margin-top:6px;max-width:760px}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* Knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--card);color:var(--text-2);font-weight:600;font-size:var(--t-14);white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface-2);color:var(--heading);text-decoration:none}
.btn.primary{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
.btn.primary:hover{background:var(--orange-deeper);border-color:var(--orange-deeper);color:#fff}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-700);color:#fff}
.btn.danger{color:var(--red-text);border-color:var(--line-strong)}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red-rand-strong);color:var(--red-text)}
.btn.danger.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger.solid:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
.btn.quiet{border-color:transparent;background:transparent}
.btn.quiet:hover{background:var(--surface-2)}
.btn.sm{height:32px;padding:0 10px;font-size:var(--t-13)}
.btn.xs{height:28px;padding:0 8px;font-size:var(--t-12)}
.btn.link{border:0;background:none;color:var(--blue-text);padding:0;height:auto}
.btn.link:hover{text-decoration:underline;background:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Kaarten */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.card .ch{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card .ch h2,.card .ch h3{font-size:var(--t-16)}
.card .ch .sub{color:var(--muted);font-size:var(--t-13);font-weight:500}
.card .ch .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.card .cb{padding:16px 20px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm);min-width:0}
.kpi .l{font-size:var(--t-12);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.kpi .v{font-size:var(--t-26);font-weight:800;color:var(--heading);line-height:1;letter-spacing:-.02em}
.kpi .spark{width:72px;height:28px;flex:none}
.kpi .tr{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-12);font-weight:700;white-space:nowrap;overflow:hidden}
.kpi .tr .i{width:14px;height:14px}
.tr.up{color:var(--green-text)}.tr.down{color:var(--red-text)}.tr.flat{color:var(--muted)}
.kpi .tr span.m{color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis}

/* Filters */
.toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar .count{color:var(--muted);font-size:var(--t-13)}
.toolbar .count b{color:var(--heading);font-weight:700}
.toolbar .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.filters .search{max-width:320px;min-width:220px}
.filters .search input{height:36px;background:var(--field)}
.chip-sel{position:relative}
.chip-sel select{appearance:none;-webkit-appearance:none;height:36px;padding:0 30px 0 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--card);font-weight:600;font-size:var(--t-13);color:var(--text-2);max-width:200px}
.chip-sel .i{position:absolute;right:9px;top:10px;width:16px;height:16px;pointer-events:none;color:var(--muted)}
.chip-sel.active select{border-color:var(--navy-line);background:var(--navy-soft);color:var(--heading)}
.filters .count{margin-left:auto;color:var(--muted);font-size:var(--t-13);white-space:nowrap}

/* Tabel */
.tbl-wrap{overflow-x:auto}
@media (min-width:1300px){.tbl-wrap{overflow:visible}}
table.tbl{width:100%;border-collapse:collapse;min-width:960px}
.tbl th{height:40px;padding:0 8px;text-align:left;font-size:var(--t-11);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);background:var(--inset);white-space:nowrap}
.tbl th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;height:40px}
.tbl th button:hover{color:var(--heading)}
.tbl th button .i{width:14px;height:14px;opacity:.6}
.tbl th[aria-sort] button{color:var(--heading)}
.tbl th[aria-sort] button .i{opacity:1}
.tbl td{height:44px;padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap;font-size:var(--t-13)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--hover-row)}
.tbl tbody tr.sel{background:var(--blue-soft)}
.tbl .co{display:flex;align-items:center;gap:10px}
.tbl .co .n{font-weight:700;color:var(--heading);font-size:var(--t-13);max-width:180px;white-space:normal;line-height:1.25}
.tbl .co .n a{color:inherit;text-decoration:none}
.tbl .co .n a:hover{text-decoration:underline}
.tbl .co .p{font-size:var(--t-12);color:var(--muted)}
.tbl .two{line-height:1.25}
.tbl .two small{display:block;font-size:var(--t-12);color:var(--muted)}
.tbl .own{font-size:var(--t-12);color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.tbl .acts{display:flex;gap:0;justify-content:flex-end}
.more{position:relative}
.pop{position:absolute;right:0;top:calc(100% + 4px);z-index:15;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-md);min-width:230px;padding:4px;display:grid;text-align:left}
.pop button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:center;height:36px;padding:0 10px;border-radius:4px;font-size:var(--t-13);font-weight:600;color:var(--text-2);white-space:nowrap}
.pop button:hover{background:var(--surface-2);color:var(--heading)}
.pop button.danger{color:var(--red-text)}
.pop button.danger:hover{background:var(--red-soft)}
.tbl tr:nth-last-child(-n+2) .pop{top:auto;bottom:calc(100% + 4px)}
.tbl .acts .ibtn{width:26px;height:28px}
.tbl .acts .ibtn .i{width:18px;height:18px}
.tbl .chk,.tbl .ac{width:1%}
.tbl .muted{color:var(--muted)}
.tfoot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:var(--t-13);color:var(--muted);flex-wrap:wrap}
.pager{margin-left:auto;display:flex;gap:4px;align-items:center}
.pager button{min-width:32px;height:32px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);font-weight:600;font-size:var(--t-13);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.pager button[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pager button:hover:not([aria-current]){background:var(--surface-2)}
.pager button[disabled]{opacity:.45;cursor:not-allowed}
.bulk{display:none;align-items:center;gap:8px;padding:8px 16px;background:var(--navy);color:#fff;font-weight:600;font-size:var(--t-13);flex-wrap:wrap}
.bulk.on{display:flex}
.bulk .btn{height:32px;font-size:var(--t-13);background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.bulk .btn:hover{background:rgba(255,255,255,.12);color:#fff}
.bulk .n{margin-right:8px}
.bulk .x{margin-left:auto;color:#fff}
.bulk .x:hover{background:rgba(255,255,255,.12);color:#fff}
input[type="checkbox"].box{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--line-strong);border-radius:4px;background:var(--field);margin:0;display:inline-grid;place-content:center;cursor:pointer;vertical-align:middle;flex:none}
input[type="checkbox"].box::before{content:"";width:10px;height:10px;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);background:var(--on-navy);transform:scale(0)}
input[type="checkbox"].box:checked{background:var(--navy-line);border-color:var(--navy-line)}
input[type="checkbox"].box:checked::before{transform:scale(1)}
input[type="checkbox"].box:indeterminate{background:var(--navy-line);border-color:var(--navy-line)}
input[type="checkbox"].box:indeterminate::before{transform:scale(1);clip-path:inset(40% 10% 40% 10%)}
input[type="checkbox"].box:disabled{cursor:not-allowed}

/* Labels en chips */
.lbl{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-12);font-weight:800;flex:none;border:1px solid transparent}
.lbl.A{background:var(--green-soft);color:var(--green-text);border-color:var(--green-rand)}
.lbl.B{background:var(--blue-soft);color:var(--blue-deep);border-color:var(--blue-rand)}
.lbl.C{background:var(--amber-soft);color:var(--amber-text);border-color:var(--amber-rand)}
.lbl.D{background:var(--surface-2);color:var(--muted);border-color:var(--line-strong)}
.lbl.lg{width:40px;height:40px;font-size:var(--t-18)}
.st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:var(--t-11);font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.lead{background:var(--surface-2);color:var(--text-2);border-color:var(--line)}
.st.bellen{background:var(--orange-soft);color:var(--orange-text);border-color:var(--orange-rand)}
.st.gesprek{background:var(--blue-soft);color:var(--blue-deep);border-color:var(--blue-rand)}
.st.akkoord{background:var(--teal-soft);color:var(--teal-text);border-color:var(--teal-rand)}
.st.project{background:var(--purple-soft);color:var(--purple-text);border-color:var(--purple-rand)}
.st.live{background:var(--green-soft);color:var(--green-text);border-color:var(--green-rand)}
.st.geen{background:var(--red-soft);color:var(--red-text);border-color:var(--red-rand)}
.st.nieuw{background:var(--green-soft);color:var(--green-text);border-color:var(--green-rand)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-2);font-size:var(--t-12);font-weight:700;border:1px solid var(--line);white-space:nowrap}
.chip.navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.orange{background:var(--orange-soft);color:var(--orange-text);border-color:var(--orange-rand)}
.chip.blue{background:var(--blue-soft);color:var(--blue-deep);border-color:var(--blue-rand)}
.chip.green{background:var(--green-soft);color:var(--green-text);border-color:var(--green-rand)}
.chip.sector{text-transform:uppercase;letter-spacing:.05em;font-size:var(--t-11)}
.chip .i{width:14px;height:14px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--orange);color:#fff;font-size:var(--t-11);font-weight:800}
.badge.navy{background:var(--navy)}
.src{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-13);color:var(--text-2)}
.src::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--muted)}
.src.leadgen::before{background:var(--orange)}.src.places::before{background:var(--blue)}.src.csv::before{background:var(--purple)}.src.eigen::before{background:var(--green)}

/* Velden */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lab{font-size:var(--t-12);font-weight:700;color:var(--text-2);letter-spacing:.02em}
.inp,.sel,.ta{width:100%;height:40px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--field);padding:0 12px;font-size:var(--t-14);color:var(--text)}
.inp::placeholder,.ta::placeholder{color:var(--muted-2)}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--ring)}
.inp.err{border-color:var(--red)}
.ta{height:auto;min-height:88px;padding:10px 12px;resize:vertical;line-height:1.5}
.selw{position:relative}
.selw .sel{appearance:none;-webkit-appearance:none;padding-right:34px}
.selw .i{position:absolute;right:10px;top:10px;pointer-events:none;color:var(--muted)}
.field .hint{font-size:var(--t-12);color:var(--muted)}
.field .hint.err{color:var(--red-text)}
.inp.sm,.sel.sm{height:36px;font-size:var(--t-13)}

/* Tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.tabs button{all:unset;cursor:pointer;flex:none;height:40px;padding:0 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:8px}
.tabs button:hover{color:var(--heading)}
.tabs button[aria-selected="true"]{color:var(--heading);border-color:var(--orange)}
.tabs button .cnt{font-size:var(--t-12);background:var(--surface-2);border-radius:var(--r-pill);padding:0 7px;font-weight:700;color:var(--text-2)}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.seg button{all:unset;cursor:pointer;height:38px;padding:0 14px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:8px;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.seg button .cnt{font-size:var(--t-12);font-weight:700;opacity:.8}

/* Lade (klantkaart) */
.scrim{position:fixed;inset:var(--demobar) 0 0 0;background:var(--scrim);z-index:40}
.drawer{position:fixed;top:var(--demobar);right:0;bottom:0;width:820px;max-width:100%;background:var(--card);z-index:50;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);border-left:1px solid var(--line)}
.drawer .dh{padding:16px 24px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px;flex:none}
.drawer .dh h2{font-size:var(--t-22);line-height:1.2}
.drawer .dh .meta{color:var(--muted);font-size:var(--t-13);margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.drawer .dh .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.drawer .db{flex:1;overflow:auto;display:grid;grid-template-columns:272px 1fr}
.drawer .dl{border-right:1px solid var(--line);padding:20px;background:var(--inset)}
.drawer .dr{padding:20px 24px;min-width:0}
.drawer .df{border-top:1px solid var(--line);padding:12px 24px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--card);flex:none}
.drawer .df .btn{height:36px;padding:0 12px;font-size:var(--t-13)}
.drawer .df .ibtn{width:36px;height:36px}
.ibtn.danger{color:var(--red-text)}
.ibtn.danger:hover{background:var(--red-soft);color:var(--red-text)}
.drawer .df .sp{flex:1}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:var(--t-13)}
.kv dt{color:var(--muted);font-weight:600;white-space:nowrap}
.kv dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere}
.blk{margin-bottom:20px}
.blk:last-child{margin-bottom:0}
.blk h3{font-size:var(--t-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sec{border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;background:var(--card)}
.sec > .sh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sec > .sh h3{font-size:var(--t-14);color:var(--heading)}
.sec > .sh .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.sec > .sb{padding:16px}
.facets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.facet{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--inset)}
.facet .k{font-size:var(--t-11);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facet .v{font-weight:600;color:var(--heading);margin-top:2px;font-size:var(--t-13)}
details.src-d{border-top:1px solid var(--line);padding:8px 0}
details.src-d summary{cursor:pointer;font-weight:600;font-size:var(--t-13);color:var(--text-2);list-style:none;display:flex;align-items:center;gap:8px;min-height:28px}
details.src-d summary::-webkit-details-marker{display:none}
details.src-d summary .i{transition:transform .15s}
details[open].src-d summary .i{transform:rotate(180deg)}
details.src-d .d{padding:8px 0 4px 24px;color:var(--muted);font-size:var(--t-13)}
.proof{margin:12px 0;display:grid;gap:8px}
.proof li{display:flex;gap:10px;font-size:var(--t-13);color:var(--text)}
.proof li .n{width:20px;height:20px;border-radius:50%;background:var(--navy-soft);color:var(--heading);font-size:var(--t-11);font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.belhoek{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--inset);font-size:var(--t-13)}
.belhoek b{color:var(--heading)}
.quote{border-left:3px solid var(--orange);padding:8px 14px;margin:12px 0;font-size:var(--t-14);font-weight:600;color:var(--heading);background:var(--orange-soft);border-radius:0 var(--r-sm) var(--r-sm) 0}
.foot-note{font-size:var(--t-12);color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tl{display:grid;gap:0}
.tl li{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-13)}
.tl li:last-child{border-bottom:0}
.tl .w{color:var(--muted);font-weight:600}
.tl .o{font-weight:700;color:var(--heading)}
.tl .nt{color:var(--text-2)}
.tl .wie{color:var(--muted);font-size:var(--t-12);margin-top:2px}
.msgs{display:grid;gap:12px;margin-bottom:12px}
.msg{display:flex;gap:10px}
.msg .b{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;font-size:var(--t-13);flex:1;min-width:0}
.msg .b .w{font-weight:700;color:var(--heading);margin-right:6px}
.msg .b .t{color:var(--muted);font-size:var(--t-12)}
.msg .b .at{color:var(--blue-text);font-weight:600}
.composer{border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.composer textarea{border:0;width:100%;min-height:72px;padding:10px 12px;resize:vertical;border-radius:var(--r-sm) var(--r-sm) 0 0;display:block}
.composer textarea:focus{outline:none}
.composer textarea::placeholder{color:var(--muted-2)}
.composer .cr{display:flex;gap:6px;align-items:center;padding:8px;border-top:1px solid var(--line);flex-wrap:wrap}
.composer .cr .btn.primary{margin-left:auto}
.chipbtn{height:28px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);font-size:var(--t-12);font-weight:700;color:var(--blue-text);display:inline-flex;align-items:center;gap:4px}
.chipbtn:hover{background:var(--blue-soft)}

/* Bellen */
.bel-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.belkaart .top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.belkaart h2{font-size:var(--t-22)}
.tel{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;background:var(--inset);margin:16px 0;flex-wrap:wrap}
.tel a{font-size:var(--t-26);font-weight:800;color:var(--heading);letter-spacing:.01em;text-decoration:none;line-height:1}
.tel a:hover{color:var(--orange-text)}
.tel .i{color:var(--orange);width:24px;height:24px}
.tel .r{margin-left:auto;display:flex;gap:8px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.mini h4{font-size:var(--t-11);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mini ol{counter-reset:n;display:grid;gap:4px}
.mini ol li{display:flex;gap:8px;font-size:var(--t-13);font-weight:600;color:var(--heading)}
.mini ol li::before{counter-increment:n;content:counter(n) ".";color:var(--orange-text);font-weight:800}
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 8px}
.outcome{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);font-weight:700;color:var(--heading);text-align:left;line-height:1.25}
.outcome:hover{border-color:var(--navy-line);background:var(--navy-soft)}
.outcome kbd{width:26px;height:26px;border-radius:var(--r-sm);background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:800 var(--t-13) var(--font);flex:none}
.outcome.two kbd{background:var(--orange-deep)}
.cbrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.cbrow .l{color:var(--muted);font-weight:600;font-size:var(--t-13)}
.cbrow .chip{height:32px;cursor:pointer}
.cbrow .chip small{font-weight:500;color:var(--muted)}
.cbrow .chip.navy small{color:rgba(255,255,255,.75)}
.cbrow .inp{width:160px;height:32px;font-size:var(--t-13)}
.uitleg{font-size:var(--t-13);color:var(--muted);margin:8px 0 16px}
.uitleg b{color:var(--text)}
.plan{border:1px solid var(--plan-rand);background:var(--plan-bg);border-radius:var(--r);padding:16px}
.plan h3{display:flex;align-items:center;gap:10px;font-size:var(--t-16)}
.plan h3 kbd{width:26px;height:26px;border-radius:var(--r-sm);background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:800 var(--t-13) var(--font);flex:none}
.plan .sub{color:var(--muted);font-size:var(--t-13);margin:4px 0 12px}
.calendly{height:220px;border:1px dashed var(--plan-dash);border-radius:var(--r-sm);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-weight:600;text-align:center;padding:0 16px}
.calendly .i{width:28px;height:28px;color:var(--blue)}
.shortcuts{font-size:var(--t-12);color:var(--muted);margin-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.shortcuts kbd{border:1px solid var(--line-strong);border-radius:4px;padding:0 5px;font:700 var(--t-11)/18px var(--font);background:var(--card);color:var(--text-2)}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat3 div{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;text-align:center}
.stat3 b{display:block;font-size:var(--t-22);font-weight:800;color:var(--heading);line-height:1.1}
.stat3 span{font-size:var(--t-12);color:var(--muted);font-weight:600}
.bars li{display:grid;grid-template-columns:84px 1fr 32px;align-items:center;gap:10px;font-size:var(--t-13);padding:6px 0}
.bars .bar{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bars .bar i{display:block;height:100%;background:var(--orange);border-radius:4px}
.bars .n{text-align:right;font-weight:700;color:var(--heading)}
.recent li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-13)}
.recent li:last-child{border-bottom:0}
.recent li > div{min-width:0}
.recent .c{font-weight:600;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent .t{color:var(--muted);white-space:nowrap}
.counter{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);height:40px;padding:0 4px}
.counter b{padding:0 10px;font-weight:700;color:var(--heading)}
.counter .ibtn{width:32px;height:32px}
.lead-since{font-size:var(--t-12);color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:12px}
.upload{border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:var(--t-13);color:var(--muted);flex-wrap:wrap}
.upload .btn{height:32px}

/* Trajecten */
.pipe{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-bottom:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.pipe .step{padding:14px 16px;border-right:1px solid var(--line);position:relative;min-width:0}
.pipe .step:last-child{border-right:0}
.pipe .step .l{font-size:var(--t-12);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe .step .l::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));flex:none}
.pipe .step .n{font-size:var(--t-26);font-weight:800;color:var(--heading);line-height:1.1;margin-top:4px;letter-spacing:-.02em}
.pipe .step .m{font-size:var(--t-12);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe .step .bar{height:4px;background:var(--surface-2);border-radius:2px;margin-top:10px;overflow:hidden}
.pipe .step .bar i{display:block;height:100%;background:var(--c,var(--navy-line))}
.board{display:grid;grid-template-columns:repeat(6,minmax(176px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--col);border:1px solid var(--line);border-radius:var(--r);padding:10px;min-width:0}
.col .colh{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-weight:700;color:var(--heading);font-size:var(--t-13)}
.col .colh .cnt{margin-left:auto;font-size:var(--t-12);color:var(--muted);font-weight:700}
.col .colh::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));flex:none}
.col .cards{display:grid;gap:8px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;box-shadow:var(--shadow-sm);display:grid;gap:6px}
.tcard .n{font-weight:700;color:var(--heading);font-size:var(--t-13);line-height:1.3}
.tcard .meta{display:flex;align-items:center;gap:6px;font-size:var(--t-12);color:var(--muted)}
.tcard .meta .avatar{width:20px;height:20px;font-size:var(--t-11)}
.tcard .meta .d{margin-left:auto;font-weight:600}
.tcard .meta .d.warn{color:var(--orange-text)}
.tcard .nx{font-size:var(--t-12);color:var(--text-2);display:flex;gap:6px;align-items:flex-start;border-top:1px solid var(--line);padding-top:6px}
.tcard .nx .i{width:14px;height:14px;margin-top:2px;color:var(--muted)}
.col .add{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--t-13);font-weight:600;padding:8px 4px 2px;min-height:40px;box-sizing:border-box}
.col .add:hover{color:var(--heading)}

/* Start */
.greet{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;margin-bottom:16px}
.greet h1{font-size:var(--t-32);line-height:1.15}
.greet .s{color:var(--muted);margin-top:6px}
.daycard{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:12px 16px;min-width:240px;box-shadow:var(--shadow-sm)}
.daycard .l{font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.daycard .v{font-size:var(--t-16);font-weight:700;color:var(--heading);margin-top:2px}
.daycard .v b{color:var(--orange-text);font-weight:800}
.daycard .bar{height:6px;background:var(--surface-2);border-radius:3px;margin-top:8px;overflow:hidden}
.daycard .bar i{display:block;height:100%;width:30%;background:var(--orange)}
.goal{background:var(--navy);color:#fff;border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.goal .l{font-size:var(--t-11);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#f6a77c}
.goal .t{font-size:var(--t-16);font-weight:700;flex:1;min-width:240px}
.goal .mets{display:flex;gap:24px}
.goal .met{font-size:var(--t-12);color:rgba(255,255,255,.8)}
.goal .met b{display:block;color:#fff;font-size:var(--t-18);font-weight:800;line-height:1.1}
.short{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.short a{display:flex;gap:14px;align-items:flex-start;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--text);box-shadow:var(--shadow-sm)}
.short a:hover{border-color:var(--line-strong);text-decoration:none;box-shadow:var(--shadow-md)}
.short .ic{width:40px;height:40px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--navy-soft);color:var(--heading);flex:none}
.short a.pri .ic{background:var(--orange);color:#fff}
.short .n{font-weight:700;color:var(--heading);display:flex;align-items:center;gap:6px}
.short .n .i{width:14px;height:14px;color:var(--muted)}
.short .d{font-size:var(--t-13);color:var(--muted);margin-top:2px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:start}
.todo-l li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.todo-l li:last-child{border-bottom:0}
.todo-l .box{margin-top:2px}
.todo-l .t{font-weight:600;color:var(--heading);cursor:pointer}
.todo-l .m{font-size:var(--t-12);color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.todo-l li.done .t{text-decoration:line-through;color:var(--muted);font-weight:500}
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:4px;font-size:var(--t-11);font-weight:700;background:var(--surface-2);color:var(--text-2);letter-spacing:.02em;white-space:nowrap}
.tag.os{background:var(--navy-soft);color:var(--heading)}
.tag.warn{background:var(--amber-soft);color:var(--amber-text)}
.tag .i{width:12px;height:12px}
.teamrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.teamrow > div{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:flex;align-items:center;gap:10px;background:var(--inset)}
.teamrow .n{font-weight:700;color:var(--heading)}
.teamrow .s{font-size:var(--t-12);color:var(--muted)}
.teamrow .bar{height:4px;background:var(--line);border-radius:2px;margin-top:4px;width:120px;overflow:hidden}
.teamrow .bar i{display:block;height:100%;background:var(--green)}
.agenda-pts li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-14);align-items:flex-start}
.agenda-pts li:last-child{border-bottom:0}
.agenda-pts .n{width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green-text);font-size:var(--t-11);font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.agenda-pts .w{color:var(--muted);font-size:var(--t-12);margin-left:auto;white-space:nowrap;padding-top:3px}
.msgs-l li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.msgs-l li:last-child{border-bottom:0}
.msgs-l .b{flex:1;font-size:var(--t-14);min-width:0}
.msgs-l .b .w{font-weight:700;color:var(--heading)}
.msgs-l .b .at{color:var(--blue-text);font-weight:600}
.msgs-l .b .ctx{font-size:var(--t-12);color:var(--muted);margin-top:2px}
.msgs-l .r{display:flex;gap:4px;align-items:center}

/* Agenda */
.ag-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ag-tools .seg{margin-right:auto}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--t-13);color:var(--text-2);padding:10px 16px;border-bottom:1px solid var(--line)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;background:var(--c)}
.cal-wrap{overflow-x:auto}
.cal{min-width:820px;display:grid;grid-template-columns:56px repeat(7,1fr)}
.cal .dh{background:var(--card);border-bottom:1px solid var(--line);padding:8px 8px;font-size:var(--t-12);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-left:1px solid var(--line)}
.cal .dh b{display:block;font-size:var(--t-16);color:var(--heading);text-transform:none;letter-spacing:0}
.cal .dh.today b{color:var(--orange-text)}
.cal .dh.today{background:var(--orange-soft)}
.cal .corner{border-bottom:1px solid var(--line);background:var(--card)}
.cal .allday{border-left:1px solid var(--line);border-bottom:1px solid var(--line);min-height:34px;padding:4px}
.cal .allday-l{font-size:var(--t-11);color:var(--muted);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--line);text-align:right}
.cal .hours{position:relative}
.cal .hours div{height:40px;font-size:var(--t-11);color:var(--muted);text-align:right;padding-right:8px;transform:translateY(-7px);font-weight:600}
.cal .day{position:relative;border-left:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 40px;height:640px}
.cal .day.today{background-color:var(--today)}
.ev{position:absolute;left:4px;right:4px;border-radius:var(--r-sm);padding:3px 8px;font-size:var(--t-12);line-height:1.3;overflow:hidden;border:1px solid var(--eb);background:var(--ebg);color:var(--ec);border-left-width:3px}
.ev b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev span{opacity:.9;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.blue{--eb:var(--cal-blue-b);--ebg:var(--cal-blue-bg);--ec:var(--cal-blue-c)}
.ev.green{--eb:var(--cal-green-b);--ebg:var(--cal-green-bg);--ec:var(--cal-green-c)}
.ev.orange{--eb:var(--cal-orange-b);--ebg:var(--cal-orange-bg);--ec:var(--cal-orange-c)}
.ev.red{--eb:var(--cal-red-b);--ebg:var(--cal-red-bg);--ec:var(--cal-red-c)}
.ev.purple{--eb:var(--cal-purple-b);--ebg:var(--cal-purple-bg);--ec:var(--cal-purple-c)}
.ev.allday{position:static;display:block;border-left-width:3px}
.cal .now{position:absolute;left:0;right:0;top:340px;height:2px;background:var(--orange);z-index:1}
.cal .now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.people{display:flex;gap:0;align-items:center}
.people .avatar{border:2px solid var(--card);margin-left:-6px;box-sizing:content-box}
.people .avatar:first-child{margin-left:0}

/* To-do */
.todo-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.newtask{display:grid;grid-template-columns:1fr 150px 160px auto;gap:8px;align-items:end;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--inset);border-radius:var(--r) var(--r) 0 0;margin:0}
.wk{padding:4px 20px 8px}
.wk h3{display:flex;align-items:center;gap:8px;font-size:var(--t-13);color:var(--heading);padding:12px 0 6px;flex-wrap:wrap}
.wk h3 .cnt{font-size:var(--t-12);color:var(--muted);font-weight:600}
.wk h3 .r{margin-left:auto;font-weight:500;color:var(--muted);font-size:var(--t-12)}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);min-height:44px}
.task:last-child{border-bottom:0}
.task .t{font-weight:600;color:var(--heading);cursor:pointer}
.task .m{font-size:var(--t-12);color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.task .r{display:flex;gap:2px;align-items:center}
.task.done .t{text-decoration:line-through;color:var(--muted);font-weight:500}
.task .dl{display:inline-flex;align-items:center;gap:4px}
.task .dl.late{color:var(--red-text);font-weight:700}
.wkside .pers{display:grid;gap:8px}
.wkside .pers li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm)}
.wkside .pers .n{font-weight:700;color:var(--heading);flex:1;min-width:0}
.wkside .pers .s{font-size:var(--t-12);color:var(--muted);font-weight:500}
.wkside .pers .bar{width:60px;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;flex:none}
.wkside .pers .bar i{display:block;height:100%;background:var(--green)}

/* Dialoog en toast */
.modal{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{width:520px;max-width:100%;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.modal .mh{padding:20px 24px 0;display:flex;gap:12px;align-items:flex-start}
.modal .mh h2{font-size:var(--t-18);line-height:1.3;padding-top:8px}
.modal .mh .ibtn{margin-left:auto;margin-top:-6px;margin-right:-8px}
.modal .mb{padding:12px 24px 4px}
.modal .mb p{color:var(--muted);font-size:var(--t-13);margin-bottom:14px}
.modal .mf{padding:16px 24px 20px;display:flex;justify-content:flex-end;gap:8px}
.warn-ic{width:40px;height:40px;border-radius:50%;background:var(--red-soft);color:var(--red-text);display:inline-flex;align-items:center;justify-content:center;flex:none}
.toast{position:fixed;top:calc(var(--demobar) + 16px);right:16px;z-index:70;width:380px;max-width:calc(100% - 32px);background:var(--card);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 12px 12px 14px;display:flex;gap:10px;align-items:flex-start}
.toast .ic{color:var(--green);margin-top:1px}
.toast .t{flex:1;font-size:var(--t-13);color:var(--text)}
.toast .t b{color:var(--heading)}
.toast .t small{display:block;color:var(--muted);margin-top:2px}
.toast .ibtn{margin:-6px -6px -6px 0}

/* Componenten */
.comp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.comp .cb{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0}
.comp-grid > .card{min-width:0}
.seg{max-width:100%;overflow-x:auto}
.tabs{overflow-x:auto}
.comp .cb.col{flex-direction:column;align-items:stretch}
.comp .lab{width:100%;font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.comp .lab:first-child{margin-top:0}
.empty{text-align:center;padding:28px 16px;color:var(--muted);font-size:var(--t-13)}
.empty .ic{width:48px;height:48px;border-radius:50%;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);margin-bottom:10px}
.empty b{display:block;color:var(--heading);font-size:var(--t-14);margin-bottom:4px}
.skel{height:12px;border-radius:4px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--skel-hi) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sk 1.4s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spin{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--navy-line);border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.rowstate{display:grid;gap:6px;width:100%}
.rowstate div{display:flex;align-items:center;gap:10px;min-height:44px;flex-wrap:wrap;padding:6px 12px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--t-13)}
.rowstate div.hover{background:var(--hover-row)}
.rowstate div.sel{background:var(--blue-soft);border-color:var(--blue-rand)}
.rowstate div.dis{opacity:.5}
.rowstate div .k{margin-left:auto;font-size:var(--t-11);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* Mobiel */
.bottombar{display:none}
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .bel-grid{grid-template-columns:minmax(0,1fr)}
  .drawer .db{grid-template-columns:1fr}
  .drawer .dl{border-right:0;border-bottom:1px solid var(--line)}
  .pipe{grid-template-columns:repeat(3,1fr)}
  .pipe .step:nth-child(3){border-right:0}
  .pipe .step:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  .side{display:none}
  .topbar{padding:0 16px;gap:8px}
  .topbar .brand-m{display:inline-flex;min-height:40px}
  .search{max-width:none}
  .content{padding:16px 16px 84px}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--card);border-top:1px solid var(--line);z-index:30;padding:0 4px env(safe-area-inset-bottom)}
  .bottombar[hidden]{display:none}
  .bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:var(--t-11);font-weight:700;color:var(--muted);text-decoration:none;position:relative;min-width:0}
  .bottombar a[aria-current="page"]{color:var(--heading)}
  .bottombar a[aria-current="page"] .i{color:var(--orange)}
  .bottombar a .badge{position:absolute;top:8px;left:calc(50% + 6px);height:16px;min-width:16px;font-size:var(--t-11);padding:0 4px}
  .bottombar a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .todo-grid{grid-template-columns:minmax(0,1fr)}
  .g2{grid-template-columns:minmax(0,1fr)}
  .comp-grid{grid-template-columns:minmax(0,1fr)}
  .drawer{width:100%;top:var(--demobar)}
  .drawer .dh{padding:14px 16px}
  .drawer .dr,.drawer .dl{padding:16px}
  .drawer .df{padding:10px 16px}
  .drawer .df .btn{flex:1 1 auto}
  .drawer .df .sp{display:none}
}
@media (max-width:640px){
  .ph h1{font-size:var(--t-22)}
  .ph .acts{justify-content:flex-start;width:100%}
  .ph .acts .btn{height:40px;font-size:var(--t-13);padding:0 10px} /* tikdoel 40 px op een telefoon */
  .kpis{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi{padding:12px}
  .kpi .v{font-size:var(--t-22)}
  .kpi .spark{width:56px}
  .filters{padding:10px 12px}
  .filters .search{min-width:100%}
  .filters .count{margin-left:0;width:100%}
  .chip-sel select{max-width:150px}
  .search kbd{display:none}
  .topbar .acc > span:not(.avatar){display:none}
  .topbar .search{display:none}
  .topbar .sp{display:block}
  #m-search{display:inline-flex!important}
  .greet{grid-template-columns:1fr}
  .greet h1{font-size:var(--t-26)}
  .short{grid-template-columns:1fr}
  .goal .mets{width:100%}
  .outcomes{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .tel a{font-size:var(--t-22)}
  .tel .r{margin-left:0;width:100%}
  .facets{grid-template-columns:1fr}
  .newtask{grid-template-columns:1fr 1fr;padding:12px 16px}
  .newtask .f1{grid-column:1 / -1}
  .newtask .btn{grid-column:1 / -1}
  .wk{padding:4px 16px 8px}
  .card .ch,.card .cb{padding-left:16px;padding-right:16px}
  .tl li{grid-template-columns:1fr;gap:2px}
  .tl .w{font-size:var(--t-12)}
  .stat3 b{font-size:var(--t-18)}
  .ag-tools .seg{width:100%;margin-right:0}
  .ag-tools .seg button{flex:1;justify-content:center;padding:0 6px;font-size:var(--t-13)}
  .ag-tools .btn{flex:1 1 auto}
  .modal .mf{flex-direction:column-reverse}
  .modal .mf .btn{width:100%}
  .toast{width:auto;left:16px;right:16px}
  .teamrow{grid-template-columns:1fr}
  .comp .kpis-2{grid-template-columns:minmax(0,1fr)!important}
  .comp .cb.col > *{min-width:0;max-width:100%}
  .tabs{min-width:0}
  .comp .cb{overflow-x:auto}
  .tbl .pop{right:auto;left:0}
  .counter{height:36px}
  /* tabel wordt kaartlijst */
  table.tbl{min-width:0;display:block}
  .tbl thead{display:none}
  .tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl tr{border-bottom:1px solid var(--line);padding:12px 16px;position:relative}
  .tbl td{height:auto;padding:0;border:0;white-space:normal}
  .tbl td.chk{position:absolute;right:16px;top:14px}
  .tbl td.cell{display:flex;gap:8px;align-items:baseline;justify-content:space-between;margin-top:6px;font-size:var(--t-13)}
  .tbl td.cell::before{content:attr(data-l);font-size:var(--t-11);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:none}
  .tbl td.cell > *{text-align:right}
  .tbl td.co-cell{padding-right:36px}
  .tbl .co .n{max-width:none;font-size:var(--t-14)}
  .tbl td.ac{margin-top:10px}
  .tbl td.chk,.tbl td.ac{width:auto}
  .tbl .acts .ibtn{width:36px;height:36px}
  .toolbar .r{margin-left:0;width:100%}
  .drawer .dh h2{font-size:var(--t-18)}
  .drawer .dh .meta .dot{display:none}
  .drawer .dh .meta{gap:6px 10px}
  .tbl .acts{justify-content:flex-start;flex-wrap:wrap;gap:0}
  .tbl .own{justify-content:flex-end}
  .tbl .two small{text-align:right}
  .tfoot{padding:12px 16px}
  .pager{margin-left:0;width:100%;justify-content:space-between}
}
@media (max-width:420px){
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Aanvullingen uit de stijlgids (/stijl, ontwerp/STIJLGIDS.md): klein en gedeeld.
   .logo .merk: het beeldmerk via het token --merk (merk.svg, in het donker merk-paper.svg), zodat elke pagina hetzelfde logo tekent.
   .inl: een inline rij van icoon of avatar met tekst (legenda, eigenaar, vinkje met label).
   .empty .btn: ruimte tussen de uitleg en de knop in een lege toestand. */
.logo .merk{width:30px;height:24px;flex:none;background:var(--merk) center/contain no-repeat}
.inl{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-13);min-width:0}
.empty .btn{display:flex;width:max-content;margin:12px auto 0}