/* Basis, kaarten, knoppen en de indeling van de voorkant. Kleuren, letters en maten komen uit tokens.css. */

/* hidden wint altijd: anders zet een display-regel (zoals .invoer { display: flex }) een verborgen element toch in beeld,
   bijvoorbeeld de invoerbalk op het inlogscherm. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- letters, zelf gehost */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/manrope-latin-800-normal.woff2') format('woff2'); }

/* ---------------------------------------------------------------- basis */

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--achtergrond); color: var(--tekst); font: 400 16px/1.45 var(--letter-tekst); -webkit-text-size-adjust: 100%; }
button, textarea, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--letter-kop); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.leeg { color: var(--secundair); text-align: center; margin: 48px 16px; }

/* ---------------------------------------------------------------- knoppen */

.knoppen { display: flex; gap: 8px; }
.knop {
  flex: 1; min-height: var(--raak); border: 0; border-radius: var(--radius-knop); padding: 10px 16px;
  font-weight: 600; background: var(--knop); color: var(--knop-tekst);
}
.knop.zacht { background: var(--knop-licht); color: var(--knop-licht-tekst); }
.knop:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- inlogscherm */

.inlog { max-width: 360px; margin: 18vh auto 0; padding: 0 16px; }
.inlog h1 { font-weight: 800; font-size: 1.6rem; line-height: 1.2; margin: 0 0 20px; }
.inlog label { display: block; font-size: .9rem; font-weight: 500; color: var(--secundair); margin: 0 0 6px; }
.inlog input {
  display: block; width: 100%; min-height: var(--raak); padding: 10px 14px; margin: 0 0 14px;
  border: 1px solid var(--haarlijn); border-radius: var(--radius-knop); background: var(--vlak);
}
.inlog .fout { color: var(--fout); min-height: 1.4em; font-size: .9rem; margin: 0 0 10px; }
.inlog .knop { width: 100%; }

/* ---------------------------------------------------------------- kop */

.kop {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  min-height: calc(env(safe-area-inset-top) + var(--kop-hoogte));
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--achtergrond); border-bottom: 1px solid var(--haarlijn);
}
.merk { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo { display: inline-flex; background: var(--logo-vlak); padding: var(--logo-rand); border-radius: 6px; }
.logo img { display: block; height: 22px; width: auto; }
.dag { color: var(--secundair); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.terug {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: var(--raak); margin-left: -8px; padding: 0 12px 0 6px;
  border: 0; border-radius: var(--radius-knop); background: none; font-size: .95rem; font-weight: 600;
}
.terug span { font-size: 1.7rem; line-height: 1; margin-top: -4px; }
.stip { width: 10px; height: 10px; border-radius: 50%; background: var(--secundair); flex: none; margin-left: auto; }
.stip.aan { background: var(--goed); }
.stip.uit { background: var(--fout); }
.meldingen {
  flex: none; min-height: var(--raak); padding: 0 14px;
  border: 1px solid var(--haarlijn); border-radius: 999px; background: var(--vlak); font-size: .85rem; font-weight: 500;
}
/* Op de telefoon staat in een dossier alleen Terug in de kop; het dossier heeft zijn eigen kop. */
body[data-scherm="dossier"] .merk { display: none; }

.balk { padding: 10px 16px; background: var(--waarschuwing-vlak); color: var(--waarschuwing); font-size: .92rem; border-bottom: 1px solid var(--haarlijn); }

/* ---------------------------------------------------------------- indeling: op de telefoon één vak tegelijk */

.start, .dossier { padding: 12px 16px calc(env(safe-area-inset-bottom) + 150px); max-width: 760px; margin: 0 auto; }
body[data-scherm="dossier"] .start, body[data-scherm="start"] .dossier { display: none; }

.leeg-dossier { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; color: var(--secundair); }
.leeg-dossier p { margin: 0; font-size: .92rem; }

/* ---------------------------------------------------------------- startscherm: netwerk, chips, Voor jou, blokken, afgerond */

.start-net { margin: 0 0 6px; }
.start-net .net { margin: 0 auto; }
/* Na de eerste keer tekent een bijgewerkt netwerk direct in eindstand; alleen de adem en het puntje lopen door. */
.start-net.zonder-intro .net-lijn, .start-net.zonder-intro .net-later .net-knoop, .start-net.zonder-intro .net-later .net-letter,
.start-net.zonder-intro .net-later .net-naam, .start-net.zonder-intro .net-merk { animation: none; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: var(--raak); padding: 0 13px;
  font-size: .85rem; font-weight: 600; border: 1px solid var(--haarlijn); border-radius: 999px; background: var(--vlak);
}
.chip i { font-style: normal; color: var(--accent-tekst); font-variant-numeric: tabular-nums; }
.chip[aria-pressed=true] { background: var(--knop); color: var(--knop-tekst); border-color: var(--knop); }
.chip[aria-pressed=true] i { color: var(--accent-op-knop); }

.sectie { margin: 0 0 18px; }
.kopje {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px;
  font: 800 .78rem/1.3 var(--letter-kop); letter-spacing: .03em; text-transform: uppercase; color: var(--secundair);
}
.kopje b { color: var(--tekst); font-variant-numeric: tabular-nums; }
.rustig { color: var(--secundair); font-size: .9rem; margin: 4px 0 12px; }

/* Een kaart uit Voor jou: blauwe streep, soortregel in klein blauw, titel, subregel en de directe acties.
   De titel is een link die de hele kaart bedekt; knoppen liggen erboven. */
.kaart {
  position: relative; background: var(--vlak); border: 1px solid var(--haarlijn); border-radius: var(--radius-kaart);
  padding: 11px 14px 12px; margin-bottom: 8px;
}
.kaart.todo { border-left: 4px solid var(--accent); padding-left: 12px; }
.kaart[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--tekst); }
/* Kleine blauwe tekst gebruikt --accent-tekst (leesbaar op wit en ivoor); strepen, stippen en badges --accent. */
.kaart .soort, .soortregel { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-tekst); overflow-wrap: anywhere; }
.kaart-titel { display: block; margin: 2px 0 3px; font: 700 .98rem/1.3 var(--letter-kop); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.kaart-titel::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-kaart); }
.kaart-titel:focus-visible { outline: none; }
.kaart-titel:focus-visible::after { outline: 2px solid var(--tekst); outline-offset: 2px; }
.kaart .sub { font-size: .85rem; color: var(--secundair); overflow-wrap: anywhere; }
.kaart .sub strong { font-weight: 600; }
.kaart .sub .label { margin: 0 6px 0 0; }
.kaart .knoppen, .kaart .mailfout { position: relative; z-index: 1; }
.kaart .knoppen { margin-top: 10px; }
.kaart .knop { flex: 0 0 auto; padding: 0 18px; }
a.knop { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Meldingen bovenaan Voor jou (en bovenaan het dossier): een 409 met de echte stand, een fout, of de bevestiging. */
.melding {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 10px 6px 10px 12px;
  background: var(--vlak); border: 1px solid var(--haarlijn); border-radius: var(--radius-kaart); font-size: .9rem; overflow-wrap: anywhere;
}
.melding.fout { border-color: var(--fout); }
.melding.goed { border-color: var(--goed); }
.melding-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 2px; }
.melding-tekst strong { font-family: var(--letter-kop); font-weight: 700; }
.melding-stand { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--haarlijn); color: var(--secundair); }
.melding.goed .melding-stand { color: var(--goed); }
.melding.fout .melding-bericht, .dossier > .melding.fout { color: var(--fout); }
.melding-acties { flex: none; display: flex; align-items: center; }
.melding-acties a { display: inline-flex; align-items: center; min-height: var(--raak); padding: 0 8px; font-size: .85rem; font-weight: 600; }
.melding-weg { width: var(--raak); height: var(--raak); border: 0; border-radius: var(--radius-knop); background: none; color: var(--secundair); font-size: 1.3rem; line-height: 1; }

/* Blokken per soort en de afgeronde opdrachten: korte rijen. */
.rijen { background: var(--vlak); border: 1px solid var(--haarlijn); border-radius: var(--radius-kaart); padding: 0 14px; }
.rijen .rustig { margin: 12px 0; text-align: center; }
.rij {
  display: flex; align-items: center; gap: 10px; min-height: var(--raak); padding: 8px 0;
  border-bottom: 1px solid var(--haarlijn); color: inherit; text-decoration: none; font-size: .92rem;
}
.rij:last-child { border-bottom: 0; }
.rij[aria-current="true"] { margin: 0 -10px; padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--tekst); }
.rij .wat { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rijstatus { flex: none; color: var(--secundair); font-size: .82rem; font-variant-numeric: tabular-nums; }
.rijstip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--toekomstig); }
.rijstip.bezig, .rijstip.wacht_op_akkoord { background: var(--accent); }

.afgerond { margin: 4px 0 18px; }
.afgerond-regel {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: var(--raak); padding: 10px;
  border: 1px dashed var(--toekomstig); border-radius: var(--radius-kaart); background: none; color: var(--secundair);
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
.afgerond-regel .pijl { display: inline-block; transition: transform .2s; }
.afgerond-regel[aria-expanded="true"] .pijl { transform: rotate(90deg); }
.afgerond-inhoud { margin-top: 10px; }
.afgerond-inhoud input[type=search] {
  width: 100%; min-height: var(--raak); padding: 10px 14px; margin-bottom: 8px;
  border: 1px solid var(--haarlijn); border-radius: var(--radius-knop); background: var(--vlak);
}

/* ---------------------------------------------------------------- labels */

.label {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--haarlijn); color: var(--secundair);
}
.label.bezig, .label.nieuw { color: var(--tekst); }
.label.bezig::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px;
  background: var(--accent); animation: puls 1.2s infinite ease-in-out;
}
.label.wacht_op_akkoord, .label.wacht_op_jou { background: var(--waarschuwing-vlak); color: var(--waarschuwing); border-color: transparent; }
.label.klaar { color: var(--goed); }
.label.mislukt { color: var(--fout); border-color: var(--fout); }
.label.geannuleerd, .label.wacht_op_limiet { color: var(--secundair); }
@keyframes puls { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- dossier: draad en werkstappen */

.draad { display: flex; flex-direction: column; gap: 10px; }
.bericht { max-width: 92%; padding: 10px 13px; border-radius: var(--radius-kaart); overflow-wrap: anywhere; }
.bericht.gino { align-self: flex-end; background: var(--bel-ik); color: var(--bel-ik-tekst); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.bericht.agent { align-self: flex-start; background: var(--vlak); border: 1px solid var(--haarlijn); border-bottom-left-radius: 4px; }
.bericht.systeem { align-self: center; color: var(--secundair); font-size: .88rem; text-align: center; max-width: 100%; }
.bericht .tijd { display: block; font-size: .72rem; opacity: .65; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bericht.agent p { margin: 0 0 .6em; }
.bericht.agent p:last-child { margin-bottom: 0; }
.bericht.agent pre { background: var(--achtergrond); border: 1px solid var(--haarlijn); border-radius: 8px; padding: 8px; overflow-x: auto; font-size: .82rem; }
.bericht.agent code { font-size: .88em; }
.bericht.agent ul { margin: 0 0 .6em; padding-left: 1.2em; }

.stappen { align-self: flex-start; width: 100%; font-size: .85rem; color: var(--secundair); border-left: 2px solid var(--haarlijn); padding: 2px 0 2px 10px; }
/* Uitklapregels zijn aanraakvlakken: minstens 44px hoog. */
.stappen summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: var(--raak); }
.stappen summary::-webkit-details-marker { display: none; }
.stappen .regel { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- akkoord: wacht op jou, dus de blauwe streep */

.akkoord { background: var(--vlak); border: 1px solid var(--haarlijn); border-left: 4px solid var(--accent); border-radius: var(--radius-kaart); padding: 12px 14px; }
.akkoord h3 { font-weight: 700; font-size: 1.02rem; line-height: 1.3; margin: 0 0 4px; }
.akkoord .wat { font-weight: 600; margin-bottom: 8px; }
.akkoord details { font-size: .82rem; margin-bottom: 10px; }
.akkoord summary { cursor: pointer; min-height: var(--raak); line-height: var(--raak); }
.akkoord pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--achtergrond); border-radius: 8px; padding: 8px; margin: 6px 0 0; }
.akkoord textarea, .mail textarea {
  width: 100%; margin-bottom: 8px; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--haarlijn); border-radius: var(--radius-knop); background: var(--achtergrond);
}

/* ---------------------------------------------------------------- mailkaart */

.mail { background: var(--vlak); border: 1px solid var(--haarlijn); border-radius: var(--radius-kaart); padding: 12px 14px; }
/* Past de stand er niet naast, dan schuift hij onder wie en aan wie (smal scherm). */
.mailkop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; align-items: flex-start; font-size: .9rem; }
.mailkop-wie { flex: 1 1 15em; min-width: 0; overflow-wrap: anywhere; }
.mailkop strong { font-weight: 600; }
.mail-onderwerp { margin: 2px 0 8px; font-size: .88rem; color: var(--secundair); overflow-wrap: anywhere; }
.nog { display: inline-block; margin: 0 0 8px; padding: 3px 8px; border-radius: 6px; font-size: .8rem; font-weight: 600; background: var(--waarschuwing-vlak); color: var(--waarschuwing); }
.mailstatus { flex: none; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--haarlijn); color: var(--secundair); }
.mailstatus.verstuurd { color: var(--goed); }
.mailstatus.mislukt { color: var(--fout); border-color: var(--fout); }
.mailstatus.concept, .mailstatus.versturen { background: var(--waarschuwing-vlak); color: var(--waarschuwing); border-color: transparent; }
.mailrij { font-size: .9rem; overflow-wrap: anywhere; }
.mailrij span { color: var(--secundair); display: inline-block; min-width: 5.2em; }
.mailtekst {
  white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .92rem; line-height: 1.5;
  background: var(--achtergrond); border: 1px solid var(--haarlijn); border-radius: var(--radius-knop); padding: 10px; margin: 8px 0;
}
.hint { color: var(--secundair); font-size: .82rem; margin-top: 6px; }
.mailfout { color: var(--fout); border: 1px solid var(--fout); border-radius: 8px; padding: 6px 10px; font-size: .88rem; margin-top: 8px; }

/* ---------------------------------------------------------------- dossier: kop, feiten, voorstel en gesprek */

.dossier-kop { margin: 2px 0 12px; }
.dossier-titel { margin: 4px 0 0; font-weight: 800; font-size: 1.3rem; line-height: 1.25; overflow-wrap: anywhere; }
.feiten-blok { margin: 0 0 12px; }
.feiten-kop { margin: 0 0 6px; font: 700 .95rem/1.3 var(--letter-kop); overflow-wrap: anywhere; }
.feiten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 12px 14px;
  background: var(--vlak); border: 1px solid var(--haarlijn); border-radius: var(--radius-kaart);
}
.feiten dt { color: var(--secundair); font-size: .74rem; }
.feiten dd { margin: 0; font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.voorstel { display: flex; flex-direction: column; gap: 12px; }
.offerte-groep { display: flex; flex-direction: column; gap: 0; }
.offerte-groep + .offerte-groep { padding-top: 14px; border-top: 1px solid var(--haarlijn); }
.offerte-groep .feiten-blok { margin-bottom: 8px; }
.offerte-groep .rustig { margin: 0; }

.gesprek { margin-top: 14px; }
.gesprek > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: var(--raak); padding: 0 14px;
  list-style: none; cursor: pointer; border: 1px dashed var(--toekomstig); border-radius: 10px; color: var(--secundair); font-size: .92rem;
}
.gesprek > summary::-webkit-details-marker { display: none; }
.gesprek > summary .aantal { font-variant-numeric: tabular-nums; }
.gesprek > summary .pijl { display: inline-block; transition: transform .2s; }
.gesprek[open] > summary .pijl { transform: rotate(90deg); }
.gesprek > .draad { margin-top: 12px; }

/* ---------------------------------------------------------------- wat er echt gebeurde, voet en annuleren */

.echt { margin-top: 16px; background: var(--vlak); border: 1px solid var(--haarlijn); border-radius: var(--radius-kaart); padding: 12px 14px; }
.echt h3 { font-weight: 700; font-size: 1.02rem; line-height: 1.3; margin: 0 0 6px; }
.echt ul { list-style: none; margin: 0; padding: 0; }
.echt li { padding: 4px 3.4em 4px 1.6em; position: relative; overflow-wrap: anywhere; font-size: .92rem; }
.echt .vink { position: absolute; left: 0; font-weight: 700; }
.echt .tijd { position: absolute; right: 0; top: 5px; color: var(--secundair); font-size: .8rem; font-variant-numeric: tabular-nums; }
.echt .ja .vink { color: var(--goed); }
.echt .nee .vink { color: var(--fout); }
/* Geen fout, ook geen vinkje: een concept, een verzending die loopt, een afgewezen of vervallen concept. */
.echt .neutraal .vink { color: var(--secundair); }
.echt .res { display: block; color: var(--secundair); font-size: .82rem; }

.voet { color: var(--secundair); font-size: .8rem; text-align: center; margin: 18px 0 4px; font-variant-numeric: tabular-nums; }
.annuleer { display: block; min-height: var(--raak); margin: 12px auto 0; padding: 0 12px; border: 0; background: none; color: var(--fout); font-size: .9rem; text-decoration: underline; }

/* ---------------------------------------------------------------- invoer */

.invoer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--vlak); border-top: 1px solid var(--haarlijn);
}
.invoer select { flex: 1 0 100%; min-height: var(--raak); padding: 8px 12px; font-size: .9rem; border: 1px solid var(--haarlijn); border-radius: var(--radius-knop); background: var(--vlak); }
.invoer textarea {
  flex: 1; resize: none; max-height: 40vh; min-height: var(--raak); padding: 10px 16px; line-height: 1.35;
  border: 1px solid var(--haarlijn); border-radius: 22px; background: var(--vlak);
}
.invoer textarea:disabled { opacity: .6; }
.invoer button { width: var(--raak); height: var(--raak); flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: var(--op-accent); }
.invoer button:disabled { opacity: .4; }

/* ---------------------------------------------------------------- paneel van een medewerker */

/* Op de telefoon een vel van onder over het gedimde startscherm; in de brede indeling over de linkerkolom (onderaan). */
.paneel-achter { position: fixed; inset: 0; z-index: 30; background: var(--dim); }
.paneel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; display: flex; flex-direction: column;
  max-height: 82vh; max-height: 82dvh; padding-bottom: env(safe-area-inset-bottom);
  background: var(--vlak); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .12); outline: none;
}
/* De bovenrand scrolt niet mee: de greep om te vegen in het midden, Sluiten rechts. */
.paneel-bovenrand { flex: none; position: relative; height: var(--raak); }
.paneel-greep { position: absolute; inset: 0 var(--raak); display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.paneel-greep span { width: 38px; height: 4px; border-radius: 4px; background: var(--toekomstig); }
.paneel-sluit {
  position: absolute; top: 0; right: 6px; width: var(--raak); height: var(--raak);
  border: 0; border-radius: var(--radius-knop); background: none; color: var(--secundair); font-size: 1.5rem; line-height: 1;
}
.paneel-inhoud { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 12px; }
.paneel-inhoud > .leeg { margin: 32px 16px; }

.wie { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; touch-action: none; }
.avatar {
  flex: none; position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  border: 1.4px solid var(--tekst); border-radius: 50%; font: 800 1.05rem/1 var(--letter-kop);
}
.avatar.werkt::after { content: ''; position: absolute; inset: -5px; border: 1px solid var(--accent); border-radius: 50%; opacity: .6; }
.wie-tekst { flex: 1; min-width: 0; }
.wie-naam { margin: 0; font-weight: 800; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.wie-rol { color: var(--secundair); font-size: .8rem; overflow-wrap: anywhere; }
/* Op een regel: een lange titel van de opdracht eindigt op een beletselteken (de hele tekst staat in title). */
.wie-bezig { margin-top: 2px; color: var(--accent-tekst); font-size: .75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wie-bezig.later { color: var(--secundair); }

.rij.deed .deed-tijd { flex: none; min-width: 3.1em; color: var(--secundair); font-size: .82rem; font-variant-numeric: tabular-nums; }
.rij.deed .wat { flex: 0 1 auto; }
.rij.deed .rijstatus { flex: 1 1 auto; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rijstatus .vink { font-weight: 700; }
.vink.ja { color: var(--goed); }
.vink.nee { color: var(--fout); }
.meer {
  display: flex; align-items: center; gap: 6px; min-height: var(--raak); margin: 2px 0 0; padding: 0;
  border: 0; background: none; color: var(--secundair); font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.meer .pijl { display: inline-block; transition: transform .2s; }
.meer[aria-expanded="true"] .pijl { transform: rotate(90deg); }

.afspraak { padding: 4px 0; border-bottom: 1px solid var(--haarlijn); }
.afspraak:last-child { border-bottom: 0; }
.afspraak-rij { display: flex; align-items: center; gap: 6px; min-height: var(--raak); }
.afspraak-wie { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: .9rem; overflow-wrap: anywhere; }
.afspraak-wie .klant { font-weight: 600; }
.tag { padding: 3px 8px; border-radius: 20px; background: var(--knop-licht); color: var(--knop-licht-tekst); font-size: .74rem; font-weight: 600; overflow-wrap: anywhere; }
.afspraak-uitleg { color: var(--secundair); font-size: .78rem; }
.afspraak-knoppen { flex: none; display: flex; }
.link {
  min-height: var(--raak); padding: 0 8px; border: 0; background: none; color: var(--tekst);
  font-size: .85rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--haarlijn); text-underline-offset: 3px;
}
.link:disabled { opacity: .5; cursor: default; }
.afspraak .mailfout { margin: 4px 0 6px; }
.afspraak-form { display: grid; gap: 10px; padding: 8px 0 8px; }
.vinkveld { display: flex; align-items: center; gap: 10px; min-height: var(--raak); font-size: .92rem; }
.vinkveld input { width: 20px; height: 20px; margin: 0; accent-color: var(--knop); }
.veld { display: grid; gap: 4px; color: var(--secundair); font-size: .8rem; }
.veld input {
  min-height: var(--raak); padding: 8px 12px; border: 1px solid var(--haarlijn); border-radius: var(--radius-knop);
  background: var(--achtergrond); color: var(--tekst); font-size: 1rem;
}
.afspraak-form .knop { flex: 0 0 auto; padding: 0 18px; }

.paneel-invoer {
  flex: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px 14px;
  border-top: 1px solid var(--haarlijn); background: var(--vlak);
}
.paneel-invoer textarea {
  flex: 1; min-width: 0; min-height: var(--raak); max-height: 30vh; padding: 10px 16px; resize: none; line-height: 1.35;
  border: 1px solid var(--haarlijn); border-radius: 22px; background: var(--vlak);
}
.paneel-invoer button { flex: none; display: grid; place-items: center; width: var(--raak); height: var(--raak); border: 0; border-radius: 50%; background: var(--accent); color: var(--op-accent); }
.paneel-invoer button:disabled { opacity: .4; }
.paneel-invoer .mailfout { flex: 1 0 100%; margin: 0; }

/* Achter het open paneel scrolt de pagina niet mee (telefoon). */
@media (max-width: 899.98px) {
  body.paneel-open { overflow: hidden; }
}

@media (prefers-reduced-motion: no-preference) {
  .paneel { animation: paneel-omhoog .5s cubic-bezier(.2, .8, .2, 1) backwards; transition: transform .3s cubic-bezier(.4, 0, .6, 1); }
  .paneel.sleept { transition: none; }
  .paneel-achter { animation: paneel-dim .5s ease-out backwards; transition: opacity .3s; }
  @keyframes paneel-omhoog { from { transform: translateY(100%); } }
  @keyframes paneel-dim { from { opacity: 0; } }
}
/* Tijdens het dichtgaan is niets meer aan te tikken (geen tweede Versturen op een kaart die wegschuift). */
.paneel.weg { transform: translateY(100%); pointer-events: none; }
.paneel-achter.weg { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- breed scherm: twee kolommen */

@media (min-width: 900px) {
  .app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
  .kop, .balk { flex: none; }
  /* Het logo houdt de breedte van de linkerkolom, de titel van het dossier staat erboven rechts. */
  .merk, body[data-scherm="dossier"] .merk { display: flex; flex: none; width: calc(340px - 26px); }
  .terug { margin-left: 0; }
  .indeling { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
  body[data-scherm] .start, body[data-scherm] .dossier { display: block; }
  .start, .dossier { max-width: none; margin: 0; overflow-y: auto; }
  .start { border-right: 1px solid var(--haarlijn); padding: 12px 16px 24px; }
  .dossier { background: var(--vlak-rechts); padding: 18px max(26px, calc((100% - 820px) / 2)) calc(env(safe-area-inset-bottom) + 150px); }
  .invoer { left: 340px; }
  .dossier-titel { font-size: 1.45rem; }
  .feiten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Het paneel ligt over de linkerkolom; het dossier rechts blijft te zien en te bedienen. */
  .paneel-achter { display: none; }
  .paneel {
    top: calc(env(safe-area-inset-top) + var(--kop-hoogte)); right: auto; width: 340px; max-height: none;
    border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .08), 1px 0 0 var(--haarlijn);
  }
}

/* ---------------------------------------------------------------- minder beweging */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- netwerk */

.net { display: block; width: 100%; height: auto; max-height: 200px; }
.net-lijn { stroke: var(--netwerklijn); stroke-width: 1.1; fill: none; }
.net-lijn.net-later { stroke: var(--toekomstig); stroke-dasharray: 2 4; }
.net-knoop { fill: var(--vlak); stroke: var(--netwerklijn); stroke-width: 1.1; }
.net-treffer { fill: transparent; }
.net-knoop-g[role="button"] { cursor: pointer; }
.net-knoop-g:focus-visible { outline: none; }
.net-knoop-g:focus-visible .net-knoop { stroke: var(--tekst); stroke-width: 2; }
.net-letter { font: 800 11px var(--letter-kop); fill: var(--tekst); text-anchor: middle; dominant-baseline: central; }
.net-naam { font: 600 10px var(--letter-tekst); fill: var(--tekst); text-anchor: middle; }
.net-later .net-knoop { stroke: var(--toekomstig); }
.net-later .net-letter, .net-later .net-naam { fill: var(--secundair); font-weight: 500; }
.net-later .net-naam { font-size: 9px; }
.net-badge { fill: var(--accent); }
.net-badgetekst { font: 700 9px var(--letter-tekst); fill: var(--op-accent); text-anchor: middle; dominant-baseline: central; }
.net-puntje { fill: var(--accent); }
.net-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .5; }
.net-kernring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0; }
#net-raat path { stroke: var(--haarlijn); }
.net-schijf { fill: var(--achtergrond); }

@media (prefers-reduced-motion: no-preference) {
  .net-lijn:not(.net-later) { stroke-dasharray: 100; animation: net-teken 1.6s .3s cubic-bezier(.2, .7, .2, 1) backwards; }
  .net-lijn.net-later, .net-later .net-knoop, .net-later .net-letter, .net-later .net-naam { animation: net-verschijn 1.2s 1.2s ease-out backwards; }
  .net-merk { animation: net-verschijn .9s .1s ease-out backwards; }
  .net-ring { animation: net-adem 2.6s ease-out infinite; }
  .net-kernring { animation: net-kern 4s 1.8s ease-out infinite; }
  @keyframes net-teken { from { stroke-dashoffset: 100; } }
  @keyframes net-verschijn { from { opacity: 0; } }
  @keyframes net-adem { from { r: 16; opacity: .5; } to { r: 27; opacity: 0; } }
  @keyframes net-kern { from { r: 30; opacity: .45; } to { r: 52; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .net-puntje { display: none; }
}

/* ---------------------------------------------------------------- Renda: het scherm van een kaart, de stand en Bon toevoegen */

.bonlink {
  display: inline-flex; align-items: center; min-height: var(--raak); padding: 0 12px; margin-left: auto;
  border-radius: var(--radius-knop); background: var(--knop-licht); color: var(--knop-licht-tekst); font-size: .85rem; font-weight: 600; text-decoration: none;
}
.kaart-detail, .bon-form { background: var(--vlak); border: 1px solid var(--haarlijn); border-radius: var(--radius-kaart); padding: 14px 14px 16px; }
.kaart-detail { border-left: 4px solid var(--accent); padding-left: 12px; }
.kaart-detail h2, .bon-form h2 { margin: 2px 0 10px; font: 800 1.1rem/1.3 var(--letter-kop); overflow-wrap: anywhere; }
.kaart-detail h3 { margin: 14px 0 6px; font: 800 .78rem/1.3 var(--letter-kop); letter-spacing: .03em; text-transform: uppercase; color: var(--secundair); }
.kaart-detail .soort { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-tekst); }
.kaart-detail .knoppen { flex-wrap: wrap; margin-top: 12px; }
.kaart-detail .knop { flex: 1 1 auto; padding: 0 16px; }
.kaart-detail .mailfout, .bon-form .mailfout { margin: 10px 0 0; }
.kaart-detail > .melding { margin: 0 0 10px; }
.reden-renda { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--waarschuwing-vlak); color: var(--waarschuwing); font-size: .88rem; overflow-wrap: anywhere; }
/* Melding van Renda: de tekst per regel; Geen origineel bij een creditnota als eigen blok. */
.melding-kaart-tekst { margin: 0 0 8px; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.kaart-detail .geen-origineel { margin-top: 0; padding: 8px 10px; border: 1px solid var(--haarlijn); border-radius: 8px; background: var(--achtergrond); }
.kaart-detail .geen-origineel .rustig { margin: 0; }
.kaart-detail .velden, .bon-form { display: grid; gap: 10px; }
.kaart-detail .velden { margin-top: 12px; }
.kaart-detail .veld select, .bon-form .veld select, .bon-form .veld input, .kaart-detail .veld input {
  min-height: var(--raak); padding: 8px 12px; border: 1px solid var(--haarlijn); border-radius: var(--radius-knop);
  background: var(--achtergrond); color: var(--tekst); font-size: 1rem; width: 100%; min-width: 0;
}

.feiten { display: grid; gap: 4px; margin: 0 0 6px; }
.feiten > div { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.feiten dt { color: var(--secundair); flex: none; }
.feiten dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
/* Details van een kaart: label boven waarde, twee kolommen op brede schermen, een op smalle. Alleen bij woordgrenzen
   afbreken; een heel lang woord (bestandsnaam) mag als laatste redmiddel overal breken. */
.kaart-detail .feiten { grid-template-columns: minmax(0, 1fr); gap: 10px 16px; padding: 0; background: none; border: 0; }
@media (min-width: 560px) { .kaart-detail .feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kaart-detail .feiten > div { display: block; min-width: 0; }
.kaart-detail .feiten dt { font-size: .74rem; }
.kaart-detail .feiten dd { margin: 2px 0 0; text-align: left; font-weight: 600; overflow-wrap: break-word; word-break: normal; min-width: 0; }
.kandidaat { margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--haarlijn); border-radius: 8px; background: var(--achtergrond); }
.kandidaat h3 { margin-top: 0; }

.fases-tabel { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .9rem; }
.fases-tabel th { text-align: left; font-weight: 500; }
.fases-tabel td { text-align: right; font-variant-numeric: tabular-nums; }
.fases-tabel th, .fases-tabel td { padding: 5px 0; border-bottom: 1px solid var(--haarlijn); overflow-wrap: anywhere; }
.fases-tabel .totaal th, .fases-tabel .totaal td { font-weight: 700; border-bottom: 0; }
.toewijzing ul, .niet-geboekt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9rem; overflow-wrap: anywhere; }
.toewijzing .label { margin: 0 0 0 4px; }
.niet-geboekt li .sub { display: block; color: var(--secundair); font-size: .82rem; }

.dag-regel { padding: 10px 0; border-bottom: 1px solid var(--haarlijn); }
.dag-regel:last-of-type { border-bottom: 0; }
.dag-regel .regel-kop { overflow-wrap: anywhere; }
.dag-regel .sub { font-size: .85rem; color: var(--secundair); overflow-wrap: anywhere; }
.dag-regel .archief-status { margin-top: 2px; font-size: .78rem; font-weight: 600; color: var(--secundair); }
.dag-regel .antwoord { margin: 6px 0 0; font-weight: 600; color: var(--goed); font-size: .9rem; }
.dag-regel.klaar { opacity: .75; }
.dag-regel > .veld { margin-top: 8px; }
.aanpassen { margin-top: 8px; }
.aanpassen summary { min-height: var(--raak); display: flex; align-items: center; font-weight: 600; font-size: .9rem; cursor: pointer; }
.aanpassen .knop { margin-top: 10px; width: 100%; }
.al-beslist { margin: 12px 0 0; font-weight: 600; }

.stand-klus { margin: 0 0 14px; }
.stand-kop { margin: 10px 0 4px; }
.stand-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.stand-tabel thead th { text-align: right; font-size: .72rem; font-weight: 600; color: var(--secundair); padding: 4px 0; }
.stand-tabel thead th:first-child { text-align: left; }
.stand-tabel tbody th { text-align: left; font-weight: 600; padding: 6px 4px 0 0; overflow-wrap: anywhere; }
.stand-tabel tbody td { text-align: right; padding: 6px 0 0 8px; white-space: nowrap; }
.stand-tabel .stand-verschil td { text-align: left; white-space: normal; padding: 0 0 8px; font-size: .8rem; color: var(--secundair); overflow-wrap: anywhere; }
.stand-tabel .stand-fase { border-bottom: 1px solid var(--haarlijn); }
.stand-tabel .boven td { color: var(--fout); }
.stand-tabel .onder td { color: var(--goed); }
.stand-tabel .stand-totaal th, .stand-tabel .stand-totaal td { font-weight: 800; }
.stand-oud, .stand-oorzaken { margin-top: 2px; color: var(--secundair); }

.bon-klaar { padding: 10px 12px; border: 1px solid var(--goed); border-radius: 8px; color: var(--goed); display: grid; gap: 4px; }
.bon-klaar a { font-weight: 600; color: var(--tekst); }

/* ---------------------------------------------------------------- Renda: stand per klus in het paneel */

.paneel-acties { display: flex; margin: 0 0 12px; }
.stand-rij { border-bottom: 1px solid var(--haarlijn); }
.stand-rij:last-child { border-bottom: 0; }
.stand-knop {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; width: 100%; min-height: var(--raak); padding: 8px 0;
  border: 0; background: none; color: var(--tekst); font: inherit; text-align: left; cursor: pointer;
}
.stand-wie { grid-column: 1; overflow-wrap: break-word; font-size: .92rem; }
.stand-uitslag { grid-column: 1; font-size: .8rem; color: var(--secundair); }
.stand-uitslag.boven { color: var(--fout); }
.stand-uitslag.onder { color: var(--goed); }
.stand-knop .pijl { grid-column: 2; grid-row: 1 / span 2; transition: transform .15s; }
.stand-knop[aria-expanded=true] .pijl { transform: rotate(90deg); }
.stand-open { padding: 0 0 12px; }
.stand-regels { margin-top: 8px; }
.stand-regel { padding: 4px 0; border-top: 1px solid var(--haarlijn); }
.stand-regel-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: var(--raak); }
.stand-regel-wie { flex: 1 1 11rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; overflow-wrap: break-word; }
.stand-regel-actie { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.stand-regel-wie .sub { color: var(--secundair); font-size: .78rem; }
.stand-regel-bedrag { flex: none; font-variant-numeric: tabular-nums; font-size: .88rem; }
.stand-form { display: grid; gap: 10px; padding: 6px 0 8px; }
.stand-form .knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.stand-form .knop { flex: 0 0 auto; padding: 0 18px; }
.stand-regel .mailfout { margin: 4px 0 6px; }

/* Foto kiezen op het Bon toevoegen scherm: de echte invoeren zijn onzichtbaar maar blijven bereikbaar met het toetsenbord. */
.foto-keuze { display: grid; gap: 8px; position: relative; }
.foto-keuze .knoppen { flex-wrap: wrap; }
.foto-knop { display: inline-flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; }
.foto-invoer { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.foto-keuze:focus-within .foto-knop { outline: 2px solid var(--accent); outline-offset: 2px; }
.foto-naam { font-size: .85rem; color: var(--secundair); overflow-wrap: anywhere; }

/* Op een telefoon (390 px) past de kop niet: logo, Bon toevoegen, datum, status en Meldingen aanzetten. Het label wordt kort
   en de knop Meldingen aanzetten krijgt een eigen regel onder de kop. */
@media (max-width: 440px) {
  .kop { flex-wrap: wrap; }
  .meldingen { flex: 1 1 100%; }
  .bonlink { font-size: 0; padding: 0 12px; }
  .bonlink::before { content: "+ Bon"; font-size: .85rem; }
}