:root {
  --bg: #ffffff;
  --panel: #fafbfc;
  --panel-2: #f3f4f6;
  --border: #e5e7eb;
  --logo-gray: #c1c0c0;
  --bg-dark: #23201c;
  --text: #111828;
  --text-dim: #6b7280;
  --accent: #fdbf00;
  --accent-2: #e5ac00;
  --warn: #d97706;
  --ok: #059669;
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.08);
  --ok-soft: rgba(5, 150, 105, 0.08);
  --diff-added: rgba(5, 150, 105, 0.12);
  --diff-removed: rgba(220, 38, 38, 0.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--panel-2);
}
a { color: var(--text); text-decoration: none; }
button { font-family: inherit; }
.loading { padding: 32px; color: var(--text-dim); text-align: center; }

/* ============== Layout ============== */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar {
  background: var(--bg-dark);
  color: var(--bg);
  border-bottom: 3px solid var(--accent);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  flex-shrink: 0;
}
.brand {
  font-family: "Open Sans";
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
}
.brand span { color: var(--accent); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  color: var(--logo-gray);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.nav a:hover { color: var(--bg); background: rgba(255,255,255,0.06); }
.nav a.active { color: var(--bg-dark); background: var(--accent); }
.user-area { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.user-area .who { color: var(--logo-gray); }
.user-area .who strong { color: var(--bg); font-weight: 700; }
.btn-logout {
  border: 1px solid var(--logo-gray);
  background: transparent;
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-logout:hover { background: var(--accent); color: var(--bg-dark); border-color: var(--accent); }

/* Page-specific quick action in the dark topbar (today: Projecten →
   "+ Nieuwe configuratie"). Solid yellow against the dark bar so it
   reads as the primary action without competing with the brand or the
   nav-tabs. */
.btn-header-action {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn-header-action:hover {
  background: #e5ac00;          /* matches --accent-2 from configurator */
  border-color: #e5ac00;
}
.btn-header-action:active { transform: translateY(1px); }
.btn-header-action:focus-visible {
  outline: 2px solid var(--bg);
  outline-offset: 2px;
}

.main {
  flex: 1;
  padding: 24px 32px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.crumbs {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { margin: 0 6px; }

.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}
.page-header .spacer { flex: 1; }

/* ============== Login ============== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
}
.login-card {
  background: var(--bg);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  border-top: 4px solid var(--accent);
}
.login-card h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
}
.login-card p { margin: 0 0 24px; color: var(--text-dim); font-size: 13px; }
.login-card label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}
.login-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  margin-top: 4px;
}
.login-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(253,191,0,0.2);
}
.login-card .err {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 12px;
}

/* ============== Filters / Toolbar ============== */
.toolbar {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.toolbar input[type="text"],
.toolbar input[type="date"],
.toolbar select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
}
.toolbar input[type="text"] { min-width: 220px; flex: 1; }
.toolbar input:focus, .toolbar select:focus {
  outline: none; border-color: var(--accent);
}
.toolbar .label { font-size: 12px; color: var(--text-dim); font-weight: 700; }
.toolbar .reset {
  background: transparent; border: none;
  color: var(--text-dim); font-weight: 700;
  cursor: pointer; padding: 6px 8px;
}
.toolbar .reset:hover { color: var(--text); }

/* ============== Tables ============== */
.table-wrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table thead th {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  padding: 10px 12px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.table thead th .sort-arrow {
  font-size: 10px;
  margin-left: 4px;
  color: var(--logo-gray);
}
.table thead th.active .sort-arrow { color: var(--accent); }
.table tbody tr {
  border-top: 1px solid var(--border);
  transition: background 0.1s;
}
.table tbody tr:hover { background: var(--panel-2); }
.table tbody tr.expanded { background: var(--panel-2); }
.table td { padding: 10px 12px; vertical-align: middle; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.actions { white-space: nowrap; text-align: right; }
.row-chevron {
  display: inline-block;
  width: 16px;
  text-align: center;
  color: var(--text-dim);
  transition: transform 0.15s;
  margin-right: 4px;
  cursor: pointer;
}
tr.expanded .row-chevron { transform: rotate(90deg); }

.versions-row td { padding: 0; background: var(--panel-2); }
.versions-list { padding: 8px 24px 12px; }
.version-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  font-size: 12px;
  border-bottom: 1px dashed var(--border);
}
.version-item:last-child { border-bottom: none; }
/* The previous multi-config chip-list rules used to live here. They were
   removed because admin found the per-row product/dimensions wall too
   noisy. Same info is one click away via the "Openen"-knop, which boots
   the configurator with its own configuratiezijbalk. */

/* Per-version Spoedlevering toggle. One on every version-row, between
   the version-meta and the Openen/PDF buttons. Compact so the row stays
   readable; mirrors the customer-side price-bar toggle visually so the
   two controls feel like the same control across both UIs. */
.admin-spoed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  font-size: 11px;
  user-select: none;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.admin-spoed-toggle:hover { border-color: var(--accent, #fdbf00); }
.admin-spoed-toggle input { display: none; }
.admin-spoed-toggle .switch {
  width: 28px;
  height: 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.admin-spoed-toggle .switch::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--text-dim);
  border-radius: 50%;
  top: 1px;
  left: 1px;
  transition: transform 0.15s, background 0.15s;
}
.admin-spoed-toggle input:checked + .switch {
  background: var(--accent, #fdbf00);
  border-color: var(--accent, #fdbf00);
}
.admin-spoed-toggle input:checked + .switch::after {
  transform: translateX(12px);
  background: var(--bg-dark, #23201c);
}
.admin-spoed-toggle .label {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.admin-spoed-toggle .label small {
  color: var(--text-dim);
  font-weight: 700;
  margin-left: 4px;
}
.admin-spoed-toggle input:disabled + .switch { opacity: 0.5; }
.admin-spoed-status {
  font-size: 11px;
  color: var(--text-dim);
  min-width: 12px;
  font-variant-numeric: tabular-nums;
}
.version-tag {
  font-family: "Open Sans"; font-weight: 700;
  background: var(--bg-dark); color: var(--accent);
  padding: 2px 8px; border-radius: 4px; font-size: 11px;
}
.version-meta { color: var(--text-dim); flex: 1; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.badge.count {
  background: var(--bg-dark); color: var(--accent);
  padding: 2px 7px; border-radius: 4px; font-size: 10px;
}
.badge.status-new      { background: #dbeafe; color: #1e40af; }
.badge.status-reviewed { background: #fef3c7; color: #92400e; }
.badge.status-quoted   { background: #fde68a; color: var(--bg-dark); }
.badge.status-closed   { background: var(--panel-2); color: var(--text-dim); }

.btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--panel); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--bg-dark);
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover { color: var(--text); background: var(--panel-2); }
.btn.sm { padding: 4px 8px; font-size: 11px; }
.btn.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============== Status select ============== */
select.status-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg);
}

/* ============== Pagination ============== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-dim);
}
.pagination button { padding: 4px 10px; }
.pagination .page-info { padding: 0 12px; }

/* ============== Detail page ============== */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.detail-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.detail-card h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; font-size: 13px; }
.kv .k { color: var(--text-dim); }
.kv input, .kv textarea {
  font-family: inherit; font-size: 13px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px; background: transparent;
  width: 100%;
}
.kv input:hover, .kv textarea:hover { border-color: var(--border); background: var(--panel-2); }
.kv input:focus, .kv textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 2px rgba(253,191,0,0.15);
}

/* ============== Diff modal ============== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--bg); border-radius: 12px;
  width: 100%; max-width: 1100px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px 28px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
  position: relative;
}
.modal h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: transparent; border: none;
  font-size: 22px; cursor: pointer;
  color: var(--text-dim);
}
.modal-close:hover { color: var(--text); }
.diff-summary {
  background: var(--panel-2); border-radius: 6px;
  padding: 10px 12px; margin: 12px 0 18px;
  font-size: 12px; color: var(--text-dim);
}
.diff-summary strong { color: var(--text); }
.diff-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.diff-col h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim);
}
.diff-section {
  border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px;
}
.diff-section h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim);
}
.diff-row {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 6px 12px; font-size: 12px; padding: 2px 4px;
  border-radius: 4px;
}
.diff-row.added   { background: var(--diff-added); }
.diff-row.removed { background: var(--diff-removed); text-decoration: line-through; }
.diff-row .k { color: var(--text-dim); font-weight: 700; }
.diff-row .v { font-variant-numeric: tabular-nums; }

/* ============== Price-details modal (per-version) ============== */
/* Toont de opgeslagen prijsopbouw van één versie. Hetzelfde sectie-
   skelet als de configurator's oude in-bar breakdown:
   Materiaal → Snij/zaag → Openingen → Afwerking → Toeslagen → Marge
   → Kortingen → Subtotaal/BTW/Totaal. */
.price-details-modal { max-width: 720px; }
.price-details-meta {
  font-size: 12px; color: var(--text-dim);
  background: var(--panel-2); border-radius: 6px;
  padding: 8px 12px; margin: 8px 0 16px;
  font-variant-numeric: tabular-nums;
}
.price-details-body {
  display: flex; flex-direction: column; gap: 14px;
}
.price-details-cfg {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg);
}
.price-details-cfg-head {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.price-details-cfg-head .cfg-name {
  font-weight: 700; color: var(--text); font-size: 14px;
}
.price-details-cfg-head .cfg-meta {
  color: var(--text-dim); font-size: 12px; flex: 1;
}
.price-details-cfg-head .cfg-meta .qty {
  background: var(--panel-2); color: var(--text);
  padding: 1px 6px; border-radius: 4px; font-weight: 700;
  margin-left: 4px;
}
.price-details-cfg-head .cfg-total {
  font-weight: 700; color: var(--text); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.price-details-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 4px; column-gap: 16px;
  font-size: 12px;
}
.price-details-grid .k { color: var(--text); }
.price-details-grid .v {
  color: var(--text); font-variant-numeric: tabular-nums; text-align: right;
}
.price-details-grid .section-row {
  color: var(--accent-2, #b58a00);
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  font-size: 11px; padding-top: 4px;
}
.price-details-grid strong { color: var(--text); font-weight: 700; }
.price-details-project-total {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 4px; column-gap: 16px;
  padding: 12px 14px;
  background: var(--panel-2);
  border-radius: 8px;
  font-size: 13px;
}
.price-details-project-total.single { background: transparent; padding: 4px 14px 0; }
.price-details-project-total .k { color: var(--text); }
.price-details-project-total .v {
  color: var(--text); font-variant-numeric: tabular-nums; text-align: right;
}
.price-details-project-total .k-total {
  font-weight: 700; padding-top: 4px;
  border-top: 1px solid var(--border);
}
.price-details-project-total .v-total {
  font-weight: 700; padding-top: 4px;
  border-top: 1px solid var(--border);
}
.price-details-empty {
  padding: 24px 16px; text-align: center;
  color: var(--text-dim); font-size: 13px;
  display: flex; flex-direction: column; gap: 6px;
}
.price-details-empty .hint { font-size: 11px; opacity: 0.85; }

@media (max-width: 600px) {
  .price-details-modal { max-width: 100%; padding: 18px 16px; }
  .price-details-cfg-head { gap: 4px; }
  .price-details-cfg-head .cfg-meta { flex-basis: 100%; }
  .price-details-cfg-head .cfg-total { margin-left: auto; }
}

/* ============== STP-export dropdown (multi-config picker) ============== */
/* Anchored popover under the STP-button. Opens when the version has
   multiple configurations so admin can pick which one to export. */
.stp-dropdown {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px 0;
  min-width: 240px;
  max-width: 360px;
  font-size: 12px;
  color: var(--text);
}
.stp-dropdown-head {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.stp-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.1s;
}
.stp-dropdown-item:hover,
.stp-dropdown-item:focus-visible {
  background: var(--panel-2);
  outline: none;
}
.stp-dropdown-item .stp-cfg-name { font-weight: 700; color: var(--text); }
.stp-dropdown-item .stp-cfg-sub  {
  color: var(--text-dim); font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ============== Audit log ============== */
.audit-row { font-size: 12px; }
.audit-action { font-weight: 700; color: var(--text); }
.audit-payload {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--text-dim);
  white-space: pre-wrap; word-break: break-word;
}

/* ============== Utility ============== */
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(35,32,28,0.2);
  border-top-color: var(--bg-dark);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============== Customer picker (Nieuwe configuratie modal) ============== */
.modal.new-config-modal { max-width: 520px; }
.modal-subtitle {
  margin: 0 0 16px;
  color: var(--text-dim);
  font-size: 13px;
}
.combobox {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}
.combobox input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  background: var(--bg);
  color: var(--text);
}
.combobox input[type="text"]::placeholder { color: var(--text-dim); }
.combobox-list {
  max-height: 280px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.combobox-option {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 4px;
  margin: 0 4px;
}
.combobox-option:hover,
.combobox-option.active {
  background: var(--panel-2);
}
.combobox-option.selected {
  background: rgba(253, 191, 0, 0.18);
  border: 1px solid var(--accent);
}
.combobox-option .name { font-weight: 700; }
.combobox-option .meta {
  color: var(--text-dim);
  font-size: 11px;
}
.combobox-option .badge.count { margin-left: auto; }
.combobox-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}

.selected-info {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--panel-2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.selected-info strong { color: var(--text); }

.escape-hatch {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
}
.escape-hatch a {
  color: var(--text);
  text-decoration: underline;
  cursor: pointer;
}
.escape-hatch a:hover { color: var(--accent-2); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.timeline { font-size: 12px; }
.timeline-item {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  display: grid; grid-template-columns: 110px 1fr;
  gap: 8px;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item .when { color: var(--text-dim); }
.timeline-item .what strong { color: var(--text); }


/* ============================================================
   Product-form layout
   ------------------------------------------------------------
   Vervangt de oude flat .kv-grid in openProductModal door een
   gestructureerde stack van fieldsets per logische groep
   (Algemeen, Afmetingen, Validatie, Afwerking, Prijs). Inputs
   krijgen altijd een zichtbare border zodat labels niet meer
   los lijken te zweven boven/naast hun veld.
   ============================================================ */
.product-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 16px 0 8px;
}

.pf-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px 18px;
  margin: 0;
  background: var(--panel-2, #fafafa);
}
.pf-section > legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.pf-section .pf-help {
  margin: -2px 0 12px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
}

.pf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr; }
}

.pf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.pf-field.pf-span2 { grid-column: 1 / -1; }
/* `display: flex` overruled de [hidden]-attr default. Expliciete
   regel zodat `pf-field` met hidden-attr écht weg is uit de layout. */
.pf-field[hidden] { display: none; }

.pf-label {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.2px;
}

.pf-field input[type="text"],
.pf-field input[type="number"],
.pf-field input:not([type]),
.pf-field input[type="email"],
.pf-field textarea,
.pf-field select {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg, #fff);
  width: 100%;
  color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.pf-field input:hover,
.pf-field textarea:hover,
.pf-field select:hover {
  border-color: var(--text-dim);
}
.pf-field input:focus,
.pf-field textarea:focus,
.pf-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(253, 191, 0, 0.18);
}
.pf-field textarea {
  resize: vertical;
  min-height: 56px;
}
.pf-field .pf-hint {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
  margin-top: 2px;
}
.pf-field.pf-mono input,
.pf-field input.pf-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* Checkbox-row inside a label sits horizontally with the label
   text on the right of the box. */
.pf-field.pf-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding: 10px 0 4px;
}
.pf-field.pf-checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  margin: 0;
}
.pf-field.pf-checkbox .pf-label { font-size: 13px; }

/* Multi-select chip row used by 'Beschikbare afwerkingen'. */
.pf-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg, #fff);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.pf-chip:hover { border-color: var(--text-dim); }
.pf-chip input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--accent);
  margin: 0;
}
.pf-chip input:checked + span {
  font-weight: 700;
  color: var(--text);
}
.pf-chip:has(input:checked) {
  border-color: var(--accent);
  background: rgba(253, 191, 0, 0.12);
}

/* Modal-wide footer separator so the action buttons read as a
   committed boundary instead of floating below the last field. */
.modal.product-modal .modal-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* ============================================================
   Nieuwe-config modal — stap 1 keuze-grid
   ------------------------------------------------------------
   Twee gestapelde card-knoppen: "Nieuwe klant" (geel/primair,
   bovenaan) en "Bestaande klant" (neutraal). Geeft de admin
   een snelle binaire keuze voordat de echte data-velden in
   stap 2 verschijnen.
   ============================================================ */
.ncfg-choice-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 4px;
}
.ncfg-choice {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 4px 16px;
  padding: 18px 20px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg, #fff);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.ncfg-choice:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.ncfg-choice:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(253, 191, 0, 0.25);
}
.ncfg-choice .ncfg-choice-icon {
  grid-row: 1 / 3;
  font-size: 28px;
  text-align: center;
  line-height: 1;
}
.ncfg-choice strong {
  font-size: 15px;
  font-weight: 700;
}
.ncfg-choice span:not(.ncfg-choice-icon) {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Selected-variant — gele rand + lichtgele achtergrond, gezet door
   _markChoice() zodra de gebruiker een kaart heeft gekozen. Beide
   kaarten starten neutraal; de selectie volgt pas op een actieve klik. */
.ncfg-choice.ncfg-choice-selected {
  border-color: var(--accent);
  background: rgba(253, 191, 0, 0.10);
  box-shadow: 0 4px 14px rgba(253, 191, 0, 0.18);
}
.ncfg-choice.ncfg-choice-selected:hover {
  background: rgba(253, 191, 0, 0.18);
  box-shadow: 0 6px 16px rgba(253, 191, 0, 0.2);
}
.ncfg-choice.ncfg-choice-selected strong {
  color: var(--text);
}

/* Behoud van de oude `ncfg-choice-primary` stijl voor backwards-compat
   ingeval er nog elementen mee gerenderd worden tijdens hot-reload —
   hetzelfde uiterlijk als selected, identieke regels hieronder. */
.ncfg-choice.ncfg-choice-primary {
  border-color: var(--accent);
  background: rgba(253, 191, 0, 0.10);
}
.ncfg-choice.ncfg-choice-primary:hover {
  background: rgba(253, 191, 0, 0.18);
  box-shadow: 0 6px 16px rgba(253, 191, 0, 0.2);
}
.ncfg-choice.ncfg-choice-primary strong {
  color: var(--text);
}

.modal.new-config-modal .modal-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================================
   Analytics-tab (Fase 1)
   KPI-cards bovenaan, line-chart in een detail-card eronder,
   en twee tabellen naast elkaar voor top-products + top-events.
   ============================================================ */
.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.analytics-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.analytics-kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.analytics-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.analytics-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1000px) {
  .analytics-tables { grid-template-columns: 1fr; }
}

/* ============================================================
   Analytics-funnel — horizontale staven met sessies per stap.
   Top-stap = volle breedte, vervolgstappen schalen naar pctOfTop.
   ============================================================ */
.analytics-funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analytics-funnel-row {
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  align-items: center;
  gap: 12px;
}
@media (max-width: 800px) {
  .analytics-funnel-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.analytics-funnel-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.analytics-funnel-bar-wrap {
  background: var(--panel-2);
  border-radius: 6px;
  height: 32px;
  overflow: hidden;
  position: relative;
}
.analytics-funnel-bar {
  background: linear-gradient(90deg, var(--accent) 0%, #f5b000 100%);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  transition: width 0.4s ease;
  min-width: 4px;
}
.analytics-funnel-bar-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--bg-dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.analytics-funnel-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ============================================================
   Productinteresse tree — Familie → Sub-familie → SKU
   ============================================================ */
.family-tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.family-tree-fam {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--bg);
}
.family-tree-fam > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
}
.family-tree-fam > summary::-webkit-details-marker { display: none; }
.family-tree-fam > summary::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--text-dim);
  transition: transform 0.15s;
}
.family-tree-fam[open] > summary::before { transform: rotate(90deg); }
.family-tree-name { font-weight: 700; flex: 1; }
.family-tree-counts {
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.family-tree-sub {
  margin: 6px 0 6px 18px;
  padding: 6px 10px;
  background: var(--panel);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.family-tree-sub > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 2px 0;
}
.family-tree-sub > summary::-webkit-details-marker { display: none; }
.family-tree-sub > summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: var(--text-dim);
  transition: transform 0.15s;
}
.family-tree-sub[open] > summary::before { transform: rotate(90deg); }
.family-tree-skus { margin-top: 8px; font-size: 12px; }

/* ============================================================
   Producten-tab: type-badge uniform + 1-regelig
   ============================================================ */
.product-type-badge {
  display: inline-block;
  white-space: nowrap;
  background: var(--panel-2);
  color: var(--text);
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Distincte kleur-bubbels per familie. Toekomstig 'bars' / 'tubes'
   krijgt z'n eigen regel zonder dat de basistypografie wijzigt. */
.product-type-badge.product-type-plates {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: rgba(5, 150, 105, 0.3);
}
.product-type-badge.product-type-ral-coated {
  background: rgba(217, 119, 6, 0.10);
  color: var(--warn);
  border-color: rgba(217, 119, 6, 0.3);
}
.product-type-badge.product-type-profiles {
  background: rgba(59, 130, 246, 0.10);
  color: #2563eb;
  border-color: rgba(59, 130, 246, 0.3);
}
.product-type-badge.product-type-bars {
  background: rgba(147, 51, 234, 0.10);
  color: #7c3aed;
  border-color: rgba(147, 51, 234, 0.3);
}
.product-type-badge.product-type-tubes {
  background: rgba(20, 184, 166, 0.10);
  color: #0d9488;
  border-color: rgba(20, 184, 166, 0.3);
}