:root{--navy:#0f1c3f;--ink:#1a2233;--mut:#6b7686;--line:#e6e9ef;--bg:#eef1f5;--card:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:#2456a6}
/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0f1c3f,#1b2f5e)}
.login-card{background:#fff;padding:38px 34px;border-radius:14px;width:330px;box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;flex-direction:column}
.login-logo{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.5px}
.login-logo span{color:#2456a6;font-weight:600}
.login-sub{color:var(--mut);font-size:13px;margin:6px 0 20px}
.login-card input{padding:12px 14px;border:1px solid var(--line);border-radius:9px;margin-bottom:11px;font-size:14px}
.login-card input:focus{outline:none;border-color:#2456a6}
.login-card button{padding:12px;border:0;border-radius:9px;background:var(--navy);color:#fff;font-size:15px;font-weight:600;cursor:pointer;margin-top:4px}
.login-card button:hover{background:#16264f}
.login-err{background:#fdecec;color:#b4231f;padding:9px 12px;border-radius:8px;font-size:13px;margin-bottom:12px}
/* topbar */
.topbar{background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:14px 26px;position:sticky;top:0;z-index:50}
.topbar-proj{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.topbar-proj .proj-chip{flex:none;width:12px;height:12px}
@media(max-width:560px){.topbar-proj{font-size:13px;max-width:42%}}
.brand{font-size:19px;font-weight:800;letter-spacing:-.4px;display:inline-flex;align-items:center;gap:9px}.brand a{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none}.brand span{color:#7fa8e6;font-weight:600}.brandmark{flex:none;width:24px;height:24px}
.who{font-size:13px;color:#c7d2e6}.who a{color:#9fb6dd;margin-left:12px}
.who a.who-name{color:#eaf0fa;margin-left:0;font-weight:600;text-decoration:none;border-bottom:1px dotted rgba(234,240,250,.45)}.who a.who-name:hover{border-bottom-color:#eaf0fa}
/* Naam-dropdown in de header (pure <details>, geen JS) */
.who-menu{position:relative;display:inline-block;margin-left:0}
.who-menu summary.who-name{display:inline-flex;align-items:center;gap:5px;color:#eaf0fa;font-weight:600;cursor:pointer;list-style:none;border-bottom:1px dotted rgba(234,240,250,.45);user-select:none}
.who-menu summary.who-name:hover{border-bottom-color:#eaf0fa}
.who-menu summary::-webkit-details-marker{display:none}
.who-caret{font-size:10px;opacity:.8}
.who-pop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 26px rgba(20,30,55,.18);min-width:172px;padding:6px;z-index:60}
.who-pop a{display:block;color:var(--ink);text-decoration:none;font-size:14px;padding:9px 12px;border-radius:7px;margin:0}
.who-pop a:hover{background:#f1f5fb}
.who-pop{max-height:calc(100vh - 90px);overflow-y:auto}
.who-sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700;padding:8px 12px 3px;margin-top:4px;border-top:1px solid var(--line)}
.tak-switch{display:flex;gap:4px;margin:5px 12px 7px;padding:3px;background:#eef2f7;border-radius:9px}
.tak-pill{flex:1;text-align:center;padding:5px 4px;border-radius:7px;font-size:12px;font-weight:600;color:#5a6472;text-decoration:none;line-height:1.2;border-top:0}
.tak-pill.tak-on{background:#fff;color:#0b2e6b;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.rolepill{background:rgba(255,255,255,.14);padding:2px 9px;border-radius:10px;font-size:11px;margin-left:6px}
.wrap{max-width:1080px;margin:0 auto;padding:22px 20px 50px}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.card{background:var(--card);border-radius:12px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--accent,#5a6677);position:relative;display:flex;flex-direction:column}
.card-val{font-size:28px;font-weight:800;color:var(--ink);line-height:1}.card-val small{font-size:13px;color:var(--mut);font-weight:600;margin-left:3px}
.card-val.card-val-md{font-size:16px;font-weight:700;line-height:1.3}
.card-val.card-val-sm{font-size:13px;font-weight:600;line-height:1.35}
.card-lbl{font-size:12.5px;color:var(--mut);margin-top:7px}
.card-tag{position:absolute;top:14px;right:14px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#9aa4b2}
.card-trend{font-size:11px;color:#1f7a4d;margin-top:5px;font-weight:500}
/* cijfer-duiding: versheid/uitleg onder een (financiële) tegel — puur presentatie */
.mduid{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.mduid-note{font-size:11px;line-height:1.35;color:#b45309;background:#fff4e0;border-radius:6px;padding:3px 7px}
.mduid-stale{font-size:11px;color:#8a94a3;font-style:italic}
.card.fin{background:linear-gradient(180deg,#fff,#f7f9fd)}.lock{font-weight:700;color:#0f1c3f}
/* grid */
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.panel{background:var(--card);border-radius:12px;padding:18px 20px;border:1px solid var(--line)}
.panel h2{font-size:15px;margin:0 0 14px;color:var(--ink)}
/* feed */
.act{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid #f0f2f6}
.act:last-child{border-bottom:0}
.act-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto}
.act-body{flex:1;min-width:0}
.act-top{display:flex;justify-content:space-between;gap:8px}
.act-title{font-weight:500;font-size:13.5px}
.act-meta{font-size:11px;color:#9aa4b2;white-space:nowrap}
.act-detail{font-size:13.5px;color:#52606d;margin:3px 0 0;line-height:1.5}
.act-foot{margin-top:6px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.act-actor{font-size:11px;color:var(--mut);font-weight:500}
.act-proj{font-size:10px;color:#fff;padding:1px 7px;border-radius:9px;text-transform:lowercase}
.act-type{font-size:10px;padding:1px 7px;border-radius:9px;background:#eef0f4;color:#5a6677}
.t-done{background:#e6f4ec;color:#1f7a4d}.t-task{background:#fdf0e3;color:#b4541f}.t-note{background:#eef0f4;color:#5a6677}
.empty{color:#9aa4b2;font-size:13px}
/* days */
.days{display:flex;flex-direction:column;gap:7px}
.day{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--ink);transition:.12s}
.day:hover{border-color:#2456a6;background:#f5f8fd}
.day-date{font-size:13px;font-weight:600;text-transform:capitalize}
.day-n{background:var(--navy);color:#fff;font-size:11px;font-weight:700;min-width:22px;text-align:center;padding:2px 7px;border-radius:10px}
/* day page / timeline */
.back{display:inline-block;margin:4px 0 10px;font-size:13px;text-decoration:none}
.dayhead{font-size:22px;margin:6px 0 2px;text-transform:capitalize}
.daycount{color:var(--mut);font-size:13px;margin:0 0 18px}
.timeline{position:relative}
.tl-item{display:grid;grid-template-columns:52px 18px 1fr;align-items:start;gap:0}
.tl-time{font-size:12px;color:var(--mut);padding-top:14px;text-align:right;padding-right:8px}
.tl-dot{width:11px;height:11px;border-radius:50%;margin:16px auto 0;position:relative;z-index:1}
.tl-item:not(:last-child) .tl-dot:after{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:2px;height:calc(100% + 20px);background:var(--line)}
.tl-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 15px;margin:8px 0}
.tl-title{font-weight:500;font-size:14px}
.tl-detail{font-size:12.5px;color:#52606d;margin-top:4px;line-height:1.5}
.foot{text-align:center;color:#9aa4b2;font-size:11px;margin-top:30px}
/* ---- projectlaag + nieuwe onderdelen ---- */
.pagetitle{font-size:23px;margin:6px 0 2px;display:flex;align-items:center;gap:10px}
.pagesub{color:var(--mut);font-size:13px;margin:0 0 18px}
.muted{color:#9aa4b2;font-weight:400;font-size:13px}
.proj-chip{width:14px;height:14px;border-radius:4px;display:inline-block}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:24px}
.proj-tile{background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:.12s;display:flex;flex-direction:column}
.proj-tile:hover{box-shadow:0 8px 22px rgba(15,28,63,.10);transform:translateY(-2px)}
.proj-name{font-size:17px;font-weight:700;margin-bottom:8px}
.proj-meta{display:flex;gap:12px;font-size:12px;color:var(--mut)}
.proj-owner{color:#2c7a7b;font-weight:700;white-space:nowrap}
.proj-last{font-size:11px;color:#9aa4b2;margin-top:auto;align-self:flex-end;text-align:right;padding-top:8px}
a.act{text-decoration:none;color:inherit;display:flex;gap:11px;padding:11px 0;border-bottom:1px solid #f0f2f6}
a.act:hover .act-title{color:#2456a6}
.card-link{font-size:11px;color:#2456a6;margin-top:auto;padding-top:8px;align-self:flex-end;text-align:right;font-weight:500}
a.card{text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:.12s}
a.card:hover{box-shadow:0 8px 22px rgba(15,28,63,.10);transform:translateY(-2px)}
/* items-tabel */
table.items{width:100%;border-collapse:collapse;font-size:13px}
table.items th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#9aa4b2;padding:8px 10px;border-bottom:2px solid var(--line)}
table.items td{padding:9px 10px;border-bottom:1px solid #f0f2f6}
.it-name{font-weight:500}
.it-badge{background:#eef0f4;color:#5a6677;font-size:11px;padding:1px 8px;border-radius:9px;margin-right:6px}
.it-link{font-size:12px;font-weight:600;text-decoration:none}
.it-status{color:#52606d}
/* repeterende taken */
.recurs{display:flex;flex-direction:column;gap:8px}
.recur{display:block;border:1px solid var(--line);border-radius:10px;padding:11px 13px;text-decoration:none;color:var(--ink);transition:.12s}
.recur:hover{border-color:#2456a6;background:#f5f8fd}
.recur-top{display:flex;justify-content:space-between;align-items:center}
.recur-name{font-weight:500;font-size:13.5px}
.recur-n{background:var(--navy);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.recur-sched{font-size:12px;color:#2456a6;margin-top:3px}
.recur-last{font-size:11.5px;color:var(--mut);margin-top:3px}
.recur-wrap{position:relative}
.recur-wrap .recur{padding-right:88px}
.recur-runnow-form{position:absolute;top:9px;right:9px;margin:0}
.recur-runnow{background:#e6f4ec;color:#1f7a4d;border:1px solid #bfe3cc;border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:700;cursor:pointer;line-height:1;white-space:nowrap;transition:.12s}
.recur-runnow:hover{background:#1f7a4d;color:#fff;border-color:#1f7a4d}
.recur-head-run{margin-left:auto}
.recur-head-run .recur-runnow-form{position:static}
.recur-head-run .recur-runnow{padding:6px 13px;font-size:12.5px}
.recur-head{display:flex;gap:16px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0 18px;font-size:13px;color:#52606d}
.recur-badge{background:#e6f4ec;color:#1f7a4d;font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px;text-transform:uppercase}
/* items-kleuren */
.legend{display:flex;gap:18px;margin:0 0 14px;font-size:12px;color:#52606d;flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.it-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px}
.it-flags{color:#9aa4b2;font-size:12px}
.it-internal{font-weight:600;color:#2456a6;text-decoration:none}.it-internal:hover{text-decoration:underline}
/* statusfilter-chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.chip{font-size:12.5px;padding:5px 13px;border-radius:16px;border:1px solid var(--line);background:#fff;color:#52606d;text-decoration:none;transition:.12s}
.chip:hover{border-color:#2456a6;color:#2456a6}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.serverfilter{margin:0 0 12px;font-size:13px;color:#52606d}
.serverfilter select{margin-left:6px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;max-width:340px}

/* ---- Goede ideeën: review-pagina ---- */
.lead{color:var(--mut);font-size:14px;line-height:1.5;margin:2px 0 18px;max-width:680px}
.ideas{display:flex;flex-direction:column;gap:14px}
.idea{background:var(--card);border:1px solid var(--line);border-left:4px solid #caa53d;border-radius:12px;padding:16px 18px;box-shadow:0 1px 3px rgba(16,28,63,.05)}
.idea-like{border-left-color:#2f9e44}
.idea-dislike{border-left-color:#c2c8d2;opacity:.62}
.idea-open{border-left-color:#caa53d}
.idea-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.idea-date{color:var(--mut);font-size:12px}
.ibadge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:.2px}
.bg-like{background:#e4f4e9;color:#1f7a3d}.bg-dis{background:#eef0f3;color:#79828f}.bg-new{background:#fbf2db;color:#9a7a1e}
.idea-title{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ink)}
.idea-detail{color:#404a5c;font-size:14px;line-height:1.55}
.idea-actions{display:flex;gap:9px;margin:13px 0 4px}
.rbtn{font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;color:#46505f;cursor:pointer;transition:.12s}
.rbtn:hover{border-color:#bcc4d0}
.rbtn.like.on{background:#2f9e44;border-color:#2f9e44;color:#fff}
.rbtn.dislike.on{background:#d64545;border-color:#d64545;color:#fff}
.idea-comments{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
.thread-earlier{margin-bottom:7px}
.thread-earlier-btn{font:inherit;font-size:12.5px;font-weight:600;color:#5a6576;background:#eef1f6;border:1px solid var(--line);border-radius:8px;padding:5px 11px;cursor:pointer}
.thread-earlier-btn:hover{background:#e4e9f1;color:#3a4456}
.thread-earlier-btn:disabled{opacity:.6;cursor:default}
.thread-earlier-slot{margin-top:7px}
.cmt{background:#f6f8fb;border-radius:9px;padding:8px 11px;margin-bottom:7px}
.cmt-meta{font-size:11px;color:var(--mut);margin-bottom:2px}.cmt-a{font-weight:700;color:#3a4456}
.cmt-b{font-size:14px;color:var(--ink);line-height:1.55}
.cmt-form{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.cmt-form.has-reopen{flex-wrap:wrap}
.cmt-form.has-reopen textarea{flex:1 1 100%}
.cmt-form .reopen-send{line-height:1}
.cmt-form textarea{flex:1;resize:none;font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;min-height:20px;line-height:1.4}
.cmt-form textarea:focus{outline:none;border-color:#2456a6}
.cmt-send{font:inherit;font-size:13px;font-weight:600;padding:9px 15px;border:0;border-radius:9px;background:var(--navy);color:#fff;cursor:pointer}
.cmt-send:hover{background:#16264f}
.idea-consider{border-left-color:#2456a6;opacity:1}
.bg-cons{background:#e6eefb;color:#1f4ba6}
.rbtn.consider.on{background:#2456a6;border-color:#2456a6;color:#fff}
/* Prive-laag */
.prive-kop{font-size:15px;margin:6px 0 13px;color:#5a6677;display:flex;align-items:center;gap:8px;border-top:1px dashed var(--line);padding-top:20px}
.proj-tile.prive{background:linear-gradient(180deg,#fff,#faf7fc)}
/* To-do lijst */
.todo-panel h2{margin-bottom:12px}
.todos{display:flex;flex-direction:column;gap:2px}
.todo{display:flex;gap:12px;padding:11px 2px;border-bottom:1px solid #f0f2f6;align-items:flex-start}
.todo:last-child{border-bottom:0}
.todo-check{margin:0;flex:0 0 auto}
.todo-box{width:24px;height:24px;border:2px solid #cdd6e8;border-radius:7px;background:#fff;color:transparent;cursor:pointer;font-size:14px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s}
.todo-box:hover{border-color:#2f9e44;color:#2f9e44;background:#eaf6ee}
.todo-body{flex:1;min-width:0}
.todo-title{font-weight:500;font-size:14px;color:var(--ink)}
.todo-detail{font-size:13.5px;color:#52606d;margin-top:3px;line-height:1.5}
.todo-foot{margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.todo-foot a.act-proj{text-decoration:none}
.todo-actor{font-size:11px;color:var(--mut);font-weight:500}
.todo-when{font-size:11px;color:#9aa4b2}
/* Akkoord-knop */
.appr{display:flex;gap:8px;margin:9px 0 2px}
.appr-btn{font:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.appr-btn.ok{background:#2f9e44;border-color:#2f9e44;color:#fff}
.appr-btn.ok:hover{background:#268038}
.appr-btn.no{background:#fff;color:#6b7a99}
.appr-btn.no:hover{border-color:#bcc4d0}
.appr-badge{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px}
.appr-badge.ok{background:#e4f4e9;color:#1f7a3d}
.appr-badge.no{background:#eef0f3;color:#79828f}
.appr-badge.wait{background:#fbf2db;color:#9a7a1e}
/* "Afgehandeld tot..." (snooze) - picker + resterende-tijd (Paul 12 jul) */
.appr-btn.snooze{background:#eef7fd;border-color:#bcd9ef;color:#1f6aa8}
.appr-btn.snooze:hover{background:#dcedfa;border-color:#8fc0e6}
.snz-pick{display:inline-block}
.snz-pick>summary{list-style:none;display:inline-block}
.snz-pick>summary::-webkit-details-marker{display:none}
.snz-opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;padding:8px 10px;background:#f2f8fd;border:1px solid #d7e8f5;border-radius:8px}
.appr-btn.snooze-opt{background:#fff;border-color:#cfd6e0;color:#1b2741;font-weight:600}
.appr-btn.snooze-opt:hover{background:#eaf0fb;border-color:#9ab4e6}
.snz-custom{display:inline-flex;align-items:center;gap:5px}
.snz-days-in{width:96px;padding:7px 9px;border:1px solid #cfd6e0;border-radius:8px;font-size:.9rem;font-weight:600;color:#1b2741}
.snz-days-sel{padding:6px 26px 6px 9px;border:1px solid #bcd9ef;border-radius:8px;font-size:.9rem;font-weight:600;color:#1b2741;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%231f6aa8' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat right 8px center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.snz-days-sel:hover{border-color:#8fc0e6}
.snz-days-sel:focus{outline:none;border-color:#1f6aa8;box-shadow:0 0 0 2px #dcedfa}
.snz-left{white-space:nowrap;font-weight:600}
.snz-status{display:inline-block}
/* To-do: go-knop + spar-thread */
.todo-act{margin:9px 0 0}
/* Heropenen van een afgehandeld item: knop onthult een verplicht toelichting-veld */
.reopen-form{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:4px}
.reopen-form textarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;line-height:1.4}
.reopen-form textarea:focus{outline:none;border-color:#2456a6}
.todo-thread{margin-top:9px;border-top:1px dashed var(--line);padding-top:9px}
.todo-thread:empty{display:none}
/* Heroverweging (Nee -> Claude overtuigt) */
.hero-panel{border:1px solid #f0d9a6;background:linear-gradient(180deg,#fffdf6,#fff)}
.todo.hero{align-items:flex-start}
.todo-act.dual{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.todo-act.dual form{margin:0}
.cmt-claude{background:#eef3fb;border-left:3px solid #2456a6}
/* Aanpassen-opdracht */
.editbox{margin-top:8px}
.editbox summary{cursor:pointer;font-size:12.5px;color:#6b7a99;font-weight:600;list-style:none;display:inline-block}
.editbox summary::-webkit-details-marker{display:none}
.editbox summary:hover{color:#2456a6}
.edit-form{display:flex;flex-direction:column;gap:7px;margin-top:8px;max-width:560px}
.edit-title{font:inherit;font-size:14px;font-weight:600;padding:9px 11px;border:1px solid var(--line);border-radius:8px}
.edit-detail{font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;resize:vertical;line-height:1.45}
.edit-form .cmt-send{align-self:flex-start}
/* project/categorie-keuze in het Aanpassen-formulier (verplaats verkeerd ingedeelde to-do) */
.edit-projlbl{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--mut)}
.edit-proj{font:inherit;font-size:13.5px;font-weight:400;text-transform:none;letter-spacing:0;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.edit-proj:focus{outline:none;border-color:#2456a6}
/* Reageren op project-activiteiten */
.act-thread{margin-top:8px}
.act-reply{margin-top:6px}
.act-reply summary{cursor:pointer;font-size:12px;color:#6b7a99;font-weight:600;list-style:none;display:inline-block}
.act-reply summary::-webkit-details-marker{display:none}
.act-reply summary:hover{color:#2456a6}
.act-reply .cmt-form{margin-top:8px;max-width:520px}
/* Klanten-360 cockpit */
.klant-zoek{width:100%;max-width:420px;padding:11px 14px;border:1px solid var(--line);border-radius:9px;font-size:15px;margin:4px 0 16px}
.klant-zoek:focus{outline:none;border-color:#0f7a8a}
.klanten-lijst{display:flex;flex-direction:column}
.klant{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px}
.klant-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.klant-naam{font-weight:700;font-size:15px;color:var(--ink)}
.klant-omzet{font-weight:800;font-size:15px;color:#0f7a8a;white-space:nowrap}
.klant-tags{margin-top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ktag{font-size:10.5px;font-weight:700;color:#fff;padding:2px 8px;border-radius:9px}
.ktag.wa{background:#d9fbe6;color:#0a7a3d}
.klant-meta{font-size:12px;color:#9aa4b2}

/* "is al gebeurd"-knop + afgehandeld-archief (jun 2026) */
.todo-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.todo-act form{margin:0}
.thread-done{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);text-align:right}
.appr-btn.done{background:#eef6ff;border-color:#cfe0f3;color:#1d6fb8}
.appr-btn.done:hover{background:#1d6fb8;border-color:#1d6fb8;color:#fff}
.appr-btn.undo{background:#fff;color:#8a93a3;padding:5px 11px;font-size:11.5px}
.appr-btn.undo:hover{border-color:#bcc4d0;color:#5a6677}
/* klein rood kruisje: to-do verwijderen (omkeerbaar) */
.appr-btn.del{background:#fff;color:#c0392b;border-color:#f0c9c4;padding:7px 11px;line-height:1}
.appr-btn.del:hover{background:#c0392b;border-color:#c0392b;color:#fff}
/* compact ✕ rechtsboven op de DICHTGEKLAPTE to-do-rij (Paul 20 jun: zichtbaar zonder uitklappen).
   Alleen rijen die een ✕ krijgen (onaangeraakte taken) worden relatief gepositioneerd; de rij
   houdt rechts ruimte vrij zodat het kruisje de caret/badge nooit overlapt. */
.todo:has(>.del-row){position:relative}
.todo:has(>.del-row) .todo-row{padding-right:30px}
.del-row{position:absolute;top:7px;right:3px;z-index:3;margin:0}
.del-row .appr-btn.del{padding:3px 7px;font-size:12px;line-height:1;opacity:.5}
.del-row .appr-btn.del:hover{opacity:1}
/* "ongedaan maken"-balkje na een verwijdering */
.del-undo{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;background:#2b3445;color:#fff;
  padding:10px 14px;border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,.28);font-size:13.5px;display:flex;gap:12px;align-items:center;max-width:92vw}
.del-undo button{font:inherit;font-weight:700;background:#ffd43b;color:#3a2f00;border:0;border-radius:7px;padding:6px 12px;cursor:pointer}
.del-undo button:hover{background:#ffe066}
/* verwijderd-banner op de permalink (item.php) */
.del-banner{background:#fff4f2;border:1px solid #f0c9c4;color:#a23b2e;border-radius:10px;padding:10px 13px;margin:8px 0;font-size:13.5px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.archief-panel summary,.hold-panel summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--ink);list-style:none;outline:none}
.archief-panel summary::-webkit-details-marker,.hold-panel summary::-webkit-details-marker{display:none}
.archief-panel summary:before,.hold-panel summary:before{content:'▸ ';color:var(--mut)}
.archief-panel details[open] summary:before,.hold-panel details[open] summary:before{content:'▾ '}
.archief{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.archief-panel .todo.done{display:block;padding:0;opacity:.85;border-bottom:1px solid #f0f2f6}
.archief-panel .todo.done:last-child{border-bottom:0}
.archief-panel .todo-body{padding:0 4px 12px 30px}
.todo-title.done{font-weight:500;text-decoration:line-through;color:var(--mut)}
.todo-rowtitle.done{font-weight:500;color:var(--mut)}
.todo-mini.tm-done{background:#eef1f5;color:#8a94a6;text-transform:none;letter-spacing:0}

/* nette uitlijning van de to-do-actieknoppen op één lijn (jun 2026) */
.todo-act{align-items:center}
.todo-act > form,.todo-act > .appr,.todo-act > .editbox{margin:0}
.todo-act .editbox{margin:0;display:inline-flex}
.todo-act .editbox summary{display:inline-flex;align-items:center;padding:7px 8px;border:1px solid var(--line);border-radius:8px;line-height:1}
.todo-act .appr-btn{line-height:1}

/* live status-balk van de agent (jun 2026) */
.agentbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin-bottom:16px;
  background:#fff;border:1px solid var(--line);font-size:13px;box-shadow:0 1px 3px rgba(16,28,63,.05)}
.agentbar .agentdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:#9aa4b2}
.agentbar .agentlabel{font-weight:700;color:var(--ink);white-space:nowrap}
.agentbar .agentmsg{color:#52606d;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agentbar .agentwhen{color:#9aa4b2;font-size:11.5px;white-space:nowrap}
.agentbar.on{border-color:#bfe3c8;background:#f3fbf5}
.agentbar.on .agentdot{background:#2f9e44;box-shadow:0 0 0 0 rgba(47,158,68,.5);animation:agentpulse 1.6s infinite}
.agentbar.on .agentlabel{color:#1f7a3d}
.agentbar.idle .agentdot{background:#e0a106}
.agentbar.off{opacity:.85}
.agentbar.off .agentdot{background:#9aa4b2}
@keyframes agentpulse{0%{box-shadow:0 0 0 0 rgba(47,158,68,.5)}70%{box-shadow:0 0 0 7px rgba(47,158,68,0)}100%{box-shadow:0 0 0 0 rgba(47,158,68,0)}}
/* progressie-percentage in de statusbalk (jun 2026) */
.agentpct{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap}
.agentpct-bar{width:84px;height:6px;border-radius:6px;background:#e3ebf2;overflow:hidden;flex:0 0 auto}
.agentpct-fill{display:block;height:100%;border-radius:6px;background:#2f9e44;width:3%;transition:width .9s linear}
.agentpct-num{font-weight:700;color:#1f7a3d;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.agentbar.idle .agentpct-fill,.agentbar.off .agentpct-fill{background:#9aa4b2}
.agentbar.idle .agentpct-num,.agentbar.off .agentpct-num{color:#6b7785}
/* wachtrij-samenvatting onder de statusbalk (Paul 5 jul): alle nog te doen's in één regel */
.qsum{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;margin:-8px 0 16px;padding:7px 14px;
  border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:#fbfcfe;
  font-size:12.5px;color:#52606d}
.qsum-lead{font-weight:700;color:#6b7785}
.qsum-part{color:#52606d;text-decoration:none;white-space:nowrap;padding:1px 3px;border-radius:5px}
.qsum-part:hover{background:#eef3f9;text-decoration:none}
.qsum-part b{font-variant-numeric:tabular-nums}
.qsum-paul b{color:#c0791b}
.qsum-claude b{color:#1f7a3d}
.qsum-parked b{color:#8a7a4a}
.qsum-defer b{color:#6a5acd}
.qsum-sep{color:#c3ccd6}
/* Uitgesteld achter een moedertaak (Paul 12 jul) */
.defer-panel summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--ink);list-style:none;outline:none}
.defer-panel summary::-webkit-details-marker{display:none}
.defer-panel summary:before{content:'▸ ';color:var(--mut)}
.defer-panel details[open] summary:before{content:'▾ '}
.defer-panel{border:1px solid #ddd8f5;background:linear-gradient(180deg,#fbfaff,#fff)}
.defer-group{margin:10px 0 4px;padding:8px 10px;border:1px solid #ece9fa;border-radius:10px;background:#fcfbff}
.defer-mom{font-size:12.5px;color:#6b7785;margin-bottom:6px}
.defer-mom a{color:#5b3fb0;text-decoration:none;font-weight:600}
.defer-mom a:hover{text-decoration:underline}
.defer-group .todo.held{display:block;padding:0;border-bottom:1px solid #f0eefb}
.defer-group .todo.held:last-child{border-bottom:0}
.tm-pending{text-transform:none;letter-spacing:0}
/* kiezer om een to-do achter een taak te zetten */
.defer-pick{display:inline-block}
.defer-pick summary{display:inline-flex;align-items:center;list-style:none;cursor:pointer}
.defer-pick summary::-webkit-details-marker{display:none}
.defer-form{display:inline-flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.defer-form select{font:inherit;font-size:12.5px;max-width:320px;padding:5px 7px;border:1px solid var(--line);border-radius:8px;background:#fff}
.appr-btn.defer{background:#efeaff;color:#5b3fb0;border:1px solid #ddd8f5}
.appr-btn.defer:hover{background:#e6dfff}
/* "wat hangt hierachter" op item.php */
.defer-children{margin:12px 0;padding:10px 13px;border:1px solid #ece9fa;border-radius:10px;background:#fcfbff}
.defer-children .dc-h{font-size:13px;font-weight:700;color:#5b3fb0;margin-bottom:7px}
.defer-children .dc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0;border-bottom:1px solid #f0eefb;font-size:13.5px}
.defer-children .dc-row:last-child{border-bottom:0}
.defer-children .dc-row a{color:#3a4553;text-decoration:none}
.defer-children .dc-row a:hover{text-decoration:underline}
/* lege variant: expliciet melden dat er niets achter wacht (niet "gewoon niks tonen") */
.defer-children.dc-leeg{border-color:#eceef2;background:#fafbfc}
.defer-children.dc-leeg .dc-h{color:#6b7683}
.defer-children .dc-none{font-size:13px;color:var(--mut);line-height:1.5}
/* progressie op de "Claude is bezig"-to-do */
.tw-bar{display:inline-block;width:70px;height:5px;border-radius:5px;background:#cfe0f3;overflow:hidden;vertical-align:middle}
.tw-fill{display:block;height:100%;border-radius:5px;background:#1d6fb8;width:3%;transition:width .9s linear}
.tw-pct{font-weight:700;font-variant-numeric:tabular-nums}

/* "in de wacht"-knop + sectie (jun 2026) */
.appr-btn.hold{background:#fff8e6;border-color:#f0dca8;color:#9a7a1e}
.appr-btn.hold:hover{background:#e0a106;border-color:#e0a106;color:#fff}
.appr-btn.urgent{background:#fff;border-color:#f3b6b6;color:#c0392b}
.appr-btn.urgent:hover{background:#fdecec;border-color:#e06b6b}
.appr-btn.urgent.on{background:#c0392b;border-color:#c0392b;color:#fff}
.appr-btn.urgent.on:hover{background:#a82e22;border-color:#a82e22}
.todo-urgent{flex:none;font-size:13px;line-height:1}
/* Geplande uitvoertijd ("⏰ Plan") */
.appr-btn.sched{background:#eef4ff;border-color:#bcd2f5;color:#2456b8}
.appr-btn.sched:hover{background:#2456b8;border-color:#2456b8;color:#fff}
.appr-btn.sched-clear{background:#fff;border-color:#d6dde6;color:#6b7785}
.appr-btn.sched-clear:hover{background:#eef1f5;border-color:#c4ccd6}
.sched-form .sched-input{font:inherit;font-size:13px;padding:3px 6px;border:1px solid #cdd6e0;border-radius:6px;margin-right:4px;vertical-align:middle}
.todo-sched{flex:none;font-size:11.5px;font-weight:700;line-height:1;background:#fff3d6;color:#9a6400;border:1px solid #f0cf7f;border-radius:6px;padding:3px 7px;white-space:nowrap}
/* werktijd-stopwatch per taak (optie 2, 17 jun) */
.work-timer{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.wt-clock{font-size:12px;font-weight:700;color:#5a6677;background:#f1f4f8;border:1px solid #e1e7ef;border-radius:6px;padding:3px 7px;white-space:nowrap}
.wt-clock.on{color:#0b7a4b;background:#e7f7ef;border-color:#bce6d2}
.appr-btn.timer{background:#eafaf1;border-color:#bce6cf;color:#138a55}
.appr-btn.timer:hover{background:#138a55;border-color:#138a55;color:#fff}
.appr-btn.timer.on{background:#c0392b;border-color:#c0392b;color:#fff}
.appr-btn.timer.on:hover{background:#a82e22;border-color:#a82e22}
.appr-btn.est{background:#fff;border-color:#d6dde6;color:#6b7785;padding:5px 9px;font-size:11.5px}
.appr-btn.est:hover{background:#eef1f5;border-color:#c4ccd6}
.wt-est .wt-estin{font:inherit;font-size:12px;width:74px;padding:3px 6px;border:1px solid #cdd6e0;border-radius:6px;margin-right:3px;vertical-align:middle}
.hold-panel h2{margin-bottom:12px}
.todo.held{opacity:.9;border-left:3px solid #e0a106;padding-left:10px}
.todo.held .todo-title{color:#6b5e3a}

/* "Claude is hier mee bezig"-indicator (jun 2026) */
.todo-working{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;padding:3px 10px;border-radius:20px;
  background:#eaf3ff;color:#1d6fb8;font-size:12px;font-weight:700;border:1px solid #cfe0f3}
.todo-working:before{content:'';width:8px;height:8px;border-radius:50%;background:#1d6fb8;
  box-shadow:0 0 0 0 rgba(29,111,184,.5);animation:agentpulse 1.3s infinite}
.todo[data-id] .todo-working ~ .todo-title{display:inline}

/* "voor jou" - taak die Claude niet kan doen (jun 2026) */
.appr-badge.paul{background:#efe9fb;color:#6d28d9;border:1px solid #d9ccf5}

/* ideeën: klikbare filter-kaarten + uitvoeren-knop (jun 2026) */
.idea-filters .filt{cursor:pointer;text-align:left;font:inherit;border:1px solid var(--line);background:#fff;transition:.12s}
.idea-filters .filt:hover{border-color:var(--accent)}
.idea-filters .filt.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.idea-exec-row{margin-top:10px}
.exec-btn{font:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:8px;border:1px solid #1f7a4d;background:#1f7a4d;color:#fff;cursor:pointer}
.exec-btn:hover{background:#176638}
.exec-done{display:inline-block;font-size:12.5px;font-weight:700;color:#1f7a4d;background:#eaf6ee;border:1px solid #bfe3c8;padding:7px 12px;border-radius:8px}

/* Eén-inbox-banner op de home */
.inbox-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#fff,#f4f8ff);border:1px solid #d8e4f5;border-left:5px solid #1d6fb8;border-radius:12px;padding:13px 18px;margin:0 0 20px;text-decoration:none;color:var(--ink);transition:.12s}
.inbox-banner:hover{box-shadow:0 8px 22px rgba(29,111,184,.14);transform:translateY(-2px)}
.inbox-banner .ibx-ico{font-size:24px}
.inbox-banner .ibx-txt{display:flex;flex-direction:column;line-height:1.25}
.inbox-banner .ibx-txt b{font-size:15px}
.inbox-banner .ibx-sub{font-size:12px;color:var(--mut)}
.inbox-banner .ibx-chs{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.inbox-banner .ibx-cc{font-size:12px;font-weight:700;color:#3a5a86;background:#eaf1fb;border:1px solid #d8e4f5;border-radius:999px;padding:3px 10px}
.inbox-banner .ibx-n{min-width:30px;text-align:center;font-size:16px;font-weight:800;color:#fff;background:#1d6fb8;border-radius:999px;padding:4px 11px}

/* ===== Reminders (prominent bovenaan) ===== */
.rem-panel{border-left:4px solid #e8a33d}
.rem-add{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
/* optioneel omschrijving-veld bij het aanmaken van een to-do/reminder */
.rem-add button.qa-more{background:none;color:#b07a1e;border:1px solid var(--line);padding:0 10px;font-weight:500;font-size:12.5px;align-self:center}
.rem-add button.qa-more:hover{background:#faf3e6;color:#8c5e10}
.rem-add button.qa-more[aria-expanded=true]{background:#faf3e6;border-color:#e8a33d}
.rem-add .qa-detail{flex-basis:100%;width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box}
.rem-add .qa-detail:focus{outline:none;border-color:#e8a33d}
/* optioneel bestand-meesturen-veld bij het aanmaken - subtiele drag&drop */
.rem-add .qa-attach{flex-basis:100%;width:100%}
.rem-add .qa-drop{display:block;border:1px dashed #d9c39a;border-radius:9px;padding:10px 12px;font-size:12.5px;color:#8a7a5a;background:#fdfaf3;cursor:pointer;text-align:center;box-sizing:border-box}
.rem-add .qa-drop:hover,.rem-add .qa-drop.over{border-color:#e8a33d;background:#faf3e6;color:#8c5e10}
.rem-add .qa-drop u{text-decoration:underline}
.rem-add .qa-files{flex-basis:100%;width:100%;font-size:12px;color:#6a5d44;margin-top:-2px}
.rem-add .qa-files:empty{display:none}
.rem-add .qa-sched{flex-basis:100%;width:100%;display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:#fdfaf3;border:1px solid #efe2c6;border-radius:10px;padding:8px 11px;box-sizing:border-box}
.rem-add .qa-sched-lbl{font-size:12.5px;color:#8a7a5a;font-weight:600}
.rem-add .qa-sched-chip{background:#fff;color:#8c6a1e;border:1px solid #e3cf9e;border-radius:999px;padding:3px 12px;font:inherit;font-size:12.5px;line-height:1.5;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.rem-add .qa-sched-chip:hover{background:#faf3e6;border-color:#e8a33d;color:#7a5610}
.rem-add .qa-sched-chip.on{background:#e8a33d;border-color:#e8a33d;color:#fff;font-weight:600}
.rem-add .qa-sched .qa-sched-in{margin-right:0}
.rem-add .qa-sched-hint{font-size:12px;color:#8a7a5a;flex-basis:100%;margin-top:-1px}
/* ✨ Prompt-hulp: interactieve popup die stap voor stap de perfecte opdracht uitvraagt (Paul 13 jul) */
.rem-add button.qa-prompter-btn{color:#6b3fa0;border-color:#e2d4f2}
.rem-add button.qa-prompter-btn:hover{background:#f4eefb;color:#552d86;border-color:#c9aee9}
.qpr-ov{position:fixed;inset:0;z-index:9999;background:rgba(23,18,38,.55);display:flex;align-items:flex-start;justify-content:center;padding:5vh 14px;overflow:auto}
.qpr-ov[hidden]{display:none}
.qpr-card{position:relative;width:100%;max-width:680px;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(23,18,38,.35);padding:22px 24px 20px;box-sizing:border-box}
.qpr-x{position:absolute;top:10px;right:12px;background:none;border:none;font-size:24px;line-height:1;color:#9a8fb0;cursor:pointer;padding:2px 6px}
.qpr-x:hover{color:#552d86}
.qpr-head{font-size:17px;font-weight:700;color:#3a2b5c;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:22px}
.qpr-restart{font-size:11.5px;font-weight:600;color:#8a5cd0;background:#f4eefb;border:1px solid #e2d4f2;border-radius:999px;padding:3px 9px;cursor:pointer}
.qpr-restart:hover{background:#e9defb;color:#552d86}
.qpr-sub{font-size:12.5px;color:#7d7391;margin:3px 0 12px}
.qpr-prog{height:5px;background:#efeaf6;border-radius:999px;overflow:hidden;margin-bottom:16px}
.qpr-prog-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a5cd0,#b98cf0);transition:width .25s}
.qpr-qn{font-size:12px;font-weight:600;color:#8a5cd0;text-transform:uppercase;letter-spacing:.03em}
.qpr-q{font-size:18px;font-weight:700;color:#241a3c;margin:6px 0 4px;line-height:1.3}
.qpr-hint{font-size:13px;color:#7d7391;margin:0 0 12px}
.qpr-lbl{display:block;font-size:12.5px;font-weight:600;color:#5a4e78;margin:10px 0 4px}
.qpr-answer,.qpr-rt,.qpr-rd{width:100%;box-sizing:border-box;border:1px solid #ddd3ec;border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical}
.qpr-answer:focus,.qpr-rt:focus,.qpr-rd:focus{outline:none;border-color:#a97fe0;box-shadow:0 0 0 3px rgba(169,127,224,.15)}
.qpr-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.qpr-nav-r{display:flex;gap:8px}
.qpr-btn{border-radius:9px;padding:8px 16px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent}
.qpr-btn.go{background:#8a5cd0;color:#fff}
.qpr-btn.go:hover{background:#743fc0}
.qpr-btn.ghost{background:#fff;color:#6b5f88;border-color:#ddd3ec}
.qpr-btn.ghost:hover{background:#f4eefb;color:#552d86}
.qpr-btn:disabled{opacity:.55;cursor:default}
.qpr-load{display:flex;align-items:center;gap:9px;color:#7d7391;font-size:13.5px;padding:14px 0}
.qpr-load .qpr-spin{width:15px;height:15px;border:2px solid #e3d9f2;border-top-color:#8a5cd0;border-radius:50%;animation:qprspin .7s linear infinite;flex:0 0 auto}
@keyframes qprspin{to{transform:rotate(360deg)}}
.qpr-err{font-size:12.5px;color:#9a3a3a;background:#fdf0f0;border:1px solid #f2c9c9;border-radius:8px;padding:8px 11px;margin-top:10px}
@media(max-width:560px){.qpr-card{padding:18px 16px 16px}.qpr-q{font-size:16px}}
.rem-add input[type=text]{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13.5px;font-family:inherit}
.rem-add input[type=text]:focus{outline:none;border-color:#e8a33d}
/* Snelle-to-do-titel = auto-groeiend tekstblok (was <input>). Zodra je inspreekt zet mic.js .mic-wide
   erop -> volle breedte + hoger, net als het antwoordveld op item.php (Paul 13 jul). */
.rem-add textarea.qa-title{flex:1;min-width:160px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13.5px;font-family:inherit;line-height:1.4;resize:none;overflow:hidden;min-height:20px;box-sizing:border-box}
.rem-add textarea.qa-title:focus{outline:none;border-color:#e8a33d}
.rem-add textarea.qa-title.mic-wide{flex-basis:100%;width:100%;min-height:64px}
.rem-add button{background:#e8a33d;color:#fff;border:none;border-radius:9px;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer}
.rem-add button:hover{background:#d8902a}
.quickadd{margin:2px 0 18px;align-items:center}
.quickadd .qa-ok{color:#1f9d55;font-weight:600;font-size:13px;align-self:center;white-space:nowrap}
.reminders{display:flex;flex-direction:column;gap:8px}
.rem{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fffdf8}
.rem-dot{width:9px;height:9px;border-radius:50%;background:#e8a33d;flex:0 0 auto}
.rem-main{flex:1;min-width:0}
.rem-title{font-weight:500;font-size:14px;color:var(--ink)}
.rem-detail{font-size:12.5px;color:var(--mut);margin-top:2px}
.rem-when{font-size:11px;color:#9aa4b2;margin-top:3px}
.rem-act{display:flex;gap:6px;flex:0 0 auto}
.rem-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:600;cursor:pointer;color:#52606d}
.rem-btn.move{border-color:#2456a6;color:#2456a6}
.rem-btn.move:hover{background:#2456a6;color:#fff}
.rem-btn.done:hover{background:#2f9e44;color:#fff;border-color:#2f9e44}
.moved-hint{font-size:12px;color:#2f9e44;font-weight:600}
@media(max-width:560px){.rem{flex-wrap:wrap}.rem-act{width:100%;justify-content:flex-end}}

/* ===== compacte sectiekop + compacte projecten (onder reminders/to-do's) ===== */
.sec-kop{font-size:14px;color:var(--ink);margin:26px 0 12px;font-weight:700}
.sec-kop .muted{font-weight:400}
.projects.compact{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;margin-bottom:16px}
.projects.compact .proj-tile{padding:11px 13px;border-top-width:3px}
.projects.compact .proj-name{font-size:13.5px;margin-bottom:5px}
.projects.compact .proj-meta{font-size:11px;gap:9px;flex-wrap:wrap;align-items:center}
.projects.compact .proj-last{font-size:10.5px;color:#9aa4b2}
/* Projecten-overzicht: filterveld + sluimerend-foldout (overzichtelijker bij veel projecten) */
.proj-filter{margin:0 0 12px}
.proj-filter input{width:100%;max-width:340px;padding:7px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--ink);background:#fff}
.proj-filter input:focus{outline:none;border-color:var(--accent,#0f1c3f);box-shadow:0 0 0 2px rgba(15,28,63,.08)}
.proj-filter-none{display:inline-block;margin-left:10px;font-size:12px;color:var(--mut)}
.proj-catgroup{margin:0 0 6px}
.proj-cat-kop{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:700;margin:14px 0 9px;display:flex;align-items:center;gap:7px}
.proj-cat-kop .muted{font-weight:600;text-transform:none;letter-spacing:0;color:#9aa4b2}
.proj-dormant{margin:2px 0 22px}
.proj-dormant>summary{cursor:pointer;font-size:12.5px;color:var(--mut);font-weight:600;padding:5px 0;list-style:none}
.proj-dormant>summary::-webkit-details-marker{display:none}
.proj-dormant>summary::before{content:'▸ ';color:#9aa4b2}
.proj-dormant[open]>summary::before{content:'▾ '}
.proj-dormant>summary .muted{font-weight:400}
.proj-dormant .proj-tile{opacity:.82}
.proj-dormant .proj-tile:hover{opacity:1}
.hold-panel summary,.archief-panel summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--ink)}
.appr-btn.remind{border-color:#e8a33d;color:#d8902a}
.appr-btn.remind:hover{background:#e8a33d;color:#fff;border-color:#e8a33d}

/* Nieuwe-meldingen badge per project (WhatsApp-stijl) */
.proj-tile{position:relative;}
/* Telling-badge op de "Afgehandeld"-kop: ongelezen Claude-antwoorden zonder te hoeven zoeken */
.sum-new{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:1px 9px;
  border-radius:11px;background:#25d366;color:#fff;font-size:12px;font-weight:700;
  vertical-align:middle;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.sum-new-jump{border:0;cursor:pointer;font-family:inherit;}
.sum-new-jump:hover{filter:brightness(1.06);box-shadow:0 1px 5px rgba(0,0,0,.35);}
/* ongelezen afgehandeld item gepind+oplichtend zodat Paul direct ziet wélke het is */
.archief-panel .todo.done.unread{opacity:1;background:#eafff2;border-left:3px solid #25d366;}
.archief-panel .todo.done.unread .todo-rowtitle.done{color:var(--ink);font-weight:600;}
@keyframes flashUnread{0%{background:#c9f7dc;}60%{background:#c9f7dc;}100%{background:#eafff2;}}
.archief-panel .todo.done.unread.flash-unread{animation:flashUnread 1.6s ease-out;}
.proj-badge{position:absolute;top:7px;right:7px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:#25d366;color:#fff;font-size:11px;font-weight:700;
  line-height:18px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.3);
  display:inline-flex;align-items:center;justify-content:center;}

/* Overzicht-tegels op de homepage: snelle navigatie naar elk blok, telling rechtsboven (.proj-badge) */
.htiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:18px 0 28px}
.htile{position:relative;background:#fff;border:1px solid var(--line);border-top:6px solid var(--accent);
  border-radius:16px;padding:26px 20px;text-decoration:none;color:var(--ink);min-height:160px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;transition:.12s}
.htile:hover{box-shadow:0 8px 22px rgba(15,28,63,.10);transform:translateY(-2px)}
.htile-ico{font-size:46px;line-height:1}
.htile-name{font-size:20px;font-weight:700;line-height:1.25}
.htile .proj-badge{background:var(--accent)}
@media(max-width:560px){.htiles{grid-template-columns:repeat(2,1fr)}}
/* tegel-anker landt netjes onder de sticky topbar i.p.v. eronder verstopt */
#na-panel,#ap-panel,#rem-panel,#projecten,#todo-panel,#hero-panel,#afgehandeld{scroll-margin-top:74px}

/* Klikbare agentbar + uitklapbare activiteitenlog */
.agentbar{flex-wrap:wrap;}
.agentmsg-link{color:inherit;text-decoration:none;}
.agentmsg-link:hover{text-decoration:underline;}
.agentmsg-arrow{opacity:.55;font-size:.85em;}
.agentmsg-inlink{color:#c8611b;font-weight:700;text-decoration:none;border-bottom:1px dotted #e0a06a;}
.agentmsg-inlink:hover{color:#a04d10;border-bottom-style:solid;}
.agentmsg-wq{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid #e0a06a;color:#c8611b;font-weight:600;font-size:12.5px;line-height:1.5;text-decoration:none;white-space:nowrap}
.agentmsg-wq[hidden]{display:none}
.agentmsg-wq:hover{background:#fff6ef;color:#a04d10;border-color:#c8611b}
.agentmsg-wq b{font-weight:800}
@media(max-width:560px){.agentmsg-wq{padding:5px 12px;font-size:13px}}
.agent-expand{margin-left:auto;background:transparent;border:0;color:inherit;cursor:pointer;font-size:14px;opacity:.7;padding:2px 7px;border-radius:6px;line-height:1;}
.agent-expand:hover{opacity:1;background:rgba(255,255,255,.10);}
.activitylog{margin:-2px 0 14px;background:rgba(0,0,0,.18);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;}
.alog-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;text-decoration:none;color:#e6e9f0;font-size:13px;}
.alog-item:hover{background:rgba(255,255,255,.06);}
.alog-proj{flex:none;font-size:11px;font-weight:600;color:#fff;padding:1px 7px;border-radius:6px;}
.alog-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.alog-actor{flex:none;opacity:.7;font-size:11px;}
.alog-ago{flex:none;opacity:.55;font-size:11px;white-space:nowrap;}
.alog-more{align-self:center;margin:6px 0 2px;background:rgba(255,255,255,.10);border:0;color:inherit;cursor:pointer;padding:5px 18px;border-radius:8px;font-size:12px;}
.alog-more:hover{background:rgba(255,255,255,.18);}

/* --- activiteitenlog: fix inklappen + leesbaar (licht thema) + groepen --- */
.activitylog[hidden]{display:none !important;}
.activitylog{background:var(--card);border:1px solid var(--line);box-shadow:0 1px 3px rgba(16,28,63,.05);}
.alog-item{color:var(--ink);}
.alog-item:hover{background:#f1f4f8;}
.alog-item .alog-actor{color:var(--mut);}
.alog-item .alog-ago{color:var(--mut);}
.alog-ghead{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:0;cursor:pointer;
  padding:7px 9px;border-radius:7px;color:var(--ink);font-size:13px;text-align:left;font-family:inherit;}
.alog-ghead:hover{background:#f1f4f8;}
.alog-caret{flex:none;opacity:.55;font-size:11px;width:12px;text-align:center;}
.alog-ghead .alog-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.alog-count{flex:none;font-size:11px;font-weight:700;color:#2456a6;background:#e8eefb;padding:1px 7px;border-radius:6px;}
.alog-ghead .alog-ago{flex:none;opacity:.55;font-size:11px;color:var(--mut);white-space:nowrap;}
.alog-gsub{display:flex;flex-direction:column;}
.alog-sub{padding-left:32px;font-size:12.5px;}
.alog-more{align-self:center;margin:6px auto 2px;background:#eef2f8;color:#2456a6;border:1px solid var(--line);
  cursor:pointer;padding:5px 18px;border-radius:8px;font-size:12px;font-weight:600;}
.alog-more:hover{background:#e2e9f5;}

.alog-gsub[hidden]{display:none !important;}

/* Referentienummer (#id) bij activiteiten/taken */
.refnum{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;color:#94a3b8;font-weight:600;margin-right:2px;}
.alog-ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#94a3b8;font-weight:600;flex:none;}
/* Statusbadge in de uitgeklapte activiteitenlijst: direct zien "Klaar" of "Nog te doen" (+verwachting) */
.alog-st{flex:none;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap;line-height:1.55;}
.alog-st-done{background:#e6f6ec;color:#1f7a3d;}
.alog-st-working{background:#fff3d6;color:#9a6b00;}
.alog-st-todo{background:#e8eefb;color:#2456a6;}
.alog-st-pending{background:#f0eafc;color:#6b3fb0;}
.alog-st-paul{background:#fde8ef;color:#b02864;}
.alog-st-hold{background:#eef1f5;color:#697586;}
.alog-st-no{background:#f3f4f6;color:#8a93a0;}
.alog-st-rem{background:#fdf0d8;color:#9a6b00;}
.alog-eta{flex:none;font-size:10.5px;color:var(--mut);white-space:nowrap;opacity:.85;}
@media(max-width:640px){.alog-eta{display:none;}}

/* To-do-filter (Alle / Van jou / Van Claude) */
.todo-filters{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 12px}
.tf-chip{display:inline-flex;align-items:center;gap:6px;background:#f1f4f8;border:1px solid var(--line);color:#5b6675;
  font:inherit;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;cursor:pointer;line-height:1.3;transition:background .12s,color .12s,border-color .12s}
.tf-chip:hover{background:#e7ecf3}
.tf-chip .tf-n{font-size:11px;font-weight:700;background:#fff;color:#7b8696;padding:0 6px;border-radius:999px;min-width:16px;text-align:center}
.tf-chip.active{background:#1d6fb8;border-color:#1d6fb8;color:#fff}
.tf-chip.active .tf-n{background:rgba(255,255,255,.22);color:#fff}
.todo.tf-hidden{display:none !important}
.todos .tf-empty{margin:6px 0 0}
/* "Wacht op jou"-filterchip krijgt een amber accent zodat-ie opvalt */
.tf-chip.tf-await{border-color:#e3b341;color:#9a6a00;background:#fff8e8}
.tf-chip.tf-await:hover{background:#fdeec8}
.tf-chip.tf-await.active{background:#d99a00;border-color:#d99a00;color:#fff}
.tf-chip.tf-held{border-color:#cdb7e0;color:#6b4a8a;background:#f6f0fb}
.tf-chip.tf-held:hover{background:#eaddf6}
.tf-chip.tf-held.active{background:#7a4fa0;border-color:#7a4fa0;color:#fff}
/* Tussenkopjes die de to-do-lijst splitsen (wacht-op-jou vs. Claude pakt op) */
.todo-subhead{display:flex;align-items:center;gap:7px;margin:12px 0 4px;padding:5px 9px;border-radius:8px;
  font-size:12.5px;font-weight:700;color:#5b6675}
.todo-subhead:first-child{margin-top:2px}
.todo-subhead.tf-hidden{display:none !important}
.todo-subhead-wait{background:#fff8e8;color:#8a5d00;border:1px solid #f0dca6}
.todo-subhead-rest{background:#f1f4f8;color:#5b6675;border:1px solid var(--line)}
.todo-subhead .ts-n{font-size:11px;font-weight:700;background:rgba(0,0,0,.07);padding:0 7px;border-radius:999px;min-width:16px;text-align:center}
.todo-subhead .ts-hint{font-weight:500;font-size:11.5px;opacity:.8}

/* Reminders - compacte, openklapbare regels (zelfde stijl als de activiteitenlog) */
.rem-head{display:flex;align-items:center;gap:8px}
.rem-toggle{margin-left:auto;background:transparent;border:0;color:var(--mut);cursor:pointer;font-size:14px;padding:2px 9px;border-radius:6px;line-height:1}
.rem-toggle:hover{background:#fff1da;color:#d8902a}
.reminders[hidden]{display:none !important}
.rem{display:block;border:1px solid var(--line);border-radius:10px;background:#fffdf8;padding:0;overflow:hidden}
.rem-row{display:flex;align-items:center;gap:11px;width:100%;background:transparent;border:0;cursor:pointer;padding:10px 12px;text-align:left;font:inherit;color:inherit}
.rem-row:hover{background:#fff6e8}
.rem-row .rem-title{flex:1;min-width:0;font-weight:500;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rem-row .rem-when{flex:none;font-size:11px;color:#9aa4b2;white-space:nowrap;margin:0}
.rem-caret{flex:none;opacity:.5;font-size:11px;width:12px;text-align:center}
.rem-body{padding:2px 12px 11px 32px}
.rem-body[hidden]{display:none !important}
.rem-body .rem-detail{font-size:12.5px;color:var(--mut);margin:0 0 9px}
.rem-body .rem-act{display:flex;gap:6px}

/* To-do - compacte, openklapbare regels (zelfde stijl als reminders) */
.todos[hidden]{display:none !important}
.todo-panel .todo{display:block;padding:0;border-bottom:1px solid #f0f2f6}
.todo-panel .todo:last-child{border-bottom:0}
.todo-row{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;cursor:pointer;padding:11px 4px;text-align:left;font:inherit;color:inherit}
.todo-row:hover{background:#f7f9fc}
.todo-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#9aa4b2}
.todo-dot-working{background:#e8a33d;box-shadow:0 0 0 0 rgba(232,163,61,.55);animation:agentpulse 1.6s infinite}
.todo-dot-go{background:#2f9e44}
.todo-dot-no{background:#cdd6e8}
.todo-dot-paul{background:#8a5cf6}
.todo-dot-pending{background:#e8a33d}
/* Stoplicht-status van de to-do-puntjes (Paul, 19 jun): oranje=nog te doen, groen=klaar, rood=blocker */
.todo-dot-todo{background:#e8a33d}
.todo-dot-done{background:#2f9e44}
.todo-dot-blocked{background:#e03131}
.todo-rowtitle{flex:1;min-width:0;font-weight:500;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-rowdesc{display:none}/* alleen op mobiel zichtbaar (zie media-query) */
.todo-rowproj{flex:none;font-size:11px;font-weight:600;color:#fff;padding:1px 7px;border-radius:6px;text-decoration:none}
.todo-mini{flex:none;font-size:10px;font-weight:700;padding:1px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}
.thread-badge{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:600;color:#7c8696;background:#f1f4f8;border-radius:6px;padding:1px 6px;line-height:1.5;white-space:nowrap}
.thread-badge.dl{color:#1f7a3d;background:#e9f6ee}
.thread-badge.ap{color:#8a4b00;background:#ffe9c7;border:1px solid #f0c070}
.actiepunt-chip{display:inline-block;background:#ffe9c7;color:#8a4b00;border:1px solid #f0c070;border-radius:6px;padding:0 8px;font-weight:700;font-size:.82em;line-height:1.7;margin-right:6px;vertical-align:baseline}
.act-rowtitle .thread-badge,.todo-title .thread-badge{vertical-align:middle}
.todo-mini.tm-working{background:#e3f0fb;color:#1d6fb8}
.todo-mini.tm-go{background:#e6f6ec;color:#1f7a3d}
.todo-mini.tm-pending{background:#fdf0db;color:#b9791b}
.todo-mini.tm-paul{background:#efe9fd;color:#6d4fc4}
.todo-mini.tm-no{background:#eef1f5;color:#8a94a6}
.todo-panel .todo-body{padding:0 4px 12px 30px}
.todo-body[hidden]{display:none !important}
@media(max-width:560px){.todo-rowproj{display:none}}

/* Recente activiteit - compacte, openklapbare regels (zelfde stijl als reminders/to-do) */
.feed[hidden]{display:none !important}
.feed-panel .act{display:block;padding:0;border-bottom:1px solid #f0f2f6}
.feed-panel .act:last-child{border-bottom:0}
.act-row{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;cursor:pointer;padding:10px 4px;text-align:left;font:inherit;color:inherit}
.act-row:hover{background:#f7f9fc}
.act-row .act-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin:0}
.act-rowtitle{flex:1;min-width:0;font-weight:500;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-rowproj{flex:none;font-size:11px;font-weight:600;color:#fff;padding:1px 7px;border-radius:6px}
.act-rowmeta{flex:none;font-size:11px;color:#9aa4b2;white-space:nowrap}
.feed-panel .act-body{padding:0 4px 11px 30px}
.act-body[hidden]{display:none !important}
.feed-panel .act-foot{margin-top:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.feed-panel .act-detail{font-size:13.5px;color:#52606d;line-height:1.5;margin:0 0 5px}
.archief .todo-detail{margin-top:3px}
@media(max-width:560px){.act-rowproj{display:none}}

/* Heroverweging - zelfde openklap-stijl */
#hero[hidden]{display:none !important}
.hero-panel .todo{display:block;padding:0;border-bottom:1px solid #f0f2f6}
.hero-panel .todo:last-child{border-bottom:0}
.hero-panel .todo-body{padding:0 4px 12px 30px}
.todo-dot-hero{background:#7c5cd0}
.todo-mini.tm-hero{background:#efe9fd;color:#6d4fc4}

/* Project: startdatum-tegel + Stand van zaken per project */
.proj-since{color:#94a3b8}
.proj-status .ps-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.ps-col{min-width:0}
.ps-h{font-size:13px;font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:7px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.ps-h span{margin-left:auto;font-size:11px;font-weight:700;background:#eef1f5;color:#52606d;padding:1px 8px;border-radius:10px}
.ps-h.todo{color:#1f7a3d;border-color:#bfe3c8}
.ps-h.hold{color:#b9791b;border-color:#f3dca0}
.ps-h.hero{color:#6d4fc4;border-color:#ddd2f7}
.ps-h.done{color:#52606d}
.ps-item{display:flex;align-items:baseline;gap:7px;font-size:13px;padding:5px 0;color:var(--ink)}
.ps-item .ps-t{flex:1;min-width:0}
.ps-when{flex:none;font-size:10.5px;color:#9aa4b2;white-space:nowrap}
.ps-det{font-size:12px;color:var(--mut);margin:0 0 7px 18px;line-height:1.4}
.ps-empty{font-size:12.5px;color:#9aa4b2;font-style:italic;margin:2px 0}
.ps-more{font-size:12px;color:#2456a6;margin:6px 0 0}


/* ===== markdown-opmaak in details, activiteit & reacties (compact, geen grote gaten) ===== */
/* Lange ononderbroken strings (URL's, serverpaden /home/..., `code`) braken nu netjes af
   i.p.v. de opdracht-tekst breder dan het scherm te duwen. Op mobiel kapte body{overflow-x:hidden}
   die overloop af -> "te breed, niets van de opdrachten te lezen" (Paul, 15 jun). */
.todo-detail,.act-detail,.cmt-b,.rem-detail{overflow-wrap:anywhere}
.todo-detail p,.act-detail p,.cmt-b p{margin:0 0 6px}
.todo-detail p:last-child,.act-detail p:last-child,.cmt-b p:last-child{margin-bottom:0}
.todo-detail ul,.todo-detail ol,.act-detail ul,.act-detail ol,.cmt-b ul,.cmt-b ol{margin:4px 0 6px;padding-left:20px}
.todo-detail li,.act-detail li,.cmt-b li{margin:1px 0}
.todo-detail .md-h,.act-detail .md-h,.cmt-b .md-h{font-size:14.5px;font-weight:700;color:var(--ink);margin:10px 0 4px;line-height:1.3}
.todo-detail .md-h:first-child,.act-detail .md-h:first-child,.cmt-b .md-h:first-child{margin-top:0}
.todo-detail blockquote,.act-detail blockquote,.cmt-b blockquote{margin:4px 0;padding:2px 0 2px 10px;border-left:3px solid #d4dae3;color:#52606d}
.todo-detail code,.act-detail code,.cmt-b code{background:#eef1f5;border-radius:4px;padding:0 4px;font-size:.92em}
.todo-detail strong,.act-detail strong,.cmt-b strong{color:var(--ink);font-weight:600}
.todo-detail .md-hr,.act-detail .md-hr,.cmt-b .md-hr{border:0;border-top:1px solid var(--line);margin:9px 0}

/* --- badges in de actie-rij netjes uitlijnen met de knoppen (zelfde hoogte/vorm) --- */
.todo-act .appr-badge{margin-top:0;padding:7px 13px;border-radius:8px;display:inline-flex;align-items:center;line-height:1;font-size:12.5px}

/* --- .md huisstijl-doc chip in de spar-thread --- */
.md-doc{display:inline-flex;align-items:center;gap:5px;background:#eef4ff;border:1px solid #cfe0f3;color:#1d4f8b;font-weight:600;font-size:12.5px;padding:3px 9px;border-radius:7px;text-decoration:none;white-space:nowrap}
.md-doc:hover{background:#1d6fb8;border-color:#1d6fb8;color:#fff}

/* --- download-kiezer in de uitgeklapte activiteit --- */
.dl-chooser{margin:2px 0 12px;padding:10px 12px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px}
.dl-chooser-h{display:block;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.dl-list{display:flex;flex-wrap:wrap;gap:8px}
.dl-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;max-width:100%}
.dl-item:hover{border-color:#1d6fb8;color:#1d6fb8}
.dl-ext{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.4px;color:#fff;background:#1d6fb8;border-radius:4px;padding:2px 5px;line-height:1}
.dl-item:hover .dl-ext{background:#16264f}
/* Bijlagen op een to-do (Paul stuurt bestanden mee) */
.att-chooser{background:#fff7ec;border-color:#f0d9a8}
.att-chooser .dl-ext{background:#c98a12}
.att-chooser .dl-item:hover{border-color:#c98a12;color:#a06d00}
.att-chooser .dl-item:hover .dl-ext{background:#7a5300}
.att-size{color:var(--mut);font-weight:500}
.att-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 12px}
.att-label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--mut)}
.att-label input[type=file]{font-size:12px;max-width:230px}
.att-send{flex:none}
.att-hint{font-size:11px;color:var(--mut)}
/* Sleep-/plakzone voor bijlagen (3 sep 2026): meerdere bestanden slepen + schermafbeelding plakken.
   De <input type=file> ligt doorzichtig over de zone, zodat 'required' blijft werken. */
.att-drop{position:relative;flex:1 1 320px;min-width:220px;display:block;box-sizing:border-box;border:1px dashed #e0c692;border-radius:10px;padding:11px 14px;background:#fffaf1;cursor:pointer;text-align:center;transition:border-color .12s,background .12s}
.att-drop:hover,.att-drop.over{border-color:#c98a12;background:#fdf3e1}
.att-drop.over{border-style:solid}
.att-drop.pasted{border-color:#1e7a3c;background:#eaf7ef}
.att-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.att-drop-txt{display:block;font-size:12.5px;font-weight:600;color:#8a6d2f;pointer-events:none}
.att-drop-txt u{text-decoration:underline}
.att-drop-sub{display:block;font-style:normal;font-weight:500;font-size:11px;color:var(--mut);margin-top:3px}
.att-picked{flex-basis:100%;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.att-picked[hidden]{display:none}
.att-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 6px 4px 5px;font-size:12px;color:var(--ink)}
.att-thumb{width:30px;height:30px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:none;background:#f3f5f8}
.att-chip-ext{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.4px;color:#fff;background:#c98a12;border-radius:4px;padding:3px 5px;line-height:1}
.att-chip-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.att-x{flex:none;border:0;background:transparent;color:var(--mut);font-size:15px;line-height:1;padding:2px 4px;cursor:pointer;border-radius:5px}
.att-x:hover{background:#fdecec;color:#b42424}
.att-sum{font-size:11px;color:var(--mut)}
.att-err{flex-basis:100%;width:100%;font-size:11.5px;font-weight:600;color:#b42424}
@media(max-width:640px){.att-drop{flex-basis:100%}.att-chip-n{max-width:150px}}
.up-flash{margin:2px 0 12px;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600}
.up-flash.ok{background:#e7f6ec;border:1px solid #b6e0c4;color:#1e7a3c}
.up-flash.err{background:#fdecec;border:1px solid #f3c2c2;color:#b42424}

/* --- markdown-tabellen (huisstijl) --- */
.md-tblwrap{overflow-x:auto;margin:12px 0}
.md-tbl{border-collapse:collapse;width:100%;font-size:13px;background:#fff}
.md-tbl th,.md-tbl td{border:1px solid var(--line);padding:7px 11px;text-align:left;vertical-align:top}
.md-tbl thead th{background:var(--navy);color:#fff;font-weight:700;font-size:12px}
.md-tbl tbody tr:nth-child(even){background:#f7f9fc}

/* --- doc.php: huisstijl-documentpagina --- */
.doc-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 14px;flex-wrap:wrap}
.doc-back{font-size:13px;color:var(--mut);text-decoration:none}
.doc-dl{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;font-weight:600;font-size:13px;padding:9px 15px;border-radius:9px;text-decoration:none}
.doc-dl:hover{background:#16264f;color:#fff}
/* Twee downloadknoppen naast elkaar (PDF = primair, .md = secundair). Op smal scherm
   mogen ze wrappen; de doc-bar is al flex-wrap. */
.doc-dls{display:inline-flex;gap:8px;flex-wrap:wrap}
.doc-dl-alt{background:#fff;color:var(--navy);border:1px solid var(--line)}
.doc-dl-alt:hover{background:#f1f4f8;color:var(--navy)}
.doc-paper{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 34px;line-height:1.6;box-shadow:0 2px 14px rgba(15,28,63,.05)}
.doc-paper h3,.doc-paper h4,.doc-paper h5{color:var(--navy);margin-top:1.4em}
.doc-paper h3:first-child{margin-top:0}
.doc-paper code{background:#f1f4f8;padding:1px 5px;border-radius:4px;font-size:.9em}
.md-pre{background:#f1f4f8;border:1px solid #dfe5ee;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.82em;line-height:1.45;margin:10px 0}
.md-pre code{background:none;padding:0;font-size:1em;white-space:pre}
.doc-paper blockquote{border-left:3px solid #cfe0f3;margin:1em 0;padding:2px 0 2px 14px;color:var(--mut)}
.doc-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);color:#9aa4b2;font-size:11.5px}
@media(max-width:560px){.doc-paper{padding:20px 18px}}

/* --- Actiepunten-paneel (open NEEDS: over alle threads) --- */
.ap-panel{border-left:4px solid #f0a830}
.aplist{display:flex;flex-direction:column;gap:2px}
.ap-row{display:flex;align-items:flex-start;gap:10px;padding:11px 8px;border-bottom:1px solid #f3ecdd;text-decoration:none;color:inherit;border-radius:8px}
.ap-row:last-child{border-bottom:0}
.ap-row:hover{background:#fff7ea}
.ap-ico{flex:none;font-size:15px;line-height:1.4}
.ap-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ap-title{font-weight:500;font-size:14px;color:var(--ink)}
.ap-text{font-size:13px;color:#7a5a1e;line-height:1.45}
.ap-proj{flex:none;align-self:center;font-size:11px;font-weight:600;color:#fff;padding:2px 8px;border-radius:9px;white-space:nowrap}
@media(max-width:560px){.ap-proj{display:none}}
/* Deep-link vanuit homepage-actiepunt: licht het juiste bericht kort op zodat je het meteen ziet */
.ap-flash{animation:apFlash 2.6s ease-out 1}
@keyframes apFlash{0%{background:#ffe2b0;box-shadow:0 0 0 3px #f0a830}55%{background:#ffe2b0;box-shadow:0 0 0 3px #f0a830}100%{background:#f6f8fb;box-shadow:0 0 0 0 rgba(240,168,48,0)}}

.qa-panel .quickadd{margin:0}

/* Duim omhoog/omlaag per Claude-antwoord (feedback om antwoorden te verbeteren) */
.cfb{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:7px;padding-top:6px;border-top:1px dashed #d4ddea}
.cfb-lbl{font-size:11px;color:var(--mut);margin-right:2px}
.cfb-btn{font:inherit;font-size:13px;line-height:1;padding:4px 9px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:.12s;opacity:.78}
.cfb-btn:hover{opacity:1;border-color:#bcc4d0}
.cfb-btn.up.on{background:#2f9e44;border-color:#2f9e44;opacity:1}
.cfb-btn.down.on{background:#d64545;border-color:#d64545;opacity:1}
.cfb-note{font-size:11px;color:var(--mut);font-style:italic}
.cfb-n{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.cfb-btn.up.on .cfb-n,.cfb-btn.down.on .cfb-n{color:#fff}

/* === Spring-naar-#nummer + vaste link (15 jun) === */
.jumpbox{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;vertical-align:middle;margin-right:8px}
.jumpbox .jb-hash{font-size:12px;color:var(--mut);padding:0 2px 0 7px}
.jumpbox .jb-in{width:48px;border:0;font:inherit;font-size:13px;padding:4px 4px;outline:none;-moz-appearance:textfield}
.jumpbox .jb-in::-webkit-outer-spin-button,.jumpbox .jb-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.jumpbox .jb-go{border:0;border-left:1px solid var(--line);background:#f3f6fb;color:#2456a6;font-size:14px;line-height:1;padding:5px 9px;cursor:pointer}
.jumpbox .jb-go:hover{background:#e7eefa}
.permalink{font-size:11px;color:#6b7a99;text-decoration:none;font-weight:600}
.permalink:hover{color:#2456a6;text-decoration:underline}

/* === Fuzzy zoeken in alles (header-veld + live snippet-dropdown, 15 jun) === */
.searchbox{position:relative;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:visible;vertical-align:middle;margin-right:8px}
.searchbox .sb-ico{font-size:12px;color:var(--mut);padding:0 2px 0 8px;line-height:1}
.searchbox .sb-in{width:170px;border:0;font:inherit;font-size:13px;padding:5px 8px;outline:none;background:transparent;border-radius:8px}
.searchbox .sb-in::-webkit-search-cancel-button{cursor:pointer}
.sb-drop{position:absolute;top:calc(100% + 6px);right:0;width:380px;max-width:88vw;max-height:70vh;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(15,28,63,.18);z-index:120;padding:5px}
.sb-item{display:block;text-decoration:none;color:var(--ink);padding:8px 9px;border-radius:8px}
.sb-item:hover,.sb-item.on{background:#f3f6fb}
.sb-it-top{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--mut);margin-bottom:2px}
.sb-it-ref{font-weight:700;color:#2456a6}
.sb-it-proj{color:#fff;font-weight:700;padding:1px 7px;border-radius:8px;font-size:10px}
.sb-it-date{margin-left:auto}
.sb-it-title{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.sb-it-snip{font-size:12px;color:var(--mut);line-height:1.4;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sb-empty{padding:12px 11px;font-size:13px;color:var(--mut)}
.sb-all{display:block;text-align:center;padding:9px;margin-top:3px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:#2456a6;text-decoration:none}
.sb-all:hover{background:#f3f6fb;border-radius:0 0 8px 8px}
.sb-it-snip mark,.srch-snip mark,.sb-empty mark{background:#fff2ad;color:inherit;border-radius:2px;padding:0 1px}

/* === Zoekresultaten-pagina (search.php) === */
.searchbig{display:flex;gap:8px;margin:4px 0 6px}
.sb-big{flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:15px;outline:none}
.sb-big:focus{border-color:#7fa8e6}
.sb-bigbtn{padding:11px 20px;border:0;border-radius:9px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.srch-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.srch-link{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:.12s}
.srch-link:hover{border-color:#7fa8e6;box-shadow:0 3px 12px rgba(15,28,63,.07)}
.srch-top{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--mut);flex-wrap:wrap}
.srch-ref{font-weight:700;color:#2456a6}
.srch-proj{color:#fff;font-weight:700;padding:1px 8px;border-radius:8px;font-size:10.5px}
.srch-date{margin-left:auto}
.srch-title{font-size:15px;font-weight:700;color:var(--ink);margin:6px 0 3px;line-height:1.3}
.srch-snip{font-size:13px;color:#4a5566;line-height:1.5}
.srch-src{font-weight:700;color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.3px}

/* === Vaste itemweergave (item.php) === */
.item-panel .item-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.item-status{font-size:11px;font-weight:700;padding:2px 9px;border-radius:9px;background:#eef0f4;color:#5a6677}
.item-status.is-go{background:#e6f4ea;color:#1f7a34}.item-status.is-no{background:#fbe9e9;color:#b23030}.item-status.is-open{background:#fff3e0;color:#a05a00}
.item-title{font-size:20px;font-weight:700;color:var(--ink);margin:9px 0 3px;line-height:1.3}
.item-meta{font-size:12px;color:var(--mut);margin-bottom:10px}
.item-detail{margin:0 0 12px}
.item-thread{margin-top:4px}
.item-foot{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.item-foot a{color:#2456a6;text-decoration:none}.item-foot a:hover{text-decoration:underline}
@media(max-width:560px){.jumpbox{margin-right:5px}.jumpbox .jb-in{width:42px;font-size:16px}.searchbox .sb-in{width:104px;font-size:16px}.searchbox{margin-right:5px}
  /* De zoekbalk staat niet tegen de rechterrand (# springveld + naam-menu ernaast) ->
     right:0 t.o.v. de smalle zoekbox schiet de dropdown links het scherm uit. Op mobiel
     daarom viewport-vast met vaste marges; top wordt door search_box_js() gezet. */
  .sb-drop{position:fixed;left:10px;right:10px;width:auto;max-width:none;max-height:min(70vh,480px)}
  /* iOS Safari zoomt de HELE pagina in zodra een input met font-size <16px focus krijgt
     (geen viewport-restrictie hier, terecht voor toegankelijkheid). Bij 13px zoomde de
     pagina dus bij elke tik op de zoekbalk -> leek "kapot"/niet mobile-friendly, los van
     de dropdown-positionering hierboven. 16px voorkomt die auto-zoom. */
}

/* === Mobiel: actie-/activiteitenregels volledig leesbaar (14 jun) ===
   De inklapbare samenvattingsregels (to-do's, reminders, recente activiteit,
   activiteitenlog) kapten hun titel af op één regel met "…". Op smalle schermen
   bleef daardoor maar een halve titel over -> "veel acties niet leesbaar".
   Op mobiel laten we de titel netjes over max. 2 regels lopen i.p.v. afkappen. */
@media(max-width:560px){
  /* Paul (mobiel): de titel werd op 2 regels afgekapt -> "ik kan de task niet zien".
     Op de telefoon nu de VOLLEDIGE titel tonen (geen afkapping), zodat een to-do/
     reminder/activiteit helemaal leesbaar is. */
  .todo-rowtitle,.act-rowtitle,.rem-row .rem-title,
  .alog-title,.alog-ghead .alog-title{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.32;
  }
  /* Omschrijving-voorvertoning onder de ingeklapte to-do-rij: op mobiel zie je zo
     meteen de toelichting zonder eerst open te hoeven klappen. */
  .todo-rowdesc{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:12.5px;
    color:#6b7684;
    line-height:1.42;
    padding:0 4px 10px 23px;
    margin-top:-5px;
  }
  /* regels bovenaan uitlijnen zodat dot/badge/tijd naast een 2-regelige titel
     netjes blijven staan i.p.v. verticaal gecentreerd weg te zakken */
  .todo-row,.act-row,.rem-row,.alog-item,.alog-ghead{align-items:flex-start}
  .todo-dot,.act-row .act-dot{margin-top:5px}
  .todo-rowmeta,.act-rowmeta,.rem-row .rem-when,
  .alog-actor,.alog-ago,.alog-ref,.alog-count,.alog-caret,.rem-caret{margin-top:2px}
  /* Reminder-rij op mobiel (Paul): "wie · wanneer" (bv. "Claude · 13 dagen geleden")
     staat nowrap op DEZELFDE regel als de titel en kneep die in een smalle kolom ->
     lange reminder-titels waren niet volledig te lezen. Nu zakt de meta naar een
     eigen regel eronder, zodat de titel de VOLLE schermbreedte krijgt en altijd
     helemaal leesbaar is. */
  .rem-row{flex-wrap:wrap}
  .rem-row .rem-title{flex:1 1 auto;min-width:0}
  .rem-row .rem-when{flex-basis:100%;width:100%;order:3;white-space:normal;margin:3px 0 0 20px}
  /* === Uitgeklapte status-balk (activiteitenlog) op mobiel (16 jun) ===
     Paul: op de telefoon was de "status-openklap" (▾ op de Claude-statusbalk ->
     activiteitenlog) niet goed leesbaar. Elke regel stond als één horizontale
     flex-rij (projectlabel · #ref · titel · status-badge · wie · wanneer); de
     titel werd platgeknepen en alle chips plakten tegen elkaar. Nu breekt de rij
     netjes af: de titel krijgt de VOLLE breedte op een eigen regel, met de
     project-/#ref-chips erboven en status/wie/wanneer eronder. */
  .activitylog .alog-item,.activitylog .alog-ghead{flex-wrap:wrap;row-gap:4px;column-gap:7px}
  .alog-item .alog-title,.alog-ghead .alog-title{flex:1 1 100%}
}

/* === Mobiel-hardening (14 jun, vervolg) ===
   Voorkom dat brede onderdelen de pagina horizontaal laten "uitlopen" op een telefoon. */
@media(max-width:560px){
  /* nooit zijwaarts scrollen door één breed element */
  html,body{overflow-x:hidden}
  .wrap{padding:16px 13px 44px}
  /* === Mobiele header netjes (15 jun) ===
     Op de telefoon was het "Arimpex Insights"-logo te groot en liep de
     bedieningsbalk (zoek, #-sprong, naam, rol, uitloggen) er dwars overheen.
     Nu: een compacter logo op regel 1 en de bediening rechts-uitgelijnd op een
     eigen regel eronder, netjes afbrekend i.p.v. overlappend. */
  .topbar{padding:11px 14px;flex-wrap:wrap;row-gap:9px}
  .brand{font-size:15px;gap:7px}
  .brandmark{width:19px;height:19px}
  .who{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:7px 9px;font-size:12px}
  .who a{margin-left:0}
  .who .rolepill{margin-left:0}
  /* brede cijfer-tabellen (items.php) scrollen binnen hun eigen kader i.p.v. de layout te breken */
  table.items{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  /* server-gezondheid (servers.php): 5-koloms tabel scrollt binnen het paneel i.p.v. afgekapt te worden */
  table.sh{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.sh th{white-space:nowrap}
  /* uitklap-lijst met sites niet breder dan het scherm */
  .wp-list{max-width:none;min-width:240px}
  .sh-legend{gap:10px;font-size:12px}
  /* snel-toevoegen-balk: invoer over de volle breedte, knop eronder (geen propvolle regel) */
  .rem-add input[type=text]{flex:1 1 100%}
  .rem-add textarea.qa-title{flex:1 1 100%}
  .rem-add button{flex:1 1 100%;padding:10px 16px}
  /* aanmaak-/reactie-formulieren niet buiten beeld duwen */
  .edit-form,.cmt-form{max-width:100%}
  .klant-zoek{max-width:100%}
  /* actie-knoppen onder een to-do mogen netjes afbreken i.p.v. overlopen */
  .todo-act,.appr,.todo-act.dual{flex-wrap:wrap}
}

/* === Mobiel: status-/voortgangsregels leesbaar (15 jun) ===
   Paul: op mobiel kapte de statusregel ("Claude is bezig") de taaktekst af en
   sprong meteen naar het percentage + de voortgangsbalk. Wens: de BALK weg,
   het PERCENTAGE laten staan, en de TAAK(tekst) horizontaal laten scrollen
   i.p.v. afkappen met "…". */
@media(max-width:560px){
  /* live agent-statusbalk: balkje weg, % blijft */
  .agentpct-bar{display:none}
  .agentpct{gap:0}
  /* zelfde voortgangsbalkje op de actieve "🔄 Claude is bezig"-to-do: balk weg, % blijft
     (scoped op .todo-working zodat de token-grafiek-staafjes .tw-bar onaangeroerd blijven) */
  .todo-working .tw-bar{display:none}
  /* de taaktekst horizontaal laten scrollen i.p.v. met "…" af te kappen */
  .agentbar .agentmsg{
    overflow-x:auto;
    overflow-y:hidden;
    text-overflow:clip;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .agentbar .agentmsg::-webkit-scrollbar{display:none}
}

/* Web-push aan/uit-knop (homepage, boven Reminders) */
.pushbox{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.push-btn{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s}
.push-btn:hover{border-color:#7fa8e6;background:#f3f7fe}
.push-btn.on{background:#eaf4ec;border-color:#9ccfa8;color:#1f6b34}
.push-test{background:none;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;color:#6b7686;cursor:pointer}
.push-test:hover{border-color:#7fa8e6;color:var(--ink)}
.push-state{font-size:12.5px;color:var(--mut)}

/* ===== Skippertje blog-review-paneel (project.php?p=skippertje) ===== */
.blog-panel .blog-sec{margin:6px 0 4px}
.blog-sub{font-size:13.5px;font-weight:700;color:var(--navy);margin:14px 0 8px}
.blog-sub-toggle{cursor:pointer;list-style:none}
.blog-sub-toggle::-webkit-details-marker{display:none}
.blog-done summary:before{content:'▸ ';color:var(--mut)}
.blog-done[open] summary:before{content:'▾ '}
.blog-done{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.blogcard{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin:8px 0}
.blogcard-needs_changes{border-color:#fcd34d;background:#fffdf5}
.blogcard-publish_requested{border-color:#bfdbfe;background:#f5f9ff}
.blogcard-published{background:#f7faf7}
.bc-thumb{flex:0 0 92px}
.bc-thumb img{width:92px;height:58px;object-fit:cover;border-radius:7px;display:block}
.bc-body{flex:1;min-width:0}
.bc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bc-title{font-weight:600;color:var(--ink);font-size:14px}
.bc-cat{font-size:11px;background:#eef2f8;color:#4a5a72;border-radius:999px;padding:2px 9px}
.bc-status{font-size:12px;color:var(--mut);margin:3px 0}
.bc-note{font-size:12px;color:#92400e;background:#fef3c7;border-radius:7px;padding:5px 9px;margin:4px 0}
.bc-live a{font-size:12.5px;color:#15803d;font-weight:600;text-decoration:none}
.bc-actions{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-top:7px}
.bc-btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;border-radius:8px;padding:7px 13px;text-decoration:none;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.bc-view{background:#fff;color:var(--navy)}
.bc-pub{background:#15803d;color:#fff;border-color:#15803d}
.bc-pub:hover{background:#126a33}
.bc-edit{background:#fff;color:#92400e;border-color:#fcd34d}
.bc-pubform{margin:0}
.bc-chg{margin:0}
.bc-chg summary{list-style:none}
.bc-chg summary::-webkit-details-marker{display:none}
.bc-chgform{display:flex;flex-direction:column;gap:6px;margin-top:7px;width:100%;max-width:420px}
.bc-chgform textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;font-size:13px;resize:vertical}
.bc-edit2{background:var(--navy);color:#fff;border-color:var(--navy);align-self:flex-start}
.bc-pending{font-size:12px;color:#1d4ed8}
@media(max-width:560px){.bc-thumb{flex-basis:72px}.bc-thumb img{width:72px;height:46px}}

/* ===== Context-veld op repeterende taken (recur.php) ===== */
.recur-context .recur-ctx-hint{color:var(--mut);font-size:12.5px;margin:0 0 10px}
.recur-ctx-ta{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;font-size:13.5px;color:var(--ink);resize:vertical;line-height:1.5}
.recur-ctx-ta:focus{outline:none;border-color:var(--navy)}
.recur-ctx-row{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}
.recur-context .btn{background:var(--navy);color:#fff;border:0;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer}
.recur-context .btn:hover{background:#16264f}
.recur-ctx-meta{color:var(--mut);font-size:12px}
.recur-ctx-view{white-space:normal;color:var(--ink);font-size:13.5px;line-height:1.55;background:#f7f9fc;border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.recur-ctx-review{margin-top:12px;background:#f3f8f4;border:1px solid #cfe6d4;border-left:3px solid #2f9e44;border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.55;color:var(--ink)}
.recur-ctx-review.pending{background:#fbf6ec;border-color:#ecd9b2;border-left-color:#e8a33d;color:var(--mut)}
.recur-ctx-revlabel{display:block;font-weight:600;font-size:12px;margin-bottom:4px;color:#2f7a3d}
.recur-ctx-review.pending .recur-ctx-revlabel{color:#b07d1f}
.recur-ctx-revbody{white-space:normal}
.recur-ctx-review .recur-ctx-meta{margin-top:6px}
.login-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);margin:2px 0 12px;cursor:pointer}
.login-remember input{width:16px;height:16px;accent-color:#3a7bd5;cursor:pointer}
/* Afdwaal-signaal op threads: 1-tik-kaartje "ander onderwerp, nieuw topic?" (propose-only) */
.offtopic-card{margin:10px 0 4px;padding:10px 12px;border:1px solid #e2c88a;border-left:4px solid #d99a2b;background:#fdf7ea;border-radius:9px}
.offtopic-h{font-size:13px;color:#6b4e12}
.offtopic-h b{color:#8a5a00}
.offtopic-sug{margin:6px 0 8px;font-size:13px;color:#52606d}
.offtopic-title{font-weight:700;color:var(--ink)}
.offtopic-btns{display:flex;gap:8px;flex-wrap:wrap}
.offtopic-f{margin:0}
.offtopic-yes,.offtopic-no{border:0;border-radius:7px;font:inherit;font-size:12px;font-weight:700;padding:6px 12px;cursor:pointer}
.offtopic-yes{background:#1f9d57;color:#fff}
.offtopic-yes:hover{background:#188045}
.offtopic-no{background:#eef1f5;color:#3a4552}
.offtopic-no:hover{background:#e0e5ec}
.offtopic-note{margin-top:7px;font-size:11px;color:#9aa4b0}
.offtopic-done{margin:10px 0 4px;padding:8px 11px;border-radius:8px;background:#eef7f1;border:1px solid #cfe8d9;font-size:12px;color:#2c6b48}
.offtopic-done a{color:#1f7a4d;font-weight:700}
/* Opruim-radar-pagina */
.opr-row{display:flex;align-items:flex-start;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.opr-n{flex:0 0 auto;min-width:52px;text-align:center;background:#fdf1dd;border:1px solid #e6c88f;border-radius:8px;padding:5px 6px}
.opr-n b{display:block;font-size:16px;color:#b0700d;line-height:1}
.opr-n span{font-size:10px;color:#96690f}
.opr-main{flex:1;min-width:0}
.opr-title{font-weight:600}
.opr-title a{color:var(--ink)}
.opr-meta{font-size:12px;color:var(--mut);margin-top:2px}
.opr-split{font-size:12px;margin-top:4px;color:#52606d}
.opr-split b{color:var(--ink)}