/* Elixer Fabriek — gebaseerd op website-elixer admin-neutral palette */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Observable's default (1440px) beperkt de body — we willen de volle viewport */
  --observablehq-max-width: 100%;
  --theme-background: hsl(220 17% 98%);
  --theme-background-alt: hsl(200 12% 95%);
  --theme-foreground: hsl(225 6% 13%);
  --theme-foreground-muted: hsl(214 5% 39%);
  --theme-foreground-faint: hsl(214 8% 62%);
  --theme-foreground-focus: hsl(214 82% 51%);
  --theme-foreground-alt: hsl(225 6% 25%);
  --theme-border: hsl(220 9% 87%);
  --theme-border-subtle: hsl(220 12% 93%);

  --card-bg: hsl(0 0% 100%);

  --primary: hsl(214 82% 51%);
  --primary-weak: hsl(214 82% 96%);
  --success: hsl(142 65% 42%);
  --success-weak: hsl(142 55% 94%);
  --warning: hsl(38 92% 50%);
  --warning-weak: hsl(38 85% 95%);
  --danger: hsl(4 71% 50%);
  --danger-weak: hsl(4 65% 95%);

  --sans-serif: "DM Sans", system-ui, -apple-system, sans-serif;
  --serif: "DM Sans", system-ui, sans-serif;
  --monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --radius: 0.5rem;
  --radius-sm: 0.375rem;
}

html, body {
  font-family: var(--sans-serif);
}

#observablehq-main, #observablehq-main p, #observablehq-main li {
  font-family: var(--sans-serif);
  color: var(--theme-foreground);
  font-size: 14px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--theme-foreground);
}
h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.25rem 0; color: var(--theme-foreground); }
h2 { font-size: 1.1rem; font-weight: 600; margin: 2rem 0 0.85rem 0; color: var(--theme-foreground-alt); border: none; padding: 0; }
h3 { font-size: 0.95rem; font-weight: 600; margin: 1.25rem 0 0.5rem 0; }
h4 { font-size: 0.88rem; font-weight: 600; margin: 0.75rem 0 0.35rem 0; }

/* Observable adds an anchor link on headings — keep the admin blue */
a.observablehq-header-anchor { color: inherit; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .monospace {
  font-family: var(--monospace);
  font-size: 0.85em;
}
:not(pre) > code {
  background: var(--theme-background-alt);
  border: 1px solid var(--theme-border-subtle);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 0.82em;
  color: var(--theme-foreground-alt);
}

/* ---- Sidebar ---- */
#observablehq-sidebar {
  background: var(--card-bg);
  border-right: 1px solid var(--theme-border);
  font-family: var(--sans-serif);
}
#observablehq-sidebar nav a,
#observablehq-sidebar nav summary {
  color: var(--theme-foreground-muted);
  font-size: 0.88rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  margin: 1px 0.5rem;
}
#observablehq-sidebar nav a:hover {
  background: var(--theme-background-alt);
  color: var(--theme-foreground);
  text-decoration: none;
}
#observablehq-sidebar nav a.observablehq-link-active,
#observablehq-sidebar li.observablehq-link-active > a {
  background: var(--primary-weak);
  color: var(--primary);
  font-weight: 600;
}
#observablehq-header { display: none; }
body { max-width: none !important; }
#observablehq-center, #observablehq-main { background: var(--theme-background); max-width: none !important; }
#observablehq-main { padding: 1.5rem 2rem; max-width: none; }

/* Observable Framework heeft een default max-width: 640px op p/table/h*/ul/ol
   voor leesbaarheid. Voor dit dashboard willen we volledige breedte. */
#observablehq-main p,
#observablehq-main table,
#observablehq-main figure,
#observablehq-main figcaption,
#observablehq-main h1,
#observablehq-main h2,
#observablehq-main h3,
#observablehq-main h4,
#observablehq-main h5,
#observablehq-main h6,
#observablehq-main ul,
#observablehq-main ol,
#observablehq-main .ft,
#observablehq-main .matrix-wrap { max-width: none; }

/* ---- Stats bar ---- */
.stats {
  display: flex;
  gap: 1.5rem;
  margin: 0.5rem 0 1.5rem 0;
  color: var(--theme-foreground-muted);
  font-size: 0.85rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--theme-border-subtle);
}
.stats strong { color: var(--theme-foreground); font-weight: 600; font-size: 1.05em; margin-right: 0.25rem; }

/* ---- Cards ---- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.card h2, .card h3 {
  margin: 0 0 0.4rem 0;
  color: var(--theme-foreground-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border: none;
  padding: 0;
}
.card .big {
  display: block;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--theme-foreground);
  letter-spacing: -0.02em;
  margin-top: 0.15rem;
}
.card .sub { color: var(--theme-foreground-muted); font-size: 0.82rem; margin-top: 0.2rem; display: block; }
.card .stamp { color: var(--theme-foreground-faint); font-size: 0.72rem; margin-top: 0.5rem; display: block; }
.card .path { font-family: var(--monospace); font-size: 0.74rem; color: var(--theme-foreground-muted); display: block; margin-top: 0.35rem; background: transparent; border: none; padding: 0; }

.grid { display: grid; gap: 0.75rem; }
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }

@media (max-width: 800px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-2 { grid-template-columns: 1fr; }
}

/* ---- Tables — simpel en schoon, zonder radius-hacks ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  font-family: var(--sans-serif);
  margin: 0.5rem 0 1.5rem 0;
  background: var(--card-bg);
}
thead th {
  background: transparent;
  font-weight: 600;
  color: var(--theme-foreground-faint);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--theme-border);
  vertical-align: bottom;
}
tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--theme-border-subtle);
  vertical-align: top;
  color: var(--theme-foreground-alt);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--theme-background-alt); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.stamp, .stamp { color: var(--theme-foreground-faint); font-size: 0.8rem; white-space: nowrap; }

/* ---- Pills ---- */
.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  margin: 1px 2px;
  background: var(--theme-background-alt);
  color: var(--theme-foreground-muted);
}
.pill.script { background: var(--success-weak); color: var(--success); font-family: var(--monospace); font-size: 0.7rem; }
.pill.agent { background: hsl(262 83% 96%); color: hsl(262 65% 50%); font-family: var(--monospace); font-size: 0.7rem; }
.pill.table { background: var(--warning-weak); color: hsl(30 85% 42%); font-family: var(--monospace); font-size: 0.7rem; }
.pill.more { background: transparent; color: var(--theme-foreground-faint); border: 1px dashed var(--theme-border); }

/* ---- Status-pills ---- */
.status-pill {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--theme-background-alt);
  color: var(--theme-foreground-muted);
  font-weight: 500;
}
.status-pill.vertaald { background: var(--success-weak); color: var(--success); }
.status-pill.in_review { background: var(--primary-weak); color: var(--primary); }
.status-pill.wachtend { background: var(--theme-background-alt); color: var(--theme-foreground-muted); }
.status-pill.onvolledig { background: var(--warning-weak); color: hsl(30 85% 42%); }

/* ---- Filenaam-pills ---- */
.fpill {
  display: inline-block;
  background: var(--theme-background-alt);
  color: var(--theme-foreground-muted);
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  margin: 1px 2px;
  font-family: var(--monospace);
}

/* ---- Matrix (presence dots) ---- */
.matrix-wrap { overflow-x: auto; margin: 0.5rem 0 1.75rem 0; padding-top: 0.5rem; }
.matrix {
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 0.82rem;
  background: transparent;
  width: auto !important;
  margin: 0;
  table-layout: fixed;
}
.matrix colgroup col.label-col { width: 140px; }
.matrix colgroup col.cell-col { width: 28px; }

.matrix thead th {
  padding: 0;
  border: none;
  background: transparent;
  font-weight: 500;
  color: var(--theme-foreground-muted);
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  height: 130px;
  vertical-align: bottom;
  overflow: visible;
}
.matrix thead th.corner { background: transparent; width: 140px; }
.matrix thead th .rotated-wrap {
  width: 28px;
  height: 130px;
  position: relative;
  overflow: visible;
  margin: 0 auto;
}
.matrix .rotated {
  display: block;
  white-space: nowrap;
  font-family: var(--monospace);
  line-height: 1;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform-origin: 0 0;
  transform: rotate(-60deg) translate(0, 0);
  transform-origin: left bottom;
}
.matrix tbody td {
  padding: 0;
  background: transparent;
  border: none;
  height: 28px;
  width: 28px;
}
.matrix tbody tr:hover { background: transparent; }
.matrix .row-label {
  text-align: left;
  white-space: nowrap;
  font-family: var(--monospace);
  color: var(--theme-foreground-alt);
  font-size: 0.8rem;
  padding-right: 0.75rem;
  padding-left: 0;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.matrix .cell {
  width: 28px;
  height: 28px;
  padding: 0;
  color: transparent;
  text-align: center;
  border: 1px solid var(--theme-border-subtle);
  background: var(--card-bg);
  border-radius: 4px;
}
.matrix .cell.yes {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  font-weight: 700;
  line-height: 28px;
}

/* ---- Fabriek-tabel (.ft) — CSS Grid, geen <table>-erfgenis, altijd full-width ----
   Gebruik: <div class="ft" style="--ft-cols: 100px minmax(200px,1fr) 72px">
              <div class="ft-row ft-head"><div>Hdr1</div>...</div>
              <div class="ft-row"><div>cell</div>...</div>
            </div>
   Modifiers op rij: hl-review | hl-vertaald | hl-onvolledig
   Modifiers op cel: num | stamp | pills | title | desc                        */
.ft {
  display: grid;
  grid-template-columns: var(--ft-cols);
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.88rem;
  margin: 0.5rem 0 1.5rem 0;
  box-sizing: border-box;
}
.ft-row { display: contents; }
.ft-row > div {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--theme-border-subtle);
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--theme-foreground-alt);
  box-sizing: border-box;
  align-self: stretch;
}
.ft-head > div {
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--theme-foreground-faint);
  padding: 0.55rem 0.85rem;
  background: transparent;
  border-bottom: 1px solid var(--theme-border);
}
.ft-row:last-child > div { border-bottom: none; }
.ft-row:not(.ft-head):hover > div { background: var(--theme-background-alt); }
.ft-row.hl-review > div { background: hsla(214, 82%, 96%, 0.55); }
.ft-row.hl-vertaald > div { background: hsla(142, 55%, 94%, 0.45); }
.ft-row.hl-onvolledig > div { background: hsla(38, 85%, 95%, 0.55); }

.ft .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft .stamp { color: var(--theme-foreground-faint); font-size: 0.8rem; white-space: nowrap; }
.ft .pills { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-start; line-height: 1.4; }
.ft .title { color: var(--theme-foreground); font-weight: 500; line-height: 1.4; }
.ft .desc { color: var(--theme-foreground-muted); font-size: 0.82rem; line-height: 1.5; font-style: italic; margin-top: 0.15rem; }
.ft code { background: transparent; border: none; padding: 0; color: var(--theme-foreground); font-size: 0.88em; }

/* ---- Utility ---- */
.muted { color: var(--theme-foreground-faint); font-style: italic; }
.empty { color: var(--theme-foreground-faint); font-style: italic; padding: 0.75rem 0; }
.warn strong { color: hsl(30 85% 42%); }

/* ---- Details/summary ---- */
details {
  background: var(--card-bg);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 1.5rem 0;
}
details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--theme-foreground-alt);
  font-size: 0.88rem;
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}
details summary::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--theme-foreground-faint);
  transition: transform 0.15s ease;
}
details[open] summary::before { transform: rotate(90deg); }
details[open] summary { margin-bottom: 0.75rem; border-bottom: 1px solid var(--theme-border-subtle); padding-bottom: 0.5rem; }

/* ---- Progress bar ---- */
.bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--theme-background-alt);
}
.bar > div { height: 100%; }
.bar-empty { text-align: center; color: var(--theme-foreground-faint); font-size: 0.7rem; line-height: 6px; width: 100%; }

/* Sticky header-compensatie voor anchor-scroll (page-nav clicks) */
#observablehq-main h2[id] { scroll-margin-top: 4.5rem; }

/* ---- Sticky page-nav (H2-sections) ---- */
.page-nav {
  position: sticky;
  top: 0;
  background: var(--theme-background);
  padding: 0.5rem 0;
  margin: 0 0 1.25rem 0;
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--theme-border-subtle);
  z-index: 10;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--theme-background) 85%, transparent);
}
.page-nav-link {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--theme-foreground-muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.1s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.page-nav-link:hover {
  background: var(--theme-background-alt);
  color: var(--theme-foreground);
  text-decoration: none;
}
.page-nav-link.active {
  background: var(--primary-weak);
  color: var(--primary);
  font-weight: 600;
}

/* ---- Observable-specific overrides ---- */
.observablehq--inspect { font-family: var(--monospace); font-size: 0.82rem; }