/* Urenregistratie Zizonu.
   Huisstijl (15-09-2026): randen en filters #5965e9; knoppen #110128 met witte tekst, alleen knoppen die
   iets toevoegen of opslaan (.knop.hoofd) #6b00ef; titels en koppen #110128. Alleen een licht thema.
   Klantlabels in de planning: donkere variant van de lichte klantkleur (--klantdonker, via JavaScript). */
:root {
  --bg: #f6f6fb; --kaart: #ffffff; --tekst: #1d2330; --kop: #110128; --zacht: #5d6677;
  --lijn: #e4e5f2;                                   /* dunne scheidingslijnen binnen lijsten en tabellen */
  --rand: #5965e9; --rand-hover: #4854d4; --rand-zacht: #eef0fd;            /* randen en filters */
  --knop: #110128; --knop-hover: #2d1a52; --knop-tekst: #ffffff;
  --merk: #6b00ef; --merk-hover: #5800c7;            /* alleen toevoegen en opslaan */
  --fout: #b42318; --fout-zacht: #fdecea; --ok: #1a7f4b; --ok-zacht: #e6f4ec;
  --let-op: #9a6700; --let-op-zacht: #fff5d6;
  --rond: 10px; --schaduw: 0 1px 2px rgba(17, 1, 40, .05), 0 1px 3px rgba(17, 1, 40, .07);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tekst); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--kop); }
.laden { padding: 2rem; color: var(--zacht); text-align: center; }
.verborgen { display: none !important; }

/* Kopbalk */
.kop { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem; background: var(--kaart); border-bottom: 2px solid var(--rand); }
.kop h1 { font-size: 1.05rem; margin: 0; }
.kop .ruimte { flex: 1; }
.kop .wie { color: var(--zacht); font-size: .9rem; }
.label-beheer { background: var(--kop); color: #fff; border-radius: 99px; padding: .1rem .6rem; font-size: .78rem; font-weight: 600; }

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.kaart { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--rond); box-shadow: var(--schaduw);
  padding: 1rem; margin-bottom: 1rem; }
.kaart h2 { font-size: 1rem; margin: 0 0 .75rem; }

/* Knoppen: donker met witte tekst; toevoegen en opslaan (.hoofd) paars */
.knop { border: 1px solid var(--knop); background: var(--knop); color: var(--knop-tekst); border-radius: 8px;
  padding: .5rem .9rem; cursor: pointer; white-space: nowrap; font-weight: 500; }
.knop:hover { background: var(--knop-hover); border-color: var(--knop-hover); }
.knop.hoofd { background: var(--merk); border-color: var(--merk); font-weight: 600; }
.knop.hoofd:hover { background: var(--merk-hover); border-color: var(--merk-hover); }
.knop.klein { padding: .25rem .55rem; font-size: .85rem; background: var(--rand); border-color: var(--rand); }
.knop.klein:hover { background: var(--rand-hover); border-color: var(--rand-hover); }
.knop.klein.hoofd { background: var(--merk); border-color: var(--merk); }
.knop.klein.hoofd:hover { background: var(--merk-hover); border-color: var(--merk-hover); }
.knop.gevaar { background: var(--kaart); color: var(--fout); border-color: var(--fout); }
.knop.gevaar:hover { background: var(--fout-zacht); }
.knop.min { background: var(--kaart); color: var(--kop); border-color: var(--rand); font-weight: 700; min-width: 2.2rem; }
.knop.min:hover { background: var(--rand-zacht); }
.knop:disabled { opacity: .55; cursor: default; }
.link { background: none; border: 0; color: var(--kop); cursor: pointer; padding: 0; text-decoration: underline; }

/* Formulieren */
.veld { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.veld label { font-size: .82rem; color: var(--kop); font-weight: 600; }
.veld input, .veld select, .veld textarea { width: 100%; border: 1px solid var(--rand); border-radius: 8px; padding: .5rem .6rem; background: var(--kaart); }
.veld input:focus, .veld select:focus, .veld textarea:focus,
.taak-wie:focus, .taak-nieuw input:focus, .taak-nieuw select:focus, .taak-bewerk:focus, .tool-rij input:focus {
  outline: 2px solid var(--rand); outline-offset: -1px; }
.veld textarea { min-height: 4.5rem; resize: vertical; }
.veld .ongeldig { border-color: var(--fout); background: var(--fout-zacht); }
.vast { padding: .5rem .6rem; border: 1px dashed var(--rand); border-radius: 8px; color: var(--zacht); }
.invoer-raster { display: grid; gap: .75rem; grid-template-columns: 2fr 1.2fr .8fr 1.2fr 1fr; }
.invoer-raster .breed { grid-column: 1 / -1; }
.acties { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
input[type=checkbox] { accent-color: var(--rand); }
@media (max-width: 760px) {
  .invoer-raster { grid-template-columns: 1fr 1fr; }
  .invoer-raster .project, .invoer-raster .beschrijving { grid-column: 1 / -1; }
}

/* Meerdere blokken in het invulformulier (dupliceerknop) */
.blok + .blok { border-top: 1px dashed var(--rand); margin-top: 1rem; padding-top: .75rem; }
.blok-kop { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.blok-nr { font-weight: 700; font-size: .85rem; color: var(--kop); }
.blok-knoppen { display: flex; gap: .35rem; margin-left: auto; }
.blok.fout-blok { background: var(--fout-zacht); border-radius: 8px; box-shadow: 0 0 0 .5rem var(--fout-zacht); }

/* Inspreken bij de beschrijving */
.label-rij { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.knop.mic.luistert { background: var(--fout-zacht); color: var(--fout); border-color: var(--fout); animation: luistert 1.2s ease-in-out infinite; }
@keyframes luistert { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .knop.mic.luistert { animation: none; } }

/* Loon achter de uren per medewerker (alleen beheer) */
.bedrag { color: var(--zacht); white-space: nowrap; }
.samenvatting tr.som td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--rand); }

/* Meldingen */
.melding { border-radius: 8px; padding: .55rem .8rem; margin: .5rem 0; }
.melding.fout { background: var(--fout-zacht); color: var(--fout); }
.melding.ok { background: var(--ok-zacht); color: var(--ok); }
.melding.info { background: var(--rand-zacht); }
.toast { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 50; box-shadow: var(--schaduw); max-width: calc(100% - 2rem); }

/* Inloggen */
.inlog { max-width: 420px; margin: 8vh auto; }
.namen { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1rem; }
.namen .knop { padding: .8rem; font-size: 1rem; background: var(--kaart); color: var(--kop); border-color: var(--rand); }
.namen .knop:hover { background: var(--rand-zacht); }
.namen .knop.gekozen { background: var(--knop); color: var(--knop-tekst); border-color: var(--knop); }
.wachtwoord input { font-size: 1.05rem; }
/* onzichtbaar maar aanwezig: naamveld voor wachtwoordmanagers */
.voor-schermlezer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Periode: maand + weken */
.periode { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.periode .maand { font-weight: 700; min-width: 9.5rem; text-align: center; color: var(--kop); }
.weken { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.chip { border: 1px solid var(--rand); background: var(--kaart); color: var(--kop); border-radius: 99px; padding: .3rem .7rem; cursor: pointer; font-size: .86rem; }
.chip:hover { background: var(--rand-zacht); }
.chip.actief { background: var(--rand); color: #fff; border-color: var(--rand); }
.chip small { opacity: .8; }
.slot { color: var(--let-op); font-weight: 600; font-size: .85rem; }

/* Totalen */
.totaal { font-size: 1.6rem; font-weight: 700; color: var(--kop); }
.totaal small { font-size: .9rem; font-weight: 400; color: var(--zacht); }
.samenvatting { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .samenvatting { grid-template-columns: 1fr; } }
.samenvatting table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.samenvatting td { padding: .2rem 0; border-bottom: 1px solid var(--lijn); }
.samenvatting td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.samenvatting h3 { font-size: .85rem; margin: 0 0 .35rem; }

/* Lijst per dag (medewerker) */
.dag { margin-bottom: .9rem; }
.dag-kop { display: flex; justify-content: space-between; font-weight: 700; font-size: .9rem; color: var(--kop);
  border-bottom: 1px solid var(--rand); padding-bottom: .25rem; margin-bottom: .35rem; }
.regel { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .5rem 0; border-bottom: 1px dashed var(--lijn); }
.regel:last-child { border-bottom: 0; }
.regel .titel { font-weight: 600; color: var(--kop); }
.regel .uren { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.regel .tekst { grid-column: 1 / -1; white-space: pre-wrap; overflow-wrap: anywhere; }
.regel .knoppen { grid-column: 1 / -1; display: flex; gap: .4rem; }
/* Labeltje met de status achter de projectnaam in de urenlijst (alleen daar, niet op invoervelden) */
.regel .status { display: inline-block; font-size: .75rem; border-radius: 6px; padding: .05rem .45rem; background: var(--rand); color: #fff; margin-left: .35rem; font-weight: 600; }
.label { display: inline-block; font-size: .75rem; border-radius: 6px; padding: .05rem .45rem; background: var(--rand); color: #fff; font-weight: 600; }
.leeg { color: var(--zacht); padding: 1rem 0; text-align: center; }

/* Tabellen (beheer) */
.tabel-wrap { overflow-x: auto; }
table.lijst { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.lijst th { text-align: left; color: var(--kop); font-size: .8rem; border-bottom: 2px solid var(--rand); padding: .4rem .5rem; white-space: nowrap; }
table.lijst td { border-bottom: 1px solid var(--lijn); padding: .45rem .5rem; vertical-align: top; }
table.lijst td.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lijst td.tekst { min-width: 16rem; white-space: pre-wrap; overflow-wrap: anywhere; }
table.lijst tr.bewerken td { background: var(--rand-zacht); }
.filters { display: grid; gap: .6rem; grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
@media (max-width: 760px) { .filters { grid-template-columns: 1fr 1fr; } }
.kleurstaal { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 1px solid var(--rand);
  background: var(--klantkleur, var(--kaart)); vertical-align: middle; margin-right: .35rem; }

/* Tabs */
.tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 1rem; border-bottom: 1px solid var(--lijn); }
.tab { border: 0; background: none; padding: .55rem .8rem; cursor: pointer; border-bottom: 3px solid transparent; color: var(--zacht); white-space: nowrap; }
.tab:hover { color: var(--kop); }
.tab.actief { color: var(--kop); border-bottom-color: var(--rand); font-weight: 600; }

/* Dialoog */
dialog { border: 1px solid var(--rand); border-radius: var(--rond); background: var(--kaart); color: var(--tekst); padding: 1rem; width: min(560px, calc(100% - 2rem)); }
dialog::backdrop { background: rgba(17, 1, 40, .45); }
dialog.breed { width: min(860px, calc(100% - 2rem)); }
dialog .kaart { box-shadow: none; border: 0; padding: 0; margin: 0; }

/* Planning: tegels met takenlijsten en klantblokken. Op desktop 2 kolommen, op de telefoon 1.
   Achtergrond per klant via --klantkleur, klantlabel via --klantdonker (beide gezet met JavaScript). */
/* Metselverband én sleepbaar: een raster met heel lage rijen, waarbij JavaScript per tegel
   uitrekent hoeveel rijen hij nodig heeft (zie planning.js). Zo blijven er geen gaten open. */
.tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 8px;
  column-gap: 1rem; row-gap: 0; align-items: start; margin-bottom: 1rem; }
.tegel { background: var(--klantkleur, var(--kaart)); border: 1px solid var(--rand); border-radius: var(--rond);
  box-shadow: var(--schaduw); padding: .9rem 1rem; }
.tegel.sleept { opacity: .5; }
.tegel.sleept-gekozen { outline: 2px solid var(--rand); }
.tegel.sleept-nu { box-shadow: 0 8px 20px rgba(17, 1, 40, .22); }
.tegelgreep { border: 0; background: none; color: var(--zacht); cursor: grab; font-size: 1.05rem; line-height: 1;
  padding: .1rem .25rem 0 0; touch-action: none; }
.tegelgreep:active { cursor: grabbing; }
.tegel-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; }
.tegel h3 { margin: 0; font-size: 1rem; }
.tegel.klantblok h3 { font-size: 1.2rem; }
.tegel h3.lijsttitel { margin-top: .4rem; font-size: .85rem; font-weight: 600; }
.tegel-menu { display: flex; gap: .25rem; flex-shrink: 0; }
.klantlabel { display: inline-block; background: var(--klantdonker, var(--kop)); color: #fff; border: 0; border-radius: 99px;
  padding: .2rem .8rem; font-size: 1rem; font-weight: 600; cursor: pointer; }
.klantlabel:hover { filter: brightness(1.15); }
.sectie { font-size: 1.4rem; margin: .5rem 0 1rem; padding-bottom: .35rem; border-bottom: 2px solid var(--rand); }
.sectie + .tegels { margin-top: 0; }
.taken { list-style: none; margin: 0; padding: 0; }
/* Vier kolommen: greep, vinkje, tekst, en rechts één blok met de naam boven de knoppen. Met alle
   knoppen naast de naam bleef er te weinig over voor de taaktekst zelf (19-09-2026). */
.taak { display: grid; grid-template-columns: auto auto 1fr auto; gap: .45rem; align-items: start; padding: .4rem 0; border-bottom: 1px dashed rgba(17, 1, 40, .12); }
.taak-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.taak-acties { display: flex; gap: .3rem; }

/* Doorgegeven aan wie de taak doet (19-09-2026): grijs = nog niet, groen = wel. Geen tekst
   erbij, want de rij is al vol; de uitleg staat in de tooltip. */
.doorgeef { color: var(--zacht); opacity: .55; line-height: 1.1; }
.doorgeef:hover { opacity: 1; }
.doorgeef.aan { background: var(--ok); border-color: var(--ok); color: #fff; opacity: 1; }

/* Takenlijst die alleen beheer ziet (schema 018, 21-09-2026). */
.label-beheer { display: inline-block; font-size: .7rem; font-weight: 700; color: #fff; background: var(--kop);
  border-radius: 999px; padding: .1rem .45rem; margin-left: .35rem; white-space: nowrap; }
/* Greepje om te slepen (werkt met muis en op de telefoon) */
.greep { border: 0; background: none; color: var(--zacht); cursor: grab; font-size: 1.05rem; line-height: 1.2;
  padding: 0 .1rem; touch-action: none; }
.greep:active { cursor: grabbing; }
/* Slepen met SortableJS: .sleept = de plek waar hij komt, .sleept-nu = de taak in je hand */
.taak.sleept { background: var(--rand-zacht); border-radius: 6px; opacity: .5; }
.taak.sleept-gekozen { background: var(--rand-zacht); border-radius: 6px; }
.taak.sleept-nu { background: var(--kaart); border-radius: 6px; box-shadow: 0 4px 12px rgba(17, 1, 40, .18); }
/* Eigen selectievakje: de standaard van de browser laat geen dikkere rand of rondere hoeken toe */
.taak input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 1.35rem; height: 1.35rem;
  margin: .05rem 0 0; border: 2px solid var(--rand); border-radius: 7px; background: var(--kaart);
  box-shadow: none; cursor: pointer; display: grid; place-content: center; }
.taak input[type=checkbox]::before { content: ""; width: .8rem; height: .8rem; transform: scale(0);
  transition: transform .12s ease-in-out; background: var(--klantdonker, var(--rand));
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 86% 4%, 40% 72%); }
.taak input[type=checkbox]:checked::before { transform: scale(1); }
.taak input[type=checkbox]:focus-visible { outline: 2px solid var(--rand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .taak input[type=checkbox]::before { transition: none; } }
.taak.klaar .taak-tekst { text-decoration: line-through; color: var(--zacht); }
/* pre-wrap: een taak mag meerdere regels hebben (Shift+Enter, 21-09-2026); zonder dit zou een
   regeleinde als spatie worden getoond. */
.taak-tekst { white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.taak-wie, .taak-nieuw input, .taak-nieuw textarea, .taak-nieuw select, .taak-bewerk { border: 1px solid var(--rand); border-radius: 6px; padding: .3rem .4rem; background: var(--kaart); min-width: 0; }
/* De invoervelden voor taken zijn textareas die meegroeien: geen sleepgreep, geen scrollbalk. */
.taak-nieuw textarea, .taak-bewerk { width: 100%; resize: none; overflow: hidden; font: inherit; line-height: 1.35; }
.taak-wie { font-size: .8rem; max-width: 8.5rem; }
.taak-nieuw { display: grid; grid-template-columns: 1fr auto auto; gap: .35rem; margin-top: .6rem; }
/* Aantekeningen per klant (vergaderingen, afspraken); over de volle breedte */
.tegel.aantekeningen { grid-column: 1 / -1; }
.notitie-nieuw textarea { width: 100%; min-height: 4.5rem; border: 1px solid var(--rand); border-radius: 8px;
  padding: .5rem .6rem; background: var(--kaart); resize: vertical; }
.notitie-bewerk { width: 100%; min-height: 4.5rem; border: 1px solid var(--rand); border-radius: 8px;
  padding: .5rem .6rem; background: var(--kaart); resize: vertical; }
.notities { list-style: none; margin: .9rem 0 0; padding: 0; }
.notitie { border-top: 1px dashed rgba(17, 1, 40, .12); padding: .55rem 0; }
.notitie-kop { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .78rem; color: var(--zacht); }
.notitie-wie { font-weight: 600; color: var(--kop); }
.notitie-tekst { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .2rem; }
/* Aantekening die uit een e-mail komt: rood labeltje, onderwerp eronder */
.label-mail { display: inline-block; background: #c2321f; color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .02em; padding: .1rem .4rem; border-radius: 6px; margin-right: .4rem; vertical-align: .05em; }
.notitie-onderwerp { font-size: .82rem; font-weight: 600; color: var(--kop); margin-top: .15rem; }
.notitie-onderwerp a { font-weight: 400; font-size: .78rem; margin-left: .3rem; }
.notitie-knoppen { display: flex; gap: .35rem; margin-top: .4rem; flex-wrap: wrap; }
/* Lange inhoud in een tegel: schuiven binnen het blok, met een knop om alles uit te klappen */
.schuif-venster { max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; }
.schuif-venster.uitgeklapt { max-height: none; overflow-y: visible; }
.schuif-meer { margin-top: .5rem; }

/* Draaiend rondje op een knop die staat te wachten (bijv. Claude die meeleest) */
.spinner { display: inline-block; width: .85em; height: .85em; margin-right: .45em; vertical-align: -.1em;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: draai .7s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.knop.bezig { cursor: progress; }

/* Proefscan bij de mailregels: per gevonden mail wat de scan ervan zou maken */
.mailproef { margin-top: 1rem; }
.mailproef h3 { font-size: .95rem; margin: 0 0 .5rem; }
.mailproef-rij { border: 1px solid var(--lijn); border-left: 3px solid var(--zacht); border-radius: 8px;
  padding: .55rem .7rem; margin-bottom: .6rem; }
.mailproef-rij.raak { border-left-color: var(--ok); }
.mailproef-kop { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; justify-content: space-between; }
.mailproef-rij textarea { width: 100%; border: 1px solid var(--rand); border-radius: 6px; padding: .35rem .45rem;
  background: var(--kaart); resize: vertical; font: inherit; margin-top: .3rem; }

/* Zwevende assistent rechtsonder: knop plus paneel */
.assistent { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.assistent-knop { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: none; cursor: pointer;
  background: var(--merk); color: var(--knop-tekst); font-size: 1.4rem; line-height: 1;
  box-shadow: 0 6px 18px rgba(17, 1, 40, .28); }
.assistent-knop:focus-visible { outline: 3px solid var(--rand); outline-offset: 2px; }
.assistent-paneel { width: min(27rem, calc(100vw - 2rem)); max-height: min(34rem, 75vh);
  display: flex; flex-direction: column; background: var(--kaart); border: 1px solid var(--rand);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(17, 1, 40, .22); overflow: hidden; }
.assistent-kop { display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem;
  border-bottom: 1px solid var(--lijn); background: var(--kop); color: #fff; }
.assistent-kop .knop { background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent; }
.assistent-lijst { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .7rem;
  display: flex; flex-direction: column; gap: .5rem; }
.assistent-invoer { border-top: 1px solid var(--lijn); padding: .6rem .7rem; }
.assistent-invoer textarea { width: 100%; border: 1px solid var(--rand); border-radius: 8px;
  padding: .45rem .55rem; background: var(--kaart); resize: vertical; font: inherit; }
.assistent-invoer .acties { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.chat-acties { margin-top: .35rem; display: flex; gap: .35rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .assistent { right: .6rem; bottom: .6rem; left: .6rem; align-items: stretch; }
  .assistent-paneel { width: auto; max-height: 70vh; }
  .assistent-knop { align-self: flex-end; }
}

/* Gesprek: vraag en antwoord */
.tegel.chat { grid-column: 1 / -1; }
.chat-lijst { display: flex; flex-direction: column; gap: .5rem; }
.chat-bericht { border-radius: 10px; padding: .5rem .65rem; }
.chat-bericht.vraag { background: rgba(89, 101, 233, .1); }
.chat-bericht.antwoord { background: var(--kaart); border: 1px solid var(--lijn); }
.chat-wie { font-size: .75rem; color: var(--zacht); margin-bottom: .15rem; }
.chat-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-wacht { color: var(--zacht); }
/* Antwoorden van Claude met opmaak (U.opmaak, 24-09-2026) */
.chat-tekst.opmaak { white-space: normal; line-height: 1.5; }
.opmaak > :first-child { margin-top: 0; }
.opmaak > :last-child { margin-bottom: 0; }
.opmaak p, .opmaak ul, .opmaak ol, .opmaak blockquote, .opmaak pre, .opmaak .tabel-schuif { margin: 0 0 .6rem; }
.opmaak ul, .opmaak ol { padding-left: 1.3rem; }
.opmaak li { margin: .15rem 0; }
.opmaak li > ul, .opmaak li > ol, .opmaak li > p { margin: .15rem 0 0; }
.opmaak h3, .opmaak h4, .opmaak h5, .opmaak h6 { color: var(--kop); margin: .9rem 0 .35rem; line-height: 1.3; }
.opmaak h3 { font-size: 1.05rem; }
.opmaak h4 { font-size: 1rem; }
.opmaak h5, .opmaak h6 { font-size: .95rem; }
.opmaak strong { color: var(--kop); }
.opmaak a { color: var(--rand); overflow-wrap: anywhere; }
.opmaak code { background: var(--rand-zacht); border-radius: 4px; padding: .05rem .3rem; font-size: .88em; }
.opmaak pre { background: var(--rand-zacht); border-radius: 8px; padding: .5rem .65rem; overflow-x: auto; white-space: pre; }
.opmaak pre code { background: none; padding: 0; }
.opmaak blockquote { border-left: 3px solid var(--rand); padding: .1rem 0 .1rem .65rem; color: var(--zacht); }
.opmaak hr { border: none; border-top: 1px solid var(--lijn); margin: .8rem 0; }
.opmaak .tabel-schuif { overflow-x: auto; }
.opmaak table { border-collapse: collapse; font-size: .88rem; min-width: 100%; }
.opmaak th, .opmaak td { border: 1px solid var(--lijn); padding: .3rem .45rem; text-align: left; vertical-align: top; }
.opmaak th { background: var(--rand-zacht); color: var(--kop); }
.chat-nieuw { margin-top: .7rem; }
.chat-nieuw textarea { width: 100%; min-height: 3rem; border: 1px solid var(--rand); border-radius: 8px;
  padding: .5rem .6rem; background: var(--kaart); resize: vertical; font: inherit; }

/* Voorstellen van Claude bij een aantekening: aanvinken wat je overneemt */
.voorstel-groep { margin-top: .9rem; }
.voorstel-groep h3 { font-size: .9rem; margin: 0 0 .35rem; }
.voorstel { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: start;
  padding: .45rem 0; border-top: 1px dashed var(--lijn); }
.voorstel .velden { display: grid; grid-template-columns: 1fr auto auto; gap: .35rem; }
.voorstel input[type=text], .voorstel select, .voorstel input[type=date] { border: 1px solid var(--rand);
  border-radius: 6px; padding: .3rem .4rem; background: var(--kaart); min-width: 0; width: 100%; }
.voorstel .breed { grid-column: 1 / -1; }
.voorstel-leeg { color: var(--zacht); font-size: .85rem; }
.voorstel textarea { border: 1px solid var(--rand); border-radius: 6px; padding: .3rem .4rem;
  background: var(--kaart); width: 100%; resize: vertical; font: inherit; }
.voorstel-veldnaam { font-weight: 700; color: var(--kop); font-size: .85rem; align-self: center; }
.voorstel-nu { margin: .2rem 0 0; font-size: .8rem; color: var(--zacht); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) { .voorstel .velden { grid-template-columns: 1fr; } }

dl.info { margin: 0; }
dl.info dt { font-size: .78rem; color: var(--kop); font-weight: 700; margin-top: .45rem; }
dl.info dt:first-child { margin-top: 0; }
dl.info dd { margin: 0; overflow-wrap: anywhere; }
ul.punten { margin: .2rem 0; padding-left: 1.1rem; }
ul.punten li { margin: .2rem 0; overflow-wrap: anywhere; }
ul.punten a { color: var(--kop); font-weight: 600; }
h4.do, h4.dont { margin: .5rem 0 .1rem; font-size: .85rem; }
h4.do { color: var(--ok); }
h4.dont { color: var(--fout); }
.klein { font-size: .78rem; }
.vink { display: flex; align-items: center; gap: .4rem; color: var(--kop) !important; font-weight: 400 !important; white-space: nowrap; }
/* Zes velden sinds de sterfilter erbij kwam (21-09-2026): Alle, ⭐ Vast pakket, klant,
   medewerker, afgeronde taken, nieuwe lijst. */
.filters.planning { grid-template-columns: auto auto 1fr 1fr auto auto; }
.tool-rij { display: grid; grid-template-columns: 1fr 1.4fr 1fr auto; gap: .35rem; margin-bottom: .35rem; }
.tool-rij input { border: 1px solid var(--rand); border-radius: 6px; padding: .4rem .5rem; background: var(--kaart); min-width: 0; }

/* Bijlagen bij aantekeningen en bij de assistent (19-09-2026). */
.bijlagen { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bijlagen.gekozen { margin: .4rem 0; }
.bijlage { display: flex; align-items: center; gap: .3rem; font-size: .78rem; max-width: 100%;
  background: rgba(89, 101, 233, .07); border: 1px solid var(--rand); border-radius: 8px; padding: .2rem .45rem; }
.bijlage a { color: var(--kop); font-weight: 600; overflow-wrap: anywhere; }
.bijlage.beeld { padding: .15rem; }
.bijlage img { display: block; max-height: 7rem; max-width: 100%; border-radius: 6px; }

@media (max-width: 760px) {
  .tegels { grid-template-columns: 1fr; }
  .filters.planning { grid-template-columns: 1fr 1fr; }
  .tool-rij { grid-template-columns: 1fr 1fr; }
  /* Op een telefoon krijgt de taaktekst de hele breedte; naam en knoppen komen eronder op één
     regel, uitgelijnd met de tekst (19-09-2026). */
  .taak { grid-template-columns: auto auto 1fr; }
  .taak-rechts { grid-column: 3; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .taak-wie { max-width: none; flex: 1 1 auto; }
}