/* Huisstijl van dossier.coachoverzicht.nl, toegepast op de proefomgeving.
   Bewust dezelfde kleuren en typografie, zodat de overgang van website naar
   product niet voelt als een ander bedrijf. */

:root {
  --papier: #faf6ef;
  --papier-diep: #f3ecdf;
  --inkt: #1c2733;
  --inkt-zacht: #46525f;
  --lijn: #ddd3c2;
  --accent: #9a4a2e;
  --accent-donker: #7c3a22;
  --groen-zacht: #eef2e6;
  --max: 1080px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--sans);
  background: var(--papier);
  color: var(--inkt);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.9rem; margin-bottom: 0.6rem; }
h2 { font-size: 1.45rem; margin-bottom: 0.5rem; }
h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }

a { color: var(--accent); }

/* --------------------------------------------------------------- kopbalk */

.balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.4rem;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--inkt);
  text-decoration: none;
}
.logo small {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.balk-rechts { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

.proefmelding {
  font-size: 0.8rem;
  color: var(--inkt-zacht);
  background: var(--groen-zacht);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
}

/* ---------------------------------------------------------------- schermen */

main { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 2rem 1.4rem 3rem; }

.scherm { display: none; }
.scherm.actief { display: block; }

.kaartje {
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  padding: 2rem;
}
.kaartje.breed { max-width: 640px; margin: 2rem auto; }

.kicker {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.intro { font-size: 1.05rem; color: var(--inkt-zacht); margin-bottom: 1.2rem; }
.uitleg { color: var(--inkt-zacht); margin-bottom: 1.2rem; max-width: 62ch; }
.klein { font-size: 0.85rem; color: var(--inkt-zacht); margin-top: 0.9rem; }

.let-op {
  background: var(--groen-zacht);
  border-left: 3px solid var(--accent);
  padding: 0.8rem 1rem;
  border-radius: 0 8px 8px 0;
  margin-bottom: 1.4rem;
  font-size: 0.92rem;
}

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

.knop {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--lijn);
  background: #fff;
  color: var(--inkt);
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.knop:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(28, 39, 51, 0.1); }
.knop:disabled { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }

.knop.accent {
  background: linear-gradient(135deg, #b05835, var(--accent-donker));
  border-color: var(--accent-donker);
  color: #fff;
}
.knop.groot { font-size: 1.05rem; padding: 0.8rem 1.6rem; }
.knop.stil { background: transparent; }
.knop.klein { padding: 0.35rem 0.8rem; font-size: 0.85rem; }

/* --------------------------------------------------------------------- tabs */

.tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--lijn);
  margin-bottom: 1.6rem;
}
.tab {
  font: inherit;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--inkt-zacht);
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}
.tab.actief { color: var(--inkt); border-bottom-color: var(--accent); }

.paneel { display: none; }
.paneel.actief { display: block; }

/* -------------------------------------------------------------------- lijst */

.lijst { display: grid; gap: 0.8rem; margin-bottom: 1.6rem; }

.regel {
  background: #fff;
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}
.regel h3 { margin-bottom: 0.2rem; }
.regel .meta { font-size: 0.85rem; color: var(--inkt-zacht); }
.regel .acties { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.regel pre {
  font-family: var(--sans);
  white-space: pre-wrap;
  background: var(--papier-diep);
  border-radius: 8px;
  padding: 0.9rem;
  margin-top: 0.7rem;
  font-size: 0.9rem;
}

.regel.log { border-left-color: var(--lijn); padding: 0.6rem 1rem; }
.regel.log .meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; }
.regel.log.gevoelig { border-left-color: var(--accent); }

.merk {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--lijn);
  color: var(--inkt-zacht);
}
.merk.groen { background: var(--groen-zacht); color: #3f5a2f; }
.merk.rood { background: #f7e9e4; color: var(--accent-donker); border-color: #e6cdc3; }

.leeg { color: var(--inkt-zacht); font-style: italic; }

/* --------------------------------------------------------------- formulier */

.formulier {
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 1.3rem;
}
.formulier.smal { max-width: 460px; }
.formulier label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.9rem; }
.formulier input, .formulier textarea {
  font: inherit;
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--papier);
  color: var(--inkt);
}
.formulier textarea { min-height: 120px; resize: vertical; }
.formulier input:focus, .formulier textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Aandachtspunt-veld naast de samenvattingsknop, buiten een formulier */
.acties input[data-instructie-voor] {
  font: inherit;
  font-size: 0.85rem;
  width: 100%;
  margin: 0.4rem 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--papier);
  color: var(--inkt);
}
.acties input[data-instructie-voor]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------ melding */

.melding {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  background: var(--inkt);
  color: var(--papier);
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  font-size: 0.92rem;
  max-width: 90vw;
  box-shadow: 0 8px 30px rgba(28, 39, 51, 0.25);
  z-index: 50;
}
.melding.fout { background: var(--accent-donker); }

.voet {
  border-top: 1px solid var(--lijn);
  padding: 1.2rem 1.4rem;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  text-align: center;
}

@media (max-width: 560px) {
  main { padding: 1.4rem 1rem 2.5rem; }
  .kaartje { padding: 1.4rem; }
  h1 { font-size: 1.6rem; }
}

/* Niveaumeter tijdens het opnemen. */
.meter {
  margin-top: 0.9rem;
  background: var(--papier-diep);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 0.4rem;
}
.meter canvas { display: block; width: 100%; height: 48px; }

/* Zonder proefaccounts is inloggen het enige startpunt; dan mag dat blok
   wat prominenter staan. */
.kaartje.alleen { margin-top: 4rem; }

/* ------------------------------------------------- transcript en fragmenten */
.transcript { background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 0.9rem 1.1rem; }
.transcript .seg { display: block; padding: 0.2rem 0.3rem; border-radius: 6px; }
.transcript .seg-wie { font-weight: 600; color: var(--inkt-zacht); font-size: 0.85rem; margin-right: 0.4rem; }
.transcript .seg.flits { background: var(--groen-zacht); outline: 2px solid var(--accent); }
.fragmentlink { color: var(--accent); }
.sprekers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0.6rem 0; }
.sprekers input { font: inherit; font-size: 0.85rem; padding: 0.35rem 0.5rem; border: 1px solid var(--lijn); border-radius: 6px; background: var(--papier); width: 11em; }

/* ------------------------------------------------------------------ reacties */
.reactie { border-left: 3px solid var(--lijn); padding: 0.3rem 0.8rem; margin: 0.5rem 0; }
.reactie.van-client { border-left-color: var(--accent); }
.reactieformulier textarea { font: inherit; display: block; width: 100%; min-height: 70px; margin: 0.5rem 0; padding: 0.5rem 0.7rem; border: 1px solid var(--lijn); border-radius: 8px; background: var(--papier); }
.herbevestig { display: block; margin: 0.7rem 0 0.2rem; }
.trajectacties { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; border: 1px solid var(--lijn); border-radius: 999px; }
.trajectacties .klein { margin: 0; }

/* --------------------------------------------------- rustiger cliëntenscherm
   Elke handeling was eerder een knop met een rand, en bij twee trajecten
   stonden er zes naast elkaar met hetzelfde gewicht. Wat je vaak doet hoort op
   te vallen, de rest hoort er te zijn zonder te roepen. Vandaar de tekstknop:
   klikbaar en herkenbaar, maar zonder de zwaarte van een echte knop. */
.tekstknop {
  font: inherit;
  font-size: 0.85rem;
  color: var(--accent-donker);
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.tekstknop:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.clientkop {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.clientkop h3 { margin-bottom: 0; }

/* Eén regel per traject: naam links, acties rechts. Zo hoort zichtbaar bij
   elkaar wat bij elkaar hoort, en is geen bijschrift meer nodig om uit te
   leggen welke knop bij welk traject staat. */
.trajectrijen { list-style: none; margin: 0 0 0.6rem; padding: 0; }

.trajectrijen li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--lijn);
}

.trajectrijen li:last-child { border-bottom: 1px solid var(--lijn); }
.trajectrijen .naam { font-size: 0.95rem; }
.trajectrijen .rijacties { display: flex; gap: 0.3rem; flex-shrink: 0; }

.regel .acties.stil { margin-top: 0.5rem; gap: 0.9rem; }

@media (max-width: 560px) {
  .trajectrijen li { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* ------------------------------------------------------------------- kiezer
   Werken doe je aan één traject tegelijk. Deze keuze staat boven de lijst en
   niet ertussen, zodat duidelijk is dat alles eronder erbij hoort. */
.kiezer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
  padding: 0.7rem 0.9rem;
  background: var(--papier-diep);
  border: 1px solid var(--lijn);
  border-radius: 8px;
}

.kiezer label { font-size: 0.85rem; font-weight: 600; color: var(--inkt-zacht); }

.kiezer select {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  background: var(--papier);
  min-width: 16em;
  max-width: 100%;
}

/* Uitleg die je één keer leest hoort niet elke dag in de weg te staan. */
.toelichting { margin-top: 1.4rem; font-size: 0.9rem; }
.toelichting summary { cursor: pointer; color: var(--inkt-zacht); }
.toelichting p { margin-top: 0.5rem; color: var(--inkt-zacht); max-width: 62ch; }

/* ------------------------------------------------------- dossier als tijdlijn
   Alles wat er over een cliënt is vastgelegd, op tijd gesorteerd. Niets nieuws,
   wel voor het eerst bij elkaar. Drie kolommen: wanneer, wat, en van welke
   soort, zodat je verticaal kunt scannen zonder te lezen. */
.tijdlijnvak { margin-top: 0.9rem; border-top: 1px solid var(--lijn); padding-top: 0.8rem; }

.dossiertijdlijn { list-style: none; margin: 0; padding: 0; }

.dossiertijdlijn li {
  display: grid;
  grid-template-columns: 9.5em 1fr auto;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 2px solid var(--lijn);
  font-size: 0.9rem;
}

.dossiertijdlijn .wanneer { color: var(--inkt-zacht); font-size: 0.82rem; }
.dossiertijdlijn .wat .meta { font-size: 0.85rem; }

.dossiertijdlijn .etiket {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

/* De soorten die om aandacht vragen krijgen kleur, de rest blijft rustig.
   Alles markeren is hetzelfde als niets markeren. */
.dossiertijdlijn .soort-toestemming { border-left-color: var(--accent); }
.dossiertijdlijn .soort-opname { border-left-color: #b08968; }
.dossiertijdlijn .soort-reactie { border-left-color: #7f9b6a; }

/* Een afspraak die nog moet komen is geen geschiedenis maar een plan. */
.dossiertijdlijn li.komt { background: var(--groen-zacht); }

@media (max-width: 620px) {
  .dossiertijdlijn li { grid-template-columns: 1fr; gap: 0.15rem; }
  .dossiertijdlijn .etiket { display: none; }
}