:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #dfe2e6;
  --text: #1f2430;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-soft: #eaf1ff;
  --ok: #16a34a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.app-topbar {
  /* Header + nav samen sticky boven de pagina houden -- ongeacht welk tabblad scrolt, blijft de
     top-navigatie in beeld i.p.v. dat je 'm wegscrollt. */
  position: sticky;
  top: 0;
  z-index: 30;
}
header {
  /* Subtiel af laten steken t.o.v. de tab-navigatie eronder (die blijft var(--panel)/wit) --
     precies de balk waar de zoekbalk in staat. */
  background: #e8ebf1;
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  align-items: center;
  gap: 16px;
}
header h1 { font-size: 15px; margin: 0; }
header h1 .payoff { font-style: italic; font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.header-left { display: flex; align-items: center; gap: 14px; justify-self: start; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 14px; justify-self: end; }
.header-right-actions { display: flex; align-items: center; gap: 4px; }

/* Command Bar: globale zoekbalk in het midden van de header, tussen appnaam en gebruikers-acties.
   Doorzoekt contacten/bedrijven/gebouwen tegelijk ongeacht welk tabblad actief is. */
.global-search-bar { position: relative; justify-self: stretch; }
#globalSearchInput { width: 100%; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: #fff; }
#globalSearchInput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.global-search-results { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; max-height: 380px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); z-index: 45; }
.global-search-result { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.global-search-result:nth-child(even) { background: #f7f8fa; }
.global-search-result:hover, .global-search-result.active { background: var(--accent-soft) !important; }
.global-search-result-type { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: #f0f1f4; border-radius: 5px; padding: 2px 6px; flex-shrink: 0; }
.global-search-empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }

nav.tabs { display: flex; justify-content: center; gap: 4px; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
nav.tabs button { border: none; background: transparent; padding: 10px 16px; font-size: 13px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; }
nav.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

main { padding: 12px 24px 32px; max-width: 1740px; margin: 0 auto; }

/* Elk tabblad breekt uit de gecentreerde max-breedte van main en vult het hele scherm. */
#tab-contacten, #tab-bedrijven, #tab-gebouwen, #tab-expertises, #tab-mail, #tab-changelog, #tab-settings, #tab-logs, #tab-contactdetail, #tab-bedrijfdetail {
  width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 24px; box-sizing: border-box;
}
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; }

/* Zelfde truc als #tab-import: bewust uit de max-width:1740px van <main> breken, op verzoek
   100% van het venster i.p.v. gecentreerd/smal. */
#tab-statistieken, #tab-gebouwbewerken { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 24px; box-sizing: border-box; }
.stat-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.stat-kpi-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.stat-kpi-value { font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-kpi-label { margin-top: 6px; font-size: 13px; color: var(--text); line-height: 1.4; }

/* 3 kolommen i.p.v. 1 lange lijst -- break-inside:avoid houdt een hele categorie (kop + rijen) bij
   elkaar in 1 kolom i.p.v. 'm halverwege af te knippen bij de kolomrand. */
.expertise-dekking-columns { column-count: 3; column-gap: 28px; }
.expertise-dekking-group { break-inside: avoid; margin-bottom: 10px; }
.expertise-dekking-group:first-child .settings-row-group { margin-top: 0; }
.expertise-dekking-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 5px 6px; border-radius: 6px; }
/* nth-of-type i.p.v. nth-child: de groep bevat ook een <p> categorie-kop vóór de rijen, die moet niet
   meetellen in de telling anders begint de streping bij de verkeerde rij. */
.expertise-dekking-row:nth-of-type(even) { background: #f7f8fa; }
.expertise-dekking-row:hover { background: #eef2f9; }
.expertise-dekking-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.expertise-dekking-prio { display: flex; gap: 6px; flex-shrink: 0; }
/* Kleur bij "actief" (gekozen niveau) komt inline vanuit DEKKING_PRIO_LEVELS in app.js, niet hier --
   zo hoeft alleen die array te wijzigen als de schaal ooit weer verandert. */
.prio-btn { border: 1px solid var(--border); background: #fff; color: var(--muted); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px; cursor: pointer; }

.stat-wa-input { width: 230px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; }
#statBirthdayRows [data-stat-wa-send] { background: #25d366; display: inline-flex; align-items: center; gap: 5px; }
#statBirthdayRows [data-stat-wa-send]:hover { filter: brightness(0.95); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters input, .filters select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: #fff; }
.filters input { flex: 1; min-width: 180px; }

/* Multi-select filterdropdown: vervangt een native <select> waar je meerdere waarden tegelijk
   moet kunnen aanvinken (bv. contacten uit meerdere expertises filteren). */
.ms-filter { position: relative; }
.ms-filter-btn { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: #fff; cursor: pointer; color: var(--text); white-space: nowrap; }
.ms-filter-btn:hover { border-color: var(--muted); }
.ms-filter-btn.ms-filter-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ms-filter-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; width: 280px;
  max-height: 480px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; box-sizing: border-box;
}
.ms-filter-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; text-align: left; }
.ms-filter-item:hover { background: var(--accent-soft); }
/* .filters input { flex: 1; min-width: 180px; } zou hier via descendant-matching ook de checkboxes
   raken -- expliciet resetten naar een klein, vast vinkje i.p.v. een flex-grow item. */
.ms-filter-item input { flex: 0 0 auto; width: 15px; height: 15px; min-width: 0; margin: 2px 0 0 0; }
.ms-filter-item span { flex: 1 1 auto; min-width: 0; text-align: left; }
.ms-filter-empty { padding: 8px; font-size: 12px; color: var(--muted); }
.ms-filter-group:not(:first-child) { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.ms-filter-group-header { font-weight: 600; }
.ms-filter-group-header span { text-transform: uppercase; font-size: 11px; letter-spacing: .02em; color: var(--muted); }
.ms-filter-item.ms-filter-sub { padding-left: 22px; }
.filters .count { font-size: 13px; color: var(--muted); margin-left: auto; }

.table-scroll { overflow: visible; }
/* Contacten/Bedrijven/Expertises: de resultatentabel scrolt intern i.p.v. de hele pagina, zodat de
   (sticky) top-navigatie altijd zichtbaar blijft terwijl je door lange lijsten scrolt. De kolomkoppen
   blijven daarbij ook zelf zichtbaar (sticky thead). */
#tab-contacten .table-scroll,
#tab-bedrijven .table-scroll,
#tab-expertises .table-scroll {
  overflow-y: auto;
  /* Was 230px; de header is hoger geworden door de zoekbalk erin, dus wat meer aftrekken om een
     dubbele scrollbar te voorkomen -- maar niet te veel, de tabel mag zoveel mogelijk rijen tonen. */
  max-height: calc(100vh - 255px);
}
.table-scroll thead th { position: sticky; top: 0; background: var(--panel); z-index: 5; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
table.wide-table { width: 100%; }
.changelog-table { font-size: 14px; }
.changelog-table td, .changelog-table th { line-height: 1.7; padding-top: 10px; padding-bottom: 10px; }
.changelog-table td ul { line-height: 1.7; }
th, td { text-align: left; padding: 3px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
#tab-contacten td, #tab-contacten th, #tab-bedrijven td, #tab-bedrijven th, #tab-gebouwen td, #tab-gebouwen th, #tab-expertises td, #tab-expertises th, #tab-mail td, #tab-mail th { padding-top: 6px; padding-bottom: 6px; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
th.col-date, td.col-date { color: #9ca3af; font-size: 12px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }

.mail-archive-table { font-size: 11px; }
.mail-archive-table td, .mail-archive-table th { padding: 2px 8px !important; }
.mail-archive-table tr.mail-archive-row { cursor: pointer; }
.mail-archive-table tr.mail-archive-row:hover { background: #f7f8fa; }
.mail-archive-table .mail-archive-chevron { display: inline-block; width: 10px; color: var(--muted); transition: transform .15s; }
.mail-archive-table tr.mail-archive-row.expanded .mail-archive-chevron { transform: rotate(90deg); }
.mail-archive-table .mail-archive-detail td { background: #f8f9fb; padding: 8px 10px !important; }
.mail-archive-table .mail-archive-detail pre { white-space: pre-wrap; font-family: inherit; font-size: 11px; margin: 0; max-height: 200px; overflow: auto; }
.sort-arrow { display: inline-block; width: 10px; font-size: 13px; color: var(--accent); }
tbody tr:nth-child(even) td { background: #f7f8fa; }
tr:hover td { background: #eef2f9 !important; }
tr.row-selected td { background: var(--accent-soft) !important; }
td.editable-cell { cursor: pointer; }
td.editable-cell:hover { background: #e3ebfa !important; }

.log-action { font-weight: 600; }
.log-type { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 400; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.badge.clickable { cursor: pointer; }
.badge.clickable:hover { background: var(--accent); color: #fff; }
.muted { color: var(--muted); font-size: 13px; }

.building-tag {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 8px;
  font-size: 10px; font-weight: 700; color: #1f2430; vertical-align: middle;
}
.building-tag-lg {
  font-size: 13px; padding: 3px 9px;
}

.tag-neutral {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 8px;
  font-size: 11px; font-weight: 600; color: #6b7280; background: #eceef1; border: 1px solid #dde1e6;
  vertical-align: middle;
}
.tag-neutral.tag-actief { background: #6b7280; color: #fff; border-color: #6b7280; }

.linkedin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 5px; background: #0a66c2; color: #fff;
  text-decoration: none; font-size: 9px; font-weight: 700; flex-shrink: 0; opacity: .75;
}
.linkedin-btn:hover { opacity: 1; filter: brightness(1.1); }

.profile-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 5px; background: var(--accent-soft); color: var(--accent);
  text-decoration: none; font-size: 11px; font-weight: 700; flex-shrink: 0; opacity: .85; border: none; cursor: pointer;
}
.profile-btn:hover { opacity: 1; background: var(--accent); color: #fff; }

.actions-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

a.link { color: var(--accent); text-decoration: none; }
a.link:hover { text-decoration: underline; }

.link-name { color: var(--accent); cursor: pointer; }
.link-name:hover { text-decoration: underline; }

select.expertise-select, select.company-select {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
  color: var(--text); background: #fff; cursor: pointer;
}

.settings-row { display: flex; align-items: center; gap: 10px; padding: 5px 6px; min-width: 0; break-inside: avoid; border-radius: 6px; }
.settings-row .swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.settings-row input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.settings-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-row-click { cursor: pointer; margin: 0 -6px; }
.settings-row-click:hover { background: #eef2f9 !important; }
/* Alternerende rijkleur -- geldt voortaan bij elke tabelachtige lijst in de app, niet alleen bij
   echte <table>'s (die hebben dit al via "tbody tr:nth-child(even) td" hierboven). */
.settings-row:nth-child(even) { background: #f7f8fa; }
.unlink-btn {
  border: none; background: none; color: var(--muted); font-size: 11px; cursor: pointer;
  padding: 2px 8px; border-radius: 4px; opacity: .55; flex-shrink: 0; margin-left: auto;
}
.unlink-btn:hover { opacity: 1; color: #dc2626; background: #fef2f2; }
.edit-btn {
  border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer;
  padding: 2px 7px; border-radius: 4px; opacity: .55; flex-shrink: 0;
}
.edit-btn:hover { opacity: 1; color: var(--accent); background: var(--accent-soft); }
.settings-row-group { display: inline-block; max-width: 100%; font-size: 11px; color: var(--muted); background: #f0f1f4; border-radius: 8px; padding: 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.settings-row-categorie { display: inline-block; max-width: 100%; font-size: 11px; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

.expertise-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.expertise-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.expertise-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px 4px 10px; border-radius: 14px; font-size: 12px; font-weight: 600;
}
.expertise-chip .expertise-chip-remove {
  border: none; background: rgba(0,0,0,.12); color: inherit; border-radius: 50%;
  width: 15px; height: 15px; line-height: 15px; text-align: center; cursor: pointer; font-size: 11px; padding: 0;
}
.expertise-chip .expertise-chip-remove:hover { background: rgba(0,0,0,.25); }

.settings-cols { display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.settings-cols .panel { flex: 1; min-width: 0; margin-bottom: 0; }

.panel-title-row { display: flex; align-items: center; gap: 8px; }
.title-add-btn {
  border: none; background: transparent; color: var(--muted);
  font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; padding: 0 4px;
}
.title-add-btn:hover { color: var(--accent); }

.checkbox-list { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; }
.checkbox-row { display: flex; align-items: center; gap: 6px; font-size: 13px; }
/* .modal-body-row label { display:block; text-transform:uppercase; ... } heeft hogere specificiteit
   (klasse+element) dan .checkbox-row alleen (1 klasse), dus zonder deze override werd elke
   checkbox-rij hier binnen een modal als los, gecentreerd blok-label weergegeven i.p.v. een
   inline, links uitgelijnde checkbox+tekst-rij. */
.modal-body-row .checkbox-list .checkbox-row {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  text-align: left; text-transform: none; letter-spacing: normal;
  font-size: 13px; color: var(--text); margin-bottom: 0; font-weight: 400;
}
.modal-body-row .checkbox-list .checkbox-row input[type="checkbox"] { width: auto; flex-shrink: 0; }

.btn { border: none; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: #fff; color: #dc2626; border: 1px solid #f3cccc; }
.btn.dark { background: #0f2942; color: #fff; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.icon-btn { padding: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.btn:hover { filter: brightness(0.97); }

.toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.empty { color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }

.detail-header-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.detail-header-left { justify-self: start; min-width: 0; }
.detail-header-row .detail-quick-actions { justify-self: center; }
.detail-header-right-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }
.detail-header-right-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.detail-meta-line { font-size: 11px; margin: 0; text-align: right; }

.detail-quick-actions { display: flex; gap: 8px; }
.quick-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent);
  text-decoration: none; font-size: 15px; border: none; cursor: pointer; transition: background .12s, color .12s;
}
.quick-action-btn:hover { background: var(--accent); color: #fff; }
.quick-action-btn.qa-whatsapp { color: #25d366; }
.quick-action-btn.qa-whatsapp:hover { background: #25d366; color: #fff; }

.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; border: none; background: none;
  color: var(--muted); opacity: .55; cursor: pointer; vertical-align: middle; padding: 0;
}
.copy-btn:hover { opacity: 1; background: var(--accent-soft); color: var(--accent); }
.copy-btn.copied { opacity: 1; color: var(--ok); font-size: 11px; font-weight: 700; }

.detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.detail-header h2 { margin: 0; font-size: 22px; }
.detail-subline { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
/* Profiel + Gebouwen/Notities zitten samen in 1 wit blok (.detail-merged-panel), met alleen een
   verticale/horizontale lijn als scheiding i.p.v. losse panelen -- gebruikt op zowel de contact- als
   de bedrijf-detailpagina. Profiel (kolom 1) beslaat beide rijen; Gebouwen (rij 1, kolom 2) is even
   hoog als Profiel (grid align-items:stretch); Notities (rij 2, kolom 2) staat daaronder los, met
   zijn eigen hoogte i.p.v. mee te schalen met Profiel. */
.detail-merged-panel { padding: 0; margin-bottom: 18px; }
.detail-merged-grid { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto auto; align-items: stretch; }
.detail-merged-col { grid-column: 1; grid-row: 1 / span 2; padding: 16px; }
.detail-merged-gebouwen { grid-column: 2; grid-row: 1; padding: 16px; border-left: 1px solid var(--border); }
.detail-merged-notities { grid-column: 2; grid-row: 2; padding: 16px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); display: flex; flex-direction: column; }
.detail-merged-notities textarea { flex: 1; min-height: 60px; }
.detail-field { margin-top: 8px; margin-bottom: 12px; }
.detail-field label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.detail-list-label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.detail-field .detail-value { font-size: 14px; }
/* Zelfde 12px als de Logs-pagina (die erft de generieke `table`-font-size) -- geen eigen grotere
   maat hier, dat was juist de inconsistentie. */
.detail-log-row { display: flex; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 12px; align-items: baseline; }
.detail-log-row .badge { font-size: inherit; }
.detail-log-row:last-child { border-bottom: none; }
.detail-log-row .detail-log-date { color: var(--muted); flex-shrink: 0; width: 130px; }
.detail-notes-placeholder { border: 1px dashed var(--border); border-radius: 8px; padding: 16px; color: var(--muted); font-size: 13px; text-align: center; }


/* Zat eerst als fixed floating action button rechtsonder -- nam daardoor blijvend ruimte in
   (main had 100px onderpadding als vrijwaring) en zorgde zo voor een tweede, overbodige
   pagina-scrollbar bovenop de scrollbar van de resultatentabel. Nu een gewone knop links in de
   header, chat-panel klapt daar gewoon onder open. */
#chatDock { position: relative; display: inline-block; }
.chat-fab { background: #16a34a; color: #fff; border: none; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.chat-fab:hover { background: #15803d; }
.chat-panel { position: absolute; top: calc(100% + 8px); left: 0; width: 480px; max-width: 90vw; max-height: 70vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.12); z-index: 40; }
.chat-panel code { background: #eef2f9; padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--accent); }
.chat-header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; }
.chat-close { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }
#chatInput { width: 100%; min-height: 170px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; resize: vertical; }
#chatResult { margin-top: 10px; font-size: 13px; }
.confirm-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 8px; background: #fafbfc; }
.confirm-card .row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 13px; }
.confirm-card .row label { color: var(--muted); }
.confirm-card .row input, .confirm-card .row select { flex: 1; max-width: 190px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; }
.confirm-card .row-group { display: flex; gap: 8px; padding: 3px 0; }
.confirm-card .row-group .field { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.confirm-card .row-group .field label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.confirm-card .row-group .field input, .confirm-card .row-group .field select { width: 100%; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; }
.confirm-card .flag { color: #b45309; font-size: 13px; margin-top: 4px; }
.confirm-card .flag-prominent {
  color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.confirm-actions { display: flex; gap: 8px; margin-top: 10px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(15,18,24,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--panel); border-radius: 12px; width: 860px; max-width: 92vw; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; font-weight: 600; font-size: 16px; margin-bottom: 16px; }
.modal-header-title { display: flex; flex-direction: column; gap: 2px; }
.modal-meta-inline { font-size: 12px; color: var(--muted); font-weight: 400; }
.modal-nav { display: flex; align-items: center; gap: 6px; }
.modal-nav .icon-btn { font-size: 16px; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:disabled:hover { filter: none; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
/* Gebouw-detailpagina: bedrijven-kolom bevat meer info per rij (expertises/branche + rol/jaar/afstand)
   dan de contacten-kolom, dus 3/5 - 2/5 i.p.v. gelijk verdeeld. */
.gebouw-detail-grid { grid-template-columns: 3fr 2fr; }
/* Fluid: table-layout:auto (default) zodat elke kolom precies zo breed wordt als de langste inhoud
   vraagt -- geen vaste breedtes, geen afkappen. Geen eigen font-size: elke tabel in de app (contacten,
   bedrijven, logs, ...) erft dezelfde 12px van de generieke `table`-regel -- dat is de lijn. */
.gebouw-company-table td.col-icons { white-space: nowrap; text-align: right; }
.gebouw-company-table tr { cursor: pointer; }

/* Contactpersonen op de bedrijf-detailpagina als tegels i.p.v. een lijst -- altijd precies 3 naast
   elkaar (33% elk), niet fluid tot een andere breedte. Twee kolommen bínnen de tegel: contactgegevens
   links, gekoppelde gebouwen rechts -- zo bepaalt alleen de linkerkolom de hoogte (geen losse rij
   onderaan met lege ruimte ernaast). */
/* align-items: start voorkomt dat grid-cellen in dezelfde rij elkaars hoogte overnemen -- anders
   wordt een tegel met weinig inhoud (bv. geen functie/mobiel/e-mail) opgerekt tot de hoogte van de
   langste tegel ernaast, met een hoop lege ruimte eronder tot gevolg (lijkt dan op ongelijke
   spacing t.o.v. het volgende blok, terwijl de marge zelf gewoon klopt). */
.contact-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; align-items: start; }
.contact-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.contact-tile:hover { border-color: #e0ecff; background: #f6f9ff; }
.contact-tile-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-tile-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.contact-tile-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.contact-tile-name { font-weight: 600; font-size: 15px; }
.contact-tile-actions-buttons { display: flex; align-items: center; gap: 4px; }
.contact-tile-functie { margin: 0; font-size: 13px; color: var(--muted); }
.contact-tile-line { font-size: 13px; display: flex; align-items: center; gap: 6px; margin: 0; min-height: 22px; }
.contact-tile-line.muted { color: var(--muted); min-height: 0; }
.contact-tile-line .quick-action-btn { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
.contact-tile-line .copy-btn { flex-shrink: 0; }
.contact-tile-buildings { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.contact-tile-birthday { font-size: 12px; white-space: nowrap; margin-left: 6px; }
.modal-body-row { margin-bottom: 14px; }
.modal-body-row.modal-body-full { grid-column: 1 / -1; }
.modal-body-row label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.modal-body-row input, .modal-body-row select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-error { color: var(--danger, #dc2626); font-weight: 400; font-size: 13px; text-align: right; margin-left: auto; }
.modal-error strong { font-weight: 700; }
.modal-body-row.field-error label { color: var(--danger, #dc2626); }
.modal-body-row.field-error input { border-color: var(--danger, #dc2626); }

.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  max-height: 200px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.autocomplete-item { padding: 8px 11px; font-size: 13px; cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--accent-soft); }

.building-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.building-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--border); background: #fff; color: var(--muted);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.building-chip .chip-name { font-weight: 400; opacity: .85; }
.building-chip:hover { border-color: var(--chip-color, var(--border)); }
.building-chip.linked { border-color: var(--chip-color); color: var(--chip-color); background: #fff; }
.building-chip.selected { background: var(--chip-color); color: #fff; border-color: var(--chip-color); }
.building-chip.selected .chip-name { color: #fff; opacity: .95; }
.building-picker-hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
/* Compacte variant voor de chat-snelinvoer: toont afkorting i.p.v. volledige naam, zodat alle
   gebouwen-chips ook bij veel gebouwen nog op één rij passen. */
.building-picker-compact { gap: 5px; }
.building-chip-compact { padding: 4px 9px; font-size: 12px; }

.shortcuts-overlay { background: rgba(15,18,24,.25); }
.shortcuts-modal { width: 420px; }
.shortcuts-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.shortcuts-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.shortcuts-row span { color: var(--text); margin-left: auto; text-align: right; }

.export-overlay { background: rgba(15,18,24,.25); }
.export-modal { width: 680px; }
.export-section { margin-bottom: 18px; }
.export-section-label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.export-options-row { display: flex; gap: 10px; }
.export-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; margin-bottom: 8px; transition: border-color .15s, background .15s; }
.export-options-row .export-option { flex: 1; margin-bottom: 0; }
.export-option:last-child { margin-bottom: 0; }
.export-option:hover { border-color: var(--accent); }
.export-option.checked { border-color: var(--accent); background: var(--accent-soft); }
.export-option input { margin-top: 2px; flex-shrink: 0; }
.export-option-text { display: flex; flex-direction: column; gap: 1px; }
.export-option-title { font-size: 13px; font-weight: 600; color: var(--text); }
.export-option-sub { font-size: 12px; color: var(--muted); }
.export-columns-note { font-size: 12px; color: var(--muted); background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; line-height: 1.5; }

/* ---------- Importeren ---------- */
/* Breekt bewust uit de max-width:1740px van <main> -- de kolom-match- en previewtabellen hebben
   veel horizontale ruimte nodig (contacten + bedrijven naast elkaar), dus deze tab vult de volle
   breedte van het venster i.p.v. gecentreerd te blijven zoals de andere tabs. */
#tab-import { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 24px; box-sizing: border-box; }
.import-steps { display: flex; gap: 6px; margin-top: 14px; }
.import-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 6px 12px; border-radius: 999px; background: #f0f1f4; }
.import-step.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.import-step-num { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); color: #fff; font-size: 10px; font-weight: 700; }
.import-step.active .import-step-num { background: var(--accent); }
.import-source-row { display: flex; align-items: stretch; gap: 14px; margin-top: 16px; }
.import-source-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.import-source-col label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.import-source-col textarea { flex: 1; width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: ui-monospace, monospace; resize: vertical; min-height: 160px; }
.import-source-divider { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; padding-top: 28px; }
.import-upload-drop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1.5px dashed var(--border); border-radius: 8px; padding: 20px; min-height: 160px; transition: background .1s, border-color .1s; }
.import-upload-drop.import-drop-active { background: var(--accent-soft); border-color: var(--accent); }
.import-upload-icon { font-size: 26px; margin-bottom: 8px; opacity: .6; }
.import-hint { font-size: 12px; color: var(--muted); background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; line-height: 1.5; margin-top: 12px; }
.import-field-select { width: 100%; }
.import-match-table td { vertical-align: middle; }
.import-summary-row { display: flex; gap: 8px; margin-bottom: 14px; }
.import-summary-chip { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.import-summary-new { background: #16a34a22; color: #16a34a; }
.import-summary-match { background: #2563eb22; color: #2563eb; }
.import-summary-skip { background: #f0f1f4; color: var(--muted); }
.import-summary-tag { background: #7c3aed22; color: #7c3aed; }
.import-row-skipped { opacity: .4; text-decoration: line-through; }
.import-newtag-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #7c3aed; background: #7c3aed22; border-radius: 999px; padding: 1px 6px; margin: 0 2px; vertical-align: middle; }
.import-preview-table td { vertical-align: middle; }
.import-cell-edit { width: 100%; min-width: 100px; border: 1px solid transparent; background: transparent; font: inherit; color: inherit; padding: 4px 6px; border-radius: 5px; }
.import-cell-edit:hover { background: var(--accent-soft); }
.import-cell-edit:focus { outline: none; border-color: var(--accent); background: #fff; }
.import-relation-select { min-width: 210px; cursor: pointer; }
.import-cell-static { color: var(--muted); text-align: center; }
.import-block-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text); margin: 0 0 8px; }
.import-warn-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #d97706; background: #d9770622; border-radius: 999px; padding: 1px 6px; margin: 0 2px; vertical-align: middle; cursor: help; }
.export-columns-note b { color: var(--text); }
kbd {
  display: inline-block; min-width: 20px; text-align: center; padding: 3px 7px;
  border-radius: 5px; border: 1px solid var(--border); background: #f7f8fa;
  color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; box-shadow: 0 1px 0 var(--border);
}