/* Style of the new, server-rendered pages. Colors and sizes follow the legacy app. */
:root {
  --bg: #fffdf5; --surface: #fff; --text: #1a2233; --text-dim: #5c6679; --line: #e3e2d8;
  --navy: #3c5b8b; --navy-deep: #2b4368; --clay: #a2453a; --clay-wash: #f9e9e6;
  --radius: 9px; --shadow: 0 1px 2px rgba(26,34,51,.06), 0 8px 24px -12px rgba(26,34,51,.18);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13.5px/1.5 var(--body); }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.card {
  width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 28px; display: grid; gap: 14px;
}
.brand { font: 600 15px var(--display); color: var(--navy); letter-spacing: .02em; }
h1 { font: 600 27px/1.2 var(--display); margin: 0 0 4px; }
label { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-dim); }
input {
  font: inherit; color: var(--text); padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: transparent; }
button {
  font: 600 13.5px var(--body); color: var(--on-navy, #fff); background: var(--navy); border: 0;
  border-radius: var(--radius); padding: 10px 14px; cursor: pointer; margin-top: 4px;
}
button:hover { background: var(--navy-deep); }
.error { margin: 0; padding: 9px 11px; border-radius: var(--radius); background: var(--clay-wash); color: var(--clay); }

/* ---------------------------------------------------------------- shared */
:root {
  --surface-2: #f6f4eb; --line-strong: #cfcec2; --text-faint: #8a93a4; --navy-wash: #edf1f8;
  --olive: #7c871f; --olive-wash: #f0f2df; --amber: #9c6b12; --amber-wash: #fbf0dc;
}
a { color: var(--navy); }
.muted { color: var(--text-dim); }
.num { font-variant-numeric: tabular-nums; }
.page { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }
.back { display: inline-block; font-size: 12.5px; text-decoration: none; margin-bottom: 14px; }
.back:hover { text-decoration: underline; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.page-head h1 { font: 600 27px/1.2 var(--display); margin: 0; }
.page-head p { margin: 2px 0 0; }
.search input { width: min(320px, 100%); }

/* ---------------------------------------------------------------- filter tabs */
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.tab {
  display: grid; gap: 2px; padding: 12px 14px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.tab:hover { border-color: var(--line-strong); }
.tab[aria-current="page"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-wash); }
.tab-label { font-weight: 600; font-size: 12.5px; }
.tab-count { font: 600 23px/1.1 var(--display); }
.tab-below { font-size: 11.5px; color: var(--text-dim); }

/* ---------------------------------------------------------------- panel and table */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font: 600 15px var(--body); margin: 0; }
.empty { padding: 28px 16px; margin: 0; color: var(--text-dim); text-align: center; }

.row {
  display: grid; align-items: center; gap: 4px 14px; padding: 10px 16px;
  grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1.4fr) 104px 116px 104px 120px 196px;
  border-top: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 12.5px;
}
/* the link spans the project's cells; the actions next to it stay separate controls */
.row-link { display: contents; color: inherit; text-decoration: none; }
.c-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.c-actions form { margin: 0; }
.row:hover { background: var(--navy-wash); }
.row.head { border-top: 0; background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.row.head:hover { background: var(--surface-2); }
.row.head a { color: inherit; text-decoration: none; }
.row.head a:hover { color: var(--navy); }
.row small { display: block; color: var(--text-dim); font-size: 11.5px; font-weight: 400; margin-top: 1px; }
.c-client, .c-address { min-width: 0; overflow-wrap: anywhere; }
.c-status, .c-date { text-align: center; }
.c-amount { text-align: right; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pill-completed { background: var(--olive-wash); color: var(--olive); }
.pill-lost { background: var(--clay-wash); color: var(--clay); }
.pill-intake { background: var(--surface-2); color: var(--text-dim); }
.pill-drafting { background: var(--navy-wash); color: var(--navy); }
.pill-negotiation { background: var(--amber-wash); color: var(--amber); }
.pill-sent { background: var(--amber-wash); color: var(--amber); }
.pill-approved { background: var(--olive-wash); color: var(--olive); }

/* phone width: one card per project instead of columns */
@media (max-width: 760px) {
  .tabs { grid-template-columns: 1fr; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row.head { display: none; }
  .row .c-code { grid-column: 1; }
  .row .c-amount { grid-column: 2; grid-row: 1; }
  .row .c-client, .row .c-address { grid-column: 1 / -1; }
  .row .c-status, .row .c-date { text-align: left; }
  .row .c-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------------------------------------------------------------- actions and messages */
.btn-small {
  display: inline-block; font: 600 12px var(--body); padding: 5px 10px; margin: 0; border-radius: 7px;
  color: var(--navy); background: var(--surface); border: 1px solid var(--line-strong); text-decoration: none; cursor: pointer;
}
.btn-small:hover { background: var(--navy-wash); }
.btn-small.danger { color: var(--clay); }
.btn-small.danger:hover { background: var(--clay-wash); }
button.danger { background: var(--clay); }
button.danger:hover { background: #87372e; }
.notice { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--olive-wash); color: var(--text); }
.notice-warn { background: var(--amber-wash); }
.narrow { max-width: 560px; }
.confirm { padding: 22px 24px; }
.confirm h1 { font-size: 23px; }
.confirm-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.confirm-actions button { margin: 0; }

/* ---------------------------------------------------------------- projects list */
.tabs-many { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.table-projects .row { grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1.6fr) 128px 116px 104px 120px 196px; }
.row.group { display: block; background: var(--surface-2); font-weight: 700; font-size: 12px; padding: 7px 16px; }
.row.group:hover { background: var(--surface-2); }
.mark {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--amber-wash);
  color: var(--amber); font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.bar-intake { display: block; border-color: var(--navy); background: var(--navy-wash); }
.intake-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 8px; }
.intake-head b, .bar-head b { font-family: var(--display); }
.bar-row { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); }
.bar-row small { display: block; color: var(--text-dim); font-size: 11.5px; }
.bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bar form { margin: 0; }
.btn-small.primary { color: var(--on-navy, #fff); background: var(--navy); border-color: var(--navy); }
.btn-small.primary:hover { background: var(--navy-deep); }
.test-mode {
  display: grid; gap: 4px; margin-top: 14px; padding: 11px 14px; border-radius: var(--radius);
  border: 1px solid var(--olive-wash); background: var(--olive-wash); color: var(--text-dim); font-size: 12.5px;
}
.test-mode b { color: var(--text); }
.footnote { margin-top: 14px; font-size: 12px; }
@media (max-width: 760px) {
  .table-projects .row { grid-template-columns: minmax(0, 1fr) auto; }
  .tabs-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- contacts */
.small { font-size: 12px; margin: 2px 0 0; max-width: 70ch; }
.panel-tools { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-left: auto; }
.panel-tools form.inline { margin: 0; }
select { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text); max-width: 220px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; }
.seg a { padding: 5px 10px; font-size: 12px; text-decoration: none; color: var(--text-dim); }
.seg a[aria-pressed="true"] { background: var(--navy-wash); color: var(--navy); font-weight: 600; }
.chip-toggle { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--text-dim); }
.chip-toggle.on { background: var(--amber-wash); border-color: var(--amber); color: var(--amber); font-weight: 600; }
.table-wrap { overflow-x: auto; }
table.contacts, table.people, table.info-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.contacts th, table.people th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); padding: 8px 12px; white-space: nowrap; }
table.contacts th a { color: inherit; text-decoration: none; }
table.contacts td, table.people td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: top; }
table.contacts tr.group td { background: var(--navy-wash); color: var(--navy-deep); font-weight: 700; padding: 7px 12px; }
table.contacts tr.trade td { background: var(--surface-2); font-weight: 600; padding: 6px 12px; }
table.contacts .count { margin-left: 8px; font-weight: 400; color: var(--text-dim); font-variant-numeric: tabular-nums; }
table.contacts tr.incomplete td.k-naam { box-shadow: inset 3px 0 0 var(--amber); }
table.contacts .name { font-weight: 700; color: var(--text); text-decoration: none; }
table.contacts .name:hover { color: var(--navy); text-decoration: underline; }
table.contacts small { display: block; color: var(--text-dim); font-size: 11.5px; }
td.k-actions { white-space: nowrap; text-align: right; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--navy-wash); color: var(--navy); font-size: 11.5px; text-decoration: none; }
.chip-plain { background: var(--surface-2); color: var(--text-dim); }
.kind-client { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--olive-wash); color: var(--olive); font-size: 11.5px; font-weight: 600; }
.tag-warn { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--amber-wash); color: var(--amber); font-size: 11.5px; }
.fill { color: var(--amber); text-decoration: none; }
.fill.na { color: var(--text-faint); font-size: 11.5px; }
.web { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.cell-row { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mail { overflow-wrap: anywhere; }
.btn-icon {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0; padding: 0; border-radius: 7px;
  border: 1px solid transparent; background: transparent; color: var(--text-dim); font-size: 13px; text-decoration: none; cursor: pointer;
}
.btn-icon:hover { background: var(--navy-wash); color: var(--navy); }
.btn-icon.danger:hover { background: var(--clay-wash); color: var(--clay); }
.btn-icon[disabled], .btn-icon[aria-disabled="true"] { opacity: .35; cursor: default; background: transparent; }
.btn-icon[data-copied] { background: var(--olive-wash); color: var(--olive); }
details.call { display: inline-block; position: relative; }
details.call summary { list-style: none; }
details.call summary::-webkit-details-marker { display: none; }
.call-menu {
  position: absolute; right: 0; z-index: 5; display: grid; gap: 2px; min-width: 160px; padding: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.call-menu a, .call-menu button { display: block; text-align: left; padding: 5px 8px; border-radius: 6px; font: 500 12.5px var(--body);
  color: var(--text); background: transparent; text-decoration: none; margin: 0; }
.call-menu a:hover, .call-menu button:hover { background: var(--navy-wash); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.narrow-wide { max-width: 880px; }
.panel.info { padding: 6px 4px 14px; }
table.info-table th { text-align: left; width: 160px; padding: 7px 14px; color: var(--text-dim); font-weight: 600; vertical-align: top; }
table.info-table td { padding: 7px 14px; }
.eyebrow { font: 600 11px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 16px 14px 8px; }
table.people tr.main td { background: var(--navy-wash); }
.actions-row { display: flex; gap: 8px; margin-top: 14px; }
.head-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.export { display: grid; gap: 16px; }
form.export fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
form.export legend { font-weight: 600; margin-bottom: 4px; }
.choice { display: flex; gap: 8px; align-items: baseline; color: var(--text); font-size: 13px; }
.choice input { margin: 0; }

/* ---------------------------------------------------------------- Nakijken */
.panel.review { padding: 4px 16px 16px; }
.review-intro { margin: 12px 0; }
.review-group { margin-top: 18px; }
.review-group-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.review-group-head form, .review-actions form, .pair-foot form, .pair-card form { margin: 0; }
.review-row, .pair { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; background: var(--surface); }
.review-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.review-actions, .pair-foot { display: flex; flex-wrap: wrap; gap: 6px; }
.review-reasons { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.review-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.review-fields label { font-size: 11.5px; }
.review-fields input { padding: 5px 8px; font-size: 12.5px; }
.pair-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 8px 0; }
.pair-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 3px; font-size: 12.5px; }
.pair-head { display: flex; justify-content: space-between; gap: 8px; }
.pair-head .eyebrow { margin: 0; }
.pair-line { display: grid; grid-template-columns: 90px 1fr; gap: 6px; }
.pair-title { margin: 0; }

/* ---------------------------------------------------------------- import */
.import-step { margin-bottom: 16px; }
.import-body { padding: 12px 16px 16px; display: grid; gap: 10px; }
.step-nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--surface-2); font-size: 12px; margin-right: 4px; }
.step-nr.done { background: var(--olive-wash); color: var(--olive); }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.choice-card-form { margin: 0; }
.choice-card { width: 100%; height: 100%; display: grid; gap: 3px; text-align: left; margin: 0; padding: 10px 12px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 400; }
.choice-card:hover { background: var(--navy-wash); }
.choice-card.on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-wash); }
.howto ol { margin: 6px 0; padding-left: 20px; }
.import-read { display: grid; gap: 10px; }
.import-read textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); width: 100%; }
.cleanup { display: grid; gap: 6px; }
.cleanup-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line); }
.cleanup-row.stays { opacity: .8; }
.cleanup .count { color: var(--text-dim); margin-left: 4px; }
.block { display: block; }
.spacer { display: inline-block; width: 15px; }
.names { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; margin: 6px 0 0; grid-column: 1 / -1; }
.lines-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
table.import-lines tr.struck td { opacity: .5; }
table.import-lines input, table.import-lines select { padding: 4px 6px; font-size: 12.5px; max-width: 200px; }
.import-count { margin: 10px 0 4px; }

/* ---------------------------------------------------------------- the contact fiche */
.fiche-steps { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; margin-bottom: 8px; background: var(--bg); }
.fiche-steps a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); text-decoration: none; font-size: 12.5px; }
.fiche-steps a:hover { border-color: var(--navy); color: var(--navy); }
form.fiche { display: grid; gap: 14px; }
.fiche-section { padding: 14px 18px 18px; scroll-margin-top: 52px; display: grid; gap: 12px; }
.fiche-section h2 { font: 600 16px var(--display); margin: 0; display: flex; align-items: center; gap: 6px; }
.fiche .field { display: grid; gap: 4px; }
.fiche .field > label { font-weight: 600; font-size: 12.5px; }
.fiche input:not([type]), .fiche input[type="text"], .fiche textarea { font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--line-strong);
  border-radius: 7px; background: var(--surface); color: var(--text); min-width: 0; }
.fiche input[disabled] { background: var(--surface-2); color: var(--text-dim); }
.fiche textarea { width: 100%; }
.fiche input.wide { width: min(480px, 100%); }
.fiche input.short { width: 110px; }
.hint { font-size: 12px; color: var(--text-dim); }
.hint.bad { color: var(--clay); }
.hint.good { color: var(--olive); }
.row-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 11px; }
.grid-3 { display: grid; grid-template-columns: 150px repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; }
.seg-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-button { margin: 0; padding: 5px 11px; font: 500 12.5px var(--body); border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer; }
.seg-button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy-wash); color: var(--navy); font-weight: 700; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; }
.na-box { color: var(--text-dim); font-size: 12px; font-weight: 400; }
.tel { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); }
.address { display: grid; gap: 8px; }
.address-row { display: flex; flex-wrap: wrap; gap: 8px; }
.address-row label { display: grid; gap: 2px; font-size: 11.5px; color: var(--text-dim); }
.a-street { flex: 1 1 200px; }
.a-nr { flex: 0 1 100px; }
.a-street input, .a-nr input { width: 100%; }
table.people-edit { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.people-edit th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-dim); padding: 4px 4px; }
table.people-edit td { padding: 3px 4px; vertical-align: middle; }
table.people-edit input { width: 100%; }
table.people-edit select { max-width: 78px; }
.branch { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 6px; margin-bottom: 8px; }
.branch-head { display: flex; justify-content: space-between; align-items: center; }
.branch-head .eyebrow { margin: 0; }
.chip-button { margin: 0; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font: 500 12px var(--body); cursor: pointer; }
.chip-button.on { background: var(--navy-wash); border-color: var(--navy); color: var(--navy); font-weight: 700; }
.chip-button.add { border-style: dashed; color: var(--text-dim); }
.pen { margin: 0; padding: 0 4px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 12px; }
.pen:hover { color: var(--navy); }
.chips.chosen { margin: 4px 0; }
.trade-list { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; }
.chips.subs { padding: 2px 0 6px 30px; gap: 6px; }
.sub { display: inline-flex; align-items: center; }
.rename { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.small-note { font-size: 11.5px; margin-left: 4px; }
.chip-edit { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 9px; border-radius: 999px; background: var(--navy-wash); color: var(--navy); font-size: 12px; }
.fiche-foot { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 10px 0;
  background: var(--bg); border-top: 1px solid var(--line); }
.fiche-foot .btn-small.primary { order: 3; }
.notice p { margin: 0; }
.notice p + p { margin-top: 4px; }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Facturatie */
.tabs .tab.warn .tab-count { color: var(--clay); }
.invoice-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 16px 12px; margin: 0; }
.invoice-filters input[type="search"] { width: min(300px, 100%); }
table.invoices .right { text-align: right; }
table.invoices .center { text-align: center; }
table.invoices .strong { font-weight: 600; }
table.invoices tr.ready td { background: var(--amber-wash); }
table.invoices tr.credit td { color: var(--clay); }
table.invoices .row-title { color: inherit; text-decoration: none; }
table.invoices .row-title:hover { color: var(--navy); text-decoration: underline; }
.invoice-foot { border-top: 1px solid var(--line); padding: 10px 16px; display: grid; gap: 4px; }
.invoice-foot p { margin: 0; }
.payment-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); margin: 0; }
.fiche-steps .step { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12.5px; color: var(--text-dim); }
.fiche-steps .step.now { border-color: var(--navy); color: var(--navy); font-weight: 600; }
.fiche-steps .step.done .step-nr { background: var(--olive-wash); color: var(--olive); }
.invoice-line { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0; }

/* Offertes (/quotes): three panels share their column widths, so the columns line up */
table.quotes { table-layout: fixed; }
table.quotes col.q-code { width: 100px; }
table.quotes col.q-date { width: 96px; }
table.quotes col.q-amount { width: 116px; }
table.quotes col.q-status { width: 116px; }
table.quotes col.q-note { width: 124px; }
table.quotes col.q-icon { width: 44px; }
table.quotes .center { text-align: center; }
table.quotes .strong { font-weight: 600; }
table.quotes .late { color: var(--clay); font-weight: 700; }
table.quotes .expired { color: var(--amber); font-weight: 700; }
table.quotes tr.change-order td { font-size: 12.5px; border-top-style: dashed; }
table.quotes tr.change-order td:nth-child(2) { padding-left: 24px; }
.panel-head h2 .normal { font-weight: 400; }
.tone-navy, .tab.tone-navy .tab-count { color: var(--navy); }
.tone-olive, .tab.tone-olive .tab-count { color: var(--olive); }
.tone-clay, .tab.tone-clay .tab-count { color: var(--clay); }
.tab.tone-olive .tab-label, .tab.tone-clay .tab-label { color: var(--text); }
#quotes .panel { margin-bottom: 16px; }
@media (max-width: 720px) {
  table.quotes { table-layout: auto; min-width: 760px; }
}

/* Sleutelkluizen (/key-safes): the found sites as cards, the code large enough to read at the door */
.key-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: 12px 16px 16px; }
.key-card { border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; background: var(--surface-2); display: grid; gap: 3px; }
.key-card-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.key-card-code { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; }
.key-digits { font: 700 23px var(--display); letter-spacing: .16em; color: var(--navy); }
.key-cell { font: 700 15px var(--display); letter-spacing: .14em; white-space: nowrap; }
table.key-safes .center { text-align: center; }
table.key-safes .to-fill { color: var(--amber); font-weight: 600; font-size: 12.5px; }
.panel-foot { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.tone-amber, .tab.tone-amber .tab-count { color: var(--amber); }
.tab.tone-amber .tab-label { color: var(--text); }
#key-safes .panel { margin-bottom: 16px; }

/* Marketing (/marketing) */
.panel-body { padding: 12px 16px 14px; }
.panel-body p { margin: 0 0 10px; }
.panel-body p:last-child { margin-bottom: 0; }

/* Dashboard (/dashboard): the figures, the invoicing bars and the pipeline; bars are SVG */
:root { --chart-2: #7c871f; --chart-rest: #dcdbd0; }
.dash-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tab-extra { font: 600 12.5px var(--body); margin-left: 6px; color: var(--text-dim); }
#dashboard .panel { margin-bottom: 16px; }
.panel-head .legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-dim); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.key-paid { background: var(--chart-2); } .key-waiting { background: var(--amber); } .key-late { background: var(--clay); } .key-rest { background: var(--chart-rest); }
.sort-bar { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12px; }
.sort-bar a { text-decoration: none; color: var(--text-dim); }
.sort-bar a[aria-pressed="true"] { color: var(--navy); font-weight: 600; }
.invoicing-bars { display: grid; gap: 14px; }
.bar-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 5px; }
.bar-code { font: 600 13.5px var(--display); color: var(--navy); letter-spacing: .02em; text-decoration: none; }
.money-bar { display: block; width: 100%; height: 7px; border-radius: 999px; overflow: hidden; }
.bar-track { fill: var(--surface-2); }
.part-paid { fill: var(--chart-2); } .part-waiting { fill: var(--amber); } .part-late { fill: var(--clay); } .part-rest { fill: var(--chart-rest); }
.bar-figures { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; }
.bar-figures .paid { color: var(--chart-2); } .bar-figures .late { color: var(--clay); } .bar-figures .faint { color: var(--text-faint); }
.pipeline { display: grid; padding: 6px 8px; }
.pipe-row { display: grid; grid-template-columns: 132px 34px minmax(60px, 1fr); gap: 11px; align-items: center; padding: 7px 8px;
  border-radius: 7px; text-decoration: none; color: inherit; }
a.pipe-row:hover { background: var(--surface-2); }
.pipe-row.empty-row { opacity: .55; }
.pipe-label { font-weight: 600; }
.pipe-bar { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.pipe-bar .part-pipe { fill: currentColor; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; background: var(--text-faint); }
.dot-late { background: var(--clay); } .dot-attention { background: var(--amber); } .dot-plan { background: var(--navy); }
.legend .dot { margin-right: 5px; vertical-align: 0; }
.tasks { display: grid; }
.task { display: grid; grid-template-columns: 24px 14px minmax(0, 1fr) 140px 150px; gap: 6px 12px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); }
.task-head { border-top: 0; padding-bottom: 2px; }
.task-what { display: grid; min-width: 0; }
.task-title { font-weight: 600; color: var(--text); text-decoration: none; }
.task-sub { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-title:hover, .task-sub:hover { color: var(--navy); text-decoration: underline; }
.task-who { font-size: 12.5px; }
.task-aside, .task-choice { margin: 0; display: flex; gap: 4px; align-items: center; }
.tick { margin: 0; width: 20px; height: 20px; padding: 0; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-faint); font-size: 12px; line-height: 1; cursor: pointer; }
.tick:hover { background: var(--olive-wash); color: var(--olive); border-color: var(--olive); }
.task-choice select { width: 100%; font-size: 12.5px; }
@media (max-width: 640px) { .task { grid-template-columns: 24px 14px minmax(0, 1fr); } .task-who, .task-head span:nth-child(n+4) { display: none; } }
.task-contractor { display: flex; gap: 4px; align-items: center; }
.task-contractor .task-choice { flex: 1; min-width: 0; }
.mail-none { display: inline-block; width: 26px; }
.btn-icon.mailed { color: var(--olive); }
.mail-text { white-space: pre-wrap; font: 13px/1.5 var(--body); background: var(--surface-2); padding: 10px 12px; border-radius: 7px; }
.confirm p { margin: 0 0 8px; }
.task-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* the project timeline: points of equal width spread from edge to edge, so their centres fall where the legacy app put them */
.timelines { display: grid; }
.tl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.tl-head { display: grid; gap: 1px; min-width: 0; text-decoration: none; }
.tl-head b { font: 700 13.5px var(--display); color: var(--navy); letter-spacing: .02em; }
.tl-head span { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-head:hover b { text-decoration: underline; }
.tl-track { position: relative; display: flex; justify-content: space-between; min-height: 76px; overflow-x: auto; }
.tl-track::before { content: ""; position: absolute; top: 22px; left: 44px; right: 44px; height: 1px; background: var(--line); }
.tl-point { position: relative; flex: 0 0 88px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: inherit; }
.tl-point .dat { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; line-height: 1.3; height: 13px; }
.tl-point i { width: 13px; height: 13px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--surface); position: relative; z-index: 1; display: block; }
.tl-point .lbl { font-size: 10px; color: var(--text-faint); text-align: center; line-height: 1.25; max-width: 78px; }
.tl-point.done i { background: var(--olive); border-color: var(--olive); }
.tl-point.done .dat, .tl-point.done .lbl { color: var(--olive); font-weight: 600; }
.tl-point.late i { border-color: var(--clay); background: var(--clay-wash); }
.tl-point.late .dat, .tl-point.late .lbl { color: var(--clay); font-weight: 700; }
.tl-point.now i { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-wash); }
.tl-point.tl-start.done i { background: var(--clay); border-color: var(--clay); }
.tl-point.tl-start.done .dat, .tl-point.tl-start.done .lbl { color: var(--clay); }
a.tl-point:hover i { border-color: var(--navy); }
.tl-marks { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--text-faint); white-space: nowrap; line-height: 1; }
.panel-head .legend b { font-weight: 700; margin-right: 3px; }
@media (max-width: 760px) { .tl { grid-template-columns: 1fr; gap: 8px; } }
/* the site map: the map of Belgium in light grey, the circle to the furthest site, the pins in the colour of their kind */
.map-filter a, .map-legend { display: inline-flex; gap: 5px; align-items: center; }
.map-filter b { font-weight: 600; color: var(--text-dim); }
.map-filter .empty-choice { opacity: .55; }
.map-legend { padding: 5px 10px; font-size: 12px; color: var(--text-dim); }
.kdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kdot.pin-lopend { background: var(--navy); } .kdot.pin-vraag { background: var(--amber); } .kdot.pin-archief { background: var(--olive); } .kdot.pin-weg { background: var(--clay); }
.map-area { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.site-map { display: block; width: 100%; height: auto; max-height: min(62vh, 460px); }
.map-ground { fill: color-mix(in srgb, var(--text) 5%, var(--surface)); stroke: color-mix(in srgb, var(--text) 16%, transparent); stroke-width: .6; }
.map-name { fill: color-mix(in srgb, var(--text) 40%, transparent); text-anchor: middle; dominant-baseline: middle; font-family: var(--body); pointer-events: none; }
.map-name.r0 { fill: color-mix(in srgb, var(--text) 64%, transparent); font-weight: 600; letter-spacing: .04em; }
.map-name.r1 { fill: color-mix(in srgb, var(--text) 54%, transparent); font-weight: 600; }
.map-name.r3 { fill: color-mix(in srgb, var(--text) 30%, transparent); }
.map-ring { fill: none; stroke: color-mix(in srgb, var(--navy) 42%, transparent); stroke-width: 1.1; stroke-dasharray: 5 4; }
.map-ring-label { fill: color-mix(in srgb, var(--navy) 62%, transparent); text-anchor: middle; font-family: var(--body); }
.map-seat .seat-ring { fill: none; stroke: var(--navy); stroke-width: 1.6; opacity: .45; }
.map-seat .seat-dot { fill: var(--navy); }
.pin { cursor: pointer; }
.pin .pin-hit { fill: transparent; }
.pin .pin-eye { fill: var(--surface); }
.pin .pin-shape { transition: transform .12s ease; transform-origin: 0 0; }
a:hover > .pin .pin-shape, a:focus > .pin .pin-shape { transform: scale(1.28); }
.pin-lopend .pin-shape { fill: var(--navy); } .pin-vraag .pin-shape { fill: var(--amber); } .pin-archief .pin-shape { fill: var(--olive); } .pin-weg .pin-shape { fill: var(--clay); }
.notice.birthday { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.birthday-actions { display: flex; gap: 6px; align-items: center; }
.birthday-actions form { margin: 0; }
.btn-small.warn { border-color: var(--amber); color: var(--amber); }

/* ---------------------------------------------------------------- the app's sections, above every page */
.app-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.app-brand { font: 700 15px var(--display); color: var(--navy); text-decoration: none; }
.app-sections { display: flex; flex-wrap: wrap; gap: 2px 4px; flex: 1; min-width: 0; }
.app-sections a { padding: 4px 8px; border-radius: 6px; font-size: 12.5px; color: var(--text-dim); text-decoration: none; white-space: nowrap; }
.app-sections a:hover { background: var(--surface-2); color: var(--text); }
.app-sections a[aria-current="page"] { background: var(--navy-wash); color: var(--navy); font-weight: 600; }
.app-logout { margin: 0; }
@media (max-width: 760px) { .app-sections { flex-wrap: nowrap; overflow-x: auto; order: 3; flex-basis: 100%; } }

/* Opvolging: the track picker and the colour of each track */
:root { --olive-deep: #5c6417; }
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.track { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--text); text-decoration: none; }
.track:hover { background: var(--surface-2); }
.track[aria-current="page"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-wash); }
.track-none { opacity: .55; }
.track-name { font-weight: 600; font-size: 12.5px; }
.track-count { font: 600 20px/1.1 var(--display); }
.track-below { font-size: 11.5px; color: var(--text-dim); }
.track-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 6px; vertical-align: 0; }
.track-dot.track-all { background: var(--text-dim); }
.track-dot.track-voor { background: var(--navy); } .track-dot.track-admin { background: var(--olive); } .track-dot.track-geld { background: var(--clay); }
.track-dot.track-best { background: var(--amber); } .track-dot.track-werf { background: var(--olive-deep); }
.panel-head h2.track-voor { color: var(--navy); } .panel-head h2.track-admin { color: var(--olive); } .panel-head h2.track-geld { color: var(--clay); }
.panel-head h2.track-best { color: var(--amber); } .panel-head h2.track-werf { color: var(--olive-deep); }

/* Bestellingen & prijsaanvragen */
table.orders td a { color: inherit; text-decoration: none; }
table.orders td a.code { color: var(--navy); }
table.orders td a:hover { text-decoration: underline; }
.chip-todo { background: var(--amber-wash); color: var(--amber); }
.chip-te { background: var(--clay-wash); color: var(--clay); }
.chip-ok { background: var(--olive-wash); color: var(--olive); }
.rack { display: flex; gap: 8px; align-items: center; }
.rack-bar { flex: 1; min-width: 40px; height: 6px; }
.rack-bg { fill: var(--surface-2); } .rack-fill { fill: var(--olive); }
.pur-ok { background: var(--olive); } .pur-late { background: var(--clay); } .pur-run { background: var(--line-strong); }

/* Doorlichting */
.check-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.check-row:last-child { border-bottom: 0; }
.check-mark { justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.check-stop { background: var(--clay-wash); color: var(--clay); } .check-let { background: var(--amber-wash); color: var(--amber); } .check-tip { background: var(--navy-wash); color: var(--navy); }
.check-what { display: grid; gap: 2px; }
@media (max-width: 640px) { .check-row { grid-template-columns: minmax(0, 1fr) auto; } .check-mark { grid-column: 1 / -1; } }

/* Materialenbibliotheek */
.lib-photo { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.lib-actions { display: inline-flex; gap: 4px; white-space: nowrap; }
.btn-icon-empty { display: inline-block; width: 26px; }
.btn-icon.danger { color: var(--clay); }
.lib-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.lib-path { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.lib-path > p { flex-basis: 100%; margin: 4px 0 0; }
.lib-crumb { font-weight: 600; text-decoration: none; }
.lib-crumb.now { color: var(--text); }
.lib-ways { display: inline-flex; gap: 4px; }
.lib-supplier { margin-left: auto; font-size: 12.5px; }
.lib-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.lib-tile { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.lib-tile:hover { background: var(--surface-2); }
.lib-tile.loose { border-style: dashed; }
.lib-tile-name { font-weight: 600; }
.lib-tile-count { font: 600 18px/1.1 var(--display); }
.lib-drawer td { background: var(--surface-2); font-weight: 600; }
.lib-twin { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--amber-wash); color: var(--amber); font-size: 11px; }
.lib-duplicates { background: var(--amber-wash); }
.lib-duplicates ul { margin: 4px 0; padding-left: 18px; }
.lib-search { display: grid; gap: 4px; font-weight: 600; font-size: 12.5px; }
.lib-card { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
.lib-card-photo { max-width: 100%; border-radius: var(--radius); }
table.info th { text-align: left; font-weight: 600; padding: 4px 12px 4px 0; vertical-align: top; white-space: nowrap; }
table.info td { padding: 4px 0; }
@media (max-width: 640px) { .lib-card { grid-template-columns: 1fr; } }

/* Een nieuw project starten */
.start-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.start-card { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
a.start-card:hover { border-color: var(--navy); background: var(--navy-wash); }
.start-title { font: 600 18px var(--display); }
.start-steps { display: grid; gap: 4px; font-size: 12.5px; }
.start-steps span::before { content: "· "; color: var(--text-dim); }
.start-button { font-weight: 600; color: var(--navy); }

/* Instellingen */
.settings-form { display: grid; gap: 11px; }
.settings-grid { display: grid; gap: 11px; }
.settings-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.settings-grid.phone { grid-template-columns: 200px minmax(0, 1fr); }
.settings-grid.address1 { grid-template-columns: minmax(0, 1fr) 90px 90px; }
.settings-grid.address2 { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); }
.field { display: grid; gap: 4px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.field input, .field select { width: 100%; }
.narrow-field { max-width: 300px; }
.settings-address { border: 0; border-top: 1px solid var(--line); margin: 4px 0 0; padding: 11px 0 0; display: grid; gap: 11px; }
.settings-address legend { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); padding: 0 6px 0 0; }
.form-actions { margin: 4px 0 0; }
.settings-inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 10px 10px 0 0; }
.settings-logo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.settings-logo img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius); }
.logo-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius); background: var(--navy); color: var(--on-navy, #fff); font: 600 22px var(--display); }
button.tab { text-align: left; font: inherit; color: var(--text); background: var(--surface); }
button.tab[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-wash); }
.bad { color: var(--clay); } .good { color: var(--olive); }
@media (max-width: 640px) { .settings-grid.two, .settings-grid.phone, .settings-grid.address1, .settings-grid.address2 { grid-template-columns: 1fr; } }
/* Instellingen › Team: one form for the table; the buttons on a row post a form of their own */
table.team-table select { max-width: 170px; }
table.team-table input[type="checkbox"] { width: auto; }
table.team-table td.center { text-align: center; }
table.team-table td.nowrap { white-space: nowrap; }
table.team-table .team-bond { display: block; margin-top: 2px; }
/* Wie doet wat: a column per function, its steps as chips */
.role-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.role-column { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.role-column.role-new { border-style: dashed; }
.role-head { display: grid; gap: 6px; }
.role-head input[name="naam"], .role-title { font-weight: 700; font-size: 13px; margin: 0; }
.role-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.step-chip { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text); text-decoration: none; font-size: 12px; }
a.step-chip:hover, a.step-chip[aria-current="true"] { background: var(--navy-wash); color: var(--navy-deep); }
.step-choice { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 2px 8px; }
.step-back { flex-wrap: wrap; gap: 4px; }
.settings-grid.three { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.settings-grid.wide-narrow { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.with-unit { display: flex; gap: 6px; align-items: center; }
.with-unit input { max-width: 120px; }
.short-select { max-width: 80px; }
@media (max-width: 640px) { .settings-grid.wide-narrow { grid-template-columns: 1fr; } }
.design-group + .design-group { margin-top: 14px; }
.design-step textarea { width: 100%; min-width: 220px; resize: vertical; }
.design-step .check { display: inline-flex; gap: 4px; margin-right: 10px; }
.design-table input.amount { max-width: 110px; text-align: right; }
.group-title { font-size: 14px; margin: 0 0 6px; }
.factor-block { display: grid; gap: 3px; margin-bottom: 9px; }
.guide-table input.amount { max-width: 110px; text-align: right; }
.field textarea { width: 100%; resize: vertical; font: inherit; }
textarea.small-text { font-size: 12.5px; line-height: 1.5; }
details.howto { font-size: 13px; }
details.howto ol { margin: 6px 0 0; padding-left: 20px; }
.rubric-list { display: grid; gap: 6px; margin: 0; padding-left: 26px; }
.rubric-list li { display: flex; gap: 8px; align-items: center; }
.rubric-list input { flex: 1; min-width: 0; }
.test-state { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-dim); }
.test-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.test-state.good::before { background: var(--olive); }
.test-state.warn::before { background: var(--amber); }
.trade-block { margin-bottom: 10px; }
.trade-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.trade-row input { flex: 1; min-width: 0; }
.trade-row.sub { padding-left: 18px; }
.trade-row.head input { font-weight: 600; }
.mail-template { border-top: 1px solid var(--line); padding: 8px 0; }
.mail-template summary { cursor: pointer; }
.mail-sheet { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mail-sheet textarea { width: 100%; resize: vertical; font: inherit; }
.mail-signature { white-space: pre-line; }
.tag { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 9px; background: var(--olive-wash); color: var(--olive-deep); }
.diff-list { margin: 0; padding-left: 16px; font-size: 12.5px; }
.diff-list s { color: var(--text-dim); }

/* the dossier's head (/projects/<id>) */
.dossier-meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dossier-meta .code { color: var(--navy); }
.dossier-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dossier-panel { margin-bottom: 16px; }
.change-order-figures { margin-bottom: 16px; }
table.change-orders .right { text-align: right; }
table.change-orders .center { text-align: center; }
table.change-orders .struck { text-decoration: line-through; color: var(--text-faint, var(--text-dim)); }
table.change-orders .row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
table.change-orders form.inline { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
table.change-orders tfoot td { font-weight: 700; }
.trip-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
table.trips input, table.trips select { max-width: 100%; }
table.change-orders tr.sum td { font-weight: 700; }
.dossier-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.set-aside, .comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.set-aside li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.set-aside form.inline, .comments form.inline { display: inline; margin: 0 0 0 6px; }
.log { list-style: none; margin: 0; display: grid; gap: 6px; padding: 12px 16px; max-height: 260px; overflow: auto; font-size: 12.5px; }
.comments li { padding: 10px 16px; border-top: 1px solid var(--line); }
.comments p { margin: 0; }
.comment-text { white-space: pre-wrap; }
.comment-form { display: flex; gap: 8px; align-items: flex-start; }
.comment-form textarea { flex: 1; min-height: 56px; }
table.playbook input:not([type=date]), table.playbook select { width: 100%; min-width: 7em; }
table.playbook tr.point td { border-top-style: dashed; font-size: 12px; }
table.playbook .point-name { padding-left: 28px; }
table.playbook tr.late td:first-child { box-shadow: inset 3px 0 0 var(--clay); }
/* dossier-project: the tab Project — the panels as a list with their dots, one open */
.part-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; }
.part-summary { margin-left: auto; }
.part-list { display: grid; gap: 8px; }
.part-list .part { margin: 0; }
.part-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; color: inherit; text-decoration: none; flex-wrap: wrap; }
.part-head:hover .part-title { text-decoration: underline; }
.part.open .part-head { border-bottom: 1px solid var(--line); }
.part-title { font-weight: 600; }
.part-about { flex: 1; min-width: 12em; }
.part-arrow { color: var(--text-dim); }
.part-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; }
.part-dot.ok { background: var(--olive); }
.part-dot.missing { background: var(--amber); }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 10px 0; }

/* ---------------------------------------------------------------- dossier-orders: Bestellingen & prijsaanvragen */
#uitvoering form.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.order-boxes .tab { min-width: 180px; }
.order-progress { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.order-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--line); }
.order-chip.chip-te { background: var(--amber-wash); color: var(--amber); border-color: transparent; }
.order-chip.chip-besteld, .order-chip.chip-geleverd { background: var(--navy-wash); color: var(--navy); border-color: transparent; }
.order-chip.chip-rek { background: var(--olive-wash); color: var(--olive); border-color: transparent; }
.order-chip.chip-extra { margin-left: 6px; background: var(--amber-wash); color: var(--amber); border-color: transparent; }
td .order-chip:not(.chip-extra) { margin-left: 6px; }
.order-phase { display: grid; gap: 8px; margin-bottom: 14px; }
.order-phase h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.order-task { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.order-task.problem { border-color: var(--clay); background: var(--clay-wash); }
.order-task.done { border-color: var(--olive); background: var(--olive-wash); }
.order-task-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 280px; }
.order-task-do { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.order-supplier { border-top: 1px solid var(--line); }
.order-supplier-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px 4px; }
table.orders td, table.orders th { vertical-align: middle; }
table.orders th a { color: inherit; text-decoration: none; }
.order-tick { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; color: var(--text-faint); cursor: pointer; }
.order-tick.on { color: var(--olive); }
.order-card { font-size: 11.5px; }
table.orders input[type=date] { max-width: 150px; }
table.orders input.estimated { color: var(--text-faint); font-style: italic; }
table.orders tr.step-inRek td { background: var(--olive-wash); }
.dot-amber { background: var(--amber); } .dot-olive { background: var(--olive); } .dot-navy { background: var(--navy); } .dot-clay { background: var(--clay); }
table.price-requests td small { display: block; color: var(--text-faint); }
@media (max-width: 760px) { table.orders th:first-child, table.orders td:first-child { display: none; } }
/* dossier-schedule: the payment rhythm (Project → Financiële informatie) */
.rhythm-choice { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.rhythm-card { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 10px 12px; }
.rhythm-card.idle { opacity: .6; }
.rhythm-card h3 { margin: 0 0 8px; font-size: 1em; }
.rhythm-switch { align-self: center; }
.milestones { list-style: none; margin: 0; padding: 0; }
.milestone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 0; border-bottom: 1px solid var(--line, #eee); }
.milestone label { flex: 1 1 14em; }
.milestone.final .milestone-text { font-weight: 600; }
.milestone-share input { width: 5em; }
.own-milestone { display: flex; gap: 6px; margin: 10px 0 4px; }
@media (max-width: 760px) { .rhythm-choice { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- dossier-deliveries: receiving a delivery */
#levering form.inline { display: inline-flex; margin: 0; }
.delivery-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.delivery-choice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.delivery-choice:has(input:checked) { border-color: var(--navy); background: var(--navy-wash); }
.delivery-choice > span { display: grid; gap: 2px; }
.delivery-problem { border: 1px dashed var(--line-strong); border-radius: var(--radius); margin: 12px 16px; display: grid; gap: 8px; }
.delivery-problem legend { padding: 0 6px; color: var(--text-faint); font-size: 12px; }
.delivery-problem textarea { width: 100%; }
.delivery-done { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.delivery-done dt { font-weight: 600; }
.delivery-done dd { margin: 0; }
@media (max-width: 640px) { .delivery-done { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- dossier-quote-read: the Offerte tab, read only */
.sheet-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.sheet-card h3 { margin: 0 0 8px; font-size: 14px; }
.sheet-rows { display: grid; gap: 3px; }
.sheet-head { margin-top: 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.sheet-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sheet-row .num { white-space: nowrap; }
.sheet-sum { border-top: 1px solid var(--line); padding-top: 4px; font-weight: 600; }
.sheet-big { border-top: 1px solid var(--line-strong); padding-top: 6px; font-weight: 700; font-size: 15px; }
.sheet-green .num, .sheet-big .num { color: var(--olive); }
.tone-olive { color: var(--olive); font-weight: 600; } .tone-clay { color: var(--clay); }
.sheet-notes { white-space: pre-wrap; }

/* ---------------------------------------------------------------- quote-status: the quote's status in Opvolging */
.quote-status { padding-bottom: 0; }
.quote-status select { max-width: 100%; }
/* dossier-documents: Opvolging's documents — a button form inside a row or a line */
form.inline { display: inline; }

/* ---------------------------------------------------------------- change-order-flow: ticking an option */
#meerwerk form.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
/* dossier-intake: the intake on site — the answers in a grid */
#intake .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; align-items: start; }
#intake .field-grid .field { display: grid; gap: 3px; }
#intake .field-grid textarea { grid-column: 1 / -1; }
/* search: the search field in the navigation, its dropdown, and the results page */
.app-search { position: relative; margin: 0 0 0 auto; }
.app-search input { width: 15em; max-width: 100%; }
.app-search-out:empty { display: none; }
.app-search-out { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: min(26em, 90vw); max-height: 70vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.search-group { padding: 6px 12px 2px; font-size: 11.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.search-hit { display: block; padding: 6px 12px; color: inherit; text-decoration: none; }
.search-hit:hover, .search-hit:focus { background: var(--surface-2); outline: none; }
.search-hit b { display: block; font-weight: 600; }
.search-hit span { display: block; font-size: 12px; color: var(--text-dim); }
.search-path { display: block; font-size: 11.5px; color: var(--text-dim); }
.search-all { border-top: 1px solid var(--line); }
.search-empty { padding: 8px 12px; color: var(--text-dim); }
/* app-panels: Layout van de app — the colour sets as swatches, the font sets as their own letters */
.layout-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.layout-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.layout-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--text); }
.accent-navy { background: #3C5B8B; } .accent-woud { background: #3F6B4F; } .accent-oceaan { background: #1F6F73; }
.accent-klei { background: #A2553A; } .accent-inkt { background: #33383F; }
.letters-klassiek b { font-family: "Fraunces", Georgia, "Times New Roman", serif; }
.letters-strak b { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; }
.letters-zacht b { font-family: "Lora", Georgia, serif; }
button[aria-pressed="true"].btn-small { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
/* user-management: Instellingen › Team › Logins */
.settings-grid.three.logins-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px; }
@media (max-width: 640px) { .settings-grid.three.logins-grid { grid-template-columns: minmax(0, 1fr); } }
.logins-table .settings-inline { margin: 0; }
.invite-link { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
/* guided-start: the cards of /start as buttons (the server makes the project), the guided start's steps */
.start-form { margin: 0; display: grid; }
button.start-card { font: inherit; text-align: left; cursor: pointer; margin: 0; }
button.start-card:hover { border-color: var(--navy); background: var(--navy-wash); }
.guided-head { margin-bottom: 14px; }
.guided-tabs ol { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: none; }
.guided-tab a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; background: var(--surface); font-size: 12.5px; }
.guided-tab a:hover { border-color: var(--navy); }
.guided-tab.current a { border-color: var(--navy); background: var(--navy-wash); font-weight: 600; }
.guided-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--text-dim); font-size: 11.5px; font-weight: 600; }
.guided-tab.done .guided-dot { background: var(--olive-wash); color: var(--olive); }
.guided-question { font: 600 18px var(--display); margin: 4px 0 2px; }
.guided-explanation, .guided-position { margin: 0 0 6px; }
.guided-intro { margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius); background: var(--navy-wash); }
.guided-foot { margin-top: 14px; align-items: center; flex-wrap: wrap; }
.guided-clear { display: inline-flex; gap: 8px; align-items: center; }
.ready-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.ready-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.ready-figures > * { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ready-amount, .ready-figures dd { margin: 0; font: 600 18px var(--display); }
.ready-figures dt { margin: 0; }
.ready-stands, .ready-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ready-stands li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.ready-stands .ok::before { content: "✓ "; color: var(--olive); }
.ready-stands .missing::before { content: "• "; color: var(--amber); }
.ready-steps { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
.ready-foot, .ready-client { margin-top: 10px; }
/* ---------------------------------------------------------------- change-order-flow: a reduction step by step */
#minwerk .flow-steps { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; }
#minwerk .flow-steps .current { font-weight: 600; color: var(--navy); }
#minwerk .btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--navy); text-decoration: underline; cursor: pointer; }
#minwerk .figure-line { display: flex; gap: 10px; align-items: baseline; justify-content: flex-end; margin: 12px 0 0; }
#minwerk table.figures { border-collapse: collapse; margin: 6px 0 14px; min-width: min(30em, 100%); }
#minwerk table.figures td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--line); }
#minwerk table.figures tr.total td { font-weight: 600; border-bottom: 0; }
#minwerk .min-when { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
#minwerk .min-when legend { font-weight: 600; margin-bottom: 4px; }
#minwerk .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; align-items: start; }
#minwerk .field-grid .field { display: grid; gap: 3px; }

/* ---------------------------------------------------------------- dossier-quote-edit: the Offerte's panels of lines, read only */
table.quote-lines .r { text-align: right; white-space: nowrap; }
table.quote-lines tfoot td { padding: 8px 12px; border-top: 1px solid var(--line-strong); font-weight: 600; }
table.quote-lines tr.quote-line-option td { color: var(--text-dim); }
table.quote-lines tr.quote-room th { background: var(--surface); color: var(--text); font-size: 13px; padding-top: 14px; }
table.quote-lines tr.quote-side td { font-size: 11.5px; color: var(--text-dim); background: var(--surface-2); padding: 5px 12px; }
table.quote-lines tr.quote-line-basic td:first-child { padding-left: 24px; }
table.quote-lines tr.quote-room-total td { font-weight: 600; border-top: 1px solid var(--line-strong); }
table.quote-lines form.line-field { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
table.quote-lines form.line-field input[name=value] { width: 7.5em; text-align: right; }
table.quote-lines a.line-remove { color: var(--text-faint); text-decoration: none; padding: 0 4px; }
table.quote-lines a.line-remove:hover { color: var(--clay); }
table.quote-lines form.line-description { margin: 4px 0 0; }
table.quote-lines form.line-description textarea { width: 100%; min-height: 0; font-size: 12px; resize: vertical; }

/* ---------------------------------------------------------------- site-stage: Stand van zaken — one row per milestone, its date and its button */
.site-stage-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.site-stage-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.site-stage-row.done { border-color: var(--olive); background: var(--olive-wash); }
.site-stage-row .field { flex: 1 1 260px; min-width: 0; }
.site-stage-row .hint, .site-stage .hint { display: block; }
.site-stage-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------------- dossier-quote-edit (continued): adding a line */
table.quote-lines tr.quote-add td { border-top: 0; padding-top: 2px; }
form.line-add { display: inline-flex; gap: 6px; align-items: center; margin: 0; }

/* ---------------------------------------------------------------- price-requests: one request's card as a form */
#prijsaanvraag fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
#prijsaanvraag .request-stand { margin: 4px 0 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
#prijsaanvraag .request-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; align-items: start; }
#prijsaanvraag .request-grid .field { display: grid; gap: 3px; }
#prijsaanvraag .request-yes-no { display: flex; flex-wrap: wrap; gap: 8px 18px; }
#prijsaanvraag .request-yes-no > span { display: grid; gap: 3px; }
#prijsaanvraag .yes-no { display: inline-flex; gap: 10px; }
#prijsaanvraag .yes-no label { display: inline-flex; gap: 3px; align-items: center; font-size: 13px; }
#prijsaanvraag table.request-params input, #prijsaanvraag table.request-params textarea { width: 100%; }
#prijsaanvraag table.request-params textarea { resize: vertical; min-height: 0; }
#prijsaanvraag table.request-params tr.fresh td { background: var(--surface-2); }
#prijsaanvraag .money-field { display: inline-flex; gap: 6px; align-items: center; }
#prijsaanvraag .money-field input { width: 10em; text-align: right; }
#prijsaanvraag .request-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: flex-end; margin: 12px 0; }

/* library-edit: a library product's fiche */
.lib-edit-photo { max-width: 240px; display: block; }
.lib-choice { border: 0; padding: 0; margin: 0; }
.lib-choice .check, .lib-edit-photo + .check { display: inline-flex; gap: 4px; margin-right: 12px; align-items: center; }
.lib-door-group summary { cursor: pointer; padding: 4px 0; }

/* site-practical: Praktisch op de werf's neighbours, one card each */
.neighbour-card { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.neighbour-card .panel-tools select { max-width: 12em; }
.neighbour-card .panel-tools input.num { width: 10em; }
/* team-member-fiche */
.member-fiche fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.member-fiche details.field summary { cursor: pointer; color: var(--navy); }

/* project-panels-rest: the map tile of Werf & locatie (the legacy .kaarttegel), our own drawing */
.site-card { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.site-card p { margin: 0; flex: 1 1 190px; min-width: 0; }
.kaarttegel { flex: none; width: 76px; height: 76px; border-radius: 9px; overflow: hidden; position: relative; display: block;
  border: 1px solid var(--line-strong); background: var(--surface); text-decoration: none; transition: transform .12s ease; }
.kaarttegel:hover { transform: scale(1.04); border-color: var(--navy); }
.kaarttegel.leeg { opacity: .4; }
.kaarttegel svg { display: block; width: 100%; height: 100%; }
.kaarttegel .grond { fill: var(--surface-2); }
.kaarttegel .huizen rect { fill: var(--line); }
.kaarttegel .park { fill: var(--olive-wash); }
.kaarttegel .water { stroke: var(--navy-wash); stroke-width: 4; fill: none; }
.kaarttegel .wegen path { stroke: var(--bg); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kaarttegel .wegen path.zij { stroke-width: 2.6; }
.kaarttegel .speld path { fill: var(--clay); }
.kaarttegel .speld .oog { fill: var(--surface); }
.kt-voet { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #fff; background: rgba(26, 34, 51, .55); padding: 0 0 1px; line-height: 1.5; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the product card */
table.quote-lines a.line-product { color: var(--text-faint); text-decoration: none; padding: 0 4px; }
table.quote-lines a.line-product:hover { color: var(--navy); }
.quote-product fieldset.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; align-items: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 12px; }
.quote-product .field { display: grid; gap: 3px; }
.quote-product label.check { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; }
.quote-product textarea { width: 100%; }
/* order-round: the round's suppliers over the order form, the order list as text */
.order-round { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.order-list-text { width: 100%; font: inherit; font-size: 13px; line-height: 1.5; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the pricing bar */
.pricing-bar .pricing-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; }
.pricing-bar .pricing-margins { border-top: 1px solid var(--line); }
.pricing-bar .field { display: grid; gap: 3px; min-width: 0; }
.pricing-bar .pricing-about { flex: 1 1 220px; max-width: 320px; }
.pricing-bar form.pricing-control { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.pricing-bar form.pricing-control input.num { width: 6.5em; text-align: right; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the coordination fee's bar */
.coordination-bar .panel-head form.seg { display: inline-flex; gap: 4px; margin: 0 0 0 auto; }
.coordination-bar .panel-head form.seg button[aria-pressed="true"] { background: var(--navy); color: var(--surface); border-color: var(--navy); }
.coordination-bar .pricing-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; }
.coordination-bar .field { display: grid; gap: 3px; min-width: 0; }
.coordination-bar form.pricing-control { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.coordination-bar form.pricing-control input.num { width: 7.5em; text-align: right; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the panel Opmaak van de offerte */
.quote-layout .pricing-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; }
.quote-layout .field { display: grid; gap: 3px; min-width: 0; }
.quote-layout form.pricing-control { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.quote-layout .styling-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.quote-layout .styling-choices button[aria-pressed="true"] { background: var(--navy); color: var(--surface); border-color: var(--navy); }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): where the quote stands, the client's answer */
.standbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 14px; margin: 0 0 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--amber-wash); }
.standbar-ok { background: var(--surface); border-color: var(--navy); }
.standbar .standbar-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.quote-answer .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.quote-answer .field { display: grid; gap: 3px; margin: 0 0 10px; }
.quote-answer .approval-steps { display: grid; gap: 10px; padding-left: 20px; }
.quote-answer form.inline { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the conditions under Opmaak */
.quote-layout .conditions { display: grid; gap: 6px; }
.quote-layout .conditions-form textarea { width: 100%; min-height: 6em; }
.quote-layout .conditions .pre { white-space: pre-line; margin: 0; }
.quote-layout .conditions form.inline { display: inline; margin: 0; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the payment rhythm */
#ritme .rhythm-tl { grid-template-columns: minmax(0, 1fr); border-top: 0; }

/* ---------------------------------------------------------------- painter-calculator: the painter calculator, step by step */
#schilder .paint-panel { padding: 12px 14px; }
#schilder .paint-step { margin: 0 0 10px; }
#schilder form.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
#schilder table.paint-table td, #schilder table.paint-table th { vertical-align: middle; }
#schilder table.paint-table .right { text-align: right; }
#schilder table.paint-table .center { text-align: center; }
#schilder .paint-num { width: 4.5em; text-align: right; }
#schilder .paint-coats { width: 3em; text-align: right; }
#schilder .paint-code { width: 6em; }
#schilder .paint-price { width: 7em; text-align: right; }
#schilder .paint-choose { border-color: var(--clay, #b5562b); }
#schilder .paint-chip { display: inline-flex; gap: 4px; align-items: center; text-decoration: none; color: var(--text-dim); }
#schilder .paint-swatch.empty rect { stroke-dasharray: 2 2; }
#schilder tr.paint-note td, #schilder tr.paint-group td { background: var(--surface-2); }
#schilder .paint-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
#schilder .paint-foot [aria-disabled="true"] { opacity: 0.5; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the versions */
#versies .version-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the painting panel's controls */
#lijnen-schilder .painting-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#lijnen-schilder .panel-head form.inline { margin: 0; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the panel Ontwerp & plannen */
#ontwpaneel .design-steps tr.design-on td:first-child b { color: var(--navy); }
/* ---------------------------------------------------------------- change-order-flow: paint in an addition (the painter calculator in the flow) */
#minwerk .paint-panel { padding: 4px 0; }
#minwerk .paint-step { margin: 0 0 10px; }
#minwerk table.paint-table td, #minwerk table.paint-table th { vertical-align: middle; }
#minwerk table.paint-table .right { text-align: right; }
#minwerk table.paint-table .center { text-align: center; }
#minwerk .paint-num { width: 4.5em; text-align: right; }
#minwerk .paint-coats { width: 3em; text-align: right; }
#minwerk .paint-code { width: 6em; }
#minwerk .paint-price { width: 7em; text-align: right; }
#minwerk .paint-choose { border-color: var(--clay, #b5562b); }
#minwerk .paint-chip { display: inline-flex; gap: 4px; align-items: center; text-decoration: none; color: var(--text-dim); }
#minwerk .paint-swatch.empty rect { stroke-dasharray: 2 2; }
#minwerk tr.paint-note td, #minwerk tr.paint-group td { background: var(--surface-2); }
#minwerk .paint-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
#minwerk .paint-foot [aria-disabled="true"] { opacity: 0.5; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): editing the panel Ontwerp & plannen */
#ontwpaneel.design-edit form.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
#ontwpaneel.design-edit .design-steps input.num { width: 6.5em; text-align: right; }
#ontwpaneel.design-edit .design-steps td.nowrap { white-space: nowrap; }
#ontwpaneel.design-edit .design-tick { display: block; }
#ontwpaneel.design-edit details.inline-confirm { display: inline-block; }
#ontwpaneel.design-edit details.inline-confirm > summary { list-style: none; cursor: pointer; display: inline-block; }
#ontwpaneel.design-edit .seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
/* ---------------------------------------------------------------- dossier-quote-edit (continued): the send window's mail */
.quote-send form.send-mail { margin-top: 8px; }
.quote-send form.send-mail fieldset { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.quote-send form.send-mail legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.quote-send form.send-mail input[type="text"] { width: 200px; }

/* ---------------------------------------------------------------- change-order-flow: the client's answer to a proposal */
.answer-choices { border: 0; padding: 0; margin: 10px 0; min-width: 0; display: grid; gap: 6px; }
.answer-choices legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.answer-choices .check { display: flex; align-items: flex-start; }

/* ---------------------------------------------------------------- quote-edit-rest: the small controls under a line */
table.quote-lines .line-marks { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 4px; }
table.quote-lines .line-marks select.matin.leeg { color: var(--clay); }
table.quote-lines form.line-room input[name=value] { width: 9em; }
table.quote-lines .line-move { display: inline-flex; gap: 2px; align-items: center; margin-left: 6px; }
table.quote-lines .line-move button { padding: 0 5px; }

/* ---------------------------------------------------------------- legacy-dossier-out: Werk af (/follow-up/werk-af) */
.step-work-here { border-color: var(--navy); }
.step-work-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.step-work-row:first-child { border-top: 0; }
.step-work-row.step-work-now { background: var(--clay-wash); padding-inline: 8px; border-radius: var(--radius); }
.step-work-row.step-work-done b { text-decoration: line-through; }
.step-work-row .late { color: var(--clay); }
.step-work-row input[type=date] { width: 10em; }
table.quote-lines a.line-suggest { color: var(--olive); text-decoration: none; padding: 0 4px; }
.suglijst { display: grid; gap: 10px; margin: 12px 0; }
.sugkaart { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.sugkaart .sugknoppen { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }

/* ---------------------------------------------------------------- signup: /registreren and /platform/signups */
.signup-card { max-width: 440px; }
.signup-card textarea { font: inherit; color: var(--text); padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); resize: vertical; }
.signup-card .error p { margin: 0; }
.signup-check { display: flex; gap: 8px; align-items: flex-start; color: var(--text); }
.signup-check input { margin-top: 3px; }
.signup-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-request { border-top: 1px solid var(--line); padding: 12px 0; }
.signup-request:first-child { border-top: 0; padding-top: 0; }
.signup-request h3 { margin: 0 0 4px; font-size: 15px; }
.signup-message { white-space: pre-wrap; background: var(--surface-2); padding: 8px 10px; border-radius: var(--radius); }
.signup-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }

/* ---------------------------------------------------------------- vat-auto: the VAT block (Bert, 08/10 and 13/10/2026; question 3) */
.vat-block .vat-row { display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap; }
.vat-block .vat-field { flex: 0 1 340px; min-width: 0; }
.vat-block .vat-field select { width: 100%; max-width: 100%; }
.vat-block .vat-rate { flex: 0 0 auto; display: grid; justify-items: center; }
.vat-block .eyebrow { display: block; margin: 0 0 6px; padding: 0; }
.vat-block .vat-box { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; box-sizing: border-box; padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); }
/* the sentence says what the regime means; when it differs from what the client fits, the button beside it takes the fitting one over */
.vat-block .vat-say { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 9px 0 0; padding: 9px 12px; max-width: none;
  border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; color: var(--text); }
.vat-block .vat-say > span { flex: 1 1 auto; min-width: 0; }
.vat-block .vat-say .btn-small { flex: 0 0 auto; }
.vat-block .vat-say.ok { background: var(--olive-wash); border: 1px solid color-mix(in srgb, var(--olive) 28%, var(--line)); }
.vat-block .vat-say.let { background: var(--amber-wash); border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--line)); }
.vat-block .vat-say.bad { background: var(--clay-wash); border: 1px solid color-mix(in srgb, var(--clay) 34%, var(--line)); }
/* the pricing bar reads the VAT regime and rate, with a link to where they are set (Bert, 08/10/2026) */
.pricing-vat .vat-read { display: inline-flex; align-items: center; width: 232px; max-width: 100%; box-sizing: border-box; padding: 5px 9px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12.5px; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.pricing-vat .vat-read:hover { border-color: var(--navy); color: var(--navy); }
.pricing-vat .vat-read-num { width: 84px; justify-content: center; font-variant-numeric: tabular-nums; }
.pricing-vat .btn-small.warn { align-self: flex-start; }
/* the check step of a concept invoice warns when its VAT regime is not what fits the client */
.vat-notice { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.vat-notice > span { flex: 1 1 24em; min-width: 0; }

/* ---------------------------------------------------------------- remus: the Remus panel of a dossier (docs/work/remus.md §10) */
.remus-panel { display: grid; gap: 16px; }
.remus-body { padding: 14px 16px; }
.remus-turns { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.remus-turn { display: grid; gap: 6px; }
.remus-q { justify-self: end; max-width: 75ch; margin: 0; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: var(--navy-wash); white-space: pre-wrap; }
.remus-a { justify-self: start; max-width: 75ch; margin: 0; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--surface-2); white-space: pre-wrap; }
.remus-who { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 2px; }
.remus-when { justify-self: end; font-size: 11px; }
.remus-ask { display: flex; gap: 10px; align-items: flex-end; }
.remus-ask textarea { flex: 1 1 auto; min-width: 0; resize: vertical; }
.remus-proposal-list { list-style: none; margin: 0; padding: 0; }
.remus-proposal { padding: 12px 16px; border-top: 1px solid var(--line); }
.remus-proposal:first-child { border-top: 0; }
.remus-proposal.pending { background: var(--amber-wash); }
.remus-proposal-what { margin: 0; font-weight: 500; }
.remus-proposal-actions { display: flex; gap: 8px; margin-top: 8px; }
.remus-proposal-actions form { margin: 0; }
.remus-links .remus-link-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.remus-links .remus-link-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.remus-links .remus-link-list form { margin: 0; }
/* the client's page (/klant/<token>): no menu, one card */
.klant { display: grid; justify-items: center; padding: 32px 16px; }
.klant-card { width: 100%; max-width: 720px; box-sizing: border-box; }
.klant-card h1 { margin: 4px 0 8px; }
.remus-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- backoffice: the platform's own pages on ba.backbilt.com (docs/work/backoffice.md) */
.bo-tag { font: 500 11px var(--body); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; }
.bo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bo-tile { display: grid; gap: 2px; padding: 14px 16px; }
.bo-tile-n { font: 600 28px/1.1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.bo-tile-label { font-weight: 600; }
.bo-search { display: flex; gap: 8px; align-items: center; }
.bo-search input { min-width: 0; width: 280px; max-width: 100%; }
.bo-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.bo-facts dt { color: var(--text-dim); }
.bo-facts dd { margin: 0; }
.bo-state { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); white-space: nowrap; }
.bo-state.on { background: var(--olive-wash); color: var(--text); }
.bo-state.wait { background: var(--amber-wash); color: var(--text); }
.bo-state.off { background: var(--clay-wash); color: var(--clay); }
.bo-state.admin { margin-left: 6px; background: var(--navy-wash); color: var(--navy); }
table.people td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bo-page > .panel + .panel { margin-top: 16px; }
/* backoffice step 2: actions and the page that asks for them */
.bo-mark { margin-left: 6px; }
td.bo-actions { white-space: nowrap; text-align: right; }
td.bo-actions .btn-small + .btn-small { margin-left: 4px; }
.bo-confirm { display: flex; gap: 10px; align-items: center; margin-top: 16px; }

/* ---------------------------------------------------------------- backoffice step 3: Instellingen › Abonnement (billing.tsx) */
.billing-prices { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.billing-prices li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.billing-prices form { margin: 0; }

/* cost-picture */
/* the discount's buttons and field, and the two fields of "Kosten in min", on Totaaloverzicht (step 5) */
.sheet-row.cost-edit-row { align-items: center; }
.cost-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.cost-edit form.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.cost-edit input.num { width: 7.5em; text-align: right; }
.cost-edit input.cost-note { width: 16em; max-width: 100%; }
.cost-edit-hint { margin: 0; }

/* trade-tree */
/* the drawers of an open head in the trade picker, with the caption of the drawer above its leaves (step 9; Bert, 13/10/2026) */
.trade-drawer { width: 100%; }
.trade-drawer + .trade-drawer { margin-top: 6px; }
.trade-drawer .chips { gap: 6px; }
.trade-drawer-caption { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: 2px 0 3px; }
/* Instellingen › Vakgebieden as the one table: head › drawer caption › leaf, each head's leaves in a <details> whose
   summary is the arrow before the head's field (step 10; Bert, 13/10/2026, 099 vakBeheer) */
.trade-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); }
.trade-search input[type="search"] { flex: 1 1 14rem; max-width: 20rem; padding: 6px 9px; }
.trade-line { display: grid; grid-template-columns: 1.5rem minmax(0, 14rem) minmax(0, 1fr) 4.5rem 6.5rem; gap: 6px; align-items: center; min-height: 2.25rem; }
.trade-table input { padding: 5px 8px; min-width: 0; width: 100%; }
.trade-cols { min-height: 0; font-size: 11.5px; font-weight: 600; color: var(--text-dim); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.trade-branch { position: relative; border-bottom: 1px solid var(--line); padding: 3px 0; }
.trade-line-head > input { font-weight: 600; }
.trade-branch:has(> .trade-leaves[open]) .trade-leaves-count { visibility: hidden; }
.trade-leaves > summary { position: absolute; top: 3px; left: 0; width: 1.5rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  list-style: none; cursor: pointer; color: var(--navy); border-radius: 6px; }
.trade-leaves > summary::-webkit-details-marker { display: none; }
.trade-leaves > summary::before { content: "▸"; font-size: 13px; transition: transform .12s ease; }
.trade-leaves[open] > summary::before { transform: rotate(90deg); }
.trade-leaves > summary:hover { background: var(--navy-wash); }
.trade-leaves[open] { padding-bottom: 6px; }
.trade-line-leaf > input, .trade-line-drawer > .trade-drawer-name, .trade-line-add > .trade-add { grid-column: 3; }
.trade-line-drawer { min-height: 0; padding-top: 8px; }
.trade-drawer-name { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.trade-count { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.trade-add { display: flex; gap: 6px; align-items: center; max-width: 22rem; }
.trade-add-head { margin: 10px 0 0; }
.trade-add-head input { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .trade-line { grid-template-columns: 1.5rem minmax(0, 1fr) 2.5rem auto; }
  .trade-cols, .trade-leaves-count { display: none; }
  .trade-line-leaf > input, .trade-line-drawer > .trade-drawer-name, .trade-line-add > .trade-add { grid-column: 2; }
  .trade-line-leaf, .trade-line-drawer, .trade-line-add { padding-left: 1rem; }
}

/* category-picker */
/* the category picker under Categorie on the library fiche (C8.24's "19 · DE CATEGORIEKIEZER", Bert 13/10/2026): his window as a
   panel in the field — the heads on olive with a faint count, the rows with name and caption, the chosen row marked on its left
   edge, the hint at the other cards on amber, "Staat er niet bij" without a rule. The rest of the look → house-style. */
.lib-category-field { display: grid; gap: 6px; align-content: start; }
.lib-category-find { justify-self: start; }
.lib-category-picker:empty { display: none; }
.catkiezer { display: grid; gap: 10px; padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.catkiezer-head h3 { margin: 0; font: 600 15px/1.3 var(--display); color: var(--text); }
.catkiezer-head p { margin: 2px 0 0; }
.catkiezer-results { display: grid; gap: 9px; max-height: min(62vh, 560px); overflow: auto; }
.catkiezer-foot { margin: 0; }
.catgeen { margin: 0; }
.catlijst { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.catgroep + .catgroep { border-top: 1px solid var(--line); }
.catkop { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--olive-wash); cursor: pointer; list-style: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.catkop::-webkit-details-marker { display: none; }
.catkop::after { content: "▾"; flex: 0 0 auto; font-size: 12px; transition: transform .12s ease; }
.catgroep[open] > .catkop::after { transform: rotate(180deg); }
.catkop-naam { flex: 1 1 auto; min-width: 0; }
.catn { color: var(--text-faint); font-weight: 400; }
.catsubs { background: var(--surface); }
button.catrij { display: flex; align-items: baseline; gap: 10px; width: 100%; margin: 0; padding: 8px 12px; border: 0; border-radius: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: none; color: var(--text); font: 400 13.5px/1.4 var(--body); text-align: left; cursor: pointer; }
.catsubs > button.catrij:first-child { border-top: 0; }
button.catrij:hover { background: var(--navy-wash); }
button.catrij[aria-pressed="true"] { background: var(--navy-wash); box-shadow: inset 3px 0 0 var(--navy); }
.catnaam { flex: 1 1 auto; min-width: 0; }
.catpad { flex: 0 0 auto; font-size: 11.5px; color: var(--text-faint); }
.catelders { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 0; padding: 9px 12px; border-radius: var(--radius); background: var(--amber-wash); }
.catelderspad { color: var(--text); }
.catnieuw { display: grid; gap: 4px; justify-items: start; margin-top: 4px; }
.catnieuw p { margin: 0; }
.catnieuw-titel { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }