/* Koentact design tokens — derived from the koentact.nl huisstijl analysis
   (Claude Design project "Koentact.nl huisstijl analyse", imported 2026-09-01).

   The brand is LIGHT: paper white, one green, dark ink. Light is therefore the
   DEFAULT; [data-theme="dark"] is the variant, built on the same ink and green.
   The green is the REAL brand green, sampled from Koentact-logo.png
   (wp-content/uploads/2025/08): #94C83D. The analysis' indicative #2E9E5B is
   retired; darker derivatives are used where the bright green lacks contrast.

   Type system per the huisstijl: Poppins for headings (.display), Source Sans 3
   for running text, IBM Plex Mono for labels and figures. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Source+Sans+3:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;
  --bg: #F7F6F1;          /* papier */
  --bg-elev: #FFFFFF;     /* kaarten */
  --bg-elev-2: #F1F0E9;   /* binnenvlakken, inputs */
  --fg: #1B1D1A;          /* inkt */
  --fg-dim: #43483F;
  --fg-faint: #7C8277;
  --line: #E4E3DA;
  --line-strong: #C9C8BE;
  --accent: #94C83D;      /* Koentact-groen — gemeten uit Koentact-logo.png */
  --accent-deep: #6FA22B; /* hover, tekst op zachtgroen */
  --accent-soft: #EFF6E3; /* zachtgroene tint van het echte merkgroen */
  --good: #5C8F1F;
  --warn: #A87B14;
  --bad: #C64534;
  --shadow: 0 10px 30px -6px rgba(27, 29, 26, 0.18);
}

/* The dark variant keeps the brand's ink and green rather than importing a
   foreign dark palette; green gains a step of luminance to hold contrast. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141613;
  --bg-elev: #1B1D1A;
  --bg-elev-2: #23261F;
  --fg: #F2F1EA;
  --fg-dim: rgba(242, 241, 234, 0.66);
  --fg-faint: rgba(242, 241, 234, 0.4);
  --line: rgba(242, 241, 234, 0.12);
  --line-strong: rgba(242, 241, 234, 0.25);
  --accent: #94C83D;
  --accent-deep: #A9D65C;
  --accent-soft: rgba(148, 200, 61, 0.16);
  --good: #A9D65C;
  --warn: #D9A93F;
  --bad: #E2695A;
  --shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.6);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.display { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
::selection { background: var(--accent); color: #FFFFFF; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 9px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600; font-size: 14px;
  border: 1px solid transparent;
  transition: transform .15s, background .2s, border-color .2s, color .2s;
}
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-google {
  background: #fff; color: #1f1f1f;
  padding: 12px 20px 12px 16px;
  border: 1px solid #dadce0;
}
.btn-google:hover { background: #f8f9fa; transform: translateY(-1px); }
.btn-block { display: flex; width: 100%; justify-content: center; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; color: var(--fg-dim);
  font-family: 'IBM Plex Mono', monospace;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.pill { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600;
  font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.pill-good { background: var(--accent-soft); color: var(--good); }
.pill-warn { background: rgba(168, 123, 20, 0.12); color: var(--warn); }
.pill-bad  { background: rgba(198, 69, 52, 0.10); color: var(--bad); }
.pill-mute { background: var(--line); color: var(--fg-dim); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* Horizontal-scroll container that hides its scrollbar visually.
   Trackpad swipe / shift+mousewheel still scrolls. */
.scroll-x { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.scroll-x::-webkit-scrollbar { display: none; height: 0; width: 0; }

/* Styled column-header tooltips (data-tooltip set by app.js from title attr) */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 280px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--fg);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease, transform .12s ease;
  z-index: 1000;
  box-shadow: var(--shadow);
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--line-strong);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease, transform .12s ease;
  z-index: 1000;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}