/* Sales tool — product styles on top of the Nunki design system.
   Chrome (top bar, cards, pills, buttons, tables) follows the Nunki handover;
   the finder-specific pieces (filter panel, chips, suggest list, count card) are below. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--leading-normal);
}
h1, h2, h3 { font-family: var(--font-heading); color: var(--text-strong); letter-spacing: var(--tracking-tight); }
button { font-family: inherit; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-muted); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.muted { color: var(--text-faint); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface-card) 86%, transparent);
  backdrop-filter: var(--blur-panel);
  border-bottom: var(--border-hairline);
}
.topbar-inner {
  max-width: 1500px; margin: 0 auto; padding: 10px var(--container-pad);
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-name {
  font: var(--weight-semibold) var(--fs-sm) var(--font-heading);
  color: var(--text-strong); letter-spacing: var(--tracking-tight); white-space: nowrap;
}
.page-nav { display: flex; gap: 4px; }
.page-nav a { padding: 7px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-body); font-size: var(--fs-sm); }
.page-nav a:hover { background: var(--surface-muted); }
.page-nav a.is-active { background: var(--surface-muted); color: var(--text-strong); font-weight: var(--weight-semibold); }
.topbar-right { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.user-chip { display: flex; align-items: center; gap: 8px; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 999px; background: var(--gradient-brand);
  color: var(--text-on-brand); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: var(--weight-bold);
}
.user-name { font-size: var(--fs-sm); color: var(--text-strong); }
.logout-form { display: inline; }
.link-button { background: none; border: none; padding: 0; cursor: pointer; color: var(--text-link); font-size: var(--fs-sm); text-decoration: underline; }

.page { max-width: 1500px; margin: 0 auto; padding: var(--space-6) var(--container-pad) var(--space-16); }

/* ---------------------------------------------------------------- auth */
.auth-body { background: var(--surface-page); }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-6); }
.auth-card {
  width: min(440px, 100%); background: var(--surface-card);
  border: var(--border-hairline); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); padding: var(--space-10) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.auth-logo { height: 34px; width: auto; align-self: flex-start; }
.auth-eyebrow { font-size: var(--fs-overline); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-overline); color: var(--aqua-400); margin-top: var(--space-2); }
.auth-title { margin: 0; font-size: var(--fs-h2); }
.auth-help { margin: 0; font-size: var(--fs-sm); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.auth-footer { font-size: var(--fs-xs); color: var(--text-faint); }
.google-button { min-height: 44px; }

.alert { border-radius: var(--radius-sm); padding: 10px 14px; font-size: var(--fs-sm); }
.alert-info { background: var(--aqua-50); color: var(--aqua-700); border: 1px solid var(--aqua-200); }
.alert-error { background: #FDEBEB; color: #8C2B2B; border: 1px solid #F2C4C4; }

/* ---------------------------------------------------------------- buttons */
.button-primary {
  display: inline-block; text-decoration: none;
  background: var(--aqua-400); color: var(--text-on-brand); border: none;
  border-radius: var(--radius-sm); padding: 11px 20px;
  font-size: var(--fs-sm); font-weight: var(--weight-semibold); cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.button-primary:hover { box-shadow: var(--shadow-brand); }
.button-primary:active { transform: translateY(1px); }
.button-primary[aria-disabled="true"], .button-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.button-secondary {
  background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: 11px 20px; font-size: var(--fs-sm); cursor: pointer;
}
.button-secondary:hover { background: var(--aqua-50); border-color: var(--aqua-300); color: var(--aqua-700); }
.button-small {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 6px 12px; font-size: var(--fs-xs); cursor: pointer; color: var(--text-strong);
}
.button-small:hover { border-color: var(--aqua-400); background: var(--aqua-50); }
.button-small:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------------------------------------------------------------- pills & chips */
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-pill); padding: 2px 8px; font-size: 10.5px; font-weight: var(--weight-semibold); white-space: nowrap; }
.pill-warn { background: #FBE7C6; color: #7A5410; }
.pill-muted { background: var(--surface-muted); color: var(--text-muted); font-weight: var(--weight-medium); }
.pill-fixed { background: var(--aqua-100); color: var(--aqua-800); }

.kind-chip {
  border: var(--border-hairline); background: var(--surface-card);
  border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer;
  font-size: var(--fs-xs); font-weight: var(--weight-medium); color: var(--text-muted); font-family: inherit;
}
.kind-chip:hover { background: var(--surface-muted); color: var(--text-strong); }
.kind-chip.is-active { background: var(--aqua-100); border-color: var(--aqua-300); color: var(--aqua-700); font-weight: var(--weight-semibold); }

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--aqua-50); border: 1px solid var(--aqua-200); color: var(--aqua-800);
  border-radius: var(--radius-pill); padding: 3px 6px 3px 8px; font-size: var(--fs-xs); font-weight: var(--weight-semibold);
}
.chip-version { font-size: 10px; color: var(--aqua-600); font-weight: var(--weight-medium); }
.chip-desc { font-weight: var(--weight-regular); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.chip-remove { border: none; background: none; color: var(--aqua-700); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.chip-remove:hover { color: var(--danger); }

/* ---------------------------------------------------------------- page header + count */
.page-header { margin-bottom: var(--space-6); display: flex; justify-content: space-between; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.page-header h1 { margin: 4px 0 8px; font-size: var(--fs-h2); }
.page-intro { max-width: 68ch; margin: 0; font-size: var(--fs-sm); }
.eyebrow { font-size: var(--fs-overline); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--aqua-400); }
.crumb { color: var(--aqua-600); text-decoration: none; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.crumb:hover { text-decoration: underline; }

.count-card {
  min-width: 220px; background: var(--surface-card); border: var(--border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: 2px;
}
.count-number { font-family: var(--font-heading); font-size: var(--fs-h2); color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.count-number-row { display: flex; align-items: center; gap: 10px; }
.count-spinner { display: none; }
.count-label-busy { display: none; color: var(--aqua-600); }
.count-card.is-loading .count-number { opacity: 0.35; }
.count-card.is-loading .count-spinner { display: inline-block; }
.count-card.is-loading .count-label-idle { display: none; }
.count-card.is-loading .count-label-busy { display: inline; }

.spinner {
  width: 18px; height: 18px; border-radius: 999px; flex: none;
  border: 2px solid var(--aqua-100); border-top-color: var(--aqua-500);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.count-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); font-weight: var(--weight-semibold); }
.count-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }

/* ---------------------------------------------------------------- finder layout */
.finder-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 1000px) { .finder-layout { grid-template-columns: 1fr; } }

.filter-card, .results-card, .section-card {
  background: var(--surface-card); border: var(--border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.filter-card { padding: var(--space-4) var(--space-5) var(--space-5); position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; }
.filter-group { padding: var(--space-3) 0 var(--space-4); border-bottom: 1px solid var(--surface-muted); display: flex; flex-direction: column; gap: 10px; }
.filter-group:last-of-type { border-bottom: none; }
.filter-group h2 { margin: 0 0 2px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); font-family: var(--font-sans); font-weight: var(--weight-semibold); }
.filter-actions { display: flex; justify-content: flex-end; padding-top: var(--space-3); }

.field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); font-weight: var(--weight-semibold); color: var(--text-muted); min-width: 0; }
.search-field input { font-size: var(--fs-base); padding: 10px 12px; }
.field input[type="text"], .field input[type="search"], .field input[type="number"], .suggest input {
  width: 100%; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: var(--fs-sm); font-family: inherit; color: var(--text-strong); background: var(--surface-card); font-weight: var(--weight-regular);
}
.field input:focus-visible, .suggest input:focus-visible { border-color: var(--aqua-400); }
.field-hint { margin: 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.45; }
.range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toggle-list { display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-body); cursor: pointer; }
.check input { accent-color: var(--aqua-500); width: 15px; height: 15px; }

.province-details summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--weight-semibold); }
.province-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding-top: 8px; }
.province-grid .check { font-size: var(--fs-xs); }

.segmented { display: flex; gap: 4px; background: var(--surface-muted); border-radius: var(--radius-pill); padding: 3px; width: fit-content; }
.segmented .kind-chip { border: none; background: transparent; }
.segmented .kind-chip.is-active { background: var(--surface-card); box-shadow: var(--shadow-xs); }

/* suggest dropdown */
.suggest { position: relative; }
.suggest-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  max-height: 320px; overflow-y: auto;
}
.suggest-item { display: grid; grid-template-columns: 44px 64px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-xs); }
.suggest-item:hover, .suggest-item.is-active { background: var(--aqua-50); }
.suggest-version { color: var(--text-faint); }
.suggest-code { font-family: var(--font-mono); color: var(--text-strong); font-weight: var(--weight-semibold); }
.suggest-desc { color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-twin { color: var(--aqua-600); font-size: 10.5px; white-space: nowrap; }
.suggest-empty { padding: 10px; font-size: var(--fs-xs); color: var(--text-faint); }

.nace-input-row { display: flex; gap: 6px; align-items: stretch; }
.nace-input-row .suggest { flex: 1; min-width: 0; }
.nace-input-row .button-small { white-space: nowrap; }

/* ---------------------------------------------------------------- modal + NACE tree */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(14, 20, 26, 0.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: var(--space-5);
}
.modal {
  width: min(440px, 100%); max-height: 86vh; overflow: hidden;
  background: var(--surface-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column;
}
.modal-wide { width: min(820px, 100%); height: 86vh; }
.modal-header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px 10px; font-weight: var(--weight-semibold); color: var(--text-strong); font-family: var(--font-heading);
}
.modal-header .segmented { margin-left: auto; }
.modal-close { background: none; border: none; font-size: 22px; color: var(--text-faint); cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--text-strong); }
.modal-body { padding: 0 18px 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.modal-search {
  width: 100%; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: var(--fs-sm); font-family: inherit; color: var(--text-strong);
}
.modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px 16px; border-top: var(--border-hairline); }
.modal-selected { font-size: var(--fs-xs); color: var(--text-muted); }

.nace-tree, .nace-tree ul { list-style: none; margin: 0; padding: 0; }
.nace-tree { overflow-y: auto; flex: 1; min-height: 0; border: var(--border-hairline); border-radius: var(--radius-sm); }
.nace-tree ul { padding-left: 22px; }
.nace-node { display: grid; grid-template-columns: 22px 78px 1fr auto 34px; gap: 8px; align-items: center; padding: 5px 8px; border-bottom: 1px solid var(--surface-muted); font-size: var(--fs-xs); }
.nace-node:hover { background: var(--surface-page); }
.nace-node.is-selected { background: var(--aqua-50); }
.nace-toggle { border: none; background: none; cursor: pointer; color: var(--text-faint); font-size: 12px; width: 22px; height: 22px; border-radius: 4px; }
.nace-toggle:hover { background: var(--surface-muted); color: var(--text-strong); }
.nace-toggle.is-open { transform: rotate(90deg); }
.nace-toggle[disabled] { visibility: hidden; }
.nace-code { font-family: var(--font-mono); color: var(--text-strong); font-weight: var(--weight-semibold); }
.nace-desc { color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nace-desc small { color: var(--aqua-600); margin-left: 6px; }
.nace-count { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.nace-count small { color: var(--text-faint); }
.nace-add { border: 1px solid var(--border-subtle); background: var(--surface-card); border-radius: 6px; width: 30px; height: 26px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--aqua-700); }
.nace-add:hover { background: var(--aqua-50); border-color: var(--aqua-400); }
.nace-add.is-added { background: var(--aqua-400); color: #fff; border-color: var(--aqua-400); }
.nace-loading { padding: 8px 12px; font-size: var(--fs-xs); color: var(--text-faint); }

/* ---------------------------------------------------------------- map picker */
.map-row { display: flex; align-items: center; gap: 10px; }
.modal-map { width: min(1100px, 100%); height: 88vh; }
.modal-body-map { padding-bottom: 0; }
.map-canvas { flex: 1; min-height: 0; border: var(--border-hairline); border-radius: var(--radius-sm); background: #EEF3F5; overflow: hidden; }
.modal-actions { display: flex; gap: 10px; }
.leaflet-container { font-family: var(--font-sans); background: #EEF3F5; }
.leaflet-container.is-drawing, .leaflet-container.is-drawing .leaflet-interactive { cursor: crosshair !important; }
.leaflet-tooltip.mun-tip { background: var(--surface-card); border: var(--border-hairline); border-radius: 6px; color: var(--text-strong); font-size: 12px; box-shadow: var(--shadow-sm); padding: 3px 8px; }
.leaflet-tooltip.mun-tip::before { display: none; }
.map-legend { position: absolute; right: 10px; bottom: 10px; z-index: 500; background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 11.5px; color: var(--text-muted); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------- results */
.results-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline); flex-wrap: wrap; }
.results-title { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--text-strong); font-weight: var(--weight-semibold); }
.results-desc { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--weight-regular); }
.results-card { position: relative; }
.results-card.is-loading { cursor: progress; }
.results-card.is-loading .results-table tbody { opacity: 0.35; transition: opacity var(--dur-base) var(--ease-out); }
.results-scroll { position: relative; min-height: 160px; }
.results-loading {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding-top: 56px;
  gap: 10px; font-size: var(--fs-sm); color: var(--aqua-700); font-weight: var(--weight-semibold); pointer-events: none;
}
.results-loading .spinner { width: 20px; height: 20px; }
.results-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; opacity: 0; transition: opacity var(--dur-fast); }
.results-progress::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--aqua-400); animation: slide 1.1s ease-in-out infinite; }
.results-card.is-loading .results-progress { opacity: 1; }
@keyframes slide { to { left: 100%; } }

.table-scroll { overflow-x: auto; }
.overview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.results-table { min-width: 960px; }
.overview-table th {
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint);
  padding: 10px 12px; border-bottom: var(--border-hairline); white-space: nowrap; font-weight: var(--weight-semibold);
}
.overview-table th[data-sort] { cursor: pointer; user-select: none; }
.overview-table th[data-sort]:hover { color: var(--text-strong); }
.overview-table th.is-sorted { color: var(--aqua-700); }
.overview-table th.is-sorted::after { content: " ↓"; }
.overview-table th.is-sorted.is-asc::after { content: " ↑"; }
.overview-table td { padding: 9px 12px; border-bottom: 1px solid var(--surface-muted); vertical-align: top; }
.overview-table tbody tr:hover td { background: var(--surface-page); }
.overview-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compact-table td, .compact-table th { padding: 6px 10px; }
.cell-mono { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.cell-sub { display: block; font-size: 11.5px; color: var(--text-faint); font-family: var(--font-mono); }
.cell-nace { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.cell-unknown { color: var(--text-faint); font-style: italic; }
.table-link { color: var(--text-link); text-decoration: none; }
.table-link:hover { text-decoration: underline; }
.company-link { color: var(--text-strong); font-weight: var(--weight-semibold); text-decoration: none; }
.company-link:hover { color: var(--aqua-700); text-decoration: underline; }
.empty-note { color: var(--text-muted); font-size: var(--fs-sm); text-align: center; padding: var(--space-6) !important; }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4); }
.pager-info { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------- lists */
.period-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.period-pill { padding: 5px 12px; border-radius: 999px; border: var(--border-hairline); background: var(--surface-card); color: var(--text-muted); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.period-pill:hover { background: var(--surface-muted); }
.period-pill.is-active { background: var(--aqua-100); border-color: var(--aqua-300); color: var(--aqua-700); font-weight: var(--weight-semibold); }
.cell-snippet { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12.5px; }
.status-concept { background: var(--surface-muted); color: var(--text-muted); }
.status-bezig { background: var(--azure-50); color: var(--azure-700); }
.status-afgewerkt { background: var(--turquoise-50); color: var(--turquoise-700); }
.status-gearchiveerd { background: #FBE7C6; color: #7A5410; }
.list-heading { min-width: 0; flex: 1; }
.list-title { outline: none; border-bottom: 1px dashed transparent; }
.list-title:hover, .list-title:focus { border-bottom-color: var(--aqua-300); }
.list-desc { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--text-body); outline: none; border-bottom: 1px dashed transparent; min-height: 1.4em; max-width: 80ch; }
.list-desc:hover, .list-desc:focus { border-bottom-color: var(--aqua-300); }
.list-desc:empty::before { content: attr(data-placeholder); color: var(--text-faint); }
.list-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.list-search { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--fs-sm); font-family: inherit; min-width: 200px; }
.results-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.funnel { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.funnel-step { background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 12px 18px; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.funnel-n { font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.funnel-label { font-size: var(--fs-xs); color: var(--text-muted); }
.funnel-arrow { align-self: center; color: var(--text-faint); font-size: 18px; }
.funnel-ai { border-style: dashed; opacity: 0.7; }
.funnel-ja { border-color: var(--turquoise-200); background: var(--turquoise-50); }
.funnel-nee { border-color: #F2E1C4; background: #FFF9EF; }
.verdict { display: inline-flex; gap: 2px; background: var(--surface-muted); border-radius: var(--radius-pill); padding: 2px; }
.verdict button { border: none; background: transparent; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; color: var(--text-muted); font-family: inherit; }
.verdict button:hover { background: var(--surface-card); color: var(--text-strong); }
.verdict button.is-ja { background: var(--turquoise-500); color: #fff; font-weight: var(--weight-semibold); }
.verdict button.is-nee { background: #E9A23B; color: #35240A; font-weight: var(--weight-semibold); }
.verdict-by { display: block; font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.notes { width: 100%; min-height: 110px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 12px; font-family: inherit; font-size: var(--fs-sm); color: var(--text-strong); resize: vertical; }

/* ---------------------------------------------------------------- AI steps */
.steps h2 { margin-bottom: var(--space-3); }
.step-card { display: flex; gap: var(--space-5); align-items: flex-start; justify-content: space-between; border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: 10px; background: var(--surface-page); }
.step-soon { opacity: 0.6; border-style: dashed; }
.step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.step-title { font-weight: var(--weight-semibold); color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
.step-desc { font-size: var(--fs-sm); color: var(--text-muted); max-width: 78ch; }
.step-status { font-size: var(--fs-sm); color: var(--text-body); }
.step-status strong { color: var(--text-strong); }
.step-status .blocked { color: #8C2B2B; }
.step-actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.step-progress { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.step-progress .bar { flex: 1; height: 8px; background: var(--surface-muted); border-radius: 999px; overflow: hidden; max-width: 420px; }
.step-progress .fill { height: 100%; width: 0; background: var(--aqua-400); transition: width 0.4s var(--ease-out); }
.step-progress-text { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.ai-badge { display: inline-block; font-size: 9.5px; font-weight: var(--weight-bold); color: var(--violet-700); background: var(--violet-50); border-radius: 4px; padding: 1px 4px; margin-left: 5px; vertical-align: middle; }
.conf-high { background: var(--turquoise-50); color: var(--turquoise-700); }
.conf-medium { background: var(--azure-50); color: var(--azure-700); }
.conf-low { background: #FBE7C6; color: #7A5410; }
.sub-h2 { margin-top: var(--space-5) !important; }

/* ---------------------------------------------------------------- AI step cards + modal */
.steps-intro { margin: -6px 0 14px; font-size: var(--fs-sm); color: var(--text-muted); max-width: 90ch; }
.step-question { font-style: italic; color: var(--text-body); }
.step-actions-col { flex-direction: column; align-items: flex-end; gap: 8px; }
.step-btn-row { display: flex; gap: 8px; }
.step-link-row { font-size: var(--fs-xs); color: var(--text-faint); }
.step-link-row .link-button { font-size: var(--fs-xs); color: var(--text-muted); text-decoration: none; }
.step-link-row .link-button:hover { color: var(--aqua-700); text-decoration: underline; }
.plain-view { font-family: inherit; font-size: var(--fs-sm); background: var(--aqua-50); border: 1px solid var(--aqua-200); color: var(--aqua-800); border-radius: var(--radius-sm); padding: 10px 12px; white-space: pre-wrap; margin: 0; font-weight: var(--weight-regular); }
.step-result { border-top: 1px dashed var(--border-subtle); padding-top: 8px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.step-result-head { font-size: var(--fs-sm); }
.step-counts-label { font-size: var(--fs-xs); color: var(--text-faint); align-self: center; }
.ans-click { border: none; cursor: pointer; font-family: inherit; }
.ans-click:hover { outline: 2px solid var(--aqua-300); }
.active-filter { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; font-size: var(--fs-xs); background: var(--aqua-50); border: 1px solid var(--aqua-200); color: var(--aqua-800); border-radius: 999px; padding: 3px 10px; width: fit-content; }
.step-add { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.step-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.step-dep { font-size: var(--fs-xs); color: var(--aqua-700); }
.modal-step { height: 90vh; }
.modal-body-scroll { overflow-y: auto; }
.modal-body textarea, .modal-body select, .modal-body input[type="text"] { width: 100%; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; font-family: inherit; font-size: var(--fs-sm); color: var(--text-strong); background: var(--surface-card); font-weight: var(--weight-regular); }
.fields-table input, .fields-table select { width: 100%; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 5px 7px; font-family: inherit; font-size: var(--fs-xs); }
.fields-table td { padding: 4px 6px; }
.advanced summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-muted); }
.schema-view { font-family: var(--font-mono); font-size: 11px; background: var(--surface-muted); border-radius: var(--radius-sm); padding: 10px; white-space: pre-wrap; max-height: 260px; overflow: auto; margin: 6px 0 0; }
.ans { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: var(--weight-semibold); white-space: nowrap; cursor: default; }
.ans-ja { background: var(--turquoise-50); color: var(--turquoise-700); }
.ans-nee { background: #FBE7C6; color: #7A5410; }
.ans-onzeker, .ans-onbekend { background: var(--surface-muted); color: var(--text-muted); }
.ans-other { background: var(--azure-50); color: var(--azure-700); }
.ans-fout { background: #FDEBEB; color: #8C2B2B; }
.ans-link { font-size: 10px; color: var(--text-link); margin-left: 4px; text-decoration: none; }
.ans-extract { font-size: 11.5px; color: var(--text-body); max-width: 240px; white-space: normal; }
.ans-extract b { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* ---------------------------------------------------------------- list table: column filters + detail rows */
.th-filter { display: block; margin-top: 4px; width: 100%; max-width: 150px; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 2px 4px; font-size: 11px; font-family: inherit; text-transform: none; letter-spacing: 0; color: var(--text-body); background: var(--surface-card); font-weight: var(--weight-regular); }
.detail-toggle { display: block; border: none; background: none; color: var(--text-link); font-size: 11px; padding: 2px 0 0; cursor: pointer; font-family: inherit; }
.detail-toggle:hover { text-decoration: underline; }
.detail-row td { background: var(--surface-page); padding: 10px 14px 14px 30px; }
.detail-box { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.detail-block { min-width: 220px; max-width: 420px; font-size: 12.5px; color: var(--text-body); }
.detail-title { font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: 4px; }
.detail-line { line-height: 1.5; word-break: break-word; }
.detail-line b { color: var(--text-muted); font-weight: var(--weight-medium); }

/* ---------------------------------------------------------------- selection bar */
.sel-col { width: 28px; }
.sel-col input, .row-select { accent-color: var(--aqua-500); width: 15px; height: 15px; cursor: pointer; }
.selection-bar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: 10px var(--space-5); background: var(--aqua-50); border-top: 1px solid var(--aqua-200); border-bottom: 1px solid var(--aqua-200); font-size: var(--fs-sm); }
.selection-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.selection-bar select { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 7px 10px; font-family: inherit; font-size: var(--fs-sm); background: var(--surface-card); }
tr.is-selected td { background: var(--aqua-50) !important; }
.selection-progress { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 260px; }
.selection-progress .bar { flex: 1; height: 8px; background: var(--surface-card); border: 1px solid var(--aqua-200); border-radius: 999px; overflow: hidden; }
.selection-progress .fill { display: block; height: 100%; width: 0; background: var(--aqua-400); transition: width 0.4s var(--ease-out); }
.selection-msg { font-size: var(--fs-sm); color: var(--text-strong); }
.selection-msg.is-done { color: var(--turquoise-700); font-weight: var(--weight-semibold); }

/* ---------------------------------------------------------------- company page */
.company-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: var(--space-5); margin-bottom: var(--space-5); align-items: start; }
@media (max-width: 1000px) { .company-grid { grid-template-columns: 1fr; } }
.section-card { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); }
.section-card h2 { margin: 0 0 var(--space-4); font-size: var(--fs-h4); display: flex; align-items: center; gap: 10px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin: 0; font-size: var(--fs-sm); }
.kv dt { color: var(--text-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--weight-semibold); padding-top: 2px; }
.kv dd { margin: 0; color: var(--text-strong); }