:root {
  /* Brand palette lifted from vv-consult.be: dark forest-teal wordmark/headings
     (#14524e), a warm terracotta accent dot (#c17a4a), and a soft cream page
     background (#f8f6f2) rather than the previous generic slate/blue scheme. */
  --vv-navy: #14524e;
  --vv-teal: #14524e;
  --vv-teal-light: #dcece9;
  --vv-amber: #c17a4a;
  --vv-bg: #f8f6f2;
  --vv-border: #e5e1d8;
  --vv-text: #262521;
  --vv-muted: #6b6a63;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--vv-bg); color: var(--vv-text); }
a { color: var(--vv-teal); }
.topbar {
  background: var(--vv-navy); color: white; padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
}
.topbar-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.topbar-nav a { color: #e2e8f0; text-decoration: none; font-size: 14px; white-space: nowrap; }
.topbar-nav a.active, .topbar-nav a:hover { color: var(--vv-teal-light); }

/* Hamburger menu -- pure CSS (checkbox toggle), no JS needed. On narrow
   screens the inline nav would otherwise wrap awkwardly across several
   lines and push page content down, so below the breakpoint it collapses
   into a dropdown opened by the icon button instead. */
.nav-toggle-checkbox { display: none; }
.nav-toggle-btn {
  display: none; cursor: pointer; padding: 6px; border-radius: 6px; line-height: 0;
}
.nav-toggle-btn:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 700px) {
  .nav-toggle-btn { display: inline-flex; align-items: center; justify-content: center; }
  .topbar-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--vv-navy);
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    padding: 4px 24px 12px; gap: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 20;
  }
  .nav-toggle-checkbox:checked ~ .topbar-nav { display: flex; }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn { background: rgba(255, 255, 255, 0.18); }
  .topbar-nav a { padding: 12px 2px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .topbar-nav a:first-child { border-top: none; }
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.3px; }
.brand-mark { height: 26px; width: auto; display: block; }
.brand small { display:block; font-weight: 400; color: #b9cfcc; font-size: 11px; }
.container { max-width: 1080px; margin: 28px auto; padding: 0 20px; }
.card {
  background: white; border: 1px solid var(--vv-border); border-radius: 10px;
  padding: 20px 22px; margin-bottom: 20px;
  /* A wide table (or anything else) inside a card scrolls within the card
     on narrow screens instead of forcing the whole page wider -- without
     this, one 7-column results table pushes the entire dashboard into
     horizontal scroll on a phone. */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.card h2 { margin-top: 0; font-size: 17px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--vv-border); }
th { color: var(--vv-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.ok { background: #dcfce7; color: #166534; }
.badge.muted { background: #f1f5f9; color: var(--vv-muted); }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.suppressed { background: #fee2e2; color: #991b1b; }
form.inline { display: inline; }
input, select, textarea, button {
  font-family: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--vv-border); border-radius: 6px;
}
button, .btn {
  background: var(--vv-teal); color: white; border: none; cursor: pointer;
  padding: 9px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; display: inline-block;
}
button.secondary, .btn.secondary { background: white; color: var(--vv-teal); border: 1px solid var(--vv-teal); }
button.danger { background: #dc2626; }
button:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-bottom: 12px; }
.grid-form label { display: block; font-size: 12px; color: var(--vv-muted); margin-bottom: 4px; }
.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.stat-tile { background: white; border: 1px solid var(--vv-border); border-radius: 10px; padding: 16px 20px; min-width: 160px; }
.stat-tile .value { font-size: 26px; font-weight: 700; color: var(--vv-navy); }
.stat-tile .label { font-size: 12px; color: var(--vv-muted); text-transform: uppercase; }
.stat-tile .benchmark { font-size: 12px; color: var(--vv-teal); margin-top: 4px; }
.progress { background: #e2e8f0; border-radius: 20px; height: 10px; overflow: hidden; margin-top: 6px; }
.progress > div { background: var(--vv-teal); height: 100%; }
.flag { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; }
.gdpr-note { background: #f0fdfa; border: 1px solid #99f6e4; padding: 12px 14px; border-radius: 8px; font-size: 13px; color: #134e4a; margin-bottom: 16px; }
.error { color: #dc2626; font-size: 13px; margin-bottom: 10px; }
.notice { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.survey-page { max-width: 640px; margin: 40px auto; padding: 0 20px; }
.survey-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; color: var(--vv-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.survey-brand-mark { height: 20px; width: auto; }
.dimension-block { margin-bottom: 22px; }
.dimension-block h3 { font-size: 15px; margin-bottom: 10px; color: var(--vv-navy); }
.item-row { margin-bottom: 14px; font-size: 14px; }
.scale-options { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.scale-options label {
  border: 1px solid var(--vv-border); border-radius: 8px; cursor: pointer; font-size: 14px;
  /* Sized for a comfortable thumb tap on a phone (roughly 40px+), not just
     readable text -- this is filled in on a personal device by a customer,
     unlike the rest of the app which is used by the initiator at a desk. */
  min-width: 40px; min-height: 40px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: center;
}
.scale-options input { display: none; }
.scale-options input:checked + span { font-weight: 700; }
.scale-options label:has(input:checked) { border-color: var(--vv-teal); background: var(--vv-teal-light); }
.footer-note { font-size: 12px; color: var(--vv-muted); margin-top: 30px; }
.test-banner { background: #fef3c7; border: 1px solid #fde68a; color: #78350f; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; font-weight: 600; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { border: 1px solid var(--vv-border); border-radius: 20px; padding: 4px 12px; font-size: 12px; color: var(--vv-muted); }