:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem;

  --radius: 14px;
  --radius-sm: 9px;

  /* Maritime slate + signal cyan */
  --bg: oklch(97.5% 0.006 230);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(95% 0.008 230);
  --border: oklch(88% 0.012 230);
  --text: oklch(24% 0.02 245);
  --text-dim: oklch(52% 0.02 245);
  --accent: oklch(58% 0.12 220);
  --accent-soft: oklch(94% 0.03 220);

  --c-offertes: oklch(62% 0.15 265);
  --c-orders: oklch(60% 0.14 220);
  --c-productie: oklch(66% 0.15 155);
  --c-kantoor: oklch(72% 0.14 85);
  --c-werkplaats: oklch(66% 0.16 45);
  --c-administratie: oklch(60% 0.12 320);
  --c-montage: oklch(63% 0.12 195);
  --c-afname: oklch(66% 0.14 118);
  --c-goedkeuring: oklch(66% 0.14 300);

  --ok: oklch(64% 0.14 150);
  --warn: oklch(72% 0.15 70);
  --late: oklch(58% 0.18 25);

  --shadow: 0 1px 2px oklch(24% 0.02 245 / .06), 0 8px 24px oklch(24% 0.02 245 / .06);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg: oklch(17% 0.015 245);
  --surface: oklch(22% 0.017 245);
  --surface-2: oklch(26% 0.018 245);
  --border: oklch(33% 0.02 245);
  --text: oklch(96% 0.005 245);
  --text-dim: oklch(70% 0.015 245);
  --accent: oklch(74% 0.13 215);
  --accent-soft: oklch(30% 0.045 220);
  --shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 10px 30px oklch(0% 0 0 / .35);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: var(--text-base); -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-rows: auto 1fr; height: 100dvh; }

.topbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand svg { width: 30px; height: 30px; color: var(--accent); flex: none; }
.brand img.logo { width: auto; height: 34px; flex: none; display: block; }
.brand-txt { line-height: 1.15; }
.brand-txt b { display: block; font-size: var(--text-sm); letter-spacing: -.01em; }
.brand-txt span { font-size: var(--text-xs); color: var(--text-dim); }

.spacer { flex: 1; }
.clock { font-size: var(--text-lg); font-weight: 650; letter-spacing: -.02em; }
.clock small { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--text-dim); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--text-sm); font-weight: 550; transition: .16s ease;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: transparent; color: oklch(99% 0 0); }
[data-theme="dark"] .btn.primary { color: oklch(18% 0.02 245); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-dim); }
.btn.ghost:hover { color: var(--text); background: var(--surface-2); }
.btn.sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }

.seg { display: flex; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--text-dim);
  padding: var(--space-2) var(--space-3); border-radius: 7px;
  font-size: var(--text-sm); font-weight: 600;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- board ---------- */
.body { display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
.main { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow); }
.kpi b { display: block; font-size: var(--text-xl); font-weight: 680; letter-spacing: -.03em; line-height: 1.05; }
.kpi span { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.chip {
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dept, var(--accent)); }
.chip[aria-pressed="true"] { border-color: var(--dept, var(--accent)); background: color-mix(in oklch, var(--dept, var(--accent)) 14%, transparent); }

.columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
.col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
.col > header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-3); }
.col > header .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dept); }
.col > header h2 { margin: 0; font-size: var(--text-sm); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.col > header .count { margin-left: auto; font-size: var(--text-xs); color: var(--text-dim); font-weight: 600; }
.cards { display: flex; flex-direction: column; gap: var(--space-3); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--dept);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow);
}
.card.done { opacity: .55; }
.card-top { display: flex; align-items: flex-start; gap: var(--space-3); }
.check {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
  background: transparent; flex: none; margin-top: 2px; display: grid; place-items: center; padding: 0;
}
.check[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); }
.check svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.check[aria-pressed="true"] svg { opacity: 1; }
.card h3 { margin: 0; font-size: var(--text-base); font-weight: 620; letter-spacing: -.01em; }
.card .sub { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-dim); }
.card.done h3 { text-decoration: line-through; }
.card-edit { margin-left: auto; opacity: .35; transition: .15s; }
.card:hover .card-edit, .card-edit:focus-visible { opacity: 1; }
.icon-btn { border: 0; background: transparent; color: var(--text-dim); padding: 4px; border-radius: 6px; line-height: 0; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 15px; height: 15px; }

.meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600;
  padding: 3px var(--space-2); border-radius: 6px; background: var(--surface-2); color: var(--text-dim);
  text-decoration: none; border: 1px solid transparent;
}
.tag:hover { border-color: var(--border); color: var(--text); }
.tag svg { width: 12px; height: 12px; }
.tag.mkg { background: var(--accent-soft); color: var(--accent); }
.tag.due-warn { background: color-mix(in oklch, var(--warn) 20%, transparent); color: color-mix(in oklch, var(--warn) 75%, var(--text)); }
.tag.due-late { background: color-mix(in oklch, var(--late) 18%, transparent); color: var(--late); }

.progress { margin-top: var(--space-3); }
.progress-row { display: flex; align-items: center; gap: var(--space-3); }
.bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--dept); transition: width .35s cubic-bezier(.22,.7,.3,1); }
.pct { font-size: var(--text-xs); font-weight: 700; width: 38px; text-align: right; color: var(--text-dim); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 2px 0 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--surface-2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--dept); margin-top: -5px; box-shadow: var(--shadow); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--surface-2); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--dept); border-radius: 50%; background: var(--surface); }

/* ---------- agenda rail ---------- */
.rail { border-left: 1px solid var(--border); background: var(--surface); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5) var(--space-4); }
.rail h2 { margin: 0 0 var(--space-4); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.day { margin-bottom: var(--space-5); }
.day > h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.ev { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.ev time { font-size: var(--text-xs); font-weight: 700; color: var(--text-dim); width: 44px; flex: none; padding-top: 2px; }
.ev .t { font-size: var(--text-sm); font-weight: 550; }
.ev .w { font-size: var(--text-xs); color: var(--text-dim); }
.ev .stripe { width: 3px; border-radius: 2px; background: var(--dept, var(--accent)); flex: none; }

/* ---------- TV mode ---------- */
body.tv .rail { display: none; }
body.tv .body { grid-template-columns: 1fr; }
body.tv { font-size: 1.22rem; }
body.tv .topbar { padding: var(--space-4) var(--space-8); }
body.tv .main { padding: var(--space-6) var(--space-8); }
body.tv .columns { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
body.tv .card-edit, body.tv #board-tools, body.tv input[type=range], body.tv .hide-tv, body.tv .tabs, body.tv .bottomnav { display: none !important; }
body.tv .clock { font-size: var(--text-xl); }
body.tv .tv-agenda { display: block; }
.tv-agenda { display: none; margin-top: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); }
.tv-agenda h2 { margin: 0 0 var(--space-4); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.tv-agenda .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }

/* ---------- dialog ---------- */
dialog {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  padding: 0; width: min(520px, 94vw); box-shadow: 0 30px 80px oklch(0% 0 0 / .3);
}
dialog::backdrop { background: oklch(20% 0.02 245 / .5); backdrop-filter: blur(3px); }
dialog form { padding: var(--space-5); }
dialog h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
label { display: block; font-size: var(--text-xs); font-weight: 650; color: var(--text-dim); margin-bottom: var(--space-1); text-transform: uppercase; letter-spacing: .05em; }
.field { margin-bottom: var(--space-4); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
input[type=text], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dialog-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-5); }
.hint { font-size: var(--text-xs); color: var(--text-dim); margin: calc(-1 * var(--space-3)) 0 var(--space-4); }
.empty { text-align: center; color: var(--text-dim); font-size: var(--text-sm); padding: var(--space-6) var(--space-4); }



/* status + skeleton + read-only */
.status { font-size: var(--text-xs); font-weight: 700; padding: 3px var(--space-2); border-radius: 999px; letter-spacing: .04em; }
.status.ok { background: color-mix(in oklch, var(--ok) 20%, transparent); color: color-mix(in oklch, var(--ok) 80%, var(--text)); }
.status.bad { background: color-mix(in oklch, var(--late) 20%, transparent); color: var(--late); }
.sk { height: 96px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: sk 1.4s infinite; }
@keyframes sk { to { background-position: -200% 0; } }


/* agenda-koppeling */

.cal-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.cal { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.cal b { font-size: var(--text-sm); }
.cal .u { font-size: var(--text-xs); color: var(--text-dim); word-break: break-all; }
.cal .st { font-size: var(--text-xs); font-weight: 650; }
.cal .st.ok { color: var(--ok); }
.cal .st.err { color: var(--late); }
.cal-result { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.cal-result.ok { color: var(--ok); }
.cal-result.err { color: var(--late); }
.cal-result ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--text-dim); font-size: var(--text-xs); }
.ev .src { display: inline-block; margin-left: var(--space-2); font-size: var(--text-xs); color: var(--text-dim); vertical-align: 1px; }
.ev .del { border: 0; background: transparent; color: var(--text-dim); font-size: var(--text-sm); opacity: 0; padding: 0 4px; margin-left: auto; }
.ev:hover .del { opacity: 1; }
.rail h2 .synced { font-size: var(--text-xs); text-transform: none; letter-spacing: 0; color: var(--ok); font-weight: 600; margin-left: var(--space-2); }



/* ===================================================== v2 ===================================================== */
[hidden] { display: none !important; }
body.booting .app, body.booting .login { visibility: hidden; }
.dim { color: var(--text-dim); }
.muted { color: var(--text-dim); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.btn.wide { width: 100%; justify-content: center; padding: var(--space-3); }
.btn.danger { color: var(--late); }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.form-error { color: var(--late); font-size: var(--text-sm); min-height: 1.2em; margin: 0 0 var(--space-3); }

/* rolgebaseerde zichtbaarheid */
body:not(.can-edit) .edit-only, body:not(.is-admin) .admin-only, body:not(.is-demo) .demo-only { display: none !important; }
body.kiosk .usermenu, body.kiosk #tv-toggle { display: none !important; }

/* login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6);
  background: radial-gradient(1200px 600px at 20% -10%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 60%), var(--bg); overflow-y: auto; height: 100dvh; }
.login-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  padding: var(--space-8) var(--space-6) var(--space-6); box-shadow: var(--shadow); }
.brand.big { margin-bottom: var(--space-8); }
.brand.big svg { width: 40px; height: 40px; }
.brand.big img.logo { height: 52px; }
.brand.big .brand-txt b { font-size: var(--text-lg); }
.demo-accounts { margin-top: var(--space-6); border-top: 1px solid var(--border); padding-top: var(--space-4); display: grid; gap: var(--space-2); }
.demo-accounts p { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.demo-acc { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); background: var(--bg);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); text-align: left; }
.demo-acc:hover { border-color: var(--accent); }
.demo-acc span { color: var(--text-dim); font-size: var(--text-xs); }

/* inputs */
input[type=email], input[type=tel], input[type=password], input[type=search], input[type=time] {
  width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); }
input, select { min-height: 40px; }
textarea { resize: vertical; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
dialog { width: min(640px, 94vw); max-height: 92dvh; }
dialog form { overflow-y: auto; }
fieldset.checks { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
fieldset.checks legend { font-size: var(--text-xs); font-weight: 650; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; padding: 0 var(--space-1); }
.check-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 500; margin: 0; }
.check-row input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }

/* topbar tabs + gebruikersmenu */
.tabs { display: flex; gap: 2px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; margin-left: var(--space-4); }
.tabs button { border: 0; background: transparent; color: var(--text-dim); padding: var(--space-2) var(--space-4); border-radius: 7px; font-size: var(--text-sm); font-weight: 600; }
.tabs button[aria-current] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.usermenu { position: relative; }
.avatar-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: var(--text-xs); display: grid; place-items: center; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 230px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 20px 50px oklch(0% 0 0 / .3); padding: var(--space-2); z-index: 40; }
.menu-head { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); }
.menu-head b { display: block; font-size: var(--text-sm); }
.menu-head small { color: var(--text-dim); font-size: var(--text-xs); }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: var(--space-2) var(--space-3); border-radius: 6px; font-size: var(--text-sm); }
.menu button:hover { background: var(--surface-2); }

/* bord toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.toolbar .filters { margin: 0; flex: 1; }
.toolbar select, .toolbar input[type=search] { width: auto; min-width: 200px; background: var(--surface); }
.toolbar input[type=search] { flex: 1; min-width: 220px; }
.kpi.late b { color: var(--late); }
.icon-btn.plus { font-size: 1.05rem; font-weight: 700; line-height: 1; padding: 4px 8px; }
.card-txt { min-width: 0; flex: 1; }
.card .proj { margin: 0 0 1px; font-size: var(--text-xs); font-weight: 650; color: var(--dept); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* mensen */
.people { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.person { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; }
.person small { color: var(--text-dim); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.av { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 750;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); flex: none; }
.av.lg { width: 38px; height: 38px; font-size: var(--text-xs); background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* pagina's */
.page { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6) var(--space-6) var(--space-12); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); max-width: 1400px; }
.page-head h1 { margin: 0 0 var(--space-1); font-size: var(--text-xl); letter-spacing: -.02em; }
.lead { margin: 0; color: var(--text-dim); font-size: var(--text-sm); max-width: 70ch; }
.page > .toolbar, .ptable, .subtabs, .sub { max-width: 1400px; }

/* projecttabel */
.ptable { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.prow { display: grid; grid-template-columns: minmax(200px, 2fr) 150px 110px repeat(3, minmax(120px, 1fr)) 130px 170px;
  gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-sm); }
.prow.phead { border-top: 0; background: var(--surface-2); font-size: var(--text-xs); color: var(--text-dim); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.prow.clickable { cursor: pointer; }
.prow.clickable:hover { background: color-mix(in oklch, var(--accent) 6%, transparent); }
.p-main b { display: block; font-weight: 620; }
.p-main small { color: var(--text-dim); font-size: var(--text-xs); }
.p-prog { display: grid; gap: 4px; }
.p-prog .bar { height: 6px; }
.p-prog .bar i { background: var(--accent); }
.p-prog small { font-size: var(--text-xs); color: var(--text-dim); }
.pill { display: inline-block; padding: 2px var(--space-2); border-radius: 999px; font-size: var(--text-xs); font-weight: 650; background: var(--surface-2); color: var(--text-dim); white-space: nowrap; }
.st-offerte { background: color-mix(in oklch, var(--c-offertes) 20%, transparent); color: color-mix(in oklch, var(--c-offertes) 70%, var(--text)); }
.st-order { background: color-mix(in oklch, var(--c-orders) 20%, transparent); color: color-mix(in oklch, var(--c-orders) 70%, var(--text)); }
.st-productie { background: color-mix(in oklch, var(--c-productie) 20%, transparent); color: color-mix(in oklch, var(--c-productie) 70%, var(--text)); }
.st-montage { background: color-mix(in oklch, var(--c-werkplaats) 20%, transparent); color: color-mix(in oklch, var(--c-werkplaats) 70%, var(--text)); }
.st-opgeleverd { background: color-mix(in oklch, var(--ok) 18%, transparent); color: var(--ok); }
.r-pm { background: var(--accent-soft); color: var(--accent); }
.r-prod { background: color-mix(in oklch, var(--c-productie) 20%, transparent); color: color-mix(in oklch, var(--c-productie) 70%, var(--text)); }
.r-mont { background: color-mix(in oklch, var(--c-werkplaats) 20%, transparent); color: color-mix(in oklch, var(--c-werkplaats) 70%, var(--text)); }
.role-admin { background: var(--accent-soft); color: var(--accent); }
.role-planner { background: color-mix(in oklch, var(--c-kantoor) 22%, transparent); color: color-mix(in oklch, var(--c-kantoor) 60%, var(--text)); }

/* instellingen */
.subtabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); flex-wrap: wrap; }
.subtabs button { border: 0; background: transparent; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--text-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subtabs button[aria-current] { color: var(--text); border-bottom-color: var(--accent); }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.sub-head p { margin: 0; color: var(--text-dim); font-size: var(--text-sm); max-width: 75ch; }
.sub-head p b { color: var(--text); }
.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lrow { display: grid; grid-template-columns: auto minmax(180px, 1.3fr) 2fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.lrow:first-child { border-top: 0; }
.lrow.clickable { cursor: pointer; }
.lrow.clickable:hover { background: color-mix(in oklch, var(--accent) 6%, transparent); }
.lrow.inactive { opacity: .55; }
.l-main b { display: block; font-size: var(--text-sm); }
.l-main small { color: var(--text-dim); font-size: var(--text-xs); }
.roles { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.l-side { font-size: var(--text-xs); text-align: right; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-5); max-width: 900px; }
.panel h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.copyrow { display: flex; gap: var(--space-2); }
.copyrow input { flex: 1; font-size: var(--text-xs); }
.cal-txt { flex: 1; min-width: 0; }
.cal-list { max-width: 900px; }
.ev-txt { min-width: 0; flex: 1; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); padding: var(--space-2) var(--space-4); border-radius: 999px; font-size: var(--text-sm); font-weight: 600;
  transition: .25s ease; z-index: 100; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--late); color: #fff; }

/* bottom nav (mobiel) */
.bottomnav { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .prow { grid-template-columns: minmax(180px, 2fr) 140px 110px repeat(3, 1fr) 150px; }
  .prow > :nth-child(7) { display: none; }
  .clock { display: none; }
}

/* ---------- telefoon ---------- */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; overflow-y: auto; height: auto; }
  .app { display: block; height: auto; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .topbar { position: sticky; top: 0; z-index: 30; padding: var(--space-2) var(--space-4); gap: var(--space-2);
    padding-top: calc(var(--space-2) + env(safe-area-inset-top)); }
  .tabs, .hide-mobile { display: none !important; }
  .brand-txt span { display: none; }
  #add { padding: var(--space-2) var(--space-3); }
  .body { display: block; }
  .main, .page { overflow: visible; padding: var(--space-4); }
  .rail { border-left: 0; border-top: 1px solid var(--border); padding: var(--space-5) var(--space-4); overflow: visible; }
  .kpis { grid-template-columns: repeat(5, minmax(118px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 0 var(--space-4); padding-bottom: 2px; }
  .kpi { scroll-snap-align: start; padding: var(--space-3); }
  .kpi b { font-size: var(--text-lg); }
  .toolbar .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; flex: 1 1 100%; min-width: 0; }
  .chip { white-space: nowrap; }
  .toolbar select, .toolbar input[type=search] { flex: 1 1 100%; min-width: 0; }
  .columns { grid-template-columns: minmax(0, 1fr); }
  .col, .main, .toolbar { min-width: 0; }
  .card-edit { opacity: 1; }
  .card { padding: var(--space-3); }
  input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; }

  .page-head { flex-direction: column; }
  .page-head .btn { width: 100%; justify-content: center; }
  .ptable { background: transparent; border: 0; box-shadow: none; display: grid; gap: var(--space-3); }
  .prow.phead { display: none; }
  .prow { grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); gap: var(--space-3); }
  .prow > :nth-child(7) { display: block; }
  .prow .p-main, .prow .p-prog { grid-column: 1 / -1; }
  .prow [data-l]:not(.p-prog)::before { content: attr(data-l); display: block; font-size: .68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; margin-bottom: 2px; }

  .sub-head { flex-direction: column; align-items: stretch; }
  .lrow { grid-template-columns: auto 1fr; }
  .lrow .roles { grid-column: 2; }
  .lrow .l-side { grid-column: 2; text-align: left; }
  .row2, .row3 { grid-template-columns: 1fr; gap: 0; }
  fieldset.checks { grid-template-columns: 1fr; }
  .copyrow { flex-wrap: wrap; }
  dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  dialog form { height: 100%; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
  .dialog-actions { flex-wrap: wrap; position: sticky; bottom: 0; background: var(--surface); padding-top: var(--space-3); }
  .dialog-actions .btn { flex: 1; justify-content: center; }
  .menu { position: fixed; right: var(--space-3); top: 60px; }

  .bottomnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .bottomnav button { border: 0; background: transparent; color: var(--text-dim); display: grid; justify-items: center; gap: 2px; font-size: .7rem; font-weight: 600; padding: 4px 0; }
  .bottomnav svg { width: 22px; height: 22px; }
  .bottomnav button[aria-current] { color: var(--accent); }
  body.tv .bottomnav { display: none; }
}

/* =================================================================== v3 */
:root {
  --k-afspraak: oklch(64% 0.13 250);
  --k-montage: oklch(62% 0.2 330);
  --k-deadline: oklch(72% 0.16 65);
  --k-oplevering: oklch(64% 0.16 155);
}
[data-theme="dark"] {
  --k-afspraak: oklch(72% 0.12 250);
  --k-montage: oklch(72% 0.18 330);
  --k-deadline: oklch(80% 0.15 75);
  --k-oplevering: oklch(74% 0.15 155);
}
.mobile-only { display: none; }
body.kiosk .hide-kiosk { display: none !important; }
.spacer { flex: 1; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.linkbtn svg { width: 14px; height: 14px; }
.kicker { margin: 0 0 2px; font-size: var(--text-xs); color: var(--text-dim); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; display: flex; gap: 6px; align-items: center; }
.kicker svg { width: 14px; height: 14px; }

/* badges */
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--late); color: #fff; font-size: .66rem; font-weight: 750; line-height: 1; margin-left: 6px; vertical-align: 1px; }
.bell { position: relative; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); width: 36px; height: 36px;
  border-radius: 50%; display: grid; place-items: center; padding: 0; }
.bell:hover { color: var(--text); }
.bell svg { width: 18px; height: 18px; }
.bell .badge { position: absolute; top: -5px; right: -7px; margin: 0; }
.bottomnav button { position: relative; }
.bottomnav .badge { position: absolute; top: 0; left: calc(50% + 4px); margin: 0; }

/* agenda-typen */
.k-afspraak { --k: var(--k-afspraak); }
.k-montage { --k: var(--k-montage); }
.k-deadline { --k: var(--k-deadline); }
.k-oplevering { --k: var(--k-oplevering); }
.ev .stripe { background: var(--k, var(--dept, var(--accent))); width: 4px; }
.ev { border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.ev.linked { cursor: pointer; }
.ev.linked:hover, .ev.linked:focus-visible { background: color-mix(in srgb, var(--k) 10%, transparent); outline: none; }
.ev .kind { color: var(--k); font-weight: 700; margin-right: 6px; }
.ev .ddot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -4px 0 var(--space-3); }
.legend.inline { display: inline-flex; margin: 0 0 0 var(--space-4); text-transform: none; letter-spacing: 0; vertical-align: 2px; }
.legend .lg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--text-dim); font-weight: 600; }
.legend .lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.kdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--k); margin-right: 6px; vertical-align: 0; }
.tag.k-montage { background: color-mix(in oklch, var(--k-montage) 18%, transparent); color: color-mix(in oklch, var(--k-montage) 75%, var(--text)); }
.tag.memo { background: var(--surface-2); color: var(--text-dim); border: 0; cursor: pointer; }
.tag.memo svg { width: 12px; height: 12px; }
.tag.has-action { background: color-mix(in oklch, var(--late) 18%, transparent); color: var(--late); }
.card { cursor: pointer; }
.card:hover { border-color: color-mix(in oklch, var(--dept) 45%, var(--border)); }
.card .yacht { margin: 0; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }
.card .yacht svg { width: 12px; height: 12px; }
.card .people { flex-wrap: wrap; }
.plist { display: flex; flex-direction: column; gap: 3px; }
.p-dates { display: flex; flex-wrap: wrap; gap: 4px; }
.p-main small svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }

/* datumblok in formulieren */
.dates { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4) 0; margin-bottom: var(--space-4); }
.dates .field { margin-bottom: var(--space-3); }
.dates .hint { margin: 0 0 var(--space-3); }

/* meerkeuzelijst */
.ms { position: relative; }
.ms-btn { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); padding: 9px 10px; min-height: 42px; }
.ms-btn[aria-expanded="true"] { border-color: var(--accent); }
.ms-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.ms-val.ph { color: var(--text-dim); }
.ms-btn svg { width: 14px; height: 14px; flex: none; color: var(--text-dim); }
.ms-list { margin-top: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 4px; max-height: 220px; overflow-y: auto; }
.ms-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; margin: 0; text-transform: none; letter-spacing: 0;
  font-size: var(--text-sm); font-weight: 500; color: var(--text); cursor: pointer; }
.ms-opt:hover { background: var(--surface-2); }
.ms-opt input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.ms-empty { margin: 6px; font-size: var(--text-xs); color: var(--text-dim); }

/* detailpaneel */
dialog.sheet { width: min(620px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
dialog.sheet[open] { animation: sheet-in .22s ease-out; }
@keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } }
.sheet-wrap { display: flex; flex-direction: column; height: 100%; }
.sheet-head { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.sheet-title { flex: 1; min-width: 0; }
.sheet-title small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-dim); font-weight: 650; }
.sheet-title small .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sheet-title h2 { margin: 2px 0 0; font-size: var(--text-lg); line-height: 1.25; }
.sheet-head .icon-btn { font-size: 1.5rem; line-height: 1; padding: 2px 8px; }
.sheet-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.fact > span { display: block; font-size: .68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; margin-bottom: 3px; }
.fact > div { font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.fact .p-prog { width: 100%; }
.d-sec { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-bottom: var(--space-4); }
.d-sec h3, .thread-wrap h3 { margin: 0 0 var(--space-3); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.d-sec h3 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.d-sec .btn svg { width: 14px; height: 14px; }
.mini-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.mini-row { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--text-sm); }
.mini-row:hover { background: var(--surface-2); }
.mini-row .dot, .yp .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dept); flex: none; }
.mr-t { flex: 1; min-width: 0; }
.mr-t b { display: block; font-weight: 600; }
.mr-t small { display: block; font-size: var(--text-xs); }
.thread-wrap { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.thread { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-2); }
.msg { max-width: 88%; }
.msg.mine { align-self: flex-end; }
.m-head { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); margin-bottom: 3px; }
.msg.mine .m-head { flex-direction: row-reverse; }
.m-head time { color: var(--text-dim); }
.m-del { border: 0; background: none; color: var(--text-dim); opacity: 0; padding: 0 4px; font-size: 1rem; }
.msg:hover .m-del { opacity: 1; }
.bubble { background: var(--surface-2); border-radius: 4px 14px 14px 14px; padding: 9px 12px; font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; }
.msg.mine .bubble { background: var(--accent-soft); border-radius: 14px 4px 14px 14px; }
.bubble p { margin: 0; }
.bubble img { display: block; max-width: 100%; max-height: 280px; border-radius: 8px; margin-top: 6px; cursor: zoom-in; }
.m-action { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 8px; border-radius: 8px;
  background: color-mix(in oklch, var(--late) 14%, transparent); color: var(--late); font-size: var(--text-xs); font-weight: 600; }
.m-action span { flex: 1; }
.m-action b { color: var(--text); }
.m-action.done { background: color-mix(in oklch, var(--ok) 14%, transparent); color: var(--ok); }
.m-action svg { width: 15px; height: 15px; flex: none; }
.composer { border-top: 1px solid var(--border); padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface); }
.composer textarea { width: 100%; resize: vertical; min-height: 58px; }
.c-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.c-file { margin: 0; display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.c-file svg { width: 16px; height: 16px; }
.c-act { margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--text); font-weight: 550; display: inline-flex; gap: 6px; align-items: center; }
.c-act input { accent-color: var(--late); width: 17px; height: 17px; }
#d-auser { max-width: 220px; padding: 6px 8px; }
.c-photo { position: relative; display: inline-block; margin-bottom: var(--space-2); }
.c-photo img { height: 72px; border-radius: 8px; display: block; }
.c-photo .icon-btn { position: absolute; top: -8px; right: -8px; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; font-size: 1rem; padding: 2px 7px; line-height: 1.1; }
dialog.imgview { width: auto; max-width: 96vw; max-height: 96dvh; background: #000; border: 0; padding: 0; }
dialog.imgview img { display: block; max-width: 96vw; max-height: 96dvh; }
dialog.imgview .icon-btn { position: absolute; top: 8px; right: 8px; background: #0008; color: #fff; font-size: 1.4rem; padding: 2px 10px; }

/* jachten */
.ygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.ycard { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.ycard:hover { border-color: var(--accent); }
.yc-top { display: flex; gap: var(--space-3); align-items: center; }
.yc-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.yc-ico svg { width: 22px; height: 22px; }
.yc-name { flex: 1; min-width: 0; }
.yc-name b { display: block; font-size: var(--text-lg); letter-spacing: -.01em; }
.yc-name small { color: var(--text-dim); font-size: var(--text-xs); }
.yc-meta { font-size: var(--text-xs); }
.yc-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.yc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--text-sm); }
.yc-list li { display: flex; align-items: center; gap: 8px; }
.yc-list .dot { width: 8px; height: 8px; border-radius: 50%; }
.ycard > .tag { align-self: flex-start; }
.back { margin-bottom: var(--space-3); }
.y-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.y-actions .btn svg { width: 15px; height: 15px; }
.ylayout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: start; }
.ylayout .panel { max-width: none; margin: 0; }
.ga-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ga-head h3 { margin: 0; }
.ga-head label.btn { margin: 0; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }
#y-search { width: 100%; margin-bottom: var(--space-3); }
.ga { position: relative; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--border); min-height: 120px; }
.ga.mini { margin-bottom: var(--space-3); }
.ga-load { padding: var(--space-8); text-align: center; color: #667; font-size: var(--text-sm); }
.ga-load.err { color: var(--late); }
.ga-empty { padding: var(--space-8); text-align: center; color: var(--text-dim); background: var(--surface-2); border-radius: var(--radius-sm); }
.ga-empty svg { width: 34px; height: 34px; }
.ga-pages { display: flex; gap: 6px; padding: 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.ga-stage { position: relative; line-height: 0; }
.ga-stage canvas { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.ga-stage.placing { cursor: crosshair; outline: 3px dashed var(--accent); outline-offset: -3px; }
.ga-pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.pin i { width: 20px; height: 20px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pc); border: 2.5px solid #fff; box-shadow: 0 2px 6px #0006; order: 2; }
.pin span { order: 1; margin-bottom: 3px; background: #0f172ae6; color: #fff; font-size: 11px; font-weight: 650; padding: 2px 6px; border-radius: 5px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s; }
.pin:hover span, .pin.focus span, .pin.hit span, .ga.mini .pin span { opacity: 1; }
.pin.focus i, .pin.hit i { width: 26px; height: 26px; animation: pulse 1.6s ease-out 2; }
.pin.dim { opacity: .3; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--pc) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.yp { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.yp.focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.yp-main { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px 6px; font-size: var(--text-sm); flex-wrap: wrap; }
.yp-act { display: flex; gap: 4px; align-items: center; padding: 0 8px 8px 30px; flex-wrap: wrap; }
.yp-act .btn svg { width: 13px; height: 13px; }
.yp-act .sm { font-size: var(--text-xs); }

/* meldingen */
.nlist { display: flex; flex-direction: column; gap: 6px; max-width: 900px; }
.nrow { display: flex; gap: var(--space-3); align-items: flex-start; text-align: left; width: 100%; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
button.nrow:hover { background: var(--surface-2); }
.nrow.unread { border-left: 3px solid var(--accent); }
.nrow.n-actie.unread { border-left-color: var(--late); }
.n-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.n-actie .n-ico { background: color-mix(in oklch, var(--late) 16%, transparent); color: var(--late); }
.n-klaar .n-ico { background: color-mix(in oklch, var(--ok) 16%, transparent); color: var(--ok); }
.n-ico svg { width: 16px; height: 16px; }
.n-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.n-txt { color: var(--text); opacity: .85; }
.n-meta { font-size: var(--text-xs); }
.n-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 6px; }
.n-btns { display: flex; gap: 6px; flex: none; }
.subtabs .badge { margin-left: 4px; }

@media (max-width: 1100px) {
  .ylayout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .mobile-only { display: block; }
  .bell { width: 34px; height: 34px; }
  dialog.sheet { width: 100vw; border-radius: 0; }
  .sheet-body { padding: var(--space-4); }
  .composer { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .facts { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .msg { max-width: 94%; }
  .y-actions { width: 100%; }
  .y-actions .btn { flex: 1; justify-content: center; }
  .page-head .y-actions .btn { width: auto; }
  .ygrid { grid-template-columns: minmax(0, 1fr); }
  .nrow { padding: var(--space-3); }
  .as-card { flex-wrap: wrap; }
  .as-card .n-btns { width: 100%; justify-content: flex-end; }
  .legend.inline { display: none; }
  .pin span { font-size: 10px; }
}
.n-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.y-projects { display: flex; flex-direction: column; gap: 8px; }
.tabs button, .topbar .btn { white-space: nowrap; }
.tabs button { display: inline-flex; align-items: center; }
a.btn, a.btn:visited { color: var(--text); text-decoration: none; }
a.btn svg { color: currentColor; }
@media (max-width: 1500px) and (min-width: 821px) {
  .brand-txt span { display: none; }
  .topbar .btn.ghost.hide-mobile { padding-left: var(--space-2); padding-right: var(--space-2); }
}
dialog.sheet form.composer { height: auto; flex: none; overflow: visible; }
.sheet-body { min-height: 0; }
.sheet-head, .composer { flex: none; }

/* =================================================================== v4 — agenda in Apple-stijl */
:root { --today: oklch(62% 0.22 27); --hour: 48px; }
.view.calview { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--surface); }
.cal-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-2); }
.cal-title { margin: 0; font-size: var(--text-xl); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; display: flex; align-items: baseline; gap: .35em; flex-wrap: wrap; }
.cal-title b { font-weight: 700; text-transform: capitalize; }
.cal-title small { font-size: var(--text-sm); color: var(--text-dim); font-weight: 500; text-transform: capitalize; margin-left: .3em; }
.cal-bar .seg { justify-self: center; }
.cal-bar .seg button { min-width: 64px; }
.cal-nav { justify-self: end; display: flex; gap: 4px; }
.btn.icon { padding: var(--space-2); width: 38px; justify-content: center; }
.btn.icon svg { width: 16px; height: 16px; }
.cal-bar2 { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5) var(--space-3); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cal-who { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 0 4px 0 10px; }
.cal-who svg { width: 16px; height: 16px; color: var(--text-dim); }
.cal-who select { border: 0; background: transparent; font-weight: 600; min-height: 36px; padding-right: 6px; }
.cal-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.kchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.kchip i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--k); background: var(--k); }
.kchip[aria-pressed="false"] { color: var(--text-dim); }
.kchip[aria-pressed="false"] i { background: transparent; }
.cal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cal-body.m-year { overflow-y: auto; }

/* gekleurde items */
.ad, .tl-ev, .mt, .dl { --kc: color-mix(in srgb, var(--k) 22%, var(--surface)); cursor: default; user-select: none; }
.ad { background: var(--kc); color: color-mix(in srgb, var(--k) 55%, var(--text)); border-radius: 4px; padding: 1px 6px; font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.ad span { overflow: hidden; text-overflow: ellipsis; }
.ad.sel, .tl-ev.sel { background: var(--k); color: oklch(99% 0 0); }
[data-theme="dark"] .ad.sel, [data-theme="dark"] .tl-ev.sel { color: oklch(16% 0.02 245); }
.mt { display: flex; align-items: center; gap: 5px; font-size: .74rem; padding: 1px 4px; border-radius: 4px; white-space: nowrap; }
.mt i { width: 7px; height: 7px; border-radius: 50%; background: var(--k); flex: none; }
.mt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mt time { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: .7rem; }
.mt.sel { background: var(--k); color: oklch(99% 0 0); }
.mt.sel i { background: currentColor; } .mt.sel time { color: inherit; }

/* maand */
.month { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mhead { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.mhead span { text-align: right; padding: 6px 10px; font-size: var(--text-xs); color: var(--text-dim); font-weight: 600; }
.mgrid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(var(--weeks), minmax(92px, 1fr)); }
.mc { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 4px 2px; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.mc:nth-child(7n) { border-right: 0; }
.mc.wknd { background: color-mix(in oklch, var(--surface-2) 55%, var(--surface)); }
.mc .mn { align-self: flex-end; font-size: var(--text-sm); font-weight: 500; padding: 1px 6px; border-radius: 999px; min-width: 26px; text-align: center; cursor: pointer; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.mc .mn:hover { background: var(--surface-2); }
.mc.other .mn { color: var(--text-dim); opacity: .6; }
.mc.today .mn { background: var(--today); color: #fff; font-weight: 700; }
.more { border: 0; background: none; color: var(--text-dim); font-size: .72rem; font-weight: 600; text-align: left; padding: 0 4px; cursor: pointer; }
.more:hover { color: var(--text); }
.mdots { display: flex; gap: 3px; justify-content: center; min-height: 6px; }
.mdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); }

/* dag / week: tijdlijn */
.tl { flex: 1; min-height: 0; display: flex; flex-direction: column; --cols: 1; }
.tl.cols-7 { --cols: 7; }
.tl-head, .tl-allday, .tl-grid { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); }
.tl-dh { text-align: center; padding: 6px 4px; font-size: var(--text-sm); color: var(--text-dim); cursor: pointer; border-left: 1px solid transparent; }
.tl-dh b { color: var(--text); font-weight: 500; margin-left: 2px; display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; }
.tl-dh.today { color: var(--today); font-weight: 600; }
.tl-dh.today b { background: var(--today); color: #fff; font-weight: 700; }
.tl-allday { border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
.tl-allday .tl-gut { font-size: .68rem; color: var(--text-dim); padding: 6px 6px 6px 0; text-align: right; }
.tl-adc { border-left: 1px solid var(--border); padding: 3px 2px; min-height: 28px; min-width: 0; }
.tl-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tl-grid { position: relative; }
.tl-grid > .tl-gut { position: relative; }
.tl-grid > .tl-gut span { position: absolute; right: 8px; transform: translateY(-50%); font-size: .7rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tl-col { position: relative; border-left: 1px solid var(--border); }
.tl-col.wknd { background: color-mix(in oklch, var(--surface-2) 45%, var(--surface)); }
.tl-hr { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.tl-hr:first-child { border-top: 0; }
.tl-ev { position: absolute; background: var(--kc); border-left: 3px solid var(--k); border-radius: 5px; padding: 3px 6px; font-size: .74rem; line-height: 1.25; overflow: hidden; color: color-mix(in srgb, var(--k) 50%, var(--text)); z-index: 1; }
.tl-ev b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-ev span { display: block; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-ev.tiny { padding-top: 1px; } .tl-ev.tiny b { display: inline; } .tl-ev.tiny span:not(.tl-who) { display: inline; margin-left: 4px; }
.tl-ev .tl-who { margin-top: 2px; font-weight: 600; }
.tl-now { position: absolute; left: -1px; right: 0; border-top: 2px solid var(--today); z-index: 3; pointer-events: none; }
.tl-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--today); }

/* dag: zijpaneel */
.day-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.day-wrap .tl { border-right: 1px solid var(--border); }
.day-side { overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.day-info h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.dl { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 8px; cursor: pointer; }
.dl:hover { background: var(--surface-2); }
.dl > i { width: 4px; align-self: stretch; border-radius: 2px; background: var(--k); flex: none; }
.dl b { display: block; font-size: var(--text-sm); font-weight: 600; }
.dl small { color: var(--text-dim); font-size: var(--text-xs); }
.info { border-left: 4px solid var(--k); padding: 4px 0 4px 12px; }
.info .kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--k); }
.info h4 { margin: 2px 0 6px; font-size: var(--text-lg); letter-spacing: -.01em; }
.info p { margin: 0 0 4px; font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; }
.info .i { width: 14px; height: 14px; }
.info .btn { margin-top: var(--space-2); }

/* mini-maand + jaar */
.mini-h { font-size: var(--text-sm); margin-bottom: 6px; } .mini-h b { text-transform: capitalize; }
.mini-t { border: 0; background: none; font-weight: 700; font-size: var(--text-base); color: var(--today); text-transform: capitalize; padding: 0 0 6px; cursor: pointer; }
.mini-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mini-g .wd { font-size: .64rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; }
.md { border: 0; background: none; font-size: .76rem; aspect-ratio: 1; border-radius: 50%; padding: 0; cursor: pointer; color: var(--text); font-variant-numeric: tabular-nums; position: relative; }
.md:hover { background: var(--surface-2); }
.md.has::after { content: ""; position: absolute; left: 50%; bottom: 8%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--text-dim); }
.md.busy { background: color-mix(in oklch, var(--accent) 16%, transparent); }
.md.today { background: var(--today); color: #fff; font-weight: 700; } .md.today::after { background: #fff; }
.md.picked:not(.today) { background: var(--text); color: var(--surface); }
.year { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-8); padding: var(--space-5) var(--space-6) var(--space-10); }

/* suffix @proseidon */
.suffix-input { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.suffix-input:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.suffix-input input { border: 0 !important; flex: 1; min-width: 0; outline: none !important; background: transparent; }
.suffix-input .suffix { display: flex; align-items: center; padding: 0 12px; background: var(--surface-2); color: var(--text-dim); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.suffix-input.prefix .suffix { padding: 0 10px; }
.field small.muted { display: block; margin: 4px 0 0; font-size: var(--text-xs); }
.reset-box { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: var(--space-3); margin-top: var(--space-4); }
.reset-box small { display: block; margin: 2px 0 0; font-size: var(--text-xs); }
.reset-out { background: var(--accent-soft); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--text-sm); margin: var(--space-3) 0 0; }
.reset-out code { font-size: var(--text-base); font-weight: 700; letter-spacing: .03em; user-select: all; }
.note { background: var(--accent-soft); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.push-help { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.push-help ol { margin: 6px 0; padding-left: 1.2em; }
.dialog-actions.left { justify-content: flex-start; margin-top: 0; }
.muted.small { font-size: var(--text-xs); margin-top: var(--space-4); }
.n-toegewezen .n-ico { color: var(--k-montage); } .n-agenda .n-ico { color: var(--k-afspraak); }
body.tv #view-agenda { display: none; }

@media (max-width: 1100px) { .year { grid-template-columns: repeat(3, 1fr); } .day-wrap { grid-template-columns: minmax(0, 1fr) 250px; } }
@media (max-width: 820px) {
  .view.calview { overflow: visible; }
  .cal-bar { grid-template-columns: 1fr auto; padding: var(--space-3) var(--space-4) var(--space-2); gap: var(--space-2); }
  .cal-title { font-size: var(--text-lg); }
  .cal-bar .seg { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .cal-bar .seg button { flex: 1; min-width: 0; }
  .cal-nav .btn { padding: 6px 10px; } .cal-nav .btn.icon { width: 34px; padding: 6px; }
  .cal-bar2 { padding: 0 var(--space-4) var(--space-3); gap: var(--space-2); }
  .cal-kinds { flex-wrap: nowrap; overflow-x: auto; width: 100%; order: 3; padding-bottom: 2px; }
  .kchip { white-space: nowrap; }
  .cal-who { flex: 1; } .cal-who select { width: 100%; }
  .cal-body { overflow: visible; }
  .mgrid { grid-template-rows: repeat(var(--weeks), 52px); }
  .mc { padding: 3px 1px; align-items: center; cursor: pointer; }
  .mc .mn { align-self: center; font-size: .9rem; margin: 0; }
  .mc.picked:not(.today) .mn { background: var(--text); color: var(--surface); }
  .mhead span { text-align: center; padding: 6px 0; }
  .mlist { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
  .mlist h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
  .tl-scroll { max-height: calc(100dvh - 290px); }
  .tl-head, .tl-allday, .tl-grid { grid-template-columns: 40px repeat(var(--cols), minmax(0, 1fr)); }
  .tl.cols-7 .tl-dh { font-size: .66rem; padding: 4px 0; } .tl.cols-7 .tl-dh b { display: grid; margin: 2px auto 0; min-width: 24px; height: 24px; font-size: .8rem; }
  .tl.cols-7 .tl-ev { padding: 2px 3px; font-size: .64rem; border-left-width: 2px; } .tl.cols-7 .tl-ev span { display: none; }
  .tl.cols-7 .ad { font-size: .62rem; padding: 1px 3px; }
  .tl-grid > .tl-gut span { font-size: .62rem; right: 4px; }
  .day-wrap { display: flex; flex-direction: column; }
  .day-wrap .tl { border-right: 0; }
  .day-side { order: -1; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
  .day-side .mini { display: none; }
  .year { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); padding: var(--space-4); }
  .reset-box { flex-direction: column; align-items: stretch; }
}
.app { grid-template-columns: minmax(0, 1fr); }
.view.calview { min-width: 0; }
.cal-title b, .cal-title small, .mini-h b, .mini-t { text-transform: none; }
.tl-grid { margin-top: 8px; }

/* ================= v5: klikbare tegels, overzicht, werkstroom ================= */
.kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
button.kpi { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
button.kpi:hover { border-color: var(--accent); }
button.kpi:active { transform: translateY(1px); }
button.kpi[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
button.kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi.k-off b { color: var(--c-offertes); }
.kpi.k-ord b { color: var(--c-productie); }
.kpi.k-fac b { color: var(--c-administratie); }
body.tv button.kpi { cursor: default; }

.col-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-3) var(--space-1) 0; }
.col-link { border: 1px dashed var(--border); background: transparent; color: var(--text-dim); border-radius: 999px; padding: 4px 10px;
  font: inherit; font-size: var(--text-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.col-link svg { width: 13px; height: 13px; }
.col-link:hover { color: var(--text); border-style: solid; }
.col-link.hot { border: 1px solid color-mix(in srgb, var(--dept) 55%, transparent); color: color-mix(in srgb, var(--dept) 75%, var(--text)); background: color-mix(in srgb, var(--dept) 10%, transparent); }

.overview { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-5) var(--space-5); }
.ov-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.ov-head h2 { margin: 2px 0 0; font-size: var(--text-lg); letter-spacing: -.01em; }
.ov-kick { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); font-weight: 600; }
.ov-count { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.ov-sec { margin-bottom: var(--space-5); }
.ov-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; }
.ov-sec h3 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dept); }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); align-items: start; }
.ov-bars { display: grid; gap: 6px; margin-bottom: var(--space-5); }
.ov-bar { display: grid; grid-template-columns: 12px 130px 1fr 52px 64px; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.ov-bar[aria-pressed="true"] { border-color: var(--dept); box-shadow: 0 0 0 1px var(--dept); }
.ov-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dept); }
.ov-bar .bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ov-bar .bar i { display: block; height: 100%; background: var(--dept); border-radius: inherit; }
.ov-bar b { text-align: right; }

/* werkstroom-stappen */
.flow-steps { display: flex; align-items: stretch; gap: 4px; margin-bottom: var(--space-4); overflow-x: auto; padding-bottom: 2px; }
.fstep { flex: 1 1 0; min-width: 104px; display: grid; gap: 2px; text-align: left; font: inherit; cursor: pointer; background: var(--surface);
  border: 1px solid var(--border); border-top: 3px solid var(--k); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text); }
.fstep b { font-size: var(--text-lg); line-height: 1.1; }
.fstep span { font-size: var(--text-xs); color: var(--text-dim); font-weight: 600; }
.fstep.hot b { color: var(--k); }
.fstep[aria-current] { background: color-mix(in srgb, var(--k) 10%, var(--surface)); border-color: var(--k); }
.farrow { display: grid; place-items: center; color: var(--text-faint, var(--text-dim)); flex: none; }
.farrow svg { width: 16px; height: 16px; }

.flist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); align-items: start; }
.flow-tools { display: flex; justify-content: flex-end; margin: calc(-1 * var(--space-3)) 0 var(--space-3); }
.flow-board { display: grid; grid-template-columns: repeat(6, minmax(250px, 1fr)); gap: var(--space-3); align-items: start; overflow-x: auto; padding-bottom: var(--space-3); }
.fcol { background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid var(--k); border-radius: var(--radius); padding: var(--space-3); min-width: 0; }
.fcol > header { display: flex; align-items: center; gap: 8px; padding: 2px 4px var(--space-3); }
.fcol > header .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--k); }
.fcol > header h2 { margin: 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.fcol > header .count { margin-left: auto; font-size: var(--text-xs); color: var(--text-dim); font-weight: 700; }
.fcol-list { display: grid; gap: var(--space-3); }
.fcol .empty { padding: var(--space-4) var(--space-2); font-size: var(--text-xs); }

.fcard { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--k); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); box-shadow: var(--shadow); display: grid; gap: var(--space-2); cursor: pointer; }
.fcard:hover { border-color: color-mix(in srgb, var(--k) 45%, var(--border)); }
.fc-top { display: flex; align-items: flex-start; gap: var(--space-2); }
.fc-txt { flex: 1; min-width: 0; }
.fc-txt h3 { margin: 0; font-size: var(--text-sm); font-weight: 680; line-height: 1.3; }
.fc-txt p { margin: 0; font-size: var(--text-xs); }
.fc-txt .yacht { display: flex; align-items: center; gap: 4px; color: var(--text-dim); font-weight: 600; margin-bottom: 2px; }
.fc-txt .yacht svg { width: 12px; height: 12px; }
.fcard .meta { display: flex; flex-wrap: wrap; gap: 5px; }
.fc-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--text-xs); }
.fc-tasks li { display: flex; align-items: center; gap: 7px; }
.fc-tasks li .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dept); flex: none; }
.fc-tasks li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-tasks li small { color: var(--text-dim); }
.fc-tasks li.ok span { color: var(--text-dim); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-dim) 50%, transparent); }
.fc-tasks li.ok small { color: var(--ok); font-weight: 650; }
.fc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.fc-foot .spacer { flex: 1; }

.st-factureren { background: color-mix(in srgb, var(--c-administratie) 18%, transparent); color: color-mix(in srgb, var(--c-administratie) 70%, var(--text)); }
.st-gefactureerd { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge.soft { background: var(--c-offertes); }

/* detail: werkstroombalk */
.d-flow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; border: 1px solid var(--border); background: var(--surface-2);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.d-flow > div { flex: 1 1 220px; display: grid; gap: 2px; }
.d-flow b { font-size: var(--text-sm); }
.d-flow small { color: var(--text-dim); font-size: var(--text-xs); }
.d-flow-btns { display: flex; gap: 6px; }

/* sjabloon-editor + doorzet-dialoog */
dialog.wide { width: min(820px, 96vw); }
.o-h { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); }
.tpl-head, .tpl-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px 120px 140px 150px 32px; gap: 8px; align-items: center; }
.tpl-head.o, .tpl-row.o { grid-template-columns: 110px minmax(0, 1fr) 156px 120px 130px 150px 28px; }
.tpl-row .ms { min-width: 0; }
.tpl-head { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 0 2px 4px; }
.tpl-row { margin-bottom: 6px; }
.tpl-row input, .tpl-row select { width: 100%; min-width: 0; }
.tpl-row .t-del { font-size: 1.2rem; line-height: 1; }
#o-rows + .btn { margin-top: 4px; }

@media (max-width: 820px) {
  .kpis { grid-template-columns: repeat(8, minmax(112px, 1fr)); }
  .overview { padding: var(--space-3); border-radius: var(--radius-sm); }
  .ov-head { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .ov-grid, .flist { grid-template-columns: 1fr; }
  .ov-bar { grid-template-columns: 12px 1fr 70px 44px; }
  .ov-bar small { display: none; }
  .fstep { min-width: 92px; }
  .farrow { display: none; }
  .flow-board { grid-template-columns: repeat(6, 82vw); scroll-snap-type: x mandatory; }
  .fcol { scroll-snap-align: start; }
  .tpl-head { display: none; }
  .tpl-row, .tpl-row.o { grid-template-columns: 1fr 1fr 1fr 32px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .tpl-row .t-title { grid-column: 1 / -1; grid-row: 1; }
  .tpl-row .t-del { grid-column: 4; grid-row: 2; }
}
@media (min-width: 821px) {
  .kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); }
  .kpis .kpi { padding: var(--space-3) var(--space-3); min-width: 0; }
  .kpis .kpi span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .05em; }
}
body.tv .kpis .kpi b { font-size: var(--text-xl); }
.fcard:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }
.flow-board { grid-template-columns: repeat(6, minmax(205px, 1fr)); }
.fcol-list { grid-template-columns: minmax(0, 1fr); }
.fcard, .fc-txt, .fcard .meta, .fc-tasks { min-width: 0; }
.fcard { padding: var(--space-3); }
.fc-top .pill { flex: none; }
.fcol .fc-top .pill { display: none; }
.flow-tools select { width: auto; min-width: 200px; }
.fc-foot .btn.primary { margin-left: auto; }
@media (max-width: 820px) { .flow-board { grid-template-columns: repeat(6, 82vw); } }
.fcard { grid-template-columns: minmax(0, 1fr); }
.fc-tasks li { min-width: 0; max-width: 100%; } .fcard > * { min-width: 0; max-width: 100%; }

/* =================================================================== v6 */
:root { --k-verlof: oklch(62% 0.03 245); --k-feestdag: oklch(66% 0.14 25); }
[data-theme="dark"] { --k-verlof: oklch(72% 0.03 245); --k-feestdag: oklch(74% 0.13 25); }
.k-verlof { --k: var(--k-verlof); }
.k-feestdag { --k: var(--k-feestdag); }
.dl.k-verlof, .ev.k-verlof, .mi.k-verlof { opacity: .85; }
body:not(.can-agenda) .need-agenda, body:not(.can-import) .need-import, body:not(.can-capacity) .need-capacity,
body:not(.can-yachts) .need-yachts, body:not(.can-leave) .need-leave, body:not(.can-leave_own) .need-leave_own,
body:not(.has-emp) .need-emp, body:not(.fb-on) .need-fb, body.kiosk .need-fb { display: none !important; }
[hidden] { display: none !important; }

.head-btns { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.head-btns select { width: auto; }
.tag.pos { background: color-mix(in oklch, var(--c-offertes) 14%, transparent); color: color-mix(in oklch, var(--c-offertes) 70%, var(--text)); font-variant-numeric: tabular-nums; }
.fc-desc { margin: 4px 0 0; font-size: var(--text-xs); color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* taal */
.menu-lang, .login-lang { display: flex; gap: 2px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; margin: var(--space-1) 0 var(--space-2); }
.menu-lang button, .login-lang button { flex: 1; text-align: center !important; border: 0; background: transparent; padding: 6px 8px !important; border-radius: 6px; font-size: var(--text-xs) !important; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.menu-lang button[aria-pressed="true"], .login-lang button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.login-lang { max-width: 220px; margin: 0 auto var(--space-4); }

/* chips met checkbox */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-check { position: relative; display: inline-flex; margin: 0; text-transform: none; letter-spacing: 0; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-check span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 550; color: var(--text-dim); background: var(--surface); transition: background .15s, border-color .15s, color .15s; }
.chip-check span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dept, var(--accent)); opacity: .35; }
.chip-check input:checked + span { border-color: var(--dept, var(--accent)); color: var(--text); background: color-mix(in oklch, var(--dept, var(--accent)) 14%, transparent); }
.chip-check input:checked + span::before { opacity: 1; }
.chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* werktijden */
#m-sched { display: grid; gap: 4px; }
.sched-row { display: grid; grid-template-columns: 130px 100px auto 100px 1fr; gap: var(--space-2); align-items: center; }
.sched-row input[type=time], .sched-row input[type=number] { padding: 6px 8px; min-height: 0; }
.sched-row .s-brk { display: inline-flex; gap: 6px; align-items: center; }
.sched-row .s-brk input { width: 70px; }
.sched-row.off input[type=time], .sched-row.off .s-brk { opacity: .35; pointer-events: none; }
.sched-tools { font-size: var(--text-xs); color: var(--text-dim); margin-top: var(--space-2); }
.lv-now { color: var(--k-feestdag); font-weight: 650; }

/* lijsten */
.list.mini { border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 50vh; overflow: auto; }
.list.mini .lrow, .cap-sec .list .lrow, .lrow.lv { grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.lrow .l-main { display: flex; flex-direction: column; min-width: 0; }
.lrow .l-main small { color: var(--text-dim); font-size: var(--text-xs); }
.empty.sm { padding: var(--space-3); }
.inline-add { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 480px; }
.inline-add input { flex: 1; }

/* waarschuwingen */
.warn-h { color: color-mix(in oklch, var(--warn) 70%, var(--text)); }
.warn-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.warn-list li { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--warn) 12%, transparent); border-left: 3px solid var(--warn); font-size: var(--text-sm); }
.warn-list li.w-leave, .warn-list li.w-leave_conflict { background: color-mix(in oklch, var(--k-feestdag) 10%, transparent); border-left-color: var(--k-feestdag); }
.warn-list li .linkbtn { color: inherit; font-weight: 500; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: 3px; }

/* import */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; text-transform: none; letter-spacing: 0; text-align: center; padding: var(--space-6); transition: border-color .15s, background .15s; margin-bottom: var(--space-3); }
.drop b { font-size: var(--text-base); color: var(--text); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop.busy { pointer-events: none; opacity: .7; animation: sk 1.4s infinite; }
.i-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.i-meta span { display: block; font-size: var(--text-xs); color: var(--text-dim); }
.i-meta div { min-width: 0; overflow-wrap: anywhere; }
.i-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.i-list { max-height: 46vh; overflow: auto; margin-bottom: var(--space-3); }
.i-row { display: grid; grid-template-columns: 70px 1fr 110px; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); align-items: start; }
.i-row.off .i-main, .i-row.off .i-side { opacity: .45; }
.i-chk { display: flex; gap: 6px; align-items: center; margin: 0; padding-top: 8px; }
.i-chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.i-pos { font-weight: 700; }
.i-main { display: grid; gap: 4px; min-width: 0; }
.i-main .i-name { font-weight: 650; }
.i-main .i-desc { font-size: var(--text-sm); resize: vertical; }
.i-scope { color: var(--text-dim); font-size: var(--text-xs); }
.i-exists { color: color-mix(in oklch, var(--warn) 70%, var(--text)); font-size: var(--text-xs); }
.i-side { display: grid; gap: 4px; justify-items: end; padding-top: 4px; font-size: var(--text-sm); }
.i-side .i-qty { width: 64px; padding: 4px 6px; min-height: 0; text-align: right; }

/* bulk doorzetten */
.o-batch { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-4); background: var(--surface-2); }
.o-batch-list { display: grid; gap: 4px; margin: var(--space-2) 0 0 26px; max-height: 180px; overflow: auto; }
.o-batch .pill { margin-left: 4px; }

/* rollen-matrix */
.matrix-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
:is(#role-matrix, #bar-matrix) { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
:is(#role-matrix, #bar-matrix) th, :is(#role-matrix, #bar-matrix) td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
:is(#role-matrix, #bar-matrix) thead th { position: sticky; top: 0; background: var(--surface); vertical-align: bottom; z-index: 1; }
:is(#role-matrix, #bar-matrix) .m-perm { text-align: left; font-weight: 500; white-space: normal; min-width: 220px; position: sticky; left: 0; background: var(--surface); z-index: 2; }
:is(#role-matrix, #bar-matrix) .m-role { display: block; font-weight: 700; }
:is(#role-matrix, #bar-matrix) .m-acts { display: block; font-size: var(--text-xs); font-weight: 500; }
:is(#role-matrix, #bar-matrix) .m-group th { text-align: left; background: var(--surface-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); position: static; }
:is(#role-matrix, #bar-matrix) input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
#role-matrix input:disabled { cursor: default; opacity: .6; }
#role-matrix tbody tr:not(.m-group):hover td, #role-matrix tbody tr:not(.m-group):hover th { background: color-mix(in oklch, var(--accent) 5%, var(--surface)); }
.m-renform { display: flex; gap: 4px; }
.m-renform input { width: 120px; padding: 4px 6px; min-height: 0; }
.linkbtn.danger { color: var(--late); }

/* feedback */
.fb-fab { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 40; border: 0; border-radius: 999px; padding: 10px 18px; background: var(--text); color: var(--bg); font-weight: 650; font-size: var(--text-sm); box-shadow: var(--shadow); cursor: pointer; }
.fb-fab:hover { background: var(--accent); }
body.tv .fb-fab, body.kiosk .fb-fab { display: none; }
.lrow.fb { grid-template-columns: auto 1fr; align-items: start; }
.fb-text { margin: 6px 0 0; white-space: pre-wrap; font-size: var(--text-sm); }
.pill.mood-goed { background: color-mix(in oklch, var(--ok) 18%, transparent); color: color-mix(in oklch, var(--ok) 70%, var(--text)); }
.pill.mood-idee { background: var(--accent-soft); color: var(--accent); }
.pill.mood-probleem { background: color-mix(in oklch, var(--late) 16%, transparent); color: var(--late); }
.seg.mood { margin-bottom: var(--space-4); }
.seg.mood button { flex: 1; }
#fb-badge { margin-left: 6px; }

/* capaciteit */
.cap { display: grid; gap: var(--space-6); }
.cap-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--accent-soft); font-size: var(--text-sm); }
.cap-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.ck { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); display: grid; gap: 2px; }
.ck span { font-size: var(--text-xs); color: var(--text-dim); font-weight: 600; }
.ck b { font-size: var(--text-xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ck small { font-size: var(--text-xs); color: var(--text-dim); }
.ck.bad b { color: var(--late); }
.ck.warn b { color: color-mix(in oklch, var(--warn) 75%, var(--text)); }
.cap-sec h2 { font-size: var(--text-base); margin: 0 0 var(--space-3); display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.cap-sec h2 small { font-weight: 500; font-size: var(--text-xs); }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.cap-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--dept); border-radius: var(--radius); padding: var(--space-4); display: grid; gap: var(--space-3); }
.cap-card header { display: flex; align-items: center; gap: var(--space-2); }
.cap-card header .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dept); }
.cap-card h3 { margin: 0; font-size: var(--text-sm); flex: 1; }
.cap-card footer { display: flex; justify-content: space-between; font-size: var(--text-xs); }
.cap-card .neg { color: var(--late); font-weight: 650; }
.cap-extra { font-size: var(--text-xs); color: color-mix(in oklch, var(--warn) 70%, var(--text)); }
.bars { display: flex; gap: 3px; align-items: stretch; height: 120px; }
.bcol { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bcol small { text-align: center; font-size: 10px; color: var(--text-dim); }
.bstack { position: relative; flex: 1; }
.bstack i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 1px 1px; }
.bstack .cap { background: color-mix(in oklch, var(--dept) 16%, var(--surface-2)); outline: 1px dashed color-mix(in oklch, var(--dept) 45%, transparent); outline-offset: -1px; }
.bstack .load { left: 22%; right: 22%; background: var(--dept); }
.bstack .load.high { background: var(--warn); }
.bstack .load.over { background: var(--late); }
.pill.low, .pill.mid { background: color-mix(in oklch, var(--ok) 16%, transparent); color: color-mix(in oklch, var(--ok) 70%, var(--text)); }
.pill.high { background: color-mix(in oklch, var(--warn) 22%, transparent); color: color-mix(in oklch, var(--warn) 65%, var(--text)); }
.pill.over { background: color-mix(in oklch, var(--late) 18%, transparent); color: var(--late); }
.cap-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--text-dim); margin: var(--space-3) 0 0; }
.cap-legend span { display: inline-flex; gap: 6px; align-items: center; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg.cap { background: var(--surface-2); outline: 1px dashed var(--text-dim); outline-offset: -1px; }
.lg.load.low { background: var(--accent); } .lg.load.high { background: var(--warn); } .lg.load.over { background: var(--late); }
.heat-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.heat { border-collapse: collapse; width: 100%; font-size: var(--text-xs); }
.heat th, .heat td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.heat thead th { color: var(--text-dim); font-weight: 600; background: var(--surface); position: sticky; top: 0; }
.heat tbody th { text-align: left; font-weight: 500; position: sticky; left: 0; background: var(--surface); min-width: 170px; }
.heat tbody th small { display: block; font-size: 10px; }
.heat .person { display: inline-flex; gap: 6px; align-items: center; font-size: var(--text-sm); }
.heat .av { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); display: inline-grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; }
.hc { min-width: 58px; }
.hc b { display: block; font-size: var(--text-xs); }
.hc small { display: block; font-size: 10px; }
.hc.none { color: var(--text-dim); }
.hc.low { background: color-mix(in oklch, var(--ok) 8%, transparent); }
.hc.mid { background: color-mix(in oklch, var(--ok) 20%, transparent); }
.hc.high { background: color-mix(in oklch, var(--warn) 30%, transparent); }
.hc.over { background: color-mix(in oklch, var(--late) 28%, transparent); color: color-mix(in oklch, var(--late) 70%, var(--text)); }
.lvmark { color: var(--k-feestdag); font-weight: 600; }

@media (max-width: 820px) {
  .sched-row { grid-template-columns: 1fr 88px auto 88px; }
  .sched-row .s-brk { grid-column: 2 / -1; }
  .i-row { grid-template-columns: 56px 1fr; }
  .i-side { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; gap: var(--space-3); }
  .cap-grid { grid-template-columns: 1fr; }
  .fb-fab { bottom: calc(76px + env(safe-area-inset-bottom)); right: var(--space-3); padding: 8px 14px; }
  #role-matrix .m-perm { min-width: 150px; }
  .head-btns { width: 100%; }
}
.armed { background: var(--late) !important; color: #fff !important; border-color: var(--late) !important; }
.cap, .cap > *, #view-capacity { min-width: 0; } .cap-sec { min-width: 0; overflow: hidden; }
@media (max-width: 1600px) and (min-width: 821px) {
  body:not(.tv) .tabs button { padding: var(--space-2) var(--space-3); }
  body:not(.tv) .topbar { gap: var(--space-2); }
}
@media (max-width: 1480px) and (min-width: 821px) {
  body:not(.tv) .clock { display: none; }
  body:not(.tv) #add-event { display: none; }
}
@media (max-width: 1180px) and (min-width: 821px) {
  body:not(.tv) #add-project, body:not(.tv) #tv-toggle { display: none; }
  body:not(.tv) .tabs button { padding: var(--space-2) var(--space-2); font-size: var(--text-xs); }
}
.warn-list.clipped li:nth-child(n+7) { display: none; }
h2 > .legend.inline { display: flex; flex-wrap: wrap; margin: 6px 0 0; gap: 4px 10px; }
.sched-row { grid-template-columns: 120px minmax(112px, 130px) auto minmax(112px, 130px) 1fr; }
.sched-row .s-brk { white-space: nowrap; }
.sched-row .s-brk input { width: 60px; }
@media (max-width: 820px) { .sched-row { grid-template-columns: 1fr 112px auto 112px; } }

/* GA-locatie kiezen */
.ga-loc { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: 36px; font-size: var(--text-sm); }
.ga-loc #p-gainfo { display: inline-flex; align-items: center; gap: 6px; }
.ga-loc #p-gainfo svg { width: 16px; height: 16px; color: var(--accent); }
#gadlg { width: min(1100px, 96vw); }
#gadlg .ga { max-height: calc(100vh - 320px); min-height: 240px; overflow: auto; }
.ga-loc .btn svg { width: 16px; height: 16px; flex: none; }
.ga-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0; }
.ga-pick .chip svg { width: 13px; height: 13px; vertical-align: -2px; }
.ga-pick .chip.done { border-color: var(--accent); }
.ga-hint { margin: var(--space-2) 0; }
.d-garow { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.d-ganone .muted { margin: 0 0 var(--space-2); }
.pin.other { opacity: .55; }


/* ================= v8 ================= */
/* KPI gemiddelde voortgang: altijd vooraan, vaste plek */
.kpi.k-avg { position: sticky; left: 0; z-index: 2; background: color-mix(in oklch, var(--accent) 9%, var(--surface)); border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.kpi.k-avg b { color: var(--accent); }
.kpi-bar { display: block; height: 4px; border-radius: 99px; background: var(--border); margin-top: 8px; overflow: hidden; }
.kpi-bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* bord: week / alles */
.tool-right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.scope { display: flex; align-items: center; gap: var(--space-2); }
.scope small { font-size: var(--text-xs); white-space: nowrap; }
.chip-sep { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; padding: 0 2px 0 var(--space-3); border-left: 1px solid var(--border); align-self: center; }
.col > header small.gen { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

/* statussen */
.st-montage { background: color-mix(in oklch, var(--c-montage) 20%, transparent); color: color-mix(in oklch, var(--c-montage) 70%, var(--text)); }
.st-afname { background: color-mix(in oklch, var(--c-afname) 20%, transparent); color: color-mix(in oklch, var(--c-afname) 65%, var(--text)); }
.st-gefactureerd { background: color-mix(in srgb, var(--text-dim) 16%, transparent); color: var(--text-dim); }
.pill.ready { outline: 1.5px solid currentColor; outline-offset: -1.5px; }
.pill.st-done { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }

/* werkstroom: 7 fasen */
.flow-board { grid-template-columns: repeat(7, minmax(236px, 1fr)); }
.flow-tools { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.flow-hint { font-size: var(--text-xs); margin: 0; }
.fcol-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin: var(--space-3) 4px var(--space-1); }
.fcard.ready { border-color: color-mix(in srgb, var(--k) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k) 35%, transparent), var(--shadow); }
.fcard.closed { opacity: .62; }
.ftrack { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: var(--space-2) 0; padding: 0; }
.ftrack li { height: 5px; border-radius: 99px; background: var(--border); position: relative; }
.ftrack li.past { background: color-mix(in srgb, var(--k) 55%, var(--border)); }
.ftrack li.now { background: var(--k); }
.ftrack li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.d-flow { display: block; }
.d-flow-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.d-flow-top > div { flex: 1 1 220px; display: grid; gap: 2px; }
.d-flow .ftrack { grid-template-columns: repeat(7, 1fr); margin: var(--space-3) 0 0; }
.d-flow .ftrack li { height: auto; background: none; padding-top: 9px; }
.d-flow .ftrack li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 99px; background: var(--border); }
.d-flow .ftrack li.past::before { background: color-mix(in srgb, var(--k) 55%, var(--border)); }
.d-flow .ftrack li.now::before { background: var(--k); }
.d-flow .ftrack li span { position: static; width: auto; height: auto; clip: auto; font-size: 10.5px; color: var(--text-dim); display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-flow .ftrack li.now span { color: var(--text); font-weight: 650; }
.btn.armed { outline: 2px solid var(--warn); outline-offset: 1px; }

/* voortgang in het taakvenster */
.d-prog { display: grid; gap: var(--space-2); width: 100%; }
.d-prog-row { display: flex; align-items: center; gap: var(--space-3); }
.d-prog-row input[type=range] { flex: 1; accent-color: var(--accent); min-width: 120px; }
.d-prog-row .d-pct { min-width: 3.2em; text-align: right; font-size: var(--text-base); }
.d-prog-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.d-prog-btns .chip { padding: 3px 10px; }
.d-prog-btns .btn svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }

/* bevestigen voltooid */
dialog.ask { width: min(460px, 94vw); }
.ask-task { font-weight: 650; margin: 0 0 var(--space-2); }
dialog.ask .check-row { display: flex; gap: 8px; align-items: flex-start; margin: var(--space-3) 0 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); }

/* datumveld met kalender */
.dp { position: relative; display: flex; align-items: stretch; width: 100%; }
.dp .dp-txt { width: 100%; padding-right: 38px; }
.dp .dp-txt.bad { border-color: var(--late); box-shadow: 0 0 0 2px color-mix(in srgb, var(--late) 25%, transparent); }
.dp .dp-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; color: var(--text-dim); border-radius: 6px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.dp .dp-btn:hover { color: var(--accent); background: var(--surface-2); }
.dp .dp-btn svg { width: 17px; height: 17px; }
.dp-pop { position: fixed; inset: auto; margin: 0; z-index: 1000; width: 268px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 12px 40px #0006; display: none; font-size: var(--text-sm); }
.dp-pop:popover-open, .dp-pop.show { display: block; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-head b { font-size: var(--text-sm); }
.dp-nav { width: 30px; height: 30px; border: 0; border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.dp-nav:hover { background: var(--border); }
.dp-wd, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-wd span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; padding: 4px 0; font-weight: 600; }
.dp-grid button { height: 32px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.dp-grid button:hover { background: var(--surface-2); }
.dp-grid button.we { color: var(--text-dim); }
.dp-grid button.out { color: var(--text-dim); opacity: .45; }
.dp-grid button.today { box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 700; }
.dp-grid button.sel { background: var(--accent); color: #fff; font-weight: 700; opacity: 1; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.dp-link { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.dp-link:hover { background: var(--surface-2); }
.tpl-row .dp { min-width: 132px; }

/* zoeken */
.search-btn { width: 38px; height: 38px; display: grid; place-items: center; }
.search-btn svg { width: 19px; height: 19px; }
dialog.search-dlg { width: min(680px, 94vw); margin-top: 8vh; padding: 0; overflow: hidden; max-height: 80dvh; }
.search-form { display: flex; flex-direction: column; max-height: 80dvh; }
.search-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.search-bar svg { width: 20px; height: 20px; color: var(--text-dim); flex: none; }
.search-bar input { flex: 1; border: 0; background: none; font-size: var(--text-base); padding: 8px 0; box-shadow: none; outline: none; color: var(--text); }
.search-bar kbd { font: 600 11px var(--font); color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.search-res { overflow: auto; padding: var(--space-2) var(--space-2) var(--space-3); }
.search-empty { padding: var(--space-6) var(--space-4); text-align: center; font-size: var(--text-sm); margin: 0; }
.search-g h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin: var(--space-3) var(--space-3) var(--space-1); font-weight: 650; }
.search-item { width: 100%; display: flex; align-items: center; gap: var(--space-3); text-align: left; border: 0; background: none; color: var(--text); font: inherit; padding: 8px var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
.search-item .dot { background: var(--c); flex: none; }
.search-item[aria-selected="true"], .search-item:hover { background: var(--surface-2); }
.search-item .si-t { flex: 1; min-width: 0; display: grid; }
.search-item .si-t b { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item .si-t small { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { dialog.search-dlg { margin-top: 0; } .scope small { display: none; } }

@media (min-width: 821px) {
  .kpis .kpi span { white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; min-height: 2.5em; }
}
.brand-txt b, .brand-txt span { white-space: nowrap; }
@media (max-width: 1500px) { .topbar .brand-txt span { display: none; } }
@media (max-width: 1440px) and (min-width: 821px) { .topbar .brand-txt { display: none; } }
h2 .legend.inline { display: flex; flex-wrap: wrap; margin: 6px 0 0; line-height: 1.3; }
.d-flow:not(:has(.d-flow-top)) { display: flex; }
.legend .lg { width: auto; height: auto; border-radius: 0; }
@media (max-width: 480px) { .topbar .brand-txt { display: none; } }
.search-item .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@media (max-width: 760px) { dialog.search-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; } .search-form { max-height: 100dvh; height: 100%; } }
#askdlg .btn.danger { background: var(--late); color: #fff; border-color: transparent; }
#ask-copy { width: 100%; margin-top: var(--space-2); font-family: var(--font-mono, monospace); font-size: var(--text-xs); }

/* ---- v9: project met meerdere orders */
.prow.jrow { background: color-mix(in oklch, var(--accent) 5%, var(--surface)); border-top: 2px solid var(--border); }
.prow.jrow .p-main b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-base); }
.prow.jrow .j-ico svg { width: 16px; height: 16px; color: var(--accent); }
.prow.jrow .j-ready { font-size: var(--text-sm); color: var(--text-muted); align-self: center; }
.prow.jrow .j-act { display: flex; align-items: center; }
.prow.jrow .j-act .btn { white-space: normal; text-align: left; line-height: 1.2; }
.prow.orow .p-main { padding-left: 26px; position: relative; }
.prow.orow .p-main::before { content: ""; position: absolute; left: 8px; top: 2px; bottom: 50%; width: 10px; border-left: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); border-bottom-left-radius: 4px; }
.prow.orow .p-main b { font-weight: 600; }
.btn.wait, .btn[aria-disabled="true"] { opacity: .75; border-style: dashed; cursor: help; }
.fc-job { margin: 0 0 2px; font-size: var(--text-xs); }
.fc-job .linkbtn { font-weight: 650; }
.d-wait { display: block; margin-top: 4px; color: var(--warn, #964219); }
.jorders { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.jorder { display: grid; gap: 6px; text-align: left; width: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.jorder:hover { border-color: var(--accent); }
.jo-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.jo-top .spacer { flex: 1; }
.jorder .ftrack { margin: 0; }
.o-brow { display: flex; align-items: center; gap: var(--space-2); }
.o-brow .check-row { flex: 1; min-width: 0; }
.o-bnr { width: 150px; flex: none; padding: 4px 8px; }
.o-batch-list { max-height: 260px; }
@media (max-width: 720px) { .prow.orow .p-main { padding-left: 18px; } .prow.jrow .j-act:empty { display: none; } }
.prow.orow.solo { border-top: 2px solid var(--border); }
.prow.orow.solo .p-main { padding-left: 0; }
.prow.orow.solo .p-main::before { display: none; }

/* ---- v10 */
.o-typebar { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.o-typebar .o-h { margin: 0 0 6px; }
.o-typebar .field { margin: 0; min-width: 240px; }
.o-btpl { width: 190px; flex: none; padding: 4px 6px; font-size: var(--text-sm); }
@media (max-width: 720px) { .o-brow { flex-wrap: wrap; } .o-btpl, .o-bnr { width: calc(50% - 4px); } }
.terms { display: grid; gap: 6px; margin-bottom: 6px; }
.term { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.term .tm-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2, var(--bg)); font-size: var(--text-xs); font-weight: 700; }
.term.t-reached { border-color: color-mix(in srgb, var(--c-administratie) 55%, var(--border)); }
.term.t-reached .tm-n { background: var(--c-administratie); color: #fff; }
.term.t-inv { opacity: .78; } .term.t-inv .tm-n { background: var(--ok); color: #fff; }
.term .tm-t { min-width: 0; } .term .tm-t b { display: block; font-weight: 600; } .term .tm-t small { display: block; }
.term .tm-p { text-align: right; font-weight: 600; } .term .tm-p small { display: block; font-weight: 400; }
.term .btn { white-space: nowrap; }
@media (max-width: 640px) { .term { grid-template-columns: 28px minmax(0, 1fr) auto; } .term .pill { grid-column: 2; justify-self: start; } .term .btn { grid-column: 3; } }
.pill.st-niet_gegund { background: color-mix(in srgb, var(--text-dim) 16%, transparent); color: var(--text-dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.fc-tasks li.sub { opacity: .8; font-size: .95em; }
.pp-edit { display: grid; gap: 6px; }
.pp-plan { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--surface); }
.pp-plan-head { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.pp-plan-head input { flex: 1; font-weight: 600; }
.pp-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 200px 32px; gap: 8px; align-items: center; }
.pp-line .pp-pct { text-align: right; }
.pp-sum { font-size: var(--text-sm); } .pp-sum.bad { color: var(--danger, #b43b3b); font-weight: 600; }
@media (max-width: 640px) { .pp-line { grid-template-columns: 1fr 80px 32px; } .pp-line .pp-ms { grid-column: 1 / 3; } }
.tplbar { display: flex; gap: var(--space-2); align-items: end; flex-wrap: wrap; margin-bottom: var(--space-3); }
.tplbar .field { margin: 0; }
.bk-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: var(--text-sm); max-height: 220px; overflow: auto; }
.bk-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 5px 0; border-bottom: 1px solid var(--border); }
.bk-days { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-days label { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 99px; cursor: pointer; }
.bk-days input:checked + span { font-weight: 700; }
.share-links { display: grid; gap: var(--space-3); }
.share-links .copyrow { display: flex; gap: 6px; } .share-links .copyrow input { flex: 1; min-width: 0; }


/* ================================================================ v11 */
.st-goedkeuring { background: color-mix(in oklch, var(--c-goedkeuring) 20%, transparent); color: color-mix(in oklch, var(--c-goedkeuring) 65%, var(--text)); }

/* menubalk: met veel knoppen een eigen rij onder het logo */
.topbar { flex-wrap: wrap; row-gap: var(--space-2); }
.tabs.wide { order: 50; flex: 1 0 100%; margin-left: 0; flex-wrap: wrap; row-gap: 2px; }
.tabs.wide > button, .tabs.wide .tab-ph { padding: var(--space-2) 11px; }
.tabs.wide .tab-flow { flex-wrap: wrap; }
.tab-flow { display: inline-flex; align-items: stretch; gap: 0; margin: 0 4px; padding: 0 2px; border-radius: 8px;
  background: color-mix(in oklch, var(--surface) 55%, transparent); }
.tabs .tab-ph { position: relative; padding-left: var(--space-3); padding-right: var(--space-3); gap: 6px; }
.tabs .tab-ph::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); flex: none; }
.tabs .tab-ph + .tab-ph::after { content: "›"; position: absolute; left: -4px; color: var(--text-dim); opacity: .6; font-weight: 400; }
.tabs .tab-ph[aria-current] { box-shadow: inset 0 -2px 0 var(--k), var(--shadow); }
.ph-n { font-size: 11px; font-weight: 700; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); text-align: center; line-height: 18px; }
.tabs .tab-ph[aria-current] .ph-n { background: color-mix(in oklch, var(--k) 22%, transparent); color: var(--text); }
.ph-n.hot { background: var(--k); color: #fff; }

/* stap-scherm */
#view-phase .page-head h1 { display: flex; align-items: center; gap: var(--space-3); }
#view-phase .page-head h1::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--k); }
#ph-steps { margin-bottom: var(--space-4); max-width: 1400px; }
.ph-tools { max-width: 1400px; }
.ph-tools input[type=search] { flex: 1 1 260px; }
.ph-list { display: grid; gap: var(--space-5); max-width: 1400px; padding-bottom: var(--space-8); }
.ph-sub { margin: var(--space-2) 0 0; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .05em; }
.ph-job { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ph-job.closed { opacity: .8; }
.ph-jhead { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: var(--space-4); align-items: center;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--k) 6%, var(--surface)); }
.ph-jhead h2 { margin: 0; font-size: var(--text-lg); line-height: 1.25; }
.ph-jhead h2 .linkbtn { color: var(--text); font-weight: 700; text-align: left; }
.ph-jhead p { margin: 2px 0 0; font-size: var(--text-sm); }
.ph-jhead .yacht { margin: 0 0 2px; font-size: var(--text-xs); color: var(--text-dim); display: flex; gap: 4px; align-items: center; }
.ph-jhead .yacht svg { width: 14px; height: 14px; }
.ph-jprog { display: flex; align-items: center; gap: var(--space-2); }
.ph-jprog .bar i { background: var(--k); }
.ph-jbtns { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.ph-lines { display: grid; gap: 0; }
.ph-job > .fcard, .ph-job > .line { border-radius: 0; }
.line { padding: var(--space-4) var(--space-5); border-left: 3px solid var(--k); display: grid; gap: var(--space-3); }
.ph-lines .line + .line { border-top: 1px solid var(--border); }
.line.ready { background: color-mix(in oklch, var(--ok) 6%, transparent); }
.ln-top { display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; }
.ln-txt { min-width: 0; display: grid; gap: 4px; }
.ln-txt h3 { margin: 0; font-size: var(--text-base); }
.ln-txt h3 .linkbtn { color: var(--text); font-weight: 700; text-align: left; }
.ln-txt .meta { display: flex; flex-wrap: wrap; gap: 5px; }
.ln-people { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; font-size: var(--text-sm); }
.ln-role { display: inline-flex; align-items: center; gap: var(--space-2); }
.ln-role > small { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.ln-names { display: inline-flex; align-items: center; gap: 4px; }
.ln-names .av + .av { margin-left: -6px; }
.ln-edit svg { width: 14px; height: 14px; }
.ln-prog { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; gap: var(--space-3); align-items: center; }
.ln-prog .bar i, .st-prog .bar i, .subt .st-prog .bar i { background: var(--k); }
.ln-prog b { font-size: var(--text-sm); }
.ln-prog input[type=range] { grid-column: 1 / -1; }
.av.sm { width: 22px; height: 22px; font-size: .6rem; }
.subts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.subt { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.subt.ok { opacity: .75; }
.subt-main { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto minmax(104px, auto) auto 130px; gap: var(--space-3); align-items: center; padding: 8px var(--space-3); }
.subt-title { justify-content: flex-start; text-align: left; color: var(--text); min-width: 0; flex-wrap: wrap; gap: 2px 8px; }
.subt-title b { font-weight: 650; overflow-wrap: anywhere; }
.sub-dept { font-size: var(--text-xs); font-weight: 700; color: var(--dept); text-transform: uppercase; letter-spacing: .04em; }
.st-ppl { display: inline-flex; }
.st-ppl .av + .av { margin-left: -6px; }
.st-time { font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; text-align: right; }
.st-time b { color: var(--late); font-weight: 700; }
.st-prog { display: grid; grid-template-columns: 1fr 34px; gap: 6px; align-items: center; }
.st-prog .bar { height: 6px; }
.st-prog small { font-size: var(--text-xs); color: var(--text-dim); text-align: right; }
.subt .st-prog .bar i { background: var(--dept); }
.chk { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border); background: var(--surface); display: inline-grid; place-items: center; padding: 0; cursor: pointer; color: #fff; }
.chk svg { width: 13px; height: 13px; }
.chk[aria-pressed=true], .chk.ro:not(.dot-only):has(svg) { background: var(--ok); border-color: var(--ok); }
.chk.ro { cursor: default; }
.chk:not(.ro):hover { border-color: var(--ok); }
.steps { list-style: none; margin: 0; padding: 0 var(--space-3) 8px calc(var(--space-3) + 26px + var(--space-3)); display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto minmax(104px, auto) 130px; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.step .chk { width: 18px; height: 18px; border-radius: 5px; }
.step .chk svg { width: 11px; height: 11px; }
.step.ok .st-name { color: var(--text-dim); text-decoration: line-through; text-decoration-color: color-mix(in oklch, currentColor 40%, transparent); }
.step.over .st-time { color: var(--late); }
.st-name { min-width: 0; overflow-wrap: anywhere; }
.steps.mini { padding: 6px 0 0; }
.steps.mini .step { grid-template-columns: 18px minmax(0, 1fr) auto 80px; font-size: var(--text-xs); }
.steps.mini .st-prog { display: none; }
.steps.mini .st-ppl { display: none; }

/* processen in het taakvenster */
.steps-box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.steps-box legend { font-size: var(--text-sm); font-weight: 700; padding: 0 var(--space-1); }
#dlg { width: min(800px, 96vw); }
.step-head, .step-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 84px 84px minmax(0, 1fr) 84px 28px; gap: 6px; align-items: center; }
.step-row .sr-num input { padding-left: 8px; padding-right: 4px; }
.step-head { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 0 2px 4px; }
.step-row { margin-bottom: 6px; }
.step-row input, .step-row select { width: 100%; min-width: 0; }
.sr-name { display: grid; gap: 4px; min-width: 0; }
.sr-num { display: flex; align-items: center; gap: 3px; }
.sr-num small { color: var(--text-dim); font-size: var(--text-xs); }
.step-add { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.step-add select { max-width: 280px; }
.step-add small { flex: 1 1 100%; }
input:disabled { opacity: .6; }

/* processen in de instellingen */
.proc-head, .proc-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px 140px 60px 32px; gap: 8px; align-items: center; }
.proc-head { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 0 2px 4px; }
.proc-row { margin-bottom: 6px; }
.proc-row input[type=text], .proc-row input[type=number], .proc-row select { width: 100%; min-width: 0; }
.pr-act { display: grid; place-items: center; }
.pr-act input { width: 18px; height: 18px; accent-color: var(--accent); }

/* menubalk-instellingen */
.bar-preview { margin-top: var(--space-5); display: grid; gap: var(--space-2); max-width: 1200px; }
.bar-preview h3 { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.bp-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.bp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.bp-tab { padding: 2px 8px; border-radius: 6px; background: var(--surface-2); font-size: var(--text-xs); font-weight: 600; color: var(--text-dim); }
.bp-tab.ph { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--text); }

@media (max-width: 1100px) {
  .ph-jhead { grid-template-columns: minmax(0, 1fr) 140px; }
  .ph-jbtns { grid-column: 1 / -1; justify-content: flex-start; }
  .subt-main { grid-template-columns: 26px minmax(0, 1fr) auto 90px; }
  .subt-main > .tag, .subt-main > span:empty { display: none; }
  .subt-main .st-prog { grid-column: 2 / -1; }
  .step { grid-template-columns: 18px minmax(0, 1fr) auto 90px; }
  .step .st-prog { grid-column: 2 / -1; }
}
@media (max-width: 820px) {
  .ph-jhead { grid-template-columns: 1fr; padding: var(--space-3) var(--space-4); }
  .line { padding: var(--space-3) var(--space-4); }
  .ln-top { flex-direction: column; }
  .subt-main { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .subt-main .st-time { display: none; }
  .steps { padding-left: var(--space-3); }
  .step { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .step .st-time { display: none; }
  .step-head { display: none; }
  .step-row { grid-template-columns: 1fr 1fr 1fr 28px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .step-row .sr-name { grid-column: 1 / -1; }
  .step-row .sr-ppl { grid-column: 1 / -1; }
  .proc-head { display: none; }
  .proc-row { grid-template-columns: 1fr 1fr 32px; }
  .proc-row .pr-name { grid-column: 1 / -1; }
  .bp-row { grid-template-columns: 1fr; }
}
#tplform, #procform { max-width: 1120px; }
#odlg { width: min(1120px, 96vw); }

/* ================================================================ v12 */
/* meerkeuzelijsten in tabellen: als uitklapmenu over de rest heen, zelfde tekstgrootte als de andere velden */
.tpl-row .ms, .step-row .ms { position: relative; }
.tpl-row .ms-btn, .step-row .ms-btn { min-height: 40px; font-size: var(--text-sm); }
.tpl-row .ms-val, .step-row .ms-val { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-row .ms-list, .step-row .ms-list { position: absolute; z-index: 40; right: 0; top: 100%; min-width: 240px; max-height: 280px;
  box-shadow: var(--shadow); padding: 6px; }
.ms-opt { font-size: var(--text-sm); display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.ms-opt input { width: 16px; height: 16px; min-height: 0; flex: none; accent-color: var(--accent); }
.ms-opt:hover { background: var(--surface-2); }
.tpl-row select, .tpl-row input, .step-row select, .step-row input { font-size: var(--text-sm); }

/* doorzetten naar order: regels goed leesbaar */
.o-batch-list { display: grid; gap: 6px; margin-top: var(--space-3); }
.o-bhead { display: grid; grid-template-columns: 26px minmax(0, 1fr) 190px; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 0 var(--space-3); }
.o-brow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 190px; gap: var(--space-3); align-items: start; padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.o-brow > input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.ob-txt { display: grid; gap: 2px; min-width: 0; }
.ob-name { font-size: var(--text-sm); line-height: 1.35; overflow-wrap: anywhere; }
.ob-desc { color: var(--text-dim); font-size: var(--text-xs); line-height: 1.4; overflow-wrap: anywhere; }
.o-brow .o-bnr { width: 100%; }
.o-gacheck { margin: var(--space-3) 0 0; }
@media (max-width: 820px) { .o-brow, .o-bhead { grid-template-columns: 26px minmax(0, 1fr); } .o-brow .o-bnr { grid-column: 2; } .o-bhead span:last-child { display: none; } }

/* bestellijst */
#matdlg { width: min(980px, 96vw); }
.mat-head, .mat-row { display: grid; grid-template-columns: 70px 62px minmax(0, 2fr) 100px minmax(0, 1fr) 150px 28px; gap: 8px; align-items: center; }
.mat-head { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 0 2px 4px; }
.mat-row { margin-bottom: 6px; }
.mat-row input { width: 100%; min-width: 0; font-size: var(--text-sm); }
.mat-chk { display: grid; place-items: center; }
.mat-chk input { width: 20px; height: 20px; accent-color: var(--ok); }
.mat-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); padding: 0 var(--space-3) 8px calc(var(--space-3) + 26px + var(--space-3)); }
.mat-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mchip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }
.mchip.ok { color: var(--ok); border-color: color-mix(in oklch, var(--ok) 40%, var(--border)); }
.mchip svg { width: 11px; height: 11px; }
#f-matbtn { margin-top: var(--space-2); }
@media (max-width: 820px) { .mat-head { display: none; } .mat-row { grid-template-columns: 40px 40px 1fr 1fr 28px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .mat-row .m-name { grid-column: 3 / -1; } .mat-row .m-qty { grid-column: 1 / 3; }
  .mat-row .mat-chk::after { content: 'Besteld'; font-size: 10px; color: var(--text-dim); } .mat-row .mat-rec::after { content: 'Binnen'; } }
.mchip.in { color: var(--ok); background: color-mix(in oklch, var(--ok) 14%, var(--surface)); border-color: color-mix(in oklch, var(--ok) 50%, var(--border)); }
.mchip.late { color: var(--late); border-color: color-mix(in oklch, var(--late) 55%, var(--border)); }
.mat-row.late .m-due { border-color: var(--late); color: var(--late); }
.late-txt { color: var(--late); }
.mat-rec input { accent-color: var(--accent); }

/* standaardregels productie en montage */
.ptpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.ptpl-grid h4 { margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 8px; }
.ptpl-head, .ptpl-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 28px; gap: 8px; align-items: center; }
.ptpl-head { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 0 2px 4px; }
.ptpl-row { margin-bottom: 6px; }
.ptpl-row input { width: 100%; min-width: 0; }
#ptplform, #otplform { max-width: 1120px; }
@media (max-width: 820px) { .ptpl-grid { grid-template-columns: 1fr; } }

/* GA: zoomen, schuiven, pop-up bij een punt */
.ga-scroll { position: relative; }
.ga-scroll.zoom { overflow: auto; max-height: 72vh; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: grab; overscroll-behavior: contain; }
.ga-scroll.zoom.dragging { cursor: grabbing; user-select: none; }
.ga-scroll.zoom .ga-stage { margin: 0; max-width: none; }
.ga-stage img, .ga-stage canvas { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.ga-stage.placing, .ga-stage.placing img, .ga-stage.placing canvas { cursor: crosshair; }
.ga-zoom { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); justify-content: flex-end; }
.ga-zoom .icon-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; font-size: 1.2rem; }
.ga-zoom [data-zl] { min-width: 48px; text-align: center; font-size: var(--text-sm); color: var(--text-dim); }
.ga.mini.clickable { cursor: zoom-in; }
.pin-pop { position: absolute; z-index: 20; transform: translate(-50%, calc(-100% - 18px)); min-width: 200px; max-width: 300px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 10px 12px; display: grid; gap: 4px; font-size: var(--text-sm); cursor: pointer; text-align: left; }
.pin-pop::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--surface);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: translateX(-50%) rotate(45deg); }
.pin-pop .pp-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pin-pop small { color: var(--text-dim); line-height: 1.35; }
.pin-pop:hover { border-color: var(--accent); }
dialog.gaview { width: min(1400px, 97vw); height: min(940px, 95dvh); padding: var(--space-4); display: none; }
dialog.gaview[open] { display: flex; flex-direction: column; gap: var(--space-3); }
.gv-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.gv-head h2 { margin: 0; }
.gv-head p { margin: 2px 0 0; font-size: var(--text-xs); }
.gv-tools { display: flex; gap: var(--space-2); align-items: center; }
#gv-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#gv-box .ga-scroll.zoom { flex: 1; max-height: none; }
#gadlg { width: min(1200px, 96vw); }

/* nieuw item even laten oplichten */
@keyframes pbflash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--accent); } }
.flash { animation: pbflash 1.3s ease 2; }
.ln-tog { justify-self: start; font-size: var(--text-sm); }
label.o-brow { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); font-size: var(--text-sm); margin: 0; }
label.o-brow .ob-name b { font-weight: 650; }
label.o-brow:has(input[type=checkbox]:not(:checked)) { opacity: .6; }
.pin-pop.al-l { transform: translate(-14px, calc(-100% - 18px)); } .pin-pop.al-l::after { left: 14px; }
.pin-pop.al-r { transform: translate(calc(-100% + 14px), calc(-100% - 18px)); } .pin-pop.al-r::after { left: calc(100% - 14px); }
.pin-pop.below { transform: translate(-50%, 18px); } .pin-pop.below::after { bottom: auto; top: -7px; transform: translateX(-50%) rotate(225deg); }
.pin-pop.below.al-l { transform: translate(-14px, 18px); } .pin-pop.below.al-r { transform: translate(calc(-100% + 14px), 18px); }
.pin-pop { line-height: 1.35; white-space: normal; }
/* ---------- v13: tekeningen, foto's, handtekening, werkbon */
.att-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.att { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 4px 6px 4px 10px; }
.att-open { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--text-sm); padding: 4px 0; }
.att-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-open:hover { color: var(--accent); }
.att-open svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.att-photos { margin-top: var(--space-3); }
.att-photos h4 { font-size: var(--text-sm); margin: 0 0 6px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.thumb { position: relative; width: 92px; height: 92px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .icon-btn { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; background: oklch(0% 0 0 / .55); color: #fff; font-size: 15px; }
.pp-photos { display: flex; gap: 4px; align-items: center; }
.pp-photos img { width: 54px; height: 42px; object-fit: cover; border-radius: 5px; }
.sg-orders { margin: 0 0 var(--space-3); padding-left: 1.2em; font-size: var(--text-sm); display: grid; gap: 2px; }
.sg-okf { align-self: end; }
.chk-line { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: 0 !important; font-size: var(--text-sm) !important; color: var(--text) !important; font-weight: 500 !important; min-height: 44px; }
.chk-line input { width: 20px; height: 20px; accent-color: var(--ok); }
.sg-wrap { position: relative; border: 2px dashed var(--border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
#sg-pad { display: block; width: 100%; height: 220px; touch-action: none; cursor: crosshair; }
.sg-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa3ad; font-size: 1.1rem; pointer-events: none; }
.sg-line { position: absolute; left: 6%; right: 6%; bottom: 46px; border-bottom: 1px solid #c9ced4; pointer-events: none; }
#sg-clear { margin-top: 6px; }
.printarea { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body.printing > *:not(#printarea) { display: none !important; }
  body.printing { background: #fff !important; }
  body.printing #printarea { display: block !important; }
}
.pr { color: #111; background: #fff; font: 10.5pt/1.4 var(--font); }
.pr h1 { font-size: 20pt; margin: 0; } .pr h2 { font-size: 12pt; margin: 14pt 0 6pt; border-bottom: 1.5px solid #111; padding-bottom: 2pt; }
.pr h2 small { font-weight: 400; color: #555; font-size: 9.5pt; }
.pr-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #0b6e99; padding-bottom: 8pt; }
.pr-co { margin: 0; font-weight: 700; color: #0b6e99; letter-spacing: .03em; text-transform: uppercase; font-size: 9pt; }
.pr-sub { margin: 2pt 0 0; font-size: 12pt; } .pr-meta { display: grid; text-align: right; font-size: 8.5pt; color: #555; }
.pr-kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6pt 12pt; margin: 10pt 0 0; }
.pr-kv dt { font-size: 7.5pt; text-transform: uppercase; color: #666; letter-spacing: .04em; } .pr-kv dd { margin: 0; font-weight: 600; }
.pr-desc { white-space: pre-wrap; margin: 0; }
.pr-t { width: 100%; border-collapse: collapse; font-size: 9.5pt; } .pr-t th { text-align: left; font-size: 7.5pt; text-transform: uppercase; color: #555; border-bottom: 1px solid #999; padding: 3pt 4pt; }
.pr-t td { border-bottom: 1px solid #ddd; padding: 4pt; vertical-align: top; } .pr-t tr { break-inside: avoid; }
.pr .bx { width: 14pt; height: 14pt; border: 1.2px solid #333; text-align: center; font-weight: 700; display: inline-block; line-height: 13pt; }
.pr td.bx { display: table-cell; width: 16pt; }
.pr .bx.sm { width: 10pt; height: 10pt; line-height: 9pt; font-size: 8pt; margin-right: 5pt; vertical-align: -1pt; }
.pr-steps { list-style: none; margin: 3pt 0 0; padding: 0; display: grid; gap: 2pt; font-size: 9pt; } .pr-steps i { color: #555; }
.pr-note { margin: 2pt 0 0; color: #444; font-size: 8.5pt; white-space: pre-wrap; }
.pr-list { margin: 0; padding-left: 14pt; } .pr-hint { color: #666; font-size: 8.5pt; margin: 3pt 0 0; }
.pr-ga { break-inside: avoid; } .pr-gabox { border: 1px solid #ccc; border-radius: 4pt; max-height: 120mm; overflow: hidden; background: #fff; }
.pr-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6pt; } .pr-photos img { width: 100%; height: 42mm; object-fit: cover; border-radius: 3pt; }
.pr-sign { break-inside: avoid; } .pr-lines { height: 60pt; background: repeating-linear-gradient(#fff 0 19pt, #bbb 19pt 20pt); }
.pr-sigrow { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12pt; margin-top: 14pt; } .pr-sigrow div { border-bottom: 1px solid #333; height: 30pt; display: flex; align-items: flex-start; }
.pr-sigrow span { font-size: 7.5pt; color: #666; text-transform: uppercase; }
.pr-res { font-weight: 700; margin: 0 0 4pt; } .pr-res.ok { color: #13703a; } .pr-res.rest { color: #a3460d; }
.pr-signed { break-inside: avoid; } .pr-signed img { max-width: 90mm; max-height: 40mm; border-bottom: 1px solid #333; display: block; }
.mat-head span:nth-child(-n+2) { text-align: center; }
.att-open.linkbtn { text-align: left; background: none; border: 0; cursor: pointer; }
.att-new { min-width: 34px; justify-content: center; text-decoration: none; }
/* v14 */
:root { --k-gepland: oklch(60% 0.15 280); } [data-theme="dark"] { --k-gepland: oklch(72% 0.14 280); }
.k-gepland { --k: var(--k-gepland); }
.kdot.k-gepland { background: var(--k-gepland); }
.f-allf { margin: 4px 0 0; font-size: var(--text-sm); }
#dlg .dates.compact { display: grid; grid-template-columns: 1fr; padding: var(--space-3); }
.plan-btn { padding: 2px 8px; min-height: 0; font-size: var(--text-xs); }
.plan-btn svg { width: 12px; height: 12px; }
/* v14: mijn taken */
.mt-tools { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.mt-tools select { min-width: 220px; }
.mt-done { min-height: 0 !important; }
.mt-sum { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.mt-k { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: var(--text-sm); color: var(--text-dim); }
.mt-k b { color: var(--text); margin-right: 4px; } .mt-k.late { border-color: color-mix(in oklch, var(--late) 55%, var(--border)); } .mt-k.late b { color: var(--late); }
.mt-list { max-width: 1100px; }
.mt-h { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: var(--space-5) 0 var(--space-2); }
.mt-h.late { color: var(--late); } .mt-h.today { color: var(--accent); }
.mt-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mt-row { display: grid; grid-template-columns: 28px 104px minmax(0, 1fr) 60px 120px auto; gap: var(--space-3); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--dept); border-radius: var(--radius-sm); padding: 10px 12px; }
.mt-row.late { border-color: color-mix(in oklch, var(--late) 45%, var(--border)); border-left-color: var(--late); }
.mt-row.ok { opacity: .6; }
.mt-date { display: grid; line-height: 1.2; } .mt-date b { font-size: var(--text-sm); } .mt-date small { font-size: var(--text-xs); color: var(--text-dim); }
.mt-row.late .mt-date b { color: var(--late); }
.mt-main { display: grid; gap: 2px; min-width: 0; }
.mt-t { text-align: left; color: var(--text); flex-wrap: wrap; } .mt-t b { font-weight: 650; }
.mt-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .mt-steps .mchip { cursor: pointer; }
.mt-h2 { color: var(--text-dim); font-size: var(--text-sm); text-align: right; }
.mt-prog { display: flex; align-items: center; gap: 6px; } .mt-prog .bar { flex: 1; }
@media (max-width: 820px) {
  .mt-row { grid-template-columns: 28px 1fr auto; } .mt-row .mt-date { grid-column: 2; grid-row: 1; display: flex; gap: 6px; align-items: baseline; }
  .mt-row .mt-main { grid-column: 2 / -1; } .mt-row .mt-h2 { display: none; } .mt-row .mt-prog { grid-column: 2; } .mt-row .mt-act { grid-column: 3; grid-row: 1; }
}
#dlg .row2.compact, #dlg .row3.compact { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plan-btn.warn { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 45%, var(--border)); }
/* v15: bestellingen */
:root { --k-levering: oklch(62% 0.13 200); } [data-theme="dark"] { --k-levering: oklch(74% 0.12 200); }
.k-levering { --k: var(--k-levering); }
.best-bar { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--space-3); }
.best-bar .subtabs { margin-bottom: 0; flex: 1; }
.best-bar input { min-width: 260px; }
#best-list { max-width: 1400px; overflow-x: auto; }
.best-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.best-t th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.best-t td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.best-t tr:last-child td { border-bottom: 0; }
.best-t td.c { text-align: center; width: 58px; } .best-t td.c input { width: 20px; height: 20px; accent-color: var(--ok); }
.best-t tr.b-telaat td:first-child { box-shadow: inset 4px 0 0 var(--late); }
.best-t tr.b-binnen { opacity: .7; }
.bst { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--text-xs); font-weight: 650; white-space: nowrap; border: 1px solid var(--border); }
.bst-telaat { color: var(--late); border-color: color-mix(in oklch, var(--late) 55%, var(--border)); }
.bst-bestellen { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 50%, var(--border)); }
.bst-onderweg { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.bst-binnen { color: var(--ok); border-color: color-mix(in oklch, var(--ok) 45%, var(--border)); }
.tag.late { color: var(--late); }
/* v16: menubalk op één regel in de kopbalk */
@media (min-width: 821px) {
  .topbar { flex-wrap: nowrap; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
  .topbar .brand-txt { display: none; }
  .topbar > .spacer { display: none; }
  .tabs, .tabs.wide { order: 0; flex: 1 1 auto; min-width: 0; margin-left: var(--space-2); flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .tabs > button, .tabs .tab-ph, .tabs.wide > button, .tabs.wide .tab-ph, .tab-more-btn { padding: 7px 10px; font-size: 13.5px; flex: none; }
  .tabs.wide .tab-flow, .tab-flow { flex-wrap: nowrap; flex: none; margin: 0 2px; }
  .tabs .tab-ph { gap: 5px; padding-left: 9px; padding-right: 9px; }
  .tabs .tab-ph + .tab-ph::after { left: -3px; }
}
.tab-more { position: relative; flex: none; display: inline-flex; }
.tab-more[hidden] { display: none; }
.tab-more-btn { border: 0; background: transparent; color: var(--text-dim); border-radius: 7px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tab-more-btn.cur { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.tab-more-menu { position: fixed; top: auto; right: auto; margin-top: 6px; z-index: 60; width: 220px; }
.tab-more-menu [data-view] { display: flex !important; width: 100%; justify-content: space-between; text-align: left; box-shadow: none !important; }
.tab-more-menu .tab-ph::after { display: none; }
.um-strong { font-weight: 650 !important; }
#um-tv { display: block; }
.subt-main, .ln-top, .ph-jhead, .mt-row, .best-t tbody tr, .att { cursor: pointer; }
.subt-main:hover, .mt-row:hover, .best-t tbody tr:hover { background: color-mix(in oklch, var(--accent) 6%, transparent); }
/* v16: melding altijd bovenop */
.toast[popover] { margin: 0; inset: auto; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); border: 0; overflow: visible; }
.toast { display: flex; align-items: center; gap: 10px; z-index: 2147483000; max-width: min(92vw, 640px); cursor: pointer; }
.toast.show { pointer-events: auto; }
.toast-x { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; padding: 0 2px; opacity: .7; cursor: pointer; }
.toast-x:hover { opacity: 1; }
@media (max-width: 820px) { .toast[popover] { bottom: calc(84px + env(safe-area-inset-bottom)); } }
.folder-pick { display: flex; gap: 6px; align-items: stretch; }
.folder-pick input { flex: 1; min-width: 0; }
.folder-pick .btn { white-space: nowrap; flex: none; }
.folder-pick .btn svg { width: 14px; height: 14px; }
/* v16: agenda scrollen */
.cal-body.m-month { overflow-y: auto; overscroll-behavior: contain; }
.cal-body.m-month .month { flex: none; min-height: 100%; }
.cal-body.m-month .mhead { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.cal-body.m-month .mgrid { grid-template-rows: repeat(var(--weeks), minmax(120px, auto)); }
.cal-body.m-month .mc { overflow: visible; }
/* v16: levering binnen melden */
.del-tools { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-2); }
.del-tools input { flex: 1; }
.del-list { display: grid; gap: 6px; max-height: 42vh; overflow-y: auto; margin-bottom: var(--space-3); padding-right: 2px; }
.del-row { display: grid !important; grid-template-columns: 26px 1fr auto; gap: var(--space-3); align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; color: var(--text) !important; font-size: var(--text-sm) !important; margin: 0 !important; }
.del-row.on { border-color: color-mix(in oklch, var(--ok) 60%, var(--border)); background: color-mix(in oklch, var(--ok) 8%, var(--surface)); }
.del-row input { width: 20px; height: 20px; accent-color: var(--ok); }
.del-main { display: grid; gap: 1px; min-width: 0; }
.del-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.del-add { cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; display: inline-flex !important; }
.rcpt { display: inline-block; margin-left: 6px; vertical-align: middle; }
.rcpt img { width: 30px; height: 30px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); }
/* v16: planbord */
.pb-tools { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--text-dim); padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.pb-nav { display: flex; gap: 4px; }
.pb-title { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.pb-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.pb-side { position: sticky; top: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); max-height: calc(100vh - 160px); overflow-y: auto; }
.pb-side h3 { margin: 0 0 4px; font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; }
.pb-side .small { font-size: var(--text-xs); margin: 0 0 var(--space-2); }
.pb-pool { display: grid; gap: 6px; min-height: 80px; }
.pb-grid { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.pb-row { display: grid; grid-template-columns: 150px repeat(7, minmax(120px, 1fr)); min-width: 1000px; border-bottom: 1px solid var(--border); }
.pb-row:last-child { border-bottom: 0; }
.pb-head { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.pb-dh { padding: 8px; font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; font-weight: 650; border-left: 1px solid var(--border); }
.pb-dh b { color: var(--text); font-size: var(--text-sm); }
.pb-dh.today b { color: var(--accent); }
.pb-emp { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: var(--text-sm); font-weight: 600; min-width: 0; }
.pb-emp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-cell { border-left: 1px solid var(--border); padding: 6px; min-height: 74px; display: flex; flex-direction: column; gap: 5px; }
.pb-cell.wknd { background: color-mix(in oklch, var(--surface-2) 55%, var(--surface)); }
.pb-cell.today { background: color-mix(in oklch, var(--accent) 6%, var(--surface)); }
.pb-cell.off { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in oklch, var(--text-dim) 10%, transparent) 8px 10px); }
.pb-drop.over { outline: 2px dashed var(--accent); outline-offset: -3px; background: color-mix(in oklch, var(--accent) 10%, var(--surface)); }
.pb-card { background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--dept); border-radius: 7px; padding: 5px 7px; font-size: var(--text-xs); cursor: grab; display: grid; gap: 1px; touch-action: manipulation; }
.pb-card b { font-size: 12.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pb-card small { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-card.late { border-color: color-mix(in oklch, var(--late) 55%, var(--border)); border-left-color: var(--late); }
.pb-card.picked { outline: 2px solid var(--accent); }
.pb-card.dragging { opacity: .4; }
.pb-meta { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
.pb-bar { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; } .pb-bar i { display: block; height: 100%; background: var(--dept); }
.pb-load { margin-top: auto; color: var(--text-dim); font-size: 11px; text-align: right; } .pb-load.over { color: var(--late); font-weight: 700; }
.pb-off { color: var(--text-dim); font-size: 11px; }
@media (max-width: 1100px) { .pb-wrap { grid-template-columns: 1fr; } .pb-side { position: static; max-height: 280px; } .pb-pool { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
@media (min-width: 821px) { .row3.row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* v16: briefpapier */
@media print {
  @page { size: A4; margin: 0; }
  body.printing #printarea { position: relative; }
  .pr-kop, .pr-voet, .pr-tand { position: fixed; left: 0; display: block; z-index: 0; }
  .pr-kop { top: 0; width: 210mm; height: auto; }
  .pr-voet { bottom: 0; width: 210mm; height: auto; }
  .pr-tand { left: 87mm; top: 62mm; width: 113mm; height: auto; }
  .pr-sheet { position: relative; z-index: 1; width: 210mm; border-collapse: collapse; }
  .pr-sheet > thead > tr > td, .pr-sheet > tfoot > tr > td { padding: 0; }
  .pr-sp-top { height: 45mm; } .pr-sp-bot { height: 43mm; }
  .pr-body { padding: 0 16mm; vertical-align: top; }
  .pr, .pr-t td, .pr-t th { background: transparent !important; }
}
.pr-kop, .pr-voet, .pr-tand { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pr-head { border-bottom: 2px solid #1b9ec4 !important; }
/* v16: feedback-inbox */
.fbi-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.fbi-head h2 { margin: 0; }
.fbi-tools { display: flex; gap: var(--space-2); align-items: center; }
.fbi-list { display: grid; gap: var(--space-3); max-height: 62vh; overflow-y: auto; padding-right: 2px; }
.fbi { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--surface); }
.fbi.new { border-left: 4px solid var(--accent); }
.fbi.hl { box-shadow: 0 0 0 2px var(--accent); }
.fbi.done { opacity: .7; }
.fbi header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fbi header small { margin-left: auto; }
.fbi .fb-text { margin: 8px 0; white-space: pre-wrap; }
.fbi footer { display: flex; justify-content: space-between; align-items: center; }
.fbi-new { background: color-mix(in oklch, var(--accent) 15%, var(--surface)); color: var(--accent); }
#um-fbinbox { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#fbinbox { padding: var(--space-5); } #fbinbox .hint { margin: var(--space-2) 0 var(--space-4); }
.xfer-steps { margin: 0 0 var(--space-3); padding-left: 1.3em; font-size: var(--text-sm); display: grid; gap: 4px; }
.xfer-actions label.btn { cursor: pointer; text-transform: none; letter-spacing: 0; }
#xfer-info { display: block; margin-top: var(--space-2); word-break: break-all; }
/* v16b: logo + naam altijd zichtbaar, "live" alleen bij storing */
.topbar .brand-txt.brand-co { display: block !important; line-height: 1.05; }
.topbar .brand-co b { font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.topbar .brand-co span { display: block !important; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #1b9ec4; font-weight: 600; }
.topbar .brand { flex: none; gap: 8px; }
.topbar .brand img.logo { height: 32px; }
@media (max-width: 480px) { .topbar .brand-co b { font-size: 13px; } .topbar .brand-co span { font-size: 8px; } .topbar .brand img.logo { height: 28px; } }
#status.ok { display: none !important; }
.fp-btns { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0 var(--space-3); }
.fp-howto { margin: 0; padding-left: 1.3em; font-size: var(--text-sm); color: var(--text-dim); display: grid; gap: 3px; }
.fp-howto .fp-h { list-style: none; margin-left: -1.3em; font-weight: 650; color: var(--text); }
#fpdlg { width: min(560px, 94vw); }
.tab-more-menu [data-view] { justify-content: flex-start !important; gap: 8px; }
.tab-more-menu [data-view] > .badge, .tab-more-menu [data-view] [data-phn] { margin-left: auto; }
.fp-h { font-weight: 650; margin: 0 0 4px; font-size: var(--text-sm); }