/* styles.css — Sales. Designsysteem via tokens in :root; donker via html[data-theme="dark"]
   en @media (prefers-color-scheme: dark). Geen externe fonts (CSP font-src 'self') → systeem-fontstack. */

:root {
  /* kleur (canoniek, gedeeld met de andere Xaurum-apps) */
  --primary: #5b5bd6;
  --primary-ink: #ffffff;
  --ink: #14161d;
  --muted: #646b7a;
  --bg: #f4f5f8;
  --surface: #ffffff;
  --border: #e3e6ec;
  --ok: #0f9d6b;
  --ok-bg: color-mix(in srgb, var(--ok) 18%, var(--surface));
  --warn: #9a5b00;
  --err: #e0364f;

  /* type */
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px;
  --text-xl: 20px; --text-2xl: 26px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* spacing + radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --r-sm: 8px; --r-md: 11px; --r-lg: 16px; --r-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8eaf0; --muted: #9aa2b1; --bg: #15171e; --surface: #1d2027; --border: #2b2f3a;
  }
}
:root[data-theme="dark"] {
  --ink: #e8eaf0; --muted: #9aa2b1; --bg: #15171e; --surface: #1d2027; --border: #2b2f3a;
}

* { box-sizing: border-box; }
/* Het hidden-attribuut moet winnen van class-displays (.login-overlay/.app-shell gebruiken display:grid). */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: var(--text-base); color: var(--ink); background: var(--bg); }

/* ── login-overlay ─────────────────────────────────────────────── */
.login-overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); z-index: 50; padding: var(--space-4);
}
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--space-8); text-align: center; max-width: 360px; width: 100%;
}
.login-card img { margin-bottom: var(--space-4); }
.login-card h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.login-card p { color: var(--muted); margin: 0 0 var(--space-4); }

/* ── app-shell ─────────────────────────────────────────────────── */
.app-shell { display: grid; grid-template-columns: 220px 1fr; height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: var(--space-4); }
.nav-item {
  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
  border: 0; background: transparent; color: var(--ink); border-radius: var(--r-md);
  font-size: var(--text-base); cursor: pointer; margin-bottom: var(--space-1);
}
.nav-item:hover { background: var(--bg); }
.nav-item.actief { background: var(--primary); color: var(--primary-ink); }
/* Pictogram + label (0.24.0) en menu inklappen (js/gedeeld/zijbalk.js): de knop onderaan, ingeklapt alleen pictogrammen. */
.nav-item { display: flex; align-items: center; gap: var(--space-2); }
.nav-item svg { flex: none; }
.sidebar { display: flex; flex-direction: column; }
.sidebar .xzijbalk-voet { margin-top: auto; padding: 0; }
html[data-xzijbalk="in"] .sidebar { padding-left: var(--space-2); padding-right: var(--space-2); }
html[data-xzijbalk="in"] .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
/* Blok Verbinding in Instellingen (0.27.0) */
.verb-regel { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-2); }
.verb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.verb-blok.bezig .verb-dot { background: var(--primary); animation: pols 1.4s ease-in-out infinite; }
.verb-blok.fout .verb-dot { background: var(--err); }
.verb-blok.fout .verb-tekst { color: var(--err); }
@keyframes pols { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .verb-dot { animation: none; } }
.app-versie { margin-top: var(--space-4); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--muted); }

.main { display: flex; flex-direction: column; min-width: 0; overflow: auto; }
/* Topbar blijft bij scrollen bovenaan staan. --topbar-h wordt in app.js op de werkelijke hoogte gezet
   (fallback 57px) zodat de sticky toolbar er precies onder plakt. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); background: var(--surface);
}
.topbar h1 { font-size: var(--text-xl); margin: 0; flex: 1; }
.who { color: var(--muted); font-size: var(--text-sm); margin-right: var(--space-2); }
#content { padding: var(--space-6); }

/* ── toolbar + chips ───────────────────────────────────────────── */
/* Plakt onder de topbar bij scrollen (filterchips op de lijst, knoppenbalk op het detailscherm).
   De -1px laat 'm de topbarrand net overlappen, zodat er geen haarlijn content tussendoor schijnt. */
.toolbar { position: sticky; top: calc(var(--topbar-h, 57px) - 1px); z-index: 10; background: var(--bg);
  display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.detail-titel { font-weight: 600; margin-right: auto; }
.info-balk { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; max-width: 1040px;
  margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--bg); color: var(--muted); font-size: var(--text-sm); }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 1; }
.chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  padding: var(--space-1) var(--space-3); border-radius: var(--r-pill); font-size: var(--text-sm); cursor: pointer;
}
.chip.actief { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* ── tabel ─────────────────────────────────────────────────────── */
.lijst { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lijst th, .lijst td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.lijst th { color: var(--muted); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; }
.lijst td.muted, .muted { color: var(--muted); }
.lijst th.nr, .lijst td.nr { width: 3.5rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lijst th.land, .lijst td.land { width: 8ch; max-width: 8ch; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.lijst .leeg { text-align: center; color: var(--muted); padding: var(--space-8); }

/* ── Help (0.25.0): werkinstructie en architectuur; diagrammen kleuren via tokens, dus licht én donker ── */
.help-scherm { max-width: 760px; }
.help-scherm .inst-blok { margin-top: var(--space-6); }
.help-scherm h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.help-scherm h4 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-base); }
.help-scherm p { margin: var(--space-1) 0; line-height: 1.5; }
.help-lijst { margin: var(--space-1) 0 0 18px; padding: 0; line-height: 1.5; }
.help-lijst li { margin: 3px 0; }
.arch-svg { width: 100%; max-width: 520px; display: block; margin: 12px 0 6px; font-family: inherit; }
.arch-svg.arch-smal { max-width: 300px; }
.arch-laag { fill: var(--primary); fill-opacity: .08; stroke: var(--primary); stroke-opacity: .35; }
.arch-laag.arch-n1 { fill-opacity: .16; stroke-opacity: .55; }
.arch-laag.arch-n2 { fill-opacity: .24; stroke-opacity: .7; }
.arch-tekst { fill: var(--muted); }
.arch-kop { fill: var(--ink); }
.arch-pijl { stroke: var(--primary); stroke-width: 1.3; fill: none; }

/* sorteerbare kolomkoppen */
.lijst thead th.sorteerbaar { cursor: pointer; user-select: none; white-space: nowrap; }
.lijst thead th.sorteerbaar:hover { color: var(--text); }
.lijst thead th.sorteerbaar .sort-pijl { font-size: .85em; }

/* ── badges (status) ───────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--r-pill); font-size: var(--text-xs); white-space: nowrap; }
.status-lead-nieuw     { background: #e8e8fb; color: #3b3bb0; }
.status-lead-actief    { background: #d9f3e8; color: #0b7a53; }
.status-lead-postponed { background: #fdeccf; color: #8a5100; }
.status-lead-inactief  { background: #ececf0; color: #646b7a; }
.status-klant          { background: #5b5bd6; color: #fff; }

/* ── knoppen ───────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  padding: var(--space-2) var(--space-4); border-radius: var(--r-md); font-size: var(--text-base); cursor: pointer;
}
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.small { padding: 2px var(--space-3); font-size: var(--text-sm); }
.btn.danger { color: var(--err); border-color: var(--err); background: var(--surface); }
.btn.danger:hover:not([disabled]) { background: var(--bg); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── toast + dialog ────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: var(--surface); padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md); opacity: 0; transition: opacity .25s, transform .25s; z-index: 60; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.fout { background: var(--err); }
.toast.info { background: var(--primary); }
.toast.blijvend { display: flex; align-items: center; gap: var(--space-3); bottom: 72px; z-index: 65; }

.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 70; padding: var(--space-4); }
.dialog { background: var(--surface); border-radius: var(--r-lg); padding: var(--space-6); max-width: 420px; width: 100%; }
.dialog-msg { margin: 0 0 var(--space-6); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ── mail-dropzone (e-mail → notitie) ──────────────────────────── */
.mail-dropzone {
  margin: var(--space-2) 0 var(--space-4); padding: var(--space-4); text-align: center;
  border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--bg);
  color: var(--muted); font-size: var(--text-sm);
}
.mail-dropzone.over { border-color: var(--primary); border-style: solid; color: var(--ink); }

/* ── e-mailvoorstel (modal per lead) ───────────────────────────── */
.mailvoorstel { max-width: 860px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; }
.mailvoorstel-kop { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
.mailvoorstel-kop h2 { font-size: var(--text-lg); margin: 0; flex: 1; }
.mailvoorstel-x { border: 0; background: none; color: var(--muted); font-size: var(--text-2xl); line-height: 1; cursor: pointer; padding: 0 var(--space-2); }
.mailvoorstel-x:hover { color: var(--ink); }
.mailvoorstel-body { display: grid; grid-template-columns: 1fr 260px; gap: 0; min-height: 0; overflow: auto; }
.mailvoorstel-edit { padding: var(--space-4) var(--space-6); border-right: 1px solid var(--border); display: grid; gap: var(--space-3); align-content: start; }
.mv-veld { display: grid; gap: var(--space-1); }
.mv-veld > span { font-size: var(--text-sm); color: var(--muted); }
.mv-veld > span em { font-style: normal; font-size: var(--text-xs); }
.mv-veld input, .mv-veld textarea {
  width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: var(--text-base); font-family: inherit;
}
.mv-veld textarea { resize: vertical; min-height: 240px; line-height: 1.5; }
.mv-veld input.mv-invalid { border-color: var(--err); }
.mailvoorstel-warn { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--text-xs); color: var(--warn); }
.mailvoorstel-ctx { padding: var(--space-4); background: var(--bg); font-size: var(--text-xs); overflow: auto; }
.mailvoorstel-ctx h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 var(--space-3); }
.mv-ctx-rij { margin-bottom: var(--space-3); }
.mv-ctx-k { display: block; color: var(--muted); margin-bottom: 1px; }
.mv-ctx-v { display: block; color: var(--ink); }
.mv-ctx-rij.gebruikt .mv-ctx-v { background: var(--ok-bg); border-radius: var(--r-sm); padding: 1px var(--space-1); }
.mv-ctx-tag { color: var(--ok); font-weight: 600; }
.mv-ctx-bronnen { margin: 1px 0 0; padding-left: var(--space-4); }
.mv-ctx-bronnen a { color: var(--primary); word-break: break-all; }
.mailvoorstel-acties { align-items: center; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); flex-wrap: wrap; }
.mailvoorstel-voet { margin-right: auto; font-size: var(--text-xs); }
.btn.mv-disabled { opacity: .45; pointer-events: none; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 720px) {
  .mailvoorstel-body { grid-template-columns: 1fr; }
  .mailvoorstel-edit { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ── import-scherm ─────────────────────────────────────────────── */
.import-tekst {
  width: 100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--text-sm);
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); resize: vertical;
}
.import-resultaat { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.import-groep h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.import-groep .telling {
  background: var(--primary); color: var(--primary-ink); border-radius: var(--r-pill);
  font-size: var(--text-xs); padding: 1px var(--space-2); min-width: 20px; text-align: center;
}
.import-groep ul { margin: 0; padding-left: var(--space-6); }
.import-groep li { padding: 2px 0; }
.import-groep .leeg { margin: 0; }
.import-fouten {
  background: #fdeccf; color: #8a5100; border-radius: var(--r-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm);
}
.import-fouten ul { margin: var(--space-2) 0 0; padding-left: var(--space-6); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.scan-prompt {
  margin: var(--space-3) 0; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding: var(--space-3) var(--space-4);
}
.scan-prompt > summary { cursor: pointer; font-weight: 600; }
.scan-prompt-tekst {
  white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--text-xs);
  background: var(--bg); color: var(--ink); border-radius: var(--r-md);
  padding: var(--space-3); margin: var(--space-2) 0 0;
}
/* ── bestaande klanten (uitsluitlijst beheren) ─────────────────── */
.klant-toevoegen { flex-wrap: wrap; gap: var(--space-2); }
input.veld {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: var(--text-sm);
}
.klant-toevoegen input.veld { min-width: 220px; flex: 1 1 220px; }

/* ── lead-detail ───────────────────────────────────────────────── */
.detail-form { display: grid; gap: var(--space-4); max-width: 1040px; }
.detail-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.detail-kolommen .kolom { display: grid; gap: var(--space-4); align-content: start; }
.detail-form fieldset { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-4); }
.detail-form legend { font-size: var(--text-sm); font-weight: 600; color: var(--muted); padding: 0 var(--space-2); }
/* korte velden: label links, waarde rechts (compacter); tekstvlakken blijven gestapeld */
.detail-form .veld { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); }
.detail-form .veld.breed { grid-template-columns: 1fr; }
.detail-form .veld > span { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 860px) { .detail-kolommen { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .detail-form .veld { grid-template-columns: 1fr; } }
.detail-form .veld input, .detail-form .veld select, .detail-form .veld textarea {
  width: 100%; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: var(--text-base); font-family: inherit;
}
.detail-form .veld input[readonly] { background: var(--bg); color: var(--muted); }
.detail-form .veld textarea { resize: vertical; }
/* inklapbare secties (details/summary) in dezelfde stijl als de fieldsets */
.detail-form .sectie { border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 var(--space-4); }
.detail-form .sectie > summary { cursor: pointer; list-style: revert; font-size: var(--text-sm); font-weight: 600; color: var(--muted); padding: var(--space-3) 0; }
.detail-form .sectie[open] > summary { margin-bottom: var(--space-2); }
.detail-form .sectie-velden { padding-bottom: var(--space-3); }
/* status als klikbare knoppen */
.status-kiezer { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.statuskeuze { border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: var(--r-pill);
  padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-family: inherit; cursor: pointer; }
.statuskeuze:hover { border-color: var(--primary); }
.statuskeuze.actief { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.lijst tr.klikbaar { cursor: pointer; }
.lijst tr.klikbaar:hover td { background: var(--bg); }

/* ── notities / contactmomenten ────────────────────────────────── */
.notities-blok { max-width: 900px; margin-top: var(--space-6); }
.notities-blok h3 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.notitie-invoer { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-2); align-items: start; margin-bottom: var(--space-4); }
.notitie-invoer select, .notitie-invoer textarea {
  padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: var(--text-base); font-family: inherit;
}
.notitie-invoer textarea { resize: vertical; }
.notitie-acties { grid-column: 1 / -1; display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.notitie-acties input[type=file] { font-size: var(--text-sm); color: var(--muted); max-width: 100%; }
.bijlagen { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.bijlagen li { display: flex; gap: var(--space-2); align-items: baseline; }
.bijlage { background: none; border: none; padding: 0; color: var(--primary); cursor: pointer; font-size: var(--text-sm); font-family: inherit; text-align: left; }
.bijlage:hover { text-decoration: underline; }
.link-verwijder { background: none; border: none; padding: 0 var(--space-1); color: var(--muted); cursor: pointer; font-size: var(--text-sm); font-family: inherit; }
.link-verwijder:hover { color: var(--danger, #c0392b); text-decoration: underline; }
.note-verwijder { margin-left: auto; }
.note-bijlage-toevoegen { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.note-bijlage-toevoegen input[type=file] { font-size: var(--text-xs); color: var(--muted); max-width: 100%; }
.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tijdlijn li { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-3); background: var(--surface); }
.tijdlijn li.leeg { border-style: dashed; text-align: center; }
.note-kop { display: flex; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-1); flex-wrap: wrap; }
.note-type { background: var(--primary); color: var(--primary-ink); border-radius: var(--r-pill); font-size: var(--text-xs); padding: 1px var(--space-2); }
.note-meta { font-size: var(--text-xs); color: var(--muted); }
.note-tekst { font-size: var(--text-sm); white-space: pre-wrap; }

@media (max-width: 640px) { .notitie-invoer { grid-template-columns: 1fr; } }

/* ── klein scherm ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  #content { padding: var(--space-4); }
}