/* Task & Client Manager — Link AI.
   De mockup was donker, Mike wilde 'm wit. Alle kleuren staan daarom als variabele op
   :root; de donkere stand overschrijft alleen die variabelen en verder niets. */

:root {
  --paars: #6d3ff0;
  --paars-zacht: #f1ecfe;
  --inkt: #14121c;
  --grijs: #6b6878;
  --flauw: #9d9aa8;
  --lijn: #e8e6ee;
  --vlak: #ffffff;
  --achter: #f7f6fa;
  --rood: #d92d20;
  --oranje: #d97706;
  --groen: #128a52;
  --schaduw: 0 1px 2px rgb(20 18 28 / 6%), 0 8px 24px rgb(20 18 28 / 5%);
  --rond: 14px;
}
[data-thema="donker"] {
  --paars: #8b6bff;
  --paars-zacht: #241d3d;
  --inkt: #f3f2f7;
  --grijs: #a5a2b3;
  --flauw: #75727f;
  --lijn: #2a2734;
  --vlak: #1a1824;
  --achter: #100e18;
  --rood: #ff6b5e;
  --oranje: #f0a02a;
  --groen: #3ddc8a;
  --schaduw: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--achter); color: var(--inkt);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 86px;                 /* ruimte voor de vaste balk onderin */
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--paars); }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.verborgen { display: none !important; }

/* ── kop ───────────────────────────────────────────────────────────────── */
.kop {
  position: sticky; top: 0; z-index: 20; background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}
.kop__in { display: flex; align-items: center; gap: 12px; padding: 14px 16px; max-width: 720px; margin: 0 auto; }
.merk { display: flex; align-items: center; gap: 9px; }
.merk__driehoek { height: 26px; width: auto; }
.merk__woord { height: 13px; width: auto; }
/* Twee bestanden in plaats van een CSS-filter: omkeren maakte van het paarse "AI"
   geelgroen. De donkere versie licht alleen het grijs op en houdt het paars paars. */
.merk__woord--donker { display: none; }
[data-thema="donker"] .merk__woord--licht { display: none; }
[data-thema="donker"] .merk__woord--donker { display: block; }
.kop__rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icoonknop {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-size: 17px; color: var(--grijs);
}
.icoonknop:hover { background: var(--achter); color: var(--inkt); }
/* Twee letters in plaats van een teken: kleiner en vetter, anders loopt "EN" uit de knop. */
.icoonknop--taal { font-size: 12px; font-weight: 700; letter-spacing: .04em; }

/* ── dashboard ─────────────────────────────────────────────────────────── */
.groet { padding: 22px 0 4px; }
.groet h1 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.groet p { margin: 4px 0 0; color: var(--grijs); }

.voortgang { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 14px 16px; margin: 16px 0; box-shadow: var(--schaduw); }
.voortgang__rij { display: flex; justify-content: space-between; font-size: 13px; color: var(--grijs); margin-bottom: 9px; }
.voortgang__rij b { color: var(--inkt); }
.balk { height: 7px; border-radius: 99px; background: var(--lijn); overflow: hidden; }
.balk i { display: block; height: 100%; background: var(--paars); border-radius: 99px; transition: width .4s cubic-bezier(.4,0,.2,1); }

.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 26px; }
.tegel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 14px; box-shadow: var(--schaduw); }
.tegel b { display: block; font-size: 24px; letter-spacing: -.03em; line-height: 1.1; }
.tegel span { font-size: 12px; line-height: 1.35; color: var(--grijs); display: block; margin-top: 2px; }
.tegel--hoog b { color: var(--rood); }

h2.sectie { font-size: 14px; margin: 24px 0 10px; display: flex; align-items: center; gap: 7px; }
h2.sectie em { font-style: normal; color: var(--flauw); font-weight: 400; }


/* ── klanten ───────────────────────────────────────────────────────────── */
.zoek {
  width: 100%; padding: 12px 14px; border-radius: var(--rond);
  border: 1px solid var(--lijn); background: var(--vlak); margin: 18px 0 12px;
}
.zoek:focus { outline: 2px solid var(--paars); outline-offset: -1px; }
.pillen { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
.pillen::-webkit-scrollbar { display: none; }
.pil {
  flex: none; padding: 7px 15px; border-radius: 99px; font-size: 13px; font-weight: 600;
  background: var(--vlak); border: 1px solid var(--lijn); color: var(--grijs);
}
.pil[aria-pressed="true"] { background: var(--paars); border-color: var(--paars); color: #fff; }

.klant {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond);
  padding: 13px 14px; margin-bottom: 9px; box-shadow: var(--schaduw);
}
.klant:hover { border-color: var(--paars); }
.logo {
  flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--achter);
  display: grid; place-items: center; overflow: hidden;
  font-weight: 800; font-size: 14px; color: var(--paars); letter-spacing: -.02em;
}
.logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.klant__mid { flex: 1; min-width: 0; }
.klant__naam { font-weight: 700; letter-spacing: -.01em; }
.klant__dienst { font-size: 13px; color: var(--grijs); }
.klant__mid .balk { margin-top: 8px; }
.klant__rechts { flex: none; text-align: right; font-size: 12px; color: var(--grijs); white-space: nowrap; }
.klant__rechts b { display: block; font-size: 17px; color: var(--inkt); letter-spacing: -.02em; }

/* ── wissel lijst / bord ───────────────────────────────────────────────── */
.wissel {
  display: flex; gap: 4px; background: var(--achter); border: 1px solid var(--lijn);
  border-radius: 12px; padding: 4px; margin: 16px 0 4px;
}
.wissel button {
  flex: 1; padding: 9px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--grijs);
}
.wissel button[aria-selected="true"] { background: var(--vlak); color: var(--inkt); box-shadow: var(--schaduw); }

/* ── projectbord ───────────────────────────────────────────────────────── */
/* Vijf kolommen naast elkaar, horizontaal scrollend. Op een telefoon past er één ruim in
   beeld met de volgende er net naast — dat nodigt uit om door te vegen, terwijl alles
   boven elkaar proppen de volgorde van het proces onzichtbaar maakt. */
.bord {
  display: flex; gap: 12px; overflow-x: auto; padding: 14px 0 8px;
  scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 -16px; padding-left: 16px; padding-right: 16px;
}
.bord::-webkit-scrollbar { display: none; }
.kolom { flex: none; width: 78vw; max-width: 300px; scroll-snap-align: start; }
.kolom__kop {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.kolom__kop b { margin-left: auto; font-size: 13px; opacity: .75; }
.kolom__kop--ontwikkeling { background: color-mix(in srgb, var(--grijs) 14%, transparent); color: var(--grijs); }
.kolom__kop--test         { background: color-mix(in srgb, var(--oranje) 15%, transparent); color: var(--oranje); }
.kolom__kop--klaar        { background: color-mix(in srgb, var(--paars) 15%, transparent); color: var(--paars); }
.kolom__kop--live         { background: color-mix(in srgb, var(--groen) 15%, transparent); color: var(--groen); }
.kolom__kop--af           { background: var(--lijn); color: var(--grijs); }
.kolom__leeg { color: var(--flauw); font-size: 13px; padding: 10px 2px; margin: 0; }

.projectkaart {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px;
  padding: 11px 12px; margin-bottom: 8px; box-shadow: var(--schaduw);
}
.projectkaart:hover { border-color: var(--paars); }
.logo--klein { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
.projectkaart { position: relative; }
.projectkaart__mid { min-width: 0; flex: 1; }
/* Naam van wie het oppakt, in zijn eigen kleur. Klein en rechts, zodat het het kaartje
   markeert zonder de projectnaam te verdringen. */
.wie-merk {
  flex: none; color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px; white-space: nowrap;
}
.projectkaart__naam { font-weight: 600; font-size: 14px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.projectkaart__klant { font-size: 12px; color: var(--grijs); }

.bladkop { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--flauw); margin: 4px 0 10px; }
.wieknoppen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
.wieknop { padding: 13px; border-radius: 10px; border: 2px solid var(--lijn); font-weight: 700; }
.wieknop:hover { filter: brightness(1.1); }

/* Stand kiezen (tikken, niet slepen) */
.standkeuze {
  display: block; width: 100%; text-align: left; padding: 13px 14px; border-radius: 10px;
  border: 1px solid var(--lijn); margin-bottom: 8px; font-weight: 600; color: var(--grijs);
}
.standkeuze[aria-pressed="true"] { border-color: var(--paars); color: var(--inkt); background: var(--paars-zacht); }

/* ── klantdetail ───────────────────────────────────────────────────────── */
.onderdeelrij {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 2px; border-bottom: 1px solid var(--lijn);
}
.onderdeelrij:last-child { border-bottom: 0; }
.onderdeelrij__naam { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.stip-stand { flex: none; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.stip-stand--ontwikkeling { background: color-mix(in srgb, var(--grijs) 14%, transparent); color: var(--grijs); }
.stip-stand--test         { background: color-mix(in srgb, var(--oranje) 15%, transparent); color: var(--oranje); }
.stip-stand--klaar        { background: color-mix(in srgb, var(--paars) 15%, transparent); color: var(--paars); }
.stip-stand--live         { background: color-mix(in srgb, var(--groen) 15%, transparent); color: var(--groen); }
.stip-stand--af           { background: var(--lijn); color: var(--grijs); }

.toevoegrij { display: flex; gap: 8px; margin-top: 14px; }
.toevoegrij input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--vlak); }
.toevoegrij button { flex: none; width: 44px; border-radius: 10px; background: var(--paars); color: #fff; font-size: 20px; }


.detailkop { display: flex; align-items: center; gap: 14px; padding: 20px 0 6px; }
.detailkop .logo { width: 56px; height: 56px; border-radius: 15px; font-size: 17px; }
.detailkop h1 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
.stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--groen); margin-right: 6px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); margin: 16px 0 4px; }
.tab { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--grijs); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab[aria-selected="true"] { color: var(--paars); border-bottom-color: var(--paars); }

.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 16px; margin-top: 14px; box-shadow: var(--schaduw); }
.kaart h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--flauw); }
.infolijst { display: grid; gap: 11px; }
.inforij { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.inforij span:first-child { width: 110px; flex: none; color: var(--grijs); }
.inforij input { flex: 1; min-width: 0; border: 1px solid transparent; background: none; border-radius: 8px; padding: 5px 8px; }
.inforij input:hover { border-color: var(--lijn); }
.inforij input:focus { outline: none; border-color: var(--paars); background: var(--achter); }
select.fase { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--vlak); }

.notitie { border-left: 3px solid var(--paars); padding: 2px 0 2px 13px; margin-bottom: 16px; }
.notitie b { display: block; }
.notitie time { font-size: 12px; color: var(--flauw); }
.notitie p { margin: 4px 0 0; color: var(--grijs); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── week ──────────────────────────────────────────────────────────────── */
.weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 18px 0 8px; }
.dag { padding: 9px 0; border-radius: 12px; text-align: center; border: 1px solid var(--lijn); background: var(--vlak); }
.dag small { display: block; font-size: 11px; color: var(--grijs); }
.dag b { font-size: 16px; letter-spacing: -.02em; }
.dag[aria-pressed="true"] { background: var(--paars); border-color: var(--paars); color: #fff; }
.dag[aria-pressed="true"] small { color: #fff; opacity: .8; }
.dag i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--paars); margin: 3px auto 0; }
.dag[aria-pressed="true"] i { background: #fff; }
.dag--leeg i { visibility: hidden; }
.dag--nu { border-color: var(--paars); }
.dag--nu small { color: var(--paars); font-weight: 700; }
.dag--nu[aria-pressed="true"] small { color: #fff; }

/* ── knoppen & modaal ──────────────────────────────────────────────────── */
.knop {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border-radius: var(--rond);
  background: var(--paars); color: #fff; font-weight: 600; letter-spacing: -.01em;
}
.knop:hover { filter: brightness(1.08); }
.knop--stil { background: var(--vlak); color: var(--inkt); border: 1px solid var(--lijn); }

.laag { position: fixed; inset: 0; background: rgb(12 10 18 / 45%); z-index: 40; display: grid; align-items: end; }
@media (min-width: 640px) { .laag { align-items: center; justify-items: center; } }
.blad {
  background: var(--vlak); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  animation: omhoog .22s cubic-bezier(.32,.72,0,1);
}
@media (min-width: 640px) { .blad { border-radius: 20px; } }
@keyframes omhoog { from { transform: translateY(18px); opacity: 0; } }
.blad__kop { display: flex; align-items: center; margin-bottom: 18px; }
.blad__kop h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.blad__kop button { margin-left: auto; font-size: 20px; color: var(--grijs); }

label.veld { display: block; margin-bottom: 14px; }
label.veld > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
label.veld input, label.veld select, label.veld textarea {
  width: 100%; padding: 12px 13px; border-radius: 10px;
  border: 1px solid var(--lijn); background: var(--vlak);
}
label.veld input:focus, label.veld select:focus, label.veld textarea:focus { outline: 2px solid var(--paars); outline-offset: -1px; }
.keuzes { display: flex; gap: 8px; }
.keuzes button { flex: 1; padding: 11px; border-radius: 10px; border: 1px solid var(--lijn); font-weight: 600; font-size: 14px; color: var(--grijs); }
.keuzes button[aria-pressed="true"] { color: #fff; }
.keuzes button[data-p="laag"][aria-pressed="true"]    { background: var(--groen); border-color: var(--groen); }
.keuzes button[data-p="normaal"][aria-pressed="true"] { background: var(--paars); border-color: var(--paars); }
.keuzes button[data-p="hoog"][aria-pressed="true"]    { background: var(--rood);  border-color: var(--rood); }

/* ── onderbalk ─────────────────────────────────────────────────────────── */
.onderbalk {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: color-mix(in srgb, var(--vlak) 92%, transparent);
  backdrop-filter: blur(14px); border-top: 1px solid var(--lijn);
  display: flex; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}
.onderbalk button { flex: 1; display: grid; gap: 4px; justify-items: center; padding: 6px 0; font-size: 11px; color: var(--flauw); }
.onderbalk button[aria-current="page"] { color: var(--paars); }

/* De zwevende plusknop staat net boven de balk, niet erin: in de mockup is "Nieuwe taak"
   de enige actie die overal beschikbaar is en die moet je nooit hoeven zoeken. */
.plus {
  position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 31;
  width: 56px; height: 56px; border-radius: 50%; background: var(--paars); color: #fff;
  font-size: 26px; display: grid; place-items: center;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--paars) 45%, transparent);
}
/* Typen is de kleine knop naast de microfoon: minder vaak nodig, maar nooit weg. */
.plus--klein {
  width: 42px; height: 42px; font-size: 21px; right: 82px;
  bottom: calc(93px + env(safe-area-inset-bottom));
  background: var(--vlak); color: var(--paars); border: 1px solid var(--lijn);
  box-shadow: var(--schaduw);
}
.plus--spraak.aan { background: var(--rood); box-shadow: 0 0 0 0 color-mix(in srgb, var(--rood) 55%, transparent); animation: klop 1.5s infinite; }
@keyframes klop {
  to { box-shadow: 0 0 0 18px color-mix(in srgb, var(--rood) 0%, transparent); }
}
.plus--spraak.bezig { opacity: .6; }

.opname {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 32;
  bottom: calc(154px + env(safe-area-inset-bottom));
  background: var(--inkt); color: var(--achter); padding: 9px 16px; border-radius: 99px;
  font-size: 13px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.opname__stip { width: 8px; height: 8px; border-radius: 50%; background: var(--rood); animation: pols 1s infinite; }
@keyframes pols { 50% { opacity: .25; } }

/* Wat er begrepen is, met een weg-knop. Automatisch toevoegen is prima, maar je moet wel
   kunnen zien dát er iets misging — niet volgende week pas. */
.gehoord {
  position: fixed; left: 16px; right: 16px; z-index: 33;
  bottom: calc(96px + env(safe-area-inset-bottom));
  max-width: 688px; margin: 0 auto;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond);
  padding: 14px 16px; box-shadow: 0 8px 30px rgb(20 18 28 / 18%);
  animation: omhoog .2s cubic-bezier(.32,.72,0,1);
}
.gehoord h4 { margin: 0 0 8px; font-size: 13px; color: var(--flauw); text-transform: uppercase; letter-spacing: .06em; }
.gehoord li { font-size: 14px; margin-bottom: 4px; overflow-wrap: anywhere; }
.gehoord ul { margin: 0; padding-left: 18px; }
.gehoord__weg { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--rood); }

/* ── inloggen & melding ────────────────────────────────────────────────── */
.inlog { max-width: 340px; margin: 18vh auto; padding: 0 20px; text-align: center; }
.inlog h1 { font-size: 22px; letter-spacing: -.03em; }
.inlog input { width: 100%; padding: 13px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--vlak); margin-bottom: 10px; }
.fout { color: var(--rood); font-size: 14px; min-height: 20px; }

/* Boven de knoppen, niet eroverheen: de melding zat op dezelfde hoogte als de microfoon
   en het plusje, en dekte ze af — dan kan je precies niet klikken op wat je wil (Mike 17-9,
   screenshot van zijn telefoon). */
.melding {
  position: fixed; left: 16px; right: 16px; margin: 0 auto;
  bottom: calc(158px + env(safe-area-inset-bottom));
  width: fit-content; max-width: calc(100% - 32px);
  background: var(--inkt); color: var(--achter); padding: 11px 18px; border-radius: 12px;
  font-size: 14px; z-index: 50; box-shadow: var(--schaduw);
  display: flex; align-items: center; gap: 16px;
}
.melding__terug { color: #8b6bff; font-weight: 700; white-space: nowrap; }

/* ── breed scherm ──────────────────────────────────────────────────────── */
/* De app is voor de telefoon ontworpen: één kolom met een balk onderin. Op een laptop
   werd dat een smal strookje in het midden met een telefoonbalk eronder (Mike, 17-9,
   screenshot van linkai-taken.pages.dev op zijn desktop). Vanaf 1000px schuift dezelfde
   balk naar links als zijkolom — geen tweede navigatie, dezelfde knoppen op een plek waar
   je ze met een muis verwacht. */
@media (min-width: 1000px) {
  :root { --zij: 216px; }

  body { padding-bottom: 28px; padding-left: var(--zij); }

  .onderbalk {
    top: 0; bottom: 0; right: auto; width: var(--zij);
    flex-direction: column; align-items: stretch; gap: 4px;
    border-top: 0; border-right: 1px solid var(--lijn);
    padding: 76px 12px 16px;            /* onder de kop langs */
    backdrop-filter: none; background: var(--vlak);
  }
  .onderbalk button {
    flex: none; grid-auto-flow: column; justify-items: start; justify-content: start;
    align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; font-size: 14px;
  }
  .onderbalk button:hover { background: var(--achter); color: var(--inkt); }
  .onderbalk button[aria-current="page"] {
    background: color-mix(in srgb, var(--paars) 11%, transparent); font-weight: 600;
  }

  /* De kop loopt over de volle breedte door, zodat het logo boven de zijkolom staat. */
  .kop { margin-left: calc(var(--zij) * -1); padding-left: var(--zij); z-index: 31; }
  .kop__in, .wrap { max-width: 1000px; padding-left: 28px; padding-right: 28px; }

  .groet h1 { font-size: 30px; }
  .tegels { gap: 14px; }
  .tegel { padding: 18px; }

  /* Zonder balk onderin mogen de knoppen gewoon in de hoek staan. */
  .plus        { right: 28px; bottom: 28px; }
  .plus--klein { right: 96px; bottom: 35px; }
  .opname      { left: auto; right: 28px; transform: none; bottom: 100px; }
  .melding     { left: var(--zij); bottom: 28px; }
  .gehoord     { left: calc(var(--zij) + 28px); right: 28px; bottom: 100px; }

  /* Het projectbord is op de telefoon een veegbaan. Met een muis kún je niet vegen, dus
     stond de vijfde kolom half buiten beeld zonder manier om erbij te komen (Mike, 17-9).
     Op een breed scherm wordt het daarom een raster dat zichzelf indeelt: alle kolommen
     staan in beeld, en past de vijfde niet meer, dan zakt 'ie naar de volgende regel in
     plaats van het beeld uit te lopen. */
  #scherm-klanten { max-width: 1560px; }
  .wissel { max-width: 420px; }

  .bord {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 16px; overflow: visible; margin: 0; padding: 18px 0 8px;
    scroll-snap-type: none; align-items: start;
  }
  .kolom { width: auto; max-width: none; }
}

/* Vanaf hier passen alle vijf de standen naast elkaar. Dat is het punt van een bord:
   je leest de route van links naar rechts in één blik. Daaronder zakt de laatste kolom
   naar de volgende regel, wat lelijker is maar wel leesbaar blijft. */
@media (min-width: 1400px) {
  .bord { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* ── ja/nee-vraag ──────────────────────────────────────────────────────────── */
.vraaglaag {
  position: fixed; inset: 0; z-index: 60; background: rgb(20 18 28 / 45%);
  display: grid; place-items: center; padding: 20px;
  animation: opkomen .14s ease;
}
@keyframes opkomen { from { opacity: 0; } }
.vraagkaart {
  background: var(--vlak); border-radius: 18px; padding: 22px; width: 100%; max-width: 380px;
  box-shadow: 0 18px 50px rgb(20 18 28 / 28%);
}
.vraagkaart__tekst { margin: 0 0 18px; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.vraagkaart__knoppen { display: flex; gap: 9px; }
.vraagkaart__knoppen button { flex: 1; padding: 12px; border-radius: 11px; font-weight: 700; font-size: 14px; }
.vraagkaart__nee { border: 1px solid var(--lijn); color: var(--grijs); }
.vraagkaart__ja { background: var(--groen); color: #fff; }



/* ── ja/nee-vraag en wie-kiest ─────────────────────────────────────────────── */
.vraaglaag {
  position: fixed; inset: 0; z-index: 60; background: rgb(20 18 28 / 45%);
  display: grid; place-items: center; padding: 20px; animation: opkomen .14s ease;
}
@keyframes opkomen { from { opacity: 0; } }
.vraagkaart {
  background: var(--vlak); border-radius: 18px; padding: 22px; width: 100%; max-width: 380px;
  box-shadow: 0 18px 50px rgb(20 18 28 / 28%);
}
.vraagkaart__tekst { margin: 0 0 18px; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.vraagkaart__knoppen { display: flex; gap: 9px; }
.vraagkaart__knoppen button { flex: 1; padding: 12px; border-radius: 11px; font-weight: 700; font-size: 14px; }
.vraagkaart__nee { border: 1px solid var(--lijn); color: var(--grijs); width: 100%; padding: 12px; border-radius: 11px; font-weight: 700; }
.vraagkaart__ja { background: var(--groen); color: #fff; }

.kieslijst { display: grid; gap: 8px; margin-bottom: 14px; }
.kies {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--lijn);
  background: var(--vlak); font-weight: 700; font-size: 15px;
}
.kies:hover { border-color: var(--paars); }
.kies__bol { width: 14px; height: 14px; border-radius: 50%; flex: none; }


/* ── Drive-knoppen bij de klant ───────────────────────────────────────────── */
.drivelinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.drivelink {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 9px 13px; border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt);
}
.drivelink:hover { border-color: var(--paars); color: var(--paars); }

/* ── taakkaart ─────────────────────────────────────────────────────────────
   Ontwerp van Mike (18-9): prioriteit bovenaan met eigen kleur, gekleurde streep links,
   omschrijving zichtbaar, en twee brede knoppen onderaan met "Voltooien" als de gevulde. */
.taak {
  position: relative; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 16px; padding: 15px 16px 14px; margin-bottom: 12px;
  box-shadow: var(--schaduw); border-left: 4px solid var(--lijn);
  transition: opacity .25s ease, transform .25s ease;
}
.taak--hoog    { border-left-color: var(--rood); }
.taak--normaal { border-left-color: var(--oranje); }
.taak--laag    { border-left-color: #2f6fed; }
.taak--weg { opacity: 0; transform: translateX(28px); }
.taak--klaar { opacity: .62; }
.taak--klaar .taak__titel { text-decoration: line-through; color: var(--flauw); }

.taak__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.prio { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 99px; white-space: nowrap; }
.prio--hoog    { background: color-mix(in srgb, var(--rood) 12%, transparent);   color: var(--rood); }
.prio--normaal { background: color-mix(in srgb, var(--oranje) 14%, transparent); color: var(--oranje); }
.prio--laag    { background: color-mix(in srgb, #2f6fed 12%, transparent);       color: #2f6fed; }
.ouderdom {
  font-size: 12px; font-weight: 600; color: var(--oranje); white-space: nowrap;
  background: color-mix(in srgb, var(--oranje) 12%, transparent);
  padding: 4px 10px; border-radius: 99px;
}

.taak__titel { font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; overflow-wrap: anywhere; }
.taak__meta { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 8px; font-size: 13px; color: var(--grijs); }
.brok { display: inline-flex; align-items: center; gap: 5px; }
.brok i { font-style: normal; font-size: 12px; opacity: .75; }
.taak__notitie { margin: 9px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--grijs); overflow-wrap: anywhere; }

.inbehandeling { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--grijs); }
.inbehandeling__bol { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.taak__acties { display: flex; gap: 9px; margin-top: 13px; }
.actie {
  flex: 1; padding: 11px 10px; border-radius: 11px; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--lijn); background: var(--achter); color: var(--grijs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.actie--bezig:hover { border-color: var(--oranje); color: var(--oranje); }
.actie--bezig-aan { border-color: var(--oranje); color: var(--oranje); }
.actie--klaar { background: var(--paars); border-color: var(--paars); color: #fff; }
.actie--klaar:hover { filter: brightness(1.08); }
.actie--terug { flex: 0 0 auto; padding-inline: 16px; }
.taak__weg { position: absolute; top: 12px; right: 10px; color: transparent; font-size: 14px; padding: 2px 5px; }
.taak:hover .taak__weg { color: var(--flauw); }
.taak__weg:hover { color: var(--rood); }
@media (hover: none) { .taak__weg { color: var(--flauw); } }

.leeg { text-align: center; color: var(--flauw); padding: 30px 12px; }

/* ── kop, groet, tegels ────────────────────────────────────────────────────── */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paars-zacht); color: var(--paars); font-weight: 800; font-size: 13px;
  position: relative;
}
.avatar__stip {
  position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--groen); border: 2px solid var(--vlak);
}
.groetrij { display: flex; align-items: flex-start; gap: 14px; padding: 22px 0 4px; }
.groet { flex: 1; min-width: 0; }
.groet h1 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.groet h1 span { color: var(--paars); }
.groet p { margin: 5px 0 0; color: var(--grijs); font-size: 14px; }
.datumkaart {
  flex: none; display: flex; align-items: center; gap: 10px; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 14px; padding: 11px 14px; box-shadow: var(--schaduw);
}
.datumkaart__icoon { font-size: 17px; }
.datumkaart b { display: block; font-size: 13.5px; }
.datumkaart span { font-size: 12.5px; color: var(--grijs); }

.tegels { grid-template-columns: repeat(4, 1fr); }
.tegel__icoon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  font-size: 15px; margin-bottom: 9px;
}
.tegel__icoon--paars { background: var(--paars-zacht); }
.tegel__icoon--rood  { background: color-mix(in srgb, var(--rood) 12%, transparent); }
.tegel__icoon--groen { background: color-mix(in srgb, var(--groen) 13%, transparent); }
.tegel__icoon--blauw { background: color-mix(in srgb, #2f6fed 12%, transparent); }
.tegel b.rood { color: var(--rood); }

.pillen--filter { margin: 4px 0 16px; }
.pillen--filter .pil em { font-style: normal; opacity: .65; margin-left: 3px; }

/* Op een telefoon moet de eerste taak in beeld staan zonder scrollen. Alles boven de
   lijst wordt daarom compacter in plaats van onder elkaar gezet: de datumkaart blijft
   naast de groet en de vier tegels blijven op één rij. */
@media (max-width: 560px) {
  .groetrij { padding: 14px 0 2px; gap: 10px; align-items: center; }
  .groet h1 { font-size: 21px; }
  .groet p { font-size: 12.5px; margin-top: 3px; }
  .datumkaart { padding: 8px 10px; gap: 7px; }
  .datumkaart__icoon { font-size: 14px; }
  .datumkaart b { font-size: 12px; }
  .datumkaart span { font-size: 11px; }
  .voortgang { padding: 11px 13px; margin: 11px 0; }
  .tegels { gap: 7px; margin-bottom: 16px; }
  .tegel { padding: 9px 8px; border-radius: 12px; }
  .tegel__icoon { width: 25px; height: 25px; font-size: 12px; margin-bottom: 5px; border-radius: 8px; }
  .tegel b { font-size: 18px; }
  .tegel span { font-size: 10.5px; line-height: 1.25; }
  .taak__acties .actie { font-size: 12.5px; padding: 10px 6px; }
}