/* Toelevering: werkomgeving voor zakelijke klanten. Licht werkvlak met witte kaarten, donkerblauwe kop, oranje alleen
   voor wat de klant nu moet doen. Het herkenningspunt is de keten: vijf segmenten van aanvraag tot levering. */
body.tl { margin: 0; background: var(--lz-vlak); color: var(--ink); font-family: Inter, system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.tl-main { width: 100%; max-width: var(--container); margin: 0 auto; padding: 32px 24px 64px; box-sizing: border-box; flex: 1; }
body.tl.sub-landing { background: var(--lz-wit); }
@media (max-width: 640px) { .tl-main { padding: 24px 16px 56px; } }
.tl .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .92em; }
.tl-pre { white-space: pre-line; }

/* kop en voet komen uit app.css (dezelfde als de zaaglijst) */
body.tl > main { flex: 1; width: 100%; }

/* koppen en meldingen */
.tl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tl-head h1 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.015em; margin: 0 0 4px; }
.tl-head p { margin: 0; max-width: 680px; }
.tl-crumb { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.tl-crumb a { color: inherit; }
.tl-msg { max-width: 560px; margin: 40px auto; }

/* kengetallen */
.tl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 20px; }
.tl-kpi { display: grid; gap: 4px; padding: 16px 18px; background: var(--lz-wit); border: 1px solid var(--lz-werkvlak); text-decoration: none; color: var(--ink); }
a.tl-kpi:hover { border-color: var(--lz-navy); }
.tl-kpi span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tl-kpi strong { font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tl-kpi small { font-size: 12.5px; color: var(--muted); }

/* "voor u": wat de klant nu moet doen */
.tl-voor { background: var(--lz-wit); border: 1px solid var(--lz-werkvlak); border-left: 4px solid var(--lz-oranje); padding: 14px 18px; margin: 0 0 20px; }
.tl-voor h2 { margin: 0 0 8px; }
.tl-voor ul, .tl-todolist, .tl-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tl-voor a, .tl-todolist a, .tl-recent a { display: grid; gap: 1px; padding: 8px 0; text-decoration: none; color: var(--ink); }
.tl-voor a span, .tl-todolist a span, .tl-recent a span { font-size: 13px; color: var(--muted); }
.tl-voor a:hover strong, .tl-todolist a:hover strong, .tl-recent a:hover strong { color: var(--lz-oranje-2); }
.tl-todolist li, .tl-recent li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--lz-vlak-2); }
.tl-todolist li small { color: var(--muted); white-space: nowrap; }
.tl-todo { font-size: 12.5px; font-weight: 600; color: var(--lz-oranje-2); margin-top: 4px; }
.tl-todo-big { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--lz-oranje-licht); color: var(--lz-oranje-tekst); font-weight: 700; text-decoration: none; border: 1px solid var(--lz-oranje-rand); }
.tl-todo-big::before { content: ''; width: 8px; height: 8px; background: var(--lz-oranje); }

/* zoeken (Lenselink) en afspraken met de klant */
.tl-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; max-width: 640px; }
.tl-search input { flex: 1; min-width: 220px; }
.tl-afspraken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--lz-vlak); padding: 10px 12px; margin: 0 0 14px; }

/* tabs en lijst */
.tl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tl-n { font-weight: 500; opacity: .7; margin-left: 4px; }
.tl-list td { vertical-align: top; }
.tl-list .tl-chain-cell { min-width: 220px; }
.tl-list a { color: var(--ink); text-decoration: none; }
.tl-list tr.row-link { cursor: pointer; }
.tl-list tr.row-link:hover td { background: var(--lz-vlak); }
.tl-empty { background: var(--lz-wit); border: 1px dashed var(--lz-rand); padding: 28px; text-align: center; }

/* status */
.tl-st { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 9px; background: var(--lz-vlak-2); color: var(--lz-tekst-2); white-space: nowrap; }
.tl-st-offerte { background: var(--lz-oranje-licht); color: var(--lz-oranje-tekst); }
.tl-st-akkoord { background: var(--lz-blauw-licht); color: var(--lz-blauw); }
.tl-st-productie { background: var(--lz-blauw-licht); color: var(--lz-blauw); }
.tl-st-geleverd { background: var(--lz-groen-licht); color: var(--lz-groen); }
.tl-st-afgewezen, .tl-st-geannuleerd { background: var(--lz-vlak-2); color: var(--lz-rood); }

/* de keten */
.tl-chain { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tl-seg { display: block; height: 6px; background: var(--lz-werkvlak); overflow: hidden; }
.tl-seg i { display: block; height: 100%; background: var(--lz-navy); }
.tl-chain li.is-now .tl-seg i { background: var(--lz-oranje); }
.tl-chain.is-off .tl-seg { background: #EADADA; }
.tl-chain-big { gap: 6px; margin: 4px 0 22px; }
.tl-chain-big .tl-seg { height: 10px; }
.tl-seg-l { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.tl-chain-big li.is-now .tl-seg-l { color: var(--lz-oranje-2); }
.tl-chain-big li.is-done .tl-seg-l { color: var(--ink); }

/* secties op de projectpagina */
.tl-sec { padding: 20px 22px; margin: 0 0 16px; background: var(--lz-wit); }
.tl-sec > h2, .tl-sec-head h2 { font-size: 19px; margin: 0 0 12px; }
.tl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-sec-head h2 { margin: 0; }
.tl-sec summary { cursor: pointer; }
.tl-staff { border-color: var(--lz-rand); background: var(--lz-wit); }
.tl-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }
.tl-dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 4px; }
.tl-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0 0; font-size: 14px; }
.tl-dl dt { color: var(--muted); }
.tl-dl dd { margin: 0; }
.tl-files { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.tl-files a { font-weight: 600; word-break: break-all; }
.tl-files small { display: block; color: var(--muted); font-size: 12.5px; }
.tl-addfiles input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tl-wait p { margin: 0; color: var(--ink-2, var(--lz-tekst-2)); }
.tl-perhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 10px; }
.tl-perhead h2 { margin: 0; }

/* offerte */
.tl-changes { background: var(--lz-vlak); border-left: 3px solid var(--lz-navy); padding: 10px 14px; margin: 0 0 14px; font-size: 14px; }
.tl-changes p { margin: 4px 0 0; }
.tl-variants { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tl-variants legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.tl-variant { position: relative; display: block; cursor: pointer; }
.tl-variant input { position: absolute; opacity: 0; }
.tl-variant > span { display: grid; gap: 4px; padding: 14px 16px; border: 2px solid var(--lz-werkvlak); background: var(--lz-wit); }
.tl-variant em { font-style: normal; font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tl-variant small { color: var(--muted); }
.tl-variant input:checked + span { border-color: var(--lz-oranje); box-shadow: 0 0 0 3px #FFE3D2; }
.tl-variant input:focus-visible + span { outline: 3px solid var(--lz-blauw); outline-offset: 2px; }
.tl-pos td { vertical-align: top; }
.tl-pos tr.is-other { display: none; }
.tl-pos .tl-grp th, .tl-pos tfoot th { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); white-space: normal; }
.tl-pos .tl-grp th { background: var(--lz-vlak); font-size: 13px; font-weight: 700; }
.tl-pos tfoot th { text-align: right; font-weight: 600; }
.tl-pos tfoot td, .tl-pos tfoot th { border-top: 1px solid var(--lz-werkvlak); }
.tl-vtag { display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--lz-navy); color: var(--lz-wit); font-size: 11px; font-weight: 700; margin-left: 4px; vertical-align: 1px; }
.tl-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tl-akkoord { margin-top: 18px; padding: 18px; background: #FFF7F2; border: 1px solid var(--lz-oranje-rand); }
.tl-akkoord h3 { margin: 0 0 12px; }
.tl-akkoord-done { margin-top: 14px; padding: 12px 16px; background: var(--lz-groen-licht); color: var(--lz-groen); }
.tl-decline summary { list-style: none; }
.tl-decline summary::-webkit-details-marker { display: none; }
.tl-decline-form { margin-top: 12px; display: grid; gap: 10px; max-width: 560px; }
.tl-decline-form[hidden] { display: none; }
.tl-versions { margin-top: 14px; font-size: 14px; }
.tl-warn { color: var(--lz-rood); }

/* productie */
.tl-fasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; position: relative; }
.tl-fasen li { position: relative; display: grid; gap: 4px; padding: 26px 10px 0 0; }
.tl-fasen li::before { content: ''; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--lz-werkvlak); }
.tl-fasen li.is-done::before { background: var(--lz-navy); }
.tl-dot { position: absolute; top: 3px; left: 0; width: 14px; height: 14px; background: var(--lz-wit); border: 2px solid var(--lz-rand); box-sizing: border-box; z-index: 1; }
.tl-fasen li.is-done .tl-dot { background: var(--lz-navy); border-color: var(--lz-navy); }
.tl-fasen strong { font-size: 13.5px; }
.tl-fasen small { font-size: 12px; color: var(--muted); }

/* berichten en activiteit */
.tl-thread { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.tl-thread li { max-width: 78%; padding: 10px 14px; background: var(--lz-vlak); }
.tl-thread li.is-ll { background: var(--lz-vlak-2); }
.tl-thread li.is-klant { margin-left: auto; background: var(--lz-oranje-licht); }
.tl-thread small { color: var(--muted); font-size: 12px; }
.tl-thread p { margin: 4px 0 0; }
.tl-msgform { display: grid; gap: 8px; }
.tl-msgform .btn { justify-self: start; }
.tl-log { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.tl-log li { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; }
.tl-log time, .tl-log small { color: var(--muted); }

/* formulieren */
.tl-form { padding: 22px; background: var(--lz-wit); }
.tl-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.tl-f { display: grid; gap: 5px; font-size: 14px; }
.tl-f > span { font-weight: 600; }
.tl-f small { font-weight: 400; color: var(--muted); }
.tl-f-wide { grid-column: 1 / -1; }
.tl input[type=text], .tl input:not([type]), .tl input[type=date], .tl input[type=week],.tl input[type=time], .tl input[type=tel], .tl input[type=number], .tl select, .tl textarea { font: inherit; font-size: 14.5px; padding: 9px 11px; border: 1px solid var(--lz-rand); background: var(--lz-wit); color: var(--ink); box-sizing: border-box; width: 100%; }
.tl textarea { resize: vertical; }
.tl input:focus, .tl select:focus, .tl textarea:focus { outline: none; border-color: var(--lz-blauw); box-shadow: 0 0 0 3px var(--lz-blauw-licht); }
.tl-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin: 12px 0; }
.tl-check input { margin-top: 3px; }
.tl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.tl-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 12px; }
.tl-inline .tl-f { min-width: 220px; }
.tl-fasen-form fieldset { border: 0; padding: 0; margin: 0 0 10px; }
.tl-fasen-form legend { font-weight: 700; margin-bottom: 6px; }
.tl-fasen-form .tl-check { margin: 6px 0; }
.tl-lev { display: grid; gap: 10px; }
.tl-err { color: var(--lz-rood); font-weight: 600; }
.tl-drop { margin-top: 18px; border: 2px dashed var(--lz-rand); padding: 18px; background: var(--lz-vlak); }
.tl-drop.is-over { border-color: var(--lz-oranje); background: #FFF7F2; }
.tl-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tl-drop label { display: grid; gap: 4px; cursor: pointer; }
.tl-drop label span { font-size: 13.5px; color: var(--muted); }
.tl-filelist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.tl-filelist li { display: flex; justify-content: space-between; gap: 12px; background: var(--lz-wit); border: 1px solid var(--lz-werkvlak); padding: 6px 10px; }
.tl-filelist button { border: 0; background: none; color: var(--lz-rood); cursor: pointer; font: inherit; }

/* offerte-editor (Lenselink) */
.tl-ed-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 16px; }
.tl-ed-meta .tl-f-wide { grid-column: 1 / -1; }
.tl-ed-var { display: grid; gap: 8px; margin: 0 0 16px; }
.tl-ed-var-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
.tl-ed-var-row b { display: grid; place-items: center; width: 26px; height: 26px; background: var(--lz-navy); color: var(--lz-wit); font-size: 13px; }
.tl-ed-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tl-ed-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--lz-werkvlak); white-space: nowrap; }
.tl-ed-table td { padding: 4px; border-bottom: 1px solid var(--lz-vlak-2); vertical-align: top; }
.tl-ed-table input, .tl-ed-table select { padding: 6px 7px !important; font-size: 13.5px !important; }
.tl-ed-table .c-q, .tl-ed-table .c-k { width: 70px; }
.tl-ed-table .c-p { width: 100px; }
.tl-ed-table .c-u { width: 72px; }
.tl-ed-table .c-v { width: 84px; }
.tl-ed-table .c-g { width: 150px; }
.tl-ed-table .c-t { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 10px; }
.tl-ed-table .c-a { white-space: nowrap; }
.tl-ed-table .c-a button { border: 0; background: none; cursor: pointer; padding: 4px 5px; color: var(--muted); font: inherit; }
.tl-ed-table .c-a button:hover { color: var(--ink); }
.tl-ed-table textarea { min-height: 34px; font-size: 13px !important; padding: 6px 7px !important; }
.tl-ed-tot { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; margin: 12px 0 0; font-size: 14px; }
.tl-ed-tot strong { font-variant-numeric: tabular-nums; }
.tl-ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.tl-ed-state { font-size: 13px; color: var(--muted); }
.tl-ed-state.is-dirty { color: var(--lz-oranje-tekst); font-weight: 600; }
.tl-ed-paste { margin-top: 10px; font-size: 13.5px; }
.tl-ed-paste textarea { margin: 8px 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px !important; }

/* dashboard */
.tl-weeks .tl-bar { width: 40%; }
.tl-bar span { display: block; height: 8px; background: var(--lz-navy); min-width: 2px; }

@media (max-width: 640px) {
  .tl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tl-kpi { padding: 12px; }
  .tl-kpi strong { font-size: 22px; }
  .tl-kpi small { font-size: 12px; }
  /* projectenlijst als kaartjes: geen tabel om zijwaarts te schuiven */
  .tl-list thead { display: none; }
  .tl-list, .tl-list tbody, .tl-list tr, .tl-list td { display: block; width: 100%; box-sizing: border-box; }
  .tl-list tr { padding: 12px 14px; border-bottom: 1px solid var(--lz-vlak-2); }
  .tl-list td { padding: 2px 0; border: 0; text-align: left; }
  .tl-list td.num { text-align: left; font-weight: 600; }
  .tl-list .tl-chain-cell { min-width: 0; }
  .tl-list td:last-child { display: none; }
  .tl-pos thead th:nth-child(3), .tl-pos tbody td:nth-child(3), .tl-pos thead th:nth-child(4), .tl-pos tbody td:nth-child(4) { display: none; }
  .tl-pos tfoot th { font-size: 13px; }
}
@media (max-width: 860px) {
  .tl-two, .tl-dash { grid-template-columns: minmax(0, 1fr); }
  .tl-form-grid, .tl-ed-meta { grid-template-columns: minmax(0, 1fr); }
  .tl-thread li { max-width: 92%; }
  .tl-log li { grid-template-columns: 1fr; gap: 0; }
  .tl-chain-big .tl-seg-l { font-size: 11px; }
}

/* ---- calculatie (alleen Lenselink): samenstelling links, doorrekening rechts */
body.tl-wide .tl-main { max-width: 1440px; }
.tl-newart { margin-top: 12px; }
.tl-art-head { display: grid; gap: 12px; background: var(--lz-wit); border: 1px solid var(--lz-werkvlak); padding: 16px 18px; margin: 0 0 16px; }
.tl-art-id { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr) 150px; gap: 12px; align-items: end; }
.tl-art-id .tl-grow input { font-size: 18px; font-weight: 700; }
.tl-unit { display: flex; align-items: center; gap: 6px; }
.tl-unit input { min-width: 0; flex: 1; }
.tl-unit em { font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tl-unit-s input { width: 56px; flex: none; padding: 4px 6px !important; text-align: right; }
.tl-art { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.tl-art-side { position: sticky; top: 76px; }
.tl-art-side .tl-sec { max-height: calc(100vh - 96px); overflow: auto; }
.tl-ed-table input.c-n { width: 76px !important; }
.tl-ed-table input.c-q { width: 64px !important; }
.tl-ed-table input.c-s { width: 64px !important; }
.tl-ed-table input.c-c { width: 120px !important; }
.tl-ed-table input.c-u { width: 56px !important; }
.tl-ed-table input.c-p { width: 96px !important; }
.tl-ed-table input[data-mat] { min-width: 280px; }
.tl-pds td:first-child input { min-width: 120px; }
.tl-ed-table input.is-empty { border-color: var(--lz-oranje) !important; }
.tl-pd.is-open > tr:first-child td { background: var(--lz-vlak); }
.tl-edges { white-space: nowrap; }
.tl-edge { font: 600 11.5px/1 Inter, sans-serif; padding: 6px 5px; border: 1px solid var(--lz-rand); background: var(--lz-wit); color: #93A9B5; margin-right: 2px; cursor: pointer; min-width: 26px; }
.tl-edge.is-on { background: var(--lz-navy); border-color: var(--lz-navy); color: var(--lz-wit); }
.tl-edge-r { min-width: 64px; }
.tl-more { display: grid; gap: 2px; text-align: left; background: none; border: 1px solid transparent; padding: 4px 6px; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.tl-more:hover, .tl-more[aria-expanded="true"] { border-color: var(--lz-rand); background: var(--lz-wit); }
.tl-more small { font-size: 11.5px; color: var(--muted); }
.tl-routes { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.tl-routes i { font-style: normal; font-size: 11px; color: #93A9B5; }
.tl-route { font-size: 11px; font-weight: 700; padding: 2px 6px; background: var(--lz-vlak-2); color: var(--lz-tekst-2); }
.tl-route-nesting { background: var(--lz-oranje-licht); color: var(--lz-oranje-tekst); }
.tl-route-baz { background: var(--lz-blauw-licht); color: var(--lz-blauw); }
.tl-x { border: 0; background: none; font-size: 18px; line-height: 1; color: #93A9B5; cursor: pointer; padding: 6px; }
.tl-x:hover { color: var(--lz-rood); }
.tl-pd-more td { background: var(--lz-vlak); }
.tl-pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.tl-pd-grid fieldset { border: 1px solid var(--lz-werkvlak); padding: 8px 10px; margin: 0; background: var(--lz-wit); }
.tl-pd-grid legend { font-size: 12px; font-weight: 700; padding: 0 4px; }
.tl-inl { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 12.5px; margin: 4px 0; }
.tl-inl label { display: inline-flex; align-items: center; gap: 5px; }
.tl-inl .tl-f { display: grid; }
.tl-adds .btn::before { content: '+ '; }
.tl-paste { margin-top: 12px; padding: 12px; border: 1px dashed var(--lz-rand); background: var(--lz-wit); }
.tl-paste textarea { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.tl-eigen { margin-top: 14px; }
.tl-eigen h3 { margin: 0 0 6px; }
.tl-calc { padding: 16px 18px; }
.tl-calc-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.tl-calc-top > div:first-child { display: grid; gap: 2px; }
.tl-big { font-size: 32px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tl-seg-sw { display: inline-flex; border: 1px solid var(--lz-rand); overflow: hidden; flex: none; }
.tl-seg-sw button { border: 0; background: var(--lz-wit); font: 600 12px/1 Inter, sans-serif; padding: 7px 9px; cursor: pointer; color: var(--lz-tekst-2); }
.tl-seg-sw button.is-on { background: var(--lz-navy); color: var(--lz-wit); }
.tl-warn-list { margin: 0 0 10px; padding: 8px 10px 8px 26px; background: var(--lz-oranje-licht); font-size: 12.5px; color: var(--lz-oranje-tekst); }
.tl-calc-t { font-size: 13px; }
.tl-calc-t td, .tl-calc-t th { padding: 5px 4px; vertical-align: top; font-family: inherit; text-transform: none; letter-spacing: 0; }
.tl-staffel th { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; }
.tl-calc-t .tl-grp th { background: var(--lz-vlak); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); }
.tl-calc-t tfoot th { text-align: left; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 13px; }
.tl-calc-t tfoot tr:first-child > * { border-top: 1px solid var(--lz-rand); }
.tl-calc-t .tl-sum > * { border-top: 2px solid var(--lz-navy); font-size: 14px; }
.tl-staffel, .tl-nest { margin: 10px 0 0; font-size: 13px; }
.tl-staffel summary, .tl-nest summary { cursor: pointer; padding: 4px 0; }
.tl-staffel tr.is-cur td { background: var(--lz-oranje-licht); }
.tl-nest h4 { margin: 8px 0 4px; font-size: 12.5px; }
.tl-sheets { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.tl-sheets svg { max-width: 100%; height: auto; }
.tl-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.tl-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.tl-calc-act { border-bottom: 1px solid var(--lz-werkvlak); margin: 0 0 12px; padding: 0 0 12px; display: grid; gap: 8px; }
.tl-calc-act .tl-calc-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-calc-act .tl-calc-btns form { flex: 1; }
.tl-calc-opts { border-top: 1px solid var(--lz-werkvlak); margin-top: 12px; padding-top: 12px; display: grid; gap: 10px; }
.tl-calc-act .tl-actions { margin-top: 0; }
.tl-calc-btns form .btn { width: 100%; justify-content: center; }
.tl-state { font-size: 12.5px; color: var(--lz-groen); }
.tl-state.is-dirty { color: var(--lz-oranje-tekst); }
.tl-del { color: var(--lz-rood); font-size: 12.5px; }
.tl-tar { border: 1px solid var(--lz-werkvlak); padding: 10px 14px 14px; margin: 0 0 12px; }
.tl-tar legend { font-weight: 700; padding: 0 6px; }
.tl-tar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; margin-bottom: 14px; }
.tl-tar-grid .tl-f > span:first-child { font-size: 12.5px; }
@media (max-width: 1100px) {
  .tl-art { grid-template-columns: 1fr; }
  .tl-art-side { position: static; }
  .tl-art-side .tl-sec { max-height: none; }
}
@media (max-width: 700px) {
  .tl-art-id { grid-template-columns: 1fr; }
  .tl-pd-grid { grid-template-columns: 1fr; }
}
.tl-shape { margin-top: 8px; max-width: 360px; }
.tl-shape svg { width: 100%; height: auto; }
.tl-file { cursor: pointer; }
.tl-inl input[type="checkbox"] { width: auto; }
.tl-planner { margin-top: 14px; border-top: 1px solid var(--lz-werkvlak); padding-top: 10px; }
.tl-planner summary { cursor: pointer; }
.tl-planner-form { margin-top: 10px; }
.tl-planner-form textarea { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.tl-projplaten { margin: 12px 0 0; } .tl-projplaten summary { cursor: pointer; }
.tl-code { font-variant-ligatures: none; background: var(--lz-navy); color: var(--lz-blauw-licht); font: 12.5px/1.55 'JetBrains Mono', monospace; padding: 16px 18px; overflow: auto; max-height: 560px; white-space: pre; }
.tl-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; }
.tl-steps li { display: grid; gap: 2px; }
.tl-steps span { color: var(--lz-tekst-2); }
.tl-sec code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--lz-vlak); padding: 2px 5px; word-break: break-all; }
.tl-beslag { grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); align-items: start; }
.tl-pl input[data-f="naam"] { min-width: 280px; }
.tl-pl input[data-f="leverancier"] { min-width: 120px; }
.tl-zonder { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.tl-zonder li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--lz-vlak-2); }
.tl-zonder li span { display: grid; gap: 1px; }
.tl-zonder small { color: var(--muted); }
.tl-beslag [data-q] { min-width: 280px; }
@media (max-width: 1000px) { .tl-beslag { grid-template-columns: 1fr; } }

/* planbord */
.pl-load { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; min-width: 900px; table-layout: fixed; }
.pl-load col.pl-mcol { width: 150px; }
.pl-load th, .pl-load td { padding: 10px 10px; border-bottom: 1px solid var(--lz-lijn); text-align: left; vertical-align: top; }
.pl-load thead th { font-weight: 600; white-space: nowrap; }
.pl-load thead th small, .pl-load tbody th small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.pl-load tbody th { font-weight: 600; width: 150px; }
.pl-load .is-nu { background: var(--lz-vlak); }
.pl-load thead th.is-nu span { color: var(--lz-oranje-tekst); }
.pl-cell strong { display: block; font-variant-numeric: tabular-nums; font-size: 14px; }
.pl-cell small { display: block; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pl-bar { display: block; height: 6px; margin: 5px 0 4px; background: var(--lz-vlak-2); overflow: hidden; }
.pl-bar span { display: block; height: 100%; background: var(--lz-navy); }
.pl-cell.is-druk .pl-bar span { background: #C77A0A; }
.pl-cell.is-vol .pl-bar span { background: var(--lz-rood); }
.pl-cell.is-vol strong, .pl-cell.is-vol small { color: var(--lz-rood); }
.pl-leeg { color: var(--lz-lijn-sterk); }
.pl-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 12px 0 0; }
.pl-key { display: inline-block; width: 18px; height: 6px; background: var(--lz-navy); }
.pl-key.is-druk { background: #C77A0A; }
.pl-key.is-vol { background: var(--lz-rood); }
.pl-board-wrap { padding-left: 0; padding-right: 0; background: transparent; }
.pl-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.pl-col { background: var(--lz-vlak-2); padding: 10px; min-height: 160px; transition: background .15s, box-shadow .15s; }
.pl-col.is-nu { background: var(--lz-lijn); }
.pl-col.is-over { background: var(--lz-oranje-licht); box-shadow: inset 0 0 0 2px var(--lz-oranje); }
.pl-col h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 4px 10px; font-size: 14px; }
.pl-col h3 small { font-weight: 500; color: var(--muted); }
.pl-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-card { background: var(--lz-wit); border: 1px solid var(--lz-werkvlak); padding: 10px 11px; display: grid; gap: 6px; cursor: grab; }
.pl-card.is-drag { opacity: .45; }
.pl-card.is-laat { border-color: #E3A291; box-shadow: inset 3px 0 0 var(--lz-rood); }
.pl-card a { display: grid; gap: 1px; text-decoration: none; color: var(--ink); }
.pl-card a .mono { font-size: 11.5px; color: var(--muted); }
.pl-card a strong { font-size: 14px; line-height: 1.3; }
.pl-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--lz-tekst-2); font-variant-numeric: tabular-nums; }
.pl-meta span:first-child { font-weight: 600; color: var(--ink); }
.pl-tag { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 2px 8px; background: var(--lz-vlak-2); color: var(--lz-tekst-2); }
.pl-tag-rood { background: var(--lz-rood-licht); color: var(--lz-rood); }
.pl-move select { font-size: 12.5px !important; padding: 5px 8px !important; }
body.pl-busy { cursor: progress; }
@media (max-width: 700px) { .pl-board { grid-auto-columns: 82%; } }
.tl-sec h3.tl-sub { font-size: 15px; margin: 20px 0 8px; }

/* ---------------------------------------------------------------- werkscherm (ingelogd)
   Schermvullend en licht, zoals een kantoorprogramma: witte zijbalk met de projecten en (voor Lenselink) het interne
   deel, een smalle bovenbalk met zoeken en de week van vandaag, en het werkvlak dat de rest van het scherm vult.
   Oranje alleen voor de knop Nieuwe aanvraag en de plek waar u bent. */
body.tl.ws { --ws-side-w: 304px; --ws-top-h: 60px; --ws-bg: var(--lz-vlak); --ws-line: var(--lz-lijn); --ws-hover: var(--lz-vlak-2); --ws-soft: var(--lz-grijs); --ws-accent: var(--lz-oranje);
  display: block; background: var(--ws-bg); }
.ws-shell { display: grid; grid-template-columns: var(--ws-side-w) minmax(0, 1fr); min-height: 100vh; }
.ws-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column;
  padding: 16px 14px 14px; background: var(--lz-wit); border-right: 1px solid var(--ws-line); }
.ws-brand { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 22px; }
.ws-brand a, .ws-top-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.ws-brand .ws-logo, .ws-top-brand img { width: 160px; flex: none; height: auto; display: block; }
.ws-brand span, .ws-top-brand span { font-size: 15px; font-weight: 700; line-height: 22px; white-space: nowrap; padding-left: 12px; border-left: 1px solid var(--lz-rand); }
.ws-new { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 20px; padding: 10px 12px;
  background: var(--ws-accent); color: var(--lz-wit); font-size: 14px; font-weight: 600; text-decoration: none; }
.ws-new:hover { background: var(--lz-oranje-2); color: var(--lz-wit); }
.ws-new.is-on { box-shadow: 0 0 0 3px #FBD9C6; }
.ws-nav { display: flex; flex-direction: column; gap: 2px; }
.ws-group { margin: 22px 10px 6px; font-size: 12px; font-weight: 600; color: var(--ws-soft); }
.ws-link { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  color: #33434D; font-size: 14px; font-weight: 500; text-decoration: none; }
.ws-link svg { flex: none; color: var(--lz-navy-zacht); }
.ws-link:hover { background: var(--ws-hover); color: var(--ink); }
.ws-link.is-on { background: var(--ws-hover); color: var(--ink); font-weight: 600; }
.ws-link.is-on::before { content: ''; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px; background: var(--ws-accent); }
.ws-link.is-on svg { color: var(--ws-accent); }
.ws-link:focus-visible, .ws-new:focus-visible, .ws-iconbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ws-foot { margin-top: auto; padding-top: 18px; display: grid; gap: 12px; }
.ws-help { margin: 0; padding: 12px; background: var(--ws-bg); display: grid; gap: 2px; font-size: 13px; }
.ws-help span { color: var(--ws-soft); }
.ws-help a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ws-help a:hover { text-decoration: underline; }
.ws-acc { display: flex; align-items: center; gap: 10px; padding: 12px 2px 0 4px; border-top: 1px solid var(--ws-line); }
.ws-avatar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: var(--ink); color: var(--lz-wit); font-size: 12px; font-weight: 700; }
.ws-acc-t { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ws-acc-t strong, .ws-acc-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-acc-t strong { font-size: 13.5px; }
.ws-acc-t small { font-size: 12px; color: var(--ws-soft); }
.ws-iconbtn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: transparent; color: var(--ws-soft); cursor: pointer; }
.ws-iconbtn:hover { background: var(--ws-hover); color: var(--ink); }
.ws-close, .ws-burger, .ws-top-brand { display: none; }
.ws-scrim { display: none; }

.ws-body { min-width: 0; display: flex; flex-direction: column; }
.ws-top { position: sticky; top: 0; z-index: 20; height: var(--ws-top-h); box-sizing: border-box; display: flex; align-items: center; gap: 16px;
  padding: 0 32px; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--ws-line); }
.ws-search { flex: 1; max-width: 540px; height: 38px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid transparent; background: var(--ws-bg); color: var(--ws-soft); }
.ws-search:focus-within { background: var(--lz-wit); border-color: #98AAB4; }
.tl.ws .ws-search input { flex: 1; width: auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font-size: 14px; outline: none; }
.ws-today { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 13px; color: var(--ws-soft); }
.ws-today strong { color: var(--ink); font-weight: 600; }
.ws-main { flex: 1; padding: 28px 32px 56px; }
body.ws .tl-main { max-width: var(--container, 1320px); margin: 0 auto; padding: 0; } /* zo breed als het zaaglijst-dashboard, gecentreerd */
body.ws.tl-bord .tl-main { max-width: none; } /* alleen het planbord gebruikt de hele breedte */
.ws .tl-head > .btn-primary[href="/projecten/nieuw"] { display: none; }
.ws .tl-msg { margin: 24px 0; }
@media (min-width: 641px) { .ws .tl-search { display: none; } }

@media (max-width: 960px) {
  .ws-shell { grid-template-columns: minmax(0, 1fr); }
  .ws-side { position: fixed; z-index: 60; left: 0; top: 0; width: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  body.ws-open .ws-side { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(13, 30, 39, .22); }
  body.ws-open .ws-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(13, 30, 39, .35); }
  .ws-close, .ws-burger { display: grid; }
  .ws-top-brand { display: flex; }
  .ws-top-brand { gap: 12px; }
  .ws-top-brand img { width: 114.2px; }
  .ws-top-brand span { font-size: 14px; padding-left: 12px; }
  .ws-top { padding: 0 12px; gap: 10px; }
  .ws-today { display: none; }
  .ws-main { padding: 20px 16px 48px; }
}
@media (max-width: 640px) { .ws-search { display: none; } }
@media (prefers-reduced-motion: reduce) { .ws-side { transition: none; } }
.ws-link.ws-ext { padding-left: 39px; font-size: 13.5px; color: var(--ws-soft); }
.ws-link.ws-ext:hover { color: var(--ink); }
.ws .tl-head h1 { font-size: clamp(22px, 2.2vw, 26px); }
.ws .tl-head { margin-bottom: 20px; }
.ws .tl-msg h1 { font-size: clamp(22px, 2.2vw, 26px); }

/* calculatie (veel kolommen): op schermen tot 1680 px wordt de zijbalk een smalle strook met alleen de pictogrammen */
.ws-brand .ws-mark { display: none; width: 30px; height: 30px; }
.ws .tl-ed-table input[data-mat] { min-width: 200px; }
@media (min-width: 961px) and (max-width: 1679px) {
  body.ws.tl-dense { --ws-side-w: 68px; }
  .tl-dense .ws-side { padding: 14px 10px; align-items: center; }
  .tl-dense .ws-brand { padding: 2px 0 18px; }
  .tl-dense .ws-brand .ws-logo, .tl-dense .ws-brand span { display: none; }
  .tl-dense .ws-brand .ws-mark { display: block; }
  .tl-dense .ws-new { width: 44px; height: 40px; padding: 0; margin: 0 0 14px; }
  .tl-dense .ws-new span, .tl-dense .ws-link span, .tl-dense .ws-ext, .tl-dense .ws-help, .tl-dense .ws-acc-t { display: none; }
  .tl-dense .ws-nav { width: 100%; }
  .tl-dense .ws-group { height: 1px; margin: 12px 4px; font-size: 0; background: var(--ws-line); }
  .tl-dense .ws-link { justify-content: center; padding: 10px 0; }
  .tl-dense .ws-link.is-on::before { left: -10px; }
  .tl-dense .ws-foot { width: 100%; }
  .tl-dense .ws-acc { flex-direction: column; gap: 6px; padding: 12px 0 0; }
  .tl-dense .ws-main { padding: 24px 24px 48px; }
}

/* ---------------------------------------------------------------- inlogscherm (toelevering.lenselink.nl opent hier) */
body.ws-login { margin: 0; min-height: 100vh; background: var(--lz-vlak); display: block; }
.wsl { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 16px; }
.wsl-brand { display: flex; align-items: center; gap: 16px; color: var(--ink); text-decoration: none; }
.wsl-brand img { width: 160px; height: auto; display: block; }
.wsl-brand span { font-size: 17px; font-weight: 700; line-height: 24px; padding-left: 16px; border-left: 1px solid var(--lz-rand); }
.wsl-card { width: 100%; max-width: 420px; box-sizing: border-box; background: var(--lz-wit); border: 1px solid var(--lz-lijn); padding: 28px 28px 24px; }
.wsl-wide .wsl-card { max-width: 640px; }
.wsl-card h1 { font-size: 24px; letter-spacing: -.015em; margin: 0 0 6px; }
.wsl-card .auth-intro { margin: 0 0 18px; font-size: 14px; }
.wsl-card .form { margin-top: 16px; }
.wsl-card .btn-primary { width: 100%; justify-content: center; }
.wsl-foot { margin: 0; font-size: 13px; color: var(--lz-grijs); text-align: center; }
.wsl-foot a { color: inherit; }
.wsl-card .form .btn-primary { margin-top: 8px; }

/* ---------------------------------------------------------------- order invoeren en productbibliotheek */
.tl-order { display: grid; gap: 16px; }
.tl-order .card.tl-form h2 { margin: 0 0 14px; }
.tl-order [data-zonder][hidden] { display: none; }
.tl-orderlines td { vertical-align: middle; }
.tl-orderlines input.c-p { width: 110px !important; text-align: right; }
.tl-orderlines input.c-p.is-own { border-color: var(--lz-oranje) !important; }
.tl-orderlines tfoot th, .tl-orderlines tfoot td { padding-top: 12px; border-bottom: 0; }
.tl-subadd select, .tl-adds select { min-width: 260px; width: auto; max-width: 100%; }
.tl-f-n { min-width: 0 !important; }
.tl-f-n .tl-unit input { width: 80px; }
.tl-libsearch { margin-left: auto; }
.tl .tl-libsearch input { width: 260px; padding: 7px 11px; font-size: 14px; }
@media (max-width: 640px) { .tl-libsearch { margin-left: 0; width: 100%; } .tl .tl-libsearch input { width: 100%; } }

/* ---------------------------------------------------------------- werkplanning: dagen met uren per werkplek */
.wp-board-wrap { padding: 0; overflow-x: auto; }
.wp-board { display: grid; grid-template-columns: 210px repeat(var(--wp-n), minmax(136px, 1fr)); min-width: calc(210px + var(--wp-n) * 136px); font-size: 13px; }
.wp-corner, .wp-day { position: sticky; top: 0; z-index: 2; background: var(--lz-wit); border-bottom: 1px solid var(--lz-werkvlak); }
.wp-corner { left: 0; z-index: 3; }
.wp-day { padding: 10px 8px 8px; display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--lz-vlak-2); }
.wp-day strong { font-weight: 600; white-space: nowrap; }
.wp-day span { font-size: 11.5px; color: var(--muted); }
.wp-day.is-today strong { color: var(--lz-oranje-tekst); }
.wp-day.is-today { box-shadow: inset 0 -2px 0 var(--lz-oranje); }
.wp-day.is-week, .wp-cell.is-week { border-left: 1px solid #B9C5CC; }
.wp-plek { position: sticky; left: 0; z-index: 1; background: var(--lz-wit); padding: 10px 12px; border-bottom: 1px solid var(--lz-vlak-2); border-right: 1px solid var(--lz-werkvlak); display: flex; flex-direction: column; gap: 2px; min-height: 68px; box-sizing: border-box; }
.wp-plek strong { font-weight: 600; }
.wp-plek small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.wp-plek-mens { min-height: 0; background: var(--lz-vlak); }
.wp-cell { position: relative; border-left: 1px solid var(--lz-vlak-2); border-bottom: 1px solid var(--lz-vlak-2); padding: 6px 5px 18px; min-height: 68px; box-sizing: border-box; display: flex; }
.wp-cell.is-today { background: var(--lz-wit); }
.wp-cell.is-over { background: var(--lz-oranje-licht); outline: 2px dashed var(--lz-oranje); outline-offset: -3px; }
.wp-mens { min-height: 0; padding: 8px; flex-direction: column; gap: 4px; background: var(--lz-vlak); }
.wp-mens small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wp-meter { display: block; height: 6px; background: var(--lz-lijn); overflow: hidden; }
.wp-meter i { display: block; height: 100%; background: var(--lz-navy); }
.wp-mens.is-vol .wp-meter i { background: var(--lz-rood); }
.wp-mens.is-vol small { color: var(--lz-rood); }
.wp-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--lz-vlak-2); pointer-events: none; }
.wp-blks { position: relative; flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wp-sw { display: inline-block; flex: none; width: 10px; height: 10px; background: var(--c, var(--lz-lijn-sterk)); margin-right: 7px; vertical-align: -1px; }
.wp-plek strong { display: flex; align-items: center; }
.wp-blk { flex: none; box-sizing: border-box; -webkit-user-drag: element; user-select: none; cursor: grab; min-height: 38px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 7px; background: var(--c, var(--lz-navy)); color: var(--t, var(--lz-wit)); font-size: 12px; line-height: 1.25; overflow: hidden; min-width: 0; transition: opacity .12s; }
.wp-blk-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.wp-blk .mono { font-weight: 600; font-size: 11px; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.wp-blk small { opacity: .8; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wp-blk-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; overflow: hidden; overflow-wrap: anywhere; min-width: 0; }
.wp-pin { width: 10px; height: 10px; flex: none; }
.wp-blk:hover { filter: brightness(1.08); }
.wp-blk:focus-visible { outline: 2px solid var(--lz-navy); outline-offset: 2px; }
.wp-blk.is-laat { outline: 2px solid var(--lz-rood); outline-offset: 1px; }
.wp-has-sel .wp-blk:not(.is-sel) { opacity: .22; }
.wp-blk.is-sel { outline: 2px solid var(--lz-navy); outline-offset: 2px; }
.wp-blk.is-drag { opacity: .4; }
.wp-bez { position: absolute; right: 6px; bottom: 3px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wp-list tr[data-row] { cursor: grab; }
.wp-list tr.is-sel td { background: var(--lz-oranje-licht); }
.wp-bron { display: inline-block; font-size: 11px; font-weight: 600; padding: 0 6px; background: var(--lz-vlak-2); color: #3B4B55; }
.wp-bron.is-zl { background: var(--lz-oranje-licht); color: var(--lz-oranje-tekst); }
.wp-st { display: inline-flex; align-items: center; }
.wp-st .wp-sw { width: 8px; height: 8px; margin-right: 4px; }
.wp-lever { display: inline; }
.wp-lever select { padding: 3px 6px; font-size: 13px; width: auto; }
.wp-zaagform .tl-actions { align-items: flex-end; }
.wp-f-week select { width: auto; min-width: 220px; }
.wp-list tr.is-drag td { opacity: .45; }
.wp-grip { color: var(--lz-lijn-sterk); width: 18px; letter-spacing: -2px; user-select: none; }
.wp-st.is-vast { color: var(--lz-oranje-tekst); font-weight: 600; }
.wp-list .wp-pijl { font-style: normal; color: var(--lz-lijn-sterk); margin: 0 4px; }
.wp-mv { width: 28px; height: 28px; }
.wp-los { display: inline; margin-left: 4px; }
.wp-instel summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.wp-form { display: grid; gap: 14px; margin-top: 16px; }
.wp-form .tl-unit input { width: 70px; }
.wp-error { margin: 0 0 12px; }
body.pl-busy { cursor: progress; }
body.pl-busy .wp-board, body.pl-busy .wp-list { opacity: .6; pointer-events: none; }
.wp-list .wp-mv { display: inline-grid; }

/* ---------------------------------------------------------------- klanten en prijsafspraken */
.kl-form { display: grid; gap: 16px; margin-bottom: 16px; }
.kl-form .card.tl-form h2 { margin: 0 0 14px; }
.kl-contacts input, .kl-contacts select { width: 100%; min-width: 120px; }
.kl-inline { display: inline; }
.kl-af td { vertical-align: top; }
.kl-detail { max-width: 62ch; overflow-wrap: anywhere; }
.kl-edit > summary, .kl-new > summary { list-style: none; cursor: pointer; display: inline-flex; }
.kl-edit > summary::-webkit-details-marker, .kl-new > summary::-webkit-details-marker { display: none; }
.kl-edit[open] { display: block; }
.kl-edit[open] .kl-afform { margin-top: 10px; min-width: min(640px, 80vw); }
.kl-new { margin-top: 14px; }
.kl-new[open] .kl-afform { margin-top: 14px; }
.kl-afform textarea[name="staffel"] { font-variant-numeric: tabular-nums; }
.kl-over-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 28px; }
.kl-over h2 { margin: 0 0 6px; }
.kl-over p { margin: 0 0 8px; line-height: 1.5; }
.kl-cl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; line-height: 1.4; }
.kl-gegevens { margin-top: 12px; }
.kl-gegevens > summary { list-style: none; cursor: pointer; display: inline-flex; }
.kl-gegevens > summary::-webkit-details-marker { display: none; }
.kl-gegevens[open] > summary { margin-bottom: 14px; }
.kl-gegevens .kl-form .card { box-shadow: none; border: 1px solid var(--lz-lijn); }
.kl-over h2.h5 { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin: 0 0 6px; }
.kl-over p, .kl-cl { font-size: 14px; }
.kl-tijd { border: 1px solid var(--lz-lijn); padding: 10px 12px 12px; margin: 0; }
.kl-tijd legend { font-size: 14px; font-weight: 600; padding: 0 4px; }
.kl-tijd legend small { font-weight: 400; color: var(--muted); }
.kl-tijd-rij { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; align-items: center; }
.kl-tijd-rij select { width: auto; min-width: 200px; }
.kl-tijd-rij .tl-unit input { width: 90px; }
.kl-tijd small { color: var(--muted); }
.kl-tijdtxt { color: var(--lz-blauw); }
.tl-order [hidden] { display: none !important; }
.tl-addlabel { font-size: 13px; font-weight: 600; color: var(--muted); }
.tl-orderlines .c-det { margin-top: 4px; font-size: 13px; }
.tl-orderlines .c-bw select { font-weight: 600; }
.c-plan { color: var(--lz-blauw); margin-top: 3px; }
.c-planuren { font-weight: 400; margin-left: 8px; }
.kl-tijd-rij > select[name$=".eenheid"] { min-width: 0; }
.kl-plaatnaam { flex: 1 1 320px; max-width: 460px; }
.kl-bewerk { border-color: var(--lz-blauw); }
.kl-bewerk .kl-afform { margin-top: 4px; }

/* werkplekken beheren */
.wp-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.wp-tab-zaag { margin-left: auto; }
.wps-table td { vertical-align: middle; }
.wps-kleur { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--lz-rand); background: var(--lz-wit); cursor: pointer; }
.wps-table input[name^="naam."] { min-width: 170px; }
.wps-table select[data-wps] { min-width: 160px; }
.wps-table input[name^="uren."], .wps-table input[name^="bedien."] { width: 58px; }
.wps-table td.wps-bem { min-width: 340px; }
.wps-prog { display: block; margin-top: 3px; font-size: 12px; }
.wps-bem > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wps-bem .tl-check { white-space: nowrap; }
.wps-table select[data-wps-bem] { width: auto; min-width: 0; }
.wps-rij [data-wps-kantoor] { display: none; }
.wps-rij[data-soort="cad"] [data-wps-kantoor] { display: inline; }
.wps-rij[data-soort="cad"] [data-wps-werkplaats] { display: none; }
.wps-rij[data-bem="ja"] [data-wps-bedien] { display: none; }
.wps-rij:not([data-soort="nesting"]) [data-wps-plaat] { display: none; }
.wps-plaat { display: inline-flex; align-items: center; gap: 4px; }
.wps-table .wps-plaat input { width: 70px; min-width: 70px; flex: none; }
.wps-plaat em { font-style: normal; color: var(--muted); font-size: 13px; white-space: nowrap; }
.wps-rij.is-nieuw td { background: var(--lz-wit); }
.wps-weg { color: var(--lz-rood); white-space: nowrap; }
.wps-tijden { gap: 16px; margin-bottom: 12px; }
.wp-form > * { min-width: 0; }

/* transport */
.tr-board .wp-cell { padding-bottom: 6px; min-height: 84px; }
.tr-rit { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; background: var(--lz-navy); color: var(--lz-wit); text-decoration: none; font-size: 12px; line-height: 1.25; min-width: 0; }
.tr-rit:hover, .tr-rit:focus-visible { background: var(--lz-navy-3); color: var(--lz-wit); }
.tr-rit.is-extern { background: var(--lz-wit); color: var(--lz-navy); border: 1.5px solid var(--lz-navy); }
.tr-rit.is-extern:hover { background: var(--lz-vlak); color: var(--lz-navy); }
.tr-rit.is-vol { background: var(--lz-rood); }
.tr-rit.is-klaar { opacity: .55; }
.tr-rit-top { display: flex; justify-content: space-between; gap: 6px; }
.tr-rit-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-rit-top small, .tr-rit-sub { font-size: 11px; opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-bar { display: block; height: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.tr-bar i { display: block; height: 100%; background: var(--lz-wit); }
.tr-rit-warn { font-size: 11px; font-weight: 600; }
.tr-rit-ok { font-size: 11px; }
.tr-planform { flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tr-planform .tl-f { margin: 0; }
.tr-planform [hidden] { display: none !important; }
.tr-inst { margin-top: 12px; }
.tr-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 16px; }
.tr-tegel { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.tr-tegel span { font-size: 13px; color: var(--muted); }
.tr-tegel strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.tr-tegel strong.is-rood { color: var(--lz-rood); }
.tr-tegel small { font-size: 12px; color: var(--muted); }
.tr-lijst td { vertical-align: top; }
.tr-tijd strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.tr-tijd small { color: var(--muted); }
.tr-nr { font-weight: 700; color: var(--lz-oranje); }
.tr-depot td { background: var(--lz-vlak); }
.tr-stop.is-zonder td { background: var(--lz-rood-licht); }
.tr-inline { display: inline-flex; gap: 4px; align-items: center; margin: 0 4px 0 0; }
.tr-inline .tl-unit input { width: 56px; }
.tr-inline select { max-width: 200px; }
.tr-acties { white-space: nowrap; }
.tr-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .tr-tegels, .tr-twee { grid-template-columns: 1fr 1fr; } }
@media print {
  .tr-noprint, .ws-side, .ws-top, .tl-crumb { display: none !important; }
  .tr-tegels { grid-template-columns: repeat(4, 1fr); }
  .tr-lijst th:last-child, .tr-lijst td:last-child, .tr-lijst td:nth-child(5) form .tl-unit em { display: none; }
}
.tr-adres { margin-top: 4px; }
.tr-lading input { width: 80px; }
.tr-lijst td.tr-acties { white-space: normal; min-width: 200px; }
.tr-voertuigen td { vertical-align: middle; }
.tr-voertuigen select { min-width: 160px; }
.tr-voertuigen input[name^="vt.naam."] { min-width: 150px; }
.tr-lbh { display: inline-flex; align-items: center; gap: 4px; }
.tr-lbh input { width: 68px; }
.tr-lbh em, .tr-lbh span { font-style: normal; color: var(--muted); font-size: 12px; }
.tr-voertuigen .tl-unit input { width: 72px; }
.tr-adres summary { cursor: pointer; color: var(--muted); }
.tr-adres input[name="adres"] { min-width: 260px; }
.tr-board-wrap { margin-bottom: 16px; }

/* nieuwe order: drie stappen links, samenvatting rechts */
.ord-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.ord-main { display: grid; gap: 16px; min-width: 0; }
.ord-side { position: sticky; top: 16px; }
.ord-sec { padding: 20px 22px; }
.ord-h { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 14px; }
.ord-n { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--lz-navy); color: var(--lz-wit); font-size: 13px; font-weight: 700; flex: none; }
.ord-sec .tl-sec-head .ord-h { margin: 0; }
.ord-zoek { position: relative; }
.tl .ord-zoek input[type=search] { width: 100%; font-size: 15px; padding: 11px 14px; border: 1.5px solid var(--lz-rand); background: var(--lz-wit); box-sizing: border-box; }
.tl .ord-zoek input[type=search]:focus { border-color: var(--lz-navy); outline: none; box-shadow: 0 0 0 3px rgba(13,30,39,.08); }
.ord-pop { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px 0; list-style: none; background: var(--lz-wit); border: 1px solid var(--lz-rand); box-shadow: 0 12px 28px rgba(13,30,39,.14); max-height: 380px; overflow-y: auto; }
.ord-pop-kop { padding: 8px 14px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ord-pop-it { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.ord-pop-it.is-act, .ord-pop-it:hover { background: var(--lz-vlak); }
.ord-pop-it.is-actie .ord-pop-t { color: var(--lz-oranje-tekst); font-weight: 600; }
.ord-pop-t { flex: 1; min-width: 0; }
.ord-pop-s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; font-variant-numeric: tabular-nums; }
.ord-sw { flex: none; width: 10px; height: 10px; align-self: center; }
.ord-klantkaart { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--lz-vlak); border: 1px solid var(--lz-lijn); }
.ord-kk { display: flex; flex-direction: column; gap: 2px; }
.ord-kk strong { font-size: 16px; }
.ord-kk-acties { display: flex; gap: 6px; flex: none; }
.ord-los { margin-top: 12px; }
.ord-ordergeg { margin-top: 14px; }
.ord-snel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ord-snel[hidden] { display: none; }
.ord-snelkaart { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1.5px dashed var(--lz-rand); background: var(--lz-wit); font: inherit; cursor: pointer; color: var(--ink); }
.ord-snelkaart:hover, .ord-snelkaart:focus-visible { border-style: solid; border-color: var(--lz-navy); background: var(--lz-wit); }
.ord-snelkaart strong { font-size: 15px; }
.ord-snelkaart span { font-size: 13px; color: var(--muted); }
.ord-kopie { margin: 0 0 14px; padding: 12px 14px; background: var(--lz-vlak); }
.ord-kopie p { margin: 0 0 8px; }
.ord-kopielijst { display: flex; flex-wrap: wrap; gap: 6px; }
.ord-lines td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.ord-lines tr.ord-r-bewerking td:first-child { box-shadow: inset 4px 0 0 var(--c, var(--lz-navy-zacht)); padding-left: 12px; }
.ord-lines .ord-leeg td { padding: 16px 8px; }
.ord-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.ord-tag-afspraak { color: var(--lz-blauw); }
.ord-tag-plaat { color: var(--lz-groen); }
.ord-tag-bewerking { color: var(--lz-oranje-tekst); }
.ord-lines td:first-child > strong { display: block; }
.ord-add { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lz-lijn); display: grid; gap: 10px; }
.ord-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ord-chips-sep { width: 1px; height: 22px; background: var(--lz-rand); margin: 0 4px; }
.ord-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--lz-rand); background: var(--lz-wit); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ord-chip i { width: 9px; height: 9px; background: var(--c, var(--lz-navy-zacht)); }
.ord-chip:hover, .ord-chip:focus-visible { border-color: var(--lz-navy); }
.ord-chip.is-on { background: var(--lz-navy); color: var(--lz-wit); border-color: var(--lz-navy); }
.ord-chip small { font-weight: 400; color: var(--muted); }
.ord-lev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.ord-datums { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl .ord-datums input[type=date] { width: auto; }
.ord-seg { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ord-seg legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.ord-seg label { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--lz-rand); cursor: pointer; }
.ord-seg label:has(input:checked) { border-color: var(--lz-navy); background: var(--lz-vlak); font-weight: 600; }
.ord-sum { padding: 18px; display: grid; gap: 14px; }
.ord-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.ord-dl dt { color: var(--muted); }
.ord-dl dd { margin: 0; font-weight: 600; text-align: right; }
.ord-tot { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--lz-lijn); border-bottom: 1px solid var(--lz-lijn); }
.ord-tot strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.ord-uren { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ord-u { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.ord-u i { width: 10px; height: 10px; background: var(--c); flex: none; }
.ord-u strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.ord-warn { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ord-warn li { font-size: 13px; color: var(--lz-rood); padding-left: 14px; position: relative; }
.ord-warn li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--lz-rood); }
.ord-warn:empty { display: none; }
.ord-submit { width: 100%; justify-content: center; }
@media (max-width: 1100px) { .ord-grid { grid-template-columns: 1fr; } .ord-side { position: static; } }
@media (max-width: 720px) { .ord-snel, .ord-lev { grid-template-columns: 1fr; } }

/* dashboard: de werkplaats van boven met de stroom van het werk (tl-fabriek.js) */
.tlf-stage { position: relative; height: clamp(440px, 50vw, 640px); margin: 4px -6px 0; overflow: hidden; background: var(--lz-wit); }
.tlf-stage:not(.tlf-on) { background: radial-gradient(ellipse at center, var(--lz-vlak-2) 0 55%, var(--lz-wit) 75%); }
.tlf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tlf-labels { position: absolute; inset: 0; pointer-events: none; }
.tlf-label { position: absolute; left: 0; top: 0; display: inline-flex; align-items: baseline; gap: 5px; max-width: 300px; padding: 3px 8px 3px 7px; margin-top: -6px;
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(13, 30, 39, .12); box-shadow: 0 2px 6px rgba(13, 30, 39, .12);
  font-size: 11.5px; line-height: 1.25; color: var(--lz-navy); white-space: nowrap; will-change: transform; }
.tlf-label i { flex: none; width: 8px; height: 8px; background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); align-self: center; }
.tlf-label b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.tlf-label small { font-size: 10.5px; color: var(--muted); }
.tlf-klein .tlf-label { font-size: 10.5px; padding: 2px 6px; }
.tlf-klein .tlf-label small, .tlf-klein .tlf-bij { display: none; }
.tlf-geen { display: grid; place-items: center; height: auto; min-height: 120px; background: var(--lz-vlak); }
.tlf-fallback { margin: 0; padding: 24px; color: var(--muted); font-size: 14px; text-align: center; }
.tlf-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink); }
.tlf-legend li { display: inline-flex; align-items: center; gap: 7px; }
.tlf-legend li::before { content: ''; width: 18px; height: 5px; background: var(--c, #6F7D86); box-shadow: 0 0 6px color-mix(in srgb, var(--c, #6F7D86) 55%, transparent); }
.tlf-legend .tlf-neutraal { color: var(--muted); }
.tlf-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .tlf-stage { height: min(132vw, 640px); margin: 4px -10px 0; } }
/* tijd per stuk: in minuten of zoals gemeten ("10 per uur") */
.tl-ed-table input.c-t { width: 128px !important; }
.tl-ed-table input.is-bad { border-color: var(--lz-oranje-2) !important; background: var(--lz-oranje-licht); }
.tl-tijden { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; }
.tl-tijden small { display: block; margin-top: 2px; }
.kl-onder { color: var(--lz-rood); font-weight: 600; }
.ord-onder { color: var(--lz-rood); font-weight: 600; }
/* leveren in delen */
.ord-delen-box { display: grid; gap: 10px; }
.ord-delen-gen { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; }
.ord-delen-gen input[data-dper] { width: 70px; }
.ord-delen { width: 100%; max-width: 460px; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.ord-delen th { text-align: left; font-weight: 600; font-size: 12px; color: var(--lz-grijs); padding: 4px 6px; }
.ord-delen td { padding: 3px 6px; border-top: 1px solid var(--lz-vlak-2); }
.ord-delen input[data-dd="q"] { width: 80px; text-align: right; }
.ord-delen-voet { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.tl-delen { margin-top: 14px; border-top: 1px solid var(--lz-vlak-2); padding-top: 12px; } .tl-delen summary { cursor: pointer; }
.ord .ord-delen-gen label, .ord-delen-gen label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.tl-delen input[name$=".q"] { width: 90px; text-align: right; }

/* ---------------------------------------------------------------- dashboard op één scherm (ook voor een tv in de fabriek)
   Geen paginascroll: de hoogte van het venster wordt verdeeld; lijsten die niet passen tonen "nog N" (data-fit). */
body.tl-wall { overflow: hidden; }
body.tl-wall .ws-shell { height: 100dvh; }
body.tl-wall .ws-body { height: 100dvh; overflow: hidden; }
body.tl-wall .ws-main { flex: 1; min-height: 0; padding: clamp(10px, 1.6vh, 24px) clamp(14px, 1.6vw, 32px); display: flex; }
body.tl-wall .tl-main { max-width: none; flex: 1; min-height: 0; display: flex; }
.tlw { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(8px, 1.3vh, 18px); font-size: clamp(12px, .78vw + .2vh, 22px); }
.tlw-head { display: flex; align-items: baseline; gap: 14px; }
.tlw-head h1 { margin: 0; font-size: clamp(20px, 1.5vw, 40px); line-height: 1.1; }
.tlw-sub { color: var(--muted); font-size: .95em; }
.tlw-head .tl-tabs { margin-left: auto; }
.tlw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1px repeat(3, minmax(0, 1fr)); gap: clamp(6px, .8vw, 16px); }
.tlw-sep { background: var(--ws-line, var(--lz-lijn)); margin: 6px 0; }
.tlw .tl-kpi { padding: clamp(8px, 1.1vh, 18px) clamp(10px, .9vw, 20px); min-width: 0; }
.tlw .tl-kpi span { font-size: .82em; }
.tlw .tl-kpi strong { font-size: clamp(22px, 2vw + .6vh, 56px); line-height: 1.05; margin: 2px 0; }
.tlw .tl-kpi small { font-size: .78em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tlw-grid { min-height: 0; display: grid; gap: clamp(8px, .9vw, 18px);
  grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "fab todo kl" "fab lev rec"; }
.tlw-grid > .card { min-height: 0; margin: 0; overflow: hidden; display: flex; flex-direction: column; padding: clamp(10px, 1.2vh, 22px) clamp(12px, 1vw, 22px); }
.tlw-grid h2 { margin: 0 0 .5em; font-size: 1.12em; display: flex; align-items: baseline; gap: 8px; }
.tlw-n { font-size: .8em; font-weight: 600; color: var(--lz-wit); background: var(--orange, var(--lz-oranje)); padding: 0 .55em; }
.tlw-per { font-size: .78em; font-weight: 400; color: var(--muted); }
.tlw-fab { grid-area: fab; }
.tlw-todo { grid-area: todo; } .tlw-lev { grid-area: lev; } .tlw-kl { grid-area: kl; } .tlw-rec { grid-area: rec; }
.tlw-fab .tl-sec-head { margin-bottom: 6px; flex-wrap: wrap; gap: 6px 16px; }
.tlw-fab .tl-sec-head h2 { margin: 0; }
.tlw-fab .tlf-legend { margin: 0; gap: 4px 14px; font-size: .82em; }
.tlw .tlw-fab .tlf-stage { flex: 1; min-height: 0; height: auto; margin: 0 -4px; }
.tlw-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.tlw-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--lz-vlak-2); padding: .38em 0; min-width: 0; }
.tlw-list li[hidden] { display: none; }
.tlw-list a { display: grid; min-width: 0; text-decoration: none; color: var(--ink); }
.tlw-list a strong, .tlw-list a span, .tlw-kn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlw-list a span { font-size: .85em; color: var(--muted); }
.tlw-list small { color: var(--muted); white-space: nowrap; font-size: .8em; }
.tlw-kl .tlw-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.tlw-meer { margin-top: auto; padding-top: .4em; font-size: .85em; }
.tlw-weeks { font-size: .92em; }
.tlw-weeks td { padding-top: .22em; padding-bottom: .22em; }
.tlw-lev { overflow: hidden; }
.tlw-late { margin: 0 0 .5em; font-size: .85em; }
@media (max-width: 1100px) {
  body.tl-wall, body.tl-wall .ws-body { overflow: auto; height: auto; }
  body.tl-wall .ws-shell { height: auto; }
  .tlw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tlw-sep { display: none; }
  .tlw-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "fab" "todo" "lev" "kl" "rec"; }
  .tlw .tlw-fab .tlf-stage { height: clamp(320px, 70vw, 560px); flex: none; }
}
.tlw-weeks td { white-space: nowrap; }
.tlw-weeks .tl-bar { width: 32%; }
.tlw-lev h2, .tlw-todo h2, .tlw-kl h2, .tlw-rec h2 { flex: none; }
.tlw .tlw-weeks td { padding: clamp(1px, .45vh, 8px) .4em; line-height: 1.3; }

/* ---------------------------------------------------------------- planbord op één scherm */
.wpw { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1vh, 14px); }
.wpw-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wpw-head h1 { margin: 0; font-size: clamp(20px, 1.5vw, 40px); cursor: help; }
.wpw-head .wp-tabs { margin: 0; }
.wpw-nav { margin-left: auto; }
.wpw-note { margin: 0; padding: 6px 12px; }
.wpw-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 760px); gap: clamp(8px, .9vw, 18px); }
.wpw .wp-board-wrap { min-height: 0; overflow: hidden; margin: 0; display: flex; }
.wpw .wp-board { flex: 1; min-width: 0; height: 100%; grid-template-columns: clamp(120px, 9vw, 240px) repeat(var(--wp-n), minmax(0, 1fr)); grid-template-rows: auto auto repeat(var(--wp-r), minmax(0, 1fr)); font-size: clamp(11px, .55vw + .25vh, 20px); }
.wpw .wp-plek { min-height: 0; padding: 4px 8px; overflow: hidden; }
.wpw .wp-plek small { font-size: .8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wpw .wp-day { padding: 5px 6px 4px; }
.wpw .wp-day span { font-size: .8em; }
.wpw .wp-cell { min-height: 0; padding: 2px 3px 14px; overflow: hidden; }
.wpw .wp-mens { padding: 4px 6px; }
.wpw .wp-blks { gap: 1px; min-height: 0; overflow: hidden; }
.wpw .wp-blk { flex: 0 1 var(--h, 20%); min-height: 1.35em; padding: 1px 5px; justify-content: flex-start; font-size: .9em; }
.wpw .wp-blk .mono, .wpw .wp-blk small { font-size: .88em; }
.wpw .wp-blk-n { -webkit-line-clamp: 3; font-size: .95em; }
.wpw .wp-bez { font-size: .78em; bottom: 1px; }
.wpw-side { min-height: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden; padding: clamp(8px, 1.2vh, 20px) clamp(10px, .9vw, 20px); font-size: clamp(11px, .55vw + .2vh, 18px); }
.wpw-side .tl-sec-head { flex-wrap: wrap; gap: 2px 10px; margin-bottom: 6px; }
.wpw-side h2 { margin: 0; font-size: 1.15em; }
.wpw-list { flex: 1; min-height: 0; overflow: auto; }
.wpw-side .wp-list { font-size: .92em; }
.wpw-side .wp-list th:nth-child(4), .wpw-side .wp-list td:nth-child(4), .wpw-side .wp-list th:nth-child(6), .wpw-side .wp-list td:nth-child(6) { display: none; }
.wpw-side .wp-list td { padding: .3em .35em; vertical-align: top; }
.wpw-side .wp-list .small { font-size: .82em; }
.wpw-side .wp-list .wp-los { display: none; }
.wpw-side .wp-list tr:hover .wp-los, .wpw-side .wp-list tr:focus-within .wp-los { display: inline; }
.wp-zaag-dlg { width: min(1100px, 94vw); max-height: 86vh; border: 0; padding: 18px 22px; box-shadow: 0 20px 60px rgba(13, 30, 39, .3); }
.wp-zaag-dlg::backdrop { background: rgba(13, 30, 39, .4); }
.wp-zaag-dlg .wp-zaag { margin: 0; }
.wp-zaag-dlg .table-wrap { max-height: 56vh; overflow: auto; }
@media (max-width: 1100px) {
  .wpw-main { grid-template-columns: minmax(0, 1fr); }
  .wpw .wp-board-wrap { overflow-x: auto; }
  .wpw .wp-board { min-width: calc(140px + var(--wp-n) * 110px); height: auto; grid-template-rows: none; }
  .wpw .wp-cell { min-height: 68px; }
}
.wpw-main { grid-template-columns: minmax(0, 1fr) clamp(300px, 23vw, 680px); }
.wpw-side .wp-list th:nth-child(1), .wpw-side .wp-list td:nth-child(1) { display: none; }
.wpw-side .wp-list td:nth-child(3) { width: 100%; max-width: 0; }
.wpw-side .wp-list td:nth-child(3) > a, .wpw-side .wp-list td:nth-child(3) > .small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpw-side .wp-list td:nth-child(3) .wp-bron { font-size: .9em; padding: 0 .35em; }
.wpw-side .wp-list select { padding: 2px 4px; font-size: .9em; height: auto; min-height: 0; width: auto; }
.wpw-side .wp-list .tl-st { font-size: .8em; padding: 0 .4em; }
.wpw-side .wp-list td:nth-child(8) { white-space: nowrap; }
/* planbord: met veel werkplekken past het niet op één scherm; dan scrolt de pagina in plaats van dat werk onzichtbaar
   onder de rand verdwijnt. Iedere rij krijgt de hoogte die zijn blokken nodig hebben. */
body.tl-wall:has(.wpw) { overflow: auto; }
body.tl-wall:has(.wpw) .ws-shell { height: auto; min-height: 100dvh; }
body.tl-wall:has(.wpw) .ws-body { height: auto; min-height: 100dvh; overflow: visible; }
body.tl-wall:has(.wpw) .ws-main { align-items: flex-start; }
.wpw .wp-board-wrap { overflow-x: auto; }
.wpw .wp-board { height: auto; grid-template-rows: none; }
.wpw .wp-cell, .wpw .wp-blks { overflow: visible; }
.wpw .wp-cell { min-height: 64px; }
.wpw .wp-blk { flex: none; min-height: 1.6em; }
.wpw-side { align-self: start; position: sticky; top: calc(var(--ws-top-h, 64px) + 12px); max-height: calc(100dvh - var(--ws-top-h, 64px) - 24px); }
.wpw-side .wp-list .wp-mv { width: 1.6em; height: 1.6em; }
.wpw-side .wp-list tr { position: relative; }
/* acties per rij: altijd zichtbaar (↑ ↓ en een vast menu Meer), nooit over de rij heen */
.wpw-side .wp-list th:nth-child(9) { width: 1%; }
.wpw-side .wp-list td.wp-acties { white-space: nowrap; }
.wp-acties > * { vertical-align: middle; }
.wp-meer { display: inline-block; position: relative; }
.wp-meer > summary { list-style: none; display: inline-grid; place-items: center; cursor: pointer; }
.wp-meer > summary::-webkit-details-marker { display: none; }
.wp-meer-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; display: grid; background: var(--lz-wit); border: 1px solid var(--lz-rand); box-shadow: 0 8px 24px rgba(13, 30, 39, .14); }
.wp-meer-menu form { display: contents; }
.wp-meer-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--lz-vlak-2); background: var(--lz-wit); font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.wp-meer-menu button:hover, .wp-meer-menu button:focus-visible { background: var(--lz-vlak); }
.wpw-side .wp-list td:nth-child(3) .wp-bron:not(.is-zl) { display: none; }
.tl-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }

/* losse items op het planbord */
.wp-blk.is-los { border-style: dashed; }
.wp-blk.is-spoed { box-shadow: inset 4px 0 0 var(--lz-rood); }
.wp-blk.is-onderhoud { background-image: repeating-linear-gradient(135deg, rgba(13, 30, 39, .14) 0 6px, transparent 6px 12px); }
.wp-bron.is-ls { background: var(--lz-vlak-2); color: #33444D; }
.wp-los-dlg { width: min(640px, 94vw); border: 0; padding: 18px 22px; box-shadow: 0 20px 60px rgba(13, 30, 39, .3); }
.wp-los-dlg::backdrop { background: rgba(13, 30, 39, .4); }
.wp-losgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 10px 0; }
.wp-losgrid .wp-losw { grid-column: 1 / -1; }
.wp-losgrid input, .wp-losgrid select { width: 100%; }
.wp-los-act { display: inline-flex; gap: 2px; } .wp-los-f { display: inline-flex; }

/* verpakking van een product (stuks per pallet, doos of bundel) */
.tl-verpakking { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-verpakking select { width: auto; }
.tl-catalogus { margin: 0 0 12px; gap: 8px; align-items: center; }
.tl-catalogus select { width: auto; }
/* programma: alleen de velden van de gekozen plaatsoort (catalogus of eigen plaat) */
.tl-prog:has(input[name=soort][value=eigen]:checked) [data-cat], .tl-prog:has(input[name=soort][value=catalogus]:checked) [data-eigen] { display: none; }
.tl-prog .tl-art-side h3 { margin-top: 16px; }

/* product maken: genummerde stappen, de keuzes hoe een deel gemaakt wordt, wat er nodig is en de opbouw */
.tl-stapnr { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; background: var(--ink, var(--lz-navy)); color: var(--lz-wit); font-size: 13px; font-weight: 700; vertical-align: 2px; }
.tl-stap .tl-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 6px; }
.tl-maak { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 14px 0 6px; }
.tl-maak-k { display: grid; gap: 4px; text-align: left; padding: 10px 12px; background: var(--lz-wit); border: 1px solid var(--lz-rand); cursor: pointer; font: inherit; color: var(--ink, var(--lz-navy)); }
.tl-maak-k strong { font-size: 14px; }
.tl-maak-k strong::before { content: '+ '; color: var(--lz-oranje); }
.tl-maak-k small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.tl-maak-k:hover, .tl-maak-k:focus-visible { border-color: var(--lz-oranje); outline: none; }
.tl-nodig { border-left: 3px solid var(--lz-oranje); padding: 8px 12px; margin: 10px 0 12px; background: var(--lz-vlak); }
.tl-nodig ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.tl-opbouw { margin-top: 14px; }
.tl-boom { list-style: none; margin: 4px 0 0 0; padding: 0 0 0 14px; border-left: 1px solid var(--lz-werkvlak); font-size: 13px; }
.tl-opbouw > .tl-boom { border-left: 0; padding-left: 0; }
.tl-boom li { margin: 3px 0; }
.tl-boom-n { display: inline-block; min-width: 38px; font-variant-numeric: tabular-nums; color: var(--muted); }
.tl-boom-sub > .tl-boom-n + * , .tl-boom-sub { font-weight: 600; }
.tl-boom-sub .tl-boom li { font-weight: 400; }
.tl-start { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tl-start form { display: contents; }
.tl-start button { display: grid; gap: 6px; align-content: start; text-align: left; padding: 16px 18px; min-height: 150px; background: var(--lz-wit); border: 1px solid var(--lz-rand); cursor: pointer; font: inherit; color: var(--ink, var(--lz-navy)); }
.tl-start button:hover, .tl-start button:focus-visible { border-color: var(--lz-oranje); outline: none; }
.tl-start strong { font-size: 17px; }
.tl-start small { color: var(--muted); line-height: 1.45; font-size: 13px; }
.tl-start em { font-style: normal; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--lz-oranje); }
.tl-prog:has(input[name=soort][value=product]:checked) [data-cat], .tl-prog:has(input[name=soort][value=product]:checked) [data-eigen] { display: none; }

/* Nieuw product: compacte tegels met een pictogram (de uitleg staat in de tooltip) */
.tl-start { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.tl-start button { min-height: 0; justify-items: center; text-align: center; gap: 4px; padding: 18px 10px 14px; }
.tl-start button svg { color: var(--lz-navy); margin-bottom: 6px; }
.tl-start button:hover svg, .tl-start button:focus-visible svg { color: var(--lz-oranje); }
.tl-start strong { font-size: 15px; }
.tl-start small { font-size: 12px; }
/* nieuwe order: de catalogus van de klant als snelle lijst met aantallen (tl-order.js) */
.ord-catalogus { margin: 10px 0 4px; }
.ord-cat td.num { width: 90px; }
.ord-cat-voet { margin-top: 8px; }
/* ritpagina: levering bevestigen per stop (productie-levering.ts) */
.lv-rit .tr-acties { white-space: normal; }
.lv-rit .lv-stop { gap: 6px; }
.lv-niet { display: inline-block; margin-left: 8px; }
.lv-niet summary { cursor: pointer; }
.lv-niet form { margin-top: 6px; gap: 6px; }
.lv-weg td { opacity: .75; }

/* Nieuw product: zakelijk formulier met het producttype als keuze met pictogram */
.tl-nieuwprod { max-width: none; }
.tl-nieuwprod input[name="naam"] { max-width: 640px; }
.tl-types { border: 0; padding: 0; margin: 18px 0 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tl-types legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.tl-types label { position: relative; display: grid; justify-items: center; gap: 3px; padding: 14px 8px 12px; border: 1px solid var(--lz-rand); background: var(--lz-wit); cursor: pointer; text-align: center; }
.tl-types input { position: absolute; opacity: 0; pointer-events: none; }
.tl-types svg { color: #586973; width: 52px; height: 39px; margin-bottom: 4px; }
.tl-types strong { font-size: 13.5px; }
.tl-types small { font-size: 11.5px; color: var(--muted); }
.tl-types label:hover { border-color: var(--lz-navy); }
.tl-types label:has(input:checked) { border-color: var(--lz-oranje); box-shadow: inset 0 0 0 1px var(--lz-oranje); }
.tl-types label:has(input:checked) svg { color: var(--lz-oranje); }
.tl-types label:has(input:focus-visible) { outline: 2px solid var(--lz-navy); outline-offset: 2px; }
.tl-nieuwprod > .tl-inl { display: grid; grid-template-columns: 200px minmax(0, 1fr) 240px; gap: 12px; }
@media (max-width: 720px) { .tl-nieuwprod > .tl-inl { grid-template-columns: 1fr; } }
.tl-nieuwprod .tl-f input, .tl-nieuwprod .tl-f select { width: 100%; }

.tl-maak { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tl-maak-k { padding: 8px 10px; gap: 1px; }
.tl-maak-k strong { font-size: 13.5px; }
.tl-maak-k small { font-size: 11.5px; }
.tr-ophaal { margin: 2px 0 4px; font-size: 14px; }

/* de slimme aanvraag in het kort (aanvraagKort in toelevering-app.ts), alleen voor Lenselink */
.tl-kort { border-left: 3px solid var(--lz-oranje); }
.tl-kort-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.tl-kort-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; background: var(--lz-vlak); border: 1px solid var(--lz-rand); font-size: 13px; font-weight: 600; color: var(--lz-navy); }
.tl-kort-chip.is-sterk { background: var(--lz-oranje-licht); border-color: var(--lz-oranje-rand); color: var(--lz-oranje-tekst); }
.tl-kort-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tl-kort-checks li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--lz-tekst-2); }
.tl-kort-checks li::before { content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: var(--lz-groen); }
.tl-kort-checks li.is-let::before { background: var(--lz-oranje); }
.tl-kort-checks li.is-vraag::before { background: var(--lz-blauw); }
/* calculatie: transportkosten uitrekenen met een eigen voertuig */
.tl-post-vervoer td { padding-top: 0; }
.tl-post-vervoer .tl-inl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-post-vervoer select { width: auto; min-width: 160px; }
.tl-post-vervoer .tl-unit input { width: 90px; }
.tl-post-vervoer small { display: block; margin-top: 4px; }

/* offerte na het versturen: een nieuwe versie opstellen ingeklapt onder de offerte (nachttest 15-10) */
.tl-nieuwe-versie { margin: 0 0 16px; }
.tl-nieuwe-versie > summary { display: inline-flex; list-style: none; cursor: pointer; margin: 0 0 12px; }
.tl-nieuwe-versie > summary::-webkit-details-marker { display: none; }