: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}
/* Merkblok van een klant-hostnaam (bv. insight.degroot.nu): wit tegeltje met het eigen
   merkteken van de klant + de naam in wit. Het echte logo is navy-op-wit, dus het tegeltje
   houdt die verhouding intact op de navy topbar - zonder tegel zou het merkteken wegvallen. */
.brand-klant a{gap:10px;font-size:17px;letter-spacing:-.2px}
.brandtile{flex:none;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:5px;padding:5px 6px}
.brandtile img{display:block;height:26px;width:auto}
/* De maat staat OOK inline op de img (zie env_brand_html): een gecachte style.css mag het
   merkteken nooit op zijn eigen 286x156 laten renderen. Daarom hier een vaste 26px en geen
   afwijkende mobiele hoogte meer - inline zou die toch overrulen. */
@media(max-width:560px){.brand-klant a{font-size:15px}}

.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}
/* Profielrondje (9 sep 2026, #13908, Paul: "Profiel rondje ipv gehele naam"): staat altijd in de
   DOM maar is standaard onzichtbaar - alleen op mobiel (zie media-query) vervangt het de volle
   naam. Desktop toont zoals altijd de volle naam, hier verandert niets. */
.who-avatar{display:none;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:#2e5aa8;color:#fff;font-size:11px;font-weight:700;line-height:1;flex:none}
.klantbar .who-avatar{background:var(--kl,#116D98)}
.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}
/* Uitloggen als laatste, los van de secties (9 sep 2026, #13908, Paul: "uitloggen als laatste
   onder de naam"). */
.who-pop a.who-logout{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 7px 7px;color:#b4231f}
.who-pop a.who-logout:hover{background:#fdecec}
/* Sectiekopjes zijn nu <details> i.p.v. een platte kop, zodat een categorie dichtgeklapt kan
   staan (9 sep 2026, #13908, Paul: "het hele menu is trouwens te lang op mobiel"). Overzichten
   staat standaard open (who_name_link), de rest klap je zelf open - geldt op elk scherm. */
.who-pop details.who-cat{margin:0}
.who-pop summary.who-sec{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.who-pop summary.who-sec::-webkit-details-marker{display:none}
.who-pop summary.who-sec::after{content:'▸';font-size:9px;opacity:.6}
.who-pop details.who-cat[open]>summary.who-sec::after{content:'▾'}
/* Merkbalk van een klantomgeving (klant_skin_bar). Die balk is WIT, de gewone topbar is donker.
   Zonder deze regels houdt de naam in het menu de topbar-kleur #eaf0fa en staat hij bijna wit op
   wit (contrast ~1,1:1, dus onleesbaar) - precies wat Paul meldde in #13838, 9 sep 2026: "de naam
   van Egon in de header is niet duidelijk". Bewust op .klantbar en NIET op body.klantskin: een
   omgeving kan wel een merkbalk hebben zonder eigen stylesheet (en /uitvoer.php laadde die tot
   vandaag niet eens), en dan moet de naam nog steeds leesbaar zijn. De huisstijl van een klant
   mag dit overschrijven; zijn stylesheet wordt na deze geladen. */
.klantbar .kb-who{display:flex;align-items:center;gap:12px;color:#5b6478}
/* who_name_link() zet de belletjes VOOR de naam; in deze balk staat daar nu ook het bijschrift
   "Ingelogd als". Zonder deze regel komt dat bijschrift links van de belletjes te staan en hoort
   het nergens meer bij. De belletjes schuiven dus naar voren, het bijschrift blijft tegen de
   naam aan. */
.klantbar .kb-who .bellen{order:-1}
.klantbar .kb-wie{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:#5b6478;margin-right:-6px}
.klantbar .who-menu summary.who-name,.klantbar .who a.who-name{color:#21253e;border-bottom-color:rgba(33,37,62,.4)}
.klantbar .who-menu summary.who-name:hover,.klantbar .who a.who-name:hover{border-bottom-color:#21253e}
.klantbar .who-caret{opacity:.55}
@media(max-width:560px){.klantbar .kb-wie{display:none}}
.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}
/* Belletjes naast de naam: systeemberichten + taakberichten (9 sep 2026, Paul).
   Pure <details>, net als het naam-menu; het bolletje is het enige dat JS nodig heeft. */
.bellen{display:inline-flex;align-items:center;gap:4px;margin-right:9px;vertical-align:middle}
.bel{position:relative;display:inline-block}
.bel summary.bel-knop{display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:30px;height:30px;border-radius:9px;cursor:pointer;list-style:none;user-select:none;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);line-height:1}
.bel summary.bel-knop:hover{background:rgba(255,255,255,.20)}
.bel summary::-webkit-details-marker{display:none}
.bel summary.bel-nieuw{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.34)}
.bel-ico{font-size:14px;filter:saturate(1.1)}
.bel-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#e0483c;color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px rgba(11,29,56,.9)}
.bel-pop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 10px 30px rgba(20,30,55,.22);width:360px;max-width:calc(100vw - 24px);
  padding:8px;z-index:70;max-height:calc(100vh - 100px);overflow-y:auto}
.bel-kop{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:800;color:var(--ink);
  padding:7px 10px 9px;border-bottom:1px solid var(--line);margin-bottom:5px}
.bel-sub{font-size:11px;font-weight:500;color:var(--mut)}
.bel-lijst{display:flex;flex-direction:column}
.bel-r{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
a.bel-r:hover{background:#f1f5fb}
.bel-r-ico{font-size:14px;line-height:1.35;flex:none}
.bel-r-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.bel-r-tekst b{font-size:13px;font-weight:700;line-height:1.35;word-break:break-word}
.bel-r-sub{font-size:11.5px;color:#5a6675;line-height:1.4}
.bel-r-ts{font-size:10.5px;color:#96a0ae}
.bel-leeg{padding:14px 10px;font-size:12.5px;color:var(--mut)}
.bel-alles{display:block;margin-top:5px;padding:9px 10px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:#0b2e6b;text-decoration:none}
.bel-alles:hover{background:#f1f5fb;border-radius:0 0 8px 8px}
@media(max-width:640px){.bel-pop{position:fixed;right:10px;left:10px;width:auto;top:56px}}
.bellen a.im-envelop{display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:30px;height:30px;border-radius:9px;text-decoration:none;line-height:1;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}
.bellen a.im-envelop:hover{background:rgba(255,255,255,.20)}
/* Onboarding-icoontje naast de naam (9 sep 2026, Paul: "een onboarding icoontje die blijft staan").
   Zelfde opmaak als de belletjes ervoor; .ob-af (compleet) is subtieler dan .ob-open (nog werk). */
.bellen a.ob-bel{display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:30px;height:30px;border-radius:9px;text-decoration:none;line-height:1;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}
.bellen a.ob-bel:hover{background:rgba(255,255,255,.20)}
.bellen a.ob-bel.ob-af{opacity:.55}
.ob-bel .ob-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#d9822b;color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px rgba(11,29,56,.9)}

.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}
/* Herhaal-badge (#13208 punt 1): dit item is N keer opnieuw gemeld i.p.v. N keer opnieuw gemaakt. */
.rep-badge{flex:none;font-size:.7rem;font-weight:700;color:#7a5a12;background:#fdf4e0;border:1px solid #f0dcae;border-radius:999px;padding:2px 9px;white-space:nowrap;cursor:help}
/* 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;}
/* Insight-klanttegel met TWEE bestemmingen (9 sep 2026, Paul: "op alle insight klanten tegels
   bovenaan de mogelijkheid om direct naar het klanten dashboard te gaan"). Geneste <a>'s mogen
   niet, dus de tegel is een <div>: .pt-stretch ligt als onzichtbare link over de hele tegel
   (project), .pt-bord ligt daar met een hogere z-index bovenop (klantbord). */
.proj-tile.pt-dual{display:flex;flex-direction:column}
.pt-stretch{position:absolute;inset:0;z-index:2;border-radius:12px;text-decoration:none}
.pt-bord{position:relative;z-index:3;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  margin:0 0 7px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.5;
  text-decoration:none;background:#eef2fb;color:#24407e;border:1px solid #d5deef;white-space:nowrap}
.pt-bord:hover{background:#24407e;color:#fff;border-color:#24407e}
.proj-tile.pt-dual .proj-badge{z-index:3}

/* 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}
/* 📎 = er hangt een bijlage aan dit item (9 sep 2026, #13790). Amber, zelfde kleurtaal als het
   bijlageblok, zodat je in de lijst al ziet dat er een bestand bij zit. */
.thread-badge.att{color:#8a5a00;background:#fff2da;border:1px solid #f0d9a8}
.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}
/* Bijlage opvallender (9 sep 2026, #13790 - Jan zag de PDF onder zijn kaart niet staan):
   duidelijke kop met aantal, een 📎-knopje bovenaan de kaart en een meeloop-balk onderin. */
.att-chooser-h{font-size:13px;text-transform:none;letter-spacing:0;color:#8a5a00}
.att-jump{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#8a5a00;background:#fff2da;border:1px solid #f0d9a8;border-radius:7px;padding:2px 9px;text-decoration:none;white-space:nowrap}
.att-jump:hover{background:#ffe6bd;border-color:#e0be7a;color:#6d4600}
.attbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 14px;background:#fff7ec;border-top:1px solid #f0d9a8;box-shadow:0 -3px 12px rgba(0,0,0,.09)}
.attbar[hidden]{display:none}
.attbar-h{font-size:12.5px;font-weight:700;color:#8a5a00;text-decoration:none;white-space:nowrap}
.attbar-h:hover{text-decoration:underline}
.attbar-fs{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.attbar-f{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#fff;border:1px solid #f0d9a8;border-radius:7px;padding:4px 10px;font-size:12.5px;font-weight:600;color:#7a5300;text-decoration:none}
.attbar-f:hover{border-color:#c98a12;color:#a06d00}
.attbar-more{font-size:12px;color:var(--mut);align-self:center}
/* Mobiel (Paul, 9 sep 2026): op een telefoon werd de kopregel van het item te vol door het
   bijlage-knopje en dekte de meeloop-balk de onderkant van het scherm af. Beide daarom weg onder
   640px; het bijlageblok zelf onder de kaart blijft gewoon staan. Desktop verandert niet. */
@media(max-width:640px){.att-jump{display:none}.attbar{display:none}}
/* Een mp4-bijlage speelt in de kaart zelf (Paul, 9 sep 2026, #13807); staande films blijven
   smal, liggende films krijgen hun eigen verhouding - vandaar height:auto en geen vaste ratio. */
.att-vids{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.att-vid{display:block;width:100%;max-width:250px;height:auto;max-height:70vh;border-radius:10px;background:#000;border:1px solid var(--line)}
.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. */
  .brand{font-size:15px;gap:7px}
  .brandmark{width:19px;height:19px}
  .who a{margin-left:0}
  .who .rolepill{margin-left:0}
  /* Header ECHT naar 1 regel op mobiel (9 sep 2026, #13908 vervolg, Paul: "het moet ECHT naar 1
     regel. zoek in alle en nr mag dan wel op de tweede regel maar dat is het" - de eerdere versie
     zette het logo via flex-wrap nog op een eigen 1e regel, met belletjes+profielmenu op een 2e en
     zoek+#-sprong op een 3e = alsnog 3 regels). `.topbar` zelf is nu de grid: logo, belletjes en het
     profielmenu delen regel 1 (3 kolommen), zoek+#-sprong krijgen - alleen als ze er zijn - een
     volledig-breed regel 2 eronder. `.who` (de wrapper-div uit vier losse functies: search/jump-
     box/who_name_link/rolepill/logout) staat op `display:contents` zodat zijn kinderen rechtstreeks
     grid-items van `.topbar` worden en apart geplaatst kunnen worden - de wrapper zelf telt niet
     meer mee voor de layout. Rolpilletje en het losse "uitloggen"-knopje verdwijnen (uitloggen staat
     al onderaan het menu zelf, zie who_name_link()). `.topbar-proj` (projectnaam-chip, alleen op
     een handvol schermen) krijgt zijn eigen volledig-brede regel ertussenin; heeft een pagina 'm
     niet, dan blijft die regel leeg en neemt 0 hoogte in. Een pagina zonder zoek/#-sprong (de
     meeste) krijgt vanzelf geen regel voor die rij - blijft dus echt 1 regel. */
  .topbar{padding:11px 14px;display:grid;grid-template-columns:1fr auto auto;column-gap:8px;row-gap:6px;align-items:center}
  .brand{grid-column:1;grid-row:1;min-width:0}
  .topbar-proj{grid-column:1/-1;grid-row:2;max-width:none}
  .who{display:contents;font-size:12px}
  .who .rolepill,.who>a[href="/logout.php"]{display:none}
  /* Belletje/vinkje/verzendboek helemaal naar rechts, met een streepje tussen de icoontjes
     en het profielrondje (9 sep 2026, #13908, Paul: "Belletje, Vinkje en verzendboek mogen
     naar rechts met even een extra -- of iets tussen de P"). Ze STONDEN al in kolom 2, maar
     kolom 3 werd breed getrokken door het #-springveld op regel 2 -> de icoontjes eindigden
     op 275px terwijl de P op 342px stond: 67px lucht ertussen, alsof ze midden in de balk
     zweefden. Het springveld spant nu kolom 2+3 i.p.v. kolom 3 alleen, waardoor kolom 3 weer
     zo smal is als het profielrondje en de icoontjes er direct tegenaan komen te staan. */
  .who .bellen{grid-column:2;grid-row:1;justify-self:end;margin-right:0;
    padding-right:10px;border-right:1px solid rgba(255,255,255,.22)}
  .who .who-menu{grid-column:3;grid-row:1;justify-self:end}
  /* Zoekbalk en #-springveld even hoog (Paul: "# nr is hoog. waarom is dat?"). Oorzaak: de
     duimmaat-regel onderaan dit bestand geeft .jb-go min-height:44px, waardoor het hele
     #-kader 46px werd terwijl de zoekbalk ernaast op 30px bleef - het #-veld stak 8px boven
     de zoekbalk uit. Beide staan nu op precies 44px (de duimmaat), zodat ze gelijk lopen en
     ook de zoekbalk een fatsoenlijk tikdoel is. */
  .who .searchbox{grid-column:1;grid-row:3;width:100%;margin:0;min-height:44px;box-sizing:border-box}
  .who .searchbox .sb-in{width:100%}
  .who .jumpbox{grid-column:2/-1;grid-row:3;margin:0;min-height:44px;box-sizing:border-box}
  .who .jumpbox .jb-in{flex:1 1 auto;min-width:0}
  .who .jumpbox .jb-go{min-height:42px}
  /* Profielrondje i.p.v. volle naam (Paul: "Profiel rondje ipv gehele naam") */
  .who-avatar{display:inline-flex}
  .who-fulltext{display:none}
  /* 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)}

/* ==========================================================================
   MOBIEL EERST — duimbediening (#13208, tien-verbeteringenlijst punt 10, 7 sep)
   Gemeten op een echte iPhone-viewport (390x844, is_mobile, has_touch) op de
   drie drukste schermen. Drie soorten fouten kwamen eruit, alle drie hieronder
   gerepareerd. Bewust ALLEEN in een mobiele mediaquery: op een muisscherm
   verandert er geen pixel, en terugdraaien is dit blok weghalen.

   1. iOS zoomde bij elk tekstveld in. Safari zoomt automatisch in zodra een
      invoerveld kleiner dan 16px tekst heeft, en zoomt daarna NIET terug uit;
      de velden stonden op 12 t/m 14,4px. 24 velden op de homepage alleen al.
   2. Bedieningselementen liepen buiten beeld. De pagina zelf scrolt niet
      horizontaal (scrollWidth = 390), dus wat rechts buiten 390px valt is
      simpelweg afgesneden: de uitstel-keuzelijst (tot 498px), de
      moedertaak-keuzelijst (494px) en de knop Opslaan van het reactieveld.
   3. Tikdoelen te klein voor een duim. De richtlijn is 44px; de belangrijkste
      knop op de homepage (.appr-btn, 54 stuks) was 20 tot 29px hoog.
   ========================================================================== */
@media (max-width:560px){
  /* 1 — geen ongevraagde iOS-inzoom meer bij het typen */
  input[type=text],input[type=search],input[type=email],input[type=url],
  input[type=password],input[type=number],input[type=tel],input[type=date],
  input[type=time],input[type=datetime-local],textarea,select{font-size:16px}

  /* 2 — niets loopt nog buiten het scherm */
  input,textarea,select{max-width:100%}
  .defer-form{flex-wrap:wrap;max-width:100%}
  .defer-form select{max-width:100%;width:100%}
  .cmt-form{flex-wrap:wrap}
  .cmt-form textarea{flex:1 1 100%}
  .cmt-form .cmt-send{margin-left:auto}

  /* 3 — duimmaat op de knoppen die je onderweg echt gebruikt.
     Alleen echte knoppen/chips; losse tekstlinks in een lopende zin blijven
     tekstlinks, die zou 44px juist uit elkaar trekken. */
  .appr-btn,.cmt-send,.bc-btn,.md-doc,.dl-item,.tf-chip,.qa-sched-chip,
  .rem-add button.qa-more,.mic-btn,.topic-copy,.rem-toggle,.cfb-btn,
  .jumpbox .jb-go,.wa-copy,.wa-reply,.rc-btn{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .todo-act .appr-btn{line-height:1.2}
  /* genoeg lucht tussen twee knoppen zodat je er niet naast tikt */
  .todo-act,.offtopic-btns,.appr-row,.bc-btns{gap:8px;row-gap:8px}
}