/* DE TAKENLIJST IN DE BALK (Mijn winkel, fase 4, 12-10-2026) — de CSS van docs/ontwerp/mijn-winkel/02-takenlijst-balk.html, klasse
   voor klasse overgenomen met het voorvoegsel tk-. Knop in de kopbalk naast de bel, paneel eronder (z-index 70 net als de bel), op een
   smal scherm over de breedte. Waarden (kleuren, afstanden, radius) zijn die van het ontwerp. */
.tk-wrap{ position:relative; display:flex; align-items:center }
.tk-knop{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#17223A; border:0; border-radius:10px; padding:0 14px; height:38px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit }
.tk-knop[aria-expanded="true"]{ box-shadow:0 0 0 3px rgba(255,255,255,.35) }
.tk-knop:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.tk-teller{ background:#fff; color:#2864AE; border-radius:999px; padding:1px 7px; font-size:12px }
.tk-knop .tk-teller[hidden]{ display:none }
/* een lichte kopbalk (Instellingen › Geavanceerd): de knop is dan vol blauw */
.kop-licht .tk-knop{ background:#2864AE; color:#fff } .kop-licht .tk-teller{ background:#fff; color:#2864AE }
.tk-paneel{ position:absolute; top:calc(100% + 10px); right:0; width:520px; max-width:calc(100vw - 20px); background:#fff; color:#17223A; border-radius:16px; box-shadow:0 12px 40px rgba(20,30,60,.22); display:flex; flex-direction:column; overflow:hidden; z-index:70; font-size:13px; line-height:1.4 }
.tk-paneel[hidden]{ display:none }
.tk-k{ font-size:12px; color:#5D6675 }
.tk-kop{ display:flex; align-items:center; gap:10px; padding:14px 18px 10px }
.tk-kop-titel{ font-weight:700; font-size:15px; flex:1 }
.tk-form{ display:flex; gap:8px; padding:0 18px 12px }
.tk-form input{ flex:1; border:1px solid #e3e4e6; border-radius:6px; padding:9px 12px; font-size:13px; min-height:40px; box-sizing:border-box; font-family:inherit; color:#17223A; background:#fff }
.tk-lijst{ max-height:600px; overflow:auto }
.tk-groep{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5D6675; padding:14px 18px 6px }
.tk-rij{ display:flex; align-items:flex-start; gap:12px; padding:10px 18px; border-top:1px solid #EEF0F5 }
.tk-rij.gedaan{ opacity:.55 }
.tk-vink{ width:22px; height:22px; border:2px solid #B8BECC; border-radius:6px; background:#fff; flex:none; margin-top:1px; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center }
.tk-vink:focus-visible{ outline:2px solid #2864AE; outline-offset:2px }
.tk-vink.aan{ background:#2864AE; border-color:#2864AE }
.tk-vink[disabled]{ cursor:default }
.tk-bron{ display:inline-block; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:600; background:#EAF1FA; color:#2864AE }
.tk-bron.ad{ background:#FBF1DF; color:#8A5A0E } .tk-bron.wb{ background:#E9E6FB; color:#4C3BB3 } .tk-bron.eigen{ background:#E6E9F0; color:#3C4559 }
.tk-knop-actie{ border:1px solid #2864AE; background:#2864AE; border-radius:5px; padding:6px 12px; font-size:12px; font-weight:600; color:#fff; cursor:pointer; white-space:nowrap; min-height:34px; display:inline-flex; align-items:center; text-decoration:none; font-family:inherit }
.tk-knop-actie:hover{ background:#1E4F8C; border-color:#1E4F8C; color:#fff }
.tk-knop-actie:focus-visible{ outline:2px solid #17223A; outline-offset:2px }
.tk-knop-wit{ background:#fff; color:#2864AE } .tk-knop-wit:hover{ background:#EAF1FA; color:#2864AE }
.tk-voet{ padding:10px 18px 14px; border-top:1px solid #EEF0F5 }
.tk-leeg{ padding:20px 18px; color:#5D6675 }
.tk-snooze{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:0 18px 10px 52px }
.tk-snooze input{ border:1px solid #e3e4e6; border-radius:6px; padding:5px 8px; font-size:12px }
@media (max-width:620px){ .tk-paneel{ position:fixed; top:64px; left:10px; right:10px; width:auto; max-width:none } .tk-wrap{ position:static } }
/* smal scherm: de knop toont alleen het pictogram en de teller (de naam staat in aria-label), anders loopt de kopbalk op 375 px 2-40 px over (tests/smal-scherm-375.test.js) */
@media (max-width:620px){ .tk-knop{ font-size:0; gap:6px; padding:0 10px } .tk-knop .tk-teller{ font-size:var(--tekst-bijschrift) } }