/*
 * Het werkbord (referentie `schermen/Bord.html`, `AANVULLING-13.md` §3).
 *
 * Alles wat gedeeld is komt uit `components.css`: `.box` voor het afvinkrondje,
 * `.who` voor de initialen, `.pill` voor een label, `.segs`/`.seg` voor de twee
 * standen op de telefoon, `.groep` voor een groepskop. Hier staat het bord zelf.
 *
 * DE MATEN KOMEN UIT DE TEKENING: een lijst is 268 breed, de knop *Lijst
 * toevoegen* 214, de tussenruimte 14. Geen nieuwe kleuren - de tokens dekken
 * alles wat er staat.
 */

/* ---- Het bord op de computer -------------------------------------------- */

.bord {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  align-items: flex-start;
  overflow-x: auto;
  min-height: 100%;
}

.lijst {
  width: 268px;
  flex: 0 0 auto;
  background: var(--side);
  border: 1px solid var(--white-a06);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.lijst-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 13px 8px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
}
.lijst-naam { min-width: 0; }
.lijst-aantal { color: var(--muted-2); font-weight: 400; margin-left: auto; text-align: right; }

/* Een lijst die aan een event hangt, zegt dat (§3.2). */
.lijst-event {
  padding: 0 13px 6px;
  font-size: var(--fs-micro);
  color: var(--gold);
}

.lijst-kaartjes {
  padding: 0 9px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
}

.lijst-toevoegen {
  padding: 8px 13px 12px;
  font-size: var(--fs-support-sm);
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.lijst-nieuw {
  width: 214px;
  flex: 0 0 auto;
  height: 44px;
  border: 1px dashed var(--gold-a30);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-support);
  color: var(--gold);
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* ---- Eén kaartje -------------------------------------------------------- */

.kaart {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  border-radius: var(--r-banner);
  background: var(--surface);
  border: 1px solid var(--white-a06);
}

/*
 * Afgevinkt blijft staan waar het stond, doorgestreept en grijs (§3.3). Niet
 * verplaatst, niet verborgen: op het echte bord staat "Voorbeeld visitekaartjes
 * meenemen" afgevinkt in Marketing, en dat is informatie.
 */
.kaart-af .kaart-titel {
  color: var(--ink-dim);
  text-decoration: line-through;
  text-decoration-color: var(--white-a16);
}

.kaart-open {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.kaart-titel {
  /*
   * De kaartkopstijl uit par. 4 van het hoofdontwerp (AANVULLING-22
   * par. 2): een kaart is geen lijstregel. 16 punten, halfvet.
   */
  display: block;
  font-size: var(--fs-cardhead);
  font-weight: 600;
  line-height: 1.3;
}

.kaart-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: var(--fs-micro);
  color: var(--muted-2);
}
.kaart-datum { color: var(--muted-2); }
.kaart-laat { color: var(--warn); font-weight: 600; }
.kaart-relatie { color: var(--gold); }
.kaart-bijlage { display: inline-flex; align-items: center; gap: 3px; }

.kaart-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.kaart-leden {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
/* Kleiner dan op een lijstregel: op een kaartje staan er soms drie naast elkaar. */
.kaart-leden .who {
  width: 20px;
  height: 20px;
  font-size: calc(0.53125rem * var(--tekstschaal));
}

/* ---- Op de telefoon ----------------------------------------------------- */

.tel-lijstkop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  margin-bottom: 8px;
}

/* Op de telefoon staan de kaartjes onder elkaar met wat lucht ertussen. */
/* Meer lucht (AANVULLING-22 par. 2): een scherm mag leger zijn dan het kan. */
.scroll .kaart + .kaart { margin-top: 16px; }
/* Tussen de lijsten van de accordeon onderling twintig punten. */
.bord-accordeon .uitklap { margin-top: 20px; }
.bord-accordeon .uitklap:first-child { margin-top: 0; }
.bord-lijstacties { justify-content: flex-end; }
.uitklap-warn { color: var(--warn-pill); }

.tel-leeg { margin: 4px 0 8px; }

/* ---- Het kaartje open (§3.7) -------------------------------------------- */

.kaartje-titelrij { align-items: flex-start; gap: 10px; }

.kaartje-titel {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-navtitle);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
}
.kaartje-titel-af {
  color: var(--ink-dim);
  text-decoration: line-through;
  text-decoration-color: var(--white-a16);
}

.kaartje-waar {
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-meta);
  flex-wrap: wrap;
}
.kaartje-verplaats {
  background: none;
  border: 1px solid var(--gold-a30);
  border-radius: var(--r-round);
  height: 26px;
  padding: 0 11px;
  color: var(--gold);
  font: inherit;
  font-size: var(--fs-micro);
  cursor: pointer;
}

.kaartje-omschrijving {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 6px 0 0;
  font: inherit;
  font-size: var(--fs-support);
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}

.kaartje-datum { align-items: center; }
.kaartje-datumknop {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-support);
  color: var(--gold);
  cursor: pointer;
}

.kaartje-labels, .kaartje-leden { gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ---- Afvinklijstjes ----------------------------------------------------- */

.lijstje { margin-top: 8px; }
.lijstje + .lijstje { margin-top: 14px; }
.lijstje-kop { justify-content: space-between; font-size: var(--fs-support-sm); }
.lijstje-naam { font-weight: 600; }
.lijstje-tel { color: var(--muted-2); font-size: var(--fs-micro); }

.stap {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-support-sm);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
/* Kleiner dan het rondje op een kaartje: dit is een stap, geen kaartje. */
.stapbox {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--ink-faint);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stapbox-af { background: var(--ok-a30); border-color: var(--ok); }
.stap-af { color: var(--ink-dim); text-decoration: line-through; }

.lijstje-stap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 4px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-micro);
  color: var(--muted-2);
  cursor: pointer;
}

/* ---- Opmerkingen en activiteit ------------------------------------------ */

.opmerking { padding: 8px 0; }
.opmerking + .opmerking { border-top: 1px solid var(--white-a06); }
.opmerking-tekst { font-size: var(--fs-support); line-height: 1.45; }
.opmerking-wie { margin-top: 3px; font-size: var(--fs-micro); color: var(--muted-2); }

.kaartje-opmerken { width: 100%; margin-top: 10px; }

.activiteit {
  padding: 5px 0;
  font-size: var(--fs-micro);
  color: var(--muted);
  line-height: 1.45;
}

.kaartje-koppeling { padding: 8px 0; }

/* De sorteerknop boven het bord op de computer (AANVULLING-14 §7). */
.segs-smal { max-width: 440px; }
/* Zes weergaven op een rij: elk tabje zo breed als zijn woord, en "Op
   persoon" breekt niet meer middenin (AUDIT-3). */
.segs-smal .seg { flex: 1 1 auto; white-space: nowrap; padding-left: 10px; padding-right: 10px; }

/* Slepen op het bord (computer). */
.kaart[draggable='true'] { cursor: grab; }
.kaart-sleept { opacity: 0.4; }
.lijst-vangt { outline: 2px dashed var(--gold-a35); outline-offset: 4px; border-radius: var(--r-card); }

/* ---- Aanvulling 19 par. 4: de Trello-toets dichtgebouwd ------------------ */

/* De filterbalk (4.1.9): lid, label, deadline en zoekwoord. Kijken, geen
 * schrijven - wat wegvalt is weg uit beeld, niet weg. */
.bord-balk { align-items: center; gap: 10px; flex-wrap: wrap; }
.bordfilter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.bord-balk .bordfilter { margin-top: 0; }
.bordfilter-zoek,
.bordfilter-keuze {
  background: var(--side);
  border: 1px solid var(--white-a06);
  color: inherit;
  border-radius: 9px;
  padding: 6px 9px;
  font: inherit;
  font-size: var(--fs-support-sm);
}
.bordfilter-zoek { width: 150px; }
/* In het filtervel (AANVULLING-22 par. 3) mag het zoekveld de breedte pakken. */
.filter-vel .bordfilter-zoek { width: 100%; display: block; }

/* Het lijstmenu (4.1.2b-2d) en de som (4.1.7). */
.lijst-menu {
  background: none;
  border: 0;
  color: var(--muted-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0 2px;
}
.lijst-som { color: var(--gold); font-weight: 600; font-size: var(--fs-support-sm); }

/* To-do-koppen: waarschuwing direct bij de naam, open aantal geheel rechts. */
.bord-accordeon .uitklap-samenvatting { display: flex; align-items: center; gap: 8px; }
.todo-open-aantal { margin-left: auto; text-align: right; }
.lijst-veegbaar { position: relative; }
.lijst-veegmenu {
  position: absolute;
  z-index: 4;
  right: 14px;
  top: 14px;
  padding: 4px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--white-a06);
  box-shadow: var(--shadow-card);
}

/* Kaartje bovenaan toevoegen (4.1.4): een stille plus onder de kop. */
.lijst-toevoegen-boven { justify-content: center; padding-top: 2px; padding-bottom: 2px; }

/* De acht labelkleuren (4.2.5). Klassen, geen kleurcodes: style-src 'self'. */
.pill-lbl-goud   { background: rgba(201, 162, 39, 0.24); color: #d9b545; }
.pill-lbl-groen  { background: rgba(122, 158, 126, 0.24); color: #93b797; }
.pill-lbl-blauw  { background: rgba(110, 140, 184, 0.24); color: #8fa9cc; }
.pill-lbl-rood   { background: rgba(194, 91, 78, 0.26); color: #d98a7f; }
.pill-lbl-oranje { background: rgba(201, 138, 61, 0.24); color: #d9a763; }
.pill-lbl-paars  { background: rgba(155, 127, 184, 0.24); color: #b39fcc; }
.pill-lbl-grijs  { background: rgba(150, 150, 150, 0.2); color: #b0b0b0; }
.pill-lbl-bruin  { background: rgba(160, 120, 90, 0.24); color: #bd9678; }
button.pill { border: 0; font: inherit; cursor: pointer; }

/* Een stap met eigenaar, dag en de weg naar een echte kaart (4.2.7-4.2.8). */
.stap-rij { gap: 4px; align-items: center; }
.stap-rij .stap { flex: 1; min-width: 0; }
.stap-dag { font-size: var(--fs-micro); color: var(--muted-2); white-space: nowrap; }
.stap-knopje {
  background: none;
  border: 0;
  color: var(--muted-2);
  font: inherit;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.stap-knopje:hover { color: var(--gold); }

/* Opmaak in omschrijving en opmerkingen (4.2.2, 4.2.11). */
.kaartje-omschrijving-tekst { font-size: var(--fs-body-sm); line-height: 1.5; }
.opmaak-regel { margin: 0 0 6px; }
.opmaak-lijst { margin: 0 0 6px; padding-left: 20px; }
.opmaak-lijst li { margin: 2px 0; }
.kaartje-omschrijving-tekst a,
.opmerking-tekst a { color: var(--gold); }
.vermelding { color: var(--gold); font-weight: 600; }

/* Een oudere versie van een bijlage (4.2.9) staat er stiller bij. */
.bijlage-ouder { opacity: 0.55; padding-left: 14px; }

/* De stille onderkant: archief en nog een bord (4.1.1, 4.1.10). */
.bord-voet { display: flex; gap: 18px; padding-top: 0; }
.bord-voet .lnk.mut { color: var(--muted-2); }

/* Leden op het kaartje zijn knoppen geworden (4.2.4). */
button.who { border: 0; font: inherit; cursor: pointer; }

/* De veeg op de telefoon (BOUWOPDRACHT-8 par. 1, E8): het menu dat de veeg
 * onthult. De kaart is het anker; het menu verdwijnt vanzelf. */
.kaart { position: relative; }
.kaart-veegmenu {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  background: var(--side);
  border: 1px solid var(--white-a06);
  border-radius: 10px;
  padding: 4px;
  z-index: 2;
}
.kaart-veegweg { color: #d98a7f; }

/* De prullenbak: één rij per verwijderd ding, met de klok erbij. */
.prullenbak-rij { align-items: center; gap: 10px; padding: 8px 0; }
.prullenbak-rij .tls { display: block; }

/* ---- De tabel- en kalenderweergave (BOUWOPDRACHT-8 par. 4.5) ------------ */

.bord-tabel-houder { overflow-x: auto; padding: 0 var(--pad-x); }
.bord-tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-support); }
.bord-tabel th {
  text-align: left;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.bord-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bord-tabel-af td { opacity: 0.5; }
.bord-tabel-af .lnk { text-decoration: line-through; }
.bord-tabel .let-op { color: var(--warn); }

.kal { padding: 0 var(--pad-x); }
.kal-maand { margin-top: 12px; }
.kal-raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 8px;
}
.kal-kop {
  font-size: var(--fs-micro);
  color: var(--muted-2);
  text-transform: uppercase;
  padding: 2px 4px;
}
.kal-cel {
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px;
  overflow: hidden;
}
.kal-leeg { border-color: transparent; }
.kal-vandaag { border-color: var(--gold); }
.kal-dag { font-size: var(--fs-micro); color: var(--muted-2); }
.kal-kaart {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--fs-tiny);
  background: var(--gold-a13);
  border: 0;
  border-radius: 4px;
  color: inherit;
  padding: 2px 4px;
  margin-top: 2px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kal-kaart.late { background: var(--warn-a20, rgba(255,140,0,0.2)); }
.kal-af { opacity: 0.5; text-decoration: line-through; }
.kal-voet { padding: 10px 0; }

/* ---- De tijdlijnweergave (BOUWOPDRACHT-8 par. 4.5) ---------------------- */
/* Balken via CSSOM-props (--van/--breed), lijnen als SVG-laag erover. */
.tl { position: relative; padding: 8px 0; }
.tl-rij { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.tl-naam {
  flex: 0 0 220px;
  text-align: right;
  font-size: var(--fs-support);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-naam:hover { color: var(--gold-soft); }
.tl-spoor {
  position: relative;
  flex: 1;
  height: 22px;
  border-bottom: 1px dashed var(--white-a06);
}
.tl-balk {
  position: absolute;
  left: var(--van, 0%);
  width: var(--breed, 2%);
  min-width: 14px;
  top: 2px;
  height: 18px;
  border-radius: 9px;
  background: var(--gold-a34);
  border: 1px solid var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6px;
  overflow: hidden;
}
.tl-balk-tekst { font-size: var(--fs-micro); color: var(--ink); white-space: nowrap; }
.tl-laat { border-color: var(--warn); }
.tl-af { opacity: 0.45; }
.tl-lijnen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tl-lijn {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  opacity: 0.6;
}
.tl-vandaaglijn { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }

/* ---- De kop van de ene stroom (AANVULLING-24 par. 1) ------------------- */
/*
 * Boven het bord: de bevestiging die klaarstaat, Eerst dit en Wacht op jou.
 * De bevestiging is een KNOP in de vorm van een gouden banner - hij brengt
 * je naar Offertes, dus hij hoort eruit te zien als iets dat je indrukt.
 */
.doen-stroomkop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.doen-bevestiging {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.doen-bevestiging:hover {
  border-color: var(--gold);
}
/* Het opvolgwerk in de kop draagt zijn eigen randen al; geen dubbele pad. */
.doen-opvolgen .pad {
  padding-left: 0;
  padding-right: 0;
}
/* Op het bureau strekt de kop zich niet eindeloos uit naast het bord. */
@media (min-width: 1024px) {
  .doen-stroomkop {
    max-width: 760px;
  }
}

/* Desktop: vaste lijstkeuze, taken in een afzonderlijk schuifbaar vlak. */
@media(min-width:1024px){
 .bureau-gebied:has(>.bord){display:flex;flex-direction:column;overflow:hidden}
 .bureau-gebied:has(>.bord)>.bord-balk{flex:0 0 auto;margin-bottom:12px}
 .bord{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px;flex:1;min-height:0;overflow:hidden;padding:0 20px 14px;max-width:1200px;width:100%;box-sizing:border-box;align-items:stretch}
 .bord-lijsten{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:6px}
 .bord-lijstkeuze{display:flex;gap:8px;align-items:center;width:100%;padding:13px 12px;border:1px solid var(--white-a06);border-radius:10px;background:var(--side);color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
 .bord-lijstkeuze .lijst-naam{flex:1}
 .bord-lijstkeuze .lijst-aantal{white-space:nowrap;font-size:12px}
 .bord-lijstkeuze[aria-expanded="true"]{border-color:var(--gold);background:var(--gold-a11)}
 .bord-detail{min-width:0;overflow:auto;border:1px solid var(--white-a06);border-radius:14px;background:var(--side)}
 .bord-detail>.lijst{width:100%;max-height:none;border:0;background:none}
 .bord-detail>.lijst[hidden]{display:none}
 .bord-detail .lijst-kop{position:sticky;top:0;background:var(--side);z-index:2;padding:14px;font-size:16px}
 .bord-detail .lijst-kaartjes{overflow:visible;padding:0 12px}
 .bord-kies-lijst{margin:24px;color:var(--muted);font-size:14px}
 .bord>.lijst-nieuw{width:100%;grid-column:1;height:40px}
 .bord-voet{flex:0 0 auto;margin-top:0;padding-bottom:10px}
}

/* Directe invoer op de taak, met dezelfde breedte op mobiel en desktop. */
.kaartje-omschrijving-invoer{box-sizing:border-box;width:100%;max-width:100%;min-width:0;resize:vertical;min-height:110px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px;line-height:1.5;border:1px solid var(--line);border-radius:10px;padding:12px}
[data-omschrijving-acties]{gap:10px;flex-wrap:wrap;margin-top:10px}
[data-omschrijving-acties][hidden]{display:none}
.kaartje-datum input{min-width:0;max-width:70%;box-sizing:border-box;font:inherit;font-size:16px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;color-scheme:dark}
.taak-upload{width:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;gap:10px;padding:20px;border:1px dashed var(--gold-a30);border-radius:10px;background:var(--bg);color:var(--gold);font:inherit;cursor:pointer}
.taak-bijlage,.taak-koppeling{gap:12px;overflow-wrap:anywhere;flex-wrap:wrap}
.taak-koppeling .lnk:first-child{flex:1;text-align:left}

.kaartje-waar{align-items:center;gap:10px;flex-wrap:wrap}.kaartje-waar .kaartje-verplaats{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--gold);cursor:pointer}