/* Stijl van de levende assistent.

   Volgt het vastgestelde ontwerp uit de briefing (§9, 13-09-2026): tokens,
   Cormorant Garamond + Inter, drie kolommen. Geen eigen kleurkeuzes.

   De lettertypen komen van deze server (letters.css) en niet van Google -
   anders haalt de browser van de klant ze daar op en leest een derde partij mee.
   Zelfde afspraak als de rest van dit systeem.

   Kleur is hier taal, geen versiering:
     amber/warmrood = let op, er nadert een datum
     saliegroen     = klaar, goedgekeurd
     roze           = alleen identiteit (het begroetingsbalkje), nooit urgentie
*/

@import url("letters.css");

:root {
  --paper:      #FBF9F6;
  --panel:      #FFFFFF;
  --ink:        #2E2A26;
  --ink-soft:   #6E675E;
  --line:       #E7E1D8;
  --sage:       #CDE6D0;
  --sage-deep:  #4F7A58;
  --amber:      #F6E3C5;
  --amber-deep: #B4642A;
  --rose:       #FADADD;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

/* ---------- raamwerk: drie kolommen ---------- */

.raam {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 380px;
  min-height: 100vh;
  align-items: start;
}
@media (max-width: 1200px) { .raam { grid-template-columns: 208px minmax(0, 1fr) 330px; } }
@media (max-width: 1000px) { .raam { grid-template-columns: 1fr; } }

/* kolom 1 - navigatie */
.zijkant {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 26px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
@media (max-width: 1000px) {
  .zijkant { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }

}

.merk {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.merk span {
  color: var(--ink-soft); font-size: 0.8125rem; font-family: var(--sans);
  display: block; font-weight: 400; letter-spacing: 0.02em;
}

.zijkant nav { display: flex; flex-direction: column; gap: 2px; }
.zijkant nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.zijkant nav a:hover { background: #F3EFE9; color: var(--ink); }
.zijkant nav a[aria-current="page"] { background: var(--ink); color: var(--paper); font-weight: 500; }
.zijkant nav a[aria-current="page"] .teller { background: rgba(255,255,255,0.18); color: var(--paper); }
.teller {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  background: #F0EBE3;
  color: var(--ink-soft);
  border-radius: 20px;
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}
.teller.let-op { background: var(--amber); color: var(--amber-deep); font-weight: 600; }

.zijkant footer { margin-top: auto; font-size: 0.75rem; color: var(--ink-soft); }
.zijkant footer form { margin: 8px 0 0; }
.zijkant footer button {
  font: inherit; background: none; border: 0; padding: 0;
  color: var(--ink-soft); text-decoration: underline; cursor: pointer;
}

/* kolom 2 - de hoofdkolom */
.midden { padding: 34px 38px 80px; min-width: 0; max-width: 780px; }
@media (max-width: 1000px) { .midden { padding: 26px 20px 60px; max-width: none; } }

/* kolom 3 - detailpaneel */
.paneel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 34px 28px 60px;
}
@media (max-width: 1000px) {
  .paneel {
    position: static; height: auto; border-left: 0;
    border-top: 1px solid var(--line);
    display: none;              /* op een telefoon geen derde kolom onder de lijsten */
  }
  body.toont-detail .midden { display: none; }
  body.toont-detail .paneel { display: block; }
  .terug-klein { display: inline-block; margin: 0 0 16px; }
}

/* De weg terug uit die aparte weergave - op een breed scherm overbodig. */
.terug-klein { display: none; font-size: 0.875rem; }

/* ---------- begroeting en hero ---------- */

.groet {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.375rem;
  background: var(--rose);
  padding: 4px 14px 5px;
  border-radius: 20px;
  margin: 0 0 18px;
}

.hero { margin: 0 0 28px; }
.hero .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.hero .getal {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 7vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
}
.hero .bij { margin: 0 0 18px; color: var(--ink-soft); max-width: 46ch; }
.hero .bij strong { color: var(--ink); font-weight: 600; }

/* ---------- journaal ---------- */

.journaal {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 30px;
  background: var(--panel);
}
.journaal h2 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); margin: 0 0 10px; font-weight: 600;
}
.journaal ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; }
.journaal li { font-size: 0.9375rem; color: var(--ink); }
.journaal li::marker { color: var(--sage-deep); }
.journaal li.twijfel::marker { color: var(--amber-deep); }
.journaal .niet-zeker { color: var(--ink-soft); }

/* ---------- lijsten ---------- */

.blok { margin: 0 0 32px; }
.blok > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 12px;
}
.blok h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: 0; }
.blok .som { font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.kaarten { display: grid; gap: 8px; }

.kaart {
  display: grid;
  /* minmax(0, 1fr) en niet 1fr: anders krimpt de naamkolom niet mee en wordt
     de hele kaart breder dan de telefoon. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.kaart:hover { border-color: #D8CFC1; }
.kaart[aria-current="true"] { border-color: var(--ink); background: #FCFAF7; }
.kaart .wie { font-weight: 500; }
.kaart .wat { grid-column: 1 / -1; font-size: 0.875rem; color: var(--ink-soft); margin: 0; }
.kaart .som {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chip {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px 9px 3px;
  border-radius: 20px;
  background: #F0EBE3;
  color: var(--ink-soft);
  white-space: nowrap;
}
.chip.let-op { background: var(--amber); color: var(--amber-deep); font-weight: 600; }
.chip.klaar { background: var(--sage); color: var(--sage-deep); font-weight: 500; }
.chip.vraag { background: var(--amber); color: var(--amber-deep); font-weight: 600; }
.chip-rij { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.niets { color: var(--ink-soft); font-size: 0.9375rem; padding: 10px 2px; }

/* ---------- vragen aan de klant ---------- */

.vraagkaart {
  background: var(--panel);
  border: 1px solid var(--amber-deep);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin: 0 0 10px;
}
.vraagkaart .label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--amber-deep); font-weight: 600; margin: 0 0 8px;
}
.vraagkaart h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.vraagkaart .toelichting { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.875rem; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.keuzes form { display: inline; margin: 0; }
.keuzes input[type="text"] {
  font: inherit; font-size: 0.875rem; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); width: 12rem;
}

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

.knop {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.knop:hover { border-color: #D8CFC1; }
.knop.hoofd { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.knop.goed { background: var(--sage); border-color: var(--sage); color: var(--sage-deep); font-weight: 600; }
.knop.groot { padding: 12px 22px; font-size: 0.9375rem; }
.knop:disabled { opacity: 0.55; cursor: default; }
.knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.knoppen form { margin: 0; }

/* ---------- detailpaneel ---------- */

.paneel .label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); margin: 0 0 10px;
}
.paneel h2 {
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 12px;
}
.paneel .samenvatting {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 18px;
}
.punten { margin: 0 0 20px; padding-left: 1.1rem; display: grid; gap: 6px; }
.punten li { font-size: 0.875rem; color: var(--ink-soft); }
.punten li::marker { color: var(--sage-deep); }

.gegevens { margin: 0 0 22px; display: grid; gap: 0; }
.gegevens div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.875rem;
}
.gegevens dt { color: var(--ink-soft); margin: 0; }
.gegevens dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.gegevens dd.groot { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; }

.voorstel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 14px;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  width: 100%;
  font-family: var(--sans);
  color: var(--ink);
}
textarea.voorstel { min-height: 11rem; }
.klein { font-size: 0.8125rem; color: var(--ink-soft); margin: 10px 0 0; }

/* ---------- vraagbalk onderaan ---------- */

.vraagbalk { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 40px; }
.vraagbalk h2 { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; margin: 0 0 6px; }
.vraagbalk p.bij { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.9375rem; max-width: 56ch; }
.vraagbalk form { display: flex; gap: 8px; flex-wrap: wrap; }
.vraagbalk input[type="text"], .vraagbalk input[type="search"] {
  flex: 1 1 22rem; font: inherit; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink);
}

.antwoord {
  margin-top: 16px; padding: 18px 20px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
}
.antwoord p { margin: 0 0 12px; max-width: 62ch; }
.antwoord p:last-child { margin-bottom: 0; }
.herkomst {
  font-size: 0.75rem; color: var(--ink-soft); padding-top: 12px;
  border-top: 1px solid var(--line); display: grid; gap: 4px;
}

/* ---------- meldingen ---------- */

.melding {
  border-radius: 10px;
  padding: 11px 16px;
  margin: 0 0 12px;
  font-size: 0.9375rem;
  background: var(--sage);
  color: var(--sage-deep);
}
.melding.let-op { background: var(--amber); color: var(--amber-deep); }

/* ---------- inloggen ---------- */

.inlog {
  max-width: 25rem; margin: 14vh auto 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 30px;
}
.inlog h1 { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; margin: 0 0 4px; }
.inlog p.bij { margin: 0 0 22px; color: var(--ink-soft); font-size: 0.9375rem; }
.veld { display: grid; gap: 6px; margin-bottom: 16px; }
.veld label { font-size: 0.8125rem; color: var(--ink-soft); }
.veld input, .veld textarea, .veld select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink);
}

/* ---------- tabellen (archief) ---------- */

.tabelwikkel { overflow-x: auto; }
table.lijst { width: 100%; border-collapse: collapse; }
table.lijst th, table.lijst td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
table.lijst th {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
table.lijst td.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lijst tr:hover td { background: #FCFAF7; }

code {
  background: #F3EFE9; padding: 3px 7px; border-radius: 6px;
  font-size: 0.8125rem; word-break: break-all;
}

.uitleg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
@media (max-width: 760px) { .uitleg { grid-template-columns: 1fr; } }
.uitleg h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 6px; }
.uitleg p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

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

/* ---------- voet op de telefoon ---------- */
/* Op een breed scherm staat dit links onderin de zijbalk; daar is deze dubbel. */
.voet-klein { display: none; }
@media (max-width: 1000px) {
  .voet-klein {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 0.8125rem; color: var(--ink-soft);
  }
  .voet-klein form { margin: 0; }
  .voet-klein button {
    font: inherit; font-size: 0.8125rem; background: none; border: 0; padding: 0;
    color: var(--ink-soft); text-decoration: underline; cursor: pointer;
  }
}

/* Op een telefoon mogen knoppen en velden niet te klein zijn om te raken, en
   een tekstveld onder 16px laat iOS inzoomen bij het aantikken. */
@media (max-width: 1000px) {
  .knop { padding: 11px 16px; }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], textarea, select { font-size: 16px; }
  .kaart { padding: 14px 16px; }
}

/* ---------- de telefoon ----------
   Staat bewust achteraan: deze regels moeten de kolom-indeling hierboven
   overschrijven, en bij gelijke zwaarte wint de laatste regel. */

@media (max-width: 1000px) {
  /* De menukolom wordt een balk die meescrolt. Anders moet je op een telefoon
     eerst langs het hele menu voordat je je lijsten ziet. */
  .zijkant {
    /* Bewust niet vastgeplakt: de balk scrolt gewoon weg, zodat de lijsten het
       hele scherm krijgen. Terugscrollen is minder erg dan een balk die altijd
       een kwart van je telefoon inneemt. */
    position: static; z-index: 20;
    height: auto; padding: 10px 0 0;
    border-right: 0; border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .zijkant .merk { font-size: 0.9375rem; padding: 0 16px 8px; }
  .zijkant .merk span { display: none; }

  .zijkant nav {
    flex-direction: row; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    padding: 0 14px 10px; margin: 0;
  }
  .zijkant nav + nav { padding-top: 0; }
  .zijkant nav::-webkit-scrollbar { display: none; }
  .zijkant nav a {
    white-space: nowrap; padding: 8px 13px; border-radius: 999px;
    font-size: 0.875rem; background: #F3EFE9; justify-content: flex-start;
  }
  .zijkant nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
  .zijkant footer { display: none; }

  /* Zonder deze regel open je op een telefoon een item en kun je niet terug.
     Staat hier achteraan om dezelfde reden als de rest van dit blok. */
  .terug-klein {
    display: inline-block; margin: 0 0 16px;
    padding: 8px 0; font-size: 0.9375rem;
  }
}


/* ---------- geen zijwaarts geschuif ----------
   Eén lang stuk tekst zonder spaties - een webadres, een rekeningnummer, een
   kenmerk als "facturen 26031039 en 26031615" - duwt op een telefoon de hele
   pagina breder dan het scherm. Dan moet je heen en weer schuiven om een regel
   te lezen, en dat is precies wat niemand doet.

   Daarom: alles wat tekst bevat mag middenin een woord afbreken, en niets mag
   breder worden dan zijn kolom. */

html, body { max-width: 100%; }

code, .voorstel, .concept, .antwoord, .melding, .wat, .onder, .samenvatting,
.kaart, .punten li, .feit dd, td, th, .herkomst, .klein {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Een webadres in een kadertje: laten afbreken in plaats van doorschuiven. */
code {
  display: inline-block;
  max-width: 100%;
  white-space: pre-wrap;
}

/* Afbeeldingen, QR-codes en tabellen blijven binnen hun kolom. */
img, svg, table { max-width: 100%; }
table { table-layout: auto; }

/* De kaarten in de lijsten: de naam mag krimpen, het bedrag houdt zijn ruimte. */
.kaart { min-width: 0; }
.kaart .wie { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  /* Laatste vangnet: mocht er ooit tóch iets te breed zijn, dan schuift dat
     ene element - niet de hele pagina. */
  .midden, .paneel { overflow-x: hidden; }

}