/* Layout: a graphite rail (desktop) or bottom tab bar (phone) around an aluminium work surface;
   condensed stencil-style labels, gaffer-tape number tags, amber tally-light accent. */
:root {
  --bg: var(--p-bg, #eceef1);
  --surface: #ffffff;
  --surface-2: var(--p-surface-2, #f5f6f8);
  --line: var(--p-line, #d8dce2);
  --line-strong: var(--p-line-strong, #bdc4cd);
  --fg: #15181c;
  --muted: #5a626d;
  --accent: var(--brand, #f2a31b);
  --accent-ink: var(--brand-ink, #1c1403);
  --accent-text: var(--brand-text-l, #8a5300);
  --accent-rail: var(--brand-rail, #f2a31b);
  --rail: var(--p-rail, #1a1d21);
  --rail-fg: var(--p-rail-fg, #c3c9d1);
  --rail-active: var(--p-rail-active, #2b3036);
  --tape: #e7e2cf;
  --tape-ink: #3b3626;
  --danger: #b8322a;
  --danger-bg: #fbe8e6;
  --warn: #9a5c00;
  --warn-bg: #fff2d9;
  --ok: #1b7a4e;
  --ok-bg: #e2f3ea;
  --st-concept: #6f7883;
  --st-optie: #7048cc;
  --st-bevestigd: #1b8556;
  --st-afgerond: #33659a;
  --st-geannuleerd: #b23f35;
  --chart-bev: #1b8556;
  --chart-opt: #7048cc;
  --ar-open: #33659a;
  --ar-late: #b8322a;
  --ar-bill: #a47a00;
  --weekend: var(--p-weekend, #e4e7eb);
  --shadow: 0 1px 2px rgba(16, 20, 26, .06), 0 6px 20px rgba(16, 20, 26, .07);
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --radius: 8px;
  --rail-w: 228px;
  --tabbar-h: 62px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--p-bg-d, #111316);
    --surface: var(--p-surface-d, #191c20);
    --surface-2: var(--p-surface-2-d, #20242a);
    --line: var(--p-line-d, #2c3137);
    --line-strong: var(--p-line-strong-d, #3b424b);
    --fg: #e7e9ec;
    --muted: #9aa2ac;
    --accent: var(--brand-d, #f5b13a);
    --accent-ink: var(--brand-ink-d, #1c1403);
    --accent-text: var(--brand-text-d, #f5b13a);
    --rail: var(--p-rail, #0b0d0f);
    --rail-fg: var(--p-rail-fg, #aeb5be);
    --rail-active: var(--p-rail-active, #1e2227);
    --tape: #39362a;
    --tape-ink: #ebe3c4;
    --danger: #f07a6f;
    --danger-bg: #3a1c19;
    --warn: #f2b24c;
    --warn-bg: #352812;
    --ok: #5ccb93;
    --ok-bg: #15301f;
    --st-concept: #9aa2ad;
    --st-optie: #a88cf2;
    --st-bevestigd: #4fc48a;
    --st-afgerond: #7aa7da;
    --st-geannuleerd: #ee8075;
    --chart-bev: #3aa874;
    --chart-opt: #9478e8;
    --ar-open: #4f86c6;
    --ar-late: #e0675c;
    --ar-bill: #b0901c;
    --weekend: var(--p-weekend-d, #16191d);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: var(--p-bg-d, #111316);
  --surface: var(--p-surface-d, #191c20);
  --surface-2: var(--p-surface-2-d, #20242a);
  --line: var(--p-line-d, #2c3137);
  --line-strong: var(--p-line-strong-d, #3b424b);
  --fg: #e7e9ec;
  --muted: #9aa2ac;
  --accent: var(--brand-d, #f5b13a);
  --accent-ink: var(--brand-ink-d, #1c1403);
  --accent-text: var(--brand-text-d, #f5b13a);
  --rail: var(--p-rail, #0b0d0f);
  --rail-fg: var(--p-rail-fg, #aeb5be);
  --rail-active: var(--p-rail-active, #1e2227);
  --tape: #39362a;
  --tape-ink: #ebe3c4;
  --danger: #f07a6f;
  --danger-bg: #3a1c19;
  --warn: #f2b24c;
  --warn-bg: #352812;
  --ok: #5ccb93;
  --ok-bg: #15301f;
  --st-concept: #9aa2ad;
  --st-optie: #a88cf2;
  --st-bevestigd: #4fc48a;
  --st-afgerond: #7aa7da;
  --st-geannuleerd: #ee8075;
  --chart-bev: #3aa874;
  --chart-opt: #9478e8;
  --ar-open: #4f86c6;
  --ar-late: #e0675c;
  --ar-bill: #b0901c;
  --weekend: var(--p-weekend-d, #16191d);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.num, .money { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: .86em; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
.spacer { flex: 1; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.fill { fill: currentColor; stroke: none; }

/* ---------- App shell ---------- */
.app { min-height: 100%; }

.rail {
  display: none;
  background: var(--rail);
  color: var(--rail-fg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .02em;
  color: #f1f3f5;
  text-decoration: none;
}
.brand-mark {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--accent);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18);
}
.brand-mark span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-ink); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--rail-fg);
  font-weight: 500;
}
.nav a:hover { background: var(--rail-active); color: #fff; }
.nav a[aria-current="page"] { background: var(--rail-active); color: #fff; box-shadow: inset 3px 0 0 var(--accent-rail); }
.nav-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: #7d858f;
  padding: 14px 12px 6px;
}
.rail-foot { margin-top: auto; font-size: 12px; color: #7d858f; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.mode-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; }
.mode-dot.local { background: var(--warn); }

.main {
  min-width: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px));
}
.main-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.view { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#banner { display: flex; flex-direction: column; gap: 8px; }

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--rail);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(4px, env(safe-area-inset-left, 0px));
  padding-right: max(4px, env(safe-area-inset-right, 0px));
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.tabbar a, .tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--tabbar-h);
  background: none; border: 0;
  color: var(--rail-fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  min-width: 0;
}
.tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar svg.i { width: 22px; height: 22px; }
.tabbar [aria-current="page"] { color: var(--accent-rail); }

@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .rail {
    display: flex; flex-direction: column; gap: 8px;
    position: sticky; top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 18px 12px;
  }
  .rail .brand { padding: 4px 8px 14px; }
  .tabbar { display: none; }
  .main { padding-block: 28px 48px; padding-left: 32px; padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}

/* ---------- Page structure ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.page-head .titles { flex: 1 1 260px; min-width: 0; }
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 2px;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.05; }
h2 { font-size: 21px; line-height: 1.15; }
h3 { font-size: 17px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; }
.back:hover { color: var(--fg); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-pad { padding: 16px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.card-head h2 { font-size: 19px; }
.card-head .count { color: var(--muted); font-family: var(--font-mono); font-size: 13px; }

.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 500;
  font-size: 14px;
}
.banner.info { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.banner .btn { margin-left: auto; }
/* Werkplaats (Tom, 8-11-2026) */
.view-tabs { margin: 0 0 12px; }
.mod-row { align-items: flex-start; gap: 10px; }
.wp-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 16px 16px; }
.wp-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wp-col-head { font-weight: 600; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.wp-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.wp-card { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.wp-card:hover { border-color: var(--accent, var(--line)); }
.wp-card .title { font-weight: 600; }
.wp-card .sub { font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.wp-what { font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wp-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-info { grid-column: 1 / -1; }
.wp-info .kv-detail { margin-bottom: 4px; }
.wp-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
@media (max-width: 760px) { .wp-board { grid-template-columns: 1fr; } }
.line .rm { display: flex; gap: 2px; }
.ex-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 12px; }
.ex-filter { display: flex; flex-direction: column; gap: 2px; }
.ex-filters .spacer { flex: 1; }
.scan-bar { display: flex; gap: 8px; }
.scan-bar input { flex: 1; min-width: 0; font-size: 16px; }
.scan-bar .btn.on { background: var(--accent, #439A86); color: #fff; }
.scan-cam video { width: 100%; max-height: 42vh; object-fit: cover; border-radius: 10px; background: #000; display: block; }
.scan-msg { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.scan-msg.ok { background: var(--ok-bg); color: var(--ok); }
.scan-msg.warn { background: var(--warn-bg); color: var(--warn); }
.scan-msg.bad { background: var(--danger-bg); color: var(--danger); }
.scan-msg .scan-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.scan-list { display: flex; flex-direction: column; }
.scan-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.scan-row .main-col { display: flex; flex-direction: column; min-width: 0; }
.scan-row .sub { font-size: 12px; color: var(--muted); }
.scan-row .sc-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.scan-row .sc-btns { display: flex; gap: 2px; }
.scan-row .sc-ic { display: inline-flex; color: var(--muted); }
.scan-row.ok .sc-ic { color: var(--ok); }
.scan-row.part .sc-ic, .scan-row.extra .sc-ic { color: var(--warn); }
.scan-row.none .sc-ic { color: var(--danger); }
.sc-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; display: inline-block; margin: 0 4px; }
.modal.flash-ok { animation: scan-ok .5s; }
.modal.flash-warn { animation: scan-warn .6s; }
.modal.flash-bad { animation: scan-bad .7s; }
@keyframes scan-ok { 0% { box-shadow: 0 0 0 4px var(--ok); } 100% { box-shadow: none; } }
@keyframes scan-warn { 0% { box-shadow: 0 0 0 5px var(--warn); } 100% { box-shadow: none; } }
@keyframes scan-bad { 0% { box-shadow: 0 0 0 6px var(--danger); } 100% { box-shadow: none; } }
.ku-row { grid-template-columns: minmax(0, 1fr) auto; }
.ku-row .side { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.ku-row.hot { background: var(--surface-2); }
.ku-partij label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.ku-partij input { width: 56px; }
.ku-files { margin-top: 12px; }
.ku-files [data-ku-files] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ku-tools { gap: 8px; flex-wrap: wrap; }
.scan-part + .scan-part { border-top: 1px solid var(--line); padding-top: 10px; }
.scan-part-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.serial-row .ser-qr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-nav { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hr-period { min-width: 150px; text-align: center; font-variant-numeric: tabular-nums; }
.hr-row.hr-off { background: var(--warn-bg); }
.row.hr-row .side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; max-width: none; }
.row.hr-row .side .btn { min-width: 92px; justify-content: center; }
.row.hr-row .c-warn { display: flex; align-items: center; }
.hr-nl .side { display: flex; align-items: center; gap: 8px; }
.c-price small { display: block; color: var(--muted); font-size: 12px; }
.tr-mates { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.aw-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.modal-body > .banner { margin: 4px 0 12px; flex-wrap: nowrap; align-items: flex-start; }
.banner > .i { flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.05); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-bg); }
.btn-sm { min-height: 32px; padding: 4px 10px; font-size: 13.5px; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--fg); }
.icon-btn.danger:hover { color: var(--danger); background: var(--danger-bg); }
body.readonly [data-write] { display: none !important; }

/* ---------- Pills, tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pc, var(--muted));
  background: color-mix(in srgb, var(--pc, var(--muted)) 14%, transparent);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-concept { --pc: var(--st-concept); }
.st-optie { --pc: var(--st-optie); }
.st-bevestigd { --pc: var(--st-bevestigd); }
.st-afgerond { --pc: var(--st-afgerond); }
.st-geannuleerd { --pc: var(--st-geannuleerd); }
.st-verzonden { --pc: var(--st-afgerond); }
.st-betaald { --pc: var(--ok); }
.st-vervallen { --pc: var(--danger); }
.st-geaccepteerd { --pc: var(--ok); }
.st-afgewezen { --pc: var(--st-geannuleerd); }
.st-verlopen { --pc: var(--warn); }

.tape {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tape-ink);
  background: var(--tape);
  padding: 2px 9px;
  clip-path: polygon(0 8%, 3px 0, 100% 4%, calc(100% - 3px) 50%, 100% 96%, 4px 100%, 0 88%, 3px 50%);
  white-space: nowrap;
}

.flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.flag svg.i { width: 14px; height: 14px; }
.flag.danger { color: var(--danger); background: var(--danger-bg); }
.flag.warn { color: var(--warn); background: var(--warn-bg); }
.flag.ok { color: var(--ok); background: var(--ok-bg); }
.flag.neutral { color: var(--muted); background: var(--surface-2); }
.example-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--warn); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  text-decoration: none;
}
.stat .k { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stat .v { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat .s { font-size: 13px; color: var(--muted); }
.stat.alert .v { color: var(--danger); }
.stat.alert { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }

/* ---------- Lists ---------- */
.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.list > .row:first-child { border-top: 0; }
/* An attention row with its own buttons (review 7.1/9.3): the link and the buttons side by side, one line on top. */
.attn-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-right: 12px; min-width: 0; }
.list > .attn-row:first-child { border-top: 0; }
.attn-row > .row.attn-main { flex: 1 1 auto; border-top: 0; }
.attn-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .attn-row { flex-wrap: wrap; padding: 0 0 10px; }
  .attn-row > .row.attn-main { flex-basis: 100%; }
  .attn-acts { padding-left: 52px; justify-content: flex-start; }
}
a.row:hover, button.row:hover { background: var(--surface-2); }
button.row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; font: inherit; }
.row .main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .title { font-weight: 600; overflow-wrap: anywhere; }
.row .sub { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.row .side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; max-width: 48%; min-width: 0; text-align: right; }
.row .side:empty { display: none; }
.row .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.group-head {
  padding: 14px 16px 6px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; align-items: baseline;
}
.list > .group-head:first-child { border-top: 0; }
.group-head .sum { margin-left: auto; font-family: var(--font-mono); letter-spacing: 0; text-transform: none; font-size: 12.5px; }

.date-stub {
  flex: none;
  width: 48px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.date-stub .m { display: block; background: var(--rail); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; padding: 1px 0; color: var(--accent-rail); }
.date-stub .d { display: block; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; }

.avatar {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: #fff;
  background: var(--av, #556);
}

.empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty h3 { color: var(--fg); }
.empty p { margin: 0; max-width: 46ch; }

/* ---------- Toolbar / filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 220px;
  min-width: 0;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 0 10px;
}
.search input, .search input[type="search"] { border: 0; background: transparent; padding: 8px 0; min-height: 0; min-width: 0; flex: 1; outline: none; border-radius: 0; }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.search svg.i { color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip-btn .c { font-family: var(--font-mono); font-size: 11.5px; opacity: .7; margin-left: 4px; }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button {
  border: 0; background: transparent;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  color: var(--muted);
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button {
  border: 0; background: none;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tabs .c { font-family: var(--font-mono); font-size: 12px; margin-left: 4px; }

/* ---------- Forms ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="search"], input:not([type]), select, textarea, .dd-btn {
  width: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 8px 10px;
  min-height: 38px;
}
textarea { resize: vertical; min-height: 76px; }
input:disabled, select:disabled, textarea:disabled, .dd-btn:disabled { background: var(--surface-2); color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.field { grid-column: span 6; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.half { grid-column: span 3; }
.field.third { grid-column: span 2; }
@media (max-width: 520px) { .field.half, .field.third { grid-column: span 6; } .field.third.keep { grid-column: span 3; } }
.field label, .lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.field .hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.req { color: var(--danger); }
.form-section { grid-column: span 6; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.form-error { grid-column: span 6; margin: 0; color: var(--danger); font-weight: 600; font-size: 14px; }
.affix { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; min-width: 0; }
.affix span { padding: 0 2px 0 10px; color: var(--muted); font-size: 14px; }
.affix span.after { padding: 0 10px 0 2px; }
.affix input { border: 0 !important; background: transparent !important; outline: none; min-width: 0; }
.affix:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Project detail ---------- */
.project-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1360px) { .project-layout { grid-template-columns: minmax(0, 1fr) 320px; } .project-layout > .project-aside { position: sticky; top: 20px; } }
.project-aside { display: flex; flex-direction: column; gap: 16px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts > div { background: var(--surface); padding: 10px 14px; min-width: 0; }
.facts .k { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 600; color: var(--muted); }
.facts .v { font-weight: 600; overflow-wrap: anywhere; }
.status-select {
  width: auto;
  min-height: 32px;
  padding: 3px 28px 3px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pc);
  background-color: color-mix(in srgb, var(--pc) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--pc) 40%, transparent);
}

.lines { display: flex; flex-direction: column; }
.line {
  display: grid;
  gap: 8px 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.line:first-child { border-top: 0; }
.line .name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.line .name strong { font-weight: 600; overflow-wrap: anywhere; }
.line .name small { color: var(--muted); font-size: 12.5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.line .total { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line input, .line select, .line .dd-btn { min-height: 34px; padding: 5px 8px; }
.line .affix input { padding: 5px 6px; }
.cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell > .lbl { font-size: 11.5px; }
.line-head { display: none; }

/* Phone: each line is a small card. Wide screens: materiaal and kosten collapse into one row. */
.line { grid-template-columns: minmax(0, 1fr) auto; }
.line .rm { display: flex; gap: 2px; justify-content: flex-end; }
.line .ctrls { display: grid; gap: 8px; align-items: end; min-width: 0; }
.line .issues { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }

.line.eq .name { grid-row: 1; grid-column: 1; }
.line.eq .total { grid-row: 1; grid-column: 2; align-self: start; }
.line.eq .ctrls { grid-row: 2; grid-column: 1; grid-template-columns: 64px minmax(0, 1fr) 78px; }
.line.eq .rm { grid-row: 2; grid-column: 2; align-self: end; }

.line.cost .name { grid-row: 1; grid-column: 1; }
.line.cost .rm { grid-row: 1; grid-column: 2; align-self: end; }
.line.cost .ctrls { grid-row: 2; grid-column: 1; grid-template-columns: 64px minmax(0, 1fr); }
.line.cost .total { grid-row: 2; grid-column: 2; align-self: end; padding-bottom: 8px; }

.line.crew .name { grid-row: 1; grid-column: 1; }
.line.crew .rm { grid-row: 1; grid-column: 2; }
.line.crew .ctrls { grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.line.crew .issues { grid-row: 3; }
.line.crew .c-date { grid-column: span 6; }
.line.crew .c-time, .line.crew .c-time-e { grid-column: span 3; }
.line.crew .c-role, .line.crew .c-person { grid-column: span 6; }
.line.crew .c-rtype, .line.crew .c-rate, .line.crew .c-tot { grid-column: span 4; }
.line.crew .c-tot { align-self: center; }
.line .issues .flag, .line .name .flag { white-space: normal; }
@media (min-width: 760px) {
  .line.crew .ctrls { grid-template-columns: 150px 100px 100px minmax(0, 1fr) minmax(0, 1fr); }
  .line.crew .c-date, .line.crew .c-time, .line.crew .c-time-e, .line.crew .c-role, .line.crew .c-person { grid-column: auto; }
  .line.crew .c-rtype { grid-column: 1; }
  .line.crew .c-rate { grid-column: 2 / span 2; }
  .line.crew .c-tot { grid-column: 4 / span 2; }
  .line.crew .ctrls.has-end { grid-template-columns: 150px 150px 100px 100px minmax(0, 1fr) minmax(0, 1fr); }
  .line.crew .ctrls.has-end .c-tot { grid-column: 4 / span 3; }
}

@media (min-width: 900px) {
  .line-head { display: grid; padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); background: var(--surface-2); gap: 10px; }
  .line.eq .cell > .lbl, .line.cost .cell > .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .line.eq .ctrls, .line.cost .ctrls { display: contents; }
  .line.eq .name, .line.eq .total, .line.eq .rm, .line.eq .ctrls > *,
  .line.cost .name, .line.cost .total, .line.cost .rm, .line.cost .ctrls > * { grid-row: auto; grid-column: auto; }
  .line.eq, .line-head.eq { grid-template-columns: minmax(0, 1fr) 72px 116px 84px 108px 40px; }
  .line.eq .ctrls > * { order: 1; }
  .line.eq .total { order: 2; align-self: center; }
  .line.eq .rm { order: 3; align-self: center; }
  .line.cost, .line-head.cost { grid-template-columns: minmax(0, 1fr) 72px 116px 108px 40px; }
  .line.cost .total { padding-bottom: 0; align-self: center; }
  .line.cost .rm { align-self: center; }
}
.line.has-issue { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.lines-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.lines-foot .sum { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.totals { display: flex; flex-direction: column; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 16px; font-variant-numeric: tabular-nums; }
.totals .grand { border-top: 2px solid var(--fg); margin-top: 4px; padding-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.totals .sub { border-top: 1px solid var(--line); }

/* ---------- Planning grid ---------- */
.plan-wrap { --who-w: 128px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
@media (min-width: 700px) { .plan-wrap { --who-w: 176px; } }
table.plan { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.plan col.who-col { width: var(--who-w); }
.plan th, .plan td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; vertical-align: top; }
.plan thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 2; font-weight: 600; font-size: 12.5px; padding: 6px 4px; text-align: center; }
.plan thead th .dw { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-size: 11.5px; }
.plan thead th .dd { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.plan thead th.today .dd { color: var(--accent-text); }
.plan .who {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
  padding: 8px 10px;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-align: left;
  font-weight: 600;
  font-size: 13.5px;
}
.plan thead .who { z-index: 3; background: var(--surface-2); }
.plan .who small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan .who a { text-decoration: none; }
.plan td.day { height: 46px; }
.plan td.we, .plan th.we { background-color: var(--weekend); }
.plan td.today { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.plan td.off { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 22%, transparent) 0 2px, transparent 2px 7px); }
.plan .cell-btn { display: flex; flex-direction: column; gap: 3px; width: 100%; height: 100%; min-height: 46px; padding: 3px; background: none; border: 0; cursor: pointer; text-align: left; }
.plan .cell-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.plan .off-label { font-size: 11px; font-weight: 600; color: var(--muted); padding: 2px 4px; }
.pchip {
  display: block;
  font-size: 11.5px;
  line-height: 1.25;
  padding: 3px 5px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--fg);
  background: color-mix(in srgb, var(--pc) 20%, var(--surface));
  border-left: 3px solid var(--pc);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pchip b { font-weight: 600; }
.pchip.conflict { --pc: var(--danger); background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.pchip.open { border-left-style: dashed; }
.plan td.bar-cell { padding: 6px 3px; vertical-align: middle; }
.pbar {
  display: flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 5px;
  text-decoration: none;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  background: color-mix(in srgb, var(--pc) 22%, var(--surface));
  border-left: 4px solid var(--pc);
  overflow: hidden;
  white-space: nowrap;
}
.pbar span { overflow: hidden; text-overflow: ellipsis; }
.pbar small { font-weight: 500; color: var(--muted); }
.pbar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dotted; }
.eqcell { display: grid; place-items: center; height: 100%; min-height: 40px; font-family: var(--font-mono); font-size: 13px; cursor: pointer; border: 0; background: none; width: 100%; }
.eqcell.used { background: color-mix(in srgb, var(--st-afgerond) 12%, transparent); font-weight: 600; }
.eqcell.tight { background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.eqcell.short { background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.eqcell.idle { color: var(--muted); opacity: .6; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; background: var(--pc); }
.legend i.box { background: var(--sw); border: 1px solid var(--line-strong); }

/* ---------- Invoice paper ---------- */
.invoice-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1240px) { .invoice-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.paper-wrap { overflow-x: auto; }
/* Compact documents: the real A4 pages (SVG in mm), the same as the PDF. */
.doc-miss { display: flex; gap: 8px; align-items: flex-start; max-width: 820px; margin-bottom: 12px; padding: 10px 12px; white-space: normal; line-height: 1.4; }
.doc-pages { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.doc-page { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; background: #fff; border-radius: 3px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.paper {
  background: #fff;
  color: #15181c;
  border-radius: 4px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 34px 38px 28px;
  max-width: 820px;
  font-size: 13.5px;
  border-top: 6px solid var(--accent);
}
.paper .p-head { display: flex; justify-content: space-between; gap: 20px; }
.paper .p-company { font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.paper .p-addr { text-align: right; color: #5a626d; font-size: 12.5px; line-height: 1.5; }
.paper .p-title { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: .06em; margin: 22px 0 14px; }
.paper .p-parties { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.paper .p-client { line-height: 1.5; }
.paper dl { display: grid; grid-template-columns: auto auto; gap: 3px 18px; margin: 0; font-size: 13px; }
.paper dt { color: #5a626d; }
.paper dd { margin: 0; text-align: right; font-weight: 600; }
.paper table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.paper th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #5a626d; background: #f3f4f6; padding: 7px 8px; }
.paper td { padding: 7px 8px; border-bottom: 1px solid #e5e8ec; vertical-align: top; }
.paper td.n, .paper th.n { text-align: right; white-space: nowrap; }
.paper tr.sec td { font-weight: 700; padding-top: 14px; border-bottom: 1px solid #c9ced6; }
.paper td small { display: block; color: #6b737e; font-size: 11.5px; }
.paper .p-totals { margin-left: auto; width: 280px; margin-top: 12px; }
.paper .p-totals div { display: flex; justify-content: space-between; padding: 4px 8px; }
.paper .p-totals .g { border-top: 2px solid #15181c; font-weight: 700; font-size: 16px; padding-top: 8px; margin-top: 4px; }
.paper .p-note { margin-top: 22px; color: #3a4048; line-height: 1.55; white-space: pre-wrap; }
.paper .p-foot { margin-top: 26px; padding-top: 10px; border-top: 1px solid #e5e8ec; color: #6b737e; font-size: 11.5px; text-align: center; }

/* ---------- Modal ---------- */
.modal-wrap {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 12, 15, .5);
  padding-top: max(24px, env(safe-area-inset-top, 0px));
}
.modal {
  background: var(--surface);
  color: var(--fg);
  width: 100%;
  max-height: 100%;
  display: flex; flex-direction: column;
  border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); }
.modal-head h2 { flex: 1; font-size: 22px; }
.modal-body { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-body p { margin: 0 0 8px; }
.modal-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); background: var(--surface-2); }
@media (min-width: 700px) {
  .modal-wrap { align-items: center; padding: 32px; }
  .modal { width: min(640px, 100%); max-height: calc(100vh - 64px); border-radius: 12px; padding-bottom: 0; }
  .modal.small { width: min(440px, 100%); }
  .modal.wide { width: min(820px, 100%); }
  .modal-foot { border-radius: 0 0 12px 12px; }
}
.pick-list { display: flex; flex-direction: column; margin: 10px -16px 0; }
.pick-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.pick-item .main-col { flex: 1; min-width: 0; }
.pick-item .title { font-weight: 600; overflow-wrap: anywhere; }
.pick-item .sub { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; flex: none; }
.stepper button { width: 34px; height: 34px; border: 0; background: var(--surface-2); cursor: pointer; font-size: 18px; font-weight: 600; }
.stepper span { min-width: 34px; text-align: center; font-family: var(--font-mono); font-size: 14px; }
.stepper.on { border-color: var(--accent); }
.period-list { display: flex; flex-direction: column; gap: 8px; }
.period { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 34px; gap: 8px; align-items: center; }
@media (max-width: 520px) { .period { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; } .period .reason { grid-column: 1 / 3; grid-row: 2; } }

/* ---------- Toast ---------- */
#toast-root {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: min(440px, calc(100% - 32px));
  pointer-events: none;
}
@media (min-width: 900px) { #toast-root { bottom: 24px; } }
.toast {
  background: var(--rail);
  color: #f1f3f5;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-weight: 500;
  font-size: 14px;
  border-left: 4px solid var(--accent);
  animation: toast-in .18s ease-out;
}
.toast.error { border-left-color: #f07a6f; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } * { transition: none !important; } }

/* ---------- Welcome & misc ---------- */
.welcome { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .welcome { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; }
.steps li { counter-increment: s; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps li::before {
  content: counter(s);
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  background: var(--rail); color: var(--accent-rail);
}
.steps li.done::before { content: "✓"; background: var(--ok-bg); color: var(--ok); }
.steps .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.steps .txt p { margin: 0; color: var(--muted); font-size: 14px; }
.two-col { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .two-col { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.copyable { user-select: all; }
.loading { padding: 60px 20px; text-align: center; color: var(--muted); }
.loading .bar { width: 160px; height: 3px; margin: 14px auto 0; background: var(--line); border-radius: 2px; overflow: hidden; position: relative; }
.loading .bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--accent); animation: load 1.1s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .loading .bar::after { animation: none; width: 100%; } }
.sheet-menu { display: flex; flex-direction: column; margin: -8px -16px; }
.sheet-menu a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; font-weight: 600; border-top: 1px solid var(--line); }
.sheet-menu a:first-child { border-top: 0; }
.sheet-user { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 6px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.sheet-user:first-child { border-top: 0; }
.sheet-user b { color: var(--fg); font-size: 15px; }
.sheet-logout { display: flex; align-items: center; gap: 14px; padding: 12px 16px 14px; background: none; border: 0; font: inherit; font-weight: 600; color: var(--danger); cursor: pointer; text-align: left; }
.doc-list .row { padding: 10px 16px; }
.hide-sm { display: none; }
@media (min-width: 700px) { .hide-sm { display: initial; } }
.stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.stack > p { margin: 0; }
.stack > .search, .stack > .chips { align-self: stretch; }
.search.wide { max-width: none; }
.small { font-size: 13px; }
.prewrap { white-space: pre-wrap; margin: 4px 0 0; overflow-wrap: anywhere; }
.range-label { font-family: var(--font-display); font-size: 17px; font-weight: 600; white-space: nowrap; }
.align-start { align-self: flex-start; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--fg); font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
a.flag { text-decoration: none; }
a.flag:hover { text-decoration: underline; }
.paper-wrap { min-width: 0; }
.facts .v a { text-decoration: none; }
.facts .v a:hover { text-decoration: underline; }

/* Invoice preview on a phone: stack the address blocks, drop the optional columns. */
@media (max-width: 640px) {
  .paper { padding: 22px 18px 18px; font-size: 12.5px; }
  .paper .p-head, .paper .p-parties { flex-direction: column; gap: 12px; }
  .paper .p-addr { text-align: left; }
  .paper .p-title { font-size: 26px; margin: 16px 0 10px; }
  .paper .opt { display: none; }
  .paper th, .paper td { padding: 6px 4px; }
  .paper .p-totals { width: 100%; }
}
.paper small.mob-only { display: none; }
@media (max-width: 640px) { .paper small.mob-only { display: block; } }

/* ---------- House style: logo ---------- */
.brand-logo { display: inline-flex; align-items: center; border-radius: 8px; padding: 8px 12px; max-width: 100%; }
.brand-logo img { display: block; max-height: 44px; max-width: 100%; width: auto; height: auto; }
.brand-logo.tone-dark, .logo-preview.tone-dark { background: #ffffff; }
.brand-logo.tone-light, .logo-preview.tone-light { background: #15181c; }
.rail .brand-logo { width: 100%; justify-content: center; }
.mobile-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--fg);
  min-width: 0;
}
.mobile-brand .brand-logo { padding: 6px 10px; border: 1px solid var(--line); }
.mobile-brand .brand-logo img { max-height: 30px; max-width: 200px; }
@media (min-width: 900px) { .mobile-brand { display: none; } }
.logo-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.logo-preview { min-width: 160px; min-height: 64px; max-width: 100%; border: 1px dashed var(--line-strong); border-radius: 8px; display: grid; place-items: center; padding: 10px 14px; }
.logo-preview img { display: block; max-height: 56px; max-width: 240px; }
.color-row { display: flex; flex-direction: column; gap: 6px; }
.color-row input[type="color"] { width: 46px; height: 38px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); cursor: pointer; }
.color-row input.hex { width: 120px; font-family: var(--font-mono); font-size: 14px; }
.paper .p-logo { display: block; max-height: 64px; max-width: 260px; }

.brand-logo.bare { padding: 0; background: none; border: 0; }
.brand-logo .logo-d { display: none; }
/* Stats that act as buttons */
button.stat { font: inherit; color: inherit; text-align: left; cursor: pointer; }
a.stat:hover, button.stat:hover { border-color: var(--line-strong); }

/* Colour swatches (legend keys) */
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--sw, var(--muted)); }
.sw.rv-bev { --sw: var(--chart-bev); } .sw.rv-opt { --sw: var(--chart-opt); }
.sw.seg-open { --sw: var(--ar-open); } .sw.seg-late { --sw: var(--ar-late); } .sw.seg-bill { --sw: var(--ar-bill); }

/* Openstaande facturen */
.dash-money { align-items: stretch; }
.dash-money > .card { display: flex; flex-direction: column; }
.ar { display: flex; flex-direction: column; gap: 14px; }
.ar-total .k { display: block; color: var(--muted); font-size: 13.5px; }
.ar-total .v { display: block; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ar-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ar-item { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; row-gap: 1px; align-items: center; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.ar-item:hover { background: var(--surface-2); }
.ar-item .l { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.ar-item strong, .ar-item small { grid-column: 1 / -1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ar-item small { color: var(--muted); font-size: 12px; }
.ar-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.ar-bar > span { min-width: 6px; border-radius: 4px; }
.ar-bar .seg-open { background: var(--ar-open); } .ar-bar .seg-late { background: var(--ar-late); } .ar-bar .seg-bill { background: var(--ar-bill); }
@media (max-width: 520px) { .ar-legend { grid-template-columns: minmax(0, 1fr); } .ar-item { grid-template-columns: auto 1fr auto; } .ar-item strong { grid-column: 3; grid-row: 1; } .ar-item small { grid-column: 2 / -1; } }

/* Omzet per maand */
.rv { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rv-legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.rv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rv-plot { position: relative; height: 210px; margin-left: 46px; margin-bottom: 22px; }
.rv-grids { position: absolute; inset: 0; pointer-events: none; }
.rv-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.rv-grid span { position: absolute; right: calc(100% + 6px); top: -8px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.rv-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; border-radius: 4px; }
.rv-col:hover, .rv-col:focus-visible { background: color-mix(in srgb, var(--fg) 5%, transparent); outline: none; }
.rv-col.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rv-stack { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: min(70%, 22px); height: 100%; }
.rv-stack > span { display: block; min-height: 2px; }
.rv-stack .rv-bev { background: var(--chart-bev); border-radius: 0 0 1px 1px; }
.rv-stack .rv-opt { background: var(--chart-opt); }
.rv-stack > span:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.rv-x { position: absolute; top: calc(100% + 4px); font-size: 11.5px; color: var(--muted); white-space: nowrap; line-height: 1; }
.rv-x small { margin-left: 2px; font-size: 10px; }
.rv-col.on .rv-x { color: var(--fg); font-weight: 700; }
.rv-tip { display: none; position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 168px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); text-align: left; font-size: 12.5px; pointer-events: none; }
.rv-tip > strong { display: block; margin-bottom: 4px; font-size: 13px; }
.rv-tip > span { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.rv-tip > span b { margin-left: auto; color: var(--fg); font-variant-numeric: tabular-nums; }
.rv-tip > span.t { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; color: var(--fg); }
.rv-col:hover .rv-tip, .rv-col:focus-visible .rv-tip { display: block; }
.rv { container-type: inline-size; }
@container (max-width: 520px) { .rv-x { font-size: 10.5px; } .rv-x small { display: none; } .rv-col:nth-child(even) .rv-x { visibility: hidden; } .rv-col.on .rv-x { visibility: visible; } }
.rv-col:nth-child(-n+2) .rv-tip { left: 0; transform: none; }
.rv-col:nth-last-child(-n+2) .rv-tip { left: auto; right: 0; transform: none; }
@media (hover: none) { .rv-col:hover .rv-tip { display: none; } }

/* Maandoverzicht */
.month-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.month-sum > div { background: var(--surface); padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.month-sum .k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 600; color: var(--muted); }
.month-sum .v { font-family: var(--font-display); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.month-sum .s { font-size: 12.5px; color: var(--muted); }
@media (max-width: 520px) { .month-sum { grid-template-columns: minmax(0, 1fr); } .month-sum > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; } .month-sum .v { font-size: 19px; margin-left: auto; } .month-sum .s { flex-basis: 100%; } }

/* Subprojecten */
.sub-card .card-head { flex-wrap: wrap; }
.sub-pick { max-width: min(100%, 340px); min-width: 0; flex: 1 1 200px; }
.sub-list { max-height: 420px; overflow: auto; }
.sub-detail { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.sub-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sub-title h3 { font-size: 18px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sub-facts .status-select { width: 100%; }
.sub-notes { margin: 0; }
.group-head.sub-head { color: var(--fg); background: var(--surface-2); padding-top: 10px; padding-bottom: 8px; }
.status-derived { display: inline-flex; align-items: center; }
.line.in-set { opacity: .82; }
.bill-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.check-row { cursor: pointer; }
.check-row input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.check-row .money { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Functies */
.fn-badge { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); color: var(--fg); }
.fn-badge svg.i { width: 18px; height: 18px; }

/* Folding cards and groups */
.fold-btn { margin-left: 4px; }
.card.folded > :not(.card-head) { display: none !important; }
.card.folded > .card-head { border-bottom: 0; }
/* Folded: shorter, never narrower (Tom, 9-11: "anders verandert het beeld steeds"). In a grid start keeps the card
   short next to a long one; width 100% keeps it as wide as before in a column (Instellingen went from 920 to 176 px). */
.card.folded { align-self: start; width: 100%; }
.fold-head { padding-top: 10px; }
.fold { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.fold svg.i { width: 14px; height: 14px; }
.fold-empty { padding: 4px 16px 12px; margin: 0; }

/* Collapsible menu (desktop) */
.rail-toggle { display: none; align-items: center; gap: 8px; background: none; border: 0; color: inherit; font: inherit; padding: 6px 4px; cursor: pointer; border-radius: 6px; text-align: left; }
.rail-toggle:hover { background: var(--rail-active); color: #fff; }
.rail-toggle svg.i { width: 16px; height: 16px; flex: none; }
.rail-user { display: flex; flex-direction: column; gap: 1px; padding: 8px 4px 2px; border-top: 1px solid rgba(255, 255, 255, .08); }
.rail-user b { color: #f1f3f5; font-size: 13px; font-weight: 600; }
.rail-foot .rail-logout { margin: 6px 0 8px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .22); color: #f1f3f5; font-size: 14px; font-weight: 600; justify-content: center; }
.rail-foot .rail-logout svg.i { width: 18px; height: 18px; }
body.rail-small .rail-foot .rail-logout { padding: 8px; }
/* Menu inklappen sits at the top of the foot, Uitloggen at the very bottom with its own icon (8-11). */
.rail-foot .rail-menu { margin-bottom: 8px; }
.rail-foot .rail-logout:hover { border-color: #e5484d; color: #ffb4b4; }
@media (min-width: 900px) {
  .rail-toggle { display: inline-flex; }
  body.rail-small { --rail-w: 68px; }
  body.rail-small .nav a span, body.rail-small .nav-label, body.rail-small .rail-foot > span, body.rail-small .rail-toggle span { display: none; }
  body.rail-small .nav a { justify-content: center; padding-left: 0; padding-right: 0; }
  body.rail-small .rail .brand { font-size: 0; justify-content: center; }
  body.rail-small .rail .brand-logo img { max-width: 44px; }
  body.rail-small .rail-foot { align-items: center; }
}

/* Search-as-you-type */
.combo { position: relative; }
.combo input[type="text"], .combo input:not([type]) { width: 100%; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; }
.combo-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: inherit; text-decoration: none; }
.combo-item small { color: var(--muted); font-size: 12px; }
.combo-item:hover, .combo-item.on { background: var(--surface-2); }
.combo-item.combo-new, .combo-item.combo-maps { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; border-top: 1px solid var(--line); margin-top: 2px; font-weight: 600; }
.combo-item.combo-maps small { flex-basis: 100%; padding-left: 24px; font-weight: 400; }
.combo-item svg.i { width: 16px; height: 16px; }
/* Dropdown in the app's own look (enhanceSelect, Tom 1-11): the select stays in the page out of sight. */
.dd-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
button:where(.dd-btn) { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; text-align: left; cursor: pointer; }
.dd-btn .dd-text { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.dd-btn .dd-text > span { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn .dd-sz { visibility: hidden; height: 0; }
.dd-btn .dd-chev { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .12s ease; }
.dd-btn[aria-expanded="true"] { border-color: var(--accent); }
.dd-btn[aria-expanded="true"] .dd-chev { transform: rotate(180deg); }
button:where(.dd-btn):disabled { background: var(--surface-2); color: var(--muted); cursor: default; }
.dd-pop { position: fixed; z-index: 65; display: flex; flex-direction: column; max-width: min(420px, calc(100vw - 16px)); background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.dd-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.dd-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.dd-item > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.dd-item svg.i, .dd-tick { flex: none; width: 16px; height: 16px; }
.dd-item svg.i { color: var(--accent); }
.dd-item.on { background: var(--surface-2); }
.dd-item[aria-selected="true"] { font-weight: 600; }
.dd-item.off { color: var(--muted); cursor: default; }
.dd-group { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dd-search { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.dd-search svg.i { flex: none; width: 16px; height: 16px; color: var(--muted); }
.dd-search input[type="search"] { border: 0; background: transparent; padding: 4px 0; min-height: 30px; }
.dd-search input[type="search"]:focus-visible { outline: none; }
.dd-none { padding: 10px; }
.dd-shade { position: fixed; inset: 0; z-index: 64; background: rgba(10, 12, 15, .45); }
.dd-pop.dd-sheet { left: 0; right: 0; bottom: 0; top: auto; max-width: none; max-height: 70vh; border-width: 1px 0 0; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.dd-sheet .dd-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px 16px; }
.dd-sheet .dd-head strong { flex: 1; font-size: 16px; }
.dd-sheet .dd-search { padding: 6px 16px; }
.dd-sheet .dd-search input[type="search"] { font-size: 16px; }
.dd-sheet .dd-list { padding: 4px 8px 8px; }
.dd-sheet .dd-item { min-height: 46px; padding: 10px 10px; }
.color-pick { display: flex; align-items: center; gap: 10px; }
.color-pick input[type="color"] { width: 48px; height: 34px; padding: 2px; border-radius: 6px; }
.map-link { display: inline-block; margin-top: 2px; }

/* Crew folders */
.group-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.group-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; }
.row-inline { display: flex; gap: 8px; }
.row-inline input { flex: 1; min-width: 0; }

/* Project calendar */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cal-head strong { font-family: var(--font-display); font-size: 19px; min-width: 150px; text-align: center; }
.cal { overflow-x: auto; }
.cal-dow, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 340px; }
.cal-dow span { padding: 8px 10px; font-family: var(--font-display); font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.cal-dow i { display: none; font-style: normal; }
.cal-week { grid-template-rows: 30px repeat(var(--lanes), 24px) 10px; row-gap: 3px; border-bottom: 1px solid var(--line); position: relative; }
.cal-day { grid-row: 1 / -1; border-left: 1px solid var(--line); padding: 4px 8px; font-size: 13px; color: var(--fg); }
.cal-day:first-child { border-left: 0; }
.cal-day span { display: inline-flex; align-items: baseline; gap: 6px; }
.cal-day small { color: var(--muted); font-size: 11px; }
.cal-day.out { color: var(--muted); background: color-mix(in srgb, var(--fg) 3%, transparent); }
.cal-day.today span { color: var(--accent-text); font-weight: 700; }
/* Today stands out at a glance: a light ring in dark mode, a dark one in light mode (Tom, 30-10). */
.cal-day.today { position: relative; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.cal-day.today::after { content: ''; position: absolute; inset: 1px; border: 2px solid color-mix(in srgb, var(--fg) 85%, transparent); border-radius: 5px; pointer-events: none; z-index: 2; }
.today-line { display: flex; align-items: center; gap: 10px; padding: 6px 16px; color: color-mix(in srgb, var(--fg) 90%, transparent); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.today-line::before, .today-line::after { content: ''; flex: 1 1 auto; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--fg) 85%, transparent); }
.today-line::before { flex: 0 0 18px; }
.date-stub.is-today { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg) 85%, transparent); }
.cal-bar { position: relative; z-index: 1; display: block; margin: 0 2px; padding: 3px 8px; border-radius: 4px; background: var(--bar); color: var(--bar-ink); font-size: 12.5px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--bar-ink) 35%, transparent); }
.cal-bar:hover { filter: brightness(1.08); }
.cal-bar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; box-shadow: none; }
.cal-bar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.cal-bar.st-optie { outline: 2px dashed color-mix(in srgb, var(--bar-ink) 70%, transparent); outline-offset: -3px; }
.cal-bar.st-concept { opacity: .75; }
@media (max-width: 640px) {
  .cal-dow b { display: none; } .cal-dow i { display: inline; }
  .cal-week { grid-template-rows: 26px repeat(var(--lanes), 20px) 8px; }
  .cal-bar { font-size: 11px; line-height: 14px; padding: 3px 4px; }
  .cal-day { padding: 3px 4px; font-size: 12px; }
  .cal-day small { display: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo .logo-l { display: none; }
  :root:not([data-theme="light"]) .brand-logo .logo-d { display: block; }
}
:root[data-theme="dark"] .brand-logo .logo-l { display: none; }
:root[data-theme="dark"] .brand-logo .logo-d { display: block; }
.rail .brand-logo.bare { justify-content: flex-start; padding: 2px 4px; }
.rail .brand-logo.bare img { max-height: 72px; }
.mobile-brand .brand-logo.bare { border: 0; padding: 0; }
.mobile-brand .brand-logo.bare img { max-height: 44px; }

/* ---------- Import ---------- */
.imp-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.imp-file { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.imp-file > span { display: inline-flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.imp-file select, .imp-file .dd-btn { width: auto; }
.imp-map { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.imp-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
.imp-row:first-child { border-top: 0; }
.imp-row label { font-weight: 600; font-size: 14px; }
.imp-row select, .imp-row .dd-btn { min-height: 34px; padding: 5px 8px; }
.imp-ex { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .imp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .imp-ex { grid-column: 1 / -1; margin-top: -4px; }
}
.imp-summary { padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.progress { width: 100%; height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.table-wrap { width: 100%; overflow-x: auto; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mini-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mini-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.stack > .field { align-self: stretch; }
.field > .seg { align-self: flex-start; }

/* ---------- Round 2: material groups, timeline, side panel, crew places, staffels ---------- */
.tabs-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding-right: 8px; }
.tabs-row .tabs { border-bottom: 0; flex: 1; min-width: 0; }
.panel-show { flex: 0 0 auto; }

/* Material groups (like Rentman's groups), each with its own period and factor */
.eq-group { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.lines > .eq-group:first-child, .lines > .group-head + .eq-group { border-top: 0; }
.grp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 12px 9px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.grp-title { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.grp-title strong { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.grp-meta { grid-column: 1; overflow-wrap: anywhere; }
.grp-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 2px; }
.grp-head.targeted { box-shadow: inset 3px 0 0 var(--accent); }
.grp-empty { margin: 0; padding: 12px 16px; }
.eq-group > .line:first-of-type { border-top: 0; }
.icon-btn.on { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); color: var(--accent-text); }

/* Drop targets while dragging from the side panel */
.drop-over { outline: 2px dashed var(--accent); outline-offset: -3px; background: color-mix(in srgb, var(--accent) 9%, transparent); }
body.drag-eq [data-drop-group], body.drag-fn [data-drop-crew], body.drag-crew [data-drop-crew] { transition: background .1s; }

/* Timeline (tijdschema) */
.timeline-card .phase-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 14px; }
.phase-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--surface-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.phase-item strong { font-weight: 600; }
.phase-box { display: flex; flex-direction: column; gap: 8px; }
.phase-box .lbl { font-weight: 600; }
.phase-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 6px; align-items: center; }
.phase-row input { min-height: 36px; padding: 5px 8px; min-width: 0; }
.phase-sum { margin: 0; font-variant-numeric: tabular-nums; }
.align-start { align-self: flex-start; }
@media (max-width: 560px) {
  .phase-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .phase-row .ph-name { grid-column: 1 / 3; }
  .phase-row .ph-start { grid-column: 1; grid-row: 2; }
  .phase-row .ph-end { grid-column: 2; grid-row: 2; }
  .phase-row .icon-btn { grid-column: 3; grid-row: 1; }
}

/* Crew line: function, number of people, one select per place */
.line.crew.targeted { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.line.crew .c-role { grid-column: span 8; }
.line.crew .c-qty { grid-column: span 4; }
.line.crew .c-phase { grid-column: span 12; }
.line.crew .c-people { grid-column: 1 / -1; }
.line-actions { display: flex; gap: 2px; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { flex: 1 1 190px; min-width: 0; border-radius: 6px; display: flex; align-items: center; gap: 2px; }
.slot select, .slot .dd-btn { width: 100%; flex: 1 1 auto; min-width: 0; }
.slot-x { flex: 0 0 auto; width: 30px; height: 30px; color: var(--muted); }
.slot-x:hover { color: var(--danger); }
/* While a person is dragged, every place on a crew line shows that you can drop on it. */
body.drag-crew .slot { outline: 1px dashed var(--line-strong); outline-offset: 2px; }
body.drag-crew .slot.drop-over { outline: 2px dashed var(--accent); }
.slot.open select, .slot.open .dd-btn { border-style: dashed; color: var(--muted); background-color: transparent; }
.slot.bad select, .slot.bad .dd-btn { border-color: var(--danger); color: var(--danger); }
.slot.extra select, .slot.extra .dd-btn { opacity: .7; }
@media (min-width: 760px) {
  .line.crew .ctrls, .line.crew .ctrls.has-end { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .line.crew .c-date { grid-column: span 3; }
  .line.crew .c-time, .line.crew .c-time-e { grid-column: span 2; }
  .line.crew .c-role { grid-column: span 3; }
  .line.crew .c-qty { grid-column: span 2; }
  .line.crew .ctrls.has-end .c-date { grid-column: span 2; }
  .line.crew .ctrls.has-end .c-role { grid-column: span 3; }
  .line.crew .ctrls.has-end .c-qty { grid-column: span 1; }
  .line.crew .c-phase, .line.crew .c-rtype, .line.crew .c-rate { grid-column: span 3; }
  .line.crew .c-tot, .line.crew .ctrls.has-end .c-tot { grid-column: span 3; }
  .line.crew .c-people { grid-column: 1 / -1; }
}

/* Side panel: a column on wide screens, a sheet from below on phones and tablets */
.add-panel { display: none; flex-direction: column; gap: 10px; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.ap-head { display: flex; align-items: center; gap: 8px; }
.ap-head strong { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.ap-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.ap-tabs button { border: 0; background: transparent; padding: 7px 4px; border-radius: 6px; font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; }
.ap-tabs button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.ap-search { width: 100%; flex: 0 0 auto; }
.ap-target { line-height: 1.35; }
.ap-target b { color: var(--fg); font-weight: 600; }
.ap-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -6px; padding: 0 6px; }
.ap-sec { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 4px 4px; }
.ap-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 8px; border-radius: 6px; cursor: grab; }
.ap-item:hover { background: var(--surface-2); }
.ap-item:active { cursor: grabbing; }
.ap-item .main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-item .title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.ap-item .sub { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ap-none { padding: 8px 4px; }
/* Folders in the side panel: shut by default, subfolders indented. */
.ap-list > .fold-sec + .fold-sec, .ap-list .fold-body > .fold-sec + .fold-sec { border-top: 1px solid var(--line); }
.ap-list .group-head.ap-fold { padding: 9px 4px 7px; border-top: 0; font-size: 12px; letter-spacing: .1em; align-items: center; color: var(--fg); }
.ap-list .fold-body > .fold-sec > .group-head.ap-fold { color: var(--muted); letter-spacing: .06em; }
.ap-list .group-head.ap-fold:hover { background: var(--surface-2); border-radius: 6px; }
.ap-list .ap-n { margin-left: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--muted); }
.ap-list .fold-sec > .fold-body { padding-left: 10px; padding-bottom: 4px; }
.sheet-scrim { position: fixed; inset: 0; background: rgba(8, 10, 12, .4); z-index: 44; }
@media (max-width: 1279px) {
  .add-panel.open { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: min(78vh, 640px); border-radius: 14px 14px 0 0; border-bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); }
}
@media (min-width: 1280px) {
  .main-inner:has(.project-layout.has-panel:not(.panel-closed)) { max-width: 1640px; }
  .project-layout.has-panel:not(.panel-closed) { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .project-layout.has-panel:not(.panel-closed) > .add-panel { display: flex; grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky; top: 20px; max-height: calc(100vh - 40px); }
  .project-layout.has-panel:not(.panel-closed) > .proj-main { grid-column: 2; grid-row: 1; }
  .project-layout.has-panel:not(.panel-closed) > .project-aside { grid-column: 2; grid-row: 2; }
  .project-layout.has-panel:not(.panel-closed) .panel-show { display: none; }
  .sheet-scrim { display: none; }
}
@media (min-width: 1720px) {
  .project-layout.has-panel:not(.panel-closed) { grid-template-columns: 280px minmax(0, 1fr) 300px; }
  .project-layout.has-panel:not(.panel-closed) > .project-aside { grid-column: 3; grid-row: 1; position: sticky; top: 20px; }
}

/* Staffel editor */
.st-rows { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.st-row { display: grid; grid-template-columns: 62px auto 62px auto 76px auto 34px; justify-content: start; gap: 6px 8px; align-items: center; font-size: 13.5px; color: var(--muted); }
.st-row input { min-height: 34px; padding: 4px 8px; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }

.modal [data-ph-form] .phase-box > .lbl { display: none; }
.timeline-card.empty-tl .card-head { border-bottom: 0; }
.tl-per { font-variant-numeric: tabular-nums; }
/* The timeline, edited in place: name | bar on a time axis | begin – end | delete. */
.tl-grid { display: grid; grid-template-columns: minmax(110px, 160px) minmax(160px, 1fr) auto auto; column-gap: 12px; padding: 6px 16px 12px; }
.tl-row { display: contents; }
.tl-row > * { align-self: center; padding: 4px 0; }
.tl-name { min-height: 34px; padding: 4px 8px; font-weight: 600; }
.tl-axis { position: relative; height: 22px; border-bottom: 1px solid var(--line); }
.tl-tick, .tl-hour { position: absolute; top: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; padding-left: 3px; border-left: 1px solid var(--line); line-height: 20px; font-variant-numeric: tabular-nums; }
.tl-tick.we { color: var(--fg); background: color-mix(in srgb, var(--line) 35%, transparent); }
.tl-hour { border-left-style: dotted; opacity: .8; }
.tl-when-h { align-self: end; padding-bottom: 4px; }
.tl-track { position: relative; height: 30px; border-radius: 6px; background-color: var(--surface-2);
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / var(--n, 1)) 100%; }
.tl-bar { position: absolute; top: 3px; bottom: 3px; min-width: 16px; border-radius: 5px; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.tl-bar.dragging { cursor: grabbing; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.tl-grid[data-ro] .tl-bar { cursor: default; }
.tl-lbl { flex: 1 1 auto; min-width: 0; padding: 0 8px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; pointer-events: none; }
.tl-h { flex: 0 0 auto; align-self: stretch; width: 9px; cursor: ew-resize; touch-action: none; }
.tl-h.l { border-left: 3px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); }
.tl-h.r { border-right: 3px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); }
.tl-when { display: flex; align-items: center; gap: 4px; }
.tl-when input { width: auto; min-height: 34px; padding: 3px 6px; font-variant-numeric: tabular-nums; }
.tl-when input[type="date"] { width: 138px; }
.tl-when input[type="time"] { width: 92px; }
.tl-dash { color: var(--muted); padding: 0 2px; }
@media (max-width: 1100px) {
  .tl-grid { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .tl-row { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding: 8px 0; border-top: 1px solid var(--line); }
  .tl-row > * { padding: 0; }
  .tl-axis-row { border-top: 0; padding-bottom: 0; }
  .tl-axis-row > span { display: none; }
  .tl-axis, .tl-track, .tl-when { grid-column: 1 / -1; }
  .tl-name { grid-column: 1; }
  .tl-acts { grid-column: 2; grid-row: 1; }
  .tl-when { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .tl-when input[type="date"] { width: 132px; }
  .tl-when input[type="time"] { width: 84px; }
}
@media (max-width: 520px) { .hide-xs { display: none; } .panel-show { padding-left: 8px; padding-right: 8px; } }
@media (max-width: 520px) {
  .line.crew input[type="time"] { padding-left: 6px; padding-right: 4px; }
  .line.crew input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
}

/* Delete buttons are red, so they are easy to find */
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { color: var(--danger); background: var(--danger-bg); }
/* Project category tag and filter */
.flag.cat { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.eyebrow .flag.cat { margin-left: 8px; vertical-align: middle; }
.cat-pick { width: auto; min-height: 36px; }
.card-pad .row-inline { align-items: center; }
/* Rental period over a range of phases */
.tl-use { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 16px 14px; }
.tl-use .lbl { font-weight: 600; font-size: 13.5px; }
.tl-use label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.tl-use select, .tl-use .dd-btn { width: auto; min-height: 32px; padding: 3px 28px 3px 8px; }
.staffel-sum { margin: -4px 0 0; font-variant-numeric: tabular-nums; }
/* Crew line: phase range and day calculation */
.line.crew .c-phase { grid-column: span 6; }
.line.crew .c-calc { grid-column: span 12; }
@media (min-width: 760px) {
  .line.crew .ctrls.has-ph .c-phase, .line.crew .ctrls.has-ph .c-rtype, .line.crew .ctrls.has-ph .c-rate { grid-column: span 2; }
  .line.crew .c-calc { grid-column: span 4; }
  .line.crew .ctrls.has-ph .c-tot { grid-column: span 3; }
}
.cat-color { flex: 0 0 38px !important; width: 38px; height: 36px; padding: 2px; border-radius: 7px; cursor: pointer; }
.linklike { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); text-decoration: underline; cursor: pointer; }
/* Templates on the paper preview */
.paper tr.part td { font-family: var(--font-display); font-weight: 700; font-size: 17px; padding-top: 18px; color: #15181c; }
.paper tr.ptot td { font-weight: 700; text-align: right; border-top: 1px solid #15181c; padding-top: 6px; }
.paper tr.ptot td.n { text-align: right; }
.paper tr.pbreak td { padding: 10px 0 4px; text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a929c; border-bottom: 1px dashed #b9c0c9; }
.p-intro { margin: 0 0 14px; white-space: pre-wrap; }
/* Category rows with their templates */
.cat-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cat-row:last-of-type { border-bottom: 0; }
.cat-tpl { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-left: 46px; }
.cat-tpl label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cat-tpl select, .cat-tpl .dd-btn { width: auto; min-height: 32px; padding: 3px 28px 3px 8px; }
/* Holidays and absence */
.plan td.off-vakantie { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st-afgerond) 26%, transparent) 0 2px, transparent 2px 7px); }
.plan td.off-ziek { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 18%, transparent) 0 2px, transparent 2px 7px); }
.plan .off-label.t-vakantie { color: var(--st-afgerond); }
.legend .lg-off i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st-afgerond) 45%, transparent) 0 2px, transparent 2px 5px); border: 1px solid color-mix(in srgb, var(--st-afgerond) 50%, transparent); }
.cal-bar.cal-abs { border: 1px dashed color-mix(in srgb, var(--st-afgerond) 60%, transparent); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st-afgerond) 16%, var(--surface)) 0 4px, var(--surface) 4px 9px); color: var(--fg); box-shadow: none; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.abs-card .row .side .flag { white-space: nowrap; }
.check.small { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.period { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 34px; }
@media (max-width: 520px) {
  .period { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
  .period select, .period .dd-btn { grid-column: 1; grid-row: 2; }
  .period .reason { grid-column: 2 / 4; grid-row: 2; }
}
/* Client window: overview per year */
.client-facts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.year-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.year-table th, .year-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.year-table thead th { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); }
.year-table .n { text-align: right; }
.year-table tbody th { font-weight: 700; }
.client-projects { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.client-projects .money.small { font-size: 13px; }
/* Without financial rights: no prices, rates or totals in the lines */
body.no-fin .line.eq .ctrls > .cell:not(:first-child), body.no-fin .line.eq .total,
body.no-fin .line-head.eq span:nth-child(n+3), body.no-fin .line-head.eq span:last-child,
body.no-fin .line.crew .c-rtype, body.no-fin .line.crew .c-rate, body.no-fin .line.crew .c-calc, body.no-fin .line.crew .c-tot,
body.no-fin .lines-foot .sum, body.no-fin .row .side .money, body.no-fin .group-head .sum:not(.gmeta) { display: none !important; }
@media (min-width: 900px) { body.no-fin .line.eq, body.no-fin .line-head.eq { grid-template-columns: minmax(0, 1fr) 90px 40px; } }
/* Accounts */
.acc-how p { margin: 0 0 8px; line-height: 1.5; }
.acc-nomail { margin: 0 16px 12px; }
.avg-card p { margin: 0; line-height: 1.5; }
.avg-list ul { margin: 8px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; line-height: 1.6; }
.acc-table td .flag.warn { display: inline-block; margin-top: 4px; }
.banner.my-mail { margin-bottom: 16px; }
.banner.my-mail > span { flex: 1 1 260px; }
.banner.my-mail .btn { margin-left: 0; }
.acc-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.acc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.acc-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 8px 12px; background: var(--surface-2); }
.acc-table td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.acc-table td small { display: block; color: var(--muted); font-size: 12.5px; }
.acc-table select, .acc-table .dd-btn { width: auto; min-height: 34px; }
.acc-add select, .acc-add .dd-btn { flex: 0 0 auto; width: auto; }
.acc-act { white-space: nowrap; }
.acc-joins .row-inline { align-items: center; flex-wrap: wrap; }
.acc-joins .grow { flex: 1 1 160px; font-weight: 600; }
.acc-joins select, .acc-joins .dd-btn { width: auto; }

/* ---------- Test login ---------- */
body.login-screen .rail, body.login-screen .tabbar, body.login-screen .mobile-brand, body.login-screen #banner { display: none !important; }
body.login-screen .app { display: block; }
body.login-screen .main { padding-bottom: 32px; }
.login-wrap { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: grid; place-items: center; padding: 16px 0; }
.login-card { width: 100%; max-width: 380px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.login-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--fg); }
.login-brand .brand-logo img { max-height: 40px; max-width: 220px; }
.login-card h1 { font-size: 30px; margin: 4px 0 0; }
.login-card .btn-primary { width: 100%; min-height: 44px; }
.login-card .btn-ghost { align-self: center; }
.login-card > .hint { text-align: center; }
.moved-card p { margin: 0; line-height: 1.5; }
.moved-card .btn-primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.login-bar { flex-wrap: nowrap; padding: 6px 6px 6px 14px; }
.login-bar > span { min-width: 0; }
.login-bar b { color: var(--fg); }
.login-bar .btn { flex: none; }
.acc-act select, .acc-act .dd-btn { max-width: 200px; }

/* ---------- Sections that fold shut ---------- */
.fold-sec.shut > .fold-body { display: none; }
.fold-head .fold { flex: 1 1 auto; min-width: 0; text-align: left; }
.fold-sec > .fold-head .fold svg.i, .fold-sec > .grp-head .fold svg.i { transition: transform .12s ease; }
.fold-sec.shut > .fold-head .fold svg.i, .fold-sec.shut > .grp-head .fold svg.i { transform: rotate(-90deg); }
.grp-fold { gap: 8px; text-align: left; }
.grp-fold strong { overflow-wrap: anywhere; }
.list > .fold-sec:first-child > .group-head, .lines > .fold-sec:first-child > .group-head { border-top: 0; }
.fold-sec > .fold-body > .line:first-child { border-top: 1px solid var(--line); }
.eq-group > .fold-body > .line:first-child, .fold-body > .eq-group:first-child { border-top: 0; }
.eq-group.fold-sec.shut > .grp-head { border-bottom: 0; }
.fold-all { flex: 0 0 auto; }
@media (max-width: 520px) { .fold-all { padding-left: 8px; padding-right: 8px; } }


/* Equipment folders: own material and rented-in material, with the categories inside */
.group-head.folder-head { color: var(--fg); background: var(--surface-2); font-size: 14px; padding-top: 12px; padding-bottom: 10px; }
.fold-body > .fold-sec > .cat-head { padding-left: 30px; }
.fold-body > .fold-sec > .fold-body > .row { padding-left: 30px; }

/* Settings, split into tabs */
.set-tabs { margin-top: -4px; flex-wrap: wrap; overflow: visible; row-gap: 0; }
.set-tabs-row { display: flex; align-items: flex-end; gap: 8px; }
.set-tabs-row .set-tabs { flex: 1 1 auto; min-width: 0; }
.set-tabs-row .fold-all { margin-bottom: 6px; flex: 0 0 auto; }
/* In the narrow side panel the button is just the arrow (its title says what it does). */
.ap-head .fold-all span { display: none; }
.ap-head .fold-all { padding-left: 6px; padding-right: 6px; }
.settings-body { display: flex; flex-direction: column; gap: 16px; max-width: 920px; min-width: 0; }

/* Light / dark choice per device */
.theme-pick { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.theme-pick button { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.theme-pick button svg.i { width: 15px; height: 15px; }
.theme-pick button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.rail-foot .theme-pick { align-self: stretch; justify-content: space-between; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); margin-bottom: 4px; }
.rail-foot .theme-pick button { color: var(--rail-fg); padding: 5px 6px; }
.rail-foot .theme-pick button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.rail-foot .theme-pick button span { display: none; }
.rail-foot .theme-pick button[aria-pressed="true"] span { display: inline; }
body.rail-small .rail-foot .theme-pick { display: inline-flex; flex-direction: column; align-self: center; }
body.rail-small .rail-foot .theme-pick button[aria-pressed="true"] span { display: none; }
.sheet-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); font-weight: 600; }
.login-theme { align-self: center; }
/* NL | EN: the same switch as light/dark, two equal buttons. */
.lang-pick button { justify-content: center; min-width: 34px; font-weight: 600; letter-spacing: .02em; }
.rail-foot .lang-pick button { flex: 1; }
.login-lang { align-self: center; }

/* ---------- Unsaved changes on an open project ---------- */
.save-bar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 45; /* above the tab bar, below dialogs */
  width: min(640px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px 10px 16px;
  background: var(--surface);
  border: 1px solid var(--warn);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.save-bar[hidden] { display: none; }
.save-bar-text { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 200px; font-weight: 600; color: var(--warn); }
.save-bar-text svg.i { width: 18px; height: 18px; flex: none; }
.save-bar-btns { display: flex; gap: 8px; margin-left: auto; }
body.has-save-bar .main-inner { padding-bottom: 88px; }
body.has-save-bar #toast-root { bottom: calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .save-bar { left: calc(var(--rail-w) + (100% - var(--rail-w)) / 2); bottom: 20px; }
  body.has-save-bar #toast-root { bottom: 92px; }
}
@media (max-width: 520px) { .save-bar-btns { width: 100%; } .save-bar-btns .btn { flex: 1; justify-content: center; } }
.danger-text { color: var(--danger); }

/* ---------- Opened from the home screen (iPhone) ---------- */
/* The page runs under the status bar (black-translucent): a strip in the menu colour behind the clock, and the content below it. */
.is-standalone body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  height: env(safe-area-inset-top, 0px);
  background: var(--rail);
  pointer-events: none;
}
.is-standalone .main { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
@media (min-width: 900px) {
  .is-standalone .main { padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
  .is-standalone .rail { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
}
.rail-foot .rail-cal { margin: 4px 0 0; padding: 6px 10px; font-size: 13px; }
.sheet-cal { color: inherit; }
.mail-log { display: grid; gap: 4px; }
.mail-log p { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--muted, inherit); }
.mail-log svg.i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.cal-list { display: grid; gap: 8px; margin: 4px 0 8px; }
.cal-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.cal-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-row small { color: var(--muted); font-size: 12px; }
.cal-dav { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cal-dav h3 { margin: 0; font-size: 15px; }
.cal-steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.phone-tag { background: var(--accent-soft, rgba(67, 154, 134, .15)); }
.mail-hint { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.mail-hint svg.i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.sig-list { display: grid; gap: 14px; }
.sig-row { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sig-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sig-head { display: flex; gap: 8px; align-items: baseline; }
.sig-head small { color: var(--muted); }
.sig-preview { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-height: 40px; display: flex; align-items: center; }
.sig-preview img { max-width: 100%; height: auto; max-height: 120px; display: block; }
.cal-kv { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.cal-kv span { min-width: 110px; color: var(--muted); }
.cal-kv b { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Taken: a row per task, subtasks indented below it; who checked it off and when on the right. */
.todo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 9px 16px 9px calc(16px + var(--depth, 0) * 26px); border-top: 1px solid var(--line); }
.fold-body > .todo:first-child { border-top: 0; }
.todo.sub { background: color-mix(in srgb, var(--fg) 2%, transparent); }
.todo-check { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 260px; min-width: 0; cursor: pointer; }
.todo-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.todo-title { font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.todo.sub .todo-title { font-weight: 500; }
.todo.done .todo-title { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; }
.todo-count { font-family: var(--font-mono); color: var(--muted); }
.todo-count.all { color: var(--accent-text); }
.todo-by { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); }
.todo-by svg.i { width: 14px; height: 14px; }
.todo-link { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.todo-acts { display: flex; gap: 2px; margin-left: auto; }
.todo-acts .icon-btn { width: 30px; height: 30px; opacity: .75; }
.todo-acts .icon-btn:hover { opacity: 1; }
.todo-notes { flex: 1 1 100%; padding-left: 28px; }
.todo-rules { margin-top: 16px; }
@media (max-width: 640px) { .todo { padding-left: calc(12px + var(--depth, 0) * 18px); padding-right: 10px; } .todo-acts { margin-left: 0; } }
.todo-proj-hint { margin: 0; padding: 12px 16px 14px; }
/* Afspraken in de agenda */
:root { --st-afspraak: #0f7f91; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-afspraak: #5cc7d6; } }
:root[data-theme="dark"] { --st-afspraak: #5cc7d6; }
.st-afspraak { --pc: var(--st-afspraak); }
.appt-row { cursor: pointer; }
.appt-row .title .i { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--st-afspraak); }
.appt-row .side { display: flex; align-items: center; gap: 8px; }
.date-stub.appt-stub .m { background: color-mix(in srgb, var(--st-afspraak) 30%, var(--rail)); }
.cal-bar.cal-appt { border: 0; background: color-mix(in srgb, var(--st-afspraak) 18%, var(--surface)); color: var(--fg); box-shadow: inset 3px 0 0 var(--st-afspraak); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.cal-bar.cal-appt .i { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; color: var(--st-afspraak); }
.appt-detail, .kv-detail { display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; }
.appt-k, .kv-k { color: var(--muted); font-size: 13px; padding-top: 1px; }
.kv-v a { color: inherit; }
.kv-extra { margin-top: 18px; }
.appt-link { word-break: break-all; }
.appt-crew { display: grid; gap: 8px; }
.appt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.appt-chips:empty { display: none; }
.appt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--st-afspraak) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--st-afspraak) 40%, transparent); font-size: 13.5px; font-weight: 600; }
.appt-chip-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.appt-chip-x:hover { background: var(--surface-2); color: var(--fg); }
.appt-chip-x .i { width: 13px; height: 13px; }
.appt-crew-q { width: 100%; }
@media (max-width: 640px) { .appt-detail, .kv-detail { grid-template-columns: 1fr; gap: 2px; } .appt-v, .kv-v { margin-bottom: 8px; } .cal-bar.cal-appt { font-size: 11px; } }
/* Prognose op het Overzicht: vier vakken en één gestapelde balk (definitief, optie, concept). */
.fc-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fc-sum > div:last-child .v { color: var(--fg); }
.sw.fc-con-sw { --sw: var(--st-concept); }
.fc-pad { padding-top: 12px; padding-bottom: 14px; }
.fc-bar { display: flex; gap: 2px; height: 10px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.fc-bar > span { flex-basis: 0; min-width: 3px; }
.fc-def { background: var(--chart-bev); } .fc-opt { background: var(--chart-opt); } .fc-con { background: var(--st-concept); }
@media (max-width: 900px) { .fc-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fc-sum { grid-template-columns: minmax(0, 1fr); } }
/* The forecast takes the whole width, also when folded shut. */
.dash-wide > .card { width: 100%; }
/* The main heading in a list: the size of the subheading, but white (Tom, 30-10). */
.group-head.folder-head { font-size: 13px; }
.group-head.folder-head .sum { color: var(--fg); }
/* A card folded shut keeps the whole width when it stands on its own (in two columns it keeps its own height). */
.view > .card.folded { align-self: stretch; }

/* ---------- Lists in columns (variant C, Tom 30-10) ----------
   Materiaal, Crew and Functies: the name in normal writing, then fixed columns on the right (a grey detail, the warning,
   the price), with small column headings. Counts in the headings line up with the prices; empty is a dash. */
.row.list-row { padding: 6px 16px; gap: 14px; border-top-color: color-mix(in srgb, var(--line) 45%, transparent); }
.row.list-row .title { font-size: 14.5px; font-weight: 500; }
.row.list-row .c-meta, .col-head .c-meta { flex: 0 0 120px; min-width: 0; }
.row.list-row .c-meta { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.row.list-row .c-warn, .col-head .c-warn { flex: 0 0 122px; }
.row.list-row .c-price, .col-head .c-price { flex: 0 0 96px; }
.row.list-row .c-price.wide, .col-head .c-price.wide { flex-basis: 128px; }
.col-head { display: flex; gap: 14px; padding: 4px 16px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 600; color: var(--muted); border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.col-head .main-col { flex: 1 1 auto; min-width: 0; }
.col-head .c-price { text-align: right; }
.fold-body > .fold-sec > .fold-body > .col-head { padding-left: 30px; }
.price-col { display: grid; grid-template-columns: 12px 1fr auto; column-gap: 4px; align-items: baseline; font-size: 14px; }
.price-col .cur { text-align: left; }
.price-col .amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-col .unit { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.dash { color: var(--muted); }
/* One form for every warning (tekort, conflict, afwezig): the same size, starting at the same point. */
.warn-chip { display: inline-block; width: 122px; box-sizing: border-box; padding: 1px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.warn-chip svg.i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
/* The category band is a little lighter, so the groups stand out. */
.group-head.cat-head { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
/* Counts in the headings in the figure type of the prices, on the same right edge. */
.fold-head .sum.gmeta { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0; }
/* Headings stay in view while scrolling a long list: the folder at the top, the category under it. */
.list .fold-sec > .group-head.fold-head:not(.sub-head):not(.ap-fold) { position: sticky; top: 0; z-index: 3; background: var(--surface); }
.list .fold-sec > .group-head.fold-head.folder-head:not(.sub-head):not(.ap-fold) { background: var(--surface-2); }
.list .fold-sec > .group-head.fold-head.cat-head:not(.sub-head):not(.ap-fold) { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.list .fold-body > .fold-sec > .group-head.fold-head:not(.sub-head):not(.ap-fold) { top: 42px; z-index: 2; }
.group-head.folder-head { line-height: 18px; padding-top: 12px; padding-bottom: 10px; }
@media (max-width: 640px) {
  .row.list-row .c-meta, .col-head .c-meta { display: none; }
  .row.list-row .c-warn, .col-head .c-warn { flex-basis: 104px; }
  .warn-chip { width: 104px; }
  .row.list-row .c-price, .col-head .c-price { flex-basis: 84px; }
  .row.list-row .c-price.wide, .col-head .c-price.wide { flex-basis: 112px; }
  .row.list-row, .col-head { gap: 8px; }
}
/* On a phone: the name gets the width, a warning goes under the name, the price stays on the right. */
@media (max-width: 640px) {
  .row.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; align-items: center; }
  .row.list-row .main-col { grid-column: 1; grid-row: 1; }
  .row.list-row .c-warn { grid-column: 1; grid-row: 2; }
  .row.list-row .c-warn:empty { display: none; }
  .row.list-row .c-price { grid-column: 2; grid-row: 1 / span 2; }
  .col-head .c-warn { display: none; }
}
@media (max-width: 640px) {
  .row.list-row .c-price { width: 84px; }
  .row.list-row .c-price.wide { width: 112px; }
  .row.list-row .warn-chip { width: 122px; }
}
/* ---------- The same columns on Klanten, Agenda, Facturen and Taken (Tom, 30-10) ---------- */
.row.list-row .c-date, .col-head .c-date { flex: 0 0 112px; min-width: 0; }
.row.list-row .c-date { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row.list-row.is-today .c-date { font-weight: 700; color: var(--accent-text, var(--fg)); }
.row.list-row .c-meta.wide, .col-head .c-meta.wide { flex-basis: 200px; }
.row.list-row .c-status, .col-head .c-status { flex: 0 0 104px; display: flex; justify-content: flex-start; }
.row.list-row .c-num, .col-head .c-num { flex: 0 0 96px; }
.row.list-row .c-num .tape { font-size: 12px; }
.row.list-row .title .i { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--st-afspraak); }
.appt-zoom { padding-top: 1px; padding-bottom: 1px; }
/* Taken: the same height, type and columns; the actions keep one width so the columns line up. */
.todo { padding-top: 6px; padding-bottom: 6px; gap: 4px 14px; border-top-color: color-mix(in srgb, var(--line) 45%, transparent); }
.todo-title, .todo.sub .todo-title { font-size: 14.5px; font-weight: 500; }
.todo .c-meta.wide { flex: 0 0 200px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; }
.todo .c-warn { flex: 0 0 122px; }
.todo .c-by, .col-head .c-by { flex: 0 0 210px; min-width: 0; }
.todo .c-by .todo-by { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; vertical-align: middle; }
.todo .c-by .todo-by svg.i { vertical-align: -2px; margin-right: 4px; }
.todo-acts, .col-head .todo-acts { flex: 0 0 96px; justify-content: flex-end; margin-left: 0; }
.col-head .todo-col1 { padding-left: 28px; }
.todo-notes { padding-left: 28px; }
@media (max-width: 640px) {
  /* Agenda: the date small above the name, the status on the right. */
  .row.list-row.has-date { grid-template-columns: minmax(0, 1fr) auto; }
  .row.list-row.has-date .c-date { grid-column: 1; grid-row: 1; font-size: 12.5px; color: var(--muted); }
  .row.list-row.has-date .main-col { grid-row: 2; }
  .row.list-row.has-date .c-warn { grid-row: 3; }
  .row.list-row.has-date .c-status { grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; }
  .col-head .c-date, .col-head .c-status, .col-head .c-num { display: none; }
  /* Taken: project hidden, due date and who next to each other under the task. */
  .todo .c-meta.wide, .col-head .c-by { display: none; }
  .todo .c-warn:empty, .todo .c-by:empty { display: none; }
  .todo .c-warn, .todo .c-by { flex: 0 1 auto; }
  .todo .c-by { padding-left: 28px; }
  .todo-acts { flex: 0 0 auto; margin-left: auto; }
}
/* When a list is narrower than all its columns, the grey column goes first, so the name keeps room. */
#list-region, #doc-list, #todo-list, .card.doc-list { container-type: inline-size; }
@container (max-width: 980px) {
  .row.list-row .c-meta.wide, .col-head .c-meta.wide, .todo .c-meta.wide { display: none; }
}
@container (max-width: 720px) {
  .todo .c-by, .col-head .c-by { flex-basis: 160px; }
}
/* Taken: the task name gives way, so the columns stay on one line (notes still go below). */
.todo .todo-check, .col-head .todo-col1 { flex: 1 1 0; min-width: 140px; }
.todo-acts .icon-btn { width: 26px; height: 26px; }
.todo-acts .icon-btn svg.i { width: 15px; height: 15px; }
/* Quotes and invoices in two lines when their list is narrow (a phone, or the card on a project page, Tom 30-10):
   number and date, then the client; amount and status on the right. It follows the width of the list, not the screen. */
@container (max-width: 640px) {
  .row.list-row.doc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; align-items: center; }
  .row.list-row.doc-row .c-num { grid-column: 1; grid-row: 1; }
  .row.list-row.doc-row .c-date { grid-column: 2; grid-row: 1; font-size: 12.5px; color: var(--muted); }
  .row.list-row.doc-row .main-col { grid-column: 1 / span 2; grid-row: 2; }
  .row.list-row.doc-row .c-price { grid-column: 3; grid-row: 1; }
  .row.list-row.doc-row .c-status { grid-column: 3; grid-row: 2; justify-content: flex-end; flex: none; }
  .row.list-row.doc-row .c-meta { display: none; }
}
/* ---------- Project overview (read first, Tom 30-10) ---------- */
.ov-card { overflow: hidden; }
.ov-card .facts { border: 0; border-radius: 0; }
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.ov-tile { background: var(--surface); padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-tile .k { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; color: var(--muted); }
.ov-tile .v { font-family: var(--font-display); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.ov-tile .s { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ov-bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 6px; background: var(--surface-2); }
.ov-bar i { display: block; flex-basis: 0; min-width: 3px; }
.ov-bar .f { background: var(--chart-bev); } .ov-bar .o { background: var(--warn); }
.ov-plan .card-head .seg { margin-right: 4px; }
.row.list-row .c-time, .col-head .c-time { flex: 0 0 96px; }
.row.list-row .c-time { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.row.list-row .c-who, .col-head .c-who { flex: 0 0 220px; min-width: 0; }
.row.list-row .c-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.list-row .c-qty { flex: 0 0 60px; text-align: right; font-variant-numeric: tabular-nums; }
.row.ov-row { cursor: default; }
.row.ov-row.is-mine { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tag-me { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700; color: var(--accent-text, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); vertical-align: 1px; }
/* Time bar */
.gantt { overflow-x: auto; }
.g { display: grid; grid-template-columns: 220px repeat(var(--days), minmax(30px, 1fr)); min-width: calc(220px + var(--days) * 30px); }
.g > div { border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.g-hd { padding: 6px 0; text-align: center; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.g-hd b { display: block; font-size: 13px; color: var(--fg); letter-spacing: 0; }
.g-hd small { display: block; font-size: 10px; }
.g-hd.today b { color: var(--accent-text, var(--accent)); }
.g-lab { padding: 6px 16px; min-width: 0; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.g-lab.g-hd { text-align: left; }
.g-lab span { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-lab small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-cell { display: flex; align-items: center; justify-content: center; }
.g .we { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.g-cell i { display: block; height: 18px; width: calc(100% - 4px); border-radius: 4px; }
.g-cell i.f, .g-legend i.f { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.g-cell i.mine, .g-legend i.mine { background: var(--accent); }
.g-cell i.o, .g-legend i.o { background: transparent; border: 1.5px dashed var(--warn); box-sizing: border-box; }
.g-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.g-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 640px) {
  .row.list-row.ov-row { grid-template-columns: minmax(0, 1fr) auto; }
  .row.list-row.ov-row .c-date { grid-column: 1; grid-row: 1; font-size: 12.5px; color: var(--muted); }
  .row.list-row.ov-row .c-time { grid-column: 2; grid-row: 1; text-align: right; }
  .row.list-row.ov-row .main-col { grid-column: 1; grid-row: 2; }
  .row.list-row.ov-row .c-who { grid-column: 2; grid-row: 2; text-align: right; }
  .col-head .c-time, .col-head .c-who { display: none; }
  .g { grid-template-columns: 140px repeat(var(--days), minmax(28px, 1fr)); min-width: calc(140px + var(--days) * 28px); }
  .g-lab { padding: 6px 10px; }
  .ov-plan .card-head { flex-wrap: nowrap; gap: 8px; }
  .ov-plan .card-head .seg button { padding-left: 10px; padding-right: 10px; }
  .ov-plan .card-head .count { display: none; }
}
.ov-plan .card-head .seg { display: inline-flex; flex-wrap: nowrap; flex: 0 0 auto; }
.ov-plan .card-head .seg button { white-space: nowrap; }
/* Quote or invoice: the status and its buttons in one bar at the top (Tom, 30-10). */
.doc-status .card-head { flex-wrap: wrap; row-gap: 8px; }
.doc-status .doc-status-hint { flex: 1 1 260px; min-width: 0; }
.doc-status .actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .doc-status .doc-status-hint { flex-basis: 100%; order: 3; } .doc-status .actions { order: 4; } .doc-status .spacer { display: none; } }
/* ---------- Crew conflicts on the Planning page (Tom, 30-10) ---------- */
.conf-card { margin-bottom: 0; }
.conf-list { max-height: 520px; overflow-y: auto; }
.conf-item { border-top: 1px solid var(--line); }
.conf-item:first-child { border-top: 0; }
.conf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 16px 4px; }
.conf-head strong { font-size: 14.5px; }
.conf-head .muted { font-size: 13px; }
.row.list-row.conf-shift { padding-left: 30px; border-top: 0; }
.row.list-row.conf-shift .sub { font-size: 12.5px; }
.conf-proj { color: var(--fg); text-decoration: none; }
.conf-proj:hover { text-decoration: underline; text-underline-offset: 2px; }
.conf-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.conf-pick { max-height: 360px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.conf-q { width: 100%; margin-top: 8px; }
.flag.ok.warn-chip { color: var(--ok); background: var(--ok-bg); }
@media (max-width: 640px) {
  .row.list-row.conf-shift { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; }
  .row.list-row.conf-shift .c-date { grid-column: 1; grid-row: 1; font-size: 12.5px; color: var(--muted); }
  .row.list-row.conf-shift .c-time { grid-column: 2; grid-row: 1; text-align: right; }
  .row.list-row.conf-shift .main-col { grid-column: 1 / -1; grid-row: 2; }
  .row.list-row.conf-shift .conf-acts { grid-column: 1 / -1; grid-row: 3; }
}
.conf-head .warn-chip { width: auto; }
/* Date and time in the conflicts: click to change the shift (Tom, 30-10). */
.conf-when { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.conf-when:hover { color: var(--fg); text-decoration-color: var(--fg); }
.pchip[data-act="shift-edit"] { cursor: pointer; }
.shift-what { margin: 0 0 4px; }
.shift-linked { color: var(--warn); }
/* Conflicts and open functions next to each other: a shift in two lines (date · time · warning, then project and
   function), the buttons on the right; on a phone the buttons go below. */
.plan-cards { margin-bottom: 0; }
.row.list-row.conf-shift { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "date time warn acts" "main main main acts"; column-gap: 10px; row-gap: 1px; align-items: center; padding: 6px 16px 6px 30px; }
.row.list-row.conf-shift .c-date { grid-area: date; flex: none; }
.row.list-row.conf-shift .c-time { grid-area: time; flex: none; }
.row.list-row.conf-shift .c-warn { grid-area: warn; flex: none; justify-self: start; }
.row.list-row.conf-shift .main-col { grid-area: main; }
.row.list-row.conf-shift .conf-acts { grid-area: acts; }
.open-card .row.list-row.conf-shift { padding-left: 16px; }
@media (max-width: 640px) {
  /* Back to the named areas (the phone rules above place by row and column; "auto" there put the name in a narrow column). */
  .row.list-row.conf-shift { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "date time warn" "main main main" "acts acts acts"; padding-left: 16px; }
  .row.list-row.conf-shift .c-date { grid-area: date; }
  .row.list-row.conf-shift .c-time { grid-area: time; text-align: left; }
  .row.list-row.conf-shift .main-col { grid-area: main; }
  .row.list-row.conf-shift .conf-acts { grid-area: acts; margin-top: 4px; }
  .row.list-row.conf-shift .c-warn:empty { display: none; }
}
@media (min-width: 1000px) { .two-col.plan-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Planbord views with a count (Crewconflicten, Open functies). */
.plan-modes .seg-n { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.plan-modes .seg-n.bad { background: var(--danger-bg); color: var(--danger); }
.plan-modes { flex-wrap: wrap; }
/* As a view of its own the list is not capped in height. */
.view > .conf-card .conf-list { max-height: none; }
/* Plan someone on a whole project: the preview per day. */
.bp-preview { margin-top: 10px; }
.bp-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.row.list-row.bp-row { cursor: default; }
.row.list-row.bp-row.skip .title { font-weight: 500; }
.bp-sug { max-height: 320px; }
/* Mijn agenda: whose agenda (owner). */
.mine-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mine-who > label { font-size: 13px; color: var(--muted); }
.mine-who .combo { width: 240px; }
.mine-who .mine-q { width: 100%; }
.mine-sug { min-width: 300px; max-height: 360px; }
@media (max-width: 640px) { .mine-who, .mine-who .combo { width: 100%; } }

/* SnelStart on the invoice page: ledger | what | amount. */
.ss-lines { display: grid; gap: 2px; font-size: 13px; align-self: stretch; width: 100%; }
.ss-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: baseline; padding: 3px 0; }
.ss-row.ss-head { padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.ss-row.ss-head .lbl { margin: 0; }
.ss-row.ss-sub { border-top: 1px solid var(--line); padding-top: 5px; }
.ss-row.ss-sub + .ss-row.ss-sub { border-top: 0; padding-top: 3px; }
.ss-gb { font-variant-numeric: tabular-nums; color: var(--muted); }
.ss-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-card .actions { align-items: center; flex-wrap: wrap; gap: 8px; }

/* Kantoordagen on the planning board: a calm block in the colour of the place; marked when there is a project too. */
.plan .ochip { display: block; margin: 1px 0 2px; padding: 2px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--fg); background: color-mix(in srgb, #439a86 18%, transparent); border-left: 3px solid #439a86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan .ochip small { display: block; font-weight: 500; font-size: 10.5px; color: var(--muted); }
.plan .ochip.o-studio { background: color-mix(in srgb, #7c6cd8 16%, transparent); border-left-color: #7c6cd8; }
.plan .ochip.o-thuis { background: color-mix(in srgb, var(--muted) 16%, transparent); border-left-color: var(--muted); }
.plan .ochip.clash { box-shadow: inset 0 0 0 1px var(--danger); }
.plan .ochip.clash small { color: var(--danger); font-weight: 600; }
.dow-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.dow-pick .chip-btn { min-width: 42px; text-transform: capitalize; }
.dow-pick .chip-btn.on { background: #439a86; color: #fff; border-color: transparent; }
/* The office fields in the crew form take part in the form's own grid. */
.form-grid > [data-office-box], .form-grid [data-office-box] { display: contents; }
/* Kantoordagen, the rest (31-10): the day window, the conflicts, Mijn agenda and the pickers. One colour per place. */
:root { --of-kantoor: #439a86; --of-studio: #7c6cd8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --of-kantoor: #5fbfa8; --of-studio: #a597f0; } }
:root[data-theme="dark"] { --of-kantoor: #5fbfa8; --of-studio: #a597f0; }
.o-kantoor { --of: var(--of-kantoor); }
.o-studio { --of: var(--of-studio); }
.o-thuis { --of: var(--muted); }
.st-kantoor { --pc: var(--of-kantoor); }
.legend .lg-office i { background: color-mix(in srgb, var(--of-kantoor) 30%, transparent); box-shadow: inset 3px 0 0 var(--of-kantoor); }
.office-box { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.office-box:empty { display: none; }
.office-box > p { margin: 0; }
.office-line { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--of, var(--of-kantoor)) 14%, transparent); border-left: 3px solid var(--of, var(--of-kantoor)); }
.office-line small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.office-line.clash { box-shadow: inset 0 0 0 1px var(--danger); }
.office-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ofmark { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1.6; vertical-align: 1px; color: var(--fg); background: color-mix(in srgb, var(--of, var(--of-kantoor)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--of, var(--of-kantoor)) 45%, transparent); white-space: nowrap; }
.ofdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: 0; background: var(--of, var(--of-kantoor)); }
.cal-bar.cal-office { border: 0; background: color-mix(in srgb, var(--of, var(--of-kantoor)) 16%, var(--surface)); color: var(--fg); box-shadow: inset 3px 0 0 var(--of, var(--of-kantoor)); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
@media (max-width: 640px) { .cal-bar.cal-office { font-size: 11px; } }
.conf-kantoor .row.list-row.conf-office .title { font-weight: 600; }
.of-who-head { display: flex; align-items: center; gap: 8px; }
.of-who-head .btn { margin-left: auto; }
.list.of-who { border: 1px solid var(--line); border-radius: 10px; max-height: 260px; overflow: auto; }
.row.of-who-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-top: 1px solid var(--line); }
.row.of-who-row:first-child { border-top: 0; }
.row.of-who-row input { width: 18px; height: 18px; flex: none; margin: 0; }
.row.of-who-row.is-off { opacity: .6; cursor: default; }
.row.of-who-row .sub { display: block; font-size: 12.5px; color: var(--muted); }
.row.of-who-row .sub.warn-txt { color: var(--warn); }
/* Studio's en tafels (31-10): chips on the planning board, the Studio tab of a project, the overview tile */
.pchip.o-studio { --pc: #7c6cd8; }
.pchip.schip { cursor: pointer; }
.pchip.schip { white-space: normal; margin-bottom: 2px; }
.pchip.schip b { display: block; font-weight: 600; }
.pchip.schip span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pchip.schip .schip-hw { display: block; margin-top: 3px; padding-top: 3px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: 11px; font-weight: 500; opacity: .85; }
.pchip.schip .schip-hw span { font-weight: 500; }
.legend .lg-ostudio i { background: #7c6cd8; }
.studio-row.clash { box-shadow: inset 3px 0 0 var(--danger); }
.studio-row[data-act] { cursor: pointer; }
.studio-lines .empty { padding: 18px 16px; }
.conf-note { margin: 4px 16px 10px; }
.ov-tile[data-act] { cursor: pointer; }
/* Materiaal (31-10): the rental factor of a line, the contents of a set, serial numbers per piece */
button.factor-chip { font: inherit; font-size: 12px; cursor: pointer; border: 0; }
button.factor-chip:hover { filter: brightness(1.08); }
body.readonly button.factor-chip { cursor: default; pointer-events: none; }
.set-items, .serial-list { display: grid; gap: 6px; margin: 4px 0 8px; }
.set-item { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto; gap: 6px; align-items: center; }
.serial-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 92px auto; gap: 6px; align-items: center; }
.set-item select, .set-item input, .serial-row input, .set-item .dd-btn { width: 100%; min-width: 0; }
/* Slepen op het planbord (31-10) */
[data-drag-shift], [data-drag-part] { cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.plan-dragging, body.plan-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.drag-src { opacity: .35; }
.drag-armed { box-shadow: 0 0 0 2px var(--accent); }
.plan-ghost { position: fixed; z-index: 80; pointer-events: none; margin: 0; opacity: .95; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .06s linear; }
.plan-badge { position: fixed; z-index: 81; pointer-events: none; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #111; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.plan-badge:empty { display: none; }
.plan td.drop-hover { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.toast.toast-act { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.toast.toast-act span { flex: 1; }
.toast.warn { border-left-color: #e6a23c; }
.toast-btn { flex: none; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: 13px; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.toast-btn:hover { background: rgba(255, 255, 255, .12); }
.toast-note { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #f3c27a; }

/* Signing a quote (fase 6): the page behind the link, for the client */
.sign-card { max-width: 560px; }
.sign-card h1 { margin: 0; }
.sign-card h2 { margin: 6px 0 0; font-size: 1.05rem; }
.sign-sum { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, transparent); }
.sign-sum div { display: flex; justify-content: space-between; gap: 12px; }
.sign-sum span { color: var(--muted); }
.sign-sum b { text-align: right; }
.sign-sum small { font-weight: normal; color: var(--muted); }
.sign-docs .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.sign-pad { position: relative; }
.sign-pad canvas { display: block; width: 100%; height: 170px; background: #fff; border: 1px solid var(--line); border-radius: 10px; touch-action: none; cursor: crosshair; }
.sign-pad .sign-clear { position: absolute; top: 6px; right: 6px; color: #22254D; background: rgba(255, 255, 255, .85); }
.sign-foot { display: flex; justify-content: center; }
.flag.sign-done { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; white-space: normal; padding: 8px 10px; }
.flag.sign-done > span { flex: 1 1 220px; }
.flag.wrap { white-space: normal; display: flex; align-items: flex-start; padding: 8px 10px; }

/* Rental factor fields (Tom, 31-10): empty = automatic (grey placeholder), a number = manual (orange, with a reset) */
.fac-field { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.fac-field .affix { width: 66px; flex: none; }
.fac-field input::placeholder { color: var(--muted); opacity: .9; }
.fac-field.manual input { border-color: var(--warn); color: var(--warn); font-weight: 700; }
.fac-field .fac-reset { width: 26px; height: 26px; min-height: 26px; padding: 0; flex: none; }
.fac-field .fac-reset svg.i { width: 14px; height: 14px; }
.facts .fac-field .affix { width: 76px; }
.grp-factor { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.grp-factor .lbl { font-size: 12px; color: var(--muted); }
.eq-sort { display: inline-flex; align-items: center; gap: 6px; }
.eq-sort select, .eq-sort .dd-btn { min-height: 32px; padding: 4px 8px; }
@media (max-width: 899px) { .line.eq .c-factor { grid-column: 1 / -1; } }
@media (min-width: 900px) { .line.eq, .line-head.eq { grid-template-columns: minmax(0, 1fr) 72px 116px 84px 100px 108px 40px; } }
/* Dragging groups and lines on the Materiaal tab */
.drag-grip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 24px; margin: 0 2px 0 -4px; color: var(--muted); cursor: grab; touch-action: none; flex: none; opacity: .6; vertical-align: middle; }
.drag-grip:hover { opacity: 1; color: var(--text); }
.drag-grip svg.i { width: 16px; height: 16px; }
.line.eq { position: relative; }
.line.eq:has(.line-grip) { padding-left: 22px; }
.line.eq .name .line-grip { position: absolute; left: 2px; top: 14px; width: 18px; margin: 0; }
body.eq-dragging, body.eq-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.eq-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .94; overflow: hidden; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.drag-src { opacity: .35; }
.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.drop-into { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* Phone: the group's factor and buttons under its name, so the name keeps the width */
@media (max-width: 699px) {
  .eq-group .grp-head:has(.grp-factor) { grid-template-columns: minmax(0, 1fr); }
  .eq-group .grp-head:has(.grp-factor) .grp-actions { grid-column: 1; grid-row: auto; flex-wrap: wrap; align-items: center; }
}

/* Project planning side by side (Tom, 31-10): summary, crew per phase left, material and studio right */
.proj-main.pv { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pv-sum { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pv-sum-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-stat { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.pv-stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pv-stat .v { font-weight: 700; }
.pv-stat em { font-style: normal; }
.pv-stat em.warn { color: var(--warn); } .pv-stat em.bad { color: var(--danger); } .pv-stat em.ok { color: var(--ok); }
.pv-phases { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pv-pchip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--pc); background: transparent; color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; }
.pv-pchip.on { background: var(--pc); color: #0f1124; }
.pv-todo { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.pv-todo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pv-todo-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 14px; }
.pv-todo-row.bad { background: var(--danger-bg); color: var(--danger); }
.pv-todo-row.warn { background: var(--warn-bg); color: var(--warn); }
.pv-todo-row .grow { flex: 1; min-width: 0; }
.pv-todo-row .btn { flex: none; }
.pv-todo.done { flex-direction: row; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; }
.pv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 14px; align-items: start; }
.pv-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pv-col-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-col-head h2 { margin: 0; font-family: var(--font-display); font-size: 22px; }
.pv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pv-card.pv-empty { padding: 14px; }
.pv-card-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pv-card-head small { color: var(--muted); }
.pv-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--pc); flex: none; }
.pv-row { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px 9px 14px; border-bottom: 1px solid var(--line); }
.pv-row.has-issue { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.pv-fn { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pv-fn small { color: var(--muted); font-size: 12.5px; }
.pv-fn .pv-warn { color: var(--danger); display: flex; gap: 4px; align-items: center; }
.pv-fn .pv-warn svg.i { width: 13px; height: 13px; }
.pv-slots { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pv-chip { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ok) 55%, var(--line)); background: color-mix(in srgb, var(--ok) 12%, transparent); font-size: 13px; font-weight: 600; overflow: hidden; }
.pv-chip.bad { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.pv-chip.open { border: 1px dashed var(--warn); background: transparent; color: var(--warn); padding: 4px 10px; gap: 4px; cursor: pointer; }
.pv-chip.open svg.i { width: 13px; height: 13px; }
.pv-chip-name { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pv-ini { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #0f1124; font-size: 10.5px; font-weight: 700; }
.pv-chip.bad .pv-ini { background: var(--danger); }
.pv-chip-x { border: 0; background: transparent; color: inherit; padding: 0 9px 0 4px; font-size: 16px; line-height: 1; cursor: pointer; opacity: .7; }
.pv-chip-x:hover { opacity: 1; }
.pv-edit { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pv-card-foot { padding: 6px 10px; }
.pv-box { overflow: hidden; }
@media (max-width: 560px) { .pv-row { grid-template-columns: minmax(0, 1fr) auto; } .pv-row .pv-slots { grid-column: 1 / -1; grid-row: 2; } }
/* Material and costs in a column: the line as a small card (the phone layout), whatever the window */
.pv-mat { container-type: inline-size; }
@container (max-width: 860px) {
  .pv-mat .line-head { display: none; }
  .pv-mat .line.eq, .pv-mat .line.cost { grid-template-columns: minmax(0, 1fr) auto; }
  .pv-mat .line.eq .ctrls, .pv-mat .line.cost .ctrls { display: grid; }
  .pv-mat .line.eq .cell > .lbl, .pv-mat .line.cost .cell > .lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .pv-mat .line.eq .name { grid-row: 1; grid-column: 1; }
  .pv-mat .line.eq .total { grid-row: 1; grid-column: 2; align-self: start; order: 0; }
  .pv-mat .line.eq .ctrls { grid-row: 2; grid-column: 1; grid-template-columns: 64px minmax(0, 1fr) 78px; }
  .pv-mat .line.eq .ctrls > * { grid-row: auto; grid-column: auto; order: 0; }
  .pv-mat .line.eq .c-factor { grid-column: 1 / -1; }
  .pv-mat .line.eq .rm { grid-row: 2; grid-column: 2; align-self: end; order: 0; }
  .pv-mat .line.cost .name { grid-row: 1; grid-column: 1; }
  .pv-mat .line.cost .rm { grid-row: 1; grid-column: 2; }
  .pv-mat .line.cost .ctrls { grid-row: 2; grid-column: 1; grid-template-columns: 64px minmax(0, 1fr); }
  .pv-mat .line.cost .ctrls > * { grid-row: auto; grid-column: auto; }
  .pv-mat .line.cost .total { grid-row: 2; grid-column: 2; align-self: end; }
  /* Amounts hidden: only the number, on the same row as the name */
  body.no-fin .pv-mat .line.eq { grid-template-columns: minmax(0, 1fr) 72px 36px; }
  body.no-fin .pv-mat .line.eq .ctrls { grid-row: 1; grid-column: 2; grid-template-columns: minmax(0, 1fr); }
  body.no-fin .pv-mat .line.eq .ctrls .cell > .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.no-fin .pv-mat .line.eq .rm { grid-row: 1; grid-column: 3; align-self: center; }
}
/* Sets fold; serial numbers per piece */
.set-fold { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ser-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ser-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ser-sel { min-height: 28px !important; padding: 2px 6px !important; font-family: var(--font-mono); font-size: 12px; border-radius: 6px; max-width: 160px; }
.ser-sel:not(.set) { color: var(--muted); border-style: dashed; }
.ser-sel.bad { border-color: var(--danger); color: var(--danger); }
/* The side-by-side view gets the wide page, like a project with the side panel open */
.main-inner:has(.proj-main.pv) { max-width: 1640px; }
.pv-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }
/* Without the money column (amounts hidden) the main part takes its place */
@media (min-width: 1360px) { .project-layout:not(:has(> .project-aside)) { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1720px) { .project-layout.has-panel:not(.panel-closed):not(:has(> .project-aside)) { grid-template-columns: 280px minmax(0, 1fr); } }
/* Crew as phase columns, material groups as bars under them (Tom, 31-10: voorstel 4's look, "onder elkaar is strakker") */
.pv-crew, .pv-mat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pv-sub { margin: 4px 0 0; font-family: var(--font-display); font-size: 18px; }
.pv-grid, .pv-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.pv-ph { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); min-width: 0; container-type: inline-size; }
.pv-ph-bar { height: 4px; border-radius: 2px; background: var(--pc); margin-bottom: 2px; }
/* One fixed layout in every card (Tom, 1-11: "alles uitlijnen"): name + status, then day and time. On narrow cards the
   name gets the whole line, the status moves next to the day and the time goes under it, in all cards alike. */
.pv-ph-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name flag" "time time"; align-items: center; column-gap: 6px; min-width: 0; }
.pv-ph-head b { grid-area: name; font-family: var(--font-display); font-size: 18px; line-height: 26px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-ph-head .flag { grid-area: flag; }
.pv-ph-head .pv-ph-time { grid-area: time; }
.pv-ph-time { color: var(--muted); font-size: 12.5px; line-height: 20px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 210px) {
  .pv-ph-head { grid-template-areas: "name name" "day flag" "tm tm"; }
  .pv-ph-head b { font-size: 16px; }
  .pv-ph-head .pv-ph-time { display: contents; }
  .pv-ph-head .pv-ph-time > .d, .pv-ph-head .pv-ph-time > .t { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pv-ph-head .pv-ph-time > .d { grid-area: day; line-height: 24px; }
  .pv-ph-head .pv-ph-time > .t { grid-area: tm; line-height: 18px; margin-bottom: 2px; }
  .pv-ph-sep { display: none; }
}
.pv-ph-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pv-ph > .pv-add { margin-top: 4px; }
/* The choices behind a shift chip: under each other (Tom, 1-11: neater) */
.pv-chip-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pv-chip-acts .btn { width: 100%; justify-content: center; }
/* Several shifts at once */
.pv-selbar { position: sticky; top: 8px; z-index: 5; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.pv-selbar-top, .pv-selbar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pv-c.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.pv-c svg.i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.choice-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: 100%; }
/* Project plannen (Tom, 1-11): the flow in seven steps */
.pf-parts, .pf-presets, .pf-acts, .pf-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.pf-presets .pf-base { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.pf-presets .pf-base input { width: auto; min-height: 32px; }
.pf-old, .pf-lead { margin: 0 0 10px; }
.pf-none { margin: 8px 0; }
.pf-subs .pf-sub { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pf-quick { margin: 10px 0 0; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text, var(--accent)); text-decoration: underline; cursor: pointer; }
.pf-crew { border: 1px solid var(--line); border-radius: var(--radius); }
.pf-cr { display: grid; grid-template-columns: minmax(0, 1.4fr) 64px minmax(0, 1.2fr) minmax(0, 2fr) 30px; gap: 8px 10px; align-items: start; padding: 10px 12px; border-top: 1px solid var(--line); }
.pf-cr:first-child { border-top: 0; }
.pf-crew > .pf-none { padding: 4px 12px; }
.pf-qty { width: 100%; }
.pf-fn { min-width: 0; }
.pf-who { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.pf-who > *:first-child { width: 100%; }
.pf-phs { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; min-width: 0; }
.pf-allph { display: inline-flex; align-items: center; gap: 6px; }
.pf-phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.pf-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; text-align: left; border: 1px solid var(--line-strong); background: var(--surface); color: inherit; border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12.5px; line-height: 1.3; cursor: pointer; min-height: 0; }
.pf-chip b { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-chip small { color: var(--muted); font-size: 11.5px; }
.pf-who .flag { white-space: normal; }
.pf-chip.on { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color: var(--accent); font-weight: 600; }
.pf-search input { flex: 1 1 240px; }
.pf-res { display: flex; flex-direction: column; gap: 2px; margin: -4px 0 10px; }
.pf-res:empty { display: none; }
.pf-hit { display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.pf-hit:hover { border-color: var(--accent); }
.pf-grp { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 10px; }
.pf-grp.sel { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.pf-ghead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.pf-gname { flex: 1 1 160px; font-weight: 700; }
.pf-per { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-per > * { width: auto; }
.pf-eq { display: grid; grid-template-columns: 64px minmax(0, 2fr) minmax(0, 1.3fr) 30px; gap: 8px 10px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--line); }
.pf-ghead + .pf-eq { border-top: 0; }
.pf-grp > .pf-none { padding: 4px 12px; }
.pf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-card { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.pf-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pf-card b { font-size: 15px; }
.pf-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.pf-kv dt { color: var(--muted); }
.pf-kv dd { margin: 0; }
.pf-status { margin-top: 12px; }
.pf-quote { display: block; margin-top: 10px; }
.pf-allok { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.pf-cf { margin-bottom: 8px; }
.pf-sper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; }
.pf-sper .pf-per2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; flex: 1 1 380px; }
.pf-sper > .muted { flex-basis: 100%; }
.pf-ssec { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 10px; }
.pf-ssec > .lbl { display: block; padding: 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.pf-srow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 170px); gap: 8px 12px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--line); }
.pf-ssec > .lbl + .pf-srow { border-top: 0; }
.pf-srow:not(.on) .pf-eqname { color: var(--muted); }
.pf-step { display: inline-flex; align-items: center; gap: 6px; }
.pf-step b { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.pf-sgrp .pf-ghead { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.pf-eq-ro { grid-template-columns: 64px minmax(0, 2fr) minmax(0, 1.3fr) 30px; }
.pf-qty-ro { font-weight: 700; padding-left: 4px; }
.ok-t { color: var(--ok); }
.warn-t { color: var(--warn); }
@media (max-width: 640px) {
  .pf-cr { grid-template-columns: minmax(0, 1fr) 56px 30px; }
  .pf-cr .pf-who, .pf-cr .pf-phs { grid-column: 1 / -1; }
  .pf-cr > .icon-btn { grid-column: 3; grid-row: 1; }
  .pf-eq { grid-template-columns: 56px minmax(0, 1fr) 30px; }
  .pf-eq > .small { grid-column: 2 / -1; grid-row: 2; }
  .pf-cards { grid-template-columns: minmax(0, 1fr); }
  .pf-srow { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-srow > .small { grid-column: 1 / -1; }
  .pf-kv { grid-template-columns: minmax(0, 1fr); }
  .pf-kv dt { margin-top: 6px; }
  .pf-presets .pf-base { margin-left: 0; }
  .pf-per { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
  .pf-gname { flex-basis: 100%; }
}
/* Functie toevoegen in fases (Tom, 1-11) */
.pf-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
.pf-qty input { width: 100%; }
.pf-phases { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 12px; max-height: 320px; overflow: auto; }
.pf-ph-head { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.pf-ph { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); cursor: pointer; }
.pf-ph-head + .pf-ph { border-top: 0; }
.pf-ph b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-ph .small { white-space: nowrap; text-align: right; }
.pf-phases > .muted { padding: 10px 12px; margin: 0; }
.pf-sum { margin: 12px 0 0; }
@media (max-width: 640px) { .pf-ph { grid-template-columns: auto minmax(0, 1fr); } .pf-ph .small { grid-column: 2; text-align: left; } }
.pv-c { display: block; width: 100%; text-align: left; padding: 6px 9px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text);
  background: color-mix(in srgb, var(--ok) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 55%, var(--line)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-c:hover { border-color: var(--ok); }
.pv-c.bad { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.pv-c.open { background: transparent; border: 1px dashed var(--warn); color: var(--warn); }
.pv-add { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px; border-radius: 9px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--line)); background: transparent; color: var(--accent-text, var(--accent)); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pv-add svg.i { width: 14px; height: 14px; }
.pv-bars { padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); gap: 6px 10px; }
.pv-bars-title { grid-column: 1 / -1; }
.pv-gbar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, #6b7bd8 18%, var(--surface)); border: 1px solid color-mix(in srgb, #6b7bd8 60%, var(--line)); }
.pv-gbar.bad { border-color: var(--danger); }
.pv-gbar b { flex: none; }
.pv-gbar-items { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-gbar .flag { flex: none; }
.pv-editor { overflow: hidden; }
.pv-editor-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.pv-empty { padding: 14px; }
@media (max-width: 760px) {
  .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .pv-bars { display: none; }
}
/* The library in the side panel: free per phase, pick and tap a phase (voorstel 4) */
.ap-dots { display: inline-flex; gap: 3px; flex: none; margin: 0 2px; }
.ap-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.ap-dots i.d-f { background: var(--ok); }
.ap-dots i.d-h { background: var(--accent); }
.ap-dots i.d-b { background: var(--danger); }
.ap-dots i.d-o { background: color-mix(in srgb, var(--muted) 70%, transparent); }
.ap-item[data-act="pv-pick"] { cursor: pointer; }
.ap-item[data-picked] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); box-shadow: inset 3px 0 0 var(--ok); }
.pv-picked { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); border: 1px solid var(--ok); }
.pv-picked .grow { flex: 1; min-width: 0; }
.pv-picked svg.i { width: 15px; height: 15px; vertical-align: -2px; }
.pv-ph.picking { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.pv-target { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; padding: 9px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 700; text-align: center; }
.pv-target small { font-weight: 500; opacity: .85; }
.pv-target svg.i { width: 14px; height: 14px; }
.pv-target.ok { border: 1px dashed var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); cursor: pointer; }
.pv-target.warn { border: 1px dashed var(--warn); background: var(--warn-bg); color: var(--warn); cursor: pointer; }
.pv-target.no { border: 1px dashed var(--danger); color: var(--danger); font-weight: 600; }
.pv-target.here { border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.pv-ph.drop-over { outline: 2px dashed var(--ok); outline-offset: -2px; }
/* Folding the blocks of the planning view (Tom, 31-10) */
.pv-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pv-sec.folded > :not(.pv-col-head) { display: none !important; }
.pv-sec.folded > .pv-col-head { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pv-col-head .fold-btn { margin-left: 2px; }
.pv-todo.folded > :not(.pv-todo-head) { display: none; }
.pv-bars-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.pv-bars.folded { padding-top: 4px; padding-bottom: 4px; }
/* A folded card in the money column keeps the width of the column (in a flex column "start" shrank it to its title) */
.project-aside > .card.folded { align-self: stretch; }

/* The app's dropdown (enhanceSelect): the chevron sits inside the button, so the room kept for the browser's arrow goes. */
.dd-btn.status-select { padding-right: 10px; }
.tl-use .dd-btn, .cat-tpl .dd-btn { padding-right: 8px; }
.dd-btn.ser-sel .dd-chev { width: 12px; height: 12px; }
/* Compact rows: a smaller chevron leaves more room for the text. */
.line .dd-btn, .slot .dd-btn, .imp-row .dd-btn, .eq-sort .dd-btn, .tl-use .dd-btn, .cat-tpl .dd-btn { gap: 4px; }
.line .dd-btn .dd-chev, .imp-row .dd-btn .dd-chev, .eq-sort .dd-btn .dd-chev, .tl-use .dd-btn .dd-chev, .cat-tpl .dd-btn .dd-chev { width: 14px; height: 14px; }

/* The phase buttons on the timeline: copy / repeat and delete (Tom, 1-11). */
.tl-acts { display: flex; align-items: center; gap: 2px; }
/* On the phone the period goes under the title, so the buttons fit (no sideways scroll). */
@media (max-width: 640px) { .timeline-card > .card-head { flex-wrap: wrap; row-gap: 4px; } .timeline-card > .card-head .tl-per { order: 9; flex-basis: 100%; } }
/* Fases toevoegen: several at once, each row can repeat (Tom, 1-11). */
.pm-head, .pm-row { display: grid; grid-template-columns: minmax(120px, 1fr) 150px 100px 100px minmax(0, auto); gap: 6px 8px; align-items: center; }
.pm-head { font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 0 4px; }
.pm-rows { display: flex; flex-direction: column; }
.pm-row { padding: 8px 0; border-top: 1px solid var(--line); }
.pm-row input { min-height: 34px; padding: 4px 8px; }
.pm-bits { display: contents; }
.pm-bits > .pm-next { white-space: nowrap; min-width: 44px; }
.pm-bits > .rep-panel, .pm-bits > .pm-occ { grid-column: 1 / -1; margin: 0; }
.pm-row { grid-template-columns: minmax(120px, 1fr) 150px 100px 100px 48px auto 32px; }
.pm-head { grid-template-columns: minmax(120px, 1fr) 150px 100px 100px 48px auto 32px; }
.pm-rep.on { background: var(--surface-2); }
.pm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0 0; border-top: 1px solid var(--line); }
.pm-sum, .pc-prev { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.pm-names { margin-top: 4px; }
.rep-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); }
.rep-modes { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rep-count { display: inline-flex; align-items: center; gap: 8px; }
.rep-panel .rep-n { width: 76px; min-height: 34px; }
.mc { width: 100%; max-width: 320px; }
.rep-panel .rep-modes, .rep-panel .mc { flex-basis: 100%; }
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mc-dow { font-size: 11px; color: var(--muted); text-align: center; text-transform: uppercase; padding-bottom: 2px; }
.mc-day { min-height: 36px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; color: inherit; }
.mc-day.we { color: var(--muted); }
.mc-day.mark { border-color: var(--accent); }
.mc-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #111; font-weight: 700; }
.mc-picked { flex-basis: 100%; margin: 0; }
.pc-sec { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pc-take { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pc-line { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.pc-line .k { color: var(--muted); font-weight: 600; }
.cf-list { display: flex; flex-direction: column; }
.cf-change { padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.cf-change p { margin: 4px 0 0; }
.cf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.cf-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.cf-what .muted { flex-basis: 100%; }
.cf-pick { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 640px) {
  .pm-head { display: none; }
  .pm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 32px; }
  .pm-row .pm-name { grid-column: 1 / 3; grid-row: 1; }
  .pm-row .pm-rep { grid-column: 3; grid-row: 1; }
  .pm-row [data-pm-del] { grid-column: 4; grid-row: 1; }
  .pm-row [data-pm="day"] { grid-column: 1 / 3; grid-row: 2; }
  .pm-row [data-pm="st"] { grid-column: 1; grid-row: 3; }
  .pm-row [data-pm="et"] { grid-column: 2; grid-row: 3; }
  .pm-row .pm-next { grid-column: 3 / 5; grid-row: 3; }
  .pc-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cf-row { grid-template-columns: minmax(0, 1fr); }
}

/* Studio plannen: one window in five steps (Tom, 1-11). */
.sf-steps { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.sf-step { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.sf-step:disabled { cursor: default; opacity: .6; }
.sf-step .sf-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: 11.5px; font-weight: 700; color: var(--fg); }
.sf-step .sf-n svg.i { width: 12px; height: 12px; }
.sf-step.on { color: var(--fg); font-weight: 700; }
.sf-step.on .sf-n { background: var(--accent); color: #111; }
.sf-step.done .sf-n { background: color-mix(in srgb, var(--ok) 25%, var(--surface)); color: var(--ok); }
.sf-studios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.sf-studio { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sf-studio strong { font-size: 16px; }
.sf-studio.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sf-grid { margin-bottom: 12px; }
.sf-occ { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface-2); }
.sf-occ-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sf-occ-row { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 8px; padding: 3px 0; }
.sf-occ-day { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sf-occ-track { position: relative; height: 20px; border-radius: 4px; background: var(--surface); }
.sf-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; font-size: 11px; line-height: 16px; padding: 0 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-bar.mine { background: var(--accent); color: #111; font-weight: 700; z-index: 1; }
.sf-bar.other { background: color-mix(in srgb, var(--muted) 45%, var(--surface)); color: var(--fg); }
.sf-occ-axis { display: flex; justify-content: space-between; margin-left: 94px; font-size: 11px; color: var(--muted); }
.sf-sec { display: flex; flex-direction: column; margin-bottom: 14px; }
.sf-sec > .lbl { margin-bottom: 4px; }
.sf-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sf-check { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.sf-check input { margin-top: 3px; }
.sf-need { margin-left: 4px; font-size: 11px; }
.sf-qty { display: inline-flex; align-items: center; gap: 4px; }
.sf-qty .num { min-width: 28px; text-align: center; }
.sf-sers { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 28px; }
.sf-sers .dd-btn, .sf-sers select { width: auto; min-width: 150px; min-height: 32px; padding: 3px 8px; }
.sf-set { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); margin-bottom: 6px; }
.sf-search { display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); }
.sf-search svg.i { width: 16px; height: 16px; color: var(--muted); flex: none; }
.sf-search input[type="search"] { border: 0; background: transparent; padding: 6px 0; min-height: 36px; }
.sf-search input[type="search"]:focus-visible { outline: none; }
.sf-search:focus-within { border-color: var(--accent); }
.sf-check .main-col, .sf-set .main-col, .sf-prow .main-col, .sf-crow .main-col { display: flex; flex-direction: column; min-width: 0; }
.sf-check .title, .sf-set .title, .sf-prow .title, .sf-crow .title { font-weight: 600; }
.sf-check .sub, .sf-set .sub, .sf-prow .sub, .sf-crow .sub { font-size: 12.5px; color: var(--muted); }
.sf-ptable { display: flex; flex-direction: column; margin-bottom: 12px; }
.sf-prow { display: grid; grid-template-columns: minmax(0, 1fr) 100px 96px 110px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sf-prow > .num, .sf-phead > span:not(:first-child) { text-align: right; }
.sf-phead { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-top: 0; }
.sf-fac { width: 100%; min-height: 32px; padding: 3px 8px; text-align: right; }
.sf-total { border-top: 2px solid var(--line-strong); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sf-total > div { display: flex; justify-content: space-between; }
.sf-total .g { font-weight: 700; font-size: 16px; }
.sf-crow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sf-why { margin: -4px 0 6px; color: var(--danger); }
.sf-sum { border: 1px solid var(--line); border-radius: var(--radius); margin: 8px 0; }
.sf-sum-h { padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.sf-sum-r { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); }
.sf-sum-r:first-of-type { border-top: 0; }
.sf-foot { display: flex; align-items: center; gap: 8px; width: 100%; }
@media (max-width: 640px) {
  .sf-studios { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sf-item { grid-template-columns: minmax(0, 1fr) auto; }
  .sf-item > .flag { grid-column: 1 / -1; justify-self: start; margin-left: 28px; }
  .sf-prow { grid-template-columns: minmax(0, 1fr) 70px 80px; }
  .sf-prow > :nth-child(2) { display: none; }
  .sf-occ-row { grid-template-columns: 64px minmax(0, 1fr); }
  .sf-occ-axis { margin-left: 72px; }
  .sf-set { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Rentman-import with choices (Tom, 1-11). */
.ri-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); margin-bottom: 12px; }
.ri-demo { margin-bottom: 10px; }
.ri-sec { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 10px; background: var(--surface); }
.ri-sec.off .ri-head { opacity: .7; }
.ri-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; }
.ri-on { font-weight: 700; flex: 1 1 200px; }
.ri-on .muted { font-weight: 500; margin-left: 4px; }
.ri-mode { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; white-space: nowrap; }
.ri-body { padding: 8px 12px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.ri-body .hint { margin: 0; }
.ri-body > label.check { display: block; }
.ri-body > label.check > input { margin-right: 6px; vertical-align: -2px; }
.ri-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ri-row > .lbl { min-width: 70px; }
.ri-row input[type="date"] { width: auto; min-height: 34px; }
.ri-sec .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ri-sec .chip-btn .ri-n { opacity: .7; margin-left: 5px; font-variant-numeric: tabular-nums; }
.ri-sum { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 10px 12px; margin-top: 6px; }
.ri-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.ri-sum > div > span:last-child { text-align: right; }
.ri-sum .hint { margin: 6px 0 0; }
.ri-fnmap { border: 1px solid var(--line); border-radius: var(--radius); max-height: 360px; overflow: auto; }
.ri-fnrow { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.2fr); gap: 4px 10px; align-items: center; padding: 5px 10px; border-top: 1px solid var(--line); }
.ri-fnrow:first-child { border-top: 0; }
.ri-fnhead { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ri-fnhead > span:nth-child(2), .ri-fnn { text-align: right; font-variant-numeric: tabular-nums; }
.ri-fnname { overflow-wrap: anywhere; }
.ri-fnrow.none .ri-fnname { color: var(--muted); }
.ri-fnpick { min-width: 0; }
@media (max-width: 640px) { .ri-fnrow { grid-template-columns: minmax(0, 1fr) auto; } .ri-fnpick { grid-column: 1 / -1; } .ri-fnhead > span:nth-child(3) { display: none; } }
.ri-busy { padding: 20px 4px; }
.ri-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin: 12px 0 6px; }
.ri-bar span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.wp-lead { margin: 0 0 4px; }
.ri-sum .wp-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; font-weight: 600; }
.wp-keep { display: block; margin: 10px 0; }
.wp-keep > input { margin-right: 6px; vertical-align: -2px; }
.wp-bar span { background: var(--danger); }
@media (max-width: 640px) { .ri-sum > div { flex-direction: column; gap: 0; } .ri-sum > div > span:last-child { text-align: left; color: var(--muted); } }
@media (max-width: 640px) { .ri-sum.wp-sum > div { flex-direction: row; gap: 12px; } .ri-sum.wp-sum > div > span:last-child { text-align: right; color: inherit; } }
/* Agenda menu, clipboard, Dupliceren and Subprojecten toevoegen (Tom, 1-11). */
.ctx-menu { min-width: 250px; }
.ctx-menu .dd-list { padding: 4px; }
.ctx-menu .dd-item { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.ctx-menu .dd-item:hover, .ctx-menu .dd-item:focus-visible { background: var(--surface-2); outline: none; }
.ctx-menu .dd-item svg.i { color: var(--accent); }
.dd-item.danger, .dd-item.danger svg.i { color: var(--danger); }
.dd-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.clip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 14px; }
.clip-bar > svg.i { width: 16px; height: 16px; color: var(--accent); flex: none; }
.clip-bar > span:not(.spacer) { min-width: 0; flex: 1 1 220px; }
#list-region .cal-bar, #list-region .list-row, #list-region .cal-day { -webkit-touch-callout: none; }
.ms-grid { display: flex; flex-direction: column; gap: 6px; container-type: inline-size; }
.ms-row { display: grid; grid-template-columns: 150px 150px minmax(0, 1.4fr) minmax(0, 1.2fr) 32px; gap: 6px 8px; align-items: start; }
.ms-grid.dup .ms-row { grid-template-columns: 128px minmax(0, 1.4fr) minmax(0, 1.2fr); }
.ms-hrow span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ms-cell { display: block; min-width: 0; margin: 0; }
.ms-cl { display: none; }
.ms-cell input, .ms-loc input { width: 100%; }
.ms-loc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ms-loc .flag { align-self: flex-start; font-size: 11.5px; max-width: 100%; white-space: normal; }
button.flag.ms-like { border: 0; cursor: pointer; font-family: inherit; text-align: left; }
button.flag.ms-like:hover { text-decoration: underline; }
.ms-day { font-variant-numeric: tabular-nums; font-weight: 600; padding-top: 9px; }
.ms-x { margin-top: 3px; }
.ms-add { margin-top: 10px; }
.paste-box { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.paste-box textarea { width: 100%; min-height: 96px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.paste-box .hint { margin: 0; }
.inh { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 12px; }
.ms-src { min-width: 240px; }
.ms-status > div { max-width: 260px; }
@container (max-width: 620px) {
  .ms-hrow { display: none; }
  .ms-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; grid-template-areas: "a b x" "c c c" "d d d"; padding: 10px 0 4px; border-top: 1px solid var(--line); }
  .ms-a { grid-area: a; } .ms-b { grid-area: b; } .ms-c { grid-area: c; } .ms-d { grid-area: d; } .ms-x { grid-area: x; margin-top: 20px; }
  .ms-cl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  .ms-grid.dup .ms-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 4px; }
  .ms-grid.dup .ms-day { padding-top: 0; }
}
.cal-day.ctx-hit { outline: 2px dashed var(--accent); outline-offset: -3px; }
/* Tourmanagement.com and the notifications (Tom, 4-11). */
.nav-bell { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; margin: 4px 0 2px; border: 0; border-radius: 7px; background: var(--rail-active); color: #fff; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.nav-bell:hover { filter: brightness(1.12); }
.nav-bell svg.i { width: 18px; height: 18px; flex: none; }
.nt-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.nt-badge[hidden] { display: none; }
body.rail-small .nav-bell { justify-content: center; padding-left: 0; padding-right: 0; position: relative; }
body.rail-small .nav-bell > span:not(.nt-badge) { display: none; }
body.rail-small .nav-bell .nt-badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.mobile-top { display: flex; align-items: center; gap: 8px; }
.mobile-top .mobile-brand { flex: 1; }
.mobile-bell { position: relative; flex: none; }
.mobile-bell .nt-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; font-size: 11px; margin: 0; padding: 0 5px; }
@media (min-width: 900px) { .mobile-bell { display: none; } }
.nt-pop { max-width: none; }
.nt-pop:not(.dd-sheet) { max-height: calc(100vh - 16px); }
.nt-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 14px; }
.nt-head strong { font-size: 16px; }
.nt-list { overflow-y: auto; min-height: 0; }
.nt-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.nt-item.unread { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.nt-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin: 7px 0 0 6px; }
.nt-item:not(.unread) .dot { background: transparent; border: 1px solid var(--line-strong); }
.nt-item .t { font-weight: 600; }
.nt-item .s { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.nt-item .a { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.nt-item .a:empty { display: none; }
.nt-empty { padding: 4px 14px 12px; margin: 0; }
.nt-foot { padding: 8px 14px 12px; border-top: 1px solid var(--line); }
.tm-kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 14px; padding: 14px 16px; }
.tm-kv > .k { color: var(--muted); }
.tm-kv > span { min-width: 0; overflow-wrap: anywhere; }
.tm-key { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
.tm-actions { padding: 0 16px 16px; }
.tm-intro { margin: 0 0 12px; }
/* Studioschermen (8-11) */
.scr-list { display: grid; gap: 10px; margin: 4px 0 12px; }
.scr-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.scr-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.scr-opts { display: flex; gap: 18px; flex-wrap: wrap; }
.scr-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.scr-how summary { cursor: pointer; font-weight: 600; margin-top: 4px; }
.scr-how ol { margin: 8px 0 0 18px; display: grid; gap: 6px; }
.scr-qr { display: flex; justify-content: center; margin: 4px 0 12px; }
.scr-qr svg { width: min(260px, 70vw); height: auto; border-radius: 8px; }
.scr-qr-big svg { width: min(380px, 84vw); }
.scr-steps { margin: 0 0 10px 18px; display: grid; gap: 4px; }
.scr-dev { color: var(--muted); }
.scr-top .flag { margin-left: 4px; }
.scr-pin { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 4px 0 12px; }
/* Studio gratis bij studiohardware (8-11) */
.line .name small.hw-free { color: var(--accent-text, var(--accent)); }
.flag.wrap-flag { white-space: normal; }
.tm-change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.tm-change .txt { flex: 1 1 260px; min-width: 0; }
.tm-sub { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tm-sub-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tm-sub .tm-kv { grid-template-columns: 130px minmax(0, 1fr); padding: 12px; }
.tm-sub .tm-change { border-top: 0; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) {
  .tm-kv, .tm-sub .tm-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tm-kv > .k { margin-top: 8px; }
  .tm-rows .row { flex-wrap: wrap; }
  .tm-rows .row .main-col { flex: 1 1 200px; }
  .tm-rows .row .side { display: block; flex: 0 0 100%; width: 100%; max-width: none; padding-left: 64px; text-align: left; }
  .tm-rows .row .side .flag { display: inline-flex; white-space: nowrap; }
}
/* Dragging blocks in the agenda and phase rows (Jarno and Tom, 7-11). */
body:not(.readonly) #list-region .cal-bar[data-act="open-part"] { cursor: grab; }
#list-region .cal-day.drop-span { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 2px dashed var(--accent); outline-offset: -3px; }
.pm-head, .pm-row { grid-template-columns: 20px minmax(90px, 1fr) 140px 96px 96px 44px auto 32px; gap: 6px; }
.pm-grip { margin: 0; width: 20px; }
@media (max-width: 640px) {
  .pm-row { grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1fr) auto; }
  .pm-row .pm-grip { grid-column: 1; grid-row: 1 / 4; align-self: center; width: 16px; }
  .pm-row .pm-name { grid-column: 2 / 4; grid-row: 1; }
  .pm-row .pm-rep { grid-column: 4; grid-row: 1; }
  .pm-row [data-pm-del], .pm-row [data-pf-rowdel] { grid-column: 4; grid-row: 2; justify-self: start; }
  .pm-row [data-pm="day"] { grid-column: 2 / 4; grid-row: 2; }
  .pm-row [data-pm="st"] { grid-column: 2; grid-row: 3; }
  .pm-row [data-pm="et"] { grid-column: 3; grid-row: 3; }
  .pm-row .pm-next { grid-column: 4; grid-row: 3; }
}
/* Subprojecten maken van fases (Tom, 7-11). */
.fv-top { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.fv-top .hint { margin: 0; flex: 1 1 300px; }
.fv-day { font-weight: 600; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
.fv-ph { display: grid; grid-template-columns: minmax(130px, 1.1fr) 132px minmax(0, 1.4fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 4px; background: var(--surface); }
.fv-ph.done { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.fv-ph.done .nm, .fv-ph.done .tm { color: var(--muted); }
.fv-ck { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.fv-ck input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); }
.fv-ph .nm { font-weight: 600; overflow-wrap: anywhere; }
.fv-ph .tm { font-family: var(--font-mono); font-size: 12.5px; }
.fv-ph .wh { color: var(--muted); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.fv-tag { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-ink); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fv-tag svg.i { width: 12px; height: 12px; flex: 0 0 auto; }
.fv-tag.rest { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); font-weight: 500; cursor: default; }
.fv-make { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.fv-make .field { flex: 1 1 240px; }
.fv-list { display: flex; flex-direction: column; gap: 6px; }
.fv-sub { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.fv-sub .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; }
.fv-sub.rest .n { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); }
.fv-subm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.fv-subm input { flex: 1 1 220px; max-width: 360px; font-weight: 600; }
.fv-subm .s { flex: 0 0 100%; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.fv-spans { display: flex; flex-direction: column; gap: 8px; }
.fv-opt { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.fv-opt label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.fv-opt input { margin-top: 3px; accent-color: var(--accent); }
.fv-to { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.fv-to select { width: auto; flex: 0 1 340px; min-width: 0; }
.fv-price { font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 640px) {
  .fv-ph { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
  .fv-ph .fv-ck { grid-column: 1; grid-row: 1; }
  .fv-ph .fv-tag { grid-column: 2; grid-row: 1; max-width: 150px; }
  .fv-ph .tm, .fv-ph .wh { grid-column: 1 / -1; padding-left: 27px; }
  .fv-to select { flex: 1 1 100%; }
}
/* Rentman-import: numbers that already belong to another record (review 1.5). */
.ri-sum > div.ri-clash { display: block; margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.ri-clash ul { margin: 4px 0 0; padding-left: 18px; }
.ri-clash .hint { margin: 6px 0 0; }
/* Instellingen → Controle (review 2.1). */
.ctl-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.ctl-list li.issue { color: var(--danger, #c0392b); }
.ctl-row .title { text-decoration: none; color: inherit; font-weight: 600; }

/* Prullenbak (review 3.6): Terugzetten and the delete icon side by side. */
.bin-row .side { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.bin-row .main-col .small { display: block; }

/* Tasks with a person (review 3.7). */
.todo-who { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.todo-who svg { width: 13px; height: 13px; }
.todo-who.none { color: var(--warn, #b7791f); }
.dash-todo { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.dash-todo:first-child { border-top: 0; }
.dash-todo .todo-check { flex: 1 1 auto; min-width: 0; }
.dash-todo .todo-who { margin-left: 0; }
.dash-todo .c-warn { flex: 0 0 auto; }
@media (max-width: 640px) { .dash-todo { flex-wrap: wrap; } .dash-todo .todo-who { order: 3; margin-left: 28px; } }

/* Project plannen: show or freelance job, and the costs of the freelance route (review 3.4). */
.pf-kind { margin: 0 0 14px; }
.pf-kind .hint { margin: 6px 0 0; }
.pf-costs { display: grid; gap: 6px; margin: 10px 0 12px; }
.pf-cost { display: grid; grid-template-columns: minmax(0, 1fr) 70px 100px 36px; gap: 8px; align-items: center; }
.pf-cost-head { padding: 0 2px; }
.pf-cost input { width: 100%; min-width: 0; }
@media (max-width: 520px) { .pf-cost { grid-template-columns: minmax(0, 1fr) 56px 80px 32px; gap: 6px; } }
.pf-costs.nofin .pf-cost { grid-template-columns: minmax(0, 1fr) 70px 36px; }

/* The phone: agenda month and planbord as a list per day (review 3.2). */
.cal-daylist { display: grid; gap: 10px; margin-top: 10px; }
.cdl-day { background: var(--card, var(--surface)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cdl-day.past { opacity: .72; }
.cdl-day.today { border-color: var(--accent, #e3b34a); }
.cdl-head { margin: 0; padding: 9px 14px; font-size: 13px; font-weight: 700; letter-spacing: .02em; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.cdl-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.cdl-head + .cdl-row { border-top: 0; }
.cdl-row:active { background: var(--hover, rgba(127,127,127,.08)); }
.cdl-row svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.cdl-row.conflict .s { color: var(--danger, #c0392b); }
.cdl-abs .t { color: var(--muted); }
.cdl-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--bar); }
.cdl-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.cdl-main .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdl-main .s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdl-none { margin: 0; padding: 10px 14px; }

/* Subprojecten toevoegen: by dates and places, or from the phases (review 3.5). */
.ms-way { margin: 0 0 14px; }

/* Documents per project (review 4.4). */
.pdoc-row { display: flex; align-items: center; gap: 10px; }
.pdoc-row .main-col { flex: 1 1 auto; min-width: 0; }
.pdoc-row .link-btn.title { text-align: left; font-weight: 600; }

/* Fixed cost posts and receipts (review 4.2). */
.cpost-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 110px 36px; gap: 8px; align-items: center; }
.cpost-row input, .cpost-row select { min-width: 0; width: 100%; }
@media (max-width: 560px) { .cpost-row { grid-template-columns: minmax(0, 1fr) 96px 90px 32px; gap: 6px; } }
.line.cost .rm { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.bon-link { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ok, #2f7d6d); text-decoration: none; white-space: nowrap; }
.bon-link svg { width: 12px; height: 12px; }

/* Asking whether someone can (review 4.3). */
.avl-page { max-width: 520px; margin: 48px auto; padding: 0 16px; }
.avl-title { font-size: 26px; margin: 4px 0 12px; }
.avl-acts { margin-top: 14px; gap: 10px; }
.avl-days { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.avl-row .side { display: flex; gap: 6px; }
/* Facturen: selecting several (review 7.3) */
.doc-pick { cursor: pointer; }
.doc-pick > input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.sel-bar { flex-wrap: wrap; gap: 8px; }
/* Counts in the menu (review 8.3): the same number as on the screen; red = a conflict or something overdue. */
.nav-n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; font-variant-numeric: tabular-nums; }
.nav-n.bad { background: #e5484d; border-color: #e5484d; color: #fff; }
body.rail-small .nav .nav-n { display: inline-grid; position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
body.rail-small .nav a { position: relative; }
.tabbar a { position: relative; }
.tabbar button { position: relative; }
.sheet-menu a .nav-n { margin-left: auto; }
.tabbar .nav-n { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; margin: 0; }
/* Planbord: the row with the days stays on top while scrolling through 40 crew rows (review 8.5, 8-11-2026). The board
   scrolls inside its own frame (both ways), so the sticky header has something to stick to. Not on the phone list. */
@media (min-width: 700px) {
  .plan-wrap { overflow: auto; max-height: calc(100dvh - 210px); min-height: 320px; overscroll-behavior: contain; }
}
/* Agenda on the phone (review 8.6): the filters behind one button, Importeren only on a computer. */
.ag-ftoggle { display: none; }
span.ag-filter { display: contents; }
@media (max-width: 640px) {
  .ag-ftoggle { display: inline-flex; }
  .ag-tools:not(.f-open) .ag-filter { display: none; }
  .ag-tools.f-open .chips.ag-filter { display: flex; }
  .ag-import { display: none; }
}
/* The rate per crew row in Nieuw project (review 9.1): only with amounts shown; empty = the client's last rate. */
.pf-cr:has(.pf-rate) { grid-template-columns: minmax(0, 1.4fr) 64px 96px minmax(0, 1.2fr) minmax(0, 2fr) 30px; }
.pf-rate { width: 100%; }
@media (max-width: 700px) { .pf-cr:has(.pf-rate) { grid-template-columns: minmax(0, 1fr) 56px 30px; } .pf-cr .pf-rate { grid-column: 1 / -1; } .pf-cr:has(.pf-rate) .pf-who, .pf-cr:has(.pf-rate) .pf-phs { grid-column: 1 / -1; } .pf-cr:has(.pf-rate) > .icon-btn { grid-column: 3; grid-row: 1; } }
.pf-like { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.pf-like:empty { display: none; }
/* Project read view: the state at a glance (review 9.4) */
.ov-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.ov-status .ov-st { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.ov-status span.ov-st { cursor: default; }
/* Planbord: to a date, and who is free on a day (review 10.3) */
.plan-jump { width: 150px; }
.plan thead th[data-act="plan-free"] { cursor: pointer; }
.plan thead th[data-act="plan-free"]:hover { background: var(--surface); }
/* Search everywhere (review 11.1) */
.nav-search { background: transparent; border: 1px solid rgba(255,255,255,.14); }
.nav-search kbd { margin-left: auto; font: 600 11px/1 var(--font-mono, ui-monospace, monospace); opacity: .7; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 3px 5px; }
body.rail-small .nav-search > span, body.rail-small .nav-search kbd { display: none; }
body.rail-small .nav-search { justify-content: center; padding-left: 0; padding-right: 0; }
.mobile-search { flex: none; margin-left: auto; }
.mobile-top .mobile-search + .mobile-bell { margin-left: 4px; }
@media (min-width: 900px) { .mobile-search { display: none; } }
.search-modal .sr-box { width: 100%; }
.search-modal .sr-box input { width: 100%; font-size: 16px; }
.sr-list { margin-top: 12px; max-height: min(60vh, 520px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.sr-list:has(> p) { border: 0; }
.sr-g { padding: 8px 14px 4px; font: 600 11.5px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.sr-row { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sr-row.on, .sr-row:hover { background: var(--surface-2); }
.sr-row.on { box-shadow: inset 3px 0 0 var(--accent, #439a86); }
/* Chips outside the list columns take the width of their text (review 9.4 / 8.7). */
.ov-status .warn-chip, .fold-head .warn-chip, .card-head .warn-chip { width: auto; max-width: 100%; }
/* Wie is waar, Week (Tom 8-11): per person a block, per line the days in a fixed narrow column. */
.ww-person { border-top: 1px solid var(--line); padding: 10px 0 6px; }
.ww-list > .ww-person:first-child { border-top: 0; }
.ww-name { font-weight: 600; padding: 0 16px 4px; }
.ww-row { border-top: 0; padding: 4px 16px; gap: 10px; align-items: baseline; }
.ww-days { flex: 0 0 64px; font: 600 13px/1.4 var(--font-display, inherit); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.ww-row .main-col .sub { color: var(--ink, inherit); }
/* Wie is waar on the phone: the day switch gets its own row under the title, its buttons side by side. */
.card-head > .seg { flex-wrap: nowrap; flex: 0 0 auto; }
@media (max-width: 560px) {
  .card-head:has(> .seg) { flex-wrap: wrap; }
  .card-head:has(> .seg) > h2 { flex: 1 1 auto; }
  .card-head > .seg { order: 10; flex: 1 1 100%; }
  .card-head > .seg button { flex: 1 1 0; }
}
/* Crewconflicten: "Bewust dubbel" (Tom 8-11) */
.conf-okrow { display: flex; justify-content: flex-end; padding: 6px 16px 10px; }
.conf-okd .conf-head .spacer { flex: 1; }
/* Uren on a phone (Tom, 9-11): the text over the full width, Klopt and Aanpassen in a row under it. */
@media (max-width: 640px) {
  .row.list-row.hr-row { grid-template-columns: minmax(0, 1fr); }
  .row.list-row.hr-row .main-col, .row.list-row.hr-row .c-warn, .row.list-row.hr-row .side { grid-column: 1; grid-row: auto; }
  .row.hr-row .side { justify-content: stretch; }
  .row.hr-row .side .btn { flex: 1 1 0; }
}
/* ===== Knoppen netjes en uitgelijnd (Tom, 9-11-2026) =====
   1. Knoppen naast elkaar zijn even hoog: een icoonknop naast btn-sm is ook 32 px.
   2. Twee of meer knoppen in een .side staan naast elkaar: rechts, verticaal gecentreerd, 6 px ertussen, niet afbreken;
      verwijderen (prullenbak) als laatste.
   3. Een lijst losse acties (Gegevens): links titel en uitleg, rechts één knop, alle knoppen even breed.
   4. Telefoon: zo'n rij knoppen komt onder de tekst; bij een lijst acties staat de knop onder de tekst, op volle breedte. */
.card-head .icon-btn, .actions .icon-btn, .side .icon-btn, .toolbar .icon-btn, .sel-bar .icon-btn, .ov-acts .icon-btn, .scan-acts .icon-btn, .ku-row .icon-btn, .hr-nav .icon-btn, .ex-filters .icon-btn { width: 32px; height: 32px; }
.row .side.acts, .row .side:has(> :is(.btn, .icon-btn) ~ :is(.btn, .icon-btn)) { flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; max-width: none; }
.ov-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.btn-danger-line { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger-line:hover { background: var(--danger-bg); }
.act-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.act-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.act-row .act-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.act-row > .btn { flex: 0 0 168px; justify-content: center; }
.act-row.act-danger { margin-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .row.list-row > .side.acts, .row.list-row > .side:has(> :is(.btn, .icon-btn) ~ :is(.btn, .icon-btn)) { grid-column: 1 / -1; grid-row: auto; justify-content: flex-end; }
  .act-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .act-row > .btn { flex: 0 0 auto; width: 100%; }
}
/* Accounts on a phone: one block per person, the buttons on a row under it (no table that scrolls sideways). */
@media (max-width: 640px) {
  .acc-table thead { display: none; }
  .acc-table, .acc-table tbody, .acc-table tr, .acc-table td { display: block; width: 100%; }
  .acc-table tr { padding: 10px 12px; border-top: 1px solid var(--line); }
  .acc-table td { padding: 2px 0; border-top: 0; }
  .acc-table td.acc-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding-top: 8px; }
  .acc-table-wrap { overflow-x: visible; }
}
/* In the head of a page the buttons are large (38 px): an icon button there is as high. */
.page-head .actions .icon-btn, .page-head .actions .ov-acts .icon-btn { width: 38px; height: 38px; }
/* Labels en knoppen recht onder elkaar (Tom, 9-11: "invullen moet altijd onder elkaar staan"). In een lijst met een status
   en knoppen heeft het knoppenblok een vaste breedte, zodat het label (Nog invullen, Ingestuurd…) in elke rij op dezelfde
   plek staat, hoeveel knoppen er ook zijn. De knoppen staan rechts. */
@media (min-width: 641px) {
  .row.list-row.hr-row > .side { flex: 0 0 330px; justify-content: flex-end; }
  .row.list-row > .side.ku-sess { flex: 0 0 110px; justify-content: flex-end; }
  .row.list-row.hr-row > .c-warn .flag, .row.list-row > .side.ku-sess ~ .c-warn .flag { white-space: nowrap; }
}