/* ================= Libraries: de knop in de kiezer en Toegang per account (planner/libraries.js) =================
   Alleen eigenaren zien dit. Alles hangt aan de tokens van planner/stijl.css; voorvoegsel wklib-. */

/* ---------- de knop naast het zoekveld ---------- */
html.wk-p32d .p32dkop>.wklib-knop{flex:0 0 auto}
.wklib-knop{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px 0 11px;border:1px solid var(--line);
  border-radius:var(--rond-vol);background:#fff;color:var(--ink);font:inherit;font-size:var(--tekst-m);font-weight:600;white-space:nowrap;cursor:pointer}
.wklib-knop svg{flex:0 0 16px;color:var(--mid)}
.wklib-knop svg:last-child{width:14px;height:14px}
.wklib-knop.deels{border-color:var(--wk);background:var(--wk-soft);color:var(--wk-ink)}
.wklib-knop.deels svg{color:var(--wk-ink)}
@media (hover:hover){ .wklib-knop:hover{border-color:#B5C0BB} }
.wklib-knop:focus-visible{outline:2px solid var(--wk);outline-offset:2px}
@media (max-width:600px){
  html.wk-p32d .p32dkop>.wklib-knop{order:-1;margin:0 0 6px 12px}
  .wklib-knoptekst{max-width:140px;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- het menu ---------- */
.wklib-menu{position:fixed;z-index:120;padding:14px;border:1px solid var(--line);border-radius:var(--rond-l);background:#fff;
  box-shadow:var(--schaduw-3);font-size:var(--tekst-m);color:var(--ink)}
.wklib-menu[hidden]{display:none}
.wklib-menukop{margin:0 0 10px;font-size:var(--tekst-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mid)}
.wklib-libs{display:grid;gap:6px}
.wklib-lib{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);
  border-radius:var(--rond-m);cursor:pointer}
.wklib-lib:has(input:checked){border-color:var(--wk);background:var(--wk-soft)}
.wklib-lib input{width:18px;height:18px;margin:0;accent-color:var(--wk)}
.wklib-libtt{display:flex;flex-direction:column;min-width:0}
.wklib-libnm{font-weight:700}
.wklib-libsb{font-size:var(--tekst-s);color:var(--mid);line-height:1.35}
.wklib-libn{font-size:var(--tekst-s);font-weight:600;color:var(--mid);font-variant-numeric:tabular-nums}
.wklib-menunoot{margin:10px 2px 12px;font-size:var(--tekst-s);color:var(--mid);line-height:1.4}
.wklib-menuknop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:38px;border:0;border-radius:var(--rond-m);
  background:var(--ink);color:#fff;font:inherit;font-size:var(--tekst-m);font-weight:600;cursor:pointer}
.wklib-menuknop:focus-visible{outline:2px solid var(--wk);outline-offset:2px}

/* ---------- Toegang per account ---------- */
html.wklib-open{overflow:hidden}
.wklib-beheer{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(30,41,59,.5);
  font:14px/1.45 -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink)}
.wklib-beheer[hidden]{display:none}
.wklib-beheer *{box-sizing:border-box}
.wklib-doos{position:relative;display:flex;flex-direction:column;width:100%;max-width:960px;height:100%;max-height:880px;overflow:hidden;
  background:#fff;border-radius:var(--rond-xl);box-shadow:var(--schaduw-4)}
.wklib-kop{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 18px 16px 26px;border-bottom:1px solid var(--line)}
.wklib-kop h1{margin:0;font-size:var(--tekst-3xl);font-weight:700;line-height:1.25}
.wklib-kop p{margin:3px 0 0;font-size:var(--tekst-m);color:var(--mid)}
.wklib-dicht{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.wklib-dicht svg{width:18px;height:18px}
.wklib-lijf{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 26px 26px}
.wklib-status{flex:0 0 auto;margin:0;padding:10px 26px;border-top:1px solid var(--line);font-size:var(--tekst-m);color:var(--mid);min-height:42px}
.wklib-status:empty{display:none}
.wklib-status.fout{color:#9B2C1F;background:#FDF1EE}
.wklib-laadt,.wklib-leeg{margin:14px 0;color:var(--mid)}

.wklib-melding{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border-radius:var(--rond-m);background:#FFF6E8;color:#6B420C;
  font-size:var(--tekst-m);line-height:1.45}
.wklib-melding.fout{background:#FDF1EE;color:#7E2418}
.wklib-melding svg{flex:0 0 16px;margin-top:2px}
.wklib-melding code{font-size:.92em;background:rgba(0,0,0,.05);padding:1px 4px;border-radius:4px}

.wklib-blok{margin:0 0 26px}
.wklib-blokkop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.wklib-blokkop h2{margin:0;font-size:var(--tekst-s);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mid)}
.wklib-blokkop h2 span{margin-left:4px;font-variant-numeric:tabular-nums}
.wklib-zoek{flex:0 1 280px;min-width:0;min-height:36px;padding:7px 13px;border:1px solid var(--line);border-radius:var(--rond-vol);font:inherit;font-size:var(--tekst-m)}
.wklib-zoek:focus{border-color:var(--wk);outline:none;box-shadow:0 0 0 3px var(--wk-zacht)}
.wklib-hint{margin:0 0 10px;font-size:var(--tekst-m);color:var(--mid);line-height:1.45}
.wklib-noot{display:flex;gap:8px;align-items:flex-start;margin:8px 2px 0;font-size:var(--tekst-s);color:#7A4B0E;line-height:1.45}
.wklib-noot svg{flex:0 0 14px;width:14px;height:14px;margin-top:2px}

.wklib-lijst{border:1px solid var(--line);border-radius:var(--rond-l);overflow:hidden}
.wklib-rij{display:grid;grid-template-columns:minmax(0,1fr) auto 150px;align-items:center;gap:14px;padding:10px 14px}
.wklib-lijst .wklib-rij+.wklib-rij{border-top:1px solid var(--line)}
.wklib-blok>.wklib-rij{border:1px solid var(--line);border-radius:var(--rond-l);margin-bottom:8px}
.wklib-ster{background:var(--bg)}
.wklib-wie{display:flex;flex-direction:column;min-width:0}
.wklib-wie b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wklib-wie span{font-size:var(--tekst-s);color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wklib-vinkjes{display:flex;gap:6px;flex-wrap:wrap}
.wklib-vink{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px 0 9px;border:1px solid var(--line);border-radius:var(--rond-vol);
  background:#fff;font-size:var(--tekst-m);font-weight:600;cursor:pointer;user-select:none}
.wklib-vink:has(input:checked){border-color:var(--wk);background:var(--wk-soft);color:var(--wk-ink)}
.wklib-vink:has(input:disabled){opacity:.55;cursor:not-allowed}
.wklib-vink input{width:15px;height:15px;margin:0;accent-color:var(--wk)}
.wklib-actie{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.wklib-bron{font-size:var(--tekst-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mid);white-space:nowrap}
.wklib-bron.eigen{color:var(--wk-ink)}
.wklib-link{border:0;background:none;padding:4px 2px;color:var(--wk-ink);font:inherit;font-size:var(--tekst-s);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.wklib-nieuw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--rond-l)}
.wklib-nieuw input[type=text]{flex:1 1 220px;min-width:0;min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--rond-m);font:inherit;font-size:var(--tekst-m)}
.wklib-nieuw input[type=text]:focus{border-color:var(--wk);outline:none;box-shadow:0 0 0 3px var(--wk-zacht)}
.wklib-knop2{height:36px;padding:0 16px;border:0;border-radius:var(--rond-m);background:var(--vensterknop);color:#fff;font:inherit;font-size:var(--tekst-m);font-weight:600;cursor:pointer}
.wklib-knop2:disabled{opacity:.5;cursor:not-allowed}

@media (max-width:760px){
  .wklib-beheer{padding:0}
  .wklib-doos{max-height:none;border-radius:0}
  .wklib-kop{padding:14px 12px 12px 16px}
  .wklib-kop h1{font-size:var(--tekst-2xl)}
  .wklib-lijf{padding:14px 16px 22px}
  .wklib-status{padding:10px 16px}
  .wklib-rij{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  .wklib-vinkjes{grid-column:1 / -1;grid-row:2}
  .wklib-actie{grid-column:2;grid-row:1}
  .wklib-zoek{flex:1 1 100%}
}