@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Speakup Offertes - app-styling. Huisstijl: Mountain black #292929, Connected orange #FF9515, Communication yellow #FFD600 */
/* Kleuren staan als tokens op :root; het donkere thema overschrijft ze via [data-theme="dark"] of de systeeminstelling (data-theme="auto" of geen attribuut). */
:root {
  color-scheme: light;
  --orange: #FF9515; --black: #292929; --yellow: #FFD600; --white: #FFFFFF;
  --bg: #F6F6F4; --line: #E4E4E0; --muted: #6B6B68; --card: #FFFFFF; --red: #C0392B; --green: #2E7D32;
  --hover: #FAFAF8; --well: #EFEFEC; --faint: #C9C9C4; --orange-hover: #E8850F;
  --t-orange-bg: #FFF3E0; --t-orange-fg: #B35F00; --t-green-bg: #E6F4EA; --t-green-line: #BFE3C8; --t-red-bg: #FDECEA; --t-red-line: #F3C5C0;
  --t-yellow-bg: #FFF9D6; --t-yellow-fg: #7A6A00; --t-blue-bg: #EEF2FF; --t-blue-fg: #3949AB; --t-grey-bg: #EEEEEA;
  --font: 'Averta', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Donker thema: --black en --white wisselen van rol (tekst wordt licht, vlakken worden donker); de accenten blijven de huisstijlkleuren */
:root[data-theme="dark"] { color-scheme: dark;
  --black: #ECECE8; --white: #1E1E1C; --bg: #141413; --line: #34342F; --muted: #A3A39C; --card: #1E1E1C; --red: #F0766B; --green: #6FCB74;
  --hover: #24241F; --well: #1A1A18; --faint: #4A4A44; --orange-hover: #FFA53A;
  --t-orange-bg: #3B2A12; --t-orange-fg: #FFB65C; --t-green-bg: #16301A; --t-green-line: #2C5A32; --t-red-bg: #3B1A17; --t-red-line: #6A2B26;
  --t-yellow-bg: #363010; --t-yellow-fg: #E8D060; --t-blue-bg: #1C2140; --t-blue-fg: #9FB0FF; --t-grey-bg: #2A2A27; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark;
    --black: #ECECE8; --white: #1E1E1C; --bg: #141413; --line: #34342F; --muted: #A3A39C; --card: #1E1E1C; --red: #F0766B; --green: #6FCB74;
    --hover: #24241F; --well: #1A1A18; --faint: #4A4A44; --orange-hover: #FFA53A;
    --t-orange-bg: #3B2A12; --t-orange-fg: #FFB65C; --t-green-bg: #16301A; --t-green-line: #2C5A32; --t-red-bg: #3B1A17; --t-red-line: #6A2B26;
    --t-yellow-bg: #363010; --t-yellow-fg: #E8D060; --t-blue-bg: #1C2140; --t-blue-fg: #9FB0FF; --t-grey-bg: #2A2A27; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--black); background: var(--bg); }
a { color: var(--black); }
h1 { font-weight: 700; font-size: 26px; line-height: 1.2; margin: 0; }
h2 { font-weight: 700; font-size: 16px; margin: 0 0 12px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .strong { font-weight: 700; } .nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt { margin-top: 16px; }

/* Wordmark */
.wm { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--black); }
.wm .up { color: var(--orange); }
.wm.big { font-size: 40px; text-align: center; margin-bottom: 8px; }

/* Navigatie */
.topbar { display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 60px; background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.brand-sub { white-space: nowrap; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a { text-decoration: none; padding: 8px 10px; white-space: nowrap; border-radius: 6px; color: var(--black); font-weight: 500; }
.nav-links a:hover { background: var(--bg); }
.nav-links a.active { background: var(--black); color: var(--white); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-muted { color: var(--muted); text-decoration: none; font-size: 13px; }

.container { max-width: 1240px; margin: 0 auto; padding: 24px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .crumbs a { color: var(--muted); }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Kaarten en grids */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 16px 20px; }
.span-2 { grid-column: span 2; }
.form-narrow { max-width: 720px; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } .topbar { height: auto; flex-wrap: wrap; padding: 12px 16px; } .container { padding: 16px; } }

/* Formulieren */
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 12px; }
label input, label select, label textarea, .filters input, .filters select { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--black); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; } label.check input { width: auto; margin: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--orange); }
textarea { resize: vertical; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.filters input[type=search] { max-width: 360px; margin: 0; } .filters select { width: auto; margin: 0; }
.details summary { cursor: pointer; font-weight: 500; margin-bottom: 12px; }
.small-link { font-size: 12px; color: var(--muted); }

/* Knoppen */
.btn { display: inline-block; white-space: nowrap; font: inherit; font-weight: 500; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); color: var(--black); text-decoration: none; cursor: pointer; line-height: 1.3; }
.btn:hover { border-color: var(--black); }
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.btn-block { width: 100%; }
.btn.danger, button.danger { color: var(--red); }
.icon-btn { font: inherit; border: none; background: transparent; cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 4px; }
.icon-btn:hover { background: var(--bg); color: var(--red); }

.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 220px; z-index: 30; padding: 6px; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu button { display: block; width: 100%; text-align: left; font: inherit; background: none; border: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--black); }
.dropdown-menu button:hover { background: var(--bg); }

/* Tabellen */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.table tbody tr:hover { background: var(--hover); }
.table.compact td { padding: 6px 8px; font-size: 13px; }
.table a { text-decoration: none; } .table a:hover { text-decoration: underline; }
tr.inactive { opacity: .5; }
.kv td { padding: 6px 0; } .kv td.num { font-weight: 700; }

/* Statussen */
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; vertical-align: middle; background: var(--bg); }
.badge.status-concept { background: var(--t-grey-bg); color: var(--muted); }
.badge.status-verzonden { background: var(--t-orange-bg); color: var(--t-orange-fg); }
.badge.status-geaccepteerd { background: var(--t-green-bg); color: var(--green); }
.badge.status-afgewezen { background: var(--t-red-bg); color: var(--red); }
.badge.status-verlopen { background: var(--t-yellow-bg); color: var(--t-yellow-fg); }

.stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; text-decoration: none; border-top: 4px solid var(--line); }
.stat-n { font-size: 26px; font-weight: 700; } .stat-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat.status-verzonden { border-top-color: var(--orange); } .stat.status-geaccepteerd { border-top-color: var(--green); }
.stat.status-afgewezen { border-top-color: var(--red); } .stat.status-verlopen { border-top-color: var(--yellow); }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* Flash */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.flash-ok { background: var(--t-green-bg); border-color: var(--t-green-line); color: var(--green); }
.flash-error { background: var(--t-red-bg); border-color: var(--t-red-line); color: var(--red); }

/* Editor regels */
.lines input, .lines select { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; }
.lines input:hover, .lines select:hover { border-color: var(--line); background: var(--white); }
.lines input:focus, .lines select:focus { background: var(--white); }
.lines .f-details { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lines td.drag { cursor: grab; color: var(--faint); width: 24px; padding-left: 4px; padding-right: 0; user-select: none; }
.lines tr.drop td { border-top: 2px solid var(--orange); }
.w-qty { width: 80px; } .w-unit { width: 100px; } .w-price { width: 110px; } .w-disc { width: 90px; } .w-vat { width: 80px; } .w-bill { width: 120px; } .w-total { width: 110px; } .w-del { width: 40px; }
.lines td.line-total { padding-top: 14px; }
.totals { display: flex; justify-content: flex-end; margin-top: 12px; }
.totals-table th { text-align: left; padding: 6px 16px 6px 0; font-weight: 600; } .totals-table td { padding: 6px 0 6px 16px; text-align: right; white-space: nowrap; }
.totals-table tr.cv th, .totals-table tr.cv td { border-top: 1px solid var(--line); padding-top: 10px; }
.save-status { font-size: 12px; color: var(--green); } .save-status.pending { color: var(--muted); } .save-status.error { color: var(--red); }

/* Productkiezer */
.modal { position: fixed; inset: 0; background: rgba(41,41,41,.45); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 50; }
.modal[hidden] { display: none; }
.modal-box { background: var(--white); border-radius: 12px; width: 100%; max-width: 720px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; padding: 20px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-box input[type=search] { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 12px; }
.picker-list { overflow: auto; }
.picker-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 8px 4px; font-weight: 600; }
.picker-item { display: grid; grid-template-columns: 1fr auto; width: 100%; text-align: left; font: inherit; background: none; border: none; border-radius: 6px; padding: 8px; cursor: pointer; color: var(--black); }
.picker-item:hover { background: var(--bg); }
.pi-name { font-weight: 500; } .pi-price { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pi-desc { grid-column: span 2; font-size: 12px; color: var(--muted); }

/* Login */
.login-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; }
.login-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 36px 32px 28px; width: 100%; max-width: 380px; box-shadow: 0 8px 32px rgba(0, 0, 0, .06); }
.login-card h1 { text-align: center; margin-bottom: 22px; font-size: 17px; color: var(--muted); font-weight: 500; }
.login-card .wm.big { margin-bottom: 4px; }
.login-body .app-foot { margin: 20px 0 0; padding: 0; text-align: center; max-width: none; }
/* Woordmerk op donker: volgens de huisstijl wordt "speak" oranje en "up" wit */
:root[data-theme="dark"] .wm { color: var(--orange); } :root[data-theme="dark"] .wm .up { color: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm { color: var(--orange); } :root:not([data-theme="light"]) .wm .up { color: #FFFFFF; } }

/* Correcties */
.card > textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.kv td:first-child { padding-right: 16px; }

/* CRM */
.crm-grid { grid-template-columns: 3fr 2fr; align-items: start; }
@media (max-width: 1000px) { .crm-grid { grid-template-columns: 1fr; } }
.head-grid { grid-template-columns: 2fr 2fr 2fr; }
.mt-s { margin-top: 6px; }
.center { text-align: center; }
code { font-size: 12px; background: var(--bg); padding: 2px 6px; border-radius: 4px; }
.btn.active { background: var(--black); color: var(--white); border-color: var(--black); }
.inline-form { display: inline; }
.badge.kind-lead { background: var(--t-blue-bg); color: var(--t-blue-fg); } .badge.kind-prospect { background: var(--t-orange-bg); color: var(--t-orange-fg); }
.badge.kind-klant { background: var(--t-green-bg); color: var(--green); } .badge.kind-partner { background: var(--t-yellow-bg); color: var(--t-yellow-fg); } .badge.kind-leverancier { background: var(--t-grey-bg); color: var(--muted); }
.badge.stage-nieuw { background: var(--t-grey-bg); color: var(--muted); } .badge.stage-gekwalificeerd { background: var(--t-blue-bg); color: var(--t-blue-fg); }
.badge.stage-offerte { background: var(--t-orange-bg); color: var(--t-orange-fg); } .badge.stage-onderhandeling { background: var(--t-yellow-bg); color: var(--t-yellow-fg); }
.badge.stage-gewonnen { background: var(--t-green-bg); color: var(--green); } .badge.stage-verloren { background: var(--t-red-bg); color: var(--red); }
.badge.kind { background: var(--bg); color: var(--muted); font-weight: 500; }
tr.overdue td:first-child { color: var(--red); font-weight: 600; } tr.done { opacity: .55; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { background: var(--well); border-radius: 10px; padding: 10px; min-height: 320px; border-top: 4px solid var(--line); }
.kanban-col.over { background: var(--t-orange-bg); }
.kanban-col.stage-gekwalificeerd { border-top-color: var(--t-blue-fg); } .kanban-col.stage-offerte { border-top-color: var(--orange); }
.kanban-col.stage-onderhandeling { border-top-color: var(--yellow); } .kanban-col.stage-gewonnen { border-top-color: var(--green); } .kanban-col.stage-verloren { border-top-color: var(--red); }
.kanban-head { display: flex; justify-content: space-between; align-items: baseline; }
.kanban-sum { margin-bottom: 10px; }
.kanban-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; text-decoration: none; cursor: grab; }
.kanban-card:hover { border-color: var(--black); } .kanban-card.dragging { opacity: .5; }
.kc-title { font-weight: 600; } .kc-company { font-size: 13px; color: var(--muted); } .kc-meta { font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kc-foot { margin-top: 4px; }

/* Activiteiten / tijdlijn */
.activity-form { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.activity-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.activity-row select, .activity-row input:not([type=checkbox]) { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.activity-row input[name=subject] { flex: 1; min-width: 200px; }
.activity-form textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; } label.inline input { margin: 0; width: auto; }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tl-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); }
.tl-item.open .tl-icon { background: var(--t-orange-bg); color: var(--t-orange-fg); } .tl-item.overdue .tl-icon { background: var(--t-red-bg); color: var(--red); }
.tl-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-text { white-space: pre-wrap; font-size: 13px; margin: 4px 0; }
.tl-actions { display: flex; gap: 2px; align-items: flex-start; }

/* Rollen, alleen-lezen, funnels */
.readonly-bar { background: var(--t-yellow-bg); color: var(--t-yellow-fg); text-align: center; font-size: 13px; padding: 6px; }
fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
fieldset[disabled] { opacity: .85; }
.badge.role-beheerder { background: var(--t-blue-bg); color: var(--t-blue-fg); } .badge.role-verkoper { background: var(--t-green-bg); color: var(--green); } .badge.role-lezer { background: var(--t-grey-bg); color: var(--muted); }
.sep { display: inline-block; width: 12px; }
.h-input { font: inherit; font-weight: 700; font-size: 16px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; width: 260px; }
.h-input:hover, .h-input:focus { border-color: var(--line); background: var(--white); }
.funnel-title { display: flex; align-items: center; gap: 10px; }
.stages-table input:not([type=color]):not([type=radio]), .stages-table select { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; }
.stages-table input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; }
.stages-table td.drag { cursor: grab; color: var(--faint); width: 24px; }
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 200px 1fr 120px; gap: 12px; align-items: center; }
.funnel-bar-wrap { background: var(--bg); border-radius: 6px; height: 28px; }
.funnel-bar { height: 100%; border-radius: 6px; min-width: 4px; transition: width .3s; }
.funnel-num { text-align: right; }
@media (max-width: 800px) { .funnel-row { grid-template-columns: 1fr; gap: 4px; } .funnel-num { text-align: left; } }

.channel-row { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.tpl-select { max-width: 200px; }
.dict-btn.recording { background: var(--t-red-bg); border-color: var(--red); color: var(--red); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.35); } 50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); } }
.dict-status.error { color: var(--red); } .dict-status.ok { color: var(--green); }
.ai-status.error { color: var(--red); } .ai-status.ok { color: var(--green); } .ai-status.busy { color: var(--muted); }
.ai-tasks { border: 1px dashed var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: var(--hover); }
.ai-task { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; margin: 6px 0; font-weight: 400; }
.ai-task-subject { padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; } .ai-task-subject:hover, .ai-task-subject:focus { border-color: var(--line); background: var(--white); outline: none; }
.ai-task select, .ai-task input[type=datetime-local] { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; }
.ai-undo { background: none; border: none; cursor: pointer; font: inherit; }
.ai-model-select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; max-width: 180px; }
.partner-block { border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px 0; background: var(--hover); }
.partner-block h2 { font-size: 14px; margin-bottom: 8px; }
.stat-row-4 { grid-template-columns: repeat(4, 1fr); }
.dropdown-menu .menu-link { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--black); }
.dropdown-menu .menu-link:hover { background: var(--bg); }
.dropdown-menu .menu-note { padding: 6px 10px 4px; max-width: 260px; }

/* Acquisitie */
.badge.pstatus-nieuw { background: var(--t-grey-bg); color: var(--muted); } .badge.pstatus-geen_gehoor { background: var(--t-yellow-bg); color: var(--t-yellow-fg); }
.badge.pstatus-terugbellen { background: var(--t-orange-bg); color: var(--t-orange-fg); } .badge.pstatus-interesse { background: var(--t-green-bg); color: var(--green); }
.badge.pstatus-geen_interesse { background: var(--t-red-bg); color: var(--red); } .badge.pstatus-geconverteerd { background: var(--t-blue-bg); color: var(--t-blue-fg); } .badge.pstatus-afgesloten { background: var(--t-grey-bg); color: var(--muted); }
.bulk-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.bulk-bar select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.call-card { border-top: 4px solid var(--orange); }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 12px; }
.result-opt { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.result-opt:has(input:checked) { border-color: var(--orange); background: var(--t-orange-bg); }
.table-scroll { overflow-x: auto; }
@media (max-width: 800px) { .result-grid { grid-template-columns: 1fr; } }
.result-opt input { width: auto; margin: 0; display: inline-block; flex: 0 0 auto; }
@media (max-width: 1400px) { .nav-links a { padding: 8px 8px; font-size: 13px; } .brand-sub { display: none; } .nav-right .btn { padding: 8px 10px; } }
.log-card { border-left: 4px solid var(--t-blue-fg); }
.nav-links { flex-wrap: wrap; }
@media (max-width: 900px) { .nav-right { width: 100%; justify-content: space-between; } .page-head h1 { font-size: 22px; } .actions .btn { padding: 6px 10px; font-size: 13px; } .stat-row-4 { grid-template-columns: repeat(2, 1fr); } .result-grid { grid-template-columns: 1fr; } }

/* Offertesjablonen (beheer) en nieuw bedrijf vanuit nieuwe offerte */
.tight { margin: 4px 0 8px 18px; padding: 0; } .tight li { margin: 2px 0; }
.tpl-page .card-head label.check { margin: 0; font-weight: 600; }
.img-field { display: flex; flex-direction: column; gap: 6px; }
.img-row { display: flex; gap: 12px; align-items: center; }
.img-thumb { width: 96px; height: 60px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: var(--black); }
.img-row label { margin: 0; }
.sticky-actions { position: sticky; bottom: 0; background: var(--card); padding: 12px; border-top: 1px solid var(--line); margin-top: 16px; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; }
.or-new { margin: 16px 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 8px; }
.or-new label.check.big { font-size: 15px; margin: 0; }
.new-company { margin-top: 12px; }
.inline-2 { display: flex; gap: 8px; } .inline-2 input.short { width: 40%; }
.tpl-form textarea { font-family: inherit; }

.app-foot { max-width: 1200px; margin: 24px auto 32px; padding: 0 20px; font-size: 12px; color: var(--muted); text-align: right; }

/* Producten: onderdelen */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: inherit; text-decoration: none; font-size: 13px; }
.chip.active { background: var(--black); color: var(--card); border-color: var(--black); }
.chip .count { font-size: 11px; opacity: .7; }
.group-row td { background: var(--bg); padding-top: 12px; }
.inline-select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.picker-sec { font-size: 12px; font-weight: 700; padding: 14px 8px 2px; border-top: 1px solid var(--line); margin-top: 6px; }

/* Prijsindexatie */
.index-table .own-pct { width: 90px; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.index-table tr.skipped td { color: var(--faint); }
.index-table .new-once, .index-table .new-month, .index-table .new-year { color: var(--green); font-weight: 600; }
.table.small td { padding: 3px 6px; font-size: 12px; }

/* Reden bij faseverandering */
.reason-box { max-width: 520px; }
.reason-form label { display: block; margin: 10px 0; font-weight: 500; }
.reason-form textarea, .reason-form select { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; margin-top: 4px; }
.stage-reason { padding: 10px 12px; background: var(--t-orange-bg); border-left: 4px solid var(--orange); border-radius: 6px; }
.stage-log td { vertical-align: top; } .nowrap { white-space: nowrap; }

/* Rechten per gebruiker */
.perm-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 8px 0 16px; }
.perm-group { background: var(--bg); border-radius: 8px; padding: 12px 14px; }
.perm-group h3 { margin: 0 0 8px; font-size: 14px; } .perm-group h3 .small-link { margin-left: 8px; font-weight: 400; }
.perm-group label.check { margin: 6px 0; font-weight: 400; align-items: flex-start; }
h2.mt { margin-top: 20px; }

/* Nieuwe deals */
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; min-width: 150px; }
.stat-n { font-size: 22px; font-weight: 700; } .stat-l { color: var(--muted); font-size: 12px; }
.table-scroll { overflow-x: auto; } .matrix th, .matrix td { padding: 4px 6px; font-size: 12px; }

/* API */
pre.code { background: var(--black); color: var(--bg); padding: 12px 14px; border-radius: 8px; overflow-x: auto; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.token-new { border-left: 4px solid var(--orange); }

/* Beheer: tegels en tabbladen */
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tile { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color .1s, box-shadow .1s; }
.tile:hover { border-color: var(--orange); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.tile-title { font-weight: 600; margin-bottom: 4px; }
.tile-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.tile-status { margin-top: 8px; font-size: 12px; color: var(--muted); }
.tile-status::before { content: "●"; margin-right: 6px; color: var(--faint); }
.tile-status.ok::before { color: var(--green); } .tile-status.warn::before { color: var(--orange); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 0 0 16px; }
.tabs .tab { font: inherit; font-size: 14px; background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 12px; cursor: pointer; color: var(--muted); margin-bottom: -1px; }
.tabs .tab.active { color: var(--black); border-bottom-color: var(--orange); font-weight: 600; }
.tab-panel[hidden] { display: none; }

.funnel-closed { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }

.tl-head { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 6px; }

.badge.sent-positief { background: var(--t-green-bg); color: var(--green); } .badge.sent-neutraal { background: var(--t-grey-bg); color: var(--muted); }
.badge.sent-gemengd { background: var(--t-orange-bg); color: var(--t-orange-fg); } .badge.sent-negatief { background: var(--t-red-bg); color: var(--red); }
.support-summary { background: var(--bg); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; } .support-summary p { margin: 4px 0; } .support-summary ul { margin: 4px 0 4px 18px; }

/* Themakeuze */
.theme-btn { font: inherit; font-size: 15px; line-height: 1; background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--muted); }
.theme-btn:hover { border-color: var(--line); color: var(--black); }
.theme-opts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.theme-opt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 400; }
.theme-opt input { width: auto; margin: 0; } .theme-opt:has(input:checked) { border-color: var(--orange); background: var(--t-orange-bg); }

/* Zoekveld in de bovenbalk */
.nav-search input { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--black); width: 150px; }
.nav-search input:focus { width: 220px; background: var(--white); }
@media (max-width: 1400px) { .nav-search input { width: 120px; } }
@media (max-width: 900px) { .nav-search { flex: 1; } .nav-search input { width: 100%; } }

/* Help */
.help-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.help-toc { position: sticky; top: 76px; } .help-toc ol { margin: 0 0 12px 18px; padding: 0; } .help-toc li { margin: 4px 0; } .help-toc a { text-decoration: none; }
.help-body section { scroll-margin-top: 76px; } .help-body ol, .help-body ul { margin: 6px 0 10px 20px; } .help-body li { margin: 4px 0; }
.help-q { border-left: 3px solid var(--orange); padding: 6px 12px; background: var(--t-orange-bg); border-radius: 0 6px 6px 0; margin: 10px 0; }
.help-link { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--t-orange-bg); color: var(--t-orange-fg); font-size: 12px; font-weight: 700; text-decoration: none; margin-left: 6px; vertical-align: middle; }
.help-link:hover { background: var(--orange); color: var(--white); }
.stage-reason .help-link, #send-form .help-link, .flash .help-link { float: right; margin-left: 8px; }
@media (max-width: 900px) { .help-grid { grid-template-columns: 1fr; } .help-toc { position: static; } }

/* Help: zoeken met suggesties */
.help-search { position: relative; margin-bottom: 20px; max-width: 720px; }
.help-search input { width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--black); }
.help-suggest { position: absolute; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 30; max-height: 420px; overflow: auto; }
.help-hit { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.help-hit:hover, .help-hit.active { background: var(--bg); }
.help-hit-title { font-weight: 600; } .help-hit-kind { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.help-hit-text { font-size: 13px; color: var(--muted); margin-top: 2px; } .help-hit-text mark { background: var(--t-yellow-bg); color: inherit; padding: 0 2px; border-radius: 3px; }
.help-flash { animation: helpflash 1.6s ease-out; } @keyframes helpflash { 0% { background: var(--t-yellow-bg); } 100% { background: transparent; } }

/* Bovenbalk: zoeksuggesties */
.nav-search { position: relative; }
.nav-suggest { position: absolute; right: 0; top: 100%; margin: 6px 0 0; padding: 6px; list-style: none; width: 360px; max-width: 90vw; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 40; max-height: 70vh; overflow: auto; }
.nav-hit { display: grid; grid-template-columns: 64px 1fr; gap: 2px 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.nav-hit:hover, .nav-hit.active { background: var(--bg); }
.nav-hit-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 3px; }
.nav-hit-title { font-weight: 600; } .nav-hit-sub { grid-column: 2; color: var(--muted); font-size: 12px; }
.nav-hit-more { grid-column: 1 / -1; color: var(--t-orange-fg); font-weight: 500; }
@media (max-width: 900px) { .nav-suggest { left: 0; right: 0; width: auto; } }

.perf-table th, .perf-table td { white-space: nowrap; } .perf-table tfoot th { text-align: right; border-top: 2px solid var(--line); } .perf-table tfoot th:first-child { text-align: left; }
.perf-table tr.active-row td { background: var(--t-orange-bg); }

.filters input[hidden], .filters select[hidden] { display: none; }

/* Smalle schermen: bovenbalk laten omlopen, brede tabellen binnen de kaart scrollen, kopvelden van de offerte onder elkaar */
@media (max-width: 900px) {
  .nav-right { flex-wrap: wrap; gap: 8px 12px; }
  .card { overflow-x: auto; }
  .head-grid { grid-template-columns: 1fr; }
  .lines { min-width: 640px; }
}

/* Grid-kolommen mogen smaller worden dan hun inhoud (voorkomt overloop op smalle schermen) */
.crm-grid > *, .grid-2 > *, .grid-3 > *, .help-grid > * { min-width: 0; }
input, select, textarea { max-width: 100%; }

/* Confetti bij een gewonnen deal */
.confetti-wrap { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: opacity .6s; }
.confetti-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.confetti-text { position: relative; font-size: clamp(32px, 7vw, 72px); font-weight: 800; color: var(--orange); letter-spacing: -0.02em; text-shadow: 0 4px 24px rgba(0,0,0,.25); animation: confetti-pop .7s cubic-bezier(.2,1.4,.4,1) both; pointer-events: auto; cursor: pointer; }
.confetti-wrap.uit { opacity: 0; }
@keyframes confetti-pop { from { transform: scale(.3) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .confetti-text { animation: none; } }