/* De basisstijl van het Flash Klantdashboard.
 *
 * Mobiel eerst. Het dashboard wordt vaker op een telefoon geopend dan op een desktop, dus de
 * telefoonweergave is de gewone weergave en de brede schermen krijgen de uitzonderingen.
 *
 * De kleuren komen uit de Flash-huisstijl in scripts/flash_style.py, zodat het dashboard en de
 * rapporten die klanten van Flash krijgen er als een geheel uitzien.
 */

:root {
  --blauw: #004aad;
  --blauw-diep: #01337a;
  --blauw-diepst: #001e4d;
  --goud: #ffd400;

  --inkt: #10131a;
  --inkt-zacht: #5a6472;
  --lijn: #dde3ea;
  /* De rand van een invoerveld of knop is geen decoratie maar de omtrek van iets dat je moet
   * kunnen aanwijzen. Die haalt daarom wel de contrasteis van 3 op 1, terwijl de gewone
   * scheidingslijn tussen tegels dat niet hoeft. */
  --lijn-bediening: #7d8896;
  --vlak: #ffffff;
  --achtergrond: #f6f8fa;

  --goed: #0f7b53;
  --aandacht: #996515;
  --storing: #b23120;

  --rond: 14px;
  --rond-klein: 8px;
  --schaduw: 0 1px 2px rgba(16, 19, 26, 0.04), 0 4px 16px rgba(16, 19, 26, 0.06);
  --schaduw-op: 0 2px 4px rgba(16, 19, 26, 0.06), 0 10px 28px rgba(16, 19, 26, 0.1);
  --overgang: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--inkt);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Zichtbare focus, overal. Wie met het toetsenbord werkt, moet kunnen zien waar hij is. */
:focus-visible {
  outline: 3px solid var(--blauw);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vlak);
  padding: 12px 18px;
  border-radius: var(--rond-klein);
  z-index: 10;
}
.overslaan:focus {
  left: 12px;
  top: 12px;
}

/* De balk bovenaan */
.balk {
  background: linear-gradient(135deg, var(--blauw-diep), var(--blauw-diepst));
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.balk .merk {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.balk .merk::before {
  content: "";
  width: 10px;
  height: 18px;
  background: var(--goud);
  clip-path: polygon(58% 0, 0 58%, 42% 58%, 30% 100%, 100% 38%, 52% 38%);
}

.balk .rest {
  margin-left: auto;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: center;
  gap: 16px;
}

.balk .proef {
  font-size: 13px;
  background: rgba(255, 212, 0, 0.16);
  color: var(--goud);
  border: 1px solid rgba(255, 212, 0, 0.4);
  padding: 3px 10px;
  border-radius: 999px;
}

.balk .wie {
  font-weight: 600;
  color: #fff;
}

.uitlog {
  margin: 0;
}

.tekstknop {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 2px;
  transition: color var(--overgang);
}

.tekstknop:hover {
  color: #fff;
}

/* Smalle schermen zoals het inloggen: een kolom die niet uitwaaiert over een breed scherm. */
.smal {
  max-width: 430px;
  margin: 24px auto;
}

.formulier {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 22px;
  box-shadow: var(--schaduw);
}

.formulier label {
  font-weight: 600;
  font-size: 14px;
  margin-top: 10px;
}

.formulier input {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--lijn-bediening);
  border-radius: var(--rond-klein);
  background: #fff;
  color: var(--inkt);
  /* Zestien pixels of meer, anders zoomt een iPhone in zodra je in het veld tikt. */
  font-size: 16px;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}

.formulier input:focus {
  border-color: var(--blauw);
}

.formulier .knop {
  margin-top: 18px;
  justify-content: center;
}

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 18px 64px;
}

h1 {
  font-size: clamp(24px, 5vw, 32px);
  letter-spacing: -0.02em;
  margin: 8px 0 4px;
}

.onderkop {
  color: var(--inkt-zacht);
  margin: 0 0 24px;
}

/* Tegels */
.tegels {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .tegels {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .tegels {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tegel {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 18px;
  box-shadow: var(--schaduw);
  transition: box-shadow var(--overgang), transform var(--overgang);
}

.tegel:hover {
  box-shadow: var(--schaduw-op);
}

.tegelkop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.tegel h2 {
  font-size: 15px;
  margin: 0;
  letter-spacing: 0.01em;
  color: var(--inkt-zacht);
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
}

.tegeltekst {
  color: var(--inkt-zacht);
  margin: 0 0 8px;
  font-size: 14px;
}

.tegeltekst:last-child {
  margin-bottom: 0;
}

.regel {
  margin: 0 0 6px;
}

.lijst {
  margin: 0;
  padding-left: 18px;
  color: var(--inkt-zacht);
  font-size: 14px;
}

.lijst li {
  margin-bottom: 4px;
}

.lijst.ruim li {
  margin-bottom: 12px;
}

.kerncijfer {
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
  display: block;
}

.kerncijfer.zacht {
  font-size: 18px;
  font-weight: 650;
  color: var(--inkt-zacht);
  letter-spacing: -0.01em;
}

/* De drie cijfers bovenaan. Nooit meer dan drie: dan leest niemand ze nog. */
.kerncijfers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 24px;
}

.kerncijfer-blok {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 14px 16px;
  box-shadow: var(--schaduw);
}

.kerncijfer-label {
  display: block;
  color: var(--inkt-zacht);
  font-size: 13px;
  line-height: 1.3;
  margin-top: 2px;
}

/* Verplaatsknoppen. Pijltjes en geen slepen, want slepen werkt niet met een toetsenbord. */
.verplaats {
  display: flex;
  gap: 2px;
  flex: none;
  opacity: 0;
  transition: opacity var(--overgang);
}

.tegel:hover .verplaats,
.verplaats:focus-within {
  opacity: 1;
}

/* Op een telefoon is er geen hover, dus daar staan de pijltjes altijd aan. */
@media (hover: none) {
  .verplaats {
    opacity: 1;
  }
}

.pijl {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--rond-klein);
  color: var(--inkt-zacht);
  font-size: 15px;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
  transition: background var(--overgang), color var(--overgang);
}

.pijl:hover:not(:disabled) {
  background: var(--achtergrond);
  color: var(--blauw);
}

.pijl:disabled {
  opacity: 0.25;
  cursor: default;
}

/* De laadstatus. Nooit een leeg wit vlak: er staat altijd iets wat beweging suggereert. */
.laadt {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 6px 0 2px;
}

.balkje {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--achtergrond) 25%, #eef2f6 50%, var(--achtergrond) 75%);
  background-size: 320% 100%;
  animation: schuif 1.4s ease-in-out infinite;
}

.balkje.kort {
  width: 55%;
}

@keyframes schuif {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* De vergrendelde tegel.
 * Grijstint met een slotje, zodat meteen duidelijk is dat dit er nog niet bij zit. Wel volledig
 * leesbaar: de klant hoort te kunnen zien wat hij mist, dat is waar deze tegel voor bestaat. */
.tegel.vergrendeld {
  background: linear-gradient(180deg, #fbfcfd, var(--achtergrond));
  border-style: dashed;
  box-shadow: none;
}

.tegel.vergrendeld h2 {
  color: var(--inkt-zacht);
}

.tegel.vergrendeld .slotje {
  display: inline-flex;
  color: var(--inkt-zacht);
  opacity: 0.65;
}

.tegel.vergrendeld .tegeltekst {
  color: var(--inkt-zacht);
}

.vanaf {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--blauw-diep);
  background: rgba(0, 74, 173, 0.08);
  border-radius: 999px;
  padding: 4px 11px;
  margin: 4px 0 14px;
}

.tegel.vergrendeld .knop {
  width: 100%;
  justify-content: center;
}

/* Kleine staafjes bij lijstjes als bronnen en best bekeken pagina's. Geen grafiekbibliotheek:
 * dit zijn vijf regels met een verhouding, en daar is een gekleurd vlak genoeg voor. */
.tegelkopje {
  font-size: 13px;
  font-weight: 650;
  color: var(--inkt-zacht);
  margin: 18px 0 8px;
}

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

.staafjes li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 2px;
  font-size: 14px;
  border-bottom: 1px solid var(--lijn);
}

.staafjes li:last-child {
  border-bottom: 0;
}

.staafnaam {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staafaantal {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--inkt);
}

.staaf {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--blauw);
  opacity: 0.5;
  border-radius: 2px;
  max-width: 100%;
}

/* Cijfers die van eerder zijn omdat de bron nu niet antwoordt. Duidelijk gemarkeerd, want de klant
 * moet kunnen zien dat dit niet de stand van dit moment is. */
.verouderd {
  margin: 12px 0 4px;
}

.kruimel {
  font-size: 14px;
  margin: 0 0 6px;
}

.tussenkop {
  font-size: 17px;
  margin: 28px 0 10px;
}

.smal.breed {
  max-width: 640px;
}

/* Knoppen: beweging op hover, schaduw, nooit buitensporig */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blauw);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--schaduw);
  transition: transform var(--overgang), box-shadow var(--overgang), background var(--overgang);
}

.knop:hover {
  transform: translateY(-1px);
  box-shadow: var(--schaduw-op);
  background: var(--blauw-diep);
}

.knop:active {
  transform: translateY(0);
}

.knop.rustig {
  background: var(--vlak);
  color: var(--blauw);
  border: 1px solid var(--lijn-bediening);
}

/* Statussen. Nooit alleen kleur: er staat altijd tekst bij, ook voor wie kleuren niet onderscheidt. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
  font-size: 14px;
}

.status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.status.goed {
  color: var(--goed);
}
.status.aandacht {
  color: var(--aandacht);
}
.status.storing {
  color: var(--storing);
}

.melding {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--blauw);
  border-radius: var(--rond-klein);
  padding: 14px 16px;
  margin: 0 0 20px;
}

.melding.storing {
  border-left-color: var(--storing);
}

dl.gegevens {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0;
  font-size: 14px;
}

dl.gegevens dt {
  color: var(--inkt-zacht);
}

dl.gegevens dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

footer {
  color: var(--inkt-zacht);
  font-size: 13px;
  text-align: center;
  padding: 24px 18px 40px;
}

/* Wie in zijn systeem heeft aangegeven minder beweging te willen, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .knop:hover {
    transform: none;
  }
}

/* Bijschrift bij een status: wanneer er voor het laatst gekeken is. Dat hoort er altijd bij, want
 * een status zonder moment kan verouderd zijn zonder dat je het ziet. */
.bijschrift {
  display: block;
  color: var(--inkt-zacht);
  font-size: 13px;
  margin-top: 2px;
}

.site + .site {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--lijn);
}

.site .gegevens {
  margin-top: 10px;
}

/* De factuurlijst. Bedragen rechts uitgelijnd met cijfers van gelijke breedte, zodat je ze onder
 * elkaar kunt vergelijken zonder te hoeven rekenen. */
.facturen {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 14px;
}

.facturen li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 2px;
  border-bottom: 1px solid var(--lijn);
}

.facturen li:last-child {
  border-bottom: 0;
}

.factuurdatum {
  color: var(--inkt-zacht);
}

.factuurbedrag {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.factuurstatus {
  font-size: 12px;
  font-weight: 650;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.factuurstatus.goed    { color: var(--goed);    background: rgba(15, 123, 83, 0.1); }
.factuurstatus.aandacht{ color: var(--aandacht);background: rgba(153, 101, 21, 0.1); }
.factuurstatus.storing { color: var(--storing); background: rgba(178, 49, 32, 0.1); }

/* Twee kolommen op een breed scherm, onder elkaar op een telefoon. */
.kolommen {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .kolommen {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: start;
  }
}

.formulier textarea {
  font: inherit;
  font-size: 16px;
  padding: 11px 13px;
  border: 1px solid var(--lijn-bediening);
  border-radius: var(--rond-klein);
  background: #fff;
  color: var(--inkt);
  resize: vertical;
  min-height: 110px;
  transition: border-color var(--overgang);
}

.formulier textarea:focus {
  border-color: var(--blauw);
}

.formulier input[type="file"] {
  padding: 9px 11px;
  background: var(--achtergrond);
  cursor: pointer;
}

.veldhulp {
  color: var(--inkt-zacht);
  font-size: 13px;
  margin-top: -2px;
}

.verzoek + .verzoek {
  margin-top: 14px;
}

.verzoekkop {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}

/* De vier stappen die een aanvraag doorloopt. De klant ziet ook de stappen die nog moeten komen,
 * zodat duidelijk is wat er nog gaat gebeuren en het niet lijkt alsof het stilstaat. */
.stappen {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.stappen li {
  position: relative;
  padding: 0 0 14px 26px;
  font-size: 14px;
}

.stappen li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--lijn);
  background: var(--vlak);
}

/* De verbindingslijn tussen de bolletjes, behalve na de laatste. */
.stappen li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 17px;
  bottom: 0;
  width: 2px;
  background: var(--lijn);
}

.stappen li.gedaan::before {
  border-color: var(--goed);
  background: var(--goed);
}

.stappen li.gedaan:not(:last-child)::after {
  background: var(--goed);
}

.stappen li.nu::before {
  box-shadow: 0 0 0 4px rgba(15, 123, 83, 0.14);
}

.stapnaam {
  font-weight: 650;
  color: var(--inkt-zacht);
  display: block;
}

.stappen li.gedaan .stapnaam {
  color: var(--inkt);
}

.stapuitleg {
  color: var(--inkt-zacht);
  font-size: 13px;
}

/* Het gesprek met Flash. Berichten van de klant rechts, van Flash links, zoals in elke chat. */
.gesprek {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bericht {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 14px 16px;
  box-shadow: var(--schaduw);
  max-width: 78ch;
}

.bericht.vanons {
  align-self: flex-end;
  background: #f2f7ff;
  border-color: #d6e4fb;
}

.berichtkop {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0 0 6px;
  font-size: 14px;
}

.berichttekst {
  margin: 0;
  /* Regeleinden van de klant blijven staan, want die schrijft soms een lijstje. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Merkbestanden */
.bestanden,
.kleuren,
.checklist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.bestanden li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn);
}

.bestandnaam {
  font-weight: 650;
}

.kleuren li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lijn);
}

.kleurvlak {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--lijn);
  flex: none;
}

.kleurnaam {
  flex: 1;
}

.kleurcode {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--inkt-zacht);
}

.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--schaduw);
}

.checklistnaam {
  font-weight: 650;
  display: block;
}

/* ------------------------------------------------------------------------------------------------
 * Tikdoelen
 *
 * Een pijltje van 25 bij 25 pixels is met een muis prima te raken en met een duim niet. De
 * zichtbare knop blijft klein, maar het gebied waarop je kunt tikken wordt uitgerekt tot 44 bij 44.
 * Zo blijft de tegelkop rustig terwijl de knop op een telefoon gewoon te bedienen is.
 * ------------------------------------------------------------------------------------------------ */
.pijl,
.tekstknop {
  position: relative;
}

.pijl::after,
.tekstknop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

/* Knoppen en velden zijn zelf al ruim genoeg, maar leg de ondergrens vast zodat een latere
 * aanpassing er niet ongemerkt onderdoor zakt. */
.knop,
.formulier input,
.formulier textarea,
.formulier button {
  min-height: 44px;
}

/* Links in lopende tekst krijgen wat lucht, zodat twee links onder elkaar niet aan elkaar plakken. */
.bestanden a,
.lijst a {
  display: inline-block;
  padding: 3px 0;
}

/* ------------------------------------------------------------------------------------------------
 * Beweging bij het scrollen
 *
 * De Flash-standaard vraagt om scroll-animaties, en de brief zegt erbij: nooit buitensporig. Dus
 * geen tegels die van opzij invliegen of ronddraaien. Elke tegel komt een klein stukje omhoog en
 * wordt zichtbaar, een keer, en daarna staat hij stil.
 *
 * Dit gebruikt animation-timeline, dat de browser zelf afhandelt. Werkt de browser dat niet af,
 * dan staat alles er gewoon meteen: er is geen enkele stand waarin een tegel onzichtbaar blijft.
 * Dat is met opzet, want een onzichtbare tegel is erger dan een tegel zonder animatie.
 * ------------------------------------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes tegel-verschijnt {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .tegels > .tegel,
    .verzoek,
    .bericht {
      animation: tegel-verschijnt linear both;
      animation-timeline: view();
      /* Begint zodra de tegel net in beeld komt en is klaar als hij goed zichtbaar is. Daarna
       * gebeurt er niets meer, ook niet bij terugscrollen. */
      animation-range: entry 0% cover 18%;
    }
  }
}

/* Zacht scrollen naar een tegel na het verplaatsen, maar alleen voor wie beweging wil zien. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ------------------------------------------------------------------------------------------------
 * Het beheerdersdeel
 *
 * Soberder dan het klantdeel: dit is gereedschap voor Flash, geen etalage. Wat telt is dat je in
 * een oogopslag ziet waar iets stukstaat of blijft liggen.
 * ------------------------------------------------------------------------------------------------ */
.beheernav {
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
  padding: 0 18px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.beheernav a {
  padding: 14px 14px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  color: var(--inkt-zacht);
  transition: color var(--overgang), border-color var(--overgang);
}

.beheernav a:hover {
  color: var(--blauw);
  border-bottom-color: var(--blauw);
}

/* Een brede tabel mag schuiven binnen zijn eigen kader, en niet de hele pagina meesleuren. */
.tabelomhulsel {
  overflow-x: auto;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}

.beheertabel {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  min-width: 640px;
}

.beheertabel th,
.beheertabel td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}

.beheertabel th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--inkt-zacht);
  background: var(--achtergrond);
  position: sticky;
  top: 0;
}

.beheertabel tr:last-child td {
  border-bottom: 0;
}

.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--achtergrond);
  color: var(--inkt-zacht);
  margin-left: 6px;
}

.chip.voorrang {
  background: rgba(0, 74, 173, 0.1);
  color: var(--blauw-diep);
}

.formulier select,
.statusform select {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--lijn-bediening);
  border-radius: var(--rond-klein);
  background: #fff;
  color: var(--inkt);
  min-height: 44px;
}

.statusform {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lijn);
}

.statusform label {
  font-size: 14px;
  font-weight: 600;
  color: var(--inkt-zacht);
}

/* Duidelijk zichtbaar maken dat je meekijkt en niet zelf de klant bent. */
.meekijkbalk {
  background: #fdf3e2;
  border-bottom: 1px solid #f2ddb4;
  color: #7a5410;
  padding: 10px 18px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.meekijkbalk form {
  margin: 0;
}

.meekijkbalk button {
  background: none;
  border: 1px solid #d9b877;
  border-radius: var(--rond-klein);
  color: #7a5410;
  font: inherit;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  min-height: 44px;
}

/* ================================================================================================
 * NAVIGATIE
 *
 * Twee vormen, en niet een die inklapt. Op een breed scherm een zijbalk die altijd zichtbaar is.
 * Op een telefoon een onderbalk, want daar wordt het meest geschakeld en daar is een hamburgermenu
 * een extra tik om iets te bereiken dat je vaak nodig hebt.
 * ================================================================================================ */

.indeling {
  display: block;
}

body.metnavigatie main {
  /* Ruimte onderaan voor de onderbalk, zodat de laatste tegel er niet achter verdwijnt. */
  padding-bottom: 90px;
}

/* De zijbalk verschijnt pas als er plek voor is. */
.zijbalk {
  display: none;
}

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

.navknop {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--rond-klein);
  color: var(--inkt-zacht);
  text-decoration: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  transition: background var(--overgang), color var(--overgang);
}

.navknop:hover {
  background: var(--vlak);
  color: var(--blauw);
}

.navknop.actief {
  background: var(--vlak);
  color: var(--blauw);
  box-shadow: var(--schaduw);
}

/* Het accentstreepje links laat zien waar je bent, ook voor wie kleuren niet onderscheidt: de
 * actieve knop heeft daarnaast een eigen achtergrond en aria-current. */
.navknop.actief::before {
  content: "";
  width: 3px;
  align-self: stretch;
  background: var(--blauw);
  border-radius: 3px;
  margin: -2px 0 -2px -6px;
}

.navknop.vergrendeld {
  color: var(--inkt-zacht);
  opacity: 0.75;
}

.navknop.vergrendeld:hover {
  opacity: 1;
  background: var(--vlak);
}

.navnaam {
  flex: 1;
}

.navslot {
  display: inline-flex;
  opacity: 0.7;
  flex: none;
}

/* De onderbalk op een telefoon. */
.onderbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--vlak);
  border-top: 1px solid var(--lijn);
  box-shadow: 0 -2px 12px rgba(16, 19, 26, 0.06);
  /* Ruimte voor de veeg-balk onderaan een iPhone. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.onderbalk form {
  margin: 0;
}

.onderknop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 56px;
  padding: 8px 2px;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  color: var(--inkt-zacht);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--overgang);
}

.onderknop.actief {
  color: var(--blauw);
  box-shadow: inset 0 2px 0 var(--blauw);
}

.onderknop.vergrendeld {
  opacity: 0.65;
}

@media (min-width: 900px) {
  .indeling {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 0;
    max-width: 1360px;
    margin: 0 auto;
  }

  .zijbalk {
    display: block;
    padding: 22px 12px;
    border-right: 1px solid var(--lijn);
    align-self: start;
    position: sticky;
    top: 0;
  }

  .onderbalk {
    display: none;
  }

  body.metnavigatie main {
    padding-bottom: 64px;
    max-width: none;
  }
}

/* ================================================================================================
 * HET OVERZICHT
 *
 * Per onderdeel een cijfer en een zin, en niets meer. Zou het overzicht alles herhalen wat op de
 * onderdeelpagina's staat, dan kijkt niemand meer verder.
 * ================================================================================================ */
.overzicht {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.overzichtkaart-form {
  margin: 0;
  display: contents;
}

.overzichtkaart {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 16px 18px;
  box-shadow: var(--schaduw);
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 108px;
  transition: box-shadow var(--overgang), transform var(--overgang);
}

.overzichtkaart:hover {
  box-shadow: var(--schaduw-op);
  transform: translateY(-1px);
}

.overzichtkaart.vergrendeld {
  background: linear-gradient(180deg, #fbfcfd, var(--achtergrond));
  border-style: dashed;
  box-shadow: none;
}

.kaartnaam {
  font-size: 13px;
  font-weight: 650;
  color: var(--inkt-zacht);
}

.kaartcijfer {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.kaartcijfer.zacht {
  font-size: 17px;
  font-weight: 650;
  color: var(--inkt-zacht);
  letter-spacing: -0.01em;
}

.kaartlabel {
  font-size: 13px;
  color: var(--inkt-zacht);
  line-height: 1.35;
}

/* De Meer-pagina */
.meerlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.meeritem {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 15px 18px;
  box-shadow: var(--schaduw);
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}

.meeritem.vergrendeld {
  background: linear-gradient(180deg, #fbfcfd, var(--achtergrond));
  border-style: dashed;
  box-shadow: none;
}

.meernaam {
  font-weight: 650;
}

.meeruitleg {
  font-size: 14px;
  color: var(--inkt-zacht);
}

/* ================================================================================================
 * DE LEADS-INBOX
 *
 * Elke aanvraag is een kaart en geen tabelrij. Een tabel met tien kolommen is op een telefoon
 * onleesbaar, en juist daar kijkt een ondernemer of er iets binnen is gekomen.
 * ================================================================================================ */
.filterbalk {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 14px 16px;
  margin: 0 0 18px;
  box-shadow: var(--schaduw);
}

.filterbalk input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--lijn-bediening);
  border-radius: var(--rond-klein);
  min-height: 44px;
}

.filterbalk select {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--lijn-bediening);
  border-radius: var(--rond-klein);
  background: #fff;
  min-height: 44px;
}

.tekstlink {
  font-size: 14px;
}

.leadlijst {
  display: grid;
  gap: 12px;
}

.lead {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 18px;
  box-shadow: var(--schaduw);
}

/* Een nieuwe aanvraag valt op met een streep, niet met een kleurvlak: die streep blijft zichtbaar
 * voor wie kleuren niet onderscheidt, en de status staat er sowieso in woorden bij. */
.lead.isnieuw {
  border-left: 4px solid var(--blauw);
}

.leadkop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.leadnaam {
  font-weight: 700;
  font-size: 17px;
  margin: 0;
}

.statuschip {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--achtergrond);
  color: var(--inkt-zacht);
  white-space: nowrap;
}

.statuschip.goed {
  background: rgba(15, 123, 83, 0.12);
  color: var(--goed);
}

.statuschip.aandacht {
  background: rgba(0, 74, 173, 0.1);
  color: var(--blauw-diep);
}

.leadbericht {
  background: var(--achtergrond);
  border-radius: var(--rond-klein);
  padding: 12px 14px;
  margin: 12px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.leadform {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lijn);
}

.leadform label {
  font-size: 13px;
  font-weight: 650;
  color: var(--inkt-zacht);
}

.leadform select,
.leadform textarea {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--lijn-bediening);
  border-radius: var(--rond-klein);
  background: #fff;
  min-height: 44px;
}

.leadform textarea {
  resize: vertical;
}

.leadform .knop {
  justify-self: start;
  margin-top: 6px;
}

.leadverwijder {
  margin-top: 10px;
}

/* Verwijderen is onomkeerbaar, dus het ziet er niet uit als de andere knoppen. Wel gewoon
 * bereikbaar: het is een recht en geen verstopte functie. */
.tekstknop.gevaarlijk {
  color: var(--storing);
  font-size: 14px;
}

.termijnform {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.termijnform label {
  font-size: 14px;
  font-weight: 600;
}

.termijnform select {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--lijn-bediening);
  border-radius: var(--rond-klein);
  background: #fff;
  min-height: 44px;
}

@media (min-width: 760px) {
  .leadform {
    grid-template-columns: 220px 1fr auto;
    align-items: end;
    gap: 12px;
  }

  .leadform label[for^="status"] { grid-column: 1; grid-row: 1; }
  .leadform select              { grid-column: 1; grid-row: 2; }
  .leadform label[for^="notitie"] { grid-column: 2; grid-row: 1; }
  .leadform textarea            { grid-column: 2; grid-row: 2; }
  .leadform .knop               { grid-column: 3; grid-row: 2; margin-top: 0; }
}

/* Meldingen: per soort een keuze tussen meteen, een keer per dag, of niet.
   Radioknoppen en geen schakelaars: een schakelaar kan aan of uit, en hier zijn drie standen.
   De raakvlakken zijn ruim genoeg voor een duim, ook op een telefoon. */
.keuzeblok {
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 14px 16px 10px;
  margin: 0 0 12px;
  background: var(--vlak);
}

.keuzeblok legend {
  font-weight: 650;
  padding: 0 6px;
}

.keuzeblok .bijschrift {
  display: block;
  margin: 0 0 10px;
}

.keuze {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.keuze input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--blauw);
  flex: none;
}

.keuze label {
  font-size: 16px;
  flex: 1;
  cursor: pointer;
}

/* Beoordelingen en het reageren erop.
   Elke beoordeling is een eigen blok met een duidelijke rand: het zijn woorden van verschillende
   mensen, en die horen niet in elkaar over te lopen. */
.beoordeling {
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--vlak);
  padding: 16px 18px;
  margin: 0 0 14px;
}

.beoordeling .tussenkop {
  margin-top: 0;
}

.reactie {
  border-left: 3px solid var(--lijn);
  padding: 2px 0 2px 14px;
  margin-top: 12px;
}

.reactieform {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.reactieform label {
  font-size: 14px;
  font-weight: 600;
}

.reactieform textarea {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--lijn-bediening);
  border-radius: var(--rond-klein);
  background: #fff;
  resize: vertical;
}

.reactieform .knop {
  align-self: flex-start;
}

/* Doelen: een voortgangsbalk die aanspoort en niet verwijt.
   Geen rood bij achterlopen. Een klant die elke keer dat hij zijn dashboard opent te horen krijgt
   dat hij tekortschiet, opent het niet meer, en dan werkt het hele ding niet meer. */
.doel {
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--vlak);
  padding: 16px 18px;
  margin: 0 0 14px;
}

.doel .tussenkop {
  margin-top: 0;
}

.doelstand {
  margin: 0 0 8px;
  font-size: 16px;
}

.voortgangsbalk {
  height: 12px;
  border-radius: 999px;
  background: var(--achtergrond);
  border: 1px solid var(--lijn);
  overflow: hidden;
  margin: 0 0 10px;
}

.voortgangsvulling {
  display: block;
  height: 100%;
  background: var(--blauw);
  border-radius: 999px;
  transition: width var(--overgang);
}

.voortgangsvulling.gehaald {
  background: var(--goed);
}

.doelform,
.doelstop {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.doelform label {
  font-size: 14px;
  font-weight: 600;
}

.doelform input,
.doelform select {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--lijn-bediening);
  border-radius: var(--rond-klein);
  background: #fff;
  min-height: 44px;
}

.doelform .knop {
  align-self: flex-start;
  margin-top: 4px;
}

.doel details summary {
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .voortgangsvulling { transition: none; }
}

/* Het rapportenarchief */
.rapportregel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn);
}

.rapportregel a {
  font-weight: 650;
}

.rapportregel .bijschrift {
  display: block;
}

/* De verkoopkansen in het beheerdersdeel.
   Het cijfer staat altijd naast de feiten waar het uit volgt: een score zonder onderbouwing is
   een getal waar iemand op gaat sturen zonder te weten waarop. */
.kansenlijst {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.kans {
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--blauw);
  border-radius: var(--rond-klein);
  padding: 12px 14px;
  margin: 0 0 10px;
  background: var(--vlak);
}

.kanskop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.kanskop a {
  font-weight: 650;
  font-size: 16px;
}

.kansscore {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--inkt-zacht);
  flex: none;
}

.kans .bijschrift {
  display: block;
  margin: 2px 0;
}