/* app.css — faithful subset of Klusinzicht globals.css, for the launch video.
   Values lifted verbatim from apps/web/app/globals.css. */

.kv-app, .kv-app * { box-sizing: border-box; }

.kv-app {
  --background:#f3f4f9; --surface:#ffffff; --surface-muted:#f6f7fb; --surface-strong:#eceef5;
  --text:#232840; --text-muted:#686f8d; --text-soft:#9aa0b8;
  --primary:#f97b16; --primary-strong:#e2660a; --primary-soft:#ffefe0; --primary-wash:rgba(249,123,22,0.08);
  --secondary:#6155e6; --secondary-strong:#4f43d4; --secondary-soft:#eae8fc; --secondary-wash:rgba(97,85,230,0.08);
  --success:#119a5d; --success-strong:#0d7a4d; --success-soft:#ddf5e8;
  --warning:#d98a06; --warning-soft:#fcf0d7; --danger:#e44d68; --danger-soft:#fde4ea;
  --border:#e9ebf3; --border-strong:#d9dcea;
  --ink:#20243a; --ink-strong:#14172a; --ink-contrast:#ffffff; --ink-wash:rgba(32,36,58,0.08);
  --shadow-ink:0 10px 24px -10px rgba(20,23,42,0.45);
  --shadow-card:0 1px 2px rgba(35,40,64,0.04),0 6px 18px -10px rgba(35,40,64,0.08),0 14px 36px -18px rgba(35,40,64,0.13);
  --shadow-card-hover:0 2px 4px rgba(35,40,64,0.05),0 10px 24px -12px rgba(35,40,64,0.1),0 22px 48px -18px rgba(35,40,64,0.18);
  --radius-sm:10px; --radius-md:14px; --radius-lg:22px; --radius-xl:28px;
  --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  font-family:var(--font-body); color:var(--text); letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ── Brand wordmark (exact) ─────────────────────────────────────────── */
.brand-wordmark{ display:inline-flex; align-items:baseline; gap:0.03em;
  font-family:var(--font-display); font-size:1.12rem; font-weight:700;
  letter-spacing:-0.025em; line-height:1; }
.brand-wordmark-mark{ height:0.74em; width:auto; align-self:baseline; transform:translateY(0.05em); flex:none; }
.brand-wordmark-text{ display:inline-flex; }
.brand-wordmark-lus{ color:var(--ink); }
.brand-wordmark-inzicht{ color:var(--primary); }

/* ── Shell ───────────────────────────────────────────────────────────── */
.app-shell{ display:grid; grid-template-columns:84px minmax(0,1fr);
  border-radius:var(--canvas-radius,30px); background:var(--background);
  overflow:clip; height:100%; }
.app-nav{ display:flex; flex-direction:column; align-items:center; width:84px;
  padding:calc(72px + 1.4rem) 0 1.2rem; background:transparent; }
.nav-list{ display:grid; gap:0.85rem; justify-items:center; margin-top:0.4rem; }
.nav-item{ position:relative; display:grid; width:52px; height:52px; place-items:center;
  border-radius:999px; background:var(--surface); color:var(--text-muted); box-shadow:var(--shadow-card); }
.nav-item svg{ width:21px; height:21px; opacity:0.8; }
.nav-item.active{ background:var(--ink); color:var(--ink-contrast); }
.nav-item.active svg{ opacity:1; }
.nav-item .nav-badge{ position:absolute; top:-2px; right:-2px; display:inline-grid; min-width:18px;
  height:18px; place-items:center; padding:0 0.3rem; border-radius:999px; background:var(--danger);
  color:#fff; font-size:0.64rem; font-weight:700; box-shadow:0 0 0 2px var(--background); }
.app-main{ min-width:0; display:flex; flex-direction:column; }

.top-bar{ display:flex; min-height:72px; align-items:center; justify-content:space-between;
  gap:1rem; border-bottom:1px solid var(--border); padding:0 1.4rem 0 0.9rem;
  background:rgba(243,244,249,0.86); }
.top-bar .brand-wordmark{ margin-right:auto; font-size:1.12rem; }
.top-search{ display:flex; flex:1; max-width:420px; align-items:center; gap:0.55rem; min-height:44px;
  padding:0 1rem; border:1px solid transparent; border-radius:999px; background:var(--surface);
  box-shadow:var(--shadow-card); color:var(--text-soft); }
.top-search svg{ width:16px; height:16px; }
.top-search span{ font-size:0.88rem; color:var(--text-soft); }
.top-actions{ display:flex; align-items:center; gap:0.7rem; }
.demo-badge{ display:inline-flex; align-items:center; gap:0.45rem; padding:0.38rem 0.75rem;
  border-radius:999px; background:var(--warning-soft); color:var(--warning); font-size:0.72rem;
  font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
.demo-badge::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--warning); }
.company-switcher{ display:inline-flex; align-items:center; max-width:240px; min-height:44px;
  padding:0 1rem; border-radius:999px; background:var(--surface); color:var(--text); font-size:0.88rem;
  font-weight:600; box-shadow:var(--shadow-card); white-space:nowrap; }
.top-settings{ display:grid; width:44px; height:44px; place-items:center; border-radius:999px;
  background:var(--surface); color:var(--text-muted); box-shadow:var(--shadow-card); }
.top-settings svg{ width:21px; height:21px; }
.user-menu{ display:grid; width:44px; height:44px; place-items:center; border-radius:999px;
  background:linear-gradient(135deg,var(--secondary) 0%,#8a7ff0 100%); color:#fff; font-size:0.78rem;
  font-weight:700; letter-spacing:0.04em; text-transform:uppercase; box-shadow:0 10px 22px -10px rgba(97,85,230,0.65); }

.page-stack{ display:grid; gap:1.4rem; width:100%; max-width:1280px; margin:0 auto;
  padding:1.6rem 1.8rem 2rem; }
.mono-eyebrow{ color:var(--text-soft); font-family:var(--font-body); font-size:0.72rem;
  font-weight:700; letter-spacing:0.09em; text-transform:uppercase; margin:0; }
.page-intro{ display:grid; gap:0.4rem; max-width:760px; }
.page-intro h1{ margin:0; color:var(--text); font-family:var(--font-display); font-weight:700;
  letter-spacing:-0.02em; line-height:1.15; font-size:2.6rem; }
.page-intro p:not(.mono-eyebrow){ max-width:620px; margin:0; color:var(--text-muted);
  font-size:0.96rem; line-height:1.6; }

/* ── Hero number block ───────────────────────────────────────────────── */
.hero-number-block{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  gap:2.25rem; padding:2.1rem 2.2rem; border-radius:var(--radius-xl); background:var(--surface);
  box-shadow:var(--shadow-card); overflow:hidden; }
.hero-number-block::after{ content:""; position:absolute; top:-120px; right:-80px; width:360px; height:320px;
  border-radius:999px; background:radial-gradient(closest-side,var(--primary-wash),transparent 72%),
  radial-gradient(closest-side at 30% 80%,var(--secondary-wash),transparent 70%); pointer-events:none; }
.hero-copy{ position:relative; z-index:1; display:grid; align-content:start; gap:0.6rem; min-width:0; }
.hero-number-block h1{ margin:0; color:var(--text); font-family:var(--font-display); font-size:5rem;
  font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.035em; line-height:1; white-space:nowrap; }
.hero-sentence{ max-width:620px; margin:0.5rem 0 0; color:var(--text-muted); font-size:1.02rem; line-height:1.55; }
.hero-side{ position:relative; z-index:1; display:grid; align-content:space-between; gap:1rem; min-width:0;
  padding:1.3rem 1.4rem; border-radius:var(--radius-lg); background:var(--surface-muted); }
.eyebrow-row{ display:flex; align-items:center; gap:0.4rem; }
.breakdown-list{ display:grid; gap:0.6rem; font-size:0.88rem; }
.breakdown-line{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.breakdown-line span{ color:var(--text-muted); white-space:nowrap; }
.breakdown-line strong{ color:var(--text); font-size:0.9rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero-trend{ display:grid; gap:0.35rem; margin-top:0.4rem; padding-top:0.7rem; border-top:1px solid var(--border); }
.sparkline-caption{ display:flex; align-items:center; gap:0.4rem; margin:0; color:var(--text-muted);
  font-size:0.78rem; font-weight:600; }
.info-glyph{ display:inline-grid; place-items:center; width:17px; height:17px; border-radius:999px;
  background:var(--surface-strong); color:var(--text-muted); font-size:11px; font-weight:700; }

/* ── Week-acties (side card) ─────────────────────────────────────────── */
.week-card{ display:grid; align-content:start; gap:1rem; padding:1.7rem 1.6rem; border-radius:var(--radius-xl);
  background:var(--surface); box-shadow:var(--shadow-card); }
.week-card h2{ margin:0; font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  letter-spacing:-0.02em; color:var(--text); }
.week-card .lead{ margin:0; color:var(--text-muted); font-size:0.92rem; line-height:1.5; }
.week-item{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:0.8rem; padding-top:1rem;
  border-top:1px solid var(--border); }
.week-num{ display:grid; place-items:center; width:30px; height:30px; border-radius:999px;
  background:var(--primary-soft); color:var(--primary-strong); font-weight:700; font-size:0.86rem; }
.week-body h3{ margin:0 0 0.4rem; font-family:var(--font-body); font-size:0.98rem; font-weight:600;
  line-height:1.35; color:var(--text); }
.week-impact{ margin:0 0 0.7rem; color:var(--text-soft); font-size:0.82rem; }
.btn-outline{ display:inline-flex; align-items:center; gap:0.4rem; min-height:38px; padding:0.45rem 1rem;
  border:1px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--text);
  font-size:0.84rem; font-weight:600; cursor:pointer; }
.btn-outline.done{ border-color:var(--success); background:var(--success-soft); color:var(--success-strong); }

/* ── Answer panels ───────────────────────────────────────────────────── */
.section-card{ display:grid; gap:1rem; padding:1.6rem 1.7rem; border-radius:var(--radius-xl);
  background:var(--surface); box-shadow:var(--shadow-card); }
.section-heading{ display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.section-heading h2{ margin:0; font-family:var(--font-display); font-size:1.4rem; font-weight:700;
  letter-spacing:-0.02em; color:var(--text); white-space:nowrap; }

/* ── Segmented control ───────────────────────────────────────────────── */
.segmented{ display:inline-flex; gap:0.25rem; padding:0.3rem; border-radius:999px; background:var(--surface-strong); }
.segmented button{ display:inline-flex; align-items:center; min-height:38px; padding:0 1rem; border:0;
  border-radius:999px; background:transparent; color:var(--text-muted); font-size:0.86rem; font-weight:500; cursor:pointer; }
.segmented button.active{ background:var(--ink); color:var(--ink-contrast); font-weight:600; box-shadow:var(--shadow-ink); }

/* ── Chart legend chips (trends) ─────────────────────────────────────── */
.chip-row{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.45rem 0.85rem; border-radius:999px;
  background:var(--surface-strong); color:var(--text-soft); font-size:0.86rem; font-weight:600; }
.chip.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-card); }
.chip i{ width:11px; height:11px; border-radius:3px; font-style:normal; background:currentColor; }

/* ── KPI cards (facturen) ────────────────────────────────────────────── */
.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.kpi{ position:relative; display:grid; gap:0.5rem; padding:1.5rem 1.5rem 1.4rem; border-radius:var(--radius-lg);
  background:var(--surface); box-shadow:var(--shadow-card); }
.kpi .dot{ width:12px; height:12px; border-radius:999px; }
.kpi.red .dot{ background:var(--danger); box-shadow:0 0 0 7px var(--danger-soft); }
.kpi.amber .dot{ background:var(--warning); box-shadow:0 0 0 7px var(--warning-soft); }
.kpi.green .dot{ background:var(--success); box-shadow:0 0 0 7px var(--success-soft); }
.kpi .lbl{ color:var(--text-soft); font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.kpi .val{ font-family:var(--font-display); font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.kpi.red .val{ color:var(--danger); } .kpi.amber .val{ color:var(--warning); } .kpi.green .val{ color:var(--success); }
.kpi .sub{ color:var(--text-muted); font-size:0.9rem; line-height:1.45; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.tbl-card{ border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-card); overflow:hidden; }
table.kv{ width:100%; border-collapse:collapse; }
table.kv th{ padding:1rem 1.2rem 0.8rem; border-bottom:1px solid var(--border); color:var(--text-soft);
  font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-align:left; text-transform:uppercase; }
table.kv td{ padding:1rem 1.2rem; border-bottom:1px solid var(--border); vertical-align:middle; font-size:0.92rem; }
table.kv tbody tr:last-child td{ border-bottom:0; }
table.kv td strong{ display:block; color:var(--text); font-weight:600; }
table.kv td .muted{ display:block; margin-top:0.2rem; color:var(--text-soft); font-size:0.82rem; }
.num{ font-variant-numeric:tabular-nums; text-align:right; }
.pill{ display:inline-flex; align-items:center; padding:0.25rem 0.7rem; border-radius:999px; font-size:0.78rem; font-weight:600; }
.pill.red{ background:var(--danger-soft); color:var(--danger); }
.pill.violet{ background:var(--secondary-soft); color:var(--secondary-strong); }

/* ── Filters bar ─────────────────────────────────────────────────────── */
.filters-bar{ display:flex; flex-wrap:wrap; gap:0.9rem 1.4rem; align-items:center; padding:1rem 1.2rem;
  border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-card); }
.btn-ink{ display:inline-flex; align-items:center; min-height:44px; padding:0 1.4rem; border:0; border-radius:999px;
  background:var(--ink); color:#fff; font-size:0.9rem; font-weight:600; cursor:pointer; box-shadow:var(--shadow-ink); }

/* ── Per-klustype cards (nacalculatie) ───────────────────────────────── */
.klustype-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.kt-card{ display:grid; gap:0.55rem; padding:1.4rem 1.4rem; border-radius:var(--radius-lg);
  background:var(--surface); box-shadow:var(--shadow-card); }
.kt-card h3{ margin:0; font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--text); }
.kt-meta{ color:var(--text-soft); font-size:0.82rem; }
.kt-line{ display:flex; justify-content:space-between; align-items:baseline; font-size:0.9rem; }
.kt-line .k{ color:var(--text-muted); }
.kt-line .v{ font-weight:700; font-variant-numeric:tabular-nums; }
.kt-line .goal{ color:var(--text-soft); font-weight:500; font-size:0.82rem; }
.kt-note{ margin-top:0.4rem; padding:0.7rem 0.85rem; border-radius:var(--radius-md); background:var(--surface-muted);
  color:var(--text-muted); font-size:0.8rem; line-height:1.4; }
.kt-note b{ color:var(--primary-strong); }
.neg{ color:var(--danger); } .pos{ color:var(--success); } . org{ color:var(--primary-strong); }

/* ── Slider (risico / wat-als / offerte) ─────────────────────────────── */
.slider-card{ display:grid; gap:0.45rem; padding:1.3rem 1.5rem; border-radius:var(--radius-lg);
  background:var(--surface); box-shadow:var(--shadow-card); }
.slider-row{ display:flex; align-items:center; gap:1.4rem; }
.slider-label{ font-size:0.96rem; color:var(--text); }
.slider-label b{ font-weight:700; }
.kv-track{ position:relative; flex:1; height:6px; border-radius:999px; background:var(--surface-strong); }
.kv-track.ink-fill .kv-fill{ background:var(--ink); }
.kv-track.blue-fill .kv-fill{ background:var(--secondary); }
.kv-fill{ position:absolute; left:0; top:0; height:100%; border-radius:999px; background:var(--primary); }
.kv-knob{ position:absolute; top:50%; width:20px; height:20px; border-radius:999px; background:var(--surface);
  box-shadow:0 2px 6px rgba(35,40,64,0.3),0 0 0 1px var(--border-strong); transform:translate(-50%,-50%); }
.kv-knob.orange{ background:var(--primary); box-shadow:0 2px 8px rgba(249,123,22,0.5); }
.slider-sub{ color:var(--text-muted); font-size:0.85rem; }

/* ── Offerte form ────────────────────────────────────────────────────── */
.offerte-grid{ display:grid; grid-template-columns:1fr 380px; gap:1.4rem; align-items:start; }
.form-card{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; padding:1.6rem 1.7rem;
  border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-card); }
.field{ display:grid; gap:0.4rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:0.92rem; font-weight:600; color:var(--text); }
.field .input{ display:flex; align-items:center; min-height:48px; padding:0 0.9rem; border:1px solid var(--border);
  border-radius:var(--radius-md); background:var(--surface-muted); color:var(--text); font-size:1rem; }
.field .input.focus{ border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 4px var(--primary-wash); }
.field .input .ph{ color:var(--text-soft); }
.field .hint{ color:var(--text-soft); font-size:0.8rem; }
.advies-card{ display:grid; gap:0.55rem; padding:1.7rem 1.7rem; border-radius:var(--radius-xl);
  background:var(--surface); box-shadow:var(--shadow-card); }
.advies-card .num-big{ font-family:var(--font-display); font-size:3rem; font-weight:800; font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em; color:var(--text); line-height:1; }
.advies-card .incl{ color:var(--text-muted); font-size:0.9rem; }
.marge-badge{ justify-self:start; padding:0.4rem 0.85rem; border-radius:999px; background:var(--success-soft);
  color:var(--success-strong); font-size:0.86rem; font-weight:600; }
.advies-line{ display:flex; justify-content:space-between; gap:0.8rem; font-size:0.92rem; color:var(--text-muted); }
.advies-line span{ white-space:nowrap; }
.advies-line strong{ color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.advies-sep{ height:1px; background:var(--border); margin:0.3rem 0; }
.slim-btn{ padding:1rem 1.2rem; border-radius:var(--radius-md); background:var(--secondary-soft);
  color:var(--secondary-strong); font-weight:700; font-size:1rem; text-align:center; }

/* ── Findings (lekken) ───────────────────────────────────────────────── */
.findings-list{ display:grid; border-radius:var(--radius-lg); background:var(--surface);
  overflow:hidden; box-shadow:var(--shadow-card); }
.finding-row{ display:grid; grid-template-columns:120px minmax(0,1fr) 40px; gap:1.1rem; align-items:center;
  border-bottom:1px solid var(--border); padding:1.2rem 1.3rem; }
.finding-row:last-child{ border-bottom:0; }
.finding-impact{ display:inline-flex; align-items:center; justify-content:center; padding:0.4rem 0.7rem;
  border-radius:999px; font-size:0.84rem; font-weight:700; font-variant-numeric:tabular-nums; }
.finding-row.high .finding-impact{ background:var(--danger-soft); color:var(--danger); }
.finding-row.medium .finding-impact{ background:var(--warning-soft); color:var(--warning); }
.finding-row.low .finding-impact{ background:var(--success-soft); color:var(--success); }
.finding-title{ color:var(--text); font-size:1.05rem; font-weight:600; letter-spacing:-0.01em; }
.finding-tier{ color:var(--text-muted); font-size:0.74rem; font-weight:600; margin-top:0.2rem; }
.finding-row.resolved{ opacity:0.5; }
.finding-row.resolved .finding-title{ text-decoration:line-through; }
.chev{ color:var(--text-muted); }

/* what-als panel */
.whatif{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.whatif-cell{ display:grid; gap:0.7rem; padding:1.1rem 1.2rem; border-radius:var(--radius-md); background:var(--surface-muted); }
.whatif-cell .lab{ font-size:0.95rem; color:var(--text); }
.whatif-cell .lab b{ color:var(--primary-strong); }
.whatif-cell .res{ font-size:1.05rem; }
.whatif-cell .res b{ color:var(--success); font-weight:700; font-variant-numeric:tabular-nums; }