:root {
  --paper: #f3f6f8;
  --surface: #ffffff;
  --ink: #1c2a35;
  --muted: #5d6d7a;
  --line: #dde4ea;
  --brand: #3d8fc6;
  --brand-soft: #e3f0f9;
  --groen: #2f9e6e;
  --oranje: #d9901a;
  --rood: #d1495b;
  --klaar: #8fa3b3;
  --onbekend: #b8c4ce;
  --track: #eaf0f4;
  --radius-s: 4px;
  --radius-m: 10px;
}
/* Donkere modus: donkerpaars met magenta. Volgt het systeem, tenzij je zelf kiest met de knop rechtsboven. */
:root[data-theme="licht"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="licht"]) {
    color-scheme: dark;
    --paper: #150e22; --surface: #1f1633; --ink: #f2eaff; --muted: #b6a6d0;
    --line: #3a2b58; --brand: #e64bb0; --brand-soft: #3c1d47; --track: #2d2246;
    --groen: #3ebd86; --oranje: #f2a73a; --rood: #f25c78; --klaar: #7f719a; --onbekend: #5b4d78; --toekomst: #9087b8;
  }
}
:root[data-theme="donker"] {
    color-scheme: dark;
    --paper: #150e22; --surface: #1f1633; --ink: #f2eaff; --muted: #b6a6d0;
    --line: #3a2b58; --brand: #e64bb0; --brand-soft: #3c1d47; --track: #2d2246;
    --groen: #3ebd86; --oranje: #f2a73a; --rood: #f25c78; --klaar: #7f719a; --onbekend: #5b4d78; --toekomst: #9087b8;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font: 16px/1.5 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Kop ---------- */
.top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 40px); background: var(--surface); border-bottom: 1px solid var(--line);
}
.top img { height: 34px; }
.top h1 { font-size: 1.35rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.sync { color: var(--muted); font-size: .9rem; margin-left: auto; }
.btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-s);
  padding: 7px 14px; cursor: pointer;
}
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.demo-banner { background: var(--brand-soft); padding: 8px clamp(16px, 4vw, 40px); font-size: .92rem; }
.warn-banner { background: #fbeaec; color: #7a1f2b; padding: 8px clamp(16px, 4vw, 40px); font-size: .92rem; }

main { padding: 24px clamp(16px, 4vw, 40px) 48px; max-width: 1400px; margin: 0 auto; }
h2 { font-size: 1.15rem; margin: 0 0 12px; font-weight: 700; }

/* ---------- Samenvatting ---------- */
.summary { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px 20px; }
.health-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--track); margin: 10px 0 12px; }
.health-bar span { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; color: var(--muted); }
.legend b { color: var(--ink); font-weight: 600; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.big { font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.big.rood { color: var(--rood); }
.sub { color: var(--muted); font-size: .92rem; }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input[type=search], .filters select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); min-width: 200px;
}
.filters label { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .95rem; }

/* ---------- Portfoliotijdlijn ---------- */
.timeline { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); overflow-x: auto; margin-bottom: 24px; }
.tl-inner { min-width: 760px; }
.tl-row { display: grid; grid-template-columns: 280px 1fr 64px; align-items: center; border-top: 1px solid var(--line); }
.tl-row.head { border-top: 0; color: var(--muted); font-size: .82rem; }
.tl-row.proj { cursor: pointer; }
.tl-row.proj:hover { background: var(--brand-soft); }
.tl-name { padding: 10px 16px; min-width: 0; }
.tl-name strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-name small { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-track { position: relative; height: 44px; }
.tl-row.head .tl-track { height: 28px; }
.tl-month { position: absolute; top: 6px; transform: translateX(4px); white-space: nowrap; }
.tl-grid { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.tl-today { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--brand); z-index: 2; }
.tl-today-label { position: absolute; top: 6px; transform: translateX(-50%); background: var(--brand); color: #fff; border-radius: 3px; padding: 0 6px; font-size: .78rem; z-index: 3; }
.bar { position: absolute; top: 13px; height: 18px; border-radius: 9px; background: var(--track); overflow: hidden; min-width: 6px; }
.bar i { display: block; height: 100%; }
.bar.groen { box-shadow: inset 0 0 0 1.5px var(--groen); } .bar.groen i { background: var(--groen); }
.bar.oranje { box-shadow: inset 0 0 0 1.5px var(--oranje); } .bar.oranje i { background: var(--oranje); }
.bar.rood { box-shadow: inset 0 0 0 1.5px var(--rood); } .bar.rood i { background: var(--rood); }
.bar.klaar { box-shadow: inset 0 0 0 1.5px var(--klaar); } .bar.klaar i { background: var(--klaar); }
.bar.onbekend { box-shadow: inset 0 0 0 1.5px var(--onbekend); } .bar.onbekend i { background: var(--onbekend); }
.tl-pct { text-align: right; padding-right: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-detail { border-top: 1px solid var(--line); background: var(--paper); padding: 10px 16px 14px 296px; }
.tl-detail table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tl-detail td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); }
.tl-empty { padding: 24px 16px; color: var(--muted); }

/* ---------- Onderste panelen ---------- */
.columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 9px 0; border-top: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; }
.list li:first-child { border-top: 0; }
.list .t { min-width: 0; }
.list .t strong { font-weight: 600; display: block; }
.list .t small { color: var(--muted); }
.tag { flex-shrink: 0; font-size: .85rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag.rood { color: var(--rood); } .tag.oranje { color: var(--oranje); }
.person { padding: 8px 0; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; }
.person-head { display: flex; justify-content: space-between; font-size: .95rem; }
.stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--track); margin-top: 5px; }
.stack span { height: 100%; }
.muted { color: var(--muted); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login { width: 100%; max-width: 360px; }
.login img { height: 40px; margin-bottom: 16px; }
.login h1 { font-size: 1.4rem; margin: 0 0 4px; }
.login input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); margin: 14px 0; background: var(--surface); }
.login .btn { width: 100%; padding: 10px; }
.error { color: var(--rood); font-size: .93rem; }

@media (max-width: 1000px) {
  .summary, .columns { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .tl-row { grid-template-columns: 170px 1fr 52px; }
  .tl-detail { padding-left: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .bar i { transition: width .6s ease-out; }
}

/* ================= Navigatie ================= */
.tabs { display: flex; gap: 4px; margin-left: 8px; }
.tabs a { padding: 6px 12px; border-radius: var(--radius-s); color: var(--muted); text-decoration: none; font-weight: 600; }
.tabs a:hover { color: var(--ink); background: var(--track); }
.tabs a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.icon-btn { border: 0; background: transparent; cursor: pointer; width: 28px; height: 28px; border-radius: var(--radius-s); color: var(--muted); flex-shrink: 0; line-height: 1; }
.icon-btn:hover { background: var(--track); color: var(--ink); }

/* ================= Borden ================= */
.board-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px clamp(16px, 4vw, 40px) 0; }
.board-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.board-tab { border: 1px solid var(--line); background: var(--surface); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--muted); }
.board-tab[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.board-tab[aria-selected="true"]::after { content: ' ▾'; font-size: .8em; opacity: .7; }
.board-tab.add { border-style: dashed; font-weight: 400; }
.board-actions { display: flex; gap: 8px; align-items: center; }
.save-state { font-size: .88rem; color: var(--muted); min-width: 80px; text-align: right; }
.save-state.ok::before { content: '✓ '; color: var(--groen); }
.save-state.err { color: var(--rood); cursor: pointer; text-decoration: underline; }

.board-layout { display: flex; align-items: flex-start; gap: 0; }
.frames {
  flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense; align-items: start; gap: 16px;
  padding: 16px clamp(16px, 4vw, 40px) 64px;
}

/* Kader */
.frame {
  grid-column: span var(--span, 4); position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent, var(--brand));
  border-radius: var(--radius-m); min-height: 140px; overflow: hidden;
}
.frame-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 6px; cursor: grab; user-select: none; border-bottom: 1px solid var(--line); }
.frame-head:active { cursor: grabbing; }
.grip { color: var(--muted); opacity: .5; font-size: 1.1rem; padding: 0 2px; }
.frame:hover .grip { opacity: 1; }
.frame-title { margin: 0; font-size: 1.05rem; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; border-radius: 3px; padding: 2px 4px; }
.frame-title:hover { background: var(--track); }
.frame-title input { width: 100%; font-weight: 700; border: 1px solid var(--brand); border-radius: 3px; padding: 1px 4px; background: var(--surface); }
.count { font-size: .82rem; color: var(--muted); background: var(--track); border-radius: 999px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.cards {
  flex: 1; overflow-y: auto; padding: 10px; display: grid; align-content: start; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.frame .empty { position: absolute; inset: 52px 12px 12px; display: grid; place-items: center; margin: 0; color: var(--muted); border: 2px dashed var(--line); border-radius: var(--radius-m); pointer-events: none; }
.dragging .frame .empty { border-color: var(--brand); color: var(--brand); }
.resize {
  position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; z-index: 2;
  background: linear-gradient(135deg, transparent 0 50%, var(--line) 50% 58%, transparent 58% 70%, var(--line) 70% 78%, transparent 78%);
}
.frame:hover .resize, .resize:focus-visible { background: linear-gradient(135deg, transparent 0 50%, var(--brand) 50% 58%, transparent 58% 70%, var(--brand) 70% 78%, transparent 78%); }
.frame.resizing { outline: 2px dashed var(--brand); outline-offset: 3px; }
.resizing-any { user-select: none; cursor: nwse-resize; }
.frame-ghost { opacity: .35; }
.add-frame { display: grid; place-items: center; min-height: 160px; border: 2px dashed var(--line); background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; border-top-width: 2px; }
.add-frame:hover { border-color: var(--brand); color: var(--brand); }

/* Kaart */
.card {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 8px; padding: 9px 10px 10px; cursor: grab; touch-action: manipulation;
  box-shadow: 0 1px 2px rgba(28, 42, 53, .06);
}
.card:hover { border-color: #c5d2dc; border-left-color: inherit; }
.card.tone-rood { border-left-color: var(--rood); }
.card.tone-oranje { border-left-color: var(--oranje); }
.card.tone-klaar { border-left-color: var(--klaar); opacity: .75; }
.card.tone-open { border-left-color: var(--brand); }
.card.missing { border-left-color: var(--onbekend); background: var(--paper); cursor: default; }
.card-top { display: flex; gap: 4px; align-items: flex-start; }
.card-title { flex: 1; font-weight: 600; line-height: 1.3; }
.card .remove { width: 22px; height: 22px; font-size: .8rem; opacity: 0; margin: -2px -4px 0 0; }
.card:hover .remove, .card .remove:focus-visible { opacity: 1; }
@media (hover: none) { .card .remove { opacity: .6; } }
.card-project { color: var(--muted); font-size: .88rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { height: 4px; background: var(--track); border-radius: 2px; margin: 8px 0 7px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--groen); }
.card-meta { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; }
.tone-rood .date { color: var(--rood); font-weight: 600; }
.tone-oranje .date { color: var(--oranje); font-weight: 600; }
.people { display: flex; }
.avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--brand-soft); color: var(--brand); border: 2px solid var(--surface); margin-left: -6px; }
.sub-toggle { margin-top: 8px; width: 100%; text-align: left; border: 0; background: var(--paper); border-radius: 6px; padding: 5px 8px; cursor: pointer; font-size: .88rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.sub-toggle:hover { color: var(--ink); background: var(--track); }
.chev { width: 10px; }
.new { font-style: normal; font-size: .75rem; font-weight: 700; color: #fff; background: var(--brand); border-radius: 999px; padding: 0 7px; margin-left: auto; }
.st-name .new { margin-left: 4px; }
.subtasks { list-style: none; margin: 6px 0 0; padding: 0; font-size: .88rem; }
.subtasks.nested { margin: 4px 0 0 18px; }
.subtasks li { display: grid; grid-template-columns: 16px 1fr auto; gap: 2px 6px; align-items: start; padding: 4px 0; border-top: 1px solid var(--line); }
.subtasks li > .subtasks { grid-column: 1 / -1; }
.subtasks .check { width: 14px; height: 14px; margin-top: 3px; border: 1.5px solid var(--onbekend); border-radius: 3px; font-size: .7rem; display: grid; place-items: center; color: #fff; }
.subtasks li.done > .check { background: var(--groen); border-color: var(--groen); }
.subtasks li.done > .st-name { color: var(--muted); text-decoration: line-through; }
.subtasks .st-meta { color: var(--muted); white-space: nowrap; font-size: .82rem; }
.subtasks li.late > .st-meta { color: var(--rood); font-weight: 600; }
.card-ghost { opacity: .4; background: var(--brand-soft); border: 2px dashed var(--brand); }
.card-chosen { box-shadow: 0 8px 24px rgba(28, 42, 53, .18); }
.card-drag { transform: rotate(1.5deg); }

/* Lade met taken */
.drawer {
  width: 360px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border-left: 1px solid var(--line);
}
.drawer[hidden] { display: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { margin: 0; }
.drawer .sub { margin: 0; }
.drawer input[type=search], .drawer select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.drawer-filters { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .92rem; color: var(--muted); }
.drawer-filters label { display: flex; gap: 5px; align-items: center; }
.drawer-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.drawer-item { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: grab; background: var(--surface); }
.drawer-item:hover { border-color: var(--brand); }
.drawer-item.used { opacity: .55; }
.di-text { flex: 1; min-width: 0; }
.di-text strong { display: block; font-weight: 600; font-size: .95rem; }
.di-text small { color: var(--muted); }
.add-to { font-size: 1.2rem; color: var(--brand); border: 1px solid var(--line); }
/* Een taak die vanuit de lade in een kader valt, ziet eruit als een kaart */
.cards .drawer-item { margin: 0; }

/* Keuzemenu en melding */
.popover { position: absolute; z-index: 50; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 10px 30px rgba(28, 42, 53, .18); padding: 6px; }
.popover button[data-act] { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.popover button[data-act]:hover:not(:disabled) { background: var(--track); }
.popover button:disabled { opacity: .4; cursor: not-allowed; }
.popover .danger { color: var(--rood); }
.popover .pop-label { margin: 4px 10px 4px; font-size: .85rem; color: var(--muted); }
.popover .dot { margin: 0; }
.swatches { display: flex; gap: 6px; padding: 6px 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.popover .swatch { width: 24px !important; height: 24px; padding: 0 !important; border-radius: 50% !important; border: 2px solid var(--surface) !important; box-shadow: 0 0 0 1px var(--line); }
.popover .swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; gap: 16px; align-items: center; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: var(--radius-m); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); max-width: calc(100vw - 32px); }
.toast[hidden] { display: none; }
.toast button { background: none; border: 0; color: #9fd0f0; font-weight: 700; cursor: pointer; white-space: nowrap; }

@media (max-width: 1100px) {
  .frame { grid-column: span max(6, var(--span)); }
}
@media (max-width: 700px) {
  .frame, .add-frame { grid-column: 1 / -1 !important; }
  .board-layout { display: block; }
  .drawer { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 70vh; z-index: 40; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cards { grid-template-columns: 1fr; }
}

/* ================= Subtaken: voortgang en health ================= */
.subtasks li { grid-template-columns: 16px 1fr; }
.subtasks li > .subtasks { grid-column: 1 / -1; }
.st-body { min-width: 0; }
.st-line { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; }
.st-name { min-width: 0; line-height: 1.3; }
.health-pill {
  flex-shrink: 0; font-size: .74rem; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 3px 7px; border-radius: 999px; color: #fff; background: var(--onbekend); margin-top: 1px;
}
.h-groen .health-pill { background: var(--groen); }
.h-oranje .health-pill { background: var(--oranje); }
.h-rood .health-pill { background: var(--rood); }
.h-klaar .health-pill { background: transparent; color: var(--muted); padding-left: 0; padding-right: 0; }
/* Berekend (geen health in Celoxis): omlijnd in plaats van gevuld */
.health-pill.calc { background: transparent !important; border: 1.5px solid currentColor; padding: 2px 6px; }
.h-groen .health-pill.calc { color: var(--groen); }
.h-oranje .health-pill.calc { color: var(--oranje); }
.h-rood .health-pill.calc { color: var(--rood); }
.st-progress { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.st-bar { flex: 1; height: 5px; background: var(--track); border-radius: 3px; overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--onbekend); }
.h-groen .st-bar i { background: var(--groen); }
.h-oranje .st-bar i { background: var(--oranje); }
.h-rood .st-bar i { background: var(--rood); }
.st-pct { font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.subtasks .st-meta { display: block; margin-top: 2px; }
.subtasks li.late > .st-body > .st-meta { color: var(--rood); font-weight: 600; }
.subtasks li.done > .st-body .st-name { color: var(--muted); text-decoration: line-through; }
.hd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: .74rem; font-weight: 700; color: #fff; }
.hd.rood { background: var(--rood); }
.hd.oranje { background: var(--oranje); }
.sub-toggle .new { margin-left: auto; }

/* ================= Openen in Celoxis ================= */
.card:not(.missing) { cursor: pointer; }
.card .open-cx { width: 22px; height: 22px; font-size: .85rem; opacity: 0; margin-top: -2px; }
.card:hover .open-cx, .card .open-cx:focus-visible { opacity: 1; color: var(--brand); }
@media (hover: none) { .card .open-cx { opacity: .7; } }
.card:not(.missing):hover .card-title { color: var(--brand); }
.subtasks li[data-sub] { cursor: pointer; border-radius: 4px; }
.subtasks li[data-sub]:hover > .st-body .st-name { color: var(--brand); text-decoration: underline; }
[data-task] { cursor: pointer; }
.list li[data-task]:hover strong, .tl-detail tr[data-task]:hover td:first-child { color: var(--brand); text-decoration: underline; }
.page-foot { text-align: center; padding: 8px 16px 40px; }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: .9rem; }
.link-btn:hover { color: var(--brand); }
.cx-dialog { border: 0; border-radius: var(--radius-m); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.cx-dialog::backdrop { background: rgba(18, 27, 34, .45); }
.cx-dialog-body { padding: 22px 24px; }
.cx-dialog h2 { font-size: 1.3rem; margin: 0 0 4px; }
.cx-steps { padding-left: 20px; margin: 16px 0; line-height: 1.6; }
.cx-steps a { color: var(--brand); font-weight: 600; }
.cx-field { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 12px; }
.cx-field input { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); font-weight: 400; }
.cx-dialog code { word-break: break-all; font-size: .82rem; }
.cx-actions { display: flex; gap: 8px; margin-top: 16px; }

/* ================= Projectfilter in de takenlijst ================= */
.proj-filter { display: flex; flex-direction: column; gap: 6px; }
.proj-btn { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; text-align: left; }
.proj-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-btn.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.proj-panel { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 8px; background: var(--paper); display: flex; flex-direction: column; gap: 6px; }
.proj-panel[hidden] { display: none; }
.proj-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.proj-list label { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; cursor: pointer; }
.proj-list label:hover { background: var(--surface); }
.proj-list label.none { opacity: .55; }
.proj-list input { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }
.pl-text { flex: 1; min-width: 0; }
.pl-text strong { display: block; font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-text small { color: var(--muted); }
.pl-count { font-size: .78rem; color: var(--muted); background: var(--track); border-radius: 999px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.proj-foot { display: flex; justify-content: space-between; align-items: center; }
.proj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-chips:empty { display: none; }
.chip { border: 1px solid var(--brand); background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 2px 10px; font-size: .84rem; font-weight: 600; cursor: pointer; }
.chip span { margin-left: 4px; opacity: .7; }
.group-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 10px 2px 6px; font-weight: 700; font-size: .9rem; color: var(--muted); text-transform: none; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.group-head:first-child { padding-top: 0; }
.di-text small.late { color: var(--rood); }

/* ================= Boomstructuur in de takenlijst ================= */
.drawer-item { margin-left: calc(var(--depth, 0) * 18px); gap: 6px; padding-left: 4px; position: relative; }
.drawer-item[style*="--depth:1"], .drawer-item[style*="--depth:2"], .drawer-item[style*="--depth:3"], .drawer-item[style*="--depth:4"] { background: var(--paper); }
.drawer-item::before { content: ''; position: absolute; left: -10px; top: 0; bottom: 0; border-left: 2px solid var(--line); display: none; }
.drawer-item:not([style*="--depth:0"])::before { display: block; }
.drawer-item.h-rood { box-shadow: inset 3px 0 0 var(--rood); }
.drawer-item.h-oranje { box-shadow: inset 3px 0 0 var(--oranje); }
.drawer-item.h-groen { box-shadow: inset 3px 0 0 var(--groen); }
.tree-toggle { flex-shrink: 0; width: 24px; height: 24px; border: 0; border-radius: 4px; background: var(--track); color: var(--ink); cursor: pointer; font-size: .8rem; }
.tree-toggle:hover { background: var(--brand-soft); color: var(--brand); }
.tree-spacer { width: 24px; flex-shrink: 0; }
.group-head { padding: 0; border-bottom: 0; }
.group-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); padding: 10px 2px 6px; font-weight: 700; font-size: .9rem; color: var(--ink); cursor: pointer; text-align: left; }
.group-toggle:hover { color: var(--brand); }
.drawer-item.used .di-text small { color: var(--brand); }
.card-parent { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= Gebruikers, rollen en alleen-lezen ================= */
.user-box { display: flex; align-items: center; gap: 10px; }
.me { display: flex; align-items: center; gap: 6px; font-size: .92rem; }
.me .avatar { margin: 0; width: 30px; height: 30px; font-size: .78rem; }
.me-name small { display: block; color: var(--muted); font-size: .76rem; line-height: 1; }
@media (max-width: 700px) { .me-name { display: none; } }

.field { display: block; font-weight: 600; font-size: .92rem; margin-top: 12px; }
.login .field input { margin: 4px 0 0; font-weight: 400; }
.login .btn { margin-top: 16px; }
.small { font-size: .86rem; margin-top: 14px; }
.hint { display: block; font-weight: 400; font-size: .84rem; color: var(--muted); margin-top: 3px; }
.hint.ok { color: var(--groen); }
.show-pw { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: .9rem; color: var(--muted); }
.login input[readonly] { background: var(--paper); color: var(--muted); }

.board-notes { padding: 0 clamp(16px, 4vw, 40px); }
.page-intro { margin: 10px 0 0; color: var(--muted); }
.page-intro:empty { display: none; }
.board-note { margin-top: 12px; background: var(--brand-soft); border-radius: var(--radius-m); padding: 10px 14px; font-size: .95rem; }
.board-note a { color: var(--brand); font-weight: 700; }

.readonly .card .remove, .readonly .frame-menu, .readonly .resize, .readonly .add-frame,
.readonly #addFrame, .readonly #openDrawer, .readonly .board-tab.add, .readonly .grip, .readonly .save-state { display: none !important; }
.readonly .frame-head { cursor: default; }
.readonly .frame-title { cursor: default; }
.readonly .frame-title:hover { background: none; }
.readonly .board-tab[aria-selected="true"]::after { content: none; }
.readonly .frame .empty { border-style: solid; }

/* ================= Gebruikersbeheer ================= */
.users-page { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 20px; align-items: start; }
.invite-panel input[type=text], .invite-panel input[type=email] { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); font-weight: 400; }
.roles { border: 0; padding: 0; margin: 16px 0 0; }
.roles legend { font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.role-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-m); margin-bottom: 8px; cursor: pointer; }
.role-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.role-opt input { margin-top: 3px; accent-color: var(--brand); }
.role-opt small { display: block; color: var(--muted); font-size: .86rem; }
.invite-panel .btn.primary { margin-top: 8px; }
.invite-result { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.invite-result p { margin: 0 0 10px; }
.ok-line { color: var(--groen); }
.result-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.result-actions a.btn { text-decoration: none; }
.user-list { list-style: none; margin: 0; padding: 0; }
.user-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.user-row:first-child { border-top: 0; }
.user-row .avatar { margin: 0; width: 36px; height: 36px; flex-shrink: 0; }
.user-row.pending .avatar { background: var(--track); color: var(--muted); }
.u-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.u-main strong small { font-weight: 400; color: var(--muted); }
.u-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.u-status.wait { color: var(--oranje); }
.u-status.expired { color: var(--rood); }
.u-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.u-role { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
@media (max-width: 900px) {
  .users-page { grid-template-columns: 1fr; }
  .user-row { flex-wrap: wrap; }
  .u-actions { width: 100%; padding-left: 48px; flex-wrap: wrap; }
}

/* ================= Agenda TPO ================= */
.agenda-panel {
  width: 380px; flex-shrink: 0; margin: 16px 0 64px clamp(16px, 4vw, 40px);
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--ink);
  border-radius: var(--radius-m); padding: 16px 16px 14px; position: sticky; top: 12px;
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.agenda-panel[hidden] { display: none; }
.mode-agenda .frames { padding-left: 16px; }
.ag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ag-head h2 { margin: 0; font-size: 1.3rem; }
.ag-progress { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-date { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 12px; font-size: .9rem; color: var(--muted); }
.ag-date strong { color: var(--ink); text-transform: capitalize; }
.ag-date input { padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.ag-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ag-item { display: flex; align-items: flex-start; gap: 6px; padding: 7px 4px; border-top: 1px solid var(--line); background: var(--surface); }
.ag-item:first-child { border-top: 0; }
.ag-grip { cursor: grab; color: var(--muted); opacity: .45; padding: 6px 0 0; user-select: none; touch-action: none; }
.ag-item:hover .ag-grip { opacity: 1; }
.ag-check { position: relative; flex-shrink: 0; width: 28px; height: 28px; cursor: pointer; }
.ag-check input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.ag-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .9rem; }
.ag-check:hover .ag-num { box-shadow: 0 0 0 2px var(--brand); }
.ag-check input:focus-visible + .ag-num { outline: 2px solid var(--brand); outline-offset: 2px; }
.ag-item.done .ag-num { background: var(--groen); color: #fff; font-size: 0; }
.ag-item.done .ag-num::after { content: '✓'; font-size: .95rem; }
.ag-check input:disabled { cursor: default; }
.ag-body { flex: 1; min-width: 0; }
.ag-title { width: 100%; border: 1px solid transparent; border-radius: 4px; padding: 3px 6px; background: transparent; font-weight: 600; }
.ag-title:hover { border-color: var(--line); }
.ag-title:focus { border-color: var(--brand); background: var(--surface); outline: none; }
.ag-title-text { display: block; padding: 3px 6px; font-weight: 600; cursor: pointer; }
.ag-item.done .ag-title, .ag-item.done .ag-title-text { color: var(--muted); text-decoration: line-through; }
.ag-preview { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0 6px; color: var(--muted); font-size: .86rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-preview:hover { color: var(--brand); }
.ag-notes { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--muted); position: relative; }
.ag-notes:hover { border-color: var(--brand); color: var(--brand); }
.ag-notes.has { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.ag-notes.has::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); }
.ag-ghost { opacity: .4; background: var(--brand-soft); }
.ag-empty { margin: 8px 0; }
.ag-add { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ag-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.ag-perm { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.ag-perm input { accent-color: var(--brand); }
.ag-dialog { width: min(640px, calc(100vw - 32px)); }
.ag-dlg-kicker { margin: 0 0 4px; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.ag-dlg-title { width: 100%; font-size: 1.3rem; font-weight: 700; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; margin-left: -4px; background: transparent; }
.ag-dlg-title:hover, .ag-dlg-title:focus { border-color: var(--line); outline: none; }
.ag-dlg-label { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 4px; }
.ag-dialog textarea { width: 100%; min-height: 200px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); font: inherit; line-height: 1.5; }
.ag-dialog textarea:focus { border-color: var(--brand); outline: none; }
.ag-dlg-notes { white-space: pre-wrap; background: var(--paper); border-radius: var(--radius-s); padding: 10px 12px; min-height: 80px; max-height: 50vh; overflow-y: auto; }
.ag-dlg-done { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.ag-dlg-hint { margin: 0; align-self: center; }
.danger-btn { color: var(--rood); }
.danger-btn:hover { border-color: var(--rood); }
@media (max-width: 1000px) {
  .mode-agenda .board-layout { flex-direction: column; align-items: stretch; }
  .agenda-panel { width: auto; position: static; max-height: none; margin: 16px clamp(16px, 4vw, 40px) 0; }
  .mode-agenda .frames { padding-left: clamp(16px, 4vw, 40px); }
}
@media (max-width: 700px) { .mode-agenda .board-layout { display: flex; } }
@media (min-width: 701px) and (max-width: 1000px) {
  .mode-agenda .drawer { position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; z-index: 40; box-shadow: -10px 0 30px rgba(0, 0, 0, .15); }
}

/* Kopregel compact houden met vijf tabbladen */
.top { gap: 12px; }
.tabs a { padding: 6px 10px; }
@media (max-width: 1500px) { .me-name { display: none; } }
@media (max-width: 1250px) { .sync { font-size: 0; } .sync::after { content: ''; } }
@media (max-width: 1100px) { .top h1 { display: none; } }
@media (min-width: 701px) {
  .top { flex-wrap: nowrap; }
  .tabs { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .tabs::-webkit-scrollbar { display: none; }
  .top > * { flex-shrink: 0; }
  .top > .tabs { flex-shrink: 1; }
}

/* ================= Takenlijst verbergen ================= */
.hide-btn { padding: 4px 10px; font-size: .9rem; color: var(--muted); }
.hide-btn:hover { color: var(--brand); }
.drawer:not([hidden]) { animation: drawer-in .18s ease-out; }
@keyframes drawer-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.drawer-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 30;
  writing-mode: vertical-rl; padding: 14px 7px; border: 1px solid var(--brand); border-right: 0;
  border-radius: 10px 0 0 10px; background: var(--brand); color: #fff; font-weight: 700; letter-spacing: .03em;
  cursor: pointer; box-shadow: -4px 4px 14px rgba(28, 42, 53, .18);
}
.drawer-tab span { display: inline-block; transform: rotate(-90deg); margin-bottom: 6px; }
.drawer-tab:hover { padding-right: 10px; }
.drawer-tab[hidden] { display: none; }
@media (max-width: 700px) { .drawer-tab { display: none; } }
@media (prefers-reduced-motion: reduce) { .drawer:not([hidden]) { animation: none; } }

/* ================= S.Health-kleuren, voortgang en einddatum ================= */
:root { --toekomst: #7b8fa1; }
/* Eén kleur per S.Health; gebruikt voor rand, achtergrondtint, label en balk */
.tone-groen, .h-groen { --hc: var(--groen); }
.tone-oranje, .h-oranje { --hc: var(--oranje); }
.tone-rood, .h-rood { --hc: var(--rood); }
.tone-toekomst, .h-toekomst { --hc: var(--toekomst); }
.tone-onbekend, .h-onbekend { --hc: var(--onbekend); }
.tone-klaar, .h-klaar { --hc: var(--klaar); }

/* Kaart: dikke gekleurde rand en lichte tint in de S.Health-kleur */
.card[class*="tone-"]:not(.missing) {
  border-left: 6px solid var(--hc, var(--brand));
  background: color-mix(in srgb, var(--hc, var(--brand)) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--hc, var(--brand)) 35%, var(--line));
  border-left-color: var(--hc, var(--brand));
}
.card[class*="tone-"]:not(.missing):hover { border-left-color: var(--hc, var(--brand)); }
.card.tone-klaar { opacity: .8; }
.card .sub-toggle { background: color-mix(in srgb, var(--surface) 70%, transparent); }

/* Statusregel: label · balk · % · einddatum */
.status-line { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: .82rem; min-width: 0; }
.status-line .health-pill { background: var(--hc, var(--onbekend)); margin-top: 0; }
.status-line .health-pill.calc { background: transparent !important; color: var(--hc, var(--muted)); }
.h-klaar .status-line .health-pill, .tone-klaar .status-line .health-pill { background: var(--klaar); color: #fff; padding: 3px 7px; }
.sl-bar { flex: 1; min-width: 36px; height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; }
.sl-bar i { display: block; height: 100%; background: var(--hc, var(--groen)); }
.sl-pct { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.sl-date { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sl-date.late { color: var(--rood); font-weight: 700; }
.done .sl-date.late, .tone-klaar .sl-date.late { color: var(--muted); font-weight: 400; }
.card .card-meta { margin-top: 6px; justify-content: flex-end; }

/* Subtaken (uitgevouwen): gekleurde rand per taak, gereed gedempt onderaan */
.subtasks li[class*="h-"] { border-left: 4px solid var(--hc, var(--line)); padding-left: 6px; margin-top: 3px;
  background: color-mix(in srgb, var(--hc, var(--line)) 7%, transparent); border-radius: 4px; }
.subtasks li.done { opacity: .6; }
.subtasks li.done:hover { opacity: 1; }
.subtasks .st-meta { white-space: normal; }

/* Takenlijst rechts: zelfde kleuren */
.drawer-item[class*="h-"] { border-left: 5px solid var(--hc, var(--line));
  background: color-mix(in srgb, var(--hc, var(--line)) 7%, var(--surface)); align-items: flex-start; box-shadow: none; }
.drawer-item .tree-toggle, .drawer-item .tree-spacer, .drawer-item .add-to { margin-top: 2px; }
.drawer-item .status-line { margin-top: 4px; }
.drawer-item .di-text small { display: block; margin-top: 2px; }
.drawer-item.done { opacity: .6; }
.status-line { flex-wrap: wrap; row-gap: 3px; }
.subtasks li.late > .st-body > .st-meta, .subtasks .st-meta { color: var(--muted); font-weight: 400; }

/* ================= Weergave wisselen: kaarten / procesflow ================= */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-s, 8px); overflow: hidden; background: var(--surface); }
.view-toggle button { border: 0; background: transparent; padding: 7px 12px; font: inherit; color: var(--muted); cursor: pointer; }
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.mode-agenda .view-toggle { display: none; }
body.flow-view #addFrame { display: none; }
.pop-sub { color: var(--muted); font-weight: 400; }

/* ================= Procesflow ================= */
.frames.flow-mode { display: block; padding-top: 8px; }
.fl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.fl-hint { color: var(--brand); font-weight: 600; }
.fl-zoom { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.fl-zoom .btn { padding: 5px 10px; }
.fl-pct { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.btn.small { padding: 3px 9px; font-size: .85rem; }

.fl-scroll { position: relative; overflow: auto; height: calc(100vh - 210px); min-height: 360px;
  border: 1px solid var(--line); border-radius: 12px;
  background-color: var(--paper, #f3f6f8);
  background-image: radial-gradient(color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px; }
.fl-sizer { position: relative; pointer-events: none; }
.fl-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fl-blank { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); pointer-events: none; }
.fl-blank p { margin: 4px 0; }

/* Proces */
.fl-proc { position: absolute; background: color-mix(in srgb, var(--surface) 88%, var(--paper, #f3f6f8));
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 2px 10px rgba(20, 40, 47, .06); }
.fl-proc-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 4px; user-select: none; }
body:not(.readonly) .fl-proc-head { cursor: grab; }
body.dragging .fl-proc-head { cursor: grabbing; }
.fl-proc-head h3 { margin: 0; font-size: 1.15rem; white-space: nowrap; }
.fl-proc-head .count { margin-right: 4px; }
.fl-steps { display: flex; align-items: flex-start; gap: 72px; padding: 14px 18px 20px; }
.fl-num { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-size: .75rem; font-weight: 700; }
.fl-num.big { min-width: 26px; height: 26px; background: var(--brand); color: #fff; font-size: .85rem; }

/* Stap */
.fl-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 18px 18px; min-width: 224px; }
.fl-step-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; min-height: 28px; }
.fl-step-title { font-weight: 700; font-size: .92rem; text-align: center; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-step-head .icon-btn { margin-left: auto; }
.fl-grid { position: relative; display: grid; gap: 15px 17px; grid-auto-rows: minmax(92px, auto); min-height: 92px; }
.fl-grid > .sortable-ghost, .fl-grid > .drawer-item { display: none; }
.fl-empty { margin: 0; color: var(--muted); font-size: .88rem; align-self: center; text-align: center; border: 2px dashed var(--line); border-radius: 10px; padding: 26px 10px; }
.fl-steps > .fl-empty { padding: 26px 40px; }
body.dragging .fl-drop { outline: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 6px; border-radius: 10px; }

/* Taakblok, in de S.Health-kleur */
.fl-block { position: relative; width: 188px; box-sizing: border-box; padding: 9px 10px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--hc, var(--line)) 40%, var(--line)); border-left: 6px solid var(--hc, var(--line));
  background: color-mix(in srgb, var(--hc, var(--line)) 10%, var(--surface)); box-shadow: 0 1px 3px rgba(20, 40, 47, .07); }
.fl-block:hover { box-shadow: 0 4px 12px rgba(20, 40, 47, .13); }
.fl-block.tone-missing { --hc: var(--onbekend); border-style: dashed; opacity: .8; }
.fl-block.tone-klaar { opacity: .85; }
.fl-bname { font-weight: 700; font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fl-block .status-line { font-size: .78rem; gap: 5px; }
.fl-block .sl-bar { min-width: 24px; }
.fl-missing { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.fl-bctl { position: absolute; right: 4px; top: -13px; display: none; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); z-index: 3; }
.fl-block:hover .fl-bctl, .fl-block:focus-within .fl-bctl { display: flex; }
.fl-bctl button { border: 0; background: transparent; width: 22px; height: 22px; border-radius: 5px; cursor: pointer; color: var(--muted); font-size: .8rem; line-height: 1; }
.fl-bctl button:hover { background: var(--brand-soft); color: var(--brand); }
.fl-bctl button.rm:hover { background: color-mix(in srgb, var(--rood) 15%, transparent); color: var(--rood); }
.connecting .fl-bctl { display: none !important; }

/* Pijl trekken */
.fl-scroll.connecting .fl-block, .fl-scroll.connecting .fl-step, .fl-scroll.connecting .fl-proc { cursor: crosshair; }
.fl-scroll.connecting .fl-block:hover, .fl-scroll.connecting .fl-step:hover:not(:has(.fl-block:hover)),
.fl-scroll.connecting .fl-proc:hover:not(:has(.fl-step:hover)) { outline: 3px solid color-mix(in srgb, var(--brand) 50%, transparent); outline-offset: 2px; }
.fl-src { outline: 3px solid var(--brand) !important; outline-offset: 3px; }

/* Pijlen */
.fl-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.fl-edge { fill: none; stroke: #4f6472; stroke-width: 1.6; }
.fl-arrowhead { fill: #4f6472; }
.fl-edge-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.fl-edge-hit:hover { stroke: color-mix(in srgb, var(--rood) 35%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="licht"]) .fl-edge { stroke: #c9b4ea; } :root:not([data-theme="licht"]) .fl-arrowhead { fill: #c9b4ea; } }
:root[data-theme="donker"] .fl-edge { stroke: #c9b4ea; }
:root[data-theme="donker"] .fl-arrowhead { fill: #c9b4ea; }

/* ================= Voortgang bijwerken (beheerders) ================= */
.pct-btn { font: inherit; color: inherit; background: transparent; border: 1px dashed transparent; border-radius: 6px;
  padding: 0 3px; margin: 0 -3px; cursor: pointer; line-height: inherit; }
.pct-btn:hover, .pct-btn:focus-visible { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); outline: none; }
.pct-btn .sl-pct { pointer-events: none; }
.status-line .pct-btn { margin: 0; }
.pct-btn.check-btn { padding: 0; margin: 0; border: 0; }
.pct-btn.check-btn .check { cursor: pointer; }
.pct-btn.check-btn:hover .check { border-color: var(--groen); background: color-mix(in srgb, var(--groen) 18%, transparent); }
.pct-btn.tag { border: 1px solid var(--line); margin: 0 6px 0 0; padding: 2px 7px; font-size: .8rem; }

.vg-pop { position: absolute; z-index: 1000; width: 300px; max-width: calc(100vw - 16px); box-sizing: border-box;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 40, 47, .22); padding: 14px; }
.vg-pop[hidden] { display: none; }
.vg-name { margin: 0 0 2px; font-weight: 700; line-height: 1.3; }
.vg-now { margin: 0 0 10px; color: var(--muted); font-size: .9rem; }
.vg-pop .btn.vg-done { width: 100%; margin-bottom: 10px; background: var(--groen); border-color: var(--groen); color: #fff; }
.vg-row { display: flex; gap: 6px; margin-bottom: 10px; }
.vg-q { flex: 1; font: inherit; padding: 6px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.vg-q:hover, .vg-q.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.vg-custom, .vg-note { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.vg-custom span { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--ink); }
.vg-custom input[type="range"] { flex: 1; }
.vg-custom input[type="number"] { width: 58px; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.vg-note textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; background: var(--surface); color: var(--ink); }
.vg-msg { margin: 0 0 8px; font-size: .85rem; color: var(--muted); min-height: 0; }
.vg-msg:empty { display: none; }
.vg-msg.err { color: var(--rood); font-weight: 600; }
.vg-foot { display: flex; justify-content: flex-end; gap: 8px; }
.vg-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1001; background: #1f2d36; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.vg-toast[hidden] { display: none; }
.subtasks li > .check-btn { align-self: flex-start; margin-top: 3px; flex-shrink: 0; }
.subtasks li > .check-btn .check { margin-top: 0; }
.subtasks li.done > .check-btn .check { background: var(--groen); border-color: var(--groen); }

/* ================= Nieuwe taak (beheerders) ================= */
.drawer-head-actions { display: flex; gap: 6px; align-items: center; }
.admin-only[hidden] { display: none !important; }
.nt-dialog { width: min(620px, calc(100vw - 32px)); }
.nt-head { display: flex; justify-content: space-between; align-items: center; }
.nt-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 8px 0 14px; font-size: .85rem; }
.nt-steps li { padding: 4px 10px; border-radius: 999px; background: var(--track); color: var(--muted); }
.nt-steps li.on { background: var(--brand); color: #fff; font-weight: 700; }
.nt-steps li.done { background: var(--brand-soft); color: var(--brand); }
.nt-search { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; margin-bottom: 8px; background: var(--surface); color: var(--ink); }
.nt-list, .nt-tree { list-style: none; margin: 0; padding: 0; max-height: min(52vh, 440px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.nt-list li + li, .nt-tree li + li { border-top: 1px solid var(--line); }
.nt-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: transparent; font: inherit; color: var(--ink); cursor: pointer; }
.nt-list button:hover { background: var(--brand-soft); }
.nt-list small { color: var(--muted); }
.nt-tree li { display: flex; align-items: center; padding-left: calc(var(--d, 0) * 18px + 4px); }
.nt-tree li.sel { background: var(--brand-soft); }
.nt-tog { flex: 0 0 26px; height: 26px; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: .85rem; }
.nt-pick { flex: 1; text-align: left; padding: 7px 8px; border: 0; background: transparent; font: inherit; color: var(--ink); cursor: pointer; }
.nt-pick:hover { color: var(--brand); }
.nt-tree li.sel .nt-pick { font-weight: 700; color: var(--brand); }
.nt-wbs { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.nt-crumb { margin: 0 0 8px; }
.nt-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--oranje) 14%, transparent); font-size: .88rem; display: block; }
.nt-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.nt-form label { display: block; margin-bottom: 10px; font-weight: 600; font-size: .9rem; }
.nt-form input, .nt-form select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 400; background: var(--surface); color: var(--ink); }
.nt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nt-msg { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.nt-msg:empty { display: none; }
.nt-msg.err { color: var(--rood); font-weight: 600; }
.drawer-head { flex-wrap: wrap; gap: 8px; }
.drawer-head-actions .btn { white-space: nowrap; }

/* ================= Celoxis API-key van beheerders ================= */
.key-dialog { width: min(540px, calc(100vw - 32px)); }
.key-steps { margin: 8px 0 4px; padding-left: 20px; line-height: 1.5; }
.key-dialog .field input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 400; background: var(--surface); color: var(--ink); }
.u-status .link-btn { padding: 0; color: var(--brand); font: inherit; font-size: inherit; }
#keyBlock .hint { line-height: 1.45; }
.login .show-pw input { width: auto; margin: 0; }
/* Initialen van betrokkenen op een taak in de procesflow */
.fl-people { display: flex; justify-content: flex-end; margin-top: 6px; padding-left: 6px; }
.fl-people .avatar { width: 22px; height: 22px; font-size: .68rem; }
.fl-people .avatar.more { background: var(--track); color: var(--muted); }

/* ================= Takenlijst ================= */
.tk-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.tk-filters #q { flex: 1 1 220px; min-width: 180px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--surface); color: var(--ink); }
.tk-filters select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--surface); color: var(--ink); }
.tk-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .92rem; white-space: nowrap; }
.ms { position: relative; }
.ms-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; max-width: 300px; }
.ms-btn.on { border-color: var(--brand); background: var(--brand-soft); }
.ms-label { color: var(--muted); }
.ms-btn.on .ms-label { color: var(--brand); }
.ms-sum { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-panel { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; width: 300px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(20, 40, 47, .18); padding: 8px; }
.ms-q { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; margin-bottom: 6px; background: var(--surface); color: var(--ink); }
.ms-opts { max-height: 300px; overflow: auto; }
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; }
.ms-opt:hover { background: var(--brand-soft); }
.ms-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hc); flex-shrink: 0; }
.ms-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }

.tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.tk-bar #count { font-weight: 700; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-chip { border: 1px solid var(--brand); background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.tk-chip:hover { background: var(--brand); color: #fff; }

.tk-month { font-size: 1rem; margin: 18px 0 6px; color: var(--muted); text-transform: capitalize; }
.tk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tk-row { display: grid; grid-template-columns: minmax(0, 1fr) 230px 150px 110px; gap: 14px; align-items: center; padding: 9px 12px;
  background: color-mix(in srgb, var(--hc, var(--line)) 7%, var(--surface)); border: 1px solid var(--line); border-left: 5px solid var(--hc, var(--line)); border-radius: 10px; cursor: pointer; }
.tk-row:hover, .tk-row:focus-visible { box-shadow: 0 3px 10px rgba(20, 40, 47, .1); outline: none; }
.tk-row.done { opacity: .65; }
.tk-main { min-width: 0; }
.tk-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-path { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-status { display: flex; align-items: center; gap: 7px; font-size: .85rem; }
.tk-status .health-pill { background: var(--hc, var(--onbekend)); margin: 0; white-space: nowrap; }
.tk-status .health-pill.calc { background: transparent; color: var(--hc); }
.tk-row.h-klaar .tk-status .health-pill { background: var(--klaar); color: #fff; }
.tk-dates { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.tk-dates .late { color: var(--rood); font-weight: 700; }
.tk-dates small { color: var(--muted); }
.tk-people { display: flex; justify-content: flex-end; padding-left: 6px; }
.tk-people .avatar.more { background: var(--track); color: var(--muted); }
.tk-empty { padding: 30px; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: 12px; }
.tk-more { text-align: center; margin: 16px 0; }
@media (max-width: 760px) {
  .tk-row { grid-template-columns: 1fr auto; }
  .tk-status { grid-column: 1 / -1; }
  .tk-people { grid-row: 1; grid-column: 2; }
}

/* ================= Gantt ================= */
.gt-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.gt-controls select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 700; background: var(--surface); color: var(--ink); max-width: 340px; }
.seg { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: 7px 11px; font: inherit; color: var(--ink); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: var(--brand-soft); color: var(--brand); }
.seg button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.seg-label { padding: 0 8px 0 10px; color: var(--muted); font-size: .9rem; border-right: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; }
.gt-scales { margin-left: auto; }

.gt-wrap { position: relative; overflow: auto; height: calc(100vh - 190px); min-height: 380px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.gt-head { position: sticky; top: 0; z-index: 4; display: flex; height: 52px; background: var(--paper, #f3f6f8); border-bottom: 1px solid var(--line); }
.gt-left { position: sticky; left: 0; z-index: 2; flex: 0 0 820px; width: 820px; display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 52px 96px 84px 84px 80px; align-items: center; gap: 0 8px; padding: 0 10px 0 6px; box-sizing: border-box;
  background: var(--surface); border-right: 2px solid var(--line); }
.gt-lefthead { background: var(--paper, #f3f6f8); font-weight: 700; font-size: .85rem; color: var(--muted); z-index: 5; }
.gt-scale { position: relative; flex: 0 0 auto; }
.gt-scale-row { position: relative; height: 26px; }
.gt-u { position: absolute; top: 0; height: 100%; box-sizing: border-box; border-left: 1px solid var(--line); font-size: .75rem; color: var(--muted); padding: 5px 0 0 4px; white-space: nowrap; overflow: hidden; }
.gt-u.major { font-weight: 700; color: var(--ink); font-size: .8rem; }
.gt-today-tag { position: absolute; bottom: 2px; transform: translateX(-50%); background: var(--rood); color: #fff; font-size: .7rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; }

.gt-body { position: relative; }
.gt-grid { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.gt-grid i { position: absolute; top: 0; bottom: 0; border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.gt-grid i.major { border-left-color: var(--line); }
.gt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rood); opacity: .85; }
.gt-row { position: relative; display: flex; height: 34px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.gt-row:hover .gt-left, .gt-row:hover .gt-tl { background-color: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
.gt-row:hover .gt-left { background-color: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
.gt-row.is-sum .gt-open { font-weight: 700; }
.gt-row.done .gt-open { color: var(--muted); }
.gt-wbs { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; overflow: hidden; }
.gt-name { display: flex; align-items: center; min-width: 0; }
.gt-tog { flex: 0 0 22px; width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .85rem; border-radius: 4px; }
button.gt-tog:hover { background: var(--brand-soft); color: var(--brand); }
.gt-open { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gt-open:hover { color: var(--brand); text-decoration: underline; }
.gt-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; }
.gt-h .health-pill { background: var(--hc, var(--onbekend)); margin: 0; white-space: nowrap; }
.gt-h .health-pill.calc { background: transparent; color: var(--hc); }
.gt-h.h-klaar .health-pill { background: var(--klaar); color: #fff; }
.gt-date { font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gt-date.late { color: var(--rood); font-weight: 700; }
.gt-res { display: flex; padding-left: 6px; overflow: hidden; }
.gt-res .avatar { width: 22px; height: 22px; font-size: .66rem; }
.gt-res .avatar.more { background: var(--track); color: var(--muted); }

.gt-tl { position: relative; flex: 0 0 auto; height: 100%; }
.gt-bar { position: absolute; top: 9px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--hc, var(--onbekend)) 35%, var(--surface)); border: 1px solid var(--hc, var(--onbekend)); box-sizing: border-box; overflow: hidden; }
.gt-bar i { display: block; height: 100%; background: var(--hc, var(--onbekend)); }
.gt-sum { position: absolute; top: 12px; height: 8px; background: color-mix(in srgb, var(--hc, #4f6472) 45%, #4f6472); border-radius: 2px; }
.gt-sum i { display: block; height: 100%; background: #1f2d36; opacity: .55; border-radius: 2px; }
.gt-sum::before, .gt-sum::after { content: ''; position: absolute; top: 4px; border: 5px solid transparent; border-top: 7px solid color-mix(in srgb, var(--hc, #4f6472) 45%, #4f6472); }
.gt-sum::before { left: 0; border-left: 0; }
.gt-sum::after { right: 0; border-right: 0; }
.gt-ms { position: absolute; top: 10px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--hc, var(--onbekend)); border: 1px solid rgba(0,0,0,.25); }
.gt-who { position: absolute; top: 9px; font-size: .72rem; color: var(--muted); white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="licht"]) .gt-sum i { background: #fff; opacity: .4; } }
:root[data-theme="donker"] .gt-sum i { background: #fff; opacity: .4; }
.gt-h .health-pill { max-width: none; overflow: visible; }
.gt-scales #today { font-weight: 700; color: var(--rood); }
.gt-h.h-klaar .health-pill, .tk-row.h-klaar .tk-status .health-pill { padding: 3px 7px; }

/* ================= Gantt bewerken (beheerders) ================= */
.gt-wbs { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.gt-drag { cursor: grab; color: var(--muted); opacity: 0; font-size: .9rem; user-select: none; -webkit-user-drag: element; padding: 0 2px; margin-right: auto; }
.gt-row:hover .gt-drag { opacity: 1; }
.gt-drag:hover { color: var(--brand); }
.gt-menu { flex: 0 0 auto; margin-left: auto; border: 0; background: transparent; color: var(--muted); width: 24px; height: 22px; border-radius: 5px; cursor: pointer; opacity: 0; font-size: 1rem; line-height: 1; }
.gt-row:hover .gt-menu, .gt-menu:focus-visible { opacity: 1; }
.gt-menu:hover { background: var(--brand-soft); color: var(--brand); }
.gt-page { position: relative; }
/* Tijdens slepen ligt deze zone over de knoppenbalk, zodat de planning niet verschuift */
.gt-topdrop { display: none; position: absolute; left: 0; right: 0; top: 0; z-index: 6; box-sizing: border-box; height: 44px; line-height: 40px; text-align: center; font-weight: 700;
  color: var(--brand); background: var(--brand-soft); border: 2px dashed var(--brand); border-radius: 8px; }
body.gt-dragging .gt-topdrop { display: block; }
.gt-topdrop.gt-drop-ok { background: var(--brand); color: #fff; }
.gt-row.gt-drop-ok > .gt-left, .gt-row.gt-drop-ok > .gt-tl { background: color-mix(in srgb, var(--brand) 22%, var(--surface)) !important; }
.gt-row.gt-drop-ok { outline: 2px solid var(--brand); outline-offset: -2px; }
.gt-row.gt-drop-no > .gt-left { background: color-mix(in srgb, var(--rood) 10%, var(--surface)) !important; cursor: no-drop; }
.gt-row.gt-flash > .gt-left, .gt-row.gt-flash > .gt-tl { animation: gtFlash 2.4s ease-out; }
@keyframes gtFlash { 0%, 40% { background-color: color-mix(in srgb, var(--groen) 30%, var(--surface)); } 100% { background-color: var(--surface); } }

.gt-pop { position: absolute; z-index: 1000; min-width: 220px; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(20, 40, 47, .2); padding: 6px; }
.gt-pop[hidden] { display: none; }
.gt-pop button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 6px; font: inherit; color: var(--ink); cursor: pointer; }
.gt-pop button:hover:not([disabled]), .gt-pop button:focus-visible { background: var(--brand-soft); color: var(--brand); outline: none; }
.gt-pop button[disabled] { color: var(--muted); opacity: .55; cursor: default; }
.gt-pop-title { margin: 4px 10px 6px; font-weight: 700; font-size: .9rem; }
.gt-pop-note { margin: 6px 10px 4px; font-size: .8rem; color: var(--muted); }
.gt-busy { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 1001; background: var(--brand); color: #fff; padding: 9px 16px; border-radius: 10px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.gt-busy[hidden] { display: none; }
.vg-toast.err { background: var(--rood); }

.gt-dlg { width: min(560px, calc(100vw - 32px)); }
.gt-form label { display: block; margin-bottom: 10px; font-weight: 600; font-size: .9rem; }
.gt-form input[type="text"], .gt-form input[type="date"] { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 400; background: var(--surface); color: var(--ink); }
.gt-form input:disabled { background: var(--paper, #f3f6f8); color: var(--muted); }
.gt-res-field { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; margin: 0 0 10px; }
.gt-res-field legend { font-weight: 600; font-size: .9rem; padding: 0 4px; }
.gt-rescount { color: var(--muted); font-weight: 400; }
.gt-ressearch { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; margin-bottom: 6px; background: var(--surface); color: var(--ink); }
.gt-reslist { max-height: 190px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.gt-resopt { display: flex !important; align-items: center; gap: 6px; font-weight: 400 !important; margin: 0 !important; padding: 4px 2px; cursor: pointer; }
.gt-resopt[hidden] { display: none !important; }

/* ================= Activiteit en toelichting (ballonnetje) ================= */
.act-btn { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; vertical-align: middle; }
.act-btn:hover, .act-btn:focus-visible { background: var(--brand-soft); color: var(--brand); outline: none; }
.card-top .act-btn { margin-left: auto; }
.card-top .act-btn + .open-cx { margin-left: 0; }
.subtasks .st-line .act-btn { margin-left: auto; width: 20px; height: 18px; }
.subtasks .st-line .act-btn svg { width: 13px; height: 13px; }
.fl-block .act-btn { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; opacity: .55; }
.fl-block:hover .act-btn { opacity: 1; }
.fl-block .fl-bname { padding-right: 18px; }
.tk-name .act-btn { width: 20px; height: 18px; margin-left: 2px; }
.gt-name .act-btn { width: 22px; height: 20px; opacity: 0; }
.gt-row:hover .gt-name .act-btn, .gt-name .act-btn:focus-visible { opacity: 1; }
.gt-name .act-btn + .gt-menu { margin-left: 0; }
.gt-name .act-btn { margin-left: auto; }

.act-dlg { width: min(620px, calc(100vw - 32px)); }
.act-dlg h2 { font-size: 1.15rem; line-height: 1.3; margin: 0; }
.act-sub { margin: 4px 0 12px; }
.act-form { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 12px; background: var(--paper, #f3f6f8); }
.act-label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.act-form textarea { display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; resize: vertical; background: var(--surface); color: var(--ink); }
.act-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.act-scroll { max-height: min(50vh, 460px); overflow: auto; }
.act-wait { padding: 12px 2px; }
.act-list { list-style: none; margin: 0; padding: 0; }
.act-item { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.act-item:last-child { border-bottom: 0; }
.act-item .avatar { margin: 0; width: 30px; height: 30px; flex-shrink: 0; }
.act-body { min-width: 0; flex: 1; }
.act-head { font-size: .92rem; }
.act-head time { color: var(--muted); font-size: .85rem; margin-left: 4px; white-space: nowrap; }
.act-pct { display: inline-block; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #6d28d9; font-weight: 700; font-size: .82rem; }
.act-text { margin-top: 4px; padding: 6px 10px; border-left: 3px solid var(--brand); background: color-mix(in srgb, var(--brand-soft) 50%, transparent); border-radius: 0 6px 6px 0; white-space: normal; overflow-wrap: anywhere; }
.act-item.is-progress .act-text { border-left-color: #8b5cf6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="licht"]) .act-pct { color: #f0a6dc; background: color-mix(in srgb, var(--brand) 22%, transparent); } }
:root[data-theme="donker"] .act-pct { color: #f0a6dc; background: color-mix(in srgb, var(--brand) 22%, transparent); }

/* Knop voor licht/donker in de kop */
.theme-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--muted); cursor: pointer; }
.theme-btn:hover { color: var(--brand); border-color: var(--brand); }
.theme-btn svg { width: 18px; height: 18px; }
/* In donker een vleugje magenta-gloed op de kop */
:root[data-theme="donker"] .top { background: linear-gradient(90deg, #1f1633 0%, #2a1740 60%, #3a1745 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="licht"]) .top { background: linear-gradient(90deg, #1f1633 0%, #2a1740 60%, #3a1745 100%); } }
:root[data-theme="donker"] .board-tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="licht"]) .board-tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; } }

/* ================= Overzicht (wordt opnieuw opgebouwd) ================= */
.ov-empty { margin: 48px auto; max-width: 560px; text-align: center; padding: 40px 24px; border: 2px dashed var(--line); border-radius: 16px; color: var(--muted); }
.ov-empty h2 { margin: 0 0 6px; color: var(--ink); }
.ov-empty p { margin: 0; }

/* ================= Overzicht: portfolio ================= */
.ov-page { padding-top: 8px; }
.ov-section { margin-bottom: 28px; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ov-head h2 { margin: 0; font-size: 1.3rem; }
.ov-head .ms-panel { left: auto; right: 0; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.pf-grid > .ov-empty { grid-column: 1 / -1; margin: 10px 0; }
.pf-card { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--hc, var(--line)); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(20, 40, 47, .06); }
.pf-card.h-groen { --hc: var(--groen); } .pf-card.h-oranje { --hc: var(--oranje); } .pf-card.h-rood { --hc: var(--rood); }
.pf-card.h-toekomst { --hc: var(--toekomst, #7b8fa1); } .pf-card.h-klaar { --hc: var(--klaar); } .pf-card.h-onbekend { --hc: var(--onbekend); }
.pf-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pf-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; line-height: 1.3; }
.pf-name:hover { color: var(--brand); text-decoration: underline; }
.pf-card-head .health-pill { background: var(--hc, var(--onbekend)); margin-top: 2px; }
.pf-sub { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.pf-body { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.pf-donut { width: 132px; height: 132px; flex-shrink: 0; }
.pf-donut circle { transition: stroke-dasharray .4s ease; }
.pf-pct { font-size: 24px; font-weight: 700; fill: var(--ink); }
.pf-pct-sub { font-size: 11px; fill: var(--muted); }
.pf-legend { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pf-leg { display: grid; grid-template-columns: 12px 1fr auto 38px; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .92rem; }
.pf-leg:hover { background: var(--brand-soft); }
.pf-leg i { width: 12px; height: 12px; border-radius: 3px; }
.pf-leg b { font-variant-numeric: tabular-nums; }
.pf-leg small { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.pf-total { margin: 6px 6px 0; font-size: .82rem; color: var(--muted); }
.pf-panel { width: 340px; }
/* Kader om elk taartdiagram */
.pf-chart { flex-shrink: 0; display: grid; place-items: center; }
/* Elke sectie van het overzicht in een eigen kader, zodat de onderdelen duidelijk gescheiden zijn */
.ov-section { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 20px;
  box-shadow: 0 2px 10px rgba(20, 40, 47, .06); }
.ov-section .pf-card { background: var(--paper, #f3f6f8); border-width: 1.5px; border-top-width: 5px; box-shadow: none; }
/* Deelprojecten */
.ov-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ov-tools select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 700; background: var(--surface); color: var(--ink); max-width: 320px; }
.dp-panel { width: 400px; }
.dp-hint { margin: 0 2px 6px; font-size: .82rem; }
.dp-opt { display: flex; align-items: center; padding-left: calc(var(--d, 0) * 16px); }
.dp-opt label { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; cursor: pointer; flex: 1; min-width: 0; }
.dp-opt label:hover { background: var(--brand-soft); }
.dp-tog { flex: 0 0 22px; width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 4px; }
button.dp-tog:hover { background: var(--brand-soft); color: var(--brand); }
.dp-wbs { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.ov-section + .ov-section { margin-top: 22px; }
/* Tabbladen per hoofdproject */
.dp-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; border-bottom: 2px solid var(--line); margin: 0 0 14px; }
.dp-tab { display: inline-flex; align-items: center; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--paper, #f3f6f8); margin-bottom: -2px; }
.dp-tab button[role="tab"] { border: 0; background: transparent; padding: 8px 12px; font: inherit; color: var(--muted); cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-tab.on { background: var(--surface); border-color: var(--line); border-bottom: 2px solid var(--surface); box-shadow: inset 0 3px 0 var(--brand); }
.dp-tab.on button[role="tab"] { color: var(--ink); font-weight: 700; }
.dp-tab-x { border: 0; background: transparent; color: var(--muted); width: 24px; height: 24px; margin-right: 4px; border-radius: 6px; cursor: pointer; font-size: 1.05rem; line-height: 1; }
.dp-tab-x:hover { background: color-mix(in srgb, var(--rood) 15%, transparent); color: var(--rood); }
.dp-tab-add { border: 1px dashed var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--brand); padding: 8px 12px; font: inherit; cursor: pointer; margin-bottom: -2px; }
.dp-tab-add:hover { background: var(--brand-soft); }
.pf-seg circle { cursor: pointer; transition: stroke-width .15s; }
.pf-seg:hover circle, .pf-seg:focus-visible circle { stroke-width: 27; }
.pf-pct, .pf-pct-sub { pointer-events: none; }

/* ================= Datums aanpassen (redacteuren) ================= */
.date-btn { font: inherit; color: inherit; background: transparent; border: 1px dashed transparent; border-radius: 6px; padding: 0 3px; margin: 0 -3px; cursor: pointer; line-height: inherit; text-align: inherit; }
.date-btn:hover, .date-btn:focus-visible { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); outline: none; }
.date-btn > * { pointer-events: none; }
.date-btn.tk-date-btn { display: flex; flex-direction: column; align-items: flex-start; padding: 2px 4px; }
.status-line .date-btn { margin: 0; }
.dt-pop { width: 320px; }
.dt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.dt-two label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); }
.dt-two input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 400; background: var(--surface); color: var(--ink); }
.dt-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .85rem; }
.dt-quick button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); padding: 3px 9px; font: inherit; font-size: .82rem; cursor: pointer; }
.dt-quick button:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.dt-len { margin: 2px 0 8px; font-size: .85rem; }
.dt-len.err { color: var(--rood); font-weight: 600; }

/* ================= Betrokkenen aanpassen (redacteuren) ================= */
.ppl-btn { display: inline-flex; align-items: center; font: inherit; color: inherit; background: transparent; border: 1px dashed transparent; border-radius: 999px; padding: 1px 3px 1px 8px; cursor: pointer; }
.ppl-btn:hover, .ppl-btn:focus-visible { border-color: var(--brand); background: var(--brand-soft); outline: none; }
.ppl-btn > * { pointer-events: none; }
.ppl-btn.ppl-text { border-radius: 6px; padding: 0 3px; margin: 0 -3px; text-align: left; color: var(--muted); }
.ppl-btn.ppl-text:hover { color: var(--brand); }
.ppl-btn.ppl-empty { width: 24px; height: 24px; padding: 0; justify-content: center; color: var(--muted); border: 1px dashed var(--line); }
.ppl-btn.ppl-empty:hover { color: var(--brand); border-color: var(--brand); }
.ppl-pop { width: 300px; }
.ppl-q { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; margin-bottom: 6px; background: var(--surface); color: var(--ink); }
.ppl-list { max-height: 240px; overflow: auto; margin-bottom: 8px; }
.ppl-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.ppl-opt:hover { background: var(--brand-soft); }
.ppl-opt[hidden] { display: none; }
.gt-res .ppl-btn { padding-left: 6px; }
.gt-res .ppl-btn.ppl-empty { width: 22px; height: 22px; padding: 0; }

/* ================= Slot op de Agenda TPO ================= */
.lock-bar { display: inline-flex; align-items: center; gap: 8px; padding: 3px 3px 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.lock-bar.open { border-color: var(--groen); background: color-mix(in srgb, var(--groen) 10%, var(--surface)); }
.lock-info { font-size: .9rem; color: var(--muted); white-space: nowrap; }
.lock-bar.open .lock-info { color: var(--ink); font-weight: 600; }
.lock-bar .btn { border-radius: 999px; }

/* Subtaken uitklappen in een blok van de procesflow */
.fl-sub-toggle { margin-top: 6px; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 4px 6px; cursor: pointer; font: inherit; font-size: .78rem; color: var(--muted);
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.fl-sub-toggle:hover { color: var(--ink); background: var(--track); }
.fl-block .subtasks { margin-top: 4px; font-size: .8rem; }
.fl-block .subtasks .status-line { font-size: .72rem; gap: 4px; }
.fl-block .subtasks .sl-bar { min-width: 18px; }
.fl-block .subtasks .health-pill { font-size: .66rem; padding: 2px 5px; }
.fl-block .subtasks .st-meta { font-size: .72rem; }
.fl-block .subtasks.nested { margin-left: 4px; }

/* ================= Agenda: hoofdstukken en niveaus ================= */
.ag-item { padding-left: calc(4px + var(--lvl, 0) * 22px); position: relative; align-items: center; }
.ag-item.lvl-1, .ag-item.lvl-2 { border-top-style: dashed; }
/* hulplijn die laat zien bij welk hoofdstuk een punt hoort */
.ag-item.lvl-1::before, .ag-item.lvl-2::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--lvl) * 22px - 8px); border-left: 2px solid var(--line); }
.ag-item.lvl-0 { border-top: 1px solid var(--line); }
.ag-item.lvl-0:not(:first-child) { margin-top: 6px; border-top: 2px solid var(--line); padding-top: 9px; }
.ag-item.lvl-0 .ag-title, .ag-item.lvl-0 .ag-title-text { font-weight: 700; font-size: 1.02rem; }
.ag-item.lvl-1 .ag-title, .ag-item.lvl-1 .ag-title-text,
.ag-item.lvl-2 .ag-title, .ag-item.lvl-2 .ag-title-text { font-weight: 400; }
.ag-item:not(.lvl-0) .ag-check { width: auto; min-width: 28px; height: 24px; }
.ag-item:not(.lvl-0) .ag-num { width: auto; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--track); color: var(--muted); font-size: .8rem; }
.ag-item.lvl-0.has-kids .ag-num { background: var(--ink); color: var(--surface); }
.ag-item.done .ag-num { background: var(--groen) !important; color: #fff !important; }
.ag-fold, .ag-fold-spacer { flex-shrink: 0; width: 18px; }
.ag-fold { border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); font-size: .85rem; height: 24px; border-radius: 4px; }
.ag-fold:hover { color: var(--ink); background: var(--track); }
.ag-hidden-count { display: block; padding: 0 6px; font-size: .82rem; color: var(--muted); }
.ag-shift { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.ag-item:hover .ag-shift, .ag-item:focus-within .ag-shift { opacity: 1; }
@media (hover: none) { .ag-shift { opacity: 1; } }
.ag-shift button { width: 26px; height: 28px; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; cursor: pointer; color: var(--ink); font-size: .9rem; padding: 0; }
.ag-shift button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.ag-shift button:disabled { opacity: .3; cursor: default; }
.ag-dragged-kid { display: none !important; }
.ag-carry::after { content: attr(data-carry); position: absolute; right: 44px; top: 50%; transform: translateY(-50%); background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.ag-tip { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
.ag-tip kbd { font: inherit; font-size: .76rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--paper); }
@media (hover: none) { .ag-tip { display: none; } }
.ag-item:first-child { border-top: 0 !important; margin-top: 0 !important; padding-top: 7px !important; }
/* Inspring-knoppen nemen geen ruimte in; ze verschijnen over het eind van de regel */
.ag-shift { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); background: var(--surface); padding: 2px 4px; border-radius: 6px; box-shadow: -10px 0 10px var(--surface); pointer-events: none; }
.ag-item:hover .ag-shift, .ag-item:focus-within .ag-shift { pointer-events: auto; }
@media (hover: none) { .ag-shift { position: static; transform: none; box-shadow: none; pointer-events: auto; } }

/* ================= TPO: kaders als tabbladen ================= */
.frames.tab-mode { display: block; }
.tpo-tabs { display: flex; align-items: flex-end; gap: 8px; border-bottom: 2px solid var(--line); }
.tpo-tablist { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding-top: 4px; }
.frame.tpo-tab {
  grid-column: auto; flex-shrink: 0; min-height: 0; height: auto; overflow: visible; position: relative;
  border: 1px solid var(--line); border-bottom: 0; border-top: 3px solid var(--accent, var(--brand));
  border-radius: 8px 8px 0 0; background: var(--paper); margin-bottom: -2px; cursor: pointer;
}
.frame.tpo-tab .frame-head { border-bottom: 0; padding: 7px 8px 7px 12px; cursor: pointer; gap: 8px; }
.frame.tpo-tab .frame-title { font-size: .95rem; font-weight: 600; color: var(--muted); max-width: 220px; cursor: pointer; }
.frame.tpo-tab:hover .frame-title { color: var(--ink); }
.frame.tpo-tab.active { background: var(--surface); border-bottom: 2px solid var(--surface); z-index: 1; }
.frame.tpo-tab.active .frame-title { color: var(--ink); font-weight: 700; cursor: text; }
.frame.tpo-tab:not(.active) .frame-title:hover { background: none; }
.frame.tpo-tab .frame-menu { width: 24px; height: 24px; }
/* Valzone over het hele tabblad, alleen actief tijdens slepen */
.tab-drop { position: absolute; inset: 0; border-radius: 8px 8px 0 0; pointer-events: none; overflow: hidden; }
.dragging .tab-drop { pointer-events: auto; }
.tab-drop > * { display: none !important; }
.dragging .tpo-tab:not(.active) { outline: 2px dashed var(--line); outline-offset: -3px; }
.tpo-tab:has(.tab-drop > *) { outline: 2px solid var(--brand) !important; background: var(--brand-soft); }
.tpo-add-tab { flex-shrink: 0; width: 34px; height: 34px; margin-bottom: 4px; border: 1px dashed var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.tpo-add-tab:hover { border-color: var(--brand); color: var(--brand); }
.tpo-newtask { margin-left: auto; margin-bottom: 5px; flex-shrink: 0; white-space: nowrap; }
.tpo-panel {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  height: calc(100vh - 250px); min-height: 360px; display: flex; flex-direction: column;
}
.tpo-panel .cards { flex: 1; overflow-y: auto; padding: 14px; }
.tpo-panel .empty { position: absolute; inset: 14px; display: grid; place-items: center; margin: 0; color: var(--muted); border: 2px dashed var(--line); border-radius: var(--radius-m); pointer-events: none; text-align: center; padding: 0 16px; }
.dragging .tpo-panel .empty { border-color: var(--brand); color: var(--brand); }
.tpo-none { padding: 24px 4px; }
.nt-note { margin: 4px 0 0; padding: 8px 12px; border-radius: var(--radius-s); background: var(--brand-soft); color: var(--ink); font-size: .92rem; }
@media (max-width: 1000px) { .tpo-panel { height: auto; max-height: 75vh; } }
@media (max-width: 700px) {
  .tpo-tabs { flex-wrap: wrap; }
  .tpo-newtask { order: -1; width: 100%; margin: 0 0 8px; }
}