/* Dashboard van het kantoor langs de stappen uit de casus: kop over de foto met de knop om een klant uit te
   nodigen, daaronder fase 1 en fase 2a als twee lijsten met een regel per stap. Alleen tokens. */

.dash { display: grid; gap: var(--s-4); }
.dash__first { display: grid; gap: var(--s-4); }
.masthead--dash { padding-top: var(--s-6); }
.masthead--dash .masthead__title { max-width: 12ch; }

/* Glas: doorschijnend met een verloop, de foto vervaagd erachter, een lichte rand en een zachte schaduw */
.flowdeck > .glass, .invdeck > .glass {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(165deg, var(--glass-top), var(--glass-bottom));
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 40px 80px -40px var(--glass-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
}
.dash__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dash__actions .btn .i:not(.i--end) { margin-right: var(--s-2); }
.dash__actions .btn--line { background: var(--sheet); }

/* Twee vlakken naast elkaar: fase 1 en fase 2a. Opbouw zoals een gegroepeerde lijst op iOS: een kop met
   het totaal, een dunne verdelingsbalk, en één witte groep met haarlijnen tussen de stappen. */
.flowdeck { display: grid; gap: 0.625rem; align-items: stretch; }
.flow { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); }

.flow__head { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-1); }
.flow__head h2 { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.flow__eyebrow { order: -1; color: var(--muted); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
.flow__total { display: flex; align-items: baseline; gap: 0.3rem; margin-left: auto; color: var(--muted); font-size: var(--step--1); white-space: nowrap; }
.flow__big { color: var(--ink); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.flow__open { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--glass-row); color: var(--ink-2); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.flow__open:hover { background: var(--sheet); color: var(--ink); }
.flow__open .i { width: 0.95rem; height: 0.95rem; }

/* Verdelingsbalk: een stuk per stap met klanten, in de kleur van die stap */
.flow__bar { display: flex; gap: 3px; height: 0.375rem; margin: 0 var(--s-1); overflow: hidden; border-radius: 999px; background: var(--glass-row); }
.flow__bar > span { flex: 1 1 0; min-width: 0.375rem; border-radius: 999px; background: var(--stage); }
.flow__seg--1 { flex-grow: 1; } .flow__seg--2 { flex-grow: 2; } .flow__seg--3 { flex-grow: 3; } .flow__seg--4 { flex-grow: 4; }
.flow__seg--5 { flex-grow: 5; } .flow__seg--6 { flex-grow: 6; } .flow__seg--7 { flex-grow: 7; } .flow__seg--8 { flex-grow: 8; }
.flow__seg--9 { flex-grow: 9; } .flow__seg--10 { flex-grow: 10; } .flow__seg--11 { flex-grow: 11; } .flow__seg--12 { flex-grow: 12; }
.flow__seg--13 { flex-grow: 13; } .flow__seg--14 { flex-grow: 14; } .flow__seg--15 { flex-grow: 15; } .flow__seg--16 { flex-grow: 16; }
.flow__seg--17 { flex-grow: 17; } .flow__seg--18 { flex-grow: 18; } .flow__seg--19 { flex-grow: 19; } .flow__seg--20 { flex-grow: 20; }

/* De groep: wit en licht doorschijnend, haarlijnen die bij de tekst beginnen, een pijltje rechts */
.flow__steps { display: grid; margin: 0; padding: var(--s-1) 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--glass-row); list-style: none; }
.flow__steps > li + li .flow__step::before { content: ""; position: absolute; top: 0; right: 0; left: 2.75rem; border-top: var(--hair) solid var(--line); }
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-2) 1.75rem var(--s-2) var(--s-3);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.flow__step::after { content: ""; position: absolute; top: 50%; right: 0.85rem; width: 0.4rem; height: 0.4rem; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); }
.flow__step:hover { background: var(--sheet); }
.flow__step:hover::after { border-color: var(--ink-2); }

.flow__no { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--stage); color: var(--label-text-dark); font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.flow__no--icon .i { width: 0.8rem; height: 0.8rem; }
.flow__step--empty .flow__no { background: color-mix(in srgb, var(--stage) 30%, var(--sheet)); color: var(--ink-2); }
.flow__what { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; }
.flow__title { flex: none; font-size: var(--step--1); font-weight: 500; white-space: nowrap; }
.flow__step--empty .flow__title { color: var(--ink-2); font-weight: 400; }
.flow__who { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--step--2); text-overflow: ellipsis; white-space: nowrap; }

/* Aantal: een capsule in de kleur van de stap; een lege stap krijgt een rustig streepje */
.flow__n { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.5rem; padding: 0 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--stage, var(--ink)) 26%, var(--sheet)); color: var(--ink); font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums; }
.flow__n--zero { background: none; color: var(--line-strong); font-weight: 400; }
.flow__n--ratio { font-size: var(--step--2); }
.flow__flag { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.stage--identiteit { --stage: var(--st-nieuw); }

/* Onderaan: een afsluitende regel, los van de groep */
.flow__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 1.75rem var(--s-2) var(--s-3); border-radius: var(--radius-lg); color: var(--ink-2); font-size: var(--step--1); text-decoration: none; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.flow__foot:hover { background: var(--glass-row); color: var(--ink); }
.flow__foot > span:first-child { display: inline-flex; align-items: center; gap: var(--s-2); }
.flow__foot .i { width: 0.9rem; height: 0.9rem; }
.flow__foot--action { color: var(--ink); font-weight: 500; }

@media (min-width: 64rem) {
  .flowdeck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Op een desktop precies zoals het oorspronkelijke ontwerp: de kop over de foto vult het scherm, de vlakken
   staan onderaan met een vaste hoogte van ruim 40 procent van het scherm (--deck uit shell.css). Geen
   voettekst eronder, dus niets om te scrollen. Zelfde opbouw op Klant uitnodigen. */
@media (min-width: 64rem) {
  .app--full { --band: 100dvh; }
  .app--full .app__content { padding-bottom: 0; }
  .app--full .app__foot { display: none; }
  .dash__first { grid-template-rows: minmax(0, 1fr) var(--deck); gap: 0; height: calc(100dvh - var(--topbar-h)); padding-bottom: 0.625rem; }
  .masthead--dash { padding-block: clamp(var(--s-4), 4dvh, var(--s-7)) var(--s-4); }
  .masthead.masthead--dash .masthead__title { max-width: none; font-size: clamp(2.25rem, min(1rem + 2.2vw, 6.5dvh), 4rem); font-weight: 350; }
  .flowdeck, .invdeck { min-height: 0; }
  .flow, .invcard { min-height: 0; overflow: hidden; }

  /* De stappen verdelen de hoogte van de groep; op een laag scherm wordt alles iets compacter */
  .flow { gap: clamp(var(--s-1), 1.1dvh, var(--s-3)); padding: clamp(var(--s-2), 1.6dvh, var(--s-4)) var(--s-4) var(--s-2); }
  .flow__steps { grid-auto-rows: minmax(0, 1fr); min-height: 0; padding-block: 0.15rem; }
  .flow__step { min-height: 0; padding-block: 0; }
  .flow__foot { padding-block: clamp(0.15rem, 0.7dvh, var(--s-2)); }
}
@media (min-width: 64rem) and (max-height: 50rem) {
  .flow__head h2, .flow__big { font-size: var(--step-0); }
  .flow__no { width: 1.3rem; height: 1.3rem; font-size: 0.625rem; }
  .flow__step { grid-template-columns: 1.3rem minmax(0, 1fr) auto auto; }
  .flow__steps > li + li .flow__step::before { left: 2.55rem; }
  .flow__n { height: 1.3rem; }
}

/* De stappen per fase als pijlen, boven het bord van de pijplijn: nummer, naam, aantal en een paar
   woningen. Past op een desktop naast elkaar; is het scherm te smal, dan schuift de balk opzij */
.steps { position: relative; display: flex; gap: var(--s-3); overflow-x: auto; scrollbar-width: thin; }
.steps__phase { display: grid; align-content: start; gap: var(--s-2); min-width: 0; }
.steps__phase--binnenkomen { flex: 6 1 0; min-width: calc(6 * 5.4rem); }
.steps__phase--verkoop { flex: 7 1 0; min-width: calc(7 * 5.4rem); }
.steps__phase--afgerond, .steps__phase--aankoop { flex: 1.15 1 0; min-width: 6.25rem; }
.steps__title { overflow: hidden; color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.stages { position: relative; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.stages__item a {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.15rem;
  min-height: 7rem;
  padding: 0.65rem 0.55rem 0.65rem 0.9rem;
  background: var(--sheet-2);
  color: var(--ink);
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 50%, calc(100% - 0.5rem) 100%, 0 100%, 0.5rem 50%);
  transition: background-color var(--dur) var(--ease);
}
.stages__item:first-child a { padding-left: 0.65rem; border-radius: var(--radius-lg) 0 0 var(--radius-lg); clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 50%, calc(100% - 0.5rem) 100%, 0 100%); }
.stages__item:last-child a { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.5rem 50%); }
.stages__item:only-child a { padding-left: 0.65rem; border-radius: var(--radius-lg); clip-path: none; }
.stages__item a::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--stage); }
.stages__item a:hover { background: var(--tint); }
.stages__name { display: grid; justify-items: start; gap: 0.3rem; min-width: 0; color: var(--ink-2); font-size: 0.625rem; white-space: nowrap; }
.stages__no { display: inline-grid; place-items: center; flex: none; min-width: 1.15rem; height: 1.15rem; padding: 0 0.2rem; border-radius: 999px; background: var(--stage); color: var(--label-text-dark); font-size: 0.5625rem; font-weight: 700; }
.stages__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.stages__count { font-size: 1.625rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stages__homes { display: flex; align-self: end; }
.stages__homes img { width: 1.5rem; height: 1.5rem; margin-left: -0.4rem; border: 2px solid var(--sheet-2); border-radius: 50%; object-fit: cover; }
.stages__homes img:first-child { margin-left: 0; }

.empty { color: var(--muted); font-size: var(--step--1); }

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