/* De werkruimte - visueel model.
 *
 * Every colour here was sampled from the wireframes in the product description rather than
 * chosen. The accent is a teal-leaning green (#026D53), deliberately not the Delft blue of
 * the reporting module: one platform, two modules, each with its own accent.
 *
 * The organisation tints are load-bearing, not decoration. Green is the administratiekantoor,
 * lilac the accountantskantoor, rust the eindklant, and the whole product is about who may
 * see what, so a reader must be able to tell the three apart at a glance.
 */

:root {
  --green: #026D53;
  --green-band: #0F6E56;
  /* Canvas and ink match the reporting module exactly, on purpose. The ACCENT stays
     different - the two modules each have their own - but a page colour and a body ink are
     not an accent. Warm paper with warm grey text, clicked into straight from the reporting
     screens' white page and navy text, reads as a different product rather than as a second
     module. Values taken from the reporting module's own tokens (canvas, ink, muted). */
  --ink: #002070;
  --muted: #5F6E82;
  --canvas: #F7F9FB;
  --rule: #E2E7EF;
  --rule-soft: #EDF1F6;

  --org-adm-bg: #E0F3ED;
  --org-adm-fg: #026D53;
  --org-acc-bg: #EDEBF6;
  --org-acc-fg: #3B3480;
  --org-kln-bg: #F9ECE6;
  --org-kln-fg: #9F502E;

  --ok-bg: #EBF4DF;
  --ok-fg: #3F6B31;
  --open-bg: #F9EEDA;
  --open-fg: #87672B;
  --busy-bg: #E8F0FB;
  --busy-fg: #2A4A6B;
  --bad-bg: #FDEBEB;
  --bad-fg: #8E3A3A;
  --rust: #9E4A3C;
  --notice-bg: #F4EBD7;
  --danger: #C62828;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 32px 20px 64px;
  background: var(--canvas);
  color: var(--ink);
  /* Segoe UI first, matching the reporting module. His mockups are drawn on Windows and
     both modules are read on Windows; leading with Inter gave the two a different texture
     on the only machine that matters. */
  font: 400 14px/1.5 "Segoe UI", -apple-system, "Inter", BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum" 1;
}

/* The reporting module rings focus in its own accent; without a rule here the two modules
   answered the keyboard differently, which is the same seam as the canvas colour. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- prototype chrome (not part of the product) ---------- */

.proto-bar {
  max-width: 1020px;
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  font-size: 11px;
  color: var(--muted);
}
.proto-bar a { color: var(--green); text-decoration: none; font-weight: 600; }
.proto-bar a:hover { text-decoration: underline; }
.proto-bar strong { color: var(--ink); font-weight: 600; }
.proto-bar .sep { color: var(--rule); }

/* ---------- card ---------- */

.card {
  max-width: 1020px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 26px 30px 40px;
}
.card + .card { margin-top: 22px; }

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.sub { margin: 5px 0 0; font-size: 11px; color: var(--muted); }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  gap: 34px;
  margin: 22px 0 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rule);
}
.tabs a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 10px;
  margin-bottom: -11px;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); font-weight: 700; border-bottom-color: var(--green); }

.body { padding-top: 24px; }

/* ---------- chips ---------- */

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip.ok      { background: var(--ok-bg);   color: var(--ok-fg); }
.chip.open    { background: var(--open-bg); color: var(--open-fg); }
.chip.busy    { background: var(--busy-bg); color: var(--busy-fg); }
.chip.bad     { background: var(--bad-bg);  color: var(--bad-fg); }
.chip.neutral { background: #EFEFEF;        color: var(--muted); }
/* The only bordered chip in the document. It marks the private channel, so it is meant
   to look different from every status word on the screen. */
.chip.intern  { background: var(--org-kln-bg); color: var(--rust); border-color: var(--rust); }
.chip.adm     { background: var(--org-adm-bg); color: var(--org-adm-fg); }
.chip.acc     { background: var(--org-acc-bg); color: var(--org-acc-fg); }
.chip.kln     { background: var(--org-kln-bg); color: var(--org-kln-fg); }

/* ---------- stat cards ---------- */

.stats { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 12px; }
.stat { background: var(--canvas); border-radius: 8px; padding: 14px 16px; }
.stat .label { display: block; font-size: 10px; color: var(--muted); }
.stat .value { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.stat .value.open { color: var(--open-fg); }
.stat .value.busy { color: var(--busy-fg); }
.stat .value.ok   { color: var(--ok-fg); }
.stat .value.bad  { color: var(--bad-fg); }

/* ---------- action bar ---------- */

.actionbar { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 12px; }
.actionbar h2 { margin: 0; }

.pillgroup {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--green);
  border-radius: 999px;
  overflow: hidden;
  font-size: 12px;
}
.pillgroup > * {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  color: var(--green);
  background: none;
  border: 0;
  border-right: 1px solid var(--org-adm-bg);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.pillgroup > *:last-child { border-right: 0; font-weight: 700; }
.pillgroup .inner {
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: 3px 10px;
  margin: 4px 8px;
}
.pillgroup a:hover { background: var(--org-adm-bg); }

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; }
input[type="checkbox"] { accent-color: var(--green); width: 15px; height: 15px; }
th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--rule);
}
th.num, td.num { text-align: right; }
td { padding: 12px 10px; border-bottom: 1px solid var(--rule-soft); font-size: 12px; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.strong { font-weight: 700; }
td.muted, .muted { color: var(--muted); }

tr.group td {
  padding: 20px 10px 8px;
  border-bottom: 1px solid var(--rule);
  font-weight: 700;
  font-size: 12px;
}
tr.group .count { color: var(--muted); font-weight: 400; margin-left: 6px; }

.spaced td { padding-top: 17px; padding-bottom: 17px; }

/* An editable cell is drawn as an input even when it is not one, because the whole point of
   the Eigen column is that it is the one thing this party controls. */
.editable {
  display: inline-block;
  min-width: 62px;
  padding: 3px 8px;
  border: 1.5px solid var(--green);
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
}
.editable.unset { color: var(--muted); font-style: italic; }
.klantdate { color: var(--rust); font-style: italic; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--org-adm-bg);
  color: var(--org-adm-fg);
}
.avatar.acc { background: var(--org-acc-bg); color: var(--org-acc-fg); }
.avatar.kln { background: var(--org-kln-bg); color: var(--org-kln-fg); }

.remove { color: var(--danger); font-weight: 700; font-size: 11px; text-decoration: none; }
.remove:hover { text-decoration: underline; }

/* The document marks a forwarded or carried-over row with a corner arrow. Italicising the
   glyph itself turns it into something that reads as a digit 4, so only the text is italic. */
.sub-line { display: block; margin-top: 4px; font-size: 11px; font-style: italic; color: var(--rust); }
.sub-line::before { content: "\21B3"; font-style: normal; margin-right: 5px; }

/* ---------- bands ---------- */

.band { border-radius: 8px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.band.info   { background: var(--busy-bg); }
.band.info strong { color: var(--busy-fg); }
.band.alert  { background: var(--org-kln-bg); border: 1px solid var(--rust); }
.band.alert strong { color: var(--rust); }
.band.notice { background: var(--notice-bg); border: 1px solid #D9BE84; }
.band.notice strong { color: var(--rust); }
.band.good   { background: var(--org-adm-bg); border: 1px solid var(--green); }
.band.good strong { color: var(--green); }
.band .sub { margin-top: 3px; }
.band .right { text-align: right; font-weight: 700; white-space: nowrap; }

.panel { background: var(--canvas); border-radius: 8px; padding: 16px 18px; }
.panel + .panel { margin-top: 12px; }
.panel.rust { background: var(--org-kln-bg); border: 1px solid var(--rust); }
.panel.green { background: var(--org-adm-bg); border: 1px solid var(--green); }

/* ---------- forms ---------- */

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.field { display: block; }
.field .label { display: block; font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.control {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
}
/* Native caret kept. The wireframes draw a chevron on every select, and without one a
   dropdown is indistinguishable from a text field - nothing on screen says it is a choice. */
textarea.control { min-height: 72px; resize: vertical; }
.control::placeholder { color: var(--muted); font-style: italic; }

.note { margin: 14px 0 0; font-size: 11px; font-style: italic; color: var(--muted); }
.note.rust { color: var(--rust); font-style: normal; }

.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.actions.centre { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1.5px solid var(--green);
  background: var(--green);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn.ghost { background: #fff; color: var(--green); }
.btn.plain { background: #fff; color: var(--ink); border-color: var(--rule); font-weight: 600; }
.btn:hover { filter: brightness(1.06); }

/* A switch that does not switch. Drawn ON because that is how the wireframe draws it. */
.toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.toggle .track { width: 36px; height: 20px; border-radius: 999px; background: var(--green); position: relative; }
.toggle .track::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 999px; background: #fff;
}

/* ---------- progress ---------- */

.progress-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.progress { height: 8px; border-radius: 999px; background: #F0EEE9; margin-top: 8px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--green); }

/* ---------- feed ---------- */

.feed { list-style: none; margin: 10px 0 0; padding: 0; }
.feed li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 12px; }
.feed .dot { width: 7px; height: 7px; border-radius: 999px; background: #C9C9C4; flex: none; }
.feed .dot.ok  { background: var(--ok-fg); }
.feed .dot.bad { background: var(--bad-fg); }

/* ---------- timeline ---------- */

.milestone { display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--rule-soft); }
.milestone:last-child { border-bottom: 0; }
.milestone .ring { width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--ok-fg); background: var(--ok-bg); flex: none; }
.milestone .ring.busy { border-color: var(--busy-fg); background: var(--busy-bg); }
.milestone .ring.open { border-color: var(--open-fg); background: var(--open-bg); }
.milestone .grow { flex: 1; }
.milestone .title { font-weight: 700; font-size: 13px; }

/* ---------- threads ---------- */

.crumb { font-size: 11px; color: var(--muted); }
.deadlines { display: flex; justify-content: space-between; gap: 24px; background: var(--canvas); border-radius: 8px; padding: 14px 18px; margin: 18px 0; }
.deadlines .right { text-align: right; }
.deadlines strong { font-size: 13px; }
.deadlines .own strong { color: var(--rust); }
.deadlines .own .sub { color: var(--rust); }

.msg { border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; display: flex; gap: 12px; }
.msg + .msg { margin-top: 12px; }
.msg.intern { background: var(--org-kln-bg); border-color: var(--rust); }
.msg .who { font-weight: 700; font-size: 12px; }
.msg .meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.msg p { margin: 9px 0 0; font-size: 12px; }
.attach { display: inline-block; margin-top: 10px; padding: 5px 10px; border-radius: 6px; background: var(--canvas); border: 1px solid var(--rule); font-size: 11px; }
.attach.rust { border-color: var(--rust); background: #fff; }

.composer { background: var(--canvas); border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.composer .fake-input { flex: 1; font-size: 12px; font-style: italic; color: var(--muted); }

/* ---------- dashboard rows ---------- */

.rowcard { display: flex; align-items: center; gap: 20px; border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; }
.rowcard + .rowcard { margin-top: 10px; }
.rowcard .title { flex: 1; font-size: 12px; font-weight: 600; }
.rowcard .ctx { font-size: 11px; color: var(--muted); }

/* ---------- segmented choice ---------- */

.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.segment { border: 1px solid var(--rule); border-radius: 8px; padding: 12px; text-align: center; font-size: 12px; color: var(--muted); background: #fff; font-family: inherit; cursor: pointer; }
.segment[aria-checked="true"] { border: 1.5px solid var(--green); background: var(--org-adm-bg); color: var(--green); font-weight: 700; }

/* ---------- misc ---------- */

.rule { height: 1px; background: var(--rule); margin: 22px 0; border: 0; }
.legend { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 11px; font-style: italic; color: var(--muted); }
.foot { margin: 10px 0 0; font-size: 11px; font-style: italic; color: var(--muted); line-height: 1.6; }

.dropzone { background: #fff; border: 1px dashed #C9C9C4; border-radius: 6px; padding: 26px; text-align: center; font-size: 12px; font-style: italic; color: var(--muted); margin-top: 10px; }

@media (max-width: 720px) {
  body { padding: 18px 12px 48px; }
  .card { padding: 20px 16px 30px; }
  .grid2, .stats, .segments { grid-template-columns: 1fr; }
  .tabs { gap: 18px; overflow-x: auto; }
  .deadlines, .band { flex-direction: column; align-items: flex-start; }
  .band .right, .deadlines .right { text-align: left; }
  table { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Tables are the one thing the 720px query cannot shrink: a five-column question list is
   wider than a 390px phone whatever the font size. Scrolling the table beats scrolling the
   whole page sideways, which moves the header off screen with it. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap > table { min-width: 560px; }

/* Printed, a background is dropped and white text lands on white paper - the landing page
   title and every button label disappear. This page gets printed and forwarded, so the
   colours invert rather than vanish. */
@media print {
  body { background: #fff; }
  .hero, .btn { background: #fff !important; color: var(--green) !important; }
  .hero { border: 1px solid var(--rule); }
  .hero .lede, .hero .sub { color: var(--ink) !important; }
  .btn { border: 1px solid var(--green); }
  .proto-bar, nav.jump { display: none; }
}

/* Every page says so, not just the index. The index carries "model - Productbeschrijving
   v1.7" in its own header, but the eighteen inner pages are deep-linkable and carried
   nothing, so somebody arriving on one of them saw what looks like working software.
   ::before on body rather than markup in eighteen files. */
body::before {
  content: "Visueel model. Geen werkende software - er zit geen data achter deze schermen.";
  display: block;
  background: #3D3D3A;
  color: #fff;
  font: 500 12px/1.5 system-ui, sans-serif;
  letter-spacing: .02em;
  padding: 7px 20px;
  text-align: center;
}