@charset "UTF-8";
/* ==========================================================================
   Bankert Portal · work.css — module Werkzaamheden
   ========================================================================== */

.work-toolbar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.work-toolbar .search{width:min(320px,100%)}
.work-toolbar .filters button{border:1px solid transparent;background:none;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.work-toolbar .filters button.on{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.sortsel{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.sortsel select{min-height:34px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}

.projects{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.proj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.proj.finished{opacity:.75}
.proj-head{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(0,1.6fr) minmax(140px,.9fr) auto auto;align-items:center;gap:10px 16px;padding:14px 16px;cursor:pointer}
.proj-head:hover h3{color:var(--accent)}
.proj-title{min-width:0}
.proj-title h3{margin:0;font-size:21px;line-height:1.15;overflow-wrap:anywhere}
.proj-title small{color:var(--muted);font-size:13px}
.proj-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.proj-progress{display:grid;gap:3px}
.proj-progress .meter{margin-top:0}
.proj-progress small{color:var(--muted);font-size:12.5px}
.chev{color:var(--muted);display:grid;place-items:center;transition:transform .15s}
.proj.open .chev{transform:rotate(90deg)}
.who{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:2px 7px}
@media (max-width:820px){.proj-head{grid-template-columns:minmax(0,1fr) auto auto}.proj-meta,.proj-progress{grid-column:1/-1}}

.proj-body{padding:4px 16px 14px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.proj-body>.note{margin:10px 0 6px}
.task{display:grid;grid-template-columns:22px 78px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.task.st-gereed .task-text{color:var(--muted);text-decoration:line-through}
.status-btn{border:1px solid;border-radius:999px;font-size:12px;font-weight:700;padding:4px 0;cursor:pointer;width:100%;background:none}
.status-btn.st-open{color:var(--muted);border-color:var(--line-strong)}
.status-btn.st-bezig{color:var(--leave-fg);background:var(--leave-bg);border-color:color-mix(in srgb,var(--leave-edge) 50%,transparent)}
.status-btn.st-gereed{color:var(--ok);background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.status-btn:disabled{cursor:default}
.task-main{display:grid;gap:3px;min-width:0}
.task-text{overflow-wrap:anywhere;line-height:1.35}
.task-main small{color:var(--muted);font-size:13px}
.task-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.est{font-size:12px;color:var(--muted)}
.task-side{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.task{grid-template-columns:22px 70px minmax(0,1fr)}.task-side{grid-column:3;justify-content:flex-start}}
.addtask{display:flex;gap:8px;padding-top:10px}
.addtask input{flex:1;min-width:0;min-height:36px;padding:6px 10px;border:1px dashed var(--line-strong);border-radius:8px;background:var(--surface-2)}
.addtask input:focus{border-style:solid;outline:2px solid var(--brand-bright);outline-offset:0}
.proj-body .linkbtn{justify-self:start;padding:8px 0 0}

/* Werklijst-kiezer in de planning */
.pick-list{display:grid;gap:4px;max-height:min(60vh,560px);overflow-y:auto;margin:0 -4px;padding:0 4px}
.pick-list h4{margin:10px 0 2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pick-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;text-align:left;width:100%}
.pick-item:hover{border-color:var(--accent)}
.pick-item span{flex:1;min-width:0;overflow-wrap:anywhere}
.linked-task{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:var(--work-bg);color:var(--work-fg);font-size:14px}
.linked-task b{color:var(--ink)}
/* Meerdere werkpunten aanvinken en inplannen */
.task-sel{width:18px;height:18px;margin-top:8px;accent-color:var(--accent)}
.task.selected{background:var(--accent-soft)}
.sel-bar{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--accent);box-shadow:var(--shadow)}
.sel-bar b{flex:1}
.pick-check input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.pick-check.on{border-color:var(--accent);background:var(--accent-soft)}
.pick-check small{color:var(--muted)}
.multi-tasks{display:grid;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.multi-tasks legend{font-weight:600;padding:0 4px}
.multi-row{display:grid;grid-template-columns:48px minmax(0,1fr) 72px auto 32px;gap:8px;align-items:center}
.multi-row input{min-height:36px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);width:100%}
.multi-row .num{color:var(--muted);font-size:13px}