/* Wizt Sales – het bord is de interface: mat whiteboard, kaarten als magneetkaartjes, markerkleuren als betekenis. */
:root {
  --board: #eceee9;
  --paper: #ffffff;
  --ink: #1d2433;
  --ink-soft: #5c6472;
  --line: #d3d7cf;
  --blue: #2445a2;
  --red: #c23a2f;
  --green: #1f7a54;
  --orange: #cf7419;
  --purple: #6b4aa8;
  --rail: #1d2433;
  --radius-card: 6px;
  --radius-mag: 3px;
  --font: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 15px/1.5 var(--font); color: var(--ink); background: var(--board);
  font-variant-numeric: tabular-nums;
}
body.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2 { margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1rem; font-weight: 650; margin-bottom: .75rem; }
p { margin: 0 0 .5rem; }
code { font-size: .9em; background: var(--board); padding: 0 .3em; border-radius: 3px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.muted { color: var(--ink-soft); }
.red { color: var(--red); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* ---------- Rail (navigatie) ---------- */
.rail { background: var(--rail); color: #fff; padding: 1.25rem .75rem; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; padding: 0 .6rem 1.5rem; }
.brand-mark { width: 22px; height: 16px; border: 2px solid currentColor; border-radius: 2px; position: relative; flex: none; }
.brand-mark::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -6px; height: 2px; background: currentColor; }
.login h1 .brand-mark { color: var(--ink); margin-right: .5rem; display: inline-block; vertical-align: middle; }
.rail nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.rail nav .nav-blok a { color: #c9cfdb; text-decoration: none; padding: .5rem .6rem; border-radius: 4px; }
.rail nav .nav-blok a:hover { color: #fff; background: rgba(255,255,255,.07); }
.rail nav .nav-blok a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 #fff; }
.me { margin-top: auto; border-top: 1px solid rgba(255,255,255,.15); padding: 1rem .6rem 0; display: grid; gap: .25rem; }
.me a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.me .link { color: #c9cfdb; padding: 0; }
.nav-toggle { display: none; }

/* ---------- Bord ---------- */
.board {
  padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem; min-width: 0;
  background-image: radial-gradient(circle, rgba(29,36,51,.07) 1px, transparent 1.2px);
  background-size: 24px 24px;
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.crumb { margin: 0 0 .25rem; font-size: .9rem; }
.crumb a { color: var(--ink-soft); }
.hint { margin: -1rem 0 1rem; font-size: .9rem; }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.25rem; margin-bottom: 1rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.grid > .card { margin: 0; }
.span-2 { grid-column: span 2; }
.empty { color: var(--ink-soft); margin: 0; }

/* Omzetdoel */
.target { display: grid; gap: 1rem; }
.target h2 { margin-bottom: .25rem; color: var(--ink-soft); font-weight: 500; }
.figure { font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
.figure .muted { font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 0; }
.stats dt { font-size: .85rem; color: var(--ink-soft); }
.stats dd { margin: 0; font-size: 1.2rem; font-weight: 650; }

progress { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--board); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--board); }
progress::-webkit-progress-value { background: var(--blue); border-radius: 4px; }
progress::-moz-progress-bar { background: var(--blue); border-radius: 4px; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; margin-bottom: .9rem; font-size: .92rem; }
.bar progress { grid-column: span 2; height: 6px; }

/* Rijen */
.rows { list-style: none; padding: 0; margin: 0; }
.rows li { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rows li:first-child { border-top: 0; }
.rows li > a, .rows li > span:not(.magnet):not(.row-meta) { flex: 1; min-width: 12rem; }
.rows li > a { color: var(--ink); text-decoration: none; }
.rows li > a:hover strong { text-decoration: underline; }
.row-meta { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.row-meta.red { color: var(--red); }

/* Magneten: eigenaar van een klant/deal/bericht */
.magnet { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; vertical-align: -1px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.25); background: var(--blue); }
.m-groen { background: var(--green); } .m-oranje { background: var(--orange); } .m-paars { background: var(--purple); }

.badge { display: inline-block; font-size: .78rem; font-weight: 650; padding: 0 .4rem; border-radius: 3px; background: var(--board); color: var(--ink-soft); }
.badge-green { color: var(--green); background: #e3f1ea; }
.badge-red { color: var(--red); background: #f8e5e3; }

/* ---------- Pipeline: magneetkaartjes op het bord ---------- */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: 1rem; }
.col { border-top: 4px solid var(--ink-soft); padding-top: .6rem; min-height: 50vh; }
.col-lead { border-color: #8a93a3; } .col-contact { border-color: var(--purple); } .col-advies { border-color: var(--orange); }
.col-offerte { border-color: var(--blue); } .col-onderhandeling { border-color: var(--ink); }
.col-gewonnen { border-color: var(--green); } .col-verloren { border-color: var(--red); }
.col-gewonnen .magcard, .col-verloren .magcard { opacity: .75; }
.col header { display: flex; flex-direction: column; margin-bottom: .75rem; }
.col h2 { margin: 0; font-size: .95rem; }
.col header span { font-size: .82rem; }
.drop { display: grid; gap: .75rem; min-height: 120px; border-radius: 6px; padding: 4px; transition: background .15s; }
.drop.over { background: rgba(36,69,162,.08); }
.magcard { position: relative; background: var(--paper); border-radius: var(--radius-mag); padding: 1rem .8rem .7rem;
  box-shadow: 0 1px 0 var(--line), 0 2px 6px rgba(29,36,51,.08); cursor: grab; }
.magcard > .magnet { position: absolute; top: -5px; left: 50%; margin-left: -6px; }
.magcard a { color: var(--ink); text-decoration: none; display: grid; }
.magcard a span { font-size: .9rem; color: var(--ink-soft); }
.magcard a:hover strong { text-decoration: underline; }
.card-meta { font-size: .82rem; margin: .4rem 0 0; color: var(--ink-soft); }
.card-meta.red { color: var(--red); }
.magcard.dragging { opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  .magcard.dropped { animation: snap .25s ease-out; }
  @keyframes snap { 0% { transform: translateY(-4px) scale(1.02); } 100% { transform: none; } }
}

/* ---------- Formulieren ---------- */
label { display: grid; gap: .25rem; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid #c3c8bf; border-radius: 4px; padding: .5rem .6rem; width: 100%; min-width: 0; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: 2px solid rgba(36,69,162,.2); outline-offset: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; align-items: end; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .btn { justify-self: start; }
.narrow { max-width: 640px; }
.inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline select { width: auto; }
.note-form { display: grid; gap: .5rem; margin-bottom: 1rem; }
.btn { font: inherit; font-weight: 650; background: var(--ink); color: #fff; border: 0; border-radius: 4px; padding: .55rem 1rem; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.btn:hover { background: var(--blue); }
.btn-quiet { background: var(--paper); color: var(--ink); border: 1px solid #c3c8bf; }
.btn-quiet:hover { background: var(--board); }
.btn-danger { background: var(--red); margin-top: 1rem; }
.link { font: inherit; background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: 1rem; }
.inline-h { display: inline; margin: 0; }
.add { position: relative; }
.add[open] > form { position: absolute; right: 0; top: 3rem; width: min(720px, 90vw); z-index: 5; box-shadow: 0 10px 30px rgba(29,36,51,.15); }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filters input { flex: 1 1 260px; width: auto; }
.filters select { width: auto; }
.filters.compact { margin: 0; }
.margin-live { margin: 0; font-weight: 650; }
.margin-live.red { color: var(--red); } .margin-live.ok { color: var(--green); }
.lost[hidden] { display: none; }

/* Flash */
.flash { padding: .7rem 1rem; border-radius: 4px; margin-bottom: 1rem; border-left: 4px solid var(--blue); background: var(--paper); }
.flash-success { border-color: var(--green); } .flash-error { border-color: var(--red); } .flash-warning { border-color: var(--orange); }

/* Tabellen */
.table-wrap { overflow-x: auto; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .8rem; color: var(--ink-soft); font-weight: 600; padding: .75rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .6rem 1rem; border-top: 1px solid var(--line); vertical-align: middle; }
td a { color: var(--ink); font-weight: 600; }
.num { text-align: right; }
tr.inactive td { color: var(--ink-soft); opacity: .6; }
tr.warn td { color: var(--red); }
td.actions { white-space: nowrap; }
td.actions > * { display: inline-block; margin-right: .75rem; vertical-align: middle; }
.prices input { padding: .35rem .5rem; }
.prices input.short { max-width: 7rem; text-align: right; }
.table-wrap > .btn { margin: 1rem; }

/* Tijdlijn & chat */
.timeline, .messages { list-style: none; margin: 0; padding: 0; }
.timeline li, .messages li { display: flex; gap: .7rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.timeline li:first-child, .messages li:first-child { border-top: 0; }
.timeline .magnet, .messages .magnet { margin-top: .35rem; }
.chat { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: start; }
.channels { display: grid; gap: 2px; margin: 0; }
.channels a { color: var(--ink); text-decoration: none; padding: .35rem .5rem; border-radius: 4px; }
.channels a[aria-current="page"] { background: var(--board); font-weight: 650; }
.channels form { margin-top: .75rem; flex-wrap: nowrap; }
.chat-main { margin: 0; display: flex; flex-direction: column; height: calc(100vh - 6rem); }
.chat-main h1 { font-size: 1.2rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.messages { flex: 1; overflow-y: auto; padding-right: .5rem; }
.composer { display: flex; gap: .5rem; align-items: flex-end; padding-top: .75rem; border-top: 1px solid var(--line); }

/* Taken */
.tabs { display: flex; gap: .25rem; }
.tabs a { padding: .4rem .8rem; border-radius: 4px; color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--paper); border: 1px solid var(--line); font-weight: 650; }
.tasks li.done span:not(.row-meta) { text-decoration: line-through; color: var(--ink-soft); }
.check { width: 22px; height: 22px; border: 2px solid var(--ink-soft); border-radius: 4px; background: var(--paper); cursor: pointer; color: var(--green); font-weight: 800; line-height: 1; padding: 0; }

/* ---------- Login ---------- */
.login-wrap > .flash { width: min(380px, 100%); margin: 0; }
body.guest { min-height: 100vh; }
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem; background-image: radial-gradient(circle, rgba(29,36,51,.08) 1px, transparent 1.2px); background-size: 24px 24px; }
.login { width: min(380px, 100%); display: grid; gap: .6rem; padding: 2rem; box-shadow: 0 2px 0 var(--line), 0 12px 32px rgba(29,36,51,.1); }
.login.wide { width: min(520px, 100%); }
.login h1 { font-size: 1.4rem; margin-bottom: .5rem; }
.login .btn { margin-top: .5rem; padding: .7rem; }
.code { font-size: 1.6rem; letter-spacing: .3em; text-align: center; }
.secret { font-size: 1.05rem; letter-spacing: .08em; word-break: break-all; background: var(--board); padding: .6rem .8rem; border-radius: 4px; font-weight: 650; }
.qr { display: grid; place-items: center; min-height: 10px; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; }

/* ---------- Mobiel ---------- */
@media (max-width: 860px) {
  body.app { grid-template-columns: 1fr; }
  .rail { height: auto; position: sticky; z-index: 10; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: .75rem 1rem; }
  .brand { padding: 0; }
  .nav-toggle { display: block; font: inherit; color: #fff; background: none; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: .3rem .8rem; }
  .rail nav { display: none; flex-basis: 100%; padding-top: .75rem; }
  .rail nav.open { display: flex; }
  .grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .chat { grid-template-columns: 1fr; }
  .channels { display: flex; flex-wrap: wrap; }
  .channels h2 { flex-basis: 100%; margin-bottom: .25rem; }
  .chat-main { height: 75vh; }
  .add[open] > form { position: static; width: auto; }
  .figure { font-size: 1.8rem; }
}
.page-head .filters.compact { margin-left: auto; }
.me .link { justify-self: start; }
.consent { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .35rem; }
.consent input[name="how"] { width: 13rem; padding: .25rem .45rem; font-size: .85rem; }
.check-label span { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.check-label input { width: auto; }
.link.red { color: var(--red); }
.prices td:not(.num) input.short { text-align: left; }
.src{display:inline-block;font-size:.75rem;font-weight:650;padding:0 .4rem;border-radius:3px;background:var(--board);color:var(--ink-soft);white-space:nowrap}
.src-instagram{color:#b3306b;background:rgba(179,48,107,.1)}.src-pinterest{color:#c21f2e;background:rgba(194,31,46,.1)}.src-nieuwsbrief{color:var(--purple);background:rgba(107,74,168,.1)}.src-linkedin{color:#1c64b8;background:rgba(28,100,184,.1)}
.green { color: var(--green); }
.ideas { grid-auto-columns: minmax(250px, 1fr); }
.col-i-idee { border-color: #8a93a3; } .col-i-testen { border-color: var(--orange); } .col-i-loopt { border-color: var(--green); } .col-i-gestopt { border-color: var(--red); }
.col-i-gestopt .magcard { opacity: .7; }
.ideas .magcard { cursor: default; display: grid; gap: .4rem; }
.idea-cat { font-size: .78rem; color: var(--ink-soft); margin: 0; }
.idea-status select { width: auto; flex: 1; padding: .3rem .4rem; font-size: .85rem; }
.idea-status .btn { padding: .3rem .6rem; font-size: .85rem; }
.idea-edit[open] > summary { margin-bottom: .5rem; }
.idea-edit .form-grid { grid-template-columns: 1fr; gap: .5rem; }
.src-facebook { color: #1c64b8; background: rgba(28,100,184,.1); }
.nav-count { display: inline-block; min-width: 1.3em; padding: 0 .35em; margin-left: .35rem; border-radius: 1em; background: var(--red); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.5; }
.nav-count[hidden] { display: none; }
.dm-head { margin-top: 1rem; }
.channels a { display: flex; align-items: center; gap: .4rem; }
.notify-btn { margin-top: 1rem; font-size: .85rem; white-space: normal; text-align: left; }
.chat-main > .row-meta { margin-top: -.5rem; }
.msg-actions { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: flex-start; margin-top: .3rem; font-size: .82rem; opacity: 0; transition: opacity .12s; }
.messages li:hover .msg-actions, .msg-actions:focus-within, .msg-actions:has(details[open]) { opacity: 1; }
@media (hover: none) { .msg-actions { opacity: 1; } }
.to-task[open] { flex-basis: 100%; }
.task-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .5rem; align-items: end; background: var(--board); padding: .6rem; border-radius: 4px; }
.task-form label { font-size: .78rem; }
.task-form input, .task-form select { padding: .35rem .45rem; font-size: .85rem; }
.task-form .row-meta { grid-column: 1 / -1; margin: 0; }
@media (max-width: 860px) { .task-form { grid-template-columns: 1fr; } }
.toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); max-width: 90vw; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 4px; font-weight: 600; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.keys { border-left: 4px solid var(--orange); }
.keys .secret { font-size: .9rem; }

/* ---------- A Million Wizard ---------- */
.btn-small { padding: .3rem .6rem; font-size: .85rem; }
.wiz-board-head { margin: 1.5rem 0 .75rem; align-items: center; }
.wiz-board-head h2 { margin: 0; font-size: 1.2rem; }

.wizard-board .col { min-height: 30vh; }
.wizard-board .magcard { cursor: default; }
.col-w-lijst { border-color: #8a93a3; } .col-w-linkedin { border-color: #1c64b8; } .col-w-mail { border-color: var(--purple); }
.col-w-sample { border-color: var(--orange); } .col-w-gebeld { border-color: var(--blue); } .col-w-gesprek { border-color: var(--green); }
.wiz-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.wiz-actions .btn { white-space: normal; text-align: left; }
.wiz-actions .link.muted { color: var(--ink-soft); font-size: .82rem; }
.wiz-strip { display: grid; grid-template-columns: 1fr minmax(120px, 220px) auto; gap: 1rem; align-items: center; border-left: 4px solid var(--green); }
.wiz-strip h2 { margin-bottom: .2rem; }
.wiz-strip p { margin: 0; }
@media (max-width: 860px) { .wiz-strip { grid-template-columns: 1fr; } }
.wiz-card { border-left: 4px solid var(--green); }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0 0 .9rem; counter-reset: step; }
.steps li { counter-increment: step; font-size: .82rem; padding: .25rem .6rem .25rem .45rem; border-radius: 3px; background: var(--board); color: var(--ink-soft); }
.steps li::before { content: counter(step) ". "; font-weight: 700; }
.steps li.done { background: #e3f1ea; color: var(--green); }
.steps li.done::before { content: "✓ "; }
.steps li.now { background: var(--ink); color: #fff; font-weight: 650; }
.wiz-scripts { margin-top: 1rem; }
.script-mini { border-top: 1px solid var(--line); padding: .75rem 0; }
.script-mini h3 { font-size: .95rem; margin: 0 0 .35rem; display: flex; gap: .6rem; align-items: baseline; }
.script-mini h3 .link { font-size: .82rem; font-weight: 500; }
.script-body { background: var(--board); border-radius: 4px; padding: .75rem .9rem; margin: .25rem 0 .75rem; font-size: .92rem; }
.script h2 { margin-bottom: .5rem; }
.script-actions { align-items: flex-start; }
.script-edit[open] { flex-basis: 100%; }
.content-week.is-now { border-left: 4px solid var(--blue); }
.content-week h2 .muted { font-weight: 500; }
.content-row > span:nth-child(2) { flex: 1; min-width: 14rem; }
.content-row.st-geplaatst strong { color: var(--ink-soft); }
.content-row.st-klaar strong::after { content: " · klaar"; color: var(--green); font-weight: 650; font-size: .85rem; }
.status-form select { width: auto; padding: .3rem .4rem; font-size: .85rem; }
.hint-inline { margin: 0 0 1rem; font-size: .9rem; }
.aftercare input[type="date"] { width: 9.5rem; padding: .3rem .4rem; }
.aftercare input[type="checkbox"] { width: auto; }
.aftercare td { vertical-align: top; }
.table-note { padding: 0 1rem 1rem; }
.aftercare-fields { border: 1px solid var(--line); border-radius: 4px; padding: .9rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; align-items: end; margin: 0; }
.aftercare-fields legend { font-weight: 650; padding: 0 .3rem; }
.aftercare-fields .full { grid-column: 1 / -1; }
.src-warm { color: var(--green); background: rgba(31,122,84,.1); }
.src-doorverwijzing { color: var(--orange); background: rgba(207,116,25,.1); }
.content-row > .src { flex: none; min-width: 0; }
.aftercare .badge { white-space: nowrap; }
.wizard-board { grid-auto-columns: minmax(165px, 1fr); }
.rows li.content-row > span.src { flex: none; min-width: 0; }
.tabs { flex-wrap: wrap; }

/* ---------- Nacalculatie ---------- */
.calc-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.calc-compare > div { background: var(--board); border-radius: 4px; padding: .8rem 1rem; }
.calc-compare p { margin: 0; }
.calc-fig { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.calc-fig .muted { font-size: .85rem; font-weight: 500; }
.calc-result { border-left: 4px solid var(--green); }
.calc-result.is-low { border-left-color: var(--red); }
.cost-table td { vertical-align: top; }
.cost-add { margin-top: 1rem; }
progress.leak::-webkit-progress-value { background: var(--red); }
progress.leak::-moz-progress-bar { background: var(--red); }
@media (max-width: 860px) { .calc-compare { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.cost-table td:first-child { white-space: nowrap; }

/* ---------- Samenvoeging v9: Vandaag, taken, offertes, kansen ---------- */
.nav-group { display: block; margin: .9rem .6rem .2rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #8b93a3; }
.nav-soft { background: rgba(255,255,255,.18); }
.today-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.today-summary a { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: .45rem .8rem; color: var(--ink); text-decoration: none; font-size: .9rem; }
.today-summary a:hover { border-color: var(--blue); }
.task-stack { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.section-h { font-size: 1.05rem; margin: 1rem 0 .75rem; }
.task-card { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid #aab1bd; border-radius: var(--radius-card); padding: .9rem 1.1rem; display: grid; gap: .3rem; }
.task-card.tone-urgent { border-left-color: var(--red); }
.task-card.tone-normal { border-left-color: var(--orange); }
.task-card h3 { margin: 0; font-size: 1rem; font-weight: 650; }
.task-top, .task-bottom { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.eyebrow { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.eyebrow a { color: var(--ink-soft); }
.amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.why { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.task-links { display: flex; align-items: center; gap: .9rem; font-size: .9rem; }
.prio { font-size: .8rem; font-weight: 650; padding: .2rem .6rem; border-radius: 3px; background: var(--board); }
.prio-urgent { color: var(--red); background: #f8e5e3; } .prio-normal { color: var(--orange); background: #fbeedf; }
.task-detail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.outcome-form { display: grid; gap: 1rem; margin-top: 1rem; }
.choices { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.choices legend { font-size: .88rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; padding: 0; }
.choice { display: flex; flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; color: var(--ink); border: 1px solid #c3c8bf; border-radius: 4px; padding: .45rem .6rem; cursor: pointer; background: var(--paper); }
.choice input { width: auto; margin: 0; }
.choice:has(input:checked) { border-color: var(--blue); background: rgba(36,69,162,.07); color: var(--blue); }
.value-box { background: var(--board); border-radius: 4px; padding: .7rem 1rem; }
.value-box p { margin: 0; }
.history { margin-top: 1.5rem; }
.side h2 { font-size: .9rem; margin: 1rem 0 .4rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; }
.pill { display: inline-block; font-size: .75rem; font-weight: 600; padding: .05rem .5rem; border-radius: 1em; background: var(--board); color: var(--ink-soft); }
.contact-line { font-size: .9rem; margin: 0 0 .5rem; }
.timeline.compact li { padding: .45rem 0; font-size: .88rem; }
.steps.process { margin: .6rem 0 0; }
.steps li.lost { background: #f8e5e3; color: var(--red); font-weight: 650; }
.next-step.is-missing { border-left: 4px solid var(--red); }
.next-step details { margin-top: .75rem; }
.steps-done-h { margin: 1rem 0 .25rem; }
.rows.compact li { padding: .35rem 0; font-size: .9rem; }
.stage-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.stage-chip { display: grid; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--ink-soft); border-radius: 4px; padding: .5rem .7rem; text-decoration: none; color: var(--ink); font-size: .85rem; }
.stage-chip strong { font-size: 1.3rem; }
.stage-chip.is-active { outline: 2px solid var(--blue); }
.stage-chip.attention { border-top-color: var(--red); }
.stage-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; border: 0; border-top: 0; background: var(--ink-soft); vertical-align: 1px; }
.stage-dot.col-lead { background: #8a93a3; } .stage-dot.col-contact { background: var(--purple); } .stage-dot.col-advies { background: var(--orange); } .stage-dot.col-offerte { background: var(--blue); } .stage-dot.col-onderhandeling { background: var(--ink); }
.quote-table tr.row-alert td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.quote-table tr.row-late td:first-child { box-shadow: inset 4px 0 0 var(--orange); }
.quote-table td { vertical-align: top; }
.candidate .task-bottom form { margin: 0; }
.candidate .inline select { width: auto; padding: .3rem .4rem; font-size: .85rem; }
.rule-list { margin: 1rem 0 0; padding-left: 1.2rem; font-size: .9rem; color: var(--ink-soft); display: grid; gap: .3rem; }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.person, .stat { text-decoration: none; color: var(--ink); margin: 0; display: grid; gap: .2rem; }
.person p, .stat p { margin: 0; }
.person:hover, .stat:hover { border-color: var(--blue); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.roles-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: -0.75rem 0 1rem; }
.role-chip { display: flex; flex-direction: row; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; background: var(--paper); border: 1px solid var(--line); border-radius: 1em; padding: .15rem .65rem; cursor: pointer; }
.role-chip input { width: auto; margin: 0; }
.role-chip:has(input:checked) { border-color: var(--green); color: var(--green); background: #e3f1ea; }
.open-steps { border-left: 4px solid var(--orange); }
a.check { display: inline-block; text-decoration: none; }
.rows li > a.check { flex: none; min-width: 0; width: 22px; height: 22px; }
.task-title { color: var(--ink); text-decoration: none; }
.task-title:hover { text-decoration: underline; }
@media (max-width: 860px) { .task-detail { grid-template-columns: minmax(0, 1fr); } .roles-form { margin-top: 0; } }
.rail nav { overflow-y: auto; min-height: 0; } .rail nav .nav-blok a { padding: .38rem .6rem; }
.stage-chip.col-lead { border-top-color: #8a93a3; } .stage-chip.col-contact { border-top-color: var(--purple); } .stage-chip.col-advies { border-top-color: var(--orange); }
.stage-chip.col-offerte { border-top-color: var(--blue); } .stage-chip.col-onderhandeling { border-top-color: var(--ink); }
.brand { padding-bottom: 1rem; }
.rail nav .nav-blok a { padding: .3rem .6rem; }
.nav-group { margin: .55rem .6rem .1rem; }
.me { padding-top: .6rem; }
[hidden] { display: none !important; }
.rows li > a.btn { flex: none; min-width: 0; color: var(--btn-fg, #fff); }

/* ---------- Nesten ---------- */
.nest-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.nest-grid > section:only-child { grid-column: 1 / -1; }
.nest-line { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; padding: .6rem 0; border-top: 1px solid var(--line); }
.nest-line:first-child { border-top: 0; }
.nest-line label { min-width: 0; }
.nest-line select { min-width: 9rem; }
.nest-line input[data-f="qty"] { width: 4.5rem; }
.nest-line input[data-f="w"], .nest-line input[data-f="h"] { width: 6rem; }
.nest-custom { display: flex; flex-wrap: wrap; gap: .6rem; }
.nest-line .link { font-size: 1.3rem; line-height: 1; padding: .3rem .5rem; }
.nest-summary .stats dd small { font-weight: 400; }
.nest-plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 1rem; }
.nest-fig { margin: 0 0 1rem; display: grid; gap: .5rem; }
.nest-svg { width: 100%; height: auto; display: block; }
.nest-plate { fill: #efe9dc; stroke: #8a8475; stroke-width: .6; }
.nest-usable { fill: none; stroke: #b3ab99; stroke-width: .4; stroke-dasharray: 2 1.5; }
.nest-piece { fill: #fff; stroke: var(--ink, #1d2433); stroke-width: .6; }
.nest-piece.is-custom { stroke-dasharray: 3 1.5; fill: #fff8e6; }
.nest-label { fill: var(--ink, #1d2433); text-anchor: middle; dominant-baseline: middle; font-family: inherit; }
.nest-steps { padding-left: 1.2rem; display: grid; gap: .35rem; }
.nest-calc-h { font-weight: 650; margin: .8rem 0 .2rem; }
.nest-calc { margin: 0; padding-left: 1.2rem; font-variant-numeric: tabular-nums; font-size: .92rem; }
@media (max-width: 760px) { .nest-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Gripp-koppeling ---------- */
.hook-status { display: grid; gap: 1rem; border-left: 4px solid var(--red); }
.hook-status.is-on { border-left-color: var(--green); }
.hook-status .btn-danger { margin-top: 0; }
.code-block { background: var(--board); border-radius: 4px; padding: .75rem .9rem; font-size: .82rem; overflow-x: auto; white-space: pre; margin: .25rem 0 1rem; }
.gripp-line { font-size: .85rem; color: var(--ink-soft); margin: .2rem 0 0; }

/* ---------- v12: rust, snelheid en mobiel ---------- */
input, select, textarea { font-weight: 400; }
input::placeholder, textarea::placeholder { color: #8a909b; }
.nowrap { white-space: nowrap; }
.amount, td.num { white-space: nowrap; }

/* Zoeken en vastleggen in het menu */
.rail-search { padding: 0 .1rem .5rem; }
.rail-search input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; padding: .45rem .6rem; font-size: .9rem; }
.rail-search input::placeholder { color: #a9b0bd; }
.rail-search input:focus { background: #fff; color: var(--ink); }
.rail-add { display: block; text-align: center; margin: 0 .1rem .75rem; background: #fff; color: var(--rail); padding: .45rem .6rem; }
.rail-add:hover { background: #e7ebf3; color: var(--rail); }
.tabbar { display: none; }

/* Vandaag */
.day-progress { display: flex; align-items: center; gap: .75rem; margin: -.75rem 0 1rem; font-size: .9rem; color: var(--ink-soft); }
.day-progress progress { flex: 1; max-width: 260px; height: 6px; }
.task-card .eyebrow a { color: var(--ink-soft); text-decoration: none; }
.task-card .eyebrow a:hover { text-decoration: underline; }
.when { font-weight: 600; }
.wiz-group { border-left-color: var(--green); background: linear-gradient(0deg, var(--paper), var(--paper)); }
.wiz-names { list-style: none; margin: .1rem 0 .2rem; padding: 0; display: grid; gap: .15rem; font-size: .92rem; }
.wiz-names a { color: var(--ink); font-weight: 600; text-decoration: none; }
.wiz-names a:hover { text-decoration: underline; }

/* Taak afronden */
.why .prio { margin-right: .35rem; vertical-align: 1px; }
.more-outcomes > summary { font-size: .9rem; }
.more-outcomes[open] > summary { margin-bottom: .5rem; }
.close-deal .choice-won:has(input:checked) { border-color: var(--green); background: #e3f1ea; color: var(--green); }
.close-deal .choice-lost:has(input:checked) { border-color: var(--red); background: #f8e5e3; color: var(--red); }
.close-deal .choice-won { color: var(--green); } .close-deal .choice-lost { color: var(--red); }
.btn-wide { width: 100%; padding: .75rem; }
#step-hint { font-weight: 400; }

/* Offertes: rustiger links */
.quote-table .row-title { font-weight: 650; color: var(--ink); text-decoration: none; }
.quote-table .row-title:hover, .quiet-link:hover { text-decoration: underline; }
.quiet-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.quote-table tbody tr[data-href] { cursor: pointer; }
@media (hover: hover) { .quote-table tbody tr[data-href]:hover td { background: rgba(36,69,162,.04); } }

/* Deal en klant */
.deal-summary { display: grid; gap: .9rem; }
.deal-summary .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.deal-summary .stats dd { font-size: 1.05rem; }
.edit-deal > summary { justify-self: start; width: max-content; }
.edit-deal[open] > summary { margin-bottom: 1rem; }
.contact-strip { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: center; margin: -1rem 0 1rem; font-size: .92rem; }
.contact-strip a { color: var(--ink); text-decoration: none; }
.contact-strip a:hover { text-decoration: underline; }

/* Zoeken, vastleggen, reeks */
.search-big { display: flex; gap: .5rem; margin-bottom: 1rem; }
.search-big input { font-size: 1.05rem; padding: .7rem .8rem; }
.empty-state { text-align: left; }
.empty-state p { margin: 0 0 .4rem; }
.quick-tabs { margin: -.5rem 0 1rem; }
.quick-form .choices { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.run-card { display: grid; gap: .6rem; }
.run-company { font-size: 1.4rem; margin: 0; }
.run-company a { color: var(--ink); text-decoration: none; }
.run-task { margin: 0; font-size: 1.05rem; }
.run-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .5rem; }
.run-actions form { margin: 0; }
.run-progress { width: 200px; height: 8px; }

/* ---------- Mobiel ---------- */
@media (max-width: 860px) {
  body.app { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .rail-search, .rail-add { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
            background: var(--rail); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -1px 0 rgba(255,255,255,.08); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; color: #b9c0cc; text-decoration: none; font-size: .7rem; padding: .25rem 0; border-radius: 6px; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); }
  .tabbar .tab-add svg { background: #fff; color: var(--rail); border-radius: 50%; padding: 3px; width: 26px; height: 26px; }
  .today-summary { flex-wrap: nowrap; overflow-x: auto; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .25rem; scrollbar-width: none; }
  .today-summary a { flex: none; white-space: nowrap; }
  .page-head .filters.compact { margin-left: 0; }
  .day-progress progress { max-width: none; }
  .search-big { flex-direction: column; }
  /* Tabellen als kaarten */
  .cards-on-mobile thead { display: none; }
  .cards-on-mobile, .cards-on-mobile tbody, .cards-on-mobile tr, .cards-on-mobile td { display: block; width: 100%; }
  .cards-on-mobile tr { padding: .8rem 1rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; }
  .cards-on-mobile tr:first-child { border-top: 0; }
  .cards-on-mobile td { border: 0; padding: 0; text-align: left; }
  .cards-on-mobile td.cell-main { grid-column: 1 / -1; }
  .cards-on-mobile td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
  .cards-on-mobile td[data-label="Volgende stap"] { grid-column: 1 / -1; }
  .cards-on-mobile tr.row-alert, .cards-on-mobile tr.row-late { box-shadow: inset 4px 0 0 var(--red); }
  .cards-on-mobile tr.row-late { box-shadow: inset 4px 0 0 var(--orange); }
  .quote-table tr.row-alert td:first-child, .quote-table tr.row-late td:first-child { box-shadow: none; }
  .contact-strip { margin-top: -.5rem; }
  .run-progress { width: 100%; }
}
@media (max-width: 860px) {
  .stage-summary { display: flex; overflow-x: auto; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .25rem; scrollbar-width: none; }
  .stage-chip { flex: none; min-width: 120px; }
}
.rows li > a.btn-quiet { color: var(--ink); }
.day-progress progress, progress.run-progress { background: var(--line); }
.day-progress progress::-webkit-progress-bar, progress.run-progress::-webkit-progress-bar { background: var(--line); }
@media (max-width: 860px) {
  .cards-on-mobile tr { grid-template-columns: 1.4fr 1fr auto; gap: .45rem .75rem; }
  .cards-on-mobile td[data-label="Volgende stap"] { grid-column: 1 / 3; }
  .cards-on-mobile td[data-label="Eigenaar"] { align-self: end; text-align: right; }
  .cards-on-mobile td[data-label="Eigenaar"]::before, .cards-on-mobile td[data-label="Marge"]::before { content: ''; }
  .cards-on-mobile td[data-label="Fase"] .row-meta { display: none; }
}

/* ---------- v12.1: klikbare kaarten, procesteller, groene Vastleggen ---------- */
[data-href] { cursor: pointer; }
.task-card[data-href] { transition: border-color .12s, box-shadow .12s; }
@media (hover: hover) { .task-card[data-href]:hover { border-color: #aab3c2; box-shadow: 0 2px 8px rgba(29,36,51,.08); }
.rows.tasks li[data-href]:hover { background: rgba(36,69,162,.04); } }
.procmini { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.procmini .dots { display: inline-flex; gap: 3px; }
.procmini i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: block; }
.procmini i.done { background: var(--green); }
.procmini i.now { background: var(--blue); box-shadow: 0 0 0 2px rgba(36,69,162,.2); }
.procmini i.lost { background: var(--red); }
.task-card .procmini { margin-top: .1rem; }
.rail-add { background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 6px; padding: .55rem .6rem; font-weight: 650; box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.rail-add::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.22); font-size: 1rem; line-height: 1; }
.rail-add:hover, .rail-add[aria-current="page"] { background: #186446; color: #fff; }
@media (max-width: 860px) {
  .tabbar .tab-add svg { background: var(--green); color: #fff; width: 30px; height: 30px; padding: 4px; }
  .tabbar .tab-add[aria-current="page"] { background: none; }
}
@media (max-width: 860px) {
  .rail-search, .rail-add { display: none; }
  .cards-on-mobile td[data-label="Fase"] { grid-column: 1 / -1; }
  .cards-on-mobile .procmini { white-space: normal; }
}

/* ---------- Folieteller ---------- */
.folie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.folie-grid .card { margin: 0; display: grid; gap: .4rem; border-top: 4px solid var(--line); }
.folie-card.is-ready { border-top-color: var(--green); }
.folie-card h2 { margin: 0; }
progress.folie-bar { height: 10px; background: var(--line); }
progress.folie-bar::-webkit-progress-bar { background: var(--line); }
progress.folie-bar.is-full::-webkit-progress-value { background: var(--green); }
progress.folie-bar.is-full::-moz-progress-bar { background: var(--green); }
.notice-card { display: block; background: #e3f1ea; border: 1px solid #b9dcc9; color: var(--green); border-radius: var(--radius-card); padding: .7rem 1rem; margin-bottom: .75rem; text-decoration: none; }
.notice-card:hover { border-color: var(--green); }
.nav-green { background: var(--green); }
.short-input { width: 6rem; }

/* ---------- Afvinken met ongedaan maken ---------- */
.undo-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 4px; padding: .5rem .5rem .5rem 1rem; margin-bottom: 1rem; }
.rows.tasks li.done { opacity: .7; }
.rows.tasks li.done .check { color: var(--green); border-color: var(--green); }
.clear-done { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding-bottom: .6rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line); }
.card > .clear-done:last-child { border-bottom: 0; border-top: 1px solid var(--line); padding: .6rem 0 0; margin: .4rem 0 0; }

/* ---------- v14: uitkosting ---------- */
.uk-part > summary { display: flex; align-items: baseline; gap: .75rem; cursor: pointer; list-style: none; }
.uk-part > summary::-webkit-details-marker { display: none; }
.uk-part > summary::before { content: '▸'; color: var(--ink-soft); }
.uk-part[open] > summary::before { content: '▾'; }
.uk-part > summary h2 { margin: 0; }
.uk-part[open] > summary { margin-bottom: .75rem; }
.uk-rows { width: auto; }
.uk-rows td { padding: .25rem .5rem .25rem 0; border: 0; }
.uk-rows input:not([type]), .uk-rows input[inputmode] { width: 6.5rem; }
.uk-rows select { min-width: 8rem; }
.uk-rows input[type="checkbox"], .uk-check input { width: 20px; height: 20px; }
.uk-check { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; font-weight: 500; }
.uk-radio { border: 0; padding: 0; margin: .75rem 0 .25rem; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.uk-radio legend { font-weight: 600; margin-bottom: .25rem; padding: 0; }
.uk-radio label { display: flex; align-items: center; gap: .4rem; font-weight: 500; }
.uk-radio input { width: auto; }
.uk-go { margin: 0 0 1rem; }
.uk-go .btn { background: var(--green); border-color: var(--green); min-width: 10rem; }
.uk-result-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.uk-result-head h2 { margin: 0; }
.uk-result .stats { margin: 1rem 0; }
.uk-out { width: 100%; }
.uk-out .uk-group th { background: var(--board); text-align: left; font-size: .85rem; letter-spacing: .02em; }
.uk-out td { vertical-align: top; }
.uk-out td.num { white-space: nowrap; }
.uk-note { font-size: .88rem; color: var(--ink-soft); max-width: 32rem; }
.uk-note .row-meta { display: block; font-size: .78rem; }
.uk-info td:first-child { color: var(--ink-soft); }
.uk-open td:first-child { color: var(--red); }
.uk-out tfoot th, .uk-out tfoot td { border-top: 2px solid var(--ink); padding-top: .5rem; }
.uk-nest { margin-top: 1rem; }
.uk-save { border: 1px solid var(--line); border-radius: var(--radius-card); padding: .75rem 1rem; margin-top: 1.25rem; }
.uk-save legend { font-weight: 650; padding: 0 .3rem; }
.uk-saved p { margin: 0 0 .5rem; }
@media (max-width: 700px) {
  .uk-rows input:not([type]), .uk-rows input[inputmode] { width: 4.5rem; }
  .uk-rows select { min-width: 0; }
  .uk-note { min-width: 12rem; }
}
@media (max-width: 700px) {
  .uk-out thead { display: none; }
  .uk-out, .uk-out tbody, .uk-out tfoot { display: block; }
  .uk-out tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
  .uk-out td, .uk-out th { border: 0; padding: 0; }
  .uk-out td:first-child, .uk-out tr > th:first-child { grid-column: 1 / -1; font-weight: 600; }
  .uk-out td.num:nth-child(2) { color: var(--ink-soft); }
  .uk-out td.num:nth-child(2):empty { display: none; }
  .uk-out .uk-note { grid-column: 1 / -1; min-width: 0; }
  .uk-out .uk-group th { padding: .35rem .5rem; }
  .uk-out tfoot tr { border-top: 2px solid var(--ink); }
  .uk-out tfoot td:empty { display: none; }
}
@media (max-width: 700px) {
  .uk-out thead { display: none; }
  .uk-out, .uk-out tbody, .uk-out tfoot { display: block; }
  .uk-out tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
  .uk-out td, .uk-out th { border: 0; padding: 0; }
  .uk-out td:first-child, .uk-out tr > th:first-child { grid-column: 1 / -1; font-weight: 600; }
  .uk-out td.num:nth-child(2):empty { display: none; }
  .uk-out .uk-note { grid-column: 1 / -1; min-width: 0; }
  .uk-out .uk-group th { padding: .35rem .5rem; }
  .uk-out tfoot td:empty { display: none; }
}

/* ---------- v14: stappenplan ---------- */
.step-plan { background: var(--board); border-radius: var(--radius-card); padding: .6rem .9rem; margin: .75rem 0; }
.step-plan > .row-meta { margin: 0 0 .3rem; font-weight: 600; }
.step-list { margin: 0 0 .5rem; padding-left: 1.3rem; display: grid; gap: .15rem; font-size: .92rem; }
.step-list li.done { color: var(--ink-soft); text-decoration: line-through; }
.step-list li.now { font-weight: 700; }
.step-list li.now::marker { color: var(--green); }
.steps-edit td { padding: .25rem .5rem .25rem 0; border: 0; white-space: nowrap; }
.steps-edit input[inputmode] { width: 4rem; }
.steps-edit td:nth-child(2) input { min-width: 16rem; }
.steps-edit tr.muted input { color: var(--ink-soft); }
.uk-saved .btn { white-space: normal; text-align: center; }
@media (max-width: 700px) {
  .uk-rows input:not([type]), .uk-rows input[inputmode] { width: 3.8rem; }
  .uk-rows select { width: 6.5rem; }
  .uk-rows th { font-size: .75rem; }
}

/* ---------- v14.1: mobiel — zoekbalk bovenin, "Meer" (•••) met de overige knoppen ---------- */
.tab-more { display: none; }
@media (max-width: 860px) {
  .rail { position: sticky; top: 0; z-index: 30; display: block; min-height: 0; padding: .5rem .75rem; }
  .rail .brand, .rail .nav-toggle, .rail .rail-add { display: none; }
  .rail .rail-search { display: block; padding: 0; }
  .rail-search input { width: 100%; font-size: 1rem; padding: .6rem .85rem; border-radius: 8px; }
  .tabbar { grid-template-columns: repeat(4, 1fr); }
  .tab-more { font: inherit; background: none; border: 0; display: grid; justify-items: center; gap: 2px; color: #b9c0cc; font-size: .7rem; padding: .25rem 0; border-radius: 6px; cursor: pointer; position: relative; }
  .tab-more svg { fill: currentColor; stroke: none; }
  .tab-more[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.1); }
  .tab-more.has-badge::after { content: ""; position: absolute; top: .2rem; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
  .rail nav, .rail nav.open { display: none; }
  .rail nav.open { display: flex; flex-direction: column; gap: .5rem; position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); max-height: 72vh; overflow-y: auto;
    background: var(--rail); border-radius: 14px 14px 0 0; padding: .75rem 1rem 1rem; align-content: start; z-index: 25; box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
  .rail nav.open .nav-blok { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .5rem; border-radius: 12px; }
  .rail nav.open .nav-group { grid-column: 1 / -1; margin: 0 0 .1rem; }
  .rail nav.open .nav-blok a { padding: .65rem .75rem; background: rgba(255,255,255,.07); border-radius: 8px; color: #fff; }
  .rail nav.open .nav-blok a[aria-current="page"] { background: rgba(255,255,255,.18); box-shadow: none; }
  .rail nav.open .nav-blok a[data-tab-dup] { display: none; }
  .rail nav.open .me { grid-column: 1 / -1; margin-top: .6rem; }
  .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 24; }
}
@media (max-width: 860px) { .tabbar { z-index: 26; } }

/* ---------- v15: nieuwe offerte en naar Gripp ---------- */
.btn-new { background: var(--green); color: #fff; }
.btn-new:hover { background: #186446; color: #fff; }
.btn-new[disabled] { opacity: .5; cursor: not-allowed; }
h2.mt { margin-top: 1.25rem; }
.new-company { margin-top: .75rem; }
.offer-lines td:first-child input { min-width: 18rem; width: 100%; }
.offer-lines td:nth-child(2) input { width: 5rem; }
.offer-lines select { width: 5.5rem; min-width: 0; }
.offer-card.is-draft { border-left: 4px solid var(--green); }
.offer-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.offer-head h2 { margin: 0; }
.offer-lines-view { margin: .5rem 0 .75rem; }
.offer-lines-view td, .offer-lines-view th { padding-left: 0; }
.edit-lines { margin: .5rem 0 1rem; }
.gripp-send form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.page-head .inline .btn-new { white-space: nowrap; }
@media (max-width: 700px) { .offer-lines td:first-child input { min-width: 12rem; } }
.offer-lines { width: 100%; max-width: 820px; }
.offer-lines th:nth-child(2), .offer-lines th:nth-child(3) { width: 1%; }

/* ---------- v16: focus, terugblik, leerpunten ---------- */
.focus-bar { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius-card); padding: .65rem 1rem; margin: -.5rem 0 1rem; }
.focus-bar span { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 650; }
.review-notice { background: #eef1fb; border-color: #c9d3f0; color: var(--blue); }
.week-stats { margin-bottom: 1rem; }
.review-card { border-top: 1px solid var(--line); padding: .6rem 0; }
.review-card:first-of-type { border-top: 0; }
.review-card p { margin: 0 0 .2rem; }
.person-focus { font-size: .88rem; margin: .2rem 0 0; }
.lessons .grid { gap: 1.5rem; }
.factor-bar progress { height: 6px; }

/* ---------- v17: kwartaaldoelen, aanvraag ---------- */
.goal-list { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: goal; }
.goal-list li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.goal-list li:first-child { border-top: 0; }
.goal-list li > span:nth-of-type(1) { flex: 1; min-width: 12rem; }
.goal-list li.done strong { text-decoration: line-through; color: var(--ink-soft); }
.goal-list li.done .check { color: var(--green); border-color: var(--green); }
.goal-actions { display: inline-flex; gap: .6rem; align-items: center; }
.goal-actions form { margin: 0; }
.goal-add { border-top: 1px solid var(--line); padding-top: .75rem; }
.goals-strip { border-left: 4px solid var(--blue); }
.goals-strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.goals-strip-head h2 { margin: 0 0 .5rem; }
.goal-mini { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.goal-mini li.done { color: var(--ink-soft); text-decoration: line-through; list-style: none; margin-left: -1.1rem; }
p.mt { margin-top: 1rem; }


/* ---------- v18: taken en calculatie voorop ---------- */
.rail nav .nav-blok a.nav-main { font-size: 1rem; font-weight: 650; color: #fff; padding: .45rem .6rem; }
.rail nav .nav-blok a.nav-main[aria-current="page"] { background: rgba(255,255,255,.16); }
.nav-group { margin-top: .9rem; }
.menu-rights { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .3rem .9rem; margin: .5rem 0 1rem; }
.menu-rights label { flex-direction: row; display: flex; align-items: center; gap: .45rem; font-weight: 500; color: var(--ink); }
.menu-rights input { width: auto; }
.menu-rights .menu-head { grid-column: 1 / -1; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-top: .4rem; }
@media (max-width: 860px) {
  .tabbar { grid-template-columns: repeat(5, 1fr); }
  .tabbar a { font-size: .66rem; }
}

/* ---------- v18.2: startpagina — waar begin je? ---------- */
.start-tiles { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; margin: 0 0 1rem; }
.tile { display: grid; gap: .35rem; align-content: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
        padding: 1.1rem 1.25rem 1.25rem; text-decoration: none; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.tile:hover { border-color: var(--ink-soft); box-shadow: 0 2px 10px rgba(29,36,51,.08); }
.tile-eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 650; }
.tile-title { font-size: 1.15rem; font-weight: 650; line-height: 1.25; }
.tile-meta { font-size: .9rem; color: var(--ink-soft); }
.tile-btn { margin-top: .75rem; justify-self: start; }
.tile-go { border-left: 4px solid var(--green); }
.tile-go .tile-title { font-size: 1.35rem; }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.stat-tile { display: grid; gap: .1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
             padding: .8rem 1rem; text-decoration: none; color: var(--ink); }
.stat-tile strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat-tile span { font-size: .85rem; color: var(--ink-soft); }
.stat-tile:hover { border-color: var(--blue); }
.stat-tile.is-alert strong { color: var(--red); }
.day-progress { margin-bottom: 1.25rem; }

@media (max-width: 900px) {
  .start-tiles { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .tile-go .tile-title { font-size: 1.2rem; }
}

/* =======================================================================
   v18.2: lichtere, rustigere look — lichte zijbalk, witte kaarten,
   zachte randen en minder contrast. Staat bewust onderaan: het overschrijft
   alleen de kleuren en vormen, niet de opbouw van de pagina's.
   ======================================================================= */
:root {
  --board: #f4f5f8;
  --paper: #ffffff;
  --ink: #1b1f2a;
  --ink-soft: #6b7280;
  --line: #e7e9f0;
  --field-line: #dcdfe8;
  --blue: #4457c7;
  --green: #1c8a5c;
  --red: #c0392f;
  --rail: #ffffff;
  --btn-bg: #14161f; --btn-fg: #ffffff;
  --dot: transparent;
  --radius-card: 12px;
  --ok-bg: #eaf6f0;
  --bad-bg: #fdecea;
}

/* Zijbalk: licht, met een donkere pil voor waar je bent */
.rail { background: var(--rail); color: var(--ink); border-right: 1px solid var(--line); }
.card, .task-card, .tile, .stat-tile, .notice-card { background: var(--paper); }
.brand { color: var(--ink); }
.rail nav .nav-blok a { color: var(--ink-soft); border-radius: 999px; }
.rail nav .nav-blok a:hover { color: var(--ink); background: #f0f1f6; }
.rail nav .nav-blok a[aria-current="page"] { background: var(--btn-bg); color: #fff; box-shadow: none; }
.rail nav .nav-blok a.nav-main { color: var(--ink); }
.rail nav .nav-blok a.nav-main[aria-current="page"] { background: var(--btn-bg); color: #fff; }
.nav-group { color: #9aa1ae; }
.rail-search input { background: #f0f1f6; border-color: var(--line); color: var(--ink); border-radius: 10px; }
.rail-search input::placeholder { color: #9aa1ae; }
.rail-search input:focus { background: #fff; }
.rail-add { border-radius: 999px; box-shadow: none; }
.me { border-top-color: var(--line); }
.me a { color: var(--ink); }
.me .link { color: var(--ink-soft); }
.nav-toggle { color: var(--ink); border-color: var(--field-line); }

/* Kaarten en knoppen: zachter */
.card, .task-card, .tile, .stat-tile { border-radius: var(--radius-card); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.btn { border-radius: 999px; padding: .55rem 1.15rem; }
.btn-small { padding: .35rem .85rem; }
input, select, textarea { border-radius: 10px; }
.flash { border-radius: 10px; }
progress { border-radius: 999px; }

/* Startpagina: zachte tinten in plaats van harde randen */
.tile-go { border-left: 0; background: #f2f9f5; border-color: #d7ebe1; }
.stat-tile { background: var(--paper); }
.stat-tile:hover { border-color: var(--blue); background: #fafbff; }
.focus-bar { border-left-color: var(--blue); background: #f5f6fd; border-color: #e0e4f7; border-radius: 10px; }
.notice-card { border-radius: 10px; }

/* Mobiele balk onderaan: ook licht */
@media (max-width: 860px) {
  .tabbar { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -1px 0 var(--line); }
  .tabbar a { color: var(--ink-soft); }
  .tabbar a[aria-current="page"] { color: var(--ink); background: #f0f1f6; }
  .tab-more { color: var(--ink-soft); }
  .tab-more[aria-expanded="true"] { color: var(--ink); background: #f0f1f6; }
  .rail nav.open { background: #fff; box-shadow: 0 -8px 24px rgba(16,24,40,.12); }
  .rail nav.open .nav-blok a { background: #f5f6fa; color: var(--ink); }
  .rail nav.open .nav-blok a[aria-current="page"] { background: var(--btn-bg); color: #fff; }
}

/* Donkere modus blijft donker, maar dan rustig grijsblauw in plaats van zwart */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --board: #14171d; --paper: #1b1f27; --ink: #e7e9ee; --ink-soft: #99a1ae; --line: #2a2f39;
    --rail: #171a21; --btn-bg: #e7e9ee; --btn-fg: #14171d; --field-line: #333945; --dot: transparent;
  }
  :root:not([data-theme="light"]) .rail { border-right-color: #232833; }
  :root:not([data-theme="light"]) .rail nav .nav-blok a:hover { background: rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .rail nav .nav-blok a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }
  :root:not([data-theme="light"]) .tile-go { background: rgba(28,138,92,.12); border-color: rgba(28,138,92,.35); }
  :root:not([data-theme="light"]) .focus-bar { background: rgba(68,87,199,.12); border-color: rgba(68,87,199,.35); }
  :root:not([data-theme="light"]) .tabbar, :root:not([data-theme="light"]) .rail nav.open { background: #171a21; }
}

/* Handmatig gekozen donkere modus (knop onderin het menu) — zelfde palet als hierboven */
:root[data-theme="dark"] {
  --board: #14171d; --paper: #1b1f27; --ink: #e7e9ee; --ink-soft: #99a1ae; --line: #2a2f39;
  --rail: #171a21; --btn-bg: #e7e9ee; --btn-fg: #14171d; --field-line: #333945; --dot: transparent;
  --blue: #8ea2ff; --green: #5cc796; --red: #ff8b7e; --ok-bg: rgba(92,199,150,.15); --bad-bg: rgba(255,139,126,.15);
}
:root[data-theme="dark"] .rail { border-right-color: #232833; }
:root[data-theme="dark"] .rail nav .nav-blok a:hover { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .rail nav .nav-blok a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }
:root[data-theme="dark"] .rail-search input { background: #232833; }
:root[data-theme="dark"] .tile-go { background: rgba(92,199,150,.12); border-color: rgba(92,199,150,.3); }
:root[data-theme="dark"] .focus-bar { background: rgba(142,162,255,.12); border-color: rgba(142,162,255,.3); }
:root[data-theme="dark"] .tabbar, :root[data-theme="dark"] .rail nav.open { background: #171a21; }
:root[data-theme="dark"] .stat-tile:hover { background: #20242d; }
.theme-toggle { justify-self: start; }
/* Knoppen volgen het thema (de basisknop gebruikte nog een vaste witte tekst) */
.btn { background: var(--btn-bg); color: var(--btn-fg); }
.btn:hover { background: var(--blue); color: #fff; }
.btn-quiet { border-color: var(--field-line); color: var(--ink); background: var(--paper); }
.btn-quiet:hover { background: var(--board); color: var(--ink); }
.btn-new, .btn-new:hover { color: #fff; }
:root[data-theme="dark"] .btn-new { background: #1c8a5c; }
:root[data-theme="dark"] .btn-new:hover { background: #22a06e; }

/* ============================================================
   v19 — rustiger, lichter, ronder (naar het voorbeeld-CRM)
   Zachte pastelvlakken, ronde pillen en een menu met icoontjes
   ============================================================ */
:root {
  --tint-mint:  #e9f4ef;
  --tint-lilac: #eeeefb;
  --tint-blush: #fdeeed;
  --tint-sky:   #e9f0fb;
  --tint-sand:  #fbf3e8;
  --shadow-soft: 0 1px 2px rgba(20,23,33,.04), 0 6px 18px rgba(20,23,33,.05);
  --radius-card: 16px;
}
body.app { background: var(--board); }

/* --- vlakken: witte kaart met zachte schaduw in plaats van harde lijn --- */
.card, .task-card, .tile, .stat-tile, .notice-card, .magcard, .stage-chip, .table-wrap {
  border-color: transparent;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-card);
}
.task-card { border-left-width: 4px; }
.stage-chip { border-top-width: 3px; }

/* --- startblokken krijgen elk een eigen zachte kleur --- */
.start-tiles .tile:nth-child(1) { background: var(--tint-mint); }
.start-tiles .tile:nth-child(2) { background: var(--tint-lilac); }
.start-tiles .tile:nth-child(3) { background: var(--tint-sky); }
.start-tiles .tile { border: 0; }
.tile-go { background: var(--tint-mint); border-color: rgba(28,138,92,.25); }
.focus-bar { background: var(--tint-lilac); border-color: rgba(107,74,168,.2); border-radius: 999px; padding: .6rem 1.1rem; }

.stat-strip { gap: .75rem; }
.stat-tile { border: 0; padding: .9rem 1.1rem; }
.stat-tile:nth-child(1) { background: var(--tint-blush); }
.stat-tile:nth-child(2) { background: var(--tint-sky); }
.stat-tile:nth-child(3) { background: var(--tint-sand); }
.stat-tile:nth-child(4) { background: var(--tint-mint); }
.stat-tile:hover { filter: brightness(.985); }

/* --- alles wat een pilletje is, is nu ook echt rond --- */
.badge, .pill, .stage-chip, .src, .nav-count { border-radius: 999px; }
.badge, .pill { padding: .1rem .6rem; }
.btn, .btn-quiet, .btn-new, .rail-add { border-radius: 999px; padding: .5rem 1.1rem; }
.rail-search input, input[type=search] { border-radius: 999px; }

/* --- linkermenu met icoontjes, zoals in het voorbeeld --- */
.rail nav .nav-blok a { display: flex; align-items: center; gap: .6rem; border-radius: 999px; padding: .4rem .55rem; }
.nav-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: var(--board); border: 1px solid var(--line); }
.nav-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-lbl { flex: 1; min-width: 0; }
.rail nav .nav-blok a[aria-current="page"] .nav-ic,
.rail nav .nav-blok a.nav-main[aria-current="page"] .nav-ic { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
.rail nav .nav-blok a[aria-current="page"] { box-shadow: none; }
.nav-group { margin: 1rem .8rem .3rem; }
.rail-add { display: flex; align-items: center; justify-content: center; gap: .4rem; }

/* --- donkere modus houdt dezelfde vormen, maar dan gedempt --- */
:root[data-theme="dark"] {
  --tint-mint: rgba(92,199,150,.10); --tint-lilac: rgba(142,162,255,.12);
  --tint-blush: rgba(255,139,126,.10); --tint-sky: rgba(142,162,255,.08); --tint-sand: rgba(226,178,106,.10);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .nav-ic { background: rgba(255,255,255,.06); border-color: #2a2f39; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .task-card,
:root[data-theme="dark"] .notice-card, :root[data-theme="dark"] .table-wrap { border: 1px solid #262b35; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint-mint: rgba(92,199,150,.10); --tint-lilac: rgba(142,162,255,.12);
    --tint-blush: rgba(255,139,126,.10); --tint-sky: rgba(142,162,255,.08); --tint-sand: rgba(226,178,106,.10);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.35);
  }
  :root:not([data-theme="light"]) .nav-ic { background: rgba(255,255,255,.06); border-color: #2a2f39; }
}

/* v19.1 — fasetegels: geen ronde pil met kleurboog meer, maar een rustig vlak met een zachte kleur */
.stage-chip {
  border: 0; border-top: 0; border-radius: 14px; padding: .7rem .9rem;
  background: var(--tint-sky); box-shadow: none;
}
.stage-chip.col-lead          { background: #eef0f4; }
.stage-chip.col-contact       { background: var(--tint-lilac); }
.stage-chip.col-advies        { background: var(--tint-sand); }
.stage-chip.col-offerte       { background: var(--tint-sky); }
.stage-chip.col-onderhandeling{ background: var(--tint-mint); }
.stage-chip.attention         { background: var(--tint-blush); }
.stage-chip.is-active { outline: 2px solid var(--ink); outline-offset: 1px; }
.stage-chip:hover { filter: brightness(.97); }
:root[data-theme="dark"] .stage-chip.col-lead { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .stage-chip.is-active { outline-color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stage-chip.col-lead { background: rgba(255,255,255,.06); }
}
/* Effen achtergrond in plaats van het stippenraster */
.board, .login-wrap { background-image: none; }

/* ---------------------------------------------------------------------------
   v24 — toewijzen, bulkacties en sorteren
   ------------------------------------------------------------------------ */

/* Offerte overzetten naar een ander teamlid, onder de kerngetallen */
.owner-swap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line);
}
.owner-swap label { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .92rem; color: var(--muted); }
.owner-swap select { min-width: 9rem; }
.owner-swap .check-label { white-space: nowrap; }

/* Aanvinken in de offertelijst */
.quote-table th.pick, .quote-table td.pick { width: 2.2rem; padding-right: 0; }
.quote-table td.pick input, .quote-table th.pick input { width: 1.05rem; height: 1.05rem; }
.bulk-form { padding: 0; overflow: hidden; }
.bulk-form .table-wrap { margin: 0; }
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .9rem 1rem; border-top: 1px solid var(--line); background: var(--tint-sky);
}
.bulk-bar p { margin: 0; }
.bulk-bar .inline { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
:root[data-theme="dark"] .bulk-bar { background: rgba(255,255,255,.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bulk-bar { background: rgba(255,255,255,.04); }
}

/* Sorteerbare kolomkoppen */
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { text-decoration: underline; }
.sort-link.is-on { font-weight: 700; }

@media (max-width: 640px) {
  .quote-table.cards-on-mobile td.pick { display: block; }
  .bulk-bar { padding: .8rem; }
}

/* ---------------------------------------------------------------------------
   v28 — volgende stap kiezen en opvolging in bulk inrichten
   ------------------------------------------------------------------------ */

/* De stappen van deze fase als keuzelijst, in plaats van een verstopte select */
.plan-next > summary { margin-bottom: .6rem; }
.plan-choices { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .35rem; }
.plan-choice {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer;
}
.plan-choice:hover { border-color: var(--ink); }
.plan-choice input[type="radio"] { width: auto; min-width: 0; margin: .2rem 0 0; flex: 0 0 auto; }
.plan-choice > span { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }
.plan-choice > span .row-meta { display: block; margin-top: .1rem; }
.plan-choice .row-meta { font-size: .82rem; }
.plan-choice.is-done { opacity: .6; }
.plan-choice:has(input:checked) { border-color: var(--ink); background: var(--tint-sky); }
:root[data-theme="dark"] .plan-choice:has(input:checked) { background: rgba(255,255,255,.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan-choice:has(input:checked) { background: rgba(255,255,255,.06); }
}
.plan-form .form-grid { margin-bottom: .6rem; }

/* Opvolging inrichten: groepen offertes met per groep één keuze */
.opv-table td, .opv-table th { vertical-align: top; }
.opv-table select { min-width: 15rem; max-width: 100%; }
@media (max-width: 640px) {
  .opv-table, .opv-table tbody, .opv-table tr, .opv-table td { display: block; width: 100%; }
  .opv-table thead { display: none; }
  .opv-table tr { border-bottom: 1px solid var(--line); padding: .7rem 0; }
  .opv-table td { padding: .15rem 0; }
  .opv-table td.num { text-align: left; }
  .opv-table select { min-width: 0; width: 100%; margin-top: .35rem; }
}
.opv-banner { background: var(--tint-sand); border: 0; }
:root[data-theme="dark"] .opv-banner { background: rgba(255,255,255,.05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opv-banner { background: rgba(255,255,255,.05); }
}

/* Stappenplan kiezen: de drie plannen naast elkaar */
.plan-cards .plan-card { display: grid; gap: .7rem; align-content: start; }
.plan-card.is-voorstel { outline: 2px solid var(--ink); outline-offset: 2px; }
.plan-pick { display: flex; align-items: flex-start; gap: .6rem; margin: 0; cursor: pointer; }
.plan-pick input[type="radio"] { width: auto; min-width: 0; margin: .25rem 0 0; flex: 0 0 auto; }
.plan-pick > span { min-width: 0; flex: 1 1 auto; }
.plan-pick > span .row-meta { display: block; margin-top: .15rem; font-weight: 400; }
.steps-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .9rem; }
.steps-list .row-meta { display: block; }

/* ---------------------------------------------------------------------------
   v31 — zoeken bovenaan elke pagina
   ------------------------------------------------------------------------ */
.page-search {
  display: flex; gap: .5rem; align-items: center;
  max-width: 720px; margin: 0 auto 1.1rem;
}
.page-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; border-radius: 999px; padding: .6rem 1rem;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft);
}
.page-search input[type="search"]:focus { border-color: var(--ink); }
.page-search .btn { flex: 0 0 auto; border-radius: 999px; }
@media (max-width: 860px) {
  .page-search { margin-bottom: .9rem; }
  .page-search .btn { padding-left: .9rem; padding-right: .9rem; }
}
.inline-label { display: flex; align-items: center; gap: .4rem; font-weight: 500; color: var(--ink); }
.inline-label input { width: 4rem; text-align: center; }
.opv-table td .row-meta { display: block; margin-top: .15rem; }
.opv-table td strong + .row-meta { margin-top: .05rem; }

/* ---------------------------------------------------------------------------
   v32 — productiekaart na het akkoord
   ------------------------------------------------------------------------ */
.prod-card { display: grid; gap: .8rem; }
.prod-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.prod-head h2 { margin: 0; }
.prod-head .row-meta { margin: .15rem 0 0; }
.prod-stand { margin: 0; text-align: right; }
.prod-stand strong { font-size: 1.15rem; }
.prod-stand .row-meta { display: block; }

.prod-planning { margin: 0; padding: .5rem .7rem; border-radius: 10px; background: var(--tint-sky); font-size: .9rem; }
.prod-planning.is-late { background: var(--tint-blush); }
:root[data-theme="dark"] .prod-planning { background: rgba(255,255,255,.05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prod-planning { background: rgba(255,255,255,.05); }
}

.prod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.prod-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem .8rem;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.prod-row.is-binnen, .prod-row.is-klaar { background: var(--tint-mint); border-color: transparent; }
.prod-row.is-besteld { border-color: var(--ink-soft); }
.prod-row.is-nvt { opacity: .55; }
:root[data-theme="dark"] .prod-row.is-binnen, :root[data-theme="dark"] .prod-row.is-klaar { background: rgba(255,255,255,.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prod-row.is-binnen,
  :root:not([data-theme="light"]) .prod-row.is-klaar { background: rgba(255,255,255,.06); }
}
.prod-naam { min-width: 0; }
.prod-naam .row-meta { display: block; }
.prod-acties { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.prod-detail { grid-column: 1 / -1; }
.prod-detail > summary { font-size: .82rem; }
.prod-weg { margin-top: .4rem; }
.prod-meer-in { display: grid; gap: 1rem; padding-top: .6rem; }
.prod-meer-in .form-grid { margin: 0; }

@media (max-width: 640px) {
  .prod-row { grid-template-columns: 1fr; }
  .prod-acties { justify-content: flex-start; }
}
.prod-uit > summary { font-size: .85rem; color: var(--muted); }
.prod-uit .prod-list { margin-top: .4rem; }
.prod-uit .prod-row { padding: .35rem .7rem; }

/* ---------------------------------------------------------------------------
   v36 — het menu in blokken: per groep een eigen tint, naar onderen oplopend
   ------------------------------------------------------------------------ */
:root {
  --nav-1: #f5f7fb;   /* Vandaag, Taken, Calculatie — de blauwgrijze toon van nu */
  --nav-2: #eeeefb;   /* Verder     — lila  */
  --nav-3: #fbf3e8;   /* Calculatie — zand  */
  --nav-4: #e9f4ef;   /* Groei      — mint  */
  --nav-5: #e9f0fb;   /* Inzicht    — lucht */
  --nav-6: #fdeeed;   /* Beheer     — blush */
}
.rail nav { gap: .35rem; }
.nav-blok { border-radius: 14px; padding: .45rem .35rem; display: flex; flex-direction: column; gap: 2px; }
.nav-blok-1 { background: var(--nav-1); }
.nav-blok-2 { background: var(--nav-2); }
.nav-blok-3 { background: var(--nav-3); }
.nav-blok-4 { background: var(--nav-4); }
.nav-blok-5 { background: var(--nav-5); }
.nav-blok-6 { background: var(--nav-6); }
.nav-blok .nav-group { margin: .1rem .5rem .25rem; }

/* Op een gekleurd vlak hoeft het icoontje geen eigen randje meer */
.nav-blok .nav-ic { background: rgba(255,255,255,.72); border-color: transparent; }
/* Waar je staat: een wit vlak met een dunne rand, in plaats van een zwart blok */
.rail nav .nav-blok a[aria-current="page"],
.rail nav .nav-blok a.nav-main[aria-current="page"] {
  background: #fff; color: var(--ink); box-shadow: none;
  outline: 1.5px solid var(--ink); outline-offset: -1.5px;
}
.rail nav .nav-blok a[aria-current="page"] .nav-ic,
.rail nav .nav-blok a.nav-main[aria-current="page"] .nav-ic { background: var(--ink); border-color: transparent; color: #fff; }
.rail nav .nav-blok a:hover { background: rgba(255,255,255,.6); color: var(--ink); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nav-1: rgba(255,255,255,.035); --nav-2: rgba(255,255,255,.05); --nav-3: rgba(255,255,255,.065);
    --nav-4: rgba(255,255,255,.08); --nav-5: rgba(255,255,255,.095); --nav-6: rgba(255,255,255,.11);
  }
  :root:not([data-theme="light"]) .nav-blok .nav-ic { background: rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .rail nav .nav-blok a[aria-current="page"],
  :root:not([data-theme="light"]) .rail nav .nav-blok a.nav-main[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; outline: 1.5px solid rgba(255,255,255,.5); outline-offset: -1.5px; }
  :root:not([data-theme="light"]) .rail nav .nav-blok a:hover { background: rgba(255,255,255,.09); color: #fff; }
}
:root[data-theme="dark"] {
  --nav-1: rgba(255,255,255,.035); --nav-2: rgba(255,255,255,.05); --nav-3: rgba(255,255,255,.065);
  --nav-4: rgba(255,255,255,.08); --nav-5: rgba(255,255,255,.095); --nav-6: rgba(255,255,255,.11);
}
:root[data-theme="dark"] .nav-blok .nav-ic { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .rail nav .nav-blok a[aria-current="page"],
:root[data-theme="dark"] .rail nav .nav-blok a.nav-main[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; outline: 1.5px solid rgba(255,255,255,.5); outline-offset: -1.5px; }
:root[data-theme="dark"] .rail nav .nav-blok a:hover { background: rgba(255,255,255,.09); color: #fff; }

/* Secundaire knoppen: een zachte tint in plaats van wit met een grijs randje,
   zodat alleen de échte actie nog donker is. */
.btn-quiet { background: var(--tint-sky); border-color: transparent; color: var(--ink); }
.btn-quiet:hover { background: #dde7f7; color: var(--ink); }
:root[data-theme="dark"] .btn-quiet { background: rgba(255,255,255,.08); border-color: transparent; color: var(--ink); }
:root[data-theme="dark"] .btn-quiet:hover { background: rgba(255,255,255,.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-quiet { background: rgba(255,255,255,.08); border-color: transparent; color: var(--ink); }
  :root:not([data-theme="light"]) .btn-quiet:hover { background: rgba(255,255,255,.14); }
}

/* Koprij van tabellen: een vleugje tint, rustiger bij lange lijsten */
thead th { background: var(--tint-sky); }
thead tr th:first-child { border-top-left-radius: 10px; }
thead tr th:last-child { border-top-right-radius: 10px; }
.steps-edit thead th, .opv-table thead th { background: var(--board); }
:root[data-theme="dark"] thead th { background: rgba(255,255,255,.05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) thead th { background: rgba(255,255,255,.05); }
}

/* Mobiel: het eerste blok staat al in de tabbalk onderaan, dus dat vlak niet
   nog eens leeg tonen. En ook hier geen zwart blok waar je staat. */
@media (max-width: 860px) {
  .rail nav.open .nav-blok-start { display: none; }
  .rail nav.open .nav-blok a[aria-current="page"] { background: #fff; color: var(--ink); outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
  .rail nav.open .nav-blok a[aria-current="page"] .nav-ic { background: var(--ink); color: #fff; }
}

/* v37 — het linkje naar de offerte staat achteraan, zodat de taaknaam één zin blijft */
.tasks .deal-link { white-space: nowrap; text-decoration: none; opacity: .75; }
.tasks .deal-link:hover { opacity: 1; text-decoration: underline; }
.steps-edit td input { min-width: 0; }
/* De taak en de toelichting zijn het echte werk: die krijgen de ruimte */
.steps-reeks td:nth-child(1) { width: 17%; }
.steps-reeks td:nth-child(2) { width: 16%; }
.steps-reeks td:nth-child(3), .steps-reeks td:nth-child(4) { width: 26%; }
.steps-reeks td:first-child input { width: calc(100% - 1.7rem); }

/* Beheerblokken: elk onderdeel een eigen kader met kop, zodat instellingen
   niet in elkaar overlopen en je ziet welke knop bij welk veld hoort. */
.blok { border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1rem 1rem; margin: 1.1rem 0 0; }
.blok > h3 { margin: 0 0 .6rem; font-size: 1rem; }
.blok > form:last-child, .blok > p:last-child { margin-bottom: 0; }
.blok .form-grid { gap: .7rem; }