/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:          #0a0e1a;
  --bg2:         #0f1629;
  --bg-card:     #141d35;
  --bg-hover:    #1a2540;
  --bg-input:    #0d1526;
  --border:      #1e2d4a;
  --border-hover:#2a3d5e;
  --primary:     #3b82f6;
  --primary-h:   #2563eb;
  --primary-dim: rgba(59,130,246,.15);
  --text:        #f1f5f9;
  --text-2:      #94a3b8;
  --text-muted:  #475569;
  --success:     #10b981;
  --success-dim: rgba(16,185,129,.15);
  --warning:     #f59e0b;
  --warning-dim: rgba(245,158,11,.15);
  --danger:      #ef4444;
  --danger-dim:  rgba(239,68,68,.15);
  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 4px 24px rgba(0,0,0,.4);
  --transition:  .15s ease;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
/* Doorklik-links (o.a. ordernummers in tabellen): herkenbaar en klikbaar */
.link { color: var(--primary); cursor: pointer; }
.link:hover { text-decoration: underline; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }

/* ── Navbar ────────────────────────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 56px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0;
  padding: 0 24px;
}
.navbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px;
  color: var(--text);
  margin-right: 32px;
  white-space: nowrap;
}
.navbar-nav {
  display: flex; align-items: center; gap: 2px;
  flex: 1;
}
.nav-link {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--text); background: var(--bg-hover); }
.nav-link.active { color: var(--primary); background: var(--primary-dim); }
.navbar-end { display: flex; align-items: center; gap: 8px; }
.nav-gebruiker { color: var(--text-2); font-size: 13px; margin-right: 4px; cursor: pointer; }
.nav-gebruiker:hover { color: var(--text); }

/* ── Icon Button ───────────────────────────────────────────────────────────── */
.btn-icon {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: color var(--transition), background var(--transition);
}
.btn-icon:hover { color: var(--text); background: var(--bg-hover); }

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT SYSTEM — global page container & composition classes
   Use these on every new page. Do not set padding/max-width elsewhere.

   .main           — universal page container (set on <main id="main">)
   .page-header    — flex row: title+subtitle left, action button right
   .page-title     — h1 inside .page-header
   .page-subtitle  — small description below .page-title
   .toolbar        — search + filter bar, sits between header and table
   .card-table     — white-bordered card wrapper for <table>
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Main Layout ───────────────────────────────────────────────────────────── */
.main {
  margin: 56px auto 0;
  min-height: calc(100vh - 56px);
  max-width: 1400px;
  padding: 36px 40px;
  box-sizing: border-box;
}

/* ── Page Header ────────────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.page-title   { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; }
.page-subtitle{ font-size: 13px; color: var(--text-2); margin: 4px 0 0; }

/* ── Toolbar (search + filters row) ─────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.toolbar .search-input { width: 300px; }

/* ── Card Table (table inside a bordered card) ───────────────────────────────── */
.card-table {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary); color: #fff;
}
.btn-primary:hover { background: var(--primary-h); }
.btn-ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-hover); }
.btn-danger {
  background: var(--danger-dim); color: var(--danger);
  border: 1px solid rgba(239,68,68,.3);
}
.btn-danger:hover { background: rgba(239,68,68,.25); }
.btn-warning {
  background: var(--warning-dim); color: var(--warning);
  border: 1px solid rgba(245,158,11,.3);
}
.btn-warning:hover { background: rgba(245,158,11,.25); }
.btn-success {
  background: var(--success-dim); color: var(--success);
  border: 1px solid rgba(16,185,129,.3);
}
.btn-success:hover { background: rgba(16,185,129,.25); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn svg { flex-shrink: 0; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.badge-success  { background: var(--success-dim); color: var(--success); }
.badge-warning  { background: var(--warning-dim); color: var(--warning); }
.badge-danger   { background: var(--danger-dim);  color: var(--danger);  }
.badge-primary  { background: var(--primary-dim); color: var(--primary); }
.badge-muted    { background: rgba(71,85,105,.2); color: var(--text-2);  }

/* Parcel-logo in badges/knoppen (i.p.v. speld-emoji) */
.parcel-icon { width: 13px; height: 13px; margin-right: 5px; flex-shrink: 0; border-radius: 50%; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card-hover {
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform .1s ease;
}
.card-hover:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.input, .textarea, .select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  transition: border-color var(--transition);
  outline: none;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}
.textarea { resize: vertical; min-height: 72px; }
.select { appearance: none; cursor: pointer; }
.label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px;
}
.form-group { margin-bottom: 16px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }
.input-with-icon { padding-left: 34px; }

/* ── Progress Bar ──────────────────────────────────────────────────────────── */
.progress-bar {
  height: 5px; border-radius: 100px;
  background: var(--border);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%; border-radius: 100px;
  background: var(--primary);
  transition: width .3s ease;
}
.progress-bar-fill.success { background: var(--success); }

/* ── Phase Dots (sidebar) ──────────────────────────────────────────────────── */
.phase-dots {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px;
}
.phase-dot-sm {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border);
}
.phase-dot-sm.done    { background: var(--success); }
.phase-dot-sm.current { background: var(--primary); }

/* ── Dashboard ─────────────────────────────────────────────────────────────── */
.dashboard {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 56px);
  flex-direction: column; gap: 12px; text-align: center;
  padding: 40px;
}
.dashboard h1 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.dashboard p  { color: var(--text-2); font-size: 15px; }

/* ── Overview Page ─────────────────────────────────────────────────────────── */
.overview { }
.overview-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.overview-title { font-size: 22px; font-weight: 700; }
.overview-actions { display: flex; align-items: center; gap: 10px; }

.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.summary-card .s-value { font-size: 28px; font-weight: 700; margin-bottom: 2px; }
.summary-card .s-label { font-size: 12px; color: var(--text-2); font-weight: 500; }
.s-value.blue   { color: var(--primary); }
.s-value.green  { color: var(--success); }
.s-value.orange { color: var(--warning); }
.s-value.red    { color: var(--danger);  }

.filters-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.filter-pill {
  padding: 5px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 500;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-pill:hover  { border-color: var(--border-hover); color: var(--text); }
.filter-pill.active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }

.phase-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-2);
  font-size: 12px; font-weight: 500;
  padding: 5px 14px;
  cursor: pointer;
  outline: none;
  appearance: none;
  transition: border-color var(--transition), color var(--transition);
}
.phase-select:focus, .phase-select:hover { border-color: var(--border-hover); color: var(--text); }

.search-wrap {
  position: relative; display: flex; align-items: center;
  margin-left: auto;
}
.search-wrap svg { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }
.search-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text);
  font-size: 13px;
  padding: 6px 14px 6px 34px;
  width: 300px;
  outline: none;
  transition: border-color var(--transition), width var(--transition);
}
.search-input:focus { border-color: var(--primary); width: 360px; }

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform .1s;
  display: flex; flex-direction: column; gap: 14px;
}
.product-card:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
  transform: translateY(-2px);
}
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pc-naam { font-weight: 600; font-size: 15px; line-height: 1.3; }
.pc-fase    { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }
.pc-subfase { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pc-progress { display: flex; flex-direction: column; gap: 6px; }
.pc-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-2); }
.empty-state {
  padding: 48px 64px; text-align: center; color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty-state svg { opacity: .3; }
.empty-state p { font-size: 14px; }

/* ── Product Table ─────────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.product-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.product-table thead tr {
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.product-table th {
  padding: 10px 16px; text-align: left;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; user-select: none;
}
.product-table th.sortable { cursor: pointer; }
.product-table th.sortable:hover { color: var(--text-2); }
.product-table th.sort-active { color: var(--primary); }
.th-actions { width: 90px; text-align: right; }
.product-table td { padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.product-table tbody tr:last-child td { border-bottom: none; }
.product-row { cursor: pointer; transition: background var(--transition); }
.product-row:hover { background: var(--bg-hover); }
.pt-naam-link { font-weight: 600; color: var(--text); }
.product-row:hover .pt-naam-link { color: var(--primary); }
.pt-fase   { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.pt-subfase{ font-size: 12px;   color: var(--text-muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-progress { display: flex; align-items: center; gap: 8px; }
.pt-progress-bar {
  width: 80px; height: 6px; background: var(--bg-hover);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.pt-pct { font-size: 12px; color: var(--text-2); min-width: 30px; }
.pt-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pt-empty { padding: 0; }
.tbl-btn {
  width: 28px; height: 28px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  transition: color var(--transition), background var(--transition);
  opacity: 0;
}
.product-row:hover .tbl-btn { opacity: 1; }
.tbl-btn:hover { background: var(--bg2); color: var(--text); }
.tbl-btn--danger:hover { background: var(--danger-dim); color: var(--danger); }
.tbl-btn--active { color: var(--warning); opacity: 1; }
.tbl-btn--active:hover { background: var(--warning-dim); color: var(--warning); }

/* ── Detail Page ───────────────────────────────────────────────────────────── */
.detail-layout {
  display: flex;
  min-height: calc(100vh - 56px);
}
.detail-sidebar {
  width: 280px; min-width: 280px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding: 28px 20px;
  display: flex; flex-direction: column; gap: 24px;
  position: sticky; top: 56px; height: calc(100vh - 56px);
  overflow-y: auto;
}
.detail-main {
  flex: 1; padding: 36px 0;
  max-width: 800px;
}
.sidebar-naam {
  font-size: 17px; font-weight: 700; line-height: 1.3;
  word-break: break-word;
}
.sidebar-omschrijving {
  font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.5;
}
.sidebar-status { margin-top: 2px; }

.sidebar-section { display: flex; flex-direction: column; gap: 8px; }
.sidebar-section-title {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.phase-progress-list {
  display: flex; flex-direction: column; gap: 6px;
}
.ppl-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.ppl-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: transparent;
}
.ppl-dot.done    { background: var(--success); border-color: var(--success); }
.ppl-dot.current { background: var(--primary); border-color: var(--primary); }
.ppl-label { color: var(--text-2); }
.ppl-label.done    { color: var(--success); }
.ppl-label.current { color: var(--text); font-weight: 600; }

.sidebar-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

/* ── Sidebar Phase Nav ─────────────────────────────────────────────────────── */
.snav { display: flex; flex-direction: column; gap: 2px; }
.snav-phase {}

.snav-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.snav-header:hover { background: var(--bg-hover); }
.snav-header.expanded { background: var(--bg-hover); }

.snav-circle {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 10px; font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  transition: all var(--transition);
}
.snav-circle.done    { background: var(--success); border-color: var(--success); color: #fff; }
.snav-circle.current { background: var(--primary); border-color: var(--primary); color: #fff; }

.snav-title { font-size: 12px; font-weight: 500; color: var(--text-2); flex: 1; }
.snav-header.done .snav-title   { color: var(--text-muted); }
.snav-header.current .snav-title { color: var(--text); font-weight: 600; }

.snav-count { font-size: 10px; color: var(--text-muted); }
.snav-count.done { color: var(--success); }
.snav-chevron { font-size: 10px; color: var(--text-muted); transition: transform var(--transition); }
.snav-chevron.open { transform: rotate(180deg); }

.snav-subfases { padding: 2px 0 4px 30px; display: flex; flex-direction: column; gap: 1px; }
.snav-sub {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--transition);
}
.snav-sub:hover { background: var(--bg-hover); }
.snav-sub.active { background: var(--primary-dim); }

.snav-sub-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  background: transparent;
  transition: all var(--transition);
}
.snav-sub-dot.done   { background: var(--success); border-color: var(--success); }
.snav-sub-dot.active { background: var(--primary); border-color: var(--primary); }

.snav-sub-naam { font-size: 11.5px; color: var(--text-2); line-height: 1.3; }
.snav-sub-naam.done { color: var(--text-muted); text-decoration: line-through; }
.snav-sub.active .snav-sub-naam { color: var(--primary); font-weight: 500; }

/* Scroll-to highlight */
.subfase-row.snav-highlight .subfase-header {
  background: var(--primary-dim);
  border-radius: var(--radius-sm);
  transition: background .15s;
}

/* Artikel link */
.artikel-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--primary);
  padding: 4px 0;
}
.artikel-link:hover { text-decoration: underline; }

/* ── Phase Stepper ─────────────────────────────────────────────────────────── */
.stepper { display: flex; flex-direction: column; }

.stepper-phase { margin-bottom: 4px; position: relative; }
.stepper-phase::before {
  content: '';
  position: absolute; left: 15px; top: 46px;
  width: 2px; bottom: 0;
  background: var(--border);
  z-index: 0;
}
.stepper-phase:last-child::before { display: none; }

.stepper-phase-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  position: relative;
}

.phase-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
  border: 2px solid var(--border);
  background: var(--bg-card);
  transition: all var(--transition);
  font-size: 12px; font-weight: 700;
}
.phase-circle.done    { background: var(--success); border-color: var(--success); color: #fff; }
.phase-circle.current { background: var(--primary); border-color: var(--primary); color: #fff; }
.phase-circle.future  { color: var(--text-muted); }
.phase-circle--toggle { cursor: pointer; }
.phase-circle--toggle:hover:not(.done) { border-color: var(--success); color: var(--success); }
.phase-circle--toggle.done:hover { border-color: var(--danger); background: var(--danger); }

.phase-circle-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.stepper-phase-title { font-weight: 600; font-size: 15px; flex: 1; }
.stepper-phase-title.future { color: var(--text-2); }
.stepper-phase-badge {
  font-size: 11px; color: var(--text-muted);
  background: var(--bg-hover); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 100px;
}
.stepper-phase-badge.done { color: var(--success); background: var(--success-dim); border-color: rgba(16,185,129,.3); }

/* Productonderzoek: single text phase */
.phase-note-area {
  margin-left: 46px; margin-bottom: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.phase-note-done-btn {
  align-self: flex-start;
  padding: 5px 14px; font-size: 12px; font-weight: 500;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--text-2);
  transition: all var(--transition);
}
.phase-note-done-btn:hover { border-color: var(--success); color: var(--success); }
.phase-note-done-btn.done  { background: var(--success-dim); border-color: rgba(16,185,129,.4); color: var(--success); }

/* Sub-phases */
.subfases-list { margin-left: 46px; margin-bottom: 24px; display: flex; flex-direction: column; }

.subfase-row { border-left: 2px solid var(--border); }
.subfase-row:last-child { border-left-color: transparent; }

.subfase-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 10px 16px;
  cursor: pointer;
  user-select: none;
}
.subfase-header:hover .subfase-naam { color: var(--text); }

.subfase-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  background: var(--bg-card);
  cursor: pointer;
  z-index: 1;
  font-size: 11px; color: transparent;
}
.subfase-check:hover { border-color: var(--success); }
.subfase-check.done  { background: var(--success); border-color: var(--success); color: #fff; }
.subfase-check.current { border-color: var(--primary); }

.subfase-naam { font-size: 13.5px; color: var(--text-2); flex: 1; transition: color var(--transition); }
.subfase-naam.done { color: var(--text-muted); text-decoration: line-through; }
.subfase-naam.current { color: var(--text); font-weight: 500; }

.subfase-expand-icon {
  color: var(--text-muted); font-size: 11px;
  transition: transform var(--transition);
  padding: 4px;
}
.subfase-expand-icon.open { transform: rotate(180deg); }

.subfase-body {
  margin-left: 34px; padding: 0 0 16px 0;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
}

/* Sub-subfases */
.subsubfases { display: flex; flex-direction: column; gap: 6px; }
.subsubfase-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-2);
}
.subsubfase-check {
  width: 16px; height: 16px; border-radius: 3px;
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); color: transparent; font-size: 9px;
}
.subsubfase-check:hover  { border-color: var(--success); }
.subsubfase-check.done   { background: var(--success); border-color: var(--success); color: #fff; }
.subsubfase-naam.done { text-decoration: line-through; color: var(--text-muted); }

/* Image gallery */
.image-section { display: flex; flex-direction: column; gap: 8px; }
.image-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.image-thumb {
  position: relative; width: 80px; height: 80px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-hover);
}
.image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.image-thumb-remove {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 10px; display: none;
  align-items: center; justify-content: center;
  cursor: pointer; border: none;
}
.image-thumb:hover .image-thumb-remove { display: flex; }
.image-add-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.image-url-input {
  flex: 1; min-width: 180px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px;
  font-size: 12px; color: var(--text); outline: none;
}
.image-url-input:focus { border-color: var(--primary); }
.image-url-input::placeholder { color: var(--text-muted); }
.file-upload-label {
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500; cursor: pointer;
  background: var(--bg-hover); border: 1px solid var(--border);
  color: var(--text-2); display: flex; align-items: center; gap: 6px;
  transition: all var(--transition);
}
.file-upload-label:hover { border-color: var(--border-hover); color: var(--text); }
.file-upload-input { display: none; }

/* ── Settings Page ─────────────────────────────────────────────────────────── */
.settings-page { max-width: 780px; margin: 0 auto; }
.settings-title { font-size: 22px; font-weight: 700; margin-bottom: 28px; }
.settings-group { margin-bottom: 10px; }
.settings-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition);
}
.settings-group-header:hover { border-color: var(--border-hover); }
.settings-group-header.open { border-radius: var(--radius) var(--radius) 0 0; border-bottom-color: transparent; }
.settings-group-title { font-weight: 600; font-size: 14px; }
.settings-group-chevron { display: flex; align-items: center; }
.settings-group-chevron-icon { width: 22px; height: 22px; color: var(--text-2); transition: color var(--transition); }
.settings-group-header.open .settings-group-chevron-icon { color: var(--primary); }
.settings-group-chevron-icon .sgc-v { transition: opacity var(--transition); transform-origin: center; }
.settings-group-header.open .settings-group-chevron-icon .sgc-v { opacity: 0; }
.settings-group-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 20px;
  display: none;
}
.settings-group-body.open { display: block; }

/* Instellingen-overzicht: blokken per onderwerp met klikbare onderdelen */
.settings-menu-groep { margin-bottom: 26px; }
.settings-menu-groep-titel {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
}
.settings-menu-lijst {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.settings-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.settings-menu-item:last-child { border-bottom: none; }
.settings-menu-item:hover { background: var(--bg-hover); }
.settings-menu-item-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-menu-item-titel { font-weight: 600; font-size: 14px; }
.settings-menu-item-omschrijving { font-size: 12.5px; color: var(--text-muted); }
.settings-menu-item-pijl { color: var(--text-muted); font-size: 20px; line-height: 1; }
.settings-menu-item:hover .settings-menu-item-pijl { color: var(--primary); }

/* Instellingen-detailpagina: paginabreed */
.settings-detail-page { max-width: none; }
.settings-terug {
  display: inline-block; margin-bottom: 10px;
  font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none;
}
.settings-terug:hover { color: var(--primary); }
.settings-detail-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.settings-section { margin-bottom: 24px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-section-title {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px;
}
.settings-fase-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 8px; background: var(--bg2);
}
.settings-fase-id {
  min-width: 36px; font-size: 12px; font-weight: 700;
  color: var(--primary); padding-top: 8px;
}
.settings-fase-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.settings-subfase-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg2);
  margin-bottom: 6px;
}
.settings-subfase-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.settings-subsubfases-wrap {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px;
}
.ssfase-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 100px; font-size: 11px; color: var(--text-2);
}
.ssfase-chip-del {
  font-size: 13px; color: var(--text-muted); cursor: pointer; line-height: 1;
}
.ssfase-chip-del:hover { color: var(--danger); }
.ssfase-add {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px dashed var(--border);
  border-radius: 100px; font-size: 11px; color: var(--text-muted);
  cursor: pointer; background: transparent;
  transition: all var(--transition);
}
.ssfase-add:hover { border-color: var(--primary); color: var(--primary); }
.ssfase-add-input {
  padding: 3px 8px; border-radius: 100px; font-size: 11px;
  background: var(--bg-input); border: 1px solid var(--primary);
  color: var(--text); outline: none; width: 160px;
}

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 0;   /* onderpadding zit in de sticky .modal-actions */
  width: 100%; max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 20px; }
/* Sticky footer: knoppen blijven in beeld als de modal-inhoud scrollt, en de
   rand erboven maakt zichtbaar dat er meer inhoud onder de vouw zit. */
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  position: sticky; bottom: 0; z-index: 10;
  margin: 24px -28px 0;
  padding: 14px 28px 22px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast-wrap {
  position: fixed; bottom: 24px; right: 24px; z-index: 600;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  padding: 11px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
  animation: slideIn .2s ease; pointer-events: auto;
}
.toast.success { border-color: rgba(16,185,129,.4); color: var(--success); }
.toast.error   { border-color: rgba(239,68,68,.4);  color: var(--danger);  }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ── Confirm Dialog ────────────────────────────────────────────────────────── */
.confirm-text { color: var(--text-2); font-size: 13.5px; line-height: 1.6; margin-bottom: 4px; }

/* ── Divider ───────────────────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-2 { color: var(--text-2); }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.gap-8 { gap: 8px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.w-full { width: 100%; }

/* ── Cockpit / Dashboard ─────────────────────────────────────────────────────── */
.cockpit {
  display: flex; flex-direction: column; gap: 20px;
}
.cockpit-header {
  margin-bottom: 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cockpit-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.cockpit-subtitle { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.cockpit-tabs { display: flex; gap: 4px; flex-shrink: 0; }
.cockpit-tab {
  padding: 7px 18px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  background: none; border: none; cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.cockpit-tab:hover { color: var(--text); background: var(--bg-hover); }
.cockpit-tab.active { color: var(--primary); background: var(--primary-dim); }

/* Content area inside cockpit (below tabs) */
#cockpit-content { display: flex; flex-direction: column; gap: 20px; }

/* Stat cards */
.cockpit-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
}
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius) var(--radius) 0 0; }
.stat-card--blue::before   { background: var(--primary); }
.stat-card--green::before  { background: var(--success); }
.stat-card--orange::before { background: var(--warning); }
.stat-card--red::before    { background: var(--danger); }
.stat-icon { display: flex; }
.stat-card--blue   .stat-icon { color: var(--primary); }
.stat-card--green  .stat-icon { color: var(--success); }
.stat-card--orange .stat-icon { color: var(--warning); }
.stat-card--red    .stat-icon { color: var(--danger); }
.stat-value { font-size: 34px; font-weight: 800; line-height: 1; }
.stat-card--blue   .stat-value { color: var(--primary); }
.stat-card--green  .stat-value { color: var(--success); }
.stat-card--orange .stat-value { color: var(--warning); }
.stat-card--red    .stat-value { color: var(--danger); }
.stat-label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }

/* Grid rows */
.cockpit-row-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }
.cockpit-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

/* Widget */
.cockpit-widget {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 16px;
}
.widget-header { display: flex; align-items: center; justify-content: space-between; }
.widget-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }
.empty-chart { padding: 24px 0; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Actie vereist */
.actie-ok { display:flex; align-items:center; gap:8px; color:var(--success); font-size:13px; padding:8px 0; }
.actie-table { width:100%; border-collapse:collapse; }
.actie-table th {
  font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;
  padding:0 12px 8px 0; text-align:left; border-bottom:1px solid var(--border);
}
.actie-table td { padding:9px 12px 9px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:13px; }
.actie-row { cursor:pointer; }
.actie-row:hover td { background:rgba(245,158,11,.05); }
.actie-naam { font-weight:500; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.actie-fase { color:var(--text-2); font-size:12px; white-space:nowrap; }
.actie-days { color:var(--warning); font-weight:600; font-size:12px; white-space:nowrap; }
.widget-more-btn { font-size:12.5px; color:var(--primary); background:none; border:none; cursor:pointer; padding:2px 0; margin-top:-4px; }
.widget-more-btn:hover { text-decoration:underline; }

/* Recente activiteit */
.activity-list { list-style:none; display:flex; flex-direction:column; }
.activity-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer; border-radius:6px; transition:background var(--transition);
}
.activity-item:last-child { border-bottom:none; }
.activity-item:hover { background:var(--bg-hover); }
.activity-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--primary); }
.activity-dot--new { background:var(--success); }
.activity-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.activity-name { font-weight:500; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-action { font-size:11.5px; color:var(--text-muted); }
.activity-time { font-size:11.5px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }

/* Donut chart */
.donut-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; }
.donut-legend { list-style:none; width:100%; display:flex; flex-direction:column; gap:7px; }
.donut-leg-item { display:flex; align-items:center; gap:8px; font-size:12.5px; }
.donut-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.donut-leg-label { flex:1; color:var(--text-2); }
.donut-leg-count { font-weight:600; color:var(--text); min-width:20px; text-align:right; }
.donut-leg-pct { color:var(--text-muted); font-size:11.5px; min-width:36px; text-align:right; }

/* Funnel tooltip */
.cockpit-tooltip {
  position:fixed; z-index:9000; display:none;
  background:var(--bg-card); border:1px solid var(--border-hover);
  border-radius:var(--radius-sm); padding:12px 16px;
  font-size:12.5px; color:var(--text-2); pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.6); min-width:170px;
}
.tip-title { font-weight:700; color:var(--text); margin-bottom:8px; font-size:13px; }
.tip-row { display:flex; justify-content:space-between; gap:16px; margin-top:3px; }
.tip-row b { color:var(--text); }

/* ── Nav Dropdown ───────────────────────────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500;
  color: var(--text-2);
  transition: color var(--transition), background var(--transition);
  background: none; border: none; cursor: pointer;
}
.nav-dropdown-trigger:hover { color: var(--text); background: var(--bg-hover); }
.nav-dropdown-trigger.active { color: var(--primary); background: var(--primary-dim); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 4px;
  display: none; flex-direction: column; gap: 2px;
  z-index: 300;
}
.nav-dropdown-menu.open { display: flex; }
.nav-dropdown-item {
  display: block; padding: 8px 12px;
  border-radius: 5px;
  font-size: 13.5px; color: var(--text-2);
  transition: color var(--transition), background var(--transition);
}
.nav-dropdown-item:hover { color: var(--text); background: var(--bg-hover); }

/* ── Detail Page Layout ─────────────────────────────────────────────────────── */
.detail-page { max-width: 960px; }
.detail-page-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 32px;
}
.detail-page-title { font-size: 20px; font-weight: 700; flex: 1; }

/* ── Artikelen Table ────────────────────────────────────────────────────────── */
.artikelen-table {
  width: 100%; border-collapse: collapse;
  margin-top: 16px;
}
.artikelen-table th {
  padding: 10px 16px;
  text-align: left; font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.artikelen-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.artikelen-table tfoot td { border-top: 2px solid var(--border); border-bottom: none; }
.artikelen-row { cursor: pointer; transition: background var(--transition); }
.artikelen-row:hover { background: var(--bg-hover); }
.artikel-thumb-cell { width: 56px; padding: 8px 12px; }
.artikel-thumb {
  width: 36px; height: 36px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--border);
}
.artikel-thumb-placeholder {
  width: 36px; height: 36px; border-radius: 6px;
  background: var(--bg-hover); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.artikel-naam-cell { font-weight: 500; color: var(--text); }
.artikel-meta-cell { color: var(--text-2); font-size: 13px; font-family: 'JetBrains Mono', monospace; }
.artikel-prijs-cell { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.totaal-row td { background: var(--bg2); color: var(--text); }

/* ── Artikel Detail ─────────────────────────────────────────────────────────── */
.artikel-detail-body {
  display: grid; grid-template-columns: 320px 1fr; gap: 40px;
  align-items: start;
}
.artikel-detail-img { display: flex; flex-direction: column; gap: 10px; }
.artikel-img-main {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border);
}
.artikel-img-placeholder {
  width: 100%; aspect-ratio: 1;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.artikel-img-strip {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.artikel-img-strip-item {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: 6px; border: 2px solid var(--border);
  cursor: pointer; transition: border-color var(--transition);
}
.artikel-img-strip-item:hover,
.artikel-img-strip-item.active { border-color: var(--primary); }
.artikel-detail-fields { display: flex; flex-direction: column; gap: 20px; }
.artikel-field {}
.artikel-field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; }
.artikel-field-value { font-size: 14px; color: var(--text); }
.artikel-field-prijs { font-size: 22px; font-weight: 700; color: var(--text); }

/* ── Artikel Form ───────────────────────────────────────────────────────────── */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.artikel-form-body {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 680px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px;
  resize: vertical; line-height: 1.5;
  transition: border-color var(--transition);
}
.textarea:focus { outline: none; border-color: var(--primary); }

/* ── Info Banner ────────────────────────────────────────────────────────────── */
.info-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 8px;
  background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2);
  border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   INKOOP MODULE
   ══════════════════════════════════════════════════════════════════════════════ */

/* .page-header / .page-title / .page-subtitle — defined globally above */

/* ── Extra badge ────────────────────────────────────────────────────────────── */
.badge-purple { background: rgba(139,92,246,.15); color: #a78bfa; }

/* ── Form control (modal inputs/selects) ────────────────────────────────────── */
.form-control {
  width: 100%; padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px;
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.form-control:focus { outline: none; border-color: var(--primary); }
.form-control:is(select) { cursor: pointer; }
.form-control:is(textarea) { resize: vertical; line-height: 1.5; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }

/* ── Wide modal ─────────────────────────────────────────────────────────────── */
.modal--wide { max-width: 960px; max-height: 90vh; overflow-y: auto; }

/* ── Modal form grid ────────────────────────────────────────────────────────── */
.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
  margin-bottom: 4px;
}
.form-group--full  { grid-column: 1 / -1; }
.form-group--half  { grid-column: span 2; }

/* ── Checkbox label ─────────────────────────────────────────────────────────── */
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); font-size: 13.5px; }
.checkbox-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); }

/* ── Data table (shared for inkoop tables) ──────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  text-align: left; padding: 10px 16px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.data-row:last-child td { border-bottom: none; }
.data-row:hover td { background: var(--bg-hover); }
.data-row { cursor: default; }
.td-naam { max-width: 260px; }
.td-actions { white-space: nowrap; text-align: right; }
.totaal-row td { color: var(--text); font-weight: 600; }

/* ── Detail grid ────────────────────────────────────────────────────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.detail-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.detail-card--full { grid-column: 1 / -1; }
.card-title { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px; }
.detail-notes { color: var(--text); line-height: 1.6; font-size: 13.5px; margin: 0; white-space: pre-wrap; }

/* ── Info rows ──────────────────────────────────────────────────────────────── */
.info-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 12px; font-weight: 600; color: var(--text-2); min-width: 130px; flex-shrink: 0; }
.info-value { font-size: 13.5px; color: var(--text); flex: 1; }
.info-value a { color: var(--primary); text-decoration: none; }

/* ── Gantt chart ────────────────────────────────────────────────────────────── */
.gantt-section { margin-bottom: 24px; }
.gantt-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; position: relative;
}
.gantt-empty { color: var(--text-2); font-size: 13px; padding: 16px; margin: 0; }
.gantt-months-header { display: flex; background: var(--bg2); border-bottom: 1px solid var(--border); }
.gantt-month-cell {
  font-size: 10.5px; font-weight: 600; color: var(--text-2); text-align: center;
  padding: 6px 4px; border-right: 1px solid var(--border); text-transform: uppercase; letter-spacing: .04em;
  box-sizing: border-box;
}
.gantt-today-line {
  position: absolute; top: 32px; bottom: 0; width: 1px;
  background: var(--danger); opacity: .5; pointer-events: none; z-index: 1;
}
.gantt-track-row {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border); min-height: 36px;
}
.gantt-track-row:last-child { border-bottom: none; }
.gantt-track-label {
  width: 180px; min-width: 180px; flex-shrink: 0;
  font-size: 12px; color: var(--text); padding: 6px 12px;
  border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-track-bar-area { flex: 1; position: relative; height: 36px; }
.gantt-bar {
  position: absolute; top: 8px; bottom: 8px;
  border-radius: 4px; opacity: .8; cursor: default; min-width: 4px;
  transition: opacity .15s;
}
.gantt-bar:hover { opacity: 1; }

/* ── Order status timeline ──────────────────────────────────────────────────── */
.ost-timeline { display: flex; flex-direction: column; gap: 0; }
.ost-step { display: flex; gap: 12px; }
.ost-spine { display: flex; flex-direction: column; align-items: center; width: 20px; flex-shrink: 0; }
.ost-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  background: var(--bg-hover); border: 2px solid var(--border);
  transition: background .2s, border-color .2s;
}
.ost-step.done .ost-dot  { background: var(--success); border-color: var(--success); }
.ost-step.active .ost-dot { background: var(--primary); border-color: var(--primary); }
.ost-line { width: 2px; flex: 1; min-height: 20px; background: var(--border); margin: 2px 0; }
.ost-step.done .ost-line  { background: var(--success); }
.ost-content { display: flex; flex-direction: column; padding-bottom: 16px; }
.ost-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.ost-step.active .ost-label { color: var(--primary); }
.ost-step.done .ost-label   { color: var(--text); }
.ost-date { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ── Order status timeline — horizontal (inkooporder detail) ────────────────── */
.ost-panel { padding: 20px; }
.ost-timeline-h { display: flex; align-items: flex-start; }
.ost-step-h { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.ost-row-h { display: flex; align-items: center; width: 100%; }
.ost-dot-h {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-hover); border: 2px solid var(--border);
  transition: background .2s, border-color .2s;
}
.ost-step-h.done .ost-dot-h, .ost-step-h.active .ost-dot-h { background: var(--primary); border-color: var(--primary); }
.ost-line-h { flex: 1; height: 2px; background: var(--border); transition: background .2s; }
.ost-line-h.done { background: var(--primary); }
.ost-line-h.invisible { background: transparent; }
.ost-content-h { display: flex; flex-direction: column; margin-top: 8px; }
.ost-label-h { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ost-step-h.active .ost-label-h { color: var(--primary); }
.ost-step-h.done .ost-label-h   { color: var(--text); }
.ost-date-h { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ost-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }

/* ── Zendingen in order detail ──────────────────────────────────────────────── */
.zen-section { margin-top: 16px; }
.zen-block {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.zen-block-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.zen-block-num { font-weight: 700; color: var(--text); font-size: 14px; }
.zen-block-date { font-size: 12px; color: var(--text-2); }
.zen-block-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-2); margin-bottom: 10px; flex-wrap: wrap; }
.zen-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.zen-table th { color: var(--text-2); font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.zen-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.zen-table tr:last-child td { border-bottom: none; }

/* ── Split modal ────────────────────────────────────────────────────────────── */
.split-zen-block {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px;
}
.split-zen-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* ── Shared type-ahead dropdown (attachTypeahead() in app.js) ───────────────── */
.ta-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.5);
  max-height: 220px; overflow-y: auto;
}
.ta-dropdown.hidden { display: none; }
.ta-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; font-size: 13px; color: var(--text); cursor: pointer;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.ta-item:last-child { border-bottom: none; }
.ta-item:hover { background: var(--bg-hover); }
.ta-item-sub { font-size: 11px; color: var(--text-2); flex-shrink: 0; }
.ta-item--create { color: var(--primary); font-weight: 600; }
.ta-item--create:hover { background: var(--bg-hover); }

/* ── Totaal display in order modal ──────────────────────────────────────────── */
.ord-totaal-display { font-size: 14px; font-weight: 700; color: var(--text); }

/* ── Filter bar (legacy alias — new pages use .toolbar defined globally) ──────── */
.filter-bar { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.filter-select {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  transition: border-color var(--transition);
}
.filter-select:focus { outline: none; border-color: var(--primary); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-danger-ghost {
  background: transparent; border: 1px solid var(--danger);
  color: var(--danger); padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-danger-ghost:hover { background: var(--danger-dim); }
/* .btn-success / .btn-warning — defined globally above */

/* ── Section title ──────────────────────────────────────────────────────────── */
.section-title { font-size: 14px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; }

/* ── Lines table in order modal ─────────────────────────────────────────────── */
.ord-lines-table { table-layout: fixed; }
.ord-lines-table .form-control { padding: 6px 8px; font-size: 12.5px; }
.ord-lines-table .col-artikel   { width: auto; }
.ord-lines-table .col-code      { width: 110px; }
.ord-lines-table .col-prijs     { width: 110px; }
.ord-lines-table .col-qty       { width: 80px; }
.ord-lines-table .col-subtotaal { width: 100px; }
.ord-lines-table .col-del       { width: 36px; }
.line-subtotal { color: var(--text-2); font-size: 13px; white-space: nowrap; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════════
   MAGAZIJNEN MODULE
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Warehouse cards overview ────────────────────────────────────────────────── */
.mag-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.mag-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.mag-card:hover { border-color: var(--primary); background: var(--bg-hover); }
.mag-card:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.mag-card--inactief { opacity: .55; }
.mag-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mag-card-naam { font-size: 17px; font-weight: 700; color: var(--text); flex: 1; }
.mag-card-inactief-note { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.mag-card-stats { display: flex; gap: 24px; }
.mag-stat { display: flex; flex-direction: column; gap: 2px; }
.mag-stat-val { font-size: 20px; font-weight: 700; color: var(--text); }
.mag-stat-lbl { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }

/* ── Thumbnail in tables ─────────────────────────────────────────────────────── */
.td-thumb { width: 40px; padding: 6px 8px !important; }
.art-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; display: block; }
.art-thumb-empty { width: 36px; height: 36px; border-radius: 4px; background: var(--bg-hover); }
.td-code { font-size: 12px; color: var(--text-2); font-family: monospace; }

/* ── "Voorraad bijwerken" dropdown menu ──────────────────────────────────────── */
.mag-update-menu-wrap { position: relative; }
.mag-update-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.5);
  min-width: 200px;
}
.mag-update-menu.hidden { display: none; }
.mag-update-item {
  display: block; width: 100%; text-align: left;
  padding: 11px 16px; font-size: 13px; color: var(--text);
  background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.mag-update-item:last-child { border-bottom: none; }
.mag-update-item:hover { background: var(--bg-hover); }

/* ── Inline qty edit ─────────────────────────────────────────────────────────── */
.mag-qty-input { width: 80px; text-align: right; padding: 5px 8px; font-size: 13px; }

/* ── PDF import modal ────────────────────────────────────────────────────────── */
.pdf-upload-label {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px; border: 2px dashed var(--border);
  border-radius: var(--radius); cursor: pointer; color: var(--text-2);
  transition: border-color .15s, color .15s;
  font-size: 14px;
}
.pdf-upload-label:hover { border-color: var(--primary); color: var(--primary); }
.pdf-preview-table-wrap { max-height: 320px; overflow-y: auto; }
.diff-pos { color: var(--success); font-weight: 600; }
.diff-neg { color: var(--danger);  font-weight: 600; }

/* ── Settings: Magazijnen ────────────────────────────────────────────────────── */
.settings-empty { color: var(--text-2); font-size: 13.5px; margin: 0; padding: 8px 0; }
.settings-mag-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.settings-mag-row:last-of-type { border-bottom: none; }
.settings-mag-info { display: flex; align-items: center; gap: 8px; }
.settings-mag-naam { font-size: 14px; font-weight: 600; color: var(--text); }
.settings-mag-actions { display: flex; gap: 6px; }

/* ── Voorraadwaarde per-warehouse totals ─────────────────────────────────────── */
.mag-totalen-row {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 0;
}
.mag-totaal-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 18px; min-width: 160px;
}
.mag-totaal-card--grand { border-color: var(--primary); }
.mag-totaal-naam { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin-bottom: 4px; }
.mag-totaal-waarde { font-size: 18px; font-weight: 700; color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════════
   FACTUUR SCANNER MODULE
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Upload area ─────────────────────────────────────────────────────────────── */
.factuur-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 64px 40px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color .15s, background .15s;
  cursor: pointer;
  max-width: 680px; margin: 0 auto;
}
.factuur-upload-area:hover,
.factuur-upload-area.drag-over {
  border-color: var(--primary);
  background: var(--primary-dim);
}
.factuur-upload-icon { font-size: 48px; line-height: 1; margin-bottom: 4px; }
.factuur-upload-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.factuur-upload-sub   { font-size: 13px; color: var(--text-muted); margin: 0; }
.factuur-upload-hint  { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── Parsing status ──────────────────────────────────────────────────────────── */
.factuur-parsing {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px; text-align: center; color: var(--text-2);
}
.factuur-parsing-icon { font-size: 36px; }
.factuur-parsing p { margin: 0; font-size: 14px; }
.factuur-parsing.error { color: var(--danger); }

/* ── Review layout (split pane) ──────────────────────────────────────────────── */
.factuur-review-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .factuur-review-layout { grid-template-columns: 1fr; }
}
.factuur-pdf-pane {
  position: sticky; top: 92px;
  display: flex; flex-direction: column; gap: 8px;
}
.factuur-pdf-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}
.factuur-pdf-frame {
  width: 100%; height: calc(100vh - 160px); min-height: 500px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
}
.factuur-form-pane { display: flex; flex-direction: column; gap: 20px; }

/* ── Review sections ─────────────────────────────────────────────────────────── */
.rev-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.rev-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 0 0 14px;
}
.rev-section-count { font-weight: 400; color: var(--text-muted); }

/* ── Match indicators ────────────────────────────────────────────────────────── */
.rev-ok      { font-size: 12px; color: var(--success); margin: 6px 0 0; }
.rev-warning { font-size: 12px; color: var(--warning); margin: 6px 0 0; }
.rev-warning strong { color: var(--text); }
.btn-link {
  background: none; border: none; color: var(--primary); cursor: pointer;
  font-size: 12px; text-decoration: underline; padding: 0;
}
.btn-link:hover { color: var(--primary-h); }

/* ── EUR conversion box ──────────────────────────────────────────────────────── */
.rev-eur-box {
  margin-top: 12px; padding: 12px 16px;
  background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.2);
  border-radius: var(--radius-sm);
}
.rev-eur-label { font-size: 12px; font-weight: 600; color: var(--primary); }
.rev-eur-hint  { font-size: 11.5px; color: var(--text-muted); margin: 6px 0 0; }

/* ── Lines table in review ───────────────────────────────────────────────────── */
.rev-lines-table { table-layout: fixed; }
.rev-lines-table .col-art    { width: auto; }
.rev-lines-table .col-model  { width: 100px; }
.rev-lines-table .col-qty    { width: 110px; }
.rev-lines-table .col-prijs  { width: 140px; }
.rev-lines-table .col-gemikp { width: 100px; text-align: right; color: var(--text-2); }
.rev-lines-table .col-ctn    { width: 84px; }
.rev-lines-table .col-sub    { width: 90px; }
/* ✕-kolom: breed genoeg voor de 28px-knop; de standaard 16px celpadding drukte hem
   buiten de tabelrand */
.rev-lines-table .col-del    { width: 48px; }
.rev-lines-table td.col-del  { padding-left: 4px; padding-right: 4px; }
/* Verwijder-knop altijd zichtbaar in de review-tabel (de hover-reveal hierboven geldt
   alleen voor .product-row, waardoor de knop hier onzichtbaar bleef) */
.rev-line-row .tbl-btn { opacity: 1; }
/* Valuta-symbool buiten het invoerveld (Inkoopprijs) */
.input-affix { display: flex; align-items: center; gap: 6px; }
.input-affix .rev-cur-sym { color: var(--text-muted); font-size: 13px; width: 14px; text-align: center; flex-shrink: 0; }
.input-affix .form-control { flex: 1; min-width: 0; }
/* Exact-variant: geen split-view maar boven (boeking/bron) / onder (voorstel) —
   alle blokken verticaal op volle breedte met uniforme, kleine tussenruimte */
.factuur-review-layout.exact { grid-template-columns: 1fr; gap: 8px; }
.factuur-review-layout.exact .factuur-form-pane { gap: 8px; }
.exact-bron-pane { display: flex; flex-direction: column; gap: 8px; }
.rev-group-label {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 4px 0 0;
}
/* Bron-blokken (Exact-boeking) visueel onderscheiden van het order-voorstel */
.rev-section--bron { border-left: 3px solid #8b5cf6; background: rgba(139,92,246,.04); }
.factuur-review-layout.exact .rev-lines-table .col-art { width: 40%; }
.rev-match-badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:700; margin-right:4px; flex-shrink:0; vertical-align:middle; }
.rev-match-badge.ok  { background: var(--success-dim); color: var(--success); }
.rev-match-badge.unk { background: var(--warning-dim); color: var(--warning); }

/* ── Totaal row in review ────────────────────────────────────────────────────── */
.rev-totaal-row { display:flex; align-items:center; gap:12px; }
.rev-totaal-label   { font-size:12px; color:var(--text-2); }
.rev-totaal-value   { font-size:15px; font-weight:700; color:var(--text); }
.rev-totaal-factuur { font-size:12px; color:var(--text-muted); }
.rev-totaal-mismatch { font-size:12px; color:var(--warning); margin-top:4px; }

/* ── Factuur link in order detail ────────────────────────────────────────────── */
.factuur-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--primary); font-weight: 500;
  padding: 6px 0;
}
.factuur-link:hover { text-decoration: underline; }

/* Bol.com integratie (instellingen) */
.bol-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.bol-status { font-size: 12.5px; color: var(--text-muted); }
.bol-warn { background: var(--warning-dim); border: 1px solid var(--warning); color: var(--text);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.5; }
.bol-warn code { background: var(--bg2); padding: 1px 5px; border-radius: 4px; }
.bol-overzicht { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.bol-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }

/* Bol-marge (Financieel) */
.ta-r { text-align: right; }
.marge-neg { color: var(--danger); }
.marge-pos { color: var(--success); }
.marge-warn { color: var(--warning); }

.mag-actief-list { display: flex; flex-direction: column; gap: 6px; }
.mag-actief-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; user-select: none;
}
.mag-actief-row input { cursor: pointer; }
.mag-actief-naam { flex: 1; }
.mag-actief-aantal { color: var(--text-muted); font-size: 13px; }
.marge-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.marge-note { font-size: 13px; font-weight: 400; color: var(--text-muted); }

/* ── Dropdown-chevron: eigen pijl, altijd bínnen het veld ─────────────────────────
   Geldt voor alle select-varianten (ook toekomstige met deze klassen). Staat bewust
   onderaan het bestand: eerdere `background:`-shorthands (o.a. .select, .filter-select)
   zouden de pijl anders wissen. */
.select, select.form-control, .filter-select, .phase-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 32px;
}

/* ── Bol productdatabase ────────────────────────────────────────────────────── */
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable:hover { color: var(--text-2); }
.data-table th.sort-active { color: var(--primary); }
.data-row:hover .tbl-btn { opacity: 1; }
.filter-input {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 8px 12px; font-size: 13px; width: 110px;
  transition: border-color var(--transition);
}
.filter-input:focus { outline: none; border-color: var(--primary); }
.pdb-wrap { overflow-x: auto; }   /* .table-wrap knipt (overflow:hidden); de brede kolommenset moet kunnen scrollen */
.pdb-wrap .data-table th, .pdb-wrap .data-table td { white-space: nowrap; }
.pdb-titel { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdb-ean { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.pdb-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 16px 0; color: var(--text-2); font-size: 13px;
}
.pdb-runkaart, .pdb-configkaart {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 14px;
}
.pdb-run-flex { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pdb-pulse { color: var(--primary); animation: pdb-pulse 1.2s ease-in-out infinite; }
@keyframes pdb-pulse { 50% { opacity: .25; } }
.pdb-configkaart { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pdb-configveld { display: flex; flex-direction: column; gap: 4px; }
.pdb-configveld .input { width: 120px; }