/* ===========================================================
   GOODASH: UI-componenten (dashboardvensters)
   Gedeeld door de homepage en de dienstpagina's. Alles is in "em"
   opgebouwd en schaalt mee met de breedte van het kader.
   .is-live (gezet door ui.js zodra het in beeld is) laat de grafieken
   zich tekenen; zonder JS staat alles direct in de eindstand.
   =========================================================== */

/* ---------- Dashboard-component (hero + story) ----------
   Een echte, schaalbare UI in huisstijl i.p.v. een screenshot: alles is in "em"
   opgebouwd en schaalt mee met de breedte van het kader (container query). */
.gd {
  container-type: inline-size;
  margin: 0;
  perspective: 1800px;
}

/* cqw verwijst naar de dichtstbijzijnde container-ANDER-element, dus de
   lettergrootte staat op het kind van de container. */
.gd__scene {
  position: relative;
  width: 100%;
  font-size: 12px;
  font-size: calc(100cqw / 54);
  /* plat samenstellen: het venster kantelt zelf, maar de meldingen liggen er altijd bovenop */
  transform-style: flat;
}

.gd__window {
  position: relative;
  border-radius: 1.4em;
  background: #fff;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(6,20,46,0.08),
    0 2px 4px rgba(6,20,46,0.04),
    0 30px 70px -24px rgba(0,58,137,0.42),
    0 60px 120px -50px rgba(6,20,46,0.5);
  transform-origin: 50% 50%;
  will-change: transform;
}

.gd__bar {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.85em 1.2em;
  background: linear-gradient(180deg, #fbfcfe, #f3f6fb);
  border-bottom: 1px solid #e4ebf6;
  font-size: 0.95em;
}

.gd__dots { display: inline-flex; gap: 0.45em; }
.gd__dots i { width: 0.75em; height: 0.75em; border-radius: 50%; background: #d3dded; }

.gd__title { color: #6b7a90; font-weight: 500; letter-spacing: -0.005em; }

.gd__badge {
  margin-left: auto;
  padding: 0.2em 0.7em;
  border-radius: 0.5em;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 500;
}

.gd__body { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); }

.gd__side {
  padding: 1.4em 1.1em;
  background: var(--color-ink);
  color: #cbd7ee;
}

.gd__side b { display: block; color: #fff; font-size: 1.25em; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1.6em; }
.gd__side ul { list-style: none; display: grid; gap: 0.35em; }
.gd__side li { padding: 0.6em 0.8em; border-radius: 0.6em; font-weight: 500; opacity: 0.72; }
.gd__side li.is-on { background: rgba(255,255,255,0.1); color: #fff; opacity: 1; }

.gd__main { padding: 1.4em 1.5em 1.5em; background: #fcfdff; min-width: 0; }

.gd__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1em; }
.gd__head h3 { font-size: 1.45em; letter-spacing: -0.03em; }
.gd__chip { padding: 0.35em 0.9em; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #dfe7f3; color: #55606c; font-weight: 500; }

.gd__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9em; margin-bottom: 1.1em; }

.kpi {
  padding: 1em 1.1em;
  border-radius: 0.9em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e4ebf6;
  display: grid;
  gap: 0.25em;
}

.kpi span { color: #6b7a90; font-weight: 500; }
.kpi strong { font-size: 1.75em; font-weight: 600; letter-spacing: -0.03em; color: var(--color-heading); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi em { font-style: normal; font-family: var(--font-mono); font-size: 0.9em; font-weight: 500; }
.kpi em.up { color: #12805a; }
.kpi em.down { color: #b45309; }

.gd__chart {
  border-radius: 0.9em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e4ebf6;
  padding: 0.9em 0.9em 0.3em;
}

.gd__chart svg { display: block; width: 100%; height: 11.5em; overflow: visible; }

/* SVG-grafieken (gedeeld door hero en story) */
.gd .grid path { stroke: #e4ebf6; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.gd .line { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.gd .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

@keyframes gd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gd-fade { from { opacity: 0; } to { opacity: 1; } }

:is(.is-live) .draw { animation: gd-draw 1.8s var(--ease-out) 0.5s both; }
:is(.is-live) .area { animation: gd-fade 1.4s ease 1s both; }

/* Zwevende meldingen (diepte) */
.gd__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.9em 1.3em 0.9em 1em;
  border-radius: 1em;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 0 0 1px rgba(6,20,46,0.06), 0 22px 44px -16px rgba(6,20,46,0.34);
  font-size: 1.02em;
  line-height: 1.3;
  white-space: nowrap;
  z-index: 2;
  animation: float-in 0.9s var(--ease-out) both;
}

.gd__float b { display: block; font-weight: 600; color: var(--color-heading); letter-spacing: -0.01em; }
.gd__float small { color: #6b7a90; font-size: 0.92em; }

.gd__float--sync { top: 14%; right: -3%; animation-delay: 1.1s; }
.gd__float--alert { left: -5%; bottom: 10%; animation-delay: 1.5s; }

.gd__ok, .gd__warn {
  flex: 0 0 auto;
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.7em;
  position: relative;
}

.gd__ok { background: #e3f4ec; }
.gd__ok::after {
  content: "";
  position: absolute;
  left: 0.78em; top: 0.5em;
  width: 0.55em; height: 0.95em;
  border: solid #12805a;
  border-width: 0 0.2em 0.2em 0;
  transform: rotate(45deg);
}

.gd__warn { background: #fdecd3; }
.gd__warn::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.8em; height: 0.8em;
  margin: -0.4em 0 0 -0.4em;
  border-radius: 50%;
  background: #d97706;
}

@keyframes float-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gd .draw, .gd .area, .gd__float { animation: none; }
}

/* Desktop met beweging: het dashboard staat schuin in de ruimte (GSAP stuurt de tilt) */
.home-motion .gd__window:not(.gd__window--sv) { transform: rotateY(-7deg) rotateX(3deg) rotate(0.4deg); }

@media (max-width: 899px) {
  .gd__scene { font-size: calc(100cqw / 50); }
  .gd__body { grid-template-columns: 1fr; }
  .gd__side { display: none; }
  .gd__float--sync { right: 2%; top: -4%; }
  .gd__float--alert { left: 2%; bottom: -5%; }
}


/* Weergaven in de vensters */
.sv text { font-family: var(--font-base); font-size: 14px; fill: #55606c; }
.sv .grid path { stroke: #e4ebf6; stroke-width: 1; fill: none; }
.sv .kl { font-size: 15px; font-weight: 500; fill: #6b7a90; }
.sv .kv { font-size: 30px; font-weight: 600; fill: var(--color-heading); letter-spacing: -0.03em; }
.sv .axis text { font-size: 13px; fill: #8794a8; }

.sv .node rect { fill: #fff; stroke: #d3dded; stroke-width: 1.5; }
.sv .node text { fill: var(--color-heading); font-weight: 500; }
.sv .node--out rect { fill: var(--color-primary-soft); stroke: #b7cdf1; }
.sv .node--out text { fill: var(--color-primary); font-weight: 600; }
.sv .hub rect { fill: var(--color-ink); }
.sv .hub text { fill: #fff; font-weight: 600; font-size: 15px; }

.sv .flow path { fill: none; stroke: #9fbbe6; stroke-width: 2; stroke-dasharray: 5 7; }

.sv .bars rect { fill: #bfd3f2; transform-box: fill-box; transform-origin: bottom; }
.sv .bars rect.hi { fill: var(--color-primary); }
.sv .line { fill: none; stroke: var(--color-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sv .bars + .line { stroke: var(--color-ink); }

.sv .thr { stroke: #d97706; stroke-width: 1.5; stroke-dasharray: 6 6; fill: none; }
.sv .thr-l { fill: #b45309; font-size: 13px; font-weight: 500; }
.sv .alert-dot { fill: #d97706; stroke: #fff; stroke-width: 3; }
.sv .ping { fill: rgba(217,119,6,0.22); transform-box: fill-box; transform-origin: center; }
.sv .toast rect { fill: #fff; stroke: #f3cf9b; stroke-width: 1.5; filter: drop-shadow(0 10px 18px rgba(6,20,46,0.14)); }
.sv .toast circle { fill: #d97706; }
.sv .toast .t1 { fill: var(--color-heading); font-weight: 600; font-size: 14px; }
.sv .toast .t2 { font-size: 12.5px; }

.sv .rail { stroke: #d3dded; stroke-width: 2; stroke-dasharray: 4 6; fill: none; }
.sv .step .c { fill: #e3f4ec; stroke: #12805a; stroke-width: 2; }
.sv .step .tick { fill: none; stroke: #12805a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sv .step .t1 { fill: var(--color-heading); font-weight: 600; font-size: 16px; }
.sv .step .t2 { font-size: 13.5px; }

/* Leven in de weergaven: alleen op het actieve beeld (en nooit bij verminder beweging) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sv-flow { to { stroke-dashoffset: -48; } }
  @keyframes sv-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes sv-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes sv-ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
  @keyframes sv-step { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }

  :is(.is-active, .is-live) .flow path { animation: sv-flow 1.6s linear infinite; }
  :is(.is-active, .is-live) .bars rect { animation: sv-grow 0.9s var(--ease-out) both; }
  :is(.is-active, .is-live) .bars rect:nth-child(2) { animation-delay: 0.06s; }
  :is(.is-active, .is-live) .bars rect:nth-child(3) { animation-delay: 0.12s; }
  :is(.is-active, .is-live) .bars rect:nth-child(4) { animation-delay: 0.18s; }
  :is(.is-active, .is-live) .bars rect:nth-child(5) { animation-delay: 0.24s; }
  :is(.is-active, .is-live) .bars rect:nth-child(6) { animation-delay: 0.3s; }
  :is(.is-active, .is-live) .bars rect:nth-child(7) { animation-delay: 0.36s; }
  :is(.is-active, .is-live) .draw { animation: gd-draw 1.6s var(--ease-out) 0.2s both; }
  :is(.is-active, .is-live) .toast { animation: sv-pop 0.8s var(--ease-out) 1.2s both; }
  :is(.is-active, .is-live) .ping { animation: sv-ping 1.8s ease-out 1.1s infinite; }
  :is(.is-active, .is-live) .step { animation: sv-step 0.7s var(--ease-out) both; }
  :is(.is-active, .is-live) .step.s2 { animation-delay: 0.45s; }
  :is(.is-active, .is-live) .step.s3 { animation-delay: 0.9s; }
}


/* Kleine gedeelde onderdelen voor de dienstpagina's ---------------------------- */
.gd__window--sv { box-shadow: 0 0 0 1px rgba(6,20,46,0.08), 0 24px 60px -28px rgba(0,58,137,0.35); }
.gd__window--sv .sv { display: block; width: 100%; height: auto; background: #fcfdff; }

.gd__pad { padding: 1.4em 1.5em 1.5em; background: #fcfdff; }
.gd__pad h3 { font-size: 1.3em; letter-spacing: -0.03em; margin-bottom: 1em; }

/* Lijst met gekoppelde systemen */
.rows { list-style: none; display: grid; }
.rows li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1.2em;
  padding: 0.85em 0;
  border-top: 1px solid #e9eef7;
}
.rows li:first-child { border-top: none; }
.rows b { font-weight: 600; color: var(--color-heading); }
.rows small { color: #6b7a90; font-family: var(--font-mono); font-size: 0.85em; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  font-weight: 500;
  background: #e3f4ec;
  color: #12805a;
}
.pill::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.pill--warn { background: #fdecd3; color: #b45309; }
.pill--blue { background: var(--color-primary-soft); color: var(--color-primary); }
.rows .rows__ask { color: #6b7a90; font-weight: 500; }

/* Horizontale balken */
.hbars { display: grid; gap: 1.1em; }
.hbar { display: grid; gap: 0.45em; }
.hbar__top { display: flex; justify-content: space-between; font-weight: 500; color: var(--color-heading); }
.hbar__top span:last-child { font-family: var(--font-mono); color: #6b7a90; font-size: 0.9em; }
.hbar__track { height: 0.8em; border-radius: 999px; background: #e9eff9; overflow: hidden; }
.hbar__fill { height: 100%; width: var(--w); border-radius: inherit; background: #9dbbea; transform-origin: left; }
.hbar__fill--hi { background: var(--color-primary); }

/* Meldingenlijst */
.alerts { list-style: none; display: grid; gap: 0.8em; }
.alerts li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1em;
  padding: 1em 1.1em;
  border-radius: 1em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e4ebf6;
}
.alerts .ic { width: 2.4em; height: 2.4em; border-radius: 0.75em; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; font-size: 0.85em; background: var(--color-primary-soft); color: var(--color-primary); }
.alerts .ic--warn { background: #fdecd3; color: #b45309; }
.alerts b { display: block; font-weight: 600; color: var(--color-heading); }
.alerts small { color: #6b7a90; }
.alerts time { font-family: var(--font-mono); font-size: 0.85em; color: #8794a8; }

/* Handmatig versus automatisch */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em; }
.versus__col { padding: 1.3em 1.4em; border-radius: 1.1em; background: #fff; box-shadow: inset 0 0 0 1px #e4ebf6; }
.versus__col--auto { background: linear-gradient(180deg, #f2f7ff, #fff); box-shadow: inset 0 0 0 1px #bcd1f3; }
.versus h4 { font-size: 1.05em; letter-spacing: -0.02em; margin-bottom: 0.9em; display: flex; justify-content: space-between; align-items: center; }
.versus ol { list-style: none; display: grid; gap: 0.7em; counter-reset: v; }
.versus li { display: flex; gap: 0.8em; align-items: flex-start; color: #55606c; }
.versus li::before { counter-increment: v; content: counter(v); flex: 0 0 auto; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8em; background: #eef2f8; color: #6b7a90; margin-top: 0.1em; }
.versus__col--auto li::before { content: ""; background: #e3f4ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312805a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/55% no-repeat; }
.versus__col--auto li { color: var(--color-heading); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes ui-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes ui-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .is-live .rows li, .is-live .alerts li, .is-live .versus li { animation: ui-rise 0.7s var(--ease-out) both; }
  .is-live .rows li:nth-child(2), .is-live .alerts li:nth-child(2), .is-live .versus li:nth-child(2) { animation-delay: 0.12s; }
  .is-live .rows li:nth-child(3), .is-live .alerts li:nth-child(3), .is-live .versus li:nth-child(3) { animation-delay: 0.24s; }
  .is-live .rows li:nth-child(4), .is-live .alerts li:nth-child(4), .is-live .versus li:nth-child(4) { animation-delay: 0.36s; }
  .is-live .rows li:nth-child(5) { animation-delay: 0.48s; }
  .is-live .rows li:nth-child(6) { animation-delay: 0.6s; }
  .is-live .rows li:nth-child(7) { animation-delay: 0.72s; }
  .is-live .hbar__fill { animation: ui-bar 1.2s var(--ease-out) both; }
  .is-live .hbar:nth-child(2) .hbar__fill { animation-delay: 0.12s; }
  .is-live .hbar:nth-child(3) .hbar__fill { animation-delay: 0.24s; }
  .is-live .hbar:nth-child(4) .hbar__fill { animation-delay: 0.36s; }
}

/* Staande tilt (alleen gezet door ui.js bij muis en zonder "verminder beweging") */
.gd.has-tilt .gd__window[data-tilt] { transform: perspective(1800px) rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)); transition: transform 0.15s linear; }

@media (max-width: 899px) {
  .versus { grid-template-columns: 1fr; }
  .rows li { grid-template-columns: 1fr auto; }
  .rows li small { display: none; }
}

/* Voorbereiden op de intro: alleen als ui.js/de inline <head>-regel de pagina "bewapent"
   (geen "verminder beweging"). Zonder JS staat alles gewoon in de eindstand. */
.ui-armed .gd[data-live]:not(.is-live) .draw { stroke-dashoffset: 1; }
.ui-armed .gd[data-live]:not(.is-live) :is(.area, .toast, .rows li, .alerts li, .versus li, .bars rect) { opacity: 0; }
.ui-armed .gd[data-live]:not(.is-live) .hbar__fill { transform: scaleX(0); }

/* Klantenlijst en projectverloop ---------------------------------------------- */
.rows:not(.rows--logos) li:not(:has(small)) { grid-template-columns: 1fr auto; }

.rows--logos li { grid-template-columns: 8em 1fr; padding-block: 0.95em; }
.rows__logo { display: flex; align-items: center; height: 2.4em; }
.rows__logo img { max-height: 2em; max-width: 7em; width: auto; height: auto; object-fit: contain; }

.rows--steps { margin-top: 1.1em; }
.rows--steps li { grid-template-columns: 2.2em 1fr auto; padding-block: 0.7em; }
.rows--steps small { color: #8794a8; }

.pill--idle { background: #eef2f8; color: #6b7a90; }
.hbar--lead { padding-bottom: 0.4em; }

@media (max-width: 899px) {
  .rows--logos li { grid-template-columns: 6em 1fr; }
  .rows--logos li { grid-template-columns: 6em 1fr; }
}