@charset "UTF-8";
:root {
  --bg: #f3f5f8;
  --panel: #ffffff;
  --text: #1c2430;
  --muted: #6b7684;
  --line: #e2e6eb;
  --brand: #0f2c4c;
  --accent: #c8102e;
  --primary: #1f5fbf;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.25; }
h2 { font-size: 1.15rem; }
h3 { font-size: .95rem; margin-top: 1.4em; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.pad { padding: 1rem; }
[hidden] { display: none !important; }

/* knoppen en velden */
.btn { display: inline-flex; align-items: center; gap: .4em; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: .5em .9em; cursor: pointer; text-decoration: none; color: var(--text); white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: #c5ccd5; background: #fafbfc; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #194f9f; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.small { padding: .3em .65em; font-size: .85rem; }
.btn.icon { padding: .3em .6em; }
.btn small { color: var(--muted); font-size: .8em; }
.btn.primary small { color: #dbe6f7; }
.field { display: flex; flex-direction: column; gap: .3em; margin-bottom: .9em; font-weight: 500; }
.field > span { font-weight: 500; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: .5em .65em; background: #fff; font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd3f5; border-color: var(--primary); }
textarea { resize: vertical; }
.check { display: flex; gap: .5em; align-items: center; margin-bottom: .9em; }
.check input { width: auto; }
.row { display: flex; gap: .5em; flex-wrap: wrap; margin: .5em 0; }
.alert { background: #fdecee; color: #8a1424; border-radius: 8px; padding: .6em .8em; }

/* login */
body.auth { display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #0f2c4c, #1d4a7a); }
.auth-card { background: var(--panel); width: min(400px, 100%); padding: 2rem; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.auth-card form { display: flex; flex-direction: column; }
.auth-card .btn { justify-content: center; padding: .7em; margin-top: .4em; }
.auth-card .brand { margin-bottom: 1.4rem; color: var(--brand); }

/* topbalk */
.brand { display: flex; align-items: center; gap: .55em; font-weight: 600; white-space: nowrap; }
.brand-mark { background: var(--accent); color: #fff; font-weight: 800; letter-spacing: .04em; padding: .2em .45em; border-radius: 6px; }
.topbar { height: 56px; display: flex; align-items: center; gap: 1.25rem; padding: 0 16px; background: var(--brand); color: #fff; position: relative; z-index: 10; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.12); }
.tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; height: 100%; scrollbar-width: none; }
.tabs button { position: relative; display: inline-flex; align-items: center; gap: .45em; background: transparent; border: 0; color: #b8c8dc; padding: 0 .85em; cursor: pointer; font-weight: 500; white-space: nowrap; height: 100%; }
.tabs button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.tabs button:hover { color: #fff; background: rgba(255,255,255,.06); }
.tabs button.active { color: #fff; }
.tabs button.active::after { content: ''; position: absolute; left: .6em; right: .6em; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.tabs button:focus { outline: none; }
.tabs button:focus-visible { outline: 2px solid #8fb4ea; outline-offset: -4px; border-radius: 6px; }
.me { display: flex; align-items: center; gap: .55rem; font-size: .9rem; }
.me form { margin: 0; }
.me .btn { color: #b8c8dc; }
.me .btn:hover { color: #fff; background: rgba(255,255,255,.08); border-color: transparent; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #2a4b73; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }

/* layout */
.layout { display: flex; height: calc(100% - 56px); }
.filters { width: 290px; flex: none; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); transition: margin-left .2s ease; }
body.filters-collapsed .filters { margin-left: -290px; }
.filters-head { display: flex; align-items: center; gap: .3rem; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.filters-head h2 { margin: 0; flex: 1; display: flex; align-items: center; gap: .4em; font-size: 1.05rem; }
.filters-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.filters-foot { border-top: 1px solid var(--line); padding: 10px 14px 12px; background: #fafbfc; }
.filters-foot .row { margin: 0 0 .3em; }
.filters-foot p { margin: 0; }
.search-field { margin-bottom: 10px; }
.search-field input { padding: .6em .75em .6em 2.1em; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .65em center; }
.fgroup { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: #fff; }
.fgroup > summary { list-style: none; cursor: pointer; padding: .65em .8em; font-weight: 600; display: flex; align-items: center; gap: .45em; user-select: none; }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after { content: ''; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-top: -3px; }
.fgroup[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.fgroup[open] > summary { border-bottom: 1px solid var(--line); }
.fgroup > :not(summary) { margin-left: .8em; margin-right: .8em; }
.fgroup > :nth-child(2) { margin-top: .7em; }
.fgroup > :last-child { margin-bottom: .8em; }
.fgroup .field:last-child { margin-bottom: .8em; }
.field > span { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
label.field { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
label.field select, label.field input { text-transform: none; letter-spacing: 0; color: var(--text); font-size: .9rem; }
.badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; }
.checklist { max-height: 200px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: .3em; margin-top: .3em; }
.checklist label { display: flex; align-items: center; gap: .45em; padding: .25em .35em; border-radius: 6px; font-weight: 400; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--text); font-size: .9rem; }
.checklist label:hover { background: var(--bg); }
.checklist input { width: auto; }
.checklist small { margin-left: auto; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .35em; }
.chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .28em .7em; cursor: pointer; font-size: .84rem; display: inline-flex; align-items: center; gap: .35em; transition: background .12s, border-color .12s; }
.chips button:hover { border-color: #b9c3cf; }
.chips button.active { background: #e8f0fc; border-color: var(--primary); color: #123c7a; font-weight: 600; }
.chips i, .legend i, .col-head i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { flex: 1; border: 0; background: #fff; padding: .42em .3em; cursor: pointer; font-size: .82rem; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover:not(.active) { background: var(--bg); }
.seg button.active { background: var(--primary); color: #fff; font-weight: 600; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* werkbalk: filterknop, actieve filters, kerncijfers */
.toolbar { display: flex; align-items: center; gap: 10px 14px; padding: 12px 16px; flex-wrap: wrap; }
#f-open { flex: none; }
body:not(.filters-collapsed) #f-open { display: none; }
.active-filters { flex: 1; min-width: 200px; display: flex; flex-wrap: wrap; gap: .35em; align-items: center; }
.fchip { display: inline-flex; align-items: center; gap: .45em; border: 1px solid #c9d8f1; background: #eef4fd; color: #123c7a; border-radius: 999px; padding: .25em .4em .25em .75em; font-size: .84rem; cursor: pointer; }
.fchip span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(18,60,122,.12); font-size: .85rem; line-height: 1; }
.fchip:hover span { background: var(--primary); color: #fff; }
.fchip.clear { background: transparent; border-color: transparent; color: var(--muted); padding: .25em .5em; text-decoration: underline; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.stat { background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); padding: .45em .9em; min-width: 96px; display: flex; flex-direction: column; }
.stat b { font-size: 1.2rem; line-height: 1.2; color: var(--brand); }
.stat span { color: var(--muted); font-size: .78rem; }
.view { display: none; flex: 1; min-height: 0; }
.view.active { display: flex; flex-direction: column; }

/* kaart */
#view-map { position: relative; padding: 0 16px 16px; }
#map { flex: 1; border-radius: 12px; box-shadow: var(--shadow); min-height: 400px; background: #dce7f0; }
#map .streets { filter: grayscale(1) contrast(.9); opacity: .55; }
.cl { background: rgba(15, 44, 76, .18); border-radius: 50%; display: grid; place-items: center; }
.cl span { width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; display: grid; place-items: center; background: #0f2c4c; color: #fff; font-weight: 700; font-size: 12px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(15, 44, 76, .35); }
.panel tr.inactive td { opacity: .5; }
.legend { position: absolute; left: 28px; bottom: 28px; z-index: 500; background: rgba(255, 255, 255, .96); border-radius: 10px; padding: .5em .8em; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: .4em .9em; font-size: .8rem; max-width: calc(100% - 56px); }
.legend span { display: inline-flex; align-items: center; gap: .35em; }

/* pijplijn */
.board { flex: 1; display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 16px; align-items: stretch; }
.col { flex: 0 0 272px; background: #eceff3; border-radius: 12px; display: flex; flex-direction: column; min-height: 0; transition: background .15s; }
.col.over { background: #dde8f8; outline: 2px dashed var(--primary); outline-offset: -2px; }
.col-head { display: flex; align-items: center; gap: .5em; padding: .8em .9em .7em; border-top: 3px solid var(--c, var(--muted)); border-radius: 12px 12px 0 0; font-size: .92rem; }
.col-head .count { margin-left: auto; background: #fff; border-radius: 999px; padding: .1em .6em; font-size: .78rem; color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.col-body { flex: 1; overflow-y: auto; padding: 0 .55em .6em; display: flex; flex-direction: column; gap: .45em; min-height: 60px; }
.col .more { margin: 0 .6em .6em; justify-content: center; }
.card { position: relative; background: #fff; border-radius: 9px; padding: .6em 2.2em .6em .75em; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); cursor: grab; display: flex; flex-direction: column; gap: .2em; border: 1px solid transparent; transition: box-shadow .12s, border-color .12s; }
.card:hover { border-color: #c5d6ef; box-shadow: 0 3px 10px rgba(16, 24, 40, .1); }
.card.dragging { opacity: .5; }
.card b { line-height: 1.25; }
.card span { color: var(--muted); font-size: .84em; }
.card .card-type { align-self: flex-start; background: var(--bg); color: var(--muted); font-size: .75em; padding: .05em .5em; border-radius: 5px; }
.card em { font-style: normal; font-size: .78em; color: #123c7a; display: inline-flex; align-items: center; gap: .35em; margin-top: .15em; }
.card em i { width: 18px; height: 18px; border-radius: 50%; background: #dbe7f8; display: grid; place-items: center; font-style: normal; font-size: .72em; font-weight: 700; }

/* lijst */
.table-wrap { flex: 1; overflow: auto; margin: 0 16px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .6em .8em; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { position: sticky; top: 0; z-index: 1; background: #f7f9fb; font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.table tbody tr { cursor: pointer; transition: background .1s; }
.table tbody tr:hover { background: #f5f8fc; }
.table.compact td, .table.compact th { padding: .45em .6em; }
#table .cell-name { min-width: 260px; max-width: 420px; }
#table .name-line { display: flex; align-items: center; gap: .45em; }
#table .row-desc { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; margin-top: .15em; padding-left: 30px; }
#table td:not(.cell-name) { white-space: nowrap; }
#table td:nth-child(3) { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
#table .cell-trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }
.pill { display: inline-block; padding: .15em .65em; border-radius: 999px; font-size: .78rem; font-weight: 600; background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 72%, black); white-space: nowrap; }
.pager { display: flex; gap: .5em; align-items: center; justify-content: flex-end; padding: 12px 16px; }
.pager span { margin-right: auto; color: var(--muted); }
/* beheer */
#view-admin { overflow-y: auto; padding: 16px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.panel { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem; overflow-x: auto; }
.panel .table { margin-bottom: 1em; }
.panel .table tbody tr { cursor: default; }

/* bedrijfskaart (drawer) */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--panel); box-shadow: -10px 0 30px rgba(16, 24, 40, .15); transform: translateX(100%); transition: transform .2s ease; z-index: 1000; overflow-y: auto; }
.drawer.open { transform: none; }
.drawer-inner { padding: 1.2rem 1.4rem 3rem; }
.drawer-head { display: flex; justify-content: space-between; gap: 1rem; }
.drawer-head h2 { font-size: 1.3rem; margin-bottom: .2em; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.drawer-grid input { margin-bottom: .5em; }
.tags { display: flex; flex-wrap: wrap; gap: .3em; margin: .4em 0 0; }
.tag { background: var(--bg); border-radius: 6px; padding: .1em .5em; font-size: .8rem; }
.tag.strong { background: #0f2c4c; color: #fff; }
.enrich { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-bottom: .8em; }
.enrich .btn { flex-direction: column; align-items: flex-start; white-space: normal; }
.contacts { display: flex; flex-direction: column; gap: .4em; }
.contact { display: flex; justify-content: space-between; gap: .8em; border: 1px solid var(--line); border-radius: 8px; padding: .5em .7em; }
.contact > div { display: flex; flex-direction: column; gap: .1em; }
.contact > div:last-child { align-items: flex-end; text-align: right; }
.add-contact { margin: .6em 0; }
.add-contact summary { cursor: pointer; color: var(--primary); margin-bottom: .5em; }
.notes { display: flex; flex-direction: column; gap: .5em; margin-top: .6em; }
.note { background: #fffbea; border-radius: 8px; padding: .5em .7em; }
.note p { margin: 0 0 .3em; }
.activity { list-style: none; padding: 0; margin: 0; }
.activity li { display: flex; justify-content: space-between; gap: 1em; padding: .35em 0; border-bottom: 1px solid var(--line); font-size: .9em; }
.activity li small { white-space: nowrap; }

/* modal en toast */
.modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: none; place-items: center; z-index: 1100; padding: 16px; }
.modal.open { display: grid; }
.modal-inner { background: var(--panel); border-radius: 12px; padding: 1.4rem; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #1c2430; color: #fff; padding: .7em 1.1em; border-radius: 8px; opacity: 0; transition: .2s; pointer-events: none; z-index: 1200; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #a3142a; }

/* mobiel */
@media (max-width: 800px) {
  .topbar { gap: .6rem; }
  .brand-name { display: none; }
  .layout { flex-direction: column; height: auto; min-height: calc(100% - 56px); }
  .filters { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); max-height: 60vh; margin-left: 0 !important; }
  body.filters-collapsed .filters { display: none; }
  .tabs button span { display: none; }
  .tabs button.active span { display: inline; }
  .me-name { display: none; }
  .stats { margin-left: 0; }
  #map { min-height: 60vh; }
  .board { min-height: 70vh; }
  .drawer-grid, .enrich { grid-template-columns: 1fr; }
}

/* Leadinfo */
.leadinfo { border: 1px solid #f0d9a6; background: #fff8e8; border-radius: 8px; padding: .6em .8em; margin: .4em 0 1em; display: flex; flex-wrap: wrap; gap: .4em .8em; align-items: center; }
.leadinfo.ja { border-color: #a9dfbf; background: #eefaf2; }
.leadinfo.nee { border-color: #d5dbe1; background: #f5f7f9; }
.copy-row { display: flex; gap: .4em; margin-bottom: .6em; }
.event summary { cursor: pointer; padding: .2em 0; }
.event pre { white-space: pre-wrap; word-break: break-all; background: var(--bg); padding: .5em; border-radius: 6px; max-height: 200px; overflow: auto; }

/* Beoordelen */
#view-review { overflow-y: auto; padding: 0 16px 16px; }
.review-wrap { max-width: 760px; width: 100%; margin: 0 auto; }
.review-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.6rem; }
.review-card h2 { font-size: 1.6rem; margin: .4rem 0 .2rem; }
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.review-links, .review-actions, .review-site { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.review-site input { flex: 1; min-width: 220px; }
.review-actions .btn { font-size: 1.05rem; padding: .75em 1.2em; }
.btn.yes { background: #12a150; border-color: #12a150; color: #fff; }
.btn.no { background: #c8102e; border-color: #c8102e; color: #fff; }
.btn.yes:hover:not(:disabled) { background: #0e8a44; } .btn.no:hover:not(:disabled) { background: #a50d26; }
.review-inline .btn.yes:not(.on), .review-inline .btn.no:not(.on) { background: #fff; color: var(--text); border-color: var(--line); }
.review-inline { display: flex; align-items: center; gap: .4rem; margin: .2rem 0 .8rem; font-weight: 600; }
kbd { font: 600 .7rem/1 ui-monospace, monospace; background: rgba(255,255,255,.25); border-radius: 4px; padding: .15em .35em; margin-left: .3em; }
.btn.ghost kbd { background: var(--bg); }

.pt i { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
.pt:hover i { transform: scale(1.25); }

.erp { border: 1px solid #a9dfbf; background: #eefaf2; border-radius: 8px; padding: .6em .8em; margin: .4em 0 1em; line-height: 1.5; }

.reason { background: #fff4e5; border-left: 3px solid #f0a500; padding: .45em .7em; border-radius: 6px; font-size: .9em; margin: .2em 0 .8em; }

.panel.wide { grid-column: 1 / -1; }
.bulk-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: .6em 0 1em; }
.bulk-stats .stat { box-shadow: none; border: 1px solid var(--line); min-width: 140px; }
.admin-grid.tight { gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* websiteknop en omschrijving */
.site-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #e8f0fc; color: #123c7a; text-decoration: none; font-size: .85rem; font-weight: 700; vertical-align: middle; }
.site-btn:hover { background: var(--primary); color: #fff; }
.site-btn.search { background: #f1f3f5; color: var(--muted); }
.site-btn.corner { position: absolute; top: 6px; right: 6px; }
.drawer-head h2 .site-btn { width: 28px; height: 28px; margin-left: .3em; }
.profile { font-weight: 600; margin: .2em 0; }
.desc { color: var(--text); background: var(--bg); border-radius: 6px; padding: .45em .7em; font-size: .92em; margin: .3em 0 .5em; }

/* ---------- marktprijzen ---------- */
.prices { padding: 1rem 1.2rem 2rem; overflow-y: auto; height: 100%; }
.prices-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.prices-top p { max-width: 720px; margin: 0; }
.price-group { margin: 1.4em 0 .6em; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.price-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.price-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.price-head h3 { margin: 0; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.price-now { display: flex; align-items: center; gap: .5rem; }
.price-now b { font-size: 1.5rem; color: var(--brand); }
.price-chg { display: flex; gap: .8rem; font-size: .85rem; }
.chg { color: var(--muted); }
.chg.up { color: #12a150; }
.chg.down { color: #c8102e; }
.spark { display: block; width: 100%; height: 70px; }
.spark polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark .nl { stroke: var(--primary); }
.spark .eu { stroke: var(--muted); stroke-dasharray: 4 3; stroke-width: 1.5; }
.spark-wrap { position: relative; margin-top: .3rem; cursor: crosshair; touch-action: pan-y; }
.spark-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--muted); pointer-events: none; }
.spark-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--panel); pointer-events: none; }
.spark-tip { position: absolute; bottom: calc(100% + 4px); transform: translateX(8px); z-index: 5; min-width: 9rem; padding: .35rem .5rem; border-radius: 6px; background: var(--text); color: #fff; font-size: .75rem; line-height: 1.35; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.spark-tip.left { transform: translateX(calc(-100% - 8px)); }
.spark-tip .spark-when { font-weight: 600; margin-bottom: .15rem; }
.spark-tip .spark-when::first-letter { text-transform: uppercase; }
.spark-tip div:not(.spark-when) { display: flex; justify-content: space-between; gap: .8rem; }
.spark-axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.warn { background: #fff4e5; color: #8a5300; padding: .5rem .8rem; border-radius: 8px; }.prices-nav { position: sticky; top: 0; z-index: 2; background: var(--bg); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .6rem 0; margin-top: .6rem; }
.prices-nav input { flex: 1 1 260px; max-width: 340px; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.prices-nav .chip { text-decoration: none; padding: .25rem .65rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: .85rem; }
.prices-nav .chip:hover { border-color: var(--primary); color: var(--primary); }
.price-card[hidden], .price-sec[hidden] { display: none; }
/* smallere schermen: tabs compacter */
@media (max-width: 1150px) {
  .me-name { display: none; }
  .tabs button { padding: 0 .65em; }
}
@media (max-width: 1000px) {
  .tabs button:not(.active) span { display: none; }
  .tabs button { padding: 0 .7em; }
  .brand-name { display: none; }
}
body.no-anim .filters { transition: none; }
/* filterbalk boven Beoordelen */
.review-filters { max-width: 760px; width: 100%; margin: 0 auto 12px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: .8rem 1rem; display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; align-items: flex-start; }
.rf-group { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.rf-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: .4em 2em .4em .7em; background: #fff; min-width: 170px; font-size: .9rem; position: relative; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after { content: ''; position: absolute; right: .8em; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.dd[open] > summary { border-color: var(--primary); }
.dd-panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.15); padding: .7em; display: flex; flex-direction: column; gap: .5em; }
.dd-panel .checklist { max-height: 260px; margin-top: 0; }
.dd-panel .row { margin: 0; justify-content: flex-end; }
.brand-logo { height: 24px; width: auto; display: block; }
.brand-name { padding-left: .6em; border-left: 1px solid rgba(255,255,255,.25); font-weight: 600; }

/* kaartstijl: gedetailleerd = OSM in rustige kleuren zodat de punten opvallen */
#map.map-detail .streets { filter: saturate(.35) contrast(.95) brightness(1.03); opacity: .9; }
.map-style { display: flex; background: #fff; border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.map-style button { border: 0; background: #fff; padding: .45em .8em; font: 600 .8rem/1 inherit; cursor: pointer; color: var(--text); }
.map-style button + button { border-left: 1px solid var(--line); }
.map-style button.active { background: var(--brand); color: #fff; }
/* kaart + lijst rechts */
.map-layout { flex: 1; min-height: 0; display: flex; gap: 12px; }
.map-box { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; }
.map-box .legend { left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
.map-list { width: 330px; flex: none; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 0; }
.map-list-head { padding: .75em 1em; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: .5em; }
.map-list-body { flex: 1; overflow-y: auto; }
.ml-item { width: 100%; display: flex; align-items: center; gap: .6em; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line); padding: .6em 1em; cursor: pointer; }
.ml-item:hover { background: #f5f8fc; }
.ml-item.active { background: #eaf1fc; box-shadow: inset 3px 0 0 var(--primary); }
.ml-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ml-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.ml-text small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-item .pill { flex: none; font-size: .7rem; }
.map-list-more { margin: .5em; justify-content: center; }
@media (max-width: 1000px) { .map-list { width: 260px; } .ml-item .pill { display: none; } }
@media (max-width: 800px) { .map-layout { flex-direction: column; } .map-list { width: auto; max-height: 45vh; } }
/* ---------- bedrijfspagina ---------- */
.company-page { box-sizing: border-box; width: 100%; max-width: 1500px; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
#view-company { overflow-y: auto; }
.cp-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.cp-title { display: flex; gap: .9rem; align-items: flex-start; flex: 1 1 min(420px, 100%); min-width: 0; }
.cp-title > div { min-width: 0; overflow-wrap: anywhere; }
.cp-title h1 { font-size: 1.45rem; margin: 0 0 .15em; line-height: 1.2; }
.cp-title p { margin: 0; }
.cp-avatar { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; }
.cp-avatar.small { width: 32px; height: 32px; border-radius: 50%; font-size: .9rem; background: #e8eef6; color: var(--brand); }
.cp-quick { display: flex; gap: .4rem; flex-wrap: wrap; }
.cp-stages { display: flex; gap: 4px; margin-bottom: 1rem; overflow-x: auto; padding-bottom: 2px; }
.cp-stages button { flex: 1 0 auto; border: 1px solid var(--line); background: var(--panel); padding: .55em 1em; font-size: .85rem; cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); padding-left: 1.4em; white-space: nowrap; }
.cp-stages button:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: 1em; }
.cp-stages button.done { background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 70%, black); }
.cp-stages button.current { background: var(--c); border-color: var(--c); color: #fff; font-weight: 600; }
.cp-stages button.lost { flex: 0 0 auto; clip-path: none; border-radius: 8px; margin-left: .5rem; padding-left: 1em; color: var(--muted); }
.cp-stages button.lost.current { color: #fff; }
.cp-stages button:hover:not(.current) { filter: brightness(.97); }
.cp-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(280px, 360px); gap: 1rem; align-items: start; }
.cp-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cp-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; }
.cp-card h3 { font-size: .95rem; margin: 0 0 .6rem; }
.cp-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.cp-card-head h3 { margin: 0; }
.cp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .6rem; }
.cp-field { display: flex; flex-direction: column; gap: .2em; margin-bottom: .55rem; min-width: 0; }
.cp-field.wide { grid-column: 1 / -1; }
.cp-field > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.cp-field input, .cp-field select, .cp-field textarea { width: 100%; }
.cp-facts { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-size: .85rem; margin: .8rem 0 0; }
.cp-facts dt { color: var(--muted); }
.cp-facts dd { margin: 0; overflow-wrap: anywhere; }
.cp-composer .seg { margin-bottom: .6rem; }
.cp-composer textarea { width: 100%; resize: vertical; margin-bottom: .5rem; }
.cp-composer .row { align-items: center; }
.cp-tl-filter button small { color: var(--muted); }
.timeline { padding: .4rem 1.1rem 1rem; }
.tl-month { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1rem 0 .4rem; }
.tl-month::first-letter { text-transform: uppercase; }
.tl-item { display: flex; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 0; }
.tl-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: .95rem; }
.tl-call .tl-icon { background: #e6f4ec; } .tl-meeting .tl-icon { background: #f1eafd; } .tl-email .tl-icon { background: #e8f0fc; } .tl-note .tl-icon { background: #fff6d8; } .tl-file .tl-icon { background: #fdf0e3; }
.tl-act .tl-icon { width: 32px; height: 20px; background: none; color: var(--muted); }
.tl-act .tl-body { font-size: .86rem; padding-top: 1px; }
.tl-body { flex: 1; min-width: 0; }
.tl-meta { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .25em; align-items: center; }
.tl-meta b { color: var(--text); }
.tl-tools { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.tl-item:hover .tl-tools, .tl-tools:focus-within { opacity: 1; }
.tl-text { margin-top: .25em; overflow-wrap: anywhere; }
.tl-text textarea { width: 100%; margin: .3em 0; }
.cp-contacts { display: flex; flex-direction: column; gap: .5rem; }
.cp-contact { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .65rem; }
.cp-contact-top { display: flex; gap: .55rem; align-items: flex-start; }
.cp-contact-main { flex: 1; min-width: 0; line-height: 1.3; }
.cp-contact-tools { display: flex; opacity: .55; }
.cp-contact:hover .cp-contact-tools { opacity: 1; }
.cp-contact-links { display: flex; flex-direction: column; gap: .15rem; margin: .4rem 0 0 calc(32px + .55rem); font-size: .86rem; overflow-wrap: anywhere; }
.dm-badge { display: inline-block; margin-left: .4em; padding: .05em .5em; border-radius: 999px; background: #12a150; color: #fff; font-size: .7rem; font-weight: 600; vertical-align: 1px; }
.dm-badge.soft { background: #e6f4ec; color: #0e6b37; }
.cp-people-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 .4rem; }
.cp-right details input { width: 100%; margin-top: .3rem; font-size: .82rem; }
.cp-form { border: 1px dashed #b9c3cf; border-radius: 10px; padding: .6rem; margin-bottom: .5rem; background: #fafbfc; }
.cp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .5rem; }
.cp-form-grid .span2 { grid-column: 1 / -1; }
.cp-form-grid input { width: 100%; min-width: 0; }
.cp-drop { display: grid; place-items: center; text-align: center; border: 2px dashed #c5ccd5; border-radius: 10px; padding: 1rem; cursor: pointer; margin-bottom: .5rem; transition: background .12s, border-color .12s; }
.cp-drop:hover, .cp-drop.over { border-color: var(--primary); background: #f2f6fd; }
.seg.small button { font-size: .8rem; padding: .3em; }
.cp-files { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.cp-files li { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; overflow-wrap: anywhere; }
.cp-file-ico { flex: none; font-size: 1.1rem; }
.cp-files li > div { flex: 1; min-width: 0; }
.cp-file-tools { display: flex; flex: none; }
.cp-right .enrich { display: flex; flex-direction: column; gap: .35rem; }
.cp-right .enrich .btn { justify-content: space-between; }
@media (max-width: 1250px) { .cp-grid { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); } .cp-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 800px) { .company-page { padding: .8rem 16px 2rem; } .cp-grid { grid-template-columns: 1fr; } .cp-right { display: flex; } .cp-fields, .cp-form-grid { grid-template-columns: 1fr; } .cp-stages button { padding: .5em .8em .5em 1.1em; } }
.content { min-width: 0; }

/* ---------- leermodel ---------- */
.ml-hint { border-radius: 8px; padding: .45em .7em; font-size: .88rem; margin: .5rem 0; background: var(--bg); }
.ml-hint.good { background: #e6f4ec; } .ml-hint.bad { background: #fdecee; } .ml-hint.mid { background: #fff6d8; } .ml-hint.auto { background: #fdecee; }
.ml-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: .8rem 0; }
.ml-list { list-style: none; padding: 0; margin: 0; }
.ml-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .25em .5em; border-left: 3px solid var(--line); margin-bottom: 2px; }
.ml-list.bad li { border-color: #c8102e; } .ml-list.good li { border-color: #12a150; }

/* ---------- nieuwsmonitor ---------- */
.news-page { box-sizing: border-box; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
#view-news { overflow-y: auto; }
.news-top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.news-top h2 { margin: 0 0 .2rem; }
.news-top p { max-width: 720px; margin: 0; }
.news-actions { display: flex; gap: .6rem; align-items: center; }
.news-bar { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: .8rem 0; display: flex; flex-direction: column; gap: .6rem; }
.news-filters { display: flex; gap: .6rem; flex-wrap: wrap; }
.news-filters input { flex: 1 1 260px; }
.news-filters .seg { flex: 0 0 auto; }
.chips button small { color: var(--muted); }
.news-list { display: flex; flex-direction: column; gap: .6rem; }
.news-item { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem 1rem; }
.news-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; font-size: .8rem; color: var(--muted); }
.news-topic { font-weight: 600; color: var(--text); }
.news-star { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: #b9c3cf; line-height: 1; }
.news-star.on { color: #f0a500; }
.news-title { display: block; margin-top: .3rem; font-weight: 600; font-size: 1.02rem; color: var(--text); text-decoration: none; line-height: 1.35; }
.news-title:hover { color: var(--primary); text-decoration: underline; }
.news-sum { margin: .3rem 0 0; font-size: .88rem; color: #4a5562; }
.news-company { margin-top: .45rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .88rem; }
.news-company a { font-weight: 600; }
.news-empty { text-align: center; padding: 2rem 1rem; background: var(--panel); border-radius: var(--radius); }
.news-config { margin-top: 1.5rem; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem 1rem; }
.news-config summary { cursor: pointer; font-weight: 600; }
.news-cfg { border: 1px solid var(--line); border-radius: 8px; margin: .8rem 0; padding: .5rem .8rem; }
.news-cfg label { display: block; margin: .3rem 0; }
.news-cfg textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.cp-news { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .88rem; }
.cp-news a { color: var(--text); font-weight: 600; text-decoration: none; }
.cp-news a:hover { text-decoration: underline; }


/* bedrijfspagina: fase als keuzelijst */
.cp-stage-card { border-top: 4px solid var(--c); }
.cp-stage-card select { font-weight: 600; border-color: var(--c); }
.cp-stage-progress { display: flex; gap: 4px; margin: .2rem 0 .3rem; }
.cp-stage-progress i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.cp-stage-progress i.on { background: var(--c); }
.cp-stage-card p { margin: 0; }

/* kaart: infovenster */
.map-pop .leaflet-popup-content { margin: 12px 14px; font: inherit; }
.mp-head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; margin-bottom: .25rem; }
.mp-head b { font-size: 1rem; line-height: 1.25; }
.mp-profile { margin: 0 0 .3rem; font-size: .85rem; color: var(--muted); }
.mp-desc { margin: 0 0 .4rem; font-size: .82rem; }
.mp-facts { list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .84rem; display: flex; flex-direction: column; gap: .15rem; overflow-wrap: anywhere; }
.mp-ml { margin: 0 0 .5rem; font-size: .8rem; color: var(--muted); }
.mp-open { width: 100%; justify-content: center; }

.ring-list { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.ring-list a { font-weight: 600; }

/* ---- Takenlijst (à la Monday) ---- */
#view-tasks { overflow: auto; }
.tasks-wrap { display: flex; gap: 0; min-height: 100%; }
.tasks-main { flex: 1; min-width: 0; padding: 20px 24px 60px; }
.tk-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.tk-top h2 { margin: 0; font-size: 1.4rem; }
.tk-top input[type=search] { min-width: 240px; }
.tk-top .chk { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; }
.tk-top .spacer, .tg-head .spacer { flex: 1; }
.tg { margin-bottom: 28px; }
.tg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tg-color { width: 18px; height: 18px; border-radius: 50%; background: var(--pc); overflow: hidden; cursor: pointer; flex: none; position: relative; }
.tg-color input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.tg-name { font-size: 1.15rem; font-weight: 700; color: var(--pc); border: 1px solid transparent; background: transparent; padding: 2px 6px; border-radius: 6px; min-width: 120px; max-width: 420px; }
.tg-name:hover, .tg-name:focus { border-color: var(--line, #ddd); background: #fff; outline: none; }
.tg-scroll { overflow-x: auto; border-left: 5px solid var(--pc); border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tk-table { width: 100%; border-collapse: collapse; min-width: 900px; font-size: .9rem; }
.tk-table th { text-align: left; font-weight: 600; color: #676879; font-size: .8rem; padding: 8px 8px; border-bottom: 1px solid #e6e9ef; white-space: nowrap; }
.tk-table td { border-bottom: 1px solid #eef0f4; padding: 3px 6px; vertical-align: middle; }
.tk-table tr:hover td { background: #f5f6f8; }
.tk-table tr.done .tk-title { color: #999; text-decoration: line-through; }
.tk-table tr.dragging { opacity: .4; }
.tk-drag { width: 18px; color: #c3c6d4; cursor: grab; text-align: center; user-select: none; }
.tk-title { width: 100%; min-width: 220px; border: 1px solid transparent; background: transparent; padding: 6px 6px; border-radius: 4px; font: inherit; }
.tk-title:hover, .tk-title:focus { border-color: #d0d4e4; background: #fff; outline: none; }
.tk-table select, .tk-table input[type=date] { border: 1px solid transparent; background: transparent; padding: 5px 4px; border-radius: 4px; font: inherit; max-width: 150px; }
.tk-table select:hover, .tk-table input[type=date]:hover { border-color: #d0d4e4; }
.tk-table input[type=date].late { color: #e2445c; font-weight: 600; }
.tk-cell { width: 140px; padding: 0 !important; }
.tk-pill { display: block; width: 100%; min-height: 36px; border: 0; background: var(--c); color: #fff; font: 600 .82rem/1.2 inherit; cursor: pointer; padding: 6px 8px; text-align: center; }
.tk-pill .muted { color: #999; }
.tk-pill:hover { filter: brightness(.95); }
.tk-co { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tk-table .btn.has { color: #0073ea; font-weight: 600; }
.tk-add input { width: 100%; border: 1px dashed #d0d4e4; border-left: 5px solid var(--pc); border-radius: 0 0 6px 6px; padding: 8px 12px; background: #fafbfc; font: inherit; margin-top: -1px; }
.tk-add input:focus { outline: none; border-style: solid; background: #fff; }
.tk-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 8px; max-width: 360px; }
.tk-empty { padding: 40px; text-align: center; background: #fff; border-radius: 8px; }
.tk-menu { position: fixed; z-index: 3000; background: #fff; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.tk-menu > button[data-v] { border: 0; border-radius: 4px; background: var(--c); color: #fff; font-weight: 600; padding: 8px 10px; cursor: pointer; text-align: center; }
.tk-menu > button.none { background: #f0f0f0; color: #333; }
.tk-menu.wide { min-width: 300px; }
.tk-co-res { display: flex; flex-direction: column; max-height: 260px; overflow: auto; }
.tk-co-res button { border: 0; background: none; text-align: left; padding: 7px 8px; border-radius: 4px; cursor: pointer; }
.tk-co-res button:hover { background: #f0f3ff; }
.tasks-side { width: 380px; flex: none; border-left: 1px solid #e6e9ef; background: #fff; padding: 18px; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow: auto; border-top: 4px solid var(--pc); }
.tasks-side header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tasks-side h3 { margin: 2px 0 0; font-size: 1.1rem; }
.tk-note-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; margin-bottom: 16px; }
.tk-note-form textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid #d0d4e4; border-radius: 6px; resize: vertical; }
.tk-notes article { border: 1px solid #e6e9ef; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.tk-note-meta { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: #676879; margin-bottom: 6px; }
.tk-note-meta button { margin-left: auto; }
.tk-note-body { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) { .tasks-wrap { flex-direction: column; } .tasks-side { width: auto; position: static; max-height: none; border-left: 0; } .tasks-main { padding: 14px; } }

/* ---- Labels: sector / type / diersoort ---- */
.tag-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.tag { display: inline-block; background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 2px 8px; font-size: .75rem; font-weight: 600; }
.te-group { margin-top: 8px; }
.te-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: 4px; }
.te-group .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.te-group .chips button { border: 1px solid #d0d5e0; background: #fff; border-radius: 999px; padding: 3px 9px; font-size: .78rem; cursor: pointer; }
.te-group .chips button.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.mp-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.mp-te { border-top: 1px solid #eee; padding-top: 4px; margin-bottom: 8px; }
.card { position: relative; }
.card .tag-btn { position: absolute; right: 30px; top: 6px; border: 0; background: transparent; cursor: pointer; opacity: .35; font-size: .9rem; padding: 2px; }
.card:hover .tag-btn { opacity: 1; }
.tag-menu { position: fixed; z-index: 3000; width: 330px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 10px 12px 12px; }
.tm-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tm-head b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tags { margin: 6px 0 10px; }
.cp-tags summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-tags summary::-webkit-details-marker { display: none; }
/* Labels direct in de kaartpopup: compact */
.mp-te { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 2px 0 8px; margin: 6px 0 8px; }
.mp-te .te-group { margin-top: 6px; }
.mp-te .te-label { font-size: .65rem; margin-bottom: 3px; }
.mp-te .te-group .chips button { padding: 2px 7px; font-size: .72rem; }
.chips-sub { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e2e8f0; }

/* ---- Clusterpopup op de kaart ---- */
.cl-list ul { list-style: none; margin: 6px 0 8px; padding: 0; max-height: 330px; overflow-y: auto; }
.cl-list li { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; padding: 7px 2px; border-bottom: 1px solid #eef0f4; }
.cl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-name { border: 0; background: none; padding: 0; text-align: left; font-weight: 700; color: #1d4ed8; cursor: pointer; font-size: .85rem; }
.cl-name:hover { text-decoration: underline; }
.cl-tags .tag { font-size: .65rem; padding: 1px 6px; }
.cl-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.cl-actions a, .cl-actions button { border: 0; background: #f1f5f9; border-radius: 6px; padding: 3px 6px; font-size: .8rem; text-decoration: none; color: #0a66c2; font-weight: 700; cursor: pointer; }
.cl-actions .pill { font-size: .65rem; }
.mp-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; font-size: .82rem; }
.mp-foot { display: flex; gap: 8px; justify-content: space-between; align-items: center; }

/* ---- Fase en label-keuzelijsten in de kaartpopups ---- */
.stage-select { border: 1px solid var(--c, #cbd5e1); border-left: 4px solid var(--c, #cbd5e1); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: .8rem; background: #fff; max-width: 150px; }
.mp-edit { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 8px 0; margin: 6px 0 8px; }
.mp-stage { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.mp-stage span, .tdd-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; min-width: 62px; }
.tdd { border: 1px solid #e2e8f0; border-radius: 6px; }
.tdd summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: center; padding: 5px 8px; font-size: .8rem; }
.tdd summary::-webkit-details-marker { display: none; }
.tdd summary::after { content: '▾'; margin-left: auto; color: #64748b; }
.tdd[open] summary::after { content: '▴'; }
.tdd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.tdd-menu { border-top: 1px solid #eef0f4; padding: 4px 8px 6px; max-height: 190px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; }
.tdd-menu label { display: flex; gap: 6px; align-items: center; font-size: .8rem; padding: 2px 0; cursor: pointer; }
.tdd-sub { grid-column: 1 / -1; font-size: .66rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-top: 4px; }
.cl-actions .stage-select { max-width: 112px; font-size: .72rem; padding: 2px 4px; }

/* Oplichtend bedrijf op de kaart (vanuit de lijst "In beeld") */
.hl-pin span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #e3191f; background: rgba(227,25,31,.18); animation: hl-pulse 1.4s ease-out infinite; }
@keyframes hl-pulse { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

/* Keuzelijsten in de popup: nette labels i.p.v. vinkjes */
.map-pop .tdd summary { padding: 6px 10px; }
.map-pop .tdd-label { min-width: 84px; white-space: nowrap; }
.map-pop .tdd-val { flex: 1; min-width: 0; font-size: .8rem; color: #0f172a; }
.map-pop .tdd-menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 10px; max-height: 320px; overflow-y: auto; grid-template-columns: none; }
.map-pop .tdd-sub { flex-basis: 100%; margin: 4px 0 0; font-size: .64rem; letter-spacing: .05em; }
.map-pop .tdd-sub:first-child { margin-top: 0; }
.map-pop .tdd-menu label { display: inline-flex; align-items: center; width: auto; margin: 0; padding: 4px 11px; gap: 0; border: 1px solid #d0d5e0; border-radius: 999px; background: #fff; font-size: .78rem; font-weight: 500; color: #334155; cursor: pointer; line-height: 1.3; justify-content: flex-start; text-align: left; white-space: nowrap; user-select: none; }
.map-pop .tdd-menu label:hover { border-color: #2563eb; color: #1d4ed8; }
.map-pop .tdd-menu label input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.map-pop .tdd-menu label:has(input:checked) { background: #2563eb; border-color: #2563eb; color: #fff; }
.map-pop .tdd-menu label:has(input:focus-visible) { outline: 2px solid #93c5fd; outline-offset: 1px; }

/* ---- Leermodel: bekijken en corrigeren ---- */
.modal.wide .modal-inner { width: min(980px, 96vw); max-height: 90vh; overflow-y: auto; }
.mlb-head { display: flex; justify-content: space-between; align-items: center; }
.mlb-head h2 { margin: 0; }
.mlb-views { margin: 12px 0; flex-wrap: wrap; }
.mlb-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mlb-filters input { flex: 1; min-width: 200px; }
.mlb-reasons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.mlb-reasons button { border: 1px solid #d0d5e0; background: #fff; border-radius: 999px; padding: 3px 10px; font-size: .78rem; cursor: pointer; }
.mlb-reasons button small { color: #64748b; margin-left: 4px; }
.mlb-reasons button.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.mlb-reasons button.active small { color: #dbeafe; }
.mlb-list { display: flex; flex-direction: column; gap: 6px; }
.mlb-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; border: 1px solid #e6e9ef; border-radius: 8px; padding: 9px 12px; background: #fff; }
.mlb-row.done { background: #f0fdf4; border-color: #bbf7d0; }
.mlb-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mlb-main a { color: #0f172a; text-decoration: none; }
.mlb-main a:hover b { text-decoration: underline; }
.mlb-why { font-size: .78rem; color: #475569; }
.mlb-side { display: flex; align-items: center; gap: 6px; }
.mlb-score { font-weight: 700; font-size: .8rem; color: #64748b; min-width: 38px; text-align: right; }
.mlb-fix { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed #e2e8f0; }
.mlb-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.mlb-quick button { border: 1px solid #d0d5e0; background: #f8fafc; border-radius: 999px; padding: 3px 9px; font-size: .75rem; cursor: pointer; }
.mlb-quick button:hover { border-color: #2563eb; color: #1d4ed8; }
.mlb-fixrow { display: flex; gap: 8px; }
.mlb-fixrow input { flex: 1; }
.mlb-ok { margin: 0; font-size: .85rem; color: #166534; }

/* pijplijn: bedrijfspopup naast het kaartje */
.board-pop { position: fixed; z-index: 2500; width: 320px; max-height: calc(100vh - 24px); overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 12px 34px rgba(16, 24, 40, .22); padding: 12px 14px; }
.board-pop-x { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; font-size: 1.25rem; line-height: 1; color: #64748b; cursor: pointer; padding: 2px 4px; }
.board-pop-x:hover { color: #0f172a; }
.board-pop .mp-head { padding-right: 22px; }
.card.active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .25); }
@media (max-width: 600px) { .board-pop { left: 8px !important; right: 8px; width: auto; top: auto !important; bottom: 8px; max-height: 75vh; } }
/* nieuws: landfilter */
#news-land { padding: 6px 10px; border: 1px solid var(--line, #d0d5e0); border-radius: 8px; background: #fff; font: inherit; font-size: .85rem; max-width: 240px; }
.news-flags { letter-spacing: 1px; }

/* ---------- Producten & projecten ---------- */
.pr-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 16px; padding: 16px; height: 100%; min-height: 0; box-sizing: border-box; }
.pr-side { background: var(--panel, #fff); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pr-side input[type=search], .pr-side select { width: 100%; box-sizing: border-box; }
.pr-tabs { display: flex; } .pr-tabs button { flex: 1; }
.pr-list { overflow-y: auto; flex: 1; margin: 0 -4px; padding: 0 4px; }
.pr-group h4 { margin: 12px 4px 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.pr-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 8px 10px; cursor: pointer; position: relative; }
.pr-item:hover { background: #f1f5f9; } .pr-item.active { background: #e0ecff; }
.pr-item.sub { padding-left: 26px; } .pr-item.sub::before { content: '↳'; position: absolute; left: 10px; top: 8px; color: #94a3b8; }
.pr-item b { display: block; font-size: .9rem; line-height: 1.25; } .pr-item small { color: #64748b; font-size: .74rem; }
.pr-item .pr-dot { position: absolute; right: 10px; top: 12px; }
.pr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: middle; }
.pr-main { overflow-y: auto; min-height: 0; }
.pr-intro, .pr-card { background: var(--panel, #fff); border-radius: 12px; box-shadow: var(--shadow); padding: 20px 24px; max-width: 1100px; }
.pr-intro ol { line-height: 1.6; } .pr-intro li { margin-bottom: 6px; }
.pr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: -1px; background: inherit; padding: 4px 0 10px; z-index: 2; }
.pr-name { flex: 1; min-width: 220px; font-size: 1.35rem; font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; }
.pr-name:hover, .pr-name:focus { border-color: #d0d5e0; }
.pr-status { border: 0; color: #fff; background: var(--c); border-radius: 999px; padding: 6px 12px; font-weight: 600; }
.pr-sec { border-top: 1px solid #eef0f4; padding: 14px 0 6px; } .pr-sec h3 { margin: 0 0 10px; font-size: 1rem; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.pr-grid label, .pr-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: #475569; margin-bottom: 10px; }
.pr-field > span { font-size: .78rem; }
.pr-field textarea, .pr-grid input, .pr-grid select { font: inherit; font-weight: 400; color: #0f172a; border: 1px solid #d0d5e0; border-radius: 8px; padding: 8px 10px; resize: vertical; }
.pr-check { display: flex; gap: 8px; align-items: center; font-size: .85rem; margin: 4px 0 12px; }
.pr-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.pr-lang { background: #f8fafc; border: 1px solid #e5e9f0; border-radius: 10px; padding: 10px; }
.pr-lang h4 { margin: 0 0 8px; font-size: .82rem; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 24px; }
.pr-term { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #d0d5e0; border-radius: 999px; padding: 2px 4px 2px 2px; font-size: .8rem; }
.pr-term.main { border-color: #f59e0b; background: #fffbeb; font-weight: 600; }
.pr-term button { border: 0; background: none; cursor: pointer; padding: 0 4px; color: #94a3b8; font-size: .8rem; } .pr-term.main button:first-child { color: #f59e0b; }
.pr-lang input { width: 100%; box-sizing: border-box; border: 1px dashed #c3cad6; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: .82rem; background: #fff; }
.pr-faq { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; margin-bottom: 8px; }
.pr-faq input, .pr-faq textarea { font: inherit; border: 1px solid #d0d5e0; border-radius: 8px; padding: 7px 9px; resize: vertical; }
.pr-faq button { border: 0; background: none; color: #94a3b8; cursor: pointer; }
.pr-drop { border: 2px dashed #c3cad6; border-radius: 12px; padding: 18px; text-align: center; color: #475569; margin-bottom: 8px; }
.pr-drop.over { border-color: #2563eb; background: #eff6ff; } .pr-drop small { display: block; margin-top: 6px; color: #94a3b8; }
.pr-drop .link { color: #2563eb; cursor: pointer; text-decoration: underline; }
.pr-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.pr-row input[type=url] { flex: 2; min-width: 240px; } .pr-row input[type=text] { flex: 1; min-width: 140px; }
.pr-row input, .pr-row select { font: inherit; border: 1px solid #d0d5e0; border-radius: 8px; padding: 7px 9px; }
.pr-progress { position: relative; height: 22px; background: #eef2f7; border-radius: 6px; overflow: hidden; margin: 6px 0; }
.pr-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: #93c5fd; } .pr-progress span { position: relative; font-size: .75rem; padding: 0 8px; line-height: 22px; }
.pr-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.pr-mcard { margin: 0; border: 1px solid #e5e9f0; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.pr-mcard img, .pr-mcard video, .pr-mcard iframe, .pr-mcard model-viewer { width: 100%; height: 170px; object-fit: cover; border: 0; display: block; background: #0f172a; }
.pr-mcard model-viewer { background: #f1f5f9; }
.pr-file { display: flex; flex-direction: column; justify-content: center; height: 170px; padding: 12px; background: #f8fafc; text-decoration: none; color: #0f172a; word-break: break-all; }
.pr-file small { color: #64748b; margin-top: 4px; }
.pr-mcard figcaption { display: flex; gap: 6px; align-items: center; padding: 6px; }
.pr-mcard figcaption input { flex: 1; min-width: 0; font: inherit; font-size: .8rem; border: 1px solid #e5e9f0; border-radius: 6px; padding: 4px 6px; }
.pr-mcard figcaption select { font-size: .75rem; border: 1px solid #e5e9f0; border-radius: 6px; padding: 3px; }
.pr-mcard figcaption a, .pr-mcard figcaption button { border: 0; background: none; color: #64748b; cursor: pointer; text-decoration: none; }
.pr-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pr-links a { background: #f1f5f9; border-radius: 999px; padding: 4px 10px; font-size: .85rem; text-decoration: none; color: #0f172a; }
@media (max-width: 860px) { .pr-wrap { grid-template-columns: 1fr; height: auto; } .pr-list { max-height: 40vh; } .pr-faq { grid-template-columns: 1fr; } }.pr-code { font: 600 .72rem/1 ui-monospace, Consolas, monospace; color: #475569; background: #eef2f7; border-radius: 4px; padding: 2px 5px; margin-right: 4px; vertical-align: 1px; }
.pr-side-title { margin: 2px 4px 0; font-size: 1.05rem; }

/* ---------- Vandaag (startpagina) ---------- */
#view-today { overflow-y: auto; }
.today-page { box-sizing: border-box; width: 100%; max-width: 1300px; margin: 0 auto; padding: 1rem 1.2rem 3rem; display: flex; flex-direction: column; gap: 14px; }
.td-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.td-top h2 { margin: 0; font-size: 1.6rem; }
.td-top p { margin: .1rem 0 0; }
.td-top p::first-letter { text-transform: uppercase; }
.td-top select { width: auto; min-width: 220px; }
.td-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.td-stat { background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; border-top: 4px solid var(--line); }
.td-stat span { color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.td-stat b { font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--brand); }
.td-stat small { font-weight: 700; color: var(--text); }
.td-total { border-top-color: var(--brand); background: var(--brand); }
.td-total span, .td-total small { color: #c9ced6; }
.td-total b { color: var(--yellow); }
.td-prospect { border-top-color: #9aa5b1; } .td-kennis { border-top-color: #e8a01a; } .td-offerte { border-top-color: var(--accent); } .td-klant { border-top-color: #12a150; }
.td-tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.td-group h3 { margin: 0 0 .5rem; font-family: var(--display); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--brand); font-size: 1.05rem; }
.td-late { border-top: 4px solid #c8102e; } .td-now { border-top: 4px solid var(--accent); } .td-soon { border-top: 4px solid #9aa5b1; } .td-later { border-top: 4px solid var(--line); }
.td-task { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.td-task:last-child { border-bottom: 0; }
.td-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; }
.td-main { flex: 1; min-width: 0; }
.td-main a { color: var(--text); text-decoration: none; }
.td-main a:hover b { text-decoration: underline; }
.td-main small { display: block; }
.td-main p { margin: .2rem 0 0; font-size: .88rem; color: #4a4f57; overflow-wrap: anywhere; }
.td-actions { display: flex; gap: 4px; align-items: center; flex: none; }
.td-snooze { position: relative; }
.td-snooze > summary { list-style: none; } .td-snooze > summary::-webkit-details-marker { display: none; }
.td-snooze > div { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; gap: 4px; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; }
.td-team tbody tr { cursor: pointer; }
.td-rv-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.td-rv-head h3 { margin: 0; font-family: var(--display); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--brand); font-size: 1.05rem; }
.tab-badge { margin-left: .35em; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; display: inline-grid; place-items: center; }
.td-done summary { list-style: none; cursor: pointer; } .td-done summary::-webkit-details-marker { display: none; }
.td-done summary h3 { margin: 0; font-family: var(--display); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--brand); font-size: 1.05rem; }
.td-task.done b, .fu-row.done b { text-decoration: line-through; color: var(--muted); }
.td-task.done .td-ico { background: #e6f4ec; color: #0e6b37; }
.fu-row.done { opacity: .75; }
.fd-snooze input { width: auto; padding: .3em .5em; }
.tl-fu { cursor: pointer; }
.tl-fu:hover .tl-body > span:first-child { text-decoration: underline; }
.cp-follow.flash { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow .3s; }
/* opvolgen op de bedrijfspagina */
.fu-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: .5rem; }
.fu-pick select, .fu-pick input { width: auto; padding: .3em .5em; font-size: .85rem; }
.fu-row { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.fu-row:last-child { border-bottom: 0; }
.fu-row.late b { color: #a3142a; } .fu-row.today b { color: var(--primary); }

/* totale dealwaarde onderaan een pijplijnkolom, en per kaartje */
.col-foot { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; padding: .65em .9em; border-top: 1px solid rgba(27, 36, 48, .08); font-size: .82rem; color: var(--muted); }
.col-foot b { font-family: var(--display); font-size: 1rem; font-weight: 600; color: var(--brand); }
.col-foot { flex-wrap: wrap; }
.col-foot .col-weighted { flex-basis: 100%; text-align: right; color: var(--muted); font-size: .78rem; }
.col-foot .col-weighted:empty { display: none; }
.td-stat .td-w { font-weight: 600; color: var(--muted); font-size: .8rem; }
.td-total .td-w { color: var(--yellow); }
.card .card-value { align-self: flex-start; font-weight: 700; color: var(--brand); font-size: .8rem; }
/* knoppen op de pijplijnkaartjes: vergrootglas en labels even groot, onder elkaar rechtsboven */
.card { padding-right: 46px; min-height: 78px; }
.card .site-btn.corner { width: 30px; height: 30px; border-radius: 8px; font-size: 1rem; top: 6px; right: 6px; }
.card .tag-btn { position: absolute; top: 42px; right: 6px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: #f3ece0; color: var(--tint-text); display: grid; place-items: center; cursor: pointer; opacity: 1; }
.card .tag-btn:hover { background: var(--primary); color: #fff; }
.card .tag-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* eigen labels (vrije tags) */
.tag.own { background: #fff4d6; color: #8a5300; border: 1px dashed #e6b84a; }
.te-own { align-items: center; }
.te-own-add { width: 140px; padding: 2px 8px; border-radius: 999px; font-size: .78rem; }

/* importeren (Beheer) */
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.imp-map .field { margin-bottom: .5em; }
.imp-preview { margin: 0 0 .8rem; max-height: 260px; }
.imp-preview td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* taalkeuze in de topbalk */
.lang-select { width: auto; padding: .25em .4em; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; font-weight: 700; font-size: .8rem; cursor: pointer; }
.lang-select option { color: #1b2430; }

/* ---------- Logboek (wie heeft wat gedaan) ---------- */
#view-audit { overflow-y: auto; }
.audit-page { box-sizing: border-box; width: 100%; max-width: 1300px; margin: 0 auto; padding: 1rem 1.2rem 3rem; display: flex; flex-direction: column; gap: 12px; }
.au-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.au-top h2 { margin: 0 0 .2rem; }
.au-top p { margin: 0; }
.au-bar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.au-bar select { width: auto; min-width: 180px; }
.au-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.au-card { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; box-shadow: var(--shadow); }
.au-card:hover { border-color: #d6cbb6; }
.au-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232, 97, 26, .2); }
.au-card b { font-size: 1rem; }
.au-card small { color: var(--muted); }
.au-nums { display: flex; gap: .8rem; font-weight: 700; }
.au-ja, .au-tag.ja { color: #0e6b37; }
.au-nee, .au-tag.nee { color: #a3142a; }
.au-tag { display: inline-block; padding: .1em .6em; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.au-tag.ja { background: #e6f4ec; }
.au-tag.nee { background: #fdecee; }
.au-detail { color: var(--muted); font-size: .88rem; }
.au-changed { display: inline-block; margin-left: .3em; padding: .05em .5em; border-radius: 999px; background: #fff4d6; color: #8a5300; font-size: .74rem; font-weight: 700; }
.au-table { margin: 0; flex: none; }
.au-table td a { font-weight: 600; text-decoration: none; }
.au-table td a:hover { text-decoration: underline; }

/* =========================================================
   Thema "DGS warm" — zelfde kleuren en letters als de presentatie:
   navy, crème, oranje en geel; Nunito Sans + Fredoka.
   Staat bewust onderaan zodat het alles hierboven overschrijft.
   ========================================================= */
:root {
  --bg: #f6f1e7;
  --panel: #fffdf9;
  --text: #1b2430;
  --muted: #6b6f76;
  --line: #e7dfd0;
  --brand: #1b2430;
  --accent: #e8611a;
  --primary: #c24e0e;
  --primary-dark: #a8430b;
  --tint: #fbe7da;
  --tint-text: #8a360a;
  --yellow: #ffc845;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(27, 36, 48, .05), 0 6px 18px rgba(27, 36, 48, .06);
  --display: Fredoka, "Nunito Sans", "Segoe UI", sans-serif;
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
}
h1, h2, .tk-top h2, .pr-name, .cp-title h1, .review-card h2, .news-top h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.005em; }
h3 { color: var(--muted); }
::selection { background: var(--yellow); color: var(--text); }

/* knoppen en velden */
.btn { border-radius: 10px; font-weight: 600; }
.btn:hover:not(:disabled) { border-color: #d6cbb6; background: #fbf6ec; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.primary small { color: #fde3d2; }
input, select, textarea { border-radius: 10px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(232, 97, 26, .22); border-color: var(--accent); }
a { color: var(--primary); }
.badge { background: var(--accent); }

/* login */
body.auth { background: radial-gradient(circle at 85% 10%, #e8611a 0 22%, transparent 22.2%), #1b2430; }
.auth-card { border-radius: 20px; }
.brand-mark { background: var(--accent); border-radius: 8px; font-family: var(--display); }

/* topbalk */
.topbar { background: var(--brand); box-shadow: 0 2px 10px rgba(27, 36, 48, .18); }
.brand-name { font-family: var(--display); font-weight: 500; letter-spacing: .01em; }
.tabs button { color: #c9ced6; font-weight: 600; }
.tabs button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.tabs button.active { color: var(--yellow); }
.tabs button.active::after { background: var(--yellow); height: 3px; }
.avatar { background: var(--accent); color: var(--brand); font-family: var(--display); }

/* filters en chips */
.filters { background: var(--panel); }
.filters-foot { background: #fbf6ec; }
.fgroup { border-radius: 12px; background: #fff; }
.chips button { background: #fff; }
.chips button:hover { border-color: #d6cbb6; }
.chips button.active { background: var(--tint); border-color: var(--accent); color: var(--tint-text); }
.seg button.active { background: var(--brand); }
.fchip { background: var(--tint); border-color: #f3c7a9; color: var(--tint-text); }
.fchip span { background: rgba(194, 78, 14, .14); }
.fchip:hover span { background: var(--primary); }
.checklist label:hover { background: #fbf6ec; }

/* kerncijfers */
.stat { border-radius: 12px; border-top: 3px solid var(--accent); }
.stat b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--brand); }

/* kaart */
#map { border-radius: 16px; background: #e9e3d6; }
.cl { background: rgba(232, 97, 26, .22); }
.cl span { background: var(--brand); }
.legend { border-radius: 12px; background: rgba(255, 253, 249, .96); }
.map-style button.active { background: var(--brand); }
.map-list { border-radius: 16px; }
.ml-item { background: var(--panel); }
.ml-item:hover { background: #fbf6ec; }
.ml-item.active { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.hl-pin span { border-color: var(--accent); background: rgba(232, 97, 26, .2); }

/* pijplijn */
.col { background: #efe8da; border-radius: 14px; }
.col.over { background: var(--tint); outline-color: var(--accent); }
.col-head { font-family: var(--display); font-weight: 600; font-size: .98rem; border-radius: 14px 14px 0 0; }
.card { border-radius: 11px; background: #fff; }
.card:hover { border-color: #f3c7a9; box-shadow: 0 4px 14px rgba(27, 36, 48, .09); }
.card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232, 97, 26, .25); }
.card .card-type { background: #f6f1e7; }
.card em { color: var(--tint-text); }
.card em i { background: var(--tint); }

/* tabellen */
.table-wrap { border-radius: 16px; }
.table th { background: #fbf6ec; }
.table tbody tr:hover { background: #fdf3ea; }

/* labels en kleine knoppen */
.tag { background: #f3ece0; color: var(--brand); }
.tag.strong { background: var(--brand); color: #fff; }
.site-btn { background: var(--tint); color: var(--tint-text); }
.site-btn:hover { background: var(--primary); color: #fff; }
.site-btn.search { background: #f3ece0; }
.te-group .chips button.active,
.mlb-reasons button.active,
.map-pop .tdd-menu label:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; }
.map-pop .tdd-menu label:hover, .mlb-quick button:hover { border-color: var(--accent); color: var(--tint-text); }
.mlb-reasons button.active small { color: #fde3d2; }
.cl-name { color: var(--primary); }
.cl-actions a, .cl-actions button { background: #f3ece0; color: var(--tint-text); }
.tk-table .btn.has { color: var(--primary); }
.tk-co-res button:hover { background: var(--tint); }

/* bedrijfspagina */
.cp-avatar { background: var(--brand); color: var(--yellow); font-family: var(--display); border-radius: 14px; }
.cp-avatar.small { background: var(--tint); color: var(--tint-text); }
.cp-card { border-radius: 16px; }
.cp-card h3 { font-family: var(--display); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--brand); }
.cp-drop:hover, .cp-drop.over { border-color: var(--accent); background: #fdf3ea; }
.cp-form { background: #fbf6ec; }
.tl-email .tl-icon { background: var(--tint); }
.note { background: #fff4d6; }

/* nieuws, prijzen, producten */
.news-item, .price-card, .pr-intro, .pr-card, .pr-side, .review-card, .review-filters, .panel { border-radius: 16px; }
.news-title:hover { color: var(--primary); }
.news-star.on { color: var(--yellow); }
.price-now b { font-family: var(--display); font-weight: 600; }
.spark .nl { stroke: var(--accent); }
.spark-dot { background: var(--accent); }
.prices-nav .chip:hover { border-color: var(--accent); color: var(--primary); }
.pr-item:hover { background: #fbf6ec; }
.pr-item.active { background: var(--tint); }
.pr-drop.over { border-color: var(--accent); background: #fdf3ea; }
.pr-drop .link { color: var(--primary); }
.pr-progress i { background: #f6b48a; }
.pr-term.main { border-color: var(--accent); background: var(--tint); }
.pr-term.main button:first-child { color: var(--accent); }

/* modal en toast */
.modal { background: rgba(27, 36, 48, .5); }
.modal-inner { border-radius: 18px; }
.toast { background: var(--brand); border-radius: 12px; }

/* Mijn profiel / aanmeldingen */
.me-btn { display: flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 2px 6px 2px 2px; border-radius: 999px; color: inherit; font: inherit; cursor: pointer; }
.me-btn:hover { background: rgba(255,255,255,.12); }
.fchip.mine { background: var(--accent); border-color: var(--accent); color: var(--brand); font-weight: 600; }
.pending-box { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .9rem; }
.pending-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem 0; border-top: 1px solid var(--line, #e5e7eb); }
.pending-row:first-of-type { border-top: 0; }

/* Beheer: gebruikersoverzicht */
.users-panel .up-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.users-panel .up-head h2 { margin: 0; }
.up-stats { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.up-stats b { color: var(--ink, inherit); font-size: 1.05rem; }
.up-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.up-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.up-tools input[type=search] { flex: 1; min-width: 220px; }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.uc { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card, #fff); cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .15s, border-color .15s; }
.uc:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.uc.off { opacity: .55; }
.uc-top { display: flex; align-items: center; gap: 10px; }
.uc-top .avatar { flex: none; width: 36px; height: 36px; }
.uc-name { display: flex; flex-direction: column; min-width: 0; }
.uc-name b, .uc-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-role { margin-left: auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--brand); color: #fff; }
.uc-meta { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.uc-prof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .78rem; }
.uc-lbl { flex: 0 0 52px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.uc-chip { padding: 1px 7px; border-radius: 999px; background: var(--soft, #f3f1ec); border: 1px solid var(--line); white-space: nowrap; }
.uc-chip.more { color: var(--muted); }
.uc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.uc-ago { white-space: nowrap; }
.uc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.uc-dot.ok { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.uc-dot.off { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }
.uc-btns { margin-left: auto; display: flex; gap: 4px; white-space: nowrap; }
.uc-btns .btn { white-space: nowrap; }
.uc-status { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.uc-status.ok { background: #dcfce7; color: #166534; }
.uc-status.none { background: #f1f5f9; color: #475569; }
.uc-status.off { background: #fee2e2; color: #991b1b; }
.um-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.um-grid h3 { margin-top: 0; }
@media (max-width: 760px) { .um-grid { grid-template-columns: 1fr; } }

/* Beheer: dubbele klanten samenvoegen */
#dup-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-height: 640px; overflow: auto; }
.dup-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.dup-rec { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px dashed var(--line); cursor: pointer; }
.dup-rec:first-child { border-top: 0; }
.dup-rec.keep { font-weight: 600; }
.dup-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dup-main small { font-weight: 400; }
.dup-tag { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.dup-rec.keep .dup-tag { background: #dcfce7; color: #166534; }
.dup-tag.sure { background: #dbeafe; color: #1e40af; }
.dup-tag.check { background: #fef3c7; color: #92400e; }
.dup-actions { display: flex; gap: 6px; justify-content: flex-end; padding-top: 6px; }

.dup-rec input[type=radio], .dup-rec input[type=checkbox] { width: 18px; height: 18px; flex: none; margin: 0; padding: 0; accent-color: var(--accent); }
.dup-rec .dup-main a { font-weight: 600; }
.dup-rec .pill { margin-left: 4px; }
.dup-rec .dup-tag, .dup-rec .dup-pick { flex: none; }
.dup-main > .pill { align-self: flex-start; margin: 2px 0; }

.cp-branch { margin: 6px 0 0; font-size: .9rem; }
.cp-branch ul { margin: 6px 0 0 18px; padding: 0; }
.cp-branch li { margin: 2px 0; }
.cp-branch summary { cursor: pointer; font-weight: 600; }

/* Reeks eigenaar → manager */
.reeks-ch { padding: 8px 0; border-top: 1px solid var(--line, #e5e5e5); }
.reeks-ch:first-of-type { border-top: 0; }
.reeks-ch.te_doen { background: rgba(227, 25, 31, .05); }
.reeks-actions { flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reeks-list { list-style: none; margin: 8px 0; padding: 0; }
.reeks-item { padding: 10px 0; border-top: 1px solid var(--line, #e5e5e5); }
.reeks-panel { margin-bottom: 16px; }

/* Tabblad Contactpersonen */
.pv { display: grid; gap: 12px; padding: 16px; }
.pv-head h2 { margin: 0; }
.pv-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.pv-filters .field { min-width: 9rem; }
.pv-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pv-push { display: inline-flex; gap: 6px; align-items: center; }
#pv-table td { vertical-align: top; }

/* Pand: voorkant (Street View) en luchtfoto naast elkaar */
.pand-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.pand-map { width: 100%; height: 240px; border: 0; border-radius: 8px; background: #eef1f4; }
.pand-hero { display: block; width: 100%; object-fit: cover; border-radius: 10px; background: #eef1f4; }
.mp-hero { height: 130px; margin: 0 0 8px; }
.cp-hero { height: 220px; max-width: 900px; margin: 0 0 12px; }
.pand-hero { position: relative; overflow: hidden; }
.pand-hero iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }

/* Zijmenu: op desktop staat het menu links, van boven naar onder (mobiel: bovenbalk) */
@media (min-width: 801px) {
  body:not(.auth) { padding-left: 224px; }
  .topbar { position: fixed; left: 0; top: 0; bottom: 0; width: 224px; height: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 10px 12px; z-index: 1200; }
  .brand { flex-direction: column; align-items: flex-start; gap: .35em; padding: 2px 10px 18px; }
  .brand-name { padding-left: 0; border-left: 0; font-size: .95rem; opacity: .9; }
  .tabs { flex-direction: column; flex: 1; height: auto; gap: 2px; overflow-x: hidden; overflow-y: auto; }
  .tabs button { height: auto; flex: none; padding: .62em .8em; border-radius: 9px; justify-content: flex-start; }
  .tabs button.active { background: rgba(255, 255, 255, .08); }
  .tabs button.active::after { left: 0; right: auto; top: .5em; bottom: .5em; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .tabs .tab-badge { margin-left: auto; }
  .me { flex-wrap: wrap; gap: .5rem; padding: 12px 6px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .me-name { display: inline !important; }
  .layout { height: 100%; }
}

/* Gebruikersoverzicht (beheer) */
#view-user { overflow-y: auto; }
.ut-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ut-head h2 { margin: 0; }
.ut-head p { margin: 2px 0; }
.ut-head .seg { margin-left: auto; }
.ut-head .avatar { width: 44px; height: 44px; font-size: 1.1rem; }
.ut-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ut-tile { background: var(--panel); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); display: flex; flex-direction: column; }
.ut-tile b { font-size: 1.5rem; font-family: var(--display); }
.ut-tile span { color: var(--muted, #6b7280); font-size: .82rem; }
.ut-bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding-top: 6px; }
.ut-bar { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; min-width: 3px; }
.ut-bar i { display: block; flex: 1; border-radius: 2px 2px 0 0; min-height: 0; }
.ut-bar i.v, .ut-key.v { background: #8fb4ea; }
.ut-bar i.a, .ut-key.a { background: var(--accent); }
.ut-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 3px 0 10px; vertical-align: -1px; }
.ut-axis { display: flex; justify-content: space-between; margin-top: 4px; }
.ut-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ut-cols .num { text-align: right; white-space: nowrap; }
.ut-timeline { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.ut-timeline li { display: grid; grid-template-columns: 150px 24px 1fr; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
/* Takenlijst in Monday-stijl: statusblok, eigenaar-avatar, tijdlijn, sterren; klik op de taak = paneel met notities */
.tk-top .chk { white-space: nowrap; }
.tk-top .chk input { width: auto; margin: 0; }
.tk-top input[type=search] { flex: 1; max-width: 420px; }
.tg-name { font-size: 1.3rem; font-family: var(--display); }
.tk-monday { min-width: 1080px; }
.tk-monday td { height: 40px; }
.tk-monday .tk-c { padding: 0 4px !important; text-align: center; }
.tk-name { cursor: pointer; min-width: 260px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px !important; }
.tk-name span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-name:hover span { color: #0073ea; }
.tk-monday tr.done .tk-name span { color: #999; text-decoration: line-through; }
.tk-nc { font-weight: 600; font-size: .78rem; color: #0073ea; background: #e5f0ff; border-radius: 10px; padding: 1px 7px; cursor: pointer; }
.tk-nc.add { background: none; color: #c3c6d4; visibility: hidden; }
.tk-name:hover .tk-nc.add { visibility: visible; }
.tk-st { width: 150px; padding: 0 !important; }
.tk-status { display: block; width: 100%; height: 40px; border: 0; background: var(--c); color: #fff; font: 600 .84rem/1.2 inherit; cursor: pointer; padding: 0 8px; }
.tk-status:hover { filter: brightness(.94); }
.tk-side-meta .tk-status { display: inline-block; width: auto; height: auto; padding: 4px 10px; border-radius: 4px; cursor: default; }
.tk-owner { border: 0; background: none; padding: 0; cursor: pointer; }
.tk-av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: hsl(var(--h, 210) 55% 52%); color: #fff; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.tk-av.empty { background: #eef0f4; color: #9aa0b4; font-size: 1rem; }
.tk-menu > button[data-u] { border: 0; background: none; text-align: left; padding: 5px 8px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.tk-menu > button[data-u]:hover { background: #f0f3ff; }
.tk-tl { position: relative; display: block; width: 150px; height: 24px; margin: 0 auto; border: 0; border-radius: 12px; background: #c4c4c4; overflow: hidden; cursor: pointer; padding: 0; }
.tk-tl i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pc); }
.tk-tl span { position: relative; color: #fff; font-size: .74rem; font-weight: 600; line-height: 24px; text-shadow: 0 0 2px rgba(0,0,0,.35); }
.tk-tl.empty { background: #eef0f4; color: #9aa0b4; }
.tk-tl-f { display: flex; flex-direction: column; font-size: .8rem; gap: 2px; }
.tk-due { width: 130px; text-align: center; }
.tk-stars { display: inline-flex; gap: 1px; white-space: nowrap; }
.tk-stars button { border: 0; background: none; padding: 0 1px; font-size: 1.05rem; line-height: 1; color: #d5d8e0; cursor: pointer; }
.tk-stars button.on { color: #fdab3d; }
.tk-stars:hover button { color: #fdab3d; }
.tk-stars button:hover ~ button { color: #d5d8e0; }
.tk-stars.ro { color: #fdab3d; letter-spacing: 1px; }
.tasks-side { width: 440px; }
.tk-side-t { flex: 1; min-width: 0; }
.tk-side-title { width: 100%; font: 700 1.15rem/1.3 var(--display, inherit); border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; margin-left: -6px; background: transparent; }
.tk-side-title:hover, .tk-side-title:focus { border-color: #d0d4e4; background: #fff; outline: none; }
.tk-side-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .85rem; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e6e9ef; }
.tk-side-h { margin: 0 0 8px; font-size: .95rem; }
/* Venstertje op kaart/pijplijn: smalle Google Maps-strook met pin */
.mp-hero { height: 110px !important; margin: 0 0 8px; border-radius: 8px; }
/* Venstertje: voorkant + bovenkant naast elkaar */
.mp-hero.mp-views { display: grid; grid-template-columns: 1fr; gap: 4px; height: 120px !important; background: none; overflow: visible; }
.mp-views.two { grid-template-columns: 1fr 1fr; }
.mp-tile { height: 120px; border-radius: 8px; }

/* Compact bedrijfsvenster (kaart + pijplijn): beelden links, gegevens rechts, keuzes naast elkaar */
.board-pop { width: 480px; }
.mp-compact .mp-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.mp-compact .mp-top.no-media { grid-template-columns: 1fr; }
.mp-compact .mp-media .mp-hero.mp-views { height: auto !important; grid-template-columns: 1fr !important; gap: 4px; margin: 0; }
.mp-compact .mp-media .mp-tile { height: 74px; }
.mp-compact .mp-media .mp-views:not(.two) .mp-tile { height: 150px; }
.mp-compact .mp-head { margin-bottom: .1rem; }
.mp-compact .mp-profile { margin-bottom: .2rem; font-size: .8rem; }
.mp-compact .mp-desc { font-size: .78rem; margin-bottom: .3rem; }
.mp-compact .mp-facts { font-size: .8rem; gap: .1rem; margin-bottom: .2rem; }
.mp-compact .mp-ml { margin: 0; font-size: .76rem; }
.mp-compact .mp-edit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 0; margin: 8px 0; }
.mp-compact .mp-edit-row .mp-stage { flex-direction: column; align-items: stretch; gap: 2px; }
.mp-compact .mp-edit-row .mp-stage span { min-width: 0; }
.mp-compact .mp-edit-row .mp-stage select { width: 100%; padding: 5px 6px; font-size: .8rem; }
.map-pop .mp-compact .mp-edit-row .tdd summary { flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 8px; }
.map-pop .mp-compact .mp-edit-row .tdd-label { min-width: 0; }
.map-pop .mp-compact .mp-edit-row .tdd-val { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-compact .mp-bottom { display: flex; align-items: center; gap: 10px; }
.mp-compact .mp-bottom .mp-links { flex: 1; margin: 0; }
.mp-compact .mp-bottom .mp-open { width: auto; white-space: nowrap; }
@media (max-width: 520px) { .mp-compact .mp-top { grid-template-columns: 1fr; } .mp-compact .mp-media .mp-hero.mp-views { grid-template-columns: 1fr 1fr !important; } .mp-compact .mp-edit-row { grid-template-columns: 1fr; } }/* Sector/type en diersoort: dropdown met vinkjes (meerdere kiezen), valt over het venster heen */
.map-pop .mp-compact .tdd { position: relative; }
.map-pop .mp-compact .tdd-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 50; width: 240px; max-height: 230px; overflow-y: auto; display: block; padding: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 28px rgba(16, 24, 40, .2); }
.map-pop .mp-compact .mp-edit-row > .tdd:last-child .tdd-menu { left: auto; right: 0; }
.map-pop .mp-compact .tdd-sub { margin: 6px 4px 2px; font-size: .62rem; }
.map-pop .mp-compact .tdd-sub:first-child { margin-top: 0; }
.map-pop .mp-compact .tdd-menu label { display: flex; width: 100%; gap: 8px; padding: 5px 6px; border: 0; border-radius: 5px; background: none; font-size: .8rem; color: #1e293b; white-space: normal; }
.map-pop .mp-compact .tdd-menu label:hover { background: #f1f5f9; color: #0f172a; border: 0; }
.map-pop .mp-compact .tdd-menu label input { position: static; opacity: 1; width: 15px; height: 15px; margin: 0; pointer-events: auto; accent-color: var(--accent); flex: none; }
.map-pop .mp-compact .tdd-menu label:has(input:checked) { background: #fff4ec; color: #0f172a; font-weight: 600; border: 0; }
/* Vast belmoment op de bedrijfspagina */
.cp-checkin { margin-top: 10px; border-top: 1px solid var(--line, #e5e7eb); padding-top: 8px; }
.cp-checkin summary { cursor: pointer; font-size: .9rem; }
.cp-checkin[open] summary { margin-bottom: 6px; }
.cp-automail { margin-top: 10px; border-top: 1px solid var(--line, #e5e7eb); padding-top: 8px; font-size: .9rem; }
.cp-automail .row { margin: 0 0 4px; }
/* Oplossingen: categorie + knop */
.pr-cat { display: flex; gap: 6px; align-items: center; }
.pr-cat select { flex: 1; min-width: 0; }
/* Profiel: gekozen landen als chips boven het zoekveld */
.picked-cc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-height: 132px; overflow-y: auto; }
.picked-cc[hidden] { display: none; }
/* Mail-automation op de bedrijfspagina */
.ma-row { border-top: 1px solid var(--line, #e5e7eb); padding: 8px 0; display: grid; gap: 2px; }
.ma-row.off { opacity: .6; }
.ma-row .row { margin-top: 4px; gap: 4px; }
.ma-form { border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 10px; margin: 8px 0; background: #fffdf8; }
.ma-form .wide { grid-column: 1 / -1; }
.ma-form textarea { width: 100%; font: inherit; }
.ma-form code { background: #f1f5f9; border-radius: 4px; padding: 0 4px; }
.ma-note { margin: 8px 0 0; padding: 6px 8px; border-radius: 6px; background: #fff7e6; color: #8a5a00; }

/* ---- Leads (assets/leads.js) ---- */
.ld-wrap { padding: 1rem 1.2rem; height: 100%; overflow: auto; }
.ld-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ld-head h2 { margin: 0 0 .2rem; }
.ld-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0; }
.ld-filters .seg { flex: 0 1 auto; }
.ld-filters .seg button { flex: none; padding: .42em .8em; }
.ld-filters .seg small { opacity: .7; }
.ld-filters input[type=search] { min-width: 240px; flex: 1; }
.ld-main { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 1rem; align-items: start; }
.ld-list { display: flex; flex-direction: column; gap: .5rem; max-height: calc(100vh - 230px); overflow: auto; padding-right: .2rem; }
.ld-item { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: .65rem .8rem; cursor: pointer; border-left: 4px solid transparent; }
.ld-item:hover { border-left-color: var(--line); }
.ld-item.active { border-left-color: var(--accent); background: var(--tint); }
.ld-item-top { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.ld-item-top .ld-pill { margin-left: auto; }
.ld-ch { font-size: 1rem; }
.ld-snip { margin-top: .25rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ld-item-foot { margin-top: .3rem; }
.ld-pill { display: inline-block; padding: .1em .6em; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--c) 15%, white); color: color-mix(in srgb, var(--c) 75%, black); white-space: nowrap; }
.ld-detail { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem; min-height: 300px; }
.ld-d-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.ld-d-head h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.ld-d-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .9rem 0 .4rem; }
.ld-d-grid .span2 { grid-column: span 3; }
.ld-d-grid select, .ld-d-grid input, .ld-d-contact select { width: 100%; }
.ld-d-contact { background: var(--bg); border-radius: 8px; padding: .6rem .8rem; }
.ld-k-info { margin-top: .3rem; }
.ld-h4 { margin: 1rem 0 .5rem; font-size: .95rem; }
.ld-thread { display: flex; flex-direction: column; gap: .5rem; max-height: 52vh; overflow: auto; padding: .2rem; }
.ld-msg { max-width: 82%; border-radius: 12px; padding: .5rem .75rem; background: var(--bg); }
.ld-msg.ld-in { align-self: flex-start; border-top-left-radius: 3px; background: #eef3fa; }
.ld-msg.ld-out { align-self: flex-end; border-top-right-radius: 3px; background: color-mix(in srgb, var(--accent) 14%, white); }
.ld-msg-meta { display: flex; justify-content: space-between; gap: .8rem; font-size: .76rem; margin-bottom: .2rem; }
.ld-msg-body { font-size: .9rem; white-space: normal; overflow-wrap: anywhere; }
.ld-compose { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; }
.ld-compose-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.ld-compose-row .seg button { flex: none; padding: .42em .8em; }
.ld-compose textarea, #ldn-body { width: 100%; resize: vertical; }
.ld-step { border-top: 1px solid var(--line); padding: .7rem 0 .3rem; }
.ld-step h4 { margin: 0 0 .5rem; }
.ld-step #ldn-q { width: 100%; }
.ld-results { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0; max-height: 260px; overflow: auto; }
.ld-res { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: .45rem .6rem; cursor: pointer; }
.ld-res:hover { border-color: var(--accent); background: var(--tint); }
.ld-chosen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ld-contacts { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }
.ld-k { display: flex; gap: .5rem; align-items: baseline; cursor: pointer; }
.ld-k input { width: auto; }
@media (max-width: 900px) { .ld-main { grid-template-columns: 1fr; } .ld-list { max-height: none; } .ld-d-grid { grid-template-columns: 1fr; } .ld-d-grid .span2 { grid-column: auto; } .ld-msg { max-width: 100%; } }
.ld-when { display: flex; gap: .35rem; }
.ld-when input:first-child { width: 7.5em; }
.ld-when input:last-child { width: 4.5em; }

/* ---- Tabblad Social (assets/social.js) ---- */
.sc { max-width: 1400px; margin: 0 auto; padding: 16px; }
.sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sc-head h2 { margin: 0 0 4px; }
.sc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.sc-filters, .sc-calnav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sc-calnav b { min-width: 140px; text-align: center; text-transform: capitalize; }
.sc-filters input[type=search] { min-width: 220px; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sc-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.sc-card:hover { border-color: var(--primary); }
.sc-thumb { width: 100%; height: 140px; object-fit: cover; display: block; background: var(--bg); }
.sc-nothumb { display: grid; place-items: center; font-size: 2.4rem; font-weight: 700; color: #fff; background: var(--c); opacity: .85; }
.sc-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.sc-card-body p { margin: 0; }
.sc-card-top { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-pill, .sc-ch { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1em .55em; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); white-space: nowrap; }
.sc-ch { color: #fff; background: var(--c); }
.sc-empty { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: 32px; text-align: center; }
/* Kalender */
.sc-cal { display: grid; grid-template-columns: 1fr 260px; gap: 12px; align-items: start; }
.sc-month { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sc-dow, .sc-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sc-dow div { padding: 6px 8px; font-size: .75rem; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.sc-day { min-height: 110px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.sc-day:nth-child(7n) { border-right: 0; }
.sc-day.other { background: var(--bg); }
.sc-day.other .sc-daynum { opacity: .45; }
.sc-day.today .sc-daynum { background: var(--primary); color: #fff; border-radius: 999px; padding: 0 .45em; align-self: flex-start; }
.sc-daynum { font-size: .8rem; font-weight: 600; color: var(--muted); }
.sc-over { outline: 2px dashed var(--primary); outline-offset: -3px; background: color-mix(in srgb, var(--primary) 6%, transparent); }
.sc-chip { font-size: .78rem; line-height: 1.25; padding: 3px 6px; border-radius: 6px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 10%, var(--panel)); cursor: grab; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sc-chip small { font-weight: 700; }
.sc-chip.dragging { opacity: .4; }
.sc-open { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 8px; max-height: 80vh; overflow-y: auto; }
.sc-open h4 { margin: 0; }
.sc-open p { margin: 0 0 4px; }
.sc-open .sc-chip { -webkit-line-clamp: 3; }
/* Editor */
.sc-x { position: absolute; right: 10px; top: 10px; }
#modal-body { position: relative; }
.sc-ed { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; }
.sc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-row .field { flex: 1; min-width: 120px; }
.sc-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sc-img { position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.sc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-img-del, .sc-img-dl { position: absolute; top: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: .7rem; cursor: pointer; display: grid; place-items: center; text-decoration: none; }
.sc-img-del { right: 3px; } .sc-img-dl { right: 28px; }
.sc-upload { align-self: flex-start; cursor: pointer; }
.sc-ai { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.sc-ai h4 { margin: 0 0 8px; }
.sc-variant { display: flex; gap: 8px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-top: 8px; }
.sc-variant-text { flex: 1; white-space: pre-wrap; font-size: .88rem; }
.sc-tags { color: var(--primary); margin-top: 4px; }
.sc-over-limit { color: #c8102e; font-weight: 700; }
.sc-ed-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.sc-grow { flex: 1; }
.btn.danger { color: #c8102e; }
.sc-daypick { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 400; }
.sc-plan td { vertical-align: top; }
.sc-ok { color: #2f9e44; } .sc-bad { color: #c8102e; }
.sc-ctx { white-space: pre-wrap; background: var(--bg); padding: 10px; border-radius: 8px; font-size: .88rem; }
@media (max-width: 900px) {
  .sc-cal, .sc-ed { grid-template-columns: 1fr; }
  .sc-open { position: static; max-height: none; }
  .sc-day { min-height: 70px; }
  .sc-chip { font-size: .7rem; }
}
.modal { z-index: 1300; } /* boven de vaste zijbalk (.topbar 1200), anders vallen brede pop-ups er op smalle schermen onder */
.sc-filters select, .sc-filters input[type=search] { width: auto; flex: 0 1 auto; }